/* AB:X. Real app screenshots, open compositions, and the hero's fog. */

/* Fonts are served from the site itself (Latin subsets, from Google Fonts;
   licences beside them in assets/fonts). Geist and Doto are variable. */
@font-face { font-family: Geist; src: url("assets/fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("assets/fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Doto; src: url("assets/fonts/doto-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: DotGothic16; src: url("assets/fonts/dotgothic16-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --night: #0D0D0D;
  --charcoal: #171717;
  --cream: #F0EFED;
  --field: #FAF9F7;
  --ink: #FCFCFC;
  --ink-dark: #171717;
  --grey: #A3A3A3;
  --grey-dark: #5E5E5E;
  --line: rgba(51, 51, 51, .5);
  --line-light: rgba(214, 214, 214, .8);
  --chip: rgba(51, 51, 51, .5);

  --sans: Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --dots: Doto, "Geist Mono", ui-monospace, monospace;

  --col: min(952px, calc(83vw - 238px));
}
@media (max-width: 1023px) { :root { --col: calc(100vw - 48px); } }
@media (max-width: 599px) { :root { --col: calc(100vw - 24px); } }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 16px/24px var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Type ---------- */

.title {
  font: 400 clamp(40px, 4.5vw, 65px)/1.1 var(--sans);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h2 {
  font: 400 clamp(30px, 2.85vw, 41px)/1.12 var(--sans);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
/* Doto remains on secondary-page headings. */
.dots { font-family: var(--dots); font-weight: 900; letter-spacing: -0.015em; }
.hl { color: var(--ink-dark); }
.lede { max-width: 30em; margin-top: 24px; color: #3A4247; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 9px 9px 9px 16px;
  border: 0;
  background: var(--ink-dark);
  color: var(--cream);
  font: 500 16px/24px var(--sans);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn-icon { display: grid; place-items: center; width: 28px; height: 28px; background: var(--cream); color: var(--ink-dark); }
.btn-icon svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .7; cursor: default; }

.chip {
  display: inline-block;
  padding: 2px 5px 4px;
  background: var(--chip);
  color: var(--grey);
  font: 700 15px/1 var(--dots);
}
.tag {
  padding: 3px 5px 4px;
  background: #E6E6E6;
  color: var(--ink-dark);
  font: 700 14px/1 var(--dots);
}

/* ---------- The hero light and phone ---------- */

.world {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  max-height: 1200px;
  overflow: hidden;
}
/* The fog: the brand kit's hero ground. Grey above, a pale haze behind the
   copy, cooling as it falls. White measures 1.25:1 on the haze, so the copy is
   dark ink; the spec strip stands on a slate floor of its own, where white
   reads, and the floor runs down into the page's night. */
.world--fog {
  --fog-top: #959FA2;
  isolation: isolate;
  background-color: var(--fog-top);
  background-image:
    linear-gradient(90deg, rgba(96, 140, 170, .12), rgba(96, 140, 170, 0) 40%, rgba(28, 42, 52, 0) 62%, rgba(28, 42, 52, .1)),
    linear-gradient(to bottom, var(--fog-top), #B5C0C5 12%, #D5E4EA 24%, #D9E8EF 32%, #D1E3ED 48%, #C6DAE3 58%, #A8BCC5 72%, #94A6AF 86%, #8697A0);
  color: var(--ink-dark);
}
/* The mist: pale banks wider than the hero, so its drift never shows an edge.
   It only ever lightens, so the copy's contrast can only rise. gradient.js
   leans it toward the pointer and pauses its drift off screen. */
.world--fog::before {
  content: "";
  position: absolute;
  inset: -12% -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 16% at 34% 36%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 34% 12% at 66% 28%, rgba(240, 247, 251, .26), rgba(240, 247, 251, 0) 72%),
    radial-gradient(ellipse 44% 12% at 50% 56%, rgba(226, 238, 245, .2), rgba(226, 238, 245, 0) 72%);
  transform: translate3d(calc(var(--lean-x, 0) * 36px), calc(var(--lean-y, 0) * 14px), 0);
  transition: transform 2.4s cubic-bezier(.2, .7, .2, 1);
  animation: fog-drift 60s ease-in-out infinite alternate;
}
.world--fog.fog-offscreen::before { animation-play-state: paused; }
@keyframes fog-drift {
  from { translate: -4% 0; }
  to { translate: 4% -1.5%; }
}
@media (prefers-reduced-motion: reduce) {
  .world--fog::before { animation: none; transition: none; transform: none; }
}
.world--fog .specs { z-index: 0; border-top-color: transparent; }
.world--fog .specs::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -140px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(86, 99, 107, 0), #56636B 140px, #1B2125);
  pointer-events: none;
}
.world--fog .specs::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .28); }
.world--fog .specs dt { color: #DCE3E7; }
.world--fog .specs dd { color: #FFFFFF; }
.world canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Flat phone fallback for the 3D renderer. */
.phone {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: clamp(196px, 19vw, 290px);
  padding: clamp(6px, .6vw, 9px);
  border-radius: clamp(34px, 3.4vw, 50px) clamp(34px, 3.4vw, 50px) 0 0;
  background: #050506;
  box-shadow: 0 0 0 1.5px #2A2D33, 0 40px 100px rgba(0, 0, 0, .55);
  transform: translate(-50%, 44%);
}
.phone img { width: 100%; height: auto; border-radius: clamp(28px, 2.8vw, 42px); }
/* When the 3D phone has its screen, it fades in and the flat one stays only
   for screen readers. */
.world canvas { pointer-events: none; }
.world canvas.phone3d { opacity: 0; transition: opacity .5s ease; }
.has-phone3d canvas.phone3d { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .world canvas.phone3d { transition: none; } }
.has-phone3d .phone {
  width: 1px; height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  box-shadow: none;
}
.world-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(76px, 12vh, 136px) 16px 0;
  text-align: center;
}
.world-copy .btn { margin-top: 32px; }

.waitlist {
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 260px) auto;
  justify-content: center;
}
.waitlist .btn { margin: 0; }
.waitlist input {
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(23, 23, 23, .22);
  border-right: 0;
  border-radius: 0;
  background: var(--field);
  color: var(--ink-dark);
  font: 400 16px/1 var(--sans);
}
.waitlist input::placeholder { color: #6B6B6B; }
.status { grid-column: 1 / -1; min-height: 24px; margin-top: 10px; font-size: 14px; color: var(--ink-dark); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.site-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 24px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-light);
  background: var(--cream);
  color: var(--ink-dark);
  font-size: 14px;
}
.foot-home { display: block; line-height: 0; }
.foot-mark { width: 52px; aspect-ratio: 532 / 166; overflow: visible; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.site-foot a { text-decoration: none; }
.site-foot a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 599px) { .site-foot { flex-direction: column; gap: 14px; } }
.form-note { grid-column: 1 / -1; font-size: 14px; color: rgba(23, 23, 23, .6); }
.form-note a { color: var(--ink-dark); text-underline-offset: 3px; }

/* ---------- Shared ledger and secondary-page column ---------- */

.ledger { border-top: 1px solid var(--line); }
.ledger.dark { background: var(--night); }
.ledger.light { --line: var(--line-light); --chip: #EBEBEB; background: var(--cream); color: var(--ink-dark); }
.ledger.light .chip { color: #6E6E6E; }
.col {
  width: var(--col);
  margin-inline: auto;
  border-inline: 1px solid var(--line);
}
.head { padding: clamp(80px, 9vw, 128px) 24px clamp(40px, 5vw, 64px); }
.head--center { text-align: center; }

/* ---------- Supporting capabilities ---------- */

.kit { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.kit li { padding: 20px 24px 24px; border-bottom: 1px solid var(--line); }
.kit li:last-child { border-bottom: 0; }
.kit h3 { font: 500 16px/22px var(--sans); }
.kit p { margin-top: 6px; color: var(--grey); font-size: 15px; line-height: 22px; }
@media (min-width: 760px) {
  .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit li:nth-child(odd) { border-right: 1px solid var(--line); }
  .kit li:nth-last-child(2) { border-bottom: 0; }
}

/* ---------- Questions and answers ---------- */

.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa details:last-child { border-bottom: 0; }
.qa summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 20px 24px;
  list-style: none;
  cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.chev { width: 16px; height: 16px; color: #8A8A8A; transition: transform .2s ease; }
.qa details[open] .chev { transform: rotate(180deg); }
.a { padding: 0 24px 24px; color: var(--grey-dark); max-width: 42em; }
@media (prefers-reduced-motion: reduce) { .chev { transition: none; } }

/* ---------- Secondary pages: support, privacy, press, contact ----------
   The light ledger on its own: a bar, the ruled column, one row per topic. */

body.sub { background: var(--cream); color: var(--ink-dark); }
.btn--ink { background: var(--ink-dark); color: var(--cream); }
.btn--ink .btn-icon { background: var(--cream); color: var(--ink-dark); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .btn--ink:hover { color: var(--ink-dark); } }
.page { border-top: 0; }
.page .head { padding-top: clamp(56px, 7vw, 96px); }
.page-lede { margin-top: 20px; max-width: 34em; color: var(--grey-dark); }
.doc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 32px;
  padding: 24px;
  border-top: 1px solid var(--line);
}
.doc-row:last-child { padding-bottom: 40px; }
@media (min-width: 760px) { .doc-row { grid-template-columns: minmax(0, 13em) minmax(0, 1fr); } }
.doc-row h2 { font: 500 16px/24px var(--sans); letter-spacing: -0.01em; }
.doc-body > * + * { margin-top: 12px; }
.doc-body p, .doc-body dd { max-width: 36em; color: var(--grey-dark); }
.doc-body b { font-weight: 500; color: var(--ink-dark); }
.doc-body a { color: var(--ink-dark); text-underline-offset: 3px; }
.email {
  font: 400 clamp(26px, 3.4vw, 41px)/1.15 var(--sans);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  text-decoration: none;
  background: none;
}
.doc-body .email { color: var(--ink-dark); }
.pull { font: 400 clamp(20px, 2vw, 24px)/1.35 var(--sans); letter-spacing: -0.02em; }
.doc-body .pull { color: var(--ink-dark); }
.page-date { font: 400 13px/20px var(--mono); }
.facts { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); border-top: 1px solid var(--line); }
.facts dt, .facts dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 400 13px/24px var(--mono); color: #6E6E6E; }
.facts dd { color: var(--ink-dark); }

/* Press: screens and brand files, each opening its full-size file. */
.shots, .brand-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
@media (min-width: 760px) { .shots, .brand-files { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shots a, .brand-files a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.shot-plate, .brand-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  margin-bottom: 6px;
  background: linear-gradient(160deg, #E7E5E1, #F6F5F2);
}
.shot-plate img { height: 88%; width: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(20, 20, 40, .1), 0 12px 28px rgba(40, 40, 90, .2); }
.brand-tile { aspect-ratio: 1; }
.brand-tile img { width: 70%; height: auto; }
.brand-tile--icon img { width: 62%; border-radius: 22%; }
.brand-tile--night { background: var(--night); }
.shot-cap { font-size: 14px; line-height: 20px; color: var(--ink-dark); }
.shot-meta { font: 400 12px/16px var(--mono); color: #6E6E6E; }
@media (hover: hover) { .shots a:hover .shot-cap, .brand-files a:hover .shot-cap { text-decoration: underline; text-underline-offset: 3px; } }

/* Focus stays visible on light grounds. */
.ledger.light :focus-visible, .home #get :focus-visible, body.sub :focus-visible, .site-foot :focus-visible { outline-color: var(--ink-dark); }

/* ---------- The site bar ----------
   Locked to the top of every page, with the page passing beneath it the way
   the app's mixer dissolves its stems under the wordmark: a blur held at full
   strength through the bar and feathered out below it, under a wash of
   whichever ground is passing (site.js reads it on the homepage, where the
   ground changes). There is no rule beneath it; the feather is the edge. */
@property --bar-ground { syntax: '<color>'; inherits: true; initial-value: #F0EFED; }
:root { --bar-h: 60px; }
html { scroll-padding-top: var(--bar-h); }
.bar {
  --bar-ground: var(--cream);
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: var(--bar-h);
  padding: 0 max(12px, calc((100vw - var(--col)) / 2));
  color: var(--ink-dark);
  transition: --bar-ground .3s ease, color .3s ease;
}
.bar[data-tone="dark"] { color: var(--ink); }
.bar::before {
  content: "";
  position: absolute;
  inset: 0 0 -44px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bar-ground) 84%, transparent),
    color-mix(in srgb, var(--bar-ground) 70%, transparent) 45%,
    color-mix(in srgb, var(--bar-ground) 28%, transparent) 75%,
    transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgb(0 0 0 / .82) 72%, rgb(0 0 0 / .48) 86%, rgb(0 0 0 / .16) 95%, transparent);
  mask-image: linear-gradient(to bottom, #000 58%, rgb(0 0 0 / .82) 72%, rgb(0 0 0 / .48) 86%, rgb(0 0 0 / .16) 95%, transparent);
}
@media (prefers-reduced-transparency: reduce) {
  .bar::before { inset: 0; background: var(--bar-ground); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) { .bar, .top-links a { transition: none; } }
.bar-home { display: block; padding: 8px 0; line-height: 0; color: inherit; }
.bar-home svg { width: 64px; aspect-ratio: 532 / 166; overflow: visible; }
.top-links { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 20px; margin-left: auto; font-size: 14px; }
.top-links a { padding: 10px 0; color: var(--grey-dark); text-decoration: none; transition: color .3s ease; }
.bar[data-tone="dark"] .top-links a { color: var(--grey); }
.bar .top-links a[aria-current="page"] { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .bar .top-links a:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; } }
/* The secondary pages end the row with the waitlist key; a phone has room for
   the mark and the links only, and the mark leads home to the form. */
.bar-cta { margin-left: 8px; }
@media (max-width: 599px) { .bar-cta { display: none; } }
@media (max-width: 399px) { .top-links { column-gap: 14px; } .bar-home svg { width: 52px; } }
@media (max-width: 359px) { .top-links { column-gap: 12px; font-size: 13px; } }

/* ---------- The intro (intro.js) ----------
   The app's launch assembly, once a session: the mark assembles in a pool of
   light, then flies up into the bar while the ground fades. Only shown once
   intro.js has decided, in the head, to play it, by marking the root
   intro-playing: never plain "intro", which the overlay's own rule would
   match on <html> and hide the whole page. */
.intro { display: none; }
html.intro-playing .intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
html.intro-playing .bar-home svg { visibility: hidden; }
.intro-ground {
  position: absolute;
  inset: 0;
  /* A pool of light behind the mark, always a little wider than it. */
  background: radial-gradient(ellipse max(46vw, 260px) min(38vh, 300px) at 50% 50%, #3A3A3A, rgba(58, 58, 58, 0)), var(--charcoal);
}
.intro-mark {
  position: relative;
  width: min(64vw, 440px);
  height: auto;
  overflow: visible;
  color: var(--ink);
  transform-origin: 0 0;
  transition: transform .6s cubic-bezier(.65, 0, .25, 1), opacity .25s ease, color .6s ease;
}
.intro--leaving { pointer-events: none; }
/* The ground holds a moment so the mark is already on its way before the page
   comes through beneath it; both finish together. A skip just clears. */
.intro--leaving .intro-ground { opacity: 0; transition: opacity .4s ease-in .2s; }
.intro--skipped .intro-ground { transition: opacity .25s ease; }
.intro--skipped .intro-mark { opacity: 0; }

/* ---------- Homepage layout ---------- */
/* The bar floats over the hero, so the fog runs up beneath it. */
.home .bar { --bar-ground: #959FA2; margin-bottom: calc(-1 * var(--bar-h)); padding-inline: max(16px, calc((100vw - var(--col)) / 2)); }
.home #top { height: auto; min-height: 0; max-height: none; }
html:has(> body.home) { background: #959FA2; }
.site-foot { box-shadow: 0 50vh 0 50vh var(--cream); }
.home .bar[data-tone="light"] .top-links a { color: rgba(23, 23, 23, .8); }
.home #top .world-copy { padding: calc(var(--bar-h) + clamp(32px, 4.5vw, 64px)) 16px 0; }
.home #top .lede { width: min(100%, 32em); max-width: none; margin-top: 20px; text-wrap: balance; }
.home #top .waitlist { margin-top: 24px; max-width: 100%; }
.home .phone-stage { position: relative; z-index: 1; width: min(100%, 680px); height: clamp(340px, 42vw, 480px); margin: 24px auto 32px; touch-action: pan-y; }
.home .phone-stage canvas { width: 100%; height: 100%; }
.home .phone-stage .phone {
  top: 50%; left: 50%; bottom: auto;
  width: auto; height: 86%; aspect-ratio: 800 / 1740;
  padding: clamp(6px, .6vw, 9px);
  border-radius: clamp(34px, 3.4vw, 50px);
  transform: translate(-50%, -50%);
}
.home .phone-stage .phone img { width: 100%; height: 100%; object-fit: contain; }
.home .phone-stage.has-phone3d .phone { width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); box-shadow: none; }
.home .head { padding: clamp(48px, 6vw, 80px) 24px 32px; }
/* The spec strip at the foot of the hero: what the app does, in numbers. */
.specs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: var(--col);
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.specs div { padding: 14px 16px 20px 24px; }
.specs dt { font-size: 13px; line-height: 18px; color: var(--grey); }
.specs dd { margin: 2px 0 0; font-size: 17px; line-height: 24px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
@media (min-width: 600px) { .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .specs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 599px) { .specs div { padding-left: 16px; } }
.home #get { border-top: 1px solid var(--line-light); background: var(--cream); color: var(--ink-dark); text-align: center; }
.home #get .col { padding: 64px 24px; border-color: var(--line-light); }
.home #get .h2 + p { margin-top: 16px; color: var(--grey-dark); }
.home #get .waitlist { margin-top: 24px; }
.home #get .status:empty { display: none; }
.home #get .status:not(:empty) { min-height: 0; }
.home .qa .a a { color: var(--ink-dark); text-underline-offset: 3px; }
@media (max-width: 599px) {
  .home #top .title { font-size: clamp(30px, 9.2vw, 36px); }
  .home #get .col { padding-block: 48px; }
}
@media (max-width: 359px) { .home #top .world-copy, .home .bar { padding-inline: 12px; } }
/* On landscape screens the phone stands beside the copy at the window's full
   height, so its whole screen is in view before any scrolling. Where the
   ruled column would squeeze the copy, the hero's own column is wider; from
   about 1434px it is the ruled column again. */
@media (min-width: 800px) and (min-aspect-ratio: 5/4) {
  .home { --hero-col: min(952px, calc(100vw - 96px)); }
  .home .bar { padding-inline: max(16px, calc((100vw - var(--hero-col)) / 2)); }
  .home #top {
    --col: var(--hero-col);
    --pad: max(16px, calc((100vw - var(--col)) / 2));
    display: grid;
    grid-template-columns: var(--pad) minmax(0, 1fr) clamp(260px, calc(50svh - 40px), 460px) var(--pad);
    grid-template-rows: var(--bar-h) minmax(0, 1fr) auto;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    max-height: 1000px;
  }
  .home #top .world-copy {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    align-items: flex-start;
    padding: 0 40px 56px 0;
    text-align: left;
    container-type: inline-size;
  }
  .home #top .title { font-size: clamp(34px, 11cqi, 65px); }
  .home #top .waitlist { justify-content: start; }
  .home .phone-stage { grid-column: 3; grid-row: 2; width: auto; height: auto; margin: 0 0 24px; }
  .home #top .specs { grid-column: 2 / 4; grid-row: 3; width: auto; margin: 0; }
  .home #top .specs div { padding-left: 0; }
}
@media (max-width: 479px) {
  .home .waitlist { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 8px; }
  .home .waitlist input { width: 100%; border-right: 1px solid rgba(23, 23, 23, .22); }
  .home .waitlist .btn { justify-content: space-between; width: 100%; }
  .home .waitlist .status, .home .waitlist .form-note { margin-top: 0; }
}
@media (hover: hover) { .btn:not(:disabled):hover { background: #383838; } }
.btn { transition: background-color 120ms ease-out, color 120ms ease-out; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Homepage composition. Secondary pages keep their narrower document column. */
.home { --home-width: min(1200px, calc(100% - 96px)); background: var(--charcoal); }
.home .col, .home .specs { width: var(--home-width); border-inline: 0; }
.home .bar { padding-inline: max(48px, calc((100vw - 1200px) / 2)); }
.home .bar-home svg { width: 94px; }
.home #top {
  --home-width: min(1200px, calc(100% - 96px));
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: var(--bar-h) minmax(0, 1fr) auto;
  column-gap: clamp(24px, 4vw, 64px);
  width: 100%;
  min-height: max(820px, 100svh);
  padding-inline: max(48px, calc((100vw - 1200px) / 2));
}
.home #top .world-copy {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  align-items: flex-start;
  padding: 40px 0 68px;
  text-align: left;
}
.home #top .title { font-size: clamp(60px, 4.9vw, 72px); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; white-space: nowrap; }
.home #top .lede { max-width: 35em; margin-top: 28px; text-wrap: initial; font-size: 18px; line-height: 1.5; }
.home #top .waitlist { justify-content: start; }
.home .phone-preview { grid-column: 2; grid-row: 2; align-self: center; min-width: 0; padding: 32px 0 48px; }
.home .phone-stage { width: 100%; height: clamp(540px, 47vw, 620px); margin: 0; }
.home .phone-stage .phone { padding: 8px; }
.screen-preview { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; margin-top: 0; }
.screen-preview[hidden] { display: none; }
.screen-preview-label { color: #fff; font-size: 13px; line-height: 18px; }
.screen-preview-keys { display: flex; gap: 4px; }
.screen-preview button {
  min-width: 64px; min-height: 44px; border: 0;
  border-radius: 0; background: rgba(23, 23, 23, .5); color: #fff;
  font: 400 14px/1 var(--sans); cursor: pointer;
}
.screen-preview button[aria-pressed="true"] { background: var(--cream); color: var(--ink-dark); font-weight: 700; }
.screen-preview button:focus-visible { outline-color: #fff; outline-offset: 3px; position: relative; }
.home #top .specs { grid-column: 1 / -1; grid-row: 3; width: 100%; margin: 0; }
.world--fog .specs::before { top: -290px; background: linear-gradient(to bottom, rgba(86,99,107,0), #56636B 72%, #171717); }
.home .ledger.dark { background: var(--charcoal); }
.home .ledger { border-top: 0; }
.home .head { padding: 88px 0 64px; }
.home .h2 { font-size: clamp(36px, 3.3vw, 48px); }
.home #list .col { padding-bottom: 112px; }
.features { display: grid; gap: 112px; }
.feature { min-width: 0; }
.feature-stage { position: relative; overflow: hidden; background: var(--cream); }
.feature-stage img { position: absolute; height: auto; max-width: none; filter: drop-shadow(0 16px 24px rgba(0,0,0,.2)); }
.feature-text h3 { font: 400 clamp(30px, 3.5vw, 52px)/1.1 var(--sans); letter-spacing: -0.03em; }
.feature-text p { max-width: 36em; margin-top: 20px; color: var(--grey); font-size: 18px; line-height: 1.5; }
.feature--balance { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.feature--balance .feature-stage { height: clamp(450px, 48vw, 620px); }
.feature--balance img { width: min(76%, 480px); top: 4%; left: 12%; }
.feature--eq .feature-text { margin-bottom: 36px; }
.feature--eq .feature-text p { max-width: 37em; }
.feature--eq .feature-stage { height: clamp(470px, 48vw, 610px); }
.feature--eq img { width: min(59%, 570px); top: -48%; left: 20%; }
.feature--lattice { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.feature--lattice .feature-stage { height: clamp(390px, 40vw, 500px); }
.feature--lattice img { width: min(76%, 390px); top: -20%; left: 12%; }
.feature--lattice .feature-text h3, .feature--comparison .feature-text h3 { font-size: clamp(28px, 2.7vw, 36px); }
.feature-comparisons > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.feature--comparison .feature-stage { height: clamp(320px, 31vw, 390px); }
.feature--comparison img { width: min(82%, 390px); left: 9%; top: -52%; }
.feature--comparison:last-child img { top: -12%; }
.feature--comparison .feature-text { padding-top: 28px; }
.feature--comparison .feature-text p { font-size: 16px; margin-top: 12px; }
.feature--detail { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.fader-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fader-modes > div { border-top: 1px solid rgba(214,214,214,.28); padding-top: 20px; }
.fader-mode-unit { display: block; color: var(--cream); font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.03em; }
.fader-modes h4 { margin-top: 24px; font-size: 16px; font-weight: 500; line-height: 1.4; }
.fader-modes p { margin-top: 8px; color: var(--grey); font-size: 14px; line-height: 1.5; }
.feature-facts { margin: 0; }
.feature-facts > div { padding: 20px 0; border-top: 1px solid rgba(214,214,214,.28); }
.feature-facts dt { color: var(--grey); font-size: 14px; line-height: 1.5; }
.feature-facts dd { margin: 8px 0 0; color: var(--cream); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -0.02em; }
@media (max-width: 759px) {
  .feature--detail { grid-template-columns: 1fr; gap: 28px; }
  .feature-facts > div { padding: 16px 0; }
}
.home #kit .col { padding-bottom: 96px; }
.home #kit .head { padding-top: 32px; }
.home .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top-color: rgba(214,214,214,.28); }
.home .kit li { padding: 24px 0; border-bottom: 1px solid rgba(214,214,214,.28); }
.home .kit li:nth-child(odd) { border-right: 0; padding-right: 40px; }
.home .kit li:nth-child(even) { padding-left: 40px; }
.home .kit li:nth-last-child(-n + 2) { border-bottom: 0; }
.home #answers .col { padding-bottom: 96px; }
.home #answers .head { padding-top: 96px; }
.home .qa { max-width: 900px; margin-inline: auto; }
.home .qa summary, .home .qa .a { padding-inline: 0; }
.home #get .col { padding: 88px 0; }
@media (max-width: 1023px) {
  .home { --home-width: calc(100% - 48px); }
  .home .bar { padding-inline: 24px; }
  .home #top { padding-inline: 24px; }
  .home #top .title { font-size: clamp(46px, 5.4vw, 60px); }
  .home .phone-stage { height: 550px; }
}
@media (max-width: 1099px) {
  .home #top { display: flex; flex-direction: column; min-height: 0; padding-top: var(--bar-h); }
  .home #top .world-copy { align-self: stretch; align-items: center; padding: 56px 0 0; text-align: center; }
  .home #top .title { white-space: normal; }
  .home #top .lede { max-width: 34em; }
  .home #top .waitlist { justify-content: center; }
  .home .phone-preview { align-self: stretch; padding: 16px 0 52px; }
  .home .phone-stage { max-width: 620px; margin-inline: auto; }
  .home .feature-comparisons > ul { grid-template-columns: 1fr; gap: 64px; }
  .home .feature--comparison .feature-stage { height: 390px; }
  .home .feature--comparison img { width: min(68%, 390px); left: 16%; }
}
@media (max-width: 599px) {
  .home { --home-width: calc(100% - 32px); }
  .home .bar { padding-inline: 16px; }
  .home .bar-home svg { width: 64px; }
  .home #top { padding-inline: 16px; }
  .home #top .world-copy { padding-top: 28px; }
  .home #top .title { font-size: clamp(34px, 9.2vw, 40px); }
  .home #top .lede { font-size: 16px; }
  .home #top .waitlist { width: 100%; }
  .home .phone-preview { padding-top: 0; padding-bottom: 40px; }
  .home #top .status:empty { display: none; }
  .home .phone-stage { height: 600px; }
  .home .specs div { padding: 16px 10px 20px 0; }
  .home .specs dd { font-size: 15px; }
  .world--fog .specs::before { top: -330px; }
  .home .head { padding: 64px 0 40px; }
  .home .h2 { font-size: 34px; }
  .home #list .col { padding-bottom: 64px; }
  .features { gap: 64px; }
  .feature--balance, .feature--lattice { display: flex; flex-direction: column; gap: 28px; align-items: stretch; }
  .feature--balance .feature-stage { height: 430px; }
  .feature--balance img { width: min(78%, 340px); left: 11%; }
  .feature--eq .feature-text { margin-bottom: 28px; }
  .feature--eq .feature-stage { height: 400px; }
  .feature--eq img { width: min(94%, 400px); left: 3%; top: -32%; }
  .feature--lattice .feature-stage { height: 390px; }
  .feature--lattice img { width: min(78%, 340px); left: 11%; }
  .feature--comparison .feature-stage { height: 350px; }
  .feature--comparison img { width: min(90%, 360px); left: 5%; }
  .feature-text h3 { font-size: 34px; }
  .feature-text p { font-size: 16px; margin-top: 14px; }
  .home #kit .col { padding-bottom: 64px; }
  .home .kit { grid-template-columns: 1fr; }
  .home .kit li:nth-child(n) { border-right: 0; border-bottom: 1px solid rgba(214,214,214,.28); padding: 20px 0; }
  .home .kit li:last-child { border-bottom: 0; }
  .home #answers .col { padding-bottom: 24px; }
  .home #answers .head { padding-top: 64px; }
  .home #get .col { padding-block: 40px; }
}
@media (max-width: 359px) {
  .home { --home-width: calc(100% - 24px); }
  .home .bar, .home #top { padding-inline: 12px; }
  .home .bar-home svg { width: 52px; }
  .home #top .title { font-size: 29px; }
  .home .phone-stage { height: 530px; }
}

/* Pages cross-fade with the mark held in place (the homepage has the same rule). */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.bar-home { view-transition-name: site-mark; }