/* Gogo Forever — welcome and listening experience. */
:root { --gf-paper: #f4f3ed; --gf-muted: #a8acb9; }
.auth-gate {
    position: fixed; inset: 0; z-index: 10000; overflow-y: auto;
    display: flex; flex-direction: column; background: #090b10; color: var(--gf-paper);
    padding: max(28px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom));
    isolation: isolate; overscroll-behavior: contain;
}
.auth-gate::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 78% 30%, #16313a66, transparent 48%), radial-gradient(ellipse at 85% 90%, #34214955, transparent 45%); }
.welcome-top, .welcome-layout, .welcome-bottom { width: min(1240px, 100%); margin-inline: auto; }
.welcome-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gf-wordmark { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 850; letter-spacing: 1.6px; }
.gf-mark { color: var(--accent); width: 30px; height: 32px; }
.welcome-signin { min-height: 44px; padding: 10px 21px; border: 1px solid #ffffff30; border-radius: 30px; background: #ffffff06; color: var(--gf-paper); font: 600 13px 'Inter', sans-serif; cursor: pointer; }
.welcome-signin:hover { border-color: var(--accent); background: #00d4ff0b; }
.welcome-layout { display: grid; grid-template-columns: 1.03fr 1fr; align-items: center; gap: 25px; flex: 1; padding-block: 45px 32px; }
.welcome-eyebrow, .home-eyebrow { display: flex; align-items: center; gap: 9px; color: #a6ddd9; font-size: 10px; font-weight: 650; letter-spacing: 2.5px; text-transform: uppercase; }
.welcome-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8ae6cb; box-shadow: 0 0 15px #8ae6cb80; }
.welcome-title { margin: 24px 0; font-size: clamp(48px, 5.5vw, 80px); letter-spacing: -.065em; line-height: 1.01; font-weight: 850; }
.welcome-title span { color: #89e8e0; }
.welcome-description { max-width: 390px; color: var(--gf-muted); font-size: 16px; line-height: 1.75; margin-bottom: 28px; }
.welcome-cta { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 56px; padding: 15px 24px; background: #a0f0e4; color: #082c2b; border: none; border-radius: 7px; font: 750 15px 'Inter', sans-serif; cursor: pointer; transition: background .2s, transform .2s; }
.welcome-cta:hover { background: #c3fff3; transform: translateY(-2px); }
.welcome-cta svg { width: 19px; height: 19px; }
.welcome-trial { margin-top: 13px; font-size: 11px; color: var(--gf-muted); line-height: 1.6; }
.welcome-benefits { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 37px; padding-top: 22px; border-top: 1px solid #ffffff12; max-width: 440px; }
.welcome-benefits span { font-size: 11px; color: #c1c5cd; display: flex; align-items: center; gap: 7px; }
.welcome-benefits svg { width: 15px; height: 15px; color: #94e4db; }
.welcome-art { position: relative; min-width: 0; }
.welcome-art img { width: 100%; max-height: 650px; object-fit: contain; display: block; filter: drop-shadow(0 28px 24px #0006); }
.welcome-art-caption { position: absolute; right: 7%; bottom: 4%; color: #91a5b4; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; }
.welcome-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #ffffff16; padding-top: 21px; color: #8f97a7; font-size: 10px; line-height: 1.5; }
.welcome-bottom strong { color: #bec9d1; font-weight: 500; }
.welcome-bottom nav { display: flex; gap: 24px; }
.welcome-bottom a { color: #a8acb9; min-height: 32px; display: inline-flex; align-items: center; text-decoration: none; }
.welcome-bottom a:hover { color: white; }

/* Home uses the same identity while letting real catalog artwork lead. */
#homePage { max-width: 1480px; margin-inline: auto; }
.home-heading { display: flex; justify-content: space-between; gap: 15px; align-items: flex-end; margin: 4px 0 24px; }
.home-heading h1 { margin: 9px 0 0; font-size: clamp(25px, 3vw, 40px); line-height: 1.12; letter-spacing: -.055em; font-weight: 800; }
.home-heading-note { color: var(--gf-muted); font-size: 12px; }
.home-shortcuts { display: flex; gap: 8px; margin-bottom: 25px; overflow-x: auto; scrollbar-width: none; }
.home-shortcuts button { white-space: nowrap; min-height: 44px; padding: 10px 18px; border-radius: 30px; border: 1px solid #ffffff1a; background: #ffffff04; color: #d6d9e1; font: 550 12px 'Inter', sans-serif; cursor: pointer; }
.home-shortcuts button:first-child { background: #f1f2ed; color: #141b21; border-color: transparent; }
.home-shortcuts button:hover { border-color: #8ee6df; }
.home-listening-hero { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; min-height: 290px; overflow: hidden; border: 1px solid #ffffff15; border-radius: 17px; background: radial-gradient(ellipse at 85% 95%, #5441727a, transparent 65%), linear-gradient(125deg, #13363e, #152130 55%, #242036); margin-bottom: 36px; }
.home-hero-copy { position: relative; z-index: 2; padding: 32px; align-self: center; }
.home-hero-copy h2 { font-size: clamp(27px, 3vw, 43px); line-height: 1.1; letter-spacing: -.055em; font-weight: 800; margin: 13px 0; max-width: 460px; }
.home-hero-copy h2 span { color: #a4f0e5; }
.home-hero-copy p { color: #bbcbd4; font-size: 12px; line-height: 1.6; max-width: 330px; margin-bottom: 22px; }
.home-hero-copy .btn-primary { background: #a0f0e4; color: #082c2b; border-radius: 7px; padding: 12px 19px; min-height: 44px; font-size: 12px; }
.home-hero-art { display: flex; justify-content: center; align-items: center; min-width: 0; padding: 20px 24px; position: relative; }
.home-disc { position: absolute; width: 230px; height: 230px; right: 2%; border-radius: 50%; background: repeating-radial-gradient(circle, #10121b 0 3px, #414057 4px, #10121b 5px 9px); border: 1px solid #59566c; box-shadow: 10px 15px 50px #0004; }
.home-disc::after { content: ''; position: absolute; inset: 36%; border-radius: 50%; background: #a0f0e4; border: 26px solid #8ccac8; }
.home-sleeve { display: block; position: relative; width: min(100%, 240px); aspect-ratio: 1; background: #172a38; border: 1px solid #ffffff2b; padding: 0; border-radius: 5px; overflow: hidden; transform: rotate(-8deg); box-shadow: 0 20px 40px #0007; cursor: pointer; }
.home-sleeve img { width: 100%; height: 100%; object-fit: cover; }
.home-sleeve .art-ph span { font-size: 60px; }
.home-sleeve-label { position: absolute; inset: auto 0 0; padding: 40px 15px 15px; background: linear-gradient(transparent,#05080ee8); color: white; text-align: left; }
.home-sleeve-label strong, .home-sleeve-label small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.home-sleeve-label strong { font: 700 14px 'Inter', sans-serif; }
.home-sleeve-label small { font: 400 10px 'Inter', sans-serif; color: #c7ced6; margin-top: 4px; }
#homePage .section-title { font-size: 20px; letter-spacing: -.035em; }
#homePage .section-link { color: #b8bfc9; font-size: 11px; font-weight: 550; }
#homePage .card { padding: 0; background: transparent; border-radius: 8px; }
#homePage .card:hover { background: transparent; transform: translateY(-3px); }
#homePage .card-artwork { border: 1px solid #ffffff0d; border-radius: 8px; margin-bottom: 12px; }
#homePage .card-artwork.round { border-radius: 50%; }
#homePage .card-title { font-size: 12px; font-weight: 650; }
#homePage .card-subtitle { font-size: 11px; margin-top: 5px; }
#homePage .card-grid { gap: 22px; }
#homePage .content-section { margin-bottom: 36px; }
#homePage .track-list { border: 1px solid #ffffff10; border-radius: 12px; padding: 5px; background: #ffffff02; }
#homePage .hero-banner { height: auto; min-height: 240px; margin-bottom: 36px; border: 1px solid #ffffff17; border-radius: 15px; display: flex; align-items: flex-end; }
#homePage .hero-content { position: relative; inset: auto; z-index: 3; padding: 28px; width: 100%; }
#homePage .hero-title { font-size: 25px; letter-spacing: -.04em; }
#homePage .hero-tag { background: #ffffff15; color: #e3e9ed; padding: 5px 9px; font-size: 9px; letter-spacing: 2px; }
#homePage .hero-actions .btn-primary { background: #edf2ef; color: #121921; border-radius: 7px; font-size: 12px; min-height: 44px; }
#homePage .hero-subtitle { font-size: 12px; }
#homePage .home-video-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg,#090e19eb,#090e19aa 50%,#090e1930); }
.sidebar { background: #0d1018; }
.sidebar-link.active { background: #00d4ff10; }
.top-bar { background: #0a0a0fe8; backdrop-filter: blur(18px); }
.search-bar { border: 1px solid #ffffff0c; border-radius: 9px; }
.now-playing-bar { border-top-color: #ffffff1a; background: #111722; }
.auth-modal { border: 1px solid #ffffff1c; box-shadow: 0 30px 100px #0009; }
.auth-modal h2 { letter-spacing: -.045em; font-size: 28px; }

@media (max-width: 900px) {
    .welcome-title { font-size: 58px; }
    .welcome-benefits { gap: 12px; }
    .home-heading-note { display: none; }
    .home-hero-copy { padding: 25px; }
    .home-disc { width: 190px; height: 190px; }
}
@media (max-width: 600px) {
    .auth-gate { padding: max(20px, env(safe-area-inset-top)) 22px max(16px, env(safe-area-inset-bottom)); }
    .gf-wordmark { font-size: 11px; letter-spacing: 1.3px; gap: 8px; }
    .gf-mark { width: 25px; height: 28px; }
    .welcome-signin { font-size: 11px; padding: 9px 16px; }
    .welcome-layout { grid-template-columns: 1fr; gap: 0; padding-block: 36px 20px; }
    .welcome-eyebrow { font-size: 8px; letter-spacing: 2px; }
    .welcome-title { font-size: clamp(43px, 12.5vw, 66px); margin: 18px 0; }
    .welcome-description { font-size: 13px; line-height: 1.65; max-width: 310px; margin-bottom: 20px; }
    .welcome-cta { width: 100%; justify-content: space-between; min-height: 52px; font-size: 13px; }
    .welcome-trial { font-size: 10px; }
    .welcome-benefits { margin-top: 24px; padding-top: 18px; gap: 15px; }
    .welcome-benefits span { font-size: 9px; }
    .welcome-art { width: 86%; margin: 0 auto; }
    .welcome-art img { max-height: 325px; }
    .welcome-art-caption { right: 0; bottom: 2%; font-size: 7px; }
    .welcome-bottom { font-size: 9px; padding-top: 13px; }
    .welcome-bottom nav { gap: 15px; }
    .welcome-bottom .welcome-location { max-width: 155px; }
}
@media (max-width: 768px), (pointer: coarse) and (max-width: 1024px) {
    .home-heading { margin: 9px 0 20px; }
    .home-heading h1 { font-size: 30px; }
    .home-eyebrow { font-size: 8px; letter-spacing: 2px; }
    .home-shortcuts { gap: 7px; margin-bottom: 20px; }
    .home-shortcuts button { font-size: 11px; padding: 9px 16px; }
    .home-listening-hero { grid-template-columns: 1fr .7fr; min-height: 244px; margin-bottom: 28px; border-radius: 13px; }
    .home-hero-copy { padding: 23px 0 23px 19px; }
    .home-hero-copy h2 { font-size: clamp(25px, 6vw, 34px); margin-block: 10px; }
    .home-hero-copy p { font-size: 10px; margin-bottom: 18px; padding-right: 8px; }
    .home-hero-copy .btn-primary { font-size: 11px; padding: 11px 14px; }
    .home-hero-art { padding: 16px 9px 16px 16px; }
    .home-sleeve { width: 150px; min-width: 135px; margin-right: -40px; }
    .home-disc { width: 150px; height: 150px; right: -65px; }
    .home-disc::after { border-width: 15px; }
    .home-sleeve-label { padding: 30px 9px 10px; }
    .home-sleeve-label strong { font-size: 10px; }
    .home-sleeve-label small { font-size: 8px; }
    #homePage .section-title { font-size: 18px; }
    #homePage .card-grid { gap: 16px; }
    #homePage .card-scroller .card { flex-basis: 146px; width: 146px; padding: 0; }
    #homePage .card-title { font-size: 12px; }
    #homePage .card-subtitle { font-size: 10px; }
    #homePage .hero-banner { min-height: 200px; }
    #homePage .hero-content { padding: 23px; }
    #homePage .hero-title { font-size: 22px; }
    .mobile-nav { background: #0d111bec; backdrop-filter: blur(16px); border-top: 1px solid #ffffff0f; }
    .mobile-nav-item { font-size: 9px; gap: 5px; }
    .mobile-nav-item.active { color: #a0f0e4; }
    .now-playing-bar { background: #17212c; border-top: 1px solid #ffffff17; }
}
@media (max-width: 359px) {
    .home-hero-copy h2 { font-size: 24px; }
    .home-sleeve { min-width: 115px; }
    .welcome-benefits { gap: 8px; }
    .welcome-benefits span { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .welcome-cta, #homePage .card { transition: none; }
    .welcome-cta:hover, #homePage .card:hover { transform: none; }
}