/* Consenz portal character (owner: consenz). Sits on top of shared/css/tokens.css and components.css.
   Final look of the v39 components (not its v13-v36 cascade): dark gradient banners and hero, glass stat bands,
   studio rail + panel, feature rows, scenario story, capability map, review cycle, tour stage, insight cards,
   value calculator, integrations hub, Why Consenz cards, presenter navigation, print rules.
   No pointer-following motion: fades only. */
:root {
  --cz-navy: #072a5e; --cz-deep: #0049b4; --cz-blue: #0091ee; --cz-purple: #632cbd; --cz-orange: #ff7d1e; --cz-green: #427c2c;
  --cz-ai: #632cbd; --cz-ai-soft: #f1ebfb; --cz-blue-soft: #e8f0fb; --cz-orange-soft: #fff0e3; --cz-green-soft: #e9f4e4;
  --cz-ready: #2e7d32; --cz-road: #b45f06; --cz-cf: #9a5b00;
  --cz-banner: linear-gradient(125deg, #051d44, #072a5e 45%, #0049b4);
  --cz-hero: linear-gradient(160deg, #030f28, #051d44 40%, #0a3a86);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cz-ai-soft: #2a2140; --cz-blue-soft: #16253d; --cz-orange-soft: #33251a; --cz-green-soft: #1d2b1a; --cz-ai: #a98bf0; --cz-ready: #6cc070; --cz-road: #f0b35a; --cz-cf: #f0b35a; } }
:root[data-theme="dark"] { --cz-ai-soft: #2a2140; --cz-blue-soft: #16253d; --cz-orange-soft: #33251a; --cz-green-soft: #1d2b1a; --cz-ai: #a98bf0; --cz-ready: #6cc070; --cz-road: #f0b35a; --cz-cf: #f0b35a; }

.cz-page { max-width: 1320px; }
.cz-page .i, .cz-drawer .i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.14em; flex: none; }
/* --cz-vw = document client width (no scrollbar), kept by RS.cz.syncVw; 100vw would include the scrollbar (review A5). */
.cz-bleed { margin-left: calc(50% - var(--cz-vw, 100vw) / 2); margin-right: calc(50% - var(--cz-vw, 100vw) / 2); }
.cz-page { min-width: 0; overflow-wrap: anywhere; }
.cz-wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.cz-eyebrow { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; color: var(--accent); margin: 18px 0 6px; }
.cz-page h2, .cz-page .ovh { font-size: clamp(22px, 3vw, 30px); line-height: 1.2; margin: 0 0 8px; }
.cz-page .lede { color: var(--muted); max-width: 860px; margin: 0 0 16px; font-size: 16px; }
.cz-stmt { font-weight: 600; color: var(--muted); border-left: 3px solid var(--cz-blue); padding-left: 10px; }
.cz-sec { margin-top: 34px; scroll-margin-top: 80px; }
.cz-body > .cz-sec:first-child { margin-top: -38px; position: relative; z-index: 2; }
.cz-body > .cz-sec:first-child > .cz-stmt { color: #dbe7ff; border-color: #7cc8ff; }
.cz-rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.cz-rv.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cz-rv { opacity: 1; transform: none; transition: none; } }
.cz-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--c, var(--cz-deep)) 85%, #fff), var(--c, var(--cz-deep))); color: #fff; font-size: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px rgba(7,42,94,.18); flex: none; }
.cz-ico.sm { width: 30px; height: 30px; font-size: 16px; border-radius: 9px; }
.cz-ico.lg { width: 54px; height: 54px; font-size: 26px; border-radius: 15px; }
.cz-tag { display: inline-flex; gap: 3px; align-items: center; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; border: 1px solid currentColor; margin-left: 6px; vertical-align: 2px; }
.cz-tag.kind-ai { color: var(--cz-ai); background: var(--cz-ai-soft); }
.cz-tag.kind-man { color: var(--muted); }
.cz-tag.st-avail { color: var(--cz-ready); }
.cz-tag.st-unset { color: var(--cz-road); }
.chip.ai { border-color: var(--cz-ai); color: var(--cz-ai); background: var(--cz-ai-soft); }
.chip.blue { border-color: var(--cz-blue); color: var(--accent); background: var(--cz-blue-soft); }
.chip.core { border-color: var(--c); font-weight: 700; }
.chip.missing { border-style: dashed; color: var(--danger); }
a.chip:hover, button.chip:hover { filter: brightness(1.05); text-decoration: underline; }
button.chip { cursor: pointer; font: inherit; font-size: 12px; }
.rdpill { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 9px; margin-left: 6px; }
.rdpill.rd-ready { background: var(--cz-green-soft); color: var(--cz-ready); border: 1px solid var(--cz-ready); }
.rdpill.rd-road { background: var(--cz-orange-soft); color: var(--cz-road); border: 1px solid var(--cz-road); }
.rdpill .cf { margin-right: 0; }
.legend { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.legend .ok { color: var(--cz-ready); } .legend .road { color: var(--cz-road); }
.cz-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; margin-top: 14px; }
.cz-grid3 .card { margin-top: 0; } .cz-grid3 .card p { margin: 6px 0 10px; }
.btn.light { background: #fff; color: var(--cz-navy); border-color: #fff; }
.btn.ghost-l { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn .i { margin-left: 4px; }
.linkbtn { background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.banner.cz-uncleared { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: var(--ink); }
.banner.cz-uncleared b { color: var(--danger); }
.banner.cz-internal { margin: 0 0 14px; }
.cz-unc { display: inline-block; font-size: 11px; font-weight: 700; color: var(--danger); border: 1px solid var(--danger); border-radius: 999px; padding: 0 8px; margin: 2px 0 6px; }

/* ---------- banner ---------- */
.cz-head { background: var(--cz-banner); color: #fff; margin-top: -20px; padding: 44px 0 70px; position: relative; overflow: hidden; }
.cz-head::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(124,200,255,.25), transparent 70%); pointer-events: none; }
.cz-head h1, .cz-head .cz-title { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.12; margin: 4px 0 10px; max-width: 900px; }
.cz-head p { color: #d6e4ff; max-width: 820px; font-size: 16.5px; margin: 0; }
.cz-head .cz-eyebrow { color: #7cc8ff; margin-top: 0; }

.cz-fsback { display: none; margin-bottom: 12px; }
html.is-fullscreen .cz-fsback { display: inline-flex; }
.cz-agentshead .cz-head { margin-bottom: 16px; padding-bottom: 40px; }

/* ---------- stat band ---------- */
.cz-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); }
.cz-stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: none; border: 0; text-align: left; color: var(--ink); font: inherit; }
.cz-stat .cz-ico { grid-row: span 2; }
.cz-stat b { font-size: 26px; line-height: 1.05; color: var(--accent); }
.cz-stat.ai b { color: var(--cz-ai); } .cz-stat.ai .cz-ico { --c: var(--cz-purple); }
.cz-stat > span:last-child { font-size: 13px; color: var(--muted); min-width: 0; }
.cz-stat { min-width: 0; }
button.cz-stat { cursor: pointer; } button.cz-stat:hover { background: var(--soft); } button.cz-stat.on { background: var(--cz-blue-soft); outline: 2px solid var(--cz-blue); }

/* ---------- hero ---------- */
.cz-hero { background: var(--cz-hero); color: #fff; margin-top: -20px; padding: 48px 0 64px; position: relative; overflow: hidden; }
.cz-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 80% 20%, rgba(99,44,189,.35), transparent 70%), radial-gradient(500px 280px at 10% 90%, rgba(0,145,238,.25), transparent 70%); pointer-events: none; }
.cz-hero .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; align-items: center; position: relative; }
.cz-hero .kick { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .4px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); padding: 4px 12px; border-radius: 999px; }
.cz-hero h1 { overflow-wrap: anywhere; font-size: clamp(30px, 5vw, 52px); line-height: 1.05; margin: 16px 0 10px; }
.cz-hero h1 em { font-style: normal; background: linear-gradient(90deg, #7cc8ff, #c9b0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cz-hero .principle-line { font-size: 18px; font-weight: 700; color: #bfe3ff; margin: 0 0 8px; }
.cz-hero .sub { color: #d6e4ff; margin: 0 0 18px; }
.cz-hero .cta { display: flex; flex-wrap: wrap; gap: 10px; }
.cz-hero .cta .btn { padding: 9px 18px; font-size: 14px; }
.cz-hero .trio { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cz-hero .trio span { font-size: 12.5px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 3px 10px; color: #e3ecff; }
.hlane { position: relative; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.35); min-width: 0; }
.hl-sample { position: absolute; top: -10px; right: 14px; font-size: 11px; background: #ffbd2e; color: #2a1a00; border-radius: 999px; padding: 1px 9px; font-weight: 700; }
.hpbody { transition: opacity .45s var(--ease); } .hpbody.out { opacity: 0; }
.hlhd { display: flex; gap: 10px; align-items: flex-start; }
.hlhd .hlic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #0091ee; font-size: 18px; flex: none; }
.hlhd b { display: block; font-size: 15px; } .hlhd small { display: block; color: #c4d4f0; font-size: 12px; }
.hlhd em { flex: none; white-space: nowrap; margin-left: auto; font-style: normal; font-size: 12px; background: rgba(255,255,255,.14); padding: 1px 8px; border-radius: 999px; }
.hlboard { position: relative; margin-top: 12px; border-radius: 12px; overflow: hidden; }
.hllanes { display: grid; grid-template-rows: repeat(3, 78px); }
.hllane { border-top: 1px dashed rgba(255,255,255,.18); display: flex; align-items: flex-start; padding: 4px 8px; }
.hllane span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: #9fb6dd; display: inline-flex; gap: 5px; align-items: center; }
.hllane.p span { color: #c9b0ff; } .hllane.g span { color: #9be08c; }
.hlgrid { position: absolute; inset: 0; }
.hllink { position: absolute; inset: 0; width: 100%; height: 100%; }
.hllink path { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 2; } .hllink path.done { stroke: #7cc8ff; }
.hlnode { position: absolute; transform: translate(-50%, -10%); text-align: center; width: 18%; }
.hlnode i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); }
.hlnode.done i { background: #0091ee; border-color: #0091ee; } .hlnode.now i { background: #ffbd2e; color: #2a1a00; border-color: #ffbd2e; box-shadow: 0 0 0 4px rgba(255,189,46,.25); }
.hlnode b, .hlnode small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hlnode b { font-size: 11px; line-height: 1.2; } .hlnode small { font-size: 10px; color: #b5c6e6; }
.hlledger { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 11.5px; }
.hlledger .hllab { display: inline-flex; gap: 4px; align-items: center; color: #9be08c; font-weight: 700; }
.hlledger .ev { background: rgba(155,224,140,.15); border: 1px solid rgba(155,224,140,.4); border-radius: 999px; padding: 0 8px; } .hlledger .ev.none { opacity: .7; }
.hlledger .hlk { width: 100%; color: #c4d4f0; }
.hdots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.hdots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.hdots button.on { background: #fff; width: 22px; border-radius: 6px; }
.cz-ov .cz-sec:first-child { margin-top: -30px; position: relative; z-index: 2; }
.cz-ov .cz-sec:first-child .cz-stmt { color: #dbe7ff; border-color: #7cc8ff; }
.pitch p { font-size: 19px; line-height: 1.55; max-width: 980px; margin: 0; } .pitch em { color: var(--accent); font-style: normal; font-weight: 700; }

/* ---------- overview blocks ---------- */
.ovidx { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 26px; border-top: 1px solid var(--line); }
.oix { display: flex; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.oix .num { flex: none; white-space: nowrap; font-size: 40px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--c); }
.oix b { display: block; font-size: 17px; border-left: 3px solid var(--c); padding-left: 8px; } .oix em { display: block; color: var(--muted); margin: 4px 0; padding-left: 11px; }
.oix i { font-style: normal; font-size: 12.5px; color: var(--accent); padding-left: 11px; } .oix:hover b { color: var(--c); }
.pfeat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.pfc { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 14px; padding: 12px; }
.pfh { display: flex; gap: 10px; align-items: center; width: 100%; background: none; border: 0; text-align: left; color: var(--ink); cursor: pointer; padding: 4px; font: inherit; }
.pfh .pfn { font-size: 22px; font-weight: 700; color: var(--c); } .pfh b { display: block; font-size: 16px; } .pfh small { color: var(--muted); font-size: 12.5px; }
.pfh > i { margin-left: auto; font-style: normal; font-size: 12px; color: var(--c); border: 1px solid var(--c); border-radius: 999px; padding: 0 8px; }
.pfls { display: grid; gap: 4px; margin-top: 8px; }
.pfl { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.pfl:hover { background: var(--soft); } .pfl .cz-ico { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
.pfl .t b { display: block; font-size: 14px; } .pfl .t small { color: var(--muted); font-size: 12px; } .pfl > .i { margin-left: auto; color: var(--muted); }
.pfnote { font-size: 13px; color: var(--muted); margin: 8px 4px 0; }
.aistrip { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: var(--cz-ai-soft); border: 1px solid var(--cz-ai); text-decoration: none; color: var(--ink); }
.aistrip .cz-ico { --c: var(--cz-purple); } .aistrip b { display: block; } .aistrip small { color: var(--muted); } .aistrip > i { margin-left: auto; font-style: normal; color: var(--cz-ai); font-weight: 700; white-space: nowrap; }
.pfmore { margin-top: 14px; }
.newsgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 16px; }
.news { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--nc, var(--cz-blue)); border-radius: 14px; padding: 16px; color: var(--ink); text-decoration: none; font: inherit; cursor: pointer; }
.news.t-case { --nc: #ff7d1e; } .news.t-blog { --nc: #0091ee; } .news.t-paper { --nc: #427c2c; } .news.t-video { --nc: #d6336c; } .news.t-event { --nc: #632cbd; }
.news.uncleared { outline: 2px dashed var(--danger); }
.news b { font-size: 16.5px; line-height: 1.25; } .news p { margin: 0; color: var(--muted); font-size: 14px; }
.news .more { margin-top: auto; font-style: normal; font-weight: 700; color: var(--accent); font-size: 13px; }
.cz-ntype { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--nc, var(--accent)); width: 100%; }
.cz-ntype .cz-ico { --c: var(--nc, var(--cz-blue)); } .cz-ntype em { margin-left: auto; font-style: normal; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.value-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; }
.value-kpi { text-align: left; background: linear-gradient(160deg, #051d44, #0a3a86); color: #fff; border: 0; border-radius: 16px; padding: 18px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 4px; }
.value-kpi .vk-num { font-size: 40px; font-weight: 700; line-height: 1; } .value-kpi .vk-lab { color: #c4d4f0; font-size: 13px; }
.value-kpi h4 { margin: 10px 0 0; font-size: 17px; } .value-kpi p { margin: 0; color: #d6e4ff; font-size: 14px; } .value-kpi .vk-src { margin-top: auto; padding-top: 10px; font-size: 12px; color: #9fb6dd; } .value-kpi .vk-link { color: #7cc8ff; }
.roi-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 16px; padding: 14px 18px; border: 1px dashed var(--cz-blue); border-radius: 14px; }
.roi-cta p { margin: 0; font-weight: 600; }
.closing { background: var(--cz-banner); color: #fff; border-radius: 20px; padding: 32px; text-align: center; }
.closing h2 { color: #fff; } .closing p { color: #d6e4ff; } .closing .cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- studio (scenarios, features) ---------- */
.studio { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
/* static at every width: the only sticky element allowed is the unsaved-changes bar (round 2 spec 3, review C2-2A-1) */
.srail { display: grid; gap: 6px; }
.sbtn { display: flex; gap: 10px; align-items: center; text-align: left; width: 100%; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 12px; padding: 9px 10px; color: var(--ink); cursor: pointer; font: inherit; }
.sbtn b { display: block; font-size: 14px; line-height: 1.2; } .sbtn small { color: var(--muted); font-size: 12px; }
.sbtn.on { background: color-mix(in srgb, var(--c) 12%, var(--surface)); border-color: var(--c); box-shadow: var(--shadow); }
.sico2 { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--c); color: #fff; font-size: 15px; flex: none; }
.pgroup { display: grid; gap: 5px; padding: 6px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); }
.pghead { display: flex; gap: 8px; align-items: center; background: none; border: 0; text-align: left; color: var(--ink); padding: 4px; cursor: pointer; font: inherit; }
.pghead .pgn { font-weight: 700; color: var(--c); font-size: 18px; } .pghead b { display: block; font-size: 13.5px; } .pghead small { font-size: 11.5px; color: var(--muted); }
.spanel { margin-top: 0; border-top: 4px solid var(--c); padding: 0; overflow: hidden; }
.ahead, .schead { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 18px; background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
.schead { justify-content: flex-start; }
.aht { display: flex; gap: 14px; align-items: flex-start; flex: 1 1 380px; } .aht .cz-ico, .schead .cz-ico { --c: inherit; background: var(--c); }
.ahead small, .schead small { color: var(--muted); font-size: 12.5px; } .ahead h3, .schead h3 { margin: 2px 0 6px; font-size: 22px; } .ahead p, .schead p { margin: 0; color: var(--muted); }
.pglink { background: none; border: 0; padding: 0; color: var(--c); font-weight: 700; cursor: pointer; font: inherit; font-size: 12.5px; }
.astats { display: grid; grid-template-columns: repeat(4, minmax(70px, 1fr)); gap: 8px; }
.astats div { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; text-align: center; } .astats b { display: block; font-size: 22px; color: var(--accent); } .astats span { font-size: 11.5px; color: var(--muted); }
.astats .ai b { color: var(--cz-ai); } .astats .ok b { color: var(--cz-ready); }
.abar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.abar .tools { margin: 0; } .count { font-size: 12.5px; color: var(--muted); }
.rdkey .rdpill:first-child { margin-left: 0; }
.flist { display: grid; gap: 10px; padding: 14px 18px; }
.asub { padding: 0 18px; --c: var(--accent); color: var(--c); }
.frow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; border: 1px solid var(--line); border-left: 4px solid var(--cz-road); border-radius: 12px; padding: 12px; background: var(--surface); }
.frow.rd-ready { border-left-color: var(--cz-ready); }
.ftop { display: flex; gap: 10px; align-items: flex-start; } .fnum { font-size: 12px; color: var(--muted); font-weight: 700; padding-top: 4px; }
.tick { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--cz-blue-soft); color: var(--accent); flex: none; } .tick.ai { background: var(--cz-ai-soft); color: var(--cz-ai); }
.ftop b { font-size: 15px; } .ftags { display: inline; }
.fdesc { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.fagents { margin-top: 8px; } .fagents small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 4px; }
.fflow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 6px; align-items: stretch; }
.fflow.none { display: block; color: var(--muted); font-size: 13.5px; background: var(--soft); border-radius: 10px; padding: 10px; } .fflow.none p { margin: 0; }
.fst { border-radius: 10px; padding: 8px 10px; font-size: 13.5px; } .fst small { display: flex; gap: 4px; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: .7px; font-weight: 700; } .fst p { margin: 3px 0 0; }
.fst.s1 { background: var(--soft); } .fst.s1 small { color: var(--muted); }
.fst.s2 { background: var(--cz-ai-soft); } .fst.s2 small { color: var(--cz-ai); }
.fst.s3 { background: var(--cz-green-soft); } .fst.s3 small { color: var(--cz-ready); }
.fa { align-self: center; color: var(--muted); }
.afoot { display: grid; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); } .afoot small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.chip.scn { border-color: var(--c); }
.anav { display: flex; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); }
.anav button { display: flex; gap: 8px; align-items: center; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; cursor: pointer; color: var(--ink); text-align: left; font: inherit; }
.anav button:first-child .i { transform: rotate(180deg); } .anav button small { display: block; font-size: 11px; color: var(--muted); } .anav .nx { text-align: right; margin-left: auto; }
.cz-search { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; box-shadow: var(--shadow); }
.cz-search:focus-within { border-color: var(--accent2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 35%, transparent); }
.cz-search input { border: 0; background: transparent; flex: 1; font: inherit; font-size: 16px; padding: 6px 0; color: var(--ink); outline: none; min-width: 0; }
.cz-hits .hit { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.callout { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; background: var(--cz-banner); color: #fff; border: 0; }
.callout h3 { margin: 0 0 4px; } .callout p { color: #d6e4ff; }
.cz-intg { padding: 0 18px 10px; }
.hub { display: grid; grid-template-columns: 1fr 200px 1fr; gap: 16px; align-items: center; margin-top: 12px; }
.hubside h4 { margin: 10px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--c); }
.intg { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 10px; padding: 7px 10px; margin-bottom: 6px; background: var(--surface); }
.intg .mono { color: var(--c); font-size: 18px; } .intg b { display: block; font-size: 14px; } .intg span { font-size: 12.5px; color: var(--muted); }
.hubcore { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--cz-banner); color: #fff; text-align: center; box-shadow: 0 0 0 10px var(--cz-blue-soft); }
.hubcore img { width: 120px; display: block; margin: 0 auto 4px; } .hubcore small { color: #c4d4f0; font-size: 11px; }

/* ---------- scenario story ---------- */
.scbody { padding: 18px; }
.scq { margin: 0 0 14px; padding: 14px 18px; border-left: 4px solid var(--c); background: var(--soft); border-radius: 0 12px 12px 0; }
.scq p { margin: 0; font-size: 17px; font-style: italic; } .scq cite { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); font-style: normal; }
.sclead { margin: 0 0 6px; }
.scbody .flist { padding: 6px 0; }
.scflow { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 8px; }
.scflow li { display: grid; grid-template-columns: 30px auto 1fr; gap: 4px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.scflow .sn { grid-row: span 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--w); color: #fff; font-weight: 700; font-size: 13px; }
.scflow .who { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--w); } .scflow b { grid-column: 3; } .scflow p { margin: 0; grid-column: 2 / 4; color: var(--muted); font-size: 14px; } .scflow .chip { grid-column: 2 / 4; justify-self: start; }
.scout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; } .scout > div { background: var(--soft); border-radius: 12px; padding: 10px 12px; }
.scout small { display: flex; gap: 5px; align-items: center; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--accent); } .scout ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.sccap { display: grid; gap: 10px; } .scbars { display: grid; gap: 6px; }
.scbar { display: grid; grid-template-columns: 180px 1fr; gap: 10px; align-items: center; background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--ink); text-align: left; font: inherit; font-size: 13.5px; }
.scbar i { display: block; height: 10px; border-radius: 999px; background: var(--soft); overflow: hidden; } .scbar em { display: block; height: 100%; background: var(--c); border-radius: 999px; }
.scag { margin-top: 12px; }
.rcycle { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px; }
.rstep { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 12px; padding: 12px; }
.rstep .rn { font-size: 22px; font-weight: 700; color: var(--c); } .rstep b { display: block; } .rstep em { display: block; font-style: normal; font-size: 12px; color: var(--muted); } .rstep p { margin: 6px 0 0; font-size: 13.5px; }
.cmap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cmap table { border-collapse: collapse; width: 100%; min-width: 860px; font-size: 12.5px; }
.cmap th, .cmap td { border-bottom: 1px solid var(--line); padding: 6px; }
.cmp { color: var(--c); text-align: center; border-bottom: 3px solid var(--c) !important; }
.cma { vertical-align: bottom; height: 120px; } .cma a { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--ink); text-decoration: none; font-weight: 600; } .cma.first { border-left: 2px solid var(--line); }
.cms button { display: flex; gap: 8px; align-items: center; background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink); font: inherit; } .cms .n { font-weight: 700; color: var(--c); } .cms small { display: block; color: var(--muted); font-weight: 400; }
.cmap tr.on th, .cmap tr.on td { background: color-mix(in srgb, var(--c) 10%, transparent); }
.cmap td i { display: block; width: 18px; height: 18px; margin: auto; border-radius: 5px; }
.cm2 i { background: var(--c, var(--cz-deep)); } .cm1 i { background: color-mix(in srgb, var(--c, var(--cz-deep)) 35%, transparent); } .cm0 i { background: var(--soft); border: 1px solid var(--line); }
tr .cm2 i, tr .cm1 i { --c: inherit; }
.cmleg .k { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-left: 8px; } .cmleg .k2 { background: var(--cz-deep); } .cmleg .k1 { background: color-mix(in srgb, var(--cz-deep) 35%, transparent); } .cmleg .k0 { background: var(--soft); border: 1px solid var(--line); }

/* ---------- tour ---------- */
.tprog { display: flex; gap: 12px; align-items: center; } .tprogbar { flex: 1; height: 8px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); overflow: hidden; } .tprogbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cz-blue), var(--cz-purple)); transition: width .4s var(--ease); }
.tprog span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.story .storyhead { display: flex; gap: 12px; align-items: center; } .story h2 { margin: 0; } .story p { margin-top: 8px !important; font-size: 16px; }
.tour { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; margin-top: 16px; align-items: start; }
.tsteps { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.trhead { display: flex; gap: 10px; align-items: center; position: relative; margin-bottom: 10px; }
.ring { width: 44px; height: 44px; transform: rotate(-90deg); } .ring circle { fill: none; stroke: var(--soft); stroke-width: 4; } .ring .rv2 { stroke: var(--cz-blue); stroke-linecap: round; }
.rnum { position: absolute; left: 0; width: 44px; text-align: center; font-weight: 700; font-size: 13px; } .rnum em { font-style: normal; color: var(--muted); font-size: 10px; }
.trhead small { display: block; color: var(--muted); font-size: 11.5px; }
.trlist { display: grid; gap: 4px; }
.tstep { display: flex; gap: 8px; align-items: flex-start; text-align: left; background: none; border: 0; border-radius: 10px; padding: 7px; cursor: pointer; color: var(--ink); font: inherit; }
.tstep .n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); font-size: 11px; font-weight: 700; flex: none; }
.tstep.done .n { background: var(--cz-blue); color: #fff; border-color: var(--cz-blue); } .tstep.on { background: var(--cz-blue-soft); } .tstep.on .n { background: var(--cz-deep); color: #fff; border-color: var(--cz-deep); }
.tstep .tt b { font-size: 13.5px; } .tstep .tico { margin-right: 4px; color: var(--accent); } .tstep .tb { display: block; font-size: 12px; color: var(--muted); }
.tstage { background: linear-gradient(160deg, #061a3c, #0a2f6b); border-radius: 16px; padding: 16px; color: #fff; min-width: 0; }
.shotbox { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.chrome { display: flex; gap: 6px; align-items: center; padding: 7px 10px; background: #0b2247; } .chrome i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .chrome i:nth-child(2) { background: #febc2e; } .chrome i:nth-child(3) { background: #28c840; }
.chrome span { margin-left: 10px; font-size: 12px; color: #c4d4f0; display: inline-flex; gap: 5px; align-items: center; }
.shotimg { display: block; position: relative; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in; } .shotimg img { display: block; width: 100%; height: auto; animation: rs-fade .35s var(--ease) both; }
.zoomtag { position: absolute; right: 10px; bottom: 10px; background: rgba(7,42,94,.85); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.tcap { display: flex; gap: 10px; margin-top: 12px; } .tcap .tn { font-weight: 700; color: #7cc8ff; } .tcap b { display: block; } .tcap span { color: #c4d4f0; font-size: 14px; }
.thumbs { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; padding-bottom: 4px; }
.thumb { flex: 0 0 150px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 5px; cursor: pointer; color: #dbe7ff; text-align: left; font: inherit; font-size: 11.5px; }
.thumb img { display: block; width: 100%; height: 80px; object-fit: cover; object-position: top; border-radius: 6px; } .thumb.on { border-color: #7cc8ff; background: rgba(124,200,255,.15); }
.tnav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 14px; } .tnav small { color: var(--muted); }
.tfeat .chips { margin-top: 6px; }

/* ---------- insights, drawers ---------- */
.itband { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.cz-empty { text-align: center; padding: 40px; }
.drawer.cz-wide { width: min(760px, 100%); }
.cz-dhead { display: flex; gap: 12px; align-items: center; } .cz-dhead .cz-ico { background: var(--c); } .cz-dhead .cz-eyebrow { margin: 0; }
.cz-dlead, .cz-alead { font-size: 16px; margin: 12px 0 !important; } .cz-dp { margin: 0 0 8px !important; } .cz-dlist { margin: 4px 0 8px; padding-left: 18px; }
.cz-dlinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cz-art h3 { font-size: 24px; margin-top: 8px; }
.cz-where .cz-wlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .cz-where li a { font-weight: 700; color: var(--c); } .cz-where li span { display: block; font-size: 13px; color: var(--muted); }

/* ---------- value calculator ---------- */
.vrtop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.vrg { margin-bottom: 12px; } .vrl { display: flex; justify-content: space-between; } .vrl em { font-style: normal; color: var(--cz-ready); font-weight: 700; }
.vrr { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; margin-top: 4px; font-size: 13px; color: var(--muted); }
.vrr .bar { position: relative; height: 16px; background: var(--soft); border-radius: 999px; overflow: hidden; }
.vrr .bar i { position: absolute; top: 0; bottom: 0; left: var(--l, 0); width: var(--w); } .vrr i.today { background: #9aa4b2; } .vrr i.with { background: var(--cz-deep); } .vrr i.range { background: repeating-linear-gradient(45deg, var(--cz-blue), var(--cz-blue) 4px, transparent 4px, transparent 8px); } .vrr i.gain { background: #84d36c; }
.vrkey { font-size: 12.5px; color: var(--muted); } .vrkey i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin: 0 4px 0 10px; } .vrkey .k1 { background: var(--cz-deep); } .vrkey .k2 { background: var(--cz-blue); } .vrkey .k3 { background: #84d36c; }
.vrflow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-top: 14px; }
.vrflow > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; } .vrflow .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cz-deep); color: #fff; font-weight: 700; font-size: 12px; margin-right: 6px; } .vrflow p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.vcalc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.vshare { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.vshared, .vrow { display: grid; grid-template-columns: 200px minmax(80px, 1fr) 54px; gap: 10px; align-items: center; font-size: 13.5px; }
.vrow { grid-template-columns: 70px minmax(80px, 1fr) 30px auto; }
.vshared b, .vrow b { text-align: right; color: var(--accent); }
.vfams { display: grid; gap: 10px; margin-top: 10px; }
.vfam { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 12px; padding: 10px 12px; }
.vfh { display: flex; gap: 10px; align-items: center; } .vfh .cz-ico { background: var(--c); } .vfh b { display: block; font-size: 14px; } .vfh span { font-size: 12px; color: var(--muted); } .vfh em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
.vrows { display: grid; gap: 4px; margin-top: 8px; } .vh input { width: 60px; } .vh { font-size: 12px; color: var(--muted); white-space: nowrap; }
.vnote { font-size: 13px; color: var(--muted); }
.vout { margin-top: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; background: var(--soft); padding: 4px; border-radius: 999px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 999px; padding: 6px 10px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); } .seg button.on { background: var(--cz-deep); color: #fff; }
.bigres { margin: 14px 0; } .bigres small { color: var(--muted); } .bigres b { display: block; font-size: 38px; color: var(--accent); line-height: 1.1; } .bigres em { font-style: normal; font-size: 16px; color: var(--muted); } .rline { margin: 6px 0 0 !important; }
.vbyp { display: grid; gap: 6px; } .vbyp > div { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; }
.vbyp .bar { height: 8px; background: var(--soft); border-radius: 999px; overflow: hidden; } .vbyp .bar i { display: block; height: 100%; background: var(--c); } .vbyp em { font-style: normal; color: var(--muted); }
.rtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.rtiles > div { background: var(--soft); border-radius: 10px; padding: 10px; } .rtiles small { display: block; font-size: 11.5px; color: var(--muted); } .rtiles b { display: block; font-size: 20px; color: var(--accent); } .rtiles span { font-size: 12px; color: var(--muted); }
.rtiles .free b { color: var(--cz-ready); }
.vgov { margin-top: 12px; display: grid; gap: 6px; } .vgov > small { font-size: 12px; color: var(--muted); } .vgov > div { display: flex; gap: 8px; align-items: center; } .vgov p { margin: 0; font-size: 13px; } .vgov p b { display: block; }
.howcalc { margin-top: 14px; font-size: 13.5px; } .howcalc summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.cz-tablewrap { overflow-x: auto; } .lev { width: 100%; border-collapse: collapse; margin: 8px 0; } .lev th, .lev td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; } .lev .num { text-align: right; } .lev .tot td { font-weight: 700; }
.audrow { display: flex; flex-wrap: wrap; gap: 8px; }
.audrow button { display: flex; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 7px 10px; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--ink); }
.audrow button .cz-ico { background: var(--c); } .audrow button small { color: var(--muted); font-size: 11px; } .audrow button.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.audline { margin-top: 12px; border-left: 4px solid var(--c); padding: 8px 14px; } .audline .big { font-size: 18px; margin: 0 0 8px; }
.freebar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; background: var(--cz-banner); color: #fff; border-radius: 16px; padding: 16px 20px; }
.freebar b { display: block; } .freebar span { color: #d6e4ff; font-size: 14px; } .freebar .btn { margin-left: auto; }

/* ---------- presenter navigation ---------- */
#pnav { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px; box-shadow: var(--shadow-lg); }
#pnav button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--cz-deep); color: #fff; cursor: pointer; display: grid; place-items: center; }
#pnav button.off { opacity: .35; } #pnav .pn-c { font-size: 11px; color: var(--muted); min-height: 14px; }
#pnav.edge { animation: cz-shake .3s; }
@keyframes cz-shake { 25% { transform: translateY(-3px); } 75% { transform: translateY(3px); } }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .cz-hero .in, .vrtop, .vcalc { grid-template-columns: minmax(0, 1fr); }
  .studio, .tour { grid-template-columns: minmax(0, 1fr); }
  .srail { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
  .frow { grid-template-columns: minmax(0, 1fr); }
  .hub { grid-template-columns: 1fr; } .hubcore { width: 180px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .fflow { grid-template-columns: 1fr; } .fa { transform: rotate(90deg); justify-self: center; }
  .astats { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .vshared, .vrow { grid-template-columns: 1fr 44px; } .vshared label, .vrow label { grid-column: 1 / -1; } .vh { grid-column: 1 / -1; }
  .rtiles { grid-template-columns: 1fr; }
  .scbar { grid-template-columns: 1fr; }
  .scflow li { grid-template-columns: 30px 1fr; } .scflow b, .scflow p, .scflow .chip { grid-column: 2; }
  .hlnode b { font-size: 9.5px; } .hlnode small { display: none; }
  .cz-head { padding: 32px 0 60px; }
  #pnav { right: 8px; bottom: 8px; }
}

/* ---------- full screen ---------- */
html.is-fullscreen .rs-top { position: static; }

/* ---------- print ---------- */
@media print {
  .rs-top, .rs-banners, #pnav, .drawer, .lightbox, .toasts, .cz-search, .tnav, .anav, .hdots, .seg, .vin, .cz-fsback, .btn, .linkbtn { display: none !important; }
  .cz-head, .cz-hero, .closing, .callout, .freebar, .value-kpi, .tstage, .hubcore { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cz-rv { opacity: 1 !important; transform: none !important; }
  .card, .frow, .rstep, .news, .vfam, .pfc, .scflow li { break-inside: avoid; }
  
  .studio, .tour, .vcalc { grid-template-columns: 1fr; }
}

/* ---------- dark mode: readable coloured labels (review A2-7) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cz-page { --cz-tint: 55%; }
}
:root[data-theme="dark"] .cz-page { --cz-tint: 55%; }
.cz-page .cms .n, .cz-page .pfh .pfn, .cz-page .pghead .pgn, .cz-page .rstep .rn, .cz-page .cmp, .cz-page .hubside h4, .cz-page .asub, .cz-page .pglink, .cz-page .cz-where li a, .cz-page .intg .mono, .cz-page .oix:hover b {
  color: color-mix(in srgb, var(--c, var(--accent)) calc(100% - var(--cz-tint, 0%)), #fff);
}
.cz-page .scflow .who { color: color-mix(in srgb, var(--w) calc(100% - var(--cz-tint, 0%)), #fff); }
.cz-page .oix .num { -webkit-text-stroke-color: color-mix(in srgb, var(--c) calc(100% - var(--cz-tint, 0%)), #fff); }
/* ================= Round 2 (9 Oct 2026): banner art, no pop-ups, numbering fixes ================= */
/* ---------- page banner: grid floor, glows, narrow text column, static art in a glass frame ---------- */
.cz-head { isolation: isolate; }
.cz-head::before { content: ""; position: absolute; left: -10%; bottom: -60px; width: 60%; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(154,107,255,.35), transparent); pointer-events: none; z-index: -1; }
.cz-grid-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(124,200,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(124,200,255,.22) 1px, transparent 1px); background-size: 46px 46px;
  transform: perspective(420px) rotateX(58deg); transform-origin: bottom center; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 95%); mask-image: linear-gradient(to top, #000 10%, transparent 95%); }
.cz-headgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; position: relative; }
.cz-head.has-art .cz-headgrid { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
.cz-head.has-art .cz-headtext { max-width: 620px; }
.cz-artbox { justify-self: end; width: 100%; max-width: 440px; padding: 14px; border-radius: 18px; background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 18px 40px rgba(2,11,31,.35), inset 0 1px 0 rgba(255,255,255,.25); backdrop-filter: blur(4px); }
.cz-art-svg { display: block; width: 100%; height: auto; font-family: inherit; }
.cz-head-tinted { background: linear-gradient(125deg, #051d44, #072a5e 40%, color-mix(in srgb, var(--pc, #0049b4) 85%, #051d44)); }
@media (max-width: 900px) {
  .cz-head.has-art .cz-headgrid { grid-template-columns: minmax(0, 1fr); }
  .cz-artbox { justify-self: start; max-width: 420px; }
}
@media (max-width: 520px) { .cz-artbox { padding: 8px; } }

/* ---------- in-page status line (replaces toasts) ---------- */
.cz-status { position: relative; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--accent2); background: var(--surface); font-size: 14px; }
.cz-status.success { border-left-color: var(--ok); } .cz-status.warning { border-left-color: var(--warn); } .cz-status.error { border-left-color: var(--danger); color: var(--danger); }
.cz-head + .cz-status, .cz-hero + .cz-status { margin-top: -30px; margin-bottom: 44px; z-index: 3; box-shadow: var(--shadow-lg); }

/* ---------- numbers and counters never wrap (change list 3.3, 3.6, 4.6) ---------- */
.fnum, .pghead .pgn, .pfh .pfn, .tcap .tn, .cms .n, .rstep .rn, .scflow .sn, .tstep .n, .rnum { flex: none; white-space: nowrap; }
.fnum { min-width: 2ch; }
.tcap .tn { display: inline-block; min-width: 3.2em; text-align: center; padding: 1px 8px; border-radius: 999px; background: rgba(124,200,255,.16); height: fit-content; }

/* ---------- links that replaced drawer buttons keep their look ---------- */
a.pfh, a.pghead, a.scbar, a.value-kpi, a.news, a.pglink { text-decoration: none; color: inherit; }
a.pglink { color: var(--c); }
a.value-kpi { color: #fff; }
a.news:hover, a.value-kpi:hover, a.pfh:hover, a.pghead:hover { filter: brightness(1.04); }
.anav a { display: flex; gap: 8px; align-items: center; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; color: var(--ink); text-decoration: none; }
.anav a:first-child .i { transform: rotate(180deg); } .anav a small { display: block; font-size: 11px; color: var(--muted); } .anav a.nx { text-align: right; margin-left: auto; } .anav a.nx .i { transform: none; }
.cz-pnav { margin-top: 28px; padding: 0; border-top: 0; }

/* ---------- product, benefit and article pages ---------- */
.cz-back { margin: 18px 0 0; } .cz-back a { text-decoration: none; font-weight: 600; } .cz-back .i { transform: rotate(180deg); }
.cz-detail .cz-sec, .cz-article .cz-sec { max-width: 820px; }
.cz-detail h2, .cz-article h2 { font-size: 22px; margin: 0 0 8px; }
.cz-detail .cz-dlist li, .cz-article .cz-dlist li { margin: 4px 0; }
.cz-readcol { max-width: 760px; }
.cz-readcol .cz-dp { font-size: 16.5px; line-height: 1.6; }
.cz-tags { margin-top: 22px; }
.cz-detail .cz-body > .cz-sec:first-child, .cz-article > .cz-sec:first-child { margin-top: 24px; }
.cz-body.cz-detail > .cz-back, .cz-body.cz-article > .cz-back { position: relative; z-index: 2; }

/* ---------- tour: wide view in place (replaces the lightbox) ---------- */
.tour.zoomed { grid-template-columns: minmax(0, 1fr); }
.tzoombar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tour.zoomed .shotimg { cursor: zoom-out; }
.tour.zoomed .thumbs .thumb { flex-basis: 120px; }

/* ---------- presenter arrows: full-screen mode only (user decision 9 Oct) ---------- */
#pnav { display: none; }
html.is-fullscreen #pnav { display: flex; }

/* Co-brand (user request, 13 Oct 2026): the Applexus logo and a thin rule before the product logo, as in Runningstart. */
.rs-cobrand { display: flex; align-items: center; padding-right: 16px; border-right: 1px solid var(--line); }
.rs-cobrand .rs-applexus { height: 30px; width: auto; display: block; }
@media (max-width: 1350px) { .rs-cobrand { padding-right: 12px; } .rs-cobrand .rs-applexus { height: 24px; } }
@media (max-width: 760px) { .rs-cobrand { display: none; } }

/* Header full width (user request, 13 Oct 2026): the Applexus and product logos sit at the left edge, the tools at the
   right edge; the Admin row and notices use the same width so their right edges line up. */
.rs-top-in, .rs-adminrow-in, .rs-banners { max-width: none; padding-left: 24px; padding-right: 24px; }
@media (max-width: 760px) { .rs-top-in, .rs-adminrow-in, .rs-banners { padding-left: 16px; padding-right: 16px; } }

/* Menu right-aligned next to the tools, logos alone on the left, as in Runningstart (user request, 13 Oct 2026). */
@media (min-width: 761px) { .rs-top .rs-nav { justify-content: flex-end; } }