/* Experiment (staging): carousel enters only after "One short guide per problem." finishes animating (ways-done class set on animationend). */
.welcome .car-box .car { opacity: 0; animation: none; }
.welcome .car-box:has(.ways-done) .car { animation: carin-exp .8s cubic-bezier(.2,.7,.3,1) both; }
@keyframes carin-exp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .welcome .car-box .car, .welcome .ways-new>*, .welcome .ways-old span { opacity: 1 !important; animation: none !important; } }

/* Staging (26.9): back-to-bundle more prominent; start-over smaller and tucked away. */
.backbundle { bottom: calc(16px + env(safe-area-inset-bottom)); padding: 12px 22px; font-size: 13.5px; background: linear-gradient(135deg, #b34d2e, var(--rust)); box-shadow: 0 4px 14px rgba(164,68,42,.3); overflow: hidden; }
.backbundle::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -30%; width: 24%; background: linear-gradient(105deg, transparent, rgba(255,244,230,.38), transparent); transform: translateX(-140%) skewX(-18deg); animation: bbShine 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes bbShine { 0%, 62% { transform: translateX(-140%) skewX(-18deg); } 88%, 100% { transform: translateX(460%) skewX(-18deg); } }
.startover { min-height: 0; padding: 6px 4px; border: none; color: var(--muted); font: 400 12.5px Arial, sans-serif; letter-spacing: .01em; text-decoration: underline; text-underline-offset: 3px; }
.startover:hover { background: none; color: var(--rust); }
.startover svg { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .backbundle::after { animation: none; content: none; } }

/* Staging (26.9): back-to-bundle stays visible at page bottom - footer gets clearance instead of hiding the pill. */
footer { padding-bottom: 96px; }
/* Staging (26.9): free-sample button switched to white so it stops blending with the rust back-to-bundle pill. */
.btn.fb-open { background: #fffdf8; color: var(--ink, #221d17); border: 1.5px solid #e3dccb; box-shadow: 0 6px 18px rgba(30,22,14,.18); }
.btn.fb-open:hover { background: #f6f0e2; }

/* Staging (26.9): breathing room above the Edit problem button. */
.edit-problem { margin-top: 26px !important; }

/* Staging (26.9): hero concept 2 - fan of our real covers below centered copy; chips tucked under the fan; calm cover animation. */
.hero-intro:has(.hero-fan)::before { content: none; }
.hero-intro:has(.hero-fan) { padding-top: 34px; padding-bottom: 26px; min-height: 0; }
.hero-intro:has(.hero-fan) .hero-copy { text-align: center; max-width: none; }
.hero-intro:has(.hero-fan) .brandrow { justify-content: center; margin-bottom: 32px; }
.hero-intro:has(.hero-fan) h1 { margin-inline: auto; line-height: 1.12; }
.hero-intro:has(.hero-fan) .hero-slogan { margin: 22px auto 0; line-height: 1.55; }
.hero-intro:has(.hero-fan) .fmt-strip { position: static; margin: 30px 0 0 !important; padding: 0; }
.hero-intro:has(.hero-fan) .hero-formats span { box-shadow: 0 1px 3px rgba(34,29,21,.12) !important; }
.hero-fan { position: relative; height: 262px; margin-top: 34px; }
.hero-fan img { position: absolute; width: 150px; border-radius: 8px; box-shadow: 0 14px 30px rgba(34,29,21,.28); left: 50%; display: block; transform: var(--base); will-change: transform; animation: fanIn 1.3s cubic-bezier(.2,.7,.3,1) var(--d1, 0s) both, fanSway var(--sw, 9s) ease-in-out var(--d2, 2.6s) infinite; }
.hero-fan .fc1 { --base: translateX(-188px) rotate(-19deg) translateY(46px); --stack: translateX(-75px) translateY(30px); width: 112px; z-index: 1; --s1: -.8deg; --d1: .44s; --d2: 2.9s; --sw: 9.4s; }
.hero-fan .fc2 { --base: translateX(-165px) rotate(-11deg) translateY(18px); --stack: translateX(-75px) translateY(20px); width: 128px; z-index: 2; --s1: .6deg; --d1: .22s; --d2: 2.75s; --sw: 8.2s; }
.hero-fan .fc3 { --base: translateX(-75px); --stack: translateX(-75px) translateY(12px); z-index: 4; --s1: .5deg; --d1: 0s; --d2: 2.6s; --sw: 7.4s; }
.hero-fan .fc4 { --base: translateX(38px) rotate(11deg) translateY(18px); --stack: translateX(-75px) translateY(20px); width: 128px; z-index: 2; --s1: -.6deg; --d1: .22s; --d2: 3.05s; --sw: 8.8s; }
.hero-fan .fc5 { --base: translateX(76px) rotate(19deg) translateY(46px); --stack: translateX(-75px) translateY(30px); width: 112px; z-index: 1; --s1: .8deg; --d1: .44s; --d2: 3.2s; --sw: 7.9s; }
@keyframes fanIn { from { transform: var(--stack); opacity: 0; } to { transform: var(--base); opacity: 1; } }
@keyframes fanSway { 0%, 100% { rotate: 0deg; translate: 0 0; } 50% { rotate: var(--s1, .7deg); translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .hero-fan img { animation: none; } }
@media (min-width: 701px) { .hero-fan { max-width: 620px; margin: 26px auto 0; } }