/*
  Foremost — one stylesheet for the whole site: the homepage and the two legal pages.
  The visual world is the app's: DESIGN.md "Machined Instrument", seed 2740151b.

  Two rules that are not style preferences:
  - `--signal` is the armed colour and nothing else. It lights lamps and washes an armed
    plate. It is never a button, never a link, never a heading. The primary key is ivory.
  - A panel is a seam, not a border: one light hairline on top, one shadow hairline under.
    A uniform outline reads as a drawn rectangle.

  Archivo (SIL OFL 1.1, assets/fonts/OFL.txt) carries exactly two roles — the wordmark and
  the engraved legends. Everything a visitor reads as prose stays on the system stack.
*/

@font-face {
  font-family: "Archivo Expanded";
  src: url("assets/fonts/ArchivoExpanded-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo SemiCondensed";
  src: url("assets/fonts/ArchivoSemiCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --graphite: #14161a;
  --plate: #1b1e23;
  --plate-hi: #23272e;
  --content: #ede9e0;
  --muted: #949286;
  /*
    DESIGN.md §2 measures this one at 2.9:1 and quarantines it: "≥18px or non-essential
    only. Effectively unused." It is defined so the palette is complete and is deliberately
    not used for any text on this site — the placeholder and the footer were on it, at
    4.15:1 and 3.97:1, both under the floor.
  */
  --faint: #63625b;
  --divider: rgba(255, 255, 255, 0.07);
  --seam-lit: rgba(255, 255, 255, 0.07);
  --seam-shade: rgba(0, 0, 0, 0.45);
  --signal: #ff5a2b;
  --signal-ink: #1a0a03;
  --signal-dim: rgba(255, 90, 43, 0.13);
  --caution: #e0a03a;
  --page: 1180px;
  --reading: 740px;
  --radius: 14px;
  --machined: cubic-bezier(0.2, 0, 0, 1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

/*
  A grid or flex item will not shrink below its content's minimum, and a replaced element's
  minimum is its intrinsic width — the screenshots are 560px wide, so a column holding one
  demanded 560px and took the whole page's horizontal scroll with it on a phone.
*/
img { max-width: 100%; height: auto; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 180px),
    var(--graphite);
  color: var(--content);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: var(--content);
  color: var(--graphite);
  border-radius: 8px;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--graphite);
  border-bottom: 1px solid var(--seam-shade);
}

.site-header::after,
.seam::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--seam-lit);
}

.nav {
  width: min(calc(100% - 40px), var(--page));
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

/*
  The real app icon, not a drawn stand-in. It is a dark icon on a dark ground, so the
  hairline ring is what keeps it an object rather than a smudge — the same seam logic the
  plates use, at icon scale.
*/
.brand-mark {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: block;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.brand-mark img { display: block; width: 100%; height: 100%; }

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events: none;
}

.nav-links { display: flex; align-items: center; gap: 26px; }

.nav-links a {
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  transition: color 130ms ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--content); }

.shell { width: min(calc(100% - 40px), var(--page)); margin: 0 auto; }

/* Engraved legend — Archivo SemiCondensed, the app's `EngravedLabel`. */
.legend {
  font-family: "Archivo SemiCondensed", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lamp {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 2px 8px rgba(255,90,43,.26);
  transition: background 220ms ease, box-shadow 220ms ease;
}

.lamp.out { background: var(--faint); box-shadow: none; }

.seam { height: 2px; background: var(--seam-shade); }

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  transition: transform 130ms var(--machined), background 130ms ease;
}

.button:active { transform: translateY(1px); }
.button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--content); outline-offset: 4px; }
.button-primary { background: var(--content); color: var(--graphite); }
.button-primary:hover { background: #fffdf7; }
.button-primary[disabled] { background: var(--plate-hi); color: var(--muted); cursor: default; transform: none; }
.button-secondary { background: var(--plate); color: var(--content); box-shadow: inset 0 1px var(--seam-lit), 0 1px var(--seam-shade); }
.button-secondary:hover { background: var(--plate-hi); }

/* ---------------------------------------------------------------------------
   The gauge — the masthead register, carried in the site header on the homepage.
   It counts 3 → 2 → 1 → 0 as the page is scrolled, and the lamp goes out at zero:
   the app's own stand-down, performed by the page. Decorative reinforcement of what
   the sections already say in words, so it is hidden from assistive technology.
   --------------------------------------------------------------------------- */

.gauge { display: flex; align-items: center; gap: 10px; }

/*
  The window the digit rolls inside. It must not move: an earlier version transformed this
  element itself, which carried its own `overflow: hidden` clip along with the content — so
  instead of a digit rolling behind a fixed edge, the whole number slid out of the header
  and snapped back. The window stays put; the digits travel.
*/
.gauge-count {
  position: relative;
  display: inline-block;
  overflow: hidden;
  min-width: 1ch;
  height: 1em;
  font-family: "Archivo Expanded", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  vertical-align: bottom;
}

.gauge-digit { display: block; line-height: 1; }
.gauge-digit.is-incoming { position: absolute; left: 0; top: 100%; }

.gauge-unit { max-width: 8ch; }
.gauge-state { display: flex; align-items: center; gap: 7px; margin-left: 6px; }

/* ---------------------------------------------------------------------------
   Nameplate — the name struck into the front panel, one seam, the promise under it.
   Same lockup as the app's first screen.
   --------------------------------------------------------------------------- */

/*
  One panel, not two islands. The copy and the screen used to sit at opposite edges with a
  180px void between them, because the right column was sized by a fraction rather than by
  the thing inside it. Now the nameplate is a band across the whole width — the wordmark,
  one seam running to the page edge, the promise struck under it — and both columns hang
  from that same line. It is the trailing rule DESIGN.md §5 gives `EngravedLabel`, at page
  scale: the line is what makes the two halves one face.
*/
/*
  An L, not two columns facing each other.

  The copy and the screen used to sit at opposite edges of the page with a void between
  them, which is what "text on one side, picture on the other" looks like when a fraction
  sizes the columns instead of the content. Now the screen holds the whole right edge from
  the wordmark's own top line downwards, and the copy sits under the band on the left, so
  the two interlock instead of facing off.

  The seam runs from the left edge and stops at the device. That is the trailing rule
  DESIGN.md §5 gives `EngravedLabel` — a scored line that ends at the thing it names —
  drawn at page scale.
*/
.nameplate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 4vw, 64px);
  padding: clamp(52px, 7vh, 92px) 0 clamp(56px, 8vh, 100px);
}

.nameplate > * { min-width: 0; }

.nameplate-band {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: clamp(28px, 4vh, 48px);
}

.nameplate-copy { grid-column: 1; grid-row: 2; align-self: center; }

.nameplate .device-figure {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}



/*
  Archivo Expanded is very wide — eight capitals run about 8.5em with the wordmark's
  tracking on. The size is therefore driven by the viewport and capped, never given a px
  floor: a floor is what pushed the nameplate past the right edge of a phone and took the
  whole page's horizontal scroll with it.
*/
.wordmark {
  margin: 0;
  max-width: 100%;
  font-family: "Archivo Expanded", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 6.6vw, 68px);
  line-height: 1;
  letter-spacing: .062em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nameplate .seam { margin: 20px 0 14px; }

.nameplate h1 {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -.032em;
  font-weight: 620;
  text-wrap: balance;
}

/* A phone on a web page is a prop, not the subject. Capped so the copy leads. */
.nameplate .device { width: clamp(270px, 23vw, 330px); }

.nameplate .lede {
  margin: 20px 0 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  letter-spacing: -.01em;
}

/* ---------------------------------------------------------------------------
   The store key — the page's one job. Ivory, never signal: #FF5A2B means armed
   and nothing else, so the thing that opens the App Store is the same warm key
   the app draws on its own panels.
   --------------------------------------------------------------------------- */

.cta { margin: 34px 0 0; max-width: 620px; }

.cta-key { gap: 10px; padding: 0 24px; }
.cta-mark { flex: 0 0 auto; margin-top: -2px; }

.cta-note {
  margin: 14px 0 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   Device — a real screen from the app, in a machined frame.
   --------------------------------------------------------------------------- */

.device {
  position: relative;
  padding: 7px;
  border-radius: 36px;
  background: linear-gradient(180deg, #262a31, #15171b);
  box-shadow:
    inset 0 1px var(--seam-lit),
    0 1px var(--seam-shade),
    0 30px 70px rgba(0,0,0,.45);
}

.device::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 33px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55);
  pointer-events: none;
}

.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 29px;
}

.device-figure { margin: 0; }
.device-caption { margin: 16px 0 0; }

/* ---------------------------------------------------------------------------
   The rungs — one step of the count each, one real screen each.
   Density is varied deliberately: a pair, a wide single, a mirror, then quiet.
   --------------------------------------------------------------------------- */

.rung { border-top: 1px solid var(--seam-lit); }
.rung > .shell { padding: clamp(60px, 8vh, 104px) 0; }

.rung h2 {
  margin: 14px 0 0;
  font-size: clamp(30px, 3.9vw, 50px);
  line-height: 1.04;
  letter-spacing: -.032em;
  font-weight: 620;
  text-wrap: balance;
}

.rung p {
  margin: 18px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.58;
}

.rung strong { color: var(--content); font-weight: 600; }

.rung-split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(36px, 4.5vw, 68px);
}

.rung-split.is-mirrored { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.rung-split.is-mirrored .rung-copy { order: 2; }
.rung-split > * { min-width: 0; }
.rung-split > .device { width: min(100%, 260px); margin-inline: auto; }

/*
   A plate, not a phone. The middle rungs carry a crop of the control itself — the block
   lists with their dials, the rows being struck through, the register at zero — rather than
   a whole device.

   Two reasons, and both are about truth before they are about looks. A whole screenshot
   carries the app's own register in its corner, and those registers read 3 and 4 on a page
   whose count is going down; the crop leaves out the number that would contradict it. And a
   560×1214 device frame is mostly empty screen, which spent the tallest sections of the page
   on the least content.
*/
.plate-figure { margin: 0; }

.plate {
  position: relative;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--plate);
  box-shadow:
    inset 0 1px var(--seam-lit),
    0 1px var(--seam-shade),
    0 18px 44px rgba(0,0,0,.35);
}

.plate img { display: block; width: 100%; height: auto; border-radius: 8px; }
.plate-caption { margin: 14px 0 0; }
.plate-figure-register { width: min(100%, 520px); margin-inline: auto; }
.plate-figure-register .plate-caption { text-align: center; }

/*
   The ports: the three lists Foremost can read, named with their own marks. This section
   used to show device captures of Todoist and Apple Reminders — two competitors' apps, in
   full frames, on the one section whose whole claim is what *Foremost* does. A mark is the
   honest size for somebody else's product.
*/
.ports {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin: clamp(36px, 5vh, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.port { display: grid; gap: 6px; }

.port-mark {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
}

.port-mark img { display: block; width: 100%; height: 100%; }

.port-mark-drawn {
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--plate);
  box-shadow: inset 0 1px var(--seam-lit), 0 1px var(--seam-shade);
}

.port-mark-drawn svg { width: 26px; height: 26px; }
.port-name { font-size: 17px; font-weight: 620; letter-spacing: -.012em; }
.port-note { color: var(--muted); font-size: 15px; line-height: 1.5; }

.rung-ports h2 { max-width: 20ch; }

/* Zero. Nothing is armed here, so nothing on this rung is signal-coloured. */
.rung-zero { text-align: center; }
.rung-zero .plate-figure { margin-top: clamp(36px, 4vh, 52px); }
.rung-zero h2 { max-width: 16ch; margin-inline: auto; }
.rung-zero p { margin-inline: auto; }

.stand-down {
  position: relative;
  width: min(100%, 620px);
  margin: 0 auto clamp(36px, 5vh, 60px);
  overflow: hidden;
}

.stand-down::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-140%);
}

.stand-down.is-running::after { animation: sweep 380ms var(--machined) 220ms 1 both; }

@keyframes sweep {
  from { transform: translateX(-140%); }
  to { transform: translateX(400%); }
}

/* ---------------------------------------------------------------------------
   Why it holds — the trust block. Rows, not cards.
   --------------------------------------------------------------------------- */

.holds { border-top: 1px solid var(--seam-lit); }
.holds > .shell { padding: clamp(60px, 8vh, 104px) 0; }

.holds h2 {
  margin: 14px 0 0;
  max-width: 20ch;
  font-size: clamp(30px, 3.9vw, 50px);
  line-height: 1.04;
  letter-spacing: -.032em;
  font-weight: 620;
}

.holds-lede { margin: 18px 0 0; max-width: 62ch; color: var(--muted); font-size: 18px; line-height: 1.58; }
.holds-rows { margin-top: clamp(40px, 5vh, 64px); }

.holds-row {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 5vw, 72px);
  padding: 30px 0;
  border-top: 1px solid var(--divider);
}

.holds-row h3 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.018em; font-weight: 620; }
.holds-row p { margin: 0; max-width: 62ch; color: var(--muted); font-size: 17px; line-height: 1.6; }

/* ---------------------------------------------------------------------------
   Closing — the second ask, and the last thing on the page.
   --------------------------------------------------------------------------- */

.closing { border-top: 1px solid var(--seam-lit); }
.closing > .shell { padding: clamp(80px, 11vh, 140px) 0 clamp(88px, 12vh, 150px); text-align: center; }

.closing h2 {
  margin: 14px auto 0;
  max-width: 16ch;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -.038em;
  font-weight: 620;
  text-wrap: balance;
}

.closing .closing-lede { margin: 22px auto 0; max-width: 48ch; color: var(--muted); font-size: 18px; line-height: 1.55; }
.closing .cta { margin-inline: auto; text-align: center; }
.closing .cta-note { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   Legal pages
   --------------------------------------------------------------------------- */

.legal-main { width: min(calc(100% - 40px), var(--reading)); margin: 0 auto; padding: 88px 0 120px; }
.legal-title { padding-bottom: 48px; border-bottom: 1px solid var(--divider); }
.legal-title h1 { margin: 0; font-size: clamp(42px, 7vw, 68px); line-height: 1; letter-spacing: -.04em; font-weight: 620; }
.legal-title p { margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.legal-content { padding-top: 42px; }
.legal-content section { scroll-margin-top: 24px; margin-top: 52px; }
.legal-content section:first-child { margin-top: 0; }
.legal-content h2 { margin: 0 0 18px; font-size: 25px; line-height: 1.25; letter-spacing: -.025em; font-weight: 620; }
.legal-content h3 { margin: 30px 0 12px; font-size: 18px; line-height: 1.35; font-weight: 620; }
.legal-content p, .legal-content li { color: var(--muted); font-size: 16px; line-height: 1.7; }
.legal-content p { margin: 0 0 16px; }
.legal-content ul, .legal-content ol { margin: 0 0 20px; padding-left: 22px; }
.legal-content li + li { margin-top: 8px; }
.legal-content strong { color: var(--content); font-weight: 600; }
.legal-content a { color: var(--content); text-decoration-color: var(--faint); text-underline-offset: 3px; }
.legal-note { margin-top: 48px; padding: 18px 20px; border-radius: 10px; background: var(--plate); box-shadow: inset 0 1px var(--seam-lit), 0 1px var(--seam-shade); }
.legal-note p { margin: 0; font-size: 14px; }

/*
  Support page. The address is a plate, not a section, because it is the one thing on the
  page that is an action — and it is ivory, like every other key on this site. The signal
  colour means armed, and an email address is not.
*/
.support-contact { padding: 24px 24px 20px; border-radius: var(--radius); background: var(--plate); box-shadow: inset 0 1px var(--seam-lit), 0 1px var(--seam-shade); }
.support-contact .legend { display: block; margin-bottom: 12px; }
.support-email { display: inline-block; font-size: clamp(21px, 4.4vw, 29px); line-height: 1.15; font-weight: 620; letter-spacing: -.02em; word-break: break-word; }
.support-contact p { margin: 16px 0 0; font-size: 15px; }

.site-footer { border-top: 1px solid var(--seam-lit); }
.footer-inner { width: min(calc(100% - 40px), var(--page)); min-height: 110px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 13px; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--content); }

@media (max-width: 900px) {
  /* The L unwinds into one column, so every explicit placement has to be released too. */
  .nameplate { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 32px; }
  .nameplate-band,
  .nameplate-copy,
  .nameplate .device-figure {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
  }
  /*
    The block screen comes before the copy here, and only here. On the wide layout the
    screen already holds the right edge of the first viewport, so it is seen at the same
    moment as the headline. In one column it fell below both the headline and the form,
    which put the one picture of the product itself off the first screen entirely — the
    page opened on a claim with nothing behind it. The nameplate band stays first: it is
    the name struck into the panel, and the screen reads as a thing inside the product
    rather than a stray screenshot when it comes out from under that line.
  */
  .nameplate-band { order: 0; margin-bottom: 0; }
  .nameplate .device-figure { order: 1; }
  .nameplate-copy { order: 2; }
  /*
    Sized so the headline still breaks the fold under it. A screenshot that fills the whole
    first screen is the same defect as one below it: nothing on the page says what the
    picture is for. The constraint here is vertical, not horizontal — the shot is 560x1214,
    so a width picked off the viewport *width* runs the caption past the fold on any tall
    phone. 345px is what sits above and below it inside the panel (band, two gaps, caption)
    plus the sliver of the headline that has to show; 2.168 is the shot's aspect. `svh`, not
    `vh`, so mobile Safari with its toolbars out is the case being solved for. The px width
    on the line before is the fallback for a browser without `svh`.
  */
  .nameplate .device { width: min(100%, 260px); margin-inline: auto; }
  .nameplate .device { width: min(100%, 300px, max(200px, calc((100svh - 345px) / 2.168))); }
  .nameplate .device-caption { text-align: center; }
  .rung-split,
  .rung-split.is-mirrored { grid-template-columns: 1fr; gap: 40px; }
  .rung-split.is-mirrored .rung-copy { order: 0; }
  .ports { grid-template-columns: 1fr; gap: 26px; }
  .port { grid-template-columns: 44px 1fr; column-gap: 16px; align-items: center; }
  .port-mark { grid-row: span 2; margin-bottom: 0; }
  .holds-row { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 800px) {
  .nav { min-height: 64px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 13px; }
  .gauge-unit { max-width: none; }
}

@media (max-width: 560px) {
  .shell, .nav, .footer-inner, .legal-main { width: min(calc(100% - 32px), var(--page)); }
  .nav { gap: 12px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 12px; }
  .brand span:last-child { font-size: 15px; }
  /*
    The lamp goes, not the words. A bare numeral beside a dot in the reserved colour reads as
    a notification badge, and spends `signal` on chrome with nothing on screen to say what it
    means — which is exactly what DESIGN.md §2 rules out. The unit is what makes it a register.
  */
  .gauge-state { display: none; }
  .gauge-count { font-size: 21px; }
  .gauge-unit { font-size: 11px; letter-spacing: .08em; }
  .nameplate { padding-top: 48px; }
  .nameplate h1 { font-size: clamp(30px, 8.6vw, 40px); }
  .cta-key { display: flex; width: 100%; }
  .rung p, .holds-lede { font-size: 17px; }
  .device { border-radius: 30px; padding: 6px; }
  .device::before { border-radius: 27px; }
  .device img { border-radius: 24px; }
  .legal-main { --reading: 100%; padding-top: 62px; }
  .legal-title { padding-bottom: 36px; }
  .legal-content { padding-top: 34px; }
  .legal-content section { margin-top: 42px; }
  .footer-inner { min-height: 140px; flex-direction: column; justify-content: center; align-items: flex-start; }
  .footer-links { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}