/* ==========================================================================
   SkySearch — landing page, 2026-09-04 rebrand
   Self-contained: reset, tokens, components and sections for `/` only.
   /compare, /coverage and the legal pages still run on tokens.css +
   base.css + components.css + sections.css; the archived eFinder landing
   page keeps landing.css. Nothing here reaches them.
   No inline styles anywhere — the CSP is style-src 'self'.

   The skin: 75% tool, 25% art. Surfaces are white and cloud-white with
   hairline borders and 12px radii. The painted sky appears only in the hero,
   the two consoles, the investigators band and the final CTA. Gold is
   reserved for "found / verified". No purple anywhere.

   2026-09-04 Option G rebuild: the page is eight beats (hero, gaps, how it
   works, investigators, inbox, depth, scale, pricing) plus FAQ, the lead form
   and the final console. Section styles below the shared components are
   grouped by beat.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* The sky */
  --sky-deep: #1e3a6e;
  --sky-cobalt: #1d4a9a;
  --sky-cobalt-deep: #173d82;   /* hover; white on this is 9.9:1 */
  --gold: #e6b45a;              /* found / verified only. 5.8:1 on --sky-deep. Never text on white. */
  --gold-ink: #7a4f0e;          /* the same meaning as text on white / gold-soft: 7.1:1 on white */
  --gold-light: #f0c978;        /* the accent word in a heading over the sky: 3.4:1 on the 72% scrim, large text only */
  --gold-soft: #fbf3e2;
  --gold-line: #eed7a6;

  /* Surfaces */
  --surface: #ffffff;
  --cloud: #f5f7fa;
  --cloud-2: #edf1f6;
  --line: #e3e8ef;
  --line-strong: #cbd4e0;

  /* Ink */
  --ink: #0f1b2d;
  --ink-2: #33415a;             /* 10.0:1 on white */
  --muted: #5c6b80;             /* 5.4:1 on white, 4.9:1 on --cloud */
  --cobalt-ink: #1d4a9a;        /* cobalt as text on white: 8.4:1 */
  --cobalt-soft: #eaf0fa;
  --cobalt-line: #c6d5ee;

  /* On the sky. The scrim under any text over the plate is at least 72%
     --sky-deep, which blends to #5a6b89 or darker over the brightest cloud. */
  --on-sky: #ffffff;            /* 6.3:1 on the worst-case scrim */
  --on-sky-2: #e6ecf5;          /* 4.6:1 on the worst-case 72% scrim */
  --sky-line: rgba(255, 255, 255, 0.22);
  --sky-line-soft: rgba(255, 255, 255, 0.12);

  /* States */
  --good: #14713a;             /* 4.9:1 on --good-soft */
  --good-soft: #e7f6ec;
  --good-line: #b9e0c6;
  --warn: #a15c07;
  --warn-soft: #fdf1de;
  --warn-line: #f0d6a8;
  --bad: #b91c1c;
  --bad-soft: #fdeceb;
  --bad-line: #f3c9c6;

  /* Type */
  --font-ui: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2.5rem, 1.4rem + 4.4vw, 4.4rem);
  --fs-h2: clamp(1.6rem, 1.1rem + 2.1vw, 2.5rem);
  --fs-h3: clamp(1.08rem, 1.02rem + 0.3vw, 1.25rem);
  --fs-lede: clamp(1rem, 0.96rem + 0.28vw, 1.15rem);
  --fs-body: clamp(0.95rem, 0.92rem + 0.14vw, 1.02rem);
  --fs-small: 0.86rem;
  --fs-label: 0.76rem;

  --tracking-display: -0.028em;
  --tracking-label: 0.14em;

  /* Space & shape */
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --section-y: clamp(3.25rem, 2.2rem + 3.6vw, 5.5rem);
  --wrap: 1200px;
  --wrap-narrow: 900px;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-pill: 999px;

  --shadow-m: 0 1px 2px rgba(15, 27, 45, 0.04), 0 10px 28px rgba(15, 27, 45, 0.06);
  --shadow-l: 0 2px 6px rgba(15, 27, 45, 0.06), 0 28px 60px rgba(15, 27, 45, 0.16);
  --shadow-cobalt: 0 8px 22px rgba(29, 74, 154, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 620ms;

  --z-nav: 100;
  --z-skip: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 700; letter-spacing: var(--tracking-display); }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
strong, b { font-weight: 700; }

:focus-visible {
  outline: 2px solid var(--sky-cobalt);
  outline-offset: 3px;
  border-radius: 4px;
}
.band--sky :focus-visible, .hero :focus-visible { outline-color: var(--on-sky); }
.console :focus-visible, .band--sky .card :focus-visible { outline-color: var(--sky-cobalt); }

/* ------------------------------------------------------------ utilities -- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; }

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

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: fixed;
  top: 0.5rem; left: 0.5rem;
  z-index: var(--z-skip);
  padding: 0.7rem 1.1rem;
  background: var(--sky-cobalt);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-s);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

.mono { font-family: var(--font-mono); font-size: 0.94em; letter-spacing: -0.01em; }

/* Reveal on scroll. site.js adds .is-revealed; without IntersectionObserver
   it adds it immediately, so content is never trapped behind an animation. */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-revealed, [data-reveal]:focus-within { opacity: 1; transform: none; }
[data-reveal]:focus-within { transition: none; }
.reveal-delay-70 { transition-delay: 70ms; }
.reveal-delay-140 { transition-delay: 140ms; }
.reveal-delay-210 { transition-delay: 210ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------- bands --- */
.band { position: relative; padding-block: var(--section-y); }
.band--white { background: var(--surface); color: var(--ink); }
.band--cloud { background: var(--cloud); color: var(--ink); }
.band--white + .band--white { border-top: 1px solid var(--line); }

/* The painted sky: one static plate behind the band, a scrim so every word
   over it clears 4.5:1, and nothing moving. */
.band--sky { background: var(--sky-deep); color: var(--on-sky); overflow: hidden; isolation: isolate; }
.band__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  z-index: -2;
  pointer-events: none;
}
.band--sky::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(30, 58, 110, 0.78) 0%, rgba(30, 58, 110, 0.72) 100%);
  pointer-events: none;
}

/* ----------------------------------------------------------- section head */
.head { max-width: 44rem; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.head--center { margin-inline: auto; text-align: center; }
.head--wide { max-width: 56rem; }

.label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--cobalt-ink);
}
.band--sky .label, .hero .label { color: var(--on-sky); }
.label::before {
  content: '';
  width: 1.4rem; height: 2px;
  background: currentColor;
  opacity: 0.7;
  border-radius: 2px;
}
.head--center .label { justify-content: center; }

.h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.012em; }
.h4 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }

.accent { color: var(--cobalt-ink); }
.band--sky .accent, .hero .accent { color: var(--on-sky); }

.lede {
  margin-top: 1.1rem;
  font-size: var(--fs-lede);
  color: var(--ink-2);
  max-width: 40rem;
}
.band--sky .lede, .hero .lede { color: var(--on-sky-2); }
.head--center .lede { margin-inline: auto; }

.muted { color: var(--muted); }
.band--sky .muted { color: var(--on-sky-2); }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--sky-cobalt);
  border-color: var(--sky-cobalt);
  color: #fff;
  box-shadow: var(--shadow-cobalt);
}
.btn--primary:hover { background: var(--sky-cobalt-deep); border-color: var(--sky-cobalt-deep); }

.btn--ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--sky-cobalt); color: var(--cobalt-ink); background: var(--cobalt-soft); }

.band--sky .btn--ghost, .hero .btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.66);
  color: var(--on-sky);
}
.band--sky .btn--ghost:hover, .hero .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  color: #fff;
}

.btn--sm { padding: 0.55rem 1rem; font-size: 0.88rem; border-radius: 8px; }
.btn--block { display: flex; width: 100%; }
.btn__arrow { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------- chips --- */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  background: var(--cloud);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip:hover { background: var(--cobalt-soft); border-color: var(--sky-cobalt); color: var(--cobalt-ink); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--cloud);
  color: var(--ink-2);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge--sky { background: var(--sky-cobalt); border-color: var(--sky-cobalt); color: #fff; }
/* Found / verified is the one place gold is allowed. */
.badge--verified, .badge--brass { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
.badge--caution { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.badge--cold { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }

/* ----------------------------------------------------------------- nav --- */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.nav-shell[data-scrolled='true'] {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--line);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-decoration: none;
  color: var(--ink);
}
.brand__mark { width: 28px; height: 28px; flex: none; }

.nav__links { display: none; gap: 1.4rem; margin-inline: auto; }
.nav__links a {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 0.35rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current='true'] { color: var(--ink); }
.nav__links a[aria-current='true']::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--sky-cobalt);
  border-radius: 2px;
}

.nav__actions { display: none; gap: 0.6rem; margin-left: auto; }
@media (min-width: 62rem) {
  .nav__links { display: flex; }
  .nav__actions { display: flex; margin-left: 0; }
}

.nav__toggle {
  margin-left: auto;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  cursor: pointer;
}
@media (min-width: 62rem) { .nav__toggle { display: none; } }
.nav__toggle-bars, .nav__toggle-bars::before, .nav__toggle-bars::after {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav__toggle-bars { position: relative; }
.nav__toggle-bars::before, .nav__toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after { top: 6px; }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

.nav__drawer {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0 1.5rem;
  border-top: 1px solid var(--line);
}
.nav__drawer[hidden] { display: none; }
.nav__drawer > a {
  padding: 0.7rem 0.25rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
}
.nav__drawer > a:hover { color: var(--ink); }
.nav__drawer .btn-row { margin-top: 0.75rem; flex-direction: column; }

/* ---------------------------------------------------------------- hero --- */
/* The feat of strength: one painted sky plate, a beam that rises once, a
   sweep that crosses once, six signals that answer, one person found.
   Everything moves with transform and opacity only. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--sky-deep);
  color: var(--on-sky);
  padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.5rem) clamp(2.5rem, 1.8rem + 3vw, 4rem);
  min-height: min(88vh, 860px);
  display: flex;
  align-items: center;
}

/* Cover math done in CSS so overlays stay glued to the plate's pixels: the
   stage is a 16:9 box at least as large as the hero in both axes. */
.hero__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
}
.hero__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, calc(100cqh * 16 / 9));
  height: max(100cqh, calc(100cqw * 9 / 16));
  transform: translate(-50%, -50%);
}
.hero__sky { width: 100%; height: 100%; }

/* The scrim: near-solid deep blue behind the copy, thinning to nothing over
   the map so the portraits stay clear. On a phone it darkens top to bottom. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(30, 58, 110, 0.86) 0%, rgba(30, 58, 110, 0.8) 70%, rgba(30, 58, 110, 0.76) 100%);
  pointer-events: none;
}
@media (min-width: 60rem) {
  .hero::before {
    background: linear-gradient(90deg, rgba(30, 58, 110, 0.9) 0%, rgba(30, 58, 110, 0.86) 42%, rgba(30, 58, 110, 0.38) 60%, rgba(30, 58, 110, 0.1) 100%);
  }
}

/* Beat 2 — the beacon goes out. */
.hero__beam {
  position: absolute;
  left: 51.1%;
  bottom: 0;
  width: 3px;
  height: 64%;
  margin-left: -1.5px;
  background: linear-gradient(180deg, rgba(255, 244, 214, 0) 0%, rgba(255, 244, 214, 0.9) 45%, rgba(230, 180, 90, 0.95) 100%);
  box-shadow: 0 0 22px 5px rgba(230, 180, 90, 0.35);
  border-radius: 2px;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  opacity: 0;
  animation: sky-beam 900ms var(--ease-out) 400ms forwards;
}
/* Beat 3 — the sweep crosses the sky once. */
.hero__sweep {
  position: absolute;
  inset: -10% -30%;
  background: linear-gradient(100deg, rgba(255, 240, 210, 0) 42%, rgba(255, 240, 210, 0.3) 50%, rgba(255, 240, 210, 0) 58%);
  transform: translateX(-45%);
  opacity: 0;
  animation: sky-sweep 2400ms ease-in-out 1200ms forwards;
}
/* Beat 4 — six signals answer, on the pinned portraits. */
.hero__signals { position: absolute; inset: 0; }
.hero__signals span {
  position: absolute;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff5dc;
  box-shadow: 0 0 14px 4px rgba(230, 180, 90, 0.7);
  opacity: 0;
  transform: scale(0.4);
  animation: sky-signal 700ms var(--ease-out) forwards;
}
.hero__signals span:nth-child(1) { left: 59%; top: 44.6%; animation-delay: 3300ms; }
.hero__signals span:nth-child(2) { left: 59.6%; top: 62.8%; animation-delay: 3550ms; }
.hero__signals span:nth-child(3) { left: 67.1%; top: 48.9%; animation-delay: 3800ms; }
.hero__signals span:nth-child(4) { left: 82.7%; top: 55.2%; animation-delay: 4050ms; }
.hero__signals span:nth-child(5) { left: 63.9%; top: 74.2%; animation-delay: 4300ms; }
.hero__signals span:nth-child(6) { left: 89.3%; top: 74.9%; animation-delay: 4550ms; }
/* Beat 5 — one person. The gold ring closes on the found portrait. */
.hero__found {
  position: absolute;
  left: 72.5%;
  top: 59.8%;
  width: 5.4%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(1.15);
  border: 3px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(15, 27, 45, 0.55), 0 0 30px 6px rgba(230, 180, 90, 0.45);
  opacity: 0;
  animation: sky-found 800ms var(--ease-out) 5100ms forwards;
}

@keyframes sky-beam { to { transform: scaleY(1); opacity: 1; } }
@keyframes sky-sweep {
  0% { transform: translateX(-45%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(45%); opacity: 0; }
}
@keyframes sky-signal { to { transform: scale(1); opacity: 1; } }
@keyframes sky-found { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero__beam, .hero__signals span, .hero__found { animation: none; opacity: 1; transform: none; }
  .hero__found { transform: translate(-50%, -50%); }
  .hero__sweep { display: none; }
}

.hero__grid { position: relative; display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); }
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 36rem); }
}

.hero__aside { margin: 0.9rem 0 0; font-size: var(--fs-small); color: var(--on-sky-2); }
.hero__aside a { color: var(--on-sky); }

.hero h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 0.35rem;
}
.hero__lede { font-size: var(--fs-lede); color: var(--on-sky-2); max-width: 32rem; }


/* -------------------------------------------------------------- mascot --- */
/* The cloud with the lantern: a small, warm presence, never in the way. */
.mascot { width: 84px; height: 84px; pointer-events: none; }
.console-wrap { position: relative; margin-top: 1.5rem; max-width: 34rem; }
.hero .console-wrap .console { margin-top: 0; }
.mascot--hero { position: absolute; right: -10px; top: -62px; z-index: 1; transform: rotate(6deg); }
.mascot--center { width: 96px; height: 96px; margin: 0 auto 0.75rem; }
@media (max-width: 47.99rem) {
  .console-wrap, .hero .console-wrap { margin-top: 3.1rem; }
  .mascot--hero { width: 62px; height: 62px; right: -2px; top: -54px; }
}

/* ------------------------------------------------------------- console --- */
/* The console is the tool: white, hairline, real inputs. On the sky it is a
   frosted card; the sky never bleeds into the fields. */
.console {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  color: var(--ink);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.console--narrow { max-width: 46rem; margin-inline: auto; }

.console__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--cloud);
}
.console__title { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; }
.console__note { font-size: 0.78rem; color: var(--muted); }

.console__form { padding: 1.1rem; display: grid; gap: 0.85rem; }


.console__fields { display: grid; gap: 0.75rem; }
@media (min-width: 34rem) { .console__fields { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.35rem; }
.field label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--sky-cobalt);
  box-shadow: 0 0 0 3px rgba(29, 74, 154, 0.18);
}
.field textarea { resize: vertical; }

.console__hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Pipeline, result and meter — markup injected by resolver.js. */
.pipeline { display: grid; gap: 1px; padding: 0 1.1rem 0.9rem; }
.pipeline__step {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.32rem 0;
  font-size: 0.82rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.pipeline__step:last-child { border-bottom: 0; }
.pipeline__marker {
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 0.76rem;
}
.pipeline__marker svg { width: 12px; height: 12px; }
.pipeline__state { font-size: 0.75rem; }
.pipeline__step[data-state='active'] { color: var(--ink); }
.pipeline__step[data-state='active'] .pipeline__marker { border-color: var(--sky-cobalt); color: var(--cobalt-ink); }
.pipeline__step[data-state='done'] { color: var(--ink-2); }
.pipeline__step[data-state='done'] .pipeline__marker { border-color: var(--gold); color: var(--gold-ink); background: var(--gold-soft); }

.working { display: inline-flex; gap: 3px; }
.working span {
  width: 4px; height: 4px;
  background: var(--sky-cobalt);
  border-radius: 50%;
  animation: pulse 1.1s var(--ease-out) infinite;
}
.working span:nth-child(2) { animation-delay: 0.15s; }
.working span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .working span { animation: none; opacity: 0.7; } }

.result { padding: 0 1.1rem 1.2rem; display: grid; gap: 0.85rem; }
.result[hidden] { display: none; }
.result__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.result__title { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.92rem; }
.result__icon--verified { color: var(--gold-ink); flex: none; }

.result__route {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0.95rem;
  background: var(--cloud);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-m);
}
.result__route-label { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.result__email { font-size: 1rem; color: var(--cobalt-ink); word-break: break-all; }
.result__route--locked { border-style: solid; border-color: var(--cobalt-line); }

.meter { display: grid; gap: 0.35rem; }
.meter__head { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--muted); }
.meter__value { font-family: var(--font-mono); color: var(--ink); }
.meter__fill { width: 100%; height: 6px; appearance: none; border: 0; background: var(--cloud-2); border-radius: 999px; overflow: hidden; }
.meter__fill::-webkit-progress-bar { background: var(--cloud-2); }
.meter__fill::-webkit-progress-value { background: var(--sky-cobalt); border-radius: 999px; }
.meter__fill::-moz-progress-bar { background: var(--sky-cobalt); border-radius: 999px; }

.evidence-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.result__foot { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; color: var(--muted); margin: 0; }
.result__foot svg { width: 15px; height: 15px; margin-top: 0.2rem; color: var(--cobalt-ink); flex: none; }
.result__actions { display: grid; gap: 0.5rem; }
.result__actions[hidden] { display: none; }

/* ---------------------------------------------------------------- cards -- */
.card {
  padding: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
  color: var(--ink);
}
.band--sky .card { background: rgba(255, 255, 255, 0.96); border-color: rgba(255, 255, 255, 0.5); box-shadow: var(--shadow-l); }
.card p { color: var(--ink-2); }
.card h3, .card h4 { margin-bottom: 0.5rem; }

.grid { display: grid; gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }

.tile-icon {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  margin-bottom: 0.9rem;
  border-radius: 10px;
  background: var(--cobalt-soft);
  border: 1px solid var(--cobalt-line);
  color: var(--cobalt-ink);
}
.tile-icon svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------ versus ----- */
.versus { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 52rem) {
  .versus { grid-template-columns: 1fr auto 1fr; align-items: center; }
}
.versus__badge {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 6px var(--cloud-2);
}
.pane {
  height: 100%;
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--surface);
}
.pane--old { background: var(--cloud); }
.pane--new { background: var(--surface); border-color: var(--cobalt-line); box-shadow: var(--shadow-m); }
.pane__flag {
  display: inline-flex;
  padding: 0.25rem 0.8rem;
  margin-bottom: 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.pane--new .pane__flag { background: var(--sky-cobalt); }
.steps { display: grid; gap: 0.65rem; }
.steps li { display: grid; grid-template-columns: 1.6rem 2rem 1fr; align-items: center; gap: 0.7rem; font-size: var(--fs-small); color: var(--ink); }
.steps__n {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.pane--new .steps__n { background: var(--sky-cobalt); }
.steps__icon {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.pane--new .steps__icon { border-color: var(--cobalt-line); color: var(--cobalt-ink); background: var(--cobalt-soft); }
.steps__icon svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ faq -- */
.faq { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__sign { position: relative; width: 14px; height: 14px; flex: none; }
.faq__sign::before, .faq__sign::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 14px; height: 2px;
  background: var(--sky-cobalt);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }
.faq__a { padding-bottom: 1rem; font-size: var(--fs-small); color: var(--ink-2); }
.faq__a a { color: var(--cobalt-ink); }

/* ------------------------------------------------------------ lead form -- */
.lead-form { display: grid; gap: 1rem; max-width: 46rem; margin-inline: auto; }
.lead-form__grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.lead-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.lead-form__status { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.lead-form__legal { margin: 0; font-size: 0.78rem; color: var(--muted); }
.lead-form__legal a { color: var(--cobalt-ink); }

/* ---------------------------------------------------------- secure note -- */
.secure-note { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin: 1.1rem 0 0; font-size: var(--fs-small); color: var(--on-sky-2); }
.secure-note svg { width: 15px; height: 15px; flex: none; }

/* -------------------------------------------------------------- footer --- */
.footer { background: var(--cloud); color: var(--ink-2); padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 2rem; border-top: 1px solid var(--line); }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.footer__brand { max-width: 22rem; }
.footer__brand p { margin-top: 0.9rem; font-size: var(--fs-small); color: var(--muted); }
.footer__col h2 { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink); margin-bottom: 0.9rem; }
.footer__col ul { display: grid; gap: 0.1rem; }
.footer__col a { display: inline-block; padding-block: 0.3rem; font-size: var(--fs-small); color: var(--muted); text-decoration: none; }
.footer__col a:hover { color: var(--ink); }
.footer__social { display: flex; gap: 0.5rem; margin-top: 1.1rem; }
.footer__social a {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink-2);
}
.footer__social a:hover { color: var(--cobalt-ink); border-color: var(--sky-cobalt); background: var(--cobalt-soft); }
.footer__social svg { width: 16px; height: 16px; }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem;
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem; color: var(--muted);
}
.footer__base p { margin: 0; }
.footer__legal { display: flex; gap: 1rem; }
.footer__legal a { display: inline-block; padding-block: 0.3rem; color: var(--muted); text-decoration: none; }
.footer__legal a:hover { color: var(--ink); }

/* ---------------------------------------------------------- action bar --- */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transition: transform var(--dur-base) var(--ease-out);
}
.action-bar[data-hidden='true'] { transform: translateY(120%); visibility: hidden; transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
@media (min-width: 48rem) { .action-bar { display: none; } }

/* ------------------------------------------------------- small screens --- */
@media (max-width: 47.99rem) {
  body { padding-bottom: 4.5rem; }
}

/* ==========================================================================
   Option G beats — nav and hero (A)
   ========================================================================== */
/* ----------------------------------------------------------------- nav --- */
/* Option G sets the nav on the sky. The shell is transparent while the page
   sits at the top (site.js keeps data-scrolled="false" there) and becomes the
   white sticky bar the moment the reader scrolls. The open drawer always sits
   on white, whatever the scroll state. Colours travel through custom
   properties so one state block flips the whole bar. */
.nav-shell {
  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-blur: blur(14px);
  --nav-ink: var(--ink);
  --nav-ink-2: var(--ink-2);
  --nav-line: transparent;
  --nav-rule: var(--sky-cobalt);
  --nav-ghost-bg: var(--surface);
  --nav-ghost-line: var(--line-strong);
  --nav-ghost-ink: var(--ink);
  --nav-toggle-bg: var(--surface);
  --nav-toggle-line: var(--line-strong);
  --nav-primary-line: var(--sky-cobalt);
  background: var(--nav-bg);
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
  border-bottom-color: var(--nav-line);
}
.nav-shell[data-scrolled='true'] {
  --nav-bg: rgba(255, 255, 255, 0.94);
  --nav-line: var(--line);
}
.nav-shell[data-scrolled='false'] {
  --nav-bg: transparent;
  --nav-blur: none;
  --nav-ink: var(--on-sky);
  --nav-ink-2: var(--on-sky-2);
  --nav-rule: var(--on-sky);
  --nav-ghost-bg: rgba(255, 255, 255, 0.08);
  --nav-ghost-line: rgba(255, 255, 255, 0.66);
  --nav-ghost-ink: var(--on-sky);
  --nav-toggle-bg: rgba(255, 255, 255, 0.1);
  --nav-toggle-line: rgba(255, 255, 255, 0.6);
  --nav-primary-line: rgba(255, 255, 255, 0.55);
}
/* The drawer opens on white so its links keep their ink contrast. */
.nav-shell:has(.nav__drawer:not([hidden])) {
  --nav-bg: rgba(255, 255, 255, 0.97);
  --nav-blur: blur(14px);
  --nav-ink: var(--ink);
  --nav-ink-2: var(--ink-2);
  --nav-line: var(--line);
  --nav-ghost-bg: var(--surface);
  --nav-ghost-line: var(--line-strong);
  --nav-ghost-ink: var(--ink);
  --nav-toggle-bg: var(--surface);
  --nav-toggle-line: var(--line-strong);
  --nav-primary-line: var(--sky-cobalt);
}
/* Focus rings on the transparent nav are white, like every other ring on the sky. */
.nav-shell[data-scrolled='false']:not(:has(.nav__drawer:not([hidden]))) :focus-visible { outline-color: var(--on-sky); }
.nav-shell .brand { color: var(--nav-ink); transition: color var(--dur-base) var(--ease-out); }
.nav-shell .nav__links a { color: var(--nav-ink-2); }
.nav-shell .nav__links a:hover,
.nav-shell .nav__links a[aria-current='true'] { color: var(--nav-ink); }
.nav-shell .nav__links a[aria-current='true']::after { background: var(--nav-rule); }
.nav-shell .nav__actions .btn--ghost {
  background: var(--nav-ghost-bg);
  border-color: var(--nav-ghost-line);
  color: var(--nav-ghost-ink);
}
.nav-shell .nav__actions .btn--ghost:hover { border-color: #fff; color: var(--nav-ghost-ink); background: rgba(255, 255, 255, 0.18); }
.nav-shell[data-scrolled='true'] .nav__actions .btn--ghost:hover,
.nav-shell:has(.nav__drawer:not([hidden])) .nav__actions .btn--ghost:hover {
  border-color: var(--sky-cobalt); color: var(--cobalt-ink); background: var(--cobalt-soft);
}
/* A hairline keeps the cobalt button legible as a shape on the cobalt sky. */
.nav-shell .nav__actions .btn--primary { border-color: var(--nav-primary-line); }
.nav-shell .nav__toggle { background: var(--nav-toggle-bg); border-color: var(--nav-toggle-line); }
.nav-shell .nav__toggle-bars,
.nav-shell .nav__toggle-bars::before,
.nav-shell .nav__toggle-bars::after { background: var(--nav-ink); }
.nav-shell .nav__toggle[aria-expanded='true'] .nav__toggle-bars { background: transparent; }
.nav-shell .nav__drawer { padding-inline: 0.25rem; }

/* ---------------------------------------------------------------- hero --- */
/* The hero slides up under the transparent nav (4.25rem is .nav's
   min-height) and pays that height back in padding, so the copy starts where
   it always did while the plate fills the top of the page. Compact: ~700 px
   at 1440x900, the whole console inside the first 844 px at 390. */
.hero {
  margin-top: calc(-4.25rem - 1px);
  padding-block: calc(4.25rem + clamp(1.5rem, 0.8rem + 2vw, 2.5rem)) clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  min-height: min(78vh, 720px);
}
/* A soft top scrim so the nav row over the map half also clears 72%
   --sky-deep; the existing ::before scrim beneath it is unchanged. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 9rem;
  z-index: -1;
  background: linear-gradient(180deg, rgba(30, 58, 110, 0.92) 0%, rgba(30, 58, 110, 0.74) 48%, rgba(30, 58, 110, 0) 100%);
  pointer-events: none;
}
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 40rem); }
}
.hero__for {
  margin: 0 0 0.7rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--on-sky-2);
}
.hero h1 {
  font-size: clamp(2.35rem, 1rem + 3vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: 0.9rem;
  text-wrap: balance;
}
.hero__lede {
  font-size: var(--fs-lede);
  color: var(--on-sky-2);
  max-width: 34rem;
  margin: 0;
  text-wrap: pretty;
}
.hero .console-wrap { max-width: 40rem; margin-top: 1.6rem; }
.hero .console-wrap .console { max-width: none; margin-top: 0; }
/* The mascot peeks over the top-right corner; the bar's note stops short of
   it so the two never overlap. */
@media (min-width: 48rem) {
  .hero .console__bar { padding-right: 4.75rem; }
  .mascot--hero { top: -64px; }
}
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  max-width: 40rem;
  margin-top: 0.85rem;
}
.hero__reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--on-sky-2);
}
.hero__reassure span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero__reassure svg { width: 14px; height: 14px; color: var(--gold); flex: none; }
.hero__aside { margin: 0; font-size: var(--fs-small); color: var(--on-sky-2); }
.hero__aside a { color: var(--on-sky); }

/* ------------------------------------------------------------- console --- */
/* One row on desktop: person, company, button. The three-step contract is a
   single muted line beneath; it is allowed to wrap. */
.console__bar { padding: 0.55rem 1rem; }
.console__title svg { width: 14px; height: 14px; color: var(--cobalt-ink); flex: none; }
.console__form { padding: 0.9rem 1rem 1rem; gap: 0.7rem; }
.console__fields { gap: 0.6rem; }
.console__fields .btn--block { min-height: 2.75rem; padding-block: 0.68rem; }
@media (min-width: 34rem) and (max-width: 47.99rem) {
  .console__fields { grid-template-columns: 1fr 1fr; }
  .console__fields .btn--block { grid-column: 1 / -1; }
}
@media (min-width: 48rem) {
  .console__fields {
    grid-template-columns: minmax(0, 0.87fr) minmax(0, 1.13fr) auto;
    align-items: end;
  }
  .console__fields .btn--block { width: auto; padding-inline: 0.9rem; font-size: 0.92rem; white-space: nowrap; }
}
.field input { padding: 0.66rem 0.6rem; }
.console__contract {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.4rem;
  margin: 0;
  font-size: var(--fs-label);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.console__contract li { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
/* Trailing separators, so a wrapped second line never starts with a dot. */
.console__contract li:not(:last-child)::after { content: '\00b7'; color: var(--line-strong); font-weight: 700; }
@media (max-width: 33.99rem) {
  .console__contract { display: grid; gap: 0.1rem; }
  .console__contract li { white-space: normal; }
  .console__contract li:not(:last-child)::after { content: none; }
}
.console__hint { font-size: var(--fs-label); }
.console__hint .chip { font-size: var(--fs-label); padding: 0.28rem 0.65rem; }
/* The console is a white surface even when it sits on the sky, so the ghost
   button in the sign-in gate must take the white-surface ghost style, not the
   on-sky one that .hero .btn--ghost / .band--sky .btn--ghost would give it
   (which rendered "Sign in" white on white). */
.hero .console .btn--ghost, .band--sky .console .btn--ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}
.hero .console .btn--ghost:hover, .band--sky .console .btn--ghost:hover {
  border-color: var(--sky-cobalt);
  color: var(--cobalt-ink);
  background: var(--cobalt-soft);
}

/* ------------------------------------------------------- final CTA #try -- */
#try { padding-block: clamp(3rem, 2.2rem + 3.4vw, 5.5rem); }
#try .try__head { margin-bottom: clamp(1.4rem, 1rem + 1.6vw, 2.25rem); }
#try .try__head .lede { max-width: 36rem; margin-top: 0.8rem; }
#try .mascot--center { margin-bottom: 0.6rem; }
#try .console--narrow { max-width: 52rem; }
#try .console__form { padding: 0.75rem 0.75rem 0.85rem; }
@media (min-width: 48rem) {
  #try .console__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  #try .console__fields .btn--block { padding-inline: 1.6rem; }
  #try .console__hint { justify-content: center; }
}
#try .secure-note { margin-top: 1rem; }
.try__aside { margin: 0.35rem 0 0; text-align: center; font-size: var(--fs-small); color: var(--on-sky-2); }
.try__aside a { color: var(--on-sky); }
/* The result panel resolver.js injects keeps its top padding now that the
   form no longer has a bar above it. */
#try .pipeline, #try .result { padding-inline: 0.75rem; }

/* -------------------------------------------------------------- footer --- */
@media (min-width: 56rem) {
  .footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; }
}
.footer__brand p { max-width: 20rem; }

/* ---------------------------------------------------------- action bar --- */
/* Unchanged: the bar keeps its rules in skysearch.css. Only the label moved
   to "Start free" and the redundant aria-label was dropped. */

/* ==========================================================================
   Option G beats — gaps and depth (B)
   ========================================================================== */
/* ------------------------------------------------------------------ gaps -- */
/* A short beat between the hero and "how it works": one heading, one row of
   four, one line. Tighter vertical padding than a standard band on purpose. */
.gaps.band { padding-block: clamp(2.25rem, 1.5rem + 1.8vw, 3rem); }
/* Wider than .head--wide so the H2 sits on one line at the 1200px wrap. */
.gaps__head { max-width: 62rem; margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem); }

.gaps__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}
.gap {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.3rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
}
.gap:first-child { border-top: 0; }
.gap__n {
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--cobalt-ink);
}
.gap__label {
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.gap__line { font-size: var(--fs-small); color: var(--muted); }

/* 2 x 2 from 34rem: vertical hairline on the right-hand column, horizontal
   hairline on the second row. */
@media (min-width: 34rem) {
  .gaps__row { grid-template-columns: 1fr 1fr; }
  .gap { padding: 1.1rem 1.25rem; }
  .gap:nth-child(2) { border-top: 0; }
  .gap:nth-child(even) { border-left: 1px solid var(--line); }
}
/* One row of four from 60rem: vertical hairlines only. */
@media (min-width: 60rem) {
  .gaps__row { grid-template-columns: repeat(4, 1fr); }
  .gap { padding: 0.35rem 1rem; border-top: 0; }
  .gap:nth-child(n + 2) { border-left: 1px solid var(--line); }
}

.gaps__foot {
  margin: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem) 0 0;
  text-align: center;
  font-size: var(--fs-lede);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cobalt-ink);
}

/* ----------------------------------------------------------------- depth -- */
.depth__grid {
  display: grid;
  gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  align-items: start;
}
/* Below 60rem the proof comes first: the card is the one place the work is shown. */
@media (max-width: 59.99rem) { .depth__proof { order: -1; } }
@media (min-width: 60rem) {
  .depth__grid { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  /* The copy column is long; keep the proof beside whatever the reader is on.
     Lead may delete this one rule if the evidence card should scroll normally. */
  .depth__proof { position: sticky; top: 5.5rem; }
}
.depth__head { margin-bottom: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
.depth__head .lede { max-width: 36rem; }
.depth__proof { min-width: 0; }

/* Four situations: icon tile + label + one line. No cards. */
.situations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem 1.25rem;
}
@media (min-width: 34rem) { .situations { grid-template-columns: 1fr 1fr; } }
.situation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
}
.situation__icon {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--cobalt-line);
  color: var(--cobalt-ink);
}
.situation__icon svg { width: 16px; height: 16px; }
.situation__body { min-width: 0; }
.situation__title {
  margin: 0.15rem 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.situation__text { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }

/* Markets: flag chips. Text is the accessible content; the flag is decorative. */
.markets {
  margin-top: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.markets__caption {
  margin: 0 0 0.7rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
}
.markets__caption--sub {
  margin-top: 1rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.markets__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.market {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.75rem;
  padding: 0.22rem 0.7rem 0.22rem 0.32rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-small);
  line-height: 1.2;
  color: var(--ink-2);
  white-space: nowrap;
}
.market img {
  display: block;
  width: 24px;
  height: 18px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--cloud);
}
.markets__note { margin: 0.9rem 0 0; font-size: var(--fs-small); color: var(--muted); }

/* Closing line: quiet emphasis, no card. */
.depth__close {
  margin: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--cobalt-line);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 36rem;
}

/* ==========================================================================
   Option G beats — how it works, investigators, inbox, evidence card, scale (C)
   ========================================================================== */
/* ------------------------------------------------- 3. how it works -------- */
.how-versus { max-width: 60rem; margin-inline: auto; }
@media (min-width: 52rem) {
  .how-versus { gap: 1.25rem; align-items: stretch; }
  .how-versus .versus__badge { align-self: center; }
}
.how-versus .pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: auto;
  padding: clamp(1.25rem, 1rem + 1.1vw, 2rem) clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
}
.how-versus .pane--new, .how-versus .pane--old { justify-content: flex-start; }
.how-versus .pane--old { background: var(--surface); border-color: var(--line); box-shadow: none; }
.how-versus .pane--new { background: var(--cobalt-soft); border-color: var(--cobalt-line); box-shadow: none; }
.how-pane__title {
  margin: 0 0 1.15rem;
  text-align: center;
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.how-versus .pane--new .how-pane__title { color: var(--cobalt-ink); }
.how-versus .steps { gap: 0.8rem; max-width: 20.5rem; margin-inline: auto; }
.how-versus .steps li {
  grid-template-columns: 1.75rem 2.25rem 1fr;
  gap: 0.8rem;
  font-size: 0.94rem;
  font-weight: 500;
}
.how-versus .steps__n { width: 1.75rem; height: 1.75rem; font-size: 0.76rem; }
.how-versus .steps__icon { width: 2.25rem; height: 2.25rem; border-radius: 10px; }
.how-versus .pane--new .steps__icon { background: var(--surface); }
.how-versus .steps__icon svg { width: 17px; height: 17px; }

/* ------------------------------------------------- 4. investigators ------- */
/* Mobile first: sources as a 2x3 grid of white round tiles with labels
   beneath, then the person, then the two pills joined by short gold links.
   From 60rem the same elements are pinned to a 54 x 19.75 rem stage and the
   six curves (SVG, same coordinate space in px at 16px root) are switched on. */
.inv { position: relative; max-width: 54rem; margin-inline: auto; }
.inv-sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 0.75rem;
  margin: 0 0 1.5rem;
}
.inv-source {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.25;
  color: var(--on-sky);
}
.inv-source__tile {
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(15, 27, 45, 0.18);
}
.inv-source__tile svg { width: 22px; height: 22px; }
.inv-centre { display: grid; justify-items: center; gap: 0; }
.inv-person {
  display: grid; place-items: center;
  width: 6rem; height: 6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.92);
  color: var(--on-sky);
  box-shadow: 0 0 0 8px rgba(230, 180, 90, 0.22), 0 0 44px 8px rgba(230, 180, 90, 0.38);
}
.inv-person svg { width: 40px; height: 40px; }
.inv-link { width: 2px; height: 1.75rem; background: var(--gold); border-radius: 2px; }
.inv-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.6rem 1.15rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: nowrap;
}
.inv-pill--found { background: var(--gold); border-color: var(--gold); box-shadow: 0 8px 22px rgba(230, 180, 90, 0.3); }
.inv-pill svg { width: 16px; height: 16px; }
.inv-curves { display: none; }
.inv-link--top { margin: 0 auto 0.15rem; }
.inv-foot {
  max-width: 44rem;
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--on-sky-2);
}
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .inv-sources { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .inv { height: 19.75rem; }
  .inv-sources { display: block; margin: 0; }
  .inv-source {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
    font-size: 0.95rem;
  }
  /* Left tiles end at 13.5rem (x=216); right tiles start at 40.5rem (x=648). */
  .inv-source--l { right: 40.5rem; flex-direction: row-reverse; text-align: right; }
  .inv-source--r { left: 40.5rem; }
  .inv-source--1 { top: 0.875rem; }   /* tile centre y = 2.5rem  (40)  */
  .inv-source--2 { top: 5.875rem; }   /* tile centre y = 7.5rem  (120) */
  .inv-source--3 { top: 10.875rem; }  /* tile centre y = 12.5rem (200) */
  .inv-centre { position: absolute; top: 4.5rem; left: 50%; transform: translateX(-50%); }
  .inv-link--top { display: none; }
  .inv-curves {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.62);
    pointer-events: none;
  }
  .inv-foot { margin-top: 2.25rem; }
}

/* ------------------------------------------------- 5. evidence ------------ */
.ev-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 66rem;
  margin-inline: auto;
}
@media (min-width: 40rem) { .ev-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .ev-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.9rem; } }
.ev-tile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.65rem;
  padding: 1.2rem 0.6rem 1.05rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.ev-tile--yes { border-color: var(--gold-line); }
.ev-tile__glyph {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--cobalt-soft);
  color: var(--cobalt-ink);
}
.ev-tile__glyph svg { width: 20px; height: 20px; }
.ev-tile__label { font-size: var(--fs-small); font-weight: 600; line-height: 1.25; color: var(--ink); }
.ev-tile__verdict {
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
}
.ev-tile__verdict svg { width: 12px; height: 12px; }
.ev-tile--no .ev-tile__verdict { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }
.ev-tile--maybe .ev-tile__verdict { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.ev-tile--yes .ev-tile__verdict { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold); }
.ev-foot { margin: 1.6rem 0 0; text-align: center; font-weight: 600; color: var(--cobalt-ink); }

/* ------------------------------------------------- evidence card ---------- */
.ec { display: grid; gap: 0.8rem; align-content: start; padding: 1.35rem 1.4rem; }
.ec__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.ec__kicker {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.ec .badge { font-size: 0.76rem; }
.ec .badge svg { width: 12px; height: 12px; }
.ec__query {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}
.ec__query svg { width: 16px; height: 16px; flex: none; color: var(--cobalt-ink); }
/* Hairline rows, not a box: the card holds no nested cards. */
.ec__route {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}
.ec__label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.ec__address { font-size: 1.02rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ec__confidence { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-small); font-weight: 600; color: var(--gold-ink); }
.ec__confidence svg { width: 13px; height: 13px; }
.ec__ledger { display: grid; }
.ec__ledger li {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.ec__ledger li:first-child { border-top: 1px solid var(--line); }
.ec__tag { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; color: var(--cobalt-ink); }
.ec__time { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); }
.ec .ec__foot { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--muted); }

/* ------------------------------------------------- 7. scale + use cases --- */
.sc-head { margin-bottom: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); }
.sc-versus { max-width: 66rem; margin-inline: auto; }
@media (min-width: 52rem) {
  .sc-versus { gap: 1.25rem; align-items: stretch; }
  .sc-versus .versus__badge { align-self: center; }
}
.sc-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.4rem) clamp(1.1rem, 0.9rem + 1.2vw, 1.75rem);
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--cloud);
  text-align: center;
}
@media (min-width: 40rem) {
  .sc-pane { flex-direction: row; gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); text-align: left; }
  .sc-copy { flex: none; }
}
.sc-pane--few { background: var(--surface); border-color: var(--cobalt-line); }
/* The crowd may wrap to two rows when the pane is narrow; the copy never breaks. */
.sc-crowd {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0.1rem;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  color: #b7c2d1;
}
.sc-fig { width: 1.6rem; height: 1.6rem; flex: none; }
.sc-crowd .sc-fig:nth-child(even) { width: 1.85rem; height: 1.85rem; }
.sc-crowd--few { flex-wrap: nowrap; align-items: center; gap: 0.4rem; color: var(--sky-cobalt); }
.sc-fig-wrap { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; }
.sc-fig-wrap .sc-fig { width: 2.3rem; height: 2.3rem; }
.sc-fig-wrap--found { border: 2px solid var(--gold); background: var(--gold-soft); }
.sc-copy { display: grid; gap: 0.2rem; margin: 0; line-height: 1.3; }
.sc-copy strong { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); font-weight: 700; letter-spacing: -0.012em; color: var(--ink); }
.sc-copy span { color: var(--ink-2); }
.sc-copy--few span { color: var(--cobalt-ink); font-weight: 600; }

.sc-uses {
  display: grid;
  max-width: 66rem;
  margin: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) auto 0;
  border-top: 1px solid var(--line);
}
.sc-uses li { display: grid; gap: 0.3rem; align-content: start; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.sc-uses strong { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.sc-uses span { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
@media (min-width: 40rem) {
  .sc-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}
@media (min-width: 60rem) {
  .sc-uses { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; border-top: 0; }
  .sc-uses li { padding: 0.2rem 1.4rem; border-bottom: 0; border-left: 1px solid var(--line); }
  .sc-uses li:first-child { padding-left: 0; border-left: 0; }
  .sc-uses li:last-child { padding-right: 0; }
}

/* ==========================================================================
   Pricing, ways in, trust (lead)
   ========================================================================== */
/* ------------------------------------------------------------ pricing ---- */
/* Four plans in a row, then packs and the tariff side by side, then the three
   ways in and the trust line. Everything hairline; only Professional carries
   the one primary button in this viewport. */
.pricing { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 34rem) { .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pricing { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan { display: grid; gap: 0.6rem; align-content: start; position: relative; }
.plan--featured { border-color: var(--sky-cobalt); box-shadow: 0 0 0 1px var(--sky-cobalt), var(--shadow-l); }
.plan__flag { position: absolute; top: -0.75rem; left: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); }
.plan__name { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.plan__price { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.035em; margin: 0; }
.plan__period { font-size: 0.9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan__for { font-size: var(--fs-small); color: var(--ink-2); margin: 0; }
.plan__features { display: grid; gap: 0.45rem; margin: 0.35rem 0 0.85rem; font-size: var(--fs-small); }
.plan__features li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.5rem; align-items: start; color: var(--ink-2); }
.plan__features svg { width: 13px; height: 13px; margin-top: 0.3rem; color: var(--cobalt-ink); }

.pricing__more { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 56rem) { .pricing__more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.packs, .usage {
  padding: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}
.packs h3, .usage h3 { margin-bottom: 0.5rem; }
.packs > p, .usage > p { font-size: var(--fs-small); color: var(--ink-2); }
.packs__list { display: grid; gap: 1px; margin: 0.9rem 0 1rem; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 34rem) { .packs__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pack { display: grid; gap: 0.1rem; padding: 0.75rem 0.6rem; background: var(--surface); text-align: center; }
.pack__credits { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.pack__price { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; }
.pack__meta { font-size: 0.78rem; color: var(--muted); }

.usage__table { display: grid; gap: 1px; margin: 0.9rem 0 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.usage__table > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.9rem; background: var(--surface); font-size: var(--fs-small); }
.usage__table dt { color: var(--ink-2); margin: 0; }
.usage__table dd { margin: 0; font-weight: 700; white-space: nowrap; }

.ways { display: grid; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
@media (min-width: 52rem) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ways li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.8rem; align-items: start; font-size: var(--fs-small); color: var(--ink-2); }
.ways .tile-icon { width: 2.4rem; height: 2.4rem; margin: 0; }
.ways strong { color: var(--ink); }

.trust { display: grid; gap: 0.75rem 1.5rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
@media (min-width: 52rem) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trust li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.6rem; align-items: start; font-size: var(--fs-small); color: var(--ink-2); }
.trust svg { width: 15px; height: 15px; margin-top: 0.25rem; color: var(--cobalt-ink); }
.trust strong { color: var(--ink); }

/* Six idle pipeline rows cost the hero a third of its height before anything
   has happened. Collapse them until the run actually starts; resolver.js flips
   each step's data-state, so :has() is the whole mechanism. A browser without
   :has() simply shows the list, which is what it used to do. */
.console .pipeline:not(:has(.pipeline__step:not([data-state='idle']))) { display: none; }