/* Peptra marketing site — "Warm & Reassuring" (Direction A, 2026-07-20).
   A warm, inviting light theme for the everyday GLP-1 user: cream canvas, soft
   coral primary, sage + gold warmth. The design principle still holds — color
   is a safety signal, so the four regulatory-status chips keep their reserved
   hues (now tuned for a light background) and the coral brand color is
   perceptually distinct from all of them. See docs/design/2026-07-20-design-system-warm.md. */

:root {
  --ink: #2e2622;            /* warm near-black text */
  --bg: #fbf3ec;            /* cream canvas */
  --bg-2: #f5e7dc;          /* warm sand (inputs, alt surface) */
  --surface: #ffffff;       /* clean white cards */
  --line: #ede0d4;          /* warm hairline */
  --text: #2e2622;
  --muted: #6b5d54;
  --faint: #8a7a6e;

  /* Brand — soft coral, warm and inviting, distinct from every status hue. */
  --coral: #e8825c;
  --coral-deep: #d76a45;
  --peach: #f0a87e;
  --sage: #8fb89e;
  --sage-deep: #5c9478;
  --gold: #e4b363;

  /* Legacy names kept so existing markup keeps working. */
  --bone: #e8825c;          /* primary button now coral, not bone */
  --on-bone: #ffffff;

  /* Regulatory-status chips — tuned for a light surface. */
  --approved-fg: #1e7a45;   --approved-bg: #e1f3e8;
  --compounded-fg: #2563b0; --compounded-bg: #e2edfa;
  --restricted-fg: #a85b12; --restricted-bg: #f8e9d5;
  --research-fg: #c0342e;   --research-bg: #fbe3e0;

  --display: 'Fraunces', 'Space Grotesk', Georgia, serif;
  --body: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
  --mono: 'Spline Sans Mono', 'JetBrains Mono', ui-monospace, monospace;

  --wrap: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(38px, 6vw, 62px); }
h1 em { font-style: italic; color: var(--sage-deep); }
h2 { font-size: clamp(27px, 3.6vw, 38px); }
h2 em { font-style: italic; color: var(--sage-deep); }
h3 { font-size: 21px; }
p { margin: 0 0 1em; }
a { color: var(--coral-deep); }

.eyebrow {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin: 0 0 12px;
}

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.lead { font-size: 20px; color: var(--muted); max-width: 62ch; }

/* ---- measurement rail: kept as a subtle signature, warmed ---- */
.rail { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin: 28px 0; }
.rail i { display: block; width: 3px; border-radius: 2px; background: var(--line); height: 12px; }
.rail i:nth-child(5n + 1) { height: 26px; background: var(--coral); opacity: 0.85; }
.rail.dim i:nth-child(5n + 1) { opacity: 0.5; }

/* ---- header ---- */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 243, 236, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 600; font-size: 20px; text-decoration: none; letter-spacing: -0.02em; color: var(--ink); }
.brand .mark { display: flex; align-items: flex-end; gap: 2.5px; height: 20px; }
.brand .mark i { width: 3px; background: var(--coral); border-radius: 2px; height: 9px; }
.brand .mark i:nth-child(3) { height: 20px; }
nav.site a { color: var(--muted); text-decoration: none; margin-left: 26px; font-size: 15px; font-weight: 500; }
nav.site a:hover { color: var(--coral-deep); }
@media (max-width: 720px) { nav.site a { margin-left: 16px; font-size: 14px; } nav.site a.hide-sm { display: none; } }

/* ---- buttons ---- */
.btn {
  display: inline-block; padding: 15px 28px; border-radius: 100px;
  background: var(--coral); color: #fff;
  font-weight: 600; text-decoration: none; border: 1px solid var(--coral);
  box-shadow: 0 12px 26px rgba(232, 130, 92, 0.30);
  transition: transform .15s, background .15s;
}
.btn:hover { background: var(--coral-deep); border-color: var(--coral-deep); transform: translateY(-2px); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--coral); color: var(--coral-deep); transform: none; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ---- sections ---- */
section { padding: 84px 0; border-top: 1px solid var(--line); }
section.hero { padding: 88px 0 72px; border-top: 0; }

.grid { display: grid; gap: 22px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 12px 32px rgba(46, 38, 34, 0.06);
}
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }

/* ---- status chips: the reserved safety colours ---- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 8px;
  border: 1px solid currentColor; margin: 0 6px 8px 0;
}
.chip.approved { color: var(--approved-fg); background: var(--approved-bg); }
.chip.compounded { color: var(--compounded-fg); background: var(--compounded-bg); }
.chip.restricted { color: var(--restricted-fg); background: var(--restricted-bg); }
.chip.research { color: var(--research-fg); background: var(--research-bg); }

/* ---- calculator ---- */
.calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.field label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.field input, .field select {
  width: 100%; padding: 13px 14px; font-family: var(--mono); font-size: 17px;
  color: var(--text); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 12px;
}
.field input:focus, .field select:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
.result { margin-top: 26px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 12px 32px rgba(46, 38, 34, 0.06); }
.figure { font-family: var(--mono); font-size: clamp(44px, 8vw, 68px); line-height: 1; letter-spacing: -0.03em; color: var(--coral-deep); }
.figure small { font-family: var(--display); font-size: 21px; letter-spacing: -0.02em; margin-left: 10px; color: var(--text); }
.warn { color: var(--restricted-fg); font-size: 15px; margin-top: 12px; }
.err { color: var(--research-fg); font-size: 15px; }

/* ---- prose for guides ---- */
.prose { max-width: 72ch; }
.prose h2 { margin: 44px 0 14px; }
.prose h3 { margin: 30px 0 10px; }
.prose ul, .prose ol { padding-left: 22px; color: var(--muted); }
.prose li { margin-bottom: 9px; }
.prose table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.prose td { color: var(--muted); }
.prose td strong { color: var(--text); font-weight: 600; }

.note {
  border-left: 3px solid var(--coral);
  background: var(--surface);
  border-radius: 0 14px 14px 0;
  padding: 18px 22px; margin: 26px 0;
  box-shadow: 0 8px 24px rgba(46, 38, 34, 0.05);
}
.note p:last-child { margin-bottom: 0; }

/* ---- footer ---- */
footer.site { border-top: 1px solid var(--line); padding: 52px 0 68px; color: var(--muted); font-size: 15px; }
footer.site a { color: var(--muted); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; margin-bottom: 34px; }
.foot-grid h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; font-weight: 400; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 8px; }
.disclaimer { border-top: 1px solid var(--line); padding-top: 24px; font-size: 14px; color: var(--faint); max-width: 78ch; }