/* Last-mile overrides for the homepage. Loaded after the inherited polish file. */

header[data-kite-global="site-header"] {
    top: 16px !important;
    max-width: 1160px !important;
    padding-inline: 18px !important;
}

header[data-kite-global="site-header"].is-scrolled {
    top: 10px !important;
    max-width: 1080px !important;
}

#about {
    min-height: 820px !important;
    padding-top: 144px !important;
    padding-bottom: 76px !important;
}

#about .section-container {
    grid-template-columns: minmax(500px, .96fr) minmax(570px, 1.04fr) !important;
    gap: clamp(52px, 5vw, 88px) !important;
}

#about .section-container > .flex:first-child {
    gap: 34px !important;
}

#about .section-container > .flex:first-child > .flex:first-child {
    gap: 22px !important;
}

#about .hero-title {
    max-width: 700px !important;
    font-size: clamp(56px, 4.65vw, 74px) !important;
    line-height: .99 !important;
    letter-spacing: -.055em !important;
}

#about .premium-subtitle {
    max-width: 650px !important;
    font-size: 19px !important;
}

#testimonials {
    padding-top: 108px !important;
    padding-bottom: 96px !important;
    background: transparent !important;
}

#testimonials::before {
    inset: 16px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 8% 22%, rgba(254,205,26,.1), transparent 25%),
        radial-gradient(circle at 92% 78%, rgba(132,230,246,.1), transparent 27%),
        rgba(243,241,236,.68) !important;
    box-shadow: none !important;
}

#testimonials::after {
    display: none !important;
}

#testimonials .testimonial-heading {
    margin-bottom: 42px !important;
}

#testimonials .testimonial-heading h2 {
    color: var(--home-ink) !important;
}

#testimonials .testimonial-heading .section-kicker {
    color: rgba(17,17,17,.5) !important;
}

#testimonials .testimonial-heading-aside p {
    color: rgba(17,17,17,.54) !important;
}

#testimonials .testimonial-review-grid {
    display: flex !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 20px 36px !important;
    align-items: flex-start !important;
    gap: 22px !important;
    transform-origin: center !important;
    animation: testimonialRail 26s ease-in-out infinite alternate !important;
    will-change: transform;
}

@keyframes testimonialRail {
    from { transform: translateX(0) rotate(-1.35deg); }
    to { transform: translateX(-16%) rotate(-1.35deg); }
}

#testimonials .testimonial-review-grid:hover {
    animation-play-state: paused !important;
}

#testimonials .testimonial-review-grid > div,
#testimonials .testimonial-review-grid > div:nth-child(n+5) {
    display: flex !important;
    width: 380px !important;
    min-height: 0 !important;
    padding: 36px !important;
    border: 1px solid rgba(17,17,17,.055) !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,.95) !important;
    box-shadow: 0 18px 48px rgba(42,35,23,.08) !important;
    flex: 0 0 380px !important;
    gap: 25px !important;
}

#testimonials .testimonial-review-grid > div:nth-child(3n + 1) {
    height: 610px !important;
    margin-top: 84px !important;
}

#testimonials .testimonial-review-grid > div:nth-child(3n + 2) {
    height: 652px !important;
    margin-top: 42px !important;
}

#testimonials .testimonial-review-grid > div:nth-child(3n) {
    height: 694px !important;
    margin-top: 0 !important;
}

#testimonials .testimonial-review-grid > div:hover {
    box-shadow: 0 26px 64px rgba(42,35,23,.13) !important;
    transform: translateY(-7px) rotate(.4deg) !important;
}

#testimonials .testimonial-review-grid > div > div:last-child {
    margin-top: auto !important;
}

#contact {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

#contact > .px-5 {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 20px !important;
}

#contact > .px-5 > div {
    max-width: none !important;
    padding: 72px clamp(32px, 5vw, 80px) !important;
    border-radius: 34px !important;
    background: #121212 !important;
}

#contact > .px-5 > div > .relative.z-10 {
    max-width: 1320px !important;
    margin-inline: auto !important;
    padding-inline: 48px !important;
}

#contact > .px-5 > div > .relative.z-10 > .flex {
    display: flex !important;
    gap: clamp(56px, 7vw, 104px) !important;
    align-items: stretch !important;
    justify-content: space-between !important;
}

#contact > .px-5 > div > div:first-child {
    opacity: .5 !important;
    mix-blend-mode: normal !important;
}

#contact > .px-5 > div > div:nth-child(2) {
    background: rgba(0,0,0,.43) !important;
}

#contact > .px-5 > div > .relative.z-10 > .flex > div:first-child {
    width: min(54%, 610px) !important;
}

#contact .contact-mode-heading {
    max-width: 610px !important;
    margin-bottom: 22px !important;
    font-size: clamp(42px, 4vw, 58px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.048em !important;
}

#contact .contact-mode-heading + p + div {
    display: block !important;
    margin-bottom: 23px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
}

#contact [data-editable="cta-section-desc"] {
    max-width: 540px !important;
    color: rgba(255,255,255,.58) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}

#contact .flex.flex-col.gap-6.mt-4 {
    display: flex !important;
    max-width: none !important;
    margin-top: 8px !important;
    flex-direction: column !important;
    gap: 14px !important;
}

#contact .flex.flex-col.gap-6.mt-4 > div {
    width: fit-content;
    min-width: 285px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: none !important;
}

#contact .lg\:w-\[480px\] {
    width: min(44%, 480px) !important;
    flex: 0 0 min(44%, 480px);
}

#contact .lg\:w-\[480px\] > div {
    padding: 32px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.065) !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

#contact form label {
    color: rgba(255,255,255,.45) !important;
}

#contact form input,
#contact form textarea {
    border: 1px solid rgba(255,255,255,.11) !important;
    background: rgba(255,255,255,.06) !important;
    color: white !important;
    box-shadow: none !important;
}

#contact form input::placeholder,
#contact form textarea::placeholder {
    color: rgba(255,255,255,.24) !important;
}

#contact form input:focus,
#contact form textarea:focus {
    border-color: rgba(255,255,255,.32) !important;
    background: rgba(255,255,255,.09) !important;
    box-shadow: 0 0 0 4px rgba(132,230,246,.11) !important;
}

@media (max-width: 1179px) {
    #about {
        min-height: 0 !important;
    }

    #about .section-container {
        grid-template-columns: 1fr !important;
    }

    .hero-system-showcase {
        max-width: 760px;
        min-height: 600px;
        margin-inline: auto;
    }
}

@media (max-width: 1023px) {
    #contact > .px-5 > div > .relative.z-10 > .flex {
        display: flex !important;
        flex-direction: column !important;
        gap: 52px !important;
    }

    #contact > .px-5 > div > .relative.z-10 > .flex > div:first-child,
    #contact .lg\:w-\[480px\] {
        width: 100% !important;
        max-width: 680px !important;
        flex-basis: auto !important;
    }
}

@media (max-width: 767px) {
    header[data-kite-global="site-header"],
    header[data-kite-global="site-header"].is-scrolled {
        top: 10px !important;
        padding-inline: 12px !important;
    }

    #about {
        min-height: 0 !important;
        padding-top: 108px !important;
        padding-bottom: 56px !important;
    }

    #about .section-container {
        padding-inline: 18px !important;
        gap: 45px !important;
    }

    #about .hero-title {
        font-size: clamp(43px, 12vw, 56px) !important;
        line-height: 1 !important;
    }

    .hero-system-showcase {
        min-height: 510px;
    }

    #testimonials {
        padding-top: 82px !important;
        padding-bottom: 82px !important;
    }

    #testimonials::before {
        inset: 7px 0 !important;
        border-radius: 0 !important;
    }

    #testimonials .testimonial-heading {
        margin-bottom: 30px !important;
    }

    #testimonials .testimonial-review-grid {
        width: 100% !important;
        padding: 0 18px 22px !important;
        overflow-x: auto !important;
        gap: 12px !important;
        transform: none !important;
        animation: none !important;
        scroll-padding-left: 18px;
        scroll-snap-type: x mandatory;
    }

    #testimonials .testimonial-review-grid > div,
    #testimonials .testimonial-review-grid > div:nth-child(n) {
        display: flex !important;
        width: min(84vw, 340px) !important;
        height: auto !important;
        min-height: 520px !important;
        margin-top: 0 !important;
        padding: 28px !important;
        flex: 0 0 min(84vw, 340px) !important;
        scroll-snap-align: start;
    }

    #contact {
        padding-top: 55px !important;
        padding-bottom: 45px !important;
    }

    #contact > .px-5 {
        padding-inline: 12px !important;
    }

    #contact > .px-5 > div {
        padding: 52px 20px 20px !important;
        border-radius: 31px !important;
    }

    #contact > .px-5 > div > .relative.z-10 {
        padding-inline: 0 !important;
    }

    #contact .contact-mode-heading {
        font-size: 42px !important;
    }

    #contact .lg\:w-\[480px\] > div {
        padding: 23px !important;
        border-radius: 22px !important;
    }
}

/* ========================================================================== */
/* Homepage consistency + motion system                                      */
/* ========================================================================== */

:root {
    --sn-body-size: 16px;
    --sn-body-leading: 1.6;
    --sn-radius-sm: 16px;
    --sn-radius-md: 24px;
    --sn-radius-lg: 30px;
    --sn-ease: cubic-bezier(.16, 1, .3, 1);
}

body {
    font-size: var(--sn-body-size) !important;
    line-height: var(--sn-body-leading) !important;
}

/* One readable body-copy scale. Small labels and display subtitles remain intentionally distinct. */
main > section p:not(.premium-subtitle):not(.section-kicker),
main > section .section-container p:not(.premium-subtitle):not(.section-kicker),
main > section .pricing-family p:not(.premium-subtitle):not(.section-kicker) {
    font-size: var(--sn-body-size);
    line-height: var(--sn-body-leading);
    letter-spacing: -.015em;
    margin-bottom: 0 !important;
}

#client-logos .client-logo-proof p,
header[data-kite-global="site-header"] .mega-menu p,
footer[data-kite-global="site-footer"] p {
    line-height: 1.45 !important;
}

#client-logos .client-logo-proof p { font-size: 12px !important; }
#testimonials .testimonial-review-grid p { font-size: 18px !important; line-height: 1.55 !important; }
#contact [data-editable="cta-section-desc"] { font-size: 16px !important; line-height: 1.65 !important; }

/* Header: three intentional zones keep the logo, navigation and CTA aligned. */
header[data-kite-global="site-header"] {
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    padding: 0 !important;
}

header[data-kite-global="site-header"] nav {
    display: grid !important;
    height: 64px !important;
    padding: 0 10px 0 20px !important;
    border-radius: 999px !important;
    grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr);
    gap: 20px;
    align-items: center;
}

header[data-kite-global="site-header"] nav > a:first-child {
    min-width: 0 !important;
    justify-self: start;
    padding-left: 0 !important;
}

header[data-kite-global="site-header"] nav > a:first-child img {
    display: block;
    width: auto;
    height: 28px !important;
    transition: transform 420ms var(--sn-ease);
}

header[data-kite-global="site-header"] nav > a:first-child:hover img {
    transform: translateY(-1px) scale(1.025);
}

header[data-kite-global="site-header"] nav > div.hidden.md\:flex {
    justify-self: center;
    gap: 2px !important;
}

header[data-kite-global="site-header"] .nav-link {
    min-height: 40px;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 620 !important;
    line-height: 1 !important;
    white-space: nowrap;
}

header[data-kite-global="site-header"] nav > a.btn-premium-base {
    justify-self: end;
    margin-left: 0 !important;
}

header[data-kite-global="site-header"] .nav-item:focus-within .mega-menu,
header[data-kite-global="site-header"] .nav-item:hover .mega-menu {
    transform: translateX(-50%) translateY(0) !important;
}

/* Button rhythm: every CTA shares the same text baseline, inset and icon size. */
.btn-premium-base {
    min-height: 48px !important;
    height: auto !important;
    padding: 8px 8px 8px 18px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: -.018em !important;
    white-space: nowrap;
    overflow: visible;
    transition: transform 280ms var(--sn-ease), box-shadow 280ms ease, background-color 220ms ease, color 220ms ease, border-color 220ms ease, opacity 220ms ease !important;
}

.btn-premium-base .icon-box {
    width: 30px !important;
    height: 30px !important;
    margin-left: 12px !important;
    flex: 0 0 30px;
}

.btn-premium-outline {
    padding-right: 18px !important;
    padding-left: 18px !important;
}

.btn-premium-base:hover,
.btn-premium-base:focus-visible {
    opacity: 1 !important;
    transform: translateY(-2px);
    box-shadow: 0 13px 26px rgba(32, 27, 17, .14);
}

.btn-premium-base:active {
    transform: translateY(0) scale(.975);
    box-shadow: 0 5px 12px rgba(32, 27, 17, .12);
}

.btn-premium-base:focus-visible {
    outline: 3px solid rgba(132, 230, 246, .58);
    outline-offset: 3px;
}

/* Consistent soft corners for the repeated content surfaces. */
#headache .headache-board,
#why-us .foundation-shell,
#features .features-shell,
#pricing .pricing-family-shell,
#growth-addons .pricing-family-shell,
#hosting-plans > div,
#work .work-project,
#faq .faq-shell,
#contact > .px-5 > div,
footer[data-kite-global="site-footer"] > div > .grid {
    border-radius: var(--sn-radius-lg) !important;
}

#headache .headache-card,
#features .feature-tab-btn,
#features .tab-visual-mockup,
#work .work-project-copy,
#faq .faq-item {
    border-radius: var(--sn-radius-md) !important;
}

/* Small, tactile interactions on existing surfaces. */
#client-logos .marquee-track > a,
#headache .headache-card,
#features .feature-tab-btn,
#work .work-project,
#faq .faq-item,
.pricing-family-nav button {
    transition: transform 360ms var(--sn-ease), box-shadow 360ms ease, border-color 240ms ease, background-color 240ms ease, color 240ms ease !important;
}

#headache .headache-card:hover,
#faq .faq-item:hover {
    transform: translateY(-4px);
}

#work .work-project:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 58px rgba(47, 40, 24, .12);
}

#features .feature-tab-btn:hover,
.pricing-family-nav button:hover {
    transform: translateY(-2px);
}

input,
textarea,
select {
    transition: border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease, transform 220ms ease !important;
}

input:focus,
textarea:focus,
select:focus {
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    header[data-kite-global="site-header"],
    header[data-kite-global="site-header"].is-scrolled {
        width: calc(100% - 24px) !important;
        max-width: none !important;
    }

    header[data-kite-global="site-header"] nav {
        display: flex !important;
        height: 58px !important;
        padding: 0 8px 0 15px !important;
        gap: 0;
    }

    header[data-kite-global="site-header"] nav > a:first-child img { height: 26px !important; }
    header[data-kite-global="site-header"] nav > a.btn-premium-base { display: none !important; }

    .btn-premium-base {
        min-height: 46px !important;
        font-size: 14px !important;
    }

    .btn-premium-base .icon-box {
        width: 28px !important;
        height: 28px !important;
        flex-basis: 28px;
    }

}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

}

/* Header reset: fixed edge controls with a truly centred navigation group. */
header[data-kite-global="site-header"],
header[data-kite-global="site-header"].is-scrolled {
    top: 18px !important;
    width: min(1120px, calc(100% - 32px)) !important;
    max-width: 1120px !important;
}

header[data-kite-global="site-header"] nav {
    position: relative;
    display: flex !important;
    height: 64px !important;
    padding: 0 10px 0 20px !important;
    justify-content: space-between !important;
}

header[data-kite-global="site-header"] nav > div.hidden.md\:flex {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex !important;
    transform: translate(-50%, -50%);
}

header[data-kite-global="site-header"] nav > a.btn-premium-base {
    margin-left: auto !important;
}

@media (max-width: 767px) {
    header[data-kite-global="site-header"],
    header[data-kite-global="site-header"].is-scrolled {
        top: 10px !important;
        width: calc(100% - 24px) !important;
    }

    header[data-kite-global="site-header"] nav > div.hidden.md\:flex {
        position: static;
        transform: none;
    }
}

/* Final interaction and spacing repairs. */
header[data-kite-global="site-header"],
header[data-kite-global="site-header"].is-scrolled {
    width: min(980px, calc(100% - 32px)) !important;
    max-width: 980px !important;
}

header[data-kite-global="site-header"] .nav-item {
    position: relative;
}

/* This invisible bridge keeps hover active while the pointer crosses to the menu. */
header[data-kite-global="site-header"] .nav-item::after {
    position: absolute;
    z-index: 99;
    top: 100%;
    right: -10px;
    left: -10px;
    height: 16px;
    content: "";
}

header[data-kite-global="site-header"] .mega-menu {
    top: 100% !important;
    margin-top: 7px;
}

header[data-kite-global="site-header"] .nav-item:hover .mega-menu,
header[data-kite-global="site-header"] .nav-item:focus-within .mega-menu {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) !important;
}

/* Icon-less actions need equal horizontal insets, not icon-button padding. */
.btn-premium-base:not(:has(.icon-box)) {
    padding-right: 20px !important;
    padding-left: 20px !important;
}

/* Bring the closing CTA back onto the same page grid and remove the dead gap before it. */
#faq {
    padding-bottom: 58px !important;
}

#contact {
    padding-top: 22px !important;
    padding-bottom: 72px !important;
}

#contact > .px-5 {
    width: 100% !important;
    max-width: 1500px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 48px !important;
    padding-left: 48px !important;
}

#contact > .px-5 > div {
    padding-top: 68px !important;
    padding-bottom: 68px !important;
    border-radius: 32px !important;
}

@media (max-width: 767px) {
    header[data-kite-global="site-header"],
    header[data-kite-global="site-header"].is-scrolled {
        width: calc(100% - 24px) !important;
        max-width: none !important;
    }

    #faq { padding-bottom: 42px !important; }

    #contact {
        padding-top: 12px !important;
        padding-bottom: 50px !important;
    }

    #contact > .px-5 {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
}

/* Keep anchor links and menu buttons on one identical navigation baseline. */
header[data-kite-global="site-header"] nav > div.hidden.md\:flex {
    height: 40px;
    align-items: center !important;
}

header[data-kite-global="site-header"] .nav-item {
    display: flex;
    height: 40px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center;
}

header[data-kite-global="site-header"] .nav-link,
header[data-kite-global="site-header"] .nav-item > .nav-link {
    display: inline-flex !important;
    height: 40px !important;
    min-height: 40px !important;
    align-items: center;
    justify-content: center;
}

header[data-kite-global="site-header"] a.nav-link[href="index.html"] {
    background: transparent !important;
}

/* Tablet and mobile use the actual drawer, rather than squeezing desktop navigation. */
header[data-kite-global="site-header"] nav > div.hidden.lg\:flex {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex !important;
    height: 40px;
    transform: translate(-50%, -50%);
    align-items: center;
}

@media (max-width: 1023px) {
    header[data-kite-global="site-header"],
    header[data-kite-global="site-header"].is-scrolled {
        top: 10px !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
    }

    header[data-kite-global="site-header"] nav {
        display: flex !important;
        height: 58px !important;
        padding: 0 8px 0 15px !important;
        justify-content: space-between !important;
    }

    header[data-kite-global="site-header"] nav > div.hidden.lg\:flex {
        display: none !important;
    }

    header[data-kite-global="site-header"] nav > a:first-child img {
        height: 26px !important;
    }
}

@media (max-width: 767px) {
    /* Compact the three mobile pricing accordions into one clear stack. */
    #pricing,
    #growth-addons,
    #hosting-plans {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .pricing-family-accordion {
        position: relative !important;
        top: auto !important;
        width: calc(100% - 36px) !important;
        min-height: 76px !important;
        margin: 8px 18px !important;
    }

    #testimonials .testimonial-review-grid {
        scroll-snap-type: x proximity !important;
    }
}

/* Full-screen mobile navigation: same desktop destinations, arranged as a tactile route map. */
@media (max-width: 1023px) {
    #mobile-menu-content.mobile-drawer {
        border: 0 !important;
        background:
            radial-gradient(circle at 88% 10%, rgba(132, 230, 246, .28), transparent 23%),
            radial-gradient(circle at 8% 70%, rgba(254, 205, 26, .17), transparent 27%),
            linear-gradient(rgba(17,17,17,.032) 1px, transparent 1px),
            linear-gradient(90deg, rgba(17,17,17,.032) 1px, transparent 1px),
            #f7f5f0 !important;
        background-size: auto, auto, 44px 44px, 44px 44px, auto;
    }

    .mobile-drawer-inner {
        width: min(100%, 680px);
        margin: 0 auto;
    }

    .mobile-drawer-nav {
        display: flex;
        padding-bottom: 12px;
        flex-direction: column;
        gap: 26px;
    }

    .mobile-drawer-primary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-drawer-primary-link {
        display: grid;
        min-height: 58px;
        padding: 10px;
        border: 1px solid rgba(17,17,17,.075);
        border-radius: 18px;
        background: rgba(255,255,255,.72);
        place-items: center;
        box-shadow: 0 10px 26px rgba(47,40,24,.055), inset 0 1px 0 rgba(255,255,255,.8);
        color: var(--home-ink);
        font-family: "Albert Sans", sans-serif;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -.03em;
        transition: transform 250ms var(--sn-ease), background 250ms ease, box-shadow 250ms ease;
    }

    .mobile-drawer-primary-link:active,
    .mobile-drawer-primary-link:hover {
        background: white;
        box-shadow: 0 15px 32px rgba(47,40,24,.1);
        transform: translateY(-2px);
    }

    .mobile-drawer-group {
        padding: 18px;
        border: 1px solid rgba(17,17,17,.07);
        border-radius: 24px;
        background: rgba(255,255,255,.58);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
    }

    .mobile-drawer-label {
        margin: 0 0 15px !important;
        color: rgba(17,17,17,.42) !important;
        font-size: 10px !important;
        font-weight: 760 !important;
        letter-spacing: .12em !important;
        line-height: 1 !important;
        text-transform: uppercase;
    }

    .mobile-drawer-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
    }

    .mobile-drawer-service {
        display: flex;
        min-height: 92px;
        padding: 11px 7px;
        border: 1px solid transparent;
        border-radius: 16px;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        color: var(--home-ink);
        font-size: 11px;
        font-weight: 620;
        letter-spacing: -.015em;
        line-height: 1.15;
        text-align: center;
        transition: border-color 220ms ease, background 220ms ease, transform 260ms var(--sn-ease);
    }

    .mobile-drawer-service:hover,
    .mobile-drawer-service:active {
        border-color: rgba(17,17,17,.075);
        background: rgba(255,255,255,.8);
        transform: translateY(-2px);
    }

    .mobile-drawer-service > div {
        width: 38px !important;
        height: 38px !important;
    }

    .mobile-drawer-service span {
        display: block;
        max-width: 92px;
        font-size: inherit !important;
        font-weight: inherit !important;
    }

    .mobile-drawer-company-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-drawer-company-links a {
        display: flex;
        min-height: 44px;
        padding: 0 13px;
        border: 1px solid rgba(17,17,17,.065);
        border-radius: 13px;
        background: rgba(255,255,255,.64);
        align-items: center;
        color: var(--home-ink);
        font-size: 13px;
        font-weight: 610;
        transition: transform 240ms var(--sn-ease), background 220ms ease;
    }

    .mobile-drawer-company-links a:hover,
    .mobile-drawer-company-links a:active {
        background: white;
        transform: translateX(3px);
    }

    #mobile-menu-content .mt-auto {
        margin-top: auto;
        padding-top: 20px !important;
    }

    #mobile-menu-content .btn-premium-base {
        min-height: 52px !important;
    }

    /* At the menu breakpoint, the rail always behaves like a swipeable marquee. */
    #testimonials .testimonial-review-grid {
        display: flex !important;
        width: 100% !important;
        padding: 0 18px 22px !important;
        overflow-x: auto !important;
        gap: 12px !important;
        transform: none !important;
        animation: none !important;
        scroll-behavior: auto;
        scroll-snap-type: x proximity !important;
        scrollbar-width: none;
        touch-action: pan-x;
    }

    #testimonials .testimonial-review-grid::-webkit-scrollbar { display: none; }

    #testimonials .testimonial-review-grid > div,
    #testimonials .testimonial-review-grid > div:nth-child(n) {
        display: flex !important;
        width: min(82vw, 360px) !important;
        min-height: 480px !important;
        height: auto !important;
        margin-top: 0 !important;
        padding: 28px !important;
        flex: 0 0 min(82vw, 360px) !important;
        scroll-snap-align: start;
    }

    #growth-addons .growth-feature-panel {
        max-height: none !important;
        overflow: visible !important;
    }

    #growth-addons .growth-feature-panel::after,
    #growth-addons .growth-feature-toggle {
        display: none !important;
    }
}

@media (max-width: 420px) {
    .mobile-drawer-inner { padding: 23px 18px !important; }
    .mobile-drawer-nav { gap: 19px; }
    .mobile-drawer-group { padding: 15px; border-radius: 21px; }
    .mobile-drawer-service { min-height: 84px; font-size: 10px; }
    .mobile-drawer-primary-link { min-height: 54px; font-size: 16px; }
}