/*
Theme Name: MPMate
Theme URI: https://mpmate.com
Author: MPMate
Description: Landing page theme for MPMate — auto-replies for Facebook Marketplace sellers. A block theme: edit every heading, paragraph and FAQ answer in the editor.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mpmate
Tags: one-column, block-patterns, full-site-editing, landing-page
*/


:root{
  /* Brand, straight off the logo. Decorative only: the turquoise and the bright
     blue are far too light to carry text or sit behind white button labels. */
  --brand-teal:#16D5CE; --brand-blue:#12A5F5; --brand-red:#F6194C; --brand-navy:#0B1B45;

  --bg:#fbfcfe; --card:#fff; --line:#e4e8f0; --line-soft:#f0f3f8;
  --text:#0b1b45; --sub:#4a5570; --faint:#8590a8;
  /* A deepened brand blue for anything interactive, so links and buttons clear
     4.5:1 while still reading as the same colour family as the mark. */
  --accent:#0e6fc4; --accent-2:#16d5ce; --accent-soft:#e8f4fe;
  --ok:#0d7a52; --ok-soft:#e8f7f0;
  --warn:#8a5300; --warn-soft:#fdf3e4;
  --r:18px; --r-sm:12px;
  --shadow-sm:0 1px 2px rgba(11,27,69,.05);
  --shadow:0 2px 4px rgba(11,27,69,.04), 0 12px 32px -8px rgba(11,27,69,.12);
  --shadow-lg:0 4px 8px rgba(11,27,69,.05), 0 24px 60px -12px rgba(11,27,69,.18);
}
@media (prefers-color-scheme:dark){
:root{
  --brand-teal:#16D5CE; --brand-blue:#12A5F5; --brand-red:#FF3D68; --brand-navy:#0B1B45;

  --bg:#080c1a; --card:#101830; --line:#1e2740; --line-soft:#17203a;
  --text:#eaeef8; --sub:#95a0bc; --faint:#6b7794;
  --accent:#57b6ff; --accent-2:#16d5ce; --accent-soft:#0f2340;
  --ok:#4ecf95; --ok-soft:#0f2a1d;
  --warn:#e0a94a; --warn-soft:#2a2112;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 2px 4px rgba(0,0,0,.35), 0 12px 32px -8px rgba(0,0,0,.55);
  --shadow-lg:0 4px 8px rgba(0,0,0,.35), 0 24px 60px -12px rgba(0,0,0,.65);
}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.narrow{max-width:660px}

h1,h2,h3{line-height:1.15;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(34px,6vw,58px);font-weight:700}
h2{font-size:clamp(24px,3.4vw,34px);font-weight:670;margin-bottom:12px}
h3{font-size:17px;font-weight:640;letter-spacing:-.012em}
p{margin:0 0 16px}
.sub{color:var(--sub)}
.small{font-size:14px}
.tiny{font-size:13px}
.center{text-align:center}
.hidden{display:none!important}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
nav.stuck{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:640;font-size:15px;letter-spacing:-.01em}
.mark{width:28px;height:28px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--brand-teal),var(--brand-blue));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px}
.nav-cta{opacity:0;transform:translateY(-4px);transition:.22s;pointer-events:none}
nav.stuck .nav-cta{opacity:1;transform:none;pointer-events:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#fff;border:0;border-radius:var(--r-sm);
  padding:14px 24px;font:inherit;font-size:16px;font-weight:620;cursor:pointer;
  transition:transform .12s,filter .12s,box-shadow .12s;box-shadow:0 1px 2px rgba(37,99,255,.3)}
.btn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px);
  box-shadow:0 6px 20px -6px rgba(37,99,255,.55)}
.btn:active:not(:disabled){transform:none}
.btn:disabled{opacity:.55;cursor:default}
.btn.sm{padding:9px 16px;font-size:14.5px}



.pill{display:inline-flex;align-items:center;gap:8px;background:var(--ok-soft);color:var(--ok);
  font-size:13px;font-weight:650;padding:6px 14px;border-radius:999px;margin-bottom:22px;
  letter-spacing:-.005em}
.pulse{width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 0 currentColor;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 60%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

.lede{font-size:clamp(17px,2.1vw,19.5px);color:var(--sub);margin:18px 0 28px;max-width:34em}
form{display:flex;gap:10px;flex-wrap:wrap;max-width:470px}
input[type=email]{flex:1;min-width:220px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:14px 16px;font:inherit;font-size:16px;color:var(--text);
  box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
input[type=email]:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);outline:none}
.formnote{font-size:13.5px;color:var(--faint);margin:12px 0 0}
.result{background:var(--ok-soft);color:var(--ok);border-radius:var(--r-sm);
  padding:16px 18px;font-size:15px;font-weight:520;max-width:470px}
.err{color:#d0392f;font-size:14px;margin:10px 0 0}

.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;font-size:13.5px;color:var(--sub)}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{color:var(--ok);flex:none}

/* ---------- app mock ---------- */
.mock{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;
  border-bottom:1px solid var(--line-soft);background:var(--line-soft)}
.mock-bar i{width:11px;height:11px;border-radius:50%;background:var(--line);display:block}
.mock-bar b{margin-left:8px;font-size:12.5px;font-weight:560;color:var(--sub)}
.mock-body{padding:18px}
.mock-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.mock-status{display:flex;align-items:center;gap:9px;font-weight:640;font-size:17px}
.mock-dot{width:10px;height:10px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px var(--ok-soft)}
.mock-btn{background:var(--line-soft);border:1px solid var(--line);border-radius:9px;
  padding:7px 14px;font-size:13.5px;font-weight:560;color:var(--sub)}
.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.mock-stat{background:var(--line-soft);border-radius:10px;padding:12px}
.mock-stat b{display:block;font-size:21px;font-weight:680;letter-spacing:-.02em}
.mock-stat span{font-size:11.5px;color:var(--faint)}
.mock-ev{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line-soft);font-size:13.5px}
.mock-ev:first-of-type{margin-top:14px}
.mock-ev em{color:var(--faint);font-style:normal;margin-left:auto;font-size:12px;white-space:nowrap}
.tick{color:var(--ok);font-weight:700}
.bang{color:var(--warn);font-weight:700}

/* ---------- sections ---------- */
section{padding:62px 0}
section.tight{padding:48px 0}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px}

/* chat demo */
.chat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:22px;max-width:560px}
.msg{max-width:80%;padding:11px 15px;border-radius:18px;margin-bottom:10px;font-size:15px}
.them{background:var(--line-soft);border-bottom-left-radius:6px}
.you{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 78%,var(--accent-2)));
  color:#fff;margin-left:auto;border-bottom-right-radius:6px;box-shadow:0 2px 10px -3px rgba(37,99,255,.5)}
.left-for-you{background:var(--warn-soft);color:var(--warn);border:1px dashed
  color-mix(in srgb,var(--warn) 35%,transparent);max-width:100%;font-size:14px;
  border-radius:12px;padding:12px 15px;margin-top:4px}

/* steps */

.time-badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);
  color:var(--accent);font-weight:640;font-size:14px;padding:8px 16px;border-radius:999px}

/* security */
.sec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:0}
@media (max-width:620px){.sec-grid{grid-template-columns:1fr}}
.sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  box-shadow:var(--shadow-sm)}
.sec.span{grid-column:1/-1}
@media (max-width:620px){.sec.span{grid-column:auto}}
.sec-ico{width:38px;height:38px;border-radius:11px;background:var(--ok-soft);color:var(--ok);
  display:grid;place-items:center;margin-bottom:14px}
.sec p{margin:6px 0 0;font-size:14.5px;color:var(--sub)}

/* comparison table */
.cmp{width:100%;border-collapse:separate;border-spacing:0;margin-top:34px;font-size:15px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow)}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line-soft)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp thead th{background:var(--line-soft);font-size:13px;font-weight:640;color:var(--sub);
  letter-spacing:.02em}
.cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center;width:23%}
.cmp .pro-col{background:color-mix(in srgb,var(--accent) 5%,transparent);font-weight:560}
.cmp thead .pro-col{background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent)}
.cmp .yes{color:var(--ok);font-weight:700}
.cmp .no{color:var(--faint)}
.cmp .val{font-weight:600;font-size:14px}
.plan-head{display:flex;flex-direction:column;gap:2px;align-items:center}
.plan-head b{font-size:15px;letter-spacing:-.01em}
.plan-head span{font-size:12.5px;color:var(--faint);font-weight:500}
.strike{text-decoration:line-through;color:var(--faint);font-weight:500;margin-right:5px}
@media (max-width:640px){
  .cmp{font-size:13.5px}.cmp th,.cmp td{padding:12px 10px}
  .cmp td:not(:first-child),.cmp th:not(:first-child){width:26%}
}

/* risk note */
.note{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 22%,transparent);
  border-radius:var(--r);padding:24px}
.note h3{color:var(--warn);margin-bottom:8px}
.note p{margin:0;font-size:15px}

/* faq */



.cta{background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:52px 32px;text-align:center;box-shadow:var(--shadow)}
.cta form{margin:24px auto 0;justify-content:center}

footer{padding:40px 0 56px;border-top:1px solid var(--line);color:var(--faint);font-size:13px}

.hero{padding:66px 0 78px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}}
.split{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
@media (max-width:960px){.split{grid-template-columns:1fr;gap:26px}}
.split-head{position:sticky;top:88px}
@media (max-width:960px){.split-head{position:static}}
.split-head h2{margin-bottom:10px}
.split-head p{margin:0;font-size:15px}

/* ---------- comparison against Meta's own suggestions ---------- */
.vs{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--card);box-shadow:var(--shadow-sm)}
.vs-head,.vs-row{display:grid;grid-template-columns:184px 1fr 1fr}
.vs-head{background:var(--line-soft)}
.vs-head div{padding:12px 18px;font-size:12px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sub)}
.vs-head .mine{color:var(--accent)}
.vs-row{border-top:1px solid var(--line-soft)}
.vs-label{padding:18px;font-size:14.5px;font-weight:700;
  border-right:1px solid var(--line-soft)}
.vs-cell{padding:18px;font-size:14.5px;line-height:1.55;color:var(--sub);
  border-right:1px solid var(--line-soft)}
.vs-cell:last-child{border-right:0}
.vs-cell.mine{color:var(--text);background:color-mix(in srgb,var(--accent) 4%,transparent)}
.vs-who{display:none}
/* Stacks into labelled blocks rather than a table that scrolls sideways. */
@media (max-width:860px){
  .vs-head{display:none}
  .vs-row{grid-template-columns:1fr;padding:4px 0}
  .vs-label{border-right:0;padding:14px 18px 4px}
  .vs-cell{border-right:0;padding:10px 18px}
  .vs-cell.mine{background:transparent}
  .vs-who{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--faint);margin-bottom:4px}
  .vs-cell.mine .vs-who{color:var(--accent)}
}
.fair{margin:18px 0 0;padding:16px 18px;border:1px dashed var(--line);
  border-radius:var(--r-sm);font-size:14px;line-height:1.6;color:var(--sub)}
.fair strong{color:var(--text)}

/* ---------- first-run install steps ---------- */
.ins{display:grid;gap:14px;margin:4px 0 0}
.ins-step{display:grid;grid-template-columns:34px 1fr;gap:15px;align-items:start}
/* The answer already sits in a card, so the steps inside it carry no border of their own. */
.install-answer{padding:0 18px 18px}
.install-answer p{padding:0}
/* Linked-to accordions must clear the sticky nav when scrolled into view. */
details[id]{scroll-margin-top:92px}
.ins-n{width:34px;height:34px;border-radius:11px;background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:15px}
.ins-step h3{margin:0 0 4px;font-size:15.5px}
.ins-step p{margin:0;font-size:14.5px;line-height:1.55;color:var(--sub)}
.ins-step strong{color:var(--text)}
/* A picture of the scary dialog, so it's familiar instead of alarming. */
.dlg{max-width:320px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-lg);padding:20px 18px 16px;text-align:center;
  margin:0 0 20px}
.dlg-ico{width:44px;height:44px;margin:0 auto 12px;border-radius:12px;
  background:var(--warn-soft);color:var(--warn);display:grid;place-items:center}
.dlg h4{margin:0 0 6px;font-size:14.5px}
.dlg p{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--sub)}
.dlg-btns{display:flex;gap:8px}
.dlg-btn{flex:1;padding:7px 10px;border-radius:8px;border:1px solid var(--line);
  font-size:12.5px;font-weight:600}
.dlg-cap{margin:0 0 18px;font-size:12px;color:var(--faint);text-align:center;max-width:320px}
.why{margin:18px 0 0;padding:16px 18px;border:1px dashed var(--line);
  border-radius:var(--r-sm);font-size:14px;line-height:1.6;color:var(--sub)}
.why strong{color:var(--text)}

/* ---------- background elements ---------- */
.band{position:relative;overflow:hidden;isolation:isolate}
.band > .wrap{position:relative;z-index:2}
.glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 70% at 18% 12%,color-mix(in srgb,var(--brand-blue) 26%,transparent),transparent 72%),
    radial-gradient(52% 62% at 82% 4%,color-mix(in srgb,var(--brand-teal) 22%,transparent),transparent 70%),
    radial-gradient(70% 50% at 50% 100%,color-mix(in srgb,var(--brand-blue) 10%,transparent),transparent 75%)}
.dots{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--sub) 22%,transparent) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 75%);opacity:.5}
.orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;
  opacity:.45;animation:drift 22s ease-in-out infinite alternate}
.orb.a{width:420px;height:420px;top:-120px;left:-90px;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-blue) 55%,transparent),transparent 68%)}
.orb.b{width:360px;height:360px;bottom:-140px;right:-70px;animation-delay:-8s;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-teal) 52%,transparent),transparent 68%)}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(34px,-26px,0) scale(1.09)}}

/* A tinted band breaks the page into panels instead of one white scroll. */
.tinted{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--brand-teal) 7%,transparent) 45%,transparent)}

/* ---------- scroll reveal ---------- */
/* Gated behind html.js: if the script never runs, nothing is hidden. A landing page
   that depends on JS to become visible is one error away from being blank. */
.js .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}
/* The fail-safe path: end state, no transition or keyframe to wait on. */
.no-anim .reveal{transition:none!important}
.no-anim .chat .msg,.no-anim .chat .left-for-you{animation:none!important;opacity:1!important}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}
  .orb{animation:none}}

/* ---------- setup on its own full row ---------- */
.setup-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
@media (max-width:860px){.setup-row{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.step::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-teal));
  transform:scaleX(0);transform-origin:left;transition:transform .35s}
.step:hover::after{transform:scaleX(1)}
.step-n{width:34px;height:34px;border-radius:11px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:700;font-size:15px;margin-bottom:16px}
.step h3{margin-bottom:6px}
.step p{margin:0;font-size:14.5px;color:var(--sub)}

/* ---------- questions ---------- */
.qa{display:flex;flex-direction:column;gap:8px}
.qa-group{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin:22px 0 4px;display:flex;align-items:center;gap:12px}
.qa-group:first-child{margin-top:0}
.qa-group::after{content:"";flex:1;height:1px;background:var(--line)}
details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .2s,box-shadow .2s}
details:hover{border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
details[open]{box-shadow:var(--shadow-sm);border-color:color-mix(in srgb,var(--accent) 38%,var(--line))}
details summary{cursor:pointer;list-style:none;padding:15px 18px;display:flex;
  justify-content:space-between;align-items:center;gap:14px;font-size:16px;font-weight:560}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg) translateY(-2px);transition:transform .25s}
details[open] summary::after{transform:rotate(225deg) translateY(-2px);border-color:var(--accent)}
details p{margin:0;padding:0 18px 17px;font-size:15px;color:var(--sub);
  animation:answer .32s cubic-bezier(.2,.7,.3,1)}
@keyframes answer{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* chat bubbles arrive in sequence once seen */
.chat.in .msg,.chat.in .left-for-you{animation:pop .5s both cubic-bezier(.2,.7,.3,1)}
.chat.in .msg:nth-child(1){animation-delay:.05s}
.chat.in .msg:nth-child(2){animation-delay:.35s}
.chat.in .msg:nth-child(3){animation-delay:.65s}
.chat.in .msg:nth-child(4){animation-delay:.95s}
.chat.in .msg:nth-child(5){animation-delay:1.25s}
.chat.in .left-for-you{animation-delay:1.55s}
.js .chat .msg,.js .chat .left-for-you{opacity:0}
.js .chat.in .msg,.js .chat.in .left-for-you{opacity:1}
@keyframes pop{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.chat .msg,.chat .left-for-you{opacity:1;animation:none}}

/* ============================================================
   WordPress adjustments
   The design above was written for a standalone page. These rules
   undo what the block editor adds on top of it.
   ============================================================ */

/* Blocks are laid out by the design's own grids, so the global block gap
   must not inject vertical margins between every element. */
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.wp-block-group { margin: 0; }

/* core/group adds .wp-block-group alongside the design's own class; the
   design's grid and flex rules do the work, so keep the wrapper neutral. */
.wp-block-group.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* core/heading and core/paragraph carry their own margins in some themes. */
.wp-block-heading { margin-top: 0; }

/* core/table wraps the table in a <figure>, which has a default margin and
   no overflow handling. The plans table must scroll rather than break out. */
.wp-block-table { margin: 0; overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table td, .wp-block-table th { border: 0; }

/* core/details renders the same <details> the design already styles. */
.wp-block-details { }
.wp-block-details summary { cursor: pointer; }

/* The editor canvas has no <body> background, so paint it for the preview. */
.editor-styles-wrapper { background: var(--bg); }

/* Name + tagline in the header. */
.brand-tag {
  font-size: 13px; font-weight: 500; color: var(--sub);
  padding-left: 12px; margin-left: 12px; border-left: 1px solid var(--line);
}
@media (max-width: 720px) { .brand-tag { display: none; } }

/* Brand and tagline sit on one line; the tagline comes from Settings > General. */
.brand-row { display: flex; align-items: center; min-width: 0; }
.brand-tag { margin: 0; }
/* Button links wrapped in paragraphs so their text is editable as normal text. */
.nav-cta-p, .btn-p { margin: 0; }

/* Utilities replacing inline styles, which block validation rejects. */
.u-m-0 { margin:0; }
.u-mb-10 { margin-bottom:10px; }
.u-mb-16 { margin-bottom:16px; }
.u-mt-0 { margin-top:0; }
.u-mt-14 { margin-top:14px; }
.u-mt-18 { margin-top:18px; }
.u-narrow-center { max-width:36em;margin:0 auto; }

/* core/table puts the class on the <figure>, so reach the table through it. */
.wp-block-table.cmp { margin-top: 34px; }
.wp-block-table.cmp table { width:100%; border-collapse:separate; border-spacing:0; font-size:15px; }

/* The logo mark, inlined in the header. */
.mark-svg { width: 28px; height: 28px; flex: none; display: block; }

/* Stated explicitly rather than left to the browser: defaults differ between
   Chrome, Safari and Firefox, and the Brevo form has to match whatever we pick. */
input[type=email]::placeholder{color:var(--faint);opacity:1}

/* ---------- Brevo signup form, matched to the page ----------
   Brevo's own sib-styles.css is still loaded, because their main.js expects the
   classes it defines. These rules sit after it and are scoped by id, so they win
   without needing !important on everything.

   .input--hidden and .sib-hide-loader-icon are redefined here on purpose: they are
   the two rules the form breaks visibly without (a visible honeypot field and a
   permanently visible spinner) if Brevo's stylesheet ever fails to load. */

/* Brevo sets Roboto on its container. Inheriting from it inherits Roboto, so the
   page's stack is stated outright, on the form and everything inside it. */
#sib-form, #sib-form input, #sib-form button, #sib-form label,
.sib-form-message-panel, .sib-form-message-panel * {
  font-family: -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif;
}

.sib-form { background: transparent; padding: 0; text-align: left; }
#sib-form-container { max-width: 470px; }
#sib-container {
  max-width: none; background: transparent; border: 0; border-radius: 0;
  padding: 0; text-align: left;
}

/* Input and button on one row, exactly like the page's other forms. */
#sib-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 470px; margin: 0; }
#sib-form > div { padding: 0; margin: 0; }
#sib-form .sib-input { flex: 1; min-width: 220px; }
#sib-form .form__entry,
#sib-form .form__label-row,
#sib-form .entry__field {
  margin: 0; padding: 0; border: 0; background: none; display: block;
}
/* Brevo sizes .entry__field as a column of a label/field pair; we have no label. */
#sib-form .entry__field { width: 100%; }

#sib-form input.input {
  width: 100%; box-sizing: border-box; height: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px 16px; font: inherit; font-size: 16px; color: var(--text);
  box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s;
}
#sib-form input.input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: none;
}
#sib-form input.input::placeholder {
  color: var(--faint); text-align: left; opacity: 1;
}

/* The button already carries class="btn"; this only undoes Brevo's own sizing. */
#sib-form .sib-form-block__button {
  text-align: center; width: auto; height: auto; margin: 0; min-height: 0;
  /* Brevo sets its own weight and line-height, which made the button 2px shorter
     and narrower than every other button on the page. */
  font-size: 16px; font-weight: 620; line-height: inherit; letter-spacing: inherit;
}
/* The page's own button is a direct flex item, so it stretches to the input's
   height. Brevo wraps its button in a block div, which swallowed that stretch —
   making the button 2px shorter. Passing the stretch through fixes it. */
#sib-form .sib-form-block.sib-submit-block { flex: none; display: flex; align-items: stretch; }

/* Field-level validation message. */
#sib-form .entry__error {
  display: block; margin: 8px 0 0; padding: 0; background: none; border: 0;
  color: #d0392f; font-size: 14px; text-align: left;
}
#sib-form .entry__error:empty { display: none; }

/* Brevo's JS reveals these by setting an inline display, so keep them hidden
   at zero specificity — the same trick their own embed code uses. */
:where(.sib-form-message-panel) { display: none; }
.sib-form-message-panel { max-width: 470px; margin: 0 0 14px; border-radius: var(--r-sm);
  padding: 14px 16px; font-size: 15px; border: 1px solid transparent; }
.sib-form-message-panel__text { display: flex; align-items: center; gap: 10px;
  text-align: left; }
.sib-form-message-panel .sib-notification__icon { width: 18px; height: 18px; flex: none; }
.sib-panel-ok { background: var(--ok-soft); color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.sib-panel-err { background: #fdecea; color: #a5251c;
  border-color: color-mix(in srgb, #d0392f 26%, transparent); }

/* Honeypot: must never be visible. */
#sib-form .input--hidden, .input--hidden { display: none; }
/* Spinner only shows while submitting. */
#sib-form .sib-hide-loader-icon { display: none; }
#sib-form .sib-form-block__button .icon { width: 16px; height: 16px; fill: currentColor; }