/* CarePath brand — Teal & Apricot.
   Shared by every public page (onboarding, terms, appointment). Flat fills, thin borders,
   Figtree throughout. No gradients, no glow, no drop shadows outside the WhatsApp preview. */

:root {
  --paper: #F8F7F0;      /* page background, warm off-white */
  --teal: #164C45;       /* primary brand */
  --apricot: #F5C7A9;    /* primary buttons and highlights */
  --apricot-deep: #F0B994;
  --ink: #203B36;        /* main text */
  --sage: #E8EDE5;       /* secondary surfaces */
  --ink-2: #53665E;      /* secondary text */
  --line: #D4DBD0;       /* borders and dividers */
  --white: #FFFFFF;
  --error: #8C3A2B;      /* the one colour outside the palette: form errors only */
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-btn: 10px;
  --r-card: 16px;
  --r-panel: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
[hidden] { display: none !important; }

.page { max-width: 1080px; margin: 0 auto; padding: 24px 20px 48px; }
@media (min-width: 720px) { .page { padding: 32px 32px 64px; } }

/* ── Brand lockup: carepath, by alongside. The "cp" mark is a placeholder for the real logo. ── */
.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-mark { height: 36px; width: auto; display: block; }
.brand-word { height: 17px; width: auto; display: block; }
.brand-by { display: block; font-weight: 500; font-size: 12px; color: var(--ink-2); margin-top: 5px; line-height: 1; }
.practice { font-weight: 500; font-size: 14px; color: var(--ink-2); padding-top: 8px; }

/* ── Type ── */
.display { font-weight: 500; font-size: clamp(34px, 6vw, 54px); line-height: 1.04; letter-spacing: -.028em; margin: 0; text-wrap: balance; }
.h1 { font-weight: 500; font-size: clamp(26px, 5vw, 32px); line-height: 1.12; letter-spacing: -.022em; margin: 0; text-wrap: balance; }
.h2 { font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; margin: 0; }
.deck { font-size: 18px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.small { font-size: 14px; line-height: 1.45; color: var(--ink-2); margin: 0; }
.caption { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin: 0; }
.small b, .caption b { font-weight: 600; color: var(--ink); }

/* ── Buttons: apricot with dark text and a thin dark border; secondary is outlined ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 50px; padding: 13px 20px; border-radius: var(--r-btn);
  font: 500 16px/1.2 var(--font); color: var(--ink); text-decoration: none; text-align: center; cursor: pointer;
  border: 1px solid var(--ink); background: transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
.btn.primary { background: var(--apricot); }
.btn.primary:hover { background: var(--apricot-deep); }
.btn.secondary:hover { background: var(--sage); }
.btn[disabled] { opacity: .55; cursor: default; }
.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--ink); }

/* ── Cards and forms ── */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 20px; }
@media (min-width: 720px) { .card { padding: 28px; } }
.field { display: block; margin-top: 18px; }
.field:first-child { margin-top: 0; }
.label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.label .opt { font-weight: 400; color: var(--ink-2); }
.input {
  width: 100%; font: 400 16px/1.3 var(--font); color: var(--ink); padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--paper);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: #8C9B94; }
.input:hover { border-color: #B8C3BC; }
.input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px #D7E3DF; }
.hint { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin: 6px 0 0; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--teal); }
.consent a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
.actions { margin-top: 20px; }
.actions .hint { margin-top: 12px; }
.err { color: var(--error); font-size: 14px; line-height: 1.45; margin: 12px 0 0; }

/* ── Panels: deep teal with warm off-white text; sage when the content is no longer live ── */
.panel { background: var(--teal); color: var(--paper); border-radius: var(--r-panel); padding: 20px; }
@media (min-width: 720px) { .panel { padding: 28px; } }
.panel.muted { background: var(--sage); color: var(--ink); }
.eyebrow { font-weight: 500; font-size: 14px; line-height: 1.3; opacity: .74; margin: 0 0 10px; }
.panel .caption { color: inherit; opacity: .74; }

/* ── Status pills ── */
.pill { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border-radius: 999px; font-weight: 500; font-size: 13px; line-height: 1; border: 1px solid transparent; }
.pill.solid { background: var(--apricot); color: var(--ink); }
.pill.outline { border-color: currentColor; opacity: .8; }

/* ── Key/value list with hairline rows ── */
.kv { margin: 24px 0 0; padding: 0; }
.kv div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.kv div:last-child { border-bottom: 1px solid var(--line); }
.kv dt { color: var(--ink-2); font-size: 14px; font-weight: 500; padding-top: 2px; }
.kv dd { margin: 0; }

/* ── Layouts ── */
.hero { display: grid; gap: 32px; margin-top: 32px; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; margin-top: 56px; align-items: start; } }
.intro > * + * { margin-top: 16px; }
.intro .card { margin-top: 28px; }
.narrow { max-width: 520px; margin-top: 32px; }
.narrow > * + * { margin-top: 20px; }
.prose { max-width: 640px; margin-top: 32px; }
.prose h1 { font-weight: 500; font-size: clamp(28px, 5vw, 36px); line-height: 1.1; letter-spacing: -.024em; margin: 0 0 20px; }
.prose h2 { font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; margin: 28px 0 8px; }
.prose p { margin: 0 0 14px; line-height: 1.55; }
.prose a { text-decoration-color: var(--line); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--ink); }

.foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.foot p { margin: 0; max-width: 560px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot a { color: var(--ink-2); text-decoration-color: var(--line); text-underline-offset: 3px; white-space: nowrap; }
.foot a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ── WhatsApp preview: native WhatsApp styling on purpose, so people recognise what they will see ── */
.wa { background: #E5DDD5; border-radius: 16px; overflow: hidden; color: #111B21; font-size: 14.5px; line-height: 1.35; }
.wa-head { background: #008069; color: #fff; display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.wa-avatar { width: 34px; height: 34px; border-radius: 50%; background: #DFE5E7; color: #54656F; display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: none; }
.wa-head b { display: block; font-weight: 600; font-size: 15px; line-height: 1.2; }
.wa-head small { display: block; font-size: 12px; opacity: .85; margin-top: 1px; }
.wa-body { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.wa-day { align-self: center; background: #fff; color: #54656F; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11,20,26,.13); margin-bottom: 4px; }
.wa-msg { max-width: 86%; padding: 6px 8px 5px 9px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-msg.in { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.wa-msg.out { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 0; }
.wa-meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: 11px; color: #667781; margin-top: 3px; line-height: 1; }
.wa-meta svg { width: 16px; height: 11px; color: #53BDEB; }
.wa-replies { align-self: flex-start; width: 86%; display: flex; flex-direction: column; gap: 3px; }
.wa-reply { background: #fff; border-radius: 8px; padding: 9px 10px; text-align: center; color: #027EB5; font-weight: 500; font-size: 14px; box-shadow: 0 1px .5px rgba(11,20,26,.13); display: flex; align-items: center; justify-content: center; gap: 6px; }
.wa-reply svg { width: 14px; height: 14px; }

/* Entrance: the page script "arms" the preview before first paint and "plays" it when the panel scrolls
   into view, so people actually watch the conversation happen. Without script (or with reduced motion)
   every message is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .wa.armed .wa-body > * { opacity: 0; }
  .wa.play .wa-body > * { animation: wa-in .38s cubic-bezier(.2, 0, 0, 1) both; }
  .wa-body > :nth-child(1) { animation-delay: .1s; }
  .wa-body > :nth-child(2) { animation-delay: .35s; }
  .wa-body > :nth-child(3) { animation-delay: .95s; }
  .wa-body > :nth-child(4) { animation-delay: 1.65s; }
  .wa-body > :nth-child(5) { animation-delay: 2.35s; }
  .wa-body > :nth-child(6) { animation-delay: 2.7s; }
  @keyframes wa-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ── Appointment panel ── */
.panel .when { font-weight: 500; font-size: 20px; line-height: 1.3; margin: 14px 0 0; }
.panel .when-time { font-size: 17px; line-height: 1.4; opacity: .8; margin: 2px 0 16px; }
.hint { display: block; }