/**
 * OS Landing — Mobile Overrides
 * Applied after os-landing.css.
 * Breakpoint strategy: progressive enhancement, mobile-first refinements.
 *
 * These rules supplement the responsive blocks already in os-landing.css.
 * Focus: thumb-reach CTAs, readability, visual rhythm on small screens.
 */

@media (max-width: 900px) {

    /* ── Starfield: reduce opacity on mobile for performance feel ─────────── */
    #os-stars-canvas { opacity: 0.65; }

    /* ── Layout ──────────────────────────────────────────────────────────── */

    .os-container { padding: 0 24px; }
    .os-section     { padding: 72px 0; }
    .os-section--sm { padding: 56px 0; }
    .os-section--lg { padding: 88px 0; }

    /* ── Hero ─────────────────────────────────────────────────────────────── */

    .os-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 88px;
        padding-bottom: 64px;
        gap: 44px;
        text-align: center;
    }

    /* Show mockup above text on tablet/mobile */
    .os-hero__visual  { order: 1; margin-bottom: 8px; }
    .os-hero__content { order: 2; }

    .os-hero__sub {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .os-hero__actions {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .os-trust-bar {
        justify-content: center;
    }

    /* Mockup size on tablet */
    .os-doc-stack { width: 260px; height: 360px; }
    .os-doc       { width: 244px; height: 342px; }

    /* ── Recognition ─────────────────────────────────────────────────────── */

    .os-recognition__grid { grid-template-columns: 1fr; }

    .os-recognition__divider {
        height: 1px;
        width: 60%;
        margin: 0 auto;
        background: var(--os-border-mid, #242438);
    }

    .os-recognition__item { padding: 36px 24px; }

    /* ── What It Is ──────────────────────────────────────────────────────── */

    .os-what__pillars {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* ── Artifact ─────────────────────────────────────────────────────────── */

    .os-artifact__pages {
        grid-template-columns: 1fr;
        max-width: 360px;
        margin: 48px auto;
    }

    .os-artifact__page--featured { transform: none; }
    .os-artifact__page--featured:hover { transform: translateY(-6px); }

    /* ── Inside Blueprint ────────────────────────────────────────────────── */

    .os-inside__grid { grid-template-columns: 1fr; }
    .os-feature { padding: 30px 26px; }

    /* ── Archetype ───────────────────────────────────────────────────────── */

    .os-archetype__grid { grid-template-columns: repeat(2, 1fr); }

    /* ── Social Proof ─────────────────────────────────────────────────────── */

    .os-proof__grid { grid-template-columns: 1fr; gap: 18px; }

    /* ── The Making ──────────────────────────────────────────────────────── */

    .os-making__steps { grid-template-columns: 1fr; gap: 48px; }
    .os-making__steps::before { display: none; }

    /* ── Pricing ──────────────────────────────────────────────────────────── */

    .os-pricing__card { padding: 52px 36px; }
    .os-pricing__price { font-size: 52px; }

    /* ── Footer ───────────────────────────────────────────────────────────── */

    .os-footer__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
    }

    .os-footer__links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

}

/* ── Small mobile (≤ 480px) ──────────────────────────────────────────────── */

@media (max-width: 480px) {

    /* ── Container ────────────────────────────────────────────────────────── */

    .os-container { padding: 0 18px; }
    .os-section   { padding: 56px 0; }

    /* ── Hero ─────────────────────────────────────────────────────────────── */

    .os-hero { padding-top: 96px; padding-bottom: 56px; gap: 36px; }

    /* Compact mockup on small screens */
    .os-doc-stack { width: 210px; height: 292px; }
    .os-doc       { width: 196px; height: 274px; }
    .os-doc--back-3 { top: 12px; left: 18px; }
    .os-doc--back-2 { top: 6px;  left: 9px;  }
    .os-doc--front  { padding: 22px 18px 16px; }

    .os-doc__chart {
        width: 86px;
        height: 86px;
        margin: 2px auto 12px;
    }

    .os-doc__chart-circle--outer { width: 86px; height: 86px; }
    .os-doc__chart-circle--mid   { width: 60px; height: 60px; }
    .os-doc__chart-circle--inner { width: 34px; height: 34px; }

    .os-doc__archetype-name { font-size: 15px; }

    /* ── Full-width CTAs — thumb-friendly ─────────────────────────────────── */

    .os-btn--primary,
    .os-btn--ghost {
        width: 100%;
        text-align: center;
        padding: 19px 28px;
        font-size: 16px;
        display: block;
        letter-spacing: 1px;
    }

    /* ── Trust bar ────────────────────────────────────────────────────────── */

    .os-trust-bar {
        gap: 14px;
        flex-direction: column;
        align-items: center;
    }

    /* ── Header ────────────────────────────────────────────────────────────── */

    .os-header { padding: 14px 0; }
    .os-header__brand { font-size: 9px; letter-spacing: 4px; }
    .os-header__nav { gap: 12px; }
    .os-header__account { display: none; }
    .os-header__cta { padding: 10px 20px; font-size: 12px; letter-spacing: 0.5px; }

    /* ── Feature items ─────────────────────────────────────────────────────── */

    .os-feature {
        grid-template-columns: 38px 1fr;
        gap: 14px;
        padding: 26px 20px;
    }

    /* ── Archetype ─────────────────────────────────────────────────────────── */

    .os-archetype__grid { grid-template-columns: repeat(2, 1fr); }
    .os-archetype__item { padding: 22px 12px; }
    .os-archetype__name { font-size: 13px; }

    /* ── Pricing ───────────────────────────────────────────────────────────── */

    .os-pricing__card { padding: 40px 22px; }
    .os-pricing__price { font-size: 44px; }
    .os-pricing__price sup { font-size: 22px; }
    .os-pricing__anchor { font-size: 18px; }

    /* ── FAQ ───────────────────────────────────────────────────────────────── */

    body.os-landing-page .os-faq__question {
        font-size: 16px;
        padding: 20px 0;
    }

    /* ── Recognition ───────────────────────────────────────────────────────── */

    .os-recognition__item-value { font-size: 48px; }

    /* ── Headlines ─────────────────────────────────────────────────────────── */

    .os-headline--xl { font-size: clamp(28px, 8vw, 40px); }
    .os-headline--lg { font-size: clamp(22px, 7vw, 32px); }

    .os-hero__headline { font-size: clamp(32px, 9vw, 46px); }

    /* ── Section separators ────────────────────────────────────────────────── */

    .os-separator { max-width: 200px; }

    /* ── Testimonials ──────────────────────────────────────────────────────── */

    .os-testimonial { padding: 32px 24px; }
    .os-testimonial__quote { font-size: 15px; }

    /* ── Final CTA ─────────────────────────────────────────────────────────── */

    .os-final-cta__headline { font-size: clamp(28px, 7.5vw, 42px); }

}

/* ── Ultra-small (≤ 360px) ───────────────────────────────────────────────── */

@media (max-width: 360px) {

    .os-container { padding: 0 16px; }

    .os-doc-stack { width: 190px; height: 265px; }
    .os-doc       { width: 178px; height: 250px; }

    .os-hero__headline { font-size: 30px; }

    .os-archetype__item { padding: 18px 10px; }
    .os-archetype__name { font-size: 12px; }

}

/* ── Sticky mobile CTA bar — mobile-only refinements ────────────────────── */

@media (max-width: 900px) {

    /* Hero proof bar — center on tablet/mobile */
    .os-hero__proof {
        justify-content: center;
    }

}

@media (max-width: 480px) {

    /* Proof bar — reduce text size on very small screens */
    .os-hero__proof-text {
        font-size: 10px;
        letter-spacing: 0.5px;
    }

    /* Testimonial header tighten */
    .os-testimonial__header { gap: 10px; }
    .os-testimonial__avatar { width: 38px; height: 38px; font-size: 15px; }
    .os-verified { font-size: 8px; padding: 3px 6px; }

    /* Mobile CTA bar — ensure full-width safe btn */
    .os-mobile-cta { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .os-mobile-cta__btn { font-size: 13px; padding: 16px 20px; }

}

@media (max-width: 360px) {

    .os-mobile-cta__btn { font-size: 12px; letter-spacing: 0.8px; }

}

/* ── Visual Immersion Pass — new components responsive ───────────────────── */

@media (max-width: 900px) {

    /* Hero badge */
    .os-doc-badge { width: 64px; height: 64px; right: -14px; top: -8px; }
    .os-doc-badge__num { font-size: 18px; }

    /* Presence interstitial */
    .os-presence__layout {
        grid-template-columns: 1fr;
        gap: 44px;
        text-align: center;
    }

    .os-presence__portrait { order: -1; }

    .os-portrait {
        width: 240px;
        height: 336px;
        margin: 0 auto;
    }

    .os-presence__attr {
        padding-left: 0;
        border-left: none;
        padding-top: 12px;
        border-top: 1px solid rgba(201,168,76,.2);
        align-items: center;
    }

    .os-presence__quote-text { padding-left: 22px; }

    /* Pages reveal — 2-column on tablet */
    .os-pages-reveal__grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Inside anchor */
    .os-inside__anchor { padding: 44px 28px; }
    .os-inside__anchor-inner {
        flex-direction: column;
        gap: 28px;
        text-align: center;
    }

    /* Pull quote */
    .os-pullquote__quote { font-size: clamp(26px, 6vw, 40px); }

    /* Cosmic band */
    .os-cosmic-band__statement { font-size: clamp(18px, 3.5vw, 24px); }
    .os-cosmic-band__stars { max-width: 420px; }

}

@media (max-width: 640px) {

    /* Hero badge hidden on small screens — mockup is compact */
    .os-doc-badge { display: none; }

    /* Presence */
    .os-portrait { width: 200px; height: 282px; }
    .os-presence__quote-text { font-size: clamp(20px, 5.5vw, 26px); padding-left: 18px; }

    /* Pages reveal — single column on small mobile */
    .os-pages-reveal__grid {
        grid-template-columns: 1fr;
        max-width: 260px;
    }

    /* Pull quote */
    .os-pullquote__quote { font-size: clamp(24px, 7.5vw, 34px); }
    .os-pullquote__quote::before { font-size: 1.3em; left: -0.25em; }

    /* Inside anchor */
    .os-inside__anchor { padding: 36px 20px; }
    .os-inside__anchor-text { font-size: 18px; }
    .os-inside__anchor-stack { display: none; } /* hide mini stack on very small screens */

    /* Cosmic band */
    .os-cosmic-band__statement { font-size: 17px; line-height: 1.6; }
    .os-cosmic-band__stars { max-width: 320px; }

}

@media (max-width: 360px) {

    .os-portrait { width: 180px; height: 252px; }
    .os-presence__quote-text { font-size: 19px; }
    .os-pullquote__quote { font-size: 22px; }

}