/*
 * Vela site: the landing page and the privacy policy.
 *
 * Transcribed from the Claude Design file "Vela Landing.dc.html"
 * (project f6931f78-5450-4b0c-b6b0-a9a2283ab61d). Two departures, both forced
 * by the hosting rather than chosen:
 *
 *  1. Every inline style="" in the design is a class here. The CSP in
 *     firebase.json allows stylesheets from 'self' only, so an inline style
 *     attribute is dropped by the browser.
 *  2. The design sizes with cqi units inside a `container-type: inline-size`
 *     root. That containment would also make the root the containing block of
 *     the fixed cookie bar, pinning it to the bottom of the page instead of
 *     the viewport. The root is full width, so vw and @media carry the same
 *     values without it. The phone frames keep their own containers.
 *
 * Hue budget, as in the app (lib/core/constants/app_colors.dart): chrome is
 * ink; violet means "happens on this phone"; teal means "a document".
 */

@font-face{font-family:"Hanken Grotesk";src:url("/fonts/HankenGrotesk-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/fonts/HankenGrotesk-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/fonts/HankenGrotesk-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}

/* ---- Tokens ------------------------------------------------------------ */

:root{
  color-scheme:light dark;
  --bg:#F8FBFB;--card:#FFFFFF;--surface:#F2F7F8;
  --ink:#03111E;--text:#0C1A25;--muted:#5B6C75;--line:#DCE3E6;--pale:#CDD7DB;
  --violet:#6C63FF;--violet-ink:#4C3EBD;--violet-tint:#E8EAFF;
  --doc:#1F6F78;--doc-tint:rgba(31,111,120,.12);
  --btn:#03111E;--btn-fg:#F8FBFB;
  --band:#03111E;--band-edge:transparent;--foot:#03111E;
  --bezel:#16242F;--seg:#E7EDEF;--seg-on:#FFFFFF;--badge-edge:#A6A6A6;
  --header-bg:rgba(248,251,251,.84);
  --focus:rgba(3,17,30,.45);
  --phone-shadow:0 2px 6px rgba(3,17,30,.08),0 48px 90px -36px rgba(3,17,30,.42);
  --float-shadow:0 1px 2px rgba(3,17,30,.05),0 18px 40px -18px rgba(3,17,30,.22);
  --phone-w:clamp(260px,27vw,392px);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#080F17;--card:#111A23;--surface:#18232D;
    --ink:#EEF5F6;--text:#EEF5F6;--muted:#8C9BA2;--line:rgba(255,255,255,.12);--pale:#26323C;
    --violet:#9797FF;--violet-ink:#9797FF;--violet-tint:rgba(151,151,255,.16);
    --doc:#63CCC0;--doc-tint:rgba(99,204,192,.14);
    --btn:#EEF5F6;--btn-fg:#03111E;
    --band:#111A23;--band-edge:rgba(255,255,255,.08);--foot:#050A10;
    --bezel:#2B3945;--seg:#0D151D;--seg-on:#26343F;--badge-edge:rgba(255,255,255,.34);
    --header-bg:rgba(8,15,23,.84);
    --focus:rgba(238,245,246,.45);
    --phone-shadow:0 0 0 1px rgba(255,255,255,.06),0 48px 90px -36px rgba(0,0,0,.8);
    --float-shadow:0 0 0 1px rgba(255,255,255,.04),0 18px 40px -18px rgba(0,0,0,.6);
  }
}

/* ---- Base -------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{opacity:.72}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.vl-skip{position:absolute;left:16px;top:-60px;z-index:40;padding:10px 16px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-weight:600;text-decoration:none}
.vl-skip:focus{top:12px}

/* ---- Language switch (two radios, no script) ---------------------------- */

.vl-radio{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.vl-fr-in:checked ~ .vl-page .en{display:none!important}
.vl-en-in:checked ~ .vl-page .fr{display:none!important}
.vl-segs{display:flex;padding:3px;border-radius:999px;background:var(--seg);border:1px solid var(--line)}
.vl-seg{min-width:44px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--muted);background:transparent;cursor:pointer;transition:background .25s,color .25s}
.vl-fr-in:checked ~ .vl-page .vl-seg-fr,.vl-en-in:checked ~ .vl-page .vl-seg-en{background:var(--seg-on);color:var(--ink);box-shadow:0 1px 2px rgba(3,17,30,.14)}
.vl-fr-in:focus-visible ~ .vl-page .vl-seg-fr,.vl-en-in:focus-visible ~ .vl-page .vl-seg-en{outline:3px solid var(--focus);outline-offset:1px}

/* ---- Header ------------------------------------------------------------ */

.vl-header{position:sticky;top:0;z-index:20;background:var(--header-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.vl-header-in{max-width:1240px;margin:0 auto;padding:0 clamp(16px,2.3vw,32px);height:clamp(64px,5.8vw,84px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.vl-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.vl-brand svg{overflow:visible}
.vl-word{font-size:25px;font-weight:800;letter-spacing:-.035em;line-height:1}
.vl-mark path{stroke:var(--ink)}
.vl-mark circle{fill:var(--violet)}
.vl-actions{display:flex;align-items:center;gap:12px}
.vl-pill{height:44px;padding:0 22px;display:flex;align-items:center;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}

/* ---- Hero -------------------------------------------------------------- */

.vl-hero{padding:clamp(40px,6vw,96px) 16px 0;text-align:center}
.vl-h1{margin:0 auto;max-width:1040px;font-size:clamp(40px,6.1vw,90px);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ink);text-wrap:balance}
.vl-lead{margin:clamp(20px,2vw,28px) auto 0;max-width:640px;font-size:clamp(17px,1.45vw,21px);line-height:1.5;color:var(--muted);text-wrap:pretty}
.vl-badges{margin-top:clamp(28px,2.6vw,40px);display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* Store badges in their "coming soon" state: shaped like the real ones, not
   links, because there is no listing to link to yet. */
.vl-badge{height:52px;padding:0 18px 0 14px;display:flex;align-items:center;gap:10px;border-radius:11px;background:#000;color:#fff;border:1px solid var(--badge-edge);text-align:left;cursor:default}
.vl-badge--play{padding:0 18px 0 15px;gap:11px}
.vl-badge svg{fill:#fff;flex:none}
.vl-badge-t{display:flex;flex-direction:column;gap:3px;line-height:1}
.vl-badge-s{font-size:11px;font-weight:400;opacity:.85}
.vl-badge-b{font-size:19px;font-weight:600;letter-spacing:-.015em}
.vl-badge--lg{height:56px;padding:0 20px 0 16px;gap:11px;border-radius:12px}
.vl-badge--lg.vl-badge--play{padding:0 20px 0 17px;gap:12px}
.vl-badge--lg .vl-badge-s{font-size:11.5px}
.vl-badge--lg .vl-badge-b{font-size:20px}

/* The heartbeat line, the phone it lands on, and the dotted trail after it. */
.vl-stage{margin:clamp(56px,6vw,96px) -16px 0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;padding-bottom:clamp(24px,3vw,48px);overflow-x:clip}
.vl-ecg{position:relative;z-index:2;padding-top:calc(var(--phone-w) * .62 - 60px);display:flex;align-items:center;margin-right:-7px}
.vl-ecg-line{flex:1;min-width:0;height:120px;overflow:visible}
.vl-ecg-spikes{flex:0 1 min(180px,20vw);width:min(180px,20vw);min-width:0;height:120px;overflow:visible}
.vl-ecg-flat,.vl-ecg-spike{stroke:var(--ink)}
.vl-beat-flat,.vl-beat-spike{stroke:var(--violet)}
.vl-pulse{position:relative;width:14px;height:14px;flex:none;border-radius:50%;box-shadow:0 0 0 4px var(--bg)}
.vl-ring,.vl-dot{position:absolute;inset:0;border-radius:50%;background:var(--violet)}
.vl-trail{padding-top:calc(var(--phone-w) * .62 - 60px)}
.vl-trail svg{width:100%;height:120px}
.vl-after{stroke:var(--line)}
.vl-phone-hero{width:var(--phone-w);position:relative}

/* Floating cards around the hero phone (wide screens only). */
.vl-float{position:absolute;z-index:3;width:252px;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--float-shadow);text-align:left}
.vl-float--1{top:4%;right:calc(100% + 212px)}
.vl-float--2{top:45%;right:calc(100% + 28px)}
.vl-float--3{top:5%;left:calc(100% + 44px);width:268px;flex-direction:column;align-items:stretch;padding:14px}
.vl-float--4{top:44%;left:calc(100% + 72px)}
.vl-tile{width:40px;height:40px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center}
.vl-tile--doc{background:var(--doc-tint);color:var(--doc)}
.vl-tile--local{background:var(--violet-tint);color:var(--violet);position:relative;overflow:hidden}
.vl-tile--plain{background:var(--surface);color:var(--ink)}
.vl-tile--sm{width:32px;height:32px}
.vl-fl-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.vl-fl-t{font-size:15px;font-weight:600;line-height:1.25;color:var(--ink)}
.vl-fl-s{font-size:13px;line-height:1.3;color:var(--muted)}
.vl-scanline{position:absolute;left:5px;right:5px;top:6px;height:2px;border-radius:2px;background:var(--violet);box-shadow:0 0 8px var(--violet)}
.vl-search{height:40px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:15px;color:var(--ink)}
.vl-search svg{stroke:var(--muted);flex:none}
.vl-typed{display:inline-block;overflow:hidden;white-space:nowrap}
.vl-caret{width:1.5px;height:18px;background:var(--ink);margin-left:-6px}
.vl-hit{display:flex;align-items:center;gap:10px;padding:0 2px}
.vl-hit-body{display:flex;flex-direction:column;gap:2px}
.vl-hit-t{font-size:14px;font-weight:600;color:var(--ink)}
.vl-hit-s{font-size:12.5px;color:var(--muted)}

/* ---- Phone frame ------------------------------------------------------- */

.vl-phone{container-type:inline-size;width:100%}
.vl-bezel{padding:2.4cqi;border-radius:15.5cqi;background:var(--bezel);box-shadow:var(--phone-shadow)}
.vl-screen{position:relative;aspect-ratio:390/844;border-radius:13cqi;overflow:hidden;background:#F6F9FA}
.vl-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vl-status{position:absolute;top:2.6cqi;left:0;right:0;height:8.4cqi;display:flex;align-items:center;justify-content:space-between;padding:0 8cqi 0 11cqi;font-size:3.9cqi;font-weight:600;color:#03111E}
.vl-status svg{width:13cqi;height:auto;display:block}
.vl-island{position:absolute;top:2.6cqi;left:50%;transform:translateX(-50%);width:29cqi;height:8.4cqi;border-radius:999px;background:#000}

/* ---- Scroll-lit paragraph ---------------------------------------------- */

.vl-lit{padding:clamp(104px,12vw,184px) 16px clamp(24px,4vw,64px)}
.vl-lit-p{margin:0 auto;max-width:1080px;text-align:center;font-size:clamp(28px,3.7vw,54px);font-weight:600;letter-spacing:-.025em;line-height:1.22;color:var(--ink);text-wrap:pretty}
.vl-nw{white-space:nowrap}
.vl-t{display:inline-block;overflow:hidden;width:.92em;height:.92em;border-radius:.26em;background:var(--doc-tint);color:var(--doc);vertical-align:-.27em;margin-right:.2em}
.vl-t svg{display:block;width:58%;height:58%;margin:.19em auto 0}
.vl-v{color:var(--violet-ink)}

/* ---- How it works ------------------------------------------------------ */

.vl-steps-sec{padding:clamp(88px,10vw,160px) 0 0}
.vl-h2{margin:0 auto clamp(40px,4.4vw,72px);padding:0 16px;max-width:900px;text-align:center;font-size:clamp(34px,4.3vw,62px);font-weight:800;letter-spacing:-.04em;line-height:1.04;color:var(--ink)}
.vl-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;list-style:none;margin:0 auto;padding:0 32px;max-width:1240px}
.vl-steps>li{display:flex;flex-direction:column;gap:28px;min-width:0}
.vl-step{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.vl-step-h{display:flex;align-items:center;justify-content:center;gap:12px}
.vl-num{width:30px;height:30px;flex:none;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.vl-step h3{margin:0;font-size:23px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.vl-step p{margin:0;font-size:16px;line-height:1.5;color:var(--muted);text-wrap:pretty}

/* ---- Section headings shared by the vault, roadmap and download -------- */

.vl-h2b{margin:0;font-size:clamp(36px,4.4vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1.02;color:var(--ink);text-wrap:balance}

/* ---- The vault --------------------------------------------------------- */

.vl-vault-sec{padding:clamp(96px,11vw,168px) clamp(16px,1.7vw,24px) 0}
.vl-band{max-width:1392px;margin:0 auto;background:var(--band);border:1px solid var(--band-edge);border-radius:clamp(24px,2.8vw,40px);padding:clamp(40px,6.6vw,112px) clamp(20px,6.6vw,112px);color:#EEF5F6}
.vl-vault{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.vl-vault-head{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.vl-vault-head .vl-h2b{color:#FFFFFF}
.vl-local{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:rgba(151,151,255,.16);color:#A9A9FF;font-size:14px;font-weight:600}
.vl-band-link{color:#EEF5F6;font-size:17px;font-weight:600;text-decoration:underline;text-decoration-color:rgba(238,245,246,.4)}
.vl-facts{list-style:none;margin:0;padding:0;border-bottom:1px solid rgba(255,255,255,.12)}
.vl-facts li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:18px;align-items:start;padding:24px 0;border-top:1px solid rgba(255,255,255,.12)}
.vl-facts svg{margin-top:3px;stroke:#8C9BA2}
.vl-facts .vl-fact--local svg{stroke:#9797FF}
.vl-facts span{font-size:clamp(18px,1.5vw,21px);line-height:1.45;color:#EEF5F6}

/* ---- Coming next ------------------------------------------------------- */

.vl-next-sec{padding:clamp(96px,11vw,168px) 16px 0}
.vl-next-wrap{max-width:1176px;margin:0 auto}
.vl-next-head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.vl-chip{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:14px;font-weight:600}
.vl-next{margin-top:clamp(40px,4.4vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vl-next>div{display:flex;flex-direction:column;gap:16px;padding:clamp(28px,3.4vw,48px) clamp(0px,2.6vw,40px)}
.vl-next>div:first-child{padding-left:0}
.vl-next>div:last-child{padding-right:0}
.vl-next>div+div{border-left:1px solid var(--line)}
.vl-ntile{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.vl-ntile--local{background:var(--violet-tint);color:var(--violet)}
.vl-ntile--plain{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.vl-next h3{margin:0;font-size:clamp(22px,1.8vw,27px);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--ink);text-wrap:balance}
.vl-next p{margin:0;font-size:17px;line-height:1.6;color:var(--muted);text-wrap:pretty}

/* ---- Download ---------------------------------------------------------- */

.vl-dl{padding:clamp(96px,11vw,168px) 16px 0;text-align:center;scroll-margin-top:clamp(64px,5.8vw,84px)}
.vl-sub{margin:18px auto 0;max-width:560px;font-size:clamp(17px,1.45vw,21px);line-height:1.5;color:var(--muted)}
.vl-dl-row{margin-top:clamp(36px,3.6vw,56px);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(24px,3.4vw,56px)}
.vl-dl-badges{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.vl-vr{width:1px;align-self:stretch;background:var(--line)}
.vl-qr{display:flex;align-items:center;gap:20px;text-align:left;text-decoration:none;color:inherit;border-radius:18px}
.vl-qr-box{display:block;padding:10px;border-radius:18px;background:#FFFFFF;border:1px solid var(--line)}
.vl-qr-box img{width:132px;height:132px}
.vl-qr-cap{display:flex;flex-direction:column;gap:6px;max-width:180px}
.vl-qr:hover .vl-qr-u{text-decoration:underline;text-underline-offset:3px}
.vl-qr-t{font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.vl-qr-u{font-size:13px;color:var(--muted)}
.vl-dl-link{font-size:18px;font-weight:600}
.vl-show-sm{display:none}

/* ---- FAQ --------------------------------------------------------------- */

.vl-faq-sec{padding:clamp(96px,11vw,168px) 16px 0}
.vl-faq{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;background:var(--card);border:1px solid var(--line);border-radius:clamp(24px,2.6vw,36px);padding:clamp(28px,5vw,80px) clamp(20px,5vw,80px)}
.vl-faq h2{margin:0;font-size:clamp(40px,4.8vw,72px);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.vl-q{border-bottom:1px solid var(--line)}
.vl-q:last-child{border-bottom:0}
.vl-q summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:22px 0;min-height:44px;list-style:none;cursor:pointer}
.vl-q summary::-webkit-details-marker{display:none}
.vl-q summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:8px}
.vl-q:last-child summary{padding-bottom:4px}
.vl-qt{display:block;min-width:0;font-size:clamp(18px,1.45vw,21px);font-weight:600;line-height:1.35;color:var(--ink)}
.vl-x{flex:none;width:36px;height:36px;border-radius:50%;background:var(--surface);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.22,1,.36,1),background .25s}
.vl-q[open] .vl-x{transform:rotate(45deg);background:var(--ink);color:var(--bg)}
.vl-q p{margin:0;padding:0 60px 26px 0;font-size:17px;line-height:1.6;color:var(--muted);max-width:64ch;text-wrap:pretty}
.vl-q:last-child p{padding:18px 60px 4px 0}

/* ---- Footer ------------------------------------------------------------ */

.vl-footer{margin-top:clamp(96px,11vw,168px);background:var(--foot);color:#EEF5F6;padding:clamp(56px,6vw,96px) clamp(16px,2.3vw,32px) 40px}
.vl-footer a{color:#EEF5F6}
.vl-foot-in{max-width:1176px;margin:0 auto}
.vl-foot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px}
.vl-foot-l{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.vl-foot-brand{display:flex;align-items:center;gap:10px}
.vl-foot-brand .vl-word{font-size:30px;color:#FFFFFF}
.vl-foot-by{margin:0;font-size:clamp(20px,1.7vw,24px);font-weight:600;letter-spacing:-.015em;line-height:1.3;color:#EEF5F6;text-wrap:balance}
.vl-addrs{display:flex;flex-wrap:wrap;gap:24px 48px;margin-top:4px}
.vl-addrs address{font-style:normal;display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.5;color:#8C9BA2}
.vl-addrs strong{font-size:16px;font-weight:600;color:#EEF5F6}
.vl-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px;align-content:start}
.vl-links a{font-size:17px;font-weight:600;text-decoration:none}
.vl-links .vl-qr-li{grid-row:span 3}
.vl-links .vl-qr-link{display:inline-flex;flex-direction:column;gap:8px;color:#8C9BA2;font-size:13px;font-weight:400}
.vl-qr-mini{display:block;padding:6px;border-radius:12px;background:#FFFFFF;width:max-content}
.vl-qr-mini img{width:84px;height:84px}
.vl-legal{margin-top:clamp(48px,5vw,80px);padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;font-size:14px;line-height:1.5;color:#8C9BA2}
.vl-textbtn{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}
.vl-textbtn:hover{color:#EEF5F6}

/* ---- Cookie consent ---------------------------------------------------- */

/* Deliberately small, like the reference site's bar, but with two equal
   buttons: refusing must be as easy as accepting. See consent.js. */
.vl-consent{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:30;width:min(640px,calc(100% - 32px));display:flex;align-items:center;gap:16px;padding:12px 12px 12px 20px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--float-shadow)}
.vl-consent p{margin:0;flex:1;min-width:0;font-size:14px;line-height:1.45;color:var(--text)}
.vl-consent-btns{display:flex;gap:8px;flex:none}
.vl-cbtn{height:40px;min-width:96px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.vl-cbtn:hover{border-color:var(--muted)}

/* ---- Privacy policy page ----------------------------------------------- */

.vp-header{max-width:1240px;margin:0 auto;padding:0 clamp(16px,2.3vw,32px);height:clamp(64px,5.8vw,84px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.vp-main{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,88px) 16px clamp(80px,9vw,128px)}
.vp-back{font-size:15px;font-weight:600;color:var(--muted);text-decoration:none}
.vp-h1{margin:20px 0 0;font-size:clamp(40px,5.4vw,72px);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ink);text-wrap:balance}
.vp-meta{margin:18px 0 0;font-size:15px;color:var(--muted)}
.vp-lead{margin:40px 0 0;font-size:clamp(20px,1.8vw,24px);font-weight:600;line-height:1.45;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.vp-secs{margin-top:48px;border-top:1px solid var(--line)}
.vp-sec{padding:32px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px;scroll-margin-top:16px}
.vp-sec h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.vp-sec p{margin:0;font-size:17px;line-height:1.65;color:var(--text)}
.vp-sec code{font-size:.92em}
.vp-footer{background:#03111E;color:#8C9BA2;padding:32px clamp(16px,2.3vw,32px)}
.vp-footer-in{max-width:1176px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;font-size:14px;line-height:1.5}

/* ---- Motion ------------------------------------------------------------ */

.vl-in{opacity:0;transform:translateY(22px);animation:vl-rise .9s cubic-bezier(.22,1,.36,1) forwards}
.vl-in--1{animation-delay:.05s}
.vl-in--2{animation-delay:.2s}
.vl-in--3{animation-delay:.34s}
.vl-in-phone{opacity:0;transform:translateY(80px);animation:vl-rise 1.2s cubic-bezier(.22,1,.36,1) .42s forwards}
.vl-ecg-flat{stroke-dasharray:100;stroke-dashoffset:100;animation:vl-draw 1.15s linear 1s forwards}
.vl-ecg-spike{stroke-dasharray:100;stroke-dashoffset:100;animation:vl-draw .5s linear 2.15s forwards}
.vl-dot{transform:scale(0);animation:vl-land .55s cubic-bezier(.22,1,.36,1) 2.63s forwards}
.vl-ring{opacity:0;animation:vl-ring 1.3s cubic-bezier(.22,1,.36,1) 2.85s 1,vl-ringloop 2.8s ease-out 4.6s infinite}
.vl-beat-flat{opacity:0;stroke-dasharray:7 200;stroke-dashoffset:7;animation:vl-beatflat 2.8s linear 4.6s infinite}
.vl-beat-spike{opacity:0;stroke-dasharray:18 200;stroke-dashoffset:18;animation:vl-beatspike 2.8s linear 4.6s infinite}
.vl-after{opacity:0;animation:vl-tile .8s ease-out 3.1s forwards}
.vl-rise{opacity:0;transform:translateY(12px);animation:vl-rise .7s cubic-bezier(.22,1,.36,1) forwards,vl-bob 7s ease-in-out infinite}
.vl-float--1{animation-delay:3s,4s}
.vl-float--2{animation-delay:3.2s,4.9s}
.vl-float--3{animation-delay:3.4s,4.4s}
.vl-float--4{animation-delay:3.6s,5.3s}
.vl-bob-phone{animation:vl-bob 9s ease-in-out 1.8s infinite}
.vl-logo-line{stroke-dasharray:100;stroke-dashoffset:100;animation:vl-logo 7s cubic-bezier(.65,0,.35,1) .2s infinite}
.vl-logo-dot{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:vl-logodot 7s ease .2s infinite}
.vl-typed{max-width:0;animation:vl-type 6s steps(7,end) 3.9s infinite}
.vl-caret{animation:vl-blink 1s steps(1) infinite}
.vl-scanline{opacity:0;animation:vl-scan 2.6s ease-in-out 3.7s infinite}

@keyframes vl-rise{to{opacity:1;transform:none}}
@keyframes vl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes vl-draw{to{stroke-dashoffset:0}}
@keyframes vl-land{0%{transform:scale(0)}55%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes vl-ring{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
@keyframes vl-ringloop{0%,67%{opacity:0;transform:scale(1)}69%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
@keyframes vl-beatflat{0%{opacity:0;stroke-dashoffset:7}4%{opacity:1}52%{opacity:1;stroke-dashoffset:-100}53%,100%{opacity:0;stroke-dashoffset:-100}}
@keyframes vl-beatspike{0%,52%{opacity:0;stroke-dashoffset:18}53%{opacity:1}68%{opacity:1;stroke-dashoffset:-100}69%,100%{opacity:0;stroke-dashoffset:-100}}
@keyframes vl-tile{to{opacity:1}}
@keyframes vl-logo{0%{stroke-dashoffset:100}22%,84%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes vl-logodot{0%,20%{transform:scale(0)}26%{transform:scale(1.45)}31%,86%{transform:scale(1)}94%,100%{transform:scale(0)}}
@keyframes vl-type{0%{max-width:0}30%,86%{max-width:3.6em}100%{max-width:0}}
@keyframes vl-blink{50%{opacity:0}}
@keyframes vl-scan{0%{top:6px;opacity:0}12%{opacity:1}55%{top:32px;opacity:1}65%,100%{top:32px;opacity:0}}
@keyframes vl-lit{to{color:var(--ink)}}
@keyframes vl-litv{to{color:var(--violet-ink)}}

/* Each word lights from pale to ink as it crosses the viewport. Where the
   browser has no scroll timelines the paragraph is simply ink. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .vl-w{color:var(--pale);animation:vl-lit linear both;animation-timeline:view();animation-range:cover 22% cover 40%}
    .vl-w.vl-v{animation-name:vl-litv}
    .vl-t{opacity:.3;animation:vl-tile linear both;animation-timeline:view();animation-range:cover 22% cover 40%}
  }
}

@media (prefers-reduced-motion:reduce){
  .vl-ecg-flat,.vl-ecg-spike{animation:none;stroke-dashoffset:0}
  .vl-dot{animation:none;transform:none}
  .vl-ring{animation:none;opacity:0}
  .vl-after{animation:none;opacity:1}
  .vl-rise{animation:none;opacity:1;transform:none}
  .vl-logo-line{animation:none;stroke-dashoffset:0}
  .vl-logo-dot{animation:none;transform:none}
  .vl-typed{animation:none;max-width:3.6em}
  .vl-caret,.vl-scanline,.vl-bob-phone{animation:none}
  .vl-in,.vl-in-phone{animation:none;opacity:1;transform:none}
  .vl-beat-flat,.vl-beat-spike{animation:none;opacity:0}
  .vl-x,.vl-seg{transition:none}
}

/* ---- Breakpoints (the design's container widths) ------------------------ */

/* 1320, not the design's 1180: the outer-left card sits 212px + its own 252px
   left of a 27vw phone, so below ~1315px it runs off the edge of the page. */
@media (max-width:1320px){.vl-float{display:none!important}}
@media (max-width:960px){
  .vl-steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:0 16px 12px;scroll-padding-inline:16px;scrollbar-width:none}
  .vl-steps::-webkit-scrollbar{display:none}
  .vl-steps>li{flex:0 0 min(76%,300px);scroll-snap-align:start}
  .vl-vault{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:760px){
  .vl-next{grid-template-columns:minmax(0,1fr)}
  .vl-next>div{padding-left:0;padding-right:0}
  .vl-next>div+div{border-left:0;border-top:1px solid var(--line)}
  .vl-faq{grid-template-columns:minmax(0,1fr);gap:20px}
  .vl-foot{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:640px){
  .vl-hide-sm{display:none!important}
  .vl-show-sm{display:block}
  .vl-consent{flex-direction:column;align-items:stretch;gap:12px;padding:16px}
  .vl-consent-btns .vl-cbtn{flex:1}
}