/* HealthOS website-next. Same teal and fonts as website/, new structure. */
/* Layout concept: Lookout-style rhythm (dark band → wide product splits on tinted panels → proof band → articles → dark close),
   kept in HealthOS's own teal and Schibsted Grotesk / Instrument Sans. */
:root {
  --bg: #FFFFFF;
  --surface: #F3F7F6;
  --ink: #12201E;
  --text: #3B4846;
  --muted: #64716E;
  --line: #DCE5E2;
  --accent: #0D9488;
  --accent-strong: #0F766E;
  --accent-soft: #E2F3F0;
  --on-accent: #FFFFFF;
  --band: #0B2F2C;
  --band-raise: #12403C;
  --band-text: #E7F3F0;
  --band-muted: #A3C2BC;
  --band-accent: #2DD4BF;
  --on-band-accent: #062421;
  --note-bg: #FFF4CF;
  --note-line: #E7CF7A;
  --note-text: #5A4708;
  --shadow: 0 18px 50px -24px rgba(11, 47, 44, 0.35);

  --font-display: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-pill: 999px;
  --radius-panel: 28px;
  --radius-card: 18px;
  --container: 1200px;
  /* Light only, on every device: no dark palette, and Chrome's auto-dark is opted out. */
  color-scheme: only light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.02em; line-height: 1.12; margin: 0; text-wrap: pretty; }
/* Headlines balance their lines; section headings fill theirs. Balanced, a
   section heading a little too long for one line broke in half and left
   half its row empty. Pretty only keeps a last word from sitting alone. */
h1 { text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.wrap { max-width: var(--container); margin: 0 auto; padding-inline: 24px; }
@media (max-width: 600px) { .wrap { padding-inline: 16px; } }

/* ---------- Draft notes ---------- */
.draft-bar {
  background: var(--note-bg); color: var(--note-text); border-bottom: 1px solid var(--note-line);
  font-size: 13px; text-align: center; padding: 8px 16px;
}
.draft-bar b { font-weight: 700; }
.note {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--note-bg); color: var(--note-text); border: 1px dashed var(--note-line);
  border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.5; max-width: 72ch;
}
.note::before { content: 'Draft note'; font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; padding-top: 2px; }
.note-row { margin-top: 28px; }

/* ---------- Header / mega nav ---------- */
.header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); letter-spacing: -0.01em; }
.brand span { color: var(--accent); }
.brand svg path { stroke: var(--accent); }
.brand svg path.fill { fill: var(--accent); stroke: none; }
.menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.menu > li > button, .menu > li > a {
  font: 500 15px/1 var(--font-body); color: var(--text); background: none; border: 0; cursor: pointer;
  padding: 10px 9px; border-radius: 10px; display: flex; align-items: center; gap: 6px; text-decoration: none;
}
.menu > li > button:hover, .menu > li > a:hover, .menu > li > button[aria-expanded="true"] { background: var(--surface); color: var(--ink); }
.menu svg.chev { transition: transform .2s; }
.menu button[aria-expanded="true"] svg.chev { transform: rotate(180deg); }
.header-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.menu > li > button, .header-cta .btn { white-space: nowrap; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  padding-block: 28px 32px;
}
.mega-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.mega-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mega-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.mega-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
.mega-links.one { grid-template-columns: 1fr; }
.mega-label { font: 600 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 12px; }
.mega-item { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; }
.mega-item:hover { background: var(--surface); }
.mega-item strong { display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 15px; }
.mega-item small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; margin-top: 2px; }
.mega-item .live { font-size: 11px; color: var(--muted); font-weight: 500; }
.mega-feature { background: var(--surface); border-radius: var(--radius-card); padding: 18px; display: grid; gap: 14px; align-content: start; }
.mega-post { display: grid; grid-template-columns: 84px 1fr; gap: 12px; text-decoration: none; align-items: center; }
.mega-post img { border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; object-position: left top; width: 84px; }
.mega-post small { color: var(--muted); font-size: 12px; display: block; }
.mega-post strong { font-family: var(--font-display); color: var(--ink); font-size: 14px; line-height: 1.3; font-weight: 600; }
.mega-post:hover strong { color: var(--accent-strong); }
.mega-all { font-weight: 600; font-size: 14px; color: var(--accent-strong); text-decoration: none; }
.mega-products { grid-template-columns: 1fr 1fr; }
/* The whole-platform card runs the full height of the box beside it. */
.mega-products > div:first-child { display: flex; flex-direction: column; }
.mega-products .mega-hero { flex: 1; margin-bottom: 0; grid-template-rows: auto auto 1fr auto; }
.mega-hero-list { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; align-content: start; }
.mega-hero-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--text); font-size: 14px; line-height: 1.4; }
.mega-hero-list li:first-child { border-top: 0; }
.mega[data-panel="products"] .mega-feature { align-content: space-between; }
.mega-hero-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface); color: var(--accent-strong); }
.mega-products .mega-hero em { align-self: end; }
.mega[data-panel="ai"] .mega-feature { gap: 0; }
.mega[data-panel="ai"] .mega-feature .mega-item { padding-block: 7px; }
.mega-feature .mega-item:hover { background: var(--bg); }
.mega-hero { display: grid; gap: 6px; padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius-card); text-decoration: none; }
.mega-hero:hover { border-color: var(--accent); }
.mega-hero strong { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.mega-hero span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.mega-hero em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--accent-strong); }
.mega-tag { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg); border: 1px solid var(--line); color: var(--accent-strong); font: 600 11px/1.4 var(--font-body); letter-spacing: 0.02em; }
.drawer-label { display: block; padding: 10px 0 2px; font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 10px; width: 42px; height: 42px; cursor: pointer; color: var(--ink); }
.drawer { border-top: 1px solid var(--line); padding-block: 8px 20px; max-height: calc(100vh - 68px); overflow-y: auto; }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary { list-style: none; cursor: pointer; padding: 14px 0; font: 600 16px/1.2 var(--font-display); color: var(--ink); display: flex; justify-content: space-between; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: '+'; color: var(--muted); }
.drawer details[open] summary::after { content: '–'; }
.drawer details a { display: block; padding: 8px 0 8px 12px; text-decoration: none; color: var(--text); }
.drawer .drawer-cta { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* Seven menus and two buttons: the tour button goes first, then the burger takes over. */
@media (max-width: 1300px) { .header-cta .btn-ghost { display: none; } }
@media (max-width: 1100px) {
  .menu, .header-cta { display: none; }
  .burger { display: grid; place-items: center; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 12px 22px; border-radius: var(--radius-pill);
  font: 600 15px/1 var(--font-body); text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--bg); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.on-band .btn-primary { background: var(--band-accent); color: var(--on-band-accent); }
.on-band .btn-primary:hover { background: var(--band-text); }
.on-band .btn-ghost { background: transparent; border-color: color-mix(in srgb, var(--band-text) 35%, transparent); color: var(--band-text); }
.on-band .btn-ghost:hover { border-color: var(--band-text); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.text-link { font-weight: 600; color: var(--accent-strong); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Shared section bits ---------- */
.section { padding-block: 96px; }
.section-tight { padding-block: 64px; }
.eyebrow { font: 600 13px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-strong); margin-bottom: 14px; }
.on-band .eyebrow { color: var(--band-accent); }
.h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; }
.lede { font-size: 18px; color: var(--muted); max-width: 60ch; margin-top: 16px; }
.head { margin-bottom: 48px; max-width: 760px; }
.head.center { margin-inline: auto; text-align: center; }
.head.center .lede { margin-inline: auto; }
.band { background: var(--band); color: var(--band-text); }
.band h1, .band h2, .band h3 { color: #FFFFFF; }
.band .lede { color: var(--band-muted); }

/* ---------- Hero ---------- */
.hero { padding-block: 88px 80px; position: relative; overflow: hidden; background: var(--surface); }
.hero::after {
  content: ''; position: absolute; inset: auto -10% -40% auto; width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%);
  pointer-events: none;
}
.hero-copy { max-width: 820px; position: relative; z-index: 1; }
/* The care circle beside the headline: the one record at the centre, the eight
   places in the care circle around it, coloured by who they are for. */
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 16px; align-items: center; position: relative; z-index: 1; }
.hero-top .hero-copy { max-width: none; }
.hero-circle { margin: 0; display: grid; gap: 14px; --cc-workers: var(--accent); --cc-families: #C2410C; --cc-providers: #6A4FC2; }
.hero-circle-art { width: 100%; height: auto; display: block; overflow: visible; }
.cc-gov-ring { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.cc-gov-spoke { stroke: color-mix(in srgb, var(--ink) 16%, transparent); stroke-width: 1.5; stroke-dasharray: 2 5; }
.cc-gov rect { fill: var(--ink); transition: fill .2s; }
.cc-gov text { font: 600 16px var(--font-body); fill: #FFFFFF; text-anchor: middle; }
.cc-gov:hover rect, .cc-gov:focus-visible rect { fill: var(--accent-strong); }
.cc-gov:focus-visible { outline: none; }
.cc-key.cc-gov-key::before { background: var(--ink); border-radius: 3px; }
.cc-ring { fill: none; stroke: var(--line); stroke-width: 2; }
.cc-arc { fill: none; stroke-width: 4; stroke-linecap: round; opacity: .55; }
.cc-arc.cc-workers { stroke: var(--cc-workers); } .cc-arc.cc-families { stroke: var(--cc-families); } .cc-arc.cc-providers { stroke: var(--cc-providers); }
.cc-spoke { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 5; }
.cc-node { --cc: var(--cc-workers); text-decoration: none; }
.cc-node.cc-families { --cc: var(--cc-families); } .cc-node.cc-providers { --cc: var(--cc-providers); }
.cc-node circle { fill: var(--bg); stroke: var(--cc); stroke-width: 2; transition: fill .2s; }
.cc-node g { fill: none; stroke: var(--cc); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.cc-node text { font: 600 18px var(--font-body); fill: var(--ink); }
.cc-node:hover circle, .cc-node:focus-visible circle { fill: var(--cc); }
.cc-node:hover g, .cc-node:focus-visible g { stroke: #FFFFFF; }
.cc-node:focus-visible { outline: none; }
.cc-set-seg { fill: var(--accent-soft); stroke: var(--surface); stroke-width: 3; transition: fill .2s; }
.cc-set-label { font: 700 15px var(--font-body); letter-spacing: .03em; fill: var(--accent-strong); text-anchor: middle; pointer-events: none; transition: fill .2s; }
a.cc-set:hover .cc-set-seg, a.cc-set:focus-visible .cc-set-seg { fill: var(--accent); }
a.cc-set:hover .cc-set-label, a.cc-set:focus-visible .cc-set-label { fill: #FFFFFF; }
a.cc-set:focus-visible { outline: none; }
.cc-core { fill: var(--bg); stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 10px 18px rgba(11, 47, 44, .14)); }
.cc-mark path { stroke: var(--accent); }
.cc-mark .fill { fill: var(--accent); stroke: none; }
.cc-core-label { font: 700 15px var(--font-display); fill: var(--ink); text-anchor: middle; letter-spacing: .02em; }
.hero-circle-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 13.5px; color: var(--text); }
.cc-key { display: inline-flex; align-items: center; gap: 7px; }
.cc-key::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--cc-workers); }
.cc-key.cc-families::before { background: var(--cc-families); } .cc-key.cc-providers::before { background: var(--cc-providers); }
/* Phones and narrow tablets get a chunkier circle: icons only on the ring, the
   places named in coloured chips underneath, and the government services as a
   row of tappable labels, so nothing is smaller than the page text. */
.hero-circle-mobile { display: none; margin: 8px 0 0; }
.hero-circle-mobile .hero-circle-art { max-width: 420px; margin: 0 auto; }
.hero-circle-mobile .cc-set-label { font-size: 15px; }
.hero-circle-mobile .cc-core-label { font-size: 12px; }
.hero-circle-mobile figcaption { display: grid; gap: 14px; margin-top: 14px; }
.cc-places, .cc-gov-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cc-place { --cc: var(--cc-workers); font: 600 14px/1 var(--font-body); color: var(--ink); text-decoration: none; padding: 9px 12px; border-radius: 999px; border: 1.5px solid var(--cc); background: var(--bg); }
.cc-place.cc-families { --cc: var(--cc-families); } .cc-place.cc-providers { --cc: var(--cc-providers); }
.cc-gov-title { width: 100%; text-align: center; font: 600 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cc-gov-chip { font: 600 13.5px/1 var(--font-body); color: #FFFFFF; background: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 999px; }
.hero-circle-mobile { --cc-workers: var(--accent); --cc-families: #C2410C; --cc-providers: #6A4FC2; }
@media (max-width: 1080px) { .hero-top { grid-template-columns: 1fr; } .hero-circle { display: none; } .hero-circle-mobile { display: block; } }
.hero h1 { font-size: clamp(40px, 6.4vw, 76px); font-weight: 800; letter-spacing: -0.035em; }
.hero h1 em { font-style: normal; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.1em; text-underline-offset: 0.12em; text-decoration-skip-ink: none; white-space: nowrap; }
.hero .lede { font-size: 19px; max-width: 62ch; margin-top: 22px; }
.hero .btn-row { margin-top: 32px; }
/* The care setting picker: choose a setting, then step through its journey
   (written by journeys.py home). */
.setting-picker { margin-top: 72px; display: grid; gap: 24px; position: relative; z-index: 1; }
.picker-head .h2 { margin-top: 0; }
.picker-head .lede { margin-top: 10px; }
.picker-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.picker-option { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius-card); background: var(--bg); border: 1.5px solid var(--line); text-decoration: none; color: var(--text); transition: border-color .2s, box-shadow .2s, transform .2s; }
.picker-option:hover { border-color: var(--accent); transform: translateY(-2px); }
.picker-option strong { display: block; font: 700 17px/1.25 var(--font-display); color: var(--ink); }
.picker-option small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.picker-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); }
.picker-option[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.picker-option[aria-selected="true"] .picker-icon { background: var(--accent); color: var(--on-accent); }
.journey-panel { display: grid; gap: 18px; }
.journey-panel[hidden] { display: none; }
.journey-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.journey-step { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-body); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 7px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.journey-step:hover { border-color: var(--accent); color: var(--ink); }
.journey-step .step-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: 12.5px; }
.journey-step[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.journey-step[aria-selected="true"] .step-n { background: var(--bg); color: var(--accent-strong); }
.journey-step:focus-visible, .picker-option:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.journey-stage { margin: 0; display: grid; gap: 14px; }
.journey-stage[hidden] { display: none; }
.journey-stage .frame { padding: 6px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.journey-stage .frame img { border-radius: 10px; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
.journey-stage figcaption { font-size: 16px; color: var(--text); max-width: 78ch; }
.journey-stage figcaption strong { color: var(--ink); margin-right: 4px; }
.journey-stage figcaption a { white-space: nowrap; font-weight: 600; color: var(--accent-strong); }
.journey-all { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.stage-see-also { margin: 20px 0 0; }

.frame {
  border-radius: var(--radius-panel); padding: 14px;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg));
  box-shadow: var(--shadow);
}
.frame img { border-radius: 16px; border: 1px solid var(--line); width: 100%; }
.band .frame { background: var(--band-raise); }

/* ---------- People strip ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pillar { border-top: 3px solid var(--accent); padding-top: 22px; }
.pillar h3 { font-size: 24px; font-weight: 700; }
.pillar p { margin-top: 10px; color: var(--muted); }
.pillar ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; }
.pillar li a { text-decoration: none; display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.pillar li a:hover { color: var(--accent-strong); }
.pillar li a span { color: var(--muted); }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Product splits ---------- */
.splits { display: grid; gap: 112px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.flip .split-copy { order: 2; }
.split-copy { min-width: 0; }
.split-copy h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; }
.split-copy p { margin-top: 16px; font-size: 17px; }
.split-copy ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.split-copy li { padding-left: 26px; position: relative; }
.split-copy li::before { content: ''; position: absolute; left: 0; top: 9px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.split-copy ol { margin: 20px 0 0; padding-left: 1.4em; display: grid; gap: 10px; }
.split-copy ol li { padding-left: 6px; }
.split-copy ol li::before { content: none; }
.split-copy .text-link { margin-top: 22px; }
.split-media { min-width: 0; }
@media (max-width: 860px) {
  .split, .split.flip { grid-template-columns: 1fr; gap: 28px; }
  .split.flip .split-copy { order: 0; }
  .splits { gap: 72px; }
}

/* ---------- Proof band ---------- */
.proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.proof { background: var(--band-raise); border-radius: var(--radius-card); padding: 24px; display: grid; gap: 12px; align-content: start; }
.proof .status { justify-self: start; font: 600 12px/1 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--band-accent) 18%, transparent); color: var(--band-accent); }
.proof .status.pending { background: color-mix(in srgb, #F5C04A 18%, transparent); color: #F5C04A; }
.proof h3 { font-size: 20px; }
.proof p { color: var(--band-muted); font-size: 14.5px; }
.proof .who { font-size: 12.5px; color: var(--band-muted); text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 960px) { .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .proof-grid { grid-template-columns: 1fr; } }

/* ---------- Integrations ---------- */
.gateways { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.gateway { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; color: var(--ink); background: var(--bg); }
.gateway b { font: 700 11px/1 var(--font-body); letter-spacing: 0.06em; color: var(--accent-strong); background: var(--accent-soft); padding: 4px 6px; border-radius: 6px; }

/* ---------- Video tour ---------- */
.tour { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: center; background: var(--surface); border-radius: var(--radius-panel); padding: 40px; }
.tour-media { position: relative; display: block; border-radius: 18px; overflow: hidden; text-decoration: none; }
.tour-media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: left top; filter: saturate(0.85); }
.tour-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--band) 70%, transparent)); }
.play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.play span { width: 76px; height: 76px; border-radius: 50%; background: var(--band-accent); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .2s; }
.tour-media:hover .play span { transform: scale(1.06); }
.tour-media .cap { position: absolute; left: 18px; bottom: 14px; z-index: 1; color: #FFFFFF; font-size: 13px; font-weight: 600; }
@media (max-width: 860px) { .tour { grid-template-columns: 1fr; padding: 24px; gap: 28px; } }

/* ---------- Stories placeholder ---------- */
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.outcome { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px; display: grid; gap: 10px; align-content: start; background: var(--bg); }
.outcome-tag { justify-self: start; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); border-radius: 999px; padding: 4px 10px; }
.outcome h3 { font-size: 19px; font-weight: 600; }
.outcome p { color: var(--muted); font-size: 15px; margin: 0; }
@media (max-width: 960px) { .outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .outcomes { grid-template-columns: 1fr; } }
.stories { border: 2px dashed var(--line); border-radius: var(--radius-panel); padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.stories blockquote { margin: 0; font: 600 22px/1.4 var(--font-display); color: var(--muted); }
.stories blockquote::before { content: '\201C'; display: block; font-size: 56px; line-height: .6; color: var(--accent); margin-bottom: 10px; }
@media (max-width: 860px) { .stories { grid-template-columns: 1fr; padding: 24px; } }

/* ---------- Article cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.card { text-decoration: none; display: grid; gap: 14px; align-content: start; }
.card-img { border-radius: var(--radius-card); overflow: hidden; background: color-mix(in srgb, var(--accent) 14%, var(--bg)); padding: 12px 0 0 12px; aspect-ratio: 16/10; }
.card-img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 10px 0 0 0; transition: transform .35s; }
.card:hover .card-img img { transform: scale(1.03); }
.meta { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.meta .cat { color: var(--accent-strong); font-weight: 600; }
.meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.card h3 { font-size: 20px; font-weight: 600; }
.card:hover h3 { color: var(--accent-strong); }
.card p { color: var(--muted); font-size: 15px; }
.row-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

/* ---------- Closing CTA ---------- */
.close { border-radius: var(--radius-panel); padding: 72px 56px; text-align: center; position: relative; overflow: hidden; }
.close::before { content: ''; position: absolute; inset: -40% auto auto -10%; width: 50%; aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--band-accent) 20%, transparent), transparent 65%); }
.close > * { position: relative; }
.close h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.03em; }
.close .lede { margin-inline: auto; }
.close .btn-row { justify-content: center; margin-top: 30px; }
@media (max-width: 600px) { .close { padding: 48px 22px; } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: 64px 40px; margin-top: 96px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(6, minmax(0, 1fr)); gap: 32px; }
.footer h4 { font: 600 13px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }
.footer ul a { text-decoration: none; color: var(--text); }
.footer ul a:hover { color: var(--accent-strong); }
.footer-button { font: inherit; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.footer-button:hover { color: var(--accent-strong); }
.footer .about p { color: var(--muted); font-size: 14.5px; margin-top: 14px; max-width: 32ch; }
.footer .contact { margin-top: 18px; font-size: 14.5px; color: var(--ink); font-weight: 600; user-select: all; }
.footer-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer .about { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Persona page ---------- */
.persona-hero { padding-block: 72px 0; }
.persona-hero .crumbs { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.persona-hero .crumbs a { text-decoration: none; color: var(--accent-strong); }
/* Two lines at most on a desktop: 26ch takes a headline of about fifty
   characters in two, where 18ch broke most of them into three. */
.persona-hero h1 { font-size: clamp(36px, 4.8vw, 58px); font-weight: 800; letter-spacing: -0.03em; max-width: 26ch; }
.persona-hero .lede { font-size: 19px; }
.persona-hero .btn-row { margin-top: 28px; }
.persona-hero .frame { margin-top: 56px; }
.next-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.next-people a { text-decoration: none; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); display: grid; gap: 6px; }
.next-people a:hover { border-color: var(--accent); }
.next-people strong { font-family: var(--font-display); color: var(--ink); font-size: 17px; }
.next-people span { color: var(--muted); font-size: 14px; }
.next-people.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .next-people { grid-template-columns: 1fr; } }

/* ---------- Articles index ---------- */
.articles-hero { padding-block: 72px 48px; }
.articles-hero h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 800; letter-spacing: -0.035em; }
.featured { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; text-decoration: none; background: var(--surface); border-radius: var(--radius-panel); padding: 24px; }
.featured .card-img { aspect-ratio: 16/10; }
.featured h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; margin-top: 12px; }
.featured p { color: var(--muted); margin-top: 14px; font-size: 17px; }
.featured .text-link { margin-top: 20px; }
.featured:hover h2 { color: var(--accent-strong); }
@media (max-width: 860px) { .featured { grid-template-columns: 1fr; gap: 20px; } }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-block: 56px 32px; }
.chip { font: 500 14px/1 var(--font-body); padding: 10px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.subscribe { margin-top: 80px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; border-radius: var(--radius-panel); padding: 40px; }
.subscribe form { display: flex; gap: 10px; flex-wrap: wrap; }
.subscribe input { flex: 1 1 220px; min-width: 0; padding: 13px 18px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--band-text) 30%, transparent); background: var(--band-raise); color: var(--band-text); font: 15px var(--font-body); }
.subscribe input::placeholder { color: var(--band-muted); }
.subscribe .ok { color: var(--band-accent); font-size: 14px; margin-top: 10px; }
@media (max-width: 760px) { .subscribe { grid-template-columns: 1fr; padding: 28px 22px; } }

/* ---------- Article page ---------- */
.article { padding-block: 64px 0; }
.article-head { max-width: 780px; margin-inline: auto; }
.article-head .crumbs { font-size: 14px; margin-bottom: 18px; }
.article-head .crumbs a { color: var(--accent-strong); text-decoration: none; }
.article-head h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -0.03em; margin-top: 14px; }
.article-head .standfirst { font-size: 20px; color: var(--muted); margin-top: 18px; line-height: 1.5; }
.byline { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; }
.byline .av { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); }
.byline strong { color: var(--ink); display: block; }
.byline span { color: var(--muted); }
.article-figure { max-width: 1000px; margin: 48px auto 0; }
.article-figure figcaption { font-size: 13.5px; color: var(--muted); margin-top: 12px; text-align: center; }
.article-layout { max-width: 1000px; margin: 56px auto 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; }
.toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); align-self: start; font-size: 14px; }
.toc h4 { font: 600 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 12px; }
.toc a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--line); text-decoration: none; color: var(--text); }
.toc a:hover { border-color: var(--accent); color: var(--accent-strong); }
.prose { max-width: 66ch; font-size: 18px; line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 28px; font-weight: 700; margin-top: 1.8em; scroll-margin-top: 96px; }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose li + li { margin-top: .5em; }
.prose strong { color: var(--ink); }
.inshort { background: var(--accent-soft); border-radius: var(--radius-card); padding: 22px 26px; font-size: 16.5px; line-height: 1.6; }
.inshort h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-strong); margin-bottom: 10px; font-family: var(--font-body); font-weight: 700; }
.inshort ul { margin: 0; padding-left: 1.2em; }
.pull { border-left: 3px solid var(--accent); padding-left: 22px; font: 600 22px/1.45 var(--font-display); color: var(--ink); }
.prose code { font: 500 0.86em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink); overflow-wrap: anywhere; }
.article-layout > * { min-width: 0; }
.prose pre { background: var(--band); color: var(--band-text); border-radius: 14px; padding: 18px 20px; overflow-x: auto; font: 13.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.prose pre code { background: none; border: 0; padding: 0; color: inherit; font: inherit; overflow-wrap: normal; }
.prose h3 { font-size: 20px; font-weight: 700; margin-top: 1.6em; }
.prose .spec-table { font-size: 15px; line-height: 1.5; }
.prose .spec-table code { font-size: 0.9em; }
/* Step-by-step setup pages (developers/setup-*.html) */
.prose ol.steps { list-style: none; padding: 0; counter-reset: step; }
.prose ol.steps > li { counter-increment: step; position: relative; padding-left: 52px; margin-top: 2.2em; }
.prose ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 16px/34px var(--font-display); text-align: center; }
.prose ol.steps > li > h3 { margin-top: 2px; }
.prose ol.steps > li > * + * { margin-top: 0.8em; }
.who { display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill); font: 600 12px/1.2 var(--font-body); letter-spacing: 0.02em; background: var(--accent-soft); color: var(--accent-strong); }
.who.you { background: var(--note-bg); color: var(--note-text); border: 1px solid var(--note-line); }
.shot { margin: 16px 0 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); background: var(--surface); }
.shot figcaption { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 10px; }
@media (max-width: 600px) { .prose ol.steps > li { padding-left: 44px; } }
@media (max-width: 860px) { .article-layout { grid-template-columns: 1fr; gap: 24px; } .toc { position: static; } }

/* ---------- Unwritten field notes ---------- */
.card.is-soon { opacity: 0.72; }
.card.is-soon .card-img img { filter: grayscale(0.4); }

/* ---------- Role pages ---------- */
.persona-who { font: 600 14px/1.3 var(--font-body); color: var(--accent-strong); margin-bottom: 10px; }
.settings-band { background: var(--surface); margin-top: 96px; }
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
/* Five short items: one row on a wide screen, so none sits alone on a second. */
.settings.five { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
.setting { border-top: 3px solid var(--accent); padding-top: 16px; min-width: 0; }
.setting-label { font: 700 17px/1.3 var(--font-display); color: var(--ink); margin-bottom: 8px; }
.setting p { color: var(--text); font-size: 15.5px; }

/* ---------- The standalone products, side by side on the home page ---------- */
.solo-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.solo-product { display: grid; align-content: start; gap: 10px; min-width: 0; }
.solo-product .frame { margin-bottom: 14px; }
/* One shape for all three, so the columns start level whatever each screenshot's size. */
.solo-product .frame img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.solo-product .eyebrow { margin: 0; }
.solo-product h3 { font-size: 24px; }
.solo-product p { margin: 0; font-size: 15.5px; }
.solo-price { font-weight: 600; color: var(--ink); }
.solo-links { display: grid; gap: 6px; margin-top: 6px; font-size: 15px; }
.solo-links a:not(.text-link) { color: var(--muted); }
@media (max-width: 960px) { .solo-products { grid-template-columns: 1fr; gap: 48px; max-width: 640px; } }

/* ---------- Care-setting journeys ---------- */
/* The map: the stages of one setting's journey, in order. On a hub every
   stage links to its page; on a stage page the stage you are on is marked,
   and the one a standalone product covers carries its start-here note. */
.journey ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; counter-reset: stage; }
.journey li { position: relative; min-width: 0; }
.journey a { display: grid; gap: 6px; align-content: start; height: 100%; padding: 18px 18px 20px 0; text-decoration: none; border-top: 3px solid var(--line); }
.journey a:hover { border-top-color: var(--accent); }
.journey a:hover strong { color: var(--accent-strong); }
.journey li::before { counter-increment: stage; content: counter(stage); position: absolute; top: -13px; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); color: var(--muted); font: 700 12px/18px var(--font-body); text-align: center; }
.journey strong { font: 700 16px/1.3 var(--font-display); color: var(--ink); padding-top: 6px; }
.journey small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.journey .is-current a { border-top-color: var(--accent); }
.journey .is-current::before { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.journey .is-current strong { color: var(--accent-strong); }
.journey-entry { justify-self: start; margin-top: 6px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font: 600 12.5px/1.4 var(--font-body); }
.journey-band { background: var(--surface); margin-top: 72px; padding-block: 40px 28px; }
@media (max-width: 760px) {
  .journey ol { grid-template-columns: 1fr; }
  .journey a { border-top: 0; border-left: 3px solid var(--line); padding: 4px 0 18px 22px; }
  .journey .is-current a, .journey a:hover { border-left-color: var(--accent); }
  .journey li::before { top: 2px; left: -9px; }
  .journey-band { margin-top: 48px; }
}

/* The journey bar: under the site header on every stage page and hub, so the
   whole journey is always one click away and you can see where you are. */
.journey-bar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 69px); z-index: 45;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); }
.jb-inner { display: flex; align-items: center; gap: 24px; min-height: 58px; }
.jb-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.jb-steps::-webkit-scrollbar { display: none; }
/* Each step after the first brings the line that joins it to the one before,
   stretching to fill the space between them and filled in up to where you are. */
.jb-steps li { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.jb-steps li:first-child { flex: 0 1 auto; }
.jb-steps li + li::before { content: ''; flex: 1 1 12px; min-width: 8px; height: 2px; margin: 0 10px; border-radius: 2px; background: var(--line); }
.jb-steps li.is-done + li::before { background: var(--accent); }
.jb-steps a { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; padding: 6px 0; text-decoration: none; white-space: nowrap; color: var(--muted); font: 600 14px/1.2 var(--font-body); }
.jb-steps .is-current a { flex: none; }
.jb-steps a:hover { color: var(--ink); }
.jb-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--bg); color: var(--muted); font: 700 12px/1 var(--font-body); }
.jb-steps .is-done a { color: var(--text); }
.jb-steps .is-done .jb-n { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.jb-steps .is-current a { color: var(--ink); }
.jb-steps .is-current .jb-n { border-color: var(--accent); background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.jb-entry { padding: 2px 7px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font: 600 11px/1.4 var(--font-body); }
.jb-go { flex: none; text-decoration: none; font: 600 14px/1.2 var(--font-body); color: var(--on-accent); background: var(--accent); padding: 9px 16px; border-radius: var(--radius-pill); white-space: nowrap; }
.jb-go:hover { background: var(--accent-strong); }
/* On arrival the bar flashes twice and the step you are on pulses, so the eye
   finds the route before the page. Once per page, never looping, and off for
   anyone who has asked for less motion. On a hub, where nothing is current
   yet, the first step pulses: that is where the journey starts. */
@keyframes jb-flash {
  0%, 40%, 100% { background-color: color-mix(in srgb, var(--surface) 94%, transparent); }
  18%, 62% { background-color: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
}
@keyframes jb-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  .journey-bar { animation: jb-flash 2s ease-in-out 0.25s 1; }
  .jb-steps .is-current .jb-n,
  .jb-steps:not(:has(.is-current)) li:first-child .jb-n { animation: jb-pulse 1s ease-out 0.25s 3; }
}
/* The hero sits lower, so the bar never covers the crumbs on arrival. */
.journey-bar + .persona-hero { padding-top: 48px; }
/* Names other than the current one give way first when space is short. */
.jb-steps li:not(.is-current) .jb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jb-short { display: none; }
/* Narrower than every name needs: the step you are on keeps its name. */
@media (max-width: 1199px) {
  .jb-entry { display: none; }
  .jb-steps li:not(.is-current) .jb-name { display: none; }
}
@media (max-width: 760px) {
  .jb-inner { gap: 12px; min-height: 52px; padding-right: 0; }
  .jb-steps a { font-size: 13px; }
  .jb-steps li + li::before { margin: 0 4px; min-width: 4px; }
  .jb-n { width: 22px; height: 22px; font-size: 11px; }
  .jb-steps a { gap: 6px; }
  /* On a phone the bar is the route alone: numbered steps, yours lit, and the
     way on. The step's name is the heading just below. */
  .jb-name, .jb-entry { display: none; }
  .jb-long { display: none; }
  .jb-short { display: inline; }
}
@media (max-width: 340px) {
  .jb-n { width: 20px; height: 20px; }
  .jb-steps li + li::before { margin: 0 2px; min-width: 3px; }
  .jb-go { margin-right: 16px; padding: 8px 12px; font-size: 13px; }
}

/* A stage: who takes part, what happens, and what it hands on. */
.stage-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 32px; }
.stage-person { border-left: 3px solid var(--accent); padding-left: 16px; }
.stage-person strong { display: block; font: 700 16px/1.3 var(--font-display); color: var(--ink); margin-bottom: 4px; }
.stage-person p { font-size: 15.5px; margin: 0; }
.stage-moments { list-style: none; margin: 0; padding: 0; counter-reset: moment; display: grid; gap: 22px; max-width: 760px; }
.stage-moments li { position: relative; padding-left: 52px; counter-increment: moment; }
.stage-moments li::before { content: counter(moment); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font: 700 15px/34px var(--font-display); text-align: center; }
.stage-moments strong { display: block; font: 700 17px/1.35 var(--font-display); color: var(--ink); margin-bottom: 4px; }
.stage-moments p { margin: 0; }
.stage-handoff { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--radius-card); }
.stage-handoff h3 { font-size: 22px; margin-bottom: 8px; }
.stage-handoff p { margin: 0; }
.stage-start { padding: 32px; border-radius: var(--radius-card); background: var(--accent-soft); display: grid; gap: 12px; }
.stage-start h3 { font-size: 24px; }
.stage-start p { margin: 0; max-width: 64ch; }
.stage-start .btn-row { margin-top: 8px; }
.stage-pager { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stage-pager a { text-decoration: none; display: grid; gap: 2px; }
.stage-pager small { color: var(--muted); font-size: 13px; }
.stage-pager strong { font-family: var(--font-display); color: var(--ink); }
.stage-pager a:hover strong { color: var(--accent-strong); }
.stage-pager .next { text-align: right; margin-left: auto; }
@media (max-width: 760px) { .stage-handoff { grid-template-columns: 1fr; padding: 22px; } .stage-start { padding: 22px; } }
.split.solo { grid-template-columns: minmax(0, 1fr); background: var(--surface); border-radius: var(--radius-panel); padding: 36px 40px; }
/* The reading measure is for the text; the heading takes the card's width. */
.split.solo .split-copy > :not(h3) { max-width: 72ch; }
@media (max-width: 600px) { .split.solo { padding: 24px 20px; } }
/* Each green card leads with an icon (card-icons.py picks it from the heading). */
.card-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; background: var(--bg); color: var(--accent-strong); box-shadow: 0 1px 2px rgba(15, 40, 36, 0.06); }
.flag {
  display: inline-block; margin-bottom: 12px; padding: 5px 10px; border-radius: var(--radius-pill);
  font: 600 12px/1 var(--font-body); letter-spacing: 0.03em;
  background: var(--note-bg); color: var(--note-text); border: 1px solid var(--note-line);
}
.split-copy .eyebrow + .flag { margin-left: 8px; }

/* ---------- Walkthrough cards ---------- */
.decks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.deck { text-decoration: none; display: grid; gap: 6px; align-content: start; }
.deck-thumb { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 480 / 190; margin-bottom: 8px; background: #EEF3F2; }
.deck-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .35s; }
.deck:hover .deck-thumb img { transform: scale(1.04); }
.deck-play { position: absolute; left: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--band-accent); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.deck-play::after { content: ''; position: absolute; left: 13px; top: 10px; border-left: 11px solid var(--on-band-accent); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.deck-dur { position: absolute; right: 10px; bottom: 10px; background: rgba(6, 30, 28, 0.82); color: #FFFFFF; font-size: 12px; padding: 3px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.deck strong { font-family: var(--font-display); color: var(--ink); font-size: 16px; }
.deck:hover strong { color: var(--accent-strong); }
.deck > span:last-child { color: var(--muted); font-size: 14px; }
@media (max-width: 960px) { .decks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .decks { grid-template-columns: 1fr; } }

/* ---------- YouTube (click to play, privacy-enhanced embed) ---------- */
.yt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.yt-grid.one { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.yt-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .yt-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .yt-grid, .yt-grid.three { grid-template-columns: 1fr; } }
.yt-item { margin: 0; display: grid; gap: 10px; min-width: 0; }
.yt-item figcaption { font: 600 16px/1.35 var(--font-display); color: var(--ink); }
.yt { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background: var(--band); box-shadow: var(--shadow); }
.yt img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .35s; }
.yt:hover img { transform: scale(1.03); }
.yt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6, 30, 28, 0.55)); pointer-events: none; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--band-accent); box-shadow: 0 10px 30px rgba(0,0,0,.3); z-index: 1; transition: transform .2s; }
.yt:hover .yt-play { transform: scale(1.06); }
.yt-play::after { content: ''; position: absolute; left: 28px; top: 22px; border-left: 22px solid var(--on-band-accent); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.yt .deck-dur { z-index: 1; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-desc { display: block; margin-top: 4px; font: 400 14.5px/1.45 var(--font-body); color: var(--muted); }
.tour .yt-grid.one { max-width: none; }

/* ---------- Spec tables (module pages) ---------- */
.spec-table { overflow-x: auto; margin-top: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.spec-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table th { text-align: left; font: 600 13px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.spec-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text); }
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table td:first-child { color: var(--ink); font-weight: 600; }
.split.solo .spec-table { max-width: none; }
.decks.decks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
.decks.decks-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) { .decks.decks-2, .decks.decks-3 { grid-template-columns: 1fr; } }
.mega-os .mega-item { padding-block: 7px; }
/* The four main care settings carry an icon. */
.mega-item.has-icon { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.mega-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface); color: var(--accent-strong); }
.mega-item.has-icon:hover .mega-icon { background: var(--bg); }
.drawer-icon { display: inline-grid; vertical-align: -3px; margin-right: 10px; color: var(--accent-strong); }
/* "Others" under the four main care settings: closed until someone opens it. */
.mega-others { margin: 6px 12px 0; }
.mega-others summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font: 600 14px/1.2 var(--font-body); color: var(--accent-strong); }
.mega-others summary::-webkit-details-marker { display: none; }
.mega-others summary::after { content: '+'; font-weight: 500; }
.mega-others[open] summary::after { content: '–'; }
.mega-others > div { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 6px 0 2px; }
.mega-others a { padding: 4px 0; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink); text-decoration: none; }
.mega-others a:hover { color: var(--accent-strong); }
.mega-others a { display: inline-flex; align-items: center; gap: 8px; }
.others-icon { display: inline-grid; color: var(--accent-strong); }
.mega-feature .mega-icon { background: var(--bg); }
/* Drawer icons sit in their own column, so a long name wraps beside its icon. */
.drawer details a:has(.drawer-icon) { position: relative; padding-left: 42px; }
.drawer details a .drawer-icon { position: absolute; left: 12px; top: 10px; margin: 0; }
.drawer .drawer-others a:has(.drawer-icon) { padding-left: 54px; }
.drawer .drawer-others a .drawer-icon { left: 24px; }
.drawer details.drawer-others { border-bottom: 0; }
.drawer .drawer-others summary { padding: 8px 0 8px 12px; font: 400 16px/1.2 var(--font-body); color: var(--muted); justify-content: flex-start; gap: 8px; }
.drawer .drawer-others a { padding-left: 24px; }
.drawer details.drawer-others:not([open]) summary::after { content: '+'; }
.mega-foot { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.mega-foot-split { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.mega-watch { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; }
.mega-watch .mega-label { margin: 0; }
.mega-watch a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.mega-watch a:hover { color: var(--accent-strong); }
.mega-watch .mega-icon { width: 26px; height: 26px; }
.mega { max-height: calc(100vh - 80px); overflow-y: auto; }

/* ---------- Pricing plans ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; align-items: start; }
.plan { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--bg); padding: 30px 26px; display: grid; gap: 16px; align-content: start; }
.plan.plan-lead { border-color: var(--accent); box-shadow: var(--shadow); }
.plan-name { font: 700 21px/1.2 var(--font-display); color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan-price { font: 800 clamp(32px, 4vw, 42px)/1 var(--font-display); color: var(--ink); letter-spacing: -0.03em; }
.plan-price small { display: block; margin-top: 10px; font: 500 14px/1.4 var(--font-body); color: var(--muted); letter-spacing: 0; }
.plan p { color: var(--muted); font-size: 15px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; color: var(--text); }
.plan li { position: relative; padding-left: 22px; }
.plan li::before { content: ''; position: absolute; left: 1px; top: 6px; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.plan .btn { margin-top: 4px; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

/* ---------- Phone screenshots (worker app, family portal) ---------- */
.frame.phone { max-width: 320px; margin-inline: auto; padding: 10px; border-radius: 36px; }
.frame.phone img { border-radius: 28px; }

/* ---------- Phones ---------- */
.drawer { background: var(--bg); }
@media (max-width: 760px) {
  .section { padding-block: 64px; }
  .hero { padding-block: 56px 48px; }
  .setting-picker { margin-top: 48px; }
  .persona-hero .frame { margin-top: 36px; }
  .settings-band { margin-top: 64px; }
  .close { margin-top: 0; }
}

/* ---------- Homepage: six modules ---------- */
.mod-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.mod-label { font: 600 13px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-strong); margin-bottom: 14px; }
.mod-tiles { display: grid; gap: 14px; }
.mod-tiles.add { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mod-tile { display: grid; gap: 8px; align-content: start; text-decoration: none; padding: 22px; border-radius: var(--radius-card); background: var(--accent-soft); border: 1px solid transparent; transition: border-color .2s, transform .2s; }
.mod-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.mod-tile strong { font: 700 20px/1.2 var(--font-display); color: var(--ink); }
.mod-tile p { color: var(--text); font-size: 15px; }
.mod-tile span { font-weight: 600; font-size: 14px; color: var(--accent-strong); }
.mod-tiles.keep .mod-tile { background: var(--bg); border: 1.5px dashed var(--line); }
.mod-tiles.keep .mod-tile:hover { border-color: var(--accent); border-style: solid; }
.mod-note { margin-top: 14px; font-size: 14.5px; color: var(--muted); }
@media (max-width: 860px) { .mod-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .mod-tiles.add { grid-template-columns: 1fr; } }


/* ---------- The worker app on a phone, in front of a screen ---------- */
.hero-phone { position: absolute; left: -64px; top: 205px; width: min(18%, 210px); padding: 7px; border-radius: 30px; background: #0b1f1c; box-shadow: 0 30px 60px -20px rgba(4, 30, 26, .55), 0 0 0 1px rgba(255, 255, 255, .08); z-index: 2; }
.hero-phone img { display: block; width: 100%; height: auto; border-radius: 24px; }
@media (max-width: 1320px) { .hero-phone { left: -12px; width: min(19%, 190px); } }

/* ---------- Hero footnote ---------- */
.hero-star { color: inherit; text-decoration: none; }
.hero-star:hover { text-decoration: underline; }
.hero-footnote { margin-top: 18px; font-size: 15px; color: var(--muted); }
.hero-footnote span { color: var(--accent-strong); font-weight: 700; margin-right: 2px; }

/* ---------- Persona hero: a screen with the worker app in front ---------- */
.persona-stack { position: relative; }
.persona-stack .hero-phone { left: auto; right: -20px; top: 48px; width: min(20%, 220px); }

/* ---------- Walkthrough pop-up ---------- */
dialog.walkthrough { width: min(1120px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 16px; background: #0b1f1c; color: #fff; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6); overflow: hidden; }
dialog.walkthrough::backdrop { background: rgba(4, 20, 18, .72); backdrop-filter: blur(3px); }
.walkthrough-bar { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 20px; }
.walkthrough-title { flex: 1; min-width: 0; font: 600 16px/1.3 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.walkthrough-open { font-size: 14px; color: rgba(255, 255, 255, .72); text-decoration: none; white-space: nowrap; }
.walkthrough-open:hover { color: #fff; text-decoration: underline; }
.walkthrough-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.walkthrough-close:hover, .walkthrough-close:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }
.walkthrough-frame { aspect-ratio: 16 / 9; max-height: calc(100vh - 120px); background: #000; }
.walkthrough-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
body.has-walkthrough { overflow: hidden; }
@media (max-width: 600px) {
  dialog.walkthrough { width: 100vw; max-height: 100vh; border-radius: 0; }
  .walkthrough-open { display: none; }
  .walkthrough-frame { aspect-ratio: auto; height: calc(100vh - 62px); max-height: none; }
}

/* ---------- Screenshot lightbox ---------- */
.frame img, .hero-phone img { cursor: zoom-in; }
.frame a img, a .frame img { cursor: pointer; }
dialog.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(4, 20, 18, .92); color: #fff; }
dialog.lightbox::backdrop { background: transparent; }
.lightbox-stage { position: absolute; inset: 56px 16px 64px; display: grid; place-items: center; overflow: auto; overscroll-behavior: contain; touch-action: pinch-zoom pan-x pan-y; }
.lightbox-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); cursor: zoom-in; }
dialog.lightbox.is-tall .lightbox-stage img { max-width: min(100%, 420px); }
dialog.lightbox.is-zoomed .lightbox-stage { display: block; cursor: grab; }
dialog.lightbox.is-zoomed .lightbox-stage img { max-width: none; max-height: none; width: auto; cursor: zoom-out; }
dialog.lightbox.is-zoomed.is-tall .lightbox-stage img { max-width: none; }
.lightbox-close { position: absolute; top: 12px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; }
.lightbox-close:hover, .lightbox-close:focus-visible { background: rgba(255, 255, 255, .16); outline: none; }
.lightbox-cap { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 900px; text-align: center; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
body.has-lightbox { overflow: hidden; }

/* Phone width: the care settings sit two by two, and a journey's steps
   scroll sideways in one row. The persona heroes drop their
   screen and keep the phone, because those pages are about the phone.
   Kept last so it wins. */
@media (max-width: 860px) {
  .hero-phone { display: none; }
  .picker-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 6px; -webkit-overflow-scrolling: touch; }
  .journey-steps::-webkit-scrollbar { display: none; }
  .journey-step { white-space: nowrap; }
  .persona-stack .frame { display: none; }
  .persona-stack .hero-phone { display: block; position: static; width: min(72%, 290px); margin: 0 auto; }
}

/* ---------- Architecture diagrams (docs/) ---------- */
/* Inline SVG drawn on a 1000-wide grid; colours come from the site tokens. */
.diagram { --dg-bad: #B4412F; --dg-bad-soft: #FBEAE6; margin: 0; display: grid; gap: 16px; }
.diagram-frame { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px; overflow-x: auto; }
.settings-band .diagram-frame { background: var(--bg); }
.diagram-frame svg { display: block; width: 100%; min-width: 820px; height: auto; }
.diagram figcaption { color: var(--muted); font-size: 15px; max-width: 78ch; }
@media (max-width: 600px) { .diagram-frame { padding: 14px; } }
.dg-box { fill: var(--bg); stroke: var(--muted); stroke-width: 1.2; }
.dg-box.hi { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.dg-box.person { fill: var(--surface); stroke: var(--line); }
.dg-box.bad { fill: var(--dg-bad-soft); stroke: var(--dg-bad); stroke-dasharray: 4 3; }
.dg-zone { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.dg-t { fill: var(--ink); font: 600 13px var(--font-display); }
.dg-s { fill: var(--muted); font: 400 11px var(--font-body); }
.dg-rl { fill: var(--muted); font: 600 10px var(--font-body); letter-spacing: .1em; }
.dg-zl { fill: var(--accent-strong); font: 600 10.5px var(--font-body); letter-spacing: .1em; }
.dg-al { fill: var(--muted); font: 400 10.5px var(--font-body); }
.dg-al.bad { fill: var(--dg-bad); }
.dg-edge { fill: none; stroke: var(--muted); stroke-width: 1.3; }
.dg-edge.hi { stroke: var(--accent); stroke-width: 1.8; }
.dg-edge.bad { stroke: var(--dg-bad); stroke-dasharray: 4 3; }
.dg-head { fill: var(--muted); }
.dg-head.hi { fill: var(--accent); }
.dg-head.bad { fill: var(--dg-bad); }
.dg-bracket { fill: none; stroke: var(--accent); stroke-width: 1.2; }

/* ---------- Lead form (developer guide download) ---------- */
.lead-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; margin-top: 22px; }
.lead-form .field { display: grid; gap: 6px; min-width: 0; }
.lead-form label { font: 600 14px/1.3 var(--font-body); color: var(--ink); }
.lead-form label span { font-weight: 400; color: var(--muted); }
.lead-form input[type="email"], .lead-form input[type="text"] { width: 100%; font: 400 16px/1.4 var(--font-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.lead-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.lead-form input[aria-invalid="true"] { border-color: #C2410C; }
.lead-form .check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--text); }
.lead-form .check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); }
.lead-form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-form .form-actions { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.lead-form .form-status { margin: 0; font-size: 15px; color: var(--muted); }
.lead-form .form-status.error { color: #C2410C; }
.lead-form .form-note { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--muted); max-width: 80ch; }
.lead-done { margin-top: 20px; font-size: 17px; color: var(--ink); }
@media (max-width: 760px) { .lead-form { grid-template-columns: 1fr; } }

/* A film whose YouTube id is not set yet (data-yt="YTID-...", see
   set-video-ids.py) stays hidden, and so does a section with nothing else to
   show, so the pages can ship before the uploads do. */
.yt-item:has(> a.yt[data-yt^="YTID-"]) { display: none; }
[data-video-section]:not(:has(a.yt:not([data-yt^="YTID-"]))) { display: none; }

/* ---------- Legal, trust and help pages ---------- */
.legal-draft {
  margin-top: 32px; background: var(--note-bg); color: var(--note-text); border: 1px dashed var(--note-line);
  border-radius: 12px; padding: 12px 16px; font-size: 15px; line-height: 1.5;
}
.legal-draft strong { font-weight: 700; }
.legal-version { margin-top: 18px; font-size: 14px; color: var(--muted); font-weight: 600; }
.prose ol[type="a"] { list-style: lower-alpha; }
.help-stuck { margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--line); }

/* ---------- Cookie consent (script.js) ---------- */
.cookie-banner {
  position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 560px; margin-inline: auto; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow);
  padding: 18px 20px; font-size: 15px; line-height: 1.5;
}
.cookie-banner h2 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.cookie-banner a { color: var(--accent-strong); font-weight: 600; }
.cookie-banner .btn-row { margin-top: 14px; }
@media (max-width: 600px) { .cookie-banner .btn { flex: 1 1 auto; justify-content: center; } }

@media (max-width: 520px) { .picker-options { grid-template-columns: 1fr; } }

/* ---------- Benefits: by who they are for (benefits/index.html and its menu) ---------- */
.bf-workers { --bf: var(--accent); }
.bf-families { --bf: #C2410C; }
.bf-providers { --bf: #6A4FC2; }
.bf-it { --bf: var(--ink); }
.pillar-jumps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 32px 0 64px; }
.pillar-jump { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--radius-card); background: var(--bg); border: 1.5px solid var(--line); border-top: 4px solid var(--bf); text-decoration: none; color: var(--text); transition: transform .2s, border-color .2s; }
.pillar-jump:hover { transform: translateY(-2px); border-color: var(--bf); }
.pillar-jump strong { display: block; font: 700 17px/1.25 var(--font-display); color: var(--ink); }
.pillar-jump small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.pillar-jump-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--bf); background: color-mix(in srgb, var(--bf) 12%, var(--bg)); }
.benefit-section { scroll-margin-top: 80px; }
.benefit-section + .benefit-section { border-top: 1px solid var(--line); }
.benefit-section .head { max-width: 860px; }
.benefit-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--bf); }
.pillar-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bf); }
.benefit-sub { font: 700 13px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 28px 0 14px; }
.benefit-sub:first-of-type { margin-top: 8px; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.benefit-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.benefit-card { display: grid; gap: 8px; align-content: start; padding: 20px 22px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--bf); text-decoration: none; color: var(--text); scroll-margin-top: 96px; transition: border-color .2s, transform .2s; }
.benefit-card:hover { transform: translateY(-2px); border-color: var(--bf); }
.benefit-card:target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf) 35%, transparent); }
.benefit-card strong { font: 700 18px/1.3 var(--font-display); color: var(--ink); }
.benefit-card span { font-size: 15.5px; line-height: 1.55; }
.benefit-card em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--accent-strong); margin-top: 4px; }
.mega-benefits .mega-label a { color: inherit; text-decoration: none; }
.mega-benefits .mega-label a:hover { color: var(--accent-strong); }
.mega-benefits .mega-icon.bf-workers, .mega-benefits .mega-icon.bf-families, .mega-benefits .mega-icon.bf-providers, .mega-benefits .mega-icon.bf-it { color: var(--bf); }
@media (max-width: 960px) { .pillar-jumps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pillar-jumps, .benefit-grid { grid-template-columns: 1fr; } }
/* The menu lists the benefits by name only; the page carries the detail. */
.mega-benefits .mega-item small { display: none; }
.mega-benefits .mega-item { align-items: center; }
/* Benefits: what each one gives you, and the worked example on your own numbers. */
.benefit-tag { justify-self: start; font: 700 11.5px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); }
.benefit-tag.tag-time { background: #E6F0FF; color: #1D4ED8; }
.benefit-tag.tag-money { background: #E7F6EC; color: #15803D; }
.benefit-tag.tag-trust { background: #FFF1E6; color: #C2410C; }
.benefit-tag.tag-risk { background: #EEF0F2; color: var(--ink); }
.worth-band { background: var(--surface); }
.worth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.worth-copy p { margin-top: 12px; max-width: 56ch; }
.worth-note { font-size: 14.5px; color: var(--muted); }
.worth-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 24px; border-radius: var(--radius-panel); background: var(--bg); border: 1px solid var(--line); }
.worth-form label { display: grid; gap: 6px; align-content: end; font: 600 13.5px/1.3 var(--font-body); color: var(--text); }
.worth-form input { padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font: 500 16px var(--font-body); color: var(--ink); }
.worth-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.worth-result { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.worth-result div { display: grid; gap: 4px; }
.worth-result strong { font: 800 28px/1.1 var(--font-display); color: var(--ink); }
.worth-result span { font-size: 13.5px; color: var(--muted); }
.mega-benefits .mega-foot { display: flex; flex-wrap: wrap; gap: 8px 28px; }
@media (max-width: 900px) { .worth { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .worth-form, .worth-result { grid-template-columns: 1fr; } }
/* Benefits menu: the worked example, live, in the drop-down */
.mega-worth { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 20px; align-items: center; margin-top: 16px; padding: 18px 22px; border-radius: var(--radius-panel); background: linear-gradient(135deg, #F3EFFF 0%, #EAF6F3 100%); border: 1px solid #DCD3F7; }
.mw-copy { display: grid; gap: 3px; }
.mw-kicker { font: 700 11.5px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #6A4FC2; }
.mw-copy strong { font: 800 18px/1.2 var(--font-display); color: var(--ink); }
.mw-copy small { font-size: 12.5px; color: var(--muted); }
.mw-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mw-inputs label { display: grid; gap: 4px; align-content: end; font: 600 12px/1.25 var(--font-body); color: var(--text); }
.mw-inputs input { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #D6CCF2; border-radius: 10px; background: var(--bg); font: 600 15px var(--font-body); color: var(--ink); }
.mw-inputs input:focus { outline: none; border-color: #6A4FC2; box-shadow: 0 0 0 3px rgba(106, 79, 194, .18); }
.mw-result { display: grid; gap: 2px; }
.mw-result strong { font: 800 26px/1.05 var(--font-display); color: #4B3596; }
.mw-result span { font-size: 12.5px; color: var(--muted); }
.mw-result b { font-weight: 700; color: var(--text); }
.mw-go { white-space: nowrap; }
.drawer-worth small.drawer-sample { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
@media (max-width: 1180px) { .mega-worth { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .mw-result { justify-self: start; } }
/* Benefits by care setting */
.setting-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 28px; }
.setting-filter-label { font: 600 14px var(--font-body); color: var(--muted); margin-right: 4px; }
.setting-chip { padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); font: 600 14.5px var(--font-body); color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; }
.setting-chip:hover { border-color: var(--accent); }
.setting-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.setting-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.setting-filter-note { margin-top: 14px; font-size: 15px; color: var(--text); }
.setting-filter-note a { font-weight: 600; color: var(--accent-strong); }
.setting-filter + .setting-filter-note[hidden] + .pillar-jumps, .setting-filter-note + .pillar-jumps { margin-top: 24px; }
.benefit-card small.benefit-where { font: 600 12.5px/1.3 var(--font-body); color: var(--muted); }
.benefit-card[hidden], .benefit-grid[hidden], .benefit-sub[hidden], .benefit-section[hidden] { display: none; }
.mega-settings { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.mega-settings .mega-all { margin-right: 12px; }
.mega-settings-label { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.mega-settings > a:not(.mega-all) { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.mega-settings > a:not(.mega-all):hover { color: var(--accent-strong); }
/* Support at Home: the GPMS referral beside the ACWS record */
.src-compare-band { background: var(--surface); }
.src-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.src-card { --src: var(--accent); padding: 24px 26px; border-radius: var(--radius-panel); background: var(--bg); border: 1px solid var(--line); border-top: 4px solid var(--src); }
.src-gpms { --src: #C2410C; }
.src-acws { --src: #6A4FC2; }
.src-head { display: grid; gap: 4px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.src-badge { justify-self: start; font: 800 12px/1 var(--font-body); letter-spacing: .08em; padding: 6px 10px; border-radius: 999px; color: var(--src); background: color-mix(in srgb, var(--src) 12%, var(--bg)); }
.src-head strong { font: 800 22px/1.2 var(--font-display); color: var(--ink); }
.src-head small { font-size: 13.5px; color: var(--muted); }
.src-card dl { margin: 0; }
.src-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.src-row:last-child { border-bottom: 0; padding-bottom: 0; }
.src-row dt { font: 700 13px/1.5 var(--font-body); color: var(--src); }
.src-row dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.src-together { margin-top: 22px; max-width: 80ch; font-size: 16px; line-height: 1.6; color: var(--text); }
@media (max-width: 820px) { .src-compare { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .src-row { grid-template-columns: 1fr; gap: 2px; } }