/* ============================================================
   01. TOKENS AND BASE
   Colors only. Sizing stays in the component that owns it.
   ============================================================ */
: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; --paper:#FFFFFF; --green:#1E8A5A; --red:#C0392B;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* the sticky jump nav sits over the top of the page, so anchored
   sections offset themselves rather than hiding underneath it */
section[id],div[id],header[id]{scroll-margin-top:66px}
/* GLOBAL OVERFLOW GUARD.
   Do NOT put an overflow value on html or body. It can turn them into a
   scroll container, and once that happens position:sticky stops working
   for every child. Desktop Chrome tolerates overflow-x:clip here, older
   mobile engines coerce it and do not, which is exactly how the jump nav
   ended up sticky on desktop and not on a phone.
   The guard therefore sits on the sections instead. Sections are
   siblings of the nav, so clipping them cannot reach it.
   text-size-adjust stops mobile browsers inflating the type on their
   own. Without it, Chrome and Safari on a phone can decide a block is
   too narrow and scale its font up, which blows the layout apart at
   the exact sizes we set here. Invisible at normal zoom. */
html,body{max-width:100%}
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
section,footer,.stats-band{overflow-x:clip}
img,svg,video,canvas,table{max-width:100%}
html body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
body h1,body h2,body h3,body .display{font-family:'Bricolage Grotesque',sans-serif;line-height:1.12;letter-spacing:-0.015em}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap-flush{max-width:1240px;padding:0}
section{padding:88px 0}
.sec-cream{background:var(--cream)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);background:var(--paper)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.kicker{color:var(--slate);font-size:18px;max-width:60ch}
.accent{color:var(--orange)}
/* two shared link treatments, one for light sections and one for dark */
.lk{color:var(--orange-deep);font-weight:700;text-decoration:none}
.lk:hover{text-decoration:underline}
.lk-dark{color:#F1A07E;font-weight:700;text-decoration:none}
.lk-dark:hover{text-decoration:underline}
.eyebrow-dark{background:transparent;border-color:#3A332C;color:#F1A07E}
.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}
.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}
.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)}
.h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;margin-bottom:14px}
.eyebrow + .h2{margin-top:18px}
.h2 .accent{font-weight:800}
.sec-intro{color:var(--slate);max-width:64ch;margin-bottom:40px}

/* ============================================================
   02. HERO
   Geometry copied from the AI SEO page so both heroes resolve to
   the same length: same padding, same gradient and dot texture,
   same clip, same grid, same type sizes. The right-hand visual is
   locked to the same height as the reference visual (470px) so
   neither column can stretch the section.
   ============================================================ */
.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}
.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;margin-bottom:20px}
.hero-ctas .btn{padding:14px 22px;font-size:14.8px;white-space:nowrap}
.hero-terms{display:flex;flex-wrap:wrap;gap:8px}
.hero-terms span{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--cream-deep);background:rgba(255,255,255,.82);border-radius:999px;padding:6px 13px;font-size:12.6px;font-weight:600;color:var(--ink)}
.hero-terms span::before{content:"\2713";color:var(--orange);font-weight:800;font-size:10px}

/* ============ WHAT WE INVESTIGATE (accordion check list) ============ */
.inv{display:flex;flex-direction:column;gap:10px}
.inv .acc-sum{padding:18px 24px}
.inv .acc-t b{font-size:16.5px}
.inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 26px;list-style:none}
.inv-grid li{position:relative;padding:5px 0 5px 20px;font-size:13.2px;color:var(--slate);line-height:1.5}
.inv-grid li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.inv-grid li strong{color:var(--ink);font-weight:600}
.inv-lead{font-size:14px;color:var(--slate);margin-bottom:14px;max-width:80ch}
.inv-lead b{color:var(--ink)}
.inv-where{font-size:13.5px;color:var(--slate);background:var(--paper);border:1.5px solid var(--line);border-left:4px solid var(--orange);border-radius:0 12px 12px 0;padding:14px 18px;margin-bottom:26px;max-width:92ch}
.inv-where b{color:var(--ink)}
.inv-where a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.inv-where a:hover{text-decoration:underline}
.inv-tag{display:inline-block;margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--orange-deep);background:#FFF1E8;border:1px solid #F6CDB6;border-radius:999px;padding:3px 10px;white-space:nowrap}
.inv-tag.all{color:var(--green);background:#E9F7EF;border-color:#BFE5D0}
.inv-foot{margin-top:26px;display:flex;gap:16px;align-items:baseline;background:var(--paper);border:1.5px solid var(--line);border-left:4px solid var(--orange);border-radius:0 16px 16px 0;padding:20px 26px;flex-wrap:wrap}
.inv-foot b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;white-space:nowrap;font-size:15.5px}
.inv-foot span{flex:1;min-width:260px;font-size:14.5px;color:var(--slate)}
.inv-foot span strong{color:var(--ink)}
/* Hero visual: page one of the report, the way it actually arrives.
   Static, one dominant focal element, no floating labels around it.
   The 470px lock is what keeps this hero the same length as the
   reference page hero. */
.rep-viz{position:relative;min-height:470px;display:flex;align-items:center;justify-content:center;padding:0}
.rep-glow{position:absolute;inset:8% 3%;background:radial-gradient(ellipse at 55% 40%,rgba(232,80,26,.14),transparent 62%);filter:blur(4px);pointer-events:none}
.rep-stack{position:absolute;width:480px;max-width:92%;height:74%;background:#fff;border:1.5px solid var(--line);border-radius:22px;transform:rotate(-3.5deg) translate(-12px,10px);box-shadow:0 18px 44px rgba(28,24,20,.07)}
.rep-card{position:relative;width:min(480px,94%);background:var(--paper);border:1.5px solid var(--line);border-radius:22px;box-shadow:0 38px 90px rgba(28,24,20,.15),0 5px 16px rgba(28,24,20,.06);z-index:1;overflow:hidden}
.rep-bar{display:flex;align-items:center;gap:12px;padding:13px 18px;background:var(--cream);border-bottom:1.5px solid var(--line)}
.rep-bar .rb-t{flex:1;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep)}
.rep-bar .rb-p{font-size:10.5px;font-weight:700;color:var(--slate)}
.rep-body{padding:20px 22px}
.rep-h{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;margin-bottom:3px}
.rep-sub{font-size:11.5px;color:var(--slate);margin-bottom:16px}
.rep-row{display:grid;grid-template-columns:26px 1fr auto;gap:11px;align-items:start;padding:11px 0;border-bottom:1px dashed var(--line)}
.rep-row:last-of-type{border-bottom:none}
.rep-n{width:26px;height:26px;border-radius:8px;background:var(--ink);color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.rep-row.hi .rep-n{background:var(--orange)}
.rep-t b{display:block;font-size:12.8px;font-weight:700;line-height:1.35}
.rep-t span{display:block;font-size:11px;color:var(--slate);margin-top:2px;line-height:1.45}
.rep-sev{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:3px 8px;white-space:nowrap}
.sev-c{background:#FBE9E7;color:var(--red)}
.sev-h{background:#FFF1E8;color:var(--orange-deep)}
.sev-m{background:var(--cream-deep);color:var(--slate)}
.rep-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 22px;background:var(--dark);color:#fff;font-size:11px;flex-wrap:wrap}
.rep-foot b{font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px}
.rep-foot span{color:#C9C2B8}

/* ============================================================
   03. STATS BAND AND JUMP NAV
   Shared V2A components. Four stat boxes, alternating dark and
   orange, sized to match the reference page exactly. The jump nav
   is sticky for the whole page: it is the way back to any section
   without scrolling, so it must never be made static.
   ============================================================ */
.stats-band{background:var(--dark)}
.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)}
.stat:nth-child(even) .st-sub{color:rgba(255,255,255,.9)}

.jump{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(9px);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 .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 a.on{color:var(--ink);border-bottom-color:var(--orange)}
.jump .j-cta:hover{border-bottom-color:transparent;color:#fff}

/* ============ PAIN ============ */
.prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.prob{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:26px 26px 24px;transition:border-color .15s,transform .15s}
.prob:hover{border-color:var(--orange);transform:translateY(-3px)}
.prob .p-no{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:12px}
.prob .p-no .p-x{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;color:var(--orange)}
.prob h3{font-size:18.5px;margin-bottom:8px}
.prob p{font-size:14px;color:var(--slate)}
.prob-close{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--dark);border-radius:18px;padding:24px 30px;color:#fff}
.prob-close .pc-txt{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:18px;line-height:1.4}
.prob-close .pc-txt .accent{color:var(--orange)}
.prob-close .pc-sub{display:block;font-family:'Inter';font-size:13px;font-weight:500;color:#C9C2B8;margin-top:6px}
.prob-close a{color:#F1A07E;font-weight:700;text-decoration:none;white-space:nowrap;font-size:14px}
.prob-close a:hover{text-decoration:underline}

/* ============ WHAT CHANGES ============ */
.chg-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.chg-lead p{color:var(--slate);font-size:15px}
.chg-stat{margin-top:20px;background:var(--cream);border:1.5px solid var(--cream-deep);border-left:4px solid var(--orange);border-radius:0 14px 14px 0;padding:18px 22px}
.chg-stat b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:28px;display:block;line-height:1}
.chg-stat span{font-size:13px;color:var(--slate);display:block;margin-top:6px}
.chg-stat-lead{font-size:19px;line-height:1.3}
.chg-stat cite{display:block;font-style:normal;font-size:11px;color:var(--slate);margin-top:8px;opacity:.8}
.chg-list{display:flex;flex-direction:column;gap:12px}
.chg{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:20px 24px;transition:border-color .15s}
.chg:hover{border-color:var(--orange)}
.chg b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:16.5px;margin-bottom:5px}
.chg p{font-size:13.5px;color:var(--slate)}

/* ============ WHAT WE COVER ============ */

/* ============ THE PRICING VARIABLE EXPLAINER ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.sp{border-radius:20px;padding:30px 30px 26px;border:2px solid var(--line);background:var(--paper)}
.sp.once{border-color:var(--cream-deep);background:var(--cream)}
.sp.scale{border-color:var(--orange);box-shadow:0 20px 50px rgba(232,80,26,.12)}
.sp-tag{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:5px 13px;margin-bottom:14px}
.sp.once .sp-tag{background:var(--ink);color:#fff}
.sp.scale .sp-tag{background:var(--orange);color:#fff}
.sp h3{font-size:21px;margin-bottom:8px}
.sp>p{font-size:14px;color:var(--slate);margin-bottom:16px}
.sp ul{list-style:none}
.sp li{position:relative;padding:6px 0 6px 26px;font-size:13.5px;line-height:1.55;color:var(--ink)}
.sp li::before{content:"\2713";position:absolute;left:0;top:6px;color:var(--orange);font-weight:800}
.sp-note{margin-top:16px;padding-top:14px;border-top:1.5px dashed var(--line);font-size:12.8px;color:var(--slate)}
.sp-note b{color:var(--ink)}
.var-band{margin-top:22px;background:var(--dark);border-radius:20px;padding:28px 34px;color:#fff;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.var-band .vb-t{flex:1;min-width:280px}
.var-band h3{font-size:20px;margin-bottom:8px;color:#fff}
.var-band h3 .accent{color:var(--orange)}
.var-band p{font-size:14px;color:#C9C2B8}
.var-band p+p{margin-top:10px}
.var-band p b{color:#fff}
.vb-viz{display:grid;grid-template-columns:repeat(5,26px);grid-auto-rows:26px;gap:6px}
.vb-viz i{border-radius:7px;background:#2A241E;border:1.5px solid #3A332C}
.vb-viz i.on{background:var(--orange);border-color:var(--orange)}
.vb-viz i.site{background:#8C4A2F;border-color:#8C4A2F}

/* ============ PRICING ============ */
.plan-wide{grid-column:1/-1}
.p-for-wide{max-width:78ch}
.p-pricebox-cap{max-width:340px}
.p-feat-2col{columns:2;column-gap:40px}
.p-lbl-dark{color:#F1A07E}
.assure-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.assure-chips .chip{background:var(--cream);display:inline-flex;align-items:center;gap:7px;border-color:var(--cream-deep)}
.assure-chips .chip::before{content:"\2713";color:var(--orange);font-weight:800}
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan{background:var(--paper);border:1.5px solid var(--line);border-radius:20px;padding:28px 24px 24px;display:flex;flex-direction:column;position:relative;transition:border-color .15s,transform .15s,box-shadow .15s}
.plan:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 18px 44px rgba(28,24,20,.08)}
.plan.hot{border:2px solid var(--orange);box-shadow:0 20px 50px rgba(232,80,26,.14)}
.plan .p-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 14px;white-space:nowrap}
.plan h3{font-size:20px}
.plan .p-gbp{display:inline-flex;align-items:center;gap:7px;margin-top:8px;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:999px;padding:4px 12px;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--orange-deep)}
.plan .p-gbp::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.plan .p-for{font-size:12.5px;color:var(--slate);margin:10px 0 16px;min-height:66px;line-height:1.5}
.plan .p-pricebox{background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.plan .p-start{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep)}
.plan .p-price{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:31px;line-height:1.15}
.plan .p-price small{font-size:12px;color:var(--slate);font-weight:600;font-family:'Inter'}
.plan .p-days{font-size:11.5px;color:var(--slate);margin-top:3px;font-weight:600}
.plan .p-spec{list-style:none;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:16px}
.plan .p-spec li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:11.5px;border-bottom:1px dashed var(--line);line-height:1.4}
.plan .p-spec li:last-child{border-bottom:none}
.plan .p-spec li span{color:var(--slate);flex-shrink:0}
.plan .p-spec li b{text-align:right;font-weight:700}
.plan .p-lbl{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);margin:2px 0 6px}
.plan ul.p-feat{list-style:none;margin:0 0 14px}
.plan ul.p-feat li{position:relative;padding:4.5px 0 4.5px 21px;font-size:12.6px;color:var(--ink);line-height:1.5}
.plan ul.p-feat li::before{content:"\2713";position:absolute;left:0;color:var(--orange);font-weight:800}
.plan ul.p-not{list-style:none;margin:0 0 14px;border-top:1.5px dashed var(--line);padding-top:11px}
.plan ul.p-not li{position:relative;padding:4px 0 4px 21px;font-size:12px;color:var(--slate);line-height:1.45}
.plan ul.p-not li::before{content:"\2014";position:absolute;left:0;color:#B7AFA3;font-weight:800}
.plan .p-notlbl{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);margin-bottom:4px}
.plan .p-spacer{flex:1}
.plan .btn{text-align:center;font-size:13.5px;padding:12px 14px;width:100%}
.plan.custom{background:var(--dark);border-color:var(--dark);color:#fff}
.plan.custom h3{color:#fff}
.plan.custom .p-gbp{background:#211B15;border-color:#3A332C;color:#F1A07E}
.plan.custom .p-for{color:#C9C2B8}
.plan.custom .p-pricebox{background:#211B15;border-color:#3A332C}
.plan.custom .p-price{color:#fff;font-size:21px;padding:3px 0}
.plan.custom .p-days{color:#9A9288}
.plan.custom ul.p-feat li{color:#E8E2DA}
.plan.custom .p-spec{background:#211B15;border-color:#3A332C}
.plan.custom .p-spec li{border-color:#33291F}
.plan.custom .p-spec li span{color:#9A9288}
.plan.custom .p-spec li b{color:#fff}
.price-foot{margin-top:26px;font-size:13.5px;color:var(--slate);background:var(--cream);border:1.5px solid var(--cream-deep);border-left:4px solid var(--orange);border-radius:0 12px 12px 0;padding:16px 20px}
.price-foot b{color:var(--ink)}

/* ============ ADD-ON BAND ============
   Light, low and horizontal on purpose. The Custom card directly above it
   is dark and tall, and when this band was also dark and tall the two read
   as the same thing twice. Different weight, different shape, same volume. */
.addon{margin-top:34px;background:linear-gradient(180deg,#fff,var(--cream));border:2.5px solid var(--orange);border-radius:20px;padding:30px 34px 26px;box-shadow:0 20px 48px rgba(232,80,26,.13);position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:start}
.addon::before{content:"Read this before you choose";position:absolute;top:-13px;left:32px;background:var(--orange);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:5px 15px;white-space:nowrap}
.addon h3{font-size:clamp(20px,2.3vw,25px);font-weight:800;margin-bottom:10px}
.addon h3 .accent{color:var(--orange)}
.ad-lead{font-size:14.5px;color:var(--slate);line-height:1.62}
.ad-lead strong{color:var(--ink)}
.ad-eg{margin-top:16px}
.ad-eg b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:9px}
.ad-eg .chips{gap:8px}
.ad-eg .chip{font-size:12.8px;padding:6px 13px;background:var(--paper);border-color:var(--cream-deep)}
.ad-routes{display:flex;flex-direction:column;gap:11px}
.ar{display:grid;grid-template-columns:30px 1fr;gap:13px;background:var(--paper);border:1.5px solid var(--line);border-radius:13px;padding:15px 17px;transition:border-color .15s}
.ar:hover{border-color:var(--orange)}
.ar .ar-n{width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.ar b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:14.5px;margin-bottom:3px}
.ar p{font-size:12.8px;color:var(--slate);line-height:1.55}
.ad-foot{grid-column:1/-1;margin-top:6px;padding-top:16px;border-top:1.5px dashed var(--line);font-size:13.2px;color:var(--slate)}
.ad-foot strong{color:var(--ink)}

/* ============ METHOD / HOW WE PRICED IT ============ */
.method{margin-top:26px;background:var(--paper);border:1.5px solid var(--line);border-radius:20px;overflow:hidden}
.method[open]{border-color:var(--orange);box-shadow:0 18px 44px rgba(232,80,26,.10)}
.acc-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:22px 26px;background:var(--cream);transition:background .2s}
.acc-sum::-webkit-details-marker{display:none}
.acc-sum:hover{background:var(--cream-deep)}
.acc-sum:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.acc-ic{flex-shrink:0;width:46px;height:46px;border-radius:14px;background:var(--paper);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center}
.acc-ic svg{width:21px;height:21px;stroke:var(--orange-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.acc-t{flex:1;min-width:0}
.acc-t b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.acc-t em{display:block;font-style:normal;font-size:13px;color:var(--slate);margin-top:4px}
.acc-mark{flex-shrink:0;display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-deep);white-space:nowrap}
.acc-mark i{width:26px;height:26px;border-radius:50%;border:2px solid var(--orange);position:relative;display:inline-block}
.acc-mark i::before,.acc-mark i::after{content:"";position:absolute;background:var(--orange);transition:transform .3s}
.acc-mark i::before{left:6px;right:6px;top:11px;height:2px}
.acc-mark i::after{top:6px;bottom:6px;left:11px;width:2px}
details[open] .acc-mark i::after{transform:rotate(90deg)}
details[open] .acc-mark .m-open{display:none}
.acc-mark .m-close{display:none}
details[open] .acc-mark .m-close{display:inline}
.acc-body{padding:24px 26px 26px;border-top:1.5px solid var(--line)}
.acc-body p{font-size:14.5px;color:var(--slate);max-width:78ch;line-height:1.75}
.acc-body p+p{margin-top:14px}
.acc-body p strong{color:var(--ink)}

/* ============ SCOPE MATRIX ============ */
.mx-tabs{display:none;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.mx-tabs button{border:1.5px solid var(--line);background:var(--paper);color:var(--slate);font-family:'Inter',sans-serif;font-weight:700;font-size:12.5px;padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.mx-tabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.mx-key{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:16px;font-size:12.5px;color:var(--slate)}
.mx-key span{display:inline-flex;align-items:center;gap:8px}
.mx-key b{color:var(--ink);background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:6px;padding:1px 8px;font-size:11.5px;font-weight:700}
.mx-key svg{width:15px;height:15px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mx-key .k-y{stroke:var(--green)}
.mx-key .k-n{stroke:#C6BEB2}

.tbl-scroll{overflow-x:auto;border-radius:18px;border:1.5px solid var(--line);background:var(--paper)}
table.mx{width:100%;border-collapse:separate;border-spacing:0;min-width:820px;font-size:13.5px}
.mx th,.mx td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.mx thead th{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:800;background:var(--cream);position:sticky;top:0;z-index:3;border-bottom:1.5px solid var(--line);text-align:center;padding:14px 12px}
.mx thead th.lbl{text-align:left}
.mx thead th small{display:block;font-family:'Inter';font-size:11.5px;font-weight:700;color:var(--orange-deep);margin-top:1px}
.mx thead th.hi{background:var(--orange);color:#fff}
.mx thead th.hi small{color:rgba(255,255,255,.9)}
.mx td.lbl,.mx th.lbl{position:sticky;left:0;z-index:2;background:var(--paper);width:32%;min-width:250px;font-weight:600;color:var(--ink);box-shadow:1px 0 0 var(--line)}
.mx th.lbl{z-index:4;background:var(--cream)}
.mx tr.grp td{background:var(--dark);color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;padding:9px 16px;position:sticky;left:0;box-shadow:none}
.mx td.c{text-align:center;width:17%}
.mx td.c.hi{background:rgba(232,80,26,.05)}
.mx td.c.n{opacity:.8}
.mx td.c.v .val{letter-spacing:.01em}
.mx td.c svg{width:17px;height:17px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto}
.mx td.c.y .ok svg{stroke:var(--green)}
.mx td.c .nope svg{stroke:#D5CCC0}
.mx td.c i{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mx td.c .val{display:inline-block;font-size:12px;font-weight:700;color:var(--ink);background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:999px;padding:3px 11px;white-space:nowrap}
.mx td.c.hi .val{background:#FFF1E8;border-color:#F6CDB6;color:var(--orange-deep)}
.mx tbody tr:not(.grp):hover td{background:var(--cream)}
.mx tbody tr:not(.grp):hover td.lbl{background:var(--cream)}
.mx tbody tr:not(.grp):hover td.c.hi{background:rgba(232,80,26,.10)}
.mx tbody tr:last-child td{border-bottom:none}

/* ============ SAMPLE FINDING ============ */
.smp{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.smp-card{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;overflow:hidden}
.smp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:var(--cream);border-bottom:1.5px solid var(--line);flex-wrap:wrap}
.smp-head b{font-family:'Bricolage Grotesque',sans-serif;font-size:14px}
.smp-head .sh-id{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.smp-body{padding:20px}
.smp-f{display:grid;grid-template-columns:112px 1fr;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px}
.smp-f:last-child{border-bottom:none}
.smp-f dt{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--orange-deep);padding-top:2px}
.smp-f dd{color:var(--slate);line-height:1.55}
.smp-f dd strong{color:var(--ink)}
.smp-f dd code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--cream);border:1px solid var(--cream-deep);border-radius:5px;padding:1px 6px;color:var(--ink)}
.smp-scores{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.smp-scores span{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 11px;background:var(--cream);border:1.5px solid var(--cream-deep);color:var(--slate)}
.smp-scores span.hi{background:#FBE9E7;border-color:#F3C4BE;color:var(--red)}
.smp-scores span.ok{background:#E9F7EF;border-color:#BFE5D0;color:var(--green)}
.smp-note{margin-top:24px;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}
.smp-note b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;white-space:nowrap;font-size:15.5px}
.smp-note span{flex:1;min-width:260px;font-size:14.5px;color:var(--slate)}
.smp-note span strong{color:var(--ink)}

/* ============ PROCESS ============ */
.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;margin:0}
.pstep-body{max-height:700px;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}
.pstep-body .p-decide{margin:12px 0 4px;padding-left:62px;font-size:12.5px}
.pstep-body .p-decide span{display:inline-block;background:var(--cream);border:1.5px solid var(--cream-deep);border-left:3px solid var(--orange);border-radius:0 9px 9px 0;padding:8px 14px;font-weight:600;color:var(--ink)}
.pstep-body .p-decide b{color:var(--orange-deep);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:2px}
.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:700px;opacity:1}
.tool-band{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tool-box{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:24px 26px}
.tool-box h3{font-size:16.5px;margin-bottom:8px}
.tool-box p{font-size:13.5px;color:var(--slate)}
.tool-box .chips{margin-top:14px}
.tool-box .chip{font-size:12.5px;padding:6px 13px;background:var(--cream);border-color:var(--cream-deep)}
.tool-box ul{list-style:none;margin-top:12px}
.tool-box li{position:relative;padding:5px 0 5px 22px;font-size:13.5px;color:var(--slate);line-height:1.55}
.tool-box li::before{content:"\2713";position:absolute;left:0;top:5px;color:var(--orange);font-weight:800}
.tool-box li strong{color:var(--ink)}
.tool-list-split{margin-top:14px;border-top:1.5px dashed var(--line);padding-top:12px}

/* ============ RECEIVE ============ */

/* ============ LIMITS ============ */
.lim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lim{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:24px 22px;border-top:3px solid var(--slate)}
.lim h3{font-size:16px;margin-bottom:7px}
.lim p{font-size:13.5px;color:var(--slate)}
.lim p strong{color:var(--ink)}
.lim-close{margin-top:28px;background:var(--dark);border-radius:18px;padding:26px 32px;color:#fff}
.lim-close b{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;display:block;margin-bottom:8px}
.lim-close p{font-size:14px;color:#C9C2B8;max-width:82ch}

/* ============ WHY (dark) ============ */
.why-dark{background:var(--dark);color:#fff;border-top:4px solid var(--orange)}
.why-dark .h2{color:#fff}
.why-dark .sec-intro{color:#C9C2B8}
.why-dark .eyebrow{background:transparent;border-color:#3A332C;color:#F1A07E}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why{background:#211B15;border:1.5px solid #3A332C;border-radius:18px;padding:26px 24px;transition:border-color .15s,transform .15s}
.why:hover{border-color:var(--orange);transform:translateY(-3px)}
.why .w-ic{width:40px;height:40px;border-radius:11px;background:rgba(232,80,26,.14);border:1.5px solid rgba(232,80,26,.4);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.why .w-ic svg{width:19px;height:19px;stroke:#F1A07E;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.why h3{font-size:16.5px;margin-bottom:7px;color:#fff}
.why p{font-size:13.5px;color:#C9C2B8}
.why-cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.why-cta .micro{font-size:13px;color:#9A9288;flex:1;min-width:260px}

/* ============ COMPARISON (dark) ============ */
.compare-dark{background:var(--dark);color:#fff}
.compare-top{border-top:1px solid #33291F}
.compare-dark .h2{color:#fff}
.compare-dark .sec-intro{color:#C9C2B8}
.compare-dark .eyebrow{background:transparent;border-color:#3A332C;color:#F1A07E}
.compare-dark .tbl-scroll{border-color:#3A332C;background:transparent}
.compare-dark .cmp th,.compare-dark .cmp td{border-bottom:1px solid #33291F}
table.cmp{display:table;width:100%;border-collapse:collapse;min-width:760px;background:#211B15;font-size:14px;table-layout:fixed}
.cmp th,.cmp td{padding:14px 20px;text-align:left;border-bottom:1px solid #33291F;vertical-align:top}
.cmp thead th{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;font-weight:800;background:#2A241E;width:22%}
.cmp thead th.v2a{background:var(--orange);color:#fff;width:40%}
.cmp thead th:nth-child(2){width:38%}
.cmp td:first-child{color:#E8E2DA;font-weight:700;font-size:13px;width:22%}
.cmp td.v2a{background:rgba(232,80,26,.12);color:#fff;width:40%}
.cmp td{color:#9A9288}
.cmp td.v2a b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:15px}

/* ============ INDUSTRIES ============ */
.ind-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ind-t{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:24px 22px 22px;overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s}
.ind-t:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 16px 40px rgba(28,24,20,.08)}
.ind-t::after{content:"";position:absolute;top:0;left:22px;width:44px;height:3px;border-radius:0 0 4px 4px;background:var(--orange);opacity:0;transition:opacity .15s}
.ind-t:hover::after{opacity:1}
.ind-t .it-head{display:flex;align-items:center;gap:13px;margin-bottom:10px}
.ind-t .it-ic{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--cream);border:1.5px solid var(--cream-deep);display:flex;align-items:center;justify-content:center}
.ind-t .it-ic svg{width:20px;height:20px;stroke:var(--orange-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ind-t h3{font-size:16.5px}
.ind-t .sub-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.ind-t .sub-chips span{background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;color:var(--ink)}
.ind-t p{font-size:13px;color:var(--slate)}
.ind-t .it-tier{display:block;margin-top:12px;font-size:11.5px;font-weight:700;color:var(--orange-deep)}
.ind-close{margin-top:32px;text-align:center;font-size:14.5px;color:var(--slate)}

/* ============================================================
   FAQ
   Questions are grouped into labeled blocks. The box style and the
   open/close behavior are the shared V2A component, unchanged.
   ============================================================ */
.qgroup{margin-bottom:26px}
.qgroup:last-child{margin-bottom:0}
.qgroup>h3{font-family:'Inter',sans-serif;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)}
.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)}
.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:700px;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}
.qitem-body p a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.qitem-body p a:hover{text-decoration:underline}
.qflow-js .qitem{opacity:.7}
.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:700px;opacity:1}
.faq-foot{margin-top:28px;text-align:center;font-size:14.5px;color:var(--slate)}

/* ============ CONTACT (dark, final) ============ */
.cta-band{background:var(--dark);color:#fff;padding:96px 0}
.cta-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.cta-band h2{font-size:clamp(30px,4vw,44px);margin:18px 0 14px;color:#fff}
.cta-band h2 .accent{color:var(--orange)}
.cta-band .cta-sub{color:#C9C2B8;max-width:56ch;margin-bottom:24px}
.cta-band .cta-sub strong{color:#fff}
.cta-list{list-style:none;margin-bottom:22px}
.cta-list li{position:relative;padding:7px 0 7px 30px;font-size:15px;color:#E8E2DA}
.cta-list li::before{content:"\2713";position:absolute;left:0;top:7px;width:20px;height:20px;border-radius:6px;background:rgba(232,80,26,.18);border:1.5px solid var(--orange);color:#F1A07E;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.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,.3)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.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%;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-family:'Inter';font-size:14px;background:var(--cream);color:var(--ink)}
.f-field textarea{min-height:90px;resize:vertical}
.f-field-gap{margin-bottom:16px}
.form-card .btn{width:100%;text-align:center;margin-top:6px}
.form-note{text-align:center;font-size:12px;color:var(--slate);margin-top:12px}

/* 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)}

/* ============================================================
   INVOICE REQUEST MODAL
   There is no checkout on this page. Priced packages open this
   dialog instead. Prices live on each select as data-price, so
   changing a price is a markup edit and never a script edit.
   ============================================================ */
.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:#fff;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}
.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%;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}
.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 92px 88px;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}
.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}
.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}
.modal-done ol{list-style:none;text-align:left;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:14px;padding:16px 20px;margin-bottom:22px;counter-reset:dn}
.modal-done ol li{counter-increment:dn;position:relative;padding:6px 0 6px 30px;font-size:13.5px;color:var(--slate);line-height:1.6}
.modal-done ol li::before{content:counter(dn);position:absolute;left:0;top:8px;width:20px;height:20px;border-radius:6px;background:var(--orange-soft);border:1.5px solid var(--orange-line);color:var(--orange-deep);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.modal-done ol li strong{color:var(--ink)}
.btn-cap{max-width:340px}

/* ============================================================
   RESPONSIVE
   Every responsive rule on this page lives in this one block, in
   breakpoint order. Do not add a media query next to a component.
   The page is built to survive any narrow viewport rather than one
   device, so the rules below work in four groups:
     1. card grids drop to fewer columns, then to one
     2. fixed desktop heights release to auto
     3. absolutely positioned decoration returns to the flow
     4. nowrap, min-width and table widths are released, because those
        three are what actually cause sideways scroll
   The global overflow guard sits in section 01 with the base styles.
   ============================================================ */

/* ---- 1080px: two columns where there were three or four ---- */
@media(max-width:1080px){
  .inv-grid{grid-template-columns:1fr 1fr}
  .plan-grid{grid-template-columns:1fr 1fr}
  .ind-tiles{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .chg-grid,.split,.smp,.tool-band{grid-template-columns:1fr}
  .addon{grid-template-columns:1fr;gap:22px}
}

/* ---- 880px: single column, and the two tables restack ---- */
@media(max-width:880px){
  section{padding:64px 0}
  .hero{padding:56px 0 66px}
  .hero-grid,.cta-grid{grid-template-columns:1fr;gap:34px}

  /* grids to one card per row */
  .prob-grid,.why-grid,.ind-tiles,.plan-grid,.inv-grid,.do-grid,
  .lim-grid,.mo-grid,.ar,.f-row,.mf-row{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}

  /* fixed desktop heights release to auto */
  .rep-viz{min-height:0;padding:8px 0 0}
  .plan .p-for{min-height:0}
  .qitem-body,.pstep-body{max-height:none}
  .qflow-js .qitem .qitem-body,.pflow-js .pstep .pstep-body{max-height:0}
  .qflow-js .qitem.active .qitem-body,.pflow-js .pstep.active .pstep-body{max-height:1400px}

  /* absolutely positioned decoration returns to the flow */
  .rep-stack,.rep-glow{display:none}
  .plan .p-flag{position:static;transform:none;display:inline-block;margin:0 0 10px}
  .addon{padding:34px 22px 26px}
  .addon::before{position:static;display:inline-block;margin-bottom:12px}

  /* min-width on flex children is a common cause of sideways scroll */
  .inv-foot span,.smp-note span,.why-cta .micro,.var-band .vb-t,
  .acc-t,.jump-in{min-width:0}

  /* JUMP NAV on a phone.
     Two changes here, both deliberate.
     1. It becomes a 4 column grid instead of a sideways scroller. Eight
        items, seven sections plus the CTA, land as a tidy 4 by 2 block
        with nothing hidden. A bar you have to swipe sideways is a bar
        where most people never find out the other sections exist, and
        nobody is told to swipe it.
        Grid rather than flex-wrap on purpose: the row split is then
        fixed rather than left to line-breaking, so adding or renaming a
        link cannot silently push the bar onto a third row. If you add an
        eighth section, change the column count to 3 and it becomes 3 by 3.
     2. backdrop-filter is switched off at this width. Sticky plus
        backdrop-filter on the same element is a known iOS Safari failure,
        and a solid bar reads better over dense content anyway. */
  .jump{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
  .jump-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;overflow:visible;padding:0 8px;align-items:stretch}
  .jump a{display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 4px;font-size:10.5px;border-bottom-width:2px}
  .jump .j-cta{margin:4px 2px;padding:6px 4px;font-size:10.5px;border-radius:7px}
  /* the bar is taller once it wraps, so anchored sections clear more */
  section[id],div[id],header[id]{scroll-margin-top:76px}

  /* nowrap released anywhere it sits on a heading or a label */
  .smp-note b,.inv-foot b,.prob-close a,.hero-ctas .btn,.rep-sev,
  .mx td.c .val,.inv-tag,.addon::before,.acc-mark,.plan .p-flag{white-space:normal}
  /* long unbroken strings (URLs in the sample findings) must wrap */
  code,.smp-f dd,.qitem-body p,.acc-body p{overflow-wrap:anywhere}
  .hero-ctas .btn{flex:1 1 auto;text-align:center}

  /* accordion summary tightens */
  .acc-sum{gap:14px;padding:18px 20px}
  .acc-mark span{display:none}
  details[open] .acc-mark .m-close{display:none}
  .var-band{gap:22px}
  .vb-viz{grid-template-columns:repeat(5,22px);grid-auto-rows:22px}

  /* SCOPE MATRIX. The tabs show one package at a time, so the table is
     two columns wide and never scrolls sideways. Sticky cells go static
     because there is nothing left to scroll under. */
  .mx-tabs{display:flex}
  /* the container stays scrollable purely as the no-JS fallback: with the
     tabs working the table is two columns wide and never scrolls at all */
  table.mx{min-width:0}
  .mx td.lbl,.mx th.lbl{width:auto;min-width:0;position:static;box-shadow:none}
  .mx thead th{position:static}
  .mx th,.mx td{padding:10px 12px}
  .mx tr.grp td{position:static}
  .mx-key{gap:8px 18px;font-size:12px}
  .mx.only-1 .c2,.mx.only-1 .c3,.mx.only-1 .c4,
  .mx.only-2 .c1,.mx.only-2 .c3,.mx.only-2 .c4,
  .mx.only-3 .c1,.mx.only-3 .c2,.mx.only-3 .c4,
  .mx.only-4 .c1,.mx.only-4 .c2,.mx.only-4 .c3{display:none}

  /* COMPARISON TABLE becomes stacked cards. Each row turns into one
     card with its own labeled halves, so nothing scrolls sideways. */
  .compare-dark .tbl-scroll{border:none;border-radius:0;overflow:visible}
  table.cmp{min-width:0;display:block;background:transparent}
  .cmp thead{display:none}
  .cmp tbody,.cmp tr,.cmp td{display:block;width:auto}
  .cmp tr{background:#211B15;border:1.5px solid #33291F;border-radius:16px;margin-bottom:12px;padding:6px 0}
  .cmp td{border-bottom:none;padding:10px 18px}
  .cmp td:first-child{width:auto;font-size:14.5px;color:#fff;padding-bottom:2px}
  .cmp td:nth-child(2)::before{content:"Most audit providers";display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
  .cmp td.v2a{width:auto;border-radius:13px;margin:2px 12px 8px;padding:12px 16px}
  .cmp td.v2a::before{content:"Visual2Action";display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#F1A07E;margin-bottom:5px}
}

/* ---- 640px: phone ---- */
@media(max-width:640px){
  .wrap{padding:0 18px}
  .stats-grid{grid-template-columns:1fr}
  .stat{padding:26px 20px}
  .pstep-body p,.pstep-body .p-decide{padding-left:0}
  .smp-f{grid-template-columns:1fr;gap:3px}
  .p-feat-2col{columns:1}
  .rep-row{grid-template-columns:22px 1fr;row-gap:5px}
  .rep-row .rep-sev{grid-column:2;justify-self:start}
  .rep-body,.rep-bar,.rep-foot{padding-left:16px;padding-right:16px}
  .price-cta-row .btn,.why-cta .btn,.prob-close a{width:100%;text-align:center}
  .mx-key{flex-direction:column;gap:7px}
  .mx-tabs button{flex:1 1 auto}

  /* invoice modal on a phone */
  .modal{padding:12px}
  .modal-body{padding:26px 20px 22px}
  .modal-card h3{font-size:21px}
  .tier-row{grid-template-columns:1fr auto;row-gap:8px;padding:12px 14px}
  .tier-row .tier-qty{grid-column:1;width:100%}
  .tier-row .tier-line{grid-column:2;align-self:end}
  .tier-name{grid-column:1 / -1}
}

/* ---- motion stops when the reader has asked for that ---- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}