/*
  DESIGN
  The page is a Request for Decision, the report format every CAO reads
  each week: memo header, numbered sections, figures, "Respectfully
  submitted". It sits as one sheet of paper on a grey desk. Plain sans
  for the report text, as council reports use; serif only for the
  headline. The one dramatic moment is the ALTERED stamp in Figure 1.
  Light only, on purpose, to match the product.
*/
:root {
  color-scheme: light;
  --ink: #1A2B4C;        /* navy: headings, rules, wordmark */
  --text: #222a38;       /* report text */
  --muted: #5d677a;
  --gold: #B8912F;       /* the X and the action buttons */
  --paper: #ffffff;
  --desk: #e4e1da;       /* behind the sheet */
  --rule: #cfcabd;
  --note: #f6f3ea;       /* shaded boxes inside the sheet */
  --ok: #2f6b4f;
  --alert: #b3261e;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", Arial, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0b1426; color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }

/* LESSON 1a: THE SCENE
   The opening is a short interactive film. Black letterbox bars top and
   bottom, like a cinema screen, and dialogue set as subtitles. Each beat
   is an element that starts hidden and is revealed in turn by the script
   (section 0). Without JavaScript every beat simply shows. */
.scene { position: relative; min-height: 100vh; min-height: 100svh; background: #0d1628; color: #fff; display: grid; grid-template-rows: auto 1fr auto; }
.bar { height: clamp(28px, 9vh, 90px); background: #000; }
.scene-top { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: clamp(28px, 9vh, 90px); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: env(safe-area-inset-top, 0px) clamp(16px, 4vw, 48px) 0; }
.scene-top .wordmark { color: #fff; font-size: 0.95rem; }
.scene-top a.skip-scene { color: #8d99b3; font-size: 0.85rem; }
.stage { display: grid; align-content: center; justify-items: center; gap: clamp(18px, 3vh, 30px); padding: clamp(24px, 5vh, 56px) clamp(16px, 5vw, 64px); text-align: center; }
.agenda { font: 500 clamp(0.72rem, 1.6vw, 0.85rem)/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #8d99b3; }
.line { font: 400 clamp(1.45rem, 3.6vw, 2.5rem)/1.3 var(--serif); max-width: 30ch; text-wrap: balance; }
.line .who { display: block; font: 600 0.8rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.prompt { font: 500 0.9rem/1.4 var(--mono); color: #c9d1e0; }
.cursor { display: inline-block; width: 0.6em; height: 1.1em; vertical-align: -0.15em; background: #c9d1e0; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.choice { font: 600 1rem/1.2 var(--sans); padding: 14px 20px; border-radius: 3px; cursor: pointer; border: 1.5px solid #8d99b3; background: transparent; color: #fff; }
.choice:hover { border-color: #fff; }
.choice.primary { background: var(--gold); border-color: var(--gold); }
.choice.primary:hover { background: #9e7c27; }
.minutes { font: 400 0.92rem/1.6 var(--mono); color: #c9d1e0; background: rgba(255,255,255,0.06); border-left: 3px solid #8d99b3; padding: 12px 16px; text-align: left; max-width: 46ch; }

/* The record that answers the question */
.rec { position: relative; width: min(100%, 560px); background: #fff; color: var(--text); text-align: left; border-top: 6px solid var(--gold); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.rec-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--rule); font: 600 0.78rem/1.4 var(--mono); color: var(--ink); }
.rec-head .ok { color: #fff; background: var(--ok); padding: 2px 8px; border-radius: 3px; }
.rec-head .ok.broken { background: var(--alert); }
.rec dl { margin: 0; padding: 6px 16px 10px; display: grid; grid-template-columns: 7.5rem 1fr; gap: 8px 12px; font-size: 0.92rem; }
.rec dt { font: 500 0.72rem/1.6 var(--mono); text-transform: uppercase; color: var(--muted); }
.rec dd { margin: 0; min-width: 0; }
.rec dd mark { background: #fbe3df; color: var(--alert); }
.rec-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--rule); background: var(--note); font-size: 0.8rem; color: var(--muted); }

/* The two endings stack their parts on the same centre line as the dialogue. */
.stage > .path:not([hidden]) { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* Beats: hidden until their turn, then they rise into place. */
.js .beat { opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity 0.8s ease, transform 0.8s ease, visibility 0s linear 0.8s; }
.js .beat.in { opacity: 1; transform: none; visibility: visible; transition: opacity 0.8s ease, transform 0.8s ease; }
.js .beat.gone { display: none; }
@media (max-width: 700px) { .rec dl { grid-template-columns: 1fr; gap: 2px; } .rec dd { margin-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .js .beat, .js .beat.in { transition: none; transform: none; } .cursor { animation: none; } }

/* The desk the report sits on. It scrolls over the film. */
.desk { position: relative; z-index: 1; background: #0d1628; padding: clamp(24px, 4vw, 56px) clamp(12px, 3vw, 40px) 110px; }
img { max-width: 100%; display: block; }
a { color: var(--ink); }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip { position: absolute; left: -999px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { left: 16px; top: 16px; background: #fff; padding: 8px 12px; z-index: 50; }

/* LESSON 1: the sheet. One white page, centred, with a soft shadow so it
   reads as paper on a desk. On a phone it fills the screen edge to edge. */
/* LESSON 5: papers on the table. Each section is its own sheet of paper
   on the desk. Sheets sit still: they used to start tilted and slide into
   place as they scrolled into view, but that moved the page under the
   reader after every click, so it was taken out (Joy Guyot, 2026-10-24). */
.sheet { position: relative; max-width: 900px; margin: 0 auto; }
.paper { position: relative; background: var(--paper); box-shadow: 0 24px 60px rgba(0,0,0,.5); padding: clamp(20px, 5vw, 56px); margin-bottom: clamp(18px, 3vw, 34px); }

.wordmark { font: 600 1.15rem/1 var(--serif); letter-spacing: 0.22em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.wordmark .x { color: var(--gold); }
.wordmark sup { font-size: 0.5em; letter-spacing: 0; margin-left: 1px; }
.tagline { display: block; font: italic 400 0.75rem/1.2 var(--serif); letter-spacing: 0.02em; color: var(--muted); margin-top: 6px; }

/* Letterhead and the memo block */
.letterhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 3px solid var(--ink); }
.doc-type { font: 700 0.9rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); text-align: right; }
.doc-type span { display: block; font: 400 0.8rem/1.4 var(--mono); letter-spacing: 0; text-transform: none; color: var(--muted); }
.memo { width: 100%; border-collapse: collapse; margin: 18px 0 8px; font-size: 0.98rem; }
.memo th { text-align: left; vertical-align: baseline; width: 7.5rem; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--muted); }
.memo td { vertical-align: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: 0.88rem; }
.nav a { color: var(--muted); }

/* LESSON 2: numbered sections. CSS counters number them for us, so
   adding or removing a section renumbers the rest automatically. */
main { counter-reset: sec; }
.sec { counter-increment: sec; }
.sec > h2 { font: 700 1rem/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.sec > h2::before { content: counter(sec) ".  "; white-space: pre; }
.sec p + p { margin-top: 12px; }
h1 { font: 700 clamp(1.9rem, 4.6vw, 2.8rem)/1.12 var(--serif); color: var(--ink); margin: 0 0 16px; letter-spacing: -0.01em; text-wrap: balance; }
h3 { font: 700 1rem/1.3 var(--sans); color: var(--ink); margin: 0 0 4px; }
.source { margin-top: 14px; font-size: 0.85rem; color: var(--muted); padding-left: 12px; border-left: 3px solid var(--rule); }
.source a { color: var(--muted); }

/* The recommendation, set off like the motion in a real report */
.motion { background: var(--note); border-left: 4px solid var(--gold); padding: 18px 20px; display: grid; gap: 14px; justify-items: start; }
.motion p { font-size: 1.05rem; }
.motion b { letter-spacing: 0.04em; }

.btn { display: inline-flex; align-items: center; justify-content: center; font: 700 0.95rem/1 var(--sans); text-decoration: none; cursor: pointer; padding: 13px 20px; border-radius: 3px; border: 2px solid transparent; white-space: nowrap; }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: #9e7c27; }
.btn-line { border-color: var(--ink); color: var(--ink); background: #fff; }
.btn-small { padding: 9px 14px; font-size: 0.85rem; }
.btn-tamper { background: var(--alert); color: #fff; }
.btn-tamper:hover { background: #8f1e17; }

/* Figures */
figure { margin: 22px 0 0; }
figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 8px; }
figcaption b { color: var(--text); }

/* Figure 1: the register */
.record-sheet { position: relative; border: 1.5px solid var(--ink); background: #fff; overflow: hidden; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1.5px solid var(--ink); background: var(--note); }
.sheet-title { font: 600 0.78rem/1.3 var(--mono); color: var(--ink); }
.chain-status { font: 600 0.8rem/1.2 var(--mono); padding: 4px 10px; border-radius: 3px; background: var(--ok); color: #fff; }
.chain-status.broken { background: var(--alert); }
.records { list-style: none; margin: 0; padding: 0; }
.record { display: grid; grid-template-columns: 8.5rem 1fr; gap: 4px 14px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.record:last-child { border-bottom: 0; }
.rec-id { font: 600 0.8rem/1.5 var(--mono); color: var(--ink); }
.rec-risk { font: 500 0.7rem/1.5 var(--mono); color: var(--muted); text-transform: uppercase; }
.rec-body { min-width: 0; }
.rec-text { font-size: 0.93rem; }
.rec-text mark { background: #fbe3df; color: var(--alert); padding: 0 2px; }
.rec-hash { font: 400 0.7rem/1.5 var(--mono); color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.record.bad { background: #fdf1ef; }
.record.bad .rec-hash { color: var(--alert); }
.sheet-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; border-top: 1.5px solid var(--ink); }
.sheet-foot p { font-size: 0.82rem; color: var(--muted); max-width: 44ch; }

/* LESSON 3: the stamp. Hidden until the chain breaks, then it slams
   down like a rubber stamp. Less motion for people who ask for it. */
.stamp { position: absolute; left: 50%; top: 46%; pointer-events: none; font: 700 clamp(1.5rem, 5vw, 2.4rem)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--alert); border: 5px solid var(--alert); border-radius: 6px; padding: 10px 18px; background: rgba(255,255,255,0.9); text-align: center; transform: translate(-50%, -50%) rotate(-9deg) scale(2.2); opacity: 0; }
.stamp small { display: block; font-size: 0.42em; letter-spacing: 0.06em; margin-top: 6px; }
.stamp.on { animation: slam 0.42s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes slam { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-9deg) scale(2.2); } 60% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%,-50%) rotate(-9deg) scale(1); } }
.record-sheet.shake, .rec.shake { animation: shake 0.35s ease 0.3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .stamp.on { animation: none; opacity: 1; transform: translate(-50%,-50%) rotate(-9deg); }
  .record-sheet.shake, .rec.shake { animation: none; }
  html { scroll-behavior: auto; }
}

/* Plain report tables: background figures, roles, pricing */
.table-scroll { overflow-x: auto; }
.rtable { width: 100%; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.rtable th, .rtable td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--rule); }
.rtable thead th { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1.5px solid var(--ink); }
.rtable td.num, .rtable th.num { text-align: right; white-space: nowrap; }
.rtable tbody th { font-weight: 700; color: var(--ink); width: 11rem; }
.rtable tr.mine td, .rtable tr.mine th { background: #fbf5e4; }
.big { font: 700 1.5rem/1.1 var(--serif); color: var(--ink); white-space: nowrap; }

.steps { margin: 0; padding-left: 1.4rem; display: grid; gap: 10px; }
.steps li::marker { font-weight: 700; color: var(--ink); }
.film-frame { border: 1.5px solid var(--ink); }
.shot { border: 1px solid var(--rule); }

/* Self-check */
.qs { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: q; border-top: 1px solid var(--rule); }
.qs li { counter-increment: q; display: grid; grid-template-columns: 2rem 1fr auto; gap: 8px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.qs li::before { content: counter(q); font: 600 0.9rem/1 var(--mono); color: var(--gold); }
.qs p { font-size: 0.97rem; }
.yn { display: flex; gap: 6px; }
.yn button { font: 600 0.85rem/1 var(--sans); padding: 9px 12px; border-radius: 3px; border: 1.5px solid var(--rule); background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap; }
.yn button[aria-pressed="true"][data-a="yes"] { background: var(--ok); border-color: var(--ok); color: #fff; }
.yn button[aria-pressed="true"][data-a="no"], .yn button[aria-pressed="true"][data-a="unsure"] { background: var(--alert); border-color: var(--alert); color: #fff; }
.tally { margin-top: 18px; padding: 16px 18px; background: var(--note); border-left: 4px solid var(--ink); display: grid; gap: 12px; justify-items: start; }
.tally p { font-size: 1.02rem; color: var(--ink); }
.meter { width: 100%; height: 10px; background: #e6e1d4; display: flex; }
.meter span { display: block; height: 100%; width: 0; background: var(--alert); transition: width 0.5s ease; }
.gets { margin: 8px 0 0; padding-left: 1.2rem; display: grid; gap: 6px; }
.bio { font-size: 0.86rem; color: var(--muted); margin-top: 6px; }

/* Sign-up bar that follows the reader once the scene is over */
.follow { position: fixed; z-index: 30; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 160%); display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; background: #0b1426; color: #d5dbe7; border: 1px solid #2a3550; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.4); font-size: 0.88rem; transition: transform 0.4s ease; max-width: calc(100% - 24px); }
.follow.show { transform: translate(-50%, 0); }

/* Risk picker: choose a level, the chain redraws */
.picker { margin-top: 26px; border: 1.5px solid var(--ink); }
.picker-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 14px; background: var(--note); border-bottom: 1.5px solid var(--ink); }
.picker-head span { font: 600 0.78rem/1.3 var(--mono); color: var(--ink); text-transform: uppercase; }
.levels { display: flex; flex-wrap: wrap; gap: 6px; }
.level { font: 700 0.88rem/1 var(--sans); padding: 9px 14px; border-radius: 3px; border: 1.5px solid var(--rule); background: #fff; color: var(--ink); cursor: pointer; }
.level[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chain { list-style: none; margin: 0; padding: 16px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.chain li { flex: 1 1 140px; min-width: 0; border: 1px solid var(--rule); padding: 10px 12px; font-size: 0.88rem; animation: drop 0.45s ease both; }
.chain li b { display: block; font: 600 0.72rem/1.4 var(--mono); text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.chain li.stop { border-color: var(--alert); background: #fdf1ef; color: var(--alert); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.picker-note { padding: 0 14px 14px; font-size: 0.85rem; color: var(--muted); }

.lookup { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin: 16px 0 6px; padding: 14px; background: var(--note); border: 1px solid var(--rule); }
.lookup .field { flex: 0 1 240px; }
.lookup-out { font: 700 1.1rem/1.3 var(--serif); color: var(--ink); min-height: 1.3em; }

/* Team */
.team { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.member { display: grid; gap: 2px; align-content: start; min-width: 0; font-size: 0.9rem; flex: 0 1 calc((100% - 44px) / 3); text-align: center; }
.portrait { position: relative; aspect-ratio: 4 / 5; max-width: 100%; background: var(--note); border: 1px solid var(--rule); display: grid; place-items: center; margin-bottom: 8px; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait .initials { font: 700 1.8rem/1 var(--serif); color: var(--ink); opacity: 0.35; }
.portrait .ph-label { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 500 0.62rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.member b { color: var(--ink); }
.member span { color: var(--muted); }
.write-here { margin-top: 14px; border: 2px dashed var(--gold); background: #fbf5e4; padding: 14px 16px; font-size: 0.92rem; color: var(--ink); }
.write-here b { display: block; font: 600 0.75rem/1.3 var(--mono); text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }

/* Form */
.form { display: grid; gap: 14px; margin-top: 16px; padding: 18px; background: var(--note); border: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 5px; min-width: 0; }
.field label { font-weight: 700; font-size: 0.88rem; color: var(--ink); }
.field input, .field select { font: 400 1rem/1.3 var(--sans); padding: 11px; border: 1.5px solid var(--rule); border-radius: 3px; background: #fff; color: var(--text); width: 100%; }
.field input:focus, .field select:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(26,43,76,0.15); }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 0.85rem; color: var(--muted); }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); }
.estimate { font-size: 0.9rem; color: var(--ink); background: #fbf5e4; padding: 8px 10px; }
.done { display: grid; gap: 10px; }
.done pre { white-space: pre-wrap; font: 400 0.82rem/1.5 var(--mono); background: #fff; border: 1px solid var(--rule); padding: 12px; margin: 0; overflow-x: auto; }
.done .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.addr { font-family: var(--mono); user-select: all; }

details { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: var(--ink); }
details p { padding-bottom: 14px; color: var(--muted); }

.signed { display: grid; gap: 2px; }
.signed .line { width: 220px; border-bottom: 1px solid var(--text); height: 36px; margin-bottom: 6px; }
.doc-foot { margin-top: 40px; padding-top: 14px; border-top: 1px solid #2a3550; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; font-size: 0.8rem; color: #8d99b3; }
.doc-foot nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.doc-foot a { color: #8d99b3; }

@media (max-width: 700px) {
  body { padding: 0; }
  .qs li { grid-template-columns: 1.6rem 1fr; }
  .qs .yn { grid-column: 2; }
  .follow { left: 12px; right: 12px; transform: translateY(160%); justify-content: space-between; }
  .follow.show { transform: none; }
  #follow-text { font-size: 0.8rem; }
  .doc-type { text-align: left; }
  .member { flex-basis: calc((100% - 22px) / 2); }
  .row { grid-template-columns: 1fr; }
  .record { grid-template-columns: 1fr; }
  .rtable tbody th { width: auto; }
  .memo th { width: 5.5rem; }
}

/* ---------- Attachment pages: top bar ---------- */
.topbar { background: #0b1426; border-bottom: 1px solid #2a3550; }
.topbar .in { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 18px; padding: calc(12px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 40px) 12px; }
.topbar .wordmark { color: #fff; font-size: 0.95rem; }
.topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 0.9rem; }
.topbar nav a:not(.btn) { color: #c9d1e0; text-decoration: none; }
.topbar nav a:not(.btn):hover, .topbar nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.page-title { margin: 22px 0 6px; }

/* ---------- Sign-up with the briefing offer ---------- */
.offer { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(20px, 4vw, 40px); margin-top: 22px; align-items: start; }
.offer > div { min-width: 0; }
.offer .form { margin-top: 0; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--alert); font-size: 0.9rem; }
.done:focus { outline: none; }

/* ---------- Attachments ---------- */
.attach { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.attach a { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 16px; border: 1.5px solid var(--rule); text-decoration: none; color: var(--text); height: 100%; transition: border-color 0.2s ease; }
.attach a:hover { border-color: var(--ink); }
.attach .tag { grid-row: span 2; font: 700 1.6rem/1 var(--serif); color: var(--gold); }
.attach b { color: var(--ink); font-size: 1.05rem; }
.attach span:not(.tag) { font-size: 0.9rem; color: var(--muted); }

.back .motion { margin: 0; }

@media (max-width: 700px) {
  .offer, .attach { grid-template-columns: 1fr; }
}

/* ---------- Statement: what it is, that it is Canadian, and no AI inside ---------- */
.statement { border-top: 6px solid #d52b1e; }
.eyebrow-red { font: 600 0.8rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #d52b1e; margin-bottom: 12px; }
.statement-h { font: 700 clamp(1.7rem, 4.2vw, 2.7rem)/1.12 var(--serif); color: var(--ink); max-width: 24ch; text-wrap: balance; margin: 0 0 14px; }
.statement-p { font-size: 1.1rem; max-width: 62ch; }
.no-ai { margin-top: 20px; padding: 16px 18px; background: var(--ink); color: #e3e8f1; display: grid; gap: 6px; }
.no-ai-h { font: 700 1.25rem/1.2 var(--serif); color: #fff; }
.no-ai p:not(.no-ai-h) { font-size: 0.98rem; max-width: 70ch; }
.canada { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1.5px solid var(--ink); }
.canada li { padding: 14px 14px 4px 0; font-size: 0.88rem; color: var(--muted); min-width: 0; }
.canada li + li { padding-left: 14px; border-left: 1px solid var(--rule); }
.canada b { display: block; color: var(--ink); font-size: 0.98rem; margin-bottom: 4px; }
.doc-foot .ca { color: #fff; font-weight: 600; margin-right: 6px; }
.topbar .tagline { color: #8d99b3; }
@media (max-width: 860px) {
  .canada { grid-template-columns: 1fr 1fr; }
  .canada li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 480px) {
  .canada { grid-template-columns: 1fr; }
  .canada li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
}

/* The sign-up button label is long; let it wrap on narrow screens
   instead of pushing the form wider than the phone. */
.form { grid-template-columns: minmax(0, 1fr); }
.form button[type="submit"] { white-space: normal; line-height: 1.3; }

/* =========================================================
   BRIGHT PASS, 2026-10-11
   Everything after the opening scene is in daylight: white page,
   navy text, gold buttons. The attachment pages keep their sheets of
   paper, now on a pale sky-blue desk instead of a dark one.
   ========================================================= */
:root { --sky: #EEF4FA; --butter: #FFF3CC; --gold-text: #7d5f17; --maple: #D52B1E; }
body { background: #fff; }
.desk { background: var(--sky); }
.paper { box-shadow: 0 1px 2px rgba(26,43,76,.08), 0 14px 34px rgba(26,43,76,.10); }
.topbar { background: #fff; border-bottom: 1px solid #d9e3ee; }
.topbar .wordmark { color: var(--ink); }
.topbar .tagline { color: var(--muted); }
.topbar nav a:not(.btn) { color: var(--ink); }
.topbar nav a:not(.btn):hover, .topbar nav a[aria-current="page"] { color: var(--ink); }
.doc-foot { border-top-color: #c9d6e4; color: var(--muted); }
.doc-foot a { color: var(--muted); }
.doc-foot .ca { color: var(--ink); }
.follow { background: #fff; color: var(--ink); border: 1px solid #c9d6e4; box-shadow: 0 10px 30px rgba(26,43,76,.18); font-weight: 600; }

/* ---------- The kitchen ---------- */
.kitchen { background: #fff; }
.kbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; max-width: 1100px; margin: 0 auto; padding: 16px clamp(16px, 4vw, 40px); }
.kbar nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.95rem; }
.kbar nav a { color: var(--ink); text-decoration: none; }
.kbar nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The tablecloth: navy gingham on white, made from two gradients. */
.cloth {
  padding: clamp(20px, 5vw, 64px) clamp(10px, 3vw, 40px) clamp(28px, 6vw, 72px);
  background-color: #fff;
  background-image:
    linear-gradient(90deg, rgba(26,43,76,.11) 50%, transparent 50%),
    linear-gradient(rgba(26,43,76,.11) 50%, transparent 50%);
  background-size: 34px 34px;
  scroll-margin-top: 8px;
}
.table { max-width: 720px; margin: 0 auto; background: #fff; border-radius: 22px; padding: clamp(18px, 4vw, 40px); box-shadow: 0 2px 4px rgba(26,43,76,.08), 0 24px 60px rgba(26,43,76,.16); }
.talk-head h1 { font: 700 clamp(1.8rem, 5vw, 2.6rem)/1.1 var(--serif); color: var(--ink); margin: 0 0 10px; text-wrap: balance; }
.talk-head > p { font-size: 1.05rem; color: #3a4558; max-width: 56ch; }

/* Where you are: three steps that fill in as the conversation goes. */
.rail { list-style: none; margin: 18px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; counter-reset: s; }
.rail li { counter-increment: s; position: relative; padding: 10px 0 0; font-size: 0.86rem; font-weight: 600; color: #8792a5; border-top: 4px solid #dfe6ef; transition: color .3s ease, border-color .3s ease; }
.rail li::before { content: counter(s) ". "; }
.rail li.now { color: var(--ink); border-top-color: var(--gold); }
.rail li.done { color: var(--ink); border-top-color: var(--ink); }
.rail li.done::before { content: "✓ "; }

/* Messages */
.thread { display: grid; gap: 10px; margin-top: 22px; }
.msg { display: flex; align-items: flex-end; gap: 10px; animation: arrive .35s ease both; }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg .bubble { max-width: min(85%, 34rem); padding: 12px 16px; border-radius: 18px; font-size: 1.06rem; line-height: 1.5; }
.msg.joy .bubble { background: var(--ink); color: #fff; border-bottom-left-radius: 6px; }
.msg.joy .who { display: block; font-size: 0.78rem; font-weight: 700; color: #f2d58a; margin-bottom: 2px; }
.msg.you { justify-content: flex-end; }
.msg.you .bubble { background: var(--butter); color: var(--ink); font-weight: 600; border-bottom-right-radius: 6px; }
.face { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #fff; font: 700 0.85rem/1 var(--sans); }
.face.quiet { visibility: hidden; }
.dots { display: inline-flex; gap: 5px; padding: 4px 2px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .4; animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 30% { opacity: 1; transform: translateY(-2px); } }

/* The budget line arrives as a sheet of paper on the table. */
.msg.paper-msg .bubble { background: #fff; color: var(--text); border: 1.5px solid var(--ink); border-bottom-left-radius: 6px; max-width: min(100%, 36rem); }
.msg.paper-msg .who { color: var(--gold-text); }
.budget { display: grid; gap: 10px; justify-items: start; }
.budget pre { white-space: pre-wrap; font: 400 0.84rem/1.55 var(--mono); margin: 0; }
.budget .btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* The visitor's answers */
.reply { margin-top: 16px; display: grid; justify-items: end; }
.chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.chip { font: 700 1.02rem/1 var(--sans); padding: 14px 22px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; animation: arrive .3s ease both; }
.chip:hover { background: var(--sky); }
.chip.first { background: var(--gold); border-color: var(--gold); color: #1a1205; }
.chip.first:hover { background: #a47f25; border-color: #a47f25; }
.say-num { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; width: 100%; }
.say-num input { flex: 1 1 220px; max-width: 320px; font: 400 1.05rem/1.3 var(--sans); padding: 13px 16px; border: 2px solid var(--ink); border-radius: 999px; }
.say-num input:focus { outline: none; box-shadow: 0 0 0 4px rgba(184,145,47,.35); }
.say-num .btn { border-radius: 999px; padding: 13px 24px; }
.say-num .form-error { flex-basis: 100%; text-align: right; }
.reply .form { width: 100%; max-width: 30rem; background: var(--sky); border: 0; border-radius: 16px; margin: 0; animation: arrive .3s ease both; }
.reply .form .btn { border-radius: 999px; }
.noscript { margin-top: 18px; padding: 14px; background: var(--sky); border-radius: 12px; }

/* Below the table */
.facts, .more { max-width: 900px; margin: 0 auto; padding: clamp(36px, 6vw, 64px) clamp(16px, 4vw, 40px) 0; }
.facts h2, .more h2 { font: 700 clamp(1.4rem, 3.4vw, 1.9rem)/1.2 var(--serif); color: var(--ink); margin: 0 0 12px; }
.facts-lead { font-size: 1.1rem; max-width: 62ch; }
.facts .canada { border-top-color: var(--maple); }
.no-ai { border-radius: 14px; }
.more .attach a { grid-template-columns: 1fr; border-radius: 14px; border-color: #c9d6e4; }
.kfoot { max-width: 900px; margin: 0 auto; padding: 48px clamp(16px, 4vw, 40px) 120px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; font-size: 0.82rem; color: var(--muted); }
.kfoot b { color: var(--ink); }
.kfoot nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.kfoot a { color: var(--muted); }

@media (max-width: 560px) {
  .msg .bubble { max-width: 88%; font-size: 1rem; }
  .face { flex-basis: 32px; width: 32px; height: 32px; font-size: 0.75rem; }
  .rail li { font-size: 0.78rem; }
  .chip { padding: 13px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .msg, .chip, .reply .form { animation: none; }
  .dots i { animation: none; opacity: .8; }
}

/* ---------- The walkthrough videos ---------- */
.film-h { font: 700 clamp(1.4rem, 3.4vw, 1.9rem)/1.2 var(--serif); color: var(--ink); margin: 0 0 8px; }
.film-p { max-width: 60ch; margin-bottom: 16px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 10px; overflow: hidden; margin-top: 16px; box-shadow: 0 24px 50px -24px rgba(26,43,76,.45); }
.watch-more { margin: 14px 0 0; font-weight: 700; }
.watch-more a::after { content: " \2192"; }
.transcript { margin-top: 12px; max-width: 70ch; }
.transcript summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.transcript p { margin: 8px 0 0; }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: #fff; font-weight: 600; }
.play { width: 64px; height: 64px; border-radius: 50%; background: var(--gold); position: relative; }
.play::after { content: ""; position: absolute; left: 26px; top: 20px; border-left: 18px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }

/* The tagline under every wordmark: "Canadian Municipal AI Governance",
   grey italic as on the letterhead, large enough to read. */
.tagline { font-size: 0.85rem; letter-spacing: 0.03em; }
.scene-top .tagline { color: #b9c3d6; font-size: 0.78rem; margin-top: 5px; }
.scene-top { height: auto; min-height: clamp(28px, 9vh, 90px); padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; align-items: flex-start; }
.statement-mark { display: inline-block; font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin-bottom: 22px; }
.statement-mark .tagline { font-size: clamp(0.9rem, 2.2vw, 1.02rem); margin-top: 8px; }

/* Feature list on How it works */
.feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 32px; margin-top: 16px; }
.feat > div { min-width: 0; }
.feat h3 { margin-bottom: 6px; padding-bottom: 4px; border-bottom: 2px solid var(--gold); display: inline-block; }
.feat ul { margin: 6px 0 0; padding-left: 1.1rem; display: grid; gap: 6px; font-size: 0.95rem; }

/* Team bio placeholders: a smaller version of the "write here" box so it
   fits inside a team card. Remove each one as the real bio goes in. */
.member .write-here { margin-top: 8px; padding: 10px 12px; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.member .write-here b { font-size: 0.66rem; }

/* Language links. On the home page the opening scene carries its own,
   top right, so a visitor can switch before the scene plays. For a browser
   set to French, the script outlines the French link in gold. The outline
   is a shadow, which takes no space, so nothing on the page moves. */
.scene-links { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 16px; }
.scene-top a.lang-switch { color: #fff; font-size: 0.85rem; font-weight: 600; }
a.lang-suggest { box-shadow: 0 0 0 2px var(--gold); border-radius: 4px; }

/* The hamburger menu. One button on every page; it opens a sheet with every
   page of the site. The sheet sits over the page (fixed), so opening it
   moves nothing underneath. On phones it replaces the row of top links. */
.menu-btn { display: inline-flex; align-items: center; gap: 8px; font: 600 0.85rem/1 var(--sans); padding: 8px 12px; border-radius: 4px; cursor: pointer; background: transparent; border: 1px solid currentColor; color: inherit; }
.menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; position: relative; content: ""; }
.menu-btn .bars::before { position: absolute; top: -5px; }
.menu-btn .bars::after { position: absolute; top: 5px; }
.menu-btn:focus-visible, .menu-close:focus-visible, .site-menu a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.scene-top .menu-btn { color: #fff; }
.topbar .menu-btn { color: var(--ink); }
.site-menu { position: fixed; inset: 0; z-index: 50; background: rgba(11, 20, 38, 0.55); display: flex; justify-content: flex-end; }
.site-menu[hidden] { display: none !important; }
.menu-sheet { background: #fff; color: var(--ink); width: min(380px, 100%); height: 100%; overflow-y: auto; padding: calc(16px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) 20px; display: flex; flex-direction: column; gap: 18px; box-shadow: -10px 0 40px rgba(0,0,0,.25); }
.menu-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.menu-title { font: 700 0.8rem/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.menu-close { font: 600 0.85rem/1 var(--sans); padding: 8px 12px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--ink); cursor: pointer; }
.menu-group ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.menu-h { margin: 0; font: 600 0.72rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.menu-group a { display: block; padding: 9px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-weight: 500; }
.menu-group a:hover, .menu-group a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.menu-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.menu-lang { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .topbar nav { display: none; }
  .topbar .in { flex-wrap: nowrap; }
}

/* The menu as a council agenda: title, meeting line, numbered items with
   numbered sub-items, and Adjournment to close it. */
.ag-top { display: flex; justify-content: space-between; align-items: center; }
.ag-top .wordmark { font-size: 0.95rem; }
.ag-x { font: 400 1.6rem/1 var(--sans); width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--ink); cursor: pointer; }
.ag-title { margin: 6px 0 0; font: 700 1.9rem/1.1 var(--serif); color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; }
.ag-sub { margin: 4px 0 0; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font: 500 0.78rem/1.4 var(--mono); color: var(--muted); }
.ag-list, .ag-subs { list-style: none; margin: 0; padding: 0; }
.ag-item { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.ag-head { margin: 0 0 4px; font: 700 0.86rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); display: flex; gap: 10px; }
.ag-n { font: 500 0.78rem/1.6 var(--mono); color: var(--gold); min-width: 2.2rem; display: inline-block; }
.ag-head .ag-n { min-width: 1.4rem; }
.ag-subs a, .ag-adjourn { display: flex; gap: 10px; align-items: baseline; padding: 6px 0 6px 24px; color: var(--ink); text-decoration: none; font: 500 0.95rem/1.4 var(--sans); background: none; border: 0; cursor: pointer; text-align: left; width: 100%; }
.ag-subs a:hover, .ag-subs a[aria-current="page"], .ag-adjourn:hover { text-decoration: underline; text-underline-offset: 4px; }
.ag-lang { margin: auto 0 0; padding-top: 12px; }
.ag-lang a { color: var(--ink); font-weight: 600; }
.ag-x:focus-visible, .ag-adjourn:focus-visible, .ag-subs a:focus-visible, .ag-lang a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.ag-row { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-left: 24px; }
.ag-row a { padding: 4px 0 !important; }
a.ag-one, button.ag-one { text-decoration: none; padding: 4px 0; margin: 0; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: 700 0.86rem/1.3 var(--sans); }
a.ag-one:hover, a.ag-one[aria-current="page"], button.ag-one:hover { text-decoration: underline; text-underline-offset: 4px; }
.ag-title { padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
/* The menu as a council agenda: title, meeting line, numbered items with
   numbered sub-items, and Adjournment to close it. */
.ag-top { display: flex; justify-content: space-between; align-items: center; }
.ag-top .wordmark { font-size: 0.95rem; }
.ag-x { font: 400 1.6rem/1 var(--sans); width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--ink); cursor: pointer; }
.ag-title { margin: 6px 0 0; font: 700 1.9rem/1.1 var(--serif); color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; }
.ag-sub { margin: 4px 0 0; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font: 500 0.78rem/1.4 var(--mono); color: var(--muted); }
.ag-list, .ag-subs { list-style: none; margin: 0; padding: 0; }
.ag-item { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.ag-head { margin: 0 0 4px; font: 700 0.86rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); display: flex; gap: 10px; }
.ag-n { font: 500 0.78rem/1.6 var(--mono); color: var(--gold); min-width: 2.2rem; display: inline-block; }
.ag-head .ag-n { min-width: 1.4rem; }
.ag-subs a, .ag-adjourn { display: flex; gap: 10px; align-items: baseline; padding: 6px 0 6px 24px; color: var(--ink); text-decoration: none; font: 500 0.95rem/1.4 var(--sans); background: none; border: 0; cursor: pointer; text-align: left; width: 100%; }
.ag-subs a:hover, .ag-subs a[aria-current="page"], .ag-adjourn:hover { text-decoration: underline; text-underline-offset: 4px; }
.ag-lang { margin: auto 0 0; padding-top: 12px; }
.ag-lang a { color: var(--ink); font-weight: 600; }
.ag-x:focus-visible, .ag-adjourn:focus-visible, .ag-subs a:focus-visible, .ag-lang a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Agenda sub-items sit under their heading, past the item number. */
.ag-subs.ag-row { padding-left: 32px; }

/* Team page: Joy's photo sits beside her bio, and the card row holds the other three. */
.founder { display: grid; grid-template-columns: calc((100% - 44px) / 3) 1fr; gap: 22px; align-items: start; }
.founder .portrait { margin: 0; }
.founder p:first-child { margin-top: 0; }
@media (max-width: 760px) { .member { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 480px) { .member { flex-basis: 100%; max-width: 340px; } }
@media (max-width: 560px) {
  .founder { grid-template-columns: 1fr; }
  .founder .portrait { max-width: 200px; }
}

.member-email { margin: 6px 0 0; font-size: 0.85rem; }
.member-email a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* Municipal pilot: buttons on the home page and the pilot page */
.pilot-ctas { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.statement .pilot-ctas { justify-content: flex-start; }
.film .pilot-ctas { justify-content: center; }
.watch-more-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
#pilot-form textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 4px; resize: vertical; }
.field-err { display: block; color: var(--alert); font-size: 0.85rem; margin-top: 4px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--alert); }
.opt { color: var(--muted); font-weight: 400; }
.fine { font-size: 0.85rem; color: var(--muted); }
.steps { padding-left: 1.3em; }
.steps li { margin: 0 0 10px; }

/* Legal pages (Terms, Privacy, DPA, SLA): the same sheet as every other
   page. The legal text keeps its own numbering, so no section counter. */
.legal { max-width: none; }
.legal h2 { font: 700 1.05rem/1.3 var(--sans); letter-spacing: 0.04em; color: var(--ink); margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.legal h3 { margin: 20px 0 6px; }
.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { margin: 0 0 12px; padding-left: 1.4rem; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--ink); text-decoration: underline; }
.legal-meta { font-size: 0.9rem; color: var(--muted); margin-bottom: 6px !important; }
.legal-summary { background: var(--note); border-left: 4px solid var(--gold); padding: 18px 20px; margin: 18px 0 8px; }
.legal-summary strong { color: var(--ink); }
.legal blockquote { background: var(--note); border-left: 4px solid var(--gold); padding: 16px 20px; margin: 14px 0; }
.caps-notice { font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.01em; }
.role-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 20px; }
.role-card { background: var(--note); padding: 14px 16px; }
.role-card h3 { margin-top: 0; }
.role-card p { font-size: 0.9rem; color: var(--muted); margin: 0; }
.legal-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.92rem; display: block; overflow-x: auto; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--rule); }
.legal-table thead th { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1.5px solid var(--ink); }
.formula { background: var(--note); padding: 14px 18px; margin: 12px 0; font-family: var(--serif); color: var(--ink); text-align: center; }
@media (max-width: 768px) { .role-cards { grid-template-columns: 1fr; } }