/* Static adaptations of AppBar, CategoryTile, ArrowLink, Button and HelpBar.
   Source: ../../components/{navigation,cards,core}/*.prompt.md, *.card.html, *.jsx. */
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/elevation.css');
@import url('tokens/motion.css');
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/figtree.woff2') format('woff2');
}
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('fonts/material-symbols-subset.woff2') format('woff2');
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--text-copy);
}
a {
  color: var(--text-link);
  min-height: 44px;
}
a:hover {
  color: var(--text-link-hover);
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: var(--border-width-strong) solid var(--focus-ring);
  outline-offset: var(--space-1);
  box-shadow: var(--shadow-focus);
}
a,
button {
  overflow-wrap: anywhere;
}
.skip {
  position: absolute;
  left: -10000px;
  padding: var(--space-3);
  background: var(--surface-card);
  z-index: 100;
}
.skip:focus {
  left: var(--space-3);
  top: var(--space-3);
}
.preview-ribbon {
  padding: var(--space-2) var(--layout-gutter);
  text-align: center;
  background: var(--surface-warn-soft);
  color: var(--text-body);
  font-size: var(--size-body-sm);
}
.appbar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--appbar-height);
  padding: 0 var(--space-8);
  background: var(--surface-brand);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-appbar);
}
.appbar img {
  height: 38px;
  width: auto;
}
.appbar-separator {
  width: var(--border-width);
  height: 30px;
  background: var(--text-on-brand);
  opacity: 0.35;
}
.appbar-title {
  font-weight: var(--font-weight-bold);
  font-size: var(--size-h5);
  letter-spacing: var(--tracking-heading);
}
.appbar nav {
  margin-left: auto;
  display: flex;
  gap: var(--space-4);
}
.appbar a {
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.portal-layout {
  max-width: var(--layout-max);
  margin: auto;
  padding: var(--space-5) var(--layout-gutter) var(--space-10);
}
h1 {
  font: var(--text-section);
  color: var(--text-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-5);
  overflow-wrap: anywhere;
}
h2 {
  font: var(--text-tile-title);
  color: var(--text-heading);
}
p {
  margin-block: var(--space-3);
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--size-body-sm);
}
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
}
.question {
  max-width: 900px;
  margin-inline: auto;
  padding: var(--pad-card);
  /* T008: one grid at every width, so an instructional lead can RENDER after the
     deciding fact while the DOM keeps the lead first (check-interiors adjacency). */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.question > * {
  order: 3;
}
.question > h1 {
  order: 0;
}
.question > .do-this,
.question > .decides {
  order: 1;
}
/* T008, the phone: check-interiors keeps the lead panel inside the first 760px and
   check-experience wants the deciding fact rendered first — for nine of the eleven
   instructional leads both cannot hold at 390 (the deciding payload alone is 500–1,300px
   tall). Only sheet-6 and sheet-9, whose deciding fact is short, are demoted here;
   the other nine wait on an owner ruling (T008 note). Desktop demotes all eleven. */
main[data-sheet='sheet-6'] > .do-this[data-lead='instructional'],
main[data-sheet='sheet-9'] > .do-this[data-lead='instructional'] {
  order: 2;
}
/* The other nine carry `data-lead-fold` (owner ruling D11, 2026-09-10) and still render
   their lead at 390: it can be neither deleted nor hidden. check-questions holds the
   bytes in place (ANSWER_FIRST wants the lead quote as the panel's first child,
   SOURCE_PROSE_MISSING wants its prose on the page) and the surface gate refuses a
   CSS hide (SOURCE_LIVE, html-dom-adapter.mjs:121, seeded at
   check-surface.dom.test.mjs:235). Their mechanisms are built — the row axis below, the
   sheet-15 filter, the deciding receipt's total — but the sentence itself waits on an
   owner ruling; see the T008 receipt. */
.category-shelf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--layout-grid-gap);
  margin-block: var(--space-6);
}
.category-tile {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--space-4);
  min-width: 0;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--pad-tile);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: var(--transition-interactive);
}
.category-tile:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-raised);
}
.tile-top {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.tile-top > div {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}
.tile-title {
  font: var(--text-tile-title);
}
.tile-body {
  font-size: var(--size-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}
.icon {
  font-family: 'Material Symbols Rounded';
  font-size: var(--space-6);
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-feature-settings: 'liga';
  font-variation-settings:
    'FILL' 1,
    'wght' 500,
    'GRAD' 0,
    'opsz' 24;
}
.icon-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-circle-sm);
  height: var(--icon-circle-sm);
  border-radius: var(--radius-full);
  flex: 0 0 auto;
  color: var(--white);
}
.category-medical .tile-title {
  color: var(--cat-medical);
}
.category-medical .icon-disc {
  background: var(--cat-medical);
}
.category-dental .tile-title {
  color: var(--cat-dental);
}
.category-dental .icon-disc {
  background: var(--cat-dental);
}
.category-disability .tile-title {
  color: var(--cat-disability);
}
.category-disability .icon-disc {
  background: var(--cat-disability);
}
.category-voluntary .tile-title {
  color: var(--cat-voluntary);
}
.category-voluntary .icon-disc {
  background: var(--cat-voluntary);
}
.category-life .tile-title {
  color: var(--cat-life);
}
.category-life .icon-disc {
  background: var(--cat-life);
}
.category-resources .tile-title {
  color: var(--cat-resources);
}
.category-resources .icon-disc {
  background: var(--cat-resources);
}
.arrow {
  display: inline-flex;
  color: var(--text-link);
  transition: var(--transition-interactive);
}
a:hover .arrow,
.question-link:hover .arrow {
  transform: var(--arrow-nudge);
}
.question-list {
  display: grid;
  gap: var(--space-3);
}
.question-link {
  display: grid;
  gap: var(--space-1);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.arrow-link,
.situation-link {
  display: inline-flex;
  align-items: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--size-body-sm);
  text-decoration: none;
  transition: var(--transition-interactive);
  padding-block: var(--space-3);
}
.helpbar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  background: var(--surface-help);
  border-radius: var(--radius-lg);
  padding: var(--pad-bar);
  margin-top: var(--space-6);
}
.helpbar h2,
.helpbar p {
  margin: 0;
}
.helpbar p {
  color: var(--text-muted);
}
.help-icon {
  width: var(--icon-circle-md);
  height: var(--icon-circle-md);
  background: var(--white);
  color: var(--navy-700);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  margin-left: auto;
  font: var(--text-button);
  padding: var(--button-pad-y) var(--button-pad-x);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--navy-700);
  background: var(--white);
  color: var(--navy-700);
  text-decoration: none;
  transition: var(--transition-interactive);
}
.button:hover {
  background: var(--navy-050);
}
.button:active {
  background: var(--navy-100);
  transform: var(--press-scale);
}
/* Exact source elements receive layout, never rewritten wording or figures. */
.book-source,
.claim-payload {
  min-width: 0;
  margin-block: var(--space-5);
  overflow-wrap: anywhere;
}
.book-source > *,
.claim-payload > * {
  max-width: 100%;
  min-width: 0;
}
.book-source .lead {
  padding-left: 0;
}
.lead .k,
.claim-payload .k {
  font-weight: var(--font-weight-bold);
}
.claim-payload .dir-grid,
.claim-payload .directory,
.claim-payload .cost-ladder,
.claim-payload .paygrid,
.claim-payload .branch,
.claim-payload .cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.claim-payload .dir-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.claim-payload .dir-row > *,
.claim-payload .frow > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.claim-payload .frow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.claim-payload a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.claim-payload table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.claim-payload td,
.claim-payload th {
  white-space: normal;
  overflow-wrap: anywhere;
  padding: var(--space-2);
  text-align: left;
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.claim-payload .stamp,
.book-source .note {
  font-size: var(--size-body-sm);
}
.claim-payload .cc-jane-k {
  text-transform: none;
}
@media (min-width: 1100px) {
  .category-shelf {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .claim-payload .dir-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .appbar {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }
  .appbar nav {
    width: 100%;
    margin-left: 0;
  }
  .portal-layout {
    padding-inline: var(--space-4);
  }
  .question {
    padding: var(--space-4);
  }
  .helpbar {
    flex-wrap: wrap;
    padding: var(--space-5);
  }
  .button {
    margin-left: 0;
    white-space: normal;
    line-height: var(--leading-snug);
  }
}
/* Source archetypes: retain each label/value relationship at both widths. */
.claim-payload .facts {
  padding: var(--space-5);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-md);
}
/* T006-critique N2: `overflow-wrap: anywhere` (q.css:321) was breaking the payload's
   own word mid-word — Nonparticipati/ng in the dental table at 390px. A Benefit
   Facts cell breaks only when the word cannot fit a line of its own. No payload byte
   moves; this is the stylesheet the panel already sits in. */
.claim-payload .facts .cc-dk,
.claim-payload .facts .cc-dv {
  overflow-wrap: break-word;
}
.claim-payload .fh,
.claim-payload .rh,
.claim-payload .extras-h,
.claim-payload .gbars-cap {
  font: var(--text-tile-title);
  color: var(--text-heading);
  margin-bottom: var(--space-3);
}
.claim-payload .cc-drow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: baseline;
  padding-block: var(--space-3);
  border-top: var(--border-width) solid var(--border-hairline);
  font-size: var(--size-body-sm);
}
.claim-payload .cc-drow.head {
  border-top: 0;
  font-size: var(--size-caption);
}
.claim-payload .cc-dk {
  min-width: 0;
  font-weight: var(--font-weight-bold);
}
.claim-payload .cc-dv {
  min-width: 0;
  text-align: right;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.claim-payload .receipt {
  padding: var(--space-5);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-hero);
}
.claim-payload .rsub,
.claim-payload .bnum {
  font-size: var(--size-body-sm);
  color: var(--text-muted);
}
.claim-payload .rrule {
  border: 0;
  border-top: var(--border-width) solid var(--border-hairline);
}
.claim-payload .rrow,
.claim-payload .rtotal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.claim-payload .rrow .n,
.claim-payload .rtotal .n {
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.claim-payload .rtotal {
  border-top: var(--border-width-strong) solid var(--border-brand);
  border-bottom: 0;
}
.claim-payload .rtotal .n {
  font-size: var(--size-h4);
}
.claim-payload .tl-ruler {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: stretch;
  gap: var(--space-4);
  border-bottom: var(--border-width-strong) solid var(--border-brand);
  padding-block: var(--space-4);
}
.claim-payload .tl-origin,
.claim-payload .tl-seg {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.claim-payload .tl-origin {
  font-size: var(--size-body-sm);
  font-weight: var(--font-weight-bold);
}
.claim-payload .tl-tick {
  display: block;
  width: var(--space-1);
  height: var(--space-4);
  background: var(--surface-brand);
}
.claim-payload .tl-seg small {
  font-size: var(--size-caption);
  font-weight: var(--font-weight-bold);
}
.claim-payload .tl-seg b {
  font-size: var(--size-h4);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-bold);
}
.claim-payload .tl-due b {
  border-bottom: var(--border-width-strong) solid var(--surface-accent);
  padding-bottom: var(--space-1);
}
.claim-payload .stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.claim-payload .stamp .d {
  font-weight: var(--font-weight-bold);
}
.claim-payload .move {
  display: grid;
  grid-template-columns: var(--icon-circle-sm) minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.claim-payload .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-circle-sm);
  height: var(--icon-circle-sm);
  border-radius: var(--radius-full);
  background: var(--surface-brand-soft);
  color: var(--text-heading);
  font-weight: var(--font-weight-bold);
}
.claim-payload h3 {
  font: var(--text-tile-title);
  margin-top: 0;
  color: var(--text-heading);
}
.claim-payload .standfirst {
  font: var(--text-copy) !important;
}
.claim-payload .chip {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background: var(--surface-brand-soft);
  border-radius: var(--radius-xs);
  font-size: var(--size-body-sm);
  font-weight: var(--font-weight-bold);
}
.claim-payload .cc-example {
  padding: var(--space-3);
  background: var(--surface-hero);
}
.claim-payload .branch-arm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-brand-soft);
}
.claim-payload .branch-if,
.claim-payload .dir-k {
  font: var(--text-tile-title);
  color: var(--text-heading);
}
.claim-payload .dir-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.claim-payload .dir-sub {
  color: var(--text-muted);
  font-size: var(--size-body-sm);
}
.claim-payload .dir-v {
  font-weight: var(--font-weight-semibold);
}
.claim-payload .diverge,
.claim-payload .dp {
  display: grid;
  gap: var(--space-3);
}
.claim-payload .dg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.claim-payload .dp {
  padding: var(--space-4);
  background: var(--surface-brand-soft);
  border-radius: var(--radius-md);
}
.claim-payload .dp b {
  font-size: var(--size-h3);
  color: var(--text-heading);
}
.claim-payload .dl {
  font: var(--text-tile-title);
}
.claim-payload .dn {
  color: var(--text-muted);
  font-size: var(--size-body-sm);
}
.claim-payload .extras-term {
  border-top: var(--border-width) solid var(--border-hairline);
  padding-top: var(--space-4);
}
.claim-payload .gbar {
  margin-block: var(--space-5);
}
.claim-payload .gbar-t {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}
.claim-payload .cplan-bar {
  display: flex;
  gap: var(--space-2);
}
.claim-payload .cplan-seg {
  min-width: 0;
  padding: var(--space-3);
  background: var(--surface-brand-soft);
}
.claim-payload .cplan-seg-you {
  background: var(--surface-accent-soft);
}
.claim-payload .cplan-seg-blank {
  background: var(--surface-page);
  border: var(--border-width) dashed var(--border-strong);
}
/* The tint already separates this note from the prose around it; the stripe was doing the
   same job twice and reading as decoration. Tint alone. */
.book-source .note,
.question > .note {
  padding: var(--space-4);
  background: var(--surface-hero);
}
@media (max-width: 600px) {
  .claim-payload .facts {
    padding: var(--space-3);
  }
  .claim-payload .cc-drow {
    gap: var(--space-1);
  }
  .claim-payload .cplan-bar {
    flex-direction: column;
  }
}

.arrow-link::after {
  content: 'arrow_forward';
  font-family: 'Material Symbols Rounded';
  font-size: var(--size-body);
  margin-left: var(--space-2);
  transition: var(--transition-interactive);
}
.arrow-link:hover::after {
  transform: var(--arrow-nudge);
}
.situation-link:hover .arrow {
  transform: var(--arrow-nudge);
}
.situation-link .arrow {
  transition: var(--transition-interactive);
}
.claim-payload .tl-arrow {
  display: block;
  grid-column: 2;
  text-align: right;
}
.claim-payload .tl-arrow::after {
  content: 'arrow_forward';
  font-family: 'Material Symbols Rounded';
  font-size: var(--space-6);
  color: var(--text-heading);
}
.claim-payload .cc-dv {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-1);
}
/* Dense comparison panels retain row labels and distinct provider columns. */
.claim-payload .cc-dv {
  flex-wrap: wrap;
}
.claim-payload .facts:has(.fgroup) .cc-drow {
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
}
.claim-payload .fgroup {
  font: var(--text-tile-title);
  padding-top: var(--space-5);
  color: var(--text-heading);
}
.claim-payload .fnote,
.claim-payload .fsub,
.claim-payload .rnote {
  font-size: var(--size-body-sm);
  margin-block: var(--space-3);
}
.claim-payload .split,
.claim-payload .clocks-grid,
.claim-payload .cplan-terms {
  display: grid;
  gap: var(--space-6);
}
.claim-payload .mrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.claim-payload .mrow > .t {
  font-weight: var(--font-weight-bold);
}
.claim-payload .mrow .sub {
  display: block;
  font-size: var(--size-body-sm);
  font-weight: var(--font-weight-regular);
}
.claim-payload .mrow .pg {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: var(--size-body-sm);
}
.claim-payload .mrow > .dots {
  display: none;
}
.claim-payload .clock-rec {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-brand-soft);
  border-radius: var(--radius-md);
}
.claim-payload .clock-cap {
  font: var(--text-tile-title);
  color: var(--text-heading);
}
.claim-payload .clock-fig {
  font-size: var(--size-h4);
  font-weight: var(--font-weight-bold);
}
.claim-payload .clock-p {
  font: var(--text-copy);
}
.claim-payload .menu-item {
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.claim-payload .menu-item .line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  font-weight: var(--font-weight-bold);
}
.claim-payload .menu-item .dots {
  display: none;
}
.claim-payload .price {
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
  white-space: nowrap;
}
.claim-payload .price i {
  color: var(--text-muted);
  font-style: normal;
  font-weight: var(--font-weight-regular);
}
.claim-payload .care-free {
  padding: var(--space-4);
  background: var(--surface-success-soft);
  border-radius: var(--radius-md);
}
.claim-payload .cmp {
  font-size: var(--size-body-sm);
}
.claim-payload .cmp thead {
  background: var(--surface-brand-soft);
}
.claim-payload .cmp-shared-list {
  display: grid;
  gap: var(--space-3);
}
.claim-payload .cplan-item {
  padding-left: var(--space-3);
}
.claim-payload .move:not(:has(> .num)) {
  grid-template-columns: minmax(0, 1fr);
}
.claim-payload .cplan-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.claim-payload .cplan-tier,
.claim-payload .cplan-oop {
  margin-block: var(--space-5);
}
.claim-payload .cplan-tier-t,
.claim-payload .cplan-oop-k,
.claim-payload .cplan-seg-k {
  display: block;
  font-weight: var(--font-weight-bold);
}
.claim-payload .cplan-seg-plan {
  background: var(--surface-brand-soft);
}
.claim-payload .cplan-oop {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-sm);
}
.claim-payload .cplan-term {
  padding-block: var(--space-4);
  border-top: var(--border-width) solid var(--border-hairline);
}
.claim-payload .cplan-term h3 {
  margin-bottom: var(--space-2);
}
.book-source .spec {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.book-source .why h3 {
  font: var(--text-tile-title);
  color: var(--text-heading);
}
.book-source .demo {
  padding: var(--space-4);
  background: var(--surface-brand-soft);
  border-radius: var(--radius-md);
}
.book-source .demo .facts {
  max-width: 100%;
}
.book-source .demo .fh {
  font: var(--text-tile-title) !important;
}
.book-source .demo .frow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}
.book-source .demo .stamp {
  display: grid;
  gap: var(--space-2);
}
.book-source .demo > span {
  font-size: var(--size-h4) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--text-heading) !important;
}
.book-source .lead p {
  font: var(--text-copy) !important;
}
@media (min-width: 900px) {
  .claim-payload .clocks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .claim-payload .facts:has(.fgroup) .cc-drow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .claim-payload .facts:has(.fgroup) .cc-dk {
    grid-column: 1 / -1;
  }
  .claim-payload .facts:has(.fgroup) .cc-dv {
    justify-content: flex-start;
    text-align: left;
  }
  .claim-payload .cmp td,
  .claim-payload .cmp th {
    padding: var(--space-1);
  }
}
/* Active and muted source scale segments remain distinct. */
.claim-payload .price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
}
/* The source governing-rule callout keeps its emphasized clause distinct. */
.claim-payload .governs {
  padding: var(--space-4);
  background: var(--surface-brand-soft);
  border-radius: var(--radius-md);
}
.claim-payload .governs em {
  font-style: normal;
  font-weight: var(--font-weight-bold);
}
/* Account and insurance facts: label first, complete limit and qualifier together. */
.claim-payload .frow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.claim-payload .frow > .v {
  font-weight: var(--font-weight-bold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.claim-payload .frow .v small {
  display: block;
  font-weight: var(--font-weight-regular);
  font-size: var(--size-body-sm);
}
.book-source [style*='min-width'] {
  min-width: 0 !important;
}
.book-source .stamp {
  display: grid;
  gap: var(--space-2);
}
.book-source .stamp small {
  font-size: var(--size-body-sm);
}
.book-source .stamp .d {
  font-size: var(--size-h4);
  font-weight: var(--font-weight-bold);
}
.claim-payload .money-adv,
.claim-payload .money-tri-col {
  display: grid;
  gap: var(--space-4);
}
.claim-payload .money-adv-item,
.claim-payload .money-tri-item {
  padding: var(--space-4);
  background: var(--surface-brand-soft);
}
.claim-payload .money-adv-h,
.claim-payload .money-adv-label {
  font: var(--text-tile-title);
  color: var(--text-heading);
}
.claim-payload .money-tri-n {
  font-weight: var(--font-weight-bold);
  font-size: var(--size-h4);
}
.book-source .money-note-block h3,
.book-source .grow-edelivery-lead {
  font: var(--text-tile-title);
  color: var(--text-heading);
}
.claim-payload .grow-bars-stat {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-brand-soft);
  border-radius: var(--radius-md);
}
.claim-payload .grow-bars-stat .v {
  font-weight: var(--font-weight-bold);
}
.claim-payload .grow-bar-row {
  margin-block: var(--space-6);
}
.claim-payload .grow-bar-label {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}
.claim-payload .grow-bar-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
.claim-payload .grow-bar-track {
  display: flex;
  width: 100%;
  height: var(--space-5);
  background: var(--surface-brand-soft);
  border-radius: var(--radius-xs);
}
.claim-payload .grow-bar-fill {
  height: 100%;
  background: var(--surface-brand);
}
.claim-payload .grow-bar-fill.sv-children {
  background: var(--surface-accent);
}
.claim-payload .grow-bar-amt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.claim-payload .grow-bar-sub {
  margin-top: var(--space-2);
  font-size: var(--size-body-sm);
  color: var(--text-muted);
}
.claim-payload .prot-pays {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
}
.claim-payload .prot-rail {
  padding-block: var(--space-3);
  border-top: var(--border-width) solid var(--border-hairline);
}
.claim-payload .prot-rail .h {
  font: var(--text-tile-title);
}
.claim-payload .grow-contact-row {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.claim-payload .grow-contact-row .k {
  font: var(--text-tile-title);
  color: var(--text-heading);
}
.book-source .grow-edelivery {
  padding: var(--space-4);
  background: var(--surface-hero);
  border-radius: var(--radius-md);
}
.book-source .grow-fees-quote {
  font: var(--text-copy);
}
@media (max-width: 600px) {
  .claim-payload .frow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
  .claim-payload .frow > .v {
    text-align: left;
  }
}
/* Source situation labels remain complete quotes inside one shared hit target. */
.situation-group {
  margin-block: var(--space-6);
}
.situation-group > .book-source h3 {
  font: var(--text-tile-title);
  color: var(--text-heading);
}
.situation-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--icon-circle-sm);
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.situation-link .book-source {
  margin: 0;
}
.situation-link .icon {
  flex-shrink: 0;
}
.source-carrier {
  margin: 0;
}
.source-carrier img {
  display: block;
  width: 100%;
  height: auto;
}
.source-carrier figcaption {
  margin-top: var(--space-3);
  font-size: var(--size-caption);
}
.book-source .move {
  display: grid;
  grid-template-columns: var(--icon-circle-sm) minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.book-source .move h3 {
  font: var(--text-tile-title);
}
/* Enrollment months and session ticks retain their source relationships. */
.claim-payload .ys-strip {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  position: relative;
  padding-block: var(--space-3);
}
.claim-payload .ys-win {
  position: absolute;
  inset-block: 0;
  background: var(--surface-brand-soft);
  border-bottom: var(--border-width-strong) solid var(--surface-accent);
}
.claim-payload .ys-m {
  position: relative;
  text-align: center;
  font-size: var(--size-caption);
}
.claim-payload .ys-cap,
.claim-payload .care-poster {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
}
.claim-payload .care-poster-q {
  font: var(--text-tile-title);
}
.claim-payload .ticks-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.claim-payload .tick {
  height: var(--space-6);
  background: var(--surface-brand);
  border-radius: var(--radius-sm);
}
.claim-payload .tick--dual {
  background: var(--surface-brand-soft);
  border: var(--border-width-strong) solid var(--surface-brand);
}
.claim-payload .extras-grid,
.claim-payload .ex-svc {
  display: grid;
  gap: var(--space-5);
}
.claim-payload .extras-card,
.claim-payload .dcard {
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.claim-payload .dcard > .t {
  font: var(--text-tile-title);
  margin-bottom: var(--space-3);
}
/* The approved composition (T002-anatomy §2-§5): the Do This panel and the
   deciding-fact panel sit under the question, then the type body. The panels are
   chrome AROUND unmodified source and payload blocks — no padding on the phone,
   where a squeezed payload grid is what overflows 390px. */
.do-this,
.decides {
  margin-block: var(--space-4);
}
.do-this > .book-source,
.decides > .claim-payload {
  margin-block: 0;
}
/* D4: the second half of a pair keeps its own air. Nothing inside either payload. */
.decides > .claim-payload + .claim-payload {
  margin-top: var(--space-4);
}
.decides {
  border-top: var(--border-width-strong) solid var(--surface-brand);
  padding-top: var(--space-4);
}
.detail {
  display: block;
}
/* T002-anatomy §4: a remaining source section under the heading the book gave it,
   closed. Native <details> — the kit has no collapsible component and one control
   does not earn one. The summary is a 44px target even though the tap-target probe
   exempts it (it is neither <a> nor <button>). */
.detail details {
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.detail summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font: var(--text-tile-title);
  color: var(--text-heading);
}
.detail summary::marker {
  color: var(--text-muted);
}
/* Charter step 4: the way onward. Same ArrowLink grammar as the category shelf. */
.related {
  display: grid;
  margin-block: var(--space-5);
  border-top: var(--border-width) solid var(--border-hairline);
}
.related > .arrow-link {
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.next-label {
  margin-right: var(--space-3);
  font-size: var(--size-body-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-heading);
}
.difference {
  color: var(--text-muted);
  font-size: var(--size-body-sm);
  line-height: var(--leading-relaxed);
}
.rows,
.rules {
  display: grid;
  gap: var(--space-2);
}
.rows > .row {
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.rows > .row > * {
  margin-block: var(--space-4);
}
/* Desktop expands the same DOM into two columns; nothing is added or reordered. */
@media (min-width: 900px) {
  .question {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: var(--space-8);
    align-items: start;
  }
  .question > h1 {
    grid-column: 1 / -1;
  }
  .question > .do-this,
  .question > .decides {
    grid-column: 1;
  }
  /* an instructional lead reads after the deciding fact: right column, below its top */
  .question > .do-this[data-lead='instructional'] {
    grid-column: 2;
    order: 2;
    margin-top: var(--space-6);
  }
  .question > .detail,
  .question > .related,
  .question > .note,
  .question > .source-carrier,
  .question > .ask,
  .question > .ask-state {
    grid-column: 2;
  }
  /* T011/D2: the answer spans every row the right column fills. Each right-column block
     used to get its own row, so .related waited for .decides to end (2,365px on sheet-47).
     The trailing 1fr row takes whatever height .decides has left over, so the auto rows
     stay as tall as their own blocks. */
  .question {
    grid-template-rows: repeat(8, auto) 1fr;
  }
  .question > .decides {
    grid-row: 2 / -1;
  }
  .question > .do-this:not([data-lead='instructional']) {
    grid-row: 2;
  }
  .question > .do-this:not([data-lead='instructional']) ~ .decides {
    grid-row: 3 / -1;
  }
}

/* The composed category page (T002-anatomy §6), in owner decision D5's order:
   a cream hero carrying the category's IconCircle and its authored promise line,
   then the Do This cards, then the questions in groups of six or fewer, then the
   supporting tables as lifted payloads. `.cat-hero` is the composed region — the
   frozen selector `.cat-hero .facts-strip` keeps the strip inside it — so the
   cream is painted on `.cat-hero-head`, the block that is actually the banner.
   Payloads keep the phone's no-padding rule — a squeezed payload grid is what
   overflows 390px. */
.cat-hero {
  display: grid;
  gap: var(--space-6);
}
.cat-hero-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--surface-help);
  border-radius: var(--radius-lg);
  padding: var(--pad-bar);
}
.cat-hero-head > div {
  min-width: 0;
}
/* D10: the index hero carries the third photograph. The cream bar becomes a card so the
   picture can reach its edges; the text keeps the bar's own padding. */
.benefits-directory .cat-hero-head.has-photo {
  display: grid;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.benefits-directory .cat-hero-head.has-photo > div {
  padding: var(--pad-bar);
}
.cat-hero .icon-disc {
  width: var(--icon-circle-md);
  height: var(--icon-circle-md);
}
.cat-hero h1 {
  margin: 0;
}
.promise {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}
.facts-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.facts-strip > .claim-payload {
  margin-block: 0;
}
.facts-absent {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--size-body-sm);
  line-height: var(--leading-relaxed);
}
.do-first {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--layout-grid-gap);
  margin-bottom: var(--space-8);
}
.action-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--pad-tile);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: var(--transition-interactive);
}
.action-card:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-raised);
}
/* Orange means "you pay / you act": one action surface per page, never a second. */
.action-card[data-tone='accent'] {
  background: var(--surface-accent);
  border-color: var(--border-on-accent);
}
.action-title {
  font: var(--text-tile-title);
  color: var(--text-heading);
}
.action-card .preview {
  color: var(--text-muted);
}
.action-card[data-tone='accent'] .action-title,
.action-card[data-tone='accent'] .preview {
  color: var(--text-on-accent);
}
.question-group {
  margin-bottom: var(--space-8);
}
.question-group > h2 {
  margin: 0 0 var(--space-4);
}
.question-link .arrow-link {
  justify-content: space-between;
  gap: var(--space-3);
}
.preview {
  margin: 0 0 var(--space-3);
  font-size: var(--size-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}
@media (min-width: 900px) {
  .cat-hero-head {
    padding: var(--pad-card);
  }
  .facts-strip {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .facts-strip > .claim-payload {
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-hairline);
    border-radius: var(--radius-md);
    padding: var(--space-4);
  }
  .do-first {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
.facts-absent a {
  display: inline-flex;
  align-items: center;
  min-height: var(--icon-circle-sm);
}

/* T010 — the answer on the first screen, won by composition, never by shrinking
   type. Two levers only: (a) the vertical furniture above and between the two
   answer panels, which is chrome and costs the reader nothing; (b) the small
   type inside lifted fragments, which is raised to the oracle's floors, never
   lowered. Body stays >= 16px and every text-bearing node >= 12px. */

/* (b) The floors, applied to fragment descendants from the stylesheet only —
   the q.css:422 precedent. A payload's bytes are never touched. */
.claim-payload sup,
.book-source sup,
.claim-payload small,
.book-source small,
.claim-payload .colnote,
.claim-payload .colnote b,
.claim-payload .ph-block p,
.claim-payload .stamp small,
.claim-payload .stamp .d,
.book-source .stamp small,
.book-source .stamp .d {
  font-size: var(--size-caption);
}
.book-source .standfirst,
.difference {
  font-size: var(--size-body);
}

/* (a) The phone. Everything between the top of the page and the deciding fact
   is chrome; the appbar's "All benefits" link is the breadcrumb's first crumb
   repeated, so it stands down at this width rather than costing 56px above the
   answer. The question steps to --size-h4 (T002-anatomy §5 sanctions 22px as
   the floor for the heading; it is not body text). */
@media (max-width: 600px) {
  .preview-ribbon {
    padding-block: var(--space-1);
  }
  .appbar {
    min-height: 0;
    gap: var(--space-3);
    padding-block: var(--space-2);
  }
  .appbar nav {
    display: none;
  }
  .appbar img {
    height: 28px;
  }
  .portal-layout {
    padding-top: var(--space-2);
  }
  .breadcrumbs {
    margin-bottom: var(--space-2);
  }
  .question {
    padding: var(--space-3) var(--space-4) var(--space-4);
  }
  .question > h1 {
    font-size: var(--size-h4);
    margin-bottom: var(--space-2);
  }
  .do-this,
  .decides {
    margin-block: var(--space-3);
  }
  .decides {
    padding-top: var(--space-3);
  }
  /* Denser fragment chrome: gaps and padding close up, the relationships the
     shell checker measures (grid rows, stacked frows, painted bars) do not. */
  .claim-payload .dir-grid,
  .claim-payload .directory,
  .claim-payload .cost-ladder,
  .claim-payload .paygrid,
  .claim-payload .branch,
  .claim-payload .cols {
    gap: var(--space-3);
  }
  .claim-payload .facts {
    padding: var(--space-3);
  }
  .claim-payload .cc-drow {
    padding-block: var(--space-2);
  }
  .claim-payload .dir-row {
    gap: var(--space-2);
  }
}

/* T010, still lever (a): the fragment's own vertical furniture on the phone.
   Margins and gaps only — every grid, every stacked row and every painted bar
   the shell checker measures keeps its shape, and no text gets smaller. */
@media (max-width: 600px) {
  .claim-payload p {
    margin-block: var(--space-2);
  }
  .claim-payload h3 {
    margin-block: var(--space-2);
  }
  .claim-payload .facts {
    padding: var(--space-2);
  }
  .claim-payload .fh,
  .claim-payload .rh,
  .claim-payload .extras-h,
  .claim-payload .gbars-cap {
    margin-bottom: var(--space-2);
  }
  .claim-payload .frow {
    gap: var(--space-1);
  }
}

/* T010, the last of lever (a): the seam between the question, the Do This lead
   and the deciding fact. The lead's own first and last paragraph margins are
   the panel's outer margin repeated, so they collapse to nothing here. */
@media (max-width: 600px) {
  /* T008, sheet-18: the dental head row was 309 > 306. Service across, the three
     networks beneath — the same shape T013 gave the body rows on dental-vision.html. */
  .question .claim-payload .facts:has(.fgroup) .cc-drow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .question .claim-payload .facts:has(.fgroup) .cc-drow .cc-dk {
    grid-column: 1 / -1;
  }
  /* "Nonparticipating" at caption size painted 2px past its 100px column */
  .question .claim-payload .facts:has(.fgroup) .cc-drow.head .cc-dv {
    hyphens: auto;
    overflow-wrap: anywhere;
  }
  .do-this,
  .decides {
    margin-block: var(--space-2);
  }
  .decides {
    padding-top: var(--space-2);
  }
  .do-this .lead > p:first-of-type {
    margin-top: 0;
  }
  .do-this .lead > p:last-of-type {
    margin-bottom: 0;
  }
}

/* T010, lever (b) again: three fragments carry a printed 8pt inline size, which
   is 10.67px on screen and under the oracle's 12px floor. The book's bytes stay
   as they are; the stylesheet raises them, on the same `!important` footing
   q.css:566 already uses for a payload standfirst. */
.book-source .standfirst {
  font: var(--text-copy) !important;
}
.claim-payload .ph-block > p,
.claim-payload p.colnote {
  font-size: var(--size-caption) !important;
}

/* The ask box (T002-anatomy §7): the last block in <main>, before the HelpBar.
   Native form controls, styled to the existing .button grammar — the kit has no
   input component and one control does not earn one. The live region stays in the
   DOM at rest so a reader on a screen reader hears the answer arrive. */
.ask {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-5);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-help);
}
.ask h2 {
  margin: 0;
  font: var(--text-card-title);
}
.ask label {
  color: var(--text-muted);
  font-size: var(--size-body-sm);
}
.ask textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--space-2);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  resize: vertical;
}
.ask button {
  justify-self: start;
  min-height: 44px;
  padding: var(--button-pad-y) var(--button-pad-x);
  border: var(--border-width) solid var(--navy-700);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-700);
  font: var(--text-button);
  cursor: pointer;
  transition: var(--transition-interactive);
}
.ask button:hover {
  background: var(--navy-050);
}
/* §2.1 the page actions: the seven verbs under the ask box, in the brief's order. Quiet
   chrome — the submit button stays the one filled control, these are the shortcuts. They
   wrap at 390 (no horizontal scroll) and the script hides the verbs this page cannot
   honour, so the row is never a menu of dead ends. */
.ask-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.ask-actions button {
  min-height: 44px;
  border-color: var(--border-hairline);
  background: transparent;
  color: var(--text-link);
  font-size: var(--size-body-sm);
}
.ask-actions button[hidden] {
  display: none;
}
.ask-state {
  margin-block: var(--space-4);
}
.ask-state p {
  font-size: var(--size-body);
  line-height: var(--leading-body);
}
.ask-error {
  color: var(--text-heading);
}
.ask-source {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-link);
}

/* The "your number" selector (owner brief §4, T002-selector-and-ai §1). Native
   radios and a native <details> — the kit has no segmented control and one axis
   does not earn one. Every target is 44px. The weekly cost block holds clones of
   the grid's own cells, so their `.cc-dv` styling travels with them. */
.you-block {
  display: grid;
  gap: var(--space-3);
}
.your-cost {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-accent-soft);
}
.your-cost[hidden] {
  display: none;
}
.your-cost h2 {
  margin: 0;
  font-size: var(--size-body-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-heading);
  color: var(--text-muted);
}
.your-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  margin: 0;
}
.your-rows dd {
  margin: 0;
  font: var(--text-tile-title);
  font-size: var(--size-h3);
  color: var(--text-heading);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* The cloned cell keeps the grid cell's own box: flex, figure then provenance mark
   as separate items (q.css `.claim-payload .cc-dv`), so its rendered text is the
   cell's rendered text — the YOUR_NUMBER_TYPED oracle compares innerText. */
.your-rows .cc-dv {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-1);
}
.your-rows sup {
  font-size: var(--size-caption);
}
.you-basis {
  margin: 0;
  color: var(--text-muted);
}
.you-change > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font: var(--text-tile-title);
  color: var(--text-heading);
}
.you-change > summary::marker {
  color: var(--text-muted);
}
fieldset.you {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
  min-width: 0;
}
fieldset.you legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--size-body-sm);
  color: var(--text-muted);
}
fieldset.you label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  cursor: pointer;
}
fieldset.you label:has(:checked) {
  border-color: var(--surface-accent);
  background: var(--surface-accent-soft);
  font-weight: var(--font-weight-bold);
}
fieldset.you input {
  margin: 0;
  width: 20px;
  height: 20px;
  accent-color: var(--surface-accent);
}
/* The 44px tap target has to be contained, not just tall: an inline-flex child does not
   grow its paragraph's line box, so at 390 the link spilled out of this <p> and landed on
   the links below it. Making the paragraph the flex container gives the target its height
   and keeps it inside the flow. */
/* A closed disclosure must not lay out its contents. Measured on Medical at 390: the
   details reported closed and 44px tall, while its help link still took a 144x67 box 188px
   lower, landing on three question links beneath the plate. Naming the rule explicitly,
   because the contents here carry their own display and escape the default. */
.you-change:not([open]) > :not(summary) {
  display: none;
}
.you-help {
  margin: 0 0 var(--space-2);
  display: flex;
}
.you-help a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.you-reset {
  min-height: 44px;
  padding: var(--button-pad-y) var(--button-pad-x);
  border: var(--border-width) solid var(--navy-700);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-700);
  font: var(--text-button);
  cursor: pointer;
}
/* §1.5 — the highlight is keyed on the WRAPPER attribute and the frozen payload
   structure (fh, fsub, bar, head, T1, T2, T3 / fh, fsub, bar, fgroup, Self, Family).
   Colour and weight only: nothing is hidden, nothing moves, no payload byte changes. */
.claim-payload[data-you-tier='1'] .facts > div:nth-of-type(5),
.claim-payload[data-you-tier='2'] .facts > div:nth-of-type(6),
.claim-payload[data-you-tier='3'] .facts > div:nth-of-type(7),
.claim-payload[data-you-coverage='employee'] .facts > .frow:nth-of-type(5),
.claim-payload[data-you-coverage='children'] .facts > .frow:nth-of-type(6),
.claim-payload[data-you-coverage='family'] .facts > .frow:nth-of-type(6) {
  background: var(--surface-accent-soft);
}
.claim-payload[data-you-tier] .cc-drow:not(.head) .cc-dv {
  color: var(--text-muted);
  font-weight: var(--font-weight-regular);
}
.claim-payload[data-you-tier][data-you-coverage='employee']
  .cc-drow:not(.head)
  .cc-dv:nth-of-type(2),
.claim-payload[data-you-tier][data-you-coverage='children']
  .cc-drow:not(.head)
  .cc-dv:nth-of-type(3),
.claim-payload[data-you-tier][data-you-coverage='family']
  .cc-drow:not(.head)
  .cc-dv:nth-of-type(4) {
  color: var(--text-heading);
  font-weight: var(--font-weight-bold);
}

/* The category experience (board portal-experience, T005: Medical as the pattern).
   One editorial rhythm — nav, cream hero, anchored sections, the one navy band, help —
   in the landing's own language: rounded cream ground, navy that carries a surface,
   orange only where the reader pays or acts. Every rule is scoped to `.experience` so
   the five categories the experience has not reached render exactly as before, and
   every payload move is CSS on descendants: not one payload byte changes. */
.experience {
  gap: var(--space-8);
}
/* The section nav: a sticky chip row under the app bar at 390 (the seven sections
   and the decision reachable from the first screen), a sticky rail at 1280. */
.experience .section-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-2) var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  background: var(--surface-page);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.experience .section-nav::-webkit-scrollbar {
  display: none;
}
.experience .section-nav-title {
  display: none;
}
.experience .section-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-full);
  background: var(--surface-card);
  color: var(--text-heading);
  font-size: var(--size-body-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: var(--transition-interactive);
}
.experience .section-nav a:hover {
  background: var(--surface-brand-soft);
}
.experience.category-medical .section-nav a[aria-current] {
  background: var(--cat-medical);
  border-color: var(--cat-medical);
  color: var(--text-on-brand);
}
/* The hero: the landing's cream ground; the photograph (when David's pick is in
   source-assets/) as a band above the words at 390, beside them at 1280. */
.experience .cat-hero-head {
  display: grid;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: var(--surface-hero);
  border-radius: var(--radius-lg);
}
/* D10: the photograph. At 390 it closes the hero as a band under the intents — 16/9,
   because a 4/3 picture spends 100 more vertical pixels on the same subject. The crop
   is made outside the browser; object-fit only absorbs the slot's own ratio drift. */
.hero-photo {
  margin: 0;
  aspect-ratio: 16 / 9;
}
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.experience .hero-text {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5) var(--space-4) var(--space-6);
}
.experience .hero-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.experience .hero-title .icon-disc {
  width: var(--icon-circle-sm);
  height: var(--icon-circle-sm);
}
.experience .hero-title h1 {
  margin: 0;
  font: var(--text-tile-title);
  color: var(--text-heading);
}
/* The outcome is the page's biggest words — the §6 question, not a tagline. */
.experience .outcome {
  margin: 0;
  font: var(--text-card-title);
  letter-spacing: var(--tracking-heading);
  color: var(--text-heading);
}
/* Your number, composed as a statement rather than a card: an eyebrow, two plan
   rows with the cloned cell large, the basis line, and the way to change it. */
.experience .you-block {
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-strong);
}
.experience .your-cost {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.experience .your-cost h2 {
  font-size: var(--size-caption);
  color: var(--text-accent);
}
.experience .your-rows {
  gap: var(--space-1) var(--space-4);
}
.experience .your-rows dt {
  font-weight: var(--font-weight-semibold);
}
.experience .your-rows dd {
  font-size: var(--size-h2);
}
.experience .you-change > summary {
  font: var(--text-button);
  color: var(--text-link);
}
/* "What are you trying to do?" — four intents as one list; the orange one is the
   payment and D5's primary action, the other three are quiet rows. */
.experience .intents {
  display: grid;
  gap: var(--space-2);
}
.experience .intents-q {
  margin: 0 0 var(--space-1);
  font-size: var(--size-body-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-heading);
  color: var(--text-muted);
}
.experience .do-first {
  display: block;
  margin: 0;
}
.experience .intent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-heading);
  font: var(--text-button);
  text-decoration: none;
  box-shadow: none;
  transition: var(--transition-interactive);
}
.experience .intent::after {
  content: 'arrow_forward';
  font-family: 'Material Symbols Rounded';
  font-size: var(--size-body-lg);
  transition: var(--transition-interactive);
}
.experience .intent:hover {
  transform: none;
  box-shadow: none;
  background: var(--surface-brand-soft);
}
.experience .intent:hover::after {
  transform: var(--arrow-nudge);
}
.experience .intent[data-tone='accent'] {
  border-color: var(--action-accent);
  background: var(--action-accent);
  color: var(--text-on-accent);
}
.experience .intent[data-tone='accent']:hover {
  background: var(--action-accent-hover);
}
/* The sections: heading on a category-coloured hairline, the figures, then the
   questions that go deeper. Nothing is hidden to shorten the page. */
.experience .topics {
  display: grid;
  gap: var(--space-10);
}
/* An empty topics div (Disability: every section is a direct child) is not a row. */
.experience .topics:empty {
  display: none;
}
.experience .topic {
  margin: 0;
  scroll-margin-top: var(--space-16);
}
.experience .topic > h2 {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  font: var(--text-section);
  color: var(--text-heading);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.experience.category-medical .topic > h2 {
  border-color: var(--cat-medical);
}
.experience .topic > .claim-payload {
  margin-block: var(--space-4);
}
.experience .question-list {
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--border-hairline);
}
.experience .question-link .arrow-link {
  font-size: var(--size-body);
}
.experience .preview:empty {
  display: none;
}
/* Decision last: the one drenched navy band on the page carries the figure that
   decides between the plans, at display scale, then the act. */
.experience .band {
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-brand);
  color: var(--text-on-brand);
}
.experience .band > h2 {
  color: var(--text-on-brand);
  border-color: var(--navy-500);
}
.experience .band .facts-strip {
  grid-auto-flow: row;
}
.experience .band .facts-strip > .claim-payload {
  padding: 0;
  border: 0;
  background: transparent;
}
.experience .band .claim-payload .dl {
  font: var(--text-eyebrow);
  font-size: var(--size-body-sm);
  color: var(--navy-100);
}
.experience .band .claim-payload .dp {
  padding: 0;
  background: transparent;
}
.experience .band .claim-payload .dp small {
  font-size: var(--size-body);
  color: var(--navy-100);
}
.experience .band .claim-payload .dp b {
  font: var(--text-hero);
  font-size: var(--size-h1);
  color: var(--text-on-brand);
}
.experience .band .claim-payload .dn {
  font-size: var(--size-body);
  color: var(--navy-100);
}
.experience .band .act {
  margin-top: var(--space-4);
  color: var(--text-on-brand);
  font-size: var(--size-body);
}
.experience .band .act:hover {
  color: var(--navy-100);
}
/* Data to visual (§5), from the stylesheet alone. */
/* the care ladder: dotted $ leaders, the AISLE's own read */
.experience .claim-payload .menu-item .line {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
}
.experience .claim-payload .menu-item .dots {
  display: block;
  border-bottom: var(--border-width) dotted var(--border-strong);
}
.experience .claim-payload .menu-item .line .t {
  color: var(--text-heading);
}
/* the difference ledger: comparison rows, bold row heads, a brand rule under the head */
.experience .claim-payload .cmp {
  font-size: var(--size-body);
}
.experience .claim-payload .cmp thead {
  background: transparent;
}
.experience .claim-payload .cmp thead th {
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-strong) solid var(--border-brand);
  color: var(--text-heading);
}
.experience .claim-payload .cmp th[scope='row'] {
  color: var(--text-heading);
}
.experience .claim-payload .cmp td,
.experience .claim-payload .cmp th {
  padding: var(--space-3) var(--space-2);
  vertical-align: top;
}
/* what both plans share: a plain list, no side stripes */
.experience .claim-payload .cplan-item {
  padding: var(--space-2) 0;
  border-left: 0;
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.experience .topic > .claim-payload + .claim-payload {
  margin-top: var(--space-8);
}
.experience .claim-payload .cplan-group-h {
  font: var(--text-tile-title);
  color: var(--text-heading);
  margin: var(--space-5) 0 var(--space-3);
}
/* Benefit Facts: the printed eyebrow steps down, the panel's own title steps up,
   the rates read at body size with the figures a step larger */
.experience .claim-payload .facts {
  background: var(--surface-card);
}
.experience .claim-payload .fh {
  margin-bottom: var(--space-1);
  font: var(--text-eyebrow);
  font-size: var(--size-caption);
  color: var(--text-muted);
}
.experience .claim-payload .fsub {
  margin-block: 0 var(--space-3);
  font-size: var(--size-body);
}
.experience .claim-payload .fsub b {
  font: var(--text-tile-title);
  color: var(--text-heading);
}
.experience .claim-payload .cc-drow:not(.head) {
  font-size: var(--size-body);
}
.experience .claim-payload .cc-drow:not(.head) .cc-dv {
  font-size: var(--size-body-lg);
}
/* the out-of-pocket ceiling: the figure is the sentence */
.experience .claim-payload .governs {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-hairline);
}
.experience #costs .claim-payload .governs em {
  font-size: var(--size-h2);
  font-weight: var(--font-weight-heavy);
  color: var(--text-heading);
}
/* the dependent stamp: the window is the headline, its label the eyebrow */
.experience .claim-payload .sp-deadline {
  flex-wrap: wrap;
}
.experience .claim-payload .stamp {
  display: grid;
  gap: var(--space-1);
}
.experience .claim-payload .stamp small {
  color: var(--text-muted);
}
.experience .claim-payload .stamp .d {
  font-size: var(--size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--text-heading);
}
/* prescriptions: the plan names as titles; "You" reads in the reader's orange */
.experience .claim-payload .cplan-plan-h {
  margin: 0 0 var(--space-3);
  font: var(--text-tile-title);
  color: var(--text-heading);
}
.experience .claim-payload .cplan-seg-you {
  color: var(--text-accent);
  font-weight: var(--font-weight-bold);
}
/* 1280: a second composition (C1.2) — the rail, the two rate grids side by side under
   your number, both prescription plans and both contribution panels read across, the
   hero's words beside the photograph, the decisive figure at display scale. */
@media (min-width: 900px) {
  .experience {
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: var(--space-10);
    align-items: start;
  }
  /* No nav (Disability: two sections, nothing to build one from) — no nav track. The
     content below pins to the LAST explicit column, so it sits beside the rail when
     there is one and fills the row when there is not; a 220px track of nothing is not
     a composition. */
  .experience:not(:has(> .section-nav)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .experience .section-nav {
    grid-column: 1;
    grid-row: 1 / span 3;
    top: var(--space-6);
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
  }
  .experience .section-nav-title {
    display: block;
    padding: var(--space-2) var(--space-4) var(--space-3);
    font: var(--text-tile-title);
    color: var(--text-heading);
  }
  .experience .section-nav a {
    border-color: transparent;
    background: transparent;
    white-space: normal;
  }
  .experience .cat-hero-head,
  .experience .topics,
  .experience .band {
    grid-column: -2 / -1;
  }
  .experience .cat-hero-head.has-photo {
    grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
  }
  .experience .cat-hero-head.has-photo .hero-photo {
    order: 2;
    aspect-ratio: auto;
    min-height: 100%;
  }
  /* The index hero takes the same two-column split as a category hero, but its text is
     two lines: a photograph stretched to a full column would open 300px of empty cream
     beside them. The band is the picture's own height and the title sits in the middle
     of it. */
  .benefits-directory .cat-hero-head.has-photo {
    grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
    align-items: center;
  }
  .benefits-directory .cat-hero-head.has-photo .hero-photo {
    order: 2;
    aspect-ratio: 2 / 1;
  }
  .benefits-directory .cat-hero-head.has-photo > div {
    padding: var(--pad-card);
  }
  .experience .hero-text {
    gap: var(--space-5);
    padding: var(--pad-card-lg);
  }
  .experience .hero-title h1 {
    font: var(--text-card-title);
  }
  .experience .outcome {
    font: var(--text-hero);
    font-size: var(--size-h1);
    letter-spacing: var(--tracking-display);
  }
  .experience .your-rows {
    max-width: 560px;
  }
  .experience .your-rows dd {
    font-size: var(--size-h1);
  }
  .experience .intents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .experience .intents-q {
    grid-column: 1 / -1;
  }
  .experience .topic {
    scroll-margin-top: var(--space-6);
  }
  .experience #costs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
    align-items: start;
  }
  .experience #costs > h2,
  .experience #costs > .question-list {
    grid-column: 1 / -1;
  }
  .experience .claim-payload .cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .experience .band {
    padding: var(--space-10);
  }
  .experience ~ .ask,
  .experience ~ .ask-state {
    margin-left: calc(220px + var(--space-10));
  }
  .experience:not(:has(> .section-nav)) ~ .ask,
  .experience:not(:has(> .section-nav)) ~ .ask-state {
    margin-left: 0;
  }
  .experience .band .claim-payload .dp b {
    font-size: var(--size-display);
  }
  .experience .band .claim-payload .dg {
    max-width: 720px;
  }
}
/* T007 — the Medical refinement (T006 Blocking 1–7). Still CSS on payload descendants
   and composition around payloads; not one payload byte moves. */
@media (max-width: 899px) {
  /* 5: the outcome is the biggest words on the page; section heads step down. */
  .experience .outcome {
    font: var(--text-hero);
    font-size: var(--size-h2);
    letter-spacing: var(--tracking-heading);
  }
  .experience .topic > h2 {
    font-size: var(--size-h3);
  }
  /* 3: both deductible figures on one baseline inside the band — no orphaned dagger. */
  .experience .band .claim-payload .dp b {
    font-size: var(--size-h2);
    white-space: nowrap;
  }
  /* chip row: tighter chips so the fourth peeks ≥ 40px, and the fade says there is
     more to the right. */
  .experience .section-nav {
    gap: var(--space-1);
    -webkit-mask-image: linear-gradient(
      to right,
      var(--surface-page) calc(100% - 40px),
      transparent
    );
    mask-image: linear-gradient(to right, var(--surface-page) calc(100% - 40px), transparent);
  }
  .experience .section-nav a {
    padding: 0 var(--space-3);
  }
}
@media (max-width: 600px) {
  /* 1: the difference ledger does not shrink — each row is one block: the row head
     across, then the two plans side by side, each under its own name from CSS,
     never from the bytes. Columns return above 600. */
  .experience .claim-payload .cmp,
  .experience .claim-payload .cmp tbody,
  .experience .claim-payload .cmp th,
  .experience .claim-payload .cmp td {
    display: block;
  }
  .experience .claim-payload .cmp thead {
    display: none;
  }
  .experience .claim-payload .cmp {
    font-size: var(--size-body-sm);
    line-height: var(--leading-snug);
  }
  .experience .claim-payload .cmp tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: var(--border-width) solid var(--border-hairline);
  }
  .experience .claim-payload .cmp th[scope='row'] {
    grid-column: 1 / -1;
    padding: 0;
    font-size: var(--size-body);
    text-align: left;
  }
  .experience .claim-payload .cmp td {
    padding: 0;
  }
  .experience .claim-payload .cmp td::before {
    display: block;
    font-size: var(--size-caption);
    font-weight: var(--font-weight-semibold);
    color: var(--text-heading);
  }
  .experience .claim-payload .cmp td:nth-child(2)::before {
    content: 'Healthy Savings Plan';
  }
  .experience .claim-payload .cmp td:nth-child(3)::before {
    content: 'Traditional Plan';
  }
  /* 2: the prescription bars keep their proportion at 390 — one row, the key inline
     with the figure, the "not printed" blank a dashed hairline rather than a card. */
  .experience .claim-payload .cplan-bar {
    flex-direction: row;
    gap: var(--space-1);
    align-items: stretch;
  }
  .experience .claim-payload .cplan-seg {
    padding: var(--space-2) var(--space-1);
    font-size: var(--size-caption);
    line-height: var(--leading-snug);
    white-space: nowrap;
    text-align: center;
  }
  .experience .claim-payload .cplan-seg-k {
    display: inline;
    margin-right: var(--space-1);
  }
  .experience .claim-payload .cplan-seg-blank {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 0 var(--space-1);
    border: 0;
    border-bottom: var(--border-width) dashed var(--border-strong);
    background: transparent;
    color: var(--text-muted);
  }
}
@media (min-width: 900px) {
  /* 7: the two rate cards on one register at 1280. */
  .experience #costs > .claim-payload {
    margin-top: 0;
  }
}

/* T013 — the template items T012 carried (A–C) and the five-category extension. Still
   CSS on payload descendants and composition around payloads; not one payload byte moves. */
/* C: T002-ia R2 — sections alternate the page ground and the card ground; one navy band. */
.experience .topics > .topic:nth-child(even) {
  padding: var(--space-6) var(--space-4);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
}
.experience .topics > .topic:nth-child(even) .claim-payload .facts,
.experience .topics > .topic:nth-child(even) .claim-payload .governs {
  background: var(--surface-page);
}
.experience [hidden] {
  display: none !important;
}
/* category identity: the chip and the hairline under each section head, nowhere else */
.experience.category-dental .section-nav a[aria-current] {
  background: var(--cat-dental);
  border-color: var(--cat-dental);
  color: var(--text-on-brand);
}
.experience.category-disability .section-nav a[aria-current] {
  background: var(--cat-disability);
  border-color: var(--cat-disability);
  color: var(--text-on-brand);
}
.experience.category-voluntary .section-nav a[aria-current] {
  background: var(--cat-voluntary);
  border-color: var(--cat-voluntary);
  color: var(--text-on-brand);
}
.experience.category-life .section-nav a[aria-current] {
  background: var(--cat-life);
  border-color: var(--cat-life);
  color: var(--text-on-brand);
}
.experience.category-resources .section-nav a[aria-current] {
  background: var(--cat-resources);
  border-color: var(--cat-resources);
  color: var(--text-on-brand);
}
.experience.category-dental .topic > h2 {
  border-color: var(--cat-dental);
}
.experience.category-disability .topic > h2 {
  border-color: var(--cat-disability);
}
.experience.category-voluntary .topic > h2 {
  border-color: var(--cat-voluntary);
}
.experience.category-life .topic > h2 {
  border-color: var(--cat-life);
}
.experience.category-resources .topic > h2 {
  border-color: var(--cat-resources);
}
/* the hero's stated absence: quiet, before the intents, no digit */
.experience .hero-text .facts-absent {
  margin: 0;
  color: var(--text-muted);
}
/* the band, generalised: every payload shape that lands on navy reads in the band's ink */
.experience .band .claim-payload,
.experience .band .claim-payload .facts,
.experience .band .claim-payload .clock-rec,
.experience .band .claim-payload .governs,
.experience .band .claim-payload .extras-card {
  background: transparent;
  color: var(--text-on-brand);
}
.experience .band .claim-payload .facts {
  padding: 0;
  border: 0;
}
.experience .band .claim-payload .fh,
.experience .band .claim-payload .fsub,
.experience .band .claim-payload .fnote,
.experience .band .claim-payload .dir-sub,
.experience .band .claim-payload .sv-base,
.experience .band .claim-payload .grow-bar-sub,
.experience .band .claim-payload small {
  color: var(--navy-100);
}
.experience .band .claim-payload .dir-k,
.experience .band .claim-payload .clock-cap,
.experience .band .claim-payload .fsub b,
.experience .band .claim-payload .fgroup,
.experience .band .claim-payload .extras-h,
.experience .band .claim-payload .grow-bar-label,
.experience .band .claim-payload .grow-bar-amt,
.experience .band .claim-payload .frow > .v,
.experience .band .claim-payload h3,
.experience .band .claim-payload .clock-fig {
  color: var(--text-on-brand);
}
.experience .band .claim-payload .bar,
.experience .band .claim-payload .cc-drow,
.experience .band .claim-payload .frow,
.experience .band .claim-payload .dir-row,
.experience .band .claim-payload .extras-card,
.experience .band .claim-payload .clock-rec {
  border-color: var(--navy-500);
}
.experience .band .claim-payload .clock-rec {
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--navy-500);
  border-radius: 0;
}
.experience .band .claim-payload .clock-fig {
  font-size: var(--size-h3);
}
.experience .band .claim-payload .grow-bar-track {
  background: var(--navy-700);
}
.experience .band .claim-payload .grow-bar-fill {
  background: var(--action-accent);
}
.experience .band a {
  color: inherit;
}
.experience .band .question-list {
  border-color: var(--navy-500);
}
.experience .band .question-link .arrow-link {
  color: var(--text-on-brand);
}
.experience .band .preview {
  color: var(--navy-100);
}
/* Disability: the phone and the hours ARE the hero's figure block; the one act is the call */
.experience.category-disability .band .claim-payload .dir-v {
  font: var(--text-hero);
  font-size: var(--size-h2);
}
.experience .band .button.call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: var(--space-4);
  border-color: var(--action-accent);
  background: var(--action-accent);
  color: var(--text-on-accent);
}
.experience .band .button.call:hover {
  background: var(--action-accent-hover);
}
/* secondary detail behind a summary (R3): the caveat, the footnotes */
.experience .topic-more > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font: var(--text-button);
  color: var(--text-link);
  cursor: pointer;
}
/* Adoption: the reimbursement is the big number, orange because the reader receives it */
.experience #adoption .claim-payload .frow > .v.you.big {
  font-size: var(--size-h2);
  color: var(--text-accent);
}
.experience #elect .claim-payload .frow > .v.you.big {
  font-size: var(--size-h4);
}
/* Life: the if/then arms read as eyebrow + answer */
.experience .claim-payload .branch-if {
  font: var(--text-eyebrow);
  font-size: var(--size-caption);
  color: var(--text-muted);
}
/* Resources: the search is the hero's control (Fitts: full width, 48px) */
.situation-search-l {
  display: grid;
  gap: var(--space-1);
  font: var(--text-eyebrow);
  font-size: var(--size-body-sm);
  color: var(--text-heading);
}
.situation-search {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font: var(--text-copy);
  font-size: var(--size-body);
  color: var(--text-heading);
}
.experience .band .situations {
  margin-bottom: var(--space-6);
}
.experience .band .situation-group {
  margin-block: var(--space-4);
}
.experience .band .situation-group > .book-source h3 {
  color: var(--navy-100);
}
.experience .band .situation-link {
  color: var(--text-on-brand);
  border-color: var(--navy-500);
}
.experience .band .situation-empty {
  margin: 0;
  color: var(--navy-100);
}
.experience .band .situation-empty a {
  text-decoration: underline;
}
@media (max-width: 600px) {
  /* B: label left, value right on one line where both fit; the big figure keeps its own line */
  .experience .claim-payload .frow {
    grid-template-columns: fit-content(45%) minmax(0, 1fr);
    gap: var(--space-3);
  }
  .experience .claim-payload .frow > .v {
    text-align: right;
  }
  .experience .claim-payload .frow {
    padding-block: var(--space-2);
  }
  .experience .claim-payload .fgroup {
    padding-top: var(--space-3);
  }
  .experience .claim-payload .move {
    padding-block: var(--space-3);
  }
  .experience #adoption .claim-payload .frow:has(> .v.big),
  .experience #elect .claim-payload .frow:has(> .v.big) {
    grid-template-columns: minmax(0, 1fr);
  }
  .experience #adoption .claim-payload .frow:has(> .v.big) > .v,
  .experience #elect .claim-payload .frow:has(> .v.big) > .v {
    text-align: left;
  }
  /* Dental at 390: the head row stays a grid; each body row is the service across, then the
     three networks beneath — no horizontal scroll, nothing hidden. */
  .experience .claim-payload .facts:has(.fgroup) .cc-drow:not(.head) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .experience .claim-payload .facts:has(.fgroup) .cc-drow:not(.head) .cc-dk {
    grid-column: 1 / -1;
  }
}
@media (min-width: 900px) {
  .experience .topics > .topic:nth-child(even) {
    padding: var(--space-8);
  }
  .experience .topic.band,
  .experience .topic {
    grid-column: -2 / -1;
  }
  .experience .band .button.call {
    width: auto;
    padding-inline: var(--space-8);
  }
  /* Dental / Vision: the six clocks read as a 3×2 schedule */
  .experience .band .claim-payload .clocks-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
  /* Voluntary: the menu board is read as a whole — 2 + 3 */
  .experience #buy .claim-payload .extras-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .experience #buy .claim-payload .extras-card {
    grid-column: span 3;
  }
  .experience #buy .claim-payload .extras-card:nth-child(n + 3) {
    grid-column: span 2;
  }
  /* Resources: the twenty directory rows read two across, the HR Solution Center first */
  .experience #situations .claim-payload .dir {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
  }
}

/* T008: the search sits with the list it drives; the empty state is a plain line. */
.question .situation-search-l {
  margin-block: var(--space-3) var(--space-4);
}
.question .situation-empty {
  color: var(--text-muted);
}

/* T008 / D11 — the row axis. The reader's own row is marked on the WRAPPER (§1.5: never
   a payload byte, never an attribute inside the payload) and coloured here, over the
   three row idioms the four sheets use: the care ladder's items, an eligibility branch's
   arms, the comparison ledger's rows. Colour only — nothing is hidden and nothing moves,
   and `Not sure / Show all` puts the page back exactly as it shipped. */
.claim-payload[data-you-row='1'] :is(.menu-item, .branch-arm, tbody tr):nth-of-type(1),
.claim-payload[data-you-row='2'] :is(.menu-item, .branch-arm, tbody tr):nth-of-type(2),
.claim-payload[data-you-row='3'] :is(.menu-item, .branch-arm, tbody tr):nth-of-type(3),
.claim-payload[data-you-row='4'] :is(.menu-item, .branch-arm, tbody tr):nth-of-type(4),
.claim-payload[data-you-row='5'] :is(.menu-item, .branch-arm, tbody tr):nth-of-type(5) {
  background: var(--surface-accent-soft);
}
/* T008 / D11 — sheets 10 and 16 have no axis to select on: their book lead pointed at
   one element ("Read the worked total first", "Read the receipt first"), so inside the
   deciding panel that element carries the weight the sentence used to ask for. */
.question > .decides .claim-payload .rtotal {
  background: var(--surface-accent-soft);
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
}
.question > .decides .claim-payload .rtotal .n {
  font-size: var(--size-h3);
}

/* ======================================================================================
   The rich category page (board portal-rich, T006): Ian's benefits-detail kit from the
   zip (ui_kits/benefits-detail) as static CSS. Every rule is scoped to `.rich`,
   `.rich-layout` or `.tab-bar`, which only a page in questions.mjs RICH carries, so the
   five categories T008 has not reached render exactly as before. Sizes, radii, shadows and
   colours are the vendored tokens; the kit's 11px eyebrows and its .16em tracking have no
   token and step to --size-caption / --tracking-body. No text-transform inside a payload:
   innerText carries it, and the surface gate reads innerText (FULL_ANSWER_REQUIRED). Payload bytes never change: every
   payload rule below styles descendants, and the three inline styles the book carries
   (dependent-deadline, hsa-ineligible, menu-board) are answered with !important.
   ====================================================================================== */
.rich-layout {
  max-width: none;
  padding: 0;
}
.rich-layout > .helpbar {
  display: none;
}
/* Tabs: sticky under the AppBar, white, four targets, the active one on a 3px accent rule. */
.tab-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface-card);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.tab-inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.detail-tabs {
  display: flex;
  gap: var(--space-7);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.detail-tabs::-webkit-scrollbar {
  display: none;
}
.detail-tabs a {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) 0 var(--space-3);
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  font-size: var(--size-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-interactive);
}
.detail-tabs a:hover {
  color: var(--text-heading);
}
.detail-tabs a[aria-current],
.detail-tabs:not(:has(a[aria-current])) a:first-child {
  color: var(--text-heading);
  border-bottom-color: var(--action-accent);
}
.tab-bar .enroll {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: center;
  min-height: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  /* T011/D4 (owner, Q7 700): white on orange-500 was 3.44:1; on orange-700 it is AA */
  background: var(--action-accent-press);
  color: var(--text-on-accent);
  font-size: var(--size-body-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-interactive);
}
.tab-bar .enroll:hover {
  /* T011/D4: white on orange-600 (the hover token) is 4.32:1, and no darker orange exists,
     so hover keeps the AA ground and underlines instead */
  background: var(--action-accent-press);
  color: var(--text-on-accent);
  text-decoration: underline;
}
.tab-bar .enroll .icon {
  font-size: var(--size-body-lg);
}
/* The page: one centred column, the top group, then the four sections. */
.rich {
  counter-reset: rich-section;
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-5) var(--layout-gutter) var(--space-16);
  display: grid;
  gap: var(--space-12);
}
.rich > .top {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}
.rich .eyebrow {
  font-size: var(--size-caption);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* CategoryRail */
.rich .rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  /* T011/m3: a focused chip scrolls clear of the rail's edge at 390 */
  scroll-padding-inline: var(--space-4);
}
.rich .rail a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-full);
  background: var(--surface-card);
  color: var(--text-muted);
  font-size: var(--size-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-interactive);
}
.rich .rail a .icon {
  font-size: var(--size-body-lg);
  line-height: 1;
  color: var(--text-muted);
}
.rich .rail a:hover {
  border-color: var(--border-strong);
  color: var(--text-heading);
}
.rich .rail a[aria-current] {
  border-color: var(--navy-700);
  background: var(--navy-700);
  color: var(--white);
}
.rich .rail a[aria-current] .icon {
  color: var(--white);
}
/* DetailHero: the category ink, the photograph dissolving in from the right (the kit's
   own mask), type kept off the photograph. The phone puts the photograph under the text. */
.rich .hero-wrap {
  display: grid;
  min-width: 0;
}
.rich .detail-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: var(--white);
}
/* T008: the kit's DetailHero is navy for every benefit (white type on amber or green would
   fail contrast); each category's own ink rides the crumb disc and the rail chip */
.rich .detail-hero {
  background: var(--navy-700);
}
.rich .detail-photo {
  order: 2;
  height: 96px;
  margin-top: calc(-1 * var(--space-4));
}
.rich .detail-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--white) 45%);
  mask-image: linear-gradient(to bottom, transparent 0%, var(--white) 45%);
}
.rich .hero-text {
  position: relative;
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3) var(--space-5) var(--space-5);
}
.rich .crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-2);
  font-size: var(--size-body-sm);
}
.rich .crumb a {
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.rich .crumb > .sep {
  opacity: 0.5;
}
.rich .crumb-here {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
}
.rich .crumb .icon-disc {
  width: var(--space-6);
  height: var(--space-6);
  background: var(--white);
}
.rich.category-medical .crumb .icon-disc {
  color: var(--cat-medical);
}
.rich.category-dental .crumb .icon-disc {
  color: var(--cat-dental);
}
.rich.category-disability .crumb .icon-disc {
  color: var(--cat-disability);
}
.rich.category-voluntary .crumb .icon-disc {
  color: var(--amber-text);
}
.rich.category-life .crumb .icon-disc {
  color: var(--cat-life);
}
.rich.category-resources .crumb .icon-disc {
  color: var(--cat-resources);
}
.rich .crumb .icon-disc .icon {
  font-size: var(--size-body);
}
/* T011/D3: on the white crumb disc the orange categories' glyph was orange-500, 3.44:1;
   the D23 alias --orange-text (orange-700) is 5.40:1 */
.rich.category-dental .crumb .icon-disc,
.rich.category-resources .crumb .icon-disc {
  color: var(--orange-text);
}
.rich .crumb .meta {
  margin-left: var(--space-2);
  font-size: var(--size-caption);
  color: var(--white);
}
.rich .detail-hero h1 {
  margin: 0;
  font-size: var(--size-h1);
  font-weight: var(--font-weight-heavy);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--white);
  text-wrap: balance;
}
.rich .detail-hero .outcome {
  margin: 0;
  max-width: 52ch;
  font-size: var(--size-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--white);
}
/* The headline row: the one or two figures that decide the benefit, lifted whole. */
.rich .headline {
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--navy-500);
}
.rich .headline .claim-payload {
  margin: 0;
}
.rich .headline .diverge {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-10);
}
.rich .headline .dl {
  flex-basis: 100%;
  font-size: var(--size-caption);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  color: var(--white);
}
.rich .headline .dg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
}
.rich .headline .dp {
  display: grid;
  gap: var(--space-1);
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.rich .headline .dp small {
  font-size: var(--size-caption);
  color: var(--white);
}
.rich .headline .dp b {
  font-size: var(--size-h2);
  font-weight: var(--font-weight-heavy);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.rich .headline .dn {
  max-width: 20ch;
  font-size: var(--size-caption);
  color: var(--white);
}
/* T011/D5: a payload's row label keeps its navy ink on white cards; on the navy hero it
   takes the hero's ink, as the experience band does (.experience .band … .dir-k) */
.rich .detail-hero .claim-payload .dir-k {
  color: var(--text-on-brand);
}
/* StatusBar (D20): the white plate over the hero's bottom edge, carrying your number and
   the intents. The result is the plate's figure, on the category ink. */
.rich .status-plate {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin: calc(-1 * var(--space-6)) var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
}
.rich .status-plate .you-block {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}
.rich .status-plate .you-block > .your-cost,
.rich .status-plate .you-change[open],
.rich .status-plate .you-block:has(.your-cost:not([hidden])) .you-change {
  grid-column: 1 / -1;
}
.rich .status-plate .you-block:has(.your-cost:not([hidden])) .plate-k {
  display: none;
}
.rich .plate-k {
  margin: 0;
}
.rich .status-plate .you-change > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--navy-700);
  border-radius: var(--radius-sm);
  color: var(--navy-700);
  font-size: var(--size-body-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  list-style: none;
  transition: var(--transition-interactive);
}
.rich .status-plate .you-change > summary::-webkit-details-marker {
  display: none;
}
.rich .status-plate .you-change > summary:hover {
  background: var(--navy-050);
}
.rich .status-plate .you-change[open] > summary {
  margin-bottom: var(--space-3);
}
.rich fieldset.you legend {
  font-size: var(--size-caption);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--text-muted);
}
.rich fieldset.you label:has(:checked) {
  border-color: var(--navy-700);
  background: var(--navy-050);
}
.rich fieldset.you input {
  accent-color: var(--navy-700);
}
.rich .you-reset {
  font-size: var(--size-body-sm);
}
.rich .your-cost {
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--white);
}
.rich.category-medical .your-cost {
  background: var(--cat-medical);
}
.rich .your-cost h2 {
  font-size: var(--size-caption);
  color: var(--white);
}
.rich .your-rows dt {
  font-size: var(--size-body-sm);
  font-weight: var(--font-weight-semibold);
}
.rich .your-rows dd {
  font-size: var(--size-h4);
  font-weight: var(--font-weight-heavy);
  color: var(--white);
}
.rich .you-basis {
  font-size: var(--size-caption);
  color: var(--text-muted);
}
.rich .your-cost .you-basis {
  color: var(--white);
}
.rich .you-help a {
  font-size: var(--size-body-sm);
}
/* T014/R-a: the intents wrap, never scroll — a hidden scroller clipped enrolment at 390 */
.rich .status-plate .intents {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
.rich .status-plate .intents-q {
  flex-basis: 100%;
}
.rich .intents-q,
.rich .plate-k {
  margin: 0 0 var(--space-1);
  font-size: var(--size-caption);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--text-muted);
}
.rich .status-plate .intent {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-full);
  white-space: nowrap;
  color: var(--text-link);
  font-size: var(--size-body-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.rich .status-plate .intent::after,
.rich .do-this .action-card::after {
  content: 'arrow_forward';
  font-family: 'Material Symbols Rounded';
  font-size: var(--size-body-lg);
  font-weight: var(--font-weight-regular);
  transition: var(--transition-interactive);
}
.rich .status-plate .intent:hover::after,
.rich .do-this .action-card:hover::after {
  transform: var(--arrow-nudge);
}
/* T008: the other five categories' payload classes on the kit's in-card scale, and their
   figure rules on ink rather than the accent (the accent stays on the tab and Enroll) */
.rich .card-body .clock-fig,
.rich .card-body .tl-ruler b {
  font-size: var(--size-h5);
}
.rich .card-body .clock-p,
.rich .card-body .dir-k,
.rich .card-body .stamp small,
.rich .card-body .stamp .d {
  font-size: var(--size-body-sm);
}
.rich .card-body .tl-ruler b,
.rich .headline .tl-ruler b {
  border-bottom-color: var(--text-heading);
}
.rich .card-body .grow-bar-fill.sv-children {
  background: var(--navy-700);
}
/* DoThis */
.rich .do-this {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
}
.rich .do-this .k {
  font-size: var(--size-caption);
  font-weight: var(--font-weight-heavy);
  text-transform: uppercase;
  white-space: nowrap;
}
.rich .do-this .k {
  color: var(--cat-medical);
}
.rich .do-first {
  display: block;
  margin: 0;
}
.rich .do-this .action-card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-heading);
  font-size: var(--size-body-lg);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.rich .do-this .action-card:hover {
  transform: none;
  box-shadow: none;
  color: var(--text-link-hover);
}
/* Section: the identical opener, then cards in the kit's auto-fit grid. The cards are the
   section's own children, so the header and a Note span the row. */
.rich > .topic {
  counter-increment: rich-section;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--layout-grid-gap);
  align-items: start;
  min-width: 0;
  margin: 0;
  scroll-margin-top: var(--space-16);
}
.rich > .topic > header {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}
.rich > .topic > header .eyebrow::before {
  content: counter(rich-section, decimal-leading-zero) ' · ';
}
.rich > .topic > header h2 {
  margin: 0;
  font-size: var(--size-h3);
  font-weight: var(--font-weight-heavy);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--text-heading);
}
/* R11 (T013): the section's question cards in their own row, above its tables. */
.rich > .topic > .q-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--layout-grid-gap);
  align-items: start;
  min-width: 0;
}
.rich > .topic > .q-row:empty {
  display: none;
}
/* Card and its Head */
.rich .card {
  display: grid;
  align-content: start;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.rich .card > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 3px solid var(--text-heading);
}
.rich .card > header > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.rich .card > header h3 {
  margin: 0;
  font-size: var(--size-h5);
  font-weight: var(--font-weight-heavy);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--text-heading);
}
.rich .card > header .sub {
  margin: 0;
  font-size: var(--size-caption);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}
.rich .book-link {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-1);
  color: var(--text-link);
  font-size: var(--size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  text-decoration: none;
  white-space: nowrap;
}
.rich .book-link .icon {
  font-size: var(--size-body);
  transition: var(--transition-interactive);
}
.rich .book-link:hover {
  color: var(--text-link-hover);
}
.rich .book-link:hover .icon {
  transform: var(--hover-lift);
}
/* DataCard body: the lifted payload read as the kit's rows, label left, figure right. */
.rich .card-body {
  min-width: 0;
  font-size: var(--size-body-sm);
  line-height: var(--leading-body);
  color: var(--text-body);
}
.rich .card-body.facts-strip {
  display: block;
}
.rich .card-body > .claim-payload,
.rich .card-body.facts-strip > .claim-payload {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.rich .card-body > .claim-payload + .claim-payload {
  border-top: var(--border-width) solid var(--border-hairline);
}
.rich .card-body .claim-payload > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.rich .card-body p {
  margin: 0;
}
/* Benefit Facts panels (rates, accounts) */
.rich .card-body .facts {
  padding: 0;
  border: 0;
  border-radius: 0;
}
.rich .card-body .fh,
.rich .card-body .rh {
  margin: 0;
  padding: var(--space-4) var(--space-6) 0;
  font-size: var(--size-caption);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}
.rich .card-body .fsub,
.rich .card-body .rsub {
  padding: var(--space-1) var(--space-6) var(--space-3);
  font-size: var(--size-body-sm);
  color: var(--text-muted);
}
.rich .card-body .fsub b {
  color: var(--text-heading);
}
.rich .card-body .bar,
.rich .card-body .rrule,
.rich .card-body .barcode,
.rich .card-body .menu-item .dots {
  display: none;
}
.rich .card-body .cc-drow {
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 0.62fr));
  gap: 0;
  padding: 0;
  border-top: var(--border-width) solid var(--border-hairline);
  font-size: var(--size-body-sm);
}
.rich .card-body .cc-drow > * {
  padding: var(--space-3) var(--space-4);
}
.rich .card-body .cc-drow > .cc-dk {
  padding-left: var(--space-6);
  font-weight: var(--font-weight-semibold);
  color: var(--text-body);
}
.rich .card-body .cc-drow > :last-child {
  padding-right: var(--space-6);
}
.rich .card-body .cc-dv {
  text-align: right;
  font-weight: var(--font-weight-bold);
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
.rich .card-body .cc-drow.head > * {
  font-size: var(--size-caption);
  font-weight: var(--font-weight-bold);
  color: var(--text-muted);
}
.rich .card-body .fgroup,
.rich .card-body .money-adv-label,
.rich .card-body .cplan-plan-h,
.rich .card-body .cplan-group-h {
  margin: 0;
  padding: var(--space-5) var(--space-6) var(--space-2);
  border-top: var(--border-width) solid var(--border-hairline);
  font-size: var(--size-caption);
  font-weight: var(--font-weight-heavy);
  line-height: var(--leading-snug);
  color: var(--text-heading);
}
.rich .card-body .frow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-3) var(--space-6);
  border-top: var(--border-width) solid var(--border-hairline);
}
.rich .card-body .frow > :first-child {
  color: var(--text-muted);
}
.rich .card-body .frow .v {
  text-align: right;
  font-weight: var(--font-weight-bold);
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
.rich .card-body .fnote {
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-top: var(--border-width) solid var(--border-hairline);
  color: var(--text-muted);
}
.rich .card-body .cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.rich .card-body .cols > .facts + .facts {
  border-top: var(--border-width-strong) solid var(--border-hairline);
}
/* The cost ladder (visit-receipt) and its ceiling */
.rich .card-body .receipt {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.rich .card-body .rrow,
.rich .card-body .rtotal {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-3) var(--space-6);
  border-top: var(--border-width) solid var(--border-hairline);
  border-bottom: 0;
}
.rich .card-body .rrow > :first-child {
  color: var(--text-muted);
}
.rich .card-body .rrow .n {
  color: var(--text-heading);
}
.rich .card-body .rtotal {
  padding-block: var(--space-4);
  background: var(--gray-050);
}
.rich .card-body .rtotal > :first-child {
  font-size: var(--size-caption);
  color: var(--text-muted);
}
.rich .card-body .rtotal .n {
  font-size: var(--size-h5);
  font-weight: var(--font-weight-heavy);
  color: var(--text-heading);
}
.rich .card-body .bnum {
  padding: var(--space-3) var(--space-6);
  border-top: var(--border-width) solid var(--border-hairline);
  font-size: var(--size-caption);
  font-weight: var(--font-weight-bold);
  color: var(--text-muted);
}
.rich .card-body .governs {
  padding: var(--space-4) var(--space-6) var(--space-5);
  color: var(--text-muted);
}
.rich .card-body .governs em {
  font-style: normal;
  font-weight: var(--font-weight-heavy);
  color: var(--text-heading);
}
/* Prescription shares: the book's own segments, painted as the kit's navy bars. */
.rich .card-body .cols > div:not(.facts) + div:not(.facts) .cplan-plan-h {
  border-top-width: var(--border-width-strong);
}
.rich .card-body .cplan-plan-h:first-child {
  border-top: 0;
}
.rich .card-body .cplan-tier {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-top: var(--border-width) solid var(--border-hairline);
}
.rich .card-body .cplan-tier-t {
  color: var(--text-muted);
}
.rich .card-body .cplan-bar {
  display: flex;
  flex-direction: row;
  gap: var(--space-1);
}
.rich .card-body .cplan-seg {
  display: block;
  padding: 0 0 var(--space-3);
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--navy-100), var(--navy-100)) left bottom / 100% 6px no-repeat;
  color: var(--text-heading);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: max-content;
}
.rich .card-body .cplan-bar > .cplan-seg {
  display: flex;
  align-items: baseline;
}
.rich .card-body .cplan-seg-you {
  background-image: linear-gradient(var(--navy-700), var(--navy-700));
}
.rich .card-body .cplan-seg-blank {
  background-image: linear-gradient(var(--gray-100), var(--gray-100));
  color: var(--text-muted);
  font-weight: var(--font-weight-regular);
}
.rich .card-body .cplan-seg-k {
  margin-right: var(--space-1);
  font-size: var(--size-caption);
  font-weight: var(--font-weight-regular);
}
.rich .card-body .cplan-oop {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.rich .card-body .cplan-oop-k {
  color: var(--text-muted);
}
.rich .card-body .cplan-oop-v {
  font-weight: var(--font-weight-bold);
  color: var(--text-heading);
}
.rich .card-body .cplan-oop-v.blank {
  font-weight: var(--font-weight-regular);
  color: var(--text-muted);
}
/* The two-plan ledger */
.rich .card-body .cmp {
  margin: 0;
}
.rich .card-body .cmp th,
.rich .card-body .cmp td {
  padding: var(--space-3) var(--space-3);
  vertical-align: top;
  border-top: var(--border-width) solid var(--border-hairline);
  border-bottom: 0;
  font-size: var(--size-body-sm);
  line-height: var(--leading-body);
}
.rich .card-body .cmp thead th {
  border-top: 0;
  font-size: var(--size-caption);
  font-weight: var(--font-weight-bold);
  color: var(--text-muted);
}
.rich .card-body .cmp th[scope='row'] {
  font-weight: var(--font-weight-regular);
  color: var(--text-muted);
}
.rich .card-body .cmp td {
  font-weight: var(--font-weight-bold);
  color: var(--text-heading);
}
.rich .card-body .cmp tr > :first-child {
  padding-left: var(--space-6);
}
.rich .card-body .cmp tr > :last-child {
  padding-right: var(--space-6);
}
.rich .card-body .cmp-shared-list {
  display: grid;
}
.rich .card-body .cplan-item {
  position: relative;
  border-left: 0;
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-12);
  border-top: var(--border-width) solid var(--border-hairline);
  color: var(--text-body);
}
.rich .card-body .cplan-item:first-child {
  border-top: 0;
}
.rich .card-body .cplan-item::before {
  content: '';
  position: absolute;
  top: var(--space-3);
  left: var(--space-6);
  width: var(--space-1);
  height: var(--space-3);
  margin: var(--space-1) var(--space-1) 0;
  border: solid var(--green-700);
  border-width: 0 var(--border-width-strong) var(--border-width-strong) 0;
  transform: rotate(45deg);
}
/* The dependent deadline (its book inline style is answered, never edited) */
.rich .card-body .sp-deadline {
  display: grid !important;
  align-items: stretch !important;
  gap: 0 !important;
}
.rich .card-body .sp-deadline .stamp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-3) var(--space-6);
}
.rich .card-body .sp-deadline .stamp small {
  font-size: var(--size-body-sm);
  color: var(--text-muted);
}
.rich .card-body .sp-deadline .stamp .d {
  text-align: right;
  font-size: var(--size-body-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-heading);
}
.rich .card-body .sp-deadline p {
  max-width: none !important;
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-top: var(--border-width) solid var(--border-hairline);
  font-size: var(--size-body-sm) !important;
  line-height: var(--leading-relaxed) !important;
  color: var(--text-muted) !important;
}
/* Steps (hsa-ineligible), the kit's numbered rows */
.rich .card-body .move {
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-width) solid var(--border-hairline);
  border-bottom: 0;
}
.rich .card-body .num {
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-weight: var(--font-weight-heavy);
  font-variant-numeric: tabular-nums;
}
.rich .card-body .move h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--size-body-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  color: var(--text-heading);
}
.rich .card-body .move p {
  color: var(--text-muted);
}
/* ScaleCard: care settings on the handbook's own $-to-$$$$ scale */
.rich .card-body .menu-item {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-width) solid var(--border-hairline);
}
.rich .card-body .menu-item:first-child {
  border-top: 0;
}
.rich .card-body .menu-item .line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: baseline;
}
.rich .card-body .menu-item .t {
  font-weight: var(--font-weight-bold);
  color: var(--text-heading);
}
.rich .card-body .menu-item .price {
  font-size: var(--size-body);
  font-weight: var(--font-weight-heavy);
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
}
.rich .card-body .menu-item .price i {
  font-style: normal;
  /* T011/D3: --gray-300 was 1.51:1; the dim half still reads lighter than the navy half */
  color: var(--text-muted);
}
.rich .card-body .menu-item p {
  color: var(--text-muted);
}
/* Faq: one card per question group, the book's questions as rows */
.rich .faq {
  grid-template-columns: minmax(0, 1fr) auto;
}
.rich .faq > .eyebrow {
  grid-column: 1;
  padding: var(--space-5) var(--space-6) 0;
}
.rich .faq > h2 {
  grid-column: 1;
  margin: 0;
  padding: var(--space-1) var(--space-6) var(--space-4);
  border-bottom: 3px solid var(--text-heading);
  font-size: var(--size-h5);
  font-weight: var(--font-weight-heavy);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--text-heading);
}
.rich .faq > .book-link {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  padding: var(--space-5) var(--space-6) 0 0;
  border-bottom: 3px solid var(--text-heading);
}
.rich .faq > .question-list {
  grid-column: 1 / -1;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.rich .faq .question-link {
  gap: 0;
  padding: var(--space-1) var(--space-6) var(--space-3);
  border-bottom: 0;
  border-top: var(--border-width) solid var(--border-hairline);
}
.rich .faq .question-link:first-child {
  border-top: 0;
}
.rich .faq .arrow-link {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  color: var(--text-heading);
  font-size: var(--size-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
}
.rich .faq .preview {
  margin: 0;
  font-size: var(--size-caption);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}
.rich .faq .preview:empty {
  display: none;
}
/* Help: the ask box and a person to call, in the card shell */
.rich .ask-card {
  padding: var(--space-5) var(--space-6);
}
.rich .ask-card .ask {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.rich .ask-card .ask h2 {
  font-size: var(--size-h5);
  font-weight: var(--font-weight-heavy);
  color: var(--text-heading);
}
.rich .ask-card .ask-state {
  margin-block: var(--space-2) 0;
}
.rich .contacts .card-list {
  display: grid;
}
.rich .contacts .card-list a {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  border-top: var(--border-width) solid var(--border-hairline);
  color: var(--text-heading);
}
.rich .contacts .card-list a:first-child {
  border-top: 0;
}
/* 1280: the kit's own composition — photograph in the right half, the plate one row,
   cards in repeat(auto-fit, minmax(340px, 1fr)). */
@media (min-width: 900px) {
  .rich .detail-hero {
    display: block;
  }
  .rich .detail-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 52%;
    height: auto;
    margin: 0;
  }
  .rich .detail-photo img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, var(--white) 52%);
    mask-image: linear-gradient(to right, transparent 0%, var(--white) 52%);
  }
  .rich .hero-text {
    max-width: 58%;
    gap: var(--space-5);
    padding: var(--space-7) var(--pad-card-lg) var(--space-10);
  }
  .rich .status-plate {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: var(--space-6);
    margin: calc(-1 * var(--space-8)) var(--space-8) 0;
    padding: var(--space-5) var(--space-6);
  }
  .rich .status-plate .you-block {
    grid-template-columns: max-content;
  }
  .rich .status-plate .you-block:has(.your-cost:not([hidden])),
  .rich .status-plate .you-block:has(.you-change[open]) {
    grid-template-columns: minmax(0, 32rem);
  }
  .rich .status-plate .intents {
    order: 0;
    align-self: stretch;
    padding-left: var(--space-6);
    border-left: var(--border-width) solid var(--border-hairline);
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-6);
  }
  .rich .intents-q {
    flex-basis: 100%;
  }
  .rich .status-plate .intent {
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .rich .do-this {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-5);
  }
  .rich {
    gap: var(--space-10);
  }
  .rich > .topic,
  .rich > .topic > .q-row {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }
  /* the tall tables take the whole row and read their panels side by side, so no
     column stands empty beside them (T013/B2) */
  .rich > .topic > .card.full {
    grid-column: 1 / -1;
  }
  .rich .card.full .card-body .cols,
  .rich .card.full .card-body .menu-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rich .card.full .card-body .menu-item:nth-child(2) {
    border-top: 0;
  }
  .rich .card.full .card-body .menu-item:nth-child(even) {
    border-left: var(--border-width) solid var(--border-hairline);
  }
  .rich .rail a {
    min-height: 0;
  }
  .rich .status-plate .intents {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
  }
  .rich .card.full .card-body .cols > .facts + .facts {
    border-top: 0;
    border-left: var(--border-width) solid var(--border-hairline);
  }
  .rich > #help {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  /* T008 (T014 point 2): cards in one row end level, and a section of two cards reads as
     two columns, so no track stands empty beside a pair */
  .rich > .topic,
  .rich > .topic > .q-row {
    align-items: stretch;
  }
  .rich > .topic:has(> .card + .card):not(:has(> .card + .card + .card)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* 390: its own design — tabs and rail scroll in one row, the hero full width with the
   photograph as a band beneath the type, the plate stacked as rows, one card column. */
@media (max-width: 600px) {
  .tab-inner {
    gap: var(--space-3);
    padding: 0 var(--space-4);
  }
  .detail-tabs {
    gap: var(--space-5);
  }
  /* B1: four tabs need the whole row; enrolment stays one tap away on the plate */
  .tab-bar .enroll {
    display: none;
  }
  .rich {
    gap: var(--space-10);
    padding: var(--space-2) var(--space-4) var(--space-10);
  }
  .rich > .top {
    gap: var(--space-3);
  }
  /* R12: two-up rows and no caption still left do-first under the fold on Medical and
     Resources, so at 390 DO THIS shows between the hero and the plate — visual order only;
     the DOM keeps plate before do-this (CATEGORY_ORDER, check-rich anatomy) */
  .rich .hero-wrap {
    display: contents;
  }
  .rich > .top > .do-this {
    order: 1;
  }
  .rich .status-plate {
    order: 2;
    margin-top: 0;
  }
  /* the plate no longer covers the band, so a shorter band shows more photograph */
  .rich .detail-photo {
    height: 80px;
  }
  /* Resources' first screen is its deadline headline, the plate's intents and the situation
     search; the band would push the first intent past 760, so at 390 the photo shows only
     at desktop widths (check-experience PURPOSE_BELOW_FOLD) */
  .rich.category-resources .detail-photo {
    display: none;
  }
  .rich .hero-text {
    padding-top: var(--space-2);
    padding-bottom: var(--space-3);
  }
  .rich .status-plate {
    gap: var(--space-1);
    padding-block: var(--space-2);
  }
  .rich .intents-q {
    margin-bottom: 0;
  }
  /* T014: at 390 the intents are a list of full-width rows, each a 44px target, and the
     weekly-cost label sits on its own line above its button */
  .rich .status-plate .intents {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-3);
  }
  /* R12: the caption goes at 390; the rows say what they do */
  .rich .status-plate .intents-q {
    display: none;
  }
  .rich .status-plate .intent {
    justify-content: space-between;
    min-height: var(--icon-circle-sm);
    padding: 0;
    border: 0;
    border-top: var(--border-width) solid var(--border-hairline);
    border-radius: 0;
    white-space: normal;
  }
  .rich .status-plate .you-block {
    grid-template-columns: minmax(0, 1fr);
  }
  .rich .rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rich .rail::-webkit-scrollbar {
    display: none;
  }
  .rich .detail-hero h1 {
    font-size: var(--size-h3);
  }
  .rich .detail-hero .outcome {
    font-size: var(--size-body);
  }
  .rich .headline {
    margin-top: 0;
    padding-top: var(--space-4);
  }
  .rich .headline .dp b {
    font-size: var(--size-h3);
  }
  .rich .headline .dg {
    gap: var(--space-8);
  }
  .rich .headline .dn {
    max-width: none;
  }
  .rich .card-body .cc-drow {
    grid-template-columns: minmax(0, 0.8fr) repeat(3, minmax(0, 1fr));
  }
  .rich .card-body .cc-drow > * {
    padding-inline: var(--space-2);
  }
  .rich .card-body .cc-drow > .cc-dk {
    padding-left: var(--space-4);
  }
  .rich .card-body .cc-drow > :last-child {
    padding-right: var(--space-4);
  }
  .rich .card-body .cmp th,
  .rich .card-body .cmp td {
    padding-inline: var(--space-2);
  }
  .rich .card-body .cmp tr > :first-child {
    padding-left: var(--space-4);
  }
  .rich .card-body .cmp tr > :last-child {
    padding-right: var(--space-4);
  }
}

/* T009: the question pages wear the category pages' shell. `.rich.q-scope` reuses every
   `.rich` rail and DataCard rule and drops `.rich`'s page-container box. Tokens only. */
.rich.q-scope {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.rich.q-rail {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-4) var(--layout-gutter) 0;
}
.decides:has(> .rich.q-scope) {
  border-top: 0;
  padding-top: 0;
}
.detail > .rich.q-scope,
.rules > .rich.q-scope {
  margin-block: var(--space-4);
}
/* Source prose a card holds (a directory's rows) keeps the question pages' 16px body. */
.rich.q-scope .card-body p:not(.claim-payload p) {
  font-size: var(--size-body);
}
@media (max-width: 600px) {
  /* the phone: the rail and the card head give back the room the answer needs above the fold */
  .rich.q-rail {
    padding-top: var(--space-1);
  }
  .rich.q-rail + .portal-layout {
    padding-top: var(--space-1);
  }
  .decides:has(> .rich.q-scope) {
    margin-top: var(--space-2);
  }
  .rich.q-scope .card > header {
    padding: var(--space-2) var(--space-4);
  }
  /* R13a: in the answer panel the card head drops; its Handbook link is the .answer-foot
     after .decides, outside the panel. The 3px navy rule moves to the card's top edge. */
  /* painted, not bordered: a border would make the panel 4px taller than its payload, and
     check-interiors' fold budget measures the payload against the panel's top */
  .decides .rich.q-scope .card {
    border: 0;
    box-shadow:
      inset 0 3px 0 var(--text-heading),
      0 0 0 var(--border-width) var(--border-hairline),
      var(--shadow-card);
  }
  .decides .rich.q-scope .card > header {
    display: none;
  }
  /* the card's label-left rows (.rich .card-body .frow, 0-3-0) would outrank the phone's
     stacked frows (.claim-payload .frow, 0-2-0): restate the stack at card specificity */
  .rich.q-scope .card-body .frow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
  .rich.q-scope .card-body .frow > .v {
    text-align: left;
  }
  .rich.q-scope.answer-foot {
    display: block;
    margin-top: var(--space-2);
  }
}
/* R13a: the answer's Handbook link after .decides exists for the phone only. */
@media (min-width: 601px) {
  .rich.q-scope.answer-foot {
    display: none;
  }
}
/* T011/D1: at 390 Medical's weekly-cost control sat under the fold (summary 771-815). The
   plate becomes a two-column subgrid, and the control takes the intents' empty fourth
   cell. No R12 item moves: DO THIS and all three intents keep their places. Choosing a
   tier (or seeing the result) gives the control the plate's full width again. */
@media (max-width: 600px) {
  .rich .status-plate:has(> .you-block) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-3);
    row-gap: 0;
  }
  .rich .status-plate:has(> .you-block) > .intents {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }
  .rich .status-plate:has(> .you-block) .intent {
    align-self: start;
  }
  .rich .status-plate > .you-block {
    grid-column: 2;
    grid-row: 2;
    align-content: start;
    gap: 0;
  }
  .rich .status-plate > .you-block .plate-k {
    margin: 0;
  }
  .rich .status-plate > .you-block:has(.you-change[open]),
  .rich .status-plate > .you-block:has(.your-cost:not([hidden])) {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}
/* T011/m2: no transitions, animations or smooth scrolling for readers who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}