/* Fonts for the PremiumMe night-sky theme at the end of this file (the home page's Poppins and Playfair Display) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@1,600&display=swap");

/* ============================================================
   SPOTIFI template — all styling lives here.
   Change the look from the variables in :root below.
   ============================================================ */

:root {
  /* Colours — change these to rebrand the whole site */
  --bg:        #0a0a0c;   /* page background        */
  --surface:   #141418;   /* cards and bars         */
  --surface-2: #1c1c22;   /* hover / image boxes    */
  --border:    rgba(255, 255, 255, .09);
  --border-2:  rgba(255, 255, 255, .16);
  --text:      #f2f2f4;   /* main text              */
  --muted:     #a1a1aa;   /* secondary text         */
  --faint:     #6b6b74;   /* placeholders           */
  --accent:    #1ed760;   /* buttons / active state — your brand colour */
  --on-accent: #04130d;   /* text on the accent     */

  /* Sizes */
  --rail: 76px;           /* width of the left icon rail */
  --topbar-h: 64px;
  --radius: 10px;
  --gap: 22px;
  --maxw: 1480px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(125% 58% at 50% 112%,
      color-mix(in srgb, var(--accent) 46%, transparent) 0%,
      color-mix(in srgb, var(--accent) 20%, transparent) 34%,
      color-mix(in srgb, var(--accent) 7%, transparent) 58%,
      transparent 78%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--text);
  font: 400 15px/1.5 "Figtree", "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- App frame ---------- */
.app {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

/* ---------- Left rail ---------- */
.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.rail-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--on-accent);
  background: var(--accent);
}
.rail-mark svg { width: 24px; height: 24px; }
.rail-nav { display: flex; flex-direction: column; gap: 10px; }
.rail-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.rail-btn svg { width: 22px; height: 22px; }
.rail-btn:hover { color: var(--text); background: var(--surface-2); }
.rail-btn.is-active { color: var(--text); background: var(--surface-2); }

/* ---------- Main column ---------- */
.main { min-width: 0; }

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--topbar-h);
  padding: 0 24px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.tb-nav { display: flex; gap: 8px; }
.round {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.round svg { width: 18px; height: 18px; }
.round:hover { background: var(--border-2); }

.search {
  position: relative;
  flex: 1;
  max-width: 460px;
}
.search-i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--faint);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 42px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.search input::placeholder { color: var(--faint); }
.search input:focus { outline: none; border-color: var(--border-2); background: var(--surface-2); }

.tb-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--surface-2), var(--border-2));
  border: 1px solid var(--border);
}

/* ---------- Content ---------- */
.content {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 24px 64px;
}

/* ===== Hero: left image + right text ===== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: var(--gap);
  align-items: stretch;
  position: relative;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--surface);
}
.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  min-height: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--surface-2), #0f0f13);
  border: 1px solid var(--border);
  overflow: hidden;
  contain: paint;   /* nothing inside (video/tint/bars) can paint past this box, any zoom */
  isolation: isolate;
}
.hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Background video + green tint behind the equalizer */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.hero-tint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 42%, transparent));
  mix-blend-mode: multiply;
}
/* Animated equalizer in the hero box — same green as the buttons (var(--accent)).
   Bars share one keyframe but run at different speeds and offsets, so they move
   independently like a real music visualiser. */
.eq {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 0 5%;
  height: 58%;
  min-height: 76px;
}
.eq-bar {
  flex: 1 1 0;
  min-width: 5px;
  max-width: 16px;
  height: 30%;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px -3px color-mix(in srgb, var(--accent) 75%, transparent);
  animation: eq 1s ease-in-out infinite;
  will-change: height;
}
.eq-bar:nth-child(3n+1) { animation-duration: 1.05s; animation-delay: -0.20s; }
.eq-bar:nth-child(3n+2) { animation-duration: 1.35s; animation-delay: -0.50s; }
.eq-bar:nth-child(3n)   { animation-duration: 0.90s; animation-delay: -0.10s; }
.eq-bar:nth-child(5n)   { animation-duration: 1.50s; animation-delay: -0.70s; }
.eq-bar:nth-child(7n+2) { animation-duration: 0.95s; animation-delay: -0.35s; }
@keyframes eq {
  0%, 100% { height: 26%; }
  50%      { height: 100%; }
}
/* Hold still, at varied heights, for anyone who prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .eq-bar { animation: none; }
  .eq-bar:nth-child(3n+1) { height: 55%; }
  .eq-bar:nth-child(3n+2) { height: 82%; }
  .eq-bar:nth-child(3n)   { height: 38%; }
  .eq-bar:nth-child(5n)   { height: 100%; }
}

/* ===== Shelf: how-it-works steps above the feature row ===== */
.shelf {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 18px;
  scrollbar-width: thin;
}
.step-card {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 12px;
  row-gap: 8px;
  padding: 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.step-num {
  grid-column: 1; grid-row: 1;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--accent);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
}
.step-title {
  grid-column: 2; grid-row: 1;
  margin: 0;
  padding-top: 5px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--text);
}
.step-sub {
  grid-column: 2; grid-row: 2;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* ===== Extra box between the key row and the partner tile ===== */
.extra-wrap { margin-top: 16px; }
.extra-card {
  --v: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.extra-sub {
  margin: 0;
  max-width: 70ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.soc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.soc-badge {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s, filter .15s;
}
.soc-badge:hover { transform: translateY(-1px); filter: brightness(1.06); }
.soc-badge svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.soc-og { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.soc-note {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transition: opacity .15s;
}
.soc-note.is-on { opacity: 1; }

/* ===== Footer bar (accent green, full width) ===== */
.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  background: var(--accent);
  color: var(--on-accent);
}
.foot-copy {
  grid-column: 2;
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
.foot-nav {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 26px;
}
.foot-nav a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-accent);
  text-decoration: none;
  white-space: nowrap;
}
.foot-nav a:hover { opacity: .72; }
@media (max-width: 820px) {
  .site-footer { grid-template-columns: 1fr; gap: 10px; }
  .foot-copy, .foot-nav { grid-column: 1; justify-self: center; }
}
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 8px 8px 4px;
}
.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-title {
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hero-title-mark {
  display: inline-block;
  width: .9em;
  height: .9em;
  margin-right: .22em;
  vertical-align: -.1em;
}
.hero-sub {
  margin: 0 0 22px;
  max-width: 52ch;
  color: var(--muted);
  font-size: 16px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s, filter .15s;
}
.btn:hover { transform: scale(1.03); filter: brightness(1.05); }
.btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-2);
}
.btn.ghost:hover { background: var(--surface-2); transform: none; }

/* ===== Chips ===== */
.chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 30px 0 18px;
}
.chip {
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.chip:hover { background: var(--border-2); }
.chip.is-active { background: var(--accent); color: var(--on-accent); font-weight: 600; }

/* ===== Tiles ===== */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.tile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: background .15s, border-color .15s;
}
.tile:hover { background: var(--surface-2); border-color: var(--border-2); }
.t-art {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--surface-2), #0e0e12);
  border: 1px solid var(--border);
  overflow: hidden;
}
.t-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Empty-state placeholders so the blank tiles still show their shape.
   They disappear as soon as you add text/images. */
.t-title {
  min-height: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-title:empty { width: 90px; border-radius: 4px; background: var(--surface-2); }
.t-sub { min-height: 12px; font-size: 13px; color: var(--muted); }
.t-sub:empty { width: 56px; border-radius: 4px; background: var(--surface-2); opacity: .6; }

/* ===== Feature row: icon, title, description (four across) ===== */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 24px;
  margin-top: 18px;
}
.feature { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.feature-ic { width: 30px; height: 30px; color: var(--accent); }
.feature-ic svg { display: block; width: 100%; height: 100%; }
.feature h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--text); }
.feature p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 32ch; }

/* ===== Plan cards =====
   Blank placeholders built from .ph blocks. Replace them with real text, and drop a
   logo <img> into .plan-logo, when you fill the cards in. */
.ph { background: var(--surface-2); border-radius: 5px; }

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.plan-badge { width: 96px; height: 24px; border-radius: 999px; background: var(--surface-2); }
.plan-head { display: flex; align-items: center; gap: 10px; }
.plan-logo {
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.plan-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plan-label { height: 12px; width: 72px; }
.plan-name { height: 26px; width: 58%; border-radius: 6px; }
.plan-price { height: 14px; width: 42%; }
.plan-rule { width: 100%; height: 0; margin: 4px 0 2px; border: 0; border-top: 1px solid var(--border); }
.plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plan-feats li { display: flex; align-items: center; gap: 10px; }
.plan-feats .fd { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--faint); }
.plan-feats .fl { flex: 1; height: 11px; }
.plan-feats li:nth-child(2) .fl { max-width: 82%; }
.plan-feats li:nth-child(3) .fl { max-width: 60%; }
.plan-cta { height: 46px; border-radius: 999px; background: var(--surface-2); margin-top: 6px; }
.plan-fine { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 2px; }
.plan-fine .ph { height: 9px; }
.plan-fine .ph:first-child { width: 85%; }
.plan-fine .ph:last-child { width: 55%; }

/* ===== Card 1 — upgrade key (violet; visual only) ===== */
.card-key { --v: var(--accent); gap: 16px; }
.ck-head { display: flex; align-items: center; gap: 12px; }
.ck-badge {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px;
  color: var(--v);
  background: color-mix(in srgb, var(--v) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--v) 42%, transparent);
}
.ck-badge svg { width: 20px; height: 20px; }
.ck-title {
  margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #fff;
}
.ck-field {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--border-2); border-radius: 10px; background: rgba(0, 0, 0, .25); color: var(--faint);
}
.ck-field svg { width: 18px; height: 18px; flex: none; }
.ck-ph { font-size: 15px; letter-spacing: .12em; }
.ck-note {
  display: flex; gap: 10px; padding: 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--v) 24%, var(--border));
  background: color-mix(in srgb, var(--v) 7%, transparent);
}
.ck-note svg { width: 18px; height: 18px; flex: none; color: var(--v); margin-top: 1px; }
.ck-note p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ck-note strong { display: block; margin-bottom: 3px; color: var(--v); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.ck-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto;
  min-height: 48px; padding: 0 18px; border-radius: 10px;
  border: 0; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--v); background-color: var(--v); background-clip: padding-box;
  color: var(--on-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 14px;
}
.ck-btn svg { width: 18px; height: 18px; }
.ck-btn-ghost {
  margin-top: 0;
  justify-content: flex-start;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text);
}
.ck-btn-ghost:hover { border-color: var(--v); color: var(--v); }
.ck-login-mark {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
  object-fit: contain;
}

/* ===== upgrade key: live input, cookie box, status, renewal ===== */
.ck-field input,
.ck-field textarea {
  flex: 1; width: 100%; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--text); font: inherit; font-size: 15px;
}
.ck-field input::placeholder,
.ck-field textarea::placeholder { color: var(--faint); letter-spacing: .12em; }
.ck-field:focus-within { border-color: var(--v); }
.ck-field-area { align-items: flex-start; padding: 12px 14px; min-height: 96px; }
.ck-field-area textarea {
  resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5; letter-spacing: .02em;
}
.ck-status { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ck-status:empty { display: none; }
.ck-cookie { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; border-top: 1px solid var(--border); }
.ck-cookie[hidden] { display: none; }
.ck-flash { animation: ck-flash 1.6s ease-out; }
@keyframes ck-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--v) 60%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
.renew-wrap { padding: 0; }
.renew-card {
  display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin: 0 auto;
  padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.renew-card[hidden] { display: none; }
.renew-card .ck-btn { margin-top: 0; }
.ck-btn[disabled] { opacity: .55; cursor: not-allowed; }
.ck-link {
  align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--v); font: inherit; font-size: 13.5px; text-decoration: underline;
}

/* ===== Card 2 — reset your key (green) ===== */
.card-reseller { --v: var(--accent); }
.cr-head { display: flex; align-items: center; gap: 12px; }
.cr-badge {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.cr-badge svg { width: 20px; height: 20px; }
.cr-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .01em; }
.cr-sub { margin: -2px 0 2px; font-size: 14px; color: var(--muted); }
.cr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cr-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); }
.cr-list svg { width: 17px; height: 17px; flex: none; color: var(--accent); margin-top: 2px; }
.cr-btn {
  display: inline-flex; align-items: center; justify-content: center; margin-top: auto; min-height: 46px;
  border-radius: 999px; background: transparent; border: 1px solid var(--border-2);
  color: var(--text); font-weight: 600; font-size: 14px;
}

/* ===== Card 3 — partner tile with a background image you add ===== */
.card-partner {
  position: relative; overflow: hidden; padding: 0; min-height: 280px; text-decoration: none;
  background: linear-gradient(135deg, #241a3a, #122033 55%, #10231c);
}
.cp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-overlay {
  position: relative; z-index: 1; margin-top: auto; width: 100%; padding: 22px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .74) 12%, rgba(0, 0, 0, 0));
}
.cp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.cp-name { font-size: 30px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.cp-visit { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 13px; font-weight: 600; color: #fff; }
.cp-visit svg { width: 15px; height: 15px; }
@media (hover: hover) {
  .cp-bg { transition: transform .3s ease; }
  .card-partner:hover .cp-bg { transform: scale(1.04); }
  .card-partner:hover .cp-name { text-decoration: underline; text-underline-offset: 3px; }
}

/* ===== Top header: brand + nav links ===== */
.brand { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--text); text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.site-nav a { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--text); }
.nav-sep { width: 1px; height: 18px; background: var(--border-2); }
.buy-key {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: 13px; font-weight: 700; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: transform .12s, filter .15s;
}
.buy-key:hover { transform: scale(1.04); filter: brightness(1.06); }
@media (max-width: 600px) {
  .site-nav { gap: 14px; }
  .site-nav a[href="#"] { display: none; }   /* hide Support to fit the button */
  .nav-sep { display: none; }
  .buy-key { padding: 0 16px; }
}

/* ===== Account login (visual only — buttons toggle the view, no backend) ===== */
.login-wrap { margin-top: 46px; display: flex; justify-content: center; }
.login {
  width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 14px;
  padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
}
.login-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.login-sub { margin: -6px 0 6px; font-size: 14px; color: var(--muted); }
.field-row { display: flex; gap: 10px; }
.in {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--border-2); border-radius: 10px; background: rgba(0, 0, 0, .25);
}
.in svg { width: 18px; height: 18px; flex: none; color: var(--faint); }
.in input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; }
.in input::placeholder { color: var(--faint); letter-spacing: normal; }
.in input:focus { outline: none; }
.in:focus-within { border-color: var(--accent); }
#login-code { letter-spacing: .3em; }
.btn-accent {
  flex: none; min-height: 48px; padding: 0 20px; border: 0; border-radius: 10px;
  background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; cursor: pointer;
  transition: filter .15s, transform .1s;
}
.btn-accent:hover { filter: brightness(1.06); }
.btn-accent:active { transform: scale(.98); }
.login-status { margin: 2px 0 0; min-height: 18px; font-size: 13px; color: var(--muted); }
.login-status.is-error { color: #f87171; }
.login-resend {
  align-self: flex-start; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 460px) {
  .field-row { flex-direction: column; }
  .btn-accent { width: 100%; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { aspect-ratio: 16 / 9; }
}
@media (max-width: 680px) {
  :root { --rail: 0px; }
  .rail { display: none; }
  .app { grid-template-columns: 1fr; }
  .topbar { padding: 0 14px; gap: 10px; }
  .tb-nav { display: none; }
  .content { padding: 20px 14px 48px; }
  .tiles { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
}

/* ===== Spotify-style top nav (reference strip) ===== */
:root { --spnav-h: 64px; }

.sp-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--spnav-h); padding: 0 40px;
  background: #000;
  font-family: "Figtree", "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
.sp-logo { display: inline-flex; align-items: center; gap: 9px; }
.sp-mark { display: block; width: 32px; height: 32px; flex: none; object-fit: contain; }
.sp-mark svg { display: block; width: 100%; height: 100%; }
.sp-word { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #fff; }
.sp-word-img {
  display: block;
  height: 32px;                /* 192px source ÷ 6: whole-pixel scale, no shimmer */
  width: auto;
  image-rendering: auto;       /* smooth artwork: scale it cleanly */
}
/* the wordmark, copied from the shop's nav */
.sp-wm { display: flex; flex-direction: column; line-height: 1; }
.sp-wm .sp-name {
  font: 700 21px/1 "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: -.01em; color: #fff;
}
.sp-logo:hover .sp-name { color: var(--accent); }
.sp-reg { font-size: 9px; font-weight: 600; vertical-align: super; color: #fff; }
.sp-links { display: flex; align-items: center; gap: 30px; }
.sp-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.sp-link:hover { opacity: .75; }
.sp-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .28); }
.sp-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  background: #1ED760; color: #fff; white-space: nowrap;
  transition: transform .12s, filter .15s;
}
.sp-cta-mark { width: 18px; height: 18px; flex: none; display: block; object-fit: contain; }
.sp-cta:hover { transform: scale(1.04); filter: brightness(1.05); }

/* signed-in state of the top-bar button: avatar + name instead of "Login with Spotify" */
.sp-cta.sp-user {
  padding: 0 16px 0 6px; background: rgba(255, 255, 255, .10); color: #fff;
  max-width: 240px; gap: 10px;
}
.sp-cta.sp-user:hover { transform: none; filter: brightness(1.12); }
.sp-user-av {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  object-fit: cover; display: block; background: #1ED760;
}
.sp-user-av-empty {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #08130a;
}
.sp-user-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
}
@media (max-width: 720px) {
  .sp-cta.sp-user { max-width: 150px; }
  .sp-user-name { font-size: 13px; }
}

/* logged-in state of the key box's login button */
.ck-login-ok {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: #1DB954; color: #08130a;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; line-height: 1;
}
.ck-btn.ck-logged { cursor: default; }

/* account chip dropdown (Sign out) */
.sp-wrap { position: relative; display: inline-flex; }
.sp-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 190px; padding: 6px;
  background: #121212; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
  z-index: 90;
}
.sp-menu-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border: 0; border-radius: 8px;
  background: transparent; color: #ff7a7a; font-weight: 700;
  font-size: 14px; font-family: inherit; letter-spacing: .01em;
  cursor: pointer; text-align: left;
}
.sp-menu-item svg { width: 17px; height: 17px; flex: none; }
.sp-menu-item:hover { background: rgba(255, 122, 122, .14); }
.sp-menu-item:disabled { opacity: .55; cursor: default; }

/* the bar pushes the app down; the rail sticks below it */
.app { min-height: calc(100vh - var(--spnav-h)); }
.rail { top: var(--spnav-h); height: calc(100vh - var(--spnav-h)); }

/* ===== Login modal ===== */
.login-modal {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 20px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px);
}
.login-modal[hidden] { display: none; }
.login-sheet {
  position: relative; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 14px;
  padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
}
.login-close {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font: inherit; font-size: 18px; cursor: pointer;
}
.login-close:hover { color: var(--text); background: var(--surface-2); }

@media (max-width: 760px) {
  .sp-nav { padding: 0 16px; gap: 14px; }
  .sp-links { gap: 16px; }
  .sp-hide-sm { display: none; }
  .sp-sep { display: none; }
}
@media (max-width: 560px) {
  .sp-wm .sp-name { font-size: 19px; }   /* same as the shop on phones */
}

/* ===== Upgrade-key row: 2 cards, opening to 3 once the cookie box appears ===== */
.plan[hidden] { display: none; }
.plans { grid-template-columns: repeat(2, 1fr); }
.plans.has-cookie { grid-template-columns: repeat(3, 1fr); }

/* partner tile, moved below the row and stretched full width */
.partner-wrap { margin-top: 16px; }
.partner-wrap .card-partner { display: flex; width: 100%; min-height: 300px; }

@media (max-width: 1100px) {
  .plans, .plans.has-cookie { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .plans, .plans.has-cookie { grid-template-columns: 1fr; }
}

/* ===== Hero price tag (bottom right of the hero box) ===== */
.hero-price-group {
  position: absolute;
  right: 22px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero-price-was {
  color: var(--muted);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: .8;
}
.hero-price {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 85%, transparent);
  transition: transform .12s, filter .15s;
}
.hero-price:hover { transform: scale(1.04); filter: brightness(1.06); }
@media (max-width: 820px) {
  .hero-price-group { position: static; margin-top: 18px; align-self: flex-start; }
}

/* ===== Mobile / small-screen friendliness ===== */
a, button { -webkit-tap-highlight-color: transparent; }

@media (max-width: 760px) {
  .shelf { flex-wrap: wrap; }
  .step-card { flex: 1 1 calc(50% - 5px); min-width: 0; }
}
@media (max-width: 460px) {
  .step-card { flex: 1 1 100%; }
}
@media (max-width: 680px) {
  input, textarea, select { font-size: 16px; } /* stops iOS zooming into fields on focus */
  .partner-wrap .card-partner { min-height: 240px; }
  .extra-card, .renew-card { padding: 16px; }
  .foot-nav { gap: 14px; }
}
@media (max-width: 420px) {
  .sp-cta { padding: 0 16px; }
  .hero-title-mark { width: .8em; height: .8em; }
}

/* =====================================================================
   PremiumMe night-sky theme, matching the shop home page, in green.
   Appearance only: every rule above is the page's original stylesheet,
   unchanged; the rules below restyle it on top. No markup, no scripts.
   ===================================================================== */
:root {
  /* the original colour names, moved onto the home page's palette (the green stays) */
  --bg: #020204;
  --surface: #0d1424;
  --surface-2: #121b2c;
  --border: rgba(255, 255, 255, .07);
  --border-2: rgba(255, 255, 255, .12);
  --text: #f4f7fb;
  --muted: #a9aeb5;
  --faint: #7d8490;
  --spnav-h: 72px;

  /* the home page's own tokens */
  --bg-3: #0d1424;
  --rule: rgba(255, 255, 255, .07);
  --rule-2: rgba(255, 255, 255, .12);
  --bone: #f4f7fb;
  --dim: #a9aeb5;
  --ink-light: #93f8b8;          /* the home page's green focus colour */
  --display: "Poppins", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --gutter: clamp(16px, 4vw, 40px);

  /* the home page's glow button, in its green ("Spotify Personal Upgrades") version */
  --glow-bg: linear-gradient(to top,
    #9aecb8 1px, #89f0af 2px, #79f1a5 3px, #61ef95 4px, #3ee47b 5px,
    #14c655 6px, #05b345 7px, #03a840 8px, #04963a 9px, #00802f 10px,
    #026627 12px, #0a5e29 13px, #045a24 14px, #07461e 16px,
    #0a371a 18px, #0d2e19 20px, #0f1824 24px, #0a121e 30px,
    #0a111d 34px, #0a111d 100%);
  --glow-shadow:
    inset 0 3px 3px -2px rgba(180, 255, 208, .10),
    inset 1px 0 0 rgba(255, 255, 255, .09),
    inset -1px 0 0 rgba(255, 255, 255, .09),
    0 1px 0 rgba(152, 234, 182, .38),
    1px 0 0 rgba(152, 234, 182, .17), -1px 0 0 rgba(152, 234, 182, .17),
    0 0 8px rgba(60, 235, 124, .10),
    0 2px 5px -3px rgba(90, 255, 151, .45);
  --glow-shadow-big:
    inset 0 3px 3px -2px rgba(180, 255, 208, .10),
    inset 1px 0 0 rgba(255, 255, 255, .09), inset -1px 0 0 rgba(255, 255, 255, .09),
    1px 0 0 rgba(152, 234, 182, .17), -1px 0 0 rgba(152, 234, 182, .17),
    0 0 8px rgba(60, 235, 124, .10), 0 2px 5px -3px rgba(90, 255, 151, .45);
  --glow-shadow-hover:
    inset 0 1px 0 rgba(200, 255, 220, .6),
    inset 1px 0 0 rgba(170, 255, 201, .35),
    inset -1px 0 0 rgba(170, 255, 201, .35),
    0 6px 22px rgba(20, 225, 95, .45);
  --glow-side:
    linear-gradient(90deg, rgba(200, 255, 220, .70), rgba(200, 255, 220, 0) 13px),
    linear-gradient(270deg, rgba(200, 255, 220, .70), rgba(200, 255, 220, 0) 13px);
  --glow-mask: linear-gradient(to top, #000 0, #000 6px, rgba(0, 0, 0, .40) 12px,
    rgba(0, 0, 0, .15) 18px, rgba(0, 0, 0, .09) 24px, rgba(0, 0, 0, .02) 30px, rgba(0, 0, 0, .02) 100%);
  /* the home page's icon tile (the badge's lightning tile), in green */
  --tile: linear-gradient(to top,
    #46c876 0px, #35c76a 2px, #0b9d40 4px, #028432 6px, #006625 8px,
    #055823 10px, #013d17 12px, #032a11 14px, #061125 16px, #090f25 19px,
    #090c1c 23px, #060d16 29px);
  --tile-shadow: inset 1px 0 0 rgba(150, 250, 187, .40), inset -1px 0 0 rgba(150, 250, 187, .52),
    0 0 6px rgba(60, 230, 122, .20), 0 3px 8px -5px rgba(90, 255, 150, .6);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
}

/* ---------- Base ---------- */
html {
  height: auto;
  background: var(--bg);
  scroll-padding-top: 92px; scrollbar-gutter: stable;
  scrollbar-color: #1d3244 var(--bg);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  height: auto; min-height: 100vh;
  background: transparent;
  color: var(--bone);
  font: 400 15px/1.6 var(--display);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--ink-light); outline-offset: 3px; }

/* ---------- Night sky (the home page's, drawn here in CSS): fixed behind the whole page ---------- */
html::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(25, 127, 255, 0) 38%, rgba(25, 127, 255, .042) 54%,
    rgba(25, 127, 255, .052) 68%, rgba(25, 127, 255, .030) 100%);
}
/* the still stars: 150 faint ones and 18 brighter, soft ones */
html::after {
  content: ""; position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none;
  width: 1px; height: 1px; border-radius: 50%;
  box-shadow: 
    56.44vw 38.07vh 0 0 rgba(255, 255, 255, 0.25),
    15.09vw 60.77vh 0 0 rgba(255, 255, 255, 0.11),
    21.84vw 7.26vh 0 0 rgba(255, 255, 255, 0.19),
    6.59vw 21.41vh 0 0 rgba(255, 255, 255, 0.07),
    98.41vw 18.79vh 0 0 rgba(255, 255, 255, 0.09),
    23.67vw 28.9vh 0 0 rgba(255, 255, 255, 0.25),
    42.64vw 62.89vh 0 0 rgba(255, 255, 255, 0.29),
    81.06vw 76.71vh 0 0 rgba(255, 255, 255, 0.07),
    65.26vw 62.61vh 0 0 rgba(255, 255, 255, 0.11),
    83.69vw 6.35vh 0 0 rgba(255, 255, 255, 0.16),
    51.9vw 44.72vh 0 0 rgba(255, 255, 255, 0.09),
    99.78vw 13.69vh 0 0 rgba(255, 255, 255, 0.18),
    97.2vw 65.19vh 0 0 rgba(255, 255, 255, 0.23),
    95.52vw 52.82vh 0 0 rgba(255, 255, 255, 0.3),
    81.69vw 61.23vh 0 0 rgba(255, 255, 255, 0.1),
    6.69vw 48.4vh 0 0 rgba(255, 255, 255, 0.08),
    26.16vw 31.77vh 0 0 rgba(255, 255, 255, 0.14),
    57.19vw 93.54vh 0 0 rgba(255, 255, 255, 0.06),
    37.38vw 0.96vh 0 0 rgba(255, 255, 255, 0.05),
    19.24vw 80.85vh 0 0 rgba(255, 255, 255, 0.21),
    16.22vw 80.76vh 0 0 rgba(255, 255, 255, 0.22),
    13.04vw 98.46vh 0 0 rgba(255, 255, 255, 0.11),
    76.01vw 0.41vh 0 0 rgba(255, 255, 255, 0.21),
    59.01vw 62.75vh 0 0 rgba(255, 255, 255, 0.13),
    81.38vw 80.54vh 0 0 rgba(255, 255, 255, 0.28),
    6.49vw 43.99vh 0 0 rgba(255, 255, 255, 0.1),
    94.5vw 74.49vh 0 0 rgba(255, 255, 255, 0.23),
    75.71vw 88.06vh 0 0 rgba(255, 255, 255, 0.19),
    31.53vw 66.82vh 0 0 rgba(255, 255, 255, 0.22),
    76.22vw 70.48vh 0 0 rgba(255, 255, 255, 0.23),
    30.8vw 92.97vh 0 0 rgba(255, 255, 255, 0.19),
    30.84vw 83.61vh 0 0 rgba(255, 255, 255, 0.22),
    61.35vw 3.62vh 0 0 rgba(255, 255, 255, 0.22),
    25.97vw 69.38vh 0 0 rgba(255, 255, 255, 0.26),
    78.32vw 1.43vh 0 0 rgba(255, 255, 255, 0.05),
    51.78vw 61.11vh 0 0 rgba(255, 255, 255, 0.25),
    93.51vw 37.95vh 0 0 rgba(255, 255, 255, 0.27),
    44.82vw 64.69vh 0 0 rgba(255, 255, 255, 0.28),
    6.39vw 41.81vh 0 0 rgba(255, 255, 255, 0.07),
    64.67vw 77.32vh 0 0 rgba(255, 255, 255, 0.15),
    94.3vw 20.46vh 0 0 rgba(255, 255, 255, 0.14),
    34.06vw 99.12vh 0 0 rgba(255, 255, 255, 0.12),
    21.18vw 77.84vh 0 0 rgba(255, 255, 255, 0.19),
    2.48vw 90.01vh 0 0 rgba(255, 255, 255, 0.15),
    29.77vw 24.38vh 0 0 rgba(255, 255, 255, 0.16),
    11.13vw 39.03vh 0 0 rgba(255, 255, 255, 0.18),
    22vw 29.24vh 0 0 rgba(255, 255, 255, 0.22),
    16.93vw 86.04vh 0 0 rgba(255, 255, 255, 0.07),
    33.76vw 35.34vh 0 0 rgba(255, 255, 255, 0.13),
    94.51vw 48.14vh 0 0 rgba(255, 255, 255, 0.11),
    27.13vw 39.79vh 0 0 rgba(255, 255, 255, 0.06),
    63.5vw 4.54vh 0 0 rgba(255, 255, 255, 0.13),
    28.49vw 18.61vh 0 0 rgba(255, 255, 255, 0.1),
    47.53vw 25.32vh 0 0 rgba(255, 255, 255, 0.23),
    40.8vw 32.84vh 0 0 rgba(255, 255, 255, 0.21),
    66.26vw 7.69vh 0 0 rgba(255, 255, 255, 0.17),
    56.78vw 69.18vh 0 0 rgba(255, 255, 255, 0.09),
    24.12vw 43.44vh 0 0 rgba(255, 255, 255, 0.06),
    46.4vw 2.58vh 0 0 rgba(255, 255, 255, 0.25),
    11.17vw 9.88vh 0 0 rgba(255, 255, 255, 0.22),
    54.49vw 29.14vh 0 0 rgba(255, 255, 255, 0.07),
    66.72vw 16.43vh 0 0 rgba(255, 255, 255, 0.26),
    19.58vw 86.84vh 0 0 rgba(255, 255, 255, 0.06),
    36.35vw 9.37vh 0 0 rgba(255, 255, 255, 0.19),
    76.56vw 55.46vh 0 0 rgba(255, 255, 255, 0.07),
    90.56vw 45.71vh 0 0 rgba(255, 255, 255, 0.23),
    74.5vw 48.55vh 0 0 rgba(255, 255, 255, 0.21),
    86.01vw 64.44vh 0 0 rgba(255, 255, 255, 0.2),
    50.93vw 3.72vh 0 0 rgba(255, 255, 255, 0.08),
    22.01vw 46.76vh 0 0 rgba(255, 255, 255, 0.18),
    68.51vw 73.45vh 0 0 rgba(255, 255, 255, 0.1),
    76.19vw 8.75vh 0 0 rgba(255, 255, 255, 0.06),
    69.3vw 49.74vh 0 0 rgba(255, 255, 255, 0.2),
    65.29vw 34.59vh 0 0 rgba(255, 255, 255, 0.15),
    79.81vw 6.69vh 0 0 rgba(255, 255, 255, 0.08),
    52.81vw 90.23vh 0 0 rgba(255, 255, 255, 0.09),
    25.95vw 97.04vh 0 0 rgba(255, 255, 255, 0.21),
    85.69vw 62.35vh 0 0 rgba(255, 255, 255, 0.07),
    93.89vw 25.97vh 0 0 rgba(255, 255, 255, 0.12),
    16.06vw 89.76vh 0 0 rgba(255, 255, 255, 0.23),
    56.72vw 4.66vh 0 0 rgba(255, 255, 255, 0.23),
    45.93vw 23.5vh 0 0 rgba(255, 255, 255, 0.1),
    19.81vw 20.46vh 0 0 rgba(255, 255, 255, 0.23),
    16.1vw 61.7vh 0 0 rgba(255, 255, 255, 0.11),
    23.54vw 23.29vh 0 0 rgba(255, 255, 255, 0.18),
    87.85vw 93.32vh 0 0 rgba(255, 255, 255, 0.06),
    82.06vw 46.59vh 0 0 rgba(255, 255, 255, 0.17),
    40.33vw 56.05vh 0 0 rgba(255, 255, 255, 0.16),
    99.46vw 24.61vh 0 0 rgba(255, 255, 255, 0.21),
    60.98vw 80.23vh 0 0 rgba(255, 255, 255, 0.13),
    80.18vw 13.46vh 0 0 rgba(255, 255, 255, 0.3),
    94.21vw 39.1vh 0 0 rgba(255, 255, 255, 0.27),
    42.35vw 4.46vh 0 0 rgba(255, 255, 255, 0.26),
    72.59vw 37.88vh 0 0 rgba(255, 255, 255, 0.1),
    55.68vw 48.18vh 0 0 rgba(255, 255, 255, 0.21),
    28.92vw 2.12vh 0 0 rgba(255, 255, 255, 0.2),
    71.32vw 16.24vh 0 0 rgba(255, 255, 255, 0.06),
    55.52vw 28.6vh 0 0 rgba(255, 255, 255, 0.1),
    56.27vw 89.78vh 0 0 rgba(255, 255, 255, 0.15),
    82.81vw 96.04vh 0 0 rgba(255, 255, 255, 0.12),
    39.26vw 6.3vh 0 0 rgba(255, 255, 255, 0.17),
    11.23vw 38.81vh 0 0 rgba(255, 255, 255, 0.16),
    56.47vw 6.86vh 0 0 rgba(255, 255, 255, 0.11),
    6.03vw 4.44vh 0 0 rgba(255, 255, 255, 0.19),
    82.71vw 42.4vh 0 0 rgba(255, 255, 255, 0.29),
    9.12vw 42.47vh 0 0 rgba(255, 255, 255, 0.27),
    59.21vw 60.31vh 0 0 rgba(255, 255, 255, 0.1),
    14.46vw 12.84vh 0 0 rgba(255, 255, 255, 0.27),
    43.26vw 54.56vh 0 0 rgba(255, 255, 255, 0.09),
    1.52vw 89.14vh 0 0 rgba(255, 255, 255, 0.25),
    86.91vw 27.45vh 0 0 rgba(255, 255, 255, 0.29),
    72.35vw 70.72vh 0 0 rgba(255, 255, 255, 0.09),
    42.71vw 1.49vh 0 0 rgba(255, 255, 255, 0.2),
    82.04vw 28.12vh 0 0 rgba(255, 255, 255, 0.13),
    76.63vw 85.24vh 0 0 rgba(255, 255, 255, 0.23),
    45.25vw 38.22vh 0 0 rgba(255, 255, 255, 0.05),
    66.88vw 42.9vh 0 0 rgba(255, 255, 255, 0.17),
    27.28vw 58.34vh 0 0 rgba(255, 255, 255, 0.27),
    96.22vw 86.82vh 0 0 rgba(255, 255, 255, 0.3),
    55.14vw 85.28vh 0 0 rgba(255, 255, 255, 0.13),
    19.27vw 9.03vh 0 0 rgba(255, 255, 255, 0.19),
    57.6vw 33.48vh 0 0 rgba(255, 255, 255, 0.22),
    4.34vw 30.32vh 0 0 rgba(255, 255, 255, 0.09),
    30.31vw 10.7vh 0 0 rgba(255, 255, 255, 0.16),
    85.95vw 60.32vh 0 0 rgba(255, 255, 255, 0.27),
    78.78vw 24.53vh 0 0 rgba(255, 255, 255, 0.13),
    19.33vw 30.49vh 0 0 rgba(255, 255, 255, 0.25),
    68.94vw 89.02vh 0 0 rgba(255, 255, 255, 0.11),
    18.41vw 80.07vh 0 0 rgba(255, 255, 255, 0.18),
    54.94vw 83.94vh 0 0 rgba(255, 255, 255, 0.29),
    0.86vw 97.51vh 0 0 rgba(255, 255, 255, 0.08),
    94.89vw 32.52vh 0 0 rgba(255, 255, 255, 0.22),
    25.2vw 91.71vh 0 0 rgba(255, 255, 255, 0.18),
    49.28vw 1.24vh 0 0 rgba(255, 255, 255, 0.28),
    30.05vw 93.15vh 0 0 rgba(255, 255, 255, 0.2),
    29.15vw 8.04vh 0 0 rgba(255, 255, 255, 0.28),
    68.55vw 38.01vh 0 0 rgba(255, 255, 255, 0.16),
    62.74vw 87.44vh 0 0 rgba(255, 255, 255, 0.13),
    93.5vw 28.86vh 0 0 rgba(255, 255, 255, 0.26),
    22.48vw 15.08vh 0 0 rgba(255, 255, 255, 0.28),
    87.31vw 86.37vh 0 0 rgba(255, 255, 255, 0.21),
    45.19vw 72.39vh 0 0 rgba(255, 255, 255, 0.15),
    92.21vw 93.86vh 0 0 rgba(255, 255, 255, 0.17),
    86.67vw 9.47vh 0 0 rgba(255, 255, 255, 0.12),
    53.74vw 91.5vh 0 0 rgba(255, 255, 255, 0.11),
    24.99vw 67.55vh 0 0 rgba(255, 255, 255, 0.21),
    34.29vw 86.14vh 0 0 rgba(255, 255, 255, 0.23),
    65.73vw 56.62vh 0 0 rgba(255, 255, 255, 0.2),
    51.41vw 4.33vh 0 0 rgba(255, 255, 255, 0.16),
    50.67vw 52.43vh 0 0 rgba(255, 255, 255, 0.07),
    67.16vw 21.33vh 1.2px 0 rgba(255, 255, 255, 0.6),
    42.04vw 16.27vh 1.2px 0 rgba(255, 255, 255, 0.62),
    42.8vw 66.48vh 1.2px 0 rgba(255, 255, 255, 0.68),
    32.54vw 56.79vh 1.2px 0 rgba(255, 255, 255, 0.59),
    89.91vw 62.07vh 1.2px 0 rgba(255, 255, 255, 0.59),
    82.44vw 37.54vh 1.2px 0 rgba(255, 255, 255, 0.55),
    29.15vw 18.3vh 1.2px 0 rgba(255, 255, 255, 0.62),
    87.64vw 79.07vh 1.2px 0 rgba(255, 255, 255, 0.49),
    51.44vw 26.77vh 1.2px 0 rgba(255, 255, 255, 0.55),
    93.33vw 69.68vh 1.2px 0 rgba(255, 255, 255, 0.47),
    34.2vw 43.72vh 1.2px 0 rgba(255, 255, 255, 0.49),
    36.08vw 88.87vh 1.2px 0 rgba(255, 255, 255, 0.6),
    34.04vw 30.97vh 1.2px 0 rgba(255, 255, 255, 0.66),
    36.82vw 31.84vh 1.2px 0 rgba(255, 255, 255, 0.54),
    25.23vw 81.15vh 1.2px 0 rgba(255, 255, 255, 0.52),
    82.67vw 37.52vh 1.2px 0 rgba(255, 255, 255, 0.66),
    1.78vw 68.52vh 1.2px 0 rgba(255, 255, 255, 0.43),
    29.41vw 74.08vh 1.2px 0 rgba(255, 255, 255, 0.43);
}
/* the twinkling stars, in six groups that each keep their own beat */
body::before, body::after, .app::before, .app::after, .content::before, .content::after {
  content: ""; position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none;
  width: 2px; height: 2px; margin: -1px 0 0 -1px; border-radius: 50%;
  opacity: .55;
  animation: nt-twinkle 4s ease-in-out infinite;
}
body::before { box-shadow: 
    51.59vw 36.53vh 0 .5px rgba(255, 255, 255, 0.63),
    51.59vw 36.53vh 7px 2px rgba(200, 228, 255, 0.35),
    50.24vw 7.14vh 0 0 rgba(255, 242, 223, 0.74),
    50.24vw 7.14vh 5px 1px rgba(255, 224, 186, 0.33),
    87.54vw 17.97vh 0 0 rgba(255, 242, 223, 0.69),
    87.54vw 17.97vh 5px 1px rgba(255, 224, 186, 0.31),
    41.75vw 78.74vh 0 0 rgba(255, 242, 223, 0.77),
    41.75vw 78.74vh 5px 1px rgba(255, 224, 186, 0.35),
    17.36vw 34.23vh 0 0 rgba(255, 255, 255, 0.69),
    17.36vw 34.23vh 4px 1px rgba(200, 228, 255, 0.34),
    92.34vw 1.9vh 0 .5px rgba(255, 242, 223, 0.62),
    92.34vw 1.9vh 8px 2px rgba(255, 224, 186, 0.31); animation-duration: 3.4s; animation-delay: -.6s; }
body::after { box-shadow: 
    66.84vw 28.26vh 0 0 rgba(226, 239, 255, 0.75),
    66.84vw 28.26vh 4px 1px rgba(200, 228, 255, 0.38),
    48.24vw 19.91vh 0 0 rgba(255, 255, 255, 0.82),
    48.24vw 19.91vh 4px 1px rgba(200, 228, 255, 0.41),
    10.22vw 71.56vh 0 0 rgba(255, 242, 223, 0.62),
    10.22vw 71.56vh 5px 1px rgba(255, 224, 186, 0.28),
    66.83vw 12.19vh 0 0 rgba(255, 255, 255, 0.87),
    66.83vw 12.19vh 4px 1px rgba(200, 228, 255, 0.44),
    35.32vw 10.41vh 0 .5px rgba(255, 255, 255, 0.8),
    35.32vw 10.41vh 7px 2px rgba(200, 228, 255, 0.44); animation-duration: 4.5s; animation-delay: -2.1s; }
.app::before { box-shadow: 
    55.85vw 61.07vh 0 0 rgba(255, 255, 255, 0.8),
    55.85vw 61.07vh 4px 1px rgba(200, 228, 255, 0.4),
    8.46vw 38.91vh 0 0 rgba(255, 242, 223, 0.86),
    8.46vw 38.91vh 5px 1px rgba(255, 224, 186, 0.39),
    93.06vw 52.09vh 0 0 rgba(226, 239, 255, 0.59),
    93.06vw 52.09vh 4px 1px rgba(200, 228, 255, 0.3),
    98.38vw 5.64vh 0 0 rgba(226, 239, 255, 0.62),
    98.38vw 5.64vh 4px 1px rgba(200, 228, 255, 0.31),
    55.12vw 3.26vh 0 .5px rgba(255, 255, 255, 0.58),
    55.12vw 3.26vh 7px 2px rgba(200, 228, 255, 0.32); animation-duration: 2.9s; animation-delay: -1.3s; }
.app::after { box-shadow: 
    40.76vw 50.05vh 0 0 rgba(226, 239, 255, 0.66),
    40.76vw 50.05vh 4px 1px rgba(200, 228, 255, 0.33),
    6.6vw 12.99vh 0 .5px rgba(255, 255, 255, 0.7),
    6.6vw 12.99vh 7px 2px rgba(200, 228, 255, 0.39),
    46.86vw 1.67vh 0 0 rgba(255, 255, 255, 0.75),
    46.86vw 1.67vh 4px 1px rgba(200, 228, 255, 0.38),
    63.35vw 50vh 0 0 rgba(226, 239, 255, 0.76),
    63.35vw 50vh 4px 1px rgba(200, 228, 255, 0.38),
    5.22vw 37.48vh 0 .5px rgba(255, 255, 255, 0.72),
    5.22vw 37.48vh 7px 2px rgba(200, 228, 255, 0.4); animation-duration: 5.2s; animation-delay: -3.4s; }
.content::before { box-shadow: 
    55.51vw 22.96vh 0 0 rgba(255, 255, 255, 0.81),
    55.51vw 22.96vh 4px 1px rgba(200, 228, 255, 0.4),
    8.63vw 42.86vh 0 .5px rgba(255, 255, 255, 0.62),
    8.63vw 42.86vh 7px 2px rgba(200, 228, 255, 0.34),
    69.38vw 7.11vh 0 .5px rgba(255, 242, 223, 0.89),
    69.38vw 7.11vh 8px 2px rgba(255, 224, 186, 0.44),
    7.32vw 60.76vh 0 .5px rgba(255, 242, 223, 0.73),
    7.32vw 60.76vh 8px 2px rgba(255, 224, 186, 0.37),
    40.48vw 24.12vh 0 0 rgba(255, 255, 255, 0.64),
    40.48vw 24.12vh 4px 1px rgba(200, 228, 255, 0.32); animation-duration: 3.8s; animation-delay: -2.7s; }
.content::after { box-shadow: 
    32.38vw 6.43vh 0 0 rgba(255, 255, 255, 0.67),
    32.38vw 6.43vh 4px 1px rgba(200, 228, 255, 0.34),
    37.57vw 8.84vh 0 .5px rgba(255, 242, 223, 0.65),
    37.57vw 8.84vh 8px 2px rgba(255, 224, 186, 0.32),
    92.22vw 38.07vh 0 .5px rgba(226, 239, 255, 0.74),
    92.22vw 38.07vh 7px 2px rgba(200, 228, 255, 0.41),
    82.35vw 44.96vh 0 .5px rgba(255, 255, 255, 0.86),
    82.35vw 44.96vh 7px 2px rgba(200, 228, 255, 0.47),
    92.1vw 41.8vh 0 0 rgba(255, 255, 255, 0.72),
    92.1vw 41.8vh 4px 1px rgba(200, 228, 255, 0.36); animation-duration: 4.9s; animation-delay: -.2s; }
@keyframes nt-twinkle {
  0%, 100% { opacity: .12; }
  50% { opacity: 1; }
}
/* fewer twinklers on smaller screens, as on the home page */
@media (max-width: 1199px) { .content::before, .content::after { display: none; } }
@media (max-width: 699px) { .app::after { display: none; } }
/* shooting stars: a thin streak with a bright head, now and then, at different places and angles */
.main::before, .main::after {
  content: ""; position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none;
  width: clamp(96px, 11vw, 190px); height: 9px; margin-top: -4.5px;
  transform-origin: calc(100% - 4.5px) 50%;
  background:
    radial-gradient(circle at calc(100% - 4.5px) 50%, #fff 0 1.3px, rgba(190, 235, 255, .7) 1.9px, rgba(190, 235, 255, 0) 4.5px),
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(150, 222, 255, .4) 60%, rgba(255, 255, 255, .95)) 0 50% / calc(100% - 4.5px) 1.5px no-repeat;
  opacity: 0;
  animation: nt-shoot-a 50s cubic-bezier(.25, .1, .35, 1) 3s infinite;
}
.main::after { width: clamp(90px, 10vw, 165px); animation-name: nt-shoot-b; animation-delay: 8s; }
@keyframes nt-shoot-a {
  0% { opacity: 0; transform: translate(44vw, 25vh) rotate(24deg) translateX(0); }
  0.3% { opacity: 1; }
  1.75% { opacity: 1; }
  2.5% { opacity: 0; transform: translate(44vw, 25vh) rotate(24deg) translateX(clamp(200px, 25vw, 540px)); }
  20% { opacity: 0; transform: translate(72vw, 13vh) rotate(154deg) translateX(0); }
  20.264% { opacity: 1; }
  21.54% { opacity: 1; }
  22.2% { opacity: 0; transform: translate(72vw, 13vh) rotate(154deg) translateX(clamp(200px, 30vw, 540px)); }
  40% { opacity: 0; transform: translate(30vw, 35vh) rotate(31deg) translateX(0); }
  40.336% { opacity: 1; }
  41.96% { opacity: 1; }
  42.8% { opacity: 0; transform: translate(30vw, 35vh) rotate(31deg) translateX(clamp(200px, 32vw, 540px)); }
  60% { opacity: 0; transform: translate(66vw, 40vh) rotate(147deg) translateX(0); }
  60.288% { opacity: 1; }
  61.68% { opacity: 1; }
  62.4% { opacity: 0; transform: translate(66vw, 40vh) rotate(147deg) translateX(clamp(200px, 27vw, 540px)); }
  80% { opacity: 0; transform: translate(51vw, 8vh) rotate(22deg) translateX(0); }
  80.276% { opacity: 1; }
  81.61% { opacity: 1; }
  82.3% { opacity: 0; transform: translate(51vw, 8vh) rotate(22deg) translateX(clamp(200px, 29vw, 540px)); }
  100% { opacity: 0; transform: translate(44vw, 25vh) rotate(24deg) translateX(0); }
}
@keyframes nt-shoot-b {
  0% { opacity: 0; transform: translate(70vw, 44vh) rotate(157deg) translateX(0); }
  0.312% { opacity: 1; }
  1.82% { opacity: 1; }
  2.6% { opacity: 0; transform: translate(70vw, 44vh) rotate(157deg) translateX(clamp(200px, 34vw, 540px)); }
  20% { opacity: 0; transform: translate(39vw, 13vh) rotate(27deg) translateX(0); }
  20.288% { opacity: 1; }
  21.68% { opacity: 1; }
  22.4% { opacity: 0; transform: translate(39vw, 13vh) rotate(27deg) translateX(clamp(200px, 31vw, 540px)); }
  40% { opacity: 0; transform: translate(62vw, 30vh) rotate(163deg) translateX(0); }
  40.252% { opacity: 1; }
  41.47% { opacity: 1; }
  42.1% { opacity: 0; transform: translate(62vw, 30vh) rotate(163deg) translateX(clamp(200px, 26vw, 540px)); }
  60% { opacity: 0; transform: translate(28vw, 19vh) rotate(36deg) translateX(0); }
  60.324% { opacity: 1; }
  61.89% { opacity: 1; }
  62.7% { opacity: 0; transform: translate(28vw, 19vh) rotate(36deg) translateX(clamp(200px, 28vw, 540px)); }
  80% { opacity: 0; transform: translate(71vw, 23vh) rotate(150deg) translateX(0); }
  80.288% { opacity: 1; }
  81.68% { opacity: 1; }
  82.4% { opacity: 0; transform: translate(71vw, 23vh) rotate(150deg) translateX(clamp(200px, 33vw, 540px)); }
  100% { opacity: 0; transform: translate(70vw, 44vh) rotate(157deg) translateX(0); }
}

/* ---------- Top bar: the home page's glass pill ---------- */
.sp-nav {
  top: 10px;
  width: min(760px, calc(100% - 2 * var(--gutter)));
  height: 62px; margin: 10px auto 0; padding: 0 9px 0 18px; gap: 8px;
  justify-content: flex-start;
  border-radius: 31px;
  background: rgba(9, 13, 21, .58);
  border: 1px solid rgba(255, 255, 255, .105);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 14px 34px -16px rgba(0, 0, 0, .7);
  font-family: var(--display);
}
.sp-logo { gap: 10px; flex: none; color: #fff; }
.sp-word-img {
  width: 32px; height: 32px; object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 7px rgba(168, 85, 247, .4));
}
.sp-wm::before {
  content: "Digital shop";
  margin: 0 0 3px 1px;
  font-size: 6.5px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.sp-wm .sp-name { font: 900 21px/1 var(--display); letter-spacing: -.01em; color: #fff; }
/* (a copy of the page that has this label in its own markup shows just the one above) */
.sp-kick { display: none; }
.sp-logo:hover .sp-name { color: #fff; }
.sp-links { flex: 1; min-width: 0; gap: 4px; }
.sp-link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 12px;
  font-family: var(--display); font-size: 13px; font-weight: 400; letter-spacing: normal;
  color: rgba(255, 255, 255, .9);
  transition: opacity .25s, background .2s, color .2s;
}
/* the links sit centred between the logo and the button, as on the home page */
.sp-link:first-child, .sp-cta { margin-left: auto; }
.sp-link:hover { opacity: 1; }
.sp-sep { display: none; }

/* ---------- The glow buttons (the home page's, in green) ---------- */
.sp-cta, .btn:not(.ghost), .hero-price, .ck-btn:not(.ck-btn-ghost), .btn-accent {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff; background: var(--glow-bg); box-shadow: var(--glow-shadow);
  text-shadow: 0 1px 2px rgba(0, 20, 30, .5);
  transition: transform .25s, box-shadow .25s, filter .25s;
}
.sp-cta::before, .btn:not(.ghost)::before, .hero-price::before, .ck-btn:not(.ck-btn-ghost)::before, .btn-accent::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--glow-side);
  -webkit-mask: var(--glow-mask); mask: var(--glow-mask);
}
/* the bar's button also carries the thin streak of light across its top */
.sp-cta::after {
  content: ""; position: absolute; left: 22%; right: 38%; top: .8px; height: 1.9px; z-index: -1;
  filter: blur(.55px); pointer-events: none;
  background: linear-gradient(90deg, rgba(120, 255, 169, 0) 0%, rgba(120, 255, 169, .58) 34%,
    rgba(160, 255, 195, .74) 50%, rgba(120, 255, 169, .58) 66%, rgba(120, 255, 169, 0) 100%);
}
/* the second choice is glass */
.btn.ghost, .ck-btn-ghost {
  position: relative; border: 0;
  color: #fff; background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--rule-2); text-shadow: none;
  transition: background .2s, box-shadow .2s;
}
/* the old hover effects give way to the home page's (below, for real pointers only) */
.sp-cta:hover, .btn:hover, .hero-price:hover, .btn-accent:hover, .btn-accent:active, .soc-badge:hover { transform: none; filter: none; }
.btn.ghost:hover, .ck-btn-ghost:hover { background: rgba(255, 255, 255, .04); border-color: transparent; color: #fff; }

.sp-cta {
  height: 42px; padding: 0 12px 0 15px; gap: 8px; border-radius: 14px;
  font: 500 13.5px/1 var(--display); letter-spacing: -.005em;
}

/* ---------- Hero ---------- */
.hero {
  gap: 24px; padding: 20px;
  border: 1px solid rgba(255, 255, 255, .10); border-radius: 24px;
  background:
    radial-gradient(80% 110% at 0% 0%, rgba(30, 215, 96, .07), rgba(30, 215, 96, 0) 62%),
    linear-gradient(180deg, rgba(16, 20, 34, .9), rgba(8, 11, 19, .96));
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.hero-art {
  width: 100%;   /* stays inside its column when the text beside it is the taller side */
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--bg-3);
}
.hero-text { padding: 10px 8px 10px 4px; }
.eyebrow {
  margin: 0 0 8px;
  font: italic 600 clamp(15px, 1.4vw, 18px)/1.2 var(--serif);
  letter-spacing: normal; text-transform: none;
  color: var(--ink-light);
}
.hero-title {
  margin: 0 0 16px;
  font-family: var(--display); font-weight: 900; line-height: 1.03;
  letter-spacing: -.004em; word-spacing: .14em; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 34px rgba(130, 180, 255, .22);
}
.hero-sub {
  margin: 0 0 24px;
  font-size: clamp(14.5px, 1.15vw, 16px); line-height: 1.6;
  color: var(--dim);
}
.hero-actions { gap: 12px; }
.btn {
  height: 54px; padding: 0 30px; border-radius: 14px;
  font: 500 16px/1 var(--display); letter-spacing: -.01em;
}
.btn:not(.ghost) { box-shadow: var(--glow-shadow-big); }
.hero-price-group { right: 24px; bottom: 22px; gap: 14px; }
.hero-price-was {
  font: 700 17px/1 var(--display); letter-spacing: -.01em;
  color: var(--faint); opacity: 1;
}
.hero-price {
  height: 54px; padding: 0 24px; border-radius: 14px;
  font: 800 20px/1 var(--display); letter-spacing: -.02em;
}

/* ---------- Chips ---------- */
.chips { gap: 8px; }
.chip {
  height: 42px; padding: 0 17px; border-radius: 999px;
  background: rgba(255, 255, 255, .035); border: 1px solid var(--rule-2);
  color: rgba(255, 255, 255, .82);
  font: 500 13px/1 var(--display);
  transition: color .15s, border-color .15s, background .15s;
}
.chip:hover { background: rgba(255, 255, 255, .035); }
/* every chip in the row keeps the green look, also after the page script moves
   "is-active" to the chip that was clicked last */
.chip.is-active, .chip.is-active:hover, .chips .chip, .chips .chip:hover {
  background: linear-gradient(to top, rgba(97, 239, 149, .55) 0, rgba(20, 198, 85, .32) 3px, rgba(4, 90, 35, .38) 10px, rgba(10, 17, 29, .9) 26px);
  border-color: rgba(120, 255, 169, .5); color: #fff; font-weight: 500;
  box-shadow: 0 0 0 1px rgba(56, 236, 122, .12), 0 2px 5px -3px rgba(90, 255, 150, .55);
}

/* ---------- How it works ---------- */
.step-card {
  column-gap: 11px; padding: 18px;
  border-radius: 18px;
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .85);
}
.ck-badge, .cr-badge {
  border: 0;
  background: var(--tile); box-shadow: var(--tile-shadow);
  color: rgba(200, 255, 222, .92);
}
/* the step numbers: plain green numbers (no box), on the same line as their titles */
.step-num {
  display: block; width: auto; height: auto; min-width: .62em;
  align-self: baseline;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  font: 800 19px/1.3 var(--display); color: var(--accent);
}
.step-title { align-self: baseline; padding-top: 0; font: 700 15px/1.3 var(--display); letter-spacing: -.01em; color: #fff; }
.step-sub { font-size: 13px; line-height: 1.55; color: var(--dim); }

/* ---------- What's included ---------- */
/* (the icons in this row stay plain green icons, without the tiles the other icons sit in) */
.feature h3 { font: 700 16px/1.25 var(--display); letter-spacing: -.01em; color: #fff; }
.feature p { line-height: 1.6; color: var(--dim); }
/* this row lines up with the 4 steps: the same columns and gaps at every width, and each item's
   icon and text start where a step's number and text start (its 1px border + 18px padding) */
.features { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 10px; }
.feature { padding: 0 19px; }
@media (max-width: 760px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .features { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cards: the home page's glass panels ---------- */
.plan, .extra-card, .renew-card {
  border: 1px solid var(--rule-2); border-radius: 22px;
  background: var(--glass);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .85);
}
.ck-badge, .cr-badge { width: 40px; height: 40px; border-radius: 11px; }
.ck-title, .cr-title {
  font: 800 21px/1.15 var(--display); letter-spacing: -.015em; text-transform: none;
  color: #fff;
}
.cr-sub, .extra-sub { line-height: 1.6; color: var(--dim); }
.ck-field {
  border: 1px solid var(--rule-2); border-radius: 14px;
  background: rgba(255, 255, 255, .035); color: var(--faint);
  transition: border-color .15s, box-shadow .15s;
}
.ck-field:focus-within { border-color: rgba(56, 236, 122, .6); box-shadow: 0 0 0 3px rgba(56, 236, 122, .12); }
.ck-field input, .ck-field textarea { color: #fff; }
.ck-note {
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(56, 236, 122, .22);
  background: rgba(56, 236, 122, .06);
}
.ck-note svg { color: var(--ink-light); }
.ck-note p { line-height: 1.55; color: var(--dim); }
.ck-note strong { margin-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-light); }
.ck-btn {
  min-height: 54px; padding: 0 18px; gap: 12px; border-radius: 15px;
  font: 500 15px/1 var(--display); letter-spacing: -.005em; text-transform: none;
}
.ck-btn-ghost { gap: 9px; }
.ck-link { color: var(--ink-light); text-underline-offset: 3px; }
.ck-cookie { border-top-color: var(--rule); }
.renew-wrap { margin-top: 16px; }
#ck-renew-newfields .ck-field + .ck-field { margin-top: 10px; }

/* the partner tile keeps its moving covers, framed like the other panels */
.plan.card-partner { padding: 0; background: var(--bg-3); }
.cp-overlay {
  padding: 24px;
  background: linear-gradient(0deg, rgba(2, 3, 8, .86) 0%, rgba(2, 3, 8, .6) 45%, rgba(2, 3, 8, 0));
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 18px rgba(0, 0, 0, .55);
}
.cp-eyebrow {
  font: italic 600 16px/1.2 var(--serif); letter-spacing: normal; text-transform: none;
  color: var(--ink-light);
}
.cp-name { font: 900 30px/1.05 var(--display); letter-spacing: -.01em; }
.cp-visit { font: 500 13px/1 var(--display); }

/* need help: green logos with their shapes cut out to the page colour, softly lit */
.soc-badge {
  width: 44px; height: 44px; color: var(--bg);
  filter: drop-shadow(0 0 12px rgba(30, 215, 96, .28));
  transition: transform .15s, filter .15s;
}
.soc-badge:hover { filter: drop-shadow(0 0 12px rgba(30, 215, 96, .28)); }
.soc-badge svg { width: 21px; height: 21px; }
.soc-og { font: 800 15px/1 var(--display); letter-spacing: -.02em; }
.soc-note { font-weight: 500; color: var(--ink-light); }

/* ---------- Footer: the home page's ---------- */
.site-footer {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-areas: "logo name name" "copy copy nav";
  align-items: center; gap: 12px 10px;
  padding: 30px max(24px, calc((100% - 1432px) / 2)) 26px;
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0));
  color: var(--faint);
}
.site-footer::before {
  content: ""; grid-area: logo; width: 32px; height: 32px;
  background: url("wboty-logo.png") center / contain no-repeat;
  filter: drop-shadow(0 0 7px rgba(168, 85, 247, .4));
}
.site-footer::after { content: "PremiumMe.cc"; content: "PremiumMe.cc" / ""; grid-area: name; font: 900 22px/1 var(--display); letter-spacing: -.01em; color: #fff; }
.foot-copy { grid-area: copy; justify-self: start; margin: 0 22px 0 0; text-align: left; font-size: 12.5px; font-weight: 400; line-height: 1.6; color: var(--faint); }
.foot-nav { grid-area: nav; justify-self: end; flex-wrap: wrap; gap: 0 4px; margin-right: -10px; }
.foot-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none;
  color: var(--dim);
  transition: color .15s;
}
.foot-nav a:hover { opacity: 1; }

/* ---------- Log in (the home page's order-form dialog) ---------- */
.login-modal {
  padding: 12px;
  background: rgba(2, 3, 8, .78);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.login-sheet {
  max-width: 440px; padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, .11); border-radius: 26px;
  background: linear-gradient(180deg, #0f1624, #090d16 55%);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
  animation: nt-sheet-in .22s ease-out;
}
.login-sheet::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(120, 255, 169, .75), transparent);
}
@keyframes nt-sheet-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.login-close {
  top: 14px; right: 14px; width: 44px; height: 44px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--rule-2); color: var(--dim);
  font-size: 15px;
  transition: background .15s, color .15s, border-color .15s;
}
.login-close:hover { color: var(--dim); background: rgba(255, 255, 255, .04); }
.login-title { padding-right: 52px; font: 800 30px/1.04 var(--display); letter-spacing: -.025em; color: #fff; }
/* the title reads "Log in with [Spotify]", like the button that opens it */
.login-title::after {
  content: "with";
  display: inline-block;
  margin-left: .26em; padding-right: 1.14em;
  background: url("logo.png") no-repeat right center / .92em .92em;
}
.login-sub { margin: -4px 0 6px; font-size: 14.5px; line-height: 1.6; color: var(--dim); }
.in {
  border: 1px solid var(--rule-2); border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  transition: border-color .15s, box-shadow .15s;
}
.in:focus-within { border-color: rgba(56, 236, 122, .6); box-shadow: 0 0 0 3px rgba(56, 236, 122, .12); }
/* the boxes take their width from the dialog, not from their own 20-character default,
   so the dialog always fits a phone screen */
.in input { width: 100%; color: #fff; }
.login-sheet { min-width: 0; }
.btn-accent {
  min-height: 48px; padding: 0 20px; border-radius: 14px;
  font: 500 15px/1 var(--display); letter-spacing: -.005em;
}
.login-status { color: var(--dim); }
.login-status.is-error { color: #ffb3bb; }
.login-resend { font-weight: 500; color: var(--ink-light); }

/* ---------- Hover, only where a real pointer can hover (as on the home page) ---------- */
@media (hover: hover) {
  .sp-link:hover { opacity: .65; color: #fff; }
  .sp-cta:hover, .btn:not(.ghost):hover, .hero-price:hover, .ck-btn:not(.ck-btn-ghost):not([disabled]):hover, .btn-accent:hover {
    transform: translateY(-1px); filter: brightness(1.12); box-shadow: var(--glow-shadow-hover);
  }
  .btn.ghost:hover, .ck-btn-ghost:not([disabled]):hover { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(120, 255, 169, .45); }
  .chip:hover { color: #fff; border-color: rgba(120, 255, 169, .5); }
  .soc-badge:hover { transform: translateY(-1px); filter: drop-shadow(0 0 14px rgba(30, 215, 96, .45)) brightness(1.06); }
  .foot-nav a:hover { color: #fff; }
  .login-close:hover { color: #fff; background: rgba(56, 236, 122, .14); border-color: rgba(120, 255, 169, .5); }
  .card-partner:hover .cp-name { text-decoration-thickness: 2px; }
}

/* ---------- Smaller screens ---------- */
/* where the text column is too narrow for the buttons and the price side by side, the price
   goes under the buttons (as it already does on phones) instead of sitting on top of them */
@media (max-width: 1100px) {
  .hero-price-group { position: static; margin-top: 18px; align-self: flex-start; }
}
@media (max-width: 820px) {
  .site-footer { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "logo name" "copy copy" "nav nav"; gap: 10px 10px; }
  .foot-copy { margin: 2px 0 0; }
  .foot-nav { justify-self: start; margin: 0 0 0 -10px; }
}
@media (max-width: 760px) {
  .sp-nav { top: 8px; height: 58px; margin-top: 8px; padding: 0 7px 0 16px; gap: 8px; }
  .sp-hide-sm { display: none; }
  .hero { border-radius: 20px; }
  .hero-title { line-height: 1.07; letter-spacing: -.01em; word-spacing: .08em; }
  .btn { height: 52px; padding: 0 26px; }
}
@media (max-width: 680px) {
  .ck-field input, .ck-field textarea, .in input { font-size: 16px; } /* no zoom-in on iPhone */
  .site-footer { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 560px) {
  .sp-wm::before { display: none; }
  .sp-wm .sp-name { font-size: 19px; }
  .login-sheet { padding: 20px 18px 18px; border-radius: 22px; }
}
@media (max-width: 420px) {
  .sp-cta { padding: 0 10px 0 13px; }
}

/* ---------- Reduced motion: the stars shine but stay still ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .app::before, .app::after, .content::before, .content::after { animation: none; }
  .main::before, .main::after { display: none; }
  .login-sheet { animation: none; }
  .sp-cta, .btn, .hero-price, .ck-btn, .btn-accent, .soc-badge, .chip, .sp-link { transition: none; }
}

/* ---------- How it works: its own little page, opened by the "How it works" button ----------
   (the section is hidden until the button is pressed; how-it-works.js flips its "hidden"
   attribute and marks the page body data-view="how", so nothing here sets display on the
   section itself) */
.how-panel { margin: 18px 0 0; }
/* while the How it works page is open, everything else in the page body steps aside;
   the top bar, the two buttons and the footer stay */
.content[data-view="how"] > :not(.chips):not(.how-panel) { display: none !important; }
.how-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.how-box {
  position: relative; overflow: hidden;
  min-height: 200px; padding: 26px 28px 28px;
  border: 1px solid var(--rule-2); border-radius: 22px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(30, 215, 96, .07), transparent 60%),
    var(--glass);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .85);
}
/* the same green hairline the log-in pop-up has along its top */
.how-box::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(120, 255, 169, .6), transparent);
}
/* plain green numbers, like the 4 steps */
.how-num {
  display: block; margin: 0 0 16px;
  font: 800 30px/1 var(--display); letter-spacing: -.02em; color: var(--accent);
}
.how-title { margin: 0 0 10px; font: 800 22px/1.2 var(--display); letter-spacing: -.015em; color: #fff; }
.how-text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--dim); }
@media (prefers-reduced-motion: no-preference) {
  .how-panel:not([hidden]) .how-box { animation: nt-how-in .34s ease-out both; }
  .how-panel:not([hidden]) .how-box:nth-child(2) { animation-delay: .05s; }
  .how-panel:not([hidden]) .how-box:nth-child(3) { animation-delay: .1s; }
  .how-panel:not([hidden]) .how-box:nth-child(4) { animation-delay: .15s; }
}
@keyframes nt-how-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .how-box { min-height: 0; padding: 22px 20px 24px; border-radius: 20px; }
  .how-num { margin-bottom: 12px; font-size: 26px; }
  .how-title { font-size: 20px; }
}

/* ---------- method switch on the cookie card (paste sp_dc vs email code) ---------- */
.ck-methods { display: flex; gap: 8px; margin: 0 0 12px; }
.ck-methods .ck-btn { flex: 1; margin-top: 0; justify-content: center; min-height: 44px; font-size: 14px; }
.ck-method { opacity: .62; }
.ck-method.is-on { opacity: 1; }
.ck-method.is-on:not(.ck-btn-ghost) { box-shadow: 0 0 0 1px rgba(30, 215, 96, .55) inset; }

/* ---------- Cloudflare Turnstile slot (invisible; kept out of the layout) ---------- */
.ts-slot { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }