/* Everything that can be a Tailwind utility is one, in the markup. What is left
       here is the three things Tailwind cannot express — each says why. */

    /* 1. STATE CLASSES THE SLIDER TOGGLES AT RUNTIME.
       The CDN build only generates utilities it can find in the initial HTML, so a
       class that first appears when JS adds it produces no CSS at all. Same reason
       .hero-dot stays here: the dots are created by the script, not the markup.
       The :hover twin out-ranks the pills' hover:bg-white/10 utility (the CDN's
       stylesheet loads after this one), which otherwise dims the active pill while
       the pointer is still on it — and a tapped button stays :hover on phones. */
    .hero-pill.is-active,
    .hero-pill.is-active:hover {
        background: #fff;
        border-color: #fff;
        color: #0e1a2b;
    }

    /* Story slides are brand artwork, not a headline slot, so everything the deck
       doesn't show on them comes off. Only the pills and "Start your project" stay.
       (The founder quotes are live text at every width — see the figures in the markup.) */
    #hero.is-story .hero-block h1,
    #hero.is-story .hero-block p,
    #hero.is-story .hero-explore {
        display: none;
    }

    /* Dots are hidden (the deck replaces them with the named story pills), so these
       only matter if you drop `hidden` from #hero-dots to bring them back. */
    .hero-dot { background: rgba(14, 26, 43, 0.25); }
    .hero-dot.is-active { background: #0e1a2b; }

    @media (min-width: 768px) {
        .hero-dot { background: rgba(255, 255, 255, 0.3); }
        .hero-dot.is-active { background: #f2f4f7; }
    }

    /* 2. TWO DECLARATIONS OF ONE PROPERTY, as a progressive-enhancement pair — a
       Tailwind class emits a single declaration, so it cannot express a fallback.
       When the pill row overflows on a narrow phone, plain `center` pushes the first
       pill past the left edge where it can't be scrolled back to; `safe` falls back
       to flex-start in that case. Browsers that don't know it keep plain `center`. */
    .hero-pills {
        justify-content: center;
        justify-content: safe center;
    }

    /* 3. -WEBKIT-PREFIXED MASKS. Tailwind emits no -webkit- prefix for mask-image,
       and Safari still needs it, so an arbitrary value would only cover half.
       The desktop composites bleed photo -> white left-to-right; same idea here,
       rotated. mask-image fades to transparent rather than to a fixed colour, so it
       stays correct if the page background ever changes. */
    /* Logo lanes: logos fade in/out at the top and bottom of the 6-row window
       instead of being sliced by a hard edge. From md only — below that the
       lanes are sideways rows (deck slide 12), which run edge to edge unfaded
       like the flag rows. */
    @media (min-width: 768px) {
        #partners-local-lanes {
            -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
        }
    }

    @media (max-width: 767px) {
        #story-1 > img,
        #story-2 > img {
            -webkit-mask-image: linear-gradient(to bottom, #000 48%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 48%, transparent 100%);
        }

        /* Only a peek: the cap and shoulder come in from the bottom edge rather
           than the whole bottle. Sizing and offset are utilities on the <img>. */
        .standards-bottle {
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
        }
    }