/*
 * ============================================================
 *  MY BLOOM AURA — HOMEPAGE-ONLY DESIGN & MOTION LAYER
 *  Loaded exclusively by index.html. Never link this file from
 *  any other page — it exists so the homepage can carry its own
 *  spacing/motion system without touching styles.css / pages.css
 *  (which are shared by every other page on the site).
 *
 *  Palette (only these): #FFFAF5 canvas · #185E3F brand green ·
 *  #FADADD accent rose (restrained). Fonts: Playfair Display
 *  (headings) · DM Sans (body). Neutral greys (#1C1C1C/#5A5A5A)
 *  are inherited from pages.css for body text only.
 * ============================================================
 */

:root {
  --home-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --home-shadow-soft: 0 12px 32px rgba(24, 94, 63, 0.08);
  --home-radius-card: 16px;

  /* Section padding scale: mobile → tablet → desktop */
  --home-section-pad: 52px;
}
@media (min-width: 768px) {
  :root { --home-section-pad: 72px; }
}
@media (min-width: 1024px) {
  :root { --home-section-pad: 112px; }
}

/* ── 1. SPACING — sections ─────────────────────────────────── */
body .content-section,
body .cta-section,
body .page-hero {
  padding-top: var(--home-section-pad);
  padding-bottom: var(--home-section-pad);
}
/* Hero keeps a touch more room under the badge/eyebrow on desktop only */
@media (min-width: 1024px) {
  body .page-hero { padding-top: calc(var(--home-section-pad) - 16px); }
}

/* Trust bar + GEO entity snapshot stay compact utility strips by design —
   intentionally excluded from the section padding scale. */

/* ── 1c. Footer links — pad tap area toward 44px without changing
   the visual list styling (pages.css only sets an 8px row gap). ── */
body .site-footer__link {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
  line-height: 1.4;
}
body .site-footer__link--social {
  display: inline-flex;
  align-items: center;
}

/* ── 1b. Final CTA — restrained pink accent, no gradient ───────
   Background stays the flat brand green already set in pages.css;
   this only adds a thin rose hairline above the heading and a very
   soft rose tint on the secondary button's hover/focus state. */
body .cta-section {
  position: relative;
}
body .cta-section::before {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin: 0 auto 24px;
  background: #FADADD;
  border-radius: 2px;
}
body .cta-section .btn--outline-light:hover,
body .cta-section .btn--outline-light:focus-visible {
  border-color: #FADADD;
  background: rgba(250, 218, 221, 0.12);
}

/* ── 2. SPACING — grid gaps (28–36 / 20–24 / 16–20) ────────── */
body .module-grid,
body .two-col-cards,
body .proof-grid,
body .trust-list,
body .problem-grid,
body .stats-grid {
  gap: 16px;
}
@media (min-width: 768px) {
  body .module-grid,
  body .two-col-cards,
  body .proof-grid,
  body .trust-list,
  body .problem-grid,
  body .stats-grid {
    gap: 22px;
  }
}
@media (min-width: 1024px) {
  body .module-grid,
  body .two-col-cards,
  body .proof-grid,
  body .trust-list,
  body .problem-grid,
  body .stats-grid {
    gap: 32px;
  }
}

/* ── 3. SPACING — card padding (32 desktop / 24 mobile) ────── */
body .info-card,
body .module-card,
body .proof-card,
body .stat-card,
body .highlight-box,
body .callout-card {
  padding: 24px;
}
@media (min-width: 768px) {
  body .info-card,
  body .module-card,
  body .proof-card,
  body .stat-card,
  body .highlight-box,
  body .callout-card {
    padding: 32px;
  }
}
body .stat-card--metric { padding: 24px 18px; }
@media (min-width: 768px) {
  body .stat-card--metric { padding: 32px 22px; }
}

/* ── 4. Typography measure + line-height (1.65–1.75) ───────── */
body .prose p { line-height: 1.75; max-width: 760px; }
body .module-card__desc { line-height: 1.6; }
body .flow-diagram__step-text { line-height: 1.6; }

/* ── 5. Rounded corners — 16px on every card surface ───────── */
body .module-card,
body .flow-diagram__step,
body .feature-list__item,
body .faq-item {
  border-radius: var(--home-radius-card);
}
body .highlight-box,
body .stat-card,
body .proof-card,
body .bullet-card-list__item {
  border-radius: 0 var(--home-radius-card) var(--home-radius-card) 0;
}
body .stat-card--metric {
  border-radius: 0 0 var(--home-radius-card) var(--home-radius-card);
}

/* ── 6. Soft shadow system on elevated cards ───────────────── */
body .info-card,
body .module-card,
body .proof-card,
body .stat-card,
body .highlight-box,
body .channel-panel {
  box-shadow: var(--home-shadow-soft);
}

/* ── 6b. "What My Bloom Aura Is" — wide intro + 3-callout panel ──
   Intro is a standalone wide prose block. Callouts 1+2 sit side by
   side on desktop sharing a single hairline divider (reads as one
   split panel, not two boxed cards); callout 3 (boundary) spans full
   width below. On mobile the divider rotates into a horizontal rule.
   Interaction states use border/shadow/background only — no
   transform, per brief. ─────────────────────────────────────────── */
body .prose--wide {
  max-width: 820px;
}
body .what-is-callouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 36px;
}
body .callout-card {
  border-radius: 0;
  background: rgba(255, 255, 255, 0.55);
  transition: background-color 220ms var(--home-ease),
              border-color 220ms var(--home-ease),
              box-shadow 220ms var(--home-ease);
}
body .callout-card__heading {
  font-family: 'Playfair Display', serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: #185E3F;
  margin: 0 0 12px;
}
body .callout-card__text {
  margin: 0;
  line-height: 1.7;
  max-width: 46ch;
}
body .callout-card--a {
  border-radius: var(--home-radius-card) 0 0 var(--home-radius-card);
}
body .callout-card--b {
  border-left: 1px solid rgba(24, 94, 63, 0.14);
  border-radius: 0 var(--home-radius-card) var(--home-radius-card) 0;
}
body .callout-card--tint {
  background: rgba(250, 218, 221, 0.34);
}
body .callout-card--boundary {
  grid-column: 1 / -1;
  margin-top: 28px;
  padding-top: 32px;
  border-top: 1px solid rgba(24, 94, 63, 0.14);
  background: transparent;
}
body .callout-card--boundary .callout-card__text {
  max-width: 760px;
}
body .callout-card:hover,
body .callout-card:focus-within {
  box-shadow: 0 8px 24px rgba(24, 94, 63, 0.06);
}
body .callout-card--tint:hover,
body .callout-card--tint:focus-within {
  background: rgba(250, 218, 221, 0.5);
}
body .callout-card--boundary:hover,
body .callout-card--boundary:focus-within {
  border-top-color: rgba(24, 94, 63, 0.28);
  box-shadow: none;
}
@media (max-width: 767px) {
  body .what-is-callouts {
    grid-template-columns: 1fr;
  }
  body .callout-card--a {
    border-radius: var(--home-radius-card) var(--home-radius-card) 0 0;
  }
  body .callout-card--b {
    border-left: none;
    border-top: 1px solid rgba(24, 94, 63, 0.14);
    border-radius: 0 0 var(--home-radius-card) var(--home-radius-card);
  }
  body .callout-card--boundary {
    margin-top: 20px;
    padding-top: 24px;
  }
}

/* ── 6c. Core Platform & Advisory — dominant/secondary card pair ──
   Desktop: Core Platform wider, Advisory narrower, side by side.
   Mobile: stacked, Core Platform first (already first in DOM). ──── */
@media (min-width: 1024px) {
  body .platform-advisory-grid {
    grid-template-columns: 1.65fr 1fr;
    align-items: start;
  }
}
body .info-card--advisory {
  border-top: 3px solid rgba(250, 218, 221, 0.9);
}
body .info-card--dominant .feature-list {
  max-width: none;
}

/* ── 7. Layout fixes for elements previously inline-styled ──── */
body .problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 28px 0;
}
@media (max-width: 767px) {
  body .problem-grid { grid-template-columns: 1fr; }
}
body .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 8px;
}
/* Operational Outcomes: explicit 4-col desktop / 2x2 mobile (not auto-fit). */
body .stats-grid--outcomes {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 767px) {
  body .stats-grid--outcomes {
    grid-template-columns: repeat(2, 1fr);
  }
}
body .stat-card__number--sm {
  font-size: 2rem;
  margin-bottom: 6px;
}
body .stat-card__number {
  font-variant-numeric: tabular-nums;
}
/* Small citation-style caption under provisional/unsourced stat blocks. */
body .stat-source-note {
  margin: -14px 0 28px;
  font-size: 0.78rem;
  color: #5A5A5A; /* was #8A8A8A — that failed WCAG AA (3.33:1) on #FFFAF5;
                      #5A5A5A matches the site's existing secondary-text
                      grey and passes at ~6.7:1. */
  font-style: italic;
}

/* ── 7f. "How the System Works" — gently staggered step row ───
   Desktop only: a subtle alternating vertical offset gives the
   horizontal row a light editorial rhythm instead of a flat grid.
   The connecting arrow (already a static, non-animated ::after
   glyph) is left untouched. ─────────────────────────────────── */
@media (min-width: 1024px) {
  body .flow-diagram__track {
    align-items: flex-start;
  }
  /* Steps sit at nth-child 1,3,5,7,9 (connectors occupy the even
     slots between them); offsetting the 2nd and 4th step (nth-child
     3 and 7) gives the row a gentle up/down rhythm. */
  body .flow-diagram__step:nth-child(4n+3) {
    margin-top: 18px;
  }
}

/* ============================================================
 *  MOTION SYSTEM
 * ============================================================ */

/* ── 7b. Header — shrink on scroll, animated underline ─────── */
/* Desktop only: starts at 72px, shrinks to 64px + gains shadow after
   ~40px scroll (JS adds .is-scrolled to #main-nav). Mobile keeps a
   fixed compact height — no shrink behaviour there. */
@media (min-width: 768px) {
  body .site-nav__inner {
    height: 72px;
    transition: height 250ms var(--home-ease);
  }
  body .site-nav {
    transition: box-shadow 250ms var(--home-ease);
  }
  body .site-nav.is-scrolled .site-nav__inner {
    height: 64px;
  }
  body .site-nav.is-scrolled {
    box-shadow: 0 8px 24px rgba(24, 94, 63, 0.12);
  }
}

body .site-nav__link {
  position: relative;
}
body .site-nav__link:hover {
  background: transparent;
}
body .site-nav__link::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  background: #185E3F;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--home-ease);
}
body .site-nav__link:hover::after,
body .site-nav__link:focus-visible::after,
body .site-nav__link.active::after {
  transform: scaleX(1);
}

/* ── 7c. Right panel — Synced (knowledge source) row + status dots ── */
body .channel-item__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body .channel-item__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #185E3F;
  display: inline-block;
  animation: bloom-pulse 2s infinite;
}
body .channel-item--knowledge {
  background: rgba(24, 94, 63, 0.02);
}
body .channel-item__status--synced {
  color: #5A5A5A;
  background: rgba(24, 94, 63, 0.05);
}
body .channel-item__status--synced::before {
  background: #5A7A6A;
}

/* ── 7d. Hero reveal — panel completes the eyebrow→…→panel sequence ── */
.js-reveal-ready .page-hero__visual[data-reveal].is-visible {
  transition-delay: 350ms;
}

/* ── 7d-bis. Fix: pages.css hides .page-hero__visual entirely below
   900px (display:none). That drops real, indexable panel content
   (Phone & Voice / Website / Clinic-Approved Documents) and breaks
   "stacks on mobile" — it was disappearing, not stacking. The grid
   already collapses to one column at this breakpoint, so undoing
   the hide is enough to make it stack below the hero text. ────── */
@media (max-width: 900px) {
  body .page-hero__visual {
    display: block;
    margin-top: 32px;
  }
}

/* ── 7e. Trust bar — refined pills + mobile 2-column wrap ──────── */
body .trust-bar__item {
  padding: 6px 14px;
  background: rgba(24, 94, 63, 0.04);
  border: 1px solid rgba(24, 94, 63, 0.12);
  border-radius: 999px;
}
@media (max-width: 767px) {
  body .trust-bar__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-items: center;
  }
}

/* ── 8. Hover / focus — 200–250ms, signature easing ────────── */
body .btn {
  transition: background-color 220ms var(--home-ease),
              border-color 220ms var(--home-ease),
              transform 220ms var(--home-ease),
              box-shadow 220ms var(--home-ease);
}
body .btn:hover,
body .btn:focus-visible {
  transform: translateY(-2px);
}
body .btn:active { transform: translateY(0); }

body .site-nav__link {
  transition: color 200ms var(--home-ease), background-color 200ms var(--home-ease);
}

body .module-card,
body .proof-card,
body .info-card,
body .stat-card {
  transition: transform 220ms var(--home-ease),
              box-shadow 220ms var(--home-ease),
              border-color 220ms var(--home-ease);
}
body .module-card:hover,
body .module-card:focus-within,
body .proof-card:hover,
body .proof-card:focus-within,
body .info-card:hover,
body .info-card:focus-within,
body .stat-card:hover,
body .stat-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(24, 94, 63, 0.12);
  border-color: rgba(24, 94, 63, 0.20);
}

body .channel-item {
  transition: background-color 200ms var(--home-ease);
}
body .channel-item:hover,
body .channel-item:focus-within {
  background-color: rgba(24, 94, 63, 0.03);
}

body .faq-item__icon {
  transition: transform 220ms var(--home-ease), background-color 220ms var(--home-ease);
}
body .faq-item__trigger[aria-expanded="true"] .faq-item__icon {
  transform: rotate(45deg);
}

/* ── 9. Accordion — 250–350ms (FAQ preview) ────────────────── */
body .faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 320ms var(--home-ease), opacity 260ms var(--home-ease);
  padding: 0; /* padding now lives on the inner wrapper so it can be clipped cleanly */
}
body .faq-item__answer > .faq-item__answer-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 24px 22px;
}
body .faq-item__answer.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* ── 9b. Module explorer — mobile accordion / desktop nav+panel ──
   All 7 modules always exist in the HTML source (no fetch-on-click,
   no conditional mounting). Mobile: plain accordion, one open at a
   time, full-row tappable, 44px min touch target. Desktop: each row
   splits internally into a slim name column (left) and a detail
   column (right) — since only one panel is ever expanded, the row
   with the open module reads as one large active detail panel while
   the rest stay compact, without any element ever using
   display:none. ─────────────────────────────────────────────────── */
body .module-explorer {
  margin-top: 8px;
  border-top: 1px solid rgba(24, 94, 63, 0.12);
}
body .module-explorer__item {
  border-bottom: 1px solid rgba(24, 94, 63, 0.12);
}
body .module-explorer__heading {
  margin: 0;
}
body .module-explorer__trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 200ms var(--home-ease);
}
body .module-explorer__trigger:hover,
body .module-explorer__trigger:focus-visible {
  background-color: rgba(24, 94, 63, 0.03);
}
body .module-explorer__trigger:focus-visible {
  outline: 2px solid #185E3F;
  outline-offset: -2px;
}
body .module-explorer__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: #185E3F;
}
body .module-explorer__icon svg {
  width: 100%;
  height: 100%;
}
body .module-explorer__name {
  flex: 1;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #185E3F;
}
body .module-explorer__chevron {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  /* Solid (not low-alpha) so the non-text contrast ratio against the
     card background clears WCAG 1.4.11's 3:1 minimum — 0.55 alpha
     green on cream measured ~2.65:1. */
  border-right: 2px solid #185E3F;
  border-bottom: 2px solid #185E3F;
  transform: rotate(45deg);
  transition: transform 220ms var(--home-ease);
  margin-right: 6px;
}
body .module-explorer__trigger[aria-expanded="true"] .module-explorer__chevron {
  transform: rotate(-135deg);
}
body .module-explorer__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 320ms var(--home-ease), opacity 260ms var(--home-ease);
}
body .module-explorer__panel-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 4px 20px 50px;
}
body .module-explorer__panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
body .module-explorer__panel-text {
  font-size: 0.9375rem;
  color: #1C1C1C;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0;
}

@media (min-width: 1024px) {
  body .module-explorer__item {
    display: grid;
    grid-template-columns: 300px 1fr;
    column-gap: 32px;
    align-items: start;
  }
  body .module-explorer__heading {
    grid-column: 1;
  }
  body .module-explorer__panel {
    grid-column: 2;
  }
  body .module-explorer__panel-inner {
    padding: 16px 0 20px;
  }
  body .module-explorer__trigger {
    padding: 20px 4px;
  }
}

/* ── 10. Section reveals — 500–650ms, fade + rise ──────────── */
.js-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--home-ease), transform 600ms var(--home-ease);
}
.js-reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.js-reveal-ready [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--home-ease), transform 600ms var(--home-ease);
}
.js-reveal-ready [data-reveal-group].is-visible > * {
  opacity: 1;
  transform: none;
}
/* Stagger — 60–80ms between siblings, first 10 children */
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(1)  { transition-delay: 0ms;   }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(2)  { transition-delay: 70ms;  }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(3)  { transition-delay: 140ms; }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(4)  { transition-delay: 210ms; }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(5)  { transition-delay: 280ms; }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(6)  { transition-delay: 350ms; }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(7)  { transition-delay: 420ms; }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(8)  { transition-delay: 490ms; }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(9)  { transition-delay: 560ms; }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(10) { transition-delay: 630ms; }

/* Flow-diagram override: connectors sit interleaved between steps as
   separate direct children, which would double the generic per-child
   stagger (140ms between steps instead of ~70-90ms). Re-time each
   step/connector explicitly so consecutive STEPS land ~80ms apart;
   connectors just fade in at the midpoint and never draw attention. */
.js-reveal-ready .flow-diagram__track.is-visible > .flow-diagram__step:nth-child(1)      { transition-delay: 0ms;   }
.js-reveal-ready .flow-diagram__track.is-visible > .flow-diagram__connector:nth-child(2) { transition-delay: 40ms;  }
.js-reveal-ready .flow-diagram__track.is-visible > .flow-diagram__step:nth-child(3)      { transition-delay: 80ms;  }
.js-reveal-ready .flow-diagram__track.is-visible > .flow-diagram__connector:nth-child(4) { transition-delay: 120ms; }
.js-reveal-ready .flow-diagram__track.is-visible > .flow-diagram__step:nth-child(5)      { transition-delay: 160ms; }
.js-reveal-ready .flow-diagram__track.is-visible > .flow-diagram__connector:nth-child(6) { transition-delay: 200ms; }
.js-reveal-ready .flow-diagram__track.is-visible > .flow-diagram__step:nth-child(7)      { transition-delay: 240ms; }
.js-reveal-ready .flow-diagram__track.is-visible > .flow-diagram__connector:nth-child(8) { transition-delay: 280ms; }
.js-reveal-ready .flow-diagram__track.is-visible > .flow-diagram__step:nth-child(9)      { transition-delay: 320ms; }

@media (max-width: 767px) {
  .js-reveal-ready [data-reveal],
  .js-reveal-ready [data-reveal-group] > * {
    transform: translateY(8px);
  }
}

/* ── 11. Reduced motion — disable everything, show final state ── */
@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready [data-reveal],
  .js-reveal-ready [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body .faq-item__answer,
  body .module-explorer__panel,
  body .module-explorer__trigger,
  body .module-explorer__chevron {
    transition: none !important;
  }
  body .btn,
  body .site-nav__link,
  body .site-nav__link::after,
  body .site-nav,
  body .site-nav__inner,
  body .module-card,
  body .proof-card,
  body .info-card,
  body .stat-card,
  body .channel-item,
  body .faq-item__icon,
  body .callout-card,
  body .callout-card--tint,
  body .callout-card--boundary {
    transition: none !important;
  }
  body .btn:hover,
  body .btn:focus-visible,
  body .module-card:hover,
  body .proof-card:hover,
  body .info-card:hover,
  body .stat-card:hover {
    transform: none !important;
  }
  body .channel-panel__live::before,
  body .channel-item__status::before {
    animation: none !important;
    opacity: 1 !important;
  }
}