.download-page { --device-surface:var(--surface); --device-ink:var(--ink); }
.download-hero { display:grid; grid-template-columns:1fr 1.04fr; gap:30px; align-items:center; padding-block:66px 71px; }
.download-hero-copy { min-width:0; }
.download-hero h1 { font-size:clamp(39px,4.3vw,57px); line-height:1.15; letter-spacing:-.06em; margin:18px 0 22px; }
.download-hero h1>span { color:var(--brand); }
.download-hero-copy>p { font-size:15px; color:var(--muted); line-height:1.9; }
.download-available { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; margin-top:25px; }
.download-available>i { width:6px; height:6px; background:#7caa8d; border-radius:50%; }
.download-page .download-actions { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:11px; flex-wrap:wrap; margin:14px 0 0; }
.download-actions .button { min-height:53px; font-size:13px; padding-inline:21px; gap:18px; }
.download-qr-toggle { display:flex; gap:7px; align-items:center; justify-content:center; min-height:50px; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:12px; padding:0 14px; font-size:12px; transition:background .2s,border-color .2s; }
.download-qr-toggle:hover,.download-qr-toggle[aria-expanded=true] { background:var(--lavender); border-color:color-mix(in srgb,var(--brand) 30%,var(--line)); }
.download-qr-toggle .icon { width:17px; height:17px; }
.download-link { display:flex; align-items:center; gap:10px; margin-top:14px; min-height:36px; }
.download-link>span { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); }
.download-link>span>.icon { width:13px; height:13px; }
.download-link>button { display:grid; place-items:center; width:44px; height:44px; border:1px solid transparent; border-radius:9px; color:var(--muted); background:transparent; }
.download-link>button:hover { color:var(--brand); background:var(--lavender); border-color:var(--line); }
.download-link>button>.icon { width:15px; height:15px; }
.download-hero-copy>.download-action-status { font-size:10px; min-height:20px; line-height:1.6; color:var(--brand); margin:1px 0 0; }
.download-qr { display:flex; align-items:center; gap:17px; padding:17px; border:1px solid var(--line); border-radius:17px; background:var(--surface); margin-top:10px; max-width:414px; animation:download-panel-in .3s ease-out; }
.download-qr-code { flex-shrink:0; width:110px; background:white; border-radius:9px; overflow:hidden; }
.download-qr-code>svg { display:block; width:100%; height:auto; }
.download-qr strong { font-size:12px; }
.download-qr p { color:var(--muted); font-size:11px; line-height:1.8; margin:7px 0; }
.download-qr>div>span { font-size:9px; color:var(--brand); }
.download-device-stage { min-width:0; height:439px; position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; user-select:none; -webkit-user-select:none; }
.download-device-stage * { user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
.download-device-orbit { position:absolute; inset:38px 27px 29px; z-index:-1; border-radius:50%; background:color-mix(in srgb,var(--lavender) 70%,var(--bg)); transform:rotate(-8deg); }
.download-device-orbit:after { content:''; position:absolute; inset:-9px; border:1px solid color-mix(in srgb,var(--brand) 12%,var(--line)); border-radius:inherit; }
.web-device { width:calc(100% - 52px); height:278px; border:1px solid color-mix(in srgb,var(--ink) 30%,var(--line)); border-radius:14px; background:var(--surface); transform:translate(-8px,-12px) rotate(-5deg); box-shadow:0 22px 39px -25px #28223866; overflow:hidden; }
.web-device-toolbar { display:flex; align-items:center; height:31px; border-bottom:1px solid var(--line); background:var(--soft); padding-inline:12px; gap:12px; }
.web-device-toolbar>span { display:flex; gap:4px; }
.web-device-toolbar i { width:4px; height:4px; border-radius:50%; background:var(--muted); opacity:.4; }
.web-device-toolbar>b { color:var(--muted); font-size:8px; font-weight:400; flex:1; text-align:center; padding-right:20px; }
.web-device-app { display:flex; height:calc(100% - 31px); }
.web-device-rail { width:78px; padding:16px 11px; background:var(--soft); border-right:1px solid var(--line); flex-shrink:0; }
.web-device-rail>img { width:27px; height:27px; margin-bottom:21px; }
.web-device-rail>i { display:block; height:23px; background:var(--line); border-radius:6px; margin-bottom:10px; opacity:.5; }
.web-device-rail>i:nth-of-type(2) { background:var(--brand); opacity:.3; }
.web-device-chat { display:flex; flex-direction:column; align-items:flex-start; gap:11px; position:relative; padding:13px 13px 40px; flex:1; min-width:0; }
.web-device-title { display:flex; flex-direction:column; gap:4px; }
.web-device-title>span { font-size:10px; font-weight:600; }
.web-device-title>small { color:var(--muted); font-size:7px; }
.web-device-day { align-self:center; padding:3px 7px; border-radius:9px; background:var(--soft); color:var(--muted); font-size:6px; }
.web-device-message { padding:9px 10px 5px; border:1px solid var(--line); border-radius:10px 10px 10px 3px; font-size:9px; background:var(--soft); }
.web-device-message>b { display:block; color:var(--brand); font-size:7px; margin-bottom:4px; }
.web-device-message>small { display:block; color:var(--muted); text-align:right; font-size:6px; margin-top:5px; }
.web-device-reply { align-self:flex-end; background:#7162df; border-color:#8476e5; color:#fff; border-radius:10px 10px 3px 10px; }
.web-device-reply>small { color:#e5ddff; }
.web-device-input { position:absolute; bottom:11px; left:12px; right:12px; height:27px; border-radius:10px; padding:0 8px; display:flex; align-items:center; gap:6px; background:var(--soft); color:var(--muted); border:1px solid var(--line); }
.web-device-input>span { font-size:7px; flex:1; }
.web-device-input>.icon { width:12px; height:12px; }
.web-device-input>.icon:last-child { color:var(--brand); }
.mobile-device { position:absolute; width:135px; height:267px; right:23px; bottom:18px; border:4px solid #34313d; outline:1px solid #bdbac5; border-radius:25px; background:var(--surface); box-shadow:0 17px 30px -20px #17122299; transform:rotate(8deg); padding:22px 8px 34px; overflow:hidden; display:flex; align-items:flex-start; flex-direction:column; gap:12px; }
.mobile-device-camera { position:absolute; left:calc(50% - 18px); top:5px; width:36px; height:10px; border-radius:10px; background:#17151b; }
.mobile-device-header { display:flex; align-items:center; gap:5px; border-bottom:1px solid var(--line); padding-bottom:9px; width:100%; }
.mobile-device-header>img { width:20px; height:20px; border-radius:7px; padding:1px; background:#8173dd; }
.mobile-device-header>strong { font-size:7px; }
.mobile-device-day { align-self:center; color:var(--muted); font-size:6px; }
.mobile-device-message { background:var(--soft); border:1px solid var(--line); border-radius:8px 8px 8px 2px; font-size:7px; padding:10px 7px; }
.mobile-device-reply { align-self:flex-end; color:#fff; background:#7162df; border-color:#8476e5; border-radius:8px 8px 2px 8px; }
.mobile-device-compose { position:absolute; display:flex; align-items:center; justify-content:space-between; bottom:17px; left:8px; right:8px; height:25px; border-radius:12px; border:1px solid var(--line); padding-inline:7px; color:var(--muted); background:var(--soft); }
.mobile-device-compose>span { font-size:6px; }
.mobile-device-compose>.icon { width:11px; height:11px; color:var(--brand); }
.mobile-device-home { position:absolute; bottom:6px; left:calc(50% - 19px); width:38px; height:3px; border-radius:3px; background:var(--muted); }
.download-start { padding-block:28px 60px; }
.download-start-heading { display:flex; justify-content:space-between; gap:32px; align-items:flex-end; margin-bottom:28px; }
.download-start h2 { font-size:32px; line-height:1.3; margin-top:12px; }
.download-start-choices { display:flex; gap:4px; border:1px solid var(--line); border-radius:12px; padding:4px; flex-shrink:0; }
.download-start-choices>button { display:flex; align-items:center; gap:7px; min-height:40px; padding-inline:12px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); font-size:11px; }
.download-start-choices>button[aria-pressed=true] { background:var(--lavender); color:var(--brand); border-color:color-mix(in srgb,var(--brand) 14%,transparent); }
.download-start-choices .icon { width:16px; height:16px; }
.download-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:0; border:1px solid var(--line); border-radius:21px; background:var(--surface); overflow:hidden; min-height:202px; animation:download-panel-in .35s ease-out; }
.download-steps>li { padding:26px; }
.download-steps>li+li { border-left:1px solid var(--line); }
.download-step-number { display:block; font-size:10px; font-variant-numeric:tabular-nums; color:var(--brand); margin-bottom:23px; }
.download-steps h3 { font-size:17px; line-height:1.4; letter-spacing:-.025em; margin-bottom:10px; }
.download-steps p { font-size:12px; line-height:1.85; color:var(--muted); }
.download-steps a { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.download-start-bottom { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 4px 0; }
.download-start-bottom>span { font-size:10px; color:var(--muted); }
.download-start-bottom>.text-link { font-size:11px; }
.download-releases { display:grid; grid-template-columns:1fr 1.2fr; gap:65px; padding-block:12px 80px; }
.download-releases h2 { font-size:32px; margin:11px 0 16px; }
.download-releases-intro>p { font-size:13px; line-height:1.9; color:var(--muted); max-width:340px; }
.download-releases-intro>.text-link { font-size:11px; margin-top:13px; }
.download-release-list { border-top:1px solid var(--line); }
.download-release-row { display:flex; align-items:center; gap:13px; padding:21px 0; border-bottom:1px solid var(--line); }
.download-release-icon { width:42px; height:42px; flex-shrink:0; display:grid; place-items:center; border:1px solid var(--line); background:var(--soft); border-radius:13px; color:var(--muted); }
.download-release-icon>.icon { width:22px; height:22px; }
.download-release-row h3 { font-size:16px; letter-spacing:-.025em; }
.download-release-row p { font-size:10px; color:var(--muted); margin-top:5px; }
.download-release-status { margin-left:auto; max-width:125px; text-align:right; font-size:9px; line-height:1.7; color:var(--muted); }
.download-release-download { margin-left:auto; flex-shrink:0; padding:11px 14px; font-size:11px; }
@keyframes download-panel-in { from { opacity:.5; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1000px) {
 .download-hero { gap:27px; padding-block:52px 63px; }
 .download-hero h1 { font-size:43px; }
 .download-device-stage { height:400px; }
 .web-device { height:250px; }
 .web-device-chat { gap:9px; padding-inline:10px; }
 .web-device-rail { width:55px; padding-inline:9px; }
 .web-device-message { font-size:8px; }
 .mobile-device { width:117px; height:238px; bottom:18px; right:17px; }
 .mobile-device-header { gap:3px; }
 .mobile-device-header>strong { font-size:6px; }
 .mobile-device-message { font-size:6px; padding-inline:5px; }
 .download-start h2 { font-size:28px; }
 .download-steps>li { padding:23px; }
 .download-steps h3 { font-size:15px; }
 .download-releases { gap:35px; }
}
@media(max-width:800px) and (min-width:701px) {
 .download-hero h1 { font-size:37px; }
 .download-hero-copy>p { font-size:13px; }
 .download-qr-toggle { min-height:43px; font-size:11px; }
 .download-actions .button { min-height:49px; font-size:12px; }
 .download-device-stage { height:350px; }
 .web-device { height:235px; }
 .web-device-rail { width:43px; padding-inline:7px; }
 .web-device-rail>img { width:24px; height:24px; }
 .web-device-message { font-size:7px; padding:8px 7px 5px; }
 .mobile-device { width:100px; height:205px; bottom:12px; }
 .mobile-device-header>strong { font-size:5px; }
 .mobile-device-header>img { width:15px; height:15px; }
 .mobile-device-message { font-size:5px; }
 .download-start-heading { flex-direction:column; align-items:flex-start; gap:20px; }
 .download-steps { min-height:220px; }
 .download-steps>li { padding:21px 17px; }
}
@media(max-width:700px) {
 .download-hero { grid-template-columns:1fr; gap:26px; padding-block:37px 49px; }
 .download-hero h1 { font-size:40px; margin-block:17px 20px; }
 .download-hero-copy>p { font-size:14px; }
 .download-available { margin-top:21px; }
 .download-actions .button { min-height:53px; }
 .download-qr-toggle,.download-qr { display:none; }
 .download-hero-copy>.download-action-status { font-size:10px; }
 .download-device-stage { width:100%; max-width:430px; margin:0 auto; height:340px; }
 .web-device { width:calc(100% - 42px); max-width:350px; height:235px; transform:translate(-6px,-9px) rotate(-5deg); }
 .web-device-rail { width:57px; }
 .web-device-chat { gap:9px; }
 .web-device-message { font-size:8px; }
 .mobile-device { width:107px; height:217px; bottom:12px; right:18px; }
 .mobile-device-header>strong { font-size:5.5px; }
 .mobile-device-message { font-size:6px; }
 .download-device-orbit { inset:30px 22px 24px; }
 .download-start { padding-block:10px 45px; }
 .download-start-heading { flex-direction:column; align-items:flex-start; gap:22px; margin-bottom:20px; }
 .download-start h2 { font-size:28px; }
 .download-start-choices { width:100%; }
 .download-start-choices>button { flex:1; justify-content:center; min-height:43px; }
 .download-steps { grid-template-columns:1fr; min-height:340px; border-radius:18px; }
 .download-steps>li { display:flex; align-items:flex-start; gap:17px; padding:21px; }
 .download-steps>li+li { border-left:0; border-top:1px solid var(--line); }
 .download-step-number { margin:4px 0 0; }
 .download-steps h3 { font-size:16px; margin-bottom:7px; }
 .download-steps p { font-size:12px; }
 .download-start-bottom { padding-top:9px; gap:8px; }
 .download-start-bottom>span { font-size:9px; }
 .download-start-bottom>.text-link { font-size:10px; gap:6px; }
 .download-releases { grid-template-columns:1fr; gap:25px; padding-block:3px 51px; }
 .download-releases h2 { font-size:28px; }
 .download-releases-intro>p { max-width:none; }
 .download-release-row { gap:12px; padding-block:18px; }
 .download-release-row h3 { font-size:16px; }
 .download-release-status { max-width:95px; font-size:8px; }
 .download-release-row p { font-size:9px; max-width:135px; line-height:1.6; }
}
@media(max-width:370px) {
 .download-hero h1 { font-size:35px; }
 .download-hero-copy>p { font-size:13px; }
 .download-device-stage { height:315px; }
 .web-device { height:215px; }
 .web-device-rail { width:43px; padding-inline:7px; }
 .web-device-chat { padding-inline:9px; gap:8px; }
 .web-device-message { font-size:7px; }
 .mobile-device { width:94px; height:199px; right:16px; }
 .mobile-device-header { gap:2px; }
 .mobile-device-header>img { width:16px; height:16px; }
 .mobile-device-header>strong { font-size:5px; }
 .mobile-device-message { font-size:5px; }
 .download-start h2 { font-size:25px; }
 .download-steps>li { gap:13px; padding:19px 17px; }
 .download-steps h3 { font-size:15px; }
 .download-steps p { font-size:11px; }
 .download-release-status { max-width:78px; }
 .download-release-icon { width:35px; height:35px; border-radius:11px; }
}
@media(prefers-reduced-motion:reduce) {
 .download-steps,.download-qr { animation:none; }
 .download-qr-toggle { transition:none; }
}