/* ==========================================================================
   XENOLOG — Interstellar Survey Authority, Recruitment Division
   Marketing site.

   The palette, type, metrics and chrome are lifted from the app's own design
   system (DesignSystem/Theme.swift, Typography.swift, HUDKit.swift,
   Onboarding/SurveyChrome.swift) so the site and the instrument read as one
   object. Where a number appears here with no explanation, it is the app's
   number.

   Since 2026-08-28 the instrument is LIGHT — the tool is light, the void is
   dark. Every working surface here is the light skin; the only dark things
   on the page are inside the screenshots (the card face, the beam, the
   hologram stage), where the app itself keeps them dark.
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Surfaces — Theme.swift. The tool is light: issued field equipment,
     readable in sun. Only the specimen card, the reveal and the hologram
     stage stay dark, and those live inside the screenshots. */
  --bg: #f4f6f7;
  --surface: #ffffff;
  --sunken: #eaeef0;
  --chip: #e6eaed;
  --hairline: #d8dde0;

  /* Ink. Near-black, then two greys — Theme.ink / inkSecondary / inkTertiary. */
  --ink: #0e1114;
  --ink-2: #6b7580;
  --ink-3: #9aa4ac;

  /* The one saturated colour. Deep teal, 2.7:1 on white — a mark, a tick, a
     lit segment, never a text colour. Type is ink. */
  --accent: #0fa9a0;
  --on-accent: #ffffff;

  /* Classification colours (Theme.swift, tier.color — darkened to pass AA on
     white; the lit values are for the card face only) */
  --common: #5f6b78;
  --uncommon: #0b7a55;
  --rare: #1d5fd6;
  --epic: #6d3fd6;
  --legendary: #a65a06;
  --secret: #c2185b;

  /* Insignia metals (Theme.questGold / Silver / Bronze) */
  --gold: #9a6f12;
  --silver: #626e78;
  --bronze: #8f5a2e;

  --gutter: 24px;
  --max: 1180px;

  --sans: "Space Grotesk", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Chrome is drawn in ink, not accent: the hairline, a softer hairline for
     dividers, and the bracket strokes. */
  --line: var(--hairline);
  --line-soft: #e6eaed;
  --brk: rgba(14, 17, 20, 0.55);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The survey grid, over everything, very faint — SurveyGrid draws a 22pt
   square grid, multiplied to ink on the light ground. Fixed, so the page
   reads as content moving behind an instrument's glass rather than as a
   texture scrolling with it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(14, 17, 20, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 17, 20, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Everything sits above the glass. */
body > * { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------- brackets --- */

/* Corner brackets, drawn as eight background gradients rather than borders,
   because the app's SurveyBracket is explicitly *never* a closed rectangle —
   two strokes meeting at a corner, and nothing joining them. */
.brk {
  --brk-len: 14px;
  background-image:
    linear-gradient(var(--brk), var(--brk)), linear-gradient(var(--brk), var(--brk)),
    linear-gradient(var(--brk), var(--brk)), linear-gradient(var(--brk), var(--brk)),
    linear-gradient(var(--brk), var(--brk)), linear-gradient(var(--brk), var(--brk)),
    linear-gradient(var(--brk), var(--brk)), linear-gradient(var(--brk), var(--brk));
  background-repeat: no-repeat;
  background-size:
    var(--brk-len) 1px, 1px var(--brk-len),
    var(--brk-len) 1px, 1px var(--brk-len),
    var(--brk-len) 1px, 1px var(--brk-len),
    var(--brk-len) 1px, 1px var(--brk-len);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

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

/* Mono caps with wide tracking is the house voice: the app sets its screen
   name plates at mono 22 bold with 7pt of kerning. Caps without tracking read
   as shouting; caps with it read as a label on an instrument. */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* The 1×11 tick that opens every HUDSectionHeader. */
.eyebrow::before {
  content: "";
  width: 1px;
  height: 11px;
  background: var(--accent);
  flex: none;
}

.section-title {
  font-family: var(--mono);
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.lede {
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--ink-2);
  margin: 0;
  max-width: 48ch;
}

.mono-inline {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--ink);
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); }

.nav .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 66px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-right: auto;
}
/* The mark is the app icon — a black tile — so it wears the icon's own
   corner radius (about 22% of its side) rather than sitting as a hard square
   on the light page. */
.brand img { width: 30px; height: 30px; border-radius: 7px; }

.nav-links {
  display: flex;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
.nav-links a { text-decoration: none; transition: color 0.15s ease; }
.nav-links a:hover { color: var(--ink); }

/* -------------------------------------------------------------- button --- */

/* The primary button on the light ground: an ink pill with a white label,
   no glow. A lit capsule was the dark skin's move; on paper-white it read as
   a border, so the app filled it in. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  color: var(--on-accent);
  text-decoration: none;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
.btn:hover {
  background: #23282e;
  border-color: #23282e;
  transform: translateY(-1px);
}

.btn-ghost {
  background: var(--surface);
  border-color: var(--hairline);
  color: var(--ink);
}
.btn-ghost:hover {
  background: var(--surface);
  border-color: var(--ink);
  color: var(--ink);
}

.btn-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------- status tag --- */

/* HUDTag: a lit 5pt dot, mono 10 bold, inside a 1pt hairline rectangle. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: breathe 2s ease-in-out infinite;
}

/* The live dot breathes 0.45 → 1.0; a steady dot reads as a printed mark. */
@keyframes breathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

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

.hero {
  padding: clamp(52px, 7vw, 92px) 0 clamp(48px, 6vw, 78px);
  position: relative;
  overflow: hidden;
}

/* No scan lines. The dark skin ruled the hero and every phone every 4px at
   16% black; on a light ground and over light screens that is just dirt. */

.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 68px);
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-family: var(--mono);
  font-size: clamp(31px, 5vw, 54px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
/* The emphasised word keeps ink — teal fails contrast as type — and takes the
   accent as a rule beneath it instead, the way the app underlines a live
   reading rather than colouring it. */
.hero h1 em {
  font-style: normal;
  color: var(--ink);
  box-shadow: inset 0 -0.16em 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
}

/* The block caret the app's TypedText leaves at the end of a line, blinking
   at 0.45s. */
.caret {
  display: inline-block;
  color: var(--ink);
  animation: blink 0.9s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.hero p.lede { font-size: clamp(16px, 1.6vw, 19px); max-width: 42ch; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 30px 0 0;
  align-items: center;
}

/* The corner telemetry: numbers that are texture rather than information. */
.hero-readout {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
.hero-readout b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}

/* --------------------------------------------------------------- phone --- */

/* An iPhone shell rather than a HUD frame: a graphite band, a hairline seam
   against the page, and the screenshot's own corners rounded to sit inside
   it. The Dynamic Island is in the screenshots themselves, so the shell
   draws no notch of its own. The shadow is the object's, soft and grounded,
   not a glow. */
.phone {
  position: relative;
  --bezel: 9px;
  --screen-r: 34px;
  padding: var(--bezel);
  background: linear-gradient(180deg, #2a2f35, #1a1e22);
  border: 1px solid #3a4046;
  border-radius: calc(var(--screen-r) + var(--bezel));
  box-shadow:
    0 0 0 1px rgba(14, 17, 20, 0.18),
    0 24px 48px rgba(14, 17, 20, 0.18),
    0 4px 12px rgba(14, 17, 20, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
/* The shell is the frame; the HUD corner ticks come off the phones. */
.phone.brk { background-image: none; }
.phone img,
.phone video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--screen-r);
  background: var(--bg);
}
/* A video has no intrinsic size until its metadata arrives, so without this
   the flex item collapses to nothing on first paint. The ratio is the
   screenshots' own. */
.phone video {
  aspect-ratio: 1206 / 2622;
  object-fit: cover;
}
/* The video's min-content width is zero, so under flex pressure the lead
   phone — alone among the three — would absorb all the shrink and collapse.
   It holds its size; the side phones give way instead. */
.hero-phones .phone.lead { flex: 0 0 auto; width: min(280px, 82vw); }
.hero-phones .phone:first-child,
.hero-phones .phone:last-child { --screen-r: 27px; --bezel: 7px; }

.hero-phones {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.hero-phones .phone { max-width: 280px; }
.hero-phones .phone:first-child,
.hero-phones .phone:last-child { max-width: 210px; opacity: 0.8; }

/* ------------------------------------------------------- classification --- */

.tiers { padding: clamp(44px, 6vw, 72px) 0; }

.tier-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  margin-top: 30px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.tier {
  background: var(--surface);
  padding: 20px 16px;
  position: relative;
}
/* The classification's own colour, as a mark rather than a fill — the index
   tile marks a logged slot with a 6pt dot in the tier colour, and nothing
   else on the tile is coloured at all. */
.tier .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
  margin-bottom: 14px;
}
.tier h3 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 5px;
  color: var(--c);
}
.tier p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.tier .count {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

/* ------------------------------------------------------------ features --- */

.feature { padding: clamp(52px, 6.5vw, 88px) 0; }
.feature + .feature { border-top: 1px solid var(--line-soft); }

.feature .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.feature.flip .feature-media { order: -1; }
.feature-media { display: flex; justify-content: center; }
.feature-media .phone { max-width: 300px; }

.feature-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 15px;
}
.feature-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.feature-list li b {
  color: var(--ink);
  font-weight: 500;
}
/* A tick, in the classification colour this section is keyed to. */
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 1px;
  background: var(--accent-c, var(--accent));
}

/* ----------------------------------------------------------- HUD panel --- */

/* HUDPanel: rectangular, never rounded. A white panel on a hairline, with
   the corner brackets outside it. */
.hud {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 22px;
  position: relative;
}

/* ---------------------------------------------------------- three tracks -- */

.lanes { padding: clamp(52px, 6.5vw, 88px) 0; background: var(--sunken); }

.lane-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 34px;
}

.lane {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 24px 22px 22px;
  --brk-len: 12px;
}
.lane .lane-no {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.lane h3 {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.lane p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.lane .lane-meta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  color: var(--ink-2);
  text-transform: uppercase;
}

.lanes-note {
  margin: 30px 0 0;
  color: var(--ink-2);
  font-size: 15.5px;
  max-width: 62ch;
}
.lanes-note b { color: var(--ink); font-weight: 700; }

/* -------------------------------------------------------------- ladder --- */

.ranks { padding: clamp(52px, 6.5vw, 88px) 0; }

.ladder {
  display: grid;
  gap: 1px;
  margin-top: 32px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.rung {
  background: var(--surface);
  padding: 13px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}
.rung b {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.rung span {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  letter-spacing: 0.08em;
}
/* The apex rung is the one filled row: ink, white type — the app's primary. */
.rung.apex { background: var(--ink); }
.rung.apex b { color: var(--on-accent); }
.rung.apex span { color: var(--on-accent); opacity: 0.75; }

/* The segmented meter — HUDMeter is 22 segments with 1pt gaps, 7pt tall. */
.meter {
  display: flex;
  gap: 1px;
  height: 7px;
  margin-top: 30px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  padding: 1px;
}
.meter i {
  flex: 1;
  background: var(--chip);
}
.meter i.on {
  background: var(--accent);
}

/* ------------------------------------------------------------ insignia --- */

.crowns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.crown {
  border: 1px solid var(--line-soft);
  padding: 20px 12px;
  text-align: center;
  background: var(--surface);
}
.crown img { width: 32px; height: auto; margin: 0 auto 12px; }
.crown h4 {
  margin: 0 0 3px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.crown p {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.05em;
}

/* ------------------------------------------------------------- closing --- */

.closing {
  padding: clamp(60px, 8vw, 104px) 0;
  text-align: center;
  border-top: 1px solid var(--line-soft);
  position: relative;
}
.closing h2 {
  font-family: var(--mono);
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 18px;
}
.closing p {
  color: var(--ink-2);
  max-width: 50ch;
  margin: 0 auto 30px;
}
.closing .btn-note { display: block; margin-top: 18px; }

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

.footer {
  padding: 40px 0 56px;
  border-top: 1px solid var(--line-soft);
}
.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.footer .brand { font-size: 13px; margin-right: auto; }
.footer .brand img { width: 24px; height: 24px; border-radius: 5.5px; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--ink); }
.footer-links a { color: var(--ink-2); }

/* --------------------------------------------------------- legal pages --- */

.legal { padding: clamp(38px, 5.5vw, 68px) 0 clamp(56px, 8vw, 92px); }
.legal .wrap { max-width: 760px; }

.legal-head { margin-bottom: 40px; }
.legal-head h1 {
  font-family: var(--mono);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.legal-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  color: var(--ink-2);
  text-transform: uppercase;
}

.callout {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 20px 22px;
  margin: 0 0 30px;
  font-size: 15.5px;
  color: var(--ink-2);
}
.callout strong { color: var(--ink); font-weight: 700; }
.callout p { margin: 0 0 10px; }
.callout p:last-child { margin-bottom: 0; }

.fill {
  font-family: var(--mono);
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}

.legal .toc {
  border: 1px solid var(--line-soft);
  padding: 22px 24px;
  margin: 0 0 40px;
  background: var(--surface);
}
.legal .toc h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 14px;
  border: 0;
  padding: 0;
}
.legal .toc ol { margin: 0; padding-left: 20px; columns: 2; }
.legal .toc li { margin-bottom: 6px; break-inside: avoid; }
.legal .toc a { color: var(--ink-2); text-decoration: none; }
.legal .toc a:hover { color: var(--ink); }

.legal h2 {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 38px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.legal h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 24px 0 10px;
  color: var(--ink);
}
.legal p, .legal li { color: var(--ink-2); font-size: 16px; }
.legal p { margin: 0 0 16px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 24px; }
.legal li { margin-bottom: 9px; }
.legal a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.legal strong { color: var(--ink); font-weight: 700; }

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14.5px;
}
.legal .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.legal .table-scroll table { min-width: 620px; }
.legal th, .legal td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
  vertical-align: top;
}
.legal th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.legal td:first-child { color: var(--ink); }

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  margin-bottom: 26px;
}
.legal-back:hover { color: var(--ink); }

/* -------------------------------------------------------------- motion --- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .tag::before, .caret { animation: none; opacity: 1; }
}

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

@media (max-width: 980px) {
  .hero .wrap,
  .feature .wrap { grid-template-columns: 1fr; }
  .feature.flip .feature-media { order: 0; }
  .feature-media { margin-top: 8px; }
  .hero-phones .phone:first-child,
  .hero-phones .phone:last-child { display: none; }
  .hero-phones .phone { max-width: 300px; }
  .tier-strip { grid-template-columns: repeat(3, 1fr); }
  .lane-grid { grid-template-columns: 1fr; }
  .crowns { grid-template-columns: repeat(3, 1fr); }
  .nav-links { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .tier-strip { grid-template-columns: repeat(2, 1fr); }
  .crowns { grid-template-columns: repeat(2, 1fr); }
  .legal .toc ol { columns: 1; }
  .hero-readout { gap: 20px; }
  .footer .wrap { flex-direction: column; align-items: flex-start; }
  .footer .brand { margin-right: 0; }
}