/**
 * /start phone layout. Loaded last (and inlined) so CDN cache cannot hide it.
 * Does not apply on desktop with a mouse.
 */
@media (max-width: 900px), ((max-width: 1280px) and (hover: none)) {
    html.aispap-start-html,
    body.aispap-start-wizard-page {
        min-height: 100% !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        height: 100% !important;
        height: 100dvh !important;
    }

    .aispap-start-wizard-page .setup-wizard-overlay,
    .aispap-start-wizard-page #setupWizardModal.setup-wizard-overlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    .aispap-start-wizard-page .setup-wizard-content,
    .aispap-start-wizard-page #setupWizardModal .setup-wizard-content {
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        max-width: none !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 8px 14px 0 !important;
        padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
        padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .aispap-start-wizard-page .setup-wizard-header {
        padding-bottom: 8px !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    .aispap-start-wizard-page .setup-wizard-logo {
        gap: 8px !important;
        font-size: 0.92rem !important;
        min-width: 0 !important;
    }

    .aispap-start-wizard-page .setup-wizard-logo img {
        width: 20px !important;
        height: 20px !important;
    }

    .aispap-start-wizard-page .setup-wizard-logo span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .aispap-start-wizard-page .setup-wizard-progress {
        padding: 10px 0 6px !important;
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .aispap-start-wizard-page .progress-step {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.65rem !important;
        box-shadow: none !important;
    }

    .aispap-start-wizard-page .progress-step.active {
        box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.15) !important;
    }

    .aispap-start-wizard-page .progress-step--finish .progress-finish-flag {
        width: 11px !important;
        height: 11px !important;
    }

    .aispap-start-wizard-page .progress-line {
        margin: 0 2px !important;
        min-width: 3px !important;
    }

    .aispap-start-wizard-page .setup-wizard-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 10px 0 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .aispap-start-wizard-page .wizard-step,
    .aispap-start-wizard-page .wizard-step.wizard-step--wide,
    .aispap-start-wizard-page #wizard-step-9.wizard-step--wide {
        max-width: none !important;
        width: 100% !important;
    }

    .aispap-start-wizard-page .wizard-step h2,
    .aispap-start-wizard-page .setup-wizard-welcome-title {
        font-size: 1.28rem !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }

    .aispap-start-wizard-page .wizard-step > p {
        font-size: 0.92rem !important;
        margin-bottom: 14px !important;
    }

    .aispap-start-wizard-page .setup-wizard-welcome {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
        min-height: 0 !important;
    }

    .aispap-start-wizard-page .setup-wizard-welcome__art,
    .aispap-start-wizard-page .setup-wizard-welcome__art img {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
    }

    .aispap-start-wizard-page .goals-grid,
    .aispap-start-wizard-page .platform-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .aispap-start-wizard-page .goal-content,
    .aispap-start-wizard-page .platform-content {
        padding: 14px !important;
    }

    .aispap-start-wizard-page .channel-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .aispap-start-wizard-page .wizard-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: stretch !important;
        gap: 8px !important;
        margin-top: 12px !important;
        padding: 10px 0 calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        background: #f8fafc !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    .aispap-start-wizard-page .wizard-actions .wizard-btn {
        flex: 1 1 0 !important;
        width: auto !important;
        min-height: 44px !important;
        padding: 12px 10px !important;
        font-size: 0.95rem !important;
    }

    .aispap-start-wizard-page .setup-wizard-welcome-actions {
        justify-content: stretch !important;
    }

    .aispap-start-wizard-page .setup-wizard-welcome-actions .wizard-btn {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .aispap-start-wizard-page .split-view {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .aispap-start-wizard-page .lwp-preview-container {
        min-height: 0 !important;
        order: 2 !important;
    }

    .aispap-start-wizard-page .lwp-preview-container iframe,
    .aispap-start-wizard-page #wizardRealPreviewIframe,
    .aispap-start-wizard-page .design-preview-iframe {
        height: 220px !important;
        max-height: 36vh !important;
    }

    .aispap-start-wizard-page #wizardPreviewExpandedBg {
        min-height: 0 !important;
        padding: 8px !important;
    }

    .aispap-start-wizard-page .lwp-preview-container > .preview-card[style*="flex: 0 0 250px"] {
        flex: 0 0 160px !important;
    }

    .aispap-start-wizard-page .vblock-mode-picker,
    .aispap-start-wizard-page .vblock-mode-picker--visual {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 6px !important;
    }

    .aispap-start-wizard-page .wizard-passport-card {
        grid-template-columns: 1fr !important;
        padding: 14px !important;
        gap: 16px !important;
    }

    .aispap-start-wizard-page .wizard-passport-card__photo {
        max-width: 180px !important;
        margin: 0 auto !important;
    }

    .aispap-start-wizard-page .wizard-org-name-row {
        flex-direction: column !important;
    }

    .aispap-start-wizard-page input.input,
    .aispap-start-wizard-page textarea.input,
    .aispap-start-wizard-page select,
    .aispap-start-wizard-page .input-wrapper .input,
    .aispap-start-wizard-page .floating-label-group input,
    .aispap-start-wizard-page .floating-label-group textarea,
    .aispap-start-wizard-page .floating-label-group select {
        font-size: 16px !important;
    }

    .aispap-start-wizard-page .calculator-section,
    .aispap-start-wizard-page .wizard-volume-card,
    .aispap-start-wizard-page #wizardTariffOptions {
        padding: 14px !important;
    }

    .aispap-start-wizard-page #wizardTariffsContainer {
        grid-template-columns: 1fr !important;
        max-width: none !important;
    }

    .aispap-start-wizard-page .wizard-dropzone {
        padding: 24px 12px !important;
    }

    .aispap-start-wizard-page #wizard-step-stroke .wizard-stroke-title {
        font-size: 1.28rem !important;
    }

    .aispap-start-wizard-page #wizard-step-stroke .wizard-stroke-lead {
        font-size: 0.92rem !important;
        margin-bottom: 8px !important;
    }

    .aispap-start-wizard-page #wizard-step-stroke .wizard-stroke-inline-host,
    .aispap-start-wizard-page #widgetIdStrokeModal.widget-id-stroke-screen--inline {
        min-height: 200px !important;
        height: auto !important;
    }

    .aispap-start-wizard-page #widgetIdStrokeModal.widget-id-stroke-screen--inline .widget-id-stroke-screen__stage {
        min-height: 180px !important;
    }

    .aispap-start-wizard-page #widgetIdStrokeModal.widget-id-stroke-screen--inline .widget-id-stroke-screen__percent {
        font-size: 2.4rem !important;
    }

    .aispap-start-wizard-page .setup-wizard-dialog-overlay {
        padding: 12px !important;
        align-items: flex-end !important;
    }

    .aispap-start-wizard-page .setup-wizard-dialog {
        width: 100% !important;
        max-width: none !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }
}