/* ───────────────────────────────────────────────
   One Bam Board , landing page styles

   Bones borrowed from the Crak Dot Bam landing page (band rhythm,
   eyebrow / title / lede, glass nav, illustrated SVG mockups) so the two
   read as the same house. Skin is One Bam Board's own: the lamp-lit night
   palette and the Instrument Serif + Jost pairing from DESIGN_NOTES.md §7.

   The lamp is a real control, not a dark-mode afterthought. It defaults ON
   (John, 2026-08-06: "mahjong night is an evening, and mats read better
   against the warm dark"), and the header pull-chain flips the whole page
   the way the header button flips the app.
   ─────────────────────────────────────────────── */

:root {
  /* brand tokens , verbatim from DESIGN_NOTES.md §7 */
  --page:        #ede6da;
  --cream:       #f8f3ea;
  --card:        #fffcf6;
  --ink:         #201826;
  --night:       #1a1428;
  --import-dark: #12101a;
  --gold:        #e8c77a;
  --crak-red:    #c0392f;
  --crak-blue:   #2e6f8e;
  --crak-green:  #3e7c4a;
  --deep-red:    #8e2a22;

  /* drawn off the app icon: the wordmark green and the gold rule */
  --bamboo:      #3d5236;
  --bamboo-deep: #2b3a26;
  --sage:        #8b9c7e;

  /* layout , same scale as the flagship site so the two feel related */
  --container: 1100px;
  --container-narrow: 760px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --nav-h: 64px;
}

/* ─── LAMP ON (default) , the warm low-light treatment ───
   Background gradient is the app's, verbatim:
   radial-gradient(115% 55% at 78% 4%, #4A3520, #241B2E 42%, #171224)  */
html[data-lamp='on'] {
  --bg:           radial-gradient(115% 55% at 78% 4%, #4a3520, #241b2e 42%, #171224 100%);
  --bg-flat:      #171224;
  --surface:      rgba(255, 252, 246, 0.055);
  --surface-2:    rgba(255, 252, 246, 0.09);
  --hairline:     rgba(232, 199, 122, 0.2);
  --hairline-soft:rgba(232, 199, 122, 0.11);
  --text:         #f2ebdd;
  --text-soft:    #cbbfae;
  --text-muted:   #9d9285;
  --accent:       var(--gold);
  --accent-ink:   #241b2e;
  --link:         #f0d99b;
  --rim:          0 0 0 1px rgba(232, 199, 122, 0.22), 0 24px 70px rgba(0, 0, 0, 0.55),
                  0 0 90px rgba(232, 199, 122, 0.13);
  --nav-bg:       rgba(23, 18, 36, 0.78);
  --scene-1:      #4a3a2c;
  --scene-2:      #2b2018;
  --scene-3:      #16110d;
  --screen-bg:    #1a1428;
  --screen-ink:   #f2ebdd;
  --screen-sub:   #9d9285;
  --screen-line:  rgba(255, 252, 246, 0.12);
  --panel-glow:   0 0 0 1px rgba(232, 199, 122, 0.22), 0 0 46px rgba(232, 199, 122, 0.14);
  --wash:         1;
}

/* ─── LAMP OFF , the daylight cupboard ─── */
html[data-lamp='off'] {
  --bg:           linear-gradient(165deg, var(--page) 0%, var(--cream) 55%, #f6efe3 100%);
  --bg-flat:      var(--page);
  --surface:      rgba(255, 252, 246, 0.72);
  --surface-2:    rgba(255, 252, 246, 0.95);
  --hairline:     rgba(32, 24, 38, 0.13);
  --hairline-soft:rgba(32, 24, 38, 0.07);
  --text:         var(--ink);
  --text-soft:    #5b5162;
  --text-muted:   #756b7c;
  --accent:       #8a6a1f;
  --accent-ink:   #fffcf6;
  --link:         var(--crak-red);
  --rim:          0 0 0 1px rgba(32, 24, 38, 0.08), 0 22px 55px rgba(61, 82, 54, 0.16);
  --nav-bg:       rgba(248, 243, 234, 0.84);
  --scene-1:      #6b5943;
  --scene-2:      #4a3a2c;
  --scene-3:      #2b2018;
  --screen-bg:    #f4eee2;
  --screen-ink:   #201826;
  --screen-sub:   #756b7c;
  --screen-line:  rgba(32, 24, 38, 0.12);
  --panel-glow:   0 0 0 1px rgba(32, 24, 38, 0.10), 0 12px 30px rgba(32, 24, 38, 0.16);
  --wash:         0.2;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  font-family: 'Jost', 'Avenir Next', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-flat);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: color 0.45s ease, background-color 0.45s ease;
}

/* The lamp's glow rides on its own fixed layer rather than on the body's
   background, which is the pattern the flagship site already uses for its
   background blobs. It also keeps the glow anchored to the viewport instead
   of being stretched down a 6,000px page. */
.lamp-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  transition: background 0.45s ease;
  pointer-events: none;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

::selection { background: rgba(232, 199, 122, 0.32); }

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

/* ─── NAV ─── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 28px;
  background: var(--nav-bg);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-bottom: 1px solid var(--hairline-soft);
  transition: background 0.45s ease, border-color 0.45s ease;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

.nav-wordmark {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.nav-wordmark .wm-board {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: 7px;
  vertical-align: 2px;
}

.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--text-soft);
}
.nav-links a { padding: 6px 0; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.nav-links a:hover { color: var(--text); border-bottom-color: var(--accent); }

/* the pull-chain , same gesture as the app's library header */
.lamp-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Jost', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 15px 8px 11px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.lamp-toggle:hover { color: var(--text); border-color: var(--accent); }
.lamp-toggle .lamp-bulb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 2px rgba(232, 199, 122, 0.65);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
html[data-lamp='off'] .lamp-toggle .lamp-bulb {
  background: rgba(32, 24, 38, 0.16);
  box-shadow: none;
}

/* ─── SHARED SECTION FURNITURE ─── */
.band { padding: 96px 28px; position: relative; }
.band-inner { max-width: var(--container); margin: 0 auto; }
.band-inner.narrow { max-width: var(--container-narrow); }
.band-inner.center { text-align: center; }
.band-inner.center .section-lede,
.band-inner.center .section-body { margin-left: auto; margin-right: auto; }

.band-ruled { border-top: 1px solid var(--hairline-soft); }

.section-eyebrow {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.section-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.3px;
  color: var(--text);
  margin-bottom: 18px;
  max-width: 820px;
}
.section-title .accent { font-style: italic; color: var(--accent); }

.section-lede {
  font-size: 19px;
  line-height: 1.62;
  color: var(--text-soft);
  max-width: 660px;
  margin-bottom: 30px;
}
.section-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 660px;
}
.section-body + .section-body { margin-top: 18px; }

.band-footnote {
  margin-top: 26px;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 620px;
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 13px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:active { transform: scale(0.985); }

.btn-primary {
  background: linear-gradient(135deg, #f0d99b 0%, var(--gold) 55%, #d9b263 100%);
  color: #241b2e;
  box-shadow: 0 8px 26px rgba(232, 199, 122, 0.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(232, 199, 122, 0.4); }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--hairline);
}
.btn-secondary:hover { border-color: var(--accent); background: var(--surface-2); }

/* ─── HERO ─── */
.hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: 68px 28px 24px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 52px;
  align-items: center;
}

.hero-eyebrow {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.hero-tagline {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(46px, 7.4vw, 86px);
  line-height: 0.98;
  letter-spacing: -1.2px;
  color: var(--text);
  margin-bottom: 24px;
}

.hero-body {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 520px;
  margin-bottom: 14px;
}
.hero-body strong { color: var(--text); font-weight: 500; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 18px;
}

.hero-meta {
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}
.hero-meta .dot { opacity: 0.45; margin: 0 8px; }

/* ─── THE PHONE + BOARD MOCKUP ─── */
.device {
  position: relative;
  width: min(100%, 380px);
  margin: 0 auto;
  aspect-ratio: 390 / 720;
  border-radius: 46px;
  padding: 11px;
  background: linear-gradient(160deg, #3a3243 0%, #191324 60%, #100c1a 100%);
  box-shadow: var(--rim);
}
.device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: var(--screen-bg);
  transition: background 0.45s ease;
  display: flex;
  flex-direction: column;
}
.device-notch {
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 108px; height: 26px;
  border-radius: 999px;
  background: #0b0812;
  z-index: 3;
}

.screen-head {
  flex-shrink: 0;
  padding: 44px 20px 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.screen-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 21px;
  color: var(--screen-ink);
}
.screen-lamp {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold);
}
html[data-lamp='off'] .screen-lamp { color: var(--screen-sub); }

.board-panel {
  margin: 4px 14px 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--panel-glow);
  transition: box-shadow 0.45s ease;
}

/* the lamp's warm wash over the board, which is what the lamp actually does
   to the table in the app. It does not touch the board's own scene backdrop. */
.board-wash { opacity: var(--wash); transition: opacity 0.45s ease; }
.board-svg { width: 100%; height: auto; display: block; }

/* the shelf strip under the board , mirrors the library's mat shelf */
.screen-shelf {
  padding: 16px 14px 0;
}
.shelf-label {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--screen-sub);
  margin-bottom: 9px;
  padding-left: 2px;
}
.shelf-row { display: flex; gap: 8px; }
.shelf-chip {
  flex: 1;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--screen-line);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.shelf-chip[data-on='true'] {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(232, 199, 122, 0.35);
}

.screen-foot {
  margin-top: auto;
  padding: 12px 14px 20px;
  display: flex;
  gap: 8px;
}
.foot-tab {
  flex: 1;
  text-align: center;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--screen-sub);
  padding: 9px 0;
  border-radius: 10px;
}
.foot-tab[data-on='true'] { color: #241b2e; background: var(--gold); }

/* ─── FEATURE CARDS ─── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.card:hover { border-color: var(--hairline); transform: translateY(-3px); background: var(--surface-2); }
.card-mark { margin-bottom: 16px; }
.card h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 9px;
}
.card p { font-size: 15.5px; line-height: 1.62; color: var(--text-soft); }

/* ─── THE SPLIT BANDS (copy beside a figure) ─── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split.flip .split-copy { order: 2; }

/* the planner figure , four dressed tables and a shortfall */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.plan-tile {
  border-radius: 16px;
  border: 1px solid var(--hairline-soft);
  background: var(--surface);
  padding: 12px;
}
.plan-tile figcaption {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.plan-tile.short { border-color: rgba(192, 57, 47, 0.42); }
.plan-tile.short figcaption { color: #d4756b; }
html[data-lamp='off'] .plan-tile.short figcaption { color: var(--crak-red); }

/* the share figure , three lettered contenders */
.contenders { display: flex; gap: 14px; justify-content: center; }
.contender {
  flex: 1;
  max-width: 190px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hairline-soft);
  background: var(--surface);
  position: relative;
}
.contender .letter {
  position: absolute;
  top: 10px; left: 10px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 15px;
  color: #241b2e;
  background: var(--gold);
  z-index: 2;
}
.contender:nth-child(1) { transform: rotate(-3deg); }
.contender:nth-child(2) { transform: translateY(-10px); }
.contender:nth-child(3) { transform: rotate(3deg); }
.contender-q {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px 8px 12px;
}

/* ─── LAMP INTERLUDE ─── */
.band-lamp { text-align: center; padding: 84px 28px; }
.band-lamp .lamp-line {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.22;
  color: var(--text);
  max-width: 700px;
  margin: 0 auto 20px;
}
.band-lamp .lamp-sub { font-size: 16px; color: var(--text-muted); }
.lamp-cord {
  width: 1px;
  height: 54px;
  margin: 0 auto 26px;
  background: linear-gradient(to bottom, transparent, var(--hairline), var(--accent));
}

/* ─── PRICING ─── */
.tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
  text-align: left;
}
.tier {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  padding: 32px 30px 34px;
  background: var(--surface);
}
.tier.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 18px 50px rgba(232, 199, 122, 0.12); }
.tier-name {
  font-size: 11.5px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.tier-price {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 42px;
  line-height: 1;
  color: var(--text);
  margin-bottom: 6px;
}
.tier-price .per { font-family: 'Jost', sans-serif; font-size: 14px; color: var(--text-muted); margin-left: 8px; }
.tier ul { list-style: none; margin-top: 20px; }
.tier li {
  font-size: 15.5px;
  color: var(--text-soft);
  padding: 8px 0 8px 24px;
  position: relative;
  border-top: 1px solid var(--hairline-soft);
}
.tier li:first-child { border-top: none; }
.tier li::before {
  content: '';
  position: absolute;
  left: 2px; top: 17px;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.75;
}

/* ─── FAQ ─── */
.faq-list { margin-top: 34px; border-top: 1px solid var(--hairline-soft); }
.faq-item { border-bottom: 1px solid var(--hairline-soft); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 40px 22px 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 21px;
  color: var(--text);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 6px; top: 20px;
  font-family: 'Jost', sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--accent);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 24px 24px 0; font-size: 16px; line-height: 1.7; color: var(--text-soft); }

/* ─── THE CLEAN LINE (affiliation notice) ─── */
.band-clean .notice {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  padding: 28px 30px;
  background: var(--surface);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-soft);
}
.band-clean .notice strong { color: var(--text); font-weight: 500; }

/* ─── CLOSE ─── */
.band-close { text-align: center; padding: 96px 28px 76px; }
.band-close .close-line {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.16;
  color: var(--text);
  max-width: 640px;
  margin: 0 auto 24px;
}
.close-icon {
  width: 96px; height: 96px;
  border-radius: 22px;
  margin: 0 auto 30px;
  box-shadow: var(--rim);
}

/* ─── FOOTER ─── */
.site-footer {
  border-top: 1px solid var(--hairline-soft);
  padding: 34px 28px 46px;
  background: rgba(0, 0, 0, 0.12);
}
html[data-lamp='off'] .site-footer { background: rgba(255, 252, 246, 0.5); }
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
}
.footer-brand {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 19px;
  color: var(--text);
}
.footer-links { margin-left: auto; display: flex; gap: 22px; font-size: 14px; color: var(--text-muted); }
.footer-links a:hover { color: var(--accent); }
.footer-fine {
  max-width: var(--container);
  margin: 20px auto 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
}
.footer-fine a { color: var(--link); }

/* ─── RESPONSIVE ─── */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 44px; padding-top: 52px; }
  .hero-body { max-width: none; }
  .split { grid-template-columns: 1fr; gap: 38px; }
  .split.flip .split-copy { order: 0; }
  .card-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .band { padding: 68px 22px; }
  .hero { padding: 44px 22px 16px; }
  .tiers { grid-template-columns: 1fr; }
  .contenders { gap: 9px; }
  .contender:nth-child(1),
  .contender:nth-child(2),
  .contender:nth-child(3) { transform: none; }
  .site-nav { padding: 0 18px; gap: 12px; }
  .nav-wordmark { font-size: 21px; }
  .nav-wordmark .wm-board { font-size: 10px; letter-spacing: 2.6px; }
  .lamp-toggle { margin-left: auto; }
  .lamp-toggle .lamp-word { display: none; }
  .lamp-toggle { padding: 8px 11px; }
  .footer-links { margin-left: 0; width: 100%; }
}

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

/* ─── PIECES ADDED WITH THE MARKUP ─── */

.nav-mark { flex-shrink: 0; }

.hero-device { display: flex; justify-content: center; }

/* the combo name under the board, the one line that tells you what changed */
.board-caption {
  margin: 12px 16px 0;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--screen-sub);
  text-align: center;
}
.board-caption .sep { opacity: 0.45; margin: 0 7px; }

.shelf-chip { cursor: pointer; }
.shelf-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.split-figure { display: flex; justify-content: center; }

/* mini boards , the mat colour rides on `currentColor` */
.mini-board { width: 100%; height: auto; display: block; border-radius: 10px; color: #3f5a44; }
.mini-b { color: #c98a92; }
.mini-c { color: #332d42; }
.mini-empty { color: var(--crak-red); background: rgba(192, 57, 47, 0.06); }

.contender .mini-board { border-radius: 0; }

/* focus, everywhere */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.mini-d { color: #bcac95; }

/* the closing line on a tier, which reads as prose rather than another item */
.tier li.tier-note {
  padding-left: 2px;
  font-size: 14.5px;
  color: var(--text-muted);
  font-style: italic;
}
.tier li.tier-note::before { content: none; }

/* ─── LEGAL / SUPPORT PAGES ───
   Same lamp-lit shell as the landing page, one narrow column of prose. */

.legal-main {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 64px 28px 40px;
}

.legal-eyebrow {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.legal-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 12px;
}

.legal-updated {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 34px;
}

/* the summary box , the whole policy in four lines */
.legal-summary {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 26px 28px;
  margin-bottom: 44px;
}
.legal-summary h2 {
  font-family: 'Jost', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.legal-summary p {
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--text);
}
.legal-summary p + p { margin-top: 12px; }

.legal-body h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.2;
  color: var(--text);
  margin: 44px 0 14px;
}
.legal-body h3 {
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 26px 0 8px;
}
.legal-body p,
.legal-body li {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--text-soft);
}
.legal-body p + p { margin-top: 14px; }
.legal-body ul { list-style: none; margin: 14px 0; }
.legal-body li {
  position: relative;
  padding: 7px 0 7px 22px;
}
.legal-body li::before {
  content: '';
  position: absolute;
  left: 2px; top: 17px;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.7;
}
.legal-body strong { color: var(--text); font-weight: 500; }
.legal-body a { color: var(--link); border-bottom: 1px solid var(--hairline); }
.legal-body a:hover { border-bottom-color: var(--accent); }

.legal-note {
  margin-top: 44px;
  padding: 20px 22px;
  border-left: 2px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-soft);
}

@media (max-width: 720px) {
  .legal-main { padding: 44px 22px 32px; }
  .legal-summary { padding: 22px 20px; }
  .legal-body h2 { font-size: 24px; margin-top: 36px; }
}