/* AB:X. One narrow, ruled column; light type; one highlighted phrase per
   heading. The pictures are real screens: on dithered pastel plates, and on
   the silk (gradient.js), the app icon's liquid light drawn live. */

/* 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;
  --paper: #FCFCFC;
  --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);
  --lime: #BFFF33;

  --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(--lime); 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;
}
/* A dot-matrix face, like a car stereo's display, for one phrase per heading.
   Keep punctuation outside it: Doto draws a full stop as a cross. */
.dots { font-family: var(--dots); font-weight: 900; letter-spacing: -0.015em; }
.hl {
  --hl-bg: var(--lime);
  background: var(--hl-bg);
  color: var(--ink-dark);
  padding: 0 .14em .04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hl--grey { --hl-bg: #E6E6E6; }
/* The hero's A/B is a key (motion.js): it flips the phone between the mix and
   the reference. The letter you're hearing is inked; the other one waits. */
.ab-key {
  margin: 0;
  border: 0;
  font: inherit;
  font-family: var(--dots);
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--ink-dark);
  cursor: pointer;
  transition: transform .12s ease;
}
.ab-key:active { transform: translateY(.05em); }
.ab-key[aria-pressed="false"] .ab-b,
.ab-key[aria-pressed="true"] .ab-a { opacity: .4; }
@media (hover: hover) { .ab-key:hover { --hl-bg: #D4FF70; } }
.lede { max-width: 30em; margin-top: 24px; color: rgba(252, 252, 252, .8); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 9px 9px 9px 16px;
  border: 0;
  background: var(--paper);
  color: var(--ink-dark);
  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(--ink-dark); color: var(--paper); }
.btn-icon svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .7; cursor: default; }
@media (hover: hover) {
  .btn:hover .btn-icon { background: #333; }
}

.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);
}
.tag--on { background: var(--lime); }

/* ---------- The silk: hero and finale ---------- */

.world {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  max-height: 1200px;
  overflow: hidden;
}
.world--night {
  background:
    radial-gradient(60% 45% at 30% 100%, rgba(47, 216, 255, .35), transparent 70%),
    radial-gradient(60% 50% at 75% 100%, rgba(122, 60, 245, .4), transparent 70%),
    radial-gradient(90% 60% at 50% 100%, rgba(29, 79, 242, .6), transparent 75%),
    var(--night);
}
.world--morning {
  color: var(--ink-dark);
  background:
    radial-gradient(60% 45% at 30% 100%, rgba(175, 199, 250, .8), transparent 70%),
    radial-gradient(60% 50% at 75% 100%, rgba(205, 184, 255, .7), transparent 70%),
    #F2F3F5;
}
/* Once the silk is drawing, the painted stand-in steps aside. */
.world--night.has-silk { background: var(--night); }
.world--morning.has-silk { background: #F2F3F5; }
.world canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The phone rises from the foot of the scene, in front of the silk. */
.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), 0 0 140px rgba(29, 79, 242, .35);
  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;
}
.phone--light {
  background: #C9CDD3;
  box-shadow: 0 0 0 1.5px #B3B8C0, 0 40px 90px rgba(60, 70, 110, .22), 0 0 140px rgba(127, 163, 240, .35);
}
.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; }
.world--morning .lede { color: rgba(23, 23, 23, .78); }
.world--morning .btn { background: var(--ink-dark); color: var(--paper); }
.world--morning .btn-icon { background: var(--paper); color: var(--ink-dark); }

.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(--paper);
  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: #F2F3F5;
  color: var(--ink-dark);
  font-size: 14px;
}
.foot-home { display: block; line-height: 0; }
.foot-mark { width: 52px; aspect-ratio: 577 / 156; }
.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; }

/* ---------- The car test: the list, on the stereo's display ---------- */

.car-test {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: clamp(110px, 14vw, 200px) 16px;
  border-top: 1px solid var(--line);
}
.display {
  width: min(100%, 720px);
  padding: 26px clamp(20px, 4vw, 36px) 34px;
  border-radius: 18px;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 80px rgba(191, 255, 51, .05), 0 40px 90px rgba(0, 0, 0, .6);
  color: var(--lime);
  /* A dot-matrix face whose full stops stay full stops; Doto draws them as crosses. */
  font-family: "DotGothic16", var(--mono);
  font-weight: 400;
  text-shadow: 0 0 14px rgba(191, 255, 51, .35);
}
.display-bar { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: rgba(191, 255, 51, .5); letter-spacing: .04em; }
.display-title { margin-top: 18px; font-size: 17px; color: rgba(191, 255, 51, .72); letter-spacing: .04em; }
.display-notes {
  margin-top: 18px;
  display: grid;
  gap: 8px;
  font-size: clamp(19px, 2.3vw, 28px);
  line-height: 1.3;
}
.display-notes li { display: grid; grid-template-columns: 2.3em minmax(0, 1fr); }
.display-notes li > span:first-child { color: rgba(191, 255, 51, .42); }
.car-test-coda { color: var(--grey); }

/* ---------- Ledger sections: the ruled column ---------- */

.ledger { border-top: 1px solid var(--line); }
.ledger.dark { background: var(--night); }
.ledger.light { --line: var(--line-light); --chip: #EBEBEB; background: var(--paper); 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; }

/* Dithered pastel plates: the ground each screen sits on. */
.plate {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--p1), var(--p2));
}
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(rgba(255, 255, 255, .75) 25%, transparent 0 50%, rgba(255, 255, 255, .75) 0 75%, transparent 0) 0 0 / 4px 4px;
  -webkit-mask-image: linear-gradient(205deg, #000 5%, transparent 72%);
  mask-image: linear-gradient(205deg, #000 5%, transparent 72%);
  pointer-events: none;
}
.plate--lime { --p1: #DDF1B4; --p2: #F3F9E4; }
.plate--aqua { --p1: #C4EDE3; --p2: #ECF8F5; }
.plate--blue { --p1: #CFDCFA; --p2: #EFF3FD; }
.plate--violet { --p1: #E2D2F4; --p2: #F6F0FB; }
.plate--peach { --p1: #F6D9C8; --p2: #FCF2EB; }
.plate--grey { --p1: #E2E2E2; --p2: #F3F3F3; }

/* A real screen rising from the foot of its plate. */
.crop {
  position: absolute;
  left: 21%;
  top: 13%;
  width: 58%;
  height: 100%;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(20, 20, 40, .12), 0 20px 44px rgba(40, 40, 90, .28);
}
.crop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--focus, 12%); }
.plate--pair .crop { width: 40%; top: 20%; }
.plate--pair .crop:nth-of-type(1) { left: 7%; }
.plate--pair .crop:nth-of-type(2) { left: 53%; }
.plate--pair .tag { position: absolute; top: 7%; z-index: 1; }
.plate--pair .tag:nth-of-type(1) { left: 7%; }
.plate--pair .tag:nth-of-type(2) { left: 53%; }

/* ---------- Cross it off ---------- */

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.row .plate { margin: 6px; }
.row-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 20px 24px 28px;
}
.row-text .chip { align-self: flex-start; }
.struck { font: 400 13px/20px var(--mono); color: var(--grey); }
.struck s { text-decoration-thickness: 1px; }
.row h3 { margin-top: 10px; font: 500 18px/22px var(--sans); letter-spacing: -0.01em; }
.row-text p:last-child { margin-top: 8px; color: var(--grey); max-width: 30em; }
@media (min-width: 760px) {
  .row { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); }
  .row .plate { margin: 6px 0 6px 6px; }
  .row-text { border-left: 1px solid var(--line); margin-left: 6px; }
}

/* ---------- The rest of the kit ---------- */

.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; }
}

/* ---------- Anywhere: the night lifts ---------- */

.sky {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(220px, 28vw, 420px);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #0D0D0D 0%, #141A2E 14%, #34508E 42%, #75A6E4 68%, #C6DDF4 100%);
}
.sky .col { position: relative; z-index: 1; border-color: rgba(255, 255, 255, .14); }
.places {
  display: flex;
  gap: 8px;
  padding: 0 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.places::-webkit-scrollbar { display: none; }
.card {
  flex: 0 0 min(72%, 220px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 188px;
  padding: 12px 14px 18px;
  background: var(--paper);
  color: var(--ink-dark);
}
.card-icon { display: grid; place-items: center; width: 26px; height: 26px; background: var(--lime); color: var(--ink-dark); }
.card-icon .px { width: 16px; height: 16px; fill: currentColor; shape-rendering: crispEdges; }
.card-icon > svg:not(.px) { width: 15px; height: 13px; }
.card h3 { margin-top: auto; font: 500 16px/22px var(--sans); }
.card p { color: var(--grey-dark); font-size: 15px; line-height: 22px; }
@media (min-width: 1024px) {
  .places { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; }
}
.cta-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 8px;
  padding: 20px;
  background: #000;
  color: var(--paper);
}
.cta-card p { flex: 1 1 260px; }
.cta-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 10px;
  background: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0) 0 0 / 4px 4px;
}
.band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: clamp(260px, 34vw, 500px);
  display: block;
}

/* ---------- Without / with ---------- */

.versus { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.vs-col + .vs-col { border-top: 1px solid var(--line); }
.vs-plate { margin: 6px; }
.vs-label {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
}
.files {
  position: absolute;
  left: 12%; right: 12%; top: 26%;
  display: grid;
  gap: 8px;
  font: 400 13px/1 var(--mono);
}
.files li {
  padding: 12px 14px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 24px rgba(0, 0, 0, .08);
}
.files li:nth-child(2) { margin-left: 6%; }
.files li:nth-child(3) { margin-left: 12%; }
.files li:nth-child(4) { margin-left: 18%; }
.crop--low { top: 22%; }
.vs-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}
.mark { display: grid; place-items: center; width: 24px; height: 24px; }
.mark svg { width: 14px; height: 14px; }
.mark--x { background: #EBEBEB; color: #7A7A7A; }
.mark--tick { background: var(--lime); color: var(--ink-dark); }
@media (min-width: 760px) {
  .versus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-col + .vs-col { border-top: 0; border-left: 1px solid var(--line); }
}

/* ---------- Questions & 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: auto 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; }
.qa details[open] .chip { background: var(--lime); color: var(--ink-dark); }
.chev { width: 16px; height: 16px; color: #8A8A8A; transition: transform .2s ease; }
.qa details[open] .chev { transform: rotate(180deg); }
.a { padding: 0 24px 26px 66px; color: var(--grey-dark); max-width: 42em; }
@media (prefers-reduced-motion: reduce) { .chev { transition: none; } }
@media (max-width: 599px) { .a { padding-left: 24px; } }

/* ---------- Motion ----------
   motion.js drives it; the inline script in <head> adds .motion before first
   paint unless Reduce Motion is on, and every starting state below hangs off
   that class. Without it, everything is simply in place. Curves and durations
   are the reference's own. */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --ease-wipe: cubic-bezier(.23, 1, .32, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}
@property --wipe { syntax: "<percentage>"; inherits: true; initial-value: 100%; }

/* Headings: each line rises out of its own mask. */
.ln, .ln-i { display: block; }
.motion .ln { overflow: hidden; padding: .1em 0 .16em; margin: -.1em 0 -.16em; }
.motion .ln-i {
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1.1s var(--ease-out), opacity .75s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.motion .in .ln-i { transform: none; opacity: 1; }

/* The slab wipes in from the left; the text turns dark only where it has reached. */
.motion .hl {
  --wipe: 0%;
  --ink-before: var(--ink);
  background: linear-gradient(var(--hl-bg), var(--hl-bg)) no-repeat 0 0 / var(--wipe) 100%;
  transition: --wipe .75s var(--ease-wipe) var(--wipe-at, .6s);
}
.motion .ledger.light .hl, .motion .world--morning .hl { --ink-before: var(--ink-dark); }
.motion .in .hl { --wipe: 100%; }
.motion .hl-ink {
  color: transparent;
  background: linear-gradient(90deg, var(--ink-dark) var(--wipe), var(--ink-before) var(--wipe));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.motion .ab-key {
  color: var(--ink);
  transition: --wipe .75s var(--ease-wipe) .72s, color .3s var(--ease-out) 1.05s, transform .12s ease;
}
.motion .in .ab-key { color: var(--ink-dark); }

/* The ruled column draws itself down the page. */
.motion .col { position: relative; border-inline-color: transparent; }
.motion .col::before, .motion .col::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 0;
  background: var(--line);
  pointer-events: none;
  transition: height 1.1s var(--ease-out);
}
.motion .col::before { left: -1px; }
.motion .col::after { right: -1px; }
.motion .col.in::before, .motion .col.in::after { height: 100%; }
.motion .sky .col::before, .motion .sky .col::after { background: rgba(255, 255, 255, .14); }
.motion .ledger, .motion .sky { border-top-color: transparent; transition: border-top-color .75s var(--ease-out); }
.motion .ledger.in, .motion .sky.in { border-top-color: var(--line); }

/* Rows, cells and cards arrive out of a blur. */
.motion .rv {
  opacity: 0;
  transform: translateY(var(--rise, 16px));
  filter: blur(6px);
  transition: opacity .4s var(--ease-in), transform .4s var(--ease-in), filter .3s var(--ease-in);
}
.motion .rv.in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .95s var(--ease-out) var(--d, 0s), transform .95s var(--ease-out) var(--d, 0s), filter .75s var(--ease-soft) var(--d, 0s);
}
.motion .row.rv { --rise: 12%; }
.motion .qa details.rv { --rise: 14px; }
/* Each screen rises from the foot of its plate after its row. */
.motion .row .crop { opacity: 0; transform: translateY(14%); transition: opacity .85s var(--ease-out) .3s, transform .95s var(--ease-out) .28s; }
.motion .row.in .crop { opacity: 1; transform: none; }
/* The note is struck through once its answer has arrived. */
.motion .struck s {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0 1px;
  transition: background-size .7s var(--ease-wipe) .8s;
}
.motion .row.in .struck s { background-size: 100% 1px; }
.motion .card-icon {
  opacity: 0;
  transform: scale(.75);
  transition: opacity .45s var(--ease-out) calc(var(--d, 0s) + .22s), transform .5s var(--ease-pop) calc(var(--d, 0s) + .22s);
}
.motion .rv.in .card-icon { opacity: 1; transform: none; }

/* The hero and the finale play in: the silk comes up out of the dark, the
   copy settles from above. */
@keyframes silk-in { from { transform: scale(1.2); filter: brightness(0); } }
@keyframes settle-in { from { opacity: 0; filter: blur(1rem); transform: translateY(-100%); } }
.motion #top canvas[data-silk] { animation: silk-in 3s var(--ease-wipe) both; }
.motion .world .world-copy > * { opacity: 0; }
.motion .world.in .world-copy > * { opacity: 1; animation: settle-in .85s var(--ease-wipe) both; animation-delay: calc(var(--c, 0) * 90ms); }
.world-copy > :nth-child(2) { --c: 1; }
.world-copy > :nth-child(3) { --c: 2; }
.motion #top .hl { --wipe-at: .72s; }

/* ---------- 1. The push ----------
   Hero and car test share one pinned stage. Scrolling first carries the camera
   into the phone (--push-len), then gives the notes room to type (--read-len);
   both in hundredths of the window's height. */
.push { --push-len: 150; --read-len: 100; }
@media (max-width: 599px) { .push { --push-len: 100; --read-len: 80; } }
.motion .push {
  height: calc(100vh + (var(--push-len) + var(--read-len)) * 1vh);
  height: calc(100svh + (var(--push-len) + var(--read-len)) * 1svh);
}
.motion .push-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.motion .push-stage > .world { height: 100%; min-height: 0; max-height: none; }
.motion .push-stage .world-copy {
  opacity: calc(1 - var(--copy, 0));
  transform: translateY(calc(var(--copy, 0) * -6vh));
  filter: blur(calc(var(--copy, 0) * 8px));
}
.motion .push-stage.pushed .world-copy { pointer-events: none; }
.motion #top canvas[data-silk] { opacity: calc(1 - var(--silk-dim, 0)); }
/* Without the 3D phone, the flat one rises and grows toward the window instead. */
.motion #top:not(.has-phone3d) .phone {
  transform: translate(-50%, calc(44% - var(--cam, 0) * 70%)) scale(calc(1 + var(--cam, 0) * 3.2));
  transform-origin: 50% 20%;
}
.motion #top .phone img { filter: brightness(calc(1 - var(--dark, 0))); }
.motion .push-stage .car-test {
  position: absolute;
  inset: 0;
  z-index: 3;
  justify-content: center;
  padding: 16px;
  border-top: 0;
  background: rgba(13, 13, 13, var(--ct, 0));
  pointer-events: none;
}
.motion .push-stage .display { opacity: var(--disp, 0); transform: scale(calc(.96 + var(--disp, 0) * .04)); }
.motion .push-stage .car-test-coda { opacity: 0; transform: translateY(8px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.motion .push-stage .car-test-coda.on { opacity: 1; transform: none; }

/* The notes type out; the full text holds its place underneath. */
.note { position: relative; }
.note-typed { display: none; }
.motion .note-full { visibility: hidden; }
.motion .note-typed { display: block; position: absolute; inset: 0; }
.motion .display-notes li { visibility: hidden; }
.motion .display-notes li.on { visibility: visible; }
.display-notes li.cursor .note-typed::after {
  content: "";
  display: inline-block;
  width: .5em;
  height: .9em;
  margin-left: .12em;
  vertical-align: -.1em;
  background: currentColor;
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- 2. Night to morning ----------
   Under #anywhere, day (the painted gradient) comes up over night as it
   scrolls through; the silk band blends night, dawn, morning with it. */
.motion .sky { background: linear-gradient(180deg, #0D0D0D 0%, #0F1222 45%, #151C38 100%); }
.motion .sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0D0D0D 0%, #141A2E 14%, #34508E 42%, #75A6E4 68%, #C6DDF4 100%);
  opacity: var(--day, 1);
  pointer-events: none;
}

/* ---------- Without / with: one pair at a time ---------- */
.motion .vs-list li.rv.in {
  transition: opacity .95s var(--ease-out) var(--d, 0s), transform .95s var(--ease-out) var(--d, 0s), filter .75s var(--ease-soft) var(--d, 0s), color .45s var(--ease-out);
}
.motion .vs-list .mark { transition: background-color .45s var(--ease-out), color .45s var(--ease-out), opacity .45s var(--ease-out), transform .5s var(--ease-pop); }
.motion .vs-list li.dim { color: #9E9E9E; }
.motion .vs-list li.dim .mark--x { opacity: .45; }
.motion .vs-list .mark--tick { background: #EBEBEB; color: #A3A3A3; transform: scale(.85); }
.motion .vs-list li.lit .mark--tick { background: var(--lime); color: var(--ink-dark); transform: none; }

/* ---------- Buttons: the lime fills from the centre, the arrow keeps falling ---------- */
.btn-icon { overflow: hidden; }
@keyframes arrow-fall {
  0% { transform: none; opacity: 1; }
  44% { transform: translateY(8px); opacity: 0; }
  45% { transform: translateY(-8px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn { position: relative; isolation: isolate; overflow: hidden; transition: color .3s var(--ease-out); }
  .btn::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--lime);
    transform: translate(-50%, -50%) scale(0);
    transition: transform .7s cubic-bezier(.625, .05, 0, 1);
  }
  .btn:not(:disabled):hover::before { transform: translate(-50%, -50%) scale(1); }
  .btn:not(:disabled):hover .btn-icon svg { animation: arrow-fall .95s cubic-bezier(.45, 0, .22, 1) infinite; }
  .world--morning .btn:not(:disabled):hover { color: var(--ink-dark); }
}

/* ---------- 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(--paper); color: var(--ink-dark); }
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px max(12px, calc((100vw - var(--col)) / 2));
  border-bottom: 1px solid var(--line-light);
}
.bar-home { display: block; padding: 8px 0; line-height: 0; color: var(--ink-dark); }
.bar-home svg { width: 64px; aspect-ratio: 577 / 156; }
.btn--ink { background: var(--ink-dark); color: var(--paper); }
.btn--ink .btn-icon { background: var(--paper); color: var(--ink-dark); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .btn--ink:hover { color: var(--ink-dark); } }
@media (max-width: 599px) { .bar .btn { padding-left: 12px; gap: 10px; font-size: 15px; } }
.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: linear-gradient(var(--lime), var(--lime)) no-repeat 0 100% / 100% .12em;
}
.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, #EDEDED, #F7F7F7);
}
.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, where the lime would vanish. */
.ledger.light :focus-visible, .world--morning :focus-visible, .places :focus-visible, body.sub :focus-visible, .site-foot :focus-visible { outline-color: var(--ink-dark); }

/* The waitlist on dark grounds: in the hero and on the Anywhere card, so no
   waitlist button sends anyone to the foot of the page. */
.waitlist--dark input {
  background: rgba(252, 252, 252, .06);
  border-color: rgba(252, 252, 252, .3);
  color: var(--ink);
}
.waitlist--dark input::placeholder { color: rgba(252, 252, 252, .55); }
.waitlist--dark .status { color: var(--ink); }
.waitlist--dark .status:empty { display: none; }
.waitlist--dark .form-note { margin-top: 10px; }
.waitlist--dark .form-note { color: rgba(252, 252, 252, .6); }
.waitlist--dark .form-note a { color: var(--ink); }
.waitlist--card { flex: 1 1 360px; margin-top: 0; justify-content: end; }
.waitlist--card .status, .waitlist--card .form-note { text-align: right; }
@media (max-width: 759px) {
  .waitlist--card { justify-content: stretch; grid-template-columns: minmax(0, 1fr) auto; }
  .waitlist--card .status, .waitlist--card .form-note { text-align: left; }
}