/* Jupiter Tech website — built on the Callisto design system (light).
   Tokens mirror jupiter-screen-kit/kit/src/kit.css so the site and the product read as one thing. */
@font-face{font-family:"Inter";src:url("fonts/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/Newsreader-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/Newsreader-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}

:root{
  --bg:#f7f7f7; --panel:#ffffff; --muted:#f4f4f5; --subtle:#fafafa;
  --line:#e7e7e9; --line-soft:#efeff1;
  --fg:#0a0a0a; --fg-2:#3f3f46; --fg-3:#71717a; --fg-4:#a1a1aa;
  --brand:#f59e0b; --brand-deep:#b45309; --brand-ink:#1c1917; --brand-tint:#fff7ea; --brand-line:#f6c56b;
  --green:#166534; --green-bg:#e7f6ec; --green-solid:#2e8b57;
  --red:#dc2626; --red-bg:#fdeaea;
  --amber:#b45309; --amber-bg:#fef3e2;
  --blue:#2563eb; --blue-bg:#e8f0fe;
  --wa:#1faa59;
  --ink:#0a0a0a; --ink-2:#18181b; --ink-line:#27272a; --ink-fg:#fafafa; --ink-fg-2:#a1a1aa;
  --radius:12px; --radius-lg:14px;
  --shadow:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 6px 20px -8px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.05);
  --shadow-lg:0 24px 60px -18px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.06);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --wrap:1180px; --gutter:20px;
  --sec:96px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}
body{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--fg);background:var(--panel);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--fg-3)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--brand);border-radius:2px}
.eyebrow.plain::before{display:none}
.display{font-size:clamp(36px,5.2vw,60px);font-weight:700;letter-spacing:-.032em;line-height:1.02;text-wrap:balance}
h1.h1{font-size:clamp(34px,4.6vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
.h2{font-size:clamp(28px,3.4vw,38px);font-weight:700;letter-spacing:-.028em;line-height:1.1;text-wrap:balance}
.h3{font-size:clamp(20px,2vw,23px);font-weight:600;letter-spacing:-.018em;line-height:1.25;text-wrap:balance}
.h4{font-size:17px;font-weight:600;letter-spacing:-.012em;line-height:1.3}
.lede{font-size:clamp(17px,1.5vw,19.5px);line-height:1.55;color:var(--fg-2);max-width:62ch;text-wrap:pretty}
.small{font-size:14px;line-height:1.55}
.cap{font-size:12.5px;line-height:1.5;color:var(--fg-3)}
.b2b{font-size:12.5px;line-height:1.5;color:var(--fg-3);margin-top:12px;max-width:90ch}
.cta-panel .b2b{color:var(--ink-fg-2);margin-top:18px}
.accent{color:var(--brand-deep)}
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:760px;margin-bottom:44px}
.sec-head .lede{margin-top:2px}
.sec-head.center{align-items:center;text-align:center;margin-inline:auto}
.sec-head.center .eyebrow::before{display:none}

/* ---------- sections ---------- */
.section{padding-block:var(--sec)}
.section.tight{padding-block:calc(var(--sec) * .6)}
.section.alt{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.dark{background:var(--ink);color:var(--ink-fg)}
.section.dark .eyebrow{color:var(--ink-fg-2)}
.section.dark .lede{color:var(--ink-fg-2)}
.section.alt + .section.alt{border-top:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:9px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:500;color:var(--fg);white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.btn.brand{background:var(--brand);border-color:var(--brand-ink);color:var(--brand-ink)}
.btn.brand:hover{background:#f7a623}
.btn.dark{background:var(--fg);border-color:var(--fg);color:#fff}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--muted);box-shadow:none;transform:none}
.btn.lg{height:46px;padding:0 20px;font-size:15px;border-radius:10px}
.btn.sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.btn.onink{background:transparent;border-color:var(--ink-line);color:var(--ink-fg)}
.btn.onink:hover{background:var(--ink-2)}
.btn.block{width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- pills / tags / kbd (product components) ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:500;border:1px solid transparent;white-space:nowrap;line-height:1}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.green{background:var(--green-bg);color:var(--green)}
.pill.red{background:var(--red-bg);color:var(--red)}
.pill.amber{background:var(--amber-bg);color:var(--amber)}
.pill.blue{background:var(--blue-bg);color:var(--blue)}
.pill.gray{background:var(--muted);color:var(--fg-2)}
.pill.line{background:#fff;border-color:var(--line);color:var(--fg-2)}
.pill.dark{background:var(--fg);color:#fff}
.pill.brandline{background:var(--brand-tint);border-color:var(--brand-line);color:var(--brand-deep)}
.pill.wa{background:#e6f7ec;color:#137a3f}
.tag{display:inline-flex;align-items:center;height:19px;padding:0 6px;border-radius:4px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.tag.live{background:var(--brand);color:var(--brand-ink)}
.tag.line{border:1px solid var(--line);color:var(--fg-3);background:#fff}
.tag.sample{border:1px solid var(--brand-line);background:var(--brand-tint);color:var(--brand-deep)}
.tag.ink{background:var(--fg);color:#fff}
.kbd{white-space:nowrap;font-family:var(--mono);font-size:10.5px;color:var(--fg-3);border:1px solid var(--line);background:var(--subtle);border-radius:5px;padding:2px 6px;line-height:1.2}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;font-weight:500;background:#fff;color:var(--fg-2);white-space:nowrap}
.chip.on{background:var(--fg);border-color:var(--fg);color:#fff}
.seg{display:inline-flex;background:var(--muted);border-radius:11px;padding:4px;gap:3px}
.seg .o{padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;color:var(--fg-2);transition:background .15s,color .15s}
.seg .o.on{background:#fff;color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg.dark .o.on{background:var(--fg);color:#fff}
.seg.full{display:flex}.seg.full .o{flex:1;text-align:center}

/* ---------- cards / grids ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:22px 24px}
.card.soft{background:var(--subtle)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}.g6{grid-template-columns:repeat(2,minmax(0,1fr))}}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.even{grid-template-columns:1fr 1fr;gap:48px}
@media (max-width:900px){.split,.split.rev,.split.even{grid-template-columns:1fr;gap:32px}.split.rev>*:first-child{order:2}}
.iconbox{width:34px;height:34px;border-radius:9px;background:var(--muted);display:flex;align-items:center;justify-content:center;color:var(--fg-2);flex-shrink:0}
.iconbox svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iconbox.brand{background:var(--brand);color:var(--brand-ink)}
.iconbox.soft{background:var(--brand-tint);color:var(--brand-deep)}
.iconbox.onink{background:var(--ink-2);color:var(--ink-fg)}
.checklist{list-style:none;display:flex;flex-direction:column;gap:10px}
.checklist li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--fg-2)}
.checklist li::before{content:"";flex-shrink:0;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.checklist.brand li::before{background-color:var(--brand-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.checklist.x li::before{background-color:var(--muted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}

/* ---------- top nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{height:60px;display:flex;align-items:center;gap:28px}
.logo-link{display:flex;align-items:center;color:var(--fg)}
.logo-link img.wordmark{height:22px;width:auto;display:block}
.footer .logo-link img.wordmark{height:18px}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav-links a{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--fg-2);border:1px solid transparent}
.nav-links a:hover{background:var(--muted);color:var(--fg)}
.nav-links a.on{background:#fff;border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.05);color:var(--fg)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-burger{display:none;width:40px;height:40px;border-radius:9px;border:1px solid var(--line);align-items:center;justify-content:center;margin-left:auto}
.nav-burger svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.nav-panel{display:none}
@media (max-width:860px){
  .nav-links,.nav-cta{display:none}
  .nav.landing .nav-cta{display:flex}
  .nav-burger{display:inline-flex}
  .nav-panel.open{display:block;border-top:1px solid var(--line);background:#fff;padding:12px var(--gutter) 18px}
  .nav-panel a{display:flex;align-items:center;justify-content:space-between;height:46px;font-size:16px;font-weight:500;border-bottom:1px solid var(--line-soft)}
  .nav-panel .btn{margin-top:14px;width:100%}
}

/* ---------- hero ---------- */
.hero{padding-block:64px 40px;position:relative;isolation:isolate}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.hero-copy{display:flex;flex-direction:column;gap:22px;max-width:860px}
.hero-copy .lede{max-width:66ch}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;color:var(--fg-3);font-size:13.5px}
.hero-meta b{color:var(--fg);font-weight:600}
.hero-visual{position:relative;margin-top:16px;margin-bottom:34px}
.hero-visual .frame{box-shadow:var(--shadow-lg)}
.float-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:14px 16px;z-index:3}
.float-card.tr{right:-8px;bottom:-26px;width:min(360px,46%)}
.float-card .ttl{font-size:12px;font-weight:600;color:var(--fg-3);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:8px}
.float-card .frame{box-shadow:none;border-radius:8px}
.aibar{display:flex;align-items:center;gap:10px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 28px -6px rgba(0,0,0,.18);padding:0 8px 0 14px;font-size:13.5px;color:var(--fg-3)}
.aibar .spark{width:18px;height:18px;color:var(--brand);flex-shrink:0}
.aibar .send{margin-left:auto;width:32px;height:32px;border-radius:8px;background:var(--brand);border:1px solid var(--brand-ink);display:flex;align-items:center;justify-content:center;color:var(--brand-ink);flex-shrink:0}
.aibar .send svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aibar .q{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
.aibar.float{position:absolute;left:42%;transform:translateX(-50%);bottom:34px;width:min(560px,72%);z-index:2}
.hero-ground{position:absolute;inset:auto 0 0 0;height:46%;background:var(--bg);border-top:1px solid var(--line);z-index:-1}
@media (max-width:760px),((pointer:coarse) and (max-height:500px)){
  .hero{padding-block:40px 28px}
  .frame-bar .kbd,.frame-bar .tn,.aibar .kbd{display:none}
  .frame-bar{font-size:12px;padding:0 10px;gap:8px}
  .float-card.tr{position:static;width:100%;margin-top:14px}
  .aibar.float{position:static;transform:none;width:100%;margin-top:12px}
  .hero-ground{display:none}
}

/* ---------- product frame + screenshots ---------- */
.frame{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.frame-bar{height:38px;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);background:#fff;font-size:12.5px;color:var(--fg-3)}
.frame-bar b{color:var(--fg);font-weight:600}
.frame-bar .s{color:#c4c4c8}
.frame-bar .end{margin-left:auto;display:flex;align-items:center;gap:8px}
.frame-bar>*{white-space:nowrap}
.frame-bar .tn{overflow:hidden;text-overflow:ellipsis}
.shot{position:relative;aspect-ratio:16/9;background:var(--bg);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .open{position:absolute;right:12px;bottom:12px;z-index:2;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.frame:hover .shot .open,.frame:focus-within .shot .open{opacity:1;transform:none}
.shot .sample{position:absolute;left:12px;bottom:12px;z-index:2}
.frame.clickable{cursor:zoom-in}
.frame.clickable:hover{box-shadow:var(--shadow-lg)}
/* mobile: crop to a focal region so the screen is legible on a phone */
@media (max-width:760px),((pointer:coarse) and (max-height:500px)){
  .shot.crop{aspect-ratio:4/3}
  .shot.crop img{position:absolute;width:calc(var(--z,2) * 100%);height:auto;max-width:none;left:calc(50% - var(--fx,.5) * var(--z,2) * 100%);top:calc(50% - var(--fy,.5) * var(--z,2) * 75%)}
  .shot .open{opacity:1;transform:none}
}
.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.thumb{display:flex;flex-direction:column;gap:10px;text-align:left}
.thumb .frame{cursor:zoom-in}
.thumb .t{font-size:14px;font-weight:600}
.thumb .d{font-size:13px;color:var(--fg-3);line-height:1.45}
.thumb .step{font-family:var(--mono);font-size:11px;color:var(--brand-deep);font-weight:500}

/* ---------- room explorer (the two rooms), desktop: the product's own chrome ----------
   Version 2 of the four compared on 11 October 2026 (Charlie's choice). The sidebar and the
   top bar are HTML in the kit's measurements (kit.css: a 218px sidebar, a 52px top bar, a
   46px tab row; rows 33px rather than 36 so twelve modules and the footer fit the frame at
   the site's width); the screen's content is the screenshot cropped under the product's
   top bar. The phone composition is the strip in mobile.css and uses none of this. */
.explorer{display:grid;grid-template-columns:218px minmax(0,1fr);background:var(--bg);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md)}
.ex-sidewrap{position:relative;min-width:0}
.ex-side{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0;padding:10px 10px 8px;font-size:13px;line-height:1.45}
.ex-brand{display:flex;align-items:flex-start;gap:10px;padding:6px 6px 8px}
.ex-brand .logo{width:24px;height:24px;flex-shrink:0;margin-top:2px}
.ex-bn{font-size:14.5px;font-weight:500;line-height:1.3;color:var(--fg)}
.ex-collapse{margin-left:auto;color:var(--fg-2);margin-top:4px;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ex-persona{display:inline-flex;gap:2px;margin-top:3px;padding:2px;border-radius:7px;background:var(--muted)}
.ex-persona button{font-size:9.5px;font-weight:600;letter-spacing:.06em;color:var(--fg-3);padding:2px 6px;border-radius:5px;line-height:1.2}
.ex-persona button.on{background:#fff;color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ex-persona button:hover:not(.on){color:var(--fg)}
.ex-nav{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#c9c9cf transparent}
.ni{display:flex;align-items:center;gap:11px;height:33px;padding:0 10px;border-radius:9px;font-size:13.5px;color:#27272a;border:1px solid transparent;text-align:left;width:100%;flex-shrink:0;white-space:nowrap;transition:background .1s}
.ni svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ni:hover{background:rgba(255,255,255,.7)}
.ni.on{background:#fff;border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.05);font-weight:500;color:var(--fg)}
.ex-foot{border-top:1px solid var(--line);margin:0 -10px;padding:8px 16px 0;flex-shrink:0}
.ex-foot .caps{font-size:10.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-3)}
.ex-foot .email{font-size:13px;color:var(--fg);margin:2px 0 8px}
.ex-foot .fi{display:flex;align-items:center;gap:11px;height:28px;font-size:13.5px;color:#27272a}
.ex-foot .fi svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ex-main{min-width:0;display:flex;flex-direction:column;background:var(--bg);padding:8px 8px 8px 0}
.ex-top{height:52px;flex-shrink:0;display:flex;align-items:center;padding:0 18px;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px 14px 0 0;font-size:13px}
.ex-top .crumbs{display:flex;align-items:center;gap:10px;font-size:14px;min-width:0}
.ex-top .crumbs .p{color:var(--fg-3)}
.ex-top .crumbs .s{color:#c4c4c8;font-size:18px;font-weight:300}
.ex-top .crumbs .c{font-weight:600}
.ex-top .topact{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:13px;font-weight:500;color:var(--fg)}
.ex-top .topact .row{display:flex;align-items:center;gap:6px}
.ex-top .topact svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ex-top .topact svg.brand{color:var(--brand)}
.ex-top .topact .ic{position:relative;display:flex}
.ex-top .badge-n{position:absolute;top:-8px;right:-8px;min-width:17px;height:17px;border-radius:9px;background:#ef4444;color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff}
.ex-tabs{height:46px;flex-shrink:0;display:flex;align-items:center;gap:4px;padding:0 16px;background:#fff;border:1px solid var(--line);border-top:0;border-bottom:0}
.ex-tabs:empty{display:none}
.ex-tabs .t{padding:6px 12px;border-radius:8px;font-size:13px;font-weight:500;color:#3f3f46}
.ex-tabs .t.on{background:var(--muted);color:var(--fg)}
.ex-tabs .t:hover:not(.on){background:var(--subtle)}
.ex-shot{position:relative;border:1px solid var(--line);border-radius:0 0 14px 14px;background:#fff;cursor:zoom-in;outline-offset:-3px}
.ex-crop{position:relative;overflow:hidden}
.ex-crop img{position:absolute;left:calc(-100% * 219 / 1212);width:calc(100% * 1440 / 1212);max-width:none;display:block}
.ex-shot .sample{position:absolute;left:12px;bottom:12px;z-index:3}
.ex-open{position:absolute;right:12px;bottom:12px;z-index:3;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;pointer-events:none}
.ex-shot:hover .ex-open,.ex-shot:focus .ex-open{opacity:1;transform:none}
.ex-blurb{padding:18px 4px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start}
.ex-blurb h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
.ex-blurb p{font-size:14px;color:var(--fg-2);line-height:1.5;max-width:70ch}
.ex-blurb .usp{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ex-step{display:flex;align-items:center;gap:8px}
.ex-step .cnt{font-family:var(--mono);font-size:11.5px;color:var(--fg-3);margin-right:4px}
@media (max-width:1000px){.explorer{grid-template-columns:200px minmax(0,1fr)}}
@media (max-width:860px){.ex-blurb{grid-template-columns:1fr}}

/* ---------- engines ---------- */
.engine{display:flex;flex-direction:column;gap:14px;padding:22px 22px 20px;position:relative;transition:transform .15s,box-shadow .15s}
.engine:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.engine .k{font-family:var(--mono);font-size:11px;color:var(--fg-3);letter-spacing:.04em}
.engine h3{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.engine p{font-size:14.5px;color:var(--fg-2);line-height:1.5;flex:1}
.engine .proof{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg-3);flex-wrap:wrap}
.engine .proof button{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;color:var(--fg);border:1px solid var(--line);border-radius:999px;height:28px;padding:0 10px;background:#fff}
.engine .proof button:hover{border-color:var(--fg)}
.engine .proof button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- comparison table ---------- */
.compare{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.compare table{width:100%;border-collapse:collapse;font-size:14px}
.compare th{text-align:left;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);padding:12px 16px;background:var(--subtle);border-bottom:1px solid var(--line)}
.compare th.hi{color:var(--brand-deep);background:var(--brand-tint)}
.compare td{padding:12px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--fg-2)}
.compare td:first-child{font-weight:500;color:var(--fg);width:30%}
.compare tr:last-child td{border-bottom:0}
.compare td.hi{background:#fffbf2;color:var(--fg)}
.compare .y{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:500}
.compare .n{color:var(--fg-4)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- dark band (ask the data) ---------- */
.ask{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
@media (max-width:900px){.ask{grid-template-columns:1fr}}
.qs{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.qs button{display:flex;align-items:center;gap:10px;text-align:left;padding:11px 14px;border-radius:10px;background:var(--ink-2);border:1px solid var(--ink-line);color:var(--ink-fg);font-size:14px;line-height:1.4;transition:border-color .15s,background .15s}
.qs button:hover,.qs button.on{border-color:var(--brand);background:#1f1d1a}
.qs button .spark{width:16px;height:16px;color:var(--brand);flex-shrink:0}
.dark .frame{border-color:var(--ink-line);box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.dark .frame-bar{background:var(--ink-2);border-color:var(--ink-line);color:var(--ink-fg-2)}
.dark .frame-bar b{color:var(--ink-fg)}
.dark .card{background:var(--ink-2);border-color:var(--ink-line);box-shadow:none}
.dark .kbd{background:var(--ink-2);border-color:var(--ink-line);color:var(--ink-fg-2)}
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.stat-row>div{padding:18px 20px;border-left:1px solid var(--line)}
.stat-row>div:first-child{border-left:0}
.stat-row .v{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}
.stat-row .l{font-size:12.5px;font-weight:500;color:var(--fg-2)}
.stat-row .d{font-size:12.5px;color:var(--fg-3);margin-top:4px}
.dark .stat-row{background:var(--ink-2);border-color:var(--ink-line)}
.dark .stat-row>div{border-color:var(--ink-line)}
.dark .stat-row .l{color:var(--ink-fg-2)} .dark .stat-row .d{color:var(--ink-fg-2)}
@media (max-width:620px){.stat-row{grid-template-columns:1fr}.stat-row>div{border-left:0;border-top:1px solid var(--line)}.stat-row>div:first-child{border-top:0}.dark .stat-row>div{border-color:var(--ink-line)}}

/* ---------- onboarding deck ----------
   Each step is a card pinned just under the nav; the next card slides over it and the covered
   cards peek out as stacked edges (--peek per card). site.js shrinks a card a little as it is
   covered so the pile reads as a pile. The finale is a dark card with a WhatsApp conversation. */
.deck{--top:84px;--peek:14px;display:grid;gap:28px;margin-top:8px}
.deck-card{position:sticky;top:calc(var(--top) + var(--i) * var(--peek));display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 36px;box-shadow:0 24px 60px -28px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.05);transform-origin:50% 0}
.deck-card .num{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.deck-card .num i{width:30px;height:30px;border-radius:50%;background:var(--brand);border:2px solid var(--brand-ink);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11.5px;color:var(--brand-ink);font-weight:500;letter-spacing:0}
.deck-card h3{font-size:28px;letter-spacing:-.025em;font-weight:700;line-height:1.1;margin-top:14px}
.deck-card p{color:var(--fg-2);font-size:16px;line-height:1.55;margin-top:12px;max-width:44ch}
.deck-card .desk{font-size:13.5px;color:var(--fg-3);line-height:1.5;margin-top:14px;padding-left:12px;border-left:2px solid var(--brand-line)}
.deck-card .desk b{color:var(--fg-2);font-weight:600}
.deck-card .after{font-size:14.5px;margin-top:16px}
.deck-card .chips{margin-top:10px}
.deck-card .frame{box-shadow:var(--shadow-md)}
.deck-card.wa{background:var(--ink);border-color:var(--ink-line);color:var(--ink-fg)}
.deck-card.wa .num{color:var(--ink-fg-2)}
.deck-card.wa h3{color:#fff}
.deck-card.wa p{color:var(--ink-fg-2)}
.deck-card.wa .wa-note{margin-top:18px;background:rgba(231,246,236,.12);border-color:rgba(191,227,203,.35)}
.deck-card.wa .wa-note b{color:#7ddc9a}
.deck-card.wa .wa-note span{color:var(--ink-fg)}
.deck-card.wa .wa-note .vs{color:var(--ink-fg-2)}
@media (min-width:761px){.deck .shot[data-shot="12-signup"] img{transform:scale(1.45);transform-origin:62% 52%}}

/* the illustrative KYC card for step 02 (the kit has no trader-side verification screen yet) */
.kyc-mock{position:relative;aspect-ratio:16/9;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:44px 6% 14px;overflow:hidden}
.km{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);width:100%;max-width:420px;font-size:13px;overflow:hidden}
.km-top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.km-top b{font-size:14px;font-weight:600}
.km-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:0 10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line-soft)}
.km-row:first-of-type{border-top:0}
.km-row i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);display:block}
.km-row.done i{background:var(--green-solid);border-color:var(--green-solid);position:relative}
.km-row.done i::after{content:"";position:absolute;left:5px;top:3px;width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.km-row.now i{border-color:var(--brand);box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.km-row b{display:block;font-weight:600;font-size:13px}
.km-row span{display:block;color:var(--fg-3);font-size:12px}
.km-row em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--fg-3)}
.km-row.done em{color:var(--green)}
.km-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--subtle);border-top:1px solid var(--line);font-size:12px;color:var(--fg-3)}
.km-tag{position:absolute;left:12px;top:12px}

/* the WhatsApp conversation: the app's own colours and shapes, no WhatsApp marks */
.wa-wrap{justify-self:center;width:min(100%,360px)}
.wa-phone{background:#efeae2;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.65);border:7px solid #111;font-family:var(--sans);color:#111b21}
.wa-phone svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.wa-phone svg.fill{fill:currentColor;stroke:none}
.wa-top{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 6px;background:#008069;color:#fff}
.wa-top .wa-av{width:36px;height:36px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.wa-top .wa-who{flex:1;min-width:0;line-height:1.2}
.wa-top .wa-who b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-top .wa-who small{display:block;font-size:12px;color:#d1e8e1}
.wa-top svg{width:21px;height:21px;margin-left:6px}
.wa-body{min-height:340px;padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px;background:#efeae2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='8' cy='8' r='1.2' fill='%23d9d2c6'/%3E%3Ccircle cx='28' cy='24' r='1.2' fill='%23d9d2c6'/%3E%3Cpath d='M22 6h6M36 32v6' stroke='%23d9d2c6' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.wa-date,.wa-sys{align-self:center;font-size:11.5px;color:#54656f;background:#fff;border-radius:8px;padding:4px 10px;box-shadow:0 1px .5px rgba(0,0,0,.08);text-align:center;max-width:90%}
.wa-sys{background:#ffeecd;margin-bottom:4px}
.wa-phone .msg{position:relative;max-width:84%;padding:6px 8px 5px 9px;border-radius:8px;font-size:14px;line-height:1.38;box-shadow:0 1px .5px rgba(0,0,0,.13);opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.wa-phone .msg.show{opacity:1;transform:none}
.wa-phone .msg.out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:0}
.wa-phone .msg.in{align-self:flex-start;background:#fff;border-top-left-radius:0}
.wa-phone .msg::before{content:"";position:absolute;top:0;width:0;height:0;border-style:solid}
.wa-phone .msg.out::before{right:-8px;border-width:0 0 10px 8px;border-color:transparent transparent transparent #d9fdd3}
.wa-phone .msg.in::before{left:-8px;border-width:0 8px 10px 0;border-color:transparent #fff transparent transparent}
.wa-phone .msg em{display:flex;justify-content:flex-end;align-items:center;gap:4px;font-style:normal;font-size:10.5px;color:#667781;margin-top:2px;margin-left:24px}
.wa-phone .msg .ticks{width:16px;height:11px;stroke:#53bdeb;stroke-width:1.6}
/* a template call-to-action button, the way WhatsApp draws one under the message: a divider, blue text, a link-out icon */
.wa-phone .msg .cta{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px -8px -5px -9px;padding:8px 10px;border-top:1px solid rgba(0,0,0,.08);color:#027eb5;font-size:13.5px;font-weight:500}
.wa-phone .msg .cta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.wa-phone .typing{align-self:flex-start;background:#fff;border-radius:8px;border-top-left-radius:0;padding:10px 12px;display:none;gap:4px;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.wa-phone .typing.show{display:flex}
.wa-phone .typing i{width:7px;height:7px;border-radius:50%;background:#8696a0;animation:tdot 1s infinite ease-in-out}
.wa-phone .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.wa-bar{display:flex;align-items:center;gap:6px;padding:6px 6px 8px;background:#f0f2f5}
.wa-input{flex:1;display:flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 10px;background:#fff;border-radius:999px;color:#54656f;font-size:14px}
.wa-input span{flex:1;color:#8696a0}
.wa-mic{width:40px;height:40px;border-radius:50%;background:#00a884;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-mic svg{width:20px;height:20px}
.wa-cap{margin-top:12px;text-align:center;color:var(--ink-fg-2)}
@media (prefers-reduced-motion:reduce){.wa-phone .msg{opacity:1;transform:none;transition:none}.wa-phone .typing{display:none!important}}

/* ---------- logos ---------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 44px}
.logos img{height:28px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s}
.logos img.tall{height:54px}
/* a long lockup (e.g. "WhatsApp Business") needs more room than the 150px cap,
   or it letterboxes and renders shorter than the logos beside it */
.logos img.wide{max-width:240px}
.logos img:hover{filter:none;opacity:1}
.logos .txt{font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--fg-3)}
@media (max-width:620px){.logos{gap:20px 28px}.logos img{height:22px}.logos img.tall{height:40px}}

/* ---------- feature rows ---------- */
.feat{display:flex;flex-direction:column;gap:12px}
.feat h3{font-size:18px;font-weight:600;letter-spacing:-.015em}
.feat p{font-size:15px;color:var(--fg-2);line-height:1.55}
.feat .iconbox{margin-bottom:2px}
.numlist{counter-reset:n;list-style:none;display:flex;flex-direction:column;gap:0}
.numlist li{counter-increment:n;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:22px 0;border-top:1px solid var(--line)}
.numlist li:last-child{border-bottom:1px solid var(--line)}
.numlist li::before{content:"0" counter(n);font-family:var(--mono);font-size:12px;color:var(--brand-deep);font-weight:500;padding-top:4px}
.numlist h3{font-size:18px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.numlist p{font-size:15px;color:var(--fg-2);line-height:1.55;max-width:64ch}
.numlist .ev{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}

/* ---------- trader thread diagram (tracking hero) ---------- */
.thread{display:grid;grid-template-columns:150px minmax(0,1fr) 150px;gap:18px;align-items:center}
.thread .col{display:flex;flex-direction:column;gap:8px}
.thread .col .lab{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:2px}
.thread .src,.thread .roll{display:flex;align-items:center;justify-content:space-between;gap:8px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:500;color:var(--fg);position:relative;white-space:nowrap}
.thread .src::after{content:"";position:absolute;right:-18px;top:50%;width:18px;height:1px;background:var(--line);}
.thread .roll::before{content:"";position:absolute;left:-18px;top:50%;width:18px;height:1px;background:var(--line)}
.thread .src .dot{width:7px;height:7px;border-radius:50%;background:var(--fg-4)}
.thread .src.on .dot{background:var(--brand)}
.thread .roll .v{font-family:var(--mono);font-size:11px;color:var(--fg-3)}
.record{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-md);padding:18px 20px 16px;position:relative}
.record .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.record .hd .id{font-family:var(--mono);font-size:12px;color:var(--fg-2)}
.record .ctx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.record .ctx div{background:var(--subtle);border:1px solid var(--line-soft);border-radius:8px;padding:8px 10px}
.record .ctx .k{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.record .ctx .v{display:block;font-family:var(--mono);font-size:12px;color:var(--fg);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline{position:relative;height:54px}
.timeline .rail{position:absolute;left:10px;right:10px;top:12px;height:2px;background:var(--line)}
.timeline .rail i{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--brand);transform-origin:left;animation:grow 6s ease-in-out infinite}
.timeline .nodes{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between}
.timeline .node{display:flex;flex-direction:column;align-items:center;gap:8px;width:20px}
.timeline .node b{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--brand);display:block;margin-top:7px}
.timeline .node:last-child b{background:var(--brand);border-color:var(--brand-ink)}
.timeline .node span{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap}
.timeline .node:last-child span{color:var(--brand-deep)}
.timeline .cursor{position:absolute;top:3px;left:10px;width:20px;height:20px;border-radius:50%;background:var(--brand);border:2px solid var(--brand-ink);box-shadow:0 0 0 6px rgba(245,158,11,.18);animation:travel 6s ease-in-out infinite;margin-left:-10px}
@keyframes travel{0%{left:10px}80%{left:calc(100% - 10px)}100%{left:calc(100% - 10px)}}
@keyframes grow{0%{transform:scaleX(0)}80%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.record .ft{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--fg-3);flex-wrap:wrap}
.record .ft b{color:var(--fg);font-weight:600}
@media (max-width:900px){
  .thread{grid-template-columns:1fr}
  .thread .col{flex-direction:row;flex-wrap:wrap}
  .thread .col .lab{width:100%}
  .thread .src,.thread .roll{height:30px;font-size:12px;padding:0 10px}
  .thread .src::after,.thread .roll::before{display:none}
  .record .ctx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline .node span{display:none}
  .timeline .node:first-child span,.timeline .node:last-child span{display:block}
}

/* ---------- self check ---------- */
.check{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.check .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border-top:1px solid var(--line-soft)}
.check .row:first-child{border-top:0}
.check .q{font-size:15px;line-height:1.5;color:var(--fg)}
.check .q small{display:block;font-size:12.5px;color:var(--fg-3);margin-top:2px}
.check .seg .o{padding:6px 14px;font-size:13px}
.check-result{margin-top:14px;padding:16px 18px;border-radius:var(--radius);border:1px solid var(--line);background:var(--subtle);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14.5px}
.check-result b{font-weight:600}
.check-result.warn{background:var(--brand-tint);border-color:var(--brand-line)}
.check-result.good{background:var(--green-bg);border-color:#bfe3cb}
@media (max-width:620px){.check .row{grid-template-columns:1fr}}

/* ---------- data table ---------- */
table.data{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
table.data th{text-align:left;font-weight:500;font-size:12px;color:var(--fg-3);padding:10px 12px;background:var(--subtle);border-bottom:1px solid var(--line);white-space:nowrap}
table.data td{padding:10px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
table.data tr:last-child td{border-bottom:0}
table.data td.r,table.data th.r{text-align:right}
table.data td.name{font-weight:600}
table.data .s2{display:block;font-size:11.5px;color:var(--fg-3);font-weight:400}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Any author display rule beats the [hidden] attribute's UA display:none, so .form
   (grid) and .done-choice (flex) both stayed on screen after being hidden in JS. This
   makes [hidden] mean hidden everywhere rather than needing a rule per element. */
[hidden]{display:none!important}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:500;color:var(--fg)}
.field input,.field select,.field textarea{height:42px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 12px;font:inherit;font-size:14px;color:var(--fg);width:100%}
.field textarea{height:auto;min-height:96px;padding:10px 12px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(245,158,11,.18)}
/* A moment of brand glow on the leaks box after the self-check pre-fills it. */
.field textarea.prefilled{border-color:var(--brand);box-shadow:0 0 0 4px rgba(245,158,11,.35);transition:box-shadow .5s ease,border-color .5s ease}
.form-note{font-size:12.5px;color:var(--fg-3);line-height:1.5}
.form-note a{text-decoration:underline;text-underline-offset:2px}
.form-done{display:none;padding:22px;border-radius:var(--radius);background:var(--green-bg);border:1px solid #bfe3cb;color:var(--green);font-size:15px;line-height:1.5}
.form-done.show{display:block}
.form-done b{display:block;font-weight:600;margin-bottom:4px}
.form-done p{margin:0}
.done-choice{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
/* Three ways to carry on after a form sends. Rows rather than a button pair: each route
   needs a line of explanation, and three explained buttons in a row would not fit. */
.routes{flex-direction:column;gap:8px}
.route{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px 11px 12px;border:1px solid #bfe3cb;border-radius:10px;background:#fff;color:var(--fg);text-align:left;font:inherit;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.route:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);border-color:#9fd3b1}
.route::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--fg-4);border-bottom:1.5px solid var(--fg-4);transform:rotate(-45deg);flex-shrink:0;margin-right:2px}
.route .ri{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--muted);color:var(--fg-2);flex-shrink:0}
.route .ri svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.route.brand .ri{background:var(--brand);color:var(--brand-ink)}
.route.wa .ri{background:var(--wa);color:#fff}
.route .rx{flex:1;min-width:0}
.route .rt{display:block;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--fg)}
.route .rd{display:block;font-size:13px;color:var(--fg-3);line-height:1.45;margin-top:2px}
/* Calendly sizes its iframe from the parent's height, not min-height, so an auto
   height gives a 150px stub in a tall empty box. */
.cal-wrap{position:relative;margin-top:16px;height:700px;background:#fff;border-radius:10px;overflow:hidden}
/* Calendly can take 10s+ to paint. Without this the visitor stares at a blank white
   box straight after submitting and assumes it broke. The iframe covers this once it loads. */
.cal-wrap::before{content:"Loading the calendar…";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:14px;color:var(--fg-3)}
.cal-wrap iframe{position:relative;z-index:1}
@media (max-width:760px),((pointer:coarse) and (max-height:500px)){.cal-wrap{height:640px}}
.cal-fallback{display:block;margin-top:10px;font-size:13px;text-decoration:underline}
/* Submission failure. Without this the form shows its thank-you panel whether the
   POST succeeded or not, so a broken endpoint is indistinguishable from a working one. */
.form-err{display:none;padding:14px 16px;border-radius:var(--radius);background:var(--red-bg);border:1px solid var(--red-line,#f0c2c2);color:var(--red);font-size:14px;line-height:1.5}
.form-err.show{display:block}
.form-err a{text-decoration:underline}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
@media (max-width:620px){.form{grid-template-columns:1fr}}
.cta-panel{background:var(--ink);color:var(--ink-fg);border-radius:20px;padding:44px 40px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:start}
.cta-panel .field label{color:var(--ink-fg)}
.cta-panel .field input,.cta-panel .field select,.cta-panel .field textarea{background:var(--ink-2);border-color:var(--ink-line);color:var(--ink-fg)}
.cta-panel .form-note{color:var(--ink-fg-2)}
.cta-panel .lede{color:var(--ink-fg-2)}
.cta-panel .eyebrow{color:var(--ink-fg-2)}
.cta-panel .kv{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.cta-panel .kv div{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-fg-2);line-height:1.5}
.cta-panel .kv b{color:var(--ink-fg);font-weight:600}
.cta-panel .kv i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--brand);padding-top:5px;width:22px;flex-shrink:0}
@media (max-width:900px){.cta-panel{grid-template-columns:1fr;padding:30px 22px;gap:28px}}

/* ---------- consent banner (exists only when the build has a Google tag ID) ----------
   A bottom bar, never an interstitial: Google's destination rules forbid anything that
   blocks the content, and the ICO wants Reject as easy as Accept, so both are the same button. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);box-shadow:0 -12px 40px -20px rgba(0,0,0,.25);padding:16px 0 calc(16px + env(safe-area-inset-bottom,0px));transform:translateY(110%);transition:transform .25s ease;visibility:hidden}
.consent.show{transform:none;visibility:visible}
.consent-inner{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap}
.consent-text{flex:1 1 440px;font-size:14px;line-height:1.5;color:var(--fg-2)}
.consent-text b{color:var(--fg);font-weight:600}
.consent-text a{text-decoration:underline;text-underline-offset:2px}
.consent-opts{flex:1 1 100%;display:flex;gap:10px 28px;flex-wrap:wrap}
.consent-opts label{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.45;color:var(--fg-2);cursor:pointer}
.consent-opts input{margin-top:3px;accent-color:var(--brand)}
.consent-opts b{color:var(--fg);font-weight:600;margin-right:4px}
.consent-btns{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);background:var(--bg);padding-block:44px 30px;font-size:14px;color:var(--fg-3)}
.footer-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
.footer .fh{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);margin:0 0 12px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer a:hover{color:var(--fg)}
.foot-contact{display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--fg-2)}
.nowrap{white-space:nowrap}
.footer .bottom{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:12.5px}
@media (max-width:760px),((pointer:coarse) and (max-height:500px)){.footer-grid{grid-template-columns:1fr 1fr}}

/* ---------- popout dialog ---------- */
dialog.pop{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;overflow:hidden}
dialog.pop::backdrop{background:rgba(10,10,12,.62);backdrop-filter:blur(4px)}
.pop-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.pop-box{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;max-width:100%;max-height:100%}
.pop-head{height:50px;display:flex;align-items:center;gap:12px;padding:0 10px 0 16px;border-bottom:1px solid var(--line);font-size:13.5px;flex-shrink:0}
.pop-head b{font-weight:600}
.pop-head .s{color:#c4c4c8}
.pop-head .end{margin-left:auto;display:flex;align-items:center;gap:6px}
.pop-head .ib{width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--fg-2)}
.pop-head .ib:hover{background:var(--muted);color:var(--fg)}
.pop-head .ib svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pop-stage{position:relative;background:var(--bg);overflow:hidden;flex-shrink:0}
.pop-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.pop-stage iframe{position:absolute;left:0;top:0;width:1440px;height:810px;border:0;transform-origin:0 0;background:var(--bg);opacity:0;transition:opacity .2s}
.pop-stage iframe.ready{opacity:1}
.pop-foot{padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--fg-2);display:flex;align-items:center;gap:14px;flex-shrink:0;line-height:1.45}
.pop-foot .tag{flex-shrink:0}
.pop-foot p{flex:1;min-width:0}
@media (max-width:760px),((pointer:coarse) and (max-height:500px)){
  .pop-inner{padding:0}
  .pop-box{border-radius:0;width:100%;height:100%}
  .pop-stage{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
  .pop-stage img{position:static;width:1440px;max-width:none;height:auto}
  .pop-stage.fit img{width:100%}
  .pop-stage iframe{display:none}
  .pop-foot{display:none}
}

/* ---------- about ---------- */
/* Team: a profile list in two named groups, founders then engineering (option C of the
   23 September mock-ups). Photo, then name and role in a narrow column, then the bio in the
   serif at reading size. Desktop only: the phone composition in mobile.css takes over at 760px. */
.person .ph{border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#ececee,#dcdcdf);border:1px solid var(--line)}
.person .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.person .nm{font-size:17px;font-weight:600;letter-spacing:-.015em}
.person .rl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-top:5px}
.person p{font-size:14px;color:var(--fg-2);line-height:1.55}
@media (min-width:761px){
  .team{display:block}
  .team .group-label{padding:34px 0 18px;border-top:1px solid var(--line)}
  .team .group-label:first-child{border-top:0;padding-top:0}
  .team .group-label+.person{border-top:0;padding-top:0}
  .person{display:grid;grid-template-columns:150px 210px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:8px 36px;align-items:start;padding:30px 0;border-top:1px solid var(--line)}
  .person>.ph{grid-column:1;grid-row:1/span 3;aspect-ratio:4/5}
  .person>div:not(.ph){grid-column:2;grid-row:1}
  .person .nm{font-size:19px}
  .person>p{grid-column:3;grid-row:1/span 3;margin:0;font-family:var(--serif);font-size:18px;line-height:1.5;max-width:58ch;text-wrap:pretty}
  .person>p.cap{grid-column:2;grid-row:2;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--fg-3);max-width:none}
}
@media (min-width:761px) and (max-width:980px){
  .person{grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto auto auto}
  .person>p{grid-column:2;grid-row:2}
  .person>p.cap{grid-column:2;grid-row:3}
}
.letter{font-family:var(--serif);font-size:clamp(19px,1.7vw,22px);line-height:1.5;color:var(--fg);max-width:640px}
.letter p{margin-bottom:1.1em}
.letter p:last-child{margin-bottom:0}
.letter .lead{font-size:1.35em;font-style:italic;line-height:1.35;color:var(--fg);margin-bottom:1em;text-wrap:balance}
.letter .sig{font-family:var(--sans);font-size:14px;color:var(--fg-3);margin-top:22px}
.letter .sig b{display:block;color:var(--fg);font-weight:600;font-size:15px}
.portrait{margin-top:28px;max-width:360px;aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--muted)}
.portrait img{width:100%;height:100%;object-fit:cover}
.pull{font-family:var(--serif);font-size:clamp(24px,2.6vw,32px);font-style:italic;line-height:1.3;letter-spacing:-.01em;text-wrap:balance;color:var(--fg);max-width:22ch}
.milestones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.milestones>div{padding:22px 22px;border-left:1px solid var(--line)}
.milestones>div:first-child{border-left:0}
.milestones .when{font-family:var(--mono);font-size:12px;color:var(--brand-deep);font-weight:500}
.milestones h3{font-size:17px;font-weight:600;letter-spacing:-.012em;margin:8px 0 6px}
.milestones p{font-size:14px;color:var(--fg-2);line-height:1.5}
@media (max-width:760px),((pointer:coarse) and (max-height:500px)){.milestones{grid-template-columns:1fr}.milestones>div{border-left:0;border-top:1px solid var(--line)}.milestones>div:first-child{border-top:0}}

/* ---------- journal ---------- */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px),((pointer:coarse) and (max-height:500px)){.posts{grid-template-columns:1fr}}
.post{display:flex;flex-direction:column;gap:14px;padding:26px 26px 24px;transition:transform .15s,box-shadow .15s}
.post:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.post .meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--fg-3)}
.post h3{font-family:var(--serif);font-size:clamp(24px,2.4vw,30px);font-weight:500;line-height:1.15;letter-spacing:-.012em;text-wrap:balance}
.post p{font-size:15px;color:var(--fg-2);line-height:1.55}
.post .more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--fg)}
.post .more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.post.feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;background:var(--ink);color:var(--ink-fg);border-color:var(--ink)}
.post.feature .meta,.post.feature p{color:var(--ink-fg-2)}
.post.feature h3{font-size:clamp(28px,3.2vw,40px);color:#fff}
.post.feature .more{color:#fff}
.post.feature .side{border-left:1px solid var(--ink-line);padding-left:28px;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink-fg-2)}
.post.feature .side b{color:var(--ink-fg);font-weight:600;display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.post.feature .side .stages{display:flex;gap:6px;flex-wrap:wrap}
.post.feature .side .stages span{font-family:var(--mono);font-size:12px;padding:5px 9px;border:1px solid var(--ink-line);border-radius:7px;color:var(--ink-fg)}
@media (max-width:760px),((pointer:coarse) and (max-height:500px)){.post.feature{grid-template-columns:1fr}.post.feature .side{border-left:0;border-top:1px solid var(--ink-line);padding-left:0;padding-top:18px}}

/* article */
.article-head{padding-block:56px 36px;border-bottom:1px solid var(--line)}
.article-head .meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13px;color:var(--fg-3);margin-bottom:22px}
.article-head h1{font-family:var(--serif);font-size:clamp(34px,4.6vw,54px);font-weight:500;line-height:1.08;letter-spacing:-.018em;text-wrap:balance;max-width:20ch}
.article-head .standfirst{font-family:var(--serif);font-size:clamp(19px,1.8vw,23px);line-height:1.45;color:var(--fg-2);max-width:60ch;margin-top:20px;text-wrap:pretty}
.article-head .dl{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin-top:24px}
.article-head .dl .hint{font-size:12.5px;color:var(--fg-3)}
.print-src{display:none}
/* Print, and the PDFs build.py renders from it: the article alone, on A4. */
@media print{
  .nav,.footer,.aside,.article-next,.consent,.dl,.cta-row,.nav-panel{display:none!important}
  body{background:#fff;color:#000}
  .article-head{padding-block:0 14px;border-bottom:1px solid #d4d4d4}
  .article-head .meta{margin-bottom:12px;font-size:9.5pt}
  .article-head h1{font-size:26pt;max-width:none}
  .article-head .standfirst{font-size:12.5pt;max-width:none;margin-top:12px}
  .print-src{display:block;margin-top:10px;font-size:8.5pt;color:#6b6b6b}
  .article-body{display:block;padding-block:14px 0}
  .prose{max-width:none;font-size:10.5pt;line-height:1.5}
  .prose h2{font-size:17pt;break-after:avoid;break-before:auto}
  .prose h3,.prose h4{break-after:avoid}
  .prose p,.prose li{orphans:3;widows:3}
  .tablewrap{overflow:visible}
  .prose table{font-size:8.5pt;width:100%}
  .prose tr,.prose .callout,.prose .note,.prose blockquote,.prose pre{break-inside:avoid}
  .prose a{color:inherit}
  .author-box{break-inside:avoid}
}
.article-body{padding-block:44px 72px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:64px;align-items:start}
@media (max-width:980px){.article-body{grid-template-columns:1fr;gap:32px}}
.prose{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--fg);max-width:68ch}
.prose>*+*{margin-top:1.15em}
.prose h2{font-family:var(--sans);font-size:clamp(24px,2.2vw,29px);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin-top:2.2em;text-wrap:balance}
.prose h3{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.3;margin-top:1.8em}
.prose h4{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;margin-top:1.5em}
.prose p{text-wrap:pretty}
.prose ul,.prose ol{padding-left:1.35em}
.prose li{margin-top:.45em}
.prose li>ul,.prose li>ol{margin-top:.35em}
.prose blockquote{border-left:3px solid var(--brand);padding:6px 0 6px 22px;font-style:italic;color:var(--fg-2);font-size:1.05em}
.prose strong{font-weight:600}
.prose code{font-family:var(--mono);font-size:.78em;background:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-style:normal}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:2.2em}
.prose a{text-decoration:underline;text-decoration-color:var(--brand-line);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--brand)}
.prose .tablewrap{margin-top:1.3em}
.prose table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums}
.prose thead:not(:has(th:not(:empty))){display:none}
.prose th{text-align:left;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);padding:10px 12px;background:var(--subtle);border-bottom:1px solid var(--line);vertical-align:bottom}
.prose td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--fg-2)}
.prose td:first-child{color:var(--fg);font-weight:500}
.prose .formula{font-family:var(--mono);font-size:.8em;background:var(--subtle);border:1px solid var(--line);border-radius:10px;padding:14px 18px;overflow-x:auto;font-style:normal;line-height:1.7}
.prose .callout{font-family:var(--sans);font-size:15.5px;line-height:1.55;background:var(--brand-tint);border:1px solid var(--brand-line);border-radius:12px;padding:18px 20px;color:var(--fg)}
.prose .callout b{font-weight:600}
.prose .note{font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--fg-3);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.prose .note code{color:var(--fg-2)}
.prose .kicker{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-deep);margin-top:2.6em}
.prose .kicker + h2{margin-top:.4em}
.aside{position:sticky;top:84px;display:flex;flex-direction:column;gap:18px}
.aside .box{border:1px solid var(--line);border-radius:12px;padding:18px 18px;font-size:13.5px;color:var(--fg-2);line-height:1.5;background:#fff}
.aside .box b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:10px}
.aside .box p{margin:0}
.aside .toc{list-style:none;display:flex;flex-direction:column;gap:6px}
.aside .toc a{display:block;color:var(--fg-2);font-size:13.5px;line-height:1.4}
.aside .toc a:hover{color:var(--fg)}
.aside .box.brand{background:var(--brand-tint);border-color:var(--brand-line);color:var(--fg)}
.aside .box.brand .btn{margin-top:14px}
.article-next{border-top:1px solid var(--line);padding-block:40px}
.article-next .posts{margin-top:20px}


/* ---------- AI assistant demo panel (the one section that changed on desktop) ---------- */
.ai-frame{background:var(--bg)}
.ai-stage{position:relative;overflow:hidden;background:var(--bg);padding:26px 22px 40px;min-height:560px;display:flex;flex-direction:column;justify-content:center}
.ai-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0;filter:blur(2.5px);transform:scale(1.02)}
.ai-stage::before{content:"";position:absolute;inset:0;background:rgba(10,10,12,.34)}
.ai-modal{position:relative;z-index:1;width:min(560px,100%);margin:0 auto;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;text-align:left;color:var(--fg)}
.ai-head{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;border-bottom:1px solid var(--line)}
.ai-head .iconbox{width:28px;height:28px;border-radius:8px}
.ai-head .iconbox svg{width:14px;height:14px}
.ai-ttl{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.ai-ttl b{font-size:13px;font-weight:600}
.ai-ttl span{font-size:11px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-seg{padding:2px;border-radius:8px;gap:1px}
.ai-seg .o{padding:4px 9px;font-size:11.5px;border-radius:6px}
.ai-scope{font-size:11.5px;font-weight:500;color:var(--fg);border:1px solid var(--line);border-radius:7px;padding:5px 22px 5px 9px;position:relative;white-space:nowrap;background:#fff}
.ai-scope::after{content:"";position:absolute;right:8px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--fg-3);border-bottom:1.5px solid var(--fg-3);transform:translateY(-70%) rotate(45deg)}
.ai-thread{padding:14px 16px 4px;display:flex;flex-direction:column;gap:12px;font-size:13px;line-height:1.5;color:var(--fg)}
.msg.user{align-self:flex-end;max-width:88%;background:var(--fg);color:#fff;border-radius:12px 12px 4px 12px;padding:8px 12px;font-weight:500}
.msg.ai{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start}
.msg.ai .av{width:24px;height:24px;border-radius:7px;background:var(--brand);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;margin-top:1px}
.msg.ai .av svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msg.ai .body{min-width:0}
.msg.ai .body p{margin:0 0 8px}
.msg.ai .body p:last-child{margin-bottom:0}
.msg.ai .body b{font-weight:600}
.ai-table{overflow-x:auto;margin:2px 0 10px;border:1px solid var(--line);border-radius:9px}
.ai-table table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums;line-height:1.35}
.ai-table th{text-align:left;font-weight:500;color:var(--fg-3);font-size:11px;padding:6px 9px;background:var(--subtle);border-bottom:1px solid var(--line);white-space:nowrap}
.ai-table td{padding:6px 9px;border-bottom:1px solid var(--line-soft);white-space:nowrap;color:var(--fg)}
.ai-table tr:last-child td{border-bottom:0}
.ai-table td.r,.ai-table th.r{text-align:right}
.ai-table td.name{font-weight:500}
.ai-table tr.tot td{font-weight:600;background:var(--subtle)}
.ai-table .pos{color:var(--green)} .ai-table .neg{color:var(--red)}
.ai-src{font-size:11px;color:var(--fg-3);margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ai-src::before{content:"";width:12px;height:12px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14a9 3 0 0 0 18 0V5'/%3E%3Cpath d='M3 12a9 3 0 0 0 18 0'/%3E%3C/svg%3E") center/12px no-repeat}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ai-chips span{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line);font-size:11.5px;font-weight:500;color:var(--fg-2);background:#fff}
.ai-foot{padding:10px 14px 14px}
.ai-input{display:flex;align-items:center;gap:8px;height:38px;border:1px solid var(--line);border-radius:10px;padding:0 6px 0 12px;font-size:12.5px;color:var(--fg-4);background:#fff}
.ai-input .spark{width:15px;height:15px;color:var(--brand);flex-shrink:0}
.ai-input .send{margin-left:auto;width:26px;height:26px;border-radius:7px;background:var(--brand);border:1px solid var(--brand-ink);display:flex;align-items:center;justify-content:center;color:var(--brand-ink);flex-shrink:0}
.ai-input .send svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ai-typing{display:flex;align-items:center;gap:10px;color:var(--fg-3);font-size:12.5px;min-height:24px}
.ai-typing i{display:inline-flex;gap:4px}
.ai-typing i::before,.ai-typing i::after,.ai-typing i span{content:"";width:6px;height:6px;border-radius:50%;background:var(--fg-4);display:block;animation:aidot 1s infinite ease-in-out}
.ai-typing i::after{animation-delay:.15s}.ai-typing i span{animation-delay:.3s;order:1}
@keyframes aidot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
.msg.ai.in{animation:aiin .35s ease-out}
@keyframes aiin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.dark .ai-frame .tag.sample{z-index:2}

/* ---------- misc helpers ---------- */
.divider{height:1px;background:var(--line)}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}.mt56{margin-top:56px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.between{justify-content:space-between}
.center{text-align:center}
.maxw{max-width:760px}
.ev{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--fg-2);border:1px solid var(--line);border-radius:999px;height:26px;padding:0 10px;background:#fff;cursor:zoom-in}
.ev:hover{border-color:var(--fg);color:var(--fg)}
.ev svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dark .ev{background:var(--ink-2);border-color:var(--ink-line);color:var(--ink-fg)}
.dark .ev:hover{border-color:var(--brand)}
.wa-note{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:#e9f8ef;border:1px solid #bfe3cb;font-size:14px;color:#0f5a2e;line-height:1.45}
.wa-note b{font-size:26px;font-weight:700;letter-spacing:-.03em;color:#137a3f;line-height:1;font-variant-numeric:tabular-nums}
.wa-note .vs{font-size:12px;color:#2f6b47}
@media (max-width:760px),((pointer:coarse) and (max-height:500px)){:root{--sec:64px;--gutter:16px}.sec-head{margin-bottom:28px}}

/* Author box at the end of a journal article (build.py article_page). Sits inside .prose, so it resets to the UI face. */
.author-box{display:flex;gap:18px;align-items:flex-start;margin-top:48px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--bg);font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--fg-2)}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 12%;flex:none;border:1px solid var(--line)}
.author-box b{display:block;font-size:16px;color:var(--fg);letter-spacing:-.01em}
.author-box .rl{display:block;font-size:13px;color:var(--fg-3);margin-top:2px}
.author-box p{margin:10px 0 0;font-size:14px}
.author-box .links{display:flex;gap:10px;margin-top:10px;font-size:13.5px}
.author-box .links a{font-weight:600;text-decoration:none;color:var(--fg)}
.author-box .links a:hover{text-decoration:underline;text-decoration-color:var(--brand)}

/* =====================================================================
   Mobile composition. Everything in this file applies on phones: at 760px and
   below, and on touch screens under 500px tall (a phone held sideways), except
   the three min-width fixes at the top, which only stop grids from overflowing
   and have no visual effect on desktop. site.js uses the same query.
   ===================================================================== */
.m-only{display:none}

/* ---- overflow fixes at the existing tablet breakpoints (bug fixes only) ---- */
@media (max-width:980px){.article-body{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .split,.split.rev,.split.even,.ask{grid-template-columns:minmax(0,1fr)}
  .split>*,.ask>*,.article-body>*{min-width:0}
  .sticky-col{position:static!important}
}
@media (min-width:901px){.sticky-col{position:sticky;top:84px}}

@media (max-width:760px),((pointer:coarse) and (max-height:500px)){
  /* ---------- foundations ---------- */
  :root{--sec:48px;--gutter:16px}
  html,body{overflow-x:clip}
  .d-only{display:none!important}
  .m-only{display:block}
  span.m-only{display:inline}
  .sec-head{margin-bottom:22px;gap:10px}
  .display{font-size:34px;letter-spacing:-.03em;line-height:1.06}
  h1.h1{font-size:32px}
  .h2{font-size:26px;line-height:1.12}
  .h3{font-size:19px}
  .lede{font-size:16px;line-height:1.5}
  .small{font-size:14.5px}
  .cap{font-size:13px}
  .b2b{font-size:13px}
  .eyebrow{font-size:12px;letter-spacing:.12em}
  .tag{font-size:10.5px;height:21px;padding:0 7px}
  .pill{font-size:12px;height:24px}
  .kbd{font-size:11px}
  /* tap targets */
  .btn{height:44px;padding:0 18px;font-size:15px}
  .btn.sm{height:40px;padding:0 14px;font-size:14px}
  .btn.lg{height:48px}
  .nav-burger{width:44px;height:44px}
  .ev{height:38px;font-size:13.5px;padding:0 13px}
  .seg .o{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .qs button{min-height:46px;font-size:14.5px}
  .thumb .t{font-size:15px}
  .thumb .d{font-size:13.5px}

  /* ---------- nav ---------- */
  .nav-inner{height:56px}
  .nav .logo-link{padding:10px 0}
  .frame-bar>span:not(.end){min-width:0;overflow:hidden;text-overflow:ellipsis}
  .nav-panel.open{box-shadow:0 20px 40px -20px rgba(0,0,0,.25)}

  /* ---------- product frames on a phone ---------- */
  .frame{box-shadow:var(--shadow)}
  .frame-bar{height:34px}
  /* thumbnails show the whole screen in proportion; the viewer does the zooming */
  .shot.crop{aspect-ratio:16/9}
  .shot.crop img{position:static;width:100%;height:100%;max-width:100%;left:auto;top:auto;object-fit:cover}
  .shot .open{opacity:1;transform:none;height:36px;font-size:13px;padding:0 12px;right:10px;bottom:10px}
  .shot .sample{left:10px;bottom:10px}
  .frame.clickable{cursor:pointer}

  /* ---------- hero ---------- */
  .hero{padding-block:28px 24px}
  .hero-copy{gap:16px}
  .hero-copy .cta-row .btn{flex:1 1 auto}
  .hero-meta{font-size:13px;gap:4px 14px}
  .hero-visual{margin-top:8px;margin-bottom:0}
  .hero-visual .frame{box-shadow:var(--shadow-md)}
  .hero-visual .aibar.float,.hero-visual .float-card.tr{display:none}
  .hero-ground{display:none}
  .hero-note{margin-top:10px;font-size:13px;color:var(--fg-3);line-height:1.45}
  .hero-note b{color:var(--fg);font-weight:600}

  /* ---------- logos: one scrolling row ---------- */
  .section.tight{padding-block:26px}
  .logos{flex-wrap:nowrap;justify-content:flex-start;gap:30px;overflow-x:auto;padding:4px 26px 8px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
  .logos::-webkit-scrollbar{display:none}
  .logos img{height:22px;max-width:none;flex-shrink:0}
  .logos img.tall{height:34px}
  .logos .txt{flex-shrink:0;font-size:14px}

  /* ---------- rooms: switch and strip first, checklists collapsed ---------- */
  #rooms .wrap{display:flex;flex-direction:column}
  #rooms .sec-head{order:0}
  #rooms #explorer{order:1}
  #rooms .grid.g2{order:2;margin:14px 0 0!important;gap:10px}
  #rooms .cap{order:3}
  .explorer{border:0;box-shadow:none;background:transparent;overflow:visible;border-radius:0}
  .mx-head{display:flex;flex-direction:column;gap:10px}
  .mx-who{font-size:14px;color:var(--fg-2);display:flex;align-items:center;gap:8px}
  .mx-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 0 6px;margin:0 calc(-1 * var(--gutter));padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mx-strip::-webkit-scrollbar{display:none}
  .mx-card{flex:0 0 88%;max-width:380px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px}
  .mx-card .frame{cursor:pointer}
  .mx-card .t{font-size:15px;font-weight:600;letter-spacing:-.01em}
  .mx-card .n{font-family:var(--mono);font-size:11px;color:var(--fg-3)}
  .mx-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:6px}

  /* ---------- accordions ---------- */
  .acc>h3{display:block;margin:0;font-size:16.5px;line-height:1.3}
  .acc>h3 .acc-btn{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;min-height:44px;font:inherit;color:inherit;text-align:left}
  .acc>h3 .acc-btn:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:6px}
  .acc>h3 .acc-btn::after{content:"";width:18px;height:18px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/18px no-repeat;transition:transform .2s}
  .acc.open>h3 .acc-btn::after{transform:rotate(180deg)}
  .acc>.ac{display:none}
  .acc.open>.ac{display:block}
  .acc.open>.row.ac,.acc.open>.proof.ac,.acc.open>.cta-row.ac{display:flex}
  .acc.open>ul.ac{display:flex}
  .card.acc{padding:6px 18px}
  .card.acc.open{padding-bottom:18px}
  .card.acc>.k{padding-top:12px;margin-bottom:-6px}
  .card.acc>.iconbox{display:none}
  .card.acc>.row.between{padding-top:12px;margin-bottom:-4px}
  .engine{gap:10px}
  .engine p{font-size:14.5px}
  .grid.g3,.grid.g4{gap:10px}
  .feat{gap:10px}
  .feat p{font-size:14.5px}

  /* ---------- comparison: table stakes as a line, differences as cards ---------- */
  .compare{border:0;background:transparent;overflow:visible}
  .compare.tablewrap{overflow:visible}
  .compare table,.compare tbody{display:block;width:100%}
  .compare thead{display:none}
  .compare tr{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 12px;margin-bottom:10px;box-shadow:var(--shadow)}
  .compare tr.ts{display:none}
  .compare td{display:block;padding:0;border:0;width:auto!important;white-space:normal}
  .compare td:first-child{font-size:16px;font-weight:600;color:var(--fg);margin-bottom:8px}
  .compare td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:2px}
  .compare td.hi{background:transparent;padding-top:10px;color:var(--fg)}
  .compare td.hi[data-l]::before{color:var(--brand-deep)}
  .compare .n{color:var(--fg-2)}
  .compare.scoreboard tr{padding:14px 16px}
  .compare.scoreboard td:first-child{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-deep);margin-bottom:6px}
  .stakes{font-size:15px;line-height:1.55;color:var(--fg-2);background:var(--subtle);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
  .stakes b{color:var(--fg);font-weight:600}

  /* ---------- ask the data ---------- */
  .ask{gap:22px}

  /* ---------- onboarding deck: same pile, tighter cards, phone crops ---------- */
  .deck{--top:68px;--peek:10px;gap:18px}
  .deck-card{grid-template-columns:1fr;gap:16px;padding:20px 18px;border-radius:18px}
  .deck-card h3{font-size:22px;margin-top:10px}
  .deck-card p{font-size:15px}
  .deck-card .desk,.deck-card .after{display:none}
  .deck-card .chips{margin-top:0}
  .kyc-mock{aspect-ratio:auto;padding:42px 5% 14px}
  .wa-wrap{width:100%}
  .wa-body{min-height:300px}

  /* ---------- AI panel ---------- */
  .ai-stage{padding:14px 10px 34px;min-height:0;display:block}
  .ai-modal{width:100%}
  .ai-head{padding:10px 10px 10px 12px;gap:8px}
  .ai-seg{display:none}
  .ai-thread{padding:12px 12px 4px;font-size:13.5px}
  .ai-table table{font-size:12.5px}
  .ai-chips span{height:32px;font-size:12.5px}
  .ai-src{font-size:11.5px}
  .ask .row .ev{margin-top:0}

  /* ---------- tracking ---------- */
  .thread{gap:12px;margin-top:22px!important}
  .thread .col{gap:6px}
  .thread .src,.thread .roll{height:32px;font-size:12.5px}
  .record{padding:14px 14px 12px}
  .record .ctx{gap:8px;margin-bottom:14px}
  .record .ctx .k{font-size:10.5px}
  .record .ctx .v{white-space:normal;font-size:11.5px;line-height:1.35}
  .record .ft{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:12.5px}
  .timeline .node span{display:none}
  .timeline .node:first-child span,.timeline .node:last-child span{display:block}
  .cohort td:nth-child(3),.cohort th:nth-child(3){display:none}
  .cohort tbody tr:last-child{display:none}
  .cohort td,.cohort th{white-space:normal;padding:9px 8px}
  .cohort td:first-child{padding-left:12px}
  .cohort td:last-child,.cohort th:last-child{padding-right:12px}
  .check .row{padding:14px 14px}
  .check .q{font-size:15px}
  .numlist li{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:16px 0}
  .numlist h3{font-size:17px}
  .numlist p{font-size:15px}

  /* ---------- about ---------- */
  .milestones>div{padding:16px 18px}
  .sticky-col{display:flex;flex-direction:column}
  .sticky-col .portrait{order:-1;margin:0 0 18px;max-width:160px;aspect-ratio:1}
  .letter{font-size:18px}
  .letter .lead{font-size:1.25em}
  .team{display:block}
  .team .group-label{padding:22px 0 8px;border-top:1px solid var(--line)}
  .team .group-label:first-child{border-top:0;padding-top:0}
  .team .group-label+.person{border-top:0;padding-top:0}
  .person{display:grid;grid-template-columns:84px minmax(0,1fr);gap:4px 14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
  .person:first-child{border-top:0;padding-top:0}
  .person .ph{aspect-ratio:1;border-radius:12px;grid-row:1/3}
  .person .nm{font-size:16px}
  .person>p{grid-column:1/-1;display:none;margin-top:6px;font-size:14.5px}
  .person.open>p{display:block}
  .person .bio-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:13.5px;font-weight:500;color:var(--fg);padding:0;margin-top:2px}
  .person .bio-btn::after{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .2s}
  .person.open .bio-btn::after{transform:rotate(180deg)}
  .grid.g2.nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid.g2.nums .card.pad{padding:16px 16px}
  .grid.g2.nums .h2{font-size:26px}
  .grid.g2.nums .small{font-size:13px}

  /* ---------- journal and articles ---------- */
  .post{padding:20px 18px}
  .post.feature{gap:18px}
  .post .meta{flex-wrap:wrap;row-gap:4px}
  .article-head .meta .sep,.post .meta .sep{display:none}
  .author-box{padding:18px;gap:14px;margin-top:36px}
  .author-box img{width:56px;height:56px}
  .article-head{padding-block:32px 24px}
  .article-head h1{font-size:34px}
  .article-head .standfirst{font-size:18px}
  .article-body{padding-block:24px 48px;gap:20px}
  .aside{display:contents}
  .aside .box.toc-box{order:-1}
  .aside .box.brand{order:2}
  .aside .box.toc-box b{display:flex;justify-content:space-between;align-items:center;margin:0;cursor:pointer;min-height:40px;font-size:12px}
  .aside .box.toc-box b::after{content:"";width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .2s}
  .aside .box.toc-box.open b::after{transform:rotate(180deg)}
  .aside .box.toc-box .toc{display:none;margin-top:10px}
  .aside .box.toc-box.open .toc{display:flex}
  .aside .toc a{padding:6px 0;font-size:14.5px}
  .prose{font-size:18px;line-height:1.55;order:1}
  .prose h2{font-size:24px}
  .prose h3{font-size:19px}
  .prose .formula{font-size:12.5px;padding:12px 14px}
  .prose table{font-size:13px}
  .prose th,.prose td{padding:8px 10px}
  .prose td:first-child,.prose th:first-child{position:sticky;left:0;background:#fff;box-shadow:1px 0 0 var(--line)}
  .prose th:first-child{background:var(--subtle)}
  .prose .callout,.prose .note{font-size:14.5px;padding:14px 16px}
  .prose code{font-size:.82em}
  .tablewrap.scrolls{-webkit-mask-image:linear-gradient(to right,#000 92%,transparent);mask-image:linear-gradient(to right,#000 92%,transparent)}
  .swipe-hint{font-family:var(--sans);font-size:12px;color:var(--fg-3);margin-top:6px;display:flex;align-items:center;gap:6px}

  /* ---------- panels and forms ---------- */
  .cta-panel{padding:26px 18px;border-radius:16px;gap:22px}
  .cta-panel .kv{gap:8px;margin-top:14px}
  .form{gap:12px}
  .form-done{padding:18px 16px}
  .route{padding:10px 12px 10px 10px;gap:10px}
  .route .ri{width:32px;height:32px}
  /* the banner on a phone: a heading line, the notice in small grey text, the links as a
     row of their own, two equal buttons and a quiet Manage. Same words as the desktop. */
  .consent{padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -16px 40px -16px rgba(0,0,0,.28);max-height:min(78vh,560px);overflow:auto}
  .consent-inner{gap:10px 0}
  .consent-text{flex-basis:100%;font-size:12.5px;line-height:1.45;color:var(--fg-3)}
  .consent-text b{display:block;font-size:14.5px;line-height:1.3;color:var(--fg);padding-bottom:5px}
  .consent-links{display:flex;flex-wrap:wrap;gap:0 14px;padding-top:4px}
  .consent-links .sep{display:none}
  .consent-links a{display:inline-block;padding:5px 0;font-size:12.5px;color:var(--fg-2)}
  .consent-btns{width:100%;gap:8px}
  .consent-btns .btn{flex:1 1 40%;height:42px;font-size:14.5px}
  .consent-btns .btn.ghost{flex-basis:100%;height:36px;font-size:13.5px;color:var(--fg-3)}
  .consent-opts{gap:8px}
  .consent-opts label{font-size:13px}
  .field input,.field select,.field textarea{height:46px;font-size:16px}
  .field textarea{min-height:88px}
  .card.pad{padding:18px 18px}

  /* ---------- footer: one aligned column structure ----------
     The brand block full width (wordmark, one line, the two contacts), then Product and
     Company side by side, then the legal block with the policy links first. The journal
     titles and the sample-data note are desktop-only (d-only); the one-line description
     is phone-only (m-only). Every block starts on the same left edge. */
  .footer{padding-block:36px 28px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px 16px}
  .footer-grid>div:first-child{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:26px;border-bottom:1px solid var(--line)}
  .footer-grid>div:first-child>*{margin:0}
  .footer .logo-link img.wordmark{height:20px}
  .footer .small{font-size:15px;line-height:1.5;color:var(--fg-2);max-width:none!important}
  .foot-contact{gap:2px;font-size:15px}
  .foot-contact a{display:block;padding:5px 0;color:var(--fg);font-weight:500}
  .footer .fh{font-size:11.5px;margin-bottom:6px}
  .footer ul{gap:0}
  .footer li a{display:block;padding:8px 0;font-size:15px;color:var(--fg-2)}
  .footer .bottom{margin-top:26px;padding-top:20px;flex-direction:column;align-items:flex-start;gap:12px;font-size:12px;line-height:1.55}
  .footer .bottom span:nth-child(2){order:-1;font-size:14px}
  .footer .bottom span:nth-child(2) a{display:inline-block;padding:7px 0;color:var(--fg-2);font-weight:500}
}

/* ---------- touch screen viewer ----------
   Scoped to dialog.pop.touch, which site.js sets when it builds the viewer for a touch screen,
   rather than to the 760px query: a phone turned sideways is wider than the breakpoint but must
   keep the touch viewer. Gestures (swipe, pinch, pull to close) are in site.js; touch-action
   tells the browser which of them to leave to the script. ---------- */
dialog.pop.touch{width:100vw;height:100vh;height:100dvh}
dialog.pop.touch .pop-inner{padding:0;display:block}
dialog.pop.touch .pop-box{position:absolute;inset:0;border-radius:0;max-width:none;max-height:none;display:flex;flex-direction:column;background:#fff;transition:transform .2s;touch-action:none;overscroll-behavior:contain}
dialog.pop.touch .pop-head{height:auto;min-height:52px;padding:6px 8px 6px 14px;gap:8px;flex-wrap:wrap}
dialog.pop.touch .pop-head b{font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog.pop.touch .pop-head .s,dialog.pop.touch .pop-head .tag.sample{display:none}
dialog.pop.touch .pop-head .end{gap:4px}
dialog.pop.touch .pop-head #pop-prev,dialog.pop.touch .pop-head #pop-next{display:none}
dialog.pop.touch .pop-head .ib{width:44px;height:44px}
dialog.pop.touch .pop-head #pop-fit{display:none}
dialog.pop.touch .pop-zoom{display:inline-flex;background:var(--muted);border-radius:9px;padding:3px;gap:2px;margin-right:2px}
dialog.pop.touch .pop-zoom button{min-height:34px;padding:0 11px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--fg-3)}
dialog.pop.touch .pop-zoom button.on{background:#fff;color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
dialog.pop.touch .pop-stage{flex:1;width:auto!important;height:auto!important;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--bg);display:block;overscroll-behavior:contain;touch-action:pan-x pan-y}
dialog.pop.touch .pop-stage img{position:static;width:1440px;height:auto;max-width:none;display:block;object-fit:unset;cursor:zoom-out}
dialog.pop.touch .pop-stage.fit{display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
dialog.pop.touch .pop-stage.fit img{width:100%;cursor:zoom-in;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
dialog.pop.touch .pop-stage iframe{display:none}
dialog.pop.touch .pop-foot{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px 14px 12px;font-size:13.5px}
dialog.pop.touch .pop-foot p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
dialog.pop.touch .pop-foot .tag{align-self:flex-start}
dialog.pop.touch .pop-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
dialog.pop.touch .pop-nav .btn{height:42px;padding:0 16px}
dialog.pop.touch .pop-nav .cnt{font-family:var(--mono);font-size:12.5px;color:var(--fg-3)}
dialog.pop.touch .pop-foot .pop-hint{font-size:12px;color:var(--fg-3);display:flex;align-items:center;gap:6px}
dialog.pop.touch .pop-foot .pop-hint::before{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='10' rx='2'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E") center/14px no-repeat}
/* sideways: the screen fills the width and scrolls; the caption and buttons give way to it */
@media (orientation:landscape){
  dialog.pop.touch .pop-foot{display:none}
  dialog.pop.touch .pop-stage.fit{overflow:auto;align-items:flex-start;touch-action:pan-y}
}