/* =====================================================================
 * 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; }
.hero-foot { color: var(--text-mute); font-size: 0.82rem; margin-top: 10px; }
.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; }
.card-grid.three { grid-template-columns: repeat(3, 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%; } }
/* Balanced rows: when a 3-col grid holds exactly 4 items it otherwise wraps to a
   lopsided 3 + 1, so split it evenly into 2 + 2. Count-driven (:has on the last
   child's index) so it only fires at n=4 and never disturbs other counts or the
   other proposals using .grid-3. */
.grid-3:has(> :last-child:nth-child(4)) > * { flex-basis: calc(50% - 8px); max-width: calc(50% - 8px); }
/* 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; } }

/* ---------- gallery ("In the Room" showcase) ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 4px; }
.gallery-tile { border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); overflow: hidden; background: var(--surface); margin: 0; }
.gallery-ph { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; background: linear-gradient(135deg, var(--surface-2), var(--surface)); border-bottom: 1px solid var(--line); overflow: hidden; }
.gallery-ph-mark { font: 800 1.1rem var(--font-head); letter-spacing: 0.04em; color: var(--accent); opacity: 0.55; transition: opacity 0.2s ease; }
/* A real session photo covers the placeholder once it has actually loaded
   (wireImgFallback adds .has-img); the placeholder stays if the file is missing. */
.gallery-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s ease; }
.gallery-tile.has-img .gallery-img { opacity: 1; }
.gallery-tile.has-img .gallery-ph-mark { opacity: 0; }
.gallery-cap { padding: 12px 14px 14px; }
.gallery-ev { font: 700 0.95rem var(--font-head); color: var(--text); }
.gallery-where { font-size: 0.85rem; color: var(--text-dim); margin-top: 2px; }
.gallery-note { font-size: 0.8rem; color: var(--accent); margin-top: 6px; }
/* Balanced rows: 4 tiles otherwise wrap to a lopsided 3 + 1, so split into 2 + 2
   (count-driven :has, matching the .grid-3 convention; fires only at n=4). */
.gallery-grid:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ---------- 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; }
/* One-phrase teaser shown under the bold accordion title:
   `<strong>Title</strong><span class="acc-glance">short phrase</span>`. A lighter,
   smaller sub-line that reads in both the light and pink themes. */
.acc-glance { display: block; font: 500 0.85rem var(--font-body); color: var(--text-mute); margin-top: 3px; }
.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; }
/* Separator label above the growth-ladder items in the accelerator summary:
   they list under here with their own ranges, kept clearly apart from the
   sprint price above so nothing reads as bundled into the package. */
.est-sep { margin-top: 14px; }
.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; }
.stats.three { grid-template-columns: repeat(3, 1fr); }
.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; }
/* Balanced rows for the 2-col grids: an odd total leaves the last item hanging in
   a half-width cell on the left. Center that trailing orphan across both columns
   instead. Count-driven (last child at an odd index with no following sibling) so
   it is inert for even counts and safe for every proposal using these classes. */
.grid-2x2 > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; max-width: calc(50% - 8px); width: 100%; }
.card-grid.two > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; max-width: calc(50% - 8px); width: 100%; }
@media (max-width: 980px) {
  .grid-2x2 > :last-child:nth-child(odd),
  .card-grid.two > :last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; max-width: 100%; }
}
.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); }
/* Tiered menu labels on the Approach card groups: breathing room above each
   tier, and none before the first so it hugs its section intro. */
.tier-lab { margin-top: 26px; }
.tier-lab:first-of-type { margin-top: 10px; }
/* A single-founder bio spans the row instead of squeezing into one column. */
.bio-grid > .bio:only-child { grid-column: 1 / -1; }
.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; }
  .card-grid.three { 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); }
/* Credentials "company we keep": industry headers, clients as a text list. */
.cred-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 44px; margin: 10px 0 8px; }
.cred-wall-group { break-inside: avoid; }
.cred-wall-group .sub-h { margin: 0 0 10px; }
/* Nestlé: breathing room between the "Trusted by teams at" logo wall and the
   industry roster headings below it (the default 10px reads clunky). */
[data-theme="nestle"] .cred-wall { margin-top: 36px; }
.cred-clients { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 9px; }
.cred-clients li { font: 400 1rem var(--font-body); color: var(--text-dim); line-height: 1.42; padding-left: 16px; position: relative; }
.cred-clients li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cred-clients li strong { color: var(--text); font-weight: 700; }
@media (max-width: 760px) { .cred-wall { grid-template-columns: 1fr; } }
.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; }

/* Accelerator commercials (calculator model "accelerator"): the locked core
   card plus quote/from add-on rows, totals-only output. Reuses the cohort
   .co-add row styles above. (accel- prefix; .acc is taken by accordions.) */
.accel-core { padding: 14px 16px; border: 1px solid var(--line-strong); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--bg-2); }
.accel-core-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.accel-core-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.accel-core-detail { color: var(--text-mute); font-size: 12.5px; margin: 6px 0 8px; }
.accel-core-price { font: 700 1.15rem var(--font-head); color: var(--text); }
.co-add.accel-quote .co-add-cost { color: var(--text-mute); }
/* The package panel opens on its caption, not a floating rule. */
.accel-builder .estimate { border-top: none; margin-top: 0; padding-top: 0; }

/* dmg: the narrative column runs the full width of the page. */
[data-client="dmg"] .lead { max-width: none; }

/* =====================================================================
 * 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 + Nestlé blue, multi-colour bands) ===== */
[data-theme="nestle"] {
  /* Bright, optimistic Nestlé register, mirroring nestle.com: warm porcelain and
     white surfaces, a warm brown display ink, Nestlé blue as the primary
     interactive colour, and bold full-bleed colour bands (blue / green / teal /
     magenta / sage) used sparingly as punctuation via [data-tone] on the page. */
  --bg: #F8F6F2;            /* light warm beige (Nestlé), airy near-white */
  --bg-2: #F1EEE8;          /* slightly deeper beige (TOC rail / washes) */
  --surface: #FFFFFF;       /* white card, lifted off the beige by shadow */
  --surface-2: #F1EEE8;     /* soft beige for nested panels / diagram fills */
  --line: rgba(42,41,37,0.14);     /* warm hairline */
  --line-strong: rgba(42,41,37,0.24);
  --text: #2A2925;          /* warm charcoal body */
  --text-dim: #5A5247;
  --text-mute: #8A8276;
  --blue: #0A7BC0;          /* Nestlé blue (engine uses --blue for filled bands + diagrams) */
  --blue-deep: #075A8E;     /* deeper blue, gradient end */
  --magenta: #0A7BC0;       /* aliased to blue: the engine's accent role is blue here */
  --accent: #0A7BC0;        /* Nestlé blue: CTAs, kickers, markers, left-borders, links, prices */
  --ink: #2A2925;
  --gold: #0A7BC0;          /* blue alias, used by the eyebrow rule below */
  /* Nestlé band palette, consumed by the [data-tone] band rules further down */
  --n-blue: #0A7BC0; --n-green: #2E8A2E; --n-teal: #0E7C8B;
  --n-magenta: #BE1E78; --n-sage: #93A9A5; --n-amber: #E08A1E;
  --n-brown: #3F3327; --n-taupe: #6E5D4C;
  --grad: linear-gradient(120deg, #0A7BC0, #075A8E);   /* Nestlé blue */
  --grad-blue: linear-gradient(120deg, #075A8E, #0A7BC0);
  --grad-soft: linear-gradient(120deg, rgba(10,123,192,0.08), rgba(46,138,46,0.05));
  --shadow: 0 14px 34px rgba(42,41,37,0.12);
  --font-head: "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}
/* solid warm-brown hero heading (no gradient text), mirroring the lgt + dws pattern */
[data-theme="nestle"] .hero h1 {
  background: none;
  -webkit-text-fill-color: var(--n-brown);
  color: var(--n-brown);
}
/* fresh blue + green glows tuned for the porcelain background */
[data-theme="nestle"] .hero {
  background: radial-gradient(1000px 520px at 18% -10%, rgba(10,123,192,0.10), transparent 60%),
              radial-gradient(900px 520px at 90% 0%, rgba(46,138,46,0.07), transparent 60%);
}
[data-theme="nestle"] .hero-glow {
  background: radial-gradient(620px 360px at 18% 8%, rgba(10,123,192,0.10), transparent 60%),
              radial-gradient(560px 360px at 88% 0%, rgba(46,138,46,0.07), transparent 60%);
}
[data-theme="nestle"] .gate {
  background-image: radial-gradient(1200px 600px at 50% -10%, rgba(10,123,192,0.12), transparent 70%);
}
[data-theme="nestle"] .fn-hero {
  background: radial-gradient(800px 360px at 10% -30%, rgba(10,123,192,0.08), transparent 60%);
}
[data-theme="nestle"] .logo-tile { background: #fff; }
[data-theme="nestle"] .cl-sig-img { mix-blend-mode: normal; filter: none; }
[data-theme="nestle"] .diagram { background: #fff; }

/* Nestlé display headings in warm brown (body text stays charcoal) */
[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(--n-brown); }

/* Clean humanist eyebrow / action title (no mono), eyebrow in Nestlé blue */
[data-theme="nestle"] .eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--accent);
}
[data-theme="nestle"] .action-title {
  font-family: var(--font-head);
}

/* =====================================================================
   ABERDEEN , monochrome canvas, deep-navy structure, muted-gold highlight,
   Inter throughout (already loaded by the engine). The bespoke diagrams paint
   from these variables, so they re-skin automatically. Near-black headings,
   no gradient fill, to suit the minimalist lowercase "aberdeen" wordmark.
   ===================================================================== */
[data-theme="aberdeen"] {
  --bg: #F6F6F4; --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-2: #EFEFEC;
  --line: rgba(14,14,14,0.12); --line-strong: rgba(14,14,14,0.22);
  --text: #0E0E0E; --text-dim: #3A3A3A; --text-mute: #76746E;
  --blue: #16263F; --blue-deep: #0E1A2B;        /* deep navy, the structural accent */
  --magenta: #5A6678;                            /* slate, for neutral highlight */
  --accent: #A4863F;                             /* muted gold, the positive route */
  --ink: #0E0E0E; --gold: #A4863F;
  --n-blue: #16263F; --n-green: #1E1E1E; --n-teal: #18303A; --n-magenta: #2A2630; --n-sage: #8A8A82;
  --grad: linear-gradient(120deg, #16263F, #A4863F);
  --grad-blue: linear-gradient(120deg, #0E1A2B, #16263F);
  --grad-soft: linear-gradient(120deg, rgba(22,38,63,0.07), rgba(164,134,63,0.06));
  --shadow: 0 14px 34px rgba(14,14,14,0.10);
  --font-head: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}
/* near-black head, no gradient fill, to suit the minimalist wordmark */
[data-theme="aberdeen"] .hero h1 { background: none; color: var(--text); -webkit-text-fill-color: var(--text); }
/* white tiles on the white canvas, read by a hairline (lgt / dws / nestle pattern) */
[data-theme="aberdeen"] .logo-tile { background: #fff; }
[data-theme="aberdeen"] .diagram { background: #fff; }
[data-theme="aberdeen"] .cl-sig-img { mix-blend-mode: multiply; filter: none; }
/* What We Heard: the read-back intro spans the full content width, not the narrow lead column */
[data-theme="aberdeen"] .page[data-page="understood"] .lead { max-width: none; }
[data-theme="aberdeen"] .page[data-page="start"] .lead { max-width: none; }
/* Outcome cards can carry a small gradient icon badge (engine: results() renders o.icon raw) */
.oc-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px; background: var(--grad); color: #fff; }
.oc-ico svg { width: 22px; height: 22px; }
/* one-pager: aberdeen prices exactly two pathways, so fill the row as two equal cards */
[data-theme="aberdeen"] .op-paths { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { [data-theme="aberdeen"] .op-paths { grid-template-columns: 1fr; } }

/* ===== Nestlé colour, as boxes (never full-bleed bands) =====================
   Beige stays the page background everywhere. Colour appears only as the
   occasional box of varying size, a stat panel, a featured "bucket" card, an
   accent note, one larger block, mostly blue / teal with occasional magenta /
   green. Each is targeted by [data-page] so it lands on one chosen spot, and
   white text is re-asserted inside each coloured box. */

/* 1. Us on a Page: the metrics become a blue "in numbers" panel (half-bleed). */
[data-theme="nestle"] .page[data-page="one-pager"] .op-metrics {
  background: var(--n-blue); border-radius: var(--radius); padding: 24px 26px;
  box-shadow: 0 16px 40px rgba(10,123,192,0.22);
}
[data-theme="nestle"] .page[data-page="one-pager"] .op-metric { background: transparent; border: none; padding: 6px 8px; }
/* the metric numbers use gradient text-fill by default; force solid white on the blue panel */
[data-theme="nestle"] .page[data-page="one-pager"] .op-metric-n { color: #fff; background: none; -webkit-text-fill-color: #fff; }
[data-theme="nestle"] .page[data-page="one-pager"] .op-metric-l { color: rgba(255,255,255,0.9); }
[data-theme="nestle"] .page[data-page="one-pager"] .op-metric-ic { color: #fff; }

/* 2. What We Heard: the "why now" stats become a teal panel (half / quarter). */
[data-theme="nestle"] .page[data-page="overview"] .why-now {
  background: var(--n-teal); border: none;
  box-shadow: 0 16px 40px rgba(14,124,139,0.22);
}
[data-theme="nestle"] .page[data-page="overview"] .why-now .callout-h { color: #fff; }
/* the stat numbers use gradient text-fill by default; force solid white on the teal panel */
[data-theme="nestle"] .page[data-page="overview"] .why-now .whynow-stat { color: #fff; background: none; -webkit-text-fill-color: #fff; }
[data-theme="nestle"] .page[data-page="overview"] .why-now .whynow-card { background: transparent; border: none; }
[data-theme="nestle"] .page[data-page="overview"] .why-now .whynow-tx { color: rgba(255,255,255,0.92); }
[data-theme="nestle"] .page[data-page="overview"] .why-now .whynow-src { color: rgba(255,255,255,0.7); }

/* 3. Proof: the anchor proof stat becomes a single blue "bucket" chip. */
[data-theme="nestle"] .page[data-page="case-studies"] .proof-strip .proof-chip:first-child {
  background: var(--n-blue); border-color: transparent; border-left-color: rgba(255,255,255,0.5);
  box-shadow: 0 12px 30px rgba(10,123,192,0.22);
}
[data-theme="nestle"] .page[data-page="case-studies"] .proof-strip .proof-chip:first-child .proof-stat,
[data-theme="nestle"] .page[data-page="case-studies"] .proof-strip .proof-chip:first-child .proof-client { color: #fff; }
[data-theme="nestle"] .page[data-page="case-studies"] .proof-strip .proof-chip:first-child .proof-note { color: rgba(255,255,255,0.88); }

/* 4. Culture and the Quiet Binds: the middle context card becomes a magenta "bucket". */
[data-theme="nestle"] .page[data-page="tailoring"] .grid-2x2 .card:nth-child(2) {
  background: var(--n-magenta); border-color: transparent;
  box-shadow: 0 16px 40px rgba(190,30,120,0.22);
}
[data-theme="nestle"] .page[data-page="tailoring"] .grid-2x2 .card:nth-child(2) h4 { color: #fff; }
[data-theme="nestle"] .page[data-page="tailoring"] .grid-2x2 .card:nth-child(2) p { color: rgba(255,255,255,0.92); }
[data-theme="nestle"] .page[data-page="tailoring"] .grid-2x2 .card:nth-child(2) .card-bar { background: rgba(255,255,255,0.85); border-image: none; }

/* 5. The Company We Keep: the closing note becomes a green accent box. */
[data-theme="nestle"] .page[data-page="technology"] .tech-note { background: var(--n-green); border-color: transparent; }
[data-theme="nestle"] .page[data-page="technology"] .tech-note .uu-note-h { color: #fff; }
[data-theme="nestle"] .page[data-page="technology"] .tech-note p { color: rgba(255,255,255,0.92); }

/* 6. Next Steps: the whole content sits in one larger teal block on the beige. */
[data-theme="nestle"] .page[data-page="next-steps"] .section { background: transparent; border-top: none; }
[data-theme="nestle"] .page[data-page="next-steps"] .section-inner {
  background: var(--n-teal); border-radius: 20px; padding: 38px 42px; color: #fff;
  box-shadow: 0 18px 44px rgba(14,124,139,0.24);
}
[data-theme="nestle"] .page[data-page="next-steps"] .section-title,
[data-theme="nestle"] .page[data-page="next-steps"] .lead,
[data-theme="nestle"] .page[data-page="next-steps"] .step-title { color: #fff; }
[data-theme="nestle"] .page[data-page="next-steps"] .eyebrow { color: rgba(255,255,255,0.85); }
[data-theme="nestle"] .page[data-page="next-steps"] .step-n { background: rgba(255,255,255,0.18); color: #fff; }
[data-theme="nestle"] .page[data-page="next-steps"] .contact {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3);
}
[data-theme="nestle"] .page[data-page="next-steps"] .contact strong,
[data-theme="nestle"] .page[data-page="next-steps"] .contact span { color: #fff; }
[data-theme="nestle"] .page[data-page="next-steps"] .contact-wa { color: #fff; border-color: rgba(255,255,255,0.6); }

/* ===== Barclays proposal theme (light blue-grey canvas, Barclays navy + cyan) =====
   Light blue-grey canvas, Barclays deep navy as the structural accent, Barclays cyan as
   the positive route, Inter throughout (already loaded by the engine). The three bespoke
   diagrams reference these variables, so they paint in brand automatically. */
[data-theme="barclays"] {
  --bg: #F4F8FB;            /* light blue-grey canvas */
  --bg-2: #FFFFFF;          /* TOC rail / washes */
  --surface: #FFFFFF;       /* white cards */
  --surface-2: #EAF1F6;     /* soft blue-grey for nested panels / diagram fills */
  --line: rgba(14,26,43,0.12);        /* navy hairline on the light canvas */
  --line-strong: rgba(14,26,43,0.22);
  --text: #0E1A2B;          /* deep navy ink */
  --text-dim: #33475B;
  --text-mute: #6B7B8C;
  --blue: #00395D;          /* Barclays deep navy: filled bands, headings, diagrams */
  --blue-deep: #002A45;     /* deeper navy, gradient end */
  --magenta: #5A6678;       /* slate: the engine's neutral link / accent role */
  --accent: #00AEEF;        /* Barclays cyan: CTAs, kickers, markers, left-borders, prices, the positive route */
  --ink: #0E1A2B;           /* button ink */
  --gold: #00AEEF;          /* cyan alias (used by the eyebrow rule in some themes) */
  /* band palette, consumed by the [data-page] band rules below */
  --n-blue: #00395D; --n-green: #0E1A2B; --n-teal: #006B8F; --n-magenta: #1B2A3A; --n-sage: #8A97A4;
  --grad: linear-gradient(120deg, #00395D, #00AEEF);          /* navy to cyan */
  --grad-blue: linear-gradient(120deg, #002A45, #00395D);
  --grad-soft: linear-gradient(120deg, rgba(0,57,93,0.08), rgba(0,174,239,0.05));
  --shadow: 0 14px 34px rgba(14,26,43,0.12);
  --font-head: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}
/* solid navy hero heading (no gradient text), mirroring the lgt / dws / nestle pattern */
[data-theme="barclays"] .hero h1 {
  background: none;
  -webkit-text-fill-color: var(--blue-deep);
  color: var(--blue-deep);
}
[data-theme="barclays"] .diagram { background: #fff; }
[data-theme="barclays"] .logo-tile { background: #fff; }

/* Next Steps (tone teal): the closing content sits in one filled teal block on the canvas,
   mirroring the Nestlé next-steps treatment. The page id is "next". */
[data-theme="barclays"] .page[data-page="next"] .section { background: transparent; border-top: none; }
[data-theme="barclays"] .page[data-page="next"] .section-inner {
  background: var(--n-teal); border-radius: 20px; padding: 38px 42px; color: #fff;
  box-shadow: 0 18px 44px rgba(0,57,93,0.24);
}
[data-theme="barclays"] .page[data-page="next"] .section-title,
[data-theme="barclays"] .page[data-page="next"] .lead,
[data-theme="barclays"] .page[data-page="next"] .step-title { color: #fff; }
[data-theme="barclays"] .page[data-page="next"] .eyebrow { color: rgba(255,255,255,0.85); }
[data-theme="barclays"] .page[data-page="next"] .step-n { background: rgba(255,255,255,0.18); color: #fff; }
[data-theme="barclays"] .page[data-page="next"] .contact {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3);
}
[data-theme="barclays"] .page[data-page="next"] .contact strong,
[data-theme="barclays"] .page[data-page="next"] .contact span { color: #fff; }
[data-theme="barclays"] .page[data-page="next"] .contact-wa { color: #fff; border-color: rgba(255,255,255,0.6); }

/* Proof / Case studies (appendix): a navy eyebrow accent as light punctuation. */
[data-theme="barclays"] .page[data-page="case-studies"] .eyebrow { color: var(--n-blue); }

/* Exactly two priced pathways: fill the row as two equal cards on both the one-pager
   (.op-paths is a 3-col grid by default) and the Commercials page (.path-grid). */
[data-theme="barclays"] .op-paths { grid-template-columns: 1fr 1fr; }
[data-theme="barclays"] .path-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) {
  [data-theme="barclays"] .op-paths,
  [data-theme="barclays"] .path-grid { grid-template-columns: 1fr; }
}

/* Commercials cards: bring the body text up to the size used on the other pages
   (.path-head has no size and inherits ~1rem, smaller than the 1.16rem .lead). */
[data-theme="barclays"] .path-card .path-head { font-size: 1.1rem; }
[data-theme="barclays"] .path-card > p { font-size: 1.02rem; line-height: 1.55; }
[data-theme="barclays"] .path-card .incl ul { font-size: 0.95rem; }

/* =====================================================================
 * FINAL UPGRADE house theme: our own pink identity for the deck. A
 * confident near-black ink base with porcelain-on-dark surfaces and the
 * canonical Final Upgrade pink (#FF2DB6, from public/favicon-nestle.svg)
 * carrying accents, headings and filled bands. Deliberately the inverse
 * of the light Nestlé theme so the two read clearly apart. Same full
 * token set as the nestle block so nothing renders unstyled.
 * ===================================================================== */
[data-theme="upgrade"] {
  --bg: #11151A;            /* near-black ink base */
  --bg-2: #0C0F13;          /* deeper base for washes */
  --surface: #1A1F26;       /* raised panel on the ink */
  --surface-2: #232A33;     /* nested panels / diagram fills */
  --line: rgba(255,255,255,0.12);     /* crisp light hairline on dark */
  --line-strong: rgba(255,255,255,0.22);
  --text: #F4EEF5;          /* near-white ink, faint pink warmth */
  --text-dim: #C6BECB;
  --text-mute: #8E8694;
  --blue: #FF5CC6;          /* bright pink (engine uses --blue for headings + filled bands) */
  --blue-deep: #D81E9C;     /* deeper pink, deep bands + gradient end */
  --magenta: #FF2DB6;       /* the canonical Final Upgrade pink */
  --accent: #FF2DB6;        /* FU pink: CTAs, kickers, markers, left-borders, links */
  --ink: #F4EEF5;
  --gold: #FF5CC6;          /* pink alias for the eyebrow rule below */
  --grad: linear-gradient(120deg, #FF2DB6, #D81E9C);   /* pink */
  --grad-blue: linear-gradient(120deg, #D81E9C, #FF2DB6);
  --grad-soft: linear-gradient(120deg, rgba(255,45,182,0.18), rgba(255,45,182,0.10));
  --shadow: 0 18px 46px rgba(0,0,0,0.55);
  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Newsreader", "Georgia", "Times New Roman", serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}
/* solid bright-pink hero heading (no gradient text), mirroring the nestle pattern */
[data-theme="upgrade"] .hero h1 {
  background: none;
  -webkit-text-fill-color: var(--blue);
  color: var(--blue);
}
/* pink glows tuned for the dark base */
[data-theme="upgrade"] .hero {
  background: radial-gradient(1000px 520px at 18% -10%, rgba(255,45,182,0.16), transparent 60%),
              radial-gradient(900px 520px at 90% 0%, rgba(216,30,156,0.14), transparent 60%);
}
[data-theme="upgrade"] .hero-glow {
  background: radial-gradient(620px 360px at 18% 8%, rgba(255,45,182,0.16), transparent 60%),
              radial-gradient(560px 360px at 88% 0%, rgba(216,30,156,0.12), transparent 60%);
}
[data-theme="upgrade"] .gate {
  background-image: radial-gradient(1200px 600px at 50% -10%, rgba(255,45,182,0.14), transparent 70%);
}
[data-theme="upgrade"] .fn-hero {
  background: radial-gradient(800px 360px at 10% -30%, rgba(255,45,182,0.12), transparent 60%);
}
[data-theme="upgrade"] .logo-tile { background: #fff; }
/* dark base: invert dark client signatures to read on the panel */
[data-theme="upgrade"] .cl-sig-img { mix-blend-mode: normal; filter: invert(1) brightness(1.5); }
[data-theme="upgrade"] .diagram { background: var(--surface); }
/* Nestlé credential nav (both themes): only the active page carries a fill.
   The two lead items keep a bold label but lose the persistent highlight and
   the filled badge, and the group micro-headers are pink text with no fill, so
   nothing competes with the page you are on. */
[data-theme="nestle"] .nav-li.nav-primary > a,
[data-theme="upgrade"] .nav-li.nav-primary > a,
[data-theme="barclays"] .nav-li.nav-primary > a { background: transparent; box-shadow: none; }
[data-theme="nestle"] .nav-li.nav-primary > a:not(.active) .nav-n,
[data-theme="upgrade"] .nav-li.nav-primary > a:not(.active) .nav-n,
[data-theme="barclays"] .nav-li.nav-primary > a:not(.active) .nav-n { background: var(--surface-2); color: var(--text-mute); border-color: var(--line); }
[data-theme="nestle"] .nav-group-head,
[data-theme="upgrade"] .nav-group-head { background: transparent; }
[data-theme="nestle"] .nav-li.in-group,
[data-theme="upgrade"] .nav-li.in-group { background: transparent; }

/* Final Upgrade headings in bright pink (body text stays near-white ink) */
[data-theme="upgrade"] .section-title,
[data-theme="upgrade"] h3, [data-theme="upgrade"] .sub-h,
[data-theme="upgrade"] .callout-h,
[data-theme="upgrade"] .card h4, [data-theme="upgrade"] .op-box-h,
[data-theme="upgrade"] .ba-head, [data-theme="upgrade"] .prog-day-label,
[data-theme="upgrade"] .day-tab-lab, [data-theme="upgrade"] .action-title,
[data-theme="upgrade"] .meth-item-h, [data-theme="upgrade"] .op-tile-label,
[data-theme="upgrade"] .ag-title { color: var(--blue); }

/* Label classes in Space Mono; eyebrow in pink */
[data-theme="upgrade"] .eyebrow {
  font-family: "Space Mono", ui-monospace, monospace;
  color: var(--gold);
}
[data-theme="upgrade"] .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); }
/* When a program is left unpicked, the price slot holds a muted "Pick a format"
   hint rather than a bare $0. */
.bk-path-price-empty { font: 600 0.82rem var(--font-head); color: var(--text-mute); }
.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; }

/* Commercials: the three selectable format boxes under each program card
   (single-select, and clicking the picked box again clears it so a program can
   be left unpicked), the in-person/virtual toggle inside the deep dive, and the
   Both-programs live math. */
.bk-fmts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bk-fmt { position: relative; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.bk-fmt:hover { border-color: var(--magenta); }
.bk-fmt.on { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta) inset; }
.bk-fmt-tag { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--magenta); font-weight: 700; }
.bk-fmt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bk-fmt-name { font: 600 0.88rem var(--font-head); flex: 1; min-width: 0; padding-left: 17px; text-indent: -17px; }
.bk-fmt-name::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-strong); margin-right: 7px; }
.bk-fmt.on .bk-fmt-name::before { background: var(--magenta); border-color: var(--magenta); }
.bk-fmt-price { flex: none; font: 700 0.95rem var(--font-head); color: var(--text); white-space: nowrap; }
.bk-fmt-pricenote { align-self: flex-end; margin-top: -2px; font-size: 0.66rem; color: var(--text-mute); text-align: right; }
.bk-fmt-meta { font-size: 0.72rem; color: var(--text-mute); }
.bk-fmt-detail { font-size: 0.76rem; color: var(--text-dim); }
.bk-fmt-vars { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.bk-fmt-var { font: 600 0.7rem var(--font-head); color: var(--text-dim); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: pointer; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; transition: border-color 0.12s, color 0.12s; }
.bk-fmt-var:hover { border-color: var(--magenta); }
.bk-fmt-var.on { border-color: var(--magenta); color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta) inset; }
.bk-fmt-per { font-size: 0.62rem; font-weight: 400; color: var(--text-mute); }
.bk-both-math { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.bk-both-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; color: var(--text-dim); }
.bk-both-row.disc { 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.
 * ===================================================================== */
/* Selector must out-specify `#app { margin-left: var(--toc-w) }` (the TOC
   allowance), the same way #app.deck-root does. As a plain .embed-root it lost
   to that ID rule and the fixed frame sat shifted right by the sidebar width:
   backdrop showing down the left, right edge off screen. */
#app.embed-root { position: fixed; inset: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; background: #15121C; }
.embed-frame { width: 100%; height: 100%; border: 0; display: block; }