/* =============================================================================
   components.css — reusable UI components.
   BEM-light: .block, .block__element, .block--modifier (legacy `.btn-primary`
   style modifier names retained where lifted from existing source).
   ============================================================================= */

@layer components {

  /* ===========================================================================
     Buttons
     =========================================================================== */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-xs);
    padding: var(--s-sm) var(--s-lg);
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
      background var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease),
      box-shadow var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease);
    min-height: 44px; /* WCAG 2.5.5 touch target */
  }
  /* NOTE: no translateY hover — buttons stay put, only cards lift. */

  .btn-primary {
    background: var(--c-primary);
    color: var(--c-on-accent);
    box-shadow: var(--sh-cta);
  }
  .btn-primary:hover {
    background: var(--c-accent-hover);
    color: var(--c-on-accent);
    box-shadow: var(--sh-md);
  }

  .btn-secondary {
    background: var(--c-surface);
    color: var(--c-primary);
    border-color: var(--c-border);
    box-shadow: var(--sh-xs);
  }
  .btn-secondary:hover {
    background: var(--c-surface);
    color: var(--c-primary);
    box-shadow: var(--sh-sm);
    border-color: var(--c-accent-medium);
  }

  .btn-outline {
    background: transparent;
    color: var(--c-primary);
    border-color: var(--c-primary);
  }
  .btn-outline:hover { background: var(--c-accent-light); }

  .btn-ghost {
    background: transparent;
    color: var(--c-text-soft);
    border-color: transparent;
  }
  .btn-ghost:hover { background: var(--c-accent-light); color: var(--c-primary); }

  /* Arrow glyph inside primary CTAs — the single micro-motion in the button family.
     Usage: <a class="btn btn-primary">Start <span class="btn__arrow">→</span></a> */
  .btn__arrow {
    display: inline-block;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .btn:hover .btn__arrow { transform: translateX(2px); }

  .btn-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    color: var(--c-primary);
    border-color: transparent;
  }
  .btn-icon:hover { background: var(--c-accent-light); }

  .btn-lg   { padding: var(--s-md) var(--s-xl); font-size: var(--fs-md); }
  .btn-full { width: 100%; }

  .btn-group { display: flex; flex-wrap: wrap; gap: var(--s-md); }

  /* ===========================================================================
     Cards
     =========================================================================== */
  .card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: var(--s-xl);
    box-shadow: var(--sh-sm);
  }

  .card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition:
      box-shadow var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out);
  }
  .card-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-hover);
    color: inherit;
  }

  .card-grid {
    display: grid;
    gap: var(--s-lg);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  /* ===========================================================================
     Callouts
     =========================================================================== */
  .callout {
    padding: var(--s-xl);
    border-radius: var(--r-lg);
    background: var(--c-surface-alt);
    box-shadow: var(--sh-xs);
  }
  .callout--accent { background: var(--c-accent-light); }
  .callout--soft   { background: var(--c-surface-alt); }
  .callout-actions { margin-top: var(--s-md); }

  /* ===========================================================================
     Hero
     =========================================================================== */
  .hero { padding: var(--s-2xl) 0 var(--s-xl); max-width: 780px; }
  .hero h1 {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-display-xl);
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-tight);
    color: var(--c-primary);
    max-width: 22ch;
  }
  .hero p.lead { font-size: var(--fs-md); line-height: var(--lh-loose); margin-top: var(--s-md); max-width: 56ch; }
  .hero-actions { margin-top: var(--s-xl); display: flex; flex-wrap: wrap; gap: var(--s-md); align-items: center; }
  .hero-trust { margin-top: var(--s-xl); color: var(--c-text-muted); font-size: var(--fs-sm); }

  /* Hero with a metadata-panel child becomes a 2-col grid at ≥62em. */
  @media (min-width: 62em) {
    .hero:has(.metadata-panel) {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
      gap: var(--s-2xl);
      max-width: 1080px;
      align-items: start;
    }
    .hero:has(.metadata-panel) > .metadata-panel {
      margin-top: var(--s-lg); /* align with the headline baseline */
    }
  }

  /* ===========================================================================
     Metadata panel — clinical-record sidebar, used in hero on ≥62em
     =========================================================================== */
  .metadata-panel {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: var(--s-lg);
    display: grid;
    gap: var(--s-md);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
  }
  .metadata-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--s-sm);
    border-bottom: 1px solid var(--c-hairline-soft);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--s-xs);
  }
  .metadata-panel__row {
    display: grid;
    grid-template-columns: 9ch 1fr;
    gap: var(--s-sm);
    padding-bottom: var(--s-md);
    border-bottom: 1px solid var(--c-hairline-soft);
  }
  .metadata-panel__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .metadata-panel__k {
    color: var(--c-text-muted);
    font-size: calc(var(--fs-xs) - 1px);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    align-self: center;
    line-height: 1.3;
  }
  .metadata-panel__v {
    color: var(--c-primary);
    font-weight: var(--fw-medium);
    line-height: 1.4;
  }

  /* ===========================================================================
     Badges
     =========================================================================== */
  .badge {
    display: inline-block;
    padding: 2px var(--s-sm);
    background: var(--c-accent-light);
    color: var(--c-primary);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
  }
  .badge--ghost { background: transparent; border: 1px solid var(--c-border); color: var(--c-text-soft); }
  .badge--difficulty,
  .badge--duration {
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
  }
  .badge--difficulty { background: var(--c-accent-light); }
  .badge--duration   { background: transparent; border: 1px solid var(--c-border); color: var(--c-text-soft); }

  /* ===========================================================================
     Section headers, eyebrows, bylines
     =========================================================================== */
  .section-header { margin-bottom: var(--s-lg); }
  .section-header h2 { margin-bottom: var(--s-sm); }
  .section-header .lead,
  .section-header .section-lead { max-width: 68ch; }
  .section-lead {
    font-size: var(--fs-md);
    color: var(--c-text-soft);
    line-height: var(--lh-loose);
    max-width: 68ch;
    margin-top: var(--s-xs);
  }
  .eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-accent);
    margin-bottom: var(--s-sm);
    font-weight: var(--fw-medium);
  }
  .byline { margin-top: var(--s-sm); font-size: var(--fs-sm); color: var(--c-text-muted); }
  .byline small { font-size: inherit; }
  .cta-section { margin-top: var(--s-2xl); }

  /* ===========================================================================
     Sidebar (left rail nav on desktop, off-canvas drawer on mobile).
     One DOM element, two presentations — single source of truth for nav.
     =========================================================================== */
  .sidebar {
    grid-area: sidebar;
    background: var(--c-surface);
    border-right: 1px solid var(--c-border-light);
    padding: var(--s-xl) var(--s-lg);
    display: flex;
    flex-direction: column;
    gap: var(--s-xl);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
  @media (max-width: 69.99em) {
    .sidebar {
      position: fixed;
      top: 0; left: 0; bottom: 0;
      width: min(86vw, 320px);
      height: 100vh;
      z-index: var(--z-drawer);
      transform: translateX(-100%);
      transition: transform var(--dur) var(--ease);
      box-shadow: var(--sh-xl);
    }
    .sidebar.is-open { transform: translateX(0); }

    .drawer-backdrop {
      position: fixed;
      inset: 0;
      background: var(--c-backdrop);
      z-index: calc(var(--z-drawer) - 1);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur) var(--ease);
    }
    .drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
  }
  @media (min-width: 70em) {
    .drawer-backdrop { display: none; }
  }

  .sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-sm);
  }

  .sidebar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-sm);
    text-decoration: none;
    color: var(--c-primary);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
  }
  .sidebar__brand img { width: 32px; height: 32px; }

  .sidebar__nav { display: flex; flex-direction: column; gap: var(--s-xs); }
  .sidebar__link {
    display: block;
    padding: var(--s-sm) var(--s-md);
    border-radius: var(--r-sm);
    color: var(--c-text-soft);
    text-decoration: none;
    font-weight: var(--fw-medium);
    min-height: 44px;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .sidebar__link:hover { background: var(--c-accent-light); color: var(--c-primary); }
  .sidebar__link[aria-current="page"] {
    background: var(--c-accent-light);
    color: var(--c-primary);
    box-shadow: inset 2px 0 0 var(--c-primary);
  }

  .sidebar__footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-md); }
  .sidebar__footer-cta {
    display: block;
    text-align: center;
    padding: var(--s-md);
    background: var(--c-primary);
    color: var(--c-on-accent);
    border-radius: var(--r-md);
    text-decoration: none;
    font-weight: var(--fw-medium);
  }
  .sidebar__footer-cta:hover { background: var(--c-accent-hover); color: var(--c-on-accent); }

  .sidebar__reset {
    display: inline-flex;
    align-items: center;
    gap: var(--s-xs);
    background: transparent;
    border: 1px solid var(--c-border);
    color: var(--c-text-soft);
    padding: var(--s-xs) var(--s-md);
    min-height: 32px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    cursor: pointer;
    font-family: inherit;
  }
  .sidebar__reset:hover { background: var(--c-accent-light); color: var(--c-primary); }

  /* ===========================================================================
     Sidebar sections (mobile/narrow drawer accordions, < 70em).
     Mirrors site-header dropdown content via native <details>/<summary>.
     Hidden on desktop — site-header carries those links above main.
     =========================================================================== */
  .sidebar__sections { display: flex; flex-direction: column; gap: 0; }
  @media (min-width: 70em) {
    .sidebar__sections { display: none; }
  }

  .sidebar__section { border-top: 1px solid var(--c-border-light); }
  .sidebar__section:first-child { border-top: none; }

  .sidebar__section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-sm) var(--s-md);
    min-height: 44px;
    color: var(--c-text);
    font-weight: var(--fw-medium);
    cursor: pointer;
    list-style: none;            /* Firefox */
    border-radius: var(--r-sm);
  }
  .sidebar__section > summary::-webkit-details-marker { display: none; }
  .sidebar__section > summary:hover { background: var(--c-accent-light); color: var(--c-primary); }
  .sidebar__section > summary::after {
    content: '';
    width: 9px; height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--dur-fast) var(--ease);
    opacity: 0.55;
    flex-shrink: 0;
  }
  .sidebar__section[open] > summary::after {
    transform: translateY(2px) rotate(-135deg);
  }

  .sidebar__section ul {
    list-style: none;
    margin: 0;
    padding: var(--s-xs) 0 var(--s-sm) var(--s-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sidebar__section ul a {
    display: flex;
    align-items: center;
    padding: var(--s-xs) var(--s-md);
    border-radius: var(--r-sm);
    color: var(--c-text-muted);
    text-decoration: none;
    font-size: var(--fs-sm);
    min-height: 36px;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .sidebar__section ul a:hover { background: var(--c-accent-light); color: var(--c-primary); }
  .sidebar__section ul a[aria-current="page"] {
    color: var(--c-primary);
    font-weight: var(--fw-medium);
  }

  @media (prefers-reduced-motion: reduce) {
    .sidebar__section > summary::after { transition: none; }
  }

  /* ===========================================================================
     Mobile header (top bar, < 70em)
     =========================================================================== */
  .mobile-header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-md);
    padding: var(--s-md) var(--s-lg);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border-light);
    position: sticky;
    top: 0;
    z-index: var(--z-header);
  }
  @media (min-width: 70em) {
    .mobile-header { display: none; }
  }

  .mobile-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-sm);
    text-decoration: none;
    color: var(--c-primary);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    flex: 1;
  }
  .mobile-header__brand img { width: 32px; height: 32px; }

  /* ===========================================================================
     Site header (top bar, ≥ 70em — secondary nav: Home, 3 dropdowns, Tools, CTA).
     Blended into the page surface — bg matches --c-background, hairline divider only.
     =========================================================================== */
  .site-header {
    display: none;
    grid-area: header;
    background: var(--c-background);
    border-bottom: 1px solid var(--c-hairline-soft);
    padding: var(--s-sm) var(--s-xl);
    position: sticky;
    top: 0;
    z-index: var(--z-header);
  }
  @media (min-width: 70em) {
    .site-header { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-lg); }
  }

  .site-header__nav {
    display: flex;
    align-items: center;
    gap: var(--s-lg);
    flex-wrap: wrap;
  }
  .site-header__nav > a {
    color: var(--c-text-soft);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    padding: var(--s-xs) 0;
  }
  .site-header__nav > a:hover { color: var(--c-primary); }
  .site-header__nav > a.cta {
    background: var(--c-primary);
    color: var(--c-on-accent);
    padding: var(--s-sm) var(--s-md);
    border-radius: var(--r-md);
  }
  .site-header__nav > a.cta:hover { background: var(--c-accent-hover); color: var(--c-on-accent); }

  .site-header-dropdown { position: relative; }
  .site-header-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-xs);
    color: var(--c-text-soft);
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    padding: var(--s-xs) 0;
  }
  .site-header-dropdown__toggle:hover { color: var(--c-primary); }
  .site-header-dropdown__toggle[aria-expanded="true"] { color: var(--c-primary); }
  .site-header-dropdown__toggle svg {
    transition: transform var(--dur-fast) var(--ease);
  }
  .site-header-dropdown__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* ARIA-as-source-of-truth: visibility flows from aria-expanded, not from a class. */
  .site-header-dropdown__menu {
    position: absolute;
    top: calc(100% + var(--s-xs));
    right: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    padding: var(--s-sm);
    min-width: 280px;
    list-style: none;
    margin: 0;
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: var(--z-header);
  }
  .site-header-dropdown__toggle[aria-expanded="true"] + .site-header-dropdown__menu {
    display: flex;
  }
  .site-header-dropdown__menu a {
    display: block;
    padding: var(--s-sm) var(--s-md);
    border-radius: var(--r-sm);
    color: var(--c-text-soft);
    text-decoration: none;
    font-size: var(--fs-sm);
  }
  .site-header-dropdown__menu a:hover { background: var(--c-accent-light); color: var(--c-primary); }

  /* ===========================================================================
     Site footer
     =========================================================================== */
  .site-footer {
    grid-area: footer;
    padding: var(--s-2xl) var(--s-lg);
    background: var(--c-surface-alt);
    border-top: 1px solid var(--c-border-light);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    display: grid;
    gap: var(--s-lg);
  }
  @media (min-width: 48em) {
    .site-footer {
      grid-template-columns: 2fr 1fr;
      align-items: start;
    }
  }
  .site-footer__contact p + p { margin-top: var(--s-xs); }
  .site-footer__contact strong { color: var(--c-primary); }
  .site-footer__contact a { color: var(--c-primary); }

  .site-footer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--s-xs);
  }
  .site-footer__nav a {
    color: var(--c-text-soft);
    text-decoration: none;
  }
  .site-footer__nav a:hover { color: var(--c-primary); text-decoration: underline; }

  .site-footer__copyright {
    grid-column: 1 / -1;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    margin-top: var(--s-md);
    padding-top: var(--s-md);
    border-top: 1px solid var(--c-border-light);
    text-align: center;
  }

  /* ===========================================================================
     Breadcrumb
     =========================================================================== */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-xs);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--s-lg);
  }
  .breadcrumb a { color: var(--c-text-soft); text-decoration: none; }
  .breadcrumb a:hover { color: var(--c-primary); text-decoration: underline; }
  .breadcrumb [aria-current="page"] { color: var(--c-primary); }
  .breadcrumb-separator { color: var(--c-text-muted); margin: 0 var(--s-xs); }

  /* ===========================================================================
     Toast (cross-page status messages)
     =========================================================================== */
  #toast {
    position: fixed;
    bottom: var(--s-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    padding: var(--s-sm) var(--s-lg);
    background: var(--c-primary);
    color: var(--c-on-accent);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    box-shadow: var(--sh-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }
  #toast.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  #toast:empty { display: none; }

  /* ===========================================================================
     Disclaimer aside (non-negotiable, every page)
     =========================================================================== */
  .disclaimer {
    margin-top: var(--s-2xl);
    padding: var(--s-lg);
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
  }
  .disclaimer__title {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    color: var(--c-primary);
    margin-bottom: var(--s-sm);
  }
  .disclaimer strong { color: var(--c-primary); }
  .disclaimer a { color: var(--c-primary); font-weight: var(--fw-bold); }

  /* ===========================================================================
     Practitioner card
     =========================================================================== */
  .practitioner {
    display: grid;
    gap: var(--s-lg);
    padding: var(--s-xl);
    background: var(--c-surface);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
  }
  .practitioner .credentials {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--s-xs);
  }
  .practitioner .credentials li {
    padding-left: 1.5em;
    position: relative;
  }
  .practitioner .credentials li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--c-accent);
    font-weight: var(--fw-bold);
  }

  /* ===========================================================================
     Section rule — numbered hairline divider between major h2 sections.
     Uses CSS counters; auto-numbered. JS adds .is-visible on viewport entry.
     =========================================================================== */
  main { counter-reset: section-rule; }

  .section-rule {
    counter-increment: section-rule;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--s-md);
    margin: var(--s-3xl) 0 var(--s-xl);
  }
  .section-rule__label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--c-accent);
    white-space: nowrap;
  }
  .section-rule__label::before {
    content: "§ " counter(section-rule, decimal-leading-zero) " — ";
    color: var(--c-primary);
    font-weight: var(--fw-medium);
  }
  .section-rule__line {
    height: 1px;
    background: var(--c-hairline);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform var(--dur-draw) var(--ease-draw);
  }
  .section-rule.is-visible .section-rule__line {
    transform: scaleX(1);
  }

  @media (prefers-reduced-motion: reduce) {
    .section-rule__line {
      transform: scaleX(1);
      transition: none;
    }
  }

  /* ===========================================================================
     Card kicker — monospace numeric prefix + label inside cards
     (e.g. "02.1 — OVERSPANNING" plus optional right-aligned ratio).
     Put as the first child of a card.
     =========================================================================== */
  .card-kicker {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--s-sm);
    margin-bottom: var(--s-md);
    border-bottom: 1px solid var(--c-hairline-soft);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--c-accent);
    line-height: 1.3;
  }
  .card-kicker__num {
    color: var(--c-primary);
    font-weight: var(--fw-medium);
    margin-right: .4em;
  }
  .card-kicker__ratio { color: var(--c-text-muted); }

  /* ===========================================================================
     Hairline list — 10px horizontal rule replaces bullet.
     Opt-in class swap from .bullet-list on a per-page basis.
     =========================================================================== */
  .hairline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--s-xs);
  }
  .hairline-list li {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: var(--s-sm);
    align-items: baseline;
    color: var(--c-text-soft);
    line-height: var(--lh-base);
    margin: 0;
  }
  .hairline-list li::before {
    content: "";
    width: 10px;
    height: 1px;
    background: var(--c-accent);
    display: inline-block;
    margin-top: .72em;
  }

  /* Dark-mode card definition — shadows on dark surfaces need help.
     Tier C: breakage fix, not bespoke polish. */
  @media (prefers-color-scheme: dark) {
    .card,
    .dimension-card,
    .symptom-card,
    .exercise-card,
    .recommendation-card,
    .pricing-card,
    .contact-card,
    .practitioner,
    .callout,
    .quiz-option,
    .metadata-panel {
      border: 1px solid var(--c-border-light);
    }
  }
}