/* 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; }

/* "Medical professionals" — a second audience, not a second call to action.
   Deliberately quieter and smaller than the patient CTA next to it, so the
   header still has one obvious primary action. */
.site-header .header-pro {
  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-pro: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 { 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-pro { 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 { margin-bottom: 20px; }

.waitlist-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"] {
  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 {
  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"] { width: 100%; margin-top: 4px; }
@media (min-width: 480px) {
  .waitlist-form button[type="submit"] { width: auto; min-width: 200px; }
}
.waitlist-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);
}

/* 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; }

@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; }
}