:root{--sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--bg:#06080C;--bg2:#04060A;--ink:#EAF0F8;--soft:#DCE5F1;--mute:#9DAABD;--body:#93A1B5;--dim:#6E819A;--line:rgba(125,160,205,.14);--blue:#3D8BFF;--mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:#7FB6FF;text-decoration:none}a:hover{color:#AFD3FF}
:focus-visible{outline:2px solid #5AA9FF;outline-offset:3px}
::selection{background:#1E6BE0;color:#fff}
[hidden]{display:none!important}
.wrap{max-width:1160px;margin:0 auto}
.sec{padding:clamp(56px,7vw,112px) clamp(20px,4vw,48px);border-top:1px solid var(--line)}
.alt{background:var(--bg2)}
.eyebrow{margin:0 0 16px;font:500 clamp(10px,1.1vw,12px)/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.label{font-family:var(--mono);font-size:clamp(10px,1.05vw,12px);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
h1{margin:0;font-size:clamp(38px,6.4vw,76px);font-weight:600;line-height:.98;letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance}
h2{margin:0;font-size:clamp(30px,4.6vw,54px);font-weight:600;line-height:1;letter-spacing:-.012em;text-transform:uppercase}
h2.sm{font-size:clamp(26px,3.4vw,40px);line-height:1.05}
h3{margin:0 0 10px;font-size:clamp(15px,1.45vw,17px);font-weight:600;line-height:1.25;letter-spacing:.02em;text-transform:uppercase}
.lead{margin:0;font-size:clamp(16px,1.5vw,19px);line-height:1.5;color:var(--mute);text-wrap:pretty}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border:0;border-radius:10px;font:600 14px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.btn-primary{background:linear-gradient(180deg,#4A94FF,#1D67DE);color:#fff;box-shadow:0 14px 34px -14px rgba(61,139,255,.95),inset 0 1px 0 rgba(255,255,255,.24)}
.btn-primary:hover{background:linear-gradient(180deg,#5CA0FF,#2A74E8);color:#fff}
.btn-ghost{background:rgba(255,255,255,.035);border:1px solid rgba(148,180,220,.26);color:var(--soft);font-weight:500}
.btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.btn-sm{min-height:38px;padding:0 16px;border-radius:8px;font-size:12px}
.btn-lg{min-height:60px;padding:0 34px;border-radius:12px;font-size:clamp(14px,1.4vw,16px);letter-spacing:.1em}
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 clamp(16px,4vw,48px);background:rgba(6,8,12,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.brand img{width:28px;height:28px;border-radius:7px}
.brand span{font-size:15px;font-weight:500;letter-spacing:.34em;text-transform:uppercase}
.topnav{display:flex;align-items:center;gap:clamp(10px,2vw,26px)}
.topnav .link{font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--body)}
.topnav .link:hover{color:var(--ink)}
.hero{position:relative;overflow:hidden;padding:clamp(44px,7vw,96px) clamp(20px,4vw,48px) clamp(56px,7vw,104px)}
.glow{position:absolute;inset:0;pointer-events:none}
.hero .glow{background:radial-gradient(58% 52% at 72% 22%,rgba(61,139,255,.2),rgba(61,139,255,0) 68%)}
.hero-grid{position:relative;display:grid;gap:clamp(36px,5vw,64px);align-items:center}
.hero .lead{margin-top:clamp(20px,2.4vw,30px);max-width:34em}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,38px)}
.req{margin:14px 0 0}
/* Launch waiting list, under the hero's calls to action: one field and a
   compact button on a line, the consent box beneath, and a status line that
   screen readers announce. The honeypot is moved off-screen rather than
   display:none, so simple bots still find it and fill it in. */
.waitlist{max-width:34em;margin:clamp(22px,2.6vw,30px) 0 0}
.waitlist-label{display:block;margin:0 0 10px;font-size:clamp(14px,1.3vw,15px);font-weight:500;color:var(--soft)}
.waitlist-row{display:flex;flex-wrap:wrap;gap:10px}
.waitlist-row input{flex:1 1 220px;min-width:0;min-height:44px;padding:0 14px;border:1px solid rgba(148,180,220,.26);border-radius:8px;background:rgba(255,255,255,.035);color:var(--ink);font:400 16px/1.2 var(--sans)}
.waitlist-row input::placeholder{color:var(--dim)}
.waitlist-row .btn{min-height:44px}
.waitlist-consent{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--body);cursor:pointer}
.waitlist-consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--blue)}
.waitlist-consent a{color:var(--soft);text-decoration:underline;text-underline-offset:2px}
.waitlist-row input[aria-invalid="true"]{border-color:#FF9B9B}
.waitlist-consent input[aria-invalid="true"]{box-shadow:0 0 0 2px #FF9B9B;border-radius:3px}
.waitlist-status{min-height:1.5em;margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--mute)}
.waitlist-status.is-ok{color:#7EE2A8}
.waitlist-status.is-error{color:#FF9B9B}
.waitlist-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.facts{display:flex;flex-wrap:wrap;gap:10px clamp(14px,2vw,26px);margin:clamp(22px,2.6vw,32px) 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:clamp(10px,1.1vw,12px);letter-spacing:.14em;text-transform:uppercase;color:#A7B6C9}
.facts li{display:flex;align-items:center;gap:9px}
.dot{width:5px;height:5px;border-radius:50%;background:rgba(148,180,220,.5)}
.dot.on{background:#3DDC84;box-shadow:0 0 10px rgba(61,220,132,.8);animation:pulse 3.6s ease-in-out infinite}
.hero-fig{margin:0;position:relative}
.hero-fig .halo{position:absolute;inset:6% -6% -14% -6%;background:radial-gradient(50% 50% at 50% 50%,rgba(61,139,255,.28),rgba(61,139,255,0) 70%);filter:blur(14px);pointer-events:none}
.hero-fig img{position:relative;width:100%;border-radius:clamp(8px,1.2vw,16px)}
.hero-fig .mascot{position:absolute;z-index:2;right:2%;bottom:calc(100% - 14px);width:clamp(76px,10vw,150px);height:auto;pointer-events:none;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55));animation:float 7s ease-in-out infinite}
.hero-fig video.mascot{display:block;object-fit:contain}
.hero-fig .demo{position:relative;display:block;width:100%;height:auto;border-radius:clamp(8px,1.2vw,16px);background:#080B11}
figcaption{margin-top:14px}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:clamp(26px,3vw,40px)}
.sec-head .lead{max-width:30em;font-size:clamp(15px,1.4vw,18px)}
.proof-media{margin:0;aspect-ratio:16/9;overflow:hidden;border-radius:clamp(10px,1.2vw,16px);border:1px solid var(--line);background:#080B11}
.proof-media img,.proof-media video{width:100%;height:100%;object-fit:cover}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(12px,2vw,22px);margin-top:18px;font-family:var(--mono);font-size:clamp(10px,1.05vw,12px);letter-spacing:.16em;text-transform:uppercase;color:#A7B6C9}
.chain .arr{color:var(--blue)}
.cells{display:grid;gap:1px;margin:0;padding:0;list-style:none}
.cells>*{background:var(--bg);padding:clamp(24px,2.6vw,34px);box-shadow:0 0 0 1px var(--line)}
.alt .cells>*{background:var(--bg2);padding:clamp(26px,2.8vw,38px)}
.cells p{margin:0;font-size:clamp(14px,1.3vw,15px);line-height:1.55;color:var(--body)}
.num{margin:0 0 18px;font:400 11px/1 var(--mono);letter-spacing:.18em;color:var(--blue)}
/* Community quotes. Reuses .cells/.num; only the quote type and the source
   line are new, because the site had no quote component yet. */
.quotes blockquote{margin:0}
.quotes blockquote p{font-size:clamp(17px,1.75vw,21px);line-height:1.35;letter-spacing:-.005em;color:var(--soft);text-wrap:pretty}
.quotes .src{margin:16px 0 0;font:400 clamp(11px,1.1vw,12px)/1.6 var(--mono);letter-spacing:.06em;color:#7E8FA6}
.quotes .src a{color:inherit}.quotes .src a:hover{color:var(--ink)}
.step-num{margin:0 0 20px;font:400 clamp(26px,3vw,34px)/1 var(--mono);color:rgba(148,180,220,.3)}
.steps h3{font-size:clamp(16px,1.6vw,19px);line-height:1.3;letter-spacing:0;text-transform:none}
.steps code{font-family:var(--mono);font-size:.92em;color:#C3D0E0}
.step-3{position:relative;overflow:hidden}
.step-3 img{position:absolute;right:-14px;bottom:-10px;width:clamp(88px,11vw,128px);opacity:.9;pointer-events:none;animation:float 7s ease-in-out infinite}
.step-3 h3,.step-3 p{position:relative}
.step-3 p{max-width:15em}
.trial{position:relative;text-align:center;padding:clamp(64px,8vw,128px) clamp(20px,4vw,48px)}
.trial .glow{background:radial-gradient(48% 60% at 50% 46%,rgba(61,139,255,.16),rgba(61,139,255,0) 70%)}
.trial .wrap{position:relative;max-width:720px}
.clock{margin:0 0 clamp(20px,2.4vw,30px);font:400 clamp(44px,8vw,92px)/1 var(--mono);letter-spacing:-.02em}
.trial .lead{margin:clamp(20px,2.4vw,28px) auto 0;max-width:32em}
.rule{margin:20px auto 0;max-width:34em;padding-top:20px;border-top:1px solid var(--line);font:400 clamp(11px,1.15vw,13px)/1.6 var(--mono);letter-spacing:.06em;color:#A7B6C9}
.panel{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,3vw,44px);padding:clamp(28px,3.4vw,48px);border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(20,32,50,.5),rgba(8,11,17,.5))}
.panel .icon{width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);border-radius:20px;flex:none;box-shadow:0 18px 40px -18px rgba(61,139,255,.8)}
.panel .body{flex:1 1 300px;min-width:0}
.panel .body h2{font-size:clamp(22px,2.8vw,32px);line-height:1.05;letter-spacing:.02em;margin-bottom:10px}
.panel .body .lead{color:var(--soft);margin-bottom:8px}
.panel .body p{margin:0;font-size:clamp(14px,1.35vw,16px);color:var(--body)}
.panel .note{flex:0 1 250px;margin:0;font:400 clamp(11px,1.1vw,12px)/1.7 var(--mono);letter-spacing:.08em;color:#7E8FA6}
.dl{position:relative;text-align:center}
.dl .glow{background:radial-gradient(46% 58% at 50% 34%,rgba(61,139,255,.14),rgba(61,139,255,0) 70%)}
.dl .wrap{position:relative;max-width:760px}
.dl h2{margin-bottom:clamp(18px,2.2vw,26px)}
.dl .lead{margin:0 auto clamp(26px,3vw,34px);max-width:30em;font-size:clamp(15px,1.45vw,18px)}
.dl .lead strong{font-weight:500;color:var(--soft)}
.meta{margin:18px 0 0}
.copyrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 10px 10px 18px;border:1px solid rgba(125,160,205,.2);border-radius:12px;background:rgba(255,255,255,.03);text-align:left}
.copyrow code{flex:1 1 160px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:clamp(12px,1.3vw,14px);color:#C3D0E0}
.copyrow .btn{min-height:44px;padding:0 20px;border-radius:8px;font-size:12px;background:rgba(255,255,255,.09);color:var(--ink)}
.copyrow .btn:hover{background:rgba(255,255,255,.16)}
.also{margin:20px 0 0;font-size:clamp(13px,1.3vw,15px);color:#7E8FA6}
.help-grid{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
.help-grid h2{margin-bottom:clamp(20px,2.4vw,28px)}
.checks{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.checks li{display:flex;gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);font-size:clamp(14px,1.35vw,16px);line-height:1.45;color:#C3D0E0}
.checks li::before{content:"";flex:none;width:6px;height:6px;border:1px solid var(--blue);transform:rotate(45deg)}
.checks code{font-family:var(--mono);font-size:.9em;letter-spacing:.06em;color:var(--ink)}
.support{padding:clamp(24px,3vw,36px);gap:clamp(16px,2vw,28px)}
.support img{width:clamp(80px,9vw,108px);flex:none;animation:float 7.5s ease-in-out infinite}
.support .body{flex:1 1 180px}
.support h3{font-size:clamp(17px,1.8vw,21px);line-height:1.2}
.support p{margin:0 0 16px;font-size:clamp(14px,1.35vw,16px);color:var(--body)}
.supported{padding:clamp(48px,6vw,96px) clamp(20px,4vw,48px)}
.list{display:flex;flex-wrap:wrap;gap:10px clamp(14px,2.4vw,30px);font-size:clamp(15px,1.5vw,19px);color:#C3D0E0}
.list .sep{color:rgba(148,180,220,.35)}
.fine{margin:20px 0 0;max-width:40em;font-size:clamp(13px,1.3vw,15px);color:#7E8FA6}
footer{padding:clamp(36px,4vw,56px) clamp(20px,4vw,48px) clamp(44px,5vw,64px);border-top:1px solid var(--line);background:var(--bg2)}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
footer .brand img{width:24px;height:24px;border-radius:6px}
footer .brand span{font-size:13px;color:#C3D0E0}
footer nav{display:flex;flex-wrap:wrap;gap:10px clamp(16px,2.4vw,28px);font-size:13px}
footer nav a{color:var(--body)}footer nav a:hover{color:var(--ink)}
footer small{font:400 11px/1.5 var(--mono);letter-spacing:.08em;color:#66788E}
@media (min-width:560px){.cells.four{grid-template-columns:1fr 1fr}}
@media (min-width:760px){.cells.three{grid-template-columns:repeat(3,1fr)}}
@media (min-width:800px){.help-grid{grid-template-columns:1fr 1fr}}
@media (min-width:880px){.hero-grid{grid-template-columns:1fr 1fr}}
@media (min-width:560px){.cells .span-all{grid-column:1/-1}}
.cells .shot{display:block;width:100%;height:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:10px;background:#080B11}
/* Upcoming features: a native modal dialog opened from the features heading.
   The header sticks so Close stays in reach while a phone scrolls the list, and
   screenshots keep their own proportions, capped so a portrait one never
   outgrows the window. */
.preview-row{flex:1 0 100%;margin:0}
.upcoming{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--body)}
.upcoming::backdrop{background:rgba(2,4,8,.8)}
.upcoming-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(18px,3vw,28px);background:var(--bg);border-bottom:1px solid var(--line)}
.upcoming .lead{margin:clamp(18px,2.4vw,24px) clamp(18px,3vw,28px) 0;font-size:clamp(14px,1.3vw,16px)}
.upcoming-list{display:grid;gap:clamp(28px,3.4vw,40px);margin:0;padding:clamp(20px,2.6vw,28px) clamp(18px,3vw,28px) clamp(26px,3vw,34px);list-style:none}
.upcoming-list img{display:block;width:auto;max-width:100%;height:auto;max-height:min(70vh,640px);margin:0 auto 16px;border:1px solid var(--line);border-radius:10px;background:#080B11}
.upcoming-list p{margin:0;font-size:clamp(14px,1.3vw,15px);line-height:1.55;color:var(--body)}
.upcoming-demo{margin:clamp(20px,2.6vw,28px) clamp(18px,3vw,28px) clamp(8px,.8vw,12px)}
.upcoming-demo p{margin:0 0 16px;font-size:clamp(14px,1.3vw,15px);line-height:1.55;color:var(--body)}
.upcoming-demo video{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1px solid var(--line);border-radius:10px;background:#080B11}
/* Coming with NOD Pro: its own labelled block after the Core previews. The
   captures are portrait: one above the other on a phone, side by side from
   560px. */
.upcoming-pro{margin:0 clamp(18px,3vw,28px) clamp(26px,3vw,34px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line)}
.upcoming-pro .label{margin:0 0 6px}
.upcoming-pro-intro,.upcoming-pro-points li,.upcoming-pro-shots p{font-size:clamp(14px,1.3vw,15px);line-height:1.55;color:var(--body)}
.upcoming-pro-intro{margin:0 0 12px}
.upcoming-pro-points{margin:0 0 clamp(22px,2.6vw,28px);padding-left:20px}
.upcoming-pro-points li{margin-bottom:6px}
.upcoming-pro-shots{display:grid;gap:clamp(22px,2.6vw,28px);margin:0;padding:0;list-style:none}
.upcoming-pro-shots img{display:block;width:auto;max-width:100%;height:auto;max-height:min(70vh,600px);margin:0 auto 12px;border:1px solid var(--line);border-radius:10px;background:#080B11}
.upcoming-pro-shots p{margin:0;text-align:center}
@media (min-width:560px){.upcoming-pro-shots{grid-template-columns:1fr 1fr}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* Phone-width header: the two in-page anchors (Setup, Support) step aside so
   the brand, the iPhone link and the Download button never collide. Both
   sections are one swipe below, and Support is also in the footer. */
@media (max-width:559px){.topnav .link[href^="#"]{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ---- Document pages (support, privacy, terms, download) ---- */
.doc{padding:clamp(44px,6vw,88px) clamp(20px,4vw,48px) clamp(56px,7vw,96px)}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(30px,4.6vw,52px);line-height:1.02;margin-bottom:14px}
.doc .updated{margin:0 0 clamp(30px,4vw,48px);font:400 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.doc h2{font-size:clamp(18px,2vw,23px);line-height:1.2;letter-spacing:.01em;margin:clamp(34px,4vw,52px) 0 12px;padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line)}
.doc h2[id]{scroll-margin-top:80px}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc h3{margin:26px 0 8px;font-size:clamp(14px,1.4vw,16px);letter-spacing:.01em;text-transform:none;color:var(--soft)}
.doc p{margin:0 0 14px;font-size:clamp(15px,1.4vw,16.5px);line-height:1.62;color:var(--body)}
.doc p strong{color:var(--soft);font-weight:600}
.doc ul,.doc ol{margin:0 0 14px;padding-left:22px}
.doc li{margin-bottom:9px;font-size:clamp(15px,1.4vw,16.5px);line-height:1.6;color:var(--body)}
.doc code{font-family:var(--mono);font-size:.9em;color:#C3D0E0}
.doc .callout{margin:0 0 14px;padding:clamp(16px,2vw,22px);border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}
.doc .callout p:last-child{margin-bottom:0}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--body)}
.back:hover{color:var(--ink)}
.qa{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.qa>li{padding:0;border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:14px 0;font-size:clamp(15px,1.5vw,17px);font-weight:600;line-height:1.35;color:var(--soft);cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;font-family:var(--mono);font-size:19px;font-weight:400;color:var(--blue)}
.qa details[open] summary::after{content:"\2013"}
.qa details[open] summary{color:var(--ink)}
.qa .ans{padding:0 0 20px}
.qa .ans p:last-child,.qa .ans ol:last-child,.qa .ans ul:last-child{margin-bottom:0}
.dlbox{margin:0 0 clamp(26px,3vw,34px);padding:clamp(24px,3vw,36px);border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(20,32,50,.5),rgba(8,11,17,.5));text-align:center}
.dlbox .btn{margin:6px 0 0}
