@font-face{font-family:'Mona Sans';src:url(fonts/MonaSans.ttf) format('truetype');font-weight:200 900;font-stretch:75% 125%;font-display:swap}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#F5F3EE}
img{max-width:100%}
.skip{position:absolute;left:16px;top:-60px;z-index:10;padding:12px 16px;border-radius:10px;background:#F5C451;color:#0B1730;font:600 15px 'Mona Sans',sans-serif}
.skip:focus{top:12px}
.logo{display:inline-flex;align-items:center;gap:9px}.lg-m{width:30px;height:30px;flex:none}.mk{width:100%;height:100%;display:block;overflow:visible}
.lg-t{font:700 25px/1 'Mona Sans',sans-serif;font-stretch:125%;letter-spacing:-0.035em;color:#F5F3EE}
.rule-t{border-top:1px solid var(--rule)}.mt32{margin-top:32px}.sp72{height:72px}.sp40{height:40px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
.pg{container-type:inline-size;background:#F5F3EE;color:#0B1730;font:400 17px/1.55 'Mona Sans',system-ui,sans-serif;overflow-x:clip;min-height:100vh}
.pg a{color:inherit;text-decoration:none}
.pg ::selection{background:#F5C451;color:#0B1730}
.pg a:focus-visible,.pg button:focus-visible,.pg summary:focus-visible{outline:2px solid #2A4A94;outline-offset:3px;border-radius:8px}
.ink a:focus-visible,.ink button:focus-visible{outline-color:#F5C451}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.frame{max-width:1200px;margin:0 auto;border-left:1px solid var(--rule);border-right:1px solid var(--rule);box-sizing:border-box}
.ink{background:#0B1730;color:#F5F3EE;--rule:rgba(245,243,238,.14)}
.paper{--rule:rgba(11,23,48,.14)}
.pad{padding-left:48px;padding-right:48px}
.nav{display:flex;align-items:center;gap:28px;height:76px;border-bottom:1px solid var(--rule)}
.nav .links{display:flex;gap:26px;margin-left:auto;font-size:15px;opacity:.85}
.nav .links a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:12px;border:0;font:600 16px 'Mona Sans',sans-serif;box-sizing:border-box;cursor:pointer;transition:background-color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn .i{transition:transform .2s cubic-bezier(.16,1,.3,1)}.btn:hover .i{transform:translateX(3px)}
.btn.ign{background:#F5C451;color:#0B1730}.btn.ign:hover{background:#F8D277}
.btn.ink{background:#0B1730;color:#F5F3EE}.btn.ink:hover{background:#1A2A4E}
.btn.sm{min-height:44px;padding:0 18px;font-size:15px}
.foot{display:flex;gap:24px;flex-wrap:wrap;padding:28px 48px;font-size:15px;border-top:1px solid var(--rule)}
.foot a:hover{text-decoration:underline;text-underline-offset:5px}
.foot small{margin-left:auto;color:#5A6378;font-size:13px}
.giant{padding:8px 24px 0;font:800 300px/.8 'Mona Sans',sans-serif;font-stretch:125%;letter-spacing:-0.06em;color:#0B1730;white-space:nowrap;overflow:hidden}
@container (max-width: 720px){
 .pad{padding-left:20px;padding-right:20px}
 .nav .links{display:none}.nav .btn{margin-left:auto}
 .foot{padding:24px 20px}.foot small{margin-left:0;flex-basis:100%}
 .giant{font-size:96px;padding:8px 12px 0}
}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-top:72px}
.hero h1{margin:0;font:700 84px/.96 'Mona Sans',sans-serif;font-stretch:108%;letter-spacing:-0.04em;text-wrap:balance}
.hero p{margin:22px 0 0;max-width:34ch;font-size:21px;line-height:1.45;color:#C7CEDB}
.hero .cta{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;align-items:center}
.hero .note{font-size:14px;color:#9FA9BD}
.shot{position:relative;align-self:end;height:560px;overflow:hidden}
.shot .slab{position:absolute;inset:60px 0 0 30px;background:#B7CBEE;border-radius:28px 28px 0 0}
.shot .phone{position:absolute;left:50%;top:110px;width:270px;transform:translateX(-45%)}
.phone{margin:0;border-radius:40px;padding:10px;background:#0B1730;box-shadow:0 24px 60px rgba(11,23,48,.35);box-sizing:border-box}
.phone img{display:block;width:100%;height:auto;border-radius:30px}
.head{padding-top:96px;padding-bottom:36px}
.head h2{margin:0;font:700 56px/1 'Mona Sans',sans-serif;font-stretch:108%;letter-spacing:-0.035em;text-wrap:balance;max-width:18ch}
.head p{margin:14px 0 0;font-size:19px;color:#3A4560;max-width:46ch}
.ink .head p{color:#C7CEDB}
/* connection chain: the focal moment */
.chainbox{border-top:1px solid var(--rule);padding:48px 48px 56px}
.toggle{display:inline-flex;padding:4px;border-radius:14px;background:rgba(245,243,238,.08);gap:4px}
.toggle button{min-height:44px;padding:0 18px;border:0;border-radius:10px;background:transparent;color:#C7CEDB;font:600 15px 'Mona Sans',sans-serif;cursor:pointer}
.toggle button[aria-pressed="true"]{background:#F5F3EE;color:#0B1730}
.chain{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto;align-items:start;margin-top:48px}
.node{display:flex;flex-direction:column;align-items:center;gap:12px;width:150px;text-align:center}
.dot{position:relative;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:rgba(245,243,238,.06);box-shadow:inset 0 0 0 2px rgba(245,243,238,.18);color:#C7CEDB;transition:background-color .3s,box-shadow .3s,color .3s}
.dot .i{width:28px;height:28px}
.badge{position:absolute;right:-4px;top:-4px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;transform:scale(0);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.badge .i{width:15px;height:15px;stroke-width:3}
.node .t{display:flex;flex-direction:column;gap:2px}
.node b{font:700 18px 'Mona Sans',sans-serif}
.node span{font-size:14px;color:#9FA9BD;min-height:22px}
.wire{height:2px;margin-top:35px;background:rgba(245,243,238,.14);position:relative;overflow:hidden}
.wire i{position:absolute;inset:0;background:#8FD3A5;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.node.ok .dot{background:#12261A;box-shadow:inset 0 0 0 2px #8FD3A5;color:#8FD3A5}
.node.ok .badge{transform:scale(1);background:#8FD3A5;color:#12261A}
.node.bad .dot{background:#2E1312;box-shadow:inset 0 0 0 2px #FF8A80;color:#FF8A80}
.node.bad .badge{transform:scale(1);background:#FF8A80;color:#2E1312}
.node.ok span{color:#8FD3A5}.node.bad span{color:#FFB4AB}
.wire.on i{transform:scaleX(1)}.wire.badw i{background:#FF8A80}
.badge .x{display:none}.node.bad .badge .c{display:none}.node.bad .badge .x{display:block}
.fix{margin-top:36px;min-height:64px;display:flex;align-items:center;gap:14px;font-size:17px;color:#C7CEDB;transition:opacity .3s}
.fix strong{color:#F5F3EE}
.fix .chip{padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600}
.fix.okf .chip{background:#12261A;color:#8FD3A5}.fix.badf .chip{background:#2E1312;color:#FFB4AB}
/* comparison */
.cmp{border-top:1px solid var(--rule)}
.cmp .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-bottom:1px solid var(--rule)}
.cmp .us,.cmp .them{padding:26px 48px}
.cmp .us{font:700 28px/1.15 'Mona Sans',sans-serif;font-stretch:104%;letter-spacing:-0.02em;border-right:1px solid var(--rule)}
.cmp .them{font-size:16px;color:#5A6378;display:flex;align-items:center}
.cmp .hd .us,.cmp .hd .them{padding-top:14px;padding-bottom:14px;font:600 14px 'Mona Sans',sans-serif;letter-spacing:0;color:#5A6378}
.src{padding:18px 48px 0;font-size:13px;color:#5A6378;max-width:90ch}
.js .stag .row:not(.hd){opacity:0;transform:translateY(14px);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.js .stag.in .row{opacity:1;transform:none}
/* vehicles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.tile{padding:32px 48px 36px;border-left:1px solid var(--rule)}
.tile:first-child{border-left:0}
.tile .i{width:32px;height:32px;color:#B7CBEE}
.tile b{display:block;margin-top:18px;font:700 26px/1.1 'Mona Sans',sans-serif;letter-spacing:-0.02em}
.tile span{display:block;margin-top:8px;color:#C7CEDB;font-size:16px}
.chips{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px 24px;align-items:center;padding:28px 48px;border-top:1px solid var(--rule)}
.chips .k{font-size:15px;font-weight:600;color:#9FA9BD}
.chips ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{padding:8px 14px;border-radius:999px;background:rgba(245,243,238,.08);font-size:15px;font-weight:500}
.chips .yes li{background:#B7CBEE;color:#0B1730}
.chips .no li{background:transparent;box-shadow:inset 0 0 0 1px rgba(245,243,238,.22);color:#9FA9BD}
/* sticky phone story */
.story{display:grid;grid-template-columns:minmax(0,1fr) 420px;border-top:1px solid var(--rule)}
.steps2{padding:0 48px}
.st{min-height:460px;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--rule);opacity:.35;transition:opacity .3s}
.st:last-child{border-bottom:0}
.st.on{opacity:1}
.st h3{margin:0;font:700 44px/1.02 'Mona Sans',sans-serif;font-stretch:108%;letter-spacing:-0.035em;max-width:13ch}
.st p{margin:14px 0 0;font-size:19px;color:#3A4560;max-width:30ch}
.st .phone{display:none}
.stick{border-left:1px solid var(--rule);position:relative}
.stick .phone{position:sticky;top:90px;width:270px;margin:60px auto}
.stack{position:relative}
.stack img{transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1)}
.stack img+img{position:absolute;inset:0}
.stack img:not(.on){opacity:0;transform:scale(.97)}
/* early access */
.early{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);border-top:1px solid var(--rule)}
.early .y{background:#F5C451;padding:64px 48px}
.early h2{margin:0;font:700 72px/.96 'Mona Sans',sans-serif;font-stretch:108%;letter-spacing:-0.04em}
.early .y p{margin:16px 0 0;font-size:19px;max-width:28ch}
.early .y .btn{margin-top:30px}
.early ol{position:relative;list-style:none;margin:0;padding:48px;counter-reset:s;background:#0B1730;color:#F5F3EE}
.early ol:before{content:"";position:absolute;left:66px;top:76px;bottom:96px;width:2px;background:#F5C451;transform-origin:top;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.js .early ol:not(.in):before{transform:scaleY(0)}
.early li{counter-increment:s;position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;min-height:76px}
.early li+li{margin-top:28px}
.early li:before{content:counter(s);width:38px;height:38px;border-radius:50%;background:#F5C451;color:#0B1730;display:grid;place-items:center;font:700 18px 'Mona Sans',sans-serif;position:relative;z-index:1}
.early li b{font:700 20px/1.3 'Mona Sans',sans-serif}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:72px;padding:0 48px;font:700 20px 'Mona Sans',sans-serif}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";font-size:28px;font-weight:400;transition:transform .2s}
.qa[open] summary:after{transform:rotate(45deg)}
.qa p{margin:0;padding:0 48px 26px;max-width:62ch;color:#3A4560}
@media (prefers-reduced-motion: reduce){
 .pg *{transition-duration:0s!important;transition-delay:0s!important}
}
@container (max-width: 720px){
 .hero{grid-template-columns:1fr;padding-top:40px;gap:28px}.hero h1{font-size:50px}.hero p{font-size:18px}
 .shot{height:400px}.shot .slab{inset:40px 0 0 0}.shot .phone{width:220px;top:80px}
 .head{padding-top:64px;padding-bottom:28px}.head h2{font-size:36px}.head p{font-size:17px}
 .chainbox{padding:32px 20px 40px}
 .chain{grid-template-columns:auto minmax(0,1fr);margin-top:32px}
 .chain .wire{width:2px;height:28px;margin:0 0 0 35px;grid-column:1}
 .chain .wire i{transform-origin:top;transform:scaleY(0)}.chain .wire.on i{transform:scaleY(1)}
 .node{flex-direction:row;width:auto;text-align:left;grid-column:1/3;gap:16px}
 .node .dot{width:72px;flex:none}
 .fix{margin-top:24px;flex-wrap:wrap}
 .cmp .row{grid-template-columns:1fr}.cmp .us{border-right:0;padding:22px 20px 6px;font-size:22px}.cmp .them{padding:0 20px 22px}.cmp .hd{display:none}
 .src{padding:16px 20px 0}
 .tiles{grid-template-columns:1fr}.tile{border-left:0;border-top:1px solid var(--rule);padding:24px 20px}.tile:first-child{border-top:0}
 .chips{grid-template-columns:1fr;gap:10px;padding:22px 20px}
 .story{grid-template-columns:1fr}.stick{display:none}
 .steps2{padding:0 20px}.st{min-height:0;opacity:1;padding:32px 0;border-bottom:1px solid var(--rule)}
 .st h3{font-size:32px}.st p{font-size:17px}.st .phone{display:block;width:210px;margin:24px 0 0}
 .early{grid-template-columns:1fr}.early .y{padding:40px 20px}.early h2{font-size:48px}
 .early ol{padding:32px 20px}.early ol:before{left:38px;top:58px;bottom:72px}
 .qa summary{padding:0 20px;font-size:18px}.qa p{padding:0 20px 22px}
}
.doc{max-width:760px;padding-top:72px;padding-bottom:96px}
.doc h1{margin:0;font:700 64px/1 'Mona Sans',sans-serif;font-stretch:108%;letter-spacing:-0.04em}
.doc .meta{margin:12px 0 0;color:#5A6378;font-size:15px}
.doc .lead{margin:24px 0 0;font-size:21px;line-height:1.5}
.doc h2{margin:48px 0 0;font:700 26px/1.2 'Mona Sans',sans-serif;letter-spacing:-0.01em}
.doc p,.doc li{color:#2A3550;font-size:17px;line-height:1.65}
.doc ul{padding-left:22px}.doc li+li{margin-top:8px}
.doc a{text-decoration:underline;text-underline-offset:4px;color:#2A4A94}
.box{margin-top:32px;padding:24px 28px;border-radius:16px;background:#0B1730;color:#F5F3EE}
.box p{color:#C7CEDB;margin:6px 0 0}.box b{font-size:19px}
.box a{color:#F5C451}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:68px;font:700 19px 'Mona Sans',sans-serif}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";font-size:26px;font-weight:400}
.qa[open] summary:after{content:"–"}
.qa p{margin:0 0 22px}
.nf{min-height:620px;display:flex;flex-direction:column;justify-content:center}
.nf h1{font-size:120px}
.nf .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
@container (max-width: 720px){ .doc{padding-top:40px;padding-bottom:64px}.doc h1{font-size:42px}.doc .lead{font-size:18px}.nf{min-height:480px}.nf h1{font-size:64px} }