/* Get the app page: QR card + install steps for the mobile PWA (app.abstrakt.news). */

/* 1100px, not the original 860px, so the QR, the steps and the phone demo sit on one row on a
   laptop. Below that the flex row wraps and the phone drops under the steps, which keeps the QR
   (the actual action on this page) first in the reading order at every width. */
.getapp-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 40px 80px;
}

.getapp-header { margin-bottom: 36px; }

.getapp-title {
    font-family: var(--platform-font-title);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--platform-text-primary);
    margin: 0 0 8px;
}

.getapp-subtitle {
    font-size: 0.95rem;
    color: var(--platform-text-secondary);
    margin: 0;
    max-width: 520px;
    line-height: 1.6;
}

.getapp-grid {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.getapp-qr-card {
    flex: none;
    background: var(--platform-bg-panel);
    border: 1px solid var(--platform-border);
    border-radius: var(--platform-radius-lg);
    padding: 24px;
    text-align: center;
    box-shadow: var(--platform-shadow-soft);
}

.getapp-qr {
    display: block;
    width: 220px;
    height: 220px;
    color: var(--platform-text-primary);
    margin: 0 auto 14px;
}

.getapp-qr-caption {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--platform-text-primary);
}

.getapp-qr-url {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--platform-text-secondary);
    text-decoration: none;
}

.getapp-qr-url:hover { color: var(--platform-text-primary); text-decoration: underline; }

.getapp-steps {
    flex: 1;
    min-width: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.getapp-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.getapp-step-num {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--platform-accent);
    color: var(--platform-bg-panel);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.getapp-step-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--platform-text-primary);
    margin-bottom: 4px;
}

.getapp-step-desc {
    font-size: 0.9rem;
    color: var(--platform-text-secondary);
    line-height: 1.6;
}

.getapp-platform {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-top: 8px;
}

.getapp-platform i {
    width: 16px;
    text-align: center;
    color: var(--platform-text-tertiary);
}

/* Phone demo, in a device frame. Drawn in CSS rather than shipped as a mockup image: it stays
   sharp at any size, needs no extra asset, and the screen keeps the encode's exact ratio
   (540x1108) so the app UI is never cropped or letterboxed. Restrained on purpose: a titanium
   edge, a Dynamic Island and the side buttons, but no glare, no reflection, no floating tilt. */
/* 288px wide and lifted, so the phone reaches the empty band to the right of the intro text
   instead of leaving that corner blank. The lift is a negative margin gated to wide viewports:
   when the row wraps, the phone sits on its own line and pulling it up would drag it into the
   steps. The video is 540px wide, so it still renders well above 2x here. */
.getapp-phone {
    flex: none;
    width: 288px;
    margin: 0;
}

@media (min-width: 1420px) {
    .getapp-phone { margin-top: -104px; }
}

.getapp-phone-device {
    position: relative;
    padding: 9px;
    background: linear-gradient(160deg, #3a3a3c 0%, #1c1c1e 28%, #1c1c1e 72%, #48484a 100%);
    border-radius: 42px;
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.14),
        0 16px 34px -14px rgba(0, 0, 0, 0.45);
}

/* Side buttons: the volume pair on the left, the longer power button on the right. Two
   pseudo-elements carry three buttons (the left one duplicates itself with a box-shadow), so the
   markup stays free of empty decorative divs. Lengths are in px because the component's width is
   fixed just above; they need revisiting if that width changes. */
.getapp-phone-device::before,
.getapp-phone-device::after {
    content: "";
    position: absolute;
    width: 3px;
    background: #55555a;
}

.getapp-phone-device::before {
    left: -2px;
    top: 142px;
    height: 45px;
    border-radius: 2px 0 0 2px;
    box-shadow: 0 56px 0 0 #55555a;
}

.getapp-phone-device::after {
    right: -2px;
    top: 158px;
    height: 68px;
    border-radius: 0 2px 2px 0;
}

.getapp-phone-screen {
    position: relative;
    aspect-ratio: 540 / 1108;
    border-radius: 34px;
    overflow: hidden;
    background: #000;
}

/* Dynamic Island. It lands on the black band the recording already has above the app header,
   so it reads as the device rather than covering the UI. */
.getapp-phone-island {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 29%;
    height: 15px;
    background: #000;
    border-radius: 999px;
    z-index: 2;
}

.getapp-phone-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.getapp-phone-caption {
    margin-top: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--platform-text-secondary);
}

@media (max-width: 768px) {
    .getapp-wrapper { padding: 24px 20px 60px; }
    .getapp-grid { gap: 24px; }
}