@font-face { font-family: 'Space Grotesk'; src: url('fonts/space-grotesk-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/instrument-sans-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/instrument-sans-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-latin.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-latin-ext.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* /beta (WEB-2), from the approved static study revision 2. The homepage's tokens and fonts (web/public/home.css). */
:root{--bone:#EDEAE3;--dim:#A29E94;--slate:#A8B9D3;--cyan:#05E1F9;--ink:#12110E;--rule:rgba(255,248,230,.09);--line:rgba(255,248,230,.14);
  /* one rhythm: section gap, heading gap, one radius for surfaces, the homepage's for controls */
  --gap:128px;--hgap:20px;--r:16px;--rc:10px;--pad:80px}
*{box-sizing:border-box}
html,body{background:#060607}
body{position:relative;margin:0;color:var(--bone);font:16px/1.55 'Instrument Sans',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.atmo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.pool{position:absolute;border-radius:50%}
.pool.cyan{width:900px;height:900px;left:-340px;top:-380px;background:radial-gradient(closest-side,rgba(5,225,249,.13),rgba(18,160,120,.06) 45%,rgba(0,0,0,0))}
.pool.low{width:900px;height:900px;left:50%;margin-left:-450px;bottom:-260px;background:radial-gradient(closest-side,rgba(5,225,249,.07),rgba(255,140,70,.03) 55%,rgba(0,0,0,0))}
.grain{position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.page{position:relative;z-index:1}
/* header: the homepage nav */
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad)}
.nav svg{height:26px;width:auto;display:block}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;color:var(--dim);font-size:15px}
.nav ul a{text-decoration:none}.nav ul a[aria-current]{color:var(--bone)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:var(--rc);font:600 15px 'Instrument Sans';background:var(--bone);color:var(--ink);text-decoration:none;white-space:nowrap}
.btn.sm{height:38px;padding:0 15px;font-size:14px}
.btn.lg{height:52px;padding:0 26px;font-size:16px}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--bone)}
.eyebrow{font:500 12px/16px 'Geist Mono';letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0}
.keep-case{text-transform:none}
/* one grid: 12 columns between the header's 80 px margins, everything starts on column 1 */
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}
section{margin-top:var(--gap)}
h1{font:700 64px/1.02 'Space Grotesk';letter-spacing:-.035em;margin:18px 0 22px;text-wrap:balance}
h2{font:700 30px/1.12 'Space Grotesk';letter-spacing:-.025em;margin:0 0 var(--hgap);text-wrap:balance}
h3{font:600 17px/1.35 'Instrument Sans';margin:0 0 6px}
p{margin:0}
.lead{font-size:19px;line-height:1.5;color:var(--dim);max-width:620px;text-wrap:pretty}
/* hero: copy on 7 columns, the facts on 4, read as one composition */
.hero{padding-top:136px;align-items:end}
.hero .copy{grid-column:1 / span 7}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.glance{grid-column:9 / span 4;margin:0;padding-bottom:6px}
.glance div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--rule);font-size:15px}
.glance div:last-child{border-bottom:1px solid var(--rule)}
.glance dt{color:var(--dim)}.glance dd{margin:0;text-align:right}
.glance .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-right:9px;vertical-align:1px}
/* before you request: two columns, spacing and rules only */
.need{grid-column:1 / span 5}.get{grid-column:7 / span 5}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.list li{padding:13px 0;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.45}
/* the one card: the account rule */
.card{border:1px solid var(--line);border-radius:var(--r);background:rgba(255,248,230,.025);padding:48px 56px}
.account{grid-column:1 / -1}
.account .g{align-items:center}
.account .text{grid-column:1 / span 7}
.statement{margin:0 0 22px;padding-left:18px;border-left:2px solid var(--cyan);font-size:19px;line-height:1.5;color:var(--bone)}
.account .notes{font-size:15.5px;color:var(--dim)}
.account .notes p+p{margin-top:8px}
.devices{grid-column:9 / span 4;display:flex;gap:28px;justify-content:flex-end;align-items:flex-end}
.dev{text-align:center;font-size:14px}
.dev svg{display:block;margin:0 auto 10px}
.dev span{display:block;color:var(--dim);font-size:13px}
.dev.off{color:var(--dim)}
/* request to first scan: one sequence */
.seq{grid-column:1 / -1;margin-bottom:44px}
.steps{grid-column:1 / -1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;counter-reset:s}
.steps li{counter-increment:s;padding-top:22px;border-top:1px solid var(--rule);position:relative}
.steps li::before{content:counter(s);position:absolute;top:-12px;left:0;width:24px;height:24px;border-radius:50%;background:#0b0b0c;border:1px solid var(--line);display:grid;place-items:center;font:600 12px 'Instrument Sans';color:var(--bone)}
.steps li:first-child{border-top-color:rgba(5,225,249,.5)}
.steps li:first-child::before{border-color:var(--cyan);color:var(--cyan)}
.steps p{font-size:15px;color:var(--dim)}
.steps .when{display:block;margin-top:10px;font-size:14px;color:var(--slate)}
.after{grid-column:1 / -1;margin-top:28px;font-size:15px;color:var(--dim)}
/* trust: quiet, in support of the CTA */
.trust{padding-top:40px;border-top:1px solid var(--rule)}
.privacy{grid-column:1 / span 6}.support{grid-column:8 / span 5}
.trust h3{margin-bottom:10px}
.trust p{font-size:15.5px;color:var(--dim)}
.trust p+p{margin-top:10px}
.trust .first{color:var(--bone)}
.inl{color:var(--bone);text-decoration:underline;text-decoration-color:rgba(237,234,227,.3);text-underline-offset:3px}
/* the closing: decisive, well apart */
.closing{margin-top:200px;padding-bottom:168px;text-align:center}
.closing svg{width:46px;height:auto;margin:0 auto 26px;display:block;overflow:visible}
.closing h2{font-size:48px;line-height:1.04;letter-spacing:-.035em;margin-bottom:14px}
.closing p{font-size:18px;color:var(--dim)}
.closing .btn{margin-top:32px}
footer{display:flex;align-items:center;justify-content:space-between;gap:24px;height:120px;padding:0 var(--pad);background:#060607;border-top:1px solid rgba(255,248,230,.06);font:400 14px 'Instrument Sans';color:var(--dim)}
footer svg{height:22px;width:auto;display:block}
footer nav{display:flex;gap:24px}footer a{text-decoration:none}
footer .fc{color:rgba(162,158,148,.6)}
/* phone: one reading column, whitespace instead of borders */
@media (max-width:759px){
  :root{--gap:80px;--pad:20px}
  .nav{height:56px}.nav svg{height:22px}.nav ul{display:none}
  .g{display:block}
  .hero{padding-top:56px}
  h1{font-size:40px;line-height:1.04;margin:14px 0 16px}
  h2{font-size:26px}
  .lead{font-size:17px}
  .cta{flex-direction:column;margin-top:28px}.cta .btn{width:100%}
  .glance{margin-top:44px}
  .get{margin-top:56px}
  .card{padding:32px 22px;border-color:var(--rule)}
  .statement{font-size:17px}
  .devices{justify-content:flex-start;margin-top:32px;gap:24px}
  .steps{display:block}
  .steps li{border-top:0;border-left:1px solid var(--rule);padding:0 0 28px 28px;margin-left:12px}
  .steps li:first-child{border-left-color:rgba(5,225,249,.5)}
  .steps li:last-child{padding-bottom:0;border-left-color:transparent}
  .steps li::before{top:0;left:-12px}
  .after{margin-top:24px}
  .trust{padding-top:32px}
  .support{margin-top:32px}
  .closing{margin-top:120px;padding-bottom:104px}
  .closing h2{font-size:34px}
  .closing .btn{width:100%}
  footer{flex-direction:column;justify-content:center;height:auto;padding:28px 20px;gap:14px}
}
/* controls: the homepage's focus ring and press; motion only where it confirms an action */
a:focus{outline:none}
a:focus-visible{outline:2px solid rgba(168,185,211,.95);outline-offset:3px;border-radius:6px}
a.btn:focus-visible{border-radius:var(--rc)}
.btn{transition:background-color .12s ease,border-color .12s ease,scale .1s ease}
.btn:hover{background:#F7F5F0}.btn.ghost:hover{background:transparent;border-color:rgba(255,248,230,.28)}
.btn:active{scale:.98}
.nav ul a:hover,footer a:hover{color:var(--bone)}
.inl:hover{text-decoration-color:rgba(237,234,227,.7)}
.trust h2{font:600 17px/1.35 'Instrument Sans';letter-spacing:0;margin:0 0 10px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media (forced-colors: active){.btn{border:1px solid ButtonText}.statement{border-left-color:CanvasText}}