/* Leet Drive page. Same family as the Leet Assistant page (Roboto, slanted LEET wordmark, floating pill nav,
   indigo primary from the app theme) with the app's teal "sealed" tone as the second colour.
   Every colour is a token below and has a light and a dark value (follows the visitor's system theme). */
:root{
  color-scheme:dark;
  --bg:#131318;--bg2:#17171d;--text:#e4e1e9;--dim:#c7c5d0;--faint:#90909a;--line:rgba(199,197,208,.16);--line2:rgba(199,197,208,.28);
  --hi:#25252c;--hi2:#303038;--card:#1c1c23;--card2:#22222a;
  --acc:#bbc3ff;--accfg:#17278f;--accc:#3142a9;--acccfg:#dfe0ff;
  --seal:#86d6c9;--sealc:#00504a;--sealfg:#a7f2e5;
  --warn:#ffb95c;--warnc:#5a3a00;
  --paper:#2a2a33;--paperln:#4a4a56;--ink:#e4e1e9;
  --sh:0 30px 80px rgba(0,0,0,.55);--glow:rgba(187,195,255,.10);
}
@media(prefers-color-scheme:light){:root{
  color-scheme:light;
  --bg:#fdfbff;--bg2:#f6f4fb;--text:#1b1b21;--dim:#46464f;--faint:#6f6f7a;--line:rgba(70,70,79,.14);--line2:rgba(70,70,79,.26);
  --hi:#efedf4;--hi2:#e4e1e9;--card:#ffffff;--card2:#f5f2fa;
  --acc:#4a5bc4;--accfg:#ffffff;--accc:#dfe0ff;--acccfg:#00105c;
  --seal:#1f6b62;--sealc:#a7f2e5;--sealfg:#00201c;
  --warn:#8a5a00;--warnc:#ffddb3;
  --paper:#ffffff;--paperln:#d4d2de;--ink:#1b1b21;
  --sh:0 30px 70px rgba(50,50,90,.16);--glow:rgba(74,91,196,.08);
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 Roboto,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{display:block}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
h1,h2,h3,h4{margin:0;font-family:Roboto,sans-serif}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--acc);color:var(--accfg);padding:10px 16px;border-radius:99px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* nav: the same floating pill as the Assistant page */
.wm{height:20px;width:auto;aspect-ratio:303/84;fill:currentColor;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.nav{position:fixed;z-index:40;top:12px;left:0;right:0;pointer-events:none}
.navin{pointer-events:auto;width:min(1120px,100% - 24px);margin-inline:auto;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 20px;border-radius:99px;background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);transition:background .3s,box-shadow .3s}
.nav.scrolled .navin{background:color-mix(in srgb,var(--bg) 88%,transparent);box-shadow:0 10px 40px rgba(0,0,0,.22)}
.logo{display:flex;align-items:flex-end;gap:9px;text-decoration:none;color:var(--text)}
.logo .rm{flex:none;width:30px;height:30px;align-self:center;margin-right:2px;border-radius:7px;box-shadow:0 0 0 1px var(--line)}
.logo small{font:500 12.5px/1 Roboto;letter-spacing:2.8px;color:var(--dim);text-transform:uppercase;padding-bottom:1px}
.nav nav{margin:0 auto;display:flex;gap:2px}
.nav nav a{white-space:nowrap;text-decoration:none;font-weight:500;font-size:14.5px;color:var(--dim);padding:9px 15px;border-radius:99px;transition:background .2s,color .2s}
.nav nav a:hover{background:var(--hi);color:var(--text)}
.navcta{flex:none;text-decoration:none;background:var(--acc);color:var(--accfg);font:600 14.5px Roboto;border-radius:99px;padding:10px 20px;transition:filter .2s}
.navcta:hover{filter:brightness(1.1)}
@media(max-width:900px){.nav nav{display:none}.navin{justify-content:space-between}}
@media(max-width:380px){.navin{padding-left:14px}.navcta{padding:10px 14px;font-size:13.5px}}

/* buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:99px;background:var(--acc);color:var(--accfg);font:600 16px Roboto;text-decoration:none;border:0;cursor:pointer;transition:filter .2s,transform .2s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.out{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn.soon{cursor:default;background:var(--hi);color:var(--dim)}
.btn.soon:hover{transform:none;filter:none}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* section heads */
section{padding:clamp(64px,9vw,120px) 0}
.kick{display:inline-flex;align-items:center;gap:10px;font:700 12.5px/1 Roboto;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.kick::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.kick.s{color:var(--seal)}
h2{font:800 clamp(32px,5vw,56px)/1.05 Roboto;letter-spacing:-.035em;margin:18px 0 0;max-width:15em}
h2 em{font-style:normal;color:var(--acc)}
h2 em.s{color:var(--seal)}
.lead{font-size:clamp(17px,1.7vw,19.5px);color:var(--dim);max-width:36em;margin:18px 0 0}
.lead strong{color:var(--text);font-weight:500}

/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.js .rv.in{opacity:1;transform:none}
/* the hero never waits for scroll: it plays a plain load animation */
.js .hero .rv{opacity:1;transform:none;transition:none;animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ============ HERO ============ */
.hero{position:relative;padding:clamp(120px,15vw,170px) 0 clamp(50px,7vw,90px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70vw;height:70vw;max-width:900px;max-height:900px;background:radial-gradient(closest-side,color-mix(in srgb,var(--accc) 55%,transparent),transparent 72%);opacity:.55;pointer-events:none}
.hero::after{content:"";position:absolute;left:-20vw;bottom:-30vw;width:60vw;height:60vw;background:radial-gradient(closest-side,color-mix(in srgb,var(--sealc) 60%,transparent),transparent 70%);opacity:.35;pointer-events:none}
.hgrid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(20px,4vw,60px);align-items:center}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--hi);color:var(--dim);border-radius:99px;padding:7px 15px 7px 11px;font-size:13.5px;font-weight:500}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--seal);box-shadow:0 0 0 4px color-mix(in srgb,var(--seal) 22%,transparent)}
h1{font:900 clamp(42px,7vw,86px)/.98 Roboto;letter-spacing:-.045em;margin:22px 0 0}
h1 span{display:block}
h1 em{font-style:normal;color:var(--seal)}
.hero .lead{margin-top:22px}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center}
.hnote{margin:18px 0 0;color:var(--faint);font-size:14.5px}

/* hero scene (inline SVG; colours from tokens) */
.scene{position:relative;width:100%;max-width:560px;justify-self:end}
.scene svg{width:100%;height:auto;overflow:visible}
.scene .ph{fill:var(--card);stroke:var(--line2);stroke-width:1.5}
.scene .phs{fill:var(--hi)}
.scene .pp{fill:var(--paper);stroke:var(--paperln);stroke-width:1.2}
.scene .pl{stroke:var(--paperln);stroke-width:5;stroke-linecap:round}
.scene .pk{fill:var(--accc)}
.scene .pt{font:700 11px Roboto;letter-spacing:.12em;fill:var(--dim)}
.scene .tag{fill:var(--sealc)}
.scene .tagt{font:700 9.5px Roboto;letter-spacing:.06em;fill:var(--sealfg)}
.scene .shb{fill:color-mix(in srgb,var(--bg) 70%,var(--sealc));stroke:var(--seal);stroke-width:3;stroke-linejoin:round}
.scene .shd{fill:none;stroke:var(--seal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.scene .route{fill:none;stroke:var(--line2);stroke-width:2;stroke-dasharray:2 8;stroke-linecap:round}
.scene .cl{fill:var(--card);stroke:var(--acc);stroke-width:2.4}
.scene .clr{fill:none;stroke:var(--acc);stroke-width:1.5;opacity:0}
.scene .cli{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scene .st{fill:var(--card);stroke:var(--line2);stroke-width:1.3}
.scene .sti{fill:none;stroke:var(--dim);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scene .stt{font:500 10.5px Roboto;fill:var(--dim)}
.scene .lbl{font:700 10px Roboto;letter-spacing:.14em;fill:var(--faint)}
.scene .us{font:700 10px Roboto;letter-spacing:.14em;fill:var(--faint)}
.scene .usx{stroke:var(--faint);stroke-width:2;stroke-linecap:round}
.scene .sht{fill:none;stroke:var(--seal);stroke-width:2;opacity:.35}
/* motion */
.js .scene .p1,.js .scene .p2,.js .scene .p3{animation:pin 1s cubic-bezier(.2,.8,.2,1) both}
.js .scene .p2{animation-delay:.15s}.js .scene .p3{animation-delay:.3s}
@keyframes pin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js .scene .shield{animation:pop .7s .9s cubic-bezier(.3,1.5,.5,1) both;transform-box:fill-box;transform-origin:center}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.js .scene .shd{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .8s 1.4s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.scene .sht{transform-box:fill-box;transform-origin:center;animation:halo 3.2s 2s ease-out infinite}
@keyframes halo{0%{opacity:.45;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.5)}}
.scene .clr{transform-box:fill-box;transform-origin:center;animation:ring 3.6s 2.6s ease-out infinite}
@keyframes ring{0%{opacity:.6;transform:scale(.92)}60%,100%{opacity:0;transform:scale(1.25)}}
.scene .route{animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.scene .float{animation:fl 6s ease-in-out infinite}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ============ PAPERS ============ */
.papers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:46px}
.paper{position:relative;overflow:hidden;padding:20px 18px 18px;border-radius:22px;background:var(--card);border:1px solid var(--line);min-height:150px;display:flex;flex-direction:column;transition:transform .3s,border-color .3s}
.paper:hover{transform:translateY(-3px);border-color:var(--line2)}
.paper .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accc);color:var(--acccfg)}
.paper .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.paper b{display:block;margin-top:16px;font:700 17px/1.25 Roboto}
.paper small{display:block;margin-top:4px;color:var(--faint);font-size:13.5px;line-height:1.4}
.paper .ex{position:absolute;top:16px;right:16px;font:700 10.5px/1 Roboto;letter-spacing:.06em;padding:6px 9px;border-radius:99px;background:var(--warnc);color:var(--warn)}
.paper.s .ic{background:var(--sealc);color:var(--sealfg)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.fact{padding:22px;border-radius:22px;background:var(--bg2);border:1px solid var(--line)}
.fact b{display:block;font:700 16.5px/1.3 Roboto}
.fact span{display:block;margin-top:6px;color:var(--dim);font-size:15px;line-height:1.55}

/* ============ YOUR STORAGE ============ */
.store{background:linear-gradient(180deg,var(--bg),var(--bg2) 20%,var(--bg2) 80%,var(--bg))}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center}
.flow{position:relative;padding:28px;border-radius:30px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh)}
.flow ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.flow li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:14px;border-radius:18px;background:var(--bg2)}
.flow li .n{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--hi);color:var(--text)}
.flow li .n svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.flow li.k .n{background:var(--sealc);color:var(--sealfg)}
.flow li.c .n{background:var(--accc);color:var(--acccfg)}
.flow li b{display:block;font:600 15.5px/1.3 Roboto}
.flow li span{display:block;color:var(--faint);font-size:13.5px;line-height:1.4;margin-top:2px}
.flow .bar{height:2px;margin:0 0 0 35px;width:2px;background:var(--line2)}
.flow .no{margin-top:16px;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;border:1.5px dashed var(--line2);color:var(--dim);font-size:14.5px}
.flow .no svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--faint);stroke-width:1.9;stroke-linecap:round}
.flow .no b{color:var(--text);font-weight:600}
.places{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.place{position:relative;padding:18px 16px 16px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.place svg{width:26px;height:26px;fill:none;stroke:var(--text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.place b{display:block;margin-top:12px;font:600 15px/1.25 Roboto}
.place small{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--faint)}
.place .st{display:inline-block;margin-top:10px;font:700 10.5px/1 Roboto;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:99px;background:var(--sealc);color:var(--sealfg)}
.place .st.soon{background:var(--hi);color:var(--faint)}

/* ============ ONE PIN ============ */
.pgrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,5vw,70px);align-items:center}
.newphone{position:relative;max-width:420px;margin-inline:auto;padding:30px 26px 26px;border-radius:36px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--sh)}
.newphone .top{display:flex;justify-content:space-between;color:var(--faint);font:500 12px Roboto;letter-spacing:.12em;text-transform:uppercase}
.newphone h4{margin:22px 0 4px;font:700 22px/1.2 Roboto;letter-spacing:-.01em}
.newphone p{margin:0;color:var(--dim);font-size:14.5px}
.dots{display:flex;gap:12px;justify-content:center;margin:26px 0 22px}
.dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);transition:background .25s,border-color .25s,transform .25s}
.dots i.on{background:var(--acc);border-color:var(--acc);transform:scale(1.1)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.keys span{display:grid;place-items:center;height:46px;border-radius:16px;background:var(--bg2);font:500 19px Roboto;color:var(--text);transition:background .2s}
.keys span.t{background:var(--accc);color:var(--acccfg)}
.back{margin-top:18px;display:grid;gap:8px}
.back div{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;background:var(--bg2);font-size:14.5px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.back div.on{opacity:1;transform:none}
.back div svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--seal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.back div em{margin-left:auto;font-style:normal;color:var(--faint);font-size:13px}
.steps{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:4px}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps em{font:800 15px/1.6 Roboto;font-style:normal;color:var(--acc)}
.steps b{display:block;font:600 17px/1.35 Roboto}
.steps span{display:block;color:var(--dim);font-size:15.5px;margin-top:2px}
.honest{margin-top:22px;display:flex;gap:14px;padding:16px 18px;border-radius:18px;background:var(--warnc);color:var(--text);font-size:14.5px;line-height:1.55}
.honest svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--warn);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.honest b{color:var(--warn)}

/* ============ LEET APPS ============ */
.apps{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:46px}
.app{position:relative;overflow:hidden;padding:30px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--tint) 55%,transparent),transparent 92%);border:1px solid var(--line)}
.app.a{--tint:var(--accc)}
.app.b{--tint:var(--sealc)}
.app .wm{height:26px;color:var(--text)}
.app .nm{display:flex;align-items:flex-end;gap:10px}
.app .nm small{font:500 12.5px/1 Roboto;letter-spacing:2.8px;text-transform:uppercase;color:var(--dim);padding-bottom:2px}
.app p{margin:18px 0 0;color:var(--dim);font-size:15.5px;max-width:30em}
.app .blob{margin-top:22px;display:flex;align-items:center;gap:10px;font:500 12.5px ui-monospace,Consolas,monospace;color:var(--faint);overflow:hidden;white-space:nowrap}
.app .blob svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--seal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app a{color:var(--text);font-weight:500;text-decoration-color:var(--acc);text-underline-offset:4px}

/* ============ SHARE SAFELY ============ */
.shgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,70px);align-items:center}
.idc{position:relative;overflow:hidden;max-width:470px;margin-inline:auto;aspect-ratio:1.586;border-radius:22px;padding:22px 24px;background:var(--paper);border:1px solid var(--paperln);box-shadow:var(--sh);color:var(--ink)}
.idc .h{display:flex;justify-content:space-between;align-items:center;font:700 11px Roboto;letter-spacing:.16em;color:var(--faint)}
.idc .h i{width:34px;height:6px;border-radius:3px;background:var(--paperln)}
.idc .bd{display:grid;grid-template-columns:78px 1fr;gap:18px;margin-top:18px}
.idc .face{aspect-ratio:.8;border-radius:12px;background:var(--hi);display:grid;place-items:end center;overflow:hidden}
.idc .face svg{width:70%;fill:var(--paperln)}
.idc .ln{height:8px;border-radius:4px;background:var(--paperln);margin:7px 0}
.idc .ln.w{width:70%}.idc .ln.x{width:45%}
.idc .nm{font:700 15px Roboto;margin-bottom:6px}
.num{position:absolute;left:24px;right:24px;bottom:22px;font:700 clamp(19px,3.4vw,26px)/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;display:flex;gap:.55em}
.num span{position:relative;display:inline-block}
.num .m::after{content:"";position:absolute;inset:-4px -3px;border-radius:5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.6,0,.2,1)}
.idc.masked .num .m::after{transform:scaleX(1)}
.idc.masked .num .m+.m::after{transition-delay:.12s}
.mark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .5s .2s}
.mark span{transform:rotate(-24deg);font:800 clamp(15px,2.6vw,20px) Roboto;letter-spacing:.05em;color:var(--acc);opacity:.55;white-space:nowrap;border:2px solid currentColor;padding:6px 14px;border-radius:10px}
.idc.marked .mark{opacity:1}
.toggles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}
.tg{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:99px;border:0;background:var(--hi);color:var(--text);font:500 14.5px Roboto;cursor:pointer;transition:background .2s,color .2s}
.tg[aria-pressed="true"]{background:var(--accc);color:var(--acccfg)}
.tg i{width:16px;height:16px;border-radius:5px;border:2px solid currentColor;display:grid;place-items:center}
.tg[aria-pressed="true"] i::after{content:"";width:6px;height:6px;border-radius:2px;background:currentColor}
.chk{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.chk li{display:flex;gap:14px;align-items:flex-start;color:var(--dim);font-size:16px}
.chk li svg{flex:none;width:22px;height:22px;margin-top:2px;fill:none;stroke:var(--seal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chk li b{color:var(--text);font-weight:600}

/* ============ EXPIRY + EMERGENCY ============ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:46px}
.box{padding:clamp(24px,3vw,34px);border-radius:28px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.box h3{font:800 clamp(22px,2.6vw,28px)/1.15 Roboto;letter-spacing:-.02em}
.box p{color:var(--dim);font-size:15.5px;margin:10px 0 0}
.notif{margin-top:auto;padding-top:24px}
.notif .n{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:22px;background:var(--bg2);border:1px solid var(--line)}
.notif .n+.n{margin-top:8px;opacity:.7}
.notif .bd{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--warnc);color:var(--warn)}
.notif .bd svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.notif small{display:block;font:700 10.5px Roboto;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.notif b{display:block;font:600 15px/1.3 Roboto;margin-top:3px}
.notif em{margin-left:auto;font:700 12px Roboto;font-style:normal;color:var(--warn);white-space:nowrap}
.days{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.days span{font:600 12.5px Roboto;padding:6px 10px;border-radius:99px;background:var(--hi);color:var(--dim)}
.ecard{margin-top:auto;padding-top:24px}
.ecard .c{border-radius:22px;padding:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--sealc) 70%,transparent),var(--bg2) 95%);border:1px solid var(--line)}
.ecard .r{display:flex;justify-content:space-between;align-items:center}
.ecard .r small{font:700 10.5px Roboto;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ecard .bl{font:900 30px/1 Roboto;letter-spacing:-.03em}
.ecard .g{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ecard .g div{padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--bg) 55%,transparent);font-size:13.5px}
.ecard .g div span{display:block;color:var(--faint);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}

/* ============ PROMISES ============ */
.zeros{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:46px}
.z{padding:24px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--accc) 55%,transparent),transparent 92%);border:1px solid var(--line)}
.z b{display:block;font:900 clamp(40px,5vw,60px)/1 Roboto;letter-spacing:-.05em}
.z span{display:block;margin-top:10px;color:var(--dim);font-size:14.5px;line-height:1.45}
.plink{margin-top:22px;color:var(--dim);font-size:15.5px}
.plink a{color:var(--text);font-weight:500;text-decoration-color:var(--acc);text-decoration-thickness:1.5px;text-underline-offset:4px}

/* ============ FAQ ============ */
.faq{margin-top:40px;border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font:600 17.5px/1.4 Roboto}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq p{margin:0 0 20px;color:var(--dim);font-size:16px;max-width:44em}

/* ============ CTA + FOOTER ============ */
.cta{padding:20px 0 80px}
.cta .bx{position:relative;overflow:hidden;padding:clamp(40px,6vw,76px) clamp(22px,5vw,60px);background:linear-gradient(135deg,color-mix(in srgb,var(--accc) 60%,transparent),transparent 90%);border:1px solid var(--line)}
.cta .bx .bigwm{position:absolute;right:-30px;bottom:-24px;height:170px;width:auto;aspect-ratio:303/84;fill:var(--text);opacity:.05}
.cta h2{margin-top:0}
.cta p{color:var(--dim);margin:12px 0 0}
footer{padding:30px 0 50px;color:var(--faint);font-size:14.5px;border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 26px}
footer a{text-decoration:none}
footer a:hover{color:var(--text)}

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
  .hgrid,.sgrid,.pgrid,.shgrid{grid-template-columns:1fr}
  .scene{justify-self:center;max-width:520px}
  .papers{grid-template-columns:repeat(2,1fr)}
  .zeros{grid-template-columns:repeat(2,1fr)}
  .shgrid .idw{order:2}
}
@media(max-width:720px){
  .facts,.apps,.duo{grid-template-columns:1fr}
  .places{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:420px){
  body{font-size:16px}
  .papers{gap:10px}
  .paper{padding:16px 14px 14px;min-height:136px}
  .paper .ex{top:12px;right:12px}
  .places{gap:10px}
  .flow{padding:16px;border-radius:24px}
  .z{padding:20px 16px}
  .newphone{padding:24px 18px 20px}
  .idc{padding:16px 16px}
  .idc .bd{grid-template-columns:60px 1fr;gap:12px;margin-top:12px}
  .num{left:16px;right:16px;bottom:16px}
  .ecard .g{grid-template-columns:1fr}
}

/* ============ PRIVACY POLICY (.pol) ============ */
.pol .phero{padding:clamp(120px,14vw,160px) 0 26px}
.pol h1{font:900 clamp(40px,7vw,96px)/.98 Roboto;letter-spacing:-.045em;max-width:10em;margin:20px 0 0}
.pol .dek{font-size:clamp(18px,1.9vw,21px);color:var(--dim);max-width:36em;margin:24px 0 0}
.pol .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pol .meta span{font:500 12.5px/1 Roboto;letter-spacing:.04em;color:var(--dim);padding:9px 14px;border-radius:99px;background:var(--hi)}
.pol .meta b{color:var(--text)}
.pol .chips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.pol .chip{padding:20px 20px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--accc) 55%,transparent),transparent 95%);border:1px solid var(--line)}
.pol .chip.s{background:linear-gradient(135deg,color-mix(in srgb,var(--sealc) 70%,transparent),transparent 95%)}
.pol .chip small{display:block;font:500 12px/1.3 Roboto;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.pol .chip strong{font:900 clamp(26px,3.2vw,40px)/1 Roboto;letter-spacing:-.04em}
.pol .toc{margin-top:26px;padding:26px 28px 28px;background:var(--bg2);border:1px solid var(--line)}
.pol .toc .mono{display:block;margin-bottom:14px;color:var(--dim);font:500 12px Roboto;letter-spacing:.12em;text-transform:uppercase}
.pol .toc ol{list-style:none;padding:0;margin:0;columns:3;column-gap:34px}
.pol .toc li{break-inside:avoid}
.pol .toc a{display:flex;gap:12px;padding:7px 0;text-decoration:none;font-size:15px;color:var(--text)}
.pol .toc a:hover,.pol .toc a.on{color:var(--acc)}
.pol .toc a em{font:700 12px/1.9 Roboto;font-style:normal;color:var(--acc);width:24px;flex:none}
.pol main{padding-bottom:70px}
.pol section{display:grid;grid-template-columns:210px minmax(0,700px);column-gap:60px;padding:50px 0;border-bottom:1px solid var(--line);scroll-margin-top:100px}
.pol section>h2{grid-column:1;grid-row:1/span 60;align-self:start;position:sticky;top:96px;font:700 22px/1.15 Roboto;letter-spacing:-.02em;margin:0;max-width:none}
.pol section>h2 .n{display:block;font:900 76px/.9 Roboto;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.4px var(--acc);margin-bottom:12px;opacity:.75}
.pol section>*:not(h2){grid-column:2;min-width:0}
.pol section>*+*{margin-top:16px}
.pol h3{font:700 12.5px/1.2 Roboto;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:30px 0 0}
.pol section>h3+*{margin-top:8px}
.pol p{color:var(--dim);font-size:16.5px;margin:0}
.pol strong{font-weight:600;color:var(--text)}
.pol main a{color:var(--text);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:1.5px;text-underline-offset:4px;overflow-wrap:anywhere}
.pol main a:hover{color:var(--acc)}
.pol code{font:500 .86em ui-monospace,Consolas,monospace;background:var(--hi);padding:2px 7px;border-radius:6px;color:var(--text);overflow-wrap:anywhere}
.pol ul{padding:0;margin:0;list-style:none}
.pol ul li{position:relative;padding:5px 0 5px 24px;font-size:16.5px;color:var(--dim)}
.pol ul li::before{content:"";position:absolute;left:2px;top:1em;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.pol .callout{position:relative;overflow:hidden;padding:20px 22px 22px 28px;background:var(--card);border:1px solid var(--line2);border-radius:22px}
.pol .callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--seal)}
.pol .callout .lab{display:block;margin-bottom:10px;font:700 12px Roboto;letter-spacing:.12em;text-transform:uppercase;color:var(--seal)}
.pol .callout p{color:var(--text)}
.pol .callout.warn::before{background:var(--warn)}
.pol .callout.warn .lab{color:var(--warn)}
.pol .rows{border-top:1px solid var(--line)}
.pol .row{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5;align-items:baseline}
.pol .row span{color:var(--dim);flex:none;min-width:170px}
.pol .row b{margin-left:auto;font-weight:500;text-align:right;color:var(--text)}
.pol .card{display:grid;grid-template-columns:190px 1fr;gap:22px;padding:17px 0;border-bottom:1px solid var(--line)}
.pol .grid{border-top:1px solid var(--line)}
.pol .card .perm{font:700 13px/1.6 Roboto;letter-spacing:.06em;text-transform:uppercase;color:var(--text);overflow-wrap:anywhere}
.pol .card .why{font-size:15.5px;line-height:1.65;color:var(--dim)}
.pol .contact{display:inline-flex;align-items:center;min-height:56px;padding:0 28px;border-radius:99px;background:var(--acc);color:var(--accfg)!important;text-decoration:none!important;font:600 clamp(17px,3vw,21px) Roboto}
.pol footer{border-top:0;padding-top:10px;line-height:1.8}
.pol footer a{text-decoration:underline;text-underline-offset:3px}
.pol .mtoc{display:none}
@media(max-width:900px){
  .pol .toc ol{columns:2}
  .pol section{grid-template-columns:1fr;padding:38px 0}
  .pol section>h2{grid-column:1;grid-row:auto;position:static;margin-bottom:12px;font-size:26px}
  .pol section>h2 .n{font-size:52px}
  .pol section>*:not(h2){grid-column:1}
}
@media(max-width:700px){
  .pol .chips{grid-template-columns:1fr 1fr}
  .pol .toc{display:none}
  .pol .mtoc{display:block;background:var(--bg2);border:1px solid var(--line);border-radius:22px;margin-top:22px}
  .pol .mtoc summary{padding:16px 20px;cursor:pointer;font:700 13px Roboto;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
  .pol .mtoc ol{list-style:none;margin:0;padding:0 20px 14px}
  .pol .mtoc a{display:flex;gap:12px;padding:8px 0;text-decoration:none;color:var(--text)}
  .pol .mtoc a em{font:700 12px/1.9 Roboto;font-style:normal;color:var(--acc);width:24px}
  .pol .card{grid-template-columns:1fr;gap:4px}
  .pol .row{flex-wrap:wrap;gap:2px 16px}.pol .row b{margin-left:0;text-align:left}
  .pol .row span{min-width:0}
}
@media print{
  .nav,.skip{display:none}
  :root{--bg:#fff;--text:#000;--dim:#222;--faint:#444}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .js .scene .shd{stroke-dashoffset:0}
}
