/* ============================================================================
 * hub/css/landing.css — /hub (the Team Hub marketing page), compositions only.
 * ============================================================================
 * Oct 10 2026 (lane L4b). The system is css/sc-product-landing.css; header
 * css/sc-site-header.css; rails css/sc-yardline-rail.css. This file holds the
 * phone hero, the game-day phone, the chat trio and the two family modes.
 * Phones are real device renders, never a bare capture. Tokens only; volt is
 * the one accent (scripts/test-landing-referee-platform.js).
 * ========================================================================== */

/* ─── HERO: the phone, big and lit, breaking the right edge ────────────── */
.hb-hero .lp-hero-copy { max-width: 640px; }
.hb-hero .lp-h1 { font-size: clamp(46px, 6.2vw, 100px); }
.hb-hero-phone {
    position: absolute; z-index: 0; margin: 0;
    right: -6vw; top: 50%;
    width: min(62vw, 1080px);
    transform: translateY(-46%) rotate(-4deg);
    animation: hb-in 1.1s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hb-hero-phone img { width: 100%; height: auto; }
@keyframes hb-in { from { opacity: 0; translate: 80px 30px; } to { opacity: 1; translate: 0 0; } }

/* ─── GAME DAY ─────────────────────────────────────────────────────────── */
.hb-live-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.hb-live-phone { margin: 0 0 -160px; }
.hb-live-phone img { width: 100%; max-width: 440px; height: auto; border-radius: 40px 40px 0 0; box-shadow: 0 50px 120px var(--pl-shadow-deep); }

/* ─── CHAT: three solid columns ────────────────────────────────────────── */
.hb-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--pl-line-strong); }
.hb-trio > div { padding: 28px 36px 0 0; }
.hb-trio > div + div { padding-left: 36px; border-left: 1px solid var(--pl-line-strong); }
.hb-trio dt { font-family: var(--pl-font-display); font-weight: 800; font-size: clamp(26px, 2.6vw, 40px); line-height: 1; text-transform: uppercase; }
.hb-trio dd { margin: 12px 0 0; color: var(--pl-text-2); font-size: 18px; }

/* ─── FILM: a single typographic statement ─────────────────────────────── */
.hb-film .lp-inner { max-width: 1280px; }

/* ─── FAMILY: two modes side by side, offset ───────────────────────────── */
.hb-modes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--pl-line-strong); }
.hb-modes article { padding: 32px 48px 0 0; }
.hb-modes article + article { padding-left: 48px; border-left: 1px solid var(--pl-line-strong); margin-top: 80px; }
.hb-modes .lp-h3 { margin: 10px 0 14px; font-size: clamp(28px, 3vw, 44px); }
.hb-modes p { margin: 0; color: var(--pl-text-2); font-size: 18px; max-width: 460px; }
.hb-modes .hb-mode-k { font-weight: 700; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--pl-accent); }

@media (max-width: 1100px) {
    .hb-hero-phone { width: 80vw; right: -24vw; opacity: 0.5; }
    .hb-live-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .hb-live-phone { margin-bottom: 0; order: 2; }
}
@media (max-width: 880px) {
    .hb-hero { flex-direction: column; align-items: flex-start; padding-bottom: 40px; }
    .hb-hero-phone { position: relative; right: auto; top: auto; width: 118%; margin: 24px 0 0 -6%; transform: rotate(-4deg); opacity: 1; }
    .hb-trio, .hb-modes { grid-template-columns: minmax(0, 1fr); }
    .hb-trio > div, .hb-trio > div + div { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--pl-line); }
    .hb-modes article, .hb-modes article + article { padding: 28px 0; border-left: 0; margin-top: 0; }
    .hb-live-phone img { max-width: 300px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .hb-hero-phone { animation: none; }
}