:root{color-scheme:light dark;--bg:#f4f6fa;--surface:#fff;--text:#0e1220;--muted:#596170;--line:rgba(14,18,32,.12);--accent:#b5490f;--accent-soft:#fff0e9;--shadow:0 18px 42px rgba(14,18,32,.10);--radius:18px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
:root[data-theme="dark"]{--bg:#0b0d12;--surface:#151921;--text:#f2f4f8;--muted:#b4bac5;--line:rgba(255,255,255,.14);--accent:#ff9d76;--accent-soft:#2a1d19;--shadow:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);line-height:1.55}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.wrap{width:min(1120px,calc(100% - 40px));margin:auto}.site-header{min-height:72px;display:flex;align-items:center;border-bottom:1px solid var(--line)}.nav{display:flex;align-items:center;gap:24px;width:100%}.brand{font-weight:700;text-decoration:none;font-size:1.05rem}.nav-links{margin-left:auto;display:flex;align-items:center;gap:20px}.nav-links a{color:var(--muted);font-size:.94rem;text-decoration:none}.nav-links a:hover{color:var(--text)}.theme{border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);width:36px;height:36px;cursor:pointer}.store{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:999px;background:var(--text);color:var(--bg);font-weight:650;text-decoration:none;white-space:nowrap}.store:hover{transform:translateY(-1px)}.hero{padding:clamp(64px,9vw,120px) 0 72px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:64px}.hero h1{font-size:clamp(2.7rem,6vw,5.4rem);letter-spacing:-.055em;line-height:.98;margin:0;max-width:10ch;text-wrap:balance}.hero p{color:var(--muted);font-size:1.125rem;max-width:55ch;margin:24px 0 0}.hero .cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:32px}.quiet-link{color:var(--muted);font-weight:600}.requirements{font-size:.82rem!important;margin-top:18px!important}.visual{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.windowbar{height:40px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 14px}.windowbar i{width:8px;height:8px;border-radius:50%;background:var(--line)}.mac-ui{padding:18px;display:grid;grid-template-columns:108px 1fr;gap:16px;min-height:340px}.side{border-right:1px solid var(--line);padding-right:12px}.side b,.side span{display:block}.side b{font-size:.75rem;color:var(--muted);margin:10px 0}.side span{padding:7px 8px;border-radius:7px;font-size:.78rem}.side span.active{background:var(--accent-soft);color:var(--accent);font-weight:650}.music-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.music-head b{font-size:1.1rem}.pill{font-size:.7rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 8px}.track{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.art{width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,#ff9e6d,#7c6bff)}.track strong,.track small{display:block}.track small{color:var(--muted);font-size:.78rem}.play{width:30px;height:30px;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center;font-size:.7rem}.music-visual{padding:28px;min-height:340px}.searchbox{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:var(--muted);margin-top:20px}.source-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.source{border:1px solid var(--line);padding:5px 8px;border-radius:999px;font-size:.7rem;color:var(--muted)}section{padding:80px 0}.intro{max-width:650px}.intro h2{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.04em;line-height:1.05;margin:0;text-wrap:balance}.intro p{color:var(--muted);margin:18px 0 0}.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start;border-top:1px solid var(--line);padding-top:32px;margin-top:56px}.split h3{font-size:1.25rem;margin:0}.split p,.split li{color:var(--muted)}.steps{list-style:none;padding:0;margin:0}.steps li{border-top:1px solid var(--line);padding:17px 0}.steps b{color:var(--text);display:block}.data-table{width:100%;border-collapse:collapse;margin-top:32px;font-size:.94rem}.data-table th,.data-table td{text-align:left;padding:14px 10px;border-top:1px solid var(--line);vertical-align:top}.data-table th{color:var(--muted);font-weight:550}.status{color:var(--accent);font-weight:650}.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;margin-top:40px}.faq div{padding:22px 0;border-top:1px solid var(--line)}.faq dt{font-weight:650}.faq dd{color:var(--muted);margin:8px 0 0}.callout{margin-top:48px;padding:28px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}.callout p{color:var(--muted);margin:8px 0 0}.footer{border-top:1px solid var(--line);padding:42px 0;color:var(--muted);font-size:.86rem}.footer-row{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}.footer nav{display:flex;gap:18px;flex-wrap:wrap}.footer a{color:var(--muted)}@media(max-width:760px){.wrap{width:min(100% - 32px,1120px)}.nav-links{display:none}.nav{gap:12px}.theme{margin-left:auto}.store{min-height:40px;padding:0 13px;font-size:.82rem}.hero{padding-top:64px}.hero-grid,.split{grid-template-columns:1fr;gap:36px}.hero h1{max-width:12ch}.hero p{font-size:1rem}.visual{order:2}.faq{grid-template-columns:1fr}.mac-ui{grid-template-columns:82px 1fr;padding:12px;gap:10px}.side span{font-size:.68rem;padding:6px}.music-visual{padding:18px}.data-table{font-size:.8rem}.data-table th,.data-table td{padding:11px 6px}.footer-row{flex-direction:column}.hero .cta-row{gap:16px}}
@media(prefers-reduced-motion:no-preference){.hero>*{animation:rise .55s cubic-bezier(.22,1,.36,1) both}@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}

/* Use max-width with calc instead of a nested math function: it keeps header
   and content aligned in browsers that do not resolve the nested expression. */
.wrap{width:calc(100% - 40px);max-width:1120px}
@media(max-width:760px){.wrap{width:calc(100% - 32px)}}
.hero h1{letter-spacing:-.04em}
@media(max-width:760px){.side span{font-size:.75rem}}

/* Shared navigation: the discovery pages are part of the same site, so their
   header keeps the homepage's compact, glassy treatment and its two primary
   destinations instead of inventing a separate product navigation. */
.site-header{position:sticky;top:0;z-index:100;min-height:64px;background:color-mix(in srgb,var(--bg) 84%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35)}
.site-header .nav{height:64px;max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,40px);gap:16px}
.site-header .brand{font-size:1.125rem;letter-spacing:-.01em}
.site-header .nav-links{margin-left:auto;gap:24px}
.site-header .nav-links a{font-size:.9375rem;font-weight:500;color:var(--muted)}
.site-header .theme{width:40px;height:40px;border-radius:50%;background:var(--surface);font-size:1.125rem;flex:none}
.site-header .store{min-height:40px;padding:0 11px;border-radius:7px;font-size:.72rem;letter-spacing:-.01em;flex:none}
@media(max-width:760px){.site-header .nav{padding-inline:16px}.site-header .store{min-height:38px;padding:0 9px;font-size:.68rem}}

/* Product demos on the discovery pages use the homepage's app language:
   softer device surfaces, dense native rows, spectrum artwork and restrained
   chrome. The page copy stays purpose-built for search, while the product
   surface feels like the rest of Sonement. */
.seo-page .visual{border-radius:24px;border:1px solid color-mix(in srgb,var(--line) 76%,transparent);box-shadow:0 24px 54px rgba(14,18,32,.13);background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,#fff),var(--surface));}
.seo-page .windowbar{height:34px;padding-inline:15px;background:color-mix(in srgb,var(--surface) 86%,#fff)}
.seo-page .windowbar i{width:7px;height:7px;background:color-mix(in srgb,var(--muted) 28%,transparent)}
.seo-page .mac-ui{padding:14px;gap:13px;min-height:326px;background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(230,233,241,.7))}
.seo-page .side{padding-right:10px;border-right-color:rgba(14,18,32,.1)}
.seo-page .side b{letter-spacing:.08em;font-size:.62rem}
.seo-page .side span{padding:7px 8px;border-radius:8px}
.seo-page .side span.active{background:rgba(124,107,255,.13);color:#5b53bd}
.seo-page .music-visual{padding:22px;min-height:326px;background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(236,239,247,.82))}
.seo-page .searchbox{background:rgba(255,255,255,.76);border-radius:13px;padding:12px 14px;box-shadow:0 5px 16px rgba(14,18,32,.055)}
.seo-page .source{background:rgba(255,255,255,.6);border-radius:999px}
.seo-page .track{padding:11px 0}.seo-page .art{width:48px;height:48px;border-radius:12px;background:radial-gradient(circle at 32% 29%,rgba(255,255,255,.24),transparent 25%),linear-gradient(135deg,#ff9e6d,#ff5e87 52%,#7c6bff)}
.seo-page .play{width:28px;height:28px;box-shadow:0 3px 10px rgba(14,18,32,.13)}
.seo-page.seo-tv .visual{background:radial-gradient(100% 100% at 12% 0%,rgba(122,70,42,.38),transparent 58%),linear-gradient(145deg,#171820,#07080b);color:#f2f4f8;border-color:rgba(255,255,255,.13);box-shadow:0 24px 54px rgba(0,0,0,.3)}
.seo-page.seo-tv .music-visual{background:radial-gradient(100% 100% at 12% 0%,rgba(122,70,42,.38),transparent 58%),linear-gradient(145deg,#171820,#07080b)}.seo-page.seo-tv .track,.seo-page.seo-tv .source{border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.75)}
.seo-page.seo-tv .track small{color:rgba(255,255,255,.55)}.seo-page.seo-tv .play{background:#f2f4f8;color:#11131a}
.seo-page.seo-watch .music-visual{max-width:390px;margin-inline:auto;border-radius:50px;padding:26px 24px;background:linear-gradient(160deg,#12151d,#242833);color:#f2f4f8;box-shadow:inset 0 0 0 8px #313640,0 20px 36px rgba(14,18,32,.2)}
.seo-page.seo-watch .track small,.seo-page.seo-watch .source{color:rgba(242,244,248,.62)}.seo-page.seo-watch .source{border-color:rgba(255,255,255,.16)}
:root[data-theme="dark"] .seo-page .visual{background:linear-gradient(145deg,#171b23,#0e1015);box-shadow:0 24px 54px rgba(0,0,0,.28)}
:root[data-theme="dark"] .seo-page .mac-ui,:root[data-theme="dark"] .seo-page .music-visual{background:linear-gradient(160deg,#171b23,#10131a)}
:root[data-theme="dark"] .seo-page .searchbox,:root[data-theme="dark"] .seo-page .source{background:rgba(255,255,255,.055)}

/* Actual homepage demo surfaces, embedded without screenshots or duplicated
   markup. Each is clipped to the hero canvas but remains the same HTML/CSS
   component that appears on the homepage. */
.homepage-demo-shell{position:relative;isolation:isolate;padding:0!important;min-height:340px;background:#0b0d12!important;border:0!important;overflow:hidden}
.homepage-demo{display:block;width:100%;height:100%;min-height:340px;border:0;background:transparent;pointer-events:none}
.seo-page.seo-search .homepage-demo-shell{background:var(--bg)!important}.seo-page.seo-search .homepage-demo{transform:scale(1.02);transform-origin:center}
.seo-page.seo-mac .homepage-demo-shell{background:linear-gradient(160deg,#eef0f5,#d9dde7)!important}.seo-page.seo-mac .homepage-demo{transform:scale(.92);transform-origin:center}
.seo-page.seo-tv .homepage-demo-shell{background:#08090c!important}.seo-page.seo-tv .homepage-demo{transform:scale(.98);transform-origin:center}
.seo-page.seo-watch .homepage-demo-shell{background:radial-gradient(circle at 50% 45%,#263040,#0b0d12 68%)!important}.seo-page.seo-watch .homepage-demo{transform:scale(.9);transform-origin:center}
.seo-page.seo-compare .homepage-demo-shell,.seo-page.seo-compatibility .homepage-demo-shell{background:#f4f6fa!important}.seo-page.seo-compare .homepage-demo,.seo-page.seo-compatibility .homepage-demo{transform:scale(.72);transform-origin:center}

.table-scroll{overflow-x:auto;margin-top:32px;border-bottom:1px solid var(--line)}
.table-scroll .data-table{margin-top:0}
.comparison-table{min-width:780px}
.comparison-table th:first-child{min-width:140px}
.comparison-table th:nth-child(2){min-width:180px}
.comparison-table th:nth-child(3){min-width:190px}