/* ============================================================
   STAGETOOLS — MOBILE OVERRIDES
   Phone-first layer that activates ≤820px.
   Loaded AFTER css/styles.css so these rules win on cascade.

   Design direction (per Jonathan):
   - Same content as desktop, kept in same order
   - Apple-style: streamlined, deliberate motion, generous spacing
   - One focused action per screen
   - Tap targets ≥44px, type ≥16px to avoid iOS zoom on inputs

   Active breakpoint:  ≤820px  (iPhone Pro Max landscape, small tablets portrait)
   Sharper phone tweaks: ≤640px

   Companion: js/mobile.js
   ============================================================ */

@media (max-width: 820px) {

    /* ---------- TYPE / RHYTHM ---------- */
    :root {
        --space-section-mobile: 3.5rem;
    }

    section {
        padding: var(--space-section-mobile) 0;
    }

    .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .section-title {
        font-size: clamp(1.75rem, 6.5vw, 2.5rem);
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    .section-subtitle {
        font-size: 1rem;
        line-height: 1.55;
        max-width: 36ch;
    }

    h3 {
        font-size: clamp(1.5rem, 5.5vw, 2rem);
        line-height: 1.15;
        letter-spacing: -0.015em;
    }

    /* ---------- NAV: solid bar + full-screen overlay ----------
       backdrop-filter REMOVED on purpose. Per the CSS spec it creates
       a containing block for position:fixed descendants, which traps
       .nav-links { position: fixed; inset: 0 } inside the small nav box
       (~56px tall) instead of letting it cover the full viewport. That
       was the root cause of the menu-open page-bleed bug. */
    .nav {
        background: #0a0a0b;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nav-inner {
        padding: 0.75rem 1.25rem;
        min-height: 56px;
    }

    .nav-logo span { font-size: 0.95rem; }
    .nav-logo img { height: 24px; }

    .nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px;          /* optical alignment to edge */
        font-size: 0;                 /* hide the ☰ glyph; we draw our own */
        background: transparent;
        border: none;
        position: relative;
        z-index: 1001;                /* above the overlay */
    }

    .nav-toggle::before,
    .nav-toggle::after,
    .nav-toggle > span {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 22px;
        height: 1.5px;
        background: var(--text-primary);
        transform-origin: center;
        transition: transform 380ms cubic-bezier(.2,.7,.2,1),
                    opacity 220ms ease,
                    top 280ms cubic-bezier(.2,.7,.2,1);
        translate: -50% 0;
    }
    .nav-toggle::before { top: calc(50% - 6px); }
    .nav-toggle::after  { top: calc(50% + 6px); }

    /* Open state — morph into an X */
    .nav-toggle[aria-expanded="true"]::before {
        top: 50%;
        transform: rotate(45deg);
    }
    .nav-toggle[aria-expanded="true"]::after {
        top: 50%;
        transform: rotate(-45deg);
    }

    /* Full-screen overlay menu.
       Hardcoded #0a0a0b + !important so nothing in styles.css's own
       (max-width: 768px) .nav-links rule (position: absolute; bg: var(--bg-surface))
       can interfere with the cascade. backdrop-filter removed — it's a
       no-op on a solid layer and was producing ghosting on iOS Safari. */
    .nav-links {
        display: flex !important;
        position: fixed !important;
        inset: 0 !important;
        flex-direction: column;
        align-items: center;
        /* Anchor items to the top so they sit just below the close X
           instead of being vertically centered in dead space. */
        justify-content: flex-start;
        gap: 0;
        padding: 5.5rem 0 2rem;
        margin: 0;
        background: #0a0a0b !important;
        background-color: #0a0a0b !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 0;
        pointer-events: none;
        transform: scale(1.04);
        transition: opacity 320ms ease,
                    transform 380ms cubic-bezier(.2,.7,.2,1);
        z-index: 1000;
        list-style: none;
    }

    .nav-links.open {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
        background: #0a0a0b !important;
        background-color: #0a0a0b !important;
    }

    .nav-links li {
        width: 100%;
        max-width: 360px;
        text-align: center;
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 380ms cubic-bezier(.2,.7,.2,1),
                    transform 380ms cubic-bezier(.2,.7,.2,1);
    }

    .nav-links.open li {
        opacity: 1;
        transform: translateY(0);
    }
    /* Stagger overlay items in */
    .nav-links.open li:nth-child(1) { transition-delay: 80ms; }
    .nav-links.open li:nth-child(2) { transition-delay: 140ms; }
    .nav-links.open li:nth-child(3) { transition-delay: 200ms; }
    .nav-links.open li:nth-child(4) { transition-delay: 260ms; }
    .nav-links.open li:nth-child(5) { transition-delay: 320ms; }

    .nav-links a {
        display: block;
        padding: 1.1rem 1.25rem;
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: -0.015em;
        color: var(--text-primary);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .nav-links li:last-child a {
        border-bottom: none;
        margin-top: 1.5rem;
        background: var(--accent);
        color: #fff;
        border-radius: 999px;
        padding: 0.95rem 1.5rem;
        font-size: 1rem;
    }

    /* Lock body scroll when overlay open (set by mobile.js) */
    body.nav-open {
        overflow: hidden;
    }

    /* ---------- HERO: replace scroll-hero with a clean static hero ---------- */
    .scroll-hero {
        height: auto !important;
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem 1.5rem 1.75rem;
        position: relative;
        overflow: hidden;
    }

    /* Hide the desktop scroll-hero animation machinery on phones */
    .scroll-hero header,
    .scroll-hero main {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        display: block;
    }
    .scroll-hero main > section { display: none !important; }
    .scroll-hero ul[aria-hidden="true"] { display: none !important; }

    /* Inject a simple static hero composed in mobile.js OR show
       the brand block + a synthesized tagline. We use what's already
       in the markup: .scroll-hero-brand contains logo + STAGETOOLS title. */
    .scroll-hero-brand {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        text-align: center;
        opacity: 0;
        transform: translateY(14px);
        animation: hero-rise 900ms cubic-bezier(.2,.7,.2,1) 120ms forwards;
    }
    .scroll-hero-logo {
        display: block;
        width: 64px !important;
        height: auto !important;
        margin: 0 auto;
    }
    .scroll-hero-brand h1.fluid {
        font-size: clamp(2.25rem, 9.5vw, 3.25rem) !important;
        letter-spacing: -0.03em;
        margin: 0 !important;
        line-height: 0.95;
        background: linear-gradient(180deg, #ffffff 0%, #b8b8c0 100%);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    /* Synthesized subline + CTA (rendered by mobile.js as .mobile-hero-extras) */
    /* Stack: STAGETOOLS h1 → verb cycler → static tagline.
       Generous vertical rhythm so descenders/ascenders don't crowd. */
    .mobile-hero-extras {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.25rem;
        margin-top: 2rem;
        opacity: 0;
        transform: translateY(14px);
        animation: hero-rise 900ms cubic-bezier(.2,.7,.2,1) 320ms forwards;
    }
    .mobile-hero-extras p {
        text-align: center;
        font-size: 0.95rem;
        line-height: 1.45;
        color: var(--text-secondary);
        max-width: 30ch;
        margin: 0;
    }
    .mobile-hero-extras .btn-primary {
        font-size: 0.95rem;
        padding: 0.75rem 1.4rem;
        min-height: 44px;
    }

    /* ---------- Animated verb cycler ----------
       Reads the desktop scroll-hero verb list and cycles through them
       vertically: each verb fades + lifts in, then up + out. The stage
       has a fixed height so the layout doesn't jump. */
    .mobile-hero-verbs {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 0.4em;
        font-size: clamp(1.3rem, 5.5vw, 1.75rem);
        font-weight: 700;
        letter-spacing: -0.015em;
        color: var(--text-primary);
        line-height: 1.1;
    }
    .mobile-hero-verbs-prefix {
        color: var(--text-secondary);
        font-weight: 500;
    }
    .mobile-hero-verbs-stage {
        position: relative;
        display: inline-block;
        min-width: 7em;
        height: 1.4em;
        overflow: hidden;
        text-align: center;
    }
    .mobile-hero-verb {
        position: absolute;
        left: 50%;
        top: 0;
        white-space: nowrap;
        opacity: 0;
        transform: translate3d(-50%, 100%, 0);
        transition:
            opacity 600ms cubic-bezier(.2,.7,.2,1),
            transform 600ms cubic-bezier(.2,.7,.2,1);
        background: linear-gradient(180deg,
            var(--accent) 0%,
            color-mix(in srgb, var(--accent) 70%, white 30%) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        will-change: opacity, transform;
    }
    .mobile-hero-verb.is-current {
        opacity: 1;
        transform: translate3d(-50%, 0, 0);
    }
    .mobile-hero-verb.is-leaving {
        opacity: 0;
        transform: translate3d(-50%, -100%, 0);
    }

    /* ---------- Ambient page backdrop ----------
       Layered gradients on <body> so the dark feels alive: a soft
       blue wash up top, a violet kicker mid-page, a warm ember low.
       Fixed attachment so it doesn't scroll with content. */
    body {
        background-color: #07070a;
        background-image:
            radial-gradient(ellipse 90% 55% at 50% -5%,
                rgba(10, 132, 255, 0.28) 0%,
                rgba(10, 132, 255, 0.08) 30%,
                transparent 60%),
            radial-gradient(ellipse 70% 40% at 85% 38%,
                rgba(120, 90, 255, 0.18) 0%,
                rgba(120, 90, 255, 0.04) 35%,
                transparent 65%),
            radial-gradient(ellipse 80% 45% at 15% 75%,
                rgba(255, 110, 90, 0.12) 0%,
                rgba(255, 110, 90, 0.03) 40%,
                transparent 70%),
            linear-gradient(180deg, #0a0a10 0%, #07070a 60%, #050507 100%);
        background-attachment: fixed;
        background-repeat: no-repeat;
    }

    /* Ambient accent glow behind hero — bigger, brighter, with a second
       cooler glow offset below for depth. */
    .scroll-hero::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 28%;
        width: 720px;
        height: 720px;
        transform: translate(-50%, -50%);
        background:
            radial-gradient(circle at 50% 50%,
                rgba(10, 132, 255, 0.38) 0%,
                rgba(10, 132, 255, 0.12) 28%,
                rgba(10, 132, 255, 0.02) 55%,
                transparent 70%);
        filter: blur(30px);
        pointer-events: none;
        z-index: 0;
    }
    /* Second glow — warm violet ember below for depth */
    .scroll-hero::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 8%;
        width: 460px;
        height: 280px;
        transform: translateX(-50%);
        background: radial-gradient(ellipse at center,
            rgba(140, 100, 255, 0.18) 0%,
            rgba(140, 100, 255, 0.04) 45%,
            transparent 75%);
        filter: blur(24px);
        pointer-events: none;
        z-index: 0;
    }
    .scroll-hero > * { position: relative; z-index: 1; }

    @keyframes hero-rise {
        to { opacity: 1; transform: translateY(0); }
    }

    /* ---------- TOOLBOX: native horizontal swipe carousel ---------- */
    .toolbox-section {
        overflow: hidden;
        position: relative;
    }
    /* Cool blue wash drifting in from the left edge */
    .toolbox-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 60% 50% at 0% 30%,
                rgba(10, 132, 255, 0.14) 0%,
                rgba(10, 132, 255, 0.03) 40%,
                transparent 70%),
            radial-gradient(ellipse 50% 40% at 100% 90%,
                rgba(120, 90, 255, 0.12) 0%,
                transparent 65%);
        pointer-events: none;
        z-index: 0;
    }
    .toolbox-section > * { position: relative; z-index: 1; }

    /* ---------- PAIN STRIP: warm ember atmosphere ---------- */
    .pain-strip {
        position: relative;
        overflow: hidden;
    }
    .pain-strip::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 70% 50% at 100% 20%,
                rgba(255, 110, 90, 0.10) 0%,
                rgba(255, 110, 90, 0.02) 45%,
                transparent 70%),
            radial-gradient(ellipse 60% 45% at 0% 100%,
                rgba(10, 132, 255, 0.10) 0%,
                transparent 65%);
        pointer-events: none;
        z-index: 0;
    }
    .pain-strip > * { position: relative; z-index: 1; }

    /* ---------- CREWS: no atmospheric box on mobile ----------
       Desktop has a violet drift bloom here, but at phone widths the
       contained ellipse reads as a darker "box" against the surrounding
       sections' warmer blooms. Strip the section background + bloom so
       this section sits on the body's flat black, blending continuously
       with the Toolbox bloom directly below it. */
    .crews-section {
        position: relative;
        background: transparent;
        overflow: visible;
    }
    .crews-section::before {
        display: none;
    }

    /* ---------- CTA BAND: bright accent finale ---------- */
    .cta-band {
        position: relative;
        overflow: hidden;
    }
    .cta-band::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 90% 60% at 50% 0%,
                rgba(10, 132, 255, 0.22) 0%,
                rgba(10, 132, 255, 0.05) 40%,
                transparent 70%);
        pointer-events: none;
        z-index: 0;
    }
    .cta-band > * { position: relative; z-index: 1; }

    .toolbox-section .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .tool-scroller {
        width: 100%;
        margin: 0;
        padding: 0.5rem 1.25rem 2rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 1.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tool-scroller::-webkit-scrollbar { display: none; }

    .toolbox-section .tool-grid {
        display: flex;
        flex-direction: row;
        grid-template-columns: none;
        gap: 1rem;
        width: max-content;
        padding-right: 2.5rem;        /* peek of the last card */
    }

    .tool-card {
        flex: 0 0 78vw;
        max-width: 320px;
        min-height: 280px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        padding: 1.5rem;
        border-radius: 20px;
    }

    /* Entry animation: cards start hidden + lifted, then pop in
       one-by-one as they're revealed (handled by IntersectionObserver
       in mobile.js, which adds .is-revealed). Mirrors the staggered
       cascade the desktop pinned-scroll version produces naturally. */
    .toolbox-section .tool-card {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
        transition:
            opacity 600ms cubic-bezier(.2,.7,.2,1),
            transform 600ms cubic-bezier(.2,.7,.2,1);
    }
    .toolbox-section .tool-card.is-revealed {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .tool-card h3 { font-size: 1.25rem; }
    .tool-card p  { font-size: 0.95rem; line-height: 1.5; }

    /* Dot indicators (rendered by mobile.js into .toolbox-section) */
    .tool-dots {
        display: flex;
        gap: 6px;
        justify-content: center;
        margin-top: 0.5rem;
        padding: 0 1.25rem;
    }
    .tool-dots .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
        transition: background 200ms ease, transform 200ms ease;
    }
    .tool-dots .dot.is-active {
        background: var(--accent);
        transform: scale(1.3);
    }

    /* ---------- PAIN POINT GRID → single column ---------- */
    .pain-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    .pain-card {
        padding: 1.25rem;
    }
    .pain-card .scenario { font-size: 1rem; }
    .pain-card .solution { font-size: 0.95rem; line-height: 1.5; }

    /* ---------- CREWS section ---------- */
    .crews-prompt { font-size: clamp(2rem, 9vw, 3rem); }
    .crews-list .crew { font-size: clamp(2rem, 9vw, 3rem); }

    /* ---------- FEATURE BLOCKS: tabbed interface (one visible, swipe between) ---------- */
    /* Wrapper added by mobile.js: <div class="feature-tabs"> wraps all three <section>s */
    .feature-tabs {
        position: relative;
    }

    .feature-tabs-bar {
        display: flex;
        gap: 6px;
        padding: 0 1.25rem;
        margin-bottom: 1.5rem;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .feature-tabs-bar::-webkit-scrollbar { display: none; }

    .feature-tabs-bar button {
        flex: 0 0 auto;
        appearance: none;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: var(--text-secondary);
        padding: 0.55rem 1rem;
        border-radius: 999px;
        font-size: 0.9rem;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        white-space: nowrap;
        transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
    }
    .feature-tabs-bar button.is-active {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

    .feature-tabs-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .feature-tabs-track::-webkit-scrollbar { display: none; }

    /* Each section becomes a snap slide */
    .feature-tabs-track > section {
        flex: 0 0 100%;
        scroll-snap-align: start;
        padding: 0 0 var(--space-section-mobile);
    }

    .feature-tabs-track .feature-block {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        padding: 0 1.25rem;
        direction: ltr !important;       /* nuke the .reverse RTL trick */
    }
    .feature-tabs-track .feature-block.reverse > * { direction: ltr; }

    /* Image first, text second — Apple-style */
    .feature-tabs-track .feature-block .feature-visual {
        order: -1;
        min-height: 0;
    }
    .feature-tabs-track .feature-block .feature-visual--image,
    .feature-tabs-track .feature-block .feature-visual--photo {
        border-radius: 20px;
    }
    .feature-tabs-track .feature-block .feature-visual--image img,
    .feature-tabs-track .feature-block .feature-visual--photo img {
        border-radius: 20px;
    }

    .feature-tabs-track .feature-block-text h3 {
        font-size: clamp(1.5rem, 6vw, 2rem);
        margin-bottom: 0.75rem;
    }
    .feature-tabs-track .feature-block-text p {
        font-size: 1rem;
        line-height: 1.55;
    }
    .feature-tabs-track .feature-list li {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Disable desktop GSAP reveals inside the tabs (mobile.js sets data-mobile-tabs)
       The original feature-reveal.js bails out below 820px — handled in mobile.js. */

    /* ---------- WHAT IT IS NOT ---------- */
    .not-list li {
        gap: 0.75rem;
    }
    .not-list .body strong { display: block; margin-bottom: 0.25rem; }

    /* ---------- PRIVACY CALLOUT ---------- */
    .privacy-callout {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
        text-align: center;
    }
    .privacy-callout .icon {
        font-size: 1.75rem;
        margin: 0 auto;
    }

    /* ---------- PROTOCOL STRIP — wrap nicely, no marquee ---------- */
    .protocol-strip {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    .protocol-tag {
        font-size: 0.8rem;
        padding: 0.45rem 0.85rem;
    }

    /* ---------- CTA BAND ---------- */
    .cta-band {
        padding: 4rem 0;
    }
    .cta-band h2 {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
        padding: 0 1.25rem;
    }
    .cta-band p {
        font-size: 1rem;
        padding: 0 1.5rem;
    }
    .cta-band .btn-primary {
        font-size: 1rem;
        padding: 0.95rem 1.75rem;
        min-height: 50px;
    }
    .cta-band::before {
        width: 480px;
        height: 480px;
    }

    /* ---------- FOOTER ---------- */
    .footer-top {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem 1.5rem;
    }
    .footer-brand {
        grid-column: 1 / -1;
        text-align: left;
    }
    .footer-brand p { max-width: none; }
    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
        font-size: 0.8rem;
    }
}

/* ============================================================
   Phone-specific tightening (≤640px)
   ============================================================ */
@media (max-width: 640px) {

    .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .tool-card {
        flex-basis: 84vw;
    }

    .feature-tabs-bar { padding: 0 1.25rem; }

    .scroll-hero-brand h1.fluid {
        font-size: clamp(2.25rem, 13vw, 3.5rem) !important;
    }

    .footer-top {
        grid-template-columns: 1fr !important;
    }
    .footer-brand { grid-column: auto; }
}

/* ============================================================
   GENERIC SCROLL REVEAL — [data-mr] attribute system
   Mobile-only. Elements get tagged by mobile.js on init; an
   IntersectionObserver flips them to .mr-in as they enter view.

   Variants:
     data-mr="up"     fade + lift   (default)
     data-mr="left"   slide from left
     data-mr="right"  slide from right
     data-mr="scale"  fade + subtle scale-in
     data-mr="word"   per-word fade (used for the crews list)

   Per-element stagger: --mr-i sets index, total delay = i * 70ms.
   ============================================================ */
@media (max-width: 820px) {
    [data-mr] {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
        transition:
            opacity 700ms cubic-bezier(.2, .7, .2, 1),
            transform 700ms cubic-bezier(.2, .7, .2, 1);
        transition-delay: calc(var(--mr-i, 0) * 70ms);
        will-change: opacity, transform;
    }
    [data-mr="left"]  { transform: translate3d(-32px, 0, 0); }
    [data-mr="right"] { transform: translate3d(32px, 0, 0); }
    [data-mr="scale"] { transform: scale(0.94); transform-origin: center; }
    [data-mr="word"]  { transform: translate3d(0, 14px, 0); }

    [data-mr].mr-in {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    /* Crews list — keep the rotating typographic feel: each crew name
       has a colored accent dot that animates in alongside the text. */
    .crews-list .crew {
        position: relative;
    }
    .crews-list .crew::before {
        content: '';
        position: absolute;
        left: -0.65em;
        top: 50%;
        width: 0.32em;
        height: 0.32em;
        border-radius: 50%;
        background: var(--accent);
        transform: translateY(-50%) scale(0);
        transition: transform 500ms cubic-bezier(.2, .7, .2, 1) 200ms;
    }
    .crews-list .crew.mr-in::before {
        transform: translateY(-50%) scale(1);
    }

    /* Pain cards — gentle press affordance on tap */
    .pain-card {
        transition:
            opacity 700ms cubic-bezier(.2, .7, .2, 1),
            transform 700ms cubic-bezier(.2, .7, .2, 1),
            border-color 200ms ease,
            background 200ms ease;
    }
    .pain-card:active {
        transform: translate3d(0, 0, 0) scale(0.98) !important;
        transition-duration: 120ms;
    }

    /* CTA band — soft pulse glow once it enters view */
    .cta-band[data-mr].mr-in::before {
        animation: cta-pulse 4.5s ease-in-out infinite;
    }
    @keyframes cta-pulse {
        0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
        50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
    }

    /* Section eyebrows / titles — subtle character-level lift */
    .eyebrow[data-mr] {
        letter-spacing: 0.18em;
    }

    /* Feature visual inside a tab — the active panel does a gentle
       scale-up the first time it's shown. mobile.js toggles .has-entered. */
    .feature-tabs-track > section .feature-visual {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(0.97);
        transition:
            opacity 700ms cubic-bezier(.2, .7, .2, 1),
            transform 700ms cubic-bezier(.2, .7, .2, 1);
    }
    .feature-tabs-track > section.has-entered .feature-visual {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    .feature-tabs-track > section .feature-block-text > * {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
        transition:
            opacity 600ms cubic-bezier(.2, .7, .2, 1),
            transform 600ms cubic-bezier(.2, .7, .2, 1);
    }
    .feature-tabs-track > section.has-entered .feature-block-text > * {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    .feature-tabs-track > section.has-entered .feature-block-text > *:nth-child(1) { transition-delay: 80ms; }
    .feature-tabs-track > section.has-entered .feature-block-text > *:nth-child(2) { transition-delay: 160ms; }
    .feature-tabs-track > section.has-entered .feature-block-text > *:nth-child(3) { transition-delay: 240ms; }
    .feature-tabs-track > section.has-entered .feature-block-text > *:nth-child(4) { transition-delay: 320ms; }
    .feature-tabs-track > section.has-entered .feature-block-text > *:nth-child(5) { transition-delay: 400ms; }
    .feature-tabs-track > section.has-entered .feature-block-text > *:nth-child(6) { transition-delay: 480ms; }

    /* Tap micro-feedback for all primary buttons */
    .btn-primary, .btn-secondary {
        transition:
            transform 180ms cubic-bezier(.2, .7, .2, 1),
            background 200ms ease,
            box-shadow 200ms ease,
            border-color 200ms ease;
    }
    .btn-primary:active,
    .btn-secondary:active {
        transform: scale(0.96);
    }
}

/* ============================================================
   Reduced motion — honor the preference
   ============================================================ */
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
    [data-mr] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .crews-list .crew::before {
        transform: translateY(-50%) scale(1) !important;
        transition: none !important;
    }
    .feature-tabs-track > section .feature-visual,
    .feature-tabs-track > section .feature-block-text > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .cta-band[data-mr].mr-in::before {
        animation: none !important;
    }
    .scroll-hero-brand,
    .mobile-hero-extras {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .toolbox-section .tool-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .nav-links,
    .nav-links li {
        transition: none !important;
    }
    /* Verb cycler: just show the first verb statically */
    .mobile-hero-verb {
        opacity: 0 !important;
        transition: none !important;
    }
    .mobile-hero-verb.is-current {
        opacity: 1 !important;
        transform: none !important;
    }
}