/* ==========================================================================
   Shared Responsive Rules
   Base responsive behavior used by index.html and document pages.
   ========================================================================== */

/* Large tablets and small laptops */
@media (max-width: 1100px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .hero-card {
        max-width: 480px;
        margin: 0 auto;
    }
    .hfb-1,
    .hfb-2 {
        display: none;
    }
    .calc-inner {
        grid-template-columns: 1fr;
    }
    .calc-card {
        max-width: 100%;
    }
    .authority-grid {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .docs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .langs-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .how-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 0;
    }
    .how-connector {
        display: none;
    }
    .reviews-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .langpairs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .order-layout {
        grid-template-columns: 1fr;
    }
    .order-sidebar-inner {
        position: static;
    }
    .doc-page-grid {
        grid-template-columns: 1fr;
    }
    .nav-a {
        padding: 8px 9px;
    }

    /* Document certificate pages: landscape tablets and compact laptops */
    .doc-cert-page .birth-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .doc-cert-page .hero-sticky {
        position: static;
    }
    .doc-cert-page .birth-hero-card {
        max-width: 560px;
        margin: 0 auto;
    }
    .doc-cert-page .stats-bar-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-top: 1px solid var(--border);
    }
    .doc-cert-page .stats-bar-item {
        padding: 24px 18px;
        border-bottom: 1px solid var(--border);
    }
    .doc-cert-page .use-cases-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .doc-cert-page .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .doc-cert-page .pricing-card-featured {
        grid-column: 1 / -1;
        transform: none;
    }
    .doc-cert-page .languages-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .doc-cert-page .birth-why-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .doc-cert-page .birth-seo-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .doc-cert-page .related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* About page */
    .about-hero-grid,
    .about-story-grid,
    .about-network-grid {
        grid-template-columns: 1fr;
    }
    .about-hero-card {
        max-width: 28rem;
    }
    .about-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Contact page */
    .contact-layout {
        grid-template-columns: 1fr;
    }
    .contact-sidebar {
        position: static;
    }
    .order-page .shop-step {
        gap: 2px;
        padding: 10px 0;
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 991px) {
    section {
        padding: var(--section-space-tablet) 0;
    }
    ul.nav-links,
    .nav-right .nav-login,
    .nav-right .nav-lang {
        display: none;
    }
    .hamburger {
        display: flex;
    }
    h1 {
        font-size: 2.75rem;
    }
    h2 {
        font-size: 2rem;
    }
    /* Order page */
    .order-page .shop-container {
        grid-template-columns: 1fr;
    }
    .order-page .shop-sidebar {
        position: static;
    }
    .checkout-page .checkout-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .about-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-left: none;
    }
    .about-stats-item:nth-child(3n + 1) {
        border-left: 1px solid var(--border);
    }
    .about-team-grid {
        grid-template-columns: 1fr;
    }
    .about-team-contact-bar {
        padding: 1.667rem;
        align-items: flex-start;
    }
}

/* Tablet portrait and large phones */
@media (max-width: 768px) {
    html {
        font-size: 16px;
    }
    /* Homepage: tablet portrait typography and spacing */
    #page-home .hero {
        padding-top: 72px;
    }
    #page-home .hero-wave {
        height: 56px;
    }
    #page-home .hero h1 {
        margin-bottom: 18px;
    }
    #page-home .hero-sub {
        max-width: none;
        margin-bottom: 24px;
    }
    #page-home .hero-checks {
        margin-bottom: 28px;
    }
    #page-home .hero-ctas {
        margin-bottom: 28px;
    }
    #page-home .hero-ctas .btn,
    #page-home .cta-btns .btn,
    #page-home .section-header-row .btn {
        width: 100%;
        justify-content: center;
    }
    #page-home .stats-bar {
        padding: 24px 0;
    }
    #page-home .trust-strip {
        padding: 28px 0;
    }
    #page-home .trust-logos {
        gap: 18px 22px;
    }
    #page-home .why-grid,
    #page-home .usecases-grid,
    #page-home .authority-grid {
        margin-top: 48px;
    }
    .section-header,
    .section-intro {
        margin-bottom: 40px;
    }
    .section-header-row {
        margin-bottom: 36px;
        align-items: flex-start;
    }
    #page-home .filter-bar {
        margin-bottom: 24px;
    }
    #page-home .doc-card,
    #page-home .why-card,
    #page-home .review-card,
    #page-home .usecase-card,
    #page-home .guarantee-box {
        padding: 24px;
    }
    #page-home .lang-card {
        padding: 18px 12px;
    }
    #page-home .blog-body {
        padding: 20px;
    }
    #page-home .authority-grid {
        gap: 36px;
    }
    #page-home .authority-item,
    #page-home .cities-wrap {
        padding: 16px;
    }
    #page-home .langpairs-grid {
        gap: 10px;
    }
    #page-home .langpair-card {
        padding: 14px 16px;
    }
    #page-home .faq-item {
        padding: 16px 0;
    }
    #page-home .cta-band .section-sub {
        margin-bottom: 28px;
    }

    .stats-inner {
        grid-template-columns: repeat(2, 1fr);
    }
    .stat-item {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 18px;
    }
    .stat-item:nth-child(1),
    .stat-item:nth-child(2) {
        border-right: 1px solid var(--border);
    }
    .stat-item:nth-child(3),
    .stat-item:nth-child(4) {
        border-bottom: none;
    }
    .how-steps {
        grid-template-columns: 1fr 1fr;
        gap: 24px 0;
        margin-top: 48px;
    }
    .how-step {
        padding: 0 8px;
    }
    .docs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .langs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .reviews-grid,
    .why-grid,
    .usecases-grid,
    .blog-grid,
    .faq-grid {
        grid-template-columns: 1fr;
    }
    .blog-card.featured {
        flex-direction: column;
    }
    .blog-card.featured .blog-img-wrap {
        width: 100%;
        height: 170px;
        min-height: auto;
    }
    .blog-grid .blog-card.featured {
        grid-column: span 1;
    }
    .float-order {
        display: block;
    }

    .hero-trust-div {
        display: none;
    }
    .cta-btns {
        flex-direction: column;
    }
    .addon-grid {
        grid-template-columns: 1fr;
    }
    .langpairs-grid {
        grid-template-columns: 1fr;
    }
    .faq-item {
        flex-direction: column;
        gap: 10px;
        padding: 15px 0;
    }
    .faq-q {
        width: 100%;
    }
    .reviews-score-box {
        padding: 12px 15px;
        border-radius: var(--r-md);
    }

    /* Document certificate pages: tablet portrait */
    .doc-cert-page .hero-section {
        padding-top: 72px;
    }
    .doc-cert-page .birth-hero-grid {
        gap: 32px;
    }

    .doc-cert-page .hero-breadcrumb-ol {
        flex-wrap: wrap;
        row-gap: 4px;
    }
    .doc-cert-page .hero-p {
        max-width: none;
    }
    .doc-cert-page .hero-trust {
        gap: 12px;
    }
    .doc-cert-page .hero-trust-item {
        align-items: flex-start;
    }
    .doc-cert-page .birth-hero-card {
        padding: 24px;
    }
    .doc-cert-page .hero-card-header {
        flex-direction: column;
        gap: 12px;
    }
    .doc-cert-page .hero-gradient {
        margin-top: 20px;
    }
    .doc-cert-page .use-cases-grid {
        gap: 16px;
    }
    .doc-cert-page .use-cases-card {
        padding: 24px;
    }
    .doc-cert-page .pricing-grid {
        gap: 18px;
    }
    .doc-cert-page .pricing-card,
    .doc-cert-page .pricing-card-featured,
    .doc-cert-page .pricing-footer .pricing-card {
        padding: 24px;
    }
    .doc-cert-page .pricing-card-featured {
        grid-column: auto;
    }
    .doc-cert-page .languages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .doc-cert-page .languages-item {
        padding: 12px 14px;
    }
    .doc-cert-page .birth-why-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .doc-cert-page .birth-why-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .doc-cert-page .birth-why-stats {
        grid-template-columns: 1fr;
    }
    .doc-cert-page .birth-why-card {
        padding: 20px;
    }
    .doc-cert-page .related-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .doc-cert-page .related-card {
        padding: 16px 18px;
    }
    .doc-cert-page .related-cta .btn {
        width: 100%;
        max-width: 320px;
    }
    .doc-cert-page .stillhave-que-wrapper {
        margin-top: 32px;
        padding: 22px 18px;
    }
    .doc-cert-page .stillhave-que-actions {
        flex-direction: column;
        align-items: center;
    }
    .doc-cert-page .stillhave-que-actions .btn {
        width: 100%;
        max-width: 280px;
    }
    .doc-cert-page .birth-seo-grid {
        gap: 32px;
    }
    .doc-cert-page .birth-final-cta-actions {
        flex-direction: column;
    }
    .doc-cert-page .birth-final-cta-primary,
    .doc-cert-page .birth-final-cta-secondary {
        width: 100%;
        max-width: 340px;
        justify-content: center;
    }
    .doc-cert-page .birth-final-cta-benefits {
        gap: 12px 18px;
    }
    .doc-cert-page .stats-bar-item {
        padding: 15px 10px;
    }
    .stats-bar-price {
        font-size: 1.5rem;
    }

    /* About page */
    .about-hero-section {
        padding-top: 4rem;
    }
    .about-hero-grid {
        gap: 1.889rem;
    }
    .about-stats-grid,
    .about-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .about-stats-item:last-child {
        grid-column: span 2;
    }
    .about-team-card {
        flex-direction: column;
    }
    .about-cta-actions,
    .about-team-contact-actions {
        flex-direction: column;
        width: 100%;
    }
    .about-cta-actions .btn,
    .about-team-contact-actions a,
    .about-cta-order-btn {
        width: 100%;
        justify-content: center;
    }

    /* Contact page */
    .contact-topbar-inner,
    .contact-topbar-links {
        align-items: flex-start;
    }
    .contact-topbar-links {
        gap: 12px;
    }
    .contact-hero-section {
        padding: 32px 0 40px;
    }
    .contact-final-cta-actions {
        flex-direction: column;
    }
    .contact-final-cta-actions .btn {
        width: 100%;
        max-width: 340px;
        justify-content: center;
    }

    /* Order page */
    .order-page .shop-trust-inner {
        gap: 14px;
    }
    .order-page .doc-picker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .order-page .addon-v2 {
        grid-template-columns: 1fr;
    }
    .order-page .order-help-link {
        width: 100%;
    }
    .checkout-page .pay-panel-grid {
        grid-template-columns: 1fr;
    }
    .confirm-page .confirm-hero {
        padding: 60px 0 44px;
    }
    .confirm-page .confirm-hero-icon {
        width: 72px;
        height: 72px;
        margin-bottom: 20px;
    }
}

/* Large mobile screens */
@media (max-width: 767px) {
    section {
        padding: var(--section-space-mobile) 0;
    }
    .footermenu-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .calc-card {
        padding: 30px 15px;
    }
    .btn-lg {
        padding: 15px 20px;
    }

    /* Homepage: large phone spacing */
    #page-home .hero-card {
        padding: 22px;
    }
    #page-home .hc-order-badge,
    #page-home .hc-doc-row {
        gap: 10px;
    }
    .section-header,
    .section-intro,
    .section-header-row {
        margin-bottom: 32px;
    }
    #page-home .blog-card.featured .blog-img-wrap {
        font-size: 2.25rem;
    }
    #page-home .cta-band-text {
        line-height: 1.6;
        text-align: center;
        flex-wrap: wrap;
    }
    .doc-cert-page .use-cases-grid,
    .doc-cert-page .pricing-grid {
        grid-template-columns: 1fr;
    }
    .doc-cert-page .hero-cta {
        flex-direction: column;
        align-items: stretch;
    }
    .doc-cert-page .hero-btn-primary,
    .doc-cert-page .hero-btn-outline,
    .doc-cert-page .hero-card-btn-primary,
    .doc-cert-page .hero-card-btn-outline {
        width: 100%;
        justify-content: center;
    }
    .hero-trust {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .footer {
        padding: 40px 0px 0px;
    }
    .footer-grid {
        margin-bottom: 25px;
    }
}

@media (max-width: 640px) {
    /* About page */
    .about-stats-grid,
    .about-values-grid,
    .about-iso-grid,
    .about-story-meta-grid {
        grid-template-columns: 1fr;
    }
    .about-stats-item,
    .about-stats-item:last-child {
        grid-column: auto;
        border-left: 1px solid var(--border);
    }
    .about-hero-card,
    .about-story-meta-grid,
    .about-team-card,
    .about-iso-card,
    .about-values-card {
        padding: 1.333rem;
    }
    .about-cta-benefits {
        gap: 0.667rem 1rem;
    }

    /* Contact page */
    .contact-card-header,
    .contact-card-body,
    .contact-order-box,
    .contact-badge-panel {
        padding: 20px;
    }
    .contact-person {
        align-items: flex-start;
    }
    .contact-answer-value {
        text-align: left;
    }
    .contact-form-row,
    .contact-channel-grid {
        grid-template-columns: 1fr;
    }

    /* Order page */
    .order-page .shop-body {
        padding: 24px 0 48px;
    }
    .order-page .shop-card-head,
    .order-page .shop-card-body,
    .order-page .summary-head,
    .order-page .summary-items,
    .checkout-page .checkout-summary-breakdown,
    .order-page .summary-total,
    .order-page .summary-cta,
    .order-page .payment-logos,
    .order-page .order-help-card,
    .order-page .doc-picker-head,
    .order-page .doc-picker-search,
    .order-page .doc-picker-grid,
    .order-page .doc-picker-foot {
        padding-right: 18px;
        padding-left: 18px;
    }
    .order-page .cart-item-header {
        align-items: flex-start;
        padding-right: 26px;
    }
    .order-page .cart-item-details {
        grid-template-columns: 1fr;
    }
    .order-page .cart-item-field-full {
        grid-column: auto;
    }
    .order-page .delivery-opt-v2 {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .order-page .delivery-opt-price-v2 {
        width: 100%;
        margin-left: 32px;
    }
    .checkout-page .checkout-grid,
    .checkout-page .checkout-grid-three {
        grid-template-columns: 1fr;
    }
    .confirm-page .confirm-step-content {
        padding-bottom: 28px;
    }
    .confirm-page .confirm-action-row .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    html {
        font-size: 15px;
    }

    /* Homepage: small phone typography and spacing */
    #page-home .hero {
        padding-top: 60px;
    }
    h1 {
        font-size: 2.266667rem;
        line-height: 1.08;
    }
    h2 {
        font-size: 1.8rem;
        line-height: 1.12;
    }
    #page-home .hero-sub,
    #page-home .body-lg,
    #page-home .section-sub {
        line-height: 1.65;
    }
    #page-home .hero-badge {
        margin-bottom: 18px;
    }
    #page-home .hero-check {
        align-items: flex-start;
    }
    #page-home .hero-card,
    #page-home .calc-card,
    #page-home .doc-card,
    #page-home .why-card,
    #page-home .review-card,
    #page-home .usecase-card,
    #page-home .guarantee-box {
        padding: 20px;
    }
    #page-home .stats-bar {
        padding: 20px 0;
    }
    #page-home .trust-strip {
        padding: 24px 0;
    }
    #page-home .why-grid,
    #page-home .usecases-grid,
    #page-home .authority-grid {
        margin-top: 40px;
    }
    .section-header,
    .section-intro,
    .section-header-row {
        margin-bottom: 28px;
    }
    #page-home .section-copy {
        margin-top: 12px;
    }
    #page-home .filter-bar {
        gap: 6px;
    }
    #page-home .filter-btn {
        padding: 8px 14px;
    }
    #page-home .doc-card,
    #page-home .lang-card,
    #page-home .langpair-card,
    #page-home .blog-body,
    #page-home .authority-item,
    #page-home .cities-wrap {
        padding: 16px;
    }
    #page-home .guar-stats {
        grid-template-columns: 1fr;
    }
    #page-home .langpairs-grid,
    #page-home .blog-grid {
        gap: 16px;
    }
    #page-home .cta-band .section-sub {
        margin-bottom: 24px;
    }
    #page-home .cta-band-text {
        margin-top: 18px;
    }

    .docs-grid {
        grid-template-columns: 1fr 1fr;
    }
    .langs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .how-steps {
        grid-template-columns: 1fr;
        margin-top: 40px;
    }
    .how-step {
        padding: 0;
    }
    .reviews-score-box {
        padding: 10px 15px;
    }
    .reviews-score-num {
        font-size: 1.75rem;
    }

    /* Document certificate pages: small phones */
    .doc-cert-page .hero-section {
        padding-top: 56px;
    }
    .doc-cert-page .hero-bg-gradient {
        width: 520px;
        height: 320px;
        top: -70px;
    }
    .doc-cert-page .hero-badges {
        gap: 5px;
    }
    .doc-cert-page .hero-badge {
        padding: 5px 8px;
        gap: 4px;
    }
    .doc-cert-page .hero-checklist-li {
        align-items: flex-start;
    }
    .doc-cert-page .birth-hero-card {
        padding: 20px;
    }
    .doc-cert-page .hero-card-price,
    .doc-cert-page .stats-bar-price,
    .doc-cert-page .pricing-price {
        font-size: 1.5rem;
    }
    .doc-cert-page .hero-card-price-span,
    .doc-cert-page .pricing-price-span {
        font-size: 0.9rem;
    }
    .doc-cert-page .hero-card-stat {
        padding: 12px;
    }
    .doc-cert-page .stats-bar-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .doc-cert-page .stats-bar-item:last-child {
        grid-column: 1 / -1;
        border-bottom: 0;
    }
    .doc-cert-page .use-cases-card,
    .doc-cert-page .pricing-card,
    .doc-cert-page .pricing-card-featured,
    .doc-cert-page .pricing-footer .pricing-card,
    .doc-cert-page .review-card {
        padding: 20px;
    }
    .doc-cert-page .languages-grid {
        grid-template-columns: 1fr 1fr;
    }
    .doc-cert-page .birth-why-card {
        flex-direction: column;
    }
    .doc-cert-page .birth-why-card-icon {
        width: 44px;
        height: 44px;
    }
    .doc-cert-page .stillhave-que-actions .btn {
        max-width: none;
    }

    .doc-cert-page .birth-final-cta-title br {
        display: none;
    }
    .doc-cert-page .birth-final-cta-benefits {
        flex-direction: column;
        align-items: center;
    }
    .doc-cert-page .birth-final-cta-note {
        line-height: 1.7;
    }
    .section-h2 br {
        display: none;
    }

    /* Order page */
    .order-page .shop-step {
        justify-content: center;
    }
    .order-page .shop-step-label {
        display: none;
    }
    .order-page .shop-step-line {
        margin: 0 4px;
    }
    .order-page .shop-card-head,
    .order-page .shop-card-body,
    .order-page .summary-head,
    .order-page .summary-items,
    .checkout-page .checkout-summary-breakdown,
    .order-page .summary-total,
    .order-page .summary-cta,
    .order-page .payment-logos,
    .order-page .order-help-card {
        padding-right: 16px;
        padding-left: 16px;
    }
    .order-page .promo-row,
    .order-page .doc-picker-foot {
        flex-direction: column;
    }
    .order-page .promo-apply,
    .order-page .doc-picker-btn {
        width: 100%;
    }
    .order-page .doc-picker-grid {
        grid-template-columns: 1fr;
    }
    .checkout-page .checkout-summary-meta {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }
    .confirm-page .confirm-hero {
        padding: 52px 0 38px;
    }
    .confirm-page .confirm-order-pill {
        width: 100%;
        max-width: 340px;
        justify-content: center;
        flex-wrap: wrap;
        padding-right: 16px;
        padding-left: 16px;
    }
    .confirm-page .confirm-step {
        gap: 12px;
    }
    .confirm-page .confirm-payment-card-inner {
        padding: 18px;
    }
}