.product-page { --photo-ink:#172f3d; --photo-muted:#334d5b; overflow-x:clip; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:24px; height:24px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.eyebrow,.tiny-label { margin:0 0 23px; color:var(--accent); font-size:10px; line-height:1.6; font-weight:700; letter-spacing:1.9px; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-weight:550; letter-spacing:-.055em; }
h1 { margin-bottom:28px; font-size:clamp(44px,4.5vw,64px); line-height:1.025; }
h1 span,.closing h2 span { color:var(--accent); }
h2 { margin-bottom:24px; font-size:clamp(40px,4.6vw,64px); line-height:1.065; }
h3 { font-weight:550; letter-spacing:-.035em; }
.site-header { padding-block:26px; }
.nav-availability { padding:10px 15px; border:1px solid var(--divider); border-radius:100px; color:var(--ink); font-size:12px; font-weight:600; text-decoration:none; }
.nav-availability span { padding-left:12px; }
.hero { position:relative; max-width:1680px; margin-inline:auto; overflow:hidden; }
.hero-visual { position:absolute; inset:0 0 0 29%; overflow:hidden; border-radius:30px 0 0 30px; }
.scene { display:block; width:100%; height:100%; object-fit:cover; }
.hero-scene { object-position:43% center; }
.hero-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--paper) 0%,transparent 52%),linear-gradient(0deg,var(--paper),transparent 22%); }
.hero-content { min-height:710px; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; position:relative; padding-block:60px 95px; }
.hero-copy { position:relative; z-index:2; }
.hero-description { max-width:440px; margin-bottom:32px; color:var(--muted); font-size:20px; line-height:1.6; letter-spacing:-.015em; }
.primary-link { display:inline-flex; align-items:center; gap:28px; padding:17px 23px; border-radius:100px; color:var(--button-text); background:var(--button-bg); font-size:14px; font-weight:600; text-decoration:none; transition:background .2s,transform .2s; }
.primary-link:hover { background:var(--button-hover); transform:translateY(-2px); }
.primary-link .icon { width:19px; height:19px; }
.purchase-note { margin:18px 0 0; color:var(--muted); font-size:12px; }
.hero-product { position:relative; align-self:end; margin:150px -30px 8px -10px; z-index:1; }
.receiver-window { width:100%; height:auto; filter:drop-shadow(0 22px 26px #102b3c35); }
.product-caption { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; font-size:11px; color:var(--ink); }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--brand); }
.hero-bottom { position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:space-between; align-items:center; font-size:9px; letter-spacing:1.5px; font-weight:600; color:var(--muted); }
.hero-bottom a { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--divider); border-radius:50%; text-decoration:none; font-size:20px; }
.equipment-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 55px; padding-block:30px; color:var(--muted); border-bottom:1px solid var(--divider); font-size:12px; }
.listening-section { padding-block:110px 90px; }
.section-heading { text-align:center; margin-bottom:50px; }
.section-heading>p:last-child { font-size:18px; line-height:1.65; color:var(--muted); }
.listening-stage { position:relative; aspect-ratio:1.85; border-radius:25px; overflow:hidden; isolation:isolate; }
.listening-scene { position:absolute; inset:0; object-position:center 43%; }
.listening-stage::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,#10242e96); pointer-events:none; }
.destination-picker { position:absolute; top:14%; right:6%; width:39%; z-index:2; }
.picker-label { font-size:9px; font-weight:700; letter-spacing:1.5px; color:var(--photo-ink); margin-bottom:19px; }
.destination-options { display:grid; gap:14px; }
.destination { display:flex; gap:17px; align-items:center; width:100%; border:1px solid #ffffff85; border-radius:100px; padding:19px 23px; text-align:left; font-size:clamp(18px,2vw,27px); font-weight:500; letter-spacing:-.03em; cursor:pointer; color:white; background:#324a5f99; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 8px 24px #16334415; transition:background .25s,color .25s,transform .25s,box-shadow .25s; }
.destination[aria-pressed="true"] { color:#162e3a; background:#f5fbfff0; box-shadow:0 10px 28px #17324625; }
.destination:not(:disabled):hover { transform:translateX(-4px); box-shadow:0 12px 28px #17324630; }
.destination:disabled { cursor:default; opacity:1; }
.selection-mark { display:grid; place-items:center; width:21px; height:21px; border:1.6px solid currentColor; border-radius:50%; margin-left:auto; }
.selection-mark .icon { width:16px; height:16px; visibility:hidden; stroke-width:2.3; }
.destination[aria-pressed="true"] .selection-mark { color:white; background:#17333f; border-color:#17333f; }
.destination[aria-pressed="true"] .selection-mark .icon { visibility:visible; }
.demo-caption { margin-top:16px; text-align:center; font-size:10px; color:var(--photo-ink); }
.listening-caption { position:absolute; left:5%; bottom:5%; z-index:2; color:#fff; }
.listening-caption .tiny-label { display:block; color:#e1eaf1; font-size:8px; margin-bottom:12px; }
.listening-caption p { margin:0; font-size:clamp(26px,3.3vw,44px); line-height:1.08; letter-spacing:-.04em; font-weight:500; }
.route-card { margin:0 30px; display:grid; grid-template-columns:1fr 24px 1.2fr 24px 1fr; align-items:center; gap:22px; padding:30px 24px; border-bottom:1px solid var(--divider); }
.route-stop { display:flex; gap:12px; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.route-stop>.icon { width:28px; height:28px; color:var(--accent); }
.route-stop small { display:block; color:var(--muted); font-size:10px; font-weight:400; margin-top:7px; line-height:1.4; }
.route-arrow { color:var(--brand); width:20px; }
.route-note { margin:23px 0 12px; text-align:center; font-size:12px; color:var(--muted); line-height:1.6; }
.section-footnote { text-align:center; font-size:12px; color:var(--muted); margin:0; line-height:1.6; }
.scene-section { max-width:1440px; margin:0 auto 28px; padding-inline:32px; }
.scene-section-inner { min-height:820px; position:relative; border-radius:26px; overflow:hidden; isolation:isolate; background:#e8edf0; }
.scene-section .scene { position:absolute; inset:0; z-index:-2; }
.scene-section-inner::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#ecf0f2f2 2%,#ecf0f2bd 33%,#ecf0f200 65%); }
.scene-copy { width:43%; padding:65px 0 0 6%; color:var(--photo-ink); }
.scene-copy h2 { font-size:clamp(38px,4.4vw,62px); }
.scene-copy .eyebrow { color:#345c6c; }
.scene-copy>p:not(.eyebrow) { max-width:390px; font-size:17px; line-height:1.65; color:var(--photo-muted); }
.scene-copy>p.secondary-copy { font-size:12px; }
.home-scene { object-position:68% center; }
.home-window { position:absolute; left:6%; bottom:4%; width:39%; height:auto; filter:drop-shadow(0 20px 22px #18364035); }
.control-section .scene-section-inner { min-height:670px; }
.control-section .scene-copy { width:45%; padding-top:92px; }
.desk-scene { object-position:48% center; }
.menu-window { position:absolute; right:10%; top:0; height:92%; width:auto; filter:drop-shadow(0 18px 24px #10273530); }
.setup-section { display:grid; grid-template-columns:1fr 1fr; gap:55px 85px; padding-block:115px 85px; }
.setup-intro>p:last-child { color:var(--muted); font-size:18px; line-height:1.6; }
.setup-steps { list-style:none; padding:0; margin:0; }
.setup-steps li { display:flex; gap:25px; padding-block:25px; border-top:1px solid var(--divider); }
.setup-steps li:first-child { padding-top:0; border:0; }
.step-number { font-size:11px; color:var(--accent); padding-top:5px; }
.setup-steps h3 { font-size:24px; margin:0 0 12px; }
.setup-steps p { font-size:14px; line-height:1.7; color:var(--muted); margin:0; }
.requirements { grid-column:1/-1; display:flex; align-items:center; gap:30px; border-block:1px solid var(--divider); padding-block:25px; }
.requirement-label { font-size:9px; letter-spacing:1.6px; font-weight:600; }
.requirements p { font-size:12px; line-height:1.8; margin:0; color:var(--muted); }
.requirements a { margin-left:auto; font-size:12px; text-decoration:none; flex-shrink:0; }
.requirements a span { padding-left:15px; }
.questions { display:grid; grid-template-columns:1fr 1.2fr; gap:90px; padding-block:20px 100px; }
.text-link { display:inline-flex; gap:16px; font-size:13px; font-weight:600; text-decoration:none; }
.question-list details { border-top:1px solid var(--divider); }
.question-list details:last-child { border-bottom:1px solid var(--divider); }
summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:23px; cursor:pointer; list-style:none; font-size:15px; font-weight:500; line-height:1.5; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; color:var(--accent); font-size:22px; font-weight:400; flex-shrink:0; }
details[open] summary::after { content:"−"; }
.question-list p { padding-right:24px; margin-bottom:23px; color:var(--muted); font-size:14px; line-height:1.7; }
.closing { text-align:center; padding-block:75px; border-radius:25px; background:radial-gradient(ellipse at 50% 120%,var(--glow),transparent 75%),var(--surface); border:1px solid var(--surface-border); }
.closing h2 { font-size:clamp(42px,5.5vw,76px); }
.closing>p:not(.eyebrow) { color:var(--muted); font-size:15px; line-height:1.6; }
.availability-label { display:table; margin:30px auto 20px; padding:17px 25px; border:1px solid var(--divider); border-radius:100px; color:var(--muted); font-size:14px; }
@media (prefers-color-scheme:dark) {
 .scene-section-inner { background:var(--paper); }
 .hero-visual { opacity:.55; }
 .scene-section-inner::before { background:linear-gradient(90deg,#111b24f7 2%,#111b24d4 36%,#111b2430 76%); }
 .scene-copy { color:var(--ink); }
 .scene-copy .eyebrow { color:var(--accent); }
 .scene-copy>p:not(.eyebrow) { color:var(--muted); }
 .home-scene,.desk-scene { filter:brightness(.75); }
 .listening-stage { box-shadow:0 0 0 1px var(--line); }
}
@media (prefers-reduced-motion:no-preference) {
 .hero-copy { animation:arrive .8s ease-out both; }
 .hero-product { animation:arrive 1s .1s ease-out both; }
 [data-reveal].revealed { animation:arrive .7s ease-out both; }
 .route-card.changed .route-output { animation:destination-change .45s ease-out; }
 @keyframes arrive { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
 @keyframes destination-change { 50% { transform:translateY(-4px); color:var(--accent); } }
}
@media (prefers-reduced-motion:reduce) {
 .primary-link,.destination { transition:none; }
 .primary-link:hover,.destination:not(:disabled):hover { transform:none; }
}
@media (max-width:1100px) {
 .hero-content { min-height:660px; }
 .hero-product { margin-right:0; }
 .hero-description { max-width:370px; font-size:18px; }
 .scene-section-inner { min-height:780px; }
 .scene-copy { width:48%; padding-top:50px; }
 .scene-copy h2 { font-size:45px; }
 .home-window { width:43%; }
 .control-section .scene-section-inner { min-height:620px; }
 .menu-window { right:4%; height:85%; }
 .route-card { margin:0; padding-inline:0; gap:12px; }
 .setup-section,.questions { gap:45px; }
}
@media (max-width:760px) {
 h1 { font-size:clamp(42px,9.4vw,69px); }
 h2 { font-size:clamp(37px,8vw,54px); }
 .site-header { padding-block:20px; }
 .site-nav { gap:17px; }
 .nav-availability { display:none; }
 .hero-content { min-height:auto; display:flex; flex-direction:column; align-items:stretch; padding-block:30px 80px; }
 .hero-copy { max-width:600px; }
 .hero .eyebrow { font-size:8px; margin-bottom:20px; letter-spacing:1.4px; }
 .hero-description { font-size:17px; max-width:410px; margin-bottom:24px; }
 .hero-visual { inset:260px 0 0; border-radius:0; }
 .hero-visual::after { background:linear-gradient(180deg,var(--paper),transparent 38%,transparent 75%,var(--paper)); }
 .hero-product { width:76%; margin:65px 0 0 auto; align-self:auto; }
 .product-caption { font-size:10px; margin-top:13px; }
 .hero-bottom { font-size:7px; letter-spacing:1.2px; }
 .equipment-strip { gap:18px 25px; font-size:11px; padding-block:24px; }
 .listening-section { padding-block:65px 60px; }
 .section-heading { text-align:left; margin-bottom:30px; }
 .section-heading>p:last-child { font-size:16px; }
 .wide-only { display:none; }
 .listening-stage { aspect-ratio:auto; height:600px; border-radius:20px; }
 .listening-scene { object-position:31% center; }
 .destination-picker { width:76%; top:6%; right:6%; }
 .destination-options { gap:11px; }
 .destination { font-size:21px; padding:15px 18px; gap:13px; }
 .picker-label { margin-bottom:12px; font-size:8px; }
 .demo-caption { font-size:9px; }
 .listening-caption { left:7%; bottom:6%; }
 .listening-caption p { font-size:35px; }
 .route-card { grid-template-columns:1fr; justify-items:start; gap:16px; padding:28px 15px; }
 .route-stop { justify-content:start; font-size:13px; }
 .route-stop small { font-size:11px; margin-top:4px; }
 .route-arrow { margin-left:4px; width:18px; height:18px; transform:rotate(90deg); }
 .route-note,.section-footnote { text-align:left; font-size:12px; }
 .scene-section { padding-inline:20px; margin-bottom:20px; }
 .scene-section-inner { min-height:740px; border-radius:20px; }
 .control-section .scene-section-inner { min-height:670px; border-radius:20px; }
 .scene-copy,.control-section .scene-copy { width:100%; padding:36px 26px 0; }
 .scene-copy h2 { font-size:clamp(37px,8vw,51px); }
 .scene-copy>p:not(.eyebrow) { max-width:390px; font-size:16px; }
 .scene-copy>p.secondary-copy { font-size:12px; }
 .scene-section-inner::before { background:linear-gradient(180deg,#edf1f4f7 0%,#edf1f4ed 27%,#edf1f442 56%,transparent 85%); }
 .scene-section .home-scene,.scene-section .desk-scene { mask-image:linear-gradient(to bottom,transparent,#000 22%); }
 .scene-section .home-scene { top:auto; bottom:0; height:64%; object-position:90% center; }
 .home-window { width:82%; left:4%; bottom:4%; }
 .menu-window { height:auto; width:65%; right:5%; top:auto; bottom:0; }
 .scene-section .desk-scene { top:auto; bottom:0; height:62%; object-position:45% bottom; }
 .setup-section { grid-template-columns:1fr; padding-block:65px 55px; gap:32px; }
 .setup-intro>p:last-child { font-size:17px; }
 .requirements { flex-wrap:wrap; gap:15px; padding-block:25px; }
 .requirements p { flex-basis:100%; font-size:11px; }
 .requirements a { margin-left:0; }
 .questions { grid-template-columns:1fr; gap:32px; padding-block:0 60px; }
 .questions h2 br { display:none; }
 .closing { padding:45px 20px; border-radius:20px; }
 .closing h2 { font-size:clamp(36px,8vw,54px); }
 .closing .eyebrow { font-size:8px; }
 .closing>p:not(.eyebrow) { font-size:13px; }
}
@media (max-width:760px) and (prefers-color-scheme:dark) {
 .scene-section-inner::before { background:linear-gradient(180deg,#111b24fc,#111b24f0 32%,#111b2455 65%,transparent); }
}
@media (max-width:380px) {
 .destination-picker { width:86%; }
 .listening-stage { height:550px; }
 .scene-copy,.control-section .scene-copy { padding-inline:20px; }
 .scene-section-inner,.control-section .scene-section-inner { min-height:820px; }
}

/* Product identity leads; the compatibility benefit stays secondary. */
.hero-brand { display:flex; align-items:center; gap:16px; margin:0 0 24px; }
.hero-brand .brand-icon { width:80px; height:80px; }
.hero-brand h1 { margin:0; font-size:clamp(58px,5.5vw,78px); line-height:1; letter-spacing:-.055em; }
.hero-benefit { margin:0 0 24px; font-size:clamp(35px,3.5vw,48px); font-weight:550; line-height:1.08; letter-spacing:-.045em; }
.hero-benefit span { color:var(--accent); }
.hero-description { font-size:18px; }
@media (max-width:760px) {
 .hero-brand { gap:12px; margin-bottom:24px; }
 .hero-brand .brand-icon { width:58px; height:58px; }
 .hero-brand h1 { font-size:clamp(42px,11.8vw,62px); }
 .hero-benefit { font-size:clamp(30px,8.2vw,42px); }
 .hero-description { font-size:17px; }
}
@media (max-width:380px) {
 .hero-brand .brand-icon { width:48px; height:48px; }
 .hero-brand { gap:10px; }
 .hero-brand h1 { font-size:40px; }
 .site-nav { gap:12px; }
}

/* Approved movie-night scene, with responsive text kept separate from the art. */
.video-section .scene-section-inner { min-height:760px; background:#eadbcb; }
.video-section .scene-copy { width:44%; margin-left:50%; padding:65px 0 0; }
.video-section .scene-section-inner::before { background:none; }
.video-scene { object-position:center; }
@media (prefers-color-scheme:dark) {
 .video-section .scene-section-inner { background:var(--paper); }
 .video-section .scene-section-inner::before { background:linear-gradient(180deg,#111b24d9,#111b24bd 34%,#111b2430 58%,transparent 80%); }
}
@media (max-width:1100px) and (min-width:761px) {
 .video-section .scene-copy { width:44%; margin-left:42%; padding-top:48px; }
 .video-section .scene-section-inner { min-height:670px; }
 .video-section .video-scene { object-position:right center; }
}
@media (max-width:760px) {
 .video-section .scene-section-inner { min-height:710px; }
 .video-section .scene-copy { width:100%; margin:0; padding:36px 26px 0; }
 .video-section .scene-section-inner::before { background:linear-gradient(180deg,#eadbcb,#eadbcbf0 32%,#eadbcb20 65%,transparent); }
 .scene-section .video-scene { top:auto; bottom:0; height:58%; object-position:76% center; mask-image:linear-gradient(to bottom,transparent,#000 20%); }
}
@media (max-width:760px) and (prefers-color-scheme:dark) {
 .video-section .scene-section-inner::before { background:linear-gradient(180deg,#111b24,#111b24e0 32%,#111b2420 68%,transparent); }
}

/* Match genuine app captures to the website's system-selected appearance. */
.receiver-window, .home-window, .menu-window { display:block; }
.receiver-window img, .home-window img { display:block; width:100%; height:auto; }
.menu-window { aspect-ratio:1050 / 1240; }
.menu-window img { display:block; width:100%; height:100%; object-fit:contain; }