/* =========================
   MOVED FROM style.css
========================= */
@media (max-width: 1024px) {
  .mobile-divider {
    display: block;
    padding: 5vh 0;
    background-color: #000000;
  }
  .mobile-divider::after {
    content: '';
    display: block;
    height: 2px;
    background: rgb(71, 71, 71); /* match desktop .section.bottom border-bottom */
  }
  /* Top↔bottom section divider: drop the space above the 2px line so the
     line sits flush against the top section. */
  .mobile-divider:not(.mobile-divider--footer) {
    padding-top: 0;
  }
  .mobile-divider:not(.mobile-divider--footer)::after {
    background: rgb(98 98 98 / 50%);
  }
  .mobile-divider--footer {
    padding: 0;
  }
}

@media (min-width: 1025px) {
  .mobile-divider {
    display: none;
  }
  .section.top {
    border-bottom: 2px solid rgb(50, 50, 50);
  }
  .section.bottom {
    border-bottom: 2px solid rgb(71, 71, 71);
  }
  .center-group {
    position: relative;
    top: 1.5%;
    gap: 0.4rem;
  }
}

@media (min-width: 600px) {
  #popup .popup-tab-section {
    display: block;
    margin-top: 0;
    gap: 0;
    flex: none;
    overflow: visible;
  }
  /* left/right inset chosen to align tab bar outer edges with the .activity
     card outer edges inside #panel-earn (tab-panels 60 + tab-content border 2
     + tab-content padding 40 + embed-wrapper2 slot 2 = 104 from popup outer). */
  #popup .popup-footer {
    position: absolute;
    top: 284px;
    left: 104px;
    right: 104px;
    width: auto;
    transform: none;
    z-index: 1;
    transition: top 1s cubic-bezier(0.45, 0, 0.55, 1), opacity 2s ease;
  }
  /* Tab bar slides down 15px below the shrunken wrapper (60 popup pad + 135 wrapper + 15) */
  #popup.signed-up .popup-footer {
    top: 210px;
  }
  #popup .tab-panels {
    position: absolute;
    top: 364px;
    left: 60px;
    right: 60px;
    bottom: 0;
    width: auto;
    z-index: 0;
    transition: top 1s cubic-bezier(0.45, 0, 0.55, 1);
  }
  /* Panels follow tab bar with 15px gap (210 + 56 footer + 15) */
  #popup.signed-up .tab-panels {
    top: 281px;
  }
}

/* COUNTDOWN — single line on every breakpoint. */

/* Mobile-bg-video + poster elements are leftover from the old phone video
   fallback. Phones now use the scroll-driven canvas like tablets/desktop. */
.mobile-bg-video,
.mobile-video-poster {
  display: none !important;
}

/* ── Responsive h1/h2 visibility ── */
/* Default: desktop + landscape tablet */
#h1-wide { display: block; }
#h2-normal { display: block; }
#h1-normal, #h2-wide,
#h1-narrow, #h2-narrow { display: none; }

/* Tablet portrait: wide h1, normal h2 */
@media (min-width: 600px) and (max-width: 1366px) and (orientation: portrait) {
  #h1-normal, #h2-wide,
  #h1-narrow, #h2-narrow { display: none; }
  #h1-wide { display: block; }
  #h2-normal { display: block; }
}

/* Mobile: normal for h1, narrow for h2 */
@media (max-width: 599px) {
  #h1-wide, #h2-wide,
  #h1-narrow { display: none; }
  #h1-normal { display: block; }
  #h2-normal { display: none; }
  #h2-narrow { display: block; }
}

/* =================================================
   SMALL SCREEN + IPAD LANDSCAPE
================================================= */

@media screen and (max-height: 800px) and (min-width: 600px),
       screen and (min-width: 600px) and (max-width: 1366px) and (orientation: portrait) {

  /* CHANGED: removed .popup width override + .popup-tab-section gap/margin overrides —
     popup now uses the default 770px desktop layout on small desktop / portrait tablet too. */

  .center-group {
    gap: 0.5rem !important;
    margin-top: 40px !important;
  }

  .socials {
    margin-bottom: 10px !important;
  }

  /* ── TABLET SCALING ──
     Use vmin (smaller of viewport width/height) so portrait keeps the
     calibrated gutter widths (~15%/20%/30%) while landscape doesn't blow
     up — the absolute element size stays the same between orientations
     on the same device.
       title    → ~70vw in portrait (15% gutters)
       countdown→ ~60vw in portrait incl. border box (20% gutters)
       button   → ~40vw in portrait (30% gutters)
  */
  /* Title — vmin keeps portrait sized for 15% gutters; the 8vh cap kicks in
     on landscape (where vh is the smaller dimension), giving a ~15% bump
     over the prior 7vh cap. */
  .content-top h1 {
    font-size: min(9vmin, 8vh) !important;
    line-height: 1.1 !important;
  }

  /* Countdown — 10% smaller than the previous calibration in both
     orientations. Portrait uses 9.45vmin, landscape capped at 8vh. */
  .countdown {
    font-size: min(9.45vmin, 8vh) !important;
  }

  /* Hide "Pre-launch" on landscape tablet too — same as portrait tablet
     (which inherits the hide from the ≤849px popup-mobile block). */
  .notify-prelabel {
    display: none !important;
  }
}

/* Tablet LANDSCAPE only — tighter vertical spacing around the countdown
   (gap, label margin-bottom, button margin-top all trimmed ~1/3).
   min-height: 600 excludes phones in landscape. */
@media (orientation: landscape) and (min-width: 600px)
       and (max-width: 1366px) and (min-height: 600px) {
  .center-group {
    gap: 0.33rem !important;
  }
  .countdown-label {
    margin-bottom: 7px !important;
  }
  #notify-btn {
    margin-top: 13px !important;
  }

  /* Zoom in the hero video by 25%, anchored to center.
     Section heights stay the same (.section uses 100vh + overflow:hidden) so
     the scaled content just crops 12.5% more on each edge. The ::before
     pseudos hold the gradient backgrounds that sit behind/around the video —
     scaling them in lockstep keeps the preloader / fallback bg aligned with
     the cropped video frame.
     NOTE: #sequence removed from this rule — the bottom canvas is now
     progressively scaled by JS (scrollBackground.js) so it grows from 1 → 1.25
     and drops 3% lower as the user scrolls. */
  .bg-video,
  .section.top::before,
  #video-loader::before {
    transform: scale(1.25);
    transform-origin: center center;
  }

  /* Tablet landscape: 5vh space above the popup (matches desktop). */
  .popup {
    top: 5vh !important;
  }
  .mobile-close-btn {
    /* Unified: centered in the bottom-pinned .why-bar (no vertical nudge). */
    transform: translate(-50%, -50%) !important;
  }
  .nsu-title {
    transform: translateY(-25px);
  }
  /* Tablet landscape only: footer background 15% darker
     (#232323 × 0.85 ≈ #1e1e1e). */
  .section.footer {
    background-color: #1e1e1e;
  }
  /* Tablet landscape only: footer dividing line 25% dimmer
     (rgb(71,71,71) × 0.75 ≈ rgb(53,53,53)). Covers both the
     .section.bottom border-bottom AND the .mobile-divider line. */
  .section.bottom {
    border-bottom-color: rgb(53, 53, 53);
  }
  .mobile-divider::after {
    background: rgb(53, 53, 53);
  }
}

/* Touch devices (phones + tablets) */
/* Phone-only: touch devices ≤599px get the grey, arrow-less scrollbar.
   The (max-width: 599px) guard keeps tablets (600px+) on the desktop
   green-with-arrows scrollbar — without it, every touch device (incl. iPads)
   matched hover:none + pointer:coarse and lost the arrows. */
@media screen and (hover: none) and (pointer: coarse) and (max-width: 599px) {
  .custom-scrollbar .arrow-top,
  .custom-scrollbar .arrow-bottom {
    display: none;
  }
  .custom-thumb::before {
    background: #808080 !important; /* CHANGED: 50% grey, matches tablet */
  }
}


/* =========================
   TABLET ONLY (600–1024px): hide the scrollbar's top/bottom arrows but keep the
   green bar + green end-cap squares. Desktop (≥1025px) keeps the arrows; phones
   (≤599px) are unchanged (grey, already arrow-less).
========================= */
@media (min-width: 600px) and (max-width: 1024px) {
  .custom-thumb .arrow-top,
  .custom-thumb .arrow-bottom {
    display: none !important;
  }
  /* CHANGED: 50% grey bar + end-cap squares instead of green (phones match this). */
  .custom-thumb::before {
    background: #808080 !important;
  }
  .scrollbar-track::before,
  .scrollbar-track::after {
    background: #808080 !important;
  }
}


/* =========================
   SHARED SMALL-SCREEN — max-width: 849px
   (non-popup rules that apply to phones AND tablet portrait)
========================= */
@media (max-width: 849px) {

  /* ── Prevent horizontal overflow always ── */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* While the popup is open, lock body scroll so iOS Safari can't
     auto-scroll-into-view when an input is focused. With ScrollSmoother
     killed (by main-scripts.js delayed kill) body becomes the native
     scroll container, and iOS would otherwise scroll it on email-input
     focus to "center" the input — even though nothing is covering it. */
  body.popup-open {
    overflow: hidden;
    overscroll-behavior: none; /* extra guard against the page behind absorbing the swipe */
  }

  /* ── BUTTON: hide "Pre-launch" on mobile + tablet so the label is just
        "Founders Edition Giveaway" on a single line. ── */
  .notify-prelabel {
    display: none !important;
  }

  /* ── H1 & H2 ── */
  .content-top h1 {
    font-size: 6.2vh;
    font-weight: 700;
    line-height: 6vh;
    margin-bottom: 2.5rem;
  }

  .content-top h2 {
    font-size: 4.7vh;
    line-height: 6vh;
    transform: translateY(-3vh);
  }

  /* ── SOCIALS ── */
  .socials {
    margin-bottom: 5px;
  }

  /* ── FOOTER centered on mobile ── */
  .footer-links {
    text-align: center;
    padding: 0 5%;
    font-size: 0.80rem;
  }

  .footer-links p {
    text-align: center;
  }

  /* ── WHY CONTENT ── */
  .why-content {
    padding-right: 0 !important;
    margin-left: 15px;
    margin-right: 15px;
    letter-spacing: 0.04rem;
    color: #888888;
    line-height: 1.45;
  }

  .why-content p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── Overlay ── */
  .overlay.active {
    pointer-events: none;
    background: rgba(0, 0, 0, 0.35) !important;
  }

}

/* =========================
   POPUP MOBILE LAYOUT — max-width: 599px (phones only)
   (full-screen slide-up popup; tablet portrait uses desktop layout)
========================= */
@media (max-width: 599px) {

  /* Keep the scroll-track end-cap squares on phones, but grey (matching the
     grey thumb) instead of green — same top/bottom markers as desktop/tablet. */
  .scrollbar-track::before,
  .scrollbar-track::after {
    background: #808080; /* CHANGED: 50% grey, matches tablet */
  }

  /* ── POPUP: fill the viewport — no top gap on mobile ── */
  .popup {
    width: 100%;
    max-width: 100%;
    height: 100svh;
    max-height: 100svh;
    top: 0 !important;       /* Changed from auto */
    bottom: auto !important; /* Changed from 0 */
    left: 0;
    transform: translateY(10vh);
    opacity: 0;
    border: 0px solid #2a2a2a !important;
    border-bottom: none !important;
    border-radius: 40px 40px 0 0 !important;
    background: #000000 !important;
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  @keyframes mobilePopupIn {
    from {
      opacity: 1;
      transform: translateY(10vh);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .popup.active {
    opacity: 1 !important;
    animation: mobilePopupIn 0.7s cubic-bezier(.25,.63,.29,.99) forwards !important;
  }

  /* ── EMBED WRAPPER (signup iframe) ── */
  .embed-wrapper {
    background: #101010;
    padding: 30px;
    flex-shrink: 0;
    height: 260px;
  }
  /* After signup: drop vertical padding so the smaller score panel breathes */
  #popup.signed-up .embed-wrapper {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 0px;
    padding-right: 0px;
  }

  /* ── TAB SECTION: fills remaining space, no top margin ── */
  .popup-tab-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    margin-top: 0 !important;
    overflow: hidden;
  }

  /* ── TAB BAR: 20px inset on each side so its outer edges align with
        the earn cards (which sit inside panel-earn's 20px padding). ── */
  .popup-footer {
    position: absolute;
    top: 135px;
    left: 20px;
    right: 20px;
    width: calc(100% - 40px);
    transform: none;
    z-index: 1;
    padding: 6px !important;
    transition: top 1s cubic-bezier(0.45, 0, 0.55, 1), opacity 2s ease;
  }
  /* After signup: tab bar moves 15px below shrunken wrapper (135 + 15) */
  #popup.signed-up .popup-footer {
    top: 150px;
  }

  /* Tab: same fixed-40px height as desktop, narrower horizontal padding on mobile */
  .tab {
    padding: 0 9px !important;
    line-height: 1 !important;
    color: #4e804f !important;
    font-weight: 700 !important;
  }

  .tab-overlay {
    padding: 0 9px !important;
    line-height: 1 !important;
  }

  /* Lock tab shrinks back to a square on phone so the two text tabs keep enough room. */
  .tab.tab--icon,
  .tab-overlay.tab-overlay--icon {
    flex: 0 0 55px !important;
    padding: 0 !important;
  }

  /* ── TAB PANELS: non-scrolling container, gradients anchor here.
        border-radius matches the panels inside so the rectangular gradient
        siblings get clipped to the same rounded shape and don't poke out
        past the corner curve. ── */
  .tab-panels {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative; /* gradient divs position against this */
    overflow: hidden;
    border-radius: 40px 40px 0 0;
    /* Pre-signup: 20px gap so the embed-wrapper bottom border doesn't touch
       the tab-panels top border. */
    margin-top: 20px;
    transition: margin-top 1s cubic-bezier(0.45, 0, 0.55, 1);
  }
  /* After signup: push panels below tab bar (56 footer + 15 top gap + 15 bottom gap = 86) */
  #popup.signed-up .tab-panels {
    margin-top: 86px;
  }

  /* ── SIGNUP STAGE: merge the top (signup) panel and the bottom panel into one
        continuous box so the bottom panel has more room for its pitch text.
        Top panel drops its bottom edge, bottom panel drops its top edge, the
        gap between them is removed, and both fade gradients are hidden. ── */
  #popup:not(.signed-up) .embed-wrapper {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  #popup:not(.signed-up) .tab-panels {
    margin-top: 0;
    border-radius: 0;
  }
  #popup:not(.signed-up) #panel-earn,
  #popup:not(.signed-up) #panel-discount,
  #popup:not(.signed-up) #panel-leaderboard,
  #popup:not(.signed-up) #post-signup-view {
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  #popup:not(.signed-up) .mobile-gradient-top {
    display: none !important;
  }

  /* Phone-only line break (pushes the email onto its own line in the
     "confirmation email sent to …" message). */
  .psu-mobile-br { display: inline; }

  /* Signup-stage text views (check-email / welcome-back) centred in the merged
     bottom panel. Symmetric top/bottom padding overrides the close-button offset
     so the block sits in the vertical middle; the why-bar is fixed at the very
     bottom so the padding keeps the block clear of it. */
  #popup:not(.signed-up) .psu-view {
    padding-top: 0 !important;
    padding-bottom: 68px !important; /* reserve the close-button height so the block
       centres in the VISIBLE area (above the why-bar), matching the pitch (.nsu-title) */
    justify-content: center;
    transform: translateY(-2vh); /* nudge the text block up, matching the pitch view */
  }
  /* (welcome-back + check-email title-margin fixes moved to style.css so they
     apply on every breakpoint, not just phones.) */

  /* ── TOP gradient: anchored to top of .tab-panels, never moves.
        Inset 2px on the sides so it sits INSIDE the panel's 2px border
        and doesn't bleed over it. Radius is 38px (panel outer 40 − 2px
        border) so the gradient's curve matches the panel's inner curve. ── */
  .mobile-gradient-top {
    display: block !important;
    position: absolute;
    top: 0;
    left: 2px;
    right: 2px;
    height: 45px;
    margin-top: 2px;
    background: url('../Images/gradee.png') no-repeat;
    background-size: 100% 100%;
    transform: scaleY(-1); /* png is solid-bottom; flip for the top edge */
    border-radius: 0 0 38px 38px; /* defined bottom so it lands top-rounded after the flip */
    pointer-events: none;
    z-index: 20;
  }

  /* Bottom gradient is now drawn as a ::before pseudo on the fixed .why-bar
     (see rule further down) so it reliably sits right above the bar
     regardless of any structural quirks. Hide the legacy div. */
  .mobile-gradient-bottom {
    display: none !important;
  }

  /* ── TAB CONTENT: the only thing that scrolls.
        bottom padding clears the fixed .why-bar ── */
  .tab-content {
    border: none !important;
    border-radius: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 65px !important; /* 50px + 15px to track the bottom fade (.why-bar::before)
                                        being nudged up 15px — keeps content within the fade */
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain; /* stop scroll from chaining to the page behind the popup */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    display: none;
    flex-direction: column;
  }

  .tab-content.active {
    display: flex;
  }

  /* All three popup panels (earn / gift / leaderboard) mirror the embed-wrapper
     above the tab bar — rounded top corners, square bottom corners, 2px
     border on all sides so the outline extends straight to the bottom. */
  #panel-earn,
  #panel-discount,
  #panel-leaderboard,
  #panel-intro {
    border: 2px solid #1f1f1f !important;
    border-radius: 40px 40px 0 0 !important;
    overflow: hidden;
    background: #101010 !important;
  }

  /* ── SCROLLABLE ROW: position scrollbar absolutely over right border ── */
  .custom-scrollbar .arrow-top,
  .custom-scrollbar .arrow-bottom {
    display: none !important;
  }

  .scrollable-row {
    display: block;
    width: 100%;
  }

  .custom-scrollbar {
    position: fixed !important;
    top: 215px;
    right: -14px;
    /* CHANGED: was 95px (parked the bottom square ~100px up, at the top of the
       bottom gradient — too high). 41px lands the end-cap square at the close
       button centre (close btn bottom 25.5px + 42.5/2 ≈ 46.75px; track bottom
       inset is 5px, so 41 + 5 ≈ 46), matching tablet/desktop. */
    bottom: 41px;
    width: 30px;
    margin: 0 !important;
    /* Above the fixed .why-bar (z-index 300) so the lowered square + thumb-end
       render on top of the bar's opaque backing instead of being hidden by it.
       The scrollbar is at the right edge; the close ✕ is centred, so they never
       overlap horizontally. */
    z-index: 301 !important;
  }

  /* ── EMBED WRAPPER2: full height, overflow hidden ── */
  .embed-wrapper2 {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
    flex: none;
    margin-top: 0;
  }

  /* Disable desktop pseudo-element gradients on embed-wrapper2 ── */
  .embed-wrapper2::before,
  .embed-wrapper2::after {
    display: none !important;
  }

  .embed-wrapper2 .embed-inner {
    width: 100%;
    height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto;
    overscroll-behavior: contain; /* stop scroll from chaining to the page behind the popup */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .embed-wrapper2 .embed-inner::-webkit-scrollbar {
    display: none;
  }

  /* ── IFRAMES ── */
  #earn-iframe,
  #discount-iframe,
  #leaderboard-iframe {
    width: 100%;
    height: 700px;
    display: block;
  }

  #leaderboard-iframe {
    width: calc(100% - 30px);
    margin: 0 15px;
    height: 1300px;
  }

  /* ── WHY BAR: fixed at bottom, never moves. Left/right 2px borders
        continue the panel's side borders all the way down to the screen
        bottom. Background #101010 matches the panel so the border reads
        as one continuous outline. ── */
  .why-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: #101010;
    border-left: 2px solid #1f1f1f;
    border-right: 2px solid #1f1f1f;
    display: flex !important;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    /* Collapsed to a short bar (was 20px 20px 34px): the tall #101010 backing was
       visually swallowing the bottom of the .why-bar::before fade. The close ✕ is
       absolutely positioned (bottom:25.5px) so it doesn't move; only the opaque
       backing shrinks, letting the full gradient show. */
    padding: 0 20px 0;
    margin: 0;
    /* Explicit 34px: both buttons are now absolutely positioned (out of flow),
       so the bar no longer derives its height from the ? button. Keeps the
       #101010 bottom strip the same height it was before. */
    height: 34px;
  }

  /* Bottom fade gradient — sits right above the why-bar, anchored to it
     (which is itself fixed at viewport bottom), so it always lands at
     "top of bar" regardless of how the panel structure lays out. */
  .why-bar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 62px;   /* nudged up 15px from 47px (close-btn centre ≈ 46.75px). .tab-content
                       padding-bottom is bumped +15px to match, so scrolled content still
                       tucks under the fade and never pokes out below it. */
    height: 72px;   /* double the previous 36px */
    background: url('../Images/gradee.png') no-repeat;
    background-size: 100% 100%; /* png is solid-bottom → already correct for a bottom fade */
    pointer-events: none;
    z-index: 20;
  }

  /* No bottom fade over the not-signed-up pitch text — the gradient is only
     wanted over the scrolling earn/gift/leaderboard cards. */
  #popup:not(.signed-up) .why-bar::before {
    display: none;
  }

  /* ── MOBILE CLOSE BUTTON ── 15px up; sits above the gradient (z-index
        higher than the gradient's z-index 20). */
  .mobile-close-btn {
    display: flex !important;
    position: absolute;
    left: 50%;
    /* 25% larger (34 → 42.5). Grown toward the BOTTOM: top edge stays at 68px
       (25.5 + 42.5) so it doesn't move up and the centering reserve is unchanged;
       the gap below shrinks from 34px → 25.5px. */
    bottom: 25.5px;
    top: auto;
    transform: translateX(-50%) !important;
    width: 42.5px;
    height: 42.5px;
    border-radius: 50%;
    background: transparent;
    border: 2.5px solid #4e804f;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 25;
  }

  .mobile-close-btn svg {
    width: 15px;
    height: 15px;
    stroke: #4e804f;
    stroke-width: 2.5;
    stroke-linecap: round;
  }

  /* ── WHY button: matches the 42.5px round close button and sits on the same
        vertical line. Absolutely positioned (like .mobile-close-btn) at the
        same bottom offset so it floats at the close button's height instead of
        sitting low in the short why-bar. Anchored right; the ✕ is centred, so
        they share the line without overlapping. ── */
  .why-btn {
    position: absolute;
    right: 20px;
    bottom: 25.5px;     /* same as .mobile-close-btn → identical vertical line */
    width: 42.5px;
    height: 42.5px;
    border-radius: 50%;
    border-width: 2.5px; /* match the close button's 2.5px ring */
    flex-shrink: 0;
    z-index: 25;        /* above the .why-bar::before gradient (z-index 20), like the close button */
    justify-content: center; /* centre the ? glyph in the round button */
  }

  .why-btn .why-icon {
    /* Auto size so the icon box doesn't exceed the button's content box (which
       would shove the ? off-centre). The button centres it. */
    width: auto;
    height: auto;
    font-size: 19px;   /* keep the ? proportional to the 42.5px button (was 15px in the old 34px button) */
    font-weight: 700;
  }

  .why-btn:hover .why-text,
  .why-btn:focus .why-text {
    max-width: 0 !important;
    padding-left: 0 !important;
  }

  .why-btn--active {
    width: 42.5px;
    height: 42.5px;
  }

  /* ── POST-SIGNUP WELCOME VIEW (mobile) ── */
  #post-signup-view,
  .psu-view,
  .psu-panel {
    /* bottom-pad reserves down to the close button's TOP edge (68px from the
       panel bottom) so the block centres between panel-top and close-button-top,
       not the full panel height. 15 + 68 = 83. */
    padding: 15px 48px 83px !important;
  }

  /* Match NSU intro text size (per spec — "same as the intro text"). */
  .psu-title {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
    margin-bottom: 48px !important;
  }

  /* +20px each side on top of the panel's 20px → doubled (40px) horizontal inset.
     Overrides the desktop rule's 40px. */
  .psu-intro-text {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Phone-only: psu-btn becomes full-width with text-left, arrow-right.
     Tablet (≥600px) keeps the centered pill from style.css. */
  .psu-btn {
    height: 56px; /* match #notify-btn (popup-open button) across breakpoints */
    width: 85%;
    max-width: 360px;
    justify-content: space-between;
    padding: 0 22px;
  }
  .psu-btn .psu-btn-label {
    text-align: left;
  }
  /* Welcome-back button: shrink-to-fit the label (no arrow), doubled side padding. */
  .psu-btn--wb {
    width: auto;
    max-width: none;
    padding-left: 29px;  /* 1/3 less than 44px — matches desktop/tablet */
    padding-right: 29px;
  }
  .psu-btn--wb .psu-btn-label { text-align: center; }

  /* ── EARN POINTS OVERLAY ── */
  /* Only receives pointer events when popup is open */
  #earn-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    background: #101010;
    opacity: 0;
    transition: opacity 1s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: none;
  }

  /* Enable interaction only once popup is open */
  #popup.active #earn-overlay {
    pointer-events: auto;
  }

  #earn-overlay.showing {
    opacity: 1;
  }

  #earn-overlay .overlay-msg {
    white-space: normal !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.03rem !important;
  }

  #earn-overlay.showing .overlay-msg {
    opacity: 1;
  }

  #earn-overlay.signed-up {
    display: none !important;
    pointer-events: none !important;
  }

  /* ── LOADER ── */
  .loader {
    border-radius: 0;
  }

  .embed-wrapper2 .loader {
    border-radius: 0;
  }

  /* Wrapper height shrunk so the bottom gap below the green button
     matches the (correct) 32px top gap above the google button. */
  .embed-wrapper {
    height: 429px;
  }

}

/* =========================
   MOBILE (≤599px) — title / countdown / button scale linearly with viewport
   WIDTH so the visible content fills a consistent column with constant side
   gutters: ~10% for the title and countdown, ~15% for the CTA button.

   .content-top's desktop `padding: 0 10%` is dropped here — at the mobile
   font-size the h1 text is already self-limiting and the padding is dead.
   The countdown and button are inside .center-group (no padding), their
   widths come from font-size, which we switch from vh/clamp to pure vw
   on phones so they scale linearly with the viewport.

   .countdown-label is intentionally left at its style.css fixed size.
========================= */
@media (max-width: 599px) {
  .content-top {
    padding: 0 !important;
  }


  /* Phones: close-button position is unified via the ≤849px rule
     (bottom:34px). No extra vertical nudge needed. */

  /* Zoom the hero video by 25%, matching the landscape-tablet treatment.
     The gradient backgrounds (section fallback + preloader) live in ::before
     pseudos so they can scale alongside without scaling the spinner. */
  .bg-video,
  .section.top::before,
  #video-loader::before {
    transform: scale(1.25);
    transform-origin: center center;
  }

  /* Title — vw-based; sized so the widest line ("again run out") fits the
     80vw column on one line and visually matches the countdown's width
     (same side gutters). */
  .content-top h1 {
    font-size: 12.9vw !important;
    line-height: 1.2 !important;
  }

  /* Countdown — single line, scale with viewport. */
  .countdown {
    font-size: 13.3vw !important;
  }

  /* Tighten the vertical spacing around the countdown by ~1/3.
     Originals: .center-group gap 1rem, .countdown-label mb 10px,
     #notify-btn mt 20px. */
  .center-group {
    gap: 0.67rem !important;
    margin-top: 5vh !important;
  }
  .countdown-label {
    margin-bottom: 0 !important;
  }

  /* CTA button — fixed size matches the signup button across breakpoints;
     mobile only trims the top margin. */
  #notify-btn {
    margin-top: 13px !important;
  }
}

@media (max-width: 430px) {
  .stat-number {
    font-size: 2.8rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1;
    letter-spacing: 0.04rem;
  }
}