/* Ascendant landing. A violet-black void, one lavender accent, five ink plates.
   One display face for headings, self-hosted. Body stays on the system stack.
   The tokens follow the Ascendant Void design system (2026-09-13); the six
   rank bands are the bot's own card colours. */

/* The only font this page loads is served from this origin. `swap` keeps text
   readable before the file lands. The 700 file next to it is an input to
   scripts/make-og.js and is no longer fetched by the page. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/bricolage-grotesque-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #040212;
  --bg-2: #0a0719;
  --ink: #f4f0ff;
  --muted: #a8a6b7;
  /* 5.95:1 on --bg and 5.75:1 on --bg-2. The design system's #72707b measured
     4.22:1 and 4.08:1, under AA for the 11.5px labels and the footer that use it. */
  --faint: #8b8899;
  --accent: #9382ff;
  --accent-deep: #5046e4;
  --accent-lift: #ba9cff;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-line: rgba(147, 130, 255, 0.14);
  --hairline: rgba(147, 130, 255, 0.3);
  --rim: inset 0 0 24px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* The six rank bands, lifted from ../Ascendant-Bot/cards/chrome.js RANK_COLOR. */
  --rank-e: #8a8f98;
  --rank-d: #7fa37c;
  --rank-c: #6e93b8;
  --rank-b: #9079b5;
  --rank-a: #b57ba6;
  --rank-s: #c6a86b;

  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --gap-section: clamp(6rem, 13vh, 10rem);
  --gap-block: clamp(3.5rem, 7vh, 6rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
.wrap { width: min(1140px, 100% - 4rem); margin-inline: auto; }
main, section { scroll-margin-top: 5rem; }

:focus-visible {
  outline: 2px solid var(--accent-lift);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  min-height: 44px;
  padding: 0.7rem 1.1rem;
  border-radius: 0.6rem;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.95rem;
}
.skip:focus { top: 1rem; }

.bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 72% 4%, rgba(147, 130, 255, 0.08), transparent 70%),
    var(--bg);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; }
h1 {
  font-size: clamp(3rem, 5.8vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 1.4rem 0 1.7rem;
  max-width: 11ch;
}
h2 {
  font-size: clamp(2.15rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0.6rem 0 0;
}
h1 em { font-style: normal; color: var(--accent); }
h2 em { font-style: normal; color: var(--ink); }
h3 {
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0.6rem 0 0.85rem;
}
h4 {
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
}

/* Labels use the mono face, the way the game's own System window does. */
.eyebrow, .tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--faint);
}
.lede {
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 2.6rem;
}
.hint {
  color: var(--faint);
  font-size: 0.9rem;
  margin: 1.4rem 0 0;
  max-width: 54ch;
}
.cmd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-line);
  border-radius: 0.4rem;
  padding: 0.18rem 0.5rem;
}

.mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 3px rgba(147, 130, 255, 0.45);
  flex: none;
}

header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  background: rgba(4, 2, 18, 0.74);
  border-bottom: 1px solid var(--glass-line);
}
.bar {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-height: 68px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}
nav {
  display: flex;
  gap: 1.25rem;
  margin-left: auto;
  color: var(--muted);
  font-size: 0.95rem;
}
nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.4rem;
  transition: color 0.25s;
}
nav a:hover { color: var(--ink); }
.header-cta { margin-left: 0.35rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.82rem 1.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.22s, border-color 0.22s, color 0.22s, box-shadow 0.3s var(--ease-out);
}
/* One glow per screen, and it belongs to the primary action. The header copy
   of the button stays flat so the hero button is the one lit thing. */
.btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 40px rgba(147, 130, 255, 0.35);
}
.btn-primary:hover {
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 56px rgba(147, 130, 255, 0.55);
}
.header-cta, .header-cta:hover { box-shadow: none; }
.btn-ghost { border-color: var(--hairline); background: rgba(4, 2, 18, 0.35); color: var(--ink); }
.btn-ghost:hover { border-color: rgba(147, 130, 255, 0.55); background: rgba(147, 130, 255, 0.12); }
.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ---------- the plates ----------
   Every plate is a decorative <img> pinned behind its section. The scroll
   handler in main.js writes --p (0..1, how far the section has travelled
   through the viewport) on the section; everything below is CSS reading that
   one number, and only transform and opacity ever change, so the plates
   composite instead of repainting. Without JS, or under reduced motion, --p
   keeps its default and every plate sits at rest. */
picture { display: contents; }
.plate {
  position: absolute;
  z-index: 0;
  inset: -60px 0;
  width: 100%;
  height: calc(100% + 120px);
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * -80px), 0);
  will-change: transform;
}
.scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-sec {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: 0;
  background: var(--bg);
}
/* The gate drifts up at a fifth of the scroll speed and is gone by the time
   the hero is, with a small cursor parallax on pointer devices. The box is
   taller than the section so the drift never uncovers the floor. */
.plate-hero {
  inset: 0 0 -30% 0;
  height: 130%;
  transform: translate3d(calc(var(--mx, 0) * 8px), calc(var(--p, 0) * -20% + var(--my, 0) * 8px), 0);
  opacity: calc(1 - var(--p, 0) * 1.25);
}
.scrim-hero {
  background: linear-gradient(to top, rgba(4, 2, 18, 1) 0%, rgba(4, 2, 18, 0.82) 26%, rgba(4, 2, 18, 0.34) 56%, rgba(4, 2, 18, 0) 80%);
}
.hero {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: end;
  justify-items: center;
  text-align: center;
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  padding: 6rem 0 4rem;
}
.hero-copy {
  max-width: 720px;
  text-shadow: 0 2px 28px rgba(4, 2, 18, 0.7);
}
/* The kicker sits on the brightest part of the gate, where the plate under it
   measured 1.1:1 to 1.4:1 against the label grey. A pill carries it. */
.hero .eyebrow {
  color: var(--ink);
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(4, 2, 18, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero h1 { margin-inline: auto; }
.hero .lede { margin-inline: auto; }
.hero .actions { justify-content: center; }
.hero .hint { margin-inline: auto; }
/* Explicit size: an absolutely positioned canvas with auto width takes its
   backing-store size, and at 2x that put one quarter of the field over the hero. */
#motes {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.45;
}

section { padding: var(--gap-section) 0; }
.statement {
  max-width: 52ch;
  margin: 0 auto var(--gap-block);
  text-align: center;
}
.statement h2 { text-wrap: balance; }
.statement p {
  max-width: 46ch;
  margin: 1.5rem auto 0;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.6;
}

/* ---------- section panels: one plate, one scene, copy on its empty side ---------- */
.panel {
  --panel-bg: var(--bg);
  position: relative;
  overflow: clip;
  isolation: isolate;
  min-height: clamp(560px, 82vh, 860px);
  display: grid;
  align-items: center;
  padding: var(--gap-block) 0;
}
.feature-sec .panel { --panel-bg: var(--bg-2); }
/* A panel fades into the section ground at both edges, so the sections that
   end in one carry no bottom padding of their own and two panels sit close. */
.bot-sec, .feature-sec { padding-bottom: 0; }
.panel + .panel { margin-top: 2.5rem; }
.panel .scrim {
  background: linear-gradient(to bottom, var(--panel-bg) 0, transparent 14%, transparent 86%, var(--panel-bg) 100%);
}
.panel-copy-left .scrim {
  background:
    linear-gradient(90deg, rgba(4, 2, 18, 0.9) 0%, rgba(4, 2, 18, 0.72) 38%, rgba(4, 2, 18, 0) 64%),
    linear-gradient(to bottom, var(--panel-bg) 0, transparent 14%, transparent 86%, var(--panel-bg) 100%);
}
.panel-copy-right .scrim {
  background:
    linear-gradient(270deg, rgba(4, 2, 18, 0.9) 0%, rgba(4, 2, 18, 0.72) 38%, rgba(4, 2, 18, 0) 64%),
    linear-gradient(to bottom, var(--panel-bg) 0, transparent 14%, transparent 86%, var(--panel-bg) 100%);
}
.panel-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 7vw, 5.5rem);
  align-items: center;
}
.panel-copy-right .panel-copy { grid-column: 2; }
.panel-copy { max-width: 48ch; }
.panel-copy > p { color: var(--muted); margin: 0 0 1.5rem; }
.panel-copy .sub { margin: 0 0 1rem; }
.panel-copy strong { color: var(--ink); font-weight: 600; }
/* Scoped to ul: the rank ladder below is an ol and takes no bullet. */
.panel-copy ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.panel-copy ul li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.panel-copy ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* The Shadow army slides in from its side of the frame during the first half
   of its pass; one soft mist layer drifts along the floor. */
.panel-army .plate {
  transform: translate3d(calc((1 - min(var(--p, 0.5) * 2, 1)) * -60px), calc((var(--p, 0.5) - 0.5) * -80px), 0);
}
.mist {
  position: absolute;
  z-index: 1;
  left: -10%;
  right: -10%;
  bottom: -5%;
  height: 45%;
  pointer-events: none;
  background: radial-gradient(55% 90% at 50% 100%, rgba(147, 130, 255, 0.28), rgba(147, 130, 255, 0) 70%);
  animation: mist 26s ease-in-out infinite alternate;
}
@keyframes mist {
  from { transform: translateX(-5%); }
  to { transform: translateX(5%); }
}
/* The sword zooms in a few percent over its pass. */
.panel-gear .plate {
  transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * -80px), 0) scale(calc(1 + var(--p, 0.5) * 0.04));
}

/* The rank ladder lights up rung by rung as it enters. */
/* Nine to a row, so each row is three whole bands; six to a row on phones,
   two bands each. A wrapping flex row left S and S+ alone on a third line. */
.ladder {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0.4rem;
  max-width: 30rem;
}
.rung {
  padding: 0.32rem 0.3rem;
  text-align: center;
  border: 1px solid var(--glass-line);
  border-bottom: 2px solid var(--band, var(--faint));
  border-radius: 0.4rem;
  background: rgba(4, 2, 18, 0.55);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: opacity 0.5s var(--ease-out), color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
/* Dim only when scripting will light them up; without JS the ladder reads lit. */
.js .ladder:not(.in) .rung { opacity: 0.35; color: var(--faint); }
.rung.apex { border-color: var(--rank-s); box-shadow: 0 0 18px rgba(198, 168, 107, 0.4); }
.js .ladder:not(.in) .rung.apex { border-color: var(--glass-line); box-shadow: none; }

/* The real cards, as the bot renders them. A hairline ring and nothing else. */
.shot {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin-top: 1.75rem;
  border-radius: 20px;
  box-shadow: 0 0 0 1px var(--glass-line);
}
.shots { display: grid; gap: 0.9rem; max-width: 480px; margin-top: 1.75rem; }
.shots .shot { margin-top: 0; }

.feature-sec {
  background: var(--bg-2);
  border-block: 1px solid var(--glass-line);
}

.cta-sec {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.plate-cta { object-position: 50% 28%; opacity: 0.75; }
.scrim-cta {
  background:
    radial-gradient(ellipse 70% 80% at 50% 55%, rgba(4, 2, 18, 0.55), rgba(4, 2, 18, 0.9)),
    linear-gradient(to bottom, var(--bg) 0, transparent 18%, transparent 82%, var(--bg) 100%);
}
.cta { position: relative; z-index: 2; text-align: center; padding: 2rem 0; }
.cta p {
  max-width: 46ch;
  margin: 1.5rem auto 2.8rem;
  color: var(--muted);
  font-size: 1.12rem;
}
.cta .actions { justify-content: center; }

footer {
  border-top: 1px solid var(--glass-line);
  padding: 4.5rem 0 2.5rem;
}
.foot-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.5rem;
}
.foot-cols h4 {
  margin: 0 0 0.75rem;
  color: var(--faint);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.foot-cols ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}
.foot-cols li { color: var(--faint); font-size: 0.93rem; }
.foot-cols a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: 0.93rem;
  transition: color 0.25s;
}
.foot-cols a:hover { color: var(--ink); }
.foot-cols li > span { display: inline-flex; align-items: center; min-height: 44px; }
.foot-blurb {
  max-width: 30ch;
  margin: 1rem 0 0;
  color: var(--faint);
  font-size: 0.9rem;
}
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--glass-line);
  color: var(--faint);
  font-size: 0.84rem;
}

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { color: var(--ink); }

/* The consent banner: a small glass panel at the foot of the viewport. */
.consent {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 1rem;
  width: min(560px, calc(100% - 2rem));
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.2rem;
  padding: 0.8rem 0.9rem 0.8rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: rgba(10, 7, 25, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--rim);
}
.consent[hidden] { display: none; }
.consent-text {
  flex: 1 1 260px;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}
.consent-actions { display: flex; gap: 0.5rem; }
.consent-btn { min-height: 44px; padding: 0.5rem 1rem; font-size: 0.88rem; }
/* The hero copy sits at the foot of the first screen; while the banner is
   open main.js sets --consent-h and the copy lifts clear of it. */
.hero-copy { margin-bottom: var(--consent-h, 0px); transition: margin-bottom 0.3s var(--ease-out); }
@media (max-width: 560px) {
  .consent { bottom: 0.6rem; gap: 0.6rem; }
  .consent-actions { width: 100%; }
  .consent-actions .consent-btn { flex: 1; }
}
/* A short phone has no spare room above the Join button: one compact row. */
@media (max-width: 560px) and (max-height: 740px) {
  .consent { flex-wrap: nowrap; gap: 0.5rem; padding: 0.55rem 0.55rem 0.55rem 0.8rem; }
  .consent-text { flex: 1 1 auto; font-size: 0.74rem; line-height: 1.35; }
  .consent-actions { width: auto; flex-direction: column; gap: 0.3rem; }
  .consent-actions .consent-btn { min-height: 34px; padding: 0.3rem 0.7rem; font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy { transition: none; }
}

/* Gated on the .js class the inline script in index.html sets: with scripting
   off nothing would ever add .in, and the whole copy would sit at opacity 0. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  nav { display: none; }
  .wrap { width: min(1140px, 100% - 2.5rem); }
  .bar { gap: 1rem; }
  .header-cta { margin-left: auto; }
  .hero {
    min-height: calc(100vh - 68px);
    min-height: calc(100svh - 68px);
    padding: 4rem 0 3.5rem;
  }
  .hero-copy { max-width: 660px; }
  .lede { max-width: 52ch; }
  /* Below the desktop breakpoint each panel keeps its plate BEHIND the copy,
     drifting with the scroll exactly as on desktop, but the plate is the 9:16
     crop of the scene (scripts/make-plates.js) and the copy sits at the foot
     over a bottom scrim, the way the hero does. A phone visitor gets the same
     moving page, not a page of pictures. */
  .panel {
    display: block;
    min-height: 0;
    padding: 62svh 0 3.5rem;
  }
  .panel + .panel { margin-top: 1.5rem; }
  /* The plate fills the panel's first screen and drifts there; the copy starts
     two thirds of the way down, over the darkened foot of the scene, and runs
     on below it on solid ground. The scrim is the plate's height, not the
     panel's, so a long copy block never climbs back into the light. */
  .panel .plate {
    inset: -60px 0 auto 0;
    height: calc(100svh + 120px);
  }
  /* The plate drifts 40px either way, so the scrim reaches 40px past the
     plate's lowest position and is opaque well before its end; the first
     version stopped 40px short and a raw strip of plate ran through the copy
     while a panel entered. The knight's sideways slide is desktop-only: the
     vertical scrim here has no side to hide the bare column it leaves. */
  .panel .scrim {
    inset: 0 0 auto 0;
    height: calc(100svh + 100px);
    background: linear-gradient(to bottom, var(--panel-bg) 0, rgba(4, 2, 18, 0) 10%, rgba(4, 2, 18, 0) 38%, rgba(4, 2, 18, 0.84) 60%, var(--panel-bg) 88%, var(--panel-bg) 100%);
  }
  .panel-army .plate {
    transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * -80px), 0);
  }
  .panel .mist { top: 55svh; bottom: auto; height: 45svh; }
  .panel-grid { grid-template-columns: 1fr; gap: 0; }
  .panel-copy { max-width: none; }
  .panel-copy-right .panel-copy { grid-column: auto; }
  .foot-cols { grid-template-columns: 1.4fr 1fr 1fr; }
  section { padding: 5.5rem 0; }
}

@media (max-width: 720px) {
  /* The phone hero shows the 9:16 crop; a shorter box keeps more of it in frame. */
  .plate-hero { inset: 0 0 -15% 0; height: 115%; }
}

@media (max-width: 560px) {
  .wrap { width: min(1140px, 100% - 2rem); }
  h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .bar { min-height: 64px; gap: 0.65rem; }
  .logo { font-size: 1.05rem; }
  .header-cta {
    width: auto;
    min-height: 44px;
    padding: 0.7rem 0.95rem;
    font-size: 0.88rem;
  }
  .hero {
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
    padding: 3.25rem 0 3rem;
  }
  .actions .btn { width: 100%; }
  .statement { text-align: left; margin-bottom: 3rem; }
  .statement br, .cta br { display: none; }
  .ladder { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: none; }
  .rung { padding-inline: 0.25rem; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .foot-cols > div:first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, nav a, .foot-cols a { transition: none; }
  #motes { display: none; }
  .plate, .plate-hero, .panel-army .plate, .panel-gear .plate { transform: none; opacity: 1; }
  .plate-cta { opacity: 0.75; }
  .mist { animation: none; }
  .rung { transition: none; }
}