/* =========================
   FONT FACE — Satoshi
========================= */

@font-face {
  font-family: 'Satoshi';
  src: url('../Fonts/satoshi/Satoshi-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../Fonts/satoshi/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../Fonts/satoshi/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../Fonts/satoshi/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../Fonts/satoshi/Satoshi-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =========================
   RESET
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background: black;
  background-color: #000000;
  color: white;
  font-family: 'Satoshi', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* =========================
   GENERIC SECTION
========================= */
.section {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: #000000;
}



/* =========================
   TOP VIDEO
========================= */

/* Gradient as section background — prevents any black flash if loader
   and video frame are both absent for a rendering cycle. Held in a
   pseudo-element so per-breakpoint transforms can scale it to match the
   video without scaling everything else inside the section. */
.section.top {
  background-color: #1d1c1d;
}
.section.top::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../Images/radial_gradient_1.jpg') center center / cover no-repeat;
  pointer-events: none;
}

/* Loading overlay — first-frame screenshot bg + spinner, shown until video
   has painted its first real frame. Hide is instant (no transition) so the
   transition from loader bg → first video frame is seamless. The gradient
   sits in a ::before pseudo so it can scale independently of the spinner. */
#video-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  background-color: #1d1c1d;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 15%;
}
#video-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../Images/radial_gradient_1.jpg') center center / cover no-repeat;
  pointer-events: none;
}
#video-loader.hidden {
  opacity: 0;
  pointer-events: none;
}
#video-loader img {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   CONTENT OVERLAY
========================= */
.content {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

.content-top {
  height: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 10%;
  gap: 1rem;
  position: relative;
}

.content-top h1 {
  padding: 0;
}

.content-top h2 {
  padding: 0 5%;
}

.content-top h1 {
  font-size: 7vh;
  font-weight: 700;
  line-height: 7vh;
  margin-bottom: 1.5rem;
}

.content-top h2 {
  font-size: 6vh;
  font-weight: 600;
  line-height: 7.5vh;
  margin-bottom: -4px !important;
  opacity: 0;
  position: absolute;
}

/* CHANGED: asterisk after 2/3 — 40% bigger than surrounding text */
.h2-asterisk {
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.21em;
}

/* ── Responsive h1/h2 visibility — see mobile.css ── */

.days-label {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: white;
  margin-bottom: -1.5rem;
}

/* Fixed size — same on every breakpoint */
.countdown-label {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #b2b2b27a;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.countdown {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: clamp(2.4rem, 7vh, 5rem);
  font-weight: 600;
  text-align: center;
  letter-spacing: -0.013em;
  line-height: 1;
}

.countdown .cd-digits { font-variant-numeric: tabular-nums; }
.countdown .cd-colon {
  display: inline-block;
  transform: translateY(-5%);
}
.countdown .cd-pair { display: inline; }

/* CHANGED: lifts countdown colons 15% above baseline */
.colon-lift {
  display: inline-block;
  position: relative;
  bottom: 0.08em;
}

.launch {
  font-size: 1.5rem;
  font-weight: 900;
  color: rgb(255, 255, 255);
  letter-spacing: 0.1rem;
  text-align: center;
  margin-bottom: 4rem;
  margin-top: -1rem;
}

.content-bottom {
  height: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.center-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.bottom-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.section.footer {
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vh, 4rem) 0;
  padding-bottom: calc(clamp(2rem, 5vh, 4rem) + env(safe-area-inset-bottom));
  background-color: #232323;
}


/* =========================
   SVG BUTTON
========================= */
.notify-prelaunch-label {
  display: none;
}

/*
  Fixed-size button — same dimensions and typography as the signup-form
  .btn-submit so the two read as the same family across every breakpoint.
  Background is 50% transparent black; green border + green text by default,
  fills solid green with white text on hover. The FE badge sits with equal
  spacing on its top, bottom, and left.
*/
#notify-btn {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #4e804f;
  color: #4e804f;
  box-sizing: border-box;
  cursor: pointer;
  margin-top: 20px !important;

  font-family: 'Satoshi', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  height: 56px;
  padding: 0 16px 0 10px;
  gap: 12px;
  border-radius: 20px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#notify-btn:hover {
  background: #4e804f;
  color: #ffffff;
}

.notify-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #4e804f;
  border-radius: 10px;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#notify-btn:hover .notify-badge {
  background: #ffffff;
  color: #4e804f;
}

.notify-label {
  font-family: 'Satoshi', sans-serif;
  font-size: 12px;
  font-weight: 900;
  color: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-left: 0;
  white-space: nowrap;
  line-height: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.28em;
  /* Satoshi uppercase optical-centre fix: lift just the text label,
     the FE badge (separate flex child) stays perfectly centered. */
  transform: translateY(-1px);
}

.notify-prelabel,
.notify-mainlabel {
  color: inherit;
}

/* =========================
   SOCIALS
========================= */
.socials {
  display: flex;
  gap: 1.4rem;
  margin-bottom: 20px;
}

.socials img {
  width: 22px;
  height: 22px;
  opacity: 0.38;
  filter: brightness(0) invert(1);
  transition: none;
}

.socials a:hover img {
  opacity: 1;
  transition: none;
}

/* =========================
   FOOTER LINKS
========================= */
.footer-links {
  font-size: 0.85rem;
  color: #626161;
  margin-top: -15px;
  letter-spacing: 0.03rem;
  text-align: center;
}

.footer-links a {
  color: #626161;
  text-decoration: none;
  padding: 0 0.5rem;
}

.footer-links a:hover { color: white; }

/* =========================
   SCROLL CANVAS
========================= */
.bottom {
  background: black;
  position: relative;
  z-index: 2; /* CHANGED: stay above .section.footer in stacking order so notify-btn stays clickable */
}

canvas {
  position: absolute;
  top: 5%;
  left: 0;
  right: 0;
  bottom: -5%;
  z-index: 1;
}

/* =========================
   OVERLAY
========================= */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 2s ease;
}

.overlay.active {
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

/* =========================
   POPUP — slides up from bottom, 10% top margin
========================= */
@keyframes popupIn {
  from {
    transform: translateX(-50%) translateY(10vh);
  }
  to {
    transform: translateX(-50%) translateY(0);
  }
}

.popup {
  position: fixed;
  bottom: 0;
  top: clamp(8svh, calc(44svh - 216px), 20svh);
  left: 50%;
  transform: translateX(-50%) translateY(10vh);
  z-index: 200;
  width: max(850px, 50vw);
  max-width: 100%;
  min-height: 600px;
  padding: 60px 60px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #000000;
  border: 2px solid #1a1a1a;
  border-bottom: none;
  border-radius: 80px 80px 0 0;
  box-shadow: 0 -20px 80px 10px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  opacity: 0;
}

/* When closed: block ALL children from intercepting pointer events so elements
   behind the invisible popup (e.g. notify button) remain clickable. */
.popup:not(.active) * {
  pointer-events: none !important;
}

.popup.active {
  opacity: 1;
  pointer-events: auto;
  animation: popupIn 0.7s cubic-bezier(.25,.63,.29,.99) forwards;
}

/* Used by confirm/kolid flows to open popup instantly with no animation */
.popup.no-anim.active { animation: none !important; }

/* ── Signup iframe wrapper ── */
.embed-wrapper {
  height: 284px;
  transition: height 0.5s cubic-bezier(0.45, 0, 0.55, 1),
              padding 0.5s cubic-bezier(0.45, 0, 0.55, 1);
  overflow: hidden;
  flex-shrink: 0;
  padding: 40px;
  border-radius: 40px;
  background: #101010;
  border: 2px solid #1f1f1f;
  box-sizing: border-box;
  position: relative;
  z-index: 2; /* sits ABOVE tab bar so the tab bar is hidden until signup section shrinks */
  min-height: 120px;
}

/* After signup: drop vertical padding so the smaller score panel breathes */
#popup.signed-up .embed-wrapper {
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 0px;
  padding-right: 0px;
}

.embed-wrapper > .embed-inner {
  height: 100%;
  overflow: hidden;
  pointer-events: auto;
}

.embed-wrapper > .embed-inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.embed-wrapper > .embed-inner iframe::-webkit-scrollbar { display: none; }

/* ── Tab section wrapper ──
   Tab bar and tab-panels are absolute children of .popup so they stay PUT
   when the signup .embed-wrapper changes height. The bar sits BEHIND the
   signup section (z-index: 1 vs 2) and is revealed when embed-wrapper shrinks. */
.popup-tab-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  margin-top: 24px;
  flex: 1;
  min-height: 0;
  overflow: visible;
}

/* ── Tab bar ── */
.popup-footer {
  width: 87%;
  flex-shrink: 0;
  background: #000000;
  border: 2px solid #ffffff;
  border-radius: 20px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

/* Desktop/tablet: position tab bar so its BOTTOM aligns with the
   full-height embed-wrapper bottom. embed-wrapper full = 280px, popup
   padding-top = 60px, footer height = 56px → top = 60 + 280 - 56 = 284px.
   Tab-panels content area sits 24px below the tab bar bottom = 364px.
   Both are fixed relative to popup so they don't move when embed-wrapper
   shrinks to 145px after signup. */

.tab-slider {
  position: absolute;
  top: 8px;
  bottom: 8px;
  background: #ffffff;
  border-radius: 11px;
  transition: left 0.25s ease-in-out, width 0.25s ease-in-out;
  pointer-events: none;
  z-index: 3;
}

/* Tab label variants — default: full labels visible */
.tab-label--short { display: none; }
.tab-label--full  { display: inline; }

/*
  Fixed 40px tab height (was padding-based) so children of mixed type
  (text vs icon img) keep tabs at the same height. Footer total:
    border(2)*2 + padding(6)*2 + 40 = 56px.
  Slider gap: top/bottom 8px from inner border — same as button badge gap.
*/
.tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  line-height: 1;
  border-radius: 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4e804f;
  white-space: nowrap;
  text-align: center;
  position: relative;
  z-index: 2;
  transition: color 0s;
}

.tab:hover { color: #ffffff; font-weight: 700; letter-spacing: 0.08em; }

.tabs-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  padding: 6px;
  gap: 4px;
  pointer-events: none;
  z-index: 4;
}

.tab-overlay {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  line-height: 1;
  border-radius: 14px;
  border: none;
  background: transparent;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000000;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

/* Icon-tab: 106px wide so the active slider (106 - 6 JS offset = 100) is a
   100x40 rectangle (2.5:1) — wider than tall, leaving room for the two text
   tabs to expand via flex: 1. */
.tab.tab--icon,
.tab-overlay.tab-overlay--icon {
  flex: 0 0 106px;
  padding: 0;
}

.tab .tab-icon,
.tab-overlay .tab-icon {
  height: 22px;
  width: auto;
  display: block;
}

/* ── Tab content panels ── */
.tab-panels {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tab-content {
  display: none;
  flex: 1;
  min-height: 0;
  padding: 40px 40px 0;
  color: #fff;
  text-align: left;
  font-size: 16px;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  border-radius: 40px 40px 0 0;
  background: #101010;
  border: 2px solid #1f1f1f;
  border-bottom: none;
  box-sizing: border-box;
  line-height: 1.4;
  overflow: visible;
  padding-top: 5px;
}

.tab-text {
    display: none !important;
}

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


#panel-discount,
#panel-leaderboard,
#panel-earn {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#panel-discount::-webkit-scrollbar,
#panel-leaderboard::-webkit-scrollbar,
#panel-earn::-webkit-scrollbar {
  display: none;
}

/* ── embed-wrapper2 ── */
.embed-wrapper2 {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  margin-top: 12px;
}

/* Gradient fade overlays top and bottom */
.embed-wrapper2::before,
.embed-wrapper2::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  z-index: 5;
  pointer-events: none;
}

.embed-wrapper2::before {
  top: 0;
  background: linear-gradient(to bottom, #101010, transparent);
}

.embed-wrapper2::after {
  bottom: 0;
  background: linear-gradient(to top, #101010, transparent);
}

.embed-wrapper2 .embed-inner {
  width: 100%;
  height: 100%;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  border: 1px solid #101010;
}

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

.embed-wrapper2 .embed-inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

/* ── Spinner ── */
.loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: #101010;
  border-radius: 40px;
  z-index: 10;
}

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

.ispinner {
  position: relative;
  width: 20px;
  height: 20px;
}

.ispinner .ispinner-blade {
  position: absolute;
  left: 44.5%;
  top: 37%;
  width: 10%;
  height: 25%;
  border-radius: 50%/20%;
  -webkit-animation: ispinner-fade 1s linear infinite;
  animation: ispinner-fade 1s linear infinite;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.ispinner .ispinner-blade:nth-child(1)  { -webkit-animation-delay: -1.66667s; animation-delay: -1.66667s; -webkit-transform: rotate(30deg)  translate(0,-150%); transform: rotate(30deg)  translate(0,-150%); }
.ispinner .ispinner-blade:nth-child(2)  { -webkit-animation-delay: -1.58333s; animation-delay: -1.58333s; -webkit-transform: rotate(60deg)  translate(0,-150%); transform: rotate(60deg)  translate(0,-150%); }
.ispinner .ispinner-blade:nth-child(3)  { -webkit-animation-delay: -1.5s;     animation-delay: -1.5s;     -webkit-transform: rotate(90deg)  translate(0,-150%); transform: rotate(90deg)  translate(0,-150%); }
.ispinner .ispinner-blade:nth-child(4)  { -webkit-animation-delay: -1.41667s; animation-delay: -1.41667s; -webkit-transform: rotate(120deg) translate(0,-150%); transform: rotate(120deg) translate(0,-150%); }
.ispinner .ispinner-blade:nth-child(5)  { -webkit-animation-delay: -1.33333s; animation-delay: -1.33333s; -webkit-transform: rotate(150deg) translate(0,-150%); transform: rotate(150deg) translate(0,-150%); }
.ispinner .ispinner-blade:nth-child(6)  { -webkit-animation-delay: -1.25s;    animation-delay: -1.25s;    -webkit-transform: rotate(180deg) translate(0,-150%); transform: rotate(180deg) translate(0,-150%); }
.ispinner .ispinner-blade:nth-child(7)  { -webkit-animation-delay: -1.16667s; animation-delay: -1.16667s; -webkit-transform: rotate(210deg) translate(0,-150%); transform: rotate(210deg) translate(0,-150%); }
.ispinner .ispinner-blade:nth-child(8)  { -webkit-animation-delay: -1.08333s; animation-delay: -1.08333s; -webkit-transform: rotate(240deg) translate(0,-150%); transform: rotate(240deg) translate(0,-150%); }
.ispinner .ispinner-blade:nth-child(9)  { -webkit-animation-delay: -1s;       animation-delay: -1s;       -webkit-transform: rotate(270deg) translate(0,-150%); transform: rotate(270deg) translate(0,-150%); }
.ispinner .ispinner-blade:nth-child(10) { -webkit-animation-delay: -0.91667s; animation-delay: -0.91667s; -webkit-transform: rotate(300deg) translate(0,-150%); transform: rotate(300deg) translate(0,-150%); }
.ispinner .ispinner-blade:nth-child(11) { -webkit-animation-delay: -0.83333s; animation-delay: -0.83333s; -webkit-transform: rotate(330deg) translate(0,-150%); transform: rotate(330deg) translate(0,-150%); }
.ispinner .ispinner-blade:nth-child(12) { -webkit-animation-delay: -0.75s;    animation-delay: -0.75s;    -webkit-transform: rotate(360deg) translate(0,-150%); transform: rotate(360deg) translate(0,-150%); }

.ispinner.animating .ispinner-blade {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

.ispinner.white .ispinner-blade { background-color: white; }
.ispinner.gray  .ispinner-blade { background-color: #8C8C8C; }

.ispinner.large { width: 35px; height: 35px; }

.ispinner.large .ispinner-blade {
  width: 8.57143%;
  height: 25.71429%;
  border-radius: 50%/16.67%;
}

@-webkit-keyframes ispinner-fade {
  0%   { opacity: 0.85; }
  50%  { opacity: 0.25; }
  100% { opacity: 0.25; }
}
@keyframes ispinner-fade {
  0%   { opacity: 0.85; }
  50%  { opacity: 0.25; }
  100% { opacity: 0.25; }
}

/* ========== CUSTOM SCROLLBAR ========== */


.scrollable-row {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 0;
  width: 100%;
}

.embed-wrapper2 {
  flex: 1;
  min-width: 0;
  border-radius: 0;
}

/* 30px wide hit area, positioned over the right border */
.custom-scrollbar {
  flex: 0 0 30px;
  position: relative;
  z-index: 10;
  cursor: default;
  user-select: none;
  background: transparent;
  margin-left: 28px;
  margin-right: -56px;
}

/* Gift tab: raise the top of the track by 10% of the scrollbar column height.
   bottom stays at 20px so only the top edge moves down. */
#panel-discount .scrollbar-track {
  top: calc(47.5px + 10%); /* = 55px + 10% - 7.5px rounding, net +10% from top */
}

/* Grey static track — 2.5px, inset 55px top / 20px bottom.
   55px top keeps the thumb + arrow below the rounded top of embed-wrapper2
   (which is 40px radius + 12px margin = ~52px curve) once signed-up. */
.scrollbar-track {
  position: absolute;
  top: 55px;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5px;
  background: #1f1f1f;
  pointer-events: none;
}

/* 30px wide transparent hit area, 2.5px visual bar via ::before */
.custom-thumb {
  width: 30px;
  background: transparent;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  cursor: grab;
  z-index: 2;
  overflow: visible;
}

.custom-thumb:active { cursor: grabbing; }

.custom-thumb::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5px;
  background: #4e804f;
  border-radius: 2px;
  transition: none;
  pointer-events: none;
}

/* Arrow images travel with thumb */
.custom-thumb img {
  width: 30px;
  height: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  pointer-events: auto;
}

.custom-thumb .arrow-top    { bottom: 100%; }
.custom-thumb .arrow-bottom { top:    100%; }

.custom-thumb .arrow-white { display: none; }
.custom-thumb .arrow-green { display: block; }

/* White on thumb hover or active drag — instant, no transition */
.custom-thumb:hover::before,
.custom-scrollbar.active .custom-thumb::before {
  background: #ffffff;
}

.custom-thumb:hover .arrow-green,
.custom-scrollbar.active .arrow-green {
  display: none;
}

.custom-thumb:hover .arrow-white,
.custom-scrollbar.active .arrow-white {
  display: block;
}

.custom-scrollbar.hidden { display: none; }

/* Height is set dynamically via postMessage (mypad:earn_height from earn.html
   on ResizeObserver) so the iframe fits its body content exactly with no
   trailing empty space. Initial value covers the largest expanded state. */
#earn-iframe {
  height: 1250px;
  display: block;
}

/* #discount-iframe height is 100% via .embed-wrapper2 .embed-inner iframe rule — no override needed */

#leaderboard-iframe {
  height: 1300px;
  display: block;
}

/* ========== WHY BAR & BUTTON ========== */

.why-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  margin-top: 8px;
  margin-bottom: 25px;
  padding: 6px 0;
  position: relative;
  z-index: 7; /* sits above #not-signed-up-view (z-index: 6) so X + ? remain visible */
}

/* Hide the ? button before signup AND during the post-signup welcome view.
   It re-appears once the user clicks "Start earning points". The .why-btn--active
   close button stays visible (it's the toggle out of why-mode). */
#popup:not(.signed-up) .why-btn:not(.why-btn--active),
#popup.signed-up:not(.start-earning) .why-btn:not(.why-btn--active) {
  display: none;
}

/* ? button — green by default, white bg + green text on hover */
.why-btn {
  height: 34px;
  border-radius: 17px;
  background: #4e804f;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  font-family: 'Satoshi', system-ui, sans-serif;
  white-space: nowrap;
}

.why-btn:hover {
  background: #ffffff;
}

.why-btn .why-text {
  font-size: 13px;
  font-weight: 600;
  color: #4e804f;
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.25s ease, padding-left 0.25s ease;
  padding-left: 0;
  letter-spacing: 0.02em;
}

.why-btn:hover .why-text {
  max-width: 80px;
  padding-left: 20px;
}

.why-btn .why-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
}

.why-btn:hover .why-icon {
  color: #4e804f;
}

/* Why-mode: tab buttons stay green, hide the white-text overlay so no text appears black */
.popup-footer.why-mode .tab { color: #4e804f; font-weight: 700; }
.popup-footer.why-mode .tabs-overlay { display: none; }
.popup-footer.why-mode .tab:hover { color: #ffffff; font-weight: 700; letter-spacing: 0.08em; }

/* Active (close) button: white circle, black text, no expand */
.why-btn--active {
  background: #ffffff !important;
  height: 34px;
  border-radius: 17px;
}

.why-btn--active .why-icon { color: #000000; }

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

/* Why panel body text */
.why-content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-right: 0px;
  padding-bottom: 40px;
  padding-top: 30px;
}

.why-content::-webkit-scrollbar { display: none; }

.why-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.why-title {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
}

.why-content p {
  font-family: 'Satoshi', system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.04rem !important;
  font-size: 0.95rem !important;
  color: #888888 !important;
  margin: 0 15px;
  line-height: 1.3;
}

.why-bullet {
  padding-left: 1.2em !important;
  position: relative !important;
}

.why-bullet + .why-bullet {
  margin-top: -0.6rem; /* cancel flex gap between consecutive bullets */
}

.why-bullet::before {
  content: '·';
  position: absolute;
  left: 0;
  top: -3px;
  color: #4e804f;
  font-size: 2.4rem;
  line-height: 0.43;
}

.why-certified {
  margin-top: 0.375rem;
  display: flex;
  align-items: flex-end;
  flex: 1;
  padding-bottom: 10px;
}

.why-certified img {
  max-width: 180px;
  height: auto;
  opacity: 0.85;
}

/* ========== DESKTOP CLOSE BUTTON ========== */
/* NOTE: colour unified to #4e804f */
.mobile-close-btn {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #4e804f;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: none;
}

.mobile-close-btn:hover {
  border-color: #ffffff;
}

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

.mobile-close-btn:hover svg {
  stroke: #ffffff;
}

/* ========== NOT-SIGNED-UP VIEW ==========
   Covers the entire .tab-panels area until the user signs up. Shows the
   last frame of the scroll animation as a background, with the pulsing
   mousepad-light overlay and a centered title. */

#not-signed-up-view {
  position: absolute;
  inset: 0;
  z-index: 6; /* sits above tab-content panels */
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}

#popup.signed-up #not-signed-up-view,
.popup-footer.why-mode ~ .tab-panels #not-signed-up-view {
  opacity: 0;
}

/* Hide the custom scrollbar on the panel sitting behind #not-signed-up-view. */
#popup:not(.signed-up) .tab-panels .tab-content .custom-scrollbar {
  display: none;
}

.nsu-bg,
.nsu-light {
  display: none;
}

.nsu-bg {
  background-image: url('../Images/bottom-new/Mousepad black teaser.bip.18.00059.jpg');
}

.nsu-light {
  background-image: url('../Images/bottom light adjusted-new/mousepad reveal_00059.png');
  animation: nsu-light-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes nsu-light-pulse {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.nsu-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 1.4rem; /* same as .why-title */
  font-weight: 600;
  line-height: 1.4;
  padding: 0 40px;
  z-index: 2;
  transform: translateY(-10px);
}

.nsu-title .nsu-line-1 { color: #ffffff; }
.nsu-title .nsu-sub    { color: rgba(255, 255, 255, 0.35); }
.nsu-title .nsu-line-2 { color: rgba(255, 255, 255, 0.5); }

/* Default vs invite variant of nsu-line-2. Invite variant is hidden unless
   #popup carries .invite-mode (set by main-scripts.js after invite_lookup). */
.nsu-title .nsu-line-2--invite  { display: none; }
#popup.invite-mode .nsu-title .nsu-line-2--default { display: none; }
#popup.invite-mode .nsu-title .nsu-line-2--invite  { display: inline; }
/* Replaces the previous <br><br> separator (~31px at 1.4rem × 1.4 line-height)
   with a precise gap reduced by 30%. */
.nsu-title .nsu-gap-desktop {
  display: block;
  height: 22px;
}
.nsu-title .nsu-desktop { display: inline; }
.nsu-title .nsu-mobile  { display: none; }
@media (max-width: 599px) {
  .nsu-title {
    transform: translateY(-25px);
  }
  .nsu-title .nsu-desktop { display: none; }
  .nsu-title .nsu-mobile  { display: inline; }
  /* Replaces the previous <br><br> separator with a precise gap, 30%
     less than the natural ~31px (1.4rem × 1.4 line-height) double-line. */
  .nsu-title .nsu-gap-mobile {
    display: block;
    height: 22px;
  }
}

/* ========== POST-SIGNUP WELCOME VIEW ==========
   Bottom-panel overlay container holding three view variants:
     • .psu-view--check-email   (pre-confirm signup state)
     • .psu-view--welcome-back  (already-registered manual re-signup)
     • .psu-view--carousel      (post-confirm 2-slide intro)
   Visibility is driven by classes on #popup: .check-email, .welcome-back,
   or .signed-up. Dismissal (.start-earning) slides the whole overlay
   downward to reveal the tab bar underneath. */

#post-signup-view {
  position: absolute;
  inset: 0;
  z-index: 6; /* same as not-signed-up-view */
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0);
  padding: 15px 40px 0;
  box-sizing: border-box;
  text-align: center;
  background: #101010;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid #1f1f1f;
  border-radius: 40px 40px 0 0;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}

/* Show overlay for any of the three states. */
#popup.check-email #post-signup-view,
#popup.welcome-back #post-signup-view,
#popup.signed-up:not(.start-earning) #post-signup-view {
  opacity: 1;
  pointer-events: auto;
}

/* Why-mode (help panel) hides the overlay instantly. */
.popup-footer.why-mode ~ .tab-panels #post-signup-view {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease;
}

/* .start-earning dismiss: slide DOWN to reveal tab bar (user requirement).
   Opacity stays at 1 during the slide. */
#popup.start-earning #post-signup-view {
  opacity: 1;
  transform: translateY(100%);
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}

/* ── View visibility (only one shown at a time) ── */
.psu-view {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 40px 0;
  box-sizing: border-box;
  text-align: center;
}
#popup.check-email  #post-signup-view .psu-view--check-email  { display: flex; }
#popup.welcome-back #post-signup-view .psu-view--welcome-back { display: flex; }
#popup.signed-up    #post-signup-view .psu-view--carousel     { display: block; }

.psu-title {
  color: #ffffff;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 30px;
}

.psu-title .psu-name { color: #ffffff; }
.psu-muted { color: rgba(255, 255, 255, 0.5); }

/* "Start earning points" / "EARN MORE POINTS" — green-line pill button. */
.psu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  border-radius: 20px;
  padding: 0 24px;
  background-color: #000000;
  color: #4e804f;
  border: 2px solid #4e804f;
  cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease;
  position: relative;
}

.psu-btn:hover {
  background-color: #4e804f;
  color: #ffffff;
}

.psu-btn .psu-btn-icon {
  position: relative;
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.psu-btn .psu-btn-arrow {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  object-fit: contain;
  transition: opacity 0.15s ease;
}
.psu-btn .psu-btn-arrow-white { opacity: 0; }
.psu-btn:hover .psu-btn-arrow-green { opacity: 0; }
.psu-btn:hover .psu-btn-arrow-white { opacity: 1; }

/* ── Carousel ── 2 vertically-sliding slides. */
.psu-view--carousel {
  overflow: hidden;
}
.psu-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 40px 0;
  box-sizing: border-box;
  transition: transform 0.5s cubic-bezier(0.45, 0, 0.55, 1),
              opacity 0.4s ease;
}
.psu-slide--1 { transform: translateY(0);     opacity: 1; }
.psu-slide--2 { transform: translateY(100%);  opacity: 0; pointer-events: none; }
#popup.show-slide-2 .psu-slide--1 { transform: translateY(-100%); opacity: 0; pointer-events: none; }
#popup.show-slide-2 .psu-slide--2 { transform: translateY(0);     opacity: 1; pointer-events: auto; }

/* Slide-1 default vs invite variants (invite shown only when popup has .invite-mode). */
.psu-slide1-invite  { display: none; }
#popup.invite-mode .psu-slide1-default { display: none; }
#popup.invite-mode .psu-slide1-invite  { display: inline; }

/* Round green arrow-down button — matches .mobile-close-btn size/border. */
.psu-round-btn {
  display: flex;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #4e804f;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.psu-round-btn:hover { background-color: #4e804f; border-color: #4e804f; }

.psu-round-btn .psu-round-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  object-fit: contain;
  transition: opacity 0.15s ease;
}
.psu-round-btn .psu-round-arrow-white { opacity: 0; }
.psu-round-btn:hover .psu-round-arrow-green { opacity: 0; }
.psu-round-btn:hover .psu-round-arrow-white { opacity: 1; }

/* ========== SIGNED-UP TRANSITIONS ==========
   When .signed-up is on #popup: not-signed-up-view fades out (0.25s),
   then earn (and other) tab iframes fade in (0.25s, delayed 0.25s).
   This produces the requested "0.25s to dark grey, then 0.25s to cards"
   sequence using the .tab-content background (#101010) as the dark grey.
   The .why panel is exempt — it must be readable when ? is clicked even
   before signup. */

#popup #panel-earn .embed-wrapper2 .embed-inner,
#popup #panel-discount .embed-wrapper2 .embed-inner,
#popup #panel-leaderboard .embed-wrapper2 .embed-inner {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Fade-in synced with .embed-wrapper height transition (also 0.5s) */
#popup.signed-up #panel-earn .embed-wrapper2 .embed-inner,
#popup.signed-up #panel-discount .embed-wrapper2 .embed-inner,
#popup.signed-up #panel-leaderboard .embed-wrapper2 .embed-inner {
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* embed-wrapper2 rounded top + 2px border on signed-up is MOBILE-ONLY
   (mirroring the embed-wrapper look) — see mobile.css. Desktop keeps it flat. */