/* =====================================================================
   Clan-Man landing — "field map on the table" surface.
   The component shapes are lifted from the real app
   (web/app/globals.css + _components/ui.tsx) so the page reads as the
   same product: kraft chips, brick-red accents, Oswald /
   Archivo / JetBrains Mono. The hero war-table is recolored into the
   page's neutral grey family (see --card below) so it reads as the same
   material as the capability cards; only the map image and the one focal
   green squad keep their colour.
   ===================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- tokens (from the app's @theme) ---------- */
:root {
  --table: #3a2817;
  --panel: #f1e7cf;
  --raised: #eaddbd;
  --line: #cdbb93;
  --line-soft: #d8c79f;
  --ink: #2a2118;
  --ink-dim: #6f5f44;
  --ink-faint: #9a8a68;
  --label: #5a4a30;
  --brass: #9e463a;
  --brass-bright: #b5503f;
  --brass-dark: #7f382f;
  --parchment: #f6eed9;
  --parchment-chip: #e7d9bb;
  --parchment-field: #fbf6e9;
  --parchment-ink: #2c2419;
  --parchment-ink-dim: #7a6a4c;
  --grp-green: #5f7048;
  --grp-blue: #5b6b80;
  --grp-yellow: #b3892f;
  --grp-red: #9e463a;

  /* Landing chrome — cooler than the app's warm paper. Owner's call: white page,
     off-white grey cards + secondary buttons. The hero war-table is recolored to
     match these greys so it reads as the same material as the cap-cards. */
  --card: #f3f3f1;
  --card-border: #e4e3df;
  --ghost: #ededeb;
  --ghost-border: #dad9d5;
  --ghost-hover: #e3e2df;
  --ink-grey: #4b4a46;

  /* War-table greys — a small nested-surface scale for the hero mock. The frame
     itself uses --card; chips/squad-card/filled slots sit one step darker so they
     read as raised counters; dashed placeholders use the faint outline. */
  --wt-surface: #e8e7e3;
  --wt-border: #cfcec9;
  --wt-dash: #d2d1cc;
  --ink-grey-dim: #74736e;

  --font-display: "Oswald", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 40px);
}

/* ---------- the field-map surface ----------
   Parchment base, a warm overhead light, two ghosted "objective" rings,
   soft terrain tints in the corners, and a faint surveyed UTM grid tile
   (grid lines + a tick at each cell centre). This replaces the weak
   topo texture from the mockup. */
body {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  background-color: #ffffff;
  background-image:
    radial-gradient(circle at 84% 16%, transparent 82px, rgba(58, 60, 68, 0.05) 83px, rgba(58, 60, 68, 0.05) 84px, transparent 85px),
    radial-gradient(circle at 12% 82%, transparent 56px, rgba(58, 60, 68, 0.045) 57px, rgba(58, 60, 68, 0.045) 58px, transparent 59px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='%232b2c33' fill='none' stroke-width='1'%3E%3Cpath d='M0 0H120M0 0V120' stroke-opacity='0.05'/%3E%3Cpath d='M60 0V120M0 60H120' stroke-opacity='0.022'/%3E%3Cpath d='M55 60H65M60 55V65' stroke-opacity='0.11'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 120px 120px;
  background-repeat: no-repeat, no-repeat, repeat;
  min-height: 100vh;
}

.page { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--brass); color: #f6efdc; padding: 10px 16px; border-radius: 3px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- shared type helpers ---------- */
.wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  letter-spacing: 0.06em; text-transform: uppercase; color: #2b2013;
}

/* ---------- buttons (from ui.tsx Button) ---------- */
.btn {
  --_pad: 14px 26px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: var(--_pad); border-radius: 3px; border: 1px solid transparent;
  transition: background 0.15s ease, transform 0.05s ease; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-sm { --_pad: 8px 15px; font-size: 13px; letter-spacing: 0.08em; }
.btn-block { display: flex; width: 100%; }

.btn-primary {
  color: #f6efdc; background: var(--brass); border-color: var(--brass-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 8px rgba(0, 0, 0, 0.32);
}
.btn-primary:hover { background: #8a3c31; }

.btn-ghost {
  color: var(--ink-grey); background: var(--ghost); border-color: var(--ghost-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn-ghost:hover { background: var(--ghost-hover); }

/* ========================= NAV ========================= */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; gap: 16px;
}
.nav-links { display: flex; align-items: center; gap: 18px; }
.nav-links > a:not(.btn) {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--label); white-space: nowrap;
}
.nav-links > a:not(.btn):hover { color: var(--brass); }
/* The Log in button is a mobile-only stand-in: on phones the plain "Log in"
   text anchor is hidden (see the 620px query) and this replaces the demo CTA. */
.nav-login-mobile { display: none; }

/* ========================= HERO ========================= */
.hero {
  display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: center;
  padding: 40px 0 72px;
}
.hero-copy h1 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05; letter-spacing: 0.005em; color: #2b2013; text-wrap: balance;
}
.lede {
  margin-top: 20px; max-width: 480px; font-size: 16.5px; color: #5a5040;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.cta-note {
  margin-top: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint);
}

/* ---------- the animated war-table ---------- */
.hero-visual { display: flex; justify-content: center; }
.hero-scene {
  position: relative; width: 420px; height: 420px; flex: none;
  /* animation coordinates — tuned to the 420px scene, one place to nudge */
  --fly-start-left: 22px;  --fly-start-top: 56px;
  --fly-dx: 178px;         --fly-dy: 40px;
  /* cursor's mid-journey waypoint: from its start (gripping the chip) it travels
     down here to land on the green map chip (chip centre ~ 185/320px in the scene)
     and trigger the tooltip, then returns to the picker to loop. */
  --cur-map-dx: 75px;      --cur-map-dy: 205px;
}

.frame {
  position: absolute; inset: 0;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 5px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.24), 0 26px 52px -24px rgba(0, 0, 0, 0.55);
  padding: 14px;
  display: flex; flex-direction: column;
}
.frame-body { display: flex; gap: 14px; }
.col-signups { width: 128px; flex: none; }
.col-roster { flex: 1; min-width: 0; }
.col-label {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--grp-green);
}
.col-label.alt { color: var(--ink-grey-dim); }

/* the "stamped counter" chip (ui.tsx Chip), in the war-table's neutral grey */
.chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  background: var(--wt-surface); border: 1px solid var(--wt-border); border-radius: 2px;
  padding: 5px 9px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-grey);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.18);
}

.signup-slot { position: relative; margin-top: 10px; height: 28px; }
.chip-signup { position: absolute; inset: 0; }
.signup-empty {
  position: absolute; inset: 0; display: flex; align-items: center; padding-left: 9px;
  border: 1px dashed var(--wt-dash); border-radius: 2px; background: var(--card);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-grey-dim); opacity: 0;
}

/* squad card (SquadCard.tsx) — grey chrome, keeps the one focal green accent */
.squad-card {
  margin-top: 10px; background: var(--wt-surface); border: 1px solid var(--wt-border);
  border-left: 3px solid var(--grp-green); border-radius: 3px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
.squad-head {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  border-bottom: 1px solid var(--wt-border); padding: 7px 10px;
}
.squad-caret { color: var(--grp-green); font-size: 10px; }
.squad-name {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
}
.squad-meta { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-grey-dim); }
.squad-count { position: relative; margin-left: auto; width: 26px; height: 14px; }
.squad-count > span {
  position: absolute; right: 0; top: 0; font-family: var(--font-mono); font-size: 10.5px;
}
.count-a { color: var(--ink-grey-dim); }
.count-b { color: var(--grp-green); font-weight: 500; opacity: 0; }

.squad-slot { position: relative; margin: 8px; height: 26px; }
.slot-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--wt-dash); border-radius: 2px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-grey-dim);
}
.slot-filled {
  position: absolute; inset: 0; display: flex; align-items: center; padding-left: 8px;
  background: #deddd9; border: 1px solid var(--wt-border); border-radius: 2px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-grey);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); opacity: 0;
}

/* tacmap */
.frame-map {
  position: relative; margin-top: 12px; flex: 1; min-height: 168px;
  border: 1px solid var(--card-border); border-radius: 4px; overflow: hidden;
  background-image: url("/tacmap-builder.webp");
  background-size: 165%;
  background-position: 46% 39%;
}
/* squad chips placed on the real map — the app's rounded-square counters */
.map-chip {
  position: absolute; z-index: 4; width: 20px; height: 20px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  border: 1px solid rgba(30, 22, 12, 0.5); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.mc-green { background: var(--grp-green); color: #eaf0dc; left: 41%; top: 57%; } /* Dog — the one focal squad */
/* a dashed group zone around the Dog squad */
.map-zone {
  position: absolute; z-index: 3; left: 31%; top: 45%; width: 27%; height: 31%;
  border: 1.4px dashed rgba(95, 112, 72, 0.85); background: rgba(95, 112, 72, 0.16);
  border-radius: 3px;
}
.map-tip {
  position: absolute; left: 45%; top: 25%; z-index: 6; opacity: 0;
  background: #2c2419; border: 1px solid #1c160e; border-radius: 3px; padding: 6px 9px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.tip-name { font-family: var(--font-mono); font-size: 11px; color: #eae7e0; }
.tip-sub { font-family: var(--font-mono); font-size: 9.5px; color: #c3ad81; margin-top: 2px; }

/* the chip in flight + the cursor */
.fly-chip {
  position: absolute; z-index: 8;
  left: var(--fly-start-left); top: var(--fly-start-top);
  background: var(--wt-surface); border-color: var(--wt-border); opacity: 0;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* a standard arrow cursor (tip at top-left) that grabs the flying chip. It starts
   at the chip's grab corner, then runs its own round-trip tour (see cursorTour):
   drag to the squad slot, drop, travel down to the green map chip to trigger the
   tooltip, then return to the picker. It stays visible the whole loop (no seam
   fade), resting at the picker between passes. */
.fly-cursor {
  position: absolute; z-index: 9; pointer-events: none;
  left: calc(var(--fly-start-left) + 80px); top: calc(var(--fly-start-top) + 15px);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

/* ---------- the loop (7s), calm; only when motion is welcome ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fly-chip { animation: chipFly 7s infinite cubic-bezier(0.4, 0, 0.2, 1); }
  /* the cursor runs its own round-trip tour (drag, drop, hover the map chip, return) */
  .fly-cursor { animation: cursorTour 7s infinite cubic-bezier(0.4, 0, 0.2, 1); }
  .js-slot-filled { animation: slotFill 7s infinite ease-in-out; }
  .js-slot-empty { animation: slotEmpty 7s infinite ease-in-out; }
  .js-signup-chip { animation: srcLeave 7s infinite ease-in-out; }
  .js-signup-empty { animation: srcEmpty 7s infinite ease-in-out; }
  .js-count-a { animation: countGone 7s infinite ease-in-out; }
  .js-count-b { animation: countCome 7s infinite ease-in-out; }
  .js-map-dog { animation: dogAppear 7s infinite ease-in-out; }
  .js-map-tip { animation: tipShow 7s infinite ease-in-out; }
}

/* The sign-up chip lifts, glides to the squad slot, settles in, then fades as it
   is absorbed into the slot. The cursor carries on without it (see cursorTour). */
@keyframes chipFly {
  0%, 4% { transform: translate(0, 0) scale(1); opacity: 0; }
  8% { opacity: 1; transform: translate(0, -2px) scale(1.04); }
  30% { opacity: 1; transform: translate(var(--fly-dx), var(--fly-dy)) scale(1.04); }
  36% { opacity: 1; transform: translate(var(--fly-dx), var(--fly-dy)) scale(1); }
  40%, 100% { opacity: 0; transform: translate(var(--fly-dx), var(--fly-dy)) scale(1); }
}

/* The cursor's own round-trip: grip the sign-up, drag it to the squad slot (0->30%),
   drop it (dwell ~30-37%), travel down to the green map chip and land on it to
   trigger the hover tooltip (arrive ~53%, dwell to ~67%), then return to the picker
   (~88%) and rest there until the loop restarts. Start and end sit at the same point
   (translate 0,0) and opacity never changes, so the loop is seamless — no blink. */
@keyframes cursorTour {
  0% { transform: translate(0, 0); }
  8% { transform: translate(0, -2px); }
  30% { transform: translate(var(--fly-dx), var(--fly-dy)); }
  37% { transform: translate(var(--fly-dx), var(--fly-dy)); }
  53% { transform: translate(var(--cur-map-dx), var(--cur-map-dy)); }
  67% { transform: translate(var(--cur-map-dx), var(--cur-map-dy)); }
  88% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes slotFill {
  0%, 34% { opacity: 0; transform: scale(0.92); }
  40% { opacity: 1; transform: scale(1); }
  85% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes slotEmpty {
  0%, 35% { opacity: 1; }
  41% { opacity: 0; }
  87% { opacity: 0; }
  92%, 100% { opacity: 1; }
}
@keyframes srcLeave {
  0%, 5% { opacity: 1; }
  10% { opacity: 0; }
  88% { opacity: 0; }
  93%, 100% { opacity: 1; }
}
@keyframes srcEmpty {
  0%, 37% { opacity: 0; }
  44% { opacity: 1; }
  85% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes countGone {
  0%, 36% { opacity: 1; }
  42% { opacity: 0; }
  86% { opacity: 0; }
  92%, 100% { opacity: 1; }
}
@keyframes countCome {
  0%, 38% { opacity: 0; }
  44% { opacity: 1; }
  86% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
/* The squad chip settles onto the map with a soft green glow. */
@keyframes dogAppear {
  0%, 37% { opacity: 0; transform: scale(0.4); box-shadow: 0 0 0 0 rgba(95, 112, 72, 0); }
  44% { opacity: 1; transform: scale(1.18); box-shadow: 0 0 0 6px rgba(95, 112, 72, 0.3); }
  50% { transform: scale(1); }
  58% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(95, 112, 72, 0.16); }
  86% { opacity: 1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
  90%, 100% { opacity: 0; transform: scale(0.5); }
}
@keyframes tipShow {
  0%, 53% { opacity: 0; transform: translateY(4px); }
  59% { opacity: 1; transform: translateY(0); }
  68% { opacity: 1; }
  74%, 100% { opacity: 0; }
}

/* Reduced motion: no loop — just show the finished, placed state. */
@media (prefers-reduced-motion: reduce) {
  .fly-chip, .fly-cursor { display: none; }
  .js-signup-chip, .js-slot-empty, .js-count-a { opacity: 0; }
  .js-signup-empty, .js-slot-filled, .js-count-b, .js-map-dog, .js-map-tip { opacity: 1; }
}

/* ========================= CAPABILITIES ========================= */
.section-head {
  border-bottom: 1px solid rgba(45, 46, 52, 0.16); padding-bottom: 14px; margin-bottom: 26px;
}
.section-head h2 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 3vw, 22px);
  letter-spacing: 0.03em; text-transform: uppercase; color: #2b2013;
}
.capabilities { padding: 20px 0 30px; }
.cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.cap-card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 4px;
  padding: 22px 24px 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 16px 30px -22px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s ease;
}
.cap-card:hover { transform: translateY(-3px); }
.cap-top { display: flex; align-items: center; gap: 12px; }
.cap-icon { display: inline-flex; }
.cap-icon svg { width: 22px; height: 22px; }
.cap-card h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  letter-spacing: 0.02em; color: var(--parchment-ink);
}
.cap-card p { margin-top: 12px; font-size: 14.5px; line-height: 1.58; color: #5a5040; }

/* ========================= REQUEST ACCESS ========================= */
.request { padding: 56px 0 40px; }
.request-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 5px;
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 18px 34px -22px rgba(0, 0, 0, 0.45);
}
.request-intro h2 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 4vw, 34px);
  letter-spacing: 0.01em; text-transform: uppercase; color: #2b2013;
}
.request-intro p { margin-top: 14px; font-size: 15px; color: #5a5040; max-width: 42ch; }

.field { margin-bottom: 16px; }
.field label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--label);
}
.field .req { color: var(--brass); }
.field .opt { color: var(--ink-faint); font-size: 11px; letter-spacing: 0.04em; }
.field input {
  width: 100%; padding: 11px 12px;
  background: #ffffff; border: 1px solid var(--card-border); border-radius: 3px;
  font-family: var(--font-mono); font-size: 14px; color: var(--parchment-ink);
}
.field input::placeholder { color: #b3a583; }
.field input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 2px rgba(158, 70, 58, 0.18); }
.hint { margin-top: 6px; font-size: 12px; color: var(--ink-dim); }
.hint-warn { color: var(--brass); }

/* honeypot — visually gone and out of the tab order */
.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.form-foot { margin-top: 12px; font-size: 12.5px; color: var(--ink-dim); }
.form-foot a { color: var(--brass); text-decoration: underline; text-underline-offset: 2px; }
.form-error {
  margin-top: 12px; padding: 10px 12px; border-radius: 3px;
  background: rgba(158, 70, 58, 0.1); border: 1px solid rgba(158, 70, 58, 0.35);
  color: var(--brass-dark); font-size: 13.5px;
}

.request-done { text-align: center; padding: 20px 0; }
.request-done:focus { outline: none; }
.done-mark {
  width: 46px; height: 46px; margin: 0 auto 14px; display: grid; place-items: center;
  border-radius: 50%; background: #e9f0dc; border: 1px solid #9fb37e; color: var(--grp-green);
}
.done-mark svg { width: 24px; height: 24px; }
.request-done h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 26px;
  text-transform: uppercase; letter-spacing: 0.02em; color: #2b2013;
}
.request-done p { margin-top: 10px; font-size: 15px; color: #5a5040; }
.done-tip { font-size: 13px; color: var(--ink-dim); max-width: 46ch; margin-inline: auto; }

/* ========================= FOOTER ========================= */
.footer { padding: 40px 0; border-top: 1px solid rgba(45, 46, 52, 0.12); }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-mark { font-size: 15px; color: #6a5638; }
.footer-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: #7a6544; }
.privacy { margin-top: 16px; max-width: 70ch; font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); }
.privacy strong { color: var(--ink); }

/* ========================= RESPONSIVE ========================= */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 8px; padding-top: 24px; }
  .hero-copy { text-align: center; }
  .lede { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .hero-visual { margin-top: 28px; }
  .request-inner { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 620px) {
  .cap-grid { grid-template-columns: 1fr; }
  .nav-links { gap: 10px; }
  .nav-links > a:not(.btn) { display: none; }
  /* Swap the demo CTA for Log in on phones (the text Log in anchor above is hidden). */
  .nav-demo { display: none; }
  .nav-login-mobile { display: inline-flex; }
}

/* The war-table is a fixed 420px design (the animation coordinates depend on
   it), so scale it down to fit small screens. scale() needs a unitless factor
   and CSS can't divide a length by a length, so we step it; margin-bottom
   reclaims the vertical space the shrunk-but-still-420px-tall box leaves. */
@media (max-width: 480px) {
  .hero-visual { overflow: hidden; }
  .hero-scene { transform: scale(0.82); transform-origin: top center; margin-bottom: -76px; }
}
@media (max-width: 430px) {
  .hero-scene { transform: scale(0.72); margin-bottom: -118px; }
}
@media (max-width: 360px) {
  .hero-scene { transform: scale(0.64); margin-bottom: -151px; }
}