/* Tabnii landing page.
   Layout: full-bleed photo hero with the app on her phone, then white editorial bands that alternate text and live app
   fragments, one dark band of questions, a full-bleed field photo, and a footer card that lifts out of a pale ground.
   One live mark (the Tabnii button) travels the page and changes state at each stop.
   Type: IBM Plex Sans 400/500 only, the app's own face. App fragments use the app's Day tokens. */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/IBMPlexSans-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/IBMPlexSans-Medium.woff2") format("woff2")}

:root{
  /* page */
  --paper:#FFFFFF;
  --mist:#F3F3F7;
  --ink:#1B1A26;
  --ink-2:#4A4D54;
  --ink-3:#9A9CA6;
  --line:#E4E3EA;
  /* the film's night */
  --navy:#0A091A;
  --navy-2:#13132A;
  --navy-ink:#ECEAF6;
  --navy-ink-2:#B3B0CF;
  --navy-line:rgba(236,234,246,.14);
  /* the logo's gradient, day and night */
  --c1:#0B93A8;
  --c2:#6C4FF2;
  --c1n:#38D6E8;
  --c2n:#9C88FF;
  --tint-cyan:#DDF1F4;
  --tint-violet:#E7E3FD;
  /* the app, Day */
  --a-ground:#EFEBE3;
  --a-surface:#FFFFFF;
  --a-line:#E1DCD2;
  --a-keyfill:#EFEBE3;
  --a-attn:#F0BE62;
  --a-positive:#165C37;
  --a-alert:#8A2F25;
  --a-display:#1D1B31;
  --a-display-edge:#3B3963;
  --a-display-ink:#F3F1EA;
  --a-display-ink2:#B9B6CC;
  --a-rec:#E0503F;
  --flag:#F7E2DD;

  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --e:cubic-bezier(.2,.75,.15,1);
  --e2:cubic-bezier(.65,0,.35,1);
  --nar:64px;
  --gut:max(clamp(16px,4vw,56px),env(safe-area-inset-left,0px));
  --gut-r:max(clamp(16px,4vw,56px),env(safe-area-inset-right,0px));
  color-scheme:light;
}

[hidden]{display:none!important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
html.rm{scroll-behavior:auto}
body{margin:0;position:relative;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--navy)}
img{max-width:100%;display:block}
a{color:inherit}
p,h1,h2,h3,h4,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:6px}

.wrap{max-width:1320px;margin-inline:auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.sec{padding-block:clamp(88px,11vw,156px)}

/* ---------- type ---------- */
.h1{font-size:clamp(40px,4.6vw,66px);line-height:1.02;letter-spacing:-.035em;font-weight:500;text-wrap:balance}
.h2{font-size:clamp(34px,4.1vw,62px);line-height:1.04;letter-spacing:-.03em;font-weight:500;text-wrap:balance;max-width:14em}
.lede{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--ink-2);max-width:34em;text-wrap:pretty}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 13px;border-radius:999px;background:rgba(16,14,36,.32);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:14.5px;line-height:20px;font-weight:500;color:#fff}
.eb-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--c1n),var(--c2n))}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font:500 16.5px/1 var(--font);text-decoration:none;white-space:nowrap;transition:transform .25s var(--e),background-color .25s,box-shadow .25s}
.btn .ic{width:20px;height:20px;transition:transform .3s var(--e)}
.btn:hover .ic{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:42px;padding:0 18px;font-size:15px}
.btn-lg{min-height:60px;padding:0 30px;font-size:18px}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#F1F0F6}
.btn-glass{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-glass:hover{background:rgba(255,255,255,.2)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#2D2C3D}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:50;top:env(safe-area-inset-top,0px);left:0;right:0;color:#fff;transition:color .35s}
.nav::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 var(--line);opacity:0;transition:opacity .35s}
.nav-in{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px;max-width:1320px;margin-inline:auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.nav-links{justify-self:start;display:flex;gap:2px;padding:5px;border-radius:999px;background:rgba(16,14,36,.32);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background .35s,box-shadow .35s}
.nav-links a{padding:9px 15px;border-radius:999px;font-size:15px;line-height:18px;font-weight:500;text-decoration:none;transition:background .2s}
.nav-links a:hover{background:rgba(255,255,255,.14)}
.nav-logo{justify-self:center;display:block;color:inherit}
.nav-logo svg{display:block;width:112px;height:auto}
.nav-cta{justify-self:end;display:flex;align-items:center;gap:8px}
.nav-menu,.mm-x{all:unset;box-sizing:border-box;width:42px;height:42px;border-radius:50%;place-items:center;cursor:pointer;transition:background-color .2s ease}
.nav-menu{display:none;background:rgba(16,14,36,.32);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff}
.nav-menu .ic,.mm-x .ic{width:20px;height:20px}
.nav-menu:focus-visible,.mm-x:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.nav.solid .nav-menu{background:var(--mist);box-shadow:none;color:var(--ink)}

/* the menu on phones: the film's night, the pages in large type, Apply at hand; the mark comes along */
.mmenu{position:fixed;inset:0;z-index:88}
.mm-panel{position:absolute;inset:0;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;background:var(--navy);color:var(--navy-ink);padding-top:env(safe-area-inset-top,0px);clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--e)}
.mmenu.open .mm-panel{clip-path:inset(0 0 0 0)}
.mm-panel::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(156,136,255,.14) 1.1px,transparent 1.6px);background-size:16px 16px;-webkit-mask-image:radial-gradient(90% 60% at 100% 0%,#000 0%,transparent 75%);mask-image:radial-gradient(90% 60% at 100% 0%,#000 0%,transparent 75%);pointer-events:none}
.mm-panel>*{position:relative}
.mm-head{display:flex;align-items:center;justify-content:space-between;height:64px;padding-left:var(--gut);padding-right:var(--gut-r)}
.mm-head .nav-logo svg{width:112px;color:var(--navy-ink)}
.mm-x{display:grid;background:rgba(236,234,246,.08);color:var(--navy-ink)}
.mm-x:hover{background:rgba(236,234,246,.14)}
.mm-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:24px var(--gut-r) 24px var(--gut)}
.mm-links{display:grid;gap:2px}
.mm-links a{display:flex;align-items:center;gap:14px;padding:6px 0;font-size:clamp(34px,9.5vw,46px);line-height:1.15;font-weight:500;letter-spacing:-.03em;color:var(--navy-ink);text-decoration:none}
.mm-links a[aria-current="page"]::after{content:"";width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--c1n),var(--c2n))}
.mm-links a:focus-visible{outline:2px solid var(--c1n);outline-offset:4px;border-radius:6px}
.mm-foot{display:grid;gap:14px;padding:0 var(--gut-r) calc(28px + env(safe-area-inset-bottom,0px)) var(--gut)}
.mm-foot .btn{width:100%}
.mm-foot p{font-size:14.5px;line-height:20px;color:var(--navy-ink-2)}
html.js:not(.rm) .mm-links a,html.js:not(.rm) .mm-foot>*{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .7s var(--e);transition-delay:calc(.18s + var(--k,0) * 60ms)}
html.js:not(.rm) .mmenu.open .mm-links a,html.js:not(.rm) .mmenu.open .mm-foot>*{opacity:1;transform:none}
html.rm .mm-panel{transition:none}
.nav.solid{color:var(--ink)}
.nav.solid::before{opacity:1}
.nav.solid .nav-links{background:var(--mist);box-shadow:none}
.nav.solid .nav-links a:hover{background:#E8E7EF}
.nav.solid .btn-light{background:var(--ink);color:#fff}

/* ---------- the travelling mark ---------- */
.narrator{position:absolute;left:0;top:0;width:var(--nar);height:var(--nar);z-index:45;pointer-events:none;opacity:0;transition:opacity .6s ease;will-change:transform}
.narrator.on{opacity:1}
.narrator canvas{position:relative;width:var(--nar);height:var(--nar);display:block}
.narrator::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#2B2950 0,var(--a-display) 24.7px,var(--a-display) 30.6px,var(--a-display-edge) 31px 31.8px,transparent 32.2px);opacity:0;transition:opacity .5s}
.narrator.dark::before{opacity:1}
.mk-spot{display:block;flex:none;width:var(--nar);height:var(--nar);position:relative}
.mk-still{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);fill:url(#g-brand)}
html.js .mk-still{display:none}
.ld-band .mk-still{fill:url(#g-brand-n)}
.mk-center{margin:0 auto 26px}

/* ---------- hero ---------- */
.hero{position:relative;height:clamp(660px,100svh,980px);overflow:hidden;background:var(--navy);color:#fff}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform:scale(1.07);transition:transform 2.8s var(--e)}
.hero.in .hero-media img,html.rm .hero-media img,html:not(.js) .hero-media img{transform:none}
.hero-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,9,26,.74) 0%,rgba(10,9,26,.42) 34%,rgba(10,9,26,0) 58%),
  linear-gradient(0deg,rgba(10,9,26,.62) 0%,rgba(10,9,26,0) 46%),
  linear-gradient(180deg,rgba(10,9,26,.42) 0%,rgba(10,9,26,0) 20%)}
.hero-in{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px;padding-bottom:clamp(40px,6vh,72px)}
.hero-copy{max-width:900px;min-width:0;display:grid;gap:22px;justify-items:start}
.hero .h1{text-shadow:0 2px 30px rgba(10,9,26,.25)}
.hero-sub{font-size:clamp(17px,1.4vw,19.5px);line-height:1.5;color:rgba(255,255,255,.86);max-width:32em}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
html.js:not(.rm) [data-hero]{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform 1s var(--e)}
html.js:not(.rm) .hero.in [data-hero]{opacity:1;transform:none}
.hero.in [data-hero="1"]{transition-delay:.1s}
.hero.in [data-hero="2"]{transition-delay:.85s}
.hero.in [data-hero="3"]{transition-delay:1.05s}

/* the app on her phone: the Stage after one spoken request (Day) */
.hcard-slot{align-self:end}
.hcard{width:336px;background:var(--a-ground);color:var(--ink);border-radius:26px;box-shadow:0 40px 90px -30px rgba(5,4,16,.75),0 0 0 1px rgba(255,255,255,.06);overflow:hidden;font-size:15px;line-height:21px;transform-origin:0 0}
.hc-ctx{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 6px 18px}
.pill{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15px}
.pill .pdot{width:7px;height:7px;border-radius:50%;background:var(--ink-2)}
.pill .ic{width:16px;height:16px;color:var(--ink-2)}
.me{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--a-surface);font-size:12.5px;font-weight:500}
.hc-body{padding:4px 18px 0;min-height:272px}
.said{font-size:14.5px;line-height:21px;color:var(--ink-2);margin-bottom:8px}
.rows .row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:50px;padding:6px 0;border-top:1px solid var(--a-line)}
.rmain{display:grid;min-width:0}
.rt{font-weight:500;font-size:14.5px;line-height:19px}
.rp{font-size:12.5px;line-height:16px;color:var(--ink-2)}
.rs{display:flex;align-items:center;gap:7px;font-size:14.5px;color:var(--ink-2);white-space:nowrap}
.st-working .rs{color:var(--ink);font-weight:500}
.st-done .rs{color:var(--a-positive);font-weight:500}
.st-done .rs .ic{width:17px;height:17px}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--ink);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.hc-dock{display:grid;grid-template-columns:1fr 76px 1fr;align-items:center;padding:6px 18px 12px}
.dk{display:grid;justify-items:center;gap:3px;font-size:13.5px;line-height:18px;font-weight:500}
.dk .ic{width:22px;height:22px}
.hc-dock .mk-spot{justify-self:center}
.mstatus{grid-column:1/-1;text-align:center;font-size:12.5px;line-height:16px;color:var(--ink-2);min-height:16px;margin-top:2px;transition:opacity .3s ease}
html.js .hc-dock:not(:has(.here)) .mstatus{opacity:0}

/* the inspection report: a document answer on the Stage, opened in the page viewer, then closed */
.hc-top{position:relative;overflow:hidden}
.hc-doc{display:none;background:var(--a-surface);border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--ink);padding:12px 14px 12px;margin-bottom:8px;transition:transform .15s ease}
.hc-doc .meta{font-size:12.5px;line-height:17px}
.hc-doc .docrow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:8px}
.hc-doc .thumb{width:34px;height:44px;border-radius:3px;background:var(--a-surface);box-shadow:inset 0 0 0 1px var(--a-line);display:flex;flex-direction:column;gap:4px;padding:9px 6px}
.hc-doc .thumb i{height:2px;border-radius:2px;background:#D9D4CA}
.hc-doc .thumb i:nth-child(2){width:70%}
.hc-doc .dt b{display:block;font-size:15.5px;line-height:20px;font-weight:500}
.hc-doc .dt span{font-size:12.5px;line-height:16px;color:var(--ink-2)}
.hc-doc .ic{width:18px;height:18px}
.hc-doc.press{transform:scale(.975)}
.hcard.doc-pre .hc-said,.hcard.doc-pre .r4{opacity:0}
.hcard.doc .hc-said,.hcard.doc .r4{display:none}
.hcard.doc .hc-doc{display:block;animation:docin .7s var(--e) both}
@keyframes docin{from{opacity:0;transform:translateY(8px) scale(.98);filter:blur(6px)}}
html.rm .hcard.doc .hc-doc{animation:none}
.hc-viewer{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;gap:10px;padding:12px 12px 10px;background:#121116;color:#F2F1F6;transform:translateY(102%);transition:transform .6s var(--e);pointer-events:none}
.hcard.view .hc-viewer{transform:none}
html.rm .hc-viewer{transition:none}
.vw-head{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;padding:2px 4px;font-size:13.5px;line-height:18px;font-weight:500;white-space:nowrap}
.vw-head .ic{width:18px;height:18px;transition:opacity .15s}
.hcard.x-press .vw-x{opacity:.4}
.vw-n{font-weight:400;color:#AEADB8}
.vw-page{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:7px;padding:14px;border-radius:6px;background:#FFFFFF;color:#17181B;font-size:12px;line-height:17px}
.vw-page>b{font-size:13px;line-height:18px;font-weight:500}
.vw-meta{color:#6A6E75;font-size:11.5px;margin-top:-4px}
.vw-res{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--a-positive);font-weight:500;font-size:12.5px}
.vw-res .ic{width:15px;height:15px}
.vw-line{display:grid;grid-template-columns:14px minmax(0,1fr);gap:6px;color:#3E4148}
.vw-line b{font-weight:500;color:#17181B}
.vw-keys{display:grid;grid-template-columns:1fr 1.5fr;gap:8px}
.vk{display:flex;align-items:center;justify-content:center;gap:7px;height:40px;border-radius:10px;background:#26252F;font-size:13.5px;font-weight:500}
.vk .ic{width:16px;height:16px}
.vk.on{background:#F2F1F6;color:#17181B}

/* hero card choreography (JS sets the steps) */
html.js:not(.rm) .hcard:not(.go){visibility:hidden}
html.js:not(.rm) .hcard .hc-part,html.js:not(.rm) .hcard .hc-said,html.js:not(.rm) .hcard .row{transition:opacity .5s ease,transform .7s var(--e),filter .6s ease}
html.js:not(.rm) .hcard:not(.s1) .hc-part{opacity:0}
html.js:not(.rm) .hcard:not(.s2) .hc-said{opacity:0;filter:blur(8px);transform:translateY(6px)}
html.js:not(.rm) .hcard .row:not(.in){opacity:0;transform:translateY(10px)}

/* ---------- reveals ---------- */
html.js:not(.rm) .w{display:inline-block;opacity:.1;filter:blur(10px);transform:translateY(.14em);color:var(--faint,var(--ink-3));transition:opacity .9s ease,filter .9s ease,transform 1s var(--e),color 1.1s ease;transition-delay:calc(var(--i) * var(--st,55ms) + var(--d,0ms))}
html.js:not(.rm) .in .w,html.js:not(.rm) .w.in{opacity:1;filter:none;transform:none;color:inherit}
.hero{--faint:rgba(255,255,255,.4)}
.faq,.people,.foot{--faint:rgba(236,234,246,.35)}
html.js:not(.rm) [data-fade]{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform 1s var(--e);transition-delay:var(--d,.3s)}
html.js:not(.rm) [data-fade].in{opacity:1;transform:none}
html.js:not(.rm) [data-build]{opacity:0;transform:translateY(28px) scale(.965);transition:opacity .7s ease,transform 1.1s var(--e)}
html.js:not(.rm) [data-build].in{opacity:1;transform:none}
html.js:not(.rm) [data-build] .bi{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .8s var(--e);transition-delay:calc(.35s + var(--k,0) * 110ms)}
html.js:not(.rm) [data-build].in .bi{opacity:1;transform:none}
html.js:not(.rm) [data-stagger]>*{opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform 1s var(--e);transition-delay:calc(var(--k,0) * 120ms)}
html.js:not(.rm) [data-stagger].in>*{opacity:1;transform:none}

/* ---------- tools strip ---------- */
.strip{padding-top:56px;padding-bottom:8px;background:var(--paper)}
.strip .wrap{display:flex;justify-content:center}
.strip-pill{padding:9px 18px;border-radius:999px;background:var(--mist);font-size:14.5px;line-height:20px;color:var(--ink-2);text-align:center;text-wrap:balance}
.nw{white-space:nowrap}
.marquee{margin-top:30px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex;width:max-content;gap:56px;padding-inline:28px;animation:mq 46s linear infinite}
.mq-track li{display:inline-flex;align-items:center;gap:11px;font-size:19px;line-height:24px;font-weight:500;color:#6E7079;white-space:nowrap}
.mq-track .ic{width:24px;height:24px;color:#8B8D96}
@keyframes mq{to{transform:translateX(-50%)}}
html.rm .mq-track{animation:none}

/* ---------- problem ---------- */
.problem-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(40px,6vw,96px);align-items:start}
.problem-copy{display:grid;gap:26px;justify-items:start;min-width:0}
.problem-copy .mk-spot{margin-bottom:-4px}
.pains{display:grid;gap:20px;margin-top:8px}
.pains li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.pi{width:44px;height:44px;border-radius:50%;background:var(--mist);display:grid;place-items:center}
.pi .ic{width:20px;height:20px;color:var(--ink)}
.pains li>span:last-child{font-size:16px;line-height:24px;color:var(--ink-2)}
.pains b{display:block;font-weight:500;font-size:17px;line-height:24px;color:var(--ink)}
.problem-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end;min-width:0}
.pcard{border-radius:24px;position:relative;overflow:hidden;min-width:0}
.pcard-a{background:var(--mist);padding:24px 22px 22px;margin-top:120px}
.pcard-a h3{font-size:20px;line-height:26px;font-weight:500;letter-spacing:-.01em}
.vers{margin-top:16px}
.vers li{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--line)}
.vers .sys{font-size:13.5px;line-height:18px;color:var(--ink-2);font-weight:500}
.vers .val{font-size:15.5px;line-height:22px}
.vers mark{background:transparent;color:inherit;border-radius:4px;padding:0 3px;margin:0 -3px;transition:background-color .6s ease,color .6s ease}
.pcard-a.flag mark{background:var(--flag);color:var(--a-alert)}
.pcard-a.flag mark:nth-of-type(2){transition-delay:.15s}
.pq{margin-top:12px;font-size:15px;line-height:22px;color:var(--ink-2)}
.pcard-b{height:clamp(420px,38vw,520px);background:var(--navy);color:#fff}
.pcard-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pcard-b::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,26,.82) 0%,rgba(10,9,26,0) 55%)}
.pcb-text{position:absolute;left:22px;right:22px;bottom:22px;z-index:1}
.pcb-text h3{font-size:22px;line-height:28px;font-weight:500;letter-spacing:-.01em}
.pcb-text p{margin-top:4px;font-size:15.5px;line-height:22px;color:rgba(255,255,255,.82)}

/* ---------- layer ---------- */
.layer{background:linear-gradient(180deg,var(--paper) 0%,#F7F7FB 100%)}
.statement{font-size:clamp(32px,4.4vw,66px);line-height:1.06;letter-spacing:-.032em;font-weight:500;text-align:center;max-width:15em;margin-inline:auto;text-wrap:balance}
.statement-sub{margin:26px auto 0;text-align:center;font-size:clamp(17px,1.4vw,19.5px);line-height:1.55;color:var(--ink-2);max-width:36em;text-wrap:pretty}
.ldiag{position:relative;max-width:1060px;margin:clamp(56px,7vw,96px) auto 0;display:grid;gap:clamp(48px,6vw,76px)}
.ld-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ld-lines path{fill:none;stroke:var(--flow,#6C4FF2);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:0 9;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-9}}
html.rm .ld-lines path{animation:none}
.ld-row{position:relative;z-index:1;display:grid;justify-items:center;gap:14px}
.ld-lab{font-size:14px;line-height:18px;font-weight:500;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chips li{padding:11px 18px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 6px 18px -12px rgba(27,26,38,.25);font-size:15.5px;line-height:20px;font-weight:500}
.ld-band{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:14px 30px;border-radius:999px;background:var(--navy);color:var(--navy-ink);box-shadow:0 30px 60px -30px rgba(10,9,26,.55),inset 0 0 0 1px rgba(156,136,255,.22)}
.ld-name{font-size:18px;line-height:24px;font-weight:500}
.ld-rule{justify-self:end;text-align:right;font-size:15.5px;line-height:22px;color:var(--navy-ink-2)}

/* ---------- how it works ---------- */
.how-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:end;margin-bottom:clamp(40px,4.5vw,64px)}
.how-head .lede{justify-self:end}
.how-title{display:grid;gap:22px;justify-items:start;min-width:0}
.bento{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.22fr);gap:16px;align-items:stretch}
.bcard{position:relative;overflow:hidden;border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:18px;min-height:560px;min-width:0}
.bt{font-size:24px;line-height:29px;font-weight:500;letter-spacing:-.02em}
.b1{background:radial-gradient(120% 70% at 0% 0%,#BEE9EF 0%,var(--tint-cyan) 42%,#F1F9FA 100%)}
.b2{background:radial-gradient(120% 70% at 100% 0%,#D3CAFC 0%,var(--tint-violet) 45%,#F5F3FE 100%)}
.asks{margin-inline:-24px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.asks-track{display:flex;width:max-content;gap:8px;padding-inline:24px;animation:mq 26s linear infinite}
.asks-track li{padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.88);font-size:14.5px;line-height:18px;font-weight:500;white-space:nowrap}
.asks-track li.on{background:var(--ink);color:#fff}
html.rm .asks-track{animation:none}
/* app cards: the Stage's latest card carries the 1.5 ink edge, as in the app */
.acard,.ccard,.rcard{background:var(--a-surface);border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--ink),0 24px 50px -28px rgba(27,26,38,.4);color:var(--ink)}
.acard{padding:18px 18px 16px;margin-top:auto}
.meta{font-size:13.5px;line-height:19px;color:var(--ink-2)}
.acard h4,.rcard h4{margin-top:6px;font-size:20px;line-height:26px;font-weight:500}
.alist{margin-top:12px}
.alist li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:11px 0;border-top:1px solid var(--a-line);font-size:15px;line-height:21px}
.alist .k,.alist .n{font-size:13.5px;line-height:19px;color:var(--ink-2)}
.alist .n{text-align:right;white-space:nowrap}
.alist .n.alert{color:var(--a-alert);font-weight:500;display:grid;justify-items:end}
.alist .n em{font-style:normal;font-weight:400}
.olink{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:10px 14px;border-radius:10px;background:var(--a-keyfill);font-size:15px;line-height:20px;font-weight:500}
.olink .ic{width:16px;height:16px}
.b2-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.b2-head .mk-spot{margin:-10px -6px 0 0}
.b2-said{font-size:16px;line-height:1.45;color:var(--ink-2);max-width:21em;margin-top:-6px}
.wstack{display:grid;margin-top:auto}
.wstack>*{grid-area:1/1}
.ccard{overflow:hidden;transition:opacity .45s ease,transform .6s var(--e),filter .45s ease}
.band{min-height:46px;padding:0 18px;display:flex;align-items:center;background:var(--a-attn);font-size:16px;line-height:22px;font-weight:500;color:var(--ink)}
.cbody{padding:16px 18px 18px}
.q{font-size:20px;line-height:26px;font-weight:500}
.dest{margin-top:6px;font-size:13.5px;line-height:19px;color:var(--ink-2)}
.dest b{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prev{margin-top:10px}
.prev li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px;padding:5px 0;font-size:15px;line-height:21px}
.prev li span{font-size:13px;color:var(--ink-2)}
.keys{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:8px;margin-top:14px}
.key{min-height:46px;border-radius:11px;background:var(--a-keyfill);display:grid;place-items:center;font-size:15.5px;font-weight:500;transition:transform .15s ease,box-shadow .3s ease}
.key.primary{background:var(--ink);color:#fff}
.key.primary.press{transform:scale(.95);box-shadow:0 0 0 7px rgba(27,26,38,.12)}
.saving{display:none;align-items:center;gap:10px;min-height:46px;margin-top:14px;font-size:15px;line-height:21px;color:var(--ink-2)}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--a-line);border-top-color:var(--ink);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hint{margin-top:10px;font-size:13.5px;line-height:19px;color:var(--ink-2)}
.ccard.saving-on .keys,.ccard.saving-on .hint{display:none}
.ccard.saving-on .saving{display:flex}
.rcard{padding:18px;align-self:end;opacity:0;transform:translateY(10px);filter:blur(6px);transition:opacity .5s ease,transform .7s var(--e),filter .5s ease;pointer-events:none}
.ok{display:inline-flex;align-items:center;gap:6px;color:var(--a-positive);font-weight:500;font-size:16px;line-height:22px}
.ok .ic{width:20px;height:20px}
.attr{margin-top:6px;font-size:13.5px;line-height:19px;color:var(--ink-2)}
.wstack.done .ccard{opacity:0;transform:translateY(-8px) scale(.98);filter:blur(6px)}
.wstack.done .rcard{opacity:1;transform:none;filter:none}
.b3{color:#fff;background:var(--navy);justify-content:flex-start}
.b3>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.b3-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,26,.6) 0%,rgba(10,9,26,0) 34%,rgba(10,9,26,0) 48%,rgba(10,9,26,.72) 100%)}
.b3 .bt,.b3-sub,.qrows{position:relative;z-index:1}
.b3-sub{font-size:15.5px;line-height:22px;color:rgba(255,255,255,.84);max-width:22em;margin-top:-8px}
.qrows{margin-top:auto;background:var(--a-ground);color:var(--ink);border-radius:16px;padding:2px 16px;box-shadow:0 24px 50px -24px rgba(5,4,16,.6)}
.qrows .row:first-child{border-top:0}
.rows .rs{transition:opacity .3s ease}
.rows .rs.swap{opacity:0}

/* ---------- listen & log ---------- */
.log-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:center}
.log-copy{display:grid;gap:26px;justify-items:start;min-width:0}
.log-copy .mk-spot{margin-bottom:-4px}
.logcard{position:relative;overflow:hidden;border-radius:30px;padding:clamp(20px,2.4vw,32px);color:#fff;background:linear-gradient(140deg,#087F91 0%,#2F6BD0 50%,#6346E8 100%);box-shadow:0 40px 80px -40px rgba(65,60,200,.55)}
.logcard::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1.1px,transparent 1.6px);background-size:14px 14px;-webkit-mask-image:radial-gradient(120% 90% at 100% 0%,#000 0%,transparent 60%);mask-image:radial-gradient(120% 90% at 100% 0%,#000 0%,transparent 60%);pointer-events:none}
.logcard>*{position:relative}
.lc-label{font-size:15px;line-height:20px;font-weight:500;color:rgba(255,255,255,.88);margin-bottom:14px}
.logbar{display:grid;grid-template-columns:10px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;padding:12px 12px 12px 18px;border-radius:14px;background:var(--a-display);color:var(--a-display-ink);box-shadow:inset 0 0 0 1px var(--a-display-edge)}
.logbar .rec{grid-column:1;grid-row:1;width:10px;height:10px;border-radius:50%;background:var(--a-rec);animation:rec 1.6s steps(2,jump-none) infinite}
@keyframes rec{50%{opacity:.25}}
html.rm .logbar .rec{animation:none}
.logbar .lt{grid-column:2;grid-row:1;font-size:15.5px;line-height:22px;font-weight:500}
.logbar .lt b{font-weight:400;color:var(--a-display-ink2)}
.ltimer{grid-column:2;grid-row:2;font-size:22px;line-height:28px;font-weight:500;transition:filter .2s}
.ltimer.blur{filter:blur(.6px)}
.logbar .stop{grid-column:3;grid-row:1/3;min-width:80px;height:48px;border-radius:11px;background:var(--a-display-ink);color:var(--a-display);display:grid;place-items:center;font-size:15.5px;font-weight:500}
.notes{margin-top:12px;background:var(--a-ground);color:var(--ink);border-radius:16px;padding:2px 18px}
.notes li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:13px 0;border-top:1px solid var(--a-line);transition:opacity .5s ease,transform .7s var(--e),filter .5s ease}
.notes li:first-child{border-top:0}
.notes .k{font-size:13.5px;line-height:21px;color:var(--ink-2)}
.notes .t{font-size:15.5px;line-height:21px}
.notes em{display:block;font-style:normal;font-size:13.5px;line-height:19px;color:var(--ink-2)}
html.js:not(.rm) .notes li.wait{opacity:0;transform:translateY(8px);filter:blur(4px)}
.lc-foot{margin-top:16px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:15px;line-height:20px;color:rgba(255,255,255,.88)}
.lc-count{font-size:40px;line-height:40px;font-weight:500;letter-spacing:-.02em;color:#fff}

/* ---------- questions ---------- */
.faq{background:var(--navy);color:var(--navy-ink)}
.faq .lede{color:var(--navy-ink-2)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-copy{display:grid;gap:22px;justify-items:start;min-width:0}
.faq-copy .mk-spot{margin-bottom:-2px}
.acc{min-width:0}
.acc-i{border-top:1px solid var(--navy-line)}
.acc-i:last-child{border-bottom:1px solid var(--navy-line)}
.acc h3{font:inherit}
.acc button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;cursor:pointer;font-size:clamp(17.5px,1.5vw,20px);line-height:1.35;font-weight:500;color:var(--navy-ink)}
.acc button:focus-visible{outline:2px solid var(--c1n);outline-offset:4px;border-radius:6px}
.pm{position:relative;width:18px;height:18px;flex:none}
.pm::before,.pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor;transition:transform .4s var(--e)}
.pm::after{transform:rotate(90deg)}
.acc-i.open .pm::after{transform:rotate(0)}
.acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e)}
.acc-i.open .acc-p{grid-template-rows:1fr}
.acc-p>div{overflow:hidden}
.acc-p p{padding:0 44px 24px 0;font-size:17px;line-height:1.6;color:var(--navy-ink-2);max-width:36em}

/* ---------- people ---------- */
.people{position:relative;overflow:hidden;background:var(--navy);color:#fff;min-height:clamp(600px,96vh,900px);display:flex}
.pp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(1.08);transition:transform 2.6s var(--e)}
.people.in .pp-img,html.rm .pp-img,html:not(.js) .pp-img{transform:none}
.pp-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,26,.62) 0%,rgba(10,9,26,.12) 34%,rgba(10,9,26,.18) 55%,rgba(10,9,26,.86) 100%)}
.pp-in{position:relative;width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:56px;padding-block:clamp(96px,10vw,132px) clamp(48px,6vw,80px)}
.pp-top{display:grid;gap:18px;justify-items:start}
.people .lede{color:rgba(255,255,255,.84)}
.pp-quote{display:flex;align-items:center;gap:22px;max-width:820px}
.pp-cap{font-size:14.5px;line-height:20px;font-weight:500;color:rgba(255,255,255,.76)}
.pp-said{margin-top:6px;font-size:clamp(22px,2.4vw,32px);line-height:1.25;font-weight:500;letter-spacing:-.015em;text-wrap:balance;--st:70ms}
.pp-ans{margin-top:10px;font-size:clamp(16.5px,1.4vw,19px);line-height:1.5;color:rgba(255,255,255,.84);transition:opacity .7s ease,transform .9s var(--e),filter .7s ease}
html.js:not(.rm) .pp-ans{opacity:0;transform:translateY(8px);filter:blur(6px)}
html.js:not(.rm) .pp-ans.in{opacity:1;transform:none;filter:none}

/* ---------- where it works ---------- */
.uses-head{margin-bottom:clamp(36px,4vw,56px);display:grid;gap:22px;justify-items:start}
.ucards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ucard{border-radius:24px;overflow:hidden;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.u-media{position:relative;aspect-ratio:4/3.3;max-width:100%;overflow:hidden;background:var(--navy)}
.u-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.ucard:hover .u-media img{transform:scale(1.03)}
.u-body{padding:20px 22px 24px;display:grid;gap:6px}
.u-body h3{font-size:21px;line-height:27px;font-weight:500;letter-spacing:-.01em}
.u-body p{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.uchip{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);box-shadow:0 18px 40px -18px rgba(5,4,16,.6)}
.uchip-phone{background:var(--a-surface);border-radius:12px;padding:10px 14px;display:grid;gap:2px}
.uchip-phone .meta{font-size:12.5px;line-height:17px}
.uchip-phone b{font-size:15px;line-height:20px;font-weight:500}
.uchip-bar,.uchip-log{display:flex;align-items:center;gap:10px;border-radius:999px;background:var(--a-display);color:var(--a-display-ink);box-shadow:inset 0 0 0 1px var(--a-display-edge),0 18px 40px -18px rgba(5,4,16,.6);font-size:14.5px;line-height:20px;white-space:nowrap}
.uchip-bar{padding:7px 18px 7px 8px}
.umark{width:30px;height:30px;padding:5px;border-radius:50%;background:#2B2950;fill:url(#g-brand-n)}
.uchip-log{padding:10px 18px}
.uchip-log .rec{width:9px;height:9px;border-radius:50%;background:var(--a-rec)}
.uchip-log b{font-weight:500;margin-left:4px}

/* ---------- apply + footer ---------- */
.cta{position:relative;padding-top:clamp(96px,11vw,150px);background:
  radial-gradient(60% 50% at 18% 100%,rgba(56,214,232,.22) 0%,transparent 70%),
  radial-gradient(60% 50% at 85% 100%,rgba(156,136,255,.26) 0%,transparent 70%),
  linear-gradient(180deg,var(--paper) 0%,#F4F3FB 55%,#E9EDF8 100%)}
.cta-in{display:grid;justify-items:center;text-align:center;gap:22px}
.cta-in .h2{max-width:12em}
.cta-in .lede{max-width:30em}
.cta-in .btn-row{justify-content:center;margin-top:8px}
.foot-wrap{margin-top:clamp(88px,10vw,140px)}
.foot{background:var(--navy);color:var(--navy-ink);border-radius:30px 30px 0 0;padding:clamp(28px,4vw,52px) clamp(22px,4vw,52px) 28px}
html.js:not(.rm) .foot[data-build]{transform:translateY(80px)}
html.js:not(.rm) .foot[data-build].in{transform:none}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:24px}
.foot-line{font-size:clamp(36px,6.4vw,96px);line-height:1;letter-spacing:-.04em;font-weight:500;text-wrap:balance}
.foot-line span{background:linear-gradient(90deg,var(--c1n),var(--c2n));-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:32px;margin-top:clamp(40px,5vw,72px);padding-top:32px;border-top:1px solid var(--navy-line)}
.foot-brand{display:grid;gap:14px;align-content:start}
.foot-logo{width:118px;height:auto;color:var(--navy-ink)}
.foot-brand p{font-size:15px;line-height:22px;color:var(--navy-ink-2)}
.foot-col{display:grid;gap:10px;align-content:start;font-size:15.5px;line-height:22px}
.foot-col h4{font-size:13.5px;line-height:18px;font-weight:500;color:var(--navy-ink-2);margin-bottom:4px}
.foot-col a{text-decoration:none;justify-self:start}
.foot-col a:hover{text-decoration:underline;text-underline-offset:3px}
.sel{user-select:all}
.foot-base{margin-top:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;font-size:13.5px;line-height:18px;color:var(--navy-ink-2)}
.tht{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.tht a{display:inline-flex;align-items:center;color:var(--navy-ink);opacity:.85;transition:opacity .2s ease;border-radius:4px}
.tht a:hover{opacity:1}
.tht a:focus-visible{outline:2px solid var(--c1n);outline-offset:4px}
.tht-mark{display:block;width:auto;height:17px;fill:currentColor}

/* ---------- pages: shared section head, current page in the nav ---------- */
.sec-head{display:grid;gap:22px;justify-items:start;margin-bottom:clamp(40px,4.5vw,64px)}
.sec-head .lede{max-width:36em}
.nav-links a[aria-current="page"]{background:rgba(255,255,255,.18)}
.nav.solid .nav-links a[aria-current="page"]{background:#E3E2EA}

/* ---------- the Layer: intro and where it sits (the key visual, on the film's night) ---------- */
.lhero{position:relative;overflow:hidden;background:var(--navy);color:var(--navy-ink);padding-top:clamp(136px,15vw,196px);padding-bottom:clamp(80px,9vw,128px);--faint:rgba(236,234,246,.3)}
.lhero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(156,136,255,.16) 1.1px,transparent 1.6px);background-size:16px 16px;-webkit-mask-image:radial-gradient(70% 55% at 50% 0%,#000 0%,transparent 75%);mask-image:radial-gradient(70% 55% at 50% 0%,#000 0%,transparent 75%);pointer-events:none}
.lhero>*{position:relative}
.lhero-in{display:grid;gap:24px;justify-items:center;text-align:center}
.lhero .h1{font-size:clamp(38px,6.2vw,96px);max-width:none}
.lh-lede{color:var(--navy-ink-2);max-width:36em;text-align:center}
.ldiag-night .ld-lab{color:var(--navy-ink-2)}
.ldiag-night .chips li{background:var(--navy-2);color:var(--navy-ink);box-shadow:inset 0 0 0 1px rgba(156,136,255,.24)}
.ldiag-night .ld-band{background:linear-gradient(90deg,#102536 0%,#1D1B31 50%,#22183F 100%);box-shadow:inset 0 0 0 1px rgba(56,214,232,.4),0 0 60px -10px rgba(56,214,232,.25),0 30px 90px -20px rgba(108,79,242,.55)}

/* ---------- the Layer: what it understands ---------- */
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cap{position:relative;overflow:hidden;border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:14px;min-height:580px;min-width:0}
.cap-lang{background:radial-gradient(120% 70% at 0% 0%,#BEE9EF 0%,var(--tint-cyan) 42%,#F1F9FA 100%)}
.cap-img{background:radial-gradient(120% 70% at 50% 0%,#D5DEF8 0%,#E9EDFA 45%,#F6F7FC 100%)}
.cap-ctx{background:radial-gradient(120% 70% at 100% 0%,#D3CAFC 0%,var(--tint-violet) 45%,#F5F3FE 100%)}
.cap-k{justify-self:start;align-self:flex-start;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.8);font-size:14.5px;line-height:18px;font-weight:500}
.cap-t{font-size:21px;line-height:1.32;font-weight:500;letter-spacing:-.012em;text-wrap:pretty}
.cap-vis{margin-top:auto;display:grid;gap:8px}
.cap-small{padding-top:12px;border-top:1px solid rgba(27,26,38,.1);font-size:13.5px;line-height:18px;color:var(--ink-2)}
.mail,.sheet,.srcs li{background:var(--a-surface);border-radius:14px;box-shadow:0 18px 40px -26px rgba(27,26,38,.45)}
.mail{padding:14px 16px}
.mail-h{display:flex;justify-content:space-between;gap:12px;font-size:13px;line-height:18px;color:var(--ink-2)}
.mail-h b{font-weight:500;color:var(--ink)}
.mail-s{margin-top:4px;font-size:14.5px;line-height:20px;font-weight:500}
.mail-b{margin-top:6px;font-size:14px;line-height:21px;color:var(--ink-2)}
.mail mark{background:transparent;color:inherit;border-radius:4px;padding:0 3px;margin:0 -3px;transition:background-color .6s ease,color .6s ease}
.cap.go .mail mark{background:#C6ECF2;color:var(--ink)}
.cap.go .mail mark+mark{transition-delay:.2s}
.flowdots{justify-self:center;width:3px;height:26px;background:radial-gradient(circle,var(--c2) 1.3px,transparent 1.6px) 0 0/3px 7px;opacity:0;transition:opacity .4s ease .5s;animation:drip .9s linear infinite}
@keyframes drip{to{background-position:0 7px}}
html.rm .flowdots{animation:none}
.lands{padding:12px 14px;border-radius:12px;background:var(--a-surface);box-shadow:inset 0 0 0 1.5px var(--ink),0 18px 40px -24px rgba(27,26,38,.4);display:grid;gap:2px;opacity:0;transform:translateY(-8px);filter:blur(4px);transition:opacity .6s ease .95s,transform .8s var(--e) .95s,filter .6s ease .95s}
.lands .meta{font-size:12.5px;line-height:17px}
.lands b{font-size:15px;line-height:20px;font-weight:500}
.cap.go .flowdots{opacity:1}
.cap.go .lands{opacity:1;transform:none;filter:none}
html.rm .flowdots,html.rm .lands{opacity:1;transform:none;filter:none}
.sheet{padding:10px 10px 8px;display:grid;gap:4px}
.plan{width:100%;height:auto;display:block;overflow:visible}
.plan .grid path{fill:none;stroke:#9AA3B5;stroke-width:1;stroke-dasharray:10 3 2 3}
.plan .bub circle{fill:#fff;stroke:#6A6E75;stroke-width:1.2}
.plan .bubt text{font:500 10px var(--font);fill:#3E4148;text-anchor:middle}
.plan .walls path{fill:none;stroke:var(--ink);stroke-width:4;stroke-linejoin:miter;stroke-dasharray:1300;stroke-dashoffset:1300;transition:stroke-dashoffset 1.8s var(--e) .4s}
.cap.in .plan .walls path,html.rm .plan .walls path{stroke-dashoffset:0}
.plan .cols rect{fill:var(--ink)}
.plan .hit rect{fill:var(--c1)}
.plan .ring{fill:none;stroke:var(--c1);stroke-width:2;opacity:0;transform-origin:176px 186px;transition:opacity .4s ease .3s}
.cap.go .plan .ring{opacity:1;animation:ping 1.6s ease-out infinite .3s}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}
html.rm .plan .ring{animation:none;opacity:1}
.sheet-tag{font-size:11.5px;line-height:16px;color:var(--ink-2);padding:0 4px}
.srcs{display:grid;gap:6px}
.srcs li{display:grid;grid-template-columns:20px auto minmax(0,1fr);gap:8px;align-items:center;padding:10px 12px;font-size:13.5px;line-height:18px;transition:transform .5s var(--e),opacity .5s ease}
.srcs li b,.srcs li{font-weight:500}
.srcs .ic{width:18px;height:18px;color:var(--ink-2)}
.srcs em{font-style:normal;font-weight:400;color:var(--ink-2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap.go .srcs li{transform:scale(.98)}

/* ---------- the Layer: people stay in control ---------- */
.human-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.human-copy{display:grid;gap:26px;justify-items:start;min-width:0}
.fits{display:grid;gap:20px;margin-top:6px}
.fits li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.fits li>span:last-child{font-size:16px;line-height:24px;color:var(--ink-2)}
.fits b{display:block;font-weight:500;font-size:17px;line-height:24px;color:var(--ink)}
.human-vis{position:relative;border-radius:30px;overflow:hidden;min-height:640px;background:var(--navy);display:flex;align-items:flex-end;padding:24px;min-width:0}
.human-vis>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.human-vis::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,26,0) 30%,rgba(10,9,26,.55) 100%)}
.qstack{position:relative;z-index:1;display:grid;width:min(100%,380px);margin-inline:auto}
.qstack>*{grid-area:1/1}
.qcard{background:var(--a-surface);border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--ink),0 30px 60px -30px rgba(5,4,16,.7);padding-bottom:16px;transition:opacity .45s ease,transform .6s var(--e),filter .45s ease}
.qhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 0 18px;min-height:64px}
.qhead .hd{display:inline-flex;align-items:center;gap:10px;font-size:15px;line-height:20px;font-weight:500}
.qhead .hd::before{content:"";width:8px;height:8px;border-radius:50%;background:#F5A524;box-shadow:0 0 0 1px #A86A08}
.qq{padding:0 18px;font-size:19px;line-height:26px}
.qopts{display:grid;gap:8px;padding:14px 18px 0}
.qopt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 16px;border-radius:11px;background:var(--a-keyfill);font-size:15.5px;line-height:20px;font-weight:500;transition:background-color .2s ease,color .2s ease,transform .15s ease}
.qopt em{font-style:normal;font-weight:400;font-size:13.5px;color:var(--ink-2)}
.qopt.other{background:transparent;border-top:1px solid var(--a-line);border-radius:0;margin-top:4px}
.qopt.on{background:var(--ink);color:#fff;transform:scale(.98)}
.qopt.on em{color:rgba(255,255,255,.72)}
.qcard .hint{padding:2px 18px 0}
.qans{align-self:end;margin:0;opacity:0;transform:translateY(10px);filter:blur(6px);transition:opacity .5s ease,transform .7s var(--e),filter .5s ease}
.qline{margin-top:6px;font-size:15px;line-height:21px;color:var(--ink-2)}
.qstack.done .qcard{opacity:0;transform:translateY(-8px) scale(.98);filter:blur(6px)}
.qstack.done .qans{opacity:1;transform:none;filter:none}

/* ---------- the Layer: what it doesn't do ---------- */
.nots{background:linear-gradient(180deg,var(--paper) 0%,#F7F7FB 100%)}
.nolist li{display:grid;grid-template-columns:56px minmax(0,1.15fr) minmax(0,1fr);gap:16px 28px;align-items:center;padding:30px 0;border-top:1px solid var(--line)}
.nolist li:last-child{border-bottom:1px solid var(--line)}
.no-ic{width:48px;height:48px;border-radius:50%;background:var(--mist);display:grid;place-items:center}
.no-ic .ic{width:22px;height:22px}
.nolist b{font-size:clamp(24px,2.7vw,38px);line-height:1.15;font-weight:500;letter-spacing:-.022em}
.nolist li>span:last-child{font-size:17px;line-height:1.55;color:var(--ink-2)}

/* ---------- the Layer: security and your data ---------- */
.secu{background:var(--navy);color:var(--navy-ink)}
.secu .lede{color:var(--navy-ink-2)}
.secu-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:start}
.secu-copy{display:grid;gap:22px;justify-items:start;min-width:0}
.secu-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:24px 0;border-top:1px solid var(--navy-line)}
.secu-list li:last-child{border-bottom:1px solid var(--navy-line)}
.secu-list .pi{background:rgba(236,234,246,.08)}
.secu-list .pi .ic{color:var(--c1n)}
.secu-list li>span:last-child{font-size:16.5px;line-height:1.55;color:var(--navy-ink-2)}
.secu-list b{display:block;margin-bottom:2px;font-size:19px;line-height:26px;font-weight:500;color:var(--navy-ink)}

/* ---------- About: mission ---------- */
.ahero{position:relative;overflow:hidden;background:var(--navy);color:#fff;min-height:clamp(640px,100svh,960px);display:flex;align-items:flex-end;--faint:rgba(255,255,255,.4)}
.ah-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.06);transition:transform 2.8s var(--e)}
.ahero.in .ah-img,html.rm .ah-img,html:not(.js) .ah-img{transform:none}
.ah-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,26,.82) 0%,rgba(10,9,26,.25) 52%,rgba(10,9,26,.1) 100%),linear-gradient(180deg,rgba(10,9,26,.45) 0%,rgba(10,9,26,0) 22%)}
.ah-in{position:relative;width:100%;display:grid;gap:20px;justify-items:start;padding-bottom:clamp(48px,7vh,88px)}
.ah-h{max-width:13em;font-size:clamp(40px,5.4vw,84px)}

/* ---------- About: why we started ---------- */
.why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.why-copy{display:grid;gap:24px;justify-items:start;min-width:0}
.why-text{display:grid;gap:16px;max-width:34em}
.why-text p:not(.lede){font-size:17.5px;line-height:1.65;color:var(--ink-2)}
.why-text .lede{color:var(--ink)}
.why-img{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:4/4.6;max-width:100%;background:var(--navy)}
.why-img img{width:100%;height:100%;object-fit:cover;object-position:35% 50%}
.why-img figcaption{position:absolute;left:18px;bottom:18px;padding:9px 16px;border-radius:999px;background:rgba(16,14,36,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font-size:14.5px;line-height:20px;font-weight:500}

/* ---------- About: the team, by experience ---------- */
.team{background:linear-gradient(180deg,#F7F7FB 0%,var(--paper) 100%)}
.tcards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tcard{grid-column:span 2;position:relative;display:grid;grid-template-rows:auto 1fr;gap:28px;min-height:270px;padding:24px;border-radius:26px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),0 24px 50px -36px rgba(27,26,38,.35);min-width:0}
.tcard:nth-child(n+4){grid-column:span 3}
.tava{position:relative;width:76px;height:76px;border-radius:50%;background:var(--mist)}
.tava::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--c) 1.25px,transparent 1.65px) 0 0/5px 5px;-webkit-mask:radial-gradient(circle at 50% 37%,#000 0 19%,transparent 20%),radial-gradient(ellipse 41% 34% at 50% 97%,#000 0 98%,transparent 100%);mask:radial-gradient(circle at 50% 37%,#000 0 19%,transparent 20%),radial-gradient(ellipse 41% 34% at 50% 97%,#000 0 98%,transparent 100%)}
.tic{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--mist);color:var(--c)}
.tic .ic{width:21px;height:21px}
.tcard b{align-self:end;font-size:clamp(19px,1.6vw,22px);line-height:1.3;font-weight:500;letter-spacing:-.012em;max-width:15em;text-wrap:balance}

/* ---------- About: what we believe ---------- */
.believe{background:var(--navy);color:var(--navy-ink)}
.beliefs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px}
.beliefs li{display:grid;gap:10px;align-content:start;padding:32px 0;border-top:1px solid var(--navy-line)}
.beliefs b{font-size:clamp(24px,2.6vw,36px);line-height:1.15;font-weight:500;letter-spacing:-.022em}
.beliefs span{font-size:17px;line-height:1.6;color:var(--navy-ink-2);max-width:30em}

@media (max-width:1080px){
  .caps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cap-ctx{grid-column:1/-1;min-height:0}
}
@media (max-width:860px){
  .human-grid,.secu-grid,.why-grid{grid-template-columns:minmax(0,1fr)}
  .human-vis{min-height:600px}
  .nolist li{grid-template-columns:48px minmax(0,1fr);gap:8px 18px;align-items:start}
  .nolist li>span:last-child{grid-column:2}
  .no-ic{width:44px;height:44px}
  .tcards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1 * var(--gut)) calc(-1 * var(--gut-r));padding:0 var(--gut-r) 6px var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .tcards::-webkit-scrollbar{display:none}
  .tcard{flex:0 0 min(78%,340px);scroll-snap-align:start;min-height:250px}
  .beliefs{grid-template-columns:minmax(0,1fr)}
  .why-img{aspect-ratio:4/3.4}
}
@media (max-width:640px){
  .caps{grid-template-columns:minmax(0,1fr)}
  .cap{min-height:0}
  .cap-ctx{grid-column:auto}
  .lhero{padding-top:118px}
  .human-vis{padding:16px;min-height:560px}
  .qq{font-size:18px}
  .ahero{min-height:max(600px,88svh)}
}

/* ---------- apply for the beta: a sheet over the page; the mark comes along ---------- */
html.ap-on{overflow:hidden}
.narrator.top{z-index:95}
/* the film: one player, in its own band on The Layer and full screen from the Home hero. Before it plays the mark sits
   in the middle of the frame as the play button; while it plays it moves under the frame and mirrors who is talking */
.film-sec{background:var(--mist)}
.film{margin:0 auto;display:grid;gap:12px;max-width:1120px}
.film-frame{position:relative;aspect-ratio:16/9;border-radius:clamp(18px,2vw,28px);overflow:hidden;background:var(--navy);box-shadow:0 50px 100px -44px rgba(10,9,26,.6),0 0 0 1px rgba(10,9,26,.06)}
.film.tall .film-frame{aspect-ratio:4/5}
.film-v{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:var(--navy)}
.film-v::cue{font-family:var(--font);font-size:clamp(15px,1.5vw,22px);line-height:1.35;color:#fff;background:rgba(10,9,26,.74)}
.film-play{all:unset;box-sizing:border-box;position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;gap:16px;padding:clamp(16px,2.6vw,34px);cursor:pointer;color:#fff;background:linear-gradient(20deg,rgba(10,9,26,.5),rgba(10,9,26,0) 45%);transition:opacity .35s ease,visibility 0s}
.film-play .mk-spot{border-radius:50%;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),0 0 0 12px rgba(255,255,255,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:box-shadow .4s var(--e)}
.film-play:hover .mk-spot,.film-play:focus-visible .mk-spot{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 0 0 18px rgba(255,255,255,.08)}
.film-play:focus-visible .film-play-t{outline:2px solid #fff;outline-offset:6px;border-radius:6px}
.film-tri{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -10px;color:#fff;transition:opacity .3s}
.film-play .mk-spot.here .film-tri{opacity:0}
.film-play-t{display:inline-flex;align-items:center;gap:10px;height:var(--nar);font-size:17px;font-weight:500;text-shadow:0 1px 14px rgba(10,9,26,.5)}
.film-len{padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.14);font-size:13.5px;font-variant-numeric:tabular-nums}
.film.on .film-play{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s .35s}
html:not(.js) .film-play{display:none}
.film-dock{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:var(--nar);padding-left:4px}
.film-spot{width:0;transition:width .45s var(--e)}
.film.on .film-spot{width:var(--nar)}
.film-status{font-size:15px;font-weight:500;color:var(--ink-2)}
.film-end{display:flex;flex-wrap:wrap;gap:10px;margin-left:auto;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .4s ease,transform .5s var(--e),visibility 0s .4s}
.film.end .film-end{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.film-again{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(10,9,26,.14)}
.film-again:hover{background:#F1F0F6}
.film-apply{background:var(--ink);color:#fff}
.film-apply:hover{background:#2D2C3D}
html.rm .film-play,html.rm .film-end,html.rm .film-spot{transition:none}
/* the Watch the film link in the Home hero */
.film-link{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 6px;color:#fff;font-size:16.5px;font-weight:500;text-decoration:none}
.fl-play{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color .25s,transform .3s var(--e)}
.fl-play .ic{width:18px;height:18px;margin-left:2px}
.film-link:hover .fl-play{background:rgba(255,255,255,.22);transform:scale(1.06)}
.film-link:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:999px}
.fl-len{color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums}
/* full screen on Home */
.fm{position:fixed;inset:0;z-index:91;display:grid;place-items:center}
.fm-scrim{position:absolute;inset:0;background:var(--navy);opacity:0;transition:opacity .45s ease}
.fm-scrim::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(156,136,255,.14) 1.1px,transparent 1.6px);background-size:16px 16px;-webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 0%,transparent 80%);mask-image:radial-gradient(70% 60% at 50% 45%,#000 0%,transparent 80%)}
.fm.open .fm-scrim{opacity:1}
.fm-panel{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:calc(72px + env(safe-area-inset-top,0px)) var(--gut-r) calc(20px + env(safe-area-inset-bottom,0px)) var(--gut);pointer-events:none}
.fm-panel>*{pointer-events:auto}
.fm-x{all:unset;box-sizing:border-box;position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:var(--gut-r);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(236,234,246,.1);color:var(--navy-ink);cursor:pointer;opacity:0;transition:background-color .2s ease,opacity .4s ease .15s}
.fm-x:hover{background:rgba(236,234,246,.18)}
.fm-x:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.fm-x .ic{width:20px;height:20px}
.fm-body{width:min(1180px,100%,calc((100svh - 190px) * 16 / 9));opacity:0;transform:translateY(26px) scale(.975);filter:blur(6px);transition:opacity .5s ease .1s,transform .8s var(--e) .1s,filter .6s ease .1s}
.fm-body:has(.film.tall){width:min(100%,calc((100svh - 230px) * 4 / 5))}
.fm.open .fm-x,.fm.open .fm-body{opacity:1;transform:none;filter:none}
.fm .film{max-width:none}
.fm .film-status{color:var(--navy-ink-2)}
.fm .film-again{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.fm .film-again:hover{background:rgba(255,255,255,.2)}
.fm .film-apply{background:#fff;color:var(--ink)}
.fm .film-apply:hover{background:#F1F0F6}
html.rm .fm-scrim,html.rm .fm-x,html.rm .fm-body{transition:none}
@media (max-width:640px){
  .film-link{flex-basis:100%;justify-content:center}
  .film-end{margin-left:0;width:100%}
  .film-end .btn{flex:1 1 auto}
}
/* page hand-off: the navy cover holds the mark, working, while the next page loads; it rises from the bottom when you leave
   and lifts away upward when the page is ready, and the mark flies between the cover and its spot */
.loader{display:none}
html.js:not(.rm) .loader{display:block;position:fixed;inset:0;z-index:94;background:var(--navy);clip-path:inset(0 0 0 0);transition:clip-path .5s var(--e),visibility 0s;animation:ld-safe 0s linear 6s forwards}
html.js:not(.rm) .loader.live{animation:none}
html.js:not(.rm) .loader.up{clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none;transition:clip-path .62s var(--e),visibility 0s .62s}
html.js:not(.rm) .loader.pre{clip-path:inset(100% 0 0 0);transition:none}
.loader::before{content:"";position:absolute;left:50%;top:50%;width:min(92vmin,640px);height:min(92vmin,640px);transform:translate(-50%,-50%);background-image:radial-gradient(rgba(156,136,255,.16) 1.1px,transparent 1.6px);background-size:16px 16px;background-position:center;-webkit-mask-image:radial-gradient(closest-side,#000 0%,transparent 100%);mask-image:radial-gradient(closest-side,#000 0%,transparent 100%)}
.loader .lm{position:absolute;left:50%;top:50%;width:var(--nar);height:var(--nar);margin:calc(var(--nar) / -2) 0 0 calc(var(--nar) / -2)}
@keyframes ld-safe{to{visibility:hidden;pointer-events:none}}
.narrator.boot{position:fixed;left:50%;top:50%;margin:calc(var(--nar) / -2) 0 0 calc(var(--nar) / -2);transition:none}
.narrator.boot::before{transition:none}
.ph-spot{position:absolute;width:2px;height:2px;margin:-1px 0 0 -1px;pointer-events:none}
.ap{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
.ap-scrim{position:absolute;inset:0;background:rgba(10,9,26,.52);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .4s ease}
.ap.open .ap-scrim{opacity:1}
.ap-panel{position:relative;width:min(660px,100%);max-height:calc(100svh - 48px);overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);border-radius:30px;box-shadow:0 50px 120px -40px rgba(5,4,16,.7);opacity:0;transform:translateY(28px) scale(.97);transition:opacity .45s ease,transform .8s var(--e)}
.ap.open .ap-panel{opacity:1;transform:none}
.ap-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:22px 22px 6px 30px;background:linear-gradient(180deg,var(--paper) 72%,rgba(255,255,255,0))}
.ap-x{all:unset;box-sizing:border-box;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--mist);cursor:pointer;color:var(--ink)}
.ap-x:hover{background:#E8E7EF}
.ap-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ap-views{padding:4px 34px 34px}
.ap-title{font-size:clamp(30px,3.2vw,40px);line-height:1.08;letter-spacing:-.03em;font-weight:500}
.ap-lede{margin-top:12px;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:32em}
.ap-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 16px;margin-top:30px}
.ap-grid .span{grid-column:1/-1}
.fld{min-width:0;border:0;margin:0;padding:0}
.fld>label,.fld>legend{display:block;padding:0;margin-bottom:9px;font-size:15px;line-height:20px;font-weight:500}
.opt{font-weight:400;color:var(--ink-2);margin-left:6px}
.fld input,.fld textarea{display:block;width:100%;min-height:56px;padding:15px 16px;border:0;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px #CFCDD8;font:400 17px/24px var(--font);color:var(--ink);transition:box-shadow .2s ease;-webkit-appearance:none;appearance:none}
.fld textarea{resize:vertical;min-height:96px}
.fld input::placeholder,.fld textarea::placeholder{color:#8A8D96}
.fld input:hover,.fld textarea:hover{box-shadow:inset 0 0 0 1px #A9A7B6}
.fld input:focus,.fld textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.fld.bad input{box-shadow:inset 0 0 0 2px var(--a-alert)}
.err{display:none;align-items:center;gap:7px;margin-top:8px;font-size:14.5px;line-height:20px;color:var(--a-alert);font-weight:500}
.err .ic{width:17px;height:17px}
.fld.bad .err{display:flex}
.chipset{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:0 17px;border-radius:999px;background:var(--mist);font-size:15.5px;line-height:20px;font-weight:500;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;pointer-events:none}
.chip .ic{width:17px;height:17px;display:none}
.chip:hover span{background:#E8E7EF}
.chip input:checked+span{background:var(--ink);color:#fff}
.chip input:checked+span .ic{display:block}
.chip input:focus-visible+span{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.fld.bad .chip span{box-shadow:inset 0 0 0 1.5px var(--a-alert)}
.ap-needs{display:flex;align-items:center;gap:10px;flex-basis:100%;font-size:16px;line-height:22px;font-weight:500}
.ap-needs[hidden]{display:none}
.ap-pin{position:sticky;bottom:0;z-index:2;margin:10px -34px -34px;padding:22px 34px 28px;background:linear-gradient(180deg,rgba(255,255,255,0) 0,var(--paper) 22px)}
.ap-needs i{width:9px;height:9px;border-radius:50%;background:#F5A524;box-shadow:0 0 0 1px #A86A08}
.ap-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:26px}
.ap-note{font-size:14.5px;line-height:20px;color:var(--ink-2);max-width:20em}
.ap-send .spin{display:none;border-color:rgba(255,255,255,.3);border-top-color:#fff}
.ap-send.sending .spin{display:block}
.ap-send.sending .ic{display:none}
.ap-send:disabled{cursor:default}
.ap-view{transition:opacity .35s ease,transform .5s var(--e),filter .35s ease}
.ap-form.leave{opacity:0;transform:translateY(-8px);filter:blur(6px)}
.ap-done{opacity:0;transform:translateY(10px);filter:blur(6px);padding-top:6px}
.ap-done.show{opacity:1;transform:none;filter:none}
.ap-receipt{padding:22px 22px 24px;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ap-receipt:focus{outline:none}
.ap-rtitle{margin-top:6px;font-size:clamp(24px,2.6vw,30px);line-height:1.15;letter-spacing:-.02em;font-weight:500}
.ap-receipt .meta{margin-top:8px;font-size:15px;line-height:21px}
.ap-again{all:unset;cursor:pointer;font-size:15.5px;font-weight:500;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.ap-again:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
html.js:not(.rm) .ap .ap-form .bi{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .7s var(--e);transition-delay:calc(.25s + var(--k,0) * 60ms)}
html.js:not(.rm) .ap.open .ap-form .bi{opacity:1;transform:none}
html.rm .ap-scrim,html.rm .ap-panel,html.rm .ap-view{transition:none}
@media (max-width:640px){
  .ap{place-items:end stretch;padding:0}
  .ap-panel{width:100%;max-height:94svh;border-radius:26px 26px 0 0;transform:translateY(60px)}
  .ap-head{padding:14px 14px 4px 18px}
  .ap-views{padding:2px 20px calc(28px + env(safe-area-inset-bottom,0px))}
  .ap-pin{margin:10px -20px calc(-28px - env(safe-area-inset-bottom,0px));padding:18px 20px calc(18px + env(safe-area-inset-bottom,0px))}
  .ap-note{max-width:none}
  .ap-grid{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:24px}
  .ap-actions .btn{width:100%}
}

/* ---------- narrower screens ---------- */
@media (max-height:820px) and (min-width:861px){
  .hc-body{min-height:222px}
  .hcard .r4{display:none}
}
@media (max-width:1080px){
  .bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .b3{grid-column:1/-1;min-height:460px}
  .problem-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-menu{display:grid}
  .nav-in{grid-template-columns:auto 1fr;height:64px}
  .nav-logo{justify-self:start}
  .hero{height:auto;overflow:visible;padding-bottom:44px}
  .hero-media{position:relative;inset:auto;height:min(66svh,580px);min-height:460px;overflow:hidden}
  .hero-media img{object-position:72% 30%}
  .hero-shade{bottom:auto;height:min(66svh,580px);min-height:460px;background:linear-gradient(0deg,var(--navy) 0%,rgba(10,9,26,.72) 22%,rgba(10,9,26,0) 48%),linear-gradient(180deg,rgba(10,9,26,.45) 0%,rgba(10,9,26,0) 22%)}
  .hero-in{position:relative;z-index:1;height:auto;display:block;padding-bottom:0;margin-top:-132px}
  .hero-copy{max-width:none}
  .hcard-slot{display:flex;justify-content:center;margin-top:36px;position:relative}
  .hcard{width:min(100%,360px)}
  .problem-grid,.log-grid,.faq-grid{grid-template-columns:minmax(0,1fr)}
  .problem-cards{grid-template-columns:1fr 1fr}
  .pcard-a{margin-top:0;align-self:stretch}
  .how-head{grid-template-columns:minmax(0,1fr);gap:20px}
  .how-head .lede{justify-self:start}
  .ucards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1 * var(--gut)) calc(-1 * var(--gut-r));padding:0 var(--gut-r) 6px var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .ucards::-webkit-scrollbar{display:none}
  .ucard{flex:0 0 min(84%,400px);scroll-snap-align:start}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:640px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .bcard{min-height:0}
  .b3{min-height:520px}
  .problem-cards{grid-template-columns:minmax(0,1fr)}
  .pcard-b{height:420px}
  .sec{padding-block:76px}
  .ld-band{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;border-radius:30px;padding:18px 20px 22px;gap:4px}
  .ld-band .mk-spot{grid-row:1;margin-bottom:8px}
  .ld-name{grid-row:2}
  .ld-rule{grid-row:3;justify-self:center;text-align:center;font-size:14.5px}
  .ldiag{gap:56px}
  .notes li{grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 0}
  .notes .k{font-size:13px;line-height:18px}
  .logcard{border-radius:26px}
  .lc-count{font-size:34px;line-height:34px}
  .chips li{padding:9px 14px;font-size:14.5px}
  .foot-top{align-items:flex-start}
  .pp-quote{flex-direction:column;align-items:flex-start;gap:14px}
  .hero-btns .btn{flex:1 1 auto}
}
@media (max-width:420px){
  .h1{font-size:35px}
  .hero-copy{gap:16px}
  .hero-sub{font-size:16.5px}
}