/* Public website responsive hardening */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.shell,
.header-shell,
.home-hero-grid,
.home-feature-grid,
.plan-board,
.plan-support-grid,
.contact-redesign-grid,
.trial-grid,
.checkout-grid,
.conversion-grid,
.trust-card-grid,
.testimonial-grid,
.feature-intro-grid,
.feature-module-grid,
.feature-flow-grid,
.feature-role-grid,
.feature-control-grid,
.feature-check-grid,
.about-intro-grid,
.about-story-grid,
.about-method-grid,
.about-fit-grid,
.about-value-grid,
.about-principle-grid,
.public-hero-grid,
.public-form-layout,
.footer-grid {
    min-width: 0;
}

.home-hero-grid > *,
.plan-board > *,
.plan-support-grid > *,
.contact-redesign-grid > *,
.trial-grid > *,
.checkout-grid > *,
.conversion-grid > *,
.feature-intro-grid > *,
.feature-module-grid > *,
.feature-flow-grid > *,
.feature-role-grid > *,
.feature-control-grid > *,
.about-story-grid > *,
.about-method-grid > *,
.public-form-layout > *,
.footer-grid > * {
    min-width: 0;
}

.btn,
.nav-links a,
.billing-toggle a,
.plan-card-action .btn,
.contact-form-card .btn,
.trial-form .btn,
.lead-modal-form .btn {
    white-space: normal;
    text-align: center;
}

.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea,
.trial-form input,
.trial-form select,
.trial-form textarea,
.public-form input,
.public-form select,
.public-form textarea,
.checkout-form input,
.checkout-form select,
.checkout-form textarea {
    max-width: 100%;
}

.pricing-comparison-table,
.table-preview {
    max-width: 100%;
}

@media (min-width: 1440px) {
    .shell {
        width: min(1280px, calc(100% - 72px));
    }

    .home-hero,
    .public-hero,
    .feature-breadcrumb-section {
        padding-block: 96px;
    }
}

@media (min-width: 1800px) {
    .shell {
        width: min(1360px, calc(100% - 96px));
    }

    .site-header .shell,
    .site-footer .shell {
        width: min(1440px, calc(100% - 96px));
    }
}

@media (max-width: 1180px) {
    .shell {
        width: min(100% - 36px, 1180px);
    }

    .home-hero-grid,
    .pricing-intro-grid,
    .contact-redesign-grid,
    .trial-grid,
    .checkout-grid,
    .conversion-grid,
    .feature-intro-grid,
    .about-intro-grid,
    .about-story-grid,
    .about-method-grid,
    .about-fit-grid,
    .public-hero-grid,
    .public-form-layout {
        gap: 28px;
    }

    .plan-board,
    .home-feature-grid,
    .feature-role-grid,
    .about-value-grid,
    .about-principle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 960px) {
    .home-hero-grid,
    .pricing-intro-grid,
    .contact-redesign-grid,
    .trial-grid,
    .checkout-grid,
    .conversion-grid,
    .feature-intro-grid,
    .feature-flow-grid,
    .feature-control-grid,
    .about-intro-grid,
    .about-story-grid,
    .about-method-grid,
    .about-fit-grid,
    .public-hero-grid,
    .public-form-layout {
        grid-template-columns: 1fr;
    }

    .demo-page-section .contact-info-block,
    .trial-page-section .trial-info,
    .feature-flow-copy {
        position: static;
    }

    .site-header.is-menu-open .nav-actions .btn,
    .site-header.is-menu-open .nav-login {
        width: 100%;
    }

    .plan-section-head,
    .feature-topbar-inner,
    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .billing-toggle {
        width: 100%;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .billing-toggle a {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 8px;
        text-align: center;
    }

    .calendar-card,
    .calendar-card iframe {
        min-height: 500px;
    }
}

@media (max-width: 720px) {
    .shell {
        width: min(100% - 28px, 1180px);
    }

    .header-shell {
        padding-block: 12px;
    }

    .brand-logo {
        width: 148px;
        height: 56px;
    }

    .home-hero,
    .home-section,
    .public-section,
    .contact-redesign-section,
    .trial-section,
    .checkout-page,
    .pricing-detail-section {
        padding-block: 56px;
    }

    .feature-breadcrumb-section,
    .public-hero,
    .page-hero {
        padding-block: 52px;
    }

    .home-hero h1,
    .feature-page-title h1,
    .public-hero h1,
    .page-hero h1 {
        font-size: 34px;
        line-height: 1.1;
    }

    .home-section-head h2,
    .plan-section-head h2,
    .pricing-detail-head h2,
    .contact-info-block h2,
    .trial-info h2,
    .feature-intro-grid h2,
    .about-intro-grid h2 {
        font-size: 28px;
        line-height: 1.16;
    }

    .home-feature-grid,
    .plan-board,
    .plan-support-grid,
    .trust-card-grid,
    .testimonial-grid,
    .feature-module-grid,
    .feature-role-grid,
    .feature-check-grid,
    .about-value-grid,
    .about-principle-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-grid,
    .checkout-status-meta,
    .preview-metrics,
    .preview-flow,
    .preview-table div {
        grid-template-columns: 1fr;
    }

    .contact-info-block,
    .trial-info,
    .contact-form-card,
    .trial-form,
    .checkout-form,
    .checkout-summary,
    .plan-card,
    .pricing-detail-grid article,
    .public-form-card,
    .public-info-panel {
        padding: 22px;
    }

    .contact-form-card .btn,
    .trial-form .btn,
    .checkout-form .btn,
    .home-hero-actions .btn,
    .home-cta-band .btn {
        width: 100%;
    }

    .mobile-sticky-cta {
        grid-template-columns: 1fr 1fr;
    }

    .mobile-sticky-cta .btn {
        width: 100%;
    }

    .lead-modal {
        padding: 12px;
    }

    .lead-modal-panel {
        width: min(100%, calc(100vw - 24px));
        max-height: calc(100svh - 24px);
        padding: 18px;
    }

    .lead-modal-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .shell {
        width: min(100% - 22px, 1180px);
    }

    .brand-logo {
        width: 136px;
        height: 50px;
    }

    .site-menu-toggle {
        width: 38px;
        height: 38px;
    }

    .home-hero h1,
    .feature-page-title h1,
    .public-hero h1,
    .page-hero h1 {
        font-size: 30px;
    }

    .home-section-head h2,
    .plan-section-head h2,
    .pricing-detail-head h2,
    .contact-info-block h2,
    .trial-info h2 {
        font-size: 25px;
    }

    .billing-toggle a {
        padding-inline: 6px;
        font-size: 12px;
    }

    .contact-info-block,
    .trial-info,
    .contact-form-card,
    .trial-form,
    .checkout-form,
    .checkout-summary,
    .plan-card {
        padding: 18px;
    }

    body {
        padding-top: 82px;
        padding-bottom: 62px;
    }
}

@media (max-width: 920px) {
    .site-header.is-menu-open .nav-actions .btn,
    .site-header.is-menu-open .nav-login {
        width: 100%;
    }

    .site-header.is-menu-open .nav-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 360px) {
    .billing-toggle {
        gap: 3px;
        padding: 4px;
    }

    .billing-toggle a {
        padding-inline: 4px;
        font-size: 11px;
    }

    .site-header.is-menu-open .nav-actions {
        gap: 6px;
    }

    .site-header.is-menu-open .nav-actions .nav-login,
    .site-header.is-menu-open .nav-actions .btn,
    .mobile-sticky-cta .btn {
        min-height: 40px;
        padding-inline: 7px;
        font-size: 13px;
    }
}

/* Header: fixed position globally */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

/* Default body offset for fixed header (mobile) */
body {
    padding-top: 82px;
}

/* Desktop — taller header */
@media (min-width: 921px) {
    body {
        padding-top: 96px;
    }
}

.site-menu-toggle {
    grid-template-rows: repeat(3, 2px);
    align-content: center;
    justify-content: center;
    gap: 4px;
}

.site-menu-toggle span {
    margin: 0;
    transform-origin: center;
}

.site-header.is-menu-open .site-menu-toggle span:first-child {
    transform: translateY(6px) rotate(45deg);
}

.site-header.is-menu-open .site-menu-toggle span:last-child {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 920px) {
    .site-header {
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08);
    }

    .site-header.is-menu-open {
        box-shadow: 0 18px 44px rgba(76, 29, 149, 0.12);
    }

    .site-header.is-menu-open .nav-links {
        align-items: stretch;
        text-align: left;
        border-color: rgba(124, 58, 237, 0.18);
        border-radius: 12px;
        box-shadow: 0 14px 34px rgba(76, 29, 149, 0.08);
    }

    .site-header.is-menu-open .nav-links a {
        justify-content: flex-start;
        text-align: left;
    }

    .site-header.is-menu-open .nav-links a.active,
    .site-header.is-menu-open .nav-links a:hover {
        color: var(--public-brand-dark);
        background: #faf5ff;
    }

    .site-header.is-menu-open .nav-actions {
        align-items: stretch;
        text-align: left;
    }
}