/* Pass product pages — shared stylesheet, tokens from the Index style v2 */
:root{
  color-scheme:light;
  --page:#f7f7f5; --surface:#ffffff; --sunk:#efefec; --raised:#e7e7e3;
  --line:rgba(0,0,0,.14); --hair:rgba(0,0,0,.07); --line-hi:rgba(0,0,0,.24);
  --ink:#16160f; --mid:#3c4046; --dim:#666c75; --faint:#686e78;
  --accent:#2265b5; --accent-hi:#1c5cab; --accent-soft:rgba(34,101,181,.11); --accent-line:rgba(34,101,181,.42);
  --good:#0ca30c; --good-ink:#0a7d0a; --good-soft:rgba(12,163,12,.10); --good-line:rgba(12,163,12,.35);
  --warm:#8a5a1f; --warm-soft:rgba(138,90,31,.10); --warm-line:rgba(138,90,31,.30); --warm-ink:#8a5a1f;
  --pop:0 2px 6px rgba(25,25,15,.08),0 8px 20px -8px rgba(25,25,15,.14);
  --pop-lg:0 8px 24px -6px rgba(25,25,15,.16),0 24px 60px -20px rgba(25,25,15,.24);
  --masthead-bg:rgba(247,247,245,.82);
  --s1:4px; --s2:8px; --s3:12px; --s4:18px; --s5:28px; --s6:44px; --s7:72px; --s8:112px;
  --r:10px; --r-lg:14px; --r-pill:999px;
  --dur:.2s; --ease:cubic-bezier(.2,.7,.2,1);
  --sans:'Rubik','Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Hiragino Sans','Noto Sans CJK SC',Arial,sans-serif;
  --display:'Archivo',var(--sans);
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,'Cascadia Mono',Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --page:#0f0f0f; --surface:#17181a; --sunk:#131416; --raised:#1e2024;
  --line:rgba(255,255,255,.09); --hair:rgba(255,255,255,.05); --line-hi:rgba(255,255,255,.16);
  --ink:#e9edf2; --mid:#cfd5dd; --dim:#8b929c; --faint:#7a8089;
  --accent:#3987e5; --accent-hi:#5598e7; --accent-soft:rgba(57,135,229,.14); --accent-line:rgba(57,135,229,.45);
  --good:#0ca30c; --good-ink:#3ec93e; --good-soft:rgba(12,163,12,.13); --good-line:rgba(12,163,12,.40);
  --warm:#d99a3c; --warm-soft:rgba(217,154,60,.12); --warm-line:rgba(217,154,60,.35); --warm-ink:#d99a3c;
  --pop:0 4px 12px rgba(0,0,0,.4),0 12px 32px -8px rgba(0,0,0,.55);
  --pop-lg:0 8px 24px -4px rgba(0,0,0,.5),0 30px 70px -20px rgba(0,0,0,.7);
  --masthead-bg:rgba(15,15,15,.82);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0f0f0f; --surface:#17181a; --sunk:#131416; --raised:#1e2024;
  --line:rgba(255,255,255,.09); --hair:rgba(255,255,255,.05); --line-hi:rgba(255,255,255,.16);
  --ink:#e9edf2; --mid:#cfd5dd; --dim:#8b929c; --faint:#7a8089;
  --accent:#3987e5; --accent-hi:#5598e7; --accent-soft:rgba(57,135,229,.14); --accent-line:rgba(57,135,229,.45);
  --good:#0ca30c; --good-ink:#3ec93e; --good-soft:rgba(12,163,12,.13); --good-line:rgba(12,163,12,.40);
  --warm:#d99a3c; --warm-soft:rgba(217,154,60,.12); --warm-line:rgba(217,154,60,.35); --warm-ink:#d99a3c;
  --pop:0 4px 12px rgba(0,0,0,.4),0 12px 32px -8px rgba(0,0,0,.55);
  --pop-lg:0 8px 24px -4px rgba(0,0,0,.5),0 30px 70px -20px rgba(0,0,0,.7);
  --masthead-bg:rgba(15,15,15,.82);
}
:root[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px;overscroll-behavior-y:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 24px}
.col{max-width:70ch}
h1,h2,h3,.dsp{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.04;text-wrap:balance;margin:0}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hi)}
code,.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.dim{color:var(--dim)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* nav */
.navbar{display:flex;align-items:center;gap:20px}
.brand{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--ink)}
.brand:hover{color:var(--ink)}
.navlinks{display:flex;gap:22px;margin-left:auto;font-size:15px}
.navlinks a{color:var(--mid);font-weight:500}
.navlinks a:hover{color:var(--ink)}
.navlinks a[aria-current="page"]{color:var(--ink);font-weight:600}
.themed{background:none;border:1px solid var(--line);color:var(--mid);width:34px;height:34px;border-radius:var(--r-pill);cursor:pointer;font-size:15px;display:grid;place-items:center}
.themed:hover{border-color:var(--line-hi);color:var(--ink)}
.mast{position:sticky;top:0;z-index:50;padding:12px 16px 0;transform:translateZ(0)}
.mast .navbar{max-width:1080px;margin:0 auto;height:56px;padding:0 10px 0 22px;background:var(--masthead-bg);backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--pop);will-change:transform;transform:translateZ(0);contain:paint}
@media(max-width:620px){.navlinks{gap:14px;font-size:14px}.brand{font-size:20px}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:15px;padding:11px 20px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);white-space:nowrap}
.btn.primary{background:var(--accent);color:#fff;box-shadow:var(--pop)}
.btn.primary:hover{color:#fff;transform:translateY(-1px);box-shadow:var(--pop-lg)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--line-hi)}
.btn.sm{padding:8px 16px;font-size:14px}

/* product hero */
.phero{padding:clamp(52px,8vw,104px) 0 var(--s7);border-bottom:1px solid var(--hair);position:relative;overflow:hidden}
.phero .grid-bg{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(110% 80% at 85% 0%,#000,transparent 66%);-webkit-mask-image:radial-gradient(110% 80% at 85% 0%,#000,transparent 66%)}
.phero .inner{position:relative;max-width:44ch}
.verbtag{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px}
.verbtag .v{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.status{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 10px;border-radius:var(--r-pill);border:1px solid transparent}
.status.live{color:var(--good-ink);background:var(--good-soft);border-color:var(--good-line)}
.status.inside{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}
.status.soon{color:var(--warm-ink);background:var(--warm-soft);border-color:var(--warm-line)}
.phero h1{font-size:clamp(52px,10vw,104px);letter-spacing:-.04em;line-height:.98}
.phero .tagline{font-family:var(--display);font-weight:700;font-size:clamp(20px,3vw,30px);color:var(--mid);margin-top:12px;letter-spacing:-.02em}
.phero .lede{font-size:clamp(17px,2.1vw,20px);line-height:1.5;color:var(--mid);margin-top:20px;max-width:52ch}
.phero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* sections */
section{padding:clamp(48px,7vw,84px) 0}
section+section{border-top:1px solid var(--hair)}
.altbg{background:var(--sunk)}
.kicker{margin-bottom:var(--s3)}
.h2{font-size:clamp(27px,4.4vw,42px)}
.lede{font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--mid);max-width:70ch}
.lead-p{font-size:17px;color:var(--mid);line-height:1.6;max-width:70ch;margin-top:16px}
.lead-p b{color:var(--ink);font-weight:600}

/* cards + lists */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:var(--s6)}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.cards,.cards.two{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--pop)}
.card .ct{font-family:var(--display);font-weight:700;font-size:19px;margin-bottom:9px;display:flex;align-items:center;gap:9px}
.card .ct::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
.card p{color:var(--mid);font-size:15.5px;line-height:1.5}
ul.clean{list-style:none;margin:var(--s5) 0 0;padding:0;max-width:70ch;display:grid;gap:13px}
ul.clean li{position:relative;padding-left:27px;color:var(--mid);font-size:16px;line-height:1.5}
ul.clean li::before{content:"";position:absolute;left:3px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
ul.clean li b{color:var(--ink);font-weight:600}
.principle{margin-top:var(--s5);font-family:var(--mono);font-size:14px;color:var(--dim);border-left:3px solid var(--accent);padding:6px 0 6px 16px}
.principle b{color:var(--ink);font-weight:600}

/* pills row */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s5)}
.pill{font-family:var(--mono);font-size:13px;color:var(--mid);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;background:var(--surface)}
.pill b{color:var(--ink);font-weight:600}
.provs{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s5)}
.prov{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 18px 10px 12px;box-shadow:var(--pop);font-weight:600;font-size:15px}
.prov .g{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:12px;color:#fff}

/* flow steps */
.flow{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5)}
.flow .st{font-family:var(--mono);font-size:13px;color:var(--mid);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px}
.flow .st b{color:var(--accent);font-weight:600;margin-right:6px}

/* cta band */
.cta-band{text-align:center;background:var(--sunk)}
.cta-band h2{font-size:clamp(30px,5vw,52px);letter-spacing:-.03em}
.cta-band p{margin-top:14px;color:var(--mid);font-size:18px}
.cta-band .cta{margin-top:var(--s5);display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

footer{border-top:1px solid var(--hair);padding:var(--s6) 0;background:var(--page)}
footer .navbar{margin-bottom:14px}
footer .idl{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink)}
footer .sub{margin-top:10px;font-size:13px;color:var(--faint);display:flex;gap:8px 18px;flex-wrap:wrap}
footer .sub a{color:var(--dim)}
footer .sub span{color:var(--faint)}

/* ── icons (Index style book) ── */
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-3px}
.icon-sm{width:16px;height:16px;stroke-width:1.75;vertical-align:-2px}
.phero .verb-ic{width:16px;height:16px;color:var(--accent);margin-right:7px;vertical-align:-2px}
/* ── mobile header: hamburger ── */
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--mid);width:40px;height:40px;border-radius:var(--r-pill);cursor:pointer;align-items:center;justify-content:center;flex:none}
.menu-btn:hover{border-color:var(--line-hi);color:var(--ink)}
.mobmenu{display:none}
@media(max-width:720px){
  .mast .navbar > .navlinks{display:none}
  .themed{display:none}
  .menu-btn{display:inline-flex}
  .mast .navbar{padding:0 8px 0 18px;gap:10px;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--page)}
  .nav-cta{margin-left:auto}
  .mobmenu.open{display:flex;flex-direction:column;gap:2px;max-width:1080px;margin:8px auto 0;padding:8px;background:var(--page);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--pop)}
  .mobmenu a{padding:12px 14px;border-radius:var(--r);color:var(--ink);font-weight:600;font-size:16px}
}
@media(max-width:520px){.wrap{padding:0 18px}.phero h1{font-size:clamp(44px,14vw,68px)}.btn{padding:12px 20px}.phero .cta .btn,.cta-band .cta .btn{flex:1 1 auto;justify-content:center}}