/* ==========================================================================
   Site chrome: header, mega-menu, footer, forms, hero reporting surface
   ========================================================================== */

/* --- Logo ---------------------------------------------------------------- */
.logo{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo img{display:block;width:auto;height:42px}
.logo--inverse{flex-direction:column;align-items:flex-start;gap:2px}
.logo__word{font-size:24px;line-height:1;font-weight:var(--fw-bold);letter-spacing:-.03em}
.logo__word .med{color:var(--teal-300)}
.logo__word .bil{color:var(--orange-400)}
.logo__tagline{font-size:9px;line-height:1.3;font-weight:var(--fw-light);letter-spacing:.04em;color:var(--orange-300)}

/* --- Header -------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:var(--surface-page);border-bottom:1px solid var(--border-subtle);
}

/* Section 3.1 wants the phone number in the header on desktop, but six nav
   items plus a pill CTA already fill the 1280 container. It sits in a slim
   utility strip above the nav row instead, where it can also carry hours. */
.site-header__utility{
  background:var(--surface-muted);
  border-bottom:1px solid var(--border-subtle);
}
.site-header__utility-inner{
  max-width:var(--container-max);margin:0 auto;
  padding:7px var(--container-pad);
  display:flex;align-items:center;justify-content:flex-end;gap:var(--space-5);
  font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted);
}
.site-header__utility a{color:var(--neutral-800);text-decoration:none;font-weight:var(--fw-medium)}
.site-header__utility a:hover{color:var(--teal-800)}
.site-header__utility .row{gap:var(--space-2)}
.site-header__utility .icon{color:var(--teal-600)}

.site-header__inner{
  max-width:var(--container-max);margin:0 auto;
  padding:16px var(--container-pad);
  display:flex;align-items:center;gap:var(--space-5);
}
.site-nav{display:flex;align-items:center;gap:2px;flex-grow:1;min-width:0}
.site-nav__item{position:relative}
.site-nav__link{
  display:inline-flex;align-items:center;gap:4px;padding:10px 12px;
  border-radius:var(--radius-pill);text-decoration:none;
  font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:var(--fw-medium);
  color:var(--neutral-800);background:transparent;transition:var(--transition-hover);
  border:0;cursor:pointer;font-family:var(--font-sans);white-space:nowrap;
}
.site-nav__link:hover,
.site-nav__item:hover > .site-nav__link,
.site-nav__item:focus-within > .site-nav__link,
.site-nav__item.is-open > .site-nav__link{background:var(--teal-50);color:var(--teal-800)}
.site-nav__link[aria-current="page"],.site-nav__link.is-active{color:var(--teal-800)}
.site-nav__link .icon{transition:transform var(--dur-base) var(--ease-out)}
.site-nav__item:hover > .site-nav__link .icon,
.site-nav__item:focus-within > .site-nav__link .icon,
.site-nav__item.is-open > .site-nav__link .icon{transform:rotate(180deg)}

.site-header__aside{display:flex;align-items:center;gap:var(--space-4);margin-left:auto;flex-shrink:0}
.header-phone{
  display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;
  font-size:var(--fs-ui);font-weight:var(--fw-medium);color:var(--neutral-800);white-space:nowrap;
}
.header-phone:hover{color:var(--teal-800)}
.header-phone .icon{color:var(--teal-600)}

/* --- Mega menu ----------------------------------------------------------- */
.nav-dropdown{
  position:absolute;top:100%;left:0;padding-top:12px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility var(--dur-base);
}
/* Hover is the primary desktop affordance; focus-within covers keyboard, and
   .is-open is what the script toggles on touch and in the compact layout.
   The 12px padding-top above bridges the gap between the link and the panel so
   the pointer never leaves the item on the way down. */
.site-nav__item:hover .nav-dropdown,
.site-nav__item:focus-within .nav-dropdown,
.site-nav__item.is-open .nav-dropdown{opacity:1;visibility:visible;transform:none}
.nav-dropdown__panel{
  display:grid;gap:var(--space-8);padding:var(--space-7);min-width:520px;
  background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);
}
.nav-dropdown__panel--2{grid-template-columns:repeat(2,minmax(220px,1fr))}
.nav-dropdown__panel--1{grid-template-columns:minmax(240px,1fr)}
.nav-dropdown__col{display:flex;flex-direction:column;gap:var(--space-3)}
.nav-dropdown__title{
  font-size:var(--fs-micro);line-height:var(--lh-micro);letter-spacing:.12em;
  text-transform:uppercase;font-weight:var(--fw-semibold);color:var(--text-muted);
}
.nav-dropdown__link{
  display:flex;flex-direction:column;gap:1px;padding:6px 8px;margin:0 -8px;
  border-radius:var(--radius-sm);text-decoration:none;transition:var(--transition-hover);
}
.nav-dropdown__link:hover{background:var(--teal-50)}
.nav-dropdown__label{font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:var(--fw-medium);color:var(--text-heading)}
.nav-dropdown__note{font-size:var(--fs-micro);line-height:var(--lh-micro);color:var(--text-muted)}
.nav-dropdown__footer{grid-column:1/-1;padding-top:var(--space-4);border-top:1px solid var(--border-subtle)}

/* --- Mobile nav ---------------------------------------------------------- */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--border-default);border-radius:var(--radius-pill);
  background:transparent;color:var(--neutral-800);cursor:pointer;margin-left:auto}

@media (max-width:1180px){
  .site-header__inner{gap:var(--space-5);flex-wrap:wrap}
  .site-header__utility{display:none}
  .nav-toggle{display:inline-flex}
  .site-nav{
    display:none;order:3;flex-basis:100%;flex-direction:column;align-items:stretch;
    gap:0;padding-bottom:var(--space-4);
  }
  .site-nav.is-open{display:flex}
  .site-nav__item{border-top:1px solid var(--border-subtle)}
  .site-nav__link{width:100%;justify-content:space-between;border-radius:0;padding:14px 4px}
  .nav-dropdown{position:static;padding-top:0;opacity:1;visibility:visible;transform:none;display:none}
  .site-nav__item.is-open .nav-dropdown{display:block}
  .nav-dropdown__panel{
    min-width:0;grid-template-columns:minmax(0,1fr);border:0;box-shadow:none;
    padding:0 0 var(--space-4) var(--space-4);gap:var(--space-5);
  }
  .site-header__aside{width:100%;order:4;justify-content:flex-start}
  .site-header__aside .btn{width:100%}
}

/* --- Footer -------------------------------------------------------------- */
.site-footer{
  background:var(--surface-inverse);color:var(--text-on-inverse);
  padding:60px var(--container-pad);
}
.site-footer__inner{max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-9)}
.site-footer__columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 1.3fr;gap:var(--space-8)}
.site-footer__col{display:flex;flex-direction:column;gap:var(--space-3)}
.site-footer__title{
  font-size:var(--fs-micro);line-height:var(--lh-micro);letter-spacing:.12em;
  text-transform:uppercase;font-weight:var(--fw-semibold);color:var(--orange-300);
}
.site-footer__col a{font-size:var(--fs-ui);line-height:1.6;color:var(--text-on-inverse-muted);text-decoration:none;transition:var(--transition-hover)}
.site-footer__col a:hover{color:var(--neutral-0);text-decoration:none}
.site-footer__contact{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-ui);line-height:1.6;color:var(--text-on-inverse-muted)}
.site-footer__contact a{color:var(--neutral-0)}
.site-footer__social{display:flex;gap:var(--space-2)}
.site-footer__bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);
  padding-top:var(--space-5);border-top:1px solid var(--border-inverse);
}
.site-footer__bar span,.site-footer__bar a{font-size:var(--fs-caption);color:var(--text-on-inverse-muted);text-decoration:none}
.site-footer__legal{display:flex;flex-wrap:wrap;gap:var(--space-5)}

@media (max-width:1100px){.site-footer__columns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.site-footer__columns{grid-template-columns:minmax(0,1fr)}}

/* --- Forms --------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field__label{font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:var(--fw-medium);color:var(--text-heading)}
.field__required{color:var(--orange-600)}
.field__hint{font-size:var(--fs-micro);line-height:var(--lh-micro);color:var(--text-muted)}
.field__error{font-size:var(--fs-micro);line-height:var(--lh-micro);color:var(--status-danger-fg)}

.input,.select,.textarea{
  width:100%;padding:13px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);background:var(--surface-card);
  font-family:var(--font-sans);font-size:var(--fs-ui);line-height:var(--lh-ui);
  color:var(--text-heading);outline:none;transition:var(--transition-hover);
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--teal-600);box-shadow:var(--ring-focus)}
.input--invalid,.select--invalid,.textarea--invalid{border-color:var(--red-500)}
.textarea{resize:vertical;min-height:112px}
.select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--neutral-500) 50%),linear-gradient(135deg,var(--neutral-500) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:44px;
}

.checkbox{display:flex;gap:var(--space-3);align-items:flex-start;cursor:pointer}
.checkbox input{width:20px;height:20px;margin-top:2px;flex-shrink:0;accent-color:var(--teal-600);cursor:pointer}
.checkbox__label{font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:var(--fw-light);color:var(--text-body)}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
@media (max-width:640px){.form-grid{grid-template-columns:minmax(0,1fr)}}

.lead-form{display:flex;flex-direction:column;gap:var(--space-5)}
.lead-form__note{margin:0;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-success{display:flex;flex-direction:column;gap:var(--space-4)}
.form-success .icon{color:var(--teal-700)}

/* --- Hero band background -------------------------------------------------
   A DEPARTURE FROM THE DESIGN SYSTEM, made at the client's request. The system
   states: "No gradients. No background photography, textures, patterns or
   illustrations. Backgrounds are flat token colours, full stop."

   Two decorative layers, both behind the content and both drawn from the brand
   ramps: a teal-tinted hairline grid on the 90px section rhythm, and an ECG
   trace scrolling right to left. Neither carries meaning, so both are hidden
   from assistive technology.

   To revert to the system default, delete the custom properties and the rules
   below, and the one .hero-ecg element in views/pages/home.php. Nothing else
   depends on them. */
.hero-band{
  --hero-grid:rgba(10,139,161,.10);
  --hero-grid-size:90px;

  /* The ECG trace. Top and height are lengths, not percentages: the reporting
     surface makes this section tall enough that a percentage offset sinks the
     trace below the fold. */
  --hero-ecg-top:355px;
  --hero-ecg-height:300px;
  --hero-ecg-tile:380px;
  --hero-ecg-opacity:.34;
  --hero-ecg-duration:11s;

  position:relative;overflow:hidden;isolation:isolate;
  background-color:var(--surface-page);
}

/* The grid, faded out before it reaches the foot of the section. */
.hero-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, var(--hero-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hero-grid) 1px, transparent 1px);
  background-size:var(--hero-grid-size) var(--hero-grid-size);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 700px,transparent 1150px);
  mask-image:linear-gradient(to bottom,#000 0,#000 700px,transparent 1150px);
}

/* The ECG trace. Two elements rather than one, and deliberately so: the
   wrapper carries the mask, the inner span carries the transform. Masking the
   element that moves would drag the clear channel along with the wave. */
.hero-ecg{
  position:absolute;left:0;right:0;
  top:var(--hero-ecg-top);height:var(--hero-ecg-height);
  pointer-events:none;overflow:hidden;
  /* Clears a channel through the middle so the trace never runs behind the
     headline or the buttons, and fades rather than stopping at an edge. */
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 22%,transparent 36%,transparent 64%,#000 78%,#000 100%);
  mask-image:linear-gradient(to right,#000 0,#000 22%,transparent 36%,transparent 64%,#000 78%,#000 100%);
}

.hero-ecg__line{
  position:absolute;left:0;top:0;bottom:0;
  /* One tile wider than the wrapper, so a translation of exactly one tile
     leaves no gap at the trailing edge and the loop is seamless. */
  width:calc(100% + var(--hero-ecg-tile));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 300' preserveAspectRatio='none'%3E%3Cpath d='M0 190 H92 l12 -14 l12 14 H140 l9 16 l11 -186 l11 226 l11 -56 H214 l18 -26 l18 26 H380' fill='none' stroke='%23f66a13' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  /* The tile is stretched to this box, so --hero-ecg-tile and
     --hero-ecg-height move together or the trace distorts. */
  background-size:var(--hero-ecg-tile) 100%;
  opacity:var(--hero-ecg-opacity);
  animation:hero-ecg-scroll var(--hero-ecg-duration) linear infinite;
  will-change:transform;
}

@keyframes hero-ecg-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--hero-ecg-tile)),0,0)}
}

/* The trace is decoration, not information, so it simply stops. */
@media (prefers-reduced-motion:reduce){
  .hero-ecg__line{animation:none}
}

@media (max-width:820px){
  .hero-band{
    --hero-grid-size:64px;
    --hero-ecg-top:330px;--hero-ecg-height:200px;--hero-ecg-tile:250px;
    /* Fainter: at this width there is no room beside the copy, so the trace
       runs behind it and has to drop to a texture. */
    --hero-ecg-opacity:.16;
  }
  .hero-band::before{
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 560px,transparent 900px);
    mask-image:linear-gradient(to bottom,#000 0,#000 560px,transparent 900px);
  }
  /* No centre channel here — clearing one would leave the trace visible only
     in two slivers at the edges. Just soften where it meets them. */
  .hero-ecg{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
  }
}
.hero-band > .container{position:relative;z-index:1}

/* --- Hero -----------------------------------------------------------------
   Centred copy over the reporting surface, matching the design system UI
   kit's hero. Copy caps at 880 and the sub-headline at 720, both from the kit. */
.hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--space-5);max-width:880px;margin:0 auto;
}
.hero__title{margin:0}
.hero__sub{margin:0;font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);font-weight:var(--fw-light);color:var(--text-body);max-width:720px}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;margin-top:var(--space-2)}
.hero__support{margin:0;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted)}

/* --- The reporting surface (spec section 4, visual direction) --------------
   Three panels at the kit's 1 / 1.42 / 2.1 ratio: claims submitted, the A/R
   ageing view, and the claim status table. Normal flow, not the kit's absolute
   positioning, so it reflows. */
.hero-surface{
  display:grid;grid-template-columns:1fr 1.42fr 2.1fr;gap:var(--gutter);
  margin-top:var(--space-9);align-items:stretch;
}
.hero-surface__note{margin-top:var(--space-3)}

.hero-panel{
  background:var(--teal-900);border-radius:var(--radius-lg);
  padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);
}
.hero-panel--b{background:var(--teal-950)}
/* The panels stretch to a common height; anchoring the second card to the
   bottom turns the leftover space into deliberate breathing room rather than
   a gap under the last card. */
.hero-panel--a > .ar-card:last-child,
.hero-panel--b > .ar-card:last-child{margin-top:auto}

.ar-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);color:var(--neutral-0)}
.ar-panel__title{display:flex;align-items:center;gap:9px;font-size:var(--fs-ui);font-weight:var(--fw-semibold)}
.ar-panel__stamp{font-size:var(--fs-micro);color:rgba(255,255,255,.66)}

.ar-card{background:var(--neutral-0);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:18px}
.ar-card--grow{flex-grow:1}
.ar-card__title{font-size:var(--fs-ui);font-weight:var(--fw-semibold);color:var(--text-heading);margin-bottom:14px}
.ar-card__label{
  font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal-800);font-weight:var(--fw-semibold);margin-bottom:12px;
}

/* Donut: claims submitted, split clean-first-pass against worked-manually.
   Panel A is the narrow one, so the chart stacks above its legend rather than
   sitting beside it and wrapping unpredictably. */
.ar-donut{display:flex;flex-direction:column;align-items:center;gap:14px}
.ar-donut__chart{position:relative;display:grid;place-items:center;flex-shrink:0}
.ar-donut__total{position:absolute;font-size:17px;letter-spacing:-.4px;color:var(--teal-900)}
.ar-donut__legend{display:flex;flex-direction:column;gap:10px;align-self:stretch}
.ar-legend{display:flex;align-items:center;gap:8px}
.ar-legend > span:last-child{display:flex;flex-direction:column}
.ar-legend__value{font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--text-heading)}
.ar-legend__label{font-size:var(--fs-micro);color:var(--text-muted)}

.ar-figures{display:flex;gap:24px;flex-wrap:wrap;border-top:1px solid var(--border-subtle);padding-top:12px}
.ar-figures > span{display:flex;flex-direction:column;gap:2px}
.ar-figures__label{font-size:var(--fs-micro);color:var(--text-muted)}
.ar-figures__value{font-size:15px;color:var(--teal-900);font-weight:var(--fw-medium)}

/* A/R ageing bars. Teal for what is still collectable, amber and red where
   collection probability drops — the same story the problem section tells. */
.ar-bar{display:grid;grid-template-columns:auto minmax(24px,1fr) auto;align-items:center;gap:10px;padding:5px 0}
.ar-bar__label{font-size:var(--fs-micro);color:var(--text-muted);white-space:nowrap}
.ar-bar__track{height:8px;border-radius:99px;background:var(--neutral-100);overflow:hidden}
.ar-bar__fill{display:block;height:100%;border-radius:99px;background:var(--teal-500)}
.ar-bar__fill--mid{background:var(--teal-400)}
.ar-bar__fill--warn{background:var(--amber-500)}
.ar-bar__fill--risk{background:var(--red-500)}
.ar-bar__value{font-size:var(--fs-micro);color:var(--text-heading);white-space:nowrap}

.ar-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}
.ar-kpi{background:var(--surface-tint);padding:14px 20px}
.ar-kpi__label{font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-800);font-weight:var(--fw-semibold)}
.ar-kpi__value{font-size:22px;letter-spacing:-.44px;color:var(--teal-900);font-variant-numeric:tabular-nums}

.ar-rows{display:flex;flex-direction:column}
.ar-row{
  display:grid;grid-template-columns:1.2fr 1fr 88px 96px;align-items:center;gap:14px;
  padding:13px 0;border-top:1px solid var(--border-subtle);
}
.ar-row:first-child{border-top:0}
.ar-row__name{font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--text-heading)}
.ar-row__payer{font-size:var(--fs-caption);color:var(--text-muted)}
.ar-row__amount{font-size:var(--fs-caption);text-align:right;color:var(--text-heading);font-variant-numeric:tabular-nums}
.ar-row__status{display:flex;align-items:center;gap:7px;font-size:var(--fs-micro);color:var(--text-body)}
.ar-dot{width:7px;height:7px;border-radius:99px;flex-shrink:0;background:var(--teal-600)}
.ar-dot--paid{background:var(--green-500)}
.ar-dot--appealed{background:var(--red-500)}
.ar-dot--review{background:var(--amber-500)}
.ar-dot--clean{background:var(--teal-500)}
.ar-dot--manual{background:var(--orange-500)}

.ar-worklist__label{font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-800);font-weight:var(--fw-semibold);margin-bottom:12px}
.ar-worklist__row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--border-subtle)}
.ar-worklist__row:first-of-type{border-top:0}
.ar-worklist__key{font-size:var(--fs-caption);color:var(--text-heading)}
.ar-worklist__val{font-size:var(--fs-micro);color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}

@media (max-width:1180px){
  /* The claim table needs the most room, so it takes the full width and the
     two narrower panels sit side by side above it. */
  .hero-surface{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-panel--c{grid-column:1/-1}
}

@media (max-width:820px){
  .hero-surface{grid-template-columns:minmax(0,1fr)}
  .hero-panel--c{grid-column:auto}
  .ar-row{grid-template-columns:1.2fr 1fr 80px}
  .ar-row__status{grid-column:1/-1}
}

/* --- Page hero (interior pages) ------------------------------------------ */
.page-hero{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start;max-width:820px}
.page-hero__sub{margin:0;font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);font-weight:var(--fw-light);color:var(--text-body)}
.page-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-2)}

/* --- A/R calculator ------------------------------------------------------ */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-9);align-items:start}
.calc__result{display:flex;flex-direction:column;gap:var(--space-5)}
.calc__headline{font-size:var(--fs-display-2);line-height:1.05;letter-spacing:var(--ls-display-2);color:var(--teal-800);font-variant-numeric:tabular-nums}
.calc__breakdown{list-style:none;margin:0;padding:0}
.calc__breakdown li{display:flex;justify-content:space-between;gap:var(--space-4);padding:14px 0;border-top:1px solid var(--border-subtle);font-size:var(--fs-body-sm);font-weight:var(--fw-light)}
.calc__breakdown li:first-child{border-top:0}
.calc__breakdown b{font-weight:var(--fw-medium);color:var(--text-heading);font-variant-numeric:tabular-nums}
@media (max-width:900px){.calc{grid-template-columns:minmax(0,1fr)}}

/* --- Pagination ---------------------------------------------------------- */
.pagination{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);justify-content:center}
.pagination a,.pagination span{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;
  border-radius:var(--radius-pill);border:1px solid var(--border-default);
  font-size:var(--fs-ui);color:var(--neutral-800);text-decoration:none;background:var(--surface-card);
  transition:var(--transition-hover);
}
.pagination a:hover{border-color:var(--teal-300);background:var(--teal-50);color:var(--teal-800)}
.pagination .is-current{background:var(--teal-700);border-color:var(--teal-700);color:var(--neutral-0)}
.pagination .is-disabled{opacity:.45;pointer-events:none}

/* --- Search bar ---------------------------------------------------------- */
.search-bar{display:flex;gap:var(--space-3);align-items:center;max-width:520px;width:100%}
.search-bar .input{border-radius:var(--radius-pill);padding-left:20px}

/* --- Glossary ------------------------------------------------------------ */
.alpha-index{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.alpha-index a,.alpha-index span{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:var(--radius-pill);border:1px solid var(--border-default);
  font-size:var(--fs-ui);text-decoration:none;color:var(--neutral-800);transition:var(--transition-hover);
}
.alpha-index a:hover{background:var(--teal-50);border-color:var(--teal-300)}
.alpha-index span{color:var(--text-faint);border-style:dashed}
.glossary-group{display:flex;flex-direction:column;gap:var(--space-4);scroll-margin-top:120px}
.glossary-term{padding:var(--space-5) 0;border-top:1px solid var(--border-subtle)}
.glossary-term dt{font-size:var(--fs-h5);line-height:var(--lh-h5);font-weight:var(--fw-medium);color:var(--text-heading);margin-bottom:var(--space-2)}
.glossary-term dd{margin:0;font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);font-weight:var(--fw-light);color:var(--text-body)}

/* --- Team ---------------------------------------------------------------- */
.person{display:flex;flex-direction:column;gap:var(--space-4)}
.person__photo{
  width:100%;aspect-ratio:1/1;border-radius:var(--radius-lg);object-fit:cover;
  background:var(--surface-tint);
}
.person__placeholder{
  display:grid;place-items:center;width:100%;aspect-ratio:1/1;border-radius:var(--radius-lg);
  background:var(--surface-tint);color:var(--teal-700);font-size:var(--fs-h3);font-weight:var(--fw-light);
}
.person__name{font-size:var(--fs-h5);line-height:var(--lh-h5);font-weight:var(--fw-medium);color:var(--text-heading)}
.person__role{font-size:var(--fs-caption);color:var(--text-muted)}

/* --- Admin --------------------------------------------------------------- */
.admin-shell{min-height:100vh;background:var(--surface-muted)}
.admin-bar{background:var(--teal-900);color:var(--neutral-0);padding:14px var(--space-8)}
.admin-bar a{color:var(--text-on-inverse-muted);text-decoration:none;font-size:var(--fs-ui)}
.admin-bar a:hover{color:var(--neutral-0)}
.admin-bar a.is-active{color:var(--neutral-0);font-weight:var(--fw-medium)}
.admin-main{max-width:1180px;margin:0 auto;padding:var(--space-9) var(--space-8)}
.data-table{width:100%;border-collapse:collapse;background:var(--surface-card);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-default)}
.data-table th{text-align:left;padding:12px 16px;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);background:var(--surface-muted);border-bottom:1px solid var(--border-default);white-space:nowrap}
.data-table td{padding:12px 16px;font-size:var(--fs-caption);color:var(--text-body);border-top:1px solid var(--border-subtle);vertical-align:top}
.data-table tr:hover td{background:var(--neutral-25)}

/* --- Print --------------------------------------------------------------- */
@media print{
  .site-header,.site-footer,.cta-banner,.btn{display:none!important}
  body{color:#000;background:#fff}
}