/* Shared guardrails for the Tailwind-based Preschool pages. */
#cta .ps-cta-button,
section[id="cta"] .ps-cta-button {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: max-content !important;
    min-height: 54px !important;
    padding: 0.95rem 1.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    flex: 0 0 auto !important;
    border-radius: 9999px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: center !important;
    box-shadow: 0 16px 32px rgba(18, 31, 0, 0.18) !important;
    position: relative !important;
    overflow: visible !important;
}

#cta .ps-cta-button > span,
section[id="cta"] .ps-cta-button > span {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 0;
}

#cta .ps-cta-button .material-symbols-outlined,
section[id="cta"] .ps-cta-button .material-symbols-outlined {
    width: 1.35em;
    height: 1.35em;
    justify-content: center;
    font-size: 1.35rem !important;
    line-height: 1 !important;
}

/* Mobile guardrails for the Tailwind-based Preschool pages. */
@media (max-width: 767.98px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    #psProgressTrack {
        height: 3px;
    }

    #psProgressRocket {
        display: none;
    }

    #psNavbar {
        top: 0.65rem !important;
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
    }

    #psNavbar.top-2,
    #psNavbar.top-4 {
        top: 0.65rem !important;
    }

    #psNavbarInner {
        min-height: 58px;
        gap: 0.5rem !important;
        border-radius: 1.35rem !important;
        padding: 0.55rem 0.65rem !important;
    }

    #psNavbarInner img {
        max-width: min(52vw, 178px);
        height: auto !important;
        max-height: 38px;
        object-fit: contain;
    }

    #psNavbarInner > a {
        min-width: 0;
    }

    #psNavbarInner > div:last-child {
        gap: 0.4rem !important;
        flex-shrink: 0;
    }

    #psNavToggle {
        width: 2.45rem !important;
        height: 2.45rem !important;
        flex: 0 0 2.45rem;
    }

    #psMobilePanel {
        margin-top: 0.55rem !important;
    }

    #psMobilePanel.is-open {
        max-height: calc(100svh - 5.2rem) !important;
    }

    #psMobilePanel > div {
        max-height: calc(100svh - 5.2rem) !important;
        overflow-y: auto !important;
        border-radius: 1.25rem !important;
        padding: 0.55rem !important;
    }

    #psMobilePanel a {
        border-radius: 1rem !important;
        padding: 0.78rem 1rem !important;
        line-height: 1.25 !important;
    }

    main {
        width: 100%;
        overflow: hidden;
    }

    section {
        scroll-margin-top: 6rem;
    }

    main > section:first-child {
        padding-top: 7.4rem !important;
        padding-bottom: 3.7rem !important;
    }

    main > section:first-child h1 {
        font-size: clamp(2.25rem, 11vw, 3.05rem) !important;
        line-height: 1.05 !important;
        max-width: 100%;
    }

    main > section:first-child p {
        max-width: 100% !important;
        font-size: 0.98rem !important;
        line-height: 1.55 !important;
    }

    main > section:first-child [class*="gap-2"] {
        flex-wrap: wrap;
    }

    .blob,
    .floating,
    .floating-slow,
    .floating-fast,
    .floating-balanced {
        animation: none !important;
        transform: none !important;
    }

    .blob {
        max-width: 72vw;
        max-height: 72vw;
        opacity: 0.2;
        filter: blur(38px);
    }

    [data-reveal],
    [data-reveal="left"],
    [data-reveal="right"],
    [data-reveal="scale"] {
        transform: none !important;
        transition-duration: 0.35s !important;
    }

    .card-pop:hover,
    .btn-fx:hover {
        transform: none !important;
    }

    .rounded-bubble {
        border-radius: 1.55rem !important;
    }

    .curved-top,
    .curved-bottom {
        display: none;
    }

    #azHeroSection {
        min-height: auto !important;
        align-items: flex-end !important;
        padding-top: 7.25rem !important;
        padding-bottom: 3.5rem !important;
    }

    #azHeroSection .hero-gradient {
        -webkit-mask-image: none !important;
        mask-image: none !important;
        background: linear-gradient(180deg, rgba(25,29,20,.52) 0%, rgba(54,96,0,.88) 100%) !important;
    }

    #azHeroSection [data-reveal] {
        max-width: 100% !important;
        gap: 1.05rem !important;
    }

    #azHeroSection h1 {
        font-size: clamp(2.55rem, 15vw, 3.6rem) !important;
        line-height: 0.98 !important;
        overflow-wrap: anywhere;
    }

    #azHeroSection p {
        font-size: 1rem !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
    }

    #azHeroSection .inline-flex:first-child {
        max-width: 100%;
        white-space: normal;
        align-items: center;
        padding: 0.7rem 1rem !important;
        line-height: 1.2;
    }

    #azHeroSection .flex.flex-col,
    #azHeroSection .sm\:flex-row {
        gap: 0.75rem !important;
    }

    #azHeroSection .btn-fx,
    #psMobilePanel .btn-fx,
    #psJadwalOverlay .btn-fx,
    .ps-program-card .btn-fx {
        width: 100%;
        min-height: 48px;
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    h1,
    h2,
    h3,
    p,
    a,
    button,
    span {
        overflow-wrap: anywhere;
    }

    .whitespace-nowrap {
        white-space: normal !important;
    }

    section[class*="py-24"],
    section[class*="py-20"],
    section[class*="py-28"],
    section[class*="py-32"] {
        padding-top: 4.25rem !important;
        padding-bottom: 4.25rem !important;
    }

    .grid {
        min-width: 0;
    }

    .grid > * {
        min-width: 0;
    }

    .grid[class*="grid-cols-2"] {
        grid-template-columns: 1fr !important;
    }

    .grid[class*="grid-cols-2"] > [class*="text-center"] {
        text-align: left !important;
    }

    .grid[class*="grid-cols-2"] > [class*="text-center"] > [class*="mx-auto"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .grid[class*="grid-cols-2"] .aspect-square,
    .grid[class*="grid-cols-2"] [class*="aspect-square"] {
        aspect-ratio: 4 / 3 !important;
    }

    .grid[class*="grid-cols-2"] .card-pop,
    .grid[class*="grid-cols-2"] > div {
        width: 100%;
    }

    .ps-program-card,
    .az-pillar,
    .ps-faq-item,
    .facility-placeholder,
    .ps-facility-photo,
    .ps-profile-building-photo,
    footer .rounded-2xl,
    section .shadow-2xl {
        max-width: 100%;
    }

    .ps-facility-photo {
        aspect-ratio: 4 / 3 !important;
        min-height: 0 !important;
        border-radius: 26px !important;
    }

    .ps-facility-photo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .ps-profile-building-photo {
        min-height: 260px !important;
        aspect-ratio: 4 / 3;
        border-radius: 28px !important;
    }

    .ps-program-card,
    .az-pillar {
        padding: 1.35rem !important;
    }

    .az-check {
        align-items: flex-start;
        gap: 0.6rem;
    }

    .az-check-badge {
        margin-top: 0.1rem;
    }

    #ekskulSlides .relative[class*="aspect-"] {
        aspect-ratio: 3 / 4 !important;
        min-height: 430px;
    }

    #ekskulSlides .absolute.inset-x-0.bottom-0 {
        padding: 1.2rem !important;
    }

    #ekskulSlides h3 {
        font-size: clamp(1.8rem, 9vw, 2.45rem) !important;
        line-height: 1.05 !important;
    }

    #ekskulSlides p {
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
    }

    #ekskulDots {
        display: flex !important;
        gap: 0.55rem !important;
        overflow-x: auto;
        padding: 0.3rem 0.2rem 0.55rem;
        scroll-snap-type: x mandatory;
    }

    #ekskulDots.grid[class*="grid-cols-5"] {
        grid-template-columns: none !important;
    }

    #ekskulDots .ekskul-dot {
        flex: 0 0 4.4rem;
        border-radius: 1rem !important;
        scroll-snap-align: start;
    }

    #psJadwalOverlay {
        align-items: flex-start !important;
        padding: 5.2rem 0.75rem 1rem !important;
    }

    #psJadwalOverlay > .relative {
        max-height: calc(100svh - 6.2rem) !important;
        border-radius: 1.35rem !important;
    }

    #psJadwalOverlay .sticky {
        border-radius: 1.35rem 1.35rem 0 0 !important;
        padding: 1.2rem 1.15rem !important;
    }

    #psJadwalOverlay .px-6 {
        padding-left: 1.15rem !important;
        padding-right: 1.15rem !important;
    }

    .ps-faq-toggle {
        align-items: flex-start !important;
        padding: 1.05rem 1.1rem !important;
    }

    .ps-faq-toggle > span:first-child {
        font-size: 1rem !important;
        line-height: 1.35 !important;
    }

    .ps-faq-answer p {
        padding-left: 1.1rem !important;
        padding-right: 1.1rem !important;
        font-size: 0.92rem;
    }

    section .flex.items-center.gap-5,
    section .flex.items-center.gap-6 {
        align-items: flex-start !important;
    }

    section .flex.items-center.gap-5 > div:last-child,
    section .flex.items-center.gap-6 > div:last-child {
        min-width: 0;
    }

    section .flex.items-center.gap-5 h3,
    section .flex.items-center.gap-5 h4,
    section .flex.items-center.gap-6 h3,
    section .flex.items-center.gap-6 h4 {
        line-height: 1.2 !important;
    }

    #cta .relative[data-reveal],
    section[id="cta"] .relative[data-reveal] {
        overflow: hidden;
        border-radius: 1.65rem;
    }

    #cta .grid,
    section[id="cta"] .grid {
        display: block !important;
    }

    #cta .relative.z-10 > div:first-child,
    section[id="cta"] .relative.z-10 > div:first-child {
        padding: 2rem 1.35rem 8.6rem !important;
    }

    #cta .ps-cta-button,
    section[id="cta"] .ps-cta-button {
        width: fit-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 0.85rem 1.25rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        border-radius: 9999px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        box-shadow: 0 14px 28px rgba(18, 31, 0, 0.18) !important;
        position: relative !important;
        overflow: visible !important;
    }

    #cta .ps-cta-button::before,
    #cta .ps-cta-button::after,
    section[id="cta"] .ps-cta-button::before,
    section[id="cta"] .ps-cta-button::after {
        content: none !important;
        display: none !important;
    }

    #cta .ps-cta-button .material-symbols-outlined,
    section[id="cta"] .ps-cta-button .material-symbols-outlined {
        flex: 0 0 auto;
    }

    #cta img.absolute,
    section[id="cta"] img.absolute {
        height: 9.5rem !important;
        right: 0.65rem !important;
        bottom: 0 !important;
        opacity: 0.92;
    }

    #cta .absolute.z-10.bottom-3,
    section[id="cta"] .absolute.z-10.bottom-3 {
        width: 8rem !important;
        right: 0.8rem !important;
        bottom: 0.25rem !important;
    }

    footer {
        padding-bottom: 5.75rem !important;
    }

    section[class*="-mt-14"],
    section[class*="-mt-20"] {
        margin-top: 0 !important;
    }
}

@media (max-width: 380px) {
    #psNavbarInner img {
        max-width: 47vw;
        max-height: 34px;
    }

    #psNavToggle {
        width: 2.25rem !important;
        height: 2.25rem !important;
        flex-basis: 2.25rem;
    }

    #azHeroSection h1 {
        font-size: clamp(2.25rem, 14vw, 3.1rem) !important;
    }

    #ekskulSlides .relative[class*="aspect-"] {
        min-height: 455px;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    #psNavbar {
        width: calc(100% - 2rem) !important;
    }

    #psMobilePanel.is-open {
        max-height: calc(100svh - 6rem) !important;
    }

    #azHeroSection {
        min-height: auto !important;
        padding-top: 8.5rem !important;
        padding-bottom: 5rem !important;
    }

    #cta img.absolute,
    section[id="cta"] img.absolute {
        height: 18rem !important;
    }
}