/* =========================
   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;
  opacity: 0.3; /* white spinner, 70% transparent */
}

.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: 700; /* match all other buttons (Bold) */
  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.35);
  pointer-events: auto;
}

/* Lock background scroll while the popup is open (covers the mobile case where
   ScrollSmoother is killed and native scrolling would otherwise resume). */
body.popup-open { overflow: hidden; }

/* =========================
   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: 5vh;
  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 1s cubic-bezier(0.45, 0, 0.55, 1),
              padding 1s 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;
}

/* Confirm-email flow lands the user on the END state directly, so kill EVERY
   structural transition (panel resize, tab-bar slide, fades) — desktop and
   mobile. The intro TEXT fade is driven separately via inline styles, so
   .psu-view is intentionally excluded here. The class is removed again on
   "Start earning points" so that reveal animates normally. */
#popup.confirm-instant .embed-wrapper,
#popup.confirm-instant .tab-panels,
#popup.confirm-instant .popup-footer,
#popup.confirm-instant .tab-slider,
#popup.confirm-instant .tabs-overlay,
#popup.confirm-instant #post-signup-view,
#popup.confirm-instant #signup-iframe {
  transition: none !important;
}

.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;
  opacity: 1;
  /* 2s opacity fade that starts the moment .start-earning is added; border-color
     fades white over 0.5s when the bar becomes active (from the inert dark grey). */
  transition: opacity 2s ease, border-color 0.5s ease;
}
/* Tab bar fades in together with the panel resize once earning starts. */
#popup:not(.start-earning) .popup-footer {
  opacity: 0;
}

/* During the intro (signed-up, pre start-earning) the tab bar is shown but
   inert: dark-grey border, no active-tab highlight (every label green), clicks
   disabled until START EARNING is hit. */
#popup.signed-up:not(.start-earning) .popup-footer {
  opacity: 1;
  pointer-events: none;
  border-color: #ffffff; /* CHANGED: white border while intro text is visible (labels stay green via hidden slider/overlay) */
}
/* Hide the white active-slider + black overlay while inert so all tab text reads
   green. No opacity transition on these, so they reappear INSTANTLY on activation
   (the earn tab becomes active with no fade) while the border fades to white. */
#popup.signed-up:not(.start-earning) .tab-slider,
#popup.signed-up:not(.start-earning) .tabs-overlay {
  opacity: 0;
}

/* 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: 0 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;
  padding-bottom: 50px; /* was 76px — matched to phone so content reaches the bottom fade zone */
  position: relative; /* anchor for the bottom-pinned .why-bar / close button */
}

.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: 0px;
}

/* 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;
  height: 50px;
  background: url('../Images/gradee.png') no-repeat;
  background-size: 100% 100%;
  transform: scaleY(-1); /* png is solid-bottom; flip for the top edge */
}

/* Bottom gradient moved to .why-bar::before (see below) so it can sit at the
   close-button centre instead of being clipped at the embed-wrapper2 bottom. */
.embed-wrapper2::after {
  display: none;
}

.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; }

/* Match the signup-button spinner size (24px) */
.loader img { width: 24px; height: 24px; object-fit: contain; }

.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;
}

/* All tabs start the track at the same position, matching leaderboard. */
#panel-earn .scrollbar-track,
#panel-discount .scrollbar-track,
#panel-why .scrollbar-track {
  top: 50px;
}

/* Leaderboard tab: same start as the rest. */
#panel-leaderboard .scrollbar-track {
  top: 50px;
}

/* 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: 5px;
  left: 50%;
  /* Centered via margin (not transform) so the track does NOT create a
     stacking context — lets the end-cap squares below sit above the thumb arrows. */
  margin-left: -1.25px;
  width: 2.5px;
  background: #1f1f1f;
  pointer-events: none;
}

/* Tiny green end-cap squares marking the top and bottom of the scroll track */
.scrollbar-track::before,
.scrollbar-track::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  background: #4e804f;
  z-index: 11; /* above the thumb arrows (z-index 2) and custom-scrollbar (10) */
}
/* Centre the 3px square on each arrow's visible tip. The arrow image's top
   edge sits exactly at the track end (measured), and its visible tip is ~0.8px
   in, so -1px centres the square on the tip. */
.scrollbar-track::before { top: -1px; }
.scrollbar-track::after  { bottom: -1px; }

/* 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;
  /* Pinned to the bottom of .tab-content so the button row sits a fixed
     distance above the screen bottom in EVERY state (signed-up or not,
     any panel). bottom = 34px → space below the 34px button equals the
     button's own height. */
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  z-index: 7; /* sits above #not-signed-up-view (z-index: 6) so X + ? remain visible */
}

/* Bottom fade gradient — anchored to the why-bar so its BOTTOM edge lands on the
   close button's vertical centre (and extends down under it). Double the old
   30px height. The ::before paints below the close button (which comes later in
   the DOM) so the X stays visible; the why-bar's z-index 7 keeps it over the
   scrolling content. Applies to every tab panel (earn/gift/leaderboard/intro). */
.why-bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50%;   /* why-bar vertical centre = close-button centre */
  height: 60px;  /* double the previous 30px */
  background: url('../Images/gradee.png') no-repeat;
  background-size: 100% 100%; /* png is solid-bottom → correct for a bottom fade */
  pointer-events: none;
}
/* No bottom fade over the not-signed-up pitch text. */
#popup:not(.signed-up) .why-bar::before { display: none; }

/* 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) {
  visibility: hidden; /* reserve space so the why-bar keeps its height; button becomes visible once .start-earning is added */
}

/* ? button — green by default, white bg + green text on hover */
.why-btn {
  height: 34px;
  border-radius: 17px;
  background: transparent;
  border: 2px solid #4e804f;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  font-family: 'Satoshi', system-ui, sans-serif;
  white-space: nowrap;
  /* position + z-index so the button paints ABOVE the .why-bar::before
     gradient (an absolutely-positioned pseudo). Without a stacking position
     the in-flow button renders behind that positioned gradient. */
  position: relative;
  z-index: 8;
}

.why-btn:hover {
  background: transparent;
  border-color: #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;
  color: #ffffff;
}

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

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

/* 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%;
  top: 50%;
  transform: translate(-50%, -50%); /* centered in the 34px-tall .why-bar */
  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 1s ease;
}

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

/* Signup → check-email/welcome-back: intro text fades OUT first (0.5s linear),
   then #post-signup-view fades in (delayed 0.5s). Sequential, no crossfade. */
#popup.check-email #not-signed-up-view,
#popup.welcome-back #not-signed-up-view {
  opacity: 0;
  transition: opacity 0.5s linear;
}

/* Hide the custom scrollbar on the panel sitting behind #not-signed-up-view. */
#popup:not(.signed-up) .tab-panels .tab-content:not(#panel-intro) .custom-scrollbar,
/* Also hidden while the carousel overlay is up — no scrollbar should show
   behind/beside the post-signup welcome view. #panel-intro is the exception:
   it's the visible intro panel in that state and needs its scrollbar. */
#popup.signed-up:not(.start-earning) .tab-panels .tab-content:not(#panel-intro) .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 80px;
  z-index: 2;
  transform: translateY(-10px);
}

.nsu-title .nsu-line-1 { color: #ffffff; }
.nsu-title .nsu-sub    { color: #ffffff; }
.nsu-title .nsu-line-2 { color: #ffffff; }

/* 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 {
    /* Slimmer side margins than the desktop 0 80px so the text isn't cramped.
       Bottom padding reserves the close button's height (~68px from the panel
       bottom) so the block centres between the panel top and the close-button
       top. Independent of browser chrome — the close button is fixed to the
       POPUP, not the viewport — so it's identical with the address bar top or
       bottom. (The mobile copy drops the trailing "yours" so the CTA line never
       wraps to a hidden second line that would skew this centring.) */
    padding: 0 24px 68px;
    transform: translateY(-2vh); /* nudge the pitch block up on phones */
  }
  .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--intro         (post-confirm single scrollable text page)
   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;
  /* Transparent (no panel) so only the TEXT fades — the intro text and the
     confirmation text both sit on the popup's stable #000000. No #101010 box
     fading in over the black. */
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 40px 40px 0 0;
  transition: opacity 1s ease, transform 1s cubic-bezier(0.45, 0, 0.55, 1);
}

/* Show overlay for check-email / welcome-back only. The post-confirm intro now
   lives in its own #panel-intro tab-content (see below), not this overlay. */
#popup.check-email #post-signup-view,
#popup.welcome-back #post-signup-view {
  opacity: 1;
  pointer-events: auto;
  /* Sequential swap, no crossfade: the intro fades out first (0.5s, see
     #not-signed-up-view below), THEN this fades in 0.5s linear after a 0.5s
     delay. No easing on either. */
  transition: opacity 0.5s linear 0.5s;
}

/* ── INTRO PANEL (#panel-intro) ──
   A real .tab-content (so it inherits the working tab-panel scrollbar). Shown
   while signed-up and not yet earning; the active iframe panel behind it is
   hidden in that window. START EARNING adds .start-earning → this hides and
   #panel-earn shows again. */
#popup.signed-up:not(.start-earning) #panel-intro {
  display: flex;
  flex-direction: column;
}
#popup.signed-up:not(.start-earning) .tab-content.active {
  display: none !important;
}
#panel-intro .scrollbar-track { top: 100px; }
#panel-intro .psu-intro-text { text-align: center; }

/* 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: staged fade.
   Stage 1 (0–0.5s): the intro text/view fades out (.psu-view fade-out, no delay).
   Stage 2 (0.5–1s): the dark overlay itself fades out (delayed 0.5s), so the
   earn cards underneath fade into view only AFTER the text is gone. */
#popup.start-earning #post-signup-view {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease 0.5s;
}

/* ── View visibility (only one shown at a time, opacity-based for smooth fades) ── */
.psu-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Centre the block between the panel top and the close (X) button's TOP edge.
     Close button: .why-bar bottom:34px + 34px height → top is 68px from the
     panel bottom. bottom-pad = top-pad(15) + 68 = 83 puts the block centre
     exactly midway between panel-top and close-button-top. */
  padding: 15px 80px 83px;
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease; /* fade OUT */
}
#popup.check-email  .psu-view--check-email,
#popup.welcome-back .psu-view--welcome-back {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s ease 0.5s; /* fade IN only after the old text is gone (1s total) */
}

/* ── Vertical centering of the bottom-panel text views — ALL breakpoints ──
   The .psu-view padding above already centers the block midway between the
   panel top and the close-button top. These rules remove the oversized
   .psu-title bottom margin that otherwise spreads/offsets the block so it reads
   as off-centre (was previously only fixed on phones, leaving tablet + desktop
   — incl. landscape — wrong). !important + high specificity so they also beat
   the generic phone `.psu-title { margin-bottom: 48px !important }`. */
#popup:not(.signed-up) .psu-view--check-email .psu-title  { margin-bottom: 0 !important; }
#popup:not(.signed-up) .psu-view--welcome-back .psu-title { margin-bottom: 20px !important; }
/* Carousel container is visible only when signed-up AND not yet dismissing.
   The :not(.start-earning) check prevents a flash of the carousel during a
   welcome-back → earn dismiss (which adds both .signed-up and .start-earning
   simultaneously). */
#popup.signed-up:not(.start-earning) .psu-view--intro {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s ease 0.5s; /* fade in after the previous view fades out */
}

/* Intro = single scrollable text page. Mirror .tab-content padding so the text
   column + scrollbar line up with the earn cards underneath. */
.psu-view--intro {
  padding: 5px 40px 76px;
  justify-content: stretch;
}
/* Welcome copy: stacked paragraphs + the START button as the last item.
   Top/bottom padding clears the gradients so the first/last lines fade nicely. */
.psu-intro-text {
  /* +40px each side on top of the panel's 40px → doubled (80px) horizontal inset. */
  padding: 40px 40px 50px;
}
.psu-intro-text .psu-title:last-of-type {
  margin-bottom: 50px; /* gap before the START EARNING button */
}
.psu-intro-text .psu-btn {
  margin-bottom: 30px; /* breathing room below the START EARNING POINTS button */
}
/* Custom scrollbar track for the intro (matches the earn-tab start position). */
#post-signup-view .scrollbar-track { top: 100px; }
/* The intro's custom scrollbar (right edge + end-cap squares) sits slightly
   outside the panel via the shared scrollbar offsets. #post-signup-view clips
   with overflow:hidden — an extra layer the .tab-content panels don't have —
   which hid the scrollbar's right side and the squares. Allow overflow only
   while the intro is on screen so it renders like the other tab panels. */
#popup.signed-up:not(.start-earning) #post-signup-view { overflow: visible; }
/* Double-height top/bottom gradient — only on the intro scroll page. */
.psu-intro-wrap.embed-wrapper2::before,
.psu-intro-wrap.embed-wrapper2::after {
  height: 60px;
}

.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 60px;
}

.psu-title .psu-name { color: #ffffff; }
/* Mobile-only line break (e.g. push the email onto its own line) — hidden
   everywhere except the phone breakpoint, which flips it to inline. */
.psu-mobile-br { display: none; }
.psu-muted {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.95rem;        /* small, matching the earn-card intro text (.earn-desc) */
  font-weight: 500;
  letter-spacing: 0.05rem;
}

/* "Start earning points" / "EARN MORE POINTS" — green-line pill button. */
.psu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between; /* label left, arrow right */
  gap: 14px;
  width: 100%;
  height: 56px;
  border-radius: 20px;
  padding: 0 16px;
  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-label { flex: 1; text-align: left; }
.psu-btn .psu-btn-icon {
  position: relative;
  display: inline-flex;
  width: 24px;   /* match the signup button arrow */
  height: 24px;
  flex-shrink: 0;
}
.psu-btn .psu-btn-arrow {
  position: absolute;
  inset: 0;
  width: 24px;   /* match the signup button arrow */
  height: 24px;
  object-fit: contain;
  transition: opacity 0.15s ease;
}

/* Welcome-back button: no arrow, shrink-to-fit the label, doubled side padding. */
.psu-btn--wb {
  width: auto;
  justify-content: center;
  padding-left: 29px;  /* 1/3 less than 44px — same across desktop/tablet/mobile */
  padding-right: 29px;
}
.psu-btn--wb .psu-btn-label { flex: 0 0 auto; text-align: center; }

/* Desktop + tablet: same width as the signup button (both containers are the
   same inner width, so the same calc matches). Label left, arrow right. */
@media (min-width: 600px) {
  .psu-btn {
    width: calc(50% - 6px);
    justify-content: space-between;
    padding-right: 16px; /* arrow sits same distance from the right as the signup button */
  }
}
.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; }

/* EARN MORE POINTS button: arrow shown only on desktop + tablet (≥600px).
   Phone keeps the centered, arrow-less pill (icon hidden by default below). */
.psu-btn--earn-more .psu-btn-icon { display: none; }
@media (min-width: 600px) {
  .psu-btn--earn-more {
    width: auto;            /* compact shrink-to-fit pill, overrides the 50% width */
    justify-content: center;
    gap: 14px;
  }
  .psu-btn--earn-more .psu-btn-label { flex: 0 0 auto; text-align: center; }
  .psu-btn--earn-more .psu-btn-icon { display: inline-flex; }
}

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

/* ========== 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 1s ease;
}

/* Fade-in synced with .embed-wrapper height transition (also 1s) */
#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 1s 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. */