/* ==========================================================================
   Context Visualised · website system · October 2026
   One stylesheet for every page. Type system: Option C (Inter + Jura).
   Sections: tokens · base · layout · type · buttons · header and nav · hero ·
   cards and tiles · KRI and pills · home sections · board renders · tube map ·
   forms · prose · footer · review hub · breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS: self-hosted (no request to Google before consent). Variable woff2 from
   Google Fonts, SIL Open Font License (assets/fonts/OFL-*.txt). Inter 400 to 800,
   Jura 600 and 700. head.html preloads inter-latin.woff2.
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jura'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(fonts/jura-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jura'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(fonts/jura-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --------------------------------------------------------------------------
   TOKENS: colour (accessibility tweaks folded in)
   -------------------------------------------------------------------------- */
:root {
  --ground: #EEF3E6;          /* page background */
  --surface: #F9FFF1;         /* Milk: cards, bands. Never pure white */
  --surface-2: #F3F8EC;       /* subtle fills, expanded rows */
  --ink: #1F4651;             /* Japanese Indigo */
  --ink-2: #355962;           /* secondary text, captions (7.47:1 on milk) */
  --ink-3: #7A9098;           /* non-text only: outlines, tracks */
  --border: #E0E6D9;          /* decorative borders */
  --border-strong: #5F7A83;   /* input and control borders (4.48:1 on milk) */
  --muted: #C7CCC1;           /* dashed outlines, neutral tracks */
  --tint: #E4EEF2;            /* icon tiles, chips */
  --accent: #21AEAE;          /* Sea Green: focus ring on indigo only */
  --accent-deep: #17797A;     /* deep teal: focus ring and links on light */
  --lemon: #FFFF61;           /* Laser Lemon: on indigo only */
  --fail: #C2412A;            /* failure, outside appetite. Never decoration */
  --fail-text: #9B3422;       /* red text on light surfaces */
  --fail-soft: #F6DDD6;       /* soft red fill behind fail text */
  --amber: #E0A82E;           /* appetite approaching: fills only */
  --amber-deep: #7B5C19;      /* amber text and solid amber badges */
  --green: #3BAA5C;           /* appetite within: fills only */
  --green-strong: #236637;    /* solid green badge with milk text */
  --change-up: #CFEDED;       /* favourable change pill */
  --change-down: #F3F3A6;     /* adverse change pill (ink text) */
  --on-ink-2: #BCC8CB;        /* label text on indigo (5.97:1) */
  --on-ink-body: #E0E6D9;     /* body text on indigo */
  --ri-1: #0E3B22; --ri-2: #1E6B3A; --ri-3: #3BAA5C; --ri-4: #86D896;
  --heat-1: #E8EDE2; --heat-2: #DCE3D6; --heat-3: #D2DACB; --heat-4: #C7CFC0;
  --heat-5: #BCC5B5; --heat-6: #B1BBA9; --heat-7: #A6B19E; --heat-8: #9BA793;
  /* process lines (front office). Claims uses blue on the website so red keeps one meaning: failure */
  --line-dist: #3BAA5C; --line-uw: #1F4651; --line-serv: #8A6FC2; --line-clm: #2F6FB5; --line-ri: #E07A45;

  --radius-card: 16px; --radius-tile: 12px; --radius-chip: 10px; --radius-pill: 999px;
  --tap: 44px;
  --content: 1200px;
  --gutter: 24px;
}

/* --------------------------------------------------------------------------
   TYPE SYSTEM · Option C · Inter + Jura (founder pick, wish list §7)
   Inter: headlines, body, UI, card titles, buttons, nav.
   Jura 700, 20px and up: standalone headline numbers. Jura 700, 11px minimum,
   +0.14em, uppercase: eyebrows, chips, status pills. Jura 700, 12px minimum: IDs.
   Jura has no tabular figures: aligned, small and in-sentence numbers use Inter tabular.
   -------------------------------------------------------------------------- */
:root {
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-data: 'Jura', 'Eurostile', sans-serif;

  --fs-display: clamp(40px, 4.4vw, 60px); --w-display: 800; --track-display: -0.045em; --lh-display: 1.0;
  --fs-h2: clamp(30px, 3.2vw, 40px);      --w-h2: 800;      --track-h2: -0.035em;      --lh-h2: 1.05;
  --fs-h2-sm: clamp(28px, 2.9vw, 36px);   --lh-h2-sm: 1.1;
  --fs-h3: 19px;                          --w-h3: 700;      --track-h3: -0.015em;      --lh-h3: 1.25;
  --w-ui: 600;                            --track-ui: -0.005em;
  --w-body: 400;

  --fs-label: 12px; --fs-label-sm: 11px;  --w-label: 700;   --track-label: 0.14em;
  --w-num: 700;     --num-scale: 1.15;    /* Jura 700 reads light: +15% so numbers hold their own */
  --tabular: tabular-nums lining-nums;

  --fs-display-m: 38px; --fs-h2-m: 28px; --fs-h2-sm-m: 26px;
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-text); font-weight: var(--w-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--ink); }
a:hover { color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.on-ink :focus-visible { outline-color: var(--accent); }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { display: block; }
button { font: inherit; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--surface); padding: 12px 16px; border-radius: var(--radius-pill); z-index: 50; }
.skip:focus { left: 16px; color: var(--surface); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }
.tnum { font-variant-numeric: var(--tabular); }

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--content); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: 72px; padding-bottom: 72px; }
.stack { display: flex; flex-direction: column; }
.gap-24 { gap: 24px; } .gap-28 { gap: 28px; } .gap-36 { gap: 36px; }
.intro { display: flex; flex-direction: column; gap: 12px; max-width: 46em; }
.band-milk { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band-ink { background: var(--ink); color: var(--surface); }
.band-ink .label { color: var(--on-ink-2); }
.band-ink .card .label { color: var(--ink-2); }
.band-ink .body-lg { color: var(--on-ink-body); }

/* --------------------------------------------------------------------------
   TYPE ROLES
   -------------------------------------------------------------------------- */
.label { font-family: var(--font-data); font-weight: var(--w-label); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); line-height: 1.35; }
.label-sm { font-size: var(--fs-label-sm); }
.display { font-size: var(--fs-display); font-weight: var(--w-display); letter-spacing: var(--track-display); line-height: var(--lh-display); }
.h2 { font-size: var(--fs-h2); font-weight: var(--w-h2); letter-spacing: var(--track-h2); line-height: var(--lh-h2); }
.h2-sm { font-size: var(--fs-h2-sm); font-weight: var(--w-h2); letter-spacing: var(--track-h2); line-height: var(--lh-h2-sm); }
.h3 { font-size: var(--fs-h3); font-weight: var(--w-h3); letter-spacing: var(--track-h3); line-height: var(--lh-h3); }
.num { font-family: var(--font-data); font-weight: var(--w-num); line-height: 1; } /* Jura: 20px+ only */
.id { font-family: var(--font-data); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; }
.lead { font-size: 20px; line-height: 1.6; max-width: 34em; color: var(--ink-2); }
.body-lg { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.caption { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.small { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   BUTTONS AND LINKS
   -------------------------------------------------------------------------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 24px; border-radius: var(--radius-pill); font-size: 17px; font-weight: var(--w-ui); letter-spacing: var(--track-ui); text-decoration: none; border: 1.5px solid var(--ink); cursor: pointer; }
.btn-primary { background: var(--ink); color: var(--surface); }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--surface); }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--surface); color: var(--ink); }
.btn-lemon { background: var(--lemon); border-color: var(--lemon); color: var(--ink); align-self: flex-start; }
.btn-lemon:hover { color: var(--ink); background: #F2F25A; }
.btn-sm { min-height: var(--tap); padding: 0 18px; font-size: 15px; }
.link { color: var(--accent-deep); font-weight: var(--w-ui); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--ink); }
/* Pages not built yet: never a 404 */
[aria-disabled="true"], .is-soon { cursor: default; opacity: 0.62; text-decoration: none !important; }
.soon { font-family: var(--font-data); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--radius-pill); padding: 1px 6px; margin-left: 6px; white-space: nowrap; }

/* --------------------------------------------------------------------------
   HEADER, NAV, DROPDOWNS, MOBILE MENU
   -------------------------------------------------------------------------- */
.site-header { position: relative; z-index: 20; }
.nav-bar { display: flex; align-items: center; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.brand { display: inline-flex; align-items: center; min-height: var(--tap); border-radius: 6px; flex: none; }
.brand img { height: 50px; width: auto; } /* S24: lockup +32% (was 38px) */
.nav-main { margin-left: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links > li > a, .nav-links > li > .is-soon, .nav-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 12px; border-radius: var(--radius-chip); font-size: 15px; font-weight: var(--w-ui); color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
.nav-links > li > a:hover, .nav-trigger:hover { background: var(--surface); color: var(--ink); }
.nav-links > li > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-trigger svg { width: 14px; height: 14px; transition: transform .15s ease; }
.nav-trigger[aria-expanded="true"] { background: var(--surface); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 8px; z-index: 30; }
.nav-menu[hidden] { display: none; }
.nav-menu ul { list-style: none; margin: 0; padding: 0; }
.nav-menu a, .nav-menu .is-soon { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); padding: 0 12px; border-radius: var(--radius-chip); font-size: 15px; font-weight: var(--w-ui); text-decoration: none; color: var(--ink); }
.nav-menu a:hover:not([aria-disabled="true"]) { background: var(--surface-2); }
.nav-menu .menu-label { padding: 10px 12px 4px; }
.nav-cta { flex: none; }
.menu-btn { display: none; }
.menu-panel { display: none; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 48px; padding-bottom: 72px; }
.hero-copy { flex: 1 1 520px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.hero-card-col { flex: 1 1 400px; max-width: 460px; min-width: 0; }

/* --------------------------------------------------------------------------
   CARDS, CHIPS, TILES
   -------------------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.chip { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); border: 1px solid var(--ink-3); color: var(--ink-2); white-space: nowrap; }
.demo { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.demo-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.demo-head .label { color: var(--ink); }
.demo-title { font-size: 22px; font-weight: var(--w-ui); letter-spacing: var(--track-ui); line-height: 1.25; }
/* RAG tiles: appetite only */
.rag { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.rag li { border: 1px solid var(--border); border-radius: var(--radius-chip); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
.rag .row { display: flex; align-items: center; gap: 6px; }
.rag .num { font-size: calc(20px * var(--num-scale)); }
.rag .cap { font-size: 11.5px; color: var(--ink-2); }
.dot { width: 10px; height: 10px; border-radius: 99px; flex: none; display: inline-block; }
.dot-green { background: var(--green); } .dot-amber { background: var(--amber); } .dot-fail { background: var(--fail); }
/* Stat tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { border: 1px solid var(--border); border-radius: var(--radius-tile); padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tile .num { font-size: calc(24px * var(--num-scale)); display: block; }
.tile .cap { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.tile .cap b { color: var(--ink); font-weight: var(--w-ui); }
.tile-alert { border: 1.5px solid var(--fail); }
.tile-alert .num { color: var(--fail-text); }
.tile-warn { border: 1.5px solid var(--amber); }
.tile-dark { background: var(--ink); border-color: var(--ink); }
.tile-dark .num { color: var(--lemon); }
.tile-dark .cap, .tile-dark .cap b { color: var(--on-ink-body); }
.tile-dark .label { color: var(--on-ink-2); }
.rag-inline { display: flex; gap: 16px; align-items: center; }
.rag-inline > span { display: flex; align-items: center; gap: 6px; }
.rag-inline .num { font-size: calc(22px * var(--num-scale)); }
.tile .tile-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 8px; }

/* --------------------------------------------------------------------------
   KRI SLIDER AND STATUS PILLS
   -------------------------------------------------------------------------- */
.kri { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius-tile); border: 1px solid var(--border); background: var(--surface); }
.kri-head { display: flex; justify-content: space-between; gap: 10px; }
.kri-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kri-name b { text-wrap: balance; font-size: 15px; font-weight: var(--w-ui); letter-spacing: var(--track-ui); }
.kri-name span { font-size: 12px; color: var(--ink-2); font-variant-numeric: var(--tabular); }
.kri-val { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.kri-val .num { font-size: calc(22px * var(--num-scale)); }
.slider { position: relative; padding: 18px 0 16px; }
.track { display: flex; height: 10px; border-radius: 99px; overflow: hidden; gap: 2px; }
.track span { height: 100%; opacity: 0.85; }
.z-green { background: var(--green); } .z-amber { background: var(--amber); } .z-fail { background: var(--fail); }
.prior-line { position: absolute; top: 22px; height: 2px; background: var(--ink); opacity: 0.35; }
.prior-dot { position: absolute; top: 19px; width: 8px; height: 8px; margin-left: -4px; border-radius: 99px; border: 2px solid var(--ink); background: var(--surface); opacity: 0.6; }
.now { color: var(--ink); position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.now i { width: 3px; height: 16px; background: var(--ink); margin-top: -1px; border-radius: 2px; }
.tick { position: absolute; top: 31px; transform: translateX(-50%); font-size: 10px; font-weight: 600; font-variant-numeric: var(--tabular); color: var(--ink-2); }
.key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--ink-2); padding: 0 2px; list-style: none; margin: 0; }
.key li { display: flex; align-items: center; gap: 6px; }
.key svg { color: var(--ink); }
.key .ring { width: 8px; height: 8px; border-radius: 99px; border: 2px solid var(--ink); opacity: 0.6; }
/* Status pills. Appetite: WITHIN, APPROACHING, OUTSIDE (app status-maps.ts) */
.pill { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; line-height: 1.5; }
.pill-outside { background: var(--fail); color: var(--surface); }
.pill-approaching { background: var(--amber-deep); color: var(--surface); }
.pill-within { background: var(--green-strong); color: var(--surface); }
.pill-score { border: 1px solid var(--ink-3); color: var(--ink); }                /* risk scores are neutral */
.pill-neutral { border: 1px solid var(--ink-3); color: var(--ink-2); }
.pill-ineffective { border: 1.5px solid var(--fail); color: var(--fail-text); }  /* red outline, as the app */
.pill-partial { border: 1px solid var(--ink-3); color: var(--ink); background: var(--surface-2); }
.pill-effective { border: 1px solid var(--ink-3); color: var(--ink-2); }
.pill-overdue { border: 1px solid var(--ink); color: var(--ink); }
.pill-weak { background: var(--ink); color: var(--lemon); }
.pill-live { background: var(--ink); color: var(--lemon); }

/* --------------------------------------------------------------------------
   HOME SECTIONS: problem, beliefs, reports, use cases, founder, CTA
   -------------------------------------------------------------------------- */
.compare { display: flex; flex-wrap: wrap; gap: 20px; }
.compare > div { flex: 1 1 380px; min-width: 0; border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.faded { border: 1px dashed var(--muted); }
.heat { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 260px; }
.heat span { aspect-ratio: 1; border-radius: 4px; }
.h1c { background: var(--heat-1); } .h2c { background: var(--heat-2); } .h3c { background: var(--heat-3); } .h4c { background: var(--heat-4); }
.h5c { background: var(--heat-5); } .h6c { background: var(--heat-6); } .h7c { background: var(--heat-7); } .h8c { background: var(--heat-8); }
.business { background: var(--ground); border: 1px solid var(--ink); gap: 14px !important; }
.business .label { color: var(--ink); }
.compare-note { font-size: 16px; line-height: 1.5; }
.faded .compare-note { color: var(--ink-2); }

.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.grid-reports { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.belief { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.step { font-size: 14px; font-weight: 700; font-variant-numeric: var(--tabular); width: 32px; height: 32px; border-radius: 99px; background: var(--ink); color: var(--surface); display: flex; align-items: center; justify-content: center; }
.belief p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.report { text-decoration: none; color: var(--ink); padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 150px; height: 100%; }
.report:hover { color: var(--ink); border-color: var(--accent); }
.report .label { font-size: var(--fs-label-sm); }
.report .fig { font-size: 14px; font-weight: 600; font-variant-numeric: var(--tabular); margin-top: auto; }
.report .more { font-size: 14px; font-weight: var(--w-ui); text-decoration: underline; text-underline-offset: 3px; }
.usecase { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; height: 100%; }
.usecase.live { border: 2px solid var(--ink); }
.usecase b { font-size: 18px; font-weight: var(--w-ui); letter-spacing: var(--track-ui); }
.usecase p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.tag { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; padding: 3px 9px; border-radius: var(--radius-pill); align-self: flex-start; text-transform: uppercase; }
.tag-live { background: var(--ink); color: var(--lemon); }
.tag-next { border: 1px solid var(--ink-3); color: var(--ink-2); }
.band-founder { background: var(--surface); border-top: 1px solid var(--border); }
.founder { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.founder .quote { font-size: 22px; line-height: 1.6; }
.founder .body-lg { line-height: 1.65; }
.signoff { font-family: var(--font-data); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; }
.cta { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding-top: 72px; padding-bottom: 56px; }
.cta .text { display: flex; flex-direction: column; gap: 10px; max-width: 40em; }
/* S24: Home closing sign-off. Quiet: small, bold, ink, a short sea-green rule above. */
.cta-signoff { font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--ink); margin-top: 6px; padding-top: 10px; border-top: 2px solid var(--accent); align-self: flex-start; }
/* Cutover fix 8: closing CTA with the buttons in the left column and the Follow Halden box (follow-box partial) on the right.
   Wraps to one column below about 840px: text first, then the box at full width. */
.cta-split { align-items: flex-start; gap: 32px; }
.cta-split > .text { flex: 1 1 380px; }
.cta-split > .text .btns { margin-top: 10px; }
.cta-split > .form-card { flex: 0 1 440px; min-width: 0; }
.cta-split > .text .cta-share { margin-top: 2px; }
.cta-split .cta-signoff { border-top: 0; padding-top: 0; } /* founder, 14 Oct 2026: no rule above the sign-off */
/* Compact Follow Halden box (follow-box partial): eyebrow, one line, field and button on one row, small note. */
.form-card.follow-box { padding: 20px 22px; gap: 8px; }
.follow-box .fb-line { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.follow-box .form.form { gap: 8px; max-width: none; margin-top: 4px; }
.fb-row { display: flex; gap: 10px; align-items: flex-start; }
.fb-row .field { flex: 1 1 auto; min-width: 0; }
.fb-row .btn { flex: none; min-height: 48px; }
.fb-row .field input { min-height: 48px; }
.fb-note { font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.follow-box .form-error { padding: 8px 12px; font-size: 13px; }
.follow-box .success { padding: 14px 16px; gap: 6px; }
.follow-box .success b { font-size: 16px; line-height: 1.35; }
@media (max-width: 599px) { .form-card.follow-box { padding: 18px; } .fb-row { flex-direction: column; align-items: stretch; } .fb-row .btn { width: 100%; } }
.solution-render { margin-top: 8px; }

/* --------------------------------------------------------------------------
   BOARD RENDERS (Halden dashboards)
   -------------------------------------------------------------------------- */
.board { display: flex; flex-direction: column; gap: 14px; }
.board-head { display: flex; flex-direction: column; gap: 6px; }
.board-head .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.board-head .label { color: var(--ink); }
.board-title { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.board-sub { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 60em; }
.board-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.board-grid.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bcard-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.bcard-meta { font-size: 12.5px; color: var(--ink-2); }
.source { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); border-top: 1px solid var(--border); padding-top: 10px; }
.read-note { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.rollout { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; list-style: none; margin: 0; padding: 0; }
.rollout li { display: flex; align-items: center; gap: 10px; }
.rollout li + li::before { content: "↓"; color: var(--ink-3); font-size: 12px; }

/* Plan by class with the risk inside */
.plan { display: flex; flex-direction: column; }
.plan-head, .prow { display: grid; grid-template-columns: minmax(150px, 1.25fr) minmax(170px, 1.35fr) minmax(170px, 1.35fr) minmax(150px, 1.15fr); gap: 16px; align-items: start; }
.plan-head { padding: 0 0 8px; border-bottom: 1px solid var(--border); }
.plan-head span { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.prow { padding: 14px 0; border-bottom: 1px solid var(--border); }
.prow:last-child { border-bottom: 0; }
.prow .cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.prow .cell-k { display: none; }
.prow .cls { font-size: 16px; font-weight: 700; }
.prow .gwp { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-variant-numeric: var(--tabular); }
.prow .gwp b { font-size: 15px; font-weight: 700; }
.prow .gwp span { font-size: 12.5px; color: var(--ink-2); }
.prow .t { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.prow .m { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; font-variant-numeric: var(--tabular); }
.prow .line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bar { height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; display: flex; }
.bar > span { height: 100%; }
.bar-ink > span { background: var(--ink); }
.change { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-pill); font-variant-numeric: var(--tabular); white-space: nowrap; }
.change-up { background: var(--change-up); color: var(--ink); }
.change-down { background: var(--change-down); color: var(--ink); }

/* Generic rows (risks, controls, actions, committees) */
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rows > li { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--border); }
.rows > li:last-child { border-bottom: 0; }
.rows .main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rows .t { font-size: 14px; font-weight: 600; line-height: 1.35; }
.rows .m { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; font-variant-numeric: var(--tabular); }
.rows .side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; text-align: right; }
.rows .v { font-size: 14px; font-weight: 700; font-variant-numeric: var(--tabular); }
.mark-fail { color: var(--fail-text); font-weight: 700; }

/* Team bars */
.teams { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.teams li { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 13.5px; }
.teams .tn { font-weight: 600; }
.teams .sc { text-align: right; font-weight: 700; font-variant-numeric: var(--tabular); }
.stackbar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--border); gap: 1px; }
.sb-e { background: var(--accent-deep); } .sb-p { background: var(--muted); background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(31,70,81,.35) 3px 4px); } .sb-i { background: var(--fail); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 8px; border-radius: 3px; display: inline-block; }

/* Claims: gross split into recovered and net */
.claims { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.claims li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) 120px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.claims li:last-child { border-bottom: 0; }
.claims .main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.claims .t { font-size: 14px; font-weight: 600; line-height: 1.35; }
.claims .m { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: var(--tabular); }
.claims .v { text-align: right; font-size: 13px; color: var(--ink-2); font-variant-numeric: var(--tabular); line-height: 1.4; }
.claims .v b { color: var(--ink); font-size: 14px; }
.cbar { display: flex; height: 12px; border-radius: 4px; overflow: hidden; gap: 1px; }
.cbar .rec { background: var(--ri-3); }
.cbar .net { background: var(--ink); }
.cat-mark { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; border: 1px solid var(--ink); padding: 0 5px; border-radius: 4px; margin-left: 6px; }

/* Horizontal share bars (complaints by source) */
.hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hbars li { display: flex; flex-direction: column; gap: 5px; }
.hbars .top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; font-variant-numeric: var(--tabular); }
.hbars .top b { font-weight: 600; }
.hbars .bar { height: 10px; }
.hbars .bar > span { background: var(--ink-3); }
.hbars li.worst .bar > span { background: var(--ink); }

/* Committee build-up */
.seq { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.seq .arrow { color: var(--ink-3); }

/* Tube map */
.tube-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-tile); background: var(--surface-2); border: 1px solid var(--border); }
.tube-scroll:focus-visible { outline-offset: 2px; }
.tube { min-width: 860px; width: 100%; height: auto; }
.tube text { font-family: var(--font-text); font-size: 12.5px; fill: var(--ink); }
.tube .key-stop { font-weight: 700; }
.tube .line-label { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.tube .badge-text { font-size: 11px; font-weight: 700; font-variant-numeric: var(--tabular); }
.scroll-hint { display: none; font-size: 12.5px; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 15px; font-weight: var(--w-ui); }
.field .help { font-size: 13px; color: var(--ink-2); }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius-chip); min-height: var(--tap); padding: 10px 12px; width: 100%; }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--fail); }
.field .error { font-size: 13px; color: var(--fail-text); font-weight: 600; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); }

/* --------------------------------------------------------------------------
   PROSE (legal pages, About Halden)
   -------------------------------------------------------------------------- */
.prose { max-width: 72ch; font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; margin-top: 2em; }
.prose h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; margin-top: 1.6em; }
.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose a { color: var(--accent-deep); text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: var(--tabular); }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { font-weight: 700; }
.prose .meta { font-size: 14px; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
/* Dark indigo footer (R7): the end of the page is obvious. Lockup on dark: assets/Logo_header_dark.svg */
.site-footer { background: var(--ink); color: var(--surface); margin-top: 16px; }
.footer-top { display: grid; grid-template-columns: minmax(220px, 1.3fr) repeat(5, minmax(0, 1fr)); gap: 24px; padding-top: 48px; padding-bottom: 36px; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-brand img { height: 36px; width: auto; }
.footer-brand p { font-size: 13.5px; line-height: 1.55; color: var(--on-ink-2); }
/* S24: locked tagline as a sign-off under the brand line. Real text, Inter bold, lemon on indigo. Not a heading. */
.footer-brand p.footer-signoff { font-family: var(--font-text); font-weight: 700; font-size: 15px; line-height: 1.4; letter-spacing: -0.005em; color: var(--lemon); margin-top: 2px; }
.site-footer .label { color: var(--on-ink-2); }
.footer-col h2 { margin-bottom: 8px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a, .footer-col .is-soon { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; text-decoration: none; color: var(--surface); }
.footer-col a:hover:not([aria-disabled="true"]) { color: var(--surface); text-decoration: underline; text-underline-offset: 3px; }
.site-footer :focus-visible { outline-color: var(--accent); }
/* "Soon" links: no opacity fade on indigo, so text stays at 5.97:1 */
.site-footer [aria-disabled="true"], .site-footer .is-soon { opacity: 1; color: var(--on-ink-2); }
.site-footer .soon { color: var(--on-ink-2); border-color: var(--on-ink-2); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 18px; padding-bottom: 32px; border-top: 1px solid rgba(188, 200, 203, 0.35); font-size: 13px; line-height: 1.5; color: var(--on-ink-2); }
.footer-bottom b { color: var(--surface); font-weight: var(--w-ui); }

/* --------------------------------------------------------------------------
   REVIEW HUB (index.html) AND GALLERY (renders.html)
   -------------------------------------------------------------------------- */
.hub { max-width: 920px; margin: 0 auto; padding: 32px 16px 56px; }
.hub h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 28px 0 10px; }
.hub > p { color: var(--ink-2); line-height: 1.55; font-size: 16px; max-width: 46em; }
.tabs { display: inline-flex; gap: 4px; background: var(--border); padding: 4px; border-radius: var(--radius-pill); margin: 24px 0 8px; }
.tabs [role="tab"] { min-height: var(--tap); padding: 0 20px; border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--ink); font-weight: var(--w-ui); font-size: 15px; cursor: pointer; }
.tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--surface); }
.tabs [role="tab"]:focus-visible { outline-offset: 3px; }
.hub-group { margin: 28px 0 8px; }
.hub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hub-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-tile); padding: 12px 14px; }
.hub-list .name { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; }
.hub-list .name b { font-weight: 600; font-size: 16px; }
.hub-list .name small { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.hub-list .links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hub-list .links a { min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; color: var(--ink); }
.hub-list .links a:hover { background: var(--ground); }
.status-built { background: var(--ink); color: var(--surface); }
.status-now { border: 1px solid var(--ink); color: var(--ink); }
.status-later { border: 1px solid var(--ink-3); color: var(--ink-2); }
.status-redirect { border: 1px dashed var(--ink-3); color: var(--ink-2); }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-tile); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table code, .md code, .hub-list code { font-family: var(--font-text); font-size: 0.92em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.md h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; margin: 36px 0 12px; }
.md h3 { font-size: 18px; font-weight: 700; margin: 24px 0 8px; }
.md p, .md li { font-size: 15.5px; line-height: 1.6; }
.md p { margin: 0 0 10px; }
.md ol, .md ul { margin: 0 0 12px; padding-left: 1.3em; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }
.gallery-nav { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.gallery-nav a { min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.render-block { padding-top: 48px; padding-bottom: 48px; border-top: 1px solid var(--border); }
.render-block > .intro { margin-bottom: 20px; }
.fig-q { background: var(--fail-soft); color: var(--fail-text); font-weight: 700; padding: 0 4px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   REVIEW RAIL (not for publication) and CONFIRM placeholders
   Hidden with ?clean=1 (html.clean) or emptied by "build.py --clean".
   -------------------------------------------------------------------------- */
.review-rail { background: var(--ground); padding: 12px 0 0; }
.review-rail details { border: 2px dashed var(--ink); border-radius: var(--radius-card); background: var(--ground); padding: 0; }
.review-rail summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: var(--tap); padding: 8px 16px; }
.review-rail summary::-webkit-details-marker { display: none; }
.review-rail summary::before { content: "+"; font-weight: 700; width: 18px; text-align: center; }
.review-rail details[open] summary::before { content: "\2212"; }
.review-rail .rail-title { font-weight: 700; font-size: 15px; }
.review-rail .rail-count { font-size: 13px; color: var(--ink-2); }
.review-rail .rail-body { padding: 4px 16px 16px 48px; display: flex; flex-direction: column; gap: 8px; }
.review-rail .rail-body h2 { margin-top: 8px; }
.review-rail ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; max-width: 90ch; }
.review-rail code { font-family: var(--font-text); font-size: 0.92em; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0 4px; }
html.clean [data-review-rail] { display: none !important; }
mark.confirm { background: var(--fail-soft); color: var(--fail-text); font-weight: 600; padding: 0 4px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* --------------------------------------------------------------------------
   COMPANY AND TEAM PAGES: page hero, steps, founder block, two columns, offices
   -------------------------------------------------------------------------- */
.page-hero { display: flex; flex-direction: column; gap: 18px; padding-top: 48px; padding-bottom: 56px; }
.page-hero > * { max-width: 54rem; }
.subhead { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; color: var(--ink); max-width: 34em; }
.arrow-links { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin: 0; padding: 0; }
.arrow-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); font-weight: 600; font-size: 16px; color: var(--accent-deep); text-decoration: underline; text-underline-offset: 4px; }
.arrow-link:hover { color: var(--ink); }
.band-ink .arrow-link { color: var(--lemon); }
.band-ink .arrow-link:hover { color: var(--surface); }
.band-ink .small { color: var(--on-ink-body); }
.render-figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.render-figure figcaption { font-size: 12.5px; color: var(--ink-2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps li { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.steps li b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.steps li p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.founder-block { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; padding: 24px; }
.founder-block img { width: 100%; height: auto; border-radius: var(--radius-tile); background: var(--surface-2); }
.founder-block .who { display: flex; flex-direction: column; gap: 4px; }
.founder-block .who b { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.founder-block ul { margin: 12px 0 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two-col .card { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.two-col ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; line-height: 1.5; }
.returns { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 46em; }
.returns b { color: var(--ink); }
.offices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.offices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offices .card { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.offices address { font-style: normal; font-size: 15px; line-height: 1.6; }
.offices a { color: var(--accent-deep); font-weight: 600; }
.notfound-links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 40em; }
.notfound-links a { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 16px 18px; border-radius: var(--radius-tile); border: 1px solid var(--border); background: var(--surface); text-decoration: none; min-height: var(--tap); }
.notfound-links a:hover { border-color: var(--accent-deep); }
.notfound-links b { font-size: 17px; font-weight: 700; }
.notfound-links span { color: var(--ink-2); font-size: 15px; }

/* Forms: talk to us and follow */
.form-card { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 24px; align-items: start; }
.form-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.form-status { font-size: 14px; font-weight: 600; }
.form-error { border: 1.5px solid var(--fail); background: var(--fail-soft); color: var(--fail-text); border-radius: var(--radius-chip); padding: 12px 14px; font-size: 14px; font-weight: 600; }
.success { border: 1.5px solid var(--ink); border-radius: var(--radius-card); background: var(--surface); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.success:focus { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.success b { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.follow-card { padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.inline-field { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.inline-field .field { flex: 1 1 240px; }
.inline-field .btn { margin-top: 27px; }
.btn[disabled] { opacity: 0.7; cursor: progress; }

/* --------------------------------------------------------------------------
   LEGAL PAGES
   -------------------------------------------------------------------------- */
.legal-hero { display: flex; flex-direction: column; gap: 14px; padding-top: 40px; padding-bottom: 32px; }
.fact-strip { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; font-variant-numeric: var(--tabular); }
.fact-strip li { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-pill); padding: 4px 12px; }
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; padding-bottom: 72px; }
.toc { font-size: 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.toc a { display: block; padding: 6px 10px; border-left: 2px solid var(--border); color: var(--ink); text-decoration: none; line-height: 1.4; }
.toc a:hover { border-left-color: var(--accent-deep); background: var(--surface); }
.toc-wide { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.toc-mobile { display: none; }
.prose h2 { scroll-margin-top: 16px; }
.prose h2 .anchor { font-size: 0.8em; color: var(--ink-3); text-decoration: none; margin-left: 6px; opacity: 0; }
.prose h2:hover .anchor, .prose h2 .anchor:focus-visible { opacity: 1; color: var(--accent-deep); }
.prose h3 { scroll-margin-top: 16px; }
.prose code { font-family: var(--font-text); font-size: 0.92em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 0 4px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-tile); background: var(--surface); }
.table-scroll table { min-width: 560px; }

@media (max-width: 959px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .toc-wide { display: none; }
  .toc-mobile { display: block; border: 1px solid var(--border); border-radius: var(--radius-tile); background: var(--surface); }
  .toc-mobile summary { min-height: var(--tap); display: flex; align-items: center; padding: 0 14px; font-weight: 600; cursor: pointer; }
  .toc-mobile ol { padding: 0 8px 10px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .form-grid, .follow-card { grid-template-columns: minmax(0, 1fr); }
  .offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .subhead { font-size: 19px; }
  .founder-block { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .founder-block img { max-width: 220px; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .offices { grid-template-columns: minmax(0, 1fr); }
  .form-card, .follow-card { padding: 18px; }
  .inline-field .btn { margin-top: 0; width: 100%; }
  .review-rail .rail-body { padding-left: 16px; }
  .prose h2 .anchor { opacity: 1; }
}

/* --------------------------------------------------------------------------
   RENDER ANNOTATIONS: callout markers and rollout levels (team pages, home)
   Hidden by default; a page turns them on with .show-callouts / .show-levels.
   -------------------------------------------------------------------------- */
.callout-mark, .callout-svg, .level-tag { display: none; }
.show-callouts .callout-mark { display: inline-flex; }
.show-callouts .callout-svg { display: inline; }
.show-levels .level-tag { display: flex; }
.callout-mark { align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 99px; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 700; font-variant-numeric: var(--tabular); flex: none; }
.show-callouts .has-mark { position: relative; }
.show-callouts .tile.has-mark > .callout-mark, .show-callouts .bcard.has-mark > .callout-mark { position: absolute; top: -10px; left: -10px; outline: 3px solid var(--ground); }
.show-callouts .prow.has-mark .cls .callout-mark { margin-right: 8px; vertical-align: 2px; }
.show-callouts .callout-mark.inline { width: 20px; height: 20px; font-size: 11.5px; margin-right: 6px; font-family: var(--font-text); letter-spacing: 0; }
.level-tag { align-items: center; gap: 10px; margin: 6px 0 -4px; }
.level-tag span { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: var(--change-up); border-radius: var(--radius-pill); padding: 3px 10px; }
.level-tag::after { content: ""; flex: 1; height: 1px; background: var(--muted); }
.callouts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.callouts li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--border); }
.callouts li .callout-mark { display: inline-flex; }
.callouts p { font-size: 15px; line-height: 1.5; }
.callouts .src { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.levels li { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius-tile); border: 1px solid var(--border); background: var(--surface); }
.levels .level-tag { display: flex; margin: 0; }
.levels .level-tag::after { display: none; }
.levels p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.render-note { font-size: 15px; color: var(--ink-2); }

/* DA oversight flow and step detail */
.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.flow li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.flow li:last-child { border-bottom: 0; }
.flow .fn { width: 28px; height: 28px; border-radius: 99px; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.flow li.dec .fn { border-style: dashed; border-radius: 6px; transform: rotate(45deg); width: 22px; height: 22px; margin-left: 3px; }
.flow li.dec .fn { font-size: 0; }
.flow li.failed .fn { background: var(--fail); border-color: var(--fail); color: var(--surface); }
.flow .main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flow .t { font-size: 14px; font-weight: 600; }
.flow .m { font-size: 12.5px; color: var(--ink-2); }
.flow .side { display: flex; gap: 6px; }
.io { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.io ul { margin: 6px 0 0; padding-left: 1.1em; font-size: 13.5px; line-height: 1.5; }
.teams li.you .tn { text-decoration: underline; text-underline-offset: 3px; }

/* Team pages: problem lists, lens cards, exchange, beliefs, sources */
.need-list { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; line-height: 1.5; }
.faded .need-list { color: var(--ink-2); }
.lens { padding: 22px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.lens h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.lens dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lens dt { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.lens dd { margin: 0; font-size: 15px; line-height: 1.5; }
.lens .example { margin-top: auto; border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.lens .example .num { font-size: calc(24px * var(--num-scale)); }
.lens .example p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.exchange { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.exchange .card { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.exchange ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.5; }
.exchange .give { border: 2px solid var(--ink); }
.thinks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.thinks li { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.thinks b { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.thinks p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.proof-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.proof-links a, .proof-links .is-soon { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-tile); background: var(--surface); text-decoration: none; color: var(--ink); min-height: var(--tap); }
.proof-links a:hover:not([aria-disabled="true"]) { border-color: var(--accent-deep); }
.proof-links b { font-size: 16px; font-weight: 700; }
.proof-links span.m { font-size: 14px; color: var(--ink-2); font-variant-numeric: var(--tabular); }
.follow-note { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.sources { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.sources summary { cursor: pointer; min-height: var(--tap); display: inline-flex; align-items: center; font-weight: 600; color: var(--ink); }
.sources summary::after { content: "+"; margin-left: 8px; font-weight: 700; color: var(--accent-deep); }
.sources[open] summary::after { content: "\2212"; }
.sources ul { margin: 4px 0 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; max-width: 90ch; }
.sources a { color: var(--accent-deep); word-break: break-word; }

@media (max-width: 959px) {
  .callouts, .levels, .thinks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .exchange, .io { grid-template-columns: minmax(0, 1fr); }
  .show-callouts .tile.has-mark > .callout-mark, .show-callouts .bcard.has-mark > .callout-mark { top: -8px; left: -6px; }
}

/* --------------------------------------------------------------------------
   RISK TAXONOMY RENDER (render-home), CAPITAL CARD, NAME PILLS
   -------------------------------------------------------------------------- */
.tax-head { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; }
.tax-scr { display: flex; flex-direction: column; gap: 4px; position: relative; }
.tax-scr .num { font-size: calc(36px * var(--num-scale)); }
.tax-scr .cap { font-size: 13px; color: var(--ink-2); }
.tax-meta { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.tax { display: flex; flex-direction: column; }
.tax-row { display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(180px, 1.6fr) 56px minmax(200px, 1.4fr) 100px; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.tax-colhead { padding: 0 0 8px; }
.tax-colhead span { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.tax-row .tc-name { display: flex; flex-direction: column; gap: 2px; }
.tax-row .tc-name b { font-size: 15.5px; font-weight: 700; }
.tax-row .m { font-size: 12.5px; color: var(--ink-2); }
.tax-row .tc-bar { display: flex; flex-direction: column; gap: 6px; }
.tax-row .tc-bar .bar { height: 10px; }
.tax-row .v { font-size: 13px; color: var(--ink-2); }
.tax-row .v b { color: var(--ink); font-size: 14px; }
.tax-row .cell-k { display: none; }
.tax-row.is-open { border-bottom: 0; }
.tax-row.is-open .tc-name b::after { content: " ▾"; color: var(--ink-3); font-weight: 400; }
.tax-row.is-muted .tc-name b, .tax-row.is-muted .tc-n { color: var(--ink-2); }
.tc-high { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hi-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.tax-sub { border-bottom: 1px solid var(--border); padding: 0 0 16px; }
.tax-sub-inner { margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--muted); display: flex; flex-direction: column; gap: 8px; }
.subs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.subs li { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(120px, 1fr) minmax(220px, 1.6fr) auto; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.subs li:last-child { border-bottom: 0; }
.subs .sn { display: flex; flex-direction: column; gap: 1px; }
.subs .sn b { font-weight: 600; }
.subs .sr { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.subs .ss { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cap-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cap-bars li { display: flex; flex-direction: column; gap: 5px; }
.cap-bars .top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-variant-numeric: var(--tabular); }
.cap-bars .top b { font-weight: 600; }
.cap-bars .bar { height: 12px; background: var(--surface); border: 1px solid var(--border); }
.cap-scr { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cap-scr .num { font-size: calc(30px * var(--num-scale)); }
.name-pills { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.name-pills li { font-family: var(--font-text); font-size: 14px; font-weight: 600; color: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--radius-pill); padding: 6px 14px; background: var(--surface); }
.plan-3 .plan-head, .plan-3 .prow { grid-template-columns: minmax(170px, 1.2fr) minmax(200px, 1.4fr) minmax(200px, 1.2fr); }
.linked { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); }
.unlinked { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: 12px; }

/* --------------------------------------------------------------------------
   ORG CHART (render-org): nodes, connectors, side panel / bottom sheet
   -------------------------------------------------------------------------- */
.org { display: flex; flex-direction: column; gap: 14px; }
.org-hint { font-size: 14px; color: var(--ink-2); }
.org-chart { position: relative; }
.org-lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.org-grid { list-style: none; margin: 0 0 30px; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas:
  ". agency agency ."
  "dubai s9146 s9147 fronting"; gap: 48px 36px; align-items: stretch; }
.org-node { display: flex; }
.org-node[data-area="agency"] { grid-area: agency; }
.org-node[data-area="s9146"] { grid-area: s9146; }
.org-node[data-area="s9147"] { grid-area: s9147; }
.org-node[data-area="dubai"] { grid-area: dubai; }
.org-node[data-area="fronting"] { grid-area: fronting; }
.org-btn { font: inherit; text-align: left; width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--surface); color: var(--ink); border: 1.5px solid var(--border-strong); border-radius: var(--radius-card); cursor: pointer; min-height: var(--tap); position: relative; z-index: 1; }
.org-btn:hover { border-color: var(--ink); }
.org-btn[aria-expanded="true"] { border: 2px solid var(--ink); background: var(--surface-2); }
.org-btn b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.org-role { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.org-figs { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink-2); }
.org-figs .num { font-size: calc(22px * var(--num-scale)); color: var(--ink); }
.org-open { font-size: 13px; font-weight: 600; color: var(--accent-deep); margin-top: 2px; }
.org-top .org-btn { border: 2px solid var(--ink); }
.org-partner .org-btn { border-style: dashed; background: var(--ground); }
.org-key .key-dash { background: none; border-top: 2px dashed var(--ink); height: 0; width: 18px; border-radius: 0; }
.org-foot { font-size: 13px; color: var(--ink-2); }
html.org-locked { overflow: hidden; }
.org-backdrop { position: fixed; inset: 0; background: rgba(31, 70, 81, 0.45); z-index: 40; }
.org-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%; z-index: 41; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; overflow-y: auto; }
.org-panel[hidden], .org-backdrop[hidden] { display: none; }
.org-grab { display: none; }
.org-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.org-panel-head .bcard-title { font-size: 20px; margin-top: 4px; }
.org-close { width: var(--tap); height: var(--tap); flex: none; border-radius: var(--radius-pill); border: 1.5px solid var(--ink); background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.prods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.prod { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.prod-total { background: var(--surface-2); margin: 0 -10px; padding: 14px 10px; border-radius: var(--radius-tile); border-bottom: 0; }
.prod-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.prod-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prod-name b { font-size: 15px; font-weight: 700; }
.prod .m { font-size: 12.5px; color: var(--ink-2); margin: 0; }
.prod-bars { display: flex; flex-direction: column; gap: 4px; }
.prod .pl { font-size: 12.5px; color: var(--ink-2); }
.prod .pl b { color: var(--ink); font-size: 13.5px; }
.pbar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--ink-3); gap: 1px; }
.pbar + .pl { margin-top: 4px; }
.prod-bars .pbar:last-child { background: var(--border); }
.lr { display: flex; gap: 4px; flex: none; }
.lr-c { width: 34px; height: 34px; border-radius: 99px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.lr-c b { font-size: 12px; font-weight: 700; font-variant-numeric: var(--tabular); }
.lr-c i { font-style: normal; font-size: 7.5px; font-weight: 700; letter-spacing: 0.06em; margin-top: 1px; }
.lr-att { background: #F4B6A8; color: var(--ink); }
.lr-lrg { background: var(--fail); color: var(--surface); }
.lr-cat { background: #7A1A10; color: var(--surface); }
.org-panel-key { margin-top: auto; }

@media (max-width: 959px) {
  .tax-colhead { display: none; }
  .tax-row { grid-template-columns: 1fr 1fr 1fr; gap: 8px 14px; }
  .tax-row .tc-name, .tax-row .tc-bar { grid-column: 1 / -1; }
  .tax-row .cell-k { display: block; font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
  .subs li { grid-template-columns: 1fr 1fr; }
  .subs .sr, .subs .ss { grid-column: 1 / -1; justify-content: flex-start; }
  .tax-meta { text-align: left; }
  .plan-3 .prow { grid-template-columns: 1fr 1fr; }
  /* org chart becomes a vertical tree */
  .org-lines, .org-key { display: none; }
  .org-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "agency" "s9146" "dubai" "s9147" "fronting"; gap: 10px; margin-bottom: 0; }
  .org-node:not(.org-top) { margin-left: 18px; padding-left: 16px; border-left: 2px solid var(--muted); }
  .org-partner, .org-plat { margin-left: 52px !important; border-left-style: dashed !important; }
}
@media (max-width: 599px) {
  .tax-row { grid-template-columns: 1fr 1fr; }
  .tax-row > :last-child { grid-column: 1 / -1; }
  .tax-sub-inner { margin-left: 4px; padding-left: 10px; }
  .subs li { grid-template-columns: 1fr; gap: 6px; }
  .plan-3 .prow { grid-template-columns: 1fr; }
  .org-node:not(.org-top) { margin-left: 8px; padding-left: 12px; }
  .org-partner, .org-plat { margin-left: 32px !important; }
  .org-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 85vh; border-left: 0; border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; padding: 10px 16px 20px; }
  .org-grab { display: block; width: 44px; height: 5px; border-radius: 99px; background: var(--muted); margin: 0 auto 2px; }
}

/* --------------------------------------------------------------------------
   BREAKPOINTS (DESIGN-LANGUAGE.md §5): mobile up to 599, tablet 600 to 959, web 960+
   The primary nav collapses below 960px because it carries five items plus a button.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 959px) {
  .hero-card-col { max-width: 560px; }
  .nav-main { display: none; }
  .nav-cta { margin-left: auto; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); padding: 0; border: 1.5px solid var(--ink); border-radius: var(--radius-pill); background: transparent; color: var(--ink); cursor: pointer; flex: none; }
  .menu-btn svg { width: 20px; height: 20px; }
  .menu-btn .i-close { display: none; }
  .menu-btn[aria-expanded="true"] .i-open { display: none; }
  .menu-btn[aria-expanded="true"] .i-close { display: block; }
  .menu-panel { position: absolute; left: var(--gutter); right: var(--gutter); top: 100%; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 8px; max-height: calc(100vh - 90px); overflow-y: auto; }
  .menu-panel:not([hidden]) { display: block; }
  .menu-panel ul { list-style: none; margin: 0; padding: 0; }
  .menu-panel a, .menu-panel .is-soon { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 12px; border-radius: var(--radius-chip); font-size: 17px; font-weight: var(--w-ui); text-decoration: none; color: var(--ink); }
  .menu-panel a:hover:not([aria-disabled="true"]) { background: var(--surface-2); }
  .menu-panel .menu-label { padding: 14px 12px 4px; }
  .menu-panel .group a, .menu-panel .group .is-soon { font-size: 16px; padding-left: 20px; }
  .menu-panel > ul > li + li { border-top: 1px solid var(--border); }
  .menu-panel { max-height: calc(100dvh - 90px); overscroll-behavior: contain; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .menu-signoff { margin: 12px 0 0; padding: 24px 12px 28px; border-top: 1px solid var(--border); font-family: var(--font-text); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
  .board-grid.split { grid-template-columns: minmax(0, 1fr); }
  .tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-head { display: none; }
  .prow { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .prow .cell:first-child { grid-column: 1 / -1; }
  .prow .cell-k { display: block; font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
}
@media (max-width: 599px) {
  :root { --gutter: 16px; }
  .section { padding-top: 48px; padding-bottom: 48px; }
  .display { font-size: var(--fs-display-m); }
  .h2 { font-size: var(--fs-h2-m); }
  .h2-sm { font-size: var(--fs-h2-sm-m); }
  .lead { font-size: 18px; }
  .body-lg { font-size: 16.5px; }
  .founder .quote { font-size: 19px; }
  .nav-bar { gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .brand img { height: 42px; } /* S24: +31% (was 32px) */
  .nav-cta { padding: 0 16px; }
  .hero { padding-top: 24px; padding-bottom: 48px; gap: 32px; }
  .hero-copy { flex-basis: 100%; gap: 18px; }
  .hero-card-col { flex-basis: 100%; max-width: none; }
  .btns .btn { flex: 1 1 auto; }
  .demo { padding: 14px; }
  .compare > div { flex-basis: 100%; padding: 18px; }
  .grid-reports { grid-template-columns: 1fr; }
  .belief, .report { padding: 18px; }
  .cta { padding-top: 48px; padding-bottom: 40px; }
  .board-title { font-size: 22px; }
  .bcard { padding: 14px; }
  .prow { grid-template-columns: 1fr; }
  .claims li { grid-template-columns: 1fr; gap: 6px; }
  .claims .v { text-align: left; }
  .teams li { grid-template-columns: minmax(96px, 120px) minmax(0, 1fr) 40px; }
  .scroll-hint { display: block; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { flex-direction: column; }
  .rows > li { flex-wrap: wrap; }
  .rows .side { flex-direction: row; align-items: center; flex-wrap: wrap; text-align: left; }
}
/* S24 founder fix: footer lockup and line under it read larger on phones (desktop unchanged). 48px = 1.5x the 32px phone logo. */
@media (max-width: 720px) {
  .site-footer .footer-brand img { height: 48px; }
  .footer-brand p { font-size: 16.5px; }
  .footer-brand p.footer-signoff { font-size: 17px; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .report, .nav-trigger { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
}
@media print {
  .site-header, .menu-panel, .skip { display: none; }
}

/* ==========================================================================
   R7 · FOUNDER FEEDBACK (Oct 2026): risk landscape dashboard, section break,
   About and About Halden dashboards, founder tags, line-of-business cards.
   New classes only; nothing above is renamed.
   ========================================================================== */

/* ---- Risk landscape accordion (render-home). Folder accordion: chevron, 14px indent, 2px guide ---- */
.explore-hint { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: var(--lemon); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 14px; font-weight: var(--w-ui); letter-spacing: var(--track-ui); line-height: 1.3; }
.explore-hint svg { flex: none; }
.hint-tap { display: none; }
@media (hover: none) and (pointer: coarse) { .hint-click { display: none; } .hint-tap { display: inline; } }
.rl { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.rl-colhead, .rl-row { display: grid; grid-template-columns: 24px minmax(170px, 1.25fr) minmax(190px, 1.6fr) 112px 150px; gap: 16px; align-items: center; }
.rl-colhead { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); }
.rl-colhead span { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.rl-colhead span:first-child { grid-column: 2; }
.rl-item { border-bottom: 1px solid var(--border); }
.rl-h { margin: 0; font: inherit; }
.rl-row { width: 100%; min-height: 64px; padding: 12px; border: 0; border-radius: var(--radius-tile); background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; font-size: 14px; }
.rl-row:hover { background: var(--surface-2); }
.rl-row:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: -2px; }
.rl-item.is-open .rl-row { background: var(--surface-2); border-radius: var(--radius-tile) var(--radius-tile) 0 0; }
.rl-chev { width: 24px; height: 24px; border-radius: 99px; border: 1.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease; }
.rl-row[aria-expanded="true"] .rl-chev { transform: rotate(90deg); background: var(--ink); color: var(--surface); }
.rl-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rl-name b { font-size: 15.5px; font-weight: 700; }
.rl-row .m { font-size: 12.5px; color: var(--ink-2); }
.rl-scr { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rl-scr .bar { height: 10px; }
.rl-scr .v { font-size: 13px; color: var(--ink-2); }
.rl-scr .v b { color: var(--ink); font-size: 14px; }
.rl-app { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rl-cap { font-size: 11.5px; color: var(--ink-2); padding-left: 2px; }
.rl-unset { font-size: 12.5px; font-weight: 600; color: var(--ink-2); border: 1px dashed var(--ink-3); border-radius: var(--radius-pill); padding: 1px 9px; }
/* Control exceptions badge: ✕ ineffective (red outline only when above zero) · ◐ partial */
.xb { display: inline-flex; justify-self: start; }
.xb-v { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ink-3); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 13px; font-weight: 600; font-variant-numeric: var(--tabular); white-space: nowrap; color: var(--ink); background: var(--surface); }
.xb-i { color: var(--ink-2); }
.xb-i.is-on { color: var(--fail-text); font-weight: 700; }
.xb-v:has(.is-on) { border: 1.5px solid var(--fail); }
.xb-sep { color: var(--ink-3); }
.xb.is-none > span[aria-hidden] { font-size: 12.5px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 2px 10px; }
.rl-panel { padding: 4px 12px 16px; background: var(--surface-2); border-radius: 0 0 var(--radius-tile) var(--radius-tile); }
.rl-panel-inner { margin-left: 11px; padding-left: 14px; border-left: 2px solid var(--muted); display: flex; flex-direction: column; gap: 10px; }
.rl-driver { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13.5px; line-height: 1.45; padding-top: 6px; }
.rl-driver .label { color: var(--ink); }
.rl-panel .subs li { border-bottom-color: var(--muted); }
.rl-panel .subs .ss { align-items: center; }
.rl-panel .subs .bar { background: var(--surface); border: 1px solid var(--border); }
/* First-row nudge until the visitor opens a class */
@media (prefers-reduced-motion: no-preference) {
  .rl:not(.explored) .rl-item:first-of-type .rl-chev { animation: rl-nudge 1.8s ease-in-out 1s 4; }
  @keyframes rl-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); background: var(--change-up); } }
}
/* One callout marker, on the operational row */
.show-callouts .rl-item.has-mark { position: relative; }
.show-callouts .rl-item.has-mark .callout-mark { position: absolute; left: -14px; top: 10px; outline: 3px solid var(--surface); z-index: 1; }
.callouts.callouts-1 { grid-template-columns: minmax(0, 40em); }

/* ---- Section break: makes the beliefs section unmistakably its own ---- */
.band-think { background: var(--surface); border-top: 3px solid var(--ink); }
.section-break { display: flex; align-items: center; gap: 14px; }
.section-break::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }
.section-break .label { color: var(--ink); }

/* ---- Problem card: heat map centred in its card ---- */
.compare .faded > .heat { margin: auto; width: 100%; }

/* ---- About: hero and sections with a visual on the right ---- */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; padding-top: 48px; padding-bottom: 56px; }
.hero-split .page-hero { padding: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: center; }
.mini-dash, .mini-org { max-width: 460px; width: 100%; justify-self: end; }
.mini-scr { display: flex; align-items: baseline; gap: 10px; }
.mini-scr .num { font-size: calc(26px * var(--num-scale)); }
.mini-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mini-rows li { display: grid; grid-template-columns: 96px minmax(40px, 1fr) 88px 92px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.mini-rows li:last-child { border-bottom: 0; }
.mini-rows .mn { font-weight: 600; }
.mini-rows .mv { font-size: 12.5px; color: var(--ink-2); text-align: right; }
.mini-rows .pill { justify-self: start; }
.mini-unset { font-size: 12px; font-weight: 600; color: var(--ink-2); border: 1px dashed var(--ink-3); border-radius: var(--radius-pill); padding: 1px 8px; justify-self: start; white-space: nowrap; }
.mo-tree { list-style: none; margin: 0; padding: 0; }
.mo-top { display: flex; flex-direction: column; gap: 4px; border: 2px solid var(--ink); border-radius: var(--radius-tile); padding: 12px 14px; }
.mo-top > b { font-size: 16px; font-weight: 700; }
.mo-fig { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.mo-fig .num { font-size: calc(22px * var(--num-scale)); color: var(--ink); }
.mo-top ul { list-style: none; margin: 10px 0 0 6px; padding: 0 0 0 14px; border-left: 2px solid var(--muted); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mo-top ul li { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-chip); padding: 8px 10px; background: var(--surface); }
.mo-top ul li.mo-partner { border-style: dashed; background: var(--ground); }
.mo-top ul b { font-size: 13.5px; font-weight: 700; }
.mo-top ul .m { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.mo-lens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mo-lens li { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: var(--tint); border-radius: var(--radius-pill); padding: 3px 9px; }
/* Compact use-case list */
.uc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); max-width: 34em; }
.uc-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.4; }
.uc-list li span { color: var(--ink-2); }
.uc-list li b { color: var(--ink); font-weight: 700; }
.uc-list .tag { align-self: center; flex: none; }

/* ---- Founder tags: small, colour-coded by type (outline + dot), text stays indigo ---- */
.org-tags { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.org-tags li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink); border: 1.5px solid var(--tg); border-radius: var(--radius-pill); padding: 3px 9px 3px 7px; background: var(--surface); }
.org-tags li::before, .tag-legend li::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--tg); flex: none; }
.tg-reg { --tg: #1F4651; } .tg-lloyds { --tg: #6B4FA0; } .tg-market { --tg: #2F6FB5; } .tg-consult { --tg: #1E9E9E; }
.tag-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); }
.tag-legend li { display: inline-flex; align-items: center; gap: 6px; }

/* ---- About Halden: key-figure tiles ---- */
.kf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.kf .tile .num { font-size: calc(26px * var(--num-scale)); }
.kf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
.kf-row .tile .num { font-size: calc(22px * var(--num-scale)); }
.kf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kf-list li { font-size: 13px; color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 2px 10px; font-variant-numeric: var(--tabular); background: var(--surface); }
.kf-list li b { font-weight: 700; }
.real-block { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.real-block .card { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.real-block ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; line-height: 1.5; }

/* ---- Org chart panel: line-of-business cards (2 columns web, 1 column sheet) ---- */
.org-panel { width: 560px; }
.org-btn .org-open { margin-top: auto; padding-top: 4px; }
.lobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lob { border: 1px solid var(--border-strong); border-radius: var(--radius-tile); background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lob-top { display: flex; flex-direction: column; gap: 4px; }
.lob-name { display: flex; flex-direction: column; gap: 1px; }
.lob-name b { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.lob-name .m { font-size: 12px; color: var(--ink-2); }
.lob-gwp { font-size: calc(22px * var(--num-scale)); }
.lob-ri { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.lob-ri b { color: var(--ink); }
.lob-bar { height: 6px; }
.lob-bar > span { background: var(--ri-2); }
.lob-ch { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.lob-ch li { font-size: 11.5px; line-height: 1.3; color: var(--ink); background: var(--tint); border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap; }
.lob-ch li b { font-weight: 700; }
.org-panel-note { margin-top: auto; }

@media (max-width: 959px) {
  .hero-split, .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mini-dash, .mini-org { justify-self: start; max-width: 560px; }
  .kf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kf-row { grid-template-columns: minmax(0, 1fr); }
  .rl-colhead { display: none; }
  .rl-row { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "chev name name" ". scr scr" ". app xb"; gap: 8px 12px; }
  .rl-chev { grid-area: chev; align-self: start; margin-top: 2px; }
  .rl-name { grid-area: name; }
  .rl-scr { grid-area: scr; }
  .rl-app { grid-area: app; flex-direction: row; align-items: center; gap: 6px; }
  .rl-row > .xb { grid-area: xb; justify-self: end; }
}
@media (max-width: 599px) {
  .rl-row { padding: 12px 8px; }
  .rl-panel { padding: 4px 8px 14px; }
  .rl-panel-inner { margin-left: 11px; padding-left: 10px; }
  .show-callouts .rl-item.has-mark .callout-mark { left: -10px; top: 8px; }
  .mini-rows li { grid-template-columns: 84px minmax(24px, 1fr) auto; }
  .mini-rows li .pill, .mini-rows li .mini-unset { grid-column: 2 / -1; }
  .mo-top ul { grid-template-columns: minmax(0, 1fr); }
  .real-block { grid-template-columns: minmax(0, 1fr); }
  .lobs { grid-template-columns: minmax(0, 1fr); }
  .org-panel { width: 100%; }
  .uc-list li { flex-wrap: wrap; }
}

/* ---- About problem visual: two packs, read apart ---- */
.packs { display: flex; flex-direction: column; align-items: stretch; gap: 0; max-width: 420px; width: 100%; justify-self: end; }
.pack { border: 1.5px solid var(--border-strong); border-radius: var(--radius-tile); background: var(--ground); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.pack ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pack li { font-size: 14px; font-weight: 600; border: 1px solid var(--ink-3); border-radius: var(--radius-pill); padding: 3px 12px; background: var(--surface); }
.pack-biz { border: 2px solid var(--ink); }
.pack-risk { border-style: dashed; }
.pack-risk li { color: var(--ink-2); }
.pack-gap { display: flex; align-items: center; justify-content: center; height: 44px; position: relative; }
.pack-gap::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed var(--muted); }
.pack-gap span { position: relative; font-size: 12.5px; color: var(--ink-2); background: var(--surface); padding: 0 8px; }

/* ---- Worked examples on indigo ---- */
.band-ink .uc-list { border-top-color: rgba(188, 200, 203, 0.35); }
.band-ink .uc-list li { border-bottom-color: rgba(188, 200, 203, 0.35); }
.band-ink .uc-list li span { color: var(--on-ink-body); }
.band-ink .uc-list li b { color: var(--surface); }
.band-ink .uc-list .tag-live { background: var(--lemon); color: var(--ink); }
.band-ink .uc-list .tag-next { color: var(--on-ink-2); border-color: var(--on-ink-2); }
.band-ink .mini-org .label { color: var(--ink-2); }
.band-ink .mini-org .tag-live { background: var(--ink); color: var(--lemon); }
.mini-org { color: var(--ink); }

@media (max-width: 959px) {
  .packs { justify-self: start; }
}
/* Subclass rows in the risk landscape: fixed columns so bars and badges align row to row */
.rl-panel .subs li { grid-template-columns: minmax(190px, 1.2fr) 120px minmax(220px, 1.8fr) 200px; }
@media (max-width: 959px) { .rl-panel .subs li { grid-template-columns: minmax(0, 1fr) 120px; } }
@media (max-width: 599px) { .rl-panel .subs li { grid-template-columns: minmax(0, 1fr); } }
/* Founder tags sit inside .founder-block, whose generic ul rule stacks lists: restore the inline row */
.founder-block .org-tags, .founder-block .tag-legend { flex-direction: row; padding-left: 0; font-size: 12.5px; }
.founder-block .org-tags { margin: 6px 0 0; gap: 6px; }
.founder-block .tag-legend { margin: 10px 0 0; gap: 4px 14px; }

/* ==========================================================================
   R8 · founder photo (option B, default since S23) and card text on indigo
   ========================================================================== */
.band-ink .card .small, .band-ink .card .caption { color: var(--ink-2); }
.band-ink .mini-dash { color: var(--ink); }
.founder-photo { display: block; }
.founder-photo img { display: block; }
/* Founder photo: circular head-and-shoulders crop beside the name, bio wider. Crop and position only. */
.founder-block { grid-template-columns: 132px minmax(0, 1fr); gap: 24px; align-items: start; }
.founder-photo { width: 132px; height: 132px; border-radius: 99px; overflow: hidden; position: relative; border: 2px solid var(--ink); background: var(--surface-2); }
.founder-photo img { position: absolute; width: 230px; max-width: none; height: auto; left: -54px; top: -26px; border-radius: 0; }
@media (max-width: 599px) {
  .founder-block { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .founder-photo { width: 96px; height: 96px; }
  .founder-photo img { width: 168px; left: -39px; top: -19px; max-width: none; }
  .founder-block .org-tags, .founder-block .tag-legend, .founder-block #worked-with { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .founder-block { align-items: center; row-gap: 10px; }
  .founder-block > div:not(.founder-photo) { display: contents; }
  .founder-block #worked-with { margin-top: 4px !important; }
}

/* R8b: plan tiles in four columns; solvency "today" tile set apart from the plan row */
.kf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kf-today { display: flex; flex-direction: column; gap: 10px; border-top: 1px dashed var(--border-strong); padding-top: 16px; margin-top: 6px; }
.kf-row-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 959px) { .kf { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kf-row-1 { grid-template-columns: minmax(0, 1fr); } }

/* Unbuilt pages render as text (span.is-soon), never href="#". Report cards drop their "See the report" line. */
.is-soon:hover { background: none !important; }
.report.is-soon .more { display: none; }
.report.is-soon:hover { border-color: var(--border); }
.report .soon { align-self: flex-start; margin: auto 0 0; }

/* ==========================================================================
   P9 · Use cases, How we see it, Bring your own AI, Blog
   ========================================================================== */
/* Use cases and blog cards */
.uc-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.uc-card { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.uc-card.is-live { border: 2px solid var(--ink); }
.uc-card p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.uc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.uc-facts { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--ink-2); }
.uc-facts b { color: var(--ink); }
.post-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.post-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; border-style: dashed; border-color: var(--muted); }
.post-card p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* How we see it: one belief per band, visual on the right */
.belief-row .intro .step { margin-bottom: 4px; }
.belief-vis { display: flex; justify-content: flex-end; min-width: 0; }
.belief-vis > * { max-width: 460px; width: 100%; }
.mini-tube .mt-svg { width: 100%; height: auto; }
.mini-tube text { font-family: var(--font-text); font-size: 12px; fill: var(--ink); }
.mini-tube .key-stop { font-weight: 700; }
.mini-tube .fail-stop { font-weight: 700; fill: var(--fail-text); }
.mt-x { color: var(--fail-text); font-weight: 700; }
.ms-src { display: flex; flex-direction: column; gap: 2px; font-size: 14px; border-top: 1px solid var(--border); padding-top: 10px; }

/* AI: five-step flow */
.ai-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.ai-step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-tile); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.ai-step b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.ai-step p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ai-step:nth-child(4) { border: 2px solid var(--ink); }
.ai-step + .ai-step::before { content: "→"; position: absolute; left: -12px; top: 22px; width: 12px; text-align: center; color: var(--ink-3); font-weight: 700; }
.opt-table th[scope="row"] { font-family: var(--font-text); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: normal; }
.opt-table { min-width: 620px; }

/* Static Teams approval card mock */
.teams-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; max-width: 460px; width: 100%; justify-self: end; margin: 0; }
.tc-body { border: 1px solid var(--border-strong); border-left: 4px solid var(--ink); border-radius: var(--radius-tile); background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.tc-from { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.tc-from > span:last-child { display: flex; flex-direction: column; }
.tc-from .m { font-size: 12.5px; color: var(--ink-2); }
.tc-av { width: 32px; height: 32px; border-radius: 8px; background: var(--ink); color: var(--lemon); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-data); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; flex: none; }
.tc-q { font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.tc-meta { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.tc-meta div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.tc-meta dt { color: var(--ink-2); }
.tc-meta dd { margin: 0; }
.tc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1.5px solid var(--ink); font-size: 14px; font-weight: 600; color: var(--ink); background: var(--surface); }
.tc-primary { background: var(--ink); color: var(--surface); }
.hero-split .teams-card { justify-self: end; }

@media (max-width: 959px) {
  .ai-flow { grid-template-columns: minmax(0, 1fr); }
  .ai-step + .ai-step::before { content: "↓"; left: 20px; top: -14px; width: auto; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belief-vis { justify-content: flex-start; }
  .teams-card, .hero-split .teams-card { justify-self: start; }
}
@media (max-width: 599px) {
  .uc-cards, .post-grid { grid-template-columns: minmax(0, 1fr); }
  .uc-card { padding: 18px; }
  .tc-meta div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.footer-col .is-soon { flex-wrap: wrap; row-gap: 2px; } .footer-col .is-soon .soon { margin-left: 6px; }
.belief-vis figure, .mini-tube, .mini-source { margin: 0; }

/* ---- P9b: deck fit ---- */
.uc-cards > li:last-child:nth-child(odd) { grid-column: auto; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--ink-2); }
.tc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.ai-how .ai-flow { grid-template-columns: minmax(0, 1fr); }
.ai-how .ai-step + .ai-step::before { content: "↓"; left: 22px; top: -14px; width: auto; }
.ask-card { max-width: 460px; width: 100%; justify-self: end; margin: 0; }
.ask-q { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; border-left: 3px solid var(--ink); padding-left: 12px; }
.ask-a { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.ask-a b { color: var(--ink); }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.faq-item p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.principles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 28px 0; border-top: 1px solid var(--border); align-items: center; }
.pr.pr-vis { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.pr-text { display: flex; flex-direction: column; gap: 10px; max-width: 40em; }
.pr-text p { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.pr-n { font-family: var(--font-data); font-weight: 700; font-size: calc(22px * var(--num-scale)); color: var(--ink); line-height: 1; }
.mini-tube .fail-note { font-size: 11px; fill: var(--fail-text); font-variant-numeric: tabular-nums; }
.team-links a { flex-wrap: wrap; }
.post-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-card .h3 { font-size: 17.5px; }
@media (max-width: 959px) {
  .pr.pr-vis { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .ask-card { justify-self: start; }
}
@media (max-width: 599px) {
  .post-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
.proof-links .is-soon .soon { margin-left: auto; }

/* ==========================================================================
   S23 · founder feedback round 1 (Home and About)
   ========================================================================== */
/* G4: secondary text steps back on phones. Content stays in the HTML for crawlers. */
@media (max-width: 599px) { .m-hide { display: none !important; } }

/* G6: 5x5 heat map, likelihood A to E across, impact 1 to 5 up, red top right (E5).
   Cell bands by likelihood x impact: high 15+, medium 8 to 12, low up to 6. */
:root { --rr-lo: #D5EAD2; --rr-md: #F4DFA6; --rr-hi: #EBAE9F; --rr-lo-line: #3BAA5C; --rr-md-line: #C18F22; --rr-hi-line: #C2412A; }
.heat-fig { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ylab grid" ". xlab"; gap: 4px 6px; align-items: center; width: 100%; max-width: 300px; margin: auto; }
.heat-fig .heat { grid-area: grid; }
.heat.heat-axes { grid-template-columns: 16px repeat(5, minmax(0, 1fr)); gap: 5px; max-width: none; width: 100%; }
.heat-axes .hc { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; font-variant-numeric: var(--tabular); color: var(--ink); }
.heat-axes .hy, .heat-axes .hx { aspect-ratio: auto; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-variant-numeric: var(--tabular); color: var(--ink-2); }
.heat-axes .hx { padding-top: 2px; }
.hc-lo { background: var(--rr-lo); } .hc-md { background: var(--rr-md); } .hc-hi { background: var(--rr-hi); }
.heat-ylab { grid-area: ylab; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.heat-xlab { grid-area: xlab; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); text-align: center; padding-left: 21px; }
.compare .faded > .heat-fig { margin: auto; }

/* G6: residual rating box beside each risk title, coloured like its 5x5 cell. Letter plus number carries the meaning. */
.rr { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 22px; padding: 0 6px; border-radius: 4px; border: 1px solid; font-size: 12px; font-weight: 700; font-variant-numeric: var(--tabular); color: var(--ink); line-height: 1; flex: none; }
.rr-lo { background: var(--rr-lo); border-color: var(--rr-lo-line); }
.rr-md { background: var(--rr-md); border-color: var(--rr-md-line); }
.rr-hi { background: var(--rr-hi); border-color: var(--rr-hi-line); }
.subs .sr { align-items: center; flex-wrap: nowrap; }
.subs .sr .rt { min-width: 0; flex: 1 1 auto; }
.subs .sr .id { flex: none; }
.rr-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.rr-legend .rr { min-width: 30px; height: 20px; font-size: 11.5px; }

/* Home "What we think": no rule above the band, no line beside the label (founder S23) */
.band-think.band-plain { border-top: 0; }

/* About: founder photo circle as tall as the text beside it (about 168px at desktop),
   centred so the space above equals the space below (founder S23) */
@media (min-width: 600px) {
  .founder-block { grid-template-columns: 168px minmax(0, 1fr); align-items: center; }
  .founder-photo { width: 168px; height: 168px; }
  .founder-photo img { width: 293px; left: -69px; top: -33px; }
}

/* --------------------------------------------------------------------------
   COOKIE BANNER (assets/consent.js). A region, not a modal: the page stays usable.
   Three choices of equal weight. Sits below detail sheets (z 40+) and above menus (z 30).
   -------------------------------------------------------------------------- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--surface); color: var(--ink); border-top: 1.5px solid var(--ink); max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; }
.consent[hidden] { display: none; }
.consent-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text actions" "choose choose"; align-items: center; gap: 12px 32px; padding-top: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.consent-text { grid-area: text; }
.consent-title { font-size: 16px; font-weight: 700; letter-spacing: var(--track-h3); line-height: 1.3; margin: 0 0 4px; }
.consent-text p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 70ch; }
.consent-text a { color: var(--accent-deep); text-underline-offset: 3px; font-weight: var(--w-ui); }
.consent-actions { grid-area: actions; display: flex; gap: 8px; }
.consent-btn { min-width: 128px; }
.consent-btn[aria-expanded="true"] { background: var(--ink-2); border-color: var(--ink-2); }
.consent-choose { grid-area: choose; border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; }
.consent-choose[hidden] { display: none; }
.consent-choose fieldset { border: 0; margin: 0; padding: 0; min-width: 0; flex: 1 1 560px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 20px; }
.consent-choose legend { padding: 0; margin-bottom: 10px; }
.consent-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }
.consent-opt label { font-size: 15px; font-weight: var(--w-ui); min-height: var(--tap); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.consent-opt p { grid-column: 2; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.consent-state { font-size: 13px; font-weight: var(--w-body); color: var(--ink-2); }
/* Switch: a real checkbox, restyled. Off = outline track, on = indigo track. State also shown by knob position. */
.consent-opt input { appearance: none; -webkit-appearance: none; margin: 0; width: 44px; height: 26px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-strong); background: var(--surface-2); position: relative; cursor: pointer; flex: none; }
.consent-opt input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--border-strong); }
.consent-opt input:checked { background: var(--ink); border-color: var(--ink); }
.consent-opt input:checked::after { left: 21px; background: var(--surface); }
.consent-opt input:disabled { cursor: not-allowed; background: var(--ink-2); border-color: var(--ink-2); }
.consent-opt input:disabled + label { cursor: default; }
.consent-opt input:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .consent-opt input::after { transition: left .15s ease; } }
/* S24 founder fix: the banner sits on dark green so it stands out. Measured on #236637: milk text 6.81:1,
   lemon focus ring 6.52:1 (teal fails at 1.34:1), milk control borders 6.81:1, ink on milk buttons 10.03:1. */
.consent { background: var(--green-strong); color: var(--surface); border-top-color: var(--green-strong); }
.consent .consent-title, .consent-text p, .consent-opt label, .consent-opt p, .consent-state, .consent-choose legend { color: var(--surface); }
.consent-text a { color: var(--surface); text-decoration: underline; text-underline-offset: 3px; }
.consent-text a:hover { text-decoration-thickness: 2px; }
.consent :focus-visible, .consent-opt input:focus-visible { outline: 2px solid var(--lemon); outline-offset: 2px; }
/* All three buttons alike: milk fill, ink text. The open "Choose" button flips to a milk outline to show its state. */
.consent .consent-btn { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.consent .consent-btn:hover { background: var(--surface-2); border-color: var(--surface-2); color: var(--ink); }
.consent .consent-btn[aria-expanded="true"] { background: transparent; color: var(--surface); border-color: var(--surface); }
.consent-choose { border-top-color: rgba(249, 255, 241, 0.35); }
.consent-opt input { background: transparent; border-color: var(--surface); }
.consent-opt input::after { background: var(--surface); }
.consent-opt input:checked, .consent-opt input:disabled { background: var(--surface); border-color: var(--surface); }
.consent-opt input:checked::after, .consent-opt input:disabled::after { background: var(--green-strong); }
/* Footer "Cookie settings": a button that looks like the footer links. */
.footer-btn { font: inherit; font-size: 14px; background: none; border: 0; padding: 0; color: var(--surface); cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; text-align: left; }
.footer-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-btn[hidden] { display: none; }
.consent-page-cta { margin: 0 0 24px; }
.consent-page-cta[hidden] { display: none; }
@media (max-width: 959px) {
  .consent-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "actions" "choose"; gap: 12px; }
  .consent-choose fieldset { grid-template-columns: minmax(0, 1fr); flex-basis: 100%; }
}
@media (max-width: 599px) {
  .consent-inner { padding-top: 12px; }
  .consent-text p { font-size: 14px; }
  .consent-actions { gap: 6px; }
  .consent-btn { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 15px; }
  .consent-choose .consent-btn { flex-basis: 100%; }
}
@media print { .consent { display: none !important; } }

/* Staging QA (13 Oct 2026). Home "What each team gets": descriptor under its label, chevron at the end, one
   layout at every width; two columns of rows on desktop. */
.team-strip a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name chev" "desc chev"; align-items: center; justify-content: stretch; gap: 2px 16px; }
.team-strip b { grid-area: name; }
.team-strip span.m { grid-area: desc; }
.team-strip .rl-chev { grid-area: chev; }
@media (min-width: 960px) { .team-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } }
/* Home use cases: Halden as the lead card across the row, the others beneath, however many there are. */
.usecase-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.usecase-grid .usecase.live { grid-column: 1 / -1; }

/* Halden structure (tools/partials/render-halden-structure.html, Halden hub, founder 14 Oct 2026).
   The Thursday post image as HTML. Ownership connectors in slate (agent to syndicates), feeds as ink arrows up from each
   dashed partner card into its syndicate. Below 720px: one column; syndicates hang off a rail under the agent and each
   syndicate's partners hang off an arrowed rail beneath it. */
.hr-hero.hr-hero-hs { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 36px; }
@media (max-width: 959px) { .hr-hero.hr-hero-hs { grid-template-columns: minmax(0, 1fr); gap: 32px; } .hr-hero-hs .hr-hero-copy { max-width: 46em; } }
/* The card's own column decides its layout: row layout from 600px wide, the stacked rail below (container query). */
.hs-slot { container: hs / inline-size; min-width: 0; }
.hs { margin: 0; padding: 18px; gap: 12px; }
.hs-tree { position: relative; }
.hs-box { position: relative; background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius-tile); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hs-box > b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.hs-box .m { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.hs-box .m b { font-weight: 700; color: var(--ink); }
.hs-fig { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.hs-fig .num { font-size: calc(26px * var(--num-scale)); color: var(--ink); }
.hs-ma { border: 2px solid var(--ink); padding: 12px 14px; }
.hs-ma > b { font-size: 18px; }
.hs-ma .hs-fig .num { font-size: calc(34px * var(--num-scale)); }
.hs-partner { border-style: dashed; background: var(--ground); }
.hs-partner .hs-fig .num { font-size: calc(20px * var(--num-scale)); }
.hs-syns { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 12px; margin-top: 28px; }
.hs-col { position: relative; display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.hs-feeds { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-items: start; }
.hs-feeds.hs-two { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
/* ownership: agent down to a bus, bus down to each syndicate */
.hs-ma::after, .hs-col::before, .hs-col::after { content: ''; position: absolute; pointer-events: none; }
.hs-ma::after { left: 50%; top: calc(100% + 2px); height: 14px; border-left: 2px solid var(--border-strong); }
.hs-col::before { left: 50%; top: -14px; height: 14px; border-left: 2px solid var(--border-strong); }
.hs-col-a::after { top: -14px; left: 50%; right: -6px; border-top: 2px solid var(--border-strong); }
.hs-col-b::after { top: -14px; left: -6px; right: 50%; border-top: 2px solid var(--border-strong); }
/* feeds: an ink arrow from each partner card up into its syndicate */
.hs-partner::before, .hs-partner::after { content: ''; position: absolute; pointer-events: none; }
.hs-partner::before { left: 50%; bottom: 100%; height: 24px; border-left: 2px solid var(--ink); }
.hs-partner::after { left: calc(50% - 5px); bottom: calc(100% + 23px); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid var(--ink); }
.hs-legend { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.hs-legend i { flex: none; width: 30px; height: 18px; border: 1.5px dashed var(--border-strong); border-radius: 6px; background: var(--ground); }
.hs-legend b { color: var(--ink); font-weight: 700; }
.hs-note { color: var(--ink-2); }
@container hs (max-width: 599px) {
  .hs { padding: 16px; }
  .hs-ma::after, .hs-col::after { display: none; }
  .hs-syns { grid-template-columns: minmax(0, 1fr); gap: 22px; margin: 0 0 0 10px; padding: 20px 0 0 16px; }
  .hs-col { gap: 24px; }
  /* ownership rail: from the agent down each syndicate's left side, ending at the last syndicate's tick */
  .hs-col::before { left: -16px; top: -22px; height: 44px; width: 16px; border-left: 2px solid var(--border-strong); border-bottom: 2px solid var(--border-strong); }
  .hs-col-a::before { top: -20px; height: 42px; }
  .hs-col:not(:last-child)::after { display: block; left: -16px; right: auto; top: 22px; bottom: -22px; border-top: 0; border-left: 2px solid var(--border-strong); }
  .hs-feeds, .hs-feeds.hs-two { grid-template-columns: minmax(0, 1fr); padding-left: 20px; position: relative; }
  /* arrowhead into the syndicate, then a rail down the partners' left side that ends at the last card's tick */
  .hs-feeds::after { content: ''; position: absolute; left: -1px; top: -24px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid var(--ink); }
  .hs-partner::before { left: -16px; bottom: auto; top: -14px; height: 36px; width: 16px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
  .hs-partner:first-child::before { top: -16px; height: 38px; }
  .hs-partner::after { display: none; }
  .hs-partner:not(:last-child)::after { display: block; left: -16px; bottom: -14px; top: 22px; width: 0; height: auto; border: 0; border-left: 2px solid var(--ink); }
}

/* /halden hero H1 in the two-column layout (founder, 14 Oct 2026): about 4 lines at 1280 and 1440. Halden hub only. */
@media (min-width: 1200px) { .hr-hero-hs .display { font-size: 48px; } }
/* A section that follows another on the same ground: one section gap between them, not two (About "What we are building"). */
.section.section-follow { padding-top: 0; }