/* Homepage only. Tokens and direction: DESIGN.md (from the app's Palette.kt, Ember). */
:root{--bg:#0c0907;--surface:#171210;--surface-raised:#221a16;--text:#f5efe9;--muted:#a08e82;--accent:#e8763c;--line:#2e241f;--max:1360px;
 --step-display:clamp(3.4rem,7.6vw,7.25rem);--step-heading:clamp(2.25rem,4vw,3.5rem);--step-title:1.375rem;--step-lead:1.25rem;--step-body:1.0625rem;--step-small:.875rem}
[hidden]{display:none!important}
body{background:var(--bg)}
.wrap{width:min(var(--max),calc(100% - 64px))}
p{font-size:var(--step-body)}
.fine{font-size:var(--step-small);line-height:1.6}
h2{font-size:var(--step-heading);line-height:1.05}
h3{font-size:var(--step-title)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.button{border-radius:10px;gap:14px;font-size:var(--step-body);min-height:54px;padding:16px 24px}
.button:hover{transform:none}
.primary{background:var(--accent);color:var(--bg)}
.primary:hover{background:#f08a55}
.secondary{background:var(--surface-raised);border-color:transparent}
.secondary:hover{background:#2c221d}
.text-link{color:var(--accent);font-size:var(--step-body)}
.section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:48px;align-items:end;margin-bottom:48px}
.section-heading>p{max-width:none}

/* Hero: the sentence holds the playing channel. */
.tv-hero{padding-block:72px 56px;text-align:left}
.tv-hero h1{font-size:var(--step-display);line-height:.95;letter-spacing:-.06em;margin:0}
.hero-clip{display:inline-block;vertical-align:-.04em;width:2.3em;height:.78em;margin-left:.12em;border-radius:.12em;object-fit:cover;outline:.045em solid var(--accent);outline-offset:.05em;background:var(--surface)}
.tv-hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end;margin-top:48px}
.tv-hero .hero-copy{font-size:var(--step-lead);line-height:1.55;max-width:34rem;margin:0;color:var(--text)}
.tv-hero .actions{justify-content:flex-start;flex-wrap:wrap}
.tv-hero .fine{margin:16px 0 0}

/* The app's own screens, large: choose a screen, read what it does. */
.screens{background:var(--surface);padding-block:72px 64px}
.screens-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);gap:48px;align-items:end;margin-bottom:32px}
.screens-head p{color:var(--text)}
.screen-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.screen-tabs button{background:transparent;color:var(--muted);font-size:var(--step-body);padding:10px 16px;border:2px solid transparent;border-radius:999px;min-height:48px}
.screen-tabs button:hover{color:var(--text)}
.screen-tabs button[aria-selected=true]{color:var(--text);background:var(--surface-raised);border-color:var(--accent)}
.screen-image{display:block;border-radius:14px;background:var(--bg)}
.tour-caption{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:32px 0 0}
.tour-caption>div{display:block;max-width:none;margin:0}
.tour-caption h3{margin-bottom:10px}
.tour-caption p{max-width:40rem;color:var(--text)}
.tour-points{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tour-points li{font-size:var(--step-body);line-height:1.6}
.tour-points strong{font-weight:700;margin-right:4px}
.tour-caption .demo-label{position:static;display:block;margin-top:16px;padding:0;background:none;font-size:var(--step-small);color:var(--muted)}

/* The browser half: the dashboard and its demo. */
.dashboard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:72px;align-items:start;padding-block:96px}
.dashboard-copy>p{margin:24px 0 32px;color:var(--text)}
.dashboard-points{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:24px}
.dashboard-points h3{margin-bottom:6px}
.dashboard-points p{color:var(--text)}
.household-preview{background:var(--surface);border:0;border-radius:18px;overflow:hidden;min-width:0;position:sticky;top:120px}
.preview-heading{display:flex;justify-content:space-between;align-items:center;padding:24px;gap:14px}
.preview-heading strong{font-weight:400;font-size:var(--step-title)}
.preview-heading>span{color:var(--muted);font-size:var(--step-small)}
.preview-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;padding:0 24px 24px}
.preview-devices{display:flex;flex-direction:column;gap:8px}
.preview-devices button{display:flex;gap:10px;align-items:flex-start;background:transparent;text-align:left;padding:12px 10px;border:2px solid transparent;border-radius:12px;font-size:var(--step-body);line-height:1.4}
.preview-devices button[aria-pressed=true]{background:var(--surface-raised);border-color:var(--accent)}
.preview-devices svg{width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:1.6;flex:none;margin-top:2px}
.preview-devices small{display:block;color:var(--muted);font-size:var(--step-small);margin-top:4px}
.preview-editor{min-width:0}
.preview-editor h3{font-size:var(--step-title)}
.preview-groups{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}
.preview-groups button{padding:8px 12px;border:2px solid transparent;border-radius:999px;background:transparent;color:var(--muted);font-size:var(--step-small);min-height:44px}
.preview-groups button[aria-pressed=true]{background:var(--surface-raised);color:var(--text);border-color:var(--accent)}
#preview-channels{display:grid;gap:8px;min-height:168px}
.preview-channel{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 14px;background:var(--surface-raised);border-radius:10px;font-size:var(--step-body)}
.preview-channel{border:2px solid transparent}.preview-channel.is-favourite{border-color:#e8763c80}
.preview-channel button{display:grid;place-items:center;min-width:44px;min-height:44px;background:transparent;color:var(--muted);border-radius:8px}
.preview-channel button[aria-pressed=true]{color:var(--accent)}
.preview-channel svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.preview-channel button[aria-pressed=true] svg{fill:currentColor}
#preview-status{margin-top:16px;min-height:44px}
.preview-reset{background:transparent;color:var(--muted);font-size:var(--step-small);padding:10px 0;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.preview-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;background:var(--surface-raised);padding:18px 24px;font-size:var(--step-small);color:var(--muted);line-height:1.6}
.preview-foot span{max-width:22rem}
.preview-foot a{color:var(--accent)}

/* What only a player for your own sources needs: three plain columns, no icons. */
.strengths{padding-block:24px 96px}
.strengths h2{margin-bottom:40px;max-width:16ch}
.strength-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.strength-list h3{margin-bottom:12px;padding-top:20px;border-top:3px solid var(--accent);max-width:18ch}
.strength-list p{color:var(--text)}

/* Themes, details, pricing, setup and questions: one surface step, no outlines. */
.personal{padding-block:96px;border:0}
.theme-copy h3{font-size:var(--step-title)}
.theme-switch button{font-size:var(--step-body);padding:10px 14px;min-height:48px;border:2px solid transparent;background:var(--surface-raised);border-radius:999px}
.theme-switch button[aria-pressed=true]{color:var(--text);border-color:var(--accent)}
.theme-note{font-size:var(--step-small)!important}
.image-button{border:0;border-radius:14px;background:var(--surface)}
.zoom-icon{background:#0c0907d9;border-radius:8px;font-size:1.25rem;padding:4px 10px}
.feature-grid{border:0;padding-block:56px 32px;margin:0;gap:48px}
.feature-grid h3{margin:0 0 10px}
.detail-grid{gap:48px}
.pricing-section{background:var(--surface);border:0;padding:96px 0}
.pricing-preview{border:0;padding:0;border-radius:0;color:var(--muted);font-size:var(--step-small);margin:0 0 24px}
.pricing-grid{gap:24px}
.price-card{background:var(--bg);border:0;border-radius:18px;padding:36px}
.price-card{border:3px solid transparent}.price-card.featured{background:var(--bg);border-color:var(--accent);box-shadow:none}
.price-card h3{font-size:var(--step-title);margin:0 0 20px}
.price-amount{font-size:4rem}
.price-period{font-size:var(--step-body);color:var(--muted)}
.price-note{font-size:var(--step-small);color:var(--muted);min-height:0}
.price-card ul{border:0;font-size:var(--step-body);padding:16px 0 24px 18px}
.price-card li::marker{color:var(--accent)}
.price-status{background:var(--surface-raised);font-size:var(--step-body);color:var(--text);border-radius:10px;padding:16px}
a.price-status:hover,a.price-status:focus-visible{background:#2c221d;color:var(--text)}
.pricing-foot{font-size:var(--step-small);color:var(--muted)}
.setup-section{padding:96px 0;background:var(--bg);border:0}
.setup-section #install{scroll-margin-top:110px}
.setup-version{color:var(--muted);font-size:var(--step-small);margin:-24px 0 32px}
.setup-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0;counter-reset:step}
.setup-card{min-width:0;overflow:hidden;background:var(--surface);border:0;border-radius:18px;counter-increment:step}
.setup-card figure{margin:0;background:var(--surface-raised)}
.setup-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.setup-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:28px}
.setup-copy h3{font-size:var(--step-title);line-height:1.25}
.setup-copy h3::before{content:counter(step) ". ";color:var(--accent)}
.setup-copy>p{line-height:1.7;margin:0;color:var(--text)}
.setup-copy .fine{color:var(--muted)}
.setup-note{border:0;padding:0;font-size:var(--step-small);color:var(--muted)}
.setup-extra{font-size:var(--step-body);line-height:1.7;max-width:100%}
.setup-extra summary{cursor:pointer;color:var(--accent);padding:10px 0;min-height:44px}
.setup-extra p{margin:12px 0;color:var(--muted)}
.setup-extra code{display:block;overflow-wrap:anywhere;border:0;padding:14px;border-radius:10px;color:var(--text);font:inherit;font-size:var(--step-lead);background:var(--surface-raised)}
.faq{padding-block:96px;border:0}
.faq h2{max-width:none}
summary{font-size:var(--step-body);padding:18px 0}
details{border:0;background:var(--surface);border-radius:12px;padding:0 20px;margin-bottom:8px}
details p{color:var(--text)}
.faq-filter{margin-top:28px}
.faq-filter label{display:block;font-size:var(--step-small);margin-bottom:10px;color:var(--muted)}
.faq-filter input{font:inherit;font-size:var(--step-body);width:100%;padding:14px 16px;color:var(--text);background:var(--surface);border:0;border-radius:10px}
#faq-result{font-size:var(--step-small);margin-top:12px}
.feature-grid p,.detail-grid p,.steps p,.pair-text p,.tour-caption p,details p,.theme-copy>p{font-size:var(--step-body);color:var(--text)}
.tour-caption p.demo-label{font-size:var(--step-small);color:var(--muted)}
.theme-copy>p.theme-note{font-size:var(--step-small)!important;color:var(--muted)}
footer.wrap{width:auto;max-width:none;margin:0;border:0;background:var(--surface);padding:36px max(32px,calc((100% - var(--max))/2))}
footer p,footer>a:last-child{font-size:var(--step-small)}
footer p{flex:1;max-width:none;text-align:center}

@media(max-width:1040px){
 .dashboard{grid-template-columns:1fr;gap:48px}
 .household-preview{position:static}
}
@media(max-width:900px){
 .tv-hero-foot,.screens-head,.tour-caption,.section-heading{grid-template-columns:1fr;gap:24px}
 .strength-list{grid-template-columns:1fr;gap:32px}
 .strength-list h3{max-width:none}
}
@media(max-width:700px){
 .wrap{width:calc(100% - 32px)}
 footer.wrap{padding-inline:16px}
 footer p{text-align:left}
 .tv-hero{padding-block:40px 40px}
 .tv-hero h1{font-size:clamp(2.9rem,14.5vw,4.4rem)}
 .hero-clip{width:1.7em}
 .tv-hero .actions{flex-direction:column;align-items:stretch}
 .screens,.personal,.pricing-section,.setup-section,.faq{padding-block:56px}
 .dashboard{padding-block:56px}
 .screen-tabs{gap:6px}
 .screen-tabs button{padding:8px 14px}
 .preview-layout{grid-template-columns:1fr;padding:0 16px 16px}
 .preview-devices{display:grid;grid-template-columns:1fr 1fr}
 .preview-heading{padding:20px 16px}
 .preview-foot{padding:16px}
 .setup-cards{grid-template-columns:1fr}
 .setup-copy{padding:22px}
 .price-card{padding:28px}
}

/* The numeric Downloader shortcut is the primary installation path. */
.downloader-install{align-self:stretch;padding:24px;background:var(--surface-raised);border-radius:10px}
.downloader-install p{color:var(--text);padding:0;margin:0;line-height:1.5}
.downloader-code{display:block;margin:12px 0;font-size:clamp(2.8rem,6vw,4rem);font-weight:700;line-height:1.1;letter-spacing:.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.setup-copy .setup-extra{align-self:stretch;margin:0;padding:0;background:transparent}
.setup-copy summary.disclosure-summary{padding:14px 0;color:var(--text)}
.setup-copy .install-instructions{padding-left:24px;margin:8px 0 20px;display:grid;gap:12px}
.setup-extra a{text-decoration:underline;text-underline-offset:3px;color:var(--accent)}
.setup-extra p{padding:0;margin:12px 0;color:var(--text)}