/* ============================================================
   SITE REFRESH (11-10) - the launcher's look, on the web.
   Loaded AFTER style.css. One quiet surface ladder, white-alpha hairlines, Geist for every word,
   Geist Mono for every number, and green only where something is an action or a live state.

   Every rule sits inside html:not(#rf) on purpose: the id in :not() lifts the whole file above the
   nine thousand lines of class selectors under it without a single !important on a colour.
   ============================================================ */

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}

/* ---------- the ground: launcher graphite (his pick 11-10, over ink blue and in-game slate) ---------- */
html {
  /* the launcher's own tokens (webui/next/next.css) */
  --rf-ground: #0A0A0B; --rf-ground-rgb: 10, 10, 11;
  --rf-surface: #111113;
  --rf-raised: #18181B;
  --rf-sel: #1F1F23;
  --rf-line: rgba(255, 255, 255, 0.07);
  --rf-line2: rgba(255, 255, 255, 0.11);
  --rf-ink: #EDEDEF; --rf-grey: #A1A1AA; --rf-dim: #7E7E87;
  --rf-bar: #3A3A40;
}

html {
  --rf-f: "Geist", "Segoe UI", system-ui, sans-serif;
  --rf-m: "Geist Mono", ui-monospace, Consolas, monospace;
  --rf-ease: cubic-bezier(0.2, 0.9, 0.25, 1);
  --rf-fast: 120ms;
  --rf-r: 10px;       /* controls */
  --rf-r-card: 14px;  /* cards */

  /* the old tokens, repointed, so everything not restyled below still joins the family */
  --bg: var(--rf-ground); --surface: var(--rf-surface); --card: var(--rf-raised); --hover: var(--rf-sel);
  --line: var(--rf-line2); --line-soft: var(--rf-line);
  --fg: var(--rf-ink); --muted: var(--rf-grey); --faint: var(--rf-dim);
  --body: var(--rf-f); --display: var(--rf-f); --mono: var(--rf-m);
  --zest-ink: #FFFFFF;
  --radius: var(--rf-r-card); --radius-sm: var(--rf-r);
  --ease: var(--rf-ease);
}

html:not(#rf) {
  background: var(--rf-ground);

  body {
    background: var(--rf-ground); color: var(--rf-ink);
    font-family: var(--rf-f); font-size: 15px; line-height: 1.55; letter-spacing: -0.003em;
    font-feature-settings: "ss01", "cv11";
  }
  /* the page-wide fog and film grain: off. A flat ground is the whole point. */
  body::before, body::after { content: none; }
  ::selection { background: rgba(47, 194, 74, 0.32); color: #FFFFFF; }
  :focus-visible { outline: 2px solid rgba(47, 194, 74, 0.7); outline-offset: 2px; }

  h1, h2, h3 { font-family: var(--rf-f); font-weight: 600; letter-spacing: -0.025em; color: var(--rf-ink); }

  /* ---------- nav: the launcher's top bar ---------- */
  .nav {
    background: rgba(var(--rf-ground-rgb), 0.82);
    backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-bottom: 1px solid var(--rf-line);
    transition: background var(--rf-fast) linear;
  }
  .nav.scrolled { background: rgba(var(--rf-ground-rgb), 0.94); border-bottom-color: var(--rf-line); }
  .nav-links { gap: 2px; }
  .nav-links .ni { display: none; }
  .nav-links a {
    padding: 7px 12px; border-radius: 8px;
    font-size: 13.5px; font-weight: 500; color: var(--rf-grey);
    transition: background var(--rf-fast) linear, color var(--rf-fast) linear;
  }
  .nav-links a::after { content: none; }
  .nav-links a:hover { color: var(--rf-ink); background: rgba(255, 255, 255, 0.05); }
  .nav-links a[aria-current="page"] { color: var(--rf-ink); background: var(--rf-raised); }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 7px; }
  /* the bare lime mark, no plate behind it: the artwork fills its box, so it runs larger than the old badge */
  .brand img { width: 30px; height: 30px; transform: translateY(-1px); }
  .nav-cta .nav-account { width: 36px; padding: 0; justify-content: center; }
  .nav-acct-menu {
    background: var(--rf-surface); border: 1px solid var(--rf-line2); border-radius: 12px;
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.8);
  }
  .nav-acct-menu a, .nav-acct-menu button { font: 500 13px/1.3 var(--rf-f); border-radius: 8px; }
  .nav-acct-menu a:hover, .nav-acct-menu button:hover { background: var(--rf-sel); }

  /* ---------- buttons ---------- */
  .btn {
    gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--rf-r);
    font-family: var(--rf-f); font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
    box-shadow: none;
    transition: background var(--rf-fast) linear, border-color var(--rf-fast) linear,
                color var(--rf-fast) linear, transform var(--rf-fast) var(--rf-ease);
  }
  .btn:hover { transform: none; }
  .btn:active { transform: scale(0.98); }
  .btn-lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
  .btn-primary { background: var(--accent); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.08); }
  .btn-primary:hover { background: var(--accent-hi); box-shadow: none; }
  .btn-ghost {
    background: rgba(255, 255, 255, 0.04); color: var(--rf-ink); border-color: var(--rf-line2);
  }
  .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); color: var(--rf-ink); border-color: rgba(255, 255, 255, 0.16); }
  .btn .arrow.run { animation: none; }
  /* gold stays a real gold fill (his call 29-09); the pulsing halo goes */
  .btn-gold { background: #D9A93C; border-color: rgba(255, 255, 255, 0.14); color: #1A1204; }
  .btn-gold:hover { background: #E7B94C; }
  .btn-gold-glow, .btn-gold-glow:hover { animation: none; box-shadow: none; }

  /* ---------- shared controls ---------- */
  .badge {
    font-family: var(--rf-f); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
    padding: 3px 10px; border-radius: 999px; border-color: var(--rf-line2);
    background: rgba(255, 255, 255, 0.04); color: var(--rf-grey);
  }
  .badge-live, .badge-free { color: var(--zest); border-color: rgba(47, 194, 74, 0.32); background: rgba(47, 194, 74, 0.08); }
  .badge-gold, .badge-sub { border-color: rgba(229, 174, 58, 0.32); background: rgba(229, 174, 58, 0.08); }

  .field {
    background: var(--rf-surface); border-color: var(--rf-line2); border-radius: var(--rf-r);
    transition: border-color var(--rf-fast) linear, box-shadow var(--rf-fast) linear;
  }
  .field:hover { border-color: rgba(255, 255, 255, 0.16); }
  .field:focus-within { border-color: rgba(47, 194, 74, 0.55); box-shadow: 0 0 0 3px rgba(47, 194, 74, 0.14); }
  .field input { font-family: var(--rf-f); font-size: 14px; }

  /* segmented control: a sunk track and one raised thumb that slides, as in the launcher */
  .seg {
    background: var(--rf-ground); border: 1px solid var(--rf-line2); border-radius: 10px; padding: 3px;
    font-family: var(--rf-f);
  }
  .seg .seg-ind { background: var(--rf-sel); border-radius: 7px; box-shadow: inset 0 0 0 1px var(--rf-line2);
    transition: transform 280ms var(--rf-ease), width 280ms var(--rf-ease), height 280ms var(--rf-ease), opacity var(--rf-fast) linear; }
  .seg button {
    font-family: var(--rf-f); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
    padding: 6px 12px; border-radius: 7px; color: var(--rf-grey);
    transition: color var(--rf-fast) linear;
  }
  .seg button:hover { color: var(--rf-ink); }
  .seg button.active { color: var(--rf-ink); }

  /* toggle: the in-game switch - green track, white knob */
  .switch { width: 40px; height: 22px; }
  .switch i { background: var(--rf-sel); border-color: var(--rf-line2); transition: background 160ms linear, border-color 160ms linear; }
  .switch i::after { top: 2px; left: 2px; width: 16px; height: 16px; background: #FFFFFF; opacity: 0.72;
    transition: transform 200ms var(--rf-ease), opacity 160ms linear; }
  .switch input:checked + i { background: var(--accent); border-color: rgba(255, 255, 255, 0.10); }
  .switch input:checked + i::after { transform: translateX(18px); background: #FFFFFF; opacity: 1; }

  /* slider: the in-game one - filled green run, white knob. --v (0-100) is the fill. */
  input[type="range"] {
    -webkit-appearance: none; appearance: none; height: 20px; background: transparent; cursor: pointer;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, var(--zest) 0 calc(var(--v, 50) * 1%), var(--rf-sel) calc(var(--v, 50) * 1%) 100%);
  }
  input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--rf-sel); }
  input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--zest); }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
    background: #FFFFFF; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: box-shadow var(--rf-fast) linear, transform var(--rf-fast) var(--rf-ease);
  }
  input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; border: 0; }
  input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.10), 0 1px 4px rgba(0, 0, 0, 0.5); }
  input[type="range"]:active::-webkit-slider-thumb { transform: scale(0.94); }

  /* ---------- home: hero ---------- */
  .hero-aurora { display: none; }
  .hero-cine .hero-bg > video, .hero-cine .hero-bg > img, .hero-cine .hero-bg.xfade { opacity: 1; }
  .hero-cine .hero-bg::after {
    background: linear-gradient(180deg, rgba(var(--rf-ground-rgb), 0.30) 0%, rgba(var(--rf-ground-rgb), 0) 30%, rgba(var(--rf-ground-rgb), 0.55) 78%, var(--rf-ground) 100%);
  }
  .hero-scrim, .hx .hero-scrim {
    background: linear-gradient(95deg, rgba(var(--rf-ground-rgb), 0.94) 0%, rgba(var(--rf-ground-rgb), 0.84) 34%, rgba(var(--rf-ground-rgb), 0.36) 62%, rgba(var(--rf-ground-rgb), 0.12) 100%);
  }
  .hero-cine .hero-copy { max-width: 600px; }
  .hero-cine .hero-copy h1, .hero-cine .hero-copy .lede { text-shadow: none; }
  .hx-promise { font-weight: 600; letter-spacing: -0.035em; }
  .hx-words .hx-l1, .hx-words .hx-l2 { font-size: clamp(34px, 4.3vw, 62px); line-height: 1.05; }
  .hx-l1 { color: var(--rf-grey); }
  .hx-l2 { color: #FFFFFF; margin-top: 2px; }
  .hx .lede { margin-top: 20px; font-size: 17px; line-height: 1.55; color: var(--rf-grey); max-width: 48ch; }
  .hero-actions { gap: 10px; margin-top: 30px; }
  .hx-cta { box-shadow: none; }
  .hx-ticks { margin-top: 30px; gap: 10px; font-size: 14px; color: var(--rf-grey); }
  .hx-ticks li { gap: 10px; }
  .hx-ticks b { color: var(--rf-ink); font-weight: 600; }
  .hx-tick { width: 16px; height: 16px; background: none; box-shadow: none; color: var(--zest); }
  .hx-tick svg { width: 14px; height: 14px; }
  .hx-fine { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rf-line); max-width: 44ch; font-size: 12.5px; color: var(--rf-dim); }
  .hx-fine a { color: var(--rf-ink); font-weight: 500; }
  .hx-fine a:hover { color: var(--zest); }
  .hx-fine .hx-quip { font-style: normal; opacity: 1; }

  /* copy on the left, the FPS chart on the right as a glass card over the footage - the launcher's
     Home stage, where the playtime card sits in the same corner */
  .hx .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, 5vw, 72px); align-items: center; }

  /* ---------- home: feature strip ---------- */
  .hx-marquee { background: var(--rf-ground); border-block: 1px solid var(--rf-line); }
  .marquee-track { gap: 40px; padding: 18px 24px; }
  .hx-marquee .marquee-item.feat {
    font-family: var(--rf-f); font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--rf-grey);
  }
  .hx-marquee .marquee-item.feat { display: inline-flex; align-items: center; gap: 9px; }
  .hx-marquee .marquee-item.feat::before { content: none; }
  .hx-marquee .marquee-item.feat svg { flex: none; color: var(--rf-dim); }

  /* ---------- home: benchmark ---------- */
  .hx-bench-stage { max-width: none; width: 100%; margin: 0; perspective: none; }
  .hx-bench {
    transform: none; gap: 20px; padding: 20px 22px 18px;
    background: rgba(var(--rf-ground-rgb), 0.72);
    backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%);
    border: 1px solid var(--rf-line2); border-radius: var(--rf-r-card);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
  }
  .hx-bench-head { padding-bottom: 18px; border-bottom: 1px solid var(--rf-line); }
  .hx-bench-head > span {
    font-family: var(--rf-f); font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--rf-grey);
  }
  .hx-scene { gap: 20px; }
  .hx-row { gap: 9px; }
  .hx-row-top { font-size: 14px; font-weight: 500; color: var(--rf-grey); }
  .hx-row-top img { width: 20px; height: 20px; }
  .hx-row-top b { font-family: var(--rf-m); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--rf-ink); }
  .hx-row-top b small { font-family: var(--rf-f); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--rf-dim); opacity: 1; margin-left: 6px; }
  .hx-row.is-sour .hx-row-top { color: var(--rf-ink); font-weight: 600; }
  .hx-row.is-sour .hx-row-top b { color: var(--zest); }
  .hx-bench .bar-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); }
  .hx-bench .bar-fill { border-radius: 3px; background: var(--rf-bar); box-shadow: none; }
  .hx-row.is-sour .bar-fill { background: var(--zest); box-shadow: none; }
  .hx-bench-note { margin-top: 0; padding-top: 16px; border-top: 1px solid var(--rf-line); font-size: 12.5px; font-style: normal; color: var(--rf-dim); }
  .hx-bench-note a { color: var(--rf-ink); font-weight: 500; }
  .hx-bench-note a:hover { color: var(--zest); }

  /* ---------- footer ---------- */
  .foot { background: var(--rf-ground); border-top: 1px solid var(--rf-line); }
  .foot p { color: var(--rf-dim); font-size: 13.5px; }
  .foot h4 { font-family: var(--rf-f); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--rf-ink); margin-bottom: 14px; }
  .foot ul { gap: 9px; }
  .foot ul a { font-size: 13.5px; color: var(--rf-grey); transition: color var(--rf-fast) linear; }
  .foot ul a:hover { color: var(--rf-ink); }
  .foot p.foot-legal-note { font-family: var(--rf-f); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--rf-dim); }
  .foot-base { border-top-color: var(--rf-line); font-family: var(--rf-f); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--rf-dim); }
  .foot-social a { border-radius: 8px; border-color: var(--rf-line2); color: var(--rf-grey);
    transition: background var(--rf-fast) linear, color var(--rf-fast) linear; }
  .foot-social a:hover { transform: none; color: var(--rf-ink); border-color: var(--rf-line2); background: rgba(255, 255, 255, 0.06); }

  /* ---------- the storage notice: a launcher toast ---------- */
  .storage-note {
    max-width: 380px; gap: 12px; padding: 16px;
    background: var(--rf-surface); border: 1px solid var(--rf-line2); border-radius: 12px;
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.8);
  }
  .storage-note h2 { font-family: var(--rf-f); font-size: 13px; font-weight: 600; letter-spacing: 0; }
  .storage-note p { font-size: 12.5px; line-height: 1.5; color: var(--rf-grey); }
  .storage-note a { color: var(--rf-ink); border-bottom-color: var(--rf-line2); }
  .storage-note .btn { height: 32px; padding: 0 12px; font-size: 13px; }
}

@media (max-width: 980px) {
  html:not(#rf) {
    .hx .wrap { grid-template-columns: minmax(0, 1fr); }
    .hx-bench-stage { max-width: 520px; }
    .hx .hero-scrim { background: linear-gradient(180deg, rgba(var(--rf-ground-rgb), 0.90) 0%, rgba(var(--rf-ground-rgb), 0.80) 60%, var(--rf-ground) 100%); }
  }
}

/* ============================================================
   EVERY OTHER PAGE - the shared layer.
   Same rules as the home page: white headings (grey lead line where a heading has two), small
   green labels, hairline cards, no glow anywhere.
   ============================================================ */
html:not(#rf) {
  /* ---------- headings ---------- */
  h1 { font-weight: 600; letter-spacing: -0.035em; text-shadow: none; }
  h2 { font-weight: 600; letter-spacing: -0.03em; }
  h3 { font-weight: 600; letter-spacing: -0.015em; }
  /* a two-line heading: the first line steps back to grey, the second carries the white */
  h1:has(> .l2), h1:has(> .xp-alt), h2:has(> .l2) { color: var(--rf-grey); }
  h1 .l2, h2 .l2, .hero-cine h1 .l2, h1 .xp-alt { color: #FFFFFF; }
  h1 .xp-alt { font-family: var(--rf-f); font-style: normal; font-weight: 600; letter-spacing: -0.035em; }
  .lede { color: var(--rf-grey); line-height: 1.55; }

  /* the small label over a heading: the launcher's "BUILD 1.0.21" */
  .eyebrow {
    font-family: var(--rf-f); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--zest); gap: 0;
  }
  .eyebrow::before { content: none; }
  .eyebrow.gold { color: var(--gold); }

  /* key / value labels: plain small grey, never spaced-out mono capitals */
  .k, .tile .k, .stat-tile .k, .rig-k, th, .th-name, dt {
    font-family: var(--rf-f); letter-spacing: 0; text-transform: none; font-weight: 500;
  }
  .tile .k, .stat-tile .k, .rig-k { font-size: 12.5px; color: var(--rf-dim); }
  th, .th-name { font-size: 12.5px; color: var(--rf-grey); }
  .req-card dt { font-size: 13px; color: var(--rf-dim); }
  .mono, code, kbd, .tnum { font-family: var(--rf-m); }
  .bench-note { font-family: var(--rf-f); font-size: 12.5px; letter-spacing: 0; color: var(--rf-dim); }
  .bench-note b { color: var(--rf-grey); font-weight: 500; }
  a.bn-link { color: var(--rf-ink); }

  /* ---------- cards ---------- */
  .tile, .plan, .req-card, .stat-tile, .card {
    background: var(--rf-surface); border-color: var(--rf-line2); border-radius: var(--rf-r-card);
    box-shadow: none;
    transition: border-color var(--rf-fast) linear, background var(--rf-fast) linear, transform 200ms var(--rf-ease);
  }
  .tile:hover, .plan:hover { transform: none; border-color: rgba(255, 255, 255, 0.18); background: var(--rf-raised); }
  .tile::after { content: none; }
  .stat-tile { border-radius: 12px; }
  .stat-tile .v { font-weight: 600; letter-spacing: -0.02em; }
  .req-card.reco { border-color: var(--rf-line2); }
  .req-card.reco .rh { color: var(--rf-ink); }
  .plan.free { border-color: var(--rf-line2); }

  /* ---------- FAQ ---------- */
  .faq { border-color: var(--rf-line2); border-radius: var(--rf-r-card); }
  .faq details { background: var(--rf-surface); border-top-color: var(--rf-line); }
  .faq summary { font-weight: 500; transition: background var(--rf-fast) linear; }
  .faq summary:hover { background: var(--rf-raised); }
  .faq details[open] summary { color: var(--rf-ink); }
  .faq summary .plus::before, .faq summary .plus::after { background: var(--rf-grey); }
  .faq .ans { color: var(--rf-grey); line-height: 1.65; }
  .faq .ans a, .prose a { color: var(--rf-ink); border-bottom-color: var(--rf-line2); }
  .faq .ans a:hover, .prose a:hover { border-bottom-color: var(--rf-ink); }

  /* ---------- section bands: one ground, a hairline between ---------- */
  .band, .band-alt, section.alt { background: var(--rf-ground); }
  .marquee { background: var(--rf-ground); border-block-color: var(--rf-line); }
  .marquee-item { font-family: var(--rf-f); font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
}

/* ---------- page by page: the last glows, tints and green frames ---------- */
html:not(#rf) {
  /* page headers: flat ground, no inset green line, no lemon halo */
  .page-head, .dl-hero, .players-head, .pf-head { background: var(--rf-ground); box-shadow: none; border-bottom: 1px solid var(--rf-line); }

  /* Sour Gold keeps its gold: the second headline line and the first stay as they were */
  .gold-grid .gold-h1 { color: var(--rf-ink); }
  .gold-grid .gold-h1 .l2 { color: transparent; }

  /* download */
  .dl-main { border-color: var(--rf-line2); background: var(--rf-surface); box-shadow: none; border-radius: var(--rf-r-card); }
  .lx-play, .lx-play:hover { box-shadow: none; }
  .dl-h1 .l2 { color: var(--rf-ink); }

  /* FAQ search, player search */
  .fq-search { border-color: var(--rf-line2); background: var(--rf-surface); box-shadow: none; border-radius: var(--rf-r); }
  .fq-search:focus-within { border-color: rgba(47, 194, 74, 0.55); box-shadow: 0 0 0 3px rgba(47, 194, 74, 0.14); }

  /* socials: the cards stand on the ground, not on a green floor */
  .orbit-floor { background: none; }
  .soc-card, .soc-card.in, .soc-card.orbit-card { box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85); border-color: var(--rf-line2); }

  /* profile + account tiles */
  .pf-bigcard { background: var(--rf-surface); border-color: var(--rf-line2); }
  .stat-tile .v.zest, .pf-big-v { color: var(--rf-ink); }

  /* closing bands and legal prose */
  .cta-band { background: var(--rf-surface); border: 1px solid var(--rf-line2); border-radius: var(--rf-r-card); box-shadow: none; }
  .prose { background: none; }
}

/* the front social card was lit green with !important; it gets a brighter hairline instead */
html:not(#rf) .orbit-card.front {
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
html:not(#rf) .orbit-btn:hover { border-color: rgba(255, 255, 255, 0.22); transform: none; }

/* THE COMPARISON TITLE STAYS BEBAS (his call 25-09, and again 11-10 when the refresh's blanket
   heading rule put it in Geist: the wider face also pushed the rival's name onto a second line). */
html:not(#rf) .vs-head { font-family: var(--brand); font-weight: 400; letter-spacing: 0.01em; }

/* ============================================================
   DEPTH (11-10, his note: "ALL just one colour - no hierarchy / images / colour variations").
   Three things, none of them a gradient wash:
     1. a real surface ladder - sections alternate between a sunk band and a lifted one, and the
        cards on each sit one clear step above it;
     2. photographs - page headers open on in-game shots that fall away into the graphite, so the
        colour on the page is the game's own;
     3. the home page shows the product: five screenshots under the strip.
   ============================================================ */
html { --rf-stage: #060607; --rf-band: #0F0F11; }

html:not(#rf) {
  .nav-links { gap: 6px; }

  /* ---------- 1. the ladder ---------- */
  body:not([data-page="home"]) > section:not(.page-head):not(.dl-hero):not(.gold-hero):not(.tl-sec):not(.xp) {
    background: var(--rf-stage); box-shadow: none; border-top: 1px solid var(--rf-line);
    --rf-card: #111113; --rf-card-hi: #17171A;
  }
  body:not([data-page="home"]) > section:nth-of-type(even):not(.page-head):not(.dl-hero):not(.gold-hero):not(.tl-sec):not(.xp):not(.cta-flat) {
    background: var(--rf-band);
    --rf-card: #18181B; --rf-card-hi: #1F1F23;
  }
  body:not([data-page="home"]) > main.pad-y { background: var(--rf-stage); }
  .foot { background: var(--rf-stage); }

  /* a card is one step above whatever band it is on, with a lit top edge */
  .tile, .plan, .req-card, .stat-tile, .card, .faq details, .cta-band, .pf-bigcard, .dl-main {
    background: var(--rf-card, var(--rf-surface));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  }
  .tile:hover, .plan:hover, .faq summary:hover { background: var(--rf-card-hi, var(--rf-raised)); }
  .faq { box-shadow: 0 20px 50px -34px rgba(0, 0, 0, 0.9); }

  /* ---------- 2. headers that open on the game ---------- */
  .page-head, body[data-page="support"] > #ticket-desk {
    --ph-scrim: linear-gradient(180deg, rgba(var(--rf-ground-rgb), 0.58) 0%, rgba(var(--rf-ground-rgb), 0.50) 50%, var(--rf-ground) 100%);
    background: var(--ph-scrim), var(--ph-img, none) var(--ph-pos, center 42%) / cover no-repeat, var(--rf-ground);
    border-bottom: 0;
  }
  body[data-page="faq"] .page-head       { --ph-img: url("../img/shots/scene-lake.jpg"); --ph-pos: center 58%; }
  body[data-page="players"] .page-head   { --ph-img: url("../img/shots/scene-pond.jpg"); --ph-pos: center 45%; }
  body[data-page="community"] .page-head { --ph-img: url("../img/shots/scene-player.jpg"); --ph-pos: center 38%; }
  body[data-page="player"] .page-head    { --ph-img: url("../img/shots/scene-player.jpg"); --ph-pos: center 38%; }
  body[data-page="community"] .page-head, body[data-page="support"] > #ticket-desk {
    --ph-scrim: linear-gradient(95deg, var(--rf-ground) 0%, rgba(var(--rf-ground-rgb), 0.88) 34%, rgba(var(--rf-ground-rgb), 0.38) 68%, rgba(var(--rf-ground-rgb), 0.22) 100%),
                linear-gradient(0deg, var(--rf-ground) 0%, rgba(var(--rf-ground-rgb), 0) 40%);
  }
  body[data-page="support"] > #ticket-desk {
    --ph-img: url("../img/shots/scene-hill.jpg"); --ph-pos: right 55%;
    --ph-scrim: linear-gradient(95deg, var(--rf-ground) 0%, rgba(var(--rf-ground-rgb), 0.90) 38%, rgba(var(--rf-ground-rgb), 0.50) 72%, rgba(var(--rf-ground-rgb), 0.30) 100%),
                linear-gradient(0deg, var(--rf-ground) 0%, rgba(var(--rf-ground-rgb), 0) 40%);
    border-top: 0;
  }
  .page-head h1, .page-head .lede { text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55); }
  .page-head .lede { color: #C9C9CF; }

  /* ---------- 3. home: what you get ---------- */
  .rf-inside { background: var(--rf-stage); padding-block: clamp(72px, 8vw, 112px); border-top: 1px solid var(--rf-line); }
  .rf-inside .sec-head { margin-bottom: 32px; }
  .rf-inside h2 { font-size: clamp(28px, 3vw, 40px); margin-top: 10px; }
  .rf-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .rf-tile {
    grid-column: span 2; display: flex; flex-direction: column; overflow: hidden;
    background: #111113; border: 1px solid var(--rf-line2); border-radius: var(--rf-r-card);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    transition: border-color var(--rf-fast) linear, background var(--rf-fast) linear;
  }
  .rf-t-wide { grid-column: span 4; }
  .rf-shot { display: block; overflow: hidden; height: 210px; background: var(--rf-ground); border-bottom: 1px solid var(--rf-line); }
  .rf-t-wide .rf-shot, .rf-t-side .rf-shot { height: 330px; }
  .rf-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--rf-ease); }
  .rf-cap { display: grid; gap: 4px; padding: 16px 18px 18px; }
  .rf-cap b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--rf-ink); }
  .rf-cap b svg { color: var(--rf-dim); transition: transform 200ms var(--rf-ease), color var(--rf-fast) linear; }
  .rf-cap > span { font-size: 13.5px; line-height: 1.5; color: var(--rf-grey); }
  .rf-tile:hover { border-color: rgba(255, 255, 255, 0.2); background: #17171A; }
  .rf-tile:hover .rf-shot img { transform: scale(1.035); }
  .rf-tile:hover .rf-cap b svg { transform: translateX(3px); color: var(--zest); }
}
@media (max-width: 900px) {
  html:not(#rf) {
    .rf-tile, .rf-t-wide { grid-column: span 6; }
    .rf-shot, .rf-t-wide .rf-shot, .rf-t-side .rf-shot { height: 220px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not(#rf) .rf-shot img { transition: none; }
}

/* support: an older rule forces this section's background with !important, so the photo has to as well */
html:not(#rf) body[data-page="support"] > #ticket-desk {
  background: var(--ph-scrim), var(--ph-img) var(--ph-pos) / cover no-repeat, var(--rf-ground) !important;
}

/* ============================================================
   LIGHT (11-10, his note: "just a few images, no gradients etc to really bring it up", and the
   flat dim under the profile skin "looks a little weird").
   The rule: every gradient here is LIGHT FALLING ON SOMETHING - a lit edge, a surface catching it
   from above, a photo vignetted the way a lens does it. None of them is a coloured wash.
   ============================================================ */
html:not(#rf) {
  /* ---------- sections: a lit top edge, light from above, texture on the sunk bands ---------- */
  body:not([data-page="home"]) > section:not(.page-head):not(.dl-hero):not(.gold-hero):not(.tl-sec):not(.xp),
  .rf-inside {
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0) 100%) 1;
    background:
      radial-gradient(60% 340px at 50% 0%, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 70%),
      radial-gradient(70% 520px at 50% 0%, rgba(6, 6, 7, 0) 0%, var(--rf-stage) 78%),
      radial-gradient(rgba(255, 255, 255, 0.075) 1px, rgba(255, 255, 255, 0) 1.5px) 0 0 / 22px 22px,
      var(--rf-stage);
  }
  body:not([data-page="home"]) > section:nth-of-type(even):not(.page-head):not(.dl-hero):not(.gold-hero):not(.tl-sec):not(.xp):not(.cta-flat) {
    background:
      radial-gradient(80% 420px at 50% 0%, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 72%),
      linear-gradient(180deg, #121214 0%, var(--rf-band) 420px);
  }
  /* a header melts into the section under it, so that section draws no edge of its own */
  body:not([data-page="home"]) > .page-head + section { border-image: none; border-top-color: transparent; }

  /* ---------- cards: a surface that catches the light ---------- */
  .tile, .plan, .req-card, .stat-tile, .card, .cta-band, .pf-bigcard, .dl-main, .rf-tile, .hx-bench {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 34%, rgba(255, 255, 255, 0) 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 48px -32px rgba(0, 0, 0, 0.9);
  }
  .faq details { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
  .hx-bench { background-color: rgba(var(--rf-ground-rgb), 0.70); }

  /* buttons and nav pills stay FLAT (his call 11-10: a gradient on a button "looks bad" - the
     gradients he asked for were for backgrounds). Do not put one back. */
  .nav { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.13) 50%, rgba(255, 255, 255, 0.03)) 1; }

  /* ---------- photo headers: a lens, not a dimmer ---------- */
  .page-head {
    --ph-scrim:
      linear-gradient(180deg, rgba(15, 15, 17, 0) 52%, var(--rf-band) 100%),
      radial-gradient(85% 110% at 50% 34%, rgba(var(--rf-ground-rgb), 0.30) 0%, rgba(var(--rf-ground-rgb), 0.62) 62%, rgba(var(--rf-ground-rgb), 0.88) 100%),
      linear-gradient(180deg, rgba(var(--rf-ground-rgb), 0.62) 0%, rgba(var(--rf-ground-rgb), 0) 26%);
  }
  body[data-page="community"] .page-head, body[data-page="support"] > #ticket-desk {
    --ph-scrim:
      linear-gradient(180deg, rgba(15, 15, 17, 0) 55%, var(--rf-band) 100%),
      linear-gradient(95deg, var(--rf-ground) 0%, rgba(var(--rf-ground-rgb), 0.90) 30%, rgba(var(--rf-ground-rgb), 0.42) 58%, rgba(var(--rf-ground-rgb), 0.10) 100%),
      radial-gradient(60% 90% at 78% 40%, rgba(var(--rf-ground-rgb), 0) 0%, rgba(var(--rf-ground-rgb), 0.45) 100%);
  }
  body[data-page="support"] > #ticket-desk { border-image: none; }

  /* the profile: the name reads on the dark side, the skin stands in a pool of daylight */
  .page-head.pf-head {
    --ph-img: url("../img/shots/scene-pond.jpg"); --ph-pos: center 46%;
    --ph-scrim:
      linear-gradient(180deg, rgba(15, 15, 17, 0) 60%, var(--rf-band) 100%),
      radial-gradient(34% 62% at 74% 50%, rgba(var(--rf-ground-rgb), 0) 0%, rgba(var(--rf-ground-rgb), 0.10) 45%, rgba(var(--rf-ground-rgb), 0.58) 100%),
      linear-gradient(90deg, rgba(var(--rf-ground-rgb), 0.86) 0%, rgba(var(--rf-ground-rgb), 0.66) 38%, rgba(var(--rf-ground-rgb), 0.12) 70%, rgba(var(--rf-ground-rgb), 0.40) 100%),
      linear-gradient(180deg, rgba(var(--rf-ground-rgb), 0.60) 0%, rgba(var(--rf-ground-rgb), 0) 24%);
  }
  body[data-page="players"] .page-head.pf-head::after { content: none; }

  /* headers with no photo get the same top light as a lifted band */
  .dl-hero, body[data-page="about"] .page-head {
    background:
      radial-gradient(90% 560px at 50% 0%, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 72%),
      linear-gradient(180deg, #111113 0%, var(--rf-ground) 60%, var(--rf-band) 100%);
  }

  /* ---------- home ---------- */
  /* each tile's caption is lit by its own picture: the shot again, blurred, under the words */
  .rf-tile { position: relative; isolation: isolate; }
  .rf-cap { position: relative; overflow: hidden; }
  .rf-cap::before {
    content: ""; position: absolute; inset: -40px; z-index: -1;
    background: var(--tile-img) center 80% / cover no-repeat;
    filter: blur(34px) saturate(1.5); opacity: 0.30;
  }
  .rf-shot { position: relative; border-bottom: 0; }
  .rf-shot::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 17, 19, 0) 62%, rgba(17, 17, 19, 0.85) 100%);
  }
  .hx-marquee {
    background: linear-gradient(180deg, #0E0E10, var(--rf-ground));
    border-block: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.02)) 1;
  }

  /* ---------- footer: a lit edge and a little top light. The giant wordmark was tried and cut (his call
     11-10: "a bit eh"). ---------- */
  .foot { border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0)) 1;
    background: radial-gradient(60% 260px at 50% 0%, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 70%), var(--rf-stage);
  }
}

/* features explorer: the layer in focus gets a bright hairline and a deep shadow, not a green halo;
   the label beside it lifts and keeps one small green mark (its number) */
html:not(#rf) .xp-layer.active { border-color: rgba(255, 255, 255, 0.24); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 60px 120px -30px rgba(0, 0, 0, 0.8); }
html:not(#rf) .xp-label.on { border-color: rgba(255, 255, 255, 0.18); background: #17171A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }

/* ---------- his notes, 11-10 evening ----------
   1. GREEN NEVER FADES INTO GREY. A green tint on a neutral band is out (the two lines that did it
      are gone above). Green light is allowed only behind something that is itself green - the lime
      on Download and About keeps its own halo.
   2. FAQ ROWS ARE FLAT. No gradient on a dropdown.
   3. NO "AI PILLS": the outlined, glowing, spaced-out capital-letter capsule. A status is a quiet
      flat chip in sentence case - tinted fill, no border, no glow, small corners. */
html:not(#rf) {
  .faq details { background-image: none; box-shadow: none; }
  .rc-tag, .t.t-fix, .t.t-feat, .t.t-perf, .t, .tk-status, .pill-tag, .cc-tag, .sf-partner {
    font-family: var(--rf-f); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
    border: 0; border-radius: 6px; box-shadow: none; text-shadow: none;
  }
  .rc-tag, .t, .tk-status, .pill-tag, .cc-tag, .sf-partner {
    padding: 2px 8px; background: color-mix(in srgb, currentColor 13%, transparent);
  }
  .rc-tag::before, .rc-tag::after { content: none; }
}

/* ---------- gold pages: warm greys (his note 11-10: "the grays you use dont go well with the gold") ----------
   The site's greys are zinc - they lean a touch blue, which is right beside green and wrong beside
   gold: a cool grey next to a warm metal reads dirty. On the Sour Gold page every neutral leans the
   other way, toward the gold, by about the same small amount. */
html:not(#rf) body[data-page="pricing"], html:not(#rf) body[data-page="creator"] {
  --rf-ground: #0B0A08; --rf-ground-rgb: 11, 10, 8;
  --rf-stage: #070605; --rf-band: #11100D;
  --rf-surface: #141210; --rf-raised: #1B1915; --rf-sel: #23201B;
  --rf-line: rgba(255, 240, 210, 0.075); --rf-line2: rgba(255, 240, 210, 0.12);
  --rf-ink: #F2EFE8; --rf-grey: #ABA598; --rf-dim: #837D70; --rf-bar: #423D33;
  --bg: var(--rf-ground); --surface: var(--rf-surface); --card: var(--rf-raised); --hover: var(--rf-sel);
  --line: var(--rf-line2); --line-soft: var(--rf-line);
  --fg: var(--rf-ink); --muted: var(--rf-grey); --faint: var(--rf-dim);
  background: var(--rf-ground); color: var(--rf-ink);
}
html:not(#rf) body[data-page="pricing"] > section:not(.page-head):not(.dl-hero):not(.gold-hero):not(.tl-sec):not(.xp),
html:not(#rf) body[data-page="creator"] > section:not(.page-head):not(.dl-hero):not(.gold-hero):not(.tl-sec):not(.xp) {
  --rf-card: #141210; --rf-card-hi: #1B1915;
  border-image: linear-gradient(90deg, rgba(255, 240, 210, 0) 0%, rgba(255, 240, 210, 0.16) 50%, rgba(255, 240, 210, 0) 100%) 1;
}
html:not(#rf) body[data-page="pricing"] > section:nth-of-type(even):not(.page-head):not(.dl-hero):not(.gold-hero):not(.tl-sec):not(.xp):not(.cta-flat),
html:not(#rf) body[data-page="creator"] > section:nth-of-type(even):not(.page-head):not(.dl-hero):not(.gold-hero):not(.tl-sec):not(.xp):not(.cta-flat) {
  --rf-card: #1B1915; --rf-card-hi: #23201B;
  background:
    radial-gradient(80% 420px at 50% 0%, rgba(255, 236, 200, 0.04), rgba(255, 236, 200, 0) 72%),
    linear-gradient(180deg, #151310 0%, var(--rf-band) 420px);
}
html:not(#rf) body[data-page="pricing"] .nav, html:not(#rf) body[data-page="creator"] .nav { background: rgba(11, 10, 8, 0.86); }
html:not(#rf) body[data-page="pricing"] .foot, html:not(#rf) body[data-page="creator"] .foot {
  background: radial-gradient(60% 260px at 50% 0%, rgba(255, 236, 200, 0.03), rgba(255, 236, 200, 0) 70%), var(--rf-stage);
}

/* ============================================================
   TONE (11-10 night, his note with Anthropic's pricing page as the reference: "less changing colours...
   more of the screen... less dead space but nicely sectioned... the hover effect on pricing and on the
   install guide is meh... we need to tone it").
   This block WINS over DEPTH and LIGHT above wherever they disagree:
     - one ground for the whole page; sections are divided by a plain hairline, not by a change of
       colour, a texture or a light;
     - cards are one flat surface with a hairline; nothing lifts, grows, scales or glows on hover -
       the border brightens and that is all;
     - the page uses more of the screen: a wider column and shorter gaps between sections.
   The photographs in the page headers stay: they are content, not decoration.
   ============================================================ */
html:root { --maxw: 1360px; }   /* :root in style.css outranks a bare html selector */
html:not(#rf) {
  /* ---------- sections: one ground, hairline between ---------- */
  body:not([data-page="home"]) > section:not(.page-head):not(.dl-hero):not(.gold-hero):not(.tl-sec):not(.xp),
  body:not([data-page="home"]) > section:nth-of-type(even):not(.page-head):not(.dl-hero):not(.gold-hero):not(.tl-sec):not(.xp):not(.cta-flat),
  .rf-inside {
    background: var(--rf-ground);
    border-top: 1px solid var(--rf-line); border-image: none; box-shadow: none;
    padding-block: clamp(48px, 5.5vw, 80px) !important;
    --rf-card: var(--rf-surface); --rf-card-hi: var(--rf-surface);
  }
  body:not([data-page="home"]) > .page-head + section { border-top-color: var(--rf-line); }
  body:not([data-page="home"]) > main.pad-y { background: var(--rf-ground); }
  .dl-hero, body[data-page="about"] .page-head { background: var(--rf-ground); }
  .nav { border-bottom: 1px solid var(--rf-line); border-image: none; }
  .hx-marquee { background: var(--rf-ground); border-block: 1px solid var(--rf-line); border-image: none; }
  .foot, body[data-page="pricing"] .foot, body[data-page="creator"] .foot {
    background: var(--rf-ground); border-top: 1px solid var(--rf-line); border-image: none;
  }
  /* photo headers end on the page's own ground now that there is only one */
  .page-head { --ph-scrim:
      linear-gradient(180deg, rgba(var(--rf-ground-rgb), 0) 52%, var(--rf-ground) 100%),
      radial-gradient(85% 110% at 50% 34%, rgba(var(--rf-ground-rgb), 0.30) 0%, rgba(var(--rf-ground-rgb), 0.62) 62%, rgba(var(--rf-ground-rgb), 0.88) 100%),
      linear-gradient(180deg, rgba(var(--rf-ground-rgb), 0.62) 0%, rgba(var(--rf-ground-rgb), 0) 26%); }
  body[data-page="community"] .page-head, body[data-page="support"] > #ticket-desk { --ph-scrim:
      linear-gradient(180deg, rgba(var(--rf-ground-rgb), 0) 55%, var(--rf-ground) 100%),
      linear-gradient(95deg, var(--rf-ground) 0%, rgba(var(--rf-ground-rgb), 0.90) 30%, rgba(var(--rf-ground-rgb), 0.42) 58%, rgba(var(--rf-ground-rgb), 0.10) 100%); }
  .page-head.pf-head { --ph-scrim:
      linear-gradient(180deg, rgba(var(--rf-ground-rgb), 0) 60%, var(--rf-ground) 100%),
      radial-gradient(34% 62% at 74% 50%, rgba(var(--rf-ground-rgb), 0) 0%, rgba(var(--rf-ground-rgb), 0.10) 45%, rgba(var(--rf-ground-rgb), 0.58) 100%),
      linear-gradient(90deg, rgba(var(--rf-ground-rgb), 0.86) 0%, rgba(var(--rf-ground-rgb), 0.66) 38%, rgba(var(--rf-ground-rgb), 0.12) 70%, rgba(var(--rf-ground-rgb), 0.40) 100%),
      linear-gradient(180deg, rgba(var(--rf-ground-rgb), 0.60) 0%, rgba(var(--rf-ground-rgb), 0) 24%); }

  /* ---------- cards: one flat surface ---------- */
  .tile, .plan, .req-card, .stat-tile, .card, .faq details, .cta-band, .pf-bigcard, .dl-main, .rf-tile, .perk-x, .perk,
  .player-card, .doc-card, .cos-card, .pod, .cos, .mark, .sf-card, .soc-card, .dl-route, .tkc-row, .wiz-pick, .dlx .step {
    background-image: none; box-shadow: none;
    transition: border-color var(--rf-fast) linear, background-color var(--rf-fast) linear;
  }
  .tile, .plan, .req-card, .card, .cta-band, .pf-bigcard, .dl-main, .rf-tile { background-color: var(--rf-surface); border-radius: 16px; }
  .hx-bench { background-image: none; box-shadow: none; }
  .faq { box-shadow: none; }
  .rf-cap::before, .rf-shot::after { content: none; }
  .rf-shot { border-bottom: 1px solid var(--rf-line); }

  /* ---------- hover: the border answers, nothing moves ---------- */
  .tile:hover, .plan:hover, .player-card:hover, .doc-card:hover, .perk-x:hover, .perk:hover, .cos-card:hover, .dl-route:hover,
  .pod:hover, .cos:hover, .mark:hover, a.stat-tile:hover, .tkc-row:hover, .wiz-pick:hover, .sf-card:hover, .rf-tile:hover,
  .perk-theatre .perk-x:hover, .has-js .perk-theatre .perk-x:hover, .has-js .perk-theatre .perk-x.tall:hover,
  .has-js .tl-sec .release.tl-in:hover, .has-js body .soc-hero:not(.soon):hover, .has-js body .soc-grid .soc-card:not(.soon):hover {
    transform: none; box-shadow: none; border-color: rgba(255, 255, 255, 0.22);
  }
  .tile:hover, .plan:hover, .rf-tile:hover, .faq summary:hover { background-color: var(--rf-surface); }
  .faq summary:hover { background: rgba(255, 255, 255, 0.025); }
  .rf-tile:hover .rf-shot img { transform: none; }
  .sf-cart:hover { transform: none; box-shadow: none; }
  .lx-play:hover { filter: none; box-shadow: none; }
  /* the three plans stand level, as equals; the featured one is marked by its border, not by size */
  .plan.featured, .plan.featured:hover { transform: none; }
  /* install guide: the step in play gets a brighter hairline and a green number - no lift, no green frame */
  .dlx .step.is-active { transform: none; border-color: rgba(255, 255, 255, 0.26); background-color: var(--rf-surface); }
  .dlx .step .idx { font-family: var(--rf-m); letter-spacing: 0; }
}
html:not(#rf) body[data-page="pricing"] > section, html:not(#rf) body[data-page="creator"] > section { border-image: none; }
html:not(#rf) body[data-page="pricing"] > section:nth-of-type(even):not(.page-head):not(.dl-hero):not(.gold-hero):not(.tl-sec):not(.xp):not(.cta-flat),
html:not(#rf) body[data-page="creator"] > section:nth-of-type(even):not(.page-head):not(.dl-hero):not(.gold-hero):not(.tl-sec):not(.xp):not(.cta-flat) {
  background: var(--rf-ground); --rf-card: var(--rf-surface); --rf-card-hi: var(--rf-surface);
}

/* the plans fill the column like the table under them, instead of sitting in a 1040px island */
html:not(#rf) .plans, html:not(#rf) .plans.tri { max-width: none; gap: 16px; }
html:not(#rf) .plan { padding: 28px 28px 26px; }
/* a section that follows its neighbour closely keeps a shorter top gap under its hairline */
html:not(#rf) body:not([data-page="home"]) > section.tight-top:not(.page-head):not(.dl-hero):not(.gold-hero):not(.tl-sec):not(.xp) {
  padding-top: clamp(36px, 3.6vw, 52px) !important;
}

/* changelog filter: the same sunk track and sliding thumb as every other segmented control */
html:not(#rf) .lx-seg { background: var(--rf-ground); border-color: var(--rf-line2); }
html:not(#rf) .lx-pill { background: var(--rf-sel); box-shadow: inset 0 0 0 1px var(--rf-line2);
  transition: left 280ms var(--rf-ease), width 280ms var(--rf-ease); }
html:not(#rf) .lx-seg button { font-family: var(--rf-f); font-weight: 500; transition: color var(--rf-fast) linear; }
html:not(#rf) .lx-seg button.on { font-weight: 500; }
/* plans: no reaction to the cursor at all - not the border either (his call 11-10) */
html:not(#rf) body[data-page="pricing"] .plan, html:not(#rf) body[data-page="pricing"] .plan:hover,
html:not(#rf) body[data-page="pricing"] .plan.tilting { transform: none !important; transition: none; }
html:not(#rf) body[data-page="pricing"] .plan:hover { border-color: var(--rf-line2); background-color: var(--rf-surface); }
html:not(#rf) body[data-page="pricing"] .plan.gold:hover { border-color: var(--gold-line); }

/* ---------- store header (his ask, 11-10) ----------
   The line under "Cosmetics" stops a little past half way, and the pile - bigger now, with wings, a crown
   and glasses among the cloaks, and his character standing in front of it - sits lower, centred on where
   the line would have carried on. */
html:not(#rf) .sf-hero { border-bottom: 0; }
html:not(#rf) .sf-hero::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56%; height: 1px; background: var(--rf-line2);
}
html:not(#rf) .sf-hero-figure {
  width: clamp(480px, 48vw, 720px); height: clamp(230px, 22vw, 300px); margin-bottom: clamp(-86px, -6vw, -60px);
  position: relative; z-index: 2;
}
html:not(#rf) .sf-pile-card {
  --w: clamp(88px, 8.2vw, 118px); bottom: 34px;
  transform: translateX(calc(var(--k) * 54%)) translateY(calc(var(--a) * var(--a) * 3.2px)) rotate(calc(var(--k) * 5.5deg));
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.9);
}
html:not(#rf) .sf-pile:hover .sf-pile-card {
  transform: translateX(calc(var(--k) * 58%)) translateY(calc(var(--a) * var(--a) * 3.6px)) rotate(calc(var(--k) * 6deg));
}
html:not(#rf) .sf-pile .sf-pile-card:hover {
  transform: translateX(calc(var(--k) * 58%)) translateY(calc(var(--a) * var(--a) * 3.6px - 10px)) rotate(calc(var(--k) * 6deg));
  box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.35);
}
html:not(#rf) .sf-pile-me {
  position: absolute; left: 50%; bottom: 0; height: 104%; width: auto; max-width: none; transform: translateX(-50%);
  z-index: 30; pointer-events: none; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.75));
}
@media (max-width: 700px) {
  html:not(#rf) .sf-hero::after { width: 100%; }
  html:not(#rf) .sf-hero-figure { width: 100%; height: 210px; margin-bottom: 0; }
  html:not(#rf) .sf-pile-card { --w: 70px; }
}

/* ---------- his list, 11-10 late ---------- */
html:not(#rf) {
  /* an icon beside every nav item again (he asked for them back) */
  .nav-links .ni { display: inline-grid; color: var(--rf-dim); }
  .nav-links a { gap: 7px; padding: 7px 10px; }
  .nav-links a:hover .ni, .nav-links a[aria-current="page"] .ni { color: var(--rf-ink); }
  .nav-links { gap: 2px; }
  /* store nav: every control is the same 36px tall, and the cart is a square like the account button */
  .store-nav .cur-btn { height: 36px; padding: 0 12px; border-radius: 7px; border-color: var(--rf-line2); background: rgba(255, 255, 255, 0.04); }
  .store-nav .currency-pick { height: 36px; }
  .store-nav .field.store-search { height: 36px; padding: 0 6px 0 12px; border-radius: 7px; }
  .store-nav .field.store-search input { padding: 0; }
  .nav-cta .nav-cart { width: 36px; padding: 0; justify-content: center; position: relative; }
  /* the bare mark: fills its box, so it runs a touch larger than the old plated icon */
  .hx-row-top img[src*="marks/"] { width: 22px; height: 22px; border-radius: 0; }
  .vs-logo.vs-logo-bare { width: 0.92em; height: 0.92em; }
}
@media (max-width: 1280px) { html:not(#rf) .nav-links .ni { display: none; } }

/* store header: one picture - his character beside the pile */
html:not(#rf) .sf-hero-figure { width: clamp(440px, 46vw, 700px); height: auto; margin-bottom: clamp(-64px, -4vw, -36px); }
html:not(#rf) .sf-heap { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
@media (max-width: 700px) { html:not(#rf) .sf-hero-figure { width: 100%; height: auto; margin-bottom: 0; } }

/* ============================================================
   PLAYERS (11-10 night). Two reports: the names on the player cards were too small ("font size for the
   player names is too small", then "u didnt fix font size make larger"), and the per-player page had
   "zero hierarchy" and was "still ass" after a restyle of the old layout. The cards get big names; the
   page is a NEW layout (player.html was rebuilt with it): who on the left, what they did on the right.
   ============================================================ */
html:not(#rf) {
  /* ---------- the cards on players.html ---------- */
  .player-card { padding: 22px 24px; gap: 22px; border-radius: 16px; }
  .player-card .pc-name { gap: 10px; margin-bottom: 14px; }
  .player-card .pc-name b { font-size: 24px; line-height: 1.1; }
  .player-card .pc-mark { width: 26px; height: 26px; }
  .player-card .pc-skin { height: 132px; width: auto; }
  .player-card .pc-stats .s .k { font-size: 12.5px; color: var(--rf-dim); }
  .player-card .pc-stats .s .v { font-size: 17px; }
  .pod-name b, .board-row .pl b { font-size: 18px; }

  /* ---------- the page for one player ---------- */
  .pfx { padding: 26px 0 96px; background: var(--rf-ground); }
  .pfx-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
  .pfx-side, .pfx-play, .pfx-fact {
    background: var(--rf-surface); border: 1px solid var(--rf-line2); border-radius: 20px; overflow: hidden;
  }
  .pfx-label { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--rf-grey); letter-spacing: 0; }

  /* who */
  .pfx-side { position: sticky; top: 88px; }
  .pfx-stage {
    position: relative; height: clamp(360px, 46vh, 480px); display: grid; place-items: center;
    background: radial-gradient(58% 52% at 50% 44%, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0) 72%), #0D0D0F;
    border-bottom: 1px solid var(--rf-line);
  }
  .pfx-stage::after {
    content: ""; position: absolute; left: 22%; right: 22%; bottom: 26px; height: 22px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); pointer-events: none;
  }
  .pfx-stage .pf-viewer, .pfx-stage .pf-viewer.sv-stage { position: relative; z-index: 1; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; background: none; border: 0; border-radius: 0; }
  .pfx-stage .pf-skin { position: relative; z-index: 1; max-height: 86%; width: auto; image-rendering: pixelated; }
  .pfx-who { padding: 24px 26px 22px; }
  .pfx #pf-name { display: flex; align-items: center; gap: 0.3em; margin: 0; font-size: clamp(32px, 2.7vw, 44px); line-height: 1.05; letter-spacing: 0; min-width: 0; }
  .pfx #pf-name-text { font-size: 1em; overflow-wrap: anywhere; text-shadow: 0.05em 0.05em 0 rgba(0, 0, 0, 0.5); }
  .pfx .pf-name-mark { width: 0.92em; height: 0.92em; flex: none; }
  .pfx .pf-badges { margin-top: 14px; }
  .pfx .pf-badges .badge { font-size: 13px; padding: 4px 11px; }
  .pfx-quick { display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--rf-line); }
  .pfx-quick dt { font-family: var(--rf-f); font-size: 13px; font-weight: 500; color: var(--rf-dim); }
  .pfx-quick dd { margin: 5px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--rf-ink); }
  .pfx .pf-uuid { margin: 18px 0 0; font-family: var(--rf-m); font-size: 11.5px; letter-spacing: 0; color: var(--rf-dim); }

  /* what they did */
  .pfx-main { display: grid; gap: 20px; min-width: 0; }
  .pfx-play { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.8fr); }
  .pfx-play-main { padding: 34px 38px 34px; min-width: 0; }
  .pfx .pf-big-v {
    margin: 16px 0 14px; font-family: var(--rf-f); font-weight: 600; font-size: clamp(104px, 11.5vw, 200px); line-height: 0.86;
    letter-spacing: -0.06em; color: var(--rf-ink); font-variant-numeric: tabular-nums;
  }
  .pfx .pf-big-v .pt-u { font-size: 0.26em; font-weight: 500; letter-spacing: 0; color: var(--rf-dim); margin-left: 0.14em; }
  .pfx .pf-big-k { margin: 0; font-family: var(--rf-f); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--rf-grey); }
  .pfx-play-side { display: grid; grid-template-rows: 1fr 1fr; border-left: 1px solid var(--rf-line); }
  .pfx-mini { padding: 26px 30px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
  .pfx-mini + .pfx-mini { border-top: 1px solid var(--rf-line); }
  .pfx .pf-rank { display: inline-flex; padding: 0; background: none; margin: 0; }
  .pfx .pf-rank b { font-family: var(--rf-f); font-size: clamp(30px, 2.6vw, 42px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--rf-ink); }
  .pfx .pf-rank.top b { color: var(--gold); }
  .pfx .pf-rank:empty::before { content: "\2014"; font-size: 30px; color: var(--rf-dim); }
  .pfx-mini-v { font-size: clamp(26px, 2.2vw, 34px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--rf-ink); }
  .pfx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .pfx-fact { padding: 24px 28px 26px; }
  .pfx-fact-v { margin-top: 12px; font-size: clamp(22px, 1.8vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--rf-ink); }
  .pfx-fact-v *, .pfx-mini-v *, .pfx-quick dd * { font-size: inherit; font-family: inherit; font-weight: inherit; letter-spacing: inherit; }
  .pfx-fact-v .pf-since { color: var(--rf-dim); font-weight: 500; }
  .pfx .pf-note { margin: 0; font-size: 13px; color: var(--rf-grey); }
  .pfx .pf-foot { margin: 4px 0 0; font-size: 13px; color: var(--rf-dim); }
}
@media (max-width: 980px) {
  html:not(#rf) .pfx-grid { grid-template-columns: minmax(0, 1fr); }
  html:not(#rf) .pfx-side { position: static; }
  html:not(#rf) .pfx-play { grid-template-columns: minmax(0, 1fr); }
  html:not(#rf) .pfx-play-side { border-left: 0; border-top: 1px solid var(--rf-line); grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  html:not(#rf) .pfx-mini + .pfx-mini { border-top: 0; border-left: 1px solid var(--rf-line); }
  html:not(#rf) .pfx-facts { grid-template-columns: minmax(0, 1fr); }
}

/* features, In-Game layer: when a real recording (shots/ingame/tour.mp4) is present it covers the stills */
/* contain, not cover: the recording is 16:9 in a 16:10 frame, and cover cut the menu's left column off (his
   report 11-10, "cropped weirdly"). The thin bands above and below take the page's own ground. */
html:not(#rf) .xp-tour .xp-rec { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--rf-ground); z-index: 5; }
html:not(#rf) .xp-tour.has-rec .xp-cursor, html:not(#rf) .xp-tour.has-rec .xp-cursor-ring { display: none; }

/* ---------- profile, second pass (his notes 11-10: "humongous", and "the stuff on the right doesnt match up
   vertically with the player viewer") ----------
   Everything comes down by about a third and the page sits in a narrower column. The two columns are the SAME
   height now: the grid stretches them, the playtime card takes whatever height is left over the facts row, and
   the footnote moved out from under the right column to sit under both. */
html:not(#rf) {
  .pfx > .wrap { max-width: 1120px; }
  .pfx { padding: 22px 0 72px; }
  .pfx-grid { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: stretch; }
  .pfx-side, .pfx-play, .pfx-fact { border-radius: 16px; }
  .pfx-side { position: static; display: flex; flex-direction: column; }
  .pfx-stage { height: clamp(260px, 34vh, 330px); flex: 1 1 auto; }
  .pfx-who { padding: 18px 20px 18px; }
  .pfx #pf-name { font-size: clamp(24px, 2vw, 30px); }
  .pfx .pf-badges { margin-top: 10px; }
  .pfx .pf-badges .badge { font-size: 12px; padding: 3px 9px; }
  .pfx-quick { margin-top: 16px; padding-top: 14px; }
  .pfx-quick dt { font-size: 12.5px; }
  .pfx-quick dd { font-size: 15px; margin-top: 3px; }
  .pfx .pf-uuid { margin-top: 14px; font-size: 11px; }
  .pfx-label { font-size: 13px; }

  .pfx-main { gap: 16px; grid-template-rows: minmax(0, 1fr) auto; }
  .pfx-main > .pf-note { grid-row: auto; }
  .pfx-play { grid-template-columns: minmax(0, 1.5fr) minmax(190px, 0.8fr); }
  .pfx-play-main { padding: 24px 28px; display: flex; flex-direction: column; justify-content: center; }
  .pfx .pf-big-v { margin: 10px 0 10px; font-size: clamp(64px, 6.4vw, 104px); line-height: 0.9; letter-spacing: -0.05em; }
  .pfx .pf-big-k { font-size: 13.5px; }
  .pfx-mini { padding: 18px 22px; gap: 8px; }
  .pfx .pf-rank b { font-size: clamp(22px, 1.9vw, 28px); }
  .pfx-mini-v { font-size: clamp(20px, 1.7vw, 24px); }
  .pfx-facts { gap: 16px; }
  .pfx-fact { padding: 18px 22px 20px; }
  .pfx-fact-v { margin-top: 8px; font-size: clamp(17px, 1.4vw, 20px); }
  .pfx > .wrap > .pf-foot { margin: 16px 0 0; font-size: 12.5px; color: var(--rf-dim); }
  .pfx:has(#pf-body[hidden]) > .wrap > .pf-foot { display: none; }

  /* home tiles: a picture that is a small thing on a plain ground is shown whole and centred, not cropped */
  .rf-shot img[src*="hypixel-tab"] { object-fit: cover; }
}
@media (max-width: 980px) {
  html:not(#rf) .pfx-grid { grid-template-columns: minmax(0, 1fr); }
  html:not(#rf) .pfx-main { grid-template-rows: none; }
}

/* cosmetics header: the pile alone (his call 11-10: "remove the picture of my player, just have the pile") */
html:not(#rf) .sf-hero-figure { width: clamp(280px, 26vw, 420px); margin-bottom: clamp(-56px, -3.4vw, -30px); }

/* ---------- profile, third pass (his notes 11-10): no role pill, UUID under the name, and the playtime card is
   no longer bare - it carries the leaderboard chart ---------- */
html:not(#rf) {
  .pfx .pf-uuid { margin: 8px 0 0; }
  .pfx-quick { margin-top: 18px; }
  .pfx-play-main { justify-content: flex-start; }
  .pfx-chart { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rf-line); flex: 1 1 auto; display: flex; flex-direction: column; min-height: 150px; }
  .pfx-bars { flex: 1 1 auto; display: flex; align-items: stretch; gap: 12px; margin-top: 14px; min-height: 170px; }
  .pfx-bar { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; color: var(--rf-grey); }
  .pfx-bar-col { display: flex; align-items: flex-end; min-height: 0; }
  .pfx .pf-badges { display: none; }
  .pfx-bar i { display: block; width: 100%; border-radius: 5px 5px 2px 2px; background: rgba(255, 255, 255, 0.10); transition: background var(--rf-fast) linear; }
  .pfx-bar:hover i { background: rgba(255, 255, 255, 0.20); }
  .pfx-bar.is-me i { background: var(--zest); }
  .pfx-bar-v { font-family: var(--rf-m); font-size: 11.5px; text-align: center; color: var(--rf-dim); }
  .pfx-bar.is-me .pfx-bar-v { color: var(--rf-ink); }
  .pfx-bar-n { font-size: 11.5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--rf-dim); }
  .pfx-bar-n b { font-weight: 500; color: var(--rf-grey); }
  .pfx-bar.is-me .pfx-bar-n, .pfx-bar.is-me .pfx-bar-n b { color: var(--rf-ink); }
}

/* the chart reads up toward the right: #1 is the last bar, so a player ranked 4th sits in the middle with the
   three ahead of them on their right and the three behind on their left (his call 11-10) */
html:not(#rf) .pfx-bars { flex-direction: row-reverse; }