/* Shared OD theme; homepage calculator and article adaptations use the same tokens. */

    :root {
      --bg: oklch(0.975 0.018 86);
      --surface: oklch(0.995 0.006 88);
      --fg: oklch(0.265 0.036 150);
      --muted: oklch(0.49 0.028 135);
      --border: oklch(0.885 0.025 100);
      --accent: oklch(0.47 0.085 145);
      --font-display: Georgia, 'Times New Roman', serif;
      --font-body: Arial, Helvetica, sans-serif;
      --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
      --container: 1180px;
      --gutter: 28px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
    body { margin: 0; min-width: 0;  background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
    img, svg { display: block; max-width: 100%; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    a { color: inherit; text-underline-offset: 3px; }
    p { text-wrap: pretty; }
    h1, h2, h3 { text-wrap: balance; }
    [hidden] { display: none !important; }
    .container { width: min(var(--container), 100%); margin-inline: auto; padding-inline: var(--gutter); }
    .skip { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--fg); color: var(--surface); }
    .skip:focus { top: 12px; }
    .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
    .eyebrow { margin: 0 0 9px; color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
    .meta { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }

    .hero { position: relative; min-height: 662px; overflow: hidden; isolation: isolate; }
    .hero-art { position: absolute; inset: 0; z-index: -3; }
    .hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 39%; }
    .hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in oklch, var(--bg) 96%, transparent) 0%, color-mix(in oklch, var(--bg) 86%, transparent) 30%, color-mix(in oklch, var(--bg) 20%, transparent) 57%, color-mix(in oklch, var(--bg) 3%, transparent) 100%), linear-gradient(0deg, color-mix(in oklch, var(--bg) 40%, transparent) 0%, transparent 48%); }
    .topnav { position: relative; z-index: 4; border-bottom: 1px solid color-mix(in oklch, var(--border) 72%, transparent); background: color-mix(in oklch, var(--bg) 76%, transparent); backdrop-filter: none; }
    .topnav-inner { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .brand { display: inline-flex; min-height: 44px; align-items: center; gap: 11px; text-decoration: none; }
    .brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1.5px solid var(--fg); border-radius: 45% 55% 50% 46%; background: color-mix(in oklch, var(--surface) 86%, transparent); transform: rotate(-2deg); }
    .brand-mark svg { width: 23px; height: 23px; transform: rotate(2deg); }
    .brand-copy { display: flex; flex-direction: column; line-height: 1.04; }
    .brand-copy strong { font-family: var(--font-display); font-size: 18px; letter-spacing: -.02em; }
    .brand-copy span { margin-top: 4px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .19em; text-transform: uppercase; }
    .trust-note { display: flex; align-items: center; gap: 8px; color: var(--fg); font-size: 12px; font-weight: 650; }
    .trust-note svg { width: 18px; height: 18px; }
    .hero-intro { position: relative; z-index: 2; min-height: 202px; padding-top: 34px; }
    .hero-intro h1 { max-width: 620px; margin: 0; font-family: var(--font-display); font-size: clamp(44px, 4.5vw, 62px); line-height: .98; letter-spacing: -.042em; }
    .hero-intro .lead { max-width: 48ch; margin: 11px 0 0; color: color-mix(in oklch, var(--fg) 80%, var(--muted)); font-size: 16px; line-height: 1.45; }

    .calculator-card { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(315px, 40%) minmax(0, 60%); min-height: 344px; overflow: hidden; border: 1px solid color-mix(in oklch, var(--surface) 58%, var(--border)); border-radius: 23px 27px 22px 25px; background: transparent; box-shadow: 0 18px 46px color-mix(in oklch, var(--fg) 9%, transparent); }
    .calculator-form { padding: 22px 26px 18px; border-right: 1px solid color-mix(in oklch, var(--surface) 58%, var(--border)); background: color-mix(in oklch, var(--surface) 94%, transparent); }
    .form-kicker { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
    .sketch-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 43% 57% 46% 54%; background: color-mix(in oklch, var(--bg) 72%, var(--surface)); transform: rotate(-2deg); }
    .sketch-icon svg { width: 23px; height: 23px; transform: rotate(2deg); }
    .form-kicker h2, .result-heading { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.15; letter-spacing: -.015em; }
    .field { display: flex; flex-direction: column; gap: 7px; }
    .field label { font-size: 13px; font-weight: 750; }
    .date-wrap { position: relative; }
    .input { width: 100%; min-height: 52px; padding: 11px 46px 11px 14px; border: 1px solid color-mix(in oklch, var(--border) 82%, var(--fg)); border-radius: 11px; background: var(--surface); color: var(--fg); font-size: 16px; }
    .input::-webkit-calendar-picker-indicator { position: absolute; right: 0; width: 48px; height: 100%; opacity: 0; cursor: pointer; }
    .date-wrap > svg { position: absolute; right: 13px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); pointer-events: none; }
    .hint { margin: 0; color: var(--muted); font-size: 12px; }
    .text-button { display: inline-flex; min-height: 44px; align-items: center; margin: 7px 0 9px; padding: 3px 0; border: 0; background: transparent; color: var(--fg); font-size: 13px; font-weight: 700; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
    .text-button:hover { text-decoration-thickness: 2px; }
    .btn { display: inline-flex; width: 100%; min-height: 50px; align-items: center; justify-content: center; gap: 10px; padding: 11px 18px; border: 1px solid var(--accent); border-radius: 11px; background: var(--accent); color: var(--surface); font-weight: 800; transition: transform .08s ease, background .16s ease; }
    .btn:hover { background: color-mix(in oklch, var(--accent) 88%, var(--fg)); color: var(--surface); }
    .btn:active { transform: translateY(1px); }
    .btn svg { width: 18px; height: 18px; }
    .error { min-height: 18px; margin: 5px 0 0; color: var(--fg); font-size: 12px; font-weight: 750; }
    .privacy { display: flex; align-items: center; gap: 7px; margin: 4px 0 0; color: var(--muted); font-size: 11px; }
    .privacy svg { width: 14px; height: 14px; flex: 0 0 auto; }

    .result-pane { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; padding: 22px 28px 18px; overflow: hidden; background: color-mix(in oklch, var(--bg) 15%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .result-pane::before { content: ''; position: absolute; inset: 0 26% 0 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in oklch, var(--bg) 80%, transparent) 0%, color-mix(in oklch, var(--bg) 56%, transparent) 52%, color-mix(in oklch, var(--bg) 18%, transparent) 82%, transparent 100%); }
    .result-pane > * { position: relative; z-index: 1; }
    .result-heading { position: relative; z-index: 1; }
    .empty-state { flex: 1; display: grid; place-items: center; min-height: 172px; text-align: center; }
    .empty-dog { width: 122px; height: 86px; margin-inline: auto; color: color-mix(in oklch, var(--fg) 70%, var(--muted)); }
    .empty-state p { max-width: 34ch; margin: 8px auto 0; color: var(--muted); font-size: 14px; }
    .due-date { max-width: 100%; margin: 7px 0 2px; font-family: var(--font-display); font-size: clamp(38px, 4vw, 54px); font-weight: 700; line-height: .98; letter-spacing: -.035em; }
    .window-label { margin: 14px 0 2px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .range { margin: 0; font-size: 14px; font-weight: 750; }
    .basis { margin: 4px 0 0; color: color-mix(in oklch, var(--fg) 76%, var(--muted)); font-size: 11.5px; font-weight: 560; }
    .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
    .stat { padding: 8px 10px; border: 1px solid color-mix(in oklch, var(--border) 72%, transparent); border-radius: 10px; background: color-mix(in oklch, var(--surface) 38%, transparent); }
    .stat strong { display: block; font-family: var(--font-mono); font-size: 17px; line-height: 1.1; }
    .stat span { display: block; margin-top: 3px; color: color-mix(in oklch, var(--fg) 72%, var(--muted)); font-size: 10px; font-weight: 620; line-height: 1.2; }
    .prepare { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--border); }
    .prepare-icon { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid color-mix(in oklch, var(--border) 48%, transparent); border-radius: 48% 52% 45% 55%; background: color-mix(in oklch, var(--surface) 22%, transparent); }
    .prepare-icon svg { width: 25px; height: 25px; }
    .prepare h3 { margin: 0; font-family: var(--font-display); font-size: 16px; }
    .prepare p { margin: 3px 0 0; color: color-mix(in oklch, var(--fg) 76%, var(--muted)); font-size: 11.5px; font-weight: 540; line-height: 1.4; }
    .overdue-note { margin: 11px 0 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--fg); font-size: 11.5px; line-height: 1.4; }
    .result-note { margin: auto 0 0; padding-top: 10px; color: color-mix(in oklch, var(--fg) 76%, var(--muted)); font-size: 10.5px; font-weight: 540; line-height: 1.35; }

    .guide-strip { padding: 52px 0 66px; background: var(--bg); }
    .section-heading { max-width: 760px; margin-bottom: 28px; }
    .section-heading h2, .reading h2 { margin: 0; font-family: var(--font-display); font-size: clamp(32px, 4vw, 50px); line-height: 1.05; letter-spacing: -.03em; }
    .section-heading p { margin: 10px 0 0; color: var(--muted); }
    .guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .guide-card { position: relative; min-height: 188px; padding: 23px 22px 20px; overflow: hidden; border: 1px solid var(--border); border-radius: 18px 21px 17px 22px; background: var(--surface); text-decoration: none; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
    .guide-card:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--border) 65%, var(--fg)); box-shadow: 0 14px 32px color-mix(in oklch, var(--fg) 7%, transparent); }
    .guide-card h3 { max-width: 13ch; margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.12; }
    .guide-card p { max-width: 25ch; margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
    .guide-illustration { position: absolute; right: 9px; bottom: 4px; width: 116px; height: 92px; color: color-mix(in oklch, var(--fg) 72%, var(--muted)); }
    .dog-wash { fill: color-mix(in oklch, var(--border) 58%, transparent); }
    .dog-nose { fill: currentColor; stroke: none; }

    .reading { background: var(--surface); }
    .reading-inner { width: min(1160px, 100%); margin-inline: auto; padding: 74px var(--gutter) 28px; }
    .reading section { width: min(820px, 100%); margin-inline: auto; padding: 0 0 72px; }
    .reading section.wide-section { width: min(1080px, 100%); }
    .reading section + section { padding-top: 8px; }
    .reading h2 { max-width: 790px; margin-inline: auto; }
    .reading h3 { margin: 28px 0 8px; font-family: var(--font-display); font-size: 23px; line-height: 1.18; }
    .reading p { max-width: 72ch; margin: 14px auto 0; color: color-mix(in oklch, var(--fg) 88%, var(--muted)); }
    .reading a { font-weight: 680; }
    .checklist { max-width: 72ch; margin: 17px auto 0; padding: 0; list-style: none; }
    .checklist li { position: relative; padding: 10px 0 10px 31px; border-bottom: 1px solid var(--border); }
    .checklist li::before { content: ''; position: absolute; left: 4px; top: 17px; width: 11px; height: 9px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
    .window-visual { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 820px; margin: 26px auto 0; overflow: hidden; border: 1px solid var(--border); border-radius: 17px; background: var(--bg); }
    .window-day { min-height: 116px; display: flex; flex-direction: column; justify-content: center; padding: 18px; text-align: center; }
    .window-day + .window-day { border-left: 1px solid var(--border); }
    .window-day strong { font-family: var(--font-display); font-size: 28px; }
    .window-day span { color: var(--muted); font-size: 12px; }
    .window-day.center { background: color-mix(in oklch, var(--accent) 10%, var(--surface)); }
    .table-scroll { max-width: 100%; margin-top: 26px; overflow-x: auto; border: 1px solid var(--border); border-radius: 15px; }
    .data-table { width: 100%; min-width: 0; border-collapse: collapse; }
    .data-table caption { padding: 15px 18px; background: var(--bg); font-family: var(--font-display); font-size: 18px; font-weight: 700; text-align: left; }
    .data-table th, .data-table td { padding: 13px 16px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
    .data-table thead th { color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
    .source-note { font-size: 12.5px; color: var(--muted) !important; }
    .timeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 27px; }
    .timeline article { grid-column: span 2; min-height: 194px; padding: 18px 17px; border: 1px solid var(--border); border-radius: 14px 17px 13px 18px; background: var(--bg); }
    .timeline article:nth-child(4) { grid-column: 2 / span 2; }
    .timeline article:nth-child(5) { grid-column: 4 / span 2; }
    .timeline strong { display: block; color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
    .timeline h3 { margin: 9px 0 0; font-size: 18px; }
    .timeline p { margin-top: 8px; font-size: 12.5px; line-height: 1.5; }
    .faq-list { max-width: 850px; margin-top: 24px; border-top: 1px solid var(--fg); }
    .faq-item { padding: 23px 0; border-bottom: 1px solid var(--border); }
    .faq-item h3 { margin: 0; }
    .faq-item p { margin-top: 8px; }
    .related-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
    .related-links a { display: inline-flex; min-height: 44px; align-items: center; padding: 9px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); text-decoration: none; }
    .related-links a:hover { border-color: var(--fg); }

    .pagefoot { position: relative; overflow: hidden; border-top: 1px solid var(--border); background: color-mix(in oklch, var(--accent) 7%, var(--bg)); }
    .pagefoot-inner { min-height: 210px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: 28px; }
    .pagefoot p { max-width: 68ch; margin: 7px 0 0; color: var(--muted); font-size: 13px; }
    .footer-dog { width: 230px; height: 150px; justify-self: end; color: color-mix(in oklch, var(--fg) 76%, var(--muted)); }
    :focus-visible { outline: 3px solid color-mix(in oklch, var(--accent) 42%, transparent); outline-offset: 3px; }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

    @media (max-width: 920px) {
      :root { --gutter: 22px; }
      .hero { min-height: 0; padding-bottom: 30px; background: var(--bg); }
      .hero-art { height: 315px; bottom: auto; }
      .hero-art img { object-position: 68% 43%; }
      .hero-art::after { background: linear-gradient(90deg, color-mix(in oklch, var(--bg) 95%, transparent) 0%, color-mix(in oklch, var(--bg) 80%, transparent) 49%, color-mix(in oklch, var(--bg) 9%, transparent) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 42%); }
      .hero-intro { min-height: 210px; padding-top: 34px; }
      .hero-intro h1 { max-width: 8.5ch; font-size: clamp(42px, 8vw, 58px); }
      .hero-intro .lead { max-width: 38ch; font-size: 15px; }
      .calculator-card { grid-template-columns: 1fr; min-height: 0; }
      .calculator-form { border-right: 0; border-bottom: 1px solid var(--border); }
      .result-pane { min-height: 350px; background: color-mix(in oklch, var(--bg) 62%, transparent); }
      .result-pane::before { inset: 0; background: linear-gradient(90deg, color-mix(in oklch, var(--bg) 76%, transparent), color-mix(in oklch, var(--bg) 44%, transparent)); }
      .guide-grid { grid-template-columns: 1fr; }
      .guide-card { min-height: 164px; }
      .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .timeline article, .timeline article:nth-child(4), .timeline article:nth-child(5) { grid-column: auto; }
      .pagefoot-inner { grid-template-columns: 1fr 190px; }
    }
    @media (max-width: 640px) {
      :root { --gutter: 16px; }
      .topnav-inner { min-height: 58px; }
      .brand-mark { width: 36px; height: 36px; }
      .brand-copy strong { font-size: 16px; }
      .trust-note span { display: none; }
      .trust-note::after { content: 'No sign-up'; font-size: 11px; }
      .hero-art { height: 270px; }
      .hero-art img { object-position: 70% 42%; }
      .hero-art::after { background: linear-gradient(90deg, color-mix(in oklch, var(--bg) 96%, transparent) 0%, color-mix(in oklch, var(--bg) 84%, transparent) 54%, color-mix(in oklch, var(--bg) 5%, transparent) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 48%); }
      .hero-intro { min-height: 183px; padding-top: 28px; }
      .hero-intro h1 { max-width: 7.5ch; font-size: clamp(38px, 11vw, 47px); }
      .hero-intro .lead { max-width: 27ch; margin-top: 9px; font-size: 13px; line-height: 1.42; }
      .calculator-card { border-radius: 19px 21px 18px 22px; }
      .calculator-form, .result-pane { padding: 19px 18px; }
      .form-kicker { margin-bottom: 14px; }
      .form-kicker h2, .result-heading { font-size: 20px; }
      .input { min-height: 52px; }
      .result-pane { min-height: 335px; }
      .due-date { font-size: clamp(34px, 11vw, 44px); }
      .stats { gap: 6px; }
      .stat { padding: 8px 7px; }
      .stat strong { font-size: 15px; }
      .guide-strip { padding: 42px 0 52px; }
      .section-heading h2, .reading h2 { font-size: clamp(30px, 9vw, 40px); }
      .reading-inner { padding-top: 58px; }
      .reading section { padding-bottom: 58px; }
      .timeline { grid-template-columns: 1fr; }
      .timeline article, .timeline article:nth-child(4), .timeline article:nth-child(5) { grid-column: auto; min-height: 0; }
      .window-day { min-height: 102px; padding: 11px 7px; }
      .window-day strong { font-size: 22px; }
      .pagefoot-inner { min-height: 270px; grid-template-columns: 1fr; padding-top: 34px; }
      .footer-dog { width: 175px; height: 115px; justify-self: end; }
    }
  /* Integration adapters: retain production content and input IDs. */
:root { --primary: var(--fg); --secondary: var(--accent); --text: var(--fg); --background: var(--bg); --line: var(--border); --link: var(--accent); --stripe: var(--bg); }
.hero { padding-bottom: 30px; }
.hero-art { pointer-events: none; }
.hero-art picture { display: block; width: 100%; height: 100%; }
.brand { color: var(--fg); }
h1,h2,h3 { color: var(--fg); }
.hero-intro .lead { max-width: 48ch; }
.calculator-form label { font-size: 13px; font-weight: 750; }
.calculator-form .required { font-family: var(--font-mono); font-size: 10px; }
.calculator-form input[type=text] { min-height: 52px; border: 1px solid color-mix(in oklch, var(--border) 82%, var(--fg)); border-radius: 11px; padding: 11px 46px 11px 14px; background: var(--surface); color: var(--fg); font: 16px var(--font-mono); }
.calculator-form input[aria-invalid=true] { border: 2px solid var(--warning); }
.calculator-form .hint { margin: 7px 0 0; font-size: 12px; }
.calculator-form .text-button { display: inline-flex; width: auto; max-width: 100%; min-height: 44px; border-radius: 0; margin: 7px 0 9px; padding: 3px 0; background: transparent; color: var(--fg); font: 700 13px/1.5 var(--font-body); text-decoration: underline; }
.calculator-form button[type=submit] { justify-content: center; gap: 10px; min-height: 50px; border: 1px solid var(--accent); border-radius: 11px; background: var(--accent); color: var(--surface); }
.calculator-form button[type=submit]:hover { background: color-mix(in oklch, var(--accent) 88%, var(--fg)); }
.calculator-form .privacy { margin-top: 22px; }
.result-pane .empty-state { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 8px; }
.result-pane:has(#result-details:not([hidden])) .empty-state { display: none; }
.empty-state p { margin-top: 0; max-width: 26ch; }
.result-pane .range { font-family: var(--font-mono); }
.stat strong b { font-weight: inherit; }
.reading { max-width: none; padding: 0; }
.reading section { border: 0; }
.reading .data-table thead th { background: var(--bg); color: var(--fg); }
.reading .timeline-layout { display: block; }
.reading .timeline-layout figure { max-width: 380px; margin: 24px auto; }
.reading .timeline { padding: 0; border: 0; }
.reading .timeline > div { grid-column: span 2; padding: 18px; border: 1px solid var(--border); border-radius: 14px 17px 13px 18px; background: var(--bg); }
.reading .timeline > div:nth-child(4) { grid-column: 2 / span 2; }
.reading .timeline > div:nth-child(5) { grid-column: 4 / span 2; }
.reading .timeline h3 { font-size: 19px; margin: 0 0 8px; }
.reading .timeline p { margin: 0; }
.reading .faq > div { padding: 20px 0; }
.reading .faq h3 { margin: 0; }
.reading .faq p { margin-top: 8px; }
footer.wrap { color: var(--muted); max-width: 1124px; padding-block: 36px!important; }
@media(max-width:920px) {
  .reading .timeline > div,.reading .timeline > div:nth-child(4),.reading .timeline > div:nth-child(5) { grid-column: auto; }
}
@media(max-width:640px) {
  .hero-intro .lead { max-width: 27ch; }
  .result-pane .preparation li,.result-pane .preparation a,.result-pane .preparation p { font-size: 13px; }
  .guide-card { padding-right: 116px; }
}

/* Compact core calculator; no fixed-height content or hidden overflow. */
.hero { min-height: 0; padding-bottom: 24px; }
.topnav-inner { min-height: 52px; }
.hero-intro { min-height: 0; padding-top: 18px; padding-bottom: 18px; }
.hero-intro h1 { max-width: none; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; }
.hero-intro .lead { max-width: none; font-size: 16px; margin-top: 6px; }
.calculator-card { min-height: 0; overflow: visible; }
.calculator-form { padding: 20px; border-radius: 22px 0 0 22px; }
.form-kicker { margin-bottom: 12px; gap: 8px; }
.form-kicker h2 { font-size: 20px; }
.sketch-icon { width: 30px; height: 30px; }
.calculator-form label { font-size: 15px; }
.calculator-form .required { font: 12px var(--font-body); }
.calculator-form input.native-date,.calculator-form input.manual-date { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 48px; margin-top: 5px; padding: 10px 12px; border: 1px solid #939e88; border-radius: 10px; background: var(--surface); color: var(--fg); font: 17px/1.4 var(--font-body); color-scheme: light; }
.native-date::-webkit-date-and-time-value { text-align: left; }
.native-date::-webkit-calendar-picker-indicator { width: 24px; height: 24px; padding: 0 2px; cursor: pointer; opacity: 1; }
.calculator-form input[aria-invalid=true] { border: 2px solid var(--warning); }
.calculator-form .hint { font-size: 13px; line-height: 1.4; margin-top: 5px; }
.calculator-form .text-button { font-size: 14px; line-height: 1.4; min-height: 44px; margin: 0; padding-block: 6px; }
.calculator-form .entry-toggle { font-weight: 500; color: var(--muted); }
.calculator-form #toggle-basis { display: flex; margin-bottom: 4px; }
.calculator-form button[type=submit] { min-height: 48px; font-weight: 800; font-family: var(--font-body); }
.error { font-size: 14px; }
.result-pane { min-height: 0; padding: 20px 24px; border-radius: 0 24px 21px 0; overflow: visible; }
.result-pane::before { border-radius: inherit; }
.result-heading { font-size: 21px; }
.result-pane .empty-state { flex: 0; min-height: 0; flex-direction: row; justify-content: flex-start; gap: 12px; margin: 16px 0; text-align: left; }
.empty-dog { width: 72px; height: 52px; flex-shrink: 0; margin: 0; }
.empty-state p { margin: 0; font-size: 15px; }
.due-date { display: table; color: #173b29; background: transparent; border-radius: 0; padding: 5px 0 7px; margin: 6px 0 10px; font-size: clamp(36px, 4vw, 54px); font-weight: 800; line-height: 1.12; }
.window-label { display: table; color: var(--fg); background: transparent; border-radius: 0; padding-inline: 0; font-size: 14px; letter-spacing: 0; text-transform: none; margin-top: 4px; }
.result-pane .range { display: table; font: 700 16px/1.5 var(--font-body); color: var(--fg); background: transparent; padding: 2px 0; border-radius: 0; margin: 0; }
.result-pane .basis { display: table; font-size: 13px; line-height: 1.4; color: var(--fg); background: transparent; padding: 3px 0; border-radius: 0; margin: 5px 0 0; }
.stats { gap: 10px; margin-top: 12px; }
.stat { padding: 10px; background: transparent; border-color: transparent; }
.stat strong { font: 800 32px/1.1 var(--font-body); color: #173b29; font-variant-numeric: tabular-nums; }
.stat span { font: 650 14px/1.35 var(--font-body); color: var(--fg); margin-top: 4px; }
.calculator-followup { padding-top: 14px; padding-bottom: 8px; }
.calculator-followup .privacy { font-size: 13px; }
.calculator-followup .preparation { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px; margin: 16px 0; }
.preparation h2 { font: 700 24px/1.2 var(--font-display); }
.preparation .basis { font-size: 15px; }
.preparation .checklist { max-width: none; margin: 8px 0 12px; }
.calculator-followup .result-note { font-size: 14px; }
.calculation-notice { border-radius: 10px; }
/* Shared article and long-form treatment. */
h1,h2,h3 { font-family: var(--font-display); }
.reading .data-table thead th,.data-table thead th { color: var(--fg); background: var(--bg); font: 700 14px/1.5 var(--font-body); letter-spacing: 0; text-transform: none; }
.data-table { font-size: 15px; }
.reading h2,.section-heading h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.2; }
.reading .timeline p { font-size: 15px; line-height: 1.6; }
.reading-inner { padding-top: 42px; }
.reading section { padding-bottom: 44px; }
.card { background: var(--surface); border-color: var(--border); border-radius: 18px; }
.warning-card { background: var(--warning-bg); border-color: var(--warning); }
footer.wrap { font-size: 14px; border-top: 1px solid var(--border); }
body:has(.article-page) { position: relative; isolation: isolate; }
body:has(.article-page)::before { content: ''; position: absolute; z-index: -1; inset: 52px 0 auto; height: 380px; pointer-events: none; opacity: .22; background: url('/assets/hero-handdrawn-dog-mobile.webp') right top / 660px auto no-repeat; }
.article-page { padding-bottom: 30px; }
.article-page .article-intro { padding-top: 8px; }
.article-intro h1 { font-size: clamp(30px, 3.5vw, 44px); }
.article-intro .lede { font-size: 18px; line-height: 1.6; }
.article-page article { max-width: 74ch; }
.article-page .reading { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px; margin-top: 22px; }
.article-page .reading section { padding-bottom: 34px; }
.article-page .reading section:last-child { padding-bottom: 0; }
.article-page .reading h2 { font-size: clamp(26px, 3vw, 34px); }
.article-page .timeline-strip h2 { font-size: 22px; }
.article-page .timeline-strip p { margin-top: 0; }
.article-page .source-note { font-size: 14px; }
.article-page .reading figure img { border-radius: 16px; }
@media(max-width:920px) {
 .hero-art { height: 100%; }
 .hero-art img { object-position: 68% 42%; }
 .calculator-form { border-radius: 19px 21px 0 0; }
 .result-pane { border-radius: 0 0 18px 22px; min-height: 0; }
 .result-pane::before { background: none; }
}
@media(max-width:640px) {
 .topnav-inner { min-height: 50px; gap: 8px; }
 .brand { gap: 8px; }
 .brand-mark { width: 30px; height: 30px; }
 .brand-copy strong { font-size: 15px; }
 .hero-intro { padding-top: 12px; padding-bottom: 12px; }
 .hero-intro h1 { max-width: none; font-size: 29px; line-height: 1.05; }
 .hero-intro .lead { max-width: 30ch; font-size: 15px; line-height: 1.4; margin-top: 6px; }
 .hero-art img { object-position: 66% 40%; }
 .hero-art::after { background: linear-gradient(90deg, rgb(250 247 234 / 95%), rgb(250 247 234 / 60%) 55%, rgb(250 247 234 / 12%)); }
 .calculator-form,.result-pane { padding: 14px 16px; }
 .form-kicker { display: none; }
 .result-pane { background: rgb(250 247 234 / 25%); }
 .result-heading { font-size: 21px; }
 .due-date { font-size: 38px; margin-bottom: 6px; }
 .result-pane .range { font-size: 15px; }
 .stat { padding: 9px 7px; }
 .stat strong { font-size: 27px; }
 .stat span { font-size: 13px; }
 .stats { gap: 6px; margin-top: 10px; }
 .article-page .reading { padding: 18px 14px; }
 .article-intro .lede { font-size: 17px; }
 .article-page .article-intro h1 { font-size: 32px; }
 .reading section { padding-bottom: 34px; }
 .guide-strip { padding: 30px 0; }
 .guide-card h3 { font-size: 22px; }
 .guide-card p { font-size: 15px; }
}
/* Secondary actions and exceptional states leave the approved core design intact. */
.submit-row { display: flex; align-items: center; gap: 10px; }
.submit-row button[type=submit] { flex: 1; min-width: 0; }
button.secondary-action { display: inline-flex; justify-content: center; width: auto; min-height: 44px; padding: 6px 9px; border: 0; background: transparent; color: var(--fg); font: 650 14px/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 3px; }
button.secondary-action:hover { background: rgb(245 242 226 / 35%); }
.result-action-row { display: flex; gap: 14px; margin-top: 6px; }
#copy-status { font-size: 14px; margin: 0; }
#copy-status:empty { display: none; }
#copy-fallback { margin-top: 10px; }
#copy-text { display: block; width: 100%; max-width: 100%; min-height: 220px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--fg); font: 15px/1.5 var(--font-body); }
.core-status { border-left: 3px solid var(--warning); padding: 8px 12px; margin: 0 0 12px; color: #60351d; background: rgb(255 246 230 / 80%); font-size: 15px; line-height: 1.5; font-weight: 650; }
.stat strong.text-state { font-size: 18px; line-height: 1.25; }
#print-summary { display: none; }
@media(max-width:760px) { .data-table { min-width: 560px; } }
@media print {
  @page { size: auto; margin: 18mm; }
  body:has(#print-summary) { background: #fff !important; color: #111 !important; }
  body:has(#print-summary) > * { display: none !important; }
  body > #print-summary { display: block !important; width: auto; max-width: none; margin: 0; padding: 0; background: #fff; color: #111; }
  #print-summary h2 { font: 700 22pt/1.3 Georgia,serif; color: #111; margin: 0 0 20pt; }
  #print-text { white-space: pre-wrap; overflow-wrap: anywhere; font: 12pt/1.7 Arial,sans-serif; color: #111; margin: 0; }
}

/* Review v2: adapt the approved artwork and reading rhythm to the live components. */
:root { --muted: oklch(0.47 0.028 135); --reading: 740px; --wide: 980px; }
body { font-size: 18px; line-height: 1.68; }
.brand-copy span, .eyebrow, .meta, .num { font-family: var(--font-body); }
.brand-copy span { font-weight: 750; }
.hero-intro .lead { font-size: 16px; }
.result-pane .empty-state { margin: 12px 0 4px; }
.empty-state p { max-width: 40ch; }
.stat { padding-inline: 2px; }
#result-actions { margin-top: 10px; padding-top: 7px; border-top: 1px dashed var(--border); }
.result-action-row { margin-top: 0; }
.guide-strip { padding: 48px 0 58px; background: var(--surface); }
.guide-card { display: flex; flex-direction: column; padding: 22px; min-height: 0; overflow: visible; background: var(--bg); }
.guide-card h3 { max-width: none; font-size: 23px; line-height: 1.2; text-wrap: initial; }
.guide-card p { max-width: none; margin: 10px 0 0; font-size: 15px; line-height: 1.55; }
.guide-illustration { display: block; position: static; width: 210px; max-width: 100%; height: auto; align-self: flex-end; margin-top: auto; padding-top: 12px; pointer-events: none; }
.guide-illustration img { width: 100%; height: auto; }
.reading-inner { width: min(var(--reading), calc(100% - 2 * var(--gutter))); padding: 60px 0 24px; }
.reading section { width: 100%; padding: 0 0 58px; }
.reading h2 { font-size: clamp(29px, 3vw, 38px); line-height: 1.15; margin-left: 0; }
.reading h3 { font-size: 23px; }
.reading p { margin: 16px 0 0; max-width: none; }
.reading .source-note { font-size: 14px; }
.reading .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reading .timeline > div, .reading .timeline > div:nth-child(4), .reading .timeline > div:nth-child(5) { grid-column: auto; }
.reading .timeline > div:last-child { grid-column: 1 / -1; }
.reading .timeline p { font-size: 16px; }
.reading .faq > div { border-bottom: 1px solid var(--border); padding: 24px 0; }
.reading .faq > div:last-child { border-bottom: 0; }
body:has(.article-page)::before { content: none; }
.article-page { width: min(var(--reading), calc(100% - 2 * var(--gutter))); }
.article-page article { max-width: none; }
.article-page .reading { background: transparent; border: 0; border-radius: 0; padding: 0; margin-top: 34px; }
.article-page .reading section { padding-bottom: 58px; }
.article-page .reading h2 { font-size: clamp(28px, 3vw, 36px); }
.article-intro h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; }
.article-intro .lede { font-size: 19px; line-height: 1.6; }
.article-accent { width: min(300px, 100%); margin: 24px auto; }
.article-accent img { width: 100%; height: auto; }
.article-scene { margin: 28px 0 36px; }
.article-scene img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 18px 21px 17px 22px; }
.article-figure { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); padding: 18px; }
.article-figure img { height: auto; }
.cell-label { display: none; }
footer.wrap { display: grid; grid-template-columns: minmax(0, 1fr) 160px; align-items: center; column-gap: 28px; row-gap: 10px; max-width: 1124px; font-size: 14px; }
footer.wrap > div, footer.wrap > p { grid-column: 1; grid-row: 1; }
footer.wrap > span { grid-column: 1; grid-row: 2; white-space: normal; overflow-wrap: anywhere; }
footer .footer-dog { display: block; grid-column: 2; grid-row: 1 / 3; width: 160px; height: auto; margin: 0; }
.footer-dog img { width: 100%; height: auto; }
/* Approved transparent artwork shares a complete, uncropped 3:2 canvas. */
.guide-illustration img, .article-accent img, .footer-dog img {
  display: block; aspect-ratio: 3 / 2; object-fit: contain; pointer-events: none;
}
@media(max-width:920px) {
 .guide-card { display: grid; grid-template-columns: minmax(0, 1fr) 30%; gap: 10px 18px; align-items: center; }
 .guide-card h3, .guide-card p { grid-column: 1; margin: 0; }
 .guide-illustration { grid-column: 2; grid-row: 1 / 3; width: 100%; max-width: 230px; margin: 0; padding: 0; align-self: center; justify-self: end; }
}
@media(max-width:640px) {
 body { font-size: 16.5px; line-height: 1.65; }
 .hero { padding-bottom: 18px; }
 .hero-art { height: 100%; }
 .hero-art picture { position: absolute; inset: 0; }
 .hero-art img { position: absolute; width: 900px; max-width: none; height: auto; left: calc(100% - 710px); top: -25px; object-fit: initial; }
 .hero-art::after { background: linear-gradient(90deg, rgb(250 247 234 / 94%), rgb(250 247 234 / 82%) 40%, rgb(250 247 234 / 6%) 72%), linear-gradient(0deg, var(--bg), transparent 38%); }
 .hero-intro { padding-top: 10px; padding-bottom: 10px; }
 .hero-intro h1 { max-width: calc(100% - 104px); font-size: 29px; line-height: 1.08; text-wrap: initial; }
 .hero-intro .lead { max-width: calc(100% - 104px); font-size: 15px; line-height: 1.4; margin-top: 5px; }
 .calculator-form, .result-pane { padding: 12px 16px; }
 .calculator-form .text-button { min-height: 44px; padding-block: 4px; }
 .calculator-form #toggle-basis { margin-bottom: 0; }
 .result-pane { background: rgb(250 247 234 / 18%); }
 .stats { margin-top: 8px; }
 .stat { padding: 7px 2px; }
 .stat strong { font-size: 27px; }
 .stat span { font-size: 13px; }
 #result-actions { margin-top: 7px; padding-top: 4px; }
 .guide-strip { padding: 36px 0 42px; }
 .guide-card { padding: 20px 18px; grid-template-columns: minmax(0, 1fr) 30%; gap: 10px 12px; }
 .guide-card h3 { font-size: 22px; }
 .guide-card p { font-size: 15px; }
 .reading-inner { padding-top: 42px; }
 .reading section, .article-page .reading section { padding-bottom: 44px; }
 .reading h3 { font-size: 22px; }
 .reading .timeline { grid-template-columns: 1fr; }
 .reading .timeline > div:last-child { grid-column: auto; }
 .article-page .reading { padding: 0; }
 .article-intro h1 { font-size: 34px; }
 .article-intro .lede { font-size: 17px; }
 .article-accent { width: 240px; margin-block: 20px; }
 .article-scene { margin: 24px 0 28px; }
 .article-figure { padding: 12px; }
 /* One semantic table becomes an entirely readable vertical timing summary. */
 .scan-summary { overflow: visible; border: 0; background: transparent; }
 .scan-summary .data-table { display: block; min-width: 0; width: 100%; font-size: 15px; }
 .scan-summary caption { display: block; padding: 0 0 12px; background: transparent; }
 .scan-summary thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .scan-summary tbody { display: grid; gap: 14px; }
 .scan-summary tr { display: block; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--surface); }
 .scan-summary .data-table th, .scan-summary .data-table td { display: block; border: 0; padding: 0; }
 .scan-summary .data-table tbody th { font: 700 21px/1.2 var(--font-display); margin-bottom: 12px; }
 .scan-summary .data-table td + td { margin-top: 10px; }
 .cell-label { display: block; font-weight: 750; color: var(--fg); }
 footer.wrap { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr) 100px; gap: 8px 16px; }
 footer .footer-dog { width: 100px; }
}
@media(max-width:360px) {
 .hero-art img { width: 780px; left: calc(100% - 625px); top: -18px; }
 .hero-intro h1, .hero-intro .lead { max-width: calc(100% - 88px); }
 .due-date { font-size: 36px; }
 footer.wrap { grid-template-columns: 1fr; }
 footer .footer-dog { grid-row: 3; grid-column: 1; justify-self: end; }
}
/* The scan introduction shares the desktop canvas; mobile retains the DOM reading order. */
.ultrasound-page { width: min(1124px, calc(100% - 2 * var(--gutter))); }
.ultrasound-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 18px 40px; }
.ultrasound-intro .article-lead { grid-column: 1; grid-row: 1; }
.ultrasound-intro .scan-guide { grid-column: 1 / -1; grid-row: 3; }
.ultrasound-intro .article-scene { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.ultrasound-intro .article-scene img { height: 310px; object-fit: cover; object-position: center; }
.ultrasound-intro .article-toc { grid-column: 1; grid-row: 2; }
.article-toc p { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.article-toc ul { margin: 0; padding: 0; list-style: none; }
.article-toc a { display: inline-flex; align-items: center; min-height: 32px; font-size: 16px; color: var(--accent); }
.ultrasound-page .reading { max-width: var(--reading); margin-inline: auto; }
@media(max-width:920px) {
 .ultrasound-intro { display: flex; flex-direction: column; gap: 20px; }
 .ultrasound-intro > * { width: 100%; }
 .ultrasound-intro .article-scene img { height: auto; object-fit: initial; }
 .article-toc { border-block: 1px solid var(--border); padding-block: 10px; }
 .article-toc ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
 .article-toc a { min-height: 44px; font-size: 15px; }
}
@media(max-width:640px) {
 .hero-art img { mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
}
.article-lead > p:last-child { margin-bottom: 0; }
.scan-guide .scan-summary { margin-top: 0; }

/* V0 reading system. The approved hero geometry and transparent layers stay above.
   Reference: supplied app/globals.css uses Georgia / Arial and these palette values.
   Muted text is slightly darker than the reference for readable small labels. */
:root {
  --surface: #fffefa;
  --fg: #25322f;
  --muted: #596963;
  --border: #e5ebe6;
  --accent: #304f45;
  --sage: #e8eee5;
  --apricot: #f8e4d5;
  --rust: #b87558;
  --secondary: var(--rust);
  --stripe: #f6f5ef;
  --warning-bg: #fbefe5;
  --radius: 16px;
  --shadow: 0 8px 24px rgb(48 79 69 / 4%);
}
body { background: var(--surface); font-size: 18px; line-height: 1.7; }
h1, h2, h3 { font-weight: 400; letter-spacing: -.035em; }
.brand-copy strong { font-weight: 400; }
.hero { line-height: 1.68; }
.hero-intro h1 { font-weight: 400; }
.calculator-form button[type=submit] { font-weight: 700; }
.calculator-form .required, .num, .meta { font-family: var(--font-body); }
.due-date, .stat strong { color: var(--accent); }
.eyebrow { font: 700 11px/1.5 var(--font-body); letter-spacing: .12em; color: var(--muted); }
.reading a, .calculator-followup a { color: var(--accent); font-weight: 600; }
.reading h2, .section-heading h2, .article-page .reading h2 {
  font-size: clamp(28px, 2.6vw, 36px); line-height: 1.18; font-weight: 400;
}
.reading h3 { font-size: 24px; line-height: 1.25; }
.reading p { color: var(--fg); line-height: 1.7; }
.reading .source-note, .source-note { color: var(--muted); font-size: 14px; line-height: 1.65; }
.reading-inner { width: min(1124px, calc(100% - 2 * var(--gutter))); }
.home-reading .reading-inner { padding-block: 8px 20px; }
.home-reading .reading-inner > section { padding: 52px 0; border-top: 1px solid var(--border); }
.home-reading .eyebrow { margin: 0 0 10px; }
.home-reading h2 { max-width: 740px; }
.home-reading section > p { max-width: 72ch; }
.calculator-followup { padding-top: 16px; }
.calculator-followup .preparation {
  padding: 28px 32px; margin: 18px 0; border: 0; border-radius: var(--radius);
  background: var(--sage); box-shadow: none;
}
.preparation h2 { font: 400 30px/1.2 var(--font-display); margin-bottom: 8px; }
.preparation .basis { font-family: var(--font-body); color: var(--accent); font-weight: 600; }
.preparation .checklist li { border: 0; padding-block: 7px; }
.preparation a { display: inline-block; padding-block: 6px; }
.checklist li { border-bottom-color: var(--border); }
.checklist li::before { border-color: var(--rust); }
.guide-strip { padding: 42px 0 48px; }
.section-heading { max-width: 740px; margin-bottom: 26px; }
.section-heading > p { color: var(--muted); font-size: 17px; line-height: 1.7; }
.section-heading > .eyebrow { font-size: 11px; }
.guide-grid { gap: 22px; }
.guide-card { padding: 24px; border-radius: var(--radius); background: #f6f5ef; box-shadow: none; }
.guide-card:nth-child(2) { background: #f0f3ec; }
.guide-card:nth-child(3) { background: #fcf1e8; }
.guide-card h3 { font-size: 25px; line-height: 1.18; }
.guide-card p { color: var(--muted); font-size: 16px; line-height: 1.6; }
.guide-link { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-block: 4px; font-size: 14px; font-weight: 700; color: var(--accent); }
.guide-link > span { color: var(--rust); }
.guide-illustration { width: 210px; padding-top: 12px; }
.guide-card:hover { transform: none; box-shadow: var(--shadow); border-color: #b6c5bc; }
/* One neutral timeline replaces the duplicate nine-cell calendar and stage cards. */
.home-reading .timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto; align-items: start; gap: 0; margin-top: 40px; border-top: 1px solid #cdd9d0; }
.home-reading .timeline > div,
.home-reading .timeline > div:nth-child(4),
.home-reading .timeline > div:nth-child(5),
.home-reading .timeline > div:last-child {
  position: relative; display: grid; grid-column: auto; grid-row: span 3; grid-template-rows: subgrid; padding: 26px 22px 0 0;
  border: 0; border-radius: 0; background: transparent;
}
.home-reading .timeline > div:last-child { padding-right: 0; }
.home-reading .timeline > div::before {
  content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px;
  background: var(--surface); border: 2px solid var(--rust); border-radius: 50%;
}
.home-reading .timeline h3 { margin: 0 0 12px; font-size: 23px; }
.stage-period { display: block; margin-bottom: 12px; color: #92583f; font: 700 13px/1.5 var(--font-body); letter-spacing: 0; }
.home-reading .timeline p { font-size: 16px; line-height: 1.7; }
.date-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 28px; }
.date-method { min-width: 0; padding-top: 18px; border-top: 2px solid var(--sage); }
.date-method:nth-child(2) { border-top-color: var(--apricot); }
.date-method h3 { margin-top: 0; }
.steps { padding-left: 24px; margin: 16px 0 0; }
.steps li { padding: 0 0 16px 6px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::marker { color: #92583f; font-weight: 700; }
.date-method .checklist { margin-top: 20px; }
.date-method .checklist li { padding-left: 25px; }
.range-section { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 36px; align-items: start; }
.range-section > figure { width: 100%; margin: 60px 0 0; }
.range-section > figure img { width: 100%; height: auto; }
.range-section .table-scroll, .range-section .scroll-hint, .range-section > .source-note { grid-column: 1 / -1; }
.range-section figcaption { color: var(--muted); font-size: 14px; line-height: 1.5; }
.care-columns { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; padding: 28px 0 52px; }
.home-reading .care-columns section { padding: 30px; margin: 0; border-radius: var(--radius); background: var(--sage); }
.home-reading .care-columns .limits-panel { background: var(--apricot); }
.care-columns h2 { font-size: 32px; }
.care-columns .checklist { margin-top: 20px; }
.care-columns .checklist li { border-bottom-color: rgb(48 79 69 / 12%); }
/* Static, progressively disclosed reading details share one keyboard-friendly control. */
.reading-details { min-width: 0; margin-top: 18px; border-top: 1px solid rgb(48 79 69 / 18%); }
.reading-details summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 10px; color: var(--accent); font: 600 16px/1.5 var(--font-body); cursor: pointer; list-style: none; }
.reading-details summary::-webkit-details-marker { display: none; }
.reading-details summary::after { content: '+'; margin-left: auto; flex: 0 0 auto; font-size: 22px; font-weight: 400; line-height: 1; }
.reading-details[open] summary::after { content: '−'; }
.reading-details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }
.reading .reading-details p { margin-top: 12px; font-size: 17px; }
.reading .reading-details .source-note { font-size: 14px; }
.home-reading .timeline .reading-details p { font-size: 16px; margin-top: 10px; }
.home-reading .timeline .reading-details summary { font-size: 15px; }
/* Native details remain readable and keyboard-operable without JavaScript. */
.faq-item { border: 0; border-bottom: 1px solid var(--border); padding: 0; }
.faq-item:first-of-type { margin-top: 22px; border-top: 1px solid var(--border); }
.faq-item summary { position: relative; display: flex; align-items: center; gap: 20px; min-height: 56px; padding: 18px 4px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex: 0 0 20px; margin-left: auto; color: var(--accent); font: 400 24px/1 var(--font-body); text-align: center; }
.faq-item[open] summary::after { content: '−'; }
.reading .faq-item h3 { margin: 0; font: 600 17px/1.5 var(--font-body); letter-spacing: 0; }
.reading .faq-item p { padding: 0 28px 20px 4px; margin: 0; font-size: 17px; }
.related-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 26px; }
.related-links li { margin: 0; }
.related-links a { display: block; min-height: 44px; padding: 9px 0; border: 0; border-radius: 0; background: transparent; text-decoration: underline; font-size: 16px; }
.article-page { background: transparent; }
.article-intro h1 { font-weight: 400; }
.article-intro .lede { color: var(--fg); font-size: 18px; line-height: 1.7; }
.article-page .reading { margin-top: 40px; }
.article-page .reading section { padding-bottom: 46px; }
.article-page .reading h3 { font-weight: 400; }
.card { border-radius: var(--radius); box-shadow: none; background: #f6f5ef; }
.warning-card { background: var(--warning-bg); border: 1px solid #d8b49d; border-left: 3px solid var(--rust); }
.action-note, .calculator-link { background: var(--sage); border-left-color: var(--accent); border-radius: 0 10px 10px 0; }
.data-table caption { background: #f6f5ef; font-family: var(--font-body); font-weight: 600; font-size: 17px; }
.data-table thead th, .reading .data-table thead th { background: var(--sage); }
.data-table { font-size: 16px; line-height: 1.65; }
.data-table th, .data-table td { padding: 14px 16px; }
.timeline-strip > li { border-top: 2px solid #c9a28c; }
.article-figure { box-shadow: none; background: var(--surface); }
footer.wrap { color: var(--muted); border-color: var(--border); }
@media(max-width:1050px) {
  .home-reading .timeline { grid-template-columns: 1fr; border: 0; margin-left: 5px; }
  .home-reading .timeline > div,
  .home-reading .timeline > div:nth-child(4),
  .home-reading .timeline > div:nth-child(5),
  .home-reading .timeline > div:last-child { display: block; grid-row: auto; padding: 0 0 26px 26px; border-left: 1px solid #cdd9d0; }
  .home-reading .timeline > div:last-child { padding-bottom: 0; }
  .home-reading .timeline > div::before { left: -5px; top: 5px; }
  .home-reading .timeline h3 { font-size: 25px; }
  .stage-period { margin-bottom: 6px; }
}
@media(max-width:920px) {
  .guide-card { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 10px 24px; }
  .guide-card h3, .guide-card p, .guide-link { grid-column: 1; }
  .guide-link { margin-top: 0; }
  .guide-illustration { grid-column: 2; grid-row: 1 / 4; width: 160px; padding-top: 0; }
  .date-methods, .care-columns { grid-template-columns: 1fr; gap: 24px; }
  .range-section { display: block; }
  .range-section > figure { max-width: 380px; margin: 24px auto; }
}
@media(max-width:640px) {
  body { font-size: 16px; line-height: 1.7; }
  .hero { line-height: 1.65; }
  .reading h2, .section-heading h2, .article-page .reading h2 { font-size: 29px; }
  .reading h3 { font-size: 23px; }
  .home-reading .reading-inner > section { padding-block: 36px; }
  .home-reading .reading-inner { padding-top: 0; }
  .calculator-followup .preparation { padding: 22px; }
  .preparation h2 { font-size: 28px; }
  .guide-strip { padding-block: 30px 36px; }
  .guide-card { display: flex; padding: 22px; }
  .guide-card h3 { font-size: 25px; }
  .guide-card p { font-size: 16px; }
  .guide-link { margin-top: 12px; }
  .guide-illustration { width: 160px; padding-top: 4px; }
  .section-heading > p { font-size: 16px; }
  .care-columns { padding: 0 0 36px; gap: 20px; }
  .home-reading .care-columns section { padding: 24px; }
  .reading .reading-details p { font-size: 16px; }
  .reading .faq-item h3, .reading .faq-item p { font-size: 16px; }
  .reading .faq-item p { padding-right: 12px; }
  .related-links { grid-template-columns: 1fr; }
  .article-intro .lede { font-size: 17px; }
  .article-page .reading { margin-top: 30px; }
  .article-page .reading section { padding-bottom: 38px; }
  .scan-summary caption { background: transparent; }
}

/* Keep homepage states in normal flow; hidden guidance must not reserve space. */
.calculator-form { min-block-size: 0; }
.date-feedback .error { margin: 5px 0 0; }
.result-pane .empty-state { display: block; flex: none; margin: 0; }
.result-placeholder { width: 100%; }
.result-placeholder p { max-width: none; margin-inline: 0; }
.result-placeholder .due-date { margin: 6px 0 10px; font: 800 clamp(36px, 4vw, 54px)/1.12 var(--font-display); color: var(--accent); }
.result-placeholder .window-label { font-size: 14px; color: var(--fg); margin: 4px 0 2px; }
.result-placeholder .stats { margin-top: 12px; }
.result-pane .stats { align-items: start; }
/* Reserve only the normal result's own rows, so selecting or clearing a date
   replaces values without resizing the core window. Long notices can still grow. */
.result-pane .basis { min-block-size: calc(2.8em + 6px); }
.result-pane > #result-actions[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
@media(max-width:640px) {
  .result-placeholder .due-date { font-size: 38px; margin-bottom: 6px; }
  .result-placeholder .stats { margin-top: 8px; }
  .result-pane .basis { min-block-size: calc(4.2em + 6px); }
}
/* Keep the desktop artwork crop independent of form and result content. */
@media(min-width:641px) {
  .hero-art img { height: max(100%, 690px); max-height: none; }
}
@media(min-width:921px) {
  .hero-art img { object-position: 50% calc(39% - 43px); }
}
.preparation-slot { margin: 18px 0; }
.preparation-prompt { margin: 0; color: var(--muted); }
.calculator-followup .preparation-slot .preparation { margin: 0; }
.result-note-slot { display: flow-root; }