/* =========================
   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 0.5s cubic-bezier(0.45, 0, 0.55, 1);
  }
  /* 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 0.5s 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: pull popup higher (top: 5vh), push close button
     up (-30 + 5 = -25px from existing -15px mobile baseline), and shift
     the not-signed-up intro text up 15px from its centered position. */
  .popup {
    top: 5vh !important;
  }
  .mobile-close-btn {
    transform: translateX(-50%) translateY(-20px) !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) */
@media screen and (hover: none) and (pointer: coarse) {
  .custom-scrollbar .arrow-top,
  .custom-scrollbar .arrow-bottom {
    display: none;
  }
  .custom-thumb::before {
    background: rgba(255, 255, 255, 0.175) !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;
  }

  /* ── 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.5) !important;
  }

}

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

  /* ── 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 0.5s cubic-bezier(0.45, 0, 0.55, 1);
  }
  /* 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 0.5s 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;
  }

  /* ── 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: linear-gradient(to bottom, #101010 0%, transparent 100%);
    border-radius: 38px 38px 0 0;
    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: 80px !important;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -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 {
    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;
    bottom: 80px;
    width: 30px;
    margin: 0 !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;
    -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;
    padding: 20px 20px 26px;
    margin: 0;
    height: auto;
  }

  /* 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: 100%;
    height: 36px;
    background: linear-gradient(to top, #101010 0%, transparent 100%);
    pointer-events: none;
    z-index: 20;
  }

  /* ── 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%;
    transform: translateX(-50%) translateY(-15px) !important;
    width: 34px;
    height: 34px;
    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: 12px;
    height: 12px;
    stroke: #4e804f;
    stroke-width: 2.5;
    stroke-linecap: round;
  }

  /* ── WHY button: 34px ── */
  .why-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .why-btn .why-icon {
    width: 34px;
    height: 34px;
    font-size: 15px;
    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: 34px;
    height: 34px;
  }

  /* ── POST-SIGNUP WELCOME VIEW (mobile) ── */
  #post-signup-view,
  .psu-view,
  .psu-slide {
    padding: 15px 24px 0 !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: 24px !important;
  }

  /* Phone-only: psu-btn becomes full-width with text-left, arrow-right.
     Tablet (≥600px) keeps the centered pill from style.css. */
  .psu-btn {
    height: 50px;
    width: 100%;
    max-width: 360px;
    justify-content: space-between;
    padding: 0 22px;
  }
  .psu-btn .psu-btn-label {
    text-align: left;
  }

  /* ── 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 only: lift the close button 4px higher than the ≤849px baseline
     (-15px) so the gap below the button grows by 4px. */
  .mobile-close-btn {
    transform: translateX(-50%) translateY(-21px) !important;
  }

  /* 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;
  }
}