/* ============================================================
   00. TOKENS AND BASE
   Shared V2A design tokens. Every color on this page comes from
   here. Do not hardcode a hex value anywhere below.
   ============================================================ */
:root{
  --ink:#1C1814; --slate:#5C564E; --mute:#877F74; --line:#E8E2DA;
  --orange:#E8501A; --orange-deep:#C23E0E; --orange-soft:#FFF1E8; --orange-line:#F6CDB6;
  --cream:#FBF6F0; --cream-deep:#F5EBDF;
  --dark:#191512; --dark-2:#211B15; --dark-line:#3A332C; --dark-rule:#33291F;
  --paper:#FFFFFF; --green:#7ED9A2; --red:#E58080; --amber:#E5C280;
  --nav-h:66px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
body h1,body h2,body h3,body h4,body .display{font-family:'Bricolage Grotesque',sans-serif;line-height:1.12;letter-spacing:-0.015em}
a{color:inherit}
.wrap{max-width:1150px;margin:0 auto;padding:0 24px}
/* narrower measure, used by the FAQ so answers keep a readable line */
.wrap-narrow{max-width:880px}
section{padding:96px 0}
.sec-cream{background:var(--cream)}
.accent{color:var(--orange)}
/* Offset so a jumped-to section clears the sticky nav. */
[id]{scroll-margin-top:var(--nav-h)}

/* ---- shared section header ---- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-deep);background:var(--paper)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.h2{font-size:clamp(29px,3.7vw,42px);font-weight:700;margin-bottom:14px}
.h2 .accent{font-weight:800}
.h2-top{margin-top:18px}
.sec-intro{color:var(--slate);max-width:64ch;margin-bottom:40px}

/* ---- shared buttons ---- */
.btn{display:inline-block;font-weight:700;font-size:15.5px;border-radius:12px;padding:15px 28px;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;border:none;cursor:pointer;font-family:'Inter',sans-serif;text-align:center}
.btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(232,80,26,.28)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* ---- shared chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--ink)}

/* ============================================================
   01. HERO
   Sizing copied from the AI SEO page, and identical on the guest
   posting and blogger outreach pages: 70px top and 86px bottom
   padding, the same gradient plus dot texture, the same diagonal
   lower edge, 1.02fr to .98fr columns with a 48px gap, and the same
   H1 and kicker sizes. The right side visual is locked to 466px, the
   height of the constellation on the AI SEO page. Do not add chips
   or captions around it.

   min-height on the grid is why this hero measures the same as the
   others. Those pages carry a row of check chips under the CTAs,
   which this page does not, so without a floor this hero would sit
   roughly 120px shorter and the stats band would ride up the screen.
   One number to tune if the sibling pages ever change. It is
   released on mobile in the responsive block.
   ============================================================ */
.hero{position:relative;padding:70px 0 86px;background:linear-gradient(165deg,var(--cream) 0%,#FFF7F2 46%,#fff 100%);overflow:hidden;-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 46px));clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 46px))}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--cream-deep) 1.2px,transparent 1.2px);background-size:24px 24px;opacity:.7;pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;min-height:620px}
.hero h1{font-size:clamp(37px,4.8vw,56px);font-weight:800;margin:22px 0 18px;color:var(--ink)}
.hero .kicker{color:var(--slate);font-size:17.5px;max-width:58ch;margin-bottom:22px;line-height:1.72}
.kicker mark{background:linear-gradient(180deg,transparent 58%,#FFDCC9 58%);color:var(--ink);font-weight:600;padding:0 2px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-ctas .btn{padding:14px 22px;font-size:14.8px}

/* -- hero visual. One framed illustration, height locked to the
      reference page. No image assets, nothing to export. -- */
.stage{height:466px}
.anatomy{height:100%;display:flex;align-items:center;justify-content:center;background:var(--paper);border:1.5px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 20px 50px rgba(28,24,20,.09)}
.anatomy svg{width:100%;height:auto;max-height:100%;display:block}

/* ============================================================
   02. STATS BAND
   Shared V2A component. Same markup and sizes as every other
   service page. nth-child(even) alternates the color, which is the
   one place on this page where order matters: keep four items.
   ============================================================ */
/* padding:0 because this band is a <section> and would otherwise
   inherit the 96px section rhythm. The band is edge to edge. */
.stats-band{background:var(--dark);padding:0}
.stats-wrap{max-width:1240px;margin:0 auto;padding:0}
.stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr}
.stat{padding:34px 30px;color:#fff}
.stat:nth-child(even){background:var(--orange)}
.stat .st-num{font-family:'Bricolage Grotesque',sans-serif;font-size:34px;font-weight:800;line-height:1.05}
.stat .st-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:8px}
.stat .st-sub{font-size:12.5px;margin-top:5px;color:rgba(255,255,255,.78)}

/* ============================================================
   03. JUMP NAV
   Sticky for the whole page, one anchor per major section plus the
   orange CTA. It scrolls sideways rather than wrapping on narrow
   screens, which is why the links are nowrap and the strip is the
   scroll container. Section offset is handled by [id] above.
   ============================================================ */
.jump{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(9px);border-bottom:1.5px solid var(--line)}
.jump-in{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.jump-in::-webkit-scrollbar{display:none}
.jump a{flex-shrink:0;padding:15px 14px;font-size:13px;font-weight:600;color:var(--slate);text-decoration:none;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .18s,border-color .18s}
.jump a:hover{color:var(--ink);border-bottom-color:var(--orange)}
.jump a.here{color:var(--ink);border-bottom-color:var(--orange)}
.jump .j-cta{margin-left:auto;background:var(--orange);color:#fff;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;border-bottom:none}
.jump .j-cta:hover,.jump .j-cta.here{border-bottom-color:transparent;color:#fff}

/* ============================================================
   04. DEFINITION
   ============================================================ */
.def-box{position:relative;background:var(--cream);border:1.5px solid var(--line);border-radius:20px;padding:38px 42px 34px;max-width:860px;margin:26px 0 30px}
.def-mark{position:absolute;top:-26px;left:30px;font-family:'Bricolage Grotesque',sans-serif;font-size:84px;font-weight:800;color:var(--orange);line-height:1}
.def-text{font-size:19px;line-height:1.75}
.def-cap{margin-top:16px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep)}
.ai-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1.5px solid var(--line);border-radius:16px;padding:18px 24px;margin-bottom:28px}
.ai-label{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);white-space:nowrap}
.ai-chips{display:flex;gap:8px;flex-wrap:wrap}
.ai-chips span{border:1.5px solid var(--line);background:var(--cream);border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:700}
.ai-strip p{flex:1;min-width:260px;font-size:14px;color:var(--slate);margin:0}
.def-rel{display:flex;align-items:center;gap:18px;background:var(--dark);border-radius:16px;padding:22px 28px;color:#fff;flex-wrap:wrap}
.dr-big{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;white-space:nowrap}
.dr-txt{font-size:15px;color:#C9C2B8;flex:1;min-width:260px}
.dr-txt strong{color:#fff}

/* ============================================================
   05. PROBLEM
   ============================================================ */
.truth-line{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:38px}
.truth-line .t1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;color:var(--ink)}
.truth-line .t-slash{color:var(--orange);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px}
.truth-line .t2{font-size:16px;color:var(--slate)}
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prob{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:28px 26px;transition:border-color .15s,transform .15s;display:flex;flex-direction:column}
.prob:hover{border-color:var(--orange);transform:translateY(-3px)}
.prob .p-no{display:inline-flex;align-items:center;gap:8px;font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:800;color:var(--orange);letter-spacing:.06em;margin-bottom:14px}
.prob .p-x{width:24px;height:24px;border-radius:8px;background:var(--cream);border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--orange-deep);font-size:12px;font-weight:800}
.prob h3{font-size:18px;margin-bottom:4px}
.prob .p-sub{font-size:12.5px;font-weight:700;color:var(--orange-deep);margin-bottom:12px}
.prob p{font-size:14.5px;color:var(--slate)}
.prob-close{margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--ink);border-radius:16px;padding:22px 28px;color:#fff}
.prob-close .pc-txt{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px}
.prob-close a{white-space:nowrap;background:var(--orange);color:#fff;border-radius:999px;padding:10px 22px;font-size:13.5px;font-weight:700;text-decoration:none}
.prob-close a:hover{background:var(--orange-deep)}

/* ============================================================
   06. VETTING
   ============================================================ */
.vet-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vet{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;gap:16px;transition:border-color .15s,transform .15s}
.vet:hover{border-color:var(--orange);transform:translateY(-2px)}
.vet .n{flex-shrink:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--orange);font-size:15px;width:34px;height:34px;border-radius:10px;background:var(--cream);display:flex;align-items:center;justify-content:center;margin-top:2px}
.vet h3{font-size:16px;margin-bottom:4px}
.vet p{font-size:14px;color:var(--slate)}
.vet p a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.vet p a:hover{text-decoration:underline}
.vet-note{display:flex;gap:16px;align-items:baseline;background:var(--cream);border:1.5px solid var(--cream-deep);border-left:4px solid var(--orange);border-radius:0 16px 16px 0;padding:20px 26px;flex-wrap:wrap}
.vet-note b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;white-space:nowrap;font-size:15.5px}
.vet-note span{flex:1;min-width:260px;font-size:14.5px;color:var(--slate)}
.vet-note-top{margin:30px 0 28px}
.vet-note-end{margin-top:30px}

/* ============================================================
   07. PRICING
   Four plan cards. Each card is one copyable unit. The middle card
   carries .popular for the border and the flag, nothing else.
   Every button opens the invoice modal, see build note A.
   ============================================================ */
.pricing{background:var(--cream)}
.assure-chips{margin-bottom:40px}
.assure-chips .chip{background:var(--paper);display:inline-flex;align-items:center;gap:7px}
.assure-chips .chip::before{content:"\2713";color:var(--orange);font-weight:800}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.plan{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;position:relative;transition:border-color .15s,transform .15s}
.plan:hover{transform:translateY(-3px);border-color:#D8CFC2}
.plan.popular{border:2px solid var(--orange);box-shadow:0 18px 44px rgba(232,80,26,.13)}
.pop-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap}
.plan h3{font-size:20px}
.plan .for{font-size:12.5px;color:var(--slate);margin:5px 0 16px;min-height:38px;line-height:1.45}
.plan .price{font-family:'Bricolage Grotesque',sans-serif;font-size:36px;font-weight:800;letter-spacing:-.02em}
.plan .price small{font-size:13px;color:var(--slate);font-weight:600;font-family:'Inter',sans-serif}
.plan .price-quote{font-size:28px;padding:4px 0}
.plan ul{list-style:none;margin:16px 0 20px;flex:1}
.plan li{position:relative;padding:7px 0 7px 24px;font-size:13.5px;color:var(--ink);border-bottom:1px solid var(--cream-deep);line-height:1.45}
.plan li:last-child{border-bottom:none}
.plan li::before{content:"";position:absolute;left:2px;top:14px;width:8px;height:8px;background:var(--orange)}
.plan li.hl{font-weight:700}
.plan li.plus-head{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);padding-left:0;border-bottom:none;padding-bottom:2px}
.plan li.plus-head::before{display:none}
.plan .foot-line{font-size:12px;color:var(--slate);margin:-8px 0 16px;line-height:1.5;background:var(--cream);border-radius:10px;padding:10px 12px}
.plan .btn{font-size:14.5px;padding:13px 18px}
.price-foot{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pf{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:20px 24px;font-size:14px;color:var(--slate)}
.pf b{display:block;font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);margin-bottom:4px;font-size:15.5px}
.vol-banner{margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--dark);border-radius:18px;padding:30px 34px;color:#fff;border-top:4px solid var(--orange)}
.vol-banner h3{font-size:21px;margin-bottom:6px;color:#fff}
.vol-banner p{font-size:14px;color:#C9C2B8;max-width:56ch}
.vol-banner .btn{background:var(--orange);color:#fff;white-space:nowrap;flex-shrink:0}

/* ============================================================
   08. PROCESS
   Six steps. Each .pstep is one copyable unit. The script below the
   section lights the step nearest the reading line; with JavaScript
   off every step stays open and readable.
   ============================================================ */
.proc-chips{margin-bottom:34px}
.pflow{display:flex;flex-direction:column;gap:12px}
.pstep{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:20px 24px;transition:border-color .3s,background .3s,box-shadow .3s}
.pstep-head{display:flex;align-items:center;gap:18px}
.pstep-n{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--cream);color:var(--orange-deep);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s}
.pstep h3{font-size:17px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.gate-badge{font-size:11px;font-weight:800;letter-spacing:.1em;border:1.5px solid var(--ink);border-radius:6px;padding:3px 9px;text-transform:uppercase}
.pstep-body{max-height:600px;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s,margin .35s}
.pstep-body p{color:var(--slate);font-size:14.5px;margin:14px 0 0;padding-left:62px}
.pflow-js .pstep{opacity:.62}
.pflow-js .pstep .pstep-body{max-height:0;opacity:0}
.pflow-js .pstep.active{opacity:1;border-color:var(--orange);box-shadow:0 14px 36px rgba(232,80,26,.10)}
.pflow-js .pstep.active .pstep-n{background:var(--orange);color:#fff}
.pflow-js .pstep.active .pstep-body{max-height:600px;opacity:1}

/* ============================================================
   09. COMPARISON TABLE
   One <tr> per criterion, one copyable unit. Every cell after the
   first carries data-col, which becomes the column heading when the
   table converts to stacked cards on mobile. If you add a column,
   add the matching data-col.
   ============================================================ */
.compare-dark{background:var(--dark);color:#fff;border-top:4px solid var(--orange)}
.compare-dark .h2{color:#fff}
.compare-dark .sec-intro{color:#C9C2B8}
.compare-dark .eyebrow{background:transparent;border-color:var(--dark-line);color:#F1A07E}
.tbl-scroll{overflow-x:auto;border-radius:18px;border:1.5px solid var(--dark-line)}
table.cmp{display:table;width:100%;border-collapse:collapse;min-width:780px;background:var(--dark-2);font-size:14px;table-layout:fixed}
.cmp th,.cmp td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--dark-rule);vertical-align:top}
.cmp thead th{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;font-weight:800;background:#2A241E;width:20%}
.cmp thead th.v2a{background:var(--orange);color:#fff;width:32%}
.cmp thead th:nth-child(3){width:24%}
.cmp thead th:nth-child(4){width:24%}
.cmp td:first-child{color:var(--line);font-weight:700;font-size:13px;width:20%}
.cmp td.v2a{background:rgba(232,80,26,.12);color:#fff;width:32%}
.cmp td{color:#9A9288}
.cmp .yes{color:var(--green);font-weight:800;margin-right:7px}
.cmp .no{color:var(--red);font-weight:800;margin-right:7px}
.cmp .meh{color:var(--amber);font-weight:800;margin-right:7px}
.founder-note{margin-top:30px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;background:var(--dark-2);border:1.5px solid var(--dark-line);border-left:4px solid var(--orange);border-radius:0 16px 16px 0;padding:22px 28px}
.founder-note b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;white-space:nowrap;color:#fff}
.founder-note span{flex:1;min-width:280px;font-size:14.5px;color:#C9C2B8}
.founder-note span strong{color:#F1A07E;font-weight:700}

/* ============================================================
   10. VERSUS TABLE
   Same stacked card treatment on mobile as the comparison table,
   driven by data-col on the two outer cells.
   ============================================================ */
.vt-wrap{overflow-x:auto;border-radius:20px;border:1.5px solid var(--line)}
.vt{width:100%;min-width:640px;border-collapse:collapse;background:var(--paper);table-layout:fixed}
.vt th,.vt td{vertical-align:top;text-align:left}
.vt thead th{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;padding:20px 24px}
.vt-h-gp{width:42%;background:var(--cream)}
.vt-h-mid{width:16%;background:var(--ink);color:#fff;text-align:center;font-size:14px;text-transform:uppercase;letter-spacing:.1em;vertical-align:middle}
.vt-h-ne{width:42%;background:var(--orange);color:#fff}
.vt td{padding:16px 24px;font-size:14.5px;line-height:1.55;border-top:1.5px solid var(--line)}
.vt-gp{background:var(--paper);color:var(--slate)}
.vt-ne{background:#FFFAF6;color:var(--ink)}
.vt-attr{background:var(--cream);text-align:center;vertical-align:middle;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--orange-deep)}
.verdict{margin-top:28px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;background:var(--cream);border:1.5px solid var(--cream-deep);border-left:4px solid var(--orange);border-radius:0 16px 16px 0;padding:20px 26px}
.verdict b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;white-space:nowrap;font-size:15.5px}
.verdict span{flex:1;min-width:260px;font-size:14.5px;color:var(--slate)}

/* ============================================================
   11. WHO IT IS FOR
   ============================================================ */
.who-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:8px}
.who-card{border:1.5px solid var(--line);border-radius:18px;padding:26px 26px 24px;transition:border-color .15s, transform .15s;background:var(--paper)}
.who-card:hover{border-color:var(--orange);transform:translateY(-3px)}
.who-card .wc-num{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:800;color:var(--orange);letter-spacing:.06em}
.who-card h3{font-size:18px;margin:10px 0 8px}
.who-card p{font-size:14.5px;color:var(--slate)}
.who-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:16px;padding:20px 26px}
.who-foot-q{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;white-space:nowrap}
.who-foot-a{flex:1;min-width:240px;font-size:14px;color:var(--slate)}
.who-foot-link{white-space:nowrap;font-weight:700;color:var(--orange-deep);text-decoration:none}

/* ============================================================
   12. LINK PROTECTION
   ============================================================ */
.terms-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}
.term{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:24px 26px;display:flex;flex-direction:column}
.term.mid{border-top:3px solid var(--orange)}
.term h4{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:800;display:flex;align-items:center;gap:11px;margin-bottom:10px}
.term-no{font-size:13px;font-weight:800;color:#fff;background:var(--orange);border-radius:7px;padding:3px 8px;letter-spacing:.02em}
.term p{color:var(--slate);font-size:13.5px;line-height:1.6;flex:1}

/* ============================================================
   13. FAQ
   Three labelled groups. A group is one copyable unit and so is a
   .qitem inside it. The script keeps one answer open at a time
   across all groups. With JavaScript off every answer is visible.
   ============================================================ */
.qgroup{margin-bottom:26px}
.qgroup>h3{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;padding-bottom:9px;border-bottom:1.5px solid var(--line);font-family:'Inter',sans-serif}
.qflow{display:flex;flex-direction:column;gap:10px}
.qitem{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:18px 22px;transition:border-color .3s,box-shadow .3s,opacity .3s}
.qitem-head{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.qitem-head h3{font-size:16px;font-weight:700;margin:0;color:var(--ink);line-height:1.4}
.qitem-mark{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);position:relative;transition:border-color .3s,background .3s}
.qitem-mark::before,.qitem-mark::after{content:"";position:absolute;background:var(--slate);transition:background .3s,transform .3s}
.qitem-mark::before{left:5px;right:5px;top:9px;height:2px}
.qitem-mark::after{top:5px;bottom:5px;left:9px;width:2px}
.qitem-body{max-height:1000px;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s}
.qitem-body p{color:var(--slate);font-size:14.5px;margin:14px 0 0}
.qflow-js .qitem{opacity:.72}
.qflow-js .qitem .qitem-body{max-height:0;opacity:0}
.qflow-js .qitem.active{opacity:1;border-color:var(--orange);box-shadow:0 12px 30px rgba(232,80,26,.09)}
.qflow-js .qitem.active .qitem-mark{border-color:var(--orange);background:var(--orange)}
.qflow-js .qitem.active .qitem-mark::before,.qflow-js .qitem.active .qitem-mark::after{background:#fff}
.qflow-js .qitem.active .qitem-mark::after{transform:rotate(90deg)}
.qflow-js .qitem.active .qitem-body{max-height:1000px;opacity:1}

/* ============================================================
   14. CONTACT
   ============================================================ */
.cta-band{position:relative;background:var(--dark);color:#fff;padding:96px 0;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#241E19 1.3px,transparent 1.3px);background-size:24px 24px}
.cta-grid{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.cta-band .eyebrow{background:transparent;border-color:var(--dark-line);color:#F1A07E}
.cta-band h2{font-size:clamp(29px,3.9vw,44px);margin:18px 0 14px;font-weight:800;color:#fff}
.cta-sub{color:#C9C2B8;max-width:54ch;margin-bottom:24px;font-size:16px;line-height:1.75}
.cta-band .chip{background:transparent;border-color:#4A4239;color:#F1ECE4}
.cta-micro{font-size:13px;color:#9A9288;margin-top:18px}
.form-card{background:var(--paper);border-radius:20px;padding:32px;color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.32)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.f-field{min-width:0}
.f-field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.f-field input,.f-field select,.f-field textarea{width:100%;max-width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-family:'Inter',sans-serif;font-size:14px;background:var(--cream);color:var(--ink)}
.f-field textarea{min-height:90px;resize:vertical}
.f-field-wide{margin-bottom:16px}
.form-card .btn{width:100%;margin-top:6px}
.form-note{text-align:center;font-size:12px;color:var(--mute);margin-top:12px;line-height:1.6}

/* ============================================================
   15. INVOICE MODAL
   Same component as the guest posting page, class for class, so one
   modal pattern serves every V2A service page. Opened by any element
   carrying data-open-invoice, see build note B. There is no checkout
   here: it collects the order and we raise the invoice afterwards.
   Escape and backdrop click close it, focus is trapped while open
   and returned to the trigger on close. Without JavaScript it never
   opens and the triggers behave as ordinary links to the contact
   form.
   ============================================================ */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(26,21,15,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal-card{position:relative;z-index:1;background:var(--paper);border-radius:20px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 40px 90px rgba(0,0,0,.4);animation:modal-in .22s ease-out}
@keyframes modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);color:var(--slate);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.modal-x:hover{border-color:var(--orange);color:var(--orange-deep)}
.modal-body{padding:32px 34px 28px}
.modal-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);background:var(--orange-soft);border-radius:999px;padding:5px 13px;margin-bottom:14px}
.modal-card h3{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;font-weight:800;color:var(--ink);margin-bottom:10px;line-height:1.2}
.modal-lede{font-size:14.5px;color:var(--slate);margin-bottom:22px;line-height:1.6}
.mf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mf-field{margin-bottom:14px;display:flex;flex-direction:column;min-width:0}
.mf-field label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.mf-field .req{color:var(--orange-deep)}
.mf-field .opt{color:var(--slate);font-weight:400}
.mf-field input,.mf-field select,.mf-field textarea{font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);background:var(--cream);border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;width:100%;max-width:100%;transition:border-color .15s,box-shadow .15s}
.mf-field input::placeholder,.mf-field textarea::placeholder{color:#A69E93}
.mf-field input:focus,.mf-field select:focus,.mf-field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,80,26,.14)}
.mf-field textarea{resize:vertical}
/* -- multi-plan picker. One row per plan, so a single request can
      carry Core, Momentum and Precision together. To add a plan,
      copy one .tier-row and set data-tier, data-price and the ids. -- */
.mf-legend{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.tier-pick{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--cream)}
.tier-row{display:grid;grid-template-columns:1fr 84px 82px;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}
.tier-row:last-child{border-bottom:none}
.tier-name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.tier-name em{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--slate);margin-top:2px}
.tier-qty{font-family:'Inter',sans-serif;font-size:14px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:9px;padding:8px 10px;width:100%}
.tier-qty:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,80,26,.14)}
.tier-line{font-size:12.5px;font-weight:700;color:var(--slate);text-align:right;white-space:nowrap}
.tier-check{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;justify-self:start}
.tier-check input{width:17px;height:17px;accent-color:var(--orange)}
.mf-hint{font-size:12.5px;font-weight:600;color:var(--orange-deep);margin-top:10px}
.mf-hint[hidden]{display:none}
.mf-total{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--ink);color:#fff;border-radius:12px;padding:15px 20px;margin-top:6px}
.mf-total-label{font-size:13.5px;font-weight:600;color:#C9C2B8}
.mf-total-amt{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;white-space:nowrap}
.mf-total-note{font-size:12px;color:var(--slate);margin:10px 0 18px;line-height:1.55}
.mf-submit{width:100%;background:var(--orange);color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:15.5px;border:none;border-radius:12px;padding:15px;cursor:pointer;box-shadow:0 8px 22px rgba(232,80,26,.3);transition:transform .15s}
.mf-submit:hover{transform:translateY(-2px)}
.mf-note{font-size:12.5px;color:var(--slate);text-align:center;margin-top:12px}
.modal-done{text-align:center;padding-top:44px}
.done-tick{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--orange);color:#fff;font-size:28px;font-weight:800;margin-bottom:16px}
.modal-done .modal-lede{margin-bottom:24px}

/* ============================================================
   16. FOOTER
   ============================================================ */
footer{background:#120E0B;color:#9A9288;padding:34px 0;font-size:13px}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-base a{color:#C9C2B8;text-decoration:none}
.foot-base a:hover{color:#fff}
.foot-brand{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:#fff;font-size:15px}
.foot-brand i{font-style:normal;color:var(--orange)}

/* ============================================================
   17. RESPONSIVE
   Every media query on this page lives in this block, widest first.
   It carries the global overflow guard, the two tables that become
   stacked cards, and the release of every fixed height, nowrap and
   min-width that would otherwise push the layout sideways. Test at
   390px wide and check the right edge for bleed before shipping.
   ============================================================ */

/* -- global overflow guard. clip on the body rather than hidden so
      the sticky jump nav keeps working. -- */
html{overflow-x:hidden}
body{overflow-x:clip}
img,svg,video,table,iframe{max-width:100%}

@media(max-width:1080px){
  .price-grid{grid-template-columns:1fr 1fr}
  .who-grid{grid-template-columns:1fr 1fr}
  .terms-grid{grid-template-columns:1fr}
  .def-box{padding:32px 28px 28px}
}

@media(max-width:880px){
  section{padding:66px 0}
  .hero{padding:64px 0 78px}
  .hero-grid,.cta-grid,.price-foot{grid-template-columns:1fr}
  .hero-grid{min-height:0}
  .stage{height:auto;margin-top:26px}
  .anatomy{height:auto;padding:20px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .prob-grid,.vet-grid,.who-grid{grid-template-columns:1fr}
  .pstep-body p{padding-left:0}

  /* -- jump nav wraps instead of scrolling sideways, so every anchor
        is visible without dragging the strip. The CTA drops onto its
        own full width row. --nav-h grows with it so a jumped-to
        section still clears the taller sticky bar. -- */
  :root{--nav-h:150px}
  .jump-in{flex-wrap:wrap;overflow-x:visible;gap:0 2px;padding-top:6px;padding-bottom:9px}
  .jump a{padding:8px 9px;font-size:12.5px;border-bottom-width:2px}
  .jump .j-cta{margin-left:0;width:100%;text-align:center;padding:11px 16px;margin-top:7px}

  /* -- comparison table becomes stacked cards -- */
  .tbl-scroll{overflow:visible;border:none;border-radius:0}
  table.cmp{min-width:0;display:block;background:transparent}
  .cmp thead{display:none}
  .cmp tbody{display:block}
  .cmp tr{display:block;background:var(--dark-2);border:1.5px solid var(--dark-line);border-radius:16px;padding:4px 18px 16px;margin-bottom:12px}
  .cmp td{display:block;width:auto;border:none;padding:12px 0 0}
  .cmp td:first-child{width:auto;color:#F1A07E;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:14px 0 10px;border-bottom:1.5px solid var(--dark-rule)}
  .cmp td:not(:first-child)::before{content:attr(data-col);display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
  .cmp td.v2a{background:rgba(232,80,26,.12);border-radius:10px;padding:12px 14px;margin-top:12px}

  /* -- versus table becomes stacked cards -- */
  .vt-wrap{overflow:visible;border:none;border-radius:0}
  .vt{min-width:0;display:block;table-layout:auto}
  .vt thead{display:none}
  .vt tbody{display:block}
  .vt tr{display:block;background:var(--paper);border:1.5px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:12px}
  .vt td{display:block;width:auto;border:none;padding:15px 18px}
  .vt-attr{text-align:left;background:var(--cream);border-bottom:1.5px solid var(--line)}
  .vt-gp{border-bottom:1.5px solid var(--line)}
  .vt-gp::before,.vt-ne::before{content:attr(data-col);display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
  .vt-ne::before{color:var(--orange-deep)}

  /* -- release nowrap and min-width so nothing forces a sideways push -- */
  .vet-note b,.verdict b,.founder-note b,.who-foot-q,.who-foot-link,.dr-big,.ai-label,.prob-close a,.vol-banner .btn{white-space:normal}
  .vet-note span,.verdict span,.founder-note span,.who-foot-a,.ai-strip p,.dr-txt,.vol-banner p{min-width:0}
  .vol-banner .btn{flex-shrink:1;width:100%}
  .prob-close a{width:100%;text-align:center}
}

@media(max-width:640px){
  .wrap{padding:0 18px}
  .f-row{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  /* the stats band stays two by two right down to the smallest phone,
     the same as every other V2A service page. Do not add a one column
     rule here: it makes the band four screens tall. */
  .hero h1{font-size:clamp(30px,8vw,38px)}
  .hero .kicker{font-size:16.5px}

  /* -- the popular flag stops floating and stacks in flow -- */
  .plan.popular{padding-top:22px}
  .pop-tag{position:static;transform:none;display:inline-block;margin-bottom:12px}

  /* Label plus text strips stack on phones, the same treatment the
     blogger outreach page uses on .who-foot. Left as a row, the bold
     label holds its own width and squeezes the sentence beside it
     into a narrow column, so the label takes its own line and the
     copy runs the full width of the card. flex:0 0 auto with an
     explicit width is what makes the text fill the row: inside a
     column flex container, flex:1 would size the height, not the
     width. */
  .vet-note,.verdict,.founder-note,.def-rel,.who-foot,.ai-strip,.prob-close,.vol-banner{flex-direction:column;align-items:flex-start;gap:12px}
  .vet-note span,.verdict span,.founder-note span,.who-foot-a,.ai-strip p,.dr-txt,.prob-close .pc-txt,.vol-banner>div{flex:0 0 auto;width:100%}
  .vet-note b,.verdict b,.founder-note b,.who-foot-q,.dr-big{line-height:1.35}
  .who-foot-link{align-self:flex-start}
  .vet-note,.verdict,.founder-note,.who-foot{padding:20px 20px}

  .def-box{padding:26px 20px 22px;margin-top:34px}
  .def-mark{top:-22px;left:20px;font-size:66px}
  .def-text{font-size:17px}
  .def-rel,.vol-banner,.prob-close{padding:20px 20px}
  .ai-strip{padding:16px 18px}
  .modal{padding:12px}
  .modal-body{padding:26px 20px 22px}
  .modal-card h3{font-size:21px}
  .mf-row{grid-template-columns:1fr;gap:0}
  /* the picker keeps the plan name and its dropdown side by side, and
     drops the line total because the invoice total sits right below */
  .tier-row{grid-template-columns:1fr 76px;gap:10px;padding:11px 12px}
  .tier-line{display:none}
  .tier-name{font-size:13.5px}
  .mf-total{flex-direction:column;align-items:flex-start;gap:4px}
  .form-card{padding:24px 20px}
  .qitem{padding:16px 17px}
  .qitem-head h3{font-size:15px}
  .cta-band{padding:66px 0}
}

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