/* Mobile-first interaction layer shared by the landing and pricing pages. */
.mobile-nav { display: none; }

@media (max-width: 720px) {
    html { scroll-padding-top: 76px; }
    #how, #demo-section, #dubs, #faq, #offer { scroll-margin-top: 76px; }
    .container { min-width: 0; }
    .site-nav { z-index: 500; }
    .site-nav .nav-inner { position: relative; gap: 8px; min-height: 64px; }
    .site-nav .logo { flex: 1 1 auto; min-width: 0; }
    .site-nav .logo-text { font-size: clamp(13px, 4vw, 17px); }
    .site-nav .nav-actions { flex: 0 0 auto; gap: 0; margin-left: 0; }
    .site-nav .nav-actions .nav-login { display: none; }
    .site-nav .nav-actions .btn { min-height: 44px; padding-inline: 12px; font-size: 0; }
    .site-nav .nav-actions .btn::after { content: "Играть"; font-size: 12px; }
    .site-nav .nav-inner > .btn { display: none; }
    .mobile-nav { display: block; flex: 0 0 auto; }
    .mobile-nav summary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-width: 52px;
        min-height: 44px;
        padding: 0 9px;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 10px;
        color: #fff;
        background: #201d22;
        font: 700 11px/1 var(--sans);
        cursor: pointer;
        list-style: none;
    }
    .mobile-nav summary::-webkit-details-marker { display: none; }
    .mobile-nav summary > span:first-child,
    .mobile-nav summary > span:first-child::before,
    .mobile-nav summary > span:first-child::after {
        display: block;
        width: 16px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }
    .mobile-nav summary > span:first-child { position: relative; }
    .mobile-nav summary > span:first-child::before,
    .mobile-nav summary > span:first-child::after { content: ""; position: absolute; left: 0; }
    .mobile-nav summary > span:first-child::before { top: -5px; }
    .mobile-nav summary > span:first-child::after { top: 5px; }
    .mobile-nav[open] summary { border-color: var(--accent); }
    .mobile-nav summary:focus-visible,
    .mobile-nav-panel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .mobile-nav-panel {
        position: absolute;
        z-index: 10;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        display: grid;
        gap: 3px;
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 0 0 15px 15px;
        background: #17151a;
        box-shadow: 0 25px 45px rgba(0, 0, 0, .55);
    }
    .mobile-nav-panel a {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding-inline: 14px;
        border-radius: 8px;
        color: #f5f1f3;
        font-size: 14px;
        font-weight: 650;
        text-decoration: none;
    }
    .mobile-nav-panel a:active { background: rgba(237, 72, 104, .16); }

    .hero-grid, .hero-copy, .carousel-wrapper { min-width: 0; }
    .hero-copy { padding-top: 30px; }
    .hero .badge { max-width: 100%; white-space: normal; line-height: 1.35; }
    .hero h1 { max-width: 100%; overflow-wrap: anywhere; }
    .hero p.lead { font-size: 16px; line-height: 1.55; }
    .hero .btn { min-height: 52px; font-size: 14px; }
    .hero-proof { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; }
    .hero-proof span { padding: 5px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #d8d2d9; font-size: 11px; }
    .hero-proof span:last-child::before { display: none; }
    .hero .carousel-wrapper { --card-w: min(100%, 540px); --card-h: clamp(280px, 82vw, 440px); width: calc(100% - 20px); margin-inline: 0 auto; }
    .hero .arcade-carousel { height: calc(var(--card-h) + 72px); }
    .carousel-controls { right: -17px; }
    .carousel-hint { top: 0; left: 50%; width: var(--card-w); max-width: 100%; }

    #how .steps { display: grid; grid-template-columns: 1fr; gap: 12px; min-height: 0; margin: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
    #how .steps .steps-track, #how .steps .steps-set { display: grid; grid-template-columns: 1fr; width: 100%; gap: 12px; padding: 0; }
    #how .steps .steps-set[aria-hidden="true"] { display: none; }
    #how .steps .step,
    #how .steps.is-gsap-motion .steps-set .step { width: 100%; min-height: 0; padding: 20px; border-radius: 14px; }
    #how .step h3 { font-size: 20px; }
    #how .step p { max-width: none; font-size: 14px; }

    #demo-section .section-sub, .dubs-section .section-sub { font-size: 14px; }
    #demo-section .studio-demo { padding: 10px; }
    #demo-section .demo-steps { gap: 6px; }
    #demo-section .step-pill { min-height: 46px; padding-inline: 5px; font-size: 11px; line-height: 1.2; }
    #demo-section .demo-video { min-height: 0; aspect-ratio: 16 / 10; }
    #demo-section .demo-controls { min-height: 0; gap: 15px; padding: 20px 14px; }
    #demo-section .rec-btn { width: 92px; height: 92px; flex: 0 0 92px; cursor: pointer; touch-action: manipulation; }
    #demo-section .rec-btn:disabled { opacity: .55; cursor: progress; }
    #demo-section .rec-btn:focus-visible { outline: 3px solid #171419; outline-offset: 5px; }
    #demo-section .rec-label { font-size: 12px; text-align: center; }
    #demo-section .demo-control-copy { max-width: 34ch; font-size: 14px; }
    #demo-section #waveCanvas { width: 100%; height: 58px; }
    #demo-section .result-actions { flex-wrap: wrap; gap: 8px; }
    #demo-section .result-actions .btn,
    #demo-section .step-controls > .btn { min-height: 48px; justify-content: center; white-space: normal; }
    #controlsStep4 .result-actions > div { flex-wrap: wrap; }
    #controlsStep4 .result-actions > div > .btn { flex: 1 1 120px; }
    #demo-section .subtitle-line { font-size: 13px; }

    .dubs-section .dubs-carousel-wrapper { min-width: 0; }
    .dubs-section .global-counter { border-radius: 14px; line-height: 1.4; }
    .dubs-section .dubs-nav { min-width: 44px; min-height: 44px; }

    .seo-faq--capsules .faq-capsules { gap: 8px; }
    .seo-faq--capsules .faq-card { min-height: 60px; flex-basis: 60px; border-radius: 15px; }
    .seo-faq--capsules .faq-card.is-active { flex-basis: auto; min-height: 0; border-radius: 20px; }
    .seo-faq--capsules .faq-trigger { min-height: 60px; padding: 14px 18px; }
    .seo-faq--capsules .faq-card.is-active .faq-trigger { top: 0; right: 0; bottom: auto; left: auto; width: 76px; padding: 18px; }
    .seo-faq--capsules .faq-number { font-size: 25px; }
    .seo-faq--capsules .faq-card.is-active .faq-number { font-size: 45px; }
    .seo-faq--capsules .faq-tab-label { max-width: none; font-size: 13px; }
    .seo-faq--capsules .faq-panel { position: relative; inset: auto; min-height: 0; padding: 20px; }
    .seo-faq--capsules .faq-topic { margin-bottom: 22px; }
    .seo-faq--capsules .faq-panel h3 { max-width: none; font-size: clamp(25px, 7vw, 32px); line-height: 1.08; }
    .seo-faq--capsules .faq-panel p { font-size: 14px; line-height: 1.55; }

    #offer .offer-wrap { padding: 28px 22px; border-radius: 20px; }
    #offer .offer-wrap h2 { font-size: clamp(30px, 8vw, 40px); line-height: 1.04; }
    #offer .offer-wrap p, #offer .offer-wrap .hero-meta { font-size: 14px; line-height: 1.5; }
    #offer .offer-price { max-width: 100%; }
    #offer .offer-cta { display: flex; width: 100%; min-height: 52px; justify-content: center; }
    .site-footer .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 15px; }
    .site-footer .footer-links a { min-height: 40px; padding-block: 7px; font-size: 12px; overflow-wrap: anywhere; }
    .site-footer .footer-legal { font-size: 11px; overflow-wrap: anywhere; }

    .pricing-hero { padding: 28px 0 16px; }
    .pricing-hero .back-link { margin-bottom: 18px; }
    .pricing-hero .section-title { font-size: clamp(33px, 9vw, 45px); line-height: 1.04; }
    .pricing-hero .section-sub { font-size: 15px; line-height: 1.55; }
    .pricing-section { padding: 14px 0 48px; }
    .pricing-grid { gap: 16px; }
    .price-card, .price-card--featured { padding: 24px 20px; transform: none; }
    .price-card__desc, .price-card__features li { font-size: 14px; }
    .price-card__btn { min-height: 52px; justify-content: center; text-align: center; }
    .bonus-section { padding-block: 42px; }
    .bonus-wrap { padding: 30px 22px; }
    .bonus-text { font-size: 15px; }
    .bonus-wrap .btn { width: 100%; min-height: 52px; justify-content: center; }
}

@media (max-width: 370px) {
    .site-nav .nav-inner { gap: 5px; }
    .site-nav .logo-text { font-size: 12px; }
    .site-nav .nav-actions .btn { padding-inline: 8px; }
    .mobile-nav summary { min-width: 44px; padding-inline: 7px; }
    .mobile-nav summary > span:last-child { display: none; }
    .hero h1 { font-size: 31px; }
    .hero .badge { font-size: 9px; }
    .seo-faq--capsules .faq-panel { padding: 18px; }
    .seo-faq--capsules .faq-panel h3 { font-size: 24px; }
}