/* =============================================================================
   Royal Canadian Legion Branch 370 — Iroquois
   legionbranch370.ca — core stylesheet
   Design system: "Engraved Ledger" — paper, letterpress rules, ticket stubs.
   Two-zone principle (SPEC §8.1): raffle = red/paper/ink · remembrance = navy/gold
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Brand — SPEC §8.1 */
  --legion-red: #e51937;
  --legion-red-deep: #a8102a;   /* text-safe red on paper: 6.4:1 */
  --legion-red-ink: #7c0c1f;
  --legion-navy: #12294b;
  --legion-navy-deep: #0b1a31;
  --legion-gold: #c9a227;
  --legion-gold-soft: #e6cd7c;

  /* Paper & ink */
  --paper: #f4f1ea;
  --paper-raised: #fbf9f5;
  --paper-sunk: #eae5da;
  --paper-edge: #ddd6c8;
  --ink: #241f1c;
  --ink-soft: #5a5148;
  --ink-faint: #857b6f;

  /* Semantic */
  --ok: #1f6b45;
  --warn: #8a5a06;
  --stop: #a8102a;
  --info: #1d4e79;

  /* Type — SPEC §8.2, 18px base */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --fs-h1: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.05rem + 0.3vw, 1.4rem);
  --fs-body: 1.125rem;          /* 18px */
  --fs-small: 1rem;             /* 16px floor — never smaller */

  /* Space — 8px scale, SPEC §8.3 */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --radius: 4px;
  --shadow-card: 0 2px 6px rgba(36, 31, 28, .12);
  --shadow-lift: 0 10px 28px -12px rgba(36, 31, 28, .38);
  --rule: 1px solid var(--paper-edge);

  --measure: 68ch;
  --shell: 1220px;
  --shell-tight: 860px;
}

/* ---------- 2. Reset ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

/* Paper grain — atmosphere without weight */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: var(--rule); margin: var(--s5) 0; }

/* ---------- 3. Typography ------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
  line-height: 1.12;
  margin: 0 0 var(--s2);
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4, h5, h6 { font-size: var(--fs-h4); font-weight: 600; }

p, li { max-width: var(--measure); }
p { margin: 0 0 var(--s2); }
strong, b { font-weight: 600; }

a { color: var(--legion-red-deep); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--legion-red-ink); text-decoration-thickness: 2px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--s2);
  display: flex; align-items: center; gap: var(--s2);
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--paper-edge); }
.eyebrow--centred::after, .eyebrow--centred::before {
  content: ""; flex: 1; height: 1px; background: var(--paper-edge);
}

.lede { font-size: 1.25rem; line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }
.small { font-size: var(--fs-small); }
.muted { color: var(--ink-soft); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* Drop-cap for editorial openings */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 3.6em; line-height: .8; float: left;
  padding: .06em .12em 0 0; font-weight: 700;
  color: var(--legion-red-deep);
}

/* ---------- 4. Layout ---------------------------------------------------- */

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
.shell--tight { width: min(100% - 2.5rem, var(--shell-tight)); margin-inline: auto; }
.section { padding-block: clamp(var(--s5), 6vw, var(--s7)); }
.section--sunk { background: var(--paper-sunk); }
.section--edge { border-top: var(--rule); }

.stack > * + * { margin-top: var(--s3); }
.grid { display: grid; gap: var(--s3); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.skip-link {
  position: absolute; left: var(--s2); top: -100px; z-index: 200;
  background: var(--legion-navy); color: #fff; padding: var(--s2) var(--s3);
  border-radius: var(--radius); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s2); color: #fff; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--legion-navy);
  outline-offset: 2px;
  border-radius: 2px;
}

.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 5. Header / nav ---------------------------------------------- */

.masthead {
  background: var(--legion-navy);
  color: #fff;
  position: relative;
  border-bottom: 3px solid var(--legion-gold);
}
.masthead__strip {
  font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--legion-navy-deep);
  color: #cfd8e6;
  padding: 6px 0;
}
.masthead__strip .shell { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: space-between; }
.masthead__strip a { color: var(--legion-gold-soft); }

.masthead__bar {
  display: flex; align-items: center; gap: var(--s2);
  padding-block: var(--s2);
}
.wordmark { display: flex; align-items: center; gap: var(--s2); text-decoration: none; color: #fff; flex: none; }
.wordmark:hover { color: #fff; }
.wordmark__mark {
  width: 46px; height: 46px; flex: none;
  border: 2px solid var(--legion-gold); border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--legion-gold-soft);
  letter-spacing: -.02em;
}
.wordmark__text { display: grid; line-height: 1.15; }
.wordmark__text b {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap;
}
.wordmark__text span {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: #b9c4d6;
}

.nav-toggle {
  margin-left: auto; display: none;
  background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff;
  border-radius: var(--radius); padding: 10px 14px; font: inherit; font-size: 1rem;
  min-height: 48px; cursor: pointer;
}

.mainnav { margin-left: auto; }
.mainnav ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0;
}
.mainnav a {
  padding: 11px 9px; color: #e8edf4; text-decoration: none;
  font-size: .9rem; font-weight: 500; border-radius: var(--radius);
  min-height: 44px; display: flex; align-items: center; white-space: nowrap;
}
.mainnav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.mainnav a[aria-current="page"] {
  color: var(--legion-gold-soft); box-shadow: inset 0 -3px 0 var(--legion-gold);
}
.masthead__cta { margin-left: var(--s1); flex: none; white-space: nowrap; padding-inline: 20px; }

@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  .mainnav {
    display: none; width: 100%; order: 3; margin: 0;
    border-top: 1px solid rgba(255,255,255,.16); padding-block: var(--s2);
  }
  .masthead__bar { flex-wrap: wrap; }
  .mainnav.is-open { display: block; }
  .mainnav ul { flex-direction: column; gap: 0; }
  .mainnav a { padding: 14px 8px; font-size: 1.05rem; }
  .masthead .masthead__cta { display: none; }
}

/* ---------- 6. Buttons --------------------------------------------------- */

.btn {
  --btn-bg: var(--legion-red);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 26px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bg); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0); }
.btn--lg { min-height: 60px; font-size: 1.15rem; padding: 14px 34px; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--legion-navy); border-color: var(--legion-navy); }
.btn--ghost:hover { background: var(--legion-navy); --btn-fg: #fff; }
.btn--navy { --btn-bg: var(--legion-navy); }
.btn--gold { --btn-bg: var(--legion-gold); --btn-fg: #241f1c; }
.btn--onnavy { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.6); }
.btn--onnavy:hover { background: #fff; --btn-fg: var(--legion-navy); }
.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; pointer-events: none; }

.btn__meta { font-family: var(--font-mono); font-size: .78rem; opacity: .85; letter-spacing: .08em; }

.linkarrow {
  font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.linkarrow::after { content: "→"; transition: transform .2s ease; }
.linkarrow:hover::after { transform: translateX(4px); }

/* ---------- 7. Ticket stub (signature component) ------------------------- */

.stub {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--s3);
}
/* perforation on the left edge */
.stub--perf { padding-left: var(--s4); }
.stub--perf::before {
  content: ""; position: absolute; left: 14px; top: 10px; bottom: 10px; width: 2px;
  background-image: radial-gradient(circle, var(--paper-edge) 0 1.6px, transparent 1.8px);
  background-size: 2px 9px;
}
.stub__punch {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--paper-edge);
}
.stub__punch--tl { left: -8px; top: 24px; }
.stub__punch--bl { left: -8px; bottom: 24px; }

/* ---------- 8. Hero ------------------------------------------------------ */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(201,162,39,.14), transparent 60%),
    linear-gradient(180deg, var(--paper-raised), var(--paper));
  border-bottom: var(--rule);
}
.hero::after {
  /* engraved chevrons — service-ribbon reference, subtle */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: repeating-linear-gradient(135deg, var(--legion-navy) 0 1px, transparent 1px 14px);
  mask-image: linear-gradient(to bottom right, transparent 40%, #000);
}
/* Photographic hero: the picture sits behind a paper scrim that stays opaque
   on the left, so the headline and buttons never fight the image. */
.hero__pic { position: absolute; inset: 0; z-index: 0; display: block; }
.hero__pic img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%;
  filter: saturate(1.12) contrast(1.06);
}
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--paper) 0%, rgba(244,241,234,.95) 28%, rgba(244,241,234,.6) 50%, rgba(244,241,234,.22) 100%),
    linear-gradient(180deg, rgba(251,249,245,.5) 0%, rgba(244,241,234,.1) 45%, rgba(234,229,218,.4) 100%);
}
.hero--photo::after { z-index: 1; }
@media (max-width: 900px) {
  /* Stacked layout puts the copy over the full width, so the scrim stays
     opaque behind the text and thins out below it, where the hall shows. */
  .hero--photo::before {
    background: linear-gradient(180deg,
      rgba(244,241,234,.96) 0%, rgba(244,241,234,.94) 55%,
      rgba(244,241,234,.7) 80%, rgba(244,241,234,.45) 100%);
  }
  .hero__pic img { object-position: 50% 62%; }
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid; gap: clamp(var(--s4), 5vw, var(--s6));
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  align-items: center;
  padding-block: clamp(var(--s5), 7vw, var(--s7));
}
@media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: var(--s3); }
.hero h1 em {
  font-style: normal; color: var(--legion-red-deep);
  font-variation-settings: "WONK" 1, "SOFT" 6, "opsz" 60;
}

.first-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--legion-navy); background: rgba(18,41,75,.07);
  border: 1px solid rgba(18,41,75,.2); border-radius: 100px; padding: 7px 16px;
  margin-bottom: var(--s3);
}
.first-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--legion-red);
  box-shadow: 0 0 0 4px rgba(229,25,55,.18);
}

/* Jackpot ticket */
.jackpot {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.jackpot__head {
  background: var(--legion-navy); color: #fff;
  padding: var(--s2) var(--s3);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2);
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
}
.jackpot__head span:last-child { color: var(--legion-gold-soft); }
.jackpot__body { padding: var(--s4) var(--s3) var(--s3); text-align: center; }
.jackpot__label {
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.jackpot__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.4rem); line-height: 1;
  letter-spacing: -.03em; color: var(--legion-red-deep);
  font-variant-numeric: tabular-nums; margin: 6px 0 4px;
}
.jackpot__value[data-state="pending"] {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); color: var(--legion-navy);
}
.jackpot__note { font-size: var(--fs-small); color: var(--ink-soft); max-width: 40ch; margin: var(--s2) auto 0; }
.jackpot__tear {
  border-top: 2px dashed var(--paper-edge); margin-top: var(--s3); padding: var(--s3);
  background: var(--paper-sunk);
}
.jackpot__serial {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em;
  color: var(--ink-faint); text-transform: uppercase; text-align: center; margin-top: var(--s2);
}

.countdown { display: flex; gap: var(--s1); justify-content: center; }
.countdown__unit {
  background: var(--paper-raised); border: 1px solid var(--paper-edge); border-radius: var(--radius);
  padding: 8px 10px; min-width: 66px; text-align: center;
}
.countdown__n {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--legion-navy); display: block; line-height: 1.1;
}
.countdown__u {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ---------- 9. Trust bar ------------------------------------------------- */

.trustbar { background: var(--legion-navy); color: #fff; }
.trustbar__inner {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  padding-block: var(--s3); align-items: center; justify-content: space-between;
}
.trust-item { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); color: #e8edf4; }
.trust-item b { font-family: var(--font-mono); letter-spacing: .06em; color: #fff; font-weight: 600; }
.trust-item a { color: var(--legion-gold-soft); }
.trust-item__icon {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center;
  color: var(--legion-gold-soft);
}
.tbc-flag {
  display: inline-block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; background: var(--legion-gold); color: #241f1c;
  padding: 2px 7px; border-radius: 3px; font-weight: 600; white-space: nowrap;
}

/* ---------- 10. Cards / steps -------------------------------------------- */

.card {
  background: var(--paper-raised); border: 1px solid var(--paper-edge);
  border-radius: var(--radius); padding: var(--s3); box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }
.card--link { text-decoration: none; color: inherit; display: block; transition: transform .2s ease, box-shadow .2s ease; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); color: inherit; }

.step { position: relative; padding-top: 58px; }
.step__n {
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-size: 2.75rem; font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--legion-red);
  opacity: .85;
}
.step h3 { font-size: 1.25rem; }

/* Illustrated variant: the engraved numeral and the step illustration read as
   one lock-up, so the numeral leaves its absolute slot. */
.step--ill { padding-top: 0; }
.step__head { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); }
.step--ill .step__n { position: static; font-size: 2.25rem; }
.step__ill { display: block; width: 84px; height: 84px; flex: none; }
@media (max-width: 560px) { .step__ill { width: 72px; height: 72px; } }

/* Tier cards */
.tier {
  position: relative; text-align: center; text-decoration: none; color: inherit;
  background: var(--paper-raised); border: 1px solid var(--paper-edge);
  border-radius: var(--radius); padding: var(--s3) var(--s2); display: block;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tier::before, .tier::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--paper-edge); top: 50%; margin-top: -7px;
}
.tier::before { left: -8px; } .tier::after { right: -8px; }
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--legion-red); color: inherit; }
.tier__ill { display: block; width: 132px; height: 53px; margin: 4px auto 10px; }
.tier__qty {
  display: block;
  font-family: var(--font-display); font-size: 2.9rem; font-weight: 700; line-height: 1;
  color: var(--legion-navy); font-variant-numeric: tabular-nums;
}
.tier__unit { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.tier__price {
  display: block; margin-top: var(--s2); padding-top: var(--s2); border-top: 1px dashed var(--paper-edge);
  font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; color: var(--legion-red-deep);
}
.tier--value { border-color: var(--legion-gold); }
.tier__flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--legion-gold); color: #241f1c; font-family: var(--font-mono);
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 3px; font-weight: 600; white-space: nowrap;
}

/* ---------- 10b. 50/50 split diagram ------------------------------------
   Built from real text rather than a fixed-viewBox drawing, so the labels
   stay legible and the two halves stack on a phone.
   ------------------------------------------------------------------------ */
.splitfig { margin: var(--s5) auto 0; max-width: 880px; }
.split5050__top {
  max-width: 420px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--s2);
  align-items: center;
  background: var(--paper-raised); border: 2px solid var(--legion-navy);
  border-radius: 10px; padding: 14px var(--s3);
}
.split5050__ticket { grid-row: 1 / span 2; display: block; width: 50px; height: 32px; }
.split5050__h { margin: 0; font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.split5050__s { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45; }
.split5050__arms { position: relative; height: 56px; }
.split5050__arms::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 26px;
  background: var(--legion-navy);
}
.split5050__arms::after {
  /* 25% minus half the grid gap, so each arm lands on a card's centre line. */
  content: ""; position: absolute; top: 26px;
  left: calc(25% - (var(--s3) / 4)); right: calc(25% - (var(--s3) / 4)); height: 30px;
  border: 2px solid var(--legion-navy); border-bottom: 0;
}
.split5050__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.split5050__card {
  display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s3); align-items: center;
  background: var(--paper-raised); border: 2px solid; border-top-width: 14px;
  border-radius: 12px; padding: var(--s3);
}
.split5050__card--win { border-color: var(--legion-red-deep); }
.split5050__card--branch { border-color: var(--legion-navy); }
.split5050__pct {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 3.4rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.split5050__card--win .split5050__pct { color: var(--legion-red-deep); }
.split5050__card--branch .split5050__pct { color: var(--legion-navy); }
.splitfig figcaption {
  margin-top: var(--s3); font-size: var(--fs-small); color: var(--ink-soft); max-width: 84ch;
}
@media (max-width: 700px) {
  .split5050__row { grid-template-columns: 1fr; }
  .split5050__arms { height: 30px; }
  .split5050__arms::before { height: 30px; }
  .split5050__arms::after { display: none; }
  .split5050__top { max-width: none; }
  .split5050__pct { font-size: 2.8rem; }
}

/* ---------- 11. Remembrance zone (navy/gold — NO raffle red) ------------- */

.zone-remembrance {
  background: var(--legion-navy-deep);
  color: #e7ecf4;
  border-block: 3px solid var(--legion-gold);
  position: relative;
}
.zone-remembrance::before {
  content: ""; position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background-image: radial-gradient(circle at 20% 20%, var(--legion-gold) 0 1px, transparent 1px);
  background-size: 26px 26px;
}
.zone-remembrance h1, .zone-remembrance h2, .zone-remembrance h3, .zone-remembrance h4 { color: #fff; }
.zone-remembrance .eyebrow { color: var(--legion-gold-soft); }
.zone-remembrance .eyebrow::after, .zone-remembrance .eyebrow::before { background: rgba(201,162,39,.4); }
.zone-remembrance a { color: var(--legion-gold-soft); }
.zone-remembrance .lede, .zone-remembrance .muted { color: #c3cddd; }
.zone-remembrance .card {
  background: rgba(255,255,255,.05); border-color: rgba(201,162,39,.35); box-shadow: none; color: #e7ecf4;
}
.zone-remembrance > * { position: relative; z-index: 1; }

.poppy-mark { width: 74px; height: 74px; }
.separation-note {
  border: 1px solid var(--legion-gold); border-left-width: 6px;
  background: rgba(201,162,39,.1);
  padding: var(--s3); border-radius: var(--radius);
}
.separation-note h3 { font-size: 1.2rem; margin-bottom: 8px; }
.separation-note p:last-child { margin-bottom: 0; }

/* Same note used on paper pages */
.separation-note--paper {
  background: rgba(18,41,75,.05); border-color: var(--legion-navy); color: var(--ink);
}

/* ---------- 12. Callouts / notices --------------------------------------- */

.notice {
  border: 1px solid var(--paper-edge); border-left: 6px solid var(--legion-navy);
  background: var(--paper-raised); border-radius: var(--radius); padding: var(--s3);
}
.notice--warn { border-left-color: var(--warn); background: #fdf7ea; }
.notice--stop { border-left-color: var(--stop); background: #fcf0f1; }
.notice--ok   { border-left-color: var(--ok); background: #eef6f1; }
.notice__title {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 8px;
}
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }

/* Illustration beside a short block of text — support, limits, contact. */
.illnote { display: flex; gap: var(--s3); align-items: center; }
.illnote__ill { flex: none; display: block; width: 128px; height: 128px; }
.illnote__body > :last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .illnote { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .illnote__ill { width: 96px; height: 96px; }
}

.rg-strip {
  background: var(--paper-sunk); border-top: var(--rule); border-bottom: var(--rule);
  padding-block: var(--s3); font-size: var(--fs-small);
}
.rg-strip__inner { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; }
.rg-strip b { font-family: var(--font-mono); }

/* ---------- 13. Tables --------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--paper-edge); border-radius: var(--radius); background: var(--paper-raised); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 560px; }
table.data caption { text-align: left; padding: var(--s2) var(--s3); color: var(--ink-soft); font-size: var(--fs-small); }
table.data th, table.data td { padding: 14px var(--s2); text-align: left; border-bottom: 1px solid var(--paper-edge); vertical-align: top; }
table.data thead th {
  background: var(--legion-navy); color: #fff;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
table.data tbody tr:nth-child(even) { background: rgba(18,41,75,.03); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- 14. Accordion / FAQ ------------------------------------------ */

.accordion { border-top: 1px solid var(--paper-edge); }
.accordion details { border-bottom: 1px solid var(--paper-edge); }
.accordion summary {
  cursor: pointer; padding: var(--s3) var(--s5) var(--s3) 0; position: relative;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.3;
  list-style: none; min-height: 48px;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+"; position: absolute; right: var(--s2); top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 1.6rem; color: var(--legion-red-deep); line-height: 1;
  transition: transform .2s ease;
}
.accordion details[open] summary::after { content: "–"; }
.accordion summary:hover { color: var(--legion-red-deep); }
.accordion__body { padding-bottom: var(--s3); }
.accordion__body > :last-child { margin-bottom: 0; }

/* ---------- 15. Forms ---------------------------------------------------- */

.field { margin-bottom: var(--s3); max-width: 46rem; }
.field label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 1.0625rem; }
.field .hint { display: block; font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1.0625rem;
  padding: 13px 14px; min-height: 52px;
  background: var(--paper-raised); color: var(--ink);
  border: 1.5px solid #b9b1a3; border-radius: var(--radius);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--legion-navy); }
.field .err { display: block; margin-top: 8px; color: var(--stop); font-weight: 600; font-size: var(--fs-small); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--stop); border-width: 2px; }
fieldset { border: 1px solid var(--paper-edge); border-radius: var(--radius); padding: var(--s3); margin: 0 0 var(--s3); }
legend { font-weight: 600; padding-inline: 8px; }
.check { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--s2); max-width: 46rem; }
.check input { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--legion-red); }
.check label { font-size: var(--fs-small); font-weight: 400; }

/* ---------- 16. Page head / breadcrumbs ---------------------------------- */

.pagehead {
  background: linear-gradient(180deg, var(--paper-raised), var(--paper));
  border-bottom: var(--rule); padding-block: var(--s5) var(--s4);
}
.pagehead h1 { max-width: 22ch; }
.pagehead .lede { margin-top: var(--s2); }
.crumbs { font-size: var(--fs-small); margin-bottom: var(--s3); color: var(--ink-soft); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ink-faint); }
.crumbs a { color: var(--ink-soft); }

.pagehead--navy { background: var(--legion-navy-deep); color: #e7ecf4; border-bottom: 3px solid var(--legion-gold); }
.pagehead--navy h1 { color: #fff; }
.pagehead--navy .lede { color: #c3cddd; }
.pagehead--navy .crumbs, .pagehead--navy .crumbs a { color: #b9c4d6; }

/* ---------- 17. Legal doc styling ---------------------------------------- */

.legaldoc { max-width: var(--measure); }
.legaldoc h2 { margin-top: var(--s5); padding-top: var(--s3); border-top: var(--rule); font-size: 1.5rem; }
.legaldoc h3 { margin-top: var(--s4); font-size: 1.2rem; }
.legaldoc ol, .legaldoc ul { padding-left: 1.3em; }
.legaldoc li { margin-bottom: 10px; }
.toc { background: var(--paper-sunk); border: 1px solid var(--paper-edge); border-radius: var(--radius); padding: var(--s3); }
.toc ol { margin: 0; padding-left: 1.2em; column-gap: var(--s4); }
.toc li { margin-bottom: 6px; }

/* ---------- 18. Footer --------------------------------------------------- */

.sitefoot { background: var(--legion-navy-deep); color: #c3cddd; border-top: 3px solid var(--legion-gold); }
.sitefoot a { color: #dfe6f0; text-decoration: none; }
.sitefoot a:hover { color: #fff; text-decoration: underline; }
.sitefoot__top { display: grid; gap: var(--s4); grid-template-columns: 1.4fr repeat(3, 1fr); padding-block: var(--s5); }
@media (max-width: 900px) { .sitefoot__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sitefoot__top { grid-template-columns: 1fr; } }
.sitefoot h2 {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--legion-gold-soft); margin-bottom: var(--s2);
}
.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot li { margin-bottom: 10px; font-size: var(--fs-small); }
.sitefoot__base {
  border-top: 1px solid rgba(255,255,255,.16); padding-block: var(--s3);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); justify-content: space-between;
  font-size: .95rem;
}

/* ---------- 19. Sticky mobile buy bar ------------------------------------ */

.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--paper-raised); border-top: 2px solid var(--legion-red);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: none; gap: var(--s2); align-items: center;
  box-shadow: 0 -6px 20px rgba(36,31,28,.16);
}
.buybar__info { font-size: .9rem; line-height: 1.25; }
.buybar__info b { font-family: var(--font-mono); color: var(--legion-red-deep); display: block; font-size: 1.05rem; }
.buybar .btn { margin-left: auto; min-height: 48px; padding-inline: 20px; }
@media (max-width: 780px) {
  .buybar { display: flex; }
  body.has-buybar { padding-bottom: 84px; }
}

/* ---------- 20. Modals: age gate + consent ------------------------------- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(11,26,49,.82);
  display: grid; place-items: center; padding: var(--s3);
  backdrop-filter: blur(3px);
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--paper); border-radius: var(--radius); max-width: 560px; width: 100%;
  border-top: 6px solid var(--legion-red); box-shadow: 0 30px 70px -20px rgba(0,0,0,.7);
  padding: var(--s4); animation: rise .3s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modal h2 { font-size: 1.7rem; }
.modal__actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.modal__actions .btn { flex: 1 1 190px; }
.modal__fine { font-size: var(--fs-small); color: var(--ink-soft); margin-top: var(--s3); margin-bottom: 0; }

.cookiebar {
  position: fixed; left: var(--s2); right: var(--s2); bottom: var(--s2); z-index: 110;
  background: var(--paper-raised); border: 1px solid var(--paper-edge);
  border-top: 4px solid var(--legion-navy); border-radius: var(--radius);
  box-shadow: 0 -8px 40px -12px rgba(0,0,0,.45);
  padding: var(--s3); max-width: var(--shell); margin-inline: auto;
}
.cookiebar[hidden] { display: none; }
.cookiebar__grid { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.cookiebar__grid > div { flex: 1 1 420px; }
.cookiebar__actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.cookiebar p { font-size: var(--fs-small); margin-bottom: 0; }
@media (max-width: 780px) { .cookiebar { bottom: 92px; } }

.toggle-row {
  display: flex; align-items: flex-start; gap: 12px; padding: var(--s2) 0;
  border-bottom: 1px solid var(--paper-edge);
}
.toggle-row:last-of-type { border-bottom: 0; }
.toggle-row input { width: 24px; height: 24px; margin-top: 2px; accent-color: var(--legion-navy); }
.toggle-row div { flex: 1; }
.toggle-row b { display: block; }
.toggle-row span { font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------- 21. Misc components ------------------------------------------ */

.factgrid { display: grid; gap: 1px; background: var(--paper-edge); border: 1px solid var(--paper-edge); border-radius: var(--radius); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.fact { background: var(--paper-raised); padding: var(--s3); }
.fact dt { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.fact dd { margin: 6px 0 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.fact dd small { font-family: var(--font-body); font-size: .95rem; font-weight: 400; color: var(--ink-soft); display: block; margin-top: 4px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px; border: 1px solid currentColor; font-weight: 600;
}
.pill--ok { color: var(--ok); background: rgba(31,107,69,.08); }
.pill--warn { color: var(--warn); background: rgba(138,90,6,.08); }
.pill--stop { color: var(--stop); background: rgba(168,16,42,.08); }
.pill--info { color: var(--info); background: rgba(29,78,121,.08); }
.pill--neutral { color: var(--ink-soft); background: rgba(90,81,72,.08); }

.share { display: flex; gap: var(--s2); flex-wrap: wrap; }
.sharebtn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px;
  background: var(--paper-raised); border: 1.5px solid var(--legion-navy); color: var(--legion-navy);
  border-radius: var(--radius); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  text-decoration: none;
}
.sharebtn:hover { background: var(--legion-navy); color: #fff; }

.figureframe {
  border: 1px solid var(--paper-edge); background: var(--paper-raised); padding: var(--s2);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.figureframe figcaption {
  font-size: var(--fs-small); color: var(--ink-soft); padding: var(--s2) 4px 0;
  border-top: 1px dashed var(--paper-edge); margin-top: var(--s2);
}

.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--paper-edge); }
.timeline li { position: relative; padding: 0 0 var(--s3) var(--s3); max-width: var(--measure); }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--legion-red); border: 2px solid var(--paper);
}
.timeline b { display: block; font-family: var(--font-display); font-size: 1.1rem; }
.timeline time { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-faint); letter-spacing: .08em; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Toast */
.toasts { position: fixed; right: var(--s2); bottom: var(--s2); z-index: 200; display: grid; gap: 10px; }
.toast {
  background: var(--legion-navy); color: #fff; padding: 12px 18px; border-radius: var(--radius);
  box-shadow: var(--shadow-lift); font-size: var(--fs-small); max-width: 380px;
  border-left: 4px solid var(--legion-gold); animation: rise .25s ease-out;
}

/* ---------- 22. Print (Rules of Play — SPEC §10.1.14) -------------------- */

@media print {
  :root { --paper: #fff; --paper-raised: #fff; }
  body { font-size: 11.5pt; color: #000; background: #fff; }
  body::before, .masthead, .sitefoot, .buybar, .cookiebar, .modal-backdrop,
  .rg-strip, .noprint, .crumbs, .toasts { display: none !important; }
  .shell, .shell--tight { width: auto; max-width: none; }
  .section { padding-block: 0; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .legaldoc h2 { break-after: avoid; page-break-after: avoid; }
  .legaldoc li, .legaldoc p { break-inside: avoid; }
  .printhead { display: block !important; border-bottom: 2pt solid #000; margin-bottom: 12pt; padding-bottom: 8pt; }
}
.printhead { display: none; }

/* ---------- Photography ---------------------------------------------------
   Photography and figure frames. Every image carries a written description.
   ------------------------------------------------------------------------ */
.figureframe img { display: block; width: 100%; height: auto; border-radius: 2px; background: var(--paper-sunk); }

.photogrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin-top: var(--s4); }
.photogrid figure { margin: 0; }
.photogrid img {
  display: block; width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--paper-edge); background: var(--paper-sunk);
}
.photogrid figcaption { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 10px; }
@media (max-width: 640px) { .photogrid { grid-template-columns: 1fr; } }

.zoneband { margin: var(--s5) 0 0; }
.zoneband img {
  display: block; width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid rgba(201, 162, 39, .28);
}
.zoneband figcaption {
  font-size: var(--fs-small); color: #a9b6ca; margin-top: 12px;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em;
}

/* ---------- Legal document navigation -------------------------------------
   The Rules of Play must be easy to reach from anywhere (AGCO Raffle Licence
   T&C 3.1 — rules must be made available to purchasers).
   ------------------------------------------------------------------------ */
.legalnav {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s4);
  padding: 0 0 var(--s3); border-bottom: 1px solid var(--paper-edge); list-style: none;
}
.legalnav li { margin: 0; }
.legalnav a {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--paper-edge);
  border-radius: var(--radius); background: var(--paper-raised);
  font-size: var(--fs-small); text-decoration: none; color: var(--ink);
  min-height: 44px; line-height: 26px;
}
.legalnav a:hover { border-color: var(--legion-navy); }
.legalnav a[aria-current="page"] {
  background: var(--legion-navy); border-color: var(--legion-navy); color: #fff; font-weight: 600;
}
@media print { .legalnav { display: none; } }

.legaldoc h3 { margin-top: var(--s3); }
.legaldoc dl.deflist { margin: 0 0 var(--s3); }
.legaldoc dl.deflist dt { font-weight: 600; margin-top: var(--s2); }
.legaldoc dl.deflist dd { margin: 4px 0 0 0; color: var(--ink-soft); }

/* Card and notice headings keep their visual size when promoted to h2 for
   correct document outline (no h1 → h3 skips). */
.card h2 { font-size: var(--fs-h3); font-weight: 600; }
h2.eyebrow { font-family: var(--font-mono); font-weight: 400; }

/* ---------- 23. 18+ badge (RG strip) -------------------------------------
   The age restriction is the single most important compliance mark on the
   page, so it is set once, as a filled pill, rather than as a run of small
   print beside a second ring saying the same thing.
   ------------------------------------------------------------------------ */
.age-pill {
  display: inline-block; margin-right: 6px; padding: 6px 16px;
  border-radius: 999px; background: var(--legion-red-deep); color: #fff;
  box-shadow: 0 0 0 3px rgba(168,16,42,.15);
  font-family: var(--font-mono); font-weight: 700; font-size: .95rem;
  letter-spacing: .06em; line-height: 1.2; white-space: nowrap;
  vertical-align: baseline;
}
.rg-strip__inner > p { flex: 1 1 260px; }

/* ---------- 24. Footer licence band -------------------------------------
   AGCO requires the licence number to appear in all advertising; the
   regulator lock-up sits beside the operator disclosure so the two are read
   together. The licence facts themselves live once on this page, on the
   legal pages — repeating them here only diluted them.
   ------------------------------------------------------------------------ */
.licencebar {
  border-top: 1px solid rgba(255,255,255,.16); padding-block: var(--s4);
  display: grid; grid-template-columns: minmax(180px, 220px) 1fr; gap: var(--s3) var(--s5);
  align-items: start;
}
@media (max-width: 780px) { .licencebar { grid-template-columns: 1fr; } }
.licencebar__logo { display: block; text-decoration: none; }
.licencebar__logo img { display: block; width: 100%; max-width: 220px; height: auto; }
.licencebar__logo:hover { text-decoration: none; }
.licencebar__body p {
  font-size: var(--fs-small); line-height: 1.65; color: #ccd5e3;
  max-width: 92ch; margin: 0 0 var(--s3);
}
.licencebar__body p:last-child { margin-bottom: 0; }
.licencebar__body b { color: #fff; font-weight: 600; }
.licencebar__body .mono { color: #fff; }
.licencebar__body a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 25. Operator / licence disclosure box ------------------------
   Required on the legal pages. One block, on a beige panel, carrying every
   operator and licence fact exactly once — the old second "docmeta" strip
   repeated half of them.
   ------------------------------------------------------------------------ */
.aboutbox {
  border: 2px solid var(--legion-navy); border-left-width: 8px;
  background: #efe6d1;
  border-radius: var(--radius); padding: var(--s4);
  margin: 0 0 var(--s5); box-shadow: var(--shadow-card);
}
.aboutbox > :last-child { margin-bottom: 0; }
.aboutbox h2 {
  margin-top: 0; padding-top: 0; border-top: 0; font-size: var(--fs-h3);
}
.aboutbox__eyebrow {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--legion-red-deep); margin: 0 0 10px;
}
.aboutbox dl {
  /* min() keeps the track from outgrowing a narrow container — a bare
     minmax(300px, 1fr) overflows the padded box on a phone. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 10px var(--s4); margin: var(--s3) 0 0;
  border-top: 1px solid #d8cbab; padding-top: var(--s3);
}
.aboutbox dl > div { display: grid; grid-template-columns: 11rem 1fr; gap: 8px; align-items: baseline; }
.aboutbox dt { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; color: var(--ink-soft); }
.aboutbox dd { margin: 0; font-weight: 600; font-size: var(--fs-small); overflow-wrap: anywhere; }
@media (max-width: 520px) { .aboutbox dl > div { grid-template-columns: 1fr; gap: 2px; } }
/* Must sit after the .aboutbox rules above: the print block in section 22 is
   earlier in the file and would lose the cascade at equal specificity.
   The block now carries every licence fact, so it must not break across pages
   and must not flood the sheet with beige. */
@media print {
  .aboutbox { background: #fff; box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- 26. Account pages: register / sign-in / checkout --------------- */
.formpage { display: grid; grid-template-columns: 1fr minmax(280px, 380px); gap: var(--s6); align-items: start; }
@media (max-width: 900px) { .formpage { grid-template-columns: 1fr; gap: var(--s4); } }
.formpage__aside { position: sticky; top: var(--s3); display: grid; gap: var(--s3); }
@media (max-width: 900px) { .formpage__aside { position: static; } }

.fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
@media (max-width: 620px) { .fieldrow { grid-template-columns: 1fr; } }
.fieldset { border: 0; padding: 0; margin: 0 0 var(--s4); }
.fieldset legend {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0; margin-bottom: var(--s3);
  border-bottom: 1px solid var(--paper-edge); width: 100%; padding-bottom: 10px;
}
.pwmeter { display: block; margin-top: 8px; font-size: var(--fs-small); color: var(--ink-soft); }

/* Form-level error summary (also used by the Branch Office sign-in). */
.formerror {
  display: none; background: #fcf0f1; border: 1px solid var(--stop); border-left-width: 5px;
  border-radius: var(--radius); padding: 12px 16px; font-size: .95rem; color: #7c0c1f;
  margin-bottom: var(--s3); font-weight: 600;
}
.formerror.is-shown { display: block; }

.ordersum { background: var(--paper-raised); border: 1px solid var(--paper-edge); border-radius: var(--radius); padding: var(--s3); }
.ordersum h2 { font-size: 1.25rem; margin-bottom: var(--s2); }
.ordersum__row { display: flex; justify-content: space-between; gap: var(--s2); padding: 10px 0; border-bottom: 1px solid var(--paper-edge); font-size: var(--fs-small); }
.ordersum__row:last-of-type { border-bottom: 0; }
.ordersum__row b { font-family: var(--font-mono); }
.ordersum__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-top: var(--s2); padding-top: var(--s2); border-top: 2px solid var(--legion-navy); }
.ordersum__total b { font-family: var(--font-mono); font-size: 1.6rem; color: var(--legion-red-deep); }

.bundlepick { display: grid; gap: 12px; margin: 0 0 var(--s3); }
.bundlepick label {
  display: flex; gap: 12px; align-items: center; padding: 14px var(--s2);
  border: 2px solid var(--paper-edge); border-radius: var(--radius); background: var(--paper-raised);
  cursor: pointer; font-weight: 400; margin: 0; min-height: 56px;
}
.bundlepick input { width: 22px; height: 22px; flex: none; accent-color: var(--legion-red); }
.bundlepick label:hover { border-color: var(--legion-navy); }
.bundlepick input:checked + span { font-weight: 600; }
.bundlepick label:has(input:checked) { border-color: var(--legion-red); background: #fff; }
.bundlepick .qty { font-family: var(--font-mono); font-size: 1.1rem; }
.bundlepick .price { margin-left: auto; font-family: var(--font-mono); font-weight: 600; }

.paylist { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 var(--s3); list-style: none; padding: 0; }
.paylist li {
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em;
  border: 1px solid var(--paper-edge); border-radius: var(--radius);
  background: #fff; padding: 8px 12px; color: var(--ink-soft);
  display: flex; align-items: center; min-height: 42px;
}
.paylist img { display: block; width: auto; height: 22px; }

.steps-inline { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); list-style: none; margin: 0 0 var(--s4); padding: 0; }
.steps-inline li {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); display: flex; gap: 8px; align-items: center;
}
.steps-inline li[aria-current="step"] { color: var(--legion-red-deep); font-weight: 600; }
.steps-inline li b {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid currentColor; font-size: .72rem;
}