/* ============================================================
   Orbit Wall — New Static Pages Responsive Styles
   Breakpoints match existing style.css: 1024px | 768px | 480px
   ============================================================ */

/* ── Shared: Floating card pullup (hero overlap) ─────────── */
.page-pullup-card {
    margin-top: -80px;
    position: relative;
    z-index: 10;
}

/* ── Shared: Page content typography ────────────────────── */
.page-content h2,
.page-content h3 {
    color: var(--text-primary);
    margin: 32px 0 16px;
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    font-size: 1.5rem;
}

.page-content h2:first-child {
    margin-top: 0;
}

.page-content p {
    margin-bottom: 24px;
    color: var(--text-secondary);
    line-height: 1.9;
    font-size: 1.05rem;
}

.page-content ul,
.page-content ol {
    margin: 16px 0 24px 24px;
    color: var(--text-secondary);
    line-height: 1.9;
    font-size: 1.05rem;
    list-style: disc;
}

.page-content li {
    margin-bottom: 12px;
}

.page-content a {
    color: var(--orbit-cyan);
    text-decoration: none;
}

.page-content a:hover {
    text-decoration: underline;
}

/* ── FAQ: icon-card rows ─────────────────────────────────── */
.faq-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* ── Careers: perks 2-col grid ──────────────────────────── */
.perks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* ── Affiliate: 3-col steps grid ────────────────────────── */
.affiliate-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ── Docs: step rows ─────────────────────────────────────── */
.doc-step {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* ============================================================
   TABLET — max-width: 1024px
   ============================================================ */
@media (max-width: 1024px) {
    .affiliate-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* ============================================================
   MOBILE LANDSCAPE / TABLET — max-width: 768px
   ============================================================ */
@media (max-width: 768px) {

    /* Reduce hero padding-bottom so the card pullup is smaller */
    .page-hero-section {
        padding-bottom: 80px !important;
    }

    .page-pullup-card {
        margin-top: -50px;
    }

    /* Floating card padding */
    .page-main-card {
        padding: 28px 20px !important;
    }

    /* page-content typography scale down */
    .page-content h2,
    .page-content h3 {
        font-size: 1.2rem;
    }

    .page-content p,
    .page-content ul,
    .page-content ol {
        font-size: 0.95rem;
    }

    /* FAQ items: stack icon + text vertically if too narrow */
    .faq-item {
        gap: 14px;
    }

    /* Affiliate: 1-column on mobile */
    .affiliate-steps {
        grid-template-columns: 1fr;
    }

    /* Careers perks: 1-column on mobile */
    .perks-grid {
        grid-template-columns: 1fr;
    }

    /* Docs step row: shrink gap */
    .doc-step {
        gap: 14px;
    }

    /* Inline grid-3 used inside affiliate & docs pages */
    [class*="grid-3"],
    [class*="grid-2"] {
        /* Let auto-fill handle it — override only when columns are too tight */
        grid-template-columns: 1fr;
    }

    /* Commission banner number */
    .commission-number {
        font-size: 2.5rem !important;
    }

    /* CTA button groups: stack */
    .page-cta-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* ============================================================
   MOBILE PORTRAIT — max-width: 480px
   ============================================================ */
@media (max-width: 480px) {

    /* Hero pullup: remove negative margin, let card sit flush */
    .page-pullup-card {
        margin-top: 0;
    }

    /* No border-radius on full-width cards */
    .page-main-card {
        border-radius: var(--radius) !important;
        padding: 22px 16px !important;
    }

    /* FAQ icon shrink */
    .faq-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.85rem !important;
        flex-shrink: 0;
    }

    /* Careers no-openings icon */
    .careers-hero-icon {
        width: 54px !important;
        height: 54px !important;
        font-size: 1.4rem !important;
    }

    /* Docs main icon */
    .docs-hero-icon {
        width: 54px !important;
        height: 54px !important;
        font-size: 1.4rem !important;
    }

    /* Commission banner */
    .commission-number {
        font-size: 2rem !important;
    }

    /* Perks / step cards: tighten padding */
    .perk-card,
    .doc-step-card {
        padding: 20px 16px !important;
    }

    /* doc-step: align top, allow wrap */
    .doc-step {
        flex-wrap: wrap;
    }

    /* section text */
    .page-content h2,
    .page-content h3 {
        font-size: 1.1rem;
    }
}