/* doglongevitypills.com: a vet's record card, built to match design A (design/home-v1-A.png, picked by James on
   2 Nov 2026). Warm card stock, ink-brown text, ruled lines, one deep green for "done" and an amber for "waiting";
   colours sampled from the mockup. Fraunces for headings, Hanken Grotesk for text (both OFL, self-hosted). Every
   text/background pair below is checked for contrast in light and dark mode by tests/design.test.ts. */

@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #f8f4eb;          /* card stock */
  --card: #fffcf5;        /* input faces */
  --band: #eae0d0;        /* the clipped index card */
  --band-shadow: #ddd0bc;
  --footer-bg: #eee6d9;
  --text: #352d27;        /* ink brown */
  --muted: #645a50;
  --line: #d8ccba;        /* the ruled lines */
  --rule: #d8ccba;
  --link: #275644;        /* deep green */
  --tint-bg: #e6ede3;
  --green: #275644;       /* the top bar, the sign-up band */
  --on-green: #fbf6ea;
  --btn: #275644;
  --btn-text: #ffffff;
  --btn-hover: #1d4134;
  --cream-btn: #ead7ab;   /* the band's button */
  --cream-btn-text: #1f4637;
  --done: #275644; --done-bg: #e6ede3; --done-line: #6f927f; --done-mark: #4d7564; --tick: #ffffff;
  --wait: #7b5214; --wait-bg: #fbf4e7; --wait-line: #c9a46c; --wait-mark: #a8700f;
  --idle: #6f6152; --idle-line: #c3b39c; --idle-mark: #8a7a69;
  --stay-bar: #779785; --triad-bar: #ba9466; --cost-bar: #9f6f31; --triad-tag: #8a5a1c;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --radius: 3px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1713;
    --card: #2a241e;
    --band: #2a241e;
    --band-shadow: #050403;
    --footer-bg: #221d18;
    --text: #f1e9dc;
    --muted: #bdb1a2;
    --line: #3d342b;
    --rule: #4a4036;
    --link: #8fd1ab;
    --tint-bg: #1d2e24;
    --green: #1c3a2e;
    --on-green: #f4eedf;
    --btn: #8fd1ab;
    --btn-text: #10251a;
    --btn-hover: #b3e3c6;
    --cream-btn: #ead7ab;
    --cream-btn-text: #1f4637;
    --done: #a5dcbc; --done-bg: #1d3327; --done-line: #4f8c6b; --done-mark: #5fb385; --tick: #10251a;
    --wait: #f2c879; --wait-bg: #33281a; --wait-line: #9c7a45; --wait-mark: #d9a03c;
    --idle: #bdb1a2; --idle-line: #5a4e42; --idle-mark: #8f8172;
    --stay-bar: #6f9a83; --triad-bar: #b08a5c; --cost-bar: #c08b45; --triad-tag: #e2b46f;
    color-scheme: dark;
  }
}

/* ---------- type ---------- */
body { font-family: var(--sans); font-size: 17px; line-height: 1.6; background: var(--bg); color: var(--text); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.025em; color: var(--text); }
h1 { font-size: clamp(2.05rem, 5.6vw, 3.4rem); line-height: 1.1; margin: 0.1em 0 0.45em; font-weight: 680; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2rem); line-height: 1.15; margin: 1.8em 0 0.5em; }
h3 { font-size: 1.2rem; line-height: 1.3; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: #cfe3d4; color: #1b1510; }
.lede { font-size: 1.15rem; color: var(--muted); }
small { display: block; color: var(--muted); font-size: 0.85rem; font-weight: 400; }

/* ---------- header, logo, footer ---------- */
.site-header { border-top: 5px solid var(--green); border-bottom-color: var(--line); }
.header-row { padding-top: 18px; padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo-mark { width: 40px; height: 46px; flex: none; }
.logo-mark .lm-ring { stroke: #275644; }
.logo-mark .lm-tag { fill: #ece3cf; stroke: #275644; }
.logo-mark .lm-face { stroke: #9fb3a6; }
.logo-mark .lm-hand { stroke: #352d27; }
@media (prefers-color-scheme: dark) { .logo-mark .lm-ring { stroke: #8fd1ab; } }
.wordmark { font-family: var(--serif); font-weight: 700; font-size: 1.12rem; line-height: 1.12; letter-spacing: -0.02em; color: var(--text); }
.wordmark > span { display: block; }
.main-nav .nav-cta { border-radius: var(--radius); }
.menu-btn { width: 44px; height: 42px; padding: 0; font-size: 0; border: 1.5px solid var(--line); border-radius: 4px;
  background: linear-gradient(var(--text), var(--text)) center 13px / 18px 2px no-repeat,
    linear-gradient(var(--text), var(--text)) center 19px / 18px 2px no-repeat,
    linear-gradient(var(--text), var(--text)) center 25px / 18px 2px no-repeat; }
.site-footer { background: var(--footer-bg); border-top: 6px solid var(--line); margin-top: 0; }
.footer-brand .brand .wordmark { color: var(--link); }

/* ---------- lines and notes ---------- */
.checked-line { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.95rem; color: var(--muted); border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); padding: 1rem 0 1.4rem; margin: 1.6rem 0 0; }
.checked-line::before { content: ""; flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.05rem; border: 1.5px solid var(--done); border-radius: 50%;
  background: linear-gradient(45deg, transparent 45%, var(--done) 45%, var(--done) 58%, transparent 58%) 0.33rem 0.55rem / 0.3rem 0.3rem no-repeat,
    linear-gradient(-45deg, transparent 44%, var(--done) 44%, var(--done) 56%, transparent 56%) 0.52rem 0.33rem / 0.5rem 0.5rem no-repeat; }
.vet-line { font-size: 0.95rem; color: var(--muted); border-left: 3px solid var(--wait-line); padding: 0.1em 0 0.1em 0.8em; margin: 1.4em 0; }
.more { margin-top: 0.8em; font-weight: 600; }

/* ---------- step track with notes (the drug pages) ---------- */
.steps { list-style: none; padding: 0; margin: 0.8em 0 0; display: grid; gap: 0.5rem; }
.step { display: grid; grid-template-columns: 1.4rem 9rem 1fr; column-gap: 0.6rem; align-items: baseline; padding: 0.6rem 0.7rem; border-radius: var(--radius); border: 1.5px solid; }
.step-box { width: 1.1rem; height: 1.1rem; border-radius: 3px; align-self: start; margin-top: 0.15rem; position: relative; }
.step-label { font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.step-when { font-size: 0.88rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.step-note { grid-column: 2 / -1; font-size: 0.93rem; color: var(--text); margin-top: 0.3rem; }
.step-done { background: var(--done-bg); color: var(--done); border-color: var(--done-line); }
.step-done .step-box { background: var(--done-mark); }
.step-done .step-box::after, .tick::after { content: ""; position: absolute; border: solid var(--tick); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.step-done .step-box::after { left: 0.36rem; top: 0.12rem; width: 0.3rem; height: 0.6rem; }
.step-waiting { background: var(--wait-bg); color: var(--wait); border: 1.5px dashed var(--wait-line); }
.step-waiting .step-box { border: 2px solid var(--wait-mark); border-radius: 50%; }
.step-not-started { color: var(--idle); border: 1.5px dashed var(--idle-line); }
.step-not-started .step-box { border: 2px solid var(--idle-mark); border-radius: 50%; }
@media (max-width: 560px) { .step { grid-template-columns: 1.4rem 1fr; } .step-when { grid-column: 2; } }

/* ---------- the board: numbered drug rows of stamped boxes ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; border-bottom: 1px solid var(--rule); padding-bottom: 1rem; }
.sec-head h2 { margin-bottom: 0; max-width: 12em; }
.sec-aside { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1rem; text-align: right; max-width: 7.5em; line-height: 1.3; }
.board-row { padding: 1.4rem 0 1.6rem; border-bottom: 1px solid var(--rule); }
.board-head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 0.7rem; }
.board-num { font-size: 0.95rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.board-name { margin: 0; font-size: 1.75rem; line-height: 1.1; }
.board-name a { color: var(--text); text-decoration: none; }
.board-name a:hover { text-decoration: underline; }
.stamp { align-self: center; font-size: 0.85rem; font-weight: 700; color: var(--done); border: 1.5px solid var(--done-line); border-radius: 4px; padding: 0.15rem 0.5rem; white-space: nowrap; }
.board-who { margin: 0.25em 0 0 calc(0.95rem * 1.3 + 0.7rem); color: var(--muted); }
.sboxes { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.sbox { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 4.6rem; gap: 0.6rem;
  padding: 0.65rem 2rem 0.7rem 0.75rem; border-radius: var(--radius); border: 1.5px dashed var(--idle-line); color: var(--text); }
.sbox::after { content: ""; position: absolute; top: 0.75rem; right: 0.75rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1.5px solid var(--idle-mark); }
.sbox-label { font-weight: 700; line-height: 1.25; }
.sbox-when { font-size: 0.95rem; color: var(--idle); }
.sbox-done { background: var(--done-bg); border: 1.5px solid var(--done-line); }
.sbox-done::after { background: var(--done-mark); border-color: var(--done-mark); }
.sbox-done .sbox-label, .sbox-done .sbox-when { color: var(--done); }
.sbox-done .sbox-when { font-weight: 700; display: flex; align-items: center; gap: 0.45rem; font-variant-numeric: tabular-nums; }
.tick { position: relative; width: 0.75rem; height: 0.75rem; flex: none; }
.sbox .tick::after { left: 0.2rem; top: 0; width: 0.28rem; height: 0.56rem; border-color: var(--done); }
.sbox-waiting { background: var(--wait-bg); border-color: var(--wait-line); }
.sbox-waiting::after { border-color: var(--wait-mark); }
.sbox-waiting .sbox-when { color: var(--wait); }
@media (min-width: 761px) { .sboxes { grid-template-columns: repeat(4, 1fr); } }

/* ---------- the checker: an index card clipped to the page ---------- */
.checker { position: relative; background: var(--band); border: 1px solid var(--line); border-radius: 2px; padding: 1.6rem 1.25rem 1.3rem; margin: 2.2rem 0 1rem;
  box-shadow: 6px 6px 0 var(--band-shadow); }
.checker .clip { position: absolute; top: -1.2rem; right: 2.6rem; width: 1.35rem; height: 2.7rem; stroke: var(--idle-mark); transform: rotate(12deg); }
.checker h2 { margin-top: 0; font-size: clamp(1.45rem, 3.2vw, 1.75rem); max-width: 15em; }
.checker-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0.8rem; align-items: end; }
.checker label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 700; font-size: 0.95rem; color: var(--text); }
.ck-weight > label { margin-bottom: 0.35rem; }
.ck-joined { display: flex; }
.checker input, .checker select { font: inherit; font-size: 1.05rem; padding: 0.6rem 0.7rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--card); color: var(--text); min-width: 0; width: 100%; box-sizing: border-box; }
.ck-joined input { border-right: 0; flex: 1 1 auto; }
.ck-joined select { width: 4.8rem; flex: none; }
.checker-answer { display: flex; gap: 0.7rem; font-size: 1.12rem; font-weight: 600; line-height: 1.45; color: var(--done); margin: 1.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.checker-answer::before { content: ""; flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; border: 1.5px solid var(--done); border-radius: 50%; }
.checker-more { margin: 0.8rem 0 0; font-size: 0.95rem; }
.checker-table { width: 100%; border-collapse: collapse; background: var(--card); font-size: 0.98rem; margin-top: 1rem; }
.checker-table th, .checker-table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.checker-table thead th { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.fit-mark { font-weight: 700; }
.fit-yes { color: var(--done); }
.fit-no { color: var(--muted); }
.checker-note { font-size: 0.9rem; color: var(--muted); margin: 0.8rem 0 0; }

/* ---------- home ---------- */
.home-hero { padding-top: 2.4rem; }
.home-hero h1 { max-width: 15em; }
.hero-sub { font-size: 1.2rem; line-height: 1.6; max-width: 36rem; color: var(--text); }
.home h2 { margin-top: 2.6rem; max-width: 11em; }
.home .checker h2 { margin-top: 0; max-width: 15em; }
/* design A's gutters are 22px at phone width */
.wrap { padding-left: 22px; padding-right: 22px; }
.home section + section { border-top: 1px solid var(--rule); }
.home section.home-check, .home section.home-check + section { border-top: 0; }
.home .home-board { border-top: 0; }
.bar { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: baseline; border-left: 3px solid; padding: 1.1rem 0 1.4rem 1.2rem; }
.bar + .bar { border-top: 1px solid var(--rule); }
.bar h3 { margin: 0; font-size: 1.35rem; }
.bar h3 a { color: var(--text); text-decoration: none; }
.bar h3 a:hover { text-decoration: underline; }
.bar p { grid-column: 1 / -1; margin: 0.4rem 0 0; }
.bar-tag { font-size: 0.85rem; font-weight: 700; }
.bar-stay { border-color: var(--stay-bar); }
.bar-stay .bar-tag { color: var(--done); }
.bar-triad { border-color: var(--triad-bar); }
.bar-triad .bar-tag { color: var(--triad-tag); }
.bar-cost { display: block; border-color: var(--cost-bar); padding: 0.2rem 0 0.2rem 1.1rem; margin-bottom: 2rem; }
.bar-lead { font-family: var(--serif); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; margin: 0 !important; }
.sec-intro { color: var(--muted); font-size: 1.05rem; }
.numbered { list-style: none; counter-reset: n; padding: 0; margin: 1rem 0 0; border-top: 1px solid var(--rule); }
.numbered li { counter-increment: n; display: flex; align-items: center; gap: 1.6rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.numbered li::before { content: counter(n, decimal-leading-zero); color: var(--triad-tag); font-size: 0.92rem; font-variant-numeric: tabular-nums; width: 1.4rem; }
.numbered li::after { content: ""; margin-left: auto; width: 1.1rem; border-top: 1px solid var(--idle-mark); }
.home-news { padding-bottom: 2rem; }

/* ---------- timeline ---------- */
.timeline { list-style: none; padding: 0; margin: 1rem 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0.45rem; top: 0.6rem; bottom: 1.6rem; border-left: 1.5px solid var(--done-line); }
.timeline li { position: relative; padding: 0 0 1.2rem 2.2rem; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 0.25rem; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--bg); border: 2.5px solid var(--idle-mark); box-sizing: border-box; }
.timeline li.tl-key::before { border-color: var(--done); }
.timeline time { font-weight: 700; font-size: 0.92rem; color: var(--done); }
.timeline p { margin: 0.1rem 0 0; }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; margin: 1.2rem 0; }
.supp-table { width: 100%; border-collapse: collapse; font-size: 0.97rem; min-width: 36rem; }
.supp-table th, .supp-table td { text-align: left; vertical-align: top; padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--line); }
.supp-table thead th { border-bottom: 2px solid var(--text); font-size: 0.88rem; }

/* ---------- sign-up ---------- */
.signup-block { background: var(--tint-bg); border-radius: var(--radius); padding: 1.2rem 1.2rem 0.6rem; margin: 2.2rem 0 1rem; }
.signup-block h2 { margin-top: 0; font-size: 1.45rem; }
.signup-block .field-label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.3rem; }
.signup-block select { font: inherit; padding: 0.6rem 0.7rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--card); color: var(--text); margin-bottom: 0.8rem; max-width: 100%; }
/* the home page's green band: email, then the drug, then the button, full width */
.signup-band { background: var(--green); color: var(--on-green); border-radius: 0; margin: 0; padding: 2.4rem max(22px, calc((100% - 856px) / 2)) 2.2rem; }
.signup-band h2 { color: var(--on-green); font-size: clamp(1.7rem, 4vw, 2.1rem); margin: 0 0 1.4rem; max-width: 14em; }
.signup-band .signup { display: flex; flex-direction: column; max-width: 36rem; }
.signup-band .signup-row { display: contents; }
.signup-band .signup-row label { order: 1; }
.signup-band .signup-row input { order: 2; }
.signup-band .signup input[type="email"] { flex: none; }
.signup-band .field-label { order: 3; margin-top: 1.1rem; }
.signup-band select { order: 4; }
.signup-band .signup-row .btn { order: 5; flex: none; }
.signup-band .signup-note { order: 6; }
.signup-band .signup-status { order: 7; }
.signup-band label, .signup-band .field-label { color: var(--on-green); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.4rem; }
.signup-band .signup input[type="email"], .signup-band select { font: inherit; font-size: 1.05rem; padding: 0.7rem 0.8rem; border: 0; border-radius: 2px; background: #fffaf0; color: #352d27; width: 100%; box-sizing: border-box; margin: 0; }
.signup-band .btn { margin-top: 1.4rem; background: var(--cream-btn); color: var(--cream-btn-text); border: 0; border-radius: 3px; font-weight: 700; font-size: 1.05rem; padding: 0.85rem 1rem; width: 100%; }
.signup-band .btn:hover { background: #f3e3bd; }
.signup-band .signup-note, .signup-band .signup-status { color: var(--on-green); text-align: center; font-size: 0.92rem; }
.signup-band a { color: var(--on-green); }

/* ---------- sources ---------- */
.sources { margin-top: 2.5rem; border-top: 1px solid var(--rule); font-size: 0.92rem; color: var(--muted); }
.sources h2 { font-size: 1.1rem; margin-top: 1rem; }
.sources a { overflow-wrap: anywhere; }