/*
 * HLISTIX Israel — landing styles (RTL-first, mobile-first).
 * Design tokens mirror the live English site (templates/public/base_public.html):
 * Clinical Deep Blue #1F3A5F, Integrative Teal #2FA4A9, Intelligent Sage #8FB8A9,
 * Confidence Indigo CTA #3B5BDB, warm clinical backgrounds, DM Sans headings.
 * Hebrew glyphs fall back to Heebo (DM Sans / Inter have no Hebrew).
 * Logical properties throughout (inline-start = right in RTL).
 */
/* Self-hosted OFL fonts (Heebo, DM Sans — licences in ../fonts/OFL-*.txt). Variable files, one per script subset;
   same families/weights/unicode-ranges as Google Fonts, so the design is unchanged and no third-party CSS blocks rendering. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../fonts/dmsans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../fonts/dmsans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/heebo-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/heebo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/heebo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Metric-matched fallback: while Heebo loads, Arial is scaled so Hebrew text takes the same width
   (ratios measured on this page's own text in Chrome) — the font swap no longer re-wraps lines (CLS). */
@font-face { font-family: 'Heebo Fallback'; font-weight: 300 500; src: local('Arial'), local('ArialMT'); size-adjust: 104%; }
@font-face { font-family: 'Heebo Fallback'; font-weight: 600 700; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 102%; }
@font-face { font-family: 'Heebo Fallback'; font-weight: 800 900; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 110%; }

:root {
  --bg-main: #FAF9F6;          /* V2 warm off-white */
  --bg-card: #FFFFFF;
  --bg-warm-gray: #EBE7E2;
  --bg-stone: #E5E0DA;
  --bg-neutral: #F7F8FB;
  --bg-soft-blue: #EEF3FB;
  --bg-lilac: #F5EFFA;
  --border-soft: #E3E7EF;
  --color-primary: #203E6C;     /* V2 navy */
  --color-primary-deep: #172E52;
  --color-deep: #203F70;        /* V2 deep-blue sections */
  --color-contrast: #1B355E;
  --color-secondary: #39B3A3;   /* V2 clinical teal */
  --color-secondary-text: #1C7A6E;   /* teal darkened for AA text */
  --color-accent: #8FB8A9;
  --color-cta: #4867F2;         /* V2 action blue */
  --color-cta-hover: #3552D8;
  --text-primary: #1C1E21;
  --text-secondary: #5B6270;         /* site gray darkened for AA on warm bg */
  --text-nav: #2D3748;
  --focus: #4867F2;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 8px rgba(31, 58, 95, .04);
  --shadow-md: 0 8px 24px rgba(31, 58, 95, .08);
  --shadow-lg: 0 20px 60px rgba(31, 58, 95, .16);
  --font-head: 'DM Sans', 'Heebo', 'Heebo Fallback', system-ui, sans-serif;
  --font-body: 'Heebo', 'Heebo Fallback', 'Inter', system-ui, sans-serif;
  --font-h1: clamp(2rem, 5vw, 3.25rem);
  --font-h2: clamp(1.625rem, 4vw, 2.25rem);
  --font-h3: clamp(1.25rem, 3vw, 1.5rem);
  --gutter: 16px;
  --maxw: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 768px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.flow-open { overflow: hidden; }
body {
  margin: 0; background: var(--bg-main); color: var(--text-primary);
  font-family: var(--font-body); font-size: 1.125rem; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-inline-size: 100%; }
a { color: var(--color-cta); text-underline-offset: 3px; }
a:hover { color: var(--color-cta-hover); }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--color-primary); margin: 0 0 .75rem; line-height: 1.2; }
h1 { font-size: var(--font-h1); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
h2 { font-size: var(--font-h2); font-weight: 700; }
h3 { font-size: var(--font-h3); font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }
p { margin: 0 0 1rem; }
strong { font-weight: 600; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; background: var(--color-primary); color: #fff; padding: .6rem 1rem; border-radius: 8px; z-index: 100; }
.skip:focus { inset-block-start: 12px; color: #fff; }
.hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
[lang="en"], .ltr { direction: ltr; unicode-bidi: isolate; }

.container { max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-inline-size: 760px; margin-inline: auto; }

/* ── Buttons (match English .btn-primary / .btn-outline-primary) ─────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 48px; padding: .8rem 1.6rem; border-radius: 8px; border: 1.5px solid transparent;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background-color .2s, box-shadow .25s, transform .2s, color .2s, border-color .2s;
}
.btn--primary { background: var(--color-cta); color: #fff; box-shadow: 0 2px 8px rgba(59, 91, 219, .2); }
.btn--primary:hover { background: var(--color-cta-hover); color: #fff; box-shadow: 0 6px 20px rgba(59, 91, 219, .35); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: #fff; }
.btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--border-soft); }
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn--light { background: #fff; color: var(--color-primary); }
.btn--light:hover { background: var(--bg-main); color: var(--color-primary); }
.btn--lg { min-block-size: 56px; padding: 1rem 2rem; font-size: 1.0625rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ── Header (mirrors English navbar) ─────────────────────────────────── */
.site-head { position: sticky; inset-block-start: 0; z-index: 40; background: var(--bg-main); border-block-end: 1px solid var(--border-soft); }
.site-head__in { display: flex; align-items: center; gap: 1rem; min-block-size: 72px; }
.brand { font-family: 'DM Sans', var(--font-head); font-weight: 700; font-size: 1.6rem; letter-spacing: .02em; color: var(--color-primary); text-decoration: none; direction: ltr; }
.brand:hover { color: var(--color-primary); }
.nav { display: none; }
.nav ul { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }
.nav a { display: block; padding: .5rem .9rem; color: var(--text-nav); text-decoration: none; font-weight: 500; font-size: 1rem; border-radius: 6px; }
.nav a:hover { color: var(--color-cta); }
.head-actions { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; }
.head-actions .quiet { color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: .95rem; padding: .5rem .6rem; }
.head-actions .quiet:hover { color: var(--color-primary); }
.head-actions .btn { min-block-size: 42px; padding: .55rem 1.1rem; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border: 1px solid var(--border-soft); background: #fff; border-radius: 8px; cursor: pointer; color: var(--color-primary); }
.head-actions .hide-sm { display: none; }
.mobile-nav { border-block-start: 1px solid var(--border-soft); padding-block: .5rem 1rem; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav a { display: block; padding: .8rem 0; color: var(--text-nav); text-decoration: none; font-weight: 500; border-block-end: 1px solid var(--border-soft); }
@media (min-width: 1024px) {
  .nav { display: block; margin-inline-start: 1.5rem; }
  .menu-btn, .mobile-nav { display: none !important; }
  .head-actions .hide-sm { display: inline-flex; }
}

/* ── Sections ────────────────────────────────────────────────────────── */
.sec { padding-block: 3.5rem; }
@media (min-width: 992px) { .sec { padding-block: 5.5rem; } }
.sec--white { background: var(--bg-card); }
.sec--neutral { background: var(--bg-neutral); }
.sec--warm { background: var(--bg-warm-gray); }
.sec--stone { background: var(--bg-stone); }
.sec--dark { background: var(--color-primary); color: rgba(255, 255, 255, .88); }
.sec--deep { background: radial-gradient(120% 90% at 30% 0%, #24466f 0%, var(--color-primary) 45%, var(--color-primary-deep) 100%); color: rgba(255, 255, 255, .88); }
.sec--dark h2, .sec--dark h3, .sec--deep h2, .sec--deep h3, .sec--deep h4 { color: #fff; }
.label { display: inline-block; font-size: .875rem; font-weight: 600; letter-spacing: .04em; color: var(--color-secondary-text); margin-block-end: .75rem; }
.sec--deep .label, .sec--dark .label { color: var(--color-accent); }
.lead { font-size: 1.1875rem; color: var(--text-secondary); line-height: 1.7; }
.muted { color: var(--text-secondary); }
.center { text-align: center; }
.sec-head { max-inline-size: 760px; margin-block-end: 2.5rem; }
.sec-head.center { margin-inline: auto; }
.stack > * + * { margin-block-start: .35rem; }
.cadence p { margin: 0 0 .35rem; }
.statement { font-family: var(--font-head); font-weight: 700; color: var(--color-primary); font-size: 1.25rem; line-height: 1.5; }
.statement span { display: block; }
.sec--deep .statement, .sec--dark .statement { color: #fff; }
.divider { inline-size: 60px; block-size: 3px; background: var(--color-secondary); border-radius: 2px; margin-block: 1.5rem; }
.center .divider, .divider.center { margin-inline: auto; }
.card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.grid-2 { display: grid; gap: 2rem; }
@media (min-width: 992px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .grid-2--top { align-items: start; } }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { padding-block: 2.5rem 3.5rem; background: linear-gradient(180deg, var(--bg-main) 0%, var(--bg-neutral) 100%); overflow: hidden; }
@media (min-width: 992px) { .hero { padding-block: 4.5rem 5.5rem; } }
.hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .hero__grid { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; } }
.hero h1 { margin-block-end: 1rem; }
.hero__sub { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--color-primary); line-height: 1.45; margin-block-end: 1.25rem; }
.hero__body { color: var(--text-secondary); font-size: 1.0625rem; }
.hero .statement { font-size: 1.125rem; margin-block: 1.25rem 1.75rem; padding-inline-start: 1rem; border-inline-start: 3px solid var(--color-secondary); }

/* Hero visual: sources → HLISTIX → practitioner decision */
.hx-viz { position: relative; display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .hx-viz { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .8fr); align-items: center; gap: 1.25rem; } }
.hx-sources { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 560px) { .hx-sources { flex-direction: column; flex-wrap: nowrap; } }
.hx-src { background: #fff; border: 1px solid var(--border-soft); border-radius: 10px; padding: .55rem .75rem; box-shadow: var(--shadow-sm); font-size: .875rem; line-height: 1.3; display: flex; gap: .5rem; align-items: center; flex: 1 1 auto; }
.hx-src i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--c, var(--color-secondary)); flex: none; }
.hx-src b { display: block; color: var(--color-primary); font-weight: 600; font-size: .9rem; }
.hx-src small { color: var(--text-secondary); font-size: .75rem; display: block; }
.hx-panel { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border-soft); overflow: hidden; }
.hx-panel__bar { background: var(--color-primary); color: #fff; padding: .6rem .9rem; font-size: .8rem; display: flex; gap: .4rem; align-items: center; }
.hx-panel__bar span { inline-size: 8px; block-size: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.hx-panel__bar b { margin-inline-start: .4rem; font-family: 'DM Sans'; letter-spacing: .02em; direction: ltr; }
.hx-panel__body { padding: .9rem; display: grid; gap: .55rem; }
.hx-row { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--text-primary); padding: .45rem .6rem; border-radius: 8px; background: var(--bg-neutral); border: 1px solid transparent; }
.hx-row em { font-style: normal; margin-inline-start: auto; font-size: .7rem; color: var(--color-secondary-text); background: #E7F4F4; padding: .1rem .45rem; border-radius: 99px; white-space: nowrap; }
.hx-decision { background: #fff; border: 1.5px solid var(--color-primary); border-radius: var(--radius); padding: .9rem; text-align: center; box-shadow: var(--shadow-md); }
.hx-decision svg { inline-size: 28px; block-size: 28px; color: var(--color-secondary); }
.hx-decision b { display: block; color: var(--color-primary); font-family: var(--font-head); font-size: 1rem; }
.hx-decision small { color: var(--text-secondary); font-size: .8rem; }
.hx-src, .hx-panel { position: relative; }
@media (min-width: 560px) {
  .hx-src::after, .hx-panel::after {
    content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 100%; inline-size: 1.25rem; block-size: 2px;
    background: repeating-linear-gradient(to left, var(--color-accent) 0 4px, transparent 4px 8px); background-size: 16px 2px;
  }
}
@media (max-width: 559px) {
  .hx-panel, .hx-decision { margin-block-start: .5rem; }
  .hx-panel::before, .hx-decision::before { content: ''; position: absolute; inset-block-start: -1.1rem; inset-inline-start: 50%; block-size: .9rem; border-inline-start: 2px dashed var(--color-accent); }
  .hx-decision { position: relative; }
}

@media (prefers-reduced-motion: no-preference) {
  .hx-src::after, .hx-panel::after { animation: flowline 1.2s linear infinite; }
  .hx-src { animation: drift 6s var(--ease) infinite; animation-delay: calc(var(--i) * .6s); }
  .hx-row { animation: glow 7.5s var(--ease) infinite; animation-delay: calc(var(--i) * 1.25s); }
  .hx-decision { animation: settle 7.5s var(--ease) infinite; }
}
@keyframes dash { to { stroke-dashoffset: 20; } }
@keyframes flowline { to { background-position: -16px 0; } }
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@keyframes glow { 0%, 12%, 100% { background: var(--bg-neutral); border-color: transparent; } 4%, 9% { background: #EEF2FF; border-color: #C7D2FE; } }
@keyframes settle { 0%, 78%, 100% { box-shadow: var(--shadow-md); } 86% { box-shadow: 0 0 0 6px rgba(47, 164, 169, .18), var(--shadow-md); } }

/* ── Fragmentation (scroll convergence) ──────────────────────────────── */
.frag { --p: 0; }
.frag__grid { display: grid; gap: 2rem; }
@media (min-width: 992px) { .frag__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } .frag__stage { position: sticky; inset-block-start: 110px; } }
.frag__stage { container-type: size; position: relative; block-size: 360px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border-soft); overflow: hidden; box-shadow: var(--shadow-sm); }
@media (min-width: 992px) { .frag__stage { block-size: 460px; } }
.frag__chip {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  padding: .35rem .75rem; background: var(--bg-neutral); border: 1px solid var(--border-soft); border-radius: 99px;
  font-size: .85rem; font-weight: 500; color: var(--text-nav); white-space: nowrap;
  transform: translate(calc(50% + var(--x) + (var(--tx) - var(--x)) * var(--p)), calc(-50% + var(--y) + (var(--ty) - var(--y)) * var(--p))) rotate(calc(var(--r) * (1 - var(--p))));
  transition: transform .12s linear;
}
.frag__core {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(50%, -50%) scale(calc(.6 + .4 * var(--p)));
  opacity: calc(.15 + .85 * var(--p)); background: var(--color-primary); color: #fff; border-radius: 14px; padding: .8rem 1.1rem;
  font-family: 'DM Sans'; font-weight: 700; letter-spacing: .03em; box-shadow: var(--shadow-lg); direction: ltr; text-align: center; line-height: 1.2;
}
.frag__core small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .7rem; opacity: .8; letter-spacing: 0; direction: rtl; }
.frag__caption { position: absolute; inset-block-end: .75rem; inset-inline: 0; text-align: center; font-size: .85rem; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .frag { --p: 1 !important; } .frag__chip { transition: none; } }
.frag__list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.frag__list li { background: #fff; border: 1px solid var(--border-soft); border-radius: 99px; padding: .2rem .7rem; font-size: .95rem; }
.big-q { font-family: var(--font-head); color: var(--color-primary); font-weight: 700; }
.big-q--1 { font-size: 1.5rem; margin: .5rem 0 .25rem; }
.big-q--2 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin: 0 0 1.25rem; }

/* ── Audit entry ─────────────────────────────────────────────────────── */
.audit-entry { display: grid; gap: 2rem; }
@media (min-width: 992px) { .audit-entry { grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; } }
.tags { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.tags li { background: #fff; border: 1px solid var(--border-soft); border-radius: 99px; padding: .25rem .8rem; font-size: .95rem; color: var(--text-nav); }
.reassure { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; gap: .35rem; }
.reassure li { position: relative; padding-inline-start: 1.6rem; font-weight: 600; color: var(--color-primary); }
.reassure li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--color-secondary-text); font-weight: 700; }
.audit-preview { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 1.25rem; }
.audit-preview__journey { display: flex; justify-content: space-between; gap: .25rem; font-size: .72rem; color: var(--text-secondary); margin-block-end: .4rem; }
.audit-preview__track { block-size: 6px; border-radius: 6px; background: var(--bg-stone); overflow: hidden; margin-block-end: 1.25rem; }
.audit-preview__track span { display: block; block-size: 100%; inline-size: 38%; background: linear-gradient(90deg, var(--color-cta), var(--color-secondary)); border-radius: 6px; }
.audit-preview__q { font-family: var(--font-head); font-weight: 600; color: var(--color-primary); margin-block-end: .75rem; line-height: 1.4; }
.audit-preview__opt { border: 1.5px solid var(--border-soft); border-radius: 10px; padding: .6rem .85rem; margin-block-end: .45rem; font-size: .95rem; background: var(--bg-neutral); }
.audit-preview__opt.is-on { border-color: var(--color-cta); background: #EEF2FF; color: var(--color-primary); font-weight: 600; }

/* ── Workflow ────────────────────────────────────────────────────────── */
.tabs { display: inline-flex; background: #fff; border: 1px solid var(--border-soft); border-radius: 10px; padding: 4px; gap: 4px; margin-block-end: 2rem; }
.tabs button { border: 0; background: transparent; padding: .6rem 1.2rem; border-radius: 7px; font: inherit; font-weight: 600; font-size: 1rem; color: var(--text-secondary); cursor: pointer; min-block-size: 44px; }
.tabs button[aria-selected="true"] { background: var(--color-primary); color: #fff; }
.lanes { display: grid; gap: 1rem; }
.lane { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.lane h3 { font-size: 1.05rem; margin-block-end: .6rem; }
.lane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.lane li { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; }
.lane li span { background: var(--bg-neutral); border: 1px dashed #CFC9C1; border-radius: 8px; padding: .25rem .6rem; }
.lane li + li::before { content: '←'; color: #B3ACA3; font-size: .9rem; }
.lanes-coda { margin-block-start: 1.5rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; counter-reset: s; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.1rem 1.2rem; position: relative; transition: border-color .3s, box-shadow .3s, transform .3s; }
.step__n { font-family: 'DM Sans'; font-weight: 700; font-size: .85rem; color: var(--color-secondary-text); background: rgba(47, 164, 169, .12); border-radius: 99px; padding: .15rem .6rem; display: inline-block; margin-block-end: .5rem; }
.step h3 { font-size: 1.1rem; margin-block-end: .35rem; }
.step p { font-size: .975rem; color: var(--text-secondary); margin: 0; }
.step.is-highlight { border-color: var(--color-cta); box-shadow: 0 0 0 3px rgba(59, 91, 219, .15), var(--shadow-md); }
.step.is-highlight .step__n { background: var(--color-cta); color: #fff; }
.for-you { display: none; margin-block-end: 1.5rem; background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: var(--radius); padding: 1rem 1.25rem; color: var(--color-primary); }
.has-audit .for-you { display: block; }

/* ── Eight research assistants (deep blue) ───────────────────────────── */
.assist { display: grid; gap: 2.5rem; }
@media (min-width: 992px) { .assist { grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; } }
.orbit { position: relative; aspect-ratio: 1 / 1; max-inline-size: 520px; margin-inline: auto; inline-size: 100%; }
.orbit svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.orbit__line { stroke: rgba(143, 184, 169, .45); stroke-width: 1.2; fill: none; stroke-dasharray: 3 7; }
.orbit__pulse { fill: var(--color-accent); }
.orbit__case { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(50%, -50%); background: #fff; color: var(--color-primary); border-radius: 14px; padding: .9rem 1rem; inline-size: 44%; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.orbit__case b { display: block; font-family: var(--font-head); font-size: 1rem; }
.orbit__case small { display: block; color: var(--text-secondary); font-size: .75rem; line-height: 1.4; }
.orbit__node { position: absolute; transform: translate(-50%, -50%); inline-size: 34%; text-align: center; font-size: .82rem; line-height: 1.3; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: .45rem .5rem; backdrop-filter: blur(4px); }
.assist-list { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: .5rem; }
.assist-list li { padding: .6rem .9rem; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); font-weight: 600; color: #fff; }
.assist .big-q { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin-block: 1.5rem 1rem; }
@media (prefers-reduced-motion: no-preference) { .orbit__line { animation: dash 3s linear infinite reverse; } }
@media (max-width: 480px) { .orbit__node { font-size: .72rem; inline-size: 38%; padding: .35rem .35rem; } }

/* ── Clinic management ───────────────────────────────────────────────── */
.layers { display: grid; gap: 1rem; align-items: stretch; margin-block: 2rem; }
@media (min-width: 860px) { .layers { grid-template-columns: 1fr auto 1.25fr; } }
.layer { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.25rem 1.4rem; }
.layer--hx { border: 1.5px solid var(--color-primary); box-shadow: var(--shadow-md); }
.layer h3 { font-size: 1.1rem; }
.layer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.layer li { font-size: .9rem; padding: .2rem .65rem; border-radius: 99px; background: var(--bg-neutral); border: 1px solid var(--border-soft); }
.layer--hx li { background: #EEF2FF; border-color: #C7D2FE; color: var(--color-primary); }
.layers__link { display: flex; align-items: center; justify-content: center; color: var(--color-secondary-text); font-size: .85rem; font-weight: 600; gap: .35rem; }
.layers__link::before, .layers__link::after { content: ''; inline-size: 24px; block-size: 2px; background: var(--color-accent); }
.two-cases { display: grid; gap: 1.25rem; }
@media (min-width: 992px) { .two-cases { grid-template-columns: 1fr 1fr; } }
.case-card { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.75rem; }
.case-card h3 { font-size: 1.35rem; }
.clinical-list { columns: 2; column-gap: 1.5rem; padding-inline-start: 1.1rem; margin: 0 0 1rem; color: var(--text-secondary); }
.clinical-list li { break-inside: avoid; }

/* ── Why now (editorial) ─────────────────────────────────────────────── */
.editorial { font-size: 1.0625rem; }
.timeline { list-style: none; margin: 2rem 0; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; inset-block: .5rem; inset-inline-start: 7px; inline-size: 2px; background: var(--border-soft); }
.timeline li { position: relative; padding-inline-start: 2.25rem; padding-block-end: 1.5rem; }
.timeline li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .35rem; inline-size: 16px; block-size: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--color-primary); }
.timeline li:last-child::before { background: var(--color-secondary); border-color: var(--color-secondary); }
.timeline time, .timeline .when { display: block; font-family: 'DM Sans', var(--font-head); font-weight: 700; color: var(--color-primary); font-size: 1.05rem; }
.timeline p { margin: 0; color: var(--text-secondary); font-size: 1rem; }
.src { font-size: .9rem; color: var(--text-secondary); }
.src a { font-weight: 500; }
.sources-box { border-block-start: 1px solid var(--border-soft); margin-block-start: 2rem; padding-block-start: 1.25rem; }
.sources-box h3 { font-size: 1rem; }
.sources-box ol { padding-inline-start: 1.2rem; margin: 0; font-size: .9rem; color: var(--text-secondary); }
.sources-box li { margin-block-end: .4rem; }
.fine { font-size: .85rem; color: var(--text-secondary); }
.grow-list { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; gap: .3rem; }
.grow-list li { font-weight: 600; color: var(--color-primary); }

/* ── Pricing ─────────────────────────────────────────────────────────── */
.price-box { background: #fff; border: 1px solid var(--border-soft); border-radius: 20px; box-shadow: var(--shadow-md); padding: 2rem 1.25rem; max-inline-size: 880px; margin-inline: auto; }
@media (min-width: 768px) { .price-box { padding: 3rem; } }
.plans { display: grid; gap: 1rem; margin-block: 1.75rem; }
@media (min-width: 720px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { border: 1.5px solid var(--border-soft); border-radius: var(--radius); padding: 1.4rem; }
.plan--annual { border-color: var(--color-primary); }
.plan__price { font-family: 'DM Sans', var(--font-head); font-weight: 700; color: var(--color-primary); font-size: 2.4rem; line-height: 1.1; margin: 0 0 .25rem; }
.plan__price small { font-size: 1rem; font-weight: 500; color: var(--text-secondary); }
.plan p { margin: 0; color: var(--text-secondary); font-size: .975rem; }
.lock { border-inline-start: 3px solid var(--color-secondary); padding-inline-start: 1rem; margin-block: 1.25rem; }

/* ── Spotlight ───────────────────────────────────────────────────────── */
.fit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.fit-list li { background: #fff; border: 1px solid var(--border-soft); border-radius: 10px; padding: .75rem 1rem; }
.receive { counter-reset: r; }
.pill-note { display: inline-block; background: #fff; border: 1px solid var(--border-soft); border-radius: 99px; padding: .35rem .9rem; font-weight: 600; color: var(--color-primary); font-size: .95rem; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq details { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius); margin-block-end: .6rem; }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.25rem; font-weight: 600; color: var(--text-primary); display: flex; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-inline-start: auto; font-size: 1.4rem; color: var(--color-cta); line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details[open] summary { color: var(--color-cta); }
.faq .ans { padding: 0 1.25rem 1.1rem; color: var(--text-secondary); }

/* ── Final CTA + footer ──────────────────────────────────────────────── */
.final { text-align: center; }
.final .cadence p { color: rgba(255, 255, 255, .85); }
.site-foot { background: var(--color-primary); color: rgba(255, 255, 255, .82); padding-block: 3.5rem 2rem; }
.site-foot a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-foot a:hover { color: #fff; }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.foot-brand { font-family: 'DM Sans'; font-weight: 700; color: #fff; font-size: 1.6rem; margin: 0; direction: ltr; text-align: end; }
[dir="rtl"] .foot-brand { text-align: right; }
.foot-tag { font-family: 'Heebo', 'Heebo Fallback', 'DM Sans', sans-serif; color: var(--color-accent); margin: 0 0 1rem; }
.site-foot h2, .site-foot .foot-h { color: #fff; font-size: .95rem; font-weight: 700; margin-block-end: .9rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .95rem; }
.foot-legal { border-block-start: 1px solid rgba(255, 255, 255, .12); margin-block-start: 2.5rem; padding-block-start: 1.5rem; font-size: .78rem; color: rgba(255, 255, 255, .74); }   /* ≥4.5:1 on --color-primary */
.foot-legal p { margin-block-end: .6rem; }

/* ── Content pages (audit hub / methodology / spotlight) ─────────────── */
.page-hero { padding-block: 2.5rem 2rem; background: var(--bg-neutral); border-block-end: 1px solid var(--border-soft); }
@media (min-width: 992px) { .page-hero { padding-block: 4rem 3rem; } }
.crumbs { font-size: .875rem; color: var(--text-secondary); margin-block-end: 1rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: '‹'; margin-inline-end: .4rem; color: #B3ACA3; }
.crumbs a { color: var(--text-secondary); }
.doc { max-inline-size: 820px; margin-inline: auto; }
.doc h2 { margin-block-start: 2.5rem; font-size: 1.6rem; }
.doc h3 { margin-block-start: 1.75rem; font-size: 1.2rem; }
.doc table { inline-size: 100%; border-collapse: collapse; margin-block: 1rem 1.5rem; font-size: .95rem; background: #fff; }
.doc th, .doc td { border: 1px solid var(--border-soft); padding: .55rem .75rem; text-align: start; vertical-align: top; }
.doc th { background: var(--bg-neutral); color: var(--color-primary); font-weight: 600; }
.doc code { font-family: ui-monospace, Consolas, monospace; font-size: .88em; background: var(--bg-neutral); padding: .05rem .3rem; border-radius: 4px; direction: ltr; unicode-bidi: isolate; }
.table-wrap { overflow-x: auto; }
.meta-line { font-size: .9rem; color: var(--text-secondary); }
.cat-grid { display: grid; gap: 1rem; }
@media (min-width: 860px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
.cat { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.25rem; }
.cat h3 { margin-block-start: 0; font-size: 1.15rem; }
.cat .en { font-size: .8rem; color: var(--text-secondary); font-family: 'DM Sans'; }
.cat ol { padding-inline-start: 1.2rem; margin: .75rem 0 0; }
.cat li { margin-block-end: .5rem; }
.cat li strong { display: block; color: var(--color-primary); }
.cat li span { color: var(--text-secondary); font-size: .96rem; }

/* ── Flow dialog (audit + spotlight) ─────────────────────────────────── */
dialog.flow { inline-size: 100%; block-size: 100%; max-inline-size: 100%; max-block-size: 100%; margin: 0; padding: 0; border: 0; background: var(--bg-main); color: var(--text-primary); overflow-y: auto; }
dialog.flow::backdrop { background: rgba(21, 42, 70, .5); }
dialog.flow[open] { display: flex; flex-direction: column; }
.flow__top { display: flex; align-items: center; justify-content: space-between; padding: .75rem var(--gutter); background: #fff; border-block-end: 1px solid var(--border-soft); position: sticky; inset-block-start: 0; z-index: 2; }
.flow__brand { font-family: var(--font-head); font-weight: 700; color: var(--color-primary); font-size: 1rem; }
.flow__close { inline-size: 44px; block-size: 44px; border-radius: 10px; border: 1px solid var(--border-soft); background: #fff; font-size: 1.6rem; line-height: 1; color: var(--color-primary); cursor: pointer; }
.journey { padding: .9rem var(--gutter) .4rem; background: #fff; border-block-end: 1px solid var(--border-soft); }
.journey__stages { list-style: none; display: flex; justify-content: space-between; gap: .25rem; margin: 0 0 .5rem; padding: 0; font-size: .72rem; color: var(--text-secondary); }
@media (min-width: 640px) { .journey__stages { font-size: .85rem; } }
.journey__stages li { flex: 1; text-align: center; transition: color .3s; }
.journey__stages li:first-child { text-align: start; }
.journey__stages li:last-child { text-align: end; }
.journey__stages li.is-done { color: var(--color-secondary-text); }
.journey__stages li.is-current { color: var(--color-primary); font-weight: 700; }
.journey__bar { block-size: 6px; background: var(--bg-stone); border-radius: 6px; overflow: hidden; }
.journey__fill { display: block; block-size: 100%; inline-size: 0; background: linear-gradient(to left, var(--color-cta), var(--color-secondary)); border-radius: 6px; transition: inline-size .5s var(--ease); }
.journey__pct { display: block; text-align: end; font-size: .72rem; color: var(--text-secondary); margin-block-start: .2rem; direction: ltr; }
.flow__body { flex: 1; display: grid; grid-template-columns: 1fr; }
@media (min-width: 960px) { .flow__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.flow__col { padding: 1.5rem var(--gutter) 3rem; display: flex; flex-direction: column; }
@media (min-width: 960px) { .flow__col { padding: 3rem clamp(2rem, 5vw, 5rem); } }
.flow__main { max-inline-size: 640px; inline-size: 100%; margin-inline: auto; opacity: 0; transform: translateY(8px); }
.flow__main.is-in { opacity: 1; transform: none; transition: opacity .28s var(--ease), transform .28s var(--ease); }
@media (prefers-reduced-motion: reduce) { .flow__main, .flow__main.is-in { transition: none; transform: none; opacity: 1; } .journey__fill { transition: none; } }
.flow__viz { display: none; background: var(--bg-neutral); border-inline-start: 1px solid var(--border-soft); padding: 3rem clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 960px) { .flow__viz { display: block; } }
.flow__insight { max-inline-size: 640px; inline-size: 100%; margin-inline: auto; }
.insight { display: flex; gap: .6rem; align-items: flex-start; background: #fff; border: 1px solid #C7D2FE; border-inline-start: 4px solid var(--color-cta); border-radius: 10px; padding: .8rem 1rem; margin-block-start: 1.25rem; color: var(--color-primary); font-weight: 600; animation: pop .45s var(--ease); }
.insight__dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--color-secondary); margin-block-start: .5rem; flex: none; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .insight { animation: none; } }

.q { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.q__title { font-family: var(--font-head); font-weight: 700; color: var(--color-primary); font-size: clamp(1.35rem, 3.2vw, 1.75rem); line-height: 1.35; margin-block-end: 1.25rem; padding: 0; }
.q__title:focus { outline: none; }
.q__hint { color: var(--text-secondary); margin: -.5rem 0 1rem; }
.q__options { display: grid; gap: .6rem; }
.opt { display: flex; align-items: center; gap: .85rem; inline-size: 100%; min-block-size: 58px; padding: .85rem 1.1rem; text-align: start; background: #fff; border: 1.5px solid var(--border-soft); border-radius: 12px; font: inherit; font-size: 1.0625rem; color: var(--text-primary); cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; }
.opt:hover { border-color: var(--color-primary); }
.opt__mark { inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2px solid #B8B1A8; flex: none; transition: all .15s; }
.opt.is-selected { border-color: var(--color-cta); background: #EEF2FF; color: var(--color-primary); font-weight: 600; }
.opt.is-selected .opt__mark { border-color: var(--color-cta); background: var(--color-cta); box-shadow: inset 0 0 0 3px #fff; }
.opt.is-accepted { animation: accept .3s var(--ease); }
@keyframes accept { 50% { transform: scale(.985); } }
@media (prefers-reduced-motion: reduce) { .opt.is-accepted { animation: none; } }
.q__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.25rem; }
.chip { position: relative; }
.chip__input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.chip__label { display: inline-flex; align-items: center; min-block-size: 46px; padding: .55rem 1rem; border-radius: 99px; border: 1.5px solid var(--border-soft); background: #fff; cursor: pointer; font-size: 1rem; transition: all .15s; user-select: none; }
.chip__label:hover { border-color: var(--color-primary); }
.chip__input:checked + .chip__label { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.chip__input:focus-visible + .chip__label { outline: 3px solid var(--focus); outline-offset: 2px; }
.q__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-block-start: 1rem; }
.q__count { color: var(--text-secondary); font-size: .95rem; }
.q__back { margin-block-start: 1.75rem; background: none; border: 0; padding: .5rem 0; color: var(--text-secondary); font: inherit; font-size: .95rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.q__back:hover { color: var(--color-primary); }
.q__privacy { font-size: .92rem; color: var(--color-primary); margin: .5rem 0 0; }
.q__warn { color: #9A3412; background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 8px; padding: .6rem .8rem; font-size: .95rem; margin-block: .75rem 0; }
.field { inline-size: 100%; min-block-size: 50px; padding: .75rem .9rem; border: 1.5px solid var(--border-soft); border-radius: 10px; background: #fff; font: inherit; font-size: 1.0625rem; color: var(--text-primary); }
.field:focus { outline: none; border-color: var(--color-cta); box-shadow: 0 0 0 3px rgba(59, 91, 219, .18); }
.field[aria-invalid="true"] { border-color: #C2410C; }
.field--area { min-block-size: 110px; resize: vertical; }
.field[dir="ltr"] { text-align: left; }
.field-label { display: block; font-weight: 600; color: var(--color-primary); margin: 1rem 0 .35rem; }
.check-row { display: flex; gap: .65rem; align-items: flex-start; margin-block-start: 1rem; font-size: .975rem; }
.check { inline-size: 22px; block-size: 22px; margin: .15rem 0 0; accent-color: var(--color-cta); flex: none; }
.details-form .btn, .report-form .btn { margin-block-start: 1.25rem; }
.success { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; border-radius: 10px; padding: .8rem 1rem; font-weight: 600; }

.screen__title { font-size: clamp(1.5rem, 3.6vw, 2rem); }
.screen__title:focus { outline: none; }
.screen__lead { font-size: 1.125rem; color: var(--text-secondary); }
.result-hero { background: #fff; border: 1px solid var(--border-soft); border-inline-start: 4px solid var(--color-cta); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-block: 1.25rem; }
.result-hero__k { margin: 0; color: var(--text-secondary); font-weight: 600; }
.result-hero__v { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, 3.6vw, 2rem); color: var(--color-primary); margin: .2rem 0 .6rem; line-height: 1.25; }
.result-hero__t { color: var(--text-primary); margin: 0; }
.result-hero__sec { margin: .75rem 0 0; color: var(--text-secondary); font-size: .975rem; }
.dash { display: grid; gap: 1rem; margin-block: 1.25rem; }
.dash__card { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.25rem; }
.dash__card h3 { font-size: 1.15rem; }
.dash__grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .dash__grid { grid-template-columns: repeat(3, 1fr); } }
.metric { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1rem; }
.metric__k { margin: 0 0 .25rem; color: var(--text-secondary); font-size: .9rem; font-weight: 600; }
.metric__v { margin: 0; color: var(--color-primary); line-height: 1.4; }
.metric__v strong { font-family: 'DM Sans', var(--font-head); font-size: 1.75rem; font-weight: 700; }
.dash__note { font-size: .875rem; color: var(--text-secondary); margin: .75rem 0 0; }
.bars { display: grid; gap: .7rem; }
.bar { display: grid; grid-template-columns: 8.5rem 1fr 3.5rem; gap: .6rem; align-items: center; font-size: .925rem; }
.bar__label { color: var(--text-nav); }
.bar__track { block-size: 10px; background: var(--bg-stone); border-radius: 6px; overflow: hidden; }
.bar__fill { display: block; block-size: 100%; inline-size: var(--w); background: var(--color-accent); border-radius: 6px; animation: grow .9s var(--ease) both; }
.bar--secondary .bar__fill { background: var(--color-secondary); }
.bar--primary .bar__fill { background: var(--color-cta); }
.bar--primary .bar__label { color: var(--color-primary); font-weight: 700; }
.bar__level { font-size: .85rem; color: var(--text-secondary); text-align: end; }
@keyframes grow { from { inline-size: 0; } }
@media (prefers-reduced-motion: reduce) { .bar__fill { animation: none; } }
.prose { margin-block: 1.5rem; }
.prose__em { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; color: var(--color-primary); }
.recs-wrap h3 { font-size: 1.3rem; }
.recs { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.rec { display: flex; gap: .9rem; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.rec__n { flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-family: 'DM Sans'; }
.rec__title { font-size: 1.075rem; margin: .15rem 0 .35rem; }
.rec p { margin: 0; color: var(--text-secondary); font-size: 1rem; }
.offer { margin-block-start: 2rem; background: var(--color-primary); color: rgba(255, 255, 255, .88); border-radius: var(--radius-lg); padding: 1.5rem; }
.offer h3 { color: #fff; }
.offer__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1rem; }
.offer .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.offer .btn--ghost:hover { border-color: #fff; color: #fff; }
.screen .offer__actions .btn--ghost { color: var(--color-primary); }
.offer .offer__actions .btn--ghost { color: #fff; }
.cap__big { font-family: var(--font-head); color: var(--color-primary); font-size: 1.5rem; margin: .5rem 0; }
.cap__big strong, .cap__slots { font-family: 'DM Sans', var(--font-head); font-size: 2.6rem; font-weight: 700; color: var(--color-primary); }
.callout { background: #fff; border: 1px solid var(--border-soft); border-inline-start: 4px solid var(--color-secondary); border-radius: 10px; padding: 1rem 1.2rem; margin-block: 1.25rem; }
.callout p { margin: 0 0 .35rem; }
.sim { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.4rem; margin-block: 1.5rem; }
.sim h3 { font-size: 1.3rem; }
.sim__label { display: block; font-weight: 600; color: var(--text-secondary); font-size: .9rem; }
.sim__range { inline-size: 100%; accent-color: var(--color-cta); block-size: 36px; margin-block-start: .25rem; }
.sim__ticks { display: flex; justify-content: space-between; font-size: .85rem; color: var(--text-secondary); direction: ltr; }
.sim__out { margin-block-start: 1rem; }
.sim__out p { margin: 0 0 .4rem; }
.sim__pct { color: var(--color-cta); }
.sim__big { font-family: var(--font-head); font-size: 1.35rem; color: var(--color-primary); }
.sim__big strong, .sim__slots { font-family: 'DM Sans', var(--font-head); font-size: 1.9rem; }
.disclaimer { background: var(--bg-neutral); border-radius: 8px; padding: .7rem .9rem; margin-block: 1rem .5rem; font-size: .95rem; color: var(--color-primary); }
.sim__coda strong { font-family: var(--font-head); font-size: 1.2rem; color: var(--color-primary); }
.incl { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .25rem; }
.incl li::before { content: '✓'; color: var(--color-secondary-text); margin-inline-end: .5rem; font-weight: 700; }
.tr-card { background: #fff; border: 1.5px solid var(--color-primary); border-radius: var(--radius-lg); padding: 1.4rem; margin-block: 1.25rem; box-shadow: var(--shadow-md); }
.tr-card__k { color: var(--color-secondary-text); font-weight: 600; margin: 0 0 .35rem; font-size: .95rem; }
.tr-card__steps { color: var(--text-secondary); font-size: .9rem; margin: 0; font-family: 'DM Sans', var(--font-head); }

/* Audit visualisation */
.viz__kicker { font-weight: 700; color: var(--color-primary); font-family: var(--font-head); margin-block-end: .5rem; }
.viz__kicker--sub { margin-block-start: 1.5rem; font-size: .95rem; }
.viz-net { inline-size: 100%; block-size: auto; max-block-size: 300px; }
.viz-net__core { fill: var(--color-primary); }
.viz-net__core-t { fill: #fff; font-size: 12px; font-family: Heebo, sans-serif; font-weight: 600; }
.viz-net__link { stroke: var(--color-accent); stroke-width: 1.2; stroke-dasharray: 3 4; }
.viz-net__node { fill: var(--color-secondary); }
.viz-net__label { fill: var(--text-nav); font-size: 10px; font-family: Heebo, sans-serif; }
@media (prefers-reduced-motion: no-preference) { .viz-net__node { animation: pop .4s var(--ease); } }
.viz__stat { text-align: center; color: var(--text-secondary); font-size: .95rem; margin: 0; }
.viz-stack { display: grid; gap: .55rem; }
.viz-stack__row { display: grid; grid-template-columns: 7.5rem 1fr 2.5rem; gap: .5rem; align-items: center; font-size: .85rem; }
.viz-stack__track { block-size: 14px; background: var(--bg-stone); border-radius: 4px; overflow: hidden; }
.viz-stack__fill { display: block; block-size: 100%; background: linear-gradient(to left, var(--color-primary), var(--color-secondary)); border-radius: 4px; transition: inline-size .6s var(--ease); }
.viz-stack__v { font-family: 'DM Sans'; color: var(--color-primary); font-weight: 600; text-align: end; direction: ltr; }
.viz__total { margin-block-start: .75rem; font-weight: 700; color: var(--color-primary); }

/* Spotlight live preview */
.pv { --fill: 0; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.pv::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 4px; background: linear-gradient(to left, var(--color-cta), var(--color-secondary)); transform-origin: right; transform: scaleX(var(--fill)); transition: transform .6s var(--ease); }
.pv__head { display: flex; gap: .9rem; align-items: center; margin-block-end: 1rem; }
.pv__avatar { inline-size: 56px; block-size: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--color-accent), var(--color-secondary)); flex: none; }
.pv__name { font-family: var(--font-head); font-weight: 700; color: var(--color-primary); font-size: 1.25rem; margin: 0; }
.pv__meta { color: var(--text-secondary); font-size: .9rem; margin: 0; }
.pv__tagline { font-family: var(--font-head); font-weight: 600; color: var(--color-primary); font-size: 1.1rem; margin-block-end: .6rem; }
.pv__tagline:empty { display: none; }
.pv__line { font-style: italic; color: var(--text-nav); margin-block-end: .4rem; }
.pv__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-block: .75rem; }
.pv__chip { font-size: .8rem; padding: .15rem .6rem; border-radius: 99px; background: #EEF2FF; color: var(--color-primary); border: 1px solid #C7D2FE; }
.pv__traits { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; color: var(--text-secondary); }
.pv__traits li::before { content: '•'; color: var(--color-secondary); margin-inline-end: .45rem; }
.pv__quote { margin: 1rem 0 0; padding-inline-start: 1rem; border-inline-start: 3px solid var(--color-accent); color: var(--text-nav); font-size: .95rem; }
.pv__private { font-size: .8rem; color: var(--text-secondary); margin-block-start: 1rem; }

@media print { .site-head, .site-foot, .hx-viz, .frag__stage { display: none; } }
.h3 { font-size: var(--font-h3); font-weight: 600; }
/* Specificity fixes */
.plan .plan__price { font-family: 'DM Sans', var(--font-head); font-weight: 700; color: var(--color-primary); font-size: 2.4rem; line-height: 1.1; margin: 0 0 .35rem; }
.plan .plan__price small { font-size: 1rem; font-weight: 500; color: var(--text-secondary); }
.site-foot .btn--light, .site-foot .btn--light:hover { color: var(--color-primary); }
h1, h2, .hero__sub, .q__title, .screen__title { text-wrap: balance; }

.show-xs { display: none; }
@media (max-width: 420px) { .hide-xs { display: none; } .show-xs { display: inline; } }
.en-line { display: block; font-family: 'DM Sans', sans-serif; font-size: .82em; opacity: .8; }

/* Practice Map entry in the header (only when the quiz is on): prominent, mint, next to the main CTA */
.btn--map { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 12px;
  background: #E9F6F1; border: 1.5px solid #8FD2BC; color: #1B6E5D; font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(31, 122, 102, .14); transition: background .15s, box-shadow .15s, transform .1s; }
.btn--map:hover { background: #DDF1EA; box-shadow: 0 8px 20px rgba(31, 122, 102, .2); }
.btn--map:active { transform: translateY(1px); }
.btn--map:focus-visible { outline: 3px solid rgba(31, 122, 102, .35); outline-offset: 2px; }
.btn--map svg { flex: none; }
.btn--map__badge { padding: 2px 8px; border-radius: 999px; background: #fff; color: #1B6E5D; font-size: .78rem; font-weight: 700; }
.btn--map__short { display: none; }
@media (max-width: 1100px) { .btn--map__full { display: none; } .btn--map__short { display: inline; } }
@media (max-width: 520px) { .btn--map__badge { display: none; } .btn--map { padding-inline: 12px; } }
@media (max-width: 380px) { .btn--map__short { display: none; } .btn--map { padding-inline: 10px; } }
.mobile-nav__map a { color: #1B6E5D; font-weight: 800; }

/* Phones (2026-10-10): logo + Practice Map + "start now" + menu must fit one row. At 390 px the row was
   39 px too wide and pushed the menu button off-screen. The map button keeps its clock icon; its label
   stays available to screen readers. */
@media (max-width: 480px) {
  .head-actions { gap: .35rem; }
  .head-actions .btn { padding: .5rem .75rem; font-size: .9rem; white-space: nowrap; }
  .btn--map { padding-inline: 10px; gap: 0; }
  .btn--map .btn--map__short { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; display: inline; }
}