/* /download: the MemeSwap iPhone app page. docs.css gives the page frame and site chrome; this is the hero. */
.get-app main.ga{width:min(1040px,calc(100% - 32px));margin:40px auto 72px}
.ga-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.ga-copy{min-width:0}
.ga h1{font-size:clamp(44px,8vw,86px)}
.ga .lede{margin:0 0 26px}
.ga-get{display:none}
/* Which "get it" block shows follows the server's User-Agent guess (and get-app.mjs for iPadOS). Crawlers and
   unknown agents see the desktop block; every block is in the HTML either way. */
html:not([data-platform]) .ga-desktop,[data-platform="desktop"] .ga-desktop{display:flex}
[data-platform="iphone"] .ga-ios,[data-platform="ipad"] .ga-ios{display:block}
[data-platform="android"] .ga-android{display:block}
.ga-badge{display:inline-block;line-height:0;border-radius:12px}
.ga-badge img{display:block;height:auto}
.ga-badge-lg img{width:min(260px,70vw)}
.ga-desktop{gap:20px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--panel);max-width:520px}
.ga-qr{flex:none;padding:10px;border-radius:14px;background:#fff;line-height:0}
.ga-qr img{width:148px;height:148px;image-rendering:pixelated}
.ga-qr-copy b{display:block;font-size:18px}
.ga-qr-copy p{margin:4px 0 12px;color:var(--muted);font-size:14px;line-height:1.5}
.ga-android{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.ga-android b{display:block;font-size:19px}
.ga-android p{margin:6px 0 14px;color:var(--muted)}
.ga-web{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:12px;background:var(--green);color:#0b100c;font-weight:800;text-decoration:none}
.ga-phone{justify-self:center;width:min(300px,70vw)}
.ga-phone img,.ga-shot-row img{display:block;width:100%;height:auto;border-radius:28px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.ga-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:56px}
.ga-features article{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.ga-features h2{margin:0 0 6px;font-size:18px}
.ga-features p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.ga-shots h2,.ga-follow h2{margin:56px 0 16px}
.ga-shot-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ga-shot-row img{border-radius:18px}
.ga-social{display:flex;flex-wrap:wrap;gap:10px}
.ga-social a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font-weight:700;text-decoration:none}
.ga-social a:hover{border-color:var(--green)}
.ga-risk{margin:40px 0 0;color:var(--muted);font-size:13px}
.ga-tm{margin-top:8px;font-size:12px;opacity:.8}
@media (max-width:820px){.ga-hero{grid-template-columns:1fr;gap:28px}.ga-phone{width:min(260px,64vw)}.ga-features{grid-template-columns:1fr 1fr}.ga-shot-row{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.get-app main.ga{margin-top:24px}.ga-features{grid-template-columns:1fr}.ga-desktop{flex-direction:column;align-items:flex-start}}