/* Game2Gain website.
   The same palette and the same card language as the desktop app's default
   theme, so the site and the program read as one thing rather than two.

   Colours are named by role and used through variables only. --tint-rgb,
   --accent-rgb and --panel-rgb exist so a colour can be used at any opacity
   without a second hardcoded copy of it drifting out of step. */

:root {
  --bg-deep: #08080a;
  --bg-mid:  #101014;
  --bg-far:  #16060c;

  --grad-1: #2a0c14;
  --grad-2: #1d0710;

  --text: #eae7e9;
  --muted: #9c959b;
  --muted-2: #6a646c;

  --accent-rgb: 216, 40, 60;
  --gold: #d8283c;
  --gold-bright: #ff5566;
  --gold-deep: #7e1220;
  --gold-soft: rgba(var(--accent-rgb), 0.13);
  --on-accent: #14060a;

  --blue-accent: #7fb0d8;
  --green: #45c08c;
  --green-rgb: 69, 192, 140;
  --red: #ff7a85;
  --red-rgb: 255, 122, 133;

  --tint-rgb: 255, 255, 255;
  --panel-rgb: 6, 6, 8;

  --glass: rgba(var(--tint-rgb), 0.042);
  --glass-strong: rgba(var(--tint-rgb), 0.075);
  --glass-border: rgba(var(--tint-rgb), 0.10);
  --glass-border-soft: rgba(var(--tint-rgb), 0.055);
  --panel-dark: rgba(var(--panel-rgb), 0.62);

  --radius: 14px;
  --shell: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  font-family: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   BACKDROP
   ============================================================ */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, var(--grad-1) 0%, transparent 58%),
    radial-gradient(110% 90% at 92% 12%, var(--grad-2) 0%, transparent 60%),
    linear-gradient(165deg, var(--bg-deep) 0%, var(--bg-mid) 48%, var(--bg-far) 100%);
}

.backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 40%, transparent 40%, rgba(var(--panel-rgb), 0.55) 100%);
}

.backdrop svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wave-group { animation: drift 26s ease-in-out infinite; transform-origin: center; }
.wave-group-2 { animation-duration: 34s; animation-direction: reverse; }
.wave-group-3 { animation-duration: 44s; }

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-26px, 16px, 0); }
}

/* ============================================================
   LAYOUT
   ============================================================ */

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

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(var(--panel-rgb), 0.72);
  border-bottom: 1px solid var(--glass-border-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-header .shell {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 66px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.brand img { width: 34px; height: 34px; border-radius: 9px; }

.brand-name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand-name span { color: var(--gold); }

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

.site-nav a {
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.site-nav a:hover { color: var(--text); background: var(--glass); }
.site-nav a.active { color: var(--gold); }

.lang-switch {
  display: flex;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  overflow: hidden;
  margin-left: 6px;
}

.lang-switch button {
  border: none;
  background: transparent;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 6px 11px;
  cursor: pointer;
}
.lang-switch button.active { background: var(--gold); color: var(--on-accent); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 11px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.btn:hover { border-color: var(--gold); background: var(--glass-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--on-accent);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); }

.btn-danger { border-color: rgba(var(--red-rgb), 0.4); color: var(--red); }
.btn-danger:hover { border-color: var(--red); background: rgba(var(--red-rgb), 0.1); }

.btn-small { padding: 7px 13px; font-size: 12px; border-radius: 9px; }
.btn-block { width: 100%; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  padding: 84px 0 64px;
  text-align: center;
}

.hero-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 22px 0 0;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.hero h1 span { color: var(--gold); }

.hero-sub {
  margin: 20px auto 0;
  max-width: 620px;
  font-size: 17px;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.hero-note {
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted-2);
}

/* ============================================================
   SECTIONS
   ============================================================ */

.section { padding: 64px 0; }
.section-narrow { max-width: 760px; margin: 0 auto; }

.section-head { text-align: center; margin-bottom: 40px; }

.section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.section-head h2 {
  margin: 10px 0 0;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section-head p {
  margin: 12px auto 0;
  max-width: 620px;
  color: var(--muted);
}

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

.feature {
  padding: 24px 24px 22px;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--gold-soft);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.feature h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.feature p { margin: 0; font-size: 13.5px; color: var(--muted); }

/* ---- Steps ---- */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.steps li {
  counter-increment: step;
  padding: 22px 22px 20px;
  position: relative;
}

.steps li::before {
  content: counter(step);
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--gold);
  opacity: 0.35;
  line-height: 1;
  margin-bottom: 10px;
}

.steps h3 { margin: 0 0 6px; font-size: 15.5px; }
.steps p { margin: 0; font-size: 13px; color: var(--muted); }

/* ---- Safety callout ---- */

.callout {
  padding: 28px 30px;
  border-left: 3px solid var(--gold);
}

.callout h3 { margin: 0 0 12px; font-size: 19px; }
.callout ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; }
.callout li { margin-bottom: 7px; }

/* ============================================================
   PRICING
   ============================================================ */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
}

.plan { padding: 28px 28px 26px; display: flex; flex-direction: column; }

.plan.featured {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: linear-gradient(170deg, rgba(var(--accent-rgb), 0.09), var(--glass));
  position: relative;
}

.plan-flag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan h3 { margin: 0; font-size: 20px; }

.plan-price {
  margin: 12px 0 4px;
  font-size: 36px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.plan-price small { font-size: 14px; color: var(--muted-2); font-weight: 600; }

/* "Price to come" is a sentence, not a number, and reads absurd at 36px.
   The featured plan carries it until there is an actual figure to show. */
.plan.featured .plan-price { font-size: 24px; line-height: 1.25; }
.pricing-placeholder[disabled] { opacity:.58; cursor:not-allowed; filter:saturate(.35); }
.pricing-placeholder-note { display:block; margin:-7px 0 11px; color:var(--muted); font-size:10px; text-align:center; text-transform:uppercase; letter-spacing:.08em; }

.plan-note { font-size: 12px; color: var(--muted-2); margin: 0 0 18px; }

.plan ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  font-size: 13.5px;
  color: var(--muted);
  flex: 1;
}

.plan li {
  padding: 7px 0 7px 24px;
  position: relative;
}
.plan li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 14px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--gold);
  transform: rotate(45deg);
}
.plan li.off { color: var(--muted-2); }
.plan li.off::before { background: var(--muted-2); opacity: 0.4; }

/* ============================================================
   FORMS
   ============================================================ */

.auth-wrap {
  min-height: calc(100vh - 66px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 64px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 34px 34px 30px;
}

.auth-card h1 { margin: 0 0 6px; font-size: 25px; font-weight: 800; }
.auth-card > p.sub { margin: 0 0 26px; font-size: 13.5px; color: var(--muted); }

.field { display: block; margin-bottom: 16px; }

.field > span {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(var(--panel-rgb), 0.55);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

.field-hint { font-size: 11.5px; color: var(--muted-2); margin: 6px 0 0; line-height: 1.5; }

.form-note {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid var(--glass-border-soft);
  background: rgba(var(--tint-rgb), 0.04);
}
.form-note.error { border-color: rgba(var(--red-rgb), 0.4); background: rgba(var(--red-rgb), 0.08); color: var(--red); }
.form-note.success { border-color: rgba(var(--green-rgb), 0.4); background: rgba(var(--green-rgb), 0.08); color: var(--green); }
.form-note.hidden { display: none; }

.auth-alt {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted-2);
}
.auth-alt a { color: var(--gold); text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

/* ============================================================
   ACCOUNT
   ============================================================ */

.page { padding: 40px 0 80px; }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.page-head h1 { margin: 0; font-size: 27px; font-weight: 800; }

.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 20px;
  align-items: start;
}

.card { padding: 24px 26px; }
.card + .card { margin-top: 18px; }

.card h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
}
.card > p.sub { margin: 0 0 18px; font-size: 13px; color: var(--muted-2); }

.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 18px;
  font-size: 13.5px;
}
.kv dt { color: var(--muted-2); }
.kv dd { margin: 0; color: var(--text); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid var(--glass-border);
  color: var(--muted);
}
/* ---- The signed-in identity in the header --------------------
   One chip: picture, name and the worn rank stacked beside it.
   The whole thing is the link to the account page, which is why
   it gets a border and a hover rather than looking like text
   that happens to have an image next to it. */

.site-nav #nav-username {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.site-nav a:has(#nav-username) {
  padding: 4px 12px 4px 5px;
  border-radius: 999px;
  border: 1px solid rgba(var(--tint-rgb), 0.14);
  background: rgba(var(--tint-rgb), 0.05);
}

.site-nav a:has(#nav-username):hover {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.1);
}

.nav-face {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--text);
  background: linear-gradient(150deg, var(--gold-deep), var(--gold));
  overflow: hidden;
}

.nav-face.has-image { background: none; }

.nav-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.nav-identity-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.nav-name { font-weight: 700; }

.nav-rank {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
}

.nav-rank img { width: 13px; height: 13px; }
.nav-subscription { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.nav-subscription.is-pro { color: var(--gold-bright); }
.nav-subscription.is-plus { color: #f0c96b; text-shadow: 0 0 8px rgba(240,201,107,.26); }

/* ---- Rank crests and tickets --------------------------------
   The same artwork the app uses, so a membership looks the same
   in both places. Sized to the line rather than to the picture:
   a crest that grows the row it sits in is a crest that pushes
   everything else around. */

.rank-crest {
  width: 20px;
  height: 20px;
  vertical-align: -5px;
  margin-right: 6px;
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.5));
}

/* The worn monthly rank, wherever a name is drawn. Small on purpose: it is a
   footnote to the name rather than a competitor with it. */
.worn-crest {
  width: 34px;
  height: 24px;
  object-fit: contain;
  flex: none;
}
.worn-rank-stage { position: relative; display: inline-grid; place-items: center; width: 36px; height: 26px; flex: none; }
.worn-rank-roman { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); color: #fff; font: 900 9px/1 Georgia,serif; text-shadow: 0 1px 2px #000,0 0 5px #000; }

.inventory-card { position: relative; overflow: hidden; }
.inventory-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg,transparent,var(--gold),transparent); opacity: .7; }
.inventory-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inventory-head h2 { margin-top: 2px; }
.inventory-count { min-width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(var(--accent-rgb),.45); border-radius: 50%; color: var(--gold); font-weight: 800; background: rgba(var(--accent-rgb),.1); }
.inventory-group-title { margin: 22px 0 8px; color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.inventory-actions { margin-left: auto; display: grid; gap: 6px; min-width: 135px; }
.inventory-actions select { min-height: 32px; padding: 4px 28px 4px 8px; font-size: 11px; }
.coin-inventory { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.coin-item { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: 10px; min-height: 92px; padding: 10px; border: 1px solid rgba(var(--accent-rgb),.22); border-radius: 12px; background: linear-gradient(145deg,rgba(var(--accent-rgb),.08),rgba(var(--tint-rgb),.02)); }
.coin-item.is-plus { border-color: rgba(255,96,113,.42); box-shadow: inset 0 0 26px rgba(218,31,58,.05); }
.coin-art { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 6px 9px rgba(0,0,0,.5)); }
.coin-info { display: grid; min-width: 0; gap: 2px; }
.coin-info strong { color: var(--text); }
.coin-info small { color: var(--muted); line-height: 1.25; }
.coin-amount { color: var(--gold); font-weight: 800; }
.coin-item .btn { grid-column: 1/-1; width: 100%; text-align: center; }
.rank-inventory { display: grid; gap: 9px; }
.rank-inventory-item { display: grid; grid-template-columns: 74px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 72px; padding: 8px; border: 1px solid var(--glass-border-soft); border-radius: 11px; background: rgba(var(--tint-rgb),.025); }
.rank-inventory-item.is-worn { border-color: rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.07); }
.inventory-rank-stage { position: relative; display: grid; place-items: center; width: 70px; height: 54px; }
.inventory-rank-stage img { max-width: 70px; max-height: 54px; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(0,0,0,.45)); }
.inventory-rank-roman { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff; font: 900 18px/1 Georgia,serif; text-shadow: 0 2px 2px #000,0 0 7px #000; }
.rank-inventory-info { display: grid; min-width: 0; }
.rank-inventory-info small { color: var(--muted); }
}

.ticket-list {
  list-style: none;
  margin: 14px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ticket-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ticket-art {
  width: 74px;
  height: auto;
  flex: none;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.4));
}

.ticket-worth {
  font-weight: 700;
  color: var(--gold);
  font-size: 13px;
}

.ticket-origin,
.ticket-expiry {
  color: var(--muted);
  font-size: 12px;
}

.badge.pro { border-color: rgba(var(--accent-rgb), 0.5); color: var(--gold); background: var(--gold-soft); }
.badge.dev { border-color: rgba(var(--accent-rgb), 0.5); color: var(--blue-accent); background: rgba(var(--accent-rgb), 0.1); }

/* A link inside a note took the browser's default blue, which on this
   near-black red ground is close to unreadable. Every other link on the site
   already uses the accent; this one was simply never given it. */
.form-note a { color: var(--gold); }
.form-note a:hover { text-decoration: underline; }
.badge.ok { border-color: rgba(var(--green-rgb), 0.45); color: var(--green); }
.badge.warn { border-color: rgba(var(--red-rgb), 0.45); color: var(--red); }

/* ---- Friends ---- */

.friend-list { list-style: none; margin: 0; padding: 0; }

.friend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  margin-bottom: 7px;
  border: 1px solid var(--glass-border-soft);
  border-radius: 11px;
  background: linear-gradient(110deg,rgba(var(--tint-rgb),.035),rgba(var(--accent-rgb),.025));
  transition: transform .16s ease,border-color .16s ease,background .16s ease;
}
.friend:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.3); background: linear-gradient(110deg,rgba(var(--tint-rgb),.055),rgba(var(--accent-rgb),.06)); }
.friend:last-child { margin-bottom: 0; }

/* ---- Leaderboard --------------------------------------------
   A list, not a table. Every row is rank, who, and two numbers,
   and a table would only add borders around three columns that
   already line up.

   The podium rows are marked by a left edge rather than by a
   different background: three highlighted blocks at the top of a
   dark card read as a selection, one bright edge reads as rank. */

.lb-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
}

.lb-month {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lb-prizes {
  list-style: none;
  margin: 14px 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lb-prize {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lb-place {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--on-accent, #12100f);
  background: rgba(var(--tint-rgb), 0.25);
}

.lb-place-1 { background: linear-gradient(150deg, #f0d089, #c99a34); }
.lb-place-2 { background: linear-gradient(150deg, #dfe3ea, #9aa3b2); }
.lb-place-3 { background: linear-gradient(150deg, #d9a071, #a4652f); }

.lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.lb-row {
  display: grid;
  grid-template-columns: 40px minmax(180px,1fr) auto minmax(145px,.45fr);
  align-items: center;
  gap: 14px;
  padding: 11px 12px 11px 9px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.07);
}
.lb-progress { display: grid; justify-items: end; line-height: 1.25; }
.lb-progress strong { font-size: 12px; color: var(--text); }
.lb-progress span { font-size: 12px; color: var(--gold); font-weight: 750; }
.lb-progress small { color: var(--muted-2); font-size: 10px; }

.chat-launcher { position: fixed; right: 18px; top: 46%; z-index: 72; width: 52px; height: 52px; border: 1px solid rgba(var(--accent-rgb),.55); border-radius: 16px 4px 4px 16px; color: transparent; background: rgba(16,10,14,.96); box-shadow: 0 12px 30px rgba(0,0,0,.42); cursor: pointer; }
.chat-launcher::before { content: ""; position: absolute; inset: 14px 12px 15px; border: 2px solid var(--gold); border-radius: 7px; }
.chat-launcher::after { content: ""; position: absolute; left: 15px; bottom: 12px; width: 8px; height: 8px; border-left: 2px solid var(--gold); transform: skewY(-35deg); }
.chat-unread,.mini-unread { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; color: #fff; background: var(--gold); font-size: 10px; font-weight: 800; }
.chat-unread { position: absolute; right: -5px; top: -6px; }
.chat-drawer { position: fixed; z-index: 71; right: 0; top: 0; width: min(390px,100vw); height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto auto; padding: 18px; border-left: 1px solid rgba(var(--accent-rgb),.38); background: rgba(9,8,11,.985); box-shadow: -20px 0 55px rgba(0,0,0,.5); transform: translateX(102%); transition: transform .22s ease; }
.chat-drawer.is-open { transform: translateX(0); }
.chat-drawer>header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-bottom: 12px; }
.chat-drawer>header div { display: grid; }
.chat-drawer>header span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.chat-drawer>header strong { font-size: 16px; }
.chat-drawer>header button { width: 34px; height: 34px; border: 1px solid var(--glass-border); border-radius: 9px; color: var(--text); background: var(--glass); font-size: 20px; }
.chat-friend-strip { display: flex; gap: 7px; overflow-x: auto; padding: 5px 0 12px; }
.chat-friend { position: relative; min-width: 74px; display: grid; justify-items: center; gap: 4px; padding: 7px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; font-size: 10px; }
.chat-friend.is-active { color: var(--text); border-color: rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.08); }
.chat-friend .friend-avatar { width: 34px; height: 34px; }
.chat-friend .mini-unread { position: absolute; right: 3px; top: 1px; }
.web-chat-log { list-style: none; margin: 0; padding: 12px 3px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; border-top: 1px solid var(--glass-border-soft); }
.web-chat-message { align-self: flex-start; display: grid; max-width: 82%; padding: 8px 10px; border-radius: 4px 12px 12px 12px; background: var(--glass-strong); }
.web-chat-message.is-mine { align-self: flex-end; border-radius: 12px 4px 12px 12px; background: rgba(var(--accent-rgb),.18); }
.web-chat-message span { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.web-chat-message time { justify-self: end; color: var(--muted-2); font-size: 9px; }
.web-chat-form { display: flex; gap: 7px; padding-top: 10px; }
.web-chat-form input { min-width: 0; margin: 0; }
.web-chat-form button { flex: none; }

@media (max-width:760px) { .lb-row { grid-template-columns: 32px minmax(0,1fr) auto; }.lb-progress { grid-column: 2/-1; grid-template-columns: repeat(3,auto); justify-content: start; gap: 8px; justify-items: start; }.coin-inventory { grid-template-columns: 1fr; }.inventory-actions { grid-column: 1/-1; margin: 0; width: 100%; }.ticket-row { flex-wrap: wrap; }.chat-launcher { right: 8px; } }

.lb-row:last-child { border-bottom: none; }
.lb-row.is-podium { border-left-color: rgba(var(--accent-rgb), 0.85); }
.lb-row.is-you { background: rgba(var(--accent-rgb), 0.09); }

.lb-rank {
  font-size: 17px;
  font-weight: 800;
  color: var(--muted);
  text-align: right;
}

.lb-row.is-podium .lb-rank { color: var(--gold); }

.lb-who {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.lb-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  min-width: 0;
}

.lb-anon {
  color: var(--muted);
  font-style: italic;
  font-weight: 500;
}

.lb-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.lb-kcal {
  font-weight: 800;
  color: var(--gold);
  font-size: 14px;
}

.lb-sets {
  font-size: 12px;
  color: var(--muted);
}

/* ---- Profile pictures ---------------------------------------
   The initials keep their gradient as the fallback. A picture
   covers it completely, so nothing of the gradient shows through
   at the edges of a photo that is not quite square. */

.friend-avatar.has-image,
.profile-avatar.has-image {
  background: none;
}

/* Clipped by the image's own radius, not by overflow on the parent: the
   presence dot hangs off the corner of .friend-avatar and hiding overflow
   there would cut it in half. */
.friend-avatar img,
.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Paid membership lives on the portrait itself. The artwork is behind a
   slightly smaller photo, which hides imperfect inner edges and stays legible
   even in compact lists. The header avatar is intentionally excluded in JS. */
.friend-avatar.has-pro-frame,
.friend-avatar.has-pro-plus-frame,
.profile-avatar.has-pro-frame,
.profile-avatar.has-pro-plus-frame { overflow: visible; border-color: transparent; isolation: isolate; }
.friend-avatar.has-pro-frame::before,
.friend-avatar.has-pro-plus-frame::before,
.profile-avatar.has-pro-frame::before,
.profile-avatar.has-pro-plus-frame::before {
  content: ""; position: absolute; inset: -14%; z-index: 0;
  background: center / contain no-repeat; pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.48));
}
.friend-avatar.has-pro-frame::before,
.profile-avatar.has-pro-frame::before { background-image: url('/assets/frames/pro-border.webp'); }
.friend-avatar.has-pro-plus-frame::before,
.profile-avatar.has-pro-plus-frame::before { background-image: url('/assets/frames/pro-plus-border.webp'); }
.friend-avatar.has-pro-frame img,
.friend-avatar.has-pro-plus-frame img,
.profile-avatar.has-pro-frame img,
.profile-avatar.has-pro-plus-frame img {
  position: absolute; inset: 8%; z-index: 1; width: 84%; height: 84%;
}
.friend-avatar.has-pro-frame .dot,
.friend-avatar.has-pro-plus-frame .dot { z-index: 3; }

.profile-avatar {
  position: relative;
  width: 84px;
  height: 84px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  background: linear-gradient(150deg, var(--gold-deep), var(--gold));
  border: 1px solid var(--glass-border);
  overflow: hidden;
}

.avatar-edit {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 14px 0 24px;
  padding-inline: 4px;
}

.avatar-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* The file input is hidden and driven by its label, because the browser's own
   control cannot be styled and reads as a foreign object on the page. The
   label is a real label, so the keyboard still reaches it. */
.avatar-controls .field-hint {
  flex-basis: 100%;
  margin: 2px 0 0;
}

.friend-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  background: linear-gradient(150deg, var(--gold-deep), var(--gold));
  border: 1px solid var(--glass-border);
}

.dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #0b1330;
  background: var(--muted-2);
}
.dot.online { background: var(--green); box-shadow: 0 0 8px rgba(var(--green-rgb), 0.7); }
.dot.away { background: var(--gold); }
.dot.offline { background: var(--muted-2); }

.friend-main { flex: 1; min-width: 0; }
.friend-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.friend-status { font-size: 11.5px; color: var(--muted-2); }

.friend-actions { display: flex; gap: 6px; flex-shrink: 0; }

.empty-note {
  padding: 18px 0;
  font-size: 13px;
  color: var(--muted-2);
  text-align: center;
}

.inline-form { display: flex; gap: 8px; margin-top: 14px; }
.inline-form input { flex: 1; }

/* ============================================================
   DEV PANEL
   ============================================================ */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.stat-tile {
  padding: 16px 14px;
  text-align: center;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border-soft);
}

.stat-tile .v { display: block; font-size: 26px; font-weight: 800; color: var(--gold); line-height: 1.1; }
.stat-tile .l {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-2);
}

.filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.filter-row input[type="search"] { flex: 1; min-width: 200px; }
.filter-row select { width: auto; min-width: 150px; }

.table-wrap { overflow-x: auto; }

/* Account administration needs more horizontal room than normal content. */
.dev-page .shell { max-width: 1560px; }

table.users {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 1320px;
}

table.users th {
  text-align: left;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-bottom: 1px solid var(--glass-border-soft);
  white-space: nowrap;
}

table.users td {
  padding: 12px;
  border-bottom: 1px solid var(--glass-border-soft);
  vertical-align: middle;
}

table.users tr:last-child td { border-bottom: none; }
table.users tr:hover td { background: rgba(var(--tint-rgb), 0.025); }

.user-cell { display: flex; align-items: center; gap: 10px; }
.user-cell .name { font-weight: 600; }
.user-cell .mail { font-size: 11.5px; color: var(--muted-2); }

.dev-email-address {
  max-width: 220px;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.dev-membership-time {
  min-width: 112px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.row-actions { display: flex; gap: 5px; flex-wrap: wrap; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted-2);
}

.dev-warning {
  margin-bottom: 22px;
  padding: 13px 16px;
  border-radius: 11px;
  border: 1px solid rgba(var(--red-rgb), 0.35);
  background: rgba(var(--red-rgb), 0.07);
  color: var(--red);
  font-size: 13px;
}

.dev-prize-launch {
  position: fixed;
  right: 0;
  top: 42%;
  z-index: 32;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 48px;
  padding: 12px 13px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-right: 0;
  border-radius: 13px 0 0 13px;
  background: rgba(var(--panel-rgb), 0.92);
  color: var(--gold);
  box-shadow: -8px 8px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  cursor: pointer;
  transition: max-width 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.dev-prize-launch:hover,
.dev-prize-launch:focus-visible {
  max-width: 230px;
  background: rgba(var(--panel-rgb), 0.98);
  border-color: rgba(var(--accent-rgb), 0.7);
}

.dev-prize-launch svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dev-prize-launch span { white-space: nowrap; font-size: 12px; font-weight: 750; }

.dev-drawer-shade {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(var(--panel-rgb), 0.62);
  backdrop-filter: blur(3px);
  cursor: default;
}

.dev-prize-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 61;
  width: min(420px, calc(100vw - 24px));
  height: 100vh;
  padding: 28px;
  overflow-y: auto;
  border-left: 1px solid var(--glass-border);
  background: rgba(var(--panel-rgb), 0.97);
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.42);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.24s ease, visibility 0.24s;
}

.dev-user-drawer { width: min(520px, calc(100vw - 24px)); }
.dev-user-summary { display:flex; align-items:center; gap:14px; margin-bottom:18px; padding:14px; border:1px solid var(--glass-border-soft); border-radius:14px; background:rgba(var(--tint-rgb),.035); }
.dev-user-summary .friend-avatar { width:48px; height:48px; flex:0 0 48px; }
.dev-user-summary-copy { display:grid; min-width:0; gap:3px; }
.dev-user-summary-copy > strong { display:flex; align-items:center; gap:7px; font-size:16px; }
.dev-user-summary-copy > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; }
.dev-user-summary-facts { display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.dev-user-actions { display:grid; gap:10px; }
.badge.security-risk { color:#ffbe55; border-color:rgba(255,190,85,.42); background:rgba(255,190,85,.08); }
.dev-security-summary { margin-bottom:9px; color:var(--muted); font-size:12px; }
.dev-security-log { display:grid; gap:7px; max-height:290px; overflow:auto; padding-right:3px; }
.dev-security-event { padding:9px 10px; border:1px solid var(--glass-border-soft); border-radius:10px; background:rgba(var(--tint-rgb),.025); }
.dev-security-event.warning { border-left:3px solid #ffbe55; }
.dev-security-event.critical { border-left:3px solid #ff4d68; }
.dev-security-event-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.dev-security-event-head strong { font-size:12px; }
.dev-security-event-head span { color:var(--muted); font-size:10px; white-space:nowrap; }
.dev-security-event p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.dev-manage-btn { min-width:92px; }

.dev-prize-drawer.is-open { transform: translateX(0); visibility: visible; }
.dev-drawer-open { overflow: hidden; }

.dev-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.dev-drawer-head h2 { margin-bottom: 6px; }
.dev-drawer-head .sub { margin: 0; }

.dev-drawer-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--glass);
  color: var(--text);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.dev-drawer-close:hover { background: var(--glass-strong); }

.dev-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .dev-prize-launch { top: auto; bottom: 22px; }
  .dev-prize-drawer { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .dev-prize-launch,
  .dev-prize-drawer { transition: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--glass-border-soft);
  background: rgba(var(--panel-rgb), 0.5);
  padding: 34px 0;
  margin-top: 40px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted-2);
}

.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--muted-2); text-decoration: none; }
.footer-links a:hover { color: var(--gold); }

/* ============================================================
   LEGAL / PROSE
   ============================================================ */

.prose { font-size: 14.5px; color: var(--muted); }
.prose h2 { color: var(--text); font-size: 20px; margin: 32px 0 10px; }
.prose h3 { color: var(--text); font-size: 16px; margin: 22px 0 8px; }
.prose p { margin: 0 0 12px; }
.prose ul { padding-left: 20px; }
.prose a { color: var(--gold); }

.placeholder-block {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px dashed rgba(var(--accent-rgb), 0.4);
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 13px;
  margin: 0 0 20px;
}

/* ============================================================
   UTILITIES
   ============================================================ */

.hidden { display: none !important; }
.spacer { flex: 1; }
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

.loading {
  padding: 40px 0;
  text-align: center;
  color: var(--muted-2);
  font-size: 13px;
}

/* ============================================================
   NARROW SCREENS
   ============================================================ */

@media (max-width: 900px) {
  .account-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .site-header .shell { height: auto; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
  .site-nav { width: 100%; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; }
  .hero { padding: 56px 0 44px; }
  .section { padding: 46px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   BACKDROP COLOURS
   ============================================================
   The wave and lattice colours come from the palette rather than
   from attributes in the markup, the same way the desktop app
   does it. One place to change, and no chance of the site's
   backdrop drifting away from the app's. */

.backdrop .wb-a, .backdrop .wb-b, .backdrop .wb-c { stop-color: var(--gold); }
.backdrop .wg-a, .backdrop .wg-b, .backdrop .wg-c { stop-color: var(--gold-deep); }
.backdrop .hexes { stroke: var(--gold); }

/* ============================================================
   RHYTHM
   ============================================================
   The page said what it had to say in about six screens of
   scrolling, most of which was air. Sections are tighter and the
   headings carry a little more weight, so each idea occupies
   roughly one glance instead of one scroll.

   The hero keeps more room than the rest on purpose: it is the
   only part of the page a visitor is guaranteed to look at. */

.hero { padding: 64px 0 52px; }
.section { padding: 48px 0; }
.section-head { margin-bottom: 30px; }
.section-head p { max-width: 58ch; }

@media (max-width: 720px) {
  .hero { padding: 44px 0 36px; }
  .section { padding: 36px 0; }
}

/* ============================================================
   MARKETING LAYER
   ============================================================
   Everything below was added for the selling side of the site:
   the reworked hero, the outcome band, the empty social proof
   slot, the three price tiers, the objection list and the ad
   placeholders. Appended rather than woven in, so the older
   rules above keep working exactly as they did.

   Colours come from the existing variables only, so a theme
   change still reaches every one of these blocks. */

/* ---- Hero: three short claims under the lead paragraph ---- */

.hero-points {
  list-style: none;
  margin: 18px 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font-size: 13.5px;
  color: var(--muted);
}

.hero-points li {
  position: relative;
  padding-left: 20px;
}

.hero-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* The pricing page carries its title as an h1 in a section head, so it
   needs the same weight the h2s get everywhere else. */

.section-head h1 {
  margin: 10px 0 0;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---- Outcome band ---- */

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.outcome { padding: 22px 24px; }
.outcome h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; }
.outcome p { margin: 0; font-size: 13.5px; color: var(--muted); }

/* ---- Social proof: an honest hole in the page ----
   Dashed rather than solid on purpose: it should read as a
   reserved space, not as a card someone forgot to fill. */

.proof-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

.proof-slot {
  padding: 26px 28px;
  border-style: dashed;
  border-color: var(--glass-border);
  text-align: center;
}

.proof-slot h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--muted); }
.proof-slot p { margin: 0 auto 18px; font-size: 13.5px; color: var(--muted-2); max-width: 52ch; }

/* ---- Price tiers ----
   Three across instead of the two the older .plans grid was
   built for, so it gets its own container and leaves that one
   untouched. */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 20px;
  max-width: 1020px;
  margin: 0 auto;
  align-items: stretch;
}

.tiers .plan { position: relative; }

/* The featured card carries a real figure now, so it is sized
   like the other prices rather than like a sentence. */
.tiers .plan.featured .plan-price { font-size: 36px; line-height: 1; }

.tier-period {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-2);
}

.paypal-preview {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 112, 186, 0.32);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 112, 186, 0.09), rgba(0, 48, 135, 0.04));
}

.paypal-wordmark { color: #009cde; font-size: 15px; font-weight: 700; letter-spacing: -0.04em; }
.paypal-wordmark strong { color: #003087; }
.paypal-preview-copy { color: var(--text); font-size: 11.5px; font-weight: 650; }
.paypal-preview-badge {
  padding: 3px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tiers-note {
  max-width: 62ch;
  margin: 18px auto 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted-2);
  line-height: 1.6;
}

.tiers-note a { color: var(--gold); text-decoration: none; }
.tiers-note a:hover { text-decoration: underline; }

/* The comparison table keeps its own horizontal scroll on small screens.
   Saying so beats leaving people to discover the cut off column. */

.scroll-hint { display: none; }

@media (max-width: 800px) {
  .scroll-hint { display: block; }
}

/* ---- Objection handling ---- */

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

/* Four questions in a 3 + 1 row leaves a hole two thirds of a row wide, which
   reads as something failing to load. Two by two is the shape four items
   actually have, and it gives the answers a comfortable line length. */
.faq-grid-4 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

.faq-item { padding: 22px 24px; }
.faq-item h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; }
.faq-item p { margin: 0; font-size: 13.5px; color: var(--muted); }
.faq-item a { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--gold); text-decoration: none; }
.faq-item a:hover { text-decoration: underline; }

/* ---- Comparison table on the pricing page ---- */

table.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 620px;
}

table.compare th,
table.compare td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--glass-border-soft);
  text-align: center;
  vertical-align: middle;
}

table.compare thead th {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}

table.compare thead th:first-child,
table.compare tbody th {
  text-align: left;
}

table.compare tbody th {
  font-weight: 600;
  color: var(--text);
  width: 42%;
}

table.compare tbody td { color: var(--muted); }
table.compare tbody tr:last-child th,
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare tbody tr:hover th,
table.compare tbody tr:hover td { background: rgba(var(--tint-rgb), 0.025); }

.pricing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

/* ============================================================
   AD PLACEHOLDERS
   ============================================================
   Reserved space for advertising that every visitor sees,
   signed in or not. Each slot keeps its full height while it is
   empty, so dropping a real creative into .ad-frame later does
   not push the rest of the page down.

   Sizes are the IAB standards named in the HTML comment beside
   each slot: 728x90 leaderboard, 320x100 large mobile banner as
   its narrow-screen replacement, 300x250 medium rectangle.

   Deliberately quiet styling and an always visible label: an ad
   here should look like an ad, not like part of the page. */

/* Enough air below a band that the pricing cards' flags never crowd it. */
.ad-band { padding: 6px 0 22px; }

.ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 auto;
}

.ad-tag {
  align-self: center;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.ad-frame {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--glass-border);
  border-radius: 10px;
  background: var(--glass);
  overflow: hidden;
}

.ad-empty {
  font-size: 11.5px;
  color: var(--muted-2);
  text-align: center;
  padding: 0 12px;
}

/* 728x90 leaderboard. */
.ad-leaderboard .ad-frame { width: 728px; height: 90px; }

/* 300x250 medium rectangle, same size at every width. */
.ad-rect .ad-frame { width: 300px; height: 250px; }

@media (max-width: 900px) {
  .proof-layout,
  .pricing-layout { grid-template-columns: minmax(0, 1fr); }
  .proof-layout .ad-slot,
  .pricing-layout .ad-slot { margin-top: 4px; }
}

@media (max-width: 800px) {
  /* 320x100 large mobile banner takes over from the leaderboard. */
  .ad-leaderboard .ad-frame { width: 320px; height: 100px; }
}

/* ---- Spacing helper used by the pricing page ---- */

.mt-40 { margin-top: 40px; }

/* ============================================================
   PAYBLOOD INTERNAL CHECKOUT
   ============================================================ */
.payblood-mini { color: #d7d1dc; letter-spacing: -0.03em; }
.payblood-mini strong { color: #d81f45; }

.payblood-page {
  min-height: 100vh;
  background: #08060b;
  color: #eee9f0;
}
.payblood-backdrop {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 8%, rgba(148, 16, 48, .3), transparent 32%),
    radial-gradient(circle at 85% 80%, rgba(83, 36, 112, .2), transparent 35%),
    linear-gradient(135deg, #07050a, #130911 55%, #08060b);
}
.payblood-header {
  position: relative; z-index: 1; display: flex; align-items: center;
  justify-content: space-between; max-width: 1080px; margin: 0 auto;
  padding: 26px 24px;
}
.payblood-brand {
  display: flex; align-items: center; gap: 10px; color: #e9e2ec;
  font-family: Georgia, serif; font-size: 24px; text-decoration: none;
}
.payblood-brand strong { color: #dc234d; }
.payblood-drop { color: #dc234d; text-shadow: 0 0 18px rgba(220,35,77,.7); }
.payblood-wrap { position: relative; z-index: 1; padding: 36px 20px 80px; }
.payblood-checkout {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  max-width: 980px; margin: 0 auto; overflow: hidden;
  border: 1px solid rgba(216,31,69,.3); border-radius: 22px;
  background: rgba(16,12,19,.88); box-shadow: 0 28px 90px rgba(0,0,0,.5);
}
.payblood-main { padding: clamp(28px, 5vw, 56px); }
.payblood-back { color: #a99eae; font-size: 12px; text-decoration: none; }
.payblood-kicker {
  margin: 42px 0 10px; color: #dc234d; font-size: 10px; font-weight: 850;
  letter-spacing: .18em; text-transform: uppercase;
}
.payblood-main h1 {
  margin: 0; font-family: Georgia, serif; font-size: clamp(34px, 5vw, 55px);
  font-weight: 500; line-height: 1.05;
}
.payblood-sub { max-width: 52ch; color: #a99eae; line-height: 1.7; }
.payblood-wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px 0 16px; }
.payblood-wallet div {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
  padding: 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px;
  background: rgba(255,255,255,.035); font-size: 12px;
}
.coin-gem { color: #ce2448; }.coin-gem.plus { color: #b974e5; }
.payblood-pay {
  width: 100%; min-height: 52px; margin-top: 8px; border: 0; border-radius: 12px;
  background: linear-gradient(135deg, #b81238, #e22c55); color: white;
  font: inherit; font-weight: 800; cursor: pointer;
  box-shadow: 0 12px 28px rgba(191,18,57,.25);
}
.payblood-pay:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .38; box-shadow: none; }
.payblood-safety { color: #756b78; font-size: 10.5px; text-align: center; }
.payblood-invoice {
  position: relative; padding: clamp(28px, 4vw, 46px);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border-left: 1px solid rgba(255,255,255,.08);
}
.invoice-top,.invoice-line,.invoice-total { display: flex; justify-content: space-between; gap: 20px; }
.invoice-top { align-items: center; margin-bottom: 8px; color: #a99eae; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.invoice-status { padding: 5px 8px; border: 1px solid rgba(216,31,69,.4); border-radius: 999px; color: #e45b78; }
.invoice-status.paid { border-color: rgba(77,196,139,.45); color: #62d4a0; }
.invoice-number { margin-bottom: 42px; color: #6f6573; font-family: monospace; font-size: 11px; }
.invoice-line { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.07); color: #9f95a3; font-size: 12px; }
.invoice-line strong { color: #e8e1eb; text-align: right; }
.invoice-total { margin-top: 20px; align-items: end; }
.invoice-total strong { color: #ed3a60; font-size: 23px; }
.payblood-success { margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); text-align: center; }
.success-seal { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto; border: 1px solid #45c08c; border-radius: 50%; color: #62d4a0; }
.payblood-success h2 { font-family: Georgia, serif; font-weight: 500; }
.payblood-success p { color: #a99eae; font-size: 12px; }
.dev-wallet { white-space: nowrap; }
.bloodcoin-count { color: #cf3959; font-size: 11px; font-weight: 750; }
.bloodcoin-count.plus { color: #b974e5; margin-top: 4px; }
.dev-rank-grant { display: grid; grid-template-columns:minmax(132px,1fr) auto; gap: 6px; align-items: center; width: 100%; }
.dev-rank-select { width: 132px; min-height: 30px; padding: 4px 24px 4px 7px; border-radius: 7px; font-size: 11px; }
.dev-rank-grant .dev-rank-select { width:100%; }
.dev-action-group { display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding:12px; border:1px solid var(--glass-border-soft); border-radius:12px; background:rgba(var(--tint-rgb),.022); }
.dev-action-group-label { flex:0 0 100%; color:var(--muted-2); font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.dev-action-group .btn:disabled { opacity:.35; cursor:not-allowed; }
.row-actions { display:flex; gap:5px; min-width:0; }
.dev-create-card { margin-bottom:18px; }
.dev-section-head h2 { margin:0 0 4px; }
.dev-section-head .sub { margin:0 0 16px; }
.dev-create-form { display:grid; grid-template-columns:minmax(150px,1fr) minmax(170px,1fr) minmax(210px,1.2fr) auto; gap:10px; align-items:end; }
.dev-create-form .field { margin:0; }
.dev-create-form .btn { min-height:42px; margin:0; }
@media (max-width:900px) { .dev-create-form { grid-template-columns:1fr 1fr; }.dev-create-form .btn { width:100%; } }
@media (max-width:560px) { .dev-create-form { grid-template-columns:1fr; }.dev-rank-grant { grid-template-columns:1fr; } }

/* Rank ladder: one vertical progression, with every division shown as the
   item it becomes at month end. The dark medallion behind the numeral keeps
   it readable even on the brightest crystal artwork. */
.rank-ladder-section { position: relative; margin-top: 64px; padding: 42px 0 18px; }
.rank-ladder-section::before { content: ""; position: absolute; top: 0; left: 50%; width: min(720px, 84%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(216,40,60,.55), transparent); }
.rank-ladder-head { max-width: 720px; margin: 0 auto 42px; text-align: center; }
.rank-ladder-kicker { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.rank-ladder { display: grid; gap: 22px; max-width: 1120px; margin: 0 auto; }
.rank-tier { position: relative; padding: 18px 0 30px; }
.rank-tier:not(:last-child)::after { content: ""; position: absolute; bottom: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); }
.rank-tier-heading { display: flex; justify-content: center; align-items: center; gap: 13px; margin-bottom: 4px; text-align: center; }
.rank-tier-heading h3 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: .025em; }
.rank-tier-step { color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .18em; opacity: .8; }
.rank-tier-variants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: clamp(8px, 2vw, 26px); }
.rank-tier-challenger .rank-tier-variants,
.rank-tier-grandmaster .rank-tier-variants,
.rank-tier-master .rank-tier-variants { grid-template-columns: minmax(280px, 560px); justify-content: center; }
.rank-visual { position: relative; display: grid; place-items: center; margin: 0; min-width: 0; min-height: 210px; overflow: visible; }
.rank-visual img { display: block; width: 100%; height: clamp(185px, 19vw, 270px); object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.48)); transition: transform .25s ease, filter .25s ease; }
.rank-visual:hover img { transform: translateY(-4px) scale(1.025); filter: drop-shadow(0 22px 30px rgba(0,0,0,.58)); }
.rank-roman { position: absolute; inset: 48% auto auto 50%; transform: translate(-50%, -50%); color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 4.4vw, 62px); font-weight: 900; line-height: 1; letter-spacing: -.05em; -webkit-text-stroke: 1px rgba(15,8,10,.92); text-shadow: 0 3px 2px #000, 0 0 8px #000, 0 0 22px rgba(0,0,0,.95); filter: drop-shadow(0 4px 5px #000); }
.rank-visual figcaption { margin-top: -16px; color: var(--text); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-align: center; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.rank-tier-challenger .rank-visual img { height: clamp(260px, 35vw, 430px); }
.rank-tier-grandmaster .rank-visual img,
.rank-tier-master .rank-visual img { height: clamp(230px, 31vw, 380px); }
@media (max-width: 760px) { .rank-tier-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rank-visual img { height: clamp(175px, 42vw, 245px); } }
@media (max-width: 440px) { .rank-ladder { gap: 8px; } .rank-tier { padding-bottom: 22px; } .rank-visual { min-height: 155px; } .rank-visual img { height: 165px; } .rank-tier-challenger .rank-visual img, .rank-tier-grandmaster .rank-visual img, .rank-tier-master .rank-visual img { height: 225px; } }

/* ============================================================
   RELEASE CANDIDATE DESIGN SYSTEM
   ============================================================ */
:root { --shell: 1240px; --radius: 18px; --surface: rgba(16,14,19,.76); --surface-2: rgba(27,20,25,.78); --hairline: rgba(255,255,255,.085); }
body { font-size: 15px; line-height: 1.65; background: #070709; }
.backdrop { background: radial-gradient(80% 65% at 52% -8%, rgba(128,18,36,.28), transparent 70%), radial-gradient(60% 55% at 92% 35%, rgba(73,12,28,.18), transparent 72%), linear-gradient(180deg,#09090c,#08070a 52%,#0d070a); }
.shell { padding-left: clamp(18px,3.2vw,40px); padding-right: clamp(18px,3.2vw,40px); }
.glass { background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); border-color: var(--hairline); border-radius: var(--radius); box-shadow: 0 22px 70px rgba(0,0,0,.28); backdrop-filter: blur(14px); }
.site-header { background: rgba(8,8,11,.82); border-color: rgba(255,255,255,.065); }
.site-header .shell { height: 72px; }
.brand img { width: 38px; height: 38px; box-shadow: 0 0 24px rgba(var(--accent-rgb),.22); }
.brand-name { font-size: 20px; }
.site-nav a { padding: 9px 12px; font-size: 12.5px; }
.nav-toggle { display:none; margin-left:auto; width:42px; height:42px; border:1px solid var(--glass-border); border-radius:11px; background:var(--glass); padding:10px; }
.nav-toggle span { display:block; height:2px; margin:4px 0; border-radius:2px; background:var(--text); }
.btn { min-height: 44px; padding: 11px 20px; border-radius: 12px; }
.btn-primary { color:#fff; background: linear-gradient(135deg,#ef3d55,#94172b); box-shadow:0 12px 34px rgba(216,40,60,.22); }
.btn-primary:hover { color:#fff; transform:translateY(-1px); background:linear-gradient(135deg,#ff5269,#a91c33); }
.hero { padding: clamp(70px,9vw,118px) 0 82px; text-align:left; overflow:hidden; }
.hero-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr); align-items:center; gap:clamp(30px,6vw,86px); }
.hero-copy { position:relative; z-index:2; }
.hero h1 { max-width:760px; margin-top:20px; font-size:clamp(46px,6.6vw,82px); line-height:.98; letter-spacing:-.048em; }
.hero-sub { margin:22px 0 0; max-width:650px; font-size:18px; }
.hero-points { display:grid; grid-template-columns:1fr; gap:8px; margin:25px 0 0; padding:0; list-style:none; color:#c9c2c7; }
.hero-points li::before { content:'✓'; color:var(--gold-bright); margin-right:10px; font-weight:900; }
.hero-actions { justify-content:flex-start; margin-top:30px; }
.download-actions { justify-content:center; }
.changelog-page { padding-bottom:48px; }
.changelog-head { max-width:680px; margin:0 auto 30px; text-align:center; }
.changelog-list { position:relative; display:grid; gap:16px; }
.changelog-list::before { content:""; position:absolute; left:22px; top:28px; bottom:28px; width:1px; background:linear-gradient(var(--accent),rgba(var(--accent-rgb),.08)); }
.changelog-entry { position:relative; margin-left:48px; padding:24px 28px; }
.changelog-entry::before { content:""; position:absolute; left:-33px; top:29px; width:11px; height:11px; border:3px solid var(--bg); border-radius:50%; background:var(--muted-2); box-shadow:0 0 0 1px var(--glass-border); }
.changelog-entry.is-latest { border-color:rgba(var(--accent-rgb),.42); }
.changelog-entry.is-latest::before { background:var(--accent); box-shadow:0 0 16px rgba(var(--accent-rgb),.55); }
.changelog-entry header { display:flex; align-items:center; gap:10px; margin-bottom:8px; color:var(--muted-2); font-size:11px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.changelog-entry header span { padding:3px 7px; border-radius:999px; color:var(--gold); background:rgba(var(--accent-rgb),.12); }
.changelog-entry h2 { margin:0 0 12px; font-size:20px; }
.changelog-entry ul { margin:0; padding-left:19px; color:var(--muted); font-size:13px; line-height:1.65; }
.changelog-entry li+li { margin-top:5px; }
@media (max-width:560px) { .changelog-list::before { left:8px; }.changelog-entry { margin-left:28px; padding:20px; }.changelog-entry::before { left:-26px; }.download-actions { display:grid; }.download-actions .btn { width:100%; } }
.hero-showcase { position:relative; min-height:500px; display:grid; place-items:center; isolation:isolate; }
.hero-showcase>img { width:min(640px,115%); height:430px; object-fit:contain; filter:drop-shadow(0 32px 40px rgba(0,0,0,.58)); animation:hero-float 6s ease-in-out infinite; }
.hero-rank-glow { position:absolute; width:430px; height:430px; border-radius:50%; background:radial-gradient(circle,rgba(216,40,60,.22),transparent 68%); filter:blur(10px); z-index:-1; }

.anatomy-demo { max-width: 920px; margin: 0 auto; padding: 22px; }
.anatomy-demo-controls { display: flex; justify-content: center; gap: 7px; margin-bottom: 20px; }
.anatomy-demo-controls button { width: auto; min-width: 110px; padding: 9px 16px; border: 1px solid var(--glass-border); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.025); }
.anatomy-demo-controls button.is-active { color: var(--text); border-color: var(--accent); background: rgba(216,40,60,.12); }
.anatomy-demo-grid { display: grid; grid-template-columns: minmax(310px,1.25fr) minmax(240px,.75fr); gap: 28px; align-items: center; }
.anatomy-demo-bodies { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.anatomy-demo-bodies figure { margin: 0; display: grid; justify-items: center; gap: 8px; }
.anatomy-demo-bodies figcaption { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.site-anatomy-stage { position: relative; width: min(100%,220px); aspect-ratio: 2/3; }
.site-anatomy-stage img,.site-anatomy-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-anatomy-stage img { object-fit: contain; pointer-events: none; filter: drop-shadow(0 15px 18px rgba(0,0,0,.35)); }
.site-anatomy-stage path { fill: rgba(216,40,60,.035); stroke: rgba(255,255,255,.12); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; cursor: pointer; transition: .16s ease; }
.site-anatomy-stage path:hover,.site-anatomy-stage path:focus-visible,.site-anatomy-stage path.is-active { fill: rgba(45,230,213,.72); stroke: #c1fff8; stroke-width: 1.4; outline: none; }
#download .hero-actions { display:flex; justify-content:center; flex-wrap:wrap; width:100%; }
.inbox-count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; margin-left:5px; border-radius:99px; background:#d8283c; color:white; font-size:11px; }
.support-grid { display:grid; grid-template-columns:minmax(220px,1fr) minmax(0,2fr); gap:18px; margin-top:20px; align-items:start; }
#support-root { min-width:0; }
#support-root [hidden],#support-root .form-note:empty { display:none !important; }
#support-root .support-grid > .card { margin-top:0; }
.dev-page #support-root .support-ticket-row { display:flex; flex-direction:column; align-items:flex-start; gap:6px; white-space:normal; }
.support-notification small { display:block; }
#support-root form { display:grid; gap:14px; margin-top:18px; }
#support-root textarea { width:100%; min-height:120px; resize:vertical; box-sizing:border-box; padding:12px; border:1px solid var(--glass-border); border-radius:10px; color:var(--text); background:var(--glass); font:inherit; }
#support-root summary { cursor:pointer; font-weight:700; padding:8px 0; overflow-wrap:anywhere; }
.support-actions { display:flex; align-items:center; gap:8px; justify-content:space-between; margin-top:16px; }
.support-ticket-row { width:100%; display:flex; flex-direction:column; align-items:flex-start; text-align:left; white-space:normal; gap:6px; margin-bottom:8px; overflow-wrap:anywhere; }
.support-ticket-row small,.support-message small { display:block; font-size:11px; color:var(--muted); }
.support-history { max-height:480px; overflow:auto; padding:2px; margin:16px 0; }
.support-message { padding:14px; margin:0 0 12px; border:1px solid var(--glass-border); border-radius:12px; }
.support-message.staff { border-left:3px solid #39cdbf; }
.support-message p,.support-notification p { white-space:pre-wrap; overflow-wrap:anywhere; }
.support-notification { padding:12px; margin:8px 0; border:1px solid var(--glass-border); border-radius:10px; }
.support-notification.unread { border-left:3px solid #39cdbf; }
.support-notification .btn { margin:8px 8px 0 0; }
#staff-support-section { margin-bottom:20px; }
/* Inbox workspace: quiet surfaces, compact navigation, one primary action. */
#support-root.support-hub { --hub-line:rgba(255,255,255,.085); --hub-muted:#aaa0a7; padding-bottom:40px; }
.support-hub-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 30px; }
.support-eyebrow { color:#f36c83; font-size:10px; font-weight:800; letter-spacing:.16em; }
#support-root .support-hub-head h1,#support-root .support-hub-head h2 { margin:9px 0 0; font-size:clamp(25px,3vw,36px); letter-spacing:-.035em; }
#support-root .btn-primary { background:linear-gradient(120deg,#ed3658,#b21735); border-color:#ed4262; color:#fff; box-shadow:0 6px 24px #b2173526; }
#support-root .btn-primary:hover { background:#f04465; box-shadow:0 6px 28px #b2173540; }
#support-root .support-tabs { display:flex; gap:6px; border-bottom:1px solid var(--hub-line); margin-bottom:24px; }
#support-root .support-tabs .btn { border:0; border-radius:9px 9px 0 0; background:transparent; color:var(--hub-muted); min-width:120px; padding:15px 22px; position:relative; }
#support-root .support-tabs .is-active { color:#fff; background:linear-gradient(0deg,#d8283c15,transparent); }
#support-root .support-tabs .is-active::after { content:''; position:absolute; bottom:-1px; left:18px; right:18px; height:2px; background:#f04b69; border-radius:2px; }
.support-inbox-panel,.support-detail { background:linear-gradient(140deg,#211219aa,#100e12f5 65%); border:1px solid var(--hub-line); border-radius:18px; }
.support-panel-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 26px; border-bottom:1px solid var(--hub-line); }
#support-root .support-panel-head h2 { margin:0; font-size:15px; }
.support-inbox-panel>div:not(.support-panel-head) { padding:14px 24px; }
#support-root .support-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:260px; padding:32px 20px; box-sizing:border-box; }
#support-root .support-empty-icon { display:grid; place-items:center; width:64px; height:64px; margin-bottom:18px; border:1px solid #e2496840; border-radius:21px; color:#fb8198; background:radial-gradient(circle at 30% 10%,#f7648535,#32182260); box-shadow:0 0 55px #e23b5810; font-size:30px; }
#support-root .support-empty h3 { margin:0 0 8px; font-size:18px; color:#f0e8ee; letter-spacing:-.02em; }
#support-root .support-empty p { max-width:310px; margin:0; color:var(--hub-muted); font-size:13px; line-height:1.65; }
.support-toolbar { display:flex; justify-content:space-between; align-items:end; gap:16px; margin:0 0 18px; }
.support-toolbar .field { width:220px; margin:0; }
#support-root .support-toolbar select { min-height:42px; }
#support-root .support-grid { grid-template-columns:minmax(240px,.8fr) minmax(0,1.7fr); gap:18px; margin-top:0; }
#support-root .support-list { min-width:0; padding:0; background:none; }
#support-root .support-list .support-empty { min-height:220px; border:1px dashed #ffffff18; border-radius:16px; }
#support-root .support-list>.btn:not(.support-ticket-row) { margin-top:12px; }
#support-root .support-ticket-row { background:#151116; border:1px solid var(--hub-line); border-radius:12px; padding:16px; font-size:13px; line-height:1.55; gap:8px; }
#support-root .support-ticket-row:hover { background:#24151d; border-color:#c3416155; }
#support-root .support-ticket-row.is-selected { background:linear-gradient(100deg,#5f1d303d,#171217); border-color:#e4476566; box-shadow:inset 3px 0 #ed4262; }
#support-root .support-ticket-row small { color:var(--hub-muted); font-weight:400; font-size:11px; }
#support-root .support-detail { padding:24px; min-width:0; }
.support-conversation-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#support-root .support-conversation-head h2 { margin:0; font-size:20px; }
.support-status { display:inline-flex; width:max-content; max-width:100%; align-items:center; padding:3px 8px; border-radius:6px; font-size:10px; font-weight:700; background:#ffffff0a; color:#b1a7ad; }
.support-status.is-open { color:#f7adbd; background:#e7446420; }
.support-status.is-in_progress { color:#75ddd0; background:#43ccba18; }
.support-status.is-closed { color:#b3adc2; background:#9586b71a; }
#support-root .support-history { padding:2px 0; }
#support-root .support-message { background:#ffffff03; border:0; border-left:2px solid #ffffff16; border-radius:0 12px 12px 0; padding:14px 18px; margin:12px 0; }
#support-root .support-message.staff { background:#38c7b409; border-left-color:#53c9b7; }
#support-root .support-message strong { font-size:12px; }
#support-root .support-message p { margin:9px 0; font-size:13px; line-height:1.75; }
#support-root .support-message small { color:var(--hub-muted); }
#support-root .support-detail form { border-top:1px solid var(--hub-line); padding-top:20px; }
#support-root form>.btn[type=submit] { width:auto; justify-self:end; min-width:150px; }
#support-root textarea { background:#09080b99; border-color:#ffffff1a; line-height:1.65; font-size:14px; }
#support-root textarea:focus,#support-root select:focus { outline:2px solid #e74c6955; outline-offset:2px; border-color:#e75b74; }
#support-root .field>span { font-size:10px; letter-spacing:.09em; color:var(--hub-muted); }
#support-root .support-notification { border:0; border-bottom:1px solid var(--hub-line); border-radius:0; margin:0; padding:16px 12px; }
#support-root .support-notification.unread { border-left:2px solid #f2647e; background:#ed426206; }
#support-root .support-notification summary { font-size:14px; }
#support-root .support-notification p { font-size:14px; line-height:1.7; }
#support-root .support-composer { color:#eee7ec; width:min(580px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow:auto; box-sizing:border-box; margin:auto; padding:28px; background:linear-gradient(145deg,#2d1722,#100e13 65%); border:1px solid #e5748b40; border-radius:20px; box-shadow:0 30px 100px #000a; }
.support-composer::backdrop { background:#050408cc; backdrop-filter:blur(6px); }
#support-root .support-composer:not([open]) { display:none; }
#support-root .support-composer .form-note:empty { display:none; }
#support-root .support-composer .field-hint { margin:0; color:#a99ba5; font-size:12px; }
#support-root .support-composer .support-conversation-head>.btn { min-width:32px; padding:4px 9px; font-size:22px; }
@media(max-width:760px) { #support-root .support-grid { grid-template-columns:1fr; } .support-hub-head { align-items:flex-start; } #support-root .support-list .support-empty { min-height:160px; } #support-root .support-detail { padding:18px; } .support-toolbar .field { width:min(220px,65%); } }
@media(max-width:460px) { .support-hub-head { flex-direction:column; gap:16px; } .support-hub-head>.btn { width:100%; } .support-panel-head { padding:16px; } .support-inbox-panel>div:not(.support-panel-head) { padding:8px; } #support-root .support-composer { padding:20px; } #support-root .support-empty { min-height:240px; } }
@media(max-width:760px) { .support-grid { grid-template-columns:1fr; }.support-list { max-height:350px; overflow:auto; } }
.site-anatomy-stage path { pointer-events: fill; }
.anatomy-demo-result { padding: 22px; border-left: 1px solid var(--glass-border); }
.anatomy-demo-result>span,.anatomy-demo-result>small { color: var(--muted); font-size: 11px; }
.anatomy-demo-result h3 { margin: 7px 0 16px; font-size: 26px; }
.anatomy-demo-result p { color: var(--muted); font-size: 12px; }
.anatomy-demo-result ul { min-height: 74px; margin: 12px 0 18px; padding-left: 18px; line-height: 1.8; }
@media (max-width:700px) { .anatomy-demo-grid { grid-template-columns: 1fr; }.anatomy-demo-result { border-left: 0; border-top: 1px solid var(--glass-border); }.site-anatomy-stage { width: min(100%,140px); } }
.hero-live-card { position:absolute; right:3%; bottom:4%; width:min(330px,88%); padding:15px 18px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(10,9,13,.9); box-shadow:0 24px 60px rgba(0,0,0,.52); backdrop-filter:blur(18px); }
.hero-live-card>strong { font-size:10px; letter-spacing:.14em; color:#ff6679; }
.hero-live-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#ff4059; box-shadow:0 0 12px #ff4059; }
.hero-live-card>div { display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr; align-items:baseline; gap:4px; margin-top:9px; }
.hero-live-card b { font-size:22px; }.hero-live-card small { color:var(--muted); }.hero-live-card p { margin:7px 0 0; color:#fff; font-weight:700; }
.hero-live-card>div,.hero-live-card>p { transition:opacity .18s ease,transform .18s ease; }
.hero-live-card.is-changing>div,.hero-live-card.is-changing>p { opacity:0; transform:translateY(4px); }
@keyframes hero-float { 50% { transform:translateY(-8px); } }
.section { padding:clamp(58px,8vw,96px) 0; }
.section-head { max-width:760px; margin:0 auto 44px; }
.section-head h2 { font-size:clamp(30px,4vw,48px); line-height:1.08; letter-spacing:-.035em; }
.feature-grid { grid-template-columns:repeat(3,1fr); gap:16px; }
.feature { min-height:210px; padding:28px; transition:transform .2s ease,border-color .2s ease; }
.feature:hover { transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.3); }
.feature h3 { font-size:18px; }.feature p { font-size:14px; }
.steps { grid-template-columns:repeat(4,1fr); }.steps li { min-height:190px; padding:27px; }
.tiers { align-items:stretch; gap:18px; }.plan { padding:30px; }.plan.featured { transform:translateY(-8px); box-shadow:0 28px 80px rgba(128,18,36,.22); }
.card { padding:clamp(20px,3vw,34px); }
.page { padding:54px 0 90px; }.page-head { margin-bottom:28px; }.page-head h1 { font-size:clamp(32px,4vw,48px); letter-spacing:-.035em; }
.account-grid { grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr); gap:22px; align-items:start; }
.account-grid .card { margin-bottom:18px; }
input,select,textarea { min-height:46px; border-radius:11px; font-size:15px; }
.field { gap:7px; }.field>span { font-size:12px; font-weight:750; }
.table-wrap { width:100%; overflow:auto; scrollbar-gutter:stable; }.compare,.users { min-width:760px; }
.compare th,.compare td,.users th,.users td { padding:14px 16px; }
.form-card { width:min(520px,100%); padding:clamp(24px,4vw,42px); }
.payblood-checkout { max-width:1040px; border-radius:24px; overflow:hidden; }
.site-footer { padding:30px 0; background:rgba(4,4,6,.42); }
.ad-slot:has(.ad-empty) { display:none; }
.ad-band:has(.ad-empty) { min-height:0; margin:0 auto; padding:0; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }
@media (max-width:980px) {
  .nav-toggle { display:block; }
  .site-nav { position:absolute; top:64px; left:16px; right:16px; display:none; flex-wrap:wrap; align-items:stretch; padding:12px; border:1px solid var(--glass-border); border-radius:16px; background:rgba(10,9,13,.97); box-shadow:0 24px 70px rgba(0,0,0,.55); }
  .site-nav.is-open { display:flex; }.site-nav a { flex:1 1 45%; min-height:42px; display:flex; align-items:center; }.lang-switch { margin:4px 0; }
  .hero-layout { grid-template-columns:1fr; }.hero-copy { text-align:center; }.hero-sub { margin-left:auto;margin-right:auto; }.hero-points { width:max-content; max-width:100%; margin-left:auto;margin-right:auto;text-align:left; }.hero-actions { justify-content:center; }.hero-showcase { min-height:390px; }.hero-showcase>img { height:360px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }.steps { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .hero { padding-top:54px; }.hero h1 { font-size:clamp(40px,13vw,58px); }.hero-showcase { min-height:320px; overflow:hidden; }.hero-showcase>img { width:100%; height:280px; }.hero-live-card { right:0;bottom:0; }
  .feature-grid,.steps,.account-grid,.faq-grid,.faq-grid-4 { grid-template-columns:minmax(0,1fr); }.feature,.steps li { min-height:0; }.plan.featured { transform:none; }.footer-inner { align-items:flex-start; gap:20px; }.footer-links { flex-wrap:wrap; }
  .avatar-edit { align-items:flex-start; gap:14px; margin-top:16px; padding-inline:2px; }
  .profile-avatar { width:76px; height:76px; }
}
.g2g-ticket-count { color: var(--gold-bright); margin-top: 5px; font-size: 11px; font-weight: 750; }

/* PayBlood checkout refinement */
.payblood-header { display: grid; grid-template-columns: 1fr auto 1fr; }
.payblood-header .lang-switch { justify-self: end; }
.payblood-trust {
  display: flex; align-items: center; gap: 7px; justify-self: center;
  color: #a99eae; font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.payblood-trust span:first-child { color: #45c08c; font-size: 15px; }
.payblood-section-label {
  margin: 30px 0 10px; color: #8e8492; font-size: 10px;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.payblood-method {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center;
  gap: 12px; padding: 16px; border: 1px solid rgba(216,31,69,.42);
  border-radius: 13px; background: rgba(216,31,69,.055);
  box-shadow: inset 0 0 0 1px rgba(216,31,69,.04);
}
.method-radio {
  width: 14px; height: 14px; border: 4px solid #d8284e;
  border-radius: 50%; background: #130911; box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.method-copy { display: flex; flex-direction: column; gap: 3px; }
.method-copy strong { color: #f0eaf2; font-size: 13px; }
.method-copy span { color: #887e8c; font-size: 10.5px; }
.method-check { color: #62d4a0; font-weight: 900; }
.payblood-merchant {
  display: flex; align-items: center; gap: 12px; margin: 0 0 24px;
  padding: 14px; border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; background: rgba(255,255,255,.025);
}
.payblood-merchant img { width: 34px; height: 34px; border-radius: 8px; }
.payblood-merchant div { display: flex; flex-direction: column; gap: 2px; }
.payblood-merchant span { color: #786e7c; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.payblood-merchant strong { color: #ece5ef; font-size: 13px; }
.payblood-complete {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 22px; background: rgba(5,3,7,.82); backdrop-filter: blur(14px);
  animation: paybloodFade .25s ease both;
}
.payblood-complete.hidden { display: none; }
.complete-card {
  width: min(420px, 100%); padding: 42px; border: 1px solid rgba(69,192,140,.28);
  border-radius: 22px; background: linear-gradient(160deg, #17111a, #0e0b11);
  box-shadow: 0 30px 90px rgba(0,0,0,.6); text-align: center;
  animation: paybloodRise .45s cubic-bezier(.2,.85,.25,1.15) both;
}
.complete-ring {
  display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 22px;
  border: 2px solid #45c08c; border-radius: 50%; color: #74dfad; font-size: 31px;
  box-shadow: 0 0 0 9px rgba(69,192,140,.07), 0 0 38px rgba(69,192,140,.2);
  animation: paybloodSeal .65s .15s cubic-bezier(.2,.9,.2,1.2) both;
}
.complete-card h2 { margin: 0 0 9px; font-family: Georgia,serif; font-size: 28px; font-weight: 500; }
.complete-card > p { color: #aaa0ae; font-size: 13px; }
.complete-redirect { margin-bottom: 24px; color: #756b79 !important; font-size: 11px !important; }
.checkout-complete .payblood-checkout { filter: blur(2px); }
@keyframes paybloodFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes paybloodRise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes paybloodSeal { from { transform: scale(.45) rotate(-18deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 620px) {
  .payblood-header { grid-template-columns: 1fr auto; }
  .payblood-trust { display: none; }
}


@media (max-width: 760px) {
  .payblood-checkout { grid-template-columns: 1fr; }
  .payblood-invoice { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .payblood-wallet { grid-template-columns: 1fr; }
}