/* RSGP — Runescape Gold Pieces
   Robinhood's palette (black, neutrals, Robin Neon #CCFF00) crossed with Old School coin gold. */

:root {
  --ink: #0a0a08;
  --ink-2: #121210;
  --ink-3: #1a1a16;
  --line: #26261f;
  --paper: #f4f1e8;
  --mute: #8b8b7e;
  --neon: #ccff00;
  --gold: #f5c33c;
  --gold-deep: #c98c12;
  --gold-glow: rgba(245, 195, 60, 0.18);

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pixel: 'Press Start 2P', monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1240px;
}

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

html {
  /* Native smooth scroll is deliberately off — scrolling is driven in JS so it can be eased. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--neon); color: var(--ink); }

/* custom scrollbar, because the stock one is the most obvious default on the page */
html { scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border: 3px solid var(--ink);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--neon); }
::-webkit-scrollbar-corner { background: var(--ink); }

/* ── scroll shell ─────────────────────────────────────────────────────────── */
/* The page is translated by JS. A spacer element carries the real height so the
   native scrollbar still behaves and keyboard/trackpad input stays untouched. */
#scroll {
  position: fixed;
  inset: 0;
  will-change: transform;
}
#spacer { pointer-events: none; }

/* ── grain + vignette ─────────────────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 1%); }
}

/* ── boot screen ──────────────────────────────────────────────────────────── */
/* The old client used to sit on a black field with a single outlined bar and a line of text.
   Same shape here, kept short so it reads as a nod rather than a wait. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  display: grid;
  place-items: center;
  transition: opacity 0.55s ease 0.15s, visibility 0s linear 0.7s;
}
.boot.done { opacity: 0; visibility: hidden; }
.boot-inner { width: min(340px, 72vw); text-align: center; }
.boot-title {
  font: 400 14px/1 var(--pixel);
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0 #000;
}
.boot-bar {
  height: 26px;
  border: 2px solid #6d4205;
  background: #150f04;
  padding: 3px;
  box-shadow: inset 0 0 0 1px #000;
}
.boot-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(180deg, #f5c33c, #b87a0c);
  transition: width 0.18s linear;
}
.boot-msg {
  margin-top: 14px;
  font: 400 8px/1.6 var(--pixel);
  color: #b9b09a;
  letter-spacing: 0.04em;
  min-height: 2.4em;
}

/* ── nav ──────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav.stuck {
  background: rgba(10, 10, 8, 0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand svg { width: 26px; height: 26px; }
.brand b {
  font: 400 19px/1 var(--serif);
  letter-spacing: 0.01em;
}
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color 0.25s ease;
}
.nav-links a:hover { color: var(--paper); }

.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--neon);
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  overflow: hidden;
  will-change: transform;
}
.cta span { position: relative; z-index: 1; }
.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta:hover::after { transform: translateY(0); }
.cta.ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line);
}
.cta.ghost::after { background: var(--paper); }
.cta.ghost:hover { color: var(--ink); }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger i { display: block; width: 22px; height: 2px; background: var(--paper); transition: transform 0.35s ease, opacity 0.25s ease; }
.burger i + i { margin-top: 5px; }
.burger.open i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open i:nth-child(2) { opacity: 0; }
.burger.open i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--gutter);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.sheet.open { clip-path: inset(0 0 0 0); }
.sheet a {
  font: 400 clamp(34px, 11vw, 56px)/1.1 var(--serif);
  padding: 8px 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sheet.open a { opacity: 1; transform: none; }
.sheet.open a:nth-child(1) { transition-delay: 0.18s; }
.sheet.open a:nth-child(2) { transition-delay: 0.24s; }
.sheet.open a:nth-child(3) { transition-delay: 0.3s; }
.sheet.open a:nth-child(4) { transition-delay: 0.36s; }

/* ── layout ───────────────────────────────────────────────────────────────── */
section { padding: clamp(90px, 13vh, 150px) var(--gutter); }
.wrap { max-width: var(--max); margin: 0 auto; width: 100%; }

.eyebrow {
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 18px;
}
h2 {
  font: 400 clamp(32px, 5.4vw, 60px)/1.05 var(--serif);
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}
.lede { color: var(--mute); max-width: 54ch; font-size: clamp(15px, 1.6vw, 17px); }

/* ── hero ─────────────────────────────────────────────────────────────────── */
/* Exactly one viewport, and the next section is not allowed to peek. */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: clamp(96px, 14vh, 150px);
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
  /* faint pixel grid, so the black is not just flat */
  background-image:
    radial-gradient(circle at 78% 42%, rgba(245, 195, 60, 0.10), transparent 46%),
    radial-gradient(circle at 12% 88%, rgba(204, 255, 0, 0.05), transparent 42%),
    linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px;
}
/* vignette so the grid fades out at the edges instead of stopping dead */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 42%, rgba(10, 10, 8, 0.85) 100%);
}
.hero > * { position: relative; z-index: 1; }

/* corner brackets — old-school interface framing, drawn not imported */
.corners {
  position: absolute;
  left: clamp(14px, 2.4vw, 34px);
  right: clamp(14px, 2.4vw, 34px);
  /* measured at runtime so the frame clears the header and stops above the ticker */
  top: calc(var(--nav-h, 64px) + clamp(10px, 1.6vw, 20px));
  bottom: calc(var(--rail-h, 42px) + clamp(10px, 1.6vw, 20px));
  pointer-events: none;
  z-index: 2;
}
.corners i {
  position: absolute;
  width: clamp(18px, 2.6vw, 34px);
  height: clamp(18px, 2.6vw, 34px);
  border: 1px solid rgba(245, 195, 60, 0.34);
  opacity: 0;
  transition: opacity 0.9s ease 0.5s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.corners i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; transform: translate(-8px, -8px); }
.corners i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; transform: translate(8px, -8px); }
.corners i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; transform: translate(-8px, 8px); }
.corners i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; transform: translate(8px, 8px); }
.ready .corners i { opacity: 1; transform: none; }

/* ambient coins drifting far behind everything */
.ambient { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ambient img {
  position: absolute;
  width: clamp(14px, 1.6vw, 22px);
  opacity: 0.16;
  filter: saturate(0.7);
}
.a1 { top: 18%; left: 22%; }
.a2 { top: 62%; left: 8%; }
.a3 { top: 30%; right: 30%; }
.a4 { bottom: 24%; right: 16%; }
.a5 { top: 74%; left: 46%; }
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.hero h1 {
  font: 400 clamp(46px, 8.4vw, 128px)/0.92 var(--serif);
  letter-spacing: -0.028em;
}
.hero h1 em {
  font-style: normal;
  color: var(--gold);
}
.hero .sub {
  margin-top: 22px;
  color: var(--mute);
  max-width: 42ch;
  font-size: clamp(15px, 1.7vw, 18px);
}
.hero-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

/* word-by-word reveal. The mask has to sit below the baseline or descenders (the g in "gold")
   get their tails sliced off, so pad the box and pull the same amount back off the flow. */
.line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.ready .line > span { transform: none; }
.ready .line:nth-child(2) > span { transition-delay: 0.09s; }
.ready .line:nth-child(3) > span { transition-delay: 0.18s; }

.fade-up { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease 0.5s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s; }
.ready .fade-up { opacity: 1; transform: none; }

/* coin */
.coin-stage {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.coin-stage::before {
  content: '';
  position: absolute;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow), transparent 68%);
  filter: blur(22px);
}
.coin {
  width: min(62%, 330px);
  will-change: transform;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.55));
}
.coin.small { position: absolute; width: 15%; opacity: 0.92; }
.c1 { top: 8%; left: 6%; }
.c2 { bottom: 12%; right: 4%; }
.c3 { bottom: 26%; left: 2%; width: 11%; }

/* ticker rail pinned to the bottom of the hero */
.rail {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  margin: 0 calc(var(--gutter) * -1);
  padding: 13px 0;
}
.rail-track { display: flex; gap: 44px; width: max-content; will-change: transform; }
.rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}
.rail-item b { color: var(--paper); font-weight: 600; }
.rail-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--neon); }

/* ── pair ─────────────────────────────────────────────────────────────────── */
.pair-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  margin-top: 54px;
}
.asset {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(22px, 3vw, 34px);
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  position: relative;
  overflow: hidden;
}
.asset::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 160px at var(--mx, 50%) var(--my, 0%), rgba(204, 255, 0, 0.07), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.asset:hover::after { opacity: 1; }
.asset .sym { font: 400 clamp(26px, 3.4vw, 38px)/1 var(--serif); }
.asset .name { color: var(--mute); font-size: 13px; margin-top: 6px; }
.asset .meta { margin-top: 22px; display: flex; gap: 22px; }
.asset .meta div { font: 500 11px/1.5 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.asset .meta b { display: block; font: 400 20px/1.2 var(--serif); color: var(--paper); letter-spacing: 0; text-transform: none; }
.pair-x {
  font: 400 22px/1 var(--serif);
  color: var(--gold);
  text-align: center;
}

/* ── steps ────────────────────────────────────────────────────────────────── */
.steps { margin-top: 54px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.step {
  background: var(--ink);
  padding: clamp(24px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: start;
  transition: background 0.4s ease;
}
.step:hover { background: var(--ink-3); }
.step .n {
  font: 400 12px/1 var(--pixel);
  color: var(--gold);
  padding-top: 6px;
}
.step h3 { font: 400 clamp(20px, 2.4vw, 27px)/1.2 var(--serif); margin-bottom: 8px; }
.step p { color: var(--mute); font-size: 15px; max-width: 60ch; }

/* ── stats ────────────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.stat { background: var(--ink); padding: clamp(26px, 3.6vw, 44px) clamp(16px, 2vw, 28px); }
.stat b { display: block; font: 400 clamp(28px, 4vw, 46px)/1 var(--serif); color: var(--gold); }
.stat span { display: block; margin-top: 10px; font: 500 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }

/* ── lore ─────────────────────────────────────────────────────────────────── */
.lore {
  background: var(--ink-2);
  border-block: 1px solid var(--line);
  position: relative;
  background-image:
    radial-gradient(circle at 88% 18%, rgba(245, 195, 60, 0.07), transparent 44%),
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
}
.lore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.quote {
  font: 400 clamp(24px, 3.4vw, 40px)/1.28 var(--serif);
  letter-spacing: -0.01em;
}
.quote i { color: var(--gold); font-style: normal; }
.attrib { margin-top: 20px; font: 500 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }

/* ── contract ─────────────────────────────────────────────────────────────── */
.ca {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--ink-2);
  flex-wrap: wrap;
}
.ca code { font: 500 13px/1.4 ui-monospace, Menlo, monospace; color: var(--mute); word-break: break-all; flex: 1; min-width: 200px; }
.ca button { background: none; border: 1px solid var(--line); color: var(--paper); border-radius: 999px; padding: 9px 16px; font: 500 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: border-color 0.3s ease, color 0.3s ease; }
.ca button:hover { border-color: var(--neon); color: var(--neon); }

/* ── footer ───────────────────────────────────────────────────────────────── */
footer { padding: clamp(60px, 8vh, 90px) var(--gutter) 40px; border-top: 1px solid var(--line); }
.foot-top { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-end; }
.foot-mark { font: 400 clamp(44px, 10vw, 110px)/0.9 var(--serif); color: var(--ink-3); letter-spacing: -0.03em; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { font: 500 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); transition: color 0.25s ease; }
.foot-links a:hover { color: var(--neon); }
.smallprint { margin-top: 34px; color: #5c5c52; font-size: 12px; max-width: 70ch; }

/* ── reveal ───────────────────────────────────────────────────────────────── */
[data-rise] { opacity: 0; transform: translateY(26px); }
[data-rise].in { opacity: 1; transform: none; transition: opacity 0.85s ease, transform 0.95s cubic-bezier(0.16, 1, 0.3, 1); }
[data-rise].in:nth-child(2) { transition-delay: 0.07s; }
[data-rise].in:nth-child(3) { transition-delay: 0.14s; }
[data-rise].in:nth-child(4) { transition-delay: 0.21s; }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .nav .cta { display: none; }

  /* Everything in the hero has to fit one screen with the rail still pinned to the bottom,
     so the coin stage and the type both give ground on short phones. */
  .hero { padding-top: 78px; }
  .hero-inner { grid-template-columns: 1fr; gap: 0; text-align: left; align-content: center; }
  .coin-stage { order: -1; aspect-ratio: auto; height: clamp(120px, 22vh, 190px); margin-bottom: 10px; }
  .coin { width: min(34vw, 132px); }
  .coin.small { width: 11%; }
  .c3 { display: none; }
  .corners { left: 10px; right: 10px; }
  .a3, .a5 { display: none; }
  .hero h1 { font-size: clamp(34px, 11.4vw, 58px); line-height: 0.96; }
  .hero .sub { font-size: 14.5px; margin-top: 14px; max-width: 34ch; }
  .hero-actions { margin-top: 20px; }

  .pair-grid { grid-template-columns: 1fr; }
  .pair-x { transform: rotate(90deg); padding: 4px 0; }
  .lore-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 1fr; gap: 10px; }
  .step .n { padding-top: 0; }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  /* Thumb zone: the primary action is full width and sits low on the screen. */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .cta { justify-content: center; padding: 16px 22px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .line > span, .fade-up, [data-rise] { transform: none !important; opacity: 1 !important; }
}

/* ══ Old School interface pass ═══════════════════════════════════════════════
   The login screen runs behind the lander, and the type takes on the client's
   interface look: pixel face, warm orange, one hard black shadow offset by a
   whole pixel. Panels get the stone bevel with rivets in the corners. Body copy
   stays in Inter, because a bitmap face at 15px is a wall. */
:root {
  --rs: 'Jersey 15', 'Press Start 2P', monospace;
  --rs-orange: #ff981f;
  --rs-yellow: #ffe14d;
  --rs-stone: #3e3529;
  --rs-stone-hi: #6b5c43;
  --rs-stone-lo: #14100a;
  --rs-edge: #1c1710;
}

/* one shared hard shadow, the thing that makes the client's text read as the client's text */
.rs, .hero h1, h2, .eyebrow, .brand b, .nav-links a, .sheet a, .cta, .asset .sym,
.asset .meta b, .stat b, .stat span, .step .n, .step h3, .boot-title, .boot-msg,
.foot-mark, .foot-links a, .attrib, .ca button, .rail-item, .pair-x, .quote {
  font-family: var(--rs);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.9);
  letter-spacing: 0.01em;
}

/* Jersey renders small for its em box, so anything that switched face needs the size back */
.hero h1 { font-size: clamp(50px, 7.6vw, 116px); line-height: 0.92; letter-spacing: 0; color: var(--rs-yellow); }
.hero h1 em { color: var(--rs-orange); }
h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1; letter-spacing: 0; color: var(--rs-yellow); }
.eyebrow { font-size: 19px; letter-spacing: 0.14em; color: var(--rs-orange); }
.brand b { font-size: 26px; color: var(--rs-orange); }
.nav-links a, .cta, .sheet a, .ca button, .foot-links a { font-size: 20px; letter-spacing: 0.06em; text-transform: none; }
.sheet a { font-size: clamp(38px, 9vw, 62px); }
.nav-links a { color: var(--rs-yellow); }
.nav-links a:hover { color: var(--rs-orange); }
/* the neon pill keeps black type, the shadow only belongs on the stone variants */
.cta { color: var(--ink); text-shadow: none; }
.cta.ghost {
  color: var(--rs-orange);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
  border: 2px solid var(--rs-edge);
  border-radius: 999px;
  background: linear-gradient(180deg, #453a2c 0%, #332b20 100%);
  box-shadow: inset 0 0 0 2px rgba(139, 122, 92, 0.45);
}
.cta.ghost:hover { color: var(--ink); text-shadow: none; }
.asset .sym { font-size: clamp(38px, 5vw, 56px); color: var(--rs-orange); }
.asset .meta b { font-size: 26px; color: var(--rs-yellow); }
.stat b { font-size: clamp(40px, 5.4vw, 64px); color: var(--rs-orange); }
.stat span { font-size: 17px; letter-spacing: 0.1em; }
.step .n { font-size: 26px; color: var(--rs-orange); }
.step h3 { font-size: clamp(26px, 3vw, 36px); color: var(--rs-yellow); letter-spacing: 0; }
.foot-mark { font-size: clamp(60px, 13vw, 150px); color: #2a2419; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }
.attrib, .rail-item { font-size: 17px; letter-spacing: 0.08em; }
.rail-item b { font-family: var(--rs); color: var(--rs-orange); }
.pair-x { color: var(--rs-orange); }
.boot-title { font-family: var(--rs); font-size: clamp(44px, 9vw, 72px); color: var(--rs-orange); letter-spacing: 0.04em; }
.boot-msg { font-size: 20px; letter-spacing: 0.04em; color: var(--rs-yellow); text-transform: none; }
.quote { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.16; letter-spacing: 0; color: var(--rs-yellow); }
.quote i { color: var(--rs-orange); }

/* ── login screen behind the lander ───────────────────────────────────────── */
.hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* scaled past the frame so the blur never shows a soft edge */
  transform: scale(1.1);
  filter: blur(1.6px) saturate(0.95) brightness(1.02) contrast(1.04);
  opacity: 0;
  transition: opacity 1.8s ease 0.25s;
}
.ready .hero-bg video { opacity: 0.85; }
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 8, 0.82) 0%, rgba(10, 10, 8, 0.24) 34%,
                    rgba(10, 10, 8, 0.4) 68%, rgba(10, 10, 8, 0.96) 100%),
    linear-gradient(90deg, rgba(10, 10, 8, 0.78) 0%, rgba(10, 10, 8, 0.06) 52%, rgba(10, 10, 8, 0.22) 100%);
}
/* the coin stage sat over flat black before; give it a little separation from the video */
.coin-stage::before { opacity: 0.75; }

/* ── stone panels ─────────────────────────────────────────────────────────── */
/* Bevel is two inset rings, light on the inside then the near-black edge, with four rivets
   painted as radial gradients so there is no extra markup for them. */
.asset, .ca {
  background:
    radial-gradient(circle at 14px 14px, var(--rs-stone-hi) 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 14px) 14px, var(--rs-stone-hi) 0 2.5px, transparent 3px),
    radial-gradient(circle at 14px calc(100% - 14px), var(--rs-stone-hi) 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--rs-stone-hi) 0 2.5px, transparent 3px),
    linear-gradient(180deg, #453a2c 0%, #332b20 100%);
  border: 2px solid var(--rs-edge);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px rgba(139, 122, 92, 0.5),
    inset 0 2px 0 rgba(255, 225, 160, 0.08),
    0 4px 0 var(--rs-stone-lo);
}
.asset .name, .asset .meta div, .ca code { color: #c3b79a; }
.asset:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px rgba(255, 190, 90, 0.55), inset 0 2px 0 rgba(255, 225, 160, 0.1), 0 6px 0 var(--rs-stone-lo); }
.asset { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; }
.ca button { color: var(--rs-yellow); border-color: rgba(139, 122, 92, 0.6); }
.ca button:hover { border-color: var(--rs-orange); color: var(--rs-orange); }

/* boot screen wears the same panel, so the first thing on screen is already the theme */
.boot-inner {
  padding: 30px 26px 26px;
  background: linear-gradient(180deg, #453a2c 0%, #332b20 100%);
  border: 2px solid var(--rs-edge);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(139, 122, 92, 0.5), 0 5px 0 var(--rs-stone-lo);
}
.boot-bar { border-color: var(--rs-edge); background: #241d14; }
.boot-bar i { background: linear-gradient(180deg, #ffbe4d, #d1860f); }

/* The hero never had a side gutter of its own: on wide screens the centred max-width supplied
   one, and on a phone that collapses to zero and the copy touches the bezel. Pad the inner and
   widen its cap by the same amount so nothing moves on desktop. */
.hero-inner {
  padding-inline: var(--gutter);
  max-width: calc(var(--max) + var(--gutter) * 2);
}

@media (max-width: 900px) {
  .nav-links a, .cta, .ca button, .foot-links a { font-size: 19px; }
  .hero h1 { font-size: clamp(36px, 10.6vw, 60px); line-height: 0.98; }
  .eyebrow { font-size: 17px; }
  .quote { font-size: clamp(24px, 6.6vw, 32px); }
  .stat span { font-size: 15px; }
  .hero-bg video { filter: blur(2px) saturate(0.9) brightness(0.9) contrast(1.04); }
  .ready .hero-bg video { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .ready .hero-bg video { opacity: 0.5; transition: none; }
}

/* ── the coin art ─────────────────────────────────────────────────────────── */
/* The stack sprite is a 3D render, not pixel art, so it gets smoothed rather than nearest
   neighboured. It also carries more internal negative space than the old disc did, so the
   ambient copies need a little more size before they read as anything. */
.ambient img { width: clamp(20px, 2.4vw, 34px); opacity: 0.2; }
.coin { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 26px rgba(245, 195, 60, 0.22)); }
.brand img { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)); }

/* ── buttons ──────────────────────────────────────────────────────────────── */
/* Not pills. These are built like the client's: a hard rectangle with a dark outline, a lighter
   bevel ring inside it, and a solid edge underneath, so pressing one drops it onto its own edge
   instead of fading a colour. The primary keeps Robinhood's neon, the secondary is stone. */
.cta {
  border-radius: 0;
  border: 2px solid #0f0b06;
  padding: 15px 26px;
  gap: 11px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.25s ease, color 0.25s ease;
}
/* the old slide-up fill belonged to the pill */
.cta::after { display: none; }

.cta:not(.ghost) {
  background: linear-gradient(180deg, #33440a 0%, #1d2705 100%);
  color: var(--neon);
  border-color: #0b1000;
  box-shadow:
    inset 0 0 0 2px rgba(204, 255, 0, 0.4),
    inset 0 2px 0 rgba(230, 255, 150, 0.16),
    0 5px 0 #0b1000;
}
.cta:not(.ghost):hover {
  background: linear-gradient(180deg, #435a0c 0%, #263306 100%);
  color: #e6ff5c;
}

.cta.ghost {
  background: linear-gradient(180deg, #55462f 0%, #3a2f20 100%);
  color: var(--rs-orange);
  border: 2px solid #0f0b06;
  border-radius: 0;
  box-shadow:
    inset 0 0 0 2px rgba(160, 138, 96, 0.55),
    inset 0 2px 0 rgba(255, 226, 160, 0.14),
    0 5px 0 #0f0b06;
}
.cta.ghost:hover {
  background: linear-gradient(180deg, #63523a 0%, #453726 100%);
  color: var(--rs-yellow);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85);
}

/* the press: down five pixels, onto the edge that was holding it up */
.cta:active {
  transform: translateY(5px);
  box-shadow: inset 0 0 0 2px rgba(204, 255, 0, 0.4), inset 0 2px 0 rgba(230, 255, 150, 0.16), 0 0 0 #0b1000;
}
.cta.ghost:active {
  box-shadow: inset 0 0 0 2px rgba(160, 138, 96, 0.55), inset 0 2px 0 rgba(255, 226, 160, 0.14), 0 0 0 #0f0b06;
}

/* a coin sat on the front of the primary, in place of an icon font */
.cta:not(.ghost)::before {
  content: '';
  width: 15px;
  height: 15px;
  flex: none;
  background: url('/assets/gold-64.png') center / contain no-repeat;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7));
}

/* the header button is the same object at a smaller size */
.nav .cta { padding: 11px 18px; box-shadow: inset 0 0 0 2px rgba(204, 255, 0, 0.4), inset 0 2px 0 rgba(230, 255, 150, 0.16), 0 4px 0 #0b1000; }
.nav .cta:active { transform: translateY(4px); }

@media (max-width: 560px) {
  .hero-actions .cta { justify-content: center; padding: 17px 22px; }
}

/* ══ login gate ══════════════════════════════════════════════════════════════
   The lander is the client's login screen. The room is the hero's own video, so this layer only
   carries the panel and the chrome around it; entering fades the panel off and leaves the camera
   exactly where it was. Scroll is locked until a button is pressed, never dismissed by scrolling. */
.login {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: clamp(14px, 2.4vh, 26px);
  padding: clamp(16px, 4vh, 40px) 20px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);
  transition: opacity 0.55s ease, visibility 0.55s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
body.gated { overflow: hidden; }
body.gated .login { opacity: 1; visibility: visible; transform: none; }
.login::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 46%, rgba(8, 8, 6, 0.12), rgba(8, 8, 6, 0.66) 82%);
}
.login > * { position: relative; }

/* while the gate is up the room runs at full brightness and everything behind it is held back */
body.gated .hero-bg video { filter: saturate(1) brightness(1.12) contrast(1.02); opacity: 1; }
body.gated .nav, body.gated .hero-inner, body.gated .corners, body.gated .rail { opacity: 0; pointer-events: none; }
.nav, .rail { transition: opacity 0.6s ease; }

/* ── logo block ───────────────────────────────────────────────────────────── */
.login-logo { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 18px); }
.login-logo img { width: clamp(54px, 8vh, 92px); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.65)); }
.wordmark { text-align: left; }
.wordmark b {
  display: block;
  font: 400 clamp(40px, 7vh, 74px)/0.9 var(--rs);
  color: #e9edf2;
  letter-spacing: 0.02em;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
}
/* the ribbon under the mark, same idea as the one on the real screen */
.wordmark i {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 16px;
  font: 400 clamp(15px, 2.1vh, 22px)/1.25 var(--rs);
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffe9a8;
  background: linear-gradient(180deg, #a3202a 0%, #75121a 100%);
  border: 1px solid #4a0b10;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}

/* ── the panel ────────────────────────────────────────────────────────────── */
.panel {
  width: min(600px, 100%);
  padding: clamp(20px, 3.4vh, 32px) clamp(20px, 3vw, 34px);
  text-align: center;
  border-radius: 14px;
  border: 2px solid #9aa0a6;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #565c64 0%, #3c4147 55%, #2d3137 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 20px 60px rgba(0, 0, 0, 0.62);
}
.panel-title {
  font: 400 clamp(22px, 3.2vh, 30px)/1.2 var(--rs);
  color: #ffff00;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}
.panel-sub {
  margin-top: 8px;
  font-size: clamp(12.5px, 1.7vh, 14px);
  line-height: 1.5;
  color: #cfd4da;
  max-width: 42ch;
  margin-inline: auto;
}

/* contract line, the one thing anyone actually came for */
.ca-row {
  margin-top: clamp(14px, 2.2vh, 20px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 13px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ca-row code {
  flex: 1;
  min-width: 0;
  font: 500 12px/1.4 ui-monospace, Menlo, monospace;
  color: #ffe9a8;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-actions { margin-top: clamp(14px, 2.2vh, 20px); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── the client's own button ──────────────────────────────────────────────── */
.rsbtn {
  font: 400 clamp(17px, 2.4vh, 22px)/1 var(--rs);
  color: #f2f5f8;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
  background: linear-gradient(180deg, #4c525a 0%, #34393f 100%);
  border: 1px solid #b9bec4;
  border-radius: 3px;
  padding: 12px 26px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background 0.18s ease, color 0.18s ease, transform 0.07s ease;
}
.rsbtn:hover { background: linear-gradient(180deg, #5d646d 0%, #3e444b 100%); color: #ffff8a; }
.rsbtn:active { transform: translateY(1px); }
.rsbtn.tiny { font-size: clamp(14px, 1.9vh, 17px); padding: 8px 15px; }

/* ── world button and the legal strip, bottom corners ─────────────────────── */
.worldbtn {
  position: fixed;
  left: clamp(14px, 3vw, 34px);
  bottom: clamp(46px, 8vh, 74px);
  display: grid;
  gap: 2px;
  padding: 9px 18px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #b9bec4;
  border-radius: 3px;
  background: linear-gradient(180deg, #4c525a 0%, #34393f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background 0.18s ease, transform 0.07s ease;
}
.worldbtn:hover { background: linear-gradient(180deg, #5d646d 0%, #3e444b 100%); }
.worldbtn:active { transform: translateY(1px); }
.worldbtn b { font: 400 clamp(17px, 2.2vh, 21px)/1 var(--rs); color: #f2f5f8; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8); }
.worldbtn i { font: 400 11px/1.2 var(--sans); font-style: normal; color: #b9bec4; }

.login-legal {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(14px, 2.6vh, 24px);
  width: min(720px, calc(100% - 40px));
  text-align: center;
  font-size: 11.5px;
  line-height: 1.5;
  color: #b9bec4;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
}

@media (max-width: 600px) {
  .login { gap: 16px; }
  .login-logo { flex-direction: column; gap: 8px; text-align: center; }
  .wordmark { text-align: center; }
  .panel-actions .rsbtn { flex: 1; }
  .worldbtn { left: 50%; transform: translateX(-50%); bottom: clamp(52px, 9vh, 78px); }
  .worldbtn:active { transform: translateX(-50%) translateY(1px); }
  .ca-row code { font-size: 11px; }
}
/* the hero copy is only held back while the gate is up, so give it something to come back on */
.hero-inner, .corners { transition: opacity 0.7s ease 0.15s; }

/* The room is the whole point while the gate is up, so it runs close to raw: barely blurred,
   barely cropped, and the two veils that keep the scrolled hero readable are pulled right back. */
body.gated .hero-bg video {
  transform: scale(1.02);
  filter: blur(0.6px) saturate(1.05) brightness(1.3) contrast(1.02);
  opacity: 1;
}
body.gated .hero-bg::after {
  background: linear-gradient(180deg, rgba(10, 10, 8, 0.3) 0%, rgba(10, 10, 8, 0.04) 34%, rgba(10, 10, 8, 0.34) 100%);
}
body.gated .hero::after { opacity: 0.35; }
.login::before { background: radial-gradient(ellipse at 50% 46%, rgba(8, 8, 6, 0) 30%, rgba(8, 8, 6, 0.42) 88%); }
.hero::after, .hero-bg video, .hero-bg::after { transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease, background 0.8s ease; }
/* Sit the mark and panel below the logo painted into the room, rather than on top of it. */
.login { padding-top: clamp(90px, 20vh, 210px); }
@media (max-width: 600px) { .login { padding-top: clamp(60px, 14vh, 130px); } }
/* The implicit grid column was sizing to the panel's max-content, which on a phone is wider than
   the screen. Pin the track and let the panel shrink inside it. */
.login { grid-template-columns: minmax(0, 1fr); }
.login-logo { justify-self: center; }
.panel { justify-self: center; width: 100%; max-width: 600px; }
@media (max-width: 600px) {
  .panel-sub { max-width: none; }
  .ca-row { flex-wrap: wrap; }
  .ca-row code { flex: 1 1 100%; white-space: normal; word-break: break-all; text-align: center; }
  .ca-row .rsbtn { flex: 1 1 100%; }
}
/* On a short phone the centred world button and the panel end up in the same place; the panel wins. */
@media (max-width: 600px) and (max-height: 700px) {
  .worldbtn { display: none; }
  .login { padding-top: clamp(40px, 8vh, 90px); gap: 12px; }
}