/* Re-fingerprinted 2026-07-30: a request arriving mid-deploy was answered with
   the 404 fallback and pinned by the immutable header. Cause fixed by src/404.njk
   and by dropping `immutable` from src/_headers. */
/* Thermometer — parametric identity seeded by temperature.
   Every value below marked "seeded" is re-derived at runtime from one number:
   the temperature on the instrument. See site.js. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Seeded — defaults describe a mild 21 °C reading so the page is complete without JS. */
  --seed-t: 0.586;
  --seed-hue: 51.9;
  --seed-chroma: 0.129;
  --seed-accent: oklch(0.74 0.129 51.9);
  --seed-accent-quiet: oklch(0.62 0.098 51.9);
  --seed-harmony: oklch(0.8 0.104 202);
  --seed-field: oklch(0.24 0.054 51.9);
  --seed-field-far: oklch(0.17 0.031 231.9);
  --seed-glow: oklch(0.74 0.129 51.9 / 0.26);
  --seed-wdth: 103;
  --seed-wght: 672;
  /* Narrower swing for the display line: wide enough to read as seeded, never enough to rewrap. */
  --seed-wdth-display: 102;
  --seed-wght-display: 668;

  /* Fixed ground — the instrument's housing does not change with the reading. */
  --surface-page: #0a0d12;
  --surface-panel: #101620;
  --surface-panel-high: #161e2a;
  --surface-inset: #070a0e;
  --surface-light: #eef2f6;

  /* Device bezel, the one physical material on the page besides mercury. */
  --bezel-light: #29323d;
  --bezel-dark: #0d1116;
  --bezel-edge: #232b35;

  --text-primary: #f4f7fa;
  --text-secondary: #a9b6c6;
  /* #71818f fell to 4.18:1 on --surface-panel-high, which carries the product
     CTA and table headers. +6 per channel clears 4.5:1 on every surface. */
  --text-tertiary: #778795;
  --text-on-light: #101620;
  --text-on-light-secondary: #4a5a6b;

  /* Text that sits on the seeded accent. */
  --text-on-accent: #0b0e13;

  /* Mercury is mercury. The instrument never lies about its own material. */
  --mercury: #f2381f;
  --mercury-bright: #ff6242;
  --mercury-deep: #8c1a0c;
  --mercury-glow: rgb(255 20 8 / 0.42);

  /* Engraved scale, coloured by sign the way the app's dial is. Never the only carrier of meaning. */
  --tick-warm: #ff9a4d;
  --tick-cold: #58c8dd;

  --border-subtle: color-mix(in oklab, var(--text-primary) 11%, transparent);
  --border-strong: color-mix(in oklab, var(--text-primary) 22%, transparent);
  --border-seeded: color-mix(in oklab, var(--seed-accent) 34%, transparent);

  /* A bordered block after prose always gets this much air. Panels crowding the
     paragraph above them was a recurring fault; this is the single knob. */
  --gap-panel: 44px;

  --radius-control: 12px;
  --radius-panel: 20px;
  --radius-feature: 28px;

  --shadow-panel: 0 24px 60px -28px rgb(0 0 0 / 0.75);
  --shadow-media: 0 40px 90px -40px rgb(0 0 0 / 0.85);

  --page-max: 1240px;
  --gutter: 24px;
  --section-gap: clamp(80px, 11vw, 148px);

  --ease-instrument: cubic-bezier(0.32, 0.72, 0.24, 1);
}

@media (max-width: 720px) {
  :root {
    --gutter: 14px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.62;
  font-variation-settings: "wdth" 100, "wght" 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* While the instrument is being dragged, seeded colour lands instantly: a 620ms
   gradient interpolation restarted on every pointermove repaints the whole
   viewport continuously. The eased sweep returns the moment the drag ends. */
body.is-dragging *,
body.is-dragging *::before,
body.is-dragging *::after {
  transition-duration: 0s !important;
}

/* The seeded field: one colour region that owns the page, re-derived from the reading. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 82% at 74% 0%, var(--seed-field) 0%, transparent 62%),
    radial-gradient(94% 70% at 4% 104%, var(--seed-field-far) 0%, transparent 58%);
  transition: background 620ms var(--ease-instrument);
  pointer-events: none;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 1.55rem + 3.6vw, 4.15rem);
  font-variation-settings: "wdth" var(--seed-wdth-display), "wght" var(--seed-wght-display);
  transition: font-variation-settings 620ms var(--ease-instrument);
}

h2 {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.4rem);
  font-variation-settings: "wdth" 96, "wght" 620;
}

h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-variation-settings: "wdth" 100, "wght" 600;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

em {
  font-style: normal;
  color: var(--seed-accent);
  transition: color 620ms var(--ease-instrument);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 14px 20px;
  background: var(--surface-light);
  color: var(--text-on-light);
  border-radius: 0 0 var(--radius-control) 0;
  font-variation-settings: "wght" 600;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--seed-harmony);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Shell ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 14px var(--gutter);
  background: color-mix(in oklab, var(--surface-page) 82%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-subtle);
}

@supports not (backdrop-filter: blur(4px)) {
  .site-header {
    background: var(--surface-page);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-variation-settings: "wdth" 96, "wght" 700;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  min-height: 44px;
}

/* The app's own icon, at the size it reads at in the App Store list. */
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
}

.site-header nav {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.site-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.94rem;
  border-radius: var(--radius-control);
  transition: color 180ms var(--ease-instrument), background 180ms var(--ease-instrument);
}

.site-header nav a:hover {
  color: var(--text-primary);
  background: color-mix(in oklab, var(--seed-accent) 12%, transparent);
}

@media (max-width: 900px) {
  .site-header nav {
    display: none;
  }
}

/* Below 900px the link row is replaced by a native disclosure, so wayfinding
   never collapses to the footer alone. */
.nav-menu {
  display: none;
  position: relative;
  margin-left: auto;
}

.nav-menu summary {
  display: grid;
  align-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  list-style: none;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary span {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: var(--text-secondary);
}

.nav-menu[open] summary {
  border-color: color-mix(in oklab, var(--seed-accent) 46%, transparent);
}

.nav-menu-sheet {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  display: grid;
  min-width: 216px;
  padding: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

.nav-menu-sheet a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  border-radius: var(--radius-control);
  text-decoration: none;
  color: var(--text-secondary);
}

.nav-menu-sheet a:hover {
  color: var(--text-primary);
  background: color-mix(in oklab, var(--seed-accent) 12%, transparent);
}

@media (max-width: 900px) {
  .nav-menu {
    display: block;
  }
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--seed-accent);
  color: var(--text-on-accent);
  text-decoration: none;
  font-size: 0.94rem;
  font-variation-settings: "wdth" 98, "wght" 680;
  transition: transform 180ms var(--ease-instrument), background 620ms var(--ease-instrument),
    box-shadow 180ms var(--ease-instrument);
  box-shadow: 0 10px 26px -12px var(--seed-glow);
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -12px var(--seed-glow);
}

.site-header .nav-cta {
  margin-left: 8px;
}

/* Compact header order: brand, then the store action, then the menu. */
@media (max-width: 900px) {
  .site-header .nav-cta {
    margin-left: auto;
    order: 2;
  }

  .nav-menu {
    margin-left: 0;
    order: 3;
  }
}

main {
  display: block;
}

.section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  margin-block-start: var(--section-gap);
}

.section-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 88, "wght" 680;
  color: var(--seed-harmony);
  margin-block-end: 14px;
  transition: color 620ms var(--ease-instrument);
}

.lede {
  color: var(--text-secondary);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.28rem);
  max-width: 56ch;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--seed-harmony);
  text-decoration: none;
  font-variation-settings: "wght" 600;
  transition: color 620ms var(--ease-instrument), gap 180ms var(--ease-instrument);
}

.text-link:hover {
  gap: 13px;
}

/* ---------- Hero ---------- */

.hero {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 68px) var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero-copy > * + * {
  margin-block-start: 26px;
}

.hero-copy > * + .trust-row {
  margin-block-start: 34px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px 7px 11px;
  border: 1px solid var(--border-seeded);
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 90, "wght" 640;
  color: var(--text-secondary);
  transition: border-color 620ms var(--ease-instrument);
}

.hero-eyebrow span:first-child {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mercury);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--mercury) 22%, transparent);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.app-store-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 24px 0 20px;
  border-radius: 999px;
  background: var(--surface-light);
  color: var(--text-on-light);
  text-decoration: none;
  transition: transform 180ms var(--ease-instrument), box-shadow 180ms var(--ease-instrument);
  box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.9);
}

.app-store-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 50px -22px rgb(0 0 0 / 0.9);
}

.app-store-button svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
  flex: none;
}

.app-store-button span {
  display: grid;
  line-height: 1.15;
  font-variation-settings: "wdth" 96, "wght" 700;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}

.app-store-button small {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 88, "wght" 560;
  color: var(--text-on-light-secondary);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-row li {
  padding: 6px 13px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-variation-settings: "wdth" 94, "wght" 520;
}

/* ---------- The instrument ---------- */

.instrument {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 3vw, 34px);
  align-items: center;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-feature);
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

/* The instrument render is transparent outside its housing, so the panel keeps a
   seeded wash behind it without any visible image edge. */
.instrument::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(74% 52% at 50% 0%, color-mix(in oklab, var(--seed-accent) 13%, transparent) 0%, transparent 72%);
  transition: background 620ms var(--ease-instrument);
  pointer-events: none;
  z-index: -1;
}

/* The instrument is the app's own AnalogThermometerView, rendered from the app
   source at 3x with an empty tube, plus the app's real MercuryColumn asset
   revealed from the bulb. Geometry below is the view's own, in percentages of
   the 420x2010 render, so the two layers stay locked at every size. */
.instrument-glass {
  position: relative;
  /* Sized by height: the real instrument is far more slender than it is tall. */
  height: clamp(340px, 52vw, 560px);
  aspect-ratio: 420 / 1610;
  width: auto;
  /* The render is framed as an instrument in its well, so the app's own red
     bloom is contained by a deliberate edge instead of a stray image boundary. */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  flex: none;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  --mercury-reveal: 63.93%;
}

.instrument-glass:active {
  cursor: grabbing;
}

.instrument-shell {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.instrument-mercury {
  position: absolute;
  left: 29.51%;
  top: 12.91%;
  width: 40.97%;
  height: 84.61%;
  clip-path: inset(calc(100% - var(--mercury-reveal)) 0 0 0 round 24% / 3%);
  filter: drop-shadow(0 0 8px var(--mercury-glow));
  transition: clip-path 620ms var(--ease-instrument);
  pointer-events: none;
}

.instrument-readout {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.readout-primary {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 0.86;
  font-size: clamp(3.4rem, 2rem + 7vw, 6rem);
  font-variation-settings: "wdth" var(--seed-wdth), "wght" var(--seed-wght);
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  transition: font-variation-settings 620ms var(--ease-instrument);
}

.readout-primary sup {
  font-size: 0.42em;
  line-height: 1;
  top: 0.18em;
  position: relative;
  letter-spacing: 0;
  color: var(--seed-accent);
  transition: color 620ms var(--ease-instrument);
}

.readout-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.readout-secondary strong {
  color: var(--text-primary);
  font-variation-settings: "wght" 640;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
}

.readout-band {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: start;
  padding: 7px 15px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--seed-accent) 13%, transparent);
  border: 1px solid color-mix(in oklab, var(--seed-accent) 52%, transparent);
  color: var(--seed-accent);
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 90, "wght" 660;
  transition: background 620ms var(--ease-instrument), border-color 620ms var(--ease-instrument);
}

.instrument-hint {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding-block-start: 6px;
  color: var(--text-tertiary);
  font-size: 0.84rem;
}

.instrument-hint kbd {
  font: inherit;
  padding: 2px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-secondary);
}

@media (max-width: 560px) {
  .instrument {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .instrument-readout {
    justify-items: center;
  }

  .readout-band {
    justify-self: center;
  }
}

/* ---------- Seed strip ---------- */

.seedstrip {
  border-block: 1px solid var(--border-subtle);
  background: color-mix(in oklab, var(--surface-panel) 60%, transparent);
}

.seedstrip-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(26px, 4vw, 44px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px 40px;
  align-items: center;
}

@media (max-width: 860px) {
  .seedstrip-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.seedstrip h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  max-width: 34ch;
}

.seedstrip p {
  color: var(--text-secondary);
  max-width: 58ch;
  margin-block-start: 12px;
}

.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.preset {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  padding: 9px 17px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-subtle);
  background: var(--surface-inset);
  color: var(--text-secondary);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 180ms var(--ease-instrument), color 180ms var(--ease-instrument),
    transform 180ms var(--ease-instrument);
}

.preset strong {
  color: var(--text-primary);
  font-variation-settings: "wdth" 94, "wght" 700;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}

.preset small {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Hover states pull from the active seed, like every other accent on the page. */
.preset:hover {
  transform: translateY(-2px);
  color: var(--text-primary);
  border-color: color-mix(in oklab, var(--seed-accent) 46%, transparent);
}

.preset[aria-pressed="true"] {
  border-color: var(--seed-accent);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--seed-accent);
}

/* ---------- Split feature blocks ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}

.split.reverse .split-media {
  order: -1;
}

@media (max-width: 920px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .split.reverse .split-media {
    order: 0;
  }
}

.split-copy > * + * {
  margin-block-start: 20px;
}

.split-copy > .fact-list + *,
.split-copy > * + .fact-list {
  margin-block-start: var(--gap-panel);
}

.fact-list {
  /* A bordered block needs more air above it than a paragraph does. */
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.fact-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 15px 20px;
  background: var(--surface-panel);
}

.fact-list b {
  font-variation-settings: "wdth" 86, "wght" 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--seed-harmony);
  transition: color 620ms var(--ease-instrument);
}

.fact-list span {
  color: var(--text-secondary);
}

.phone {
  position: relative;
  margin: 0 auto;
  width: min(100%, 330px);
  border-radius: 42px;
  padding: 9px;
  background: linear-gradient(168deg, var(--bezel-light) 0%, var(--bezel-dark) 46%, var(--bezel-edge) 100%);
  box-shadow: var(--shadow-media);
}

.phone img {
  border-radius: 34px;
  aspect-ratio: 660 / 1434;
  width: 100%;
}

.phone::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 34px;
  border: 1px solid color-mix(in oklab, var(--text-primary) 9%, transparent);
  pointer-events: none;
}

.split-media {
  position: relative;
}

/* A radial gradient, not a blurred box: same bloom, no filter pass on scroll. */
.split-media::before {
  content: "";
  position: absolute;
  inset: 6% -10% 6% -10%;
  background: radial-gradient(closest-side, var(--seed-glow) 0%, transparent 100%);
  z-index: -1;
  transition: background 620ms var(--ease-instrument);
  pointer-events: none;
}

/* ---------- Widgets ---------- */

.widget-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
  gap: 20px;
  margin-block-start: var(--gap-panel);
}

.widget-card {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-feature);
  background: var(--surface-panel);
}

.widget-card > .widget-face {
  align-self: center;
}

.widget-card > figcaption {
  display: grid;
  gap: 5px;
}

.widget-card figcaption strong {
  font-variation-settings: "wdth" 94, "wght" 680;
  letter-spacing: -0.01em;
}

.widget-card figcaption span {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.widget-card img {
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.85);
}

.widget-note {
  margin-block-start: 26px;
  color: var(--text-tertiary);
  font-size: 0.88rem;
  max-width: 76ch;
}

/* Every language the app ships in, in its own script. Proof, not a claim. */
.language-row {
  margin: clamp(30px, 4vw, 52px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  border-top: 1px solid var(--border-subtle);
  padding-block-start: clamp(24px, 3vw, 34px);
}

.language-row li {
  padding: 7px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-variation-settings: "wdth" 96, "wght" 520;
  transition: border-color 620ms var(--ease-instrument), color 180ms var(--ease-instrument);
}

.language-row li:first-child {
  border-color: color-mix(in oklab, var(--seed-accent) 46%, transparent);
  color: var(--text-primary);
}

/* ---------- Privacy ---------- */

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  overflow: hidden;
  margin-block-start: var(--gap-panel);
}

.after-panel {
  margin-block-start: 24px;
}

.privacy-grid div {
  padding: 24px 22px;
  background: var(--surface-panel);
  display: grid;
  gap: 8px;
  align-content: start;
}

.privacy-grid b {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-variation-settings: "wdth" 88, "wght" 660;
}

.privacy-grid strong {
  font-size: 1.16rem;
  font-variation-settings: "wdth" 94, "wght" 680;
  letter-spacing: -0.02em;
}

/* ---------- FAQ ---------- */

.faq-list {
  display: grid;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  overflow: hidden;
  margin-block-start: var(--gap-panel);
}

.faq-list details {
  background: var(--surface-panel);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  padding: 14px 22px;
  cursor: pointer;
  font-variation-settings: "wdth" 96, "wght" 620;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--seed-harmony);
  transition: transform 220ms var(--ease-instrument), color 620ms var(--ease-instrument);
}

.faq-list details[open] summary span {
  transform: rotate(45deg);
}

.faq-list p {
  padding: 0 22px 20px;
  color: var(--text-secondary);
  max-width: 74ch;
}

/* ---------- Closing ---------- */

.closing {
  max-width: var(--page-max);
  margin: var(--section-gap) auto 0;
  padding: clamp(48px, 7vw, 92px) var(--gutter);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 24px;
  border-top: 1px solid var(--border-subtle);
}

.closing img {
  width: clamp(88px, 12vw, 118px);
  aspect-ratio: 1;
  border-radius: 24px;
  box-shadow: 0 26px 50px -26px rgb(0 0 0 / 0.9);
}

.closing p {
  color: var(--text-secondary);
  max-width: 46ch;
}

.attribution {
  color: var(--text-tertiary);
  font-size: 0.86rem;
}

.site-footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 34px var(--gutter) 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: 0.9rem;
  margin-block-start: var(--section-gap);
}

.closing + .site-footer {
  margin-block-start: 0;
  border-top: 0;
}

.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-left: auto;
}

.site-footer .footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  text-decoration: none;
  color: var(--text-secondary);
}

.site-footer .footer-links a:hover {
  color: var(--text-primary);
}

.site-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-variation-settings: "wdth" 96, "wght" 640;
}

.site-footer .footer-brand img {
  width: 34px;
  border-radius: 9px;
}

.site-footer p {
  flex-basis: 100%;
}

/* ---------- Prose pages ---------- */

.prose-page {
  max-width: 74ch;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) var(--gutter) 0;
}

.prose-page h1 {
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
}

.prose-page h2 {
  font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
  margin-block-start: 44px;
}

.prose-page > p {
  margin-block-start: 18px;
  color: var(--text-secondary);
}

.prose-page > ul {
  margin-block-start: 24px;
  color: var(--text-secondary);
}

.prose-page ul {
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.prose-page .updated {
  color: var(--text-tertiary);
  font-size: 0.88rem;
  margin-block-start: 16px;
}

.support-card {
  margin-block-start: var(--gap-panel);
  padding: 24px;
  border: 1px solid var(--border-seeded);
  border-radius: var(--radius-panel);
  background: var(--surface-panel);
  display: grid;
  gap: 10px;
}

.support-card strong {
  font-variation-settings: "wdth" 96, "wght" 700;
  font-size: 1.1rem;
}

.support-card a {
  color: var(--seed-harmony);
  font-variation-settings: "wght" 600;
}

/* ---------- Motion ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease-instrument), transform 700ms var(--ease-instrument);
  transition-delay: var(--delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Reduced motion keeps the feedback and drops the movement: nothing travels,
   slides or reshapes, but seeded colour still cross-fades quickly enough to
   read as a state change rather than a jump cut. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  h1,
  .readout-primary {
    transition: none;
  }

  .instrument-mercury,
  .nav-cta:hover,
  .preset:hover,
  .app-store-button:hover,
  .text-link:hover {
    transition-property: none;
    transform: none;
  }

  body::before,
  em,
  .section-kicker,
  .fact-list b,
  .text-link,
  .readout-band,
  .readout-primary sup,
  .nav-cta,
  .split-media::before {
    transition-duration: 140ms;
  }
}