/* Scoped responsive and compatibility refinements. */

/* One-shot section reveal. */
.reveal {
    opacity: 1;
    transform: none;
}

body.reveal-ready .reveal {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance, 12px), 0);
    transition:
        opacity 300ms cubic-bezier(.22, 1, .36, 1),
        transform 300ms cubic-bezier(.22, 1, .36, 1);
    transition-delay: min(var(--reveal-delay, 0ms), 120ms);
    backface-visibility: hidden;
}

body.reveal-ready .reveal.reveal-from-right {
    transform: translate3d(12px, 0, 0);
}

body.reveal-ready .reveal.reveal-from-left {
    transform: translate3d(-12px, 0, 0);
}

body.reveal-ready .reveal.reveal-soft {
    --reveal-distance: 8px;
}

body.reveal-ready .reveal.reveal-hero {
    --reveal-distance: 12px;
}

body.reveal-ready .reveal.reveal-scale {
    --reveal-distance: 10px;
}

body.reveal-ready .reveal.reveal-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }

    .reveal,
    body.reveal-ready .reveal,
    body.reveal-ready .reveal.reveal-from-right,
    body.reveal-ready .reveal.reveal-from-left {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Stage 3D — Affiliate responsive ownership. */
@media (max-width: 980px) {
    #view-affiliate .affiliate-panel-grid,
    #view-affiliate .affiliate-info-grid,
    #view-affiliate .affiliate-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-affiliate .affiliate-rates-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #view-affiliate .affiliate-metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    #view-affiliate .affiliate-public-section,
    #view-affiliate .affiliate-dashboard-section {
        padding: var(--space-8) 0 var(--space-12);
    }

    #view-affiliate .affiliate-shell,
    #view-affiliate .affiliate-dashboard-shell {
        width: min(100% - 40px, 1160px);
    }

    #view-affiliate .affiliate-tabs-bar,
    #view-affiliate .affiliate-join-grid,
    #view-affiliate .affiliate-mini-grid,
    #view-affiliate .affiliate-rates-grid,
    #view-affiliate .affiliate-tax-grid,
    #view-affiliate .affiliate-compliance-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-affiliate .affiliate-field-wide {
        grid-column: auto;
    }

    #view-affiliate .affiliate-dashboard-header,
    #view-affiliate .affiliate-referrals-header {
        align-items: stretch;
        flex-direction: column;
    }

    #view-affiliate .affiliate-history-button {
        align-self: flex-start;
    }

    #view-affiliate .affiliate-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #view-affiliate .affiliate-dashboard-tiers {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-affiliate .dashboard-tier-card {
        min-height: 86px;
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        gap: var(--space-3);
        text-align: left;
    }

    #view-affiliate .affiliate-inline-control {
        flex-direction: column;
    }

    #view-affiliate .affiliate-inline-control > button {
        width: 100%;
    }

    #view-affiliate .affiliate-referral-meta {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    #view-affiliate .affiliate-metric-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-affiliate .affiliate-intro-panel,
    #view-affiliate .affiliate-panel-card,
    #view-affiliate .affiliate-dashboard-card {
        padding: 20px;
    }

    #view-affiliate .affiliate-hero-title {
        font-size: 52px;
    }

    .cashout-entry {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-affiliate .affiliate-tab-btn,
    #view-affiliate .affiliate-history-button,
    #view-affiliate .affiliate-copy-button,
    #view-affiliate .dashboard-tier-card,
    #view-affiliate .affiliate-tier-progress {
        transition: none !important;
        transform: none !important;
    }
}

/* Stage 3C public conversion surfaces: responsive composition only. */
@media (max-width: 980px) {
    #view-pricing .price-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 620px;
    }

    #view-pricing .pricing-note-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 620px;
    }

    #view-resources .resources-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    #view-pricing .pricing-section {
        padding-block: var(--space-12) var(--space-16);
    }

    #view-pricing .pricing-download {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    #view-download .download-section {
        padding-block: var(--space-12) var(--space-16);
    }

    #view-download .download-product-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
    }

    #view-resources .resources-section,
    #view-faq .faq-section,
    #view-legal .legal-section {
        padding-block: var(--space-12) var(--space-16);
    }

    #view-resources .resources-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-faq .faq-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    #view-faq .faq-support {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-faq .faq-support-actions {
        justify-content: flex-start;
    }

    #view-legal .legal-tabs {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-legal .legal-context-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-legal .legal-context-item {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    #view-legal .legal-context-item:last-child {
        border-bottom: 0;
    }

    #view-legal .legal-tab {
        text-align: left;
    }

    #view-legal .legal-tab.active,
    #view-legal .legal-tab[aria-pressed="true"] {
        box-shadow: inset 3px 0 0 var(--color-accent);
    }
}

@media (max-width: 520px) {
    #view-pricing .price-card {
        padding-inline: 20px;
    }

    #view-pricing .plan-card-flag {
        margin-left: -20px;
    }

    #view-pricing .price-amount {
        font-size: 50px;
    }

    #view-download .download-requirements,
    #view-download .download-integrity {
        padding: 18px;
    }

    #view-download .download-requirements-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-download .download-integrity-heading {
        display: grid;
    }

    #view-download .download-integrity-state {
        justify-self: start;
    }

    #view-download .download-hash-row {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-download .download-copy-button {
        justify-self: start;
    }

    #view-download .app-window-body {
        padding: 16px;
    }

    #view-download .app-window-row {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    #view-download .app-window-row-state {
        grid-column: 2;
        justify-self: start;
    }

    #view-legal .legal-page-panel {
        padding: 18px;
    }
}

/* Precision Console responsive composition. */
@media (max-width: 980px) {
    #hero {
        padding-block: var(--space-12) var(--space-16);
    }

    .hero-shell,
    .home-overview-grid,
    .home-performance-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-shell {
        gap: var(--space-8);
    }

    .hero-copy,
    .hero-side {
        width: 100%;
        max-width: var(--container-reading);
        margin-inline: auto;
    }

    .home-signal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-signal-item:nth-child(2) {
        border-right: 0;
    }

    .home-signal-item:nth-child(-n + 2) {
        border-bottom: 1px solid var(--color-border);
    }

    .feat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    #hero {
        padding-block: var(--space-8) var(--space-12);
    }

    .hero-title {
        font-size: clamp(48px, 15vw, 68px);
    }

    .hero-assurance,
    .home-signal-grid,
    .home-difference-grid,
    .home-steps-grid,
    .feat-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-signal-item,
    .home-signal-item:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .home-signal-item:last-child {
        border-bottom: 0;
    }

    .home-section {
        padding-top: var(--space-12);
    }

    .home-final-section {
        padding-bottom: var(--space-12);
    }

    .home-section-shell {
        padding: var(--space-6);
        border-radius: var(--radius-card);
    }

    .home-section-shell-flat {
        padding-inline: 0;
    }

    .home-overview-grid,
    .home-performance-grid {
        gap: var(--space-8);
    }

    .home-difference-card {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    #features {
        padding-block: var(--space-16);
    }
}

@media (max-width: 520px) {
    .hero-btns,
    .home-cta-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-btns .btn,
    .home-cta-actions .btn {
        width: 100%;
    }

    .app-shot-body {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .app-shot-sidebar {
        display: none;
    }

    .app-shot-topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .app-shot-quick-links {
        justify-content: flex-start;
    }

    .app-shot-panel-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-preview {
        padding: var(--space-2);
        border-radius: var(--radius-card);
    }

    .home-step-card {
        padding: var(--space-4);
    }
}

/* Stage 3D stateful product surfaces. */
@media (max-width: 520px) {
    #view-auth .auth-wrap {
        width: 100%;
        min-height: calc(100vh - var(--nav-h));
        padding: var(--space-4) 20px var(--space-8);
    }

    #view-auth .auth-card,
    #view-app-auth .app-auth-panel,
    #view-success .success-panel {
        padding: var(--space-6) 20px;
    }

    #view-auth .auth-title {
        font-size: 40px;
    }

    #view-auth .otp-group {
        grid-template-columns: repeat(3, minmax(44px, 1fr));
    }

    #view-app-auth {
        padding: 20px;
    }

    #view-app-auth .app-auth-title {
        font-size: 44px;
    }

    #view-success .success-section {
        padding: var(--space-8) 20px var(--space-12);
    }

    #view-success .success-actions {
        align-items: stretch;
        flex-direction: column;
    }

    #view-success .success-actions .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-auth .otp-box.shake,
    #view-auth .auth-card,
    #view-app-auth .app-auth-panel {
        animation: none !important;
        transform: none !important;
    }

    #view-app-auth .app-auth-loading-state {
        opacity: 1 !important;
    }
}

@media (max-width: 980px) {
    #view-dashboard .dash-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-dashboard .dash-col {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    #view-dashboard .dashboard-section {
        padding: var(--space-8) 20px var(--space-12);
    }

    #view-dashboard .dash-col,
    #view-dashboard .dash-kv-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-dashboard .dash-header {
        align-items: center;
    }

    #view-dashboard .dash-title {
        font-size: 40px;
    }

    #view-dashboard .dash-card {
        padding: 20px;
    }
}

@media (max-width: 520px) {
    #view-dashboard .dash-header {
        margin-bottom: var(--space-6);
    }

    #view-dashboard .dash-action-row,
    #view-dashboard .dash-footer-row {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-dashboard .dash-action-row {
        display: grid;
    }

    #view-dashboard .dash-action-row > * {
        width: 100%;
    }

    #view-dashboard .dash-connect-row,
    #view-dashboard .dash-pm {
        align-items: stretch;
        flex-direction: column;
    }

    #view-dashboard .dash-connect-row > :last-child,
    #view-dashboard .dash-pm > .dash-link-btn {
        align-self: flex-start;
    }

    #view-dashboard .dash-connect-left,
    #view-dashboard .dash-connect-body {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .settings-overlay {
        padding:
            max(12px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }

    .settings-modal {
        max-height: 100%;
    }

    .sm-body {
        padding:
            20px
            20px
            max(20px, env(safe-area-inset-bottom));
        scroll-padding-block:
            20px
            max(20px, env(safe-area-inset-bottom));
    }

    .sm-body button {
        scroll-margin-block: 20px;
    }

    .sm-account-card {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .sm-avatar-image,
    .sm-avatar-fallback {
        width: 48px;
        height: 48px;
    }

    .sm-plan-summary {
        grid-column: 1 / -1;
        padding-top: var(--space-3);
        border-top: 1px solid var(--color-border);
        text-align: left;
    }

    .sm-detail-row,
    .sm-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .sm-detail-value {
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .toast-container {
        right: 16px;
        bottom: max(16px, env(safe-area-inset-bottom));
        left: 16px;
        width: auto;
    }

    .cashout-overlay {
        padding:
            max(12px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }

    .cashout-dialog {
        max-height: calc(100dvh - 24px);
    }

    .cashout-header {
        padding-left: 16px;
    }

    .cashout-history-list {
        padding: var(--space-3) var(--space-4);
    }
}

@media (max-height: 560px) {
    .settings-overlay,
    .cashout-overlay {
        align-items: stretch;
    }

    .settings-modal,
    .cashout-dialog {
        max-height: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-overlay,
    .settings-modal,
    .toast,
    .cashout-dialog,
    #view-dashboard .dash-avatar-btn,
    #view-dashboard .dash-menu-item {
        transition: none !important;
        transform: none !important;
    }
}