/*
 * Public home page on phones.
 *
 * The desktop layout shrinks a lot of copy to 9-13px on small screens and
 * keeps decorative space that makes the page very long. Here the text gets
 * back to a comfortable reading size, the scroll-driven "Cara kerja" scene
 * becomes a plain list, and the long cards are laid out more compactly.
 * Loaded after every other stylesheet on the home page only.
 */
@media (max-width: 640px) {
    /* ---- Shared type and spacing ---- */
    body.landing-page main > section.section-shell,
    body.landing-page .events-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    body.landing-page main .eyebrow,
    body.landing-page .scroll-feature-intro .eyebrow {
        font-size: 12.5px;
        letter-spacing: .1em;
    }

    body.landing-page main .display {
        font-size: clamp(34px, 10vw, 40px);
        line-height: 1.05;
    }

    body.landing-page main .text-link {
        min-height: 44px;
        font-size: 15px;
    }

    body.landing-page main .button {
        min-height: 52px;
        font-size: 16px;
    }

    /* ---- Hero ---- */
    body.landing-page .hero {
        padding-top: 96px;
        padding-bottom: 24px;
    }

    body.landing-page .hero-copy .eyebrow {
        font-size: 12.5px;
        line-height: 1.4;
    }

    body.landing-page .hero-lead {
        font-size: 17px;
        line-height: 1.6;
    }

    body.landing-page .hero-trust {
        font-size: 13.5px;
    }

    body.landing-page .hero-trust strong {
        font-size: 15px;
    }

    body.landing-page .hero-art {
        height: 220px;
        min-height: 0;
        margin-top: 8px;
    }

    body.landing-page .hero-art .orbit-node {
        font-size: 12px;
    }

    body.landing-page .signal-strip span {
        font-size: 13px;
    }

    /* ---- Tentang ---- */
    body.landing-page .about-section .large-copy {
        font-size: 19px;
        line-height: 1.5;
    }

    body.landing-page .about-section p {
        font-size: 16px;
        line-height: 1.65;
    }

    body.landing-page .principles-grid {
        gap: 12px;
    }

    body.landing-page .principle-card {
        min-height: 0;
        padding: 22px 20px;
    }

    body.landing-page .principle-card h3 {
        margin-top: 10px;
    }

    body.landing-page .principle-icon {
        font-size: 12.5px;
    }

    body.landing-page .principle-card p {
        font-size: 15.5px;
    }

    /* ---- Ruang kerja ---- */
    body.landing-page .product-stage p {
        font-size: 16px;
    }

    body.landing-page .product-caption strong {
        font-size: 17px;
    }

    body.landing-page .product-caption span {
        font-size: 15px;
        line-height: 1.5;
    }

    body.landing-page .product-frame-bar span {
        font-size: 12px;
    }

    /* ---- Cara kerja: a plain list instead of the scroll scene ---- */
    body.landing-page .scroll-feature {
        height: auto;
        overflow: visible;
    }

    body.landing-page .scroll-feature-sticky {
        position: relative;
        height: auto;
        min-height: 0;
        padding-top: 48px;
        padding-bottom: 48px;
        gap: 22px;
    }

    body.landing-page .scroll-feature-intro .display {
        margin: 14px 0 12px;
    }

    body.landing-page .scroll-feature-intro > p {
        font-size: 16px;
        line-height: 1.6;
    }

    body.landing-page .scroll-feature-progress,
    body.landing-page .scroll-feature-orbit {
        display: none;
    }

    body.landing-page .scroll-feature-stage {
        display: grid;
        gap: 14px;
        height: auto;
        min-height: 0;
        flex: none;
    }

    body.landing-page .scroll-story-panel {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: 76px 1fr;
        grid-template-rows: none;
        gap: 16px;
        align-items: start;
        padding: 16px;
        border-radius: 20px;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        pointer-events: auto;
    }

    body.landing-page .scroll-story-art {
        min-height: 0;
        height: 76px;
        border-radius: 16px;
    }

    body.landing-page .scroll-story-art::before,
    body.landing-page .scroll-story-art::after,
    body.landing-page .scroll-art-label,
    body.landing-page .scroll-art-chip {
        display: none;
    }

    body.landing-page .scroll-story-art > svg {
        width: 34px;
        height: 34px;
    }

    body.landing-page .scroll-story-copy {
        gap: 4px;
        padding: 0;
    }

    body.landing-page .scroll-story-kicker {
        font-size: 12.5px;
    }

    body.landing-page .scroll-story-copy h3 {
        margin: 0 0 4px;
        font-size: 19px;
        line-height: 1.2;
        letter-spacing: -.02em;
    }

    body.landing-page .scroll-story-copy p {
        font-size: 15px;
        line-height: 1.55;
    }

    /* ---- Ruang diskusi ---- */
    body.landing-page .community-section p {
        font-size: 16px;
        line-height: 1.6;
    }

    body.landing-page .forum-card .card-label {
        font-size: 12.5px;
    }

    body.landing-page .forum-card .thread strong {
        font-size: 15px;
    }

    body.landing-page .forum-card .thread b {
        font-size: 13.5px;
    }

    body.landing-page .forum-card .thread p {
        font-size: 15px;
        line-height: 1.5;
    }

    body.landing-page .forum-card .thread small {
        font-size: 13px;
    }

    body.landing-page .forum-card .card-link {
        min-height: 44px;
        font-size: 15px;
    }

    body.landing-page .community-note .mini-orbit {
        display: none;
    }

    body.landing-page .community-note p {
        font-size: 15.5px;
    }

    /* ---- Kegiatan ---- */
    /* The rail was clipped, so only the first event could be seen. Let it
       swipe sideways, with the next card peeking in. */
    body.landing-page .event-rail-wrap {
        margin-top: 32px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 18px;
        scrollbar-width: none;
    }

    body.landing-page .event-rail-wrap::-webkit-scrollbar {
        display: none;
    }

    /* Card widths come from the rail's own width, not 100vw, which some
       phones report wider than the screen and pushed a lone card past
       the right edge. */
    body.landing-page .event-rail {
        box-sizing: border-box;
        width: 100%;
        gap: 12px;
        /* public-responsive.css sets 24px !important; line the cards up
           with the 18px page gutter instead. */
        padding-left: 18px !important;
        padding-right: 18px;
    }

    body.landing-page .event-card {
        flex: 0 0 100%;
        width: auto;
        min-width: 0;
        scroll-snap-align: start;
    }

    body.landing-page .event-rail:has(.event-card + .event-card) .event-card {
        flex-basis: calc(100% - 28px);
    }

    body.landing-page .event-card .event-image strong {
        font-size: 26px;
        line-height: 1.1;
    }

    body.landing-page .event-arrow,
    body.landing-page .community-section .round-arrow {
        width: 44px;
        height: 44px;
    }

    body.landing-page .event-card .image-tag {
        font-size: 12px;
    }

    body.landing-page .event-info {
        padding-right: 0;
    }

    body.landing-page .event-date span {
        font-size: 12px;
    }

    body.landing-page .event-type,
    body.landing-page .event-meta {
        font-size: 13.5px;
    }

    body.landing-page .event-info h3 {
        font-size: 19px;
    }

    body.landing-page .event-info p {
        font-size: 15px;
        line-height: 1.5;
        display: -webkit-box;
        white-space: normal;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    /* ---- Direktori ---- */
    body.landing-page .members-heading p {
        font-size: 16px;
        line-height: 1.6;
    }

    body.landing-page .directory-preview .fake-search {
        font-size: 14px;
    }

    body.landing-page .directory-preview .filter-pills span {
        font-size: 13px;
    }

    body.landing-page .member-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    body.landing-page .member-grid.is-empty {
        grid-template-columns: 1fr;
    }

    body.landing-page .member-person {
        min-height: 0;
        padding: 16px 8px;
    }

    body.landing-page .member-person strong {
        font-size: 15px;
    }

    body.landing-page .member-person span {
        font-size: 13px;
    }

    body.landing-page .directory-bottom span {
        font-size: 13.5px;
    }

    /* ---- Kabar ---- */
    body.landing-page .news-home span {
        font-size: 13.5px;
    }

    /* ---- Kolaborasi ADI ---- */
    body.landing-page .partner-lockup {
        flex-direction: row;
        justify-content: center;
        gap: 12px;
    }

    body.landing-page .partner-logo {
        width: auto;
        height: 72px;
        padding: 10px 14px;
    }

    body.landing-page .partner-logo img {
        width: auto;
        max-height: 52px;
    }

    body.landing-page .partner-badge {
        font-size: 13.5px;
    }

    body.landing-page .partner-section p,
    body.landing-page .partner-quote span {
        font-size: 15.5px;
        line-height: 1.6;
    }

    body.landing-page .partner-quote strong {
        font-size: 16px;
    }

    body.landing-page .ecosystem-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    body.landing-page .ecosystem-item p {
        margin: 0;
    }

    body.landing-page .eco-tag,
    body.landing-page .ecosystem-outcome span {
        font-size: 14px;
    }

    /* Six opportunity cards: icon beside the text instead of above it. */
    body.landing-page .partner-pillars-grid {
        gap: 10px;
    }

    body.landing-page .pillar-card {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 14px;
        align-items: start;
        min-height: 0;
        padding: 18px 16px;
    }

    body.landing-page .pillar-card > :not(.pillar-icon) {
        grid-column: 2;
    }

    body.landing-page .pillar-card .pillar-icon {
        grid-row: 1 / span 2;
        margin: 0;
    }

    body.landing-page .pillar-card h4,
    body.landing-page .pillar-card h3 {
        margin: 0 0 4px;
        font-size: 17px;
    }

    body.landing-page .opportunities-heading {
        text-align: left;
    }

    body.landing-page .partner-impact-banner .light-eyebrow {
        font-size: 12.5px;
    }

    body.landing-page .flow-step p,
    body.landing-page .impact-bullets li {
        font-size: 15.5px;
    }

    body.landing-page .partner-cta {
        font-size: 15.5px;
    }

    /* ---- FAQ and closing ---- */
    body.landing-page .faq-section p {
        font-size: 16px;
        line-height: 1.6;
    }

    body.landing-page .join-section p {
        font-size: 16px;
    }
}