/* ==========================================================================
   Homepage-only presentation layer (R3 signature moments).
   Depends entirely on style-v2.css tokens/components. All animation is
   gated behind prefers-reduced-motion: no-preference (same contract as
   the system stylesheet); the global reduced-motion kill-switch still applies.
   ========================================================================== */

/* ---- Header: 4 primary links + "More" disclosure dropdown (FE-14) ---- */
.site-header-v2 .header-inner { padding-block: 8px; }
.site-header-v2 nav { align-items: center; gap: var(--space-4); }
.site-header-v2 nav a { white-space: nowrap; }

.nav-more { position: relative; }
.nav-more summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 2px;
  color: var(--ink-700);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::marker { content: ''; }
.nav-more summary:hover { color: var(--cta-coral-600); }
.nav-caret {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-more[open] .nav-caret,
.fine-print[open] .nav-caret { transform: rotate(225deg); }
.nav-more-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  min-width: 230px;
  display: grid;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-card-inner);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
}
.nav-more-panel a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-input);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-700);
  text-decoration: none;
  white-space: nowrap;
}
.nav-more-panel a:hover { background: var(--sky-100); }

/* Mobile: the disclosure renders inline inside the hamburger panel */
@media (max-width: 720px) {
  .nav-more { width: 100%; }
  .nav-more summary {
    width: 100%;
    padding: 13px 4px;
    font-size: 1rem;
    border-bottom: 1px solid var(--ink-100);
  }
  .nav-more[open] summary { border-bottom: 0; }
  .nav-more-panel {
    position: static;
    display: block;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }
  header.site-header-v2 nav .nav-more-panel a {
    padding: 13px 4px 13px 18px;
    border-radius: 0;
    font-size: 1rem;
    white-space: normal;
  }
}

/* ---- HERO: pastel wash + drifting line-SVG gear icons ---- */
.home-hero { padding-block: var(--space-9) calc(var(--space-9) + 40px); }
.home-hero .hero-copy { max-width: 640px; }
.gear-icon {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes gear-drift {
    0%, 100% { transform: translate(0, 0) rotate(-5deg); }
    50%      { transform: translate(12px, -20px) rotate(6deg); }
  }
  .gear-icon { animation: gear-drift 10s ease-in-out infinite; }
  .gear-stroller { animation-duration: 11s; }
  .gear-carseat  { animation-duration: 9s;  animation-delay: -3s; }
  .gear-monitor  { animation-duration: 13s; animation-delay: -6s; }
  .gear-bottle   { animation-duration: 10s; animation-delay: -8s; }
}

.gear-stroller { top: 9%;  right: 6%;   width: clamp(90px, 11vw, 150px); color: var(--lilac-300); }
.gear-carseat  { top: 46%; right: 16%;  width: clamp(76px, 9vw, 124px);  color: var(--mint-300); }
.gear-monitor  { bottom: 12%; right: 5%; width: clamp(80px, 9vw, 128px); color: var(--sky-300); }
.gear-bottle   { bottom: 20%; right: 27%; width: clamp(64px, 7vw, 100px); color: var(--blush-300); }

@media (max-width: 900px) {
  .home-hero { padding-block: var(--space-8) calc(var(--space-8) + 48px); }
  .gear-bottle { display: none; }
  .gear-carseat { right: 4%; top: 58%; }
}
@media (max-width: 640px) {
  .gear-icon { opacity: 0.45; }
  .gear-stroller { width: 84px; right: 4%; }
  .gear-monitor { width: 72px; }
}

/* ---- HERO fine-print disclosure (FE-14): collapsed verification notes ----
   Replaces the three-paragraph italic wall between intro and CTAs.
   Same text, reachable on demand; compact one-line summary when closed. */
.fine-print {
  margin: 0 0 var(--space-5);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-card-inner);
  background: rgba(255, 255, 255, 0.65);
}
.fine-print summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.fine-print summary::-webkit-details-marker { display: none; }
.fine-print summary::marker { content: ''; }
.fine-print .fp-meta {
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.fine-print .nav-caret { margin-left: auto; }
.fine-print[open] summary { border-bottom: 1px solid var(--ink-100); }
.fine-print .fp-body {
  padding: var(--space-3) 16px var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.fine-print .fp-body .sub { margin: 0; font-size: 0.8125rem; }

/* ---- EVIDENCE COUNTER STRIP ---- */
.evidence-strip {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * (var(--space-8) + 34px));
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  text-align: center;
}
.ev-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ev-item + .ev-item { border-left: 1px solid var(--ink-100); }
.ev-item .stat-value { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.ev-label {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
@media (max-width: 860px) {
  .evidence-strip { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-5); }
  .ev-item:nth-child(3) { border-left: 0; }
}

/* ---- Card extras ---- */
.c-card .c-card-body { gap: var(--space-3); }

/* FE-14: card title = plain styled text + inline SVG icon (no emoji/tofu) */
.c-card .c-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-900);
}
.card-icon { flex: 0 0 auto; width: 26px; height: 26px; }
.icon-lilac  { color: #45357a; }
.icon-blush  { color: var(--cta-coral-600); }
.icon-butter { color: #8a6d1f; }
.icon-mint   { color: var(--brand-green-600); }
.icon-ink    { color: var(--ink-700); }

/* FE-14: ONE evident affordance per card — coral text link, underlined.
   Card title/text are plain palette text; no default-blue link bodies. */
.c-card .card-cta {
  margin-top: auto;
  width: fit-content;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--cta-coral-600);
  text-decoration: underline;
  text-decoration-color: var(--blush-300);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) linear;
}
.c-card .card-cta:hover,
.c-card .card-cta:focus-visible { text-decoration-color: var(--cta-coral-600); }

.mini-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-facts .fact {
  background: var(--sky-100);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-700);
}

/* ---- Methodology / verification panels ---- */
.panel {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.panel ul, .panel ol { margin: 0; padding-left: 22px; }
.panel li { margin: 10px 0; color: var(--ink-700); }
.panel li::marker { color: var(--cta-coral-600); font-weight: 800; }
.panel-mint { background: var(--mint-100); border-color: var(--mint-300); }
.panel-mint li::marker { color: var(--brand-green-700); }

/* ---- Disclosure + footer ---- */
.disclosure {
  font-size: 0.8125rem;
  color: var(--ink-500);
  border-top: 1px solid var(--ink-100);
  padding-top: var(--space-5);
  margin-block: var(--space-7) var(--space-6);
}
footer.site {
  background: var(--ink-900);
  color: var(--ink-300);
  padding-block: var(--space-7);
  margin-top: var(--space-6);
}
footer.site nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: var(--space-5); }
footer.site a { color: var(--ink-300); text-decoration: none; font-size: 0.875rem; font-weight: 700; }
footer.site a:hover { color: #ffb08a; }
footer.site p { font-size: 0.8125rem; color: var(--ink-500); max-width: 80ch; margin: 0; }