@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --salmon: #FA8072;
  --salmon-deep: #B5412F;
  --salmon-light: #FB9285;
  --aubergine: #1F1530;
  --warm-white: #FBF7F4;
  --muted: #5B5068;
  --line: #E8DFD8;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--warm-white);
  color: var(--aubergine);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 980px; margin: 0 auto; width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); }
.small { font-size: 14px; color: var(--muted); line-height: 1.5; }

.topnav {
  display: flex; align-items: center; gap: 22px;
  padding: 22px 20px 0; font-weight: 700; font-size: 15px;
}
.topnav a { text-decoration: none; }
.topnav a:not(.wordmark):hover { text-decoration: underline; }
.topnav .wordmark { margin-right: auto; }
.wordmark { font-weight: 800; letter-spacing: -0.05em; font-size: 28px; margin: 0; text-decoration: none; }
.wordmark span { color: var(--salmon-deep); }
.dark .wordmark span, .hero .wordmark span { color: var(--salmon-light); }

.hero {
  background: var(--aubergine);
  color: var(--warm-white);
  padding: 8px 20px 64px;
}
.hero h1 {
  font-weight: 800; letter-spacing: -0.04em; line-height: 0.98;
  font-size: clamp(42px, 8.5vw, 88px);
  margin: 56px 0 24px; max-width: 12ch;
}
.hero h1 em { font-style: normal; color: var(--salmon-light); }
.hero .lede {
  font-size: clamp(18px, 2.4vw, 22px); line-height: 1.45;
  max-width: 34em; margin: 0 0 28px; color: #E9E2EE;
}
.hero .from { margin: 18px 0 0; color: #E9E2EE; font-size: 15px; line-height: 1.7; }
.hero .from strong { color: var(--salmon-light); }
.hero.plain { padding-bottom: 40px; }
.hero.plain h1 { font-size: clamp(34px, 6vw, 60px); margin-top: 40px; max-width: 18ch; }

.btn {
  display: inline-block; background: var(--salmon); color: var(--aubergine);
  font-weight: 700; padding: 14px 22px; border-radius: 999px; text-decoration: none;
  border: 2px solid var(--salmon); font: inherit; font-weight: 700; cursor: pointer;
}
.btn.secondary { background: transparent; color: var(--warm-white); border-color: var(--warm-white); }
.chip {
  display: inline-block; background: var(--salmon); color: var(--aubergine);
  font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 999px;
}

main { flex: 1; padding: 48px 20px 40px; }
main h1 { font-weight: 800; letter-spacing: -0.03em; font-size: clamp(30px, 5vw, 44px); margin: 0 0 12px; }
main h2 { font-weight: 800; letter-spacing: -0.02em; font-size: 24px; margin: 40px 0 10px; }
main p { line-height: 1.55; max-width: 44em; }
main ul { line-height: 1.6; max-width: 44em; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.grid h2 { font-size: 20px; letter-spacing: -0.02em; margin: 0 0 8px; }
.grid h2::before {
  content: ""; display: block; width: 28px; height: 6px; border-radius: 3px;
  background: var(--salmon); margin-bottom: 14px;
}
.grid p { margin: 0; line-height: 1.5; color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.card { background: #fff; border-radius: 16px; padding: 20px; border: 1px solid var(--line); text-decoration: none; display: block; }
.card:hover { border-color: var(--salmon); }
.card h2 { margin: 0 0 6px; font-size: 20px; }
.card .big { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--salmon-deep); }
.card .big.none { color: var(--muted); font-size: 18px; }
.card .small { margin: 6px 0 0; }

.notice {
  background: #fff; border-left: 6px solid var(--salmon); padding: 14px 18px;
  border-radius: 8px; color: var(--muted); line-height: 1.5; max-width: none;
}
.meta { color: var(--muted); font-size: 15px; margin: 14px 0 0; }

.controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 18px 0; }
.dose-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.dose-buttons button {
  font: inherit; font-weight: 700; padding: 8px 14px; border-radius: 999px;
  border: 2px solid var(--aubergine); background: var(--warm-white); color: var(--aubergine); cursor: pointer;
}
.dose-buttons button[aria-pressed="true"] { background: var(--salmon); border-color: var(--salmon); }
.controls select, .controls input[type=search] {
  font: inherit; padding: 8px 12px; border-radius: 10px; border: 2px solid var(--line); background: #fff;
}

.table-wrap { overflow-x: auto; background: #fff; border-radius: 16px; border: 1px solid var(--line); }
table.prices { border-collapse: collapse; width: 100%; font-size: 15px; }
table.prices th, table.prices td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: top; }
table.prices thead th { font-weight: 700; color: var(--muted); font-size: 13px; }
table.prices tbody th { font-weight: 700; }
table.prices tbody th small { font-weight: 400; color: var(--muted); }
table.prices td.price { font-variant-numeric: tabular-nums; font-weight: 700; }
table.prices td.price.best { color: var(--salmon-deep); }
table.prices tr.stale td, table.prices tr.stale th { color: var(--muted); }
table.prices tr.stale td.price { font-weight: 400; }
table.prices small { font-size: 12px; }
@media (max-width: 720px) {
  table.prices th.dose, table.prices td.dose { display: none; }
  table.prices th.dose.active, table.prices td.dose.active { display: table-cell; }
  table.prices th, table.prices td { padding: 10px; }
}

form.waitlist { display: flex; gap: 10px; flex-wrap: wrap; position: relative; margin: 18px 0 10px; }
form.waitlist input[type=email] {
  font: inherit; padding: 12px 16px; border-radius: 999px; border: 2px solid var(--aubergine);
  min-width: 240px; flex: 1; max-width: 420px; background: #fff;
}
form.waitlist .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
#waitlist-msg { font-weight: 700; color: var(--salmon-deep); }

.band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 48px 20px; }

footer { padding: 24px 20px 32px; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* standard vs new-patient price in a cell */
table.prices td.price .std { display: block; }
table.prices td.price .intro { display: block; font-weight: 400; color: var(--salmon-deep); font-size: 13px; }
table.prices td.price .intro small { display: block; font-size: 11px; color: var(--muted); }
table.prices.intro-mode td.price .intro { font-weight: 700; font-size: 15px; }
table.prices.intro-mode td.price .std { font-weight: 400; color: var(--muted); font-size: 13px; }