/* Flora House — Clinical Calm design system (see design.md) */

:root {
  --ink: #1B1B1F;
  --ink-2: #44454C;
  --muted: #6E6E76;
  --canvas: #F7F6F1;
  --surface: #FFFFFF;
  --line: #E4E1D6;
  --brand: #1F6F4C;
  --brand-dark: #164F37;
  --brand-tint: #E5F1EA;
  --accent-slate: #3E5C76;
  --warning: #B8791A;
  --error: #B23B3B;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --sticky-cta-height: 84px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F2F1EC;
    --ink-2: #C9C8C2;
    --muted: #9B9A94;
    --canvas: #15161A;
    --surface: #1D1F23;
    --line: #2C2E33;
    --brand: #3FA579;
    --brand-dark: #56B98D;
    --brand-tint: #173327;
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }

a { color: var(--brand); }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.wordmark span { color: var(--brand); }

.site-nav {
  display: none;
  margin-left: auto;
}
.site-nav ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-block;
  padding: 12px 14px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
}
.site-nav a:hover { color: var(--ink); background: var(--brand-tint); }

.site-header .header-cta { display: none; margin-left: 8px; }

/* "Log in" — for patients who already have an account, not a second call to
   action. Deliberately quieter and smaller than the eligibility CTA next to
   it, so the header still has one obvious primary action. Hidden with the CTA
   below 1024px; the mobile panel carries the same link. */
.site-header .header-login {
  display: none;
  min-height: 38px;
  padding: 8px 14px;
  font-size: 0.875rem;
  color: var(--ink-2);
  background: transparent;
  border-color: var(--line);
  white-space: nowrap;
}
.site-header .header-login:hover {
  color: var(--ink);
  border-color: var(--brand);
  background: var(--brand-tint);
}

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

/* The full header — up to six nav links plus both buttons — needs about 1100px
   to lay out on one line. Below that the toggle stays, and the mobile panel
   carries the same links. (At 768px the six-link guide pages were already
   wrapping before the clinician button was added.) */
@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-header .header-cta,
  .site-header .header-login { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* 1024-1199px is the tight band: shrink the links and the secondary button
   rather than let anything wrap. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-header .container { gap: 12px; }
  .site-nav a { padding: 12px 9px; font-size: 0.875rem; }
  .site-header .header-cta { margin-left: 4px; }
  .site-header .header-login { padding: 8px 12px; font-size: 0.8125rem; }
}

/* Mobile nav panel (works without JS via :target fallback is not needed —
   nav links are repeated in the footer, so no content is JS-locked) */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--canvas);
}
.mobile-nav.open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 16px 16px; }
.mobile-nav a {
  display: block;
  padding: 14px 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.0625rem;
  border-bottom: 1px solid var(--line);
}
.mobile-nav li:last-child a { border-bottom: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--brand);
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-secondary:hover { background: var(--brand-tint); }

@media (prefers-color-scheme: dark) {
  .btn-primary { color: #0E1F17; }
}

/* ---------- Hero ---------- */

.hero {
  padding: 56px 0 40px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 6vw, 3.5rem);
  line-height: 1.08;
  font-weight: 600;
  margin: 0 0 16px;
  max-width: 18ch;
}
.hero .sub {
  font-size: 1.125rem;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 12px;
}
.hero .reassurance {
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 28px;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 768px) {
  .hero { padding: 88px 0 56px; }
}

/* ---------- Trust strip ---------- */

.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 28px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 24px;
}
.trust-grid p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.trust-grid strong {
  display: block;
  font-size: 1.4rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.powered-by {
  margin: 16px 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

@media (min-width: 768px) {
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
}

.trust-grid.trust-grid-single { grid-template-columns: minmax(0, 1fr); }
.trust-grid-single p { max-width: 48ch; }

/* ---------- Sections ---------- */

section { padding: 56px 0; }

section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.25rem);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 8px;
}
.section-lede {
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0 0 32px;
}

/* Steps */
.steps {
  display: grid;
  gap: 16px;
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  font-weight: 700;
  margin-bottom: 12px;
}
.steps h3 {
  font-size: 1.125rem;
  margin: 0 0 6px;
  font-weight: 650;
}
.steps p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}

/* Conditions */
.condition-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.condition-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  color: var(--ink-2);
}
.condition-list li strong { color: var(--ink); }

@media (min-width: 768px) {
  .condition-list { grid-template-columns: 1fr 1fr; }
}

.note {
  background: var(--brand-tint);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 72ch;
}

/* ---------- Knowledge-base verdict line + inline lead capture ---------- */

/* One-line answer to the page's headline question, under the h1. */
.kb-verdict {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 4px 0 18px;
}

.kb-leadcapture {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin: 32px 0 40px;
  max-width: 620px;
}

.kb-leadcapture h2 {
  margin-top: 0;
  font-size: 1.35rem;
}

.lead-hint {
  margin: 0 0 14px;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Fields on the left, submit button beside them from 640px up. */
.lead-row { display: block; margin-bottom: 20px; }
.lead-fields > .field:last-child { margin-bottom: 20px; }

@media (min-width: 640px) {
  .lead-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
  }
  .lead-fields { flex: 1 1 auto; min-width: 0; }
  .lead-fields > .field:last-child { margin-bottom: 0; }
  .waitlist-form .lead-row button[type="submit"] { flex: none; width: auto; margin-top: 0; }
}

/* Alternative to the form: talk to a person on WhatsApp. */
.lead-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.lead-alt p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}
.btn-whatsapp { gap: 10px; }
.btn-whatsapp svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

/* ---------- Waitlist form ---------- */

.waitlist-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 620px;
}

@media (min-width: 768px) {
  .waitlist-card { padding: 40px; }
}

.waitlist-form { margin-top: 8px; }

.waitlist-form .field,
.complaint-form .field { margin-bottom: 20px; }

.waitlist-form label,
.complaint-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.waitlist-form input[type="email"],
.waitlist-form input[type="tel"],
.waitlist-form input[type="text"],
.complaint-form input[type="email"],
.complaint-form input[type="tel"],
.complaint-form input[type="text"],
.complaint-form textarea,
.complaint-form select {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.waitlist-form input:focus-visible,
.complaint-form input:focus-visible,
.complaint-form textarea:focus-visible,
.complaint-form select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}

/* Consent row: checkbox beside its label */
.field-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}
.field-consent input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--brand);
  flex: none;
}
.field-consent label {
  font-weight: 400;
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.field-consent .req-mark { color: var(--muted); }

.waitlist-form button[type="submit"],
.complaint-form button[type="submit"] { width: 100%; margin-top: 4px; }
@media (min-width: 480px) {
  .waitlist-form button[type="submit"],
  .complaint-form button[type="submit"] { width: auto; min-width: 200px; }
}
.waitlist-form button[disabled],
.complaint-form button[disabled] { opacity: 0.6; cursor: progress; }

.waitlist-status {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
}
.waitlist-status.is-success {
  background: var(--brand-tint);
  color: var(--brand-dark);
}
.waitlist-status.is-error {
  background: #F7E4E4;
  color: var(--error);
}
@media (prefers-color-scheme: dark) {
  .waitlist-status.is-error { background: #3A1F1F; color: #E79A9A; }
}

.waitlist-fineprint {
  margin: 16px 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---------- Complaints form (/complaints.html) ---------- */

/* Wider than the waitlist card: this form is filled in, not glanced at, and a
   620px box makes a textarea somebody is writing paragraphs into feel like a
   slot to squeeze them through. */
.complaint-card { max-width: 720px; }

.complaint-form textarea {
  min-height: auto;
  resize: vertical;
  line-height: 1.55;
}

.complaint-form select { min-height: 48px; }

/* Radio group: one row per option, label beside the control. */
.field-kind {
  border: 0;
  padding: 0;
  margin: 0 0 24px;
}
.field-kind legend {
  font-weight: 600;
  padding: 0;
  margin-bottom: 10px;
}
.radio-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}
.radio-row input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--brand);
}
.radio-row label {
  font-weight: 400;
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.field-hint {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

.opt-mark {
  color: var(--muted);
  font-weight: 400;
}

/* What replaces the form once it has sent. The reference is the one thing on
   the page somebody will write down or read out, so it is set large, in a
   monospace face, and spaced enough to transcribe without losing their place. */
.complaint-receipt {
  background: var(--brand-tint);
  border-radius: var(--radius-md);
  padding: 28px;
}
.complaint-receipt:focus { outline: none; }
.complaint-receipt:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.complaint-receipt h3 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 650;
}
.complaint-receipt p { margin: 0 0 12px; }
.complaint-receipt p:last-child { margin-bottom: 0; }
.complaint-reference {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brand-dark);
  word-break: break-all;
}
.complaint-receipt-note {
  font-size: 0.875rem;
  color: var(--muted);
}
@media (prefers-color-scheme: dark) {
  .complaint-reference { color: var(--brand); }
}

/* ---------- Complaints prompt in every footer ---------- */

/* Regulation 16 wants the complaints route accessible, and a line in a list of
   legal links is not that. This sits above the small print on every page. */
.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding: 20px 24px;
  background: var(--brand-tint);
  border-radius: var(--radius-md);
}
.footer-cta p {
  margin: 0;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.footer-cta .btn { flex: none; }
@media (prefers-color-scheme: dark) {
  .footer-cta p { color: var(--ink); }
}
@media (max-width: 560px) {
  .footer-cta { padding: 20px; }
  .footer-cta .btn { width: 100%; }
}

/* Honeypot: keep in the DOM for bots, keep it away from people. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Why Flora House */
.why-grid {
  display: grid;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.why-grid li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
}
.why-grid h3 { font-size: 1.125rem; margin: 0 0 6px; font-weight: 650; }
.why-grid p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }

@media (min-width: 768px) {
  .why-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Privacy promise */
.privacy-promise {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.privacy-promise .inner {
  max-width: 720px;
}
.privacy-promise p { color: var(--ink-2); }
.privacy-promise .promise {
  font-size: 1.25rem;
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.4;
}

/* FAQ */
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.faq summary {
  cursor: pointer;
  padding: 18px 20px;
  font-weight: 600;
  font-size: 1.0625rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--brand);
  flex-shrink: 0;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div {
  padding: 0 20px 18px;
  color: var(--ink-2);
}
.faq details > div p { margin: 0 0 12px; }
.faq details > div p:last-child { margin-bottom: 0; }

/* About block */
.about-block p { max-width: 68ch; color: var(--ink-2); }

/* Important information */
.important-info {
  border: 1px solid var(--line);
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 24px;
  margin: 0 0 56px;
}
.important-info h2 {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 650;
  margin: 0 0 10px;
}
.important-info p, .important-info li {
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.important-info ul { margin: 0; padding-left: 20px; }
.important-info li { margin-bottom: 8px; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 40px 0 32px;
  font-size: 0.875rem;
  color: var(--muted);
}
.site-footer .footer-grid {
  display: grid;
  gap: 24px;
  margin-bottom: 24px;
}
.site-footer h2 {
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--ink);
  margin: 0 0 10px;
  font-family: var(--font-body);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--ink-2); }
.site-footer .legal {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.site-footer .legal p { margin: 0 0 8px; }
.site-footer .legal address {
  font-style: normal;
  margin: 0 0 8px;
}

@media (min-width: 768px) {
  .site-footer .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* ---------- Sticky mobile CTA ---------- */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.sticky-cta .btn { width: 100%; }

/* Reserve space so the bar never covers content */
body.has-sticky-cta {
  padding-bottom: var(--sticky-cta-height);
}

@media (min-width: 768px) {
  .sticky-cta { display: none; }
  body.has-sticky-cta { padding-bottom: 0; }
}

/* ---------- Legal pages (privacy / terms) ---------- */

.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 16px 80px;
}
.legal-page h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.12;
  margin: 0 0 8px;
}
.legal-page .meta { color: var(--muted); font-size: 0.875rem; margin: 0 0 32px; }
.legal-page h2 {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 650;
  margin: 40px 0 12px;
}
.legal-page h3 {
  font-size: 1.0625rem;
  font-weight: 650;
  margin: 24px 0 8px;
}
.legal-page p, .legal-page li { color: var(--ink-2); }
.legal-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.legal-page th, .legal-page td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-page th { color: var(--ink); }

.summary-box {
  background: var(--brand-tint);
  border-radius: var(--radius-md);
  padding: 24px;
  margin: 0 0 32px;
}
.summary-box h2 {
  margin: 0 0 12px;
  font-size: 1.125rem;
}
.summary-box ul { margin: 0; padding-left: 20px; }
.summary-box li { margin-bottom: 8px; color: var(--ink-2); }

/* ---------- Knowledge base ---------- */

.kb-page { max-width: 780px; padding-top: 24px; }
.kb-page article { margin: 0; }
.kb-page h1 + .kb-standfirst,
.kb-page h1 + .kb-verdict { margin-top: 16px; }
.kb-page article > .meta:last-child { margin: 32px 0 0; }

.breadcrumb { margin: 0 0 20px; }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--line);
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink-2); }

.kb-standfirst {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 28px;
}

.kb-key-facts h2 { font-family: var(--font-body); }
.kb-key-facts li strong { color: var(--ink); }

.kb-page h2 { scroll-margin-top: 88px; }
.kb-page h3 { scroll-margin-top: 88px; }

.kb-answer {
  border-left: 3px solid var(--brand);
  padding-left: 16px;
  margin: 0 0 18px;
  font-size: 1.0625rem;
  color: var(--ink);
}

.kb-callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin: 28px 0;
}
.kb-callout h3 { margin-top: 0; }
.kb-callout ul, .kb-callout ol { margin: 0; padding-left: 20px; }
.kb-callout li { margin-bottom: 6px; }
.kb-callout > *:last-child { margin-bottom: 0; }

.kb-table-wrap {
  overflow-x: auto;
  margin: 20px 0 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.kb-table-wrap table { margin: 0; min-width: 34rem; }
.kb-table-wrap caption {
  text-align: left;
  padding: 14px 12px 6px;
  font-size: 0.875rem;
  color: var(--muted);
}
.kb-table-wrap th[scope="row"] { font-weight: 600; white-space: nowrap; }
.kb-table-wrap tbody tr:last-child th,
.kb-table-wrap tbody tr:last-child td { border-bottom: none; }

.kb-steps { padding-left: 20px; }
.kb-steps li { margin-bottom: 12px; }

.kb-cards ul {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.kb-cards a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
}
.kb-cards a:hover { border-color: var(--brand); }
.kb-card-title, .kb-rel-title {
  display: block;
  font-weight: 650;
  color: var(--brand);
  margin-bottom: 4px;
}
.kb-card-desc, .kb-rel-desc {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.kb-related h2 {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 650;
  margin: 40px 0 12px;
}
.kb-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.kb-related a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
}
.kb-related a:hover { border-color: var(--brand); }

/* ---------- News ---------- */

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.news-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
.news-meta {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.news-item h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 12px;
}
.news-item h3 a { color: inherit; text-decoration: none; }
.news-item h3 a:hover { color: var(--brand); text-decoration: underline; }
.news-item p { margin: 0 0 12px; }
.news-more { margin: 0; font-size: 0.9375rem; }

.kb-sources ol { padding-left: 20px; }
.kb-sources li { margin-bottom: 8px; font-size: 0.9375rem; }
.kb-sources p { font-size: 0.9375rem; }

.kb-page .important-info { margin: 44px 0 0; }

.kb-figure {
  margin: 32px 0;
}
.kb-figure-portrait {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.kb-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.kb-figure figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.kb-figure figcaption .fig-credit {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
}

/* ---------- Retreats page ---------- */

.retreat-eyebrow {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}
.retreat-page .section-lede { margin-bottom: 24px; }
.retreat-figures { display: grid; gap: 20px; margin: 32px 0 8px; }
.retreat-figures .kb-figure { margin: 0; }
.retreat-figures img { aspect-ratio: 3 / 2; object-fit: cover; }
.retreat-steps { margin-top: 24px; }
.retreat-page .waitlist-card { margin-top: 16px; }

/* The page column is 760px wide, so the homepage's four-across steps grid
   would leave each card a few words wide. Two across is the most it fits. */
@media (min-width: 640px) {
  .retreat-figures { grid-template-columns: repeat(2, 1fr); }
  .retreat-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .kb-cards ul { grid-template-columns: repeat(2, 1fr); }
  .kb-related ul { grid-template-columns: repeat(3, 1fr); }
}

.kb-faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}
.kb-faq summary {
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.kb-faq summary::-webkit-details-marker { display: none; }
.kb-faq summary::after {
  content: "+";
  font-size: 1.25rem;
  color: var(--brand);
  line-height: 1;
}
.kb-faq details[open] summary::after { content: "\2013"; }
.kb-faq details > div { padding: 0 18px 16px; }
.kb-faq details > div p { margin: 0; color: var(--ink-2); }

/* ---------- Voucher popup ---------- */

/* Sits above the sticky CTA (60) and the site header (100). */
.voucher-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.voucher-popup[hidden] { display: none; }

/* Lock the page behind the dialog while it is open */
body.has-voucher-popup { overflow: hidden; }

.voucher-popup-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(27, 27, 31, 0.55);
}

/* The page behind is already dark, so it needs a heavier veil to recede. */
@media (prefers-color-scheme: dark) {
  .voucher-popup-backdrop { background: rgba(0, 0, 0, 0.7); }
}

.voucher-popup-dialog {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  animation: voucher-popup-in 200ms ease-out;
}
/* The dialog takes focus on open only to seat the reader at the top of it, so
   it gets no focus ring of its own \u2014 the controls inside still do. */
.voucher-popup-dialog:focus { outline: none; }

@keyframes voucher-popup-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.voucher-popup-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.voucher-popup-close:hover { color: var(--ink); }
.voucher-popup-close:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.voucher-popup-title {
  margin: 0 40px 8px 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--brand);
}

.voucher-popup-lede {
  margin: 0 0 4px;
  color: var(--ink-2);
}

/* Offer terms: present before someone signs up, not buried afterwards. */
.voucher-popup-terms {
  margin: 0 0 20px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.voucher-popup-form .field { margin-bottom: 16px; }
.voucher-popup-form button[type="submit"] { width: 100%; }

@media (min-width: 480px) {
  .voucher-popup-dialog { padding: 32px; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}