/* ==========================================================================
   CORE Takeoff - the public landing page (/welcome)
   --------------------------------------------------------------------------
   Built on tokens.css only: every colour, radius and type role below is a
   --t-* token, so the page follows the palette a signed-in user picked
   (steel, night crew, light) with no rule of its own for each one. The one
   exception is the fallback background inlined in welcome.html's <head>.

   The accent (CORE green; yellow if the user picked it - tokens.css keys
   it on <html data-accent>) is spent on ONE thing: the primary action.
   Hover, focus and the targeted "What it reads" row use it as the selected
   state; nothing decorative does. Numbers read off a sheet are mono.

   Every var() carries the DEFAULT look's value (steel ground, green
   accent, dark) as its fallback, so the page stays whole even if
   tokens.css fails to load; the values were copied from tokens.css's
   :root block and only matter in that failure.
   ========================================================================== */

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

html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
:root[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--t-surface-1, #0a1219);
  color: var(--t-text, #e6eaee);
  font-family: var(--t-font-ui, "IBM Plex Sans", "Segoe UI", -apple-system, system-ui, sans-serif);
  font-size: 16px;
  line-height: var(--t-lh-body, 1.5);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }
p, h1, h2, h3, dd, figure { margin: 0; }
b { font-weight: 600; color: var(--t-text, #e6eaee); }

.wrap {
  width: min(100% - 2 * var(--gutter), 1344px);
  margin-inline: auto;
}
:root { --gutter: 48px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- focus
   Keyboard focus is always visible: a 2px ring, offset so it never merges
   with the accent button it surrounds. It is --t-accent-hi (the accent as a
   line on this ground), not --t-accent: on paper + yellow the plain accent
   ring is 1.6:1 against the page and all but vanishes. */
a:focus-visible {
  outline: 2px solid var(--t-accent-hi, #5ccb92);
  outline-offset: 3px;
  border-radius: var(--t-r-1, 3px);
}
.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 10;
  padding: 10px 14px; border-radius: var(--t-r-2, 5px);
  background: var(--t-surface-3, #16222d); color: var(--t-text, #e6eaee);
  border: 1px solid var(--t-border-strong, #2b3c4b); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------- the accuracy flag */
/* the sign-in / Terms / Privacy pages' bar (legal.css .beta), word for word and look for look: the full line, at the
   top, at every width (2026-10-01: the landing page had only a small tag, hidden at 360px) */
.flag-bar {
  padding: 8px 16px; font-size: 12.5px; font-weight: 500; line-height: 1.45;
  color: var(--t-warn, #e5a33d); background: var(--t-surface-1, #0a1219);
  border-bottom: 1px solid var(--t-border, #1d2a36); text-align: center;
}

/* --------------------------------------------------------------- header */
.site-head { border-bottom: 1px solid var(--t-border, #1d2a36); }
.head-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 64px;
}
.wordmark {
  font-size: 20px; line-height: 1; font-weight: 400; letter-spacing: -.005em;
  color: var(--t-text, #e6eaee); text-decoration: none; white-space: nowrap;
}
.wordmark b { font-weight: 700; }
.head-nav { margin-left: auto; display: flex; gap: 4px; }
.head-nav a {
  padding: 10px 12px; border-radius: var(--t-r-2, 5px);
  font-size: 15px; color: var(--t-text-dim, #9aa8b6); text-decoration: none;
  white-space: nowrap;
}
.head-nav a:hover { color: var(--t-text, #e6eaee); background: var(--t-surface-2, #0f1922); }

/* ----------------------------------------------------------------- hero
   Desktop: copy, trades and facts stack on the left; the illustration
   holds the right column. Phone: copy, then the picture, then the rest. */
.hero { padding: 72px 0 96px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "copy   art"
    "trades art"
    "facts  art";
  column-gap: 48px;
}
.hero-copy { grid-area: copy; }
.trades    { grid-area: trades; }
.facts     { grid-area: facts; }
.hero-art  { grid-area: art; align-self: center; }

.hero h1 {
  font-size: clamp(36px, 2.6vw + 19px, 56px);
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -.018em;
  text-wrap: balance;
  margin-bottom: 20px;
}
.lede {
  max-width: 33em;
  font-size: clamp(17px, .35vw + 14.5px, 19px);
  line-height: 1.5;
  color: var(--t-text-dim, #9aa8b6);
  text-wrap: pretty;
  margin-bottom: 32px;
}

.cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px;
  border-radius: var(--t-r-2, 5px);
  font-size: 16px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
}
/* Text on the accent is --t-accent-ink: dark ink on green (5.7:1 - white
   is 2.97:1) and on yellow, white on the paper theme's deeper green. */
.btn-primary { background: var(--t-accent, #3fa873); color: var(--t-accent-ink, #06210f); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { filter: brightness(.95); }
.link-quiet {
  padding: 12px 2px;
  color: var(--t-text, #e6eaee); font-size: 16px;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 5px; text-decoration-color: var(--t-border-strong, #2b3c4b);
}
.link-quiet:hover { text-decoration-color: var(--t-text, #e6eaee); }

/* trade chips - outlined, each a jump to its row below */
.trades {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.trades a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 12px 0 10px;
  border: 1px solid var(--t-border-strong, #2b3c4b); border-radius: var(--t-r-2, 5px);
  font-size: 14px; color: var(--t-text, #e6eaee); text-decoration: none;
  white-space: nowrap;
}
.trades a:hover { border-color: var(--t-text-faint, #7d8b99); background: var(--t-surface-2, #0f1922); }

/* the app's tool-icon style (style.css .tm-ico) */
.trades svg, .read dt svg, .beta-box svg {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.trades svg { width: 18px; height: 18px; color: var(--t-text-dim, #9aa8b6); flex: none; }

/* fact cards - three true statements in place of the mockup's stat cards */
.facts {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px;
  grid-template-rows: auto auto;
  align-self: start;
}
/* subgrid: the three titles share one row, so the rules under them line up
   even when one title wraps */
.fact {
  display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0;
  padding: 16px 16px 18px;
  background: var(--t-surface-2, #0f1922);
  border: 1px solid var(--t-border, #1d2a36);
  border-radius: var(--t-r-3, 7px);
}
.fact-h {
  padding-bottom: 12px; border-bottom: 1px solid var(--t-border, #1d2a36);
  font-size: 16px; font-weight: 600; line-height: 1.3;
  text-wrap: balance;
}
.fact-b { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--t-text-dim, #9aa8b6); }
.fact-b b { font-weight: 500; }

/* ---------------------------------------------------------- illustration
   Two sheets stacked like a plan set: the grading plan behind, the floor
   plan in front. Only the front sheet casts a shadow - it is the one
   thing on the page that really does sit on top of another. */
.hero-art { position: relative; aspect-ratio: 600 / 500; }
.sheet {
  position: absolute;
  background: var(--t-surface-2, #0f1922);
  border: 1px solid var(--t-border-strong, #2b3c4b);
  border-radius: var(--t-r-3, 7px);
  overflow: hidden;
}
.sheet-grading { left: 0; top: 0; width: 86%; }
.sheet-floor   { right: 0; bottom: 0; width: 60%; box-shadow: var(--t-el-3, 0 16px 44px rgba(0,0,0,.50)); }
.sheet .art { width: 100%; height: auto; }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--t-border, #1d2a36);
  font-size: var(--t-fs-xs, 12px); line-height: 18px; color: var(--t-text-dim, #9aa8b6);
  white-space: nowrap;
}
.sheet-name {
  color: var(--t-text, #e6eaee); font-weight: 600;
  text-transform: var(--t-title-case, none); letter-spacing: var(--t-title-track, 0);
}
.sheet-key { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.key-cut  { background: var(--t-cut, #e5533d); }
.key-fill { background: var(--t-fill, #3b82f6); margin-left: 6px; }
.key-sep  { display: inline-block; width: 4px; }
.hero-art figcaption {
  position: absolute; left: 0; bottom: 0;
  font-size: var(--t-fs-xs, 12px); color: var(--t-text-dim, #9aa8b6);
}

/* grading plan */
.g-cut  { fill: var(--t-cut-map, rgba(217,68,46,.42)); }
.g-fill { fill: var(--t-fill-map, rgba(59,130,246,.40)); }
.g-cut.g-deep  { fill: var(--t-cut, #e5533d);  fill-opacity: .30; }
.g-fill.g-deep { fill: var(--t-fill, #3b82f6); fill-opacity: .30; }
.g-ex   { fill: none; stroke: var(--t-text-faint, #7d8b99); stroke-width: .8; stroke-dasharray: 5 3.5; opacity: .75; }
.g-pr   { fill: none; stroke: var(--t-text-dim, #9aa8b6); stroke-width: 1; }
.g-pad  { fill: none; stroke: var(--t-text-dim, #9aa8b6); stroke-width: 1.1; }
.g-bld  { fill: none; stroke: var(--t-text, #e6eaee); stroke-width: 1.5; }
.g-lim  { fill: none; stroke: var(--t-text-dim, #9aa8b6); stroke-width: 1; stroke-dasharray: 10 3 2 3; }
.g-road { fill: var(--t-surface-2, #0f1922); }
.g-curb { fill: none; stroke: var(--t-text-dim, #9aa8b6); stroke-width: 1; }
.g-cl   { fill: none; stroke: var(--t-text-faint, #7d8b99); stroke-width: .8; stroke-dasharray: 12 6; }
.g-lot  { fill: none; stroke: var(--t-text-faint, #7d8b99); stroke-width: 1; stroke-dasharray: 14 4 2 4; }
.g-na path { fill: var(--t-text-dim, #9aa8b6); }
.g-sb rect { fill: none; stroke: var(--t-text-dim, #9aa8b6); stroke-width: .8; }
.g-sb rect.on { fill: var(--t-text-dim, #9aa8b6); }

/* floor plan */
.f-wall { fill: var(--t-surface-3, #16222d); stroke: var(--t-text-dim, #9aa8b6); stroke-width: .9; }
.f-win  { fill: none; stroke: var(--t-text, #e6eaee); stroke-width: .8; }
.f-leaf { fill: none; stroke: var(--t-text, #e6eaee); stroke-width: 1.1; }
.f-arc  { fill: none; stroke: var(--t-text-faint, #7d8b99); stroke-width: .8; stroke-dasharray: 3 2.5; }
.f-tag rect { fill: var(--t-surface-2, #0f1922); stroke: var(--t-text-dim, #9aa8b6); stroke-width: .9; }
.f-tag text {
  font-family: var(--t-font-data, "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace); font-size: 11px; font-weight: 500;
  fill: var(--t-text, #e6eaee); text-anchor: middle;
}

/* -------------------------------------------------------------- sections */
.band { padding: 88px 0; border-top: 1px solid var(--t-border, #1d2a36); }
/* follows How it works with no rule between them, so no double gap */
.reads { padding-top: 16px; padding-bottom: 64px; border-top: 0; }
.final { padding: 72px 0 80px; }
.band [id], .band[id], .read { scroll-margin-top: 24px; }
.section-h {
  font-size: clamp(26px, 1vw + 20px, 34px);
  line-height: 1.15; font-weight: 600; letter-spacing: -.012em;
  text-wrap: balance;
}
.section-lede { margin-top: 10px; max-width: 40em; font-size: 17px; color: var(--t-text-dim, #9aa8b6); }

/* how it works - three steps on a ruled line */
.steps {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
}
.step { padding-top: 20px; border-top: 1px solid var(--t-border-strong, #2b3c4b); }
.step-n {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; margin-bottom: 16px;
  border: 1px solid var(--t-border-strong, #2b3c4b); border-radius: var(--t-r-1, 3px);
  font-size: 13px; font-weight: 600; color: var(--t-text-dim, #9aa8b6);
  font-variant-numeric: var(--t-numeric, tabular-nums lining-nums);
}
.step h3 { font-size: 18px; line-height: 1.3; font-weight: 600; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--t-text-dim, #9aa8b6); max-width: 30em; }

/* what it reads - one ruled row per trade */
.read-list { margin: 40px 0 0; border-top: 1px solid var(--t-border, #1d2a36); }
.read {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 150px;
  gap: 24px; align-items: start;
  padding: 20px 12px;
  border-bottom: 1px solid var(--t-border, #1d2a36);
}
.read dt {
  display: flex; align-items: center; gap: 12px;
  font-size: 16px; font-weight: 600; line-height: 24px;
}
.read dt svg { width: 20px; height: 20px; color: var(--t-text-dim, #9aa8b6); flex: none; }
.read-what { font-size: 15px; line-height: 24px; color: var(--t-text-dim, #9aa8b6); max-width: 46em; }
.read-unit {
  justify-self: end;
  font-family: var(--t-font-data, "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace); font-size: 13px; line-height: 24px;
  color: var(--t-text-dim, #9aa8b6); white-space: nowrap;
}
.num { font-family: var(--t-font-data, "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace); font-size: .94em; color: var(--t-text, #e6eaee); font-variant-numeric: var(--t-numeric, tabular-nums lining-nums); }
/* arriving from a trade chip: that row is the selected thing */
.read:target { background: var(--t-accent-bg, rgba(63,168,115,.15)); }

/* the accuracy flag - plain, short, on its own */
.beta-note { padding: 0 0 88px; }
.beta-box {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 24px 28px;
  background: var(--t-surface-2, #0f1922);
  border: 1px solid var(--t-border-strong, #2b3c4b);
  border-radius: var(--t-r-3, 7px);
}
.beta-box svg { width: 26px; height: 26px; flex: none; color: var(--t-warn, #e5a33d); margin-top: 1px; }
.beta-box h2 { font-size: 20px; line-height: 1.35; font-weight: 600; }
.beta-box p { margin-top: 4px; font-size: 17px; color: var(--t-text-dim, #9aa8b6); }

/* last call */
.final-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 24px 48px;
}

/* --------------------------------------------------------------- footer */
.site-foot { border-top: 1px solid var(--t-border, #1d2a36); padding: 24px 0 40px; }
.foot-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 24px;
}
.foot-mark { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.wordmark-sm { font-size: 16px; }
.foot-copy { font-size: 14px; color: var(--t-text-dim, #9aa8b6); }
.foot-nav { display: flex; gap: 4px; margin-right: -10px; }
.foot-nav a {
  padding: 8px 10px; font-size: 14px; color: var(--t-text-dim, #9aa8b6);
  text-decoration: none; border-radius: var(--t-r-2, 5px);
}
.foot-nav a:hover { color: var(--t-text, #e6eaee); text-decoration: underline; text-underline-offset: 4px; }

/* hover feedback only; nothing moves */
@media (prefers-reduced-motion: no-preference) {
  .btn, .head-nav a, .trades a, .foot-nav a, .link-quiet {
    transition: background-color .12s, border-color .12s, color .12s,
                text-decoration-color .12s, filter .12s;
  }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1200px) {
  :root { --gutter: 32px; }
}

@media (max-width: 1080px) {
  .hero-grid { column-gap: 40px; }
  .facts { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 12px; }
  .fact {
    grid-row: auto; grid-template-rows: none;
    grid-template-columns: 190px minmax(0, 1fr); gap: 0 20px; align-items: baseline;
  }
  .fact-h { padding-bottom: 0; border-bottom: 0; }
  .fact-b { margin-top: 0; }
}

@media (max-width: 900px) {
  .hero { padding: 48px 0 72px; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "copy" "art" "trades" "facts";
  }
  .hero-art { margin-top: 40px; max-width: 640px; }
  .trades { margin-top: 32px; }
  .read { grid-template-columns: 200px minmax(0, 1fr) auto; gap: 20px; }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .head-row { min-height: 56px; gap: 8px; }
  .wordmark { font-size: 18px; }
  .head-nav { gap: 0; margin-right: -8px; }
  .head-nav a { padding: 10px 8px; font-size: 14px; }
  .band { padding: 56px 0; }
  .reads { padding-top: 8px; padding-bottom: 48px; }
  .final { padding: 56px 0 64px; }
  .beta-note { padding-bottom: 56px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; }
  .fact { display: block; }
  .fact-h { padding-bottom: 10px; border-bottom: 1px solid var(--t-border, #1d2a36); }
  .fact-b { margin-top: 10px; }
  .read-list { margin-top: 28px; }
  .read {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name unit" "what what";
    gap: 6px 16px; padding: 16px 4px;
  }
  .read dt { grid-area: name; }
  .read-unit { grid-area: unit; }
  .read-what { grid-area: what; padding-left: 32px; }
  .beta-box { padding: 20px; gap: 14px; }
  .beta-box h2 { font-size: 18px; }
  .beta-box p { font-size: 16px; }
  .sheet-grading { width: 84%; }
  .sheet-floor { width: 64%; }
  /* the legal links wrap under the wordmark: line their text up with it */
  .foot-nav { margin: 0 0 0 -10px; }
}