/* Voxy website, direction "The keyboard retires".
   One warm paper world from the app, a keycap language for every control,
   the black island replicated from the desktop widget, Caveat for the sleepy
   notes, and a red pen for the edits Voxy makes on your behalf. The home
   close is a said and wrote split with the live globe on its seam, then the
   whole keyboard asleep, resting on a slim footer.
   Served under a strict policy: no inline styles anywhere, so every variant
   is a class and every dynamic value is set through the CSSOM.
   Sizes are in rem (1rem = 16px up to 1680px wide). From there the root size
   grows with the viewport, so 2560 and 4K screens get the same composition
   scaled up instead of a small column in a sea of paper. Hairlines stay px. */

@font-face { font-family: 'Fraunces'; src: url('/site/fonts/Fraunces-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/site/fonts/Fraunces-Italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/site/fonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/site/fonts/Geist-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/site/fonts/GeistMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('/site/fonts/Caveat.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --paper: #f6f5f2;
  --paper-2: #efeee9;
  --paper-3: #e7e5de;
  --said: #ebe9e3;
  --wrote: #fbfaf7;
  --white: #ffffff;
  --ink0: #000000;
  --ink: #141416;
  --hand-ink: #23221f;
  --ink-2: #55534c;
  --ink-3: #6b6960;
  --mute: #9a978d;
  --line: rgba(25, 25, 30, 0.1);
  --line-2: rgba(25, 25, 30, 0.16);
  --line-strong: rgba(25, 25, 30, 0.24);
  --rule: rgba(25, 25, 30, 0.1);
  --pen: #b23c2a;
  --pen-ink: #8f2f20;
  --pen-soft: rgba(178, 60, 42, 0.62);
  --pen-wash: rgba(178, 60, 42, 0.07);
  --blush: #f0b9ad;
  --night: #0c0c0e;
  --desk: #111114;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --gutter: clamp(1rem, 4.4vw, 4rem);
  --maxw: 80rem;
  --nav-h: 4.25rem;
}

/* ---------- base and browser surfaces ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.25rem;
  background: var(--paper);
  scrollbar-color: rgba(20, 20, 22, 0.28) transparent;
  scrollbar-width: thin;
}
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
  caret-color: var(--ink);
  -webkit-tap-highlight-color: rgba(20, 20, 22, 0.08);
  /* Short pages still end on the footer, never on a strip of paper. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .nav, body > .foot { flex: none; }
::selection { background: var(--ink); color: var(--paper); }
::-webkit-scrollbar { width: 0.625rem; height: 0.625rem; }
::-webkit-scrollbar-thumb { background: rgba(20, 20, 22, 0.22); border-radius: 0.625rem; border: 0.1875rem solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a, button, summary, label, select, [data-press], [data-quip], input[type='checkbox'], input[type='radio'], [role='button'] { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 0.1875rem; border-radius: 0.5rem; }
img, svg, canvas { display: block; }
em { font-style: italic; }
ol, ul { list-style: none; }
q { quotes: '\201C' '\201D'; }
@media (hover: hover) {
  a:hover { text-decoration-color: currentColor; }
}

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 0.75rem; top: -3.75rem; z-index: 100; padding: 0.625rem 0.875rem; border-radius: 0.625rem; background: var(--ink); color: #fff; text-decoration: none; font-size: 0.875rem; transition: top 0.2s var(--ease); }
.skip:focus { top: 0.75rem; }

/* ---------- type roles ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink0);
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 em, h2 em, h3 em { font-weight: 500; font-style: italic; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.875rem, 5.4vw, 5rem); line-height: 0.99; }
h2 { font-size: clamp(2.375rem, 4vw, 3.75rem); line-height: 1.02; }
h3 { font-size: clamp(1.625rem, 2.2vw, 2rem); line-height: 1.08; }
.lede { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; color: var(--ink-2); max-width: 34ch; text-wrap: pretty; }
.small { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-3); }
.hand { font-family: var(--hand); font-weight: 500; }

/* Handwritten notes and their scrawled arrows. */
.note {
  position: absolute;
  font: 500 1.5625rem/1 var(--hand);
  color: var(--ink-2);
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.note.pen { color: var(--pen); }
.note .scrawl { position: absolute; width: 3.375rem; height: 2.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Show the right instruction for the input the visitor actually has. */
.for-touch { display: none; }
.touch .for-keys { display: none; }
.touch .for-touch { display: inline; }

/* ---------- brand ---------- */

.brand { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; text-decoration: none; color: var(--ink0); }
.tile {
  width: 2rem; height: 2rem; border-radius: 0.5rem; flex: none;
  background: linear-gradient(180deg, #17171c, #050507);
  border: 1px solid rgba(190, 190, 200, 0.32);
  display: grid; place-items: center; color: #fff;
}
.tile svg { width: 75%; height: 75%; }
.wordmark { display: inline-flex; align-items: baseline; gap: 0.1875rem; font: 600 1.4375rem/1 var(--serif); letter-spacing: -0.015em; color: var(--ink0); }
.wordmark em { font-style: italic; font-weight: 500; }
.wordmark .breath { flex: none; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: currentColor; transform: translateY(-0.8125rem); }

/* ---------- nav ---------- */

.nav {
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 50;
  /* Opaque: big headlines and pen notes scrolling under it must never read
     through and collide with the logo. */
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, background-color 0.2s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-in { position: relative; height: var(--nav-h); display: flex; align-items: center; gap: 1.75rem; }
.nav-links { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.nav-links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; border-radius: 0.625rem; text-decoration: none; font-size: 0.9375rem; color: var(--ink-2); transition: color 0.15s, background-color 0.15s; }
.nav-links a[aria-current='page'] { color: var(--ink0); }
.nav-links a[aria-current='page']::after { content: ''; width: 0.25rem; height: 0.25rem; margin-left: 0.4375rem; border-radius: 50%; background: currentColor; }
.nav-cta { display: flex; align-items: center; }
@media (hover: hover) {
  .nav-links a:hover { color: var(--ink); background: rgba(20, 20, 22, 0.05); }
}

/* The phone menu: a details element, so it opens without any script. */
.menu { display: none; position: static; }
.menu-btn {
  list-style: none;
  width: 2.75rem; height: 2.75rem; border-radius: 0.75rem;
  display: block;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.menu-btn::-webkit-details-marker { display: none; }
.menu-btn::marker { content: ''; }
.menu-btn svg { width: 1.375rem; height: 1.375rem; margin: 0.6875rem auto 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; overflow: visible; }
.menu-btn path { transform-origin: 0.75rem 0.75rem; transition: transform 0.28s var(--ease); }
.menu[open] .menu-btn .l1 { transform: rotate(45deg) translateY(0.2188rem); }
.menu[open] .menu-btn .l2 { transform: rotate(-45deg) translateY(-0.2188rem); }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; gap: 0;
  padding: 0.375rem var(--gutter) 1.125rem;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1.5rem 2.5rem -1.75rem rgba(40, 34, 20, 0.35);
}
.menu-panel a { display: flex; align-items: center; min-height: 3.25rem; font-size: 1.125rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.menu-panel a:last-child { border-bottom: 0; }
.menu-panel a[aria-current='page'] { font-weight: 500; }
.menu[open] .menu-panel { animation: drop 0.32s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-0.375rem); } }

/* Frosted only where the browser can actually frost. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .menu-panel { background: rgba(246, 245, 242, 0.975); -webkit-backdrop-filter: saturate(1.6) blur(1rem); backdrop-filter: saturate(1.6) blur(1rem); }
}

/* ---------- buttons: keycaps with the orbit hover ---------- */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  height: 3.375rem; padding: 0 1.5rem 0.1875rem;
  border-radius: 0.875rem;
  font: 500 1rem/1 var(--sans); letter-spacing: 0.005em;
  color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #2b2b31 0%, #151518 52%, #09090b 100%);
  border: 1px solid #000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -0.25rem 0 rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 0.625rem 1.375rem -0.5rem rgba(20, 20, 25, 0.5);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.2), 0 0.25rem 0.625rem -0.375rem rgba(20,20,25,.45); }
.btn svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn.sm { height: 2.75rem; padding: 0 1rem 0.1875rem; border-radius: 0.6875rem; font-size: 0.9063rem; }
.btn.lg { height: 3.75rem; padding: 0 1.75rem 0.25rem; font-size: 1.0625rem; border-radius: 1rem; }
.btn.full { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn.loading { color: transparent; }
.btn.loading::before {
  content: ''; position: absolute; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* A paper keycap, for second actions on paper and the main one on dark. */
.btn.light, .btn.ghost {
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #f6f4ef 55%, #ebe8e1 100%);
  border: 1px solid rgba(25, 25, 30, 0.2);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -0.25rem 0 rgba(60, 50, 30, 0.13),
    0 1px 2px rgba(40, 34, 20, 0.12),
    0 0.625rem 1.375rem -0.625rem rgba(40, 34, 20, 0.35);
}
.btn.light:active, .btn.ghost:active { box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(60,50,30,.13), 0 1px 1px rgba(40,34,20,.14); }
.btn.light.loading::before, .btn.ghost.loading::before { border-color: rgba(20, 20, 22, 0.2); border-top-color: var(--ink); }

/* The house hover: one small dot orbiting the button's outline. */
.btn::after {
  content: ''; position: absolute; top: 0; left: 0;
  width: 0.3125rem; height: 0.3125rem; border-radius: 50%;
  background: var(--orbit, var(--ink));
  offset-path: inset(-0.5rem round 1.25rem);
  offset-rotate: 0deg;
  opacity: 0;
  animation: orbit 2.6s linear infinite paused;
  transition: opacity 200ms;
  pointer-events: none;
}
@media (hover: hover) {
  .btn:hover:not(:disabled)::after { opacity: 1; animation-play-state: running; }
}
@keyframes orbit { to { offset-distance: 100%; } }
/* Browsers without a shaped offset path get a quiet lift instead. */
@supports not (offset-path: inset(0 round 1px)) {
  .btn::after { display: none; }
  @media (hover: hover) {
    .btn:hover:not(:disabled) { transform: translateY(-1px); }
    .btn:active { transform: translateY(2px); }
  }
}

.linkish { font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
@media (hover: hover) {
  .linkish:hover { text-decoration-color: currentColor; }
}

/* A link with a small arrow that leans forward on hover. */
.arrow-link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font: 500 1rem/1.2 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; }
.arrow-link svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
@media (hover: hover) {
  .arrow-link:hover { text-decoration-color: currentColor; }
  .arrow-link:hover svg { transform: translateX(0.1875rem); }
}

/* Inline keycaps inside running text. */
kbd.kc {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.875rem; height: 1.6875rem; padding: 0 0.5625rem 0.1875rem;
  border-radius: 0.4375rem;
  font: 500 0.8438rem/1 var(--sans); color: var(--ink);
  background: linear-gradient(180deg, #fff, #f1efe9);
  box-shadow: inset 0 -0.1875rem 0 rgba(60, 50, 30, 0.13), 0 0 0 1px rgba(25, 25, 30, 0.15), 0 2px 0.3125rem rgba(40, 34, 20, 0.1);
  vertical-align: 0.08em;
  margin: 0 2px;
}
kbd.kc.dark { color: #fff; background: linear-gradient(180deg, #2a2a30, #0b0b0d); box-shadow: inset 0 -0.1875rem 0 rgba(0,0,0,.55), 0 0 0 1px #000, 0 2px 0.3125rem rgba(0,0,0,.18); }

/* ---------- the keycap system ---------- */

.key {
  --u: 4rem;
  --w: 1;
  --r: calc(var(--u) * 0.15);
  --skirt-a: #f5f3ee;
  --skirt-b: #d3cfc5;
  --top-a: #fefefc;
  --top-b: #f2f0ea;
  --sheen: rgba(255, 255, 255, 0.95);
  --legend: #2c2b27;
  --drop: calc(var(--u) * 0.085);
  position: relative; display: block; flex: none;
  width: calc(var(--u) * var(--w));
  height: var(--u);
  border: 0; padding: 0; background: transparent;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.key.w-cmd { --w: 1.28; }
.key.w-space { --w: 3; }
button.key, .key[data-press], .key[data-quip] { cursor: pointer; touch-action: none; -webkit-touch-callout: none; }
.key .cap {
  position: absolute; inset: 0;
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--skirt-a), var(--skirt-b));
  box-shadow:
    0 1px 1px rgba(40, 34, 20, 0.1),
    0 calc(var(--u) * 0.05) calc(var(--u) * 0.09) rgba(40, 34, 20, 0.13),
    0 calc(var(--u) * 0.15) calc(var(--u) * 0.3) rgba(40, 34, 20, 0.12);
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--ease);
}
.key .top {
  position: absolute;
  left: calc(var(--u) * 0.055); right: calc(var(--u) * 0.055);
  top: calc(var(--u) * 0.035); bottom: var(--drop);
  border-radius: calc(var(--r) * 0.8);
  background:
    radial-gradient(130% 95% at 50% -12%, var(--sheen), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, var(--top-a), var(--top-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 2px rgba(60, 50, 30, 0.07);
  transition: bottom 0.3s var(--spring);
}
.key.is-down .cap {
  transform: translateY(calc(var(--u) * 0.05));
  box-shadow: 0 1px 1px rgba(40, 34, 20, 0.12), 0 calc(var(--u) * 0.02) calc(var(--u) * 0.05) rgba(40, 34, 20, 0.16);
  transition-duration: 0.07s;
}
.key.is-down .top { bottom: calc(var(--drop) * 0.5); transition-duration: 0.07s; }

.key.graphite {
  --skirt-a: #2d2d34;
  --skirt-b: #040406;
  --top-a: #26262c;
  --top-b: #111115;
  --sheen: rgba(255, 255, 255, 0.075);
  --legend: #ffffff;
}
.key.graphite .cap { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 calc(var(--u) * 0.05) calc(var(--u) * 0.09) rgba(10, 10, 14, 0.28), 0 calc(var(--u) * 0.16) calc(var(--u) * 0.34) rgba(10, 10, 14, 0.24); }
.key.graphite .top { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(190, 190, 200, 0.1); }
.key.graphite.is-down .cap { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 calc(var(--u) * 0.02) calc(var(--u) * 0.05) rgba(10,10,14,.3); }
.key.graphite:focus-visible { outline-offset: 0.375rem; border-radius: calc(var(--r) + 0.25rem); }

.key .lg { position: absolute; color: var(--legend); font: 500 max(0.6563rem, calc(var(--u) * 0.118))/1 var(--sans); letter-spacing: 0.01em; white-space: nowrap; }
.key .lg.tr { top: calc(var(--u) * 0.1); right: calc(var(--u) * 0.11); }
.key .lg.tl { top: calc(var(--u) * 0.1); left: calc(var(--u) * 0.11); }
.key .lg.bl { bottom: calc(var(--u) * 0.1); left: calc(var(--u) * 0.11); }
.key .lg.br { bottom: calc(var(--u) * 0.1); right: calc(var(--u) * 0.11); }
.key .lg.c { inset: 0; display: grid; place-items: center; font-size: calc(var(--u) * 0.3); font-weight: 400; }
.key .lg svg { width: max(0.75rem, calc(var(--u) * 0.17)); height: max(0.75rem, calc(var(--u) * 0.17)); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.key .lg.mark { color: #fff; }
.key .lg.mark svg { width: calc(var(--u) * 0.31); height: calc(var(--u) * 0.31); fill: currentColor; stroke: none; }
.key.asleep { --legend: #8e8b82; }

/* A retired key, poked: a sleepy wobble and a handwritten reply. */
.key.nudge .cap { animation: nudge 0.55s var(--ease); }
@keyframes nudge { 0% { transform: translateY(calc(var(--u) * 0.05)); } 35% { transform: rotate(-2.4deg); } 65% { transform: rotate(1.6deg); } 100% { transform: none; } }
.quip {
  position: absolute; left: 50%; bottom: calc(100% + 0.625rem);
  transform: translateX(-50%) translateY(0.375rem) rotate(-3deg);
  font: 500 1.4375rem/1 var(--hand); color: var(--pen); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.4s var(--spring);
  z-index: 4;
}
.key.quipping .quip { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-3deg); }

/* Dozing: three z's drifting up from a sleeping key. */
.zzz { position: absolute; pointer-events: none; font: 500 1.625rem/1 var(--hand); color: var(--ink-3); z-index: 2; }
.zzz i { position: absolute; font-style: normal; opacity: 0; animation: doze 3.3s var(--ease) infinite; }
.zzz i:nth-child(1) { left: 0; top: 0; font-size: 0.7em; }
.zzz i:nth-child(2) { left: 0.55em; top: -0.7em; font-size: 0.9em; animation-delay: 1.1s; }
.zzz i:nth-child(3) { left: 1.2em; top: -1.6em; font-size: 1.15em; animation-delay: 2.2s; }
@keyframes doze {
  0% { opacity: 0; transform: translate(0, 0.5rem) scale(0.85); }
  25% { opacity: 1; }
  80% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(0.5rem, -0.875rem) scale(1.05); }
}

/* The keyboard tray the keys sit in. */
.deck {
  --u: 4rem;
  display: flex; gap: calc(var(--u) * 0.1);
  padding: calc(var(--u) * 0.11);
  border-radius: calc(var(--u) * 0.24);
  background: linear-gradient(180deg, #e2dfd8, #d6d2c9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 2.125rem 3.75rem -2.125rem rgba(40, 34, 20, 0.4);
  width: -webkit-max-content;
  width: max-content;
}
.deck .key { --u: inherit; }

/* ---------- the island: replicated from the desktop widget ---------- */

.island-zone { position: relative; }
.island-anchor { position: absolute; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; justify-content: center; width: 0; }
.from-below .island-anchor { bottom: 0; align-items: flex-end; }
.island {
  --hide-y: 4.375rem;
  position: relative; flex: none;
  width: 9.375rem; height: 9.375rem;
  background: #08080a;
  border-radius: 1.75rem;
  border: 1px solid rgba(190, 190, 200, 0.32);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3125rem; padding: 0.625rem;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(var(--hide-y)) scale(0.7);
  transform-origin: 50% 100%;
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), width 0.35s ease, height 0.35s ease, border-radius 0.35s ease, opacity 0.22s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  box-shadow: 0 1.375rem 2.75rem -1.125rem rgba(8, 8, 12, 0.55), 0 0.25rem 0.625rem -0.25rem rgba(8, 8, 12, 0.3);
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.island:not(.shown) { pointer-events: none; }
.island.shown { opacity: 1; transform: translateY(0) scale(1); }
.island.leaving { opacity: 0; transform: translateY(var(--hide-y)) scale(0.9); transition: transform 0.45s ease, opacity 0.28s ease; }
.island.compact { width: 16.5rem; height: 2.875rem; border-radius: 1.4375rem; gap: 0; padding: 0.25rem 1.125rem; }
.island.compact.notice { width: auto; min-width: 15rem; max-width: 23.25rem; height: auto; min-height: 2.875rem; padding: 0.75rem 1.375rem; }
.island:focus-visible { outline: 2px solid var(--ink); outline-offset: 0.25rem; }
.island canvas { width: 5.5rem; height: 5.5rem; flex-shrink: 0; }
.island.notice canvas { display: none; }
.island .txt { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.island .row { display: flex; align-items: center; justify-content: center; gap: 0.4375rem; min-width: 0; }
.island .label { color: rgba(255, 255, 255, 0.85); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11.875rem; }
.island .label .appin { color: rgba(255, 255, 255, 0.45); }
.island.notice .label { font-size: 0.7188rem; text-align: center; white-space: normal; text-wrap: balance; line-height: 1.4; max-width: 20.375rem; color: rgba(255, 255, 255, 0.82); }
.island .timer { color: rgba(255, 255, 255, 0.5); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.island .timer::before { content: '·'; color: rgba(255, 255, 255, 0.7); font-size: 0.75rem; font-weight: 500; margin-right: 0.3125rem; }
.island .sub { color: rgba(255, 255, 255, 0.5); font-size: 0.625rem; text-align: center; max-width: 7.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.island .sub:empty { display: none; }
.island .dots { display: flex; gap: 0.25rem; align-items: center; flex-shrink: 0; }
.island .dots span { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: #fff; animation: dotpulse 1.1s ease-in-out infinite; }
.island .dots span:nth-child(2) { animation-delay: 0.18s; }
.island .dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes dotpulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.15); } }
.island .tick { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.island .tick path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }

/* ---------- the take card: what you said, what Voxy typed ---------- */

.take {
  position: relative;
  background: var(--white);
  border-radius: 1.125rem;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(40, 34, 20, 0.05), 0 1.125rem 2.5rem -1.375rem rgba(40, 34, 20, 0.28);
  overflow: hidden;
  text-align: left;
}
.take-bar { display: flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0.75rem 1.125rem; border-bottom: 1px solid var(--line); }
.take-kind { font: 500 0.8438rem/1 var(--sans); color: var(--ink); }
.take-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4375rem; font: 400 0.6563rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.take-tag.live::before { content: ''; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--pen); animation: blink 1.2s steps(1) infinite; }
.take-note { padding: 0.6875rem 1.125rem; font-size: 0.875rem; line-height: 1.45; color: #7d2b1e; background: var(--pen-wash); border-bottom: 1px solid var(--line); text-wrap: pretty; }
.take-lbl { display: block; font: 400 0.6563rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.5625rem; }
.take-heard { padding: 1rem 1.25rem; background: #fbfaf7; border-bottom: 1px solid var(--line); }
.heard { font: italic 500 1.1563rem/1.48 var(--serif); color: var(--ink-2); letter-spacing: -0.003em; min-height: 1.48em; text-wrap: pretty; overflow-wrap: break-word; }
.heard .ph { color: var(--ink-3); }
.heard .partial { color: var(--ink-3); }
.take-typed { padding: 1rem 1.25rem 1.25rem; }
.typed { font: 400 1.0938rem/1.55 var(--sans); color: var(--ink); min-height: 1.55em; text-wrap: pretty; overflow-wrap: break-word; }
.typed p + p, .typed p + ul, .typed p + ol, .typed ul + p, .typed ol + p { margin-top: 0.6em; }
.typed ol { list-style: decimal; padding-left: 1.4em; margin-top: 0.375rem; }
.typed ul { list-style: disc; padding-left: 1.3em; margin-top: 0.375rem; }
.typed li { padding-left: 0.25rem; margin: 2px 0; }
.typed li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.typed .ph { color: var(--ink-3); }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; background: var(--ink); vertical-align: -0.17em; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Segments of what you said: fillers struck in gray, overridden words in pen. */
.seg { transition: color 0.3s; background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 1.6px; }
.marked .seg.drop { color: rgba(85, 83, 76, 0.5); background-image: linear-gradient(rgba(85, 83, 76, 0.55), rgba(85, 83, 76, 0.55)); background-size: 100% 1.6px; transition: background-size 0.3s var(--ease) calc(var(--i, 0) * 80ms), color 0.3s calc(var(--i, 0) * 80ms); }
.marked .seg.fix { color: var(--pen); background-image: linear-gradient(var(--pen-soft), var(--pen-soft)); background-size: 100% 2px; transition: background-size 0.3s var(--ease) calc(var(--i, 0) * 80ms), color 0.3s calc(var(--i, 0) * 80ms); }

.typed.pasting { animation: paste 0.6s var(--ease) both; }
@keyframes paste {
  0% { opacity: 0; filter: blur(0.4375rem); transform: translateY(0.25rem); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; filter: blur(0); transform: none; }
}

/* ---------- sections ---------- */

section { position: relative; }
.sec { padding: clamp(5.5rem, 9vw, 9.375rem) 0; }
.sec-head { display: grid; gap: 1.25rem; }

/* "Try saying": a small instruction, then the line to say, in hand. */
.try-line { display: block; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.try-line kbd.kc { font-size: 0.7813rem; height: 1.5625rem; min-width: 1.75rem; }
.say { display: block; margin-top: 0.5rem; font: 500 clamp(1.625rem, 2.2vw, 2rem)/1.12 var(--hand); color: var(--hand-ink); text-wrap: balance; max-width: 22em; }

/* ---------- hero ---------- */

.hero { padding: clamp(2.25rem, 4.4vw, 4rem) 0 clamp(4rem, 7vw, 6.875rem); overflow: hidden; overflow: clip; }
/* The copy is pinned against the rig, not centred on the whole stage, so it
   stays still while the take card grows and shrinks during a live take. */
.hero-grid { --fn: clamp(13.75rem, 21vw, 18.75rem); --nu: calc(var(--fn) * 0.39); --lift: 10.75rem; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.hero-copy { display: grid; gap: 1.75rem; align-content: start; padding-top: calc(var(--lift) * 0.62 + var(--fn) * 0.22); position: relative; z-index: 2; }
.hero-copy .lede { font-size: clamp(1.125rem, 1.45vw, 1.3125rem); max-width: 26em; }
.hero-copy .lede kbd { font-size: 0.875rem; }
.hero-cta { min-height: 5.75rem; }

/* The rig: a monumental fn key, the island docked in its top edge, and the
   rest of the bottom row dozing behind it. --fn is the protagonist's size,
   --nu its sleeping neighbours, --lift the room the listening island needs. */
.hero-stage { position: relative; display: grid; gap: 1.75rem; align-content: start; }
.rig { --u: var(--fn); position: relative; padding-top: var(--lift); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.rig .fn-hero { --u: var(--fn); z-index: 4; }
.rig .fn-hero .lg.tr { font-size: calc(var(--fn) * 0.12); top: calc(var(--fn) * 0.09); right: calc(var(--fn) * 0.1); }
.rig .fn-hero .lg.bl { bottom: calc(var(--fn) * 0.12); left: calc(var(--fn) * 0.1); }
.rig .fn-hero .lg.mark svg { width: calc(var(--fn) * 0.3); height: calc(var(--fn) * 0.3); }
/* The island's bottom edge tucks 7px behind the key, so it reads as rising
   out of the key rather than floating over it. */
.rig .dock { position: absolute; left: 0; top: 0; width: var(--fn); height: calc(var(--lift) + 0.4375rem); z-index: 3; transition: transform 0.3s var(--spring); }
.rig .dock .island-anchor { z-index: auto; }
@supports selector(:has(a)) {
  .rig:has(.fn-hero.is-down) .dock { transform: translateY(calc(var(--fn) * 0.05)); transition-duration: 0.07s; }
}
.rig-deck { --u: var(--nu); position: absolute; left: calc(var(--fn) - 2.875rem); bottom: 1.25rem; padding-left: calc(2.875rem + var(--nu) * 0.22); z-index: 1; }
.rig .note-duty { left: calc(var(--fn) + 2.5rem); top: calc(var(--lift) + 0.25rem); transform: rotate(-4deg); }
.rig .note-duty .scrawl { left: -3.5rem; top: 0.625rem; transform: rotate(200deg); }
.rig .zzz { font-size: 2.125rem; }
.rig .zzz.z1 { left: calc(var(--fn) + var(--nu) * 0.62); bottom: calc(1.25rem + var(--nu) * 1.22 + 0.5rem); }
.rig .zzz.z2 { left: calc(var(--fn) + var(--nu) * 1.74); bottom: calc(1.25rem + var(--nu) * 1.22 + 2px); }
.rig .zzz.z3 { left: calc(var(--fn) + var(--nu) * 2.8); bottom: calc(1.25rem + var(--nu) * 1.22 + 0.75rem); }
.hero-stage .take { width: min(100%, 33.75rem); }
/* The invitation sits right under the key it names, at reading size. */
.hint { font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); margin-top: -0.25rem; max-width: 34em; text-wrap: pretty; }
.hint kbd.kc { font-size: 0.8125rem; height: 1.625rem; min-width: 1.75rem; }

/* The hero's take sits under the key at a lower weight, so the key and the
   island own the half. */
.take-slim { box-shadow: 0 1px 2px rgba(40, 34, 20, 0.05), 0 0.625rem 1.5rem -1.125rem rgba(40, 34, 20, 0.24); }
.take-slim .take-bar { padding: 0.6875rem 1rem; min-height: 2.5rem; }
.take-slim .take-note { padding: 0.625rem 1rem; }
.take-slim .take-heard { padding: 0.75rem 1.125rem; }
.take-slim .take-typed { padding: 0.75rem 1.125rem 1rem; }
.take-slim .take-lbl { margin-bottom: 0.4375rem; }
.take-slim .heard { font-size: 1.0313rem; }
.take-slim .typed { font-size: 1.0313rem; }

/* On a laptop the whole hero, down to the card's "Voxy typed", fits the
   first screen: a short top margin, the key sized from the viewport's
   height as well as its width, and only the room the listening island
   needs above the key (it is 9.375rem tall and tucks 7px behind it). */
@media (min-width: 981px) {
  .hero { padding-top: clamp(0.75rem, 1.25vw, 1.5rem); }
  .hero-grid { --fn: clamp(13.75rem, min(21vw, 32vh), 18.75rem); --lift: 9.5rem; }
  .hero-stage { gap: 1rem; }
  /* The headline starts level with the resting island, not the key. */
  .hero-copy { padding-top: calc(var(--lift) - 3.25rem); }
}
@media (min-width: 641px) and (max-width: 980px) {
  .hero-grid { --lift: 9.5rem; }
}

/* ---------- 2. mix: the letter rows step aside ---------- */

.sec-mix { background: var(--paper-2); overflow: hidden; overflow: clip; }
.mix-head { text-align: center; justify-items: center; }
.mix-head .say { margin-left: auto; margin-right: auto; }
.mix-band { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 35rem) 1fr; gap: clamp(1.25rem, 3vw, 2.75rem); align-items: end; margin-top: 0.5rem; }
.mix-center { position: relative; }
.mix-center .island-zone { height: 10rem; }
/* The letter rows part like a split keyboard and leave a wake of hand drawn
   motion marks at their inner edge. */
.rows { position: relative; display: grid; gap: 0.4375rem; padding-bottom: 4.375rem; }
.rows.left { justify-items: end; transform: translateX(-0.625rem) rotate(-6deg); transform-origin: 100% 100%; }
.rows.right { justify-items: start; transform: translateX(0.625rem) rotate(6deg); transform-origin: 0 100%; }
.rows .r { display: flex; gap: 0.4375rem; }
.rows .key { --u: 3.375rem; }
.rows.left .r:nth-of-type(2) { margin-right: 1.125rem; }
.rows.left .r:nth-of-type(3) { margin-right: 2.875rem; }
.rows.right .r:nth-of-type(2) { margin-left: 1.125rem; }
.rows.right .r:nth-of-type(3) { margin-left: 2.875rem; }
.rows .part-marks { position: absolute; top: 0.25rem; width: 1.625rem; height: 5rem; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; opacity: 0.7; }
.rows.left .part-marks { right: -2.375rem; }
.rows.right .part-marks { left: -2.375rem; }
.rows .note { position: relative; display: block; z-index: 3; }
.rows .note-in { margin: 0 2.125rem 1.625rem 0; transform: rotate(2deg); }
.rows .note-in .scrawl { left: calc(100% + 2px); top: 0.625rem; transform: rotate(52deg); }
.rows .note-out { margin: 1.5rem 0 0 4.375rem; transform: rotate(-2deg); }
.rows .note-out .scrawl { right: calc(100% + 0.25rem); top: -2rem; transform: scaleX(-1) rotate(-14deg); }
.mix-strip { display: none; justify-content: center; align-items: flex-end; gap: 5.75rem; margin: 1.75rem 0 0; padding: 2.125rem 0 0.875rem; position: relative; }
.mix-strip .half { display: flex; gap: 0.3125rem; }
.mix-strip .half:first-child { transform: rotate(-5deg); transform-origin: 100% 100%; }
.mix-strip .half:last-of-type { transform: rotate(5deg); transform-origin: 0 100%; }
.mix-strip .key { --u: 2.25rem; }
.mix-strip .note { left: 50%; top: 0.25rem; transform: translateX(-50%) rotate(-2deg); font-size: 1.375rem; }

/* ---------- 3 and 4. a take beside its world ---------- */

.pair-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.25rem, 6vw, 6.25rem); align-items: center; }
.pair-grid.flip { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.pair-copy { display: grid; gap: 1.375rem; align-content: start; }
.pair-stage { position: relative; }
.pair-stage .island-zone { height: 4rem; }
.pair-stage .take { max-width: 35rem; }
.pair-grid.flip .pair-stage .take { margin-left: auto; }

.delete-wrap { position: relative; margin-top: 1.75rem; height: 13.75rem; }
.delete-wrap .key { --u: 9.375rem; --w: 1.55; }
.delete-wrap .key .lg.br { font-size: calc(var(--u) * 0.115); }
.tag { position: absolute; left: calc(9.375rem * 1.55 + 0.25rem); top: 2.125rem; width: 13.125rem; transform-origin: 0 0; transform: rotate(7deg); pointer-events: none; }
.tag svg.string { position: absolute; left: -2.25rem; top: -1.125rem; width: 4.375rem; height: 2.5rem; fill: none; stroke: #a9a395; stroke-width: 1.3; }
.tag-card {
  position: relative; margin-left: 1.625rem;
  background: #fdfaf2; border: 1px solid rgba(120, 100, 60, 0.22);
  border-radius: 0.375rem 0.875rem 0.875rem 0.375rem;
  padding: 0.875rem 1rem 0.875rem 1.625rem;
  box-shadow: 0 0.625rem 1.375rem -0.75rem rgba(40, 34, 20, 0.35);
  font: 500 1.4375rem/1.02 var(--hand); color: var(--ink-2);
}
.tag-card::before { content: ''; position: absolute; left: 0.5625rem; top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(120, 100, 60, 0.35); }
.tag-card b { display: block; font-weight: 500; color: var(--pen); }

.sec-lists { background: var(--paper-2); }
.return-wrap { --ru: 7.5rem; position: relative; margin-top: 2.5rem; height: 10.625rem; }
.return-wrap .key { --u: var(--ru); --w: 2.25; }
/* Return takes a bow: it leans toward you from its bottom edge, holds, and
   straightens up again. The resting pose is mid bow. */
.key.bowing .cap { transform-origin: 50% 100%; transform: perspective(32.5rem) rotateX(-30deg) rotate(-3deg); animation: bow 4.8s var(--ease) infinite; }
@keyframes bow {
  0%, 100% { transform: perspective(32.5rem) rotateX(-30deg) rotate(-3deg); }
  40% { transform: perspective(32.5rem) rotateX(-30deg) rotate(-3deg); }
  55% { transform: perspective(32.5rem) rotateX(-44deg) rotate(-4deg) translateY(0.25rem); }
  70% { transform: perspective(32.5rem) rotateX(-6deg) rotate(0deg); }
}
.bow-marks { position: absolute; left: calc(var(--ru) * 2.25 - 0.375rem); top: -1.875rem; width: 3.75rem; height: 3.125rem; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; }
.return-wrap .note-bow { left: calc(var(--ru) * 2.25 + 3.625rem); top: -0.875rem; transform: rotate(-5deg); }

/* ---------- 5. every app, kept light ---------- */

.apps-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.25rem, 6vw, 6.25rem); align-items: center; }
.apps-copy { display: grid; gap: 1.25rem; }
.apps-keys { position: relative; display: flex; justify-content: center; padding: 4.375rem 0 1.875rem; }
.apps-keys .deck { --u: 5.75rem; }
.apps-keys .zzz { font-size: 2rem; }
.apps-keys .zzz.z1 { left: calc(50% - 9.375rem); top: 2.5rem; }
.apps-keys .zzz.z2 { left: calc(50% + 3.75rem); top: 1.875rem; }
.apps-keys .note-shuffle { left: calc(50% + 7.5rem); bottom: -0.375rem; transform: rotate(-4deg); }

/* ---------- 6. read aloud: a narrow strip, deliberately secondary ---------- */

.read-strip { background: var(--paper); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.read-in { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) auto minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: 2.125rem 0 1.875rem; }
.read-copy { display: grid; gap: 0.5rem; }
.read-copy h2 { font-size: clamp(1.625rem, 2.2vw, 2rem); line-height: 1.08; }
.read-copy .small { max-width: 34ch; }
.read-key { position: relative; width: 18.75rem; display: flex; justify-content: center; padding-top: 3.125rem; }
.read-key .key { --u: 4.5rem; --w: 1.15; z-index: 7; }
.read-key .dock-ctrl { position: absolute; left: 0; right: 0; top: 0; height: 3.5625rem; }
.read-text { font-size: 1rem; line-height: 1.6; color: var(--ink); padding: 0.875rem 1.125rem; border-radius: 0.875rem; background: var(--white); border: 1px solid var(--line); }
.read-text .sel { background: rgba(47, 95, 196, 0.16); border-radius: 0.1875rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 1px 0; }
.read-text .w.now { background: rgba(47, 95, 196, 0.42); border-radius: 0.1875rem; color: var(--ink0); }

/* ---------- 7. privacy: three facts ---------- */

.privacy-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.25rem, 6vw, 6.875rem); align-items: start; }
.privacy-grid h2 { max-width: 9em; }
.facts { border-top: 1px solid var(--ink); }
.facts li { padding: 1.5rem 0 1.625rem; border-bottom: 1px solid var(--line-2); font-size: clamp(1.125rem, 1.45vw, 1.3125rem); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.facts-more { margin-top: 0.875rem; }

/* ---------- 8. FAQ: keycap toggles ---------- */

.sec-faq { padding-top: 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.25rem, 6vw, 6.875rem); align-items: start; }
.faq-grid .sec-head .lede { max-width: 26ch; }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 2.75rem; padding: 1.375rem 0; font: 500 1.1563rem/1.35 var(--sans); color: var(--ink); -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ''; }
.faq summary:focus-visible { outline-offset: 0.25rem; }
.ktog {
  flex: none; position: relative; width: 2.25rem; height: 2.25rem; border-radius: 0.5625rem;
  background: linear-gradient(180deg, #fff, #efede7);
  box-shadow: inset 0 -0.1875rem 0 rgba(60, 50, 30, 0.12), 0 0 0 1px rgba(25, 25, 30, 0.14), 0 0.25rem 0.5rem -0.25rem rgba(40, 34, 20, 0.3);
  display: grid; place-items: center; color: var(--ink-2);
  transition: transform 0.2s var(--spring), box-shadow 0.2s;
}
.ktog svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; transition: transform 0.3s var(--ease); }
.faq details[open] .ktog { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(60,50,30,.12), 0 0 0 1px rgba(25,25,30,.16); color: var(--ink0); }
.faq details[open] .ktog svg { transform: rotate(45deg); }
.faq .ans { padding: 0 4rem 1.5rem 0; color: var(--ink-2); font-size: 1.0313rem; line-height: 1.6; max-width: 62ch; }
.faq .ans p + p { margin-top: 0.625rem; }
.faq .ans kbd { font-size: 0.7813rem; height: 1.5rem; min-width: 1.625rem; }
.faq .ans a { color: var(--ink); }
@media (hover: hover) {
  .faq summary:hover .ktog { color: var(--ink0); }
}

/* ---------- 9. the close: said, the globe on the seam, wrote ---------- */

.close { position: relative; background: linear-gradient(90deg, var(--said) 50%, var(--wrote) 50%); border-top: 1px solid var(--line-2); overflow: hidden; overflow: clip; }
.close::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line-2); pointer-events: none; }
.close-in {
  --seam: clamp(13.75rem, 21vw, 19.375rem);
  position: relative;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(6.25rem, 10vw, 10.5rem) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--seam) minmax(0, 1fr);
  align-items: center;
}
.close-said { padding-right: clamp(0px, 2vw, 2rem); }
.scrawl-q {
  --size: clamp(2.375rem, 3.5vw, 3.25rem);
  --lh: calc(var(--size) * 1.24);
  font: 500 var(--size) / var(--lh) var(--hand);
  color: var(--hand-ink);
  background-image: linear-gradient(to bottom, transparent calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px));
  background-size: 100% var(--lh);
  background-position: 0 calc(var(--size) * -0.17);
  max-width: 12em;
  text-wrap: pretty;
  transform: rotate(-1deg);
  transform-origin: left top;
}
.scrawl-q s { text-decoration: none; }
/* A hand drawn strike: one wobbly stroke for a filler, two for a restart. */
.x {
  color: #85837c;
  background-repeat: no-repeat;
  background-position: 0 60%;
  background-size: 100% 0.5em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6.4 C 18 4.2, 31 7.6, 50 5.4 S 82 4, 99 5.8' fill='none' stroke='%2377756e' stroke-width='1.7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.x.fix {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 3.6 C 22 2.2, 40 5.2, 62 3.4 S 88 2.6, 99 3.8 M1 7.4 C 20 8.8, 44 5.8, 66 7.4 S 90 8.4, 99 6.8' fill='none' stroke='%2377756e' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.close-seam { position: relative; display: flex; align-items: center; justify-content: center; min-height: 18.75rem; }
.bigglobe { width: var(--seam); height: var(--seam); pointer-events: none; -webkit-user-select: none; user-select: none; }
.close-wrote { padding-left: clamp(0px, 2vw, 2rem); display: grid; gap: 1.5rem; justify-items: start; }
.close-wrote h2 { font-size: clamp(3.125rem, 5.4vw, 5.375rem); line-height: 0.98; max-width: 7em; }

/* ---------- 10. lights out: the whole board asleep, resting on the footer ---------- */

.kb-close {
  background: var(--night);
  color: #fff;
  text-align: center;
  padding-top: clamp(6rem, 10vw, 10.5rem);
  overflow: hidden;
  overflow: clip;
}
.kb-close h2 { color: #fff; font-size: clamp(2.875rem, 5.6vw, 5.5rem); padding: 0 var(--gutter); }
.kb-close ::selection { background: #fff; color: var(--night); }
.night-keys {
  --bu: clamp(1.875rem, 5.1vw, 4.625rem);
  position: relative;
  display: flex; justify-content: center;
  margin-top: clamp(5.25rem, 8vw, 8rem);
}
.night-keys .zzz { color: rgba(255, 255, 255, 0.5); font-size: calc(var(--bu) * 0.42); }
.night-keys .bz1 { left: calc(50% - var(--bu) * 2.9); top: calc(var(--bu) * -0.3); }
.night-keys .bz2 { left: calc(50% + var(--bu) * 2.2); top: calc(var(--bu) * -0.15); }
.night-keys .bz3 { left: calc(50% + var(--bu) * 4.9); top: calc(var(--bu) * -0.36); }
.night-keys .note { font-size: clamp(1.1875rem, calc(var(--bu) * 0.36), 2.125rem); }
.night-keys .note-night { color: rgba(255, 255, 255, 0.66); left: 50%; top: calc(var(--bu) * -0.95); transform: translateX(-50%) rotate(-2deg); }
.night-keys .note-nightfn { color: var(--blush); left: calc(50% - var(--bu) * 8.06 + 2px); top: calc(var(--bu) * -0.8); transform: rotate(-5deg); }

/* The board: rows of the real Mac layout, each 15.8 keys wide. Only fn is
   properly lit. Its chassis runs straight into the footer below it. */
.board {
  --u: var(--bu);
  position: relative;
  display: grid; gap: calc(var(--bu) * 0.1);
  padding: calc(var(--bu) * 0.16) calc(var(--bu) * 0.16) calc(var(--bu) * 0.42);
  border-radius: calc(var(--bu) * 0.3) calc(var(--bu) * 0.3) 0 0;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #1a1a1e, var(--desk) 88%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 1px 0 0 rgba(255, 255, 255, 0.03), inset -1px 0 0 rgba(255, 255, 255, 0.03), 0 -1.875rem 5rem -2.5rem rgba(255, 255, 255, 0.08);
  width: -webkit-max-content;
  width: max-content;
  flex: none;
  margin-bottom: -1px;
}
.board .brow { display: flex; gap: calc(var(--bu) * 0.1); }
.board .key { --u: var(--bu); }
.board .key.w-15 { --w: 1.5; }
.board .key.w-175 { --w: 1.75; }
.board .key.w-185 { --w: 1.85; }
.board .key.w-235 { --w: 2.35; }
.board .key.w-bar { --w: 5.34; }
.board .arrows { display: grid; gap: calc(var(--bu) * 0.06); }
.board .arrows .key { height: calc(var(--bu) * 0.47); }
.key.night { --skirt-a: #222227; --skirt-b: #08080a; --top-a: #1d1d22; --top-b: #141418; --sheen: rgba(255, 255, 255, 0.05); --legend: rgba(255, 255, 255, 0.42); }
.key.night .top { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.board .key.night .cap { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 calc(var(--bu) * 0.22) rgba(255, 255, 255, 0.06), 0 calc(var(--bu) * 0.05) calc(var(--bu) * 0.1) rgba(0, 0, 0, 0.5); }
.board .key.night .lg { color: rgba(255, 255, 255, 0.36); text-shadow: 0 0 0.375rem rgba(255, 255, 255, 0.28); }
.board .key .lg.c { font-size: calc(var(--bu) * 0.26); }
.board .key .lg.tl, .board .key .lg.tr, .board .key .lg.bl, .board .key .lg.br { font-size: max(0.4375rem, calc(var(--bu) * 0.15)); }
.board .key .lg svg { width: calc(var(--bu) * 0.2); height: calc(var(--bu) * 0.2); }
.board .key .lg svg .tri { fill: currentColor; stroke: none; }
.board .key.lit { --skirt-a: #2d2d34; --skirt-b: #050507; --top-a: #26262c; --top-b: #121216; }
.board .key.lit .cap { box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 calc(var(--bu) * 0.5) rgba(255, 255, 255, 0.16), 0 0 calc(var(--bu) * 0.12) rgba(255, 255, 255, 0.22); }
.board .key.lit .lg { color: #fff; text-shadow: 0 0 0.625rem rgba(255, 255, 255, 0.7); }
.board .key.lit .lg.mark svg { width: calc(var(--bu) * 0.34); height: calc(var(--bu) * 0.34); filter: drop-shadow(0 0 0.25rem rgba(255, 255, 255, 0.6)); }

/* ---------- footer: slim, and on the home page the keyboard's base ---------- */

.foot { background: var(--night); color: rgba(255, 255, 255, 0.66); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.foot-in { display: flex; justify-content: space-between; align-items: center; gap: 0.875rem 2.5rem; flex-wrap: wrap; padding: 1.625rem 0 1.125rem; }
.foot-brand { display: flex; align-items: center; gap: 0.625rem 1.625rem; flex-wrap: wrap; min-width: 0; }
.foot .brand, .foot .wordmark { color: #fff; }
.foot .tagline { font-size: 0.875rem; line-height: 1.45; color: rgba(255, 255, 255, 0.62); max-width: 40ch; text-wrap: pretty; }
.foot-links, .foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.25rem; margin: 0 -0.625rem; }
.foot-links a, .foot-legal a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.625rem; border-radius: 0.5625rem; font-size: 0.9063rem; text-decoration: none; color: rgba(255, 255, 255, 0.8); transition: color 0.15s, background-color 0.15s; }
.foot-legal a { font-size: 0.8438rem; color: rgba(255, 255, 255, 0.64); }
.foot-base {
  display: flex; justify-content: space-between; align-items: center; gap: 0.25rem 1.5rem; flex-wrap: wrap;
  padding: 0.375rem 0 0.875rem;
  padding-bottom: calc(0.875rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8438rem;
}
.foot-copy { display: flex; align-items: baseline; gap: 0.375rem 1.125rem; flex-wrap: wrap; color: rgba(255, 255, 255, 0.6); }
.foot-copy .hand { font-size: 1.3125rem; line-height: 1; color: rgba(255, 255, 255, 0.62); }
.foot ::selection { background: #fff; color: var(--night); }
.foot :focus-visible { outline-color: #fff; }
@media (hover: hover) {
  .foot-links a:hover, .foot-legal a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
}
/* On the home page the board sits on the footer: the footer keeps the close's
   own ground (--night), so the only line between the keyboard's base and the
   footer is the hairline above, never a lighter band under the case. */
.page-home .foot { background: var(--night); border-top-color: rgba(255, 255, 255, 0.07); }
@supports selector(:has(a)) {
  main:has(> .kb-close:last-child) + .foot { background: var(--night); border-top-color: rgba(255, 255, 255, 0.07); }
}

/* ---------- device aware CTA ---------- */

.cta-block { display: grid; gap: 0.75rem; justify-items: start; }
.cta-sub { font-size: 0.875rem; color: var(--ink-3); }
.cta-label { font: 500 1rem/1.3 var(--sans); color: var(--ink); }
.notify-wrap { display: grid; gap: 0.625rem; width: min(100%, 27.5rem); }
.notify { display: flex; gap: 0.5rem; width: 100%; }
.notify input {
  /* width 0: an input's built in width must never set the row's minimum
     (Firefox let it push the form past a phone's edge). It still grows. */
  flex: 1 1 0; width: 0; min-width: 0; height: 3.375rem; padding: 0 1rem;
  border-radius: 0.875rem; border: 1px solid var(--line-strong);
  background: var(--white); font: 400 1rem var(--sans); color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none; appearance: none;
}
.notify input::placeholder { color: var(--ink-3); opacity: 1; }
.notify input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 0.25rem rgba(20, 20, 22, 0.08); }
.check { display: inline-flex; align-items: center; gap: 0.5625rem; min-height: 2.75rem; font-size: 0.875rem; color: var(--ink-2); }
.check input { width: 1.125rem; height: 1.125rem; accent-color: var(--ink); }
.notify-done { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9688rem; color: var(--ink); padding: 0.875rem 0; }
.notify-done svg { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.notify-err { font-size: 0.875rem; color: var(--pen); }
.dark-ctx .cta-sub { color: rgba(255, 255, 255, 0.6); }
.dark-ctx .cta-label, .dark-ctx .notify-done { color: #fff; }
.dark-ctx .btn.light { --orbit: #fff; }
.dark-ctx :focus-visible { outline-color: #fff; }

/* Download sheet: a quiet panel, not a modal. */
.dl-sheet {
  position: fixed; left: 50%; bottom: 1.375rem; bottom: calc(1.375rem + env(safe-area-inset-bottom)); z-index: 80;
  width: min(35rem, calc(100% - 2rem));
  transform: translate(-50%, 140%);
  background: var(--white); color: var(--ink);
  border-radius: 1.25rem; border: 1px solid var(--line);
  box-shadow: 0 1.875rem 4.375rem -1.25rem rgba(20, 20, 25, 0.4), 0 0.375rem 1rem rgba(20, 20, 25, 0.1);
  padding: 1.25rem 1.375rem 1.375rem;
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start;
  transition: transform 0.5s var(--spring);
}
.dl-sheet.open { transform: translate(-50%, 0); }
.dl-sheet .tile { width: 2.75rem; height: 2.75rem; border-radius: 0.6875rem; }
.dl-sheet h4 { font: 600 1.3125rem/1.2 var(--serif); color: var(--ink0); }
.dl-sheet p { font-size: 0.9063rem; color: var(--ink-2); margin-top: 0.1875rem; }
.dl-sheet ol { list-style: decimal; padding-left: 1.25rem; margin-top: 0.625rem; display: grid; gap: 0.3125rem; font-size: 0.9063rem; color: var(--ink); }
.dl-sheet ol li::marker { color: var(--ink-3); font-family: var(--mono); font-size: 0.7813rem; }
.dl-sheet .notify-wrap { margin-top: 0.75rem; }
.dl-sheet .notify input, .dl-sheet .notify .btn { height: 2.875rem; }
.icon-btn { width: 2.75rem; height: 2.75rem; border-radius: 0.6875rem; display: grid; place-items: center; color: var(--ink-2); margin: -0.375rem -0.5rem 0 0; }
.icon-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
@media (hover: hover) {
  .icon-btn:hover { background: rgba(20, 20, 22, 0.06); color: var(--ink); }
}

/* ---------- inner pages: one headline, one line ---------- */

.page-head { padding: clamp(3.5rem, 7vw, 7.5rem) 0 clamp(2.25rem, 4vw, 4rem); }
.page-head h1 { font-size: clamp(2.875rem, 5.2vw, 4.875rem); max-width: 11em; }
.page-head .lede { margin-top: 1.375rem; max-width: 38ch; }


/* ---------- pricing: two keys awake, Free and Pro ---------- */

.pv-head { padding-bottom: clamp(2.25rem, 3.6vw, 3.5rem); }
.pv-head h1 { max-width: 12em; }
.pv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.plan {
  --r: 1.625rem;
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--r);
  padding: 0 0 0.75rem;
  background: linear-gradient(180deg, #f6f4ef, #d5d1c7);
  box-shadow: 0 1px 1px rgba(40, 34, 20, 0.1), 0 0.625rem 1.125rem rgba(40, 34, 20, 0.1), 0 1.875rem 3.125rem -1.25rem rgba(40, 34, 20, 0.22);
  color: var(--ink);
}
.plan-top {
  position: relative; flex: 1;
  margin: 0.375rem 0.5rem 0;
  border-radius: calc(var(--r) - 0.375rem);
  padding: 1.875rem 2rem 2rem;
  background: radial-gradient(130% 70% at 50% -10%, #fff, rgba(255,255,255,0) 60%), linear-gradient(180deg, #fefefc, #f3f1eb);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 2px rgba(60, 50, 30, 0.06);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 1.5rem clamp(1.5rem, 3vw, 2.75rem);
}
.plan.dark { background: linear-gradient(180deg, #2c2c33, #040406); box-shadow: 0 0 0 1px #000, 0 0.75rem 1.375rem rgba(10,10,14,.25), 0 2.125rem 3.75rem -1.375rem rgba(10, 10, 14, 0.45); color: #fff; }
.plan.dark .plan-top { background: radial-gradient(130% 70% at 50% -10%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%), linear-gradient(180deg, #232329, #111115); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(190,190,200,.1); }
.plan.dark h2 { color: #fff; }
.plan.dark ::selection { background: #fff; color: var(--ink); }
.plan h2 { font-size: clamp(2.25rem, 3vw, 2.75rem); }
.pv-a { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
/* The second half starts below the key's legend, level on both keys. */
.pv-b { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; padding-top: 6.375rem; }
.plan .pitch { color: var(--ink-2); font-size: 0.9688rem; line-height: 1.45; text-wrap: pretty; }
.plan.dark .pitch { color: rgba(255, 255, 255, 0.68); }

/* The price: a big serif figure, the period beside it. */
.pv-price { display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; margin-top: 0.5rem; }
.amt { display: inline-flex; align-items: baseline; font: 600 clamp(3.5rem, 4.6vw, 4.5rem)/0.92 var(--serif); letter-spacing: -0.035em; color: var(--ink0); font-variant-numeric: lining-nums tabular-nums; }
.amt .cur { align-self: flex-start; font-size: 0.46em; line-height: 1; margin: 0.16em 0.06em 0 0; letter-spacing: 0; }
.pv-price .per { font: 400 0.9688rem/1.3 var(--sans); color: var(--ink-3); }
.bill { font-size: 0.9063rem; line-height: 1.4; color: var(--ink-3); }
.pv-a .plan-cta { margin-top: auto; padding-top: 1.25rem; }

/* Words: the one real difference between the two. */
.pv-words { position: relative; display: grid; gap: 0.25rem; padding: 0 0 1.125rem; border-bottom: 1px solid var(--line); }
.pv-words p { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.w-n { font: 600 1.875rem/1 var(--serif); letter-spacing: -0.02em; color: var(--ink0); font-variant-numeric: lining-nums; }
.w-l { font-size: 1rem; color: var(--ink-2); }
.w-note { font: 500 1.375rem/1 var(--hand); color: var(--pen); transform: rotate(-2deg); transform-origin: 0 50%; white-space: nowrap; }
.feat { display: grid; gap: 0.625rem; font-size: 0.9688rem; line-height: 1.4; }
.feat li { display: grid; grid-template-columns: 1.125rem 1fr; gap: 0.625rem; align-items: start; }
.feat svg { width: 1rem; height: 1rem; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }

/* Pro: the graphite key, wearing the fn legend and the turning globe. */
.pro-legend { position: absolute; top: 1.5rem; right: 1.625rem; display: grid; justify-items: end; gap: 0.3125rem; color: #fff; pointer-events: none; }
.pro-fn { font: 500 1.0625rem/1 var(--sans); letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.92); }
.pro-globe { width: 2.75rem; height: 2.75rem; display: block; }
.pro-globe svg { width: 100%; height: 100%; }
.pv-pro .amt, .pv-pro .w-n { color: #fff; }
.pv-pro .bill, .pv-pro .pv-price .per { color: rgba(255, 255, 255, 0.66); }
.pv-pro .w-l { color: rgba(255, 255, 255, 0.78); }
.pv-pro .pv-words { border-color: rgba(255, 255, 255, 0.12); }
.pv-pro .w-note { color: var(--blush); }
.pv-pro .feat { color: rgba(255, 255, 255, 0.88); }
.plan.dark .btn.light { --orbit: #fff; }
.pv-foot { margin-top: 1.5rem; }

.money { padding: clamp(5.5rem, 9vw, 9.375rem) 0; }

/* ---------- download ---------- */

.dl-hero { padding: clamp(3rem, 6vw, 6.875rem) 0 clamp(4rem, 7vw, 7.5rem); overflow: hidden; overflow: clip; }
.dl-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.25rem, 6vw, 6.25rem); align-items: center; }
.dl-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.625rem; justify-items: start; }
.dl-copy h1 { font-size: clamp(2.875rem, 5.2vw, 4.875rem); }
.dl-cta { min-height: 8.25rem; display: grid; align-content: start; gap: 0.75rem; width: 100%; }
.dl-cta .ready-sub { font-size: 0.875rem; color: var(--ink-3); }
.dl-cta .almost h2 { font-size: clamp(1.75rem, 2.4vw, 2.125rem); }
.dl-cta .almost p { margin-top: 0.375rem; color: var(--ink-2); max-width: 40ch; }
.dl-cta .almost .notify-wrap { margin-top: 0.875rem; }
.reqs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.reqs li { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding: 0 0.875rem; border-radius: 62.4375rem; background: var(--white); border: 1px solid var(--line-2); font-size: 0.875rem; color: var(--ink-2); }
.reqs li svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The app icon, the way it sits in a Finder window: a graphite tile with
   the white dot globe, and a note asking to be dragged home. */
.dl-art { position: relative; display: grid; place-items: center; min-height: 26.25rem; }
.app-icon {
  --s: clamp(12.5rem, 22vw, 18.75rem);
  position: relative; width: var(--s); height: var(--s);
  border-radius: 22.5%;
  background: radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.1), rgba(255,255,255,0) 55%), linear-gradient(180deg, #24242a, #060608);
  box-shadow: 0 calc(var(--s) * 0.06) calc(var(--s) * 0.12) rgba(10, 10, 14, 0.25), 0 calc(var(--s) * 0.2) calc(var(--s) * 0.36) calc(var(--s) * -0.08) rgba(10, 10, 14, 0.45);
  display: grid; place-items: center; color: #fff;
  transform: rotate(-4deg);
}
/* The hairline and rim light are a border on their own layer, not inset
   shadows: Firefox at 2x drew a lighter circle over this rotated tile when
   inset shadows met its drop shadows. */
.app-icon::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(190, 190, 200, 0.14); border-top-color: rgba(230, 230, 240, 0.24);
}
.app-icon svg { width: 72%; height: 72%; }
.dl-art .note-drag { left: 50%; bottom: 1.625rem; transform: translateX(-24%) rotate(-3deg); }
.dl-art .note-drag .scrawl { left: -3.75rem; top: -2.25rem; transform: rotate(-104deg) scaleX(-1); }

.steps-sec { padding: clamp(5rem, 8vw, 8.125rem) 0; background: var(--paper-2); }
.steps-head { display: grid; gap: 1rem; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.375rem; margin-top: 2.75rem; counter-reset: none; }
.steps li { display: grid; gap: 1.375rem; align-content: start; padding: 1.75rem 1.625rem 1.875rem; border-radius: 1.375rem; background: var(--wrote); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(40, 34, 20, 0.04); }
.steps li p { font-size: 1.125rem; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.steps .key { --u: 3.625rem; }
.steps .key .lg.c { font-size: 1.375rem; font-weight: 500; }
.steps .key.graphite .lg.tr { font-size: 0.875rem; }
.steps .key.graphite .lg.bl svg { width: 1.25rem; height: 1.25rem; }
.steps-more { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin-top: 1.75rem; }

.soon-sec { padding: clamp(5rem, 8vw, 8.125rem) 0; }
.soon-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.25rem, 6vw, 6.875rem); align-items: start; }
.soon-grid .lede { margin-top: 1.125rem; }
.soon-form { display: grid; gap: 1.125rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.625rem; border: 0; }
.chips legend { font: 500 0.9375rem/1.3 var(--sans); color: var(--ink); margin-bottom: 0.75rem; padding: 0; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; gap: 0.5625rem;
  min-height: 3rem; padding: 0 1.125rem 0.1875rem;
  border-radius: 0.8125rem;
  font: 500 0.9688rem/1 var(--sans); color: var(--ink-2);
  background: linear-gradient(180deg, #fff, #f1efe9);
  box-shadow: inset 0 -0.25rem 0 rgba(60, 50, 30, 0.12), 0 0 0 1px rgba(25, 25, 30, 0.14), 0 0.375rem 0.75rem -0.5rem rgba(40, 34, 20, 0.35);
  transition: transform 0.18s var(--spring), box-shadow 0.18s, color 0.15s;
  -webkit-user-select: none; user-select: none;
}
.chip span svg { width: 1.0625rem; height: 1.0625rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chip input:checked + span { color: #fff; background: linear-gradient(180deg, #2b2b31, #0b0b0d); box-shadow: inset 0 -2px 0 rgba(0,0,0,.6), 0 0 0 1px #000, 0 2px 0.25rem rgba(0,0,0,.18); transform: translateY(2px); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 0.1875rem; }
.soon-form .notify-wrap { width: min(100%, 30rem); }

/* ---------- contact ---------- */

.contact-sec { padding: 0 0 clamp(5.5rem, 9vw, 9.375rem); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2.25rem, 6vw, 6.875rem); align-items: start; }
.inboxes { border-top: 1px solid var(--ink); }
.inboxes li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0.625rem 2rem; align-items: baseline; padding: 1.625rem 0 1.75rem; border-bottom: 1px solid var(--line-2); }
.inboxes h2 { font-size: clamp(1.5rem, 2vw, 1.75rem); line-height: 1.15; }
.inboxes p { grid-column: 2; font-size: 0.9688rem; color: var(--ink-2); line-height: 1.5; }
.mail { grid-column: 2; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; min-height: 2.75rem; font: 500 clamp(1.125rem, 1.5vw, 1.3125rem)/1.3 var(--sans); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.mail mark { padding: 2px 0.375rem; }
@media (hover: hover) {
  .mail:hover mark { box-shadow: inset 0 -2px 0 var(--pen-soft); }
}
.contact-more { margin-top: 1.625rem; font-size: 0.9375rem; color: var(--ink-3); }
.contact-more a { color: var(--ink-2); }
.at-art { position: relative; height: 21.25rem; }
.at-art .key { --u: 9.375rem; position: absolute; left: 8%; top: 3.75rem; }
.at-art .key .lg.tl { font-size: 2.5rem; top: 1.375rem; left: 1.5rem; font-weight: 400; }
.at-art .key .lg.bl { font-size: 1.625rem; bottom: 1.5rem; left: 1.625rem; font-weight: 400; }
.at-art .tag { left: calc(8% + 9.375rem - 0.375rem); top: 6.75rem; width: 13.75rem; transform: rotate(6deg); }
.at-art .tag-card { font-size: 1.5625rem; line-height: 1.15; padding: 1rem 1.125rem 1.125rem 1.75rem; }
.at-art .tag-card .rule { display: block; height: 1.15em; border-bottom: 1px solid rgba(120, 100, 60, 0.22); }
.at-art .note-mail { left: 10%; top: 0.375rem; transform: rotate(-4deg); }

/* ---------- 404 ---------- */

.nf { padding: clamp(3.5rem, 8vw, 8.75rem) 0 clamp(5.5rem, 10vw, 10.625rem); overflow: hidden; overflow: clip; }
.nf-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.25rem, 6vw, 6.875rem); align-items: center; }
.nf-copy { display: grid; gap: 1.5rem; justify-items: start; }
.nf-copy .lede { max-width: 30ch; }
.nf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.125rem; }
.nf-keys { position: relative; display: flex; justify-content: center; padding: 5.625rem 0 2.5rem; }
.nf-keys .deck { --u: clamp(5.25rem, 9vw, 8rem); }
.nf-keys .key .lg.c { font-family: var(--serif); font-weight: 600; font-size: calc(var(--u) * 0.42); }
.nf-keys .key.graphite .lg.c svg { width: calc(var(--u) * 0.46); height: calc(var(--u) * 0.46); fill: currentColor; stroke: none; }
.nf-keys .key.graphite .lg.c { color: #fff; }
.nf-keys .zzz { font-size: 2.125rem; }
.nf-keys .zzz.z1 { left: calc(50% - 9.375rem); top: 1.75rem; }
.nf-keys .zzz.z2 { left: calc(50% + 6.875rem); top: 2.5rem; }
.nf-keys .note-nobody { left: 50%; bottom: -0.5rem; transform: translateX(-50%) rotate(-3deg); }

/* ---------- legal: a calm reading column ---------- */

.legal { padding: clamp(3rem, 6vw, 6.25rem) 0 clamp(5.5rem, 9vw, 9.375rem); }
.legal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.legal-main { width: 100%; max-width: 44rem; }
.legal-head { display: grid; gap: 0.875rem; padding-bottom: 1.875rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--ink); }
.legal-head h1 { font-size: clamp(2.625rem, 4.6vw, 4.25rem); }
.legal-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.9375rem; color: var(--ink-3); }
.legal-body { font-size: 1.0938rem; line-height: 1.72; color: #2a2925; }
.legal-body > section { scroll-margin-top: 6rem; }
.legal-body h2 { font-size: clamp(1.625rem, 2.3vw, 2.0625rem); line-height: 1.12; margin: 3.5rem 0 0.875rem; scroll-margin-top: 6rem; }
.legal-body h3 { font: 600 1.3125rem/1.25 var(--serif); letter-spacing: -0.012em; margin: 2rem 0 0.625rem; color: var(--ink0); scroll-margin-top: 6rem; }
.legal-body p { margin: 0 0 1rem; text-wrap: pretty; }
.legal-body ul { list-style: disc; padding-left: 1.25em; margin: 0 0 1.125rem; }
.legal-body li { margin: 0 0 0.625rem; padding-left: 0.3em; text-wrap: pretty; }
.legal-body li::marker { color: var(--ink-3); }
.legal-body strong { font-weight: 500; color: var(--ink0); }
.legal-body a { color: var(--ink0); text-decoration-color: var(--line-strong); }
.legal-body .intro p:first-child { font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--ink); }
.legal-body .addr { line-height: 1.6; }
/* The short version: the whole policy in a few lines, on a quiet panel. */
.legal-body .short { margin: 2.5rem 0 0.5rem; padding: 0.375rem 1.875rem 0.875rem; border-radius: 1.25rem; background: var(--paper-2); border: 1px solid var(--line); }
.legal-body .short h2 { margin-top: 1.625rem; font-size: clamp(1.5rem, 2vw, 1.75rem); }
.legal-body .short ul { margin-bottom: 0.75rem; }
/* Bracketed placeholders stay visible, lightly marked, until filled. */
mark.ph {
  background: rgba(178, 60, 42, 0.1);
  color: var(--pen-ink);
  border-radius: 0.3125rem;
  padding: 1px 0.3125rem;
  box-shadow: inset 0 0 0 1px rgba(178, 60, 42, 0.22);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@supports (background: color-mix(in srgb, red 10%, white)) {
  mark.ph { background: color-mix(in srgb, var(--pen) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pen) 24%, transparent); }
}
.toc { display: none; }
.toc-m { margin: 1.375rem 0 0.625rem; border: 1px solid var(--line-2); border-radius: 1rem; background: var(--wrote); }
.toc-m summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; padding: 0 1.125rem; font: 500 0.9688rem/1 var(--sans); color: var(--ink); }
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m summary::marker { content: ''; }
.toc-m summary svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.toc-m[open] summary svg { transform: rotate(180deg); }
.toc-m ol { padding: 0 1.125rem 0.75rem; }
.toc-m a { display: flex; align-items: center; min-height: 2.75rem; border-top: 1px solid var(--line); font-size: 0.9688rem; color: var(--ink-2); text-decoration: none; }
.toc-list { display: grid; }
.toc-list a { display: block; padding: 0.4375rem 0 0.4375rem 1rem; border-left: 1px solid var(--line-2); font-size: 0.875rem; line-height: 1.35; color: var(--ink-3); text-decoration: none; transition: color 0.15s, border-color 0.15s; }
.toc-list a[aria-current='true'] { color: var(--ink0); border-left-color: var(--ink0); }
.toc-label { font: 500 0.8125rem/1 var(--sans); color: var(--ink); margin-bottom: 0.875rem; }
@media (hover: hover) {
  .toc-list a:hover { color: var(--ink); }
}
.legal-end { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.375rem; font-size: 0.9375rem; color: var(--ink-3); }
.legal-end a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink-2); }

/* ---------- capture mode: everything still and in its result state ---------- */

.capture *, .capture *::before, .capture *::after { animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; }
.capture .zzz i { opacity: 1; animation: none; }
.capture .zzz i:nth-child(1) { opacity: 0.45; }
.capture .zzz i:nth-child(2) { opacity: 0.7; }
.capture .caret, .capture .take-tag.live::before { animation: none; }
.capture .island .dots span { animation: none; opacity: 0.85; }
.capture .island .dots span:nth-child(1) { opacity: 1; }
.capture .island .dots span:nth-child(3) { opacity: 0.4; }
.capture .nav { position: relative; }
.capture .menu[open] .menu-panel { animation: none; } /* a paused drop would hold it invisible */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn::after { display: none; }
  .zzz i { animation: none; opacity: 0.7; }
  .typed.pasting { animation: none; }
  .island { transition: opacity 0.2s ease; }
  .caret, .take-tag.live::before { animation: none; }
  .key.bowing .cap { animation: none; }
  .menu[open] .menu-panel { animation: none; }
  .menu-btn path, .arrow-link svg, .chip span { transition: none; }
}

/* ---------- responsive ---------- */

/* Big screens: the same composition, scaled. 16px at 1680, about 22px at
   2560 and 32px at 3840, so type, keys and the keyboard art grow with it. */
@media (min-width: 1680px) {
  html { font-size: calc(100% + (100vw - 1680px) * 0.0074); } /* keep px */
  /* Fraunces picks its optical size from the px size, so the scaled display
     headlines would switch to its tight display cut and their tracked
     letters would touch. Keep the cut each one has at 1680. Smaller
     headings stay automatic; they never get that big. */
  h1, h2 { font-optical-sizing: none; font-variation-settings: 'opsz' 60; }
  h1, .close-wrote h2, .kb-close h2 { font-variation-settings: 'opsz' 80; }
  .legal-head h1 { font-variation-settings: 'opsz' 68; }
  .read-copy h2, .plan h2, .dl-cta .almost h2, .inboxes h2, .legal-body h2, .acct h1 { font-optical-sizing: auto; font-variation-settings: normal; }
}

@media (max-width: 1180px) {
  .mix-band { grid-template-columns: 1fr minmax(0, 32.5rem) 1fr; }
  .rows .key { --u: 2.75rem; }
  .rows .note { font-size: 1.375rem; }
  .rows .note-in { margin-right: 1.25rem; }
  .rows .note-out { margin-left: 1.875rem; }
  .read-in { grid-template-columns: minmax(0, 1fr) auto; }
  .read-text { grid-column: 1 / -1; }
  .delete-wrap .key { --u: 8rem; }
  .tag { left: calc(8rem * 1.55 + 2px); }
  .apps-keys .note-shuffle { left: auto; right: 0; }
}

@media (min-width: 1100px) {
  .legal-grid { grid-template-columns: 13.75rem minmax(0, 1fr); gap: clamp(3rem, 6vw, 6.875rem); }
  .toc { display: block; position: -webkit-sticky; position: sticky; top: 6.25rem; align-self: start; max-height: calc(100vh - 8.125rem); overflow: auto; padding: 0.25rem 0 1.25rem; }
  .toc-m { display: none; }
  .legal-main { grid-column: 2; justify-self: center; }
}

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .nav-in { gap: 0.625rem; }
  .menu { display: block; margin-right: -0.5rem; }
  .hero-grid, .pair-grid, .pair-grid.flip, .privacy-grid, .faq-grid, .apps-grid, .dl-grid, .soon-grid, .contact-grid, .nf-in { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-top: 0; padding-bottom: 0.5rem; }
  /* On one column the result follows its prompt: heading, the line to
     say, the take, and only then the sleepy key. */
  .pair-grid, .pair-grid.flip { gap: 0; }
  .pair-copy { display: contents; }
  .pair-copy h2 { order: 1; }
  .pair-copy .try-line { order: 2; margin-top: 1.125rem; }
  .pair-stage { order: 3; margin-top: 0.5rem; }
  .pair-copy .delete-wrap, .pair-copy .return-wrap { order: 4; }
  .pair-grid.flip .pair-stage .take { margin-left: 0; }
  .hero-grid { --fn: 15.625rem; }
  .hero-stage { margin-top: 0.5rem; }
  .hero-stage .take { width: 100%; max-width: 38.75rem; }
  .pair-stage .take { max-width: 38.75rem; }
  .mix-band { grid-template-columns: minmax(0, 1fr); }
  .rows { display: none; }
  .mix-strip { display: flex; }
  .apps-keys { justify-content: flex-start; padding-top: 3.5rem; }
  .apps-keys .zzz.z1 { left: 1.875rem; }
  .apps-keys .zzz.z2 { left: 13.75rem; }
  .apps-keys .note-shuffle { left: 15.625rem; bottom: -0.25rem; }

  /* The close stacks: said, then the globe on a horizontal seam, then wrote. */
  .close { background: var(--wrote); }
  .close::before { display: none; }
  .close-in { grid-template-columns: minmax(0, 1fr); padding: 0; --seam: 13.125rem; }
  .close-said { background: var(--said); padding: 3.5rem var(--gutter) 2.125rem; }
  .close-seam { min-height: 0; padding: 0; background: linear-gradient(to bottom, var(--said) 50%, var(--wrote) 50%); }
  .close-seam::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
  .bigglobe { position: relative; }
  .close-wrote { padding: 1.875rem var(--gutter) 4.5rem; }

  .dl-art { min-height: 18.75rem; }
  .app-icon { --s: 11.875rem; }
  .steps { grid-template-columns: minmax(0, 1fr); max-width: 38.75rem; }
  .steps li { grid-template-columns: auto 1fr; align-items: center; gap: 1.25rem; padding: 1.25rem 1.375rem; }
  .at-art { height: 18.75rem; max-width: 28.75rem; }
  .nf-keys { order: -1; padding-top: 4.375rem; }
}


@media (max-width: 760px) {
  .foot-in { flex-direction: column; align-items: flex-start; gap: 0.375rem; padding-top: 1.875rem; }
  .foot-base { flex-direction: column; align-items: flex-start; gap: 0; padding-top: 0.625rem; }
}

@media (max-width: 640px) {
  :root { --nav-h: 3.75rem; }
  body { font-size: 1.0313rem; }
  .nav-in { gap: 0.5rem; }
  .wordmark { font-size: 1.3125rem; }
  .tile { width: 1.875rem; height: 1.875rem; }
  h2 { font-size: 2.375rem; }
  .sec { padding: 4.75rem 0; }
  .sec-faq { padding-top: 0; }
  .say { font-size: 1.625rem; }
  .heard { font-size: 1.0625rem; }
  .typed { font-size: 1.0313rem; }
  .take-heard, .take-typed { padding-left: 1rem; padding-right: 1rem; }
  .take-bar, .take-note { padding-left: 1rem; padding-right: 1rem; }
  .btn.lg { height: 3.5rem; font-size: 1rem; }
  .notify .btn { flex: none; padding: 0 1.125rem 0.1875rem; }
  .dl-sheet .notify { flex-direction: column; }
  .dl-sheet .notify input, .dl-sheet .notify .btn { flex: none; width: 100%; }
  .island.compact.notice { max-width: calc(100vw - 2rem); }

  /* Phone hero order: headline, offer, the button, then the key and island,
     the invitation right under the key, and the take. */
  .hero { padding-top: 1.125rem; }
  .hero-grid { gap: 1.125rem; }
  .hero h1 { font-size: 2.875rem; }
  .hero-copy, .hero-stage { display: contents; }
  .hero-copy h1 { order: 1; }
  .hero-copy .lede { order: 2; font-size: 1.0625rem; }
  .hero-copy .hero-cta { order: 3; min-height: 0; }
  .hero-grid { --fn: 10.5rem; --lift: 10.25rem; }
  .hero-stage .rig { order: 4; margin-top: 0.25rem; }
  .hero-stage .hint { order: 5; margin-top: -2px; font-size: 1.0313rem; }
  .hero-stage .take { order: 6; margin-top: 0.25rem; }
  .hero-stage .sr-status { order: 7; }
  /* On a phone the compact pill is wider than the key: anchor the island to
     the key's left edge so the pill never leaves the screen. */
  .rig .dock .island-anchor { left: 0; transform: none; justify-content: flex-start; }
  /* The island's pills sit on the key's top edge and reach past it, so the
     note moves beside the key, below that band, with one doze left. */
  .rig .note-duty { left: calc(var(--fn) + 1rem); top: calc(var(--lift) + 1.375rem); font-size: 1.375rem; }
  .rig .note-duty .scrawl { display: none; }
  .rig .zzz { font-size: 1.625rem; }
  .rig .zzz.z1, .rig .zzz.z3 { display: none; }

  .mix-center .island-zone { height: 9.375rem; }
  .pair-stage .island-zone { height: 3.75rem; }
  .pair-copy { gap: 1.125rem; }
  .delete-wrap { height: 11rem; margin-top: 1.125rem; }
  .delete-wrap .key { --u: 6.75rem; }
  .tag { left: calc(6.75rem * 1.55 - 0.5rem); top: 4rem; width: 10.5rem; }
  .tag-card { font-size: 1.25rem; padding: 0.6875rem 0.75rem 0.6875rem 1.5rem; }
  .return-wrap { --ru: 5.125rem; height: 8.75rem; margin-top: 2.125rem; }
  .bow-marks { width: 2.75rem; height: 2.375rem; top: -1.625rem; }
  .return-wrap .note-bow { left: calc(var(--ru) * 2.25 + 1.875rem); top: -0.625rem; font-size: 1.375rem; }
  .apps-keys { padding: 3.25rem 0 2.5rem; }
  .apps-keys .deck { --u: 4.625rem; }
  .apps-keys .zzz.z1 { left: 1.5rem; top: 1.625rem; }
  .apps-keys .zzz.z2 { left: 10.625rem; top: 1.25rem; }
  .apps-keys .note-shuffle { left: auto; right: 0; bottom: 0; font-size: 1.4375rem; }

  .read-in { grid-template-columns: minmax(0, 1fr); gap: 1.125rem; padding: 1.875rem 0 1.75rem; }
  .read-key { width: 100%; justify-content: flex-start; padding-top: 3.25rem; }
  .read-key .dock-ctrl { right: auto; width: 5rem; }
  .read-key .dock-ctrl .island-anchor { left: 0; transform: none; justify-content: flex-start; }
  .read-key .key { --u: 4.125rem; }

  .facts li { padding: 1.25rem 0 1.375rem; font-size: 1.125rem; }
  .faq summary { font-size: 1.0625rem; padding: 1.125rem 0; }
  .faq .ans { padding-right: 0; font-size: 1rem; }

  .close-said { padding-top: 3rem; }
  .scrawl-q { --size: 2.25rem; }
  .close-wrote h2 { font-size: 3.25rem; }

  /* The board keeps its real proportions and runs off the right edge, so fn
     and its note stay in view. */
  .kb-close { padding-top: 5.25rem; }
  .kb-close h2 { font-size: 2.75rem; }
  .night-keys { --bu: 1.9375rem; justify-content: flex-start; padding-left: 0.875rem; padding-left: max(0.875rem, env(safe-area-inset-left)); margin-top: 6rem; }
  .night-keys .note { font-size: 1.375rem; }
  .night-keys .note-night { left: 12.5rem; top: -3.5rem; transform: rotate(-3deg); }
  .night-keys .note-nightfn { left: 1rem; top: -1.875rem; }
  .night-keys .bz1, .night-keys .bz3 { display: none; }
  .night-keys .bz2 { left: 9.375rem; top: -1.875rem; }
  .board { border-top-right-radius: 0; }

  .dl-sheet { grid-template-columns: auto 1fr; }
  .dl-sheet .icon-btn { position: absolute; right: 0.5rem; top: 0.5rem; margin: 0; }

  .page-head h1, .dl-copy h1 { font-size: 2.875rem; }
  .dl-art { min-height: 15.625rem; }
  .app-icon { --s: 9.375rem; }
  .dl-art .note-drag { font-size: 1.375rem; bottom: 0.875rem; }
  .steps .key { --u: 3.125rem; }
  .steps li p { font-size: 1.0625rem; }
  .chips { gap: 0.5rem; }
  .chip span { min-height: 2.875rem; padding: 0 0.8125rem 0.1875rem; gap: 0.4375rem; font-size: 0.9375rem; }
  .inboxes li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; padding: 1.375rem 0 1.5rem; }
  .inboxes p, .mail { grid-column: 1; grid-row: auto; }
  .at-art { height: 13.75rem; }
  .at-art .key { --u: 7.25rem; left: 0; top: 3.375rem; }
  .at-art .key .lg.tl { font-size: 2rem; top: 1rem; left: 1.125rem; }
  .at-art .key .lg.bl { font-size: 1.3125rem; bottom: 1.125rem; left: 1.25rem; }
  .at-art .tag { left: 6.875rem; top: 5.75rem; width: 11.875rem; }
  .at-art .tag-card { font-size: 1.375rem; }
  .nf-keys .deck { --u: 5rem; }
  .nf-keys .zzz.z1 { left: calc(50% - 8rem); }
  .nf-keys .zzz.z2 { left: calc(50% + 5.375rem); }
  .legal-body { font-size: 1.0625rem; line-height: 1.68; }
  .legal-body h2 { margin-top: 2.75rem; }
  .legal-body .short { padding: 0.25rem 1.25rem 0.625rem; margin-top: 1.875rem; }
}

/* Too narrow for both halves of the strip to show whole: leave it out. */
@media (max-width: 345px) {
  .mix-strip { display: none; }
  .hero h1, .page-head h1, .dl-copy h1 { font-size: 2.5rem; }
}

/* Coarse pointers: every inline link in running text gets a taller hit area. */
@media (pointer: coarse) {
  .legal-body a, .faq .ans a, .cta-sub .linkish, .contact-more a, .lede a, .ready-sub a { padding: 0.625rem 0; margin: -0.625rem 0; }
  .toc-list a { padding-top: 0.75rem; padding-bottom: 0.75rem; }
}

/* ====================================================================
   Home v2: the hold Space invitation, the time strip, and "works where
   you work": a laptop whose screen switches between the apps engineers
   type in. The app windows are drawn in HTML and CSS from each app's own
   layout and colours, with the app name as a plain label and no marks of
   theirs. Everything inside the screen is sized in --s, one rem of the
   laptop's own: the laptop is sized from the viewport so the app keys and
   the whole machine always fit one frame on a laptop screen, and the
   windows inside scale with it like a real display.
   ==================================================================== */

:root {
  --app-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --app-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
}

/* ---------- hero: the space bar asks to be held ---------- */

.space-try { position: relative; display: grid; justify-items: start; padding-bottom: 1.625rem; margin-top: -0.25rem; }
.key.spacebar { --u: 4.25rem; --w: 6; width: min(100%, calc(var(--u) * var(--w))); }
.key.spacebar .cap { box-shadow: 0 1px 1px rgba(40, 34, 20, 0.1), 0 calc(var(--u) * 0.06) calc(var(--u) * 0.1) rgba(40, 34, 20, 0.14), 0 calc(var(--u) * 0.2) calc(var(--u) * 0.36) rgba(40, 34, 20, 0.14); }
.key.spacebar .lg.c { font: 400 1rem/1 var(--sans); letter-spacing: 0; color: var(--ink-2); }
.key.spacebar .sb-l b { font-weight: 500; color: var(--ink0); }
.key.spacebar:focus-visible { outline-offset: 0.375rem; border-radius: calc(var(--r) + 0.25rem); }
/* Until the visitor tries it, the bar taps itself twice every few seconds,
   the way a key would if it could ask. */
.key.spacebar.nudging:not(.is-down) .cap { animation: sb-cap 5.6s var(--ease) 2.2s infinite; }
.key.spacebar.nudging:not(.is-down) .top { animation: sb-top 5.6s var(--ease) 2.2s infinite; }
@keyframes sb-cap {
  0%, 70%, 100% { transform: none; }
  73%, 79% { transform: translateY(calc(var(--u) * 0.05)); }
  76%, 82% { transform: none; }
}
@keyframes sb-top {
  0%, 70%, 100% { bottom: var(--drop); }
  73%, 79% { bottom: calc(var(--drop) * 0.5); }
  76%, 82% { bottom: var(--drop); }
}
.note-hold { top: calc(4.25rem + 0.5rem); right: calc(100% - min(100%, 25.5rem) + 0.5rem); transform: rotate(-2.5deg); font-size: 1.4375rem; }
.note-hold .scrawl { left: -2.875rem; top: -1.375rem; width: 2.625rem; height: 2rem; }
/* Where the column has room, the note sits beside the bar instead of
   under it, so the card below rises into the first screen. */
@media (min-width: 1181px) {
  .space-try { padding-bottom: 0; }
  .note-hold { top: 1.625rem; left: calc(min(100%, 25.5rem) + 3.125rem); right: auto; width: 8.75rem; white-space: normal; line-height: 1.02; transform: rotate(-3deg); }
  .note-hold .scrawl { left: -2.75rem; top: -1.25rem; }
}
.hint-touch { display: none; }
.touch .hint-touch { display: block; }
.touch .space-try { display: none; }

/* While scrolling through the playable sections, a quiet reminder that
   Space works there too. Desktop only; it leaves once a take starts. */
.space-hint {
  position: fixed; left: 50%; z-index: 60;
  bottom: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.4375rem 1.125rem 0.4375rem 0.4375rem;
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line-2);
  box-shadow: 0 1.125rem 2.25rem -1.125rem rgba(40, 34, 20, 0.4), 0 0.125rem 0.375rem rgba(40, 34, 20, 0.08);
  font: 500 0.9375rem/1.2 var(--sans); color: var(--ink); white-space: nowrap;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 0.875rem);
  transition: opacity 0.22s ease, transform 0.5s var(--ease), visibility 0s linear 0.5s;
  pointer-events: none;
}
.space-hint.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.22s ease, transform 0.5s var(--ease), visibility 0s; }
.sh-key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 6.5rem; height: 2.375rem; padding: 0 0.875rem 0.1875rem;
  border-radius: 0.6875rem;
  font: 500 0.8438rem/1 var(--sans); color: var(--ink-2);
  background: linear-gradient(180deg, #fff, #f1efe9);
  box-shadow: inset 0 -0.1875rem 0 rgba(60, 50, 30, 0.13), 0 0 0 1px rgba(25, 25, 30, 0.15), 0 2px 0.3125rem rgba(40, 34, 20, 0.1);
  transition: transform 0.07s, box-shadow 0.07s;
}
.space-hint.down .sh-key { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(60, 50, 30, 0.13), 0 0 0 1px rgba(25, 25, 30, 0.15); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .space-hint { background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: saturate(1.6) blur(0.875rem); backdrop-filter: saturate(1.6) blur(0.875rem); }
}

/* ---------- time: sixteen minutes, not sixty ---------- */

.sec-time { background: var(--paper-2); padding: clamp(4.75rem, 8vw, 7.5rem) 0 clamp(5rem, 8.5vw, 8rem); overflow: hidden; overflow: clip; }
.tbars { margin-top: clamp(2.5rem, 4.4vw, 3.5rem); display: grid; gap: 1.875rem; }
.trow { display: grid; gap: 0.75rem; }
.tlbl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.625rem; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tlbl b { font-weight: 500; color: var(--ink); }
.ttrack { --u: 4.75rem; position: relative; display: grid; grid-template-columns: 16fr 44fr; gap: 0.625rem; }
.ttrack.full { grid-template-columns: minmax(0, 1fr); }
.key.tkey { width: 100%; --u: inherit; }
.key.tkey .lg.br { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; bottom: calc(var(--u) * 0.16); right: calc(var(--u) * 0.2); font-variant-numeric: tabular-nums; }
.key.asleep.tkey .lg.br { color: var(--ink-3); }
.key.tkey.talk .lg.bl { bottom: calc(var(--u) * 0.15); left: calc(var(--u) * 0.18); }
.key.tkey.talk .lg.mark svg { width: calc(var(--u) * 0.36); height: calc(var(--u) * 0.36); }
.tz { right: 9%; top: -0.75rem; font-size: 1.75rem; }
/* The empty plate where the rest of the hour used to sit. */
.socket {
  position: relative; display: flex; align-items: center;
  border-radius: calc(var(--u) * 0.2);
  background: linear-gradient(180deg, #dedad2, #d5d1c8);
  box-shadow: inset 0 0.1875rem 0.375rem rgba(40, 34, 20, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 0 1.75rem;
}
.socket .note { position: static; font-size: clamp(1.5rem, 2.1vw, 1.875rem); transform: rotate(-2deg); }

/* ---------- works where you work ---------- */

.apps-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 4rem; align-items: end; }
.apps-head .apps-keys { padding: 2.75rem 2.25rem 0.75rem 0; justify-content: flex-end; }
.apps-head .apps-keys .deck { --u: 3.75rem; }
.apps-head .apps-keys .zzz { font-size: 1.625rem; }
.apps-head .apps-keys .zzz.z1 { left: 1.75rem; top: 0.875rem; }
.apps-head .apps-keys .zzz.z2 { left: auto; right: 5.5rem; top: 0.5rem; }
.apps-head .apps-keys .note-shuffle { left: auto; right: 0; bottom: -1.25rem; }

/* The laptop's display height, --dh, is the smallest of: its full size,
   the viewport less the nav, the app keys, the machine's frame and the
   "you said" row under it (its label and up to three lines), and what the
   width allows at a display's proportions. --s is one rem of it. */
.sw {
  --avail: min(100vw - 2 * var(--gutter), var(--maxw));
  --dh: clamp(24rem, min(calc(100vh - 19.25rem), calc((var(--avail) - 1.375rem) / 1.72)), 41rem);
  --s: calc(var(--dh) / 41);
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}
@supports (height: 100svh) {
  .sw { --dh: clamp(24rem, min(calc(100svh - 19.25rem), calc((var(--avail) - 1.375rem) / 1.72)), 41rem); }
}

/* App tabs: keycap chips sitting right on the laptop's lid, pressed when chosen. */
.app-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem 0.75rem; margin: 0 auto 0.875rem; }
.tabkey {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.125rem; padding: 0 1.25rem 0.1875rem;
  border-radius: 0.8125rem;
  font: 500 0.9688rem/1 var(--sans); color: var(--ink-2);
  background: linear-gradient(180deg, #fff, #f1efe9);
  box-shadow: inset 0 -0.25rem 0 rgba(60, 50, 30, 0.12), 0 0 0 1px rgba(25, 25, 30, 0.14), 0 0.375rem 0.75rem -0.5rem rgba(40, 34, 20, 0.35);
  transition: transform 0.18s var(--spring), box-shadow 0.18s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
.tabkey[aria-selected='true'] {
  color: #fff;
  background: linear-gradient(180deg, #2b2b31, #0b0b0d);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.6), 0 0 0 1px #000, 0 2px 0.25rem rgba(0, 0, 0, 0.18);
  transform: translateY(2px);
}
.tabkey:focus-visible { outline-offset: 0.25rem; border-radius: 0.875rem; }
@media (hover: hover) {
  .tabkey:hover:not([aria-selected='true']) { color: var(--ink0); }
}

/* The laptop: a graphite bezel, a notch with the island under it, a calm
   desk, and the base lip. */
.laptop { position: relative; width: calc(var(--dh) * 1.72 + 1.375rem); max-width: 100%; margin: 0 auto; }
.screen {
  position: relative;
  padding: 0.6875rem 0.6875rem 0.875rem;
  border-radius: 1.5rem 1.5rem 0.75rem 0.75rem;
  background: linear-gradient(180deg, #19191d, #0b0b0d);
  box-shadow: inset 0 0 0 1px rgba(190, 190, 200, 0.16), 0 1px 1px rgba(10, 10, 14, 0.2), 0 2rem 3.5rem -2rem rgba(20, 18, 14, 0.55);
}
.display {
  position: relative; overflow: hidden;
  height: var(--dh);
  border-radius: 0.875rem 0.875rem 0.25rem 0.25rem;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, #d9d5cc 0%, #c9c4b9 55%, #bdb7ab 100%);
}
.base { position: relative; height: 1rem; margin: 0 -3.5%; border-radius: 0.125rem 0.125rem 1.25rem 1.25rem / 0.125rem 0.125rem 1rem 1rem; background: linear-gradient(180deg, #e4e2dc 0%, #c9c6be 45%, #a9a69e 100%); box-shadow: 0 1.25rem 2rem -1.25rem rgba(40, 34, 20, 0.5); }
.base::before { content: ''; position: absolute; left: 50%; top: 0; width: 14%; height: 0.4375rem; transform: translateX(-50%); border-radius: 0 0 0.5rem 0.5rem; background: linear-gradient(180deg, #b9b6ae, #cfccc5); }

/* What you said, under the machine: fillers struck in gray, fixes in pen. */
.app-said { position: relative; width: calc(var(--dh) * 1.72 + 1.375rem); max-width: 100%; margin: 1rem auto 0; padding: 0 clamp(0rem, 1.4vw, 1.25rem); }
.said-top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem 0.5rem; min-height: 1rem; margin-bottom: 0.5rem; }
.said-top .take-lbl { margin: 0; }
.said-top .take-tag { margin-left: 0; gap: 0.5rem; }
/* A dot between the label and the tag, never a rule that reads as a dash. */
.said-top .take-tag::before { content: ''; width: 0.1875rem; height: 0.1875rem; border-radius: 50%; background: currentColor; opacity: 0.75; }
.said-stack { display: grid; }
.said-stack > .heard { grid-area: 1 / 1; font-size: clamp(1rem, 1.1vw, 1.0625rem); line-height: 1.45; max-width: 64em; visibility: hidden; }
.said-stack > .heard.on { visibility: visible; }

/* The screen island and its states, sized with the screen. */
.scr-island .island.compact { width: calc(16.5 * var(--s)); height: calc(2.875 * var(--s)); border-radius: calc(1.4375 * var(--s)); padding: calc(0.25 * var(--s)) calc(1.125 * var(--s)); }
.scr-island .island .row { gap: calc(0.4375 * var(--s)); }
.scr-island .island .label { font-size: calc(0.75 * var(--s)); max-width: calc(14 * var(--s)); }
.scr-island .island .tick { width: calc(1.125 * var(--s)); height: calc(1.125 * var(--s)); }
.scr-island .island .dots { gap: calc(0.25 * var(--s)); }
.scr-island .island .dots span { width: calc(0.3125 * var(--s)); height: calc(0.3125 * var(--s)); }

.menubar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4;
  height: calc(1.75 * var(--s)); display: flex; align-items: center; justify-content: space-between; gap: calc(1 * var(--s));
  padding: 0 calc(0.875 * var(--s));
  font: 400 calc(0.75 * var(--s))/1 var(--app-sans); color: rgba(20, 20, 22, 0.86);
  background: rgba(244, 242, 237, 0.58);
  -webkit-backdrop-filter: saturate(1.5) blur(calc(0.75 * var(--s))); backdrop-filter: saturate(1.5) blur(calc(0.75 * var(--s)));
}
.mb-left, .mb-right, .mb-menus { display: flex; align-items: center; gap: calc(1.125 * var(--s)); white-space: nowrap; }
.mb-left b { font-weight: 700; }
.mb-left b:empty { display: none; }
.mb-right { gap: calc(0.875 * var(--s)); font-variant-numeric: tabular-nums; }
.mb-voxy { display: grid; place-items: center; width: calc(1 * var(--s)); height: calc(1 * var(--s)); color: rgba(20, 20, 22, 0.9); }
.mb-voxy svg { width: 100%; height: 100%; }
.notch { position: absolute; left: 50%; top: 0; z-index: 5; width: calc(11.5 * var(--s)); height: calc(1.75 * var(--s)); transform: translateX(-50%); background: #0b0b0d; border-radius: 0 0 calc(0.75 * var(--s)) calc(0.75 * var(--s)); }
.scr-island { position: absolute; left: 50%; top: calc(2.25 * var(--s)); z-index: 6; transform: translateX(-50%) scale(0.86); transform-origin: 50% 0; pointer-events: none; }
.scr-island .island { cursor: default; transition: width 0.35s ease, height 0.35s ease, border-radius 0.35s ease, opacity 0.22s ease, transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1); }
.island.still .tick path { stroke-dashoffset: 0; }
.desk { position: absolute; inset: calc(1.75 * var(--s)) 0 0; display: grid; padding: calc(5 * var(--s)) calc(2.5 * var(--s)) calc(2.25 * var(--s)); }
.app-panel { grid-area: 1 / 1; min-height: 0; display: none; }
.app-panel.on { display: flex; justify-content: center; }
.app-panel.on.enter { animation: winIn 0.5s var(--ease) both; }
@keyframes winIn { from { opacity: 0; transform: translateY(calc(0.75 * var(--s))) scale(0.99); filter: blur(calc(0.25 * var(--s))); } }

/* Shared window chrome. */
.win { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(0.625 * var(--s)); font-family: var(--app-sans); text-align: left; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.28), 0 calc(0.125 * var(--s)) calc(0.375 * var(--s)) rgba(0, 0, 0, 0.08), 0 calc(1.375 * var(--s)) calc(3 * var(--s)) calc(-0.75 * var(--s)) rgba(20, 18, 14, 0.45); -webkit-user-select: text; user-select: text; }
.lights { display: inline-flex; gap: calc(0.5 * var(--s)); flex: none; }
.lights i { width: calc(0.75 * var(--s)); height: calc(0.75 * var(--s)); border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18); }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.win .ic { width: calc(1.125 * var(--s)); height: calc(1.125 * var(--s)); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.win .ic .f { fill: currentColor; stroke: none; }
.win p { margin: 0; }
[data-typed] .pending { display: none; }

/* Claude: warm ivory, a quiet sidebar, the serif greeting, the composer. */
.win-claude { display: grid; grid-template-columns: calc(15 * var(--s)) minmax(0, 1fr); background: #faf9f5; color: #3d3929; }
.cl-side { display: flex; flex-direction: column; gap: calc(0.125 * var(--s)); padding: calc(0.875 * var(--s)) calc(0.75 * var(--s)) calc(0.875 * var(--s)); background: #f3f1ea; border-right: 1px solid #e6e3d9; font-size: calc(0.8438 * var(--s)); min-width: 0; }
.cl-top { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(0.25 * var(--s)) calc(0.75 * var(--s)); color: #8a877d; }
.cl-name { font: 600 calc(1.0625 * var(--s))/1 var(--app-sans); letter-spacing: -0.01em; color: #1f1e1d; padding: calc(0.25 * var(--s)) calc(0.5 * var(--s)) calc(0.875 * var(--s)); }
.cl-new, .cl-nav, .cl-rec { display: flex; align-items: center; gap: calc(0.625 * var(--s)); min-height: calc(2 * var(--s)); padding: 0 calc(0.5 * var(--s)); border-radius: calc(0.5 * var(--s)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-new { font-weight: 500; color: #1f1e1d; margin-bottom: calc(0.25 * var(--s)); }
.cl-plus { display: grid; place-items: center; width: calc(1.375 * var(--s)); height: calc(1.375 * var(--s)); border-radius: 50%; background: #c96442; color: #fff; }
.cl-plus .ic { width: calc(0.875 * var(--s)); height: calc(0.875 * var(--s)); stroke-width: 2.2; }
.cl-nav { color: #3d3929; }
.cl-nav .ic { color: #73726c; }
.cl-h { padding: calc(1 * var(--s)) calc(0.5 * var(--s)) calc(0.375 * var(--s)); font-size: calc(0.75 * var(--s)); color: #8a877d; }
.cl-rec { color: #3d3929; display: block; line-height: calc(2 * var(--s)); }
.cl-user { margin-top: auto; display: flex; align-items: center; gap: calc(0.625 * var(--s)); padding: calc(0.625 * var(--s)) calc(0.375 * var(--s)) 0; border-top: 1px solid #e6e3d9; }
.cl-av { display: grid; place-items: center; width: calc(2 * var(--s)); height: calc(2 * var(--s)); border-radius: 50%; background: #3d3929; color: #faf9f5; font-size: calc(0.75 * var(--s)); font-weight: 600; flex: none; }
.cl-who { display: grid; line-height: 1.25; }
.cl-who b { font-weight: 500; color: #1f1e1d; }
.cl-who small { font-size: calc(0.75 * var(--s)); color: #8a877d; }
.cl-main { position: relative; display: flex; flex-direction: column; min-width: 0; }
.cl-bar { display: none; align-items: center; gap: calc(0.75 * var(--s)); min-height: calc(2.75 * var(--s)); padding: 0 calc(1 * var(--s)); }
.cl-bar .cl-name { padding: 0; font-size: calc(0.9375 * var(--s)); }
.cl-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1.5 * var(--s)); padding: calc(2 * var(--s)) calc(2.5 * var(--s)) calc(2.5 * var(--s)); }
.cl-greet { font: 400 calc(2.25 * var(--s))/1.15 Charter, 'Iowan Old Style', Georgia, serif; letter-spacing: -0.015em; color: #3d3929; text-align: center; }
.cl-box { width: 100%; max-width: calc(42 * var(--s)); background: #fff; border: 1px solid rgba(31, 30, 29, 0.14); border-radius: calc(1.25 * var(--s)); box-shadow: 0 calc(0.25 * var(--s)) calc(1.25 * var(--s)) rgba(31, 30, 29, 0.045), 0 0 0 calc(0.25 * var(--s)) rgba(31, 30, 29, 0.015); padding: calc(1 * var(--s)) calc(1 * var(--s)) calc(0.75 * var(--s)) calc(1.125 * var(--s)); }
.cl-text { font-size: calc(0.9688 * var(--s)); line-height: 1.55; color: #1f1e1d; min-height: calc(5.5 * var(--s)); }
.cl-text p + p, .cl-text p + ul { margin-top: calc(0.625 * var(--s)); }
.cl-text ul { list-style: disc; padding-left: calc(1.25 * var(--s)); margin-top: calc(0.25 * var(--s)); }
.cl-text li { padding-left: calc(0.125 * var(--s)); margin: calc(0.125 * var(--s)) 0; }
.cl-text li::marker { color: #73726c; }
.cl-tools { display: flex; align-items: center; gap: calc(0.5 * var(--s)); margin-top: calc(0.875 * var(--s)); }
.cl-ic { display: grid; place-items: center; width: calc(2 * var(--s)); height: calc(2 * var(--s)); border-radius: calc(0.5 * var(--s)); border: 1px solid rgba(31, 30, 29, 0.14); color: #5e5d59; }
.cl-ic .ic { width: calc(1 * var(--s)); height: calc(1 * var(--s)); }
.cl-send { margin-left: auto; display: grid; place-items: center; width: calc(2 * var(--s)); height: calc(2 * var(--s)); border-radius: calc(0.5 * var(--s)); background: #c96442; color: #fff; }
.cl-send .ic { width: calc(1 * var(--s)); height: calc(1 * var(--s)); stroke-width: 2.1; }
.cl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(0.5 * var(--s)); }
.cl-chips span { display: inline-flex; align-items: center; gap: calc(0.375 * var(--s)); height: calc(2 * var(--s)); padding: 0 calc(0.75 * var(--s)); border-radius: calc(0.5 * var(--s)); border: 1px solid rgba(31, 30, 29, 0.12); background: #fbfaf7; font-size: calc(0.8125 * var(--s)); color: #5e5d59; }
.cl-chips .ic { width: calc(0.9375 * var(--s)); height: calc(0.9375 * var(--s)); }

/* Claude Code: a dark terminal, the welcome box, the prompt box. The
   window is only as tall as the session, so the prompt box sits near its
   bottom edge the way it does in a real terminal. */
.app-panel[data-panel='code'] { align-items: center; }
.app-panel[data-panel='code'] .win-term { width: min(100%, calc(54 * var(--s))); height: auto; max-height: 100%; }
.win-term { display: flex; flex-direction: column; background: #141416; color: #e7e7e4; }
.term-bar { position: relative; display: flex; align-items: center; min-height: calc(2.125 * var(--s)); padding: 0 calc(0.75 * var(--s)); background: linear-gradient(180deg, #343437, #2b2b2e); border-bottom: 1px solid #000; }
.term-title { position: absolute; left: 50%; transform: translateX(-50%); font: 500 calc(0.75 * var(--s))/1 var(--app-sans); color: rgba(255, 255, 255, 0.62); white-space: nowrap; }
.term-body { flex: 1; display: flex; flex-direction: column; gap: calc(0.5 * var(--s)); padding: calc(1 * var(--s)) calc(1.375 * var(--s)) calc(1.25 * var(--s)); font: 400 calc(0.875 * var(--s))/1.6 var(--app-mono); }
.t-dim { color: #8b8b87; }
.cc-welcome { align-self: flex-start; max-width: 100%; margin: calc(0.375 * var(--s)) 0 calc(0.75 * var(--s)); padding: calc(0.5 * var(--s)) calc(1.125 * var(--s)) calc(0.625 * var(--s)); border: 1px solid #d77757; border-radius: calc(0.5 * var(--s)); }
.cc-welcome b { font-weight: 700; color: #fff; }
.cc-o { color: #d77757; }
.t-you { color: #a9a9a5; }
.t-out { display: flex; gap: calc(0.625 * var(--s)); color: #e7e7e4; }
.t-dot { flex: none; width: calc(0.5 * var(--s)); height: calc(0.5 * var(--s)); margin-top: calc(0.5 * var(--s)); border-radius: 50%; background: #4eba65; }
.cc-input { display: flex; gap: calc(0.75 * var(--s)); margin-top: calc(0.5 * var(--s)); padding: calc(0.625 * var(--s)) calc(1 * var(--s)); border: 1px solid #6c6c69; border-radius: calc(0.5 * var(--s)); }
.cc-gt { color: #a9a9a5; flex: none; }
.cc-text { flex: 1; min-width: 0; color: #f2f2ef; }
.cc-text .caret { width: calc(0.5625 * var(--s)); height: 1.15em; margin-left: 1px; vertical-align: -0.2em; background: #e7e7e4; }
.t-hint { padding-left: calc(1 * var(--s)); color: #8b8b87; font-size: calc(0.8125 * var(--s)); }

/* Slack: the aubergine rail and sidebar, white pane, the composer. */
.win-slack { display: flex; flex-direction: column; background: #3f0e40; color: #1d1c1d; }
.sl-top { position: relative; display: flex; align-items: center; gap: calc(0.875 * var(--s)); min-height: calc(2.5 * var(--s)); padding: 0 calc(0.875 * var(--s)); color: rgba(255, 255, 255, 0.78); }
.sl-arrows { display: flex; gap: calc(0.25 * var(--s)); margin-left: calc(4.75 * var(--s)); }
.sl-arrows .ic { width: calc(1 * var(--s)); height: calc(1 * var(--s)); }
.sl-search { display: flex; align-items: center; gap: calc(0.5 * var(--s)); flex: 0 1 calc(30 * var(--s)); margin: 0 auto; height: calc(1.625 * var(--s)); padding: 0 calc(0.75 * var(--s)); border-radius: calc(0.375 * var(--s)); background: rgba(255, 255, 255, 0.18); font-size: calc(0.8125 * var(--s)); color: rgba(255, 255, 255, 0.82); }
.sl-search .ic { width: calc(0.9375 * var(--s)); height: calc(0.9375 * var(--s)); }
.sl-label { font-size: calc(0.75 * var(--s)); font-weight: 600; color: rgba(255, 255, 255, 0.62); }
.sl-body { flex: 1; display: grid; grid-template-columns: calc(4.25 * var(--s)) calc(15 * var(--s)) minmax(0, 1fr); min-height: 0; }
.sl-rail { display: flex; flex-direction: column; align-items: center; gap: calc(0.875 * var(--s)); padding: calc(0.5 * var(--s)) 0; color: #fff; }
.sl-ws { display: grid; place-items: center; width: calc(2.25 * var(--s)); height: calc(2.25 * var(--s)); border-radius: calc(0.5 * var(--s)); background: #fff; color: #3f0e40; font-size: calc(0.8125 * var(--s)); font-weight: 800; box-shadow: 0 0 0 calc(0.1875 * var(--s)) rgba(255, 255, 255, 0.3); margin-bottom: calc(0.25 * var(--s)); }
.sl-ri { display: grid; justify-items: center; gap: calc(0.25 * var(--s)); font-size: calc(0.6875 * var(--s)); font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.sl-rb { display: grid; place-items: center; width: calc(2.25 * var(--s)); height: calc(2.25 * var(--s)); border-radius: calc(0.5 * var(--s)); }
.sl-ri.on .sl-rb { background: rgba(255, 255, 255, 0.2); }
.sl-side { display: flex; flex-direction: column; gap: calc(0.0625 * var(--s)); padding: calc(0.5 * var(--s)) calc(0.625 * var(--s)); background: rgba(255, 255, 255, 0.06); border-radius: calc(0.5 * var(--s)) 0 0 0; color: rgba(255, 255, 255, 0.72); font-size: calc(0.875 * var(--s)); min-width: 0; }
.sl-wsname { display: flex; align-items: center; gap: calc(0.25 * var(--s)); padding: calc(0.5 * var(--s)) calc(0.5 * var(--s)) calc(0.75 * var(--s)); font-size: calc(1.0625 * var(--s)); font-weight: 800; color: #fff; white-space: nowrap; }
.sl-wsname .ic { width: calc(0.875 * var(--s)); height: calc(0.875 * var(--s)); }
.sl-sec { display: flex; align-items: center; gap: calc(0.375 * var(--s)); padding: calc(0.625 * var(--s)) calc(0.5 * var(--s)) calc(0.25 * var(--s)); font-size: calc(0.8125 * var(--s)); }
.sl-sec .ic { width: calc(0.75 * var(--s)); height: calc(0.75 * var(--s)); }
.sl-ch, .sl-dm { display: flex; align-items: center; gap: calc(0.5 * var(--s)); min-height: calc(1.75 * var(--s)); padding: 0 calc(0.625 * var(--s)); border-radius: calc(0.375 * var(--s)); white-space: nowrap; }
.sl-ch i { font-style: normal; width: calc(0.875 * var(--s)); text-align: center; opacity: 0.8; }
.sl-ch.on { background: #1164a3; color: #fff; }
.sl-ch.u { color: #fff; font-weight: 800; }
.av { display: grid; place-items: center; flex: none; width: calc(1.25 * var(--s)); height: calc(1.25 * var(--s)); border-radius: calc(0.25 * var(--s)); font-size: calc(0.5625 * var(--s)); font-weight: 800; color: #fff; background: #e8912d; }
.av.a2 { background: #2bac76; }
.av.a3 { background: #1264a3; }
.sl-main { display: flex; flex-direction: column; min-width: 0; background: #fff; border-radius: calc(0.5 * var(--s)) 0 0 0; }
.sl-head { display: flex; align-items: center; justify-content: space-between; min-height: calc(3 * var(--s)); padding: 0 calc(1.25 * var(--s)); border-bottom: 1px solid #e8e8e8; font-size: calc(1.0625 * var(--s)); }
.sl-head b { font-weight: 800; }
.sl-mem { display: flex; align-items: center; gap: calc(0.25 * var(--s)); height: calc(1.75 * var(--s)); padding: 0 calc(0.5 * var(--s)); border: 1px solid #ddd; border-radius: calc(0.375 * var(--s)); font-size: calc(0.8125 * var(--s)); color: #616061; }
.sl-mem .ic { width: calc(1 * var(--s)); height: calc(1 * var(--s)); }
.sl-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(0.875 * var(--s)); padding: calc(1 * var(--s)) calc(1.25 * var(--s)) calc(0.75 * var(--s)); font-size: calc(0.9375 * var(--s)); line-height: 1.45; }
.sl-msg { display: flex; gap: calc(0.625 * var(--s)); }
.sl-msg > .av { width: calc(2.25 * var(--s)); height: calc(2.25 * var(--s)); border-radius: calc(0.375 * var(--s)); font-size: calc(0.75 * var(--s)); }
.sl-meta { display: flex; align-items: baseline; gap: calc(0.5 * var(--s)); }
.sl-meta b { font-weight: 800; }
.sl-meta time { font-size: calc(0.75 * var(--s)); color: #616061; }
.sl-comp { margin: 0 calc(1.25 * var(--s)) calc(1.125 * var(--s)); border: 1px solid #bbbabb; border-radius: calc(0.5 * var(--s)); box-shadow: 0 1px calc(0.25 * var(--s)) rgba(0, 0, 0, 0.06); }
.sl-fmt { display: flex; align-items: center; gap: calc(0.875 * var(--s)); min-height: calc(2.125 * var(--s)); padding: 0 calc(0.75 * var(--s)); background: #f8f8f8; border-radius: calc(0.5 * var(--s)) calc(0.5 * var(--s)) 0 0; color: #616061; font-size: calc(0.875 * var(--s)); }
.sl-fmt b { font-weight: 800; }
.sl-fmt i { font-family: Georgia, serif; }
.sl-fmt .sep { width: 1px; height: calc(1.125 * var(--s)); background: #ddd; }
.sl-fmt .ic { width: calc(1 * var(--s)); height: calc(1 * var(--s)); }
.sl-text { padding: calc(0.625 * var(--s)) calc(0.875 * var(--s)) calc(0.375 * var(--s)); font-size: calc(0.9375 * var(--s)); line-height: 1.5; color: #1d1c1d; min-height: calc(3.5 * var(--s)); }
.sl-acts { display: flex; align-items: center; gap: calc(0.75 * var(--s)); padding: calc(0.375 * var(--s)) calc(0.5 * var(--s)) calc(0.5 * var(--s)); color: #616061; font-size: calc(0.8125 * var(--s)); }
.sl-acts .ic { width: calc(1.0625 * var(--s)); height: calc(1.0625 * var(--s)); }
.sl-plus { display: grid; place-items: center; width: calc(1.5 * var(--s)); height: calc(1.5 * var(--s)); border-radius: 50%; background: #e8e8e8; }
.sl-plus .ic { width: calc(0.875 * var(--s)); height: calc(0.875 * var(--s)); }
.sl-aa { font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.sl-send { margin-left: auto; display: grid; place-items: center; width: calc(2 * var(--s)); height: calc(1.75 * var(--s)); border-radius: calc(0.25 * var(--s)); background: #007a5a; color: #fff; }
.sl-send .ic { width: calc(1 * var(--s)); height: calc(1 * var(--s)); }

/* Notes: three panes, yellow accents, the first line becomes the title. */
.win-notes { display: grid; grid-template-columns: calc(12.5 * var(--s)) calc(16 * var(--s)) minmax(0, 1fr); background: #fff; color: #1d1d1f; }
.nt-side { display: flex; flex-direction: column; gap: calc(0.125 * var(--s)); padding: calc(0.875 * var(--s)) calc(0.625 * var(--s)); background: #ebeae7; border-right: 1px solid #dcdad5; font-size: calc(0.8438 * var(--s)); }
.nt-top { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(0.25 * var(--s)) calc(1 * var(--s)); color: #7a7a7d; }
.nt-acct { padding: calc(0.25 * var(--s)) calc(0.5 * var(--s)) calc(0.375 * var(--s)); font-size: calc(0.6875 * var(--s)); font-weight: 700; color: #8a8a8e; }
.nt-f { display: flex; align-items: center; gap: calc(0.5 * var(--s)); min-height: calc(1.75 * var(--s)); padding: 0 calc(0.5 * var(--s)); border-radius: calc(0.375 * var(--s)); }
.nt-f .ic { width: calc(1 * var(--s)); height: calc(1 * var(--s)); color: #e0a800; }
.nt-f small { margin-left: auto; font-size: calc(0.75 * var(--s)); color: #8a8a8e; font-variant-numeric: tabular-nums; }
.nt-f.on { background: rgba(0, 0, 0, 0.09); }
.nt-list { display: flex; flex-direction: column; gap: calc(0.125 * var(--s)); padding: calc(0.5 * var(--s)) calc(0.625 * var(--s)); background: #f7f7f6; border-right: 1px solid #e3e2df; min-width: 0; font-size: calc(0.8125 * var(--s)); }
.nt-tool, .nt-etool { display: flex; align-items: center; gap: calc(1 * var(--s)); min-height: calc(2.25 * var(--s)); color: #7a7a7d; }
.nt-tool { padding: 0 calc(0.375 * var(--s)) calc(0.25 * var(--s)); }
.nt-sp { flex: 1; }
.nt-grp { padding: calc(0.75 * var(--s)) calc(0.625 * var(--s)) calc(0.25 * var(--s)); font-size: calc(0.75 * var(--s)); font-weight: 700; color: #1d1d1f; }
.nt-item { display: grid; gap: calc(0.125 * var(--s)); padding: calc(0.5 * var(--s)) calc(0.75 * var(--s)) calc(0.5625 * var(--s)); border-radius: calc(0.375 * var(--s)); border-bottom: 1px solid #e8e7e4; }
.nt-item b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-item span { display: flex; gap: calc(0.5 * var(--s)); color: #8a8a8e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-item time { color: #1d1d1f; font-variant-numeric: tabular-nums; }
.nt-item.on { background: #f9d45c; border-bottom-color: transparent; }
.nt-item.on span { color: rgba(29, 29, 31, 0.62); }
.nt-edit { display: flex; flex-direction: column; min-width: 0; padding: calc(0.5 * var(--s)) calc(1.5 * var(--s)) calc(1 * var(--s)); }
.nt-etool { gap: calc(1.125 * var(--s)); padding: 0 0 calc(0.5 * var(--s)); }
.nt-aa { font-size: calc(0.9375 * var(--s)); font-weight: 500; color: #7a7a7d; }
.nt-date { text-align: center; font-size: calc(0.75 * var(--s)); color: #8a8a8e; padding: calc(0.375 * var(--s)) 0 calc(1.25 * var(--s)); }
.nt-text { padding: 0 calc(1.25 * var(--s)); font-size: calc(0.9688 * var(--s)); line-height: 1.6; color: #1d1d1f; }
.nt-title { font-size: calc(1.625 * var(--s)); line-height: 1.2; font-weight: 700; letter-spacing: -0.012em; margin-bottom: calc(0.625 * var(--s)) !important; }
.nt-text ul { list-style: disc; padding-left: calc(1.375 * var(--s)); }
.nt-text li { padding-left: calc(0.25 * var(--s)); margin: calc(0.25 * var(--s)) 0; }
.nt-lights { display: none; }

/* Gmail: the inbox behind, the compose window docked bottom right. */
.win-gmail { display: flex; flex-direction: column; background: #f8fafd; color: #1f1f1f; font-family: Roboto, var(--app-sans); }
.gm-chrome { display: flex; align-items: flex-end; gap: calc(1.25 * var(--s)); min-height: calc(2.375 * var(--s)); padding: 0 calc(0.75 * var(--s)); background: #dfe3e9; }
.gm-chrome .lights { align-self: center; }
.gm-tab { display: flex; align-items: center; gap: calc(0.5 * var(--s)); height: calc(1.875 * var(--s)); padding: 0 calc(1 * var(--s)); border-radius: calc(0.625 * var(--s)) calc(0.625 * var(--s)) 0 0; background: #f8fafd; font-size: calc(0.75 * var(--s)); color: #1f1f1f; min-width: calc(12 * var(--s)); }
.gm-fav { display: grid; color: #5f6368; }
.gm-fav .ic { width: calc(0.9375 * var(--s)); height: calc(0.9375 * var(--s)); }
.gm-top { display: flex; align-items: center; gap: calc(1 * var(--s)); min-height: calc(3.75 * var(--s)); padding: 0 calc(1 * var(--s)) 0 calc(1.25 * var(--s)); }
.gm-burger { color: #444746; display: grid; flex: none; }
.gm-burger .ic { width: calc(1.375 * var(--s)); height: calc(1.375 * var(--s)); }
.gm-word { font-size: calc(1.375 * var(--s)); color: #444746; letter-spacing: -0.01em; width: calc(8.5 * var(--s)); }
.gm-search { display: flex; align-items: center; gap: calc(0.875 * var(--s)); flex: 0 1 calc(44 * var(--s)); min-width: 0; height: calc(2.875 * var(--s)); padding: 0 calc(1.125 * var(--s)); border-radius: calc(1.5 * var(--s)); background: #e9eef6; font-size: calc(0.9375 * var(--s)); color: #444746; }
.gm-search .ic { width: calc(1.25 * var(--s)); height: calc(1.25 * var(--s)); }
.gm-av { flex: none; margin-left: auto; display: grid; place-items: center; width: calc(2 * var(--s)); height: calc(2 * var(--s)); border-radius: 50%; background: #0b57d0; color: #fff; font-size: calc(0.75 * var(--s)); font-weight: 600; }
.gm-body { position: relative; flex: 1; display: grid; grid-template-columns: calc(15 * var(--s)) minmax(0, 1fr); gap: 0 calc(0.75 * var(--s)); padding: 0 calc(1 * var(--s)) 0 0; min-height: 0; }
.gm-nav { display: flex; flex-direction: column; gap: calc(0.0625 * var(--s)); padding-top: calc(0.25 * var(--s)); font-size: calc(0.875 * var(--s)); color: #1f1f1f; }
.gm-cbtn { display: inline-flex; align-self: flex-start; align-items: center; gap: calc(0.875 * var(--s)); height: calc(3.5 * var(--s)); padding: 0 calc(1.5 * var(--s)) 0 calc(1.125 * var(--s)); margin: 0 0 calc(0.75 * var(--s)) calc(0.5 * var(--s)); border-radius: calc(1 * var(--s)); background: #c2e7ff; font-weight: 500; color: #001d35; }
.gm-cbtn .ic { width: calc(1.25 * var(--s)); height: calc(1.25 * var(--s)); }
.gm-n { display: flex; align-items: center; gap: calc(1.125 * var(--s)); height: calc(2 * var(--s)); padding: 0 calc(0.75 * var(--s)) 0 calc(1.625 * var(--s)); border-radius: 0 calc(1 * var(--s)) calc(1 * var(--s)) 0; }
.gm-n .ic { width: calc(1.125 * var(--s)); height: calc(1.125 * var(--s)); color: #444746; }
.gm-n small { margin-left: auto; font-size: calc(0.75 * var(--s)); font-weight: 700; }
.gm-n.on { background: #d3e3fd; font-weight: 700; color: #041e49; }
.gm-list { background: #fff; border-radius: calc(1 * var(--s)) calc(1 * var(--s)) 0 0; padding-top: calc(0.5 * var(--s)); overflow: hidden; }
.gm-row { display: grid; grid-template-columns: calc(9.5 * var(--s)) minmax(0, 1fr) auto; gap: calc(1 * var(--s)); align-items: center; min-height: calc(2.5 * var(--s)); padding: 0 calc(1.25 * var(--s)) 0 calc(1.5 * var(--s)); border-bottom: 1px solid #f0f2f5; font-size: calc(0.875 * var(--s)); color: #444746; }
.gm-row > b { font-weight: 400; color: #1f1f1f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-row span b { font-weight: 400; color: #1f1f1f; }
.gm-row time { font-size: calc(0.75 * var(--s)); color: #444746; font-variant-numeric: tabular-nums; }
.gm-row.u { background: #fff; }
.gm-row.u > b, .gm-row.u span b, .gm-row.u time { font-weight: 700; color: #1f1f1f; }
.gm-row:not(.u) { background: #f6f8fc; }
.gm-compose { position: absolute; right: calc(1.5 * var(--s)); bottom: 0; width: min(calc(33 * var(--s)), calc(100% - calc(3 * var(--s)))); display: flex; flex-direction: column; background: #fff; border-radius: calc(0.75 * var(--s)) calc(0.75 * var(--s)) 0 0; box-shadow: 0 calc(0.25 * var(--s)) calc(0.5 * var(--s)) calc(0.1875 * var(--s)) rgba(60, 64, 67, 0.15), 0 1px calc(0.1875 * var(--s)) rgba(60, 64, 67, 0.3); }
.gm-ch { display: flex; align-items: center; justify-content: space-between; min-height: calc(2.5 * var(--s)); padding: 0 calc(0.75 * var(--s)) 0 calc(1 * var(--s)); border-radius: calc(0.75 * var(--s)) calc(0.75 * var(--s)) 0 0; background: #f2f6fc; font-size: calc(0.875 * var(--s)); font-weight: 500; color: #041e49; }
.gm-ctl { display: flex; gap: calc(0.625 * var(--s)); color: #444746; }
.gm-ctl .ic { width: calc(1 * var(--s)); height: calc(1 * var(--s)); }
.gm-field { display: flex; align-items: center; gap: calc(0.5 * var(--s)); min-height: calc(2.375 * var(--s)); margin: 0 calc(1 * var(--s)); border-bottom: 1px solid #e3e3e3; font-size: calc(0.875 * var(--s)); color: #1f1f1f; }
.gm-k { color: #444746; }
.gm-chip { display: inline-flex; align-items: center; gap: calc(0.375 * var(--s)); height: calc(1.5 * var(--s)); padding: 0 calc(0.625 * var(--s)) 0 calc(0.125 * var(--s)); border-radius: calc(0.75 * var(--s)); border: 1px solid #c4c7c5; font-size: calc(0.8125 * var(--s)); }
.gm-chip i { display: grid; place-items: center; width: calc(1.25 * var(--s)); height: calc(1.25 * var(--s)); border-radius: 50%; background: #7b1fa2; color: #fff; font-style: normal; font-size: calc(0.6875 * var(--s)); font-weight: 600; }
.gm-text { padding: calc(0.75 * var(--s)) calc(1 * var(--s)) calc(0.5 * var(--s)); font-size: calc(0.875 * var(--s)); line-height: 1.5; color: #1f1f1f; min-height: calc(11 * var(--s)); }
.gm-text p + p { margin-top: calc(0.75 * var(--s)); }
.gm-foot { display: flex; align-items: center; gap: calc(1 * var(--s)); padding: calc(0.625 * var(--s)) calc(1 * var(--s)) calc(0.875 * var(--s)); color: #444746; }
.gm-send { display: inline-flex; align-items: center; height: calc(2.25 * var(--s)); border-radius: calc(1.125 * var(--s)); background: #0b57d0; color: #fff; font-size: calc(0.875 * var(--s)); }
.gm-send b { font-weight: 500; padding: 0 calc(1 * var(--s)) 0 calc(1.25 * var(--s)); }
.gm-dd { display: grid; place-items: center; height: 100%; padding: 0 calc(0.5 * var(--s)); border-left: 1px solid rgba(255, 255, 255, 0.35); }
.gm-dd .ic { width: calc(1 * var(--s)); height: calc(1 * var(--s)); }
.gm-tools { display: flex; align-items: center; gap: calc(0.875 * var(--s)); }
.gm-tools .ic { width: calc(1.125 * var(--s)); height: calc(1.125 * var(--s)); }
.gm-aa { font-size: calc(1 * var(--s)); text-decoration: underline; text-underline-offset: 0.18em; font-family: Georgia, serif; }
.gm-trash { margin-left: auto; display: grid; }
[data-typed] .caret { background: currentColor; }

/* Capture: windows in their final state, no entrance. */
.capture .app-panel.on.enter { animation: none; }
.capture .key.spacebar .cap, .capture .key.spacebar .top { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .app-panel.on.enter { animation: none; }
  .key.spacebar.nudging .cap, .key.spacebar.nudging .top { animation: none; }
  .space-hint, .space-hint.on { transition: opacity 0.2s ease, visibility 0s; transform: translate(-50%, 0); }
}

/* ---------- home v2: responsive ---------- */

@media (min-width: 1680px) {
  .app-said { max-width: 100%; }
  /* The scaled root would move the italic said lines into Fraunces' wonky
     display cut; keep the text cut they have at 1440. */
  .heard { font-optical-sizing: none; font-variation-settings: 'opsz' 18; }
}

@media (max-width: 1180px) {
  .apps-head .apps-keys .deck { --u: 3.375rem; }
}

/* Below a laptop the screen is a fixed size and the windows take the
   narrower layouts real apps use in a narrow window. */
@media (max-width: 980px) {
  .apps-head { grid-template-columns: minmax(0, 1fr); }
  .apps-head .apps-keys { justify-content: flex-start; padding: 2.5rem 0 1.25rem 0.5rem; }
  .apps-head .apps-keys .note-shuffle { left: 14.5rem; right: auto; bottom: 0.25rem; }
  .apps-head .apps-keys .zzz.z2 { left: 10.5rem; right: auto; }
  .sw { --dh: 36rem; --s: 1rem; }
  .laptop, .app-said { width: 100%; }
  .desk { padding: 4.75rem 1.75rem 1.75rem; }
  .win-claude { grid-template-columns: calc(13 * var(--s)) minmax(0, 1fr); }
  .cl-rec:nth-child(n + 11) { display: none; }
  .sl-body { grid-template-columns: calc(4 * var(--s)) calc(12.5 * var(--s)) minmax(0, 1fr); }
  .win-notes { grid-template-columns: calc(11 * var(--s)) calc(14 * var(--s)) minmax(0, 1fr); }
  .gm-body { grid-template-columns: calc(12.5 * var(--s)) minmax(0, 1fr); }
  .gm-word { width: auto; }
  .gm-row { grid-template-columns: calc(7.5 * var(--s)) minmax(0, 1fr) auto; }
  .sl-label { display: none; }

}

@media (max-width: 860px) {
  .win-claude { grid-template-columns: minmax(0, 1fr); }
  .cl-side { display: none; }
  .cl-bar { display: flex; }
  .cl-center { justify-content: flex-start; padding: calc(1.5 * var(--s)) calc(1.5 * var(--s)) calc(1.75 * var(--s)); }
  .sl-body { grid-template-columns: calc(11.5 * var(--s)) minmax(0, 1fr); }
  .sl-rail { display: none; }
  .sl-arrows { margin-left: calc(0.5 * var(--s)); }
  .win-notes { grid-template-columns: calc(14 * var(--s)) minmax(0, 1fr); }
  .nt-side { display: none; }
  .nt-lights.m { display: none; }
  .nt-list .nt-tool::before { content: ''; }
  .gm-body { grid-template-columns: minmax(0, 1fr); padding: 0 calc(0.75 * var(--s)); }
  .gm-nav { display: none; }
  .gm-word { display: none; }
  .mb-menus span:nth-child(n + 4) { display: none; }

}

@media (max-width: 640px) {
  .space-try { padding-bottom: 1.5rem; }
  .key.spacebar { --u: 3.75rem; }
  .note-hold { top: calc(3.75rem + 0.375rem); font-size: 1.3125rem; }
  .hero-stage .space-try { order: 5; }
  .hero-stage .hint-touch { order: 5; }
  .space-hint { display: none; }

  .sec-time { padding: 4rem 0 4.5rem; }
  .tbars { gap: 1.5rem; margin-top: 2.25rem; }
  .ttrack { --u: 3.5rem; gap: 0.4375rem; }
  .key.tkey .lg.br { font-size: 0.8125rem; right: 0.75rem; bottom: 0.625rem; }
  .socket { padding: 0 0.875rem; }
  .socket .note { font-size: 1.3125rem; white-space: normal; line-height: 0.95; }
  .tz { font-size: 1.5rem; right: 16%; top: -0.5rem; }

  .apps-head .apps-keys { display: none; }
  .sw { --dh: 35rem; margin-top: 1.75rem; }
  .app-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; }
  .tabkey { grid-column: span 2; min-height: 2.75rem; padding: 0 0.375rem 0.1875rem; font-size: 0.9063rem; border-radius: 0.6875rem; white-space: nowrap; }
  .tabkey:nth-child(n + 4) { grid-column: span 3; }
  .app-said { padding: 0; margin-top: 1.5rem; }
  .said-stack > .heard { font-size: 1.0313rem; }
  .said-top { gap: 0.25rem 0.75rem; }
  .said-top .take-tag::before { display: none; }
  .screen { padding: 0.375rem 0.375rem 0.5rem; border-radius: 1.125rem 1.125rem 0.625rem 0.625rem; }
  .display { border-radius: 0.75rem 0.75rem 0.25rem 0.25rem; }
  .base { height: 0.625rem; margin: 0 -1rem; border-radius: 0.125rem 0.125rem 0.75rem 0.75rem / 0.125rem 0.125rem 0.5rem 0.5rem; }
  .base::before { height: 0.3125rem; }
  .desk { inset: 1.5rem 0 0; padding: 3.75rem 0.5rem 0.5rem; }

  .win { border-radius: calc(0.5 * var(--s)); }
  .lights { gap: calc(0.375 * var(--s)); }
  .lights i { width: calc(0.625 * var(--s)); height: calc(0.625 * var(--s)); }

  .cl-bar { min-height: calc(2.375 * var(--s)); padding: 0 calc(0.75 * var(--s)); }
  .cl-center { gap: calc(1 * var(--s)); padding: calc(0.75 * var(--s)) calc(0.75 * var(--s)) calc(1 * var(--s)); justify-content: center; }
  .cl-greet { font-size: calc(1.5 * var(--s)); }
  .cl-box { padding: calc(0.75 * var(--s)) calc(0.75 * var(--s)) calc(0.625 * var(--s)) calc(0.875 * var(--s)); border-radius: calc(1 * var(--s)); }
  .cl-text { font-size: calc(0.875 * var(--s)); }
  .cl-chips { display: none; }

  .term-bar { min-height: calc(1.875 * var(--s)); }
  .term-title { font-size: calc(0.6875 * var(--s)); }
  .term-body { padding: calc(0.75 * var(--s)) calc(0.75 * var(--s)) calc(0.875 * var(--s)); font-size: calc(0.75 * var(--s)); line-height: 1.55; gap: calc(0.375 * var(--s)); }
  .cc-welcome { padding: calc(0.375 * var(--s)) calc(0.75 * var(--s)) calc(0.5 * var(--s)); margin-bottom: calc(0.375 * var(--s)); }
  .cc-input { padding: calc(0.5 * var(--s)) calc(0.625 * var(--s)); gap: calc(0.5 * var(--s)); }
  .t-hint { font-size: calc(0.6875 * var(--s)); padding-left: calc(0.625 * var(--s)); }

  .sl-top { min-height: calc(2.25 * var(--s)); gap: calc(0.5 * var(--s)); padding: 0 calc(0.625 * var(--s)); }
  .sl-arrows { display: none; }
  .sl-search { height: calc(1.5 * var(--s)); font-size: calc(0.75 * var(--s)); }
  .sl-body { grid-template-columns: minmax(0, 1fr); }
  .sl-side { display: none; }
  .sl-main { border-radius: calc(0.375 * var(--s)) calc(0.375 * var(--s)) 0 0; }
  .sl-head { min-height: calc(2.5 * var(--s)); padding: 0 calc(0.875 * var(--s)); font-size: calc(0.9375 * var(--s)); }
  .sl-msgs { padding: calc(0.75 * var(--s)) calc(0.875 * var(--s)) calc(0.5 * var(--s)); gap: calc(0.625 * var(--s)); font-size: calc(0.8438 * var(--s)); }
  .sl-msg > .av { width: calc(1.875 * var(--s)); height: calc(1.875 * var(--s)); font-size: calc(0.6875 * var(--s)); }
  .sl-comp { margin: 0 calc(0.625 * var(--s)) calc(0.625 * var(--s)); }
  .sl-fmt { gap: calc(0.75 * var(--s)); min-height: calc(1.875 * var(--s)); }
  .sl-text { font-size: calc(0.875 * var(--s)); padding: calc(0.5 * var(--s)) calc(0.75 * var(--s)) calc(0.25 * var(--s)); }

  .win-notes { grid-template-columns: minmax(0, 1fr); }
  .nt-list { display: none; }
  .nt-lights.m { display: inline-flex; margin-right: auto; }
  .nt-etool { gap: calc(0.875 * var(--s)); }
  .nt-edit { padding: calc(0.5 * var(--s)) calc(0.75 * var(--s)) calc(0.75 * var(--s)); }
  .nt-text { padding: 0 calc(0.5 * var(--s)); font-size: calc(0.9063 * var(--s)); }
  .nt-title { font-size: calc(1.375 * var(--s)); }

  .gm-chrome { min-height: calc(2 * var(--s)); }
  .gm-tab { min-width: 0; height: calc(1.5 * var(--s)); font-size: calc(0.6875 * var(--s)); }
  .gm-top { min-height: calc(3 * var(--s)); gap: calc(0.625 * var(--s)); padding: 0 calc(0.625 * var(--s)); }
  .gm-search { height: calc(2.25 * var(--s)); font-size: calc(0.8125 * var(--s)); padding: 0 calc(0.75 * var(--s)); }
  .gm-body { padding: 0 calc(0.375 * var(--s)); }
  .gm-row { grid-template-columns: calc(5.5 * var(--s)) minmax(0, 1fr); padding: 0 calc(0.75 * var(--s)); font-size: calc(0.8125 * var(--s)); }
  .gm-row time { display: none; }
  .gm-compose { left: calc(0.375 * var(--s)); right: calc(0.375 * var(--s)); width: auto; }
  .gm-field { margin: 0 calc(0.75 * var(--s)); min-height: calc(2.125 * var(--s)); font-size: calc(0.8125 * var(--s)); }
  .gm-text { padding: calc(0.625 * var(--s)) calc(0.75 * var(--s)) calc(0.375 * var(--s)); font-size: calc(0.8125 * var(--s)); min-height: 0; }
  .gm-foot { gap: calc(0.75 * var(--s)); padding: calc(0.5 * var(--s)) calc(0.75 * var(--s)) calc(0.75 * var(--s)); }
  .gm-tools .ic:nth-of-type(n + 3) { display: none; }
  .menubar { height: 1.5rem; padding: 0 0.625rem; font-size: 0.6875rem; }
  .mb-menus { display: none; }
  .mb-right span:nth-child(2) { display: none; }
  .notch { width: 6.5rem; height: 1.5rem; border-radius: 0 0 0.5rem 0.5rem; }
  .scr-island { top: 1.875rem; transform: translateX(-50%) scale(0.74); }
}

/* ---------- pricing: responsive ---------- */

/* Narrower cards stack their two halves: the offer, what you get, then
   the button at the foot of the key. */
@media (max-width: 1100px) {
  .plan-top { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.625rem 1.5rem 1.625rem; }
  .pv-a, .pv-b { display: contents; }
  .pv-words { margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  .pv-pro .pv-words { border-top-color: rgba(255, 255, 255, 0.12); }
  .feat { margin-top: 0.25rem; }
  .pv-a .plan-cta { order: 9; padding-top: 1rem; }
  .pro-legend { top: 1.375rem; right: 1.375rem; }
  .pv-pro .pitch { padding-right: 3.75rem; }
}
@media (max-width: 640px) {
  .pv-grid { grid-template-columns: minmax(0, 1fr); gap: 1.125rem; }
  .pv-head { padding-bottom: 2rem; }
  .plan-top { padding: 1.375rem 1.25rem 1.5rem; }
  .plan h2 { font-size: 2.25rem; }
  .amt { font-size: 3.5rem; }
  .pro-legend { top: 1.25rem; right: 1.25rem; }
  .w-note { font-size: 1.25rem; }
}