/* ===== TOKENS =====
   Three brand colours: Magenta #D81B60 (primary), Charcoal Black #222222
   (the raised surface every card and panel sits on) and Soft Blush #F8D7E3
   (the lightest step of the magenta ramp, used for icon fills and the tail of
   display-text gradients). Magenta leads, but it is a punctuation colour: it
   carries CTAs, eyebrows, counters and glows, and the page stays near-black
   and charcoal underneath it. */
:root{
  --bg: #050505;
  --bg-soft: #0d0d0d;
  /* Charcoal Black is the card surface, so a panel reads as a lifted plane
     against the near-black page rather than as a slightly-lighter black. */
  --card: #222222;
  --card-2: #2a2a2a;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);
  --text: #f5f5f3;
  --muted: #9a9a96;
  /* Lightened from #6f6f6b (4.04:1 on --bg, 3.59:1 on cards - failed WCAG AA)
     to meet 4.5:1 for small text on every dark surface. Still clears it on the
     charcoal card (4.59:1). */
  --muted-2: #8a8a86;
  /* Magenta ramp. --accent is the brand magenta and carries fills, borders and
     glows; white on it is 4.95:1. It is NOT readable as small text on dark
     (4.12:1 on --bg, 3.22:1 on --card), so accent-coloured type uses
     --accent-text instead: 6.66:1 on --bg, 5.20:1 on --card. */
  --accent: #D81B60;
  --accent-deep: #AD1457;
  --accent-lift: #E8306E;
  --accent-text: #F06292;
  --accent-soft: #F48FB1;
  --blush: #F8D7E3;
  --accent-rgb: 216,27,96;
  --accent-ink: #ffffff;
  --radius: 22px;
  --radius-sm: 14px;
  --container: 1200px;
  --font: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Space Grotesk", "Manrope", -apple-system, sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
/* Keyboard skip link: hidden until focused, then pinned top-left. */
.skip-link{ position:fixed; left:12px; top:-64px; z-index:2000; padding:10px 16px; border-radius:12px;
  background:var(--accent); color:var(--accent-ink); font-weight:700; text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.5); transition:top .16s ease; }
.skip-link:focus{ top:12px; outline:2px solid #fff; outline-offset:2px; }
/* Landing zones for programmatic focus: the skip-link target, and any region a
   script reveals and then focuses so it announces itself. Chrome matches
   :focus-visible on them whenever the last input was a key (typing the URL and
   pressing Enter counts), so a heading or a whole <main> came up ringed on
   arrival, reading as if the page had selected something by itself. Focus still
   moves - only the ring is dropped, and none of these are keyboard-operable
   controls. Real controls keep theirs. Never reuse tabindex="-1" here for a
   roving-tabindex widget, whose focus must stay visible. */
[tabindex="-1"]:focus{ outline:none; }
/* Available to assistive tech, invisible on screen. Used to give a decorative
   composition (the hero audit demo) a text equivalent without turning the whole
   thing into one role="img" and swallowing the real control inside it. */
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
html{ scroll-behavior:smooth; }
/* Lenis premium smooth scroll */
html.lenis,html.lenis body{ height:auto; }
html.lenis-on{ scroll-behavior:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  font-weight:500;
  letter-spacing:-0.02em;
  font-feature-settings:"cv09" on,"cv03" on,"cv04" on,"cv11" on,"ss01" on;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
/* ===== premium film grain overlay ===== */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.04;
  mix-blend-mode:overlay; background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.05; letter-spacing:-0.03em; font-weight:600; }
.brand__name{ font-family:var(--font-display); }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.accent{ color:var(--accent-text); }
/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:15px; font-weight:600; letter-spacing:-0.01em; padding:12px 20px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; transition:.25s cubic-bezier(.16,1,.3,1); white-space:nowrap;
}
.btn--sm{ padding:10px 17px; font-size:14px; }
.btn--block{ width:100%; }
/* --accent-lift, not the lighter --accent-text, as the top stop: white on the
   gradient's lightest pixel is 4.13:1 this way (the old purple button was
   3.47:1 there). */
.btn--primary{ background:linear-gradient(180deg,var(--accent-lift),var(--accent)); color:var(--accent-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 24px rgba(216,27,96,.22); }
.btn--primary:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 14px 38px rgba(216,27,96,.34); }
.btn--ghost{ background:rgba(255,255,255,0.05); color:var(--text); border-color:var(--line-2); }
.btn--ghost:hover{ background:rgba(255,255,255,0.1); transform:translateY(-1px); }
/* arrow icon (↗) */
.arrow{ width:15px; height:15px; display:inline-block; flex:0 0 auto; transition:transform .25s ease; }
.btn:hover .arrow{ transform:translate(2px,-2px); }
/* CTA button rows (hero + final CTA - replaced the old waitlist email forms) */
.cta-row{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.hero__cta{ margin-top:28px; }
.pill{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:500; letter-spacing:.005em; color:var(--text);
  padding:5px 17px 5px 6px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.1);
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 8px 24px rgba(0,0,0,0.32);
  -webkit-backdrop-filter:blur(8px) saturate(1.15); backdrop-filter:blur(8px) saturate(1.15);
}
.eyebrow svg{ width:13px; height:13px; flex:none; color:var(--accent-text); }
.pill svg{
  width:28px; height:28px; padding:6px; box-sizing:border-box; flex:none;
  border-radius:50%; color:#F8D7E3;
  background:linear-gradient(180deg, rgba(236,64,122,0.28), rgba(216,27,96,0.14));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 0 0 1px rgba(236,64,122,0.35),
    0 2px 10px rgba(216,27,96,0.32);
}
.eyebrow{
  display:inline-block; font-size:13px; letter-spacing:.02em; color:var(--accent-text);
  padding:5px 13px; border:1px solid rgba(216,27,96,.25); border-radius:999px; margin-bottom:18px;
  background:rgba(216,27,96,.05);
}
/* ===== NAV ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; padding:16px 0;
  transition:transform .45s cubic-bezier(.16,1,.3,1), padding .35s ease;
}
.nav__inner{
  display:grid; grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr); align-items:center; gap:24px;
  padding:9px 9px 9px 18px; border:1px solid var(--line); border-radius:18px;
  background:rgba(13,13,13,.5); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  transition:max-width .45s cubic-bezier(.16,1,.3,1), padding .35s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
  max-width:100%; margin-inline:auto;
}
/* Condense into a narrower, centered pill once scrolled.
   1000px, not the 880px this used to be: 880 was tuned for a four-short-label
   nav. The current one needs brand 141 + links 455 + actions 248 + 48 of gaps =
   892 plus 23 of padding, so at 880 the grid crushed the brand track to 111px
   and the wordmark spilled across the first link. The outer tracks are
   minmax(max-content,1fr) for the same reason: neither side may be squeezed
   below its content, whatever the pill width. */
.nav.scrolled{ padding:9px 0; }
.nav.scrolled .nav__inner{
  max-width:1000px; padding:7px 7px 7px 16px;
  background:rgba(9,9,9,.86); border-color:var(--line-2); box-shadow:0 18px 48px rgba(0,0,0,.5);
}
.nav__beta{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-text); background:rgba(216,27,96,.12); border:1px solid rgba(216,27,96,.35); padding:2px 7px; border-radius:6px; margin-left:4px; }
.nav__cta{ gap:8px; }
.nav__menucta{ display:none; }
.nav__menusignin{ display:none; }
/* desktop: Sign in is a button in nav__actions instead */
@keyframes navItemIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; letter-spacing:-.03em; }
.brand__mark{ width:30px; height:30px; border-radius:8px; object-fit:cover; display:block; }
.brand__mark--sm{ width:20px; height:20px; border-radius:6px; }
.nav__links{ display:flex; gap:24px; justify-self:center; }
/* Below this the row is tight enough that 24px of gap is what tips it over. */
@media (max-width:1120px){ .nav__links{ gap:18px; } }
.nav__actions{ justify-self:end; }
.nav__links-label{ display:none; }
.nav__links a{ position:relative; font-size:14.5px; color:var(--muted); padding:8px 2px; transition:color .2s; }
.nav__links a:hover{ color:var(--text); }
.nav__links a svg{ display:none; }
.nav__links a::after{ content:""; position:absolute; left:2px; right:2px; bottom:2px; height:2px; border-radius:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.16,1,.3,1); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__actions{ display:flex; align-items:center; gap:12px; }
.nav__backdrop{ display:none; }
.nav__toggle{ display:none; position:relative; width:38px; height:38px; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:11px; cursor:pointer; padding:0; transition:.22s ease; }
.nav__toggle span{ width:18px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .2s; }
/* ===== HERO ===== */
.hero{ position:relative; padding:150px 0 60px; text-align:center; overflow:hidden; }
.hero__glow{
  position:absolute; top:300px; left:50%; transform:translateX(-50%);
  width:1100px; height:620px; pointer-events:none; z-index:1;
  background:radial-gradient(closest-side, rgba(216,27,96,.32), rgba(216,27,96,0) 72%);
  filter:blur(34px);
  animation:auroraPulse 9s ease-in-out infinite alternate;
}
.hero__glow--2{
  top:120px; width:760px; height:520px; mix-blend-mode:screen;
  background:radial-gradient(closest-side, rgba(216,27,96,.24), rgba(216,27,96,0) 70%);
  animation:auroraDrift 15s ease-in-out infinite alternate;
}
@keyframes auroraPulse{ 0%{ opacity:.8; } 100%{ opacity:1; filter:blur(40px); } }
@keyframes auroraDrift{ 0%{ transform:translateX(-64%); } 100%{ transform:translateX(-36%); } }
/* subtle dot-grid backdrop, fades out from the top */
.hero__grid{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 62% 52% at 50% 20%, #000 0%, transparent 74%);
  mask-image:radial-gradient(ellipse 62% 52% at 50% 20%, #000 0%, transparent 74%);
}
/* shimmering accent word in the headline */
.hero__title .accent{
  background:linear-gradient(100deg,#F06292 0%,#D81B60 38%,#F8D7E3 52%,#D81B60 66%,#F06292 100%);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:accentShimmer 7s linear infinite;
}
@keyframes accentShimmer{ to{ background-position:240% 0; } }
.hero__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.hero__title{ font-size:clamp(33px, 8.6vw, 64px); line-height:1.04; font-weight:600; letter-spacing:-0.03em; margin:22px 0 20px; text-wrap:balance; }
.hero__sub{ color:var(--muted); font-size:clamp(15.5px,1.4vw,19px); line-height:1.5; max-width:520px; text-wrap:pretty; padding-inline:8px; }
.hero__note{ color:var(--muted-2); font-size:13.5px; margin-top:18px; }
/* ===== early-access / waitlist form ===== */
.signup{ width:100%; max-width:444px; margin:30px auto 0; }
.signup__row{ display:flex; gap:8px; padding:6px; border:1px solid var(--line-2); background:rgba(255,255,255,.05); border-radius:999px; transition:border-color .2s; }
.signup__row:focus-within{ border-color:rgba(216,27,96,.55); }
.signup__input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--text); font:inherit; font-size:15px; padding:10px 16px; }
.signup__input::placeholder{ color:var(--muted-2); }
.signup__btn{ flex:0 0 auto; box-shadow:0 0 44px rgba(216,27,96,.4); }
.signup__btn:hover{ box-shadow:0 0 60px rgba(216,27,96,.55); }
.signup__msg{ min-height:18px; margin-top:13px; font-size:13.5px; text-align:center; color:var(--muted); }
.signup__msg.is-ok{ color:var(--accent-text); }
.signup__msg.is-err{ color:#ff7a7a; }
@media (max-width:480px){
.signup__row{ flex-direction:column; border-radius:20px; }
.signup__btn{ width:100%; justify-content:center; }
.signup__input{ text-align:center; }
}
/* hero stays CRISP on load - fade/slide only, no blur (blur-in is for scroll sections) */
.hero .reveal{ filter:none !important; }
.hero__inner.reveal{ transform:translateY(22px); transition:opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.hero__visual.reveal{ transform:none; transition:opacity 1s ease; }
/* 3D tilt entrance - dashboard tilts up into place (Framer-style) */
/* dashboard transform is driven by JS on scroll (subtle scale: small → big) */
/* progressive blur dissolving the bottom edge of the dashboard into the page */
/* ===== SECTION ===== */
.section{ padding:96px 0; position:relative; }
.section__head{ max-width:660px; margin:0 auto 56px; text-align:center; }
.section__head h2{ font-size:clamp(29px,4.4vw,48px); line-height:1.06; font-weight:500; letter-spacing:-0.04em; text-wrap:balance; }
.section__head--left{ text-align:left; margin-inline:0; }
.section__lead{ color:var(--muted); margin-top:18px; font-size:17px; line-height:1.5; text-wrap:pretty; }
.eyebrow + h2{ margin-top:6px; }
/* ===== HOW IT WORKS - connected timeline with product mockups ===== */
.hiw{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.hiw__rail{
  position:absolute; top:20px; left:6px; right:6px; height:2px; border-radius:2px; overflow:hidden;
  background:linear-gradient(90deg,rgba(216,27,96,.4),rgba(216,27,96,.1) 50%,rgba(216,27,96,.4));
  opacity:.55;
}
.hiw__rail i{ position:absolute; top:0; bottom:0; width:26%; background:linear-gradient(90deg,transparent,#F48FB1,transparent); animation:hiwFlow 3.8s linear infinite; }
@keyframes hiwFlow{ from{ left:-30%; } to{ left:110%; } }
.hiw__step{ display:flex; flex-direction:column; position:relative; }
.hiw__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.hiw__node{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff;
  background:#130C0F; border:1px solid rgba(216,27,96,.5); position:relative; z-index:1;
  box-shadow:0 0 0 6px var(--bg), 0 0 26px rgba(216,27,96,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.hiw__tag{
  display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px;
  background:#1E1016; border:1px solid rgba(216,27,96,.26);
  color:var(--accent-text); font-size:12px; font-weight:600; white-space:nowrap;
  position:relative; z-index:1; box-shadow:0 0 0 6px var(--bg);
}
.hiw__visual{
  position:relative; margin-bottom:20px; padding:16px; aspect-ratio:16/10.5;
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,#180F13,#100B0D);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.hiw__step:hover .hiw__visual{
  border-color:rgba(216,27,96,.35); transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 22px 55px rgba(0,0,0,.45), 0 0 40px rgba(216,27,96,.08);
}
.hiw__visual::after{ content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:130%; height:70%; background:radial-gradient(closest-side,rgba(216,27,96,.14),transparent 70%); pointer-events:none; }
.hiw__step h3{ font-size:21px; margin-bottom:8px; }
.hiw__step > p{ color:var(--muted); font-size:14.5px; line-height:1.55; }
.hiw__points{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.hiw__points li{ display:flex; align-items:flex-start; gap:9px; color:var(--text); font-size:13.5px; line-height:1.45; }
.hiw__points li svg{ width:15px; height:15px; flex:0 0 15px; margin-top:2px; color:var(--accent-text); }
.how__trust .trust-chip{ font-size:13.5px; color:var(--muted); }
/* mock 1: mini browser with live grade badge */
/* mock 2: audit snapshot - gauge + metric chips + scan sweep */
.ma__chip.ok::before{ background:#37d67a; }
.ma__chip.warn::before{ background:#f5b301; }
/* mock 3: white-label PDF + sent toast + leads row */
.ms{ position:relative; height:100%; }
.ms__pdf > i.short{ width:60%; }
/* ===== REAL MEASUREMENT - data bento with live CSS visuals ===== */
.mcard{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:16px;
  padding:26px; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 45%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.mcard:hover{
  transform:translateY(-4px); border-color:rgba(216,27,96,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 22px 55px rgba(0,0,0,.4), 0 0 0 1px rgba(216,27,96,.14);
}
/* big score gauge */
/* core web vitals tiles */
.mcwv .m{
  display:flex; flex-direction:column; gap:5px; padding:12px 13px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--muted-2);
  transition:border-color .25s ease, background .25s ease;
}
.mcwv .m:hover{ border-color:rgba(216,27,96,.3); background:rgba(216,27,96,.05); }
.mcwv .m > span{ display:flex; align-items:center; gap:6px; }
.mcwv .m > span::before{ content:""; width:6px; height:6px; border-radius:50%; flex:none; }
.mcwv .m b{ font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-.01em; color:#fff; }
/* payload bars */
.mcard.in .mbars__track i{ width:var(--w,50%); }
/* revenue readout */
.mcard.in .mrev__prog i{ width:62%; }
/* ===== FEATURES - seamless matrix with embedded UI fragments ===== */
.fx__cell{ position:relative; background:#0D0A0B; padding:28px; display:flex; flex-direction:column; gap:10px; overflow:hidden; transition:background .3s ease; }
.fx__cell:hover{ background:#140D10; }
/* 4-up slim variant (trust strip) */
.fx--slim .fx__cell{ padding:24px; gap:9px; }
.fx--slim .fx__cell h3{ font-size:16px; }
.fx--slim .fx__cell p{ font-size:13.5px; }
.fx__cell h3{ font-size:18.5px; }
.fx__cell p{ color:var(--muted); font-size:14px; line-height:1.55; }
/* fragment: check rows */
/* fragment: head-to-head bars */
.fx.in .frag-vs .frag-track i{ width:var(--w,50%); }
/* fragment: leads-library rows */
.frag-lead__grade.g{ color:#37d67a; background:rgba(55,214,122,.12); }
.frag-lead__grade.w{ color:#f5b301; background:rgba(245,179,1,.12); }
/* fragment: score-trend bars */
.fx.in .frag-trend__bars i{ height:var(--h,40%); }
/* fragment: share chips */
/* fragment: branded PDF chip */
/* ===== STATS ===== */
.stats{
  display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:center;
  margin-top:50px; padding:30px 40px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-soft);
}
.stat{ display:flex; flex-direction:column; max-width:320px; }
.stat strong{ font-size:40px; letter-spacing:-.03em; }
.stat span{ color:var(--muted); font-size:14px; }
.stat__divider{ width:1px; height:46px; background:var(--line-2); }
.stats .btn{ margin-left:auto; }
/* ===== APP DETECTION STRIP ===== */
/* ===== INSIDE THE REPORT - document table of contents ===== */
.reportx__copy .section__lead, .aix__copy .section__lead{ margin-top:16px; }
.toc{
  position:relative; overflow:hidden; padding:26px 28px;
  border:1px solid var(--line-2); border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 40%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.45);
}
.toc::after{ content:""; position:absolute; top:-80px; right:-60px; width:280px; height:280px; background:radial-gradient(circle,rgba(216,27,96,.16),transparent 65%); pointer-events:none; }
/* ===== AI DIAGNOSIS - generated-diagnosis mockup ===== */
.aim{
  position:relative; overflow:hidden; padding:24px;
  border:1px solid var(--line-2); border-radius:var(--radius);
  background:radial-gradient(130% 110% at 0% 0%, rgba(216,27,96,.12), rgba(216,27,96,0) 58%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 30px 80px rgba(0,0,0,.45);
}
.aim::after{ content:""; position:absolute; top:-70px; left:-50px; width:280px; height:280px; background:radial-gradient(circle,rgba(216,27,96,.2),transparent 65%); pointer-events:none; }
@media (max-width:980px){
.aim{ order:2; }
}
/* ===== COMPARISON - table ===== */
.cmp{
  max-width:960px; margin-inline:auto; overflow:hidden;
  border:1px solid var(--line-2); border-radius:var(--radius); background:var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.3);
}
.cmp__row{ display:grid; grid-template-columns:172px 1fr 1.12fr; }
.cmp__row + .cmp__row{ border-top:1px solid var(--line); }
.cmp__row > span{ padding:18px 22px; font-size:14px; line-height:1.45; display:flex; align-items:center; gap:10px; }
.cmp__row > span:last-child{
  background:linear-gradient(180deg,rgba(216,27,96,.09),rgba(216,27,96,.045));
  border-left:1px solid rgba(216,27,96,.28); color:var(--text); font-weight:600;
}
.cmp__row--head > span{ padding:15px 22px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.cmp__row--head > span:last-child{ font-size:13.5px; letter-spacing:-.01em; text-transform:none; color:var(--text); font-weight:700; }
.cmp__k{ color:var(--muted-2); font-size:12.5px; font-weight:700; letter-spacing:.02em; }
.cmp__old{ color:var(--muted); }
.cmp__new i{ font-style:normal; flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:800; background:var(--accent); color:#fff; }
.cmp__brand{ display:inline-flex; align-items:center; gap:8px; }
@media (max-width:760px){
.cmp__row{ grid-template-columns:1fr 1fr; }
.cmp__row--head{ display:none; }
.cmp__k{ grid-column:1 / -1; padding:14px 16px 0; }
.cmp__row > span{ padding:12px 16px 16px; font-size:13px; }
.cmp__old, .cmp__row:not(.cmp__row--head) > span:last-child{ flex-direction:column; align-items:flex-start; gap:7px; }
.cmp__old::before{ content:"Manual way"; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.cmp__row:not(.cmp__row--head) > span:last-child::before{ content:"ShopGrade"; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); }
.cmp__new i{ display:none; }
}
/* ===== MARQUEE (used by the app-detection strip) ===== */
/* ===== EARLY FEEDBACK - editorial quote bento ===== */
.quote{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:24px; padding:30px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 42%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.quote:hover{ border-color:rgba(216,27,96,.3); transform:translateY(-3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 45px rgba(0,0,0,.35); }
.quote:not(.quote--lead){ grid-column:span 5; }
.quote::after{
  content:"\201C"; position:absolute; top:12px; right:22px; pointer-events:none;
  font-family:var(--font-display); font-size:54px; line-height:1; color:rgba(216,27,96,.22);
}
.quote blockquote{ font-size:15px; line-height:1.65; color:var(--muted); }
.quote blockquote em{ font-style:normal; color:var(--text); font-weight:600; }
/* featured pull-quote: spans two rows, display type, gradient highlight */
.quote figcaption{ display:flex; align-items:center; gap:12px; margin-top:auto; position:relative; }
@media (max-width:980px){
.quote:not(.quote--lead), .quote--lead{ grid-column:auto; grid-row:auto; }
}
/* ===== AI PAGE TEARDOWN - annotated storefront mock ===== */
/* three-engine coverage cards */
.scope{
  position:relative; overflow:hidden; padding:24px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 45%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.scope:hover{ border-color:rgba(216,27,96,.3); transform:translateY(-3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 45px rgba(0,0,0,.35); }
.scope h3{ font-size:16px; letter-spacing:-.01em; }
.scope ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.scope li{ display:flex; gap:8px; font-size:13px; color:var(--muted); line-height:1.5; }
.scope li::before{ content:"✓"; color:var(--accent-text); font-weight:700; font-size:11px; flex:none; margin-top:1px; }
.stats--worth .stat{ max-width:250px; }
.stats--worth .stat strong{ font-size:34px; white-space:nowrap; }
.stats--worth .stat span{ font-size:13px; }
@media (max-width:980px){
.stats--worth .stat{ max-width:none; }
}
.t-line{ display:block; height:9px; border-radius:5px; background:rgba(255,255,255,.07); }
.t-line.w85{ width:85%; }
.t-line.w70{ width:70%; }
.t-line.w60{ width:60%; }
.t-line.w40{ width:40%; }
/* ===== BUILT RIGHT - split trust panel ===== */
.trustx__copy .section__lead{ margin-top:16px; }
/* ===== LEGAL PAGES (terms / privacy / refunds) ===== */
.legal-hero{ position:relative; padding:150px 0 30px; text-align:center; overflow:hidden; }
.legal-hero__glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 75% at 50% 20%, rgba(216,27,96,.17), transparent 72%);
}
.legal-hero .container{ position:relative; }
.legal-hero h1{
  font-size:clamp(30px,4.6vw,50px); line-height:1.05; font-weight:500; letter-spacing:-.04em; margin-top:18px;
  background:linear-gradient(180deg,#ffffff 0%,#F6EBF0 55%,#C9B6BE 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.legal-hero__meta{ margin-top:14px; color:var(--muted-2); font-size:13.5px; }
.legal{ max-width:760px; margin-inline:auto; padding:26px 24px 90px; counter-reset:law; }
.legal-card{
  position:relative; overflow:hidden; margin-bottom:44px; padding:22px 24px;
  border:1px solid rgba(216,27,96,.28); border-radius:16px;
  background:radial-gradient(120% 130% at 0% 0%, rgba(216,27,96,.12), rgba(216,27,96,0) 60%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.legal-card b{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); margin-bottom:8px; }
.legal-card p{ color:var(--text); font-size:15px; line-height:1.65; margin:0; }
.legal h2{
  counter-increment:law; display:flex; align-items:baseline; gap:12px;
  font-size:21px; letter-spacing:-.02em; margin:44px 0 14px;
}
.legal h2::before{ content:counter(law,decimal-leading-zero); font-size:13px; font-weight:700; color:var(--accent-text); flex:none; }
.legal p{ color:var(--muted); font-size:15px; line-height:1.7; margin-bottom:14px; }
.legal strong{ color:var(--text); font-weight:600; }
.legal a{ color:var(--accent-text); }
.legal a:hover{ text-decoration:underline; }
.legal ul{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.legal ul li{ position:relative; padding-left:22px; color:var(--muted); font-size:15px; line-height:1.65; }
.legal ul li::before{ content:""; position:absolute; left:4px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.75; }
.legal-note{
  margin-top:48px; padding:18px 20px; border:1px solid var(--line); border-radius:14px;
  color:var(--muted-2); font-size:13.5px; line-height:1.6; background:rgba(255,255,255,.02);
}
.legal-note a{ color:var(--accent-text); }
/* ===== PRICING ===== */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.plan{ display:flex; flex-direction:column; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:30px; position:relative; transition:.3s; }
.plan:hover{ border-color:var(--line-2); }
.plan--popular{ background:linear-gradient(180deg, rgba(216,27,96,.08), rgba(13,13,13,.4)); border-color:rgba(216,27,96,.35); }
.plan__badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); white-space:nowrap; z-index:2;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg,var(--accent-lift),var(--accent)); padding:6px 14px; border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 22px rgba(216,27,96,.4);
}
.plan__top{ display:flex; align-items:center; gap:11px; }
.plan__icon{
  width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; color:var(--accent-text);
  background:linear-gradient(135deg,rgba(216,27,96,.22),rgba(216,27,96,.05)); border:1px solid rgba(216,27,96,.3);
}
.plan__icon svg{ width:18px; height:18px; }
.plan h3{ font-size:19px; }
.plan__desc{ color:var(--muted); font-size:13.5px; margin-top:12px; }
.plan__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 7px; margin-top:16px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.plan__price .per{ white-space:nowrap; }
.plan__price .amount{ font-family:var(--font-display); font-size:44px; letter-spacing:-.03em; font-weight:600; }
.plan__price .per{ color:var(--muted); font-size:14px; }
.plan__list{ list-style:none; margin:18px 0 26px; display:flex; flex-direction:column; gap:12px; }
.plan__list li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--muted); line-height:1.4; }
.plan__list li::before{ content:"✓"; flex:0 0 19px; height:19px; border-radius:50%; background:rgba(216,27,96,.14); color:var(--accent-text); font-weight:700; font-size:10px; display:grid; place-items:center; margin-top:1px; }
.plan__list li.plan__group{ margin-top:4px; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-text); }
.plan__list li.plan__group::before{ display:none; }
.plan .btn{ margin-top:auto; }
.plans__foot{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px; }
.plans__foot .trust-chip{ font-size:12.5px; color:var(--muted); }
/* ===== FAQ ===== */
.faq__wrap{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start; }
.faq{ display:flex; flex-direction:column; gap:12px; }
.faq__item{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; transition:.3s; }
.faq__item[open]{ border-color:var(--line-2); }
.faq__item summary{ list-style:none; cursor:pointer; padding:22px 24px; font-size:16.5px; font-weight:500; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary i{ position:relative; width:16px; height:16px; flex:0 0 16px; }
.faq__item summary i::before,.faq__item summary i::after{ content:""; position:absolute; background:var(--accent); border-radius:2px; transition:.3s; }
.faq__item summary i::before{ top:7px; left:0; width:16px; height:2px; }
.faq__item summary i::after{ left:7px; top:0; width:2px; height:16px; }
.faq__item[open] summary i::after{ transform:rotate(90deg); opacity:0; }
.faq__a{ padding:0 24px 24px; color:var(--muted); font-size:15px; }
/* numbered questions */
.faq__item summary{ justify-content:flex-start; gap:14px; counter-increment:faq; }
.faq{ counter-reset:faq; }
.faq__item summary::before{ content:counter(faq,decimal-leading-zero); font-family:var(--font-display); font-size:12.5px; font-weight:700; color:var(--accent-text); flex:none; opacity:.9; }
.faq__item summary i{ margin-left:auto; }
.faq__item .faq__a{ padding-left:60px; }
/* support card under the FAQ intro */
.faq__cta{
  display:flex; align-items:center; gap:14px; margin-top:28px; padding:18px; max-width:400px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 60%), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.faq__cta img{ width:38px; height:38px; border-radius:10px; flex:none; }
.faq__cta > div{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.faq__cta b{ font-size:14px; }
.faq__cta span{ font-size:12.5px; color:var(--muted); }
/* ===== FINAL CTA - open on the page, aurora backdrop, clear 3-step path ===== */
/* (the section's top hairline comes from the global `main .section::before` rhythm rule) */
.finalcta{
  position:relative; text-align:center;
  padding:120px 24px 128px;
}
/* soft aurora - layered radial glows, no card, no border */
.finalcta__glow{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(34% 46% at 34% 30%, rgba(216,27,96,.22), transparent 70%),
    radial-gradient(32% 44% at 68% 34%, rgba(240,98,146,.16), transparent 70%),
    radial-gradient(48% 40% at 50% 70%, rgba(173,20,87,.13), transparent 72%);
  filter:blur(22px);
}
.finalcta__inner{ position:relative; z-index:1; max-width:720px; margin-inline:auto; }
.finalcta__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text); margin-bottom:18px;
  padding:6px 14px; border-radius:999px;
  border:1px solid rgba(216,27,96,.28); background:rgba(216,27,96,.08);
}
.finalcta__title{
  font-size:clamp(38px,5.4vw,66px); line-height:1.04; letter-spacing:-.03em; margin:0 0 18px;
}
.finalcta__sub{
  color:var(--muted); font-size:clamp(15px,1.6vw,18px); line-height:1.55;
  max-width:480px; margin:0 auto; text-wrap:pretty;
}
/* stepper - tells people exactly what to do */
.finalcta__steps{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px 10px; list-style:none; margin:34px auto 36px; padding:0; max-width:660px;
}
.fstep{ display:inline-flex; align-items:center; gap:11px; }
.fstep__num{
  width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; color:#fff;
  background:linear-gradient(180deg,var(--accent-lift),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 4px rgba(216,27,96,.1), 0 4px 12px rgba(216,27,96,.4);
}
.fstep__label{ font-size:14px; font-weight:500; color:var(--text); white-space:nowrap; }
.fstep:not(:last-child)::after{
  content:""; width:26px; height:1px; margin-left:4px;
  background:linear-gradient(90deg, rgba(216,27,96,.5), rgba(255,255,255,.08));
}
.finalcta__cta{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.finalcta .btn--primary{ padding:16px 34px; font-size:16px; border-radius:14px; }
.finalcta .btn--ghost{ padding:16px 28px; font-size:16px; border-radius:14px; }
.finalcta__micro{ margin:24px auto 0; color:var(--muted-2); font-size:13px; }
@media (max-width:640px){
.finalcta{ padding:72px 20px 80px; }
.finalcta__steps{ flex-direction:column; align-items:flex-start; gap:16px; max-width:270px; margin:28px auto 30px; }
.fstep:not(:last-child)::after{ display:none; }
.finalcta__cta{ flex-direction:column; }
.finalcta .btn{ width:100%; }
}
/* ===== FOOTER ===== */
.footer{ position:relative; isolation:isolate; border-top:1px solid var(--line); padding:0 0 24px; background:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 40%); overflow:hidden; }
.footer::before{ content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:min(680px,80%); height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.55; }
.footer__glow{ position:absolute; z-index:-1; bottom:-40%; left:50%; transform:translateX(-50%); width:120%; height:80%; background:radial-gradient(ellipse at center,rgba(216,27,96,.18),transparent 60%); filter:blur(20px); pointer-events:none; }
.footer__grid-overlay{ position:absolute; inset:0; z-index:-1; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent 75%); opacity:.5; pointer-events:none; }
/* Link columns */
.footer__inner{ display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:48px; margin-top:76px; }
.footer__brand p{ color:var(--muted); font-size:14.5px; max-width:320px; margin-top:18px; line-height:1.55; }
.footer__social{ display:flex; gap:10px; margin-top:24px; }
.footer__social-link{ display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--muted); border:1px solid var(--line); background:rgba(255,255,255,.03); transition:.22s ease; }
.footer__social-link:hover{ color:var(--text); border-color:var(--accent); background:rgba(216,27,96,.12); transform:translateY(-2px); box-shadow:0 8px 20px rgba(216,27,96,.22); }
.footer__col h4{ font-size:11px; margin-bottom:18px; color:var(--muted-2); font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.footer__col a{ position:relative; display:block; width:fit-content; color:var(--muted); font-size:14.5px; padding:6px 0; transition:color .2s, padding-left .25s cubic-bezier(.16,1,.3,1); }
.footer__col a::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%) scaleX(0);
  width:10px; height:2px; border-radius:2px; background:var(--accent);
  transform-origin:left; transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.footer__col a:hover{ color:var(--text); padding-left:16px; }
.footer__col a:hover::before{ transform:translateY(-50%) scaleX(1); }
/* Giant wordmark */
.footer__wordmark{
  margin-top:56px; font-size:clamp(56px,15.5vw,210px); font-weight:800; line-height:.82; letter-spacing:-.045em;
  text-align:center; white-space:nowrap; user-select:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(216,27,96,.06) 68%,rgba(255,255,255,0));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:40px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted-2); font-size:13px; flex-wrap:wrap; gap:16px; }
.footer__top{ display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; padding:7px 14px; border-radius:999px; border:1px solid var(--line-2); background:rgba(255,255,255,.04); transition:.22s ease; }
.footer__top:hover{ color:var(--text); border-color:var(--accent); }
.footer__top svg{ transition:transform .22s ease; }
.footer__top:hover svg{ transform:translateY(-2px); }
/* ===== REVEAL ANIM (blur-in on scroll) ===== */
.reveal{
  opacity:0; transform:translateY(30px); filter:blur(12px);
  transition:opacity .8s ease, transform .85s cubic-bezier(.16,1,.3,1), filter .85s ease;
}
.reveal.in{ opacity:1; transform:none; filter:blur(0); }
/* ===== RESPONSIVE ===== */
@media (max-width:980px){
.hiw{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
.hiw__rail{ display:none; }
.hiw__visual{ aspect-ratio:16/9.5; }
.stats{ flex-direction:column; align-items:flex-start; gap:24px; }
.stat__divider{ display:none; }
.stats .btn{ margin-left:0; }
.plans{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
.faq__wrap{ grid-template-columns:1fr; gap:30px; }
.footer__inner{ grid-template-columns:1fr 1fr; gap:36px 40px; }
.footer__brand{ grid-column:1 / -1; }
}
@media (max-width:980px){
/* menu becomes a fixed overlay, so revert the bar to a simple flex row */
.nav__inner{ display:flex; justify-content:space-between; }
/* dim backdrop behind the menu */
.nav__backdrop{
    display:block; position:fixed; inset:0; z-index:40;
    background:rgba(4,4,4,.6); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
.nav__backdrop.open{ opacity:1; pointer-events:auto; }
/* keep the nav bar (and toggle) tappable above the backdrop */
.nav__wrap{ position:relative; z-index:50; }
/* slide-down sheet */
.nav__links{
    position:fixed; inset:78px 14px auto 14px; z-index:60; flex-direction:column; gap:4px;
    max-height:calc(100vh - 92px);
    max-height:calc(100dvh - 92px);
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    background:linear-gradient(180deg,rgba(26,20,22,.98),rgba(16,12,13,.98));
    backdrop-filter:blur(18px); border:1px solid var(--line-2);
    border-radius:22px; padding:16px;
    box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
    transform:translateY(-14px) scale(.97); transform-origin:top right;
    opacity:0; pointer-events:none; visibility:hidden;
    transition:transform .34s cubic-bezier(.16,1,.3,1), opacity .26s ease, visibility 0s linear .34s;
  }
.nav__links.open{ transform:none; opacity:1; pointer-events:auto; visibility:visible; transition:transform .34s cubic-bezier(.16,1,.3,1), opacity .26s ease, visibility 0s; }
.nav__links-label{ display:block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); padding:4px 12px 10px; }
.nav__links a{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    font-size:16px; color:var(--text); padding:15px 14px; border-radius:13px;
    background:rgba(255,255,255,.02); border:1px solid transparent;
    opacity:0; transform:translateY(8px); transition:background .2s, border-color .2s, color .2s;
  }
.nav__links a svg{ display:block; color:var(--muted-2); transition:transform .2s, color .2s; }
.nav__links a:active{ background:rgba(216,27,96,.14); border-color:var(--line-2); }
.nav__links a:active svg{ transform:translateX(3px); color:var(--accent-text); }
.nav__links a::after{ display:none; }
/* staggered entrance for each row */
.nav__links.open a{ animation:navItemIn .4s cubic-bezier(.16,1,.3,1) forwards; }
.nav__links.open a:nth-child(2){ animation-delay:.05s; }
.nav__links.open a:nth-child(3){ animation-delay:.1s; }
.nav__links.open a:nth-child(4){ animation-delay:.15s; }
.nav__links.open a:nth-child(5){ animation-delay:.2s; }
.nav__links.open a:nth-child(6){ animation-delay:.25s; }
.nav__links.open a:nth-child(7){ animation-delay:.3s; }
.nav__cta{ display:none; }
.nav__signin{ display:none; }
/* mobile: Sign in lives inside the menu instead */
.nav__inner{ padding:9px 9px 9px 16px; }
.nav__links a.nav__menucta{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:12px; background:linear-gradient(180deg,var(--accent-lift),var(--accent)); border:1px solid transparent; color:#fff; text-align:center; border-radius:15px; padding:16px; font-weight:600; font-size:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 12px 28px rgba(216,27,96,.35); }
.nav__links a.nav__menucta:active{ background:linear-gradient(180deg,#D81B60,#AD1457); transform:translateY(1px); }
.nav__links a.nav__menucta svg{ display:block; width:17px; height:17px; color:#fff; transform:none; }
.nav__toggle{ display:flex; }
.nav__toggle.open{ background:rgba(216,27,96,.14); border-color:var(--accent); }
.nav__toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle.open span:nth-child(2){ opacity:0; }
.nav__toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:760px){
.section{ padding:64px 0; }
.hero{ padding:120px 0 40px; }
.stats{ flex-direction:column; align-items:flex-start; }
.stat__divider{ display:none; }
.stats .btn{ margin-left:0; }
.footer__inner{ grid-template-columns:1fr 1fr; gap:32px 24px; }
.footer__brand{ grid-column:1 / -1; }
.footer__wordmark{ margin-top:40px; }
.footer__bottom{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
.reveal{ opacity:1; transform:none; filter:none; transition:none; }
.nav__links.open a{ animation:none; opacity:1; transform:none; }
}
/* ===== EXPRESSIVE POLISH (depth, gradients & micro-interactions) ===== */
/* ambient magenta depth behind the whole page */
body{
  background:
    radial-gradient(900px 520px at 12% -4%, rgba(216,27,96,.12), transparent 55%),
    radial-gradient(1000px 620px at 100% 10%, rgba(216,27,96,.07), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
/* gradient accent word */
/* Blush -> magenta, not blush -> deep magenta: --accent-deep is only 2.92:1 on
   the page background, so the tail of the gradient would drop out of AA. */
.accent{ background:linear-gradient(120deg,var(--blush),var(--accent-lift)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--accent-text); }
/* eyebrow gets a glowing dot */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; }
/* premium card hover: lift + magenta edge glow */
.plan{ transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease, background .3s ease; }
/* elevate the popular pricing plan */
.plan--popular{ transform:scale(1.035); box-shadow:0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(216,27,96,.32); z-index:2; }
.plan--popular:hover{ transform:scale(1.035) translateY(-2px); }
/* hero trust chips */
.trust-chip{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:rgba(255,255,255,.03); padding:7px 13px; border-radius:999px; }
.trust-chip svg{ width:14px; height:14px; color:var(--accent-text); flex:0 0 14px; }
@media (max-width:980px){
.plan--popular{ transform:none; }
.plan--popular:hover{ transform:translateY(-2px); }
}
/* ===== premium sheen: top highlight hairline on cards ===== */
.plan, .faq__item{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.plan--popular{ box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(216,27,96,.32); }
/* trust chips: subtle interactive lift */
.trust-chip{ transition:border-color .25s ease, background .25s ease, transform .25s ease; }
.trust-chip:hover{ border-color:rgba(216,27,96,.4); background:rgba(216,27,96,.08); transform:translateY(-1px); }
/* respect reduced-motion for all the new ambient animation */
@media (prefers-reduced-motion:reduce){
.hero__glow, .hero__glow--2, .hero__title .accent{ animation:none; }
}
/* ============================================================
   HERO LIVE AUDIT DASHBOARD (sgx) - modern, animated mockup
   ============================================================ */
/* ----- app shell: dark sidebar + light main ----- */
.sgx__navi.is-active{ background:rgba(216,27,96,.2); color:#F48FB1; }
.sgx__run{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:700; letter-spacing:-.01em; color:#fff; background:linear-gradient(180deg,var(--accent-lift),var(--accent)); border:0; border-radius:999px; padding:8px 14px; cursor:pointer; white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(216,27,96,.3); transition:transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.sgx__run:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 22px rgba(216,27,96,.4); }
.sgx__run:active{ transform:translateY(0); }
.sgx__run:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }
.sgx__run svg{ width:14px; height:14px; }
.sgx.is-scanning .sgx__run svg{ animation:sgxSpin .9s linear infinite; }
@keyframes sgxSpin{ to{ transform:rotate(360deg); } }
.sgx.is-done .sgx__live{ background:#37b520; animation:none; }
.sgx.is-done .sgx__status{ color:#2f7a00; }
/* live scan progress bar */
.sgx.is-scanning .sgx__scan i{ width:100%; transition:width 1.7s cubic-bezier(.4,0,.2,1); }
.sgx.is-done .sgx__scan{ opacity:0; height:0; margin:6px 0 10px; transition:opacity .45s ease, height .45s ease, margin .45s ease; }
/* ----- content grid: 3 columns ----- */
/* featured dark score card (spans both rows) */
/* gauge (shared) */
.sgx__arc{ fill:none; stroke:#D81B60; stroke-width:10; stroke-linecap:round; }
.sgx.is-scanning .sgx__grade{ opacity:.3; }
/* AI Expert Diagnosis panel */
.sgx.is-scanning .sgx__ai-gen{ display:inline-flex; }
.sgx.is-scanning .sgx__ai-text, .sgx.is-scanning .sgx__ai-list{ display:none; }
.sgx.is-done .sgx__ai-text{ opacity:1; transform:none; transition-delay:.1s; }
.sgx.is-done .sgx__ai-list li{ opacity:1; transform:none; transition-delay:calc(.22s + var(--i) * .12s); }
/* revenue at risk */
.sgx.is-done .sgx__prog i{ width:62%; }
/* core web vitals */
.sgx__cwv .m{ display:flex; align-items:center; gap:7px; font-size:12px; color:#6b6f66; background:#f6f7f3; border:1px solid #eceee6; border-radius:10px; padding:9px 10px; }
.sgx__cwv .m b{ margin-left:auto; color:#11130f; font-weight:700; }
.sgx__cwv .m::before{ content:""; width:7px; height:7px; border-radius:50%; flex:0 0 7px; }
.sgx.is-done .sgx__pass{ opacity:1; }
/* severity pills */
.sgx__sev .sev{ font-style:normal; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:7px; opacity:0; transform:translateY(-3px); transition:opacity .4s ease, transform .4s ease; }
.sgx.is-done .sgx__sev .sev{ opacity:1; transform:none; }
.sgx.is-done .sev--m{ transition-delay:.08s; }
.sgx.is-done .sev--l{ transition-delay:.16s; }
/* finding rows - stagger in when audit completes */
.sgx.is-done .sgx__rows li{ opacity:1; transform:none; transition-delay:calc(.2s + var(--i) * .13s); }
/* activity feed */
@media (max-width:560px){
/* stack the dashboard header so the status + run button don't clip off-screen */
.sgx__run span{ display:none; }
.sgx__run{ padding:8px 10px; flex:0 0 auto; }
}
@media (prefers-reduced-motion:reduce){
.sgx__arc{ stroke-dashoffset:13 !important; }
}
/* ============================================================
   MID-PAGE SECTION UPGRADES - rhythm, depth & richer cards
   ============================================================ */
/* --- section rhythm: centered accent hairline between sections --- */
main .section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(560px,78%); height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(216,27,96,.38) 50%,transparent);
}
main .section#how::before{ display:none; }
/* apps strip flows straight into it */
/* --- ambient magenta washes behind key sections --- */
.section:has(.fx)::after,
.section:has(.mbento)::after,
.section:has(.tear)::after,
.section:has(.plans)::after,
.section:has(.cmp)::after{
  content:""; position:absolute; z-index:-1; top:-40px; left:50%; transform:translateX(-50%);
  width:min(940px,100%); height:460px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(216,27,96,.09), transparent 72%);
  filter:blur(24px);
}
/* --- premium silver-gradient headlines --- */
.section__head h2, .finalcta h2{
  background:linear-gradient(180deg,#ffffff 0%,#F6EBF0 55%,#C9B6BE 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* --- card base: faint top-light gradient instead of flat fill --- */
.plan{
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 42%), var(--bg-soft);
}
.plan--popular{ background:linear-gradient(180deg, rgba(216,27,96,.1), rgba(13,13,13,.4)); }
/* --- cursor-tracked spotlight on cards (set via JS: --mx / --my) --- */
.spotlight{ position:relative; }
.spotlight::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .4s ease; z-index:1;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(216,27,96,.1), transparent 65%);
}
.spotlight:hover::before{ opacity:1; }
/* --- stats band: gradient numbers on a tinted panel --- */
.stats{
  background:linear-gradient(135deg, rgba(216,27,96,.09), rgba(255,255,255,.02)), var(--bg-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.3);
  position:relative; overflow:hidden;
}
.stats::after{
  content:""; position:absolute; top:-70%; right:-6%; width:320px; height:320px; pointer-events:none;
  background:radial-gradient(circle, rgba(216,27,96,.2), transparent 65%);
}
.stat strong{
  background:linear-gradient(120deg,#ffffff,#F48FB1);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stats .btn{ position:relative; z-index:1; }
/* --- app detection chips: react on hover --- */
/* --- pricing: accent hairline + gradient price on the popular plan --- */
.plan:hover{ transform:translateY(-4px); border-color:rgba(216,27,96,.3); box-shadow:0 22px 55px rgba(0,0,0,.4); }
.plan--popular::after{
  content:""; position:absolute; top:0; left:24px; right:24px; height:2px; border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg,transparent,#F48FB1,transparent);
}
.plan--popular .plan__price .amount{
  background:linear-gradient(120deg,#ffffff,#F48FB1);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
@media (max-width:980px){
.plan:hover{ transform:translateY(-2px); }
}
/* --- FAQ: tinted open state + answer ease-in --- */
.faq__item summary{ transition:color .2s ease; }
.faq__item summary:hover{ color:#fff; }
.faq__item[open]{
  background:linear-gradient(180deg, rgba(216,27,96,.07), var(--bg-soft) 60%);
  border-color:rgba(216,27,96,.3);
}
.faq__item[open] .faq__a{ animation:faqIn .35s ease both; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
.spotlight::before{ display:none; }
.faq__item[open] .faq__a{ animation:none; }
.hiw__rail i, .mb__badge, .ms__toast, .ma__scan, .ma__live i{ animation:none; }
.mcard .mbars__track i{ width:var(--w,50%); }
.mcard .mrev__prog i{ width:62%; }
}
/* ============================================================
   RESPONSIVE REFINEMENTS - tablet & mobile polish
   ============================================================ */
/* --- tablet (761–980): keep things airy --- */
@media (min-width:761px) and (max-width:980px){
.hiw{ max-width:640px; }
.aim, .toc{ max-width:640px; margin-inline:auto; width:100%; }
}
/* --- mobile (≤760): tighter cards, aligned text --- */
@media (max-width:760px){
.toc{ padding:20px 16px; }
.aim{ padding:18px; }
.faq__item summary{ padding:18px 18px; gap:11px; }
.faq__item .faq__a{ padding:0 18px 20px 18px; }
.faq__cta{ max-width:none; }
.plans__foot{ gap:8px; }
.hiw{ max-width:480px; }
.mcard{ padding:22px; }
.cmp__k{ font-size:11.5px; }
.stats{ padding:26px 24px; gap:20px; }
.stat strong{ font-size:32px; }
.quote{ padding:24px; }
}
/* --- small phones (≤560): slim hero + compact sections --- */
@media (max-width:560px){
.hero{ padding:112px 0 36px; }
.hero__title br{ display:none; }
/* slim the hero dashboard: drop the sidebar & secondary panels,
     keep score + AI + revenue only, and compact the score card */
.trust-chip{ padding:6px 11px; font-size:12.5px; }
.section{ padding:56px 0; }
.section__head{ margin-bottom:38px; }
.mcwv .m{ padding:10px 11px; }
.mcwv .m b{ font-size:15px; }
.fx__cell{ padding:24px 20px; }
}
/* ===== SIGNUP BUTTON LOADING STATE ===== */
.signup__btn.is-loading{ opacity:.65; pointer-events:none; }
/* honeypot: invisible to humans, tempting to bots */
.signup__hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }
/* ===== BETA PRICING: billing toggle, strikethrough, credits note ===== */
.plans__toggle{ display:flex; justify-content:center; margin:4px 0 34px; }
.toggle{
  display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04);
}
.toggle__btn{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font);
  font-size:13.5px; font-weight:600; color:var(--muted); padding:8px 17px;
  border-radius:999px; border:none; background:transparent; cursor:pointer; transition:.22s;
}
.toggle__btn em{
  font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.02em; color:#8ee6a8;
  background:rgba(55,214,122,.12); border:1px solid rgba(55,214,122,.3); padding:2px 8px; border-radius:999px;
}
.toggle__btn:hover{ color:var(--text); }
.toggle__btn.is-active{ color:#fff; background:linear-gradient(180deg,var(--accent-lift),var(--accent)); box-shadow:0 6px 18px rgba(216,27,96,.3); }
.toggle__btn.is-active em{ color:#a5f2bd; background:rgba(16,46,28,.6); border-color:rgba(55,214,122,.55); }
.plan__price .was{
  font-size:17px; font-weight:600; color:var(--muted-2);
  text-decoration:line-through; margin-right:9px;
}
.plan__beta{
  display:inline-flex; width:fit-content; margin:14px 0 4px; font-size:11px; font-weight:700;
  letter-spacing:.02em; color:#F48FB1; background:rgba(216,27,96,.12);
  border:1px solid rgba(216,27,96,.35); padding:4px 10px; border-radius:999px;
}
.credits-note{ margin-top:20px; text-align:center; color:var(--muted); font-size:13.5px; }
.credits-note b{ color:var(--text); }
.credits-note a{ color:var(--accent-text); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(216,27,96,.4); }
.credits-note a:hover{ border-bottom-color:var(--accent); }
/* ===== PLAN PICKER MODAL ===== */
.planmodal{ position:fixed; inset:0; z-index:200; display:none; }
.planmodal.is-open{ display:block; }
.planmodal__overlay{ position:absolute; inset:0; background:rgba(6,4,5,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.planmodal__dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(100% - 32px); max-width:900px; max-height:calc(100vh - 40px); overflow-y:auto;
  background:var(--bg-soft); border:1px solid var(--line-2); border-radius:var(--radius);
  box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(216,27,96,.14);
  padding:36px 36px 30px;
}
.planmodal.is-open .planmodal__dialog{ animation:planpop .34s cubic-bezier(.16,1,.3,1); }
@keyframes planpop{ from{ opacity:0; transform:translate(-50%,-46%) scale(.97); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
.planmodal__close{
  position:absolute; top:18px; right:18px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:.2s;
}
.planmodal__close svg{ width:17px; height:17px; }
.planmodal__close:hover{ color:var(--text); background:rgba(255,255,255,.08); }
.planmodal__head{ text-align:center; max-width:560px; margin:0 auto; }
.planmodal__head h2{ font-size:clamp(24px,3.4vw,32px); line-height:1.1; font-weight:500; letter-spacing:-.03em; margin-top:6px; }
.planmodal__sub{ color:var(--muted); font-size:14.5px; line-height:1.6; margin-top:12px; }
.planmodal__sub b{ color:var(--text); font-weight:600; }
.planmodal__toggle{ display:flex; justify-content:center; margin:20px 0 4px; }
.planmodal__tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }
.ptier{
  position:relative; text-align:left; display:flex; flex-direction:column; gap:6px; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:20px 18px 18px; font:inherit; color:var(--text); transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ptier:hover{ border-color:rgba(216,27,96,.5); }
.ptier--popular{ border-color:rgba(216,27,96,.4); }
.ptier.is-selected{ border-color:#D81B60; box-shadow:0 0 0 1px #D81B60, 0 16px 40px rgba(216,27,96,.2); background:rgba(216,27,96,.06); }
.ptier__check{ position:absolute; top:14px; right:14px; width:20px; height:20px; border-radius:50%; border:2px solid var(--line-2); transition:.18s; }
.ptier__check::after{ content:""; position:absolute; left:5px; top:2px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); opacity:0; transition:.15s; }
.ptier.is-selected .ptier__check{ border-color:#D81B60; background:#D81B60; }
.ptier.is-selected .ptier__check::after{ opacity:1; }
.ptier__badge{
  position:absolute; top:-10px; left:18px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; background:linear-gradient(180deg,var(--accent-lift),var(--accent)); padding:3px 9px; border-radius:999px;
}
.ptier__name{ font-size:15px; font-weight:700; padding-right:26px; }
.ptier__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin:2px 0 2px; }
.ptier__price b{ font-family:var(--font-display); font-size:30px; font-weight:600; letter-spacing:-.03em; }
.ptier__price s{ color:var(--muted-2); font-size:14px; }
.ptier__price em{ font-style:normal; color:var(--muted); font-size:12.5px; }
.ptier__desc{ color:var(--muted); font-size:12.5px; line-height:1.5; flex:1; }
.planmodal__form{ margin-top:22px; }
.planmodal__row{ display:flex; gap:10px; }
.planmodal__email{
  flex:1; min-width:0; background:var(--card); border:1px solid var(--line-2); border-radius:12px;
  padding:14px 16px; color:var(--text); font:inherit; font-size:15px; transition:border-color .2s ease;
}
.planmodal__email::placeholder{ color:var(--muted-2); }
.planmodal__email:focus{ outline:none; border-color:rgba(216,27,96,.6); }
.planmodal__submit{ flex:none; }
.planmodal__submit.is-loading{ opacity:.65; pointer-events:none; }
.planmodal__captcha{ display:flex; justify-content:center; margin-top:14px; min-height:0; }
.planmodal__captcha:empty{ margin-top:0; }
.planmodal__msg{ text-align:center; min-height:0; margin-top:12px; font-size:13.5px; }
.planmodal__msg.is-err{ color:#ff8a8a; }
.planmodal__msg.is-ok{ color:#8ee6a8; }
.planmodal__done{ text-align:center; padding:26px 10px 12px; max-width:440px; margin:0 auto; }
.planmodal__done-ico{
  display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%;
  color:#8ee6a8; background:rgba(55,214,122,.1); border:1px solid rgba(55,214,122,.32); margin-bottom:18px;
}
.planmodal__done-ico svg{ width:30px; height:30px; }
.planmodal__done h2{ font-size:26px; font-weight:500; letter-spacing:-.03em; }
.planmodal__done p{ color:var(--muted); font-size:14.5px; line-height:1.6; margin:12px auto 22px; }
body.modal-open{ overflow:hidden; }
@media (max-width:720px){
.planmodal__dialog{ padding:30px 20px 24px; }
.planmodal__tiers{ grid-template-columns:1fr; gap:10px; }
.ptier{ flex-direction:row; flex-wrap:wrap; align-items:center; padding:16px 16px; }
.ptier__check{ position:static; order:5; margin-left:auto; }
.ptier__name{ width:64px; padding-right:0; }
.ptier__price{ margin:0; }
.ptier__price b{ font-size:24px; }
.ptier__desc{ flex-basis:100%; order:6; }
.ptier__badge{ top:-8px; }
.planmodal__row{ flex-direction:column; }
.planmodal__submit{ width:100%; justify-content:center; }
}
/* ============================================================================
   MARKETING REWRITE (2026-08)
   The visual identity is unchanged: everything below reuses the existing tokens
   (--bg, --card, --line, --accent) and the existing .btn/.section/.eyebrow
   primitives. What changes is the STRUCTURE these sections need - a product
   explained as a Chrome extension, findings shown with their evidence, and
   outcomes rather than internal metric counts.
   ========================================================================== */
/* Marketing readability: the old cells ran 13.5-14.5px, which is below the
   16px floor a marketing page needs. Scoped to .m-copy so the account portal
   and the report keep their own (legitimately denser) type scale. */
/* ---------- HERO: the actual interaction, not a dashboard ---------- */
.flow{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:stretch;
  text-align:left; margin-top:44px;
}
.flow__step{
  position:relative; display:flex; flex-direction:column; gap:12px;
  background:#0D0A0B; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px; overflow:hidden;
}
.flow__step::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0,rgba(216,27,96,.08),transparent 60%);
}
.flow__prog span.is-done{ color:var(--text); }
.flow__prog span.is-done svg{ color:#37d67a; }
.flow__step p{ font-size:13.5px; line-height:1.5; color:var(--muted); }
@media (max-width:980px){
.flow{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
.flow{ grid-template-columns:1fr; gap:12px; }
}
/* ---------- HOW IT WORKS: four steps ---------- */
.hiw--4{ grid-template-columns:repeat(4,1fr); gap:20px; }
.hiw--4 .hiw__step h3{ font-size:19px; }
.hiw--4 .hiw__step > p{ font-size:15px; }
@media (max-width:1080px){
.hiw--4{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
}
@media (max-width:620px){
.hiw--4{ grid-template-columns:1fr; }
}
/* ---------- REAL FINDINGS: what / why / evidence / action / effort ---------- */
.finds{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.find{
  display:flex; flex-direction:column; gap:14px; padding:26px;
  background:#0D0A0B; border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .3s ease, transform .3s ease;
}
.find:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.find__top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.find__sev{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:999px;
}
.find__sev::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.find__sev--high{ color:#ff8a8a; background:rgba(255,122,122,.09); border:1px solid rgba(255,122,122,.28); }
.find__sev--med{ color:#f5c451; background:rgba(245,179,1,.09); border:1px solid rgba(245,179,1,.28); }
.find__area{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); }
.find h3{ font-size:19.5px; line-height:1.25; font-weight:600; letter-spacing:-.02em; }
.find__def{ display:flex; flex-direction:column; gap:12px; }
.find__def > div{ display:flex; flex-direction:column; gap:4px; }
.find__def dt, .find__k{
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text);
}
.find__def dd, .find__v{ font-size:15px; line-height:1.55; color:var(--muted); }
.find__evidence{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; line-height:1.5;
  color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-left:2px solid rgba(216,27,96,.5); border-radius:0 9px 9px 0; padding:11px 13px;
}
.find__foot{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.find__effort{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--muted);
}
.find__effort svg{ width:14px; height:14px; color:var(--accent-text); flex:none; }
@media (max-width:980px){
.finds{ grid-template-columns:1fr; }
}
/* ---------- WHAT THE REPORT COVERS ---------- */
.cover{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--line); gap:1px;
}
.coverc{ background:#0D0A0B; padding:28px 26px; display:flex; flex-direction:column; gap:11px; transition:background .3s ease; }
.coverc:hover{ background:#140D10; }
.coverc__h{ display:flex; align-items:center; gap:11px; }
.coverc__h svg{ width:19px; height:19px; color:var(--accent-text); flex:none; }
.coverc h3{ font-size:19px; font-weight:600; letter-spacing:-.02em; }
.coverc p{ font-size:15px; line-height:1.6; color:var(--muted); }
@media (max-width:900px){
.cover{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
.cover{ grid-template-columns:1fr; }
}
/* ---------- AUDIENCE OUTCOMES ---------- */
.aud{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.audc{
  display:flex; flex-direction:column; gap:14px; padding:30px 28px;
  background:#0D0A0B; border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .3s ease, transform .3s ease;
}
.audc:hover{ border-color:rgba(216,27,96,.32); transform:translateY(-3px); }
.audc__ico{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none;
  color:var(--accent-text); background:rgba(216,27,96,.1); border:1px solid rgba(216,27,96,.28);
}
.audc__ico svg{ width:19px; height:19px; }
.audc h3{ font-size:21px; font-weight:600; letter-spacing:-.025em; }
.audc > p{ font-size:15.5px; line-height:1.6; color:var(--muted); }
.audc__list{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.audc__list li{ display:flex; align-items:flex-start; gap:9px; font-size:14.5px; line-height:1.5; color:var(--text); }
.audc__list svg{ width:15px; height:15px; flex:0 0 15px; margin-top:3px; color:var(--accent-text); }
.audc .btn{ margin-top:auto; align-self:flex-start; }
@media (max-width:980px){
.aud{ grid-template-columns:1fr; }
}
/* ---------- REPORT WALKTHROUGH: one large panel at a time ---------- */
.walk{ display:flex; flex-direction:column; gap:26px; }
.walkrow{
  display:grid; grid-template-columns:1fr 1.15fr; gap:44px; align-items:center;
  padding:34px; background:#0D0A0B; border:1px solid var(--line); border-radius:var(--radius);
}
.walkrow:nth-child(even){ grid-template-columns:1.15fr 1fr; }
.walkrow:nth-child(even) .walkrow__copy{ order:2; }
.walkrow__step{
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent-text);
}
.walkrow__copy h3{ font-size:clamp(22px,2.6vw,29px); font-weight:500; letter-spacing:-.035em; line-height:1.15; margin-top:10px; }
.walkrow__copy p{ font-size:16px; line-height:1.6; color:var(--muted); margin-top:12px; max-width:52ch; }
.walkrow__note{ font-size:13.5px; color:var(--muted-2); margin-top:14px; }
.wpanel{
  border:1px solid var(--line-2); border-radius:16px; background:linear-gradient(180deg,#191314,#110D0E);
  padding:20px; display:flex; flex-direction:column; gap:14px; box-shadow:0 22px 60px rgba(0,0,0,.4);
}
.wpanel__bar{ display:flex; align-items:center; gap:10px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.wpanel__bar img{ width:22px; height:22px; border-radius:6px; flex:none; }
.wpanel__bar b{ font-size:13px; font-weight:700; }
.wpanel__bar span{ font-size:12px; color:var(--muted-2); margin-left:auto; }
.wsum{ display:flex; align-items:center; gap:20px; }
.wsum__score{
  width:88px; height:88px; flex:none; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px;
  border:2px solid rgba(216,27,96,.4); background:radial-gradient(circle,rgba(216,27,96,.14),transparent 70%);
}
.wsum__score b{ font-family:var(--font-display); font-size:29px; font-weight:700; line-height:1; }
.wsum__score span{ font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.wsum__txt{ font-size:14px; line-height:1.6; color:var(--muted); }
.wtally{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.wtally div{ background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px; padding:11px 10px; text-align:center; }
.wtally b{ display:block; font-family:var(--font-display); font-size:21px; font-weight:700; line-height:1.1; }
.wtally span{ font-size:10.5px; color:var(--muted-2); }
.wtally div:nth-child(1) b{ color:#ff8a8a; }
.wtally div:nth-child(2) b{ color:#f5c451; }
.wlist{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.wlist li{
  display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted);
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:9px; padding:10px 12px;
}
.wlist li i{
  font-style:normal; font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--accent-text);
  width:19px; height:19px; flex:none; border-radius:6px; display:grid; place-items:center;
  background:rgba(216,27,96,.12); border:1px solid rgba(216,27,96,.3);
}
.wlist li b{ margin-left:auto; flex:none; font-size:11px; font-weight:700; color:var(--muted-2); }
.wcalc{ display:flex; flex-direction:column; gap:11px; }
.wcalc__tag{
  align-self:flex-start; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted-2); background:rgba(255,255,255,.05); border:1px solid var(--line-2);
  border-radius:999px; padding:4px 10px;
}
.wcalc__row{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.wcalc__row label{ flex:1; }
.wcalc__row b{
  flex:none; font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--text);
  background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:8px; padding:6px 12px;
}
.wcalc__out{
  display:flex; align-items:center; gap:10px; padding:13px; border-radius:11px;
  background:rgba(216,27,96,.07); border:1px solid rgba(216,27,96,.26); font-size:13px; color:var(--muted);
}
.wcalc__out b{ margin-left:auto; font-family:var(--font-display); font-size:17px; color:var(--text); }
.wdiff{ display:flex; flex-direction:column; gap:9px; }
.wdiff__hd{ display:flex; align-items:center; gap:12px; }
.wdiff__was{ font-size:13px; color:var(--muted-2); text-decoration:line-through; }
.wdiff__now{ font-family:var(--font-display); font-size:24px; font-weight:700; color:#8ee6a8; }
.wdiff__delta{ margin-left:auto; font-size:12px; font-weight:700; color:#8ee6a8; background:rgba(55,214,122,.09); border:1px solid rgba(55,214,122,.26); border-radius:999px; padding:4px 11px; }
.wshare{ display:flex; flex-wrap:wrap; gap:8px; }
.wshare span{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted);
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:999px; padding:8px 14px;
}
.wshare svg{ width:13px; height:13px; color:var(--accent-text); flex:none; }
@media (max-width:980px){
.walkrow, .walkrow:nth-child(even){ grid-template-columns:1fr; gap:28px; padding:26px 22px; }
.walkrow:nth-child(even) .walkrow__copy{ order:0; }
}
/* ---------- PROOF ---------- */
.proof{ display:grid; grid-template-columns:1.25fr 1fr; gap:20px; align-items:stretch; }
.proofc{
  display:flex; flex-direction:column; gap:14px; padding:32px;
  background:#0D0A0B; border:1px solid var(--line); border-radius:var(--radius);
}
.proofc--lead{ background:linear-gradient(150deg,rgba(216,27,96,.09),#0D0A0B 60%); border-color:rgba(216,27,96,.26); }
.proofc h3{ font-size:22px; font-weight:600; letter-spacing:-.025em; }
.proofc p{ font-size:15.5px; line-height:1.6; color:var(--muted); }
.proofc .btn{ align-self:flex-start; margin-top:auto; }
.proofc__k{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); }
.proofc--pending .proofc__k{ color:var(--muted-2); }
.proofc--pending{ border-style:dashed; }
@media (max-width:900px){
.proof{ grid-template-columns:1fr; }
}
/* ---------- PRIVACY & PERMISSIONS ---------- */
.perm{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.perm li{
  display:flex; align-items:flex-start; gap:12px; padding:18px 20px; list-style:none;
  background:#0D0A0B; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:15px; line-height:1.55; color:var(--text);
}
.perm li svg{ width:17px; height:17px; flex:0 0 17px; margin-top:3px; }
.perm li.is-yes svg{ color:#8ee6a8; }
.perm li.is-no svg{ color:#ff8a8a; }
.perm li span{ color:var(--muted); display:block; font-size:14px; margin-top:3px; }
@media (max-width:760px){
.perm{ grid-template-columns:1fr; }
}
/* ---------- PAGE HERO for the sub-pages ---------- */
.phero{ position:relative; padding:132px 0 54px; overflow:hidden; }
.phero__glow{
  position:absolute; top:-180px; left:50%; transform:translateX(-50%); width:900px; height:520px;
  background:radial-gradient(closest-side,rgba(216,27,96,.16),transparent 72%); pointer-events:none;
}
.phero__inner{ position:relative; z-index:2; max-width:760px; }
.phero h1{
  font-size:clamp(31px,5.6vw,52px); line-height:1.06; font-weight:500; letter-spacing:-.035em;
  margin:18px 0 18px; text-wrap:balance;
}
.phero__sub{ font-size:17.5px; line-height:1.6; color:var(--muted); max-width:60ch; text-wrap:pretty; }
.phero .cta-row{ justify-content:flex-start; margin-top:28px; }
.phero__note{ margin-top:16px; font-size:14px; color:var(--muted-2); }
@media (max-width:760px){
.phero{ padding:118px 0 40px; }
}
/* ---------- WORKFLOW LIST (agency page) ---------- */
.wf{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.wf li{
  list-style:none; padding:22px; background:#0D0A0B; border:1px solid var(--line);
  border-radius:var(--radius-sm); display:flex; flex-direction:column; gap:8px;
}
.wf b{ font-size:16.5px; font-weight:700; letter-spacing:-.015em; }
.wf span{ font-size:14.5px; line-height:1.55; color:var(--muted); }
@media (max-width:900px){
.wf{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
.wf{ grid-template-columns:1fr; }
}
/* ---------- SAMPLE REPORT PAGE ---------- */
.samplebar{
  position:sticky; bottom:0; z-index:40; margin-top:0;
  border-top:1px solid var(--line-2); background:rgba(13,10,11,.9);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.samplebar__in{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 0; }
.samplebar__in p{ flex:1; min-width:220px; font-size:15px; color:var(--muted); }
.samplebar__in b{ color:var(--text); }
.srep__meta dt, .srep__meta .k{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.srep__meta dd, .srep__meta .v{ font-size:15px; font-weight:600; }
.sgrid .k{ display:block; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.sgrid .v{ display:block; font-size:14.5px; font-weight:700; margin-top:3px; }
.splan{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.splan > div{ background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px; display:flex; flex-direction:column; gap:10px; }
.splan h4{ font-size:15px; font-weight:700; letter-spacing:-.01em; }
.splan h4 em{ display:block; font-style:normal; font-size:12.5px; font-weight:500; color:var(--muted-2); margin-top:3px; }
.splan ul{ list-style:none; display:flex; flex-direction:column; gap:7px; }
.splan li{ font-size:13.5px; line-height:1.45; color:var(--muted); padding-left:13px; position:relative; }
.splan li::before{ content:""; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--accent); }
@media (max-width:960px){
.splan{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
.splan{ grid-template-columns:1fr; }
}
/* ---------- SHARED SMALL BITS ---------- */
.prose h2{ font-size:clamp(24px,3vw,32px); font-weight:500; letter-spacing:-.03em; margin:38px 0 14px; }
.prose h3{ font-size:19px; font-weight:600; letter-spacing:-.02em; margin:26px 0 8px; }
.prose p, .prose li{ font-size:16px; line-height:1.7; color:var(--muted); }
.prose p{ margin-bottom:14px; max-width:70ch; }
.prose ul{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.prose ul li{ padding-left:18px; position:relative; max-width:70ch; }
.prose ul li::before{ content:""; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.prose strong{ color:var(--text); font-weight:700; }
.section--tight{ padding:64px 0; }
.trust-line{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:14.5px; color:var(--muted-2); text-align:center; }
/* Marketing readability floor.
   The brief asks for a minimum body size around 16px on marketing pages. The
   original scale ran 14 to 15.5px, which is fine for the account portal and the
   report (both legitimately denser) but too small for a page whose only job is
   to be read. These raise the marketing surfaces only. */
.find__def dd,
.find__v,
.coverc p,
.audc > p,
.proofc p,
.perm li,
.hiw--4 .hiw__step > p,
.faq__a,
.wf span{ font-size:16px; line-height:1.6; }
.audc__list li,
.hiw--4 .hiw__points li{ font-size:15.5px; line-height:1.55; }
/* The plan lists carry three columns of dense feature text, so they sit just
   under the floor rather than forcing a two-column pricing table. */
.plan__list li{ font-size:15.5px; line-height:1.5; }
.walkrow__note, .trust-line, .credits-note{ font-size:14.5px; }
/* ============================================================================
   MOTION PASS
   The rewrite kept the design tokens but dropped the life the old page had
   (a counting gauge, scanning beams, staggered reveals). These bring it back on
   the new structure, and the hero flow becomes the short silent loop that
   explains the product faster than any block of copy can.
   Everything here is gated on prefers-reduced-motion at the bottom.
   ========================================================================== */
/* ---------- HERO FLOW: a sequence, not four cards ---------- */
.flow{ position:relative; counter-reset:flowstep; }

.flow__step{
  transition:border-color .5s ease, background .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.flow__step::after{ transition:opacity .5s ease; opacity:.5; }
.flow__step.is-active{ border-color:rgba(216,27,96,.42); transform:translateY(-4px); }
.flow__step.is-active::after{ opacity:1; }
.flow__step.is-active .flow__n{
  color:var(--accent-ink); background:linear-gradient(180deg,var(--accent-lift),var(--accent));
  border-color:transparent; box-shadow:0 0 0 4px rgba(216,27,96,.16);
}
/* the scan beam that sweeps a frame while its step is active */
.flow__step.is-active .flow__frame::after{
  content:""; position:absolute; left:0; right:0; height:46%; top:-50%;
  background:linear-gradient(180deg,transparent,rgba(216,27,96,.16),transparent);
  animation:flowScan 2.6s ease-in-out infinite; pointer-events:none;
}
@keyframes flowScan{ 0%{ top:-50%; } 100%{ top:110%; } }
/* step 1: the install button confirms */
.flow__step.is-active .flow__cta::after{
  content:"Added"; position:absolute; inset:0; display:grid; place-items:center;
  background:#37d67a; color:#04210f; border-radius:8px;
  animation:flowAdded 3.4s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes flowAdded{ 0%,55%{ transform:translateY(101%); } 68%,92%{ transform:translateY(0); } 100%{ transform:translateY(101%); } }
/* step 3: the checklist ticks through while the step is active */
.flow__step.is-active .flow__prog span{ animation:flowTick 3.4s steps(1,end) infinite; }
.flow__step.is-active .flow__prog span:nth-child(1){ animation-delay:.2s; }
.flow__step.is-active .flow__prog span:nth-child(2){ animation-delay:1.4s; }
@keyframes flowTick{ 0%,30%{ color:var(--muted); } 31%,100%{ color:var(--text); } }
/* step 4: findings land one after another */
.flow__step.is-active .flow__row{ animation:flowRow 3.4s cubic-bezier(.16,1,.3,1) infinite; }
.flow__step.is-active .flow__row:nth-child(1){ animation-delay:.1s; }
.flow__step.is-active .flow__row:nth-child(2){ animation-delay:.45s; }
.flow__step.is-active .flow__row:nth-child(3){ animation-delay:.8s; }
@keyframes flowRow{
  0%{ opacity:0; transform:translateY(9px); }
  18%,100%{ opacity:1; transform:none; }
}
/* ---------- FINDING CARDS: severity reads before the words do ---------- */
.find{ position:relative; overflow:hidden; }
.find::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--sev,rgba(216,27,96,.6)),transparent 70%);
}
.find--high{ --sev:#ff7a7a; }
.find--med{ --sev:#f5b301; }
/* ---------- COVERAGE GRID: numbered, and it answers on hover ---------- */
.coverc{ position:relative; }
.coverc__h svg{ transition:transform .35s cubic-bezier(.16,1,.3,1); }
.coverc:hover .coverc__h svg{ transform:scale(1.12) rotate(-4deg); }
/* ---------- WALKTHROUGH: larger panels, and they animate in ---------- */
/* Scoped to desktop ON PURPOSE. Unscoped, these sat after the max-width:980px
   rule above and beat it at equal specificity, so phones kept the 40px padding
   meant for wide screens and the row overflowed the viewport. */
@media (min-width:981px){
  .walkrow{ padding:40px; }
  .wpanel{ padding:24px; }
}
.wsum__score{ width:104px; height:104px; }
.wsum__score b{ font-size:34px; }
.mbars__track, .wcalc__out{ overflow:hidden; }
.wtally div, .wlist li{ transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .4s ease; }
.walkrow.reveal .wlist li{ opacity:0; transform:translateX(-10px); }
.walkrow.reveal.in .wlist li{ opacity:1; transform:none; transition-delay:calc(var(--i,0) * 70ms + 160ms); }
.walkrow.reveal .wtally div{ opacity:0; transform:translateY(8px); }
.walkrow.reveal.in .wtally div{ opacity:1; transform:none; transition-delay:calc(var(--i,0) * 70ms + 220ms); }
.wdiff__now{ display:inline-block; }
.wshare span{ transition:border-color .25s ease, color .25s ease, transform .25s ease; }
.wshare span:hover{ border-color:rgba(216,27,96,.4); color:var(--text); transform:translateY(-1px); }
/* ---------- PROOF: the honest card should still carry weight ---------- */
.proofc--pending{
  border-style:solid; border-color:var(--line);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 12px,transparent 12px 24px),
    #0D0A0B;
}
.proofc__slot{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--radius-sm);
  border:1px dashed var(--line-2); background:rgba(255,255,255,.02);
}
.proofc__slot i{
  width:38px; height:38px; flex:none; border-radius:50%; border:1px dashed var(--line-2);
  display:grid; place-items:center; color:var(--muted-2); font-style:normal; font-size:15px;
}
.proofc__slot span{ display:flex; flex-direction:column; gap:3px; font-size:13.5px; color:var(--muted-2); }
.proofc__slot b{ font-size:14.5px; font-weight:700; color:var(--muted); }
/* ---------- SAMPLE REPORT: navigation, filters, progress ---------- */
.srepnav a.is-current{ color:var(--text); background:rgba(216,27,96,.09); }
.srepnav a.is-current::before{ background:var(--accent); transform:scale(1.5); }
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.03); color:var(--muted);
  font:600 13.5px/1 var(--font); cursor:pointer; transition:.2s ease;
}
.chip:hover{ color:var(--text); border-color:rgba(216,27,96,.34); }
.chip.is-on{ color:var(--accent-ink); background:linear-gradient(180deg,var(--accent-lift),var(--accent)); border-color:transparent; }
.chip b{ font-weight:700; opacity:.72; font-size:12px; }
.chip.is-on b{ opacity:.9; }
.tag{
  font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted-2);
}
@media (prefers-reduced-motion:reduce){
.flow__rail i,
  .flow__step.is-active .flow__frame::after,
  .flow__step.is-active .flow__cta::after,
  .flow__step.is-active .flow__prog span,
  .flow__step.is-active .flow__row{ animation:none !important; }
.flow__step.is-active{ transform:none; }
.flow__step.is-active .flow__cta::after{ display:none; }
.walkrow.reveal .wlist li,
  .walkrow.reveal .wtally div{ opacity:1 !important; transform:none !important; }
}
/* The rail reads as a left-to-right sequence, which is only true while the flow
   is in columns. Once the steps stack it would be a line pointing across
   nothing, so it goes; the active-step highlight still carries the sequence. */
/* ============================================================================
   SAMPLE REPORT, MIRRORED FROM THE REAL RENDERER
   The structures below exist because src/report/Report.tsx renders them: six
   scoring pillars, a ten-point trust check, a four-step load journey, the Core
   Web Vitals glossary and the technical appendix. Names and groupings are kept
   identical to the product so the sample is not a flattering approximation.
   ========================================================================== */
/* six pillars */
.srep.in .pillar__bar i{ width:var(--w,50%); }
/* the 30-second trust check */
.tcheck .ok svg{ color:#37d67a; }
.tcheck .no svg{ color:#ff7a7a; }
.tcheck .no{ color:var(--muted); border-color:rgba(255,122,122,.22); background:rgba(255,122,122,.04); }
/* the four-step load journey */
/* metric and appendix tables */
.mtable .st{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
/* the proposal draft the report hands an agency */
/* audience routes at the top of the real report */
.routes{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.routes a{
  display:flex; flex-direction:column; gap:5px; padding:16px 18px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:rgba(255,255,255,.02); transition:.25s ease;
}
.routes a:hover{ border-color:rgba(216,27,96,.34); background:rgba(216,27,96,.05); }
.routes em{ font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.routes b{ font-size:15px; font-weight:700; }
@media (max-width:760px){
.routes{ grid-template-columns:1fr; }
}
.trend .k{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.trend .v{ font-family:var(--font-display); font-size:24px; font-weight:700; }
/* Tag colours follow the product's own taxonomy: impact (high/medium/low) and
   effort ("Quick win" | "Dev project"), plus a neutral tag for the area name. */
/* SectionTitle in the real report is a number, a kicker and a title as three
   separate elements, so the sample renders them the same way rather than
   flattening the three into one dashed line. */
/* ---------- The framed report document ----------
   /sample-report/ shows the real report rather than describing it, so the
   document is served on its own and framed here. The frame is a browser chrome
   deliberately: it tells the visitor this is a page they will receive a link
   to, not a marketing illustration. */
.rframe{
  border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden;
  background:#0F0B0C; box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.rframe__bar{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.03);
}
.rframe__dots{ display:flex; gap:6px; flex:none; }
.rframe__dots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.13); }
.rframe__url{
  flex:1; min-width:0; display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.04);
  font-size:12.5px; color:var(--muted-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rframe__url svg{ width:12px; height:12px; flex:none; color:#37d67a; }
.rframe__open{
  flex:none; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700;
  color:var(--accent-text); padding:6px 12px; border-radius:999px; transition:background .2s ease;
}
.rframe__open:hover{ background:rgba(216,27,96,.1); }
.rframe__open .arrow{ width:13px; height:13px; }
.rframe__doc{
  display:block; width:100%; height:76vh; min-height:520px; border:0; background:#0F0B0C;
}
@media (max-width:760px){
.rframe__doc{ height:68vh; min-height:440px; }
.rframe__url{ font-size:11.5px; }
.rframe__open span{ display:none; }
}
/* ============================================================================
   HERO SCENE + PAGE RHYTHM (2026-08)
   The rewrite gave every section the same shape: centred eyebrow, centred h2,
   centred lead, then a grid of identical dark rounded cards. Nine times. The
   page had no rhythm and the hero was four more of the same cards.
   Below: one hero scene instead of four cards, a tonal band that alternates
   between sections, and layout archetypes that stop three sections from being
   card grids at all.
   ========================================================================== */
/* ---------- alternating surface ---------- */
.section--band{
  background:
    linear-gradient(180deg, transparent, rgba(255,255,255,.018) 12%, rgba(255,255,255,.018) 88%, transparent);
}
.section--band::before,
.section--band::after{
  content:""; position:absolute; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}
.section--band::before{ top:0; }
.section--band::after{ bottom:0; }
/* Heading that sits beside its content instead of centred above it. */
.head-split{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:52px;
  align-items:end; margin-bottom:48px;
}
.head-split .section__head{ margin:0; text-align:left; max-width:none; }
.head-split__aside{ font-size:16px; line-height:1.65; color:var(--muted); }
@media (max-width:900px){
.head-split{ grid-template-columns:1fr; gap:20px; align-items:start; }
}
/* ---------- HERO SCENE: one browser, four beats ---------- */
.scene{
  position:relative; margin-top:52px; perspective:1800px;
}
.scene__win{
  position:relative; border:1px solid var(--line-2); border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg,#191213,#100C0D);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03) inset;
  transform:rotateX(5deg) scale(.985); transform-origin:50% 0;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.scene.is-live .scene__win{ transform:none; }
.scene__bar{
  display:flex; align-items:center; gap:12px; padding:13px 18px;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.025);
}
.scene__dots{ display:flex; gap:6px; flex:none; }
.scene__dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.13); }
.scene__addr{
  flex:1; min-width:0; display:inline-flex; align-items:center; gap:9px; max-width:420px;
  padding:7px 15px; border-radius:999px; background:rgba(255,255,255,.045);
  font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.scene__addr svg{ width:12px; height:12px; flex:none; color:#37d67a; }
.scene__ext{
  margin-left:auto; flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:rgba(216,27,96,.14); border:1px solid rgba(216,27,96,.34); position:relative;
  transition:box-shadow .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.scene__ext img{ width:17px; height:17px; border-radius:5px; }
.scene[data-step="1"] .scene__ext{ transform:scale(1.14); box-shadow:0 0 0 6px rgba(216,27,96,.14); }
.scene__ext::after{
  content:""; position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%;
  background:#37d67a; border:2px solid #130E10; opacity:0; transition:opacity .4s ease;
}
.scene[data-step="2"] .scene__ext::after,
.scene[data-step="3"] .scene__ext::after,
.scene[data-step="4"] .scene__ext::after{ opacity:1; }
/* the storefront behind */
.scene__view{ position:relative; height:392px; overflow:hidden; }
.scene__store{ position:absolute; inset:0; padding:30px 34px; display:flex; flex-direction:column; gap:16px; }
.scene__store-nav{ display:flex; align-items:center; gap:16px; }
.scene__store-nav b{ width:78px; height:11px; border-radius:4px; background:rgba(255,255,255,.16); }
.scene__store-nav i{ width:46px; height:8px; border-radius:4px; background:rgba(255,255,255,.07); }
.scene__store-nav span{ margin-left:auto; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.06); }
.scene__hero-img{
  height:158px; border-radius:14px; flex:none;
  background:linear-gradient(120deg, rgba(216,27,96,.24), rgba(255,255,255,.05) 62%, rgba(255,255,255,.02));
  border:1px solid var(--line);
}
.scene__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; flex:1; min-height:0; }
.scene__grid i{ border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.scene__view::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 52%, rgba(5,5,5,.82));
}
/* the extension popup */
.scene__pop{
  position:absolute; top:16px; right:18px; z-index:3; width:258px;
  border:1px solid var(--line-2); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#1F1719,#161011);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.85);
  opacity:0; transform:translateY(-10px) scale(.97);
  transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.scene[data-step="2"] .scene__pop,
.scene[data-step="3"] .scene__pop{ opacity:1; transform:none; }
.scene[data-step="4"] .scene__pop{ opacity:0; transform:translateY(-8px) scale(.97); }
.scene__pop-h{
  display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--line);
  font-size:12.5px; font-weight:700;
}
.scene__pop-h img{ width:18px; height:18px; border-radius:5px; flex:none; }
.scene__pop-b{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.scene__detect{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:#8ee6a8; }
.scene__detect i{ width:6px; height:6px; border-radius:50%; background:#37d67a; box-shadow:0 0 8px #37d67a; flex:none; }
.scene__host{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scene__go{
  text-align:center; font-size:12.5px; font-weight:700; color:var(--accent-ink); border-radius:10px; padding:10px;
  background:linear-gradient(180deg,var(--accent-lift),var(--accent)); box-shadow:0 8px 20px rgba(216,27,96,.3);
  position:relative; overflow:hidden;
}
.scene[data-step="3"] .scene__go{ background:rgba(255,255,255,.05); color:var(--muted); box-shadow:none; }
.scene__scan{ display:none; flex-direction:column; gap:8px; }
.scene[data-step="3"] .scene__scan{ display:flex; }
.scene[data-step="3"] .scene__detect,
.scene[data-step="3"] .scene__host{ display:none; }
.scene__scan span{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--muted); }
.scene__scan svg{ width:12px; height:12px; flex:none; color:var(--muted-2); }
.scene__scan span.on{ color:var(--text); }
.scene__scan span.on svg{ color:#37d67a; }
.scene__bar-prog{ height:3px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.scene__bar-prog i{ display:block; height:100%; width:0; border-radius:99px; background:var(--accent); }
.scene[data-step="3"] .scene__bar-prog i{ animation:sceneProg 2.6s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes sceneProg{ from{ width:6%; } to{ width:92%; } }
/* the report sliding in */
.scene__report{
  position:absolute; left:34px; right:34px; bottom:0; z-index:4;
  border:1px solid var(--line-2); border-top-left-radius:18px; border-top-right-radius:18px;
  background:linear-gradient(180deg,#1C1517,#150F11);
  box-shadow:0 -22px 60px -20px rgba(0,0,0,.9);
  padding:20px 22px 24px; display:flex; gap:22px; align-items:center;
  transform:translateY(102%); transition:transform .75s cubic-bezier(.16,1,.3,1);
}
.scene[data-step="4"] .scene__report{ transform:translateY(0); }
.scene__score{
  width:78px; height:78px; flex:none; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px;
  border:2px solid rgba(216,27,96,.45); background:radial-gradient(circle,rgba(216,27,96,.16),transparent 70%);
}
.scene__score b{ font-family:var(--font-display); font-size:26px; font-weight:700; line-height:1; }
.scene__score span{ font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); }
.scene__rows{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.scene__row{
  display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted);
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:8px; padding:8px 11px;
  opacity:0; transform:translateX(-8px); transition:opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.scene[data-step="4"] .scene__row{ opacity:1; transform:none; }
.scene[data-step="4"] .scene__row:nth-child(1){ transition-delay:.30s; }
.scene[data-step="4"] .scene__row:nth-child(2){ transition-delay:.42s; }
.scene[data-step="4"] .scene__row:nth-child(3){ transition-delay:.54s; }
.scene__row b{ margin-left:auto; flex:none; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.scene__row .d{ width:6px; height:6px; border-radius:50%; flex:none; }
.d--h{ background:#ff7a7a; }
.d--m{ background:#f5b301; }
.d--l{ background:#8ee6a8; }
.scene__row:nth-child(1) b{ color:#ff8a8a; }
.scene__row:nth-child(2) b{ color:#f5c451; }
.scene__row:nth-child(3) b{ color:#8ee6a8; }
/* the four beats, as a caption rail under the window */
.beats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:26px; }
.beat{
  position:relative; padding:16px 20px 0; text-align:left; border-top:2px solid var(--line);
  transition:border-color .5s ease;
}
.beat.is-on{ border-top-color:var(--accent); }
.beat__n{
  font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.1em;
  color:var(--muted-2); transition:color .4s ease;
}
.beat.is-on .beat__n{ color:var(--accent-text); }
.beat b{ display:block; margin-top:5px; font-size:15px; font-weight:700; letter-spacing:-.015em; color:var(--muted); transition:color .4s ease; }
.beat.is-on b{ color:var(--text); }
.beat span{ display:block; margin-top:4px; font-size:13.5px; line-height:1.5; color:var(--muted-2); }
@media (max-width:900px){
.beats{ grid-template-columns:repeat(2,1fr); gap:8px 0; }
.scene__view{ height:300px; }
.scene__pop{ width:210px; top:12px; right:12px; }
.scene__report{ left:18px; right:18px; }
}
@media (max-width:600px){
.beats{ grid-template-columns:1fr; }
.scene__view{ height:230px; }
.scene__pop{ position:static; width:auto; margin:12px; opacity:1; transform:none; }
.scene__report{ position:static; transform:none; margin-top:0; border-radius:0; }
.scene__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion:reduce){
.scene__win{ transform:none; }
.scene__pop, .scene__report, .scene__row{ opacity:1 !important; transform:none !important; }
.scene__bar-prog i{ width:92%; animation:none; }
}
/* ---------- HOW IT WORKS: a rail, not four boxes ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; }
.step{ display:flex; flex-direction:column; gap:11px; }
.step__n{
  display:flex; align-items:center; gap:12px; font-family:var(--font-display);
  font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--accent-text);
}
.step__n::after{ content:""; flex:1; height:1px; background:var(--line); }
.step h3{ font-size:19px; font-weight:600; letter-spacing:-.02em; }
.step p{ font-size:16px; line-height:1.6; color:var(--muted); }
.step em{
  font-style:normal; margin-top:auto; padding-top:10px; font-size:13px; color:var(--muted-2);
  border-top:1px solid var(--line);
}
@media (max-width:980px){
.steps{ grid-template-columns:repeat(2,1fr); gap:30px; }
}
@media (max-width:560px){
.steps{ grid-template-columns:1fr; }
}
/* ---------- COVERAGE: a matrix, not six cards ---------- */
.matrix{ border-top:1px solid var(--line); }
.matrix__row{
  display:grid; grid-template-columns:34px minmax(0,240px) minmax(0,1fr); gap:24px; align-items:baseline;
  padding:22px 4px; border-bottom:1px solid var(--line); transition:background .25s ease;
}
.matrix__row:hover{ background:rgba(255,255,255,.018); }
.matrix__n{ font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--muted-2); }
.matrix__k{ display:flex; align-items:center; gap:11px; font-size:18px; font-weight:600; letter-spacing:-.02em; }
.matrix__k svg{ width:18px; height:18px; flex:none; color:var(--accent-text); }
.matrix__v{ font-size:16px; line-height:1.6; color:var(--muted); }
@media (max-width:820px){
.matrix__row{ grid-template-columns:28px minmax(0,1fr); gap:8px 16px; }
.matrix__v{ grid-column:2; }
}
/* ---------- PRIVACY: a ruled list, not cards ---------- */
.rules{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; }
.rules li{
  list-style:none; display:grid; grid-template-columns:22px 1fr; gap:14px;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.rules svg{ width:18px; height:18px; margin-top:2px; }
.rules .is-yes svg, .rules li.yes svg{ color:#8ee6a8; }
.rules li.no svg{ color:#ff8a8a; }
.rules b{ display:block; font-size:16.5px; font-weight:700; letter-spacing:-.015em; }
.rules span{ display:block; margin-top:5px; font-size:15px; line-height:1.6; color:var(--muted); }
@media (max-width:820px){
.rules{ grid-template-columns:1fr; gap:0; }
}
/* ---------- FINDINGS: one featured, two supporting ---------- */
.finds--editorial{ grid-template-columns:1.32fr 1fr; gap:20px; align-items:stretch; }
.finds--editorial .find:first-child{ grid-row:span 2; }
.finds--editorial .find:first-child h3{ font-size:clamp(23px,2.5vw,30px); line-height:1.16; }
.finds--editorial .find:first-child .find__evidence{ font-size:14px; }
@media (max-width:980px){
.finds--editorial{ grid-template-columns:1fr; }
.finds--editorial .find:first-child{ grid-row:auto; }
}
/* Step 1 previously left the window empty, which is what a first-time visitor
   sees before the loop has advanced. The popup now carries an install
   confirmation on that beat so the scene is never a blank browser. */
.scene__pop{ opacity:0; }
.scene[data-step="1"] .scene__pop{ opacity:1; transform:none; }
.scene__added{ display:none; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:#8ee6a8; }
.scene__added svg{ width:14px; height:14px; flex:none; }
.scene__added-sub{ display:none; font-size:12px; line-height:1.5; color:var(--muted); }
.scene[data-step="1"] .scene__added,
.scene[data-step="1"] .scene__added-sub{ display:flex; }
.scene[data-step="1"] .scene__added-sub{ display:block; }
.scene[data-step="1"] .scene__detect,
.scene[data-step="1"] .scene__host,
.scene[data-step="1"] .scene__go{ display:none; }
/* The storefront only exists from beat 2 onward: on beat 1 the visitor has just
   installed and has not opened a store yet. */
.scene__store{ transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.scene[data-step="1"] .scene__store{ opacity:.28; transform:scale(.985); }
.scene[data-step="1"] .scene__addr{ opacity:.45; }

/* Grid children default to min-width:auto, so an inner grid that cannot reach
   its min-content width pushes its parent wider than the viewport instead of
   shrinking. The four-up tally inside a walkthrough panel did exactly that on a
   320px screen, taking the whole page 57px wide. */
.walkrow > *, .wpanel > *, .wsum, .wsum__txt{ min-width:0; }
@media (max-width:560px){
  .wtally{ grid-template-columns:repeat(2,1fr); }
  .wsum{ flex-wrap:wrap; }
  .wcalc__row{ flex-wrap:wrap; gap:6px; }
  .wcalc__row label{ flex:1 0 100%; }
}

/* Anchor targets must clear the fixed header.
   /js/main.js offsets in-page clicks by 78px through Lenis, but three routes
   never reach that handler: a cross-page link from a sub-page (/#pricing), a
   shared URL that arrives with a hash, and the scrollIntoView fallback used
   under reduced motion. All three landed the heading underneath the nav.
   scroll-padding-top is the one fix that covers native jumps, scrollIntoView
   and hash-on-load alike. 104px = the 90px unscrolled nav plus breathing room. */
html{ scroll-padding-top:104px; }