/* Charlotte Ririe portfolio, case studies
   Editorial layer over site.css: serif reading column, figures with captions, ballpoint-blue ink as the only accent, no cards.
   Loads after site.css. Anything not restyled here keeps its site.css layout. */

:root {
  /* Palette: Deep Sea navy, Pastel Dreams periwinkle, Soft Lavender, Summer Sunset peach and cream. Same tokens as home.css. */
  --ground: #F7F5F0;
  --paper: #FFFFFF;
  --ink: #121A2C;
  --ink-2: #39415A;
  --ink-3: #6E7893;
  --muted: #6E7893;
  --line: #DAD9E3;
  --line-2: #E8E7EE;
  --night: #1B2240;
  --pen: #4B51D6;
  --pen-ink: #383EB8;
  --pen-soft: #E4E6FA;
  --pen-pale: #F3F2FC;
  --lavender: #E9E6FA;
  --peach: #F4DFC8;
  --cream: #F3EFDF;
  --coral: #EC7549;
  --accent: var(--pen);
  --accent-mid: #7F86E6;
  --accent-soft: #DCE2FA;
  --accent-pale: #F3F2FC;
  --sky: #AAB4F5;
  --plum-soft: #EEEBF8; --plum-ink: #4A4A7A; --plum-bg: #E9E6FA; --plum-light: #CFCBF0;
  --green-soft: #E6F0EA; --green: #2E6B4E;
  --warm: #7A4E2A; --warm-bg: #F4DFC8; --warm-label: #5A4A38;
  --night-text: var(--ink); --night-muted: var(--ink-2); --night-label: var(--ink-3); --night-track: #D3DAEE; --night-line: var(--line); --night-card: var(--paper); --night-bar: #9AA6C4;
  --serif: 'Newsreader', 'Iowan Old Style', 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --display: var(--serif);
  --body: var(--serif);
  --mono: var(--sans);
  --radius-lg: 8px; --radius: 6px; --radius-sm: 4px;
  --gutter: 28px;
}

body { font-family: var(--serif); font-size: 20px; line-height: 1.55; font-optical-sizing: auto; color: var(--ink); background: var(--ground); }
a { color: var(--pen); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pen-ink); }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; border-radius: 0; }
h1, h2, h3 { font-weight: 400; }
.wrap { max-width: 1120px; }
.narrow { max-width: 760px; }

/* ---------- Header and footer ---------- */
.site-header { padding-block: 26px 18px; }
.brand { gap: 14px; }
.brand-mark { width: 58px; color: var(--pen); }
.brand-name { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -0.01em; }
.nav { font-family: var(--sans); font-size: 16px; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 400; }
.nav a:hover { color: var(--pen); }
@media (prefers-reduced-motion: no-preference) {
  .brand-mark { animation: mark-ink 1.1s cubic-bezier(.4, 0, .2, 1) .15s both; }
  @keyframes mark-ink { from { clip-path: inset(0 100% 0 0); opacity: .3; } 60% { opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
}
.site-footer { background: transparent; border-top: 1px solid var(--line); margin-top: 64px; }
.site-footer .wrap { font-family: var(--sans); font-size: 15px; padding-block: 28px 48px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--pen); }

/* ---------- Type ---------- */
.eyebrow { font-family: var(--sans); font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.display { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -0.025em; font-variation-settings: "opsz" 72; }
.lede { font-family: var(--serif); font-size: 23px; line-height: 1.5; color: var(--ink-2); max-width: 32em; }
.kicker { font-family: var(--sans); font-size: 15.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--pen); }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.02em; font-variation-settings: "opsz" 48; }
.h2--md { font-size: clamp(26px, 2.8vw, 32px); }
.h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
.label { font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.muted, .section-head .muted { color: var(--ink-2); font-size: 20px; }
.prose p { font-size: 20px; }
.note, .demo-note { font-family: var(--sans); font-size: 15.5px; line-height: 1.5; color: var(--ink-3); }
.todo { font-family: var(--sans); font-size: 0.85em; }
.section-head { gap: 14px; margin-bottom: 40px; }
.section { padding-block: 56px 32px; }
.cs-hero { padding-block: 64px 40px; }
.cs-hero .display { max-width: 18ch; }

/* ---------- Buttons ---------- */
.btn { font-family: var(--sans); font-weight: 500; font-size: 16px; border-radius: 999px; }
.btn--accent, .btn--ink, .btn--sky, .btn--white { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--accent:hover, .btn--ink:hover, .btn--sky:hover, .btn--white:hover { background: var(--pen); border-color: var(--pen); color: var(--paper); }
.btn--outline, .btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--outline:hover, .btn--ghost:hover { color: var(--pen); border-color: var(--pen); }

/* ---------- Results panel and stats (light, not dark) ---------- */
.result-panel { background: var(--accent-soft); color: var(--ink); border-radius: 8px; padding: clamp(24px, 4vw, 48px); }
.result-panel .label { color: var(--ink-3); }
.result-title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
.result-panel .sub { font-family: var(--sans); font-size: 15.5px; color: var(--ink-2); }
.bars.on-dark .bar-label { color: var(--ink-2); font-family: var(--sans); }
.bars.on-dark .bar-track { background: rgba(20, 28, 46, 0.08); }
.bars.on-dark .bar-value { color: var(--ink) !important; font-family: var(--serif); }
.bars.on-dark .bar-fill { --fill: var(--pen) !important; }
.bars.on-dark .bar-row:first-child .bar-fill { --fill: #A3ACC8 !important; }
.bars.on-dark .bar-row:nth-child(2) .bar-fill { --fill: #8A90EA !important; }
.result-side { border-left: 1px solid rgba(20, 28, 46, 0.14); }
.big-stat { font-family: var(--serif); font-weight: 400; font-size: 36px; letter-spacing: -0.015em; color: var(--ink); line-height: 1.1; }
.result-side p { font-family: var(--sans); font-size: 15.5px; color: var(--ink-2); }
.stat-band { background: transparent; color: var(--ink); border-radius: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 32px 0; }
.stat-band .big-stat { font-size: 44px; }
.stat-band .big-stat.warm { color: var(--warm); }
.stat-band p { font-family: var(--sans); font-size: 15.5px; color: var(--ink-2); }

/* ---------- Meta bar ---------- */
.meta-bar { background: transparent; border: 0; border-radius: 0; gap: 32px; overflow: visible; }
.meta-bar > div { background: transparent; padding: 16px 0 0; border-top: 1px solid var(--ink); gap: 8px; }
.meta-bar p, .meta-bar p:last-child { font-size: 17px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Screens and figures ---------- */
.screen-phone { border: 1px solid rgba(20, 28, 46, 0.18); border-radius: 10px; box-shadow: 0 1px 0 rgba(20, 28, 46, 0.06), 0 24px 48px -24px rgba(20, 28, 46, 0.35); }
.screen-browser { border: 1px solid rgba(20, 28, 46, 0.14); border-radius: 8px; box-shadow: 0 1px 0 rgba(20, 28, 46, 0.06), 0 24px 48px -24px rgba(20, 28, 46, 0.35); }
.screen-ad { border-radius: 8px; box-shadow: 0 1px 0 rgba(20, 28, 46, 0.06), 0 24px 48px -24px rgba(20, 28, 46, 0.35); }
.lane-item { flex-basis: 250px; }
.lane-item .screen-phone { max-width: 250px; }
.lane-item--wide { flex-basis: min(620px, 84vw); }
.lane-item--ad { flex-basis: 420px; }
.lane-item figcaption { font-family: var(--sans); font-size: 15.5px; color: var(--ink-3); margin-top: 12px; }
.lane-head { margin-bottom: 18px; }
.lane-head .note { font-size: 15.5px; }
.step { color: var(--pen); font-weight: 500; font-family: var(--sans); }
.role { font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 3px 10px; background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.role--patient, .role--system, .role--clinician, .role--patient-dark { background: transparent; color: var(--ink-2); border-color: var(--line); }
.screen-pair figcaption { font-family: var(--sans); font-size: 15.5px; color: var(--ink-3); margin-top: 12px; max-width: 320px; }
.screen-pair figcaption strong { color: var(--ink); font-weight: 500; }
.fig-grid figcaption, figure > figcaption { font-family: var(--sans); font-size: 15.5px; color: var(--ink-3); }
.fig-stage { border-radius: 8px; }
.fig-stage--eo { background: var(--accent-soft); }
.fig-stage--plum { background: var(--plum-bg); }
.ad-sheet { border-radius: 8px; }

/* ---------- Then / now, steps, decisions: rules, not cards ---------- */
.then-now { gap: 40px; }
.then-now > div { background: transparent; border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 18px 0 0; gap: 10px; }
.then-now .year { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--pen); }
.then-now h3 { font-family: var(--serif); font-weight: 400; font-size: 25px; letter-spacing: -0.01em; }
.then-now ul { font-size: 18px; line-height: 1.5; color: var(--ink-2); gap: 10px; }
.step-grid { gap: 36px 32px; }
.step-card, .step-card--dark, .step-card--warm, .step-card--warm-num { background: transparent; border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 16px 0 0; color: var(--ink); gap: 8px; }
.step-card .num, .step-card--dark .num, .step-card--warm .num, .step-card--warm-num .num { font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--pen); line-height: 1.4; }
.step-card strong, .step-card--dark strong { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--ink); letter-spacing: -0.01em; }
.step-card > span:last-child, .step-card--dark > span:last-child, .step-card--warm > span:last-child { font-size: 17.5px; line-height: 1.5; color: var(--ink-2); }
.step-card .role { align-self: flex-start; }
.decisions { border-top: 0; }
.decision { padding-block: 28px; gap: 28px; }
.decision .num { font-family: var(--serif); font-weight: 400; font-size: 30px; color: var(--pen); line-height: 1; flex-basis: 36px; }
.decision .h3 { font-size: 26px; }
.decision p { font-size: 19px; }

/* ---------- Panels: live, demo, reflect, chart ---------- */
.live-panel, .live-embed { background: var(--pen-pale); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: clamp(24px, 4vw, 44px); }
.live-panel .kicker, .live-copy .kicker { color: var(--pen) !important; }
.live-panel p:last-child, .live-copy p { color: var(--ink-2); font-size: 19px; }
.live-frame iframe { border-radius: 12px; border: 1px solid rgba(20, 28, 46, 0.18); background: var(--paper); }
.demo { border-radius: 8px; padding: clamp(24px, 4vw, 44px); }
.demo--eo { background: var(--accent-soft); }
.demo--warm { background: var(--warm-bg); }
.demo-intro .muted { font-size: 19px; }
.chart-card { background: transparent; border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 18px 0 0; }
.chart-card .label { color: var(--ink); font-family: var(--serif); font-size: 22px; }
.reflect { background: transparent; border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 20px 0 0; }
.reflect h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; letter-spacing: -0.01em; }
.reflect p { font-size: 20px; }
.gs-fact { background: transparent; border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 16px 0 0; }
.gs-fact .big-stat { font-size: 34px; }
.gs-fact p { font-family: var(--sans); font-size: 15.5px; }
.gs-list { font-size: 18px; }
.verifier-note { border-radius: 6px; }
.verifier-note-head { font-family: var(--sans); font-weight: 500; }
.verifier .pill { font-family: var(--sans); }
.view-btn { font-family: var(--sans); }
.flow-card { font-family: var(--sans); }
.flow-title, .flow-when { font-family: var(--sans); }

@media (max-width: 760px) {
  body { font-size: 19px; }
  .lede { font-size: 20px; }
  .muted, .section-head .muted, .prose p { font-size: 19px; }
  .meta-bar { gap: 20px; }
  .lane-item { flex-basis: 220px; }
  .lane-item .screen-phone { max-width: 220px; }
}

/* ======================================================================
   Case page additions, Oct 19: section nav, eyebrow tags, tabs, lane arrows,
   lightbox, insight callouts, decision cards, next/previous footer.
   ====================================================================== */

/* ---------- Sticky section nav ---------- */
.toc { position: sticky; top: 0; z-index: 30; background: rgba(247, 245, 240, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.toc::-webkit-scrollbar { display: none; }
.toc ol { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: 1120px; display: flex; gap: 4px 28px; white-space: nowrap; }
.toc li { flex: none; white-space: nowrap; }
.toc a { display: inline-block; white-space: nowrap; padding: 14px 0 12px; font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.toc a:hover { color: var(--ink); }
.toc a.is-current { color: var(--ink); border-bottom-color: var(--pen); }
.toc-n { color: var(--pen); margin-right: 7px; font-variant-numeric: tabular-nums; }
@media (min-width: 1500px) {
  .toc { position: fixed; top: 50%; left: 28px; transform: translateY(-50%); width: 190px; background: transparent; backdrop-filter: none; border: 0; overflow: visible; }
  .toc ol { flex-direction: column; gap: 0; padding: 0; white-space: normal; }
  .toc a { display: block; padding: 7px 0; border-bottom: 0; border-left: 2px solid transparent; padding-left: 12px; margin: 0; line-height: 1.3; }
  .toc a.is-current { border-left-color: var(--pen); }
}
section[id] { scroll-margin-top: 64px; }
@media (min-width: 1500px) { section[id] { scroll-margin-top: 24px; } }

/* ---------- Eyebrow tags: numbered, uppercase, tracked ---------- */
main { counter-reset: sec; }
main > section[data-nav] { counter-increment: sec; }
.kicker { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pen); }
main > section:has(.kicker) > .section-head > .kicker::before,
main > section:has(.kicker) > .kicker::before { content: counter(sec, decimal-leading-zero) "  /  "; white-space: pre; color: var(--ink-3); }
.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.label { font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.lede { color: var(--ink); }
.prose p, .decision p, .reflect p { line-height: 1.6; }
.prose strong, .decision strong, .insight strong { font-weight: 500; color: var(--ink); }

/* ---------- Tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tab { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; line-height: 1.2; }
.tab:hover { border-color: var(--ink-2); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tab-n { font-size: 12px; color: var(--pen); font-variant-numeric: tabular-nums; }
.tab[aria-selected="true"] .tab-n { color: #AAB4F5; }
.tab-note { font-weight: 400; color: var(--ink-3); }
.tab[aria-selected="true"] .tab-note { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 760px) { .tab-note { display: none; } }
.lane--tab > .lane-head:empty { display: none; }

/* ---------- Lane arrows ---------- */
.lane-head { justify-content: flex-start; }
.lane-ctl { margin-left: auto; display: flex; gap: 6px; }
.lane > .lane-ctl { justify-content: flex-end; margin: -8px 0 14px; }
.lane-ctl[hidden] { display: none; }
.lane-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 16px; cursor: pointer; display: grid; place-items: center; }
.lane-btn:hover:not(:disabled) { border-color: var(--ink); color: var(--pen); }
.lane-btn:disabled { opacity: 0.35; cursor: default; }
.lane-scroll { scroll-snap-type: x proximity; }

/* ---------- Lightbox ---------- */
.is-zoomable { cursor: zoom-in; transition: transform .25s ease, box-shadow .25s ease; }
.is-zoomable:hover { transform: translateY(-2px); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; display: none; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(20, 28, 46, 0.86); backdrop-filter: blur(6px); }
.lightbox figure { margin: 0; max-width: min(1600px, 94vw); max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox img { max-width: 100%; max-height: calc(92vh - 60px); width: auto; height: auto; object-fit: contain; border-radius: 10px; background: var(--paper); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); cursor: zoom-out; }
.lightbox figcaption { font-family: var(--sans); font-size: 15px; color: rgba(255, 255, 255, 0.85); text-align: center; max-width: 80ch; line-height: 1.5; }
.lightbox-close { position: fixed; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
html.has-lightbox { overflow: hidden; }

/* ---------- Insight callouts ---------- */
.insight { margin: 32px 0; padding: 28px 32px; background: var(--pen-pale); border-left: 3px solid var(--pen); border-radius: 0 8px 8px 0; }
.insight-tag { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pen); margin: 0 0 10px; }
.insight p { margin: 0; font-size: 23px; line-height: 1.35; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
.insight p + p { margin-top: 12px; font-size: 17px; font-family: var(--sans); color: var(--ink-2); letter-spacing: 0; }
.insight--dark { background: var(--night); border-left-color: #AAB4F5; }
.insight--dark .insight-tag { color: #AAB4F5; }
.insight--dark p { color: var(--paper); }
.insight--dark p + p { color: rgba(255, 255, 255, 0.72); }

/* ---------- Decisions as cards ---------- */
.decisions { gap: 16px; }
.decision { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 26px 28px; gap: 8px; flex-direction: column; }
.decision:last-child { border-bottom: 1px solid var(--line); }
.decision .num { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pen); flex-basis: auto; line-height: 1.4; }
.decision .num::before { content: "Decision 0"; }
.decision .h3 { font-size: 25px; }

/* ---------- End of case: CTA and next/previous ---------- */
.case-end { padding-block: 56px 0; }
.case-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 28px 0; border-top: 2px solid var(--ink); }
.case-cta p { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -0.015em; }
.case-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-family: var(--sans); font-size: 16px; }
.case-cta-actions a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.site-footer { margin-top: 48px; }
.site-footer .wrap { font-weight: 400; gap: 12px 28px; }
@media (max-width: 760px) {
  .case-cta p { font-size: 22px; }
  .insight { padding: 22px 22px; }
  .insight p { font-size: 20px; }
  .decision { padding: 22px; }
  .toc ol { gap: 4px 20px; }
}

/* Screen corners: tighter radii site-wide (Oct 19) */
.lane-item .screen-phone, .case-visual--eo .screen-phone, .case-visual--plum .screen-phone, .case-visual--gs .screen-phone { border-radius: 10px; }
.case-visual--stagger .screen-phone, .case-visual--tall .screen-phone { border-radius: 10px 10px 0 0; }
.screen-browser { border-radius: 6px; }

/* ---------- Full-bleed bands behind the visuals (Oct 19) ---------- */
html { overflow-x: clip; }
body.case--eo { --band: var(--accent-soft); }
body.case--warm { --band: var(--peach); }
body.case--gs { --band: #DEE4EF; }
.band, .lane, .screen-pair, .fig-grid, .result-panel, .demo, .live-embed { position: relative; }
.band::before, .lane::before, .screen-pair::before, .fig-grid::before, .result-panel::before, .demo::before, .live-embed::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--band); z-index: -1;
}
.lane { padding-block: 36px 20px; margin-bottom: 40px; }
.lane + .lane { margin-top: -40px; }
.lane-scroll { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); padding-bottom: 12px; }
.screen-pair, .fig-grid { padding-block: 48px 40px; }
.result-panel, .demo, .live-embed { background: transparent; border: 0; border-radius: 0; padding-inline: 0; }
.fig-stage, .fig-stage--eo, .fig-stage--plum { background: transparent; min-height: 0; padding: 0; }
.live-panel { background: var(--paper); }
.tabs { position: relative; z-index: 1; }

/* Nav rules on case pages: the site header scrolls away; the section bar is the one sticky element and carries the way back. */
.toc-back a { color: var(--ink); padding-right: 8px; border-right: 1px solid var(--line); border-bottom-color: transparent !important; }
@media (min-width: 1500px) { .toc-back a { border-right: 0; margin-bottom: 10px; } }

/* Lane progress bar */
.lane-track { position: relative; height: 3px; border-radius: 3px; background: rgba(18, 26, 44, 0.12); overflow: hidden; margin-top: 18px; }
.lane-track[hidden] { display: none; }
.lane-track i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: var(--pen); }
.lane-scroll { scrollbar-width: none; }
.lane-scroll::-webkit-scrollbar { display: none; }

/* Number badges: dark circle, light numeral, everywhere a sequence is numbered (Oct 19) */
main > section:has(.kicker) > .section-head > .kicker::before,
main > section:has(.kicker) > .kicker::before { content: counter(sec, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; flex: none; text-transform: none; margin-right: 10px; }
.kicker { display: inline-flex; align-items: center; }
.toc-n, .tab-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; flex: none; text-transform: none; width: 20px; height: 20px; font-size: 9.5px; margin-right: 8px; }
.toc a { display: inline-flex; align-items: center; }
.toc a:not(.is-current) .toc-n { background: var(--ink-3); }
.tab { align-items: center; }
.tab[aria-selected="true"] .tab-n { background: var(--paper); color: var(--ink); }
.step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; flex: none; text-transform: none; margin-right: 8px; position: relative; top: -1px; }
.step::before { content: "0"; }
.step::after { content: none; }
.decision .num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; flex: none; text-transform: none; font-size: 10.5px; }
.decision .num::before { content: "0"; }
.decision { position: relative; }
.decision .num + div { margin-top: 6px; }
.step-card .num, .step-card--dark .num, .step-card--warm .num, .step-card--warm-num .num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; flex: none; text-transform: none; }
.step-card .num::before { content: "0"; }
body.case .learned li::before { content: counter(learned, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; flex: none; text-transform: none; padding: 0; min-width: 0; margin-top: 3px; }
html[data-bg="deepsea"] body.case .lane .step, html[data-bg="crimson"] body.case .lane .step { background: var(--paper); color: var(--ink); }

/* Badge spacing fixes on case pages */
.kicker { gap: 0; }
main > section:has(.kicker) > .section-head > .kicker::before, main > section:has(.kicker) > .kicker::before { width: 20px; height: 20px; font-size: 9.5px; }
.decision .num { width: 20px; height: 20px; font-size: 9.5px; }
.step-card .num, .step-card--dark .num, .step-card--warm .num, .step-card--warm-num .num { width: 20px; height: 20px; font-size: 9.5px; }
.step { width: 18px; height: 18px; font-size: 9px; top: -1px; }

/* Badges in the title blue (Oct 19) */
main > section:has(.kicker) > .section-head > .kicker::before, main > section:has(.kicker) > .kicker::before,
.toc-n, .tab-n, .step, .decision .num, .step-card .num, .step-card--dark .num, .step-card--warm .num, .step-card--warm-num .num,
body.case .learned li::before { background: var(--pen); color: #fff; }
.toc a:not(.is-current) .toc-n { background: #A9ADE8; }
.tab[aria-selected="true"] .tab-n { background: #fff; color: var(--pen); }

/* Badges 30% larger (Oct 19) */
main > section:has(.kicker) > .section-head > .kicker::before, main > section:has(.kicker) > .kicker::before,
.decision .num, .step-card .num, .step-card--dark .num, .step-card--warm .num, .step-card--warm-num .num { width: 26px; height: 26px; font-size: 12px; }
.toc-n, .tab-n { width: 26px; height: 26px; font-size: 11.5px; }
.step { width: 23px; height: 23px; font-size: 11px; }
body.case .learned li::before { width: 26px; height: 26px; font-size: 12px; }

/* Secondary highlight: crimson for outcomes and evidence */
:root { --crimson: #9E3437; --crimson-deep: #5C1A1B; --crimson-ink: #34090F; }
.insight { border-left-color: var(--crimson); background: #F7EDEC; }
.insight-tag { color: var(--crimson); }
.insight--dark { background: linear-gradient(160deg, var(--crimson-ink), var(--crimson-deep)); border-left-color: #E3A3A0; }
.insight--dark .insight-tag { color: #E3A3A0; }
.big-stat { color: var(--crimson); }
.stat-band, .gs-fact { border-top-color: var(--crimson); }
.result-panel .bars.on-dark .bar-row:last-child .bar-fill { --fill: var(--crimson) !important; }
.case-cta { border-top-color: var(--crimson); }

/* Hairlines on the crimson scale: a step darker than the impact panel (Oct 19) */
:root { --line: #E2D2CD; --line-2: #ECE1DD; }

/* Wide browser screens: big enough to read, scroll sideways for the next one (Oct 19) */
.lane-item--wide { flex-basis: min(920px, 82vw); }
.lane-item--wide .screen-browser { width: 100%; }

/* Decision cards: warm fill, a takeaway you can skim in five seconds */
.decision { background: #F4EDE6; border-color: var(--line); }
.decision .takeaway { margin: 4px 0 2px; font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--crimson); }
.decision .h3 { font-size: 23px; color: var(--ink); }
.decision p:not(.takeaway) { font-size: 18px; color: var(--ink-2); }

/* Keep the first screen aligned with the text column when the row snaps */
.lane-scroll { scroll-padding-inline: calc(50vw - 50%); }

/* Snapping fought the full-bleed padding (it scrolled the first screen to the edge). Free scroll, arrows step one screen. */
.lane-scroll { scroll-snap-type: none; scroll-padding-inline: 0; }

/* ======================================================================
   Case page type and spacing audit (Oct 19). One scale, applied everywhere:
   eyebrow 12.5 sans caps · h2 42 serif · h3 23 serif · intro and body 20 serif ink ·
   lists 18 serif · captions and notes 15.5 sans · big stats 36 serif crimson ·
   sections 64 top / 32 bottom.
   ====================================================================== */
main .kicker, main .prose .kicker, main .live-copy .kicker, main .live-panel .kicker, main .section-head .kicker {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.4; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pen) !important; margin: 0 0 14px;
}
main .h2, main .h2--md, main .h2--lg { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.02em; }
main .h3, main h3:not(.label) { font-family: var(--serif); font-size: 23px; line-height: 1.25; font-weight: 400; letter-spacing: -0.01em; }
main .prose > p, main .section-head > p:not(.kicker), main .section-head .muted, main .demo-intro .muted, main .live-copy p:not(.kicker) {
  font-family: var(--serif); font-size: 20px; line-height: 1.6; color: var(--ink);
}
main .prose > p + p { margin-top: 18px; }
main li { line-height: 1.6; }
main .then-now ul, main .gs-list, body.case .learned li, main .prose li { font-size: 18px; }
main figcaption, main .note, main .demo-note, main .lane-item figcaption, main .screen-pair figcaption {
  font-family: var(--sans); font-size: 15.5px; line-height: 1.55; color: var(--ink-3);
}
main .label { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
main .chart-card .label { font-family: var(--serif); font-size: 23px; line-height: 1.25; font-weight: 400; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
main .big-stat, main .stat-band .big-stat, main .gs-fact .big-stat, main .big-stat.warm { font-size: 36px; line-height: 1.1; color: var(--crimson); }
main .result-side .big-stat { font-size: 32px; }
main .result-side p, main .stat-band p, main .gs-fact p { font-size: 15.5px; line-height: 1.55; }

/* Section rhythm */
main > section { padding-block: 64px 32px; }
main > section.cs-hero { padding-block: 64px 40px; }
main > section.case-end { padding-block: 56px 0; }
main > section.narrow:not(.section):not(.prose) { padding-block: 0; }
main .section-head { margin-bottom: 36px; gap: 12px; }

/* Results panel: the side column gets air, and a top rule instead of a side rule when it wraps */
.result-side { padding-left: 32px; }
.result-side > div + div { margin-top: 24px; }
@media (max-width: 1000px) {
  .result-side { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
}
main > section.section, main > section.prose, main > section.narrow.section { padding-block: 64px 32px; }
main .big-stat.warm { color: var(--crimson) !important; }
body.case main figcaption, body.case main .note { font-size: 15.5px !important; line-height: 1.55 !important; color: var(--ink-3) !important; font-family: var(--sans) !important; }
body.case main .label { color: var(--ink-3) !important; }
body.case main .chart-card .label { color: var(--ink) !important; }
main .result-side .big-stat { font-size: 36px; }
main .prose li, main .then-now li, main .gs-list li, body.case .learned li { color: var(--ink-2); }
body.case .learned .learned-last { color: var(--ink); }

/* One left edge: headings, prose, panels and screen rows all start on the column edge (Oct 19) */
main .section-head { margin-inline: 0; max-width: 760px; }
main > section.narrow { max-width: 1120px; }
main > section.narrow > *, main > section.narrow .decisions, main > section.narrow .reflect { max-width: 760px; margin-inline: 0; }

main .insight .insight-tag { font-family: var(--sans); font-size: 12.5px; line-height: 1.4; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; }
main .insight .insight-tag + p { font-family: var(--serif); font-size: 23px; line-height: 1.35; letter-spacing: -0.012em; margin: 0; }
main .insight .insight-tag + p + p { font-family: var(--sans); font-size: 15.5px; line-height: 1.55; margin-top: 12px; }
main .insight:not(.insight--dark) .insight-tag + p { color: var(--ink); }
main .insight:not(.insight--dark) .insight-tag + p + p { color: var(--ink-2); }

/* Relief chart: dots read as "out of 10 patients" (Oct 19) */
.result-title { text-transform: none; }
.relief { display: grid; gap: 22px; margin-top: 28px; }
.relief-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 190px; align-items: center; gap: 20px; }
.relief-label { margin: 0; font-family: var(--sans); font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.relief-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; max-width: 360px; }
.relief-dots i { aspect-ratio: 1; border-radius: 50%; background: linear-gradient(90deg, var(--dot) var(--f), rgba(18, 26, 44, 0.1) var(--f)); }
.relief-row.is-low { --dot: #A3ACC8; }
.relief-row.is-mid { --dot: #8A90EA; }
.relief-row.is-high { --dot: var(--crimson); }
.relief-value { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.relief-value strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); }
.relief-row.is-high .relief-value strong { color: var(--crimson); }
.relief-take { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 20px; line-height: 1.45; color: var(--ink); max-width: 36em; }
.relief-take strong { font-weight: 500; color: var(--crimson); }
@media (max-width: 760px) {
  .relief-row { grid-template-columns: 1fr; gap: 8px; }
  .relief-dots { max-width: none; }
}

/* ---------- Section nav on phones: a compact bar that opens a sheet (Oct 19) ---------- */
.toc-bar { display: none; }
@media (max-width: 760px) {
  .toc { overflow: visible; }
  .toc-bar { display: flex; align-items: center; gap: 4px; padding: 0 var(--gutter); height: 52px; }
  .toc-bar-back { width: 40px; height: 40px; display: grid; place-items: center; margin-left: -10px; color: var(--ink); text-decoration: none; font-size: 18px; flex: none; }
  .toc-bar-btn { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; font: inherit; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); text-align: left; cursor: pointer; }
  .toc-bar-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toc-bar-count { font-weight: 400; font-size: 13px; color: var(--ink-3); flex: none; }
  .toc-bar-caret { width: 8px; height: 8px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg) translateY(-3px); transition: transform .2s; flex: none; margin: 0 4px 0 2px; }
  .toc.is-open .toc-bar-caret { transform: rotate(-135deg) translateY(-2px); }
  .toc ol { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 6px var(--gutter) 14px; max-height: calc(100svh - 120px); overflow-y: auto; background: var(--ground); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(18, 26, 44, 0.35); white-space: normal; }
  .toc.is-open ol { display: flex; }
  .toc ol li { flex: none; }
  .toc ol a { display: flex; align-items: center; padding: 11px 0; margin: 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .toc ol li:last-child a { border-bottom: 0; }
  .toc ol a.is-current { border-bottom-color: var(--line); color: var(--pen); }
  .toc .toc-back { display: none; }
  .toc-bar .toc-n { width: 26px; height: 26px; font-size: 11.5px; margin: 0; background: var(--pen); }
}

/* ---------- Mobile audit (Oct 19) ---------- */
@media (max-width: 560px) {
  :root { --gutter: 20px; }
  main > section.section, main > section.prose, main > section.narrow.section { padding-block: 48px 24px; }
  main > section.cs-hero { padding-block: 40px 28px; }
  main .section-head { margin-bottom: 28px; }
  .meta-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .meta-bar p, .meta-bar p:last-child { font-size: 16px; }
  .stat-band { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; padding: 24px 0; }
  .stat-band .big-stat, main .big-stat { font-size: 30px; }
  .gs-facts, .facts { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .case-cta { gap: 16px; }
  .case-cta-actions a:not(.btn) { padding-block: 10px; }
  .case-next { gap: 16px; }
  .lane { padding-block: 28px 16px; margin-bottom: 24px; }
  .lane + .lane { margin-top: -24px; }
  .relief-take { font-size: 18px; }
}

@media (max-width: 560px) {
  .gs-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .gs-fact .big-stat { font-size: 30px; }
}

/* Hierarchical numbers (Oct 19): case study N, sections N.1, N.2 ... Steps, tabs and decisions inside a section count plainly 1, 2, 3. */
body[data-case="1"] { --case: "1."; }
body[data-case="2"] { --case: "2."; }
body[data-case="3"] { --case: "3."; }
body[data-case="4"] { --case: "4."; }
main > section:has(.kicker) > .section-head > .kicker::before,
main > section:has(.kicker) > .kicker::before { content: var(--case, "") counter(sec); width: auto; min-width: 26px; padding: 0 8px; border-radius: 999px; }
.toc-n { width: auto; min-width: 26px; padding: 0 7px; border-radius: 999px; }
.step::before, .decision .num::before, .step-card .num::before { content: none; }
body.case .learned li::before { content: counter(learned); }

/* Readable wide screens on phones: bigger than the screen, swipe across; tap to zoom (Oct 19) */
@media (max-width: 560px) {
  .lane-item--wide { flex-basis: 150vw; }
  .lane-item figcaption { max-width: 84vw; }
  .lightbox img { max-width: none; max-height: none; width: 230vw; }
  .lightbox figure { max-width: 100vw; overflow: auto; max-height: 86vh; align-items: flex-start; }
}
body[data-case="5"] { --case: "5."; }

/* Previous / next: copy cards (Nov 2). Label, title, then the product with its brand dot. */
.case-next { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.case-link { --mark: var(--pen); position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); text-decoration: none; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s; }
.case-link:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -30px rgba(20, 28, 46, 0.35); border-color: var(--ink-3); color: var(--ink); }
.case-link-label { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.case-link--prev .case-link-label::before { content: "\2190  "; }
.case-link--next .case-link-label::after { content: "  \2192"; }
.case-link-title { font-size: 24px; line-height: 1.18; letter-spacing: -0.015em; max-width: 24ch; text-wrap: balance; }
.case-link:hover .case-link-title { color: var(--pen); }
.case-link-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--sans); font-size: 14px; }
.case-link-name { display: inline-flex; align-items: center; font-weight: 500; color: var(--ink); white-space: nowrap; }
.case-link-go { color: var(--ink-3); white-space: nowrap; transition: color .3s; }
.case-link-go::after { content: "\2192"; display: inline-block; margin-left: 6px; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.case-link:hover .case-link-go { color: var(--pen); }
.case-link:hover .case-link-go::after { transform: translateX(4px); }
.case-link--eo { --mark: #4B51D6; } .case-link--bm { --mark: #D9578F; } .case-link--gs { --mark: #2F6FE4; }
@media (max-width: 640px) {
  .case-next { grid-template-columns: 1fr; gap: 12px; }
  .case-link { padding: 18px 20px; gap: 10px; }
  .case-link-title { font-size: 20px; max-width: none; }
  .case-link-foot { padding-top: 12px; font-size: 13px; }
}

/* Room after the last item when the section bar scrolls sideways (Oct 19) */
@media (min-width: 761px) and (max-width: 1499px) {
  .toc ol { width: max-content; min-width: 100%; max-width: none; }
  .toc ol li:last-child { padding-right: 0; }
}

/* Corner radius scale, one system site-wide (Oct 21):
   6px  small things: browser screens, thumbnails, ads, notes, quotes, chips
   10px phone screens and media inside cards
   14px containers: panels, cards, figure frames, decision cards, callouts */
:root { --r-sm: 6px; --r-md: 10px; --r-lg: 14px; }
.decision, .case-link, .flow-card, .insight, .live-panel, .live-embed, .demo, .result-panel, .fig-stage, .render, .chart-card, .connect { border-radius: var(--r-lg); }
.insight { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.screen-browser, .case-link-thumb, .case-link .case-link-thumb, .ad-sheet, .screen-ad, .verifier-note, .lightbox img, .verifier-photo img, .is-zoomable:not(.screen-phone) { border-radius: var(--r-sm); }
.screen-phone, .lane-item .screen-phone, .case-visual--eo .screen-phone, .case-visual--gs .screen-phone, .case-visual--plum .screen-phone, .live-frame iframe { border-radius: var(--r-md); }
.case-visual--stagger .screen-phone, .case-visual--tall .screen-phone { border-radius: var(--r-md) var(--r-md) 0 0; }
.render img { border-radius: var(--r-md); }
body.case .ad-sheet { border-radius: var(--r-sm) !important; }
body.case .render { border-radius: var(--r-lg) !important; }
body.case main img.screen-phone { border-radius: var(--r-md) !important; }

/* Footer: one colophon line, then links left and a small sign-off right (Oct 21) */
.foot, .site-footer .wrap { display: block; }
.foot-line { margin: 0 0 18px; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.45; color: var(--ink-2); max-width: 40em; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 28px; font-family: var(--sans); font-size: 15px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-links a { color: var(--ink-2); text-decoration: none; padding-block: 6px; }
.foot-links a:hover { color: var(--pen); }
.foot-sign { font-size: 13px; color: var(--ink-3); letter-spacing: 0.02em; }

/* 2026-10-21: live embed heading was still white from the old dark panel */
.live-copy h2, .live-copy .h2 { color: var(--ink); }

/* 2026-10-21: care plan page restructure: symptom chips, LLM flow, tracking grid, fixes list */
.chips-label { font-family: var(--sans); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 28px 0 10px; }
.chips { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; line-height: 1.2; }
.llm { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.llm-flow { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: llm; }
.llm-flow li { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 18px 22px; }
.llm-flow li + li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 14px; height: 2px; background: var(--line); }
.llm-flow .llm-n { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--pen); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 500; margin-bottom: 12px; }
.llm-flow li:nth-child(4) .llm-n { background: var(--crimson); }
.llm-flow h4 { font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.2; margin: 0 0 8px; color: var(--ink); }
.llm-flow p { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0; }
@media (max-width: 1100px) { .llm-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .llm-flow li:nth-child(4)::before, .llm-flow li:nth-child(1)::before { display: none; } }
@media (max-width: 640px) { .llm-flow { grid-template-columns: 1fr; } .llm-flow li + li::before { left: 24px; top: -14px; width: 2px; height: 14px; } }
.track-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.track-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 18px; }
.track-sym { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--pen); margin: 0 0 8px; }
.track-measure { font-family: var(--serif); font-size: 21px; line-height: 1.2; margin: 0 0 8px; color: var(--ink); }
.track-card p:last-child { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0; }
@media (max-width: 900px) { .track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .track-grid { grid-template-columns: 1fr; } }
.fixes { list-style: none; margin: 0 0 40px; padding: 0; border-top: 1px solid var(--line); }
.fixes li { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid var(--line); }
.fixes h3 { font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.2; margin: 0 0 6px; color: var(--ink); }
.fixes p { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 760px; }
.fix-tag { flex: none; font-family: var(--sans); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--crimson); background: rgba(158, 52, 55, 0.08); border-radius: 999px; padding: 7px 12px; margin-top: 4px; white-space: nowrap; }
@media (max-width: 640px) { .fixes li { flex-direction: column; gap: 10px; } .fix-tag { order: -1; margin-top: 0; } }
.flow-wrap { margin-top: 44px; }

main .prose > p.chips-label, main p.chips-label { font-family: var(--sans); font-size: 12.5px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 28px 0 10px; }

/* 2026-10-21: tab lanes are shown one at a time, so the lane-to-lane pull-up must not apply (it dragged the band under the tabs) */
.lane + .lane.lane--tab, .lane[hidden] + .lane { margin-top: 0 !important; }

.then-now + .tabs { margin-top: 40px; }

.chips--sm { margin: 0 0 12px; gap: 6px; }
.chips--sm li { font-size: 13.5px; padding: 6px 11px; }
.track-card .chips--sm { margin-bottom: 12px; }
.track-rest { margin-top: 18px; }
.track-rest .track-sym { color: var(--ink-3); margin-bottom: 10px; }

.case-close { font-family: var(--serif); font-size: 23px; line-height: 1.4; color: var(--ink); border-left: 3px solid var(--crimson); padding-left: 22px; margin: 8px 0 0; }
.case-close a { font-family: var(--sans); font-size: 15px; color: var(--pen); white-space: nowrap; margin-left: 8px; }

.lane-item--ad { flex-basis: 440px; }
@media (max-width: 560px) { .lane-item--ad { flex-basis: 78vw; } }
.ad-sheets { margin: 24px 0 0; display: grid; gap: 16px; }
.ad-sheets .ad-sheet { margin-top: 0; }

.loop-flow li:nth-child(4) .llm-n { background: var(--pen); }
.loop-flow li:nth-child(5) .llm-n { background: var(--crimson); }

/* 2026-10-22: Explore the results, slimmed from the public outcomes view */
.oc { display: grid; gap: 28px; margin-top: 8px; }
.oc-block { padding-top: 22px; border-top: 1px solid var(--line); }
.oc-label { font-family: var(--sans); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.oc-grid { display: grid; gap: 14px; }
.oc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.oc-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 20px 18px; }
.oc-stat { padding: 4px 0; }
.oc-eyebrow { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--pen); margin: 0 0 10px; }
.oc-big { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--crimson); margin: 6px 0 8px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.oc-what { font-family: var(--sans); font-size: 16px; line-height: 1.4; color: var(--ink); margin: 0 0 6px; }
.oc-n { font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--ink-3); margin: 0; }
.oc-note { font-family: var(--sans); font-size: 14.5px; line-height: 1.5; color: var(--ink-3); margin: 14px 0 0; max-width: 760px; }
.oc-bars { display: grid; gap: 18px; max-width: 760px; }
.oc-bar-label { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); margin: 0 0 8px; }
.oc-bar-track { display: grid; gap: 6px; }
.oc-bar-track i { display: block; height: 30px; border-radius: 4px; width: var(--w); position: relative; font-style: normal; }
.oc-bar-track i.is-eo { background: var(--crimson); }
.oc-bar-track i.is-ref { background: #E2D2CD; }
.oc-bar-track i b { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 10px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.oc-bar-track i.is-ref b { left: auto; right: 12px; margin: 0; color: var(--ink-2); }
.oc .chips--sm { margin-bottom: 14px; }
@media (max-width: 900px) { .oc-grid--3, .oc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .oc-grid--3, .oc-grid--4, .oc-grid--2 { grid-template-columns: 1fr; } .oc-big { font-size: 38px; } .oc-bar-track i b { font-size: 13px; } }

/* 2026-10-27: case study restructure around three decisions */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.facts p { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.facts .fact-n { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--crimson); margin-bottom: 8px; letter-spacing: -0.01em; }
.brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px 48px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.brief .label { font-family: var(--sans); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.brief p { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink); margin: 0; }
.brief .chips { margin: 16px 0 0; }
@media (max-width: 900px) { .facts, .brief { grid-template-columns: 1fr; } }
.findings { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.findings li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px 32px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: start; }
.find-n { font-family: var(--serif); font-size: 34px; line-height: 1.05; color: var(--crimson); margin: 0; letter-spacing: -0.01em; }
.findings h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0 0 6px; color: var(--ink); }
.findings li p:last-child { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-2); margin: 0; }
@media (max-width: 640px) { .findings li { grid-template-columns: 1fr; gap: 8px; } }
.loop-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .loop-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .loop-strip li:nth-child(3)::before { display: none; } }
@media (max-width: 560px) { .loop-strip { grid-template-columns: 1fr; } }
.dec { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.dec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.dec-n { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px; background: var(--pen); color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 500; flex: none; }
.dec-head h3 { font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); font-weight: 500; line-height: 1.15; margin: 0; color: var(--ink); letter-spacing: -0.01em; }
.dec-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.dec--wide .dec-grid { grid-template-columns: 1fr; }
.dec-label { font-family: var(--sans); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pen); margin: 0 0 8px; }
.dec-text p:not(.dec-label) { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-2); margin: 0 0 22px; }
.dec-text p:last-child { margin-bottom: 0; }
.dec-text--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.dec-text--row p:not(.dec-label) { margin-bottom: 0; }
.dec-visual { margin: 0; position: relative; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-lg); background: var(--band, #ECE6DA); display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.5vw, 28px); }
.dec-visual .screen-phone { width: 42%; max-width: 280px; flex: 0 1 auto; }
.dec-visual--trio .screen-phone { width: 28%; max-width: 240px; }
.dec-visual--wide { margin-top: 32px; padding: clamp(24px, 4vw, 56px); }
.dec-visual--wide .screen-browser { width: 100%; max-width: 1100px; }
.dec-visual figcaption { flex-basis: 100%; font-family: var(--sans); font-size: 15px; line-height: 1.45; color: var(--ink-3); margin: 6px 0 0; text-align: left; }
@media (max-width: 900px) { .dec-grid { grid-template-columns: 1fr; } .dec-text--row { grid-template-columns: 1fr; gap: 20px; } .dec-visual .screen-phone { width: 44%; } .dec-visual--trio .screen-phone { width: 30%; } }
@media (max-width: 560px) { .dec-visual--trio .screen-phone { width: 46%; } }
.ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px 40px; align-items: start; position: relative; padding: 48px 0 40px; }
.ba::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--band, #ECE6DA); z-index: -1; }
.ba figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.ba .screen-phone { width: 100%; max-width: 260px; }
.ba figcaption { font-family: var(--sans); font-size: 15px; line-height: 1.45; color: var(--ink-3); margin-top: 12px; max-width: 280px; }
.ba figcaption strong { color: var(--ink); font-weight: 500; }
.ba-text p:not(.dec-label) { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-2); margin: 0 0 22px; }
@media (max-width: 900px) { .ba { grid-template-columns: 1fr 1fr; } .ba-text { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ba { grid-template-columns: 1fr; } }
.imp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 10px; }
.imp-row .oc-big { font-size: 34px; }
.result-side .oc-eyebrow { margin-bottom: 6px; }

.result-side p.oc-big { font-family: var(--serif); font-size: 36px; line-height: 1; color: var(--crimson); margin: 6px 0 8px; }
.result-side p.oc-what { font-family: var(--sans); font-size: 15.5px; color: var(--ink); margin: 0 0 6px; }
.result-side p.oc-n { font-size: 14px; color: var(--ink-3); }
.result-side p.oc-eyebrow { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--pen); margin-bottom: 6px; }

/* 2026-10-27b: decisions reuse the page vocabulary (section head, then-now, lane, insight) */
.dec { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.dec > .section-head { margin-bottom: 8px; }
.dec .then-now { margin-bottom: 36px; }
.dec .then-now p { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.dec .insight { margin: 8px 0 0; }
.decision .takeaway { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--crimson); margin: 0 0 2px; }

/* 2026-10-27: case-page lanes match the homepage strip on phones: bigger screens, snap to the gutter, swipe hint */
@media (max-width: 560px) {
  .lane-item { flex-basis: 62vw; }
  .lane-item .screen-phone { max-width: none; width: 62vw; }
  .lane-item--wide { flex-basis: 150vw; }
  .lane-scroll { scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 20px); }
  .lane-scroll .lane-item { scroll-snap-align: start; }
  .lane-item figcaption { max-width: 62vw; }
  .lane-item--wide figcaption { max-width: 84vw; }
  .lane-hint { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 0; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink-3); }
  .lane-hint svg { width: 15px; height: 15px; flex: none; }
}
@media (min-width: 561px) { .lane-hint { display: none; } }
/* mobile minimums for the smallest labels */
@media (max-width: 560px) { .case-link-label, .pill, .render-name { font-size: 12px; } }
@media (max-width: 560px) {
  .lane-ctl { display: none; }
  .screen-pair { gap: 16px; justify-content: space-between; }
  .screen-pair figure { flex: 0 1 calc(50% - 8px); }
  .screen-pair figcaption { font-size: 14px; }
}

/* Decision panels, Oct 28: number + title, then Problem beside a tinted Design decision card. One rule, not three. */
.dec-top { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
.dec-num { flex: none; font-family: var(--serif); font-size: clamp(44px, 5vw, 64px); line-height: .9; color: var(--pen); letter-spacing: -0.03em; font-variant-numeric: lining-nums; }
.dec-eyebrow { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 8px; }
.dec-title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 0; max-width: 24ch; }
.dec .then-now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: stretch; }
.dec .then-now > div { border-top: 0; border-radius: var(--r-lg); padding: 24px 26px; }
.dec .then-now > div:first-child { padding-left: 0; padding-right: 8px; }
.dec .then-now > div:last-child { background: color-mix(in srgb, var(--pen) 7%, var(--ground)); box-shadow: inset 3px 0 0 var(--pen); }
.dec .then-now > div:first-child .year { color: var(--ink-3); }
.dec .then-now h3 { margin-top: 6px; }
.dec .then-now p { margin-top: 10px !important; }
.chips-block { max-width: none; margin-inline: 0; }
.chips-block .chips { justify-content: flex-start; }
@media (max-width: 760px) {
  .dec-top { gap: 14px; }
  .dec .then-now { grid-template-columns: 1fr; }
  .dec .then-now > div:first-child { padding: 0; }
  .dec .then-now > div:last-child { padding: 20px; }
}
main .dec .dec-title { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -0.02em; max-width: 26ch; }

/* Best Mate, Oct 30: the walkthrough. A phone built from the app's own screens (Whimhaus-app/frontend:
   tokens from tailwind.config.ts and globals.css, markup and copy from app/upload, app/generating and
   app/renders-onepanel). assets/bm-walk.js drives the finger and the state changes. */
.bmx { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.bmx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bmx-steps li { display: flex; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); opacity: .42; transition: opacity .5s; }
.bmx-steps li.is-on { opacity: 1; }
.bmx-steps li:last-child { border-bottom: 1px solid var(--line); }
.bmx-steps .step { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 12px; font-weight: 500; margin-top: 2px; }
.bmx-steps h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.25; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.bmx-steps p { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 8px 0 0; max-width: 46ch; }
@media (max-width: 760px) { .bmx { grid-template-columns: 1fr; gap: 28px; } .bmx-steps li { padding: 18px 0; } .bmx-steps p { font-size: 17px; } }

.bmw { --cream: #FBF6EE; --butter: #FFF7E0; --bink: #4A2C1A; --mid: #8B5E3C; --bord: #E0DBD3; --soft: #F3EDE3; --paperb: #FFFDF9; --stone: #6B6560; --latte: #C9A882; --label: #8A6B4F; --accent: #D9578F; --ok: #2E7D52;
  position: relative; width: 100%; max-width: 320px; margin-inline: auto; aspect-ratio: 320 / 660; border-radius: 26px; overflow: hidden; background: var(--cream); color: var(--bink);
  font-family: "DM Sans", system-ui, sans-serif; font-size: 12px; line-height: 1.45; box-shadow: 0 30px 60px -30px rgba(18, 26, 44, .45), 0 0 0 1px rgba(18, 26, 44, .08); transition: opacity .6s; }
.bmw.is-out { opacity: 0; }
.bmw * { box-sizing: border-box; }
.bmw p, .bmw h1, .bmw h2, .bmw h3 { margin: 0; }
main .bmw h1, main .bmw h2, main .bmw h3, main .bmw p { font-family: "DM Sans", system-ui, sans-serif; }
main .bmw .bmw-zone-empty h3 { font-size: 13.5px; line-height: 1.3; font-weight: 600; letter-spacing: 0; color: var(--bink); }
main .bmw .bmw-sub, main .bmw .bmw-line, main .bmw .bmw-note, main .bmw .bmw-lock, main .bmw .bmw-alt, main .bmw .bmw-trust { font-family: "DM Sans", system-ui, sans-serif; }
.bmw .is-pressed { transform: scale(.97); }
.bmw-s { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; pointer-events: none; overflow: hidden; }
.bmw-s.is-on { opacity: 1; }
.bmw-nav { position: relative; z-index: 3; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--paperb); border-bottom: 1px solid var(--bord); }
.bmw-burger { width: 18px; height: 2px; background: var(--bink); box-shadow: 0 -6px 0 var(--bink), 0 6px 0 var(--bink); }
.bmw-logo { height: 30px; width: auto; }
.bmw-tote { position: relative; width: 18px; height: 18px; }
.bmw-tote i { position: absolute; inset: 3px 0 0; border: 1.6px solid var(--mid); border-radius: 2px 2px 4px 4px; }
.bmw-tote i::before { content: ""; position: absolute; left: 4px; right: 4px; top: -6px; height: 7px; border: 1.6px solid var(--mid); border-bottom: 0; border-radius: 4px 4px 0 0; }
.bmw-badge { position: absolute; right: -7px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--bink); color: var(--cream); font-size: 9px; font-weight: 700; display: grid; place-items: center; transform: scale(0); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.bmw-badge.is-on { transform: scale(1); }
.bmw-shopbar { display: flex; align-items: center; gap: 9px; padding: 8px 14px; background: var(--soft); border-bottom: 1px solid var(--bord); font-size: 10.5px; }
.bmw-shopbar img { width: 30px; height: 30px; object-fit: cover; border-radius: 4px; }
.bmw-shopbar div { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.bmw-shopbar b { font-weight: 600; } .bmw-shopbar span { color: var(--mid); font-size: 10px; } .bmw-shopbar u { color: var(--mid); font-size: 10px; }
.bmw-body { padding: 18px 16px 20px; text-align: center; }
.bmw-body--left { text-align: left; }
.bmw-eyebrow { color: var(--mid); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.bmw-eyebrow--label { color: var(--label); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; }
.bmw-h1 { font-size: 26px; line-height: 1.12; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px; }
.bmw-h1 em { font-style: italic; color: var(--mid); }
.bmw-h1--ready { font-size: 24px; font-weight: 700; letter-spacing: -.02em; } .bmw-h1--ready em { color: var(--label); }
.bmw-sub { font-size: 11px; color: var(--mid); line-height: 1.55; margin: 0 auto 14px; max-width: 26em; }
.bmw-sub--left { margin: 8px 0 14px; }
.bmw-zone { position: relative; border-radius: 16px; min-height: 86px; margin-bottom: 10px; transition: background .3s, border-color .3s; }
.bmw-zone-empty { border: 1px dashed var(--bord); background: var(--soft); border-radius: 16px; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: opacity .3s; }
.bmw-cam { font-size: 26px; line-height: 1; }
.bmw-zone-empty h3 { font-size: 13.5px; font-weight: 600; } .bmw-zone-empty p { font-size: 10px; color: var(--mid); }
.bmw-zone-ready { position: absolute; inset: 0; display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 16px; border: 2px solid var(--bord); background: var(--soft); text-align: left; opacity: 0; transition: opacity .3s, border-color .3s, background .3s; }
.bmw-zone-ready img { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; flex: none; }
.bmw-zone-ready div { display: flex; flex-direction: column; gap: 3px; }
.bmw-zone-ready u { font-size: 10px; color: var(--mid); }
.bmw-checking, .bmw-ok { display: none; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.bmw-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(74, 44, 26, .2); border-top-color: var(--bink); animation: bmwSpin .8s linear infinite; }
.bmw-ok i { width: 15px; height: 15px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; font-style: normal; }
.bmw-zone.is-checking .bmw-zone-empty, .bmw-zone.is-ready .bmw-zone-empty { opacity: 0; }
.bmw-zone.is-checking .bmw-zone-ready, .bmw-zone.is-ready .bmw-zone-ready { opacity: 1; }
.bmw-zone.is-checking .bmw-checking { display: flex; }
.bmw-zone.is-ready .bmw-ok { display: flex; }
.bmw-zone.is-ready .bmw-zone-ready { border-color: var(--ok); background: rgba(46, 125, 82, .07); }
@keyframes bmwSpin { to { transform: rotate(360deg); } }
.bmw-btn { display: block; width: 100%; border: 0; border-radius: 999px; background: var(--bink); color: var(--cream); font: 600 13px/1 "DM Sans", sans-serif; letter-spacing: .01em; padding: 14px 18px; transition: opacity .3s, transform .15s, box-shadow .3s; }
.bmw-generate { opacity: .35; margin-bottom: 6px; }
.bmw-generate.is-ready { opacity: 1; animation: bmwPulse 1.8s ease-in-out infinite; }
.bmw-generate.is-busy { opacity: .6; animation: none; }
@keyframes bmwPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 44, 26, .3); } 50% { box-shadow: 0 0 0 6px rgba(74, 44, 26, 0); } }
.bmw-tips { display: flex; gap: 6px; margin: 4px 0 8px; }
.bmw-tips div { flex: 1; font-size: 9.5px; color: var(--mid); line-height: 1.4; padding: 8px 4px; }
.bmw-tips b { display: block; font-size: 16px; margin-bottom: 2px; }
.bmw-trust { font-size: 9.5px; color: var(--mid); }
.bmw-gen { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 26px 20px; text-align: center; }
.bmw-logo--big { height: 44px; opacity: .85; margin-bottom: 4px; }
.bmw-brush { font-size: 44px; line-height: 1; animation: bmwFloat 2.4s ease-in-out infinite; }
@keyframes bmwFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.04); } }
.bmw-gen h2 { font-size: 20px; font-weight: 600; line-height: 1.15; }
.bmw-line { font-size: 11px; font-style: italic; color: var(--mid); min-height: 16px; }
.bmw-bar { width: 100%; max-width: 190px; height: 3px; border-radius: 2px; background: var(--bord); overflow: hidden; }
.bmw-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--accent); transition: width .1s linear; }
.bmw-pct { font-size: 9.5px; color: var(--stone); }
.bmw-zone-label { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); margin-top: 2px; }
.bmw-zone-label i { flex: 1; height: 1px; background: var(--bord); }
.bmw-quiz { width: 100%; border: 1px solid var(--bord); background: var(--butter); border-radius: 16px; padding: 13px 14px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.bmw-quiz-k { font-size: 8.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #5f8a63; margin-bottom: 2px; }
.bmw-quiz-q { font-size: 12.5px; font-weight: 600; line-height: 1.35; margin-bottom: 4px; }
.bmw-quiz button { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 1px solid var(--bord); background: var(--cream); color: var(--bink); border-radius: 10px; padding: 9px 11px; font: 500 11px/1.2 "DM Sans", sans-serif; text-align: left; transition: transform .15s, background .3s, border-color .3s; }
.bmw-quiz button em { display: none; font-style: normal; font-size: 9px; font-weight: 700; color: #fff; background: var(--ok); border-radius: 999px; padding: 2px 7px; }
.bmw-quiz button.is-correct { border-color: var(--ok); background: rgba(46, 125, 82, .09); } .bmw-quiz button.is-correct em { display: inline; }
.bmw-quiz-result { font-size: 10.5px; color: var(--mid); line-height: 1.4; margin-top: 4px; opacity: 0; max-height: 0; transition: opacity .4s, max-height .4s; }
.bmw-quiz-result.is-on { opacity: 1; max-height: 40px; }
.bmw-stages { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 220px; text-align: left; margin-top: 2px; }
.bmw .gen-stage { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--stone); transition: color .3s; }
.bmw .gen-dot { width: 15px; height: 15px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.5px solid var(--latte); font-size: 9px; color: transparent; transition: all .3s; }
.bmw .gen-stage.active { color: var(--bink); } .bmw .gen-stage.active .gen-dot { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217, 87, 143, .22); }
.bmw .gen-stage.done { color: var(--mid); } .bmw .gen-stage.done .gen-dot { background: var(--accent); border-color: var(--accent); color: var(--cream); font-weight: 700; }
.bmw-note { font-size: 9.5px; color: var(--mid); } .bmw-note--stone { color: var(--stone); } .bmw-note--center { text-align: center; margin-top: 8px; }
.bmw-scroll { position: relative; z-index: 1; transition: transform 1.1s cubic-bezier(.4, 0, .2, 1); }
.bmw-hero { position: relative; border-radius: 14px; background: var(--paperb); padding: 10px; box-shadow: 0 10px 26px -14px rgba(74, 44, 26, .35); margin-bottom: 16px; }
.bmw-hero img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; transition: opacity .3s; }
.bmw-hero::after { content: ""; position: absolute; inset: 10px; border-radius: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='70'%3E%3Ctext x='0' y='40' font-family='DM Sans, sans-serif' font-size='13' fill='%234A2C1A' fill-opacity='.22' transform='rotate(-22 60 35)'%3Ebestmate%3C/text%3E%3C/svg%3E"); pointer-events: none; }
.bmw-pill { position: absolute; z-index: 2; left: 16px; top: 16px; background: var(--paperb); border-radius: 999px; padding: 4px 9px; font-size: 9.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(74, 44, 26, .15); }
.bmw-dots { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 4px; background: var(--paperb); border-radius: 999px; padding: 4px 6px; }
.bmw-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--bord); } .bmw-dots i.on { background: var(--bink); }
.bmw-stepk { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--label); margin: 14px 0 8px; }
.bmw-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.bmw-thumb { position: relative; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--paperb); box-shadow: 0 4px 14px rgba(74, 44, 26, .1); transition: border-color .2s, transform .15s; }
.bmw-thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.bmw-thumb i { position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--bink); color: var(--butter); font-size: 9px; font-style: normal; display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.bmw-thumb.is-sel { border-color: var(--bink); } .bmw-thumb.is-sel i { opacity: 1; }
.bmw-thumb-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 5px; text-align: center; font-size: 10px; color: var(--mid); }
.bmw-thumb-label.is-sel { font-weight: 700; color: var(--bink); }
.bmw-lock { font-size: 9.5px; color: var(--label); margin-top: 8px; }
.bmw-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bmw-formats div { border: 1.5px solid var(--bord); border-radius: 12px; padding: 10px 11px; display: flex; flex-direction: column; gap: 3px; }
.bmw-formats div.is-sel { border-color: var(--bink); background: var(--butter); }
.bmw-formats b { font-size: 12.5px; font-weight: 700; } .bmw-formats span { font-size: 9.5px; color: var(--mid); line-height: 1.35; } .bmw-formats strong { color: var(--bink); font-weight: 600; }
.bmw-alt { font-size: 10px; color: var(--mid); margin-top: 8px; } .bmw-alt u { color: var(--bink); font-weight: 600; }
.bmw-sizes { display: flex; flex-direction: column; gap: 6px; }
.bmw-sizes div { display: flex; align-items: center; gap: 9px; border: 1.5px solid var(--bord); border-radius: 12px; padding: 11px 12px; font-size: 12px; }
.bmw-sizes div.is-sel { border-color: var(--bink); background: var(--butter); }
.bmw-sizes i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--bord); flex: none; }
.bmw-sizes div.is-sel i { border: 4px solid var(--bink); }
.bmw-sizes b { font-weight: 700; flex: 1; } .bmw-sizes em { font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--paperb); border: 1px solid var(--bord); border-radius: 999px; padding: 2px 7px; } .bmw-sizes span { font-weight: 700; }
.bmw-add { margin-top: 12px; } .bmw-add.is-done { background: var(--ok); }
.bmw-finger { position: absolute; z-index: 9; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(74, 44, 26, .28); border: 1.5px solid rgba(74, 44, 26, .55); opacity: 0; pointer-events: none; transition: opacity .25s, left .5s cubic-bezier(.3, 0, .2, 1), top .5s cubic-bezier(.3, 0, .2, 1); }
.bmw-finger.is-on { opacity: 1; }
.bmw-finger.is-tap::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(74, 44, 26, .5); animation: bmwTap .6s ease-out .45s both; }
@keyframes bmwTap { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@media (max-width: 760px) { .bmw { max-width: 300px; } }
@media (prefers-reduced-motion: reduce) { .bmw-brush, .bmw-generate.is-ready, .bmw-spin { animation: none; } }

/* Callouts, one system (Nov 2): a rule on top, a small label under it, no fills, no side bars, no rounded boxes.
   Ink rules for structure, pen for design decisions, crimson for evidence. Same as the role/challenge/team bar. */
.decisions { gap: 0; border-top: 2px solid var(--ink); }
.decision, .decision:last-child { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 24px 0 26px; }
.dec .then-now { gap: 40px; align-items: start; }
.dec .then-now > div, .dec .then-now > div:first-child, .dec .then-now > div:last-child { background: transparent; box-shadow: none; border-radius: 0; padding: 18px 0 0; border-top: 2px solid var(--ink); }
.dec .then-now > div:last-child { border-top-color: var(--pen); }
.then-now .year, .dec .then-now > div:first-child .year { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.dec .then-now > div:last-child .year { color: var(--pen); }
.dec .then-now h3 { margin-top: 10px; }
.insight, .dec .insight { margin: 36px 0 0; padding: 18px 0 0; background: transparent; border: 0; border-top: 2px solid var(--crimson); border-radius: 0; }
.insight-tag { color: var(--crimson); font-size: 12.5px; margin-bottom: 12px; }
.insight p { max-width: 30ch; }
.insight p + p { max-width: 60ch; }
@media (max-width: 760px) { .insight, .dec .insight { padding: 16px 0 0; } .dec .then-now { gap: 28px; } }

/* How I work now (Nov 2): the one filled panel on the page, on purpose. Ink, cream type, the two workflows as numbered lists. */
.shift-band { background: var(--ink); color: var(--ground); margin-top: 48px; padding-block: clamp(72px, 12vh, 140px); }
.shift { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: clamp(32px, 5vw, 72px); color: var(--ground); }
.shift .kicker, main .shift .kicker { color: #C6CCF8 !important; margin: 0 0 22px; font-size: 13px; letter-spacing: 0.08em; }
.shift .h2 { margin: 0 0 18px; font-size: clamp(26px, 2.8vw, 34px); color: var(--ground); max-width: 20ch; }
.shift p { margin: 0 0 14px; font-size: 17px; line-height: 1.55; color: rgba(247, 245, 240, 0.78); }
.shift p:last-child { margin-bottom: 0; }
.shift-map { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 3vw, 40px); align-self: start; }
.shift-tag { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(247, 245, 240, 0.55); margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid rgba(247, 245, 240, 0.22); }
.shift-col--now .shift-tag { color: #AAB4F5; border-bottom-color: #AAB4F5; }
.shift-col ol { list-style: none; margin: 0; padding: 0; counter-reset: shift; }
.shift-col li { counter-increment: shift; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(247, 245, 240, 0.14); font-family: var(--serif); font-size: 18px; line-height: 1.3; color: var(--ground); }
.shift-col li::before { content: counter(shift, decimal-leading-zero); font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: rgba(247, 245, 240, 0.5); font-variant-numeric: tabular-nums; }
.shift-col--then li { color: rgba(247, 245, 240, 0.5); }
.shift-col--then li::before { color: rgba(247, 245, 240, 0.32); }
.shift-col--now li::before { color: #AAB4F5; }
.shift-col--now li.is-key { color: #fff; font-weight: 500; }
@media (max-width: 900px) { .shift { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .shift-band { padding-block: 48px; margin-top: 48px; } .shift-map { grid-template-columns: 1fr; gap: 24px; } .shift p { font-size: 16px; } .shift-col li { font-size: 17px; } }
/* Challenge list (Nov 2): no numbers, the takeaway leads. */
.decision .num { display: none; }
.decision .num + div { margin-top: 0; }
/* Decision headers (Nov 2): no big numerals, the eyebrow already counts. */
.dec-num { display: none; }
/* EO Care page (Nov 2): the product up top, the data led by one chart with the rest quieter. */
.cs-visual { margin: 8px auto 0; }
.cs-stage { display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 2.5vw, 32px); padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px) 0; background: #ECE6DA; border-radius: var(--r-lg); overflow: hidden; }
.cs-stage .screen-phone { width: 26%; max-width: 280px; border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0; box-shadow: 0 -20px 50px -24px rgba(20, 28, 46, 0.35); }
.cs-stage .screen-phone.is-lead { width: 30%; max-width: 320px; }
.cs-visual figcaption { margin-top: 14px; }
@media (max-width: 760px) { .cs-stage { padding: 24px 16px 0; gap: 10px; } .cs-stage .screen-phone { width: 31%; } .cs-stage .screen-phone.is-lead { width: 34%; } }
.result-panel { display: block; }
.result-more { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.result-more-label { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.result-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; }
.result-more-grid b { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 6px; }
.result-more-grid span { display: block; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 40em; }
@media (max-width: 640px) { .result-more-grid { grid-template-columns: 1fr; } }

/* EO Care page, visual refinement (Nov 2): bigger hero, three gallery shapes, a one-statement interlude, single-digit markers, stricter text sizes. */
body.case { --case: "" !important; }
.cs-visual { max-width: 1320px; padding-inline: var(--gutter, 24px); }
.cs-stage { gap: clamp(16px, 2.5vw, 36px); padding: clamp(32px, 4.5vw, 64px) clamp(16px, 3vw, 48px) 0; }
.cs-stage .screen-phone { width: 29%; max-width: 340px; }
.cs-stage .screen-phone.is-lead { width: 35%; max-width: 410px; }
@media (max-width: 760px) { .cs-stage .screen-phone { width: 31%; } .cs-stage .screen-phone.is-lead { width: 36%; } }
.loop-label { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 40px 0 -14px; }
.loop-strip li { padding: 24px 22px 26px; }
.loop-strip h4 { font-size: 24px; margin: 0 0 8px; }
.loop-strip p { font-size: 15px; }
.gal { margin-top: 28px; }
.gal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.gal--lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 11fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.gal--lead .gal-head { grid-column: 1 / -1; margin-bottom: 0; }
.gal-lead { margin: 0; }
.gal-lead .screen-phone { width: 100%; max-width: 420px; }
.gal-support { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.gal-support figure { margin: 0; }
.gal-support .screen-phone { width: 100%; }
.gal--pair .gal-stage { display: flex; justify-content: center; align-items: flex-end; gap: clamp(20px, 4vw, 56px); padding: clamp(32px, 4.5vw, 64px) clamp(16px, 4vw, 56px) 0; background: #ECE6DA; border-radius: var(--r-lg); overflow: hidden; max-height: 640px; }
.gal--pair .gal-stage .screen-phone { width: 38%; max-width: 400px; border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0; box-shadow: 0 -20px 50px -24px rgba(20, 28, 46, 0.35); }
.gal-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; margin-top: 14px; }
.gal-caps p { margin: 0; }
main .gal figcaption, main .gal-caps p, main .lane-item figcaption, main .screen-pair figcaption, main .cs-visual figcaption { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-3); margin-top: 12px; }
main .gal figcaption .step, main .gal-caps .step { margin-right: 8px; vertical-align: 1px; }
@media (max-width: 760px) {
  .gal--lead { grid-template-columns: 1fr; }
  .gal-lead .screen-phone { max-width: 300px; }
  .gal-support { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .gal--pair .gal-stage .screen-phone { width: 44%; }
  .gal-caps { grid-template-columns: 1fr; }
}
.shift--statement { display: block; max-width: 1120px; }
.shift--statement .statement-band { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.12; letter-spacing: -0.02em; color: var(--ground); max-width: 26ch; margin: 0; }
.shift--statement .shift-line { margin: 26px 0 0; font-family: var(--sans); font-size: 17px; line-height: 1.5; color: rgba(247, 245, 240, 0.65); max-width: 44em; }
.dec .then-now p, main .dec .then-now p { font-size: 18px; color: var(--ink); }
.section-head .muted, main .section-head .muted { color: var(--ink-2); }
/* EO Care 360 page (Nov 2): dashboard hero, diagrams with distinct roles, decision blocks with a UI detail each. */
.cs-visual--wide .cs-stage--desk { padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 64px) 0; align-items: flex-end; }
.cs-stage--desk .screen-browser { width: 100%; max-width: 1180px; border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0; box-shadow: 0 -20px 50px -24px rgba(20, 28, 46, 0.35); }
.diagram--stage { margin: 32px 0 0; padding: clamp(24px, 4vw, 48px); background: var(--accent-soft, #DCE2FA); border-radius: var(--r-lg); }
.diagram--stage .diagram-img { display: block; width: 100%; max-width: 900px; margin: 0 auto; height: auto; border-radius: 6px; }
.diagram--centerpiece .diagram-img { max-width: 1040px; }
.diagram--stage figcaption { margin-top: 18px; text-align: center; max-width: 60ch; margin-inline: auto; }
.calls { display: flex; flex-direction: column; gap: 0; border-top: 2px solid var(--ink); }
.call { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: 40px 0; border-bottom: 1px solid var(--line); }
.call-copy .dec-eyebrow { margin: 0 0 10px; color: var(--pen); }
main .call-copy h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 14px; }
.call-copy p:not(.dec-eyebrow) { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--ink); margin: 0; max-width: 46ch; }
.call-visual { margin: 0; padding: clamp(16px, 2.5vw, 28px); background: var(--accent-soft, #DCE2FA); border-radius: var(--r-lg); }
.call-visual .call-img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid rgba(20, 28, 46, 0.14); background: #fff; }
.call-visual--phones { display: flex; justify-content: center; gap: clamp(12px, 2vw, 24px); flex-wrap: wrap; padding-bottom: 0; overflow: hidden; max-height: 460px; align-items: flex-start; }
.call-visual--phones .screen-phone { width: 38%; max-width: 220px; border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0; }
.call-visual--phones figcaption { flex-basis: 100%; order: -1; margin: 0 0 14px; }
main .call-visual figcaption { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-2); margin-top: 12px; }
@media (max-width: 860px) { .call { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; } }
.outcome-pair ul { padding-left: 18px; margin: 12px 0 0; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink); display: flex; flex-direction: column; gap: 10px; }
/* Numbering on the case pages (Nov 2): the same rule as the homepage. A number appears only where it carries
   sequence. Figure steps are understated text; the chapter nav keeps its blue circles (Charlotte's call);
   section eyebrows and lane tabs lose theirs. */
main > section:has(.kicker) > .section-head > .kicker::before, main > section:has(.kicker) > .kicker::before { content: none !important; display: none !important; }
body.case .kicker { display: block; }
.step, .lane .step, main .gal figcaption .step, main .gal-caps .step, html[data-bg="deepsea"] body.case .lane .step, html[data-bg="crimson"] body.case .lane .step {
  display: inline; width: auto; height: auto; border-radius: 0; background: transparent; color: var(--ink-2); font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; margin-right: 8px; vertical-align: 0; top: 0; }
.step::after { content: "."; }
.tab-n { display: none; }
/* Hero and pair stages capped (Nov 2): phones stop growing past a readable size, and the stage crops at a fixed height on wide screens. */
.cs-stage { max-height: 560px; }
.cs-stage .screen-phone { max-width: 260px; }
.cs-stage .screen-phone.is-lead { max-width: 310px; }
.gal--pair .gal-stage { max-height: 520px; }
.gal--pair .gal-stage .screen-phone { max-width: 320px; }
.cs-stage { gap: clamp(20px, 3.2vw, 64px); }

/* EO Care polish (Nov 2): room under the lede, a balanced first gallery, the loop as a list not cards,
   neutral rules where color carried no meaning, and a built/observed/changed row in Validation. */
.cs-visual { margin-top: 36px; }
.gal--lead { align-items: start; }
.gal-lead { padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) 0; background: #ECE6DA; border-radius: var(--r-lg); overflow: hidden; max-height: 470px; display: flex; justify-content: center; align-items: flex-start; }
.gal-lead .screen-phone { width: 100%; max-width: 300px; border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0; box-shadow: 0 -20px 50px -24px rgba(20, 28, 46, 0.35); }
.gal-lead figcaption { display: none; }
.gal--lead .gal-lead-cap { grid-column: 1; margin: 12px 0 0; }
.gal-support .screen-phone { max-width: 200px; }
.loop-strip, .llm-flow.loop-strip { gap: 0 32px; margin-top: 24px; }
.loop-strip li { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 0 0; }
.loop-strip li + li::before { display: none; }
.loop-strip h4 { font-size: 22px; margin-bottom: 6px; }
.loop-label { margin-bottom: 0; }
.stat-band, .gs-fact { border-top-color: var(--ink); border-top-width: 2px; }
.case-cta { border-top-color: var(--ink); }
.evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 36px; margin: 8px 0 36px; }
.evidence > div { border-top: 1px solid var(--line); padding-top: 14px; }
.evidence .label { margin: 0 0 8px; }
.evidence p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink); }
@media (max-width: 760px) { .evidence { grid-template-columns: 1fr; gap: 18px; } .gal-lead { max-height: none; } }
.shift--statement .shift-line { color: rgba(247, 245, 240, 0.78); }
main .gal-lead-cap { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-3); margin: 12px 0 0; }
main .gal-lead-cap .step { margin-right: 8px; }
/* Closing CTA (Nov 2): plain serif in ink, regular weight, like every other statement on the site. */
.case-end .case-cta { font-weight: 400; color: var(--ink); }
.case-end .case-cta p { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.case-end .case-cta .case-cta-sub { font-family: var(--sans); font-weight: 400; color: var(--ink-3); }
/* Before/after pair (Nov 2): always two columns, like the galleries, at every width. */
.screen-pair { gap: clamp(16px, 4vw, 48px); justify-content: center; flex-wrap: nowrap; }
.screen-pair figure { flex: 1 1 0; max-width: 320px; min-width: 0; }
.screen-pair .screen-phone { width: 100%; }
/* Nov 3: hero visuals sit on the same 1120 column as the case-page text, and the dashboard hero shows its top edge instead of cropping it. */
.cs-visual { max-width: 1120px; }
.cs-stage, .cs-visual--wide .cs-stage--desk { align-items: flex-start; }
.gal--pair .gal-stage { align-items: flex-start; }
/* Nov 3: when the section nav sits in the left margin, sideways strips stop short of it instead of scrolling underneath. */
@media (min-width: 1500px) {
  .lane-scroll { margin-left: calc(50% - 50vw + 248px); padding-left: calc(50vw - 50% - 248px); scroll-padding-left: calc(50vw - 50% - 248px); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px); mask-image: linear-gradient(90deg, transparent 0, #000 40px); }
}
/* Nov 3: care plan hero shows the product's four versions, oldest to newest; today's is the largest. */
.evo .evo-stage { display: flex; align-items: flex-end; justify-content: center; gap: clamp(16px, 2.4vw, 32px); padding: clamp(36px, 5vw, 64px) clamp(16px, 3vw, 48px) 0; background: #ECE6DA; border-radius: var(--r-lg); overflow: hidden; }
.evo-era { flex: none; display: flex; flex-direction: column; align-items: center; width: clamp(130px, 15vw, 186px); }
.evo-era.is-now { width: clamp(190px, 22vw, 272px); }
.evo-shot { display: block; width: 100%; height: auto; aspect-ratio: 375 / 600; object-fit: cover; object-position: top; border-radius: 12px 12px 0 0; box-shadow: 0 -20px 50px -24px rgba(20, 28, 46, 0.35); }
.evo-era:not(.is-now) .evo-shot { filter: saturate(0.8); opacity: 0.94; }
.evo-era.is-now .evo-shot { aspect-ratio: 390 / 720; }
.evo-label { order: 2; margin: 0; padding: 14px 0 22px; width: 100%; text-align: center; font-family: var(--sans); font-size: 13px; line-height: 1.4; color: var(--ink-3); background: #ECE6DA; }
.evo-label b { display: block; font-weight: 500; font-size: 14px; color: var(--ink); }
.evo .evo-era { position: relative; }
.evo figcaption { margin-top: 14px; }
@media (max-width: 760px) {
  .evo .evo-stage { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 18px 14px; padding: 22px 16px 6px; overflow: visible; }
  .evo-era, .evo-era.is-now { width: auto; }
  .evo-shot, .evo-era.is-now .evo-shot { aspect-ratio: 375 / 560; border-radius: 10px; box-shadow: 0 10px 28px -18px rgba(20, 28, 46, 0.4); }
  .evo-label { padding: 10px 0 8px; font-size: 12.5px; background: none; }
  .evo-label b { font-size: 13.5px; }
}