/* ============================================
   CORA site, the October 2026 redesign
   Tokens from the website handoff (02-design-spec/tokens.css), merged with the live :root values (the colors are
   unchanged). One breakpoint at 768px; everything else is fluid through flex-wrap with a minimum basis.
   ============================================ */

:root {
  /* Color */
  --navy: #111E39;
  --ink: #111E39;
  --navy-deep: #0B1428;
  --accent: #24407A;
  --accent-hover: #1B3266;
  --accent-tint: rgba(36, 64, 122, 0.08);
  --cream: #FEFDF8;
  --beige: #F3ECDF;
  --sand: #E6D8BD;
  --white: #FFFFFF;
  --text-body: #2B3754;
  --text-quiet: #5A6480;
  --on-dark: rgba(254, 253, 248, 0.92);
  --on-dark-soft: rgba(254, 253, 248, 0.82);
  --on-dark-label: #A9BCE6;
  --line: rgba(17, 30, 57, 0.12);
  --line-soft: rgba(17, 30, 57, 0.08);
  --line-strong: rgba(17, 30, 57, 0.2);
  --line-light: rgba(254, 253, 248, 0.16);
  --ok: #1E8A5F;
  --ok-text: #17704D;
  --warn: #B3392E;
  /* the old names, kept so inline styles in the generated posts still resolve */
  --blue: #24407A;
  --royal: #1B3266;

  /* Type */
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Hanken Grotesk', 'Segoe UI', Arial, sans-serif;
  /* the type scale (benchmark audit, October 28, 2026): smaller than before, body 16, lead 18, and the h1 always the
     largest heading on its page (the page title up to 56, section heads up to 48, the home hero about 56 at 1440) */
  --fs-display: clamp(44px, 6vw, 80px);
  --fs-page: clamp(38px, 4.2vw, 56px);
  --fs-h2: clamp(32px, 3.6vw, 48px);
  --fs-h3: 28px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 12px;
  --lh-display: 1.02;
  --lh-heading: 1.08;
  --lh-body: 1.55;
  --tracking-display: -0.025em;
  --tracking-heading: -0.02em;
  --tracking-label: 0.08em;

  /* Layout */
  --container: 1240px;
  --gutter: 24px;
  --section-y: 112px;
  --section-y-hero: 96px;
  --heading-gap: 56px;
  --card-gap: 24px;

  /* Shape */
  --radius-pill: 100px;
  --radius-exhibit: 28px;
  --radius-card: 20px;
  --radius-panel: 14px;
  --radius-item: 10px;
  --shadow-card: 0 12px 34px rgba(17, 30, 57, 0.10);
  --shadow-deep: 0 14px 30px rgba(4, 12, 50, 0.25);
  --shadow-item: 0 1px 2px rgba(17, 30, 57, 0.06);

  --cta-height: 48px;

  /* set by the script in the head: how much the page is scaled up on a window wider than 1440px */
  --zoom: 1;
}

@media (max-width: 767px) {
  :root {
    --section-y: 72px;
    --section-y-hero: 48px;
    --fs-h3: 26px;
    --fs-lead: 18px;
    --radius-exhibit: 20px;
    --heading-gap: 40px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.band-navy :focus-visible, .band-deep :focus-visible, .site-foot :focus-visible, .announce :focus-visible { outline-color: var(--sand); }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
button { font-family: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--navy); color: var(--cream); padding: 12px 18px; border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--cream); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Layout ---------- */
.wrap, .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sec { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.sec-tight { padding-top: 72px; padding-bottom: 72px; }
.band-beige { background: var(--beige); }
.band-navy { background: var(--navy); color: var(--cream); }
.band-deep { background: var(--navy-deep); color: var(--cream); }
.rule-y { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rule-top { border-top: 1px solid var(--line); }
.row { display: flex; flex-wrap: wrap; gap: var(--card-gap); }
.row > * { min-width: 0; }
.row-center { align-items: center; }
.row-end { align-items: flex-end; }
.gap-lg { gap: 56px; }
.col-2 { flex: 1 1 420px; }
.col-3 { flex: 1 1 300px; }
.col-4 { flex: 1 1 240px; }
.col-5 { flex: 1 1 200px; }
.col-side { flex: 1 1 340px; }
.col-main { flex: 999 1 560px; }
.stack-sm > * + * { margin-top: 12px; }
.center { text-align: center; }

/* ---------- Type ---------- */
.label {
  display: block;
  font-size: 14px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent);
}
.band-navy .label, .band-deep .label, .card-dark .label { color: var(--on-dark-label); }
.display {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display);
}
.page-title {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-page); line-height: 1.04; letter-spacing: var(--tracking-display);
}
/* headings take the full column and stay on one line wherever the column allows (no width caps) */
.h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading);
}
.h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.15; }
.h4 { font-size: 20px; font-weight: 700; line-height: 1.3; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-body); }
.lead-sm { font-size: 18px; line-height: 1.6; color: var(--text-body); }
.band-navy .lead, .band-deep .lead, .band-navy .lead-sm, .band-deep .lead-sm,
.card-dark .lead, .card-dark .lead-sm, .card-dark .body { color: var(--on-dark-soft); }
.body { font-size: 16px; line-height: 1.6; color: var(--text-body); }
.quiet { color: var(--text-quiet); }
.small { font-size: 14px; }
.head-gap { margin-bottom: var(--heading-gap); }
/* a heading on its own line, its line of text under it */
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 48px; }
.sec-head > div { width: 100%; }
.kicker-gap { margin-bottom: 16px; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-ok { color: var(--ok-text); font-weight: 600; }
.t-warn { color: var(--warn); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--cta-height); padding: 12px 28px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn svg { flex: none; }
.btn-primary, .btn-blue { background: var(--navy); color: var(--cream); }
.btn-primary:hover, .btn-blue:hover { background: var(--navy-deep); color: var(--cream); }
.btn-secondary, .btn-outline-navy { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn-secondary:hover, .btn-outline-navy:hover { border-color: var(--navy); color: var(--navy); }
.btn-invert, .btn-white { background: var(--cream); color: var(--navy); }
.btn-invert:hover, .btn-white:hover { background: var(--beige); color: var(--navy); }
.btn-ghost, .btn-outline-light { background: transparent; color: var(--cream); border-color: rgba(254, 253, 248, 0.35); }
.btn-ghost:hover, .btn-outline-light:hover { border-color: var(--cream); color: var(--cream); }
.btn[disabled] { opacity: .6; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.actions.center { justify-content: center; }
.text-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 600; color: var(--accent); text-decoration: none;
}
.text-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 4px; }
.band-navy .text-link, .band-deep .text-link, .card-dark .text-link { color: var(--cream); }

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--navy-deep); color: var(--on-dark);
  font-size: 14px; padding: 0 var(--gutter);
  display: flex; justify-content: center; align-items: center; gap: 4px 12px; flex-wrap: wrap; text-align: center;
}
.announce a {
  color: var(--cream); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
}
.announce a:hover { color: var(--sand); }

/* ---------- Header and nav ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(254, 253, 248, 0.96); border-bottom: 1px solid var(--line-soft); }
@supports (backdrop-filter: blur(8px)) { .site-head { background: rgba(254, 253, 248, 0.88); backdrop-filter: blur(10px); } }
/* Legora's header: links to the left, the logo dead centre, Resources, Log in and the demo pill to the right; under
   1100px a "Menu" word on the left, the logo, and Log in on the right */
.nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 72px;
  width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}
.nav-left { justify-self: start; display: flex; align-items: center; min-width: 0; }
.brand { display: inline-flex; align-items: center; line-height: 0; min-height: 44px; flex: none; justify-self: center; }
.brand img { height: 30px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-links-r .nav-panel { left: auto; right: -8px; }
.cta-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cream); color: var(--navy); margin-right: -8px; }
.nav-group { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  background: none; border: 0; border-radius: var(--radius-pill);
  font-size: 15px; color: var(--text-body); cursor: pointer;
}
.nav-trigger svg { transition: transform .15s ease; }
.nav-trigger:hover, .nav-group.is-active > .nav-trigger { color: var(--navy); }
.nav-group.is-active > .nav-trigger { font-weight: 600; }
.nav-group.open > .nav-trigger svg { transform: rotate(180deg); }
.nav-panel {
  position: absolute; top: calc(100% + 8px); left: -8px; z-index: 60;
  width: 380px; padding: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card);
  display: none;
}
.nav-group.open > .nav-panel { display: block; }
.nav-panel a {
  display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; color: var(--navy);
}
.nav-panel a:hover, .nav-panel a:focus-visible { background: var(--beige); color: var(--navy); }
.nav-panel strong { display: block; font-size: 15px; font-weight: 600; }
.nav-panel span { display: block; font-size: 14px; color: var(--text-quiet); line-height: 1.45; margin-top: 2px; }
.nav-panel .panel-all { margin-top: 4px; border-top: 1px solid var(--line-soft); border-radius: 0 0 10px 10px; font-size: 14px; font-weight: 600; color: var(--accent); }
.nav-panel-wide { width: 720px; }
.panel-cols { display: flex; gap: 8px; }
.panel-col { flex: 1 1 0; min-width: 0; }
.panel-label { padding: 6px 14px 4px; font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.m-sub { margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-quiet); }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 2px; }
.nav-login { color: var(--text-body); text-decoration: none; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; }
.nav-login:hover { color: var(--navy); }
/* Request a demo in the header on every page, right of Log in (Alex, October 28, 2026); in the menu under 1100 px */
.nav-cta { min-height: 44px; padding: 8px 16px 8px 18px; font-size: 15px; gap: 12px; margin-left: 8px; }
a.nav-trigger { text-decoration: none; white-space: nowrap; }
.menu-btn {
  display: none; min-height: 44px; padding: 0 12px; margin-left: -12px;
  align-items: center; border: 0; background: transparent; color: var(--navy); font-size: 15px; cursor: pointer;
}
.m-close {
  display: inline-flex; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center;
  border: 1px solid rgba(17, 30, 57, 0.15); border-radius: var(--radius-pill); background: transparent; color: var(--navy); cursor: pointer;
}

/* The phone menu: a full-screen panel with the four groups, Log in and Request a demo */
.m-menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--cream); overflow-y: auto; overscroll-behavior: contain;
  display: none; flex-direction: column;
}
.m-menu.open { display: flex; }
.m-menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line-soft); }
.m-menu-body { padding: 8px var(--gutter) 32px; flex: 1 0 auto; }
.m-group { border-bottom: 1px solid var(--line-soft); padding: 20px 0 12px; }
.m-group-title { font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.m-group a { display: flex; align-items: center; min-height: 44px; font-size: 18px; color: var(--navy); text-decoration: none; }
.m-plain { display: flex; align-items: center; min-height: 60px; border-bottom: 1px solid var(--line-soft); font-size: 20px; font-weight: 600; color: var(--navy); text-decoration: none; }
.m-menu-actions { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }
.m-menu-actions .btn { width: 100%; }
body.menu-open { overflow: hidden; }

@media (max-width: 1279px) {
  .nav-trigger { padding: 0 8px; }
  .nav-login { padding: 0 8px; }
}
@media (max-width: 1099px) {
  .nav-links, .nav-cta { display: none !important; }
  .menu-btn { display: inline-flex; }
  .nav-login { margin-right: -12px; padding: 0 12px; }
}
@media (max-width: 899px) {
  .nav { min-height: 64px; }
}

/* ---------- Hero ---------- */
.hero { padding-top: var(--section-y-hero); padding-bottom: 56px; }
.hero .label { margin-bottom: 24px; }
.hero .lead { margin-top: 32px; }
.page-hero { padding-top: var(--section-y-hero); padding-bottom: 72px; }
.page-hero .label { margin-bottom: 20px; }
.page-hero .lead { margin-top: 28px; }
.page-hero.band-beige { padding-bottom: var(--section-y-hero); }
@media (max-width: 767px) {
  .hero { padding-bottom: 40px; }
  .page-hero { padding-bottom: 48px; }
}

/* ---------- Exhibits ---------- */
.exhibit {
  background: var(--navy); border-radius: var(--radius-exhibit);
  padding: clamp(16px, 3vw, 40px); box-shadow: var(--shadow-deep);
}
.exhibit-beige { background: var(--beige); box-shadow: none; }
.surface { background: var(--cream); border-radius: 16px; overflow: hidden; }
.surface-white { background: var(--white); box-shadow: var(--shadow-card); }
.surface-split { display: flex; flex-wrap: wrap; }
.pane { min-width: 0; padding: 24px; }
.pane-desk { flex: 999 1 560px; border-right: 1px solid var(--line-soft); }
.pane-chat { flex: 1 1 340px; background: var(--white); display: flex; flex-direction: column; gap: 14px; }
.pane-title { font-size: 18px; font-weight: 700; }
.pane-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pane-meta { font-size: 13px; color: var(--text-quiet); }
@media (max-width: 767px) {
  .exhibit { padding: 12px; }
  .pane-desk { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .pane { padding: 18px; }
}

/* The Portfolio tab, rendered in the LinkedIn films' style (cora-motion's Shell: side menu, bar, content) */
.exhibit-app { padding: clamp(14px, 2.6vw, 36px); }
.app {
  display: flex; background: var(--cream); color: var(--navy); border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(17, 30, 57, 0.12); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.25);
  font-size: 14px; line-height: 1.4; text-align: left;
}
.app-nav { flex: none; width: 188px; padding: 20px 14px; border-right: 1px solid rgba(17, 30, 57, 0.12); background: rgba(17, 30, 57, 0.025); }
.app-nav img { display: block; height: 22px; width: auto; margin: 0 0 24px 8px; }
.app-nav ul { list-style: none; margin: 0; padding: 0; }
.app-nav li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px; color: var(--text-body); font-weight: 500; }
.app-nav li.on { background: rgba(36, 64, 122, 0.1); color: var(--navy); font-weight: 700; }
.app-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(17, 30, 57, 0.18); flex: none; }
.app-nav li.on .app-dot { background: var(--accent); }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-bar { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 22px; border-bottom: 1px solid rgba(17, 30, 57, 0.12); }
.app-bar b { font-size: 15px; white-space: nowrap; }
.app-search {
  margin-left: auto; display: flex; align-items: center; gap: 8px; width: 280px; max-width: 50%; height: 34px; padding: 0 12px;
  border: 1px solid rgba(17, 30, 57, 0.12); border-radius: 8px; background: rgba(17, 30, 57, 0.03); color: var(--text-quiet); font-size: 13px; white-space: nowrap; overflow: hidden;
}
.app-search svg { flex: none; }
.app-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.app-tiles { display: flex; gap: 12px; }
.app-tile { flex: 1 1 0; min-width: 0; background: var(--white); border: 1px solid rgba(17, 30, 57, 0.08); border-radius: 10px; padding: 12px 14px; }
.app-tile span { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-quiet); }
.app-tile b { display: block; font-size: 26px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.app-tile.is-needs b { color: var(--accent); }
.app-tile.is-late b { color: var(--warn); }
.app-table { background: var(--white); border: 1px solid rgba(17, 30, 57, 0.08); border-radius: 10px; padding: 14px 16px 6px; min-width: 0; overflow: hidden; }
.app-table-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.app-table-head b { font-size: 15px; }
.app-table-head span { font-size: 13px; color: var(--text-quiet); white-space: nowrap; }
.app-table table { width: 100%; border-collapse: collapse; }
.app-table th { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-quiet); text-align: left; padding: 8px 10px 8px 0; white-space: nowrap; }
.app-table td { padding: 9px 10px 9px 0; border-top: 1px solid rgba(17, 30, 57, 0.07); color: var(--text-body); white-space: nowrap; }
.app-table td.b { color: var(--navy); font-weight: 600; }
.app-table .num { text-align: right; padding-right: 22px; font-variant-numeric: tabular-nums; }
.app-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.app-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.app-pill-ok { color: #156B49; background: rgba(30, 138, 95, 0.1); }
.app-pill-needs { color: var(--accent); background: rgba(36, 64, 122, 0.1); }
.app-pill-warn { color: #9A5B07; background: rgba(231, 161, 59, 0.16); }
.app-pill-late { color: var(--warn); background: rgba(179, 57, 46, 0.1); }
.app-rail { flex: 0 0 300px; min-width: 0; background: var(--white); border-left: 1px solid rgba(17, 30, 57, 0.12); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.app-rail-title { font-size: 16px; font-weight: 700; }
@media (max-width: 1099px) { .app-rail { display: none; } }
@media (max-width: 767px) {
  .app-nav { display: none; }
  .app .c-next { display: none; }
  .app-tiles { flex-wrap: wrap; }
  .app-tile { flex: 1 1 40%; }
  .app-search { display: none; }
  .app-body { padding: 14px; }
}
@media (max-width: 479px) { .app-table .num { padding-right: 10px; } }

/* The Solutions catalogue: one card per part of the platform */
.sols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--card-gap); }
.sol { grid-column: span 2; display: flex; flex-direction: column; gap: 14px; padding: 28px; background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-card); }
.sol-lead { grid-column: span 3; }
.sol .h4 { margin: 0; }
.sol p { font-size: 16px; line-height: 1.6; color: var(--text-body); }
.sol ul { list-style: none; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; }
.sol li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.sol li svg { flex: none; position: relative; top: 2px; color: var(--ok); }
@media (max-width: 1099px) {
  .sols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol, .sol-lead { grid-column: span 1; }
  .sol:last-child { grid-column: 1 / -1; }
}
@media (max-width: 699px) { .sols { grid-template-columns: minmax(0, 1fr); } .sol { padding: 22px; } }

/* The Security page (after Legora's): hero beside a vault card, assurance seals, light tiles, a statement on the data,
   the access card, a traceable answer, the questions */
.sec-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 64px; padding-top: var(--section-y-hero); padding-bottom: var(--section-y); }
.sec-hero-copy { flex: 1 1 520px; min-width: 0; }
.sec-hero-copy .lead { margin-top: 28px; }
.sec-vault { flex: 0 1 440px; min-width: 0; background: var(--navy); color: var(--cream); border-radius: var(--radius-card); padding: 32px; box-shadow: var(--shadow-deep); }
.sec-vault-mark { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: rgba(254, 253, 248, 0.08); color: var(--sand); margin-bottom: 24px; }
.sec-vault ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sec-vault li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(254, 253, 248, 0.06); font-size: 16px; }
.sec-vault li svg { flex: none; color: #6FD3A8; }
.seals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.seal-tile { display: flex; align-items: center; gap: 20px; padding: 24px; border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: var(--white); }
.seal { flex: none; width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--navy); }
.seal b { font-size: 15px; font-weight: 800; letter-spacing: 0.02em; }
.seal span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.seal-tile.pending .seal { border-style: dashed; }
.seal-tile .h4 { margin: 0 0 4px; }
.seal-tile p { font-size: 15px; line-height: 1.5; color: var(--text-body); }
.stiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.stiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stile { padding: 28px; border-radius: var(--radius-card); background: var(--white); border: 1px solid var(--line-soft); }
.stile svg { color: var(--accent); }
.stile .h4 { margin: 16px 0 8px; }
.stile p { font-size: 15px; line-height: 1.55; color: var(--text-body); }
.data-quote { margin: 0; }
.data-quote blockquote { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.02em; color: var(--cream); }
.data-quote figcaption { margin-top: 24px; font-size: 13px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-dark-label); }
.data-quote-sm { margin-top: 32px; padding-left: 20px; border-left: 3px solid var(--accent); }
.data-quote-sm blockquote { font-size: 30px; color: var(--navy); }
.sec-split { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 64px; }
.sec-split-copy { flex: 1 1 440px; min-width: 0; }
.access-card, .trace-card { flex: 1 1 420px; min-width: 0; background: var(--white); border-radius: var(--radius-card); padding: 24px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--navy); }
.trace-card { background: linear-gradient(180deg, #F3F1EA, #ECE9E0); box-shadow: none; }
.access-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.access-head span { color: var(--text-quiet); font-size: 14px; }
.access-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #F6F4EE; }
.access-row span { color: var(--text-body); font-size: 14px; }
.faqs { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0; font-size: 20px; font-weight: 600; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 26px; font-weight: 400; color: var(--accent); transition: transform .15s ease; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 22px; font-size: 17px; line-height: 1.6; color: var(--text-body); }
@media (max-width: 1099px) { .seals, .stiles, .stiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seals .seal-tile:last-child { grid-column: 1 / -1; } }
@media (max-width: 699px) {
  .seals, .stiles, .stiles-4 { grid-template-columns: minmax(0, 1fr); }
  .sec-vault, .access-card, .trace-card { padding: 20px; }
  .stile { padding: 22px; }
  .faq summary { font-size: 18px; }
}

/* "How lenders use it": tasks as tabs, each framed by a crop of the page's own still (the kit sets the crop inline) */
.use-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.use-tab { min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--white);
  font: inherit; font-size: 16px; font-weight: 600; color: var(--navy); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.use-tab:hover { border-color: var(--accent); }
.use-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.use-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; align-items: center; }
.use-panel[hidden] { display: none; }
.use-panel:not([hidden]) { animation: use-in .2s ease; }
@keyframes use-in { from { opacity: 0; } to { opacity: 1; } }
.use-copy .h3 { margin: 0 0 14px; }
.use-copy p { font-size: 18px; line-height: 1.6; color: var(--text-body); }
.use-frame { position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--white);
  box-shadow: 0 0 0 1px var(--line-soft), 0 18px 40px rgba(17, 30, 57, 0.12); }
.use-frame img { position: absolute; max-width: none; height: auto; display: block; }
@media (max-width: 899px) { .use-panel { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (prefers-reduced-motion: reduce) { .use-panel:not([hidden]) { animation: none; } }

/* The workload calculator: the inputs beside the year's totals */
.calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--card-gap); align-items: start; }
.calc-out { background: var(--navy); color: var(--cream); border-radius: var(--radius-card); padding: 40px; }
.calc-out .h3 { color: var(--cream); margin-bottom: 24px; }
.calc-out dl { margin: 0; }
.calc-out dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(254, 253, 248, 0.18); }
.calc-out dl > div[hidden] { display: none; }
.calc-out dt { font-size: 16px; color: rgba(254, 253, 248, 0.85); }
.calc-out dd { margin: 0; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.calc-sum { margin-top: 20px; font-size: 15px; line-height: 1.5; color: rgba(254, 253, 248, 0.85); font-variant-numeric: tabular-nums; }
.calc-intro { margin-bottom: 32px; }
.calc + .calc { margin-top: var(--card-gap); }
.field-hint { font-size: 14px; line-height: 1.5; color: var(--text-quiet); }
.field[hidden] { display: none; }
.calc-assume { margin: 4px 0 12px; }
.calc-assume span { font-variant-numeric: tabular-nums; }
.calc-change { min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent); text-decoration: underline; cursor: pointer; }
.calc-note { font-size: 15px; font-weight: 600; color: var(--warn); }
.trust-live-note { align-self: center; margin: 0; }
.sec-links { display: flex; flex-wrap: wrap; gap: 12px 32px; }
@media (max-width: 899px) { .calc { grid-template-columns: minmax(0, 1fr); } .calc-out { padding: 28px; } }

/* Trust Center: the documents, each public or on request, and the sub-processors by category */
.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.doc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 32px; padding: 22px 28px;
  background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-card); }
.doc-row .h4 { margin: 0 0 4px; }
.doc-row p { font-size: 15px; line-height: 1.5; color: var(--text-body); }
.doc-state { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ok-text); }
.doc-state-req { color: var(--accent); }
.doc-act { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--accent); text-decoration: none; }
.doc-act:hover { text-decoration: underline; }
.sub-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.sub-table th, .sub-table td { text-align: left; vertical-align: top; padding: 18px 24px 18px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.55; }
.sub-table thead th { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-quiet); padding-top: 14px; padding-bottom: 14px; }
.sub-table tbody th { width: 34%; font-weight: 700; color: var(--navy); }
.sub-table td { color: var(--text-body); }
@media (max-width: 699px) {
  .doc-row { grid-template-columns: minmax(0, 1fr) auto; padding: 20px; }
  .doc-row > div { grid-column: 1 / -1; }
  .sub-table thead { display: none; }
  .sub-table tr, .sub-table th, .sub-table td { display: block; width: auto; }
  .sub-table tbody th { padding-bottom: 4px; width: auto; border-bottom: 0; }
  .sub-table td { padding-top: 0; }
}

/* The product and solution pages (pages_kit.py): hero, the screen, three highlights, detail rows, a statement, links */
.pp-hero { padding-bottom: 40px; }
.pp-screen-wrap { padding-bottom: 8px; }
.pp-screen { margin: 0; border-radius: 14px; overflow: hidden; background: var(--cream); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.25); }
.pp-screen img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.pp-standin { display: flex; aspect-ratio: 16 / 10; }
.pp-standin-nav { flex: none; width: 188px; padding: 20px 14px; border-right: 1px solid rgba(17, 30, 57, 0.12); background: rgba(17, 30, 57, 0.025); }
.pp-standin-nav img { display: block; height: 22px; width: auto; margin: 0 0 24px 8px; }
.pp-standin-nav ul { list-style: none; margin: 0; padding: 0; }
.pp-standin-nav li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px; color: var(--text-body); font-size: 14px; }
.pp-standin-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 6%; }
.pp-standin-main .sol-vis { width: 100%; max-width: 620px; height: auto; min-height: 220px; padding: 28px; font-size: 15px; }
.pp-hl .h4 { margin-top: 0; }
/* the homepage's approved stills (October 28, 2026): the borrowers list under the hero, the Ask CORA composer in its
   band; wide enough that their text reads at about 12 px */
.home-shot { margin: 0 auto; max-width: 760px; border-radius: 20px; overflow: hidden; background: #E4E4E1; box-shadow: 0 30px 70px rgba(17, 30, 57, 0.16), 0 6px 18px rgba(17, 30, 57, 0.08); }
.home-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.home-shot-dark { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }

/* the page opens on the approved square still beside the words; the still takes six tenths so its text reads */
.pp-split { padding-top: var(--section-y-hero); padding-bottom: 24px; }
.pp-split-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.pp-split-copy .lead { margin-top: 24px; }
.pp-shot { margin: 0; border-radius: 20px; overflow: hidden; background: #E4E4E1; box-shadow: 0 30px 70px rgba(17, 30, 57, 0.16), 0 6px 18px rgba(17, 30, 57, 0.08); }
.pp-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.pp-shot-tall { max-width: 600px; justify-self: center; width: 100%; }
.pp-shot-tall img { aspect-ratio: 4 / 5; }
.pp-closer { padding-top: var(--section-y); }
.pp-shot-center { max-width: 760px; margin: 0 auto; }
@media (max-width: 899px) { .pp-split-row { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.pp-rels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.pp-rel { display: flex; flex-direction: column; gap: 6px; padding: 24px; border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: var(--white); color: var(--navy); text-decoration: none; min-height: 44px; }
.pp-rel b { font-size: 19px; }
.pp-rel span { font-size: 15px; line-height: 1.5; color: var(--text-body); }
.pp-rel svg { margin-top: 6px; color: var(--accent); }
.pp-rel:hover b { color: var(--accent); }
@media (max-width: 1099px) { .pp-rels { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .pp-standin-nav { display: none; } .pp-standin-main { padding: 16px; } .pp-standin { aspect-ratio: auto; } }

/* The overviews' cards: each one a link to its page */
.sols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sols-3 .sol, .sols-4 .sol { grid-column: auto; }
.sol-card { color: var(--navy); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.sol-card:hover { border-color: rgba(36, 64, 122, 0.35); box-shadow: var(--shadow-card); }
.sol-card .text-link { margin-top: auto; }
.sols-4 .sol-vis { height: 140px; padding: 14px; }
@media (max-width: 1099px) { .sols-3, .sols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sols-3 .sol:last-child, .sols-4 .sol:last-child { grid-column: auto; } }
@media (max-width: 699px) { .sols-3, .sols-4 { grid-template-columns: minmax(0, 1fr); } }

/* The small product touch at the top of each card: static, never a walkthrough */
.sol-vis {
  height: 150px; margin: 4px 0 6px; padding: 18px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #F3F1EA, #ECE9E0); display: flex; flex-direction: column; justify-content: center; gap: 8px;
  font-size: 13px; line-height: 1.4; color: var(--navy);
}
.sol-lead .sol-vis { height: 170px; }
.v-rows { display: flex; flex-direction: column; gap: 6px; }
.v-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--white); border-radius: 8px; padding: 7px 10px; box-shadow: 0 1px 2px rgba(17, 30, 57, 0.06); }
.v-row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-pill { flex: none; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.v-ok { color: #156B49; background: rgba(30, 138, 95, 0.12); }
.v-needs { color: var(--accent); background: rgba(36, 64, 122, 0.12); }
.v-late { color: var(--warn); background: rgba(179, 57, 46, 0.1); }
.v-prompt { display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: 999px; padding: 9px 9px 9px 16px; box-shadow: 0 2px 8px rgba(17, 30, 57, 0.08); }
.v-prompt span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-prompt i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--cream); display: grid; place-items: center; font-style: normal; }
.v-answer { background: rgba(255, 255, 255, 0.6); border-radius: 10px; padding: 9px 12px; }
.v-answer em { display: block; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin-top: 4px; }
.v-q b { display: block; font-weight: 600; margin-bottom: 8px; }
.v-opt { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; background: var(--white); border: 1px solid rgba(17, 30, 57, 0.12); border-radius: 999px; padding: 4px 10px; }
.v-rec { border-color: var(--accent); }
.v-rec em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.v-doc { background: var(--white); border-radius: 8px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(17, 30, 57, 0.06); }
.v-doc b { display: block; font-weight: 700; margin-bottom: 4px; }
.v-doc p { font-size: 13px; line-height: 1.5; color: var(--text-body); }
.v-doc s { color: var(--warn); }
.v-doc ins { text-decoration: none; background: rgba(30, 138, 95, 0.14); color: #156B49; padding: 0 2px; border-radius: 2px; }
.v-stat span { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-quiet); }
.v-stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 2px 0 10px; font-variant-numeric: tabular-nums; }
.v-stat em { display: block; font-style: normal; font-size: 13px; color: var(--text-quiet); margin-top: 6px; }
.v-bar { position: relative; height: 8px; border-radius: 999px; background: rgba(17, 30, 57, 0.1); }
.v-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
.v-bar u { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--navy); }
.v-chain { display: flex; align-items: center; }
.v-chain i { flex: 1; height: 2px; background: rgba(17, 30, 57, 0.18); }
.v-ring { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(17, 30, 57, 0.2); background: var(--white); }
.v-done { border-color: var(--ok); color: var(--ok); }
.v-now { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(36, 64, 122, 0.12); }
.v-chain-l { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-quiet); }
.v-chart { display: flex; align-items: flex-end; gap: 10px; height: 100%; padding-top: 6px; border-bottom: 1px solid rgba(17, 30, 57, 0.16); }
.v-chart i { flex: 1; border-radius: 4px 4px 0 0; background: var(--accent); opacity: 0.85; }
.v-chart i:last-child { background: var(--navy); opacity: 1; }
.v-folders { display: flex; flex-wrap: wrap; gap: 8px; }
.v-folders span { background: var(--white); border-radius: 8px; padding: 8px 12px 8px 30px; position: relative; box-shadow: 0 1px 2px rgba(17, 30, 57, 0.06); font-weight: 600; }
.v-folders span::before { content: ""; position: absolute; left: 10px; top: 50%; width: 13px; height: 10px; margin-top: -5px; border-radius: 2px; background: #E7A13B; }
.v-log { display: flex; flex-direction: column; gap: 6px; }
.v-log div { display: flex; gap: 6px; align-items: baseline; background: var(--white); border-radius: 8px; padding: 7px 10px; white-space: nowrap; overflow: hidden; }
.v-log b { font-weight: 700; }
.v-log span { margin-left: auto; color: var(--text-quiet); font-variant-numeric: tabular-nums; }
.v-sign { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--white); border-radius: 10px; padding: 12px 12px 12px 16px; box-shadow: 0 2px 8px rgba(17, 30, 57, 0.08); }
.v-sign span { min-width: 0; font-weight: 600; }
.v-sign b { flex: none; background: var(--navy); color: var(--cream); border-radius: 999px; padding: 7px 18px; }

/* Desk */
.desk { display: flex; gap: 16px; flex-wrap: wrap; }
.desk-col { flex: 1 1 180px; min-width: 0; background: var(--beige); border-radius: 12px; padding: 14px; }
.desk-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-body); margin-bottom: 12px; }
.desk-label.is-needs { color: var(--accent); }
.desk-label.is-past { color: var(--warn); }
.desk-item { background: var(--white); border-radius: var(--radius-item); padding: 12px; box-shadow: var(--shadow-item); }
.desk-item + .desk-item { margin-top: 10px; }
.desk-item b { display: block; font-size: 14px; font-weight: 600; }
.desk-item span { display: block; font-size: 13px; color: var(--text-quiet); margin-top: 4px; }
.desk-item em { display: block; font-style: normal; font-size: 13px; color: var(--accent); font-weight: 600; margin-top: 8px; }

/* Conversation */
.thread { display: flex; flex-direction: column; gap: 16px; }
.bubble-user {
  align-self: flex-end; max-width: 88%;
  background: var(--navy); color: var(--cream);
  font-size: 14px; line-height: 1.5; padding: 12px 14px; border-radius: 14px 14px 4px 14px;
}
.bubble-cora {
  background: var(--beige); color: var(--navy);
  font-size: 14px; line-height: 1.55; padding: 12px 14px; border-radius: 14px 14px 14px 4px;
}
.thread-lg .bubble-user, .thread-lg .bubble-cora { font-size: 15px; line-height: 1.6; padding: 14px 16px; }
.thread-lg .bubble-user { max-width: 85%; }
.sources { display: block; font-size: 13px; color: var(--accent); margin-top: 8px; font-weight: 600; }
.thread-lg .sources { font-size: 13px; }
.status-line { font-size: 13px; color: var(--text-quiet); display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; flex: none; }
.dot-ok { background: var(--ok); }
.chat-card { background: var(--cream); color: var(--navy); border-radius: var(--radius-card); padding: 28px; }
@media (max-width: 767px) { .chat-card { padding: 18px; } }

/* Decision card */
.decision { border: 1px solid rgba(17, 30, 57, 0.15); border-radius: var(--radius-panel); padding: 18px; background: var(--cream); }
.decision-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.decision-q { font-size: 16px; font-weight: 600; margin: 8px 0 14px; line-height: 1.4; }
.options { display: flex; flex-direction: column; gap: 8px; }
.opt {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  min-height: 44px; padding: 12px 14px; text-align: left;
  font-size: 15px; color: var(--navy); background: var(--white);
  border: 1px solid var(--line-strong); border-radius: var(--radius-item);
}
.opt.is-rec { border: 2px solid var(--accent); background: rgba(36, 64, 122, 0.06); }
.rec-tag { font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em; }
.decision-cite { font-size: 13px; color: var(--text-quiet); margin-top: 12px; line-height: 1.5; }

/* Status pills */
.pill { display: inline-block; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.pill-ok { background: rgba(30, 138, 95, 0.12); color: var(--ok-text); }
.pill-needs { background: rgba(36, 64, 122, 0.12); color: var(--accent); }
.pill-received { background: rgba(17, 30, 57, 0.07); color: var(--text-body); }
.pill-warn { background: rgba(179, 57, 46, 0.10); color: var(--warn); }

/* Record exhibit: tabs, search, table */
.record-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  min-height: 44px; padding: 10px 16px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-body); font-size: 14px; cursor: pointer;
}
.tab:hover { background: var(--accent-tint); }
.tab[aria-selected="true"] { background: var(--navy); color: var(--cream); font-weight: 600; }
.search {
  display: flex; align-items: center; gap: 8px; flex: 0 1 300px; min-width: 200px; min-height: 44px;
  border: 1px solid rgba(17, 30, 57, 0.15); border-radius: var(--radius-pill); padding: 0 14px;
  font-size: 14px; color: var(--text-quiet);
}
.search input { border: 0; outline: 0; font: inherit; color: var(--navy); background: transparent; width: 100%; min-width: 0; min-height: 44px; }
.search:focus-within { border-color: var(--accent); }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table th { text-align: left; color: var(--text-quiet); font-size: 13px; font-weight: 600; padding: 14px 20px; }
.data-table td { padding: 14px 20px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.data-table td.strong { font-weight: 600; }
.data-table td.muted { color: var(--text-quiet); }
.data-table tr.row-hi td { background: rgba(36, 64, 122, 0.05); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-foot { padding: 14px 20px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--text-body); display: flex; align-items: center; gap: 8px; }
.tab-panel[hidden] { display: none; }

/* Intake chips */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; font-size: 15px; color: var(--text-body); }
.chips b { color: var(--navy); font-weight: 600; }
.chip { border: 1px solid rgba(17, 30, 57, 0.15); border-radius: var(--radius-pill); padding: 8px 14px; background: transparent; }

@media (max-width: 767px) {
  .m-hide { display: none !important; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
  .search { flex: 1 1 100%; }
  .data-table th, .data-table td { padding: 12px 10px; font-size: 14px; }
  .record-bar { padding: 12px; }
}

/* ---------- Proof strip ---------- */
.proof { padding-top: 48px; padding-bottom: 48px; }
.proof-note { font-size: 14px; color: var(--text-quiet); margin-bottom: 28px; }
.stats { display: flex; flex-wrap: wrap; gap: 32px; }
.stat { flex: 1 1 200px; min-width: 0; }
.stat-num { font-family: var(--serif); font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-num.t-warn { color: var(--warn); }
.stat-label { font-size: 15px; color: var(--text-body); margin-top: 8px; }
@media (max-width: 767px) {
  .stat { flex: 1 1 40%; }
  .stat-wide { flex: 1 1 100%; }
  .stat-num { font-size: 36px; }
}

/* ---------- Cards ---------- */
.card { background: var(--cream); border-radius: var(--radius-card); padding: 40px; }
.card-beige { background: var(--beige); }
.card-white { background: var(--white); box-shadow: var(--shadow-card); }
.card-dark { background: var(--navy); color: var(--cream); }
.card-line { border: 1px solid rgba(17, 30, 57, 0.15); background: transparent; }
.card .label + .h3 { margin-top: 16px; }
.card .h3 + .body, .card .h3 + .rows { margin-top: 24px; }
.rows { display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 1.5; color: var(--text-body); }
.rows > div, .rows > li { padding-top: 16px; border-top: 1px solid var(--line); }
.card-dark .rows { color: var(--on-dark-soft); }
.card-dark .rows > div, .card-dark .rows > li { border-top-color: var(--line-light); }
ul.rows { list-style: none; margin: 0; padding: 0; }
@media (max-width: 767px) { .card { padding: 24px; } }

/* Link cards (who it is for, hubs) */
.link-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--beige); border-radius: 16px; padding: 28px;
  text-decoration: none; color: var(--navy); transition: background-color .15s ease;
}
.link-card:hover { background: var(--sand); color: var(--navy); }
.link-card .h4 { color: var(--navy); }
.link-card p { font-size: 15px; line-height: 1.55; color: var(--text-body); }
.link-card .arrow { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }

/* Numbered steps */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 24px; }
.step { flex: 1 1 200px; min-width: 0; border-top: 2px solid var(--navy); padding-top: 20px; }
.step-num { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; }
.step-verb { font-family: var(--serif); font-size: 28px; line-height: 1.2; margin: 8px 0 10px; }
.step p { font-size: 15px; line-height: 1.55; color: var(--text-body); }
.band-navy .step, .band-deep .step { border-top-color: var(--cream); }
.band-navy .step-num, .band-deep .step-num { color: var(--on-dark-label); }
.band-navy .step p, .band-deep .step p { color: var(--on-dark-soft); }

/* Feature columns with a hairline top rule */
.feature { flex: 1 1 300px; min-width: 0; border-top: 1px solid var(--line-strong); padding-top: 24px; }
.feature .h4 { margin-bottom: 12px; }
.feature p { font-size: 16px; line-height: 1.6; color: var(--text-body); }
.feature ul { margin: 14px 0 0; padding-left: 18px; color: var(--text-body); font-size: 15px; line-height: 1.55; }
.feature li + li { margin-top: 6px; }
.feature .text-link { margin-top: 8px; }
.feature.col-3 { flex-basis: 300px; }
.feature.col-4 { flex-basis: 240px; }
.band-navy .feature, .band-deep .feature { border-top-color: var(--line-light); }
.band-navy .feature p, .band-deep .feature p, .band-navy .feature ul, .band-deep .feature ul { color: var(--on-dark-soft); }

/* Detail rows: a heading and its words on the left, the list on the right */
.detail { display: flex; flex-wrap: wrap; gap: 24px 56px; padding: 48px 0; border-top: 1px solid var(--line); }
.detail:last-child { border-bottom: 1px solid var(--line); }
.detail-copy { flex: 1 1 420px; min-width: 0; }
.detail-copy .label { margin-bottom: 12px; }
.detail-copy .h3 + p { margin-top: 16px; }
.detail-copy p { font-size: 17px; line-height: 1.6; color: var(--text-body); }
.detail-copy p + p { margin-top: 12px; }
.detail-list { flex: 1 1 340px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.detail-list li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 16px; line-height: 1.5; color: var(--text-body); }
.detail-list li:first-child { border-top: 0; padding-top: 0; }
.detail-list svg { flex: none; position: relative; top: 2px; color: var(--ok); }
.detail-list.plain svg { color: var(--accent); }
@media (max-width: 767px) { .detail { padding: 36px 0; } }

/* Check list (trust, what changes) */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 32px; font-size: 16px; }
.checks li { flex: 1 1 200px; min-width: 0; display: flex; gap: 10px; align-items: baseline; }
.checks svg { flex: none; position: relative; top: 2px; }
.checks-col { flex-direction: column; gap: 12px; }
.checks-col li { flex: none; }

/* Platform stack */
/* "One platform, built in layers" as a click-through: the stack of layers is the tablist, its panel beside it */
.layers { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; }
.layer-tabs { display: flex; flex-direction: column; gap: 10px; }
button.layer { width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; min-height: 64px; align-items: center;
  transition: transform .15s ease, box-shadow .15s ease, outline-color .15s ease; outline: 2px solid transparent; outline-offset: 3px; }
button.layer:hover { transform: translateX(4px); }
button.layer[aria-selected="true"] { outline-color: var(--accent); box-shadow: 0 10px 26px rgba(17, 30, 57, 0.16); }
.layer-panel { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-card); padding: 32px; }
.layer-panel .h3 { margin: 0 0 12px; }
.layer-panel p { font-size: 16px; line-height: 1.6; color: var(--text-body); margin-bottom: 20px; }
@media (max-width: 899px) { .layers { grid-template-columns: minmax(0, 1fr); } .layer-panel { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { button.layer:hover { transform: none; } }
.stack { display: flex; flex-direction: column; gap: 10px; }
.surfaces { display: flex; flex-wrap: wrap; gap: 10px; }
.surface-card { flex: 1 1 200px; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-panel); padding: 18px; }
.surface-card b { display: block; font-size: 17px; font-weight: 700; }
.surface-card span { display: block; font-size: 14px; color: var(--text-quiet); margin-top: 4px; }
.surface-card em { display: block; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-top: 10px; }
.layer { border-radius: var(--radius-panel); padding: 22px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--cream); }
.layer b { font-size: 19px; font-weight: 700; }
.layer span { font-size: 15px; color: rgba(254, 253, 248, 0.85); }
.layer-analyst { background: var(--white); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(36, 64, 122, 0.18); }
.layer-analyst span { color: var(--accent); }
.layer-engine { background: var(--navy); }
.layer-record { background: var(--navy-deep); }
.layer-surfaces { background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line-strong); }
.layer-surfaces span { color: var(--text-quiet); }

/* Certificate: declared beside recomputed */
.cert { background: var(--white); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-card); color: var(--navy); }
.cert-head { font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-quiet); }
.cert table { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 16px; }
.cert th { text-align: right; color: var(--text-quiet); font-size: 13px; font-weight: 600; padding: 10px 0; }
.cert th:first-child { text-align: left; }
.cert td { padding: 12px 0; border-top: 1px solid var(--line-soft); text-align: right; font-variant-numeric: tabular-nums; }
.cert td:first-child { text-align: left; padding-right: 12px; }
.cert td.re { color: var(--ok-text); font-weight: 600; }
.cert tr.total td { font-weight: 600; }
.cert-break { margin-top: 16px; padding: 14px 16px; background: rgba(179, 57, 46, 0.08); border-radius: var(--radius-item); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.cert-break b { font-weight: 600; }
.cert-break span { font-weight: 700; color: var(--warn); font-variant-numeric: tabular-nums; }
.cert-ready { margin-top: 16px; padding: 14px 16px; background: rgba(30, 138, 95, 0.08); border-radius: var(--radius-item); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.cert-ready b { font-weight: 600; }
.cert-ready span { font-weight: 600; color: var(--ok-text); }
@media (max-width: 767px) {
  .cert { padding: 18px; }
  .cert table { font-size: 14px; }
}

/* Trust panel */
.trust { border: 1px solid rgba(17, 30, 57, 0.15); border-radius: var(--radius-card); padding: 40px; display: flex; flex-wrap: wrap; gap: 40px; }
.trust-copy { flex: 1 1 460px; min-width: 0; }
.trust-copy .h3 { font-size: 36px; margin-bottom: 12px; }
.trust .checks { flex: 1 1 480px; }
@media (max-width: 767px) { .trust { padding: 24px; gap: 28px; } .trust-copy .h3 { font-size: 30px; } }

/* Close */
.close-cta { text-align: center; }
.close-cta .h2 { margin: 0 auto; }
.close-cta .lead-sm { margin: 28px auto 0; }

/* Roles */
.role { flex: 1 1 260px; min-width: 0; background: var(--white); border-radius: 16px; padding: 28px; border: 1px solid var(--line-soft); }
.role .h4 { margin-bottom: 8px; }
.role p { font-size: 15px; line-height: 1.55; color: var(--text-body); }
.role ul { margin: 14px 0 0; padding: 0; list-style: none; }
.role li { font-size: 15px; line-height: 1.5; color: var(--text-body); padding: 8px 0; border-top: 1px solid var(--line-soft); }

/* Small window (the borrower period screen) */
.window { background: var(--white); border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; color: var(--navy); }
.window-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); font-size: 14px; font-weight: 700; flex-wrap: wrap; }
.window-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.kv:first-of-type { border-top: 0; }
.kv span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-quiet); }
.note { font-size: 14px; line-height: 1.55; background: var(--beige); border-radius: var(--radius-item); padding: 12px 14px; color: var(--text-body); }

/* ---------- Forms (Request a demo, Apply) ---------- */
.form-card { background: var(--white); border-radius: var(--radius-card); padding: 40px; box-shadow: var(--shadow-card); }
.form-card .h3 { margin-bottom: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; min-width: 0; }
.field label { font-size: 14px; font-weight: 600; color: var(--navy); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 16px; color: var(--navy);
  background: var(--cream); border: 1px solid var(--line-strong); border-radius: var(--radius-item);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field input[type="file"] { padding: 10px; background: var(--white); }
.form-row { display: flex; flex-wrap: wrap; gap: 0 20px; }
.form-row > .field { flex: 1 1 220px; }
.form-card .btn { width: 100%; margin-top: 8px; }
.form-msg { margin-top: 16px; font-size: 15px; line-height: 1.5; min-height: 1px; }
.form-msg.success { color: var(--ok-text); font-weight: 600; }
.form-msg.error { color: var(--warn); font-weight: 600; }
.hp { display: none !important; }
.contact-list { display: flex; flex-direction: column; gap: 24px; }
.contact-list .mini-label { margin-bottom: 4px; }
.contact-list p, .contact-list a { font-size: 17px; }
@media (max-width: 767px) { .form-card { padding: 24px; } }

/* ---------- Blog cards ---------- */
.posts { display: flex; flex-wrap: wrap; gap: var(--card-gap); }
.post-card { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; background: var(--white); border-radius: 16px; overflow: hidden; border: 1px solid var(--line-soft); }
.post-card .media { display: block; aspect-ratio: 1556 / 876; background: var(--beige); overflow: hidden; }
.post-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .media.soon { display: flex; align-items: center; justify-content: center; background: var(--beige); color: var(--accent); font-family: var(--serif); font-size: 22px; }
.post-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.post-meta { font-size: 13px; color: var(--text-quiet); }
.post-meta b { font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; margin-right: 6px; }
.post-card h3 { font-size: 20px; font-weight: 700; line-height: 1.3; }
.post-card h3 a { color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.post-card h3 { margin: -9px 0; }
.post-card h3 a:hover { color: var(--accent); }
.post-card p { font-size: 15px; line-height: 1.55; color: var(--text-body); }
.post-card .text-link { margin-top: auto; }
.post-lead-card { display: flex; flex-wrap: wrap; gap: 0; background: var(--white); border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line-soft); }
.post-lead-card .media { flex: 1 1 520px; min-width: 0; display: block; background: var(--beige); }
.post-lead-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1556 / 876; }
.post-lead-card .post-body { flex: 1 1 340px; padding: 40px; justify-content: center; }
.post-lead-card h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.12; }
.post-lead-card h2 a { color: var(--navy); text-decoration: none; }
.post-lead-card h2 a, .post-lead-card h3 a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0; }
@media (max-width: 767px) { .post-lead-card .post-body { padding: 24px; } }

/* Open roles */
.jobs { list-style: none; margin: 0; padding: 0; }
.job { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 24px 0; border-top: 1px solid var(--line); }
.job:last-child { border-bottom: 1px solid var(--line); }
.job a.job-title { font-family: var(--serif); font-size: 28px; line-height: 1.2; color: var(--navy); text-decoration: none; }
.job a.job-title:hover { color: var(--accent); }
.job-meta { font-size: 14px; color: var(--text-quiet); margin-top: 4px; }

/* ---------- Footer ---------- */
.site-foot { background: var(--navy-deep); color: rgba(254, 253, 248, 0.78); font-size: 14px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 64px; padding-bottom: 40px; }
.foot-brand { flex: 2 1 280px; min-width: 0; }
.foot-brand img { height: 36px; width: auto; display: block; }
.foot-brand p { margin-top: 16px; line-height: 1.6; }
.foot-col { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }
.foot-col h2 { font-size: 14px; font-weight: 600; color: var(--cream); margin-bottom: 4px; font-family: var(--sans); }
.foot-col a { color: rgba(254, 253, 248, 0.78); text-decoration: none; display: flex; align-items: center; min-height: 44px; }
.foot-col a:hover, .foot-legal a:hover, .foot-bottom a:hover { color: var(--sand); }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; padding-top: 8px; padding-bottom: 8px; border-top: 1px solid rgba(254, 253, 248, 0.12); font-size: 13px; }
.foot-legal a { color: rgba(254, 253, 248, 0.86); display: inline-flex; align-items: center; min-height: 44px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; padding-top: 8px; padding-bottom: 16px; border-top: 1px solid rgba(254, 253, 248, 0.12); font-size: 13px; }
.foot-bottom a { color: rgba(254, 253, 248, 0.86); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }

/* ============================================
   Posts, job postings and the legal pages: their bodies come from build_posts.py, build_jobs.py and
   build_trust.py unchanged, so their classes are styled here in the new type.
   ============================================ */
.hero-page { padding-top: var(--section-y-hero); padding-bottom: 40px; }
.hero-page .display-lg, .hero-page .display-xl {
  font-family: var(--serif); font-weight: 400; font-size: var(--fs-page); line-height: 1.04; letter-spacing: var(--tracking-display);
}
.post-kicker, .wf-num {
  font-size: 14px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent);
  margin-bottom: 20px;
}
.post-byline { margin-top: 20px; font-size: 15px; color: var(--text-quiet); }
.post-figure { margin: 40px 0 0; border-radius: var(--radius-card); overflow: hidden; background: var(--navy); }
.post-figure img, .post-figure video { display: block; width: 100%; height: auto; }
.lead-serif { margin-top: 24px; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-body); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-dark { background: var(--navy); color: var(--cream); }
.final-cta { text-align: center; }
.final-cta .display-lg, .final-cta h2 {
  font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading);
  margin: 0 auto;
}
.final-cta p { margin: 24px auto 0; font-size: 18px; line-height: 1.6; color: var(--on-dark-soft); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; }

.post-article p, .job-article p, .trust-article p { font-size: 18px; line-height: 1.7; color: var(--text-body); margin: 0 0 22px; }
.post-article .post-lead, .trust-article .trust-lead { font-family: var(--serif); font-size: 24px; line-height: 1.45; color: var(--navy); }
.post-article .post-emphasis {
  font-family: var(--serif); font-size: 26px; line-height: 1.35; color: var(--navy);
  border-left: 2px solid var(--accent); padding-left: 20px; margin: 32px 0;
}
.post-article .post-signoff { font-family: var(--serif); font-size: 22px; color: var(--navy); }
.post-article h2, .job-article h2, .trust-article h2 {
  font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.2; color: var(--navy); margin: 48px 0 16px;
}
.post-article h3, .trust-article h3 { font-size: 20px; font-weight: 700; margin: 32px 0 12px; }
.post-article ul, .post-article ol, .job-article ul, .trust-article ul, .trust-article ol { margin: 0 0 22px; padding-left: 22px; color: var(--text-body); font-size: 17px; line-height: 1.65; }
.post-article li + li, .job-article li + li, .trust-article li + li { margin-top: 8px; }
.post-article a, .job-article a, .trust-article a { color: var(--accent); }
.post-article a.btn-primary, .post-article a.btn-blue, .job-article a.btn-primary, .job-article a.btn-blue { color: var(--cream); }
.post-article a.btn-secondary, .post-article a.btn-outline-navy { color: var(--navy); }
.post-article figure, .post-article video, .post-article img { max-width: 100%; }
.post-share { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-quiet); }
.link-underline { font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }
ul.job-facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
ul.job-facts li + li { margin-top: 0; }
.job-comp { font-family: var(--serif); font-size: 24px; line-height: 1.4; color: var(--navy); background: var(--beige); border-radius: var(--radius-panel); padding: 20px 24px; margin-bottom: 32px; }
.job-legal p { font-size: 14px; line-height: 1.6; color: var(--text-quiet); margin-bottom: 12px; }
.trust-toc { background: var(--beige); border-radius: var(--radius-panel); padding: 24px 28px; margin: 8px 0 32px; }
.toc-label { font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.trust-toc ol { margin: 0; padding-left: 22px; font-size: 16px; columns: 2 220px; column-gap: 32px; }
.trust-toc li { break-inside: avoid; }
.trust-toc a { display: inline-flex; align-items: center; min-height: 44px; }
.trust-article li > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
.trust-article table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 24px; display: block; overflow-x: auto; }
.trust-article th, .trust-article td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
@media (max-width: 767px) {
  .post-article p, .job-article p, .trust-article p { font-size: 17px; }
  .post-article .post-lead, .trust-article .trust-lead { font-size: 21px; }
  .post-article .post-emphasis { font-size: 22px; }
  .post-article h2, .job-article h2, .trust-article h2 { font-size: 26px; }
  .job-comp { font-size: 20px; }
}

/* ============================================
   The home hero film (October 27, 2026, after Legora's top section): an extreme close-up of a screen drawn in code,
   file names drifting out of focus behind a prompt field that types, graded grey with a navy fall-off, the header see-
   through above it. Alex's film (assets/hero/cora-hero-*.mp4, three cuts) replaces the drawing under the same grade.
   The page scrolls normally: nothing here pins or locks the scroll.
   ============================================ */
:root { --head-h: 72px; }
@media (max-width: 899px) { :root { --head-h: 64px; } }

/* the header over the film, until the reader scrolls */
.site-head { transition: background-color .2s ease, border-color .2s ease; }
.brand img.logo-on-dark { display: none; }
body.head-over .site-head:not(.is-solid) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
body.head-over .site-head:not(.is-solid) .brand img.logo-on-light { display: none; }
body.head-over .site-head:not(.is-solid) .brand img.logo-on-dark { display: block; }
body.head-over .site-head:not(.is-solid) .nav-trigger,
body.head-over .site-head:not(.is-solid) .nav-login { color: var(--cream); }
body.head-over .site-head:not(.is-solid) .nav-cta { box-shadow: 0 0 0 1px rgba(254, 253, 248, 0.28); }
body.head-over .site-head:not(.is-solid) .menu-btn { color: var(--cream); }
body.head-over .site-head:not(.is-solid) :focus-visible { outline-color: var(--cream); }

.announce { position: relative; z-index: 51; min-height: 44px; }
.hero-film {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: calc(-44px - var(--head-h));
  height: calc(70vh / var(--zoom)); height: min(calc(70svh / var(--zoom)), 780px); min-height: 520px;
  display: flex; align-items: flex-end;
  background: #A9AFB9; color: var(--cream);
}
.film, .film-video, .film-grade, .film-grain { position: absolute; inset: 0; }
.film { background: linear-gradient(180deg, #B7BCC5 0%, #CDD1D7 42%, #B3B8C1 70%, #9DA3AE 100%); overflow: hidden; }
.film-video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: none; }
/* Alex's film (its README): the poster under it until the first frame, no grain or filter over it, the grade kept */
.hero-film.has-clip { background: #E4E6EA url(assets/hero/cora-hero-poster.jpg) 50% 40% / cover no-repeat; }
.hero-film.has-clip .film-video { display: block; }
.hero-film.has-clip .film, .hero-film.has-clip .film-grain { display: none; }
@media (max-width: 767px) { .hero-film.has-clip .film-video { object-position: 30% 40%; } }
/* the film is light at the top, so the see-through header reads navy over it and the grade keeps only its fall-off */
.hero-film.has-clip .film-grade { background: linear-gradient(180deg, rgba(11, 20, 40, 0) 0%, rgba(11, 20, 40, 0) 46%, rgba(11, 20, 40, 0.55) 70%, rgba(11, 20, 40, 0.94) 100%); }
body.head-over:has(.hero-film.has-clip) .site-head:not(.is-solid) .brand img.logo-on-light { display: block; }
body.head-over:has(.hero-film.has-clip) .site-head:not(.is-solid) .brand img.logo-on-dark { display: none; }
body.head-over:has(.hero-film.has-clip) .site-head:not(.is-solid) .nav-trigger,
body.head-over:has(.hero-film.has-clip) .site-head:not(.is-solid) .nav-login,
body.head-over:has(.hero-film.has-clip) .site-head:not(.is-solid) .menu-btn { color: var(--navy); }
body.head-over:has(.hero-film.has-clip) .site-head:not(.is-solid) :focus-visible { outline-color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .hero-film.has-clip .film-video { display: none; } }
.film-cam { position: absolute; inset: -8%; transform-origin: 38% 50%; animation: film-cam 28s ease-in-out infinite alternate; }
@keyframes film-cam {
  from { transform: translate3d(0, 0, 0) scale(1.03) rotate(-0.8deg); }
  to { transform: translate3d(-4%, -1.5%, 0) scale(1.12) rotate(0.3deg); }
}
.film-row {
  position: absolute; left: 0; display: flex; gap: 0.7em; white-space: nowrap;
  font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; color: #262C38;
  animation: film-drift 90s linear infinite;
}
.film-row span { flex: none; }
@keyframes film-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.film-far { top: 7%; font-size: clamp(44px, 6.4vw, 104px); filter: blur(4px); opacity: 0.72; }
.film-far.low { top: auto; bottom: 14%; animation-duration: 120s; animation-direction: reverse; opacity: 0.55; filter: blur(6px); }
.film-near { top: -3%; left: auto; right: -6%; font-size: clamp(72px, 10vw, 170px); font-weight: 700; text-transform: uppercase;
  filter: blur(9px); opacity: 0.5; animation-duration: 70s; }
.film-field {
  position: absolute; left: 0; right: 0; top: 33%; height: 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.10));
  box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.65), 0 -14px 24px rgba(17, 30, 57, 0.10), 0 2px 0 rgba(255, 255, 255, 0.55), 0 16px 26px rgba(17, 30, 57, 0.12);
  display: flex; align-items: center;
}
.film-type {
  padding-left: 9%; white-space: nowrap;
  font-family: var(--sans); font-weight: 500; font-size: clamp(60px, 9.6vw, 156px); letter-spacing: -0.02em; line-height: 1;
  color: #1B2130; text-shadow: 0 0 1px rgba(17, 30, 57, 0.45), 2px 1px 4px rgba(17, 30, 57, 0.22);
}
.film-caret { display: inline-block; width: 0.055em; height: 1.05em; margin-left: 0.04em; vertical-align: -0.16em; background: #1B2130;
  animation: film-blink 1s steps(1) infinite; }
@keyframes film-blink { 50% { opacity: 0; } }
.film-grade {
  background:
    linear-gradient(180deg, rgba(11, 20, 40, 0.55) 0%, rgba(11, 20, 40, 0) 20%, rgba(11, 20, 40, 0) 46%, rgba(11, 20, 40, 0.55) 70%, rgba(11, 20, 40, 0.94) 100%),
    radial-gradient(ellipse at 45% 42%, rgba(11, 20, 40, 0) 48%, rgba(11, 20, 40, 0.32) 100%);
}
.film-grain {
  opacity: 0.16; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: film-grain 0.6s steps(3) infinite;
}
@keyframes film-grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-12px, 8px); } 66% { transform: translate(9px, -10px); } }
/* The words at the foot of the film, Legora's sizes: the headline grows with the screen above 1100px, then 44px, then
   34px on phones; the line and the demo pill sit side by side, and stack under 1100px */
.hero-film-copy { position: relative; z-index: 2; text-align: center; padding-bottom: 50px; }
.hero-film-title {
  font-family: var(--serif); font-weight: 400; font-size: calc(36px + 1.4vw / var(--zoom)); line-height: 1.1; letter-spacing: -0.015em;
  color: var(--cream); margin: 0 auto; text-shadow: 0 2px 24px rgba(11, 20, 40, 0.35);
}
.hero-film-sub { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; margin-top: 18px; }
.hero-film-sub p { font-size: 18px; line-height: 1.4; color: var(--on-dark); }
.hero-cta { min-height: 44px; padding: 8px 16px 8px 20px; font-size: 15px; gap: 12px; }
.hero-cta.btn-primary { background: var(--cream); color: var(--navy); }
.hero-cta.btn-primary:hover { background: var(--beige); color: var(--navy); }
.hero-cta .cta-dot { background: var(--navy); color: var(--cream); }
@media (max-width: 1099px) {
  .hero-film-title { font-size: 44px; }
  .hero-film-sub { gap: 24px; }
  .hero-film-sub p { font-size: 16px; }
  .hero-film-copy { padding-bottom: 60px; }
}
@media (max-width: 600px) {
  .hero-film-title { font-size: 34px; }
  .hero-film-sub { gap: 28px; }
  .hero-film-sub p { font-size: 14px; }
}
.intro { text-align: center; }
.intro .lead { margin-left: auto; margin-right: auto; }
/* Headings fill each line and wrap only where the page runs out, never balanced into halves mid-page, never leaving one
   word alone (Alex, October 27, 2026); a hyphenated word in a heading never splits (render() wraps it in .nobr) */
h1, h2, h3, h4 { text-wrap: pretty; }
.nobr { white-space: nowrap; }
.intro-statement { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 40px); line-height: 1.25; letter-spacing: -0.01em; }
@media (max-width: 767px) {
  .film-field { top: 17%; height: 22%; }
  .film-grade { background: linear-gradient(180deg, rgba(11, 20, 40, 0.55) 0%, rgba(11, 20, 40, 0) 16%, rgba(11, 20, 40, 0) 34%, rgba(11, 20, 40, 0.72) 56%, rgba(11, 20, 40, 0.95) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .film-cam, .film-row, .film-grain, .film-caret { animation: none; }
}

/* ============================================
   Work panels (October 27, 2026, after Harvey's two audience panels): a dark textured ground, a serif title, a line,
   an outlined button, and a CORA window rising from the panel's lower right.
   ============================================ */
.work-panels { display: flex; flex-wrap: wrap; gap: 24px; }
.work-panel {
  flex: 1 1 520px; min-width: 0; position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-card); color: var(--cream); padding: 44px 44px 0; height: 780px;
  display: flex; flex-direction: column;
}
.work-panel::before, .work-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.work-panel.auto { background: radial-gradient(120% 90% at 85% 15%, #24407A 0%, rgba(36, 64, 122, 0) 55%), radial-gradient(90% 70% at 10% 90%, #1B2A4D 0%, rgba(27, 42, 77, 0) 60%), var(--navy-deep); }
.work-panel.prompt { background: radial-gradient(110% 85% at 80% 10%, rgba(230, 216, 189, 0.28) 0%, rgba(230, 216, 189, 0) 55%), radial-gradient(90% 80% at 0% 100%, #24407A 0%, rgba(36, 64, 122, 0) 60%), var(--navy); }
.work-panel::before {
  opacity: 0.22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.work-panel::after { background: repeating-linear-gradient(100deg, rgba(254, 253, 248, 0.025) 0 2px, rgba(254, 253, 248, 0) 2px 9px); }
.work-panel .label { color: var(--on-dark-label); }
.work-panel h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.02em; margin-top: 12px; }
.work-panel p { font-size: 17px; line-height: 1.55; color: var(--on-dark-soft); margin-top: 16px; min-height: calc(1.55em * 4); }
.work-panel .btn { margin-top: 28px; align-self: flex-start; min-height: 44px; padding: 10px 18px; border-radius: 8px; font-size: 15px; }
.work-window {
  margin-top: 36px; margin-left: 12%; margin-right: -44px; flex: 1 1 0; min-height: 0;
  display: flex; border-radius: 14px 0 0 0; overflow: hidden; background: var(--white); color: var(--navy);
  box-shadow: 0 -10px 40px rgba(4, 12, 50, 0.35);
}
.ww-rail { flex: none; width: 56px; background: var(--navy-deep); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 14px 0; }
.ww-rail img { width: 26px; height: 26px; }
.ww-rail span { display: block; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid rgba(254, 253, 248, 0.45); }
.ww-rail span.on { background: rgba(254, 253, 248, 0.9); border-color: transparent; }
.ww-main { flex: 1 1 auto; min-width: 0; padding: 22px 0 0 24px; }
.ww-crumb { font-size: 13px; color: var(--text-quiet); }
.ww-title { font-family: var(--serif); font-size: 26px; line-height: 1.2; margin-top: 4px; white-space: nowrap; }
.ww-tabs { display: flex; gap: 4px; margin-top: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; overflow: hidden; }
.ww-tabs span { font-size: 13px; padding: 6px 10px; border-radius: 8px; color: var(--text-body); }
.ww-tabs span.on { background: var(--beige); color: var(--navy); font-weight: 600; }
.ww-note { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-top: 16px; white-space: nowrap; }
.ww-stats { display: flex; gap: 12px; margin-top: 14px; }
.ww-stat { flex: 0 0 150px; background: var(--cream); border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; }
.ww-stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; }
.ww-stat span { display: block; font-size: 13px; color: var(--text-quiet); margin-top: 6px; }
.ww-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 16px; white-space: nowrap; }
.ww-table th { text-align: left; color: var(--text-quiet); font-weight: 600; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line-soft); }
.ww-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line-soft); }
.ww-table td b { font-weight: 600; }
/* the windows lead with the work itself: a run log, an exchange ending in an act to confirm */
.ww-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 20px 12px 0; border-bottom: 1px solid var(--line-soft); }
.ww-head b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ww-steps { list-style: none; margin: 0; padding: 4px 20px 0 0; }
.ww-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.ww-steps li > div { flex: 1 1 auto; min-width: 0; }
.ww-steps b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.ww-steps span:not(.ww-mark):not(.pill) { display: block; font-size: 13px; color: var(--text-quiet); margin-top: 2px; }
.ww-steps em { font-style: normal; font-size: 13px; color: var(--text-quiet); white-space: nowrap; }
.ww-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ww-steps li.done .ww-mark { background: rgba(30, 138, 95, 0.12); color: var(--ok); }
.ww-steps li.done .ww-mark svg { width: 12px; height: 12px; }
.ww-steps li.ask { background: rgba(36, 64, 122, 0.06); margin: 6px 0 0 -10px; padding: 11px 10px; border-radius: 10px; border-bottom: 0; }
.ww-steps li.ask .ww-mark { border: 2px solid var(--accent); }
.ww-thread { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px 0 0; }
.ww-thread .bubble-user, .ww-thread .bubble-cora { font-size: 13px; padding: 10px 12px; }
.ww-thread .sources { font-size: 13px; margin-top: 6px; }
.ww-thread .status-line { font-size: 13px; }
.ww-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 2px solid var(--accent); border-radius: 12px; padding: 10px 12px; background: rgba(36, 64, 122, 0.05); }
.ww-act b { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; margin-top: 2px; }
.ww-act .btn { min-height: 36px; padding: 6px 14px; font-size: 13px; flex: none; }
.ww-prompt { margin: 18px 24px 0 0; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--white); box-shadow: var(--shadow-item); }
.ww-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ww-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); }
.ww-ask { font-size: 15px; margin-top: 12px; line-height: 1.45; }
.ww-answer { margin: 14px 24px 0 0; background: var(--beige); border-radius: 12px 12px 12px 4px; padding: 12px 14px; font-size: 14px; line-height: 1.55; }
@media (max-width: 767px) {
  .work-panel { padding: 28px 24px 0; height: auto; }
  .work-panel p { min-height: 0; }
  .work-window { margin-left: 0; margin-right: -24px; margin-top: 32px; flex: none; height: auto; }
  .ww-rail { width: 44px; }
  .ww-main { padding: 16px 0 18px 16px; }
  .ww-title { font-size: 22px; }
}

/* ============================================
   Refinements of October 27, 2026, from the side-by-side with the four reference sites
   ============================================ */

/* Large stats with hairlines (Harvey, Rogo) */

/* The cycle showcase: a list on the left, its view on the right; click, tap or arrow keys, never the scroll */
.showcase { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; }
.sc-list { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; }
.sc-item {
  display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-strong);
  padding: 20px 0; cursor: pointer; color: var(--text-quiet); min-height: 44px;
}
.sc-item:last-child { border-bottom: 1px solid var(--line-strong); }
.sc-item .sc-head { display: flex; align-items: baseline; gap: 16px; }
.sc-item .sc-verb { font-family: var(--serif); font-size: 30px; line-height: 1.15; color: var(--text-quiet); transition: color .15s ease; }
.sc-item:hover .sc-verb { color: var(--navy); }
.sc-item .sc-text { display: none; font-size: 16px; line-height: 1.55; color: var(--text-body); margin: 10px 0 0; }
.sc-item[aria-selected="true"] .sc-verb { color: var(--navy); }
.sc-item[aria-selected="true"] .sc-text { display: block; }
.sc-stage { flex: 2 1 560px; min-width: 0; }
.sc-mat {
  border-radius: var(--radius-exhibit); padding: clamp(16px, 3vw, 40px); min-height: 520px;
  background: radial-gradient(120% 90% at 20% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #E9EBEF 0%, #D5D9E0 100%);
  display: flex; align-items: center;
}
.sc-panel { width: 100%; }
.sc-panel[hidden] { display: none; }
.glass {
  background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 60px rgba(17, 30, 57, 0.16), 0 2px 6px rgba(17, 30, 57, 0.06);
  padding: 24px; color: var(--navy);
}
.glass-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.glass-head b { font-size: 16px; font-weight: 700; }
.glass-head span { font-size: 13px; color: var(--text-quiet); }
.term { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.term:last-of-type { border-bottom: 0; }
.term b { display: block; font-size: 15px; font-weight: 600; }
.term q { display: block; font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--text-body); margin-top: 6px; quotes: "\201C" "\201D"; }
.term em { display: block; font-style: normal; font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 6px; }
.glass-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--text-body); display: flex; align-items: center; gap: 8px; }
.route { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.route-step { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.route-step .ring { width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid var(--line-strong); color: var(--ok); }
.route-step.done .ring { border-color: var(--ok); background: rgba(30, 138, 95, 0.10); }
.route-step.now .ring { border-color: var(--accent); }
.route-step b { font-size: 15px; font-weight: 600; display: block; }
.route-step span { font-size: 13px; color: var(--text-quiet); }
.route-step .pill { margin-left: auto; }
.glass .btn { margin-top: 18px; }
@media (max-width: 767px) {
  .sc-mat { min-height: 0; }
  .sc-item .sc-verb { font-size: 26px; }
  .glass { padding: 18px; }
}


/* The team page: a round headshot beside the name and role, the bio below (Alex's layout, October 27, 2026) */
.founders { display: flex; flex-wrap: wrap; gap: var(--card-gap); }
.person { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 36px; background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-card); }
.person-head { display: flex; align-items: center; gap: 28px; }
.person-photo { flex: none; width: 124px; height: 124px; border-radius: 50%; border: 3px solid var(--navy); object-fit: cover; background: var(--beige); display: block; }
.person-head .h3 { margin: 0; }
.person-role { margin-top: 6px; font-size: 18px; font-weight: 600; color: var(--accent); }
.person-bio { font-size: 17px; line-height: 1.65; color: var(--text-body); }
.person .text-link { margin-top: auto; }
@media (max-width: 599px) {
  .person { padding: 20px 16px; gap: 20px; }
  .person-head { gap: 18px; }
  .person-photo { width: 96px; height: 96px; }
}

/* Security on a dark band with tiles (Rogo, Harvey) */
.secure-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 64px; margin-bottom: 48px; }
.secure-title { flex: 1 1 520px; min-width: 0; }
.secure-copy { flex: 0 1 auto; min-width: 0; }
.secure-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.secure-tile { min-width: 0; border: 1px solid var(--line-light); border-radius: 16px; padding: 22px; background: rgba(254, 253, 248, 0.03); }
@media (max-width: 1099px) { .secure-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .secure-tiles { grid-template-columns: minmax(0, 1fr); } .secure-head { margin-bottom: 32px; } }
.secure-tile svg { color: var(--sand); }
.secure-tile b { display: block; font-size: 16px; font-weight: 600; margin-top: 14px; color: var(--cream); }
.secure-tile span { display: block; font-size: 14px; line-height: 1.5; color: var(--on-dark-soft); margin-top: 6px; }
.secure-tile.pending { border-style: dashed; }

/* The close, larger, and the footer's ghosted wordmark (Rogo, Vanta) */
.close-xl .h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.02em; }
.foot-mark { overflow: hidden; height: clamp(70px, 12vw, 180px); padding-top: 12px; }
.foot-mark img { display: block; width: 100%; height: auto; opacity: 0.07; }

/* Hover states, one rule for every clickable card, placed late so no component rule outweighs it (the benchmark
   audit of October 28, 2026 found the card hover never took effect): a 2 px lift, the accent border and the card
   shadow over 150 ms; no movement under reduced motion */
a.sol-card, a.pp-rel, a.link-card, .post-card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.sol-card:hover, a.pp-rel:hover, a.link-card:hover, .post-card:hover,
a.sol-card:focus-visible, a.pp-rel:focus-visible, a.link-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(36, 64, 122, 0.35);
  box-shadow: 0 14px 34px rgba(17, 30, 57, 0.12), 0 2px 6px rgba(17, 30, 57, 0.06);
}
.nav-trigger { text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav-trigger:hover, .nav-group.open > .nav-trigger { text-decoration: underline; }
.tab, .sc-item { transition: background-color .15s ease, color .15s ease; }
@media (prefers-reduced-motion: reduce) {
  a.sol-card:hover, a.pp-rel:hover, a.link-card:hover, .post-card:hover,
  a.sol-card:focus-visible, a.pp-rel:focus-visible, a.link-card:focus-visible { transform: none; }
}

/* The scroll fade (site.js sets reveal-ready only when motion is allowed) */
html.reveal-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(12px); }
html.reveal-ready [data-reveal] { transition: opacity .4s ease, transform .4s ease; }

/* ---------- The Service Provider Network (October 30, 2026) ----------
   The wheel: a ring of provider categories turning one tile at a time, the tile at three o'clock named beside the
   ring (below it under 1100px). Tiles stay upright by turning back as the ring turns. The names a reader needs are
   at least 25px, so 30px on a 2560px window (the page's zoom of 1.2). */
.pn-wheel-label { margin-bottom: 40px; }
.pn-wheel { display: flex; flex-direction: column; align-items: center; }
.pn-stage { --size: min(600px, calc(100vw - 48px)); --t: calc(var(--size) * 0.108); position: relative; flex: none;
  width: var(--size); height: var(--size); }
.pn-ring { --r: 0deg; position: absolute; inset: 0; margin: 0; padding: 0; list-style: none;
  transform: rotate(var(--r)); transition: transform 1.1s cubic-bezier(.45, 0, .2, 1); }
.pn-tile { position: absolute; left: 50%; top: 50%; width: var(--t); height: var(--t); margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2);
  transform: rotate(calc(var(--i) * var(--step))) translateX(calc(var(--size) / 2 - var(--t) / 2 - 8px)) rotate(calc(var(--i) * var(--step) * -1)); }
.pn-tile a { display: grid; place-items: center; width: 100%; height: 100%; border-radius: var(--radius-item);
  background: var(--white); color: var(--navy); border: 1px solid var(--line-strong); transform: rotate(calc(var(--r) * -1));
  transition: transform 1.1s cubic-bezier(.45, 0, .2, 1), background .3s ease, color .3s ease, border-color .3s ease, opacity .4s ease, scale .3s ease; }
.pn-tile a:hover { border-color: var(--accent); }
.pn-tile a svg { width: 46%; height: 46%; }
.pn-tile.is-current a { background: var(--navy); border-color: var(--navy); color: var(--cream); scale: 1.14; }
.pn-tile.is-ahead a { opacity: .4; }
.pn-tile-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pn-centre { position: absolute; inset: 16%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; text-align: center; }
.pn-centre-line { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, calc(var(--size) * 0.07), 42px);
  line-height: 1.08; letter-spacing: var(--tracking-heading); text-wrap: balance; color: var(--navy); }
/* the name takes the room beside the ring: one line wherever it fits (the longest is about 374px), wrapping only
   where the window leaves less (Alex, October 30, 2026) */
.pn-readout { position: absolute; left: calc(100% + 32px); top: 50%; transform: translateY(-50%); width: max-content;
  max-width: calc(var(--pad, 332px) - 32px); display: flex; flex-direction: column; gap: 4px; }
.pn-readout-name { font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--navy); }
.pn-readout-line { font-size: 25px; line-height: 1.3; color: var(--text-quiet); }
.pn-legend { display: none; width: 100%; margin-top: 40px; gap: 20px 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pn-legend-group b { display: block; margin-bottom: 4px; font-size: 17px; color: var(--navy); }
.pn-legend-group span { font-size: 16px; line-height: 1.5; color: var(--text-body); }
@media (min-width: 1100px) {
  .pn-wheel { --pad: min(424px, calc(min(100vw, var(--container)) - 2 * var(--gutter) - 16px - 600px)); padding-right: var(--pad); }
}
@media (max-width: 1099px) {
  .pn-stage { --size: min(560px, calc(100vw - 48px)); margin-bottom: 112px; }
  .pn-readout { left: 0; right: 0; top: calc(100% + 24px); transform: none; width: auto; max-width: none; align-items: center; text-align: center; }
  .pn-readout-name { font-size: 24px; }
  .pn-readout-line { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .pn-ring, .pn-tile a { transition: none; }
  .pn-legend { display: grid; }
}

/* The category grid: the service lines down a rail (tabs), each line's specialties as cards */
.pn-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 48px; align-items: start; }
.pn-rail { display: flex; flex-direction: column; gap: 4px; }
.pn-rail-tab { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px;
  border: 0; border-radius: var(--radius-item); background: transparent; font: inherit; font-size: 17px; font-weight: 600;
  color: var(--text-quiet); text-align: left; cursor: pointer; transition: background .15s ease, color .15s ease; }
.pn-rail-tab:hover { color: var(--navy); background: var(--accent-tint); }
.pn-rail-tab[aria-selected="true"] { color: var(--navy); background: var(--white); box-shadow: inset 3px 0 0 var(--navy); }
.pn-rail-count { font-size: 14px; font-weight: 600; color: var(--text-quiet); font-variant-numeric: tabular-nums; }
.pn-panel[hidden] { display: none; }
.pn-panel:not([hidden]) { animation: use-in .2s ease; }
.pn-panel .h3 { margin-bottom: 8px; }
.pn-panel-lead { margin-bottom: 28px; font-size: 17px; line-height: 1.55; color: var(--text-body); }
.pn-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }
.pn-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-card); transition: border-color .15s ease; }
.pn-card:hover { border-color: rgba(36, 64, 122, 0.35); }
.pn-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.pn-card-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-item);
  background: var(--beige); color: var(--navy); }
.pn-card-ico svg { width: 24px; height: 24px; }
.pn-card-title { font-size: 20px; font-weight: 700; line-height: 1.3; }
.pn-card p { font-size: 16px; line-height: 1.55; color: var(--text-body); }
.pn-card .pn-card-rec { color: var(--text-quiet); }
.pn-who-title { margin-bottom: 20px; }
.pn-form { height: 100%; display: flex; flex-direction: column; }
.pn-form .btn { margin-top: auto; }
.pn-form-lead { margin: -12px 0 20px; font-size: 16px; line-height: 1.55; color: var(--text-body); }
@media (max-width: 899px) {
  .pn-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pn-rail { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .pn-rail-tab { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--white); }
  .pn-rail-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--cream); box-shadow: none; }
  .pn-rail-tab[aria-selected="true"] .pn-rail-count { color: var(--on-dark-soft); }
}
@media (max-width: 599px) { .pn-cards { grid-template-columns: minmax(0, 1fr); } .pn-card { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { .pn-panel:not([hidden]) { animation: none; } }

/* Spacing utilities come last so they win over a component's own margin */
.mt-sm { margin-top: 16px; }
.mt-md { margin-top: 32px; }
.mt-lg { margin-top: 48px; }