/* "Get the app" (includes/_get_app.html): a banner in the platform's own blue card, then
   the install steps for each system with the QR code beside them.
   The banner is the same blue in day and night, like the dashboard's balance card; the
   pictures show the app on a computer in the day theme and on a phone in the night one. */
.ga { position:relative; display:flex; flex-direction:column; gap:1.25rem; }

/* ---------- the banner ---------- */
.ga-hero { position:relative; overflow:hidden; border-radius: var(--radius-xl, 24px); background: var(--gradient-main, linear-gradient(135deg, #1433C4, #2F6BFF)); color:#fff;
           box-shadow: 0 24px 60px var(--primary-glow, rgba(59,130,255,.3)); padding: 2.6rem 2.6rem 2.4rem; display:grid; grid-template-columns: 1fr 1.05fr; gap:2.2rem; align-items:center; isolation:isolate; }
.ga-hero::before, .ga-hero::after { content:''; position:absolute; border-radius:50%; pointer-events:none; z-index:-1; }
.ga-hero::after { right:-90px; top:-110px; width:340px; height:340px; background: rgba(255,255,255,.10); }
.ga-hero::before { left:38%; bottom:-170px; width:300px; height:300px; background: rgba(255,255,255,.06); }

.ga-copy { min-width:0; }
.ga-detect { display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .85rem .35rem .4rem; border-radius:50px; background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24); color:#fff; font-size:.74rem; font-weight:700; }
.ga-detect .d { width:22px; height:22px; border-radius:50%; background:#fff; color: #1433C4; display:inline-flex; align-items:center; justify-content:center; font-size:.68rem; }
.ga-detect.unknown { opacity:.85; }
.ga-hero h3 { font-size: clamp(1.55rem, 2.5vw, 2.2rem); font-weight:900; letter-spacing:-.035em; line-height:1.1; margin: 1rem 0 .7rem; color:#fff; white-space: nowrap; }
@media (max-width: 480px) { .ga-hero h3 { white-space: normal; } }
.ga-hero h3 span { display:block; color: rgba(255,255,255,.72); }
.ga-hero p { color: rgba(255,255,255,.86); font-size:.95rem; line-height:1.6; margin:0 0 1.4rem; max-width:520px; }

.ga-cta { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.ga-hero .ga-cta .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.35rem; border-radius:12px; font-weight:800; font-size:.92rem; border:1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.10); color:#fff; box-shadow:none; transition: background .18s, transform .18s; }
.ga-hero .ga-cta .btn:hover { background: rgba(255,255,255,.2); color:#fff; transform: translateY(-1px); }
.ga-hero .ga-cta .btn.primary { background:#fff; color:#1433C4; border-color:#fff; box-shadow: 0 10px 26px rgba(6,22,87,.28); }
.ga-hero .ga-cta .btn.primary:hover { background:#F1F5FF; color:#1433C4; }
.ga-installed { display:none; align-items:center; gap:.5rem; color:#fff; font-weight:700; font-size:.88rem; padding:.55rem .9rem; border-radius:12px; background: rgba(255,255,255,.14); }

.ga-feats { list-style:none; margin:1.6rem 0 0; padding:1.2rem 0 0; border-top:1px solid rgba(255,255,255,.18); display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:.75rem 1rem; }
.ga-feats li { display:flex; align-items:center; gap:.55rem; font-size:.8rem; font-weight:600; color: rgba(255,255,255,.92); min-width:0; }
.ga-feats i { width:28px; height:28px; border-radius:9px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background: rgba(255,255,255,.14); color:#fff; font-size:.75rem; }
.ga-os { display:flex; align-items:center; gap:.7rem; margin-top:1.2rem; color: rgba(255,255,255,.7); font-size:.74rem; font-weight:600; flex-wrap:wrap; }
.ga-os i { font-size:.95rem; color: rgba(255,255,255,.85); }

/* ---------- the devices ---------- */
.ga-devices { position:relative; height:380px; min-width:0; }
.ga-desk { position:absolute; left:0; top:22px; width:84%; height:300px; border-radius:16px; overflow:hidden; background:#F5F7FB; box-shadow: 0 30px 70px rgba(6,22,87,.45), 0 0 0 1px rgba(255,255,255,.25); color:#0B1220; }
.ga-desk .bar { height:34px; display:flex; align-items:center; gap:.45rem; padding:0 .8rem; background:#fff; border-bottom:1px solid #E4E7EE; font-size:.7rem; }
.ga-desk .bar b { font-weight:800; }
.ga-desk .bar .win { margin-left:auto; display:flex; gap:.7rem; }
.ga-desk .bar .win i { width:9px; height:1.5px; background:#8A93A6; display:block; }
.ga-desk .bar .win i:nth-child(2) { height:8px; background:none; border:1.5px solid #8A93A6; }
.ga-desk .bar .win i:nth-child(3) { height:9px; background: linear-gradient(45deg, transparent 44%, #8A93A6 44%, #8A93A6 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #8A93A6 44%, #8A93A6 56%, transparent 56%); }
.ga-desk .body { display:flex; height: calc(100% - 34px); }
.ga-desk .side { width:46px; background:#fff; border-right:1px solid #E4E7EE; display:flex; flex-direction:column; align-items:center; gap:.55rem; padding-top:.8rem; }
.ga-desk .side span { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#8A93A6; font-size:.7rem; }
.ga-desk .side span.on { background: rgba(31,79,224,.1); color:#1F4FE0; }
.ga-desk .main { flex:1; min-width:0; padding:.85rem; display:flex; flex-direction:column; gap:.7rem; }
.ga-desk .card { border-radius:12px; padding:.75rem .85rem .2rem; background: var(--gradient-main, linear-gradient(135deg, #1433C4, #2F6BFF)); color:#fff; }
.ga-desk .card small { font-size:.58rem; text-transform:uppercase; letter-spacing:.1em; opacity:.85; font-weight:700; }
.ga-desk .card .hid { font-size:1.25rem; font-weight:900; letter-spacing:.04em; display:flex; align-items:center; gap:.5rem; }
.ga-desk .card .hid i { font-size:.7rem; opacity:.8; }
.ga-desk .card svg { width:100%; height:46px; display:block; }
.ga-desk .rows { background:#fff; border:1px solid #E4E7EE; border-radius:12px; padding:.2rem .7rem; }
.ga-desk .r { display:flex; align-items:center; gap:.55rem; padding:.42rem 0; border-bottom:1px solid #EEF1F6; font-size:.62rem; }
.ga-desk .r:last-child { border-bottom:none; }
.ga-desk .r img { border-radius:50%; }
.ga-desk .r b { display:block; font-size:.64rem; } .ga-desk .r small { color:#8A93A6; font-size:.56rem; }
.ga-desk .r em { margin-left:auto; font-style:normal; color:#8A93A6; letter-spacing:.1em; }

.ga-phone { position:absolute; right:2%; bottom:0; width:178px; height:356px; border-radius:34px; background:#0B0D14; border:6px solid #1A1D27; box-shadow: 0 34px 70px rgba(4,12,48,.6), 0 0 0 1px rgba(255,255,255,.12); overflow:hidden; }
.ga-phone::before { content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:54px; height:16px; border-radius:10px; background:#1A1D27; z-index:2; }
.ga-phone .scr { position:absolute; inset:0; padding:32px 11px 12px; display:flex; flex-direction:column; gap:7px; color:#F5F7FA; font-size:.58rem; }
.ga-phone .top { display:flex; align-items:center; gap:.35rem; font-size:.6rem; }
.ga-phone .top b { font-weight:800; } .ga-phone .top i { margin-left:auto; color:#8A93A6; font-size:.6rem; }
.ga-phone .bal { text-align:center; margin-top:.25rem; }
.ga-phone .bal small { display:block; color:#8A93A6; font-size:.5rem; }
.ga-phone .bal b { font-size:1.05rem; font-weight:900; letter-spacing:.05em; }
.ga-phone .spark { width:100%; height:34px; display:block; }
.ga-phone .acts { display:grid; grid-template-columns: repeat(4, 1fr); gap:4px; }
.ga-phone .acts span { display:flex; flex-direction:column; align-items:center; gap:3px; }
.ga-phone .acts i { width:28px; height:28px; border-radius:50%; background:#161A24; border:1px solid #262B38; display:flex; align-items:center; justify-content:center; color:#5B8CFF; font-size:.58rem; }
.ga-phone .acts small { font-size:.42rem; color:#C9CFDB; font-weight:700; }
.ga-phone .row { display:flex; align-items:center; gap:6px; padding:5px 0; border-bottom:1px solid #1C202B; }
.ga-phone .row img { border-radius:50%; }
.ga-phone .row b { display:block; font-size:.56rem; } .ga-phone .row small { color:#8A93A6; font-size:.45rem; }
.ga-phone .row em { margin-left:auto; font-style:normal; color:#8A93A6; letter-spacing:.1em; }
.ga-phone .tab { position:absolute; left:9px; right:9px; bottom:9px; height:28px; border-radius:18px; background:#161A24; border:1px solid #262B38; display:flex; justify-content:space-around; align-items:center; color:#6E7487; font-size:.55rem; }
.ga-phone .tab .on { color:#5B8CFF; }
.ga-phone .tab .plus { width:20px; height:20px; border-radius:50%; background: var(--gradient-main, linear-gradient(135deg, #1433C4, #2F6BFF)); color:#fff; display:inline-flex; align-items:center; justify-content:center; }

.ga-appicon { position:absolute; right: calc(2% + 196px); bottom:14px; width:62px; height:62px; border-radius:16px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow: 0 16px 36px rgba(6,22,87,.4); }
.ga-appicon .tw-mark { width:40px; height:40px; }

/* ---------- the install steps ---------- */
.ga-grid { display:block; }
.ga-panel { border-radius: var(--radius-xl, 24px); border:1px solid var(--border-color); background: var(--bg-card); overflow:hidden; display:grid; grid-template-columns: minmax(0, 1fr) 260px; }
.ga-tabs { grid-column: 1 / -1; display:flex; gap:.25rem; padding:.6rem; border-bottom:1px solid var(--border-color); overflow-x:auto; scrollbar-width:none; } .ga-tabs::-webkit-scrollbar { display:none; }
.ga-tabs button { flex-shrink:0; display:inline-flex; align-items:center; gap:.4rem; border:1px solid transparent; background:transparent; color: var(--text-secondary); font-weight:700; font-size:.8rem; padding:.5rem .8rem; border-radius:12px; transition: var(--t-fast); }
.ga-tabs button i { color: var(--text-muted); } .ga-tabs button.on { background: var(--primary-subtle); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, transparent); } .ga-tabs button.on i { color: var(--primary); }
.ga-tabs button .rec { font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:.1rem .35rem; border-radius:6px; background: var(--success-bg); color: var(--success); }
.ga-pane { display:none; grid-column:1; grid-row:2; padding:1.3rem 1.4rem 1.4rem; } .ga-pane.on { display:block; animation: ga-in .25s ease both; }
@keyframes ga-in { from { opacity:0; transform: translateY(6px) } to { opacity:1; transform:none } }
.ga-pane .t { display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; } .ga-pane .t .ic { width:42px; height:42px; border-radius:12px; background: var(--primary-subtle); color: var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.ga-pane .t b { display:block; font-size:1rem; } .ga-pane .t small { color: var(--text-muted); font-size:.74rem; }
.ga-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.ga-steps li { display:flex; align-items:flex-start; gap:.75rem; padding:.7rem .8rem; border-radius:14px; background: var(--bg-card-2); border:1px solid var(--border-color); font-size:.86rem; }
.ga-steps .n { width:24px; height:24px; border-radius:50%; background: var(--gradient-main); color:#fff; font-weight:800; font-size:.7rem; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:.05rem; }
.ga-steps .k { display:inline-flex; align-items:center; gap:.3rem; padding:.05rem .45rem; border-radius:7px; background: var(--bg-card); border:1px solid var(--border-color); font-weight:700; font-size:.78rem; white-space:nowrap; } .ga-steps .k i { color: var(--primary); font-size:.7rem; }
.ga-steps li span.txt { color: var(--text-secondary); } .ga-steps li span.txt b { color: var(--text-primary); }
.ga-note { margin-top:.8rem; font-size:.76rem; color: var(--text-muted); display:flex; gap:.5rem; align-items:flex-start; } .ga-note i { color: var(--warning); margin-top:.15rem; }
.ga-pane .act { margin-top:.9rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.ga-browsers { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.8rem; } .ga-browsers span { font-size:.72rem; padding:.2rem .5rem; border-radius:50px; background: var(--bg-hover); color: var(--text-secondary); display:inline-flex; align-items:center; gap:.3rem; } .ga-browsers span.ok i { color: var(--green); } .ga-browsers span.no i { color: var(--danger); }
/* the QR code, beside the steps */
.ga-qr { grid-column:2; grid-row:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.8rem; padding:1.4rem 1.2rem; border-left:1px solid var(--border-color); background: var(--bg-card-2); }
.ga-qr img { width:150px; height:150px; border-radius:14px; background:#fff; padding:6px; flex-shrink:0; box-shadow: 0 10px 26px rgba(20,51,196,.12); }
.ga-qr b { display:block; font-size:.92rem; margin-bottom:.2rem; } .ga-qr span { font-size:.76rem; color: var(--text-secondary); line-height:1.5; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
    .ga-hero { grid-template-columns: 1fr; padding:2.2rem 2rem; gap:1.5rem; }
    .ga-devices { max-width:560px; width:100%; margin:0 auto; }
}
@media (max-width: 992px) {
    .ga-panel { grid-template-columns: 1fr; }
    .ga-qr { display:none; }
}
@media (max-width: 640px) {
    .ga-hero { padding:1.6rem 1.2rem 1.4rem; border-radius:20px; }
    .ga-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ga-hero .ga-cta .btn { flex:1 1 100%; justify-content:center; }
    .ga-devices { height:300px; }
    .ga-desk { width:90%; height:230px; top:10px; }
    .ga-desk .rows .r:nth-child(n+3) { display:none; }
    .ga-phone { width:140px; height:280px; border-radius:28px; border-width:5px; right:0; }
    .ga-phone .scr { padding:26px 9px 10px; gap:5px; }
    .ga-phone .row + .row { display:none; }
    .ga-appicon { display:none; }
}
@media (prefers-reduced-motion: no-preference) {
    .ga-phone { animation: ga-rise .8s cubic-bezier(.22,.61,.36,1) both .1s; }
    .ga-desk { animation: ga-rise .8s cubic-bezier(.22,.61,.36,1) both; }
    @keyframes ga-rise { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform:none; } }
}