:root { --ink:#0b1220; --muted:#5b6678; --line:#dce4ef; --blue:#1769ff; --blue-dark:#0d47b5; --pale:#eef5ff; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--white); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; overflow-x:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.08; letter-spacing:-.035em; }
.container { width:min(1160px,calc(100% - 40px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(11,18,32,.92); color:#fff; border-bottom:1px solid rgba(255,255,255,.12); backdrop-filter:blur(18px); }
.nav-wrap { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:.96rem; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; overflow:hidden; border-radius:9px; background:#202428; box-shadow:0 0 0 1px rgba(255,255,255,.16); }
.brand-mark img { width:100%; height:100%; object-fit:cover; }
.site-nav { display:flex; align-items:center; gap:28px; color:#bdc7d8; font-size:.87rem; font-weight:650; }
.site-nav a:hover { color:#fff; }
.menu-toggle { display:none; min-height:40px; border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:0 13px; color:#fff; background:rgba(255,255,255,.08); font:inherit; font-weight:700; }
.hero { color:#fff; background:radial-gradient(circle at 78% 40%,rgba(23,105,255,.28),transparent 30rem),linear-gradient(135deg,#0b1220 0%,#111d32 100%); padding:clamp(68px,9vw,116px) 0 92px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr); align-items:center; gap:clamp(36px,7vw,90px); }
.hero-copy { max-width:630px; }
.hero h1 { max-width:11ch; font-size:clamp(2.7rem,6.2vw,5.25rem); font-weight:850; }
.hero-lead { margin-top:24px; max-width:560px; color:#cbd5e5; font-size:clamp(1.05rem,1.6vw,1.22rem); }
.hero-actions { margin-top:34px; display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 19px; border-radius:10px; font-size:.91rem; font-weight:800; transition:transform .18s ease,background .18s ease,box-shadow .18s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#fff; background:var(--blue); box-shadow:0 16px 32px rgba(23,105,255,.26); }
.button-primary:hover { background:#2c7aff; }
.button-dark { color:#fff; background:var(--ink); }
.text-link { color:#d8e4f7; font-size:.92rem; font-weight:750; }
.text-link:hover { color:#fff; }
.hero-note { margin-top:22px; color:#8fa1ba; font-size:.83rem; }
.app-store-badge { display:block; width:190px; }
.app-store-badge img { width:100%; height:auto; }
.hero-devices { min-height:470px; position:relative; display:flex; align-items:center; justify-content:center; padding:12px 25px; }
.phone { position:relative; z-index:1; overflow:hidden; width:min(245px,34vw); aspect-ratio:9/19.5; padding:4px; border:7px solid #313943; border-radius:34px; background:#0b0d10; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 35px 70px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.22); }
.phone img { width:100%; height:100%; object-fit:cover; }
.phone:before { content:""; position:absolute; z-index:3; top:9px; left:50%; width:74px; height:22px; transform:translateX(-50%); border-radius:0 0 14px 14px; background:#050608; box-shadow:0 1px 0 rgba(255,255,255,.12); pointer-events:none; }
.phone-front { z-index:2; transform:translate(30px,20px) rotate(3deg); }
.phone-back { transform:translate(-22px,-28px) rotate(-8deg); opacity:.95; }
.wifi-orbit { position:absolute; right:3%; bottom:8%; width:112px; height:112px; display:grid; place-items:center; border:1px solid rgba(109,169,255,.4); border-radius:50%; color:#a9caff; font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:rgba(23,105,255,.13); }
.wifi-orbit:before,.wifi-orbit:after { content:""; position:absolute; border:1px solid rgba(109,169,255,.28); border-radius:50%; }
.wifi-orbit:before { inset:13px; }.wifi-orbit:after { inset:27px; }
.section-light { background:#fff; }
.problem-solution { padding:clamp(74px,10vw,128px) 0; }
.two-column { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(40px,9vw,120px); }
.section-kicker { color:var(--blue); font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.problem-solution h2,.screens h2,.compatibility h2,.final-cta h2 { margin-top:15px; max-width:12ch; font-size:clamp(2.15rem,4vw,3.5rem); }
.solution-list { border-top:1px solid var(--line); }
.solution-list article { display:grid; grid-template-columns:40px 1fr; gap:17px; padding:22px 0; border-bottom:1px solid var(--line); }
.icon { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:var(--blue); background:var(--pale); font-size:1.35rem; font-weight:800; }
.solution-list h3,.feature-row h3,.steps h3 { font-size:1.03rem; letter-spacing:-.02em; }.solution-list p,.feature-row p,.steps p,.screens p,.check-list,.faq p { margin-top:5px; color:var(--muted); font-size:.93rem; }
.feature-band { padding:90px 0 94px; background:var(--pale); }
.section-heading.centered { text-align:center; }.section-heading h2 { margin:14px auto 0; font-size:clamp(2rem,4vw,3.1rem); }.feature-row { margin-top:58px; display:grid; grid-template-columns:repeat(4,1fr); }.feature-row article { padding:0 24px; border-right:1px solid #cbd9ee; }.feature-row article:first-child { padding-left:0; }.feature-row article:last-child { padding-right:0; border-right:0; }.feature-symbol { display:block; margin-bottom:17px; color:var(--blue); font-size:1.85rem; font-weight:800; }
.screens { padding:clamp(76px,10vw,132px) 0; }.screens-grid { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); align-items:center; gap:clamp(36px,7vw,96px); }.screens h2 { max-width:10ch; }.screens p { max-width:42ch; margin:24px 0 30px; font-size:1.02rem; }.screenshot-rail { display:flex; justify-content:center; align-items:flex-end; gap:15px; }.screenshot-rail figure { width:31%; margin:0; }.screenshot-rail figure:nth-child(2) { transform:translateY(-24px); }.screenshot-rail img { border-radius:25px; background:#111820; box-shadow:0 20px 45px rgba(11,18,32,.17); }.screenshot-rail figcaption { margin-top:12px; color:var(--muted); font-size:.78rem; text-align:center; }
.how-it-works { padding:90px 0 100px; background:#f9fbff; border-top:1px solid #edf2f8; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:58px; }.steps article { position:relative; padding-top:56px; }.steps article:not(:last-child):after { content:""; position:absolute; top:22px; left:60px; width:calc(100% - 20px); border-top:1px dashed #b5c8e4; }.step-number { position:absolute; top:0; left:0; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--blue); font-weight:800; }
.compatibility { padding:clamp(72px,9vw,112px) 0; background:#edf5ff; }.compatibility-grid { display:grid; grid-template-columns:minmax(0,1fr) 370px; align-items:center; gap:80px; }.compatibility h2 { max-width:15ch; }.check-list { padding:0; list-style:none; max-width:570px; margin-top:28px; }.check-list li { position:relative; padding-left:28px; margin-top:14px; color:#36445a; }.check-list li:before { content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:900; }.tv-illustration { margin:0; position:relative; min-height:240px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#111315; box-shadow:0 25px 50px rgba(0,0,0,.28); }.tv-illustration img { width:100%; height:100%; min-height:240px; object-fit:cover; }
.faq { padding:clamp(76px,10vw,120px) 0; }.faq-wrap { max-width:900px; }.faq details { border-bottom:1px solid var(--line); }.faq details:first-of-type { margin-top:47px; border-top:1px solid var(--line); }.faq summary { cursor:pointer; list-style:none; padding:20px 42px 20px 0; position:relative; font-weight:750; }.faq summary::-webkit-details-marker { display:none; }.faq summary:after { content:"+"; position:absolute; right:4px; color:var(--blue); font-size:1.45rem; font-weight:400; }.faq details[open] summary:after { content:"−"; }.faq details p { padding:0 42px 20px 0; max-width:700px; }
.final-cta { padding:36px 0; background:var(--ink); color:#fff; }.final-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:36px; }.final-cta h2 { max-width:17ch; font-size:clamp(1.85rem,3.6vw,3rem); }.final-cta .section-kicker { color:#77a9ff; }.final-cta .button { flex:0 0 auto; }.site-footer { background:#070c15; color:#91a0b7; font-size:.82rem; }.footer-inner { min-height:74px; display:flex; align-items:center; gap:24px; }.footer-inner p { margin-right:auto; }.footer-inner a:hover { color:#fff; }
@media (max-width:900px) { .hero-grid,.two-column,.screens-grid,.compatibility-grid { grid-template-columns:1fr; }.hero-copy { max-width:700px; }.hero h1 { max-width:12ch; }.hero-devices { min-height:430px; max-width:600px; }.problem-solution h2,.screens h2,.compatibility h2 { max-width:16ch; }.feature-row { grid-template-columns:repeat(2,1fr); gap:30px 0; }.feature-row article:nth-child(2) { border-right:0; }.feature-row article:nth-child(3) { padding-left:0; }.feature-row article:nth-child(4) { padding-right:0; }.compatibility-grid { gap:35px; }.tv-illustration { min-height:220px; } }
@media (max-width:640px) { .container { width:min(100% - 28px,560px); }.nav-wrap { min-height:64px; }.site-nav { display:none; position:absolute; top:64px; left:14px; right:14px; padding:8px; flex-direction:column; align-items:stretch; gap:0; background:#111d32; border:1px solid rgba(255,255,255,.14); border-radius:10px; box-shadow:0 15px 35px rgba(0,0,0,.25); }.site-nav.is-open { display:flex; }.site-nav a { padding:12px; }.menu-toggle { display:block; }.hero { padding-top:58px; }.hero h1 { font-size:clamp(2.45rem,13vw,3.5rem); }.hero-actions { align-items:stretch; flex-direction:column; gap:15px; }.button { width:100%; }.text-link { text-align:center; }.hero-devices { min-height:350px; padding:0; }.phone { width:42vw; border-width:5px; border-radius:25px; }.phone-front { transform:translate(15px,12px) rotate(3deg); }.phone-back { transform:translate(-12px,-17px) rotate(-8deg); }.wifi-orbit { right:0; bottom:2%; width:82px; height:82px; font-size:.64rem; }.problem-solution,.screens,.faq { padding:72px 0; }.feature-band,.how-it-works { padding:72px 0; }.feature-row { grid-template-columns:1fr; gap:0; margin-top:38px; }.feature-row article,.feature-row article:nth-child(3) { padding:22px 0; border-right:0; border-bottom:1px solid #cbd9ee; }.feature-row article:last-child { border-bottom:0; }.screens-grid { gap:48px; }.screenshot-rail { gap:8px; }.screenshot-rail figure:nth-child(2) { transform:translateY(-14px); }.screenshot-rail figcaption { font-size:.69rem; }.steps { grid-template-columns:1fr; gap:30px; margin-top:42px; }.steps article:not(:last-child):after { display:none; }.compatibility-grid { gap:25px; }.tv-screen { width:270px; height:165px; }.final-cta-inner { align-items:stretch; flex-direction:column; gap:25px; }.footer-inner { min-height:0; padding:22px 0; flex-wrap:wrap; gap:13px 20px; }.footer-inner p { width:100%; margin-right:0; } }

/* Keep this campaign page visually consistent with remote-control/style.css. */
:root { --ink:#f8fafc; --muted:#aab0b7; --line:rgba(255,255,255,.11); --blue:#ff393f; --blue-dark:#c92c32; --pale:#202428; --white:#111315; }
body { color:var(--ink); background:radial-gradient(circle at 82% 8%,rgba(255,57,63,.16),transparent 28rem),linear-gradient(180deg,#111315 0%,#15181b 46%,#101214 100%); }
.site-header { background:rgba(17,19,21,.86); }
.hero { background:radial-gradient(circle at 82% 8%,rgba(255,57,63,.16),transparent 28rem),linear-gradient(135deg,#111315 0%,#171a1d 100%); }
.button-primary { box-shadow:0 16px 32px rgba(255,57,63,.24); }
.final-cta .section-kicker { color:#ff7b80; }
.section-light { background:#15181b; color:var(--ink); }
.feature-band { background:#202428; }
.how-it-works { background:#171a1d; border-top-color:var(--line); }
.compatibility { background:#202428; }
.final-cta { background:#0d0f10; }
.button-dark { color:#fff; background:var(--accent, #ff393f); }
.solution-list p,.feature-row p,.steps p,.screens p,.faq p { color:var(--muted); }
.check-list li { color:#c4c9cf; }
.tv-illustration span,.screenshot-rail figcaption { color:var(--dim, #767e88); }
.feature-row article { border-right-color:var(--line); }
.feature-row article,.feature-row article:nth-child(3) { border-bottom-color:var(--line); }
.faq details { border-color:var(--line); }
.faq details:first-of-type { border-top-color:var(--line); }
.faq summary { color:var(--text, #f8fafc); }
.site-nav { color:#aab0b7; }
@media (max-width:640px) { .site-nav { background:#171a1d; } }
.screenshot-rail { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); }
.screenshot-rail figure { width:auto; }
.screens-grid { display:block; }
.screen-copy { max-width:620px; margin-bottom:48px; }
@media (max-width:900px) { .screenshot-rail { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px) { .screenshot-rail { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (max-width:640px) {
  .screenshot-rail {
    align-items: start;
  }

  /* Keep the most useful controls together in the first mobile row. */
  .screenshot-rail figure:nth-child(2) { order: 1; }
  .screenshot-rail figure:nth-child(3) { order: 2; }
  .screenshot-rail figure:nth-child(4) { order: 3; }
  .screenshot-rail figure:nth-child(1) { order: 4; }
  .screenshot-rail figure:nth-child(5) { order: 5; }
  .screenshot-rail figure:nth-child(6) { order: 6; }
}

.breadcrumb { color:#8f969f; background:#111315; border-bottom:1px solid var(--line); font-size:.78rem; }
.breadcrumb .container { min-height:42px; display:flex; align-items:center; gap:9px; }
.breadcrumb a { color:#d9dde2; }
.breadcrumb a:hover { color:#fff; }
.content-meta { margin-top:10px; color:#767e88; font-size:.75rem; }
.answer-box { margin-top:28px; padding:20px; color:#c9ced5; background:#202428; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:10px; font-size:.95rem; }
.answer-box strong { display:block; margin-bottom:8px; color:#fff; font-size:1rem; }
.comparison { padding:clamp(76px,9vw,112px) 0; }
.comparison .section-heading > p:last-child { max-width:760px; margin:20px auto 0; color:var(--muted); }
.comparison-table-wrap { margin-top:44px; overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:#171a1d; }
.comparison table { width:100%; min-width:680px; border-collapse:collapse; text-align:left; }
.comparison th,.comparison td { padding:17px 20px; border-bottom:1px solid var(--line); vertical-align:top; }
.comparison thead th { color:#fff; background:#202428; font-size:.82rem; letter-spacing:.02em; }
.comparison tbody th { width:19%; color:#fff; font-size:.86rem; }
.comparison tbody td { color:var(--muted); font-size:.86rem; }
.comparison tbody tr:last-child th,.comparison tbody tr:last-child td { border-bottom:0; }

@media (max-width:640px) {
  .breadcrumb .container { min-height:38px; }
  .content-meta { line-height:1.45; }
  .answer-box { padding:17px; }
  .comparison { padding:72px 0; }
  .comparison-table-wrap { margin-top:32px; }
}
:root[data-theme="light"] { --ink:#172033; --muted:#5c6879; --line:#dce4ef; --blue:#1769ff; --blue-dark:#0d47b5; --pale:#eef5ff; --white:#ffffff; --theme-control-bg:rgba(23,32,51,.06); }
:root[data-theme="light"] body { background:#f7f9fc; color:var(--ink); }
:root[data-theme="light"] .site-header { background:rgba(255,255,255,.9); }
:root[data-theme="light"] .hero { background:linear-gradient(135deg,#ffffff 0%,#eef5ff 100%); }
:root[data-theme="light"] .section-light { background:#fff; color:var(--ink); }
:root[data-theme="light"] .feature-band, :root[data-theme="light"] .compatibility { background:#eef5ff; }
:root[data-theme="light"] .how-it-works { background:#f7f9fc; }
:root[data-theme="light"] .final-cta { background:#172033; }