/* ============================================================
   HOME — page-specific chrome only. Ported verbatim from `home.jsx`'s own
   inline <style> block plus the two rules `vibe-footer.jsx`'s
   `VibeArticles` injects inline (both couple-website-markup repo). Every
   value is a token from colors_and_type.css; no new colors/type/radii.
   ============================================================ */

/* Home content band — one flex column so the gap BETWEEN the three white
   sections (FindYourPerson / Features / Pricing) is a single marketing
   section gap (the --rhythm-128 ladder) instead of two stacked
   --rhythm-80 section paddings. */
.home-shell { display: flex; flex-direction: column; gap: var(--rhythm-128); }
@media (max-width: 900px) { .home-shell { gap: 96px; } }
@media (max-width: 768px) { .home-shell { gap: 80px; } }
@media (max-width: 640px) { .home-shell { gap: 64px; } }

/* "Preview of most recent Vibe articles" heading link. */
.vibe-head-link { text-decoration: none; }
.vibe-head-link .h2-section { transition: color 160ms ease; }
.vibe-head-link:hover .h2-section { color: var(--couple-purple); }

/* Polaroid fly-off carousel (public/assets/js/home.js, port of
   polaroid-stack.jsx). This base transition is a fallback only — the
   script sets `transition` inline per phase (fly vs. settle-and-fade-in),
   which always wins over this rule; it just keeps the resting frame from
   looking broken for the instant before the script attaches. */
.hero-polaroid-frame {
  transition: opacity 300ms ease;
}

/* SC-42 (2026-10-02, brief HOME-11nv3): "See how it works" is a 44px tap target
   on a phone in the design (145x44 against v3's 145x22 — the mobile touch
   floor, Guide :1408); the text sits where it did, the hero ends 22px lower. */
@media (max-width: 640px) {
  .hero-copy-bot .link-underline { min-height: 44px; display: inline-flex; align-items: center; }
}
/* SC-42 (brief HOME-1cue6): the feature cards' play buttons show the hand, as
   the design's (`sections.jsx:1332-1340`, `cursor: 'pointer'` inline). */
.feature-card-play,
.feature-card-play svg { cursor: pointer; }