/* ==========================================================================
   TP Scout — Landing site styles
   "Calm Authority" design language. Tokens are copied VERBATIM from the
   product app (frontend/src/app/globals.css): the `:root` block mirrors the
   app's light theme, `.showcase-dark` mirrors `:root.dark`. The page itself
   is light-only; dark is a fixed treatment reserved for product-showcase
   surfaces (hero proof card, workspace band, footer) — not a user toggle.
   Same class API as before — main.js hooks (.is-open, .is-visible,
   .is-hidden, [aria-invalid]) unchanged.
   ========================================================================== */

/* ---------- Tokens — app light theme (globals.css :root) ---------- */

:root {
  --bg-void: #f6f4ee;
  --bg-base: #fcfbf8;
  --bg-surface: #ffffff;
  --bg-elevated: #f8f6f1;

  --text-primary: #0b1f2e;
  --text-secondary: #40576a;
  --text-muted: #5f6f7c;
  --text-inverted: #ffffff;

  --navy: #071c2c;
  --navy-hover: #0d2b40;
  --gold: #7a5e26;
  --gold-light: #d5b27e;
  --gold-pale: #ead5b6;
  --gold-dim: rgba(213, 178, 126, 0.22);
  --auth-glow: rgba(213, 178, 126, 0.28);

  --border-faint: rgba(7, 28, 44, 0.06);
  --border-subtle: rgba(7, 28, 44, 0.10);
  --border-default: rgba(7, 28, 44, 0.15);
  --border-strong: rgba(7, 28, 44, 0.30);
  --border-gold: rgba(122, 94, 38, 0.45);

  --success: #2e6a58;
  --error: #8a3c3c;
  --processing: #3a6285;

  --shadow-sm: 0 2px 8px rgba(7, 28, 44, 0.06);
  --shadow-md: 0 12px 34px rgba(7, 28, 44, 0.09);
  --shadow-lg: 0 24px 70px rgba(7, 28, 44, 0.12);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;

  --t-fast: 110ms ease;
  --t-base: 200ms ease;
  --t-slow: 340ms ease;

  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;

  --max: 1240px;
  --max-wide: 1600px;

  /* Nav CTA — the one warm, high-contrast action in the header. */
  --cta-amber: #e08a3c;

  /* Height of the sticky header. Every in-page anchor is offset by it, or the
     header covers the top of the section it jumped to. main.js re-measures the
     real height on load and on resize — the nav wraps at some widths, so a
     fixed number here is only the pre-JS starting guess. */
  --nav-h: 93px;
}

/* ---------- Dark showcase scope — app dark theme (globals.css :root.dark).
   Any component built on the tokens above flips automatically inside it. */

.showcase-dark {
  --bg-void: #0a0f14;
  --bg-base: #0e151c;
  --bg-surface: #16202a;
  --bg-elevated: #202c37;

  --text-primary: #f5f3ee;
  --text-secondary: #c7c5bc;
  --text-muted: #8f9aa2;
  --text-inverted: #131a21;

  --gold: #d5b27e;
  --gold-light: #e8d3ab;
  --gold-dim: rgba(213, 178, 126, 0.14);
  --auth-glow: rgba(213, 178, 126, 0.16);

  --border-faint: rgba(245, 243, 238, 0.07);
  --border-subtle: rgba(245, 243, 238, 0.12);
  --border-default: rgba(245, 243, 238, 0.17);
  --border-strong: rgba(245, 243, 238, 0.30);
  --border-gold: rgba(213, 178, 126, 0.45);

  --success: #5fa88d;
  --error: #d08a8a;
  --processing: #7aa7cc;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55);

  color: var(--text-primary);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }
/* scroll-padding-top stops every anchor jump under the sticky header, and the
   extra 28px keeps the section from sitting flush against its underside. It
   covers the nav links, the skip links, and a URL opened with a #hash alike. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 28px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }

h1, h2, h3, h4 { margin-top: 0; }

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

/* Skip link — keyboard users jump past the nav to content. */
.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--navy);
  color: var(--text-inverted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Parked off-screen via transform so the reveal is compositor-only. */
  transform: translateY(-72px);
  transition: transform var(--t-base);
}
.skip-link:focus { transform: none; }
/* Keyboard-only, but it is still a touch-sized target when focused. */
.skip-link { min-height: 44px; display: inline-flex; align-items: center; }

.container {
  width: min(calc(100% - 48px), var(--max));
  margin-inline: auto;
}

/* Hero only — the app screenshot needs more room than the reading column. */
.container--wide { max-width: var(--max-wide); width: min(calc(100% - 48px), var(--max-wide)); }

.section { padding: 72px 0; }

/* Grid `fr` tracks refuse to shrink below an item's min-content, and the
   mock-UI cards contain nowrap text — without this the hero/showcase columns
   blow out past narrow viewports. min-width:0 lets tracks shrink so the
   inner ellipsis rules can take over. */
.hero-grid > *,
.showcase-grid > *,
.ui-body > *,
.contact-grid > *,
.file-row > *,
.footer-top > * { min-width: 0; }

/* Mono kicker — mirrors the app's uppercase label style (.form-label). */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.is-hidden { display: none !important; }

/* Scroll reveal (motion is causal, restrained) */
.reveal { opacity: 0; transform: translateY(14px); transition: 0.55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-links a:not(.btn)::after { transition: none; }
  .reveal { transition: none; transform: none; opacity: 1; }
  .pill--proc::before { animation: none; }
  .skip-link { transition: none; }
}

/* ---------- Buttons — the app's Button: mono, uppercase, tracked ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 14px 22px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-fast);
}

.btn--primary {
  background: var(--navy);
  color: var(--text-inverted);
  box-shadow: inset 0 0 0 1px rgba(232, 207, 155, 0.35);
}
.btn--primary:hover { transform: translateY(-1px); background: var(--navy-hover); }

.btn--ghost { border-color: var(--border-strong); background: transparent; color: var(--text-primary); }
.btn--ghost:hover { border-color: var(--navy); background: var(--bg-elevated); }

.btn--sm { padding: 11px 16px; font-size: 11px; }
.btn--block { width: 100%; }

/* Header action — squarer and warmer than .btn--primary so it stays the only
   filled control in the header, next to the bare text links. */
.btn--nav {
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  background: var(--cta-amber);
  color: var(--navy);
  border: 2px solid var(--navy);
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
}
.btn--nav:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Nav ---------- */

/* Plain header: one flat paper surface, with no image, gradient or blur
   behind it. The brand lockup and the links sit straight on it. */
.nav {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-inner {
  position: relative;
  min-height: 92px;
  padding-block: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/* Brand lockup — mirrors the app's BrandMark: Inter, -0.03em, Scout heavier.
   The bar is plain, so the mark needs no plate or border of its own. */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.03em;
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 4px 10px 4px 8px;
}

.nav-brand img { width: 46px; height: 54px; object-fit: contain; flex: 0 0 auto; }
.nav-brand strong { font-weight: 800; }

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
  font-size: 17px;
  font-weight: 600;
}

/* Links are bare text on the paper bar, in the same ink as the brand lockup.
   Hover draws a gold rule underneath, wiped in from the left, which echoes the
   demo button without adding a second filled control. */
.nav-links a:not(.btn) {
  position: relative;
  color: var(--text-primary);
  padding: 8px 13px;
  transition: color var(--t-base);
}

/* Inset by the link padding so the rule spans the word, not the hit area. */
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base);
}

.nav-links a:not(.btn):hover { color: var(--gold); }
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }

/* Keyboard focus gets the same rule, so the two states stay consistent. */
.nav-links a:not(.btn):focus-visible::after { transform: scaleX(1); }

/* Between two links the whitespace is the 10px flex gap plus 13px of link
   padding on each side. The demo button carries no such padding, so it takes
   one link's worth back as margin to sit at the same distance from Contact. */
.nav-links .btn--nav { margin-left: 13px; }

.nav-cta { display: none; align-items: center; gap: 12px; margin-left: auto; position: relative; }

.nav-burger {
  display: none;
  border: 0;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 11px;
}

/* ---------- Hero — the login brand panel treatment: elevated paper,
   radial gold glow, faint dot grid ---------- */

.hero {
  padding: 92px 0 84px;
  position: relative;
  overflow: hidden;
  background: var(--bg-elevated);
}

/* Centred variant — one reading column, then the app screenshot full-bleed
   under it. Used on the landing hero; the split .hero-grid stays for reuse. */
.hero--centered { padding: 64px 0 34px; text-align: center; }

/* Eyebrow sits centred in the gap between the header and the headline. */
.hero--centered .eyebrow { margin-bottom: 60px; }

.hero-inner { position: relative; z-index: 1; }

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto 40%;
  height: 560px;
  background: radial-gradient(circle, var(--auth-glow), transparent 62%);
  pointer-events: none;
}

/* The centred hero glow is symmetric rather than offset to the visual. */
.hero--centered::before {
  inset: -24% 20% auto 20%;
  height: 640px;
  background: radial-gradient(circle, rgba(213, 178, 126, 0.30), transparent 62%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--border-faint) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Headline pattern from the login page: tight main clause + gold italic. */
.hero-title {
  font-size: clamp(42px, 5.4vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 700;
  margin-bottom: 26px;
}

/* 16ch keeps the centred headline to three balanced lines at every size. */
.hero--centered .hero-title {
  font-size: clamp(42px, 5.2vw, 68px);
  line-height: 1.03;
  max-width: 16ch;
  margin: 0 auto 36px;
}

.hero-lead {
  margin: 0 auto;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 640px;
}

/* Two supporting notes, rule-topped. The first carries the gold rule to mark
   it as the argument; the second is the consequence. */
.hero-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  max-width: 940px;
  margin: 60px auto 0;
  text-align: left;
}

.hero-note {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
  border-top: 2px solid var(--border-subtle);
  padding-top: 20px;
}

.hero-note--gold { border-top-color: var(--border-gold); }

.accent-italic { color: var(--gold); font-style: italic; font-weight: 600; }

.hero-sub {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 0 6px;
}

.hero-sub--stacked {
  display: grid;
  gap: 12px;
  font-size: clamp(16px, 1.65vw, 19px);
}

.hero-sub--stacked p { margin: 0; }

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.hero--centered .hero-actions { justify-content: center; margin-top: 64px; }

.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.hero-trust svg { color: var(--success); flex: 0 0 auto; }

.hero--centered .hero-trust {
  gap: 9px;
  margin: 24px 0 0;
  line-height: 1.5;
  text-align: left;
}

/* Product screenshot. The dark plate stops the frame flashing paper-white
   while the (large) PNG decodes. */
/* The screenshot is the reward for scrolling, so it starts below the fold on
   desktop. The hero copy ends around 845px, so subtracting 755px from the
   viewport height leaves the frame ~90px past the fold at any window height;
   the 96px floor covers short windows. Mobile overrides it further down. */
.hero-figure {
  margin: max(96px, calc(100vh - 755px)) auto 0;
  width: 100%;
  max-width: var(--max-wide);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(7, 28, 44, 0.14);
  box-shadow: 0 30px 80px rgba(7, 28, 44, 0.18);
  background: #0a0f14;
}

/* The whole figure is the zoom trigger, so it is a button that keeps the
   image's own box — no padding, no chrome of its own. */
.hero-figure-btn {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
}

.hero-app-shot { display: block; width: 100%; height: auto; }

/* Affordance — without it the screenshot reads as a flat picture. */
.hero-figure-cue {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(10, 15, 20, 0.78);
  border: 1px solid rgba(245, 243, 238, 0.28);
  color: #f5f3ee;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--t-base), border-color var(--t-base);
}

.hero-figure-btn:hover .hero-figure-cue {
  background: rgba(10, 15, 20, 0.92);
  border-color: rgba(232, 207, 155, 0.7);
}

/* ---------- Enlarged screenshot ---------- */

/* [hidden] already gives display:none, so this rule only ever applies when the
   dialog is open — no specificity fight with the attribute. */
.lightbox:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(7, 28, 44, 0.94);
}

body.has-lightbox { overflow: hidden; }

/* The pan surface. overscroll-behavior stops a swipe past the edge from
   scrolling the page underneath. */
.lightbox-pan {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  padding: 64px 16px 60px;
  cursor: grab;
}

.lightbox-pan.is-grabbing { cursor: grabbing; }

/* margin:auto centres the image and, unlike justify-content, still lets the
   overflowing left edge be scrolled to. Height is capped to the viewport so
   the panning the reader needs is side to side, across the table. */
.lightbox-img {
  margin: auto;
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  /* Leaves more than the 64+60 padding so the image can never overflow
     vertically — panning stays purely side to side. */
  max-height: calc(100vh - 148px);
  max-height: calc(100dvh - 148px);
  border-radius: 10px;
}

.lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(245, 243, 238, 0.35);
  background: rgba(10, 15, 20, 0.78);
  color: #f5f3ee;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base);
}

.lightbox-close:hover { background: #0a0f14; border-color: rgba(232, 207, 155, 0.8); }

.lightbox-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(10, 15, 20, 0.72);
  color: var(--gold-pale);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--t-slow);
}

.lightbox-hint.is-faded { opacity: 0; }

/* Phone in landscape. Fitting the height here would shrink the table to a
   third of its size — unreadable, which defeats the whole dialog. Show it at
   full size instead and let the reader pan on both axes. */
@media (max-height: 560px) {
  .lightbox-img { max-height: none; }
  .lightbox-pan { padding: 56px 16px 48px; }
  .lightbox-hint { display: none; }
}

.hero-visual {
  margin: 0;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 5;
  justify-self: end;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

.hero-evidence-visual {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ---------- Hero proof card — the product's dark queue, drawn in CSS.
   Sits inside .showcase-dark, so every var below is the dark-theme value. */

.proof {
  background: var(--bg-base);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: 26px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.proof::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto 25%;
  height: 420px;
  background: radial-gradient(circle, var(--gold-dim), transparent 63%);
  pointer-events: none;
}

.proof-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  position: relative;
}

.proof-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px 11px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.proof-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.proof-progress { display: grid; gap: 7px; justify-items: end; }

.proof-progress .lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.proof-progress .lbl b { color: var(--text-primary); font-weight: 600; }

.proof-track {
  width: 150px;
  height: 5px;
  border-radius: 5px;
  background: var(--bg-elevated);
  overflow: hidden;
}

.proof-track i {
  display: block;
  height: 100%;
  width: 97%;
  border-radius: 5px;
  background: var(--gold);
}

.proof-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg);
  position: relative;
}

.proof-row + .proof-row { margin-top: 9px; }

.proof-thumb {
  width: 52px;
  height: 38px;
  border-radius: 7px;
  flex: 0 0 auto;
  background:
    linear-gradient(180deg, var(--border-subtle) 0%, var(--border-subtle) 30%, transparent 30%),
    var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}

.proof-meta { min-width: 0; flex: 1; }

.proof-name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proof-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proof-site { color: var(--gold-light); }

.proof-foot {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-faint);
  position: relative;
}

.proof-foot .sig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.proof-foot .sig svg { color: var(--success); }

/* Status pills — shared by proof card and workspace window. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: 0 0 auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  color: var(--text-secondary);
}

.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.pill--ok::before { background: var(--success); }
.pill--proc::before { background: var(--gold); animation: pulse 1.6s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ---------- Bands & section heads ---------- */

.band { background: var(--bg-void); position: relative; }

.section-head { max-width: 820px; margin-bottom: 60px; }
.section-head--center { margin-inline: auto; text-align: center; }

.section-title {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
  font-weight: 700;
}

.section-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* ---------- How it works — separate step cards ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.step {
  padding: 24px 24px 26px;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.step:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 12px;
}

.step h3 {
  font-size: 18.5px;
  letter-spacing: -0.02em;
  margin: 0;
}

.step p { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); margin: 0; }

/* ---------- Workspace showcase — the page's one full dark band ---------- */

.showcase { padding: 112px 0; background: var(--bg-base); }

.showcase-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.showcase .eyebrow { color: var(--gold); }

.showcase-copy .section-title { color: var(--text-primary); }
.showcase-copy .section-lead { color: var(--text-secondary); }

.showcase-points {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: grid;
  gap: 14px;
}

.showcase-points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--text-secondary);
}

.showcase-points svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--success);
}

/* Shared dark product-mock shell: browser-chrome window and export-file card. */
.ui-window,
.file-mock {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.ui-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.ui-chrome i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}

.ui-url {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-body {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  min-height: 330px;
}

.ui-list {
  border-right: 1px solid var(--border-subtle);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ui-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-item::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex: 0 0 auto;
}

.ui-item--proc::before { background: var(--gold); }

.ui-item--active {
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
  font-weight: 600;
}

.ui-detail { padding: 20px 22px; min-width: 0; }

.ui-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.ui-name { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }

.ui-field { margin-bottom: 16px; }

.ui-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.ui-value { font-size: 13.5px; }
.ui-value--gold { color: var(--gold-light); }

.ui-field p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  border-left: 2px solid var(--border-gold);
  padding-left: 12px;
}

.ui-shots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.ui-shots i {
  width: 56px;
  height: 40px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, var(--border-subtle) 0%, var(--border-subtle) 28%, transparent 28%),
    var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}

.ui-shots-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-left: 4px;
}

.ui-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Non-interactive mock buttons (aria-hidden context) — style only. */
.ui-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ui-btn--gold {
  background: var(--gold-light);
  border-color: transparent;
  color: var(--text-inverted);
  font-weight: 600;
}

/* ---------- Features ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.audience-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 980px;
  margin-inline: auto;
}

/* Two cards only, so they can breathe more than the 3-up .feature-grid. */
.audience-grid .feature {
  border-radius: 20px;
  padding: 48px 44px 52px;
  display: flex;
  flex-direction: column;
}

.audience-grid .feature-icon { width: 52px; height: 52px; border-radius: 12px; margin-bottom: 36px; }
.audience-grid .feature h3 { font-size: 22px; margin-bottom: 14px; }
.audience-grid .feature p { font-size: 15.5px; line-height: 1.65; }

.feature {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 26px;
  background: var(--bg-surface);
  transition: box-shadow var(--t-base), border-color var(--t-base);
}

.feature:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  color: var(--navy);
  margin-bottom: 22px;
}

.feature h3 {
  font-size: 20px;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.feature p { margin: 0; font-size: 14.5px; color: var(--text-muted); }

/* ---------- Trust band ---------- */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 54px;
}

.trust-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 24px;
  background: var(--bg-surface);
}

.trust-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.trust-card h3 svg { color: var(--gold); flex: 0 0 auto; }

.trust-card p { margin: 0; font-size: 14px; color: var(--text-muted); }

/* ---------- CTA band — gold is scarce: reserved for this action ---------- */

.cta { padding-top: 0; position: relative; }

.cta-inner {
  background: var(--navy);
  color: #fff;
  border-radius: 26px;
  padding: 72px 52px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Gold glow across the card. Kept as a wide, low-opacity ellipse that reaches
   full transparency well inside the card, so there is no visible edge. */
.cta-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 85% at 60% -10%,
    rgba(213, 178, 126, 0.12) 0%,
    rgba(213, 178, 126, 0.085) 22%,
    rgba(213, 178, 126, 0.05) 44%,
    rgba(213, 178, 126, 0.022) 62%,
    rgba(213, 178, 126, 0.006) 78%,
    rgba(213, 178, 126, 0) 92%);
  pointer-events: none;
}

.cta-inner h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 14px;
  font-weight: 700;
  position: relative;
}

.cta-inner p {
  color: #bdc9d1;
  font-size: clamp(16px, 1.8vw, 20px);
  margin: 0 auto;
  max-width: 620px;
  position: relative;
}

.cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
  position: relative;
}

.cta .btn--primary { background: var(--gold-light); color: var(--navy); box-shadow: none; }
.cta .btn--primary:hover { background: var(--gold-pale); }
.cta .btn--ghost { border-color: #536b7a; color: #fff; }
.cta .btn--ghost:hover { border-color: #8aa0af; background: rgba(255, 255, 255, 0.06); }

/* ---------- Footer — dark tokens, dark logo variant ---------- */

.footer {
  padding: 48px 0 24px;
  background: var(--bg-void);
  color: var(--text-primary);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
}

.footer-brand img {
  width: 40px;
  height: 46px;
  object-fit: contain;
  margin-bottom: 12px;
}

.footer-brand .brand-word {
  display: block;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.footer-brand .brand-word strong { font-weight: 800; }

.footer-brand p {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 420px;
  margin: 0;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* min-height, not padding, so the touch target does not push the columns
   apart visually. Desktop uses a pointer, so 36px is enough there; the
   mobile block below restores the 44px target. */
.footer-col a {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: var(--text-secondary);
  font-size: 14px;
}

.footer-col a:hover { color: var(--gold-light); }

.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding-top: 18px;
  margin-top: 34px;
  color: var(--text-muted);
  font-size: 12px;
}

/* ---------- Contact page ---------- */

.contact-main {
  position: relative;
  padding: 88px 0 112px;
  background: var(--bg-elevated);
  min-height: 62vh;
  overflow: hidden;
}

.contact-main::before {
  content: "";
  position: absolute;
  inset: -20% auto auto -10%;
  width: 60%;
  height: 520px;
  background: radial-gradient(circle, var(--auth-glow), transparent 62%);
  pointer-events: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: start;
  position: relative;
}

.contact-brand h1 {
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 700;
  margin-bottom: 22px;
}

.contact-brand .lead {
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 34px;
}

.contact-reasons {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: grid;
  gap: 14px;
}

.contact-reasons li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--text-secondary);
}

.contact-reasons svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--gold);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  padding: 3px;
}

.contact-direct {
  border-top: 1px solid var(--border-default);
  padding-top: 20px;
  max-width: 380px;
}

.contact-direct .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.contact-direct .note { font-size: 14px; color: var(--text-muted); }

.text-link {
  color: var(--gold);
  font-weight: 600;
}

.text-link:hover { color: var(--text-primary); }

/* ---------- Form card — inputs mirror the app's .form-input ---------- */

.form-card {
  border: 1px solid var(--border-default);
  border-radius: 20px;
  padding: 30px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.form-card h2 {
  font-size: 26px;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.form-intro { font-size: 13px; color: var(--text-muted); margin: 0 0 22px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field { display: grid; gap: 8px; margin-bottom: 18px; }

/* App .form-label: small, uppercase, tracked. */
.field label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.field label .opt {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.02em;
}

.input,
.textarea {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  background: var(--bg-void);
  color: var(--text-primary);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.textarea { min-height: 150px; resize: vertical; }

/* App focus ring: gold border + soft gold halo. */
.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--border-gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
  background: var(--bg-surface);
}

.input::placeholder,
.textarea::placeholder { color: var(--text-muted); opacity: 0.55; }

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--error); }

.field-error {
  min-height: 16px;
  margin: 0;
  font-size: 12px;
  color: var(--error);
}

.form-status {
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.form-status--error {
  background: rgba(138, 60, 60, 0.08);
  border: 1px solid rgba(138, 60, 60, 0.30);
  color: var(--error);
}

.form-fallback-link { font-weight: 700; text-decoration: underline; }

/* Honeypot — visually removed, still submittable by bots */
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.form-success { text-align: center; padding: 34px 10px 10px; }

.form-success .check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--success);
}

.form-success h3 {
  font-size: 24px;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.form-success p { color: var(--text-muted); margin: 0; }

/* ---------- Stat band — factual figures, no invented metrics ---------- */

.stat-band {
  background: var(--bg-void);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 30px 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  border-left: 2px solid var(--border-gold);
}

.stat-num {
  font-family: var(--font-mono);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  /* --text-primary (not --navy) so the figures flip inside .showcase-dark. */
  color: var(--text-primary);
  line-height: 1;
}

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.35;
}

.stat-label span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--gold);
  margin-top: 3px;
}

/* ---------- Manual vs TP Scout comparison ---------- */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.compare-col {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 28px;
  background: var(--bg-surface);
}

.compare-col--scout {
  border-color: var(--border-gold);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}

.compare-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  margin-bottom: 22px;
}

.compare-tag--scout {
  color: var(--gold);
  border-color: var(--border-gold);
  background: var(--gold-dim);
}

/* Compare columns reuse .showcase-points; only spacing and icon semantics differ. */
.compare-col .showcase-points { margin: 0; }
.compare-col--manual li svg { color: var(--error); }
.compare-col--scout li svg { color: var(--success); }

/* ---------- Deliverable showcase — dark output mock on a light section ---------- */

/* Quieter bullet tone for the light band; the mock itself is .showcase-dark. */
.showcase-points--light li { color: var(--text-muted); }

.file-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

.file-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-name svg { color: var(--success); flex: 0 0 auto; }

.file-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 11px;
  background: var(--gold-dim);
  border: 1px solid var(--border-gold);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--gold-light);
}

.file-badge svg { color: var(--gold-light); }

.file-table { padding: 8px; }

.file-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.4fr 0.5fr;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.file-row + .file-row { margin-top: 2px; }

/* The head row is always :nth-child(1), so zebra striping never touches it. */
.file-row:nth-child(even) {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
}

/* min-width:0 comes from the shared grid-track rule near the top. */
.file-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-row--head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-faint);
  margin-bottom: 4px;
}

.file-col-rev { text-align: center; }
.file-site { color: var(--gold-light); font-family: var(--font-mono); font-size: 11px; }
/* Stands in for a website that could not be confirmed — not a site, so it is
   its own class rather than a modifier that undoes .file-site. */
.file-note, .file-sum--muted { color: var(--text-muted); font-style: italic; }

.file-tick {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--success);
  position: relative;
}
.file-tick::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 3.5px;
  height: 7px;
  border: solid var(--bg-surface);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.file-tick--pend { background: var(--border-strong); }
.file-tick--pend::after { display: none; }

/* ---------- Also-included capability grid ---------- */

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

.cap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.cap:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

.cap > svg {
  flex: 0 0 auto;
  color: var(--gold);
  margin-top: 1px;
}

.cap h3 {
  font-size: 15.5px;
  letter-spacing: -0.01em;
  margin: 0 0 5px;
}

.cap p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }

/* ---------- Responsive ---------- */

@media (max-width: 1120px) {
  .section, .showcase { padding: 60px 0; }

  .nav-links { display: none; }
  .nav-cta { display: flex; }
  .nav-burger { display: block; }

  /* Mobile menu: burger reveals the nav links as a dropdown panel. Anchored to
     the header's own height, which now wraps rather than being fixed. */
  .nav.is-open .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
    padding: 14px 24px 18px;
  }

  /* 44px minimum touch height (Apple HIG / Material) — the desktop chip
     padding lands at 32px, which is too small to hit reliably on a phone. */
  .nav.is-open .nav-links a:not(.btn) {
    padding: 0 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
    text-align: left;
  }
  .nav.is-open .nav-links .btn { margin: 6px 0 0; min-height: 44px; justify-content: center; }
  .nav-brand { min-height: 44px; }

  .hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .hero-visual {
    justify-self: center;
  }
  .hero-notes { gap: 28px; margin-top: 36px; }
  .hero-figure { margin-top: 44px; }
  .showcase-grid { grid-template-columns: 1fr; gap: 42px; }
  .feature-grid, .cap-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 26px 24px; }
  .steps, .steps--four { grid-template-columns: 1fr 1fr; }
  .audience-grid .feature { padding: 34px 30px 36px; }
  .audience-grid .feature-icon { margin-bottom: 24px; }
  .trust-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 1120px) {
  .container, .container--wide { width: min(calc(100% - 32px), var(--max)); }
  .nav-inner { min-height: 72px; padding-block: 10px; }
  .nav-brand { font-size: 21px; padding: 3px 9px 3px 7px; }
  .nav-brand img { width: 30px; height: 35px; }
  .nav-cta .btn { display: none; }
  .hero { padding: 58px 0 54px; }
  .hero--centered { padding: 26px 0 48px; }
  .hero--centered .eyebrow { margin-bottom: 28px; }
  .hero--centered .hero-actions { margin-top: 36px; }
  .hero-notes { grid-template-columns: 1fr; gap: 22px; }
  .hero-figure { margin-top: 34px; border-radius: 14px; }
  .section, .showcase { padding: 48px 0; }
  .steps, .steps--four { grid-template-columns: 1fr; }
  .feature-grid, .cap-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-col a { min-height: 44px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .cta-inner { padding: 30px 22px; border-radius: 20px; }
  .form-row { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  /* Drop the summary column so the decorative export mock stays legible.
     Addressed by class, not position, so reordering cells can't hide the
     wrong column. */
  .file-row { grid-template-columns: 1.3fr 1fr 0.5fr; }
  .file-sum { display: none; }
  .proof { padding: 20px; }
  .proof-head { flex-direction: column; align-items: flex-start; }
  .proof-progress { justify-items: start; }
  .ui-body { grid-template-columns: 1fr; }
  .ui-list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .ui-item { flex: 0 0 auto; }
}

/* Phone readability: some handsets report a layout viewport near 700-900px,
   which left the desktop type sizes physically tiny. Raise body copy to a
   16px floor and stack the reading columns at those widths. */
@media (max-width: 1120px) {
  /* Hold the layout to a phone-like reading measure so lines stay short even
     when the handset reports a wide layout viewport. */
  .container, .container--wide { width: min(calc(100% - 32px), 620px); margin-inline: auto; }
  body { font-size: 17px; line-height: 1.6; }
  .hero-lead { font-size: 18px; }
  .hero-note { font-size: 16px; line-height: 1.6; }
  .hero-trust { font-size: 15px; }
  .step p, .cap p, .ui-field p, .form-intro, .form-status { font-size: 16px; line-height: 1.6; }
  .feature p, .trust-card p, .footer-brand p, .contact-direct .note, .footer-col a { font-size: 16px; }
  .step h3 { font-size: 20px; }
  .btn--nav { font-size: 15px; }
  .btn { font-size: 14px; }
  .eyebrow, .step-num { font-size: 13px; }
  .field label { font-size: 14px; }
  .footer-col h4 { font-size: 13px; }
  .footer-bottom { font-size: 13px; }
  .stat-label { font-size: 15px; }
}

/* Phone-sized viewports get one more step up: 18px body copy, 17px supporting
   text, and a headline that stays inside three lines at 360px. */
@media (max-width: 560px) {
  body { font-size: 18px; line-height: 1.62; }
  .hero--centered .hero-title, .hero-title { font-size: clamp(34px, 10.4vw, 46px); }
  .hero-lead { font-size: 19px; }
  .hero-note { font-size: 17px; }
  .hero-trust { font-size: 16px; }
  .step p, .cap p, .ui-field p, .form-intro, .form-status,
  .feature p, .trust-card p, .footer-brand p, .contact-direct .note, .footer-col a { font-size: 17px; }
  .step h3 { font-size: 21px; }
  .btn { font-size: 15px; }
  .btn--nav { font-size: 16px; }
  .eyebrow, .step-num { font-size: 14px; }
  .field label { font-size: 15px; }
  .stat-label { font-size: 16px; }
  .footer-bottom, .footer-col h4 { font-size: 14px; }
}

/* The hero already closes with the trust line, so the How-it-works section
   opens tighter than the standard section rhythm. */
/* A warm gold-tinted band lifts the step sequence off the paper base and
   marks it as its own chapter. */
#how-it-works {
  padding-top: 40px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(213, 178, 126, 0.20) 0%, rgba(213, 178, 126, 0) 62%),
    linear-gradient(180deg, #f7f2e8 0%, #f9f6ef 100%);
  border-block: 1px solid var(--border-subtle);
}

#how-it-works .step-num { color: var(--gold); }

#who-its-for, .cta { background: var(--bg-elevated); overflow: hidden; }
#who-its-for { padding-top: 40px; }
/* The CTA card is the last thing before the footer, so it closes tight
   against it instead of carrying the standard section gap. */
.cta { padding: 0 0 24px; }

/* Same faint dot grid the hero carries. */
#who-its-for::after, .cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--border-faint) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}

#who-its-for > .container, .cta > .container { position: relative; z-index: 1; }

/* ---------- tpscout.eu only: split hero ----------
   Left: the problem and the offer. Right: what the tool does, row by row.
   Both sit in the first screen; the wide screenshot follows full width. */
.hero--split { padding: 56px 0 72px; }
.hero--split .hero-grid { align-items: start; gap: 56px; }
.hero--split .eyebrow { margin-bottom: 22px; }
.hero--split .hero-title { font-size: clamp(38px, 3.6vw, 54px); margin-bottom: 22px; }
.hero--split .hero-lead { margin: 0; max-width: 34em; }
.hero--split .hero-lead + .hero-lead { margin-top: 14px; }
.hero--split .hero-lead strong { color: var(--text-primary); font-weight: 600; }
.hero--split .hero-actions { margin-top: 32px; }

.does ol { margin: 0; padding: 0; list-style: none; }

.does {
  padding: 26px 28px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-top: 2px solid var(--border-gold);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(7, 28, 44, 0.08);
}

.does-title {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.does li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--border-subtle);
}

.does li:first-of-type { border-top: 0; }

.does-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  padding-top: 3px;
}

.does h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.3; }
.does p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); }

.hero--split .hero-figure { margin: 64px auto 0; }

@media (max-width: 1120px) {
  .hero--split { padding: 28px 0 48px; }
  .hero--split .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero--split .hero-figure { margin-top: 40px; }
  .does { padding: 20px 20px 6px; }
  .does p { font-size: 16px; }
}

/* ---------- tpscout.eu only: the whole page is dark ----------
   index.html puts .showcase-dark on <html>, so every token above takes its
   dark value. The rules below fix the parts built on --navy, which stays
   navy in the dark scope and would vanish against the dark background. */
html.showcase-dark { background: var(--bg-base); color-scheme: dark; }

.showcase-dark .skip-link { background: var(--gold-light); }

.showcase-dark .btn--primary { background: var(--gold-light); box-shadow: none; }
.showcase-dark .btn--primary:hover { background: var(--gold-pale); }
.showcase-dark .btn--ghost:hover { border-color: var(--gold-light); }

.showcase-dark .btn--nav { border-color: var(--cta-amber); color: var(--text-inverted); }
.showcase-dark .btn--nav:hover { background: transparent; color: var(--cta-amber); border-color: var(--cta-amber); }

.showcase-dark .feature-icon { color: var(--gold); }

.showcase-dark .does,
.showcase-dark .hero-figure { border-color: var(--border-default); box-shadow: var(--shadow-lg); }

.showcase-dark .footer { border-top: 1px solid var(--border-subtle); }