(by v5.php). The bare selector below must target the

only — applying display:flex to turns navbar, main, and footer into a side-by-side row. Descendant selectors stay generic because the body's class also matches their ancestor chain. */ main.landing--v5 { position: relative; min-height: 560px; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-6) var(--space-4) var(--space-12); background: linear-gradient(180deg, var(--color-cream-100) 0%, var(--color-cream) 100%); overflow: hidden; } .landing--v5 .hero-container { position: relative; z-index: 1; width: 100%; max-width: 480px; } .landing--v5 .hero-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-6); } /* Countdown chip */ .landing--v5 .hero-chip { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-burgundy); color: var(--color-cream); padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-bold); line-height: 1.2; margin-top: var(--space-4); } /* Headline */ .landing--v5 .hero-headline { font-family: var(--font-display); font-size: clamp(1.75rem, 6vw, 2.75rem); font-weight: var(--font-bold); line-height: var(--leading-tight); color: var(--color-navy); margin: 0; letter-spacing: -0.02em; } /* Reel block */ .landing--v5 .hero-reel { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-gray-900); } .landing--v5 .hero-reel__poster, .landing--v5 .hero-reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); } .landing--v5 .hero-reel__video { z-index: 1; } /* Primary CTA */ .landing--v5 .cta-primary { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 64px; padding: var(--space-4) var(--space-6); background: var(--color-burgundy); color: var(--color-cream); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-bold); line-height: 1.2; text-decoration: none; border-radius: var(--radius-full); transition: background var(--transition-base), transform var(--transition-base); } .landing--v5 .cta-primary:hover, .landing--v5 .cta-primary:focus-visible { background: var(--color-burgundy-light); } .landing--v5 .cta-primary:focus-visible { outline: 2px solid var(--color-navy); outline-offset: var(--space-1); } /* Sub-copy directly below CTA, --space-2 gap */ .landing--v5 .hero-subcopy { margin: 0; margin-top: calc(var(--space-2) - var(--space-6)); /* close the parent gap */ font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-normal); line-height: var(--leading-normal); color: var(--color-gray-600); } /* Desktop: two-column split, content left / reel right */ @media (width >= 1024px) { main.landing--v5 { min-height: 640px; padding: var(--space-16) var(--space-8); } .landing--v5 .hero-container { max-width: 1200px; } .landing--v5 .hero-content { display: grid; grid-template-columns: 60% 40%; grid-template-areas: "chip reel" "headline reel" "cta reel" "subcopy reel"; gap: var(--space-6) var(--space-8); text-align: left; align-items: start; } .landing--v5 .hero-chip { grid-area: chip; justify-self: start; margin-top: 0; } .landing--v5 .hero-headline { grid-area: headline; } .landing--v5 .hero-reel { grid-area: reel; max-width: 380px; place-self: center end; } .landing--v5 .cta-primary { grid-area: cta; width: auto; align-self: start; } .landing--v5 .hero-subcopy { grid-area: subcopy; margin-top: 0; } } /* Reduced-motion: hide the video element entirely; poster remains as fallback */ @media (prefers-reduced-motion: reduce) { .landing--v5 .hero-reel__video { display: none; } .landing--v5 *, .landing--v5 *::before, .landing--v5 *::after { animation: none !important; transition: none !important; } }