:root{
  --ink:#0E2440; --ink2:#16324F; --paper:#F4F7FA; --card:#FFFFFF;
  --teal:#149A7C; --teal-soft:#E3F5F0; --coral:#CE5127; --coral-soft:#FBEDE6;
  --amber:#B97F14; --amber-soft:#FAF1DD; --violet:#6A4FC0; --violet-soft:#EFEAFB;
  --tx:#22364E; --mut:#6B7E93; --line:#DCE5EE; --ice:#EAF1F8;
  /* SB-C.21 — two weights of divider, and they mean different things. `--line` is the
     HAIRLINE inside a thing: a table's rows, a card's edge. `--rule` is the SEPARATOR
     between things: one section and the next. A table drawn in --rule would read as a
     stack of sections, which is the confusion this pair exists to end. */
  --rule:#B8C6D6;
  --r:12px;
  --panel-wide:min(70vw,1180px);   /* SB-C.6.5c — the one wide-panel tier */
  /* ALM-2.3 — ONE entity palette (Star AM / Star Life / Nanovest / syndication / warehouse), used by
     the absorption + selling bars and the flow ribbons. Fill + ink pairs. */
  --e-am:#149A7C;    --e-am-soft:#E3F5F0;      /* Star AM       — teal   */
  --e-life:#6A4FC0;  --e-life-soft:#EFEAFB;    /* Star Life     — violet */
  --e-nano:#2A6FB0;  --e-nano-soft:#E6EFF8;    /* Nanovest      — blue   */
  --e-synd:#B97F14;  --e-synd-soft:#FAF1DD;    /* syndication   — amber  */
  --e-wh:#CE5127;    --e-wh-soft:#FBEDE6;      /* warehouse     — coral  */
  --e-unplaced:#E3EAF2;                        /* grey remainder in a stacked bar */
  /* I2j — CRM/S&M chart entity color tokens (exhibit-derived), SEPARATE from the ALM --e-* palette
     above (different exhibit, different colors). Single source of truth: every chart on the CRM and
     Sales & Marketing pages resolves color through these — see entityColor()/entityLegendRow() in
     helpers.js. Do not introduce a chart color on those two pages outside this set. */
  --ent-staram:#1F3864; --ent-starlife:#C9584C; --ent-aldira:#5B7DB1;
  --ent-sinarmas:#E39A6B; --ent-starwealth:#3E9C8B;
  --ent-absence:#C9584C;   /* dashed — absence/zero callouts */
  --ent-neutral:#A79C8F;   /* warm gray — unfunded/neutral */
  /* ALM-2.3 — one Bond Studio type scale + spacing rhythm */
  --alm-hero:30px; --alm-title:16px; --alm-card:13.5px; --alm-meta:11px;
  --alm-gap:16px; --alm-gap-sm:8px;
}
/* ===== ALM-2.3 Bond Studio type scale + journey-strip navigation ===== */
.alm-hero{font-family:'Sora',sans-serif;font-size:var(--alm-hero);font-weight:700;line-height:1.05;color:var(--ink)}
.alm-h2{font-size:var(--alm-title);font-weight:700;font-family:'Sora',sans-serif;color:var(--ink)}
.alm-meta{font-size:var(--alm-meta);color:var(--mut)}
.jnavrow{display:flex;gap:8px;align-items:stretch;margin:14px 0 10px;flex-wrap:wrap}
.jnavrow .jnav{margin:0;flex:1;min-width:260px}
.almback{flex:none;align-self:stretch;display:inline-flex;align-items:center;white-space:nowrap;
  font-size:12px;padding:0 14px;border-radius:10px}
.jnav{display:flex;gap:6px;align-items:stretch;margin:14px 0 10px;flex-wrap:wrap}
.jnav .step{flex:1;min-width:120px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;
  background:#fff;cursor:pointer;text-align:left;font-family:'IBM Plex Sans',sans-serif;
  display:flex;flex-direction:column;gap:3px;transition:border-color .15s,background .15s}
.jnav .step:hover{border-color:var(--mut)}
.jnav .step .n{display:inline-flex;width:17px;height:17px;flex:none;border-radius:50%;align-items:center;
  justify-content:center;font-size:9px;font-weight:700;background:var(--ice);color:var(--mut)}
.jnav .step .lb{font-size:12px;font-weight:600;color:var(--tx);display:flex;align-items:center;gap:6px}
.jnav .step .sub{font-size:10px;color:var(--mut)}
.jnav .step.on{background:var(--ink);border-color:var(--ink)}
.jnav .step.on .lb{color:#fff}.jnav .step.on .sub{color:rgba(255,255,255,.6)}
.jnav .step.on .n{background:#7FE0C8;color:var(--ink)}
.jnav .home{flex:none;min-width:0;padding:9px 14px;justify-content:center}
.jnav .home .lb{font-size:12px}
/* segmented Flow|Board toggle */
.almseg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.almseg button{all:unset;cursor:pointer;padding:6px 16px;font-size:12px;font-weight:600;color:var(--mut)}
.almseg button.on{background:var(--ink);color:#fff}
/* filter chips */
.almchip{all:unset;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:4px 12px;
  font-size:11px;font-weight:600;color:var(--mut);background:#fff}
.almchip.on{background:var(--teal-soft);border-color:#8FD3C2;color:#0C6B55}
/* equal-width kanban */
.almkanban{display:grid;grid-template-columns:1fr 1fr 0.6fr 1fr 1fr 1fr;gap:10px;align-items:start}
@media(max-width:1000px){.almkanban{display:flex;overflow-x:auto}.almkanban>div{min-width:180px}}
.tile.kpiclick{transition:border-color .15s,box-shadow .15s}
.tile.kpiclick:hover{border-color:var(--teal);box-shadow:0 2px 10px rgba(15,110,86,.12)}
.almkanban .col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-height:120px}
.almkanban .col.ext{background:transparent;border-style:dashed;opacity:.7}
.almkanban .col .emptyslot{border:1px dashed var(--line);border-radius:10px;padding:14px 8px;text-align:center;
  color:var(--mut);font-size:11px;background:var(--paper)}
.almkcard{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:#fff}
.almkcard .t{font-weight:700;font-size:13px;color:var(--ink);line-height:1.25}
.almkcard .m{font-size:12px;color:var(--tx);margin-top:4px}
.almkcard .foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:10px;color:var(--mut)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'IBM Plex Sans',sans-serif;background:var(--paper);color:var(--tx);font-size:14px}
h1,h2,h3,.num{font-family:'Sora',sans-serif}
.mono{font-family:'IBM Plex Mono',monospace}

#login{position:fixed;inset:0;background:linear-gradient(160deg,#0B1D35 0%,#0E2440 55%,#123354 100%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;z-index:50;padding:40px 24px;overflow:auto}
.wordmark{color:#fff;font-family:'Sora';font-weight:700;letter-spacing:.45em;font-size:15px}
.wordsub{color:#7FA0C4;letter-spacing:.3em;font-size:10px;margin-top:8px;text-transform:uppercase}
#login h1{color:#fff;font-size:26px;font-weight:700;margin-top:28px;text-align:center}
#login p.sub{color:#9DB6D2;margin-top:10px;text-align:center;max-width:600px;line-height:1.55}
/* H2 email/password sign-in */
.loginform{margin-top:32px;width:min(360px,100%);display:flex;flex-direction:column;gap:12px}
.loginform input{padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#fff;font-family:'IBM Plex Sans',sans-serif;font-size:14px}
.loginform input:focus{outline:none;border-color:#3FD3AC;background:rgba(255,255,255,.12)}
.loginform input::placeholder{color:#7FA0C4}
.btn.signin{width:100%;justify-content:center;padding:12px;font-size:14px;background:#149A7C;border-color:#149A7C;color:#fff;cursor:pointer}
.btn.signin:hover{background:#12876D}
.btn.signin:disabled{opacity:.6;cursor:default}
.loginerr{color:#F4A78C;font-size:13px;min-height:18px;text-align:center}
/* H2 user management */
.cred{background:var(--teal-soft);border:1px solid #8FD3C2;border-radius:10px;padding:12px 14px;margin-bottom:16px}
.cred code{background:#fff;border:1px solid #cfe6df;border-radius:6px;padding:3px 8px;font-family:'IBM Plex Mono',monospace;font-size:13px;user-select:all}
.userform{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.userform input,.userform select{padding:9px 12px;border-radius:9px;border:1px solid var(--line,#D7DEE6);font-family:'IBM Plex Sans',sans-serif;font-size:13px}
.userform .chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mut)}
tr.u-off td{opacity:.55}
.personas{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:13px;margin-top:32px;width:min(1140px,100%)}
.pcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:18px 16px;cursor:pointer;transition:.18s;color:#fff}
.pcard:hover{background:rgba(255,255,255,.11);border-color:#3FD3AC}
.pcard .av{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:'Sora';font-weight:700;font-size:12px;margin-bottom:11px}
.pcard h3{font-size:14.5px;line-height:1.35}
.pcard .role{color:#8FE7CC;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.pcard .desc{color:#A9BFD6;font-size:11px;margin-top:8px;line-height:1.5}
.scopebtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.scopebtns button{all:unset;cursor:pointer;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:7px;padding:5px 9px;font-size:10.5px;color:#DCE9F5}
.scopebtns button:hover{border-color:#3FD3AC;color:#fff}
.demo-note{color:#5F7A97;font-size:11px;margin-top:32px;text-align:center;line-height:1.6}

#app{display:none;min-height:100vh}
#app.on{display:grid;grid-template-columns:230px 1fr}
aside{background:var(--ink);color:#C6D6E6;padding:22px 14px;display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0;height:100vh;overflow:auto}
aside .wordmark{font-size:11px;letter-spacing:.35em;padding-left:10px}
aside .wordsub{padding-left:10px;font-size:9px}
nav{margin-top:28px;display:flex;flex-direction:column;gap:3px}
nav button{all:unset;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;cursor:pointer;font-size:13px;color:#B9CBDD;font-family:'IBM Plex Sans'}
nav button:hover{background:rgba(255,255,255,.07);color:#fff}
nav button.act{background:#1D4568;color:#fff;font-weight:600}
nav button .ic{width:17px;text-align:center;opacity:.85}
.sb-foot{margin-top:auto;font-size:10px;color:#597694;line-height:1.6;padding:10px}
/* SB-C.22.1 — the content area fills the window instead of sitting in a 1,240px column with dead
   space beside it, capped at 1920px so a line of body text never runs the width of an ultrawide.
   The design says "94% of the viewport"; here that is the SHELL's share, because a 230px sidebar
   and a 94vw content area cannot both fit in 100vw. `width:100%` fills whatever the grid column
   gives; the cap only bites past ~2050px, where the column is wider than 1920. Panels keep their
   own width tokens (`--panel-wide`, `.panel`) — a 360 is a reading surface, not a page. */
main{padding:28px 40px 80px;width:100%;max-width:min(1920px,94vw)}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.crumb{font-size:12px;color:var(--mut);letter-spacing:.12em;text-transform:uppercase}
.crumb b{color:var(--tx)}
.who{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge{background:var(--ink);color:#fff;border-radius:999px;padding:6px 14px;font-size:12px;display:flex;gap:8px;align-items:center}
.badge .dotv{width:8px;height:8px;border-radius:50%;background:#3FD3AC}
.logout{all:unset;cursor:pointer;font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:8px;padding:6px 12px;background:#fff}
.logout:hover{color:var(--tx)}
.lens{font-size:12px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--tx);font-family:'IBM Plex Sans'}
.lensbanner{background:var(--violet-soft);border:1px solid #D9D2F0;border-radius:10px;padding:9px 14px;font-size:12px;color:#4A3A8C;margin-bottom:18px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.demobanner{background:var(--amber-soft);border:1px solid #E8D6A8;border-radius:10px;padding:9px 14px;font-size:12px;color:#8A5D0D;margin-bottom:18px;font-weight:500}
.illus{display:inline-block;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;background:var(--amber-soft);color:#8A5D0D;border:1px dashed #C9A24A}
.aigen{display:inline-block;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;background:var(--violet-soft);color:#4B2E9E;border:1px solid #C9BCEB}
/* LIVE = web-fetched public data (D5) — green family, visually distinct from the amber CURATED badge;
   it is a link to the source page. */
.live{display:inline-block;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;background:var(--teal-soft);color:#0C6A54;border:1px solid #8FD3C2;text-decoration:none}
.live:hover{background:#D2EFE7}
/* SB-A.8 — "this cannot be computed from the source we have". Deliberately SLATE, not amber: it is
   not curated content and not a warning, it is an honest gap where a number would otherwise be
   fabricated. Sits on the governed persistency tile and on the Starlife persistency rate. */
.nocalc{display:inline-block;border-radius:999px;padding:3px 10px;font-size:10px;font-weight:700;
  letter-spacing:.04em;background:#F1F3F6;color:#4A5A6B;border:1px solid #BDC8D4}
/* a table row that loads a filter when clicked (Starlife channel rows) */
.clickrow:hover{background:var(--ice)}
/* SB-A.11 — the shared slide-in panel. One component serves Customer / Channel / Month / Cohort 360
   (and the Agent 360 on S&M later). Geometry and motion match the Agent 360 in
   docs/prototype/synergy_brain_sales_marketing_demo.html: right slide-in, SCRIM-LESS, 200ms,
   translateX(105%) when closed so the shadow does not bleed at the page edge, ✕ top-right, Esc.

   Two deliberate departures, both additive: a PINNED header (the demo scrolls everything, but these
   panels run long — the cohort 360 is a hundred rows — and ✕ and Back must stay reachable), and
   prefers-reduced-motion. A panel may open from INSIDE another panel, so the header carries a back
   control and the stack lives in JS, not in the DOM. */
/* SB-C.6.5c — ONE width tier for every 360 that needs room, as a token rather than a per-panel
   override: four overrides drift, and a panel whose width depends on who opened it is a panel that
   looks broken when opened from somewhere new. The Agent 360 and the Star Wealth RM 360 both carry
   four- and three-tab working surfaces; at 92vw they were effectively full-screen, which reads as a
   page rather than as a panel over the page you came from. 70% of the viewport, capped so it does
   not become a 2,600px line of text on an ultrawide. */
.panel.wide{width:var(--panel-wide)}
.panel{position:fixed;top:0;right:0;width:min(760px,100%);height:100%;background:var(--paper);
  border-left:1px solid var(--line);box-shadow:-10px 0 30px rgba(14,36,64,.15);z-index:50;
  transform:translateX(105%);transition:transform .2s;display:flex;flex-direction:column;
  box-sizing:border-box;overflow:hidden}
.panel.on{transform:translateX(0)}
.panel .phead{flex:0 0 auto;background:#fff;border-bottom:1px solid var(--line);padding:16px 20px;
  display:flex;align-items:flex-start;gap:12px}
.panel .phead h3{font-size:17px;color:var(--ink);margin:0}
.panel .pbody{flex:1 1 auto;overflow-y:auto;color:var(--tx);
  padding:18px 20px calc(40px + env(safe-area-inset-bottom,0px))}
.panel .pbody table td{color:var(--tx)}
.panel .pbody .klabel{color:var(--mut)}
/* SB-C.26.10 — A PANEL TABLE FITS THE PANEL. Every table in here was `table-layout:auto` with no
   column widths, so eight columns of rollover facts sized themselves to their content and pushed
   past the 760px panel; the body scrolls horizontally, which means the reader loses the "At
   renewal" column unless they think to drag. Fixed layout makes the declared widths the widths,
   and the overflow-wrap is what stops a long fund name reinstating the overflow one cell at a
   time. Width tokens stay on the columns, where the table that owns them can see them. */
.panel .pbody table{table-layout:fixed;width:100%}
.panel .pbody table td{overflow-wrap:anywhere}
/* A HEADER BREAKS BETWEEN WORDS, NEVER INSIDE ONE. `anywhere` on a th turned "OUTSTANDING" into
   "OUTSTANDI / NG": a column label a reader has to reassemble is worse than one that wraps. */
.panel .pbody table th{overflow-wrap:normal;word-break:normal;hyphens:none}
/* The status badge is `white-space:nowrap` so it never breaks mid-word in a wide table; in a
   760px panel "Surrendered · 2026-09-15" is wider than its column and pushed the whole body into
   a horizontal scroll. Inside a panel it wraps, and the left margin goes with it — a badge that
   starts a cell has nothing to sit beside. */
.panel .pbody .slstat{white-space:normal;margin-left:0}
.panel .pclose,.panel .pback{all:unset;cursor:pointer;border:1px solid var(--line);border-radius:8px;
  padding:5px 11px;font-size:12px;color:var(--mut);background:#fff;white-space:nowrap}
.panel .pclose:hover,.panel .pback:hover{border-color:var(--mut);color:var(--tx)}
@media (prefers-reduced-motion:reduce){.panel{transition:none}}
/* SB-A.13 — a governed figure's source + period. Neutral, not green: "LIVE" is reserved for blocks
   computed from the uploaded policy report, and a Jul-2026 scorecard is not live. */
.srcpill{display:inline-block;border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:600;
  letter-spacing:.03em;background:#EEF2F7;color:#4A5A6B;border:1px solid var(--line)}
/* SB-A.13 — builder controls in the app's input language: 40px, 1px line, 8px radius, Plex, and a
   drawn chevron so a <select> stops looking like a browser default beside the text inputs. */
.sgctl{display:block;width:100%;height:40px;box-sizing:border-box;padding:0 32px 0 11px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--tx);
  font-family:'IBM Plex Sans',sans-serif;font-size:13px;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7E93' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
input.sgctl{padding-right:11px;background-image:none}
.sgctl:focus{outline:none;border-color:var(--teal)}
.sggroup{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
/* SB-C.26 — THE BUILDER IS HORIZONTAL BANDS, one per group of questions. The column grid stacked
   six boxes of one dropdown each, so a reader scanned downward to find a filter and the page was
   taller than the result it previewed. A band is a LABEL with a one-word hint on the left and the
   dropdowns flowing across; tokens live here once, as rule 19's section tokens do. */
.sgband{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--ice)}
.sgband:last-of-type{border-bottom:0}
.sgband .sglbl{font-weight:600;font-size:13px;color:var(--ink);padding-top:9px}
.sgband .sglbl small{display:block;font-weight:400;color:var(--mut);font-size:12px;margin-top:2px}
.sgband .sgrow{display:flex;flex-wrap:wrap;gap:10px}
/* SB-C.26.10 — AND A CAP. `width:auto` on a <select> is the width of its LONGEST OPTION, and
   the income band reads "≥ IDR1 Bn (Star Wealth) · > IDR 500 Mn (Starlife)". One such control
   pushed the whole Segments tab 405px past the window at 1280 — the band wraps, but a single
   item wider than the row cannot. The cap truncates the control, never the choice: the option
   list opens at its own width. */
.sgband .sgctl{display:inline-block;width:auto;min-width:190px;max-width:260px}
/* A SET FILTER IS VISIBLY SET. Six "Any ..." dropdowns and one chosen value look identical at a
   glance, and a reader who cannot see which control is narrowing the result cannot trust the
   count under it. */
.sgctl.set{border-color:var(--teal);background-color:#E3F5F0}
@media(max-width:860px){.sgband{grid-template-columns:1fr;gap:4px}
  .sgband .sglbl{padding-top:0}}
/* panel sub-blocks */
.pmini{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.pmini .m{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.pmini .m .l{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.pmini .m .v{font-family:'Sora',sans-serif;font-size:19px;color:var(--ink);margin-top:3px}
.pmini .m .d{font-size:11px;color:var(--mut);margin-top:2px}
/* a labelled proportion bar (channel split, product mix, maturity windows) */
.mixbar{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--ice);margin-top:6px}
.mixbar span{display:block;height:100%}
.mixleg{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--mut);margin-top:6px}
.mixleg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
/* horizontal stacked wall row: month label | bar | total */
.wallrow{display:grid;grid-template-columns:62px 1fr 86px;gap:10px;align-items:center;font-size:12px;
  padding:3px 0}
.wallrow .bar{display:flex;height:17px;border-radius:4px;overflow:hidden;background:var(--ice)}
.wallrow .bar span{display:flex;align-items:center;justify-content:center;font-size:9.5px;color:#fff;
  font-weight:600;overflow:hidden;white-space:nowrap}
.wallrow.click{cursor:pointer;border-radius:6px}
.wallrow.click:hover{background:var(--ice)}
/* studio four-part evidence block */
.evbox{margin-top:10px;border-top:1px solid #E7ECF1;padding-top:8px;display:flex;flex-direction:column;gap:6px}
.evrow{display:grid;grid-template-columns:96px 1fr;gap:8px;font-size:12px;align-items:baseline}
.evlab{font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.03em;font-size:10px}
/* a single curated column inside an otherwise-computed table: bounded tinted zone, not per-row badges */
.curated-col{background:var(--amber-soft);border-left:1px dashed #C9A24A}
thead .curated-col{white-space:nowrap}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
/* SB-A.14 — g4 was referenced by the Starlife headline row before it existed, so .grid alone made
   one column and the four tiles stacked full-width. Two columns on a laptop, one on a phone. */
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1320px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1080px){.g2,.g3{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.g4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.card h3{font-size:13px;color:var(--mut);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-family:'IBM Plex Sans'}
.kpi{font-family:'Sora';font-size:28px;font-weight:700;margin-top:10px;color:var(--ink)}
.kpi.up{color:var(--teal)}.kpi.dn{color:var(--coral)}.kpi.wt{color:var(--amber)}
.kdesc{font-size:13.5px;color:var(--mut);margin-top:8px;line-height:1.5}
/* SB-C.21 — the tile's three sizes, in ONE place. Four page files each carried their own `tile`
   closure with the figure's 34px written inline, which is four tiles to keep in step by hand. */
.klabel{font-size:15px;color:var(--tx)}
/* SB-C.22.3 — a figure NEVER wraps. "IDR 7,292.6 Bn" broke after "7,292.6" in a narrow column
   and read as two numbers stacked; the tile beside it stayed one line, so a row of four tiles had
   two heights. The size gives way instead of the line: it tracks the column between 26 and 34px,
   and `nowrap` means the only thing that can happen under pressure is smaller type. */
.kfig{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(26px,2.1vw,34px);
  line-height:1.2;white-space:nowrap;color:var(--teal);margin:6px 0 4px}
.kfig.ink{color:var(--ink)}
/* The governed cards wear the teal top edge and an uppercase label: a governed figure and a
   computed-but-non-governed one must not look alike. */
.card.gov{border-top:3px solid var(--teal)}
/* SB-C.24 — how a policy ended. A CLOSED one (surrendered or claimed) is greyed rather than
   hidden: it is part of the relationship's history, and dropping it would show a customer as
   smaller than they were. */
.slstat{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:9px;font:600 10.5px/1.6 'IBM Plex Sans',sans-serif;letter-spacing:.03em;color:var(--mut);background:var(--ice);border:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.slstat.closed{color:#8A5A5A;background:#FBF0F0;border-color:#F0DADA}
.card.gov .klabel{font:600 12px/1.4 'IBM Plex Sans',sans-serif;letter-spacing:.1em;
  color:var(--mut);text-transform:uppercase}
.lineage{margin-top:12px;font-size:10px;color:#8FA2B6;border-top:1px dashed var(--line);padding-top:8px}
/* SB-C.21 — THE SECTION IS THE UNIT OF SEPARATION, and it is one markup everywhere (`uiSect`).
   The rule sits ABOVE the heading with 44px of air over it and 28px under it, so what a reader
   sees between two sections is a deliberate break rather than whatever margin the last block
   happened to end on. The heading is 22px Sora; the one-line description is right-aligned on the
   same row and capped at 46% so a long one cannot push the heading off its own line. */
/* SB-C.22.2 — the description sits UNDER the heading, left-aligned, not opposite it. Opposite,
   it was a second column fighting the heading for the row: a long one wrapped, a short one left a
   gap, and on a wide window the two ends of the line were far enough apart to read as unrelated.
   Under it, it reads as what it is — the sentence belonging to the heading above it — and the
   72ch cap keeps it a readable measure however wide the page gets. */
.sect{margin:44px 0 14px;padding-top:28px;border-top:2px solid var(--rule);display:block}
/* The first section on a page has nothing to be separated FROM. */
.sect:first-child,.sect.first{margin-top:20px;padding-top:0;border-top:0}
.sect h2{font-family:'Sora',sans-serif;font-size:22px;color:var(--ink);margin:0;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* The eyebrow names the BOOK a section reads from — "Governed", "Starlife", "Star Wealth" — so a
   reader knows which of the three before reading a figure. It sits above the heading, inside it. */
.sect .eyebrow{display:block;font:600 11px/1 'IBM Plex Sans',sans-serif;letter-spacing:.14em;
  color:var(--teal);text-transform:uppercase;margin-bottom:8px}
.sect .note,.sect .about{font-size:14.5px;color:var(--mut);margin-top:6px;max-width:72ch}
/* Inside a pane the sections are already fenced by the pane's own border, so they sit closer. */
.pane .sect{margin-top:36px}
.pane .sect:first-child{margin-top:0;padding-top:0;border-top:0}

.pill{display:inline-block;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;white-space:nowrap}
.p-live{background:var(--teal-soft);color:#0C6B55}
.p-watch{background:var(--amber-soft);color:#8A5D0D}
.p-risk{background:var(--coral-soft);color:#A33D1B}
.p-info{background:var(--ice);color:#2A4E77}
.p-typed{background:#EEE9FB;color:#5A4699}
.p-done{background:#DCEAF9;color:#1D5FA0}

table{width:100%;border-collapse:collapse;font-size:13px}
th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);font-weight:600}
td{padding:10px;border-bottom:1px solid #EDF2F7;vertical-align:middle}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-family:'Sora';font-weight:600}
/* I2b/I9 not-doing compact rows on the exec-brief Target & Levers panel */
.ndrow{padding:8px 0;border-bottom:1px solid #EDF2F7;font-size:13px}
.ndrow:last-child{border-bottom:none}
.ndrow summary::-webkit-details-marker{display:none}
.ndrow summary::marker{content:""}

.bar-row{display:grid;grid-template-columns:170px 1fr 84px;align-items:center;gap:12px;padding:7px 0;font-size:12.5px}
.bar-track{background:#EDF2F7;border-radius:6px;height:18px;position:relative;overflow:hidden}
.bar-fill{position:absolute;top:0;bottom:0;border-radius:6px}
.bval{font-family:'Sora';font-weight:600;text-align:right;font-size:12.5px}
.split-track{display:flex;height:22px;border-radius:7px;overflow:hidden}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--mut)}
.legend span{display:flex;align-items:center;gap:6px}
.sw{width:11px;height:11px;border-radius:3px;display:inline-block}

.gauge{width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:14px auto}
.gauge .in{width:112px;height:112px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge .in .num{font-size:26px;font-weight:700;color:var(--ink)}
.gauge .in .lbl{font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}

.alert{display:grid;grid-template-columns:8px 1fr auto;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 18px;margin-bottom:11px;align-items:center}
.alert .sev{width:8px;border-radius:6px;align-self:stretch}
.alert h4{font-size:14px;color:var(--ink)}
.alert p{font-size:12px;color:var(--mut);margin-top:4px;line-height:1.5}
.alert .meta{text-align:right;font-size:11px;color:var(--mut);white-space:nowrap}
.alert .meta b{display:block;color:var(--tx);font-size:12px}
.mine{outline:2px solid #14669A22;background:#F4F9FD}
.actrow{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

.matrix{overflow-x:auto}
.matrix td,.matrix th{text-align:center;padding:8px 6px}
.matrix td:first-child,.matrix th:first-child{text-align:left;white-space:nowrap}
.cell{display:inline-block;min-width:26px;padding:2px 6px;border-radius:6px;font-size:12px;font-weight:600}
.c-live{background:var(--ice);color:#27507A}
.c-new{background:var(--teal-soft);color:#0C6B55}
.masknote{font-size:11px;color:var(--mut);background:var(--ice);border-radius:8px;padding:8px 12px;margin-top:12px}

.btn{all:unset;cursor:pointer;background:var(--ink);color:#fff;border-radius:9px;padding:8px 14px;font-size:12px;font-weight:600}
.btn:hover{background:#1B3E63}
.btn.sec{background:#fff;color:var(--tx);border:1px solid var(--line)}
.btn.sec:hover{border-color:var(--mut)}
.btn.ok{background:var(--teal)}
.btn.warn{background:var(--coral)}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:10px;padding:12px 22px;font-size:13px;opacity:0;pointer-events:none;transition:.3s;z-index:99;max-width:80vw;text-align:center}
.toast.on{opacity:1}
.drift{background:#FFF9F5;border:1px solid #F2D9CB;border-radius:12px;padding:14px 18px;font-size:12.5px;margin-top:12px;line-height:1.6}
.drift b{color:var(--coral)}
.airec{background:linear-gradient(120deg,#F5F2FD,#EFF6FB);border:1px solid #D9D2F0;border-radius:12px;padding:14px 18px;font-size:12.5px;line-height:1.6;margin-top:12px}
.airec .tag{font-size:10px;letter-spacing:.12em;color:var(--violet);font-weight:600;text-transform:uppercase}

.rec{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px}
.rec .top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.rec h4{font-size:15px;color:var(--ink)}
.rec .why{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:12px}
.why div{background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:12px;line-height:1.55;color:var(--tx)}
.why b{color:var(--tx);display:block;margin-bottom:3px;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.conf{font-size:11px;color:var(--mut)}
.conf b{color:var(--violet)}

.eb{display:inline-block;font-size:10px;font-weight:600;border-radius:5px;padding:2px 6px;margin-right:3px}
.eb.sl{background:#FBEDE6;color:#A33D1B}.eb.am{background:#E3F5F0;color:#0C6B55}
.eb.sw{background:#EFEAFB;color:#5A4699}.eb.bs{background:#EAF1F8;color:#2A4E77}
.eb.off{background:#F0F2F5;color:#B4BFCB;text-decoration:line-through}

.sim input,.sim select,.segform input,.segform select{font-family:'IBM Plex Sans';font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff}
.sim input{font-family:'Sora';width:120px}
.simres{margin-top:14px;border-radius:10px;padding:14px 16px;font-size:12.5px;line-height:1.7;display:none}
.simres.block{display:block;background:var(--coral-soft);border:1px solid #F0C4AE}
.simres.ok{display:block;background:var(--teal-soft);border:1px solid #BCE4D7}

.segform{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:6px}
.segform label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);display:block;margin-bottom:4px;font-weight:600}
.segcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.segcard h4{font-size:14px;color:var(--ink)}
.segrow{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--mut);margin-top:8px}
.segrow b{color:var(--tx)}

/* SB-A.16 — an unnamed segment's placeholder title, and the applied-filter chips beneath it. */
.segcard h4.segtbd{color:var(--mut);font-style:italic;font-weight:500}  /* .segcard h4 sets --ink and outranks a bare .segtbd — the grey needs the same weight */
/* SB-B.2 — the S&M page filter bar. Sticky so the viewer can never scroll away from the fact that
   the blocks below are narrowed; amber because it is a state the page is IN, not a warning. */
.smfilter{position:sticky;top:0;z-index:5;margin:18px 0 -6px;background:var(--amber-soft);
  border:1px solid #E6C77A;border-radius:10px;padding:8px 14px;font-size:13px;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.smfilter b{margin-right:2px}
.fchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.fchip{display:inline-block;background:var(--ice);border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;font-size:11px;color:var(--tx);line-height:1.5}
button.fchip{cursor:pointer;font-family:inherit}
.fchip.clear{background:#fff;color:var(--mut);border-style:dashed}
.fchip.clear:hover{color:var(--ink);border-color:var(--mut);border-style:solid}
/* SB-B.4b — a selected chip in the segment selector and the "treat as" pair. Filled rather than
   outlined, because these chips are a CHOICE between siblings, not a removable filter: the amber
   page-filter bar keeps the × treatment so the two can never be mistaken for one another. */
.fchip.on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}
.fchip.on:hover{background:var(--teal);color:#fff}

/* SB-C.5 — the STATIC label chip. Nine call sites across four files had been writing class="chip"
   since SB-B with no rule behind it, so every one rendered as a bare inline span: two of them side
   by side read as one word ("908.9 Bn31-90 days" under the segment table, "5 products11 funds" on
   the Products tiles). It shares .fchip's pill geometry deliberately — they are one family — but
   stays a SEPARATE class because .fchip is interactive (it carries .on and .clear and a click
   target) and a static label that looks clickable is a worse bug than an unstyled one. The margin
   is on the chip itself, not on a flex parent: these are emitted inline inside a <td> or a <div>
   whose layout this rule must not change. */
.chip{display:inline-block;background:var(--ice);border:1px solid var(--line);border-radius:999px;
  padding:5px 10px;font-size:12px;color:var(--tx);line-height:1.5;margin:0 6px 6px 0}

.futmonth{display:grid;grid-template-columns:70px 1fr 90px 110px 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #EDF2F7;font-size:12px}
.futmonth:last-child{border-bottom:none}
.covbar{background:#EDF2F7;border-radius:5px;height:14px;position:relative;overflow:hidden}
.covbar div{position:absolute;top:0;bottom:0;left:0;border-radius:5px}
.evt{font-size:11px;color:var(--coral)}
.evt.okc{color:var(--teal)}

/* executive brief */
.readline{background:linear-gradient(120deg,var(--ink),#173A5E);color:#fff;border-radius:16px;padding:20px 24px;margin-bottom:18px}
.readline .eyebrow{font-size:10px;letter-spacing:.2em;color:#7FE0C8;text-transform:uppercase;font-weight:600}
.readline p{font-size:15px;line-height:1.6;margin-top:8px;color:#E6EEF7;max-width:960px}
/* Whale Radar — glanceable benchmark ribbon */
.bmribbon{padding:14px 18px}
.bmrow{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline}
.bm{display:flex;flex-direction:column;gap:2px;min-width:96px}
.bm .bml{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6B7B8C;font-weight:600}
.bm .bmv{font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;border-top:3px solid var(--line)}
.tile.ok{border-top-color:var(--teal)}
.tile.warn{border-top-color:var(--amber)}
.tile.bad{border-top-color:var(--coral)}
.tile .lb{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);font-weight:600}
.tile .vl{font-family:'Sora';font-size:23px;font-weight:700;margin-top:6px;color:var(--ink)}
.tile.ok .vl{color:#0F6E56}.tile.warn .vl{color:#8A5D0D}.tile.bad .vl{color:#A33D1B}
.tile .cx{font-size:11px;color:var(--mut);margin-top:5px;line-height:1.45}
.dcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.dcard.hot{border-color:#F0C4AE;background:#FFFCFA}
.dcard h4{font-size:13.5px;color:var(--ink)}
.dcard .cost{font-size:11.5px;color:var(--coral);margin-top:4px}
.dcard .sub{font-size:12px;color:var(--mut);margin-top:4px;line-height:1.5}
.chg{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 0;border-bottom:1px solid #EDF2F7;font-size:12.5px;align-items:baseline}
.chg:last-child{border-bottom:none}
.chg .was{color:var(--mut);font-size:11.5px;margin-top:3px;line-height:1.5}
.chg .ic{font-size:14px}

#chatFab{display:none;position:fixed;bottom:22px;right:22px;z-index:80;background:linear-gradient(120deg,var(--violet),#4A67C8);color:#fff;border:none;border-radius:999px;padding:13px 20px;font-family:'Sora';font-weight:600;font-size:13px;cursor:pointer;box-shadow:0 8px 24px rgba(20,40,80,.35);align-items:center;gap:8px}
body.chat-on #chatFab{display:flex}
#chatPanel{display:none;position:fixed;bottom:80px;right:22px;z-index:81;width:min(400px,92vw);max-height:min(600px,80vh);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(10,25,50,.28);flex-direction:column;overflow:hidden}
#chatPanel.on{display:flex}
.chathead{background:var(--ink);color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center}
.chathead h4{font-size:14px}
.chathead .sub{font-size:10px;color:#8FA8C6;margin-top:2px}
.chathead button{all:unset;cursor:pointer;color:#9DB6D2;font-size:16px;padding:2px 6px}
#chatMsgs{flex:1;overflow-y:auto;padding:16px;background:var(--paper)}
.msg{max-width:88%;border-radius:12px;padding:10px 14px;font-size:12.5px;line-height:1.6;margin-bottom:10px}
.msg.user{background:var(--ink);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.bot .src{font-size:9.5px;color:#8FA2B6;margin-top:8px;border-top:1px dashed var(--line);padding-top:6px}
.qchips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px;background:var(--paper)}
.qchips button{all:unset;cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:11px;color:var(--tx)}
.qchips button:hover{border-color:var(--violet);color:var(--violet)}
.chatin{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:#fff}
.chatin input{flex:1;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:12.5px;font-family:'IBM Plex Sans'}

.story{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-bottom:18px}
.story .st{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--mut)}
.story .st b{display:block;color:var(--ink);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.opt{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.opt.recd{border-color:#8FD9C4;background:#F7FCFA}
.opt.riskopt{border-color:#F0C4AE;background:#FFFCFA}
.optflag{font-size:9.5px;letter-spacing:.14em;color:#0C6B55;font-weight:700;margin-bottom:6px}
.optflag.warnf{color:#A33D1B}
.optflag.altf{color:#6B7E93}
.opt h4{font-size:14px;color:var(--ink)}
.optcost{font-size:11.5px;color:var(--coral);margin-top:8px;min-height:16px}
.evnum{font-family:'Sora',sans-serif;font-size:26px;font-weight:700;margin-top:10px;color:var(--ink)}
.evnum.dn{color:var(--coral)}.evnum.up{color:var(--teal)}.evnum.wt{color:var(--amber)}
.capbtn{all:unset;cursor:pointer;font-size:12.5px;padding:7px 18px;border-radius:999px;color:var(--mut);font-weight:600}
.capbtn.on{background:var(--ink);color:#fff}
.capsw{display:flex;justify-content:center;margin-bottom:10px}
.capsw .wrap{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px}
.slim{text-align:center;font-size:12px;color:var(--mut);margin-bottom:18px}
.slim b{color:var(--tx)}
.mi{all:unset;cursor:pointer;color:#2A5E8E;font-size:12px;padding:0 4px;border-radius:4px}
.mi:hover{background:var(--ice)}
.midef{display:none;background:var(--ice);border-radius:8px;padding:10px 12px;font-size:11.5px;color:var(--tx);margin-top:7px;line-height:1.6;text-align:left}
.midef b{color:var(--ink2)}
/* SB-C.21.3 — the ⓘ popover. ONE of these exists in the document at a time and it is BUILT on
   open, so a closed ⓘ puts nothing in the markup: the three pages no longer carry fifty-six
   hidden paragraphs each, and nothing can read a definition out of a document it was never
   shown. Positioned in page coordinates against the button, nudged back inside the viewport. */
.pop{position:absolute;z-index:40;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 24px rgba(14,36,64,.12);padding:14px 16px;width:360px;max-width:calc(100vw - 24px);
  font-size:13px;color:var(--tx);line-height:1.5;text-align:left}
.pop b{color:var(--ink)}
.pop .popnote{display:inline-block;margin-top:6px;color:var(--mut);font-size:12.5px}
/* The source pills, at the foot of the popover rather than beside the heading. */
.pop .popsrc{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px}
.mi[aria-expanded="true"]{background:var(--ice)}
.plainline{font-size:12.5px;color:var(--mut);font-style:italic;margin-top:6px;line-height:1.5}
.gterm{color:#2A5E8E;cursor:pointer;border-bottom:1px dashed #9DBCD8;white-space:nowrap}
.gdef{display:none;font-style:normal;background:var(--ice);border-radius:8px;padding:8px 12px;font-size:11.5px;color:var(--tx);margin-top:6px;line-height:1.5}
.gterm.open + .gdef{display:block}
.pipe{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:12px;border-top:1px dashed var(--line);padding-top:11px}
.pipe .stg{font-size:10.5px;font-weight:600;border-radius:999px;padding:3px 9px}
.pipe .stg.done{background:var(--teal-soft);color:#0C6B55}
.pipe .stg.cur{background:var(--ice);color:#1D5FA0;border:1px solid #9DBCD8}
.pipe .stg.todo{background:#F0F3F6;color:#93A3B4}
.pipe .arr{color:#B4C2D0;font-size:11px}
.nextbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(120deg,#FDF8EF,#F5F9F4);border:1px solid #E7DEC8;border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:13px}
.nextbar b{color:var(--ink)}
.nextbar .zap{color:#B97F14;font-weight:700}
.outblock{background:var(--paper);border-radius:9px;padding:9px 11px;margin-top:10px;font-size:11.5px;line-height:1.7}
.outblock .ol{font-size:9.5px;letter-spacing:.08em;color:#93A3B4;font-weight:700}
.outblock b{color:var(--ink)}
.outblock .p90{color:var(--mut);margin-top:4px;border-top:1px dashed var(--line);padding-top:4px}
.why .w1 b{color:#0C6B55}.why .w2 b{color:#8A5D0D}.why .w3 b{color:#1D5FA0}.why .w4 b{color:#A33D1B}
.logrow{display:flex;gap:12px;font-size:12px;padding:9px 0;border-bottom:1px solid #EDF2F7;align-items:baseline}
.logrow .t{color:var(--mut);white-space:nowrap;font-size:11px}
footer.demo{margin-top:44px;font-size:11px;color:var(--mut);border-top:1px solid var(--line);padding-top:14px;line-height:1.7}

/* ALM-2.1 — admin Full/Demo view switcher (topbar) */
.demoswitch{display:inline-flex;border:1px solid var(--line,#d0d7de);border-radius:8px;overflow:hidden;margin-right:10px;vertical-align:middle}
.demoswitch button{border:0;background:transparent;padding:5px 12px;font-size:12px;cursor:pointer;color:var(--mut);font-family:inherit}
.demoswitch button.on{background:var(--teal,#149A7C);color:#fff;font-weight:700}

/* SB-C.12 — marketing calendar v3: one row per CAMPAIGN, the bar carries its name, the row opens a
   panel. The classes exist because a bar needs a positioning context, a clipped bar needs a ::before
   mark, and a clickable row needs :hover and :focus-visible — none of which an inline style can do. */
.calv3-hdr,.calv3-row,.calv3-band{display:grid;grid-template-columns:1fr 92px 92px 56px 120px;gap:0 12px;align-items:center}
.calv3-hdr{padding:0 0 6px;font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.calv3-hdr .num,.calv3-row .num,.calv3-band .num{text-align:right}
.calv3-months{display:grid;grid-template-columns:repeat(6,1fr)}
.calv3-months div{text-align:center;font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.calv3-band{margin:16px 0 4px;padding:6px 12px;border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
.calv3-band .num{font-family:'Sora',sans-serif;font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink)}
.calv3-row{padding:5px 0;border-bottom:1px solid var(--ice);cursor:pointer;transition:background .12s}
.calv3-row:hover{background:#F7FAFD}
.calv3-row:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.calv3-track{position:relative;height:30px;display:grid;grid-template-columns:repeat(6,1fr)}
.calv3-track i{border-left:1px dashed var(--ice);height:100%}
.calv3-bar{position:absolute;top:4px;height:22px;border-radius:6px;background:var(--c);color:#fff;font-size:12px;font-weight:600;line-height:22px;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calv3-bar.cut::before{content:"\2039";position:absolute;left:3px;top:0;font-weight:700}
.calv3-bar.cut{padding-left:14px}
.calv3-lbl{position:absolute;top:4px;height:22px;line-height:22px;font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.calv3-lbl.before{text-align:right}
.calv3-row .num{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;font-size:12.5px}
.calv3-prog{display:flex;align-items:center;gap:8px}
.calv3-prog .bg{flex:1;height:8px;border-radius:4px;background:var(--ice);overflow:hidden}
.calv3-prog .fg{height:100%;background:var(--c)}
.calv3-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--mut);margin:12px 0 0}
.calv3-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.calv3-tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:4px 0 16px}
.calv3-tile{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.calv3-tile small{display:block;color:var(--mut);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.calv3-tile b{font-family:'Sora',sans-serif;font-size:19px;color:var(--ink)}
.calv3-kv{display:grid;grid-template-columns:150px 1fr;gap:10px 14px;font-size:13.5px}
.calv3-kv dt{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.calv3-kv dd{margin:0;color:var(--tx)}
.calv3-act{white-space:pre-line;line-height:1.55}

/* SB-C.13 — the force workload band bar. Classes rather than inline styles because a segment needs
   :hover and :focus-visible, and because the label has to ellipsis inside a flex child. */
.smsbands{display:flex;height:34px;border-radius:8px;overflow:hidden;margin:12px 0 6px}
.smsbands > div{display:flex;align-items:center;justify-content:center;color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;cursor:pointer;min-width:0}
.smsbands > div:hover{filter:brightness(1.08)}
.smsbands > div:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.smsleg{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--mut);margin-bottom:4px}
.smsleg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* ---------------------------------------------------------------- page tabs (SB-C.19)
   One bar on one hairline; the active tab is a folder — white, hairline on three sides, a teal
   3px top bar and a teal icon — and EXPANDS to show its one-line description inline after a
   divider, the others sliding along. The description lives inside each tab collapsed to zero
   width rather than in a line beneath the bar, so opening a tab moves the neighbours instead of
   pushing the whole page down by a row. */
.tabwrap{position:sticky;top:0;z-index:3;background:var(--paper);padding:6px 0 0;margin:24px 0 16px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);align-items:flex-end;
  overflow-x:auto;scrollbar-width:none}
/* SB-C.22.4 — the ACTIVE tab's description, once, at the right end of the row. Inside the tab it
   had to share the bar's width with four other names, so it arrived truncated; out here it has
   the right end to itself and is never cut and never wrapped to a second line. It names the tab
   it describes, because at this distance the pairing is not obvious from position alone. Below
   1100px there is no room for both, and the description is the part that goes — a tab you cannot
   read is a page you cannot reach, a description you cannot see is a sentence you can open the
   tab for. It is `role="presentation"` so a tablist still contains only tabs. */
.tabs .tabdesc{margin-left:auto;padding:0 6px 16px;font:400 15px 'IBM Plex Sans',sans-serif;
  color:var(--mut);white-space:nowrap;flex:none}
.tabs .tabdesc b{color:var(--ink);font-weight:600}
@media(max-width:1100px){.tabs .tabdesc{display:none}}
/* set by `uiTabFit` when the row measures short — see tabs.js for why this is a measurement and
   not another breakpoint. */
.tabs .tabdesc.toowide{display:none}
.tabs::-webkit-scrollbar{display:none}
/* The tab NAME is heading type, because what it names is the question the pane under it answers —
   a tab at control size read as a filter OVER the page rather than as the page's own structure.
   It sits one step UNDER `.sect h2` (20px against 22px): a tab names a whole pane of sections, but
   the section headings inside it are what a reader is actually reading, and a tab bar that
   out-shouted them would invert that. Both sizes are tokens here; neither is retyped on a page. */
.tabs button{border:1px solid transparent;border-bottom:0;background:none;
  font:700 20px 'Sora',sans-serif;color:var(--mut);padding:14px 22px;margin-bottom:-1px;
  border-radius:12px 12px 0 0;cursor:pointer;display:flex;align-items:center;gap:12px;
  position:relative;white-space:nowrap;transition:color .2s,background .2s;
  /* The NAMES never shrink. The bar carries `overflow-x:auto` with the scrollbar hidden, which
     would answer a cramped row by scrolling a tab out of sight — a page you cannot see and cannot
     reach. Since SB-C.22.4 the description is outside the tabs and hides below 1100px, so there
     is nothing left to squeeze the names. */
  flex:none;min-width:0}
.tabs button svg{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.tabs button:hover{color:var(--ink);background:var(--ice)}
.tabs button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.tabs button.on{color:var(--ink);background:#fff;border-color:var(--line);box-shadow:0 -1px 0 #fff inset}
.tabs button.on::after{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;
  border-radius:0 0 3px 3px;background:var(--teal)}
.tabs button.on svg{stroke:var(--teal)}
/* SB-C.22.4 — the inline <em> and its expand animation are GONE with the description that used
   to live in the tab. The shrink machinery goes with it: the description is no longer competing
   with the names for the row, so nothing has to give way. */
/* SB-C.21 — the open tab's content sits in a WHITE SHEET joined to the folder above it: border on
   three sides, square at the top where the tab meets it, rounded at the bottom. Without it the
   folder opened onto the page background and the tab read as a label floating over a scroll, which
   is the thing the folder metaphor exists to deny.
   One pane is built at a time, so `.pane` is always the open one; the display rule exists so a
   pane that is ever rendered closed is closed, rather than relying on the renderer never doing it. */
.pane{display:none;background:#fff;border:1px solid var(--line);border-top:0;
  border-radius:0 0 12px 12px;padding:28px 28px 8px}
.pane.on{display:block}
@media (prefers-reduced-motion: reduce){
  .tabs button{transition:none}
}

/* ================================================================ SB-C.26.10 — the play board

   ONE ROW PER PLAY, and the row is a GRID rather than a flex wrap. The card was a flex row with
   five `min-width:120px` cells, so at any width that did not divide neatly the four figure cells
   wrapped under the prose at four different positions and the board read as four cards of
   different heights. `1.3fr 1fr 1fr 1fr 1fr` is the mock's own grid: the columns line up down
   the board, which is what lets a reader compare Pipeline to Pipeline without reading the labels.

   THE COLOUR IS THE LEFT EDGE, not the heading. A coloured 17px heading on a white card reads as
   a link; the 4px edge says "this is the Keep-the-quarter row" without competing with the figure
   that is the point of the row. */
.play{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;
  margin-bottom:14px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:18px;
  align-items:start;border-left:4px solid var(--teal)}
.play h4{margin:0;font-family:'Sora',sans-serif;font-size:17px;color:var(--ink)}
.play .sub{font-size:12.5px;color:var(--mut);margin-top:4px}
.play .act{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--tx)}
.play .act b{color:var(--ink)}
/* A "k" CELL IS A LABEL, A FIGURE AND A LINE, and the three sizes are what keep them apart. No
   sentence is ever set in the figure size: a sentence at 18px Sora reads as a number that has not
   finished loading, which is how "the next monthly report — retention from this cut-off to the
   next" came to sit where "1,403" sits. */
.play .k small{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mut);margin-bottom:3px}
.play .k b{display:block;font-family:'Sora',sans-serif;font-size:18px;color:var(--ink);
  line-height:1.25}
.play .k i{display:block;font-style:normal;font-size:12px;color:var(--mut);margin-top:2px;
  line-height:1.4}
.play .k b.r{color:var(--coral)}
.play .k b.g{color:var(--teal)}
/* No figure to print is not a dash: the cell carries the plain words at line size. */
.play .k i.only{margin-top:0}
/* SB-C.29.3 — WHAT THE PIPELINE IS MADE OF, one step quieter than the line above it: a breakdown
   set at the same weight as the unit reads as a second pipeline rather than this one's parts. */
.play .k i.split{font-size:11.5px;color:var(--mut);margin-top:4px;line-height:1.45}
/* WHO IS IN, on the card. Set on the ice tint so it reads as the card's own small print rather
   than as a second sentence competing with the question above it — the first thing anybody asks
   of a segment is whether their customer is in it, which is a question about the rule. */
.play .crit{margin-top:9px;font-size:12px;color:var(--ink);background:var(--ice);border-radius:7px;
  padding:7px 10px;line-height:1.5}
.play .crit b{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);
  margin-right:7px;font-weight:600}
.play .owner{display:inline-block;font-size:11.5px;border:1px solid var(--line);border-radius:999px;
  padding:3px 9px;margin:8px 6px 0 0;color:var(--tx)}
.play .why{grid-column:1/-1;margin-top:4px;background:var(--ice);border-radius:9px;
  padding:11px 13px;font-size:12.5px;line-height:1.6}
/* Below the width the five columns need, the figures fall to two rows of two UNDER the prose —
   never a column of five, which turns one play into a screenful. */
@media(max-width:1180px){
  .play{grid-template-columns:repeat(2,1fr)}
  .play>:first-child{grid-column:1/-1}
}

/* SB-C.30 — THE PEER ANSWER: a product and the sentence it rests on, in one cell.

   The product is the figure and the share is the evidence, so they are not the same size — a
   recommendation set at one weight with its count beside it reads as two facts of equal standing,
   and the one a reader checks is the count. Same ladder as the play card's `.k b` / `.k i`, one
   step smaller because this is inside a table row.

   The band table is a hairline table like every other table inside a panel (`--line`, never
   `--rule`), and its rows are clickable, so they take the same hover the other click-rows do. */
.peerrec b{display:block;font-family:'Sora',sans-serif;font-size:12.5px;color:var(--ink);
  line-height:1.3;font-weight:600}
.peerrec i{display:block;font-style:normal;font-size:11px;color:var(--mut);margin-top:2px;
  line-height:1.4}
.peerbands{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:6px}
.peerbands th{font:600 10.5px 'IBM Plex Sans';letter-spacing:.07em;text-transform:uppercase;
  color:var(--mut);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.peerbands th.num,.peerbands td.num{text-align:right}
.peerbands td{padding:7px 6px;border-bottom:1px solid var(--line);font-size:12.5px;
  vertical-align:top}
.peerbands tr:last-child td{border-bottom:0}

/* SB-C.29.2 — THE HALF HEADING, one step UNDER a section heading and one step over a card.
   It divides a board that is already inside a section, so it is 15px uppercase Sora in the muted
   ink rather than a second 22px heading competing with the one above it (rule 19's ladder). The
   half's own sentence sits beside it at body size, because what the half MEANS is a sentence and
   not a label. */
h3.half{font-family:'Sora',sans-serif;font-size:15px;color:var(--mut);margin:26px 0 10px;
  letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:baseline;gap:12px}
h3.half>span{font-family:'IBM Plex Sans',sans-serif;font-size:13px;color:var(--mut);
  letter-spacing:0;text-transform:none;font-weight:400;max-width:60ch}
@media(max-width:1080px){h3.half{display:block}h3.half>span{display:block;margin-top:4px}}

/* THE BOOK SWITCH IS A PILL SWITCH, not two chips. Two chips side by side are two filters that
   happen to be adjacent, and a reader who sets both expects both. One pill with one segment
   filled says what it is: a choice of exactly one. */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:#fff;
  padding:3px;margin-bottom:16px}
.seg button{border:0;background:none;font:600 13px 'IBM Plex Sans',sans-serif;padding:7px 16px;
  border-radius:999px;color:var(--mut);cursor:pointer}
.seg button.on{background:var(--ink);color:#fff}
.seg button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}