/* /learn and /blog: health guides and brand posts. Loaded after site.css; tokens come only from site.css.
   Motion: kit §9 (120/180/240/360/420 ms, standard easing, nothing loops, reduced motion = still).
   Library: no new library. Native CSS scroll-driven animations (D4) and cross-document View Transitions (D3). */

/* ---------- page frame ---------- */
.learn-page { background: var(--mineral); }
.learn-page .site-header { view-transition-name: site-header; }

.guide-top {
  display: grid; gap: 20px; padding-top: 16px; padding-bottom: 8px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "crumbs" "head" "plate" "safety" "intro";
}
.guide-top > .crumbs { grid-area: crumbs; }
.guide-top > .guide-head { grid-area: head; }
.guide-top > .plate { grid-area: plate; }
.guide-top > .safety { grid-area: safety; }
.guide-top > .guide-intro { grid-area: intro; }
@media (min-width: 1024px) {
  .guide-top {
    column-gap: 64px; row-gap: 24px; padding-top: 24px; align-items: start;
    grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
    grid-template-areas: "crumbs crumbs" "head plate" "safety plate" "intro plate";
    grid-template-rows: auto auto auto 1fr;
  }
}

/* the crisis page puts the numbers first and the drawing last on phones */
.is-crisis .guide-top { grid-template-areas: "crumbs" "head" "safety" "intro" "plate"; }
@media (min-width: 1024px) { .is-crisis .guide-top { grid-template-areas: "crumbs crumbs" "head plate" "safety plate" "intro plate"; } }

/* breadcrumb: the separator is drawn, never typed */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before {
  content: ""; width: 6px; height: 6px; margin: 0 10px 0 8px; flex: none;
  border-top: 1.5px solid var(--border-strong); border-right: 1.5px solid var(--border-strong); transform: rotate(45deg);
}
.crumbs a { color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.crumbs a:hover { color: var(--indigo-700); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--text); font-weight: 600; }

/* title block */
.guide-head { display: grid; gap: 12px; }
.guide-title { font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; max-width: 18em; }
.byline { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.powered { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--indigo-700); }
.byline + .powered { margin-top: -8px; }
@media (min-width: 1024px) {
  .guide-title { font-size: 50px; line-height: 56px; }
  .guide-head { gap: 16px; padding-top: 8px; }
  .byline + .powered { margin-top: -12px; }
}

/* the plate: the page's one illustrated moment */
.plate {
  display: grid; place-items: center; border-radius: var(--radius-card-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-soft);
  padding: 12px 16px; overflow: hidden;
}
/* phones and tablets: the plate is as tall as its drawing (a fixed 16:10 box left a wide band of empty plate around a 220px drawing) */
.plate .ill-hero { width: 100%; height: auto; max-height: 220px; }
@media (min-width: 1024px) {
  .plate { aspect-ratio: 4 / 3.4; padding: 24px; }
  .plate .ill-hero { max-height: none; }
}

/* ---------- illustrations ---------- */
.ill { overflow: visible; }
.ill .k-d, .ill .k-s, .ill .c-line, .ill .k-x, .ill .k-tick, .ill .k-sun, .ill .k-bar {
  fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
}
.ill .k-thick { stroke-width: 12; }
.ill .k-bar { stroke-width: 14; }
.ill .c-ind { stroke: var(--indigo); }
.ill .c-cor { stroke: var(--coral); }
.ill .c-tint { stroke: var(--indigo-accessible); }
.ill .c-soft { stroke: var(--border-strong); }
.ill .c-line { stroke: var(--border-soft); stroke-width: 3; }
.ill .f-cor { fill: var(--coral); }
.ill .f-ind { fill: var(--indigo); }
.ill .f-tint { fill: var(--indigo-tint); }
.ill .k-x { opacity: 0; } /* the racing line: settled (gone) unless the first-view motion runs */
.ill-mini .k-x { display: none; }
.ill-mini { width: 72px; height: 54px; flex: none; }
.ill-mini * { vector-effect: non-scaling-stroke; }
.ill-mini .k-d, .ill-mini .k-s, .ill-mini .k-tick, .ill-mini .k-sun { stroke-width: 2.5px; }
.ill-mini .k-thick { stroke-width: 4px; }
.ill-mini .k-bar { stroke-width: 5px; }
.ill-mini .c-line { stroke-width: 1.5px; }

/* PMOS hero: the old name is struck by a drawn line, the new name lands (recipe 2) */
.ill-name { display: grid; gap: 18px; align-content: center; width: 100%; padding: 8px 4px; }
.name-old { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-secondary); }
.name-strike { position: relative; display: inline-block; }
.name-strike::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: 52%; height: 3px; border-radius: 2px;
  background: var(--coral); transform-origin: 0 50%;
}
.name-new { font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.01em; color: var(--carbon); text-wrap: balance; }
.name-short { color: var(--coral-700); white-space: nowrap; }
@media (min-width: 1024px) {
  .name-old { font-size: 22px; line-height: 30px; }
  .name-new { font-size: 30px; line-height: 36px; }
}

/* first view: the plate draws itself once, inside 420 ms; reduced motion shows it complete */
@media (prefers-reduced-motion: no-preference) {
  .ill-hero .k-d { stroke-dasharray: 1 1; animation: ill-draw 300ms var(--ease) both; }
  .ill-hero .k-d.t2 { animation-delay: 120ms; }
  .ill-hero .k-f { animation: ill-land 180ms var(--ease) 240ms both; }
  .ill-hero .k-x { animation: ill-settle var(--t-slow) var(--ease) 60ms both; }
  .ill-hero.is-still .k-d { animation: none; stroke-dasharray: none; }
  .ill-name .name-strike::after { animation: strike 300ms var(--ease) both; }
  .ill-name .name-new { animation: land 180ms var(--ease) 240ms both; }
}
@keyframes ill-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ill-land { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ill-settle { from { opacity: 1; } to { opacity: 0; } }
.ill .k-f { transform-box: fill-box; transform-origin: center; }

/* ---------- safety box ---------- */
.safety {
  border-radius: var(--radius-control); background: var(--coral-tint); color: var(--carbon);
  padding: 12px 16px; font-size: 15px; line-height: 22px;
}
.safety a { color: var(--carbon); font-weight: 700; }
.safety a:first-child { margin-right: 2px; }
a[href^="tel:"] { white-space: nowrap; }
.safety-crisis { font-size: 17px; line-height: 26px; font-weight: 600; }

/* answer-first paragraph and intro */
.guide-intro { display: grid; gap: 16px; max-width: 38em; }
.answer { font-size: 19px; line-height: 30px; font-weight: 500; color: var(--carbon); }
.guide-intro > p:not(.answer) { font-size: 17px; line-height: 29px; }
@media (min-width: 1024px) { .answer { font-size: 20px; line-height: 32px; } .guide-intro > p:not(.answer) { font-size: 18px; line-height: 31px; } }

/* ---------- body: prose column + table of contents ---------- */
.guide-body {
  display: grid; gap: 24px; padding-bottom: var(--section);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .guide-body { grid-template-columns: minmax(0, 680px) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .guide-body > .toc { grid-column: 2; grid-row: 1; }
  .guide-body > .prose { grid-column: 1; grid-row: 1; }
}

.prose { display: grid; gap: 0; min-width: 0; }
.sec { padding-top: 48px; display: grid; gap: 16px; align-content: start; }
.sec > p, .sec .answer p, .sec > .dots li, .sec > .steps-list li { font-size: 17px; line-height: 29px; }
.sec > p, .sec > .dots, .sec > .steps-list { max-width: 38em; }
@media (min-width: 1024px) {
  .sec { padding-top: 56px; gap: 18px; }
  .sec > p, .sec > .dots li, .sec > .steps-list li { font-size: 18px; line-height: 31px; }
}
.sec strong { font-weight: 700; }
.sub-title { font-size: 19px; line-height: 26px; font-weight: 700; }

.sec-head { display: flex; align-items: flex-start; gap: 6px; position: relative; }
.sec-title { font-size: 25px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; scroll-margin-top: calc(var(--header-h) + 16px); }
@media (min-width: 1024px) { .sec-title { font-size: 30px; line-height: 38px; } }
.h-link {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -6px 0 0 -2px;
  border: 0; border-radius: var(--radius-control); background: none; color: var(--text-secondary); cursor: pointer;
  opacity: 0.6; transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.h-link svg { width: 18px; height: 18px; }
.h-link:hover, .h-link:focus-visible, .sec-head:hover .h-link { opacity: 1; color: var(--indigo-700); background: var(--surface-subtle); }
.h-link:active { transform: scale(0.98); transition-duration: var(--t-instant); }
.h-link.is-copied { opacity: 1; color: var(--indigo-700); }
@media (min-width: 1024px) { .h-link { position: absolute; left: -50px; top: 0; margin: 0; } }

.dots { display: grid; gap: 8px; }
.dots li { position: relative; padding-left: 22px; }
.dots li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--indigo); }
.steps-list { display: grid; gap: 10px; counter-reset: step; }
.steps-list li { position: relative; padding-left: 40px; counter-increment: step; }
.steps-list li::before {
  content: counter(step); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; line-height: 1; font-weight: 700; color: var(--indigo-700); box-shadow: inset 0 0 0 1.5px var(--indigo);
}

/* table of contents: sticky rail on desktop, a collapsible box on phones */
.toc { min-width: 0; }
.toc-box { border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-soft); }
.toc-box > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 12px 16px; font-weight: 600; font-size: 16px; line-height: 24px; border-radius: var(--radius-card);
}
.toc-box > summary::-webkit-details-marker { display: none; }
.toc-box > summary::after {
  content: ""; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--carbon); border-bottom: 2px solid var(--carbon);
  transform: translateY(-3px) rotate(45deg); transition: transform var(--t-fast) var(--ease);
}
.toc-box[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
.toc ol { display: grid; gap: 2px; padding: 0 8px 12px; }
.toc a {
  position: relative; display: block; padding: 8px 10px 8px 16px; border-radius: 8px;
  font-size: 15px; line-height: 21px; color: var(--text-secondary); text-decoration: none;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.toc a::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: transparent; transition: background-color var(--t-fast) var(--ease); }
.toc a:hover { color: var(--carbon); background: var(--surface-subtle); }
.toc a:active { color: var(--indigo-700); background: var(--indigo-tint); }
.toc-box > summary { transition: color var(--t-fast) var(--ease); }
.toc-box > summary:hover { color: var(--indigo-700); }
.toc-box > summary:active { color: var(--indigo); }
.toc a[aria-current="location"] { color: var(--carbon); font-weight: 600; }
.toc a[aria-current="location"]::before { background: var(--indigo); }
@media (min-width: 1024px) {
  .toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; padding-top: 48px; }
  .toc-box { background: none; box-shadow: none; }
  .toc-box > summary { pointer-events: none; min-height: 0; padding: 0 0 10px 12px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
  .toc-box > summary::after { display: none; }
  .toc ol { padding: 0; }
}

/* reading progress: tied to the page scroll in CSS; learn.js sets --p only where scroll timelines are missing */
.read-progress {
  position: fixed; z-index: 99; top: var(--header-h); left: 0; right: 0; height: 2px;
  background: var(--indigo); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .read-progress { animation: read-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .read-progress { display: none; } }

/* pull-quote card */
.pull { margin: 16px 0 8px; padding: 4px 0 4px; max-width: 30em; }
.pull-rule { width: 96px; height: 8px; margin-bottom: 14px; overflow: visible; }
.pull-rule path { fill: none; stroke-width: 5; stroke-linecap: round; stroke: var(--coral); }
.pull p { font-size: 24px; line-height: 32px; font-weight: 800; letter-spacing: -0.01em; color: var(--carbon); text-wrap: balance; }
@media (min-width: 1024px) { .pull p { font-size: 28px; line-height: 36px; } }

/* counsellor card (no price; never on get-help-now) */
.care {
  display: grid; gap: 16px; margin: 16px 0 8px; padding: 22px 20px; border-radius: var(--radius-card-lg);
  background: var(--indigo-tint); color: var(--carbon);
  grid-template-columns: auto minmax(0, 1fr); align-items: center;
}
.care .care-mark { width: 56px; height: 42px; }
.care-copy { display: grid; gap: 4px; }
.care-copy p { font-size: 17px; line-height: 25px; font-weight: 600; }
.care-btn { grid-column: 1 / -1; }
@media (min-width: 768px) { .care { grid-template-columns: auto minmax(0, 1fr) auto; padding: 24px 28px; } .care-btn { grid-column: auto; } }
.btn { transition: background-color var(--t-fast) var(--ease), transform var(--t-instant) var(--ease); }
.btn:active { transform: scale(0.98); }

/* questions: site.css .faq recipe 9; links in answers */
.sec .faq { margin-top: 4px; }
.faq .answer p { font-size: 16px; line-height: 26px; }
.faq summary { transition: color var(--t-fast) var(--ease); }
.faq summary:hover { color: var(--indigo-700); }

/* related reads and hub cards */
.related, .cards, .posts { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .related, .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .related { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rel-card, .card, .post-card {
  height: 100%; display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: var(--radius-card);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-soft); color: var(--text); text-decoration: none;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.rel-card:hover, .card:hover, .post-card:hover { box-shadow: inset 0 0 0 1px var(--border-strong); transform: translateY(-2px); }
.rel-card:active, .card:active, .post-card:active { transform: scale(0.98); transition-duration: var(--t-instant); }
.rel-sec, .post-date { font-size: 13px; line-height: 18px; color: var(--text-secondary); font-weight: 600; }
.rel-title, .card-q { font-size: 17px; line-height: 24px; font-weight: 700; text-wrap: pretty; }
.post-title { font-size: 21px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; }
.post-excerpt { font-size: 16px; line-height: 24px; color: var(--text-secondary); }
.post-card .ill-mini { width: 96px; height: 72px; }
.all-guides { margin-top: 8px; font-weight: 600; }
/* a link on its own line is not "in a sentence": it gets the 24 px minimum target (WCAG 2.2 2.5.8) */
.all-guides a { display: inline-flex; align-items: center; min-height: 24px; }

/* /answers: each answer is a few short paragraphs, then the guides it feeds */
.ans-text { display: grid; gap: 12px; max-width: 38em; }
.ans-text p { font-size: 17px; line-height: 29px; }
.ans-more { font-size: 15px; line-height: 24px; font-weight: 600; max-width: 38em; }
.ans-more a { display: inline-flex; align-items: center; min-height: 24px; }

/* sources and health note */
.sources { display: grid; gap: 10px; counter-reset: src; max-width: 42em; }
.sources li { position: relative; padding-left: 30px; font-size: 15px; line-height: 23px; color: var(--text-secondary); counter-increment: src; }
.sources li::before { content: counter(src) "."; position: absolute; left: 0; top: 0; font-weight: 600; color: var(--text-secondary); }
.src-pub { color: var(--text); font-weight: 600; }
.sources a { color: var(--indigo-700); }
.health-note {
  margin-top: 40px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--surface-subtle);
  font-size: 14px; line-height: 22px; color: var(--text); max-width: 42em;
}

/* ---------- teaching interactions (kit §9; one state change per press; nothing stored) ---------- */
.widget, .tabs {
  display: grid; gap: 14px; margin: 8px 0; padding: 18px; border-radius: var(--radius-card);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-soft); max-width: 40em;
}
.widget-title { font-size: 17px; line-height: 24px; font-weight: 800; }
.widget-hint, .widget-note { font-size: 14px; line-height: 21px; color: var(--text-secondary); }
.widget p:not(.widget-title):not(.widget-hint):not(.widget-note), .tab-panel li { font-size: 16px; line-height: 25px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px;
  border: 0; border-radius: 999px; background: var(--mineral); color: var(--carbon); cursor: pointer;
  font: 600 15px/20px var(--font); box-shadow: inset 0 0 0 1.5px var(--border-strong);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-instant) var(--ease);
}
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--carbon); }
.chip:active { transform: scale(0.98); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--carbon); color: var(--mineral); box-shadow: inset 0 0 0 1.5px var(--carbon); }
/* the chosen chip still answers the pointer: a lighter carbon on hover */
.chip[aria-pressed="true"]:hover, .chip[aria-selected="true"]:hover { background: var(--carbon-raised); box-shadow: inset 0 0 0 1.5px var(--carbon-raised); }

/* content shown by learn.js after a press: opacity + 8 px, 240 ms, once per press */
@media (prefers-reduced-motion: no-preference) {
  .is-revealed { animation: rise var(--t-base) var(--ease) both; }
  .tab-panel.is-revealed li { animation: rise var(--t-base) var(--ease) both; }
  .tab-panel.is-revealed li:nth-child(2) { animation-delay: 60ms; }
  .tab-panel.is-revealed li:nth-child(3) { animation-delay: 120ms; }
  .tab-panel.is-revealed li:nth-child(4) { animation-delay: 180ms; }
}
@media (prefers-reduced-motion: reduce) {
  .is-revealed { animation: fade-in 80ms linear both; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* tabs: without JavaScript every panel shows with its own title */
.tab-panel { display: grid; gap: 8px; }
.tab-panel + .tab-panel { padding-top: 6px; }
.panel-title { font-weight: 700; font-size: 15px; line-height: 22px; color: var(--text-secondary); }
.tabs.is-live .panel-title { display: none; }
.tabs.is-live .tab-panel + .tab-panel { padding-top: 0; }

/* week strip */
.week-days { gap: 6px; }
.chip.day { min-width: 48px; padding: 10px 8px; }
.week-idea { font-weight: 600; }

/* worry tree */
.tree-q { font-weight: 700; }
.tree-branches { display: grid; gap: 10px; }
@media (min-width: 640px) { .tree-branches { grid-template-columns: 1fr 1fr; } }
.branch { padding: 12px 14px; border-radius: var(--radius-control); background: var(--mineral); }
.tree-lines { width: 240px; height: 60px; order: -1; display: none; }
.tree-lines path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke: var(--indigo); }
@media (min-width: 640px) { .tree-lines { display: block; justify-self: center; margin-bottom: -10px; } .tree .tree-lines { order: 0; } }

/* cycle dial */
.dial-grid { display: grid; gap: 16px; align-items: center; }
@media (min-width: 640px) { .dial-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; } }
.dial-ring { width: 180px; height: 180px; justify-self: center; }
.dial-ring .ring-base { fill: none; stroke: var(--indigo-tint); stroke-width: 14; }
.dial-ring .arc-pms, .dial-ring .arc-all { fill: none; stroke: var(--coral); stroke-width: 14; stroke-linecap: round; transition: opacity var(--t-base) var(--ease); }
.dial-ring .arc-all { stroke: var(--coral-accessible); opacity: 0; }
.dial-ring .day-one { fill: var(--indigo); }
.dial[data-state="all"] .arc-all { opacity: 1; }
.dial[data-state="all"] .arc-pms { opacity: 0; }
.dial-copy { display: grid; gap: 12px; }

/* thyroid pace */
.pace-waves { width: 100%; max-width: 320px; height: 80px; }
.pace-waves path { fill: none; stroke: var(--coral); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: opacity var(--t-base) var(--ease); }
.pace .wave-fast { opacity: 0; }
.pace[data-state="over"] .wave-fast { opacity: 1; }
.pace[data-state="over"] .wave-slow { opacity: 0; }

/* the stat figures (recipe 5), reused with their source */
.stat { display: grid; gap: 10px; margin: 8px 0; max-width: 30em; }
.stat-figures { width: 100%; max-width: 300px; height: auto; overflow: visible; }

/* first-year line (postpartum) */
.year { margin: 8px 0; max-width: 40em; }
.year-line { position: relative; display: grid; grid-template-columns: 1fr 1fr 4fr; padding-top: 22px; }
.year-line::before { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 3px; border-radius: 2px; background: var(--indigo); transform-origin: 0 50%; }
.year-mark { position: relative; font-size: 14px; line-height: 20px; color: var(--text-secondary); padding-right: 8px; white-space: nowrap; }
.year figcaption { margin-top: 12px; font-size: 15px; line-height: 23px; color: var(--text); white-space: normal; }
.year-mark::before { content: ""; position: absolute; left: 0; top: -22px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 3px var(--indigo); }
.year-mark:last-child { text-align: right; padding-right: 0; }
.year-mark:last-child::before { left: auto; right: 0; }
.year-mark.is-band::after { content: ""; position: absolute; left: -100%; right: 100%; top: -30px; height: 30px; border-radius: 8px; background: var(--indigo-tint); z-index: -1; }
.year-line { isolation: isolate; }

/* compare cards */
.cmp-cards { display: grid; gap: 12px; }
@media (min-width: 640px) { .cmp-cards { grid-template-columns: 1fr 1fr; } }
.cmp-card { padding: 16px; border-radius: var(--radius-control); background: var(--mineral); box-shadow: inset 0 0 0 1px var(--border-soft); transition: box-shadow var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.cmp-title { font-size: 17px; line-height: 24px; font-weight: 800; margin-bottom: 8px; }
.cmp-row { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.cmp-row dt { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-secondary); }
.cmp-row dd { margin: 0; font-size: 15px; line-height: 22px; }
.compare[data-state="blues"] [data-card="blues"], .compare[data-state="ppd"] [data-card="ppd"] { box-shadow: inset 0 0 0 2px var(--border-strong); }
.compare[data-state="blues"] [data-card="ppd"], .compare[data-state="ppd"] [data-card="blues"] { opacity: 0.6; }

/* reason cards (always tired): native details */
.reason-grid { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .reason-grid { grid-template-columns: 1fr 1fr; } }
.reason { border-radius: var(--radius-control); background: var(--mineral); box-shadow: inset 0 0 0 1px var(--border-soft); transition: box-shadow var(--t-fast) var(--ease); }
.reason:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.reason summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 12px 14px; font-weight: 700; font-size: 16px; line-height: 22px; }
.reason summary::-webkit-details-marker { display: none; }
.reason summary { transition: color var(--t-fast) var(--ease); }
.reason summary:hover { color: var(--indigo-700); }
.reason summary:active { color: var(--indigo); }
.reason summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--carbon); border-bottom: 2px solid var(--carbon); transform: translateY(-2px) rotate(45deg); transition: transform var(--t-fast) var(--ease); }
.reason[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.reason p { padding: 0 14px 10px; font-size: 15px; line-height: 22px; }
.reason p:last-child { padding-bottom: 14px; }
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .reason-grid, .toc { interpolate-size: allow-keywords; }
    .reason::details-content, .toc-box::details-content {
      block-size: 0; overflow: clip;
      transition: block-size var(--t-slow) var(--ease), content-visibility var(--t-slow) var(--ease) allow-discrete;
    }
    .reason[open]::details-content, .toc-box[open]::details-content { block-size: auto; }
  }
}

/* who can… (counsellor table) */
.table-wrap { overflow-x: auto; max-width: 40em; border-radius: var(--radius-control); box-shadow: inset 0 0 0 1px var(--border-soft); background: var(--surface); }
.roles { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.roles th, .roles td { padding: 10px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-soft); transition: background-color var(--t-fast) var(--ease); }
.roles thead th { font-weight: 700; color: var(--carbon); }
.roles tbody th { font-weight: 600; color: var(--text-secondary); width: 34%; }
.roles tr:last-child th, .roles tr:last-child td { border-bottom: 0; }
@media (max-width: 639px) {
  .roles { table-layout: fixed; font-size: 13px; line-height: 18px; }
  .roles th, .roles td { padding: 8px 4px; }
  .roles td:first-child, .roles tbody th { width: 26%; padding-left: 8px; }
  .roles thead th { font-size: 12px; line-height: 16px; }
}
@media (min-width: 640px) { .roles { font-size: 15px; line-height: 22px; } .roles th, .roles td { padding: 12px 14px; } }
.roles[data-hl="1"] [data-col="1"], .roles[data-hl="2"] [data-col="2"], .roles[data-hl="3"] [data-col="3"] { background: var(--indigo-tint); }

/* call buttons (get-help-now): the only motion is the press */
.call-row { display: grid; gap: 10px; }
@media (min-width: 640px) { .call-row { grid-template-columns: 1fr 1fr; max-width: 40em; } }
.call {
  display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 14px 20px; border-radius: var(--radius-control);
  font-size: 18px; line-height: 24px; font-weight: 800; text-decoration: none; transition: background-color var(--t-fast) var(--ease), transform var(--t-instant) var(--ease);
}
.call:active { transform: scale(0.98); }
.call-112 { background: var(--coral); color: var(--carbon); }
.call-112:hover { background: var(--coral-accessible); }
.call-tm { background: var(--indigo); color: var(--mineral); }
.call-tm:hover { background: var(--indigo-700); }
.call-alt { font-size: 16px; line-height: 24px; }

/* how-we-write journey: the connector fills as she scrolls (recipe 6, in CSS) */
.journey { display: grid; gap: 0; }
.j-step { position: relative; padding: 0 0 18px 34px; }
.j-step::before { content: ""; position: absolute; left: 4px; top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 3px var(--indigo); }
.j-step:nth-child(5)::before { box-shadow: inset 0 0 0 3px var(--coral); }
.j-step:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 30px; bottom: -8px; width: 2px; border-radius: 1px; background: var(--indigo); transform-origin: 50% 0; }
.j-btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; margin-left: -12px; border: 0; border-radius: var(--radius-control);
  background: none; color: var(--carbon); font: 700 16px/24px var(--font); cursor: pointer; text-align: left;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-instant) var(--ease);
}
.j-btn:disabled { cursor: default; }
.j-btn:not(:disabled):hover { background: var(--surface-subtle); }
.j-btn:not(:disabled):active { transform: scale(0.98); }
.j-btn[aria-pressed="true"] { background: var(--indigo-tint); }
.j-line { font-size: 15px; line-height: 23px; color: var(--text); }

/* hub */
.learn-hub .guide-intro { padding-bottom: 8px; }
.hub-filter { display: grid; gap: 10px; margin-top: 4px; }
.filter-label { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text-secondary); }
.hub-groups { display: grid; gap: 28px; margin-top: 12px; }
.hub-group { display: grid; gap: 12px; scroll-margin-top: calc(var(--header-h) + 16px); }
.group-title { font-size: 19px; line-height: 26px; font-weight: 800; }
.card { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; min-height: 92px; }
.prose-hub .sec-start > p { max-width: 38em; }
@media (min-width: 1024px) { .learn-hub .guide-body, .blog-hub .guide-body { grid-template-columns: minmax(0, 1fr); } .prose-hub > .sec:not(.sec-start) { max-width: 680px; } }

/* blog */
.app-pill {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 44px; padding: 10px 16px; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong); font-size: 15px; line-height: 20px; font-weight: 600;
}
.app-pill svg { width: 20px; height: 20px; color: var(--indigo); }
.app-pill a { color: var(--indigo-700); }
.feed-line { font-size: 15px; line-height: 22px; color: var(--text-secondary); }

/* ---------- scroll-driven illustration beats (D4): CSS only; content is visible by default ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pull-rule path, .tree-lines path { stroke-dasharray: 1 1; animation: ill-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
    .stat-figures .figure { animation: rise linear both; animation-timeline: view(); animation-range: entry 15% cover 30%; }
    .stat-figures .figure.is-one { animation: rise linear both, turn-coral linear both; animation-timeline: view(), view(); animation-range: entry 15% cover 30%, cover 30% cover 40%; }
    .year-line::before { animation: grow-x linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
    .j-step:not(:last-child)::after { animation: grow-y linear both; animation-timeline: view(); animation-range: entry 60% cover 40%; }
  }
}
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- page changes: native cross-document View Transitions (D3); the guide's plate morphs from its card ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: var(--t-slow); animation-timing-function: var(--ease); }
  ::view-transition-old(root) { animation-duration: var(--t-base); animation-timing-function: var(--ease-exit); }
  ::view-transition-new(root) { animation-duration: var(--t-base); animation-timing-function: var(--ease); }
}
.vt-learn { view-transition-name: topic-learn; }
.vt-get-help-now { view-transition-name: topic-get-help-now; }
.vt-how-we-write { view-transition-name: topic-how-we-write; }
.vt-depression-in-women { view-transition-name: topic-depression-in-women; }
.vt-feeling-low-for-weeks { view-transition-name: topic-feeling-low-for-weeks; }
.vt-anxiety-in-women { view-transition-name: topic-anxiety-in-women; }
.vt-overthinking-at-night { view-transition-name: topic-overthinking-at-night; }
.vt-always-tired { view-transition-name: topic-always-tired; }
.vt-pms-pmdd-mood { view-transition-name: topic-pms-pmdd-mood; }
.vt-pcos-pmos-and-mood { view-transition-name: topic-pcos-pmos-and-mood; }
.vt-thyroid-and-mood { view-transition-name: topic-thyroid-and-mood; }
.vt-postpartum-depression { view-transition-name: topic-postpartum-depression; }
.vt-counsellor-psychologist-psychiatrist { view-transition-name: topic-counsellor-psychologist-psychiatrist; }
.vt-blog { view-transition-name: topic-blog; }
.vt-meet-nari-1 { view-transition-name: topic-meet-nari-1; }
.vt-answers { view-transition-name: topic-answers; }

/* the crisis page never moves (draft brief): no draw, no transition morph */
.is-crisis .ill-hero .k-d { animation: none !important; stroke-dasharray: none !important; }