/* =====================================================================
 * STYLES ,  Final Upgrade AI proposal microsite
 * ===================================================================== */
* { box-sizing: border-box; }
/* The proposal system is light-surface only (each brand theme defines a light
   palette). Declare color-scheme so browser / OS auto-dark does not invert
   surfaces, which would turn the monochrome BlackRock icons black-on-black. */
html { scroll-behavior: smooth; color-scheme: light; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.gated { overflow: hidden; }
/* While gated, render nothing behind the cover so the proposal text is not readable. */
body.gated #app, body.gated .toc, body.gated .foot, body.gated .nav-open-btn { display: none !important; }
a { color: var(--magenta); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.muted { color: var(--text-dim); }
.small { font-size: 0.86rem; }
ul { margin: 0 0 1em; padding-left: 1.15em; }
li { margin: 0.3em 0; }

/* ---------- gate ---------- */
.gate {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: var(--bg);
  background-image: radial-gradient(1200px 600px at 50% -10%, rgba(30,139,255,0.40), transparent 70%);
}
.gate-card {
  width: min(92vw, 420px); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 38px 34px; text-align: center; box-shadow: var(--shadow);
}
.gate-brand { font-family: var(--font-head); font-weight: 700; letter-spacing: 0.04em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gate-card h2 { margin: 10px 0 4px; }
.gate-card form { display: flex; gap: 10px; margin-top: 18px; }
.gate-card input {
  flex: 1; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--bg-2); color: var(--text); font-size: 1rem;
}
.gate-error { display: none; color: var(--magenta); margin: 12px 0 0; }
.gate-hint { color: var(--text-mute); font-size: 0.84rem; margin: 8px 0 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--text); font: 600 0.92rem var(--font-body);
  cursor: pointer; transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s; text-decoration: none;
}
.btn:hover { transform: translateY(-1px); border-color: var(--magenta); text-decoration: none; }
.btn-accent { background: var(--grad); border: none; color: #fff; }
.btn-sm { padding: 8px 14px; font-size: 0.84rem; }
.btn-ghost { background: transparent; }
.btn.flashed { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }

/* ---------- layout / TOC ---------- */
.toc {
  position: fixed; top: 0; left: 0; width: var(--toc-w); height: 100vh; padding: 26px 18px;
  border-right: 1px solid var(--line); background: var(--bg-2); z-index: 50;
  display: flex; flex-direction: column; gap: 18px; overflow-y: auto;
}
.toc-brand { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--text); }
.toc-brand span { color: var(--magenta); margin: 0 4px; }
.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc-list a {
  display: block; padding: 7px 10px; border-radius: 8px; color: var(--text-dim);
  font-size: 0.9rem; border-left: 2px solid transparent;
}
.toc-list a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.toc-list a.active { color: var(--text); border-left-color: var(--magenta); background: var(--grad-soft); }

/* collapsible + resizable nav */
.toc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-toggle { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text-dim); cursor: pointer; font-size: 1rem; line-height: 1; }
.nav-toggle:hover { color: var(--text); border-color: var(--blue); }
.toc-stamp { margin-top: auto; padding-top: 14px; font-size: 0.72rem; color: var(--text-mute); text-align: left; line-height: 1.3; }
.toc-stamp:empty { display: none; }
.toc-resize { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; }
.toc-resize:hover { background: var(--line-strong); }
.nav-open-btn { position: fixed; top: 14px; left: 14px; z-index: 60; display: none;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow); }
.toc { transition: transform 0.25s ease; }
#app, .foot { transition: margin-left 0.25s ease; }
body.nav-resizing { user-select: none; cursor: col-resize; }
body.nav-resizing .toc, body.nav-resizing #app, body.nav-resizing .foot { transition: none; }
@media (min-width: 901px) {
  body.nav-collapsed .toc { transform: translateX(-100%); }
  body.nav-collapsed #app, body.nav-collapsed .foot { margin-left: 0; }
  body.nav-collapsed .nav-open-btn { display: block; }
}

#app { margin-left: var(--toc-w); }
.foot {
  margin-left: var(--toc-w); padding: 30px 8%; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--text-dim);
}
.foot-right { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot-logout { background: none; border: 1px solid var(--line-strong); color: var(--text-dim);
  font: 600 0.8rem var(--font-head); letter-spacing: 0.04em; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  transition: border-color 0.15s, color 0.15s; }
.foot-logout:hover { border-color: var(--magenta); color: var(--text); }

/* ---------- sections ---------- */
.section { padding: 70px 8%; border-top: 1px solid var(--line); }
.section[data-tone="dark"] { background: var(--grad-soft); }
.section-inner { max-width: var(--maxw); margin: 0 auto; }
.eyebrow { font: 700 0.78rem var(--font-head); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--magenta); margin-bottom: 10px; }
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 22px; }
.sub-h { font-size: 1.25rem; margin: 34px 0 14px; }
.lead { font-size: 1.12rem; color: var(--text-dim); max-width: 760px; }
.kv { margin: 4px 0; }

/* reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 96px 8% 70px;
  background: radial-gradient(1000px 520px at 18% -10%, rgba(255,20,147,0.20), transparent 60%),
              radial-gradient(900px 520px at 90% 0%, rgba(91,33,182,0.28), transparent 60%); }
.hero-inner { max-width: var(--maxw); margin: 0 auto; }
.brandline { font: 600 0.9rem var(--font-head); letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 26px; }
.brandline span { color: var(--magenta); }
.hero h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); margin: 6px 0 18px;
  background: linear-gradient(120deg, #fff 30%, var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: 1.2rem; color: var(--text-dim); max-width: 720px; }
.hero-meta { margin-top: 22px; color: var(--text-mute); font-size: 0.86rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pill { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 0.8rem;
  background: var(--grad); color: #fff; }
.pill.ghost { background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-dim); }

/* ---------- cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; }
.card-grid.two { grid-template-columns: 1fr 1fr; }
/* Deterministic max-3-per-row that centres an incomplete last row (so N items
   never leave a lopsided 4+2). auto-fit grids pack as many columns as fit the
   width and left-align the remainder, which is what produces uneven last rows;
   this flex rule fixes the column count at 3 and centres the leftover. */
.grid-3 { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 12px; }
.grid-3 > * { flex: 1 1 calc(33.333% - 16px); min-width: 240px; max-width: calc(33.333% - 11px); }
@media (max-width: 820px) { .grid-3 > * { flex-basis: calc(50% - 12px); max-width: calc(50% - 8px); } }
@media (max-width: 520px) { .grid-3 > * { flex-basis: 100%; max-width: 100%; } }
/* Vertical breathing room between stacked blocks on a page (e.g. the Catalysts). */
.page-section { margin-top: 32px; }
.page-section:first-child { margin-top: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card h4 { margin: 0 0 8px; color: var(--text); }
.card p { margin: 0; color: var(--text-dim); }
.callout { margin-top: 22px; padding: 22px 24px; border-radius: var(--radius);
  background: var(--grad-soft); border: 1px solid var(--line-strong); }
.callout.ghost { background: var(--surface); }
.callout-h { font: 700 1rem var(--font-head); margin-bottom: 8px; }
.facts { columns: 2; column-gap: 28px; }
@media (max-width: 640px) { .facts { columns: 1; } }

/* ---------- accordion ---------- */
.acc-hint { font: 600 0.82rem var(--font-body); color: var(--magenta); margin: 10px 0 2px; }
.acc-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.acc { border: 1px solid var(--line-strong); border-left: 3px solid var(--magenta); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.acc.open { border-left-color: var(--blue); }
.acc-head { width: 100%; text-align: left; padding: 15px 16px; background: none; border: none; color: var(--text);
  font: 500 1rem var(--font-body); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.acc-head:hover { background: var(--surface-2); }
.acc-title { flex: 1; }
.acc-toggle-ui { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.acc-cue { font: 700 0.7rem var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--magenta); white-space: nowrap; }
.acc-cue::after { content: "Expand"; }
.acc.open .acc-cue::after { content: "Close"; }
.acc.open .acc-cue { color: var(--blue); }
.acc-chevron { color: #fff; background: var(--grad); width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.7rem; line-height: 1; transition: transform 0.2s ease; }
.acc.open .acc-chevron { transform: rotate(180deg); }
.acc-head:hover .acc-chevron { box-shadow: 0 0 0 4px var(--grad-soft); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; }
.acc.open .acc-body { grid-template-rows: 1fr; }
.acc-body-inner { overflow: hidden; }
.acc-body-inner > * { padding: 0 18px; }
.acc.open .acc-body-inner { padding: 4px 0 16px; }
/* DWS: brighter, more distinct accordion headers so each pillar reads apart.
   Scoped to the DWS theme; a tinted header background + a coloured left edge,
   cycled across a small palette. Outranks the default magenta/blue edge. */
[data-theme="dws"] .acc-list .acc:nth-child(6n+1) { border-left-color: #1f9d8b; }
[data-theme="dws"] .acc-list .acc:nth-child(6n+1) > .acc-head { background: rgba(31,157,139,0.09); }
[data-theme="dws"] .acc-list .acc:nth-child(6n+2) { border-left-color: #2f6df6; }
[data-theme="dws"] .acc-list .acc:nth-child(6n+2) > .acc-head { background: rgba(47,109,246,0.09); }
[data-theme="dws"] .acc-list .acc:nth-child(6n+3) { border-left-color: #e0408f; }
[data-theme="dws"] .acc-list .acc:nth-child(6n+3) > .acc-head { background: rgba(224,64,143,0.09); }
[data-theme="dws"] .acc-list .acc:nth-child(6n+4) { border-left-color: #d59a1f; }
[data-theme="dws"] .acc-list .acc:nth-child(6n+4) > .acc-head { background: rgba(213,154,31,0.11); }
[data-theme="dws"] .acc-list .acc:nth-child(6n+5) { border-left-color: #7a5cf0; }
[data-theme="dws"] .acc-list .acc:nth-child(6n+5) > .acc-head { background: rgba(122,92,240,0.09); }
[data-theme="dws"] .acc-list .acc:nth-child(6n) { border-left-color: #1f9d57; }
[data-theme="dws"] .acc-list .acc:nth-child(6n) > .acc-head { background: rgba(31,157,87,0.09); }

/* ---------- program skeleton / steps ---------- */
.skeleton { margin-top: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.skeleton-h { font: 700 0.95rem var(--font-head); color: var(--magenta); margin-bottom: 14px; }
.steps { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); color: #fff; font: 700 0.9rem var(--font-head); }
.step-phase { font: 700 0.72rem var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.step-title { font-weight: 600; }
.step-meta { color: var(--text-mute); font-size: 0.85rem; }
.step-focus { color: var(--text-dim); margin: 6px 0 0; }

/* ---------- function grid + cards ---------- */
.fn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 26px; }
.fn-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
  transition: border-color 0.2s, transform 0.15s; }
.fn-card:hover { border-color: var(--magenta); transform: translateY(-3px); }
.fn-card h4 { margin: 8px 0 4px; }
/* Function cards: the two session titles are the hero of each box. */
.fn-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.fn-ico { font-size: 1.4rem; }
.fn-name { font: 700 0.7rem var(--font-head); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-mute); }
.fn-sessions { display: flex; flex-direction: column; gap: 12px; }
.fn-s { display: flex; flex-direction: column; gap: 3px; }
.fn-s-part { font: 700 0.64rem var(--font-head); letter-spacing: 0.07em; text-transform: uppercase; color: var(--magenta); }
.fn-s-title { font: 700 1.16rem var(--font-head); line-height: 1.25; color: var(--text); transition: color 0.15s; }
.fn-card:hover .fn-s-title { color: var(--magenta); }
.fn-head { color: var(--text-dim); font-size: 0.9rem; margin-top: 14px; }
.fn-grid-h { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
/* Train-the-Trainer: distinct card on the hub + hero meta + nav sub-item */
.tt-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: var(--grad-soft); border: 1px solid var(--line-strong); border-left: 4px solid var(--magenta);
  border-radius: var(--radius); padding: 20px 22px; text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.15s; }
.tt-card:hover { border-color: var(--magenta); transform: translateY(-2px); }
.tt-card-main { flex: 1 1 320px; }
.tt-card-h { margin: 8px 0 4px; font-size: 1.2rem; }
.tt-dur { margin-left: auto; font: 700 0.66rem var(--font-head); letter-spacing: 0.05em; color: var(--text-mute); }
.tt-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tt-pill { font: 600 0.78rem var(--font-head); padding: 5px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-dim); }
.toc-sub-extra { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line-strong); }
.mini { font-size: 0.86rem; color: var(--text-mute); }

/* function deep view */
.fn-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 8%; background: var(--surface); border-bottom: 1px solid var(--line); }
.fn-back { color: var(--magenta); font-weight: 600; }
.fn-back:hover { text-decoration: none; }
.fn-brand { font: 700 0.95rem var(--font-head); color: var(--text); }
.fn-topbar u { text-underline-offset: 2px; }
.fn-introwrap { max-width: var(--maxw); margin: 0 auto; padding: 16px 8% 0; }
.fn-intro { background: var(--grad-soft); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 14px 18px; }
.fn-intro > summary { cursor: pointer; font: 700 0.98rem var(--font-head); color: var(--text); list-style: revert; }
.fn-intro p { margin: 8px 0 0; color: var(--text-dim); }
.fn-hero { padding: 40px 8% 30px;
  background: radial-gradient(800px 360px at 10% -30%, rgba(255,46,146,0.12), transparent 60%); }
.fn-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); }

/* solo / shared single-function page */
body.solo .toc { display: none; }
body.solo .foot { display: none; }
body.solo #app { margin-left: 0; }
body.solo .nav-open-btn { display: none !important; }
.solo-ov { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.solo-ov-h { font: 700 0.82rem var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--magenta); margin-bottom: 6px; }
.solo-ov p { margin: 0 0 12px; color: var(--text-dim); }
.cohort-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.uc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.uc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.uc-h { font: 700 0.8rem var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta); margin-bottom: 8px; }
.uc ul { font-size: 0.92rem; color: var(--text-dim); }

.share-banner { padding: 14px 8%; background: var(--grad-soft); border-bottom: 1px solid var(--line);
  display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 0.92rem; }
.share-banner.light { background: var(--surface); }

.feedback { margin-top: 26px; padding: 22px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.feedback textarea { width: 100%; min-height: 90px; margin-top: 10px; padding: 12px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--text); font: 400 0.95rem var(--font-body); resize: vertical; }
.fb-msg { color: var(--accent); font-size: 0.88rem; }

/* ---------- pathways ---------- */
.path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 10px; }
.path-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.path-card.featured { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta), var(--shadow); }
.ribbon { position: absolute; top: -11px; right: 18px; background: var(--grad); color: #fff;
  font: 700 0.72rem var(--font-head); letter-spacing: 0.08em; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; }
.ribbon-core { background: var(--accent, var(--magenta)); }
/* Grouped module cards (e.g. DWS: Strategic / Training / Building phases). */
.path-group + .path-group { margin-top: 8px; }
.path-group-h { margin-top: 30px; margin-bottom: 2px; }
.path-group:first-child .path-group-h { margin-top: 6px; }
.path-tier { font: 700 0.74rem var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.path-card h4 { font-size: 1.5rem; margin: 4px 0 6px; }
.path-price { font: 700 1.1rem var(--font-head); color: var(--magenta); margin-bottom: 12px; }
.path-head { font-weight: 600; }
.incl-h { font: 700 0.74rem var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); margin-top: 12px; }
.incl ul { font-size: 0.9rem; }
.incl.muted ul { color: var(--text-mute); }

/* ---------- builder / calculator ---------- */
.builder { margin-top: 18px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.builder-controls { display: flex; flex-direction: column; gap: 18px; }
.ctl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.ctl-h { font: 700 0.82rem var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--magenta); margin-bottom: 12px; }
.chk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chk-col { display: flex; flex-direction: column; gap: 8px; }
.chk { display: flex; gap: 8px; align-items: center; font-size: 0.92rem; cursor: pointer; }
.chk input { accent-color: var(--magenta); width: 16px; height: 16px; }
.budget-row { display: flex; align-items: center; gap: 8px; font: 700 1.2rem var(--font-head); }
.budget-row input { flex: 1; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-2);
  border: 1px solid var(--line-strong); color: var(--text); font: 700 1.1rem var(--font-head); }
.budget-note { color: var(--text-mute); font-size: 0.82rem; margin-top: 8px; }
.builder-out { background: var(--grad-soft); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 22px; align-self: start; }
.rec-tag { font: 700 0.74rem var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.rec-name { font: 700 1.5rem var(--font-head); margin: 4px 0; }
.rec-name span { font-size: 0.8rem; color: var(--text-dim); }
.rec-why { color: var(--text-dim); }
.estimate { margin-top: 18px; border-top: 1px solid var(--line-strong); padding-top: 16px; }
.est-line, .est-total, .est-budget { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; }
.est-line { color: var(--text-dim); font-size: 0.92rem; align-items: baseline; }
.est-line > span:last-child { white-space: nowrap; text-align: right; padding-left: 12px; font-variant-numeric: tabular-nums; }
.est-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.est-sub { font-size: 0.76rem; color: var(--text-mute); }
.est-cap { font: 700 0.72rem var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 8px; }
.est-summary { margin-top: 16px; }
.est-total { font: 700 1.2rem var(--font-head); border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
.est-budget { color: var(--accent); }
.est-disc { color: var(--text-mute); font-size: 0.78rem; margin-top: 8px; }
.est-note { margin-top: 10px; padding: 9px 12px; font-size: 0.82rem; color: var(--text-dim);
  background: rgba(30,139,255,0.08); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 8px; }

/* ---------- agenda arc / tables ---------- */
.arc { display: flex; flex-direction: column; gap: 12px; }
.arc-beat { display: flex; gap: 14px; }
.arc-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--magenta);
  display: grid; place-items: center; font: 700 0.85rem var(--font-head); color: var(--magenta); }
.arc-beat p { margin: 2px 0 0; color: var(--text-dim); font-size: 0.92rem; }
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { color: var(--magenta); font: 700 0.78rem var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; }
.tbl td { color: var(--text-dim); }

/* ---------- timeline ---------- */
.tl { display: flex; flex-direction: column; margin-top: 14px; max-width: 800px; }
.tl-item { display: flex; gap: 16px; }
.tl-rail { flex: none; display: flex; flex-direction: column; align-items: center; }
.tl-rail::after { content: ""; flex: 1; width: 2px; background: var(--line-strong); margin: 4px 0; }
.tl-item:last-child .tl-rail::after { display: none; }
.tl-body { padding-bottom: 24px; }
.tl-when { font: 700 1rem var(--font-head); color: var(--magenta); margin-bottom: 4px; }
.tl-what { color: var(--text-dim); font-size: 0.95rem; }

/* ---------- why us ---------- */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.why { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.why h4 { color: var(--magenta); font-size: 0.95rem; letter-spacing: 0.06em; margin: 0 0 8px; }
.why p { margin: 0; color: var(--text-dim); }
.logos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.logo { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-dim); font-size: 0.85rem; }

/* ---------- contacts ---------- */
.contacts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.contact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.contact span { color: var(--text-dim); font-size: 0.9rem; }
/* Click-to-WhatsApp button: a default, available option on any contact. */
.contact-wa {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: #25D366;
  border: 1px solid #1da851;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.contact-wa:hover { filter: brightness(1.05); transform: translateY(-1px); }
.contact-wa svg { display: block; }

/* ---------- nested TOC ---------- */
.nav-li { position: relative; }
.toc-sub { list-style: none; display: none; margin: 4px 0 8px 16px; padding: 2px 0 2px 14px; border-left: 1px solid var(--line-strong); }
.has-kids.open > .toc-sub { display: block; }
.toc-sub a { display: block; font-size: 0.82rem; padding: 5px 10px; color: var(--text-mute); border-radius: 7px; }
.toc-sub a:hover { color: var(--text); background: var(--surface); }
.toc-sub a.active { color: var(--text); background: var(--grad-soft); }
.kid-toggle { position: absolute; right: 4px; top: 0; height: 39px;
  display: inline-flex; align-items: center; gap: 5px; padding: 0 6px; border: none; background: none;
  color: var(--text-mute); cursor: pointer; border-radius: 6px; line-height: 1; transition: color 0.15s; }
.kid-toggle:hover { color: var(--text); }
.kid-n { font-size: 0.72rem; font-weight: 600; opacity: 0.75; }
.kid-caret { display: block; transition: transform 0.2s ease; }
.has-kids.open > .kid-toggle { color: var(--blue); }
.has-kids.open > .kid-toggle .kid-n { opacity: 1; color: var(--blue); }
.has-kids.open > .kid-toggle .kid-caret { transform: rotate(180deg); }

/* ---------- hero glow (subtle motion, less "standard") ---------- */
.hero { overflow: hidden; }
.hero-glow { position: absolute; inset: -20% -10% auto -10%; height: 130%; pointer-events: none; z-index: 0;
  background: radial-gradient(620px 360px at 18% 8%, rgba(30,139,255,0.30), transparent 60%),
              radial-gradient(560px 360px at 88% 0%, rgba(255,46,146,0.22), transparent 60%);
  animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,-3%,0) scale(1.06); } }
.hero-inner { position: relative; z-index: 1; }
.hero h1 { background: linear-gradient(120deg, var(--text) 18%, var(--blue) 72%, var(--magenta));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* graceful fallback if text-clip is unsupported */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1, .gate-brand, .stat-num, .sess-title { -webkit-text-fill-color: currentColor; color: var(--text); background: none; }
}
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.hero-top .brandline { margin-bottom: 0; }

/* ---------- stat band (animated count-up) ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 4px 0 30px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 3px solid transparent; border-image: var(--grad) 1; padding: 20px; text-align: center;
  transition: transform 0.15s, box-shadow 0.2s; }
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stat-num { font: 700 2.1rem var(--font-head);
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-lab { color: var(--text-dim); font-size: 0.82rem; margin-top: 4px; }

/* ---------- understanding 3 + 1 ----------
   NOTE: .grid-3 is defined once, above, as a wrap-and-centre flexbox so the last
   row stays centred (3 per row, even). Do not redefine it as a CSS grid here, it
   reintroduces the uneven-row / odd-gap layout. */
.grid-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
.card-bar { height: 4px; width: 42px; border-radius: 4px; background: var(--grad); margin-bottom: 12px;
  transition: width 0.3s ease; }
.tilt { transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.tilt:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: var(--shadow); }
.tilt:hover .card-bar { width: 100%; }
.feature-card { display: flex; gap: 18px; align-items: center; margin-top: 16px; padding: 24px 26px;
  border-radius: var(--radius); background: var(--grad-soft); border: 1px solid var(--line-strong);
  position: relative; overflow: hidden; }
.feature-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
  border-radius: 50%; background: radial-gradient(circle, rgba(30,139,255,0.25), transparent 70%); }
.fc-mark { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--grad); color: #fff; font-size: 1.4rem; }
.fc-h { font: 700 1.1rem var(--font-head); margin-bottom: 4px; }

/* context chips (micro-engagement) */
.hint { font: 500 0.78rem var(--font-body); color: var(--text-mute); }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.factchip { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--bg-2); color: var(--text-dim); font: 500 0.86rem var(--font-body); cursor: pointer;
  transition: all 0.16s ease; }
.factchip:hover { border-color: var(--blue); color: var(--text); transform: translateY(-2px); }
.factchip.on { background: var(--grad); color: #fff; border-color: transparent; }

/* ---------- program design: rhythm strip + cohorts ---------- */
.phase-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 8px 0 14px; }
.phase-chip { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line); font-size: 0.82rem; text-align: center; }
.phase-chip span { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--grad); color: #fff;
  display: grid; place-items: center; font: 700 0.72rem var(--font-head); }
.phase-chip.live { background: var(--grad-soft); border-color: var(--line-strong); font-weight: 600; }
@media (max-width: 760px) { .phase-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .phase-strip { grid-template-columns: repeat(2, 1fr); } }
.cohorts { display: flex; flex-wrap: wrap; gap: 8px; }
.cohort { font-size: 0.8rem; color: var(--text-dim); padding: 5px 11px; border-radius: 8px;
  background: rgba(30,139,255,0.10); border: 1px solid var(--line); }

/* program accordions */
.prog-list .prog-acc { border-color: var(--line-strong); }
.prog-acc.open { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(30,139,255,0.4); }
.prog-head { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fn-head-inline { color: var(--text-dim); font-weight: 400; font-size: 0.9rem; margin-left: 6px; }
.prog-blurb { color: var(--text-dim); }
.painstrip { margin: 10px 0 4px; }
.prog-sub { font-size: 1.1rem; margin: 18px 0 12px; }

/* ---------- weekly program detail (timeline) ---------- */
.weeks { position: relative; display: flex; flex-direction: column; gap: 14px; }
.wk { display: flex; gap: 14px; }
.wk-rail { flex: none; display: flex; flex-direction: column; align-items: center; }
.wk-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text);
  font: 700 0.95rem var(--font-head); }
.wk-live .wk-n { background: var(--grad); border: none; color: #fff; }
.wk-rail::after { content: ""; flex: 1; width: 2px; background: var(--line); margin-top: 4px; }
.wk:last-child .wk-rail::after { display: none; }
.wk-body { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; }
.wk-live .wk-body { border-color: var(--line-strong); background: linear-gradient(180deg, rgba(30,139,255,0.07), var(--surface)); }
.wk-when { font: 700 0.72rem var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.wk-head h5 { font-size: 1.1rem; margin: 4px 0 2px; }
.wk-meta { color: var(--text-mute); font-size: 0.84rem; }
.tag-live, .tag-uu { font-size: 0.64rem; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.tag-live { background: var(--magenta); color: #fff; }
.tag-uu { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--line); }
.wk-obj { color: var(--text-dim); margin: 10px 0; }
.wk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 10px; }
.wk-col { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.wk-col.accentbox { background: var(--grad-soft); border-color: var(--line-strong); }
.wk-lab { font: 700 0.72rem var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.wk-col.accentbox .wk-lab { color: var(--magenta); }
.wk-col ul { margin: 0; font-size: 0.88rem; color: var(--text-dim); }
.wk-foot { display: grid; gap: 6px; font-size: 0.9rem; color: var(--text-dim); }
.wk-foot strong { color: var(--text); font-family: var(--font-head); font-size: 0.74rem; letter-spacing: 0.06em;
  text-transform: uppercase; margin-right: 6px; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.tool { font-size: 0.74rem; padding: 4px 9px; border-radius: 6px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text-mute); }
/* in-content cross-links between sections */
.xlink { color: var(--blue); border-bottom: 1px solid var(--line-strong); transition: color 0.15s, border-color 0.15s; }
.xlink:hover { color: var(--magenta); border-bottom-color: var(--magenta); }
.tool-link { margin-left: auto; font-size: 0.74rem; font-weight: 600; border-bottom: none; white-space: nowrap; }
.tool-link:hover { color: var(--magenta); }

/* ---------- timeline dots ---------- */
.tl-dot { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff;
  display: grid; place-items: center; font: 700 0.85rem var(--font-head); box-shadow: 0 0 0 4px var(--bg); }

/* ---------- THEMES (Arxada default, plus Light + Midnight) ---------- */
[data-theme="light"] {
  --bg: #EEF3FB; --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-2: #F1F5FC;
  --line: rgba(12,40,90,0.12); --line-strong: rgba(12,40,90,0.24);
  --text: #0C1A33; --text-dim: #41506B; --text-mute: #7385A3;
  --grad-soft: linear-gradient(120deg, rgba(30,139,255,0.10), rgba(255,46,146,0.08));
  --shadow: 0 18px 46px rgba(20,50,100,0.16);
}
[data-theme="midnight"] {
  --bg: #070710; --bg-2: #0E0E18; --surface: #15151F; --surface-2: #1D1D2A;
  --line: rgba(255,255,255,0.10); --line-strong: rgba(255,255,255,0.18);
  --text: #ECECF4; --text-dim: #A6A6C0; --text-mute: #74748F;
  --shadow: 0 18px 50px rgba(0,0,0,0.5);
}

/* ---------- light / dark MODE (independent of brand) ----------
   data-mode overrides only the neutral palette (bg/surface/text/line/shadow);
   the brand theme keeps providing the accent colours. html[data-mode] outranks
   the single-attribute [data-theme] brand blocks on specificity, so it wins
   regardless of source order. Set by the sun/moon control. */
html[data-mode="light"] {
  --bg: #EEF3FB; --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-2: #F1F5FC;
  --line: rgba(12,40,90,0.12); --line-strong: rgba(12,40,90,0.24);
  --text: #0C1A33; --text-dim: #41506B; --text-mute: #7385A3;
  --shadow: 0 18px 46px rgba(20,50,100,0.16);
}
html[data-mode="dark"] {
  --bg: #070710; --bg-2: #0E0E18; --surface: #15151F; --surface-2: #1D1D2A;
  --line: rgba(255,255,255,0.10); --line-strong: rgba(255,255,255,0.18);
  --text: #ECECF4; --text-dim: #A6A6C0; --text-mute: #74748F;
  --shadow: 0 18px 50px rgba(0,0,0,0.5);
}

/* ---------- theme switch (minimal: one cycling view button + sun/moon) ---------- */
.theme-switch { display: inline-flex; align-items: center; gap: 4px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px; box-shadow: var(--shadow); }
.ts-sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
.ts-btn { border: none; background: none; color: var(--text); font: 600 0.74rem var(--font-body);
  padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.ts-btn:hover { background: var(--surface-2); }
.ts-mode-btn { display: grid; place-items: center; width: 27px; height: 27px; border: none; background: none;
  color: var(--text-mute); border-radius: 999px; cursor: pointer; transition: all 0.15s ease; }
.ts-mode-btn svg { width: 15px; height: 15px; }
.ts-mode-btn:hover { color: var(--text); background: var(--surface-2); }

/* ---------- approach detail ---------- */
/* nests the bullets clearly under the header text (accordion body padding is 18px,
   list markers render ~1em to the left, so we pad well past that) */
.ap-detail { margin: 12px 0 6px; padding-left: 44px; font-size: 0.92rem; color: var(--text-dim); }
.ap-detail li { margin: 0.42em 0; padding-left: 0.25em; }
.ap-detail li::marker { color: var(--blue); }

/* ---------- cadence visual ---------- */
.cadence { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 20px; }
.cad { flex: 1 1 92px; min-width: 92px; text-align: center; padding: 14px 8px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); transition: transform 0.15s; }
.cad:hover { transform: translateY(-2px); }
.cad.active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(30,139,255,0.45); background: var(--grad-soft); }
.cad-live { background: var(--grad-soft); border-color: var(--line-strong); box-shadow: 0 0 0 1px rgba(30,139,255,0.25); }
.cad-wk { font-size: 0.68rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.cad-dot { font-size: 1.05rem; color: var(--blue); margin: 3px 0; }
.cad-live .cad-dot { color: var(--magenta); }
.cad-lab { font: 600 0.8rem var(--font-head); line-height: 1.15; }
.cad-type { font-size: 0.64rem; color: var(--text-mute); margin-top: 4px; }

/* ---------- objectives + key questions ---------- */
.obj-block { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 18px; }
.obj-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.obj-col.accentbox { background: var(--grad-soft); border-color: var(--line-strong); }
.obj-col p, .obj-col ul { margin: 0; }

/* ---------- signature live sessions ---------- */
.sess { background: var(--surface); border: 1px solid var(--line-strong); border-left: 4px solid var(--magenta);
  border-radius: var(--radius); padding: 22px 24px; margin: 6px 0 12px; }
.sess-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sess-part { font: 700 0.72rem var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--magenta); }
.sess-mode { font-size: 0.72rem; color: var(--text-dim); background: var(--bg-2); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; }
.sess-title { font-size: 1.4rem; margin: 8px 0 2px; background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.sess-theme { color: var(--text-dim); font-weight: 600; }
.sess-focus { color: var(--text-dim); margin: 6px 0 0; }

/* ---------- Upgrade University mini bands ---------- */
.uu-mini { background: var(--bg-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  padding: 14px 18px; margin: 0 0 12px 18px; }
.uu-mini-h { font-weight: 600; }
.uu-when { color: var(--text-mute); font-size: 0.8rem; margin-left: 6px; }
.uu-mini p { margin: 6px 0 0; color: var(--text-dim); font-size: 0.92rem; }

/* ---------- teaching modes ---------- */
.tm-block { margin: 40px 0 18px; padding-top: 26px; border-top: 1px solid var(--line); }
.tm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tm { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--blue);
  border-radius: var(--radius-sm); padding: 16px; }
.tm-h { font: 700 0.95rem var(--font-head); color: var(--blue); margin-bottom: 6px; }
.tm p { margin: 0; color: var(--text-dim); font-size: 0.9rem; }

/* ---------- blueprint wrap-around (included / tools / docs) ---------- */
.meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.meta-col ul { font-size: 0.86rem; color: var(--text-dim); }
.meta-col.muted ul { color: var(--text-mute); }

/* ---------- hand-over box ---------- */
.handover { margin-top: 26px; padding: 24px; border-radius: var(--radius); background: var(--grad-soft); border: 1px solid var(--line-strong); }
.ho-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ho-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 16px; }
.ho-name { font-weight: 600; }
.ho-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- calculator: per-function rows ---------- */
.calc-fn-list { display: flex; flex-direction: column; gap: 6px; }
.calc-fn { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); }
.calc-fn .chk { font-size: 0.9rem; }
.calc-fn-opts { display: flex; gap: 12px; flex: none; }
.calc-fn .inperson, .calc-fn .deepdive { font-size: 0.76rem; color: var(--text-dim); }
.calc-fn .inperson.off, .calc-fn .deepdive.off { opacity: 0.4; }

/* diagnostics versions */
.diag-versions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.diag-version { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.diag-version .dv-meta { font-size: 0.74rem; color: var(--magenta); }
.diag-version p { margin: 6px 0 0; color: var(--text-dim); font-size: 0.88rem; }

/* ---------- geography waves ---------- */
.waves { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.wave { display: flex; gap: 12px; align-items: baseline; }
.wave-w { flex: none; font: 700 0.74rem var(--font-head); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--magenta); min-width: 64px; }

/* ---------- scope of work ---------- */
.sow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.sow-col { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--blue);
  border-radius: var(--radius); padding: 18px 20px; }
.sow-col h4 { margin: 0 0 8px; font-size: 1rem; }
.sow-col ul { font-size: 0.88rem; color: var(--text-dim); margin: 0; }
.callout.muted .callout-h { color: var(--text-dim); }

/* ---------- multi-page nav ---------- */
.nav-n { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--line); font: 700 0.7rem var(--font-head);
  color: var(--text-mute); margin-right: 10px; margin-top: 1px; }
/* Align the number badge to the FIRST line of the label, so single-line and
   wrapping (two-line) items read with the same left rhythm. */
.toc-list > li > a { display: flex; align-items: flex-start; line-height: 1.3; }
.toc-list > li > a.active .nav-n { background: var(--grad); color: #fff; border-color: transparent; }
/* Primary page (Proposal on a Page): a persistent highlight so it always reads
   as a main entry, even when another page is active. */
.nav-li.nav-primary > a { background: var(--grad-soft); font-weight: 700; box-shadow: inset 2px 0 0 var(--magenta); }
.nav-li.nav-primary > a .nav-n { background: var(--grad); color: #fff; border-color: transparent; }
.nav-sep { list-style: none; height: 0; border-top: 1px solid var(--line-strong); margin: 12px 8px 8px; }
.nav-head { list-style: none; font: 700 0.68rem var(--font-head); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-mute); padding: 2px 4px 6px; }
/* Grouped nav band: a labelled, tinted run of pages (e.g. "The Program") set off
   by a line above the heading and a line below the last item. */
.nav-group-head { list-style: none; margin-top: 12px; padding: 8px 10px 5px; border-top: 1px solid var(--line-strong);
  background: var(--grad-soft); border-radius: 8px 8px 0 0; }
.nav-group-head span { font: 700 0.64rem var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--magenta); }
.nav-li.in-group { background: var(--grad-soft); }
.nav-li.in-group:last-of-type { border-radius: 0 0 8px 8px; }
.nav-group-end { list-style: none; height: 0; border-bottom: 1px solid var(--line-strong); margin: 0 0 8px; }

/* ---------- pager ---------- */
.pager { display: flex; justify-content: space-between; gap: 12px; margin: 44px 0 6px; }
.pager-btn { display: flex; flex-direction: column; gap: 2px; padding: 14px 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line-strong); min-width: 150px; transition: transform 0.15s, border-color 0.2s; }
.pager-btn:hover { transform: translateY(-2px); border-color: var(--blue); text-decoration: none; }
.pager-btn span { font-size: 0.72rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.08em; }
.pager-btn strong { font-family: var(--font-head); color: var(--text); }
.pager-btn.next { text-align: right; margin-left: auto; }

/* ---------- program elements + jump flash ---------- */
.prog-els { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.prog-el { scroll-margin-top: 16px; border-radius: var(--radius); }
.prog-el.flash-el { animation: flashEl 1s ease; }
.acc.flash-el { animation: flashAcc 1s ease; }
@keyframes flashAcc { 0% { outline: 0 solid transparent; } 30% { outline: 3px solid var(--blue); outline-offset: 2px; } 100% { outline: 0 solid transparent; } }
/* Program panels (tab mode): only the active panel shows; "See full program"
 * (.show-all) reveals them all, where each header becomes a collapse toggle. */
.prog-panels { margin-top: 6px; }
.prog-panel { display: none; }
.prog-panel.active { display: block; }
.prog-panels.show-all .prog-panel { display: block; margin-bottom: 16px; }
.prog-panel-h { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-align: left; background: none; border: none; padding: 0 0 12px; margin-bottom: 4px;
  font: 700 0.98rem var(--font-head); color: var(--text); border-bottom: 1px solid var(--line); cursor: default; }
.prog-panels.show-all .prog-panel-h { cursor: pointer; }
.panel-cue { display: none; align-items: center; gap: 6px; color: var(--blue); font: 700 0.72rem var(--font-head);
  text-transform: uppercase; letter-spacing: 0.05em; }
.prog-panels.show-all .panel-cue { display: inline-flex; }
.panel-cue-txt::after { content: "Close"; }
.prog-panel.collapsed .panel-cue-txt::after { content: "Expand"; }
.panel-chevron { transition: transform 0.2s ease; }
.prog-panel.collapsed .panel-chevron { transform: rotate(-90deg); }
.prog-panels.show-all .prog-panel.collapsed .prog-panel-body { display: none; }
.prog-expand-row { display: flex; justify-content: flex-end; margin: 10px 0 4px; }
.tech-note { margin-top: 16px; background: var(--grad-soft); border: 1px solid var(--line-strong);
  border-left: 4px solid var(--blue); border-radius: var(--radius); padding: 18px 20px; }
.tech-note p { margin: 0; color: var(--text-dim); line-height: 1.55; }
@keyframes flashEl { 0% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 3px var(--blue); } 100% { box-shadow: 0 0 0 0 transparent; } }
.uu-full { background: var(--surface); border: 1px solid var(--line-strong); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 16px 20px; height: 100%; }
.uu-full .uu-mini-h { font-weight: 600; color: var(--text); }
.uu-frame { color: var(--text-dim); font-size: 0.9rem; margin: 8px 0 6px; }
.uu-eg { color: var(--text); margin: 0; }
.uu-egs { color: var(--text); margin: 8px 0 0; padding-left: 1.1em; }
.uu-egs li { margin: 4px 0; }
/* a live session's two self-paced weeks, side by side with a tall reminder */
.uu-pair { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: stretch; }
.uu-pair-left { display: flex; flex-direction: column; gap: 14px; }
.uu-note { background: var(--grad-soft); border: 1px solid var(--line-strong); border-left: 4px solid var(--blue);
  border-radius: var(--radius); padding: 16px 18px; align-self: stretch; }
.uu-note-h { font-weight: 700; color: var(--text); margin-bottom: 8px; font-size: 0.95rem; }
.uu-note p { margin: 0; color: var(--text-dim); font-size: 0.9rem; line-height: 1.55; }
.cad-uu { opacity: 0.92; }
.sess-dur { font-size: 0.82rem; color: var(--accent); font-weight: 600; margin-top: 2px; }

/* ---------- cadence: live sessions ranked above Upgrade University ---------- */
.cad { font: inherit; color: inherit; cursor: pointer; text-align: center; }
.cad-rank { font: 700 0.6rem var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 2px; }
.cad-live { flex: 1.7 1 130px; box-shadow: 0 0 0 1px rgba(30,139,255,0.3); }
.cad-live .cad-rank { color: var(--magenta); }
.cad-live .cad-lab { font-size: 0.95rem; }
.cad-uu { flex: 0.85 1 80px; opacity: 0.8; }
.cad-uu .cad-lab { font-size: 0.74rem; color: var(--text-dim); }
.cad:hover { transform: translateY(-2px); border-color: var(--blue); }

/* ---------- function cards as links ---------- */
.fn-card { display: block; text-decoration: none; color: inherit; }
.fn-card:hover { text-decoration: none; }
.fn-sess { font: 600 0.78rem var(--font-head); color: var(--magenta); margin: 6px 0; }
.fn-open { display: inline-block; margin-top: 8px; color: var(--blue); font-weight: 600; font-size: 0.88rem; }

/* ---------- scenario note ---------- */
.scn-note { margin-top: 10px; font-size: 0.8rem; color: var(--text-mute);
  border-top: 1px dashed var(--line); padding-top: 8px; }

/* ---------- sleek scrollbars ---------- */
.toc { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.toc::-webkit-scrollbar, body::-webkit-scrollbar { width: 8px; height: 8px; }
.toc::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
.toc::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: var(--blue); }
.toc::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
 * DESIGN REFINEMENTS ,  senior pass: rhythm, elevation, focus, polish
 * ===================================================================== */

/* Why Us: a clean 2x2; an odd last card spans the full width (no orphan) */
.why-grid { grid-template-columns: repeat(2, 1fr); }
.why-grid > .why:last-child:nth-child(odd) { grid-column: 1 / -1; }
.why { border-top: 3px solid transparent; border-image: var(--grad) 1; position: relative;
  transition: transform 0.18s ease, box-shadow 0.2s ease; }
.why:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.why h4 { letter-spacing: 0.04em; }

/* Hero: stronger presence + clear CTAs */
.hero { padding-top: 110px; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -0.02em; margin: 10px 0 20px; }
.hero-sub { font-size: 1.24rem; line-height: 1.5; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 4px; }
.btn-lg { padding: 14px 24px; font-size: 1rem; }
.btn-accent { box-shadow: 0 10px 30px rgba(30,139,255,0.35); }

/* Type rhythm */
.section { padding: 84px 8%; }
.section-title { font-size: clamp(1.8rem, 3.6vw, 2.7rem); letter-spacing: -0.015em; margin-bottom: 26px; }
.lead { font-size: 1.16rem; line-height: 1.6; }
.eyebrow { font-size: 0.8rem; }

/* Unified card elevation */
.card, .uc, .sow-col, .path-card, .tm, .fn-card, .stat {
  transition: transform 0.16s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.card:hover, .uc:hover, .sow-col:hover, .tm:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Nav: premium active state */
.toc-brand { font-size: 1.1rem; letter-spacing: -0.01em; }
.toc-list > li > a { padding: 8px 12px; border-radius: 9px; font-weight: 500; transition: background 0.15s, color 0.15s; }
.toc-list > li > a:hover { background: var(--surface); color: var(--text); }
.toc-list > li > a.active { background: var(--grad-soft); color: var(--text); }

/* Pager polish */
.pager-btn { box-shadow: 0 6px 20px rgba(0,8,30,0.18); }

/* Cadence: premium signature block */
.cad { border-radius: 14px; }
.cad-live { box-shadow: 0 8px 24px rgba(30,139,255,0.22), 0 0 0 1px rgba(30,139,255,0.35); }
.cad-dot { font-size: 1.2rem; }

/* Accessibility: visible focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Selection */
::selection { background: var(--magenta); color: #fff; }

/* ---------- bios ---------- */
.bio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.bio { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; transition: transform 0.16s, box-shadow 0.2s, border-color 0.2s; }
.bio:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue); }
.bio-avatar { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad); color: #fff; font: 700 1rem var(--font-head); }
.bio-name { font: 700 1rem var(--font-head); }
.bio-role { color: var(--magenta); font-size: 0.8rem; margin-bottom: 6px; }
.bio-body p { margin: 0; color: var(--text-dim); font-size: 0.9rem; }
.tt-lab { margin-top: 20px; }

/* ---------- scope to your budget (reverse calculator) ---------- */
.budget-scope { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; margin-top: 10px; }
.bs-input { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; align-self: start; }
.bs-out { background: var(--grad-soft); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 22px; }
.bs-lines { margin: 8px 0; }
.bs-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.bs-row span:first-child { color: var(--text-dim); }
.bs-row.on span:last-child { color: var(--text); font-weight: 600; }
.bs-row.off span:last-child { color: var(--text-mute); }

/* ---------- pager: refined (overrides earlier) ---------- */
.pager { margin: 56px 0 24px; padding-top: 24px; border-top: 1px solid var(--line); gap: 16px; align-items: center; }
.pager-btn { flex-direction: row; align-items: center; gap: 14px; background: transparent;
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; min-width: 0; box-shadow: none;
  max-width: 48%; }
.pager-btn .pager-arrow { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--blue); font-size: 1.1rem; transition: all 0.18s ease; }
.pager-btn .pager-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pager-btn span { font-size: 0.7rem; }
.pager-btn strong { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pager-btn:hover { border-color: var(--blue); transform: none; }
.pager-btn:hover .pager-arrow { background: var(--grad); color: #fff; border-color: transparent; }
.pager-btn.next { text-align: right; }
.pager-btn.next .pager-txt { align-items: flex-end; }

/* ---------- delivery options ---------- */
.delivery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 22px; }
.delivery-opt { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--magenta);
  border-radius: var(--radius); padding: 16px 18px; }
.do-mode { font: 700 0.95rem var(--font-head); margin-bottom: 6px; }
.delivery-opt p { margin: 0; color: var(--text-dim); font-size: 0.9rem; }
@media (max-width: 900px) { .delivery-grid { grid-template-columns: 1fr; } .pager-btn { max-width: none; } }

/* ---------- calculator: help text + delivery + deep-dive ---------- */
.ctl-help { font-size: 0.84rem; color: var(--text-dim); margin: 0 0 12px; }
.calc-del { background: var(--bg-2); color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px;
  font: 500 0.8rem var(--font-body); padding: 5px 8px; cursor: pointer; }
.calc-del:disabled { opacity: 0.4; }
.dd-block { margin-top: 12px; }
.dd-lab { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 8px; }
.dd-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.dd-opt { font-size: 0.86rem; }
.dd-opt.off { opacity: 0.4; }
/* per-function diagnostics depth slider (basic -> deep-dive strategy) */
.dd-sliders { display: flex; flex-direction: column; gap: 10px; }
.dd-slide { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dd-slide.off { opacity: 0.4; }
.dd-fn { flex: 1 1 140px; min-width: 120px; font-size: 0.9rem; }
.dd-control { display: inline-flex; align-items: center; gap: 8px; }
.dd-end { font-size: 0.72rem; color: var(--text-mute); white-space: nowrap; }
.dd-range { width: 84px; accent-color: var(--magenta); cursor: pointer; }
.dd-slide.deep .dd-deep { color: var(--magenta); font-weight: 700; }
.dd-slide:not(.deep) .dd-basic { color: var(--text); font-weight: 600; }

/* ---------- cost legend ---------- */
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lg-grp { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.lg-h { font: 700 0.78rem var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.lg-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; padding: 4px 0; border-bottom: 1px solid var(--line); }
.lg-row:last-child { border-bottom: none; }
.lg-row span:first-child { color: var(--text-dim); }
.lg-row span:last-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.legend .muted.small { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) { .legend, .dd-list { grid-template-columns: 1fr; } }

/* ---------- two levels of diagnostics ---------- */
.diag-types { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.diag-type { background: var(--surface); border: 1px solid var(--line-strong); border-left: 4px solid var(--magenta);
  border-radius: var(--radius); padding: 18px 20px; }
.dt-lvl { font: 700 0.72rem var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.dt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.dt-name { font: 700 1.02rem var(--font-head); }
.dt-scope { font-size: 0.74rem; color: var(--magenta); white-space: nowrap; }
.diag-type p { color: var(--text-dim); }
.incl-base { display: flex; gap: 7px; align-items: center; font-size: 0.88rem; color: var(--text-dim); margin: 4px 0 10px; }
@media (max-width: 760px) { .diag-types { grid-template-columns: 1fr; } }

/* ---------- scenario note (top of the scenarios box) ---------- */
.scn-note { margin: 4px 0 10px; font-size: 0.8rem; color: var(--text-dim); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; display: flex; gap: 7px; }
.scn-ico { color: var(--magenta); flex: none; }

/* ---------- pricing visibility ---------- */
body.hide-pricing [data-pricing] { display: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .toc { position: static; width: auto; height: auto; flex-direction: row; align-items: center;
    overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .toc-list { flex-direction: row; align-items: center; }
  .toc-sub, .has-kids.open > .toc-sub { display: none; }   /* keep the mobile bar clean */
  .nav-sep { display: none; }
  .nav-head { flex: none; white-space: nowrap; align-self: center; padding: 2px 8px; }
  .toc-top { flex: none; }
  .toc-resize, .nav-toggle, .nav-open-btn, .kid-toggle { display: none; }
  #app, .foot { margin-left: 0; }
  .builder { grid-template-columns: 1fr; }
  .card-grid.two { grid-template-columns: 1fr; }
  .uu-pair { grid-template-columns: 1fr; }
  .grid-2x2 { grid-template-columns: 1fr; }
  .uc-grid { grid-template-columns: 1fr; }
  .wk-cols { grid-template-columns: 1fr; }
  .obj-block { grid-template-columns: 1fr; }
  .tm-grid { grid-template-columns: 1fr; }
  .meta-grid { grid-template-columns: 1fr 1fr; }
  .sow-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .bio-grid { grid-template-columns: 1fr; }
  .budget-scope { grid-template-columns: 1fr; }
  .diag-versions { grid-template-columns: 1fr; }
  .calc-fn { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .meta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .section { padding: 50px 6%; }
  .chk-grid { grid-template-columns: 1fr; }
  .gate-card form { flex-direction: column; }
  .feature-card { flex-direction: column; align-items: flex-start; }
  .pager { flex-direction: column; }
  .pager-btn.next { text-align: left; }
  .why-grid { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { text-align: center; }
  .cmt-panel { width: 100vw; right: 0; }
}

/* ---------- internal comments (internal sessions only) ---------- */
.cmt-bar {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--surface);
}
.cmt-h {
  font: 700 0.78rem var(--font-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.cmt-list { display: flex; flex-direction: column; gap: 10px; }
.cmt-item { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.cmt-item:last-child { border-bottom: none; padding-bottom: 0; }
.cmt-meta { font-size: 0.74rem; color: var(--text-mute); margin-bottom: 2px; }
.cmt-del { float: right; border: none; background: none; color: var(--text-mute); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 4px; margin-left: 8px; border-radius: 6px; }
.cmt-del:hover { color: #fff; background: #d40000; }
.cmt-del:disabled { opacity: 0.4; cursor: default; }
.cmt-text { color: var(--text-dim); white-space: pre-wrap; }
.cmt-empty { color: var(--text-mute); font-size: 0.88rem; }
.cmt-form { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.cmt-client .cmt-form { flex-direction: column; align-items: stretch; }
.cmt-form textarea {
  flex: 1;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  resize: vertical;
}
.cmt-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  background: var(--grad);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font: 600 0.86rem var(--font-body);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(30,139,255,0.35);
}
.cmt-fab:hover { transform: translateY(-1px); }
.cmt-panel {
  position: fixed;
  right: 18px;
  bottom: 64px;
  z-index: 60;
  width: 380px;
  max-height: 70vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.cmt-panel-h {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  font: 700 0.82rem var(--font-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.cmt-close { background: none; border: none; color: var(--text-dim); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.cmt-panel-add { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cmt-add-lbl { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 8px; }
.cmt-panel-add .cmt-form { margin-top: 0; }
.cmt-panel-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 16px; }
.cmt-group-h { font-weight: 600; color: var(--text); margin-bottom: 8px; }
.cmt-group .cmt-item { margin-top: 6px; }

/* ===== Cover note (on-load popup) ===== */
.cover-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto; background: rgba(7,7,16,0.62); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.28s ease; }
.cover-modal.open { opacity: 1; }
.cover-modal[hidden] { display: none; }
.cover-dialog { position: relative; width: 100%; max-width: 760px; margin: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; transform: translateY(18px) scale(0.985);
  transition: transform 0.28s ease; }
.cover-modal.open .cover-dialog { transform: none; }
.cover-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background 0.15s ease, transform 0.15s ease; }
.cover-close:hover { background: var(--bg-2); transform: scale(1.06); }
.cover-body { padding: 26px 30px 30px; }
.cover-body h1 { margin: 6px 0 0; font-size: clamp(1.5rem, 3vw, 2rem); }

/* photo, prominent at the very top of the dialog (bleeds to its edges) */
.cl-photo { margin: 0; max-width: none; min-height: clamp(220px, 32vw, 340px); border: 0; border-radius: 0;
  background: var(--grad-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cl-photo img { width: 100%; height: 100%; object-fit: cover; }
.cl-photo-ph { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-mute); text-align: center; padding: 24px; }
.cl-photo-ic { font-size: 2rem; opacity: 0.85; }
.cl-photo-lab { font-size: 0.95rem; letter-spacing: 0.02em; }

.cl-letter { margin: 16px 0 0; }
.cl-letter p { color: var(--text-dim); font-size: 0.98rem; line-height: 1.65; margin: 0 0 12px; }
.cl-salutation { color: var(--text); font-weight: 600; }
.cl-signoff { color: var(--text); margin-top: 16px; }
.cl-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 18px; }
.cl-signer { background: transparent; border: 0; padding: 0; }
.cl-sig-name { font-family: var(--font-head); font-weight: 700; color: var(--text); }
.cl-sig-role { color: var(--magenta); font-size: 0.82rem; margin-top: 2px; }
.cl-sig-detail { color: var(--text-dim); font-size: 0.86rem; margin-top: 8px; }
.cl-trustedby { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 6px; }
.cl-trustedby-lab { color: var(--text-mute); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; }
.cl-trustedby-names { color: var(--text-dim); font-size: 0.9rem; }
.cl-cta { margin-top: 20px; }

/* founder signatures (on a light plate so blue ink reads on any theme) */
.cl-sig-img { display: block; height: 60px; width: auto; max-width: 286px; object-fit: contain;
  object-position: left center; margin: 0 0 8px; padding: 4px 8px; background: #fff;
  border-radius: 6px; border: 0; }

/* left-menu re-open item */
.nav-cover .nav-n { background: var(--grad); color: #fff; border: 0; }

/* ===== Proposal on a page (compact visual snapshot) ===== */
.op-intro { color: var(--text-dim); font-size: 0.95rem; line-height: 1.55; max-width: 760px; margin: 0 0 18px; }
.op-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; align-items: start; }
.op-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.op-box-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; color: var(--text); font-size: 0.98rem; }
.op-box-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); color: var(--magenta); font-size: 0.8rem; }
.op-box-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.op-box-list li { position: relative; padding-left: 16px; color: var(--text-dim); font-size: 0.82rem; line-height: 1.45; }
.op-box-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.op-map-h { margin: 22px 0 10px; font-family: var(--font-head); font-weight: 700; color: var(--text); font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.06em; }
.op-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.op-tile { display: flex; flex-direction: column; gap: 3px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 14px 16px; transition: border-color 0.15s ease, transform 0.15s ease; }
.op-tile:hover { border-color: var(--magenta); transform: translateY(-2px); }
.op-tile-n { width: 26px; height: 26px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text); display: grid; place-items: center; font: 700 0.8rem var(--font-head); margin-bottom: 6px; }
.op-tile-label { color: var(--text); font-weight: 700; font-size: 0.92rem; }
.op-tile-note { color: var(--text-dim); font-size: 0.78rem; line-height: 1.4; }

/* sub-headers between dashboard blocks */
.op-sub { margin: 22px 0 10px; font-family: var(--font-head); font-weight: 700; color: var(--text); font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.06em; }
.op-sub-note { font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-mute); font-size: 0.8rem; }
.op-note { color: var(--text-mute); font-size: 0.78rem; margin: 14px 0 0; }

/* metrics strip */
.op-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.op-metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.op-metric-n { font-family: var(--font-head); font-weight: 800; color: var(--text); font-size: 1.45rem; line-height: 1.05;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.op-metric-l { color: var(--text-dim); font-size: 0.74rem; line-height: 1.3; margin-top: 4px; }

/* function chips */
.op-fns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.op-fn { text-decoration: none; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text);
  font-size: 0.82rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; transition: border-color 0.15s ease, transform 0.15s ease; }
.op-fn:hover { border-color: var(--magenta); transform: translateY(-1px); }

/* pathway price cards */
.op-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.op-path { position: relative; display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 14px 15px; transition: border-color 0.15s ease, transform 0.15s ease; }
.op-path:hover { border-color: var(--magenta); transform: translateY(-2px); }
.op-path.on { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta); }
.op-path-tag { position: absolute; top: -9px; left: 12px; background: var(--grad); color: #fff; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 999px; }
.op-path-name { font-family: var(--font-head); font-weight: 700; color: var(--text); font-size: 0.96rem; }
.op-path-tier { color: var(--text-mute); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.op-path-price { color: var(--magenta); font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; margin-top: 4px; }
.op-path-sum { color: var(--text-dim); font-size: 0.78rem; line-height: 1.4; margin-top: 4px; }
/* Selectable one-pager modules (button variant): dim when deselected, tick when on. */
button.op-path { font: inherit; text-align: left; cursor: pointer; background: var(--surface); }
.op-path[data-op-mod] { transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.op-path[data-op-mod]:not(.on) { opacity: 0.5; }
.op-path[data-op-mod]:not(.on) .op-path-tag { opacity: 0.5; }
.op-path-check { position: absolute; top: 8px; right: 10px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.op-path.on .op-path-check { background: var(--grad); border-color: transparent; }
.op-path.on .op-path-check::after { content: "✓"; color: #fff; font-size: 0.7rem; display: grid; place-items: center; height: 100%; }
.op-tlh-step.op-hide { display: none; }

/* Commercials builder (DWS): the build-your-own list, the live total, the budget tool. */
.cb-build { margin: 8px 0 4px; }
.cb-group { margin-bottom: 14px; }
.cb-group-h { font: 700 0.72rem var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 10px 0 6px; }
.cb-rowwrap { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 8px; transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; }
.cb-rowwrap.on { border-color: var(--magenta); box-shadow: inset 3px 0 0 var(--magenta); }
.cb-rowwrap:not(.on) { opacity: 0.62; }
.cb-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.cb-row-pick { display: flex; align-items: center; gap: 12px; flex: 1; cursor: pointer; min-width: 0; }
.cb-expand { flex: none; display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font: 700 0.7rem var(--font-head); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-mute); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.cb-expand:hover { border-color: var(--magenta); color: var(--magenta); }
.cb-caret { transition: transform 0.18s ease; font-size: 0.8rem; }
.cb-rowwrap.comps-open .cb-caret { transform: rotate(180deg); }
.cb-comps { display: none; padding: 2px 14px 14px 44px; }
.cb-rowwrap.comps-open .cb-comps { display: block; }
.cb-comp { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line); cursor: pointer; }
.cb-comp:first-child { border-top: 0; }
.cb-comp-check { width: 16px; height: 16px; accent-color: var(--magenta); flex: none; }
.cb-comp-label { flex: 1; color: var(--text-dim); font-size: 0.86rem; min-width: 0; }
.cb-comp-price { font-family: var(--font-head); font-weight: 700; color: var(--text); font-size: 0.84rem; white-space: nowrap; }
.cb-comp-hint { margin: 6px 0 0; color: var(--text-mute); font-size: 0.72rem; }
.cb-total-foot { margin: 8px 2px 0; }
.cb-check { width: 18px; height: 18px; accent-color: var(--magenta); flex: none; }

/* The Builds page (DWS): three clearly separated, numbered build sections. */
.build-list { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.build-block { display: flex; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.build-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font: 800 1rem var(--font-head); }
.build-body { flex: 1; min-width: 0; }
.build-tag { font: 700 0.7rem var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, var(--magenta)); margin-bottom: 4px; }
.build-h { font-family: var(--font-head); font-weight: 700; color: var(--text); font-size: 1.15rem; margin: 0 0 6px; }
.build-body p { color: var(--text-dim); margin: 0 0 8px; }
@media (max-width: 560px) { .build-block { flex-direction: column; gap: 12px; } }

/* One-pager: the live indicative-budget readout under the selectable modules. */
.op-budget { margin: 10px 0 4px; }
.op-budget-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--grad-soft); border: 1px solid var(--line-strong); }
.op-budget-lab { font: 700 0.8rem var(--font-head); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-dim); }
.op-budget-star { color: var(--magenta); }
.op-budget-val { font: 800 1.15rem var(--font-head); color: var(--text); white-space: nowrap; }
.op-budget-note { margin: 7px 2px 0; color: var(--text-mute); font-size: 0.78rem; }
.cb-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cb-row-name { font-family: var(--font-head); font-weight: 700; color: var(--text); }
.cb-core { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: var(--accent, var(--magenta)); padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.cb-row-tier { color: var(--text-mute); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; }
.cb-row-price { font-family: var(--font-head); font-weight: 800; color: var(--magenta); white-space: nowrap; }
.cb-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--grad-soft); border: 1px solid var(--line-strong); }
.cb-total-lab { font: 700 0.8rem var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }
.cb-total-val { font: 800 1.2rem var(--font-head); color: var(--text); }
.cb-budget { display: flex; align-items: center; gap: 10px; margin: 10px 0 16px; }
.cb-budget-cur { font: 700 1rem var(--font-head); color: var(--text-dim); }
.cb-budget-in { flex: 1; max-width: 260px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 600 1rem var(--font-body); }
.cb-budget-head { font: 700 0.95rem var(--font-head); color: var(--text); margin-bottom: 8px; }
.cb-budget-list { margin: 0 0 10px; padding-left: 0; list-style: none; }
.cb-budget-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); }

/* timeline mini-strip */
.op-tl { display: grid; gap: 6px; }
.op-tl-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 13px; }
.op-tl-when { color: var(--magenta); font-weight: 700; font-size: 0.78rem; }
.op-tl-what { color: var(--text-dim); font-size: 0.8rem; line-height: 1.4; }

/* ===== Measurement (AIR) ===== */
.air-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 4px; }
.air-tier { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.air-tier-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font: 700 0.85rem var(--font-head); }
.air-tier-h { font-family: var(--font-head); font-weight: 700; color: var(--text); font-size: 0.92rem; }
.air-tier-p { color: var(--text-dim); font-size: 0.82rem; line-height: 1.45; margin-top: 3px; }
.air-tier-list { margin: 3px 0 0; padding-left: 16px; }
.air-tier-list li { color: var(--text-dim); font-size: 0.82rem; line-height: 1.45; margin-top: 3px; }
/* DWS has four maturity levels: lay them out two-by-two (1 & 2 / 3 & 4). */
[data-theme="dws"] .air-tiers { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { [data-theme="dws"] .air-tiers { grid-template-columns: 1fr; } }
.air-dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.air-dims .pill { display: block; text-align: center; padding: 9px 12px; font-size: 0.84rem; }
.air-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.air-fig { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.air-fig img { display: block; width: 100%; height: auto; }
.air-fig figcaption { color: var(--text-dim); font-size: 0.78rem; line-height: 1.4; padding: 10px 14px; border-top: 1px solid var(--line); }
.air-fig:first-child { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .cl-sign { grid-template-columns: 1fr; }
  .op-summary { grid-template-columns: 1fr; }
  .op-map { grid-template-columns: repeat(2, 1fr); }
  .op-metrics { grid-template-columns: repeat(3, 1fr); }
  .op-paths { grid-template-columns: 1fr; }
  .air-tiers { grid-template-columns: 1fr; }
  .air-dims { grid-template-columns: repeat(2, 1fr); }
  .air-figs { grid-template-columns: 1fr; }
  .air-fig:first-child { grid-column: auto; }
}
@media (max-width: 560px) {
  .cover-body { padding: 20px 18px 24px; }
  .op-map { grid-template-columns: 1fr; }
  .op-metrics { grid-template-columns: repeat(2, 1fr); }
  .op-tl-row { grid-template-columns: 70px 1fr; }
}

/* =====================================================================
 * REFINEMENT PASS , pathway toggle, commercials tabs, horizontal timeline,
 * logo wall, case studies + proof strip, why-now / compliance callouts,
 * brighter pager toggles, transparent founder signatures.
 * ===================================================================== */

/* ---------- brighter prev / next pager toggles ---------- */
.pager-btn { border-color: var(--line-strong); background: var(--surface); box-shadow: 0 6px 18px rgba(0,8,30,0.22); }
.pager-btn strong { color: var(--text); }
.pager-btn span { color: var(--text-dim); }
.pager-btn .pager-arrow { color: var(--accent); border-color: var(--accent); }
.pager-btn:hover { border-color: var(--accent); background: var(--surface-2); }
.pager-btn:hover .pager-arrow { background: var(--grad); color: #fff; border-color: transparent; }

/* ---------- transparent founder signatures (drop the white plate on dark themes) ---------- */
.cl-sig-img { background: transparent; padding: 0; border-radius: 0;
  mix-blend-mode: screen; filter: invert(1) grayscale(1) brightness(1.6) contrast(1.05); }
[data-theme="light"] .cl-sig-img { mix-blend-mode: normal; filter: none; }

/* ---------- client logo wall ---------- */
.logo-wall { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; align-items: center; }
.logo-tile { display: inline-flex; align-items: center; justify-content: center;
  min-width: 92px; height: 46px; padding: 8px 16px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); }
.logo-tile .logo-img { display: none; max-height: 28px; max-width: 132px; width: auto; height: auto; }
.logo-tile.has-img .logo-img { display: block; }
.logo-tile.has-img .logo-word { display: none; }
.logo-word { font: 700 0.86rem var(--font-head); letter-spacing: 0.02em; color: var(--text-dim); white-space: nowrap; }
.logo-wall.cover .logo-tile { background: rgba(255,255,255,0.05); }
[data-theme="light"] .logo-tile { background: #fff; }

/* ---------- proof strip ---------- */
.proof-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 16px; }
.proof-chip { display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--magenta);
  border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color 0.15s ease, transform 0.15s ease; }
a.proof-chip:hover { border-color: var(--magenta); transform: translateY(-2px); text-decoration: none; }
.proof-stat { font: 800 1.1rem var(--font-head); color: var(--magenta); }
.proof-client { font-weight: 700; color: var(--text); font-size: 0.92rem; }
.proof-note { color: var(--text-dim); font-size: 0.78rem; line-height: 1.35; }
@media (max-width: 760px) { .proof-strip { grid-template-columns: 1fr; } }

/* ---------- case studies ---------- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; }
.case-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px; }
.case-h { display: flex; flex-direction: column; gap: 2px; }
.case-client { font: 700 1.05rem var(--font-head); color: var(--text); }
.case-sector { color: var(--text-mute); font-size: 0.76rem; }
.case-line { margin: 0; color: var(--text-dim); font-size: 0.86rem; line-height: 1.5; }
.case-line strong { display: block; font: 700 0.66rem var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta); margin-bottom: 2px; }
.cs-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.cs-full { background: var(--surface); border: 1px solid var(--line-strong); border-left: 4px solid var(--magenta);
  border-radius: var(--radius); padding: 20px 22px; }
.cs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cs-client { font: 700 1.2rem var(--font-head); color: var(--text); }
.cs-sector { color: var(--magenta); font-size: 0.8rem; }
.cs-row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.cs-row:first-of-type { border-top: none; }
.cs-lab { font: 700 0.7rem var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); padding-top: 2px; }
.cs-row p { margin: 0; color: var(--text-dim); font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 860px) { .case-grid { grid-template-columns: 1fr; } .cs-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- why-now + compliance callouts (Our Understanding) ---------- */
.why-now-list { columns: 2; column-gap: 28px; margin: 4px 0 0; }
.why-now-list li { margin: 4px 0; color: var(--text-dim); break-inside: avoid; }
.callout.compliance { border-left: 4px solid var(--magenta); }
@media (max-width: 640px) { .why-now-list { columns: 1; } }

/* ---------- program design: pathway toggle ---------- */
.pw-panel { margin: 10px 0 6px; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.pw-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pw-bar-h { font: 700 0.82rem var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--magenta); }
.pw-bar-h .hint { text-transform: none; letter-spacing: 0; }
.pw-toggle { display: inline-flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px; flex-wrap: wrap; }
.pw-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; border: none; background: none; cursor: pointer;
  color: var(--text-dim); font: 600 0.86rem var(--font-body); padding: 8px 16px; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease; }
.pw-btn:hover { color: var(--text); }
.pw-btn.active { background: var(--grad); color: #fff; }
.pw-btn-name { font-family: var(--font-head); font-weight: 700; }
.pw-btn-rec, .pw-btn-tier { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.pw-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pw-head-l { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pw-name { font: 700 1.4rem var(--font-head); color: var(--text); }
.pw-tier { font: 700 0.72rem var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.pw-rec { font: 700 0.62rem var(--font-head); text-transform: uppercase; letter-spacing: 0.06em; color: #fff; background: var(--grad); padding: 3px 10px; border-radius: 999px; }
.pw-price { font: 800 1.2rem var(--font-head); color: var(--magenta); }
.pw-sum { color: var(--text-dim); margin: 10px 0 14px; }
.pw-params { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.pw-param { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.pw-k { font: 700 0.62rem var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
.pw-v { color: var(--text); font-size: 0.86rem; font-weight: 600; }
.pw-incl { margin-top: 12px; }
.pw-incl .wk-lab { color: var(--magenta); }
.pw-incl ul { margin: 4px 0 0; font-size: 0.92rem; color: var(--text-dim); }
.pw-incl.muted .wk-lab { color: var(--text-mute); }
.pw-incl.muted ul { color: var(--text-mute); }
.prog-proof { margin-top: 18px; }
@media (max-width: 760px) { .pw-params { grid-template-columns: 1fr 1fr; } .pw-toggle { width: 100%; justify-content: space-between; } .pw-bar { flex-direction: column; align-items: flex-start; } }

/* ---------- commercials tabs ---------- */
.ctabs { margin-top: 16px; }
.ctab-bar { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line-strong); margin-bottom: 20px; }
.ctab-btn { border: 1px solid transparent; border-bottom: none; background: none; cursor: pointer;
  color: var(--text-dim); font: 700 0.9rem var(--font-head); padding: 11px 18px; border-radius: 10px 10px 0 0; transition: background 0.15s ease, color 0.15s ease; }
.ctab-btn:hover { color: var(--text); background: var(--surface); }
.ctab-btn.active { color: var(--text); background: var(--surface); border-color: var(--line-strong); position: relative; }
.ctab-btn.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); }
.ctab-panel { display: none; }
.ctab-panel.active { display: block; }

/* ---------- horizontal timeline ---------- */
.tlh { margin-top: 18px; overflow-x: auto; padding-bottom: 10px; }
.tlh-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 18px; min-width: min-content; position: relative; }
.tlh-track::before { content: ""; position: absolute; top: 15px; left: 15px; right: 0; height: 2px; background: var(--line-strong); }
.tlh-step { position: relative; padding-top: 40px; }
.tlh-marker { position: absolute; top: 0; left: 0; z-index: 1; }
.tlh-dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff;
  display: grid; place-items: center; font: 700 0.85rem var(--font-head); box-shadow: 0 0 0 4px var(--bg); }
.tlh-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--magenta); border-radius: var(--radius-sm); padding: 14px 16px; height: 100%; }
.tlh-when { font: 700 0.95rem var(--font-head); color: var(--magenta); margin-bottom: 6px; }
.tlh-what { color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 760px) { .tlh-track { grid-auto-columns: minmax(170px, 80vw); } }
/* Opt-in (.tlh-wrap): walk the timeline over then down (wrap into rows) instead
   of a single horizontal-scroll track. Removes the awkward sideways scroll, and
   works in any colour theme (not tied to one proposal's palette). */
.tlh-wrap { overflow-x: visible; }
.tlh-wrap .tlh-track { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; min-width: 0; row-gap: 24px; }
.tlh-wrap .tlh-track::before { display: none; }
@media (max-width: 900px) { .tlh-wrap .tlh-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tlh-wrap .tlh-track { grid-template-columns: 1fr; } }

/* ---------- one-pager: compact horizontal timeline (very brief) ---------- */
.op-tlh { overflow-x: auto; padding-bottom: 4px; margin-top: 2px; }
.op-tlh-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); gap: 14px; min-width: min-content; position: relative; }
.op-tlh-track::before { content: ""; position: absolute; top: 5px; left: 5px; right: 0; height: 2px; background: var(--line-strong); }
.op-tlh-step { position: relative; padding-top: 18px; }
.op-tlh-dot { position: absolute; top: 0; left: 0; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 3px var(--bg); }
.op-tlh-when { font: 700 0.8rem var(--font-head); color: var(--magenta); }
.op-tlh-what { color: var(--text-dim); font-size: 0.74rem; line-height: 1.35; margin-top: 2px; }
@media (max-width: 760px) { .op-tlh-track { grid-auto-columns: minmax(120px, 62vw); } }

/* ---------- one-pager: theme toggle moved here from the hero ---------- */
/* Theme control pinned minimally to the far upper-right corner (one-pager). */
.op-toolbar { position: fixed; top: 12px; right: 14px; margin: 0; z-index: 60; }

/* =====================================================================
 * LGT additions , inline diagrams, two-day agenda, principle crosswalk,
 * and the single-cohort commercials builder. All scoped to new classes so
 * existing proposals are unaffected.
 * ===================================================================== */

/* Inline SVG diagram figures (server-authored, theme-aware via brand vars) */
.diagram { margin: 22px 0; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); }
.diagram svg { display: block; width: 100%; height: auto;
  font-family: var(--font-body), system-ui, sans-serif; }
.diagram svg text { fill: var(--text); }
.diagram figcaption { margin-top: 10px; color: var(--text-mute);
  font-size: 13px; text-align: center; }

/* Two-day agenda */
.prog-days { display: grid; gap: 18px; margin: 18px 0; }
.prog-day { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; }
.prog-day-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.prog-day-label { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--text); }
.prog-day-theme { color: var(--accent); font-weight: 600; }
.prog-day-obj { color: var(--text-dim); margin: 6px 0 14px; }
.agenda { display: grid; gap: 10px; }
.ag-row { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); }
.ag-time { font-family: var(--font-head); font-weight: 700; color: var(--accent); font-size: 14px; }
.ag-title { font-weight: 700; color: var(--text); }
.ag-obj { color: var(--text-dim); margin: 3px 0 8px; font-size: 14px; }
.ag-method { font-size: 13px; color: var(--text-mute); margin-bottom: 6px; }
.ag-k { color: var(--accent); font-weight: 600; }
.ag-topics { margin: 6px 0; padding-left: 18px; color: var(--text-dim); font-size: 14px; }
.ag-topics li { margin: 2px 0; }
.ag-out { font-size: 14px; color: var(--text); margin-top: 6px; }
.ag-out strong { color: var(--accent); }
@media (max-width: 600px) { .ag-row { grid-template-columns: 1fr; } }

/* Principle crosswalk (Tailoring to LGT) */
.xwalk { display: grid; gap: 8px; margin: 12px 0 8px; }
.xwalk-row { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.xwalk-l { font-weight: 600; color: var(--text); }
.xwalk-arrow { text-align: center; color: var(--accent); font-size: 18px; }
.xwalk-r { color: var(--text-dim); }
@media (max-width: 600px) { .xwalk-row { grid-template-columns: 1fr; } .xwalk-arrow { display: none; } }
.beyond-when { float: right; margin-left: 8px; }

/* Single-cohort commercials builder */
.co-size { display: flex; align-items: center; gap: 12px; }
.co-size input[type=range] { flex: 1; }
.co-size-val { font-weight: 700; color: var(--text); white-space: nowrap; }
.co-adds { display: grid; gap: 8px; }
.co-add { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); }
.co-add .chk { grid-column: 1; grid-row: 1; }
.co-add-detail { grid-column: 1; grid-row: 2; color: var(--text-mute); font-size: 12.5px; }
.co-add-cost { grid-column: 2; grid-row: 1; color: var(--text-dim); font-size: 13px; white-space: nowrap; }
.co-units { grid-column: 2; grid-row: 2; display: inline-flex; align-items: center; gap: 6px; justify-self: end; }
.co-step { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); cursor: pointer; line-height: 1; }
.co-unit-in { width: 44px; text-align: center; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px; }

/* =====================================================================
 * LGT v2 , the LGT-website light theme (navy + gold + serif on white/grey)
 * plus the supporting components (action titles, icons, before/after table,
 * day tabs, price alignment, spacing). Scoped to new classes / the lgt theme
 * so Arxada and the other themes are unaffected.
 * ===================================================================== */

/* ---------- DWS theme (charcoal + petrol teal, white surfaces, serif display) ----------
   Self-contained: defines every colour token here (no inline client.brand), so the
   DWS / Final Upgrade toggle keeps the two brands cleanly separate. Mirrors the LGT
   light treatment. Provisional hexes, refine against the official DWS brand book. */
[data-theme="dws"] {
  --bg: #FFFFFF;
  --bg-2: #F5F7F7;
  --surface: #FFFFFF;        /* white cards, DWS register */
  --surface-2: #EDF1F1;      /* light cool grey for nested panels / diagram fills */
  --line: rgba(22,28,32,0.12);
  --line-strong: rgba(22,28,32,0.22);
  --text: #181C22;          /* near-black charcoal body, like dws.com */
  --text-dim: #515B62;
  --text-mute: #8A939A;
  --blue: #1B232A;          /* DWS structural charcoal (engine uses --blue for headings + filled bands) */
  --blue-deep: #0E1318;     /* near-black, deep bands + gradient end */
  --magenta: #0C8089;       /* DWS petrol teal (links, prices, third diagram tone) */
  --accent: #11A0A8;        /* brighter petrol teal: CTAs, markers, flow lines */
  --ink: #0E1318;
  --grad: linear-gradient(120deg, #0C8089, #115A63);   /* petrol teal */
  --grad-blue: linear-gradient(120deg, #1B232A, #0E1318);
  --grad-soft: linear-gradient(120deg, rgba(12,128,137,0.07), rgba(27,34,42,0.05));
  --shadow: 0 12px 32px rgba(22,28,32,0.12);
  --font-head: "Georgia", "Times New Roman", serif;
}
/* solid charcoal serif hero heading (DWS uses solid serif headlines, not a gradient) */
[data-theme="dws"] .hero h1 {
  background: none;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
  font-size: clamp(2rem, 4.5vw, 2.9rem);
}
[data-theme="dws"] .hero {
  background: radial-gradient(1000px 520px at 18% -10%, rgba(12,128,137,0.08), transparent 60%),
              radial-gradient(900px 520px at 90% 0%, rgba(27,34,42,0.06), transparent 60%);
}
[data-theme="dws"] .hero-glow {
  background: radial-gradient(620px 360px at 18% 8%, rgba(12,128,137,0.08), transparent 60%),
              radial-gradient(560px 360px at 88% 0%, rgba(27,34,42,0.06), transparent 60%);
}
[data-theme="dws"] .gate {
  background-image: radial-gradient(1200px 600px at 50% -10%, rgba(12,128,137,0.10), transparent 70%);
}
[data-theme="dws"] .logo-tile { background: #fff; }
[data-theme="dws"] .cl-sig-img { mix-blend-mode: multiply; filter: none; }
[data-theme="dws"] .diagram { background: #fff; }

/* DWS headings: solid charcoal serif (body stays charcoal); metric numbers keep the teal gradient */
[data-theme="dws"] .section-title,
[data-theme="dws"] h3, [data-theme="dws"] .sub-h,
[data-theme="dws"] .callout-h,
[data-theme="dws"] .card h4, [data-theme="dws"] .op-box-h,
[data-theme="dws"] .ba-head, [data-theme="dws"] .prog-day-label,
[data-theme="dws"] .day-tab-lab, [data-theme="dws"] .action-title,
[data-theme="dws"] .meth-item-h, [data-theme="dws"] .op-tile-label,
[data-theme="dws"] .ag-title { color: var(--text); }
[data-theme="dws"] .eyebrow { color: var(--accent); }

/* DWS is white-space led, like its site: open the one-pager + cards up, top-align the summary */
[data-theme="dws"] .lead, [data-theme="dws"] .op-intro { line-height: 1.7; }
[data-theme="dws"] .op-metrics { gap: 14px; margin-bottom: 10px; }
[data-theme="dws"] .op-metric { display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  border-top: 3px solid var(--accent); padding: 16px 18px; }
[data-theme="dws"] .op-metric-ic { margin-bottom: 2px; }
[data-theme="dws"] .op-summary { gap: 22px; margin-top: 18px; align-items: start; }
/* Strategy & Northstar: breathing room between the lead2 callout box and the "Steps 1 to 3" caption */
[data-theme="dws"] .callout.ghost + .muted.small { margin-top: 18px; }
/* Upgrade University: breathing room between the sample-portal button and the note below it */
[data-theme="dws"] .btn-row + .muted.small { margin-top: 18px; }
[data-theme="dws"] .op-box { padding: 24px 26px; }
[data-theme="dws"] .op-box-list { margin-top: 6px; }
[data-theme="dws"] .op-box-list li { margin: 10px 0; line-height: 1.55; }
[data-theme="dws"] .op-sub { margin-top: 26px; }
[data-theme="dws"] .card { padding: 22px 24px; }
/* Let cards size to their own content instead of stretching to the tallest in
   the row, so shorter cards (e.g. "The pieces, at a glance") do not carry a big
   empty gap at the bottom. */
[data-theme="dws"] .grid-3 { align-items: flex-start; }
[data-theme="dws"] .op-toolbar { margin-bottom: 18px; }
/* DWS: center the closing programme note under the method diagram */
[data-theme="dws"] .note-spaced { text-align: center; }

/* DWS one-pager: match the larger, readable text used on the full sections
   (mirrors the LGT bump) so the Proposal on a Page is not noticeably smaller. */
[data-theme="dws"] .op-intro { font-size: 1.05rem; }
[data-theme="dws"] .op-box-list li { font-size: 0.95rem; line-height: 1.55; }
[data-theme="dws"] .op-sub { font-size: 0.9rem; }
[data-theme="dws"] .op-path-name { font-size: 1.04rem; }
[data-theme="dws"] .op-path-sum { font-size: 0.9rem; }
[data-theme="dws"] .op-metric-l { font-size: 0.86rem; }
[data-theme="dws"] .op-tile-label { font-size: 1rem; }
[data-theme="dws"] .op-tile-note { font-size: 0.9rem; }

[data-theme="lgt"] {
  --bg: #FFFFFF;
  --bg-2: #F4F6F8;
  --surface: #EFF2F5;       /* cool light-grey card, LGT register */
  --surface-2: #E4E9EE;     /* deeper cool grey for nested panels / diagram fills */
  --line: rgba(24,42,107,0.14);
  --line-strong: rgba(24,42,107,0.26);
  --text: #353B47;          /* neutral charcoal body, like lgt.com */
  --text-dim: #5A6270;
  --text-mute: #8B92A0;
  --gold: #C8A23C;          /* LGT gold, kept minimal as an occasional highlight */
  --grad: linear-gradient(120deg, #1F4DB0, #1F7A99);   /* clear blue -> teal */
  --grad-blue: linear-gradient(120deg, #0E1A4A, #182A6B);
  --grad-soft: linear-gradient(120deg, rgba(24,42,107,0.06), rgba(31,122,153,0.07));
  --shadow: 0 12px 32px rgba(24,42,107,0.12);
  --font-head: "Lora", "Georgia", "Times New Roman", serif;
}

/* ===== Nestlé credentials theme (porcelain + deep teal) ===== */
[data-theme="nestle"] {
  --bg: #E8EBEC;            /* porcelain */
  --bg-2: #F3F5F5;
  --surface: #F3F5F5;       /* light porcelain card */
  --surface-2: #E0E5E6;     /* deeper cool grey for nested panels / diagram fills */
  --line: #CAD0D3;
  --line-strong: rgba(17,21,26,0.24);
  --text: #11151A;          /* near-black ink body */
  --text-dim: #414A53;
  --text-mute: #6A727B;
  --blue: #1B4B5A;          /* deep teal (engine uses --blue for headings + filled bands) */
  --blue-deep: #11353F;     /* darker teal, deep bands + gradient end */
  --magenta: #1B4B5A;       /* accent role folded into the deep teal */
  --accent: #1B4B5A;        /* deep teal: CTAs, markers, flow lines */
  --ink: #11151A;
  --gold: #C9871F;          /* amber, kept minimal as an occasional highlight */
  --grad: linear-gradient(120deg, #1B4B5A, #11353F);   /* deep teal */
  --grad-blue: linear-gradient(120deg, #11353F, #1B4B5A);
  --grad-soft: linear-gradient(120deg, rgba(27,75,90,0.07), rgba(17,21,26,0.05));
  --shadow: 0 12px 32px rgba(17,21,26,0.12);
  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Newsreader", "Georgia", "Times New Roman", serif;
}
/* solid teal hero heading (no gradient text), mirroring the lgt + dws pattern */
[data-theme="nestle"] .hero h1 {
  background: none;
  -webkit-text-fill-color: var(--blue);
  color: var(--blue);
}
/* soften the dark-tuned glows for the porcelain background */
[data-theme="nestle"] .hero {
  background: radial-gradient(1000px 520px at 18% -10%, rgba(201,135,31,0.08), transparent 60%),
              radial-gradient(900px 520px at 90% 0%, rgba(27,75,90,0.10), transparent 60%);
}
[data-theme="nestle"] .hero-glow {
  background: radial-gradient(620px 360px at 18% 8%, rgba(27,75,90,0.10), transparent 60%),
              radial-gradient(560px 360px at 88% 0%, rgba(201,135,31,0.08), transparent 60%);
}
[data-theme="nestle"] .gate {
  background-image: radial-gradient(1200px 600px at 50% -10%, rgba(27,75,90,0.10), transparent 70%);
}
[data-theme="nestle"] .fn-hero {
  background: radial-gradient(800px 360px at 10% -30%, rgba(201,135,31,0.07), transparent 60%);
}
[data-theme="nestle"] .logo-tile { background: #fff; }
[data-theme="nestle"] .cl-sig-img { mix-blend-mode: multiply; filter: none; }
[data-theme="nestle"] .diagram { background: #fff; }

/* Nestlé headings in the deep teal (body text stays ink) */
[data-theme="nestle"] .section-title,
[data-theme="nestle"] h3, [data-theme="nestle"] .sub-h,
[data-theme="nestle"] .callout-h,
[data-theme="nestle"] .card h4, [data-theme="nestle"] .op-box-h,
[data-theme="nestle"] .ba-head, [data-theme="nestle"] .prog-day-label,
[data-theme="nestle"] .day-tab-lab, [data-theme="nestle"] .action-title,
[data-theme="nestle"] .meth-item-h, [data-theme="nestle"] .op-tile-label,
[data-theme="nestle"] .ag-title { color: var(--blue); }

/* Label classes in Space Mono; eyebrow in amber */
[data-theme="nestle"] .eyebrow {
  font-family: "Space Mono", ui-monospace, monospace;
  color: var(--gold);
}
[data-theme="nestle"] .action-title {
  font-family: "Space Mono", ui-monospace, monospace;
}

/* solid navy serif hero heading (classic LGT, not a gradient) */
[data-theme="lgt"] .hero h1 {
  background: none;
  -webkit-text-fill-color: var(--blue);
  color: var(--blue);
}
/* soften the dark-tuned glows for a light background */
[data-theme="lgt"] .hero {
  background: radial-gradient(1000px 520px at 18% -10%, rgba(200,162,60,0.10), transparent 60%),
              radial-gradient(900px 520px at 90% 0%, rgba(24,42,107,0.10), transparent 60%);
}
[data-theme="lgt"] .hero-glow {
  background: radial-gradient(620px 360px at 18% 8%, rgba(24,42,107,0.10), transparent 60%),
              radial-gradient(560px 360px at 88% 0%, rgba(200,162,60,0.10), transparent 60%);
}
[data-theme="lgt"] .gate {
  background-image: radial-gradient(1200px 600px at 50% -10%, rgba(24,42,107,0.10), transparent 70%);
}
[data-theme="lgt"] .fn-hero {
  background: radial-gradient(800px 360px at 10% -30%, rgba(200,162,60,0.08), transparent 60%);
}
[data-theme="lgt"] .logo-tile { background: #fff; }
[data-theme="lgt"] .cl-sig-img { mix-blend-mode: multiply; filter: none; }
[data-theme="lgt"] .diagram { background: #fff; }

/* LGT headings in the clear LGT blue (body text stays charcoal) */
[data-theme="lgt"] .section-title,
[data-theme="lgt"] h3, [data-theme="lgt"] .sub-h,
[data-theme="lgt"] .callout-h, [data-theme="lgt"] .eyebrow,
[data-theme="lgt"] .card h4, [data-theme="lgt"] .op-box-h,
[data-theme="lgt"] .op-metric-n, [data-theme="lgt"] .stat-num,
[data-theme="lgt"] .ba-head, [data-theme="lgt"] .prog-day-label,
[data-theme="lgt"] .day-tab-lab, [data-theme="lgt"] .action-title,
[data-theme="lgt"] .meth-item-h, [data-theme="lgt"] .op-tile-label,
[data-theme="lgt"] .ag-title { color: var(--blue); }

/* LGT is white-space led: open the one-pager and cards up so nothing feels packed */
[data-theme="lgt"] .lead, [data-theme="lgt"] .op-intro { line-height: 1.7; }
[data-theme="lgt"] .op-metrics { gap: 14px; margin-bottom: 10px; }
[data-theme="lgt"] .op-metric { padding: 16px 18px; }
[data-theme="lgt"] .op-summary { gap: 22px; margin-top: 18px; }
[data-theme="lgt"] .op-box { padding: 24px 26px; }
[data-theme="lgt"] .op-box-list { margin-top: 6px; }
[data-theme="lgt"] .op-box-list li { margin: 10px 0; line-height: 1.55; }
[data-theme="lgt"] .op-sub { margin-top: 26px; }
[data-theme="lgt"] .grid-2x2 { gap: 18px; }
[data-theme="lgt"] .card { padding: 22px 24px; }
[data-theme="lgt"] .card p, [data-theme="lgt"] .callout p { line-height: 1.6; }
[data-theme="lgt"] .op-toolbar { margin-bottom: 18px; }

/* --- Action title (management-consulting key takeaway under the H2) --- */
.action-title {
  font-family: var(--font-head);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  margin: 2px 0 16px;
}

/* --- Inline icons (gold line icons; stroke = currentColor) --- */
.card-ic, .op-metric-ic, .meth-ic, .fact-mark { color: var(--accent); display: inline-flex; }
.card-ic svg { width: 28px; height: 28px; }
.card-ic { margin-bottom: 8px; }
.op-metric-ic svg { width: 22px; height: 22px; }
.meth-ic svg { width: 24px; height: 24px; }

/* --- One-pager metric tiles, more visual (LGT only; Arxada keeps its tiles) --- */
[data-theme="lgt"] .op-metric { display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  border-top: 3px solid var(--accent); }
[data-theme="lgt"] .op-metric-ic { margin-bottom: 2px; }

/* --- "Context we're designing against" facts grid --- */
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.fact { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text-dim); font-size: 14px; }
.fact-mark svg { width: 18px; height: 18px; margin-top: 1px; }
@media (max-width: 680px) { .facts-grid { grid-template-columns: 1fr; } }

/* --- Methodology as a compact icon + label row --- */
.meth-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }
/* DWS: keep the methodology grid even (3 + 3) rather than wrapping unevenly. */
[data-theme="dws"] .meth-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { [data-theme="dws"] .meth-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { [data-theme="dws"] .meth-row { grid-template-columns: 1fr; } }
.meth-item { display: flex; flex-direction: column; gap: 6px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.meth-item-h { font-weight: 700; color: var(--text); font-size: 14px; }
.meth-item-p { color: var(--text-dim); font-size: 12.5px; line-height: 1.45; }

/* --- Why-Now source: more space, smaller + italic --- */
/* why-now source line (LGT stat-card layout; Arxada keeps its muted-small note) */
.why-now .why-now-src { margin-top: 14px; font-style: italic; font-size: 12px; color: var(--text-mute); }

/* --- Programme: Day 1 / Day 2 tabs --- */
.day-tabs { display: flex; gap: 8px; margin: 14px 0 12px; }
.day-tab { flex: 1; text-align: left; padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); cursor: pointer; }
.day-tab .day-tab-lab { display: block; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--text); }
.day-tab .day-tab-theme { display: block; font-size: 12.5px; color: var(--text-mute); }
.day-tab.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.day-tab.active .day-tab-theme { color: var(--accent); }
.day-panel { display: none; }
.day-panel.active { display: block; }
.prog-day-label { font-size: 16px; }
.prog-day-obj { margin-bottom: 12px; }

/* --- Beyond: before / after table --- */
.ba-table { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.ba-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.ba-head { font-family: var(--font-head); font-weight: 700; color: var(--blue); margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ba-item { margin-bottom: 10px; }
.ba-item-h { font-weight: 700; color: var(--text); font-size: 14px; }
.ba-item-p { color: var(--text-dim); font-size: 13px; line-height: 1.45; }
@media (max-width: 640px) { .ba-table { grid-template-columns: 1fr; } }

/* --- Commercials: align bundle prices regardless of name length (LGT only) --- */
[data-theme="lgt"] .path-card h4 { min-height: 2.6em; display: flex; align-items: flex-end; }

/* --- Spacing utility for notes that otherwise hug their boxes --- */
.note-spaced { margin-top: 16px; }

/* --- Why this, why now: three stat cards, source line underneath --- */
.whynow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 2px; }
.whynow-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 16px 18px; }
.whynow-stat { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; line-height: 1.05;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.whynow-tx { margin: 8px 0 0; color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; }
@media (max-width: 680px) { .whynow-grid { grid-template-columns: 1fr; } }

/* --- Co-brand lockup at the foot of the Team page (typographic wordmarks) --- */
.cobrand { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cobrand-row { display: flex; align-items: center; gap: 22px; }
.cobrand-fua { font-family: var(--font-head); font-weight: 700; font-size: 1.18rem; letter-spacing: 0.01em; color: var(--text); }
.cobrand-fua-ai { color: var(--accent); margin-left: 5px; }
.cobrand-x { color: var(--text-mute); font-size: 1.05rem; }
.cobrand-client { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.16em; color: var(--blue); }
.cobrand-cap { color: var(--text-mute); font-size: 0.8rem; }

/* Team note: give the scoping line room rather than hugging the bios above. */
.team-note { margin-top: 20px; }

/* --- One-pager type sizes, brought up to match the rest of the proposal --- */
[data-theme="lgt"] .op-intro { font-size: 1.05rem; }
[data-theme="lgt"] .op-box-h { font-size: 1.06rem; }
[data-theme="lgt"] .op-box-list li { font-size: 0.95rem; line-height: 1.55; }
[data-theme="lgt"] .op-sub { font-size: 0.9rem; }
[data-theme="lgt"] .op-sub-note { font-size: 0.88rem; }
[data-theme="lgt"] .op-fn { font-size: 0.92rem; }
[data-theme="lgt"] .op-path-name { font-size: 1.04rem; }
[data-theme="lgt"] .op-path-sum { font-size: 0.9rem; }
[data-theme="lgt"] .op-path-price { font-size: 1.12rem; }
[data-theme="lgt"] .op-metric-l { font-size: 0.86rem; }
[data-theme="lgt"] .op-tile-label { font-size: 1rem; }
[data-theme="lgt"] .op-tile-note { font-size: 0.9rem; }

/* ===================================================================
 * Standalone "Proposal on a Page" (#/onepage): a single-A4 summary in
 * the LGT palette, reached from the one-pager toolbar (.op-pdf link) and
 * gated to LGT only via C.onePager. The .onepage body class drives the
 * on-screen view; the @media print block (scoped to .onepage / .op1-page,
 * with no global @page) holds it to one page and leaves every other
 * proposal's print output untouched. New classes only.
 * =================================================================== */
.op-pdf { display: inline-flex; align-items: center; margin-left: 12px; padding: 6px 12px;
  border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text-dim);
  font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.op-pdf:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }

/* Programme "How we run the room": pin LGT to an even 4-up grid (8 cards = 4+4),
   stepping down to 2 then 1. Only LGT's programmeLGT() emits .meth-row. */
[data-theme="lgt"] .meth-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { [data-theme="lgt"] .meth-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { [data-theme="lgt"] .meth-row { grid-template-columns: 1fr; } }

/* Action bar above the one-pager; the doc sits on a soft grey preview backdrop. */
.onepage-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 20px;
  background: var(--surface); border-bottom: 1px solid var(--line); }
.onepage-bar-t { color: var(--text-dim); font-size: 0.84rem; }
.onepage-bar-a { display: flex; gap: 10px; }
.onepage-doc { background: #e9edf3; padding: 18px; }
.onepage .toc, .onepage .nav-open-btn, .onepage .foot,
.onepage .cmt-fab, .onepage .cmt-panel, .onepage .cmt-bar { display: none !important; }
.onepage #app { margin: 0 !important; max-width: none !important; }

/* ---- The page itself (A4), scoped to LGT tokens. justify-content: space-between
   spreads any leftover height evenly across the section seams (no void above the
   footer). The rhythm is kept tight so the content fits one sheet; in print a
   SCOPED named @page (below) pins it to a zero-margin A4 and space-between fills
   it to exactly one full page. ---- */
[data-theme="lgt"] .op1-page { width: 210mm; min-height: 297mm; margin: 0 auto; background: #fff;
  padding: 11mm 12mm 9mm; box-shadow: var(--shadow); position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: 9px;
  font-family: var(--font-body); font-size: 10.6px; line-height: 1.4; color: var(--text); }
.op1-page::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 62%, var(--gold) 62%, var(--gold) 100%); }

.op1-top { display: flex; justify-content: space-between; align-items: baseline; }
.op1-wordmark { font-family: var(--font-head); font-weight: 600; font-size: 13px; color: var(--blue-deep); }
.op1-ai { color: var(--accent); margin-left: 2px; }
.op1-x { color: var(--text-mute); font-weight: 400; padding: 0 5px; }
.op1-lgt { letter-spacing: 2px; color: var(--blue-deep); }
.op1-prepared { font-size: 8.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-mute); }

.op1-eyebrow { font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.op1-h1 { font-family: var(--font-head); font-weight: 700; color: var(--blue); font-size: 33px; line-height: 1.04; margin: 3px 0 5px; }
.op1-sub { font-size: 11.5px; color: var(--text); max-width: 140mm; line-height: 1.48; }
.op1-chips { display: flex; gap: 7px; margin-top: 7px; flex-wrap: wrap; }
.op1-chip { font-size: 9px; color: var(--blue-deep); background: var(--surface);
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 11px; }

.op1-goldrule { height: 2px; width: 32px; background: var(--gold); border-radius: 2px; }

.op1-lead { display: flex; gap: 9px; align-items: flex-start; }
.op1-lead-bar { width: 3px; align-self: stretch; background: var(--gold); border-radius: 2px; flex: none; }
.op1-lead-h { font-family: var(--font-head); font-weight: 600; color: var(--blue-deep); font-size: 14px; line-height: 1.2; }
.op1-lead p { color: var(--text); font-size: 10.2px; line-height: 1.46; margin-top: 3px; }

.op1-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.op1-sec { font-size: 9.2px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 5px; }

.op1-day h4 { font-family: var(--font-head); color: #fff; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 7px 7px 0 0; margin: 0; }
.op1-d1 h4 { background: var(--blue); }
.op1-d2 h4 { background: var(--blue-deep); }
.op1-day-b { border: 1px solid var(--line); border-top: none; border-radius: 0 0 7px 7px; padding: 6px 10px; }
.op1-step { padding: 4px 0; border-bottom: 1px solid var(--line); }
.op1-step:last-child { border-bottom: none; }
.op1-step b { font-family: var(--font-head); color: var(--blue-deep); font-weight: 600; font-size: 10.6px; }
.op1-step span { color: var(--text-dim); font-size: 9.6px; display: block; }

.op1-why p { font-size: 10.2px; line-height: 1.46; color: var(--text); }
.op1-pt { color: var(--blue); font-weight: 700; }
.op1-stats { display: flex; gap: 8px; margin-bottom: 7px; }
.op1-stat { flex: 1; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 7px; padding: 7px 10px; }
.op1-stat-n { font-family: var(--font-head); color: var(--blue); font-weight: 700; font-size: 16px; line-height: 1; }
.op1-stat-who { font-weight: 700; color: var(--blue-deep); font-size: 9.4px; margin-top: 2px; }
.op1-stat-ctx { color: var(--text-dim); font-size: 8.4px; }
.op1-quote { font-family: var(--font-head); color: var(--text); font-size: 10.4px; line-height: 1.42;
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 8px 11px; }
.op1-by { font-family: var(--font-body); display: block; color: var(--text-dim); font-size: 8.6px; margin-top: 3px; }
.op1-by b { color: var(--blue-deep); font-weight: 600; }

.op1-bundles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.op1-bundle { border: 1px solid var(--line); border-radius: 7px; padding: 8px 11px; }
.op1-bundle.rec { border-color: var(--accent); border-width: 1.4px; }
.op1-bundle-tag { font-size: 7.4px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-mute); }
.op1-bundle.rec .op1-bundle-tag { color: var(--accent); font-weight: 700; }
.op1-bundle-nm { font-family: var(--font-head); font-weight: 600; color: var(--blue-deep); font-size: 11.5px; margin: 2px 0; }
.op1-bundle-pr { font-family: var(--font-head); color: var(--blue); font-weight: 700; font-size: 13px; }
.op1-note { font-size: 9px; color: var(--text-dim); margin-top: 5px; line-height: 1.44; }

.op1-flow { display: flex; align-items: stretch; gap: 0; }
.op1-node { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 7px; text-align: center; }
.op1-node b { font-family: var(--font-head); color: var(--blue-deep); font-size: 10px; font-weight: 600; display: block; }
.op1-node span { color: var(--text-dim); font-size: 8.2px; }
.op1-arr { display: flex; align-items: center; color: var(--gold); font-size: 12px; padding: 0 5px; font-weight: 700; }

.op1-next { margin: 0; padding: 0; }
.op1-next li { font-size: 10px; line-height: 1.48; color: var(--text); list-style: none; padding-left: 15px; position: relative; margin-bottom: 3px; }
.op1-next li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.op1-contact { font-size: 9.2px; color: var(--text-dim); margin-top: 5px; }
.op1-contact b { color: var(--blue-deep); font-weight: 600; }

.op1-foot { padding-top: 7px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; font-size: 8.2px; letter-spacing: 0.4px;
  color: var(--text-mute); text-transform: uppercase; }

@media print {
  /* A NAMED @page scopes the zero-margin A4 sizing to the one-pager only (via
     `page: onepage`), so no other proposal's print output is touched. The page keeps
     its 210x297mm box, so margin:0 maps it to exactly one sheet and the column's
     space-between fills it; overflow:hidden guards against any sliver spilling to a
     second page. */
  @page onepage { size: A4; margin: 0; }
  body.onepage { background: #fff !important; }
  .onepage * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .onepage-bar { display: none !important; }
  .onepage-doc { padding: 0 !important; background: #fff !important; }
  /* Pin a hair under A4 (295mm, not 297) so sub-pixel rounding can never tip a
     blank sliver onto a second page; the ~2mm at the foot is invisible. */
  [data-theme="lgt"] .op1-page { page: onepage; width: 210mm; height: 295mm; min-height: 0; margin: 0;
    box-shadow: none; overflow: hidden; }
  .op1-page * { break-inside: avoid; }
}

/* ===================================================================
 * LGT revision: per-figure sourcing, testimonials, commercials table,
 * outcomes matrix, cover photo. New classes only (LGT content), so
 * other proposals are unaffected.
 * =================================================================== */

/* Why-Now per-figure source caption */
.whynow-src { margin-top: 8px; font-size: 11px; font-style: italic; color: var(--text-mute); }

/* Named testimonials */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 18px; }
.testimonials-grid.one { grid-template-columns: 1fr; max-width: 760px; }
.testimonial-card { margin: 16px 0; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 18px 20px; }
.testimonial-card blockquote { margin: 0 0 12px; font-family: var(--font-head); font-size: 1.02rem; line-height: 1.5; color: var(--text); }
.testimonial-card blockquote::before { content: "\201C"; color: var(--accent); }
.testimonial-card blockquote::after { content: "\201D"; color: var(--accent); }
.testimonial-card figcaption { display: flex; flex-direction: column; gap: 1px; }
.tm-name { font-weight: 700; color: var(--text); font-size: 0.9rem; }
.tm-role { color: var(--text-mute); font-size: 0.78rem; }
@media (max-width: 820px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* Commercials static breakdown table */
.breakdown-table { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin: 8px 0 6px; }
.bd-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); align-items: baseline; }
.bd-row:first-child { border-top: none; }
.bd-head { background: var(--surface-2); font: 700 0.72rem var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; }
.bd-head .bd-item, .bd-head .bd-amt { color: var(--blue); }
.bd-item { color: var(--text-dim); font-size: 0.9rem; }
.bd-amt { font-family: var(--font-head); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.bd-sub { background: var(--surface); }
.bd-sub .bd-item, .bd-sub .bd-amt { font-weight: 800; color: var(--text); }
.bd-group { grid-column: 1 / -1; padding: 10px 16px 4px; border-top: 1px solid var(--line); background: var(--surface);
  font: 700 0.72rem var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
.bd-opt .bd-item { color: var(--text-mute); }
.bd-opt .bd-amt { font-weight: 600; color: var(--text-dim); }

/* Assumptions / exclusions, side by side */
.assume-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
@media (max-width: 760px) { .assume-grid { grid-template-columns: 1fr; } }

/* Learning-objectives matrix */
.learning-matrix { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin: 10px 0; }
.lm-row { display: grid; grid-template-columns: minmax(190px, 2.4fr) repeat(var(--lm-cols, 4), 1fr); border-top: 1px solid var(--line); }
.lm-row:first-child { border-top: none; }
.lm-head { background: var(--surface-2); }
.lm-head .lm-out, .lm-col { font: 700 0.7rem var(--font-head); letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); }
.lm-out { padding: 10px 14px; color: var(--text-dim); font-size: 0.86rem; line-height: 1.4; display: flex; gap: 8px; align-items: baseline; }
.lm-n { flex: none; width: 20px; height: 20px; border-radius: 5px; background: var(--surface-2); color: var(--blue); font: 700 0.7rem var(--font-head); display: inline-grid; place-items: center; }
.lm-col { padding: 10px 8px; text-align: center; border-left: 1px solid var(--line); }
.lm-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px; border-left: 1px solid var(--line); text-align: center; }
.lm-cell.on { background: var(--grad-soft); }
.lm-mark { color: var(--accent); font-size: 0.7rem; }
.lm-where { font-size: 0.66rem; color: var(--text-mute); line-height: 1.2; }
@media (max-width: 760px) { .lm-out { font-size: 0.78rem; } .lm-where { display: none; } }

/* Cover modal photo when the headline leads: a fixed 2:1 landscape banner with the
   image locked to fill it (absolute inset). It can never render tall/narrow and the
   frame background can never bleed, on any viewport. Overrides the base .cl-photo
   min-height + flex centring. */
.cl-photo-lead { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1;
  min-height: 0; max-height: none; margin: 16px 0 6px; border-radius: var(--radius-sm);
  overflow: hidden; background: none; }
.cl-photo-lead img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block; }

/* =====================================================================
 * BLACKROCK APAC , two brand registers toggled in the one-pager toolbar,
 * plus the block-based exhibits (KPI tiles, SVG opportunity map, judgment
 * band, track cards, ROI chain, proof tiles, pathway selection cards).
 * Scoped to the two themes and to .bk-* classes, so Arxada and LGT are
 * unaffected. INTERIM palettes pending the BlackRock brand snippets.
 *
 * "BlackRock"    , their own register: clean black and white on white.
 * "Final Upgrade", our register: clean, on a near-black background.
 * ===================================================================== */
[data-theme="blackrock"] {
  --blue: #1A1A1A;
  --blue-deep: #000000;
  --magenta: #111111;        /* monochrome accent, no colour */
  --accent: #000000;
  --ink: #000000;
  --bg: #FFFFFF;
  --bg-2: #F6F6F6;
  --surface: #FFFFFF;
  --surface-2: #F1F1F1;
  --line: rgba(0,0,0,0.12);
  --line-strong: rgba(0,0,0,0.26);
  --text: #0A0A0A;
  --text-dim: #3D3D3D;
  --text-mute: #767676;
  --grad: linear-gradient(120deg, #2B2B2B, #000000);
  --grad-blue: linear-gradient(120deg, #3A3A3A, #111111);
  --grad-soft: linear-gradient(120deg, rgba(0,0,0,0.05), rgba(0,0,0,0.03));
  --shadow: 0 14px 36px rgba(0,0,0,0.12);
  --font-head: "Poppins", "Space Grotesk", system-ui, sans-serif;
}
/* BlackRock is a monochrome theme: its accent (--magenta) is near-black, so the
   default faint-tile + dark-glyph icon chips read as black-on-black if a surface
   ever darkens. Make the icon chips solid dark with a white glyph instead, so
   they stay crisp and legible on any surface (and on-brand for the mono look). */
[data-theme="blackrock"] .bk-sq-ico,
[data-theme="blackrock"] .bk-track-ico,
[data-theme="blackrock"] .bk-uc-ico,
[data-theme="blackrock"] .vk-stat-ico {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
[data-theme="finalupgrade"] {
  --blue: #6B2AE8;
  --blue-deep: #4A1FB0;
  --magenta: #E60080;
  --accent: #8A2BE2;
  --ink: #15103A;
  --bg: #FFFFFF;
  --bg-2: #F7F5FC;
  --surface: #FFFFFF;
  --surface-2: #F3EEFB;
  --line: rgba(107,42,232,0.16);
  --line-strong: rgba(107,42,232,0.30);
  --text: #1A1230;
  --text-dim: #574E70;
  --text-mute: #8C84A6;
  --grad: linear-gradient(120deg, #6B2AE8, #E60080);
  --grad-blue: linear-gradient(120deg, #4A1FB0, #6B2AE8);
  --grad-soft: linear-gradient(120deg, rgba(107,42,232,0.08), rgba(230,0,128,0.05));
  --shadow: 0 16px 40px rgba(107,42,232,0.14);
  --font-head: "Poppins", "Space Grotesk", system-ui, sans-serif;
}

/* SVG opportunity map (the wedge), centred and given room */
.bk-mx-wrap { margin: 22px 0; text-align: center; }
.bk-mx-svg { width: 100%; max-width: 640px; height: auto; display: inline-block; }
.bk-mx-frame { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.bk-mx-hotzone { fill: var(--accent); opacity: 0.12; }
.bk-mx-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
.bk-mx-t-tag { fill: var(--magenta); font: 700 9px var(--font-head); text-transform: uppercase; letter-spacing: 0.08em; }
.bk-mx-t-label { fill: var(--text-dim); font: 600 10px var(--font-body); }
.bk-mx-t-label.hot { fill: var(--text); }
.bk-mx-axname { fill: var(--text-mute); font: 600 10px var(--font-body); }
.bk-mx-axend { fill: var(--text-mute); font: 400 9px var(--font-body); }

/* single prominent CTA box (next steps) */
.bk-cta-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0; padding: 24px 30px; border-radius: var(--radius); background: var(--grad); color: #fff; box-shadow: var(--shadow); transition: transform 0.15s; }
.bk-cta-box:hover { text-decoration: none; transform: translateY(-2px); }
.bk-cta-box-label { font: 700 1.5rem var(--font-head); }
.bk-cta-box-arrow { font-size: 1.8rem; line-height: 1; }

/* shared bits */
.bk-toolbar { position: fixed; top: 12px; right: 14px; margin: 0; z-index: 60; }
.bk-kicker { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 700; color: var(--magenta); margin-bottom: 6px; }
.bk-source { font-size: 0.78rem; color: var(--text-mute); margin-top: 12px; }
.bk-sub { font: 600 0.98rem var(--font-head); margin: 24px 0 10px; }
.bk-sub-note { font-weight: 400; color: var(--text-mute); font-size: 0.82rem; }
.bk-block { margin: 28px 0; }
.bk-cta-row { margin: 8px 0 18px; }

/* KPI tiles + two columns + mini pathway cards + timeline (one-pager) */
.bk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.bk-kpi { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--magenta); border-radius: var(--radius-sm); padding: 14px 16px; }
.bk-kpi-n { font: 700 1.5rem var(--font-head); color: var(--text); }
.bk-kpi-l { font-size: 0.8rem; color: var(--text-dim); }
.bk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.bk-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.bk-col-h { font: 600 1rem var(--font-head); margin-bottom: 8px; }
.bk-minipaths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bk-minipath { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; color: inherit; transition: border-color 0.15s; }
.bk-minipath:hover { border-color: var(--magenta); text-decoration: none; }
.bk-minipath.rec { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta) inset; }
.bk-minipath-tag { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--magenta); font-weight: 700; }
.bk-minipath-name { font-weight: 600; }
.bk-minipath-price { font: 700 1.05rem var(--font-head); color: var(--text); }
.bk-minipath-why { font-size: 0.78rem; color: var(--text-mute); }
.bk-tl { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.bk-tl-step { flex: 1 1 0; min-width: 130px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; }
.bk-tl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--grad); margin-bottom: 6px; }
.bk-tl-when { font-weight: 600; }
.bk-tl-what { font-size: 0.82rem; color: var(--text-dim); }

/* 2x2 opportunity matrix */
.bk-mx { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: 1fr 28px; gap: 8px; max-width: 560px; margin: 16px 0; }
.bk-mx-yaxis { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; font-size: 0.66rem; color: var(--text-mute); }
.bk-mx-yaxis .bk-mx-ax-name { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.04em; }
.bk-mx-plot { grid-row: 1; grid-column: 2; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); aspect-ratio: 3 / 2; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background:
  linear-gradient(var(--line) 1px, transparent 1px) 0 33.33% / 100% 33.33%,
  linear-gradient(90deg, var(--line) 1px, transparent 1px) 33.33% 0 / 33.33% 100%, var(--surface); overflow: hidden; }
.bk-mx-xaxis { grid-row: 2; grid-column: 2; display: flex; justify-content: space-between; align-items: center; font-size: 0.66rem; color: var(--text-mute); }
.bk-mx-xaxis .bk-mx-ax-name { letter-spacing: 0.04em; }
.bk-mx-cell { margin: 8px; border-radius: var(--radius-sm); border: 1px dashed var(--line-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; padding: 6px; color: var(--text-dim); font-size: 0.82rem; }
.bk-mx-tr { grid-area: 1 / 3 / 2 / 4; }
.bk-mx-c { grid-area: 2 / 2 / 3 / 3; }
.bk-mx-bl { grid-area: 3 / 1 / 4 / 2; }
.bk-mx-cell.is-hot { border-style: solid; border-color: transparent; background: var(--grad); color: #fff; box-shadow: var(--shadow); }
.bk-mx-tag { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.9; }
.bk-mx-label { font-weight: 600; }

/* judgment band + rollout / roi / next-steps chains */
.bk-band, .bk-rollout, .bk-roi, .bk-flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.bk-band-step, .bk-roll-node, .bk-roi-node, .bk-flow-node { flex: 1 1 0; min-width: 120px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.bk-band-n, .bk-roll-n, .bk-roi-n, .bk-flow-n { width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; }
.bk-band-label, .bk-roll-label, .bk-roi-label, .bk-flow-label { font-weight: 600; }
.bk-band-who, .bk-roll-note, .bk-roi-note, .bk-flow-note { font-size: 0.78rem; color: var(--text-mute); }
.bk-band-arrow, .bk-roll-arrow, .bk-roi-arrow, .bk-flow-arrow { align-self: center; color: var(--text-mute); font-size: 1.1rem; }

/* the two track cards */
.bk-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.bk-track { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.bk-track-for { font-size: 0.8rem; color: var(--text-mute); margin-bottom: 8px; }
.bk-track-kpis { display: flex; gap: 10px; margin-top: 12px; }
.bk-track-kpi { flex: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; text-align: center; }
.bk-track-kpi-n { font: 700 1.05rem var(--font-head); color: var(--text); }
.bk-track-kpi-l { font-size: 0.72rem; color: var(--text-mute); }
.bk-track-uses { margin-top: 14px; }
.bk-track-uses-h { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute); }

/* delivery option cards */
.bk-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.bk-opt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; }
.bk-opt-h { font-weight: 600; margin-bottom: 6px; }

/* proof tiles (case) */
.bk-proofs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.bk-proof { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 16px; }
.bk-proof-stat { font: 700 1.6rem var(--font-head); color: var(--text); }
.bk-proof-client { font-weight: 600; }
.bk-proof-note { font-size: 0.8rem; color: var(--text-mute); }

/* pathway selection cards (commercials) */
.bk-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0; }
.bk-path { text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 6px; color: inherit; font: inherit; transition: border-color 0.15s, transform 0.15s; }
.bk-path:hover { border-color: var(--magenta); transform: translateY(-2px); }
.bk-path.rec { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta) inset; }
.bk-path-tag { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--magenta); font-weight: 700; }
.bk-path-name { font: 600 1.1rem var(--font-head); }
.bk-path-tier { font-size: 0.78rem; color: var(--text-mute); }
.bk-path-price { font: 700 1.2rem var(--font-head); color: var(--text); }
.bk-path-delivery { font-size: 0.74rem; color: var(--text-mute); }
.bk-path-why { font-size: 0.84rem; color: var(--text-dim); }
.bk-path-incl { margin: 6px 0 0; padding-left: 1.1em; font-size: 0.82rem; color: var(--text-dim); }
.bk-path-choose { margin-top: auto; font-size: 0.8rem; color: var(--magenta); font-weight: 600; }

/* close block */
.bk-close { margin-top: 28px; padding: 24px; border-radius: var(--radius); background: var(--grad-soft); border: 1px solid var(--line-strong); text-align: center; }
.bk-close-name { font: 700 1.2rem var(--font-head); color: var(--text); }
.bk-close-line { color: var(--text-dim); }

@media (max-width: 760px) {
  .bk-kpis, .bk-cols, .bk-minipaths, .bk-tracks, .bk-opts, .bk-proofs, .bk-paths { grid-template-columns: 1fr; }
}

/* ---- BlackRock revision pass 2: slide-like exhibits + type consistency ---- */

/* Strengthen the action title on the BlackRock pages so each section reads as a
   slide takeaway (scoped to the two BlackRock themes; Arxada/LGT untouched). */
[data-theme="blackrock"] .action-title,
[data-theme="finalupgrade"] .action-title { font-size: clamp(20px, 2.6vw, 26px); margin: 4px 0 14px; }

/* Type scale, standardised so boxes do not look like different font tests. */
.bk-kpi-n, .bk-proof-stat, .bk-case-stat { font: 700 1.5rem var(--font-head); color: var(--text); }
.bk-kpi-l, .bk-proof-note, .bk-track-kpi-l, .bk-bucket-text,
.bk-case-sector, .bk-roll-note, .bk-roi-note, .bk-flow-note { font-size: 0.82rem; }
.bk-col-h, .bk-opt-h, .bk-bucket-label, .bk-track-for, .bk-case-client { font: 600 1rem var(--font-head); }
.bk-cap { font-size: 0.82rem; color: var(--text-mute); text-align: center; margin: 8px 0 0; }
.bk-center { text-align: center; }

/* Introduction buckets (the slide) */
.bk-buckets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 20px 0; }
.bk-bucket { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--magenta); border-radius: var(--radius-sm); padding: 16px 18px; }
.bk-bucket-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); color: #fff; font: 700 0.78rem var(--font-head); margin-bottom: 8px; }
.bk-bucket-label { margin-bottom: 6px; }
.bk-bucket-text { color: var(--text-dim); margin: 0; }
@media (max-width: 900px) { .bk-buckets { grid-template-columns: repeat(2, 1fr); } }

/* Judgment swimlane SVG */
.bk-sw-wrap { margin: 18px 0; text-align: center; }
.bk-sw-svg { width: 100%; max-width: 720px; height: auto; display: inline-block; }
.bk-sw-lane { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.bk-sw-lane.ai { fill: var(--surface-2); }
.bk-sw-lane-label { fill: var(--text-mute); font: 600 11px var(--font-body); }
.bk-sw-path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 5 5; }
.bk-sw-node { stroke-width: 0; }
.bk-sw-node.human { fill: var(--text); }
.bk-sw-node.ai { fill: var(--magenta); }
.bk-sw-n { fill: var(--bg); font: 700 12px var(--font-head); }
.bk-sw-step { fill: var(--text-dim); font: 600 12px var(--font-body); }

/* Track icon header */
.bk-track-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line); color: var(--magenta); margin-bottom: 12px; }
.bk-ico { width: 22px; height: 22px; }

/* Case-study cards (the page), linking to the appendix */
.bk-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 8px; }
.bk-case { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.bk-case:hover { border-color: var(--magenta); transform: translateY(-2px); text-decoration: none; }
.bk-case-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bk-case-stat, .bk-proof-stat { white-space: nowrap; }
.bk-case-row { display: flex; flex-direction: column; gap: 2px; }
.bk-case-row p { margin: 0; color: var(--text-dim); font-size: 0.86rem; }
.bk-case-k { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-mute); }
.bk-case-link { margin-top: auto; font-size: 0.8rem; font-weight: 600; color: var(--magenta); }
@media (max-width: 760px) { .bk-cases { grid-template-columns: 1fr; } }

/* Measurement block, centred */
.bk-measure { margin: 26px 0 6px; }
.bk-roi-center { justify-content: center; }
.bk-measure-note, .bk-sanity { text-align: center; max-width: 640px; margin: 12px auto 0; }
.bk-measure-note { color: var(--text-dim); }
.bk-sanity { color: var(--text-mute); font-size: 0.86rem; }

/* Introduction: the "below the surface" problem diagram (problem first, then
   what we solve for), followed by the introducing / looking-at cards. */
.bk-intro { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: center; margin: 20px 0; }
.bk-stack { display: flex; flex-direction: column; }
.bk-layer { border: 1px solid var(--line); padding: 16px 18px; }
.bk-layer.done { background: var(--surface); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.bk-layer.gap { background: var(--grad-soft); border-top: 0; border-left: 3px solid var(--magenta); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.bk-layer-tag { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); }
.bk-layer-h { font: 600 1.05rem var(--font-head); margin: 2px 0 4px; }
.bk-layer p { margin: 0; color: var(--text-dim); font-size: 0.86rem; }
.bk-surface { position: relative; text-align: center; height: 0; }
.bk-surface::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; border-top: 1px dashed var(--line-strong); }
.bk-surface span { position: relative; z-index: 1; display: inline-block; background: var(--bg); padding: 0 10px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); }
.bk-solve { display: flex; align-items: center; gap: 12px; }
.bk-solve-arrow { font-size: 1.6rem; color: var(--text-mute); flex: none; }
.bk-solve-box { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 16px 18px; }
.bk-solve-h { font: 600 1rem var(--font-head); margin-bottom: 6px; }
.bk-solve-box p { margin: 0; color: var(--text-dim); font-size: 0.88rem; }
.bk-buckets-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) {
  .bk-intro { grid-template-columns: 1fr; }
  .bk-solve { flex-direction: column; align-items: stretch; }
  .bk-solve-arrow { transform: rotate(90deg); align-self: center; }
  .bk-buckets-2 { grid-template-columns: 1fr; }
}

/* ---- BlackRock revision pass 3: icons, numbering, layout tweaks ---- */

/* timeline: icon instead of a bare dot */
.bk-tl-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--grad-soft); border: 1px solid var(--line); color: var(--magenta); margin-bottom: 8px; }
.bk-tl-ico .vk-ico, .bk-tl-ico .bk-ico { width: 18px; height: 18px; }

/* rollout: map-pin / globe icons instead of numbers */
.bk-roll-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad-soft); border: 1px solid var(--line); color: var(--magenta); }
.bk-roll-ico .vk-ico { width: 20px; height: 20px; }

/* introduction layers: icon chip beside the text */
.bk-layer { display: flex; gap: 14px; align-items: flex-start; }
.bk-layer-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--magenta); }
.bk-layer.gap .bk-layer-ico { background: var(--bg-2); }
.bk-layer-ico .vk-ico { width: 20px; height: 20px; }
.bk-layer-tx { flex: 1; }
.bk-bucket-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--grad-soft); border: 1px solid var(--line); color: var(--magenta); margin-bottom: 8px; }
.bk-bucket-ico .vk-ico { width: 19px; height: 19px; }
.bk-solve-box { position: relative; }
.bk-solve-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--grad-soft); border: 1px solid var(--line); color: var(--magenta); margin-bottom: 8px; }
.bk-solve-ico .vk-ico { width: 19px; height: 19px; }

/* kit hub-rows: number badge */
.vk-hr-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font: 700 0.85rem var(--font-head); margin-right: 4px; }

/* commercials pathway cards: leading number */
.bk-path-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); color: #fff; font: 700 0.72rem var(--font-head); margin-right: 8px; vertical-align: middle; }

/* Introduction: a clean three-step narrative strip (situation, gap, solve) */
.bk-narr { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: stretch; margin: 22px 0; }
.bk-np { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; }
.bk-np.gap { border-top: 3px solid var(--magenta); }
.bk-np.solve { border-top: 3px solid var(--accent); }
.bk-np-ico { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line); color: var(--magenta); margin-bottom: 12px; }
.bk-np-ico .vk-ico { width: 22px; height: 22px; }
.bk-np-label { font: 600 1rem var(--font-head); margin-bottom: 6px; }
.bk-np p { margin: 0; font-size: 0.86rem; color: var(--text-dim); }
.bk-np-arr { align-self: center; color: var(--text-mute); font-size: 1.3rem; }
@media (max-width: 820px) {
  .bk-narr { grid-template-columns: 1fr; }
  .bk-np-arr { transform: rotate(90deg); justify-self: center; }
}

/* =====================================================================
 * UBS DECK , 16:9 slide-deck presentation (proposals with layout === "deck").
 * Self-contained and namespaced (.deck-* / .slide / .d-*), so it never touches
 * the scrolling proposals. All colour is driven by CSS variables, so the same
 * markup reskins between the two colour views below. Ported from the UBS
 * action-title skeleton deck.
 * ===================================================================== */

/* ---- Two colour views: UBS red on light (default) + Final Upgrade magenta on
   dark. Only these blocks differ; the deck markup is identical for both. ---- */
[data-theme="ubs"] {
  /* UBS house style: white, near-black text, a single restrained UBS red
     accent, neutral greys + black for everything secondary (no purple/pink),
     clean corporate sans, generous whitespace. */
  --bg: #FFFFFF; --bg-2: #F4F4F5;
  --surface: #FFFFFF; --surface-2: #F4F4F5;
  --line: rgba(0,0,0,0.12); --line-strong: rgba(0,0,0,0.20);
  --text: #1A1A1A; --text-dim: #5C5C5C; --text-mute: #8C8C8C;
  --blue: #EC0016; --blue-deep: #B0000F; --accent: #EC0016; --magenta: #EC0016;
  --grad: linear-gradient(120deg, #EC0016, #B0000F);
  --grad-soft: linear-gradient(120deg, rgba(236,0,22,0.06), rgba(236,0,22,0.03));
  --shadow: 0 22px 55px rgba(0,0,0,0.16);
  --font-head: "Helvetica Neue", "Inter", Arial, system-ui, sans-serif;
  --font-body: "Helvetica Neue", "Inter", Arial, system-ui, sans-serif;
  --d-soft: #FCEAEB; --d-soft-ink: #B0000F;
  --d-soft-2: #F1F1F2; --d-soft-2-ink: #4A4A4A;
  /* Where the deck goes dark for contrast, UBS uses black (as in its charts),
     with red carrying the key figures. */
  --d-panel: linear-gradient(150deg, #1C1C1E, #0E0E0F);
  --d-panel-accent: #FF3340; --d-panel-text: #F5F5F5; --d-panel-dim: #C8C8CC;
}
/* The original UBS deck (/ubs) framed its 16:9 slides against a dark letterbox;
   keep that for the deck only, now that the scrolling UBS theme bg is white. */
[data-theme="ubs"] #app.deck-root { background: #0E0E0E; }
/* UBS signatures sit on a white cover card, so multiply (blue ink on white)
   rather than the dark-theme invert that would render them white-on-white. */
[data-theme="ubs"] .cl-sig-img { mix-blend-mode: multiply; filter: none; }
[data-theme="fu"] {
  --bg: #120D1C; --bg-2: #0E0A16;
  --surface: #1C1626; --surface-2: #251D33;
  --line: rgba(255,255,255,0.10); --line-strong: rgba(255,255,255,0.20);
  --text: #F3EEFA; --text-dim: #C3B8D4; --text-mute: #8E83A6;
  --blue: #E5007D; --blue-deep: #A8005C; --accent: #E5007D; --magenta: #E5007D;
  --grad: linear-gradient(120deg, #E5007D, #A8005C);
  --grad-soft: linear-gradient(120deg, rgba(229,0,125,0.18), rgba(229,0,125,0.10));
  --shadow: 0 24px 60px rgba(0,0,0,0.55);
  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --d-soft: rgba(229,0,125,0.16); --d-soft-ink: #FF95C8;
  --d-soft-2: rgba(150,110,220,0.18); --d-soft-2-ink: #CFBEFF;
  --d-panel: linear-gradient(150deg, #2A1336, #46123E);
  --d-panel-accent: #FF6FB8; --d-panel-text: #F4ECF6; --d-panel-dim: #E1CFE7;
}

/* ---- Deck shell: a centred 16:9 stage on a dark backdrop ---- */
body.deck { background: var(--bg); overflow: hidden; }
#app.deck-root {
  margin-left: 0; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 22px 64px; font-family: var(--font-body);
}
.deck-stage {
  position: relative;
  width: min(100%, calc((100vh - 140px) * 16 / 9));
  aspect-ratio: 16 / 9;
  container-type: size;
}

/* ---- Slide frame: only the active slide is shown (fade) ---- */
.slide {
  position: absolute; inset: 0;
  background: var(--surface); color: var(--text);
  border-radius: 16px; overflow: hidden;
  padding: 5.2% 5.6% 5%;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
  font-size: clamp(9px, 2.32cqh, 21px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s ease;
}
.slide.active { opacity: 1; visibility: visible; pointer-events: auto; }
.slide-inner { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.slide--cover .slide-inner { justify-content: center; }

.d-snum { position: absolute; right: 1.7em; bottom: 1.4em; font-size: 0.78em; font-weight: 600; color: var(--text-mute); letter-spacing: 0.05em; }
.d-fmark { position: absolute; left: 5.6%; bottom: 1.5em; font-size: 0.72em; font-weight: 600; letter-spacing: 0.04em; color: var(--text-mute); }
.d-fmark b { color: var(--accent); font-weight: 700; }
.d-contact { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1.5em; font-size: 0.72em; font-weight: 500; color: var(--text-mute); white-space: nowrap; }

/* ---- Shared slide elements ---- */
.d-kicker { font-size: 0.82em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 0.7em; margin-bottom: 1em; }
.d-kicker::before { content: ""; width: 1.9em; height: 0.18em; background: var(--accent); border-radius: 2px; }
.d-atitle { font-size: 2.1em; font-weight: 700; line-height: 1.14; letter-spacing: -0.01em; color: var(--text); max-width: 92%; }
.d-stand { font-size: 1.02em; font-weight: 400; color: var(--text-dim); line-height: 1.5; margin-top: 0.95em; max-width: 84%; }
.d-foot { margin-top: 1.2em; font-size: 0.92em; color: var(--text-dim); line-height: 1.5; background: var(--surface-2); border-left: 0.22em solid var(--accent); padding: 0.85em 1.15em; border-radius: 0 8px 8px 0; }

/* chips (stat row) */
.d-chips { display: flex; gap: 1em; margin-top: 1.6em; }
.d-chip { flex: 1; background: linear-gradient(160deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); border-radius: 14px; padding: 1.25em 1.3em; }
.d-chip-big { font-size: 1.95em; font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -0.02em; }
.d-chip-lab { font-size: 0.82em; font-weight: 500; color: var(--text-dim); margin-top: 0.6em; line-height: 1.4; }

/* now / next callouts */
.d-duo { display: flex; gap: 1em; margin-top: 1.3em; }
.d-hz { flex: 1; border-radius: 12px; padding: 1.05em 1.25em; font-size: 0.95em; line-height: 1.45; }
.d-hz-t { font-weight: 700; font-size: 0.82em; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4em; }
.d-hz.now { background: var(--d-soft); color: var(--d-soft-ink); }
.d-hz.now .d-hz-t { color: var(--accent); }
.d-hz.next { background: var(--d-soft-2); color: var(--d-soft-2-ink); }
.d-hz.next .d-hz-t { color: var(--d-soft-2-ink); }

/* two-lens split (light card + dark panel) */
.d-lens { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; margin-top: 1.5em; }
.d-lens-col { border: 1px solid var(--line); border-radius: 16px; padding: 1.6em; }
.d-lens-col.prod { background: var(--surface-2); }
.d-lens-col.edge { background: var(--d-panel); border: none; color: var(--d-panel-text); }
.d-lens-col h3 { font-size: 1.25em; font-weight: 700; margin-bottom: 0.4em; }
.d-lens-col p { font-size: 0.95em; line-height: 1.5; }
.d-lens-col.prod h3 { color: var(--text); } .d-lens-col.prod p { color: var(--text-dim); }
.d-lens-col.edge p { color: var(--d-panel-dim); }
.d-lens-ic { width: 2.1em; height: 2.1em; margin-bottom: 0.7em; }
.d-lens-ic svg { width: 100%; height: 100%; }
.d-lens-col.prod .d-lens-ic { color: var(--accent); }
.d-lens-col.edge .d-lens-ic { color: var(--d-panel-accent); }

/* founders + big stat band */
.d-founders { display: flex; gap: 1.3em; margin-top: 1.7em; }
.d-fcard { flex: 1; display: flex; gap: 1.2em; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 1.8em 1.7em; }
.d-avatar { width: 3.9em; height: 3.9em; border-radius: 50%; background: var(--grad); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.2em; }
.d-fcard-h { font-size: 1.18em; font-weight: 600; color: var(--text); }
.d-fcard p { font-size: 0.92em; color: var(--text-dim); line-height: 1.55; margin-top: 0.5em; }
.d-bigstat { display: flex; gap: 1.5em; margin-top: 1.2em; align-items: center; background: var(--d-panel); border-radius: 16px; padding: 1.3em 1.6em; color: var(--d-panel-text); }
.d-bigstat-n { font-size: 2.6em; font-weight: 800; color: var(--d-panel-accent); line-height: 1; flex-shrink: 0; }
.d-bigstat-x { font-size: 0.92em; color: var(--d-panel-dim); line-height: 1.45; }

/* card grids */
.d-grid { display: grid; gap: 1em; margin-top: 1.4em; }
.d-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.d-grid.g4 { grid-template-columns: repeat(4, 1fr); }
.d-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 1.25em 1.25em 1.1em; display: flex; flex-direction: column; gap: 0.5em; position: relative; }
.d-card-ic { width: 2.1em; height: 2.1em; color: var(--accent); }
.d-card-ic svg { width: 100%; height: 100%; }
.d-card-h { font-size: 0.98em; font-weight: 600; color: var(--text); line-height: 1.25; }
.d-card-p { font-size: 0.82em; font-weight: 400; color: var(--text-dim); line-height: 1.45; }
.d-mod { font-size: 0.72em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.d-tag { display: inline-block; background: var(--accent); color: #fff; font-size: 0.62em; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.3em 0.85em; border-radius: 20px; align-self: flex-start; }

/* horizontal timeline */
.d-timeline { display: flex; margin-top: 1.5em; }
.d-tl { flex: 1; text-align: center; position: relative; padding-top: 1.5em; }
.d-tl::before { content: ""; position: absolute; top: 0.42em; left: 0; right: 0; height: 0.16em; background: var(--line-strong); }
.d-tl:first-child::before { left: 50%; } .d-tl:last-child::before { right: 50%; }
.d-tl-dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--accent); border: 0.2em solid var(--surface); box-shadow: 0 0 0 0.12em var(--line-strong); }
.d-tl-ph { font-size: 0.86em; font-weight: 600; color: var(--text); }
.d-tl-mo { font-size: 0.8em; color: var(--accent); font-weight: 600; margin-top: 0.15em; }

/* measurement: bars + cards */
.d-measure { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 1.9em; align-items: center; margin-top: 1.1em; }
.d-bars { display: flex; align-items: flex-end; gap: 1.7em; height: 10em; padding-left: 0.6em; }
.d-barwrap { display: flex; flex-direction: column; align-items: center; gap: 0.65em; }
.d-bar { width: 4.6em; border-radius: 8px 8px 0 0; position: relative; }
.d-bar.one { height: 1.6em; background: var(--line-strong); }
.d-bar.ten { height: 10em; background: var(--grad); }
.d-barlab { font-size: 0.8em; font-weight: 600; color: var(--text-dim); text-align: center; }
.d-barval { position: absolute; top: -1.6em; left: 0; right: 0; text-align: center; font-size: 1.2em; font-weight: 800; color: var(--text); }
.d-barval-hi { color: var(--accent); }
.d-mcards { display: grid; gap: 0.6em; }
.d-mcards .d-card { padding: 0.7em 0.95em; gap: 0.2em; }
.d-mcards .d-card-h { font-size: 0.95em; }
.d-mcards .d-card-p { font-size: 0.78em; line-height: 1.35; }

/* proof: dark hero-case + small cases */
.d-herocase { background: var(--d-panel); border-radius: 16px; padding: 1.45em 1.7em; color: var(--d-panel-text); margin-top: 1.3em; display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.7em; align-items: center; }
.d-hc-head { font-size: 0.86em; font-weight: 700; letter-spacing: 0.03em; color: var(--d-panel-text); margin-bottom: 0.55em; }
.d-hc-quote { font-size: 0.98em; line-height: 1.5; color: var(--d-panel-dim); font-weight: 300; }
.d-hc-who { font-size: 0.82em; color: var(--d-panel-accent); margin-top: 0.65em; font-weight: 600; }
.d-hc-metrics { display: flex; gap: 1.5em; }
.d-hc-n { font-size: 2em; font-weight: 800; color: var(--d-panel-accent); line-height: 1; }
.d-hc-l { font-size: 0.78em; color: var(--d-panel-dim); margin-top: 0.45em; line-height: 1.35; }
.d-scases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9em; margin-top: 0.9em; }
.d-scase { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 0.95em 1em; }
.d-scase-h { font-size: 0.88em; font-weight: 600; color: var(--text); line-height: 1.3; }
.d-scase-p { font-size: 0.78em; color: var(--text-dim); line-height: 1.4; margin-top: 0.4em; }

/* investment: price table */
.d-price { margin-top: 1.4em; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.d-prow { display: grid; grid-template-columns: 2.8em 1.7fr 1fr; align-items: center; padding: 0.9em 1.5em; border-bottom: 1px solid var(--line); }
.d-prow:last-child { border-bottom: none; }
.d-prow:nth-child(even) { background: var(--surface-2); }
.d-pm { font-size: 0.82em; font-weight: 800; color: #fff; background: var(--accent); width: 1.9em; height: 1.9em; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.d-pn { font-size: 0.96em; font-weight: 600; color: var(--text); }
.d-pn span { display: block; font-size: 0.8em; font-weight: 400; color: var(--text-dim); margin-top: 0.15em; }
.d-pp { font-size: 0.98em; font-weight: 700; color: var(--accent); text-align: right; }
.d-redflag { margin-top: 0.95em; font-size: 0.82em; color: var(--text-dim); background: var(--d-soft); border: 1px solid var(--line); border-radius: 8px; padding: 0.72em 1.05em; line-height: 1.45; }
.d-redflag b { font-weight: 700; color: var(--d-soft-ink); }
.d-terms { margin-top: 0.65em; font-size: 0.76em; color: var(--text-mute); line-height: 1.45; padding: 0 0.3em; }

/* next steps */
.d-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin-top: 1.5em; }
.d-step { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 1.4em 1.25em; }
.d-step-num { width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.95em; display: flex; align-items: center; justify-content: center; margin-bottom: 0.85em; }
.d-step-h { font-size: 0.98em; font-weight: 600; line-height: 1.3; color: var(--text); }
.d-step-p { font-size: 0.84em; color: var(--text-dim); line-height: 1.45; margin-top: 0.45em; }

/* Metric rings (proof hero) , arc draws in when the slide becomes active */
.d-hc-metrics { flex-wrap: wrap; align-items: flex-start; }
.d-ring { position: relative; width: 4.2em; height: 4.2em; flex: 0 0 auto; }
.d-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.d-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 3; }
.d-ring-arc { fill: none; stroke: var(--d-panel-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.slide.active .d-ring-arc { stroke-dashoffset: calc(100 - var(--pct)); }
.d-ring-c { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.3em; font-weight: 800; color: var(--d-panel-text); letter-spacing: -0.02em; }
.d-ring-c span { font-size: 0.55em; font-weight: 600; opacity: 0.8; margin-left: 1px; }

/* Next-steps roadmap , numbered nodes on a connecting line */
.d-roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em; margin-top: 2.2em; position: relative; }
.d-roadmap::before { content: ""; position: absolute; top: 1.05em; left: 16.66%; right: 16.66%; height: 2px; background: var(--line-strong); }
.d-rm-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.d-rm-node { width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 1em; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: 0 0 0 0.4em var(--surface); }
.d-rm-card { margin-top: 1em; }

/* ROI metric icons as ringed badges (visual rhythm; no claimed figures) */
.slide--roi .d-card-ic { width: 2.9em; height: 2.9em; padding: 0.6em; border: 2px solid var(--accent); border-radius: 50%; box-sizing: border-box; }

/* Shared visual-kit exhibits, re-scaled for the 16:9 deck. The .vk-* classes
   already read the theme vars (so they reskin red/magenta); these overrides are
   em-based so they track the slide's cqh font, and lift surfaces for contrast on
   the white UBS slide. */
.slide .vk { margin: 1.3em 0 0; }
.slide .vk-statgrid { gap: 0.9em; }
.slide .vk-stat { background: var(--surface-2); padding: 1em 1.1em; border-radius: 12px; gap: 0.8em; }
.slide .vk-stat-ico { width: 2.5em; height: 2.5em; border-radius: 10px; }
.slide .vk-stat-ico .vk-ico { width: 1.35em; height: 1.35em; }
.slide .vk-stat-n { font-size: 1.7em; line-height: 1.05; }
.slide .vk-stat-client { font-size: 0.95em; }
.slide .vk-stat-l { font-size: 0.8em; }
.slide .vk-quad { gap: 0.9em; }
.slide .vk-quad-cell { background: var(--surface-2); padding: 0.85em 1em; border-radius: 12px; }
.slide .vk-quad-top { margin-bottom: 0.4em; }
.slide .vk-quad-n { font-size: 1.1em; }
.slide .vk-quad-ico { width: 1.7em; height: 1.7em; }
.slide .vk-quad-h { font-size: 0.98em; margin-bottom: 0.25em; }
.slide .vk-quad-cell p { font-size: 0.8em; line-height: 1.4; }
.slide .vk-quad-center { width: 7.6em; height: 7.6em; padding: 1em; }
.slide .vk-quad-center span { font-size: 0.95em; }
.slide .vk-quad-center .d-ns-ic { display: block; line-height: 0; margin-bottom: 0.3em; color: #fff; opacity: 0.92; }
.slide .vk-quad-center .d-ns-ic, .slide .vk-quad-center .d-ns-ic svg { width: 1.7em; height: 1.7em; }
.slide .d-comms-viz .vk-radial { width: 100%; }
.slide .vk-radial svg { max-width: 30em; }

/* Comms slide: kit radial (left) + a compact capability list (right) */
.d-comms2 { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.6em; align-items: center; margin-top: 0.8em; }
.d-comms-viz { display: flex; align-items: center; justify-content: center; }
.d-comms-list { display: grid; gap: 0.75em; }
.d-comms-list .d-cap { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 0.8em 1em; }
.d-cap-head { display: flex; gap: 0.75em; align-items: center; }
.d-cap-head .d-card-ic { flex: 0 0 auto; width: 1.7em; height: 1.7em; }
.d-cap-head .d-card-h { font-size: 0.96em; margin: 0; }
.d-cap .d-card-p { font-size: 0.8em; line-height: 1.4; margin: 0.35em 0 0; }
.d-comms-list .d-tag { font-size: 0.56em; padding: 0.25em 0.7em; margin-bottom: 0.45em; }

/* Two-up grid (Our understanding) */
.d-grid.g2 { grid-template-columns: 1fr 1fr; }

/* Cover footer: prepared-for line + date */
.d-cover-foot { position: absolute; left: 6%; right: 6%; bottom: 5.5%; display: flex; justify-content: space-between; align-items: center; gap: 1em; font-size: 0.82em; color: #C9B9C2; }
.d-cover-date { font-weight: 600; color: #fff; white-space: nowrap; }
[data-theme="ubs"] .d-cover-foot { color: var(--text-dim); }
[data-theme="ubs"] .d-cover-date { color: var(--text); }

/* Keep the densest slides within the 16:9 frame */
.slide--understanding .d-grid { gap: 0.85em; margin-top: 0.9em; }
.slide--understanding .d-card { padding: 0.8em 1.05em; gap: 0.28em; }
.slide--understanding .d-card-ic { width: 1.6em; height: 1.6em; }
.slide--understanding .d-card-h { font-size: 0.96em; }
.slide--understanding .d-card-p { font-size: 0.78em; line-height: 1.38; }
.slide--understanding .d-stand { margin-top: 0.7em; }
.slide--comms .d-comms2 { margin-top: 0.6em; }

/* Slim horizontal timeline beneath the programme hub-quad */
.d-timeline--slim { margin-top: 1.4em; }
.d-timeline--slim .d-tl { padding-top: 1.2em; }

/* cover slide (dark, dramatic, in both views) */
.slide--cover { background: radial-gradient(120% 130% at 80% 10%, #46122A 0%, #1C1018 55%, #120A12 100%); color: #fff; padding: 6%; }
[data-theme="fu"] .slide--cover { background: radial-gradient(120% 130% at 80% 10%, #46225C 0%, #1C1530 55%, #120D1C 100%); }
.d-blob { position: absolute; width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent), transparent 62%); right: -10%; top: -14%; filter: blur(8px); }
.d-blob2 { width: 30%; left: -8%; right: auto; top: auto; bottom: -14%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%); }
.d-cover-logos { position: absolute; top: 7%; left: 6%; right: 6%; display: flex; justify-content: space-between; align-items: center; }
.d-wordmark { font-weight: 700; font-size: 0.95em; letter-spacing: 0.02em; color: #fff; }
.d-logoph { font-size: 0.78em; color: #C7B6C0; border: 1px dashed #6B5566; border-radius: 6px; padding: 0.45em 0.9em; letter-spacing: 0.04em; }
.d-cover-eyebrow { position: relative; font-size: 0.84em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-panel-accent); margin-bottom: 1em; }
.d-cover-h { position: relative; font-size: 3em; font-weight: 800; line-height: 1.09; letter-spacing: -0.02em; max-width: 84%; color: #fff; }
.d-accent { color: var(--d-panel-accent); }
.d-rule { width: 3.4em; height: 0.26em; background: var(--accent); border-radius: 3px; margin: 1.1em 0 0; position: relative; }
.d-cover-sub { position: relative; font-size: 1.05em; color: #E4D7DD; margin-top: 1.1em; font-weight: 300; max-width: 66%; line-height: 1.5; }
[data-theme="fu"] .d-cover-sub { color: #D9CFE6; }
/* UBS cover: a clean white title page (black + red), not a dark panel. */
[data-theme="ubs"] .slide--cover { background: #FFFFFF; color: var(--text); }
[data-theme="ubs"] .slide--cover .d-blob { display: none; }
[data-theme="ubs"] .d-cover-eyebrow { color: var(--accent); }
[data-theme="ubs"] .d-cover-h { color: var(--text); font-weight: 700; }
[data-theme="ubs"] .d-accent { color: var(--accent); }
[data-theme="ubs"] .d-cover-sub { color: var(--text-dim); }
[data-theme="ubs"] .d-wordmark { color: var(--text); }
[data-theme="ubs"] .d-logoph { color: var(--text-mute); border-color: var(--line-strong); }

/* UBS client wordmark lockup (placeholder for the official keys asset). */
.d-ubsmark { font-weight: 800; font-size: 1.2em; letter-spacing: 0.06em; color: #EC0016; }

/* Red vertical-bar title marker (the UBS "Content"/section motif). */
.d-bartitle { display: flex; align-items: stretch; gap: 0.6em; }
.d-bar { flex: 0 0 auto; width: 0.3em; min-height: 1.05em; background: var(--accent); border-radius: 2px; }

/* Contents (agenda) slide */
.d-contents { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2em 2.4em; margin-top: 1.7em; }
.d-citem { display: flex; gap: 1em; align-items: baseline; padding: 0.85em 0; border-top: 1px solid var(--line); }
.d-cnum { font-size: 1.25em; font-weight: 800; color: var(--accent); min-width: 1.7em; letter-spacing: -0.01em; }
.d-ctext h4 { font-size: 1.02em; font-weight: 600; color: var(--text); }
.d-ctext p { font-size: 0.85em; color: var(--text-dim); margin-top: 0.2em; line-height: 1.4; }

/* Thank-you (closing) slide */
.d-thanks { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.d-thanks-h { font-size: 3.2em; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1.05; }
.d-contacts { display: flex; gap: 2.6em; margin-top: 1.6em; flex-wrap: wrap; }
.d-tname { font-size: 1.05em; font-weight: 700; color: var(--text); }
.d-trole { font-size: 0.85em; color: var(--text-dim); margin-top: 0.15em; }
.d-tdetail { font-size: 0.9em; color: var(--accent); margin-top: 0.35em; font-weight: 600; }
.d-thanks-lockup { display: flex; align-items: center; justify-content: space-between; margin-top: 2.2em; padding-top: 1.1em; border-top: 1px solid var(--line); }
.d-fmark-inline { font-size: 0.85em; font-weight: 600; color: var(--text-dim); letter-spacing: 0.04em; }
.d-fmark-inline b { color: var(--accent); font-weight: 700; }

/* ---- Deck chrome: top-right controls, bottom nav, progress ---- */
.deck-topbar { position: fixed; top: 14px; right: 18px; display: flex; align-items: center; gap: 12px; z-index: 30; }
.deck-theme { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 4px 6px; }
.deck-theme-lab { font-size: 10.5px; color: #C9C2D2; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 4px; }
.deck-ts { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: #E9E4F0; background: transparent; border: none; border-radius: 7px; padding: 5px 10px; cursor: pointer; }
.deck-ts.on { background: var(--accent); color: #fff; }
.deck-logout { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: #E9E4F0; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 9px; padding: 7px 12px; cursor: pointer; }
.deck-logout:hover { background: rgba(255,255,255,0.12); }
.deck-foot { position: fixed; left: 0; right: 0; bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 14px; z-index: 30; }
.deck-arrow { font-family: var(--font-body); width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); color: #fff; font-size: 19px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.deck-arrow:hover { background: var(--accent); border-color: var(--accent); }
.deck-dots { display: flex; gap: 8px; align-items: center; }
.deck-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,0.28); cursor: pointer; padding: 0; transition: transform 0.2s, background 0.2s; }
.deck-dot.on { background: var(--accent); transform: scale(1.25); }
.deck-counter { font-size: 12px; font-weight: 600; color: #C9C2D2; letter-spacing: 0.05em; min-width: 56px; text-align: center; }
.deck-progress { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.08); z-index: 30; }
.deck-progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.4s ease; }

/* ---- Mobile / coarse pointer: stack the slides and scroll-snap ---- */
@media (max-width: 820px), (pointer: coarse) {
  body.deck { overflow: auto; }
  #app.deck-root { display: block; padding: 0; }
  .deck-stage { width: 100%; aspect-ratio: auto; container-type: normal; scroll-snap-type: y mandatory; }
  .slide { position: relative; inset: auto; opacity: 1; visibility: visible; pointer-events: auto; min-height: 100svh; border-radius: 0; scroll-snap-align: start; padding: 64px 24px 84px; font-size: clamp(13px, 3.7vw, 19px); transition: none; }
  .d-chips, .d-duo, .d-founders { flex-direction: column; }
  .d-lens, .d-measure, .d-herocase, .d-grid.g2, .d-grid.g3, .d-grid.g4, .d-steps, .d-scases, .d-contents, .d-roadmap, .d-comms2 { grid-template-columns: 1fr; }
  .d-roadmap::before { display: none; }
  .d-thanks-h { font-size: 2.2em; }
  .d-atitle { font-size: 1.85em; max-width: 100%; }
  .d-stand { max-width: 100%; }
  .d-bars { height: 9em; }
  .d-cover-h { font-size: 2.3em; max-width: 100%; }
  .d-cover-sub { max-width: 100%; }
  .deck-topbar { top: 8px; right: 8px; gap: 8px; }
  .deck-counter { display: none; }
  .d-contact { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; } .deck-progress-fill { transition: none; }
}

/* =====================================================================
 * ARCHIVED HOLDER , the placeholder an outside visitor sees once a proposal
 * has been archived (the team still sees the full proposal). Centered card on
 * the proposal's own theme, so it reskins per client via the CSS variables.
 * ===================================================================== */
.arch-holder {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--bg);
  color: var(--text);
}
.arch-card {
  max-width: 560px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 48px 40px;
}
.arch-brand {
  font-family: var(--font-head);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 18px;
}
.arch-title { font-family: var(--font-head); font-size: 1.8rem; margin: 0 0 18px; }
.arch-lead { color: var(--text-dim); line-height: 1.6; margin: 0 0 16px; }
.arch-cta { margin: 26px 0 14px; }
.arch-foot { font-size: 0.85rem; color: var(--text-mute); }

/* Team-only toggle between the full proposal and the client's archived holder
   view. "See client view" sits on the full proposal (stacked above the comments
   FAB at bottom-right); "Back to team view" sits top-left on the holder. Only
   ever rendered for the master session, so it never reaches an outside visitor. */
.client-view-toggle {
  position: fixed;
  right: 18px;
  bottom: 72px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 9px 16px;
  font: 600 0.8rem var(--font-body);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}
.client-view-toggle:hover { border-color: var(--accent); color: var(--accent); }
.client-view-back { top: 18px; left: 18px; right: auto; bottom: auto; }

/* One-pager: small summary squares + clickable proof */
.bk-squares { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.bk-sq { display: flex; align-items: flex-start; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.bk-sq-ico { width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line); color: var(--magenta); }
.bk-sq-ico .vk-ico { width: 18px; height: 18px; }
.bk-sq-txt { display: flex; flex-direction: column; gap: 3px; }
.bk-sq-l { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.bk-sq-d { font-size: 0.8rem; line-height: 1.45; color: var(--text-dim); }
.bk-prooflink { display: block; color: inherit; }
.bk-prooflink:hover { text-decoration: none; }
.bk-prooflink:hover .vk-stat, .bk-prooflink:hover .bk-proof { border-color: var(--magenta); }

/* Proof cards: client on top, then the stat, then the finish of the stat */
.bk-proofgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0; }
.bk-proof { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.bk-proof-client { font: 600 0.9rem var(--font-head); color: var(--text); }
.bk-proof-stat { font: 700 1.9rem var(--font-head); color: var(--text); line-height: 1.05; margin: 6px 0 3px; }
.bk-proof-label { font-size: 0.82rem; color: var(--text-dim); line-height: 1.45; }
.bk-proof-label strong { color: var(--text); font-weight: 700; background: var(--grad-soft); padding: 0 5px; border-radius: 4px; }
@media (max-width: 820px) { .bk-proofgrid { grid-template-columns: 1fr; } }

/* One-pager: opening paragraph + scope metrics band + nav map */
.bk-onepager-lead { max-width: 820px; margin: 2px 0 22px; }
.bk-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 6px 0 22px; }
.bk-metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.bk-metric-n { font: 700 1.5rem var(--font-head); color: var(--text); line-height: 1.05; }
.bk-metric-l { font-size: 0.78rem; color: var(--text-dim); margin-top: 4px; }
.bk-navmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bk-navtile { display: flex; flex-direction: column; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; color: inherit; transition: border-color 0.15s; }
.bk-navtile:hover { border-color: var(--magenta); text-decoration: none; }
.bk-navtile-n { font: 700 0.78rem var(--font-head); color: var(--magenta); }
.bk-navtile-label { font-weight: 600; }
.bk-navtile-note { font-size: 0.76rem; color: var(--text-mute); }
@media (max-width: 820px) { .bk-metrics, .bk-navmap { grid-template-columns: repeat(2, 1fr); } }

/* Approach: the two program pointer cards (link to each program's own page) */
.bk-progcard { display: flex; flex-direction: column; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.bk-progcard:hover { border-color: var(--magenta); text-decoration: none; transform: translateY(-2px); }
.bk-progcard h4 { font: 600 1.05rem var(--font-head); margin: 0 0 6px; }
.bk-progcard p { color: var(--text-dim); margin: 0 0 12px; }
.bk-progcard .bk-case-link { margin-top: auto; }

/* Program pages (Marketers / Video Workflows): example formats, modules, scope, roadmap */
.bk-formats { display: flex; flex-direction: column; gap: 18px; margin: 12px 0 8px; }
.bk-format { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.bk-format-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bk-format-name { font: 700 1.18rem var(--font-head); color: var(--text); }
.bk-format-tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--magenta); background: var(--grad-soft); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.bk-format-meta { font-size: 0.84rem; color: var(--text-mute); margin-top: 4px; }
.bk-format-sum { color: var(--text-dim); margin: 10px 0 14px; max-width: 760px; }
.bk-format-pts { margin: 0; padding-left: 18px; }
.bk-format-pts li { margin: 5px 0; color: var(--text-dim); }
.bk-mods { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk-mod { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.bk-mod-h { font: 600 0.95rem var(--font-head); color: var(--text); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bk-mod-meta { font: 500 0.72rem var(--font-body); color: var(--text-mute); white-space: nowrap; }
.bk-mod ul { margin: 8px 0 0; padding-left: 16px; }
.bk-mod li { font-size: 0.84rem; line-height: 1.5; color: var(--text-dim); margin: 4px 0; }
.bk-mod-out { font-size: 0.82rem; color: var(--text-dim); margin: 10px 0 0; }
.bk-mod-out span { font-weight: 600; color: var(--text); }
.bk-fpart { margin-top: 18px; }
.bk-fpart:first-child { margin-top: 8px; }
.bk-fpart-h { font: 700 1.02rem var(--font-head); color: var(--text); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bk-fpart-meta { font: 500 0.78rem var(--font-body); color: var(--text-mute); }
.bk-fpart-sum { color: var(--text-dim); margin: 6px 0 12px; }
/* Scope callout: in-scope-now vs kept-for-later */
.bk-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 4px; }
.bk-scopecol-h { font: 600 0.9rem var(--font-head); margin-bottom: 6px; }
.bk-scopecol ul { margin: 0; padding-left: 16px; }
.bk-scopecol li { font-size: 0.85rem; line-height: 1.5; color: var(--text-dim); margin: 4px 0; }
.bk-scopecol.now .bk-scopecol-h { color: var(--magenta); }
.bk-scopecol.later .bk-scopecol-h { color: var(--text-mute); }
/* Roadmap block */
.bk-roadmap .bk-rm-item { margin-top: 14px; }
.bk-rm-h { font: 600 0.98rem var(--font-head); color: var(--text); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bk-rm-meta { font: 500 0.76rem var(--font-body); color: var(--text-mute); }
.bk-rm-item p { color: var(--text-dim); margin: 5px 0 0; }
@media (max-width: 820px) { .bk-mods, .bk-scope { grid-template-columns: 1fr; } }

/* Commercials: cleanly separated Workshops and Builds sections */
.bk-comm-section { margin: 16px 0 8px; }
.bk-comm-builds { margin-top: 34px; padding-top: 24px; border-top: 2px solid var(--line-strong); }
.bk-sub-sm { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-mute); margin-top: 22px; }
.bk-addon-price { font-weight: 600; color: var(--magenta); font-size: 0.82rem; }

/* Internal notes ((...)) , draft-only, shown bright red + highlighted to the
   team and stripped for the client. Plus the "Last review" scan control. */
.internal-note { color: #d40000; background: rgba(212,0,0,0.12); font-weight: 600; padding: 1px 6px; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
body.last-review .internal-note { outline: 2px solid #d40000; outline-offset: 1px; }
.review-toggle { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 900; background: #d40000; color: #fff; border: none; border-radius: 999px; padding: 9px 16px; font: 600 0.8rem var(--font-body); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.review-toggle:hover { filter: brightness(1.08); }
body.last-review .review-toggle { background: #0a0a0a; }
.review-panel { position: fixed; left: 50%; transform: translateX(-50%); bottom: 64px; z-index: 900; width: min(92vw, 420px); max-height: 60vh; overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 16px; box-shadow: 0 16px 40px rgba(0,0,0,0.28); }
.review-h { font: 700 0.85rem var(--font-head); margin-bottom: 8px; color: var(--text); }
.review-ok { color: #1a7f37; font-weight: 600; margin: 0; }
.review-panel ul { margin: 0; padding-left: 0; list-style: none; }
.review-panel li { border-top: 1px solid var(--line); }
.review-jump, .review-row { display: block; padding: 8px; }
.review-jump { color: inherit; border-radius: 8px; }
.review-jump:hover { text-decoration: none; background: var(--grad-soft); }
.review-panel code { display: block; font-size: 0.72rem; color: var(--text-mute); }
.review-panel span { display: block; font-size: 0.85rem; color: #d40000; font-weight: 600; margin-top: 2px; }
.review-panel li { position: relative; }
.review-jump, .review-row { padding-right: 30px; }
.review-clear { position: absolute; top: 6px; right: 6px; z-index: 1; border: none; background: none; color: var(--text-mute); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.review-clear:hover { color: #fff; background: #d40000; }
.review-clear:disabled { opacity: 0.4; cursor: default; }

/* Modular-day modules: click-to-pick, selected ones framed in pink */
.bk-mod-pick { cursor: pointer; position: relative; padding-left: 44px; transition: border-color 0.12s, box-shadow 0.12s, background 0.12s; }
.bk-mod-tick { position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; border: 2px solid var(--line-strong); border-radius: 5px; background: var(--surface); }
.bk-mod-pick:hover { border-color: #E60080; }
.bk-mod-pick.on { border-color: #E60080; box-shadow: 0 0 0 1px #E60080; background: rgba(230,0,128,0.06); }
.bk-mod-pick.on .bk-mod-tick { background: #E60080; border-color: #E60080; }
.bk-mod-pick.on .bk-mod-tick::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Practical AI Build: the start-to-finish process steps */
.bk-steps { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 8px; }
.bk-step { display: flex; gap: 14px; align-items: flex-start; }
.bk-step-n { flex: none; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; font: 700 0.9rem var(--font-head); color: #fff; background: var(--magenta); }
.bk-step-h { font: 600 1rem var(--font-head); color: var(--text); }
.bk-step-b p { margin: 3px 0 0; color: var(--text-dim); }

/* Practical AI Build: three fixed-price level cards (static, no calculator) */
.bk-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 12px 0 8px; align-items: start; }
.bk-tier { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; }
.bk-tier.rec { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta); }
.bk-tier-tag { position: absolute; top: -10px; left: 20px; font: 700 0.68rem var(--font-head); text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: var(--magenta); border-radius: 999px; padding: 3px 10px; }
.bk-tier-name { font: 600 1.05rem var(--font-head); color: var(--text); }
.bk-tier-price { font: 700 1.9rem var(--font-head); color: var(--text); margin: 6px 0 2px; line-height: 1.05; }
.bk-tier-sum { color: var(--text-dim); margin: 8px 0 12px; }
.bk-tier-incl { margin: 0; padding-left: 16px; }
.bk-tier-incl li { font-size: 0.85rem; line-height: 1.5; color: var(--text-dim); margin: 5px 0; }
@media (max-width: 820px) { .bk-tiers { grid-template-columns: 1fr; } }

/* Our Understanding: understanding cards, why-now grid, context facts */
.bk-ucards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0; }
.bk-uc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.bk-uc-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--grad-soft); border: 1px solid var(--line); color: var(--magenta); margin-bottom: 10px; }
.bk-uc-ico .vk-ico { width: 20px; height: 20px; }
.bk-uc h4 { margin: 0 0 6px; font: 600 1.02rem var(--font-head); }
.bk-uc p { margin: 0; color: var(--text-dim); font-size: 0.9rem; }
.bk-whynow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px; }
.bk-wn-stat { font: 700 1.4rem var(--font-head); color: var(--text); }
.bk-wn-tx { margin: 4px 0 0; font-size: 0.86rem; color: var(--text-dim); }
.bk-wn-src { font-size: 0.72rem; color: var(--text-mute); margin-top: 6px; }
.bk-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; margin-top: 4px; }
.bk-fact { display: flex; gap: 8px; align-items: flex-start; font-size: 0.88rem; color: var(--text-dim); }
.bk-fact-mark { flex: none; width: 18px; height: 18px; color: var(--magenta); margin-top: 1px; }
.bk-fact-mark svg { width: 18px; height: 18px; }
@media (max-width: 820px) { .bk-ucards, .bk-whynow, .bk-facts { grid-template-columns: 1fr; } }

/* =====================================================================
 * Captured / embedded credential: a self-contained deck rendered full-bleed
 * in a gated iframe (served by /api/credential-asset/<slug>). No TOC/footer.
 * ===================================================================== */
.embed-root { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; background: #15121C; }
.embed-frame { width: 100%; height: 100%; border: 0; display: block; }