/* getscootch.com — the app's "desk mat" look: drawn screens on a mat, keycap buttons. */

@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --art-line: #1E2547;
  --paper: #F6F8FC;
  --card: #FFFFFF;
  --ink: #1E2547;
  --ink-soft: #545C80;
  --mat: #DDE5F5;
  --mat-line: #B9C6E8;
  --bezel: #1E2547;
  --bezel-soft: #3A4573;
  --wall-a: #EEF2FB;
  --wall-b: #DCE4F6;
  --win: #FFFFFF;
  --sticky: #FFC83D;
  --sticky-edge: #C99A1E;
  --mint: #1B8F75;
  --coral: #C9353B;
  --focus: #2E3A87;

  --display: "Fredoka", "Atkinson", system-ui, sans-serif;
  --body: "Atkinson", system-ui, sans-serif;
  --r-key: 12px;
  --r-mat: 28px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141A33;
    --card: #1B2240;
    --ink: #EEF1FA;
    --ink-soft: #A7AECB;
    --mat: #1E2647;
    --mat-line: #33406E;
    --bezel: #0B0F22;
    --bezel-soft: #2A3360;
    --wall-a: #2A3460;
    --wall-b: #222B52;
    --win: #36427A;
    --mint: #3CC9A6;
    --coral: #FF7378;
    --focus: #FFC83D;
    --art-line: #A7AECB;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.top, main, .foot { width: min(1080px, 100% - 40px); margin-inline: auto; }

/* ---------- keycaps (same as the app) ---------- */
.key {
  appearance: none; border: 0; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--r-key);
  font: 500 16px/1 var(--display);
  background: var(--card); color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--mat-line) inset, 0 3px 0 var(--mat-line);
  transition: transform .06s, box-shadow .06s, background-color .12s;
}
.key:active { transform: translateY(2px); box-shadow: 0 0 0 1.5px var(--mat-line) inset, 0 1px 0 var(--mat-line); }
.key.primary { background: var(--sticky); color: #1E2547; box-shadow: 0 3px 0 var(--sticky-edge); font-weight: 600; }
.key.primary:active { box-shadow: 0 1px 0 var(--sticky-edge); }
.key:disabled { opacity: .6; cursor: default; transform: none; }

/* ---------- logo: the pointer goes into one edge and comes out of the next ---------- */
.logo {
  display: inline-flex; align-items: center; gap: .12em;
  font: 600 30px/1 var(--display); letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.logo.small { font-size: 22px; }
.logo-word { padding-bottom: .08em; }
.logo-half { height: 1.22em; width: auto; overflow: visible; }
.logo-cursor { fill: var(--sticky); stroke: #1E2547; stroke-width: 30; stroke-linejoin: round; }
.logo-edge { stroke: currentColor; stroke-width: 32; stroke-linecap: round; }
@media (prefers-color-scheme: dark) { .logo-cursor { stroke: var(--ink); } }

/* ---------- header ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0;
}

/* ---------- hero ---------- */
.hero { padding: 20px 0 24px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- the desk demo ---------- */
/* The headline is typed on these screens, so the mat is the hero. Sizes inside are relative
   to the mat (cqw) so both screens show text at the same size. */
.desk { margin: 8px 0 0; }
.mat {
  --alu-1: #F1F3F8; --alu-2: #CDD3E0; --alu-3: #9FA8BC;
  --shell-1: #2C3254; --shell-2: #161A31;
  --note: #FFFFFF; --note-ink: #1E2547; --note-bar: #EEF1F8;
  position: relative; container-type: inline-size;
  display: grid; grid-template-columns: 45fr 52fr; align-items: end; column-gap: 7%;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 60px) clamp(26px, 3.6vw, 42px);
  background: var(--mat); border-radius: var(--r-mat);
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
@media (prefers-color-scheme: dark) {
  .mat { --alu-1: #AEB6CA; --alu-2: #858EA6; --alu-3: #5F6880; --note: #222A4D; --note-ink: #EEF1FA; --note-bar: #2B3460; }
}
/* Stitched edge, like a real desk mat. */
.mat::before {
  content: ""; position: absolute; inset: 10px; border-radius: calc(var(--r-mat) - 8px);
  border: 2px dashed var(--mat-line); pointer-events: none;
}
.mat:focus-visible { outline-offset: 4px; border-radius: var(--r-mat); }
.mat.engaged { cursor: none; box-shadow: 0 0 0 3px var(--sticky); }
.esc-hint {
  position: absolute; top: 18px; right: 22px; display: none; align-items: center; gap: 6px;
  font: 500 14px/1 var(--display); color: var(--ink-soft);
}
.mat.engaged .esc-hint { display: inline-flex; }
kbd {
  font: 600 13px/1 var(--display); padding: 5px 7px; border-radius: 6px; color: var(--ink);
  background: var(--card); box-shadow: 0 0 0 1.5px var(--mat-line) inset, 0 2px 0 var(--mat-line);
}

.device { position: relative; display: grid; justify-items: center; }
.display {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px;
}
/* A faint reflection across the glass. */
.display::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 34%);
}
.display.mac { background: linear-gradient(155deg, #4B5AD2 0%, #8693EC 46%, #F1C4A6 100%); }
.display.pc { background: radial-gradient(120% 90% at 80% 10%, #8ED3C2 0%, #2F9C86 45%, #0F5E52 100%); }
@media (prefers-color-scheme: dark) { .display.mac, .display.pc { filter: brightness(.86) saturate(.95); } }

/* Laptop: lid with a thin bezel and camera, then the base with its thumb scoop. */
.lid {
  position: relative; width: 100%; padding: 2.4% 2.4% 3.4%;
  background: linear-gradient(var(--shell-1), var(--shell-2));
  border-radius: 1.6cqw 1.6cqw .5cqw .5cqw;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .07);
}
.lid::before {
  content: ""; position: absolute; top: 1%; left: 50%; width: .45cqw; height: .45cqw; min-width: 3px; min-height: 3px;
  border-radius: 50%; background: #454D78; transform: translate(-50%, 30%);
}
.base {
  position: relative; width: 114%; height: 1.5cqw; min-height: 7px;
  background: linear-gradient(var(--alu-1) 0%, var(--alu-2) 55%, var(--alu-3) 100%);
  border-radius: .3cqw .3cqw 1.4cqw 1.4cqw / .3cqw .3cqw 1cqw 1cqw;
  box-shadow: 0 1.3cqw 1.6cqw -1cqw rgba(30, 37, 71, .45);
}
.base::before { content: ""; position: absolute; inset: 0 0 auto; height: 18%; background: rgba(30, 37, 71, .28); }
.base::after {
  content: ""; position: absolute; top: 0; left: 50%; width: 14%; height: 46%; transform: translateX(-50%);
  background: linear-gradient(var(--alu-3), var(--alu-2)); border-radius: 0 0 1cqw 1cqw;
}

/* Monitor: thin bezel, a chin with a power light, then the stand. */
.panel {
  position: relative; width: 100%; padding: 1.3% 1.3% 3.6%;
  background: linear-gradient(var(--shell-1), var(--shell-2));
  border-radius: 1.2cqw;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .07), 0 2.2cqw 2.4cqw -1.8cqw rgba(30, 37, 71, .5);
}
.panel::after {
  content: ""; position: absolute; bottom: 1.3%; right: 3%; width: .5cqw; height: .5cqw; min-width: 3px; min-height: 3px;
  border-radius: 50%; background: #5FE0B8; box-shadow: 0 0 6px #5FE0B8;
}
.stand { display: grid; justify-items: center; width: 100%; }
.stand-neck {
  width: 10%; height: 4.6cqw;
  background: linear-gradient(90deg, var(--alu-3), var(--alu-1) 45%, var(--alu-2));
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}
.stand-foot {
  width: 36%; height: 1.1cqw; min-height: 6px;
  background: linear-gradient(var(--alu-1), var(--alu-3)); border-radius: 50% 50% 1cqw 1cqw / 70% 70% 1cqw 1cqw;
  box-shadow: 0 1cqw 1.4cqw -.8cqw rgba(30, 37, 71, .45);
}

/* What's on the screens. */
.menubar {
  position: absolute; inset: 0 0 auto; height: 6%; display: flex; align-items: center; gap: 2.4%; padding: 0 3%;
  background: rgba(255, 255, 255, .5);
}
.menubar i { width: 6%; height: 34%; border-radius: 2px; background: rgba(30, 37, 71, .45); }
.menubar i:first-child { width: 2.4%; height: 46%; border-radius: 50%; }
.menubar b { width: 3%; height: 34%; border-radius: 2px; background: rgba(30, 37, 71, .38); }
.menubar b:first-of-type { margin-left: auto; }
.dock {
  position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%);
  display: flex; gap: 1.8cqw; padding: .8cqw 1.2cqw; border-radius: 1.4cqw;
  background: rgba(255, 255, 255, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.dock i { width: 2.6cqw; height: 2.6cqw; border-radius: .7cqw; background: #FFFFFF; }
.dock i:nth-child(1) { background: #FFC83D; } .dock i:nth-child(2) { background: #1B8F75; }
.dock i:nth-child(3) { background: #C9353B; } .dock i:nth-child(4) { background: #2E3A87; }
.dock i:nth-child(5) { background: #6FB7FF; }
.taskbar {
  position: absolute; inset: auto 0 0; height: 8.5%; display: flex; align-items: center; justify-content: center; gap: 1.4cqw;
  background: rgba(10, 16, 34, .72);
}
.taskbar i { width: 2.4cqw; height: 2.4cqw; border-radius: .5cqw; background: rgba(255, 255, 255, .85); }
.taskbar i:first-child { background: #6FB7FF; }
.taskbar i:nth-child(3) { background: #FFC83D; } .taskbar i:nth-child(4) { background: #5FE0B8; }

.note {
  position: absolute; display: flex; flex-direction: column; overflow: hidden;
  background: var(--note); color: var(--note-ink); border-radius: .9cqw;
  box-shadow: 0 1cqw 2.4cqw rgba(10, 16, 40, .3);
}
.mac .note { top: 12%; left: 7%; right: 7%; bottom: 23%; }
.pc .note { top: 7%; left: 6%; right: 6%; bottom: 16%; border-radius: .5cqw; }
.titlebar { flex: none; display: flex; align-items: center; gap: .7cqw; height: 2.6cqw; padding: 0 1.1cqw; background: var(--note-bar); }
.titlebar i { width: .95cqw; height: .95cqw; border-radius: 50%; }
.mac .titlebar i:nth-child(1) { background: #FF6B63; } .mac .titlebar i:nth-child(2) { background: #FFC83D; } .mac .titlebar i:nth-child(3) { background: #3CC9A6; }
.pc .titlebar { justify-content: flex-end; gap: 1.6cqw; }
.pc .titlebar i { width: 1cqw; height: .2cqw; min-height: 1.5px; border-radius: 1px; background: currentColor; opacity: .55; }
.pc .titlebar i:nth-child(2) { height: 1cqw; background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.pc .titlebar i:nth-child(3) { position: relative; height: 1cqw; background: none; opacity: .55; }
.pc .titlebar i:nth-child(3)::before, .pc .titlebar i:nth-child(3)::after {
  content: ""; position: absolute; left: -15%; top: 50%; width: 130%; height: 1.5px; margin-top: -.75px; background: currentColor; transform: rotate(45deg);
}
.pc .titlebar i:nth-child(3)::after { transform: rotate(-45deg); }
.note-text {
  margin: 0; padding: 1.6cqw 2cqw; overflow: hidden;
  font: 600 3.3cqw/1.06 var(--display); letter-spacing: -.015em; text-wrap: pretty;
}
.typed { white-space: pre-wrap; overflow-wrap: anywhere; }
.caret {
  display: none; width: .3cqw; min-width: 2px; height: .92em; margin-left: .06em; vertical-align: -.1em;
  background: #2E3A87; animation: blink 1.06s steps(1) infinite;
}
@media (prefers-color-scheme: dark) { .caret { background: #FFC83D; } }
.display.caret-on .caret { display: inline-block; }
@keyframes blink { 50% { opacity: 0; } }

.pointer {
  position: absolute; left: 0; top: 0; z-index: 2; width: clamp(16px, 2.1cqw, 24px); height: auto;
  fill: var(--sticky); stroke: #1E2547; stroke-width: 22; stroke-linejoin: round;
  filter: drop-shadow(0 2px 1px rgba(30, 37, 71, .3));
  pointer-events: none; will-change: transform;
}
.glow {
  --p: 0;
  position: absolute; left: 0; top: 0; z-index: 1; width: 64px; height: 170px; margin: -85px 0 0 -32px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 214, 102, .9) 28%, rgba(255, 186, 40, .45) 58%, rgba(255, 186, 40, 0));
  opacity: var(--p);
  transform: var(--at, translate(-999px, 0)) rotate(var(--rot, 0deg)) scale(calc(.45 + .55 * var(--p)), calc(.35 + .65 * var(--p)));
  will-change: transform, opacity;
}
.desk figcaption { margin-top: 14px; font-size: 16px; color: var(--ink-soft); min-height: 1.55em; max-width: 60em; }

/* ---------- waitlist ---------- */
.waitlist {
  margin-top: 32px; padding: clamp(22px, 4vw, 40px);
  background: var(--card); border-radius: 22px;
  box-shadow: 0 0 0 1.5px var(--mat-line) inset;
  scroll-margin-top: 24px;
}
.waitlist h2 { margin: 0; font: 600 clamp(26px, 20px + 1.4vw, 34px)/1.1 var(--display); letter-spacing: -.01em; }
.form-intro { margin: 8px 0 0; color: var(--ink-soft); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; margin-top: 24px; align-items: end; }
.field { display: grid; gap: 8px; }
.field label, .computers legend { font: 500 16px/1.2 var(--display); }
.field input {
  width: 100%; min-height: 52px; padding: 0 16px;
  font: 400 18px var(--body); color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--mat-line); border-radius: var(--r-key);
}
.field input:focus-visible { outline-offset: 1px; border-color: var(--focus); border-radius: var(--r-key); }
.field input[aria-invalid="true"] { border-color: var(--coral); }
.computers { border: 0; margin: 0; padding: 0; min-width: 0; }
.computers legend { padding: 0; margin-bottom: 8px; }
.toggles { display: flex; flex-wrap: wrap; gap: 10px; }
.toggle { position: relative; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .key { min-height: 52px; min-width: 92px; }
.toggle input:checked + .key { background: var(--sticky); color: #1E2547; box-shadow: 0 3px 0 var(--sticky-edge); }
.toggle input:focus-visible + .key { outline: 3px solid var(--focus); outline-offset: 3px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.form-actions .key { min-height: 52px; padding: 0 26px; font-size: 18px; }
.form-status { margin: 0; font-weight: 700; }
.form-status.error { color: var(--coral); }
.form-status.done { color: var(--mint); }
.form-note { margin: 18px 0 0; font-size: 15px; color: var(--ink-soft); }

/* ---------- more than a moving pointer (the tour): a few words each ---------- */
.more { padding: 0 0 96px; }
.more > h2 { margin: 0 0 28px; font: 600 clamp(26px, 22px + 1vw, 34px)/1.15 var(--display); }
.more-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.more-grid li { padding: 20px 20px 22px; background: var(--card); border-radius: 16px; }
.more-grid li::before { content: ""; display: block; width: 28px; height: 4px; margin-bottom: 14px; border-radius: 2px; background: var(--sticky); }
.more-grid h3 { margin: 0 0 6px; font: 600 19px/1.25 var(--display); }
.more-grid p { margin: 0; font-size: 16px; color: var(--ink-soft); }
@media (max-width: 980px) { .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .more-grid { grid-template-columns: 1fr; } .more { padding-bottom: 56px; } }

/* ---------- benefits ---------- */
.benefits {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 56px;
  padding: 88px 0 96px;
}
@media (max-width: 980px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.benefit h2 { margin: 18px 0 6px; font: 600 23px/1.2 var(--display); }
.benefit p { margin: 0; color: var(--ink-soft); max-width: 30em; }
.art { display: block; height: 56px; width: auto; }
.a-screen { fill: var(--card); stroke: var(--art-line); stroke-width: 4; }
.a-kbd { fill: var(--card); stroke: var(--art-line); stroke-width: 3; }
.a-link { fill: none; stroke: var(--mint); stroke-width: 3; stroke-dasharray: 4 5; stroke-linecap: round; }
.a-home { fill: none; stroke: var(--mat-line); stroke-width: 3; stroke-dasharray: 6 6; stroke-linejoin: round; }
.a-wire { stroke: var(--mint); stroke-width: 4; stroke-linecap: round; }
.a-tag { fill: var(--card); stroke: var(--art-line); stroke-width: 4; stroke-linejoin: round; }
.a-hole { fill: var(--paper); stroke: var(--art-line); stroke-width: 3; }
.a-tick { fill: none; stroke: var(--mint); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.art.logos, .art.code { display: flex; align-items: center; gap: 8px; }
.art.logos span {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: var(--ink);
  background: var(--card); box-shadow: 0 0 0 1.5px var(--mat-line) inset, 0 3px 0 var(--mat-line);
}
.art.logos svg { width: 24px; height: 24px; fill: currentColor; }
.art.code { gap: 6px; }
.art.code span {
  width: 30px; height: 40px; display: grid; place-items: center;
  font: 600 22px/1 var(--display); background: var(--card); border-radius: 8px;
  box-shadow: 0 0 0 1.5px var(--mat-line) inset, 0 3px 0 var(--mat-line);
}
.art.code i { width: 6px; }

/* ---------- footer ---------- */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px;
  padding: 28px 0 40px; border-top: 1.5px solid var(--mat-line);
  font-size: 15px; color: var(--ink-soft);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-left: auto; }
.foot-small { margin: 0; }

/* ---------- privacy page ---------- */
.doc { max-width: 40em; padding: 32px 0 80px; }
.doc h1 { font-size: clamp(36px, 24px + 3vw, 52px); max-width: none; }
.doc h2 { font: 600 24px/1.2 var(--display); margin: 36px 0 8px; }
.doc p, .doc li { color: var(--ink); }
.doc ul { padding-left: 1.2em; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .top .key { min-height: 40px; padding: 0 14px; font-size: 15px; }
  .logo { font-size: 26px; }
  .hero { padding-top: 8px; }
  .desk { margin-top: 22px; }
  /* Monitor above the laptop, so the headline still reads top to bottom with big text. */
  .mat { grid-template-columns: 1fr; row-gap: 7cqw; padding: 26px 22px 30px; border-radius: 22px; }
  .mat::before { inset: 7px; border-radius: 16px; }
  .monitor { order: -1; }
  .laptop { width: 86%; justify-self: center; }
  .note-text { font-size: 6.6cqw; padding: 2.4cqw 3cqw; }
  .titlebar { height: 4.6cqw; gap: 1.2cqw; padding: 0 2cqw; }
  .titlebar i { width: 1.7cqw; height: 1.7cqw; }
  .pc .titlebar i { width: 1.8cqw; height: .35cqw; } .pc .titlebar i:nth-child(2), .pc .titlebar i:nth-child(3) { height: 1.8cqw; }
  .dock { gap: 2.6cqw; padding: 1.2cqw 2cqw; } .dock i { width: 4cqw; height: 4cqw; }
  .taskbar { gap: 2.4cqw; } .taskbar i { width: 4cqw; height: 4cqw; }
  .stand-neck { height: 7cqw; } .base { height: 2.6cqw; } .stand-foot { height: 2cqw; }
  .esc-hint { display: none !important; }
  .form-row { grid-template-columns: 1fr; }
  .form-actions .key { width: 100%; }
  .benefits { grid-template-columns: 1fr; padding: 56px 0 32px; }
  .foot-links { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- logo files page ---------- */
.brand { max-width: 1080px; }
.brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.brand-card { margin: 0; padding: 20px; border-radius: 18px; background: #F6F8FC; color: #1E2547; box-shadow: 0 0 0 1.5px #B9C6E8 inset; }
.brand-card.dark { background: #141A33; color: #EEF1FA; box-shadow: none; }
.brand-art { display: grid; place-items: center; min-height: 140px; }
.brand-art img { width: 100%; max-width: 420px; height: auto; }
.brand-card figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 15px; }
.brand-card figcaption span { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.brand-card .key { min-height: 34px; padding: 0 12px; font-size: 14px; }
@media (max-width: 760px) { .brand-grid { grid-template-columns: 1fr; } }

/* ---------- the minimal page (/edge): a dark room, a laptop, a monitor that's off ---------- */
.edge-page {
  --t-soft: #A7AECB; --t-line: #33406E;
  /* The shared keycaps and fields, in their dark colours whatever the system setting. */
  --ink: #EEF1FA; --card: #1B2240; --paper: #141A33; --mat-line: #33406E; --focus: #FFC83D; --coral: #FF7378; --mint: #3CC9A6;
  color-scheme: dark;
  min-height: 100svh; overflow-x: hidden; overflow-x: clip; color: var(--ink);
  background: radial-gradient(120% 80% at 50% 0%, #1B2352 0%, #0F1430 62%) fixed, #0F1430;
}
/* The machines out of shot (the desktop, until it's revealed) and the desk running off both sides
   mustn't make the page wider than the screen: phones would let a finger slide it sideways onto
   them. The page clips them itself (clip, so it doesn't become a scroller), which needs the root
   to take the window's overflow. */
html:has(> .edge-page) { overflow-x: hidden; }
/* The room warms to the monitor's teal once it's on. */
.edge-page::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s .45s ease;
  background: radial-gradient(60% 55% at 62% 45%, rgba(47, 156, 134, .22), rgba(47, 156, 134, 0) 70%);
}
.edge-page.crossed::before { opacity: 1; }
.teaser { position: relative; width: min(62rem, 100% - 40px); margin-inline: auto; padding: clamp(28px, 6vh, 64px) 0 56px; }
.teaser-logo { display: block; width: 180px; height: auto; margin-bottom: 0; }
/* Phones get a top bar: the logo, and a way to the form from the first screen. */
.teaser-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.teaser-join { display: none; }
@media (max-width: 760px) {
  .teaser-join { display: inline-flex; min-height: 40px; padding: 0 16px; font-size: 15px; }
}
#waitlist { scroll-margin-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html:has(> .edge-page) { scroll-behavior: smooth; } }

/* The scene, shot straight on from just above the desk: the screens face us so the words stay
   crisp, and the depth comes from the keyboard deck and the stand's foot, which lie on the desk
   and are drawn in perspective, and from the light the screens throw. Everything is sized from
   the two machines' widths, so phones get the same picture, bigger. */
.scene {
  --note: #FFFFFF; --note-ink: #1E2547; --note-bar: #EEF1F8;
  --glass: #05070D;
  --lap-w: 36cqw; --mon-w: 42cqw; --gap: 6cqw; --tower-w: 10cqw; --tower-gap: 3.5cqw;
  --pan-start: calc(50cqw - var(--lap-w) / 2);                                          /* laptop centred */
  --pan-end: calc(50cqw - (var(--lap-w) + var(--gap) + var(--mon-w) + var(--tower-gap) + var(--tower-w)) / 2); /* all centred */
  --pan-back: var(--pan-end);                                                          /* both still in view */
  --flat: 74deg; /* how far the deck and the foot are tipped back from facing us */
  position: relative; container-type: inline-size; padding: 3cqw 0 4cqw;
  display: grid; align-content: center; /* the machines sit in the middle when it's taller */
}
.track {
  position: relative; display: flex; align-items: flex-end; gap: var(--gap); width: max-content;
  transform: translateX(var(--pan-start)); transition: transform 1.4s cubic-bezier(.65, 0, .35, 1) .15s, opacity .6s ease;
}
.crossed .track { transform: translateX(var(--pan-end)); }
.crossed.on-lap .track { transform: translateX(var(--pan-back)); } /* phones follow the pointer back */
/* The 3D scene (edge3d.js) draws over the CSS one, which stays underneath for screen readers.
   It's as wide as the window and fades out at its edges into the page. */
.three-canvas {
  position: absolute; top: 0; left: 50%; display: block; width: 100vw; height: 100%; transform: translateX(-50%);
  pointer-events: none; opacity: 0; transition: opacity .6s ease;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 5%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
          mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 5%, #000 93%, transparent);
          mask-composite: intersect;
}
/* Where the 3D scene is likely (as edge.js decides), give it room on big windows from the start,
   so nothing jumps when it arrives: up to a third of the width, but never so tall it pushes the
   form out of view. */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .scene[data-three] { min-height: min(34vw, 62vh); }
  /* And keep the CSS scene out of sight until edge.js says which it is (`three`, or `css` if the
     3D scene isn't wanted, can't run or is slow), so its framing never flashes up first. */
  .scene[data-three]:not(.three):not(.css) .track { opacity: 0; }
}
.scene.three .three-canvas { opacity: 1; }
.scene.three .track { opacity: 0; }
/* Underneath, only the words need to stay (for screen readers); its lights would still be painted. */
.scene.three .edge-light, .scene.three .streak, .scene.three .dev-light, .scene.three .surface,
.scene.three .dev::before, .scene.three .dev::after, .scene.three .lap-lid::after { display: none; }
.scene.three .track * { animation: none; transition: none; }
.dev { position: relative; isolation: isolate; }
.lap-deck i, .lap-lip, .mon-stand i { display: block; }

/* The desk, running back to the wall, and the light each screen throws on it and behind it. */
.surface {
  position: absolute; z-index: -1; left: -100cqw; right: -100cqw; pointer-events: none;
  bottom: calc(var(--lap-w) * -.12); height: calc(var(--lap-w) * .37);
  background: linear-gradient(180deg, rgba(150, 160, 235, 0), rgba(150, 160, 235, .05) 7%, rgba(150, 160, 235, .02) 55%, rgba(150, 160, 235, 0));
}
.dev-light { position: absolute; z-index: -1; left: -24%; right: -24%; top: -20%; bottom: 20%; pointer-events: none; transition: opacity 1s .45s ease; }
.lap .dev-light { background: radial-gradient(closest-side, rgba(120, 132, 240, .2), rgba(120, 132, 240, 0)); }
.mon .dev-light { background: radial-gradient(closest-side, rgba(70, 210, 180, .28), rgba(70, 210, 180, 0)); opacity: 0; }
.dev::before { /* pool of light on the desk */
  content: ""; position: absolute; z-index: -1; left: -30%; right: -30%; pointer-events: none;
  bottom: calc(var(--lap-w) * -.1); height: calc(var(--lap-w) * .34); border-radius: 50%;
  transition: opacity 1s .45s ease;
}
.lap::before { background: radial-gradient(closest-side, rgba(140, 150, 250, .2), rgba(140, 150, 250, 0)); }
.mon::before { background: radial-gradient(closest-side, rgba(70, 215, 185, .28), rgba(70, 215, 185, 0)); opacity: 0; }
.crossed .mon .dev-light, .crossed .mon::before { opacity: 1; }
.dev::after { /* contact shadow */
  content: ""; position: absolute; z-index: -1; left: 1%; right: 1%; pointer-events: none;
  bottom: calc(var(--lap-w) * -.03); height: calc(var(--lap-w) * .06); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
}
.mon::after { left: 24%; right: 24%; }

/* ----- the laptop: black glass in an aluminium rim, the deck lit by its own screen ----- */
.lap {
  --bz-t: calc(var(--lap-w) * .028); --bz-s: calc(var(--lap-w) * .022); --bz-b: calc(var(--lap-w) * .03);
  --rim: max(2px, calc(var(--lap-w) * .007));
  width: var(--lap-w);
}
.lap-lid {
  position: relative; padding: var(--bz-t) var(--bz-s) var(--bz-b);
  border: var(--rim) solid transparent;
  border-radius: calc(var(--lap-w) * .04) calc(var(--lap-w) * .04) calc(var(--lap-w) * .012) calc(var(--lap-w) * .012);
  background:
    linear-gradient(165deg, #141830, var(--glass) 45%) padding-box,
    linear-gradient(180deg, #B4BCD8, #5B6382 5%, #353B57 45%, #262B44) border-box;
}
.lap-lid::before { /* camera */
  content: ""; position: absolute; top: calc(var(--bz-t) / 2); left: 50%; width: calc(var(--lap-w) * .009); aspect-ratio: 1;
  border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 35%, #3E4870, #0B0E1A 70%);
}
.lap-lid::after { /* the monitor's light on the laptop's right side, once it's on */
  content: ""; position: absolute; inset: calc(-1 * var(--rim)); border-radius: inherit; pointer-events: none;
  box-shadow: inset -2px 0 0 rgba(150, 250, 225, .55), 12px 0 26px -12px rgba(70, 215, 185, .8);
  opacity: 0; transition: opacity 1s .5s ease;
}
.crossed .lap-lid::after { opacity: 1; }
/* The deck is drawn flat and tipped back; it only takes up the height it shows. */
.lap-deck {
  position: relative; height: calc(var(--lap-w) * .6); margin-bottom: calc(var(--lap-w) * -.4198);
  transform-origin: 50% 0; transform: perspective(calc(var(--lap-w) * 7)) rotateX(var(--flat));
  border-radius: 0 0 calc(var(--lap-w) * .035) calc(var(--lap-w) * .035) / 0 0 calc(var(--lap-w) * .1) calc(var(--lap-w) * .1);
  background: linear-gradient(180deg, #2A2F48 0%, #5E6688 5%, #4A5172 40%, #31374F 100%);
}
.lap-deck::before { /* the lid's shadow along the hinge */
  content: ""; position: absolute; inset: 0 0 auto; height: 8%;
  background: linear-gradient(180deg, rgba(4, 6, 14, .95), rgba(4, 6, 14, 0));
}
/* A MacBook keyboard, built by edge.js so each key can be pressed as the monitor's line types.
   It's sized so a key is as deep as it is wide: 14.5 keys across, 5.6 rows deep. */
.lap-keys { position: absolute; left: 6%; right: 6%; top: 6%; height: 56.6%; }
.lap-keys::after { /* the screen's light on the keys nearest it */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(160, 170, 240, .14), rgba(160, 170, 240, 0) 75%);
}
.lap-keys .k {
  position: absolute; border-radius: 12%; background-color: #0E1122;
  transition: background-color .15s ease, box-shadow .15s ease; /* quick, so only the last key or two glow */
}
.lap-keys .k.down {
  background-color: #FFE7A3; transition: none;
  box-shadow: 0 0 calc(var(--lap-w) * .014) calc(var(--lap-w) * .004) rgba(255, 196, 64, .85);
}
/* Without the script there are no keys to press, so a plain grid stands in. */
.lap-keys:empty {
  background: repeating-linear-gradient(90deg, #0E1122 0 5.65%, transparent 5.65% 6.9%);
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 14.6%, transparent 14.6% 17.86%);
          mask: repeating-linear-gradient(180deg, #000 0 14.6%, transparent 14.6% 17.86%);
}
.lap-pad {
  position: absolute; left: 28%; right: 28%; top: 66%; bottom: 5%;
  border-radius: calc(var(--lap-w) * .012) / calc(var(--lap-w) * .03);
  background: linear-gradient(180deg, #59607F, #3D4362);
  box-shadow: inset 0 0 0 calc(var(--lap-w) * .002) rgba(10, 12, 24, .45);
}
/* A finger's trail on the trackpad while you drive the pointer (edge.js places each touch). */
.lap-pad .touch {
  position: absolute; width: 13%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 236, 170, .95), rgba(255, 200, 61, .55) 45%, rgba(255, 200, 61, 0));
}
.lap-pad .touch.on { animation: touch .9s ease-out forwards; }
.lap-pad .touch.lift { animation: touch .2s ease-out forwards; } /* the finger lifts as the pointer crosses */
@keyframes touch { from { opacity: 1; } to { opacity: 0; } }
/* The front edge: as wide as the deck's front (perspective makes it 9% wider than the back). */
.lap-lip {
  position: relative; width: 108.98%; margin-left: -4.49%; height: calc(var(--lap-w) * .022);
  border-radius: 0 0 calc(var(--lap-w) * .03) calc(var(--lap-w) * .03) / 0 0 calc(var(--lap-w) * .018) calc(var(--lap-w) * .018);
  background: linear-gradient(180deg, #C2CAE4 0, #7B83A3 12%, #3E4460 50%, #1E2238);
}
.lap-lip::before { /* thumb scoop */
  content: ""; position: absolute; left: 44%; right: 44%; top: 0; height: 55%; border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, #2A2F48, #4C5374);
}

/* ----- the monitor: the same glass and rim, a little further back, on a stand ----- */
.mon {
  --bz: calc(var(--mon-w) * .012); --chin: calc(var(--mon-w) * .032); --rim: max(2px, calc(var(--mon-w) * .005));
  width: var(--mon-w); margin-bottom: calc(var(--lap-w) * .06); /* further back on the desk */
}
/* Not there at all until the pointer lands on it. */
.mon-panel, .mon-stand, .mon::after { transition: opacity .35s .4s ease; }
.teasing .mon-panel, .teasing .mon-stand, .teasing .mon::after { opacity: 0; }
.mon-panel {
  position: relative; padding: var(--bz) var(--bz) var(--chin);
  border: var(--rim) solid transparent; border-radius: calc(var(--mon-w) * .016);
  background:
    linear-gradient(165deg, #141830, var(--glass) 45%) padding-box,
    linear-gradient(180deg, #A8B0CC, #4C5472 4%, #2C3250 50%, #1E2238) border-box;
}
.mon-panel::before { /* the top of the panel, seen from just above */
  content: ""; position: absolute; left: 1%; right: 1%; bottom: calc(100% + var(--rim)); height: calc(var(--mon-w) * .007);
  background: linear-gradient(180deg, #151929, #3A4160); clip-path: polygon(1.2% 0, 98.8% 0, 100% 100%, 0 100%);
}
.mon-panel::after { /* power light */
  content: ""; position: absolute; bottom: calc(var(--chin) / 2); left: 50%; width: calc(var(--mon-w) * .007); aspect-ratio: 1;
  border-radius: 50%; transform: translate(-50%, 50%); background: #5FE0B8; box-shadow: 0 0 8px #5FE0B8;
}
/* Stand: an arm from behind the panel onto a foot lying on the desk (tipped back like the deck). */
.mon-stand { position: relative; height: calc(var(--mon-w) * .2029); }
.mon-neck {
  position: absolute; z-index: 1; left: 44.5%; width: 11%; top: 0; height: calc(var(--mon-w) * .16);
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 18%, rgba(255, 255, 255, .06) 50%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, .35)),
    linear-gradient(180deg, #07090F 0%, #262B45 22%, #424A6A 80%, #5E668A 100%);
}
.mon-foot {
  position: absolute; left: 28%; width: 44%; top: calc(var(--mon-w) * .13); height: calc(var(--mon-w) * .22);
  transform-origin: 50% 0; transform: perspective(calc(var(--mon-w) * 6)) rotateX(var(--flat));
  border-radius: calc(var(--mon-w) * .025) / calc(var(--mon-w) * .08);
  background: linear-gradient(180deg, #3D4464 0%, #6C7497 35%, #4A5173 100%);
}
.mon-foot-lip {
  position: absolute; left: 27.2%; width: 45.6%; top: calc(var(--mon-w) * .1929); height: calc(var(--mon-w) * .01);
  border-radius: 0 0 calc(var(--mon-w) * .02) calc(var(--mon-w) * .02) / 0 0 calc(var(--mon-w) * .01) calc(var(--mon-w) * .01);
  background: linear-gradient(180deg, #B8C0DC, #5A6284 25%, #262B44);
}
/* ----- the desktop's tower, beside the monitor: front on, its glass side receding towards it ----- */
.tower {
  position: absolute; z-index: -1; left: calc(100% + var(--tower-gap)); bottom: 0;
  width: var(--tower-w); height: calc(var(--mon-w) * .78);
  transition: opacity .35s .4s ease;
}
.teasing .tower { opacity: 0; }
.tower i { position: absolute; display: block; }
.tower-front {
  inset: 0; border-radius: calc(var(--tower-w) * .06);
  background: linear-gradient(180deg, #262a37, #15171f 55%, #0f1118);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.tower-front::after { /* the mesh grille */
  content: ""; position: absolute; left: 24%; right: 12%; top: 16%; bottom: 8%;
  background: radial-gradient(circle, rgba(0, 0, 0, .6) 34%, transparent 40%) 0 0 / calc(var(--tower-w) * .075) calc(var(--tower-w) * .075);
}
.tower-power {
  top: 5%; left: 50%; width: 14%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  border: max(1.5px, calc(var(--tower-w) * .02)) solid #343a4c;
}
.tower-strip { left: 9%; top: 14%; bottom: 10%; width: 3.5%; border-radius: 2px; background: #262b39; }
/* The left side, glass: drawn flat and tipped away from us about the front's left edge. */
.tower-side {
  right: 100%; top: 0; bottom: 0; width: calc(var(--tower-w) * 1.9);
  transform-origin: 100% 50%; transform: perspective(calc(var(--mon-w) * 3)) rotateY(-68deg);
  border-radius: calc(var(--tower-w) * .06) 0 0 calc(var(--tower-w) * .06);
  background: linear-gradient(90deg, #090b11, #10131c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.tower-side .fan {
  right: 9%; width: 27%; aspect-ratio: 1; border-radius: 50%;
  border: max(2px, calc(var(--tower-w) * .05)) solid #1c2130;
}
/* ARGB fans: the brand's colours chase slowly round each ring, each a little behind the last. */
.tower-side .fan::before, .tower-side .fan::after {
  content: ""; position: absolute; inset: calc(-1 * max(2px, calc(var(--tower-w) * .05))); border-radius: 50%;
  background: conic-gradient(#5FE0B8, #6FB7FF, #8693EC, #FFC83D, #5FE0B8);
  -webkit-mask: radial-gradient(closest-side, transparent 76%, #000 79%, #000 98%, transparent);
          mask: radial-gradient(closest-side, transparent 76%, #000 79%, #000 98%, transparent);
  opacity: 0; transition: opacity .4s .5s ease;
}
.tower-side .fan::after { filter: blur(4px); } /* their glow */
.crossed .tower-side .fan::before { opacity: 1; }
.crossed .tower-side .fan::after { opacity: .7; }
.crossed .tower-side .fan { animation: fan-turn 9s linear infinite; }
.tower-side .fan:nth-child(2) { animation-delay: -3s; }
.tower-side .fan:nth-child(3) { animation-delay: -6s; }
@keyframes fan-turn { to { transform: rotate(1turn); } }
.tower-side .fan:nth-child(1) { top: 10%; }
.tower-side .fan:nth-child(2) { top: 37%; }
.tower-side .fan:nth-child(3) { top: 64%; }
/* It powers on with the screen: fans, strip and power ring, teal like the monitor's light. */
.tower-power, .tower-strip { transition: border-color .4s .5s ease, background-color .4s .5s ease, box-shadow .4s .5s ease; }
.crossed .tower-power { border-color: #7FF2D6; box-shadow: 0 0 6px #5FE0B8, inset 0 0 4px #5FE0B8; }
.crossed .tower-strip { background-color: #7FF2D6; box-shadow: 0 0 8px 1px rgba(95, 224, 184, .8); }
.mon-stand::after { /* where the arm meets the foot */
  content: ""; position: absolute; left: 40%; right: 40%; top: calc(var(--mon-w) * .15); height: calc(var(--mon-w) * .02);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
}

/* The screens, from the main page; the monitor's comes on with a flash. */
.scene .display { border-radius: .3cqw; }
.scene h1.note-text { margin: 0; }
.monitor .note-text p, .mon .note-text p { margin: 0; }
/* Words sized from each machine, so they fit whatever size the machines are drawn at. */
.lap .note-text { font-size: calc(var(--lap-w) * .0825); padding: calc(var(--lap-w) * .04) calc(var(--lap-w) * .05); }
.mon .note-text { font-size: calc(var(--mon-w) * .07); padding: calc(var(--mon-w) * .034) calc(var(--mon-w) * .0425); }
.power-off { display: none; position: absolute; inset: 0; z-index: 3; background: #04060E; pointer-events: none; }
.teasing .power-off, .crossed .power-off { display: block; }
.crossed .power-off { animation: power-on 1s .45s ease-out forwards; }
@keyframes power-on {
  0% { opacity: 1; background: #04060E; }
  18% { opacity: 1; background: #FFFFFF; }
  100% { opacity: 0; background: #E8FFF8; }
}
/* Drawn pointers: the laptop's while its screen holds the pointer, the monitor's once it's across.
   Either way the real cursor is hidden so there's only ever one. */
.scene .pointer { opacity: 0; }
.scene .display.has-pointer .pointer { opacity: 1; }
.held, .held *, .driving, .driving * { cursor: none !important; }
.can-resume, .can-resume * { cursor: pointer; } /* after letting go, over a screen: click to take it back */
/* Touch screens: a finger dragged sideways on the scene moves the pointer (swiping up or down still
   scrolls, and pinching still zooms), and a finger held still, resting the pointer on an edge,
   mustn't select words or flash the scene. */
@media (hover: none) {
  .scene { touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
}

/* ----- light: the edge charges up and flares, a streak crosses the gap, the far edge flashes -----
   edge.js sets --p (brightness) and --y (the pointer's height) on each screen's edge light. */
.edge-light {
  --p: 0; --y: 50%;
  position: absolute; z-index: 2; top: var(--bz-t); bottom: var(--bz-b); right: var(--bz-s); width: 0; pointer-events: none;
  mix-blend-mode: screen;
}
.edge-light::before { /* the white-hot edge */
  content: ""; position: absolute; top: 0; bottom: 0; right: -2px; width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFF6D8 calc(var(--y) - 30%), #FFFFFF var(--y), #FFF6D8 calc(var(--y) + 30%), rgba(255, 255, 255, 0));
  opacity: var(--p); filter: drop-shadow(0 0 6px #FFD666) drop-shadow(0 0 16px #FFB628);
}
.edge-light::after { /* the bloom where the pointer rests */
  content: ""; position: absolute; right: -15cqw; top: calc(var(--y) - 17cqw); width: 30cqw; height: 34cqw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 220, 120, .85) 20%, rgba(255, 176, 40, .5) 46%, rgba(255, 150, 30, .12) 72%, rgba(255, 150, 30, 0));
  opacity: var(--p); transform: scale(calc(.3 + .7 * var(--p)));
}
/* The monitor's is on its screen's left edge. It sits outside the panel so the panel fading in
   doesn't dim the flash of the pointer arriving. */
.mon > .edge-light {
  top: calc(var(--rim) + var(--bz)); bottom: calc(var(--mon-w) * .2029 + var(--rim) + var(--chin));
  left: calc(var(--rim) + var(--bz)); right: auto;
}
.mon > .edge-light::before { right: auto; left: -2px; }
.mon > .edge-light::after { right: auto; left: -15cqw; }
/* The pointer crossing the gap: a comet along the line between the two screens' edges (edge.js
   places it). Parked past the end, so without the animation nothing shows. */
.streak {
  position: absolute; z-index: 3; left: 0; top: 0; height: 26px; overflow: hidden; pointer-events: none;
  transform-origin: 0 0; mix-blend-mode: screen;
}
.streak::before {
  content: ""; position: absolute; left: 0; top: 50%; width: var(--tail, 80px); height: 4px; margin-top: -2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 176, 40, 0), rgba(255, 196, 70, .7) 60%, #FFF6D8 92%, #FFFFFF);
  box-shadow: 0 0 8px 2px rgba(255, 196, 64, .55), 0 0 18px 6px rgba(255, 176, 40, .25);
  transform: translateX(var(--len, 0px));
}
.streak.go::before { animation: streak .6s both; }
@keyframes streak { /* the head reaches the far screen at .45 s, then the tail drains into it */
  0% { transform: translateX(calc(-1 * var(--tail, 80px))); animation-timing-function: cubic-bezier(.5, 0, .75, .7); }
  75% { transform: translateX(calc(var(--len, 0px) - var(--tail, 80px))); animation-timing-function: linear; }
  100% { transform: translateX(var(--len, 0px)); }
}

/* What Scootch is: shown under the demo once the desktop has said its line (and always without
   the script, when both screens are simply on). Until then it takes no room; it opens smoothly (a grid row from 0fr to 1fr) rather than
   leaving a gap. */
.teaser-lead { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s ease; }
.teaser-lead > .lead-body { min-height: 0; overflow: hidden; transition: opacity .8s .2s ease; }
.teaser-lead p {
  max-width: 34em; margin: 0;
  font: 500 clamp(18px, 15px + .6vw, 22px)/1.4 var(--display); color: var(--ink); text-wrap: pretty;
}
.teasing .teaser-lead, .crossed:not(.told) .teaser-lead { grid-template-rows: 0fr; }
.teasing .teaser-lead > .lead-body, .crossed:not(.told) .teaser-lead > .lead-body { opacity: 0; }
/* There's more than the pointer, without saying what: the page keeps to one idea. */
.teaser-lead .teaser-more { max-width: 42em; margin-top: 12px; font: 500 clamp(16px, 14px + .4vw, 18px)/1.4 var(--body); color: var(--t-soft); }
.teaser-more em { font-style: normal; color: var(--sticky); }
/* The problem quieter, on its own line; the answer in full. */
.teaser-lead .lead-problem { margin-bottom: 10px; color: var(--t-soft); }
/* Under the form now: a gap above, taken only once the words show. */
.teaser-lead .lead-body > :first-child { margin-top: 32px; }
.teaser-hint { margin: 8px 0 0; color: var(--t-soft); font-size: 16px; display: flex; align-items: center; gap: 12px; }
.teasing .teaser-hint::after {
  content: ""; flex: none; width: 8px; height: 8px; border-top: 2px solid; border-right: 2px solid;
  transform: rotate(45deg); animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge { 50% { transform: translateX(6px) rotate(45deg); } }
.teaser-form { margin-top: 22px; max-width: 36rem; }
.teaser-row { display: flex; gap: 10px; }
.teaser-row input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 16px;
  font: 400 18px var(--body); color: var(--ink);
  background: rgba(255, 255, 255, .06); border: 1.5px solid var(--t-line); border-radius: var(--r-key);
}
.teaser-row input::placeholder { color: #7D86A8; }
.teaser-row input[aria-invalid="true"] { border-color: var(--coral); }
.teaser-row .key { min-height: 52px; padding: 0 22px; white-space: nowrap; }
.teaser-form .form-status { margin-top: 10px; min-height: 1.5em; }
.teaser-form .form-status:empty { margin-top: 0; min-height: 0; } /* room only once there's something to say */
.teaser-computers { margin-top: 14px; }
.teaser-computers legend { margin-bottom: 8px; font: 400 14px/1.2 var(--body); color: var(--t-soft); }
.teaser-computers .toggle .key { min-height: 40px; min-width: 84px; font-size: 15px; }
.teaser-note { margin: 14px 0 0; font-size: 14px; color: var(--t-soft); }
.teaser-note a { color: var(--t-soft); }
.teaser-credit { margin: 28px 0 0; font-size: 14px; color: var(--t-soft); }
.teaser-credit a { color: var(--ink); font-weight: 600; }

/* Phones: bigger machines; the camera pans from the laptop to the monitor. */
@media (max-width: 760px) {
  .scene {
    --lap-w: 76cqw; --mon-w: 66cqw; --gap: 14cqw; --tower-w: 19cqw; --tower-gap: 4cqw;
    /* the desktop (monitor and tower) centred */
    --pan-end: calc(50cqw - var(--lap-w) - var(--gap) - (var(--mon-w) + var(--tower-gap) + var(--tower-w)) / 2);
    --pan-back: var(--pan-start);
  }
}
@media (max-width: 520px) {
  .teaser-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .crossed .power-off, .streak { display: none; }
}

/* Desktops: the words and the form centred under the two computers. Phones keep to the left. */
@media (min-width: 761px) {
  .teaser-lead p, .teaser-form, .teaser-credit { margin-inline: auto; text-align: center; }
  .teaser-lead p { text-wrap: balance; }
  .teaser-hint, .teaser-computers .toggles { justify-content: center; }
  .teaser-computers legend { width: 100%; text-align: center; }
  .teaser-row input { text-align: start; }
}