@font-face {
  font-family: "Rajdhani";
  src: url("/marketing-assets/rajdhani-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("/marketing-assets/rajdhani-medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("/marketing-assets/rajdhani-semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --mineral: #080a09;
  --mineral-deep: #050706;
  --graphite: #111410;
  --graphite-raised: #191c18;
  --well: #0c0f0c;
  --bone: #ddd6c6;
  --bright: #f3ecdc;
  --dim: #bbb3a3;
  --faint: #938e84;
  --seam: rgba(235, 224, 199, 0.22);
  --seam-soft: rgba(235, 224, 199, 0.11);
  --brass: #d3a143;
  --brass-lit: #f0c66c;
  --brass-deep: #a66b20;
  --ready: #71d27e;
  --error: #ef9e89;
  font-family: "Rajdhani", "Arial Narrow", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--mineral); scroll-behavior: smooth; }
body { min-height: 100%; margin: 0; overflow-x: hidden; background: var(--mineral); color: var(--bone); }
button, input { font: inherit; }
a { color: inherit; }
button { color: inherit; }
img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--brass-lit);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--bright);
  color: var(--mineral);
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

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

.campaign-rail {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr);
  align-items: center;
  min-height: 68px;
  padding: 0 clamp(20px, 3vw, 54px);
  border-bottom: 1px solid var(--seam);
  background: #090b0a;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.045);
}

.studio-mark {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 15px;
  color: var(--bright);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-decoration: none;
  text-transform: uppercase;
}

.studio-mark svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: var(--brass);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.25;
}

.campaign-rail nav { display: flex; align-items: center; gap: clamp(20px, 2.7vw, 44px); }
.campaign-rail nav a,
.rail-action {
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
}
.campaign-rail nav a:hover { color: var(--bright); }
.rail-action {
  justify-self: end;
  min-height: 38px;
  padding: 10px 14px;
  border: 1px solid rgba(240, 198, 108, 0.55);
  color: var(--brass-lit);
}
.rail-action:hover { border-color: var(--brass-lit); background: rgba(211, 161, 67, 0.09); }

/**
 * The account door, beside the campaign's one brass action.
 *
 * It is deliberately QUIET: the campaign's job is to explain the game to somebody who has
 * never seen it, and a sign-in as loud as the primary action competes with that for the 99%
 * of visitors who have no account. `/account` rather than `/sign-in` so a signed-in player
 * goes straight where they meant to and only a stranger sees a password field.
 */
.rail-tail { display: flex; gap: 12px; align-items: center; justify-self: end; }

.rail-signin {
  padding: 10px 4px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
}

.rail-signin:hover { color: var(--bright); border-bottom-color: var(--brass); }

.campaign-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(540px, 0.9fr);
  min-height: calc(100svh - 68px);
  overflow: visible;
  background: #0b0d0b;
}

.hero-art {
  position: sticky;
  top: 68px;
  align-self: start;
  height: calc(100svh - 68px);
  min-width: 0;
  min-height: min(790px, calc(100svh - 68px));
  margin: 0;
  overflow: hidden;
  background: #0d2017;
}

.hero-art > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
  filter: saturate(1.04) contrast(1.015) brightness(0.98);
  transform: scale(1.01);
}

.hero-art > img.scene-enter { animation: scene-enter 640ms cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes scene-enter {
  from { opacity: 0.48; transform: scale(1.026); }
  to { opacity: 1; transform: scale(1.01); }
}

.hero-grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 4, 2, 0.02) 48%, rgba(0, 5, 3, 0.72) 100%),
    radial-gradient(ellipse at 45% 43%, transparent 46%, rgba(0, 0, 0, 0.26) 112%);
}

.hero-art figcaption {
  position: absolute;
  right: 135px;
  bottom: 98px;
  left: clamp(26px, 4vw, 68px);
  max-width: 520px;
  padding-top: 15px;
  border-top: 1px solid rgba(244, 229, 196, 0.39);
  color: var(--bright);
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 600;
  line-height: 1.05;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.9);
}

.story-controls {
  position: absolute;
  bottom: 43px;
  left: clamp(26px, 4vw, 68px);
  z-index: 4;
  display: grid;
  grid-template-columns: 44px auto auto 44px;
  align-items: center;
  min-height: 44px;
  border-block: 1px solid rgba(241, 226, 194, 0.31);
  background: rgba(5, 9, 7, 0.88);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.story-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid rgba(241, 226, 194, 0.16);
  background: transparent;
  color: var(--bone);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.story-controls button svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.7;
}

.story-controls button:first-child { border-left: 0; border-right: 1px solid rgba(241, 226, 194, 0.16); }
.story-controls button:hover { background: rgba(211, 161, 67, 0.15); color: var(--bright); }
.story-controls span { min-width: 58px; padding-inline: 10px; color: #e7decc; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-align: center; }

.hero-register {
  position: relative;
  z-index: 3;
  min-width: 0;
  margin-left: -112px;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  background: var(--graphite);
  filter: drop-shadow(-18px 5px 19px rgba(0, 0, 0, 0.48));
}

.hero-register::before,
.hero-register::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 1px;
  content: "";
  pointer-events: none;
  transform: skewX(-6.15deg);
  transform-origin: top;
}

.hero-register::before { left: 15.05%; background: rgba(234, 188, 91, 0.55); }
.hero-register::after { left: calc(15.05% + 8px); background: var(--seam-soft); }

.register-inner {
  min-height: 100%;
  padding: clamp(39px, 5vh, 61px) clamp(32px, 4vw, 64px) 42px clamp(123px, 9vw, 158px);
  background:
    radial-gradient(circle at 75% 4%, rgba(211, 161, 67, 0.06), transparent 31rem),
    linear-gradient(112deg, rgba(255, 255, 255, 0.018), transparent 42%),
    #121512;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045), inset 24px 0 52px rgba(0, 0, 0, 0.3);
}

.game-logo {
  display: block;
  width: min(350px, 85%);
  max-height: 118px;
  margin: 0 auto clamp(25px, 3.5vh, 40px);
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.74));
}

.alpha-signal {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #91d99a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.alpha-signal span {
  width: 8px;
  height: 8px;
  border: 1px solid #b4ecbb;
  border-radius: 50%;
  background: var(--ready);
  box-shadow: 0 3px 8px rgba(77, 180, 91, 0.32);
}

.hero-register h1,
.chronicle h2,
.alpha-interest h2,
.legal-register h1 {
  color: var(--bright);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.94;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero-register h1 {
  max-width: 9ch;
  margin: 23px 0 0;
  font-size: clamp(47px, 4.5vw, 76px);
}

.hero-register > .register-inner > p {
  max-width: 47ch;
  margin: 20px 0 0;
  color: var(--dim);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.46;
}

.hero-actions { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 12px; margin-top: 29px; }
.primary-action,
.purchase-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 11px 17px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.075em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.primary-action {
  border: 1px solid #efc15c;
  background: linear-gradient(180deg, var(--brass-lit), #bd7f29);
  color: #1b1409;
  cursor: pointer;
  box-shadow: 0 10px 23px rgba(0, 0, 0, 0.36), inset 0 1px rgba(255, 248, 213, 0.5);
  text-shadow: 0 1px rgba(255, 245, 205, 0.44);
}
.primary-action:hover:not(:disabled) { filter: brightness(1.08); }
.primary-action:active:not(:disabled) { transform: translateY(1px); }
.primary-action:disabled { cursor: wait; filter: saturate(0.36) brightness(0.72); }
.purchase-action {
  border: 1px solid var(--seam);
  background: rgba(0, 0, 0, 0.17);
  color: var(--faint);
  cursor: not-allowed;
}

.chapter-index { display: grid; margin-top: 26px; border-top: 1px solid var(--seam); }
.chapter-index a {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  min-height: 44px;
  padding: 10px 0;
  border-bottom: 1px solid var(--seam-soft);
  text-decoration: none;
}
.chapter-index span { color: var(--brass-lit); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.chapter-index strong { color: var(--dim); font-size: 14px; font-weight: 500; }
.chapter-index a:hover strong { color: var(--bright); }

.chronicle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  min-height: 680px;
  border-top: 1px solid var(--seam);
  background: var(--graphite);
}

.chapter-world {
  grid-template-columns: minmax(350px, 0.72fr) minmax(0, 1.28fr);
  min-height: 610px;
  background: #0d100d;
}

.chapter-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  min-width: 0;
  padding: clamp(58px, 7vw, 118px) clamp(30px, 6.2vw, 116px);
  background:
    radial-gradient(circle at 10% 8%, rgba(211, 161, 67, 0.055), transparent 28rem),
    #101310;
}
.chronicle--image-left .chapter-copy { border-left: 1px solid var(--seam-soft); }
.chronicle--image-right .chapter-copy { border-right: 1px solid var(--seam-soft); }

.chronicle h2,
.alpha-interest h2 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(45px, 5.2vw, 78px);
}
.chapter-lead {
  max-width: 50ch;
  margin: 29px 0 0;
  color: var(--bone);
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 500;
  line-height: 1.4;
}
.chapter-copy > p:not(.chapter-lead) {
  max-width: 65ch;
  margin: 20px 0 0;
  color: var(--dim);
  font-size: 17px;
  line-height: 1.58;
}
.text-link {
  margin-top: 31px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(240, 198, 108, 0.58);
  color: var(--brass-lit);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.085em;
  text-decoration: none;
  text-transform: uppercase;
}
.text-link:hover { border-color: var(--brass-lit); color: var(--bright); }

.chapter-art { position: relative; min-width: 0; min-height: 680px; margin: 0; overflow: hidden; background: #112016; }
.chapter-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.03) contrast(1.01) brightness(0.98); }
.chapter-art::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(1, 5, 3, 0.44)); content: ""; pointer-events: none; }

.world-vista {
  position: relative;
  display: grid;
  align-content: end;
  gap: 0;
  min-height: 610px;
  padding: 0 clamp(28px, 5vw, 84px) 55px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(3, 8, 5, 0.22), rgba(3, 8, 5, 0.62)),
    linear-gradient(180deg, transparent 38%, rgba(1, 5, 3, 0.8)),
    url("/marketing-assets/hero-woodcutting-v4.webp") center 46% / cover;
}
.world-vista span {
  max-width: 440px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(238, 224, 194, 0.25);
  color: var(--bright);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-shadow: 0 3px 9px rgba(0, 0, 0, 0.88);
  text-transform: uppercase;
}

.alpha-interest {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(42px, 8vw, 150px);
  padding: clamp(70px, 9vw, 150px) clamp(28px, 7vw, 130px);
  border-top: 1px solid var(--seam);
  background:
    radial-gradient(circle at 17% 4%, rgba(211, 161, 67, 0.075), transparent 33rem),
    #0b0e0b;
}
.interest-story > p {
  max-width: 48ch;
  margin: 28px 0 0;
  color: var(--dim);
  font-size: 18px;
  line-height: 1.55;
}
.interest-story dl { margin: 38px 0 0; border-top: 1px solid var(--seam); }
.interest-story dl div { padding: 18px 0; border-bottom: 1px solid var(--seam-soft); }
.interest-story dt { color: var(--brass-lit); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.interest-story dd { max-width: 48ch; margin: 6px 0 0; color: var(--dim); font-size: 15px; line-height: 1.5; }

.interest-form {
  align-self: start;
  display: grid;
  gap: 18px;
  padding: clamp(27px, 4vw, 54px);
  border: 1px solid var(--seam);
  background: #121512;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.31), inset 0 1px rgba(255, 255, 255, 0.045);
}
.name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.interest-form label:not(.consent-row) { display: grid; gap: 7px; }
.interest-form label > span:first-child,
.interest-form label:not(.consent-row) > span {
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.interest-form input[type="text"],
.interest-form input[type="email"] {
  width: 100%;
  height: 51px;
  padding: 0 14px;
  border: 1px solid rgba(235, 224, 199, 0.29);
  border-radius: 0;
  background: var(--well);
  color: var(--bright);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.46);
  font-size: 18px;
}
.interest-form input:hover { border-color: rgba(235, 224, 199, 0.46); }
.interest-form input:user-invalid { border-color: rgba(239, 158, 137, 0.74); }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.consent-row {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  cursor: pointer;
}
.consent-row input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brass); }
.consent-row span { color: var(--dim); font-size: 14px; line-height: 1.46; text-transform: none; }
.consent-row strong { color: var(--bone); font-weight: 600; }
.collection-note { margin: 3px 0 0; padding-top: 17px; border-top: 1px solid var(--seam-soft); color: var(--faint); font-size: 13px; line-height: 1.48; }
.collection-note a { color: var(--bone); }
.form-message { min-height: 22px; margin: 0; color: var(--dim); font-size: 15px; line-height: 1.4; }
.form-message[data-kind="success"] { color: #91db9b; }
.form-message[data-kind="error"] { color: var(--error); }
.form-submit { width: 100%; border: 1px solid #efc15c; }

.campaign-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 116px;
  padding: 30px clamp(26px, 5vw, 90px);
  border-top: 1px solid var(--seam);
  background: #070908;
}
.campaign-footer > div { display: grid; gap: 4px; }
.campaign-footer strong { color: var(--bright); font-size: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.campaign-footer span { color: var(--faint); font-size: 14px; }
.campaign-footer nav { display: flex; align-items: center; gap: 25px; }
.campaign-footer a,
.campaign-footer button { border: 0; border-bottom: 1px solid var(--seam); background: transparent; color: var(--dim); cursor: pointer; font-size: 13px; text-decoration: none; }
.campaign-footer form { margin: 0; }

.legal-page { background: #0b0e0b; }
.legal-page .campaign-rail { grid-template-columns: 1fr auto; }
.legal-register { max-width: 900px; margin: 0 auto; padding: clamp(62px, 9vw, 124px) 28px 120px; }
.legal-register h1 { max-width: 12ch; margin: 35px 0 0; font-size: clamp(48px, 7vw, 82px); }
.legal-intro { margin: 30px 0 52px !important; color: var(--bone) !important; font-size: 21px !important; }
.legal-register h2 { margin: 44px 0 0; color: var(--bright); font-size: 27px; font-weight: 600; text-transform: uppercase; }
.legal-register p { max-width: 72ch; margin: 13px 0 0; color: var(--dim); font-size: 17px; line-height: 1.62; }
.legal-register a:not(.text-link) { color: var(--brass-lit); }

@media (max-width: 1180px) {
  .campaign-rail { grid-template-columns: 1fr auto; }
  .campaign-rail > nav { display: none; }
  .campaign-hero { grid-template-columns: minmax(0, 1fr) minmax(500px, 0.88fr); }
  .hero-register { margin-left: -83px; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
  .hero-register::before { left: 12.05%; }
  .hero-register::after { left: calc(12.05% + 7px); }
  .register-inner { padding-right: 33px; padding-left: 106px; }
  .hero-art figcaption { right: 100px; }
  .hero-actions { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
  .campaign-rail { min-height: 60px; }
  .campaign-hero { display: block; min-height: 0; overflow: visible; }
  .hero-art { position: relative; top: auto; height: auto; min-height: 520px; }
  .hero-art figcaption { right: 32px; }
  .story-controls { right: auto; left: 30px; }
  .hero-register {
    margin: -58px 0 0;
    clip-path: polygon(0 58px, 50% 0, 100% 58px, 100% 100%, 0 100%);
    filter: drop-shadow(0 -14px 20px rgba(0, 0, 0, 0.42));
  }
  .hero-register::before,
  .hero-register::after { display: none; }
  .register-inner { min-height: 680px; padding: 92px clamp(28px, 8vw, 74px) 62px; }
  .game-logo { width: min(320px, 62%); }
  .hero-actions { grid-template-columns: 1fr 1fr; }
  .chronicle,
  .chapter-world { grid-template-columns: 1fr; }
  .chapter-world .chapter-copy { order: 2; }
  .world-vista { min-height: 500px; }
  .chronicle--image-right .chapter-art { order: 1; }
  .chronicle--image-right .chapter-copy { order: 2; }
  .chapter-art { min-height: 540px; }
  .chronicle--image-left .chapter-copy,
  .chronicle--image-right .chapter-copy { border: 0; }
  .alpha-interest { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .campaign-rail { padding-inline: 17px; }
  .studio-mark { gap: 8px; font-size: 11px; letter-spacing: 0.15em; white-space: nowrap; }
  .studio-mark svg { width: 23px; height: 23px; }
  .rail-action { min-height: 34px; padding: 8px 9px; font-size: 9.5px; letter-spacing: 0.07em; white-space: nowrap; }
  .hero-art { min-height: 340px; }
  .hero-art > img { object-position: 50% center; }
  .hero-art figcaption { right: auto; bottom: 64px; left: 20px; width: min(290px, calc(100% - 40px)); font-size: 21px; }
  .story-controls { right: auto; bottom: 17px; left: 20px; }
  .hero-register { margin-top: -30px; clip-path: polygon(0 30px, 50% 0, 100% 30px, 100% 100%, 0 100%); }
  .register-inner { min-height: 0; padding: 52px 21px 45px; }
  .game-logo { width: min(190px, 55%); max-height: 68px; margin-bottom: 16px; }
  .alpha-signal { font-size: 10px; }
  .hero-register h1 { margin-top: 17px; font-size: 43px; }
  .hero-register > .register-inner > p { margin-top: 14px; font-size: 15px; }
  .hero-actions { grid-template-columns: 1fr; margin-top: 20px; }
  .primary-action,
  .purchase-action { min-height: 52px; font-size: 13px; }
  .chapter-index { margin-top: 21px; }
  .chapter-index a { grid-template-columns: 88px minmax(0, 1fr); min-height: 42px; gap: 8px; }
  .chapter-index span { font-size: 10px; }
  .chapter-index strong { font-size: 12.5px; }
  .chapter-art,
  .world-vista { min-height: 340px; }
  .chapter-copy { padding: 56px 22px 64px; }
  .chronicle h2,
  .alpha-interest h2 { font-size: 43px; }
  .chapter-lead { margin-top: 22px; font-size: 19px; }
  .chapter-copy > p:not(.chapter-lead) { font-size: 15px; }
  .world-vista { padding: 0 22px 28px; }
  .world-vista span { padding-block: 10px; font-size: 12px; }
  .alpha-interest { gap: 37px; padding: 58px 21px 70px; }
  .interest-story > p { margin-top: 22px; font-size: 16px; }
  .interest-story dl { margin-top: 29px; }
  .interest-form { gap: 16px; padding: 22px 18px 25px; }
  .name-fields { grid-template-columns: 1fr; gap: 16px; }
  .interest-form input[type="text"],
  .interest-form input[type="email"] { height: 49px; }
  .campaign-footer { display: grid; padding: 32px 21px 38px; }
  .campaign-footer nav { justify-content: space-between; }
  .legal-page .campaign-rail { grid-template-columns: 1fr; }
  .legal-page .rail-action { display: none; }
  .legal-register { padding: 52px 21px 82px; }
  .legal-register h1 { font-size: 45px; }
  .legal-intro { font-size: 18px !important; }
  .legal-register h2 { font-size: 23px; }
  .legal-register p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}