/* ============================================================
   LAYCAN — operator's terminal skin, v2
   Dark canvas · amber signal · mono data readouts
   ============================================================ */

:root {
  --bg: #0a0e14;
  --bg-panel: #10151d;
  --bg-panel-2: #151b25;
  --border: #232b38;
  --border-bright: #2e3949;
  --text: #e8ecf1;
  --text-dim: #9aa7b8;
  --text-faint: #5c6b80;
  --amber: #ffb020;
  --amber-bright: #ffc043;
  --amber-dim: #b8802a;
  --steel: #4a90a4;
  --danger: #ff6b5e;
  --mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-w: 768px;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-panel: 0 1px 0 rgba(255,255,255,0.03) inset, 0 16px 40px -20px rgba(0,0,0,0.7);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(255,176,32,0.25); color: #fff; }

a { color: var(--amber); }
a:hover { color: var(--amber-bright); }

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

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
section { padding: 88px 0; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: none; }

/* ---- STICKY MINI-NAV (appears after scrolling past hero) ---- */
.mini-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(10,14,20,0.85);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: flex-start;
  transform: translateY(-100%);
  transition: transform 0.3s var(--ease-out);
}
.mini-nav.visible {
  transform: translateY(0);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.6);
}
.mini-nav .brand { margin-bottom: 0; font-size: 13px; }

/* ---- HERO ---- */
.hero {
  padding-top: 120px; padding-bottom: 80px; text-align: center;
  position: relative; overflow: visible;
}
.hero::before {
  content: ''; position: absolute; top: -220px; left: 50%;
  transform: translateX(-50%);
  width: 880px; max-width: 120vw; height: 560px; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 45% at center, rgba(255,176,32,0.09) 0%, rgba(255,176,32,0) 70%),
    radial-gradient(ellipse 80% 60% at center, rgba(74,144,164,0.05) 0%, rgba(74,144,164,0) 70%);
}
.hero::after {
  content: ''; position: absolute; bottom: -1px; left: 15%; right: 15%;
  height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,176,32,0.35), transparent);
}
.hero > * { position: relative; }

.brand {
  font-family: var(--mono); font-weight: 600; letter-spacing: 0.22em;
  font-size: 14px; color: var(--amber); text-transform: uppercase;
  margin-bottom: 36px; display: inline-flex; align-items: center; gap: 10px;
}
.brand::before {
  content: ''; width: 8px; height: 8px; background: var(--amber);
  box-shadow: 0 0 12px rgba(255,176,32,0.6);
}
.hero .brand { display: inline-flex; }

/* When .brand wraps the approved SVG lockup (nav, success, privacy), the logo
   already carries its own amber signal bar — drop the decorative dot + link
   underline so it reads as a clean mark. */
.brand:has(svg) { text-decoration: none; line-height: 0; }
.brand:has(svg)::before { display: none; }
.brand svg { display: block; }

h1 {
  font-size: clamp(32px, 6vw, 54px); font-weight: 700; line-height: 1.12;
  color: #fff; margin-bottom: 24px; letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero-sub {
  font-size: clamp(16px, 2.4vw, 19px); color: var(--text-dim);
  line-height: 1.6; max-width: 580px; margin: 0 auto 40px;
  text-wrap: pretty;
}
.hero-note {
  font-family: var(--mono); font-size: 12.5px; color: var(--text-faint);
  letter-spacing: 0.02em; margin-top: 28px;
}
/* Relocated below the hero video (was inside .hero, before it) -- outside
   .hero now, so it no longer inherits text-align:center from `.hero > *`
   and needs its own. */
.hero-note--post-video { text-align: center; margin-top: 20px; }

/* ---- BUTTONS ---- */
.btn {
  display: inline-block; font-family: var(--sans); font-weight: 600;
  font-size: 15.5px; padding: 13px 28px; border-radius: 6px;
  text-decoration: none; line-height: 1.4;
  transition: transform 0.12s var(--ease-out), box-shadow 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out), background-color 0.15s var(--ease-out),
              filter 0.15s var(--ease-out);
  border: none; cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-primary {
  background: linear-gradient(180deg, var(--amber-bright), var(--amber));
  color: #1a1408;
  box-shadow: 0 0 0 1px rgba(255,176,32,0.35),
              inset 0 1px 0 rgba(255,255,255,0.28),
              0 10px 28px -12px rgba(255,176,32,0.45);
}
.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(255,176,32,0.5),
              inset 0 1px 0 rgba(255,255,255,0.28),
              0 14px 32px -12px rgba(255,176,32,0.55);
}
.btn-ghost {
  background: rgba(255,255,255,0.02); color: var(--text);
  border: 1px solid var(--border-bright);
}
.btn-ghost:hover { border-color: var(--steel); background: rgba(74,144,164,0.06); }
.btn-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* ---- FEED CARD (the product preview — treated as a terminal readout) ---- */
.card {
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--border);
  border-left: 2px solid var(--amber);
  border-radius: 6px;
  padding: 16px 20px 15px;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.7;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  margin: 26px 0 4px;
  position: relative;
  box-shadow: var(--shadow-panel);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out),
              transform 0.2s var(--ease-out);
}
.card:hover {
  transform: translateY(-1px);
  border-color: var(--border-bright);
  border-left-color: var(--amber-bright);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 20px 48px -20px rgba(0,0,0,0.8),
              0 0 24px -12px rgba(255,176,32,0.25);
}
.card-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(35,43,56,0.8);
}
.card .name {
  color: #fff; font-weight: 600; font-size: 14px; letter-spacing: 0.01em;
}
.card .tag {
  display: inline-block;
  background: rgba(255,176,32,0.10); color: var(--amber);
  border: 1px solid rgba(255,176,32,0.35);
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 3px;
  letter-spacing: 0.08em; margin-left: 8px; white-space: nowrap;
}
.card-head .tag { margin-left: 0; }
.card .line { display: block; margin-top: 5px; font-size: 13px; }
.card .line:first-of-type { margin-top: 0; }
.card .overdue {
  color: var(--danger); font-weight: 600; letter-spacing: 0.05em;
  text-shadow: 0 0 14px rgba(255,107,94,0.4);
}

/* ---- CLAIM / CONTACTED (Sprint 1 Phase A, 2026-07-21) ----
   Subscriber console only -- a private, per-subscriber tracking label.
   Never touches lead_allocations; purely a personal "have I acted on
   this" note, backed by the laycan-console-actions Lambda. */
.claim-row {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--border); flex-wrap: wrap;
}
.claim-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em;
  color: var(--text-dim); background: var(--bg-panel-2);
  border: 1px solid var(--border-bright); border-radius: 4px;
  padding: 5px 11px; cursor: pointer; transition: border-color .15s, color .15s;
}
.claim-btn:hover { color: var(--text); border-color: var(--steel); }
.claim-btn.active[data-status="contacted"] {
  color: var(--steel); border-color: var(--steel); background: rgba(74,144,164,0.12);
}
.claim-btn.active[data-status="claimed"] {
  color: var(--live-green); border-color: var(--live-green); background: rgba(63,178,127,0.12);
}
.claim-status {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
}
.claim-status.error { color: var(--danger); }

/* Sprint 1 Phase A.1 (2026-07-21): "Request Contact" concierge action --
   a one-shot request, not a toggle. Primary CTA: solid amber fill so it
   reads as the highest-priority action on the card at a glance. Claim/status
   buttons stay as secondary ghost style to create clear visual hierarchy. */
.request-contact-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em;
  color: var(--bg); background: var(--amber);
  border: 1px solid var(--amber); border-radius: 4px;
  padding: 5px 14px; cursor: pointer; transition: opacity .15s;
  font-weight: 600;
}
.request-contact-btn:hover { opacity: 0.85; }
.request-contact-btn:disabled {
  color: var(--text-faint); border-color: var(--border-bright);
  background: transparent; cursor: default; opacity: 1;
}

/* ---- OUTCOME CAPTURE (Sprint 2 Phase B, 2026-07-21) ----
   Plain <a> links, not buttons -- these must render identically whether
   they're clicked from this console page or (later) from an actual email,
   so no JS-driven .active/disabled state like claim-btn above; a click just
   navigates to the confirmation page the Lambda itself returns. */
.outcome-row {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap;
}
.outcome-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em;
  background: var(--bg-panel-2); border: 1px solid var(--border-bright);
  border-radius: 4px; padding: 5px 11px; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.outcome-link.outcome-won { color: var(--live-green); }
.outcome-link.outcome-won:hover { border-color: var(--live-green); }
.outcome-link.outcome-dead { color: var(--danger); }
.outcome-link.outcome-dead:hover { border-color: var(--danger); }
.outcome-link.outcome-already_customer { color: var(--text-dim); }
.outcome-link.outcome-already_customer:hover { border-color: var(--steel); color: var(--steel); }

/* ---- HEADINGS / BODY ---- */
h2 {
  font-size: clamp(24px, 4vw, 32px); font-weight: 700; color: #fff;
  line-height: 1.25; margin-bottom: 20px; letter-spacing: -0.02em;
  text-wrap: balance;
}
h2 + p { margin-top: -4px; }
p { color: var(--text-dim); margin-bottom: 16px; font-size: 16px; text-wrap: pretty; }
p strong { color: var(--text); font-weight: 600; }
p em { color: var(--text); }

ul.plain { list-style: none; margin: 22px 0; }
ul.plain li {
  color: var(--text-dim); margin-bottom: 13px; padding-left: 24px;
  position: relative; font-size: 16px;
}
ul.plain li strong { color: var(--text); }
ul.plain li::before {
  content: '—'; position: absolute; left: 0; color: var(--amber-dim);
  font-family: var(--mono);
}

/* ---- FEATURES ---- */
.feature { margin-top: 52px; }
.feature:first-of-type { margin-top: 44px; }
.feature-label {
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--amber);
  text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 10px;
  display: block;
}
.feature h3 {
  font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -0.01em;
  line-height: 1.35; margin-bottom: 10px;
}
.feature p { font-size: 15.5px; }

/* ---- COMPARISON / QUOTE ---- */
.callout {
  font-size: clamp(20px, 3vw, 25px); font-weight: 600; color: #fff;
  letter-spacing: -0.015em; line-height: 1.4; margin: 32px 0;
  border-left: 2px solid var(--steel); padding: 4px 0 4px 22px;
}
.stat-line {
  font-family: var(--mono); color: var(--amber); font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- ROI BLOCK (above pricing) ---- */
.roi-block {
  max-width: 540px; margin: 36px auto 44px; padding: 28px 32px;
  background: var(--bg-panel); border: 1px solid var(--border-bright);
  border-left: 3px solid var(--amber); border-radius: 4px;
  text-align: left;
}
.roi-block h3 {
  font-size: 18px; font-weight: 600; color: #fff;
  letter-spacing: -0.01em; margin-bottom: 12px;
}
.roi-block p { font-size: 15px; margin-bottom: 10px; }
.roi-block p:last-child { margin-bottom: 0; }
.roi-block .callout {
  font-size: clamp(17px, 2.5vw, 20px); margin: 16px 0;
}
.roi-block .hero-note { font-size: 12px; color: var(--text-dim); margin-top: 14px; }

/* ---- FOUNDING COHORT ---- */
.cohort-box {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #171e29, var(--bg-panel));
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  padding: 48px 40px 44px;
  margin-top: 36px;
  text-align: center;
  box-shadow: var(--shadow-panel);
}
.cohort-box::before {
  content: ''; position: absolute; top: -160px; left: 50%;
  transform: translateX(-50%);
  width: 480px; height: 320px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,176,32,0.08) 0%, rgba(255,176,32,0) 70%);
}
.cohort-box::after {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,176,32,0.55), transparent);
}
.cohort-box > * { position: relative; }
.cohort-cap {
  font-family: var(--mono); font-size: 52px; font-weight: 600;
  color: var(--amber); line-height: 1;
  text-shadow: 0 0 32px rgba(255,176,32,0.35);
  font-variant-numeric: tabular-nums;
}
.cohort-cap-label {
  font-family: var(--mono); font-size: 12px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-top: 10px; margin-bottom: 30px;
}
.price-row {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  margin: 6px 0 30px;
}
.price {
  font-size: 52px; font-weight: 700; color: #fff; letter-spacing: -0.03em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.price-period { font-size: 17px; color: var(--text-dim); }
.price-strike {
  font-family: var(--mono); color: var(--text-faint);
  text-decoration: line-through; text-decoration-color: rgba(255,107,94,0.6);
  font-size: 18px; margin-left: 12px;
}
.cohort-box ul.plain {
  text-align: left; max-width: 400px; margin: 0 auto 34px;
  border-top: 1px solid var(--border); padding-top: 26px;
}
.cohort-box ul.plain li { font-size: 15px; margin-bottom: 12px; }
.cohort-box ul.plain li:last-child { margin-bottom: 0; }

/* ---- Consent checkbox (2026-07-19f, seat-allocation underwriting gate) ---- */
.consent-row {
  display: flex; align-items: flex-start; justify-content: center; gap: 10px;
  max-width: 380px; margin: 0 auto 22px; text-align: left;
  font-size: 13px; line-height: 1.5; color: var(--text-dim); cursor: pointer;
  user-select: none;
}
.consent-row input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  accent-color: var(--amber); cursor: pointer;
}
.consent-row a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
.consent-row a:hover { color: var(--amber); }

/* ---- SEAT COUNTER (dormant -- see js/main.js SEATS_CLAIMED. Hidden until
   a founder sets SEATS_CLAIMED > 0; never fake, per Manifesto SS7.5) ---- */
.seat-counter {
  display: none; font-family: var(--mono); font-size: 12.5px;
  letter-spacing: 0.04em; color: var(--amber);
  background: rgba(255,176,32,0.07); border: 1px solid rgba(255,176,32,0.3);
  border-radius: 4px; padding: 8px 16px; margin-bottom: 26px;
}
.seat-counter.active { display: inline-block; }

/* ---- PROOF STRIP (honest data-scale stats, no logos/testimonials yet) ---- */
.proof-strip {
  padding: 30px 0; text-align: center;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px;
}
.proof-stat {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.03em;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.proof-stat strong { color: var(--text); font-weight: 500; }

/* ---- FOUNDER NOTE ---- */
.founder-note {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-left: 2px solid var(--steel);
  border-radius: 6px; padding: 22px 24px; margin: 32px 0 0;
  box-shadow: var(--shadow-panel);
}
.founder-note p { margin-bottom: 0; font-size: 15px; }
.founder-note .sign {
  display: block; margin-top: 12px; color: var(--text-faint);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em;
}

/* ---- SCROLL REVEAL (restrained: fade + 14px rise, one pass, no re-trigger
   on scroll-up -- never full-page choreography). Respects reduced-motion. ---- */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---- FORM ---- */
.form-fields { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin-top: 28px; }
.form-fields input {
  background: var(--bg-panel); border: 1px solid var(--border);
  color: var(--text); padding: 14px 16px; border-radius: 6px;
  font-size: 15px; font-family: var(--sans);
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.form-fields input::placeholder { color: var(--text-faint); }
.form-fields input:focus {
  outline: none; border-color: var(--amber-dim);
  box-shadow: 0 0 0 3px rgba(255,176,32,0.12);
}
.form-fields .btn { margin-top: 8px; align-self: flex-start; }

/* ---- FREE-SAMPLE FORM (inline email + submit, wired 2026-07-14) ---- */
.sd-form-inline {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  max-width: 460px; margin-top: 8px;
}
.sd-form-inline input[type="email"] {
  flex: 1 1 220px; background: var(--bg-panel); border: 1px solid var(--border);
  color: var(--text); padding: 13px 16px; border-radius: 6px;
  font-size: 15px; font-family: var(--sans);
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.sd-form-inline input[type="email"]::placeholder { color: var(--text-faint); }
.sd-form-inline input[type="email"]:focus {
  outline: none; border-color: var(--amber-dim);
  box-shadow: 0 0 0 3px rgba(255,176,32,0.12);
}
.sd-form-inline input[type="email"].invalid { border-color: var(--danger); }
@media (max-width: 600px) {
  .sd-form-inline { flex-direction: column; align-items: stretch; }
}
/* 2026-07-17e: corporate-email gate error message (Task 1) */
.fs-error {
  display: none; font-family: var(--mono); font-size: 12.5px; color: var(--danger);
  max-width: 460px; margin-top: 8px;
}
.fs-error.show { display: block; }

/* ---- FAQ ---- */
.faq-item { padding: 24px 0; border-top: 1px solid var(--border); }
.faq-item:first-of-type { margin-top: 12px; }
.faq-item:last-child { padding-bottom: 0; }
.faq-item h4 {
  font-size: 16.5px; font-weight: 600; color: #fff;
  letter-spacing: -0.01em; margin-bottom: 8px;
}
.faq-item p { font-size: 15px; margin-bottom: 0; }

/* ---- SUCCESS PAGE ---- */
.success-wrap {
  min-height: 80vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  position: relative;
}
.success-wrap::before {
  content: ''; position: absolute; top: 10%; left: 50%;
  transform: translateX(-50%);
  width: 640px; max-width: 100vw; height: 400px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,176,32,0.07) 0%, rgba(255,176,32,0) 70%);
}
.success-wrap > * { position: relative; }
.success-icon {
  font-family: var(--mono); font-size: 30px; color: var(--amber);
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,176,32,0.35);
  background: rgba(255,176,32,0.06);
  box-shadow: 0 0 32px -8px rgba(255,176,32,0.35);
  margin-bottom: 28px;
}

/* ---- FEED CONSOLE (/feeds/{secret_id} -- private, unlisted, single
   current-week view; no login/nav/archive by design, see render_console.py) ---- */
.console-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 20px; padding-top: 48px; padding-bottom: 28px;
}
.console-status {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-faint);
  letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 8px;
}
.console-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 10px rgba(255,176,32,0.6); flex: none;
}
.console-empty {
  font-family: var(--mono); font-size: 14px; color: var(--text-faint);
  border: 1px dashed var(--border-bright); border-radius: 6px;
  padding: 32px 24px; text-align: center; margin-top: 24px; line-height: 1.7;
}
/* "How to read this →" guide link -- top-right of the console header */
.console-guide-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--text-dim); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; margin-left: auto;
  border: 1px solid var(--border-bright); border-radius: 4px; padding: 4px 10px;
}
.console-guide-link:hover { color: var(--amber); border-color: var(--amber-dim); }

/* ---- FILTER BAR + PROGRESS COUNTER ---- */
.console-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 16px;
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 10px 0 10px; margin-bottom: 24px;
}
.console-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.console-filter-btn {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--text-faint); background: var(--bg-panel-2);
  border: 1px solid var(--border-bright); border-radius: 4px;
  padding: 4px 10px; cursor: pointer; transition: border-color .15s, color .15s;
  display: inline-flex; align-items: center; gap: 5px;
}
.console-filter-btn:hover { color: var(--text-dim); border-color: var(--steel); }
.console-filter-btn.active {
  color: var(--amber); border-color: var(--amber); background: rgba(255,176,32,0.08);
}
.filter-count {
  font-size: 10px; color: var(--text-faint);
  background: var(--bg-panel); border-radius: 3px; padding: 1px 5px;
}
.console-filter-btn.active .filter-count { color: var(--amber-dim); background: transparent; }
.console-progress {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--text-faint); white-space: nowrap;
}
.console-progress.progress-done { color: var(--live-green); }

/* ---- COLLAPSIBLE CARDS ---- */
/* card-head gets a pointer so double-click is discoverable */
.card-head { cursor: pointer; user-select: none; }
.card.collapsed .line,
.card.collapsed .card-actions,
.card.collapsed .claim-row,
.card.collapsed .outcome-row { display: none; }
.card.collapsed { padding-bottom: 14px; }
/* subtle expand hint on collapsed state */
.card.collapsed .card-head::after {
  content: ' \25B8'; color: var(--text-faint); font-size: 10px;
  font-family: var(--mono); margin-left: 6px;
}

/* ---- COPY FOR CRM BUTTON ---- */
.copy-card-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em;
  color: var(--text-faint); background: transparent;
  border: 1px solid var(--border-bright); border-radius: 4px;
  padding: 5px 10px; cursor: pointer; transition: border-color .15s, color .15s;
}
.copy-card-btn:hover { color: var(--text-dim); border-color: var(--steel); }

/* ---- CARD EXTERNAL ACTION LINKS ---- */
.card-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px 0 4px; margin-top: 6px;
  border-top: 1px solid var(--border);
}
.card-action-btn {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em;
  color: var(--text-faint); text-decoration: none;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-bright); border-radius: 4px;
  padding: 4px 10px; transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.card-action-btn:hover { color: var(--amber); border-color: var(--amber-dim); }

/* ---- EXPORT BUTTONS ROW ---- */
.console-export-row {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 1.5rem 0 0;
}

/* ---- EMAIL FORMAT HINT ---- */
/* inherits .line styling; no additional rules needed -- the text itself
   already reads as a metadata field alongside Website */

@media (max-width: 600px) {
  .console-header { padding-top: 32px; }
  .console-status { font-size: 11px; }
  .console-guide-link { font-size: 10.5px; }
  .console-action-bar { padding: 8px 0; }
  .console-progress { font-size: 10px; width: 100%; }
}

/* ---- FOOTER ---- */
footer { padding: 48px 0 64px; text-align: center; border-top: 1px solid var(--border); }
footer p {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em;
  color: var(--text-faint); margin-bottom: 8px;
}
footer a { color: var(--text-faint); text-decoration: underline; text-underline-offset: 3px; }
footer a:hover { color: var(--text-dim); }

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .btn, .mini-nav, .form-fields input { transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---- MOBILE (verified at 375px) ---- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  section { padding: 60px 0; }
  .hero { padding-top: 88px; padding-bottom: 60px; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .hero .btn-row { max-width: 320px; margin: 0 auto; }
  .btn { text-align: center; }
  .card { padding: 14px 16px 13px; font-size: 12.5px; }
  .card .line { font-size: 12.5px; }
  .card .name { font-size: 13px; }
  .cohort-box { padding: 36px 22px 36px; }
  .cohort-cap { font-size: 44px; }
  .price { font-size: 44px; }
  .form-fields .btn { align-self: stretch; }
  .proof-strip { gap: 8px 24px; }
}

/* ---- HERO VIDEO (poster facade -> click-to-play with sound) ---- */
/* 2026-07-13 fold audit: negative margin-top deliberately bleeds the video
   up into .hero's own padding-bottom (80px desktop / 60px mobile) so more of
   it sits above the fold on a 1366x768 laptop, WITHOUT moving the CTA above
   it -- the CTA's position is untouched. Measured result at 1366x768:
   video top moves from y=711 to y=591, raising visible video area above the
   fold from 14% to 44% (see PLACEMENT-AUDIT.md for the full before/after). */
.hero-video { margin: -40px auto 0; }
/* The frame is a real <button>: keyboard-focusable, Enter/Space activate.
   aspect-ratio matches the 1920x1080 source exactly, so the box is 16:9 and
   the poster/video fill it with ZERO crop on any viewport -- ultrawide to
   phone. No max-width here: .wrap (max-width: 768px, see :root --max-w)
   is the true outer boundary for every element on this page, video
   included -- an independent cap on this element would either be dead code
   (if looser than .wrap, as the previous 880px value was) or would silently
   fight the page grid (if tighter). Let the parent govern; width:100% fills
   whatever it allows. */
.hv-frame {
  position: relative; display: block; width: 100%; max-width: none;
  margin: 0 auto; padding: 0; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--border-bright); border-radius: 8px;
  background: var(--bg-panel); cursor: pointer; font-family: var(--mono);
  box-shadow: var(--shadow-panel);
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.hv-frame:hover { border-color: var(--amber); transform: translateY(-2px); }
.hv-poster { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.hv-scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(10,14,20,0.15) 0%, rgba(10,14,20,0.55) 100%); }
.hv-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 78px; height: 78px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber); color: #0a0e14;
  box-shadow: 0 0 0 8px rgba(255,176,32,0.14), 0 12px 32px -8px rgba(0,0,0,0.7);
  padding-left: 4px; /* optically centre the triangle */
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.hv-frame:hover .hv-play { transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 0 0 12px rgba(255,176,32,0.18), 0 12px 32px -8px rgba(0,0,0,0.7); }
.hv-badge {
  position: absolute; left: 16px; bottom: 16px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--text); background: rgba(10,14,20,0.78); backdrop-filter: blur(6px);
  border: 1px solid var(--border-bright); border-radius: 5px; padding: 7px 12px;
}
.hv-badge-dot { color: var(--amber); }
/* On play, js/main.js sets .is-playing: the facade goes, the real player fills
   the identical box so the swap is seamless (no reflow). */
.hero-video.is-playing .hv-frame { display: none; }
.hero-video .hv-video {
  display: block; width: 100%; height: auto; max-width: none; margin: 0 auto;
  aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--border-bright);
  border-radius: 8px; background: #000; box-shadow: var(--shadow-panel);
}
/* explicit height:auto above, not left to default -- the video element also
   carries width="1920" height="1080" presentation attributes (harmless
   intrinsic-size hints per spec, and normally auto-overridden by any CSS
   height), but verified by render 2026-07-13 that leaving CSS height
   unset here let the raw 1080 attribute value win, producing a 327x1080 box
   instead of the intended 16:9 -- exactly the unconstrained-dimension
   failure mode that broke the page in the earlier incident. Being explicit
   costs nothing and removes the ambiguity outright. */
.hv-native { width: 100%; max-width: none; margin: 0 auto; display: block;
  border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  .hv-frame, .hv-frame:hover, .hv-play, .hv-frame:hover .hv-play {
    transition: none; transform: none;
  }
  .hv-frame:hover .hv-play { transform: translate(-50%, -50%); }
}
@media (max-width: 600px) {
  .hv-play { width: 60px; height: 60px; box-shadow: 0 0 0 6px rgba(255,176,32,0.14); }
  .hv-badge { font-size: 11px; left: 10px; bottom: 10px; padding: 5px 9px; }
}

/* ---- HERO VIDEO LIGHTBOX (desktop theater mode, js/main.js openDesktopLightbox) ---- */
.hv-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,12,0.92);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  opacity: 0; transition: opacity 0.22s var(--ease-out);
}
.hv-lightbox.is-open { opacity: 1; }
/* max-width/max-height + width/height:auto, not a fixed width -- lets the
   video's own 16:9 intrinsic size settle against whichever axis is tighter.
   A flat "width:85vw" (no height cap) overflows past the viewport height on
   a short/wide window (e.g. a 1366x600 laptop: 85vw at 16:9 is taller than
   the screen); this fits both axes on any viewport shape. */
.hv-lightbox-video {
  max-width: 85vw; max-height: 85vh; width: auto; height: auto;
  aspect-ratio: 16 / 9; background: #000;
  border: 1px solid var(--border-bright); border-radius: 8px;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,0.85);
}
.hv-lightbox-close {
  position: absolute; top: 24px; right: 28px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16,21,29,0.85); border: 1px solid var(--border-bright);
  color: var(--text); font-size: 18px; line-height: 1; cursor: pointer;
  transition: background-color 0.15s var(--ease-out), border-color 0.15s var(--ease-out),
              transform 0.15s var(--ease-out);
}
.hv-lightbox-close:hover {
  background: rgba(255,176,32,0.15); border-color: var(--amber); transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .hv-lightbox { transition: none; }
  .hv-lightbox-close { transition: none; }
  .hv-lightbox-close:hover { transform: none; }
}
@media (max-width: 600px) {
  /* Lightbox is desktop-only by design (js/main.js routes <=600px to native
     fullscreen instead) -- this is just a safety net for the boundary case
     of a desktop window resized down without a reload. */
  .hv-lightbox-close { top: 14px; right: 14px; width: 38px; height: 38px; font-size: 16px; }
}

/* ================================================================== */
/* UNIVERSAL-ENGINE: LANE STRIP + COVERAGE MATRIX + SCOUT PANEL         */
/* Ported from the verified prototype (laycan-vertical-strategy.html /  */
/* laycan-qualifier.html) -- hardcoded hexes swapped for site tokens so */
/* it inherits theming for free. Additive only; nothing existing is     */
/* restyled. 2026-07-15.                                                */
/* ================================================================== */
:root { --live-green: #3fb27f; }

/* ---- LANE STRIP (hero) ---- */
.lane-strip { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 8px; }
.lane-chip {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em;
  background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--border-bright);
  padding: 7px 14px; border-radius: 4px; cursor: pointer;
  transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out),
              background-color 0.15s var(--ease-out);
}
.lane-chip:hover { border-color: var(--amber); color: var(--text); }
.lane-chip.sel { border-color: var(--amber); color: var(--amber); background: rgba(255,176,32,0.08); }
.lane-chip.live { border-left: 3px solid var(--live-green); }
.lane-free {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--bg-panel); color: var(--text); border: 1px solid var(--border-bright);
  padding: 7px 12px; border-radius: 4px; width: 180px;
}
.lane-free::placeholder { color: var(--text-faint); }
.lane-free:focus { outline: none; border-color: var(--amber-dim); box-shadow: 0 0 0 3px rgba(255,176,32,0.12); }

/* ---- LIVE-CHIP (demo-cards honesty label, H-8) ---- */
.live-chip {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--live-green); border: 1px solid var(--live-green); border-radius: 3px;
  padding: 3px 9px; margin-left: 8px; vertical-align: middle; white-space: nowrap;
}

/* ---- COVERAGE MATRIX ---- */
.pmatrix { border: 1px solid var(--border); border-radius: 6px; margin: 30px 0 0; overflow: hidden; }
.prow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 13px 18px;
  border-bottom: 1px solid var(--border); font-family: var(--mono);
  background: var(--bg-panel); cursor: pointer;
  transition: background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.prow:last-child { border-bottom: none; }
.prow:hover { background: var(--bg-panel-2); }
.prow.hl { background: rgba(255,176,32,0.06); box-shadow: inset 3px 0 0 var(--amber); }
.prow .pname { font-size: 14px; color: var(--text); font-weight: 600; min-width: 130px; }
.prow .pstat {
  font-size: 10.5px; letter-spacing: 0.1em; padding: 3px 9px; border: 1px solid;
  border-radius: 3px; white-space: nowrap;
}
.pstat.active { color: var(--live-green); border-color: var(--live-green); }
.pstat.gated  { color: var(--amber); border-color: var(--amber-dim); }
.pstat.scout  { color: var(--text-dim); border-color: var(--border-bright); }
.prow .pdetail { font-size: 12px; color: var(--text-faint); margin-left: auto; text-align: right; }

/* ---- SCOUT PANEL (Rung-1 Qualifier host) ---- */
.scout-panel {
  margin-top: 20px; border: 1px solid var(--border-bright); border-radius: 6px;
  background: var(--bg-panel); padding: 22px 24px 24px;
  box-shadow: var(--shadow-panel);
}
.scout-panel h5 {
  font-family: var(--mono); font-size: 14px; color: var(--amber);
  letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 10px;
}
.scout-copy { color: var(--text-dim); font-size: 14.5px; max-width: 62ch; margin: 0 0 16px; line-height: 1.6; }
.scout-copy b { color: var(--text); }
.scout-copy a { color: var(--amber); }

/* ---- RUNG-1 QUALIFIER (sd-* namespace kept from the verified prototype) ---- */
.sd-ctarow { display: flex; gap: 10px; flex-wrap: wrap; }
.sd-cta {
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  background: linear-gradient(180deg, var(--amber-bright), var(--amber)); color: #1a1408;
  border: none; border-radius: 5px; padding: 10px 22px; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.sd-cta.furn { background: transparent; color: var(--amber); border: 1px solid var(--amber-dim); }
.sd-form {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}
.sd-form.open { max-height: 1400px; opacity: 1; margin-top: 18px; }
.sd-progress { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.1em; margin: 4px 0 14px; }
.sd-field { margin-bottom: 14px; }
.sd-field label {
  display: block; font-family: var(--mono); font-size: 11.5px;
  color: var(--text-dim); letter-spacing: 0.04em; margin-bottom: 5px;
}
.sd-field label .req { color: var(--amber); }
.sd-field label .opt { color: var(--text-faint); }
.sd-field input, .sd-field select {
  width: 100%; font-family: var(--mono); font-size: 13px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-bright);
  border-radius: 4px; padding: 9px 12px;
}
.sd-field input::placeholder { color: var(--text-faint); }
.sd-field input:focus, .sd-field select:focus { outline: none; border-color: var(--amber); }
.sd-field.err input, .sd-field.err select { border-color: var(--danger); }
.sd-field .errmsg { display: none; font-family: var(--mono); font-size: 10.5px; color: var(--danger); margin-top: 4px; }
.sd-field.err .errmsg { display: block; }
.sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sd-submit {
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  background: linear-gradient(180deg, var(--amber-bright), var(--amber)); color: #1a1408;
  border: none; border-radius: 5px; padding: 11px 26px; cursor: pointer; margin-top: 6px;
}
.sd-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.sd-note { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); margin: 10px 0 0; }
.sd-note a { color: var(--text-faint); text-decoration: underline; text-underline-offset: 2px; }
.sd-success { display: none; }
.sd-success.on { display: block; }
.sd-success .chk {
  display: inline-flex; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(63,178,127,0.15); border: 1px solid var(--live-green); color: var(--live-green);
  align-items: center; justify-content: center; font-size: 18px; margin-bottom: 12px;
}
.sd-success h5 { color: var(--live-green); }

@media (prefers-reduced-motion: reduce) {
  .sd-form { transition: none; }
  .prow { transition: none; }
}
@media (max-width: 600px) {
  .sd-grid { grid-template-columns: 1fr; }
  .prow { flex-direction: column; align-items: flex-start; gap: 6px; }
  .prow .pdetail { margin-left: 0; text-align: left; }
  .lane-strip { justify-content: flex-start; }
  .lane-free { width: 100%; }
  .scout-panel { padding: 18px 16px 20px; }
}

/* ================================================================== */
/* TRADE-FLOW VECTOR ENGINE (2026-07-17 merge)                          */
/* Replaces the lane-strip + coverage-matrix visual layer above with a  */
/* single radar-tab selector, SVG lane map, curation funnel, and        */
/* specimen card. Every color below reuses an existing :root token --   */
/* no new colors introduced. .lane-strip/.lane-chip/.pmatrix/.prow      */
/* above are left in place, unused -- dead CSS, zero runtime cost,      */
/* safer than deleting something a stray selector might still hit.     */
/* ================================================================== */

.radar-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.radar-tabs .tab {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em;
  background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--border-bright);
  padding: 8px 16px; border-radius: 20px; cursor: pointer;
  transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}
.radar-tabs .tab .hs { opacity: 0.6; font-size: 11px; margin-left: 4px; }
.radar-tabs .tab:hover { border-color: var(--amber); color: var(--text); }
.radar-tabs .tab.active { border-color: var(--amber); color: var(--amber); background: rgba(255,176,32,0.08); }

/* F5: the one deliberate, scoped exception to the site's 768px column --
   the radar+sidebar reads cramped inside 720px of content width. Pulls
   out to 1040px on viewports that can afford it (>=1088px: 768px .wrap
   + enough headroom either side), calculated relative to the section's
   own current width rather than a hardcoded viewport number, so it
   degrades gracefully rather than overflowing on anything narrower.
   Below 1088px it simply renders at the normal 720px content width --
   tighter, never broken. */
/* 2026-07-17c: the map is now its own full-width block (see the HTML
   restructure comment) instead of the left half of a 1.5fr/1fr grid --
   this is what actually fixed the illegible port/lane labels (a real
   ~420px rendered width scaled an 800-unit viewBox to 0.53x; full-width
   at 720px, or 1040px on wide viewports via the breakout below, scales
   it to 0.9x-1.3x instead) and the baseline-mismatch complaint (nothing
   sits beside it anymore to be asymmetric with). */
.map-panel-full { margin: 22px 0; }
@media (min-width: 1088px) {
  .map-panel-full {
    max-width: 1040px;
    margin-left: calc(-1 * (1040px - 100%) / 2);
    margin-right: calc(-1 * (1040px - 100%) / 2);
  }
}

.panel { background: var(--bg-panel); border: 1px solid var(--border-bright); border-radius: 8px; padding: 20px; box-shadow: var(--shadow-panel); }
.panel-h2 { font-family: var(--mono); font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 14px; }

.map-panel { position: relative; padding: 0; overflow: hidden; }
.map-panel svg { display: block; width: 100%; height: auto; }
.lane { fill: none; stroke: var(--border-bright); stroke-width: 1.4; opacity: 0.35; transition: opacity 0.3s, stroke 0.3s; }
.lane.active { stroke: var(--amber); opacity: 0.9; stroke-width: 2; stroke-dasharray: 7 6; animation: laycan-dash 1.1s linear infinite; }
@keyframes laycan-dash { to { stroke-dashoffset: -26; } }
@media (prefers-reduced-motion: reduce) { .lane.active { animation: none; } }
.port-dot { fill: var(--text-dim); transition: fill 0.3s; }
.port-dot.active { fill: var(--amber-bright); }
.port-label { font-family: var(--mono); font-size: 11px; fill: var(--text-faint); letter-spacing: 0.04em; }
.port-label.active { fill: var(--text); }

.status-badge {
  position: absolute; top: 14px; left: 14px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px;
  display: flex; align-items: center; gap: 6px;
}
.status-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.status-badge.live { background: rgba(63,178,127,0.12); border: 1px solid var(--live-green); color: var(--live-green); }
.status-badge.live .dot { background: var(--live-green); box-shadow: 0 0 8px var(--live-green); }
.status-badge.gated { background: rgba(255,176,32,0.1); border: 1px solid var(--amber-dim); color: var(--amber-bright); }
.status-badge.gated .dot { background: var(--amber); }

/* 2026-07-17d: matches .map-panel-full's width exactly (same breakout,
   same max-width) so the unified specimen+scout card and the map above it
   read as one aligned pair, not two different widths stacked -- was
   capped at 600px, which made the card look narrower than the map it
   sits under. */
.specimen-scout-col { margin: 22px 0; }
@media (min-width: 1088px) {
  .specimen-scout-col {
    max-width: 1040px;
    margin-left: calc(-1 * (1040px - 100%) / 2);
    margin-right: calc(-1 * (1040px - 100%) / 2);
  }
}
.specimen-card { border: 1px solid var(--border-bright); border-radius: 8px; padding: 18px; background: var(--bg-panel-2); }
.specimen-illustrative {
  font-family: var(--mono); font-size: 9.5px; color: var(--amber-dim); letter-spacing: 0.05em;
  border: 1px dashed var(--amber-dim); border-radius: 3px; padding: 3px 8px; display: inline-block; margin-bottom: 12px;
}
/* Redaction bars (2026-07-17c) replace repeated "■" glyphs -- see
   renderMaskedName() in main.js. Flat edges (2px radius, not a pill),
   muted dark-gold gradient so it reads as an intentional security mark
   rather than a missing-glyph rendering glitch, sized in `ch` so the
   bar's width still communicates "this many letters redacted." */
.specimen-name-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; margin-bottom: 6px; }
.specimen-name-word { display: inline-flex; align-items: baseline; }
.redact-bar { display: inline-block; height: 0.68em; margin-left: 1px; background: linear-gradient(180deg, var(--amber-dim), #7a5d1f); border-radius: 2px; position: relative; top: 0.1em; }
.specimen-tags { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.specimen-tag { font-family: var(--mono); font-size: 9.5px; border-radius: 3px; padding: 2px 7px; letter-spacing: 0.04em; }
.specimen-tag.grade { background: rgba(255,176,32,0.12); color: var(--amber-bright); border: 1px solid var(--amber-dim); }
.specimen-tag.trigger { background: rgba(255,107,94,0.12); color: var(--danger); border: 1px solid rgba(255,107,94,0.4); }
.specimen-line { font-size: 13px; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 12px; }
.specimen-freight { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.specimen-freight .amt { font-family: var(--mono); font-size: 23px; font-weight: 700; color: var(--amber); }
.specimen-freight .calc { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }

.funnel-panel { margin-top: 20px; }
.funnel-stages { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.funnel-stage { flex: 1; min-width: 140px; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; text-align: center; }
.funnel-stage.dim { opacity: 0.55; }
.funnel-num { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--text); }
.funnel-num.amber { color: var(--amber); }
.funnel-label { font-size: 11px; color: var(--text-faint); margin-top: 4px; line-height: 1.3; }
.funnel-arrow { color: var(--text-faint); font-size: 16px; flex-shrink: 0; }
.funnel-source { font-family: var(--mono); font-size: 10px; color: var(--text-faint); margin-top: 10px; }

/* The relocated qualifier form lives in a ~600px-max column, comfortable
   but still narrower than the full page width -- force its 2-col grids
   to stack regardless of viewport, or "Work email / Company" renders
   cramped even where the site's own >600px breakpoint would otherwise
   keep them side by side. */
/* 2026-07-17d: specimen card + qualifier form merged into ONE panel (was
   two separately-boxed .panel elements sitting adjacent -- read as
   detached). .scout-panel keeps its class/ID (untouched JS hooks -- every
   getElementById call in main.js still resolves the same elements) but
   loses its own border/background/shadow/radius here, replaced by a
   single top divider so it reads as a continuation of the same card
   instead of a second box. */
.unified-specimen-scout .scout-panel {
  margin-top: 20px; padding: 20px 0 0; border: none; border-top: 1px solid var(--border);
  background: transparent; box-shadow: none; border-radius: 0;
}
/* Now that the unified card matches the map's full width instead of a
   600px cap, the form has room to breathe -- the old forced single-column
   override (needed when this lived in a ~300px sidebar) no longer applies;
   letting .sd-grid's own 2-column layout stand gives Email/Company and
   Role/Business-type their originally-designed side-by-side pairing back. */
@media (max-width: 560px) {
  .unified-specimen-scout .sd-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .radar-tabs .tab { font-size: 11.5px; padding: 7px 12px; }
  .specimen-freight .amt { font-size: 20px; }
}

/* ================================================================== */
/* VISUAL POLISH PASS (2026-07-17b) -- fixes 1-4 below correspond to    */
/* the founder's post-merge visual review.                              */
/* ================================================================== */

/* Fix 1: the map-panel void. Primary fix is the PORTS coordinate spread
   in js/main.js (now uses y=40-360 of the 400-tall viewBox, ~80% of it,
   instead of the original y=78-288 cluster, ~53%). This is the belt-and-
   suspenders half: without an explicit aspect-ratio the panel's rendered
   height was whatever height:auto computed from a *possibly-cached*
   intrinsic size before the SVG's viewBox-derived ratio applied, which on
   some load orders could still show a flash of dead space below the
   content. Locking the box to the SVG's own 800:400 (2:1) ratio removes
   that ambiguity outright, independent of the coordinate fix. */
.map-panel { aspect-ratio: 2 / 1; }
.map-panel svg { height: 100%; }

/* Fix 2: premium full-width CTA button, replacing the plain inline text
   link. Monospace per the brief (not .sd-cta's --sans), full-width block,
   hover lift -- distinct enough from .sd-cta that this is its own class
   rather than a modifier, since .sd-cta is used elsewhere (scout-panel's
   own buttons) with different sizing assumptions this shouldn't inherit. */
.free-sample-cta {
  display: block; width: 100%; text-align: center; box-sizing: border-box;
  font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: 0.02em;
  background: linear-gradient(180deg, var(--amber-bright), var(--amber)); color: #1a1408;
  border: none; border-radius: 6px; padding: 14px 20px; margin-top: 10px;
  text-decoration: none; cursor: pointer;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.free-sample-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(255,176,32,0.55); }
.free-sample-cta:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .free-sample-cta { transition: none; } .free-sample-cta:hover { transform: none; } }

/* Fix 3: specimen card label/value contrast. Explicit classes (was a bare
   span + .specimen-line b descendant selector) so the hierarchy is
   guaranteed regardless of markup order, and pushed further apart than
   the original text-dim/text pairing: labels drop to text-faint (the
   dimmest token in the palette), values go to literal white + heavier
   weight -- the two ends of the contrast range instead of two shades
   that were both "light text on dark," which read as too close together
   at a glance. */
.specimen-label { color: var(--text-faint); flex-shrink: 0; }
/* Fix 3 (2026-07-17c): "$2,200/TEU · USWC" was wrapping onto a second
   line -- the value had no protection from flex-shrink's default text
   wrap once label+value together exceeded the row's width. nowrap keeps
   it one unbroken string; the row itself falls back to stacking on very
   narrow phones (below) rather than ever compressing label+value into
   each other. */
.specimen-value { color: #fff; font-weight: 700; text-align: right; white-space: nowrap; }
@media (max-width: 420px) {
  .specimen-line { flex-direction: column; gap: 2px; }
  .specimen-value { text-align: left; }
}

/* Fix 4: seamless sidebar state swap. display:none<->block can't be
   transitioned, but a CSS animation DOES replay whenever an element goes
   from display:none to visible -- no JS timing/orchestration needed, and
   it only fires on a genuine hidden->shown flip (re-setting the same
   already-visible state, e.g. clicking between two non-furniture tabs in
   a row, does not re-trigger it). Fade + gentle rise reads as "slides
   into place" without the fragility of animating actual height. */
#scoutStateFurn, #scoutStateScout { animation: laycan-panel-in 0.3s var(--ease-out); }
@keyframes laycan-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #scoutStateFurn, #scoutStateScout { animation: none; } }
/* Consistent padding/height rhythm between the two states so the swap
   doesn't also jump from a spacing mismatch on top of the content-length
   difference -- both states share the same h5 + copy vertical rhythm via
   .scout-panel's own padding; only their own internal spacing needed
   normalizing. */
#scoutStateFurn h5, #scoutStateScout h5 { margin-bottom: 10px; }
#scoutStateFurn .scout-copy, #scoutStateScout .scout-copy { margin-bottom: 14px; }