/* v3.8 website: the homepage hero as a scene. Layered over site.v2.css and release.v35.1.css; nothing here touches other pages. */
@font-face { font-family: 'Schibsted Fallback'; src: local('Helvetica Neue'), local('Arial'); size-adjust: 94%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
.home-intro-v38 { display: block; text-align: center; padding-block: 44px 40px; }
.home-intro-v38 .intro-copy { max-width: 820px; margin-inline: auto; }
.home-intro-v38 .intro-copy h1 { font-family: 'Schibsted Grotesk', 'Schibsted Fallback', sans-serif; max-width: 15ch; margin: 22px auto 0; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.05; letter-spacing: -.038em; }
.home-intro-v38 .launch-lede { font-family: 'Schibsted Grotesk', 'Schibsted Fallback', sans-serif; margin: 18px auto 0; max-width: 54ch; }
.home-intro-v38 .launch-actions { justify-content: center; margin: 22px 0 14px; }
.home-intro-v38 .small { margin: 0; }
.need-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 8px; max-width: 760px; margin: 22px auto 0; }
.need-chips a { display: inline-block; font-size: .8rem; font-weight: 600; line-height: 1; padding: 9px 13px; border-radius: 999px; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); text-decoration: none; white-space: nowrap; }
.need-chips a:hover { color: var(--brand-ink); border-color: var(--brand-ink); }
.hero-scene { position: relative; margin: 36px 0 0; padding-bottom: 54px; }
.scene-media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-l); background: #2a2620; box-shadow: var(--shadow-lift); }
.scene-media > img, .scene-media > video { border-radius: inherit; }
.scene-media img, .scene-media video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.scene-media video { opacity: 0; transition: opacity .6s ease; }
.scene-media video.is-playing { opacity: 1; }
.scene-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 3; min-height: 34px; padding: 7px 13px; border-radius: 999px; border: 1px solid #ffffff55; background: #16141299; color: #fbf6e9; font: 600 .76rem var(--font-body); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; }
.scene-toggle:hover { background: #161412cc; }
.scene-toggle[hidden] { display: none; }
.scene-phone { position: absolute; left: 4.5%; bottom: -54px; z-index: 2; width: 212px; margin: 0; padding: 0; }
.scene-phone .launch-phone-frame { width: 100%; box-shadow: inset 0 0 0 1px #b6c0c53d, 0 26px 48px -18px #12283199; }
.hero-scene figcaption { position: absolute; left: 0; right: 0; bottom: 14px; padding-left: calc(4.5% + 236px); text-align: left; font-size: .8rem; color: var(--ink-2); margin: 0; }
.carplay-scene { position: relative; }
.carplay-scene .scene-media { border-radius: 15px; box-shadow: 0 24px 56px -20px #000c; }
.carplay-inset { position: absolute; left: 4%; bottom: 7%; z-index: 2; width: 58%; border-radius: 9px; overflow: hidden; border: 1px solid #ffffff33; box-shadow: 0 18px 40px -14px #000d; background: #0b1113; }
.carplay-inset img { position: static; display: block; width: 100%; height: auto; object-fit: initial; }
.carplay-scene figcaption { position: static; padding: 12px 0 0; text-align: left; }
.pet-hero-v38 { display: block; text-align: center; max-width: calc(52rem + 2 * clamp(1.1rem, 4vw, 2rem)); padding-bottom: 0; }
.pet-hero-v38 h1 { max-width: 16ch; margin-inline: auto; }
.pet-hero-v38 .lede { margin-inline: auto; max-width: 52ch; }
.pet-hero-v38 .hero-actions { justify-content: center; }
.pet-scene { width: min(1120px, calc(100% - 64px)); margin: 28px auto 0; padding-bottom: 54px; }
.pet-scene + .tldr-card { margin-top: 36px; }
.pet-scene .scene-phone .iphone-screen { aspect-ratio: 786 / 1704; }
@media (prefers-color-scheme: dark) {
 .scene-media { box-shadow: 0 2px 4px #0006, 0 24px 60px -18px #000c; }
}
@media (max-width: 900px) {
 .scene-phone { width: 176px; }
 .hero-scene figcaption { padding-left: calc(4.5% + 196px); }
 .carplay-inset { width: 50%; }
}
@media (max-width: 680px) {
 .home-intro-v38 { padding-block: 30px 32px; }
 .home-intro-v38 .intro-copy h1 { font-size: clamp(2.35rem, 9.4vw, 3.3rem); max-width: 14ch; }
 .home-intro-v38 .launch-lede { font-size: 1.05rem; }
 .need-chips { gap: 7px; margin-top: 20px; }
 .need-chips a { font-size: .76rem; padding: 8px 11px; }
 .hero-scene { margin-top: 30px; padding-bottom: 40px; }
 .scene-media { border-radius: 16px; aspect-ratio: 4 / 5; }
 .hero-scene .scene-media img, .hero-scene .scene-media video { object-position: 76% 50%; }
 .hero-scene { padding-bottom: 0; }
 .scene-phone { left: 5%; bottom: 5%; width: 44%; }
 .scene-phone .launch-phone-frame { padding: 7px; border-radius: 30px; }
 .scene-phone .iphone-screen { border-radius: 23px; }
 .hero-scene figcaption { position: static; padding: 0; text-align: center; margin-top: 16px; }
 .carplay-scene .scene-media { aspect-ratio: 1 / 1; }
 .carplay-scene .scene-media > img, .carplay-scene .scene-media > video { object-position: 100% 50%; }
 .carplay-inset { position: absolute; left: 4%; top: 6%; bottom: auto; width: 80%; margin: 0; border-radius: 8px; }
 .carplay-scene figcaption { text-align: left; }
 .pet-scene { width: calc(100% - 40px); margin-top: 18px; padding-bottom: 0; }
 .pet-scene + .tldr-card { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
 .scene-media video { display: none; }
 .scene-toggle { display: none; }
}
/* Pet page: Waddles sits on the left of the clip, so the phone takes the right side; phones stack the phone under a square crop that keeps both subjects. */
.pet-scene .scene-phone { left: auto; right: 4.5%; }
.pet-scene .scene-toggle { right: auto; left: 14px; }
.pet-scene figcaption { padding-left: 0; padding-right: calc(4.5% + 236px); }
@media (max-width: 900px) {
 .pet-scene figcaption { padding-right: calc(4.5% + 196px); }
}
@media (max-width: 680px) {
 .pet-scene .scene-media { aspect-ratio: 1 / 1; margin-bottom: calc(56% * 2.17 + 30px); }
 .pet-scene .scene-media > img, .pet-scene .scene-media > video { object-position: 50% 50%; }
 .pet-scene .scene-phone { position: absolute; top: 100%; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); margin-top: 16px; width: 56%; }
 .pet-scene figcaption { padding: 0; margin-top: 16px; text-align: center; }
 .pet-scene .scene-toggle { left: auto; right: 14px; }
}
/* Premium page: the night-before scene under the centered intro. */
.premium-intro-v38 { padding-bottom: 8px; }
.premium-scene { margin: 12px auto 0; padding-bottom: 54px; }
.premium-scene .scene-phone { left: auto; right: 4.5%; }
.premium-scene .scene-phone .iphone-screen { aspect-ratio: 786 / 1709; }
.premium-scene .scene-toggle { right: auto; left: 14px; }
.premium-scene figcaption { padding-left: 0; padding-right: calc(4.5% + 236px); }
.premium-scene + section { margin-top: 24px; }
@media (max-width: 900px) {
 .premium-scene figcaption { padding-right: calc(4.5% + 196px); }
}
@media (max-width: 680px) {
 .premium-scene { padding-bottom: 0; }
 .premium-scene .scene-media { aspect-ratio: 1 / 1; margin-bottom: calc(56% * 2.17 + 30px); }
 .premium-scene .scene-media > img, .premium-scene .scene-media > video { object-position: 50% 50%; }
 .premium-scene .scene-phone { position: absolute; top: 100%; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); margin-top: 16px; width: 56%; }
 .premium-scene figcaption { padding: 0; margin-top: 16px; text-align: center; }
 .premium-scene .scene-toggle { left: auto; right: 14px; }
}