/* Throwcast — throwcast.app
 *
 * Deliberately NOT sharing src/styles.css: this page has no build step, and coupling marketing
 * type scale to editor UI density fights both. What it does share is the semantics of the two
 * brand colours — blue is structure, amber is light — because the mark is made of them.
 *
 * The ground is darker than the app's (#0B0D0F against #1a1c1f) for one reason: every piece of
 * evidence on this page is a dark screenshot, and on a lighter ground each one reads as a grey
 * rectangle floating in a slightly different grey. Dropping the page below the captures lets the
 * plates sit down instead of hovering.
 */

/* ---- tokens ------------------------------------------------------------------------------ */

:root {
  /* ground → surfaces. Three steps, not two: the page, the banded section, the plate mount. */
  --ground: #0b0d0f;
  --surface-0: #101315;
  --surface-1: #15191c;
  --surface-2: #1b2125;

  /* Below the ground, not above it: the mount every dark screenshot sits on, so a plate reads
     as recessed into the page rather than laid on top of it. */
  --plate-black: #0a0c0e;

  /* Hairlines. --line is the default rule; --line-2 is the one that has to survive over a
     surface rather than over the ground. */
  --line: #212a2f;
  --line-2: #2c363c;

  --text: #e7ebee;
  --dim: #98a3ab;
  --faint: #7c8791;

  /* Structure and light — the mark's own two colours. */
  --accent: #4a9eff;
  --accent-hi: #86bcff;
  --accent-ink: #05080d;
  --amber: #ffb347;

  --focus: #7db8ff;

  /* Depth is always neutral: every shadow carries an offset and a soft blur, and no
     shadow is ever tinted. A coloured ring on this page means focus, nothing else. */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
  --shadow-plate: 0 2px 4px rgb(0 0 0 / 0.5), 0 18px 40px -18px rgb(0 0 0 / 0.85);
  --shadow-lift: 0 4px 10px rgb(0 0 0 / 0.55), 0 28px 60px -24px rgb(0 0 0 / 0.9);

  --radius: 9px;
  --radius-sm: 6px;

  --gut: clamp(20px, 4vw, 56px);
  --section: clamp(64px, 6.8vw, 104px);

  /* Two columns. The reading column carries the hero, the audience table, the specification
     table and the footer. The wide one — 1440px of content between the gutters — is the top
     bar's and the chapters', so the mark in the bar and the step text of every chapter stand
     on one left edge, and the pinned figures get the room. */
  --col: 1180px;
  --col-wide: calc(1440px + 2 * var(--gut));

  /* The top bar is a fixed height rather than padding around its tallest child, because
     everything that pins under it — the chapter figures, anchor scrolling — is measured from
     this one number. */
  --bar: 64px;

  color-scheme: dark;
}

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

/* ---- fonts ------------------------------------------------------------------------------- */

/* Self-hosted, not fetched from Google. The files are the latin and latin-ext subsets Google
   Fonts serves for the same request (Archivo v25, Azeret Mono v21 — both OFL), declared with the
   same axes and unicode ranges, so nothing about the type changed; what changed is that loading
   the page no longer sends a visitor's IP address to a third party, and /privacy can say so. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Azeret Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/azeret-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Azeret Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/azeret-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- base -------------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 20px);
  /* Firefox */
  scrollbar-color: #29333a var(--ground);
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-stretch: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The surfaces we did not draw still belong to the design. */
::selection { background: rgb(74 158 255 / 0.3); color: #fff; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb {
  background: #29333a;
  border: 3px solid var(--ground);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover { background: #38454e; }
::-webkit-scrollbar-corner { background: var(--ground); }

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

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent-hi); }

img { max-width: 100%; }

h1, h2, h3 { margin: 0; text-wrap: balance; }

p { margin: 0; }

.mono {
  font-family: 'Azeret Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.wrap {
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip:focus-visible { top: 12px; color: var(--accent-ink); }

/* ---- type scale --------------------------------------------------------------------------
   Every size this sheet uses is declared in DESIGN.md (front matter, `typography.scale`). A new
   size is a decision about the ramp: add it there first, then here. */

h1 {
  font-size: clamp(38px, 5.4vw, 68px);
  font-stretch: 108%;
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.032em;
}

h2 {
  font-size: clamp(26px, 3.1vw, 38px);
  font-stretch: 105%;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.024em;
}

h3 {
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.014em;
}

.lead {
  font-size: clamp(16.5px, 1.35vw, 18.5px);
  line-height: 1.6;
  color: var(--dim);
  max-width: 62ch;
}

/* A section opens centred — the heading and its one paragraph — and what follows takes the
   column's left edge. */
.lede { max-width: 64ch; margin-inline: auto; margin-bottom: clamp(32px, 4vw, 52px); text-align: center; }
.lede h2 { margin-bottom: 16px; }
.lede p { font-size: 16.5px; line-height: 1.65; color: var(--dim); }

/* ---- top bar ----------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--bar);
  background: rgb(11 13 15 / 0.82);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
/* Also a .wrap, but on the wide column: the mark starts on the left edge every chapter's step
   text starts from, instead of hugging the viewport. */
.topbar-in {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
  max-width: var(--col-wide);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 650;
  font-size: 17px;
  font-stretch: 104%;
  letter-spacing: -0.01em;
  flex: none;
}
.brand:hover { color: var(--text); }
.brand svg { display: block; flex: none; }

.topnav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-right: auto;
  font-size: 14px;
}
.topnav a { color: var(--dim); }
.topnav a:hover { color: var(--text); }

.topactions { display: flex; align-items: center; gap: 18px; flex: none; }
.signin { color: var(--dim); font-size: 14px; white-space: nowrap; }
.signin:hover { color: var(--text); }

/* ---- buttons ----------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 17px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  font-weight: 650;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: background 0.14s ease, transform 0.14s ease;
}
.btn:hover { background: var(--accent-hi); color: var(--accent-ink); }
.btn:active { transform: translateY(1px); }

.btn-lg { padding: 14px 26px; font-size: 15.5px; border-radius: var(--radius); }

.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 4px;
  color: var(--text);
  font-weight: 550;
  font-size: 15.5px;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  transition: border-color 0.14s ease, color 0.14s ease;
}
.btn-quiet::after {
  content: '';
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h10M8 3l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h10M8 3l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-quiet:hover { color: var(--text); border-color: var(--accent); }
.btn-quiet:hover::after { transform: translateX(3px); }

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

.hero { padding-block: clamp(48px, 7vw, 92px) clamp(24px, 3vw, 40px); }

.hero-copy { max-width: 56rem; margin-bottom: clamp(40px, 5vw, 64px); }
.hero-copy h1 { margin-bottom: 24px; }
.hero-copy .lead { margin-bottom: 34px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }

/* ---- plates ------------------------------------------------------------------------------ */

.plate { margin: 0; }

.plate-frame {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--plate-black);
  box-shadow: var(--shadow-plate);
}
.plate-frame img { display: block; width: 100%; height: auto; cursor: zoom-in; }

.plate-hero .plate-frame { box-shadow: var(--shadow-lift); }

.plate-cap {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dim);
}
.plate-cap b { color: var(--text); font-weight: 600; }
.fig {
  flex: none;
  font-size: 11px;
  color: var(--faint);
  padding-top: 2px;
  letter-spacing: 0.04em;
}

/* Numbered callouts over Fig. 01, keyed to the list beneath it. */
.callouts { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.callouts li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.callouts span {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgb(10 12 14 / 0.86); /* --plate-black at 86%, over the image */
  border: 1.5px solid var(--amber);
  color: var(--amber);
  font-family: 'Azeret Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.7);
}

.key {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: key;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 32px;
}
.key li { counter-increment: key; position: relative; padding-left: 26px; }
.key li::before {
  content: counter(key);
  position: absolute;
  left: 0; top: 1px;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--amber);
  font-family: 'Azeret Mono', monospace;
  font-size: 10px;
}

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

.section { padding-block: var(--section); }
.band { background: var(--surface-0); border-block: 1px solid var(--line); }

/* ---- specification table ----------------------------------------------------------------- */

.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.spec tr { border-top: 1px solid var(--line); }
.spec tr:last-child { border-bottom: 1px solid var(--line); }
.spec tr:hover { background: rgb(255 255 255 / 0.017); }
.spec th,
.spec td { text-align: left; padding: 15px 24px 15px 0; vertical-align: baseline; }
.spec th {
  font-weight: 600;
  color: var(--text);
  width: 34%;
}
.spec td.mono {
  width: 22%;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
}
.spec td:last-child { color: var(--dim); padding-right: 0; }

/* ---- specification tabs -------------------------------------------------------------------
   Five groups is a sheet too tall to read as one. With JS one group shows at a time under a
   strip whose active tab carries the group's name; without JS the strip is hidden and every
   group prints in full under a heading set like the title block's own labels. */
.tabs { display: none; }
.js .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.tab {
  appearance: none;
  margin: 0 0 -1px;
  padding: 10px 14px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--dim);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.tab:hover { color: var(--text); }
.tab[aria-selected='true'] { color: var(--text); border-bottom-color: var(--accent); }
.tab:focus-visible { outline-offset: -3px; border-radius: var(--radius-sm); }

.spec-title {
  margin: 30px 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.spec-panel:first-of-type .spec-title { margin-top: 0; }
.js .spec-title { display: none; }
.js .spec-panel[hidden] { display: none; }

/* ---- bullets ----------------------------------------------------------------------------- */

.bullets {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--dim);
}
.bullets li { position: relative; padding-left: 22px; }
.bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.52em;
  width: 11px; height: 11px;
  background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2.5 8 6l-4 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2.5 8 6l-4 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bullets em { color: var(--text); font-style: italic; }

/* ---- the scroll stepper -------------------------------------------------------------------
   A pinned figure beside a column of steps in NORMAL FLOW. The copy scrolls — it is never
   crossfaded — and whichever step crosses the middle of the viewport chooses the figure, whose
   frames swap with an opacity fade. Text moves the way text moves; only images dissolve.

   Three layouts, in this order:
     no JS   — everything in normal flow, every step at full contrast, first figure shown
     phone   — figure pinned to the top of the section, steps scrolling under it
     desktop — figure pinned beside the column, steps scrolling past it                        */

.stepper { position: relative; }

.stepper-pane { display: grid; gap: clamp(28px, 3vw, 56px); padding-inline: var(--gut); }

.stepper-copy { margin: 0; padding: 0; list-style: none; }
.step + .step { margin-top: 40px; }
.step h3 { margin-bottom: 14px; }
.step p { font-size: 16px; line-height: 1.7; color: var(--dim); }
.step b { color: var(--text); font-weight: 600; }
.step .bullets { margin-top: 18px; }

.stepper-figure { margin: 0; }
.stepper-stage {
  position: relative;
  background: var(--plate-black);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-plate);
  aspect-ratio: 16 / 10;
}
.stepper-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* CONTAIN, never cover: these captures are the evidence, and their aspects run from 0.68 to
     2.55. Cropping to a common box would cut a third off the tall ones. */
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.45s ease;
  cursor: zoom-in;
}
.stepper-stage img[data-on='1'] { opacity: 1; }

/* With JS the inactive steps sit back and the active one reads at full contrast — a reading
   position on a scrolling column, not a crossfade. Clicking a dimmed step scrolls it into
   that position. Without JS every step is fully lit and the first figure shows.
   No rail and no dot down the column: a step's text starts on the page column's left edge,
   which is the edge the mark in the top bar starts on. */
.js .stepper-copy .step {
  margin-top: 0;
  padding: 26px 0;
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.js .stepper-copy .step[data-active] { opacity: 1; }
.js .stepper-copy .step:not([data-active]) { cursor: pointer; }

@media (min-width: 901px) {
  .js .stepper-pane {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    /* The copy lines up with the wide column's left edge — the one the mark in the top bar
       stands on; the figure runs to the section's right edge, which is what makes it read as
       large rather than as a column. */
    padding-left: max(var(--gut), calc((100% - var(--col-wide)) / 2 + var(--gut)));
    padding-right: 0;
  }
  /* The figure is as tall as the viewport under the bar, its stage centred in that box. A step
     is a slot half as tall with its copy centred, and the column is padded top and bottom by
     half the difference — so the first step is centred on the stage before anything has
     scrolled, every later one is centred on it as it crosses the middle of the viewport, and
     the last one still is when the figure lets go. Half a viewport per step is enough scroll
     for each to hold the reading position while its frame lands, without the column turning
     into a hike. */
  .js .stepper-copy {
    --box: calc(100svh - var(--bar));
    --slot: 48svh;
    padding-block: calc((var(--box) - var(--slot)) / 2);
  }
  .js .stepper-copy .step {
    min-height: var(--slot);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .js .stepper-figure {
    position: sticky;
    top: var(--bar);
    height: calc(100svh - var(--bar));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .js .stepper-stage {
    aspect-ratio: auto;
    height: min(68svh, 660px);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
  }
}

/* --- phone: the figure pins to the top of the section and the steps run under it --- */
@media (max-width: 900px) {
  /* Desktop wants copy-left / figure-right, so the copy leads in the DOM. On one column that
     puts the figure under all the text, where pinning it would do nothing — flex order lifts it
     back to the top without disturbing the reading order for a screen reader. */
  .js .stepper-pane { display: flex; flex-direction: column; }
  .js .stepper-figure {
    order: -1;
    position: sticky;
    top: var(--bar);
    z-index: 2;
    padding-bottom: 16px;
    margin-bottom: 12px;
    /* Opaque, or the step text scrolling beneath shows through the gap under the plate. */
    background: var(--ground);
  }
  .js .section.band .stepper-figure { background: var(--surface-0); }
  .js .stepper-stage { aspect-ratio: 4 / 3; max-height: 34vh; }
  .step p { font-size: 15px; }
}

/* ---- who it's for ------------------------------------------------------------------------ */

.facts { margin: 0; }
.facts > div {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 8px clamp(24px, 4vw, 56px);
  padding: 17px 0;
  border-top: 1px solid var(--line);
}
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt {
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.012em;
}
.facts dd { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--dim); }

/* ---- call to action ---------------------------------------------------------------------- */

.cta { text-align: center; }
.cta-wrap { max-width: 760px; }
.cta-mark { display: block; margin: 0 auto 22px; }
.cta h2 { margin-bottom: 16px; }
.cta .lead { margin-inline: auto; margin-bottom: 34px; }
.cta-close {
  max-width: 54ch;
  text-wrap: balance;
  margin: clamp(40px, 5vw, 60px) auto 0;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--dim);
}

.join { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* `display:flex` outranks the UA stylesheet's `[hidden] { display:none }`, so without this the
   form stays on screen after a successful submit, under its own thank-you. */
.join[hidden] { display: none; }
.join input {
  width: 288px;
  max-width: 100%;
  padding: 13px 15px;
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  caret-color: var(--accent);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.14s ease;
}
.join input::placeholder { color: var(--faint); }
.join input:hover { border-color: #3a464e; }
.join input:focus { border-color: var(--accent); outline: none; }
.join input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.join input[aria-invalid='true'] { border-color: #e5645a; }
.join button {
  padding: 13px 26px;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 650;
  font-size: 15px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background 0.14s ease, opacity 0.14s ease;
}
.join button:hover:not(:disabled) { background: var(--accent-hi); }
.join button:disabled { opacity: 0.55; cursor: default; }

.said { min-height: 24px; margin-top: 22px; font-size: 15.5px; color: var(--text); }
.said[data-tone='error'] { color: #f0958c; }
.fineprint { margin-top: 14px; font-size: 12.5px; color: var(--faint); }

/* ---- legal pages (privacy.html) ---------------------------------------------------------
   One reading column, set entirely from sizes the ramp already has: the page title at the
   Headline size, its sections at the Title size, sub-sections at Body/650, the processor table
   at the Row size with Field-label headers. No new size, no new colour. */

.legal { padding-block: calc(var(--bar) + clamp(40px, 6vw, 72px)) var(--section); }
.legal-in { max-width: calc(72ch + 2 * var(--gut)); }

.legal h1 {
  font-size: clamp(26px, 3.1vw, 38px);
  font-stretch: 105%;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.024em;
  margin: 0 0 8px;
}
.legal-meta { font-size: 13px; color: var(--faint); margin-bottom: clamp(24px, 3vw, 36px); }
.legal-lead {
  font-size: clamp(16.5px, 1.35vw, 18.5px);
  line-height: 1.6;
  color: var(--dim);
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.legal h2 {
  font-size: clamp(19px, 1.5vw, 22px);
  font-stretch: 100%;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.014em;
  margin: clamp(32px, 4vw, 48px) 0 12px;
}
.legal h3 {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: normal;
  margin: 22px 0 6px;
}
.legal p { margin: 0 0 12px; line-height: 1.7; }
.legal p a { text-decoration: underline; }
.legal em { font-style: normal; font-weight: 600; color: var(--text); }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 14px;
  font-size: 14.5px;
  line-height: 1.65;
}
.legal-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--line-2);
}
.legal-table td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  vertical-align: top;
}
.legal-table td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }

/* ---- footer ------------------------------------------------------------------------------ */

.footer { border-top: 1px solid var(--line); padding-block: clamp(32px, 4vw, 48px); }

.titleblock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1.15fr));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tb-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 14px 18px;
  min-height: 74px;
}
.tb-cell + .tb-cell { border-left: 1px solid var(--line); }
.tb-id { flex-direction: row; align-items: center; gap: 11px; background: rgb(255 255 255 / 0.015); }
.tb-id span { font-size: 17px; font-weight: 650; font-stretch: 104%; letter-spacing: -0.01em; }
.tb-id svg { flex: none; }
.tb-label { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.tb-cell a { font-size: 13px; color: var(--dim); }
.tb-cell a:hover { color: var(--accent-hi); }

.footer-note { margin-top: 18px; font-size: 13px; color: var(--faint); }

/* ---- lightbox ---------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgb(6 8 9 / 0.95);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox-stage { display: contents; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}
.lightbox .hint { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--faint); }
.lightbox-close {
  position: fixed;
  top: 18px; right: 20px;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.lightbox-close:hover { color: var(--text); border-color: var(--accent); }

/* ---- responsive ---------------------------------------------------------------------------
   Most people who click a marketing link are on a phone, so every fixed grid collapses and the
   top bar survives without its section links. */

@media (max-width: 1080px) {
  .topnav { gap: 20px; }
  .topbar-in { gap: 20px; }
}

@media (max-width: 900px) {
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .tb-cell:nth-child(3) { border-left: 0; }
  .tb-cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .key { grid-template-columns: 1fr; }
  .spec th { width: auto; }
  .spec td.mono { width: auto; }
}

@media (max-width: 760px) {
  /* Section links go; sign-in and the CTA stay, because they are the only two things anyone
     arrives wanting to do. Both must stay on ONE line — a wrapped label inside a button
     overflows it, and a two-line "Sign in" makes the whole bar look broken. */
  .topnav { display: none; }
  .topbar-in { justify-content: space-between; padding-inline: 16px; gap: 12px; }
  .topactions { gap: 14px; }
  .btn { padding: 8px 14px; font-size: 13.5px; }
  .brand { font-size: 16px; }
  .spec { font-size: 14px; }
  .spec th, .spec td { display: block; padding: 0; }
  .spec tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; }
  .spec th { grid-column: 1; font-size: 14.5px; }
  .spec td.mono { grid-column: 2; grid-row: 1; text-align: right; }
  .spec td:last-child { grid-column: 1 / -1; font-size: 13.5px; }
  .tab { padding: 9px 11px; font-size: 13.5px; }
  .join input, .join button { width: 100%; }
  .titleblock { grid-template-columns: 1fr; }
  .tb-cell + .tb-cell { border-left: 0; border-top: 1px solid var(--line); }
  .tb-cell { min-height: 0; }
}

@media (max-width: 360px) {
  /* Below this the wordmark gives — the mark alone still identifies us, and dropping the CTA or
     sign-in would cost an actual visitor something. */
  .brand span { display: none; }
  .callouts span { width: 20px; height: 20px; font-size: 10px; }
}

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