/* Colour system v3. A near-black base with no tint, and ONE gradient taken from the logo
   (gold to ember to rose). Colour comes from that gradient and from the skins themselves. */
:root {
  --ink: #08070d;
  --slate: #0f0e16;
  --slate-2: #16151f;
  --rule: #25232f;
  --bone: #f3f1f7;
  --mist: #9b98ab;
  --gold: #ffb547;
  --gold-deep: #e8902f;
  --ember: #ff7a4d;
  --rose: #ff4f7b;
  --grad: linear-gradient(100deg, #ffe08a 0%, #ffb547 28%, #ff7a4d 62%, #ff4f7b 100%);
  --warm: linear-gradient(135deg, #ffc760, #ff7a4d);
  --up: #4cc9a6;
  --down: #e5566a;
}
body { background: #08070d; }
body::before {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 60vh; z-index: -2; pointer-events: none;
  background: radial-gradient(70% 100% at 50% 130%, rgba(255, 122, 77, .16), transparent 70%);
}
body::after { content: none; }
#ambient, .floaters { display: none !important; }
::selection { background: rgba(255, 181, 71, .35); }

/* ---------- One gradient, used with care ---------- */
.brand b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.w > span.grad { padding-right: .06em; }
.progress { background: var(--grad); }
.btn.gold { background: var(--grad); background-size: 140% 100%; border-color: transparent; color: #1c0b02; box-shadow: 0 10px 34px -12px rgba(255, 122, 77, .7); transition: background-position .4s, transform .1s, box-shadow .2s; }
.btn.gold:hover { background-position: 100% 0; box-shadow: 0 14px 40px -12px rgba(255, 122, 77, .85); }
.btn:not(.gold):hover { border-color: #5b5870; }
.chip { background: var(--slate); }
.chip:hover { border-color: #5b5870; }
.chip[aria-pressed=true], .billing button[aria-pressed=true] { background: var(--grad); border-color: transparent; color: #1c0b02; }

/* ---------- Hero: the chart runs edge to edge ---------- */
.hero::before { background: radial-gradient(closest-side, rgba(255, 122, 77, .13), transparent); width: 700px; height: 460px; }
.hero::after { content: none; }
.hero h1 { font-size: clamp(2.8rem, 7.2vw, 5.6rem); line-height: 1; }
.stage {
  width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; border-left: 0; border-right: 0;
  border-color: var(--rule); aspect-ratio: auto; height: clamp(360px, 62vh, 620px);
  box-shadow: none;
}
.stage:hover { box-shadow: none; }
.stage .handle { background: var(--grad); width: 2px; }
.stage .handle::after { background: var(--ink); border-color: var(--gold); }
.stage .tag.r { color: #ffd593; border-color: rgba(255, 181, 71, .45); }
.demo-note { margin: 0 0 10px; font-size: .84rem; color: var(--mist); letter-spacing: .01em; }

/* ---------- Sections: neutral surfaces ---------- */
body.home .band { background: var(--slate); backdrop-filter: none; }
body.home .band#works, body.home .band#own, body.home .band#pricing { background: var(--slate); }
.tape { background: var(--slate); border-color: var(--rule); }
.tape span { color: #d8d5e4; }
.tape span:nth-child(3n+2) { color: var(--mist); }
.tile { border-color: var(--rule); }
.tile:hover { border-color: var(--gold); box-shadow: 0 18px 50px -20px rgba(255, 122, 77, .5); }

/* Lists and steps share the same gradient */
.facts div { border-image: linear-gradient(180deg, var(--gold), var(--rose)) 1; }
.facts b { color: #fff; }
.sites li b { color: var(--bone); }
.steps li::before { background: var(--grad); border-color: transparent; color: #1c0b02; }
.faq summary::after { color: var(--gold); }
.faq details[open] summary { color: var(--gold); }
.drop { border-color: #3a3748; background: var(--slate); }
.drop .files span { background: var(--ink); }

/* Pricing */
.plan { background: var(--slate); backdrop-filter: none; }
.plan.pro { background: linear-gradient(180deg, #17120f, var(--slate) 60%); box-shadow: 0 40px 90px -50px rgba(255, 122, 77, .6); }
.plan.pro::before { background: conic-gradient(from var(--a), transparent 0 55%, #ffe08a 70%, var(--ember) 82%, var(--rose) 92%, transparent 100%); }
.plan li::before, .plan.pro li::before { border-color: var(--gold); }
.mock { border-color: var(--rule); box-shadow: 0 50px 90px -50px rgba(255, 122, 77, .45), 0 0 0 6px rgba(255, 255, 255, .02); }
.closer .bgc { opacity: .75; }
.closer .bgc::after { background: linear-gradient(90deg, rgba(8, 7, 13, .78), rgba(8, 7, 13, .15)); }
.top { background: rgba(8, 7, 13, .78); border-bottom-color: var(--rule); }
.top.scrolled { background: rgba(8, 7, 13, .94); }
.foot { border-top-color: var(--rule); border-image: none; }

/* Account, admin */
.card, .panel, .stat { background: var(--slate); }
.side { background: var(--slate); }
.rankcard { background: var(--slate); border-color: var(--rule); }
.rankcard b, .ladder li.done b { color: var(--gold); }
.tag.price { background: var(--grad); border-color: transparent; color: #1c0b02; }
.tag.rank { color: #ffd593; border-color: rgba(255, 181, 71, .5); }
.bar i, .rankcard .bar i { background: var(--grad); }
.badge.pro, .badge.approved { background: var(--grad); border-color: transparent; color: #1c0b02; }
.ladder li.here { background: linear-gradient(90deg, rgba(255, 181, 71, .1), transparent); box-shadow: inset 2px 0 0 var(--gold); }

@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
@media (max-width: 900px) { .stage { height: 340px; } }

/* Pro skins section */
.tile .probadge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #1c0b02; background: var(--grad); pointer-events: none; }
.billing.mood { margin-bottom: 22px; }
.proNote { margin: 22px 0 0; max-width: 62ch; }
.proNote a { color: var(--gold); }
@media (max-width: 640px) {
  .billing.mood button { padding: 7px 12px; white-space: nowrap; font-size: .9rem; }
  /* small tiles have no room for the sentence under the name */
  .tile:not(.big) .cap span { display: none; }
  .tile:not(.big) .cap { padding-top: 24px; }
}

/* Seasonal showcase */
.season { background: radial-gradient(900px 300px at 50% 0, rgba(255, 122, 77, .12), transparent 70%); }
.tile .seasonbadge { background: linear-gradient(135deg, #ff7a2d, #b44cff); color: #fff; }

/* "Set up in under a minute": a check mark in each circle instead of a number */
.steps li::before, .how .steps li::before {
  content: "";
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c0b02' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 58% no-repeat,
    var(--grad);
  border-color: transparent;
  box-shadow: 0 0 14px rgba(255, 170, 70, .35);
}