/*
  Talk DAT! customer surface, 2026-08-18.
  This file intentionally sits after the legacy inline styles. It replaces the
  marketing composition while the existing IDs and scripts keep the demo,
  music, themes, releases, waitlist, account, checkout, and admin tools live.
*/

/* ------------------------------------------------------------------ *
 * TYPEFACES
 *
 * Both files are served from this origin. Nothing is fetched from
 * fonts.googleapis.com, fonts.gstatic.com, or any other Google host - the
 * company is removing every Google dependency, and a font link is a request
 * to a third party on the critical path either way.
 *
 * Knight AI+AV is our own display serif (copyright Knight AI+AV, fsType 8,
 * editable embedding permitted). It ships one weight, 400, which is also the
 * weight the field sets display type at - Vercel 64/400, Wispr Flow 96/400,
 * Granola 86/400. font-synthesis-weight is off wherever it is used so the
 * browser never fakes a bold on a high-contrast serif.
 *
 * Inter is SIL OFL, Copyright 2016 The Inter Project Authors
 * (https://github.com/rsms/inter). This is the Latin `wght` variable subset,
 * 48 KB for the whole 100-900 range.
 * ------------------------------------------------------------------ */
@font-face {
  font-family: "Knight AI+AV";
  src: url("assets/fonts/knight-display.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "InterVariable";
  src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* X-226: the stylesheet had NO box-sizing reset, so everything was content-box.
 *
 * That is why the page scrolled sideways on a phone. A button given
 * width: 335px plus 20px of horizontal padding and a hairline border rendered
 * at 377px inside a 375px viewport, and sixteen elements spilled past the edge
 * at 375. The document's scrollWidth was 401 against a clientWidth of 375.
 *
 * Horizontal scroll on a phone is not a cosmetic issue: every vertical swipe
 * near the edge fights the page, and the layout looks broken in a way people
 * do not report, they just leave.
 *
 * This is the standard reset and it belongs at the top of any stylesheet.
 * Measured before and after rather than assumed, because applying it to a
 * stylesheet authored under content-box can shift anything that compensated
 * for the old behaviour.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * DESIGN TOKENS
 *
 * The one sheet every surface obeys. Nothing below this block ships a raw
 * value: sizes, weights, spacing, radii, shadows and motion all read from
 * here. The audit of 2026-09-03 measured 51 font sizes, 23 weights, 15 radii
 * and 33 shadow recipes on this single page; the numbers below are the whole
 * ladder that replaces them.
 *
 * The --td-* colour tokens that follow are kept under their original names
 * because commerce.js, theme.js and music.js read them. New names are added
 * as aliases, never as renames.
 * ------------------------------------------------------------------ */
:root {
  /* Type scale: eleven hand-set roles, not a modular ratio.
     Every fluid size keeps a rem term inside the clamp, so a 200% browser
     zoom still enlarges the text (WCAG 1.4.4); a pure vw size cancels it. */
  /* The sheet slopes display-1 at 8vw, which assumes the centred full-width
     hero most of the field ships. Ours is a three-panel split: the copy panel
     measures 310px of text at 1280 and 343px at 375, so 8vw runs the headline
     straight off the panel from 1000px up. Measured against that column, 5.4vw
     is the steepest slope that still fits at 1280, 1440 and 1920, and the rem
     floor and 2x range the sheet asks for are both intact. */
  --text-display-1: clamp(3rem, 5.4vw, 6rem);        /* 48 -> 96 */
  --text-display-2: clamp(2.25rem, 5vw, 4rem);       /* 36 -> 64 */
  --text-title-1: 2.5rem;                            /* 40 */
  --text-title-2: 2rem;                              /* 32 */
  --text-title-3: 1.5rem;                            /* 24 */
  --text-title-4: 1.25rem;                           /* 20 */
  --text-body-lg: 1.125rem;                          /* 18 */
  --text-body: 1rem;                                 /* 16 */
  --text-body-sm: 0.875rem;                          /* 14 */
  --text-caption: 0.8125rem;                         /* 13, the floor */
  /* The sheet specifies 12px for uppercase eyebrows. This site enforces a
     hard 13px rendered floor, so the label role sits at the floor and earns
     its distinction from --text-caption through case and tracking instead. */
  --text-label: 0.8125rem;                           /* 13, uppercase +0.06em */

  --leading-display-1: 0.95;
  --leading-display-2: 1;
  --leading-title-1: 1.05;
  --leading-title-2: 1.1;
  --leading-title-3: 1.2;
  --leading-title-4: 1.3;
  --leading-body: 1.55;
  --leading-body-sm: 1.5;
  --leading-caption: 1.45;
  --leading-label: 1.2;

  --tracking-display-1: -0.03em;
  --tracking-display-2: -0.025em;
  --tracking-title-1: -0.02em;
  --tracking-title-2: -0.02em;
  --tracking-title-3: -0.015em;
  --tracking-title-4: -0.01em;
  --tracking-body: 0;
  --tracking-label: 0.06em;

  /* Weight: four values, chosen once. */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-display: 680;

  /* Spacing: 4px base, 8px rhythm. Nothing takes a value off this list. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;
  --space-section: clamp(64px, 8vw, 128px);

  /* Radius: six values. An inner radius is the outer radius minus the padding
     between them; a capsule's radius is half its height. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Elevation: layered, hue-matched to the ground (#070909 is hsl(180 13% 3%)),
     never black. Offset up, blur up, opacity down; one light direction.
     shadow-1 rests a card, shadow-2 lifts a menu, shadow-3 floats a modal.
     shadow-inset is a single hairline - it is not a bevel and never pairs
     with a hard colour ledge. */
  --shadow-hsl: 180 13% 3%;
  --shadow-1:
    0 1px 1px hsl(var(--shadow-hsl) / 0.06),
    0 2px 2px hsl(var(--shadow-hsl) / 0.06);
  --shadow-2:
    0 1px 1px hsl(var(--shadow-hsl) / 0.05),
    0 2px 2px hsl(var(--shadow-hsl) / 0.05),
    0 4px 4px hsl(var(--shadow-hsl) / 0.05),
    0 8px 8px hsl(var(--shadow-hsl) / 0.05);
  --shadow-3:
    0 2px 2px hsl(var(--shadow-hsl) / 0.04),
    0 4px 4px hsl(var(--shadow-hsl) / 0.04),
    0 8px 8px hsl(var(--shadow-hsl) / 0.04),
    0 16px 16px hsl(var(--shadow-hsl) / 0.04),
    0 32px 32px hsl(var(--shadow-hsl) / 0.04);
  --shadow-inset: inset 0 1px 0 hsl(0 0% 100% / 0.04);

  /* Motion: five durations, five curves. Ease-out on entrances, ease-in on
     exits only; exits run shorter than the entrance they undo. */
  --motion-instant: 80ms;
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;
  --motion-exit: 160ms;
  --ease-instant: cubic-bezier(0.2, 0, 0, 1);
  --ease-fast: cubic-bezier(0, 0, 0, 1);
  --ease-base: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-slow: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);

  --td-carbon: #070909;
  --td-carbon-soft: #0d1112;
  --td-clay: #191b1b;
  --td-clay-raised: #242626;
  --td-bone: #f4eddd;
  --td-bone-soft: #ded3c1;
  --td-ink: #111313;
  --td-ember: #f05432;
  --td-ember-dark: #a42f1f;
  --td-cyan: #2ed9cd;
  /* X-225: was #087d7a, which measures 4.26 on the cream ground it is used on
     (.platform-state "Available"). Darkened to clear 4.5 without changing hue. */
  --td-cyan-dark: #06615f;
  --td-brass: #d7b466;
  --td-muted: #aaa397;
  --td-line: rgba(244, 237, 221, 0.17);
  --td-line-dark: rgba(17, 19, 19, 0.18);
  /* Aliases: the old names stay so nothing that reads them breaks, but they
     now resolve to the tokens above rather than to their own recipes. */
  --td-shadow: var(--shadow-3);
  --td-bubble-texture: url("assets/roman-clay-material.webp");
  --td-ease: var(--ease-base);
  /* Two self-hosted faces, no third-party host of any kind. Bahnschrift,
     Aptos, Aptos Display and Segoe are gone: all four are Windows-only, so
     until now a Mac or iPhone visitor fell through to generic sans-serif and
     the site had no typeface at all on the two platforms we sell apps for.
     --td-display is the house serif and is reserved for h1, h2 and section
     titles; everything else - buttons, eyebrows, chips, body - uses --td-ui. */
  --td-display: "Knight AI+AV", "InterVariable", system-ui, -apple-system, sans-serif;
  --td-ui: "InterVariable", system-ui, -apple-system, sans-serif;
  --td-body: var(--td-ui);
  color-scheme: dark;
}

html {
  scroll-padding-top: 76px;
  background: var(--td-carbon);
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--td-bone);
  background: var(--td-carbon);
  font-family: var(--td-body);
  font-size: var(--text-body);
  line-height: 1.58;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Inter's alternate one and its straight-sided glyph set, the pair Linear
     opts into. The Latin `wght` subset published by fontsource does not carry
     the cv/ss features, so these are inert against the file we ship today and
     become live the moment the full Inter release is dropped in. Optical
     sizing is asked for the same way: this subset has no `opsz` axis, the
     `opsz` build does. */
  font-feature-settings: "cv01", "ss03";
  font-optical-sizing: auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url("assets/roman-clay-material.webp") center top / cover no-repeat;
  opacity: 0.13;
}

::selection {
  color: var(--td-carbon);
  background: var(--td-cyan);
}

a,
button,
input,
textarea,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}

input:not([type="range"]):not([type="radio"]):not([type="checkbox"]),
textarea,
select {
  font: var(--weight-medium) var(--text-body)/1.4 var(--td-body);
  text-align: left;
}

input::placeholder,
textarea::placeholder {
  color: #77746d;
  opacity: 1;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--td-cyan);
  outline-offset: 4px;
}

p,
li {
  text-wrap: pretty;
}

h1,
h2,
h3,
strong,
summary {
  text-wrap: balance;
}

/* The browser's own defaults are outside the ladder: bold is 700 and <small>
   is 0.8333em, which is 13.33px here. Both are pulled onto the tokens at the
   base layer, so any component rule further down still wins. */

/* h1 and h2 are the house serif's whole territory. It ships one weight, so
   the browser is told not to invent a second one. */
h1,
h2 {
  font-family: var(--td-display);
  font-weight: var(--weight-regular);
  font-synthesis-weight: none;
}

h3,
h4,
h5,
h6 {
  font-weight: var(--weight-semibold);
}

strong,
b {
  font-weight: var(--weight-semibold);
}

small {
  font-size: var(--text-caption);
}

/* The product name is one word to a reader. At 375px "Try Talk DAT! now."
   broke as "Try Talk / DAT! now.", which reads as a different product. */
.brand-lock {
  white-space: nowrap;
}

.shell {
  width: min(1240px, calc(100% - 64px));
  margin-inline: auto;
}

.skip-link {
  top: 10px;
  left: 10px;
  z-index: 120;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: var(--radius-md);
  color: var(--td-carbon);
  background: var(--td-cyan);
  font-weight: var(--weight-display);
}

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  border-bottom: 1px solid var(--td-line);
  background: rgba(7, 9, 9, 0.94);
  backdrop-filter: blur(16px) saturate(1.1);
}

.topbar-inner {
  min-height: 74px;
  gap: 32px;
}

.brand {
  min-width: 44px;
  min-height: 48px;
  gap: 12px;
  font: var(--weight-semibold) var(--text-body)/1 var(--td-ui);
  letter-spacing: -0.01em;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
}

.nav {
  gap: 2px;
  color: var(--td-muted);
  font-size: var(--text-body-sm);
}

.nav a,
.nav button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: var(--radius-md);
  /* Nav items are the label role: one weight across the whole bar, so the
     quiet download link does not read as louder than "Try it". */
  font-weight: var(--weight-medium);
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--td-bone);
  background: rgba(244, 237, 221, 0.08);
}

.nav-download {
  margin-left: 6px;
  color: var(--td-carbon) !important;
  background: var(--td-bone);
  font-weight: var(--weight-display);
}

.nav-download:hover,
.nav-download:focus-visible {
  color: var(--td-carbon) !important;
  background: #fff8e9 !important;
}

.nav-signin {
  min-height: 42px;
  margin-left: 4px;
  border: 1px solid rgba(244, 237, 221, 0.3);
  border-radius: var(--radius-md);
}

.nav-menu {
  top: calc(100% + 10px);
  min-width: 210px;
  padding: 8px;
  border: 1px solid var(--td-line);
  border-radius: var(--radius-lg);
  background: #101415;
  box-shadow: var(--td-shadow);
}

.nav-menu a,
.nav-menu button {
  width: 100%;
  min-height: 46px;
  border-radius: var(--radius-md);
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 19px;
  border: 1px solid rgba(244, 237, 221, 0.24);
  border-radius: var(--radius-md);
  color: var(--td-bone);
  background: #15191a;
  box-shadow: none;
  font: var(--weight-semibold) var(--text-body-sm)/1 var(--td-ui);
  letter-spacing: -0.01em;
  text-align: center;
  transition: color var(--motion-fast) var(--ease-fast), background var(--motion-fast) var(--ease-fast), border-color var(--motion-fast) var(--ease-fast), transform var(--motion-base) var(--td-ease), box-shadow var(--motion-base) var(--td-ease);
}

.button:hover:not(:disabled) {
  border-color: rgba(244, 237, 221, 0.58);
  transform: translateY(-2px);
}

.button.primary {
  color: var(--td-carbon);
  border-color: var(--td-ember);
  background: var(--td-ember);
  box-shadow: var(--shadow-3);
}

.button.primary:hover:not(:disabled) {
  border-color: #ff7657;
  background: #ff7657;
  box-shadow: var(--shadow-3);
}

/* 2026-10-14: a forward cue on primary LINKS only, never on an action button, matching the arrows the home page's
   text links already end with ("Try it live", "See every feature"). The store badge and the Mac download button
   keep their own look. It is decoration, so its alternative text is empty and a screen reader does not say
   "right arrow"; the first content line is the fallback for browsers without alternative text. .button::after is
   every button's 1px top highlight, so on these links the arrow takes its place and undoes that box, or it would sit
   as a tiny glyph on the top edge. */
a.button.primary:not(.store-button):not(.mac-download-button)::after {
  content: "\2192";
  content: "\2192" / "";
  position: static;
  top: auto;
  right: auto;
  left: auto;
  height: auto;
  background: none;
  opacity: 1;
  display: inline-block;
  transition: transform var(--motion-base) var(--td-ease);
}

a.button.primary:not(.store-button):not(.mac-download-button):hover::after {
  transform: translateX(3px);
}

.button.small {
  min-height: 44px;
  padding-inline: 16px;
  font-size: var(--text-body-sm);
}

.button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
  box-shadow: none;
}

/* Opening: one physical signal instrument, not a header plus product card. */
.hero {
  min-height: 0;
  padding: 74px 0 0;
  color: var(--td-bone);
  background: var(--td-carbon) !important;
  overflow: clip;
}

.hero-stage {
  position: relative;
  width: min(1600px, 100%);
  min-height: calc(100svh - 74px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(300px, 1.02fr) minmax(370px, 1.15fr) minmax(300px, 0.96fr);
}

.hero-copy,
.hero-writing,
.hero-product {
  position: relative;
  min-width: 0;
  padding: clamp(48px, 5.2vw, 88px) clamp(34px, 4.2vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-copy {
  width: auto;
  color: var(--td-bone);
  background: rgba(7, 9, 9, 0.84);
}

.hero-name {
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--td-brass);
  font: var(--weight-semibold) var(--text-body)/1 var(--td-ui);
}

.hero-name img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
}

.hero h1 {
  max-width: 8ch;
  margin: 0;
  color: var(--td-bone);
  font: var(--weight-regular) var(--text-display-1)/0.92 var(--td-display);
  letter-spacing: -0.035em;
}

.hero h1 span {
  color: var(--td-bone-soft);
  font-weight: var(--weight-semibold);
}

.hero-lead {
  max-width: 38ch;
  margin: 34px 0 0;
  color: #c9c1b5;
  font-size: var(--text-title-4);
  line-height: 1.62;
}

.hero-access {
  max-width: 40ch;
  margin: 20px 0 0;
  color: #9f9a91;
  font-size: var(--text-caption);
  line-height: 1.55;
}

.hero-access strong {
  color: var(--td-cyan);
}

.hero-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-meta {
  margin-top: 34px;
  display: grid;
  gap: 8px;
  color: #9d988f;
  font-size: var(--text-caption);
}

.hero-meta span {
  position: relative;
  padding-left: 15px;
}

.hero-meta span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.64em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--td-cyan);
}

.hero-writing {
  color: var(--td-ink);
  background: var(--td-bone) !important;
  border-inline: 1px solid var(--td-line-dark);
}

.writing-block {
  max-width: 580px;
  margin-inline: auto;
}

.writing-block + .writing-block {
  margin-top: clamp(64px, 10vh, 128px);
}

.writing-block > span {
  display: block;
  margin-bottom: 18px;
  padding-bottom: 11px;
  color: #7d5b22;
  border-bottom: 1px solid rgba(125, 91, 34, 0.44);
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rough-block p {
  margin: 0;
  color: #6c6963;
  font: var(--weight-regular) var(--text-body)/1.75 "Cascadia Mono", Consolas, monospace;
}

.finished-block p {
  margin: 0 0 12px;
  color: var(--td-ink);
  font: var(--weight-semibold) var(--text-title-2)/1.22 var(--td-ui);
  letter-spacing: -0.025em;
}

.finished-block .finished-title {
  margin-bottom: 17px;
  color: #7d5b22;
  font-size: var(--text-title-4);
  letter-spacing: 0.01em;
}

.finished-block ol {
  margin: 0;
  padding-left: 1.35em;
  color: var(--td-ink);
  font: var(--weight-medium) var(--text-body)/1.42 var(--td-ui);
}

.finished-block li {
  padding-left: 0.28em;
}

.finished-block li + li {
  margin-top: 8px;
}

.finished-block li::marker {
  color: var(--td-ember-dark);
  font-weight: var(--weight-display);
}

.finished-block li small {
  color: #5e5a53;
  font: var(--weight-medium) var(--text-body-sm)/1.42 var(--td-body);
}

.finished-block .finished-note {
  margin-top: 18px;
  color: #4f4b44;
  font: var(--weight-semibold) var(--text-body)/1.42 var(--td-ui);
  letter-spacing: -0.01em;
}

.insertion-cursor {
  width: 2px;
  height: 1.05em;
  display: inline-block;
  margin-left: 7px;
  background: var(--td-ember);
  vertical-align: -0.12em;
  animation: td-cursor 1.05s steps(1, end) infinite;
}

.illustration-note {
  max-width: 48ch;
  margin: 38px auto 0;
  color: #5c574e;
  font-size: var(--text-caption);
  line-height: 1.5;
}

.hero-product {
  justify-content: center;
  padding-inline: clamp(24px, 3vw, 46px);
  background: var(--td-clay) url("assets/roman-clay-material.webp") center / cover no-repeat !important;
}

.product-label {
  margin-bottom: clamp(70px, 11vh, 130px);
  color: var(--td-brass);
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-pill {
  width: min(100%, 560px);
  margin-inline: auto;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.52));
}

.hero-pill-link {
  position: relative;
  display: block;
  padding: 11px 8px 42px;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  color: var(--td-bone);
  text-decoration: none;
  transition: transform var(--motion-base) var(--td-ease), filter var(--motion-base) var(--td-ease), border-color var(--motion-base) var(--ease-base), background var(--motion-base) var(--ease-base);
}

.hero-pill-link:hover,
.hero-pill-link:focus-visible {
  border-color: rgba(46, 217, 205, 0.34);
  background: linear-gradient(180deg, rgba(46, 217, 205, 0.08), rgba(46, 217, 205, 0.015));
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.58));
  transform: translateY(-4px);
}

.hero-pill-action {
  position: absolute;
  left: 50%;
  bottom: 4px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid rgba(244, 237, 221, 0.2);
  border-radius: var(--radius-full);
  color: var(--td-bone-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 55%),
    #141819 var(--td-bubble-texture) center / 380px auto;
  box-shadow: var(--shadow-2);
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  white-space: nowrap;
  transform: translateX(-50%);
}

.hero-pill-action b {
  color: var(--td-cyan);
  font-size: var(--text-body);
}

.hero-pill img {
  width: 100%;
  height: auto;
}

.hero-product-meta {
  width: min(100%, 560px);
  margin: 42px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border-block: 1px solid var(--td-line);
}

.hero-product-meta span {
  padding: 14px 10px;
  color: var(--td-bone);
  text-align: center;
}

.hero-product-meta strong,
.hero-product-meta small {
  display: block;
}

.hero-product-meta strong {
  font: var(--weight-medium) var(--text-caption)/1.2 var(--td-ui);
}

.hero-product-meta small {
  margin-top: 4px;
  color: var(--td-muted);
  font-size: var(--text-caption);
}

.route-switch {
  width: min(100%, 360px);
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--td-line);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.route-switch span {
  min-height: 36px;
  display: grid;
  place-items: center;
  color: var(--td-muted);
  font-size: var(--text-caption);
}

.route-switch .active {
  color: var(--td-carbon);
  background: var(--td-cyan);
  font-weight: var(--weight-display);
}

/* What the two routes mean, under the switch: Local by default, Your key optional. */
.route-note {
  width: min(100%, 360px);
  margin: 12px auto 0;
  color: var(--td-muted);
  font-size: var(--text-caption);
  line-height: 1.45;
  text-align: center;
}

.route-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero-signal {
  position: relative;
  z-index: 5;
  width: min(1600px, 100%);
  margin-inline: auto;
  height: 40px;
  overflow: hidden;
  pointer-events: none;
  border-block: 1px solid var(--td-line);
  background: #0b0e0f;
}

.hero-signal::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0 3%, var(--td-ember) 22%, var(--td-brass) 47%, var(--td-cyan) 72%, transparent 97%);
}

.hero-signal span {
  position: absolute;
  top: calc(50% - 4px);
  left: 4%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--td-bone);
  box-shadow: 0 0 0 5px rgba(46, 217, 205, 0.16), var(--shadow-3);
  animation: td-signal 2.8s var(--td-ease) both;
}

.hero-next {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--td-bone-soft);
  border-top: 1px solid var(--td-line);
  background: #0b0e0f;
  font: var(--weight-semibold) var(--text-body-sm)/1 var(--td-ui);
}

@keyframes td-signal {
  from { left: 4%; filter: blur(1px); }
  to { left: calc(96% - 9px); filter: blur(0); }
}

@keyframes td-cursor {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

/* Proof is a ruled instrument readout, not a card grid. */
.proof-reel {
  padding: clamp(86px, 10vw, 148px) 0;
  color: var(--td-bone);
  background: #0c0f10 !important;
}

.proof-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(300px, 1.14fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: end;
  padding-bottom: 52px;
}

.proof-intro h2,
.section-head h2,
.account-copy h2,
.catalog-promo h2,
.close h2,
.security h2 {
  margin: 0;
  font: var(--weight-regular) var(--text-display-1)/0.98 var(--td-display);
  letter-spacing: -0.035em;
}

.proof-intro p,
.section-head p {
  max-width: 58ch;
  margin: 0;
  color: var(--td-muted);
  font-size: var(--text-body);
}

.proof-lanes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--td-line);
}

.proof-lanes article {
  min-width: 0;
  padding: 38px clamp(24px, 3vw, 42px) 42px;
}

.proof-lanes article + article {
  border-left: 1px solid var(--td-line);
}

.proof-lanes h3 {
  max-width: 16ch;
  margin: 0;
  font: var(--weight-semibold) var(--text-title-2)/1.08 var(--td-ui);
  letter-spacing: -0.02em;
}

.proof-lanes p {
  max-width: 38ch;
  margin: 20px 0 30px;
  color: var(--td-muted);
  font-size: var(--text-body);
}

.term-chip {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  margin: 4px 5px 0 0;
  padding: 0 11px;
  border: 1px solid rgba(215, 180, 102, 0.38);
  border-radius: var(--radius-full);
  color: var(--td-brass);
  font-size: var(--text-caption);
}

.recovery-receipt,
.route-receipt {
  max-width: 290px;
  padding: 14px 16px;
  border: 1px solid var(--td-line);
  border-radius: var(--radius-md);
  background: #121617;
}

.recovery-receipt strong,
.recovery-receipt span {
  display: block;
}

.recovery-receipt strong {
  color: var(--td-cyan);
  font-size: var(--text-body-sm);
}

.recovery-receipt span {
  margin-top: 4px;
  color: var(--td-muted);
  font-size: var(--text-caption);
}

.route-receipt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.route-receipt span {
  min-height: 34px;
  display: grid;
  place-items: center;
  color: var(--td-muted);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
}

.route-receipt .active {
  color: var(--td-carbon);
  background: var(--td-cyan);
  font-weight: var(--weight-display);
}

.feature-index {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: var(--td-muted);
  font-size: var(--text-caption);
}

.feature-index a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--td-brass);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The feature deck is one joined instrument: a visible index, one active
   readout, and original signal diagrams. It deliberately avoids ten floating
   cards and never auto-advances underneath the reader. */
.feature-deck {
  padding: clamp(86px, 10vw, 148px) 0;
  color: var(--td-bone);
  background: #111516 !important;
}

.feature-deck-head {
  margin-bottom: clamp(38px, 5vw, 64px);
}

.feature-console {
  --feature-progress: 10%;
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1.66fr);
  border-block: 1px solid var(--td-line);
}

.feature-tabs {
  min-width: 0;
  display: grid;
  align-content: start;
  border-right: 1px solid var(--td-line);
}

.feature-tab {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 16px;
  color: var(--td-muted);
  border: 0;
  border-bottom: 1px solid var(--td-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: var(--weight-semibold) var(--text-body-sm)/1.2 var(--td-ui);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--motion-fast) var(--ease-fast), background-color var(--motion-fast) var(--ease-fast);
}

.feature-tab > span {
  color: #9a968d;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: 0.08em;
}

.feature-tab > strong {
  min-width: 0;
  font: inherit;
}

.feature-tab[aria-selected="true"] {
  color: var(--td-bone);
  background: #171c1d;
  box-shadow: inset -1px 0 0 var(--td-cyan);
}

.feature-tab[aria-selected="true"] > span {
  color: var(--td-cyan);
}

.feature-tab:hover {
  color: var(--td-bone-soft);
  background: #141819;
}

.feature-display {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.feature-progress {
  height: 3px;
  overflow: hidden;
  background: rgba(244, 237, 221, 0.08);
}

.feature-progress span {
  width: var(--feature-progress);
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--td-ember), var(--td-brass), var(--td-cyan));
  transition: width var(--motion-slow) var(--td-ease);
}

.feature-panel {
  min-height: 590px;
  display: grid;
  grid-template-columns: minmax(250px, 0.78fr) minmax(360px, 1.22fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: center;
  padding: clamp(36px, 5vw, 70px);
  outline: none;
}

.feature-panel[hidden] {
  display: none !important;
}

.feature-panel:focus-visible {
  outline: 3px solid var(--td-cyan);
  outline-offset: -5px;
}

.feature-panel.is-entering {
  animation: td-feature-reveal 460ms var(--td-ease) both;
}

.feature-story h3 {
  max-width: 13ch;
  margin: 0;
  font: var(--weight-display) var(--text-display-2)/0.98 var(--td-ui);
  letter-spacing: -0.032em;
}

.feature-story > p {
  max-width: 48ch;
  margin: 24px 0 0;
  color: var(--td-muted);
  font-size: var(--text-body);
}

.feature-facts {
  max-width: 460px;
  margin: 30px 0 0;
  padding: 0;
  border-block: 1px solid var(--td-line);
  list-style: none;
}

.feature-facts li {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 2px;
  color: var(--td-bone-soft);
  font: var(--weight-medium) var(--text-caption)/1.25 var(--td-ui);
}

.feature-facts li + li {
  border-top: 1px solid var(--td-line);
}

.feature-facts li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--td-cyan);
  box-shadow: 0 0 0 3px rgba(46, 217, 205, 0.12);
}

.feature-graphic {
  min-width: 0;
  min-height: 360px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--td-line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(244, 237, 221, 0.045), transparent 38%),
    #090c0d;
}

.feature-graphic svg {
  width: 100%;
  height: auto;
  display: block;
}

.feature-graphic path,
.feature-graphic rect,
.feature-graphic circle {
  vector-effect: non-scaling-stroke;
}

.feature-graphic .fg-screen {
  fill: #0c1011;
  stroke: rgba(244, 237, 221, 0.22);
  stroke-width: 2;
}

.feature-graphic .fg-rule {
  fill: none;
  stroke: rgba(244, 237, 221, 0.24);
  stroke-width: 2;
}

.feature-graphic .fg-live {
  fill: none;
  stroke: var(--td-cyan);
  stroke-width: 4;
}

.feature-graphic .fg-action {
  fill: none;
  stroke: var(--td-ember);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-graphic .fg-brass {
  fill: none;
  stroke: var(--td-brass);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-graphic .fg-wave {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-graphic .fg-paper {
  fill: var(--td-bone);
  stroke: rgba(17, 19, 19, 0.35);
  stroke-width: 2;
}

.feature-graphic .fg-paper-muted {
  fill: #b9ae9c;
  opacity: 0.38;
}

.feature-graphic .fg-ink-rule {
  fill: none;
  stroke: rgba(17, 19, 19, 0.55);
  stroke-width: 3;
  stroke-linecap: round;
}

.feature-graphic .fg-tag {
  fill: #171c1d;
  stroke: rgba(244, 237, 221, 0.25);
  stroke-width: 1;
}

.feature-graphic .fg-tag-live {
  fill: rgba(46, 217, 205, 0.17);
  stroke: var(--td-cyan);
}

.feature-graphic .fg-label,
.feature-graphic .fg-mono,
.feature-graphic .fg-number {
  fill: var(--td-bone-soft);
  font-family: var(--td-ui);
}

.feature-graphic .fg-label {
  font-size: var(--text-caption);
  font-weight: var(--weight-display);
  letter-spacing: 1px;
}

.feature-graphic .fg-label-live {
  fill: var(--td-cyan);
}

.feature-graphic .fg-label-dark {
  fill: var(--td-ink);
}

.feature-graphic .fg-mono {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: var(--text-body-lg);
}

.feature-graphic .fg-number {
  font-size: var(--text-title-3);
  font-weight: var(--weight-display);
}

.feature-graphic .fg-dot {
  fill: var(--td-muted);
}

.feature-graphic .fg-dot-live {
  fill: var(--td-cyan);
}

.feature-graphic .fg-caption-line {
  fill: var(--td-bone);
  opacity: 0.92;
}

.feature-graphic .fg-caption-muted {
  opacity: 0.34;
}

.feature-graphic .fg-vault {
  fill: #101516;
  stroke: rgba(244, 237, 221, 0.42);
  stroke-width: 2;
}

.feature-graphic .fg-vault-dial {
  fill: #090c0d;
  stroke: var(--td-brass);
  stroke-width: 3;
}

.feature-graphic .fg-action-fill {
  fill: var(--td-ember);
}

.feature-graphic .fg-play {
  fill: var(--td-carbon);
}

.feature-graphic .fg-chip {
  fill: #151a1b;
  stroke: rgba(244, 237, 221, 0.5);
  stroke-width: 2;
}

.feature-graphic .fg-tab-live {
  fill: var(--td-cyan);
}

.feature-graphic .fg-tab {
  fill: var(--td-clay-raised);
  stroke: rgba(244, 237, 221, 0.22);
}

.feature-graphic .fg-paper-rule {
  fill: none;
  stroke: rgba(17, 19, 19, 0.32);
  stroke-width: 2;
}

.feature-graphic .fg-pill {
  fill: var(--td-bone);
  stroke: rgba(244, 237, 221, 0.68);
  stroke-width: 2;
}

.feature-graphic .fg-spectrum {
  fill: none;
  stroke: var(--td-cyan-dark);
  stroke-width: 5;
  stroke-linecap: round;
}

.feature-deck-controls {
  min-height: 74px;
  display: grid;
  grid-template-columns: auto auto auto minmax(180px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px clamp(20px, 5vw, 70px);
  border-bottom: 1px solid var(--td-line);
}

.feature-position {
  min-width: 70px;
  margin: 0;
  color: var(--td-muted);
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  text-align: center;
}

.feature-position strong {
  color: var(--td-bone);
}

.feature-all-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
  color: var(--td-brass);
  font: var(--weight-medium) var(--text-caption)/1.2 var(--td-ui);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.feature-deck-note {
  max-width: 78ch;
  margin: 22px 0 0;
  color: var(--td-muted);
  font-size: var(--text-caption);
  line-height: 1.5;
}

@keyframes td-feature-reveal {
  from {
    opacity: 0.35;
    clip-path: inset(0 0 12% 0);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    filter: blur(0);
  }
}

/* Shared section rhythm. */
.demo,
.download,
.account,
.faq,
.proof,
.catalog-promo,
.security {
  padding: clamp(86px, 10vw, 148px) 0;
}

.section-head {
  margin: 0 0 clamp(42px, 6vw, 74px);
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(300px, 1.16fr);
  gap: clamp(38px, 8vw, 116px);
  align-items: end;
}

.demo {
  color: var(--td-bone);
  background: var(--td-carbon) !important;
}

.mobile-demo-intro {
  display: none;
}

.demo-stage {
  display: grid;
  grid-template-columns: minmax(300px, 0.84fr) minmax(420px, 1.16fr);
  border: 1px solid var(--td-line);
  border-radius: var(--radius-lg);
  background: #0b0e0f;
  box-shadow: var(--td-shadow);
  overflow: hidden;
}

/* X-226: 1090 pixels of nothing.
 *
 * Measured on the live page: this column renders 1262px tall because the grid
 * stretches it to match the transcript beside it, while its own content is
 * 172px. `justify-content: center` then parked that 172px in the middle, so
 * the pill floated alone in a vast empty panel and the trigger, which is the
 * thing the section exists to demonstrate, sat below the fold on a laptop.
 *
 * Sticky rather than top-aligned: the right column is genuinely long, and a
 * pill that follows while you read the transcript is worth more than one
 * pinned to a corner. The dead space becomes a behaviour instead of a hole.
 */
.demo-voice {
  padding: clamp(34px, 5vw, 70px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: start;
  position: sticky;
  top: 88px;
  border-right: 1px solid var(--td-line);
  background: #0e1213;
}

.demo-pill-shell {
  width: min(100%, 500px);
  margin-inline: auto;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.42));
}

.demo-pill-shell::before {
  transform-origin: center;
  transition: filter var(--motion-base) var(--ease-base), opacity var(--motion-base) var(--ease-base);
}

/* The website Pill follows the actual capture lifecycle. Setup is visibly
   grey and pending; only a live microphone earns full colour and motion. */
.demo-pill-shell.starting {
  transform: scaleX(0.98);
  filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.46));
}

.demo-pill-shell.starting::before {
  animation: td-pill-initializing 920ms ease-in-out infinite;
  filter: grayscale(1) saturate(0) brightness(0.68) contrast(0.92);
}

.demo-pill-shell.listening {
  transform: scaleX(1.13);
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 25px rgba(46, 217, 205, 0.42));
}

.demo-pill-shell.listening::before {
  animation: td-pill-listening 1.16s ease-in-out infinite;
  filter: grayscale(0) saturate(1.18) brightness(1.06);
}

/* A finish change gets one contained spectrum pass. It is a confirmation of
   the choice, not a new microphone or processing state. */
.demo-pill-shell.finish-swap::after {
  opacity: 1;
  animation: td-pill-finish-swap 860ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes td-pill-initializing {
  0%, 100% {
    opacity: 0.56;
    transform: scaleX(0.975);
    filter: grayscale(1) saturate(0) brightness(0.58) contrast(0.9);
  }
  50% {
    opacity: 0.86;
    transform: scaleX(1);
    filter: grayscale(1) saturate(0) brightness(0.78) contrast(0.96);
  }
}

@keyframes td-pill-listening {
  0%, 100% {
    transform: scaleY(var(--td-pill-live-floor, 1));
    filter: grayscale(0) saturate(var(--td-pill-live-sat-low, 1.08)) brightness(var(--td-pill-live-light, 1));
  }
  50% {
    transform: scaleY(var(--td-pill-live-peak, 1.075));
    filter: grayscale(0) saturate(var(--td-pill-live-sat-high, 1.34)) brightness(var(--td-pill-live-light, 1.08));
  }
}

@keyframes td-pill-finish-swap {
  0% {
    opacity: 0;
    background-position: 130% 0;
    transform: scaleX(0.985);
  }
  18% { opacity: 0.98; }
  72% { opacity: 0.76; }
  100% {
    opacity: 0;
    background-position: -130% 0;
    transform: scaleX(1);
  }
}

.meter {
  width: min(100%, 460px);
  margin: 30px auto 0;
}

/* X-226: two labels sharing a narrow column, each wrapping to two lines.
 *
 * "Ready when you are" and "Microphone is off" were pushed to opposite ends of
 * a ~500px column by space-between, leaving each about 240px, so both broke
 * mid-phrase and the pair read as four ragged lines. Stacking them is what a
 * status readout wants anyway: state first, detail under it.
 */
.demo-readout {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: var(--td-muted);
  font-size: var(--text-caption);
  text-wrap: balance;
}

.demo-readout strong {
  color: var(--td-bone);
  font-family: var(--td-ui);
}

.demo-controls {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1.25fr 1fr auto;
  gap: 9px;
}

.hold-hint,
.privacy-note {
  color: var(--td-muted);
  font-size: var(--text-caption);
  line-height: 1.55;
}

    /* X-477: the consent gate. Sized to be read, not to be a wall. */
    .demo-consent {
      border: 1px solid var(--rule, rgba(0,0,0,.16));
      border-radius: 12px;
      padding: 16px 18px;
      margin: 0 0 14px;
      background: rgba(255, 255, 255, .04);
      text-align: left;
      max-width: 44ch;
    }
    .demo-consent[hidden] { display: none !important; }
    .demo-consent-lead { margin: 0 0 8px; font-size: 15px; }
    .demo-consent-body { margin: 0 0 12px; font-size: 14px; opacity: .82; line-height: 1.5; }
    .demo-consent-accept {
      display: flex; gap: 9px; align-items: flex-start;
      font-size: 13.5px; line-height: 1.45; margin: 0 0 12px; cursor: pointer;
    }
    .demo-consent-accept input { margin-top: 3px; flex: none; }
    .demo-consent button[disabled] { opacity: .45; cursor: not-allowed; }

.mic-route-note {
  margin: 16px 0 0;
  padding-left: 11px;
  color: var(--td-muted);
  border-left: 2px solid color-mix(in srgb, var(--td-cyan) 55%, transparent);
  font-size: var(--text-caption);
  line-height: 1.5;
}

.mic-permission-note,
.install-notes details,
.faq-item {
  border-block: 1px solid var(--td-line);
}

.mic-permission-note {
  margin-top: 24px;
  padding: 13px 16px;
  color: var(--td-muted);
  font-size: var(--text-caption);
}

.mic-permission-note summary,
.install-notes summary,
.faq-item summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
}

.mic-permission-note summary::-webkit-details-marker,
.install-notes summary::-webkit-details-marker,
.faq-item summary::-webkit-details-marker {
  display: none;
}

.mic-permission-note summary::after,
.install-notes summary::after,
.faq-item summary::after {
  content: "+";
  flex: none;
  color: currentColor;
  font: var(--weight-semibold) var(--text-title-3)/1 var(--td-ui);
}

.mic-permission-note[open] summary::after,
.install-notes details[open] summary::after,
.faq-item[open] summary::after {
  content: "–";
}

.mic-permission-note p {
  margin: 8px 0 4px;
}

.transcript-pane {
  min-height: 610px;
  padding: clamp(30px, 4.6vw, 64px);
  background: #090c0d;
}

.transcript-top {
  gap: 14px;
}

.transcript-top h3,
.finish-anything h3 {
  font-family: var(--td-ui);
}

.finish-switch {
  min-height: 44px;
  border-radius: var(--radius-md);
}

.transcript-pane > .finish-switch {
  align-self: flex-start;
  margin-top: 18px;
}

.finish-side {
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  text-align: center;
}

.transcript-output {
  min-height: 180px;
  margin-top: 28px;
  padding: 22px 0;
  color: var(--td-bone);
  border-block: 1px solid var(--td-line);
  font-size: var(--text-title-3);
  line-height: 1.52;
}

.transcript-actions {
  gap: 9px;
}

.finish-anything {
  margin-top: 34px;
  padding: 22px;
  border: 1px solid var(--td-line);
  border-radius: var(--radius-lg);
  background: #101415;
}

.finish-anything p {
  color: var(--td-muted);
  font-size: var(--text-body-sm);
}

.finish-anything textarea,
.account-fields input,
.waitlist-form input {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(244, 237, 221, 0.24);
  border-radius: var(--radius-md);
  color: #f4eddd;
  background: #080b0c;
  box-shadow: var(--shadow-inset);
  line-height: 1.4;
  caret-color: #2ed9cd;
  transition: border-color var(--motion-fast) var(--ease-fast), box-shadow var(--motion-fast) var(--ease-fast), background-color var(--motion-fast) var(--ease-fast);
}

.finish-anything textarea {
  min-height: 112px;
  padding: 15px;
  font-size: var(--text-body);
  line-height: 1.55;
  resize: vertical;
}

.finish-anything textarea::placeholder,
.account-fields input::placeholder,
.waitlist-form input::placeholder {
  color: #9b968d;
}

.finish-anything textarea:focus-visible,
.account-fields input:focus-visible,
.waitlist-form input:focus-visible {
  border-color: #2ed9cd;
  box-shadow: 0 0 0 1px rgba(46, 217, 205, 0.3);
}

.account-fields input[aria-invalid="true"],
.waitlist-form input[aria-invalid="true"],
.finish-anything textarea[aria-invalid="true"] {
  border-color: #f05432;
  box-shadow: 0 0 0 1px rgba(240, 84, 50, 0.52);
}

.account-fields input:disabled,
.waitlist-form input:disabled,
.finish-anything textarea:disabled {
  color: #aaa69e;
  border-color: rgba(244, 237, 221, 0.14);
  background: #111415;
  cursor: not-allowed;
  -webkit-text-fill-color: #aaa69e;
  opacity: 1;
}

.account-fields input:-webkit-autofill,
.waitlist-form input:-webkit-autofill,
#desktopHandoffEmail:-webkit-autofill {
  -webkit-text-fill-color: #f4eddd;
  box-shadow: inset 0 0 0 1000px #080b0c;
  caret-color: #2ed9cd;
}

.privacy-note {
  margin-top: 22px;
}

.desktop-handoff[hidden] {
  display: none;
}

.desktop-handoff {
  position: relative;
  margin-top: 24px;
  padding: clamp(22px, 3vw, 32px);
  overflow: hidden;
  border: 1px solid rgba(46, 217, 205, 0.38);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(145deg, rgba(46, 217, 205, 0.11), transparent 42%),
    var(--td-clay) var(--td-bubble-texture) center / cover;
  box-shadow: var(--shadow-3);
}

.desktop-handoff::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.06), transparent 28% 74%, rgba(0, 0, 0, 0.12));
}

.desktop-handoff > * {
  position: relative;
}

.desktop-handoff-kicker {
  margin: 0 0 8px;
  color: var(--td-cyan);
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.desktop-handoff h3 {
  max-width: 21ch;
  margin: 0;
  color: var(--td-bone);
  font: var(--weight-display) var(--text-title-1)/1.05 var(--td-ui);
  letter-spacing: -0.025em;
}

#desktopHandoffForm {
  margin-top: 24px;
  display: grid;
  gap: 14px;
}

.desktop-email-field {
  display: grid;
  gap: 8px;
}

.desktop-email-label,
#desktopHandoffForm legend {
  color: var(--td-bone-soft);
  font: var(--weight-medium) var(--text-caption)/1.25 var(--td-ui);
}

#desktopHandoffEmail {
  width: 100%;
  min-height: 54px;
  padding: 12px 15px;
  border: 1px solid rgba(244, 237, 221, 0.28);
  border-radius: var(--radius-md);
  color: var(--td-bone);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 44%),
    #080b0c var(--td-bubble-texture) center / 540px auto;
  box-shadow: var(--shadow-inset);
  font: var(--weight-medium) var(--text-body)/1.4 var(--td-body);
  caret-color: #2ed9cd;
  transition: border-color var(--motion-fast) var(--ease-fast), box-shadow var(--motion-fast) var(--ease-fast), background-color var(--motion-fast) var(--ease-fast);
}

#desktopHandoffEmail::placeholder {
  color: #9b968d;
}

#desktopHandoffEmail[aria-invalid="true"] {
  border-color: var(--td-ember);
  box-shadow: 0 0 0 1px rgba(240, 84, 50, 0.52);
}

#desktopHandoffForm fieldset {
  min-width: 0;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
}

#desktopHandoffForm legend {
  margin-bottom: 9px;
}

.desktop-platform-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.desktop-platform-options label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.desktop-platform-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.desktop-platform-options span {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border: 1px solid rgba(244, 237, 221, 0.24);
  border-radius: var(--radius-md);
  color: var(--td-bone);
  background-color: #15191a;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 52%, rgba(0, 0, 0, 0.07));
  box-shadow: var(--shadow-2);
  font: var(--weight-semibold) var(--text-body-sm)/1.15 var(--td-ui);
  text-align: center;
  transition: transform var(--motion-fast) var(--td-ease), border-color var(--motion-fast) var(--ease-fast), box-shadow var(--motion-fast) var(--ease-fast);
}

.desktop-platform-options span small {
  margin-top: 4px;
  color: var(--td-muted);
  font: var(--weight-regular) var(--text-caption)/1.2 var(--td-body);
}

.desktop-platform-options label:hover span {
  transform: translateY(-1px);
  border-color: rgba(244, 237, 221, 0.5);
  box-shadow: var(--shadow-2);
}

.desktop-platform-options input:focus-visible + span {
  outline: 3px solid var(--td-cyan);
  outline-offset: 3px;
}

.desktop-platform-options input:checked + span {
  color: var(--td-carbon);
  border-color: #7adfd7;
  background-color: #6bd8d0;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 48%, rgba(0, 0, 0, 0.055));
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.desktop-platform-options input:checked + span small {
  color: rgba(7, 9, 9, 0.72);
}

#desktopHandoffSubmit {
  width: 100%;
  min-height: 54px;
  margin-top: 4px;
}

.desktop-handoff-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.desktop-handoff-privacy,
.desktop-handoff-status {
  margin: 13px 0 0;
  color: var(--td-muted);
  font-size: var(--text-caption);
  line-height: 1.48;
}

.desktop-handoff-status:not(:empty) {
  color: var(--td-bone-soft);
}

.desktop-handoff-fallback {
  width: 100%;
  margin-top: 14px;
}

.desktop-handoff-fallback[hidden] {
  display: none;
}

/* Install and plan choice. */
.download {
  color: var(--td-ink);
  background: var(--td-bone) !important;
}

.download .section-head h2,
.download .download-copy h3 {
  color: var(--td-ink);
}

.download .section-head p,
.download-copy > p {
  color: #5f5a51;
}

.download-stage {
  display: grid;
  grid-template-columns: minmax(260px, 0.74fr) minmax(480px, 1.26fr);
  gap: clamp(58px, 8vw, 120px);
  align-items: start;
}

.download-visual {
  position: sticky;
  top: 116px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.download-visual img {
  width: min(100%, 430px);
  filter: drop-shadow(0 34px 40px rgba(17, 19, 19, 0.24));
}

.download-copy {
  min-width: 0;
  text-align: left !important;
}

.download-copy h3 {
  max-width: 14ch;
  margin: 0 0 26px;
  font: var(--weight-display) var(--text-display-2)/0.98 var(--td-ui);
  letter-spacing: -0.035em;
}

.download-copy > p {
  max-width: 66ch;
  font-size: var(--text-body);
}

.install-notes {
  margin-top: 30px;
  border-top: 1px solid var(--td-line-dark);
}

.install-notes details {
  border-color: var(--td-line-dark);
}

.install-notes summary {
  min-height: 58px;
  color: var(--td-ink);
  font: var(--weight-semibold) var(--text-body)/1.25 var(--td-ui);
}

.install-notes p {
  max-width: 70ch;
  margin: 0 0 20px;
  color: #625d54;
  font-size: var(--text-body-sm);
}

.founder-offer {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--td-line-dark);
}

.founder-offer article {
  min-width: 0;
  padding: 28px 24px 30px;
}

.founder-offer article + article {
  border-left: 1px solid var(--td-line-dark);
}

.founder-offer article.featured {
  background: #e8ddca;
}

.founder-offer article > span {
  display: block;
  color: #5c554a; /* X-225: was #6a6359, 4.41 on the featured card. */
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.founder-offer article > strong {
  display: block;
  margin-top: 12px;
  color: var(--td-ink);
  font: var(--weight-display) var(--text-title-1)/1 var(--td-ui);
  letter-spacing: -0.03em;
}

.founder-offer article > strong small {
  color: #5c574e;
  font-size: 0.48em;
  font-weight: var(--weight-display);
}

.founder-offer article p {
  margin: 18px 0 0;
  color: #5b574f;
  font-size: var(--text-caption);
  line-height: 1.58;
}

#checkoutAvailability {
  grid-column: 1 / -1;
  display: block;
  padding: 16px 0 0;
  color: #6b655b;
  font-size: var(--text-caption);
}

.download-buttons {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.download-buttons .button {
  min-height: 56px;
  color: var(--td-bone);
  border-color: var(--td-ink);
  background: var(--td-ink);
}

.download-buttons .store-button {
  color: var(--td-carbon);
  border-color: var(--td-brass);
  background: var(--td-brass);
}

.store-button span {
  color: inherit;
  opacity: 0.75;
}

.release-status {
  margin-top: 20px;
  color: #625d54;
  font-size: var(--text-caption);
  overflow-wrap: anywhere;
}

.integrity-links {
  margin-top: 15px;
  gap: 9px 18px;
}

.integrity-links a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  color: var(--td-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.platform-list {
  margin-top: 74px;
  border-color: var(--td-line-dark);
}

.platform-row {
  min-height: 88px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  border-color: var(--td-line-dark);
}

.platform-row p {
  color: #625d54;
  font-size: var(--text-body-sm);
}

.platform-state {
  color: var(--td-cyan-dark);
  font-size: var(--text-caption);
}

/* Business, account, FAQs, proof, close. */
#business {
  padding: clamp(82px, 9vw, 132px) 0;
  color: var(--td-bone);
  background: #101415 !important;
}

.business-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.8fr);
  gap: clamp(46px, 8vw, 110px);
  align-items: center;
}

.business-copy {
  max-width: 680px;
}

.business-kicker,
.business-eyebrow {
  margin: 0 0 16px;
  color: var(--td-brass) !important;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

#business h2 {
  max-width: 12ch;
  margin: 0;
  font: var(--weight-regular) var(--text-display-2)/1 var(--td-display);
  letter-spacing: -0.035em;
}

#business p {
  color: var(--td-muted);
}

.business-copy > p:not(.business-kicker) {
  max-width: 62ch;
  margin: 24px 0 0;
}

.business-detail {
  font-size: var(--text-body-sm);
}

.business-detail strong {
  color: var(--td-bone);
}

.business-chips {
  margin: 28px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.business-card {
  position: relative;
  isolation: isolate;
  padding: clamp(26px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(244, 237, 221, 0.2);
  border-radius: var(--radius-xl);
  background-color: #13191a;
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), transparent 48%, rgba(0, 0, 0, 0.18)),
    var(--td-bubble-texture);
  background-size: auto, 420px auto;
  background-blend-mode: normal, soft-light;
  box-shadow: var(--shadow-3);
}

.business-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% auto auto 55%;
  width: 260px;
  height: 180px;
  border-radius: 50%;
  background: rgba(46, 217, 205, 0.12);
  filter: blur(48px);
  pointer-events: none;
}

.business-card h3 {
  margin: 0;
  font: var(--weight-display) var(--text-title-1)/1.04 var(--td-ui);
  letter-spacing: -0.025em;
}

.business-seat-row {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.business-seat-row label {
  color: var(--td-bone);
  font-weight: var(--weight-display);
}

#bizSeatNumber {
  width: 88px;
  min-height: 48px;
  padding: 0 10px;
  border: 1px solid rgba(244, 237, 221, 0.3);
  border-radius: var(--radius-lg);
  color: #f4eddd;
  background: #090d0e;
  box-shadow: var(--shadow-inset);
  font: var(--weight-semibold) var(--text-body)/1 var(--td-ui);
  text-align: center;
  caret-color: #2ed9cd;
}

#bizSeatNumber:focus-visible,
#bizSeats:focus-visible {
  outline: 3px solid var(--td-cyan);
  outline-offset: 3px;
}

#bizSeatNumber[aria-invalid="true"] {
  border-color: var(--td-ember);
  box-shadow: 0 0 0 1px var(--td-ember);
}

#bizSeats {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--td-cyan);
  cursor: pointer;
  touch-action: manipulation;
}

#bizSeats::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid rgba(244, 237, 221, 0.18);
  border-radius: var(--radius-full);
  background: #090d0e;
  box-shadow: var(--shadow-inset);
}

#bizSeats::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -10px;
  -webkit-appearance: none;
  border: 1px solid #8bf1e8;
  border-radius: 50%;
  background: #2ed9cd;
  box-shadow: var(--shadow-2);
}

#bizSeats::-moz-range-track {
  height: 6px;
  border: 1px solid rgba(244, 237, 221, 0.18);
  border-radius: var(--radius-full);
  background: #090d0e;
  box-shadow: var(--shadow-inset);
}

#bizSeats::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 1px solid #8bf1e8;
  border-radius: 50%;
  background: #2ed9cd;
  box-shadow: var(--shadow-2);
}

.business-help {
  margin: 6px 0 0;
  font-size: var(--text-caption);
}

.business-price {
  margin: 24px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.business-price > div {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(244, 237, 221, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(5, 8, 9, 0.5);
  box-shadow: var(--shadow-inset);
}

.business-price span,
.business-price small {
  display: block;
  color: var(--td-muted);
  font-size: var(--text-caption);
}

.business-price strong {
  display: block;
  margin: 5px 0 2px;
  color: var(--td-bone);
  font: var(--weight-semibold) var(--text-title-4)/1.1 var(--td-ui);
  overflow-wrap: anywhere;
}

.business-card .button {
  width: 100%;
}

.business-status {
  min-height: 2.7em;
  margin: 14px 4px 0;
  font-size: var(--text-caption);
  line-height: 1.45;
}

.guest-buy-line .linklike {
  min-height: 44px;
  margin-block: -10px;
  padding-block: 10px;
}

.statement[aria-label="Product promise"] {
  padding: 62px 0;
  color: var(--td-ink);
  background: var(--td-bone) !important;
  border-block: 1px solid var(--td-line-dark);
}

.statement-inner {
  min-height: 0;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: clamp(34px, 7vw, 94px);
  align-items: center;
}

.statement-mark {
  width: 110px;
}

.statement-inner h2 {
  max-width: 22ch;
  margin: 0;
  color: var(--td-ink);
  font: var(--weight-regular) var(--text-display-1)/1 var(--td-display);
  letter-spacing: -0.035em;
}

.account {
  color: var(--td-bone);
  background: #0a0d0e !important;
}

.account-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(440px, 1.2fr);
  gap: clamp(56px, 9vw, 132px);
  align-items: start;
}

.account-copy h2 {
  max-width: 9ch;
  color: var(--td-bone);
}

.account-copy > p,
.beta-notice p,
.waitlist p,
.account-facts {
  color: var(--td-muted);
}

.beta-notice {
  margin-top: 34px;
  padding: 22px 0;
  border-block: 1px solid var(--td-line);
  background: transparent;
}

.beta-notice strong {
  color: var(--td-cyan);
  font-family: var(--td-ui);
}

.account-facts {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.account-facts li {
  padding: 13px 0;
  border-bottom: 1px solid var(--td-line);
  font-size: var(--text-body-sm);
}

.account-facts strong {
  color: var(--td-bone);
}

.waitlist {
  margin-top: 40px;
  padding: 0;
  border: 0;
  background: transparent;
}

.waitlist h3 {
  margin: 0;
  font: var(--weight-semibold) var(--text-title-3)/1.12 var(--td-ui);
}

.waitlist-form {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.waitlist-form input,
.account-fields input {
  min-height: 54px;
  padding: 12px 15px;
}

.account-panel {
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid rgba(46, 217, 205, 0.38);
  border-radius: var(--radius-lg);
  background: #0d1415;
  box-shadow: var(--td-shadow);
}

.account-panel h3 {
  margin: 0;
  font: var(--weight-semibold) var(--text-title-3)/1.1 var(--td-ui);
}

.account-fields {
  gap: 18px;
}

.account-fields label {
  display: grid;
  gap: 8px;
  color: var(--td-muted);
  font-size: var(--text-caption);
  line-height: 1.35;
}

.account-fields input {
  margin-top: 0;
}

.account-actions {
  gap: 9px;
}

.account-actions .button,
.waitlist-form .button {
  min-height: 54px;
}

.finish-switch .finish-side {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.renewal-terms {
  border-left: 1px solid var(--td-ember);
  border-radius: 0;
  background: rgba(240, 84, 50, 0.06);
}

.faq {
  color: var(--td-ink);
  background: var(--td-bone) !important;
}

.faq .section-head h2 {
  color: var(--td-ink);
}

.faq .section-head p {
  color: #625d54;
}

.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(42px, 8vw, 110px);
  border-top: 1px solid var(--td-line-dark);
}

.faq-item {
  border-color: var(--td-line-dark);
}

.faq-item summary {
  min-height: 74px;
  color: var(--td-ink);
  font: var(--weight-semibold) var(--text-body)/1.3 var(--td-ui);
}

.faq-item p {
  margin: -4px 0 26px;
  color: #5f5a51;
  font-size: var(--text-body-sm);
}

.faq-item a {
  color: var(--td-ember-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.proof {
  color: var(--td-bone);
  background: #0d1011 !important;
}

.proof-list {
  border-top: 1px solid var(--td-line);
}

.proof-row {
  min-height: 150px;
  display: grid;
  grid-template-columns: minmax(220px, 0.74fr) minmax(320px, 1.26fr);
  gap: clamp(40px, 8vw, 116px);
  align-items: center;
  border-bottom: 1px solid var(--td-line);
}

.proof-row h3 {
  margin: 0;
  font: var(--weight-semibold) var(--text-title-2)/1.08 var(--td-ui);
  letter-spacing: -0.02em;
}

.proof-row p {
  max-width: 64ch;
  margin: 0;
  color: var(--td-muted);
}

.catalog-promo {
  color: var(--td-ink);
  background: var(--td-bone) !important;
}

.catalog-promo-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(48px, 9vw, 130px);
  align-items: end;
}

.catalog-promo h2 {
  max-width: 12ch;
  color: var(--td-ink);
}

.catalog-promo p {
  max-width: 68ch;
  margin: 28px 0 0;
  color: #5f5a51;
}

.catalog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.catalog-actions .button {
  color: var(--td-bone);
  border-color: var(--td-ink);
  background: var(--td-ink);
}

.catalog-actions .primary {
  color: var(--td-carbon);
  border-color: var(--td-brass);
  background: var(--td-brass);
}

.close {
  padding: clamp(92px, 12vw, 170px) 0;
  color: var(--td-bone);
  /* X-225: cream on #f05432 measures 2.99 against its own text. That fails
     body text at any size, and only scrapes the large-text line for the
     heading, so the whole closing pitch was the least readable thing on the
     page. The darker ember the palette already carries takes it past 6:1
     without leaving the brand's colour family. */
  background: var(--td-ember-dark) !important;
}

.close-inner {
  max-width: 960px;
}

.close h2 {
  max-width: 12ch;
  color: var(--td-bone);
}

.close p {
  max-width: 56ch;
  margin: 28px auto 0;
  color: rgba(244, 237, 221, 0.88);
  font-size: var(--text-body);
}

.close .button {
  margin-top: 30px;
  color: var(--td-carbon);
  border-color: var(--td-bone);
  background: var(--td-bone);
}

.security {
  color: var(--td-bone);
  background: #080a0b !important;
}

.security h2 {
  max-width: 13ch;
}

.security-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--td-line);
}

.security-grid article {
  padding: 34px clamp(22px, 3vw, 38px) 38px;
}

.security-grid article + article {
  border-left: 1px solid var(--td-line);
}

.security-grid h3 {
  margin: 0;
  font: var(--weight-semibold) var(--text-title-4)/1.1 var(--td-ui);
}

.security-grid p {
  margin: 18px 0 0;
  color: var(--td-muted);
  font-size: var(--text-body-sm);
}

.security-link {
  margin: 28px 0 0;
}

.security-link a {
  color: var(--td-cyan);
  text-decoration: underline;
  text-underline-offset: 4px;
}

footer {
  color: var(--td-muted);
  border-top: 1px solid var(--td-line);
  background: #050707;
}

footer .shell {
  min-height: 112px;
  padding: 28px 0 92px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  font-size: var(--text-caption);
}

footer a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--td-bone-soft);
}

.footer-helm {
  min-width: 44px;
  min-height: 44px;
  margin: -12px 2px -12px -12px;
}

/* The working music and clay systems become one calm lower instrument rail. */
.music-chip,
.clay-picker {
  z-index: 90;
  bottom: 14px;
  min-height: 48px;
  border: 1px solid rgba(244, 237, 221, 0.2);
  background: #111516;
  box-shadow: var(--shadow-3);
  backdrop-filter: none;
}

.music-chip {
  left: 50%;
  gap: 7px;
  padding: 7px 10px;
  border-radius: var(--radius-lg);
  transform: translateX(-50%);
}

.music-disc {
  width: 30px;
  height: 30px;
  box-shadow: inset 0 0 0 8px #0d1011;
}

.music-label {
  display: none;
  color: var(--td-bone-soft);
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.music-chip.is-muted-for-mic .music-disc {
  animation: none;
  filter: grayscale(1) brightness(0.72);
}

.music-chip.is-muted-for-mic .music-label {
  color: var(--td-cyan);
}

.music-toggle,
.music-skip {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
}

.music-volume {
  min-height: 44px;
}

.clay-picker {
  right: 14px;
  gap: 2px;
  padding: 6px;
  border-radius: var(--radius-lg);
}

.clay-dot {
  width: 44px;
  height: 44px;
  padding: 14px;
  border-width: 1px;
  background-clip: content-box;
}

.clay-dot.is-active {
  border-color: var(--td-bone);
}

.demo-limit-dialog {
  border-radius: var(--radius-lg);
}

.demo-limit-surface {
  border-radius: var(--radius-lg);
}

/* Studio control material.
   Actions use a restrained mineral finish: tailored corners, a hairline lit
   edge, compact physical depth, and only a trace of the Roman-clay grain.
   Capsules are reserved for status and genuinely segmented controls. */
.button {
  --bubble-fill: #15191a;
  --bubble-ink: var(--td-bone);
  --bubble-border: rgba(244, 237, 221, 0.22);
  --bubble-floor: rgba(0, 0, 0, 0.56);
  --bubble-glow: rgba(0, 0, 0, 0.2);
  position: relative;
  isolation: isolate;
  min-height: 50px;
  max-width: 100%;
  padding: 0.74rem 1.25rem;
  overflow: hidden;
  border-color: var(--bubble-border);
  border-radius: var(--radius-lg);
  color: var(--bubble-ink);
  background-color: var(--bubble-fill);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095) 0%, rgba(255, 255, 255, 0.018) 48%, rgba(0, 0, 0, 0.1) 100%),
    radial-gradient(circle at 18% -80%, rgba(255, 255, 255, 0.11), transparent 58%);
  background-position: center;
  background-size: auto;
  background-blend-mode: normal, soft-light;
  box-shadow: var(--shadow-2);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  overflow-wrap: anywhere;
  touch-action: manipulation;
  user-select: none;
  vertical-align: middle;
  transition: color var(--motion-fast) var(--ease-fast),
    background-color var(--motion-fast) var(--ease-fast),
    border-color var(--motion-fast) var(--ease-fast),
    filter var(--motion-fast) var(--ease-fast),
    transform var(--motion-base) var(--td-ease),
    box-shadow var(--motion-base) var(--td-ease);
}

.button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: var(--radius-md);
  background: var(--td-bubble-texture) center / 520px auto;
  opacity: 0.035;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.button::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 12px;
  left: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  opacity: 0.62;
  pointer-events: none;
}

.button.primary {
  --bubble-fill: #f1e8d6;
  --bubble-ink: var(--td-carbon);
  --bubble-border: #fff8e9;
  --bubble-floor: #a99875;
  --bubble-glow: rgba(215, 180, 102, 0.16);
}

.button.recording {
  --bubble-fill: #b93e2c;
  --bubble-ink: var(--td-bone);
  --bubble-border: #e76b52;
  --bubble-floor: #6c1d15;
  --bubble-glow: rgba(185, 62, 44, 0.22);
}

.button.small {
  min-height: 44px;
  padding: 0.6rem 1rem;
}

.download-buttons .button,
.catalog-actions .button {
  --bubble-fill: var(--td-ink);
  --bubble-ink: var(--td-bone);
  --bubble-border: #343838;
  --bubble-floor: #040606;
}

.download-buttons .store-button,
.catalog-actions .primary {
  --bubble-fill: #dfc98f;
  --bubble-ink: var(--td-carbon);
  --bubble-border: #f2deb0;
  --bubble-floor: #8e7848;
  --bubble-glow: rgba(137, 108, 47, 0.14);
}

.download-buttons .store-button {
  min-height: 62px;
  align-items: center;
  justify-content: center;
  padding-block: 0.72rem;
  text-align: center;
}

.download-buttons .store-button span {
  width: 100%;
  text-align: center;
}

.close .button {
  --bubble-fill: var(--td-bone);
  --bubble-ink: var(--td-carbon);
  --bubble-border: #fffaf0;
  --bubble-floor: #b8aa91;
  --bubble-glow: rgba(87, 32, 20, 0.16);
}

/* Older component shorthands carry more specificity. Reapply the restrained
   material at matching specificity so every action has one authored finish. */
.button,
.button.primary,
.button.recording,
.download-buttons .button,
.download-buttons .store-button,
.download-copy .download-buttons .button,
.download-copy .download-buttons .store-button,
.catalog-actions .button,
.catalog-actions .primary,
.close .button {
  color: var(--bubble-ink);
  border: 1px solid var(--bubble-border);
  background-color: var(--bubble-fill);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095) 0%, rgba(255, 255, 255, 0.018) 48%, rgba(0, 0, 0, 0.1) 100%),
    radial-gradient(circle at 18% -80%, rgba(255, 255, 255, 0.11), transparent 58%);
  background-position: center;
  background-size: auto;
  background-blend-mode: normal, soft-light;
  box-shadow: var(--shadow-2);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--bubble-border) 72%, white);
    background-color: color-mix(in srgb, var(--bubble-fill) 95%, white);
    box-shadow: var(--shadow-3);
    transform: translateY(-1px);
  }

  /* Match the extra class in the legacy primary hover rule. */
  .button.primary:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--bubble-border) 72%, white);
    background-color: color-mix(in srgb, var(--bubble-fill) 95%, white);
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.025) 48%, rgba(0, 0, 0, 0.09) 100%),
      radial-gradient(circle at 18% -80%, rgba(255, 255, 255, 0.13), transparent 58%);
    box-shadow: var(--shadow-3);
    transform: translateY(-1px);
  }
}

/* On a short laptop viewport the full-width player used to cover the hero CTA.
   Keep a compact fixed player beside the theme rail so music never disappears
   at the bottom of a long page. */
@media (min-width: 721px) and (max-height: 820px),
       (min-width: 721px) and (max-width: 1120px) {
  body {
    position: relative;
    padding-bottom: 70px;
  }

  .music-chip {
    position: fixed;
    right: 14px;
    left: auto;
    bottom: 84px;
    transform: none;
  }

  .music-title,
  .music-volume {
    display: none;
  }

  .music-label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

.button:active:not(:disabled) {
  background-color: color-mix(in srgb, var(--bubble-fill) 97%, black);
  box-shadow: var(--shadow-1);
  transform: translateY(1px);
}

.button.primary:active:not(:disabled) {
  background-color: color-mix(in srgb, var(--bubble-fill) 97%, black);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.11));
  box-shadow: var(--shadow-1);
  transform: translateY(1px);
}

.button:focus-visible {
  outline: 3px solid var(--td-cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--td-carbon), var(--shadow-2);
}

.button:disabled {
  --bubble-fill: #111516;
  --bubble-ink: #9d9990;
  --bubble-border: rgba(244, 237, 221, 0.14);
  --bubble-floor: rgba(0, 0, 0, 0.42);
  --bubble-glow: transparent;
  opacity: 1;
  filter: none;
  cursor: not-allowed;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.12));
  box-shadow: var(--shadow-inset);
  transform: none;
}

.button[aria-busy="true"] {
  cursor: progress;
}

/* Give every action cluster breathing room for its elevation and focus halo. */
.hero-actions,
.demo-controls,
.transcript-actions,
.download-buttons,
.account-actions,
.catalog-actions,
.demo-limit-actions {
  gap: clamp(10px, 1.2vw, 14px);
  padding-block: 4px;
}

/* Navigation keeps quiet text links flat. Its two actions are compact studio
   keys, while the menu remains one calm tray. */
.nav-download,
.nav-signin {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-md);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.018) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: var(--shadow-2);
  touch-action: manipulation;
  transition: background-color var(--motion-fast) var(--ease-fast), border-color var(--motion-fast) var(--ease-fast), transform var(--motion-base) var(--td-ease), box-shadow var(--motion-base) var(--td-ease);
}

.nav-signin {
  background-color: #121617;
}

.nav-download {
  border: 1px solid #fff8e9;
  background-color: var(--td-bone);
}

.nav-download:active,
.nav-signin:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-inset);
}

@media (hover: hover) and (pointer: fine) {
  .nav-download:hover,
  .nav-signin:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
  }

  .nav-download:hover {
    background-color: #fff8e9 !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.06)) !important;
  }

  .nav-signin:hover {
    background-color: #1a2021;
  }
}

.nav-menu {
  padding: 9px;
  border-radius: var(--radius-lg);
  background-color: #101415;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 38%);
  box-shadow: var(--shadow-3);
}

.nav-menu a,
.nav-menu button {
  margin-block: 2px;
  padding-inline: 13px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: color var(--motion-fast) var(--ease-fast), background-color var(--motion-fast) var(--ease-fast), border-color var(--motion-fast) var(--ease-fast), transform var(--motion-fast) var(--td-ease);
}

.nav-menu a:active,
.nav-menu button:active {
  background-color: rgba(244, 237, 221, 0.12);
  transform: translateY(1px);
}

/* Legacy inline rules intentionally removed their outlines. Restore a real
   keyboard state at matching specificity instead of relying on the lower
   specificity global focus rule. */
.nav .nav-download:focus-visible,
.nav .nav-signin:focus-visible,
.nav-menu a:focus-visible,
.nav-menu button:focus-visible,
button.linklike:focus-visible,
.dialog-close:focus-visible {
  outline: 3px solid var(--td-cyan);
  outline-offset: 3px;
}

.nav-menu a:focus-visible,
.nav-menu button:focus-visible {
  color: var(--td-bone);
  border-color: rgba(46, 217, 205, 0.68);
  background-color: rgba(46, 217, 205, 0.1);
}

/* True segmented controls keep a shared tray, with quieter geometry and one
   selected plate instead of two competing capsules. */
.finish-switch {
  width: min(100%, 360px);
  min-height: 52px;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  overflow: visible;
  border: 1px solid rgba(244, 237, 221, 0.2);
  border-radius: var(--radius-lg);
  background-color: #080b0c;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.1));
  box-shadow: var(--shadow-inset);
}

.finish-side {
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  padding: 0.48rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  line-height: 1.15;
  text-align: left;
  touch-action: manipulation;
  transition: color var(--motion-fast) var(--ease-fast), background-color var(--motion-fast) var(--ease-fast), border-color var(--motion-fast) var(--ease-fast), transform var(--motion-base) var(--td-ease), box-shadow var(--motion-base) var(--td-ease);
}

.finish-side:hover:not(:disabled) {
  color: var(--td-bone);
  background-color: rgba(244, 237, 221, 0.08);
}

.finish-side.active {
  color: var(--td-carbon);
  border-color: #7adfd7;
  background-color: #6bd8d0;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.055));
  box-shadow: var(--shadow-2);
  text-shadow: none;
}

.finish-side:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: var(--shadow-inset);
}

.finish-side:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

/* Non-interactive chips look materially related without borrowing hover or
   pointer behavior. Status is communicated by text and color, never lift. */
.term-chip,
.source-badge,
.plan-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.34rem 0.72rem;
  border: 1px solid rgba(46, 217, 205, 0.34);
  border-radius: var(--radius-full);
  background-color: #111718;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.08));
  box-shadow: var(--shadow-1);
  line-height: 1.15;
  white-space: nowrap;
}

.term-chip {
  min-height: 38px;
  border-color: rgba(215, 180, 102, 0.5);
  color: var(--td-brass);
}

.source-badge {
  color: var(--td-cyan);
  font-size: var(--text-caption);
}

.plan-chip.chip-warn {
  border-color: rgba(240, 84, 50, 0.54);
  color: var(--td-ember);
  background-color: #1b1110;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.08));
}

.plan-chip.chip-gold {
  border-color: rgba(215, 180, 102, 0.54);
  color: var(--td-brass);
  background-color: #19160f;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.08));
}

.route-switch,
.route-receipt {
  gap: 4px;
  padding: 4px;
  overflow: visible;
  border-radius: var(--radius-lg);
  background-color: #0c1011;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.09));
  box-shadow: var(--shadow-inset);
}

.route-switch span,
.route-receipt span {
  min-height: 36px;
  padding-inline: 8px;
  border-radius: var(--radius-md);
}

.route-switch .active,
.route-receipt .active {
  color: var(--td-carbon);
  background-color: #6bd8d0;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.055));
  box-shadow: var(--shadow-2);
}

/* Persistent instrument rails and their buttons use the same physical logic
   in a denser scale, with 44px targets retained for touch. */
.music-chip,
.clay-picker {
  border-radius: var(--radius-lg);
  background-color: #111516;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.11));
  box-shadow: var(--shadow-3);
}

.music-toggle,
.music-skip {
  border: 1px solid rgba(244, 237, 221, 0.18);
  border-radius: var(--radius-md);
  background-color: #171c1d;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(0, 0, 0, 0.09));
  box-shadow: var(--shadow-2);
  touch-action: manipulation;
  transition: color var(--motion-fast) var(--ease-fast), background-color var(--motion-fast) var(--ease-fast), border-color var(--motion-fast) var(--ease-fast), transform var(--motion-fast) var(--td-ease), box-shadow var(--motion-fast) var(--td-ease);
}

.music-chip.is-playing .music-toggle {
  color: var(--td-carbon);
  border-color: #7af3e9;
  background-color: var(--td-cyan);
}

@media (hover: hover) and (pointer: fine) {
  .music-toggle:hover,
  .music-skip:hover {
    border-color: rgba(244, 237, 221, 0.42);
    background-color: #202627;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(0, 0, 0, 0.075));
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
  }
}

.music-toggle:active,
.music-skip:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-inset);
}

.clay-dot {
  border-radius: 50%;
  box-shadow: var(--shadow-2);
  touch-action: manipulation;
  transition: border-color var(--motion-fast) var(--ease-fast), transform var(--motion-fast) var(--td-ease), box-shadow var(--motion-fast) var(--td-ease);
}

.clay-dot:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-inset);
}

.clay-dot.is-active {
  box-shadow: 0 0 0 2px var(--td-carbon), 0 0 0 4px var(--td-bone), var(--shadow-2);
}

.dialog-close {
  width: 44px;
  height: 44px;
  border-color: rgba(244, 237, 221, 0.24);
  background-color: #171c1d;
  border-radius: var(--radius-md);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(0, 0, 0, 0.09));
  box-shadow: var(--shadow-2);
  touch-action: manipulation;
  transition: color var(--motion-fast) var(--ease-fast), border-color var(--motion-fast) var(--ease-fast), transform var(--motion-fast) var(--td-ease), box-shadow var(--motion-fast) var(--td-ease);
}

.dialog-close:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-inset);
}

/* Theme coats remain functional while the signal stage keeps its contrast. */
:root[data-clay]:not([data-clay="night"]) .hero,
:root[data-clay]:not([data-clay="night"]) .hero-copy,
:root[data-clay]:not([data-clay="night"]) .proof-reel,
:root[data-clay]:not([data-clay="night"]) .feature-deck,
:root[data-clay]:not([data-clay="night"]) .demo,
:root[data-clay]:not([data-clay="night"]) .account,
:root[data-clay]:not([data-clay="night"]) .proof,
:root[data-clay]:not([data-clay="night"]) .security {
  color: var(--td-bone) !important;
  background: rgba(7, 9, 9, 0.9) !important;
}

/* The inline theme coat paints every direct shell child. The feature deck is
   intentionally a dark instrument in every theme, so its head, console, and
   scope note must show the section ground rather than a light clay panel. */
:root[data-clay]:not([data-clay="night"]) .feature-deck .shell > * {
  background-color: transparent !important;
}

/* X-225: a light surface has to flip the TOKENS, not just its own colour.
 *
 * These five sections turn cream under any clay theme. The rule used to set
 * `color: var(--td-ink)` on the container and stop there, which only helps
 * text that INHERITS. Every descendant with a colour of its own kept the value
 * it was given for the near-black base design, and `--td-bone` is a LIGHT
 * text token, so cream text landed on a cream ground.
 *
 * Measured on the live site before this fix: 33 elements per clay theme, and
 * 67 on bone, sitting at a contrast ratio between 1.00 and 1.12. A ratio of
 * 1.0 is not "hard to read", it is the same colour as the background. Headings
 * like "Talk DAT! public beta", the download links "Portable ZIP", "SHA256
 * checksums" and "Build receipt", and the FAQ summaries were all invisible.
 *
 * Redefining the tokens for the subtree fixes every descendant at once,
 * including ones nobody has written yet. Patching the 67 selectors would have
 * fixed today's page and quietly broken the next thing added to it.
 */
:root[data-clay]:not([data-clay="night"]) .hero-writing,
:root[data-clay]:not([data-clay="night"]) .download,
:root[data-clay]:not([data-clay="night"]) .faq,
:root[data-clay]:not([data-clay="night"]) .catalog-promo,
:root[data-clay]:not([data-clay="night"]) .statement[aria-label="Product promise"] {
  /* Text tokens, flipped for a light ground. */
  --td-bone: #141717;
  --td-bone-soft: #3a3630;
  --td-muted: #55504a;
  --td-line: rgba(17, 19, 19, 0.18);
  /* Accents: the bright-on-black versions do not survive cream, so each drops
     to the dark variant the palette already carries for exactly this. */
  --td-cyan: #086b68;
  --td-brass: #6f4f1c;
  --td-ember: #a42f1f;
  /* X-240: and the OTHER family. theme.js injects --clay-ink / --clay-muted on
     :root, and the rules above paint every `section h2` and `section p` with
     them -- so inside these cream sections the headings kept the theme's LIGHT
     ink. Flipping only the --td-* family fixed what somebody looked at and left
     32 elements at 1.00-1.04 on every dark clay. */
  --clay-ink: #141717;
  --clay-muted: #55504a;
  color: var(--td-ink) !important;
  background: rgba(244, 237, 221, 0.95) !important;
}

/* Surfaces that sit INSIDE those sections and paint their own dark panel:
   they are dark again, so the tokens have to flip back or their text
   disappears the other way. */
:root[data-clay]:not([data-clay="night"]) .hero-writing .pill-shell,
:root[data-clay]:not([data-clay="night"]) .download .store-button,
:root[data-clay]:not([data-clay="night"]) .download .platform-card {
  --td-bone: #f4eddd;
  --td-bone-soft: #ded3c1;
  --td-muted: #aaa397;
  --td-line: rgba(244, 237, 221, 0.17);
  --td-cyan: #2ed9cd;
  --td-brass: #d7b466;
  --td-ember: #f05432;
}

/* Tablet. */
@media (max-width: 1120px) {
  .hero-stage {
    grid-template-columns: 1fr 1fr;
  }

  .hero-product {
    grid-column: 1 / -1;
    min-height: 520px;
  }

  .product-label {
    margin-bottom: 58px;
  }

  .download-buttons {
    grid-template-columns: 1fr 1fr;
  }

  .download-buttons .store-button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .shell {
    width: min(100% - 40px, 720px);
  }

  .nav a:not(.nav-download):not(.nav-signin) {
    display: none;
  }

  .proof-intro,
  .section-head,
  .download-stage,
  .account-stage,
  .catalog-promo-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .proof-lanes,
  .security-grid {
    grid-template-columns: 1fr;
  }

  .proof-lanes article + article,
  .security-grid article + article {
    border-left: 0;
    border-top: 1px solid var(--td-line);
  }

  .proof-lanes h3 {
    max-width: none;
  }

  .feature-panel {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .feature-story h3 {
    max-width: 16ch;
  }

  .feature-graphic {
    min-height: 300px;
  }

  .demo-stage {
    grid-template-columns: 1fr;
  }

  .demo-voice {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--td-line);
  }

  .transcript-pane {
    min-height: 0;
  }

  .download-visual {
    position: static;
    padding: 0 0 12px;
  }

  .download-visual img {
    width: min(58vw, 320px);
  }

  .account-copy h2,
  .catalog-promo h2 {
    max-width: none;
  }

  .faq-list {
    grid-template-columns: 1fr;
  }
}

/* Phone: the stage becomes a purposeful vertical story, not a squeezed grid. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  body {
    position: relative;
    padding-bottom: 84px;
    font-size: var(--text-body);
  }

  .shell {
    width: calc(100% - 32px);
  }

  .topbar-inner {
    min-height: 64px;
    gap: 8px;
  }

  .brand span,
  .nav-helm {
    display: none;
  }

  .brand img {
    width: 38px;
    height: 38px;
  }

  .nav {
    margin-left: auto;
    gap: 5px;
  }

  .nav-signin,
  .nav-download {
    min-height: 44px;
    margin: 0;
    padding: 0 11px !important;
    font-size: var(--text-caption);
  }

  .hero {
    padding-top: 64px;
  }

  #try {
    padding: 82px 0 52px;
    scroll-margin-top: 0;
  }

  #try .section-head {
    display: none;
  }

  .mobile-demo-intro {
    width: min(100% - 32px, 440px);
    margin: 0 auto 24px;
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .mobile-intro-brand {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--td-brass);
    font: var(--weight-semibold) var(--text-body)/1 var(--td-ui);
  }

  .mobile-intro-brand img {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-lg);
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.36));
    animation: td-mobile-logo 560ms var(--td-ease) both;
  }

  .mobile-intro-brand span {
    animation: td-mobile-name 560ms 180ms var(--td-ease) both;
  }

  .mobile-intro-kicker {
    margin: 20px 0 0;
    color: var(--td-cyan);
    font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    animation: td-mobile-copy 480ms 360ms var(--td-ease) both;
  }

  #mobile-demo-title {
    max-width: 10ch;
    margin: 10px 0 0;
    color: var(--td-bone);
    font: var(--weight-regular) var(--text-display-2)/0.94 var(--td-display);
    letter-spacing: -0.04em;
    animation: td-mobile-copy 520ms 420ms var(--td-ease) both;
  }

  .mobile-intro-copy {
    max-width: 34ch;
    margin: 16px 0 0;
    color: var(--td-muted);
    font-size: var(--text-body-sm);
    line-height: 1.48;
    animation: td-mobile-copy 520ms 500ms var(--td-ease) both;
  }

  .mobile-intro-steps {
    width: 100%;
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    animation: td-mobile-copy 520ms 590ms var(--td-ease) both;
  }

  .mobile-intro-steps span {
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 4px;
    border-block: 1px solid var(--td-line);
  }

  .mobile-intro-steps strong,
  .mobile-intro-steps small {
    display: block;
  }

  .mobile-intro-steps strong {
    color: var(--td-bone);
    font: var(--weight-medium) var(--text-caption)/1.1 var(--td-ui);
  }

  .mobile-intro-steps small {
    margin-top: 5px;
    color: var(--td-muted);
    font-size: var(--text-caption);
    line-height: 1.15;
  }

  .hero-stage {
    min-height: 0;
    display: block;
  }

  .hero-copy,
  .hero-writing,
  .hero-product {
    min-height: 0;
    padding: 62px 24px;
  }

  .hero-copy {
    padding-top: 76px;
    padding-bottom: 56px;
  }

  .hero-name {
    margin-bottom: 18px;
  }

  .hero-name img {
    width: 38px;
    height: 38px;
  }

  .hero h1 {
    max-width: 8ch;
    font-size: var(--text-display-1);
    line-height: 0.94;
  }

  .hero-lead {
    margin-top: 26px;
    font-size: var(--text-body);
  }

  .hero-actions {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-actions .button {
    width: 100%;
    min-height: 52px;
  }

  .hero-meta {
    margin-top: 28px;
  }

  .hero-writing {
    min-height: 620px;
    border-inline: 0;
    border-block: 1px solid var(--td-line-dark);
  }

  .writing-block + .writing-block {
    margin-top: 76px;
  }

  .rough-block p {
    font-size: var(--text-body-sm);
  }

  .finished-block p {
    font-size: var(--text-title-2);
  }

  .finished-block .finished-title {
    font-size: var(--text-title-4);
  }

  .finished-block ol {
    font-size: var(--text-body-sm);
  }

  .finished-block .finished-note {
    font-size: var(--text-body);
  }

  .illustration-note {
    margin-top: 30px;
  }

  .hero-product {
    min-height: 520px;
  }

  .product-label {
    margin-bottom: 74px;
  }

  .hero-product-meta {
    margin-top: 46px;
  }

  .hero-signal span {
    display: none;
  }

  .hero-next {
    min-height: 54px;
    font-size: var(--text-caption);
  }

  .proof-reel,
  .feature-deck,
  .demo,
  .download,
  .account,
  .faq,
  .proof,
  .catalog-promo,
  .security {
    padding: 76px 0;
  }

  .proof-intro,
  .section-head {
    margin-bottom: 38px;
    gap: 22px;
    text-align: left;
  }

  .proof-intro h2,
  .section-head h2,
  .account-copy h2,
  .catalog-promo h2,
  .close h2,
  .security h2 {
    font-size: var(--text-display-2);
    line-height: 0.98;
  }

  .proof-intro p,
  .section-head p {
    font-size: var(--text-body);
  }

  .proof-lanes article {
    padding: 30px 4px 34px;
  }

  .feature-index {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 18px;
  }

  .feature-index a {
    grid-column: 1 / -1;
    margin-top: 8px;
  }

  .feature-deck {
    overflow: hidden;
  }

  .feature-deck-head {
    margin-bottom: 34px;
  }

  .feature-console {
    display: block;
    border-block: 1px solid var(--td-line);
  }

  .feature-tabs {
    width: calc(100vw - 16px);
    margin-left: -16px;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 237, 221, 0.24) transparent;
    border-right: 0;
    border-bottom: 1px solid var(--td-line);
    padding-inline: 16px;
  }

  .feature-tab {
    flex: 0 0 min(68vw, 220px);
    min-height: 58px;
    scroll-snap-align: start;
    border-right: 1px solid var(--td-line);
    border-bottom: 0;
  }

  .feature-tab:first-child {
    border-left: 1px solid var(--td-line);
  }

  .feature-tab[aria-selected="true"] {
    box-shadow: inset 0 -1px 0 var(--td-cyan);
  }

  .feature-display {
    display: block;
  }

  .feature-panel {
    min-height: 0;
    padding: 34px 0 30px;
    gap: 30px;
  }

  .feature-story {
    padding-inline: 4px;
  }

  .feature-story h3 {
    max-width: 12ch;
    font-size: var(--text-display-2);
  }

  .feature-story > p {
    margin-top: 20px;
    font-size: var(--text-body-sm);
  }

  .feature-facts {
    margin-top: 26px;
  }

  .feature-graphic {
    min-height: 0;
    aspect-ratio: 31 / 20;
    border-radius: var(--radius-md);
  }

  .feature-deck-controls {
    grid-template-columns: auto minmax(70px, 1fr) auto;
    padding: 14px 0;
  }

  .feature-deck-controls .button {
    min-width: 96px;
  }

  .feature-all-link {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 4px;
    text-align: center;
  }

  .feature-deck-note {
    margin-top: 18px;
    font-size: var(--text-caption);
  }

  .demo-stage {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 22px 18px 20px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #0e1213 0%, #090c0d 100%);
  }

  /* Mobile roll-in: brand mark, product name, guidance, then the actual
     workspace. The card is the transition into the main product experience,
     so it should not sit fully visible behind the introductory beats. */
  #try .demo-stage {
    animation: td-mobile-main 620ms 0ms var(--td-ease) both;
  }

  .demo-voice,
  .transcript-pane {
    display: contents;
  }

  .demo-pill-shell {
    grid-column: 1 / -1;
    order: 1;
    width: min(78%, 260px);
    animation: td-mobile-pill 620ms 0ms var(--td-ease) backwards;
  }

  .mobile-music-mount {
    width: 100%;
    min-height: 58px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: td-mobile-copy 520ms 650ms var(--td-ease) both;
  }

  .meter {
    display: none;
  }

  .meter span {
    width: 3px;
    height: 40px;
  }

  .demo-readout {
    grid-column: 1 / -1;
    order: 2;
    width: 100%;
    margin-top: 13px;
  }

  .mic-route-note {
    grid-column: 1 / -1;
    order: 11;
    margin-top: 14px;
  }

  .demo-controls {
    grid-column: 1 / -1;
    order: 4;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    margin-top: 8px;
  }

  .demo-controls #stopDemo {
    grid-column: auto;
  }

  .tap-demo .demo-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .tap-demo .demo-controls #toggleDemo,
  .tap-demo .demo-controls #stopDemo {
    display: none;
  }

  .demo-controls .button {
    min-height: 50px;
    padding-inline: 13px;
  }

  .demo-readout {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .transcript-top {
    display: contents;
  }

  .transcript-top h3 {
    grid-column: 1;
    order: 5;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--td-line);
  }

  .transcript-top .source-badge {
    grid-column: 2;
    order: 5;
    align-self: end;
    margin-top: 8px;
  }

  .finish-switch {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
    margin-top: 11px;
  }

  .transcript-output {
    grid-column: 1 / -1;
    order: 6;
    min-height: 112px;
    margin-top: 0;
    padding: 10px 0;
  }

  .transcript-pane > .transcript-actions {
    grid-column: 1 / -1;
    order: 7;
    margin-top: 10px;
  }

  .desktop-handoff {
    grid-column: 1 / -1;
    order: 8;
    margin-top: 16px;
    padding: 21px 17px;
    border-radius: var(--radius-lg);
  }

  .desktop-handoff h3 {
    max-width: 14ch;
    font-size: var(--text-title-2);
  }

  #desktopHandoffForm {
    margin-top: 20px;
  }

  .hold-hint {
    grid-column: 1 / -1;
    order: 10;
    margin-top: 16px;
  }

  .mic-permission-note {
    grid-column: 1 / -1;
    order: 12;
    max-width: none;
    margin-top: 8px;
  }

  .finish-anything {
    grid-column: 1 / -1;
    order: 13;
    margin-top: 22px;
    padding: 18px;
  }

  .privacy-note {
    grid-column: 1 / -1;
    order: 14;
    margin-top: 18px;
  }

  .download-copy h3 {
    max-width: 10ch;
    font-size: var(--text-display-2);
  }

  .founder-offer,
  .download-buttons {
    grid-template-columns: 1fr;
  }

  .founder-offer article + article {
    border-left: 0;
    border-top: 1px solid var(--td-line-dark);
  }

  .download-buttons .store-button {
    grid-column: auto;
  }

  .download-buttons .button {
    width: 100%;
  }

  .platform-list {
    margin-top: 54px;
  }

  .platform-row {
    grid-template-columns: 1fr auto;
    gap: 7px 16px;
    padding: 20px 0;
  }

  .platform-row p {
    grid-column: 1 / -1;
    margin: 0;
  }

  #business {
    padding: 72px 0;
  }

  .business-stage {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  #business h2 {
    max-width: 10ch;
    font-size: var(--text-display-2);
  }

  .business-copy > .button {
    width: 100%;
  }

  .business-card {
    padding: 24px 18px;
    border-radius: var(--radius-xl);
  }

  .business-price {
    grid-template-columns: 1fr;
  }

  .business-price > div {
    padding: 14px;
  }

  .statement-inner {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 22px;
  }

  .statement-mark {
    width: 74px;
  }

  .statement-inner h2 {
    font-size: var(--text-display-2);
  }

  .account-stage {
    grid-template-columns: 1fr;
  }

  .waitlist-form {
    grid-template-columns: 1fr;
  }

  .waitlist-form .button {
    width: 100%;
  }

  .account-panel {
    padding: 24px 18px;
  }

  .account-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .account-actions .button {
    width: 100%;
  }

  .faq-item summary {
    min-height: 68px;
  }

  .proof-row {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 28px 0;
  }

  .catalog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .catalog-actions .button {
    width: 100%;
  }

  .close {
    padding: 92px 0;
  }

  .security-grid {
    margin-top: 44px;
  }

  .security-grid article {
    padding-inline: 3px;
  }

  footer .shell {
    padding-bottom: 30px;
    flex-direction: column;
  }

  .music-chip {
    position: static;
    right: auto;
    left: auto;
    max-width: calc(100vw - 16px);
    transform: none;
    animation: td-mobile-rail-in 420ms 2.05s var(--td-ease) both;
  }

  .music-title,
  .music-volume {
    display: none;
  }

  .music-label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .clay-picker {
    right: 8px;
    bottom: 78px;
    max-width: calc(100vw - 185px);
    overflow-x: auto;
  }

  .clay-picker {
    position: absolute;
  }

  .clay-dot {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
}

@media (max-width: 380px) {
  .nav-signin {
    display: none;
  }

  .hero-copy,
  .hero-writing,
  .hero-product {
    padding-inline: 20px;
  }

  .hero h1 {
    font-size: var(--text-display-2);
  }

  .feature-index {
    grid-template-columns: 1fr;
  }

  .feature-index a {
    grid-column: auto;
  }

  .clay-picker {
    max-width: calc(100vw - 185px);
  }
}

@keyframes td-mobile-logo {
  from { opacity: 0; transform: scale(0.9); filter: blur(7px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes td-mobile-rail-in {
  from { opacity: 0; transform: translateY(8px); pointer-events: none; }
  to { opacity: 1; transform: translateY(0); pointer-events: auto; }
}

@keyframes td-mobile-name {
  from { opacity: 0; transform: translateX(-9px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes td-mobile-copy {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes td-mobile-main {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes td-mobile-pill {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes td-handoff-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.desktop-handoff.is-visible {
  animation: td-handoff-in 460ms var(--td-ease) both;
}

@media (prefers-reduced-motion: reduce) {

  .music-chip {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  #try .demo-stage {
    animation: none;
    opacity: 1;
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }

  .hero-signal span,
  .insertion-cursor,
  .music-chip.is-playing .music-disc,
  .plan-accent,
  .board-cards .admin-card,
  .mobile-intro-brand img,
  .mobile-intro-brand span,
  .mobile-intro-kicker,
  #mobile-demo-title,
  .mobile-intro-copy,
  .mobile-intro-steps,
  .demo-pill-shell,
  .desktop-handoff.is-visible,
  .feature-panel.is-entering {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .demo-pill-shell.starting::before,
  .demo-pill-shell.listening::before,
  .demo-pill-shell.finish-swap::after {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  .demo-pill-shell.finish-swap::after {
    opacity: 0.55;
  }

  .button,
  .nav-download,
    .nav-signin,
    .nav-menu a,
    .nav-menu button,
    .hero-pill-link,
    .finish-side,
  .music-toggle,
    .music-skip,
    .clay-dot,
    .dialog-close,
    .desktop-platform-options span,
    .feature-tab,
    .feature-progress span,
  a.button.primary:not(.store-button):not(.mac-download-button)::after {
    transition: none !important;
  }

  .button:hover,
  .button:active,
  a.button.primary:not(.store-button):not(.mac-download-button):hover::after,
  .nav-download:hover,
  .nav-download:active,
    .nav-signin:hover,
    .nav-signin:active,
    .hero-pill-link:hover,
    .hero-pill-link:active,
  .finish-side:hover,
  .finish-side:active,
  .music-toggle:hover,
  .music-toggle:active,
  .music-skip:hover,
    .music-skip:active,
    .clay-dot:active,
    .dialog-close:active,
    .desktop-platform-options label:hover span,
    .desktop-platform-options input:checked + span {
    transform: none !important;
  }
}

@media (forced-colors: active) {
  .hero-signal,
  .hero-meta span::before {
    forced-color-adjust: none;
  }

  .button,
  .nav-download,
  .nav-signin,
  .finish-switch,
  .finish-side,
  .hero-pill-link,
  .hero-pill-action,
  .term-chip,
  .source-badge,
  .plan-chip,
  .route-switch,
  .route-receipt,
  .music-chip,
  .clay-picker,
  .music-toggle,
  .music-skip,
  .clay-picker-toggle,
  .clay-dot,
  .dialog-close,
  .account-panel,
  .demo-stage,
  .finish-anything,
  .business-card,
  .business-price > div,
  #bizSeatNumber,
  #bizSeats,
  .desktop-handoff,
  #desktopHandoffEmail,
  .finish-anything textarea,
  .account-fields input,
  .waitlist-form input,
  .desktop-platform-options span {
    border-color: CanvasText;
    background-image: none;
    box-shadow: none;
  }

  #bizSeats {
    appearance: auto;
    -webkit-appearance: auto;
  }

  .desktop-platform-options input:checked + span {
    color: HighlightText;
    background: Highlight;
  }

  .feature-tab,
  .feature-console,
  .feature-graphic {
    border-color: CanvasText;
    background-image: none;
    box-shadow: none;
  }

  .feature-tab[aria-selected="true"] {
    color: HighlightText;
    background: Highlight;
  }

  .feature-progress span {
    background: Highlight;
  }

  .finish-side.active {
    color: HighlightText;
    border-color: Highlight;
    background: Highlight;
  }

  .clay-dot.is-active {
    border-color: Highlight;
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* Site-wide download return system. It repeats one disciplined instrument,
   not a new ad treatment for every section. */
.nav-platform-short {
  display: none;
}

.nav .nav-platform-download {
  min-width: 132px;
  margin-left: 4px;
  padding-inline: 12px;
  white-space: nowrap;
}

.nav .nav-platform-download[data-platform-download="mac"] {
  color: #f4eddd !important;
  border: 1px solid rgba(244, 237, 221, 0.3);
  background-color: #121617;
}

:root[data-download-platform="mac"] .nav .nav-platform-download[data-platform-download="windows"] {
  color: #f4eddd !important;
  border: 1px solid rgba(244, 237, 221, 0.3);
  background-color: #121617;
}

:root[data-download-platform="mac"] .nav .nav-platform-download[data-platform-download="mac"],
:root[data-download-platform="windows"] .nav .nav-platform-download[data-platform-download="windows"] {
  color: #111313 !important;
  border-color: #fff8e9;
  background-color: #f4eddd;
}

.download-return {
  width: 100%;
  margin-top: clamp(42px, 6vw, 74px);
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(440px, 1.2fr);
  gap: clamp(20px, 3vw, 46px);
  align-items: center;
  padding: clamp(20px, 2.4vw, 32px);
  color: #f4eddd;
  border: 1px solid rgba(244, 237, 221, 0.17);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 6% 0%, rgba(215, 180, 102, 0.11), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 42%),
    #0e1213;
  box-shadow: var(--shadow-3);
}

.download-return-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.download-return-copy > span {
  color: #d7b466;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.download-return-copy > strong {
  color: #f4eddd;
  font: var(--weight-semibold) var(--text-title-3)/1.04 var(--td-ui);
  letter-spacing: -0.025em;
}

.download-return-copy > small {
  color: #aaa397;
  font-size: var(--text-caption);
  line-height: 1.3;
}

.download-return-desktop-actions,
.download-return-mobile-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.download-return-mobile-actions {
  display: none;
}

.download-return-button,
.final-download-button {
  position: relative;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 14px;
  color: #f4eddd;
  border: 1px solid #343b3c;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(0, 0, 0, 0.12)),
    #171b1c;
  box-shadow: var(--shadow-2);
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--motion-fast) var(--td-ease), border-color var(--motion-fast) var(--ease-fast), background-color var(--motion-fast) var(--ease-fast), box-shadow var(--motion-fast) var(--ease-fast);
}

.download-return-button strong,
.final-download-button strong {
  color: inherit;
  font: var(--weight-semibold) var(--text-body-sm)/1.08 var(--td-ui);
}

.download-return-button small,
.final-download-button small {
  color: inherit;
  font: var(--weight-medium) var(--text-caption)/1.15 var(--td-body);
  opacity: 0.72;
}

:root[data-download-platform="windows"] .download-return-desktop-actions {
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
}

:root[data-download-platform="mac"] .download-return-desktop-actions {
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
}

:root[data-download-platform="windows"] .download-return-button[data-platform-download="windows"],
:root[data-download-platform="mac"] .download-return-button[data-platform-download="mac"] {
  color: #111313;
  border-color: #f2deb0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.08)), #dfc98f;
  box-shadow: var(--shadow-3);
}

@media (hover: hover) and (pointer: fine) {
  .download-return-button:hover,
  .final-download-button:hover {
    color: #f4eddd;
    border-color: #667273;
    transform: translateY(-1px);
  }

  :root[data-download-platform="windows"] .download-return-button[data-platform-download="windows"]:hover,
  :root[data-download-platform="mac"] .download-return-button[data-platform-download="mac"]:hover {
    color: #111313;
    border-color: #fff1c8;
  }
}

.download-return-button:active,
.final-download-button:active {
  transform: translateY(1px);
}

.download-return-button:focus-visible,
.final-download-button:focus-visible {
  outline: 3px solid #2ed9cd;
  outline-offset: 3px;
}

.security .download-return {
  margin-top: 42px;
}

.final-download-actions {
  width: min(100%, 820px);
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.final-download-button {
  min-height: 112px;
  border-radius: var(--radius-xl);
}

.final-download-button > span {
  color: #d7b466;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.final-download-button strong {
  font-size: var(--text-title-3);
}

:root[data-download-platform="windows"] .final-download-button[data-platform-download="windows"],
:root[data-download-platform="mac"] .final-download-button[data-platform-download="mac"] {
  color: #111313;
  border-color: #f2deb0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.08)), #dfc98f;
}

.footer-downloads {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.footer-downloads a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: #f4eddd;
  border: 1px solid rgba(244, 237, 221, 0.25);
  border-radius: var(--radius-md);
  background: rgba(244, 237, 221, 0.055);
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
}

:root[data-download-platform="windows"] .footer-downloads [data-platform-download="windows"],
:root[data-download-platform="mac"] .footer-downloads [data-platform-download="mac"] {
  color: #111313;
  border-color: #f4eddd;
  background: #f4eddd;
}

body {
  padding-bottom: 92px;
}

.download-sticky {
  position: fixed;
  z-index: 58;
  right: auto;
  bottom: 14px;
  left: 14px;
  width: min(720px, calc(100vw - 264px));
  color: #f4eddd;
  border: 1px solid rgba(244, 237, 221, 0.2);
  border-radius: var(--radius-lg);
  background: rgba(10, 13, 14, 0.94);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  transition: opacity var(--motion-fast) var(--ease-fast), transform var(--motion-base) var(--td-ease), visibility var(--motion-fast) linear;
}

.download-sticky-desktop {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
}

.download-sticky-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding-inline: 6px;
}

.download-sticky-copy strong,
.download-sticky-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-sticky-copy strong {
  color: #f4eddd;
  font: var(--weight-medium) var(--text-caption)/1.1 var(--td-ui);
}

.download-sticky-copy small {
  color: #aaa397;
  font-size: var(--text-caption);
}

.download-sticky-desktop > a {
  min-width: 82px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  color: #f4eddd;
  border: 1px solid rgba(244, 237, 221, 0.28);
  border-radius: var(--radius-md);
  background: rgba(244, 237, 221, 0.06);
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
}

:root[data-download-platform="windows"] .download-sticky-desktop [data-platform-download="windows"],
:root[data-download-platform="mac"] .download-sticky-desktop [data-platform-download="mac"] {
  color: #111313;
  border-color: #f4eddd;
  background: #f4eddd;
}

.download-sticky-mobile {
  display: none;
}

body.demo-in-view .download-sticky,
body.hero-in-view .download-sticky,
body.download-control-in-view .download-sticky {
  visibility: hidden;
  opacity: 0;
  transform: translateY(calc(100% + 24px));
  pointer-events: none;
}

.download-qr-dialog {
  width: min(92vw, 440px);
  padding: 0;
  color: #f4eddd;
  border: 1px solid rgba(244, 237, 221, 0.2);
  border-radius: var(--radius-xl);
  background: #0e1213;
  box-shadow: var(--shadow-3);
}

.download-qr-dialog::backdrop {
  background: rgba(3, 5, 5, 0.78);
  backdrop-filter: blur(8px);
}

.download-qr-surface {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 13px;
  padding: 34px 30px 30px;
  text-align: center;
}

.download-qr-kicker {
  margin: 0;
  color: #2ed9cd;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.download-qr-surface h2 {
  max-width: 12ch;
  margin: 0;
  color: #f4eddd;
  font: var(--weight-regular) var(--text-title-1)/0.98 var(--td-display);
  letter-spacing: -0.03em;
}

.download-qr-surface p:not(.download-qr-kicker) {
  max-width: 34ch;
  margin: 0;
  color: #aaa397;
  font-size: var(--text-body-sm);
  line-height: 1.45;
}

.download-qr-surface img {
  width: min(62vw, 232px);
  height: auto;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: #fff;
}

.download-qr-surface > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #f4eddd;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.download-action-status {
  position: fixed;
  z-index: 120;
  right: 16px;
  bottom: 88px;
  left: 16px;
  max-width: 440px;
  margin: auto;
  padding: 12px 16px;
  color: #111313;
  border-radius: var(--radius-md);
  background: #f4eddd;
  box-shadow: var(--shadow-3);
  font: var(--weight-medium) var(--text-caption)/1.35 var(--td-body);
  text-align: center;
}

@media (max-width: 1180px) {
  .nav a:not(.nav-download):not(.nav-signin),
  .nav-helm {
    display: none;
  }

  .nav-platform-long {
    display: none;
  }

  .nav-platform-short {
    display: inline;
  }

  .nav .nav-platform-download {
    min-width: 76px;
  }
}

@media (max-width: 900px) {
  .download-return {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  body {
    padding-bottom: 86px;
  }

  .nav .nav-platform-download {
    min-width: 66px;
    padding-inline: 9px;
    font-size: var(--text-caption);
  }

  .download-return {
    margin-top: 34px;
    gap: 18px;
    padding: 20px;
    border-radius: var(--radius-lg);
  }

  .download-return-copy > strong {
    font-size: var(--text-title-3);
  }

  .download-return-button {
    min-height: 70px;
    padding-inline: 10px;
  }

  .download-sticky {
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    border-radius: var(--radius-lg);
  }

  .download-sticky-mobile {
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    align-items: center;
    padding: 7px;
  }

  .download-sticky-mobile > strong {
    min-width: 0;
    padding-left: 5px;
    color: #f4eddd;
    font: var(--weight-medium) var(--text-caption)/1.15 var(--td-ui);
  }

  .download-sticky-mobile > button {
    min-height: 44px;
    padding: 0 10px;
    color: #111313;
    border: 1px solid #f4eddd;
    border-radius: var(--radius-md);
    background: #f4eddd;
    font: var(--weight-medium) var(--text-caption)/1.05 var(--td-ui);
    cursor: pointer;
  }

  .download-sticky-mobile > button:last-child {
    color: #f4eddd;
    border-color: rgba(244, 237, 221, 0.3);
    background: #161a1b;
  }

  .final-mobile-actions {
    width: 100%;
    margin-top: 28px;
  }
}

:root[data-download-audience="mobile"] .download-return-desktop-actions,
:root[data-download-audience="mobile"] .final-download-actions,
:root[data-download-audience="mobile"] .download-sticky-desktop {
  display: none;
}

:root[data-download-audience="mobile"] .download-return-mobile-actions,
:root[data-download-audience="mobile"] .download-sticky-mobile {
  display: grid;
}

@media (max-width: 390px) {
  .download-sticky-mobile > strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .download-sticky-mobile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .download-sticky-mobile > button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .download-return-button,
  .final-download-button,
  .download-sticky {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .download-return,
  .download-return-button,
  .final-download-button,
  .footer-downloads a,
  .download-sticky,
  .download-sticky a,
  .download-sticky button,
  .download-qr-dialog,
  .download-action-status {
    color: CanvasText !important;
    border-color: CanvasText !important;
    background: Canvas !important;
    box-shadow: none !important;
  }

  .download-return-button:focus-visible,
  .final-download-button:focus-visible,
  .download-sticky a:focus-visible,
  .download-sticky button:focus-visible {
    outline: 3px solid Highlight;
  }
}

/* Installer dock: two unmistakable platform choices before pricing or setup
   detail. This surface stays dark in every clay theme so the operating-system
   decision reads as one piece of product hardware. */
.hero-install-dock {
  scroll-margin-top: 94px;
  width: min(100%, 470px);
  margin-top: 22px;
  overflow: hidden;
  color: #f4eddd;
  border: 1px solid rgba(244, 237, 221, 0.2);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), transparent 38%),
    #101415;
  box-shadow: var(--shadow-3);
}

.hero-install-heading {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 15px;
}

.hero-install-heading span {
  color: #d7b466;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-install-heading strong {
  color: #f4eddd;
  font: var(--weight-semibold) var(--text-body-sm)/1.15 var(--td-ui);
  text-align: right;
}

.hero-install-options {
  border-block: 1px solid rgba(244, 237, 221, 0.14);
}

.platform-download {
  position: relative;
  min-height: 74px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 30px;
  gap: 12px;
  align-items: center;
  padding: 11px 14px 11px 12px;
  color: #f4eddd;
  background-color: #15191a;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.1));
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color var(--motion-fast) var(--ease-fast), transform var(--motion-fast) var(--td-ease), box-shadow var(--motion-fast) var(--ease-fast);
}

.platform-download + .platform-download {
  border-top: 1px solid rgba(244, 237, 221, 0.12);
}

.platform-download::before {
  content: "";
  position: absolute;
  inset-block: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background: #d7b466;
  box-shadow: var(--shadow-2);
}

.platform-download-mac::before {
  background: #2ed9cd;
  box-shadow: var(--shadow-2);
}

.platform-download-stamp {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #d7b466;
  border: 1px solid rgba(215, 180, 102, 0.34);
  border-radius: var(--radius-md);
  background: rgba(215, 180, 102, 0.07);
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: 0.06em;
}

.platform-download-mac .platform-download-stamp {
  color: #2ed9cd;
  border-color: rgba(46, 217, 205, 0.34);
  background: rgba(46, 217, 205, 0.07);
}

.platform-download-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.platform-download-copy strong {
  color: #f4eddd;
  font: var(--weight-semibold) var(--text-body-sm)/1.08 var(--td-ui);
  letter-spacing: -0.01em;
}

.platform-download-copy small {
  color: #aaa397;
  font: var(--weight-medium) var(--text-caption)/1.2 var(--td-body);
}

.platform-download-arrow {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #111313;
  border-radius: 50%;
  background: #d7b466;
  font: var(--weight-semibold) var(--text-body)/1 var(--td-ui);
  box-shadow: var(--shadow-2);
}

.platform-download-mac .platform-download-arrow {
  background: #2ed9cd;
}

.hero-install-dock > p {
  margin: 0;
  padding: 11px 15px 12px;
  color: #aaa397;
  font-size: var(--text-caption);
  line-height: 1.25;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .platform-download:hover {
    color: #f4eddd;
    background-color: #1b2021;
    box-shadow: var(--shadow-inset);
  }

  .platform-download:hover .platform-download-arrow {
    transform: translateY(1px);
  }
}

.platform-download:active {
  background-color: #0c0f10;
  transform: translateY(1px);
}

.platform-download:focus-visible {
  z-index: 1;
  outline: 3px solid #2ed9cd;
  outline-offset: -3px;
}

/* Installation choice comes before warnings and pricing. Windows Store and
   the notarized Mac image are equal primary decisions; the unsigned Windows
   file is intentionally quieter and separate. */
.download-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 30px;
}

.download-buttons .button,
.download-buttons .store-button,
.download-copy .download-buttons .button,
.download-copy .download-buttons .store-button {
  min-height: 102px;
  grid-column: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 17px 16px;
  border-radius: var(--radius-lg);
  text-align: center;
  white-space: normal;
}

.download-buttons .store-button {
  --bubble-fill: #dfc98f;
  --bubble-ink: #111313;
  --bubble-border: #f2deb0;
  --bubble-floor: #8e7848;
  --bubble-glow: rgba(137, 108, 47, 0.17);
}

.download-buttons .mac-download-button {
  --bubble-fill: #111617;
  --bubble-ink: #f4eddd;
  --bubble-border: #2c5b5a;
  --bubble-floor: #030707;
  --bubble-glow: rgba(46, 217, 205, 0.13);
}

.download-buttons .button strong {
  color: inherit;
  font: var(--weight-semibold) var(--text-body)/1.08 var(--td-ui);
  letter-spacing: -0.015em;
}

.download-buttons .button small {
  color: inherit;
  font: var(--weight-medium) var(--text-caption)/1.2 var(--td-body);
  opacity: 0.74;
}

.download-button-platform {
  display: block;
  color: inherit;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: 0.075em;
  text-transform: uppercase;
  opacity: 0.76;
}

.direct-download-option {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 14px 14px 17px;
  color: #393630;
  border: 1px solid rgba(17, 19, 19, 0.18);
  border-radius: var(--radius-lg);
  background: rgba(17, 19, 19, 0.035);
}

.direct-download-option > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.direct-download-option strong {
  color: #1b1d1d;
  font: var(--weight-medium) var(--text-caption)/1.2 var(--td-ui);
}

.direct-download-option span {
  color: #625d54;
  font-size: var(--text-caption);
  line-height: 1.3;
}

.direct-download-option .button {
  --bubble-fill: #1b1f20;
  --bubble-ink: #f4eddd;
  --bubble-border: #343838;
  --bubble-floor: #050707;
  flex: 0 0 auto;
  min-height: 48px;
  padding-inline: 16px;
  white-space: nowrap;
}

.integrity-links a {
  min-height: 44px;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .hero-install-dock {
    width: 100%;
    margin-top: 20px;
  }

  .hero-install-heading {
    min-height: 58px;
  }

  .platform-download {
    min-height: 76px;
  }

  .download-buttons {
    grid-template-columns: 1fr;
  }

  .download-buttons .button,
  .download-buttons .store-button,
  .download-copy .download-buttons .button,
  .download-copy .download-buttons .store-button {
    width: 100%;
    min-height: 96px;
  }

  .direct-download-option {
    align-items: stretch;
    flex-direction: column;
  }

  .direct-download-option .button {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .hero-install-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .hero-install-heading strong {
    text-align: left;
  }

  .platform-download {
    grid-template-columns: 36px minmax(0, 1fr) 28px;
    gap: 9px;
    padding-inline: 10px;
  }

  .platform-download-stamp {
    width: 36px;
    height: 36px;
  }

  .platform-download-arrow {
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-download,
  .platform-download-arrow {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .hero-install-dock,
  .platform-download,
  .platform-download-stamp,
  .platform-download-arrow,
  .direct-download-option {
    color: CanvasText !important;
    border-color: CanvasText !important;
    background: Canvas !important;
    box-shadow: none !important;
  }

  .platform-download:focus-visible {
    outline-color: Highlight;
  }
}

/* X-156: mobile hit boxes.
   Measured at 375px: nine links render 16-21px tall, under the 24px floor in
   WCAG 2.2 SC 2.5.8. The first attempt used `p > a`, which loses the cascade to
   Codex's class-scoped rules (`.account-legal a` is more specific than two type
   selectors), so the containers are named explicitly here -- taken from the
   live DOM rather than guessed. Padding grows the TARGET, never the type, so
   the visual rhythm is unchanged.
   Width-based, not `pointer: coarse`: a coarse pointer on a wide screen does
   not need this, and a phone always matches the width. */
@media (max-width: 720px) {
  .account-legal a,
  .waitlist-legal a,
  .security-link a,
  .feature-index a,
  .integrity-links a,
  footer a,
  footer p a {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* X-226: was 24px, which is barely half a comfortable target and left
       sixteen links between 25 and 32 pixels tall on a phone, in tight rows
       where the neighbour is a few pixels away. Apple and Google both put the
       minimum at 44. The padding grows the TARGET and the negative margin
       gives the space back, so the type does not move and no row gets taller. */
    min-height: 44px;
    padding-block: 8px;
    margin-block: -8px;
    line-height: 1.4;
  }

  /* The footer helm is an icon link at 20px wide; give it a square target
     without moving the mark itself. */
  .footer-helm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* X-240, part 2: nothing inside a deliberately-cream section may repaint it dark.
 *
 * The block above makes five sections cream in every clay theme and flips their
 * text tokens to suit. But `.shell > *` paints var(--clay-panel), which is DARK
 * in five of the six clays, and the stage containers inside these sections are
 * exactly that. The text was already correct; the ground under it went dark
 * afterwards, which is why every heading in the download section measured
 * 1.00-1.07 against its own background.
 *
 * Named containers rather than `.shell > *`: the general form is tempting and
 * was tried, and it is a wider blast radius than the problem needs. */
:root[data-clay]:not([data-clay="night"]) .download-stage,
:root[data-clay]:not([data-clay="night"]) .platform-list,
:root[data-clay]:not([data-clay="night"]) .faq-list,
:root[data-clay]:not([data-clay="night"]) .download .section-head,
:root[data-clay]:not([data-clay="night"]) .faq .section-head,
:root[data-clay]:not([data-clay="night"]) .catalog-promo .section-head,
:root[data-clay]:not([data-clay="night"]) .catalog-promo .shell > *,
:root[data-clay]:not([data-clay="night"]) .statement[aria-label="Product promise"] .shell > *,
:root[data-clay]:not([data-clay="night"]) .statement[aria-label="Product promise"] .statement-inner {
  background-color: transparent;
}

/* ...and the buttons in those sections DO paint their own dark ground, so for
 * them the flip has to go the other way. `.download-buttons .button` sets
 * `background: var(--td-ink)` -- near-black in every theme -- while inheriting
 * the cream section's dark ink, which is #141717 on #111313: a ratio of 1.03.
 *
 * This is the same shape as the existing .store-button / .platform-card
 * flip-back a few rules down. A section that changes its ground has to carry
 * every surface inside it that does not follow. */
:root[data-clay]:not([data-clay="night"]) .download-buttons .button,
:root[data-clay]:not([data-clay="night"]) .catalog-actions .button {
  --td-bone: #f4eddd;
  --td-bone-soft: #ded3c1;
  --td-muted: #aaa397;
  --td-cyan: #2ed9cd;
  --td-brass: #d7b466;
  --td-ember: #f05432;
  --clay-ink: #f4eddd;
  --clay-muted: #c8bdab;
}

/* ---------------------------------------------------------------------------
   X-240, part 3: bone is the one LIGHT clay, and that changes the whole page.

   In the five dark clays --clay-panel is dark, so only the five sections above
   go cream and everything else keeps the shipped bright-on-black text. In bone
   the panel is cream (rgba(255,250,240,.78)) -- so EVERY section is a light
   ground while the text tokens stayed at their bright-on-black values.
   Measured on the page: 61 elements between 1.08 and 1.12, including the
   footer's "Terms", "Privacy Notice" and "Refund Policy", and the heading
   "Your names stay teachable." 1.1 is not hard to read; it is the same colour.

   A five-section flip cannot cover a page that is entirely light, so bone
   flips at the root. Same principle the earlier fix stated: redefine the
   tokens for the subtree and every descendant follows, including ones nobody
   has written yet.

   BOTH families flip. There are two on this page -- --td-* here, and a second
   --bone/--cyan/--gold/--line family declared inline in index.html. Flipping
   one and not the other is exactly how the footer links stayed invisible. */
:root[data-clay="bone"] {
  --td-bone: #141717;
  --td-bone-soft: #3a3630;
  --td-muted: #55504a;
  --td-line: rgba(17, 19, 19, 0.18);
  --td-cyan: #086b68;
  --td-brass: #6f4f1c;
  --td-ember: #a42f1f;

  --bone: #141717;
  --bone-muted: #55504a;
  --cyan: #086b68;
  --cyan-deep: #065a63;
  --gold: #6f4f1c;
  --ember: #a42f1f;
  --line: rgba(17, 19, 19, 0.18);
}

/* Surfaces that paint their OWN dark ground in every theme -- the demo panes,
   the hero card, the receipts, the sign-in chip. They are dark under bone too,
   so their tokens flip back or the dark ink lands on dark: the same defect
   reached from the opposite side, which is what the first attempt at this did.

   `:not([data-clay="night"])` is carried purely for SPECIFICITY. Without it
   this is (0,3,0) and loses to the five-section rule above at (0,4,0), so
   `.finish-anything` inside `.hero-writing` would keep the dark ink. */
:root[data-clay="bone"]:not([data-clay="night"]) .demo-voice,
:root[data-clay="bone"]:not([data-clay="night"]) .transcript-pane,
:root[data-clay="bone"]:not([data-clay="night"]) .finish-anything,
:root[data-clay="bone"]:not([data-clay="night"]) .hero-copy,
:root[data-clay="bone"]:not([data-clay="night"]) .hero-product,
:root[data-clay="bone"]:not([data-clay="night"]) .feature-deck,
:root[data-clay="bone"]:not([data-clay="night"]) .route-switch,
:root[data-clay="bone"]:not([data-clay="night"]) .term-chip,
:root[data-clay="bone"]:not([data-clay="night"]) .recovery-receipt,
:root[data-clay="bone"]:not([data-clay="night"]) .route-receipt,
:root[data-clay="bone"]:not([data-clay="night"]) .source-badge,
:root[data-clay="bone"]:not([data-clay="night"]) .nav-signin,
:root[data-clay="bone"]:not([data-clay="night"]) .nav-download,
:root[data-clay="bone"]:not([data-clay="night"]) .music-chip,
/* Buttons that keep the default near-black fill.
 *
 * Two exclusions, both learned by measuring rather than by reading:
 *   `.primary` paints a CREAM fill with dark ink, so flipping it would put
 *   light text on light -- the same bug wearing the fix's clothes.
 *   `.close .button` carries no fill at all and sits straight on the cream
 *   panel, which is the same problem again (1.12 on "Download Talk DAT!").
 * Naming only the three known dark containers instead was tried and is worse:
 * it misses others and took bone from 2 failures back up to 8. */
:root[data-clay="bone"]:not([data-clay="night"]) .button:not(.primary) {
  --td-bone: #f4eddd;
  --td-bone-soft: #ded3c1;
  --td-muted: #aaa397;
  --td-line: rgba(244, 237, 221, 0.17);
  --td-cyan: #2ed9cd;
  --td-brass: #d7b466;
  --td-ember: #f05432;

  --bone: #f7f1e4;
  --bone-muted: #c8bdab;
  --cyan: #24d9d1;
  --cyan-deep: #087a85;
  --gold: #ffd676;
  --ember: #ff4a2f;
  --line: rgba(247, 241, 228, 0.15);

  --clay-ink: #f4eddd;
  --clay-muted: #c8bdab;

  /* And the colour itself, not just the tokens.
   *
   * A token flip only reaches elements that actually say `color: var(--...)`.
   * An element that simply INHERITS its colour gets whatever its ancestor
   * already computed -- so the headings in these dark panes kept the cream
   * section's dark ink while every token at their own level was correct.
   * Setting `color` here gives the subtree something light to inherit;
   * descendants with a colour rule of their own still win. */
  color: var(--td-bone);
}

/* The one button that carries no fill of its own and sits straight on the
   cream panel. The rule above would hand it light ink on cream. */
:root[data-clay="bone"]:not([data-clay="night"]) .close .button:not(.primary) {
  --td-bone: #141717;
  --clay-ink: #141717;
  color: var(--td-bone);
}

/* The skip link is its own case: it paints itself with --td-cyan and puts
   near-black ink on it. Under bone the root flip turns --td-cyan into the dark
   teal, which leaves dark ink on a dark ground (3.15). Putting it in the
   flip-back instead gives light ink on the BRIGHT cyan (1.51) -- wrong in the
   other direction. It needs the bright fill AND the dark ink, so it keeps its
   own accent and states its colour outright. */
:root[data-clay="bone"]:not([data-clay="night"]) .skip-link {
  --td-cyan: #2ed9cd;
  background: var(--td-cyan);
  color: #070909;
}

/* The closing call-to-action carries no fill of its own, so it inherits
   whatever ground the section paints. In the five dark clays that is the dark
   clay panel, and the button's near-black --td-carbon ink lands on it at 1.03.
   bone has the opposite problem and its own reset above; this is the dark half. */
:root[data-clay]:not([data-clay="night"]):not([data-clay="bone"]) .close .button:not(.primary) {
  color: var(--td-bone);
}

/* Launch deck: one full-bleed product story at a time. */
.feature-deck {
  --deck-ink: #f5f5f7;
  --deck-muted: #b7b7bd;
  --deck-line: rgba(255, 255, 255, 0.14);
  color: var(--deck-ink) !important;
  background: #050506 !important;
}

.feature-deck-head {
  max-width: 1080px;
  margin-bottom: clamp(34px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.7fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: end;
}

.feature-deck-head h2 {
  max-width: 10ch;
  margin: 0;
  color: var(--deck-ink) !important;
  font-size: var(--text-display-1);
  line-height: 0.9;
  letter-spacing: -0.065em;
}

.feature-deck-head p {
  max-width: 43ch;
  margin: 0 0 0.35rem;
  color: var(--deck-muted) !important;
  font-size: var(--text-body-lg);
  line-height: 1.62;
}

.feature-console {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--deck-line);
  border-radius: var(--radius-xl);
  background: #09090a !important;
  box-shadow: var(--shadow-3);
}

.feature-tabs {
  width: 100%;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  padding: 11px 12px 10px;
  border: 0;
  border-bottom: 1px solid var(--deck-line);
  background: rgba(16, 16, 18, 0.97);
}

.feature-tab {
  flex: 0 0 auto;
  width: auto;
  min-width: auto;
  min-height: 48px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  scroll-snap-align: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: #8f8f96;
  box-shadow: none;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-fast), background-color var(--motion-fast) var(--ease-fast), transform var(--motion-fast) var(--ease-fast);
}

.feature-tab span {
  color: #9a968d;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: 0.04em;
}

.feature-tab strong {
  font: inherit;
}

.feature-tab:hover {
  color: #f5f5f7;
  background: rgba(255, 255, 255, 0.06);
}

.feature-tab:active {
  transform: scale(0.985);
}

.feature-tab[aria-selected="true"] {
  color: #111113;
  background: #f5f5f7;
  box-shadow: none;
}

.feature-tab[aria-selected="true"] span {
  color: #6f6f75;
}

.feature-tab:focus-visible {
  outline: 3px solid #2ed9cd;
  outline-offset: -3px;
}

.feature-display {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #050506;
}

.feature-progress {
  order: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.feature-progress span {
  height: 100%;
  display: block;
  width: var(--feature-progress, 10%);
  background: linear-gradient(90deg, #f05432, #f5e6c8 52%, #2ed9cd);
  transition: width var(--motion-slow) cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-panel {
  order: 2;
  min-height: clamp(590px, 58vw, 790px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  overflow: hidden;
  padding: 0;
  background: #000;
  outline: 0;
}

.feature-panel[hidden] {
  display: none !important;
}

.feature-panel::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 38%, rgba(0, 0, 0, 0.16) 68%, transparent 84%),
    linear-gradient(180deg, transparent 22%, rgba(0, 0, 0, 0.12) 40%, rgba(0, 0, 0, 0.88) 86%, #050506 100%);
}

.feature-banner {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background: #000;
}

.feature-banner picture {
  width: 100%;
  height: 100%;
  display: block;
}

.feature-banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.feature-panel.is-entering .feature-banner img {
  animation: td-launch-image 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.feature-story {
  position: relative;
  z-index: 2;
  width: min(100%, 880px);
  padding: clamp(36px, 6vw, 76px);
  color: var(--deck-ink);
  background: transparent;
}

.feature-story h3 {
  max-width: 15ch;
  margin: 0;
  color: #fff !important;
  font-size: var(--text-display-1);
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.feature-story > p {
  max-width: 62ch;
  margin: 24px 0 0;
  color: #d6d6da !important;
  font-size: var(--text-body-lg);
  line-height: 1.58;
}

.feature-facts {
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.feature-facts li {
  min-height: 38px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  color: #efeff1;
  background: rgba(5, 5, 6, 0.58);
  backdrop-filter: blur(14px);
  font: var(--weight-medium) var(--text-caption)/1.15 var(--td-ui);
}

.feature-graphic {
  display: none !important;
}

.feature-deck-controls {
  order: 3;
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto auto auto;
  grid-template-areas: "link previous position next";
  gap: 10px;
  align-items: center;
  padding: 14px clamp(16px, 3vw, 34px);
  border: 0;
  border-top: 1px solid var(--deck-line);
  background: #101012;
}

.feature-deck-controls .feature-prev {
  grid-area: previous;
}

.feature-deck-controls .feature-position {
  grid-area: position;
}

.feature-deck-controls .feature-next {
  grid-area: next;
}

.feature-deck-controls .feature-all-link {
  grid-area: link;
}

.feature-deck-controls .button {
  min-width: 108px;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  color: #f5f5f7;
  background: #1d1d20;
  background-image: none;
  box-shadow: none;
  font-size: var(--text-body-sm);
  text-align: center;
  white-space: nowrap;
}

.feature-deck-controls .button:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.34);
  background: #28282c;
  transform: translateY(-1px);
}

.feature-deck-controls .button:disabled {
  color: #8f8f96;
  border-color: rgba(255, 255, 255, 0.11);
  background: #171719;
  box-shadow: var(--shadow-inset);
  opacity: 1;
}

.feature-deck-controls .feature-next:not(:disabled) {
  border-color: #f5f5f7;
  color: #111113;
  background: #f5f5f7;
}

.feature-deck-controls .feature-next:hover:not(:disabled) {
  border-color: #fff;
  color: #050506;
  background: #fff;
}

.feature-position {
  min-width: 76px;
  margin: 0;
  color: #8f8f96 !important;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  text-align: center;
}

.feature-position strong {
  color: #f5f5f7 !important;
}

.feature-all-link {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  color: #d6d6da !important;
  font: var(--weight-semibold) var(--text-body-sm)/1.2 var(--td-ui);
  text-decoration-color: #6e6e73;
  text-underline-offset: 5px;
}

.feature-all-link:hover {
  color: #fff !important;
  text-decoration-color: #2ed9cd;
}

.feature-deck-note {
  max-width: 86ch;
  margin: 22px auto 0;
  color: #a7a7ad !important;
  font-size: var(--text-caption);
  line-height: 1.5;
  text-align: center;
}

@keyframes td-launch-image {
  from { opacity: 0.45; transform: scale(1.018); }
  to { opacity: 1; transform: scale(1); }
}

/* Compact appearance control above the music instrument. */
.clay-picker {
  left: 50%;
  right: auto;
  bottom: 86px;
  width: auto;
  min-height: 52px;
  padding: 4px;
  display: block;
  overflow: visible;
  border-radius: var(--radius-lg);
  transform: translateX(-50%);
}

.clay-picker-toggle {
  width: auto;
  height: 44px;
  min-width: 112px;
  min-height: 44px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid rgba(244, 237, 221, 0.3);
  border-radius: var(--radius-md);
  color: #f4eddd;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(0, 0, 0, 0.1)),
    #171c1d;
  box-shadow: var(--shadow-2);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--motion-fast) var(--ease-fast), background-color var(--motion-fast) var(--ease-fast), transform var(--motion-fast) var(--td-ease), box-shadow var(--motion-fast) var(--td-ease);
}

.clay-picker-swatch {
  width: 30px;
  height: 30px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

.clay-picker-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.clay-picker-label {
  color: #aaa397;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.clay-picker-current {
  overflow: hidden;
  color: #f4eddd;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .clay-picker-toggle:hover {
    border-color: rgba(244, 237, 221, 0.48);
    background-color: #202627;
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
  }
}

.clay-picker-toggle:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-inset);
}

.clay-picker-toggle:focus-visible,
.clay-dot:focus-visible {
  outline: 3px solid #2ed9cd;
  outline-offset: 3px;
}

.clay-options {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: 244px;
  min-height: 54px;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid rgba(244, 237, 221, 0.24);
  border-radius: var(--radius-lg);
  background: #111516;
  box-shadow: var(--shadow-3);
  transform: translateX(-50%);
}

.clay-options[hidden] {
  display: none;
}

.clay-options .clay-dot {
  width: auto;
  height: 44px;
  min-width: 0;
  padding: 5px 8px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: #d7d1c5;
  background: #171c1d;
  box-shadow: var(--shadow-inset);
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  text-align: left;
}

.clay-options .clay-dot.is-active {
  color: #fff8e9;
  border-color: rgba(46, 217, 205, 0.78);
  background: #202627;
  box-shadow: 0 0 0 1px rgba(46, 217, 205, 0.16);
}

.clay-option-swatch {
  width: 24px;
  height: 24px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow: var(--shadow-1);
}

.clay-option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-clay="bone"] .mobile-demo-intro {
  --td-bone: #f4eddd;
  --td-muted: #aaa397;
  --td-line: rgba(244, 237, 221, 0.17);
  --td-cyan: #2ed9cd;
  color: var(--td-bone);
}

:root[data-clay="bone"] #try .mobile-intro-kicker {
  color: #2ed9cd;
}

:root[data-clay="bone"] #try .mobile-intro-copy,
:root[data-clay="bone"] #try .mobile-intro-steps small {
  color: #aaa397;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .feature-deck-head {
    display: block;
    margin-bottom: 30px;
  }

  .feature-deck-head h2 {
    max-width: 9ch;
    font-size: var(--text-display-1);
  }

  .feature-deck-head p {
    margin-top: 24px;
    font-size: var(--text-body);
  }

  .feature-console {
    width: calc(100vw - 24px);
    margin-left: calc((100% - (100vw - 24px)) / 2);
    border-radius: var(--radius-lg);
  }

  .feature-tabs {
    padding-inline: 8px;
  }

  .feature-tab {
    min-height: 48px;
    padding-inline: 14px;
  }

  .feature-panel {
    min-height: 0;
    display: block;
    grid-template-columns: none;
    background: #09090a;
  }

  .feature-panel::after {
    display: none;
  }

  .feature-banner {
    position: relative;
    inset: auto;
    aspect-ratio: 1672 / 941;
    border-bottom: 1px solid var(--deck-line);
  }

  .feature-banner img {
    object-fit: cover;
  }

  .feature-story {
    width: 100%;
    padding: 28px 20px 30px;
    background: #09090a;
  }

  .feature-story h3 {
    max-width: 13ch;
    font-size: var(--text-display-2);
    line-height: 0.96;
  }

  .feature-story > p {
    margin-top: 18px;
    font-size: var(--text-body);
  }

  .feature-facts {
    margin-top: 20px;
    gap: 6px;
  }

  .feature-facts li {
    min-height: 36px;
    padding-inline: 11px;
    font-size: var(--text-caption);
  }

  .feature-deck-controls {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "previous position next" "link link link";
    padding: 12px;
  }

  .feature-deck-controls .button {
    min-width: 0;
    width: 100%;
    min-height: 48px;
    padding-inline: 12px;
  }

  .feature-all-link {
    justify-self: center;
    margin-top: 2px;
    text-align: center;
  }

  .feature-deck-note {
    padding-inline: 8px;
    text-align: left;
  }

  .mobile-theme-mount {
    min-height: 52px;
    margin: 6px 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mobile-theme-mount .clay-picker {
    position: relative;
    inset: auto;
    transform: none;
    animation: td-mobile-rail-in 420ms 1.94s var(--td-ease) both;
  }

  .mobile-theme-mount .clay-options {
    top: calc(100% + 8px);
    bottom: auto;
    width: min(244px, calc(100vw - 24px));
  }
}

@media (min-width: 721px) and (max-height: 820px),
       (min-width: 721px) and (max-width: 1120px) {
  .clay-picker {
    position: fixed;
    right: 83px;
    bottom: 152px;
    left: auto;
    transform: none;
  }
}

@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  .music-chip {
    position: fixed;
    right: 14px;
    bottom: 14px;
    left: auto;
    transform: none;
  }

  .music-title,
  .music-volume {
    display: none;
  }

  .music-label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .clay-picker {
    position: fixed;
    right: 83px;
    bottom: 82px;
    left: auto;
    transform: none;
  }
}

/* Disabled actions keep one neutral, readable face in every theme. Earlier
   account and theme rules intentionally carry more specificity, so this final
   component state is placed after them instead of relying on opacity. */
.button:disabled,
.button.primary:disabled,
.account-panel .button:disabled,
.feature-deck-controls .button:disabled {
  color: #9d9990 !important;
  border-color: rgba(244, 237, 221, 0.14) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.12)), #111516 !important;
  box-shadow: var(--shadow-inset) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .feature-panel.is-entering .feature-banner img,
  .mobile-theme-mount .clay-picker {
    animation: none !important;
  }

  .feature-progress span,
  .feature-tab,
  .feature-deck-controls .button {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .feature-console,
  .feature-tabs,
  .feature-deck-controls,
  .feature-story,
  .clay-picker,
  .clay-options,
  .button:disabled {
    border: 1px solid CanvasText;
    background: Canvas !important;
    color: CanvasText !important;
    box-shadow: none !important;
  }

  .feature-panel::after,
  .feature-banner {
    display: none;
  }

  .feature-tab[aria-selected="true"],
  .clay-dot.is-active {
    color: HighlightText;
    background: Highlight;
    border-color: Highlight;
  }
}

/* The detected desktop platform gets the strongest material face. In the
   hero it is the only installer shown (see the rule below); the header and
   the download section keep both. Phone and unknown-platform visitors keep an
   equal choice. This sits after every component coat so the detected state
   cannot be flattened by an older, more general button rule. */
:root[data-download-platform="windows"] .platform-download-windows,
:root[data-download-platform="mac"] .platform-download-mac {
  background-color: #202627;
  box-shadow: inset 0 0 0 1px rgba(215, 180, 102, 0.17);
}

/* One Download in the hero: the visitor's own platform (owner-approved T2). */
:root[data-download-platform="windows"] .hero-install-options .platform-download-mac,
:root[data-download-platform="mac"] .hero-install-options .platform-download-windows {
  display: none;
}

:root[data-download-platform="mac"] .download-buttons .store-button {
  --bubble-fill: #171b1c;
  --bubble-ink: #f4eddd;
  --bubble-border: #343b3c;
  --bubble-floor: #050707;
  --bubble-glow: rgba(0, 0, 0, 0.14);
}

:root[data-download-platform="mac"] .download-buttons .mac-download-button {
  --bubble-fill: #dfc98f;
  --bubble-ink: #111313;
  --bubble-border: #f2deb0;
  --bubble-floor: #8e7848;
  --bubble-glow: rgba(137, 108, 47, 0.17);
}

/* X-392: the theme toggle and the music player are site tools, not the story:
   one quiet row, no entrance choreography.
   The row now lives in the footer at every width. As position: fixed widgets
   they overlapped the hero's third panel, the "Try it live" affordance and the
   buy buttons at 1280, and the demo card at 375. The music player still plays
   the same two tracks and the picker still offers the same seven themes; only
   where they sit has changed. */
.mobile-site-tools {
  width: 100%;
  order: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px 14px;
  padding: 20px 0 0;
  border-top: 1px solid var(--td-line);
}

.mobile-site-tools .mobile-theme-mount,
.mobile-site-tools .mobile-music-mount {
  width: auto;
  min-height: 0;
  margin: 0;
  animation: none;
}

.mobile-site-tools .clay-picker,
.mobile-site-tools .music-chip {
  animation: none;
  position: relative;
  inset: auto;
  transform: none;
}

/* The panel used to hang off a picker pinned to the bottom right, so it was
   centred on its trigger. In the footer the picker sits at the left edge and
   that centring pushed 45px of the panel off the left of a 375px screen. It
   aligns to the trigger's left edge now, and stays inside the viewport. */
.mobile-site-tools .clay-options {
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
  width: min(244px, calc(100vw - 32px));
  transform: none;
}

/* ------------------------------------------------------------------ *
 * NAV: ONE PRIMARY CTA
 *
 * The bar shipped two co-equal filled Download buttons plus a bordered
 * "Sign in", so three of the nav's actions competed and, on a phone, two of
 * them downloaded software that cannot run on the device in the person's
 * hand. Every reference site ships exactly one primary nav CTA.
 *
 * Both anchors, their hrefs, their aria-labels and their
 * data-platform-download attributes are untouched - download-everywhere.js
 * reads those. Which one is filled is decided here, from the platform the
 * page already detects and writes to the root element.
 * ------------------------------------------------------------------ */

/* Quiet is the default for every download link in the bar. */
.nav .nav-platform-download {
  min-width: 0;
  color: var(--td-muted) !important;
  border: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-weight: var(--weight-medium);
}

.nav .nav-platform-download:hover,
.nav .nav-platform-download:focus-visible {
  color: var(--td-bone) !important;
  background: rgba(244, 237, 221, 0.08) !important;
}

/* Exactly one link is promoted, and it sits last in the bar so the primary
   action is always in the same place whichever platform is detected. */
.nav .nav-get,
:root:not([data-download-audience="mac"]):not([data-download-audience="mobile"]) .nav .nav-platform-download[data-platform-download="windows"],
:root[data-download-audience="mac"] .nav .nav-platform-download[data-platform-download="mac"] {
  order: 1;
  min-width: 132px;
  color: var(--td-carbon) !important;
  border: 1px solid #fff8e9 !important;
  background: var(--td-bone) !important;
  background-color: var(--td-bone) !important;
  font-weight: var(--weight-semibold);
}

.nav .nav-get:hover,
.nav .nav-get:focus-visible,
:root:not([data-download-audience="mac"]):not([data-download-audience="mobile"]) .nav .nav-platform-download[data-platform-download="windows"]:hover,
:root[data-download-audience="mac"] .nav .nav-platform-download[data-platform-download="mac"]:hover {
  color: var(--td-carbon) !important;
  background: #fff8e9 !important;
  background-color: #fff8e9 !important;
}

/* The house mark keeps the end of the bar; the promoted link sits just
   before it, in the same place on every platform. */
.nav .nav-helm {
  order: 2;
}

/* Sign in is a destination, not an action. */
.nav .nav-signin {
  min-height: 44px;
  color: var(--td-muted);
  border: 0;
  background: none;
  box-shadow: none;
  font-weight: var(--weight-medium);
}

.nav .nav-signin:hover,
.nav .nav-signin:focus-visible {
  color: var(--td-bone);
  background: rgba(244, 237, 221, 0.08);
}

/* The phone CTA. Hidden until the page knows it is on a phone, or until a
   coarse pointer says so on its own when scripting is off. */
.nav .nav-get {
  display: none;
}

:root[data-download-audience="mobile"] .nav .nav-platform-download {
  display: none;
}

:root[data-download-audience="mobile"] .nav .nav-get {
  display: inline-flex;
}

@media (hover: none) and (pointer: coarse) {
  :root:not([data-download-audience="windows"]):not([data-download-audience="mac"]) .nav .nav-platform-download {
    display: none;
  }

  :root:not([data-download-audience="windows"]):not([data-download-audience="mac"]) .nav .nav-get {
    display: inline-flex;
  }
}

/* The eyebrow inherits the gold accent; on the highlighted platform's gold
   button that put gold on gold. Dark ink there, same as the title. */
:root[data-download-platform="windows"] .final-download-button[data-platform-download="windows"] > span,
:root[data-download-platform="mac"] .final-download-button[data-platform-download="mac"] > span {
  color: rgba(17, 19, 19, 0.66);
}

/* Task A (2026-09-03): the three lanes sit under the hero, Local Forever
   first and fullest. Text and borders only, so the hero's paint stays cheap. */
.hero-lanes {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.hero-lane {
  border: 1px solid var(--stroke, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-lg, 14px);
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  font: var(--weight-regular, 400) var(--text-footnote, 13px)/1.45 var(--td-ui, system-ui);
  color: var(--muted, #b6bcc6);
}
.hero-lane strong {
  color: var(--text, #f4eddd);
  font-weight: var(--weight-semibold, 600);
  font-size: var(--text-subhead, 15px);
}
.hero-lane-local {
  border-color: var(--accent, #d7b466);
}
.hero-lane-local strong {
  color: var(--accent, #d7b466);
}

/* ------------------------------------------------------------------ *
 * 2026-09-23 LAUNCH PASS: the first screen, for the phone traffic the
 * ads send, plus the demo's consent layout, the Bone header and the
 * weight of the first paint.
 *
 * Everything here was measured on the page before and after, at 320,
 * 375, 390, 768, 1024, 1440 and 1920. The numbers in each note are those
 * measurements.
 * ------------------------------------------------------------------ */

/* THE HEADLINE. It is two plain sentences now, not the three-word slogan
   the old rule was written for: max-width 8ch at display-1 fitted "Speak."
   and broke "Dictation for Windows and Mac." into seven lines (78px type in
   a 350px column at 1440; eight lines at 1920).

   The size follows the column, not the viewport. Measured in the display
   face, "Windows and Mac." is 9.0em wide, so the first sentence takes two
   lines whenever the column is at least nine times the type size. Every
   size below keeps that ratio with room to spare, which holds the headline
   to four lines on a desktop and on a 360-430px phone (five at 320). */
.hero h1 {
  max-width: none;
  font-size: clamp(2.5rem, 3.7vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* "Free," is the one word of the headline in the accent colour: the owner's
   call (2026-09-23) was that free is said loudly. */
.hero h1 .hero-free {
  font-style: normal;
  color: var(--td-cyan);
}

/* "Fully formatted" carries in the lead the way "Free" carries above it. */
.hero-lead strong {
  color: var(--td-bone);
  font-weight: var(--weight-semibold);
}

/* The Free line is a badge by the download choice, not grey small print
   under the lead: a filled chip, then the three things free means here. The
   chip sits in the line of text rather than in a flex row, so on a 320px
   phone the sentence wraps beside it instead of dropping under it whole. */
.hero-access {
  width: fit-content;
  max-width: 100%;
  margin: 24px 0 0;
  padding: 6px 14px 6px 6px;
  color: var(--td-bone);
  border: 1px solid rgba(46, 217, 205, 0.38);
  border-radius: var(--radius-lg);
  background: rgba(46, 217, 205, 0.08);
  font: var(--weight-medium) var(--text-body-sm)/1.6 var(--td-ui);
}

.hero-access strong {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 11px;
  color: var(--td-carbon);
  border-radius: var(--radius-md);
  background: var(--td-cyan);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
}

/* The desktop hero: two panels, the promise and the before and after
   (owner-approved T2). The copy panel is wider, so the headline reads as the
   headline. The Pill panel runs full width under them, as on tablets. */
@media (min-width: 1121px) {
  .hero-stage {
    grid-template-columns: minmax(360px, 1.3fr) minmax(330px, 1fr);
  }

  .hero-product {
    grid-column: 1 / -1;
  }

  .hero-copy {
    padding-inline: clamp(34px, 3.4vw, 60px);
  }
}

/* A mouse-driven window between phone and tablet width keeps two panels;
   the column there is about 320px, so the type steps down to keep four
   lines. (Touch devices at these widths take the phone layout.) */
@media (min-width: 721px) and (max-width: 900px) {
  .hero h1 {
    font-size: 2.125rem;
  }
}

/* The example used to start 300-480px below the top of its cream panel,
   because the panel centred a short column beside a much taller one. It
   starts level with the headline now. The Pill panel runs full width under
   the two panels, or stacks on phones. */
.hero-writing {
  justify-content: flex-start;
}

.writing-block + .writing-block {
  margin-top: clamp(40px, 6vh, 72px);
}

@media (min-width: 1121px) {
  .hero-product {
    justify-content: flex-start;
  }

  .product-label {
    margin-bottom: clamp(48px, 8vh, 96px);
  }
}

/* SEND THE LINK TO MY COMPUTER. A phone cannot run either installer, so on
   a phone this is the primary action and the downloads become the secondary
   choice. The condition is copied exactly from the header's "Get Talk DAT!"
   (the NAV: ONE PRIMARY CTA block above), which links here, so whenever that
   link shows, its target shows too. */
.hero-send {
  display: none;
  width: min(100%, 470px);
  gap: 8px;
  margin-top: 22px;
}

.hero-send .hero-send-button {
  width: 100%;
  min-height: 56px;
  border-radius: var(--radius-lg);
  font-size: var(--text-body);
}

.hero-send-note {
  margin: 0;
  color: var(--td-muted);
  font-size: var(--text-caption);
  line-height: 1.4;
  text-align: center;
}

:root[data-download-audience="mobile"] .hero-send {
  display: grid;
}

/* The downloads stay, one step quieter: smaller rows, outlined arrows, and
   no second "free" line under them now that the badge says it once. */
:root[data-download-audience="mobile"] .hero-install-dock {
  margin-top: 18px;
  box-shadow: none;
}

:root[data-download-audience="mobile"] .hero-install-heading {
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding-block: 11px;
}

:root[data-download-audience="mobile"] .hero-install-heading strong {
  text-align: left;
}

:root[data-download-audience="mobile"] .platform-download {
  min-height: 56px;
  grid-template-columns: 36px minmax(0, 1fr) 26px;
  padding-block: 8px;
}

:root[data-download-audience="mobile"] .platform-download-stamp {
  width: 36px;
  height: 36px;
  letter-spacing: 0.02em;
}

:root[data-download-audience="mobile"] .platform-download-arrow {
  width: 26px;
  height: 26px;
  color: #f4eddd;
  border: 1px solid rgba(244, 237, 221, 0.28);
  background: transparent;
  box-shadow: none;
}

:root[data-download-audience="mobile"] .hero-install-dock > p {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  :root:not([data-download-audience="windows"]):not([data-download-audience="mac"]) .hero-send {
    display: grid;
  }

  :root:not([data-download-audience="windows"]):not([data-download-audience="mac"]) .hero-install-dock {
    margin-top: 18px;
    box-shadow: none;
  }

  :root:not([data-download-audience="windows"]):not([data-download-audience="mac"]) .hero-install-heading {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding-block: 11px;
  }

  :root:not([data-download-audience="windows"]):not([data-download-audience="mac"]) .hero-install-heading strong {
    text-align: left;
  }

  :root:not([data-download-audience="windows"]):not([data-download-audience="mac"]) .platform-download {
    min-height: 56px;
    grid-template-columns: 36px minmax(0, 1fr) 26px;
    padding-block: 8px;
  }

  :root:not([data-download-audience="windows"]):not([data-download-audience="mac"]) .platform-download-stamp {
    width: 36px;
    height: 36px;
    letter-spacing: 0.02em;
  }

  :root:not([data-download-audience="windows"]):not([data-download-audience="mac"]) .platform-download-arrow {
    width: 26px;
    height: 26px;
    color: #f4eddd;
    border: 1px solid rgba(244, 237, 221, 0.28);
    background: transparent;
    box-shadow: none;
  }

  :root:not([data-download-audience="windows"]):not([data-download-audience="mac"]) .hero-install-dock > p {
    display: none;
  }
}

/* THE PHONE FIRST SCREEN. Measured at 390x844 before this pass: the hero
   began 140px down under 76px of padding, repeated the header's icon, and
   set the headline in six lines, so "Free" and every action sat below the
   fold. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .hero-copy {
    padding: 30px 20px 44px;
  }

  .hero-name {
    margin-bottom: 12px;
  }

  /* The header already carries the Talk Stone; the hero showed it again
     90px lower. The name stays as the eyebrow, the second icon goes. */
  .hero-name img {
    display: none;
  }

  .hero h1 {
    max-width: none;
    font-size: clamp(2.125rem, 9.25vw + 0.1rem, 2.75rem);
    line-height: 1.04;
  }

  .hero-lead {
    margin-top: 16px;
    font-size: var(--text-body-lg);
    line-height: 1.5;
  }

  .hero-access {
    margin-top: 20px;
  }

  .hero-send {
    width: 100%;
    margin-top: 20px;
  }
}

/* 320-360px phones: one step down on the lead, so the badge and "Send the
   link to my computer" still reach the first screen on a 568px-tall one. */
@media (max-width: 360px) {
  .hero-copy {
    padding-top: 24px;
  }

  .hero-lead {
    font-size: var(--text-body);
  }

  .hero-access {
    margin-top: 16px;
  }
}

/* THE DEMO'S CONSENT PANEL. On a phone the demo card is one grid and its
   two columns are flattened into it (display: contents), and every item
   there has an order and a column span except this panel and the "Continue
   on your computer" card. Both were auto-placed first: the card beside the
   Pill, the panel into the grid's narrow auto column. Measured at 390: the
   panel 38px wide and 1494px tall, "Start the preview" 42x235 with its
   label stacked letter by letter. The same flattening applies to any touch
   screen, which is why a 1024px tablet was squeezed too. */
.demo-consent {
  align-self: stretch;
  width: 100%;
  max-width: none;
  margin: 18px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--td-line);
  border-radius: var(--radius-lg);
  background: rgba(244, 237, 221, 0.045);
}

.demo-consent-lead {
  font-size: var(--text-body);
}

.demo-consent-body,
.demo-consent-accept {
  font-size: var(--text-body-sm);
}

.demo-consent-accept input {
  width: 20px;
  height: 20px;
  margin-top: 0;
  accent-color: var(--td-cyan);
}

@media (max-width: 900px) {
  .demo-consent .button {
    width: 100%;
    min-height: 52px;
  }
}

/* In the two-column demo the continue card was the stage's third child, so
   it landed in the left column alone with its buttons spilling past its own
   edge into the right one. It runs the full width of the stage now, as its
   footer. */
.demo-stage > .download-return {
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(22px, 2.6vw, 34px) clamp(30px, 4.6vw, 64px);
  border-width: 1px 0 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .demo-consent {
    grid-column: 1 / -1;
    order: 4;
    margin-top: 12px;
    padding: 16px;
  }

  .demo-consent .button {
    width: 100%;
    min-height: 52px;
  }

  .demo-stage > .download-return {
    grid-column: 1 / -1;
    order: 15;
    margin-top: 22px;
    padding: 18px;
    border-width: 1px;
    border-radius: var(--radius-lg);
  }
}

/* The two Talk Stones below the fold now carry width and height attributes
   so the browser reserves their space; their CSS sets the width, so the
   height has to follow it. */
.download-visual img,
.statement-mark {
  height: auto;
}

/* THE TEXTURE WAITS ON A PHONE. The roman-clay texture is 48 KB of
   decoration there (3.5% behind every button, 13% behind the page, and the
   Pill panel is below the fold), and it was fetched at high priority beside
   the stylesheet and the fonts. The page's script adds .td-textures after
   the first paint, once the image is decoded. Desktop keeps it from the
   start: the Pill panel is in the first screen. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  :root:not(.td-textures) {
    --td-bubble-texture: none;
  }

  :root:not(.td-textures) body::before {
    background-image: none;
  }

  :root:not(.td-textures) .hero-product {
    background-image: none !important;
  }

  /* The demo's limit dialog names the texture in index.html's own styles,
     and Chrome fetches it while the dialog is still closed. */
  :root:not(.td-textures) .demo-limit-surface {
    background-image: none;
  }
}

/* BONE, THE ONE LIGHT CLAY, part 4.
 *
 * 1. The header and the footer stay dark in bone, but an inline rule paints
 *    every `.shell > *` with the cream clay panel, and the header's brand
 *    and nav are exactly that. "Sign in" and "Download for Mac" kept their
 *    light text and landed on cream at 1.48:1, and the footer's download
 *    links at 1.44. Both bars are dark islands now, with the same token
 *    flip-back the demo panes use, and their inner shells paint nothing.
 * 2. "See what it does" sits on the hero's dark strip and took the root's
 *    dark ink: 1.61. The security band is kept dark in every clay on
 *    purpose, and its inner shell was painted cream the same way as the
 *    bars, which left its privacy link at 3.87. Same flip-back for both.
 * 3. The page ground. Bone's panels are 78% cream over the texture layer,
 *    but the root under both was still carbon, so wherever the texture is
 *    not drawn (before it loads, or when it fails) the cream turned grey and
 *    the muted ink measured 4.44. The root is the colour of the plaster now.
 * Night is untouched: every selector here names a clay. */
:root[data-clay="bone"] {
  background-color: #e8e0d0;
}

:root[data-clay="bone"]:not([data-clay="night"]) .topbar,
:root[data-clay="bone"]:not([data-clay="night"]) footer,
:root[data-clay="bone"]:not([data-clay="night"]) .security,
:root[data-clay="bone"]:not([data-clay="night"]) .hero-next {
  --td-bone: #f4eddd;
  --td-bone-soft: #ded3c1;
  --td-muted: #aaa397;
  --td-line: rgba(244, 237, 221, 0.17);
  --td-cyan: #2ed9cd;
  --td-brass: #d7b466;
  --td-ember: #f05432;

  --bone: #f4eddd;
  --bone-muted: #aaa397;
  --cyan: #2ed9cd;
  --gold: #d7b466;
  --ember: #f05432;
  --line: rgba(244, 237, 221, 0.17);

  --clay-ink: #f4eddd;
  --clay-muted: #c8bdab;
  color: var(--td-bone);
}

:root[data-clay]:not([data-clay="night"]) .topbar .shell > *,
:root[data-clay]:not([data-clay="night"]) footer .shell > *,
:root[data-clay]:not([data-clay="night"]) .security .shell > * {
  background-color: transparent;
}

/* X-765: the trademark credit every footer carries. Its own row, quiet. */
.footer-trademarks {
  flex: 0 0 auto;
  width: 100%;
  max-width: 78ch;
  margin: 0 max(0px, calc(100% - 78ch)) 0 0;
  color: var(--td-muted);
  font-size: var(--text-caption);
  line-height: 1.55;
}