/* Redesign batch 1 (30 Oct 2026). Layout for the pages built by tools/redesign_pages.py, the grouped menu, and the
   Rulio notification bar. Spec: _build_plan/design/2026-10-30-redesign-template.md. Site tokens only (site.css :root).
   Dashboards keep their own markup and styles (team.css); this file frames, crops and scales them, never redraws. */

/* ---- Two-column sections: text left (5/12), visual right (7/12) from 960. Below 960 the visual follows the text. */
.rd-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.rd-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rd-visual { margin: 0; min-width: 0; }
@media (min-width: 960px) {
  .rd-two { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
  .rd-two.rd-flip > .rd-text { order: 2; }
  .rd-two.rd-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.gap-48 { gap: 48px; }
.gap-32 { gap: 32px; }
.gap-16 { gap: 16px; }
.rd-narrow { max-width: 46em; }
@media (max-width: 599px) {
  .rd-page .section { padding-top: 48px; padding-bottom: 48px; }
  .gap-48 { gap: 40px; }
}

/* ---- Hero */
.rd-hero { padding-top: 56px; padding-bottom: 64px; }
.rd-hero .btns { margin-top: 4px; }
.rd-hero .display { font-size: clamp(36px, 4vw, 54px); }
.rd-phone { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rd-phone .caption, .rd-hero-card figcaption { text-align: center; color: var(--ink-2); }
.rd-hero-card { display: flex; flex-direction: column; gap: 12px; max-width: 560px; justify-self: center; width: 100%; }
@media (max-width: 599px) {
  .rd-hero { padding-top: 28px; padding-bottom: 40px; }
  .rd-hero .display { font-size: 34px; }
  .rd-hero.rd-two { gap: 24px; }
}

/* ---- Frames: one panel of a real dashboard, reflowing to its column (container queries below) */
.rd-frame { container: rdframe / inline-size; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.rd-frame-k { color: var(--ink-2); margin: 0; }
.rd-frame .rd-crop .tdash-frame { padding: 0; border: 0; background: none; border-radius: 0; }
.rd-frame .rd-crop .tpanel { margin: 0; }
.rd-crop { margin: 0; }
.rd-frame img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); }
.rd-shot picture + picture { margin-top: 12px; display: block; }
@media (max-width: 599px) { .rd-frame { padding: 12px; } }

/* 12px floor inside heroes and frames (spec 0.4): scaling, not simplifying. The live site is untouched. */
.rd-hero .label-sm, .rd-frame .label-sm, .rd-phone .label-sm, .rd-whole .label-sm,
.rd-hero .tphone .tile .cap, .rd-phone .tphone .tile .cap,
.rd-hero .tick, .rd-hero-card .tick, .rd-frame .tick,
.rd-frame .tsheet-meta, .rd-hero .key li, .rd-hero-card .key li { font-size: 12px; }
.rd-hero-card .slider .tick { font-size: 12px; }
.rd-hero .rd-visual :is(.pill, .linked, .cap, .m, .cat-mark, .cm-tag, .explore-chip, .tbr-l, .tkey, .tphone-date),
.rd-phone :is(.pill, .linked, .cap, .m, .cat-mark, .cm-tag, .explore-chip, .tbr-l, .tkey, .tphone-date),
.rd-frame :is(.pill, .linked, .cap, .m, .cat-mark, .cm-tag, .explore-chip, .tbr-l, .tkey, .tphone-date) { font-size: 12px; }

/* ---- Outcomes */
.rd-outcome .label { color: var(--ink-2); }
.rd-today { color: var(--ink-2); border-left: 3px solid var(--muted); padding-left: 12px; }
.rd-after { color: var(--ink-2); }
/* Long outcome frames: the text stays beside the frame as it scrolls (desktop). */
@media (min-width: 960px) {
  .rd-outcome { align-items: start; }
  .rd-outcome > .rd-text { position: sticky; top: 32px; }
}
/* Long outcome frames are capped (720px desktop, 560px phone) with a fade and a "Show the whole view" button.
   redesign.js adds .is-capped only when the crop is taller than the cap, so without JavaScript nothing is cut off.
   The whole dashboard stays in the DOM; the button expands it in place. */
.rd-frame.is-capped .rd-crop { max-height: 720px; overflow: hidden; position: relative; }
.rd-frame.is-capped .rd-crop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(249, 255, 241, 0), var(--surface)); }
.rd-frame.is-capped.is-open .rd-crop { max-height: none; overflow: visible; }
.rd-frame.is-capped.is-open .rd-crop::after { display: none; }
.rd-full-btn { align-self: flex-start; }
@media (max-width: 599px) { .rd-frame.is-capped .rd-crop { max-height: 560px; } }

/* ---- Analogy art: wide art from 600px, narrow below. Inline SVG, so it takes the site's Inter and Jura. */
.rd-art svg { width: 100%; height: auto; }
.rd-art-narrow { display: none; }
@media (max-width: 599px) { .rd-art-wide { display: none; } .rd-art-narrow { display: block; } }

/* ---- Proof */
.rd-proof { padding-top: 40px; padding-bottom: 40px; }
.rd-proof p { display: flex; align-items: center; gap: 24px; margin: 0; }
.rd-proof-n { font-family: var(--font-data); font-weight: 700; font-size: 64px; line-height: 1; color: var(--ink); flex: none; }
@media (max-width: 599px) { .rd-proof p { flex-direction: column; align-items: flex-start; gap: 8px; } .rd-proof-n { font-size: 40px; } }

/* ---- Three groups of roles (home, Halden hub) */
.rd-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 600px) { .rd-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.rd-group { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.rd-group > .label { color: var(--ink-2); padding: 0 4px 4px; }
.rd-roles, .rd-hub-roles { list-style: none; margin: 0; padding: 0; }
.rd-roles li + li, .rd-hub-roles li + li { border-top: 1px solid var(--border); }
.rd-role, .rd-roles .is-soon { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 12px 4px; text-decoration: none; color: var(--ink); }
.rd-role:hover { background: var(--surface-2); }
.rd-role-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rd-role-t b { font-weight: 600; font-size: 16px; }
.rd-role-t span { font-size: 14px; color: var(--ink-2); }
.rd-chev { flex: none; color: var(--ink-2); }
.rd-roles .is-soon { opacity: 1; }
.rd-roles .is-soon .rd-chev { display: none; }
.rd-roles .is-soon .rd-role-t b { color: var(--ink-2); }

/* ---- How it works */
.rd-steps { counter-reset: none; }

/* ---- Halden views (cards reuse report.css .hr-card) */
.rd-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ---- Close */
.rd-close .body-lg { color: var(--on-ink-body); max-width: 40em; }
.rd-close .link, .rd-close a.link { color: var(--surface); }
.btn-on-ink { background: var(--lemon); color: var(--ink); border-color: var(--lemon); }
.btn-on-ink:hover { color: var(--ink); filter: brightness(0.95); }

/* ---- Why we built it */
.rd-why { display: flex; flex-direction: column; gap: 12px; max-width: 40em; }

/* ---- Halden hub audience block */
.rd-hub-board { padding: 24px; }
.rd-hub-role summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: var(--tap); padding: 12px 4px; }
.rd-hub-role summary::-webkit-details-marker { display: none; }
.rd-hub-role summary b { font-weight: 600; }
.rd-hub-role summary span { font-size: 14px; color: var(--ink-2); }
.rd-hub-links { padding: 0 4px 12px; font-size: 14px; line-height: 1.8; }
/* Rendered open, so the reports show at a glance and without JavaScript; redesign.js closes them on phones. */

/* ---- Board view */
.rd-cover { align-items: start; }
.rd-toc { padding: 20px; }
.rd-toc ol { list-style: none; margin: 8px 0 0; padding: 0; }
.rd-toc li + li { border-top: 1px solid var(--border); }
.rd-toc a { display: flex; align-items: center; gap: 14px; min-height: var(--tap); padding: 10px 4px; text-decoration: none; color: var(--ink); font-weight: 600; }
.rd-toc-n { font-family: var(--font-data); font-weight: 700; font-size: 22px; color: var(--ink-2); min-width: 1.6em; }
.rd-pack h2 { display: flex; align-items: baseline; gap: 12px; }
.rd-paper { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
@media (min-width: 960px) {
  .rd-paper { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; }
  .rd-paper.rd-flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .rd-paper.rd-flip > .rd-text { order: 2; }
}
.rd-fig { font-weight: 600; }
.rd-capture { display: block; text-decoration: none; padding: 8px; }
.rd-capture img { border: 0; }
.rd-missing { color: var(--fail-text); }

/* ---- Rulio page */
.rd-lockup { display: flex; align-items: center; gap: 8px; margin: 0; }
.rd-step-n { font-family: var(--font-data); font-weight: 700; font-size: 40px; line-height: 1; color: var(--ink-2); }
.rd-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.rd-search select, .rd-search input { min-height: var(--tap); border: 1px solid var(--border-strong); border-radius: var(--radius-chip); background: var(--surface); color: var(--ink); font: inherit; padding: 0 12px; }
.rd-search input { flex: 1 1 220px; min-width: 0; }
.rd-search select { flex: 0 1 auto; min-width: 0; max-width: 100%; }  /* 320px: a long option never widens the page */

/* Steps run full width: a desktop capture of the app needs the whole column to stay legible (crop, never shrink) */
.rd-step { display: flex; flex-direction: column; gap: 20px; }
.rd-step > .rd-text { max-width: 40em; }
.rd-close .nav-tag { color: var(--on-ink-body); border-color: var(--on-ink-2); }

/* ---- Notification bar: top of every page except Rulio, above the header (partials/header.html, founder 3 Nov 2026).
   Closed: html.note-bar-off (set in the head before paint) or [hidden] (set by its own script). */
.note-bar { background: var(--ink); color: var(--on-ink-body); font-size: 14px; line-height: 1.45; }
.note-bar[hidden], .note-bar-off .note-bar { display: none; }
.note-bar-in { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
.note-bar-t { margin: 0; flex: 1 1 auto; min-width: 0; }
.note-bar-t b { color: var(--surface); font-weight: 700; }
.note-bar .nav-tag { color: var(--on-ink-body); border-color: var(--on-ink-2); margin-left: 8px; font-size: 10px; padding: 1px 7px; vertical-align: 1px; }
.note-bar-dot { margin: 0 8px; color: var(--on-ink-2); }
.note-bar-a { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; color: var(--lemon); font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px; }
.note-bar-a:hover { color: var(--lemon); text-decoration-thickness: 2px; }
.note-bar-a svg { width: 14px; height: 14px; flex: none; }
.note-bar-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); margin-right: -10px;
  padding: 0; background: none; border: 0; border-radius: var(--radius-pill); color: var(--on-ink-body); cursor: pointer; }
.note-bar-x svg { width: 18px; height: 18px; }
.note-bar-x:hover { color: var(--surface); background: rgba(249, 255, 241, 0.1); }
.note-bar-a:focus-visible, .note-bar-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Phones: one slim line, "Rulio Beta · Try Rulio" and Dismiss; the long line shows from 600px. */
@media (max-width: 599px) { .note-bar-line { display: none; } .note-bar-in { min-height: 40px; padding-top: 0; padding-bottom: 0; } }
@media print { .note-bar { display: none; } }

/* ---- The primary call to action: button with its line beneath (partials/cta.html, one source on every page).
   Lemon on an ink band, like .btn-on-ink. In a .btns row it takes the whole first row, so a secondary button always
   sits beneath the line, never beside it (same order as /lloyds-turnkey). */
.cta-book { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cta-book-note { margin: 0; color: var(--ink-2); }
.on-ink .cta-book-note { color: var(--on-ink-body); }
.on-ink .cta-book .btn-primary { background: var(--lemon); color: var(--ink); border-color: var(--lemon); }
.on-ink .cta-book .btn-primary:hover { color: var(--ink); filter: brightness(0.95); }
.btns > .cta-book { flex: 1 1 100%; }
@media (max-width: 599px) { .cta-book > .btn { align-self: stretch; } }

/* ---- Menu, rationalised 4 Nov 2026: Industries, Who it's for (eight roles in two columns), Resources (Library, Blog,
   then Case studies: Halden with its framework and reports beneath), About. Footer: the same four columns. */
.nav-menu.nav-menu-who { width: 440px; max-width: calc(100vw - 48px); }
.nav-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.nav-case { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--border); }
.nav-case .menu-label { display: block; padding: 10px 12px 4px; font-size: 12px; color: var(--ink-2); margin: 0; }
.nav-case ul { list-style: none; margin: 0; padding: 0; }
.nav-menu .nav-sub a { padding-left: 28px; font-size: 14px; color: var(--ink-2); }
.nav-menu .nav-sub a:hover { color: var(--ink); }
.menu-panel .nav-case { border-top: 0; margin-top: 0; padding-top: 0; }
.menu-panel .nav-case .menu-label { padding: 12px 12px 2px 20px; }
.menu-panel .group .nav-sub a { padding-left: 36px; font-size: 15px; color: var(--ink-2); }
@media (min-width: 600px) and (max-width: 959px) { .menu-panel .menu-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer-col .footer-sub { display: block; margin-top: 10px; font-size: 11px; color: var(--on-ink-2); }
@media (min-width: 1101px) { .footer-top { grid-template-columns: minmax(200px, 1.2fr) repeat(5, minmax(0, 1fr)); } }

/* ---- Container rules: team.css and site.css viewport rules for dashboards, scoped to .rd-frame (generated) */
/* @generated rd-container (tools/redesign_css.py) */
@container rdframe (max-width: 959px) {
  .rd-frame .toc-wide { display: none; }
  .rd-frame .toc-mobile { display: block; border: 1px solid var(--border); border-radius: var(--radius-tile); background: var(--surface); }
  .rd-frame .toc-mobile summary { min-height: var(--tap); display: flex; align-items: center; padding: 0 14px; font-weight: 600; cursor: pointer; }
  .rd-frame .toc-mobile ol { padding: 0 8px 10px; }
  .rd-frame .thinks { grid-template-columns: minmax(0, 1fr); }
  .rd-frame .tax-colhead { display: none; }
  .rd-frame .tax-row { grid-template-columns: 1fr 1fr 1fr; gap: 8px 14px; }
  .rd-frame .tax-row .tc-name, .rd-frame .tax-row .tc-bar { grid-column: 1 / -1; }
  .rd-frame .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; }
  .rd-frame .tax-meta { text-align: left; }
  .rd-frame .board-grid.split { grid-template-columns: minmax(0, 1fr); }
  .rd-frame .tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-frame .teams-card { justify-self: start; }
  .rd-frame .tflow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "back" "sum" "k" "steps" "note"; grid-template-rows: none; }
  .rd-frame .tmap { grid-template-columns: minmax(0, 1fr); }
  .rd-frame .tmap-key { flex-direction: row; flex-wrap: wrap; gap: 8px 14px; }
}
@container rdframe (max-width: 599px) {
  .rd-frame .two-col { grid-template-columns: minmax(0, 1fr); }
  .rd-frame .tax-row { grid-template-columns: 1fr 1fr; }
  .rd-frame .tax-row > :last-child { grid-column: 1 / -1; }
  .rd-frame .tax-sub-inner { margin-left: 4px; padding-left: 10px; }
  .rd-frame .bcard { padding: 14px; }
  .rd-frame .teams li { grid-template-columns: minmax(96px, 120px) minmax(0, 1fr) 40px; }
  .rd-frame .rows > li { flex-wrap: wrap; }
  .rd-frame .rows .side { flex-direction: row; align-items: center; flex-wrap: wrap; text-align: left; }
  .rd-frame .tc-meta div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rd-frame .tdash-frame { padding: 14px; border-radius: 16px; }
  .rd-frame .tl-steps li { font-size: 13px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .rd-frame .tl-text p { font-size: 15px; }
  .rd-frame .tseg { max-width: none; }
  .rd-frame .tseg button { font-size: 14px; padding: 0 6px; }
  .rd-frame .tarea-btn { padding: 12px; }
  .rd-frame .tarea-panel { padding: 2px 12px 12px; }
  .rd-frame .tkris { grid-template-columns: minmax(0, 1fr); }
  .rd-frame .tarea-side .tdots { display: none; }
  .rd-frame .tlines { grid-template-columns: minmax(0, 1fr); }
  .rd-frame .tflow { padding: 12px 14px 16px; }
  .rd-frame .tdec-b { grid-template-columns: minmax(0, 1fr); }
  .rd-frame .tclaim { grid-template-columns: minmax(0, 1fr) 18px; gap: 6px 10px; padding: 12px 2px; }
  .rd-frame .tclaim .main { grid-column: 1; }
  .rd-frame .tclaim .chev { grid-column: 2; grid-row: 1 / span 3; }
  .rd-frame .tclaim .cbar, .rd-frame .tclaim .v { grid-column: 1; }
  .rd-frame .tclaim .v { text-align: left; }
  .rd-frame .tclaims { padding: 0 10px; }
  .rd-frame .tctl { flex-wrap: wrap; }
  .rd-frame .tctl .side { justify-content: flex-start; }
  .rd-frame .tgn .num { font-size: 22px; }
  .rd-frame .tdoc-io { grid-template-columns: minmax(0, 1fr); }
  .rd-frame .tccy { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 6px 10px; padding: 12px 2px; }
  .rd-frame .tccy .tdb { grid-column: 1 / span 2; grid-row: 2; }
  .rd-frame .tccy .chev { grid-column: 3; grid-row: 1 / span 2; }
  .rd-frame .tstop-card { flex-wrap: wrap; }
  .rd-frame .tstop-open { margin-left: 22px; }
  .rd-frame .tline-row .side .m { white-space: normal; text-align: right; }
  .rd-frame .tmap-box { padding: 8px 4px 4px; border-radius: 12px; }
  .rd-frame .temg-row .side { flex-wrap: wrap; }
  .rd-frame .tm-hide { display: none; }
  .rd-frame .tarea-plan .tarea-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 18px; column-gap: 8px; row-gap: 3px; align-items: center; }
  .rd-frame .tarea-plan .tarea-name, .rd-frame .tarea-plan .tarea-side { display: contents; }
  .rd-frame .tarea-plan .tarea-name b { grid-column: 1; grid-row: 1; }
  .rd-frame .tarea-plan .tgwp { grid-column: 2; grid-row: 1; }
  .rd-frame .tarea-plan .tarea-side .change { grid-column: 3; grid-row: 1; }
  .rd-frame .tarea-plan .tarea-btn > .chev { grid-column: 4; grid-row: 1; }
  .rd-frame .tarea-plan .tarea-name .m { grid-column: 1 / -1; grid-row: 2; }
  .rd-frame .tarea-plan .tplanbar { grid-column: 1 / -1; grid-row: 3; max-width: none; margin-top: 4px; }
  .rd-frame .tdist { font-size: 13px; gap: 2px 12px; }
  .rd-frame .tctl.tline-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; column-gap: 10px; row-gap: 2px; align-items: center; padding: 12px 4px; }
  .rd-frame .tline-row .main, .rd-frame .tline-row .side { display: contents; }
  .rd-frame .tline-row .main .t { grid-column: 1; grid-row: 1; }
  .rd-frame .tline-row .side .v { grid-column: 2; grid-row: 1; text-align: right; }
  .rd-frame .tline-row .side .m { grid-column: 1 / 3; grid-row: 2; text-align: left; white-space: normal; }
  .rd-frame .tline-row .main .m { grid-column: 1 / 3; grid-row: 3; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rd-frame .tline-row > .chev { grid-column: 3; grid-row: 1 / 4; }
}
/* /@generated rd-container */

/* ---- Closing call to action as a card, site wide (founder, 3 Nov 2026; first built on /lloyds-cro, /lloyds-turnkey and
   /appointed-reps). A rounded ink card inside the page width, on the same background as the section above it, with space
   above and a clear gap before the footer. Three close patterns take it: the redesign band (.rd-close: the card is its
   .wrap), the built pages' split close (.cta-split: the section is the card, the Follow Halden box stays a milk card inside
   it) and the blog post card (.tp-cta). Copies from staging (.cta-panel) are published as they are. */
.rd-close.band-ink { background: transparent; padding: 40px 0 120px; }
.band-milk + .rd-close.band-ink { background: var(--surface); }
.band-milk:has(+ .rd-close), .band-milk:has(+ .cta-split:not(.cta-panel)) { border-bottom: 0; }
.rd-close > .wrap, .cta-split:not(.cta-panel), .post-close .tp-cta {
  background: var(--ink); color: var(--on-ink-body); border: 0; border-radius: 28px; box-shadow: 0 32px 64px -40px rgba(31, 70, 81, 0.55); }
.rd-close > .wrap, .cta-split:not(.cta-panel) {
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--content) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; padding: 72px 64px; }
.cta-split:not(.cta-panel) { margin-top: 40px; margin-bottom: 120px; }
.band-milk + .cta-split:not(.cta-panel) {  /* the milk of the band above runs on behind the card, without widening the page */
  box-shadow: 0 32px 64px -40px rgba(31, 70, 81, 0.55), 0 0 0 100vmax var(--surface); clip-path: inset(-40px -100vmax -120px -100vmax); }
.post-close .tp-cta { padding: 40px 36px; margin-bottom: 80px; }
body:has(.rd-close, .cta-split:not(.cta-panel), .tp-cta) .site-footer { margin-top: 0; }  /* no stone strip above the footer */

/* Text on the card */
.cta-split:not(.cta-panel) > .text :is(h2, .h2, .h2-sm, .cta-signoff), .post-close .tp-cta .tp-cta-l { color: var(--surface); }
.cta-split:not(.cta-panel) > .text :is(p, .body-lg, .caption), .cta-split:not(.cta-panel) .cta-book-note,
.post-close .tp-cta .cta-book-note { color: var(--on-ink-body); }
.cta-split:not(.cta-panel) > .text a.link { color: var(--surface); }
.cta-split:not(.cta-panel) .cta-book .btn-primary, .post-close .tp-cta .cta-book .btn-primary { background: var(--lemon); color: var(--ink); border-color: var(--lemon); }
.cta-split:not(.cta-panel) .cta-book .btn-primary:hover, .post-close .tp-cta .cta-book .btn-primary:hover { color: var(--ink); filter: brightness(0.95); }
.cta-split:not(.cta-panel) .btn-outline { color: var(--surface); border-color: var(--on-ink-2); background: transparent; }
.cta-split:not(.cta-panel) .btn-outline:hover { color: var(--ink); background: var(--surface); }
.cta-split:not(.cta-panel) > .form-card { color: var(--ink); border: 0; }
.rd-close .h2, .cta-split:not(.cta-panel) :focus-visible { outline-color: var(--accent); }
@media (max-width: 599px) {
  .rd-close.band-ink { padding: 16px 0 72px; }
  .rd-close > .wrap, .cta-split:not(.cta-panel) { padding: 48px 24px; border-radius: 20px; }
  .cta-split:not(.cta-panel) { margin-top: 16px; margin-bottom: 72px; }
  .band-milk + .cta-split:not(.cta-panel) { clip-path: inset(-16px -100vmax -72px -100vmax); }
  .post-close .tp-cta { padding: 32px 22px; border-radius: 20px; margin-bottom: 56px; }
}
/* Direct children of the split card (the credit line under its rule) read on ink too */
.cta-split:not(.cta-panel) > :is(p, .caption, .cta-credit) { color: var(--on-ink-body); border-color: rgba(249, 255, 241, 0.25); }
/* An ink band directly above (the AI page): the card cannot share an ink background, so stone ground sits between them */
.band-ink + .cta-split:not(.cta-panel) { margin-top: 72px; }
@media (max-width: 599px) { .band-ink + .cta-split:not(.cta-panel) { margin-top: 40px; } }

/* ---- Home page sign-posts (4 Nov 2026): Industries as three link cards, Who it's for as eight compact links. The rest
   of the home page is the landing template (assets/landing.css, generated from _variants/lloyds-cro/variant.css). */
.hm-sp .h2 { margin: 0 0 40px; max-width: 18em; }
.hm-sp > .label { margin: 0 0 16px; }
.hm-ind, .hm-roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hm-ind { margin-bottom: 48px; }
.hm-ind a, .hm-roles a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--tap);
  background: var(--surface);  /* milk cards on the one page ground (formula round) */ border: 1px solid var(--border); border-radius: var(--radius-card); color: var(--ink); text-decoration: none;
  transition: border-color 0.2s ease; }
.hm-ind a { padding: 22px 24px; height: 100%; box-sizing: border-box; }
.hm-roles a { padding: 14px 18px; font-size: 16px; font-weight: 600; line-height: 1.35; border-radius: 12px; }
.hm-ind a:hover, .hm-roles a:hover { border-color: var(--border-strong); }
.hm-ind-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hm-ind-t b { font-size: 17px; font-weight: 700; line-height: 1.3; }
.hm-ind-t span { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.hm-ind a > span[aria-hidden], .hm-roles a > span[aria-hidden] { flex: none; color: var(--accent-deep); font-size: 20px; transition: transform 0.2s ease; }
.hm-ind a:hover > span[aria-hidden], .hm-roles a:hover > span[aria-hidden] { transform: translateX(3px); }
.hm-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 800px) {
  .hm-ind { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .hm-roles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 599px) {
  .hm-sp .h2 { margin-bottom: 28px; }
  .hm-ind { margin-bottom: 36px; }
  .hm-ind a { padding: 18px; }
  .hm-roles a { padding: 12px 14px; font-size: 15px; }
}

/* ---- Footer groups (4 Nov 2026, founder: the phone footer looked wavy, long and short lists side by side). Each column is
   a <details> group, open in the markup. Wide screens: a plain heading, all links shown (the footer script stops the
   summary toggling). 960 to 1100px: the four columns in one row under the brand. 959px and below (the same breakpoint as
   the menu; Opus review, 4 Nov 2026: at 768 the columns still looked uneven): one column of folded groups, tap to open. */
.footer-acc > summary { list-style: none; cursor: default; }
.footer-acc > summary::-webkit-details-marker { display: none; }
.footer-acc > summary h2 { margin: 0 0 8px; }
@media (min-width: 960px) and (max-width: 1100px) {
  .footer-top { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .footer-brand { margin-bottom: 28px; }
  .footer-col { border-top: 1px solid rgba(249, 255, 241, 0.18); }
  .footer-col:last-child { border-bottom: 1px solid rgba(249, 255, 241, 0.18); }
  .footer-acc > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
  .site-footer .footer-acc > summary .label { margin: 0; font-size: 13px; color: var(--surface); }
  .footer-acc > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--on-ink-2);
    border-bottom: 2px solid var(--on-ink-2); transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease; }
  .footer-acc[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .footer-acc ul { padding: 0 0 16px; }
  .footer-acc a { min-height: 40px; font-size: 16px; }
}

/* ---- Home benefit rows, the current state against the desired one (benefit lens, 4 Nov 2026): the role pages' chip pair,
   so every page shows the delta one way (Opus review #3). These rules are the role pages' .fr-delta block
   (_variants/for-board/variant.css and the other seven), copied as they are; Home loads landing.css, which does not carry them. */
.fr-delta { margin: 6px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; max-width: 30em; }
.fr-delta > div { min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.fr-delta dt { margin: 0 0 4px; font-family: var(--font-data); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.fr-delta dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.fr-delta > div:first-child dd { text-decoration: line-through; text-decoration-color: rgba(31, 70, 81, 0.35); }
.fr-delta > .is-new { background: var(--ink); border-color: var(--ink); }
.fr-delta > .is-new dt { color: var(--lemon); }
.fr-delta > .is-new dd { color: var(--surface); font-weight: 600; }
@media (max-width: 599px) { .fr-delta dd { font-size: 14px; } .fr-delta > div { padding: 10px 12px; } }

/* ---- The narrowest phones (320 to 359px, 4 Nov 2026): logo, Book a demo and the menu button fit on one row without a
   sideways scroll (at 320 the row ran 19px wide). The logo steps down, the button tightens; tap targets stay 44px. */
@media (max-width: 359px) {
  .site-header .brand img { height: 34px; }
  .site-header .nav-cta { padding: 0 12px; font-size: 14px; }
  .site-header .nav-bar { gap: 6px; }
}
/* The preview's "This form is on the live site" note (tools/preview_export.py) carries a bare URL: let it wrap at 320px. */
.preview-note { overflow-wrap: anywhere; }

/* ---- Menu round 2 (founder, 4 Nov 2026). Case studies: Halden only, then a greyed "More coming soon" line that is plain
   text, not a link (never focusable; screen readers read it as written). Who it's for is ready for groups (one page per
   SM&CR senior manager role, 10 to 14 entries): tools/shell_menu.py writes .nav-who-groups (two groups a row on desktop,
   each with its label) and .menu-sub labels in the phone panel. */
.nav-menu .nav-coming span, .menu-panel .nav-coming span { display: flex; align-items: center; min-height: 36px; padding: 0 12px;
  font-size: 14px; color: var(--ink-2); opacity: 0.8; cursor: default; }
.menu-panel .group .nav-coming span { padding-left: 20px; font-size: 15px; }
.nav-menu.nav-menu-grouped { width: 560px; max-height: calc(100vh - 140px); overflow-y: auto; }
.nav-who-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.nav-who-groups .nav-group { min-width: 0; }
.nav-who-groups .menu-label { display: block; margin: 0; padding: 10px 12px 4px; font-size: 12px; color: var(--ink-2); }
.nav-who-groups ul { list-style: none; margin: 0; padding: 0; }
.menu-panel .menu-sub { margin: 0; padding: 12px 12px 2px 20px; font-size: 12px; color: var(--ink-2); }

/* ---- Phone menu as wrapping pills (founder, 4 Nov 2026, r29). Below the desktop menu (959px and below) each section's
   links are pill buttons that size to their text, sit side by side and wrap. Who it's for keeps its group labels with
   pills under each; Resources keeps the Case studies label. "More coming soon" is a muted pill that is not a link.
   Desktop dropdowns and the footer are unchanged. */
@media (max-width: 959px) {
  .menu-panel .group > ul, .menu-panel .group > ul.menu-cols, .menu-panel .group .nav-case > ul {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 12px 14px 20px; grid-template-columns: none; }
  .menu-panel .group li { display: block; min-width: 0; max-width: 100%; }
  .menu-panel .group li > a, .menu-panel .group li > .is-soon {
    display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); max-width: 100%;
    padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface);
    font-size: 15px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; white-space: normal; }
  .menu-panel .group li > a:hover { background: var(--surface-2); }
  .menu-panel .group li > a:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
  .menu-panel .group li > a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
  .menu-panel .group .nav-case { flex: 0 0 100%; }
  .menu-panel .group .nav-case .menu-label { padding: 6px 0 2px; }
  .menu-panel .group .nav-case > ul { padding: 6px 0 0; }
  .menu-panel .group .nav-coming span { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px;
    border: 0; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); font-size: 15px; }
  .menu-panel .group .menu-sub { padding: 10px 12px 0 20px; }
}