/* ═══════════════════════════════════════════════════════════
   QCentriq — landing page
   Tokens sampled directly from the Figma source (1440 frame)
   ═══════════════════════════════════════════════════════════ */

:root{
  /* surfaces */
  --white:      #FFFFFF;
  --bg-soft:    #F8FAFC;   /* hero */
  --bg-alt:     #F5F7FA;   /* alternating light sections */
  --dark:       #0B2F1A;   /* dark green sections + primary button */
  --dark-panel: #143A22;   /* cards on dark */
  --dark-panel2:#154225;
  --dark-line:  rgba(255,255,255,.10);
  --teal:       #176B59;   /* beta notice bar */

  /* ink */
  --ink:        #1F2937;
  --body:       #4B5563;
  --muted:      #6B7280;
  --faint:      #9CA3AF;
  --on-dark:    #FFFFFF;
  --on-dark-mut:rgba(226,240,232,.66);

  /* accents */
  --green:      #0B5D30;
  --green-soft: #E8F5ED;
  --green-mid:  #16A34A;
  --amber:      #D97706;
  --amber-soft: #FFF4E5;
  --violet:     #6D4AFF;
  --violet-soft:#F3F0FF;
  --red:        #DC2626;

  --border:     #E9EDF4;
  --border-2:   #EEF1F6;
  --line-2:     #E2E8F0;   /* Figma sub-page border */
  --violet-200: #C4B5FD;

  --shadow-sm:  0 1px 2px rgba(16,24,40,.05);
  --shadow-md:  0 4px 16px rgba(16,24,40,.06);
  --shadow-lg:  0 24px 60px rgba(11,47,26,.10);

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 20px;

  --container: 1248px;
  --gutter: 24px;

  --f-head: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.5;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--f-head);color:var(--ink);letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
hr{border:0;border-top:1px solid var(--border);margin:0}

.wrap,.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--f-mono)}

/* icons — stroke set (Lucide geometry), 24px box */
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic--10{width:10px;height:10px;stroke-width:2.6}
.ic--12{width:12px;height:12px;stroke-width:2.2}
.ic--14{width:14px;height:14px;stroke-width:2}
.ic--16{width:16px;height:16px}
.ic--20{width:20px;height:20px}
.ic--28{width:28px;height:28px;stroke-width:1.6}
/* Figma: 48px icon tiles carry a 24px glyph (icon-header/icon-block > icon-container) */
.way__ic > .ic,.aud__ic > .ic{width:24px;height:24px}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:45px;padding:0 28px;border-radius:var(--r-sm);
  font-family:var(--f-body);font-size:15px;font-weight:600;line-height:1;
  white-space:nowrap;transition:transform .18s ease,background .18s ease,
              color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn .ic{width:14px;height:14px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn--dark,.btn--primary{background:var(--dark);color:#fff;box-shadow:var(--shadow-sm)}
.btn--dark:hover,.btn--primary:hover{background:#0f3f24;box-shadow:0 8px 20px rgba(11,47,26,.22)}
.btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--border)}
.btn--ghost:hover{border-color:#D6DEE9;background:#fdfdfe}
.btn--outline{background:#fff;color:var(--ink);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.btn--outline:hover{border-color:#D6DEE9}
.btn--pill{background:var(--green);color:#fff;height:41px;padding:0 24px;border-radius:999px;font-size:14px}
.btn--pill:hover{background:#0a4f29;box-shadow:0 8px 20px rgba(11,93,48,.24)}
.btn--light{background:#fff;color:var(--dark)}
.btn--light:hover{background:#eef5f0;box-shadow:0 10px 26px rgba(0,0,0,.20)}

/* ── badges / chips / dots ─────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;height:25px;padding:0 14px;
  border-radius:999px;background:var(--green-soft);color:var(--green);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.badge--onDark{background:rgba(232,245,237,.12);color:#9FE3B8;
  box-shadow:inset 0 0 0 1px rgba(159,227,184,.22)}

.chip{display:inline-flex;align-items:center;gap:7px;height:25px;padding:0 11px;
  border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-family:var(--f-body)}
.chip--dim{background:rgba(255,255,255,.07);color:var(--on-dark-mut);
  box-shadow:inset 0 0 0 1px var(--dark-line)}
.chip--live{background:rgba(34,197,94,.12);color:#7FE0A2;
  box-shadow:inset 0 0 0 1px rgba(127,224,162,.24)}

.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.dot--green{background:var(--green-mid)}
.dot--amber{background:#F59E0B}
.dot--red{background:#EF4444}
.dot--pulse{width:7px;height:7px;background:#4ADE80;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(74,222,128,.5)}
                 50%{opacity:.7;box-shadow:0 0 0 5px rgba(74,222,128,0)}}

.tick{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;flex:none;
  background:rgba(74,222,128,.16);color:#4ADE80}
.tick--sm{width:18px;height:18px;background:var(--green-soft);color:var(--green)}

/* ═══════════ 01 · BETA NOTICE BAR ═══════════ */
.beta-bar{background:var(--teal);color:#fff}
.beta-bar__inner{display:flex;align-items:center;justify-content:center;gap:16px;
  min-height:48px;padding:8px var(--gutter);flex-wrap:wrap}
.beta-bar__text{font-size:13px;font-weight:500;line-height:1.4;letter-spacing:1.5px;text-align:center}
.beta-bar__cta{display:inline-flex;align-items:center;padding:6px 16px;border-radius:4px;
  background:#fff;color:var(--teal);
  font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.5px;transition:background .18s ease}
.beta-bar__cta:hover{background:#EAF3F1}

/* ═══════════ NAVIGATION ═══════════ */
.nav{position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--line-2);transition:box-shadow .25s ease}
.nav.is-stuck{box-shadow:0 1px 12px rgba(16,24,40,.06)}
.nav__inner{display:flex;align-items:center;gap:24px;height:80px}
.brand{display:flex;align-items:center}
.brand__logo{width:117px;height:25px}

.nav__links{display:flex;align-items:center;gap:32px;margin-inline:auto}
.nav__links a{font-size:14px;font-weight:500;color:var(--muted);transition:color .18s ease}
.nav__links a:hover{color:var(--ink)}
.nav__links a.is-active{color:#000;font-weight:600}

.nav__buttons{display:flex;align-items:center;gap:12px}

.nav__burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--border);background:#fff}
.nav__burger span{display:block;width:18px;height:2px;margin-inline:auto;
  background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .22s ease}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════ 02 · HERO ═══════════ */
.hero{background:var(--bg-soft);padding:64px 0 108px;overflow:hidden}
.hero__type{max-width:1200px;margin-inline:auto;text-align:center}
.hero__title{
  font-size:clamp(38px,5.9vw,82px);line-height:1.024;font-weight:800;letter-spacing:-.035em;
}
.hero__sub{max-width:720px;margin:24px auto 0;font-size:clamp(16px,1.3vw,18px);
  line-height:1.61;color:var(--muted)}
.hero__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:36px}

/* outer frame: 1120×560 in Figma, holding a 1072×512 app view inset by 24px */
.hero__preview{max-width:1120px;margin:64px auto 0;padding:24px;background:#fff;
  border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}

/* ── app mockup ── */
.app{display:flex;height:512px;background:#fff;border:1px solid var(--border-2);
  border-radius:var(--r);overflow:hidden}
.app__side{width:190px;flex:none;border-right:1px solid var(--border-2);
  padding:16px 12px;background:#fff}
.app__side-head{display:flex;align-items:center;justify-content:space-between;
  padding:0 8px;font-size:9px;font-weight:700;letter-spacing:.13em;color:var(--faint)}
.app__project{display:flex;align-items:center;gap:8px;margin-top:10px;padding:7px 8px;
  border-radius:var(--r-sm);font-size:11.5px;font-weight:600;color:var(--ink)}
.app__project-ic{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;
  background:var(--violet-soft);color:var(--violet)}
.app__rule{margin:10px 8px}
.app__nav{display:flex;flex-direction:column;gap:2px}
.app__nav a{display:flex;align-items:center;gap:9px;padding:8px;border-radius:var(--r-sm);
  font-size:11.5px;font-weight:500;color:var(--body)}
.app__nav a .ic{color:var(--faint)}
.app__nav a.is-active{background:#EDE9FE;color:#4C1D95;font-weight:600}
.app__nav-ic{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;flex:none}
.app__nav-ic--ai{background:linear-gradient(140deg,#7C5CFF,#5B34E8);color:#fff}
.app__nav-ic--ai svg{fill:currentColor;stroke:none}
.app__nav-ic--sm{width:17px;height:17px;border-radius:5px}

.app__main{flex:1;min-width:0;display:flex;flex-direction:column;background:#FCFCFD}
.app__topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:40px;padding:0 14px;background:#fff;border-bottom:1px solid var(--border-2)}
.app__topbar-left{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink)}
.app__topbar-left .ic{color:var(--faint)}
.app__topbar-right{display:flex;align-items:center;gap:14px;font-size:10px;color:var(--muted)}
.app__topbar-right span{display:flex;align-items:center;gap:4px}
.app__chip-new{padding:3px 8px;border:1px solid var(--border);border-radius:6px}

.app__canvas{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:24px;text-align:center}
.app__pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  background:#fff;border:1px solid var(--border);font-size:9.5px;font-weight:600;color:var(--muted)}
.app__greet{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;
  font-size:20px;font-weight:700;letter-spacing:-.02em}
.app__blur{filter:blur(5px);background:#D8D2F5;color:transparent;border-radius:4px;user-select:none}
.app__greet-sub{margin-top:5px;font-size:11.5px;color:var(--muted)}

.app__composer{width:min(340px,100%);margin-top:16px;padding:11px 12px 9px;
  background:#fff;border:1px solid #DDD6FE;border-radius:var(--r);
  box-shadow:0 4px 14px rgba(109,74,255,.07);text-align:left}
.app__composer-ph{font-size:10.5px;color:var(--faint)}
.app__composer-row{display:flex;align-items:center;gap:6px;margin-top:11px}
.app__clip{color:var(--faint)}
.app__opt{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:999px;
  border:1px solid var(--border);font-size:9px;font-weight:500;color:var(--body);white-space:nowrap}
.app__send{display:grid;place-items:center;width:22px;height:22px;margin-left:auto;
  border-radius:50%;background:linear-gradient(140deg,#7C5CFF,#5B34E8);color:#fff}
.app__send svg{fill:currentColor;stroke:none}
.app__disclaimer{margin-top:7px;font-size:8.5px;color:var(--faint)}

.app__suggestions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  width:min(360px,100%);margin-top:16px}
.app__suggestions span{display:flex;align-items:center;gap:7px;padding:8px 10px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:9.5px;font-weight:500;color:var(--body);text-align:left}
.app__suggestions span .ic{color:var(--violet)}

/* ═══════════ SECTION SHELL ═══════════ */
.sec{padding:120px 0}
.sec--white{background:var(--white)}
.sec--alt{background:var(--bg-alt)}
.sec--dark{background:var(--dark);color:var(--on-dark-mut)}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:var(--on-dark)}

.sec__head{max-width:1200px;margin:0 auto 80px;text-align:center}
.sec__head--narrow{max-width:600px}
.sec__head--md{max-width:640px}
.sec__head--lg{max-width:800px}
.sec__title{margin-top:20px;font-size:clamp(28px,3.6vw,50px);line-height:1.1;font-weight:800}
.sec__sub{max-width:600px;margin:20px auto 0;font-size:17px;line-height:1.53;color:var(--muted)}
.sec__head--md .sec__sub,.sec__head--lg .sec__sub,.sec__head--narrow .sec__sub{max-width:none}
.sec--dark .sec__sub{color:var(--on-dark-mut)}
.sec__sub--wide{max-width:736px;margin-inline:auto}
.sec__foot{margin-top:80px;text-align:center}

/* ═══════════ 03 · FEATURE GRID ═══════════ */
.feat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.feat{padding:32px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.feat:hover{transform:translateY(-4px);border-color:#DCE6DF;box-shadow:var(--shadow-md)}
.feat__num{display:block;font-family:var(--f-head);font-size:32px;font-weight:700;
  line-height:1.2;color:var(--green);letter-spacing:-.02em}
.feat h3{margin-top:16px;font-size:16px;font-weight:700;line-height:1.35}
.feat p{margin-top:12px;font-size:13px;line-height:1.62;color:var(--body)}

/* ═══════════ 04 · THREE WAYS ═══════════ */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.way{padding:32px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  transition:transform .22s ease,box-shadow .22s ease}
.way:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.way__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r)}
.way__ic--amber{background:var(--amber-soft);color:var(--amber)}
.way__ic--green{background:#E6F4EA;color:var(--green)}
.way__ic--violet{background:var(--violet-soft);color:var(--violet)}
.way h3{margin-top:24px;font-size:18px;font-weight:700}
.way p{margin-top:12px;font-size:14px;line-height:1.57;color:var(--body)}

/* ═══════════ 05 · SPLIT PANELS (dark) ═══════════ */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.panel{display:flex;flex-direction:column;padding:32px;background:var(--dark-panel);
  border:1px solid var(--dark-line);border-radius:var(--r-lg)}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:24px}
.panel__label{font-size:14px;font-weight:600;color:#fff}
.panel__quote{flex:1;padding:20px;background:rgba(0,0,0,.18);border-radius:var(--r);
  border-left:2px solid rgba(159,227,184,.4)}
.panel__quote p{font-size:15px;line-height:1.63;color:rgba(232,240,235,.86)}

.checklist{display:flex;flex-direction:column;gap:10px}
.checklist li{display:flex;align-items:center;gap:12px;font-size:14px;
  color:rgba(232,240,235,.86)}

/* ═══════════ 06 · GRAPH ═══════════ */
.graph{display:grid;grid-template-columns:260px 1fr 340px;align-items:center;
  justify-content:center;gap:40px}
.graph__label{display:block;margin-bottom:16px;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.net-card{padding:24px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm)}
.net-card h4{margin-top:14px;font-size:15px;font-weight:700}
.net-card p{margin-top:8px;font-size:12px;line-height:1.6;color:var(--muted)}

.graph__mid{display:flex;align-items:center;justify-content:center;gap:0}
.graph__line{flex:1;height:1px;background:linear-gradient(90deg,transparent,#C9D5CE,transparent)}
.graph__core{display:grid;place-items:center;width:64px;height:64px;flex:none;
  border-radius:50%;background:var(--dark);color:#7FE0A2;
  box-shadow:0 0 0 8px rgba(11,47,26,.06)}

.path-row{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-sm)}
.path-row + .path-row{margin-top:12px}
.path-row .dot{margin-top:5px}
.path-row h4{font-size:13.5px;font-weight:700}
.path-row p{margin-top:4px;font-size:11.5px;color:var(--muted)}

/* ═══════════ 07 · REVIEWER FLOW ═══════════ */
.flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:24px}
.flow__step{padding:0 8px;text-align:center}
.flow__step--agent{padding:16px 20px;border-radius:var(--r);background:var(--dark);
  box-shadow:0 12px 30px rgba(11,47,26,.18)}
.flow__stage{display:block;font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}
.flow__step--agent .flow__stage{color:#7FE0A2}
.flow__step strong{display:block;margin-top:6px;font-family:var(--f-head);
  font-size:15px;font-weight:700;color:var(--ink)}
.flow__step--agent strong{color:#fff}
.flow__arrow{color:#C9D5CE}

.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.check{padding:20px 24px;background:var(--bg-soft);border:1px solid var(--border);
  border-radius:var(--r)}
.check h4{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700}
.check .ind{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.check p{margin-top:10px;font-size:13.5px;color:var(--muted)}

.keyline{margin-top:56px;text-align:center;font-family:var(--f-head);
  font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em}

/* ═══════════ 08 · COMPARISON ═══════════ */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.compare__col{padding:32px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg)}
.compare__title{margin-bottom:24px;font-size:17px;font-weight:700}
.compare__title--good{color:var(--green)}
.step-row{padding:12px 16px;border-radius:var(--r-sm);border-left:3px solid transparent}
.step-row + .step-row{margin-top:12px}
.step-row--bad{background:#FEF6F6;border-left-color:#F0A9A9}
.step-row--good{background:#F2FAF5;border-left-color:#6FCB95}
.step-row strong{display:block;font-family:var(--f-head);font-size:14px;font-weight:700;color:var(--ink)}
.step-row span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}

/* ═══════════ 09 · BROWSER EXECUTION ═══════════ */
.bx{padding:24px;background:var(--dark-panel);border:1px solid var(--dark-line);
  border-radius:var(--r-xl)}
.bx__head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--dark-line)}
.bx__head h3{font-size:16px;font-weight:700}
.bx__head p{margin-top:5px;font-size:12.5px;color:var(--on-dark-mut)}
.bx__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}

.bw{background:#fff;border-radius:var(--r);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease}
.bw:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.24)}
.bw__bar{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;
  background:#F3F4F6;border-bottom:1px solid #E5E7EB}
.bw__dots{display:flex;gap:6px;flex:none}
.bw__dots i{width:10px;height:10px;border-radius:50%;background:#D1D5DB}
.bw__dots i:nth-child(1){background:#F87171}
.bw__dots i:nth-child(2){background:#FBBF24}
.bw__dots i:nth-child(3){background:#34D399}
.bw__url{display:flex;align-items:center;gap:7px;flex:1;min-width:0;height:27px;padding:0 10px;
  background:#fff;border:1px solid #E5E7EB;border-radius:999px;
  font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bw__url .ic{color:var(--green-mid)}
.bw__name{display:flex;align-items:center;gap:6px;flex:none;font-size:11.5px;
  font-weight:600;color:var(--ink)}
.br--chrome{color:#4285F4}
.br--firefox{color:#FF7139}
.br--safari{color:#1FA0E0}
.br--edge{color:#0F9D9D}

.bw__page{padding:12px 12px 16px}
.bw__page-head{display:flex;align-items:center;justify-content:space-between}
.bw__page-head strong{font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--ink)}
.pass{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;
  background:var(--green-soft);color:var(--green);font-size:9.5px;font-weight:700;letter-spacing:.06em}
.pass--sm{padding:2px 7px}
.bw__form{margin-top:14px}
.fld + .fld{margin-top:10px}
.fld span{display:block;font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--faint)}
.fld i{display:block;height:10px;margin-top:7px;border-radius:4px;background:#EEF1F5}
.fld-cta{height:10px;margin-top:14px;border-radius:4px;
  background:linear-gradient(90deg,var(--green),#12833f);width:100%}

/* ═══════════ 10 · RECOVERY ═══════════ */
.recovery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.rnode{display:flex;align-items:center;gap:8px}
.rnode__box{flex:1;min-width:0;height:160px;padding:24px 20px;background:#fff;
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.rnode__box h4{font-size:15px;font-weight:700}
.rnode__box p{margin-top:12px;font-size:12px;line-height:1.5;color:var(--muted)}
.rnode__box--warn{border-color:#F5C9C9;background:#FEF7F7}
.rnode__box--ai{border-color:transparent;background:var(--dark);
  box-shadow:0 14px 30px rgba(11,47,26,.18)}
.rnode__box--ai h4{color:#fff}
.rnode__box--ai p{color:var(--on-dark-mut)}
.rnode__box--ok{border-color:#B6E3C7;background:#F2FAF5}
.rnode__arrow{color:#C9D5CE;flex:none}
.rnode:last-child{grid-column:auto}

.heal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:80px}
.heal__col{padding:28px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg)}
.heal__label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--faint)}
.heal__label--ok{color:var(--green)}
.code{margin:20px 0 0;padding:16px 18px;border-radius:var(--r-sm);
  font-family:var(--f-mono);font-size:12px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;overflow-x:auto}
.code--old{background:#FEF6F6;color:#B3413F;border:1px solid #F5D9D9}
.code--new{background:#0F2A1B;color:#9FE3B8;border:1px solid #1D4A31}
.code__cmt{color:#5F9E78}
.heal__col > p{margin-top:20px;font-size:13.5px;line-height:1.56;color:var(--muted)}

/* ═══════════ 11 · EVIDENCE ═══════════ */
.evi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.evi__card{padding:32px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  transition:transform .22s ease,box-shadow .22s ease}
.evi__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.evi__card h3{font-size:22px;font-weight:700}
.evi__card > p{margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted)}
.mock{margin-top:24px;padding:16px;background:var(--bg-soft);border:1px solid var(--border-2);
  border-radius:var(--r);min-height:160px}
.mock__row{display:flex;align-items:center;gap:12px}
.mock__play{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--green);color:#fff}
.mock__play svg{fill:currentColor;stroke:none}
.mock__row .mono{font-size:12px;color:var(--muted)}
.mock__track{height:4px;margin-top:22px;border-radius:999px;background:#E3E8EF;overflow:hidden}
.mock__track span{display:block;height:100%;border-radius:999px;background:var(--green)}
.mock__bars{display:flex;gap:6px;margin-top:16px}
.mock__bars i{height:16px;border-radius:4px;background:#DFE6EE}
.mock__bars i:first-child{background:var(--green-soft)}
.mock__step{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mock__step .mono{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.mock__shot{height:100px;margin-top:14px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,#E8EDF4,#F4F7FA 55%,#E6EFE9)}
.mock__stats{display:flex;gap:26px}
.mock__stats strong{display:block;font-family:var(--f-head);font-size:28px;font-weight:800;
  line-height:1.2;color:var(--ink);letter-spacing:-.02em}
.mock__stats span{display:block;margin-top:4px;font-size:9px;font-weight:700;
  letter-spacing:.11em;color:var(--faint)}
.mock hr{margin:16px 0}
.mock__ticker{display:flex;gap:4px;flex-wrap:wrap}
.mock__ticker i{width:18px;height:18px;border-radius:5px;background:var(--green-soft)}
.mock__ticker i:nth-child(3n){background:#D4EFDF}

/* ═══════════ 12 · PIPELINE ═══════════ */
.pipe{padding:32px;background:var(--dark-panel);border:1px solid var(--dark-line);
  border-radius:var(--r-xl)}
.pipe__head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--dark-line)}
.pipe__title{font-size:13px;font-weight:700;letter-spacing:.1em;color:#fff}

.pipe__stages{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;margin-top:32px}
.stage{position:relative;padding:16px 12px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--dark-line);
  transition:background .3s ease,box-shadow .3s ease}
.stage.is-on{background:rgba(127,224,162,.10);box-shadow:inset 0 0 0 1px rgba(127,224,162,.42)}
.stage:not(:last-child)::after{content:"";position:absolute;top:50%;right:-8px;width:8px;height:1px;
  background:var(--dark-line)}
.stage__n{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);
  font-size:11px;color:var(--on-dark-mut)}
.stage__n .dot{width:6px;height:6px;opacity:.45;transition:opacity .3s ease}
.stage.is-on .stage__n{color:#fff}
.stage.is-on .stage__n .dot{opacity:1}
.stage__k{display:block;margin-top:22px;font-size:9.5px;font-weight:700;
  letter-spacing:.1em;color:#7FE0A2}
.stage__v{display:block;margin-top:6px;font-size:11px;line-height:1.35;color:var(--on-dark-mut)}

.pipe__bottom{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:40px}
.tele{padding:24px;background:rgba(0,0,0,.22);border:1px solid var(--dark-line);
  border-radius:var(--r)}
.tele__label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;color:#7FE0A2}
.tele__rows{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.tele__rows p{font-size:11.5px;color:var(--on-dark-mut)}
.tele__rows b{color:#7FE0A2;font-weight:500}
.gauge{display:flex;align-items:center;gap:16px;margin-top:16px}
.gauge strong{font-family:var(--f-head);font-size:36px;font-weight:800;
  line-height:1;color:#fff;letter-spacing:-.03em}
.gauge p{font-size:11.5px;line-height:1.45;color:var(--on-dark-mut)}

/* ═══════════ 13 · STATS ═══════════ */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.stat{padding:80px 32px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg)}
.stat__num{display:flex;align-items:baseline;gap:2px;min-height:72px}
.stat__num strong{font-family:var(--f-head);font-size:64px;font-weight:800;line-height:1.1;
  color:var(--ink);letter-spacing:-.04em}
.stat__unit{font-family:var(--f-head);font-size:40px;font-weight:800;color:var(--green);
  letter-spacing:-.03em}
.stat__word{font-size:48px !important;color:var(--green) !important}
.stat h3{margin-top:24px;font-size:19px;font-weight:700}
.stat p{margin-top:12px;font-size:14px;line-height:1.53;color:var(--muted)}

/* ═══════════ 14 · AUDIENCE ═══════════ */
.aud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.aud__card{display:flex;flex-direction:column;padding:40px;background:#fff;
  border:1px solid var(--border);border-radius:var(--r-lg);
  transition:transform .22s ease,box-shadow .22s ease}
.aud__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.aud__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r);
  background:var(--green-soft);color:var(--green)}
.aud__card h3{margin-top:16px;font-size:24px;font-weight:700}
.aud__lede{margin-top:12px;font-size:14px;line-height:1.5;color:var(--muted)}
.aud__card hr{margin:24px 0}
.bullets{display:flex;flex-direction:column;gap:12px;margin-top:auto}
.bullets li{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;
  line-height:1.5;color:var(--body)}
.bullets .tick{margin-top:1px}

/* ═══════════ 15 · BETA CTA ═══════════ */
.sec--cta{padding:160px 0}
.cta{max-width:800px;margin-inline:auto;text-align:center}
.cta__title{margin-top:24px;font-size:clamp(34px,4.9vw,64px);line-height:1.125;
  font-weight:800;letter-spacing:-.035em}
.cta__sub{max-width:580px;margin:24px auto 0;font-size:18px;line-height:1.6;
  color:var(--on-dark-mut)}
.cta .btn--light{margin-top:48px}
.cta__note{max-width:400px;margin:16px auto 0;font-size:12.5px;line-height:1.5;
  color:rgba(226,240,232,.5)}

/* ═══════════ 16 · FOOTER ═══════════ */
.footer{padding-block:80px 40px;background:var(--dark);color:var(--on-dark-mut)}
.footer__top{display:grid;grid-template-columns:320px 1fr;gap:80px}
.footer__brand p{margin-top:20px;font-size:14px;line-height:1.65;color:#9CA3AF}
.footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:80px;
  justify-items:start;max-width:580px;margin-left:auto}
.footer__cols h4{font-size:12px;font-weight:700;letter-spacing:.06em;color:#fff}
.footer__cols a{display:block;margin-top:16px;font-size:13.5px;color:var(--on-dark-mut);
  transition:color .18s ease}
.footer__cols a:hover{color:#fff}
.footer__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:80px;padding-top:32px;border-top:1px solid var(--dark-line);
  font-size:13px;color:rgba(226,240,232,.5)}

/* ═══════════ REVEAL ANIMATION ═══════════ */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal[data-delay="1"]{transition-delay:.09s}
.js .reveal[data-delay="2"]{transition-delay:.18s}
.js .reveal[data-delay="3"]{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .dot--pulse{animation:none}
  .btn:hover,.feat:hover,.way:hover,.evi__card:hover,.aud__card:hover,.bw:hover{transform:none}
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1180px){
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .graph{grid-template-columns:1fr;gap:32px;max-width:520px;margin-inline:auto}
  .graph__mid{transform:rotate(90deg);height:64px}
  .recovery{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .rnode__box{height:auto;min-height:150px}
  .pipe__stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .stage:not(:last-child)::after{display:none}
  .footer__top{grid-template-columns:1fr;gap:48px}
  .footer__cols{margin-left:0;max-width:none}
}

@media (max-width:1024px){
  .nav__links,.nav__buttons{display:none}
  .nav__burger{display:flex;margin-left:auto}
  .nav__links.is-open{
    display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    position:absolute;top:80px;left:0;right:0;padding:16px var(--gutter) 24px;
    background:#fff;border-bottom:1px solid var(--border);
    box-shadow:0 18px 30px rgba(16,24,40,.08)}
  .nav__links.is-open a{width:100%;padding:12px 0;font-size:16px;
    border-bottom:1px solid var(--border-2)}
  .nav__inner{position:relative}
  .app{height:auto;flex-direction:column}
  .app__side{width:100%;display:flex;align-items:center;gap:12px;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--border-2);padding:12px}
  .app__side-head,.app__rule{display:none}
  .app__nav{flex-direction:row;gap:6px}
  .app__nav a{white-space:nowrap}
  .app__project{margin-top:0;white-space:nowrap}
  .app__topbar-right span:not(:last-child){display:none}
  .app__canvas{padding:40px 20px 48px}
  .ways,.split,.compare,.evi,.stats,.aud,.heal,.bx__grid{grid-template-columns:1fr}
  .checks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pipe__bottom{grid-template-columns:1fr}
  .sec{padding:88px 0}
  .sec--cta{padding:112px 0}
  .footer{padding:88px 0 32px}
}

@media (max-width:720px){
  :root{--gutter:20px}
  .feat-grid,.checks,.recovery{grid-template-columns:1fr}
  .pipe__stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{flex-direction:column;gap:12px}
  .flow__arrow{transform:rotate(90deg)}
  .flow__step{width:100%}
  .rnode{flex-direction:column}
  .rnode__arrow{transform:rotate(90deg)}
  .hero{padding:44px 0 72px}
  .hero__ctas .btn{width:100%}
  .app__suggestions{grid-template-columns:1fr}
  .app__composer{width:100%}
  .app__composer-row{flex-wrap:wrap}
  .app__send{margin-left:0}
  .sec__head{margin-bottom:44px}
  .feat,.way,.evi__card,.aud__card,.panel,.compare__col,.heal__col,.pipe,.bx{padding:24px}
  .stat{padding:32px 24px}
  .stat__num strong{font-size:52px}
  .mock__stats{gap:20px}
  .footer__cols{grid-template-columns:1fr;gap:28px}
  .footer__bar{margin-top:48px}
}

/* ═══════════════════════════════════════════════════════════
   SUB-PAGES (request access, how it works)
   Reuse the landing tokens, buttons, badges, ticks and shell
   ═══════════════════════════════════════════════════════════ */

.page-hero{background:var(--bg-soft);padding:40px 0 64px}
.crumbs{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--faint)}
.crumbs a{color:var(--muted);transition:color .18s ease}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

.page-hero__type{max-width:720px;margin-top:40px}
.page-hero__title{margin-top:20px;font-size:clamp(34px,4.2vw,56px);line-height:1.1;
  font-weight:800;letter-spacing:-.035em}
.page-hero__sub{margin-top:20px;font-size:18px;line-height:1.6;color:var(--muted)}

.ra-body{background:var(--bg-soft);padding:0 0 120px}
.ra-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start}

.ra-card{padding:40px;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-md)}

/* ── form ── */
.form{display:flex;flex-direction:column;gap:22px}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}

.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label,.field legend{font-family:var(--f-body);font-size:13.5px;font-weight:600;color:var(--ink);padding:0}
.req{color:var(--green)}
.hint{margin-left:6px;font-size:12px;font-weight:500;color:var(--faint)}

.field input[type="text"],.field input[type="email"],.field select,.field textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);
  transition:border-color .18s ease,box-shadow .18s ease}
.field textarea{resize:vertical;min-height:104px;line-height:1.55}
.field select{appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(11,93,48,.12)}

.field--group{border:0;margin:0;padding:0}
.field__err{font-size:12.5px;font-weight:500;color:#B91C1C;min-height:0}
.field__err:empty{display:none}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#DC8484}
.field.is-invalid input:focus,.field.is-invalid select:focus{box-shadow:0 0 0 3px rgba(220,38,38,.12)}

/* choice pills */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;opacity:0;width:0;height:0}
.pill span{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;
  background:#fff;border:1px solid var(--border);font-size:13.5px;font-weight:500;
  color:var(--body);cursor:pointer;transition:all .18s ease}
.pill span:hover{border-color:#CBD5E1}
.pill input:checked + span{background:var(--green-soft);border-color:#9BCBAF;
  color:var(--green);font-weight:600}
.pill input:focus-visible + span{outline:2px solid var(--green);outline-offset:2px}

/* consent */
.consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:var(--body);cursor:pointer}
.consent input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--green);cursor:pointer}

.form__submit{align-self:flex-start;margin-top:2px}
.form__note{font-size:12.5px;line-height:1.55;color:var(--faint)}
.form__err{padding:12px 14px;border-radius:var(--r-sm);background:#FEF2F2;
  border:1px solid #FBC9C9;font-size:13.5px;line-height:1.5;color:#B91C1C}
.form__err:empty{display:none}

/* ── success state ── */
.ra-done{text-align:center;padding:24px 0}
.ra-done:focus{outline:none}
.ra-done__ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto;
  border-radius:50%;background:var(--green-soft);color:var(--green)}
.ra-done__ic .ic{width:26px;height:26px;stroke-width:2.4}
.ra-done h2{margin-top:24px;font-size:26px;font-weight:700}
.ra-done p{max-width:440px;margin:14px auto 0;font-size:15px;line-height:1.6;color:var(--muted)}
.ra-done strong{color:var(--ink)}
.ra-done .btn{margin-top:28px}

/* ── aside ── */
.ra-aside{display:flex;flex-direction:column;gap:24px;position:sticky;top:104px}
.ra-panel{padding:32px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg)}
.ra-panel--dark{background:var(--dark);border-color:var(--dark)}
.ra-panel__title{font-size:18px;font-weight:700}
.ra-panel__title--light{color:#fff}

.steps{display:flex;flex-direction:column;gap:22px;margin-top:24px;counter-reset:s}
.steps li{display:flex;align-items:flex-start;gap:14px}
.steps__n{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;
  background:var(--green-soft);color:var(--green);
  font-family:var(--f-head);font-size:13px;font-weight:700}
.steps h3{font-size:14.5px;font-weight:700}
.steps p{margin-top:5px;font-size:13px;line-height:1.55;color:var(--muted)}

.bullets--light{margin-top:24px}
.bullets--light li{color:rgba(232,240,235,.86)}

/* ── responsive ── */
@media (max-width:1024px){
  .ra-grid{grid-template-columns:1fr}
  .ra-aside{position:static}
  .ra-body{padding-bottom:88px}
}
@media (max-width:720px){
  .page-hero{padding:28px 0 44px}
  .page-hero__type{margin-top:28px}
  .form__row{grid-template-columns:1fr}
  .ra-card,.ra-panel{padding:24px}
  .form__submit{align-self:stretch}
}

/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS PAGE  (Figma node 126:367)
   This frame has its own visual language: Inter for headings,
   Playfair Display for the step numerals and metric figures,
   cream badges, and a violet accent.
   ═══════════════════════════════════════════════════════════ */
.p-hiw{
  --hiw-ink:#1F2937;
  --hiw-mut:#6B7280;
  --hiw-faint:#9CA3AF;
  --hiw-line:#E2E8F0;
  --hiw-soft:#F8FAFC;
  --hiw-dark:#0B2F1A;
  --hiw-card:#154225;
  --hiw-violet:#C4B5FD;
  --hiw-violet-soft:#EDE9FE;
  --f-serif:"Playfair Display", Georgia, serif;
}
.p-hiw h1, .p-hiw h2, .p-hiw h3, .p-hiw h4{font-family:var(--f-body);letter-spacing:0}

.p-hiw .hiw-wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ── badges ── */
.badge2{display:inline-flex;align-items:center;padding:6px 12px;border-radius:20px;
  background:#FCF9F2;border:1px solid #E7E0D5;
  font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.badge3{display:inline-flex;align-items:center;padding:6px 16px;border-radius:100px;
  background:#EBF0F2;border:1px solid #D9DEE5;
  font-size:11px;font-weight:600;letter-spacing:1.32px;text-transform:uppercase;color:var(--muted)}

/* ── buttons (this frame: 14px label, 28/14 padding, r8) ── */
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:8px;font-size:14px;font-weight:600;line-height:normal;
  white-space:nowrap;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn2:hover{transform:translateY(-1px)}
.btn2--dark{background:var(--dark);color:#fff}
.btn2--dark:hover{background:#0f3f24;box-shadow:0 8px 20px rgba(11,47,26,.22)}
.btn2--outline{background:#fff;border:1px solid var(--line-2);color:var(--ink)}
.btn2--outline:hover{border-color:#CBD5E1}
.btn2--white{background:#fff;border:1px solid var(--line-2);color:var(--ink)}
.btn2--white:hover{box-shadow:0 10px 26px rgba(0,0,0,.22)}
.btn2--violet{background:var(--dark);border:1px solid var(--violet-200);color:var(--violet-200)}
.btn2--violet:hover{background:#123c22}

/* ── hero ── */
.p-hiw .hiw-hero{display:flex;flex-direction:column;align-items:center;gap:32px;
  padding:40px 24px 80px;background:var(--hiw-soft)}

.p-hiw .hiw-hero__body{display:flex;flex-direction:column;align-items:center;gap:32px;width:100%}
.p-hiw .hiw-hero__text{display:flex;flex-direction:column;align-items:center;gap:24px;
  max-width:1200px;text-align:center}
.p-hiw .hiw-hero__text h1{font-size:clamp(38px,5vw,72px);line-height:1.1;font-weight:600;color:var(--hiw-ink)}
.p-hiw .hiw-hero__text p{max-width:640px;font-size:18px;line-height:1.6;color:var(--hiw-mut)}
.p-hiw .hiw-hero__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}

/* ── steps ── */
.p-hiw .hiw-row{background:#fff;border-bottom:1px solid var(--hiw-line);padding-block:80px}
.p-hiw .step-grid{display:grid;grid-template-columns:400px minmax(0,1fr);gap:48px;align-items:start}
.p-hiw .step-info{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.p-hiw .step-title{display:flex;flex-direction:column;gap:12px}
.p-hiw .step-num{font-family:var(--f-serif);font-size:36px;font-weight:400;color:var(--hiw-mut);line-height:normal}
.p-hiw .step-info h2{font-size:40px;line-height:1.15;font-weight:600;color:var(--hiw-ink)}
.p-hiw .step-info > p{font-size:16px;line-height:1.6;color:var(--hiw-mut)}

.p-hiw .step-mock{height:340px;border-radius:16px;background:var(--hiw-dark);overflow:hidden}
.p-hiw .step-mock__img{width:100%;height:100%;object-fit:cover;display:block}
/* crop origins taken from the Figma fill offsets on each mockup */
.p-hiw .step-mock__img--1{object-position:center 47%}
.p-hiw .step-mock__img--2{object-position:center 96%}
.p-hiw .step-mock__img--3{object-position:center 67%}

/* ── video ── */
.p-hiw .video-sec{background:var(--hiw-soft);padding-block:80px}
.p-hiw .video-sec__inner{display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.p-hiw .video-sec__title{font-size:clamp(30px,3.6vw,48px);font-weight:600;color:var(--hiw-ink);line-height:normal}
.p-hiw .video-sec__sub{font-size:18px;color:var(--hiw-mut);line-height:normal}
.p-hiw .video-player{position:relative;display:grid;place-items:center;width:100%;height:500px;
  background:#0B1711;border:1px solid #26402E;border-radius:16px;overflow:hidden}
.p-hiw .video-player__play{position:relative;display:grid;place-items:center;width:72px;height:72px;
  transition:transform .2s ease}
.p-hiw .video-player__play:hover{transform:scale(1.06)}
.p-hiw .video-player__bg{position:absolute;inset:0;width:72px;height:72px}
/* Figma rotates the exported up-triangle 90deg; leaf is inset 6.7% x / 25% bottom */
.p-hiw .video-player__ic{position:relative;display:block;width:28px;height:28px;transform:rotate(90deg)}
.p-hiw .video-player__ic img{position:absolute;top:0;left:6.7%;width:86.6%;height:75%}

/* ── capabilities ── */
.p-hiw .caps{background:var(--hiw-soft);padding-block:120px}
.p-hiw .caps__head{display:flex;flex-direction:column;align-items:center;gap:16px;
  margin-bottom:64px;text-align:center}
.p-hiw .caps__head h2{font-size:clamp(30px,3.6vw,48px);font-weight:600;color:var(--hiw-ink);line-height:normal}
.p-hiw .caps__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.p-hiw .cap-card{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:32px;
  background:#fff;border:1px solid var(--hiw-line);border-radius:16px;
  transition:transform .2s ease,box-shadow .2s ease}
.p-hiw .cap-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(16,24,40,.07)}
.p-hiw .cap-card__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;
  background:var(--hiw-violet-soft)}
.p-hiw .cap-card__ic img{width:24px;height:24px}
.p-hiw .cap-card h3{font-size:18px;font-weight:700;color:var(--hiw-ink);line-height:normal}
.p-hiw .cap-card p{margin-top:8px;font-size:14px;line-height:1.5;color:var(--hiw-mut)}

/* ── integrations ── */
.p-hiw .integr{background:#fff;padding-block:80px}
.p-hiw .integr__inner{display:flex;flex-direction:column;align-items:center;gap:48px}
.p-hiw .integr__head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.p-hiw .integr__head h2{font-size:clamp(24px,2.6vw,32px);font-weight:600;color:var(--hiw-ink);line-height:normal}
.p-hiw .logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:48px}
.p-hiw .logo{display:inline-flex;align-items:center;gap:8px;
  font-size:16px;font-weight:700;color:var(--hiw-mut)}
.p-hiw .logo img{width:20px;height:20px}

/* ── metrics ── */
.p-hiw .metrics{background:var(--hiw-dark);padding-block:120px}
.p-hiw .metrics__head{display:flex;flex-direction:column;align-items:center;gap:20px;
  margin-bottom:80px;text-align:center}
.p-hiw .metrics__head h2{max-width:800px;font-size:clamp(34px,4vw,56px);font-weight:600;color:#fff;line-height:normal}
.p-hiw .metrics__head p{max-width:600px;font-size:16px;color:var(--hiw-faint);line-height:normal}
.p-hiw .metrics__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.p-hiw .metric{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:32px;
  background:var(--hiw-card);border:1px solid rgba(255,255,255,.1);border-radius:16px}
.p-hiw .metric__num{display:flex;align-items:center;gap:4px;font-family:var(--f-serif);
  font-weight:400;line-height:72px}
.p-hiw .metric__val{font-size:clamp(56px,5.5vw,80px);color:#fff}
.p-hiw .metric__unit{font-size:32px;color:var(--hiw-violet)}
.p-hiw .metric h3{font-size:18px;font-weight:700;color:#fff;line-height:normal}
.p-hiw .metric p{margin-top:8px;font-size:14px;line-height:1.5;color:var(--hiw-faint)}

/* ── final cta ── */
.p-hiw .final-cta{display:flex;flex-direction:column;align-items:center;gap:48px;
  padding:140px 80px;background:var(--hiw-dark)}
.p-hiw .final-cta__text{display:flex;flex-direction:column;align-items:center;gap:24px;
  max-width:800px;text-align:center}
.p-hiw .final-cta__text h2{font-size:clamp(36px,5vw,72px);line-height:1;font-weight:600;color:#fff}
.p-hiw .final-cta__text p{max-width:580px;font-size:18px;line-height:1.6;color:var(--hiw-faint)}
.p-hiw .final-cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}

/* ── footer overrides for this frame ── */

/* ── responsive ── */
@media (max-width:1200px){
  .p-hiw .hiw-row{padding-block:64px}
  .p-hiw .step-grid{grid-template-columns:340px minmax(0,1fr);gap:32px}
  .p-hiw .step-info h2{font-size:32px}
  .p-hiw .caps{padding-block:80px}
  .p-hiw .video-sec, .p-hiw .integr{padding-block:80px}
  .p-hiw .metrics{padding-block:80px}
    .p-hiw .caps__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .p-hiw .nav__links, .p-hiw .nav__buttons{display:none}
  .p-hiw .nav__burger{display:flex;margin-left:auto}
  .p-hiw .nav__links.is-open{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    position:absolute;top:80px;left:0;right:0;z-index:60;padding:16px 24px 24px;background:#fff;
    border-bottom:1px solid var(--hiw-line);box-shadow:0 18px 30px rgba(16,24,40,.08)}
  .p-hiw .nav__links.is-open a{width:100%;padding:12px 0;font-size:16px;
    border-bottom:1px solid #EEF1F6}
  .p-hiw .step-grid{grid-template-columns:1fr;gap:32px}
  .p-hiw .step-mock{height:300px}
  .p-hiw .metrics__grid{grid-template-columns:1fr}
  .p-hiw .video-player{height:380px}
}
@media (max-width:720px){
  .p-hiw .hiw-hero{padding:24px 20px 56px;gap:24px}
  .p-hiw .hiw-row{padding-block:48px}
  .p-hiw .step-info h2{font-size:26px}
  .p-hiw .step-num{font-size:30px}
  .p-hiw .step-mock{height:220px}
  .p-hiw .caps, .p-hiw .video-sec, .p-hiw .integr, .p-hiw .metrics{padding-block:64px}
  .p-hiw .caps__grid{grid-template-columns:1fr}
  .p-hiw .caps__head{margin-bottom:40px}
  .p-hiw .metrics__head{margin-bottom:48px}
  .p-hiw .logos{gap:24px 28px}
  .p-hiw .final-cta{padding:80px 20px;gap:32px}
  .p-hiw .final-cta__actions .btn2{width:100%}
  .p-hiw .footer__cols{gap:28px}
}

/* ═══════════════════════════════════════════════════════════
   PRIVACY & TERMS PAGE  (Figma node 203:4)
   ═══════════════════════════════════════════════════════════ */
.p-legal{
  --lg-ink:#1F2937;
  --lg-mut:#6B7280;
  --lg-copy:#41454E;
  --lg-line:#E2E8F0;
  --lg-teal:#176B59;
  background:#F8FAFC;
}
.p-legal h1, .p-legal h2, .p-legal h3, .p-legal h4{font-family:var(--f-body);letter-spacing:0}
.p-legal .legal-wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ── nav ── */

/* ── hero ── */
.p-legal .legal-hero{display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:64px 80px;background:#fff;text-align:center}
.p-legal .legal-hero h1{font-size:clamp(34px,4vw,56px);line-height:1.1;font-weight:600;color:var(--lg-ink)}
.p-legal .legal-hero__sub{max-width:720px;font-size:16px;line-height:1.6;color:var(--lg-mut)}
.p-legal .legal-hero__meta{padding-top:8px;font-size:14px;color:var(--lg-mut)}
.p-legal .legal-hero__meta strong{font-weight:600;color:var(--lg-ink)}

/* ── layout ── */
.p-legal .legal-main{display:grid;grid-template-columns:260px minmax(0,776px);gap:64px;
  align-items:start;padding-block:60px 120px}

/* ── sidebar ── */
.p-legal .legal-side{display:flex;flex-direction:column;gap:6px;padding:12px;
  background:#fff;border:1px solid var(--lg-line);border-radius:12px;
  position:sticky;top:24px}
.p-legal .legal-side a{padding:10px 16px;border-radius:6px;border-left:3px solid transparent;
  font-size:14px;font-weight:500;color:var(--lg-mut);transition:background .18s ease,color .18s ease}
.p-legal .legal-side a:hover{background:rgba(23,107,89,.05);color:var(--lg-ink)}
.p-legal .legal-side a.is-active{background:rgba(23,107,89,.08);border-left-color:var(--lg-teal);
  color:#0B2F1A;font-weight:600}

/* ── content ── */
.p-legal .legal-body{display:flex;flex-direction:column;gap:48px;min-width:0}
.p-legal .legal-sec{display:flex;flex-direction:column;gap:24px;scroll-margin-top:24px}
.p-legal .legal-sec__head{display:flex;flex-direction:column;gap:8px}
.p-legal .legal-sec h2{font-size:clamp(26px,2.4vw,32px);font-weight:600;color:var(--lg-ink);line-height:normal}
.p-legal .legal-sec__head p{font-size:15px;line-height:1.5;color:var(--lg-mut)}

.p-legal .legal-paras{display:flex;flex-direction:column;gap:28px}
.p-legal .legal-para{display:flex;flex-direction:column;gap:10px}
.p-legal .legal-para h3{font-size:18px;font-weight:600;color:var(--lg-ink);line-height:normal}
.p-legal .legal-para p{font-size:15px;line-height:1.7;color:var(--lg-copy)}

.p-legal .legal-intro{font-size:15px;line-height:1.7;color:var(--lg-copy)}
.p-legal .legal-note{font-size:13px;line-height:1.6;color:var(--lg-mut)}
.p-legal .legal-rule{border-top:1px solid var(--lg-line)}

.p-legal .legal-link{color:var(--lg-teal);font-weight:600;transition:opacity .18s ease}
.p-legal .legal-link:hover{opacity:.75;text-decoration:underline}
.p-legal .legal-link--lg{font-size:16px}

/* ── security grid ── */
.p-legal .sec-grid{display:flex;flex-wrap:wrap;gap:20px 24px}
.p-legal .sec-item{display:flex;align-items:flex-start;gap:16px;width:376px;max-width:100%;
  padding:16px;background:#fff;border:1px solid var(--lg-line);border-radius:12px}
.p-legal .sec-item__ic{display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:16px;background:rgba(23,107,89,.1)}
.p-legal .sec-item__ic img{width:14px;height:14px}
.p-legal .sec-item h4{font-size:15px;font-weight:700;color:var(--lg-ink);line-height:normal}
.p-legal .sec-item p{margin-top:4px;font-size:13px;line-height:1.4;color:var(--lg-mut)}

/* ── contact ── */
.p-legal .legal-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:8px}
.p-legal .legal-entity{padding-top:32px;font-size:13px;font-weight:600;color:var(--lg-mut)}

/* ── footer ── */

/* ── responsive ── */
@media (max-width:1200px){
  .p-legal .legal-main{grid-template-columns:220px minmax(0,1fr);gap:40px;padding-block:48px 88px}
  .p-legal .legal-hero{padding:56px 48px}
    .p-legal .sec-item{width:calc(50% - 12px)}
}
@media (max-width:1024px){
  .p-legal .nav__links, .p-legal .nav__buttons{display:none}
  .p-legal .nav__burger{display:flex;margin-left:auto}
    .p-legal .nav__links.is-open{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    position:absolute;top:80px;left:0;right:0;z-index:60;padding:16px 24px 24px;background:#fff;
    border-bottom:1px solid var(--lg-line);box-shadow:0 18px 30px rgba(16,24,40,.08)}
  .p-legal .nav__links.is-open a{width:100%;padding:12px 0;font-size:16px;
    border-bottom:1px solid #EEF1F6}
  .p-legal .legal-main{grid-template-columns:1fr;gap:32px}
  .p-legal .legal-side{position:static;flex-direction:row;flex-wrap:wrap;gap:4px}
  .p-legal .legal-side a{border-left:0;border-bottom:3px solid transparent}
  .p-legal .legal-side a.is-active{border-left:0;border-bottom-color:var(--lg-teal)}
}
@media (max-width:720px){
  .p-legal .legal-hero{padding:40px 20px;gap:18px}
  .p-legal .legal-main{padding-block:32px 64px}
  .p-legal .sec-item{width:100%}
  .p-legal .legal-actions .btn2{width:100%}
  .p-legal .footer__cols{gap:28px}
}

/* ═══════════════════════════════════════════════════════════
   FEATURES / TESTING CAPABILITIES PAGE  (Figma node 234:4)
   Exact tokens from section-01 design context; the remaining
   modules follow the same card language.
   ═══════════════════════════════════════════════════════════ */
.p-feat{
  --ft-ink:#1F2937;
  --ft-mut:#6B7280;
  --ft-faint:#9CA3AF;
  --ft-line:#E2E8F0;
  --ft-soft:#F8FAFC;
  --ft-teal:#176B59;
  --ft-dark:#0B2F1A;
  --ft-violet:#C4B5FD;
  --ok:#27C93F;
  --red:#FF5F56;
  --amber:#FFBD2E;
  background:#fff;
}
.p-feat h1,.p-feat h2,.p-feat h3,.p-feat h4{font-family:var(--f-body);letter-spacing:0}
.p-feat .ft-wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* nav (this frame uses 37px-tall buttons) */

/* ── shared bits ── */
.p-feat .d{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.p-feat .d--ok{background:var(--ok)}
.p-feat .d--red{background:var(--red)}
.p-feat .d--amber{background:var(--amber)}
.p-feat .d--violet{background:var(--ft-violet)}
.p-feat .arr{color:#CBD5E1;font-style:normal;flex:none}
.p-feat .arr--lg{font-size:20px}

.p-feat .pill-ok{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;
  background:rgba(39,201,63,.12);color:#15803D;font-size:11px;font-weight:700;letter-spacing:.04em}
.p-feat .pill-ok--sm{padding:3px 8px;font-size:10px}
.p-feat .pill-fail{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;
  background:rgba(255,95,86,.14);color:#B91C1C;font-size:10px;font-weight:700}
.p-feat .pill-warn{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;
  background:rgba(255,189,46,.16);color:#92400E;font-size:10px;font-weight:700}
.p-feat .pill-soft{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;
  background:var(--ft-soft);border:1px solid var(--ft-line);
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ft-mut)}
.p-feat .pill-dev{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;
  background:rgba(196,181,253,.2);color:#5B21B6;font-size:11px;font-weight:700;letter-spacing:.08em}

/* ── window chrome ── */
.p-feat .win__head{display:flex;align-items:center;gap:16px;padding:16px 20px}
.p-feat .win__dots{display:flex;gap:8px;flex:none}
.p-feat .win__dots i{width:12px;height:12px;border-radius:50%}
.p-feat .win__dots i:nth-child(1){background:var(--red)}
.p-feat .win__dots i:nth-child(2){background:var(--amber)}
.p-feat .win__dots i:nth-child(3){background:var(--ok)}
.p-feat .win__addr{flex:1;min-width:0;padding:4px 12px;border-radius:6px;background:var(--ft-soft);
  border:1px solid var(--ft-line);font-size:11px;color:var(--ft-mut);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-feat .win__status{display:inline-flex;align-items:center;gap:8px;flex:none;
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ft-mut)}
.p-feat .win__rule{border-top:1px solid var(--ft-line);margin:0 20px}
.p-feat .win__body{padding:20px;display:flex;flex-direction:column;gap:16px}

/* ── hero ── */
.p-feat .ft-hero{background:var(--ft-soft);padding:8px 0 80px}
.p-feat .ft-hero__body{display:flex;flex-direction:column;align-items:center;gap:24px;
  max-width:1000px;margin:48px auto 0;padding-inline:24px;text-align:center}
.p-feat .ft-hero__body h1{font-size:clamp(36px,4.9vw,64px);line-height:1.12;font-weight:600;color:var(--ft-ink)}
.p-feat .ft-hero__sub{max-width:720px;font-size:17px;line-height:1.6;color:var(--ft-mut)}

.p-feat .ft-preview{margin-top:56px;background:#fff;border:1px solid var(--ft-line);
  border-radius:16px;padding:0;overflow:hidden;box-shadow:0 18px 44px rgba(16,24,40,.06)}
.p-feat .ft-preview__head{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:20px 20px 0}
.p-feat .ft-preview__head h2{font-size:17px;font-weight:700;color:var(--ft-ink)}
.p-feat .mod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:20px}
.p-feat .mod{display:block;padding:20px;border:1px solid var(--ft-line);border-radius:12px;
  background:#fff;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.p-feat .mod:hover{transform:translateY(-3px);border-color:#CBD5E1;box-shadow:0 8px 22px rgba(16,24,40,.07)}
.p-feat .mod__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:#EDE9FE}
.p-feat .mod__ic img{width:18px;height:18px}
.p-feat .mod h3{margin-top:20px;font-size:14px;font-weight:700;color:var(--ft-ink)}
.p-feat .mod p{margin-top:6px;font-size:12px;line-height:1.5;color:var(--ft-mut)}

/* ── module sections ── */
.p-feat .ft-sec{background:#fff;padding:100px 0}
.p-feat .ft-sec--alt{background:var(--ft-soft)}
.p-feat .ft-row{display:grid;grid-template-columns:440px minmax(0,1fr);gap:64px;align-items:start}
.p-feat .ft-row--rev{grid-template-columns:minmax(0,1fr) 440px}
.p-feat .ft-row--rev .ft-info{order:2}
.p-feat .ft-row--rev .ft-mock{order:1}

.p-feat .ft-info{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.p-feat .ft-info h2{font-size:clamp(30px,3.4vw,48px);line-height:1.15;font-weight:600;color:var(--ft-ink)}
.p-feat .ft-lede{font-size:16px;line-height:1.5;font-weight:600;color:var(--ft-teal)}
.p-feat .ft-body{font-size:15px;line-height:1.6;color:var(--ft-mut)}

.p-feat .ft-mock{display:flex;flex-direction:column;gap:24px;min-width:0;
  padding:32px;background:#fff;border:1px solid var(--ft-line);border-radius:16px}
.p-feat .ft-sec--alt .ft-mock{background:#fff}
.p-feat .ft-mock--flush{padding:0;overflow:hidden;gap:0}
.p-feat .ft-mock--center{align-items:center;justify-content:center;text-align:center;padding:56px 32px}
.p-feat .ft-mock__title{font-size:16px;font-weight:700;color:var(--ft-ink)}
.p-feat .ft-mock__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.p-feat .ft-mock__eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ft-mut)}
.p-feat .ft-mock__bar h3{margin-top:4px;font-size:15px;font-weight:700;color:var(--ft-ink)}

/* panels */
.p-feat .panel-lite{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding:16px;
  background:var(--ft-soft);border:1px solid var(--ft-line);border-radius:10px}
.p-feat .panel-lite__label{display:inline-flex;align-items:center;gap:6px;font-size:11px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ft-mut)}
.p-feat .panel-lite p{font-size:13px;line-height:1.5;color:var(--ft-ink)}
.p-feat .panel-dark{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding:16px;
  background:var(--ft-dark);border-radius:10px}
.p-feat .panel-dark__label{display:inline-flex;align-items:center;gap:6px;font-size:11px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ft-violet)}
.p-feat .panel-dark__label--sub{margin-top:6px}
.p-feat .case-list{display:flex;flex-direction:column;gap:4px}
.p-feat .case-list li{display:flex;align-items:center;gap:6px;font-size:12px;color:#fff}
.p-feat .case-more{font-size:11px;font-style:italic;color:var(--ft-faint)}
.p-feat .assert-list{display:flex;flex-direction:column;gap:4px}
.p-feat .assert-list li{font-size:11.5px;color:rgba(232,240,235,.82)}

.p-feat .ai-flow{display:flex;align-items:center;gap:20px}
.p-feat .ai-flow__link{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.p-feat .ai-flow__line{display:block;width:40px;height:2px;background:var(--ft-line)}

/* stat strip */
.p-feat .stat-strip{display:flex;align-items:center;gap:16px;padding:16px;border-radius:10px;
  background:var(--ft-soft);flex-wrap:wrap}
.p-feat .stat-strip__lead{display:flex;flex-direction:column;gap:2px;width:120px}
.p-feat .stat-strip__lead span{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--ft-mut)}
.p-feat .stat-strip__lead strong{font-size:24px;font-weight:700;color:var(--ft-ink)}
.p-feat .stat-strip__sep{width:1px;height:40px;background:var(--ft-line)}
.p-feat .stat-strip__set{display:flex;gap:24px;flex-wrap:wrap}
.p-feat .stat-strip__set .k{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ft-ink)}
.p-feat .stat-strip__set .v{display:block;margin-top:4px;font-size:11px;color:var(--ft-mut)}

/* module 02 · browsers */
.p-feat .browser-rows{display:flex;flex-direction:column;gap:12px}
.p-feat .brow{display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--ft-soft);border:1px solid var(--ft-line);border-radius:10px}
.p-feat .brow__ic{display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:8px;background:#fff;border:1px solid var(--ft-line)}
.p-feat .brow__name{flex:1;min-width:0}
.p-feat .brow__name strong{display:block;font-size:14px;font-weight:600;color:var(--ft-ink)}
.p-feat .brow__name span{font-size:11px;color:var(--ft-mut)}
.p-feat .brow__time{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ft-mut)}
.p-feat .brow__shot{font-size:11px;color:var(--ft-mut)}

/* module 03 · benchmark */
.p-feat .bench__meta{display:flex;gap:16px;font-size:11px;color:var(--ft-mut)}
.p-feat .bench__meta strong{color:var(--ft-ink)}
.p-feat .bench{display:flex;flex-direction:column;gap:10px}
.p-feat .bench__label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.p-feat .bench__label--slow{color:#B91C1C}
.p-feat .bench__label--fast{color:#15803D}
.p-feat .bench__seq{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.p-feat .chipx{padding:6px 12px;border-radius:8px;background:var(--ft-soft);
  border:1px solid var(--ft-line);font-size:12px;color:var(--ft-mut)}
.p-feat .bench__par{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.p-feat .wrk{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:8px;
  background:rgba(39,201,63,.06);border:1px solid rgba(39,201,63,.24)}
.p-feat .wrk strong{font-size:12px;font-weight:600;color:var(--ft-ink)}
.p-feat .wrk span:not(.pill-ok){font-size:10px;color:var(--ft-mut)}
.p-feat .wrk .pill-ok{align-self:flex-start}

/* module 04 · security */
.p-feat .sec-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.p-feat .sec-block{padding:14px;background:var(--ft-soft);border:1px solid var(--ft-line);border-radius:10px}
.p-feat .sec-block__h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ft-ink)}
.p-feat .sec-block ul{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.p-feat .sec-block li{position:relative;padding-left:14px;font-size:11.5px;color:var(--ft-mut)}
.p-feat .sec-block li::before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;
  border-radius:50%;background:var(--ft-teal);opacity:.5}
.p-feat .sec-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px;
  border-radius:10px;background:var(--ft-soft)}
.p-feat .sec-flow__step{flex:1;min-width:150px}
.p-feat .sec-flow__step strong{display:block;font-size:12.5px;font-weight:700;color:var(--ft-ink)}
.p-feat .sec-flow__step span{font-size:11px;color:var(--ft-mut)}
.p-feat .sec-flow__step--warn strong{color:#B91C1C}

/* module 05 · api */
.p-feat .api-cols{display:flex;align-items:center;gap:16px}
.p-feat .api-line{font-size:12px;color:var(--ft-ink)}
.p-feat .verb{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--ft-teal);
  color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em}
.p-feat .api-code{margin:0;padding:10px 12px;border-radius:8px;background:#fff;
  border:1px solid var(--ft-line);font-family:var(--f-mono);font-size:11px;line-height:1.6;
  color:var(--ft-mut);white-space:pre-wrap;overflow-x:auto}
.p-feat .api-status{font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--ok)}
.p-feat .api-flowmap{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;border-radius:10px;
  background:var(--ft-soft);border:1px solid var(--ft-line)}
.p-feat .api-flowmap__k{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--ft-mut)}
.p-feat .api-flowmap__v{font-size:11.5px;color:var(--ft-ink)}

/* module 06 · ux steps */
.p-feat .ux-step{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:10px;
  background:var(--ft-soft);border:1px solid var(--ft-line)}
.p-feat .ux-step--fail{background:rgba(255,95,86,.05);border-color:rgba(255,95,86,.3)}
.p-feat .ux-step__ic{margin-top:4px;flex:none}
.p-feat .ux-step div{flex:1;min-width:0}
.p-feat .ux-step strong{display:block;font-size:13px;font-weight:600;color:var(--ft-ink)}
.p-feat .ux-step span{display:block;margin-top:4px;font-size:11.5px;line-height:1.5;color:var(--ft-mut)}

/* module 09 · cicd */
.p-feat .pipe-stages{display:flex;flex-direction:column;gap:12px}
.p-feat .pstage{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px;border-radius:10px;background:var(--ft-soft);border:1px solid var(--ft-line)}
.p-feat .pstage strong{display:block;font-size:13px;font-weight:700;color:var(--ft-ink)}
.p-feat .pstage span:not(.pill-ok){font-size:11.5px;color:var(--ft-mut)}

/* module 07 · coming soon */
.p-feat .soon__title{margin-top:18px;font-size:26px;font-weight:700;color:var(--ft-ink)}
.p-feat .soon__sub{margin-top:10px;max-width:360px;font-size:14px;line-height:1.6;color:var(--ft-mut)}

/* module 08 · email */
.p-feat .email-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.p-feat .mailcard{padding:16px;border:1px solid var(--ft-line);border-radius:10px;background:#fff}
.p-feat .mailcard__from,.p-feat .mailcard__subj{font-size:11.5px;color:var(--ft-mut)}
.p-feat .mailcard__subj{margin-top:2px;font-weight:600;color:var(--ft-ink)}
.p-feat .mailcard hr{margin:12px 0;border-top:1px solid var(--ft-line)}
.p-feat .mailcard h4{font-size:14px;font-weight:700;color:var(--ft-ink)}
.p-feat .mailcard p:last-of-type{margin-top:6px;font-size:12px;line-height:1.5;color:var(--ft-mut)}
.p-feat .mailcard__btn{display:inline-flex;margin-top:14px;padding:8px 16px;border-radius:8px;
  background:var(--ft-teal);color:#fff;font-size:12px;font-weight:600}

/* ── unified flow ── */
.p-feat .ft-unified{background:#fff;padding:100px 0}
.p-feat .ft-unified__head{max-width:760px;margin:0 auto 56px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:20px}
.p-feat .ft-unified__head h2{font-size:clamp(28px,3.2vw,44px);line-height:1.2;font-weight:600;color:var(--ft-ink)}
.p-feat .ft-unified__head p{font-size:16px;line-height:1.6;color:var(--ft-mut)}
.p-feat .uni-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.p-feat .uni{padding:24px;background:var(--ft-soft);border:1px solid var(--ft-line);border-radius:12px}
.p-feat .uni__n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--ft-dark);color:#fff;font-size:12px;font-weight:700}
.p-feat .uni h3{margin-top:16px;font-size:14px;font-weight:700;color:var(--ft-ink)}
.p-feat .uni p{margin-top:6px;font-size:12px;line-height:1.5;color:var(--ft-mut)}
.p-feat .uni-foot{margin-top:40px;text-align:center;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ft-teal)}

/* ── results ── */
.p-feat .ft-results{background:var(--ft-soft);padding:100px 0}
.p-feat .ft-results__head{max-width:800px;margin:0 auto 48px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:20px}
.p-feat .ft-results__head h2{font-size:clamp(28px,3.2vw,44px);line-height:1.2;font-weight:600;color:var(--ft-ink)}
.p-feat .ft-results__head p{font-size:15px;line-height:1.6;color:var(--ft-mut)}
.p-feat .tabs{display:flex;gap:8px;flex-wrap:wrap}
.p-feat .tabs__t{padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--ft-line);
  font-size:12px;font-weight:600;color:var(--ft-mut)}
.p-feat .tabs__t.is-on{background:var(--ft-dark);border-color:var(--ft-dark);color:#fff}
.p-feat .tbl-wrap{overflow-x:auto}
.p-feat .tbl{width:100%;border-collapse:collapse;min-width:640px}
.p-feat .tbl th{padding:10px 12px;text-align:left;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ft-mut);border-bottom:1px solid var(--ft-line)}
.p-feat .tbl td{padding:12px;font-size:12.5px;color:var(--ft-ink);border-bottom:1px solid var(--ft-line)}
.p-feat .tbl tbody tr:last-child td{border-bottom:0}
.p-feat .tbl td:first-child{font-weight:600}

/* ── final cta ── */
.p-feat .ft-cta{background:var(--ft-dark);padding:120px 24px}
.p-feat .ft-cta__inner{max-width:800px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:24px}
.p-feat .ft-cta__inner h2{font-size:clamp(32px,4.4vw,60px);line-height:1.12;font-weight:600;color:#fff}
.p-feat .ft-cta__inner p{max-width:640px;font-size:17px;line-height:1.6;color:var(--ft-faint)}
.p-feat .ft-cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:8px}

/* ── footer ── */

/* ── responsive ── */
@media (max-width:1180px){
  .p-feat .ft-row,.p-feat .ft-row--rev{grid-template-columns:1fr;gap:32px}
  .p-feat .ft-row--rev .ft-info,.p-feat .ft-row--rev .ft-mock{order:0}
  .p-feat .mod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-feat .uni-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-feat .ft-sec,.p-feat .ft-unified,.p-feat .ft-results{padding:72px 0}
}
@media (max-width:1024px){
  .p-feat .nav__links,.p-feat .nav__buttons{display:none}
  .p-feat .nav__burger{display:flex;margin-left:auto}
    .p-feat .nav__links.is-open{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    position:absolute;top:80px;left:0;right:0;z-index:60;padding:16px 24px 24px;background:#fff;
    border:1px solid var(--ft-line);border-radius:12px;box-shadow:0 18px 30px rgba(16,24,40,.08)}
  .p-feat .nav__links.is-open a{width:100%;padding:12px 0;font-size:16px;border-bottom:1px solid #EEF1F6}
  .p-feat .ai-flow{flex-direction:column;align-items:stretch}
  .p-feat .ai-flow__link{flex-direction:row}
  .p-feat .api-cols{flex-direction:column;align-items:stretch}
  .p-feat .email-body{grid-template-columns:1fr}
  .p-feat .bench__par{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .p-feat .ft-hero{padding-bottom:56px}
  .p-feat .ft-hero__body{margin-top:32px;gap:18px}
  .p-feat .mod-grid,.p-feat .uni-grid{grid-template-columns:1fr}
  .p-feat .sec-grid2{grid-template-columns:1fr}
  .p-feat .bench__par{grid-template-columns:1fr}
  .p-feat .ft-mock{padding:20px}
  .p-feat .ft-sec,.p-feat .ft-unified,.p-feat .ft-results{padding:56px 0}
  .p-feat .ft-cta{padding:72px 20px}
  .p-feat .ft-cta__actions .btn2{width:100%}
  .p-feat .stat-strip__sep{display:none}
  .p-feat .win__status{display:none}
  .p-feat .footer__cols{gap:28px}
}