/* ============================================================
   MODERN PLAYER — modernplayer.tv
   Black and gold, high contrast, hard edges.
   No frameworks, no web fonts, nothing to wait for.
   ============================================================ */

:root {
  --black:      #050506;
  --panel:      #0b0b0e;
  --panel-2:    #101014;
  --line:       rgba(255,255,255,.10);
  --line-2:     rgba(255,255,255,.18);
  --gold:       #e9b949;
  --gold-hi:    #f9e3ab;
  --gold-deep:  #a2761c;
  --gold-line:  rgba(233,185,73,.38);
  --gold-glow:  rgba(233,185,73,.14);
  --text:       #ffffff;
  --body:       #b9b9c4;
  --dim:        #75757f;
  --r:          14px;
  --r-lg:       20px;
  --max:        1180px;
  --ease:       cubic-bezier(.16,.84,.44,1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--black);
  color: var(--body);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
               Roboto, Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--gold-hi); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { color: var(--text); line-height: 1.1; letter-spacing: -.025em; font-weight: 700; }
h1 { font-size: clamp(38px, 6.6vw, 68px); }
h2 { font-size: clamp(28px, 4.4vw, 44px); }
h3 { font-size: 19px; letter-spacing: -.01em; }

.gold {
  background: linear-gradient(100deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 18px;
}

.lede { font-size: clamp(15px, 1.9vw, 18.5px); color: var(--body); max-width: 640px; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

/* ---------------- header ---------------- */

header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(5,5,6,.82);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line);
}

.nav { display: flex; align-items: center; gap: 28px; height: 74px; }
.brand img { height: 38px; width: auto; }

/* ------------------------------------------------------------
   THE HEADER

   Logo on the left, three lines on the right, at every width.
   Eight links strung across the top made the page look like a
   directory; one button makes it look like a product, and the
   menu itself has more room to breathe as a drawer than it ever
   had as a row.
   ------------------------------------------------------------ */

.menu { display: none; }

.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.burger {
  display: flex; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,.02); cursor: pointer;
  align-items: center; justify-content: center;
  transition: background .2s var(--ease), border-color .2s var(--ease);
  position: relative; z-index: 82;
}
.burger:hover { background: rgba(255,255,255,.06); border-color: var(--line-2); }
.burger span { display: block; width: 18px; height: 1.8px; background: var(--text); position: relative;
  transition: background .2s var(--ease); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.8px; background: var(--text);
  transition: transform .26s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger.open span { background: transparent; }
.burger.open span::before { transform: translateY(6px) rotate(45deg); }
.burger.open span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---- the off-canvas menu ----

   Two elements, one job each: a scrim that fades, a panel that
   slides. Both sit above everything, including the header — the
   way out is the cross inside the panel, so nothing important is
   ever left behind the overlay.

   VISIBILITY NEVER DEPENDS ON AN ANIMATION.
   The first version staggered the links in with `animation:
   menuItem .5s var(--ease) forwards`. A var() inside an animation
   shorthand is not something every engine substitutes reliably —
   Safari did not — and when the animation never ran, the links
   stayed at opacity 0 and the panel looked like an empty black
   sheet. Everything below moves with transitions on properties
   whose OPEN state is the visible one, so the worst a broken
   transition can do now is skip the movement.                   */

.nav-scrim {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: .32s, 0s;
  transition-timing-function: cubic-bezier(.16,.84,.44,1), linear;
  transition-delay: 0s, .32s;
}
.nav-scrim.show { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }

.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 999;
  width: min(390px, 88vw);
  display: flex; flex-direction: column;
  padding: 0 0 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid var(--line-2);
  background:
    radial-gradient(620px 380px at 100% 0%, rgba(233,185,73,.10), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)),
    rgba(8,8,11,.97);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  box-shadow: -34px 0 80px rgba(0,0,0,.62);

  transform: translateX(100%);
  visibility: hidden;
  transition-property: transform, visibility;
  transition-duration: .38s, 0s;
  transition-timing-function: cubic-bezier(.16,.84,.44,1), linear;
  transition-delay: 0s, .38s;
}
.mobile-menu.show { transform: translateX(0); visibility: visible; transition-delay: 0s, 0s; }

/* ---- panel header: logo, and the way out ---- */

.nav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 20px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
  background: rgba(8,8,11,.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.nav-head img { height: 30px; width: auto; }
.nav-x {
  width: 40px; height: 40px; flex: none; cursor: pointer;
  border-radius: 11px; border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  display: grid; place-items: center;
  transition: background .2s, border-color .2s, transform .2s;
}
.nav-x:hover { background: rgba(255,255,255,.08); border-color: var(--line-2); transform: rotate(90deg); }
.nav-x svg { width: 17px; height: 17px; stroke: var(--text); fill: none; stroke-width: 2; stroke-linecap: round; }

/* ---- links ---- */

.mobile-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 22px;
  color: var(--body);
  font-size: 17px; font-weight: 550; letter-spacing: -.015em;
  border-bottom: 1px solid rgba(255,255,255,.05);

  /* Open is the visible state. */
  opacity: 0; transform: translateX(22px);
  transition-property: opacity, transform, color, background;
  transition-duration: .42s, .42s, .18s, .18s;
  transition-timing-function: cubic-bezier(.16,.84,.44,1);
}
.mobile-menu.show a { opacity: 1; transform: translateX(0); }
.mobile-menu a:hover { color: var(--text); background: rgba(255,255,255,.045); }
.mobile-menu a.active { color: var(--gold); }
.mobile-menu a.active::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none;
  box-shadow: 0 0 0 4px rgba(233,185,73,.14);
}

/* Staggered on the way in, instant on the way out — a menu should
   close faster than it opens. */
.mobile-menu.show a:nth-of-type(1) { transition-delay: .06s; }
.mobile-menu.show a:nth-of-type(2) { transition-delay: .10s; }
.mobile-menu.show a:nth-of-type(3) { transition-delay: .14s; }
.mobile-menu.show a:nth-of-type(4) { transition-delay: .18s; }
.mobile-menu.show a:nth-of-type(5) { transition-delay: .22s; }
.mobile-menu.show a:nth-of-type(6) { transition-delay: .26s; }
.mobile-menu.show a:nth-of-type(7) { transition-delay: .30s; }
.mobile-menu.show a:nth-of-type(8) { transition-delay: .34s; }
.mobile-menu.show a:nth-of-type(9) { transition-delay: .40s; }

.mobile-menu .btn {
  margin: 26px 22px 0;
  height: auto; padding: 17px; font-size: 15.5px; border-radius: 14px;
  border-bottom: 0;
  justify-content: center;
}
.mobile-menu .btn::after { content: none; }

/* The page is frozen by fixing the body in place — see app.js.
   `overflow: hidden` alone is not enough on iOS Safari. */
body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .nav-scrim, .mobile-menu a { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 26px; border-radius: 100px;
  font-size: 14.5px; font-weight: 650; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 55%, var(--gold-deep));
  color: #17110044; color: #191100;
  box-shadow: 0 0 0 1px rgba(233,185,73,.45), 0 10px 30px -12px rgba(233,185,73,.55);
}
.btn-gold:hover { color: #191100; box-shadow: 0 0 0 1px rgba(233,185,73,.7), 0 14px 38px -12px rgba(233,185,73,.75); transform: translateY(-2px); }

.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--gold-line); color: var(--gold-hi); transform: translateY(-2px); }

.btn-sm { height: 40px; padding: 0 18px; font-size: 13.5px; }
.btn-block { width: 100%; }

/* ---------------- hero ---------------- */

.hero { position: relative; padding: 104px 0 92px; overflow: hidden; }

.hero::before {
  content: ""; position: absolute; inset: -30% 0 auto 50%;
  width: 1100px; height: 780px; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--gold-glow), transparent 72%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }

.hero-logo { width: min(380px, 78vw); margin: 0 auto 34px; }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 16px; border-radius: 100px;
  border: 1px solid var(--gold-line); background: rgba(233,185,73,.07);
  color: var(--gold-hi); font-size: 12.5px; font-weight: 600;
  margin-bottom: 26px;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }

.hero .cta { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin-top: 64px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}
.stat { background: var(--panel); padding: 26px 18px; text-align: center; }
.stat b { display: block; font-size: 27px; font-weight: 700; color: var(--text); letter-spacing: -.03em; }
.stat span { font-size: 12px; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- sections ---------------- */

section { padding: 92px 0; position: relative; }
section + section { border-top: 1px solid var(--line); }
.section-head { margin-bottom: 52px; }

/* ---------------- platform cards ---------------- */

.platforms { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

.plat {
  position: relative; display: block;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px 22px 22px;
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.plat:hover { transform: translateY(-4px); border-color: var(--gold-line); background: var(--panel-2); }

.plat .ico {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(233,185,73,.10); border: 1px solid var(--gold-line);
  color: var(--gold); font-size: 19px;
}
.plat .name { color: var(--text); font-weight: 650; font-size: 16.5px; margin-bottom: 5px; }
.plat .note { font-size: 13px; color: var(--dim); line-height: 1.5; }

.tag {
  position: absolute; top: 16px; right: 16px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px;
}
.tag.live { background: rgba(233,185,73,.14); color: var(--gold-hi); border: 1px solid var(--gold-line); }
.tag.soon { background: rgba(255,255,255,.06); color: var(--dim); border: 1px solid var(--line); }

/* ---------------- feature cards ---------------- */

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

.feat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 30px 26px;
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.feat:hover { border-color: var(--gold-line); transform: translateY(-3px); }
.feat .n {
  font-size: 12px; font-weight: 700; color: var(--gold);
  letter-spacing: .1em; margin-bottom: 16px; display: block;
}
.feat h3 { margin-bottom: 9px; }
.feat p { font-size: 14.5px; color: var(--body); }

/* ---------------- plans ---------------- */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; align-items: start; }

.plan {
  position: relative; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px 30px; transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.plan:hover { transform: translateY(-4px); border-color: var(--line-2); }

.plan.best {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, rgba(233,185,73,.055), transparent 55%), var(--panel);
  box-shadow: 0 24px 60px -34px rgba(233,185,73,.5);
}
.plan.best:hover { border-color: rgba(233,185,73,.6); }

.plan .flag {
  position: absolute; top: -12px; left: 30px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 100px; color: #191100;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
}

.plan .pname { color: var(--text); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.plan .psub { font-size: 13px; color: var(--dim); margin-top: 3px; }
.plan .price { font-size: 46px; font-weight: 750; color: var(--text); letter-spacing: -.045em; margin: 20px 0 2px; }
.plan .price small { font-size: 16px; font-weight: 600; color: var(--dim); letter-spacing: 0; }
.plan .per { font-size: 13px; color: var(--dim); margin-bottom: 26px; }

.plan ul { list-style: none; margin-bottom: 28px; }
.plan li { position: relative; padding: 8px 0 8px 27px; font-size: 14.5px; color: var(--body); }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: 15px;
  width: 11px; height: 6px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.plan li.off { color: var(--dim); }
.plan li.off::before { border-color: rgba(255,255,255,.16); }

/* ---------------- notice ---------------- */

.notice {
  border: 1px solid var(--gold-line); border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(233,185,73,.08), rgba(233,185,73,.02));
  padding: 30px 32px;
}
.notice h3 { color: var(--gold-hi); margin-bottom: 10px; }
.notice p { color: var(--body); font-size: 15px; }
.notice p + p { margin-top: 10px; }

.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 28px; }
.rule { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 24px 22px; }
.rule h4 { font-size: 15px; margin-bottom: 7px; }
.rule p { font-size: 13.5px; color: var(--dim); }

/* ---------------- steps ---------------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; counter-reset: s; }
.step {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); padding: 28px 24px; counter-increment: s;
}
.step::before {
  content: counter(s); display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 16px;
  background: rgba(233,185,73,.12); border: 1px solid var(--gold-line);
  color: var(--gold); font-weight: 700; font-size: 14px;
}
.step h3 { margin-bottom: 8px; font-size: 17px; }
.step p { font-size: 14px; color: var(--dim); }

/* ---------------- faq ---------------- */

.faq { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--panel); }
.qa + .qa { border-top: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; padding: 22px 26px;
  color: var(--text); font-weight: 600; font-size: 16px;
  display: flex; align-items: center; gap: 14px;
  transition: background .18s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { background: rgba(255,255,255,.028); }
.qa summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 9px; height: 9px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translateY(-2px); transition: transform .22s var(--ease);
}
.qa[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.qa .a { padding: 0 26px 24px; font-size: 15px; color: var(--body); }
.qa .a p + p { margin-top: 10px; }

/* ---------------- activation form ---------------- */

.panel {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); padding: 38px 34px;
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.field input, .field select {
  width: 100%; height: 52px; padding: 0 18px;
  background: var(--black); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 12px;
  font-size: 16px; font-family: inherit;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder { color: var(--dim); }
.field input:focus, .field select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(233,185,73,.16);
}
.field input.code {
  letter-spacing: .34em; text-transform: uppercase;
  font-weight: 700; font-size: 20px; text-align: center;
}
/* Inline verdict under a field. */
.check { min-height: 18px; margin-top: 9px; font-size: 13px; color: var(--dim); }
.check.wait { color: var(--dim); }
.check.good { color: var(--gold-hi); }
.check.bad  { color: #ff9d9d; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.field input.mac { letter-spacing: .16em; font-size: 18px; }

/* ---- progress dots ---- */

.dots { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.dot-step {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--dim); white-space: nowrap;
}
.dot-step b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line-2); font-size: 11px; font-weight: 700;
  transition: all .2s var(--ease);
}
.dot-step.on { color: var(--text); }
.dot-step.on b {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  border-color: transparent; color: #191100;
}
.dot-line { flex: 1; min-width: 14px; height: 1px; background: var(--line); }

/* ---- package chooser ---- */

.pkgs { display: grid; gap: 10px; }
.pkg {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px;
  align-items: center; text-align: left; cursor: pointer;
  background: var(--black); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 16px 18px;
  font-family: inherit; transition: all .18s var(--ease);
}
.pkg:hover { border-color: var(--line-2); background: var(--panel-2); }
.pkg-name { color: var(--text); font-size: 15.5px; font-weight: 650; }
.pkg-blurb { grid-column: 1; font-size: 12.5px; color: var(--dim); }
.pkg-price {
  grid-row: 1 / span 2; grid-column: 2;
  color: var(--text); font-size: 20px; font-weight: 700; letter-spacing: -.03em;
}
.pkg.on {
  border-color: var(--gold); background: rgba(233,185,73,.06);
  box-shadow: 0 0 0 1px var(--gold-line);
}
.pkg.on .pkg-price { color: var(--gold-hi); }
.pkg-skeleton { font-size: 13.5px; color: var(--dim); padding: 16px 0; }

/* ---- review summary ---- */

.summary { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.srow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 18px; font-size: 14px; color: var(--dim);
  border-bottom: 1px solid var(--line);
}
.srow:last-child { border-bottom: 0; }
.srow b { color: var(--text); font-weight: 600; text-align: right; word-break: break-all; }
.srow.total { background: rgba(233,185,73,.06); }
.srow.total b { font-size: 22px; letter-spacing: -.03em; color: var(--gold-hi); }

/* ---- status pill ---- */

.status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 100px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.active  { color: var(--gold-hi); border-color: var(--gold-line); background: rgba(233,185,73,.1); }
.status.pending { color: #9fd0ff; border-color: rgba(120,180,255,.35); background: rgba(120,180,255,.09); }
.status.bad     { color: #ff9d9d; border-color: rgba(255,110,110,.35); background: rgba(255,110,110,.08); }
.status.off     { color: var(--dim); }

/* ---- tables (admin) ---- */

.scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; white-space: nowrap; }
.tbl th {
  text-align: left; padding: 13px 15px; color: var(--gold);
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); font-weight: 700; background: var(--panel-2);
  position: sticky; top: 0;
}
.tbl td { padding: 13px 15px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--body); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: rgba(255,255,255,.022); }
.tbl .empty { text-align: center; padding: 46px; color: var(--dim); white-space: normal; }

.chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px; border: 1px solid var(--line); color: var(--dim);
}
.chip.paid, .chip.active { background: rgba(233,185,73,.13); color: var(--gold-hi); border-color: var(--gold-line); }
.chip.pending { background: rgba(120,180,255,.1); color: #9fd0ff; border-color: rgba(120,180,255,.3); }
.chip.failed, .chip.refunded, .chip.suspended { background: rgba(255,110,110,.09); color: #ff9d9d; border-color: rgba(255,110,110,.3); }
.chip.expired { background: rgba(255,255,255,.05); }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.toolbar input, .toolbar select { height: 42px; width: auto; min-width: 150px; font-size: 14px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.tab {
  padding: 9px 18px; border-radius: 100px; border: 1px solid var(--line);
  background: transparent; color: var(--body); font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .18s var(--ease);
}
.tab:hover { border-color: var(--line-2); color: var(--text); }
.tab.on { background: var(--text); color: #08080a; border-color: var(--text); }

.form-msg {
  display: none; margin-top: 16px; padding: 15px 18px; border-radius: 12px;
  font-size: 14px; border: 1px solid var(--gold-line);
  background: rgba(233,185,73,.08); color: var(--gold-hi);
}
.form-msg.show { display: block; }
.form-msg.bad { border-color: rgba(255,90,90,.4); background: rgba(255,90,90,.08); color: #ff9d9d; }

/* ---------------- legal ---------------- */

.legal { max-width: 780px; padding: 68px 0 96px; }
.legal h1 { font-size: clamp(30px, 4.8vw, 46px); margin-bottom: 10px; }
.legal .date { color: var(--dim); font-size: 13.5px; margin-bottom: 46px; }
.legal h2 { font-size: 21px; margin: 44px 0 12px; }
.legal p, .legal li { font-size: 15.3px; color: var(--body); }
.legal ul { margin: 12px 0 0 22px; }
.legal li { padding: 5px 0; }
.legal strong { color: var(--text); font-weight: 650; }

/* ---------------- footer ---------------- */

footer { border-top: 1px solid var(--line); padding: 62px 0 46px; background: var(--panel); }
.fgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.fgrid img { height: 36px; margin-bottom: 16px; }
.fgrid p { font-size: 13.5px; color: var(--dim); max-width: 280px; }
.fcol h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.fcol a { display: block; color: var(--body); font-size: 14px; padding: 5px 0; }
.fcol a:hover { color: var(--text); }
.fbot {
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--dim);
}
.fbot span:last-child { margin-left: auto; }

@media (max-width: 860px) {
  .fgrid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .fbot span:last-child { margin-left: 0; }
}

/* ---------------- scroll reveal ---------------- */

.rise { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rise { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   HOME PAGE
   Only the landing page uses these. Nothing above is changed.
   ============================================================ */

/* ---- hero ---- */

.home-hero { position: relative; padding: 78px 0 90px; overflow: hidden; }

.home-hero::before {
  content: ""; position: absolute; top: -260px; left: 50%;
  width: 1200px; height: 900px; transform: translateX(-58%);
  background: radial-gradient(closest-side, rgba(233,185,73,.13), transparent 70%);
  pointer-events: none;
}
.home-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 65% at 40% 35%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 40% 35%, #000 25%, transparent 80%);
  pointer-events: none;
}

.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.06fr);
  gap: 56px; align-items: center;
}

.hero-copy h1 {
  font-size: clamp(36px, 5.2vw, 62px);
  line-height: 1.04; letter-spacing: -.035em; margin-bottom: 22px;
}
.hero-copy .lede { font-size: clamp(15px, 1.7vw, 17.5px); max-width: 480px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 34px 0 22px; }
.hero-note { font-size: 13.5px; color: var(--dim); }
.hero-note a { font-weight: 600; }

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .home-hero { padding: 52px 0 66px; }
  .hero-copy .lede { max-width: none; }
}

/* ---- TV mockup ----
   Drawn, not photographed. Swap .screen's contents for a real
   screenshot when one exists — the frame stays. */

.tv-stage { position: relative; }

.tv {
  position: relative;
  border-radius: 16px; padding: 11px;
  background: linear-gradient(160deg, #1c1c21, #0a0a0d 55%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08),
              0 50px 90px -40px rgba(0,0,0,.9),
              0 0 120px -50px rgba(233,185,73,.35);
}
.tv .screen {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 9px; background: #060608;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  display: grid; grid-template-columns: 34% 1fr;
}
.tv .stand {
  width: 108px; height: 9px; margin: 12px auto 0; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #1c1c21, #0c0c10);
}
.tv .foot {
  width: 190px; height: 5px; margin: 0 auto; border-radius: 4px;
  background: rgba(255,255,255,.07);
}

.mk-list { border-right: 1px solid rgba(255,255,255,.07); padding: 12px 0; overflow: hidden; }
.mk-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; font-size: 9.5px; color: var(--dim);
}
.mk-row i { width: 16px; height: 16px; border-radius: 4px; background: rgba(255,255,255,.07); flex: none; }
.mk-row.on { color: #fff; background: rgba(233,185,73,.1); box-shadow: inset 2px 0 0 var(--gold); }
.mk-row.on i { background: rgba(233,185,73,.35); }

.mk-main { position: relative; display: flex; flex-direction: column; }
.mk-video {
  flex: 1; margin: 12px; border-radius: 7px; position: relative;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(233,185,73,.16), transparent 60%),
    linear-gradient(150deg, #16161b, #0a0a0e);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
}
.mk-play {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--gold-line); background: rgba(233,185,73,.12);
  display: flex; align-items: center; justify-content: center;
}
.mk-play::after {
  content: ""; border-left: 11px solid var(--gold);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  margin-left: 3px;
}
.mk-live {
  position: absolute; top: 10px; left: 10px;
  font-size: 7.5px; font-weight: 700; letter-spacing: .12em;
  padding: 3px 7px; border-radius: 20px;
  background: rgba(233,185,73,.18); color: var(--gold-hi);
  border: 1px solid var(--gold-line);
}
.mk-epg { padding: 0 12px 12px; display: flex; gap: 6px; }
.mk-epg span {
  flex: 1; height: 26px; border-radius: 5px;
  background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.mk-epg span.now { background: rgba(233,185,73,.14); box-shadow: inset 0 0 0 1px var(--gold-line); }

/* phone leaning on the TV */
.phone {
  position: absolute; right: -14px; bottom: -40px; width: 21%;
  border-radius: 16px; padding: 5px;
  background: linear-gradient(160deg, #1e1e24, #0b0b0e);
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 30px 60px -26px rgba(0,0,0,.95);
}
.phone .pscreen {
  aspect-ratio: 9 / 19; border-radius: 12px; overflow: hidden;
  background: #08080b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  padding: 9px 7px; display: flex; flex-direction: column; gap: 5px;
}
.phone .pbar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.09); }
.phone .pbar.gold { background: linear-gradient(90deg, var(--gold), rgba(233,185,73,.25)); width: 62%; }
.phone .ptile { flex: 1; border-radius: 6px; background: rgba(255,255,255,.05); }
.phone .pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; flex: 2; }
.phone .pgrid span { border-radius: 6px; background: rgba(255,255,255,.045); }

@media (max-width: 620px) { .phone { display: none; } }

/* ---- quick actions ---- */

.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }

.qcard {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 26px;
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.qcard:hover { transform: translateY(-5px); border-color: var(--gold-line); background: var(--panel-2); }
.qcard .qi {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(233,185,73,.1); border: 1px solid var(--gold-line);
}
.qcard .qi svg { width: 21px; height: 21px; stroke: var(--gold); fill: none; stroke-width: 1.6; }
.qcard h3 { font-size: 17px; margin-bottom: 8px; }
.qcard p { font-size: 14px; color: var(--dim); margin-bottom: 22px; flex: 1; }
.qcard .go {
  font-size: 13.5px; font-weight: 650; color: var(--gold);
  display: inline-flex; align-items: center; gap: 7px;
}
.qcard:hover .go { color: var(--gold-hi); }
.qcard .go::after { content: "→"; transition: transform .2s var(--ease); }
.qcard:hover .go::after { transform: translateX(4px); }

/* ---- how it works ---- */

.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.flow::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent);
}
.fstep { position: relative; text-align: center; padding: 0 22px; }
.fstep .num {
  position: relative; z-index: 2;
  width: 68px; height: 68px; margin: 0 auto 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: var(--gold-hi);
  background: var(--black); border: 1px solid var(--gold-line);
  box-shadow: 0 0 0 8px var(--black), 0 0 36px -8px rgba(233,185,73,.5);
}
.fstep h3 { font-size: 17px; margin-bottom: 10px; }
.fstep p { font-size: 14px; color: var(--dim); max-width: 240px; margin: 0 auto; }

@media (max-width: 800px) {
  .flow { grid-template-columns: 1fr; gap: 42px; }
  .flow::before { left: 50%; right: auto; top: 34px; bottom: 34px; width: 1px; height: auto;
    background: linear-gradient(180deg, var(--gold-line), transparent); }
}

/* ---- devices ---- */

.devices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }

.dev {
  position: relative; text-align: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 30px 18px 24px;
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.dev:hover { transform: translateY(-4px); border-color: var(--gold-line); }
.dev svg { width: 30px; height: 30px; stroke: var(--gold); fill: none; stroke-width: 1.5; margin-bottom: 16px; }
.dev .dn { color: var(--text); font-size: 15px; font-weight: 650; margin-bottom: 5px; }
.dev .dt { font-size: 12px; color: var(--dim); margin-bottom: 14px; min-height: 30px; }

/* ---- showcase ---- */

.showcase { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 52px; align-items: center; }
.showlist { display: grid; gap: 2px; }
.showlist div {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; color: var(--body);
}
.showlist div:last-child { border-bottom: 0; }
.showlist b { color: var(--text); font-weight: 600; }
.showlist i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--gold); box-shadow: 0 0 10px rgba(233,185,73,.7);
}

@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; gap: 40px; } }

/* ---- feature grid ---- */

.fgrid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.fcell { background: var(--panel); padding: 28px 24px; transition: background .22s var(--ease); }
.fcell:hover { background: var(--panel-2); }
.fcell svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.6; margin-bottom: 15px; }
.fcell h3 { font-size: 15.5px; margin-bottom: 7px; }
.fcell p { font-size: 13.5px; color: var(--dim); }

/* ---- trial ---- */

.trial-flow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 34px 0 36px; }
.tnode {
  padding: 12px 22px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--panel);
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--body);
}
.tnode.hot { border-color: var(--gold-line); background: rgba(233,185,73,.09); color: var(--gold-hi); }
.tarrow { color: var(--gold); font-size: 15px; }

@media (max-width: 620px) {
  .trial-flow { flex-direction: column; }
  .tarrow { transform: rotate(90deg); }
  .tnode { width: 100%; text-align: center; }
}

/* ---- pricing ---- */

.price-card {
  max-width: 460px; margin: 0 auto; text-align: center;
  border: 1px solid var(--gold-line); border-radius: 22px; padding: 42px 36px;
  background: linear-gradient(180deg, rgba(233,185,73,.07), transparent 60%), var(--panel);
  box-shadow: 0 40px 90px -50px rgba(233,185,73,.55);
}
.price-card .pt { font-size: 21px; font-weight: 700; color: var(--text); }
.price-card .ps { font-size: 13px; color: var(--dim); margin-top: 4px; }
.price-card .pp { font-size: 54px; font-weight: 750; letter-spacing: -.045em; margin: 24px 0 4px; }
.price-card .pu { font-size: 13px; color: var(--dim); margin-bottom: 30px; }
.price-card ul { list-style: none; text-align: left; margin-bottom: 32px; }
.price-card li { position: relative; padding: 9px 0 9px 28px; font-size: 14.5px; color: var(--body); }
.price-card li::before {
  content: ""; position: absolute; left: 3px; top: 16px;
  width: 11px; height: 6px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* ---- final CTA ---- */

.final {
  position: relative; text-align: center; overflow: hidden;
  border: 1px solid var(--gold-line); border-radius: 24px; padding: 66px 32px;
  background: linear-gradient(180deg, rgba(233,185,73,.09), transparent 65%), var(--panel);
}
.final::before {
  content: ""; position: absolute; top: -50%; left: 50%; width: 800px; height: 500px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(233,185,73,.16), transparent 70%);
  pointer-events: none;
}
.final > * { position: relative; z-index: 2; }

/* ---- disclaimer strip ---- */

.strip {
  display: flex; align-items: flex-start; gap: 16px;
  border: 1px solid var(--line); border-left: 2px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0; background: var(--panel);
  padding: 24px 26px;
}
.strip svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.6; flex: none; margin-top: 2px; }
.strip p { font-size: 14px; color: var(--body); }
.strip p + p { margin-top: 8px; color: var(--dim); }

/* ============================================================
   ADD PLAYLIST — method chooser and step-by-step guide
   ============================================================ */

.methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

.method {
  position: relative; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px 24px;
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.method:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--panel-2); }
.method.on {
  border-color: var(--gold); background: rgba(233,185,73,.06);
  box-shadow: 0 0 0 1px var(--gold-line), 0 24px 50px -34px rgba(233,185,73,.6);
}
.method .mi {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(233,185,73,.1); border: 1px solid var(--gold-line);
}
.method .mi svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.6; }
.method .mt { color: var(--text); font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.method .md { font-size: 13.5px; color: var(--dim); margin-top: 7px; }
.method .mc { position: absolute; top: 18px; right: 18px; }

/* the guide that opens underneath */

.howto {
  margin-top: 18px; border: 1px solid var(--gold-line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(233,185,73,.05), transparent 40%), var(--panel);
  padding: 34px 32px;
}
.howto > h3 { font-size: 20px; margin-bottom: 6px; }
.howto > .sub { font-size: 14px; color: var(--dim); margin-bottom: 28px; }

.hsteps { counter-reset: hs; display: grid; gap: 2px; }
.hstep {
  display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--line); counter-increment: hs;
}
.hstep:last-child { border-bottom: 0; }
.hstep::before {
  content: counter(hs, decimal-leading-zero);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(233,185,73,.1); border: 1px solid var(--gold-line);
  color: var(--gold); font-size: 12px; font-weight: 700;
}
.hstep b { display: block; color: var(--text); font-size: 15.5px; font-weight: 650; margin-bottom: 4px; }
.hstep span { font-size: 14px; color: var(--body); }
.hstep code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--gold-hi);
  background: rgba(233,185,73,.09); border: 1px solid var(--gold-line);
  padding: 2px 7px; border-radius: 6px;
}

.hnote {
  margin-top: 26px; padding: 18px 20px; border-radius: var(--r);
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--dim);
}
.hnote strong { color: var(--body); font-weight: 600; }

@media (max-width: 620px) {
  .howto { padding: 26px 20px; }
  .hstep { grid-template-columns: 32px 1fr; gap: 12px; }
  .hstep::before { width: 30px; height: 30px; font-size: 11px; }
}

/* soon banner */

.soon-box {
  display: grid; grid-template-columns: 54px 1fr auto; gap: 20px; align-items: center;
  border: 1px dashed var(--gold-line); border-radius: var(--r-lg);
  background: rgba(233,185,73,.04); padding: 28px 30px;
}
.soon-box .si {
  width: 54px; height: 54px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(233,185,73,.1); border: 1px solid var(--gold-line);
}
.soon-box .si svg { width: 24px; height: 24px; stroke: var(--gold); fill: none; stroke-width: 1.6; }
.soon-box h3 { font-size: 17px; margin-bottom: 6px; }
.soon-box p { font-size: 14px; color: var(--dim); }

@media (max-width: 720px) {
  .soon-box { grid-template-columns: 1fr; gap: 16px; text-align: left; }
}

/* ============================================================
   LICENCE CHOOSER · CONFIRMATIONS · MY DEVICES
   ============================================================ */

/* ---- plan radio cards ---- */

.picks { display: grid; gap: 10px; }

.pick {
  position: relative; display: grid; grid-template-columns: 22px 1fr auto;
  gap: 14px; align-items: center; text-align: left; cursor: pointer;
  background: var(--black); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 17px 18px; font-family: inherit;
  transition: all .18s var(--ease);
}
.pick:hover { border-color: var(--line-2); background: var(--panel-2); }
.pick .radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line-2); position: relative; flex: none;
  transition: all .18s var(--ease);
}
.pick.on { border-color: var(--gold); background: rgba(233,185,73,.06); box-shadow: 0 0 0 1px var(--gold-line); }
.pick.on .radio { border-color: var(--gold); }
.pick.on .radio::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
}
.pick .pn { color: var(--text); font-size: 15.5px; font-weight: 650; }
.pick .pd { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.pick .pv { color: var(--text); font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.pick.on .pv { color: var(--gold-hi); }
.pick .flagline {
  display: inline-block; margin-left: 9px; vertical-align: 2px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px; color: #191100;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
}

/* ---- confirmation checkboxes ---- */

.agrees { display: grid; gap: 4px; }
.agree {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start;
  padding: 15px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.agree:last-child { border-bottom: 0; }
.agree input { position: absolute; opacity: 0; width: 0; height: 0; }
.agree .box {
  width: 21px; height: 21px; border-radius: 6px; margin-top: 1px;
  border: 1.5px solid var(--line-2); flex: none; position: relative;
  transition: all .18s var(--ease);
}
.agree input:checked ~ .box {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  border-color: transparent;
}
.agree input:checked ~ .box::after {
  content: ""; position: absolute; left: 6px; top: 4px;
  width: 6px; height: 10px; border: solid #191100;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.agree input:focus-visible ~ .box { box-shadow: 0 0 0 3px rgba(233,185,73,.25); }
.agree span { font-size: 14px; color: var(--body); line-height: 1.55; }
.agree.missing .box { border-color: #ff6e6e; }

/* ---- edit link on the review ---- */

.srow .edit {
  font-size: 12px; font-weight: 650; color: var(--gold);
  background: none; border: 0; cursor: pointer; padding: 0 0 0 12px;
  font-family: inherit;
}
.srow .edit:hover { color: var(--gold-hi); }

/* ---- why activate ---- */

.whys { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; }
.why {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); padding: 20px 20px;
}
.why i {
  width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 8px;
  background: var(--gold); box-shadow: 0 0 10px rgba(233,185,73,.7);
}
.why b { display: block; color: var(--text); font-size: 14.5px; font-weight: 650; }
.why span { font-size: 12.5px; color: var(--dim); }

/* ---- my devices ---- */

.dcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

.dcard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px;
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.dcard:hover { border-color: var(--line-2); transform: translateY(-3px); }
.dcard.expired { border-color: rgba(255,110,110,.3); }

.dhead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.dhead .dname { color: var(--text); font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.dhead .dsub { font-size: 12.5px; color: var(--dim); margin-top: 3px; }
.dhead .status { margin-left: auto; flex: none; }

.dmeta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 20px; }
.dmeta div { background: var(--panel-2); padding: 13px 15px; }
.dmeta dt { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.dmeta dd { color: var(--text); font-size: 14px; font-weight: 600; margin-top: 4px; }

.dactions { display: flex; gap: 9px; flex-wrap: wrap; }

.addcard {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; min-height: 220px; text-align: center;
  border: 1px dashed var(--gold-line); border-radius: var(--r-lg);
  background: rgba(233,185,73,.03); padding: 30px 24px;
  transition: all .22s var(--ease);
}
.addcard:hover { background: rgba(233,185,73,.07); border-color: var(--gold); }
.addcard .plus {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-line); background: rgba(233,185,73,.1);
  color: var(--gold); font-size: 24px; font-weight: 300;
}
.addcard b { color: var(--text); font-size: 16px; }
.addcard span { font-size: 13px; color: var(--dim); }

/* ---- player-only strip, compact variant ---- */

.strip.tight { padding: 18px 20px; }
.strip.tight p { font-size: 13px; }


/* ============================================================
   UPLOAD PLAYLIST
   Added at the end. Nothing above this line was changed.
   ============================================================ */

.up-hero { padding-top: 76px; padding-bottom: 0; border-top: 0; }
.up-main { padding-top: 42px; border-top: 0; }
.up-wrap { max-width: 780px; margin: 0 auto; }

/* ---- drop zone ---- */

.drop {
  border: 1.5px dashed var(--line-2); border-radius: 16px;
  padding: 40px 22px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  transition: border-color .2s, background .2s, transform .2s var(--ease);
  margin-bottom: 22px;
}
.drop:hover, .drop:focus-visible { border-color: var(--gold-line); background: rgba(233,185,73,.04); outline: none; }
.drop.over { border-color: var(--gold); background: rgba(233,185,73,.09); transform: scale(1.01); }
.drop svg { width: 30px; height: 30px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.drop b { color: var(--text); font-size: 15.5px; }
.drop span { font-size: 12.5px; color: var(--dim); }
.drop u { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-line); }

.picked {
  display: flex; align-items: center; gap: 13px; margin-bottom: 22px;
  padding: 15px 17px; border-radius: 13px;
  background: var(--panel); border: 1px solid var(--gold-line);
}
.picked svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.5; flex: none; }
.picked div { flex: 1; min-width: 0; }
.picked b { display: block; color: var(--text); font-size: 14px; word-break: break-all; }
.picked span { font-size: 12px; color: var(--dim); }
.picked button {
  background: none; border: 0; color: var(--dim); font-size: 22px;
  cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 8px;
}
.picked button:hover { color: var(--text); background: rgba(255,255,255,.06); }

/* ---- the lock ---- */

.up-lock {
  border: 1px solid var(--gold-line); border-radius: 16px;
  background: linear-gradient(180deg, rgba(233,185,73,.055), transparent 70%);
  padding: 20px; margin-bottom: 24px;
}
.ul-head { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px; }
.ul-head svg { width: 21px; height: 21px; stroke: var(--gold); fill: none; stroke-width: 1.6; flex: none; margin-top: 2px; }
.ul-head b { display: block; color: var(--text); font-size: 15px; }
.ul-head span { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.ul-note { font-size: 12px; color: var(--dim); line-height: 1.6; margin-top: 4px; }
.ul-note strong { color: var(--gold-hi); }

.pin-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .42em; text-transform: uppercase; font-size: 19px; text-align: center;
}

/* ---- actions ---- */

.up-actions { display: flex; gap: 11px; flex-wrap: wrap; }
.up-actions .btn { flex: 1; min-width: 132px; }

/* ---- result ---- */

.up-result { text-align: center; }
.up-state { margin-bottom: 24px; }

.us-mark {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line);
}
.us-mark svg { width: 28px; height: 28px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.us-mark.good { background: rgba(55,200,139,.11); border-color: rgba(55,200,139,.4); }
.us-mark.good svg { stroke: #37c88b; }
.us-mark.warn { background: rgba(240,168,60,.11); border-color: rgba(240,168,60,.4); }
.us-mark.warn svg { stroke: #f0a83c; }

.us-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.2px solid var(--line-2); border-top-color: var(--gold);
  animation: usSpin .85s linear infinite;
}
@keyframes usSpin { to { transform: rotate(360deg); } }

.up-result .up-sub { max-width: 430px; margin: 8px auto 0; }

.up-meter { margin: 24px auto; max-width: 340px; }
.um-bar { height: 4px; border-radius: 999px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--line); }
.um-bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-hi));
  transition: width .5s linear;
}
.up-meter span { display: block; font-size: 12px; color: var(--dim); margin-top: 9px; }

.up-next {
  list-style: none; counter-reset: n; text-align: left;
  max-width: 400px; margin: 0 auto 26px; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
}
.up-next li { counter-increment: n; background: var(--panel); padding: 14px 16px 14px 46px; position: relative; }
.up-next li::before {
  content: counter(n); position: absolute; left: 16px; top: 15px;
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: var(--gold);
  background: rgba(233,185,73,.12); border: 1px solid var(--gold-line);
}
.up-next b { display: block; color: var(--text); font-size: 14px; }
.up-next span { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px; }

/* ---- trust strip ---- */

.up-trust { border-top: 1px solid var(--line); }
.tsteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: 16px; }
.tstep { background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 22px 20px; }
.tnum {
  display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%;
  font-size: 11.5px; font-weight: 700; color: var(--gold);
  background: rgba(233,185,73,.12); border: 1px solid var(--gold-line); margin-bottom: 13px;
}
.tstep b { display: block; color: var(--text); font-size: 15px; letter-spacing: -.01em; margin-bottom: 6px; }
.tstep p { font-size: 13px; color: var(--dim); line-height: 1.6; }


/* ============================================================
   "MODERN PLAYER IS A MEDIA PLAYER" — the standing notice
   ============================================================ */

.mp-notice-band { border-top: 1px solid var(--line); }
.mp-notice {
  border: 1px solid var(--gold-line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(233,185,73,.06), transparent 65%), var(--panel);
  padding: 34px; max-width: 800px; margin: 0 auto; text-align: center;
}
.mp-notice h3 { font-size: clamp(20px, 3vw, 27px); letter-spacing: -.025em; margin: 8px 0 14px; }
.mp-notice p { font-size: 14.5px; color: var(--body); line-height: 1.7; max-width: 620px; margin: 0 auto; }
@media (max-width: 560px) { .mp-notice { padding: 26px 20px; } }


/* ============================================================
   PAYMENT METHODS
   ============================================================ */

.payblock {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); padding: 26px;
}
.payblock .ph { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; justify-content: center; }
.payblock .ph svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 1.7; }
.payblock .ph b { color: var(--text); font-size: 15px; }
.payblock .psubline { text-align: center; font-size: 12.5px; color: var(--dim); margin-bottom: 20px; }

.paylist { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.paycard {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 14px;
  font-size: 12.5px; font-weight: 600; color: var(--body);
  transition: border-color .2s, color .2s;
}
.paycard:hover { border-color: var(--line-2); color: var(--text); }
.paycard svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.paycard .pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }

.paynote {
  display: flex; gap: 11px; align-items: flex-start;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--dim); line-height: 1.6;
}
.paynote svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 1.7; flex: none; margin-top: 2px; }
.paynote strong { color: var(--body); }

/* "Best value" — a second flag, distinct from "Most popular" so
   two cards can be marked without either being mistaken for the
   other. */
.plan .flag.alt {
  background: rgba(255,255,255,.07);
  border-color: var(--line-2);
  color: var(--body);
}

/* ============================================================
   UPLOAD PLAYLIST — cards, glass, form
   ============================================================ */

.up-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px; margin-bottom: 28px;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.up-cards.chosen { opacity: .38; transform: scale(.985); }
.up-cards.chosen .ucard.picked { opacity: 1; border-color: var(--gold-line); }

.ucard {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  padding: 26px 24px 22px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    rgba(12,12,16,.72);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.055) inset, 0 18px 44px rgba(0,0,0,.34);
  display: flex; flex-direction: column; gap: 11px;
  transition: transform .34s var(--ease), border-color .34s var(--ease), box-shadow .34s var(--ease);
}
.ucard:hover:not(:disabled) {
  transform: translateY(-6px);
  border-color: var(--gold-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 26px 60px rgba(0,0,0,.46),
              0 0 0 1px rgba(233,185,73,.10);
}
.ucard:active:not(:disabled) { transform: translateY(-2px); }
.ucard:disabled, .ucard.is-soon { cursor: default; opacity: .42; }

/* light that follows the card, not the cursor — cheap and calm */
.uc-glow {
  position: absolute; inset: -40% 20% auto -20%; height: 180px;
  background: radial-gradient(closest-side, rgba(233,185,73,.20), transparent 70%);
  opacity: 0; transition: opacity .45s var(--ease), transform .6s var(--ease);
  pointer-events: none; transform: translateY(-16px);
}
.ucard:hover:not(:disabled) .uc-glow { opacity: 1; transform: translateY(0); }

.uc-ic {
  width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(233,185,73,.16), rgba(233,185,73,.05));
  border: 1px solid var(--gold-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset;
}
.uc-ic svg { width: 23px; height: 23px; stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.uc-name { color: var(--text); font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.uc-note { font-size: 13px; color: var(--dim); line-height: 1.55; flex: 1; }
.uc-note code { font-size: 11.5px; }

.uc-go {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 650; color: var(--gold); letter-spacing: .02em; margin-top: 3px;
}
.uc-go svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s var(--ease); }
.ucard:hover:not(:disabled) .uc-go { color: var(--gold-hi); }
.ucard:hover:not(:disabled) .uc-go svg { transform: translateX(4px); }

.uc-flag {
  position: absolute; top: 14px; right: 14px;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--dim); background: rgba(255,255,255,.07);
  padding: 4px 9px; border-radius: 999px;
}

/* ---- the panel ---- */

.up-panel {
  max-width: 720px; margin: 0 auto;
  border-radius: 22px; padding: 32px;
  animation: panelIn .42s var(--ease) both;
}
.glass {
  border: 1px solid var(--line-2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014)),
    rgba(10,10,13,.82);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 30px 70px rgba(0,0,0,.5);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: none; } }

.up-head { display: flex; align-items: center; gap: 15px; margin-bottom: 28px; }
.up-head h3 { font-size: 21px; letter-spacing: -.025em; }
.up-head p { font-size: 13px; color: var(--dim); margin-top: 3px; }

.up-x {
  width: 36px; height: 36px; flex: none; border-radius: 11px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  display: grid; place-items: center; transition: background .2s, border-color .2s;
}
.up-x:hover { background: rgba(255,255,255,.09); border-color: var(--line-2); }
.up-x svg { width: 17px; height: 17px; stroke: var(--body); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.up-ic { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(233,185,73,.15), rgba(233,185,73,.04));
  border: 1px solid var(--gold-line); }
.up-ic svg { width: 21px; height: 21px; stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.up-sec { padding: 22px 0; border-top: 1px solid var(--line); }
.up-sec:first-of-type { border-top: 0; padding-top: 0; }
.up-legend {
  display: block; font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 16px; font-weight: 600;
}
.up-legend.gold { color: var(--gold); }
.up-sec .field:last-of-type { margin-bottom: 0; }
.up-fields { animation: panelIn .3s var(--ease) both; }

.dev-state {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 13px 15px; border-radius: 13px;
  background: rgba(55,200,139,.07); border: 1px solid rgba(55,200,139,.26);
  animation: panelIn .3s var(--ease) both;
}
.dev-state.returning { background: rgba(233,185,73,.07); border-color: var(--gold-line); }
.ds-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #37c88b;
  box-shadow: 0 0 0 4px rgba(55,200,139,.16); }
.dev-state.returning .ds-dot { background: var(--gold); box-shadow: 0 0 0 4px rgba(233,185,73,.16); }
.dev-state b { display: block; color: var(--text); font-size: 14px; }
.dev-state span { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; }

.up-lock { border-radius: 16px; padding: 22px; margin-top: 22px; border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(233,185,73,.055), transparent 70%); }
.ul-head { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 18px; }
.ul-head svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.6; flex: none; margin-top: 2px; }
.ul-head b { display: block; color: var(--text); font-size: 15px; }
.ul-head span { display: block; font-size: 12.5px; color: var(--dim); margin-top: 3px; line-height: 1.55; }
.ul-note { font-size: 12px; color: var(--dim); line-height: 1.65; margin-top: 14px; }
.ul-note strong { color: var(--gold-hi); }

.pin-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .36em; text-align: center; font-size: 18px;
}

.btn-lg { padding: 15px; font-size: 15px; margin-top: 24px; }

@media (max-width: 620px) {
  .up-panel { padding: 24px 19px; border-radius: 18px; }
  .ucard { padding: 22px 20px 19px; border-radius: 17px; }
  .up-head { gap: 12px; margin-bottom: 22px; }
  .up-head h3 { font-size: 18px; }
  .up-lock { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ucard, .uc-glow, .uc-go svg, .up-cards { transition: none; }
  .up-panel, .up-fields, .dev-state { animation: none; }
}

/* On a phone the header keeps only the logo and the three lines —
   the gold button lives inside the drawer, where there is room
   for it. */
@media (max-width: 560px) {
  .nav-cta { display: none; }
  .burger { margin-left: auto; }
}