/* GENERATED by ds/build.js — concatenation of ds/css/*.css in layer order (021 §23). Edit the sources, not this file. */
@layer reset, base, components, patterns, layouts, states, utilities, print;
@import url("aimh-tokens.css");

/* ── 00-reset.css ── */
/* reset — minimal, semantics-preserving (021 §22) */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img, svg, video, canvas { display: block; max-inline-size: 100%; block-size: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  legend { padding: 0; }
  table { border-collapse: collapse; border-spacing: 0; }
  [hidden] { display: none !important; } /* exception documented in 021 §24: native hidden semantics */
}

/* ── 10-base.css ── */
/* base — body, headings, links, focus, selection, reduced motion (021 §20, §22, §74) */
@layer base {
  html { font-family: var(--aimh-font-family-sans); font-size: 100%; line-height: var(--aimh-lh-body); color: var(--aimh-text-primary); background: var(--aimh-surface-canvas); }
  body { font-size: var(--aimh-text-body-size); }
  [data-register="product"] body, body[data-register="product"] { font-size: var(--aimh-product-text-body-size); }
  h1, h2, h3, h4 { font-family: var(--aimh-font-family-heading); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 var(--aimh-space-stack-public); }
  h1 { font-size: var(--aimh-text-page-title-size); line-height: 1.15; }
  h2 { font-size: var(--aimh-text-section-title-size); }
  h3 { font-size: var(--aimh-text-subsection-size); }
  h4 { font-family: var(--aimh-font-family-sans); font-size: var(--aimh-text-local-heading-size); }
  [data-register="product"] h1 { font-size: var(--aimh-product-text-page-title-size); }
  [data-register="product"] h2 { font-size: var(--aimh-product-text-section-title-size); }
  p, ul, ol, dl { margin: 0 0 var(--aimh-space-stack-public); }
  [data-register="product"] :is(p, ul, ol, dl) { margin-block-end: var(--aimh-space-stack-product); }
  a { color: var(--aimh-text-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  strong { font-weight: 600; }
  small, .aimh-caption { font-size: var(--aimh-text-caption-size); color: var(--aimh-text-secondary); }
  code { font-family: var(--aimh-font-family-mono); font-size: 0.8125rem; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  ::selection { background: var(--aimh-surface-selected); }
  :focus-visible { outline: var(--aimh-focus-width) solid var(--aimh-focus-ring); outline-offset: var(--aimh-focus-offset); box-shadow: none; }
  .aimh-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .aimh-skip { position: absolute; inset-inline-start: -999px; z-index: var(--aimh-z-skip); background: var(--aimh-surface-default); padding: var(--aimh-space-8) var(--aimh-space-12); border-radius: var(--aimh-control-radius); }
  .aimh-skip:focus { inset-inline-start: var(--aimh-space-16); inset-block-start: var(--aimh-space-16); }
  .aimh-num, [data-numeric] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "zero"; text-align: end; }
  html[data-legibility="atkinson"] :is(p, li, dd, td, label, input, textarea, select) { font-family: var(--aimh-font-family-legible); }
  html { scroll-behavior: auto; } /* 018 §126: no smooth programmatic scroll */
}

/* ── 20-components.css ── */
/* components — Button, Link, StatusBadge, FieldMessage, FormField/TextInput, Alert, Surface/Card, table, skeleton (021 §26–31, §204) */
@layer components {
  /* Button (013 §6–10, 018 §32–34) */
  .aimh-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--aimh-control-gap-icon); min-block-size: var(--aimh-control-height-md); min-inline-size: var(--aimh-control-min-inline); padding: 0 var(--aimh-control-padding-inline); border-radius: var(--aimh-control-radius); border: 1px solid var(--aimh-button-primary-bg); background: var(--aimh-button-primary-bg); color: var(--aimh-button-primary-fg); font-family: var(--aimh-font-family-sans); font-size: var(--aimh-text-button-size); font-weight: 500; line-height: 1; text-decoration: none; transition: background-color var(--aimh-motion-duration-fast) var(--aimh-motion-easing-state), border-color var(--aimh-motion-duration-fast) var(--aimh-motion-easing-state); }
  [data-register="product"] .aimh-btn { font-size: var(--aimh-product-text-button-size); }
  .aimh-btn:hover { background: var(--aimh-button-primary-bg-hover); border-color: var(--aimh-button-primary-bg-hover); }
  .aimh-btn:active { background: var(--aimh-button-primary-bg-pressed); border-color: var(--aimh-button-primary-bg-pressed); transition-duration: var(--aimh-motion-duration-instant); }
  .aimh-btn[data-emphasis="secondary"] { background: transparent; color: var(--aimh-button-secondary-fg); border-color: var(--aimh-button-secondary-border); }
  .aimh-btn[data-emphasis="secondary"]:hover { background: var(--aimh-surface-subtle); }
  .aimh-btn[data-emphasis="quiet"] { background: transparent; color: var(--aimh-button-quiet-fg); border-color: transparent; min-inline-size: 0; padding-inline: var(--aimh-space-12); }
  .aimh-btn[data-intent="destructive"] { color: var(--aimh-status-critical-fg); border-color: var(--aimh-status-critical-fg); background: transparent; }
  .aimh-btn[disabled], .aimh-btn[aria-disabled="true"] { background: var(--aimh-button-disabled-bg); color: var(--aimh-button-disabled-fg); border-color: var(--aimh-button-disabled-bg); cursor: not-allowed; }
  .aimh-btn[aria-busy="true"] { position: relative; color: transparent; }
  .aimh-btn[aria-busy="true"]::after { content: ""; position: absolute; inline-size: 1em; block-size: 1em; border: 2px solid currentColor; border-color: var(--aimh-button-primary-fg) transparent var(--aimh-button-primary-fg) transparent; border-radius: 50%; animation: aimh-spin var(--aimh-motion-loop-spinner) var(--aimh-motion-easing-loop) infinite; }
  .aimh-btn[data-size="lg"] { min-block-size: var(--aimh-control-height-lg); }
  .aimh-btn[data-size="xl"] { min-block-size: var(--aimh-control-height-xl); font-size: var(--aimh-text-button-size); }
  .aimh-btn[data-size="sm"] { min-block-size: var(--aimh-control-height-sm); }
  .aimh-btn--block { inline-size: 100%; }
  /* Link is native <a> (base). Icon-button */
  .aimh-icon-btn { display: inline-grid; place-items: center; inline-size: var(--aimh-target-min); block-size: var(--aimh-target-min); border-radius: var(--aimh-control-radius); border: 0; background: transparent; color: var(--aimh-text-link); }
  /* StatusBadge (013 §54, 019b §61) — tone from data-tone set by registry, never by page */
  .aimh-badge { display: inline-flex; align-items: center; gap: var(--aimh-space-4); block-size: var(--aimh-badge-height); padding: 0 var(--aimh-space-8); border-radius: var(--aimh-radius-pill); background: var(--aimh-badge-neutral-bg); color: var(--aimh-badge-neutral-fg); font-size: var(--aimh-text-badge-size); font-weight: 500; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; }
  .aimh-badge[data-tone="info"] { background: var(--aimh-badge-info-bg); color: var(--aimh-badge-info-fg); }
  .aimh-badge[data-tone="warning"] { background: var(--aimh-badge-warning-bg); color: var(--aimh-badge-warning-fg); }
  .aimh-badge[data-tone="critical"] { background: var(--aimh-badge-critical-bg); color: var(--aimh-badge-critical-fg); }
  .aimh-badge[data-tone="success"] { background: var(--aimh-badge-success-bg); color: var(--aimh-badge-success-fg); }
  .aimh-badge[data-size="sm"] { block-size: var(--aimh-badge-height-sm); }
  .aimh-badge > .aimh-glyph { inline-size: 12px; block-size: 12px; }
  /* FormField / TextInput / FieldMessage (013 §21–27, 017 forms) */
  /* `align-content: start` is load-bearing: a field inside `.aimh-form-row` is a grid item,
     so it stretches to the tallest cell in the row. Without this its own rows stretch too and
     the input grows with them — a phone box 112 px tall next to a 48 px name box, because the
     field beside it carried a hint and a live status line. Found on production /referrals. */
  .aimh-field { display: grid; align-content: start; gap: var(--aimh-space-4); margin-block-end: var(--aimh-space-16); max-inline-size: var(--aimh-max-form); }
  .aimh-field > label, .aimh-field > .aimh-legend { font-size: var(--aimh-text-label-size); font-weight: 500; }
  .aimh-field .aimh-field__hint { color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); }
  .aimh-input, .aimh-select, .aimh-textarea { min-block-size: var(--aimh-control-height-lg); padding: 0 var(--aimh-space-12); border: 1px solid var(--aimh-input-border); border-radius: var(--aimh-control-radius); background: var(--aimh-input-bg); color: var(--aimh-input-fg); inline-size: 100%; }
  [data-register="product"] :is(.aimh-input, .aimh-select, .aimh-textarea) { min-block-size: var(--aimh-control-height-md); }
  .aimh-textarea { padding-block: var(--aimh-space-12); min-block-size: calc(var(--aimh-control-height-lg) * 2); resize: vertical; }
  .aimh-input::placeholder { color: var(--aimh-input-placeholder); }
  .aimh-input:focus-visible, .aimh-select:focus-visible, .aimh-textarea:focus-visible { border-color: var(--aimh-input-border-focus); }
  .aimh-field[data-invalid="true"] :is(.aimh-input, .aimh-select, .aimh-textarea) { border-color: var(--aimh-input-border-invalid); border-width: 2px; }
  .aimh-input[readonly] { background: var(--aimh-surface-subtle); }
  .aimh-input[disabled] { background: var(--aimh-control-disabled-bg); color: var(--aimh-control-disabled-fg); }
  .aimh-field-message { display: flex; gap: var(--aimh-space-8); align-items: flex-start; font-size: var(--aimh-text-body-sm-size); }
  .aimh-field-message[data-kind="error"] { color: var(--aimh-status-critical-fg); }
  .aimh-field-message[data-kind="valid"] { color: var(--aimh-status-success-fg); }
  .aimh-field-message[data-kind="instruction"] { color: var(--aimh-text-secondary); }
  .aimh-overline { font-size: var(--aimh-text-overline-size); letter-spacing: 0.06em; text-transform: uppercase; color: var(--aimh-text-secondary); margin: 0; }
  .aimh-lead { font-size: var(--aimh-text-body-lg-size); color: var(--aimh-text-secondary); max-inline-size: var(--aimh-max-reading); }
  .aimh-error-summary ul { margin: var(--aimh-space-8) 0 0; padding-inline-start: var(--aimh-space-24); }
  .aimh-error-summary a { color: inherit; }
  .aimh-form-section { border: 0; padding: 0; margin: 0 0 var(--aimh-space-24); min-inline-size: 0; }
  .aimh-form-section > legend { font-family: var(--aimh-font-family-heading); font-weight: 600; font-size: var(--aimh-text-local-heading-size); padding: 0; margin-block-end: var(--aimh-space-12); }
  .aimh-form-actions { margin-block-start: var(--aimh-space-24); }
  .aimh-form-row { display: grid; gap: 0 var(--aimh-space-16); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .aimh-required { color: var(--aimh-text-secondary); font-weight: 400; }
  .aimh-checkbox { display: flex; gap: var(--aimh-space-12); align-items: flex-start; min-block-size: var(--aimh-target-min); }
  .aimh-checkbox input { inline-size: 20px; block-size: 20px; margin-block-start: 2px; accent-color: var(--aimh-brand-primary); }
  /* Alert (013 §55, 019b §62) — condition with consequence; persistent */
  .aimh-alert { display: grid; grid-template-columns: auto 1fr; gap: var(--aimh-space-12); padding: var(--aimh-space-12) var(--aimh-space-16); border: 1px solid var(--aimh-border-subtle); border-inline-start: var(--aimh-alert-border) solid var(--aimh-alert-info-border); border-radius: var(--aimh-control-radius); background: var(--aimh-alert-bg); margin-block-end: var(--aimh-space-stack-product); }
  .aimh-alert[data-tone="warning"] { border-inline-start-color: var(--aimh-alert-warning-border); }
  .aimh-alert[data-tone="critical"] { border-inline-start-color: var(--aimh-alert-critical-border); }
  .aimh-alert[data-tone="success"] { border-inline-start-color: var(--aimh-alert-success-border); }
  .aimh-alert > .aimh-glyph { inline-size: 20px; block-size: 20px; margin-block-start: 2px; }
  .aimh-alert__body > :last-child { margin-block-end: 0; }
  .aimh-alert__actions { display: flex; gap: var(--aimh-space-8); flex-wrap: wrap; margin-block-start: var(--aimh-space-8); }
  /* Surface / Card (013 §115–116; card only for actionable units) */
  .aimh-surface { background: var(--aimh-surface-card-bg); border: 1px solid var(--aimh-surface-card-border); border-radius: var(--aimh-surface-card-radius); padding: var(--aimh-space-24); }
  .aimh-surface[data-elevation="raised"] { box-shadow: var(--aimh-shadow-elevated); }
  .aimh-card { display: block; text-decoration: none; color: inherit; }
  [data-register="public"] .aimh-card--interactive:hover { transform: scale(var(--aimh-motion-scale-card-hover)); transition: transform var(--aimh-motion-duration-fast) var(--aimh-motion-easing-state); }
  /* Definition list of facts (013 §67) */
  .aimh-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--aimh-space-4) var(--aimh-space-16); }
  .aimh-facts dt { color: var(--aimh-text-secondary); font-size: var(--aimh-text-label-size); }
  .aimh-facts dd { margin: 0; }
  /* Table primitives (013 §60–66; no zebra) */
  .aimh-table { inline-size: 100%; font-variant-numeric: tabular-nums; font-size: var(--aimh-text-data-size); }
  .aimh-table th { text-align: start; color: var(--aimh-table-header-fg); font-weight: 500; block-size: var(--aimh-row-standard); padding: 0 var(--aimh-space-12); border-block-end: 1px solid var(--aimh-border-subtle); position: sticky; inset-block-start: 0; background: var(--aimh-surface-default); }
  .aimh-table td { block-size: var(--aimh-row-standard); padding: 0 var(--aimh-space-12); border-block-end: 1px solid var(--aimh-table-row-border); vertical-align: middle; }
  .aimh-table tr:hover > td { background: var(--aimh-table-row-hover); }
  .aimh-table .aimh-num { text-align: end; }
  .aimh-table[data-density="compact"] :is(th, td) { block-size: var(--aimh-row-compact); }
  /* Loading — skeleton at final geometry (018 §48) */
  .aimh-skeleton { background: var(--aimh-skeleton-bg); border-radius: var(--aimh-control-radius); color: transparent !important; animation: aimh-pulse var(--aimh-motion-loop-skeleton) ease-in-out infinite; }
  .aimh-skeleton * { visibility: hidden; }
  @keyframes aimh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
  @keyframes aimh-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .aimh-skeleton, .aimh-btn[aria-busy="true"]::after { animation: none; } }
  /* Chip (active filter) */
  .aimh-chip { display: inline-flex; align-items: center; gap: var(--aimh-space-4); min-block-size: 28px; padding: 0 var(--aimh-space-8); border: 1px solid var(--aimh-border-subtle); border-radius: var(--aimh-radius-pill); font-size: var(--aimh-text-caption-size); background: var(--aimh-surface-default); }
  .aimh-glyph { display: inline-block; inline-size: 1em; block-size: 1em; flex: none; }
  /* Radio group "with description" (013 Radio §variants) — one decision, one row per option.
     The row is a <label>: the whole row is the hit target, and the native radio keeps the
     roving focus and arrow-key behaviour a custom div would have to reimplement badly. */
  .aimh-choices { display: grid; gap: var(--aimh-space-8); border: 0; padding: 0; margin: 0 0 var(--aimh-space-24); min-inline-size: 0; }
  .aimh-choices > legend { font-family: var(--aimh-font-family-heading); font-weight: 600; font-size: var(--aimh-text-local-heading-size); padding: 0; margin-block-end: var(--aimh-space-12); }
  .aimh-choice { display: grid; grid-template-columns: auto 1fr; gap: var(--aimh-space-12); align-items: start; min-block-size: var(--aimh-target-min); padding: var(--aimh-space-12) var(--aimh-space-16); border: 1px solid var(--aimh-border-subtle); border-radius: var(--aimh-control-radius); background: var(--aimh-surface-default); cursor: pointer; }
  .aimh-choice:hover { background: var(--aimh-surface-subtle); }
  .aimh-choice input { inline-size: 20px; block-size: 20px; margin-block-start: 2px; accent-color: var(--aimh-brand-primary); }
  .aimh-choice:has(input:checked) { border-color: var(--aimh-brand-primary); background: var(--aimh-surface-selected); }
  .aimh-choice:has(input:focus-visible) { outline: var(--aimh-focus-width) solid var(--aimh-focus-ring); outline-offset: var(--aimh-focus-offset); }
  .aimh-choice strong { display: block; font-weight: 600; }
  .aimh-choice span { display: block; color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); }
  /* Stepper (014 Stepper: horizontal · vertical · compact) — where you are, never a link to
     a step you have not earned. Narrow collapses to "Step 2 of 5" plus the current label. */
  .aimh-stepper { margin-block-end: var(--aimh-space-24); }
  .aimh-stepper ol { display: flex; flex-wrap: wrap; gap: var(--aimh-space-8) var(--aimh-space-16); list-style: none; margin: 0; padding: 0; }
  .aimh-stepper li { display: flex; align-items: center; gap: var(--aimh-space-8); color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); }
  .aimh-stepper li::before { content: attr(data-n); display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: var(--aimh-radius-pill); border: 1px solid var(--aimh-border-strong); font-size: var(--aimh-text-caption-size); }
  .aimh-stepper li[data-state="done"]::before { background: var(--aimh-brand-primary); border-color: var(--aimh-brand-primary); color: var(--aimh-brand-on-primary); }
  .aimh-stepper li[data-state="current"] { color: var(--aimh-text-primary); font-weight: 600; }
  .aimh-stepper li[data-state="current"]::before { border-color: var(--aimh-brand-primary); border-width: 2px; color: var(--aimh-text-primary); }
  .aimh-stepper__count { display: none; font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-secondary); margin: 0; }
  @media (max-width: 40rem) {
    .aimh-stepper ol { display: none; }
    .aimh-stepper__count { display: block; }
  }
  /* Disclosure (013 §Disclosure, details/summary) — help that is there when asked for. */
  .aimh-disclosure { border: 1px solid var(--aimh-border-subtle); border-radius: var(--aimh-control-radius); background: var(--aimh-surface-default); margin-block-end: var(--aimh-space-16); }
  .aimh-disclosure > summary { display: flex; align-items: center; min-block-size: var(--aimh-target-min); padding: var(--aimh-space-8) var(--aimh-space-16); font-weight: 500; cursor: pointer; }
  .aimh-disclosure > :not(summary) { padding: 0 var(--aimh-space-16); }
  .aimh-disclosure > :last-child { padding-block-end: var(--aimh-space-16); }
  /* FileUpload / FileItem (013 §FileUpload, §FileItem) — long names wrap, never overflow. */
  .aimh-files { list-style: none; margin: var(--aimh-space-8) 0 0; padding: 0; display: grid; gap: var(--aimh-space-4); }
  .aimh-files li { display: flex; flex-wrap: wrap; gap: var(--aimh-space-8); align-items: baseline; font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-secondary); overflow-wrap: anywhere; }
  /* DefinitionList "stacked (narrow) · side-by-side" (013 §67) for the review step. */
  .aimh-review { display: grid; gap: var(--aimh-space-16); }
  .aimh-review > div { display: grid; gap: var(--aimh-space-4); padding-block-end: var(--aimh-space-16); border-block-end: 1px solid var(--aimh-border-divider); }
  .aimh-review dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--aimh-space-4) var(--aimh-space-16); margin: 0; }
  .aimh-review dt { color: var(--aimh-text-secondary); font-size: var(--aimh-text-label-size); }
  .aimh-review dd { margin: 0; overflow-wrap: anywhere; }
  @media (max-width: 30rem) { .aimh-review dl { grid-template-columns: 1fr; } }
  /* SignatureBlock "drawn" (013 §SignatureBlock) — `touch-action: none` inside the canvas
     is what makes a finger draw instead of scrolling the page away. It is not a zoom lock:
     the page around it stays pinchable (DEBT-A11Y-002 / FE-004). */
  .aimh-signature { display: block; inline-size: 100%; block-size: 190px; border: 2px dashed var(--aimh-border-strong); border-radius: var(--aimh-control-radius); background: var(--aimh-surface-default); touch-action: none; }
  .aimh-signature[data-size="sm"] { block-size: 150px; }
  /* The reference number is read aloud on the phone and copied by hand: it must never be
     clipped, at any width, in any language. */
  .aimh-reference { font-family: var(--aimh-font-family-mono); font-size: var(--aimh-text-metric-size); color: var(--aimh-brand-primary); overflow-wrap: anywhere; margin: var(--aimh-space-4) 0 var(--aimh-space-16); }
}

/* ── 40-editorial.css ── */
/* editorial — public register composition (022 · Direction 2026-09-14).

   The public pages were built from the same primitives as the working screens:
   headings, paragraphs, and a card for every idea. That reads as a form, not as
   an organisation. This layer gives the public register what it was missing —
   scale contrast, air, photography with a shape, and two deliberate brand
   surfaces — without introducing a single new colour: every value below is an
   existing token. No shadows, no pills, no decorative frames, no loops. The
   rhythm comes from space and hairlines, never from boxes.

   Scope: opt in with `main.aimh-editorial`. Nothing here touches the pages that
   still use `main.aimh-public` or the legacy stylesheet. */
@layer patterns {

  /* ── page rhythm ───────────────────────────────────────────────────────
     A section is separated from the next by air, not by a rule. Only the
     quiet/brand bands change surface, so the eye reads three or four moments
     down the page instead of fifteen equal blocks. */
  .aimh-editorial > section { padding-block: var(--aimh-space-section-public-lg); }
  .aimh-editorial > section:first-child { padding-block-start: var(--aimh-space-48); }
  .aimh-editorial [data-tone="quiet"] { background: var(--aimh-surface-canvas-alt); }
  .aimh-editorial [data-tone="brand"] { background: var(--aimh-brand-primary); color: var(--aimh-brand-on-primary); }
  .aimh-editorial [data-tone="brand"] :is(h2, p, li, strong, small) { color: inherit; }
  .aimh-editorial [data-tone="brand"] a:not(.aimh-btn) { color: inherit; }
  .aimh-editorial [data-tone="brand"] .aimh-btn[data-emphasis="primary"] { background: var(--aimh-brand-on-primary); color: var(--aimh-brand-primary); border-color: var(--aimh-brand-on-primary); }
  .aimh-editorial [data-tone="brand"] .aimh-btn[data-emphasis="primary"]:hover { background: var(--aimh-surface-canvas-alt); border-color: var(--aimh-surface-canvas-alt); }
  .aimh-editorial [data-tone="brand"] .aimh-btn[data-emphasis="secondary"] { color: var(--aimh-brand-on-primary); border-color: var(--aimh-brand-on-primary); }

  /* ── typographic scale ─────────────────────────────────────────────────
     Three registers only: display, statement, lead. Everything else is body.
     The contrast between them is the design. */
  .aimh-display { font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-display-size); line-height: var(--aimh-text-display-lh); letter-spacing: -0.025em; font-weight: 700; margin: 0 0 var(--aimh-space-24); text-wrap: balance; }
  .aimh-statement { font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-statement-size); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 var(--aimh-space-16); text-wrap: balance; }
  .aimh-editorial .aimh-lead { font-size: var(--aimh-text-lead-size); line-height: 1.55; color: var(--aimh-text-secondary); max-inline-size: 46ch; }
  .aimh-editorial [data-tone="brand"] .aimh-lead { color: inherit; }
  .aimh-eyebrow { display: block; font-size: var(--aimh-text-overline-size); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--aimh-text-secondary); margin: 0 0 var(--aimh-space-16); }
  .aimh-editorial [data-tone="brand"] .aimh-eyebrow { color: inherit; }

  /* ── hero: las caras pesan tanto como las palabras ────────────────────
     Empezó 55/45 con la composición cuadrada. Dirección pidió imágenes
     grandes, y las únicas fotografías reales que AIMH tiene son estos tres
     retratos: si han de ser el momento visual, tienen que ocupar sitio de
     verdad. 46/54 a favor de la foto, y el conjunto en vertical (4:5) en vez
     de cuadrado — la misma anchura da bastante más alto, así que las caras
     crecen sin recortar a nadie por el cuello. */
  .aimh-ed-hero { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: var(--aimh-space-editorial-gutter); align-items: center; }
  .aimh-ed-hero__say > :last-child { margin-block-end: 0; }
  .aimh-ed-hero__meta { margin: var(--aimh-space-24) 0 0; font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-secondary); max-inline-size: 46ch; }

  /* ── hero photograph ───────────────────────────────────────────────────
     La foto se compuso con los sujetos a la derecha y el 40 % izquierdo
     limpio, así que aquí NO se recorta por el centro: `object-position`
     empuja el encuadre hacia la derecha cuando la caja acaba siendo más
     alta de lo que el archivo da de sí, que es lo que pasa en tablet.
     `aspect-ratio` reserva el hueco antes de que la imagen llegue, para que
     el titular no dé el salto que da toda portada con foto grande. */
  .aimh-ed-hero__see { margin: 0; }
  .aimh-ed-hero__see img { inline-size: 100%; block-size: auto; aspect-ratio: 1731 / 908; object-fit: cover; object-position: 70% 50%; border-radius: var(--aimh-radius-lg); display: block; }
  .aimh-ed-hero__see figcaption { margin-block-start: var(--aimh-space-12); font-size: var(--aimh-text-caption-size); line-height: 1.55; color: var(--aimh-text-secondary); max-inline-size: 60ch; }

  /* Services invierte el héroe: texto a la derecha, imagen a la izquierda. Es
     la misma casa vista desde otro lado — se reconoce el sistema y no parece
     que hayas vuelto a la portada por error. */
  .aimh-ed-hero--flip .aimh-ed-hero__say { order: 2; }
  .aimh-ed-hero--flip .aimh-ed-hero__see { order: 1; }

  /* Hueco de foto reservado y declarado. Pinta el cielo del sistema, no una
     fotografía prestada de otra sección: una imagen de relleno aquí seria
     exactamente lo que Direccion prohibio. Se va en cuanto llega el asset. */
  /* Con tope de altura. Sin él, un slot a ancho completo en /resources daba un
     rectángulo gris de casi 900 px: una familia no lee «foto reservada», lee
     «esta página está rota». El hueco tiene que verse como espacio reservado,
     no como un hueco que se comió la pantalla. En el héroe (columna de ~560)
     no cambia nada: ya quedaba por debajo del tope. */
  .aimh-ed-hero__see--pending { aspect-ratio: 16 / 9; max-block-size: 22rem; border-radius: var(--aimh-radius-lg); background: var(--aimh-surface-subtle); border: 1px solid var(--aimh-border-subtle); }

  /* ── services: los seis programas ──────────────────────────────────────
     Rejilla deliberadamente desigual. ABA Therapy ocupa el doble porque no es
     «uno de seis servicios»: es el servicio, y los otros cinco giran a su
     alrededor. Seis tarjetas iguales dirian lo contrario. */
  .aimh-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--aimh-space-32); list-style: none; margin: var(--aimh-space-48) 0 0; padding: 0; }
  .aimh-svc { padding-block-start: var(--aimh-space-24); border-block-start: 2px solid var(--aimh-border-strong); }
  .aimh-svc--lead { grid-column: span 2; }
  .aimh-svc__icon { inline-size: 56px; block-size: 56px; margin-block-end: var(--aimh-space-16); }
  .aimh-svc h3 { font-size: var(--aimh-text-subsection-size); margin: 0 0 var(--aimh-space-8); }
  .aimh-svc--lead h3 { font-size: var(--aimh-text-section-title-size); }
  .aimh-svc h3 a { color: inherit; text-decoration: none; }
  .aimh-svc h3 a:hover, .aimh-svc h3 a:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }
  .aimh-svc p { margin: 0 0 var(--aimh-space-8); color: var(--aimh-text-secondary); }
  .aimh-svc__meta { font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-muted); }

  /* ── services: los cinco entornos ──────────────────────────────────────
     Lista, no tarjetas: son el mismo servicio en sitios distintos, y cinco
     tarjetas los convertirian en cinco productos que hay que elegir. */
  .aimh-where { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--aimh-space-32); list-style: none; margin: var(--aimh-space-48) 0 0; padding: 0; }
  .aimh-where li { display: flex; flex-direction: column; gap: var(--aimh-space-8); padding-block-start: var(--aimh-space-16); border-block-start: 1px solid currentColor; }
  .aimh-where b { font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-subsection-size); }
  .aimh-where span { font-size: var(--aimh-text-body-sm-size); opacity: 0.85; }

  /* ── families: el camino ───────────────────────────────────────────────
     Dirección pidió que Families no fuera un muro de tarjetas. Esto es una
     línea vertical con el número colgando en el margen: se lee como un
     recorrido porque es un recorrido, y en móvil sigue siendo una lista
     tocable en vez de seis cajas apiladas. */
  .aimh-path { list-style: none; margin: var(--aimh-space-48) 0 0; padding: 0; display: grid; gap: var(--aimh-space-32); max-inline-size: 62ch; }
  .aimh-path > li { position: relative; padding-inline-start: var(--aimh-space-64); padding-block-end: var(--aimh-space-32); border-block-end: 1px solid var(--aimh-border-subtle); }
  .aimh-path > li:last-child { border-block-end: 0; padding-block-end: 0; }
  .aimh-path__n { position: absolute; inset-inline-start: 0; inset-block-start: 0.1em; font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-subsection-size); font-weight: 700; color: var(--aimh-brand-primary); font-variant-numeric: tabular-nums; }
  .aimh-path h3 { font-size: var(--aimh-text-subsection-size); margin: 0 0 var(--aimh-space-8); }
  .aimh-path h3 a { color: inherit; text-decoration: none; }
  .aimh-path h3 a:hover, .aimh-path h3 a:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }
  .aimh-path p { margin: 0; color: var(--aimh-text-secondary); }

  /* prosa larga: una medida de lectura, no el ancho de la pantalla */
  .aimh-prose { max-inline-size: 66ch; }
  .aimh-prose h2 { margin-block: var(--aimh-space-48) var(--aimh-space-16); }
  .aimh-prose p { color: var(--aimh-text-secondary); }

  /* definiciones: dos columnas en escritorio, apiladas en móvil */
  .aimh-defs { display: grid; grid-template-columns: max-content 1fr; gap: var(--aimh-space-12) var(--aimh-space-32); margin: var(--aimh-space-24) 0 0; }
  .aimh-defs dt { font-weight: 700; font-family: var(--aimh-font-family-heading); }
  .aimh-defs dd { margin: 0; color: var(--aimh-text-secondary); }

  /* migas: pequeñas, sin caja, y con el separador puesto por CSS para que el
     lector de pantalla no lo lea como contenido */
  .aimh-crumbs { padding-block: var(--aimh-space-16) 0; }
  .aimh-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--aimh-space-8); list-style: none; margin: 0; padding: 0; font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-secondary); }
  .aimh-crumbs li + li::before { content: "/"; margin-inline-end: var(--aimh-space-8); opacity: 0.5; }

  /* ── providers ─────────────────────────────────────────────────────────
     Registro más seco que Families: aquí nadie necesita que le tranquilicen,
     necesitan saber qué mandar y adónde. Sin fotos decorativas entre bloques. */
  .aimh-note { margin-block-start: var(--aimh-space-24); font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-muted); max-inline-size: 62ch; border-inline-start: 2px solid var(--aimh-border-strong); padding-inline-start: var(--aimh-space-16); }

  /* Zonas: agrupadas por condado. El condado sale del dato, no de un titular
     escrito a mano, así que la página no puede afirmar cobertura que no hay. */
  .aimh-areas__set + .aimh-areas__set { margin-block-start: var(--aimh-space-32); }
  .aimh-areas__set h3 { font-size: var(--aimh-text-subsection-size); margin: 0 0 var(--aimh-space-12); }
  .aimh-areas { display: flex; flex-wrap: wrap; gap: var(--aimh-space-12) var(--aimh-space-24); list-style: none; margin: 0; padding: 0; }
  .aimh-areas__tag { font-size: var(--aimh-text-badge-size); text-transform: uppercase; letter-spacing: 0.08em; color: var(--aimh-brand-primary); }

  .aimh-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aimh-space-16); list-style: none; margin: var(--aimh-space-32) 0 0; padding: 0; }
  .aimh-doc a { display: flex; flex-direction: column; gap: var(--aimh-space-4); padding: var(--aimh-space-24); border: 1px solid var(--aimh-border-subtle); border-radius: var(--aimh-radius-lg); text-decoration: none; color: inherit; }
  .aimh-doc span { font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-muted); }

  .aimh-partners { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aimh-space-24) var(--aimh-space-48); list-style: none; margin: var(--aimh-space-32) 0 0; padding: 0; }
  .aimh-partners img { block-size: 32px; inline-size: auto; }

  /* Contacto: pares etiqueta/valor, no un formulario. Un pediatra quiere el
     número, no rellenar campos para que alguien le llame. */
  .aimh-contactlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--aimh-space-24); list-style: none; margin: var(--aimh-space-32) 0 0; padding: 0; }
  .aimh-contactlist li { display: flex; flex-direction: column; gap: var(--aimh-space-4); padding-block-start: var(--aimh-space-12); border-block-start: 1px solid currentColor; }
  .aimh-contactlist b { font-size: var(--aimh-text-body-sm-size); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }

  /* ── insurance: directorio, no galería ─────────────────────────────────
     Cada pagador lleva su estado pegado. Un logotipo suelto es una promesa de
     contrato, y de 21 pagadores solo dos lo tienen. */
  .aimh-payer-tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--aimh-space-24); margin-block-start: var(--aimh-space-32); }
  .aimh-field { display: flex; flex-direction: column; gap: var(--aimh-space-4); margin: 0; }
  .aimh-field label { font-size: var(--aimh-text-body-sm-size); font-weight: 600; }
  .aimh-field :is(input, select) { min-block-size: 44px; padding: var(--aimh-space-8) var(--aimh-space-12); border: 1px solid var(--aimh-border-strong); border-radius: var(--aimh-radius-md); background: var(--aimh-surface-default); color: var(--aimh-text-primary); font: inherit; min-inline-size: 16rem; }
  .aimh-payer-count { margin: 0; font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-muted); }
  .aimh-payer-empty { margin-block-start: var(--aimh-space-32); color: var(--aimh-text-secondary); max-inline-size: 60ch; }

  .aimh-payer-group { margin-block-start: var(--aimh-space-48); }
  .aimh-payer-group h2 { font-size: var(--aimh-text-subsection-size); margin: 0 0 var(--aimh-space-16); padding-block-end: var(--aimh-space-8); border-block-end: 2px solid var(--aimh-border-strong); }
  .aimh-payers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aimh-space-24); list-style: none; margin: 0; padding: 0; }
  .aimh-payer { display: grid; grid-template-columns: 96px 1fr; gap: var(--aimh-space-16); align-items: start; padding: var(--aimh-space-16) 0; border-block-start: 1px solid var(--aimh-border-subtle); }
  .aimh-payer__mark img { inline-size: 100%; block-size: auto; max-block-size: 40px; object-fit: contain; object-position: left center; }
  /* Sin logo no se fabrica un logo: se pone el nombre bien tipografiado. */
  .aimh-payer__name { font-family: var(--aimh-font-family-heading); font-weight: 700; font-size: var(--aimh-text-body-sm-size); line-height: 1.2; display: block; }
  .aimh-payer h3 { font-size: var(--aimh-text-body-size); margin: 0 0 var(--aimh-space-4); }
  .aimh-payer p { margin: 0 0 var(--aimh-space-4); font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-secondary); }
  .aimh-payer__status { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--aimh-text-badge-size); }
  .aimh-payer__status[data-status="contracted"] { color: var(--aimh-brand-primary); }
  .aimh-payer__status:not([data-status="contracted"]) { color: var(--aimh-text-muted); }
  /* El grupo que no está contratado se ve, pero no compite en color con el que sí. */
  .aimh-payer:not([data-status="contracted"]) .aimh-payer__mark img { filter: grayscale(1); opacity: 0.65; }
  .aimh-payer__meta { color: var(--aimh-text-muted); font-size: var(--aimh-text-caption-size); }

  /* ── clinical: el ciclo ────────────────────────────────────────────────
     Cinco pasos que se cierran sobre sí mismos. No son tarjetas porque un
     bucle no es una lista: la última flecha vuelve a la primera, y eso es
     justamente lo que hay que enseñar. */
  .aimh-cycle { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--aimh-space-24); list-style: none; margin: var(--aimh-space-48) 0 0; padding: 0; counter-reset: ciclo; }
  .aimh-cycle > li { position: relative; padding-block-start: var(--aimh-space-32); border-block-start: 2px solid var(--aimh-brand-primary); }
  /* La flecha entre pasos la pone CSS, no el HTML: es decoración, y un lector
     de pantalla no tiene por qué leer «flecha» cinco veces. */
  .aimh-cycle > li + li::before { content: ""; position: absolute; inset-block-start: -7px; inset-inline-start: calc(var(--aimh-space-24) * -1); inline-size: var(--aimh-space-24); block-size: 12px; border-block-start: 2px solid var(--aimh-border-strong); }
  .aimh-cycle__n { display: block; font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-metric-size); font-weight: 700; line-height: 1; color: var(--aimh-brand-primary); margin-block-end: var(--aimh-space-8); font-variant-numeric: tabular-nums; }
  .aimh-cycle h3 { font-size: var(--aimh-text-subsection-size); margin: 0 0 var(--aimh-space-8); }
  .aimh-cycle p { margin: 0; font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-secondary); }

  /* Lista de razones sin viñeta de marca, para bloques comparativos. */
  .aimh-reasons--plain { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ── clinical: gráfica ilustrativa ─────────────────────────────────────
     El pie NO es letra pequeña opcional: es lo que impide que un diagrama
     didáctico se lea como un resultado de cliente. Por eso tiene el mismo
     peso visual que el texto y va dentro de la figura, no al pie de página. */
  .aimh-chart { margin: var(--aimh-space-48) 0 0; max-inline-size: 46rem; }
  .aimh-chart__svg { inline-size: 100%; block-size: auto; color: var(--aimh-brand-primary); background: var(--aimh-surface-default); border: 1px solid var(--aimh-border-subtle); border-radius: var(--aimh-radius-lg); padding: var(--aimh-space-16); }
  .aimh-chart figcaption { margin-block-start: var(--aimh-space-12); font-size: var(--aimh-text-body-sm-size); line-height: 1.55; color: var(--aimh-text-secondary); }
  .aimh-chart figcaption b { color: var(--aimh-text-primary); }

  /* ── clinical: métricas publicadas ─────────────────────────────────────
     La base del dato (población, periodo, n, método) va pegada al número, no
     en una nota al pie: un porcentaje sin su muestra no es un resultado. */
  .aimh-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aimh-space-32); list-style: none; margin: var(--aimh-space-32) 0 0; padding: 0; }
  .aimh-metric { display: flex; flex-direction: column; gap: var(--aimh-space-4); padding-block-start: var(--aimh-space-16); border-block-start: 2px solid var(--aimh-border-strong); }
  .aimh-metric b { font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-metric-size); line-height: 1; color: var(--aimh-brand-primary); }
  .aimh-metric__name { font-weight: 600; }
  .aimh-metric__base { font-size: var(--aimh-text-caption-size); color: var(--aimh-text-muted); }

  /* ── locations: los entornos con fotografía ────────────────────────────
     Tres entornos llevan foto y dos no. Esa asimetría es deliberada y no un
     hueco a rellenar: school expondría a un menor y telehealth obligaría a
     inventar una videollamada con datos en pantalla. Los dos sin foto siguen
     abajo como lista, que es un tratamiento distinto y honesto. */
  .aimh-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--aimh-space-32); list-style: none; margin: var(--aimh-space-48) 0 var(--aimh-space-48); padding: 0; }
  .aimh-settings > li > h3 { font-size: var(--aimh-text-subsection-size); margin: var(--aimh-space-16) 0 var(--aimh-space-8); }
  .aimh-settings > li > p { margin: 0; color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); }
  .aimh-setting__see { margin: 0; aspect-ratio: 4 / 3; }
  .aimh-setting__see img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: var(--aimh-radius-lg); display: block; }

  /* ── portrait composition ──────────────────────────────────────────────
     Four real portraits, one given more room, the other three balanced around
     it. The four source photographs do not share a backdrop, so each sits in an
     identical frame on a common surface: the eye reads the arrangement, not the
     four different studio walls. `object-position` keeps the face in frame when
     the cell crops.

     No name is painted over a face here: a caption on top of a photograph needs
     a dark scrim to stay legible, and that scrim is a colour the palette does
     not have. The names belong to the roster further down, where they can be
     read. Each portrait carries the person's name in `alt`, so nobody using a
     screen reader is looking at four anonymous images. */
  .aimh-portraits { display: grid; grid-template-columns: 1.32fr 1fr; grid-template-rows: 1.32fr 1fr; gap: var(--aimh-space-12); aspect-ratio: 4 / 5; margin: 0; padding: 0; list-style: none; }
  .aimh-portrait { overflow: hidden; border-radius: var(--aimh-radius-md); background: var(--aimh-surface-canvas-alt); min-inline-size: 0; }
  .aimh-portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 22%; }
  /* Con tres retratos la rejilla dejaría una celda vacía. El primero pasa a
     ocupar la columna entera y los otros dos se apilan al lado: la misma idea
     —uno con más sitio, el resto alrededor— sin un hueco. Quién aparece depende
     de quién esté visible, así que la composición tiene que aguantar tres y
     cuatro sin que nadie toque el CSS. */
  .aimh-portraits:has(> :nth-child(3):last-child) > :first-child { grid-row: 1 / span 2; }
  /* Un solo retrato ocupa el marco entero. Es el caso de una clínica dirigida
     por una persona: la foto no se queda pequeña en una esquina de una rejilla
     pensada para cuatro. */
  /* Un retrato solo conserva su proporción de retrato en TODOS los anchos y se
     queda con un ancho máximo: la rejilla ancha de cuatro, aplicada a una sola
     foto, la recortaba en panorámica y le cortaba la frente. */
  .aimh-portraits:has(> :only-child) { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 4 / 5; max-inline-size: 24rem; }

  /* ── trust strip ───────────────────────────────────────────────────────
     One line a family can check itself against before reading anything else. */
  .aimh-ed-trust { padding-block: var(--aimh-space-24); border-block: 1px solid var(--aimh-border-divider); }
  .aimh-ed-trust ul { display: flex; flex-wrap: wrap; gap: var(--aimh-space-8) var(--aimh-space-24); list-style: none; margin: 0; padding: 0; font-size: var(--aimh-text-body-sm-size); font-weight: 500; }
  .aimh-ed-trust li + li { position: relative; }
  .aimh-ed-trust li + li::before { content: "·"; position: absolute; inset-inline-start: calc(var(--aimh-space-24) / -2); color: var(--aimh-text-secondary); }
  .aimh-ed-payers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aimh-space-12) var(--aimh-space-24); list-style: none; margin: var(--aimh-space-16) 0 0; padding: 0; font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-secondary); }
  .aimh-ed-payers img { block-size: 26px; inline-size: auto; opacity: 0.85; }
  /* Cada grupo lleva escrito su estado. Un logotipo sin estado al lado es una
     promesa de contrato, y de los 21 pagadores solo uno está contratado. */
  .aimh-ed-payers__set + .aimh-ed-payers__set { margin-block-start: var(--aimh-space-24); }
  .aimh-ed-payers__lead { margin: 0; font-size: var(--aimh-text-body-sm-size); font-weight: 600; color: var(--aimh-text-primary); }
  .aimh-ed-payers__set + .aimh-ed-payers__set .aimh-ed-payers img { opacity: 0.6; filter: grayscale(1); }

  /* ── the three steps ───────────────────────────────────────────────────
     The numeral is the picture. It is decorative weight, not a label, so it is
     hidden from assistive technology and the step is announced by its heading. */
  .aimh-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--aimh-space-editorial-gutter); list-style: none; margin: var(--aimh-space-48) 0 0; padding: 0; counter-reset: aimh-step; }
  .aimh-step { border-block-start: 1px solid var(--aimh-border-strong); padding-block-start: var(--aimh-space-16); }
  .aimh-step__n { display: block; font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-numeral-size); line-height: 0.9; font-weight: 700; color: var(--aimh-border-subtle); letter-spacing: -0.04em; margin-block-end: var(--aimh-space-12); }
  .aimh-step h3 { font-size: var(--aimh-text-subsection-size); margin: 0 0 var(--aimh-space-8); }
  .aimh-step p { margin: 0; color: var(--aimh-text-secondary); }

  /* ── asymmetric statement + reasons ───────────────────────────────────── */
  .aimh-ed-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--aimh-space-editorial-gutter); align-items: start; }
  .aimh-ed-split > :first-child > :last-child { margin-block-end: 0; }
  .aimh-reasons { list-style: none; margin: 0; padding: 0; }
  .aimh-reason { border-block-start: 1px solid var(--aimh-border-divider); padding-block: var(--aimh-space-24); }
  .aimh-reason:last-child { border-block-end: 1px solid var(--aimh-border-divider); }
  .aimh-reason b { display: block; font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-subsection-size); font-weight: 600; margin-block-end: var(--aimh-space-4); }
  .aimh-reason span { color: var(--aimh-text-secondary); }

  /* ── people, named ─────────────────────────────────────────────────────
     The faces are in the hero. Here they have names, roles and a way through. */
  .aimh-roster { list-style: none; margin: var(--aimh-space-32) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--aimh-space-editorial-gutter); }
  .aimh-roster li { border-block-start: 1px solid var(--aimh-border-divider); padding-block: var(--aimh-space-16); display: flex; align-items: baseline; justify-content: space-between; gap: var(--aimh-space-16); flex-wrap: wrap; }
  .aimh-roster b { font-weight: 600; }
  .aimh-roster span { color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); }

  /* ── editorial link list (services, resources) ────────────────────────── */
  .aimh-ed-list { list-style: none; margin: var(--aimh-space-32) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--aimh-space-editorial-gutter); }
  .aimh-ed-list li { border-block-start: 1px solid var(--aimh-border-divider); }
  .aimh-ed-list a { display: block; padding-block: var(--aimh-space-16); text-decoration: none; color: inherit; min-block-size: var(--aimh-target-min); }
  .aimh-ed-list b { display: block; font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-subsection-size); font-weight: 600; color: var(--aimh-text-link); }
  .aimh-ed-list a:hover b, .aimh-ed-list a:focus-visible b { text-decoration: underline; }
  .aimh-ed-list span { display: block; color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); margin-block-start: var(--aimh-space-4); }

  /* ── banda de cifras ───────────────────────────────────────────────────
     La portada vieja la tenía y Dirección la quiere de vuelta. Aquí va sobre
     el azul de marca y con la cifra a escala de titular, porque una cifra
     pequeña no es un dato: es una nota al pie. Sin cuenta atrás animada — el
     número correcto se pinta desde el primer instante (#592, DEBT-TEMP-003). */
  .aimh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--aimh-space-32); list-style: none; margin: 0; padding: 0; }
  .aimh-stat b { display: block; font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-statement-size); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
  .aimh-stat span { display: block; margin-block-start: var(--aimh-space-8); font-size: var(--aimh-text-body-sm-size); opacity: 0.88; }

  /* ── who we are ────────────────────────────────────────────────────────
     Va al final, por decisión de Dirección: la familia llega aquí cuando ya
     sabe qué hace AIMH y quiere saber quién lo hace. El retrato a la izquierda
     y grande; la lista crece sola cuando entre gente nueva. */
  .aimh-who { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: var(--aimh-space-editorial-gutter); align-items: center; }
  .aimh-who__face { margin: 0; overflow: hidden; border-radius: var(--aimh-radius-lg); background: var(--aimh-surface-canvas-alt); aspect-ratio: 4 / 5; }
  .aimh-who__face img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 20%; }
  .aimh-who__face figcaption { display: none; }
  .aimh-who h3 { font-size: var(--aimh-text-subsection-size); margin: 0 0 var(--aimh-space-4); }
  .aimh-who__role { display: block; color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); margin-block-end: var(--aimh-space-16); }

  /* ── resource shelves ──────────────────────────────────────────────────
     Una portada de recursos es una biblioteca: se lee por zonas, no por
     párrafos. Aquí sí hay superficie, a diferencia del resto de la página, y
     es deliberado — cuatro áreas grandes con su icono, no quince tarjetas
     pequeñas. El color lo pone el icono aprobado, que necesita un fondo sobre
     el que apoyarse; el texto sigue separado por filetes, no por cajas. */
  .aimh-shelves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aimh-space-24); list-style: none; margin: var(--aimh-space-48) 0 0; padding: 0; }
  .aimh-shelf { background: var(--aimh-surface-default); border: 1px solid var(--aimh-border-subtle); border-radius: var(--aimh-radius-lg); padding: var(--aimh-space-32); display: flex; flex-direction: column; }
  .aimh-shelf__icon { inline-size: 64px; block-size: 64px; margin-block-end: var(--aimh-space-16); }
  .aimh-shelf h3 { font-size: var(--aimh-text-subsection-size); margin: 0 0 var(--aimh-space-8); }
  .aimh-shelf > p { color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); margin: 0 0 var(--aimh-space-16); }
  .aimh-shelf ul { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--aimh-border-divider); }
  .aimh-shelf li { border-block-end: 1px solid var(--aimh-border-divider); }
  .aimh-shelf li a { display: block; padding-block: var(--aimh-space-12); min-block-size: var(--aimh-target-min); text-decoration: none; color: var(--aimh-text-link); font-weight: 500; }
  .aimh-shelf li a:hover, .aimh-shelf li a:focus-visible { text-decoration: underline; }
  .aimh-shelf__more { margin: var(--aimh-space-16) 0 0; font-size: var(--aimh-text-body-sm-size); }

  /* ── tips: lo último que hemos escrito ─────────────────────────────────
     Se pinta desde el Site Manager (#home-news). Si no hay ningún artículo
     publicado, la sección se retira sola en vez de enseñar tres huecos. */
  .aimh-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--aimh-space-32); list-style: none; margin: var(--aimh-space-32) 0 0; padding: 0; }
  .aimh-tip { border-block-start: 2px solid var(--aimh-brand-primary); padding-block-start: var(--aimh-space-16); }
  .aimh-tip a { display: block; text-decoration: none; color: inherit; }
  .aimh-tip__cat { display: block; font-size: var(--aimh-text-overline-size); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--aimh-text-secondary); margin-block-end: var(--aimh-space-8); }
  .aimh-tip b { display: block; font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-subsection-size); font-weight: 600; color: var(--aimh-text-link); line-height: 1.25; }
  .aimh-tip a:hover b, .aimh-tip a:focus-visible b { text-decoration: underline; }
  .aimh-tip p { color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); margin: var(--aimh-space-8) 0 0; }

  /* ── resources: el registro de programas públicos ──────────────────────
     Resources es la única página del sitio cuyo trabajo es mandarte fuera:
     a Early Steps, a DCF, a Step Up, a tu distrito escolar. Por eso no se
     compone como las demás. No son tarjetas —una tarjeta invita a hacer clic
     y aquí el clic se lo lleva otra organización— sino entradas de registro:
     un nombre, una definición corta en pares término/valor, y los enlaces
     oficiales al final. Se lee como una ficha de referencia porque lo es, y
     porque una familia que llega aquí a las once de la noche necesita
     encontrar el requisito exacto, no que la seduzcan.
     La franja lateral gruesa es lo que separa visualmente «esto lo hace el
     Estado» de «esto lo hacemos nosotros»: la regla de no inventar socios
     también se aplica al no dar a entender que estos programas son nuestros. */
  .aimh-reg { list-style: none; margin: var(--aimh-space-48) 0 0; padding: 0; }
  .aimh-reg > li { border-inline-start: 3px solid var(--aimh-border-strong); padding-inline-start: var(--aimh-space-32); padding-block: var(--aimh-space-8) var(--aimh-space-32); }
  .aimh-reg > li + li { margin-block-start: var(--aimh-space-32); }
  .aimh-reg h3 { font-size: var(--aimh-text-subsection-size); margin: 0 0 var(--aimh-space-4); }
  .aimh-reg__who { display: block; font-size: var(--aimh-text-overline-size); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--aimh-text-muted); margin-block-end: var(--aimh-space-16); }
  /* pares término/valor: la etiqueta manda menos que el dato, así que va en
     gris y el dato en el color del texto. En móvil se apilan. */
  .aimh-reg dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--aimh-space-8) var(--aimh-space-24); margin: 0; }
  .aimh-reg dt { font-size: var(--aimh-text-body-sm-size); font-weight: 600; color: var(--aimh-text-muted); }
  .aimh-reg dd { margin: 0; font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-secondary); }
  .aimh-reg dd b { color: var(--aimh-text-primary); }
  .aimh-reg__go { display: flex; flex-wrap: wrap; gap: var(--aimh-space-16) var(--aimh-space-24); margin: var(--aimh-space-16) 0 0; padding: 0; list-style: none; font-size: var(--aimh-text-body-sm-size); }
  .aimh-reg__go a { min-block-size: var(--aimh-target-min); display: inline-flex; align-items: center; }
  /* La entrada que sí es nuestra se distingue por la franja de marca, no por
     un badge: nada aquí debe parecer un sello de aprobación del Estado. */
  .aimh-reg > li[data-ours] { border-inline-start-color: var(--aimh-brand-primary); }

  /* ── careers: roles ≠ vacantes ─────────────────────────────────────────
     Dos cosas que la página vieja mezclaba, y de mezclarlas salía que la web
     ofreciera cinco puestos cuando RR. HH. no tenía ninguno abierto.
     Un ROL es una categoría de empleo que existe en la casa. Se compone como
     una ficha seca, SIN botón: un «Apply» aquí sería exactamente la mentira
     que se está corrigiendo. */
  .aimh-roles__set + .aimh-roles__set { margin-block-start: var(--aimh-space-48); }
  .aimh-roles__set h3 { font-size: var(--aimh-text-subsection-size); margin: 0 0 var(--aimh-space-16); padding-block-end: var(--aimh-space-8); border-block-end: 2px solid var(--aimh-border-strong); }
  .aimh-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aimh-space-32); list-style: none; margin: 0; padding: 0; }
  .aimh-role b { font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-subsection-size); font-weight: 700; display: block; }
  .aimh-role__full { display: block; font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-secondary); margin-block-start: var(--aimh-space-4); }
  .aimh-role p { margin: var(--aimh-space-12) 0 0; font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-secondary); }
  /* El código del formulario no es decoración: dice que el puesto existe de
     verdad en el circuito de contratación, no solo en una página web. */
  .aimh-role__form { display: block; margin-block-start: var(--aimh-space-8); font-size: var(--aimh-text-caption-size); text-transform: uppercase; letter-spacing: 0.08em; color: var(--aimh-text-muted); }

  /* Una VACANTE sí lleva acción, porque sí existe. */
  .aimh-vacancies { list-style: none; margin: var(--aimh-space-32) 0 0; padding: 0; }
  .aimh-vacancy { padding-block: var(--aimh-space-32); border-block-start: 2px solid var(--aimh-brand-primary); }
  .aimh-vacancy + .aimh-vacancy { margin-block-start: var(--aimh-space-8); }
  .aimh-vacancy h3 { font-size: var(--aimh-text-section-title-size); margin: 0 0 var(--aimh-space-4); }
  .aimh-vacancy__meta { margin: 0 0 var(--aimh-space-16); font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-muted); }
  .aimh-vacancy p { max-inline-size: 68ch; }
  /* El estado vacío no es un error ni una decepción: es la respuesta correcta
     cuando no hay nada abierto, y sigue ofreciendo la única acción real. */
  .aimh-vacancies__none { border-inline-start: 3px solid var(--aimh-border-strong); padding-inline-start: var(--aimh-space-32); margin-block-start: var(--aimh-space-32); max-inline-size: 68ch; }
  .aimh-vacancies__none b { font-size: var(--aimh-text-subsection-size); font-family: var(--aimh-font-family-heading); }
  .aimh-vacancies__wait { color: var(--aimh-text-muted); font-size: var(--aimh-text-body-sm-size); margin-block-start: var(--aimh-space-32); }

  /* ── about / team: las personas ────────────────────────────────────────
     Registro institucional, no de reclutamiento: un retrato grande, el nombre,
     el cargo y lo que esa persona hace. Sin tarjeta, sin sombra, sin hover que
     levante nada — una persona no es un producto que se destaque al pasar el
     ratón. Filete arriba y aire; el peso lo lleva el retrato.
     Los retratos son fotografías REALES del personal. Una escena generada no
     se pone nunca al lado de un nombre: la regla noFakeColleagues del
     registro de medios. */
  .aimh-people { list-style: none; margin: var(--aimh-space-48) 0 0; padding: 0; }
  .aimh-person { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--aimh-space-editorial-gutter); align-items: start; padding-block: var(--aimh-space-48); border-block-start: 1px solid var(--aimh-border-divider); }
  .aimh-person__face { aspect-ratio: 4 / 5; border-radius: var(--aimh-radius-lg); overflow: hidden; background: var(--aimh-surface-subtle); display: flex; align-items: center; justify-content: center; }
  .aimh-person__face img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; }
  .aimh-person__face span { font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-metric-size); font-weight: 700; color: var(--aimh-text-muted); }
  .aimh-person__say h3 { font-size: var(--aimh-text-section-title-size); margin: 0 0 var(--aimh-space-4); }
  .aimh-person__say h3 a { color: inherit; text-decoration: none; }
  .aimh-person__say h3 a:hover, .aimh-person__say h3 a:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }
  .aimh-person__role { margin: 0; font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-subsection-size); color: var(--aimh-brand-primary); }
  /* La credencial sale del dato, nunca tecleada: un número de licencia escrito
     a mano en un HTML sigue diciendo lo de antes el día que cambie. */
  .aimh-person__cred { margin: var(--aimh-space-8) 0 0; font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-muted); }
  .aimh-person__dept::before { content: "· "; }
  /* Licencia y NPI: pares etiqueta/valor, en cifras tabulares. Son datos que
     alguien copia para comprobarlos, no adorno. */
  .aimh-person__lic { display: grid; grid-template-columns: max-content 1fr; gap: var(--aimh-space-4) var(--aimh-space-16); margin: var(--aimh-space-12) 0 0; font-size: var(--aimh-text-caption-size); }
  .aimh-person__lic dt { color: var(--aimh-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
  .aimh-person__lic dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--aimh-text-secondary); }
  .aimh-person__say p { max-inline-size: 60ch; }
  .aimh-person__meta { font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-muted); }

  /* ── herramientas: un indice que se lee de un vistazo ──────────────────
     Tools es la unica area que NO lleva fotografia: aqui la imagen no aporta
     contexto —una foto de una familia mirando un portatil no ayuda a nadie a
     elegir entre el glosario y la verificacion de seguro—, asi que el peso
     visual lo lleva el iconograma del sistema y el aire entre grupos.
     Dos columnas en escritorio, una en movil. Sin sombras ni tarjetas
     flotantes: filete superior, igual que el resto del registro publico. */
  .aimh-toolset + .aimh-toolset { margin-block-start: var(--aimh-space-64); }
  .aimh-toolset > h3 { font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-section-title-size); margin: 0 0 var(--aimh-space-8); }
  .aimh-tools { list-style: none; margin: var(--aimh-space-32) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aimh-space-48) var(--aimh-space-editorial-gutter); }
  .aimh-tool { padding-block-start: var(--aimh-space-24); border-block-start: 2px solid var(--aimh-border-strong); }
  /* La pieza destacada ocupa las dos columnas y estrena el filete de marca:
     el glosario tiene 101 terminos reales detras, y eso se nota o no existe. */
  .aimh-tool[data-featured="true"] { grid-column: 1 / -1; border-block-start-color: var(--aimh-brand-primary); }
  .aimh-tool__icon { display: block; inline-size: 48px; block-size: 48px; margin-block-end: var(--aimh-space-16); }
  .aimh-tool h4 { font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-subsection-size); margin: 0 0 var(--aimh-space-8); }
  .aimh-tool[data-featured="true"] h4 { font-size: var(--aimh-text-section-title-size); }
  .aimh-tool h4 a { color: inherit; text-decoration: none; }
  .aimh-tool h4 a:hover, .aimh-tool h4 a:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }
  .aimh-tool p { margin: 0 0 var(--aimh-space-12); color: var(--aimh-text-secondary); max-inline-size: 58ch; }
  /* El limite de una herramienta se lee ANTES de usarla, no en letra pequena
     al final: un padre que cree que el cuestionario decide su elegibilidad ya
     ha entendido mal la pagina aunque el pie diga lo contrario. */
  .aimh-tool__limit { font-size: var(--aimh-text-body-sm-size); border-inline-start: 3px solid var(--aimh-border-strong); padding-inline-start: var(--aimh-space-16); color: var(--aimh-text-muted); }
  .aimh-tool__go { margin-block-end: 0; }

  /* ── biblioteca: la categoria ordena, no filtra ────────────────────────
     El indice viejo era una rejilla de veinte tarjetas iguales con un filtro
     encima. Un lector que busca «me acaban de denegar el Medicaid» no quiere
     manejar un filtro: quiere ver los grupos y elegir. Se agrupa por la CLAVE
     de categoria, con su titulo, y dentro la lista editorial de siempre. */
  .aimh-lib + .aimh-lib { margin-block-start: var(--aimh-space-48); }
  .aimh-lib > h3 { font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-subsection-size); text-transform: uppercase; letter-spacing: 0.1em; color: var(--aimh-text-secondary); margin: 0; padding-block-end: var(--aimh-space-8); border-block-end: 2px solid var(--aimh-brand-primary); }
  .aimh-lib .aimh-ed-list { margin-block-start: var(--aimh-space-8); }

  /* Acuse de la inscripcion: pares dato/valor, no un bloque monoespaciado. */
  .aimh-record { display: grid; grid-template-columns: max-content 1fr; gap: var(--aimh-space-4) var(--aimh-space-16); margin: 0 0 var(--aimh-space-16); }
  .aimh-record dt { font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-secondary); }
  .aimh-record dd { margin: 0; font-weight: 600; }

  /* ── eventos: el estado se ve antes que el titular ─────────────────────
     Un evento pasado y uno proximo no pueden parecerse. La etiqueta de estado
     va ARRIBA, no debajo ni en una esquina: es lo primero que hay que saber, y
     la pagina vieja no la tenia en absoluto — el taller del sabado seguia con
     su boton de inscripcion tres dias despues.
     El archivo va en gris y sin accion: la accion ya no existe. */
  .aimh-events { list-style: none; margin: var(--aimh-space-32) 0 0; padding: 0; }
  .aimh-event { padding-block: var(--aimh-space-32); border-block-start: 2px solid var(--aimh-brand-primary); }
  .aimh-event + .aimh-event { margin-block-start: var(--aimh-space-8); }
  .aimh-event h3 { font-size: var(--aimh-text-section-title-size); margin: 0 0 var(--aimh-space-8); }
  .aimh-event__state { margin: 0 0 var(--aimh-space-8); font-size: var(--aimh-text-overline-size); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--aimh-text-muted); }
  .aimh-event__when { margin: 0 0 var(--aimh-space-4); font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-subsection-size); }
  .aimh-event__meta { margin: 0 0 var(--aimh-space-16); font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-muted); }
  .aimh-event p { max-inline-size: 68ch; }
  /* Lo pasado se apaga: sigue consultable, deja de competir. */
  .aimh-events--past .aimh-event { border-block-start-color: var(--aimh-border-subtle); }
  .aimh-events--past .aimh-event :is(h3, .aimh-event__when) { color: var(--aimh-text-secondary); }
  .aimh-event[data-state="cancelled"] .aimh-event__state { color: var(--aimh-status-critical-fg); }
  .aimh-event[data-state="cancelled"] :is(h3, .aimh-event__when) { text-decoration: line-through; text-decoration-thickness: 1px; }

  /* Dos fotografias a la par. Apiladas una debajo de otra, dos bloques
     grandes seguidos se leen como una galeria que no dice nada; en pareja se
     leen como un momento: dos vistas del mismo sitio a la misma hora. */
  .aimh-ed-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aimh-space-editorial-gutter); margin-block-start: var(--aimh-space-48); }
  .aimh-ed-pair > figure { margin: 0; }

  /* El formulario de solicitud: el unico de la pagina, y el unico sitio donde
     alguien escribe algo. Aire alrededor y ancho de lectura, no una caja gris. */
  .aimh-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aimh-space-24); margin-block-start: var(--aimh-space-48); max-inline-size: 52rem; }
  .aimh-form > .aimh-field--wide, .aimh-form > .aimh-form__foot { grid-column: 1 / -1; }
  .aimh-form textarea { min-block-size: 8rem; padding: var(--aimh-space-8) var(--aimh-space-12); border: 1px solid var(--aimh-border-strong); border-radius: var(--aimh-radius-md); background: var(--aimh-surface-default); color: var(--aimh-text-primary); font: inherit; resize: vertical; }
  .aimh-form input[type="file"] { font: inherit; }
  .aimh-form__consent { display: flex; gap: var(--aimh-space-12); align-items: flex-start; font-size: var(--aimh-text-body-sm-size); cursor: pointer; }
  .aimh-form__consent input { margin-block-start: 0.25em; inline-size: 1.1rem; block-size: 1.1rem; }
  .aimh-form__foot { display: flex; flex-direction: column; gap: var(--aimh-space-16); }
  /* El señuelo: invisible para una persona, presente para un robot. No se
     oculta con display:none — eso lo delata. */
  .aimh-form__trap { position: absolute; inset-inline-start: -9999px; }
  .aimh-form__error { color: var(--aimh-status-critical-fg); font-weight: 600; }
  .aimh-form__ok { border-inline-start: 3px solid var(--aimh-brand-primary); padding: var(--aimh-space-16) var(--aimh-space-24); background: var(--aimh-surface-default); border-radius: var(--aimh-radius-md); }

  /* ── una descarga concreta, no un muro de PDFs ─────────────────────────── */
  .aimh-take { display: flex; align-items: center; gap: var(--aimh-space-24); flex-wrap: wrap; background: var(--aimh-surface-default); border: 1px solid var(--aimh-border-subtle); border-radius: var(--aimh-radius-lg); padding: var(--aimh-space-24) var(--aimh-space-32); margin-block-start: var(--aimh-space-32); }
  .aimh-take img { inline-size: 40px; block-size: 40px; flex: 0 0 auto; }
  .aimh-take div { flex: 1 1 18rem; }
  .aimh-take b { display: block; font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-subsection-size); }
  .aimh-take span { color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); }

  /* ── one testimonial, given room ───────────────────────────────────────
     Manual navigation only: nothing on this page moves by itself (WCAG 2.2.2). */
  .aimh-quote { margin: 0; max-inline-size: 28ch; }
  .aimh-quote blockquote { font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-statement-size); line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; margin: 0; max-inline-size: 20ch; }
  .aimh-quote figcaption { margin-block-start: var(--aimh-space-24); color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); }
  .aimh-quote-nav { display: flex; align-items: center; gap: var(--aimh-space-12); margin-block-start: var(--aimh-space-24); }

  /* ── disclosure list, not a stack of cards ─────────────────────────────── */
  .aimh-ed-faq { margin-block-start: var(--aimh-space-32); border-block-start: 1px solid var(--aimh-border-divider); }
  .aimh-ed-faq details { border-block-end: 1px solid var(--aimh-border-divider); }
  .aimh-ed-faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--aimh-space-24); padding-block: var(--aimh-space-16); cursor: pointer; list-style: none; font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-subsection-size); font-weight: 600; min-block-size: var(--aimh-target-min); }
  .aimh-ed-faq summary::-webkit-details-marker { display: none; }
  .aimh-ed-faq summary::after { content: "+"; font-weight: 400; color: var(--aimh-text-secondary); flex: 0 0 auto; }
  .aimh-ed-faq details[open] summary::after { content: "\2013"; }
  .aimh-ed-faq details > :not(summary) { margin-block: 0 var(--aimh-space-16); max-inline-size: var(--aimh-max-reading); color: var(--aimh-text-secondary); }

  /* ── closing ───────────────────────────────────────────────────────────── */
  .aimh-ed-close dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--aimh-space-16) var(--aimh-space-32); margin: var(--aimh-space-32) 0 0; }
  .aimh-ed-close dt { font-size: var(--aimh-text-overline-size); text-transform: uppercase; letter-spacing: 0.1em; color: var(--aimh-text-secondary); margin-block-end: var(--aimh-space-4); }
  .aimh-ed-close dd { margin: 0; }

  /* ── el área editorial viva ────────────────────────────────────────────
     #592 · bloque 2. La portada vuelve a tener contenido que cambia solo
     —lo último escrito, las herramientas, el próximo taller, los consejos—
     sin repetir el error de la portada vieja: quince secciones compitiendo
     con el recorrido de conversión.

     Tres reglas la mantienen en su sitio:
       1. Vive en la mitad baja, DESPUÉS de héroe, seguros, pasos y por qué.
       2. Su tipografía es más pequeña que la del recorrido principal: los
          títulos de módulo son overline, no `statement`. Un módulo secundario
          que grita compite; uno que se anuncia, acompaña.
       3. Un módulo sin contenido no enseña un hueco ni un «próximamente»:
          se retira entero. Y si los cuatro están vacíos, el área desaparece.
     Quién sale y en qué orden lo decide el Site Manager (published/featured/
     order/visible), no esta hoja ni la página. */
  .aimh-live { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: var(--aimh-space-editorial-gutter); align-items: start; margin-block-start: var(--aimh-space-48); }
  .aimh-live__col > .aimh-mod + .aimh-mod { margin-block-start: var(--aimh-space-48); }
  .aimh-mod > h3 { font-family: var(--aimh-font-family-sans); font-size: var(--aimh-text-overline-size); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--aimh-text-secondary); margin: 0 0 var(--aimh-space-16); padding-block-end: var(--aimh-space-12); border-block-end: 1px solid var(--aimh-border-strong); }
  .aimh-mod__more { margin: var(--aimh-space-16) 0 0; font-size: var(--aimh-text-body-sm-size); }
  /* La pila: los mismos «tips» del registro, en una sola columna, para que en
     la columna ancha se lean como una portada de sección y no como tarjetas. */
  .aimh-tips--stack { grid-template-columns: 1fr; gap: var(--aimh-space-24); margin-block-start: 0; }
  /* Lista compacta de enlaces: consejos y herramientas. Sin tarjeta, sin
     sombra, sin icono — sería una cuarta jerarquía visual en la misma pantalla. */
  .aimh-links { list-style: none; margin: 0; padding: 0; }
  .aimh-links li { border-block-end: 1px solid var(--aimh-border-divider); }
  .aimh-links a { display: block; padding-block: var(--aimh-space-12); min-block-size: var(--aimh-target-min); text-decoration: none; color: inherit; }
  .aimh-links b { display: block; font-weight: 600; color: var(--aimh-text-link); }
  .aimh-links span { display: block; color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); margin-block-start: var(--aimh-space-4); }
  .aimh-links a:hover b, .aimh-links a:focus-visible b { text-decoration: underline; }
  /* El evento del módulo no repite la tarjeta de la agenda: hereda .aimh-event
     y solo pierde el filete superior, que aquí ya lo pone el título del módulo. */
  .aimh-mod .aimh-events { margin-block: 0; }
  .aimh-mod .aimh-event:first-child { padding-block-start: 0; border-block-start: 0; }

  /* ── banda institucional del equipo ────────────────────────────────────
     Los retratos reales, compuestos, con los nombres debajo en el roster —
     no seis tarjetas de perfil idénticas. Crece sola de uno a cuatro según
     quién esté publicado en el Site Manager: nadie marcado `oculto` aparece
     aquí, y nada enlaza a un perfil concreto (un perfil se despublica y la
     portada se quedaría apuntando a un 404). Un solo enlace, al directorio. */
  .aimh-who .aimh-portraits { grid-column: auto; }

  /* ── entrada: una vez, corta, y opcional ───────────────────────────────
     018 §: el movimiento sirve a la jerarquía o no está. Esto es una entrada
     progresiva ligada al scroll —no un bucle, no un autoplay, no un carrusel—
     y se apaga por completo en tres casos: si el navegador no soporta
     animation-timeline (Firefox hoy), si el usuario pide menos movimiento, o
     si se imprime. En los tres, la página es exactamente la misma, quieta:
     el contenido nunca depende de que la animación corra.
     Solo se animan `opacity` y `transform`, que van al compositor. */
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      @keyframes aimh-enter { from { opacity: 0; transform: translateY(var(--aimh-space-16)); } }
      [data-reveal] {
        animation: aimh-enter var(--aimh-motion-duration-slow) var(--aimh-motion-easing-enter) backwards;
        animation-timeline: view();
        animation-range: entry 10% cover 28%;
      }
    }
  }

  /* ── responsive: the narrow page is composed, not stacked ──────────────
     The portrait composition becomes an even 2×2 band under the words; the
     steps become a vertical line; the two-column lists become one column. */
  @media (max-width: 1023px) {
    .aimh-ed-hero, .aimh-ed-split { grid-template-columns: 1fr; gap: var(--aimh-space-48); }
    .aimh-portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 3 / 2; }
    .aimh-steps { grid-template-columns: 1fr; gap: 0; margin-block-start: var(--aimh-space-32); }
    .aimh-step { padding-block: var(--aimh-space-24); }
    .aimh-step__n { font-size: var(--aimh-text-metric-size); margin-block-end: var(--aimh-space-4); }
    .aimh-roster, .aimh-ed-list { grid-template-columns: 1fr; }
    .aimh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aimh-space-24); }
    .aimh-who { grid-template-columns: 1fr; gap: var(--aimh-space-32); }
    .aimh-who__face { max-inline-size: 22rem; }
    .aimh-shelves { grid-template-columns: 1fr; gap: var(--aimh-space-16); }
    .aimh-tips { grid-template-columns: 1fr; gap: var(--aimh-space-24); }
    /* El área viva pierde su segunda columna: en tablet la columna estrecha
       dejaba las herramientas en dos palabras por línea. Se apila, y el orden
       del HTML —lo último escrito primero— es el orden de lectura. */
    .aimh-live { grid-template-columns: 1fr; gap: var(--aimh-space-48); margin-block-start: var(--aimh-space-32); }
    .aimh-live__col > .aimh-mod + .aimh-mod { margin-block-start: var(--aimh-space-48); }
    .aimh-editorial > section { padding-block: var(--aimh-space-48); }
    /* El héroe invertido vuelve a su orden natural en cuanto hay una sola
       columna. Sin esto, en el móvil la foto se come la pantalla y el titular
       —lo único que una madre lee antes de decidir si sigue— queda debajo. */
    .aimh-ed-hero--flip .aimh-ed-hero__say { order: 1; }
    .aimh-ed-hero--flip .aimh-ed-hero__see { order: 2; }
    .aimh-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aimh-space-24); }
    .aimh-svc--lead { grid-column: 1 / -1; }
    .aimh-where { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aimh-space-24); }
    .aimh-contactlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aimh-cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aimh-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aimh-cycle > li + li::before { display: none; }
    .aimh-payers { grid-template-columns: 1fr; }
    .aimh-payer-tools { flex-direction: column; align-items: stretch; gap: var(--aimh-space-16); }
  }
  @media (max-width: 599px) {
    .aimh-svc-grid, .aimh-where, .aimh-docs, .aimh-contactlist, .aimh-payers, .aimh-cycle, .aimh-metrics, .aimh-reasons--plain, .aimh-settings, .aimh-roles, .aimh-ed-pair, .aimh-person, .aimh-tools { grid-template-columns: 1fr; }
    .aimh-person__face { max-inline-size: 16rem; }
    /* el registro y el estado vacío pierden la franja lateral en móvil: 32px
       de sangría sobre 375 son un tercio del ancho útil */
    .aimh-reg > li, .aimh-vacancies__none, .aimh-tool__limit { padding-inline-start: var(--aimh-space-16); }
    .aimh-reg dl, .aimh-record { grid-template-columns: 1fr; gap: var(--aimh-space-4) 0; }
    .aimh-record dt { margin-block-start: var(--aimh-space-12); }
    /* La tarjeta del evento pierde el aire vertical grande: en 375 el estado,
       el titular y la fecha tienen que caber juntos sin hacer scroll. */
    .aimh-event { padding-block: var(--aimh-space-24); }
    .aimh-reg dt { margin-block-start: var(--aimh-space-12); }
    .aimh-path > li { padding-inline-start: 0; }
    .aimh-path__n { position: static; display: block; margin-block-end: var(--aimh-space-4); }
    .aimh-defs { grid-template-columns: 1fr; gap: var(--aimh-space-4) 0; }
    .aimh-defs dd { margin-block-end: var(--aimh-space-12); }
    .aimh-shelf { padding: var(--aimh-space-24); }
    .aimh-take { padding: var(--aimh-space-16); gap: var(--aimh-space-16); }
    .aimh-portraits { aspect-ratio: 1 / 1; gap: var(--aimh-space-8); }
    .aimh-portrait figcaption { padding-inline: var(--aimh-space-8); }
    .aimh-quote blockquote { max-inline-size: none; }
    .aimh-quote { max-inline-size: none; }
  }
}

/* ── 50-shells.css ── */
/* shells — public header/footer, product (rail + context bar), portal, auth (021 §43–48) */
@layer layouts {
  .aimh-wrap { max-inline-size: var(--aimh-max-public); margin-inline: auto; padding-inline: var(--aimh-space-margin-public); }
  .aimh-measure { max-inline-size: var(--aimh-max-reading); }
  /* public */
  .aimh-public-header { block-size: var(--aimh-header-public); border-block-end: 1px solid var(--aimh-border-divider); background: var(--aimh-surface-default); position: sticky; inset-block-start: 0; z-index: var(--aimh-z-sticky); }
  .aimh-public-header .aimh-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--aimh-space-16); block-size: 100%; }
  .aimh-public-header nav ul { display: flex; flex-wrap: nowrap; gap: var(--aimh-space-12); list-style: none; margin: 0; padding: 0; }
  .aimh-public-header nav a { text-decoration: none; color: var(--aimh-text-primary); padding: var(--aimh-space-8) var(--aimh-space-4); display: inline-block; }
  /* ── ninguna etiqueta de navegación se parte ───────────────────────────
     `Servic / es`, `Insuran / ce`, `Abo / ut`, `Españ / ol`. No era un fallo de
     esta anchura: el contenedor público está topado en 1200 px y, con los 48 px
     de margen a cada lado, la fila de la cabecera nunca tiene más de 1104 px.
     El lockup aprobado (sello 72 + nombre a 1.375rem) más seis destinos más el
     par de utilidad no caben ahí a ninguna anchura de escritorio, así que el
     navegador partía por donde podía: por dentro de las palabras.

     Lo único que puede reflowear en esta fila es el NOMBRE DE LA MARCA, y solo
     entre palabras — que es justo lo que hace un lockup de dos líneas. Los
     destinos y el enlace de idioma no se parten nunca: una palabra cortada no
     es un problema de estética, es una cabecera que dejó de leerse.
     El lockup, además, tiene que poder encogerse: un elemento flex no baja de
     su contenido sin `min-inline-size: 0`, y sin eso la fila desbordaba en vez
     de recomponerse. */
  .aimh-public-header nav a,
  .aimh-public-header .aimh-utility a { white-space: nowrap; }
  /* Ojo con el lockup: su `<span>` ENVUELVE al `<small>` del nombre, no es un
     hermano. Un `white-space: nowrap` puesto ahí para la línea de arriba se
     lleva por delante el nombre entero — deja de poder pasar a dos líneas, el
     lockup no encoge y la navegación se le monta encima. Aquí el span solo
     necesita poder encogerse; lo que no se parte son los destinos, arriba. */
  .aimh-public-header .aimh-wordmark { min-inline-size: 0; }
  .aimh-public-header .aimh-wordmark span { min-inline-size: 0; }
  .aimh-public-header .aimh-wordmark :is(span, small) { overflow-wrap: normal; word-break: normal; hyphens: none; }
  .aimh-public-header nav a[aria-current="page"] { color: var(--aimh-text-link); box-shadow: inset 0 -2px 0 var(--aimh-brand-primary); }
  .aimh-public-header .aimh-utility { display: flex; align-items: center; gap: var(--aimh-space-12); font-size: var(--aimh-text-body-sm-size); }
  .aimh-nav-toggle { display: none; min-inline-size: var(--aimh-target-min); min-block-size: var(--aimh-target-min); border: 1px solid var(--aimh-border-strong); border-radius: var(--aimh-control-radius); background: var(--aimh-surface-default); color: var(--aimh-text-primary); font: inherit; padding-inline: var(--aimh-space-12); }
  .aimh-public-header nav ul li { display: contents; }
  .aimh-measure-form { max-inline-size: var(--aimh-max-form); margin-inline: auto; padding-inline: var(--aimh-space-margin-public-narrow); }
  .aimh-measure-prose { max-inline-size: var(--aimh-max-reading); margin-inline: auto; padding-inline: var(--aimh-space-margin-public-narrow); }
  /* router / recovery path lists (020 pub.router, pub.system-recovery): rows, not cards */
  .aimh-paths { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--aimh-border-divider); }
  .aimh-paths li { border-block-end: 1px solid var(--aimh-border-divider); }
  .aimh-paths a { display: block; padding-block: var(--aimh-space-16); text-decoration: none; color: inherit; min-block-size: var(--aimh-target-min); }
  .aimh-paths a:hover strong, .aimh-paths a:focus-visible strong { text-decoration: underline; }
  .aimh-paths strong { display: block; color: var(--aimh-text-link); font-weight: 600; }
  .aimh-paths span { display: block; color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); }
  .aimh-wordmark { display: inline-flex; align-items: center; gap: var(--aimh-space-8); font-family: var(--aimh-font-family-heading); font-weight: 700; color: var(--aimh-text-primary); text-decoration: none; }
  .aimh-seal { inline-size: 40px; block-size: 40px; flex: 0 0 auto; }
  /* ── lockup de marca ───────────────────────────────────────────────────
     El sello de AIMH lleva el nombre escrito ALREDEDOR DEL BORDE. Ese texto no
     se lee a ningún tamaño que quepa en una cabecera: haría falta un diámetro
     de unos 200 px. Subirlo y subirlo no resuelve nada — por eso todo sello va
     acompañado de la marca escrita, y ése es el trabajo del lockup: el sello
     identifica de un vistazo, el nombre al lado se lee de un vistazo.
     Sello a 72 px (52 en móvil) y el nombre completo en tamaño de lectura, no
     de pie de foto. El logo identifica, no domina (030 §11). */
  .aimh-public-header { block-size: auto; min-block-size: var(--aimh-header-public); }
  .aimh-public-header .aimh-wrap { padding-block: var(--aimh-space-8); }
  .aimh-public-header .aimh-seal { inline-size: 72px; block-size: 72px; }
  .aimh-public-header .aimh-wordmark { gap: var(--aimh-space-12); line-height: 1.15; }
  .aimh-public-header .aimh-wordmark span { display: block; font-size: var(--aimh-text-overline-size); letter-spacing: 0.16em; text-transform: uppercase; color: var(--aimh-text-secondary); font-weight: 600; }
  .aimh-public-header .aimh-wordmark small { display: block; font-family: var(--aimh-font-family-heading); font-weight: 700; font-size: var(--aimh-text-subsection-size); color: var(--aimh-text-primary); letter-spacing: -0.01em; text-transform: none; margin-block-start: 2px; }
  @media (max-width: 1023px) {
    .aimh-public-header .aimh-seal { inline-size: 56px; block-size: 56px; }
    .aimh-public-header .aimh-wordmark small { font-size: var(--aimh-text-body-size); }
  }
  @media (max-width: 599px) {
    .aimh-public-header .aimh-seal { inline-size: 52px; block-size: 52px; }
    .aimh-public-header .aimh-wordmark small { display: block; font-size: var(--aimh-text-body-sm-size); }
    .aimh-public-header .aimh-wordmark span { display: none; }
  }
  .aimh-wordmark small { display: block; font-family: var(--aimh-font-family-sans); font-weight: 400; font-size: var(--aimh-text-caption-size); color: var(--aimh-text-secondary); }
  main.aimh-public > section { padding-block: var(--aimh-space-section-public); }
  main.aimh-public > section + section { border-block-start: 1px solid var(--aimh-border-divider); }
  .aimh-public-footer { background: var(--aimh-shell-footer-bg); color: var(--aimh-shell-footer-fg); padding-block: var(--aimh-space-32); margin-block-start: var(--aimh-space-chapter-public); }
  .aimh-public-footer a { color: inherit; }
  .aimh-wave { block-size: 24px; background: linear-gradient(to bottom, transparent 50%, var(--aimh-surface-canvas-alt) 50%); }
  .aimh-hero { display: grid; grid-template-columns: 7fr 5fr; gap: var(--aimh-space-32); align-items: center; padding-block: var(--aimh-space-48); }
  .aimh-hero .aimh-media { aspect-ratio: 4 / 3; background: var(--aimh-surface-subtle); border-radius: var(--aimh-radius-lg); }
  .aimh-beside { display: grid; grid-template-columns: 7fr 5fr; gap: var(--aimh-space-32); }
  .aimh-row { display: grid; grid-template-columns: 1fr auto; gap: var(--aimh-space-12); align-items: start; padding-block: var(--aimh-space-12); border-block-end: 1px solid var(--aimh-border-divider); }
  /* product */
  .aimh-app { display: grid; grid-template-columns: var(--aimh-rail-wide) 1fr; min-block-size: 100vh; }
  .aimh-rail { background: var(--aimh-shell-rail-bg); border-inline-end: 1px solid var(--aimh-border-divider); padding: var(--aimh-space-16); position: sticky; inset-block-start: 0; block-size: 100vh; z-index: var(--aimh-z-rail); }
  .aimh-rail ul { list-style: none; margin: 0; padding: 0; }
  .aimh-rail a { display: block; padding: var(--aimh-space-8) var(--aimh-space-12); border-radius: var(--aimh-control-radius); text-decoration: none; color: var(--aimh-text-primary); min-block-size: var(--aimh-target-min); }
  .aimh-rail a[aria-current="page"] { background: var(--aimh-surface-selected); font-weight: 600; }
  .aimh-work { padding: var(--aimh-space-16) var(--aimh-space-margin-product); max-inline-size: var(--aimh-max-app); }
  .aimh-context-bar { position: sticky; inset-block-start: 0; z-index: var(--aimh-z-sticky); background: var(--aimh-shell-contextbar-bg); border-block-end: 1px solid var(--aimh-border-subtle); min-block-size: var(--aimh-header-product); display: flex; align-items: center; gap: var(--aimh-space-16); flex-wrap: wrap; padding-block: var(--aimh-space-8); }
  .aimh-context-bar h1 { margin: 0; font-size: var(--aimh-product-text-section-title-size); }
  .aimh-exception-strip { margin-block: var(--aimh-space-12); }
  .aimh-tabs { display: flex; gap: var(--aimh-space-8); border-block-end: 1px solid var(--aimh-border-subtle); margin-block: var(--aimh-space-12); list-style: none; padding: 0; overflow-x: auto; }
  .aimh-tabs a { display: inline-block; padding: var(--aimh-space-8) var(--aimh-space-12); text-decoration: none; color: var(--aimh-text-secondary); white-space: nowrap; min-block-size: var(--aimh-target-min); }
  .aimh-tabs a[aria-current="page"] { color: var(--aimh-text-link); box-shadow: inset 0 -2px 0 var(--aimh-brand-primary); }
  .aimh-filters { display: flex; gap: var(--aimh-space-8); flex-wrap: wrap; margin-block: var(--aimh-space-12); align-items: center; }
  .aimh-save-bar { position: sticky; inset-block-end: 0; background: var(--aimh-surface-default); border-block-start: 1px solid var(--aimh-border-subtle); padding-block: var(--aimh-space-12); display: flex; gap: var(--aimh-space-12); align-items: center; z-index: var(--aimh-z-sticky); }
  /* portal */
  /* family portal shell (023): identity + help; no public navigation; no bottom nav (link-gated single tasks — 023 §4) */
  .aimh-portal-header { border-block-end: 1px solid var(--aimh-border-divider); background: var(--aimh-surface-default); }
  .aimh-portal-header .aimh-wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--aimh-space-16); min-block-size: var(--aimh-target-rbt); padding-block: var(--aimh-space-8); }
  .aimh-portal-main { max-inline-size: var(--aimh-max-reading); margin-inline: auto; padding: var(--aimh-space-16) var(--aimh-space-margin-public-narrow) var(--aimh-space-48); }
  .aimh-portal-main > section + section { margin-block-start: var(--aimh-space-24); }
  .aimh-portal-footer { border-block-start: 1px solid var(--aimh-border-divider); padding-block: var(--aimh-space-24); color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); }
  .aimh-portal .aimh-btn { min-block-size: var(--aimh-target-rbt); }
  .aimh-portal .aimh-btn[data-size="sm"] { min-block-size: var(--aimh-target-min); }
  /* family item list: one row per appointment/document — date, facts, state, action (020 fam.list) */
  .aimh-items { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--aimh-border-divider); }
  .aimh-item { display: grid; gap: var(--aimh-space-4); padding-block: var(--aimh-space-16); border-block-end: 1px solid var(--aimh-border-divider); }
  .aimh-item__when { font-weight: 600; }
  .aimh-item__facts { color: var(--aimh-text-secondary); overflow-wrap: anywhere; }
  .aimh-item__actions { display: flex; flex-wrap: wrap; gap: var(--aimh-space-8); margin-block-start: var(--aimh-space-8); }
  .aimh-item[data-status-of="appt.cancelled"] .aimh-item__when { color: var(--aimh-text-secondary); text-decoration: line-through; }
  .aimh-owner { display: block; color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); }
  .aimh-group-title { margin-block: var(--aimh-space-24) var(--aimh-space-8); font-size: var(--aimh-text-local-heading-size); }
  .aimh-bottom-nav { display: none; }
  /* auth */
  .aimh-auth { min-block-size: 100vh; display: grid; place-items: center; background: var(--aimh-shell-auth-canvas); padding: var(--aimh-space-16); }
  .aimh-auth__card { inline-size: min(100%, var(--aimh-max-auth)); background: var(--aimh-surface-default); border: 1px solid var(--aimh-border-subtle); border-radius: var(--aimh-radius-md); padding: var(--aimh-space-32); }
  /* client record context header (014 client-context-header · 020 prod.client-record · 024 §6–11): static (not sticky) while it coexists with the legacy rail; identity → disambiguators → state → facts → nav */
  .aimh-client-context { display: grid; grid-template-columns: 1fr auto; gap: var(--aimh-space-12) var(--aimh-space-24); padding: var(--aimh-space-16) var(--aimh-space-margin-product); background: var(--aimh-surface-default); border-block-end: 1px solid var(--aimh-border-subtle); }
  .aimh-client-context__id { display: flex; gap: var(--aimh-space-12); align-items: flex-start; grid-column: 1; }
  .aimh-client-context__photo { inline-size: 56px; block-size: 56px; border-radius: var(--aimh-radius-pill); object-fit: cover; flex: 0 0 auto; }
  .aimh-client-context h1 { margin: 0; font-size: var(--aimh-product-text-section-title-size); overflow-wrap: anywhere; }
  .aimh-client-context__disambiguator { margin: var(--aimh-space-4) 0 0; color: var(--aimh-text-secondary); font-size: var(--aimh-text-body-sm-size); overflow-wrap: anywhere; }
  .aimh-client-context__state { margin: var(--aimh-space-8) 0 0; display: flex; flex-wrap: wrap; gap: var(--aimh-space-8); align-items: center; }
  .aimh-client-context__facts { grid-column: 1; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--aimh-space-8) var(--aimh-space-16); margin: 0; }
  .aimh-client-context__facts dt { font-size: var(--aimh-text-overline-size); text-transform: uppercase; letter-spacing: 0.06em; }
  .aimh-client-context__actions { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: var(--aimh-space-8); align-items: flex-end; }
  .aimh-client-context__nav { margin: 0; padding-inline: var(--aimh-space-margin-product); background: var(--aimh-surface-default); }
  .aimh-product-lab-header { border-block-end: 1px solid var(--aimh-border-divider); padding-block: var(--aimh-space-8); }
  .ds-example { border: 1px solid var(--aimh-border-divider); margin-block: var(--aimh-space-16); }
  .aimh-product-home { max-inline-size: var(--aimh-max-reading); }
  .aimh-safety { margin: 0; border-radius: 0; }
  [data-save-state] { font-size: var(--aimh-text-body-sm-size); color: var(--aimh-text-secondary); }
  [data-save-state="save-failed"], [data-save-state="conflict"] { color: var(--aimh-status-critical-fg); }
  /* responsive: stack · reorder · collapse · remove (012) */
  @media (max-width: 1023px) {
    .aimh-nav-toggle { display: inline-flex; align-items: center; }
    .aimh-public-header nav { display: none; position: absolute; inset-inline: 0; inset-block-start: var(--aimh-header-public); background: var(--aimh-surface-default); border-block-end: 1px solid var(--aimh-border-divider); padding: var(--aimh-space-8) var(--aimh-space-margin-public-narrow) var(--aimh-space-16); }
    .aimh-public-header[data-nav="open"] nav { display: block; }
    .aimh-public-header nav ul { flex-direction: column; gap: 0; }
    .aimh-public-header nav a { display: block; min-block-size: var(--aimh-target-min); padding-block: var(--aimh-space-12); border-block-end: 1px solid var(--aimh-border-divider); }
    .aimh-public-header nav a[aria-current="page"] { box-shadow: none; font-weight: 600; }
    .aimh-hero, .aimh-beside { grid-template-columns: 1fr; }
    .aimh-app { grid-template-columns: 1fr; }
    .aimh-rail { display: none; }
    .aimh-wrap { padding-inline: var(--aimh-space-margin-public-narrow); }
  }
  @media (max-width: 599px) {
    .aimh-client-context { grid-template-columns: 1fr; }
    .aimh-client-context__actions { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; }
    .aimh-public-header .aimh-wordmark small { display: none; }
    .aimh-hero .aimh-media { display: none; }
    .aimh-remove-narrow { display: none; }
    .aimh-bottom-nav { display: flex; position: fixed; inset-block-end: 0; inset-inline: 0; background: var(--aimh-surface-default); border-block-start: 1px solid var(--aimh-border-subtle); justify-content: space-around; padding-block: var(--aimh-space-8); z-index: var(--aimh-z-sticky); }
    .aimh-bottom-nav a { min-block-size: var(--aimh-target-min); display: inline-flex; align-items: center; text-decoration: none; }
    .aimh-fixed-action { position: fixed; inset-block-end: 0; inset-inline: 0; padding: var(--aimh-space-12); background: var(--aimh-surface-default); border-block-start: 1px solid var(--aimh-border-subtle); z-index: var(--aimh-z-sticky); }
    .aimh-table[data-narrow="cards"] { display: block; }
    .aimh-table[data-narrow="cards"] thead { display: none; }
    .aimh-table[data-narrow="cards"] tr { display: grid; padding-block: var(--aimh-space-12); border-block-end: 1px solid var(--aimh-border-divider); }
    .aimh-table[data-narrow="cards"] td { block-size: auto; padding: 2px 0; border: 0; }
    .aimh-table[data-narrow="cards"] td[data-label]::before { content: attr(data-label) ": "; color: var(--aimh-text-secondary); }
    .aimh-table[data-narrow="cards"] :is(td, caption) { overflow-wrap: anywhere; min-inline-size: 0; }
    .aimh-work { padding-inline: var(--aimh-space-margin-product-narrow); }
  }
}

/* ── 55-document.css ── */
/* document layer — read-only document representation shared by screen, browser print and (future) HTML→PDF (027 §3–4, §14–16, §20–35, §55, §74).
   One archetype (.aimh-document), families by data-family, branding intensity by data-brand (minimal · restrained · moderate · strong). No gold frame, no seal ring. */
@layer layouts {
  .aimh-document { max-inline-size: 8.5in; margin-inline: auto; padding: var(--aimh-space-32); background: var(--aimh-surface-canvas); color: var(--aimh-text-primary); font-family: var(--aimh-font-family-legible, var(--aimh-font-family-sans)); font-size: var(--aimh-text-body-size); line-height: 1.45; }
  .aimh-document__header { display: grid; grid-template-columns: auto 1fr auto; gap: var(--aimh-space-16); align-items: center; padding-block-end: var(--aimh-space-12); border-block-end: 2px solid var(--aimh-brand-primary); margin-block-end: var(--aimh-space-24); }
  .aimh-document__header .aimh-seal { inline-size: 40px; block-size: 40px; }
  .aimh-document__org { font-weight: 700; letter-spacing: .01em; }
  .aimh-document__org small { display: block; font-weight: 400; color: var(--aimh-text-secondary); font-size: var(--aimh-text-caption-size); }
  .aimh-document__type { text-align: end; font-size: var(--aimh-text-caption-size); color: var(--aimh-text-secondary); }
  .aimh-document__type strong { display: block; font-size: var(--aimh-text-body-size); color: var(--aimh-text-primary); }
  .aimh-document[data-brand="minimal"] .aimh-document__header { border-block-end-color: var(--aimh-border-strong); }
  .aimh-document[data-brand="minimal"] .aimh-seal { display: none; }
  .aimh-document[data-brand="strong"] .aimh-document__header { border-block-end-width: 3px; padding-block-end: var(--aimh-space-16); }
  .aimh-document[data-brand="strong"] .aimh-seal { inline-size: 56px; block-size: 56px; }
  .aimh-document h1 { font-size: var(--aimh-text-page-title-size); margin: 0 0 var(--aimh-space-12); font-family: var(--aimh-font-family-heading); }
  .aimh-document h2 { font-size: var(--aimh-text-section-title-size, 1.15rem); margin: var(--aimh-space-24) 0 var(--aimh-space-8); border-block-end: 1px solid var(--aimh-border-divider); padding-block-end: var(--aimh-space-4); }
  .aimh-document h3 { font-size: var(--aimh-text-body-size); margin: var(--aimh-space-16) 0 var(--aimh-space-4); }
  .aimh-document__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--aimh-space-4) var(--aimh-space-24); margin: 0 0 var(--aimh-space-24); padding: var(--aimh-space-12) var(--aimh-space-16); border: 1px solid var(--aimh-border-subtle); }
  .aimh-document__meta div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--aimh-space-8); font-size: var(--aimh-text-body-sm-size); }
  .aimh-document__meta dt { color: var(--aimh-text-secondary); margin: 0; }
  .aimh-document__meta dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
  /* El texto de un documento guardado (DEBT-DOC-002): la alternativa legible
     del PDF. Se lee, no se maqueta — un ancho de lectura, renglones sueltos
     como párrafos, y nada que dependa de ver la página. Refluye a 320 px sin
     scroll horizontal porque es texto normal, no una copia del papel. */
  .aimh-document__text { max-inline-size: 68ch; }
  .aimh-document__text p { margin: 0 0 var(--aimh-space-8); overflow-wrap: anywhere; }
  .aimh-document__status { display: flex; flex-wrap: wrap; gap: var(--aimh-space-8); align-items: center; margin-block-end: var(--aimh-space-16); font-size: var(--aimh-text-body-sm-size); }
  .aimh-document__notice { border: 1px solid var(--aimh-border-strong); border-inline-start-width: 4px; padding: var(--aimh-space-8) var(--aimh-space-12); margin: var(--aimh-space-16) 0; font-size: var(--aimh-text-body-sm-size); }
  .aimh-document__section { break-inside: auto; }
  .aimh-document p { margin: 0 0 var(--aimh-space-8); orphans: 2; widows: 2; }
  .aimh-document table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--aimh-text-data-size); margin: var(--aimh-space-8) 0 var(--aimh-space-16); }
  .aimh-document th, .aimh-document td { border: 1px solid var(--aimh-border-divider); padding: var(--aimh-space-4) var(--aimh-space-8); text-align: start; vertical-align: top; }
  .aimh-document thead th { background: var(--aimh-shell-contextbar-bg, transparent); }
  .aimh-document caption { text-align: start; caption-side: top; font-weight: 600; margin-block-end: var(--aimh-space-4); }
  .aimh-document__addendum { border-block-start: 1px dashed var(--aimh-border-strong); margin-block-start: var(--aimh-space-24); padding-block-start: var(--aimh-space-12); }
  .aimh-document__addendum h2 { border: 0; }
  .aimh-signature { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--aimh-space-16); margin-block-start: var(--aimh-space-32); break-inside: avoid; }
  .aimh-signature__block { border-block-start: 1px solid var(--aimh-border-strong); padding-block-start: var(--aimh-space-8); font-size: var(--aimh-text-body-sm-size); }
  .aimh-signature__block strong { display: block; }
  .aimh-signature__block img { max-block-size: 48px; display: block; margin-block-end: var(--aimh-space-4); }
  .aimh-signature__attestation { font-size: var(--aimh-text-caption-size); color: var(--aimh-text-secondary); margin-block-start: var(--aimh-space-8); }
  .aimh-signature__pending { color: var(--aimh-text-secondary); font-style: italic; }
  .aimh-document__footer { margin-block-start: var(--aimh-space-32); padding-block-start: var(--aimh-space-8); border-block-start: 1px solid var(--aimh-border-divider); font-size: var(--aimh-text-caption-size); color: var(--aimh-text-secondary); display: flex; justify-content: space-between; gap: var(--aimh-space-16); flex-wrap: wrap; }
  .aimh-document__toc ol { padding-inline-start: 1.4em; }
  @media (max-width: 599px) { .aimh-document { padding: var(--aimh-space-16); } .aimh-document__meta div { grid-template-columns: 1fr; } .aimh-document__header { grid-template-columns: auto 1fr; } .aimh-document__type { grid-column: 1 / -1; text-align: start; } }
}
@layer print {
  @media print {
    @page { size: Letter; margin: 0.75in 0.75in 0.9in; }
    .aimh-document { max-inline-size: none; padding: 0; background: #fff; color: #000; font-size: 11pt; }
    .aimh-document__header { border-block-end-color: #000; }
    .aimh-document h2, .aimh-document h3 { break-after: avoid; }
    .aimh-document thead { display: table-header-group; }
    .aimh-document tr, .aimh-signature, .aimh-document__notice, .aimh-document__meta { break-inside: avoid; }
    .aimh-document__section > h2 + p { break-before: avoid; }
    .aimh-document__footer { position: fixed; inset-block-end: 0; inset-inline: 0; border-block-start: 1px solid #000; background: #fff; }
    .aimh-document__footer .aimh-document__page::after { content: counter(page); }
    .aimh-document a[href]::after { content: none; }
    [data-status] { border: 1px solid #000; }
  }
}
@layer layouts {
  .aimh-document-viewer { max-inline-size: var(--aimh-max-reading); }
  .aimh-document-frame { border: 1px solid var(--aimh-border-subtle); background: var(--aimh-surface-canvas); min-block-size: 60vh; }
  .aimh-document-frame iframe, .aimh-document-frame img { inline-size: 100%; display: block; border: 0; }
  .aimh-document-frame iframe { block-size: 78vh; }
}

/* ── 60-states.css ── */
/* states — data-state driven regions (018 §48–61, 019 §151–154, 020 §140–144) */
@layer states {
  [data-state] > .aimh-when-empty, [data-state] > .aimh-when-error, [data-state] > .aimh-when-loading { display: none; }
  [data-state="empty"] > .aimh-when-empty, [data-state="error"] > .aimh-when-error, [data-state="loading"] > .aimh-when-loading { display: block; }
  [data-state="empty"] > .aimh-when-loaded, [data-state="error"] > .aimh-when-loaded, [data-state="loading"] > .aimh-when-loaded { display: none; }
  [data-state="stale"] .aimh-freshness, [data-freshness="stale"] { color: var(--aimh-text-secondary); }
  .aimh-freshness::before { content: ""; }
}

/* ── 70-print.css ── */
/* print — shared foundation (012 §151, 019 §89, 020 §136, 021 §131–133) */
@layer print {
  @media print {
    .aimh-public-header, .aimh-public-footer, .aimh-rail, .aimh-filters, .aimh-save-bar, .aimh-fixed-action, .aimh-bottom-nav, .aimh-btn, .aimh-skip, .aimh-wave, nav { display: none !important; } /* documented exception 021 §24 */
    .aimh-app { display: block; }
    .aimh-context-bar { position: static; border: 0; }
    body { color: #000; background: #fff; font-size: 11pt; } /* print set (04 § print) */
    h1, h2, h3 { break-after: avoid; }
    tr, .aimh-alert, .aimh-surface { break-inside: avoid; }
    a { text-decoration: none; color: inherit; }
    .aimh-badge { border: 1px solid #000; background: transparent !important; color: #000 !important; }
  }
}

/* ── 90-utilities.css ── */
/* utilities — few, structural, documented (021 §25) */
@layer utilities {
  .aimh-stack > * + * { margin-block-start: var(--aimh-space-stack-public); }
  [data-register="product"] .aimh-stack > * + * { margin-block-start: var(--aimh-space-stack-product); }
  .aimh-cluster { display: flex; flex-wrap: wrap; gap: var(--aimh-space-8); align-items: center; }
  .aimh-muted { color: var(--aimh-text-secondary); }
  .aimh-text-sm { font-size: var(--aimh-text-body-sm-size); }
  .aimh-prewrap { white-space: pre-line; }
  .aimh-mb-0 { margin-block-end: 0; }
  /* A long value that must survive being copied by hand at 320 px: a signing
     link, a file name, a reference. Breaks anywhere rather than overflow. */
  .aimh-wrap { overflow-wrap: anywhere; user-select: all; }
}