:root { --ink:#191a1d; --muted:#62656b; --paper:#f4f1eb; --panel:#fffdf9; --line:#d8d3ca; --blue:#007aff; --purple:#7056db; --shadow:0 24px 70px #302d2617; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; line-height:1.45; }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.shell { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
.skip-link { position:absolute; left:12px; top:-56px; background:var(--ink); color:white; padding:10px 14px; border-radius:8px; z-index:10; }
.skip-link:focus { top:12px; }
.topbar { min-height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-size:.78rem; color:var(--muted); letter-spacing:.04em; }
.wordmark { color:var(--ink); text-decoration:none; font-size:1rem; font-weight:750; letter-spacing:-.04em; }
.wordmark span { color:var(--blue); font-size:1.45rem; vertical-align:-.1em; }
.topbar p { margin:0; }
.hero { display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(36px,7vw,96px); padding:clamp(70px,12vw,148px) 0 120px; align-items:center; }
.eyebrow { margin:0 0 16px; color:var(--muted); font-size:.68rem; font-weight:760; letter-spacing:.13em; }
.eyebrow span { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px #007aff1a; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:620px; margin-bottom:23px; font-size:clamp(3.2rem,6.2vw,6rem); letter-spacing:-.075em; line-height:.9; }
h1 em { color:var(--blue); font-style:normal; }
.lede { max-width:470px; margin-bottom:31px; color:var(--muted); font-size:1.08rem; line-height:1.65; }
.button { display:inline-flex; gap:20px; align-items:center; background:var(--ink); color:#fff; border-radius:999px; padding:14px 20px; text-decoration:none; font-weight:700; font-size:.9rem; transition:transform .2s,background .2s; }
.button:hover { background:var(--blue); transform:translateY(-2px); }
.button span { font-size:1.2rem; }
.menu-window { overflow:hidden; border:1px solid #d7d8dd; border-radius:20px; background:#f7f8fa; box-shadow:var(--shadow); color:#25272e; }
.window-top { height:40px; display:flex; align-items:center; gap:7px; padding:0 15px; border-bottom:1px solid #dfe1e5; background:#fff; font-size:.67rem; color:#737780; }
.window-top i { width:9px; height:9px; border-radius:50%; background:#ff5f57; }.window-top i:nth-child(2){background:#ffbd2e}.window-top i:nth-child(3){background:#28c840}.window-top span{margin-left:8px}
.sound-tile { display:flex; align-items:center; gap:14px; margin:14px; padding:15px; border-radius:13px; background:#e7f1ff; }
.sound-tile small,.sound-tile strong { display:block; }.sound-tile small { color:#657287; font-size:.67rem; }.sound-tile strong{font-size:.92rem}.chevron{margin-left:auto;font-size:1.7rem;color:#54708d}
.speaker { position:relative; width:30px; height:30px; border-radius:9px; background:#007aff; }.speaker b { position:absolute; left:7px; top:10px; width:7px; height:10px; background:#fff; }.speaker b:after{content:"";position:absolute;left:6px;top:-5px;border-style:solid;border-width:10px 9px 10px 0;border-color:transparent #fff transparent transparent;transform:rotate(180deg)}.speaker i{position:absolute;border:2px solid #fff;border-left:0;border-top-color:transparent;border-bottom-color:transparent;border-radius:50%;}.speaker i:nth-of-type(1){width:11px;height:15px;right:3px;top:8px}.speaker i:nth-of-type(2){width:16px;height:21px;right:-2px;top:5px;opacity:.7}
.volume{display:flex;align-items:center;gap:10px;margin:19px 29px 24px;color:#858b96;font-size:.65rem}.volume div{height:4px;flex:1;border-radius:99px;background:#d9dce2}.volume b{display:block;width:62%;height:100%;border-radius:inherit;background:#007aff}
.devices{padding:16px 17px 19px;background:#fff;border-top:1px solid #e3e4e7}.devices p{margin:0 0 8px;color:#838790;font-size:.6rem;font-weight:700;letter-spacing:.11em}.device{display:block;width:100%;padding:8px;border:0;background:transparent;text-align:left;font-size:.82rem;color:#4d5057;border-radius:7px}.device:hover{background:#f1f5fb}.device span{display:inline-block;width:20px;color:var(--blue);font-weight:800}
.mode-section { padding:92px 0 98px; color:white; background:#191a1d; }.section-title h2 { max-width:720px; margin-bottom:31px; font-size:clamp(2rem,4.4vw,4rem); letter-spacing:-.065em; line-height:.98; }.mode-section .eyebrow{color:#afb1b5}.mode-section .eyebrow span{background:#b19cff;box-shadow:0 0 0 4px #b19cff2e}
.mode-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mode{min-height:126px;padding:22px;border:1px solid #404146;background:#222328;color:#cacbd0;text-align:left;border-radius:14px;transition:background .2s,border-color .2s,transform .2s}.mode b{display:block;margin-bottom:7px;font-size:1.15rem;color:white}.mode small{font-size:.78rem}.mode:hover{transform:translateY(-3px);border-color:#777981}.mode.selected{background:#edf2ff;border-color:#edf2ff;color:#4c5060}.mode.selected b{color:#171b27}.mode-answer{margin:20px 0 0;font-size:1.04rem}.mode-answer b{color:#b19cff}.fine-print{max-width:670px;margin:28px 0 0;color:#94969e;font-size:.75rem;line-height:1.6}
.steps{padding:105px 0}.steps ol{margin:45px 0 25px;padding:0;list-style:none;border-top:1px solid var(--line)}.steps li{display:grid;grid-template-columns:95px 1fr;gap:25px;padding:28px 0;border-bottom:1px solid var(--line)}.steps li>span{font-size:.78rem;font-weight:800;color:var(--blue);letter-spacing:.08em}.steps h3{margin-bottom:7px;font-size:1.18rem;letter-spacing:-.03em}.steps p{margin:0;color:var(--muted)}.tip{display:flex;gap:16px;padding:20px;background:#e5eefc;border-radius:12px;max-width:760px}.tip>span{width:25px;height:25px;display:grid;place-content:center;flex:0 0 auto;background:var(--blue);border-radius:50%;color:white}.tip p{margin:0;color:#465368;font-size:.91rem}
.routes{padding:96px 0 108px;background:#e7e4de}.subhead{max-width:570px;color:var(--muted);font-size:1rem}.route-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:39px}.route-card{min-height:345px;padding:30px;border-radius:17px;background:var(--panel);box-shadow:0 2px #00000006}.route-card.airpods{border-top:5px solid #8f79ed}.route-card.hyperx{border-top:5px solid #ef7e39}.card-icon{width:44px;height:44px;display:grid;place-items:center;margin-bottom:31px;border-radius:13px;background:#ede8ff;color:#604bbb;font-size:1.25rem}.hyperx .card-icon{background:#ffeadc;color:#c45c1f}.route-card>p{margin-bottom:8px;color:var(--muted);font-size:.65rem;font-weight:750;letter-spacing:.12em}.route-card h3{margin-bottom:18px;font-size:1.75rem;letter-spacing:-.06em}.route-card ul{min-height:120px;margin:0 0 26px;padding-left:18px;color:#5d6067;font-size:.88rem;line-height:1.65}.route-card a{color:#343b4b;font-size:.82rem;font-weight:750;text-decoration-color:#a9c5ff;text-underline-offset:4px}.route-card a span{color:var(--blue)}
.checklist{display:grid;grid-template-columns:.9fr 1.1fr;column-gap:64px;row-gap:28px;padding:110px 0}.checklist>div>p:not(.eyebrow){max-width:350px;color:var(--muted)}.checklist form{display:grid;gap:2px}.checklist label{position:relative;display:flex;align-items:center;gap:13px;padding:15px 0;border-bottom:1px solid var(--line);font-size:.94rem;cursor:pointer}.checklist input{position:absolute;opacity:0}.checklist label span{width:22px;height:22px;display:grid;place-items:center;border:1px solid #b6b4b1;border-radius:7px;transition:background .16s,border-color .16s}.checklist input:checked+span{background:var(--blue);border-color:var(--blue)}.checklist input:checked+span:after{content:"✓";color:#fff;font-size:.8rem;font-weight:800}.reset{grid-column:2;justify-self:start;border:0;background:transparent;padding:0;color:#5e6270;text-decoration:underline;text-underline-offset:3px;font-size:.8rem}.reset:hover{color:var(--blue)}
footer{display:flex;justify-content:space-between;gap:24px;padding:25px 0 38px;border-top:1px solid var(--line);color:var(--muted);font-size:.73rem}footer p{margin:0}footer a{text-underline-offset:3px}
:focus-visible{outline:3px solid #006fe6;outline-offset:3px}
@media(max-width:700px){.shell{width:min(100% - 32px,1120px)}.topbar{min-height:63px}.topbar p{display:none}.hero{grid-template-columns:1fr;padding:65px 0 74px;gap:48px}.menu-window{max-width:440px}.mode-section{padding:70px 0}.mode-picker{grid-template-columns:1fr}.mode{min-height:88px}.steps,.checklist{padding:72px 0}.steps li{grid-template-columns:52px 1fr;gap:12px}.route-grid{grid-template-columns:1fr}.route-card{min-height:0}.checklist{grid-template-columns:1fr}.reset{grid-column:auto}footer{display:block}footer p+p{margin-top:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}