/* ============================================================
   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 ---- */

/* ---- links ----

   NOTHING HERE HIDES A LINK.

   Twice now this menu has opened as an empty black sheet, because
   the links started at `opacity: 0` and were supposed to be
   revealed by a rule that fires on open. When anything in that
   chain failed — a var() a browser would not substitute, a class
   that never arrived — the failure mode was invisible content.

   So the links are opaque, always. The panel is off-screen and
   `visibility: hidden` when shut, and that is the only thing
   hiding them. The stagger below moves them sideways and touches
   opacity never: if that transition breaks in some browser I
   cannot test, the links simply appear without sliding.

   A decoration must not be able to hide the thing it decorates. */

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

  transform: translateX(20px);
  transition-property: transform, color, background;
  transition-duration: .42s, .18s, .18s;
  transition-timing-function: cubic-bezier(.16,.84,.44,1);
}
.mobile-menu.show a { 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; }

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

/* ---- 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 .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); }
.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; }
}
.hero-copy .lede { font-size: clamp(15px, 1.7vw, 17.5px); max-width: 480px; }

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

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

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

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

/* ---- 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; }
.howto > .sub { font-size: 14px; color: var(--dim); margin-bottom: 28px; }

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

@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); }

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

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


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

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

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

.up-result { text-align: center; }

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

/* ============================================================
   LANGUAGE
   A button beside the three lines, and a panel of twenty.
   ============================================================ */

.lang-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 44px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,.02); color: var(--body);
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .03em;
  cursor: pointer; position: relative; z-index: 82;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.lang-btn:hover { background: rgba(255,255,255,.06); border-color: var(--line-2); color: var(--text); }
.lang-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.lang-btn[aria-expanded="true"] { border-color: var(--gold-line); color: var(--gold-hi); }

.lang-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 95;
  width: min(320px, calc(100vw - 32px));
  border: 1px solid var(--line-2); border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)),
    rgba(9,9,12,.97);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  box-shadow: 0 26px 60px rgba(0,0,0,.55);
  padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition-property: opacity, transform, visibility;
  transition-duration: .22s, .22s, 0s;
  transition-timing-function: cubic-bezier(.16,.84,.44,1);
  transition-delay: 0s, 0s, .22s;
}
.lang-panel.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.lang-head {
  padding: 8px 12px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.lang-list { max-height: min(420px, 60vh); overflow-y: auto; display: grid; gap: 1px; }

.lang-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 12px; border: 0; border-radius: 9px;
  background: none; color: var(--body); font: inherit; font-size: 14px;
  cursor: pointer; text-align: left;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.lang-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.lang-item.on { background: var(--gold-dim, rgba(233,185,73,.1)); color: var(--gold-hi); font-weight: 600; }
.lang-item .lc { font-size: 11px; letter-spacing: .1em; color: var(--dim); }
.lang-item.on .lc { color: var(--gold); }

.lang-note {
  padding: 11px 12px 6px; margin-top: 4px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.5; color: var(--dim);
}

/* The nav is the panel's anchor. */
.nav { position: relative; }

@media (max-width: 560px) {
  .lang-btn { height: 40px; padding: 0 10px; font-size: 12px; }
  .lang-btn svg { width: 15px; height: 15px; }
  .lang-panel { right: -6px; }
}

/* ---- right to left ----
   Arabic reads the other way, so the drawer comes from the
   other side too. Everything else mirrors on its own. */

body.rtl .mobile-menu {
  right: auto; left: 0;
  border-left: 0; border-right: 1px solid var(--line-2);
  transform: translateX(-100%);
  box-shadow: 34px 0 80px rgba(0,0,0,.62);
}
body.rtl .mobile-menu.show { transform: translateX(0); }
body.rtl .mobile-menu a { transform: translateX(-20px); }
body.rtl .mobile-menu.show a { transform: translateX(0); }
body.rtl .lang-panel { right: auto; left: 0; }
body.rtl .nav-cta { margin-left: 0; margin-right: auto; }

/* ============================================================
   KEYBOARD AND FOCUS

   Every control the mouse can reach, the keyboard can reach too,
   and it must be visible where you are. :focus-visible rather
   than :focus, so a ring appears for the keyboard and not for
   every mouse click.
   ============================================================ */

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  padding: 12px 20px; border-radius: 0 0 12px 12px;
  background: var(--gold); color: #191100;
  font-size: 14px; font-weight: 650;
  transition: top .18s var(--ease);
}
.skip:focus { top: 0; color: #191100; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible, .burger:focus-visible, .lang-btn:focus-visible,
.nav-x:focus-visible, .ucard:focus-visible, .qcard:focus-visible,
.plat:focus-visible, .method:focus-visible, .pick:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
.mobile-menu a:focus-visible { outline-offset: -3px; }
.qa summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Never remove the ring without replacing it. */
*:focus:not(:focus-visible) { outline: none; }

/* ---- footer version ---- */
.fver { color: var(--dim); font-size: 12px; }
.fver b { color: var(--body); font-weight: 600; }

/* ---- troubleshooting ---- */

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

.ts {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); overflow: hidden;
  transition: border-color .2s var(--ease);
}
.ts[open] { border-color: var(--gold-line); }
.ts summary {
  list-style: none; cursor: pointer; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 4px; position: relative;
  padding-right: 52px;
}
.ts summary::-webkit-details-marker { display: none; }
.ts summary:hover { background: rgba(255,255,255,.026); }
.ts summary b { color: var(--text); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.ts summary span { font-size: 12.5px; color: var(--gold); }
.ts summary::after {
  content: ""; position: absolute; right: 24px; top: 26px;
  width: 9px; height: 9px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg); transition: transform .22s var(--ease);
}
.ts[open] summary::after { transform: rotate(-135deg) translate(-3px,-3px); }
.ts-body { padding: 0 22px 20px; }
.ts-body p { font-size: 14.5px; color: var(--body); line-height: 1.65; }
.ts-body p + p { margin-top: 11px; }
.ts-body strong { color: var(--text); font-weight: 650; }
.ts-body em { color: var(--gold-hi); font-style: normal; }

@media (max-width: 560px) {
  .ts summary { padding: 15px 44px 15px 18px; }
  .ts summary::after { right: 18px; top: 22px; }
  .ts-body { padding: 0 18px 17px; }
}

/* ---- install routes ---- */

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

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

.ir-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.ir-ic {
  width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: rgba(233,185,73,.1); border: 1px solid var(--gold-line);
}
.ir-ic svg { width: 21px; height: 21px; stroke: var(--gold); fill: none; stroke-width: 1.6; }
.ir-head b { display: block; color: var(--text); font-size: 16px; letter-spacing: -.015em; }
.ir-head span { display: block; font-size: 12.5px; color: var(--dim); margin-top: 3px; }

.ir-steps { list-style: none; counter-reset: ir; display: grid; gap: 1px; }
.ir-steps li {
  counter-increment: ir; position: relative;
  padding: 13px 0 13px 40px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.ir-steps li:last-child { border-bottom: 0; }
.ir-steps li::before {
  content: counter(ir); position: absolute; left: 0; top: 13px;
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: var(--gold);
  background: rgba(233,185,73,.1); border: 1px solid var(--gold-line);
}
.ir-steps b { display: block; color: var(--text); font-size: 14.5px; font-weight: 600; }
.ir-steps span { display: block; font-size: 13px; color: var(--dim); margin-top: 3px; line-height: 1.55; }
.ir-steps em { color: var(--gold-hi); font-style: normal; }

.ir-note {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--dim); line-height: 1.6;
}

@media (max-width: 560px) { .iroute { padding: 22px 19px; } }

/* ============================================================
   MODAL AND LOADING
   ============================================================ */

.mp-modal-back {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.66);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  animation: mpIn .2s var(--ease) both;
}
.mp-modal {
  width: 100%; max-width: 440px;
  border: 1px solid var(--line-2); border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), rgba(10,10,13,.97);
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
  padding: 30px 28px 26px;
  animation: mpUp .26s var(--ease) both;
}
@keyframes mpIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpUp { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.mp-modal h3 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 10px; }
.mp-modal p { font-size: 14px; color: var(--body); line-height: 1.6; }

.mp-modal-detail {
  margin: 20px 0 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.mp-modal-detail > div {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: var(--panel); padding: 12px 15px; font-size: 13.5px;
}
.mp-modal-detail span { color: var(--dim); }
.mp-modal-detail b { color: var(--text); font-weight: 600; }

.mp-modal-foot { display: flex; gap: 10px; margin-top: 24px; }
.mp-modal-foot .btn { flex: 1; }

.btn-danger { background: transparent; border-color: rgba(255,110,110,.42); color: #ff9d9d; }
.btn-danger:hover { background: rgba(255,110,110,.1); border-color: #ff6e6e; color: #ffc0c0; }

@media (max-width: 480px) {
  .mp-modal { padding: 24px 20px 22px; }
  .mp-modal-foot { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-modal-back, .mp-modal { animation: none; }
}

/* ============================================================
   HOME — rebuilt

   The old home page ran eleven sections deep and repeated the
   pricing, the FAQ and the call to action that each already had
   a page of their own. All that repetition did was push the two
   buttons people actually came for below the fold.

   Five sections now. Nothing above was removed — the old classes
   are still here and still used by other pages.
   ============================================================ */

.hero2 {
  position: relative; overflow: hidden;
  padding: 46px 0 58px;
  min-height: min(760px, calc(100vh - 74px));
  display: flex; align-items: center;
}
.hero2::before {
  content: ""; position: absolute; top: -280px; left: 50%;
  width: 1200px; height: 900px; transform: translateX(-56%);
  background: radial-gradient(closest-side, rgba(233,185,73,.13), transparent 70%);
  pointer-events: none;
}
.hero2::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 38% 40%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 38% 40%, #000 25%, transparent 80%);
  pointer-events: none;
}
.hero2 .wrap { position: relative; z-index: 2; }

.h2-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr);
  gap: 54px; align-items: center;
}

.h2-copy h1 {
  font-size: clamp(33px, 4.6vw, 54px);
  line-height: 1.05; letter-spacing: -.038em; margin-bottom: 18px;
}
.h2-copy .lede { font-size: clamp(15px, 1.6vw, 16.5px); max-width: 470px; }

/* ---- toasts ----
   Above the modal backdrop (1000), because a failure that
   happens while a dialog is open still has to be readable.
   Appended to <body>, never inside a blurred ancestor — a
   backdrop-filter builds a containing block and would pin
   these to the header, which is a lesson already learned. */

.mp-toasts {
  position: fixed; top: 88px; right: 18px; z-index: 1100;
  display: flex; flex-direction: column; gap: 10px;
  width: min(360px, calc(100vw - 36px)); pointer-events: none;
}
.mp-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: #0e0e13; padding: 14px 14px 13px 15px;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(-8px) scale(.98);
  transition-property: opacity, transform;
  transition-duration: .22s;
  transition-timing-function: cubic-bezier(.16,.84,.44,1);
}
.mp-toast.in { opacity: 1; transform: none; }
.mp-toast b { display: block; color: var(--text); font-size: 14px; font-weight: 650; }
.mp-toast span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--dim); margin-top: 3px; }
.mp-toast > div { flex: 1; min-width: 0; }

.mt-ic { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.mt-ic svg { width: 20px; height: 20px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mp-toast.good { border-color: var(--gold-line); }
.mp-toast.good .mt-ic svg { stroke: var(--gold); }
.mp-toast.bad { border-color: rgba(255,110,110,.4); }
.mp-toast.bad .mt-ic svg { stroke: #ff9d9d; }

.mt-x {
  flex: none; width: 24px; height: 24px; border: 0; background: none;
  color: var(--dim); cursor: pointer; padding: 0; margin: -2px -3px 0 0;
}
.mt-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mt-x:hover { color: var(--text); }

@media (max-width: 560px) {
  .mp-toasts { top: auto; bottom: 16px; right: 12px; left: 12px; width: auto; }
  .mp-toast { transform: translateY(8px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-toast { transition: none; }
}


/* ---- skeletons ----
   A shape where the answer will be, rather than the word
   "Loading". The panel stops jumping when the real value lands,
   because the space was already the right size. */

.sk {
  display: inline-block; border-radius: 6px; vertical-align: -2px;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 37%, rgba(255,255,255,.05) 63%);
  background-size: 400% 100%;
  animation-name: skWave; animation-duration: 1.4s;
  animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.sk-line { width: 84px; height: 13px; }
.sk-wide { width: 150px; height: 13px; }
.sk-pill { width: 78px; height: 24px; border-radius: 100px; }
@keyframes skWave { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; background: rgba(255,255,255,.07); }
}


/* ============================================================
   MANAGE PLAYLIST

   A panel that opens on a Device ID and a PIN. It borrows the
   Upload Playlist shell — same glass, same fields, same meter —
   because it is the same door, entered from the other side.
   Only the panel behind it is new.
   ============================================================ */

.mg-foot {
  font-size: 12.5px; line-height: 1.5; color: var(--dim);
  margin-top: 18px; text-align: center;
}

.mg-panel { max-width: 760px; margin: 0 auto; }

.mg-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.mg-top h3 { font-size: 20px; letter-spacing: .01em; margin-top: 8px; }

.mg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.mg-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); padding: 22px 22px 20px;
}
.mg-card.wide { margin-top: 14px; }

.mg-tag {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}

.mg-rows { margin-top: 15px; display: grid; gap: 12px; }
.mg-rows div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.mg-rows dt { font-size: 12.5px; color: var(--dim); flex: none; }
.mg-rows dd { font-size: 14px; color: var(--text); font-weight: 600; text-align: right; }

.mg-state { display: flex; align-items: flex-start; gap: 14px; margin-top: 16px; }
.mg-state b { display: block; color: var(--text); font-size: 15.5px; }
.mg-state span { display: block; font-size: 13.5px; color: var(--dim); margin-top: 4px; line-height: 1.5; }

.mg-card .up-meter { margin: 18px 0 4px; max-width: none; }
.mg-card .up-actions { margin-top: 20px; }

.mg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }

/* Not the gold .notice — this one is a warning, and a warning
   that looks like a promotion is not a warning. */
.mg-warn {
  border: 1px solid rgba(255,110,110,.3); border-radius: var(--r);
  background: rgba(255,110,110,.06); padding: 16px 18px; margin: 15px 0 4px;
}
.mg-warn h4 { color: #ffc0c0; font-size: 14.5px; margin-bottom: 6px; }
.mg-warn p { font-size: 13px; line-height: 1.55; color: var(--body); }

/* ---- an empty state, not an error ----
   Nothing has gone wrong when a new device has no playlist. It
   should read as a beginning with one obvious next step, not as
   a failure with a warning triangle. */

.mg-empty {
  text-align: center; padding: 26px 20px 22px;
  border: 1px dashed var(--gold-line); border-radius: var(--r);
  background: rgba(233,185,73,.03); margin-top: 16px;
}
.mg-empty svg {
  width: 30px; height: 30px; stroke: var(--gold); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 12px;
}
.mg-empty b { display: block; color: var(--text); font-size: 16px; }
.mg-empty p { font-size: 13.5px; color: var(--dim); margin-top: 7px; line-height: 1.55; max-width: 380px; margin-left: auto; margin-right: auto; }

/* ---- licence alert ----
   Two levels and no third. Amber is "this ends soon and you can
   act now". Red is "it has already stopped working". Anything
   between them would only teach people to ignore both. */

.mg-alert {
  display: flex; align-items: flex-start; gap: 13px;
  border-radius: var(--r); padding: 15px 17px; margin-bottom: 14px;
  border: 1px solid var(--gold-line); background: rgba(233,185,73,.06);
}
.mg-alert svg {
  width: 19px; height: 19px; flex: none; margin-top: 1px;
  fill: none; stroke: var(--gold); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.mg-alert b { display: block; color: var(--gold-hi); font-size: 14.5px; }
.mg-alert p { font-size: 13px; color: var(--body); margin-top: 4px; line-height: 1.5; }
.mg-alert a { font-weight: 600; white-space: nowrap; }

.mg-alert.bad { border-color: rgba(255,110,110,.35); background: rgba(255,110,110,.06); }
.mg-alert.bad svg { stroke: #ff9d9d; }
.mg-alert.bad b { color: #ffc0c0; }

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

@media (max-width: 620px) {
  .mg-grid, .mg-two { grid-template-columns: 1fr; }
  .mg-card { padding: 20px 18px 18px; }
  .mg-top { align-items: flex-start; }
  .mg-rows div { flex-direction: column; gap: 2px; }
  .mg-rows dd { text-align: left; }
}

/* ---- the two facts, above the buttons ----
   Static. Not links, not buttons — the moment one of these
   becomes clickable it starts competing with Activate Device,
   and that is the one thing this hero exists to protect. */

.h2-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 470px; margin-top: 26px;
}
.h2-fact {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); padding: 15px 16px 14px;
}
/* The price card leads, by position — no modifier class.
   `.gold` is the gradient-text utility: it paints a gradient,
   clips it to the glyphs and sets -webkit-text-fill-color to
   transparent. On a <span> that is a gold word. On a container
   it clips the card's own background to its text and turns all
   three lines invisible, which is exactly what it did here. */
.h2-fact:first-child { border-color: var(--gold-line); background: rgba(233,185,73,.05); }
.h2-fact-tag {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.h2-fact-big {
  display: block; margin-top: 7px; color: var(--text);
  font-size: clamp(20px, 2.3vw, 25px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.08;
}
.h2-fact-sub {
  display: block; margin-top: 6px;
  font-size: 12.5px; line-height: 1.45; color: var(--dim);
}

/* The two biggest buttons on the site, and nothing competes. */
.h2-acts { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 26px; }
.h2-btn {
  height: 58px; padding: 0 30px; font-size: 15.5px; gap: 11px;
  border-radius: 100px;
}
.h2-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.h2-btn.btn-ghost { border-color: var(--gold-line); color: var(--gold-hi); }
.h2-btn.btn-ghost:hover { border-color: var(--gold); background: rgba(233,185,73,.07); }

.h2-chips {
  list-style: none; display: flex; flex-wrap: wrap; gap: 9px 20px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.h2-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--body); white-space: nowrap;
}
.h2-chips svg { width: 15px; height: 15px; stroke: var(--gold); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.h2-note { font-size: 13.5px; color: var(--dim); margin-top: 20px; }
.h2-note a { font-weight: 600; }

@media (max-width: 940px) {
  .h2-grid { grid-template-columns: 1fr; gap: 42px; }
  .hero2 { min-height: 0; padding: 34px 0 48px; display: block; }
  .h2-copy .lede { max-width: none; }
  .h2-facts { max-width: 620px; }
  .h2-art { max-width: 520px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .h2-acts { flex-direction: column; }
  .h2-btn { width: 100%; }
  .h2-chips { gap: 9px 16px; }
  .h2-chips li { font-size: 12.5px; }
  .h2-facts { grid-template-columns: 1fr; gap: 10px; }
}

/* ---- the two cards ---- */

.acts-band { padding: 0 0 64px; border-top: 0; }
.acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }

.act {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 13px;
  padding: 34px 32px 30px; border-radius: 22px;
  border: 1px solid var(--line-2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.010)),
    rgba(12,12,16,.86);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 20px 50px rgba(0,0,0,.38);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.act:hover {
  transform: translateY(-5px); border-color: var(--gold-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 30px 66px rgba(0,0,0,.5);
}
.act-glow {
  position: absolute; inset: -45% 25% auto -15%; height: 200px;
  background: radial-gradient(closest-side, rgba(233,185,73,.22), transparent 70%);
  opacity: 0; transition: opacity .45s var(--ease); pointer-events: none;
}
.act:hover .act-glow { opacity: 1; }

.act-ic {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(233,185,73,.17), rgba(233,185,73,.05));
  border: 1px solid var(--gold-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset;
}
.act-ic svg { width: 24px; height: 24px; stroke: var(--gold); fill: none; stroke-width: 1.6; }
.act-name { color: var(--text); font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.act-note { font-size: 14px; color: var(--dim); line-height: 1.6; flex: 1; }
.act-btn { margin-top: 8px; width: 100%; pointer-events: none; }

@media (max-width: 560px) { .act { padding: 28px 22px 24px; border-radius: 18px; } }

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

section.tight { padding: 62px 0; }

.flow2 {
  list-style: none; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative;
}
.flow2::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 27px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 18%, var(--gold-line) 82%, transparent);
}
.flow2 li { position: relative; text-align: center; padding: 0 8px; }
.f2-n {
  position: relative; z-index: 2;
  width: 54px; height: 54px; margin: 0 auto 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--gold-hi);
  background: var(--black); border: 1px solid var(--gold-line);
  box-shadow: 0 0 0 7px var(--black), 0 0 30px -8px rgba(233,185,73,.5);
}
.flow2 b { display: block; color: var(--text); font-size: 15.5px; letter-spacing: -.015em; }
.flow2 li > span:last-child { display: block; font-size: 12.5px; color: var(--dim); margin-top: 4px; }

@media (max-width: 720px) {
  .flow2 { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  .flow2::before { display: none; }
}

/* ---- device row ---- */

.devgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

.dev2 {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 24px 14px 20px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); color: var(--body);
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.dev2:hover { transform: translateY(-4px); border-color: var(--gold-line); background: var(--panel-2); color: var(--body); }
.dev2 svg { width: 26px; height: 26px; stroke: var(--gold); fill: none; stroke-width: 1.5; }
.dev2 b { color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.dev2 > span {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  color: var(--dim); background: rgba(255,255,255,.05);
  padding: 3px 9px; border-radius: 999px;
}
.dev2.live > span { color: var(--gold-hi); background: rgba(233,185,73,.13); border: 1px solid var(--gold-line); }

/* the "optional" marker inside a form label */
.opt { color: var(--dim); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; }