/* ============================================================
   SONAR — stylesheet
   Colors  : Mercury, exact values, all-dark shell (mercury.com)
   Type    : Daylight, exact scale (ABC Arizona Flare + ABC Room),
             recolored into Mercury's white tiers
   Layout  : Mercury — container/rhythm/grids/cards/bento/lists
   Accent  : Mercury indigo #5266eb (+ pink #fc92b4 secondary)
   ============================================================ */

/* ---------- Fonts (real ABC files, from the Daylight clone) ---------- */
@font-face{font-family:"ABC Arizona Flare";src:url("../assets/fonts/ABCArizonaFlare-Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"ABC Arizona Flare";src:url("../assets/fonts/ABCArizonaFlare-LightItalic.woff") format("woff");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"ABC Arizona Flare";src:url("../assets/fonts/ABCArizonaFlare-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ABC Arizona Flare";src:url("../assets/fonts/ABCArizonaFlare-RegularItalic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"ABC Room";src:url("../assets/fonts/ABCRoom-Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"ABC Room";src:url("../assets/fonts/ABCRoom-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ABC Room";src:url("../assets/fonts/ABCRoom-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"ABC Room";src:url("../assets/fonts/ABCRoom-Extrabold.woff") format("woff");font-weight:800;font-style:normal;font-display:swap}

/* ============================================================
   Tokens
   ============================================================ */
:root{
  /* type families (Daylight) — only ABC Arizona Flare (serif) + ABC Room (sans).
     Labels/eyebrows reuse the sans; no separate "Extended" display face. */
  --serif:"ABC Arizona Flare",Georgia,"Times New Roman",serif;
  --sans:"ABC Room",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  --ext:var(--sans);

  /* ---- Mercury palette, exact values, dark shell ---- */
  --page-bg:#171721;        /* surface-dark — body */
  --page-bg-2:#272735;      /* surface-dark-2 */
  --card:#1e1e2a;           /* card / ink */
  --card-2:#21212e;         /* bento demo card */
  --card-3:#2b2c3c;         /* inner mockup panel */
  --ink-soft:#2b2b3a;       /* press-card hover */

  --fg:#ffffff;                       /* headings, primary */
  --fg-strong:#ededf3;                /* Mercury foreground */
  --fg-soft:rgba(255,255,255,.72);    /* body / lead  (Daylight ink/70-80) */
  --fg-dim:rgba(255,255,255,.65);     /* secondary labels */
  --fg-muted:rgba(255,255,255,.55);   /* captions / eyebrow (Daylight /55) */
  --fg-faint:rgba(255,255,255,.40);   /* legal, footer titles (Mercury /40) */

  --line:rgba(237,237,243,.10);       /* hairline — Mercury white/10 */
  --line-2:rgba(255,255,255,.15);
  --line-3:rgba(255,255,255,.25);

  --brand:#5266eb;
  --brand-hover:#4354c8;
  --brand-active:#3442a6;
  --brand-fg:#ffffff;
  --brand-soft:rgba(82,102,235,.14);
  --brand-glow:rgba(82,102,235,.45);
  --pink:#fc92b4;
  --frost:rgba(112,115,147,.10);

  /* radius — Mercury --radius .75rem scale */
  --radius-sm:6px;
  --radius:12px;       /* rounded-xl */
  --radius-2xl:16px;   /* rounded-2xl */
  --radius-3xl:24px;   /* rounded-3xl */
  --radius-card:28px;  /* bento demo card */

  /* layout — Mercury */
  --maxw:1200px;
  --maxw-wide:1320px;
  --maxw-narrow:1040px;
  --gutter:clamp(24px,5vw,40px);   /* px-6 → px-10 */

  --shadow-card:0 30px 60px -20px rgba(0,0,0,.6);
  --shadow-float:0 40px 80px -30px rgba(0,0,0,.7);
}

/* ============================================================
   Reset / base
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  color:var(--fg-soft);
  background:var(--page-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
  overflow-x:hidden;
}
/* fixed grain overlay (reused from Daylight) */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  background-image:url("../assets/img/noise.png");
  background-size:260px;opacity:.022;mix-blend-mode:overlay;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--brand);color:#fff}

/* ============================================================
   Typography — Daylight scale, Mercury colors
   ============================================================ */
.eyebrow{
  font-family:var(--ext);font-weight:400;font-size:11px;
  text-transform:uppercase;letter-spacing:.2em;color:var(--fg-muted);
  display:inline-block;margin:0 0 1.15rem;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;margin:0;color:var(--fg);text-wrap:balance}

/* hero headline — Daylight hero (clamp 36→68), leading 1.02 */
.h1{font-size:clamp(2.5rem,6.2vw,4.5rem);line-height:1.02;letter-spacing:-.03em}
/* section display — Daylight manifesto/dark-h2 (leading ~1.0, tracking -.04) */
.h2{font-size:clamp(2.25rem,5.2vw,3.75rem);line-height:1.0;letter-spacing:-.04em}
/* feature subhead — Daylight feature h3 idiom, sized to fit */
.h3{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.06;letter-spacing:-.03em}
/* closing display — Daylight OrderFooter (48→92), leading .97, tracking -.06 */
.display-xl{font-size:clamp(3rem,6.4vw,5.5rem);line-height:.97;letter-spacing:-.06em}

/* Italic serif emphasis — kept for the report pages, which still use <em> */
.h1 em,.h2 em,.h3 em,.display-xl em,.em{font-style:italic;font-weight:300}

/* Title accent (homepage) — replaces the old italic. A bespoke indigo "scan line"
   drawn under the phrase Sonar has surfaced: same serif, upright, one weight heavier,
   brand colour used with intent (not generic AI gradient text). box-decoration-break
   keeps the underline intact if the phrase wraps to a second line. */
.h1 .hl,.h2 .hl,.h3 .hl,.display-xl .hl,.hl{
  font-style:normal;color:var(--fg);
  background-image:linear-gradient(90deg,var(--brand) 0%,#8b99ff 68%,rgba(139,153,255,.34) 100%);
  background-repeat:no-repeat;background-position:0 100%;background-size:100% .072em;
  padding-bottom:.14em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* lead / intro — Daylight intro body */
.lead{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.5;
  color:var(--fg-soft);text-wrap:pretty;margin:1.5rem 0 0;
}
p{margin:0 0 1rem;text-wrap:pretty}
.muted{color:var(--fg-muted)}
.tnum{font-variant-numeric:tabular-nums}

/* ============================================================
   Layout — Mercury
   ============================================================ */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:var(--maxw-wide)}
.container--narrow{max-width:var(--maxw-narrow)}

.section{position:relative;padding-block:clamp(80px,12vh,140px)}
.section--tight{padding-block:clamp(56px,8vh,100px)}
.section--lg{padding-block:clamp(112px,16vh,176px)}

.center{text-align:center}
.measure{max-width:680px}
.measure-sm{max-width:560px}
.measure-lg{max-width:760px}
/* center the measure-limited block whether .center is on the same element or an ancestor */
.center.measure,.center.measure-sm,.center.measure-lg,
.center .measure,.center .measure-sm,.center .measure-lg{margin-inline:auto}

/* Mercury hairline above a section header: border-t + pt-6 */
.rule-head{border-top:1px solid var(--line);padding-top:clamp(24px,3vw,40px)}

/* grids — Mercury gap-x-8 / gap-y-12 */
.grid{display:grid;gap:clamp(32px,3vw,48px) clamp(24px,2.4vw,32px)}
.heading-block + .grid,.heading-block + .grid-2,.heading-block + .steps{margin-top:clamp(40px,5vw,56px)}
/* breathing room when a centered headline sits directly above a card row, and before the closing line */
.h2 + .grid{margin-top:clamp(44px,5.5vw,72px)}
.grid + .lead{margin-top:clamp(36px,4vw,56px)}
@media(min-width:760px){
  .g2{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:repeat(3,1fr)}
}

.heading-block{max-width:760px}   /* fits "Drop a link. Start your" on one line before the go-to-market break */
.heading-block .lead{margin-top:1.25rem}

/* ============================================================
   Buttons — Mercury pill, Daylight label treatment
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  height:44px;padding:0 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;
  transition:transform .18s ease,background-color .2s ease,border-color .2s ease,box-shadow .25s ease;
  will-change:transform;
}
.btn:active{transform:scale(.96)}
.btn--primary{background:var(--brand);color:var(--brand-fg)}
.btn--primary:hover{background:var(--brand-hover)}
.btn--ghost{background:rgba(255,255,255,.05);color:#fff;border-color:var(--line-3);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(255,255,255,.13)}
/* secondary — stroke, no fill (header CTA). Text stays light: the header sits on the dark hero,
   so a dark label would be invisible; on hover it inverts to a light fill + dark text. */
.btn--secondary{background:transparent;color:var(--fg);border-color:var(--line-3)}
.btn--secondary:hover{background:#fff;color:#171721;border-color:#fff}
.btn--block{width:100%}
.btn--lg{height:50px;padding:0 28px;font-size:14px}

.microtrust{font-size:13px;color:var(--fg-muted);margin-top:1rem;letter-spacing:0;text-transform:none}

/* ============================================================
   Nav — Mercury (h-72, sticky, frost on scroll)
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;height:72px;display:flex;align-items:center;
  transition:background-color .3s ease,backdrop-filter .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(23,23,33,.96);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.nav__logo{height:30px;width:auto;opacity:.96}
.nav__links{display:none;gap:1.75rem;align-items:center}
.nav__links a{font-family:var(--sans);font-size:16px;font-weight:300;letter-spacing:-.02em;color:var(--fg-soft);transition:color .2s}
.nav__links a:hover{color:#fff}
.nav__cta{display:flex;align-items:center;gap:1rem}
.nav .btn{height:38px;padding:0 18px}
@media(min-width:1000px){.nav__links{display:flex}}

/* ============================================================
   HERO — Mercury (full-height, centered, bg visual, overlays)
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--page-bg)}
.hero__stage{position:absolute;inset:0;z-index:0}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}   /* drop a generated <img> here later */
.hero__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
   radial-gradient(120% 90% at 50% 30%,transparent 34%,rgba(23,23,33,.42) 78%,rgba(23,23,33,.82) 100%),
   linear-gradient(to bottom,rgba(23,23,33,.55) 0%,transparent 24%,transparent 56%,var(--page-bg) 100%);
}
.hero__content{position:relative;z-index:2;width:100%}
.hero__content .container{max-width:1160px;display:flex;flex-direction:column;align-items:center;text-align:center}
/* single hero headline — longer copy: wide measure so it lands on 3 lines on desktop, softer leading */
.hero .h1{
  margin-top:.4rem;max-width:34ch;
  font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.08;
}

/* hero eyebrow → accented badge (Daylight sets eyebrows in the accent color) */
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  margin:0 0 clamp(2.2rem,3.6vw,3.2rem);padding:.5rem 1.05rem .5rem .85rem;
  border-radius:999px;letter-spacing:.16em;line-height:1.4;text-align:center;
  color:#c4ccff;
  background:var(--brand-soft);
  border:1px solid color-mix(in srgb,var(--brand) 36%,transparent);
  box-shadow:0 0 0 1px rgba(82,102,235,.04),0 8px 24px -12px var(--brand-glow);
}
.hero .eyebrow::before{
  content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 12px var(--brand-glow);
}
@media(max-width:480px){
  .hero .eyebrow{letter-spacing:.1em;padding:.5rem .95rem;gap:.5rem}
}

/* inline email pill — Mercury hero form */
.hero__form{margin-top:clamp(2.8rem,4.5vw,3.9rem);width:100%;max-width:460px;display:flex;gap:.5rem;
  padding:6px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.hero__form input{flex:1;min-width:0;height:44px;background:transparent;border:0;color:#fff;
  padding:0 .4rem 0 1.1rem;font-family:var(--sans);font-size:15px}
.hero__form input::placeholder{color:rgba(255,255,255,.65)}
.hero__form input:focus{outline:none}
.hero__form .btn{flex-shrink:0}
/* invalid email (before the modal opens) — pink ring, matches the form fields */
.hero__form.is-invalid{border-color:var(--pink);box-shadow:0 0 0 3px rgba(252,146,180,.16)}
.hero__cta{margin-top:1.9rem;display:flex;flex-direction:column;align-items:center;gap:.2rem}

/* Canvas sonar scene — dark vignette under a rotating beam that reveals blips.
   The JS draws rings + sweep + blips and keeps the text zone clear. */
.hero__stage{
  background:
    radial-gradient(64% 60% at 50% 48%,#1e1f30 0%,#1a1b27 56%,#171721 100%);
}
.sonar-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* Detection cards — a platform logo + "+N new users" pings in where the rotating
   beam crosses a hotspot, then fades. Sits above the overlay, below the copy. */
.sonar-fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.sonar-card{position:absolute;transform:translate(-50%,-50%);will-change:transform}
.sonar-card__inner{
  position:relative;display:flex;align-items:center;gap:.5rem;
  padding:.34rem .62rem .34rem .36rem;border-radius:999px;
  background:rgba(30,30,42,.64);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.72),0 0 0 1px rgba(82,102,235,.10),
             0 0 24px -8px var(--brand-glow);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transform-origin:center;
  animation:sonarCardLife 3s cubic-bezier(.22,.61,.36,1) both;
}
.sonar-card__chip{
  position:relative;z-index:1;flex-shrink:0;width:28px;height:28px;border-radius:8px;
  background:#fff;display:grid;place-items:center;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.28)}
.sonar-card__chip img{width:22px;height:22px;object-fit:contain;display:block}
.sonar-card__meta{display:flex;flex-direction:column;line-height:1;padding-right:.15rem}
.sonar-card__meta b{font-family:var(--sans);font-weight:800;font-size:14px;color:#fff;letter-spacing:.01em}
.sonar-card__meta i{font-style:normal;font-size:10.5px;color:var(--fg-muted);margin-top:3px;letter-spacing:.03em}
/* radar ping ringing out from the logo on arrival */
.sonar-card__ping{
  position:absolute;left:19px;top:50%;width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--brand);pointer-events:none;
  animation:sonarPing 1.05s ease-out both}
@keyframes sonarCardLife{
  0%{opacity:0;transform:scale(.78) translateY(7px)}
  12%{opacity:1;transform:scale(1) translateY(0)}
  82%{opacity:1;transform:scale(1) translateY(0)}
  100%{opacity:0;transform:scale(.97) translateY(-4px)}
}
@keyframes sonarPing{
  0%{opacity:.65;transform:translate(-50%,-50%) scale(.5)}
  70%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.15)}
}
@media(max-width:719px){.sonar-fx{display:none}}
@media(prefers-reduced-motion:reduce){.sonar-fx{display:none}}

/* hero intro state (JS on; GSAP fades the text in — no zoom) */
html.js .reveal-hero{opacity:0;transform:translateY(22px)}

/* ============================================================
   SHOWCASE — Mercury EverythingBento: left copy + right media that
   bleeds to the right viewport edge with a blurred, faded edge
   ============================================================ */
.showcase{overflow:hidden}                       /* clip the right-edge bleed */
.showcase__grid{display:grid;gap:clamp(40px,6vw,56px);grid-template-columns:1fr;align-items:center}
@media(min-width:1000px){
  .showcase__grid{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(48px,5vw,72px)}
}
.showcase__text{max-width:460px}

/* accordion (interactive) */
.accordion{margin-top:clamp(28px,3vw,48px)}
.acc{border-top:1px solid var(--line)}
.acc__btn{width:100%;display:flex;align-items:flex-start;gap:.85rem;padding:18px 0;
  background:none;border:0;cursor:pointer;text-align:left;color:var(--fg)}
.acc__dot{flex-shrink:0;width:7px;height:7px;border-radius:50%;margin-top:.55rem;background:var(--line-3);transition:background .25s}
.acc.is-open .acc__dot{background:var(--brand)}
.acc__title{flex:1;font-family:var(--sans);font-weight:500;font-size:1.0625rem;letter-spacing:-.01em;color:var(--fg)}
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.acc.is-open .acc__body{grid-template-rows:1fr}
.acc__inner{overflow:hidden}
.acc__inner p{margin:0 0 18px;padding-left:calc(7px + .85rem);font-size:.95rem;color:var(--fg-soft)}
.bento__link{display:inline-block;margin-top:1.6rem;font-size:15px;font-weight:500;color:var(--fg);
  text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:5px;transition:text-decoration-color .2s}
.bento__link:hover{text-decoration-color:var(--brand)}

/* right media — full-bleed-right product panel (holds the report mock now, a video later) */
.showcase__media{position:relative;min-width:0}
.showcase__panel{position:relative;overflow:hidden;
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-float);padding:clamp(22px,3vw,34px)}
.showcase__screen{position:relative;z-index:1;width:100%}
.showcase__screen .report{width:100%}
/* video variant — the video fills the whole panel and is clipped to its corners;
   the frosted .showcase__edge (z-index:2) stays on top, so the video sits under the blur */
.showcase__panel--video{padding:0;aspect-ratio:16/10}
.showcase__video{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;object-position:left center;border-radius:inherit}

/* blurred + faded right edge */
.showcase__edge{position:absolute;top:0;right:0;bottom:0;z-index:2;pointer-events:none;
  width:clamp(96px,16vw,240px);
  background:linear-gradient(to right,transparent,var(--card-2) 88%);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 62%);
          mask-image:linear-gradient(to right,transparent,#000 62%)}

@media(min-width:1000px){
  /* extend the panel's right edge to the true viewport edge; the panel itself
     fades into the page background so there's no hard card edge */
  .showcase__panel{
    --bleed:max(var(--gutter),calc((100vw - var(--maxw-wide)) / 2 + var(--gutter)));
    width:calc(100% + var(--bleed));aspect-ratio:7/5;overflow:visible;
    border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;
    padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;justify-content:center;
    background:linear-gradient(to right,var(--card-2) 48%,var(--page-bg) 99%)}
  /* the content (report now, a video later) dissolves smoothly toward the right —
     a wide, gradual ramp so it melts into the page instead of cutting off */
  .showcase__screen{
    -webkit-mask-image:linear-gradient(to right,#000 44%,transparent 92%);
            mask-image:linear-gradient(to right,#000 44%,transparent 92%)}
  /* soft frost across the whole dissolving zone — wide & gradual, so no visible seam */
  .showcase__edge{width:58%;background:none;
    -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 90%);
            mask-image:linear-gradient(to right,transparent 0%,#000 90%)}
  /* keep the video edge-to-edge on desktop (override panel padding) and dissolve it
     to the right exactly like the report did, so it melts into the page under the frost */
  .showcase__panel--video{padding:0}
  .showcase__panel--video .showcase__video{
    -webkit-mask-image:linear-gradient(to right,#000 44%,transparent 92%);
            mask-image:linear-gradient(to right,#000 44%,transparent 92%)}
}
@media(max-width:999px){
  .showcase__edge{display:none}                  /* clean, fully readable card when stacked */
}

/* full-width product reel — the report video fills one wide card, Mercury-style:
   no surrounding copy, just a small corner tag. */
.report-reel{position:relative;margin:0;overflow:hidden;aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:var(--radius-card);
  background:var(--card-2);box-shadow:var(--shadow-float)}
.report-reel__video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
/* small label, top-right — clear of the video's left-aligned content */
.report-reel__tag{position:absolute;top:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px);z-index:2;
  margin:0;display:inline-flex;align-items:center;padding:.46rem .78rem;border-radius:10px;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.01em;color:#fff;
  background:rgba(18,18,26,.58);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media(max-width:600px){
  .report-reel__tag{font-size:12px;padding:.38rem .62rem}
}

/* ============================================================
   HOW IT WORKS — feature cards (media + title + text)
   Mercury "Head Start" idiom: 3:2 media on top, bold title, muted body
   ============================================================ */
.market{margin-top:clamp(40px,5vw,64px)}
.market-card{display:flex;flex-direction:column}
.market-card__media{position:relative;aspect-ratio:3/2;border-radius:var(--radius-2xl);overflow:hidden;
  background:var(--card-3);border:1px solid var(--line);transition:transform .3s ease,box-shadow .3s ease}
.market-card:hover .market-card__media{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.market-card__img{width:100%;height:100%;object-fit:cover}
.market-card__step{align-self:flex-start;margin:0 0 1rem;
  font-family:var(--ext);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#cdd4ff;
  background:var(--brand-soft);border:1px solid rgba(82,102,235,.3);
  padding:.32rem .65rem;border-radius:999px}
.market-card__title{font-family:var(--sans);font-weight:500;font-size:1.125rem;letter-spacing:-.01em;
  color:var(--fg);margin:1.3rem 0 .45rem}
.market-card__text{color:var(--fg-soft);font-size:.95rem;line-height:1.55;max-width:34ch;margin:0}
/* ---- How-it-works concrete mockups (Mercury-style coded UI fragments on a solid card) ---- */
.mock{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:9%}
/* Step 01 — the input/"drop your link" moment */
.mock-field{position:relative;z-index:2;display:flex;align-items:center;gap:.6rem;
  width:min(86%,300px);padding:.62rem .62rem .62rem .85rem;
  background:rgba(30,30,42,.74);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.78),0 0 0 1px rgba(82,102,235,.08),0 0 30px -12px var(--brand-glow);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mock-field__icon{flex-shrink:0;display:grid;place-items:center;color:var(--brand)}
.mock-field__url{flex:1;min-width:0;font-family:var(--sans);font-size:.95rem;color:#fff;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-field__caret{display:inline-block;width:1.5px;height:1.05em;background:var(--brand);
  margin-left:1px;vertical-align:-.18em;animation:mockCaret 1.1s step-end infinite}
.mock-field__btn{flex-shrink:0;font-family:var(--sans);font-weight:600;font-size:.8rem;color:#fff;
  background:var(--brand);padding:.44rem .82rem;border-radius:9px}
.mock-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:.4rem;
  font-family:var(--sans);font-size:.78rem;font-weight:500;color:#fff;letter-spacing:-.01em;
  padding:.4rem .72rem;border-radius:999px;white-space:nowrap;
  background:rgba(30,30,42,.66);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.72),0 0 24px -10px var(--brand-glow);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mock-chip svg{color:var(--brand);flex-shrink:0}
.mock-chip--a{top:15%;right:8%}
.mock-chip--b{bottom:15%;left:7%}
@keyframes mockCaret{50%{opacity:0}}
/* Step 02 — reading the live market */
.mock-feed{position:relative;z-index:2;display:flex;flex-direction:column;gap:.5rem;width:min(86%,300px)}
.mock-post{display:flex;align-items:center;gap:.55rem;padding:.5rem .66rem;
  background:rgba(30,30,42,.74);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mock-post__src{flex-shrink:0;width:26px;height:26px;border-radius:7px;background:#fff;
  display:grid;place-items:center;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.28)}
.mock-post__src img{width:18px;height:18px;object-fit:contain;display:block}
.mock-post__txt{font-family:var(--sans);font-size:.82rem;line-height:1.3;color:var(--fg-strong);letter-spacing:-.01em}
.mock-post__txt mark{background:rgba(82,102,235,.24);color:#fff;border-radius:4px;padding:.02em .22em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.mock-chip--live{top:11%;right:7%}
.mock-live{width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 0 var(--brand-glow);animation:mockPulse 1.6s ease-out infinite}
@keyframes mockPulse{0%{box-shadow:0 0 0 0 rgba(82,102,235,.5)}70%{box-shadow:0 0 0 8px rgba(82,102,235,0)}100%{box-shadow:0 0 0 0 rgba(82,102,235,0)}}
/* Step 03 — named users + a plan */
.mock-people{position:relative;z-index:2;display:flex;flex-direction:column;gap:.5rem;width:min(86%,300px)}
.mock-person{display:flex;align-items:center;gap:.6rem;padding:.46rem .6rem;
  background:rgba(30,30,42,.74);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mock-person__av{flex-shrink:0;width:30px;height:30px;border-radius:50%;object-fit:cover;display:grid;place-items:center;
  font-family:var(--sans);font-weight:700;font-size:.7rem;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.mock-person__av--1{background:linear-gradient(140deg,#5266eb,#8a5cf0)}
.mock-person__av--2{background:linear-gradient(140deg,#fc92b4,#a45cf0)}
.mock-person__id{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.18}
.mock-person__id b{font-family:var(--sans);font-weight:600;font-size:.84rem;color:#fff;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-person__id i{font-style:normal;font-size:.7rem;color:var(--fg-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-person__score{flex-shrink:0;font-family:var(--ext);font-size:.66rem;font-weight:600;letter-spacing:.03em;color:#fff;
  background:var(--brand-soft);border:1px solid rgba(82,102,235,.35);border-radius:999px;padding:.22rem .5rem}
.mock-chip--plan{bottom:11%;right:7%}

/* ============================================================
   WHY SONAR — heading (top) + list (bottom), tall media right
   Mercury "Get Started" idiom: bottom-anchored list beside a tall 4:5 visual
   ============================================================ */
.why__grid{display:grid;gap:clamp(40px,6vw,56px);grid-template-columns:1fr;align-items:stretch}
@media(min-width:1000px){.why__grid{grid-template-columns:1fr 1.04fr;gap:clamp(56px,5vw,88px)}}
.why__copy{display:flex;flex-direction:column}
.why__head{max-width:none}
/* keep "Data, not guesses." on a single line (the old 32ch cap, measured in the
   small body font, was forcing a wrap); allow a natural break only on tiny screens */
.why__head .h2{white-space:nowrap}
@media(max-width:480px){.why__head .h2{white-space:normal}}
.why__list{margin-top:clamp(28px,4vw,40px)}
@media(min-width:1000px){.why__list{margin-top:auto}}   /* anchor the list to the bottom edge */

/* tall 4:5 media — canvas sonar scene now, generated image later */
.tall-media{position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--radius-3xl);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-card);
  background:radial-gradient(125% 90% at 50% 40%,#23243a 0%,#1a1b28 55%,#141420 100%)}
.tall-media__img{width:100%;height:100%;object-fit:cover}
.tall-media__scene{position:absolute;inset:0}
.tall-media__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}

/* platform "+N new users" cards ping in here — same markup/animation as the hero's
   .sonar-card, just sized down for the smaller block */
.tall-media__fx{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.tall-media__fx .sonar-card__inner{padding:.28rem .52rem .28rem .3rem;gap:.42rem}
.tall-media__fx .sonar-card__chip{width:23px;height:23px;border-radius:7px}
.tall-media__fx .sonar-card__chip img{width:17px;height:17px}
.tall-media__fx .sonar-card__meta b{font-size:12.5px}
.tall-media__fx .sonar-card__meta i{font-size:9.5px;margin-top:2px}
.tall-media__fx .sonar-card__ping{left:16px;width:21px;height:21px}

.tall-media__chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-size:.8rem;color:var(--fg-strong);
  background:rgba(23,23,33,.62);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  padding:.5rem .8rem;border-radius:999px;box-shadow:0 12px 30px -16px rgba(0,0,0,.8)}
.tall-media__chip--a{top:7%;left:7%}

/* bottom-right live stat — a blinking dot + a big "people asking now" count */
.tall-media__chip--stat{bottom:7%;right:7%;gap:.6rem;padding:.58rem .95rem .58rem .78rem;
  border-radius:16px;background:rgba(19,19,28,.74)}
.tall-media__stat{display:flex;flex-direction:column;line-height:1}
.tall-media__stat b{font-family:var(--serif);font-weight:300;color:#fff;letter-spacing:-.01em;
  font-size:clamp(1.7rem,3.4vw,2.35rem);font-variant-numeric:tabular-nums}
.tall-media__stat i{font-style:normal;font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--fg-muted);margin-top:.22rem}
.tall-media__live{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--pink);
  animation:tmBlink 1.4s ease-in-out infinite}

.tall-media__pulse{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand-glow);
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
/* a true blink — full on, then nearly off, with a soft expanding ring on the way out */
@keyframes tmBlink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(252,146,180,.5)}
  50%{opacity:.22;box-shadow:0 0 0 5px rgba(252,146,180,0)}}

/* ============================================================
   CARDS / blocks — Mercury
   ============================================================ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-2xl);
  padding:clamp(28px,3vw,40px);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.card .tag{font-family:var(--ext);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);display:block;margin-bottom:1.1rem}
.card__title{font-family:var(--sans);font-weight:500;font-size:1.125rem;letter-spacing:-.01em;color:var(--fg);margin:0 0 .45rem}
/* body text matches the lead beneath the cards — readable, no sub-16px copy */
.card p{color:var(--fg);margin:0;font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.5}

/* icon chip */
.chip{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:1.2rem;
  background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 32%,transparent)}
.chip svg{width:22px;height:22px;stroke:#aeb8ff;fill:none;stroke-width:1.6}

/* ============================================================
   Demand Report mockup (inside bento demo card)
   ============================================================ */
.report{border:1px solid var(--line);border-radius:var(--radius-2xl);overflow:hidden;background:var(--card)}
.report__head{display:flex;justify-content:space-between;align-items:center;padding:.95rem 1.3rem;
  background:linear-gradient(90deg,var(--brand),var(--brand-active));color:#fff}
.report__head b{font-family:var(--ext);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.report__head .ill{font-family:var(--ext);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.report__row{display:grid;grid-template-columns:130px 1fr;gap:1rem;padding:1rem 1.3rem;border-bottom:1px solid var(--line)}
.report__row:last-child{border-bottom:none}
.report__lab{font-family:var(--ext);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);padding-top:.2rem}
.report__val{font-size:.95rem;color:var(--fg-strong)}
.pill{display:inline-block;font-family:var(--ext);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:.2em .7em;border-radius:999px;background:var(--brand);color:#fff;margin-right:.5rem}
@media(max-width:560px){.report__row{grid-template-columns:1fr;gap:.35rem}}

/* ============================================================
   Founder quote — Mercury TestimonialLinear (centered)
   ============================================================ */
.founder{max-width:760px;margin:clamp(48px,7vw,80px) auto 0;text-align:center}
.founder blockquote{margin:0;font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1.28;letter-spacing:-.02em;color:var(--fg-strong);text-wrap:balance}
.founder figcaption{margin-top:1.6rem;font-family:var(--ext);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted)}

/* ============================================================
   FORM
   ============================================================ */
.form{max-width:520px;margin:clamp(2.6rem,4vw,3.4rem) auto 0;text-align:left}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.9rem;font-weight:400;margin-bottom:.45rem;color:var(--fg-strong)}
.field .opt{font-family:var(--ext);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);margin-left:.4rem}
.field .req{color:var(--brand)}
.input{width:100%;font-family:var(--sans);font-size:1rem;color:#fff;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;
  padding:.85rem 1rem;transition:border-color .2s,box-shadow .2s}
.input::placeholder{color:var(--fg-muted)}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea.input{min-height:92px;resize:vertical}

/* validation — error state + inline message (hidden until invalid) */
.field__error{margin:.45rem 0 0;font-size:.82rem;line-height:1.4;color:#fca8c4;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease}
.field.is-invalid .field__error{max-height:4rem;opacity:1}
.field.is-invalid .input{border-color:var(--pink)}
.field.is-invalid .input:focus{box-shadow:0 0 0 3px rgba(252,146,180,.18)}

/* increased breathing room between the form fields and the submit button */
.form__submit{margin-top:clamp(1.9rem,3.5vw,2.8rem)}

/* success confirmation (shown after a valid submit; fields hide via JS) */
.form__success{border:1px solid color-mix(in srgb,var(--brand) 42%,transparent);border-radius:var(--radius-2xl);
  background:var(--brand-soft);padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.2rem,2.6vw,1.6rem);
  color:var(--fg-soft);font-size:1rem;line-height:1.5;text-align:center}
.form__success strong{display:block;margin-bottom:.3rem;font-family:var(--serif);font-weight:300;
  font-size:1.25rem;letter-spacing:-.01em;color:#fff}

/* ============================================================
   MODAL — demand form, opened from the hero email button
   ============================================================ */
.modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,40px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.modal.is-open{opacity:1;visibility:visible}
.modal__overlay{position:absolute;inset:0;background:rgba(10,11,18,.72);backdrop-filter:blur(7px)}
.modal__dialog{position:relative;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius-3xl);
  padding:clamp(1.7rem,4vw,2.6rem);box-shadow:var(--shadow-float);
  transform:translateY(18px) scale(.985);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.modal.is-open .modal__dialog{transform:none}
.modal__close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);color:var(--fg-soft);font-size:22px;line-height:1;cursor:pointer;
  transition:background .2s,color .2s}
.modal__close:hover{background:rgba(255,255,255,.1);color:#fff}
.modal .eyebrow{margin:0 0 .8rem}
.modal__title{margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.6rem,3.4vw,2.1rem);line-height:1.08;letter-spacing:-.02em;color:var(--fg)}
.modal__lead{margin:.7rem 0 0;color:var(--fg-soft);font-size:1rem;line-height:1.5}
.modal .form{max-width:none;margin-top:clamp(1.5rem,2.6vw,1.9rem)}
.modal .form__submit{margin-top:clamp(1.4rem,2.6vw,1.9rem)}
/* lock background scroll while the modal is open */
html.modal-open,html.modal-open body{overflow:hidden}

/* ============================================================
   FAQ — Mercury accordion (native details)
   ============================================================ */
.faq{max-width:760px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line);padding:1.2rem 0}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:1.1rem;font-weight:400;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:1.4rem;line-height:1;color:var(--brand);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:.9rem 0 0;color:var(--fg-soft);max-width:64ch}

/* ============================================================
   Footer — Mercury (4-col)
   ============================================================ */
.footer{background:var(--page-bg);padding:clamp(60px,8vh,96px) 0 56px}
.footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2.5rem;align-items:flex-start;
  border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.footer__logo{height:34px;opacity:.92}
.footer__brand p{margin-top:1rem;max-width:30ch;font-size:.95rem;color:var(--fg-muted)}
.footer__cols{display:flex;flex-wrap:wrap;gap:2.5rem 3rem}
.footer__col h4{font-family:var(--ext);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);margin:0 0 1rem;font-weight:400}
.footer__col a{display:block;font-size:15px;color:var(--fg-soft);margin-bottom:.6rem;transition:color .2s}
.footer__col a:hover{color:#fff}
.footer__legal{margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--line);padding-top:2rem;
  font-size:12px;line-height:1.6;color:var(--fg-faint);max-width:80ch}

/* ============================================================
   Reveal on scroll (GSAP adds .is-in) — only hidden when JS on
   ============================================================ */
html.js .reveal{opacity:0;transform:translateY(26px);will-change:opacity,transform}
html.js .reveal.is-in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}

@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-hero{opacity:1!important;transform:none!important}
  .tall-media__pulse,.tall-media__live{animation:none}
  .modal,.modal__dialog{transition:opacity .15s ease,visibility .15s ease}
  .modal__dialog{transform:none!important}
  *{scroll-behavior:auto!important}
}

/* ============================================================
   Premium motion polish — restrained micro-interactions.
   Interruptible CSS transitions, spring easing, depth via shadow.
   Source-ordered after the base rules so it layers cleanly.
   ============================================================ */
:root{
  --ease-spring:cubic-bezier(.34,1.56,.64,1);   /* gentle overshoot — tactile */
  --ease-soft:cubic-bezier(.22,.61,.36,1);        /* smooth deceleration */
}

/* Buttons: spring transition, lift on hover, tactile press.
   Magnetic buttons are transform-driven by JS, so the CSS transform is scoped away. */
.btn{transition:transform .24s var(--ease-spring),background-color .2s ease,border-color .2s ease,box-shadow .3s var(--ease-soft)}
.btn[data-magnetic]{transition:background-color .2s ease,border-color .2s ease,box-shadow .3s var(--ease-soft)}
.btn:not([data-magnetic]):hover{transform:translateY(-2px)}
.btn:not([data-magnetic]):active{transform:translateY(0) scale(.96)}
.btn--primary:hover{box-shadow:0 12px 30px -12px var(--brand-glow),0 0 0 1px rgba(82,102,235,.35)}

/* Nav links: hairline underline that wipes in from the left */
.nav__links a{position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;
  background:currentColor;opacity:.75;transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease-soft)}
.nav__links a:hover::after{transform:scaleX(1)}

/* Content cards: gentle lift + brighter edge (depth from shadow, not borders) */
.card{transition:transform .35s var(--ease-soft),border-color .35s var(--ease-soft),box-shadow .35s var(--ease-soft)}
.card:hover{transform:translateY(-3px);border-color:var(--line-3);box-shadow:var(--shadow-card)}

/* Report reel: lifts toward the viewer on hover */
.report-reel{transition:transform .5s var(--ease-soft),box-shadow .5s var(--ease-soft),border-color .5s var(--ease-soft)}
.report-reel:hover{transform:translateY(-4px);border-color:var(--line-3);
  box-shadow:0 52px 92px -28px rgba(0,0,0,.78),0 0 0 1px rgba(82,102,235,.2)}
.report-reel__video{will-change:transform}

/* Inline text link: nudge forward on hover */
.bento__link{transition:color .2s,text-decoration-color .2s,transform .3s var(--ease-spring)}
.bento__link:hover{transform:translateX(3px)}

/* Reveal-on-scroll: add a soft blur dissolve to the existing rise */
html.js .reveal{filter:blur(7px);will-change:opacity,transform,filter}
html.js .reveal.is-in{filter:blur(0);
  transition:opacity .85s var(--ease-soft),transform .85s var(--ease-soft),filter .85s var(--ease-soft)}
/* Hero copy starts blurred too — GSAP animates it clear on load */
html.js .reveal-hero{filter:blur(8px)}

@media(prefers-reduced-motion:reduce){
  html.js .reveal,html.js .reveal-hero{filter:none!important}
  .btn,.card,.report-reel,.bento__link{transition:none!important}
  .btn:hover,.card:hover,.report-reel:hover,.bento__link:hover{transform:none!important}
  .nav__links a::after{display:none}
}