:root {--accent:#d61628;--accent-light:#ff8993;--background:#0b0f12;--panel:#141c22;--muted:#b1bbc6;--line:rgba(255,255,255,.14);--display:Impact,"Arial Narrow",sans-serif;--body:Arial,Helvetica,sans-serif;}
* {box-sizing:border-box;}
[hidden] {display:none !important;}
html {min-height:100%;background:var(--background);scroll-behavior:smooth;}
body {margin:0;min-height:100vh;color:#fff;background:radial-gradient(circle at 90% 0,rgba(214,22,40,.23),transparent 34rem),var(--background);font:16px/1.55 var(--body);}
a {color:inherit;}
button,input {font:inherit;}
.skip-link {position:fixed;z-index:100;top:-90px;left:16px;padding:12px 16px;color:#111;background:#fff;font-weight:700;}
.skip-link:focus {top:16px;}
.install-header {min-height:80px;padding:10px clamp(18px,5vw,72px);display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);background:rgba(11,15,18,.9);}
.install-brand {display:flex;align-items:center;gap:12px;text-decoration:none;}
.install-brand img {width:58px;height:58px;object-fit:contain;border-radius:12px;}
.install-brand span {display:grid;line-height:1.05;}
.install-brand strong {font:700 1.65rem var(--body);letter-spacing:.04em;}
.install-brand small {margin-top:6px;color:var(--muted);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.header-link {padding:10px 15px;background:var(--accent);border-radius:8px;text-decoration:none;font-weight:700;}
main {width:min(1180px,100%);margin:auto;padding:0 22px 80px;}
.install-hero {min-height:680px;padding:clamp(56px,8vw,104px) 0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);align-items:center;gap:clamp(40px,7vw,100px);}
.eyebrow {margin:0 0 14px;color:var(--accent-light);font-size:.75rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;}
h1,h2,h3 {margin-top:0;font-family:var(--display);font-weight:400;line-height:.97;text-transform:uppercase;}
h1 {max-width:760px;margin-bottom:24px;font-size:clamp(4.2rem,7vw,6.3rem);letter-spacing:-.025em;}
.lead {max-width:720px;margin:0;color:var(--muted);font-size:clamp(1rem,2vw,1.18rem);}
.primary-actions {margin-top:32px;display:flex;flex-wrap:wrap;gap:12px;}
.primary-button,.secondary-button {min-height:54px;padding:13px 21px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;text-decoration:none;font-weight:700;cursor:pointer;}
.primary-button {color:#fff;background:var(--accent);border:2px solid var(--accent);}
.secondary-button {color:#fff;background:transparent;border:2px solid rgba(255,255,255,.36);}
.primary-button:hover,.header-link:hover,.share-link button:hover {background:#b90f20;}
.secondary-button:hover {background:rgba(255,255,255,.07);}
button:disabled {opacity:.6;cursor:wait;}
.action-message {min-height:1.5em;margin:12px 0 0;color:#ffbac1;font-size:.9rem;}
.qr-card {margin:0;padding:24px;color:#111827;background:#fff;border-radius:22px;box-shadow:0 28px 70px rgba(0,0,0,.3);}
.qr-card img {width:100%;height:auto;display:block;}
.qr-card figcaption {padding:14px 4px 12px;display:grid;text-align:center;}
.qr-card figcaption strong {font-size:1rem;}
.qr-card figcaption span {margin-top:4px;color:#536071;font-size:.82rem;}
.qr-card>a {display:block;padding:11px;text-align:center;border:1px solid #d9dee5;border-radius:8px;font-size:.88rem;font-weight:700;text-decoration:none;}
.device-guide {padding:clamp(60px,8vw,100px) 0;border-top:1px solid var(--line);}
.guide-heading {margin-bottom:34px;}
.guide-heading h2,.share-panel h2 {margin-bottom:0;font-size:clamp(3.2rem,6vw,5.8rem);}
.guide-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.guide-card {padding:clamp(26px,4vw,42px);background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:16px;}
.guide-card.suggested {border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.device-label {color:var(--accent-light);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.guide-card h3 {margin:12px 0 26px;font-size:clamp(2.4rem,4vw,4rem);}
.guide-card ol {margin:0;padding:0;display:grid;gap:14px;list-style:none;}
.guide-card li {min-height:70px;padding:14px;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:13px;background:rgba(255,255,255,.045);border-radius:10px;}
.guide-card li b {width:42px;height:42px;display:grid;place-items:center;background:var(--accent);border-radius:50%;font-size:1.2rem;}
.guide-card li span {color:#d9e0e9;}
.share-panel {margin-top:18px;padding:clamp(28px,5vw,54px);display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:40px;background:linear-gradient(135deg,rgba(214,22,40,.18),rgba(255,255,255,.04));border:1px solid rgba(214,22,40,.4);border-radius:18px;}
.share-panel p:last-child {margin-bottom:0;color:var(--muted);}
.share-link {display:grid;grid-template-columns:1fr auto;gap:8px;}
.share-link input {min-width:0;width:100%;padding:14px 15px;color:#111827;background:#fff;border:0;border-radius:8px;}
.share-link button {padding:12px 18px;color:#fff;background:var(--accent);border:0;border-radius:8px;font-weight:700;cursor:pointer;}
footer {min-height:110px;padding:28px clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--muted);border-top:1px solid var(--line);font-size:.85rem;}
footer a {color:#fff;font-weight:700;}
button:focus-visible,a:focus-visible,input:focus-visible {outline:3px solid #fff;outline-offset:4px;}
.qr-card a:focus-visible {outline-color:var(--accent);}
@media (max-width:800px) {.install-hero {grid-template-columns:1fr;min-height:0;}.qr-card {width:min(420px,100%);justify-self:center;}.guide-grid,.share-panel {grid-template-columns:1fr;}}
@media (max-width:520px) {main {padding-inline:16px;}.install-brand small {display:none;}.install-brand img {width:52px;height:52px;}.header-link {font-size:.85rem;}.install-hero {padding-top:46px;}h1 {font-size:clamp(3.7rem,17vw,6rem);}.primary-actions {flex-direction:column;}.primary-button,.secondary-button {width:100%;}.share-link {grid-template-columns:1fr;}footer {align-items:flex-start;flex-direction:column;}}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto;}}
