/*
 * InstallOnAir modern layout (layouts.modern): home page plus the public pages
 * (features, FAQ, privacy, terms, advertise, install page, expired link, device info, login, register, password reset).
 * Loaded after the Bootstrap/app bundle; every class is prefixed with "ioa-" to avoid Bootstrap collisions.
 * Classes without the prefix (.box, .js, .progress, .success-data, #progress-wait-msg ...) are required by the home page upload JavaScript.
 */

body.ioa {
    --ioa-ground: #f4fafb;
    --ioa-surface: #ffffff;
    --ioa-surface-2: #eaf5f8;
    --ioa-ink: #06213f;
    --ioa-ink-soft: #3e5670;
    --ioa-muted: #5b7186;
    --ioa-line: #d6e6ec;
    --ioa-cyan: #00d8d8;
    --ioa-cyan-ink: #00788f;
    --ioa-cyan-glow: rgba(0, 216, 216, 0.28);
    --ioa-android: #2fb86f;
    --ioa-ok: #127a4a;
    --ioa-ok-bg: #dcf5e8;
    --ioa-warn: #8a5a00;
    --ioa-warn-bg: #fff0cc;
    --ioa-bad: #b42335;
    --ioa-bad-bg: #fde4e7;
    --ioa-hero: #041a33;
    --ioa-hero-2: #072a4d;
    --ioa-hero-ink: #eaf6fa;
    --ioa-hero-muted: #a3bccd;
    --ioa-hero-line: rgba(163, 188, 205, 0.22);
    --ioa-on-cyan: #04213a;
    --ioa-shadow: 0 1px 2px rgba(6, 33, 63, 0.06), 0 12px 32px rgba(6, 33, 63, 0.08);
    --ioa-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ioa-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ioa-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    display: block;
    height: auto;
    min-height: 100%;
    margin: 0;
    background: var(--ioa-ground);
    color: var(--ioa-ink-soft);
    font: 400 17px/1.65 var(--ioa-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html:has(body.ioa) { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html:has(body.ioa) { scroll-behavior: auto; } }

/* Scoped resets (Bootstrap reboot and legacy app.scss) */
.ioa-scope h1, .ioa-scope h2, .ioa-scope h3, .ioa-scope h4, .ioa-scope h5 {
    margin: 0;
    color: var(--ioa-ink);
    font-family: var(--ioa-body);
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}
.ioa-scope p { margin: 0; }
.ioa-scope ul, .ioa-scope ol { margin: 0; padding: 0; }
.ioa-scope a { color: var(--ioa-cyan-ink); }
.ioa-scope button, .ioa-scope input, .ioa-scope textarea { font: inherit; }
.ioa-scope :focus-visible { outline: 3px solid var(--ioa-cyan); outline-offset: 3px; border-radius: 6px; }
.ioa-scope img { max-width: 100%; }
.ioa-scope .ioa-display {
    font-family: var(--ioa-display);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.ioa-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.ioa-eyebrow {
    font: 600 13px/1.2 var(--ioa-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ioa-cyan-ink);
}
.ioa-section { padding-block: 104px; }
.ioa-section--flush-top { padding-top: 0; }
.ioa-section-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: 56px; }
.ioa-scope .ioa-section-head h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; }
.ioa-scope .ioa-section-head .ioa-kicker { font: 500 20px/1.45 var(--ioa-body); color: var(--ioa-ink-soft); letter-spacing: 0; }

/* Buttons */
.ioa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    padding: 14px 26px;
    font: 600 16px/1 var(--ioa-body);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.ioa-scope .ioa-btn--primary, .ioa-scope .ioa-btn--primary:hover, .ioa-scope .ioa-btn--primary:focus {
    background: var(--ioa-cyan);
    color: var(--ioa-on-cyan);
    box-shadow: 0 8px 24px var(--ioa-cyan-glow);
}
.ioa-scope .ioa-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px var(--ioa-cyan-glow); }
.ioa-scope .ioa-btn--primary[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.ioa-scope .ioa-btn--ghost, .ioa-scope .ioa-btn--ghost:hover { background: var(--ioa-surface); color: var(--ioa-ink); border-color: var(--ioa-line); }
.ioa-scope .ioa-btn--ghost:hover { border-color: var(--ioa-cyan-ink); }
.ioa-scope .ioa-btn--outline-dark, .ioa-scope .ioa-btn--outline-dark:hover { background: transparent; color: var(--ioa-hero-ink); border-color: var(--ioa-hero-line); }
.ioa-scope .ioa-btn--outline-dark:hover { border-color: var(--ioa-cyan); }
.ioa-btn--wide { width: 100%; padding-block: 16px; font-size: 17px; }
.ioa-scope .ioa-text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ioa-cyan-ink); }
.ioa-scope .ioa-text-link:hover { text-decoration: underline !important; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    .ioa-btn { transition: none; }
    .ioa-scope .ioa-btn--primary:hover { transform: none; }
}

/* Navigation */
.ioa-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(4, 26, 51, 0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ioa-hero-line);
}
.ioa-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.ioa-logo { display: inline-flex; align-items: center; flex: none; }
.ioa-logo img { display: block; height: 40px; width: auto; }
.ioa-nav__menu { display: flex; align-items: center; gap: 36px; }
.ioa-nav__links { display: flex; align-items: center; gap: 28px; }
.ioa-scope .ioa-nav__links a { color: var(--ioa-hero-muted); font-weight: 500; font-size: 15px; }
.ioa-scope .ioa-nav__links a:hover { color: var(--ioa-hero-ink); }
.ioa-nav__actions { display: flex; align-items: center; gap: 14px; }
.ioa-nav__logout { margin: 0; }
.ioa-scope .ioa-nav__login { color: var(--ioa-hero-muted); font-weight: 500; font-size: 15px; padding: 10px 6px; }
.ioa-scope .ioa-nav__login:hover { color: var(--ioa-hero-ink); }
.ioa-nav__actions .ioa-btn { padding: 11px 20px; font-size: 15px; }
.ioa-nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--ioa-hero-line);
    background: transparent;
    color: var(--ioa-hero-ink);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Hero */
.ioa-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 520px at 78% 38%, rgba(0, 216, 216, 0.16), transparent 62%),
        linear-gradient(180deg, var(--ioa-hero) 0%, var(--ioa-hero-2) 100%);
    color: var(--ioa-hero-muted);
    padding-block: 72px 88px;
}
.ioa-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 56px; align-items: center; }
.ioa-hero__copy { display: grid; gap: 26px; }
.ioa-badge {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 8px;
    border-radius: 999px;
    border: 1px solid var(--ioa-hero-line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ioa-hero-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}
.ioa-badge__pill { background: var(--ioa-cyan); color: var(--ioa-on-cyan); border-radius: 999px; padding: 3px 9px; font-weight: 700; font-size: 12px; letter-spacing: 0.04em; flex: none; }
.ioa-scope .ioa-hero h1 { color: var(--ioa-hero-ink); display: grid; gap: 18px; }
.ioa-scope .ioa-hero__lead { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05; }
.ioa-hero__lead em { font-style: normal; color: var(--ioa-cyan); }
.ioa-scope .ioa-hero__tail { font: 500 clamp(18px, 1.8vw, 22px)/1.45 var(--ioa-body); color: var(--ioa-hero-muted); max-width: 34em; }
.ioa-scope .ioa-hero__sub { font-size: 18px; color: var(--ioa-hero-muted); }
.ioa-hero__stats { display: flex; flex-wrap: wrap; gap: 14px 36px; padding-top: 8px; border-top: 1px solid var(--ioa-hero-line); }
.ioa-hero__stats div { display: grid; gap: 2px; padding-top: 14px; }
.ioa-scope .ioa-hero__stats strong { font-size: 26px; line-height: 1.1; color: var(--ioa-hero-ink); font-variant-numeric: tabular-nums; }
.ioa-hero__stats span { font-size: 14px; }

.ioa-upload-stage { position: relative; display: grid; place-items: center; padding: 24px 0; }
.ioa-airwaves { position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; }
.ioa-airwaves span {
    position: absolute;
    left: 0;
    top: 0;
    width: 560px;
    height: 560px;
    margin: -280px 0 0 -280px;
    border-radius: 50%;
    /* Aurora: cyan, violet and orange rings, one colour each */
    border: 1.5px solid rgba(0, 216, 216, 0.55);
    opacity: 0;
    animation: ioa-wave 6s linear infinite;
}
.ioa-airwaves span:nth-child(2) { border-color: rgba(167, 139, 250, 0.55); animation-delay: 2s; }
.ioa-airwaves span:nth-child(3) { border-color: rgba(251, 146, 60, 0.5); animation-delay: 4s; }
@keyframes ioa-wave { 0% { transform: scale(0.45); opacity: 0.7; } 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .ioa-airwaves span { animation: none; opacity: 0.3; }
    .ioa-airwaves span:nth-child(1) { transform: scale(0.6); }
    .ioa-airwaves span:nth-child(2) { transform: scale(0.85); opacity: 0.18; }
    .ioa-airwaves span:nth-child(3) { transform: scale(1.1); opacity: 0.08; }
}

/* Upload card */
.ioa-upload {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--ioa-surface);
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 30px 80px rgba(0, 10, 25, 0.45);
    display: grid;
    gap: 18px;
    color: var(--ioa-ink-soft);
    font-size: 16px;
}
.ioa-upload__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ioa-scope .ioa-upload__top h2 { font-size: 18px; line-height: 1.2; }
.ioa-platforms { display: flex; gap: 6px; flex-wrap: wrap; }
.ioa-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 12px/1 var(--ioa-mono);
    color: var(--ioa-ink-soft);
    background: var(--ioa-surface-2);
    border-radius: 999px;
    padding: 6px 10px;
    white-space: nowrap;
}
.ioa-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ioa-muted); flex: none; }
.ioa-chip--android i { background: var(--ioa-android); }

.ioa-upload .js { display: grid; gap: 16px; }
.ioa-scope #ipafileuploadform { display: grid; gap: 16px; margin: 0; }

.ioa-scope .ioa-dropzone.box {
    border: 2px dashed var(--ioa-line);
    border-radius: 18px;
    padding: 28px 20px;
    background: var(--ioa-ground);
    text-align: center;
    cursor: pointer;
    min-height: 0;
    overflow: visible;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ioa-scope .ioa-dropzone.box:hover,
.ioa-scope .ioa-dropzone.box.is-dragover { border-color: var(--ioa-cyan); background: var(--ioa-surface-2); }
.ioa-dropzone .box__input { display: grid; justify-items: center; gap: 8px; }
.ioa-dropzone svg { color: var(--ioa-cyan-ink); }
.ioa-dropzone__title { color: var(--ioa-ink); font-size: 18px; font-weight: 600; line-height: 1.3; }
.ioa-dropzone__hint { font-size: 14px; color: var(--ioa-muted); line-height: 1.5; }
.ioa-scope .ioa-dropzone #filelabel {
    display: inline;
    margin: 0;
    color: var(--ioa-cyan-ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.ioa-scope .ioa-dropzone .box__file { display: none; }
.ioa-scope .ioa-dropzone label.error { display: block; margin: 4px 0 0; color: var(--ioa-bad); font-size: 14px; font-weight: 600; }
.ioa-scope .ioa-dropzone label.error:empty { display: none; }
.ioa-scope .ioa-login-note { font-size: 14px; color: var(--ioa-muted); text-align: center; }
.ioa-scope .ioa-login-note a { font-weight: 600; }

/* Upload states: idle | uploading | processing | notice | done (set on .ioa-upload[data-state]) */
.ioa-uploading { display: none; gap: 10px; }
.ioa-upload[data-state="uploading"] .ioa-uploading { display: grid; }
.ioa-upload[data-state="uploading"] .ioa-dropzone,
.ioa-upload[data-state="uploading"] .ioa-submit,
.ioa-upload[data-state="uploading"] .ioa-login-note,
.ioa-upload[data-state="processing"] .ioa-dropzone,
.ioa-upload[data-state="processing"] .ioa-submit,
.ioa-upload[data-state="processing"] .ioa-login-note,
.ioa-upload[data-state="notice"] #ipafileuploadform,
.ioa-upload[data-state="notice"] .ioa-login-note { display: none; }

.ioa-file-line { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--ioa-ground); border: 1px solid var(--ioa-line); }
.ioa-file-line__ext { font: 600 12px/1 var(--ioa-mono); padding: 8px; border-radius: 8px; background: var(--ioa-surface-2); color: var(--ioa-ink); flex: none; }
.ioa-file-line__meta { display: grid; gap: 8px; flex: 1; min-width: 0; }
.ioa-file-line__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ioa-file-line__row b { font: 500 14px/1.3 var(--ioa-mono); color: var(--ioa-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ioa-file-line__row span { font-variant-numeric: tabular-nums; color: var(--ioa-ink-soft); flex: none; }
.ioa-scope .ioa-uploading .progress {
    height: 8px;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 99px;
    background: var(--ioa-surface-2);
    overflow: hidden;
}
.ioa-scope .ioa-uploading .progress-bar {
    /* The upload script shows .progress with display:block, so the empty bar needs its own height */
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--ioa-cyan), #38a9ff);
    border-radius: inherit;
    transition: width 0.15s linear;
}
.ioa-scope .ioa-uploading__note { font-size: 14px; color: var(--ioa-muted); text-align: center; }
.ioa-upload[data-state="processing"] .ioa-uploading { display: none; }

.ioa-scope #progress-wait-msg.ioa-processing {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
    padding: 26px 16px;
    border-radius: 18px;
    background: var(--ioa-ground);
}
.ioa-scope .ioa-processing h3 { font-size: 18px; }
.ioa-scope .ioa-processing p { font-size: 15px; }
.ioa-spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--ioa-surface-2); border-top-color: var(--ioa-cyan); animation: ioa-spin 0.9s linear infinite; }
@keyframes ioa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ioa-spinner { animation-duration: 3s; } }

.ioa-notice { display: grid; gap: 14px; padding: 20px; border-radius: 18px; background: var(--ioa-warn-bg); }
.ioa-notice.is-error { background: var(--ioa-bad-bg); }
.ioa-notice__head { display: flex; gap: 12px; align-items: flex-start; }
.ioa-notice__icon { width: 36px; height: 36px; border-radius: 50%; background: var(--ioa-surface); color: var(--ioa-warn); display: grid; place-items: center; flex: none; }
.ioa-notice.is-error .ioa-notice__icon { color: var(--ioa-bad); }
.ioa-scope .ioa-notice h3 { font-size: 17px; line-height: 1.3; }
.ioa-scope .ioa-notice p { font-size: 15px; color: var(--ioa-ink-soft); margin-top: 4px; }
.ioa-notice__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ioa-notice__actions .ioa-btn { flex: 1 1 auto; padding: 11px 18px; font-size: 15px; }

/* Result (shown by the upload JavaScript as .success-data) */
.ioa-scope .ioa-result.success-data { display: grid; gap: 16px; }
.ioa-result__head { display: flex; align-items: center; gap: 12px; }
.ioa-result__tick { width: 32px; height: 32px; border-radius: 50%; background: var(--ioa-cyan); color: var(--ioa-on-cyan); display: grid; place-items: center; flex: none; }
.ioa-scope .ioa-result__head h3 { font-size: 19px; line-height: 1.2; }
.ioa-scope .ioa-result__head p { font-size: 14px; color: var(--ioa-muted); }
.ioa-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--ioa-ground); border: 1px solid var(--ioa-line); }
.ioa-tab { border: 0; background: transparent; color: var(--ioa-ink-soft); padding: 9px 10px; border-radius: 9px; font-weight: 600; font-size: 15px; cursor: pointer; }
.ioa-tab[aria-selected="true"] { background: var(--ioa-surface); color: var(--ioa-ink); box-shadow: 0 1px 3px rgba(6, 33, 63, 0.12); }
.ioa-share { display: grid; grid-template-columns: minmax(0, 1fr) 124px; gap: 16px; align-items: start; }
.ioa-share__main { display: grid; gap: 10px; min-width: 0; }
.ioa-link-chip { display: flex; align-items: center; gap: 8px; background: var(--ioa-surface-2); border-radius: 12px; padding: 8px 8px 8px 14px; min-width: 0; }
.ioa-scope .ioa-link-chip #copy-target { font: 500 13px/1.35 var(--ioa-mono); color: var(--ioa-ink); overflow-wrap: anywhere; flex: 1; min-width: 0; }
.ioa-icon-btn { flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--ioa-line); background: var(--ioa-surface); color: var(--ioa-ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.ioa-icon-btn:hover { border-color: var(--ioa-cyan-ink); }
.ioa-scope .ioa-result .copied { font-size: 13px; font-weight: 600; color: var(--ioa-ok); margin-top: -4px; }
.ioa-scope .ioa-expiry { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ioa-line); font-size: 14px; }
.ioa-scope .ioa-expiry__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ioa-days-left { justify-self: start; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--ioa-warn-bg); color: var(--ioa-warn); font-size: 13px; font-weight: 600; line-height: 1.3; }
.ioa-days-left.is-urgent { background: var(--ioa-bad-bg); color: var(--ioa-bad); }
.ioa-scope .ioa-expiry #expiry-date-value { color: var(--ioa-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.ioa-qr { display: grid; gap: 6px; justify-items: center; text-align: center; }
.ioa-qr img { width: 124px; height: 124px; border-radius: 12px; background: #ffffff; padding: 8px; border: 1px solid var(--ioa-line); object-fit: contain; }
.ioa-qr span { font-size: 12px; color: var(--ioa-muted); }

.ioa-email-form { display: grid; gap: 12px; margin: 0; }
.ioa-field { display: grid; gap: 6px; }
.ioa-scope .ioa-field > label { margin: 0; font-size: 14px; font-weight: 600; color: var(--ioa-ink); }
.ioa-field > label small { font-weight: 400; color: var(--ioa-muted); }
.ioa-scope .ioa-field textarea,
.ioa-scope .ioa-field .multiple_emails-container {
    width: 100%;
    border: 1px solid var(--ioa-line);
    background: var(--ioa-ground);
    color: var(--ioa-ink);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 15px;
    box-shadow: none;
}
.ioa-scope .ioa-field textarea { min-height: 80px; resize: vertical; }
.ioa-scope .ioa-field .multiple_emails-container input,
.ioa-scope .ioa-field .multiple_emails-container input:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    padding: 4px 0;
    width: 100%;
    color: var(--ioa-ink);
}
.ioa-scope .ioa-field .multiple_emails-ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ioa-scope .ioa-field .multiple_emails-email { margin: 0; padding: 3px 8px; border-radius: 999px; background: var(--ioa-surface-2); color: var(--ioa-ink); font-size: 13px; }
.ioa-scope .ioa-field .multiple_emails-input.multiple_emails-error { box-shadow: inset 0 -2px 0 var(--ioa-bad); }
.ioa-scope .ioa-field textarea:focus,
.ioa-scope .ioa-field .multiple_emails-container:focus-within { outline: 2px solid var(--ioa-cyan); outline-offset: 1px; border-color: transparent; }
.ioa-field__hint { font-size: 13px; color: var(--ioa-muted); }

/* Extend expiry upsell */
.ioa-upsell { display: grid; gap: 14px; padding: 18px; border-radius: 18px; border: 2px solid var(--ioa-cyan); background: linear-gradient(160deg, var(--ioa-surface-2) 0%, var(--ioa-surface) 70%); }
.ioa-upsell__head { display: flex; gap: 12px; align-items: flex-start; }
.ioa-upsell__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--ioa-cyan); color: var(--ioa-on-cyan); display: grid; place-items: center; flex: none; }
.ioa-scope .ioa-upsell__eyebrow { font: 700 12px/1.2 var(--ioa-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ioa-cyan-ink); }
.ioa-scope .ioa-upsell h4 { font-size: 17px; line-height: 1.3; margin-top: 4px; }
.ioa-scope .ioa-upsell__head p:last-child { font-size: 14px; margin-top: 4px; }
.ioa-upsell__head b { color: var(--ioa-ink); font-variant-numeric: tabular-nums; }
.ioa-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
.ioa-scope .ioa-plan {
    position: relative;
    display: grid;
    gap: 2px;
    justify-items: center;
    text-align: center;
    margin: 0;
    padding: 10px 6px;
    border-radius: 12px;
    border: 1px solid var(--ioa-line);
    background: var(--ioa-surface);
    cursor: pointer;
}
.ioa-plan input { position: absolute; opacity: 0; pointer-events: none; }
.ioa-plan__duration { font-size: 13px; font-weight: 600; color: var(--ioa-ink-soft); line-height: 1.3; }
.ioa-plan__price { font: 700 18px/1.2 var(--ioa-body); color: var(--ioa-ink); font-variant-numeric: tabular-nums; }
.ioa-scope .ioa-plan.is-selected { border-color: var(--ioa-cyan-ink); box-shadow: inset 0 0 0 1px var(--ioa-cyan-ink); background: var(--ioa-surface-2); }
.ioa-plan:has(input:focus-visible) { outline: 3px solid var(--ioa-cyan); outline-offset: 2px; }
.ioa-scope .ioa-upsell__note { font-size: 13px; color: var(--ioa-muted); text-align: center; }
.ioa-again { justify-self: center; background: none; border: 0; color: var(--ioa-muted); font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 4px; }

/* Process flow */
.ioa-flow-section { background: var(--ioa-surface); border-bottom: 1px solid var(--ioa-line); padding-block: 72px 64px; }
.ioa-flow { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ioa-flow__step { position: relative; display: grid; justify-items: center; align-content: start; gap: 12px; text-align: center; padding-inline: 18px; }
.ioa-flow__step + .ioa-flow__step::before {
    content: "";
    position: absolute;
    top: 28px;
    left: -22px;
    width: 44px;
    height: 12px;
    background:
        linear-gradient(var(--ioa-line), var(--ioa-line)) left center / 34px 2px no-repeat,
        conic-gradient(from 225deg at 100% 50%, var(--ioa-cyan-ink) 0 90deg, transparent 0) right center / 8px 12px no-repeat;
}
.ioa-flow__icon { width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; background: var(--ioa-surface-2); color: var(--ioa-cyan-ink); border: 1px solid var(--ioa-line); }
.ioa-flow__step--hub .ioa-flow__icon { background: var(--ioa-cyan); color: var(--ioa-on-cyan); border-color: transparent; box-shadow: 0 10px 28px var(--ioa-cyan-glow); }
.ioa-flow__role { font: 600 12px/1 var(--ioa-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ioa-muted); }
.ioa-scope .ioa-flow__step h4 { font-size: 22px; line-height: 1.2; }
.ioa-scope .ioa-flow__step p { font-size: 15px; max-width: 26ch; }
.ioa-flow__artifact { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.2 var(--ioa-mono); color: var(--ioa-ink); background: var(--ioa-ground); border: 1px solid var(--ioa-line); border-radius: 999px; padding: 8px 12px; max-width: 100%; }
.ioa-flow__artifact i { width: 8px; height: 8px; border-radius: 50%; background: var(--ioa-cyan); flex: none; }
.ioa-flow__meter { width: 150px; display: grid; gap: 6px; font: 500 12px/1 var(--ioa-mono); color: var(--ioa-muted); }
.ioa-flow__meter span { display: block; height: 6px; border-radius: 99px; background: var(--ioa-surface-2); overflow: hidden; }
.ioa-flow__meter span i { display: block; height: 100%; width: 72%; border-radius: inherit; background: linear-gradient(90deg, var(--ioa-cyan), #38a9ff); }
.ioa-benefits { margin-top: 48px !important; list-style: none; padding: 18px 24px !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; border-radius: 18px; background: var(--ioa-ground); border: 1px solid var(--ioa-line); }
.ioa-benefits li { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--ioa-ink); }
.ioa-benefits svg { color: var(--ioa-ok); flex: none; }
.ioa-ad-slot:empty { display: none; }

/* How it works */
.ioa-how { display: grid; gap: 22px; }
.ioa-how__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; background: var(--ioa-surface); border: 1px solid var(--ioa-line); border-radius: 28px; padding: 40px; }
.ioa-how__row:nth-child(even) .ioa-how__visual { order: -1; }
.ioa-how__text { display: grid; gap: 14px; }
.ioa-how__tag { font: 600 13px/1 var(--ioa-mono); color: var(--ioa-cyan-ink); }
.ioa-scope .ioa-how__text h4 { font-size: 26px; line-height: 1.2; }
.ioa-how__visual { background: var(--ioa-ground); border-radius: 20px; padding: 28px; min-height: 230px; display: grid; place-items: center; overflow: hidden; }
.ioa-how__visual--phone { padding-bottom: 0; }
.ioa-file-stack { display: grid; gap: 10px; width: 100%; max-width: 330px; }
.ioa-file-pill { display: flex; align-items: center; gap: 12px; background: var(--ioa-surface); border: 1px solid var(--ioa-line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--ioa-shadow); }
.ioa-file-pill__ext { font: 600 12px/1 var(--ioa-mono); padding: 8px; border-radius: 8px; background: var(--ioa-surface-2); color: var(--ioa-ink); }
.ioa-file-pill__ext--apk { color: var(--ioa-android); }
.ioa-file-pill div { display: grid; gap: 2px; min-width: 0; }
.ioa-file-pill b { font: 500 14px/1.2 var(--ioa-mono); color: var(--ioa-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ioa-file-pill small { font-size: 13px; color: var(--ioa-muted); }
.ioa-file-pill__done { margin-left: auto; color: var(--ioa-cyan-ink); font-weight: 700; font-size: 13px; }
.ioa-manifest { width: 100%; max-width: 380px; margin: 0; background: #041a33; color: #cfe3ee; border-radius: 16px; padding: 18px; font: 400 13px/1.7 var(--ioa-mono); box-shadow: var(--ioa-shadow); overflow-x: auto; white-space: pre; }
.ioa-manifest .c { color: #6f8ea5; }
.ioa-manifest .k { color: #00d8d8; }
.ioa-manifest .v { color: #ffd479; }
.ioa-phone { width: 210px; height: 250px; border-radius: 34px 34px 0 0; background: #0a0f18; padding: 12px 12px 0; box-shadow: var(--ioa-shadow); align-self: end; margin-bottom: -28px; }
.ioa-phone__screen { height: 100%; border-radius: 24px 24px 0 0; background: linear-gradient(160deg, #1b6f96, #0a2f55); display: grid; place-items: center; padding: 16px; }
.ioa-ios-alert { background: rgba(245, 247, 250, 0.96); color: #0b1522; border-radius: 16px; width: 100%; text-align: center; overflow: hidden; }
.ioa-scope .ioa-ios-alert p { padding: 16px 12px 12px; font-size: 13px; line-height: 1.35; font-weight: 600; }
.ioa-ios-alert div { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #c9d1db; }
.ioa-ios-alert span { padding: 10px 0; font-size: 14px; color: #0a84ff; }
.ioa-ios-alert span + span { border-left: 1px solid #c9d1db; font-weight: 600; }

/* Dashboard preview */
.ioa-dash-section { background: var(--ioa-surface-2); }
.ioa-dash-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 56px; align-items: center; }
.ioa-dash-copy { display: grid; gap: 18px; }
.ioa-scope .ioa-dash-copy h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.12; }
.ioa-checks { list-style: none; display: grid; gap: 10px; }
.ioa-checks li { display: flex; align-items: center; gap: 10px; color: var(--ioa-ink); font-weight: 500; }
.ioa-checks svg { color: var(--ioa-cyan-ink); flex: none; }
.ioa-dash { display: grid; grid-template-columns: 190px minmax(0, 1fr); background: var(--ioa-surface); border: 1px solid var(--ioa-line); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(6, 33, 63, 0.14); font-size: 14px; }
.ioa-dash__side { background: var(--ioa-hero); color: var(--ioa-hero-muted); padding: 20px 14px; display: grid; grid-template-rows: auto 1fr auto; gap: 22px; }
.ioa-dash__side .ioa-logo img { height: 30px; }
.ioa-dash__nav { display: grid; gap: 4px; align-content: start; }
.ioa-dash__nav span { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-weight: 500; }
.ioa-dash__nav span.is-active { background: rgba(0, 216, 216, 0.14); color: var(--ioa-hero-ink); }
.ioa-dash__user { display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--ioa-hero-line); color: var(--ioa-hero-ink); font-weight: 600; }
.ioa-dash__user i { width: 28px; height: 28px; border-radius: 50%; background: var(--ioa-cyan); color: var(--ioa-on-cyan); display: grid; place-items: center; font: 700 11px/1 var(--ioa-body); font-style: normal; }
.ioa-dash__main { padding: 22px; display: grid; gap: 18px; min-width: 0; }
.ioa-dash__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ioa-scope .ioa-dash__top h3 { font-size: 20px; }
.ioa-dash__tools { display: flex; align-items: center; gap: 10px; }
.ioa-dash__search { width: 170px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--ioa-line); background: var(--ioa-ground); color: var(--ioa-muted); font-size: 13px; }
.ioa-dash__tools .ioa-btn { padding: 9px 14px; font-size: 13px; box-shadow: none; }
.ioa-dash__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ioa-dash__stat { border: 1px solid var(--ioa-line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; }
.ioa-dash__stat span { font-size: 12px; color: var(--ioa-muted); }
.ioa-scope .ioa-dash__stat strong { font-size: 22px; line-height: 1.1; color: var(--ioa-ink); font-variant-numeric: tabular-nums; }
.ioa-dash__stat em { font-style: normal; font-size: 12px; color: var(--ioa-ok); font-weight: 600; }
.ioa-dash__table-wrap { overflow-x: auto; }
.ioa-dash__table { width: 100%; border-collapse: collapse; min-width: 440px; }
.ioa-dash__table th { text-align: left; font: 600 11px/1 var(--ioa-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ioa-muted); padding: 0 10px 10px; border-bottom: 1px solid var(--ioa-line); }
.ioa-dash__table td { padding: 12px 10px; border-bottom: 1px solid var(--ioa-line); color: var(--ioa-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ioa-dash__table tr:last-child td { border-bottom: 0; }
.ioa-app-cell { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ioa-app-cell i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 700 11px/1 var(--ioa-body); font-style: normal; color: #ffffff; }
.ioa-status { display: inline-block; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.ioa-status--active { color: var(--ioa-ok); background: var(--ioa-ok-bg); }
.ioa-status--soon { color: var(--ioa-warn); background: var(--ioa-warn-bg); }
.ioa-status--expired { color: var(--ioa-bad); background: var(--ioa-bad-bg); }
.ioa-scope .ioa-dash__table td.ioa-muted-cell { color: var(--ioa-muted); }

/* Why choose */
.ioa-why { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.ioa-why__card { background: var(--ioa-surface); border: 1px solid var(--ioa-line); border-radius: 24px; padding: 32px; display: grid; gap: 14px; align-content: start; grid-column: span 2; }
.ioa-scope .ioa-why__card h4 { font-size: 21px; line-height: 1.25; }
.ioa-why__icon { width: 48px; height: 48px; border-radius: 14px; background: var(--ioa-surface-2); color: var(--ioa-cyan-ink); display: grid; place-items: center; }
.ioa-why__card--feature { grid-column: span 6; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 32px; background: linear-gradient(120deg, var(--ioa-hero) 0%, var(--ioa-hero-2) 100%); border-color: transparent; color: var(--ioa-hero-muted); }
.ioa-why__intro { display: grid; gap: 14px; }
.ioa-why__card--feature .ioa-eyebrow { color: var(--ioa-cyan); }
.ioa-scope .ioa-why__card--feature h4 { color: var(--ioa-hero-ink); font-size: 26px; }
.ioa-feature-points { display: grid; gap: 12px; list-style: none; }
.ioa-feature-points li { display: flex; gap: 12px; align-items: flex-start; color: var(--ioa-hero-ink); font-size: 16px; }
.ioa-feature-points li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: var(--ioa-cyan); box-shadow: 0 0 0 5px rgba(0, 216, 216, 0.18); }

/* CTA band */
.ioa-cta-band { padding-bottom: 104px; }
.ioa-cta { position: relative; overflow: hidden; border-radius: 32px; padding: 64px; background: radial-gradient(600px 300px at 88% 20%, rgba(0, 216, 216, 0.3), transparent 60%), linear-gradient(135deg, #00468c 0%, #041a33 100%); color: #cfe3ee; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 40px; align-items: center; }
.ioa-scope .ioa-cta h2 { color: #ffffff; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; }
.ioa-cta__copy { display: grid; gap: 14px; }
.ioa-scope .ioa-cta__copy p { font-size: 18px; max-width: 46em; }
.ioa-cta .ioa-btn { padding: 18px 32px; font-size: 17px; }

/* Services */
.ioa-services { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.ioa-services .ioa-section-head { margin-bottom: 0; }
.ioa-services__body { display: grid; gap: 28px; }
.ioa-tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.ioa-tags li { border: 1px solid var(--ioa-line); background: var(--ioa-surface); color: var(--ioa-ink); border-radius: 999px; padding: 8px 16px; font-size: 15px; font-weight: 500; }

/* Testimonials */
.ioa-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ioa-quote { margin: 0; background: var(--ioa-surface); border: 1px solid var(--ioa-line); border-radius: 24px; padding: 32px; display: grid; gap: 22px; align-content: space-between; }
.ioa-quote blockquote { margin: 0; font: 500 19px/1.55 var(--ioa-body); color: var(--ioa-ink); }
.ioa-quote figcaption { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ioa-ink); }
.ioa-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ioa-surface-2); color: var(--ioa-cyan-ink); display: grid; place-items: center; font: 700 14px/1 var(--ioa-body); flex: none; }

/* FAQ */
.ioa-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.ioa-faq .ioa-section-head { position: sticky; top: 104px; margin-bottom: 0; }
.ioa-faq__list { display: grid; gap: 12px; }
.ioa-faq__item { background: var(--ioa-surface); border: 1px solid var(--ioa-line); border-radius: 18px; }
.ioa-faq__item summary { list-style: none; cursor: pointer; padding: 22px 24px; display: flex; justify-content: space-between; gap: 16px; font: 600 18px/1.4 var(--ioa-body); color: var(--ioa-ink); }
.ioa-faq__item summary::-webkit-details-marker { display: none; }
.ioa-faq__item summary::after { content: "+"; font: 500 24px/1 var(--ioa-body); color: var(--ioa-cyan-ink); transition: transform 0.2s ease; flex: none; }
.ioa-faq__item[open] summary::after { transform: rotate(45deg); }
.ioa-scope .ioa-faq__item p { padding: 0 24px 22px; }
@media (prefers-reduced-motion: reduce) { .ioa-faq__item summary::after { transition: none; } }

/* Final CTA */
.ioa-final { background: var(--ioa-hero); color: var(--ioa-hero-muted); }
.ioa-final .ioa-wrap { padding-block: 88px; display: grid; justify-items: center; text-align: center; gap: 20px; }
.ioa-final .ioa-eyebrow { color: var(--ioa-cyan); }
.ioa-scope .ioa-final h2 { color: var(--ioa-hero-ink); font-size: clamp(30px, 4.4vw, 54px); line-height: 1.1; max-width: 16em; }
.ioa-final h2 em { font-style: normal; color: var(--ioa-cyan); }
.ioa-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 8px; }

/* Footer */
.ioa-footer { background: var(--ioa-hero); border-top: 1px solid var(--ioa-hero-line); color: var(--ioa-hero-muted); font-size: 15px; }
.ioa-footer__grid { padding-block: 56px 36px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 0.9fr); gap: 40px; }
.ioa-footer__about { display: grid; gap: 14px; align-content: start; }
.ioa-footer.ioa-scope h3 { color: var(--ioa-hero-ink); font-size: 16px; line-height: 1.2; margin-bottom: 14px; }
.ioa-footer.ioa-scope .ioa-footer__about h3 { margin-bottom: 0; }
.ioa-footer ul { list-style: none; display: grid; gap: 10px; }
.ioa-footer.ioa-scope a { color: var(--ioa-hero-muted); }
.ioa-footer.ioa-scope a:hover { color: var(--ioa-hero-ink); }
.ioa-footer__bottom { grid-column: 1 / -1; border-top: 1px solid var(--ioa-hero-line); padding-top: 24px; font-size: 13px; }

/* ---------- Shared page components ---------- */
.ioa-scope .ioa-nav__links a[aria-current="page"], .ioa-scope .ioa-nav__login[aria-current="page"] { color: var(--ioa-hero-ink); }
.ioa-scope .ioa-nav__links a[aria-current="page"], .ioa-scope .ioa-nav__login[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ioa-cyan); padding-bottom: 4px; }

.ioa-dark-band {
    background:
        radial-gradient(800px 420px at 85% 20%, rgba(0, 216, 216, 0.14), transparent 60%),
        linear-gradient(180deg, var(--ioa-hero) 0%, var(--ioa-hero-2) 100%);
    color: var(--ioa-hero-muted);
}
.ioa-page-hero { padding-block: 64px 72px; }
.ioa-page-hero__inner { display: grid; gap: 18px; max-width: 820px; }
.ioa-page-hero .ioa-eyebrow { color: var(--ioa-cyan); }
.ioa-scope .ioa-page-hero h1 { color: var(--ioa-hero-ink); font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; }
.ioa-scope .ioa-page-hero__lead { font-size: 19px; line-height: 1.55; color: var(--ioa-hero-muted); max-width: 62ch; }
.ioa-scope .ioa-page-hero__meta { font-size: 14px; color: var(--ioa-hero-muted); }
.ioa-page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }

.ioa-card { background: var(--ioa-surface); border: 1px solid var(--ioa-line); border-radius: 22px; padding: 28px; display: grid; gap: 16px; align-content: start; }
.ioa-scope .ioa-card h2 { font-size: 22px; line-height: 1.25; }
.ioa-icon-tile { width: 48px; height: 48px; border-radius: 14px; background: var(--ioa-surface-2); color: var(--ioa-cyan-ink); display: grid; place-items: center; flex: none; }

/* Features */
.ioa-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ioa-scope .ioa-feature h3 { font-size: 20px; line-height: 1.3; }
.ioa-benefits-band { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; border-radius: 28px; padding: 48px; }
.ioa-scope .ioa-benefits-band h2 { color: var(--ioa-hero-ink); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; }
.ioa-benefits-band .ioa-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.ioa-benefits-band .ioa-checks li { color: var(--ioa-hero-ink); align-items: flex-start; }
.ioa-benefits-band .ioa-checks svg { color: var(--ioa-cyan); margin-top: 4px; }

/* Pricing */
.ioa-pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; max-width: 1040px; margin: 0 auto; }
.ioa-price-card { gap: 20px; padding: 36px; align-content: stretch; grid-template-rows: auto; }
.ioa-price-card > .ioa-btn { margin-top: auto; }
.ioa-pricing--three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.ioa-price-card__head { display: grid; gap: 10px; }
.ioa-scope .ioa-price-card h2 { font-size: 24px; line-height: 1.25; }
.ioa-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding-top: 4px; }
.ioa-scope .ioa-price__amount { font: 700 44px/1 var(--ioa-display); color: var(--ioa-ink); letter-spacing: -0.02em; }
.ioa-price__from, .ioa-price__unit { font-size: 15px; color: var(--ioa-muted); font-weight: 500; }
.ioa-price-card__list li { align-items: flex-start; }
.ioa-price-card__list svg { margin-top: 3px; color: var(--ioa-ok); }
.ioa-price-card--extend { border: 2px solid var(--ioa-cyan); box-shadow: 0 0 0 6px var(--ioa-cyan-glow), var(--ioa-shadow); }
.ioa-price-card--extend .ioa-price-card__list svg { color: var(--ioa-cyan-ink); }
.ioa-price-plans { list-style: none; display: grid; border: 1px solid var(--ioa-line); border-radius: 16px; overflow: hidden; }
.ioa-price-plans li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; font-weight: 500; color: var(--ioa-ink); }
.ioa-price-plans li + li { border-top: 1px solid var(--ioa-line); }
.ioa-price-plans b { font-family: var(--ioa-display); font-size: 17px; }
.ioa-scope .ioa-price-card__note { font-size: 14px; color: var(--ioa-muted); text-align: center; }
.ioa-compare-wrap { overflow-x: auto; background: var(--ioa-surface); border: 1px solid var(--ioa-line); border-radius: 22px; }
.ioa-compare { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 16px; }
.ioa-compare th, .ioa-compare td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--ioa-line); }
.ioa-compare tbody tr:last-child th, .ioa-compare tbody tr:last-child td { border-bottom: 0; }
.ioa-compare thead th { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ioa-muted); background: var(--ioa-surface-2); }
.ioa-compare tbody th { font-weight: 600; color: var(--ioa-ink); }
.ioa-compare td { color: var(--ioa-ink-soft); }
.ioa-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Home pricing strip */
.ioa-free-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.ioa-free-strip .ioa-card { padding: 30px; }
.ioa-scope .ioa-free-strip h3 { font-size: 22px; line-height: 1.25; }
.ioa-free-strip__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.ioa-scope .ioa-free-strip__link { font-weight: 600; color: var(--ioa-cyan-ink); }

/* FAQ page and long text pages */
.ioa-faq-page { display: grid; gap: 24px; max-width: 860px; margin: 0 auto; }
.ioa-contact-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.ioa-scope .ioa-contact-card h2 { font-size: 20px; }
.ioa-prose { max-width: 820px; margin: 0 auto; background: var(--ioa-surface); border: 1px solid var(--ioa-line); border-radius: 24px; padding: 48px; display: grid; gap: 36px; }
.ioa-prose section { display: grid; gap: 12px; }
.ioa-scope .ioa-prose h2 { font-size: 22px; line-height: 1.3; }
.ioa-scope .ioa-prose p { max-width: 70ch; }
.ioa-scope .ioa-prose ul { padding-left: 22px; display: grid; gap: 10px; list-style: disc; }
.ioa-scope .ioa-prose li::marker { color: var(--ioa-cyan-ink); }
.ioa-scope .ioa-prose strong { color: var(--ioa-ink); }
.ioa-scope .ioa-prose a { text-decoration: underline !important; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Account pages */
.ioa-auth { padding-block: 64px 96px; }
.ioa-auth__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 64px; align-items: center; }
.ioa-auth__aside { display: grid; gap: 18px; order: -1; }
.ioa-auth__aside .ioa-eyebrow { color: var(--ioa-cyan); }
.ioa-scope .ioa-auth__aside h2 { color: var(--ioa-hero-ink); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; }
.ioa-auth__aside .ioa-checks li { color: var(--ioa-hero-ink); align-items: flex-start; }
.ioa-auth__aside .ioa-checks svg { color: var(--ioa-cyan); margin-top: 4px; }
.ioa-auth__card { background: var(--ioa-surface); border-radius: 24px; padding: 36px; box-shadow: 0 30px 80px rgba(0, 10, 25, 0.45); display: grid; gap: 22px; }
.ioa-auth__head { display: grid; gap: 6px; }
.ioa-scope .ioa-auth__head h1 { font-size: 28px; line-height: 1.15; }
.ioa-scope .ioa-auth__head p { font-size: 16px; color: var(--ioa-muted); }
.ioa-form { display: grid; gap: 16px; margin: 0; }
.ioa-form-field { display: grid; gap: 6px; }
.ioa-form-field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ioa-scope .ioa-form-field label { margin: 0; font-size: 14px; font-weight: 600; color: var(--ioa-ink); }
.ioa-scope .ioa-form-field__row a { font-size: 14px; font-weight: 600; }
.ioa-scope .ioa-input {
    width: 100%;
    border: 1px solid var(--ioa-line);
    background: var(--ioa-ground);
    color: var(--ioa-ink);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.4;
}
.ioa-scope .ioa-input:focus { outline: 2px solid var(--ioa-cyan); outline-offset: 1px; border-color: transparent; background: var(--ioa-surface); }
.ioa-scope .ioa-input[aria-invalid="true"] { border-color: var(--ioa-bad); }
.ioa-form-error { font-size: 13px; font-weight: 600; color: var(--ioa-bad); }
.ioa-form-alert { padding: 12px 14px; border-radius: 12px; background: var(--ioa-bad-bg); color: var(--ioa-bad); font-size: 14px; font-weight: 600; }
.ioa-form-alert--ok { background: var(--ioa-ok-bg); color: var(--ioa-ok); }
.ioa-scope .ioa-check { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: var(--ioa-ink-soft); cursor: pointer; }
.ioa-check input { width: 18px; height: 18px; accent-color: var(--ioa-cyan-ink); }
.ioa-divider { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ioa-muted); }
.ioa-divider::before, .ioa-divider::after { content: ""; flex: 1; height: 1px; background: var(--ioa-line); }
.ioa-scope .ioa-btn--google, .ioa-scope .ioa-btn--google:hover { background: var(--ioa-surface); color: var(--ioa-ink); border-color: var(--ioa-line); }
.ioa-scope .ioa-btn--google:hover { border-color: var(--ioa-cyan-ink); }
.ioa-scope .ioa-auth__switch { text-align: center; font-size: 15px; color: var(--ioa-ink-soft); }
.ioa-scope .ioa-auth__switch a { font-weight: 700; }

/* Install page (download link) */
.ioa-install { padding-block: 48px 64px; }
.ioa-install__grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; align-items: center; max-width: 920px; margin: 0 auto; }
.ioa-scope .ioa-install .alert { grid-column: 1 / -1; margin: 0; border-radius: 14px; border: 0; font-size: 15px; background: var(--ioa-bad-bg); color: var(--ioa-bad); }
.ioa-install__card { background: var(--ioa-surface); border-radius: 24px; padding: 32px; display: grid; gap: 20px; box-shadow: 0 30px 80px rgba(0, 10, 25, 0.45); min-width: 0; }
.ioa-install__app { display: flex; gap: 16px; align-items: center; min-width: 0; }
.ioa-install__icon { width: 64px; height: 64px; border-radius: 18px; background: var(--ioa-surface-2); color: var(--ioa-ink); display: grid; place-items: center; flex: none; }
.ioa-install__icon--android { color: var(--ioa-android); }
.ioa-install__title { display: grid; gap: 4px; min-width: 0; }
.ioa-scope .ioa-install__title h1 { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.15; overflow-wrap: anywhere; }
.ioa-install__meta { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.ioa-install__meta li { font-size: 13px; font-weight: 600; color: var(--ioa-ink-soft); background: var(--ioa-surface-2); border-radius: 999px; padding: 5px 11px; }
.ioa-scope .ioa-install .installationLink { font-size: 18px; padding-block: 18px; }
.ioa-scope .ioa-install .installationLink.disabled { opacity: 0.5; pointer-events: none; box-shadow: none; }
.ioa-scope .ioa-install__fallback { font-size: 14px; text-align: center; }
.ioa-scope .ioa-install__fallback a { font-weight: 700; }
.ioa-scope .ioa-install__hint { font-size: 14px; color: var(--ioa-muted); text-align: center; }
.ioa-install__qr { display: grid; justify-items: center; gap: 14px; text-align: center; }
.ioa-install__qr img { width: 208px; height: 208px; background: #ffffff; border-radius: 20px; padding: 12px; object-fit: contain; }
.ioa-scope .ioa-install__qr p { font-size: 14px; color: var(--ioa-hero-muted); max-width: 24ch; }

.ioa-guide { padding-block: 56px 88px; }
.ioa-guide__grid { max-width: 820px; margin: 0 auto; display: grid; gap: 20px; }
.ioa-details-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 20px; margin: 0; }
.ioa-details-list dt { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ioa-muted); }
.ioa-details-list dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; color: var(--ioa-ink); overflow-wrap: anywhere; }
.ioa-steps { list-style: none; counter-reset: ioa-step; display: grid; gap: 14px; }
.ioa-steps li { position: relative; padding-left: 44px; min-height: 30px; }
.ioa-steps li::before {
    counter-increment: ioa-step;
    content: counter(ioa-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ioa-surface-2);
    color: var(--ioa-cyan-ink);
    font: 700 14px/30px var(--ioa-body);
    text-align: center;
}
.ioa-scope .ioa-steps strong { color: var(--ioa-ink); }
.ioa-guide .ad-incontent { margin: 8px auto; }

/* Status page (expired link) and device info */
.ioa-expired { padding-block: 72px 104px; }
.ioa-expired__card { max-width: 580px; margin: 0 auto; background: var(--ioa-surface); border-radius: 24px; padding: 40px; text-align: center; display: grid; gap: 14px; justify-items: center; box-shadow: 0 30px 80px rgba(0, 10, 25, 0.45); }
.ioa-expired__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--ioa-warn-bg); color: var(--ioa-warn); display: grid; place-items: center; }
.ioa-scope .ioa-expired__card h1 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; }
.ioa-scope .ioa-expired__card p { max-width: 46ch; }
.ioa-expired__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 8px; }
.ioa-device { max-width: 640px; margin: 0 auto; }
.ioa-scope .ioa-device .alert { margin: 0; border-radius: 14px; border: 0; font-size: 15px; background: var(--ioa-bad-bg); color: var(--ioa-bad); }
.ioa-scope .ioa-device .installationProfileLink.disabled { opacity: 0.5; pointer-events: none; box-shadow: none; }
.ioa-device__rows { display: grid; margin: 0; border-top: 1px solid var(--ioa-line); }
.ioa-device__rows > div { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--ioa-line); }
.ioa-device__rows dt { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ioa-muted); }
.ioa-device__rows dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 15px/1.4 var(--ioa-mono); color: var(--ioa-ink); overflow-wrap: anywhere; }
.ioa-scope .ioa-device__forget a { color: var(--ioa-bad); font-weight: 600; }

@media (max-width: 1020px) {
    .ioa-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ioa-pricing--three { grid-template-columns: 1fr; max-width: 620px; }
    .ioa-benefits-band { grid-template-columns: 1fr; padding: 36px; }
    .ioa-auth__grid { grid-template-columns: 1fr; gap: 32px; max-width: 520px; margin: 0 auto; }
    .ioa-auth__aside { order: 0; }
}
@media (max-width: 760px) {
    .ioa-pricing, .ioa-free-strip { grid-template-columns: 1fr; }
    .ioa-install__grid { grid-template-columns: 1fr; }
    .ioa-install__qr { display: none; }
}
@media (max-width: 560px) {
    .ioa-page-hero { padding-block: 44px 52px; }
    .ioa-price-card { padding: 26px 22px; }
    .ioa-scope .ioa-price__amount { font-size: 38px; }
    .ioa-compare th, .ioa-compare td { padding: 14px 16px; }
    .ioa-scope .ioa-page-hero__lead { font-size: 17px; }
    .ioa-page-hero__actions .ioa-btn { width: 100%; }
    .ioa-feature-grid { grid-template-columns: 1fr; }
    .ioa-card { padding: 22px; }
    .ioa-benefits-band { padding: 28px 22px; border-radius: 22px; }
    .ioa-benefits-band .ioa-checks { grid-template-columns: 1fr; }
    .ioa-prose { padding: 26px 20px; border-radius: 20px; gap: 28px; }
    .ioa-auth { padding-block: 32px 64px; }
    .ioa-auth__card { padding: 24px 20px; }
    .ioa-install { padding-block: 24px 40px; }
    .ioa-install__card { padding: 22px 18px; }
    .ioa-install__icon { width: 52px; height: 52px; border-radius: 14px; }
    .ioa-guide { padding-block: 36px 64px; }
    .ioa-expired { padding-block: 40px 64px; }
    .ioa-expired__card { padding: 28px 20px; }
    .ioa-expired__actions .ioa-btn { width: 100%; }
}

/* Page loader used by the payment handlers */
body.ioa .page-loader-div {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(4, 26, 51, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
body.ioa .page-loader-div .loading { width: 48px; height: 48px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.3); border-top-color: var(--ioa-cyan); animation: ioa-spin 0.9s linear infinite; }
body.ioa .page-loader-div p { color: #ffffff; font-weight: 600; margin: 0; }

/* Tablet */
@media (max-width: 1020px) {
    .ioa-hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .ioa-upload-stage { padding: 0; }
    .ioa-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .ioa-flow__step:nth-child(3)::before { display: none; }
    .ioa-how__row { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
    .ioa-how__row:nth-child(even) .ioa-how__visual { order: 0; }
    .ioa-dash-layout { grid-template-columns: 1fr; gap: 40px; }
    .ioa-dash-copy { order: -1; }
    .ioa-why__card { grid-column: span 6; }
    .ioa-why__card--feature { grid-template-columns: 1fr; }
    .ioa-cta { grid-template-columns: 1fr; padding: 40px; }
    .ioa-services, .ioa-faq { grid-template-columns: 1fr; gap: 32px; }
    .ioa-faq .ioa-section-head { position: static; }
    .ioa-quotes { grid-template-columns: 1fr; }
    .ioa-footer__grid { grid-template-columns: 1fr 1fr; }
    .ioa-footer__about { grid-column: 1 / -1; }
}

/* Mobile navigation */
@media (max-width: 991px) {
    .ioa-nav__toggle { display: inline-flex; }
    .ioa-nav__menu {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 8px 24px 24px;
        background: var(--ioa-hero);
        border-bottom: 1px solid var(--ioa-hero-line);
        box-shadow: 0 24px 40px rgba(0, 10, 25, 0.35);
    }
    .ioa-nav.is-open .ioa-nav__menu { display: flex; }
    .ioa-nav__links { flex-direction: column; align-items: stretch; gap: 0; }
    .ioa-scope .ioa-nav__links a { padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--ioa-hero-line); }
    .ioa-nav__actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .ioa-nav__actions .ioa-btn, .ioa-nav__logout .ioa-btn { width: 100%; padding-block: 14px; font-size: 16px; }
    .ioa-scope .ioa-nav__login { text-align: center; padding: 12px; font-size: 16px; }
}

@media (max-width: 700px) {
    .ioa-dash { grid-template-columns: 1fr; }
    .ioa-dash__side { display: none; }
    .ioa-dash__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ioa-dash__search { display: none; }
}

/* Phone */
@media (max-width: 560px) {
    body.ioa { font-size: 16px; }
    .ioa-wrap { padding-inline: 18px; }
    .ioa-section { padding-block: 72px; }
    .ioa-section--flush-top { padding-top: 0; }
    .ioa-section-head { margin-bottom: 36px; }
    .ioa-logo img { height: 34px; }
    .ioa-nav__inner { min-height: 64px; }
    .ioa-nav__menu { padding-inline: 18px; }
    .ioa-hero { padding-block: 40px 56px; }
    .ioa-hero__copy { gap: 22px; }
    .ioa-hero__stats { gap: 10px 24px; }
    .ioa-scope .ioa-hero__stats strong { font-size: 22px; }
    .ioa-airwaves { display: none; }
    .ioa-upload { padding: 20px; border-radius: 20px; }
    .ioa-share { grid-template-columns: 1fr; }
    .ioa-qr { order: -1; }
    .ioa-flow-section { padding-block: 56px 48px; }
    .ioa-flow { grid-template-columns: 1fr; row-gap: 44px; }
    .ioa-flow__step::before { display: none; }
    .ioa-flow__step + .ioa-flow__step::after { content: ""; position: absolute; top: -34px; left: 50%; width: 2px; height: 24px; background: var(--ioa-line); }
    .ioa-benefits { justify-content: flex-start; padding: 18px !important; gap: 12px 22px; }
    .ioa-how__row { padding: 22px; border-radius: 22px; }
    .ioa-how__visual { padding: 20px; }
    .ioa-scope .ioa-how__text h4 { font-size: 22px; }
    .ioa-dash__main { padding: 16px; }
    .ioa-why__card { padding: 24px; }
    .ioa-cta { padding: 30px 22px; border-radius: 24px; }
    .ioa-cta .ioa-btn { width: 100%; }
    .ioa-cta-band { padding-bottom: 72px; }
    .ioa-quote { padding: 24px; }
    .ioa-faq__item summary { padding: 18px 18px; font-size: 17px; }
    .ioa-scope .ioa-faq__item p { padding: 0 18px 18px; }
    .ioa-final .ioa-wrap { padding-block: 64px; }
    .ioa-final__actions .ioa-btn { width: 100%; }
    .ioa-footer__grid { grid-template-columns: 1fr; gap: 28px; }
}