/* Employee targeting and native disclosure state must win over component display rules. */
[hidden] { display: none !important; }
/* Hormel Benefits 2027, screen-first. Source: Hormel-Benefits-Provisions/css/site.css (copied to site/css by tools/web.py).
   Tokens: the book's palette (palette-tr.css). Navy identity, one orange accent (the DO THIS bar, or the key
   date when a page has no bar), Figtree, 6px radius, no pills, no gradients, no side stripes, no sheet shadows. */
/* palette-tr.css is linked before this file by the page head (W2-09: no @import round trip) */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/figtree.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/figtree-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root { --ink: var(--forest-deep); --navy: var(--forest); --mid: var(--forest-mid); --orange: var(--chartreuse); --muted: #45454D;
  --gut: 16px; --gap: 24px; --top: 20px; --step: 24px; --r: 6px; --max: 68rem;
  --action: #B84500; --action-ink: #FFFFFF;  /* orange-700 fill + white: the one action per page (5.40:1) */
  /* W4 colour options: every colour the site renders is a token; css/palettes/<id>.css (:root[data-palette=id]) overrides them.
     These are the original values (docs/goals/kmsl-v3/notes/palettes/palettes.json, id original). */
  --action-hover: #963800; --accent-bright: #EE5A01; --accent-tint: #FDF2EA; --good: #31611C; --good-tint: #E3EFDF;
  --page: #F8F8F8; --card: #FFFFFF; --text: #2B2B30; --focus: #2862A2; --link: #01356E; --focus-on-ink: #F9F5F3;  /* link, focus-on-ink: palette slots, not used yet */
  --admin-line: #9A6700; --admin-bg: #FFF6DC; --admin-ink: #3D2A00; --admin-kick: #6B4A00;
  /* Category identity (Ian's CategoryTile, moved from tools/front.py in T007). --cat-<key> = disc fill,
     --cat-<key>-ink = text/rule ink, >= 4.5:1 on --bone and white (docs/goals/kmsl-v2-readability/notes/T007-contrast.md).
     Inner pages use ink only for identity: hero kicker, 4px hero rule, current sibling-chip marker. */
  --cat-start: #F9A407; --cat-start-ink: #7A5200; --cat-medical: #01356E; --cat-medical-ink: #01356E;
  --cat-dentalvision: #EE5A01; --cat-dentalvision-ink: #B84500; --cat-retirement: #487C2D; --cat-retirement-ink: #487C2D;
  --cat-money: #487C2D; --cat-money-ink: #487C2D; --cat-protect: #EE5A01; --cat-protect-ink: #B84500;
  --cat-programs: #2862A2; --cat-programs-ink: #2862A2; --cat-documents: #F9A407; --cat-documents-ink: #7A5200;
  --cat-ink: var(--navy); }
body[data-cat=start] { --cat-ink: var(--cat-start-ink); } body[data-cat=medical] { --cat-ink: var(--cat-medical-ink); }
body[data-cat=dentalvision] { --cat-ink: var(--cat-dentalvision-ink); } body[data-cat=retirement] { --cat-ink: var(--cat-retirement-ink); }
body[data-cat=money] { --cat-ink: var(--cat-money-ink); } body[data-cat=protect] { --cat-ink: var(--cat-protect-ink); }
body[data-cat=programs] { --cat-ink: var(--cat-programs-ink); } body[data-cat=documents] { --cat-ink: var(--cat-documents-ink); }
@media (min-width: 760px) { :root { --gut: 32px; --step: 32px; } }

:root { /* Quiet pass 3 (2026-10-04): one type scale, six roles; every font-size in this file is one of these (the home display excepted) */
  --fs-xs: 0.8125rem; --fs-s: 0.9375rem; --fs-m: 1.0625rem; --fs-l: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; }
@media (min-width: 760px) { :root { --fs-2xl: 2.75rem; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bone); color: var(--ink); font: 400 1.0625rem/1.5 "Figtree", system-ui, sans-serif; overflow-wrap: break-word; }
p, h1, h2, h3, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
main a { overflow-wrap: anywhere; }
.fig, .hero-t { min-width: 0; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.answer sup.t, .fig-v sup.t, .display sup.t { font-size: 0.4em; }
sup.t { font-size: 0.55em; line-height: 0; vertical-align: 0.7em; margin-left: 1px; opacity: 0.75; font-weight: 600; }
b { font-weight: 750; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gut); top: 8px; z-index: 20; background: var(--white); padding: 12px 16px; border-radius: var(--r); }

/* ---- the grid: 12 columns on 760px and up ---- */
.g { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .g { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } }

/* ---- top bar ---- */
.bar { position: sticky; top: 0; z-index: 10; background: var(--white); box-shadow: 0 1px 0 var(--rule); }
/* hash targets land below the sticky .bar (T010) and the stuck section / tab bars (C17); STICK_JS measures the heights */
:root { --bar-h: 61px; --sib-h: 0px; --tl-h: 0px; }
@media (min-width: 900px) { :root { --bar-h: 106px; } }
html { scroll-padding-top: calc(var(--bar-h) + var(--sib-h) + var(--tl-h) + 12px); }
.bar-in, .tabs-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; gap: 12px; }
.bar-in { min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; }
.brand img { display: block; width: 62px; height: auto; }
.grp { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-s); }
.grp-n { font-weight: 750; color: var(--navy); }
.grp a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--mid); font-weight: 700; }
.callbtn { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r); background: var(--navy); color: var(--white); font-weight: 800; text-decoration: none; }
.callbtn:hover { background: var(--forest-deep); }
.cbs { display: none; margin-left: 0.3em; } @media (min-width: 900px) { .cbs { display: inline; } }
/* hotfix-2: the persistent Enroll action, far right of every top bar (front page too): orange-700 + white, 5.40:1 */
.enrollbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 6px; background: var(--action); color: var(--action-ink);
  font-weight: 800; text-decoration: none; white-space: nowrap; }
.enrollbtn:hover { background: var(--action-hover); color: var(--action-ink); }
.enrollbtn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.tabs { display: none; }
@media (max-width: 420px) { .brand span { display: none; } .grp { font-size: var(--fs-s); gap: 4px; } .callbtn { padding: 0 14px; } }
/* phones: group name above Change, so logo, group, Change, Call and Enroll share one row down to 320px */
@media (max-width: 420px) { .bar-in { gap: 8px; } .grp { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; margin-top: 4px; }
  .grp a { min-height: 44px; padding: 0; } .callbtn, .enrollbtn { padding: 0 12px; } }
@media (max-width: 360px) { .brand img { width: 50px; } .callbtn, .enrollbtn { padding: 0 10px; } }
@media (min-width: 900px) {
  .tabs { display: block; }
  .tabs-in { gap: 4px; }
  .tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: var(--fs-s); font-weight: 700; color: var(--navy); text-decoration: none; }
  .tabs a:first-child { margin-left: -12px; }
  .tabs-in { overflow-x: auto; scrollbar-width: none; } .tabs a { flex: none; white-space: nowrap; }
  .tabs a:hover { box-shadow: inset 0 -2px 0 var(--rule); }
  .tabs a[aria-current] { box-shadow: inset 0 -3px 0 var(--navy); }
}

/* ---- sibling nav: the other pages in this section (T003 section 1); current page underlined, not only filled ---- */
/* C17: sticky under the top bar while the page scrolls, as V1's tabs were; the page colour behind it hides what scrolls under */
.sib { position: sticky; top: var(--bar-h); z-index: 9; background: var(--bone); padding-bottom: 4px; }
.sib-in { max-width: var(--max); margin: 0 auto; padding: 4px var(--gut) 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sib a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: 6px 12px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--white); color: var(--navy); font-size: var(--fs-s); font-weight: 700; line-height: 1.25; text-decoration: none; }
.sib a:hover { border-color: var(--navy); }
.sib a[aria-current] { border: 2px solid var(--cat-ink); box-shadow: inset 0 -4px 0 var(--cat-ink); color: var(--navy); text-decoration: underline 2px; text-underline-offset: 4px; }
/* C25: the tabs you are not on read as buttons (solid border, underline, arrow); the current one is the only filled chip */
.sib a:not([aria-current]) { border: 2px solid var(--navy); font-weight: 750; text-decoration: underline 1px; text-underline-offset: 3px; }
.sib a:not([aria-current])::after { content: "\203A"; margin-left: 8px; font-size: 1.25em; line-height: 1; }
.sib a:not([aria-current]):hover { background: var(--navy); color: var(--white); }
@media (max-width: 519px) { .sib a { font-size: var(--fs-s); padding: 6px 10px; } }
/* phones (T011): one row that scrolls sideways inside the nav only; the right edge fades while more chips follow
   (JS adds .end at the end of the row); the page itself never scrolls sideways. Desktop keeps wrapping. */
@media (max-width: 699px) {
  .sib { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--gut);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .sib::-webkit-scrollbar { display: none; }
  .sib.end { -webkit-mask-image: none; mask-image: none; }
  .sib-in { flex-wrap: nowrap; }
  .sib-in::after { content: ""; flex: none; width: 28px; }
  .sib a { flex: none; max-width: none; white-space: nowrap; }
}

/* Eric, Sept 30: from 960 the section's pages are a left menu (one .side grid holds nav.sib and main).
   Eric, Oct 1 ("bring the left nav out past the edge of the page content"): the menu hangs in the left margin and the page keeps
   its full width, centred as without the menu; only where the margin is narrower than the menu does the page move right to make room.
   A list, not buttons: plain rows, the current page carries the section's ink bar on its left and the white card fill.
   Ported from Ian Matenaer's 6d478c1 + 6bdcdea (feat/kmsl-v3), without Plan Facts. */
@media (min-width: 960px) {
  .side { display: grid; grid-template-columns: minmax(calc(12rem + var(--gut)), 1fr) minmax(0, var(--max)) minmax(0, 1fr); align-items: start; }
  .side main { grid-column: 2; max-width: none; margin: 0; }
  .side .sib { grid-column: 1; justify-self: end; width: 12rem; top: calc(var(--bar-h) + 16px); background: none; padding: 16px 0 0; }
  .side .sib-in { max-width: none; margin: 0; padding: 0; flex-direction: column; flex-wrap: nowrap; gap: 0; border-left: 1px solid var(--rule); }
  .side .sib a, .side .sib a:not([aria-current]) { width: 100%; max-width: none; min-height: 44px; padding: 8px 12px; margin-left: -1px; border: 0; border-left: 4px solid transparent;
    border-radius: 0 var(--r) var(--r) 0; background: none; box-shadow: none; font-weight: 700; text-decoration: none; }
  .side .sib a:not([aria-current])::after { content: none; }
  .side .sib a:not([aria-current]):hover { background: var(--card); color: var(--navy); text-decoration: underline 1px; text-underline-offset: 3px; }
  .side .sib a[aria-current] { border-left-color: var(--cat-ink); background: var(--card); color: var(--navy); font-weight: 800; }
}

main { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* ---- the hero: the question, the answer as headline, one big figure ---- */
.hero { padding-top: 16px; margin-bottom: var(--top); row-gap: 16px; align-items: start; }
.kicker { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid); }
h1.q { margin: 6px 0 8px; font-size: var(--fs-2xl); line-height: 1.15; font-weight: 850; letter-spacing: -0.02em; color: var(--navy); text-wrap: balance; }
.answer { font-size: var(--fs-l); line-height: 1.3; font-weight: 700; color: var(--ink); text-wrap: balance; }
.lede { margin-top: 8px; max-width: 42rem; color: var(--muted); text-wrap: pretty; }
.lede b { color: var(--ink); }
.answer:empty { display: none; }
.hero .kicker { color: var(--cat-ink); }
@media (min-width: 760px) {
  .hero { padding-top: 24px; }
  .hero-t { grid-column: 1 / span 7; }
  .hero.nofig .hero-t { grid-column: 1 / span 10; }
  .hero .fig { grid-column: 8 / span 5; }
  .hero.home .hero-t { grid-column: 1 / span 7; }
  }
@media (max-width: 759px) {  /* phone: the figure comes first under the question */
  .hero { display: flex; flex-direction: column; row-gap: 0; }
  .hero-t { display: contents; }
  .hero .kicker { order: 1; } .hero h1.q { order: 2; } .hero .fig, .hero .facts { order: 3; margin: 4px 0 12px; }
  .hero .answer { order: 4; } .hero .lede { order: 5; } .hero .display { order: 2; }
}
.fig { background: var(--white); color: var(--ink); border-radius: var(--r); padding: 14px 16px 16px; }
.fig-k { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fig-r { margin-top: 6px; font-weight: 750; color: var(--navy); text-wrap: balance; }
.fig-v { margin-top: 6px; font-size: var(--fs-2xl); line-height: 1.05; font-weight: 850; letter-spacing: -0.035em; color: var(--navy); font-variant-numeric: tabular-nums; text-wrap: balance; }
/* desktop: sized by the card (cqi), not the window; beside the left menu the card is narrower and a phone number stays on one line (6d478c1) */
@media (min-width: 960px) { .fig { container-type: inline-size; } .fig-v { font-size: var(--fs-2xl); } }
.fig-v.long { font-size: var(--fs-l); line-height: 1.25; letter-spacing: -0.015em; }
.fig-v a { text-decoration-thickness: 2px; }
.fig-cap { margin-top: 10px; color: var(--muted); font-size: var(--fs-s); text-wrap: pretty; }
.fig .val { margin-top: 8px; }
.fig .val.first .v { font-size: var(--fs-2xl); }
.fig .nt { margin-top: 10px; }
.fig-dates { display: grid; gap: 14px; margin-top: 2px; }
.fig-dates .date { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 16px; align-items: center; width: auto; }
.fig-dates .dl { margin: 0; font-size: var(--fs-m); color: var(--ink); font-weight: 650; }

/* ---- blocks and rhythm (W3 density, R6): one scale, 20px under the hero, 24px (phone) / 32px (desktop) between blocks ---- */
.blk { margin-top: var(--step); }
.blk:first-of-type { margin-top: 0; }
.do + .blk { margin-top: var(--step); }
.blk > * + * { margin-top: 16px; }
.blk > .sec-q + *, .blk > .sec-h + *, .blk > .lede + * { margin-top: 12px; }
.blk > .label + * { margin-top: 8px; }
.blk > .kicker + *, .blk > .sec-q + .kicker { margin-top: 8px; }
.sec-q { font-size: var(--fs-l); line-height: 1.25; font-weight: 800; color: var(--navy); text-wrap: balance; }
.blk > .sec-q:first-child { margin-top: 0; }
.sec-h { font-size: var(--fs-l); line-height: 1.3; font-weight: 750; color: var(--ink); text-wrap: balance; max-width: 44rem; }
.label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid); }
.blk > .label + .rows, .part > .label + * { margin-top: 8px; }
.big { font-size: var(--fs-xl); font-weight: 850; letter-spacing: -0.035em; color: var(--navy); line-height: 1.05; }
.note { max-width: 44rem; color: var(--ink); text-wrap: pretty; }
.para { max-width: 44rem; text-wrap: pretty; }
.xlink { margin-top: 12px; }
.xlink a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 750; color: var(--navy); }
/* the guidebook link (C38): navy, never orange; 44px tall target on phones */
.readmore { display: flex; align-items: center; width: fit-content; min-height: 44px; font-size: var(--fs-s); font-weight: 700; color: var(--navy); }
/* C38: one "For more information, see your guidebook, page N" link closes each page */
.guide { margin-top: var(--step); }

/* ---- label / answer rows: label on columns 1-4, answer 5-12 ---- */
.row { padding: 10px 12px; border-radius: var(--r); align-items: baseline; }
.row:nth-child(even) { background: var(--zebra); }
.row > .q { font-weight: 750; color: var(--ink); line-height: 1.35; text-wrap: balance; }
.row > .a { line-height: 1.5; text-wrap: pretty; }
@media (min-width: 760px) { .row > .q { grid-column: 1 / span 4; } .row > .a { grid-column: 5 / span 8; } }
@media (max-width: 759px) { .row > .a { margin-top: 4px; } }

/* ---- steps: across on desktop, stacked on phone ---- */
.steps { row-gap: 18px; }
.step .n, .vstep .n { font-size: var(--fs-xl); font-weight: 850; line-height: 1; letter-spacing: -0.03em; color: var(--navy); }
.step p.t { margin: 8px 0 4px; font-size: var(--fs-m); font-weight: 750; line-height: 1.3; text-wrap: balance; }
.step .d, .vstep .d { color: var(--muted); font-size: var(--fs-s); text-wrap: pretty; }
.step.hot .n, .vstep.hot .n { display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 6px; border-radius: var(--r); background: var(--navy); color: var(--white); font-size: var(--fs-xl); }
@media (min-width: 760px) { .steps.n1 .step { grid-column: span 12; } .steps.n2 .step { grid-column: span 6; } .steps.n3 .step { grid-column: span 4; } }
@media (max-width: 759px) { .step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 12px; } .step .n { grid-row: span 2; } .step p.t { margin-top: 2px; } }
.vstep { padding: 10px 0; align-items: start; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 12px; }
.vstep .n { line-height: 1.3; font-size: var(--fs-xl); }
.vstep p.t { font-weight: 750; font-size: var(--fs-m); line-height: 1.4; text-wrap: balance; }
.vstep .d { margin-top: 4px; }
@media (min-width: 760px) { .vstep .n { grid-column: 1 / span 1; } .vstep .b { grid-column: 2 / span 11; } }

/* ---- dates: a row of calendar tiles ---- */
.dates { display: flex; flex-wrap: wrap; gap: 24px; }
.date { width: 9.5rem; }
.cal { display: flex; flex-direction: column; width: 6.5rem; border: 1.5px solid var(--navy); border-radius: var(--r); background: var(--white); text-align: center; overflow: hidden; }
.cal .m { background: var(--navy); color: var(--white); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 0 3px; }
.cal .dd { font-size: var(--fs-xl); font-weight: 850; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); padding-top: 4px; }
.cal .y { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); padding-bottom: 6px; }
.date.hot .cal { border-color: var(--orange); }
.date.hot .cal .m { background: var(--orange); }
.dl { margin-top: 8px; font-size: var(--fs-s); line-height: 1.35; color: var(--muted); text-wrap: balance; }
@media (max-width: 759px) { .dates { gap: 20px 16px; } .dates .date { width: calc(50% - 8px); } }

/* ---- comparisons: one row per subject, the two plans side by side ---- */
.cmp-h .if { display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cmp-h .cn { display: block; margin-top: 2px; font-size: var(--fs-l); font-weight: 800; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.cmp-heads { padding-bottom: 4px; }
.cmp-row { padding: 14px 0; align-items: start; }
.cmp-row + .cmp-row { box-shadow: inset 0 1px 0 var(--white); }
.cmp-row > .q, .cmp.one .row > .q { font-weight: 750; color: var(--ink); text-wrap: balance; }
.val { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.val + .val { margin-top: 4px; }
.v { font-size: var(--fs-xl); font-weight: 850; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.w { font-size: var(--fs-s); color: var(--muted); line-height: 1.3; text-wrap: pretty; }
.nt { margin-top: 6px; font-size: var(--fs-s); color: var(--muted); text-wrap: pretty; }
.nt.solo { margin-top: 0; font-size: var(--fs-m); color: var(--ink); }
.rh { font-weight: 800; color: var(--navy); margin-bottom: 4px; }
@media (min-width: 760px) {
  .cmp-heads > .sp, .cmp-row > .q { grid-column: 1 / span 4; }
  .cmp-heads > .cmp-h:nth-child(2), .cmp-row > .a:nth-child(2) { grid-column: 5 / span 4; }
  .cmp-heads > .cmp-h:nth-child(3), .cmp-row > .a:nth-child(3) { grid-column: 9 / span 4; }
}
@media (max-width: 759px) {
  .cmp-heads, .cmp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .cmp-heads > .sp { display: none; }
  .cmp-row > .q { grid-column: 1 / -1; margin-bottom: 8px; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid); font-weight: 800; }
  .cmp .cmp-row > .a.hs, .cmp .cmp-row > .a.tr, .cmp .cmp-row > .a.opt, .cmp .cmp-row > .a.basic { margin: 0 0 -14px; padding: 10px 12px 14px; }  /* tint starts under the row label (C87, 36b6dad) */
  .v { font-size: var(--fs-l); white-space: normal; }
}
.cmp.one .cmp-h { margin-bottom: 4px; }

/* ---- band, DO THIS, also ---- */
.band { background: var(--white); border-radius: var(--r); padding: 18px 20px; align-items: center; row-gap: 6px; }
.band .if { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.band .bn { font-weight: 800; color: var(--navy); text-wrap: balance; }
.band .bf { margin-top: 2px; color: var(--muted); font-size: var(--fs-s); text-wrap: pretty; }
.band .v { font-size: var(--fs-xl); white-space: nowrap; }
@media (min-width: 760px) { .band .if { grid-column: 1 / span 4; } .band .b { grid-column: 5 / span 5; } .band .b.wide { grid-column: 5 / span 8; } .band .v { grid-column: 10 / span 3; text-align: right; } }
.do { margin-top: var(--step); background: var(--action); color: var(--action-ink); border-radius: var(--r); padding: 16px; align-items: center; row-gap: 6px; }
.blk > .do { margin-top: var(--step); }
.do .k, .also .k { font-size: var(--fs-xs); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.do p.t { font-size: var(--fs-l); font-weight: 750; line-height: 1.35; text-wrap: balance; }
.do sup.t { opacity: 1; }
@media (min-width: 760px) { .do .k, .also .k { grid-column: 1 / span 4; } .do p.t, .also p.t { grid-column: 5 / span 8; } .do { padding: 22px 24px; } }
@media (max-width: 759px) { .do { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); border-radius: 0; padding: 16px var(--gut); } }
.also { margin-top: 20px; background: var(--tint); border-radius: var(--r); padding: 16px 20px; align-items: baseline; row-gap: 4px; }
.also .k { color: var(--mid); }
.also p.t { font-weight: 650; text-wrap: pretty; }

a.go { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: var(--r); background: var(--white); color: var(--action);
  font-weight: 850; text-decoration: none; justify-self: start; }
a.go:hover { text-decoration: underline; }
.do a.go:focus-visible { outline-color: var(--white); }

/* ---- enrollment: the deadline in the hero figure, the by-when list as a checklist ---- */
.fig .date { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 16px; align-items: center; width: auto; margin-top: 16px; }
.fig .date .dl { margin: 0; font-size: var(--fs-m); color: var(--ink); font-weight: 750; }
.check li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 12px; padding: 10px 0; }
.check li::before { content: ""; width: 1.25rem; height: 1.25rem; margin-top: 2px; border: 2px solid var(--navy); border-radius: 4px; grid-row: span 2; }
.check .n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.check .t { font-weight: 750; line-height: 1.35; }
.check li.hot { background: var(--forest-050); border-radius: var(--r); padding-left: 12px; padding-right: 12px; }  /* the book's key item: a light tint, never a filled navy box (a filled box reads as done) */
.check .d { color: var(--muted); font-size: var(--fs-s); }
/* T001: checklist item 1 IS the page's one orange action (the book's step title is the button), so it shows once */
.check li.act { background: var(--action); color: var(--action-ink); border-radius: var(--r); padding: 14px 16px; margin: 8px 0; border-bottom: 0; align-items: center; row-gap: 8px; }
.check li.act::before { border-color: var(--action-ink); margin-top: 0; }
.check li.act .d { color: var(--action-ink); }
.check li.act a.go:focus-visible { outline-color: var(--white); }
.blk > details.more { margin-top: 12px; }
.blk > details.more > summary { padding: 10px 18px; line-height: 1.3; }

/* ---- plan variants: tabs when JS runs, a visible section per variant when it does not (T003 section 2) ---- */
.vtabs { margin-top: 16px; }
.vpanel + .vpanel { margin-top: var(--step); }
.vpanel > * + * { margin-top: 16px; }
.vh { font-size: var(--fs-l); line-height: 1.3; font-weight: 800; color: var(--navy); text-wrap: pretty; }
.vh .vf, [role=tab] .vf { display: block; font-size: var(--fs-s); font-weight: 600; color: var(--muted); }
.vtabs.on .vh { display: none; }
.vtabs.on .vpanel + .vpanel { margin-top: 0; }
[role=tablist] { display: grid; gap: 8px; margin-bottom: 16px; }
/* C17: in-page tab bars (compare, plan variants) stick below the top bar and nav.sib */
.vtabs.on > [role=tablist] { position: sticky; top: calc(var(--bar-h) + var(--sib-h)); z-index: 8; background: var(--bone); padding: 8px 0; }
.vpanel .vtabs.on > [role=tablist] { position: static; }  /* C87: tabs inside a tab (your group, in Disability) do not stick over the page's own */
@media (min-width: 760px) { [role=tablist] { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
[role=tab] { display: block; min-height: 44px; padding: 10px 14px; text-align: left; font: inherit; font-weight: 750; color: var(--navy); line-height: 1.3;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); cursor: pointer; }
[role=tab]:hover { background: var(--tint); }
/* one selected look for every tab row (plan variants and compare): navy fill, white text, underlined name (state is not colour alone) */
[role=tab][aria-selected=true] { background: var(--navy); border-color: var(--navy); color: var(--white); text-decoration: underline 2px; text-underline-offset: 5px; }
[role=tab][aria-selected=true] .vf { color: var(--forest-050); }
.vs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* read aloud, not shown: .vf is its own line */
[role=tab]:focus-visible, [role=tabpanel]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* ---- compare, T005 option B: tabs by question over the TABS_JS system; decision panel boxed; rate pickers ---- */
.ctabs { margin-top: 0; }
.ctabs > [role=tablist] { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--step) 0 0; }
.ctabs [role=tab] { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 8px 12px; text-align: center; }

.ctabs:not(.on) > .vpanel + .vpanel { margin-top: var(--step); }
.ctabs > .vpanel > * + * { margin-top: 16px; }
.ctabs > .vpanel > .sec-q { margin-top: 0; }
.decide { background: var(--white); border-radius: var(--r); padding: 16px var(--gut); }
.decide > .sec-q { border-top: 0; padding-top: 0; }
.decide .cmp .v { font-size: var(--fs-xl); }
.then { font-weight: 650; }
.seg { border: 0; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.seg[hidden] { display: none; }
.seg legend { float: left; width: 100%; margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--white); color: var(--navy); font-weight: 750; cursor: pointer; }
.seg label:hover { background: var(--tint); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label:has(input:checked) { background: var(--navy); border-color: var(--navy); color: var(--white); }
.seg label:has(input:checked)::before { content: "\2713\00a0"; }  /* checked is not colour alone */
.seg label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ctabs .rate:first-of-type { margin-top: 16px; }
tr.you th, tr.you td { background: var(--forest-050); }
tr.you th::after { content: " \2190 you"; font-weight: 800; color: var(--navy); }
.every { margin-top: var(--step); }
.every > * + * { margin-top: 16px; }

/* ---- section overview: the top three as cards, the rest a compact list ---- */
.links.cards { border: 0; display: grid; gap: 8px; }
.links.cards a { border: 1px solid var(--rule); border-top: 4px solid var(--cat-ink); background: var(--white); border-radius: var(--r); padding: 12px 16px; min-height: 64px; }
.links.cards .lq { font-size: var(--fs-l); }
@media (min-width: 760px) { .links.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.links.compact a { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; column-gap: 10px; min-height: 48px; padding: 8px 0; }

/* ---- directory ---- */
.calls { display: grid; column-gap: var(--gap); }
@media (min-width: 760px) { .calls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.call { padding: 12px 0; }
.call .r { font-weight: 800; color: var(--ink); line-height: 1.3; }
.call .r .d { font-weight: 500; color: var(--muted); }
.call .c, .who .c { margin-top: 2px; }
.call .c a, .who .c a { display: inline-block; padding: 4px 0; }
.who { margin-top: var(--step); }
.who > .label { margin-bottom: 8px; }
.who > .c { padding: 4px 0; color: var(--muted); }
.who > .c b { color: var(--ink); }

/* ---- folded secondary detail ---- */
details.more { margin-top: var(--step); }
details.variant { margin-top: 12px; }
.variant .more-in > * + * { margin-top: 16px; }
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details.more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 18px; border: 1px solid var(--rule); background: var(--white); border-radius: var(--r); font-weight: 750; color: var(--navy); }
details.more > summary:hover, .faq summary:hover, .resource-category summary:hover { background: var(--tint); }
details.more > summary::after, .faq summary::after { content: "+"; font-size: var(--fs-xl); font-weight: 500; line-height: 1; }
details[open] > summary::after { content: "\2212"; }
.more-in { padding: 8px 0 0; }
.part { margin-top: 20px; }
.part > * + * { margin-top: 10px; }
.list li { position: relative; padding-left: 20px; margin-top: 8px; text-wrap: pretty; }
.list li::before { content: ""; position: absolute; left: 2px; top: 0.65em; width: 7px; height: 7px; border-radius: 1px; background: var(--mid); }
@media (min-width: 760px) { .list.cols { columns: 2; column-gap: var(--gap); } .list.cols li { break-inside: avoid; } }
.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; }
thead th { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--navy); }
tbody th { font-weight: 700; }
.rate { margin-top: 20px; }
.rate-h { font-size: var(--fs-l); font-weight: 800; color: var(--navy); }
.rate-q { margin-top: 2px !important; color: var(--muted); font-size: var(--fs-s); }
.rate td { font-size: var(--fs-m); font-weight: 750; }
.faq details { padding: 0 12px; border-radius: var(--r); }
.faq details:nth-child(even) { background: var(--zebra); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 0; font-weight: 700; text-wrap: balance; }
.faq details p { padding: 0 0 14px; max-width: 44rem; text-wrap: pretty; }
.live-note { display: inline-block; padding: 6px 12px; border-radius: var(--r); background: var(--caution-050); color: var(--caution-ink); font-size: var(--fs-s); font-weight: 650; }
.live-note span { font-weight: 500; }

/* ---- link lists (sections, contents, top tasks) ---- */
.links a { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 8px 0; text-decoration: none; }
.links .lq { font-weight: 750; color: var(--navy); line-height: 1.3; text-wrap: balance; }
.links .lt { font-size: var(--fs-s); color: var(--muted); }
.links a:hover .lq { text-decoration: underline; text-underline-offset: 3px; }
.links.tiles { border: 0; display: grid; gap: 8px; }
.links.tiles a { border: 1px solid var(--rule); background: var(--white); border-radius: var(--r); padding: 10px 14px; min-height: 56px; }
@media (min-width: 760px) { .links.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .links.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.secs { display: grid; gap: 8px; }
@media (min-width: 760px) { .secs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sec-a { display: flex; flex-direction: column; min-height: 44px; text-decoration: none; padding-bottom: 8px; }
.sec-a .st { font-size: var(--fs-l); font-weight: 800; color: var(--navy); }
.sec-a:hover .st { text-decoration: underline; text-underline-offset: 3px; }
.sec-a .ss { color: var(--muted); font-size: var(--fs-s); }
.links.mini a { min-height: 44px; padding: 8px 0; }
.links.mini .lt { display: none; }
.links.mini .lq { font-weight: 650; font-size: var(--fs-s); }

/* ---- home: cover ---- */
.display { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.25rem); line-height: 1; font-weight: 850; letter-spacing: -0.04em; color: var(--navy); margin: 10px 0 0; text-wrap: balance; }
.display em { font-style: normal; }
.facts { background: var(--white); border: 2px solid var(--navy); padding: 12px 16px 10px; }
.facts .fh { font-size: var(--fs-xl); font-weight: 850; color: var(--navy); line-height: 1.1; }
.facts .fsub { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.facts hr { border: 0; background: var(--navy); margin: 10px 0 4px; }
.facts hr.full { height: 8px; } .facts hr.thin { height: 3px; }
.facts .fr { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-s); }
.facts .fr b { text-align: right; color: var(--navy); }
.facts .fr b.big { font-size: var(--fs-l); font-weight: 850; }
.facts .fnote { font-size: var(--fs-xs); color: var(--muted); margin-top: 8px; }
.when .dates { margin-top: 12px; }
.coda { padding-top: 8px; }
.motto { font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); font-size: var(--fs-s); }
.motto em { font-style: normal; }
.ledger { font-size: var(--fs-xs); color: var(--muted); }

/* ---- choose your group ---- */
.choose { max-width: 40rem; padding-top: 48px; }
.choose .lede { margin-bottom: 28px; }
.picks { display: grid; gap: 12px; }
.pick { display: flex; flex-direction: column; justify-content: center; min-height: 76px; padding: 14px 20px; background: var(--white); border: 1.5px solid var(--navy); border-radius: var(--r); text-decoration: none; }
.pick:hover { background: var(--forest-050); }
.pick .pn { font-size: var(--fs-l); font-weight: 800; color: var(--navy); }
.pick .ps { color: var(--muted); font-size: var(--fs-s); }
.cont { margin-bottom: 20px; }
.pick.again { background: var(--navy); color: var(--white); font-size: var(--fs-l); font-weight: 800; min-height: 60px; }
.pick.again:hover { background: var(--forest-deep); }

/* ---- pager and footer ---- */
.pager { max-width: var(--max); margin: var(--step) auto 0; padding: 0 var(--gut); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pager a { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 8px 14px; border: 1.5px solid var(--navy); border-radius: var(--r); text-decoration: none; font-weight: 750; color: var(--navy); line-height: 1.3; text-wrap: balance; }
.pager a span { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.pager .next { text-align: right; align-items: flex-end; grid-column: 2; }
.pager a:hover { background: var(--white); }
@media (max-width: 519px) { .pager { gap: 8px; } }  /* W3: prev and next side by side on phones too (one row, not two) */
.foot { max-width: var(--max); margin: var(--step) auto 0; padding: 12px var(--gut) 16px; font-size: var(--fs-s); color: var(--muted); }
.foot .stamp { margin-top: 4px; color: var(--mid); font-weight: 700; }

/* T002 kmsl-v2-followups: the recipe's docked tab bar (hormel-portal-kit docs/ux/medical-d6/medical.html), phones only.
   Flush to the bottom edge, full width, pads the iPhone home-bar inset (viewport-fit=cover); the body pads the bar's
   height so the pager and footer are never under it. Active = navy on navy-050, 6px. Inactive grey-ink = 6.9:1 on white. */
:root { --sab: env(safe-area-inset-bottom, 0px); --dock-h: 65px; }
.dock { display: none; }
@media (max-width: 699px) {
  body { padding-bottom: calc(var(--dock-h) + var(--sab)); }
  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: space-around; gap: 4px;
    background: var(--card); border-top: 1px solid var(--rule); padding: 6px 8px calc(6px + var(--sab)); }
  .dock a { flex: 1 1 0; max-width: 96px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-radius: 6px; color: var(--grey-ink); font: 600 var(--fs-xs)/1.2 "Figtree", system-ui, sans-serif; text-decoration: none; }
  .dock a[aria-current] { color: var(--forest); background: var(--forest-050); }
  .dock a:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: -3px; }
}
@media print { .dock { display: none !important; } body { padding-bottom: 0; } }

/* hotfix-2 hub hero (web.HUB): a section's landing band, navy with the section photo; the page's own question hero follows.
   White on navy-700 12.10:1; crumb navy-050 on navy-700 10.61:1 (original palette). */
.hub { background: var(--navy); color: var(--white); }
.hub-in { max-width: var(--max); margin: 0 auto; padding: 16px var(--gut); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--gap); align-items: center; }
.hub-t { min-width: 0; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-s); font-weight: 600; color: var(--forest-050); }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--forest-050); }
.crumb a:hover { color: var(--white); }
.crumb a:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.hub-n { margin-top: 4px; font-size: var(--fs-2xl); line-height: 1.05; font-weight: 900; letter-spacing: -0.03em; color: var(--white); }
.hub-f { margin: 6px 0 0; font-weight: 700; font-size: var(--fs-m); color: var(--white); opacity: .9; }
.hub img { display: block; width: 100%; height: 160px; object-fit: cover; object-position: 30% 35%; border-radius: 12px; }
@media (max-width: 759px) {  /* phone: a short crop on top, then crumb and name */
  .hub-in { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px var(--gut); }
  .hub img { order: -1; height: 96px; object-position: 30% 30%; }
  .hub-n { font-size: var(--fs-xl); margin-top: 0; }
}

/* Review notes (Eric, 2026-09-28): admin-facing trust language, not for employees. web.py ADMIN_NOTES=False drops them. */
.admin { border: 1.5px dashed var(--admin-line); background: var(--admin-bg); color: var(--admin-ink); border-radius: 6px; padding: 10px 12px; }
.admin::before { content: "Review note · not shown to employees"; display: block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--admin-kick); margin-bottom: 4px; }
/* C36: unvalidated-figure daggers are review marks in the same language (web.py marks(); gone when ADMIN_NOTES=False) */
sup.t.rv { opacity: 1; color: var(--admin-kick); background: var(--admin-bg); outline: 1px dashed var(--admin-line); border-radius: 2px; padding: 0 1px; }
/* hotfix 3: cost calculator at the top of Using care (tools/web.py calc_html / CALC_JS) */
.calc { padding: 16px; background: var(--forest-050); border-radius: var(--r); }
.calc > * + *, .calc-ui > * + * { margin-top: 16px; }
.calc .sec-q { margin-top: 0; }
.calc .seg label { background: var(--white); }
.calc .seg label:has(input:checked) { background: var(--navy); }
/* David 2026-10-03 "lets do ian's": Ian's calculator choices (feat/kmsl-v3 .pf-tune): numbered steps, equal-width buttons in one row.
   Our group names are longer than his rate codes, so a label may wrap inside its button. */
.calc-ui { counter-reset: cstep; }
.calc .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 0; border: 0; }
.calc .seg legend { float: none; width: 100%; grid-column: 1 / -1; counter-increment: cstep; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0; font-size: var(--fs-m); font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--navy); }
.calc .seg legend::before { content: counter(cstep); display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: var(--white); font-size: var(--fs-xs); }
.calc .seg label { justify-content: center; text-align: center; min-height: 48px; padding: 6px 8px; line-height: 1.2; }
.calc .seg:has(label:nth-of-type(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* four long group names: two per row */
.calc-in label[for] { font-weight: 750; }
.calc-in output { display: block; font-size: var(--fs-xl); font-weight: 800; color: var(--navy); }
.calc-in input[type=range] { display: block; width: 100%; min-height: 44px; margin: 4px 0; accent-color: var(--navy); }
.calc-n { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-s); }
.calc-n input { width: 8rem; min-height: 44px; padding: 6px 10px; font: inherit; font-size: var(--fs-m); border: 1.5px solid var(--navy); border-radius: var(--r); background: var(--white); }
.calc-more table { width: 100%; background: var(--white); }
.calc-more th, .calc-more td { vertical-align: top; }
.calc-lo { display: block; margin-top: 4px; font-size: var(--fs-xs); font-weight: 800; color: var(--navy); }
.calc-lo::before { content: "\2713\00a0"; }
.calc-bars { display: flex; gap: var(--gap); max-width: 28rem; margin: 0 0 16px; }
.cb-col { flex: 1 1 0; min-width: 0; max-width: calc(50% - var(--gap) / 2); display: flex; flex-direction: column; }
.cb-val { font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.cb-plot { height: 120px; display: flex; align-items: flex-end; border-bottom: 2px solid var(--navy); }
.cb-bar { width: 100%; height: 100%; transform-origin: bottom; border-radius: var(--r) var(--r) 0 0; transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1); }
.cb-col.tr .cb-val { color: var(--tr); } .cb-col.tr .cb-bar { background: var(--tr); }
.cb-col.hs .cb-val { color: var(--good); } .cb-col.hs .cb-bar { background: var(--good); }
.cb-name { margin-top: 8px; font-size: var(--fs-s); font-weight: 750; }
@media (min-width: 760px) { .cb-plot { height: 180px; } }
@media (prefers-reduced-motion: reduce) { .cb-bar { transition: none; } }
tr.calc-tot th, tr.calc-tot td { font-weight: 800; border-top: 2px solid var(--navy); }
.calc-low { font-weight: 750; }
.calc .calc-note { max-width: none; }
/* C85 (call 2026-09-29): on desktop the totals and bars sit beside the inputs, as on the previous portal, so the calculator is
   about half as tall and the answer moves as you drag. Phones keep one column. */
@media (min-width: 760px) {
  .calc-ui:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); column-gap: 40px; align-items: start; }
  .calc-ui > * { grid-column: 1; }
  .calc-ui > .calc-out { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .calc-ui > .calc-low, .calc-ui > .calc-note, .calc-ui > .calc-more { grid-column: 1 / -1; }  /* Eric 2026-09-30: the estimate and "See the numbers" run full width */
}

/* C34: two to four basic facts under the hero, from the book or the live page only */
.hfacts { margin-top: 16px; font-weight: 650; }
.hero .hfacts { order: 6; }
/* C26/C61: the in-page section-list sidebar was removed 2026-09-29 (David); headings keep their ids. */

/* C09: an explicit Home link in the top bar on wide screens (the phone dock has Home); Call and Enroll are the buttons beside it */
.homebtn { display: none; }
@media (min-width: 900px) { .homebtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--navy); font-weight: 700; text-decoration: none; }
  .homebtn:hover { text-decoration: underline; } }

/* ---- batch C (call 2026-09-28) ---- */
/* C41: the two plans read differently at first glance. Healthy Savings = teal, Traditional = plum (orange stays the one action
   colour); the plan name is always text too, so colour is never the only cue. Contrast on white: teal 6.1:1, plum 8.6:1.
   C87 (Eric, 2026-09-30): Optional coverage (what you can buy) is the Life and Disability colour, Basic stays plain. Port of Ian Matenaer's 36b6dad. */
:root { --hs: #0B6E6E; --hs-tint: #E3F1F0; --tr: #6A2E7F; --tr-tint: #F1E8F4; }
.cmp-h.hs, .cmp-h.tr, .cmp-h.opt { padding: 10px 12px 12px; background: var(--good-tint); border-radius: var(--r) var(--r) 0 0; }
.cmp-h.tr { background: var(--tr-tint); }
.cmp-h.opt { background: color-mix(in srgb, var(--cat-protect) 18%, var(--card)); }
.cmp-heads > .cmp-h.basic { padding: 10px 12px 12px; background: var(--zebra); border-radius: var(--r) var(--r) 0 0; }
.cmp-h.hs .cn { color: var(--good); } .cmp-h.tr .cn { color: var(--tr); } .cmp-h.opt .cn { color: var(--cat-protect-ink); }
.cmp-row > .a.hs, .cmp-row > .a.tr { padding: 0 12px; background: var(--good-tint); }
.cmp-row > .a.opt { align-self: stretch; padding: 14px 12px; margin: -14px 0; background: color-mix(in srgb, var(--cat-protect) 18%, var(--card)); }
.cmp-row > .a.tr { background: var(--tr-tint); } .cmp-row > .a.basic { padding: 0 12px; }
.cmp-row > .a.hs, .cmp-row > .a.tr { margin: -14px 0; padding-top: 14px; padding-bottom: 14px; }
.cmp.one .cmp-h.hs, .cmp.one .cmp-h.tr, .cmp.one .cmp-h.opt { border-radius: var(--r); }
.rate.hs .rate-h, .rate.tr .rate-h { padding: 8px 12px; background: var(--good-tint); color: var(--good); border-radius: var(--r) var(--r) 0 0; }
.rate.tr .rate-h { background: var(--tr-tint); color: var(--tr); }
/* C83: option columns (Delta PPO / Premier / Nonparticipating), coloured like the two medical plans; no plan colour is reused */
.opt.o1 { --oc: var(--cat-programs-ink); } .opt.o2 { --oc: var(--cat-retirement-ink); } .opt.o3 { --oc: var(--grey-ink); }
.opts thead th.opt { background: color-mix(in srgb, var(--oc) 12%, var(--card)); color: var(--oc); padding-left: 12px; padding-right: 12px; }
.opts td.opt { background: color-mix(in srgb, var(--oc) 5%, var(--card)); padding-left: 12px; padding-right: 12px; }
@media (max-width: 759px) { .tbl .opts th, .tbl .opts td { padding-left: 5px; padding-right: 5px; font-size: var(--fs-s); } .tbl .opts th[scope=row] { padding-left: 0; } .tbl .opts thead th.opt { letter-spacing: 0; font-size: var(--fs-xs); text-transform: none; } }
/* C24: the bargaining-unit chart is the baseline: a navy rule under the heading row, bold row labels, big figures, a rule between rows. */
.tbl table { border-top: 0; }
.tbl thead th { padding-top: 8px; padding-bottom: 8px; font-size: var(--fs-xs); color: var(--navy); }
.tbl tbody th { font-weight: 750; color: var(--ink); text-wrap: balance; padding-top: 10px; padding-bottom: 10px; }
.tbl tbody td { padding-top: 10px; padding-bottom: 10px; font-size: var(--fs-m); font-weight: 750; color: var(--ink); }
/* Account eligibility: a strong header and alternating bands keep the four choices easy to compare. */
.tbl.account-eligibility { background: var(--white); border-radius: var(--r); }
.tbl.account-eligibility thead th { padding: 12px; background: var(--navy); color: var(--white); border-bottom: 0; }
.tbl.account-eligibility tbody tr:nth-child(odd) { background: var(--tint); }
.tbl.account-eligibility tbody th, .tbl.account-eligibility tbody td { padding: 12px; }
.tbl.account-eligibility tbody td { font-weight: 500; }
@media (max-width: 759px) {
  .tbl.account-eligibility thead th, .tbl.account-eligibility tbody th, .tbl.account-eligibility tbody td { padding: 10px 8px; }
  .tbl.account-eligibility tbody th, .tbl.account-eligibility tbody td { font-size: var(--fs-s); }
}
/* C35: where to go for care, a ladder whose bar grows toward the emergency room */
.ladder { display: grid; gap: 6px; }
.rung { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; padding: 8px 12px; background: var(--white); border-radius: var(--r); }
.rung .rn { font-weight: 800; color: var(--navy); }
.rung .rc { display: flex; align-items: center; gap: 10px; }
.rung .rc i { display: block; height: 14px; width: calc(var(--n) * 22%); min-width: 22%; border-radius: 3px; background: var(--mid); }
.rung:nth-child(n+3) .rc i { background: var(--cat-medical); }
.rung:last-child .rc i { background: var(--action); }
.rung .rc b { font-weight: 850; font-size: var(--fs-l); letter-spacing: 0.06em; color: var(--ink); white-space: nowrap; }
.rung .rd { color: var(--muted); font-size: var(--fs-s); }
@media (min-width: 760px) { .rung { grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; } }
.care .lede { max-width: 44rem; }
/* phones: five tabs must not make a tall sticky bar, so the tab row is one scrolling line, 48px tall */
@media (max-width: 759px) {
  .ctabs > [role=tablist] { flex-wrap: nowrap; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .ctabs [role=tab] { flex: 0 0 auto; padding: 6px 12px; white-space: nowrap; }
  .ctabs.on > [role=tablist] { padding-top: 4px; padding-bottom: 0; }
}
.ctabs > .vpanel > .fig { margin-top: 16px; }
.decide + .ctabs { margin-top: 0; }

/* Batch D (C03 C22 C37 C42 C58): the old site's charts (feature / details) in the batch C table style. Long text values read as text;
   on a phone each row stacks, label over value, so nothing scrolls sideways. */
.tbl.kv tbody th { width: 34%; }
.tbl.kv.long tbody td { font-size: var(--fs-m); font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.tbl.kv td { padding-right: 0; }
@media (max-width: 599px) {
  .tbl.kv thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl.kv table, .tbl.kv tbody, .tbl.kv tr, .tbl.kv th, .tbl.kv td { display: block; width: auto; }
  .tbl.kv tbody tr { padding: 12px 0; }
  .tbl.kv tbody th, .tbl.kv tbody td { padding: 2px 0; border: 0; }
  .tbl.kv tbody th { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid); font-weight: 800; }
}
.basics .rows { margin-top: 12px; }

/* ---- batch E: program overviews, the old site's videos, the Voluntary videos and documents area ---- */
.links .lo { flex-basis: 100%; font-size: var(--fs-s); color: var(--ink); line-height: 1.4; text-wrap: pretty; }
.links .lo.tag { font-size: var(--fs-xs); font-weight: 750; color: var(--navy); }
.vid { position: relative; aspect-ratio: 16 / 9; max-width: 44rem; background: var(--rule); border-radius: var(--r); overflow: hidden; }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vidf { margin: 0; } .vidf figcaption { margin-top: 8px; }
.vol-area h3.label { margin-top: 20px; }
.vol-area .c { margin-top: 6px; }

/* W1 (critique 2026-09-28): .sr = screen-reader-only (table captions, W1-13); .crumbbar = the breadcrumb on a leaf page (W1-08, ink on
   the page background instead of the hub band's navy); .secs flows in two columns without row holes (W1-19). */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.crumbbar { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.crumbbar .crumb, .crumbbar .crumb a { color: var(--navy); }
@media (min-width: 760px) { .secs { display: block; column-count: 2; column-gap: var(--gap); } .secs > li { break-inside: avoid; margin-bottom: 28px; } }
@media (max-width: 759px) { .crumbbar .crumb { flex-wrap: nowrap; } .crumbbar .crumb > * { flex: none; } .crumbbar .crumb > span:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* W3 density (brief 2026-09-28, R1-R7; critique W2-06/07/08). Labels in capitals only when three words or fewer (web.caps adds .nc
   to longer ones); hash jumps on phones stop above the docked bar; the compare numbers table folds under its chart (R5);
   the edition front lists the eight sections as a compact two-column grid (R4). */
.nc { text-transform: none !important; letter-spacing: 0 !important; }
@media (max-width: 699px) { html { scroll-padding-bottom: calc(var(--dock-h) + var(--sab) + 12px); } }
.calc-nums { margin-top: 12px; }
.secs.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; column-count: auto; }
.secs.grid > li { margin: 0; }
.secs.grid .sec-a { justify-content: center; height: 100%; min-height: 56px; padding: 8px 12px; background: var(--white); border: 1px solid var(--rule);
  border-top: 4px solid var(--c, var(--navy)); border-radius: var(--r); }
.secs.grid .sec-a .st { font-size: var(--fs-m); line-height: 1.25; }
@media (min-width: 760px) { .secs.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 759px) { .secs.grid .sec-a .ss { display: none; } }
.links.tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.links.tiles.two .lt { display: none; }
@media (min-width: 1100px) { .links.tiles.two { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* W3 R3: on phones a plan-variant tab row is one scrolling line (as the compare tabs are), not a stack of full-width buttons */
@media (max-width: 759px) {
  .vtabs:not(.ctabs) > [role=tablist] { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .vtabs:not(.ctabs) > [role=tablist]::-webkit-scrollbar { display: none; }
  .vtabs:not(.ctabs) [role=tab] { flex: 0 0 auto; max-width: 15rem; padding: 6px 12px; font-size: var(--fs-s); }
  .vtabs:not(.ctabs) [role=tab]:last-child { margin-right: 28px; }
}
/* W3 R7: Who to call reads as one compact row per contact: name, then number and site side by side (targets stay 44px) */
.call { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; padding: 8px 0; }
.call .r { flex-basis: 100%; }
.call .c { margin-top: 0; }
.call .c a, .who .c a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.who > .c { padding: 0; }
/* W3 R6/R7: the closing chrome (who to call, guidebook link, pager, footer) sits on the small step at every width */
.who { margin-top: 24px; }
.guide { margin-top: 12px; padding-top: 0; }
.pager { margin-top: 16px; }
.foot { margin-top: 16px; }
@media (min-width: 760px) { .hero { padding-top: 12px; } }
.who { padding-top: 6px; }
.do { margin-top: 16px; } .blk > .do { margin-top: 16px; }
@media (min-width: 760px) { .do { margin-top: 24px; } .blk > .do { margin-top: 24px; } }
.facts .fr { padding: 4px 0; }
@media (max-width: 759px) {  /* W3 R4: smaller calendar tiles on phones, two to a row */
  .cal { width: 5rem; } .cal .dd { font-size: var(--fs-xl); padding-top: 2px; } .cal .y { padding-bottom: 4px; }
  .dates { gap: 12px 16px; } .dl { margin-top: 4px; }
}
.tbl tr[hidden] { display: none !important; }  /* W3: kv_folded rows shown in the fold below the table */
@media (max-width: 759px) { .hub-in.door img { display: none; } }  /* W3 R1: no photo band on leaf pages on phones; section pages keep it (B2) */
/* W3 R6: phones: the pager is one compact row (the Previous / Next word is read aloud, the arrow shows it); calculator on the small step */
@media (max-width: 519px) {
  .pager a { min-height: 48px; padding: 6px 12px; flex-direction: row; align-items: center; gap: 6px; }
  .pager a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pager .prev::before { content: "\2039"; font-size: 1.5em; line-height: 1; }
  .pager .next { justify-content: flex-end; }
  .pager .next::after { content: "\203A"; font-size: 1.5em; line-height: 1; }
  .foot { padding-top: 8px; }
}
.calc > * + *, .calc-ui > * + * { margin-top: 12px; }
.seg { margin-top: 12px; }
@media (max-width: 759px) { .big { font-size: var(--fs-xl); } }  /* W3: a date headline fits one phone line */
/* W2 (critique 2026-09-28 + PM 2026-09-29). Calendar tiles: the month name fits on one line at 320 and 390 (NOVEMBER is ~81px). */
.cal .m { white-space: nowrap; }
@media (max-width: 759px) { .cal { width: 6.25rem; } }
/* W2-03: every form control gets the site's 3px focus ring (the calculator slider and amount boxes had the browser's 1px) */
:is(input, select, textarea, button):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* W2-02: phones: the compare tab row scrolls sideways (as the plan tabs do); the right edge fades while more tabs follow */
@media (max-width: 759px) {
  .ctabs > [role=tablist] { overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .ctabs > [role=tablist]::-webkit-scrollbar { display: none; }
  .ctabs [role=tab]:last-child { margin-right: 28px; }
}
/* W2-04: the calculator says its range, and says it again when a typed amount is outside it */
.calc-o output { display: inline; margin-right: 8px; }
.calc-h { font-size: var(--fs-s); color: var(--muted); }
.calc-h.bad { color: var(--ink); font-weight: 750; }
.calc-n input[aria-invalid=true] { border: 2px solid var(--action); }
/* W2-05: phones: contact links inside text (phone numbers, email, member sites) get a 44px tap area; the vertical padding
   grows the hit box without moving the line (an inline box's padding does not change the line height) */
@media (max-width: 759px) {
  :where(main :is(p, li, td, dd):not(.xlink) > a:not([class])) {  /* zero specificity: any rule that sizes a link wins */ padding-block: max(0px, calc(23px - 0.6em)); }
}
/* W4 colour options (David, 2026-09-28), REVIEW BUILD ONLY (web.pal_control; the staff build emits none of it): an icon button in every
   top bar beside the group's Change link (label shown on wide screens, read aloud everywhere) opens a small non-modal panel below the
   bar. Each option button carries its own palette's tokens (site/css/palettes.css), so its swatches and label preview that palette. */
.bar-in, .appbar-in { position: relative; }
.pal { display: inline-flex; flex: none; }
.palbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0;
  border-radius: var(--r); background: none; color: var(--mid); font: inherit; font-size: var(--fs-s); font-weight: 700; cursor: pointer; }
.palbtn:hover, .palbtn[aria-expanded=true] { background: var(--forest-050); }
.palbtn svg { flex: none; }
.pbs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 900px) { .pbs { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
.palpop { position: absolute; top: calc(100% + 4px); right: var(--gut); z-index: 60; width: min(22rem, calc(100vw - 2 * var(--gut))); padding: 12px;
  background: var(--card); color: var(--text); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-deep); font-size: var(--fs-m); line-height: 1.4; }
.palpop[hidden] { display: none; }
.palh { font-weight: 800; color: var(--navy); }
.palsub { margin-top: 2px; font-size: var(--fs-s); color: var(--muted); }
.palpop ul { display: grid; gap: 6px; margin-top: 10px; }
.palpop [data-p] { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 10px; border: 1.5px solid var(--rule);
  border-radius: var(--r); background: var(--card); color: var(--forest); font: inherit; font-weight: 750; text-align: left; cursor: pointer; }
.palpop [data-p]:hover { border-color: var(--forest); }
.palpop [data-p][aria-pressed=true] { border: 2px solid var(--forest); }
.palpop [data-p][aria-pressed=true] .pn::after { content: "\00a0\2713"; }  /* chosen is not colour alone */
.sw { display: inline-flex; flex: none; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.sw i { display: block; width: 14px; height: 28px; }
.sw i:nth-child(1) { background: var(--forest); } .sw i:nth-child(2) { background: var(--action); } .sw i:nth-child(3) { background: var(--bone); }
.sw i:nth-child(4) { background: var(--good); } .sw i:nth-child(5) { background: var(--tr); }
.appbar .palbtn { color: var(--white); }
.appbar .palbtn:hover, .appbar .palbtn[aria-expanded=true] { background: color-mix(in srgb, var(--white) 12%, transparent); }
.appbar .palbtn:focus-visible { outline-color: var(--white); }
.appbar .palpop { right: 28px; }
@media (max-width: 700px) { .appbar .pal { margin-left: auto; } .appbar .pal + .callbtn2 { margin-left: 0; } .appbar .palpop { right: 14px; } }
/* phones: the 44px button takes no extra gap, so the group name keeps its one line (the top bar is no taller than without it) */
@media (max-width: 420px) { .bar .pal { margin: 0 -8px; } }

/* Oct 2: the library and printable overview use the existing page furniture. */
.resource-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0}
.resource-controls label{font-weight:700}
.resource-controls select{font:inherit;max-width:100%;min-height:44px;padding:10px;border:1px solid var(--rule);border-radius:6px;background:var(--white);color:var(--ink)}
.resource-print{font:inherit;font-weight:750;min-height:44px;padding:10px 16px;border:1px solid var(--rule);border-radius:6px;background:var(--white);color:var(--navy);cursor:pointer}
.resource-picker [hidden]{display:none!important}
.feature-section,.resource-category{margin:28px 0}
.resource-category ul,.start-resource-links,.care-links{padding-left:22px}
.resource-category li,.start-resource-links li,.care-links li{margin:10px 0;overflow-wrap:anywhere}
.table-scroll{max-width:100%;overflow-x:auto}
.benefit-features table{width:100%;border-collapse:collapse;margin:16px 0}
.benefit-features th,.benefit-features td{padding:10px;text-align:left;vertical-align:top}
.benefit-features th{font-weight:700}
@media print{.resource-controls,.resource-print{display:none!important}.resource-picker [hidden]{display:none!important}.table-scroll{overflow:visible}.feature-section{break-inside:avoid}.benefit-features table{font-size:9pt}.benefit-features th,.benefit-features td{padding:5px}}

.benefit-features thead{background:var(--navy);color:var(--white)}
.benefit-features tbody tr:nth-child(even){background:var(--zebra)}

/* Eric 2026-09-30 ("increase size of hero block, V1 styling"): a page's hero is a navy block; its Basics sit inside it */
.hero.page { margin-top: 16px; padding: 32px; background: var(--navy); color: var(--white); border-radius: var(--r); align-items: center; }
.hero.page .kicker, .hero.page h1.q, .hero.page .answer, .hero.page .lede, .hero.page .lede b, .hero.page .hfacts, .hero.page a { color: var(--white); }
.hero.page h1.q { font-size: var(--fs-2xl); line-height: 1.05; }
.hero.page .lede { opacity: .9; }
/* on navy (the hero, the bands) the Basics read white; under a section band (.hero without .page) navy on the page */
.basics { --b-ink: var(--navy); --b-num: var(--white); margin-top: 24px; order: 6; }
.hero.page .basics, .hub .basics { --b-ink: var(--white); --b-num: var(--navy); }
.basics-h { font-size: var(--fs-l); font-weight: 800; color: var(--b-ink); }
.basics ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 24px; counter-reset: basic; }
.basics li { counter-increment: basic; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; font-weight: 650; line-height: 1.35; color: var(--b-ink); }
.basics li::before { content: counter(basic); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--b-ink); color: var(--b-num); font-weight: 900; font-size: var(--fs-m); }
@media (min-width: 760px) { .hero .basics ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }  /* four lines as two rows of two; the bands keep one column */
@media (max-width: 759px) { .hero.page { margin-inline: calc(-1 * var(--gut)); padding: 24px var(--gut); border-radius: 0; align-items: stretch; } }

/* Oct 2 review: visible row boundaries and selection in every palette. */
.tbl tbody tr:nth-child(even) { background: var(--zebra); }
.rate tr.you > * { background: var(--navy); color: var(--white); }
.rate tr.you th::after { content: "Your selection"; display: block; margin-top: 4px; font-size: var(--fs-xs); color: inherit; }
.rate tr.you th::before { content: none; }
.rate-pair { display: grid; gap: 20px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.rate-pair .rate { min-width: 0; }
@media(max-width:759px) { .rate-pair { grid-template-columns: minmax(0,1fr); } }
.hub-in { min-height: 220px; }
/* B18: preserve the entire source image; the 160px crop cut off both Medical and Start heads. */
.hub img { height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: center top; }
.account-access { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.account-access > div { background: var(--zebra); padding: 16px; border-radius: var(--r); }
.account-access b { display: block; }
.hero-video { grid-column: 9 / -1; min-width: 0; }
.hero-video .video { padding: 0; margin: 0; border: 0; }
.hero-video .sec-q { color: inherit; font-size: var(--fs-l); }
@media(max-width:759px) { .account-access { grid-template-columns: 1fr; } .hero-video { grid-column: 1 / -1; } }

/* Enrollment keeps the six steps in its hero; contact groups remain easy to scan. */
.enrollment-hero .vstep .b { grid-column: 2; }
.enrollment-hero .vstep .n { color: var(--navy); background: var(--white); }
.enrollment-hero.page .vstep .b, .enrollment-hero.page .vstep .b b { color: var(--white); }
.enrollment-hero .fig { align-self: start; }
.contact-group { padding: var(--sheet-pad); background: var(--white); border-radius: var(--r); }
.contact-group + .contact-group { margin-top: 12px; }
.child-figure { padding: 16px; background: var(--white); color: var(--navy); border-radius: var(--r); }
.child-figure .v { font-size: var(--fs-2xl); line-height: 1.1; }
.child-figure .nt { margin-top: 8px; }
@media (min-width: 760px) { .hero:has(.child-figure) .hero-t { grid-row: 1 / span 2; } .child-figure { grid-column: 8 / span 5; grid-row: 2; } }
@media (max-width: 759px) { .child-figure { order: 3; width: 100%; margin: 12px 0; } .hero-video { order: 7; width: 100%; margin-top: 20px; } }

.benefit-features thead th{color:var(--white)}
.resource-category summary{font-weight:750;min-height:48px;padding:12px 18px;border:1px solid var(--rule);background:var(--white);border-radius:var(--r);color:var(--navy);cursor:pointer}
.resource-category summary::before{content:"+";display:inline-block;margin-right:12px}
.resource-category[open] summary::before{content:"−"}
.resource-print:disabled{opacity:.55;cursor:not-allowed}
@media print{body:has(.benefit-features) .bar,body:has(.benefit-features) .hub,body:has(.benefit-features) .crumb,body:has(.benefit-features) .sib,body:has(.benefit-features) .dock,body:has(.benefit-features) .foot{display:none!important}body:has(.benefit-features) .side{display:block}body:has(.benefit-features) main{max-width:none;margin:0;padding:0}}

/* Test-employee sign-in (review build, EMP_JS): who the page is showing, and the way out. */
.emp-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; padding: 10px 16px; background: var(--admin-bg); color: var(--admin-ink); font-size: var(--fs-s); }
.emp-bar i { font-style: normal; }
.emp-bar a, .emp-bar button { font: inherit; font-weight: 700; color: inherit; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
.emp-none { padding: 10px 12px; border-radius: var(--r); background: var(--caution-050); color: var(--caution-ink); font-weight: 600; }
.emp-in { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.emp-in input { font: inherit; padding: 8px 10px; border: 1.5px solid var(--admin-line); border-radius: var(--r); min-width: 0; width: 12em; }
.emp-in button { font: inherit; font-weight: 700; padding: 8px 14px; border-radius: var(--r); border: 0; background: var(--admin-ink); color: var(--admin-bg); cursor: pointer; }

/* Quiet pass (David, 2026-10-04: "so many section lines that separate things - there's too many - ... take advantage of simple
   color/shading to help tell sections apart"). Sections are told apart by tone, not rules: each section is a white sheet on the
   warm page, rows inside it alternate a light band, and the closing "Who to call" sits on the navy tint. Lines remain only for
   a table's header row and for the current tab. */
:root { --zebra: var(--bone); --sheet: var(--white); --tint: var(--forest-050); --sheet-pad: 16px; }
@media (min-width: 760px) { :root { --sheet-pad: 24px; } }
main > section.blk:not(.cover):not(.coda), .vtabs > .vpanel, main > .every { background: var(--sheet); border-radius: var(--r); padding: var(--sheet-pad); }
.vtabs.on > .vpanel { margin-top: 0; }
/* inside a white sheet, nested white surfaces take the band tone instead (never a card inside a card) */
:is(main > section.blk, .vpanel) :is(.band, .rung, .links.tiles a, .links.cards a, .child-figure, .account-access > div, .contact-group) { background: var(--zebra); border-color: transparent; }
.who { background: var(--tint); border-radius: var(--r); padding: var(--sheet-pad); }

/* Quiet pass 2 (Codex audit, 2026-10-04): the hero colour rule made links inside the white figure card white on white
   (Contacts and Pet insurance phone numbers were invisible); a white surface keeps navy links. */
.hero.page .fig a, .hero.page .child-figure a { color: var(--navy); }
/* Enrollment's step numbers sit on the page, not in boxes, when the hero is not the navy block */
.enrollment-hero:not(.page) .vstep .n { background: none; }
/* the Contacts directory: each group is its own sheet; the outer section carries no sheet of its own */
main > section.blk:not(.cover):not(.coda):has(> .contact-group) { background: none; padding: 0; margin-inline: 0; }
main > section.blk > section.contact-group { background: var(--white); }
/* left menu: no rail, no side stripe; the current page is the tinted row in bold */
@media (min-width: 960px) {
  .side .sib-in { border-left: 0; }
  .side .sib a, .side .sib a:not([aria-current]) { margin-left: 0; border-left: 0; border-radius: var(--r); }
  .side .sib a[aria-current] { background: var(--tint); }
}
/* Quiet pass 3: no widows. Every text block avoids a one-word last line; headings balance their lines. */
body { text-wrap: pretty; }  /* inherited by every text block */
:where(h1, h2, h3) { text-wrap: balance; }
/* Quiet pass 4 (Codex review, 2026-10-04). One control look everywhere: white, 1px rule, 6px, weight 750; hover takes the tint;
   selected is navy with white text plus a non-colour cue (tick, underline). Inside a white sheet nothing is boxed twice. */
:is(main > section.blk, .vpanel, main > .every) .fig { background: transparent; padding: 0; border-radius: 0; }
:is(main > section.blk, .vpanel, main > .every) .vtabs > .vpanel { background: transparent; padding: 0; border-radius: 0; }
@media (min-width: 960px) { .side .sib a[aria-current] { text-decoration: underline 2px; text-underline-offset: 4px; } }
.crumbbar .crumb a:focus-visible { outline-color: var(--focus); }
.hero.page a:focus-visible { outline-color: var(--white); }
.hero.page :is(.fig, .child-figure) a:focus-visible { outline-color: var(--focus); }
[role=tablist]:focus-within { -webkit-mask-image: none; mask-image: none; }
[role=tab]:focus-visible { outline-offset: -3px; }
[role=tab][aria-selected=true]:focus-visible { outline-color: var(--white); }
/* Quiet pass 5 (phones, 2026-10-04) */
@media (max-width: 759px) {
  /* sheets run edge to edge, as the navy hero does, so a phone keeps its full text width */
  main > section.blk:not(.cover):not(.coda), .vtabs > .vpanel, main > .every, .who, main > section.blk > section.contact-group {
    margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); border-radius: 0; }
  /* two plan columns: the plan line is body size so a long word never breaks */
  .cmp-h .cn { font-size: var(--fs-m); }
  /* enrollment: the question comes before its steps */
  .hero .vsteps { order: 7; }
}
/* the page chips (phones and tablets): the shared control look; the current page is the filled one */
.sib a, .sib a:not([aria-current]) { border: 1px solid var(--rule); }
.sib a[aria-current] { background: var(--navy); border-color: var(--navy); color: var(--white); box-shadow: none; }
/* short lists and section names balance their lines (pretty cannot always move a last word in a grid cell) */
.basics li, .hub-n, .fig-v { text-wrap: balance; }
/* Phones (gap review 2026-10-04): the test-employee bar wrapped to three lines above the header; it keeps the number and Sign out
   on one line and hides the profile name there (wider screens show it; the sign-in check reads textContent, which keeps it). */
@media (max-width: 519px) { .emp-bar { padding: 6px 12px; gap: 4px 12px; font-size: var(--fs-xs); } .emp-bar .eb-who { display: none; } }

/* Eric October 5: consistent plan identities and available content width. */
.plan-paycheck .rate-pair { grid-template-columns: minmax(0,1fr); }
.rate-pair:not(:has(>.rate:not([hidden])~.rate:not([hidden]))) { grid-template-columns: minmax(0,1fr); }
.medical-plan-hero.plan-hs { background: var(--good); }
.medical-plan-hero.plan-tr { background: var(--tr); }
.medical-plan-tabs.plan-hs .cmp.one .row { background: var(--good-tint); }
.medical-plan-tabs.plan-tr .cmp.one .row { background: var(--tr-tint); }
.medical-plan-tabs .cmp.one .row { padding: 12px; }
.medical-compare-tabs .calc-more { padding-inline: 16px; }
.medical-compare-tabs > .vpanel > section.blk { padding-inline: 0; }
.eric-account-contributions .cmp-heads > .sp,
.eric-account-contributions .cmp-row > .q:empty { display: none; }
@media(min-width:760px) {
 .eric-account-contributions .cmp-heads,.eric-account-contributions .cmp-row:has(>.q:empty) { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .eric-account-contributions .cmp-heads>.cmp-h,.eric-account-contributions .cmp-row:has(>.q:empty)>.a { grid-column:auto; }
}
@media print {
 @page { margin: 14mm; }
 body:has(.benefit-features) main { padding: 0 2mm; }
 .benefit-features thead { display: table-header-group; }
 .benefit-features tr { break-inside: avoid; }
 .benefit-features .feature-section { break-inside: auto; }
 .benefit-features h2,.benefit-features h3 { break-after: avoid; }
 .benefit-features { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
/* Eric October 5: benefit details and contacts stay readable at either width. */
.eric-cessation-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(180px,1fr); gap:24px; align-items:start; }
.eric-cessation-text p + p { margin-top:20px; }
.eric-cessation-grid .qr { margin:0; }
.eric-person-row + .eric-person-row { border-top:2px solid var(--rule); margin-top:12px; padding-top:16px; }
.eric-dental-networks .eric-ppo { background:var(--good-tint); color:var(--good); }
.eric-dental-networks .eric-premier { background:var(--tr-tint); color:var(--tr); }
.eric-dental-networks .eric-out-network { background:var(--forest-050); color:var(--navy); }
.eric-dental-networks tbody td { font-weight:600; }
.eric-wide,.eric-wide table { width:100%; max-width:none; }
.eric-hsa-availability { background:var(--good-tint)!important; color:var(--good); }
.eric-hsa-availability .sec-q { color:var(--good); }
.eric-add-stack > section { margin-top:24px; padding:var(--sheet-pad); background:var(--sheet); border-radius:var(--r); }
.eric-add-summary { margin-block:16px; }
.eric-video-hero .hero-video { align-self:start; }
.eric-voluntary-basics { --b-ink:var(--navy)!important; --b-num:var(--white)!important; padding:20px; background:var(--white); border-radius:var(--r); }
.eric-voluntary-basics .basics-h { color:var(--navy); }
.eric-election { margin-top:20px; font-weight:650; }
.hero.page .eric-election { color:var(--white); }
.hero.page .fig .child-figure { grid-column:auto; grid-row:auto; padding:16px 0 0; margin:16px 0 0; border-top:2px solid var(--rule); background:transparent; width:auto; }
@media(max-width:759px) { .eric-cessation-grid { grid-template-columns:minmax(0,1fr); } .eric-voluntary-basics { padding:16px; } }
/* Benefit Features: plan headings span their network columns; merged cells remain centered. */
.benefit-features :is(th,td).hs { background:var(--good-tint); color:var(--good); }
.benefit-features :is(th,td).tr { background:var(--tr-tint); color:var(--tr); }
.benefit-features .feature-plan-heading { text-align:center; font-size:var(--fs-s); }
.benefit-features td[colspan] { text-align:center; }
.benefit-features tbody :is(td.hs,td.tr) { font-weight:600; }
/* Jen, 2026-10-06 (Q7): "Stretch this out a bit so the 5 pm is on the same line." Fill the first line, keep the time whole. */
.do p.t.jen-do-time { text-wrap: pretty; }
/* Jen, 2026-10-06 (Q8): the "*After deductible" note sits under the dental table in smaller type. */
.jen-dental-note { font-size: var(--fs-xs); margin-top: 6px; }
/* Jen, 2026-10-06 (P5): "Can we clean these tables up a bit. They are off and not in line down their respective columns.
   Help differentiate between them too." Plan tables (Healthy Savings / Traditional): equal value columns, every value
   centred so split and spanning cells line up, solid plan headings, and a white gutter between the two plans. */
.benefit-features table:has(.feature-plan-heading) { table-layout:fixed; min-width:640px; }
.benefit-features table:has(.feature-plan-heading) thead tr:first-child th[rowspan] { width:28%; }
.benefit-features table:has(.feature-plan-heading) :is(td,thead th:not([rowspan])) { text-align:center; }
.benefit-features thead .feature-plan-heading.hs { background:var(--good); color:var(--white); }
.benefit-features thead .feature-plan-heading.tr { background:var(--tr); color:var(--white); }
.benefit-features table:has(.feature-plan-heading) :is(:is(th,td).hs + :is(th,td).hs, :is(th,td).tr + :is(th,td).tr) { border-left:1px solid var(--white); }
.benefit-features table:has(.feature-plan-heading) :is(th,td).hs + :is(th,td).tr { border-left:6px solid var(--white); }
.benefit-features table:has(.feature-plan-heading) tbody tr + tr :is(th,td) { border-top:1px solid var(--white); }
.feature-mapped { margin-block:28px; }
.feature-mapped h2 { margin-bottom:16px; }
@media(min-width:901px){.hero.eric-video-hero .hero-t{grid-column:1/span 7}.hero.eric-video-hero .hero-video{grid-column:8/span 5}}
@media print {
 body:has(.benefit-features){background:white}
 body:has(.benefit-features) .emp-bar {display:none!important}
 .benefit-features .feature-mapped:not([data-feature-kind="retirement"]):not([data-feature-kind="life insurance"]) {break-inside:avoid}
 .benefit-features .feature-mapped h2 {break-after:avoid-page}
}
/* Video captions inherit readable hero contrast; review-note colors remain separate. */
.eric-video-hero .hero-video figcaption {color:var(--white)}
@media print {
 .benefit-features [data-feature-kind="retirement"] [data-feature-plan]:not([data-feature-plan^="ret-401k"]) {break-inside:avoid}
}

/* October 5 call C5: explicit review tools, absent from launch HTML/JS. */
.review-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:10px 16px; background:var(--admin-bg); color:var(--admin-ink); font-size:var(--fs-s); }
.review-tools label { font-weight:700; }
.review-tools select { flex:1 1 260px; min-width:0; max-width:100%; min-height:44px; font:inherit; color:var(--ink); background:var(--bone); }
.review-tools button { min-height:44px; padding:8px 12px; font:inherit; color:inherit; background:transparent; border:1px solid currentColor; cursor:pointer; }
.review-tools small { flex-basis:100%; }

.call-account-availability.eric-plan-tr { background:var(--tr-tint)!important; color:var(--tr); }
.call-account-availability.eric-plan-tr .sec-q { color:var(--tr); }
.call-account-availability.eric-plan-hs { background:var(--good-tint)!important; color:var(--good); }
.call-account-availability.eric-plan-hs .sec-q { color:var(--good); }
/* Jen, Oct 5 (S01): "call out the sections a little better. It seems to get mixed in with the contacts." Each group heading is a navy bar. */
.contact-group > h2.sec-q { margin: 0 0 16px; padding: 10px 16px; background: var(--navy); color: var(--white); border-radius: var(--r); font-size: var(--fs-l); }
.contact-group + .contact-group { margin-top: 32px; }
/* Jen, Oct 5 (S22): "the amounts are way below everything else. Seems like it should be in a box or highlighted." */
.eric-election { display: inline-block; padding: 12px 16px; border-radius: var(--r); background: var(--white); color: var(--navy); }
.hero.page .eric-election { color: var(--navy); }
/* Jen, Oct 5 (S24): the health plan notices as page text */
.notice-title { margin: 8px 0 20px; color: var(--navy); }
.notice .notice-list { margin: 8px 0 16px 1.25em; padding: 0; }
.notice .notice-list li { margin: 6px 0; max-width: 44rem; }
.notice-sender { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin-top: 16px; }
.notice-sender dt { font-weight: 650; }
.notice-sender dd { margin: 0; }
.notice ol.notice-list { list-style: decimal; } .notice ul.notice-list { list-style: disc; }