/* Acclaim tablet and phone layout changes; normal styling is in styles.css. */

/* Tablets and small laptops: 880 pixels wide or less. */
@media (max-width: 880px) {
    .site-header__inside {
        padding: 18px 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .main-navigation {
        width: 100%;
        flex-wrap: wrap;
        gap: 0;
    }

    .nav-link,
    .drop-menu > summary {
        padding-right: 9px;
        padding-left: 9px;
    }

    .drop-menu__panel {
        z-index: 2;
    }

    .simple-accounting {
        grid-template-columns: 1fr;
    }

    .story-row,
    .story-row--image-right {
        grid-template-columns: 1fr;
    }

    .story-row--image-right .story-row__image {
        order: -1;
    }

    .story-row__image {
        max-width: 430px;
    }

    .features-with-videos {
        grid-template-columns: 1fr;
    }

    .download-layout,
    .downloading-layout,
    .about-founder,
    .cashbook-feature-intro {
        grid-template-columns: 1fr;
    }

    .founder-card {
        width: min(100%, 270px);
    }

    .video-testimonials {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

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

    .video-testimonials > h2,
    .video-testimonials > p,
    .video-testimonials > .button {
        grid-column: 1 / -1;
    }

    .video-testimonial {
        margin-top: 0;
    }
}

/* Phones: 620 pixels wide or less. */
@media (max-width: 620px) {
    :root {
        --gutter: 16px;
    }

    body {
        font-size: 16px;
    }

    .site-logo img {
        width: 235px;
    }

    .main-navigation {
        align-items: stretch;
        flex-direction: column;
    }

    .nav-link,
    .drop-menu > summary {
        padding: 10px 12px;
    }

    .drop-menu__panel,
    .drop-menu__panel--right {
        position: static;
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 6px 0 10px 14px;
        border-width: 0 0 0 4px;
        box-shadow: none;
    }

    .drop-menu__panel a {
        white-space: normal;
    }

    .page-introduction {
        padding: 42px 0;
    }

    .page-introduction__inside,
    .two-columns {
        grid-template-columns: 1fr;
    }

    .page-introduction__inside {
        gap: 28px;
    }

    .page-introduction__action,
    .button {
        width: 100%;
    }

    .page-section {
        padding: 38px 0 54px;
    }

    .home-hero {
        min-height: 430px;
        padding: 48px 0;
        background-position: 58% center;
    }

    .story-row {
        gap: 26px;
    }

    .story-row + .story-row {
        margin-top: 52px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .feature-catalogue {
        grid-template-columns: 1fr;
    }

    .detailed-feature-grid {
        grid-template-columns: 1fr;
    }

    .video-testimonials {
        display: block;
    }

    .video-testimonial {
        margin-top: 25px;
    }

    .home-feature {
        padding: 19px;
        grid-template-columns: 50px minmax(0, 1fr);
        column-gap: 14px;
    }

    .download-card,
    .guarantee-grid,
    .review-row,
    .guarantee-original__inside,
    .about-product-grid {
        grid-template-columns: 1fr;
    }

    .guarantee-original__badge {
        width: 188px;
    }

    .review-row {
        gap: 14px;
    }

    .download-card {
        padding: 25px;
    }

    .download-introduction .page-introduction__action {
        align-items: flex-start;
    }

    .downloading-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer__top {
        flex-direction: column;
    }

    .footer-navigation {
        justify-content: flex-start;
    }
}

/* Remove smooth movement when the visitor has requested reduced motion. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
/* Pricing cards stack on tablets; supporting information stacks on phones. */
@media (max-width: 880px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .price-card { max-width: 560px; margin-inline: auto; width: 100%; }
}

@media (max-width: 520px) {
    .pricing-information article { display: block; padding: 20px; }
    .pricing-information article > i { margin-bottom: 12px; text-align: left; }
}
/* Testimonial columns and videos collapse as space becomes limited. */
@media (max-width: 880px) {
    .testimonials-layout { grid-template-columns: 1fr; }
    .testimonial-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .testimonial-grid { columns: 1; }
    .testimonial-video-grid { grid-template-columns: 1fr; }
}
/* Accounting glossary and five-question guide. */
@media (max-width: 700px) {
    .glossary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
    .question-subsections { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .question-card { grid-template-columns: 1fr; padding: 22px; }
}
/* Accountant and dealer directories become labelled card-like rows. */
@media (max-width: 680px) {
    .directory-table thead { display: none; }
    .directory-table,
    .directory-table tbody,
    .directory-table tr,
    .directory-table td { display: block; width: 100%; box-sizing: border-box; }
    .directory-table tr { padding: 9px 0; border-bottom: 2px solid #a9c9df; }
    .directory-table td { display: grid; grid-template-columns: 86px 1fr; gap: 8px; padding: 6px 13px; border: 0; }
    .directory-table td::before { content: attr(data-label); font-weight: 700; }
}
/* Dealer order controls are rearranged for narrow phone screens. */
@media (max-width: 560px) {
    .dealer-order-notice { display: block; padding: 20px; }
    .dealer-order-notice > i { margin-bottom: 10px; }
    .dealer-order-form fieldset { padding: 20px; }
    .dealer-order-actions { align-items: flex-start; flex-direction: column; }
    .form-field label small { display: block; float: none; margin-top: 3px; }
}

/* Dealer order form switches from its split layout to one column. */
@media (max-width: 800px) {
    .dealer-order-layout { grid-template-columns: 1fr; }
    .dealer-order-form { max-width: none; }
    .dealer-guarantee { min-height: 0; }
}
/* Support cards stack before the email list changes to a phone layout. */
@media (max-width: 880px) {
    .support-primary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .support-email-list,
    .support-email-list > div,
    .support-email-list a,
    .support-email-list span {
        display: block;
    }

    .support-email-list > div { margin-bottom: 12px; }
    .support-email-list a,
    .support-email-list span { padding: 0; }

    .faq-answer { padding: 22px; }
    .faq-detail-nav { grid-template-columns: 1fr; }
    .faq-detail-nav__next { grid-column: 1; text-align: left; }

    .content-panel { padding: 22px; }
}
/* Video tutorials and remote-support instructions. */
@media (max-width: 850px) {
    .video-tutorial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .video-tutorial-grid {
        grid-template-columns: 1fr;
    }

    .troubleshooting-support,
    .teamviewer-intro,
    .support-notice {
        align-items: flex-start;
    }

    .troubleshooting-support {
        flex-direction: column;
    }
}

/* Contact-page email cards retained for compatibility with older layouts. */
@media (max-width: 900px) {
    .contact-email-grid {
        grid-template-columns: 1fr;
    }
}