/* Phone layouts only. Keep this file after each page's own styles.
   The HTML media attribute and this guard both protect desktop and print. */
@media screen and (max-width: 767px) {
    :root {
        --page-gutter: 20px;
        --section-padding-block: 48px;
        --card-padding: 22px;
        --font-size-h1: clamp(30px, 8.2vw, 40px);
        --font-size-h2: clamp(26px, 7vw, 32px);
        --line-height-h1: 1.15;
        --line-height-h2: 1.2;
    }

    /* Long German headings must wrap instead of being clipped by the body. */
    body :is(h1, h2, h3, h4) {
        overflow-wrap: anywhere;
        hyphens: manual;
        text-wrap: wrap;
    }
    body main :is(p, li, a) { overflow-wrap: anywhere; }
    body :is(.faq-answer-inner, .viz-stat-label, .viz-feature-name, .viz-onb-step strong) { overflow-wrap: anywhere; }
    body :is(.hero-h1, .hero-h1--medium, .hero-h1--long) {
        font-size: var(--font-size-h1);
        line-height: 1.15;
        hyphens: manual;
        text-wrap: wrap;
    }
    body #hero.hero-centered { padding: 104px 20px 40px; }
    body .hero-sub { line-height: 1.65; letter-spacing: 0; }
    body .section-headline { font-size: var(--font-size-h2); line-height: 1.2; }
    body :is(.section-card, .bento-card, .ss-card, .gs-card) { min-width: 0; }
    body .section-card { padding: 28px 20px; }
    body :is(.ss-card, .gs-card) { padding: 32px 20px; }
    body :is(.reveal, .reveal-item, [data-proof-reveal]) {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Header layout is owned by css/header.css; these are content controls. */
    body main :is(.btn, .home-button, .button, .plan-cta, .role-btn) {
        min-height: 48px;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.45;
    }
    body main .btn { padding: 14px 20px; }
    body :is(.hero-btns, .upload-widget-actions) { width: 100%; gap: 12px; }
    body .upload-widget-actions { flex-direction: column; }
    body :is(.hero-btns, .upload-widget-actions) > .btn { width: 100%; }

    /* Readable, contrast-rich forms with room to type and no small iOS text. */
    body :is(.generator-widget, .upload-widget) { padding: 28px 20px; border-radius: 20px; }
    body .generator-widget h3 { font-size: 22px; line-height: 1.3; margin-bottom: 20px; }
    body .generator-form { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    body .generator-form .full-width { grid-column: 1; }
    body :is(.generator-form, #contact-form) label { color: #475569 !important; font-size: 13px !important; }
    body :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
        min-width: 0;
        max-width: 100%;
        font-size: 16px !important;
        line-height: 1.5;
        min-height: 48px;
        box-sizing: border-box;
    }
    body :is(input, select, textarea):focus-visible { outline: 2px solid #a83b00 !important; outline-offset: 2px; }
    body :is(.generator-form, #contact-form) :is(input, select, textarea) { border-color: #aeb8c5 !important; }
    body :is(.generator-form, #contact-form) :is(input, textarea)::placeholder { color: #64748b; opacity: 1; }
    body :is(#topic, #task-input, #message) { min-height: 144px; }
    body #contact-form { gap: 20px !important; }
    body #hero:has(#contact-form) .bento-card { padding: 24px 20px; }
    body .privacy-checkbox { min-height: 48px; text-align: left; }
    body .privacy-checkbox input { width: 20px; height: 20px; flex-shrink: 0; }
    body :is(#actionButtons, #editActions) .btn { flex: 1 1 100%; }

    /* Product views: all tabs are discoverable without a hidden horizontal strip. */
    body .product-proof-tabs:not([hidden]) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding: 2px;
    }
    body :is(.product-proof-tab, .product-proof-audience-tab) {
        min-width: 0;
        min-height: 48px;
        padding: 10px 8px;
        font-size: 14px;
        white-space: normal;
        line-height: 1.4;
    }
    body .product-proof-audience { width: 100%; }
    body .product-proof-audience-tab { flex: 1 1 50%; }
    body :is(.product-proof-perspective-label, .proof-browser-title, .product-proof-caption) { font-size: 13px; }
    body .proof-browser-bar { min-height: 44px; height: auto; padding-block: 10px; }
    body .product-proof-viewport { aspect-ratio: auto; }
    body .product-proof-frame { display: none; }
    body .product-proof-frame.is-active { display: block; position: relative; inset: auto; transform: none; }
    body .product-proof-frame img { height: auto; object-fit: contain; }
    body .product-proof-frame::after { display: none; }
    /* Existing tooltip copy becomes a readable legend below the screenshot. */
    body .product-proof-frame .proof-hotspot {
        position: static;
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        width: 100%;
        height: auto;
        padding: 16px;
        border-radius: 0;
        border-top: 1px solid #e2e8f0;
        background: #fff;
        transform: none;
        text-align: left;
    }
    body .proof-hotspot .proof-hotspot-dot { width: 30px; height: 30px; font-size: 13px; box-shadow: none; transform: none; }
    body .proof-hotspot-dot::after { display: none; }
    body .proof-hotspot .proof-hotspot-tooltip {
        position: static;
        width: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        opacity: 1;
        transform: none;
        backdrop-filter: none;
    }
    body .proof-hotspot-tooltip strong { font-size: 15px; line-height: 1.4; }
    body .proof-hotspot-tooltip span { font-size: 14px; line-height: 1.6; }

    /* Homepage keeps its existing separate mobile explanations. */
    .home-simple .home-wrap { width: calc(100% - 40px); }
    .home-simple .home-hero .home-kicker { font-size: 12px; }
    .home-simple .home-hero h1 { font-size: clamp(28px, 7.7vw, 40px); }
    .home-simple .home-hero-product { padding: 20px 16px; }
    .home-simple .home-visual-label { font-size: 12px; letter-spacing: .04em; }
    .home-simple .home-hero-product-stage { padding-bottom: 0; margin-top: 20px; aspect-ratio: auto; height: auto; }
    .home-simple .home-hero-backdrop { display: none; }
    .home-simple .home-hero-feedback-shot { position: relative; top: auto; right: auto; width: 100%; aspect-ratio: 1.3; }
    .home-simple .home-hero-product-caption { position: static; margin-top: 14px; padding: 14px; }
    .home-simple .home-hero-product-caption > span { font-size: 12px; letter-spacing: .02em; }
    .home-simple .home-hero-product-caption > strong { font-size: 18px; }
    .home-simple .home-hero-product figcaption { font-size: 13px; line-height: 1.6; margin-top: 16px; }
    .home-simple .home-dashboard .proof-hotspot { display: none; }
    .home-simple .home-mobile-explanations { display: block; margin-top: 20px; }
    .home-simple .home-mobile-explanations ol { padding-left: 24px; }
    .home-simple .home-mobile-explanations li { margin-bottom: 18px; }
    .home-simple .home-mobile-explanations strong { display: block; font-size: 16px; line-height: 1.5; }
    .home-simple :is(.home-mobile-explanations p, .home-function-grid p, .home-function-group-heading p) { font-size: 16px; line-height: 1.65; }
    .home-simple .home-function-grid h4 { font-size: 19px; line-height: 1.4; }
    .home-simple .home-function-group-heading > span { font-size: 12px; }
    .home-simple :is(.home-dashboard-note, .home-plan-term, .home-price-note, .home-function-screenshot figcaption, .home-source-visual figcaption, .feedback-test figcaption, .feedback-test cite) { font-size: 14px; }
    .home-simple .home-function-screenshot figcaption :is(strong, span) { font-size: 13px; }
    .home-simple .home-text-link { font-size: 15px; display: inline-block; padding-block: 10px; }
    .home-simple .home-source-comparison { flex-direction: column; align-items: stretch; gap: 20px; }
    .home-simple .home-source-paper { transform: none; }
    .home-simple :is(.home-source-paper > strong, .home-source-report > strong, .home-source-review strong) { font-size: 16px; }
    .home-simple :is(.home-source-lines b, .home-source-report > span, .home-source-report > span b, .home-source-review) { font-size: 14px; }
    .home-simple .home-image-dialog-bar { align-items: flex-start; gap: 10px; }
    .home-simple .home-image-dialog-bar h2 { font-size: 14px; }
    .home-simple .home-image-dialog-bar button { min-height: 44px; font-size: 14px; }
    .home-simple .home-image-dialog > p { font-size: 14px; }

    /* Prices, school information, guide and topic directory. */
    body .audience-route { min-height: 48px; font-size: 14px; padding: 10px 5px; }
    body .audience-tabs { grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr)); }
    body .pricing-switch { height: 44px; border-radius: 22px; }
    body .pricing-switch-thumb { top: 12px; }
    body .pricing-card { padding: 28px 22px; min-width: 0; }
    body .pricing-grid.is-filtered { grid-template-columns: minmax(0, 1fr); }
    body .plan-features { font-size: 16px; }
    body :is(.plan-tag, .scan-tile-unit, .single-scans-foot) { font-size: 14px; }
    body .single-scans-combo { flex-wrap: wrap; }
    body .single-scans-wrap { width: 100%; }
    body .single-scans-card { padding: 28px 20px; }
    body .single-scans-combo-text { min-width: 0; width: 100%; flex-wrap: wrap; }
    body .single-scans-combo-text > div { min-width: 0; }
    body .single-scans-combo-cta { white-space: normal; }
    body :is(.why-card, .why-list, .why-item, .why-content) { min-width: 0; max-width: 100%; }
    body .why-skillsquare-section { padding-inline: 0; }
    body .why-card { width: 100%; padding: 28px 16px; }
    body .why-list .why-item { grid-template-columns: minmax(0, 1fr); padding: 24px 0; border: 0; border-top: 1px solid #e2e8f0; border-radius: 0; }
    body .product-proof-role-head { flex-wrap: wrap; }
    body .product-proof-role-title { overflow-wrap: anywhere; }
    body :is(.product-proof-role-kicker, .viz-trust-kicker, .viz-onb-kicker, .viz-onb-num) { font-size: 12px; }
    body .problem-solution-grid { grid-template-columns: minmax(0, 1fr); }
    body .ps-card { min-width: 0; padding: 24px 16px; }
    body .schul-subnav-wrap { position: static; margin-bottom: 32px; }
    body .schul-subnav { flex-wrap: wrap; border-radius: 16px; padding: 10px; }
    body .schul-subnav a { flex: 1 1 130px; min-height: 44px; white-space: normal; border-radius: 8px; padding: 10px; }
    body :is(.ss-head, .gs-head) { margin-bottom: 28px; }
    body :is(.ss-head h2, .gs-head h2) { font-size: var(--font-size-h2); line-height: 1.25; }
    body .gs-step { padding: 24px 16px; scroll-margin-top: 100px; }
    body .gs-step h2 { font-size: 24px; line-height: 1.3; }
    body .gs-toc { margin-top: 28px; }
    body .gs-toc-item { min-height: 48px; font-size: 15px; }
    body .gs-note { padding: 16px; }
    body .stats-grid { width: 100%; grid-template-columns: minmax(0, 1fr) !important; }
    body .stat-card { min-width: 0; }
    .home-simple .topic-meta { font-size: 12px; letter-spacing: .04em; }
    .home-simple :is(.topic-link p, .topics-section-intro p) { font-size: 16px; }
    .home-simple .topic-route { font-size: 14px; }
    body .login-page-wrapper { padding-top: 104px; }
    body .login-page-wrapper .hero-centered { padding-inline: 20px !important; }
    body .login-card { padding: 28px 22px; }

    /* Funding selection and the scan order entry keep their step labels. */
    body .wizard-card { padding: 28px 20px; }
    body .wizard-option { min-height: 48px; font-size: 15px; line-height: 1.4; white-space: normal; }
    body .wizard-back { min-height: 44px; }
    body .site-section:has(.funnel-stepper) { padding-top: 104px !important; }
    body .funnel-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 8px; margin-bottom: 28px; }
    body .funnel-step { flex-direction: column; gap: 8px; opacity: 1; }
    body .funnel-step-label { display: block; white-space: normal; font-size: 12px; line-height: 1.4; text-align: center; color: #475569; }
    body .funnel-step-line { display: none; }
    body .funnel-scan-card { padding: 24px 20px; }
    body .funnel-upload-zone { padding: 32px 20px; }

    /* Student landing page: legible screenshot labels and touch-friendly CTA. */
    body .hero-copy h1 { font-size: clamp(34px, 9.3vw, 48px); line-height: 1.12; letter-spacing: -.04em; }
    body.student-page :is(.section-heading h2, .philosophy-copy h2) { font-size: clamp(28px, 7.7vw, 36px); line-height: 1.2; }
    body .hero-price-line { flex-wrap: wrap; gap: 12px; }
    body .price-bubble small { font-size: 13px; }
    body .hero-price-line strong { font-size: 14px; }
    body .hero-product { width: 100%; margin-left: 0; padding-top: 0; }
    body .hero-note { display: none; }
    body .hero-dashboard-bar strong { font-size: 12px; }
    body :is(.hero-screen-caption, .confidence-grid p span, .how-tag) { font-size: 13px; }
    body :is(.student-kicker, .feature-label, .subject-cloud span) { font-size: 12px; }
    body .dashboard-section .product-proof-caption > span { font-size: 13px; }
    body.student-page { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
    body .mobile-cta-bar { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 12px; }
    body .mobile-cta-bar > div { min-width: 0; }
    body .mobile-cta-bar strong { font-size: 14px; }
    body .mobile-cta-bar div > span { font-size: 12px; line-height: 1.4; }
    body .mobile-cta-bar .button { min-height: 48px; font-size: 14px; padding: 12px; }

    body .custom-footer-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
    body .custom-footer-links ul { gap: 4px !important; }
    body .hub-links-inner { padding: 22px 18px; }
    body :is(.hub-links-title, .seo-link-group-label) { font-size: 12px; }
    body .hub-links-list a { min-height: 44px; border-radius: 10px; overflow-wrap: anywhere; }
}