/* massif.earth: shared styles for every page. Unlayered, so these rules win over the engine's @layer sw. */

/* ---------- Fonts (self-hosted, Basic Latin + Latin-1 + General Punctuation) ---------- */
@font-face { font-family: "Outfit"; src: url("/assets/fonts/outfit-var-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/assets/fonts/public-sans-var-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Tokens (§3.1 to §3.3) ---------- */
:root {
  color-scheme: dark;
  --night: #12161A;
  --granite: #2B2F33;
  --snow: #F6F7F8;
  --sky: #6FA8DC;
  --signal: #E2483D;
  --night-raised: #181D22;
  --rock: #73787D;
  --snow-soft: #B6B8BA;
  --snow-mute: #929496;
  --line: rgba(246,247,248,.12);
  --tag-line: rgba(246,247,248,.28);
  --sky-fill: rgba(111,168,220,.14);
  --signal-hi: #EB5E54;

  --font-display: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.6346rem + 3.4615vw, 4.75rem);
  --fs-h1: clamp(2.5rem, 1.9231rem + 2.3077vw, 4rem);
  --fs-h2: clamp(1.875rem, 1.5385rem + 1.3462vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.1538rem + 0.3846vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.0529rem + 0.2885vw, 1.3125rem);
  --fs-body: clamp(1rem, 0.976rem + 0.0962vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --fs-data: clamp(0.8125rem, 0.7885rem + 0.0962vw, 0.875rem);
  --fs-button: 1.0625rem;
  --fs-button-sm: 0.9375rem;

  --gutter: clamp(1rem, -0.1538rem + 4.6154vw, 4rem);
  --container: 1240px;
  --section: clamp(4.5rem, 3.1538rem + 5.3846vw, 8rem);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gap: 16px;          /* column gap: 16 under 600, 20 to 899, 24 from 900 */
  --media-gap: 48px;    /* text group to media, ledger or table: 48 at 400, 64 on desktop */
  --ease: cubic-bezier(0, 0, .2, 1);
}
@media (min-width: 600px) { :root { --gap: 20px; } }
@media (min-width: 900px) { :root { --gap: 24px; --media-gap: 64px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--night); color: var(--snow); }
html { scroll-behavior: auto; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }   /* keeps position: sticky working; overrides the engine's overflow-x: hidden */
body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:where(h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; }
img, video { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
strong, b { font-weight: 600; }
p { max-width: 62ch; }

h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.02em; }
h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.015em; }
h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.005em; }
.display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.025em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 52ch; }
.small { font-size: var(--fs-small); line-height: 1.5; }
.note { font-size: var(--fs-small); line-height: 1.5; color: var(--snow-mute); }
.soft { color: var(--snow-soft); }
.mono, code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow { display: block; font: 500 var(--fs-label)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow-mute); font-variant-numeric: tabular-nums; }

/* Rhythm (§3.3): eyebrow to heading 16, heading to text 24, paragraph to paragraph 16. Zero specificity, so helpers win. */
:where(.eyebrow) + :where(h1, h2, h3) { margin-top: 16px; }
:where(h1, h2) + :where(p, .lead, .note) { margin-top: 24px; }
:where(p) + :where(p) { margin-top: 16px; }

/* ---------- Links and focus (§3.4) ---------- */
a { color: var(--snow); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.go svg { display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: -1px; }
:focus-visible { outline: 2px solid var(--snow); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* ---------- Utilities ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.plain { list-style: none; padding: 0; margin: 0; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
.mt-media { margin-top: var(--media-gap); }
@media (min-width: 900px) { .lg-mt-0 { margin-top: 0; } }

/* Skip link (§4.1) */
.skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 16px; left: 16px; z-index: 90; display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border: 1px solid var(--rock); border-radius: 4px; background: var(--night); color: var(--snow); font: 700 var(--fs-button)/1 var(--font-display); letter-spacing: .01em; text-decoration: none; }

/* ---------- Layout (§3.3) ----------
   .wrap is the page grid with named lines full-start / content-start / content-end / full-end.
   From 900px it carries the 12 content columns directly, so .from-N / .to-N place items by column number.
   .row is a full-width child that repeats the same grid (use it to nest a layout and keep column numbers). */
.wrap, .row {
  display: grid;
  grid-template-columns: [full-start] minmax(0, 1fr) [content-start] min(var(--container), 100% - 2 * var(--gutter)) [content-end] minmax(0, 1fr) [full-end];
  column-gap: 0;
}
.wrap > *, .row > * { grid-column: content; min-width: 0; }
.row { grid-column: full; }
.bleed { grid-column: full; }
@media (max-width: 899px) { .sm-bleed { grid-column: full; } }
@media (min-width: 900px) {
  .wrap, .row {
    grid-template-columns: [full-start] minmax(0, 1fr) [content-start] repeat(12, calc((min(var(--container), 100% - 2 * var(--gutter)) - 11 * 24px) / 12)) [content-end] minmax(0, 1fr) [full-end];
    column-gap: 24px;
  }
  .from-1 { grid-column-start: 2; } .from-2 { grid-column-start: 3; } .from-3 { grid-column-start: 4; } .from-4 { grid-column-start: 5; }
  .from-5 { grid-column-start: 6; } .from-6 { grid-column-start: 7; } .from-7 { grid-column-start: 8; } .from-8 { grid-column-start: 9; }
  .from-9 { grid-column-start: 10; } .from-10 { grid-column-start: 11; } .from-11 { grid-column-start: 12; } .from-12 { grid-column-start: 13; }
  .to-1 { grid-column-end: 3; } .to-2 { grid-column-end: 4; } .to-3 { grid-column-end: 5; } .to-4 { grid-column-end: 6; }
  .to-5 { grid-column-end: 7; } .to-6 { grid-column-end: 8; } .to-7 { grid-column-end: 9; } .to-8 { grid-column-end: 10; }
  .to-9 { grid-column-end: 11; } .to-10 { grid-column-end: 12; } .to-11 { grid-column-end: 13; } .to-12 { grid-column-end: 14; }
  .to-edge { grid-column-end: full-end; }
  .from-edge { grid-column-start: full-start; }
  .self-start { align-self: start; } .self-center { align-self: center; } .self-end { align-self: end; }
  .is-sticky { position: sticky; top: 104px; align-self: start; }
}

/* Sections: section padding, a 1px hairline across the content width, eyebrow 24px below it. */
.section { padding-block: var(--section); }
.section::before { content: ""; grid-column: content; height: 0; border-top: 1px solid var(--line); margin-bottom: 24px; }
.section--band-top { padding-top: 0; }          /* starts with a full-bleed media band (no padding, no hairline) */
.section--band-top::before { display: none; }
main { position: relative; z-index: 70; background: var(--night); }

/* ---------- Buttons (§3.4) ---------- */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: 4px;
  font: 700 var(--fs-button)/1 var(--font-display); letter-spacing: .01em; white-space: nowrap;
  text-decoration: none; cursor: pointer; box-shadow: none;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn-primary { background: var(--signal); border-color: var(--signal); color: var(--night); }
.btn-primary:hover { background: var(--signal-hi); border-color: var(--signal-hi); }
.btn-secondary { background: transparent; border-color: var(--rock); color: var(--snow); }
.btn-secondary:hover { border-color: var(--snow); }
.btn-primary:active, .btn-secondary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .6; cursor: progress; transform: none; background: var(--signal); border-color: var(--signal); }
.btn-sm { height: 40px; padding: 0 16px; font-size: var(--fs-button-sm); }
@media (max-width: 899px) {
  .btn-sm { position: relative; }
  .btn-sm::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }   /* 44px hit area */
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.link-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--snow); font: 400 var(--fs-body)/1.4 var(--font-body); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.link-button:hover { text-decoration-thickness: 2px; }

/* ---------- Tags, seal tag, icons ---------- */
.tag, .tags > li { display: inline-block; font: 500 12px/1 var(--font-mono); letter-spacing: .04em; padding: 8px 10px; border: 1px solid var(--tag-line); border-radius: 2px; color: var(--snow); background: rgba(18,22,26,.5); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 24px 0 0; }
.seal-tag { display: flex; align-items: center; gap: 8px; max-width: none; font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--snow); }
.seal-tag svg { width: 12px; height: 12px; }
.pin { color: var(--signal); }
.icon-12 { width: 12px; height: 12px; }
.icon-16 { width: 16px; height: 16px; }

/* ---------- Header (§4.2) ---------- */
.site-header { position: sticky; top: 0; z-index: 80; height: 72px; background: var(--night); border-bottom: 1px solid var(--line); }
.header-inner { position: relative; display: flex; align-items: center; height: 100%; width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.logo { display: block; flex: none; text-decoration: none; }
.logo picture { display: block; }
.logo img { display: block; width: auto; height: 24px; }
.status-pill { display: none; }
.nav { margin-left: auto; padding-left: 8px; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1 var(--font-body); color: var(--snow-soft); text-decoration: none; white-space: nowrap; transition: color .15s var(--ease); }
.nav a:hover { color: var(--snow); }
.nav a[aria-current="page"] { color: var(--snow); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.header-cta { flex: none; margin-left: 24px; }
@media (min-width: 480px) { .logo img { height: 22px; } }
@media (min-width: 900px) {
  .logo img { height: 26px; }
  .status-pill { display: inline-block; margin-left: 16px; padding: 4px 8px; border: 1px solid var(--tag-line); border-radius: 2px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--snow-soft); white-space: nowrap; }
}
@media (max-width: 899px) {
  .site-header { height: 60px; }
  .nav ul { gap: 16px; }
  .header-cta { margin-left: 16px; }
}
@media (max-width: 359px) {
  .logo img { height: 20px; }
  .nav ul { gap: 12px; }
  .nav a { font-size: 14px; }
  .header-cta { margin-left: 12px; padding: 0 12px; font-size: 14px; }
  .header-cta__noun { text-transform: capitalize; }   /* “Request ” stays .sr-only here: the button shows “Invite” and is named “Request invite” */
}
/* The header button’s “Request ” is .sr-only in the markup and shown from 360px up. */
@media (min-width: 360px) {
  .header-cta .sr-only { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: inherit; }
}
@media (min-width: 360px) and (max-width: 369px) { .nav ul { gap: 12px; } .header-cta { margin-left: 12px; } }   /* “Request invite” fits from 360px */
/* Home page with the flight running (html.flight-live, set by flight.js) */
/* With JS on, take the home header out of flow from first paint, so the page doesn't shift when flight.js sets flight-live. */
@media (scripting: enabled) { :root:has(#flight) .site-header { position: fixed; inset: 0 0 auto; } }
html.flight-live .site-header { position: fixed; inset: 0 0 auto; background: linear-gradient(180deg, rgba(18,22,26,.85) 0%, rgba(18,22,26,0) 100%); border-bottom-color: transparent; transition: border-color .2s var(--ease); }
html.flight-live .site-header::before { content: ""; position: absolute; inset: 0; background: var(--night); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
html.flight-live.flight-done .site-header { border-bottom-color: var(--line); }
html.flight-live.flight-done .site-header::before { opacity: 1; }

/* ---------- Footer (§4.3) ---------- */
.site-footer { position: relative; z-index: 70; background: var(--night); border-top: 1px solid var(--line); padding: 64px 0 40px; }
.footer-logo { display: block; width: auto; height: 28px; }
.footer-tagline { margin-top: 16px; font: 600 20px/1.3 var(--font-display); color: var(--snow); max-width: 24ch; }
.footer-links ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.footer-links a { font: 400 15px/1.4 var(--font-body); color: var(--snow); }
.footer-ledger dl { margin-top: 12px; display: grid; row-gap: 8px; }
.footer-ledger dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.footer-ledger dt { font: 400 15px/1.4 var(--font-body); color: var(--snow-soft); }
.footer-ledger dd { font: 400 14px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--snow); text-align: right; }
.footer-ledger > dl + p { margin-top: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--snow-mute); }
.footer-status { font-size: var(--fs-small); line-height: 1.5; color: var(--snow-soft); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font: 400 12px/1.5 var(--font-mono); color: var(--snow-mute); }
.footer-bottom a { color: var(--snow-mute); }
.footer-bottom a:hover { color: var(--snow); }
@media (max-width: 899px) {
  .site-footer .wrap > * + * { margin-top: 32px; }
  .footer-links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .footer-ledger { max-width: 420px; }
  .footer-bottom { flex-direction: column; margin-top: 32px; }
}

/* ---------- Touch targets (§13): at least 44 x 44px on touch for every control ---------- */
@media (hover:none) and (pointer:coarse) {
  .logo { position: relative; }
  .logo::after { content: ""; position: absolute; inset: -12px -7px; }
  p > .go { position: relative; }
  p > .go::after { content: ""; position: absolute; inset: -13px -4px; }
  .footer-links ul { row-gap: 0; }
  .footer-links a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .btn-sm { position: relative; }
  .btn-sm::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
}

/* ---------- Ledger (§3.4) ---------- */
.ledger { list-style: none; padding: 0; }   /* margin comes from the base reset, so .mt-* helpers apply */
.ledger > li { display: grid; grid-template-columns: 56px 260px minmax(0, 1fr); column-gap: 24px; align-items: baseline; padding-block: 20px; border-top: 1px solid var(--line); }
.ledger--plain > li { grid-template-columns: 260px minmax(0, 1fr); }
.ledger__index { font: 400 var(--fs-data)/1.55 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--snow-mute); }
.ledger__term { font: 600 var(--fs-h3)/1.25 var(--font-display); letter-spacing: -0.005em; color: var(--snow); }
.ledger__detail { color: var(--snow-soft); max-width: 62ch; }
@media (min-width: 900px) {
  /* On the page grid: index in column 1, term in 2 to 4, detail in 5 to 10 (home #terrain) */
  .ledger--cols > li { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ledger--cols .ledger__index { grid-column: 1; }
  .ledger--cols .ledger__term { grid-column: 2 / 5; }
  .ledger--cols .ledger__detail { grid-column: 5 / 11; }
}
@media (max-width: 899px) {
  .ledger > li, .ledger--cols > li { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 6px; }
  .ledger--plain > li { grid-template-columns: minmax(0, 1fr); }
  .ledger__detail { grid-column: 1 / -1; }
}

/* ---------- Record panel (§3.4) ---------- */
.record { background: var(--night-raised); border: 1px solid var(--line); border-radius: 4px; padding: 20px 24px; }
.record__head { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.record__title { font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow); }
.record__sub { margin-top: 4px; font-size: var(--fs-small); line-height: 1.5; color: var(--snow-mute); }
/* Rows share one label column (subgrid): 88px, or wider when a larger text size needs it, so labels never overprint values. */
.record__rows { display: grid; row-gap: 8px; grid-template-columns: minmax(88px, max-content) minmax(0, 1fr); }
.record__rows > div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; }
.record dt { padding-right: 8px; font: 400 var(--fs-data)/1.55 var(--font-mono); text-transform: lowercase; color: var(--snow-mute); }
.record dd { margin: 0; min-width: 0; font: 400 var(--fs-data)/1.55 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--snow); }
.record dd.record__text { font: 400 var(--fs-body)/1.55 var(--font-body); }
.cipher { color: var(--snow-mute) !important; word-break: break-all; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .record { padding: 16px; }
  .record__rows > .record__block { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}

/* ---------- Spec table (§3.4) ---------- */
.spec-group__title { padding-top: 12px; border-top: 2px solid var(--snow); }
.spec-group__title + .specs { margin-top: 12px; }   /* scoped, so a standalone dl.specs can take .mt-* helpers */
.specs > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 24px; align-items: baseline; padding-block: 14px; border-top: 1px solid var(--line); }
.specs dt { font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow-mute); }
.specs dd { margin: 0; color: var(--snow); }
@media (max-width: 899px) {
  .specs > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}

/* ---------- Data table (§3.4) ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; vertical-align: top; }
.table thead th { padding: 14px 16px; background: var(--granite); font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow-soft); }
.table td, .table tbody th { padding: 16px; border-bottom: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.6; }
.table th[scope="row"] { font: 600 18px/1.35 var(--font-display); letter-spacing: -0.005em; color: var(--snow); }
.table th[scope="rowgroup"] { padding: 12px 16px; background: var(--night-raised); font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow); }
.table .data { font: 400 var(--fs-data)/1.55 var(--font-mono); font-variant-numeric: tabular-nums; }
.table .w-36 { width: 36%; }
@media (max-width: 599px) {
  .table, .table tbody, .table tr, .table th, .table td { display: block; width: auto; }
  .table thead { display: block; }
  .table thead tr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .table tbody tr { padding-block: 16px 12px; border-bottom: 1px solid var(--line); }
  .table tbody tr:has(> th[scope="rowgroup"]) { padding: 0; border-bottom: 0; }
  .table tbody th[scope="row"], .table td { padding: 0; border-bottom: 0; }
  .table td { margin-top: 10px; }
  .table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 400 12px/1.4 var(--font-mono); color: var(--snow-mute); }
  .table th[scope="rowgroup"] { margin-top: 24px; padding: 12px 16px; }
}

/* ---------- Disclosure / FAQ (§3.4) ---------- */
.disclosure { border-top: 1px solid var(--line); }
.disclosure-list > .disclosure:last-child { border-bottom: 1px solid var(--line); }
.disclosure > summary { position: relative; display: block; padding: 20px 38px 20px 0; list-style: none; cursor: pointer; font: 600 var(--fs-h3)/1.25 var(--font-display); letter-spacing: -0.005em; color: var(--snow); }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::marker { content: ""; }
.disclosure > summary svg { position: absolute; right: 0; top: calc(20px + (1.25em - 14px) / 2); width: 14px; height: 14px; transition: transform .15s var(--ease); }
.disclosure[open] > summary svg { transform: rotate(45deg); }
.disclosure > :not(summary) { max-width: 62ch; padding-bottom: 20px; color: var(--snow-soft); }

/* ---------- CTA band (§3.4, §7.7, §8.8) ---------- */
.cta-band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 64px 48px; border-radius: 4px; background: var(--granite); }
.cta-band > * { grid-column: 1 / 9; }
.cta-band p { color: var(--snow-soft); }
@media (max-width: 899px) {
  .cta-band { display: block; padding: 40px 20px; }
}

/* ---------- Figures: photos, captions, screens, bands ---------- */
.photo img { width: 100%; height: auto; object-fit: cover; border-radius: 4px; }
.photo--bleed img, .band img { border-radius: 0; }
.caption { display: flex; gap: 8px; margin-top: 12px; font: 400 12px/1.5 var(--font-mono); color: var(--snow-mute); max-width: 62ch; }
.caption::before { content: ""; flex: none; width: 16px; height: 1px; margin-top: 9px; background: var(--snow-mute); }
.ar-16x9 { aspect-ratio: 16 / 9; }
@media (max-width: 899px) { .sm-ar-4x3 { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) { .lg-ar-4x5 { aspect-ratio: 4 / 5; } .lg-ar-4x3 { aspect-ratio: 4 / 3; } .lg-ar-21x9 { aspect-ratio: 21 / 9; } }
/* Focal points for the shipped photos (§12.1) */
.crop-key { object-position: 58% 50%; }
.crop-landowner { object-position: 60% 45%; }
.crop-ridge { object-position: 80% 50%; }
.crop-camp { object-position: 74% 60%; }
.crop-sealed { object-position: 50% 40%; }
@media (min-width: 900px) {
  .crop-key { object-position: 55% 50%; }
  .crop-landowner { object-position: 62% 50%; }
  .crop-ridge { object-position: 78% 55%; }
  .crop-camp { object-position: 72% 60%; }
}

/* App screen (.screen): never a device frame */
.screen-fig { width: 280px; max-width: 100%; }
.screen { display: block; width: 100%; height: auto; overflow: hidden; background: var(--night); border: 1px solid rgba(246,247,248,.14); border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.65); }
.screen-caption { margin-top: 12px; }
.screen-caption__label { display: block; font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow-mute); }
.screen-caption__text { display: block; margin-top: 4px; font-size: var(--fs-small); line-height: 1.5; color: var(--snow-soft); }
@media (min-width: 900px) {
  .screen { border-radius: 26px; }
  .screen-fig { width: 100%; max-width: 340px; }
  .screen-fig--280 { max-width: 280px; }
  .screen-fig--300 { max-width: 300px; }
  .screen-fig--320 { max-width: 320px; }
}

/* Full-bleed media band with optional overlay text.
   <figure class="band [band--captioned] [band--scrim-left|band--scrim-bottom]"> spans full and shares the
   section grid (subgrid), so a .band__text sibling placed after it overlays row 1 on desktop
   and drops below the band (after its caption) under 900px. */
.band { grid-column: full; grid-row: 1; display: grid; grid-template-columns: subgrid; margin: 0; }
.band--captioned { grid-row: 1 / span 2; grid-template-rows: subgrid; }
.band > img, .band > video { grid-column: full; grid-row: 1; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; align-self: stretch; }
:where(.band) > figcaption { grid-row: 2; grid-column: content; }
.band__text { position: relative; z-index: 2; margin-top: 48px; }
@media (min-width: 900px) {
  .band > img, .band > video { max-height: 88vh; }
  .band::after { content: ""; grid-column: full; grid-row: 1; position: relative; z-index: 1; pointer-events: none; }
  .band--scrim-left::after { background: linear-gradient(90deg, rgba(18,22,26,.92) 0%, rgba(18,22,26,.78) 30%, rgba(18,22,26,0) 60%); }
  .band--scrim-bottom::after { background: linear-gradient(0deg, rgba(18,22,26,.9) 0%, rgba(18,22,26,.4) 40%, rgba(18,22,26,0) 70%); }
  .band__text { grid-row: 1; align-self: center; margin-top: 0; padding-block: 48px; }
  .band__text--bottom { align-self: end; padding: 0 0 64px; }
  .band.band--tall > img, .band.band--tall > video { aspect-ratio: auto; height: min(88vh, 860px); max-height: none; }   /* /mapping hero */
  .band__text .eyebrow { color: var(--snow); text-shadow: 0 0 2px #12161A, 0 0 6px #12161A, 0 0 12px rgba(18,22,26,.95), 0 1px 20px rgba(18,22,26,.9); }   /* over media; under 900px the text sits on Night */
}
@media (min-width: 900px) and (max-width: 1199px) { .band--tall.band--scrim-bottom::after { background: linear-gradient(0deg, rgba(18,22,26,.9) 0%, rgba(18,22,26,.6) 45%, rgba(18,22,26,0) 80%); } }   /* /mapping hero: the eyebrow sits low over bright terrain at these widths */
@media (max-width: 899px) { .band__text--bottom { margin-top: 32px; } }

/* Ambient loop (§3.4): muted video, poster first, Pause/Play toggle. site.js plays it in view only. */
.loop { position: relative; margin: 0; }
.loop video { display: block; width: 100%; height: auto; object-fit: cover; background: var(--night); }
.loop--scrim::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(18,22,26,.7) 0%, rgba(18,22,26,0) 35%); }
.loop__caption { position: absolute; left: var(--gutter); right: 76px; bottom: 24px; z-index: 2; display: flex; gap: 8px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow); }
.loop__caption::before { content: ""; flex: none; width: 16px; height: 1px; margin-top: 8px; background: var(--snow); }
.loop__toggle { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: rgba(18,22,26,.72); color: var(--snow); cursor: pointer; transition: border-color .15s var(--ease); }
.loop__toggle:hover { border-color: var(--snow-soft); }
.loop__toggle svg { width: 16px; height: 16px; }
.loop .icon-pause, .loop.is-playing .icon-play { display: none; }
.loop.is-playing .icon-pause { display: block; }
@media (max-width: 599px) { .loop__caption { bottom: 16px; } }

/* ---------- Invite form (§11.1) ---------- */
.form { display: block; }
.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field + .field { margin-top: 24px; }
.field > label, .field > legend { display: block; margin-bottom: 8px; padding: 0; font: 600 15px/1.4 var(--font-body); color: var(--snow); }
.optional { margin-left: 8px; font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow-mute); white-space: nowrap; }
.form input[type="email"], .form input[type="text"], .form select {
  display: block; width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--rock); border-radius: 4px;
  background-color: var(--night-raised); color: var(--snow); font: 400 17px/1.2 var(--font-body);
  transition: border-color .15s var(--ease);
}
.form select { -webkit-appearance: none; appearance: none; padding-right: 44px; background-image: url("/assets/img/chevron.svg"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; cursor: pointer; }
.form select option { background: var(--night-raised); color: var(--snow); }
.form input:hover, .form select:hover { border-color: var(--snow-soft); }
.form input:focus, .form select:focus { border-color: var(--snow); }
.form [aria-invalid="true"] { border-color: var(--snow); box-shadow: inset 0 0 0 1px var(--snow); }
.segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.segments label { position: relative; display: block; height: 48px; padding: 0 14px; border: 1px solid var(--rock); border-radius: 4px; font: 400 15px/46px var(--font-body); color: var(--snow); white-space: nowrap; cursor: pointer; transition: border-color .15s var(--ease); }
.segments label:hover { border-color: var(--snow-soft); }
.segments input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.segments input:focus-visible { outline: none; }
.segments label:has(input:checked) { border-color: var(--snow); box-shadow: inset 0 0 0 .5px var(--snow); }
.segments label:has(input:checked)::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--snow); vertical-align: 1px; }
.segments label:has(input:focus-visible) { outline: 2px solid var(--snow); outline-offset: 3px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form button[type="submit"] { margin-top: 32px; width: 100%; }
.field-error { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font: 400 15px/1.4 var(--font-body); color: var(--snow); }
.form-error { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 12px 16px; border-left: 2px solid var(--snow); background: var(--night-raised); font: 400 15px/1.4 var(--font-body); color: var(--snow); max-width: none; }
.field-error svg, .form-error svg { width: 16px; height: 16px; margin-top: 2px; }
.fine { margin-top: 16px; font-size: var(--fs-small); line-height: 1.5; color: var(--snow-mute); }
.fine a { color: var(--snow); }
.form-done h3 { font: 700 var(--fs-h2)/1.1 var(--font-display); letter-spacing: -0.015em; }
.form-done p { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.5; }
.form-done .link-button { margin-top: 16px; }
.form-done [data-email] { overflow-wrap: anywhere; }   /* a long address wraps instead of running out of the column */
@media (min-width: 600px) { .form button[type="submit"] { width: auto; } }
@media (max-width: 439px) {   /* “Private land” with its dot needs about 126px; under 440px the options read Public / Private / Both */
  .segments label { padding: 0 10px; }
  .seg-more { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Home: flight (§5) ---------- */
#flight { min-height: 100vh; min-height: 100svh; }
/* The browser restores scroll against the pre-mount page; without this, anchoring keeps main in place when the
   deferred engine inserts its track, and a reload or Back mid-flight lands one track-height too far down. */
:root:has(#flight) { overflow-anchor: none; }   /* flight.js keeps the reader's place on resize and rotation instead */
.skip-flight { display: none; }
html.flight-live .skip-flight {
  position: fixed; left: var(--gutter); bottom: 24px; z-index: 45;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow-soft);
  text-decoration: underline; text-underline-offset: 3px;
}
html.flight-live .skip-flight:hover { color: var(--snow); }
.skip-flight svg { width: 12px; height: 12px; }
@media (max-width: 599px) { html.flight-live .skip-flight { bottom: calc(20px + env(safe-area-inset-bottom)); } }

/* No JS: the five scenes as a static list (§5.7) */
.flight-static { padding-bottom: 64px; }
.flight-static__scene + .flight-static__scene { margin-top: 64px; }
.flight-static__scene > img { grid-column: full; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.flight-static__copy { margin-top: 32px; }
.flight-static__eyebrow { display: block; font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow-soft); }
.flight-static__copy h2 { margin-top: 12px; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.025em; }
.flight-static__body { margin-top: 20px; max-width: 38ch; font-size: var(--fs-lead); line-height: 1.5; }
.flight-static__copy .btn-row { margin-top: 28px; }

/* Engine theme overrides (§5.4), unlayered so they win over @layer sw */
.sw-root { --sw-bg:#12161A; --sw-ink:#F6F7F8; --sw-ink-soft:#B6B8BA; --sw-accent:#929496;
           --sw-font-display:var(--font-display); --sw-font-body:var(--font-body); }
.sw-topbar, .sw-particles { display:none; }
.sw-scene__video, .sw-scene__still { height:100%; max-width:none; }   /* restore the engine's cover sizing after the img/video reset */
.sw-scrollbar { top:72px; height:2px; background:rgba(246,247,248,.14); }
.sw-scrollbar span { background:var(--snow-soft); }
.sw-copy { left:var(--gutter); }
/* The counter and eyebrow carry a Night halo so they hold 4.5:1 over any frame of the stills and clips. */
.sw-copy__num { font:500 12px/1.4 var(--font-mono); letter-spacing:.12em; color:var(--snow-mute); text-shadow:0 0 3px #12161A, 0 0 8px rgba(18,22,26,.9), 0 1px 16px rgba(18,22,26,.9); }
.sw-copy__eyebrow { display:block; font:500 12px/1.4 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--snow-soft); margin-top:16px; text-shadow:0 0 3px #12161A, 0 0 8px rgba(18,22,26,.9), 0 1px 16px rgba(18,22,26,.9); }
.sw-copy__title { font-family:var(--font-display); font-weight:700; color:var(--snow); font-size:var(--fs-display); line-height:1.02; letter-spacing:-.025em; margin-top:12px; text-shadow:0 2px 24px rgba(18,22,26,.7); }
.sw-copy__body { font-size:var(--fs-lead); line-height:1.5; max-width:38ch; color:var(--snow); margin-top:20px; }
.sw-copy__tags { gap:8px; margin:24px 0 0; padding:0; }
.sw-copy__tags li { font:500 12px/1 var(--font-mono); letter-spacing:.04em; padding:8px 10px; border:1px solid var(--tag-line); border-radius:2px; background:rgba(18,22,26,.5); color:var(--snow); }
.sw-copy__cta { gap:12px; margin-top:28px; }
.sw-btn { display:inline-flex; align-items:center; height:52px; padding:0 24px; border-radius:4px; font:700 1.0625rem/1 var(--font-display); letter-spacing:.01em; text-decoration:none; transition:background-color .15s, border-color .15s; }
.sw-btn--primary { background:var(--signal); color:var(--night); }
.sw-btn--primary:hover { background:var(--signal-hi); transform:none; }
.sw-btn--ghost { color:var(--snow); border:1px solid var(--rock); }
.sw-btn--ghost:hover { border-color:var(--snow); transform:none; }
.sw-route::before { width:1px; background:var(--snow-mute); opacity:.4; }
.sw-route__dot i { width:8px; height:8px; background:rgba(246,247,248,.4); }
.sw-route__dot:hover i { background:var(--snow); }
.sw-route__dot.is-active i { background:var(--snow); transform:scale(1.3); box-shadow:0 0 0 4px rgba(246,247,248,.18); }
.sw-route__label { font:500 12px/1 var(--font-mono); letter-spacing:.06em; color:var(--snow); background:rgba(18,22,26,.85); backdrop-filter:none; border:1px solid var(--line); border-radius:2px; }
.sw-hint { font:500 12px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--snow-soft); left:auto; right:var(--gutter); transform:none; align-items:flex-end; }   /* bottom right, on the page’s left-aligned system */
.sw-hint i { border-color:rgba(246,247,248,.4); }
.sw-hint i::after { background:var(--snow); }
/* Touch: 44px route-dot targets at a 44px pitch; the visible 8px dot is unchanged. */
@media (hover:none) and (pointer:coarse) {
  .sw-route { gap:0; padding:14px 0; }
  .sw-route::before { top:36px; bottom:36px; }
  .sw-route__dot { width:44px; height:44px; }
  .sw-route__label { right:39px; }
}
@media (min-width:861px) {
  .sw-copylayer::before { width:min(62vw,860px);
    background:linear-gradient(90deg,rgba(18,22,26,.92) 0%,rgba(18,22,26,.72) 36%,rgba(18,22,26,.3) 64%,rgba(18,22,26,0) 100%); }
  .sw-copy { width:min(40vw,520px); translate:0 -50%; }  /* the engine's inline transform replaces its own translateY(-50%); this restores true vertical centering */
}
/* 861 to 1099px: the copy runs past the dense part of the default scrim, so the scrim widens and holds longer. */
@media (min-width:861px) { .sw-copylayer > .sw-copy:last-child .sw-copy__body { max-width: 31ch; } }   /* scene 5 body clears the phone */
@media (min-width:861px) and (max-width:1099px) {
  .sw-copylayer::before { width:min(78vw,860px);
    background:linear-gradient(90deg,rgba(18,22,26,.92) 0%,rgba(18,22,26,.85) 45%,rgba(18,22,26,.3) 75%,rgba(18,22,26,0) 100%); }
}
@media (max-width:899px) { .sw-scrollbar { top:60px; } }
/* Up to 860px the copy sits at the bottom; the scrim covers the full height (the engine keeps top:auto; bottom:0; width:100%)
   and the counter is Snow-soft. */
@media (max-width:860px) {
  .sw-copy { right:56px; }
  .sw-copylayer::before { height:100%;
    background:linear-gradient(0deg,rgba(18,22,26,.96) 0%,rgba(18,22,26,.88) 50%,rgba(18,22,26,.72) 78%,rgba(18,22,26,0) 100%); }
  .sw-copy__num { color:var(--snow-soft); }
}
@media (max-width:599px) {
  .sw-route, .sw-hint { display:none; }
  .sw-copy { right:var(--gutter); }
}
/* Short viewports (landscape phones, 320x568, 200% zoom): drop the scene bodies and tags, which §6.2 to §6.8 repeat,
   so the eyebrow, title and calls to action clear the header and “Skip the flight”. */
@media (max-height:480px), (max-width:860px) and (max-height:600px) {
  .sw-copy__body, .sw-copy__tags { display:none; }
  .sw-copy__title { font-size:clamp(1.75rem, 7vh, 2.5rem); }
  .sw-copy__eyebrow { margin-top:8px; }
  .sw-copy__cta { margin-top:16px; }
}
@media (max-width:860px) and (max-height:600px) {
  .sw-copy { bottom:calc(76px + env(safe-area-inset-bottom)); }
}
/* End of the flight (§5.6) */
html.flight-live main::before { content:""; position:absolute; left:0; right:0; top:-120px; height:120px; pointer-events:none;
  background:linear-gradient(180deg,rgba(18,22,26,0),#12161A); }
html.flight-done .sw-route, html.flight-done .sw-hint, html.flight-done .sw-scrollbar, html.flight-done .skip-flight {
  opacity:0; visibility:hidden; transition:opacity .2s, visibility 0s .2s; }
/* Once the page covers the flight, hide the engine’s layers only: the sr-only H1 and the skip link are also children of
   #flight and must stay in the accessibility tree. */
html.flight-covered .sw-root > :is(.sw-sky, .sw-scrollbar, .sw-topbar, .sw-stage, .sw-copylayer, .sw-route, .sw-hint) { visibility:hidden; }

/* ---------- Home: status band (§6.2) ---------- */
.status-band { padding-block: 20px; background: var(--night-raised); border-block: 1px solid var(--line); }
.status-band .wrap { row-gap: 8px; }
.status-band__label { font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--snow); }
.status-band__text { font-size: var(--fs-small); line-height: 1.5; color: var(--snow-soft); }
.status-band p { margin-top: 0; }   /* the row-gap spaces the stack, not the paragraph rhythm */
@media (min-width: 900px) {
  .status-band .wrap { align-items: baseline; }
  .status-band__link { justify-self: end; text-align: right; }
}

/* ---------- Home: the Seal (§6.3) ---------- */
.seal { margin-top: var(--media-gap); row-gap: 16px; }
.seal__panel { display: flex; flex-direction: column; }
.seal__mark { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font: 600 20px/1.3 var(--font-display); color: var(--snow); }
.seal__mark svg { width: 10px; height: 14px; }
.seal__panel--phone .record__rows { margin-bottom: 16px; }
.seal__panel--phone .seal-tag { margin-top: auto; margin-bottom: 16px; }
.seal__lock { display: none; color: var(--snow-mute); }
.seal__caption { font-size: var(--fs-small); line-height: 1.5; color: var(--snow-mute); }
.seal-after { margin-top: 48px; }
@media (min-width: 900px) {
  .seal { margin-top: 64px; row-gap: 0; }
  .seal > .seal__panel { grid-row: 1; }
  .seal__lock { display: block; grid-row: 1; grid-column: 6 / 8; justify-self: center; align-self: center; width: 16px; height: 16px; }
  .seal > .seal__caption { grid-row: 2; margin-top: 16px; }
}

/* ---------- Home: mapping (§6.4) ---------- */
.terrain-loop { margin-top: var(--media-gap); }
@media (min-width: 900px) {
  .terrain-loop video { aspect-ratio: 21 / 9; max-height: 72vh; object-position: 50% 50%; }
}

/* ---------- Home: sharing (§6.5) ---------- */
.share-text { margin-top: 48px; }
.slip { margin-top: 32px; }
.limit { margin-top: 16px; font-size: var(--fs-small); line-height: 1.5; color: var(--snow-soft); }
@media (min-width: 900px) { .share-text { margin-top: 0; align-self: center; } }

/* ---------- Home: app screens (§6.6) ---------- */
.screens { list-style: none; margin: var(--media-gap) 0 0; padding: 0; row-gap: 48px; }
.screens > li:nth-child(2) { justify-self: end; }
@media (min-width: 900px) {
  .screens { row-gap: 0; margin-bottom: 96px; }
  .screens > li:nth-child(2) { justify-self: stretch; transform: translateY(96px); }
}

/* ---------- Home: specs (§6.7) ---------- */
.spec-group { margin-top: 48px; }
@media (max-width: 899px) { .spec-group + .spec-group { margin-top: 40px; } }

/* ---------- Home: invite (§6.8) ---------- */
.ea-photo { position: relative; }
.ea-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 899px) {
  .ea { padding-top: 0; }
  .ea::before { display: none; }
  .ea-photo { grid-column: full; order: -1; margin-bottom: 48px; }
}
@media (min-width: 900px) {
  .ea-photo { min-height: 640px; }
  .ea-photo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}

/* ---------- Reduced motion (§13) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .disclosure > summary svg, .btn-primary, .btn-secondary, .nav a, .loop__toggle, .segments label,
  .form input, .form select, html.flight-live .site-header, html.flight-live .site-header::before { transition: none; }
  .btn-primary:active, .btn-secondary:active { transform: none; }
}

/* ==========================================================================
   Pages other than home. Each block below is used only by the page it names.
   ========================================================================== */

/* ---------- /mapping: #3d data line (§7.2) ---------- */
.data-line { display: flex; gap: 8px; max-width: none; font: 400 var(--fs-data)/1.55 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--snow); }
.data-line::before { content: ""; flex: none; width: 16px; height: 1px; margin-top: .75em; background: var(--snow-mute); }

/* ---------- /mapping: #lidar photo and screen pair (§7.3) ----------
   From 900px both figures share two subgrid rows, so the photo and the screen line up at the bottom
   of their images and their captions start on the same line. */
@media (min-width: 900px) {
  .pair { grid-template-rows: auto auto; }
  .pair > figure { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; }
  .pair > figure > img { align-self: end; }
}

/* ---------- /mapping: #offline (§7.5) ---------- */
.offline-body { margin-top: 24px; }
@media (min-width: 900px) { .offline-body { margin-top: 16px; } }   /* the H2 beside it carries 16px from the eyebrow, so their tops align */

/* ---------- /mapping: #routes elevation profile (§7.6) ---------- */
.profile { display: block; width: 100%; height: auto; overflow: visible; }
.profile__base { fill: none; stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.profile__area { fill: var(--sky-fill); }
.profile__line { fill: none; stroke: var(--sky); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.profile__marker { fill: var(--signal); stroke: var(--night); stroke-width: 2px; }
.profile text { font-family: var(--font-mono); font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums; fill: var(--snow); }
.profile .profile__axis { fill: var(--snow-mute); }
.profile .profile__climb { fill: var(--sky); }
@media (max-width: 599px) { .profile text { font-size: 19px; } }   /* about 11.6px rendered at a 368px width */
/* The chart is narrower in the desktop column: these keep the rendered labels at about 11 to 13px from 900 to 1279px. */
@media (min-width: 900px) and (max-width: 1099px) { .profile text { font-size: 17px; } }
@media (min-width: 1100px) and (max-width: 1279px) { .profile text { font-size: 14px; } }

/* ---------- /mapping: #layers table column widths (§7.4) ---------- */
@media (min-width: 600px) {
  .table .w-22 { width: 22%; }
  .table .w-26 { width: 26%; }
}

/* ---------- /security: hero (§8.1) ---------- */
.sec-hero__media { position: relative; margin: 0; }
.sec-hero__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* Night scrims fade the still into the page, so it never shows as a hard-edged rectangle. */
.sec-hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #12161A 0%, rgba(18,22,26,0) 25%), linear-gradient(180deg, #12161A 0%, rgba(18,22,26,0) 12%); }
.sec-hero__text { margin-top: 32px; }
.hero-note { padding-left: 12px; border-left: 2px solid var(--rock); font-size: var(--fs-small); line-height: 1.5; color: var(--snow-soft); }
@media (min-width: 900px) {
  .sec-hero__media, .sec-hero__text { grid-row: 1; }
  .sec-hero__media img { aspect-ratio: 4 / 3; }
  .sec-hero__media::after { background: linear-gradient(90deg, #12161A 0%, rgba(18,22,26,0) 30%), linear-gradient(0deg, #12161A 0%, rgba(18,22,26,0) 25%), linear-gradient(180deg, #12161A 0%, rgba(18,22,26,0) 12%); }
  .sec-hero__text { position: relative; z-index: 1; align-self: center; margin-top: 0; padding-block: 48px; }
}

/* ---------- /security: #key steps (§8.2), a ledger with the body under the H3 ---------- */
.ledger--steps > li { padding-bottom: 0; }
.ledger--steps > li + li { margin-top: 40px; }
@media (min-width: 900px) {
  .ledger--steps > li { grid-template-columns: 56px minmax(0, 1fr); }
  .ledger--steps .ledger__detail { grid-column: 2; margin-top: 12px; }
}

/* ---------- /security: #servers lists (§8.3) ---------- */
.held { list-style: none; margin: 16px 0 0; padding: 0; }
.held > li { padding-block: 14px; border-top: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.6; color: var(--snow); }
.held--never > li { display: flex; align-items: baseline; gap: 10px; }
.held--never svg { flex: none; width: 12px; height: 12px; }

/* ---------- /security: #recovery (§8.4) ---------- */
.rec-item { padding-top: 20px; border-top: 1px solid var(--line); }
.rec-item > p { color: var(--snow-soft); }
.rec-item > h3 + p { margin-top: 12px; }
.closing { display: flex; align-items: flex-start; gap: 12px; max-width: none; font: 600 var(--fs-h3)/1.25 var(--font-display); letter-spacing: -0.005em; color: var(--snow); }
.closing > span { max-width: 34ch; }
.closing > svg { width: 16px; height: 16px; margin-top: calc((1.25em - 16px) / 2); }

/* ---------- /security: #sharing (§8.5): screen left, text right on desktop; text first in the source ---------- */
@media (min-width: 900px) { .share-copy, .share-screen { grid-row: 1; } }

/* ---------- /privacy (§9) ---------- */
.policy { max-width: 68ch; }
.policy p { max-width: none; }
.policy > h1 + .note { margin-top: 16px; }
.policy > .note + p { margin-top: 32px; }
.policy > h2 { margin-top: 40px; }
.policy > h2 + p, .policy > h2 + ul { margin-top: 12px; }
.policy > p + ul { margin-top: 12px; }
.policy > ul + p { margin-top: 16px; }
.policy ul { padding-left: 1.25em; }
.policy li + li { margin-top: 8px; }
.policy li::marker { color: var(--snow-mute); }

/* ---------- 404 and the invite result pages (§10): the page fills at least the viewport ---------- */
.page-fill { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.page-fill > main { display: flex; flex-direction: column; flex: 1 0 auto; }
.page-fill > main > .section { flex: 1 0 auto; align-content: center; }
.go-list { list-style: none; margin: 32px 0 0; padding: 0; }
.go-list li + li { margin-top: 4px; }
.go-list .go { display: inline-flex; align-items: center; min-height: 44px; }
.nf__media { display: none; }
@media (min-width: 900px) {
  .nf__media { position: relative; display: block; margin: 0; }
  .nf__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; opacity: .55; }
  .nf__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #12161A 0%, rgba(18,22,26,0) 25%), linear-gradient(0deg, #12161A 0%, rgba(18,22,26,0) 25%), linear-gradient(180deg, #12161A 0%, rgba(18,22,26,0) 25%); }
}