/*
 * Ellery Health website: one stylesheet for every page.
 *
 * The tokens and the component rules come from the Ellery Health design system (tokens.json and
 * components/bundle.css) and are copied, not restyled. What the system leaves to the page is at the foot of
 * the file under "Site layout", and it uses the same tokens.
 *
 * No inline styles and no scripts anywhere on the site. The fonts load from Google Fonts by <link>; the
 * distribution's Content-Security-Policy (infra/lib/site-config.ts) allows that host and nothing else.
 */

/* ---------- Tokens (tokens.json) ---------- */
:root {
  --emerald: #047857;
  --forest: #065F46;
  --gold: #D4A373;
  --cream: #F7F4EF;
  --charcoal: #1C1C1C;
  --paper: #FFFFFF;
  --slate: #4A5568;
  --line: #E5E0D8;
  --field-edge: #828282;
  --attention: #9A5B00;
  --tint-emerald: rgba(4, 120, 87, 0.10);

  --ground: var(--cream);
  --ink: var(--charcoal);
  --muted: var(--slate);
  --focus: var(--emerald);
  --on-emerald: var(--paper);

  --font-sans: Inter, Arial, Helvetica, sans-serif;
  --font-serif: "Source Serif 4", "Libre Baskerville", Georgia, "Times New Roman", serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --panel-side: 28px;
  --site-gutter: 20px;
  --site-section: 58px;
  --site-section-phone: 44px;

  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Site layout only: the width of the page column and of the reading column on the legal pages. */
  --site-width: 1040px; /* three capability cards across, as the page blueprint asks: a fourth needs 1076px */
  --site-prose: 720px;
}

/* ---------- Base (bundle.css) ---------- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
.eh { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--ground); }
.eh, .eh *, .eh *::before, .eh *::after { box-sizing: border-box; }
.eh a { color: var(--emerald); }
.eh a:hover { color: var(--forest); }
.eh :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.eh h1, .eh h2, .eh h3 { margin: 0; color: var(--forest); }
@media (prefers-reduced-motion: reduce) { .eh *, .eh *::before, .eh *::after { transition: none !important; animation: none !important; } }

/* ---------- Button (bundle.css) ---------- */
.eh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: var(--radius-sm); font: 600 0.95rem var(--font-sans);
  cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.eh-btn.eh-btn--primary { background: var(--emerald); color: var(--on-emerald); }
.eh-btn.eh-btn--primary:hover { background: var(--forest); color: var(--on-emerald); }
.eh-btn.eh-btn--quiet { background: var(--paper); color: var(--forest); border-color: var(--field-edge); }
.eh-btn.eh-btn--quiet:hover { background: var(--cream); color: var(--forest); border-color: var(--emerald); }
.eh-btn.eh-btn--gold { background: var(--gold); color: var(--charcoal); }
.eh-btn.eh-btn--gold:hover { background: var(--cream); color: var(--charcoal); }
.eh-btn.eh-btn--ghost { background: transparent; color: var(--on-emerald); border-color: var(--cream); }
.eh-btn.eh-btn--ghost:hover { background: var(--forest); color: var(--on-emerald); }

/* ---------- Notice (bundle.css) ---------- */
.eh-notice { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: 0.95rem;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--slate); }
.eh-notice.eh-notice--good { background: var(--tint-emerald); border-color: rgba(4, 120, 87, 0.25); border-left-color: var(--emerald); }

/* ---------- Disclaimer (bundle.css) ---------- */
.eh-disclaimer { margin: 0; font-size: 0.85rem; color: var(--muted); max-width: 72ch; }

/* ---------- Website surface: .eh .eh-site (bundle.css) ---------- */
.eh-site { font-size: 17px; line-height: 27px; }
.eh-site h1, .eh-site h2, .eh-site h3 { font-family: var(--font-serif); letter-spacing: -0.012em; text-wrap: balance; }
.eh-site h1 { font-size: 47px; line-height: 52px; font-weight: 700; }
.eh-site h2 { font-size: 31px; line-height: 38px; font-weight: 600; }
.eh-site h3 { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
.eh-kicker { margin: 0 0 12px; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--emerald); }

/* Header */
.eh-header { background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px var(--site-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.eh-brand { display: inline-flex; align-items: center; text-decoration: none; }
.eh-brand img { width: auto; display: block; }
.eh-header .eh-brand img { height: 44px; }
.eh-header nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.eh-header nav a:not(.eh-btn) { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.eh-header nav a:not(.eh-btn):hover { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }

/* Hero */
.eh-hero { background: var(--emerald); color: var(--on-emerald); padding: var(--site-section) var(--site-gutter); }
.eh-hero .eh-kicker { color: var(--cream); }
.eh-site .eh-hero h1 { color: var(--on-emerald); margin: 0 0 16px; }
.eh-hero-lead { margin: 0 0 24px; color: var(--cream); max-width: 56ch; }
.eh-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.eh-hero-note { margin: 16px 0 0; color: var(--cream); font-size: 15px; line-height: 23px; }
.eh-hero :focus-visible { outline-color: var(--paper); }
.eh-hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; align-items: center; }
@media (max-width: 860px) { .eh-hero-split { grid-template-columns: 1fr; } .eh-hero { padding-top: var(--site-section-phone); padding-bottom: var(--site-section-phone); } }

/* Footer */
.eh-footer { background: var(--paper); border-top: 1px solid var(--line); padding: 28px var(--site-gutter); }
.eh-footer nav { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; font-size: 15px; }
.eh-footer p { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 21px; max-width: 70ch; }

/* CapabilityCard */
.eh-capabilities { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.eh-capability { border-top: 2px solid var(--gold); padding-top: 16px; }
.eh-site .eh-capability h3 { margin: 0 0 6px; }
.eh-capability p { margin: 0; color: var(--muted); font-size: 15px; line-height: 23px; }

/* DayList */
.eh-daylist { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; color: var(--ink);
  font-family: var(--font-sans); font-size: 14px; line-height: 21px; }
.eh-daylist-head { background: var(--cream); border-bottom: 1px solid var(--line); padding: 12px 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.eh-daylist-head span { color: var(--muted); font-size: 12px; }
.eh-daylist-row { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.eh-daylist-who { display: flex; gap: 12px; align-items: baseline; }
.eh-daylist-who time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); font-weight: 500; min-width: 30px; }
.eh-daylist-who b { font-weight: 600; }
.eh-answer { margin-left: 42px; font-size: 13px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.eh-answer i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.eh-answer .eh-ok { color: var(--emerald); font-weight: 600; }
.eh-answer .eh-attn { color: var(--attention); font-weight: 600; }
.eh-answer i.eh-ok { background: var(--emerald); }
.eh-answer i.eh-attn { background: var(--attention); }
.eh-answer .eh-detail { color: var(--muted); }
.eh-daylist-foot { padding: 10px 16px; background: var(--cream); color: var(--muted); font-size: 12px; line-height: 18px; }

/* FAQ */
.eh-faq { border-top: 1px solid var(--line); }
.eh-faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.eh-faq summary { font-weight: 600; cursor: pointer; list-style: none; font-size: 16px; }
.eh-faq summary::-webkit-details-marker { display: none; }
.eh-faq summary::before { content: "+"; display: inline-block; width: 24px; color: var(--emerald); font-weight: 700; }
.eh-faq details[open] summary::before { content: "\2212"; }
.eh-faq details p { margin: 10px 0 0 24px; color: var(--muted); font-size: 15px; line-height: 23px; }

/* FlagNote */
.eh-flag { border-left: 3px solid var(--attention); padding: 4px 0 4px 18px; margin: 0; color: var(--muted); }
.eh-flag b { color: var(--ink); }

/* PlanCard */
.eh-plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.eh-plan { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; }
.eh-plan.eh-plan--chosen { border: 2px solid var(--emerald); padding: 21px; }
.eh-plan-price { margin: 0 0 4px; font-family: var(--font-serif); font-size: 36px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.eh-plan-unit { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 21px; }
.eh-plan .eh-btn { margin-top: auto; }
.eh-pilltag { margin-left: 6px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--emerald); color: var(--on-emerald);
  font-size: 11px; line-height: 14px; letter-spacing: 0.04em; vertical-align: 1px; }

/* ProofList */
.eh-proof { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.eh-proof-row { padding: 16px 18px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.eh-proof-row:last-child { border-bottom: 0; }
.eh-proof-row svg { width: 16px; height: 16px; margin-top: 5px; color: var(--emerald); }
.eh-proof-row b { display: block; margin-bottom: 2px; font-size: 16px; line-height: 24px; }
.eh-proof-row span { color: var(--muted); font-size: 14px; line-height: 21px; }

/* ---------- Site layout: what the pages need and the system leaves to the page ---------- */

/* The header and footer keep the system's markup; this lines their contents up with the page column. */
.eh-header, .eh-footer {
  padding-left: max(var(--site-gutter), calc((100% - var(--site-width)) / 2));
  padding-right: max(var(--site-gutter), calc((100% - var(--site-width)) / 2));
}
/* Sticky, as the Header component asks, where there is room for it. On a phone the links wrap to a second row
   and a sticky bar would cover a fifth of the screen, so it scrolls away with the page. */
@media (min-width: 861px) {
  .eh-header { position: sticky; top: 0; z-index: 10; }
  .eh-site [id] { scroll-margin-top: 92px; }
}
.eh-footer p:last-child { margin-bottom: 0; }

.eh-skip { position: absolute; left: -9999px; top: 0; padding: 10px 16px; background: var(--paper); color: var(--forest); font-weight: 600; z-index: 20; }
.eh-skip:focus { left: var(--site-gutter); top: 8px; }

.eh-wrap { max-width: var(--site-width); margin: 0 auto; }
.eh-wrap--prose { max-width: var(--site-prose); }

/* Sections on the ground, a hairline between them, the site's rhythm above and below. */
.eh-section { padding: var(--site-section) var(--site-gutter); border-top: 1px solid var(--line); }
.eh-hero + .eh-section { border-top: 0; }
.eh-section h2 { margin: 0 0 12px; }
.eh-section h3 { margin: 28px 0 8px; }
.eh-section p { margin: 0 0 14px; max-width: 68ch; }
.eh-section p:last-child { margin-bottom: 0; }
.eh-section .eh-capabilities { margin-top: 28px; }
.eh-section-lead { color: var(--muted); }
@media (max-width: 860px) { .eh-section { padding-top: var(--site-section-phone); padding-bottom: var(--site-section-phone); } }

/* A text link on the emerald hero. The base link colour is emerald, which is the ground here. */
.eh-hero a:not(.eh-btn) { color: var(--on-emerald); text-underline-offset: 3px; }
.eh-hero a:not(.eh-btn):hover { color: var(--cream); }

/* The plain hero on the two legal pages carries the dates where the other pages carry their lead. */
.eh-hero--plain .eh-hero-lead { margin-bottom: 0; }

/* A capability card's link into the page that covers it. */
.eh-capability a { display: inline-block; margin-top: 10px; font-size: 15px; line-height: 23px; font-weight: 600; text-underline-offset: 3px; }

/* Bulleted detail under a prose section. */
.eh-list { margin: 0 0 14px; padding-left: 22px; max-width: 68ch; }
.eh-list li { margin: 0 0 8px; }
.eh-list li:last-child { margin-bottom: 0; }
.eh-list li::marker { color: var(--emerald); }

/* Words beside a picture: two columns that become one under 860px, words first. */
.eh-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.eh-split.eh-split--phone { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.eh-split .eh-shot { margin-top: 6px; }
@media (max-width: 860px) { .eh-split, .eh-split.eh-split--phone { grid-template-columns: 1fr; gap: 28px; } }

/* A screen from the app: the picture inside a website panel's edge, its caption beneath. The picture links to
   itself at full size, because a desk-width screen on a phone is too small to read where it sits. */
.eh-shot { margin: 28px 0 0; }
.eh-shot a { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.eh-shot a:hover { border-color: var(--field-edge); }
.eh-shot img { display: block; width: 100%; height: auto; }
.eh-shot figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 21px; max-width: 70ch; }
.eh-shot.eh-shot--phone { max-width: 300px; }
.eh-shot.eh-shot--phone a { border-radius: 22px; }
.eh-shot.eh-shot--narrow { max-width: 392px; }
.eh-shots { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; margin-top: 28px; }
.eh-shots .eh-shot { margin-top: 0; }
.eh-section .eh-disclaimer { margin-top: 14px; }

/* Three ways onward: a paper panel that is one link. */
.eh-next { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); margin-top: 28px; }
.eh-next a { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; text-decoration: none; color: var(--ink); }
.eh-next a:hover { border-color: var(--emerald); color: var(--ink); }
.eh-site .eh-next h3 { margin: 0 0 6px; font-size: 19px; line-height: 26px; }
.eh-next p { margin: 0; color: var(--muted); font-size: 15px; line-height: 23px; }
.eh-next span { display: inline-block; margin-top: 12px; color: var(--emerald); font-size: 15px; line-height: 23px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* A small table: the fixed wording, and what each plan holds. Scrolls sideways on a phone before it squeezes. */
.eh-tablewrap { margin-top: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; }
.eh-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 23px; }
.eh-table th, .eh-table td { padding: 12px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.eh-table tbody tr:last-child th, .eh-table tbody tr:last-child td { border-bottom: 0; }
.eh-table thead th { background: var(--cream); color: var(--muted); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.eh-table tbody th { font-weight: 600; }
.eh-table td { font-variant-numeric: tabular-nums; }
.eh-table.eh-table--plans thead th:not(:first-child) { width: 21%; }

/* The lists, the flags and the cards sit a little below the words that introduce them, and the words that
   follow one of them sit a little below it. */
.eh-section .eh-proof, .eh-section .eh-faq, .eh-section .eh-plans { margin-top: 24px; }
.eh-section .eh-proof + p, .eh-section .eh-tablewrap + p, .eh-section .eh-shots + p, .eh-section .eh-shot + p,
.eh-section .eh-capabilities + p, .eh-section .eh-next + p { margin-top: 20px; }
.eh-section .eh-shots + .eh-split, .eh-section .eh-proof + .eh-split, .eh-section p + .eh-split { margin-top: 32px; }
.eh-split > div > :first-child { margin-top: 0; }
.eh-section .eh-flag { margin-top: 20px; max-width: 68ch; }
.eh-section .eh-daylist { max-width: 520px; }

/* What a plan holds, between its price and its button. */
.eh-plan .eh-kicker { margin-bottom: 14px; }
.eh-plan ul { margin: 0 0 22px; padding-left: 20px; font-size: 15px; line-height: 23px; }
.eh-plan li { margin-bottom: 6px; }
.eh-plan li::marker { color: var(--emerald); }

/* Talk to us: the contact block. A website panel: paper, a hairline, radius-lg, no shadow. */
.eh-contact { margin: 20px 0 0; padding: 22px var(--panel-side); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; max-width: 560px; }
.eh-contact dt { font-weight: 600; }
.eh-contact dd { margin: 0; }

/* The patient notice and the two notices on the legal pages: the Notice component's "good" look
   (tint-emerald, an emerald rule), at the size of a section instead of a line.
   In the portal a notice sits on a paper panel. Here it sits straight on the cream ground, where the tint alone
   would leave an emerald link at 4.4:1. So the tint is laid over paper, as it is in the portal: 4.8:1. */
.eh-notice.eh-notice--block { padding: 22px var(--panel-side); font-size: inherit; max-width: 780px;
  background-color: var(--paper); background-image: linear-gradient(var(--tint-emerald), var(--tint-emerald)); }
.eh-notice--block h2, .eh-notice--block h3 { margin: 0 0 12px; }
.eh-notice--block p { margin: 0 0 14px; max-width: 68ch; }
.eh-notice--block p:last-child { margin-bottom: 0; }

/* Legal pages: one reading column. */
.eh-legal h2 { margin: 44px 0 12px; }
.eh-legal > h2:first-child, .eh-legal > :first-child { margin-top: 0; }
.eh-legal h3 { margin: 24px 0 8px; }
.eh-legal p, .eh-legal li { margin: 0 0 14px; }
.eh-legal ul { margin: 0 0 14px; padding-left: 22px; }
.eh-legal li:last-child { margin-bottom: 0; }
.eh-legal .eh-notice--block { margin: 32px 0; }
.eh-legal .eh-notice--block h2 { margin-top: 0; }
.eh-legal-part { margin-top: 58px; padding-top: 44px; border-top: 1px solid var(--line); }
.eh-legal-part > h2 { margin-top: 0; }

/* A phone has no room for a 47px headline or a 31px section heading on one or two lines. */
@media (max-width: 560px) {
  .eh-site h1 { font-size: 36px; line-height: 41px; }
  .eh-site h2 { font-size: 26px; line-height: 32px; }
  .eh-header .eh-brand img { height: 40px; }
  .eh-header nav { gap: 14px 18px; }
  .eh-contact { grid-template-columns: 1fr; gap: 2px; padding: 20px; }
  .eh-contact dd { margin-bottom: 10px; }
  .eh-contact dd:last-child { margin-bottom: 0; }
  .eh-notice.eh-notice--block { padding: 20px; }
  .eh-table th, .eh-table td { padding: 10px 14px; }
  .eh-shot.eh-shot--phone { max-width: 280px; }
}