/* settlewifi.com — generated by tools/make-site.py */
:root{--ink:#0f1013;--ink2:#1d1d1f;--gray:#3a3a3c;--sub:#b0b0b6;--sub2:#8e8e93;--paper:#f5f5f7;--white:#fff;--accent:#8aa8ff;
 --wall:radial-gradient(80% 90% at 88% 105%,#1636b0 0%,rgba(22,54,176,0) 70%),radial-gradient(65% 75% at 8% 0%,#6d90ff 0%,rgba(109,144,255,0) 70%),radial-gradient(50% 60% at 50% 55%,#3f6af0 0%,rgba(63,106,240,0) 70%),#2c58e6;
 --ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.h1,.h2,.foot-word,.res-exp-say{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1312px;margin:0 auto;padding:0 64px}
section[id],#how{scroll-margin-top:84px}
.dark{background:var(--ink);color:var(--paper)}
.light{background:var(--paper);color:var(--ink2)}
.white{background:#fff;color:var(--ink2)}
.h1{margin:0;font-size:clamp(52px,8.2vw,124px);line-height:.94;letter-spacing:-.045em;font-weight:700}
.h2{margin:0;font-size:clamp(40px,5.4vw,80px);line-height:1;letter-spacing:-.04em;font-weight:700}
.lead{margin:0;font-size:clamp(19px,1.55vw,23px);line-height:1.45}
.dark .lead{color:#c7c7cc}.light .lead{color:var(--gray)}
.accent{color:var(--accent)}
.eyebrow{margin:0;font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sub2)}
.meta{margin:0;font-size:15px;color:var(--sub2)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{height:56px;padding:0 28px;display:inline-flex;align-items:center;border-radius:28px;font-size:18px;font-weight:600;white-space:nowrap;text-decoration:none;transition:transform .18s var(--ease),background .18s ease,border-color .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-ghost{border:1.5px solid rgba(255,255,255,.45);color:var(--paper)}
.btn-ghost:hover{border-color:#fff}
.btn-s{height:44px;padding:0 20px;font-size:16px}
.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;text-decoration:none}
.brand:hover{text-decoration:none}
.logo{width:24px;height:24px;color:var(--paper)}
/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(15,16,19,.82);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid transparent;transition:border-color .2s ease}
.top.scrolled{border-bottom-color:rgba(255,255,255,.08)}
.top-in{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav{display:flex;align-items:center;gap:32px;font-size:16px}
.navl{color:#c7c7cc}
/* hero */
.hero{padding:72px 0 112px}
.hero .wrap{display:flex;flex-direction:column;gap:56px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:end}
.hero-title{display:flex;flex-direction:column;gap:20px}
.hero-side{display:flex;flex-direction:column;gap:24px;padding-bottom:8px}
/* the Mac corner */
.stage{position:relative;overflow:hidden;border-radius:24px;height:560px;background:var(--wall)}
.sbar{position:absolute;left:0;right:0;top:0;z-index:1}
.barl.b{font-weight:700}
.demo{position:absolute;inset:0}
.demo-in{position:absolute;top:0;right:0;width:640px;height:560px;transform-origin:100% 0;font-size:13px;overflow:hidden}
.mb-settle{position:absolute;left:calc(371px + var(--mbx,0px));top:3px;width:28px;height:20px;border:0;padding:0;border-radius:5px;background:transparent;cursor:pointer;transition:background .2s ease;z-index:3}
.mb-settle .ic{position:absolute;left:6px;top:2px;width:16px;height:16px;display:none}
.mb-settle svg{width:16px;height:16px;display:block}
.mb-settle:hover{background:rgba(0,0,0,.08)}
.mb-bat{position:absolute;left:calc(408px + var(--mbx,0px));top:6.5px;width:25px;height:13px}
.mb-wifi{position:absolute;left:calc(449px + var(--mbx,0px));top:6.5px;width:17px;height:13px}
.mb-cc{position:absolute;left:calc(482px + var(--mbx,0px));top:6px;width:16px;height:14px}
.mb-bat svg,.mb-wifi svg,.mb-cc svg{width:100%;height:100%;display:block}
.mb-clock{position:absolute;right:14px;top:5px;text-align:right;font-weight:500;white-space:nowrap}
.demo-in .notif{position:absolute;left:286px;top:34px;width:344px;opacity:0;transform:translateX(24px);transition:opacity .45s ease,transform .6s var(--ease);pointer-events:none}
.hero-pop{position:absolute;left:calc(235px + var(--mbx,0px));top:31px;width:300px;opacity:0;transform:scale(.94) translateY(-6px);transform-origin:150px 0;transition:opacity .22s ease,transform .32s var(--ease);pointer-events:none;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.cursor{position:absolute;z-index:10;width:18px;height:22px;left:265px;top:170px;opacity:0;transform-origin:2px 2px;transition:left 1s cubic-bezier(.45,0,.2,1),top 1s cubic-bezier(.45,0,.2,1),opacity .3s ease,transform .12s ease;pointer-events:none}
.mb-wifi{transition:opacity .3s ease}
/* phases: 0 join · 1 checking · 2 result + notification · 3 cursor → icon · 4 popover · 5 cursor → details · 6 details */
.demo-in[data-phase="0"] .ic-dash,.demo-in[data-phase="1"] .ic-spin{display:block}
.demo-in[data-phase="2"] .ic-ok,.demo-in[data-phase="3"] .ic-ok,.demo-in[data-phase="4"] .ic-ok,.demo-in[data-phase="5"] .ic-ok,.demo-in[data-phase="6"] .ic-ok{display:block}
.demo-in[data-phase="0"] .mb-wifi{animation:pulse .9s ease-in-out infinite alternate}
.demo-in[data-phase="2"] .notif{opacity:1;transform:none}
.demo-in[data-phase="3"] .cursor{opacity:1;left:calc(383px + var(--mbx,0px));top:12px}
.demo-in[data-phase="4"] .cursor{left:calc(383px + var(--mbx,0px));top:12px}
.demo-in[data-phase="5"] .cursor{opacity:1}
.demo-in.press .cursor{transform:scale(.8)}
.demo-in[data-phase="4"] .hero-pop,.demo-in[data-phase="5"] .hero-pop,.demo-in[data-phase="6"] .hero-pop{opacity:1;transform:none;pointer-events:auto}
.demo-in[data-phase="6"] .hero-det{grid-template-rows:1fr}
.demo-in[data-phase="6"] .hero-det{transition-delay:.3s}
.hero-det{transition:grid-template-rows .8s cubic-bezier(.45,0,.2,1)}
.ic-spin svg{animation:spin .9s linear infinite}
.pausebtn{position:absolute;left:20px;bottom:20px;height:40px;padding:0 18px;border-radius:20px;border:0;background:rgba(255,255,255,.9);color:#1d1d1f;font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s var(--ease)}
.pausebtn:hover{transform:translateY(-1px)}
.no-motion .pausebtn{display:none}
.steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.step{width:100%;padding:0 0 4px;border:0;background:none;text-align:left;display:flex;flex-direction:column;gap:6px;cursor:pointer;color:var(--sub2)}
.step-bar{display:block;height:2px;background:rgba(255,255,255,.16);border-radius:1px;overflow:hidden;margin-bottom:16px}
.step-bar i{display:block;height:100%;width:0;background:var(--paper)}
.step-n{font-size:14px;font-weight:700}
.step-t{font-size:19px;line-height:1.35;transition:color .3s ease}
.step:hover .step-t{color:#d1d1d6}
.step.on{color:var(--paper)}
.step.on .step-t{font-weight:600}
.step.on .step-bar i{width:100%;animation:fill var(--dur,2s) linear}
.step.done .step-bar i{width:100%}
.paused .step.on .step-bar i,.no-motion .step.on .step-bar i{animation:none}
/* popover (shared) */
.pop{width:300px;padding:18px;border-radius:12px;background:rgba(246,246,248,.98);border:1px solid rgba(0,0,0,.1);box-shadow:0 18px 44px rgba(0,0,0,.3);color:#1d1d1f;font-size:13px;text-align:left}
.pop-net{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#6e6e73;min-width:0}
.pop-net .wifi{width:13px;height:10px;flex-shrink:0}
.pop-net span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-meta{margin-top:2px;padding-left:19px;display:flex;gap:4px;font-size:11px;color:#6e6e73;white-space:nowrap;overflow:hidden}
.linkbtn{padding:0;border:0;background:none;color:#3a3a3c;cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(0,0,0,.25)}
.linkbtn:hover{color:#000;text-decoration-color:currentColor}
.pop-title{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.pop-title .g{width:20px;height:20px;flex-shrink:0}
.pop-title.plain{margin-top:14px}
.pop-desc{margin:6px 0 0;line-height:1.4;color:#5c5c61}
.chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:12px;background:rgba(0,0,0,.065);border:1px solid transparent;font-size:12px;white-space:nowrap}
.chip.lim{background:transparent;border-color:rgba(0,0,0,.38)}
.chip.dash{background:transparent;border:1px dashed rgba(0,0,0,.4)}
.ci{width:13px;height:13px;flex-shrink:0}
.pop-foot{margin-top:16px;display:flex;align-items:center;justify-content:space-between;color:#6e6e73;font-size:12px}
.pop-foot .linkbtn{text-decoration:none;color:#3a3a3c;min-height:24px}
.pop-foot .linkbtn:hover{text-decoration:underline}
.gear{width:16px;height:16px}
.metrics{margin:12px 0 0;border-top:1px solid rgba(0,0,0,.1);font-size:12px}
.metrics div{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.metrics dt{display:flex;flex-direction:column}
.metrics small{font-size:11px;color:#6e6e73}
.metrics dd{margin:0;white-space:nowrap;color:#6e6e73}
.metrics b{color:#1d1d1f}
.pop-ext{margin:10px 0 0;display:flex;flex-direction:column;gap:2px;font-size:12px}
.pop-ext span{font-size:11px;line-height:1.35;color:#6e6e73}
.pop-act{margin-top:16px;display:flex;justify-content:flex-end}
.mbtn{height:24px;padding:0 10px;display:inline-flex;align-items:center;border-radius:6px;font-size:12px;font-weight:500;background:#fff;border:1px solid rgba(0,0,0,.15)}
.mbtn.blue{background:#0a64d8;border-color:#0a64d8;color:#fff}
.psteps{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.psteps li{display:flex;align-items:center;gap:8px}
.psteps .g,.psteps .spin{width:13px;height:13px;flex-shrink:0}
.psteps .spin{animation:spin .9s linear infinite}
.psteps .wait{color:#8e8e93}
.psteps i{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(0,0,0,.25)}
.notif{display:flex;gap:10px;align-items:center;width:344px;padding:10px 12px;border-radius:14px;background:rgba(250,250,252,.97);border:1px solid rgba(0,0,0,.1);box-shadow:0 10px 30px rgba(0,0,0,.25);color:#1d1d1f;font-size:12px}
.notif-app{width:32px;height:32px;flex-shrink:0;border-radius:8px;background:#1d1d1f;color:#f5f5f7;display:flex;align-items:center;justify-content:center}
.notif-app .g{width:18px;height:18px}
.notif-body{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.3;color:#5c5c61}
.notif-top{display:flex;justify-content:space-between;gap:8px;color:#1d1d1f}
.notif-top span{font-size:11px;color:#6e6e73;flex-shrink:0}
/* sections */
#results,#features,#faq{padding:136px 0}
.sec-head{display:flex;flex-direction:column;gap:20px;max-width:860px;margin-bottom:56px}
/* results demo */
.resbox{background:#fff;border-radius:32px;padding:28px;display:flex;flex-direction:column;gap:24px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.res-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.res-label{margin:0;font-size:15px;font-weight:600;color:#515154}
.tabs{display:flex;flex-wrap:wrap;gap:10px}
.tab{min-height:48px;padding:0 18px 0 14px;display:inline-flex;align-items:center;gap:10px;border-radius:24px;border:1.5px solid rgba(0,0,0,.18);background:#fff;color:#1d1d1f;font-size:17px;font-weight:600;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s var(--ease)}
.tab .g{width:22px;height:22px;flex-shrink:0}
.tab:hover{border-color:#1d1d1f;transform:translateY(-1px)}
.tab:active{transform:scale(.97)}
.tab[aria-selected="true"]{background:#1d1d1f;border-color:#1d1d1f;color:#fff}
.mac{--z:1.3;position:relative;overflow:hidden;border-radius:24px;background:var(--wall);color:#1d1d1f}
#res-demo{height:680px;touch-action:pan-y}
.mac .mb{position:absolute;left:0;right:0;top:0;height:calc(26px*var(--z));padding:0 calc(14px*var(--z));display:flex;align-items:center;gap:calc(14px*var(--z));background:rgba(255,255,255,.78);border-bottom:1px solid rgba(0,0,0,.06);font-size:calc(13px*var(--z));white-space:nowrap}
.mac .mb .grow{flex-grow:1}
.mac .mb .bat{width:calc(25px*var(--z));height:calc(13px*var(--z))}
.mac .mb .wifi{width:calc(17px*var(--z));height:calc(13px*var(--z))}
.mb-item{height:calc(22px*var(--z));padding:0 calc(7px*var(--z));display:flex;align-items:center;gap:calc(5px*var(--z));border-radius:calc(5px*var(--z));background:rgba(0,0,0,.16);font-weight:500}
.mb-item .g{width:calc(16px*var(--z));height:calc(16px*var(--z))}
.mb-item.ping{animation:ping .6s ease-out}
.mb-time{font-weight:500}
.res-pop{position:absolute;right:calc(10px*var(--z));top:calc(32px*var(--z));zoom:var(--z)}
@supports not (zoom:1){.res-pop{transform:scale(var(--z));transform-origin:100% 0}}
.swap{animation:swap .32s var(--ease)}
.res-exp{position:absolute;left:48px;bottom:48px;width:calc(100% - 300px*var(--z) - 140px);max-width:560px;color:#fff}
.res-exp-k{margin:0;display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;color:rgba(255,255,255,.92)}
.res-exp-k .g{width:24px;height:24px;color:#fff}
.res-exp-say{margin:14px 0 0;font-size:clamp(24px,2.6vw,38px);line-height:1.18;font-weight:600;letter-spacing:-.02em}
.collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.collapse>div{overflow:hidden;min-height:0}
.collapse.open{grid-template-rows:1fr}
/* features */
.sits{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
.sit-list{display:flex;flex-direction:column;gap:8px}
.sit{display:flex;align-items:flex-start;gap:16px;padding:18px 20px;border-radius:20px;border:1.5px solid transparent;background:transparent;text-align:left;cursor:pointer;color:var(--sub2);transition:background .18s ease,border-color .18s ease,transform .18s var(--ease)}
.sit:hover{background:rgba(255,255,255,.04);transform:translateX(4px)}
.sit[aria-selected="true"]{background:rgba(255,255,255,.08);border-color:rgba(138,168,255,.6);color:var(--accent)}
.fi{width:32px;height:32px;flex-shrink:0}
.sit-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.sit-t{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--paper)}
.sit-d{font-size:16px;line-height:1.45;color:var(--sub)}
.sit-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.sit-prev{height:540px}
.sit-body{position:absolute;right:calc(10px*var(--z));top:calc(34px*var(--z))}
.sit-view{zoom:var(--z)}
.sit-view .notif{width:344px}
.sit-cap{display:none;margin:0;font-size:17px;line-height:1.5;color:var(--sub)}
/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.qas{border-top:1px solid rgba(0,0,0,.12)}
.qa{border-bottom:1px solid rgba(0,0,0,.12)}
.qa h3{margin:0}
.q{width:100%;min-height:72px;padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;border:0;background:none;color:#1d1d1f;font-size:clamp(19px,1.6vw,22px);font-weight:600;text-align:left;cursor:pointer}
.q i{position:relative;width:18px;height:18px;flex-shrink:0}
.q i::before,.q i::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;border-radius:1px;background:#6e6e73;transition:transform .25s var(--ease)}
.q i::after{transform:rotate(90deg)}
.qa.open .q i::after{transform:rotate(0)}
.qa p{margin:0;padding:0 0 26px;max-width:680px;font-size:18px;line-height:1.55;color:var(--gray)}
/* footer */
.foot{background:#101218;color:var(--paper);padding:96px 0 36px;overflow:hidden}
.foot .wrap{display:flex;flex-direction:column;gap:64px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:48px}
.foot-intro{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.foot-intro .brand{font-size:26px}.foot-intro .logo{width:28px;height:28px}
.foot-intro p{margin:0;max-width:380px;font-size:18px;line-height:1.5;color:#b8bcc6}
.author{margin-top:12px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:12px;max-width:380px}
.foot-intro .author p{font-size:16px;color:#9aa0ab}
.author b{font-weight:600;color:#f5f5f7}
.author-links{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:16px}
.author-links a{display:inline-flex;align-items:center;gap:6px;min-height:28px;color:#f5f5f7;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);transition:border-color .2s ease}
.author-links a:hover{text-decoration:none;border-bottom-color:#f5f5f7}
.author-links span{font-size:13px;color:#9aa0ab;transition:transform .2s var(--ease)}
.author-links a:hover span{transform:translate(2px,-2px)}
.foot-top nav,.foot-top>div:not(.foot-intro){display:flex;flex-direction:column;gap:14px;font-size:17px}
.foot h3{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9aa0ab}
.foot-top span{color:#b8bcc6}
.foot [aria-current]{font-weight:600}
.foot-word{font-size:clamp(96px,21vw,300px);line-height:.78;letter-spacing:-.06em;font-weight:700;color:#262a33;white-space:nowrap;transition:color .6s ease}
.foot-word:hover{color:#2f3542}
.foot-bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:15px;color:#9aa0ab}
/* reveal on scroll */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{from{opacity:1}to{opacity:.3}}
@keyframes fill{from{width:0}to{width:100%}}
@keyframes swap{from{opacity:.25;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ping{from{box-shadow:0 0 0 0 rgba(255,255,255,.95)}to{box-shadow:0 0 0 12px rgba(255,255,255,0)}}
/* sizes */

@media (max-width:1100px){
 #res-demo{--z:1.15;height:auto;min-height:580px;padding-bottom:36px}
 .res-pop{position:relative;right:auto;top:auto;margin:calc(40px*var(--z)/var(--z)) auto 0;width:300px}
 .res-exp{position:relative;left:auto;bottom:auto;width:auto;max-width:620px;margin:32px auto 0;padding:0 28px}
 .sits{grid-template-columns:1fr}.sit-side{position:relative;top:auto;order:-1}
 .sit-list{display:grid;grid-template-columns:1fr 1fr}.sit-d{display:none}.sit-cap{display:block}
 .sit-prev{--z:1.15;height:480px}.sit-body{left:0;right:0;display:flex;justify-content:center}
}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:28px}.faq{grid-template-columns:1fr;gap:32px}.foot-top{grid-template-columns:1fr 1fr}.foot-intro{grid-column:1/-1}}
@media (max-width:700px){
 .wrap{padding:0 20px}.navl{display:none}
 .hero{padding:48px 0 80px}.hero .wrap{gap:40px}
 .stage{border-radius:18px}.hero-pop{left:calc(332px + var(--mbx,0px));transform-origin:268px 0}
 .steps{grid-template-columns:1fr 1fr;row-gap:20px}.step-t{font-size:17px}
 #results,#features,#faq{padding:96px 0}.sec-head{margin-bottom:40px}
 .resbox{padding:14px;border-radius:24px}
 .tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.tab{justify-content:flex-start;text-align:left;padding:6px 12px;font-size:16px;min-width:0}
 #res-demo{--z:1;min-height:590px;padding-bottom:28px}
 .res-exp{margin:24px 0 0;padding:0 18px}
 .sit-list{grid-template-columns:1fr}.sit{padding:14px 16px}.sit:hover{transform:none}
 .sit-prev{--z:.95;height:390px}
 .foot-top{grid-template-columns:1fr}.btn{height:52px;padding:0 22px;font-size:17px}.btn-s{height:44px;padding:0 18px;font-size:15px}
}
@media (max-width:380px){#res-demo{--z:.9}.sit-prev{--z:.84;height:350px}.top-in .btn-s{padding:0 14px}}
/* ---- pass 8 ---- */
[hidden]{display:none!important}
/* header + phone menu */
.burger{display:none;position:relative;width:44px;height:44px;padding:0;border:0;border-radius:22px;background:rgba(255,255,255,.08);cursor:pointer;transition:background .2s ease}
.burger:hover{background:rgba(255,255,255,.14)}
.burger i{position:absolute;left:13px;width:18px;height:2px;border-radius:1px;background:#f5f5f7;transition:transform .3s var(--ease),opacity .2s ease}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:27px}
.menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0}
.menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{position:absolute;left:0;right:0;top:100%;background:#0f1013;border-top:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px rgba(0,0,0,.5);animation:menuIn .24s var(--ease)}
.mnav .wrap{display:flex;flex-direction:column;padding-top:8px;padding-bottom:24px}
.mnav a:not(.btn){display:flex;align-items:center;justify-content:space-between;min-height:56px;font-size:22px;font-weight:600;letter-spacing:-.01em;border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none}
.mnav a span{color:#6e6e73;font-weight:400}
.mnav .btn{margin-top:20px;justify-content:center;width:100%;box-sizing:border-box}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* hero: title, then text and buttons in one column */
.h1{font-size:clamp(46px,7.2vw,104px)}
.hero-grid{grid-template-columns:1fr;gap:36px;align-items:start}
.hero-side{max-width:820px;gap:32px;padding-bottom:0}
.btns{flex-wrap:nowrap}
/* hero: graphite Mac corner, dark menu bar, light popover */
.stage{--s:1.9;height:540px;background:linear-gradient(180deg,#222328 0%,#1a1b1f 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sbar{height:calc(26px*var(--s));padding:0;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.07)}
.demo{z-index:1}
.demo-in{transform:scale(var(--s));color:#f5f5f7}
.mb-settle .ic{color:#f5f5f7}
.mb-settle:hover{background:rgba(255,255,255,.12)}
.demo-in[data-phase="4"] .mb-settle,.demo-in[data-phase="5"] .mb-settle,.demo-in[data-phase="6"] .mb-settle{background:rgba(255,255,255,.18)}
/* details: the camera pulls back so the open popover fits */
.stage{--cs:var(--s)}
.stage[data-phase="3"],.stage[data-phase="4"],.stage[data-phase="5"],.stage[data-phase="6"]{--cs:var(--s2,var(--s))}
.demo-in{transform:scale(var(--cs));transition:transform .9s cubic-bezier(.45,0,.2,1)}
.sbar{height:calc(26px*var(--cs));transition:height .9s cubic-bezier(.45,0,.2,1)}
.pausebtn{z-index:2;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#f5f5f7}
.step.on .step-n{color:var(--accent)}
.step-bar i{background:var(--accent)}
.step.done .step-bar i{background:rgba(255,255,255,.4)}
/* results: four tiles that react */
.sec{padding:120px 0}
.sec .sec-head{margin-bottom:48px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tile{--mx:50%;--my:50%;position:relative;isolation:isolate;display:flex;flex-direction:column;gap:20px;padding:36px;border-radius:28px;background:#fff;color:#1d1d1f;
 box-shadow:0 1px 2px rgba(0,0,0,.05);transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .35s ease;outline:none;cursor:default}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .35s ease;
 background:radial-gradient(420px circle at var(--mx) var(--my),rgba(138,168,255,.22),rgba(138,168,255,0) 60%)}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px #1d1d1f;opacity:0;transition:opacity .3s ease;pointer-events:none}
.tname{margin:0;display:flex;align-items:center;gap:12px;font-size:30px;font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.tname .g{width:30px;height:30px;flex-shrink:0;transition:transform .5s var(--ease)}
.say{margin:0;font-size:28px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
.tchips{margin-top:auto;padding-top:4px;display:flex;flex-wrap:wrap;gap:8px}
.tchip{display:inline-flex;align-items:center;gap:6px;height:32px;box-sizing:border-box;padding:0 12px;border-radius:16px;font-size:14px;white-space:nowrap;
 transition:background .3s ease,color .3s ease,box-shadow .3s ease,transform .4s var(--ease)}
.tchip .ci{width:16px;height:16px}
.tchip.ok{background:rgba(0,0,0,.065)}
.tchip.lim{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.4)}
.tile.hot{transform:translateY(-6px);box-shadow:0 24px 60px rgba(17,24,52,.12)}
.tile.hot::before,.tile.hot::after{opacity:1}
.tiles.has-hot .tile:not(.hot){opacity:.55}
.tile.hot .tchip{transform:translateY(-2px)}
.tile.hot .tchip:nth-child(2){transition-delay:.04s}.tile.hot .tchip:nth-child(3){transition-delay:.08s}
.tile.hot .tchip.ok{background:#1d1d1f;color:#fff}
.tile.hot .tchip.lim{box-shadow:inset 0 0 0 1.5px #1d1d1f}
.tile.hot .ti-fwd{animation:dash .7s var(--ease)}
.tile.hot .ti-ok{animation:pop .5s var(--ease)}
.tile.hot .ti-min{animation:wobble .6s ease}
.tile.hot .ti-phn{animation:buzz .5s linear}
@keyframes dash{0%{transform:none}40%{transform:translateX(8px);opacity:0}41%{transform:translateX(-8px);opacity:0}100%{transform:none;opacity:1}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes wobble{0%,100%{transform:none}25%{transform:rotate(-14deg)}75%{transform:rotate(10deg)}}
@keyframes buzz{0%,100%{transform:none}20%{transform:translateX(-2px) rotate(-6deg)}40%{transform:translateX(2px) rotate(6deg)}60%{transform:translateX(-2px) rotate(-4deg)}80%{transform:translateX(2px) rotate(4deg)}}
/* features */
.sits{align-items:stretch}
.sit-stage{--z:1.55;position:relative;min-height:460px;border-radius:24px;background:#18191d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;padding:24px 16px;box-sizing:border-box;overflow:hidden}
.sit-stage .sit-view{zoom:var(--z)}
.sit-stage .pop{box-shadow:0 18px 44px rgba(0,0,0,.4)}
/* questions */
.q{min-height:64px}
@media (max-width:1200px){.stage{--s:1.45;height:470px}}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.sits{grid-template-columns:1fr}.sit-stage{--z:1.15;min-height:400px;order:-1}.sit-list{grid-template-columns:1fr 1fr}.sit-d{display:block}}
@media (max-width:900px){.stage{--s:1.2;height:400px}.tiles{grid-template-columns:1fr}}
@media (max-width:700px){
 .navl,.top .btn-s{display:none}.burger{display:block}.top-in{height:64px}
 .hero{padding:48px 0 64px}.hero .wrap{gap:40px}.hero-grid{gap:28px}.hero-side{gap:28px}
 .btns{flex-wrap:nowrap;gap:10px}.hero .btn{height:48px;padding:0 16px;font-size:16px}
 .stage{--s:1.05;height:320px}.pausebtn{display:none}
 .demo-in .notif{left:312px;width:320px}
 .sec{padding:64px 0}.sec .sec-head{margin-bottom:28px;gap:12px}.h2{font-size:36px;letter-spacing:-.035em}.lead{font-size:18px}
 .tiles{gap:12px}.tile{padding:22px;gap:14px;border-radius:22px}.tname{font-size:24px}.tname .g{width:26px;height:26px}.say{font-size:21px;line-height:1.25}
 .tiles.has-hot .tile:not(.hot){opacity:1}.tile.hot{transform:none}
 .sit-list{grid-template-columns:1fr}.sit-stage{--z:.95;min-height:300px;border-radius:20px}
 .faq{gap:20px}.foot{padding:56px 0 28px}.foot .wrap{gap:40px}.foot-top{gap:28px}
}
@media (max-width:380px){.stage{--s:.96}.hero .btn{padding:0 14px;font-size:15px}.sit-stage{--z:.84;min-height:280px}}
@media (hover:none){.tile.hot{transform:none}}
@media (max-width:340px){.btns{flex-wrap:wrap}}
/* ---- consent ---- */
.note.warn{color:#1d1d1f;font-weight:600}
.doc-body,.part{min-width:0}
.cmd{max-width:100%;box-sizing:border-box;margin:0;padding:16px 18px;border-radius:14px;background:#1d1d1f;color:#f5f5f7;overflow-x:auto;font-size:14px;line-height:1.6}
.cmd code{background:none;color:inherit;padding:0;font-size:inherit;white-space:pre}
.linkish{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.linkish:hover{color:#f5f5f7;text-decoration:underline}
.consent{position:fixed;left:0;right:0;bottom:0;z-index:40;box-sizing:border-box;padding:20px max(32px,calc((100vw - 1200px) / 2));background:#fff;color:#1d1d1f;
 box-shadow:0 -10px 40px rgba(0,0,0,.16),0 -1px 0 rgba(0,0,0,.06);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:40px;row-gap:4px;align-items:center;animation:ccIn .35s var(--ease)}
.consent .cc-t{grid-column:1;grid-row:1;font-size:17px}.consent .cc-p{grid-column:1;grid-row:2;font-size:15px;max-width:720px}
.consent .cc-acts{grid-column:2;grid-row:1/3;flex-wrap:nowrap;margin-top:0}
.cc-t{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em}
.cc-p{margin:0;font-size:16px;line-height:1.5;color:#3a3a3c}.cc-p a{color:#1d1d1f;text-decoration:underline;text-underline-offset:3px}
.cc-acts,.ccd-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.cb{height:46px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;border-radius:23px;font-size:16px;font-weight:600;white-space:nowrap;border:0;cursor:pointer;font-family:inherit}
.cb.eq{background:#1d1d1f;color:#fff}.cb.eq:hover{background:#000}
.cb.ln{background:#fff;color:#1d1d1f;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.22)}.cb.ln:hover{box-shadow:inset 0 0 0 1.5px #1d1d1f}
.cb.tx{background:transparent;color:#1d1d1f;padding:0 10px;text-decoration:underline;text-underline-offset:3px}
.consent .cb:focus-visible,.ccd .cb:focus-visible,.ccd-x:focus-visible{outline:3px solid #2c58e6;outline-offset:3px}
.ccd{width:600px;max-width:calc(100vw - 32px);padding:0;border:0;border-radius:24px;background:#fff;color:#1d1d1f;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.ccd::backdrop{background:rgba(15,16,19,.5)}
.ccd-in{display:flex;flex-direction:column;gap:16px;padding:28px}
.ccd-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ccd h2{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em}
.ccd-x{width:40px;height:40px;flex-shrink:0;border:0;border-radius:20px;background:rgba(0,0,0,.06);font-size:24px;line-height:1;cursor:pointer;color:#1d1d1f}
.ccd-p{margin:0;font-size:16px;line-height:1.5;color:#3a3a3c}
.cat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;padding:16px 0 0;border-top:1px solid rgba(0,0,0,.1)}
.cat h3{margin:0;font-size:18px;font-weight:600}.cat label{cursor:pointer}
.cat p{grid-column:1;margin:0;font-size:15px;line-height:1.5;color:#515154}
.always{grid-row:1/3;grid-column:2;align-self:start;height:28px;padding:0 12px;display:inline-flex;align-items:center;border-radius:14px;background:rgba(0,0,0,.065);font-size:14px;white-space:nowrap}
.sw{grid-row:1/3;grid-column:2;align-self:start;position:relative;width:52px;height:32px}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;border-radius:16px;background:rgba(0,0,0,.2);transition:background .2s ease}
.sw i::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.sw input:checked+i{background:#1d1d1f}.sw input:checked+i::after{transform:translateX(20px)}
.sw input:focus-visible+i{outline:3px solid #2c58e6;outline-offset:3px}
.cc-toast{position:fixed;left:50%;bottom:24px;z-index:41;transform:translateX(-50%);margin:0;height:44px;padding:0 18px;display:flex;align-items:center;border-radius:22px;background:#1d1d1f;color:#fff;font-size:15px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.3)}
@keyframes ccIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:700px){
 .consent{display:flex;flex-direction:column;align-items:stretch;gap:12px;border-radius:22px 22px 0 0;padding:18px 20px calc(20px + env(safe-area-inset-bottom))}
 .consent .cc-t{font-size:19px}.consent .cc-p{font-size:16px}
 .cc-acts,.consent .cc-acts{display:grid;grid-template-columns:1fr;gap:8px;margin-top:4px}.cc-acts .tx{height:40px}
 .consent .cb{width:100%;padding:0 10px;font-size:15px}
 .ccd-in{padding:22px 20px}.ccd h2{font-size:22px}
 .ccd-acts{display:grid;grid-template-columns:1fr;gap:10px}.ccd-acts .cb{width:100%}
}

/* ---- privacy page ---- */
.fb-left{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot-bottom a[aria-current]{color:#f5f5f7}
.doc-hero{padding:88px 0 96px}
.doc-hero .wrap{display:flex;flex-direction:column;gap:24px}
.doc-h1{font-size:clamp(42px,7vw,96px);overflow-wrap:break-word}
.doc-hero .lead{max-width:760px}
.short{margin:24px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.short li{display:flex;gap:14px;align-items:flex-start;padding:22px 24px;border-radius:20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);font-size:18px;line-height:1.45;color:#e5e5ea}
.short .g{width:22px;height:22px;flex-shrink:0;margin-top:2px;color:#f5f5f7}
.doc{padding:104px 0 120px}
.doc-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;align-items:start}
.toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px}
.toc p{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6e6e73}
.toc a{padding:8px 0;font-size:17px;color:#3a3a3c;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.08)}
.toc a:hover{color:#1d1d1f;text-decoration:none}
.doc-body{display:flex;flex-direction:column;gap:96px;max-width:820px}
.part{scroll-margin-top:96px;display:flex;flex-direction:column;gap:24px}
.part .h2{font-size:clamp(34px,4vw,56px)}
.h3{margin:24px 0 0;font-size:24px;font-weight:700;letter-spacing:-.015em;color:#1d1d1f}
.dlist{margin:0;border-top:1px solid rgba(0,0,0,.1)}
.drow{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:20px 0;border-bottom:1px solid rgba(0,0,0,.1)}
.drow dt{font-size:18px;font-weight:600;color:#1d1d1f}
.drow dd{margin:0;font-size:18px;line-height:1.55;color:#3a3a3c}
.doc code{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:.86em;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.06);color:#1d1d1f;word-break:break-word}
.rlist{border-top:1px solid rgba(0,0,0,.1)}
.rrow{display:grid;grid-template-columns:220px 170px minmax(0,1fr);gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(0,0,0,.1)}
.rhost{font-size:18px;font-weight:600;color:#1d1d1f;word-break:break-word}
.rwhen span{display:inline-flex;height:28px;align-items:center;padding:0 12px;border-radius:14px;background:rgba(0,0,0,.065);font-size:14px;color:#1d1d1f;white-space:nowrap}
.rrow p{margin:0;font-size:18px;line-height:1.55;color:#3a3a3c}
.note{margin:0;font-size:17px;line-height:1.6;color:#515154}
.note.big{font-size:20px;color:#1d1d1f}
.nlist{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nlist li{padding:20px 22px;border-radius:18px;background:#f5f5f7;font-size:18px;font-weight:600;color:#1d1d1f}
.forget{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.forget-status{margin:0;font-size:16px;color:#515154}
.btn-line{height:48px;padding:0 20px;font-size:16px;background:#fff;color:#1d1d1f;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.2);border:0;cursor:pointer}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px #1d1d1f}
.btn-dark{height:52px;padding:0 24px;font-size:17px;background:#1d1d1f;color:#fff}
.btn-dark:hover{background:#000}
@media (max-width:900px){.doc-grid{grid-template-columns:1fr;gap:32px}.toc{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}.toc p{width:100%;margin:0}.toc a{padding:0 14px;height:40px;display:inline-flex;align-items:center;border:0;border-radius:20px;background:#f5f5f7}}
@media (max-width:700px){
 .doc-hero{padding:48px 0 56px}.short{grid-template-columns:1fr;gap:10px;margin-top:8px}.short li{padding:16px 18px;font-size:17px}
 .doc{padding:56px 0 72px}.doc-body{gap:64px}
 .drow{grid-template-columns:1fr;gap:6px;padding:16px 0}.drow dt,.drow dd,.rrow p{font-size:17px}
 .rrow{grid-template-columns:1fr;gap:8px;padding:16px 0}.rhost{font-size:17px}
 .h3{font-size:21px;margin-top:12px}.note{font-size:16px}.note.big{font-size:18px}
 .nlist{grid-template-columns:1fr;gap:8px}.nlist li{padding:16px 18px;font-size:17px}
 .btn-dark{height:48px;font-size:16px}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .reveal{opacity:1;transform:none}}