/* ============================================================
   UNIFY THEMES — three ways to harmonize the five sections.
   §1 (gold/black sourcing) and §2 (cream/emerald CRT) are the
   ANCHORS and stay as-is. These themes pull §3 Clay, §4 Asset
   and §6 Feedback — plus the hero/CTA accents — into one of
   three coherent systems. Switched via body[data-theme].

     dark   = "Bronze Cinema"  · gold-led, warm-black, poster type
     cream  = "Paper System"   · emerald-led, cream-grounded, refined
     hybrid = "Dual Signal"    · gold + emerald roles + coral action
   Only colours / fonts / surfaces change — never animation.
   ============================================================ */

/* ---------- remove the little section eyebrows across the page ---------- */
/* §1 "SOURCING & TAM BUILD", §4 "ABM PAGES · THE ASSET",
   §6 "THE FEEDBACK LOOP" — hidden in every theme per request.
   Hero eyebrow is kept (carries the "GTM ENGINEERING, EMBEDDED" positioning). */
.ss2-hero-kick,
.sc-intro .ad-kick,
.fo-kick,
.bd-kick { display: none !important; }

/* ---------- theme switcher chrome ---------- */
#theme-switch { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 300; }
.usw {
  display: flex; align-items: stretch; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 7px 8px 7px 16px;
  max-width: 96vw;
  background: rgba(8,10,14,0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.07);
}
.usw-lead {
  display: flex; align-items: center; font-family: "Kumbh Sans", sans-serif;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244,240,234,0.42); padding-right: 12px; margin-right: 4px;
  border-right: 1px solid rgba(255,255,255,0.12); white-space: nowrap;
}
.usw-btn {
  display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  padding: 7px 12px 7px 9px; transition: background .16s, border-color .16s;
}
.usw-btn:hover { background: rgba(255,255,255,0.05); }
.usw-btn.on { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); }
.usw-sw { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.usw-sw--dark   { background: linear-gradient(135deg, #0C0A07 40%, #C0922E 41%, #E4C079); }
.usw-sw--cream  { background: linear-gradient(135deg, #ECE7E1 40%, #006D4E 41%, #1E8A63); }
.usw-sw--hybrid { background: linear-gradient(135deg, #07131D 33%, #C0922E 34% 50%, #1E8A63 51% 67%, #E8836A 68%); }
.usw-sw--slate  { background: linear-gradient(135deg, #B4BDBC 40%, #006D4E 41%, #1E8A63); }
.usw-sw--teal   { background: linear-gradient(135deg, #B4BDBC 40%, #0E7C8B 41%, #14A0C0); }
.usw-lbl { display: flex; flex-direction: column; line-height: 1.15; }
.usw-lbl b { font-family: "Familjen Grotesk", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: #F4F0EA; }
.usw-lbl i { font-family: "Kumbh Sans", sans-serif; font-style: normal; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244,240,234,0.46); margin-top: 2px; }
.usw-btn.on .usw-lbl i { color: rgba(244,240,234,0.7); }
@media (max-width: 720px) {
  .usw-lead, .usw-lbl i { display: none; }
  .usw-lbl b { font-size: 12px; }
}

/* ============================================================
   THEME A — "BRONZE CINEMA"  (data-theme="dark")
   Everything goes warm-black + bronze gold. Hero, CTA and the
   §2 CRT stage flip from cream to film-dark. The §4/§6 multi-
   colours collapse to a warm gold family. Poster type (Anton).
   ============================================================ */
body[data-theme="dark"] {
  /* hero / CTA / global (abmp3 + scroll tokens) */
  --abm-paper:   #0C0A07;
  --abm-paper-2: #14110B;
  --abm-paper-3: #1E1810;
  --abm-card:    #14110B;
  --abm-ink:     #F4EEE2;
  --abm-ink-2:   rgba(244,238,226,0.66);
  --abm-muted:   rgba(244,238,226,0.5);
  --abm-faint:   rgba(244,238,226,0.34);
  --abm-line:    rgba(244,238,226,0.12);
  --abm-line-2:  rgba(244,238,226,0.2);
  --abm-ember:   #E4C079;   /* primary accent → gold-hi */
  --abm-ember-2: #C0922E;
  --abm-amber:   #E8836A;   /* coral pop */

  /* §4 Asset (aa-dark) */
  --ad-bg:    #0C0A07;
  --ad-bg2:   #14110B;
  --ad-bg3:   #1E1810;
  --ad-ink:   #F4EEE2;
  --ad-dim:   rgba(244,238,226,0.58);
  --ad-faint: rgba(244,238,226,0.34);
  --ad-paper: #ECE6DC;
  --ad-display: "Familjen Grotesk", sans-serif;
  /* the four → warm gold family */
  --c-mag:  #E4C079;
  --c-cyan: #D7A94E;
  --c-grn:  #A8761F;
  --c-ind:  #E8836A;

  /* §6 Feedback */
  --fo-bg: #0A0805;
  /* §4 per-layer accents → warm gold family */
  --sc-person: #E4C079; --sc-company: #D7A94E; --sc-offer: #E8836A;
  --sc-signals: #A8761F; --sc-proof: #C0922E; --sc-matched: #E8836A;
  /* §3 Clay accent set → gold family (readable on the white table) */
  --clay-c0: #C0922E; --clay-c1: #A8761F; --clay-c2: #7E561A; --clay-c3: #C8704F;
  --clay-mid: #C0922E; --clay-ok: #A8761F;
}
/* surfaces that are hardcoded (not tokenised) */
body[data-theme="dark"] .sd-mhero { background: #0C0A07; }
body[data-theme="dark"] .sd-mhero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 30%, rgba(228,192,121,0.08), transparent 60%);
}
body[data-theme="dark"] .cl-crt-stage {
  background: radial-gradient(120% 90% at 50% 38%, #1a140d 0%, #0f0b06 70%, #0a0705 100%);
}
body[data-theme="dark"] .cl-band--top { background: #0C0A07; border-bottom-color: rgba(244,238,226,0.14); }
body[data-theme="dark"] .cl-band--bottom { background: #14110B; border-top-color: rgba(244,238,226,0.14); }
body[data-theme="dark"] .fo { background: var(--ad-bg); }
/* clay surround heading sits on the dark page; table stays authentic white */
body[data-theme="dark"] #clay .sd-h2,
body[data-theme="dark"] #enrich .sd-h2 { color: #F4EEE2; }

/* ============================================================
   THEME B — "PAPER SYSTEM"  (data-theme="cream")
   Emerald-led, cream-grounded, refined. Hero/CTA/§2 keep their
   cream paper. §4 + §6 stay dark (canvas/imagery) but every
   accent becomes emerald; the poster face is dropped for a
   single calm Familjen Grotesk voice. Reads as one product.
   ============================================================ */
body[data-theme="cream"] {
  /* hero / CTA / global — keep the warm cream paper, emerald accent */
  --abm-paper:   #EFEAE3;
  --abm-paper-2: #E4DDD3;
  --abm-paper-3: #D8CFC2;
  --abm-card:    #FFFFFF;
  --abm-ink:     #0B1410;
  --abm-ink-2:   #3A4540;
  --abm-muted:   #5E6A63;
  --abm-faint:   #97A099;
  --abm-line:    rgba(11,20,16,0.12);
  --abm-line-2:  rgba(11,20,16,0.2);
  --abm-ember:   #006D4E;   /* emerald primary everywhere */
  --abm-ember-2: #00583E;
  --abm-amber:   #1E8A63;   /* secondary emerald instead of coral */
  --abm-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* §4 Asset — stays dark but emerald-toned, no poster face */
  --ad-bg:    #07140F;
  --ad-bg2:   #0B1C15;
  --ad-bg3:   #0F261D;
  --ad-ink:   #F1F4F0;
  --ad-dim:   rgba(241,244,240,0.58);
  --ad-faint: rgba(241,244,240,0.32);
  --ad-paper: #EFEAE3;
  --ad-display: "Familjen Grotesk", sans-serif;
  /* the four → emerald spectrum */
  --c-mag:  #4ED6A5;
  --c-cyan: #2FB985;
  --c-grn:  #1E8A63;
  --c-ind:  #8FE3C2;
  /* §4 per-layer accents → emerald spectrum */
  --sc-person: #4ED6A5; --sc-company: #2FB985; --sc-offer: #1E8A63;
  --sc-signals: #1E8A63; --sc-proof: #006D4E; --sc-matched: #8FE3C2;
  /* §3 Clay accent set → emerald family (white-safe) */
  --clay-c0: #006D4E; --clay-c1: #1E8A63; --clay-c2: #00583E; --clay-c3: #0E8F6B;
  --clay-mid: #C77C2A; --clay-ok: #1FA463;
}
/* drop Anton weight: lighten Archivo-derived headings back to Familjen */
body[data-theme="cream"] .ad-h2,
body[data-theme="cream"] .fo1-h, body[data-theme="cream"] .fo2-h, body[data-theme="cream"] .fo3-h,
body[data-theme="cream"] .ad-bigsub { font-family: "Familjen Grotesk", sans-serif; font-weight: 600; }
body[data-theme="cream"] .ad-bignum, body[data-theme="cream"] .fo-stat .big { font-family: "Familjen Grotesk", sans-serif; font-weight: 700; }
body[data-theme="cream"] .fo { background: var(--ad-bg); }
body[data-theme="cream"] .ad-h2 .em, body[data-theme="cream"] .fo1-h .cy, body[data-theme="cream"] .fo2-h .cy { color: #4ED6A5; }
body[data-theme="cream"] .ad-h2 .mag { color: #1E8A63; }

/* ============================================================
   THEME C — "DUAL SIGNAL"  (data-theme="hybrid")  · DEFAULT
   Keeps BOTH gold and emerald with assigned roles + coral for
   action. Cool navy ink base. The palette encodes the funnel:
   gold = raw market (§1, §4 wall) · emerald = the system
   (§2, §3, §6) · coral = the action a rep takes. Poster type
   (Anton) returns for the big numbers. Richest of the three —
   built to carry the story phase.
   ============================================================ */
body[data-theme="hybrid"] {
  --abm-paper:   #F1ECE6;
  --abm-paper-2: #E6DFD7;
  --abm-paper-3: #DAD2C7;
  --abm-card:    #FFFFFF;
  --abm-ink:     #07131D;
  --abm-ink-2:   #34404A;
  --abm-muted:   #5C6770;
  --abm-faint:   #99A1A8;
  --abm-line:    rgba(7,19,29,0.12);
  --abm-line-2:  rgba(7,19,29,0.2);
  --abm-ember:   #006D4E;   /* emerald = the system */
  --abm-ember-2: #00583E;
  --abm-amber:   #E8836A;   /* coral = action */

  /* §4 Asset — navy base, dual accents, poster numerals */
  --ad-bg:    #07131D;
  --ad-bg2:   #0B1A24;
  --ad-bg3:   #0F222E;
  --ad-ink:   #F4F1EA;
  --ad-dim:   rgba(244,241,234,0.58);
  --ad-faint: rgba(244,241,234,0.34);
  --ad-paper: #ECE7E1;
  --ad-display: "Familjen Grotesk", sans-serif;
  /* the four → unified family: gold · emerald · emerald · coral */
  --c-mag:  #E4C079;   /* market/raw → gold */
  --c-cyan: #4ED6A5;   /* system → emerald-hi */
  --c-grn:  #1E8A63;   /* system → emerald */
  --c-ind:  #E8836A;   /* action → coral */

  --fo-bg: #04080d;
  /* §4 per-layer accents → gold (raw) · emerald (system) · coral (action) */
  --sc-person: #E4C079; --sc-company: #4ED6A5; --sc-offer: #E8836A;
  --sc-signals: #1E8A63; --sc-proof: #C0922E; --sc-matched: #E8836A;
  /* §3 Clay accent set → emerald + gold + coral (white-safe) */
  --clay-c0: #1E8A63; --clay-c1: #C0922E; --clay-c2: #006D4E; --clay-c3: #C8704F;
  --clay-mid: #C0922E; --clay-ok: #1FA463;
}
/* kicker bars are emerald (system) across §4/§6; §4 page-wall keeps gold */
body[data-theme="hybrid"] .ad-kick .bar,
body[data-theme="hybrid"] .fo-kick .bar { background: #1E8A63; }
body[data-theme="hybrid"] .ad-kick .tag,
body[data-theme="hybrid"] .fo-kick .tag { color: #4ED6A5; }
body[data-theme="hybrid"] .fo { background: var(--ad-bg); }

/* ============================================================
   UNIVERSAL COHESION — applied in every theme so each variant
   matches itself on type AND colour.
   ============================================================ */
/* TYPE: one display family everywhere. The poster face (Anton) on the
   §4 big number is dropped so it matches the Familjen Grotesk used by
   the hero, §1, §2 and §3. Per-theme weight keeps a little personality. */
.ad-bignum { font-family: "Familjen Grotesk", sans-serif !important; font-weight: 700; letter-spacing: -0.02em; }
body[data-theme="dark"]  .sd-mhero h1, body[data-theme="dark"]  .ad-h2, body[data-theme="dark"]  .fo1-h, body[data-theme="dark"]  .fo2-h { font-weight: 700; }
body[data-theme="cream"] .sd-mhero h1, body[data-theme="cream"] .ad-h2, body[data-theme="cream"] .fo1-h, body[data-theme="cream"] .fo2-h { font-weight: 500; }

/* COLOUR: §3 Clay pulled into the active palette. The table stays the
   authentic white product window; only its accents follow the theme.
   color-mix keeps the pale chip fills live on theme switch. */
.clay2-tier.t1 { background: color-mix(in srgb, var(--clay-c0) 16%, #fff); color: var(--clay-c0); }
.clay2-tier.t2 { background: color-mix(in srgb, var(--clay-c1) 16%, #fff); color: var(--clay-c1); }
.clay2-score.high { color: var(--clay-ok); }  .clay2-score.high .bar i { background: var(--clay-ok); }
.clay2-score.mid  { color: var(--clay-mid); } .clay2-score.mid .bar i  { background: var(--clay-mid); }
.clay2-stat .chk { background: var(--clay-ok); }
.clay2-bar .live .ld { background: var(--clay-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay-ok) 18%, #fff); }
.clay2-prog .pfill { background: linear-gradient(90deg, var(--clay-c0), var(--clay-c1), var(--clay-c2), var(--clay-c3)); }
.clay2-eyebrow .dot { background: var(--clay-c0); }

/* ============================================================
   THEME D — "SLATE STUDIO"  (data-theme="slate")
   Editorial Cream, recast on the CRT photo's cool slate blue-grey
   ground (#A7B2B1 family) instead of warm paper. Emerald accent,
   refined Familjen. Dark sections become deep slate, not navy.
   ============================================================ */
body[data-theme="slate"] {
  --abm-paper:   #D3D9D8;
  --abm-paper-2: #C4CCCB;
  --abm-paper-3: #B4BDBC;
  --abm-card:    #EAEDEC;
  --abm-ink:     #18211F;
  --abm-ink-2:   #3C4643;
  --abm-muted:   #5B6562;
  --abm-faint:   #889290;
  --abm-line:    rgba(24,33,31,0.13);
  --abm-line-2:  rgba(24,33,31,0.22);
  --abm-ember:   #006D4E;
  --abm-ember-2: #00583E;
  --abm-amber:   #1E8A63;
  --abm-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;

  --ad-bg:    #1B2528;
  --ad-bg2:   #222E31;
  --ad-bg3:   #2A3639;
  --ad-ink:   #ECEFEE;
  --ad-dim:   rgba(236,239,238,0.58);
  --ad-faint: rgba(236,239,238,0.32);
  --ad-paper: #D3D9D8;
  --ad-display: "Familjen Grotesk", sans-serif;
  --c-mag:  #4ED6A5; --c-cyan: #2FB985; --c-grn: #1E8A63; --c-ind: #8FE3C2;
  --sc-person: #4ED6A5; --sc-company: #2FB985; --sc-offer: #1E8A63;
  --sc-signals: #1E8A63; --sc-proof: #006D4E; --sc-matched: #8FE3C2;
  --clay-c0: #006D4E; --clay-c1: #1E8A63; --clay-c2: #00583E; --clay-c3: #0E8F6B;
  --clay-mid: #5B6562; --clay-ok: #1FA463;
  --fo-bg: #141B1D;
}

/* ============================================================
   THEME E — "SLATE SCREEN"  (data-theme="teal")
   Same cool slate ground, but the accent is the monitor's own
   glowing teal-cyan — so the whole system reads like it lives
   inside the screen. Refined Familjen.
   ============================================================ */
body[data-theme="teal"] {
  --abm-paper:   #D2D8D8;
  --abm-paper-2: #C2CBCB;
  --abm-paper-3: #B2BCBC;
  --abm-card:    #E9EDED;
  --abm-ink:     #15211F;
  --abm-ink-2:   #38454A;
  --abm-muted:   #586568;
  --abm-faint:   #869193;
  --abm-line:    rgba(21,33,31,0.13);
  --abm-line-2:  rgba(21,33,31,0.22);
  --abm-ember:   #0E7C8B;
  --abm-ember-2: #0B5563;
  --abm-amber:   #14A0C0;
  --abm-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;

  --ad-bg:    #122428;
  --ad-bg2:   #163034;
  --ad-bg3:   #1C3A40;
  --ad-ink:   #ECF1F0;
  --ad-dim:   rgba(236,241,240,0.58);
  --ad-faint: rgba(236,241,240,0.32);
  --ad-paper: #D2D8D8;
  --ad-display: "Familjen Grotesk", sans-serif;
  --c-mag:  #2FC4D6; --c-cyan: #14A0C0; --c-grn: #0E7C8B; --c-ind: #8FD9E3;
  --sc-person: #2FC4D6; --sc-company: #14A0C0; --sc-offer: #0E7C8B;
  --sc-signals: #0E7C8B; --sc-proof: #0B5563; --sc-matched: #8FD9E3;
  --clay-c0: #0E7C8B; --clay-c1: #14A0C0; --clay-c2: #0B5563; --clay-c3: #2FB2C4;
  --clay-mid: #586568; --clay-ok: #14A0C0;
  --fo-bg: #0C1A1E;
}

/* shared refined weight + slate-ground surface overrides for both slate themes */
body[data-theme="slate"] .sd-mhero h1, body[data-theme="slate"] .ad-h2, body[data-theme="slate"] .fo1-h, body[data-theme="slate"] .fo2-h,
body[data-theme="teal"]  .sd-mhero h1, body[data-theme="teal"]  .ad-h2, body[data-theme="teal"]  .fo1-h, body[data-theme="teal"]  .fo2-h { font-weight: 500; }
/* hero ground: drop the warm grain for a cool slate wash */
body[data-theme="slate"] .sd-mhero { background: linear-gradient(180deg, #D9DEDD, #C6CFCD); }
body[data-theme="teal"]  .sd-mhero { background: linear-gradient(180deg, #D8DEDD, #C4CFCD); }
/* §2 CRT stage + context bands all share the page slate so the title area
   and the TV/monitor ground are exactly the same colour (no inner band) */
body[data-theme="slate"] .cl-crt-stage,
body[data-theme="teal"]  .cl-crt-stage { background: var(--abm-paper); }
body[data-theme="slate"] .cl-band--top,    body[data-theme="teal"] .cl-band--top    { background: var(--abm-paper); border-bottom-color: rgba(24,33,31,0.10); }
body[data-theme="slate"] .cl-band--bottom, body[data-theme="teal"] .cl-band--bottom { background: var(--abm-paper); border-top-color: rgba(24,33,31,0.10); }
/* §6 feedback — share §4's ground so the two dark sections meet seamlessly */
body[data-theme="slate"] .fo,
body[data-theme="teal"]  .fo { background: var(--ad-bg); }

/* ============================================================
   INTER-SECTION SEAMS — blend the full-bleed dark sections (§1 ss2
   warm-black, §4/§6 themed ink) into the paper page between them, so
   the gaps read as intentional transitions, not mismatched bands.
   Reuses existing theme vars; works in every theme. ============= */
body { background: var(--abm-paper); }
.sd-seam { width: 100%; height: 300px; margin: 0; pointer-events: none; position: relative; z-index: 2; }
/* faint high-frequency dither over each seam — breaks up 8-bit gradient banding */
.sd-seam::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjbiknIG9wYWNpdHk9JzAuNScvPjwvc3ZnPg==");
  mix-blend-mode: overlay;
}
/* eased multi-stop gradients (color-mix midpoints) read smoother than a 2-stop linear */
.sd-seam--i1p { background: linear-gradient(to bottom,
  #0C0A07 0%,
  color-mix(in srgb, #0C0A07 62%, var(--abm-paper)) 30%,
  color-mix(in srgb, #0C0A07 30%, var(--abm-paper)) 58%,
  color-mix(in srgb, #0C0A07 10%, var(--abm-paper)) 80%,
  var(--abm-paper) 100%); }   /* §1 dark → paper */
.sd-seam--pi2 { background: linear-gradient(to bottom,
  var(--abm-paper) 0%,
  color-mix(in srgb, var(--ad-bg) 10%, var(--abm-paper)) 22%,
  color-mix(in srgb, var(--ad-bg) 32%, var(--abm-paper)) 46%,
  color-mix(in srgb, var(--ad-bg) 66%, var(--abm-paper)) 72%,
  var(--ad-bg) 100%); } /* paper → §4 ink */
.sd-seam--i2p { background: linear-gradient(to bottom,
  var(--ad-bg) 0%,
  color-mix(in srgb, var(--ad-bg) 66%, var(--abm-paper)) 28%,
  color-mix(in srgb, var(--ad-bg) 32%, var(--abm-paper)) 54%,
  color-mix(in srgb, var(--ad-bg) 10%, var(--abm-paper)) 78%,
  var(--abm-paper) 100%); } /* §6 ink → paper */

/* ============================================================
   SLATE STUDIO — "YOUR TAM UNIVERSE" type treatment + a hero
   ground structured like the CRT photo (film grain · soft top
   light · perforated speaker-grille dots).
   ============================================================ */
/* structured hero ground — cool slate wash + soft top key light. The pixel
   STRUCTURE itself comes from .sd-mhero-mosaic (same grid as the green canvases). */
body[data-theme="slate"] .sd-mhero {
  background:
    radial-gradient(125% 80% at 50% 6%, rgba(238,242,241,0.9), rgba(198,207,205,0) 58%),
    linear-gradient(180deg, #DBE0DF 0%, #C9D1CF 46%, #B7C0BE 100%);
  background-color: #C9D1CF;
}
/* film grain on top of the ground (matches the photo's tactile noise) */
body[data-theme="slate"] .sd-mhero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nMC40MicvPjwvc3ZnPg==");
  mix-blend-mode: multiply;
}
/* gridlines barely-there on slate so the grain reads */
body[data-theme="slate"] .sd-gridlines span { background: rgba(24,33,31,0.05); }

/* ---- hero pixel-mosaic structure (echoes the green canvases) ---- */
.sd-mhero-mosaic { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none; }
.sd-mhero-mosaic-grid { position: absolute; inset: 0; display: grid; gap: 1px; }
.sd-mhero-mosaic-grid > i { display: block; }
/* shown only on the slate-ground themes; a soft radial mask keeps the centre
   calmer so the headline stays legible, with structure strongest at the edges */
body[data-theme="slate"] .sd-mhero-mosaic,
body[data-theme="teal"]  .sd-mhero-mosaic {
  display: block;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 42%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.6) 46%, #000 80%);
  mask-image: radial-gradient(120% 100% at 50% 42%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.6) 46%, #000 80%);
}
/* very-slow breathe — only the tinted cells, only on the slate themes */
@keyframes sdMosaicBreathe { 0%, 100% { opacity: var(--lo, 0.4); } 50% { opacity: 1; } }
body[data-theme="slate"] .sd-mhero-mosaic-grid > i[style*="animation"],
body[data-theme="teal"]  .sd-mhero-mosaic-grid > i[style*="animation"] {
  animation-name: sdMosaicBreathe; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
  .sd-mhero-mosaic-grid > i { animation: none !important; }
}

/* the YOUR TAM UNIVERSE poster face — Anton, uppercase, tight, big */
body[data-theme="slate"] .sd-mhero h1 {
  font-family: "Anton", "Familjen Grotesk", sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.88;
  font-size: clamp(38px, 5.2vw, 78px); max-width: 17ch; color: #18211F;
  text-shadow: 1px 1px 0 rgba(24,33,31,0.06);
}
/* the emphasis word stays in the slate ink — no colour accent */
body[data-theme="slate"] .sd-mhero h1 .sd-em {
  font-family: "Anton", "Familjen Grotesk", sans-serif; font-style: normal;
  font-weight: 400; letter-spacing: 0.005em; color: #18211F;
}
/* lede + kicker tuned to the broadcast/console voice */
body[data-theme="slate"] .sd-mhero .sd-lede {
  font-family: "Kumbh Sans", sans-serif; font-size: 17px; letter-spacing: 0.01em;
  color: #3C4643; max-width: 52ch;
}
/* section headers carry the poster identity at a restrained scale */
body[data-theme="slate"] .sd-h2 {
  font-family: "Anton", "Familjen Grotesk", sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.004em; line-height: 0.94;
  font-size: clamp(36px, 4.4vw, 62px);
}
/* §4 + §6 dark-section headers match the poster treatment */
body[data-theme="slate"] .sc-intro h1,
body[data-theme="slate"] .fo1-h, body[data-theme="slate"] .fo2-h, body[data-theme="slate"] .fo3-h {
  font-family: "Anton", "Familjen Grotesk", sans-serif !important; font-weight: 400 !important;
  text-transform: uppercase; letter-spacing: 0.006em; line-height: 0.92;
}
body[data-theme="slate"] .sc-intro h1 { font-size: clamp(34px, 4.4vw, 60px); }

/* ============================================================
   NO COLOUR ACCENTS IN COPY — emphasis words inherit the colour
   of their heading/body in every theme, so titles and copy read
   as one ink. (Applies across hero, sections and animation titles.)
   ============================================================ */
.sc-intro h1 .em,
.fo1-h .cy, .fo2-h .cy, .fo3-h .cy,
.ad-h2 .em, .ad-h2 .mag,
.rx-head h2 .em, .rx-head h2 .mag,
.fb-h .em { color: inherit !important; }