@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/inter-latin.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: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/inter-latin-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;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-latin.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: "Source Serif 4";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-latin-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 {
  color-scheme: light;
  /* Radios and checkboxes are native controls -- the stylesheet never draws
     them. Without this they render in the browser's own accent, which is blue
     and sits outside the palette entirely. One line puts every checked control
     on brand. */
  accent-color: var(--primary);
  --bg: #fbf8f1;
  --surface: #ffffff;
  --surface-strong: #f2eadb;
  --text: #19312d;
  --muted: #5c6b66;
  --primary: #0f766e;
  --primary-dark: #115e59;
  --accent: #c77d2f;
  /* Accent carried down to text weight. --accent is 3.28:1 on white and fails
     AA, so it is safe for rules, offset blocks and decoration but never for
     words. This is the same hue taken far enough to clear AA on all three
     grounds: 6.78:1 on surface, 6.40:1 on bg, 5.67:1 on surface-strong.
     Reach for this any time an accent-coloured element carries text. */
  --accent-strong: #8a4b12;
  --ring: #f59e0b;
  /* Error states, invalid input, and destructive actions. A deep brick that
     sits with the warm palette rather than a default alert red, and clears AA
     on all three grounds: 7.07:1 on surface, 6.67:1 on bg, 5.92:1 on
     surface-strong. Colour never carries the meaning alone -- the message and
     an icon do that.

     NOT for data semantics. A worsening measurement is not an error, so the
     trend scale below owns that meaning instead. Do not reach for --danger
     there. */
  --danger: #9c3626;
  /* Trend and risk direction, for data rather than UI state. Used by
     .healthspan-trend for improved / same / worsened and for the Lp(a) risk
     bands. Deliberately separate from --danger: a worsening number is a
     measurement, not a fault. All three clear AA on every light ground, with
     --surface-strong the worst case at 5.96 / 5.73 / 6.95. Direction is never
     carried by colour alone -- the cell text states it. */
  --trend-good: #166534;
  --trend-caution: #854d0e;
  --trend-bad: #991b1b;
  /* --danger is tuned for light grounds and collapses to 1.96:1 on --text, so
     an inverted surface cannot reuse it -- the error state would simply vanish.
     This is the same hue carried up rather than down: 5.21:1 on --text, and
     3.92:1 as a border against the translucent on-dark field fill. Only for
     inverted grounds; on white it is far too light. */
  --danger-on-dark: #e8836f;
  --shadow: 0 24px 70px rgba(25, 49, 45, 0.12);
  /* Offset hard shadow for the pieces that should read as printed matter rather
     than floating cards. Paired with a solid border, never with --shadow. */
  --shadow-hard: 0.55rem 0.55rem 0 rgba(25, 49, 45, 0.9);
  --radius: 1.4rem;
  /* Rules. Hairline dividers and card edges, all the same forest at three
     weights. Before this the stylesheet had ten different alphas between 0.08
     and 0.2 across 105 borders -- 0.1 vs 0.11 vs 0.12 vs 0.13 vs 0.14 are not
     distinguishable on a 1px line, they were just never reconciled.

     NOT for control boundaries. An input border has to clear 3:1 under WCAG
     1.4.11 and uses rgba(25, 49, 45, 0.53) directly; a rule is decorative and
     has no contrast obligation. */
  --rule-subtle: rgba(25, 49, 45, 0.1);
  --rule: rgba(25, 49, 45, 0.14);
  --rule-strong: rgba(25, 49, 45, 0.18);
  /* Spacing ramp. Every padding, margin and gap should come from here.
     80px (--space-3xl) exists because .section padding-block is 5rem on 131
     elements site-wide -- the phase 1 ramp omitted it, which would have cost
     every section 20% of its vertical rhythm. 40px is deliberately absent:
     its five uses snap up to --space-xl.

     Values below 4px are NOT on the ramp and are left as literals. A 0.1rem
     nudge under a link is optical correction, not spacing rhythm, and the
     ramp has no business quantising it. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 5rem;
  --space-4xl: 6rem;
  --space-gutter: 10rem;
  /* Fluid panel padding. These are the card paddings the stylesheet actually
     uses, and they stay fluid for the same reason the top of the type scale
     does.

     xs deliberately uses a shallower slope than the other three. Its consumers
     are compact cards sitting several-across in a dense grid, where a 4vw ramp
     reaches full padding by tablet width and makes them read as full panels.
     Snapping them to --space-panel-sm instead was measured at +12.32px per side
     at 768px, which was too heavy for a six-card directory. */
  --space-panel-xs: clamp(1.15rem, 2.2vw, 1.75rem);
  --space-panel-sm: clamp(1.2rem, 4vw, 2rem);
  --space-panel-md: clamp(1.4rem, 4vw, 2.4rem);
  --space-panel-lg: clamp(1.5rem, 4vw, 3rem);
  /* Type scale. Eight steps, and the only font sizes the stylesheet should
     use. The top four are fluid because this site's headings genuinely scale
     with the viewport -- collapsing them to fixed values would shrink hero
     type badly on a phone. Lead and below are fixed: body copy should not
     move. The max of each fluid step is the value recorded in the Figma
     library, so Figma represents the desktop end of each step. */
  --text-display: clamp(2.55rem, 6vw, 4.4rem);
  --text-title: clamp(1.9rem, 4.2vw, 3.4rem);
  --text-heading: clamp(1.5rem, 3vw, 2.4rem);
  --text-subhead: clamp(1.25rem, 2.2vw, 1.6rem);
  --text-lead: 1.2rem;
  --text-body: 1rem;
  --text-small: 0.9rem;
  --text-micro: 0.75rem;
  /* Motion. Decelerating curve for anything entering the page, gentle overshoot
     for anything responding to a pointer. Durations are named by role so the
     ramp stays consistent as more components adopt them. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --dur-fast: 220ms;
  --dur-mid: 480ms;
  --dur-slow: 780ms;
  --stagger: 85ms;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(15, 118, 110, 0.14), transparent 30rem),
    linear-gradient(180deg, #fbf8f1 0%, #f7f3ea 100%);
  color: var(--text);
  line-height: 1.6;
}

a {
  color: var(--primary-dark);
  font-weight: 700;
}

/* Left alone, <small> takes the UA size (13.33px) and becomes the only type on
   the site off the scale. Lowest specificity, so any class rule still wins. */
small {
  font-size: var(--text-small);
}

a:hover {
  color: #0b4f4a;
}

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 20;
  transform: translateY(-200%);
  background: var(--text);
  color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 999px;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--rule-subtle);
  background: rgba(251, 248, 241, 0.92);
  backdrop-filter: blur(16px);
}

.nav,
.section,
.site-footer {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text);
  text-decoration: none;
}

.brand small {
  display: block;
  color: var(--muted);
  font-weight: 600;
}

.brand-mark {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: white;
  object-fit: contain;
  padding: var(--space-3xs);
  box-shadow: 0 10px 24px rgba(25, 49, 45, 0.12);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav-links a {
  text-decoration: none;
}

.nav-links a[aria-current="page"] {
  color: var(--primary-dark);
  font-weight: 800;
}

.nav-toggle {
  display: none;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: white;
  color: var(--text);
  padding: var(--space-xs) var(--space-sm);
  font: inherit;
  font-weight: 800;
}

.section {
  padding-block: var(--space-3xl);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
  gap: var(--space-lg);
  align-items: center;
  min-height: calc(100svh - 76px);
}

.page-hero {
  padding-block: clamp(4rem, 10vw, 7rem) clamp(2rem, 6vw, 4rem);
}

.page-hero h1 {
  max-width: 14ch;
}

.page-hero .section-heading {
  margin-bottom: 0;
}

.library-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.72fr);
  gap: var(--space-panel-lg);
  align-items: end;
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.library-hero h1 {
  max-width: 12ch;
}

.library-hero-copy p {
  max-width: 58ch;
  color: var(--muted);
  font-size: var(--text-lead);
}

.library-hero-panel {
  border: 1px solid var(--rule-subtle);
  border-radius: var(--radius);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(242, 234, 219, 0.84)),
    var(--surface);
  box-shadow: var(--shadow);
  padding: var(--space-panel-sm);
}

.library-hero-panel ul {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.library-hero-panel li {
  border-top: 1px solid var(--rule-subtle);
  padding-top: var(--space-sm);
}

.library-hero-panel li:first-child {
  border-top: 0;
  padding-top: 0;
}

.library-hero-panel strong,
.library-hero-panel span {
  display: block;
}

.library-hero-panel span {
  margin-top: var(--space-3xs);
  color: var(--muted);
}

.library-pathways {
  padding-block: var(--space-lg) var(--space-xl);
}

.library-visual-guide {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(22rem, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  border-block: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.library-visual-guide h2 {
  max-width: 13ch;
}

.library-visual-guide > div > p:not(.eyebrow) {
  max-width: 56ch;
  color: var(--muted);
}

.library-visual-guide ol,
.library-wheel-domain-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.library-visual-guide li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: center;
  min-height: 4rem;
  border-top: 1px solid var(--rule);
  padding: var(--space-xs);
  font-weight: 800;
}

.library-visual-guide li:nth-child(-n + 2) {
  border-top: 0;
}

.library-visual-guide li span {
  color: var(--accent);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--text-subhead);
}

.library-visual-guide-wheel {
  border-top: 0;
}

.library-wheel-domain-list li span {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #0f766e;
}

.library-wheel-domain-list li:nth-child(2) span {
  background: #4f7d68;
}

.library-wheel-domain-list li:nth-child(3) span {
  background: #b85445;
}

.library-wheel-domain-list li:nth-child(4) span {
  background: #c88a2d;
}

.library-wheel-domain-list li:nth-child(5) span {
  background: #416d88;
}

.library-wheel-domain-list li:nth-child(6) span {
  background: #725b78;
}

.pathway-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
}

.pathway-card {
  display: grid;
  gap: var(--space-xs);
  min-height: 12rem;
  border: 1px solid var(--rule-subtle);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.76);
  color: var(--text);
  padding: var(--space-sm);
  text-decoration: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.pathway-card:hover {
  border-color: rgba(15, 118, 110, 0.36);
  box-shadow: 0 18px 40px rgba(25, 49, 45, 0.1);
  color: var(--text);
  transform: translateY(-2px);
}

.pathway-card span {
  color: var(--accent-strong);
  font-size: var(--text-micro);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pathway-card strong {
  align-self: end;
  font-size: var(--text-body);
  line-height: 1.25;
}

.featured-post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: end;
  margin-bottom: var(--space-xl);
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(199, 125, 47, 0.1)),
    rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 4vw, 2.5rem);
}

.featured-post h2 {
  max-width: 16ch;
}

.featured-post p {
  max-width: 62ch;
  color: var(--muted);
}

.featured-post-with-image {
  grid-template-columns: minmax(14rem, 0.65fr) minmax(0, 1fr);
  align-items: center;
}

.featured-post-copy {
  display: grid;
  justify-items: start;
  gap: var(--space-xs);
}

.featured-post-media {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
}

.featured-post-media img {
  width: 100%;
  max-height: 28rem;
  object-fit: contain;
}

.library-list-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(16rem, 0.3fr);
  gap: var(--space-sm);
  align-items: end;
}

.library-list-heading p {
  grid-column: 1 / -1;
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  gap: var(--space-lg);
  align-items: start;
}

.about-layout p {
  max-width: 72ch;
  color: var(--muted);
}

.about-card {
  display: grid;
  gap: var(--space-sm);
  border: 1px solid var(--rule-subtle);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
  padding: var(--space-panel-sm);
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.72fr);
  gap: var(--space-panel-lg);
  align-items: end;
  padding-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.about-hero h1 {
  max-width: 14ch;
}

.about-hero-copy p {
  max-width: 58ch;
  color: var(--muted);
  font-size: var(--text-lead);
}

.about-hero-card,
.about-credential-card,
.about-focus-card,
.about-standards-panel {
  border: 1px solid var(--rule-subtle);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow);
}

.about-hero-card,
.about-credential-card,
.about-standards-panel {
  padding: var(--space-panel-sm);
}

.about-stat-grid {
  display: grid;
  gap: var(--space-sm);
}

.about-stat-grid div {
  border-top: 1px solid var(--rule-subtle);
  padding-top: var(--space-sm);
}

.about-stat-grid div:first-child {
  border-top: 0;
  padding-top: 0;
}

.about-stat-grid strong,
.about-stat-grid span {
  display: block;
}

.about-stat-grid span {
  margin-top: var(--space-3xs);
  color: var(--muted);
}

.about-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.75fr);
  gap: var(--space-panel-lg);
  align-items: start;
}

.about-copy {
  display: grid;
  gap: var(--space-sm);
}

.about-copy p {
  max-width: 72ch;
  color: var(--muted);
}

.about-credential-card {
  position: sticky;
  top: 96px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(242, 234, 219, 0.86)),
    var(--surface);
}

.credential-list {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.credential-list li {
  border-left: 3px solid rgba(15, 118, 110, 0.4);
  padding-left: var(--space-xs);
  color: var(--muted);
  font-weight: 700;
}

.about-focus {
  padding-block: var(--space-xl) var(--space-3xl);
}

.about-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
}

.about-focus-card {
  display: grid;
  gap: var(--space-xs);
  min-height: 16rem;
  padding: var(--space-md);
}

.about-focus-card span {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: var(--primary-dark);
  font-weight: 900;
}

.about-focus-card p {
  color: var(--muted);
}

.about-standards {
  padding-block: var(--space-xl);
}

.about-standards-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
  gap: var(--space-panel-lg);
  align-items: start;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.92), rgba(17, 94, 89, 0.95)),
    var(--primary);
  color: white;
}

.about-standards-panel .eyebrow,
.about-standards-panel p {
  color: rgba(255, 255, 255, 0.9);
}

.about-principles {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-principles li {
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.12);
  padding: var(--space-sm);
}

.about-principles strong,
.about-principles span {
  display: block;
}

.about-principles span {
  margin-top: var(--space-3xs);
  color: rgba(255, 255, 255, 0.86);
}

.about-links-section {
  padding-block: var(--space-xl) var(--space-3xl);
}

.about-profile-links {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-links {
  display: grid;
  gap: var(--space-xs);
}

.profile-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 0.8rem;
  background: rgba(15, 118, 110, 0.07);
  padding: var(--space-xs) var(--space-sm);
  text-decoration: none;
}

.profile-links a:hover {
  background: rgba(15, 118, 110, 0.11);
}

.library-grid .calculator-card {
  min-height: 14rem;
}

.coaching-grid .service-card {
  gap: var(--space-sm);
}

.service-price {
  margin: 0;
  color: var(--primary-dark);
  font-size: var(--text-heading);
  font-weight: 900;
  line-height: 1;
}

.numbered-list {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-sm) 0 0;
  padding-left: var(--space-md);
}

.numbered-list li {
  padding-left: var(--space-3xs);
}

.newsletter-section {
  padding-block: var(--space-xl);
}

.newsletter-panel,
.newsletter-result-callout {
  border: 1px solid var(--rule-subtle);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow);
}

.newsletter-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(18rem, 1.05fr);
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-panel-md);
}

.newsletter-panel p {
  color: var(--muted);
}

.newsletter-form {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}

.newsletter-form-intro {
  display: grid;
  gap: var(--space-2xs);
}

.newsletter-form-intro h3,
.newsletter-form-intro p,
.newsletter-status {
  margin: 0;
}

.newsletter-form .button {
  width: 100%;
  min-height: 3rem;
}

.newsletter-consent {
  align-items: flex-start;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.45;
}

.newsletter-consent input {
  margin-top: 0.2rem;
}

.newsletter-consent > span {
  flex: 1;
  min-width: 0;
}

.newsletter-status {
  min-height: 1.5rem;
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.newsletter-status-success {
  color: #17603a;
}

.newsletter-status-error {
  color: #9b2c2c;
}

.newsletter-form .honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.newsletter-inline-form {
  margin-top: var(--space-sm);
}

.newsletter-result-callout {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  color: var(--text);
}

.site-guide-section {
  padding-block: var(--space-lg) var(--space-xl);
}

.site-guide-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1.15fr);
  gap: var(--space-lg);
  align-items: start;
  border: 1px solid var(--rule-subtle);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow);
  padding: var(--space-panel-md);
}

.site-guide-copy p {
  color: var(--muted);
}

.site-guide-form {
  display: grid;
  gap: var(--space-xs);
}

.site-guide-form textarea {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  border: 1px solid var(--rule-strong);
  border-radius: 1rem;
  background: white;
  color: var(--text);
  padding: var(--space-sm) var(--space-sm);
  font: inherit;
}

.site-guide-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.site-guide-actions span {
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.site-guide-answer {
  min-height: 5.5rem;
  border-left: 4px solid var(--primary);
  border-radius: 1rem;
  background: var(--surface-strong);
  padding: var(--space-sm);
}

.site-guide-answer:empty {
  display: none;
}

.site-guide-answer p {
  margin: 0;
  color: var(--text);
}

.site-guide-answer[data-error="true"] {
  border-left-color: var(--danger);
}

.site-guide-sources {
  display: grid;
  gap: var(--space-3xs);
  margin: var(--space-xs) 0 0;
  padding-left: var(--space-sm);
}

.paid-access-section {
  padding-block: var(--space-lg) var(--space-2xl);
}

.paid-access-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
  gap: var(--space-lg);
  align-items: start;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow);
  padding: var(--space-panel-md);
}

.paid-access-panel h2 {
  margin-top: 0;
}

.paid-access-panel .eyebrow {
  color: var(--accent-strong);
}

.paid-access-benefits ul {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding-left: var(--space-sm);
}

.paid-access-benefits .button {
  justify-self: start;
}

.paid-access-status {
  min-height: 1.4rem;
  margin: 0;
  color: var(--danger);
  font-weight: 700;
}

.member-recovery-form {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}

.member-recovery-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.member-recovery-controls input {
  flex: 1 1 13rem;
  min-height: 2.6rem;
}

.paid-member-actions {
  /* Was var(--content-width), never defined, so no max-width applied at all
     and this row ran the full viewport width. 1120px is the content width the
     rest of the site uses via min(1120px, calc(100% - 2rem)). */
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);
  text-align: right;
}

.paid-member-actions a {
  color: var(--muted);
  font-weight: 700;
}

.paid-member-actions .button {
  margin-right: var(--space-sm);
}

.member-workspace-hero {
  min-height: auto;
  padding-block: var(--space-lg) var(--space-md);
}

.member-workspace-hero h1 {
  max-width: 22ch;
  font-size: var(--text-title);
}

.member-workspace-hero .section-heading {
  max-width: 58rem;
}

.member-living-plan {
  border-block: 1px solid var(--rule-subtle);
  background: rgba(237, 246, 242, 0.58);
}

.member-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-md);
  border-block: 1px solid var(--rule);
}

.member-status-grid > div {
  display: grid;
  min-width: 0;
  gap: var(--space-3xs);
  padding: var(--space-sm);
}

.member-status-grid > div + div {
  border-left: 1px solid var(--rule);
}

.member-status-grid span {
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 800;
  text-transform: uppercase;
}

.member-status-grid strong {
  /* Was var(--ink) and var(--serif). Neither token has ever existed, so both
     declarations were invalid and fell back to inheritance. --ink happened to
     inherit the same colour --text would have given, but --serif inherited
     Inter, so these values rendered sans while the design clearly intended the
     heading serif. */
  color: var(--text);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--text-subhead);
  line-height: 1.15;
}

.member-status-grid small {
  color: var(--muted);
  line-height: 1.45;
}

.member-review-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
  margin-top: var(--space-md);
  border-bottom: 1px solid var(--rule);
}

.member-review-tool,
.member-history {
  min-width: 0;
  padding: var(--space-md) 0;
}

.member-review-tool {
  padding-right: var(--space-md);
}

.member-history {
  padding-left: var(--space-md);
  border-left: 1px solid var(--rule);
}

.member-review-tool h3,
.member-review-tool p,
.member-history h3,
.member-history p {
  margin-top: 0;
}

.member-review-tool > label {
  display: grid;
  gap: var(--space-2xs);
  margin: var(--space-sm) 0;
  font-weight: 800;
}

.member-history-heading,
.member-history-footer,
.member-save-check-in,
.member-save-actions,
.member-update-center,
.member-update-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.member-history-heading,
.member-update-center {
  justify-content: space-between;
}

.member-history-heading > div:first-child,
.member-update-center > div:first-child {
  flex: 1 1 20rem;
}

.member-history-actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.member-import-label {
  cursor: pointer;
}

#member-import-history {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.member-comparison {
  margin-top: var(--space-sm);
  padding-block: var(--space-sm);
  border-block: 1px solid var(--rule-subtle);
}

.member-comparison h4 {
  margin: 0 0 var(--space-xs);
  color: var(--muted);
  font-size: var(--text-small);
}

.member-comparison-empty {
  color: var(--muted);
}

.member-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.member-snapshot-list {
  display: grid;
  max-height: 21rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.member-snapshot-list li {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--rule-subtle);
}

.member-snapshot-list li > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs);
}

.member-snapshot-list span,
.member-snapshot-list p {
  color: var(--muted);
}

.member-snapshot-list p {
  margin: 0;
}

.member-history-footer {
  justify-content: space-between;
  padding-top: var(--space-sm);
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  cursor: pointer;
}

.text-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.member-update-center {
  margin-top: var(--space-md);
  padding: var(--space-sm) 0;
}

.member-update-center h3,
.member-update-center p {
  margin: 0;
}

.member-update-center p:not(.eyebrow) {
  margin-top: var(--space-2xs);
  color: var(--muted);
}

.member-update-links {
  align-items: flex-start;
  flex-direction: column;
}

.member-update-links a {
  font-weight: 800;
}

.member-save-check-in {
  justify-content: space-between;
  margin-top: var(--space-md);
  padding: var(--space-sm) 0;
  border-block: 1px solid var(--rule);
}

.member-save-check-in > div:first-child {
  flex: 1 1 24rem;
}

.member-save-check-in h3,
.member-save-check-in p {
  margin: 0;
}

.member-save-check-in p:not(.eyebrow) {
  margin-top: var(--space-2xs);
  color: var(--muted);
}

.member-save-actions {
  flex: 1 1 20rem;
  justify-content: flex-end;
}

.member-save-actions label {
  display: grid;
  flex: 1 1 15rem;
  gap: var(--space-2xs);
  font-weight: 800;
}

.member-save-actions .paid-access-status {
  flex-basis: 100%;
  text-align: right;
}

.member-annual-report {
  background: white;
}

/* The annual report is the one thing on this site that leaves the screen. The
   site header is display:none in print, so without this the printed sheet says
   nothing about where it came from or when it was made. */
.report-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--rule);
}

.report-brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-weight: 800;
}

.report-domain,
.report-printed {
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--muted);
}

/* The report body is a plain div with no gap, so its children sit on whatever
   margins they happen to carry. Everything lands on 16px except the heading,
   which the h1-h3 { margin: 0 } reset leaves flush against the metric cards
   above and against its own list below. Measured: 0 and 0, in a document that
   is otherwise a consistent 16px rhythm.

   Not print-scoped. This is structure rather than a print concern, and the
   section only ever renders in print anyway. */
.member-annual-report h3 {
  margin-top: var(--space-md);
  margin-bottom: var(--space-2xs);
}

.admin-hero {
  padding-bottom: var(--space-lg);
}

.admin-copilot-section {
  padding-block: var(--space-lg) var(--space-3xl);
}

.admin-copilot-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  gap: var(--space-md);
  align-items: start;
}

.admin-copilot-form,
.admin-copilot-output {
  display: grid;
  gap: var(--space-sm);
  border: 1px solid var(--rule-subtle);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow);
  padding: var(--space-panel-sm);
}

.admin-token-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xs);
  align-items: end;
}

.admin-copilot-form textarea {
  resize: vertical;
}

.admin-copilot-output {
  position: sticky;
  top: 96px;
  min-height: 32rem;
  align-content: start;
}

.admin-copilot-output p {
  color: var(--muted);
}

#admin-copilot-output {
  display: grid;
  gap: var(--space-sm);
}

#admin-copilot-output pre {
  margin: 0;
  white-space: pre-wrap;
  color: var(--text);
  font: inherit;
}

#admin-copilot-output[data-error="true"] {
  border-left: 4px solid var(--danger);
  border-radius: 1rem;
  background: #fff7f7;
  padding: var(--space-sm);
}

.admin-source-list {
  display: grid;
  gap: var(--space-3xs);
  margin: 0;
  padding-left: var(--space-sm);
}

.newsletter-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: end center;
  padding: var(--space-sm);
}

.newsletter-modal[hidden] {
  display: none;
}

.newsletter-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(25, 49, 45, 0.38);
}

.newsletter-modal-card {
  position: relative;
  z-index: 1;
  width: min(36rem, 100%);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow);
  padding: var(--space-panel-sm);
}

.newsletter-modal-card p {
  color: var(--muted);
}

.newsletter-close {
  float: right;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: white;
  color: var(--text);
  padding: var(--space-2xs) var(--space-xs);
  font: inherit;
  font-weight: 800;
}

.eyebrow,
.card-kicker {
  margin: 0 0 var(--space-xs);
  color: var(--accent);
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.08;
}

h1,
h2 {
  font-family: "Source Serif 4", Georgia, serif;
}

h1 {
  max-width: 13ch;
  font-size: var(--text-display);
  letter-spacing: 0;
}

h2 {
  font-size: var(--text-title);
  letter-spacing: 0;
}

h3 {
  font-size: var(--text-subhead);
}

.hero-copy,
.section-heading p,
.quick-check > div > p,
.healthcare-estimator > .section-heading p,
.savings-calculator > .section-heading p,
.healthspan-checkup > .section-heading p,
.plan-card p {
  max-width: 66ch;
  color: var(--muted);
  font-size: var(--text-lead);
}

.hero-actions,
.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.22);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
}

.button:hover {
  background: var(--primary-dark);
  color: white;
}

.button-secondary {
  border: 1px solid var(--rule-strong);
  background: white;
  color: var(--primary-dark);
  box-shadow: none;
}

.button-secondary:hover {
  background: var(--surface-strong);
  color: var(--primary-dark);
}

.button-small {
  padding: var(--space-2xs) var(--space-sm);
  color: white !important;
}

.button-secondary.button-small {
  color: var(--primary-dark) !important;
}

.trust-list {
  padding: 0;
  list-style: none;
}

.trust-list li {
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  padding: var(--space-2xs) var(--space-xs);
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.hero-card,
.intro-grid article,
.calculator-card,
.quick-check,
.plan-card,
.estimator-form,
.estimator-results,
.savings-form,
.savings-results,
.acb-calculator,
.acb-picker,
.acb-results,
.wealthspan-form,
.wealthspan-results,
.healthspan-form,
.healthspan-results,
.review-form,
.review-output {
  border: 1px solid var(--rule-subtle);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
}

.hero-card {
  padding: var(--space-panel-md);
}

.hero-card p {
  color: var(--muted);
}

.score-preview {
  position: relative;
  height: 1rem;
  margin-block: var(--space-lg) var(--space-sm);
  overflow: hidden;
  border-radius: 999px;
  background: #d9e7e3;
}

.score-preview span {
  display: block;
  width: var(--score);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #16a34a);
}

.intro-grid,
.calculator-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.intro-grid article,
.calculator-card {
  padding: var(--space-md);
}

.icon {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  margin-bottom: var(--space-sm);
  place-items: center;
  border-radius: 0.9rem;
  background: var(--surface-strong);
  color: var(--primary-dark);
  font-weight: 900;
}

.calculators {
  border-block: 1px solid var(--rule-subtle);
}

.section-heading {
  margin-bottom: var(--space-lg);
}

.calculator-grid {
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}

.calculator-card {
  display: flex;
  flex-direction: column;
  min-height: 16rem;
}

.calculator-card p {
  color: var(--muted);
}

.calculator-card a {
  margin-top: auto;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-sm);
}

.post-card {
  display: flex;
  flex-direction: column;
  min-height: 20rem;
  overflow: hidden;
  border: 1px solid var(--rule-subtle);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 44px rgba(25, 49, 45, 0.08);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.post-card:hover {
  border-color: rgba(15, 118, 110, 0.28);
  box-shadow: 0 22px 48px rgba(25, 49, 45, 0.12);
  transform: translateY(-2px);
}

.post-card-media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--rule-subtle);
  background: var(--surface-strong);
}

.post-card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.post-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-md);
}

.post-card-topline {
  display: grid;
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
}

.post-card h3 {
  font-size: var(--text-subhead);
}

.post-card p {
  color: var(--muted);
}

.post-card .post-meta {
  color: var(--primary-dark);
  font-size: var(--text-small);
  font-weight: 800;
}

.post-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: auto;
  border-bottom: 2px solid rgba(15, 118, 110, 0.24);
  padding-top: var(--space-sm);
  padding-bottom: 0.1rem;
  text-decoration: none;
}

.post-link:hover {
  border-bottom-color: currentColor;
}

.article-page {
  display: grid;
  gap: var(--space-lg);
  max-width: 880px;
}

.article-header {
  display: grid;
  gap: var(--space-sm);
}

.article-header h1 {
  max-width: 18ch;
}

.article-header p {
  max-width: 72ch;
  color: var(--muted);
  font-size: var(--text-lead);
}

.article-header .post-meta {
  margin: 0;
  color: var(--primary-dark);
  font-weight: 800;
}

.article-body {
  display: grid;
  gap: var(--space-sm);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-lg);
}

.article-body h2,
.article-body h3 {
  margin-top: var(--space-md);
}

.article-body h2 {
  font-size: var(--text-heading);
}

.article-body p,
.article-body li {
  color: var(--text);
  font-size: var(--text-body);
}

.article-body ul,
.article-body ol {
  display: grid;
  gap: var(--space-2xs);
  margin-block: var(--space-3xs);
  padding-left: var(--space-md);
}

.article-body a {
  overflow-wrap: anywhere;
}

.article-figure {
  display: grid;
  gap: var(--space-xs);
  justify-items: center;
  margin: var(--space-md) 0;
}

.article-figure img {
  width: 100%;
  height: auto;
  max-height: 72rem;
  object-fit: contain;
}

.article-figure figcaption {
  width: min(100%, 72ch);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.5;
  text-align: center;
}

.article-footer {
  display: grid;
  gap: var(--space-xs);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-md);
}

.article-footer p {
  margin: 0;
  color: var(--muted);
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 0.38fr) minmax(0, 0.62fr);
  gap: var(--space-lg);
  align-items: start;
}

.legal-summary,
.legal-content {
  border: 1px solid var(--rule-subtle);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
  padding: var(--space-panel-sm);
}

.legal-summary {
  position: sticky;
  top: 96px;
}

.legal-summary .assumption-list {
  margin: 0;
  padding-left: var(--space-sm);
}

.legal-summary li {
  margin-block: var(--space-2xs);
  color: var(--text);
  font-weight: 800;
}

.legal-content {
  display: grid;
  gap: var(--space-sm);
}

.legal-content h2 {
  margin-top: var(--space-md);
  font-size: var(--text-heading);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  color: var(--text);
}

.legal-content ul {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding-left: var(--space-md);
}

.quick-check {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-lg);
  padding: var(--space-panel-sm);
}

.age-well-score {
  grid-template-columns: minmax(16rem, 0.65fr) minmax(0, 1.35fr);
  align-items: start;
  scroll-margin-top: 96px;
}

.age-well-domain-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

.age-well-domain-list span {
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(242, 234, 219, 0.72);
  color: var(--primary-dark);
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--text-small);
  font-weight: 800;
}

.checkup-form {
  display: grid;
  gap: var(--space-sm);
}

.age-well-score .checkup-form fieldset {
  display: grid;
}

.age-well-score .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

label,
legend {
  color: var(--text);
  font-weight: 800;
}

input,
select,
textarea {
  display: block;
  width: 100%;
  margin-top: var(--space-3xs);
  /* 0.53, not the 0.24 this used to be. A field's fill matches whatever it
     sits on, so the border is the only thing identifying it as a control, and
     WCAG 1.4.11 asks 3:1 of that. 0.24 gave 1.60:1 on white. 0.53 is set by
     the worst ground rather than the best: 3.23:1 on --surface, 3.17:1 on
     --bg, 3.07:1 on --surface-strong, which forms sit on via .advanced-panel.
     axe does not flag this, so it went unnoticed until the on-dark work
     forced the same calculation on the inverted ground. */
  border: 1px solid rgba(25, 49, 45, 0.53);
  border-radius: 0.85rem;
  background: white;
  color: var(--text);
  padding: var(--space-xs);
  font: inherit;
}

input {
  min-height: 3rem;
}

select {
  min-height: 3rem;
}

.field-help {
  display: block;
  margin-top: var(--space-2xs);
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.45;
}

/* ---- Forms on an inverted ground ----------------------------------------
   .on-dark marks any container whose background is --text. Every colour below
   was measured against that ground, because most of the light palette dies on
   it: --muted is 2.47:1 and --danger is 1.96:1.

   Fill and border follow the inverted-card pattern from
   .age-well-results .metric-card, with one deliberate difference. That card
   uses a 16% white border, which is fine for a decorative edge but only
   1.25:1 against the fill -- under the 3:1 WCAG 1.4.11 asks of a control
   boundary. A field border is an affordance, not decoration, so it goes to
   48% (3.31:1).

   Focus needs no override here: --ring is 6.44:1 on --text, so the global
   :focus-visible ring already carries on an inverted ground. */
.on-dark label,
.on-dark legend {
  color: var(--surface);
}

.on-dark input,
.on-dark select,
.on-dark textarea {
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.09);
  color: var(--surface);
}

.on-dark input::placeholder,
.on-dark textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.on-dark .field-help {
  color: rgba(255, 255, 255, 0.78);
}

.on-dark input:disabled,
.on-dark select:disabled,
.on-dark textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---- Invalid input ------------------------------------------------------
   The first rules in the stylesheet to consume --danger for validation.
   Colour never carries the meaning alone -- the help text repeats it, and the
   control is marked with aria-invalid so it reaches assistive tech too. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

[aria-invalid="true"] ~ .field-help {
  color: var(--danger);
}

.on-dark input[aria-invalid="true"],
.on-dark select[aria-invalid="true"],
.on-dark textarea[aria-invalid="true"] {
  border-color: var(--danger-on-dark);
}

.on-dark [aria-invalid="true"] ~ .field-help {
  color: var(--danger-on-dark);
}

.field-action-button {
  align-self: flex-start;
  min-height: 2.4rem;
  margin-top: var(--space-xs);
  border-radius: 0.65rem;
  padding: var(--space-2xs) var(--space-sm);
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: 1rem;
  padding: var(--space-sm);
}

.radio-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--muted);
}

.radio-row input,
.check-row input {
  width: auto;
  min-height: auto;
  margin: 0;
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--muted);
}

.toggle-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.toggle-row input {
  width: auto;
  min-height: auto;
  margin: 0;
}

.results {
  display: grid;
  gap: var(--space-2xs);
  grid-column: 1 / -1;
  border-radius: 1rem;
  background: var(--text);
  color: white;
  padding: var(--space-sm);
}

.age-well-results {
  gap: var(--space-sm);
}

.age-well-domain-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.age-well-results .metric-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.09);
}

.results span,
.results li {
  color: rgba(255, 255, 255, 0.82);
}

.results ul {
  margin: var(--space-2xs) 0 0;
  padding-left: var(--space-sm);
}

.framework-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  padding: 0;
  list-style: none;
}

.framework-list li {
  border-left: 4px solid var(--primary);
  background: rgba(255, 255, 255, 0.65);
  padding: var(--space-sm);
}

.framework-list strong,
.framework-list span {
  display: block;
}

.framework-list span {
  margin-top: var(--space-2xs);
  color: var(--muted);
}

.plan-card {
  /* Was clamp(1.5rem, 5vw, 3rem) -- the same floor and ceiling as
     --space-panel-lg with a steeper slope, so it only diverged in the middle
     of the range. A stray 5vw the spacing migration missed. */
  padding: var(--space-panel-lg);
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.92), rgba(17, 94, 89, 0.94)),
    var(--primary);
  color: white;
}

.plan-card .eyebrow,
.plan-card p {
  color: rgba(255, 255, 255, 0.9);
}

.plan-card .assumption-list {
  color: white;
}

.plan-card ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.plan-card li {
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  padding: var(--space-sm);
  font-weight: 800;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  border-top: 1px solid var(--rule-subtle);
  padding-block: var(--space-lg);
  color: var(--muted);
}

.disclaimer {
  max-width: 34rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.footer-links a {
  color: var(--primary-dark);
  font-size: var(--text-small);
}

@media (max-width: 1080px) {
  .nav {
    align-items: flex-start;
    padding-block: var(--space-xs);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-links {
    position: absolute;
    inset: 76px 1rem auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--rule);
    border-radius: 1rem;
    background: white;
    padding: var(--space-sm);
    box-shadow: var(--shadow);
  }

  .nav-links[data-open="true"] {
    display: flex;
  }
}

@media (max-width: 900px) {
  /* The nav collapses in the max-width:1080px query above, which already
     covers every width this block would. */
  .hero,
  .about-hero,
  .about-profile,
  .about-standards-panel,
  .library-hero,
  .featured-post,
  .quick-check,
  .about-layout,
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-summary {
    position: static;
  }

  .member-review-layout {
    grid-template-columns: 1fr;
  }

  .member-review-tool {
    padding-right: 0;
  }

  .member-history {
    padding-left: 0;
    border-top: 1px solid var(--rule);
    border-left: 0;
  }

  .about-credential-card {
    position: static;
  }

  .intro-grid,
  .calculator-grid,
  .planner-overview-grid,
  .about-focus-grid,
  .about-profile-links,
  .pathway-grid,
  .age-well-domain-grid,
  .framework-list,
  .plan-card ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .paid-access-panel {
    grid-template-columns: 1fr;
  }

  .member-workspace-hero {
    padding-block: var(--space-md) var(--space-sm);
  }

  .member-status-grid,
  .member-comparison-grid {
    grid-template-columns: 1fr;
  }

  .member-status-grid > div + div {
    border-top: 1px solid var(--rule);
    border-left: 0;
  }

  .member-history-actions,
  .member-history-actions .button,
  .member-history-footer .button,
  .member-save-actions,
  .member-save-actions .button {
    width: 100%;
  }

  .member-save-actions {
    justify-content: stretch;
  }

  .member-save-actions .paid-access-status {
    text-align: left;
  }

  .planner-overview-grid > div + div {
    border-top: 1px solid var(--rule-subtle);
    border-left: 0;
  }
  .section {
    padding-block: var(--space-xl);
  }

  .about-hero {
    gap: var(--space-md);
    padding-block: var(--space-xl) var(--space-md);
  }

  .about-hero h1 {
    max-width: 100%;
    font-size: var(--text-heading);
  }

  .about-hero .hero-actions {
    flex-wrap: nowrap;
    gap: var(--space-2xs);
    margin-top: var(--space-md);
  }

  .about-hero .button {
    flex: 1;
    min-width: 0;
    padding: var(--space-xs) var(--space-xs);
    font-size: var(--text-small);
    line-height: 1.2;
  }

  .about-hero-copy p {
    font-size: var(--text-body);
  }

  .about-hero-card {
    padding: var(--space-sm);
  }

  .about-stat-grid {
    gap: var(--space-xs);
  }

  .about-stat-grid div {
    display: grid;
    grid-template-columns: minmax(6rem, 0.42fr) minmax(0, 1fr);
    gap: var(--space-2xs);
    align-items: start;
    padding-top: var(--space-xs);
  }

  .about-stat-grid span {
    margin-top: 0;
    font-size: var(--text-small);
    line-height: 1.35;
  }

  .intro-grid,
  .calculator-grid,
  .about-focus-grid,
  .about-profile-links,
  .pathway-grid,
  .library-list-heading,
  .framework-list,
  .form-grid,
  .age-well-domain-grid,
  .plan-card ul {
    grid-template-columns: 1fr;
  }

  .site-footer {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    /* Not 0s: a zero duration means transitionend never fires, and any script
       waiting on that event stalls. A duration below one frame is visually
       instant and still dispatches. */
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Belt and braces. script.js also declines to mark the document when this
     preference is set, so entrance states never engage in the first place. */
  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

.button-text {
  background: transparent;
  color: var(--primary-dark);
  box-shadow: none;
  padding-inline: var(--space-2xs);
}

.button-text:hover {
  background: transparent;
  color: #0b4f4a;
  text-decoration: underline;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  grid-column: 1 / -1;
}

.healthcare-estimator {
  border-bottom: 1px solid var(--rule-subtle);
}

.estimator-shell,
.savings-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--space-sm);
}

.estimator-form,
.estimator-results,
.savings-form,
.savings-results {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-panel-sm);
}

.estimator-results,
.savings-results {
  align-content: start;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.estimator-form .form-actions .button {
  min-height: 2.4rem;
  min-width: 7rem;
  border-radius: 0.65rem;
  padding: var(--space-2xs) var(--space-sm);
}

.range-value {
  display: inline-block;
  margin-left: var(--space-3xs);
  color: var(--muted);
  font-weight: 700;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--space-xs);
}

.metric-card {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
  border-radius: 1rem;
  background: var(--text);
  color: white;
  padding: var(--space-sm);
}

.metric-card span,
.metric-card small {
  color: rgba(255, 255, 255, 0.78);
}

.metric-card strong {
  font-size: var(--text-subhead);
  line-height: 1.1;
  overflow-wrap: normal;
}

.currency-value {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lifecycle-finance .savings-form {
  align-content: start;
}

.planner-overview {
  border-bottom: 1px solid var(--rule-subtle);
}

.planner-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-md);
  border-block: 1px solid var(--rule-subtle);
}

.planner-overview-grid > div {
  min-width: 0;
  padding: var(--space-md);
}

.planner-overview-grid > div + div {
  border-left: 1px solid var(--rule-subtle);
}

.planner-overview-grid h3,
.planner-overview-grid p {
  margin: 0;
}

.planner-overview-grid p {
  margin-top: var(--space-2xs);
  color: var(--muted);
}

.planner-prefill-note {
  margin: 0;
  border-left: 4px solid var(--accent);
  background: var(--surface-strong);
  padding: var(--space-sm) var(--space-sm);
  color: var(--text);
  font-weight: 700;
}

.planner-fieldset {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--rule);
  padding: var(--space-sm) 0 0;
}

.planner-fieldset legend {
  padding: 0;
  color: var(--text);
  font-size: var(--text-body);
  font-weight: 800;
}

.planner-fieldset > p,
.planner-assumptions > p {
  margin: 0;
  color: var(--muted);
}

.planner-assumptions {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-sm);
}

.planner-assumptions summary {
  cursor: pointer;
  color: var(--primary-dark);
  font-weight: 800;
}

.planner-assumptions > p,
.planner-assumptions .form-grid {
  margin-top: var(--space-xs);
}

.lifecycle-finance .form-grid {
  align-content: start;
}

.lifecycle-output-section {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}

.lifecycle-output-section h3,
.lifecycle-table-panel h3 {
  margin: 0;
}

.lifecycle-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.lifecycle-score-card {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
  border: 1px solid var(--rule-subtle);
  border-radius: 0.5rem;
  background: white;
  padding: var(--space-xs);
}

.lifecycle-score-card span,
.lifecycle-score-card small,
.lifecycle-table-panel p {
  color: var(--muted);
}

.lifecycle-score-card strong {
  color: var(--text);
  font-size: var(--text-lead);
}

.lifecycle-table-panel {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}

.lifecycle-table-panel p {
  margin: 0;
}

.lifecycle-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule-subtle);
  border-radius: 0.5rem;
  background: white;
}

.lifecycle-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.lifecycle-table th,
.lifecycle-table td {
  border-bottom: 1px solid var(--rule-subtle);
  padding: var(--space-xs);
  text-align: left;
  vertical-align: top;
}

.lifecycle-table th {
  background: var(--surface-strong);
  color: var(--text);
}

.lifecycle-table tr:last-child td {
  border-bottom: 0;
}

.inflation-bars {
  display: grid;
  gap: var(--space-xs);
}

.bar-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) minmax(7rem, auto);
  gap: var(--space-xs);
  align-items: center;
}

.bar-row > span,
.bar-row > strong {
  font-size: var(--text-small);
}

.bar-track {
  height: 0.8rem;
  overflow: hidden;
  border-radius: 999px;
  background: #d9e7e3;
}

.bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.assumption-list {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding-left: var(--space-sm);
  color: var(--muted);
}

.source-note {
  max-width: 80ch;
  color: var(--muted);
  font-size: var(--text-small);
}

.savings-calculator,
.lifecycle-finance {
  border-bottom: 1px solid var(--rule-subtle);
}

.wealthspan-checkup {
  border-bottom: 1px solid var(--rule-subtle);
}

.wealthspan-form,
.wealthspan-results {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-panel-sm);
}

.wealthspan-panel {
  display: grid;
  gap: var(--space-sm);
  border: 1px solid var(--rule-subtle);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  padding: var(--space-sm);
}

.wealthspan-panel h3,
.wealthspan-panel h4,
.wealthspan-results h3 {
  margin: 0;
}

.panel-note {
  margin: 0;
  color: var(--muted);
}

.wealthspan-detail-panel {
  display: grid;
  gap: var(--space-sm);
}

.wealthspan-detail-panel[hidden] {
  display: none;
}

.budget-groups,
.budget-group,
.net-worth-list {
  display: grid;
  gap: var(--space-xs);
}

.budget-row,
.net-worth-row {
  display: grid;
  gap: var(--space-xs);
  align-items: center;
}

.budget-row {
  grid-template-columns: minmax(12rem, 1.3fr) minmax(7rem, 0.75fr) minmax(7rem, 0.75fr) minmax(9rem, 0.9fr);
}

.net-worth-row {
  grid-template-columns: minmax(11rem, 1.2fr) minmax(7rem, 0.7fr) minmax(7rem, 0.7fr);
}

.budget-row-heading,
.net-worth-row-heading {
  color: var(--muted);
  font-size: var(--text-micro);
  text-transform: uppercase;
}

.sr-label {
  display: block;
  min-width: 0;
  color: transparent;
  font-size: 0;
}

.sr-label input,
.sr-label select {
  margin: 0;
  color: var(--text);
  font-size: var(--text-body);
}

.net-worth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.net-worth-list {
  overflow: hidden;
  border: 1px solid var(--rule-subtle);
  border-radius: 1rem;
  background: white;
  padding: var(--space-xs);
}

.net-worth-row small {
  display: block;
  color: var(--muted);
  font-size: var(--text-micro);
}

.wealthspan-table {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) repeat(3, minmax(8rem, 1fr));
  overflow: hidden;
  border: 1px solid var(--rule-subtle);
  border-radius: 0.9rem;
  background: white;
}

.wealthspan-cell {
  display: grid;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--rule-subtle);
  padding: var(--space-xs);
}

.wealthspan-heading {
  background: var(--surface-strong);
  color: var(--text);
}

.healthspan-checkup {
  border-bottom: 1px solid var(--rule-subtle);
}

.healthspan-form,
.healthspan-results {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-panel-sm);
}

.healthspan-basics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  min-width: 0;
}

.healthspan-domains {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

.healthspan-mode-panel {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
  border: 1px solid var(--rule-subtle);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  padding: var(--space-sm);
}

.healthspan-mode-panel h3,
.healthspan-mode-panel p {
  margin: 0;
}

.healthspan-mode-panel p {
  color: var(--muted);
}

.healthspan-source-context {
  order: 1;
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
  border: 1px solid var(--rule-subtle);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  padding: var(--space-sm);
}

.healthspan-evidence-grid h4,
.healthspan-evidence-grid p,
.healthspan-reference-grid h4 {
  margin: 0;
}

.healthspan-evidence-grid p {
  color: var(--muted);
}

.healthspan-evidence-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-xs);
}

.healthspan-evidence-grid article {
  display: grid;
  gap: var(--space-3xs);
  border: 1px solid var(--rule-subtle);
  border-radius: 0.8rem;
  background: rgba(246, 250, 246, 0.78);
  padding: var(--space-xs);
}

.healthspan-reference-panel {
  border-top: 1px solid var(--rule-subtle);
  padding-top: var(--space-xs);
}

.healthspan-reference-panel summary {
  cursor: pointer;
  font-weight: 800;
}

.healthspan-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.healthspan-reference-grid ul {
  display: grid;
  gap: var(--space-2xs);
  margin: var(--space-2xs) 0 0;
  padding-left: var(--space-sm);
}

.healthspan-reference-grid a {
  /* Was var(--accent-dark), which has never been defined, so these links
     inherited body colour and did not read as links at all. --accent-strong
     is the token that intent describes: accent carried down far enough to
     clear AA as text. */
  color: var(--accent-strong);
  font-weight: 700;
}

.healthspan-domain,
.cognition-panel {
  min-width: 0;
  border: 1px solid var(--rule-subtle);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  padding: var(--space-sm);
}

.healthspan-domain p,
.cognition-panel p {
  color: var(--muted);
}

.healthspan-table {
  display: grid;
  grid-template-columns: minmax(12rem, 1.3fr) minmax(7rem, 0.7fr) minmax(7rem, 0.7fr) minmax(7rem, 0.6fr);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--rule-subtle);
  border-radius: 0.9rem;
  background: white;
}

.healthspan-cell {
  display: grid;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--rule-subtle);
  padding: var(--space-xs);
}

.healthspan-heading {
  background: var(--surface-strong);
  color: var(--text);
}

.healthspan-cell input {
  margin: 0;
}

.healthspan-unit-select {
  width: 100%;
  margin-top: var(--space-2xs);
}

.healthspan-once-note {
  color: var(--muted);
  line-height: 1.35;
}

.healthspan-trend {
  color: var(--muted);
  font-weight: 800;
}

.healthspan-trend.improved {
  color: var(--trend-good);
}

.healthspan-trend.worsened {
  color: var(--trend-bad);
}

.healthspan-trend.same {
  color: var(--muted);
}

.healthspan-trend.lpa-reference {
  color: var(--trend-good);
}

.healthspan-trend.lpa-intermediate {
  color: var(--trend-caution);
}

.healthspan-trend.lpa-high {
  color: var(--trend-bad);
}

.advanced-panel {
  border: 1px solid var(--rule);
  border-radius: 1rem;
  background: var(--surface-strong);
  padding: var(--space-sm);
}

.care-scenario-panel {
  display: grid;
  gap: var(--space-sm);
  grid-column: 1 / -1;
  border: 1px solid var(--rule);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.7);
  padding: var(--space-sm);
}

.care-scenario-panel h3,
.care-scenario-panel p {
  margin: 0;
}

.care-scenario-panel p {
  color: var(--muted);
}

.advanced-panel[hidden] {
  display: none;
}

.status-callout {
  display: grid;
  gap: var(--space-3xs);
  border-radius: 1rem;
  background: var(--surface-strong);
  padding: var(--space-sm);
}

.status-callout-strong {
  border-left: 4px solid var(--primary);
}

.status-callout span {
  color: var(--muted);
}

.wealthspan-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.wealthspan-notes article {
  border: 1px solid var(--rule-subtle);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  padding: var(--space-sm);
}

.wealthspan-notes p {
  color: var(--muted);
}

.med-review {
  border-top: 1px solid var(--rule-subtle);
}

.compact-heading {
  margin-bottom: var(--space-sm);
}

.compact-heading h3 {
  font-size: var(--text-heading);
}

.compact-heading p {
  max-width: 78ch;
  color: var(--muted);
}

.acb-calculator {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-panel-sm);
}

.acb-scale-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.acb-scale-context article {
  border: 1px solid var(--rule-subtle);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  padding: var(--space-sm);
}

.acb-scale-context h4,
.acb-scale-context p {
  margin: 0;
}

.acb-scale-context p {
  color: var(--muted);
}

.acb-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--space-sm);
}

.acb-picker,
.acb-results {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  border-radius: 1rem;
  box-shadow: none;
  padding: var(--space-sm);
}

.acb-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.acb-list {
  display: grid;
  max-height: 26rem;
  overflow: auto;
  border: 1px solid var(--rule-subtle);
  border-radius: 1rem;
  background: white;
}

.acb-list > p {
  margin: 0;
  padding: var(--space-sm);
  color: var(--muted);
}

.acb-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-xs);
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--rule-subtle);
  cursor: pointer;
}

.acb-row:last-child {
  border-bottom: 0;
}

.acb-row input {
  width: auto;
  min-height: auto;
  margin: 0;
}

.acb-row strong {
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--primary-dark);
  padding: var(--space-3xs) var(--space-2xs);
  font-size: var(--text-micro);
}

.selected-medications {
  display: grid;
  gap: var(--space-2xs);
}

.selected-medications ul {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding-left: var(--space-sm);
  color: var(--muted);
}

.review-builder {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--space-sm);
}

.review-form,
.review-output {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-panel-sm);
}

.review-output {
  align-content: start;
  background: var(--text);
  color: white;
}

.review-output span,
.review-output li {
  color: rgba(255, 255, 255, 0.82);
}

.review-output ol {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding-left: var(--space-md);
}

.review-context {
  display: grid;
  gap: var(--space-3xs);
}

.roadmap {
  padding-top: var(--space-lg);
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.roadmap-grid article {
  border: 1px solid var(--rule-subtle);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.74);
  padding: var(--space-md);
}

.roadmap-grid p {
  color: var(--muted);
}

.status-badge {
  display: inline-flex;
  margin-bottom: var(--space-sm);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--primary-dark);
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-micro);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .estimator-shell,
  .savings-shell {
    grid-template-columns: 1fr;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .lifecycle-score-grid {
    grid-template-columns: 1fr;
  }

  .wealthspan-notes {
    grid-template-columns: 1fr;
  }

  .net-worth-layout {
    grid-template-columns: 1fr;
  }

  .budget-row,
  .net-worth-row,
  .wealthspan-table {
    grid-template-columns: 1fr;
  }

  .budget-row-heading,
  .net-worth-row-heading {
    display: none;
  }

  .healthspan-basics {
    grid-template-columns: 1fr;
  }

  .healthspan-evidence-grid,
  .healthspan-reference-grid {
    grid-template-columns: 1fr;
  }

  .acb-scale-context {
    grid-template-columns: 1fr;
  }

  .healthspan-table {
    grid-template-columns: minmax(10rem, 1fr) repeat(3, minmax(5.5rem, 0.65fr));
    overflow-x: auto;
  }

  .acb-layout {
    grid-template-columns: 1fr;
  }

  .review-builder {
    grid-template-columns: 1fr;
  }

  .newsletter-panel {
    grid-template-columns: 1fr;
  }

  .library-visual-guide {
    grid-template-columns: 1fr;
  }

  .site-guide-panel {
    grid-template-columns: 1fr;
  }

  .admin-copilot-shell,
  .admin-token-row {
    grid-template-columns: 1fr;
  }

  .admin-copilot-output {
    position: static;
  }

  .roadmap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .bar-row {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .library-visual-guide ol,
  .library-wheel-domain-list {
    grid-template-columns: 1fr;
  }

  .library-visual-guide li:nth-child(2) {
    border-top: 1px solid var(--rule);
  }

  .bar-row > strong {
    grid-column: 2;
  }

  .roadmap-grid {
    grid-template-columns: 1fr;
  }
}

.longevity-ladder-page .section {
  width: min(1240px, calc(100% - 2rem));
}

.ladder-hero {
  padding-block: clamp(1.75rem, 4vw, 2.5rem) var(--space-sm);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  margin-bottom: var(--space-md);
  color: var(--muted);
  font-size: var(--text-small);
}

.breadcrumb a {
  text-decoration: none;
}

.ladder-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: end;
}

.ladder-title-row h1 {
  max-width: none;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-display);
}

.ladder-title-row > div:first-child > p:last-child {
  max-width: 66ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-body);
}

.ladder-step-controls {
  display: flex;
  gap: var(--space-xs);
}

.ladder-step-controls .button {
  min-width: 9.5rem;
}

.ladder-explorer {
  display: grid;
  grid-template-columns: minmax(19rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
  padding-block: var(--space-md) var(--space-xl);
}

.ladder-navigation {
  min-width: 0;
}

.ladder-instruction {
  margin: 0 0 var(--space-sm);
  color: var(--muted);
  font-size: var(--text-small);
}

.ladder-rung-list {
  display: flex;
  flex-direction: column-reverse;
  margin: 0;
  border-inline: 0.65rem solid #68847d;
  padding: var(--space-md) var(--space-xs);
  background: rgba(255, 255, 255, 0.32);
  list-style: none;
}

.ladder-rung-list li {
  min-width: 0;
}

.ladder-rung {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: center;
  min-height: 5.2rem;
  margin: var(--space-3xs) 0;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  padding: var(--space-xs) var(--space-sm);
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.ladder-rung:hover {
  border-color: rgba(15, 118, 110, 0.58);
  background: white;
  color: var(--primary-dark);
}

.ladder-rung.is-active {
  border: 2px solid var(--accent);
  background: #fff4e5;
  color: #9a571c;
}

.ladder-rung-number {
  color: var(--accent);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--text-subhead);
  font-weight: 700;
  line-height: 1;
}

.ladder-rung > span:last-child {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.25;
}

.ladder-detail-region {
  min-width: 0;
  border-left: 1px solid var(--rule-strong);
  padding-left: clamp(2rem, 5vw, 4.25rem);
}

.ladder-detail {
  min-height: 36rem;
  outline: none;
  scroll-margin-top: 6.5rem;
}

.ladder-detail[hidden] {
  display: none;
}

.ladder-detail h2 {
  max-width: none;
  margin: var(--space-3xs) 0 var(--space-xs);
  font-size: var(--text-display);
}

.ladder-detail-intro {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-body);
}

.ladder-principles,
.ladder-readings {
  margin-top: var(--space-lg);
}

.ladder-principles h3,
.ladder-readings h3 {
  margin-bottom: var(--space-2xs);
  color: var(--accent);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--text-micro);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ladder-principles ul,
.ladder-readings ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ladder-principles li,
.ladder-readings li {
  border-top: 1px solid var(--rule);
  padding: var(--space-xs) 0;
}

.ladder-principles li:first-child,
.ladder-readings li:first-child {
  border-top: 0;
}

.ladder-principles strong {
  color: var(--text);
}

.ladder-readings a {
  display: block;
  text-underline-offset: 0.2em;
}

.ladder-reading-empty {
  margin: 0;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  padding-top: var(--space-xs);
}

.ladder-evidence {
  padding-block: var(--space-sm) var(--space-3xl);
}

.ladder-evidence details {
  border-block: 1px solid var(--rule-strong);
  padding-block: var(--space-sm);
}

.ladder-evidence summary {
  color: var(--primary-dark);
  cursor: pointer;
  font-weight: 800;
}

.ladder-evidence details > div {
  max-width: 74ch;
  color: var(--muted);
  padding-top: var(--space-sm);
}

.ladder-evidence ul {
  display: grid;
  gap: var(--space-2xs);
  padding-left: var(--space-md);
}

@media (max-width: 900px) {
  .ladder-title-row,
  .ladder-explorer {
    grid-template-columns: 1fr;
  }

  .ladder-title-row {
    align-items: start;
  }

  .ladder-step-controls {
    justify-content: start;
  }

  .ladder-explorer {
    gap: var(--space-xl);
  }

  .ladder-detail-region {
    border-top: 1px solid var(--rule-strong);
    border-left: 0;
    padding-top: var(--space-xl);
    padding-left: 0;
  }

  .ladder-detail {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .ladder-title-row h1 {
    font-size: var(--text-display);
  }

  .ladder-step-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ladder-step-controls .button {
    min-width: 0;
    padding-inline: var(--space-xs);
  }

  .ladder-rung-list {
    border-inline-width: 0.4rem;
    padding-inline: var(--space-2xs);
  }

  .ladder-rung {
    min-height: 4.5rem;
  }

  .ladder-detail h2 {
    font-size: var(--text-title);
  }
}

.wealthspan-wheel-page .section {
  width: min(1240px, calc(100% - 2rem));
}

.wheel-hero {
  padding-block: clamp(1.75rem, 4vw, 2.5rem) var(--space-sm);
}

.wheel-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: end;
}

.wheel-title-row h1 {
  max-width: none;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-display);
}

.wheel-title-row > div:first-child > p:last-child {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-body);
}

.wheel-step-controls {
  display: flex;
  gap: var(--space-xs);
}

.wheel-step-controls .button {
  min-width: 10.5rem;
}

.wheel-explorer {
  display: grid;
  grid-template-columns: minmax(23rem, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
  padding-block: var(--space-md) var(--space-xl);
}

.wheel-navigation {
  min-width: 0;
}

.wheel-instruction {
  margin: 0 0 var(--space-xs);
  color: var(--muted);
  font-size: var(--text-small);
  text-align: center;
}

.wealthspan-wheel {
  display: block;
  width: min(100%, 36rem);
  height: auto;
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: visible;
}

.wheel-segment {
  outline: none;
  cursor: pointer;
}

.wheel-segment path {
  stroke: #fffaf1;
  stroke-width: 4;
  transition:
    opacity 160ms ease,
    stroke 160ms ease,
    stroke-width 160ms ease;
}

.wheel-segment text {
  fill: #ffffff;
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--text-lead);
  font-weight: 850;
  letter-spacing: 0;
  pointer-events: none;
}

.wheel-segment-cash-flow path {
  fill: #0f766e;
}

.wheel-segment-reserves path {
  fill: #4f7d68;
}

.wheel-segment-protection path {
  fill: #b85445;
}

.wheel-segment-invest path {
  fill: #c88a2d;
}

.wheel-segment-invest text {
  fill: #2f2a1e;
}

.wheel-segment-income path {
  fill: #416d88;
}

.wheel-segment-care path {
  fill: #725b78;
}

.wheel-segment:hover path {
  opacity: 0.88;
}

.wheel-segment.is-active path,
.wheel-segment:focus-visible path {
  stroke: #19312d;
  stroke-width: 7;
}

.wheel-hub {
  fill: #fffaf1;
  stroke: rgba(25, 49, 45, 0.24);
  stroke-width: 3;
  pointer-events: none;
}

.wheel-hub-label {
  fill: var(--primary-dark);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--text-lead);
  font-weight: 900;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.wheel-hub-subtitle {
  fill: var(--muted);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: 0;
}

.wheel-detail-region {
  min-width: 0;
  border-left: 1px solid var(--rule-strong);
  padding-left: clamp(2rem, 5vw, 4.25rem);
}

.wheel-detail {
  min-height: 39rem;
}

.wheel-review {
  margin-top: var(--space-lg);
}

.wheel-review h3 {
  margin-bottom: var(--space-2xs);
  color: var(--accent);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--text-micro);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wheel-review ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wheel-review li {
  border-top: 1px solid var(--rule);
  padding: var(--space-xs) 0;
}

.wheel-review li:first-child {
  border-top: 0;
}

.wheel-question {
  margin: var(--space-md) 0 0;
  border-left: 4px solid var(--accent);
  background: rgba(255, 244, 229, 0.72);
  padding: var(--space-sm) var(--space-sm);
}

.wheel-evidence {
  padding-block: var(--space-sm) var(--space-3xl);
}

.wheel-evidence details {
  border-block: 1px solid var(--rule-strong);
  padding-block: var(--space-sm);
}

.wheel-evidence summary {
  color: var(--primary-dark);
  cursor: pointer;
  font-weight: 800;
}

.wheel-evidence details > div {
  max-width: 76ch;
  color: var(--muted);
  padding-top: var(--space-sm);
}

.wheel-evidence ul {
  display: grid;
  gap: var(--space-2xs);
  padding-left: var(--space-md);
}

@media (max-width: 960px) {
  .wheel-title-row,
  .wheel-explorer {
    grid-template-columns: 1fr;
  }

  .wheel-title-row {
    align-items: start;
  }

  .wheel-step-controls {
    justify-content: start;
  }

  .wheel-explorer {
    gap: var(--space-xl);
  }

  .wheel-detail-region {
    border-top: 1px solid var(--rule-strong);
    border-left: 0;
    padding-top: var(--space-xl);
    padding-left: 0;
  }

  .wheel-detail {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .wheel-title-row h1 {
    font-size: var(--text-display);
  }

  .wheel-step-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .wheel-step-controls .button {
    min-width: 0;
    padding-inline: var(--space-xs);
  }

  .wheel-explorer {
    padding-top: var(--space-2xs);
  }

  .wheel-segment text {
    font-size: var(--text-lead);
  }

  .wheel-detail h2 {
    font-size: var(--text-title);
  }
}

/* ============================================================
   Motion system
   ------------------------------------------------------------
   Before this, the stylesheet had four transitions, no easing
   curves and no keyframes, so every section arrived as a static
   block. Entrance states are opt-in per element via [data-reveal]
   (single element) or [data-reveal-group] (stagger the children).

   Everything here is gated on .motion-ready, which script.js adds
   only when the visitor has not asked for reduced motion and the
   browser supports IntersectionObserver. If that script never runs
   -- blocked, failed, still loading -- the class is absent and the
   content simply renders in place. Content is never hidden by a
   stylesheet that is waiting on JavaScript to reveal it.
   ============================================================ */

.motion-ready [data-reveal],
.motion-ready [data-reveal-group] > * {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift, 1.5rem), 0);
  transition:
    opacity var(--dur-mid) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
}

.motion-ready [data-reveal].is-revealed,
.motion-ready [data-reveal-group].is-revealed > * {
  opacity: 1;
  transform: none;
}

/* Stagger is expressed in CSS rather than written onto each node by script,
   so the markup stays clean and the rhythm is editable in one place. */
.motion-ready [data-reveal-group] > *:nth-child(2) { transition-delay: calc(var(--stagger) * 1); }
.motion-ready [data-reveal-group] > *:nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
.motion-ready [data-reveal-group] > *:nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
.motion-ready [data-reveal-group] > *:nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
.motion-ready [data-reveal-group] > *:nth-child(6) { transition-delay: calc(var(--stagger) * 5); }

/* A heading that slides up from behind its own edge. The clip is on the
   wrapper so the text is never visually cut once settled. */
.reveal-mask {
  display: block;
  overflow: hidden;
}

.motion-ready .reveal-mask > [data-reveal] {
  --reveal-shift: 105%;
}

/* ---- Above-the-fold entrance -------------------------------------------
   The hero is on screen at load, so it deliberately does NOT use the
   observer: a scroll trigger would either fire instantly (no animation) or
   depend on script.js to un-hide content that is the first thing anyone sees.
   A CSS animation instead. Stylesheets are render-blocking, so the opening
   frame is painted from the keyframe rather than from a hidden state, and if
   this file somehow fails the markup is unstyled but never invisible. */

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 1.75rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .home .hero-content > *,
  .home .hero-card {
    animation: rise-in var(--dur-slow) var(--ease-out-expo) both;
  }

  .home .hero-content > *:nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
  .home .hero-content > *:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
  .home .hero-content > *:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
  .home .hero-content > *:nth-child(5) { animation-delay: calc(var(--stagger) * 4); }

  /* The card lands last and travels a little further, so the eye finishes on
     the score rather than on the buttons. */
  .home .hero-card {
    animation-delay: calc(var(--stagger) * 2.5);
    animation-duration: calc(var(--dur-slow) + 120ms);
  }
}

/* ---- Pointer response -------------------------------------------------
   Hover states previously moved 2px on a linear 180ms ease. The spring curve
   and a slightly longer travel make the same gesture feel deliberate. */

.motion-ready .pathway-card,
.motion-ready .calculator-card,
.motion-ready .intro-grid article {
  transition:
    border-color var(--dur-fast) var(--ease-out-expo),
    box-shadow var(--dur-mid) var(--ease-out-expo),
    transform var(--dur-mid) var(--ease-spring);
}

@media (hover: hover) {
  .motion-ready .calculator-card:hover,
  .motion-ready .intro-grid article:hover {
    transform: translate3d(0, -0.35rem, 0);
    border-color: rgba(15, 118, 110, 0.34);
    box-shadow:
      0 2px 6px rgba(25, 49, 45, 0.04),
      0 12px 24px rgba(25, 49, 45, 0.06),
      0 30px 60px rgba(25, 49, 45, 0.08);
  }
}

/* Keyboard users get the same affordance as pointer users. */
.motion-ready .calculator-card:focus-within,
.motion-ready .intro-grid article:focus-within {
  transform: translate3d(0, -0.35rem, 0);
  border-color: rgba(15, 118, 110, 0.34);
}

/* ============================================================
   Homepage geometry
   ------------------------------------------------------------
   Scoped to body.home because .calculator-grid is also used by
   coaching.html and tools.html, which hold different numbers of
   cards -- unscoped nth-child spans would rearrange those pages.
   ============================================================ */

@media (min-width: 901px) {
  /* Was repeat(3, 1fr). One dominant panel against two stacked
     secondaries reads as an editorial column rather than a feature row. */
  .home .intro-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(1rem, 2.4vw, 1.9rem);
  }

  .home .intro-grid article:first-child {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.8rem, 3.6vw, 3rem);
  }

  .home .intro-grid article:first-child h2 {
    font-size: var(--text-title);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  .home .intro-grid article:first-child p {
    max-width: 34ch;
    font-size: var(--text-lead);
  }

  /* Five cards on a six-column field: two wide, three narrow. The break in
     rhythm is the point -- an even five-across grid is what this replaced. */
  .home .calculator-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(0.9rem, 1.8vw, 1.4rem);
  }

  .home .calculator-card:nth-child(1),
  .home .calculator-card:nth-child(2) {
    grid-column: span 3;
  }

  .home .calculator-card:nth-child(n + 3) {
    grid-column: span 2;
  }

  .home .calculator-card:nth-child(1) {
    min-height: 19rem;
  }

  .home .calculator-card:nth-child(1) h3 {
    font-size: var(--text-heading);
    line-height: 1.1;
  }
}

/* ============================================================
   Tool pages
   ------------------------------------------------------------
   Each calculator has its own page. The shared skeleton is
   masthead -> tool -> context -> where-this-leads, but the
   proportions deliberately differ at each step (60/40 masthead,
   58/42 tool, 62/38 context) so a page does not settle into one
   repeated rhythm and read as a template.
   ============================================================ */

.tool-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 0.72fr);
  gap: var(--space-panel-lg);
  align-items: end;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.tool-masthead h1 {
  max-width: 15ch;
  margin-block: var(--space-2xs) 0;
}

.tool-lede {
  max-width: 46ch;
  margin-top: var(--space-sm);
  color: var(--muted);
  font-size: var(--text-lead);
  line-height: 1.55;
}

/* A ruled rail rather than a card. Carries the three things a visitor
   wants to know before starting: how long, what it costs, where data goes. */
.tool-meta {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 1px solid var(--rule-strong);
}

.tool-meta > div {
  display: grid;
  gap: 0.15rem;
}

.tool-meta dt {
  color: var(--accent);
  font-size: var(--text-micro);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tool-meta dd {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 600;
}

/* ---- The tool itself ---------------------------------------------------
   Inputs and answer share one surface, split 58/42. The inner form and
   results elements already carry card chrome from the shared component
   rule, so it is stripped here: the panel is the card now, and two nested
   borders read as a mistake. */
/* Chrome only. Each calculator already has a working internal layout -- two of
   them are two-column shells, the other three are not -- so this wraps them
   rather than imposing one grid on five different structures. */
.tool-panel {
  padding: clamp(1.1rem, 2.4vw, 2rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}

.tool-panel > * {
  min-width: 0;
}

/* The answer keeps its own surface so it still reads as the result rather than
   as more form. */
/* .review-output is deliberately excluded: it already carries a dark surface
   with white text of its own. Repainting it cream here left the white text in
   place and dropped the medication review output to 1.19:1. */
.tool-panel .estimator-results,
.tool-panel .savings-results,
.tool-panel .wealthspan-results,
.tool-panel .healthspan-results,
.tool-panel .acb-results {
  padding: clamp(1rem, 2vw, 1.45rem);
  border-radius: 1.1rem;
  background: var(--surface-strong);
}

/* Two nested bordered cards read as a mistake, so the inner components shed
   their own chrome and let the panel be the card. */
.tool-panel .estimator-form,
.tool-panel .savings-form,
.tool-panel .wealthspan-form,
.tool-panel .healthspan-form,
.tool-panel .acb-calculator,
.tool-panel .acb-picker,
.tool-panel .review-form,
.tool-panel .review-output,
.tool-panel .estimator-results,
.tool-panel .savings-results,
.tool-panel .wealthspan-results,
.tool-panel .healthspan-results,
.tool-panel .acb-results {
  border: 0;
  box-shadow: none;
}

.tool-panel .estimator-form,
.tool-panel .savings-form,
.tool-panel .wealthspan-form,
.tool-panel .healthspan-form,
.tool-panel .acb-calculator,
.tool-panel .acb-picker,
.tool-panel .review-form {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* Long currency strings are the main overflow risk once a column narrows. */
.tool-panel strong,
.tool-panel li,
.tool-panel p,
.tool-panel dd {
  overflow-wrap: anywhere;
}

/* Generated tables scroll inside the panel rather than widening the page. */
.tool-panel table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ---- Context -----------------------------------------------------------
   62/38, with the prose measure capped so lines stay readable rather than
   stretching the full container. */
.tool-context {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: var(--space-panel-lg) clamp(2rem, 5vw, 4rem);
}

.tool-prose h2 {
  margin-bottom: var(--space-sm);
}

.tool-prose p {
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.62;
}

.tool-prose p + p {
  margin-top: var(--space-sm);
}

.tool-assumptions {
  display: grid;
  gap: var(--space-xs);
  padding-left: clamp(1rem, 2vw, 1.6rem);
  border-left: 1px solid var(--rule-strong);
}

.tool-assumptions ul {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-assumptions li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

.tool-assumptions li::before {
  content: "\2014";
  color: var(--accent);
  font-weight: 800;
}

/* ---- Where this leads --------------------------------------------------
   A ruled list, not a card row. Three unequal destinations: another tool,
   an article, the member planner. */
.tool-next {
  padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule);
}

.tool-next-list {
  display: grid;
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.tool-next-list li {
  border-bottom: 1px solid var(--rule);
}

.tool-next-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(0.9rem, 2vw, 2rem);
  align-items: center;
  padding-block: var(--space-sm);
  color: var(--text);
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-out-expo),
    padding-inline var(--dur-mid) var(--ease-spring);
}

@media (hover: hover) {
  .tool-next-list a:hover {
    padding-inline: var(--space-xs);
    background: rgba(242, 234, 219, 0.55);
  }

  .tool-next-list a:hover .tool-next-arrow {
    transform: translateX(0.3rem);
  }
}

.tool-next-list a:focus-visible {
  padding-inline: var(--space-xs);
  background: rgba(242, 234, 219, 0.55);
}

.tool-next-kind {
  align-self: start;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--primary-dark);
  font-size: var(--text-micro);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.tool-next-copy strong {
  display: block;
  font-size: var(--text-lead);
  line-height: 1.32;
}

.tool-next-copy span {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

.tool-next-arrow {
  color: var(--primary-dark);
  font-size: var(--text-subhead);
  font-weight: 800;
  transition: transform var(--dur-mid) var(--ease-spring);
}

/* ---- Tools directory ---------------------------------------------------
   The hub. The first entry spans the full width as the recommended starting
   point; the rest fall into two uneven rows. */
.tool-directory {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.8vw, 1.3rem);
}

.tool-directory-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-panel-xs);
  border: 1px solid var(--rule);
  border-radius: 1.1rem;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-out-expo),
    box-shadow var(--dur-mid) var(--ease-out-expo),
    transform var(--dur-mid) var(--ease-spring);
}

.tool-directory-card:nth-child(1) {
  grid-column: span 6;
  background: var(--surface-strong);
}

.tool-directory-card:nth-child(2),
.tool-directory-card:nth-child(3) {
  grid-column: span 3;
}

.tool-directory-card:nth-child(n + 4) {
  grid-column: span 2;
}

@media (hover: hover) {
  .tool-directory-card:hover {
    transform: translate3d(0, -0.3rem, 0);
    border-color: rgba(15, 118, 110, 0.34);
    box-shadow:
      0 2px 6px rgba(25, 49, 45, 0.04),
      0 14px 28px rgba(25, 49, 45, 0.07);
  }
}

.tool-directory-card:focus-visible {
  border-color: rgba(15, 118, 110, 0.5);
}

.tool-directory-card h3 {
  font-size: var(--text-subhead);
  line-height: 1.2;
}

.tool-directory-card:nth-child(1) h3 {
  font-size: var(--text-heading);
}

.tool-directory-card p {
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

.tool-directory-go {
  margin-top: auto;
  padding-top: var(--space-xs);
  color: var(--primary-dark);
  font-size: var(--text-small);
  font-weight: 800;
}

@media (max-width: 900px) {
  .tool-masthead,
  .tool-panel,
  .tool-context {
    grid-template-columns: 1fr;
  }

  .tool-masthead {
    align-items: start;
  }

  /* Stacked, so a left rule would read as a stray vertical line. */
  .tool-meta,
  .tool-assumptions {
    padding-left: 0;
    padding-top: var(--space-sm);
    border-left: 0;
    border-top: 1px solid var(--rule-strong);
  }

  .tool-meta {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  }

  .tool-result-rail {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .tool-directory-card:nth-child(1),
  .tool-directory-card:nth-child(2),
  .tool-directory-card:nth-child(3),
  .tool-directory-card:nth-child(n + 4) {
    grid-column: span 3;
  }
}

@media (max-width: 640px) {
  .tool-masthead h1 {
    max-width: 18ch;
  }

  .tool-meta {
    grid-template-columns: 1fr;
  }

  .tool-directory-card:nth-child(1),
  .tool-directory-card:nth-child(2),
  .tool-directory-card:nth-child(3),
  .tool-directory-card:nth-child(n + 4) {
    grid-column: span 6;
  }

  /* Keep the arrow column from squeezing the title on a narrow screen. */
  .tool-next-list a {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--space-2xs);
  }

  .tool-next-arrow {
    display: none;
  }
}

/* ============================================================
   Content pages: about, method, advice library, coaching, members
   ------------------------------------------------------------
   These five shared two habits worth breaking. Every secondary
   grid was repeat(4, 1fr) -- focus cards, profile links, library
   pathways, the framework list, the roadmap -- and about-hero and
   library-hero used the identical 1fr / 0.72fr split, so two
   different pages opened the same way.

   Each page now gets its own device: a ruled ledger on about, a
   hanging-numeral index on method, a dominant lead entry in the
   library, an unequal pair on coaching, a single decisive column
   on members. Nothing here changes what any page says.
   ============================================================ */

/* ---- About -------------------------------------------------------------
   The name runs at display scale against a credential ledger that is ruled
   rather than boxed, so the two blocks interlock instead of sitting as
   copy-beside-card. */
.about-hero {
  grid-template-columns: minmax(0, 1.62fr) minmax(14rem, 0.68fr);
  align-items: end;
}

/* Sized against the real heading, which is a 63-character sentence rather than
   the short name the composition was drawn with. At 11ch it ran to six lines
   and pushed the hero past the viewport, so the reader landed on a headline
   and nothing else. */
.about-hero h1 {
  max-width: 17ch;
  font-size: var(--text-display);
  line-height: 0.98;
}

/* Was a bordered card with a soft shadow. A hairline rule reads as a
   reference column, which is what a credential list actually is. */
.about-hero-card {
  padding: 0 0 0 clamp(1rem, 2vw, 1.6rem);
  border: 0;
  border-left: 1px solid var(--rule-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-stat-grid {
  display: grid;
  gap: 0;
}

.about-stat-grid > div {
  display: grid;
  gap: 0.15rem;
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--rule-subtle);
}

.about-stat-grid > div:last-child {
  border-bottom: 0;
}

.about-stat-grid strong {
  font-size: var(--text-micro);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.about-stat-grid span {
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.45;
}

/* Four numbered concerns as a staircase. Each column starts lower than the
   one before it, so the eye tracks diagonally instead of scanning a row of
   equal cards. */
.about-focus-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.7rem);
  align-items: start;
}

.about-focus-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-focus-card::before {
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-block: var(--space-2xs) var(--space-sm);
  background: rgba(25, 49, 45, 0.25);
  content: "";
}

/* The numeral was a filled circular badge. Against a ruled, card-less layout
   that reads as leftover chrome, so it becomes a plain accent numeral sitting
   above its rule. */
.about-focus-card span {
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-size: var(--text-micro);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.about-focus-card h3 {
  font-size: var(--text-lead);
  line-height: 1.26;
}

@media (min-width: 901px) {
  .about-focus-grid > :nth-child(2) { margin-top: 2.1rem; }
  .about-focus-grid > :nth-child(3) { margin-top: 4.2rem; }
  .about-focus-grid > :nth-child(4) { margin-top: 6.3rem; }
}

/* External profiles were a 4-up card row. As a ruled two-column list they
   read as references, which is what they are. */
.about-profile-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
}

.about-profile-links a {
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-small);
  transition:
    padding-inline var(--dur-mid) var(--ease-spring),
    background-color var(--dur-fast) var(--ease-out-expo);
}

@media (hover: hover) {
  .about-profile-links a:hover {
    padding-inline: var(--space-2xs);
    background: rgba(242, 234, 219, 0.5);
  }
}

/* ---- Method ------------------------------------------------------------
   An index, not a card grid. The list is an <ol>, so the numerals come from
   a counter and no markup changes. */
.framework-list {
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: 0 clamp(2rem, 5vw, 4rem);
  counter-reset: framework;
  align-items: start;
}

/* The list items were bordered, filled cards. Keeping that under a hanging
   numeral gives cards-with-numbers rather than an index, so the fill and the
   accent bar go and a hairline rule carries the separation. */
.framework-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(0.9rem, 1.8vw, 1.35rem);
  padding: clamp(0.9rem, 1.8vw, 1.2rem) 0;
  border-left: 0;
  border-top: 1px solid var(--rule);
  background: transparent;
  counter-increment: framework;
}

/* Display-scale numeral against micro-text: the pairing the brief asks for. */
.framework-list li::before {
  grid-row: span 2;
  color: var(--accent);
  content: counter(framework);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--text-title);
  font-weight: 800;
  line-height: 0.92;
}

.framework-list strong {
  font-size: var(--text-lead);
  line-height: 1.24;
}

.framework-list span {
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

/* A ruled track rather than four boxes. Each stop is divided by a rule and
   led by a dot, so it reads as a sequence with a current position. */
.roadmap-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.roadmap-grid > * {
  padding: 0 clamp(1rem, 2vw, 1.6rem);
  border: 0;
  border-left: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.roadmap-grid > :first-child {
  padding-left: 0;
  border-left: 0;
}

.roadmap-grid > *::before {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  margin-bottom: var(--space-xs);
  border: 1px solid rgba(25, 49, 45, 0.3);
  border-radius: 999px;
  content: "";
}

.roadmap-grid > :first-child::before {
  border-color: var(--primary);
  background: var(--primary);
}

/* ---- Advice Library ----------------------------------------------------
   Differentiated from about-hero, which used to share this exact split. The
   library leads with a wide title block and a narrow count. */
.library-hero {
  grid-template-columns: minmax(0, 1.75fr) minmax(12rem, 0.55fr);
}

/* The lead pathway takes the full width as the recommended entry point; the
   other three sit under it. */
.pathway-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.pathway-grid > :first-child {
  grid-column: span 6;
  background: var(--surface-strong);
}

.pathway-grid > :first-child h3 {
  font-size: var(--text-heading);
}

.pathway-grid > :nth-child(n + 2) {
  grid-column: span 2;
}

/* ---- Coaching ----------------------------------------------------------
   The hero was a stacked heading with two buttons under it, which is the
   exact centred-hero shape worth avoiding. It becomes a split: the claim at
   display scale on the left, the actions held to a narrow right column so
   they read as a decision rather than a pair of matching pills.

   Scoped to body.coaching-page because .calculator-grid is shared with the
   home page and the tools hub, which hold different numbers of cards. */
.coaching-page .page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(13rem, 0.6fr);
  gap: var(--space-panel-lg);
  align-items: end;
}

.coaching-page .page-hero h1 {
  max-width: 13ch;
  font-size: var(--text-display);
  line-height: 0.98;
}

.coaching-page .hero-actions {
  flex-direction: column;
  align-items: stretch;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 1px solid var(--rule-strong);
}

/* Four service cards on a five-column field: wide, narrow, narrow, wide.
   The alternation is the point -- an even four-across is what this replaced. */
@media (min-width: 901px) {
  .coaching-page .calculator-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .coaching-page .calculator-card:nth-child(1),
  .coaching-page .calculator-card:nth-child(4) {
    grid-column: span 3;
  }

  .coaching-page .calculator-card:nth-child(2),
  .coaching-page .calculator-card:nth-child(3) {
    grid-column: span 2;
  }
}

/* Both plan cards already sit on a dark ground with white text, so neither
   background is touched here. Repainting the booking card cream left its white
   text in place and dropped it to 1.16:1 -- the same mistake as the medication
   review output. They are separated by weight and by an offset block instead.
   The ochre offset is decorative only, so it carries no contrast obligation. */
/* The three .plan-card paddings were three unrelated one-off clamps: 48, 41.6
   and 27.2 at their ceilings. They now sit on three panel steps that keep the
   same ordering, so the hierarchy the one-offs expressed survives the move. */
.coaching-page #booking-flow .plan-card {
  padding: var(--space-panel-md);
  box-shadow: 0.55rem 0.55rem 0 var(--accent);
}

.coaching-page #disclosure .plan-card {
  padding: var(--space-panel-xs);
  box-shadow: none;
}

.coaching-page #disclosure .plan-card h2 {
  font-size: var(--text-subhead);
}

/* ---- Members -----------------------------------------------------------
   A gate page has one job. A single decisive column beats a split, and the
   benefit list becomes ruled rather than boxed. Nothing here touches the
   access form itself. */
.member-access-hero h1 {
  max-width: 16ch;
  font-size: var(--text-display);
  line-height: 0.98;
}

.paid-access-benefits {
  display: grid;
  gap: 0;
}

.paid-access-benefits li {
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--rule);
}

.paid-access-benefits li:last-child {
  border-bottom: 0;
}

@media (max-width: 900px) {
  .about-hero,
  .library-hero,
  .coaching-page .page-hero {
    grid-template-columns: 1fr;
  }

  /* Stacked, so the rule beside the actions becomes a rule above them. */
  .coaching-page .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 0;
    padding-top: var(--space-sm);
    border-left: 0;
    border-top: 1px solid var(--rule-strong);
  }

  .about-hero-card {
    padding: var(--space-sm) 0 0;
    border-left: 0;
    border-top: 1px solid var(--rule-strong);
  }

  .about-focus-grid,
  .about-profile-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .framework-list {
    grid-template-columns: 1fr;
  }

  /* Stacked, so the vertical rules between roadmap stops become horizontal. */
  .roadmap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roadmap-grid > * {
    padding: var(--space-sm) 0 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .roadmap-grid > :first-child {
    padding-left: 0;
  }

  .pathway-grid > :first-child,
  .pathway-grid > :nth-child(n + 2) {
    grid-column: span 3;
  }
}

@media (max-width: 640px) {
  .about-focus-grid,
  .about-profile-links,
  .roadmap-grid {
    grid-template-columns: 1fr;
  }

  .pathway-grid > :first-child,
  .pathway-grid > :nth-child(n + 2) {
    grid-column: span 6;
  }

  .about-hero h1 {
    max-width: 14ch;
  }
}

/* ============================================================
   Advice Library index
   ------------------------------------------------------------
   Twenty-one articles were laid out as repeat(auto-fit, 18rem) --
   a wall of identical cards where nothing is more important than
   anything else, and the reader has to weigh all 21 at once.

   It becomes a magazine index instead: two leads keep the full
   image treatment, and everything after drops to a ruled row with
   a thumbnail. Same articles, same markup, a hierarchy the eye
   can actually move through.

   All of this is positional, so imported articles fall into the
   right treatment automatically and the generator needs no
   knowledge of it.
   ============================================================ */

/* Row gap is zero because the rules already separate the compact rows, and a
   gap on top of them wastes roughly a screen of height across nineteen
   entries. The leads carry their own bottom margin instead. */
.library-page .post-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 clamp(1rem, 2vw, 1.5rem);
}

/* ---- The two leads ------------------------------------------------------ */
.library-page .post-grid > .post-card:nth-child(-n + 2) {
  grid-column: span 6;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* The sprawling drop shadow goes. A structural border reads as considered;
   a 44px blur under every card reads as a default. */
.library-page .post-card {
  border: 1px solid var(--rule);
  box-shadow: none;
  transition:
    border-color var(--dur-fast) var(--ease-out-expo),
    transform var(--dur-mid) var(--ease-spring);
}

@media (hover: hover) {
  .library-page .post-grid > .post-card:nth-child(-n + 2):hover {
    transform: translate3d(0, -0.3rem, 0);
    border-color: rgba(15, 118, 110, 0.34);
  }
}

.library-page .post-grid > .post-card:nth-child(-n + 2) h3 {
  font-size: var(--text-subhead);
  line-height: 1.18;
}

/* ---- Everything after: a ruled contents row ----------------------------- */
.library-page .post-grid > .post-card:nth-child(n + 3) {
  display: grid;
  grid-column: span 12;
  grid-template-columns: clamp(4.5rem, 8vw, 7.5rem) minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 1.5rem);
  align-items: center;
  min-height: 0;
  padding: clamp(0.7rem, 1.5vw, 1.05rem) 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
}

/* The last row closes the list. */
.library-page .post-grid > .post-card:last-child {
  border-bottom: 1px solid var(--rule);
}

.library-page .post-grid > .post-card:nth-child(n + 3) .post-card-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--rule-subtle);
  border-bottom: 1px solid var(--rule-subtle);
  border-radius: 0.7rem;
}

.library-page .post-grid > .post-card:nth-child(n + 3) .post-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Infographics are tall; anchoring to the top keeps the title visible
     rather than cropping to a band of body text from the middle. */
  object-position: top center;
}

.library-page .post-grid > .post-card:nth-child(n + 3) .post-card-content {
  display: grid;
  gap: var(--space-3xs);
  padding: 0;
}

.library-page .post-grid > .post-card:nth-child(n + 3) .post-card-topline {
  grid-auto-flow: column;
  justify-content: start;
  gap: var(--space-xs);
  margin-bottom: 0;
  font-size: var(--text-micro);
}

.library-page .post-grid > .post-card:nth-child(n + 3) h3 {
  font-size: var(--text-lead);
  line-height: 1.26;
}

.library-page .post-grid > .post-card:nth-child(n + 3) p {
  /* Two lines is enough to judge whether to open it. */
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--text-small);
  line-height: 1.5;
}

/* This link stays. The h3 is not an anchor, so "Read article" is the only
   text link in the row -- hiding it left the image as the sole target, and its
   alt text describes the infographic rather than the article, which is what a
   screen reader would then announce. It is made quiet, not removed. */
.library-page .post-grid > .post-card:nth-child(n + 3) .post-link {
  justify-self: start;
  margin-top: 0.15rem;
  font-size: var(--text-micro);
}

@media (hover: hover) {
  .library-page .post-grid > .post-card:nth-child(n + 3) {
    transition:
      padding-inline var(--dur-mid) var(--ease-spring),
      background-color var(--dur-fast) var(--ease-out-expo);
  }

  .library-page .post-grid > .post-card:nth-child(n + 3):hover {
    padding-inline: var(--space-xs);
    background: rgba(242, 234, 219, 0.5);
  }
}

@media (max-width: 900px) {
  .library-page .post-grid > .post-card:nth-child(-n + 2) {
    grid-column: span 12;
  }
}

@media (max-width: 640px) {
  /* The thumbnail holds at a size that still reads, and the blurb drops so a
     row stays one glance rather than a paragraph. */
  .library-page .post-grid > .post-card:nth-child(n + 3) {
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: var(--space-xs);
  }

  /* Child combinator on purpose. The kicker and the date are also <p>, so a
     bare `p` rule here hid the whole topline and collapsed it to zero height,
     leaving rows with no category or date at all. Only the blurb is a direct
     child of .post-card-content. */
  .library-page .post-grid > .post-card:nth-child(n + 3) .post-card-content > p {
    display: none;
  }

  /* Some articles carry three categories, which wraps to a second line at this
     width and leaves the rows visibly uneven. One line, truncated. */
  .library-page .post-grid > .post-card:nth-child(n + 3) .card-kicker {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* Advice Library archive */
.library-archive {
  border-top: 1px solid var(--rule-strong);
}

.library-archive-heading {
  max-width: 50rem;
}

.library-archive-heading h2 {
  max-width: 22ch;
}

.library-archive-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow-x: auto;
  border-block: 1px solid var(--rule-strong);
  scrollbar-width: thin;
}

.library-archive-tabs [role="tab"] {
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  padding: var(--space-sm);
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 0.25rem solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.library-archive-tabs [role="tab"]:last-child {
  border-right: 0;
}

.library-archive-tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--primary);
  background: var(--surface);
  color: var(--primary-dark);
}

.library-archive-tabs [role="tab"]:nth-child(2)[aria-selected="true"] { border-bottom-color: #3f6f8f; }
.library-archive-tabs [role="tab"]:nth-child(3)[aria-selected="true"] { border-bottom-color: #a36b13; }
.library-archive-tabs [role="tab"]:nth-child(4)[aria-selected="true"] { border-bottom-color: #765781; }
.library-archive-tabs [role="tab"]:nth-child(5)[aria-selected="true"] { border-bottom-color: #a4493d; }

.library-archive-tabs [role="tab"]:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: -3px;
}

.library-archive-count {
  display: inline-grid;
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--text-micro);
}

.library-archive-panel {
  min-height: 12rem;
  padding-top: var(--space-md);
}

.library-archive-panel:focus {
  outline: 0;
}

.library-archive-list {
  border-top: 1px solid var(--rule);
}

.library-archive-card {
  display: grid;
  grid-template-columns: minmax(10rem, 0.7fr) minmax(14rem, 1.2fr) minmax(14rem, 1fr) auto;
  gap: var(--space-md);
  align-items: center;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--rule);
}

.library-archive-card .post-card-topline {
  margin: 0;
}

.library-archive-card h3 {
  font-size: var(--text-lead);
  line-height: 1.25;
}

.library-archive-card > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--text-small);
}

.library-archive-card .post-link {
  margin: 0;
  padding-top: 0;
  white-space: nowrap;
}

.library-archive-empty {
  max-width: 42rem;
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  border-left: 0.3rem solid var(--rule-strong);
  background: var(--surface-strong);
  color: var(--muted);
}

@media (max-width: 900px) {
  .library-archive-tabs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(10rem, 1fr);
  }

  .library-archive-card {
    grid-template-columns: minmax(9rem, 0.6fr) minmax(0, 1.4fr);
  }

  .library-archive-card > p,
  .library-archive-card .post-link {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .library-archive-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
  }

  .library-archive-tabs [role="tab"]:nth-child(even) {
    border-right: 0;
  }

  .library-archive-tabs [role="tab"]:last-child {
    grid-column: 1 / -1;
  }

  .library-archive-card {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .library-archive-card > p,
  .library-archive-card .post-link {
    grid-column: auto;
  }
}

/* Age Well Brief weekly resources */
.library-weekly-brief {
  padding-block: var(--space-xl);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  background: var(--surface-strong);
}

.library-weekly-brief .section-heading {
  max-width: 50rem;
  margin-bottom: var(--space-md);
}

.library-weekly-brief .section-heading h2 {
  max-width: 24ch;
  font-size: var(--text-heading);
}

.library-weekly-brief .section-heading > p:not(.eyebrow) {
  margin-top: var(--space-xs);
  font-size: var(--text-body);
}

.library-weekly-brief [id] {
  scroll-margin-top: 7rem;
}

.library-weekly-brief .card-kicker,
.weekly-resource-hero .eyebrow {
  color: var(--accent-strong);
}

.weekly-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.weekly-library-resource {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-md);
  border: 1px solid var(--rule-strong);
  border-radius: 0.4rem;
  background: var(--surface);
}

.weekly-library-resource h3 {
  margin-top: var(--space-2xs);
}

.weekly-library-resource .button {
  align-self: flex-start;
  margin-top: auto;
}

.weekly-library-meta {
  color: var(--primary-dark);
  font-weight: 750;
}

.weekly-library-market {
  display: flex;
  flex-direction: column;
}

.weekly-resource-page {
  background: var(--bg);
}

.weekly-resource-hero {
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--rule-strong);
}

.weekly-resource-hero h1 {
  max-width: 18ch;
}

.weekly-resource-lede {
  max-width: 68ch;
  margin-top: var(--space-sm);
  color: var(--muted);
  font-size: var(--text-lead);
}

.weekly-resource-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin: var(--space-lg) 0 0;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

.weekly-resource-stats div {
  min-width: 0;
  padding: var(--space-xs) var(--space-md);
  border-left: 1px solid var(--rule);
}

.weekly-resource-stats div:first-child {
  padding-left: 0;
  border-left: 0;
}

.weekly-resource-stats dt {
  color: var(--muted);
  font-size: var(--text-micro);
  font-weight: 800;
  text-transform: uppercase;
}

.weekly-resource-stats dd {
  margin: var(--space-3xs) 0 0;
  color: var(--text);
  font-weight: 750;
}

.weekly-resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.weekly-resource-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--rule);
}

.weekly-resource-nav a {
  color: var(--primary-dark);
  font-size: var(--text-small);
  font-weight: 750;
}

.weekly-resource-content {
  max-width: 58rem;
  margin-inline: auto;
  padding-top: var(--space-xl);
}

.weekly-resource-page [id] {
  scroll-margin-top: 7rem;
}

.library-weekly-brief [id] {
  scroll-margin-top: 7rem;
}

.weekly-plan-section {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--rule-strong);
}

.weekly-plan-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.weekly-plan-section h2 {
  max-width: 27ch;
  margin-bottom: var(--space-md);
}

.weekly-plan-section h3 {
  margin-top: var(--space-lg);
}

.weekly-plan-section h4 {
  margin-top: var(--space-md);
  color: var(--primary-dark);
  font-family: Inter, sans-serif;
  font-size: var(--text-body);
}

.weekly-plan-section p,
.weekly-plan-section li {
  max-width: 72ch;
}

.weekly-plan-list {
  margin: var(--space-sm) 0 var(--space-md);
  padding-left: var(--space-md);
}

.weekly-plan-list li + li {
  margin-top: var(--space-2xs);
}

#grocery-list ul.weekly-plan-list,
.weekly-recipe ul.weekly-plan-list {
  columns: 2 18rem;
  column-gap: var(--space-xl);
}

#grocery-list ul.weekly-plan-list li,
.weekly-recipe ul.weekly-plan-list li {
  break-inside: avoid;
}

.meal-meta {
  margin: 0;
  padding: var(--space-2xs) var(--space-sm);
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  font-size: var(--text-small);
}

.meal-meta + .meal-meta {
  padding-top: var(--space-3xs);
}

.weekly-table-scroll,
.market-table-wrap {
  max-width: 100%;
  margin: var(--space-md) 0;
  overflow-x: auto;
  border: 1px solid var(--rule-strong);
}

.weekly-plan-table,
.market-performance-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

.weekly-plan-table caption,
.market-performance-table caption {
  padding: var(--space-xs) var(--space-sm);
  color: var(--muted);
  font-size: var(--text-small);
  text-align: left;
}

.weekly-plan-table th,
.weekly-plan-table td {
  padding: var(--space-xs) var(--space-sm);
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.weekly-plan-table th {
  color: var(--text);
  background: var(--surface-strong);
}

.weekly-resource-closing {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  border-left: 5px solid var(--accent);
  background: var(--text);
  color: var(--surface);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--text-subhead);
  font-weight: 700;
}

.weekly-resource-note,
.weekly-method-note {
  margin-top: var(--space-xl);
  padding: var(--space-panel-sm);
  border: 1px solid var(--rule-strong);
  background: var(--surface-strong);
}

.weekly-resource-note h2,
.weekly-method-note h2 {
  font-size: var(--text-subhead);
}

.weekly-resource-back {
  margin-top: var(--space-xl);
  font-weight: 750;
}

.market-resource-content {
  max-width: 76rem;
}

.weekly-table-heading {
  margin-bottom: var(--space-md);
}

.market-performance-table {
  min-width: 64rem;
  font-size: var(--text-small);
}

.market-performance-table th,
.market-performance-table td {
  padding: var(--space-xs);
  border-top: 1px solid var(--rule);
  vertical-align: middle;
}

.market-performance-table thead th {
  background: var(--surface-strong);
  color: var(--text);
  text-align: left;
}

.market-performance-table td:nth-child(n + 4),
.market-performance-table thead th:nth-child(n + 4) {
  text-align: right;
}

.market-performance-table small {
  display: block;
  color: var(--muted);
  font-size: var(--text-micro);
  text-transform: uppercase;
}

.market-section-row th {
  padding-block: var(--space-2xs);
  background: var(--text);
  color: var(--surface);
  text-align: left;
}

.market-ticker {
  display: inline-block;
  min-width: 4.4rem;
  padding: var(--space-3xs) var(--space-2xs);
  background: var(--primary);
  color: var(--surface);
  text-align: center;
}

.market-return {
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.market-return.positive {
  color: var(--trend-good);
}

.market-return.negative {
  color: var(--trend-bad);
}

.market-return.neutral {
  color: var(--muted);
}

@media (max-width: 720px) {
  .weekly-library-grid {
    grid-template-columns: 1fr;
  }

  .weekly-resource-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weekly-resource-stats div,
  .weekly-resource-stats div:first-child {
    padding: var(--space-xs);
    border-top: 1px solid var(--rule);
    border-left: 0;
  }

  .weekly-resource-stats div:nth-child(-n + 2) {
    border-top: 0;
  }

  #grocery-list ul.weekly-plan-list,
  .weekly-recipe ul.weekly-plan-list {
    columns: 1;
  }

  .market-table-wrap {
    overflow: visible;
    border: 0;
  }

  .market-performance-table,
  .market-performance-table tbody,
  .market-performance-table tr,
  .market-performance-table th,
  .market-performance-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .market-performance-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .market-performance-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .market-performance-table tbody > tr:not(.market-section-row) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--space-sm);
    border: 1px solid var(--rule-strong);
    background: var(--surface);
  }

  .market-performance-table tbody > tr:not(.market-section-row) > * {
    display: grid;
    grid-template-columns: minmax(4.5rem, 0.75fr) minmax(0, 1.25fr);
    gap: var(--space-xs);
    padding: var(--space-xs);
    border-top: 1px solid var(--rule);
    text-align: left;
  }

  .market-performance-table tbody > tr:not(.market-section-row) > *:nth-child(-n + 3) {
    grid-column: 1 / -1;
  }

  .market-performance-table tbody > tr:not(.market-section-row) > *::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--text-micro);
    font-weight: 800;
    text-transform: uppercase;
  }

  .market-section-row th {
    margin-top: var(--space-lg);
  }
}

@media print {
  .site-header,
  .hero-actions,
  .trust-list,
  .newsletter-section,
  .newsletter-result-callout,
  .newsletter-modal,
  .weekly-resource-actions,
  .weekly-resource-nav,
  .site-guide-section,
  .admin-copilot-section,
  .checkup-form,
  .estimator-form,
  .savings-form,
  .wealthspan-form,
  .healthspan-form,
  .acb-picker,
  .review-form,
  .summary-actions,
  .member-save-check-in,
  .roadmap,
  .site-footer {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .section {
    width: 100%;
    padding-block: var(--space-sm);
  }

  .weekly-resource-content {
    max-width: none;
    padding-top: 0;
  }

  .weekly-plan-section,
  .weekly-recipe,
  .weekly-resource-note,
  .weekly-method-note {
    break-inside: avoid;
    box-shadow: none;
  }

  .market-performance-table {
    min-width: 0;
    font-size: 8pt;
  }

  .quick-check,
  .estimator-results,
  .savings-results,
  .wealthspan-results,
  .healthspan-results,
  .acb-results,
  .review-output,
  .results {
    border: 0;
    box-shadow: none;
  }

  .review-output,
  .estimator-results,
  .savings-results,
  .wealthspan-results,
  .healthspan-results,
  .acb-results,
  .results {
    background: white;
    color: black;
  }

  .review-output span,
  .review-output li,
  .acb-results span,
  .acb-results li,
  .results span,
  .results li {
    color: black;
  }

  /* A4 is 794px, which matches the 900px breakpoint that drops .metric-grid to
     a single column. On screen that is right; on paper it meant four cards
     stacked full width, each with two thirds of its row empty, using half the
     page to show four numbers. Two by two is the honest fit: four cards in
     238px instead of 500px, and at 353px each the longest label still sits on
     one line. This has to come after the max-width rule to win, which it does
     by source order rather than specificity. */
  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .metric-card {
    border: 1px solid #999;
    background: white;
    color: black;
  }

  .metric-card span,
  .metric-card small {
    color: black;
  }

  /* Brand colour has no job on paper. The report's eyebrow printed ochre and
     its priorities printed muted green, which on a colour printer look
     arbitrary and on a mono one come out as two different weak greys against
     black body text. Blackening the list also fixes the bullets, since
     ::marker inherits from it.

     Scoped to the report rather than applied to .eyebrow site-wide, and that
     is deliberate. A bare .eyebrow is (0,1,0) and loses to things like
     .section-heading p at (0,1,1), so an unscoped rule blackens some eyebrows
     and silently misses others -- measured across seven pages, it reached
     roughly half of them and none of the card kickers. Half-converted is worse
     than uniformly muted. The report is the surface designed to be printed;
     the site-wide print colour audit is a separate job. */
  .member-annual-report .eyebrow,
  .member-annual-report .assumption-list,
  .member-annual-report .source-note {
    color: black;
  }

  /* The masthead is the only thing identifying the printed sheet, so it does
     not get to fade. --muted and --rule are the screen values; on paper they
     become the same greys the metric cards already use. */
  .report-masthead {
    border-bottom-color: #999;
  }

  .report-domain,
  .report-printed {
    color: black;
  }

  body.printing-member-report main > * {
    display: none !important;
  }

  body.printing-member-report main > .member-annual-report {
    display: block !important;
  }
}