/* KingTradezz - house style. Ink, ivory, antique gold.
   Type is set large on purpose: Cormorant Garamond has a small x-height, so serif headings read smaller
   than their pixel size next to the Manrope body. Every size comes from the scale below. */
:root {
  --ink: #0b0d12;
  --ink-2: #10131a;
  --ink-3: #161a23;
  --line: rgba(201, 169, 97, 0.18);
  --line-soft: rgba(237, 230, 214, 0.08);
  --ivory: #ede6d6;
  --ivory-2: rgba(237, 230, 214, 0.78);
  --ivory-3: rgba(237, 230, 214, 0.56);
  --gold: #c9a961;
  --gold-hi: #e3c77d;
  --gold-lo: #8f7741;
  --win: #4fb286;
  --loss: #d2665a;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --imperial: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1240px;
  --gut: 20px;
  --radius: 999px;
  --card: 20px;

  /* Type scale (phone -> desktop) */
  --fs-h1: clamp(3.3rem, 1.6rem + 6.6vw, 6.8rem);        /* 53 -> 109px */
  --fs-h2: clamp(2.6rem, 1.4rem + 4.6vw, 4.6rem);        /* 42 -> 74px */
  --fs-closing: clamp(2.9rem, 1.4rem + 5.6vw, 5.4rem);   /* 46 -> 86px */
  --fs-h3: clamp(1.9rem, 1.4rem + 1.6vw, 2.3rem);        /* 30 -> 37px */
  --fs-faq: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);      /* 23 -> 30px */
  --fs-eyebrow: clamp(0.92rem, 0.85rem + 0.5vw, 1.2rem); /* 15 -> 19px, all caps */
  --fs-lede: clamp(1.22rem, 1rem + 0.9vw, 1.5rem);       /* 20 -> 24px */
  --fs-intro: clamp(1.14rem, 1rem + 0.55vw, 1.35rem);    /* 18 -> 22px */
  --fs-body: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem); /* 17 -> 19px */
  --fs-ui: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);     /* 16 -> 17px: nav, buttons, toggles */
  --fs-small: clamp(0.94rem, 0.9rem + 0.15vw, 1rem);     /* 15 -> 16px: fine print, notes */
  --fs-label: clamp(0.82rem, 0.8rem + 0.1vw, 0.875rem);  /* 13 -> 14px: small caps labels in cards */
  color-scheme: dark;
}
@media (min-width: 760px) { :root { --gut: 36px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font: 400 var(--fs-body)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
b, strong { font-weight: 600; color: var(--ivory); }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.num { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }
.muted { color: var(--ivory-3); }
.hidden { display: none !important; }

/* ---------- type ---------- */
/* Section labels: tracked gold capitals, large enough to read at a glance, with a slow light sweeping
   across them every few seconds. Plain gold when the visitor prefers reduced motion. */
.eyebrow {
  display: inline-block;
  font: 600 var(--fs-eyebrow)/1.25 var(--sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  background: linear-gradient(100deg, var(--gold) 0 38%, #fff3cc 50%, var(--gold) 62% 100%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: kt-shimmer 7s ease-in-out infinite;
}
@keyframes kt-shimmer { 0%, 40% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .eyebrow { animation: none; background: none; -webkit-text-fill-color: currentColor; } }
.label {
  font: 600 var(--fs-label)/1.2 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory-3);
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.012em; margin: 0; color: var(--ivory); }
h1 { font-size: var(--fs-h1); line-height: 0.96; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.04; text-wrap: balance; }
h3 { font-size: var(--fs-h3); line-height: 1.12; }
h1 em, h2 em { font-style: normal; color: var(--gold-hi); }
/* The hero's "real-time": gold, italic and underlined in gold. */
h1 em.rt { font-style: italic; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 0.055em; text-underline-offset: 0.14em; text-decoration-skip-ink: none; }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--ivory-2); max-width: 30em; text-wrap: pretty; }
.section-head { display: grid; gap: 20px; margin-bottom: 64px; max-width: 920px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; justify-items: center; }
.section-head p { margin: 0; font-size: var(--fs-intro); line-height: 1.55; color: var(--ivory-2); }
.section-head.center p { max-width: 38em; text-wrap: balance; }

/* ---------- buttons ---------- */
.btn {
  --h: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 30px;
  font: 600 var(--fs-ui)/1 var(--sans); letter-spacing: 0.01em;
  text-decoration: none; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--gold); background: var(--gold); color: var(--ink);
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
  white-space: nowrap;
}
.btn:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ivory); border-color: rgba(237, 230, 214, 0.3); }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold-hi); }
.btn.small { --h: 44px; padding: 0 22px; font-size: 0.97rem; }
.btn.block { width: 100%; }
.btn svg { width: 20px; height: 20px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- promo ribbon ---------- */
.ribbon {
  background: linear-gradient(90deg, #1a160d, #221c10 50%, #1a160d);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--ivory-2);
}
.ribbon .wrap { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; justify-content: center; padding-top: 12px; padding-bottom: 12px; text-align: center; }
.ribbon b { color: var(--gold-hi); font-weight: 600; }
.ribbon a { color: var(--gold-hi); font-weight: 600; text-underline-offset: 3px; }
.ribbon .num { color: var(--ivory); }
.ribbon .r-short { display: none; }
@media (max-width: 640px) { .ribbon .r-long { display: none; } .ribbon .r-short { display: inline; } .ribbon .wrap { gap: 4px 14px; padding-top: 10px; padding-bottom: 10px; } }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(11, 13, 18, 0.86); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line-soft); }
.nav > .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { width: 38px; height: 38px; }
.brand span { font: 600 1.9rem/1 var(--serif); letter-spacing: 0.02em; white-space: nowrap; }
/* The wordmark: a small italic "The", then KING'S COURT in inscriptional capitals, all in gold leaf. */
.brand .wm { display: inline-flex; align-items: baseline; gap: 0.38em; font: 700 1.3rem/1 var(--imperial); letter-spacing: 0.12em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff5d1 0%, #ecd28c 42%, #c99a43 78%, #a77a26 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)); }
.brand .wm em { font: italic 500 1.08em/1 var(--serif); letter-spacing: 0.01em; text-transform: none; }
.nav-links { display: none; gap: 30px; font-size: var(--fs-ui); color: var(--ivory-2); white-space: nowrap; }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--gold-hi); }
.nav-cta { display: flex; gap: 18px; align-items: center; }
.nav-cta .signin { display: none; font-size: var(--fs-ui); color: var(--ivory-2); text-decoration: none; }
.nav-cta .signin:hover { color: var(--gold-hi); }
@media (min-width: 1100px) { .nav-links { display: flex; } .nav-cta .signin { display: inline; white-space: nowrap; } }

/* Home page header, modelled on Apple's local navigation: a slim frosted bar, plain text tabs with a thin
   gold line under the section in view, a full-width Ranks flyout, and a full-screen menu on phones. */
.nav.has-tabs { background: rgba(9, 10, 14, 0.9); border-bottom: 1px solid rgba(201, 169, 97, 0.3); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 10px 30px -18px rgba(0, 0, 0, 0.9);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.nav.has-tabs > .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; column-gap: 24px; }
.nav.has-tabs .brand svg { width: 32px; height: 32px; }
.nav.has-tabs .brand .wm { font-size: 1.32rem; }
.nav.has-tabs .nav-cta { justify-self: end; gap: 22px; }
.nav.has-tabs .nav-cta .signin { display: inline; font: 700 0.86rem/1 var(--imperial); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(237, 230, 214, 0.8); }
.nav.has-tabs .btn.small { --h: 40px; padding: 0 22px; font: 700 0.88rem/1 var(--imperial); letter-spacing: 0.16em; text-transform: uppercase; }
/* Same flat gold as every other button; only the lettering follows the header's Cinzel capitals. */
.tabs { display: flex; align-items: stretch; height: 72px; gap: 4px; }
.tabs a, .tab-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border: 0; background: none; cursor: pointer;
  font: 700 1.02rem/1 var(--imperial); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(237, 230, 214, 0.82); text-decoration: none; white-space: nowrap; transition: color 0.2s; }
.tabs a::after, .tab-toggle::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, rgba(201, 169, 97, 0), #f3d58a 30%, #f3d58a 70%, rgba(201, 169, 97, 0)); transform: scaleX(0); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tabs a:hover, .tab-toggle:hover, .tab-toggle[aria-expanded="true"] { color: var(--ivory); }
.tabs a[aria-current="true"], .tab-toggle[aria-current="true"] { color: var(--gold-hi); }
.tabs a[aria-current="true"]::after, .tab-toggle[aria-current="true"]::after { transform: scaleX(1); }
.tab-toggle svg { width: 10px; height: 7px; opacity: 0.7; transition: transform 0.3s; }
.tab-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.flyout { position: absolute; left: 0; right: 0; top: 100%; z-index: 45; background: rgba(13, 15, 21, 0.97); border-bottom: 1px solid var(--line-soft);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  opacity: 0; transform: translateY(-8px); transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
.flyout.open { opacity: 1; transform: none; }
.flyout[hidden] { display: none; }
.flyout .wrap { padding-top: 28px; padding-bottom: 36px; }
.fly-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.fly-head span { font: 700 0.86rem/1 var(--imperial); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.fly-head a { font-size: 0.95rem; color: var(--gold-hi); text-decoration: none; }
.fly-head a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fly-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fly-card { display: grid; gap: 6px; padding: 20px 20px 22px; border-radius: 16px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.02); text-decoration: none;
  opacity: 0; transform: translateY(6px); transition: background 0.2s, border-color 0.2s, opacity 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.flyout.open .fly-card { opacity: 1; transform: none; }
.flyout.open .fly-card:nth-child(2) { transition-delay: 0s, 0s, 0.04s, 0.04s; }
.flyout.open .fly-card:nth-child(3) { transition-delay: 0s, 0s, 0.08s, 0.08s; }
.flyout.open .fly-card:nth-child(4) { transition-delay: 0s, 0s, 0.12s, 0.12s; }
.fly-card svg { width: 40px; height: 40px; margin-bottom: 8px; }
.fly-card:nth-child(1) svg { color: #c49a72; } .fly-card:nth-child(2) svg { color: #cdd8e3; } .fly-card:nth-child(4) svg { color: #e8e6e1; }
.fly-card span { font: 600 1.5rem/1.1 var(--serif); color: var(--ivory); }
.fly-card small { font-size: 0.9rem; color: var(--ivory-3); }
.fly-card:hover, .fly-card[aria-current="true"] { background: rgba(201, 169, 97, 0.08); border-color: var(--line); }
.fly-card:hover span, .fly-card[aria-current="true"] span { color: var(--gold-hi); }
.nav-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(5, 6, 9, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.25s ease; }
.nav-scrim.open { opacity: 1; }
.nav-scrim[hidden] { display: none; }

.menu-btn { display: none; position: relative; width: 40px; height: 40px; margin-right: -8px; border: 0; background: none; cursor: pointer; }
.menu-btn i { position: absolute; left: 11px; right: 11px; height: 1.5px; border-radius: 2px; background: var(--ivory); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.menu-btn i:first-child { top: 16px; } .menu-btn i:last-child { top: 23px; }
.menu-btn[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: var(--nav-h, 56px); z-index: 44; overflow-y: auto; background: var(--ink); opacity: 0; transition: opacity 0.25s ease; }
.sheet.open { opacity: 1; }
.sheet[hidden] { display: none; }
.sheet .wrap { padding-top: 20px; padding-bottom: 40px; }
.sheet nav { display: grid; }
.sheet nav > a { padding: 14px 0; font: 700 1.6rem/1.15 var(--imperial); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ivory); text-decoration: none;
  opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sheet-sub { display: grid; gap: 2px; margin: -2px 0 8px; padding-left: 2px; }
.sheet-sub a { padding: 7px 0; font-size: 1.1rem; color: var(--ivory-2); text-decoration: none; }
.sheet.open nav > a { opacity: 1; transform: none; }
.sheet.open nav > a:nth-of-type(2) { transition-delay: 0.03s; } .sheet.open nav > a:nth-of-type(3) { transition-delay: 0.06s; } .sheet.open nav > a:nth-of-type(4) { transition-delay: 0.09s; }
.sheet nav a[aria-current="true"] { color: var(--gold-hi); }
.sheet-signin { display: inline-block; margin-top: 24px; font-size: 1.05rem; color: var(--ivory-2); }

@media (max-width: 999px) {
  .nav.has-tabs > .wrap { grid-template-columns: 1fr auto; height: 60px; }
  .nav.has-tabs .brand svg { width: 28px; height: 28px; }
  .nav.has-tabs .brand .wm { font-size: 0.98rem; letter-spacing: 0.09em; }
  .nav.has-tabs .brand { gap: 9px; }
  .nav.has-tabs .btn.small { --h: 36px; padding: 0 16px; }
  .tabs, .nav.has-tabs .nav-cta .signin { display: none; }
  .nav.has-tabs .nav-cta { gap: 10px; }
  .menu-btn { display: block; }
  .flyout { display: none !important; }
}

/* Scroll-in motion: content rises gently into place once, the first time it comes into view. */
.js-motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--delay, 0s); }
.js-motion .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-motion .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- hero ---------- */
.hero { position: relative; padding: 72px 0 64px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 120%;
  background: radial-gradient(60% 50% at 70% 20%, rgba(201, 169, 97, 0.10), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; display: grid; gap: 56px; }
@media (min-width: 1000px) { .hero { padding: 112px 0 104px; } .hero .wrap { grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: 72px; } }
.hero h1 { margin: 20px 0 28px; }
.hero .cta-row { margin-top: 40px; }
.hero .fine { margin: 18px 0 0; font-size: var(--fs-small); color: var(--ivory-3); max-width: 34em; }

/* the example call card */
.alert-stage { position: relative; }
.alert-stage .tag { display: flex; justify-content: space-between; margin-bottom: 14px; font: 600 var(--fs-label)/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory-3); }
.alert {
  position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 24px 20px 28px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
.alert::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 2px; background: var(--gold); }
.alert .who { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.alert .who .av { width: 40px; height: 40px; border-radius: 50%; background: var(--ink-3); border: 1px solid var(--line); display: grid; place-items: center; }
.alert .who .av svg { width: 23px; height: 23px; }
.alert .who b { font-weight: 600; }
.alert .who .bot { font-size: 0.7rem; font-weight: 700; background: #5865f2; color: #fff; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.04em; }
.alert .who time { color: var(--ivory-3); font-size: 0.88rem; }
.alert .ping { display: inline-block; margin: 14px 0 12px; padding: 2px 8px; border-radius: 4px; background: rgba(174, 184, 196, 0.16); color: #c9d2dc; font-size: 1rem; font-weight: 600; }
.alert .payout { margin: 2px 0 18px; }
.alert .payout b { display: inline-block; font: 800 clamp(2.5rem, 2rem + 1.6vw, 3.1rem)/1 var(--sans); letter-spacing: -0.01em; color: var(--gold-hi);
  background: linear-gradient(180deg, #fff3c4, #e3c77d 45%, #c9a14a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.alert .payout small { margin-top: 8px; }
.alert .payout small { display: block; margin-top: 6px; font-size: 0.86rem; line-height: 1.45; color: var(--ivory-3); }
/* The call line sits above the payout, as in Discord (relay formats.call_heading): coloured dot, direction, market. */
.alert .title { font: 700 1rem/1.45 var(--sans); margin: 0 0 8px; }
.alert .title .when { white-space: nowrap; }
.alert .title .dot { display: inline-block; width: 0.82em; height: 0.82em; border-radius: 50%; margin-right: 0.4em; vertical-align: -0.06em; background: var(--loss); }
.alert .title .dot.up { background: var(--win); }
.alert .title .ts { padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); }
.alert dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 16px 24px; margin: 0; }
.alert.court-extra dl { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
.alert dt { font-size: 0.84rem; font-weight: 700; color: var(--ivory-2); margin-bottom: 3px; }
.alert dd { margin: 0; font-size: 1.06rem; }
.alert dd.big { font-family: var(--mono); font-size: 1.28rem; }
.alert .foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 0.88rem; color: var(--ivory-3); }
.alert-stage .stack { position: absolute; inset: 14px -10px -14px 10px; border: 1px solid var(--line-soft); border-radius: 16px; background: rgba(16, 19, 26, 0.6); z-index: -1; }

/* ---------- qualities band ---------- */
.stats { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--ink-2); }
.stats .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .stats .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: 30px 18px 28px 0; border-bottom: 1px solid var(--line-soft); }
.stat:nth-child(odd) { padding-right: 18px; }
@media (min-width: 900px) { .stat { border-bottom: 0; border-right: 1px solid var(--line-soft); padding: 40px 28px; } .stat:first-child { padding-left: 0; } .stat:last-child { border-right: 0; } }
.stat .k { font: 600 var(--fs-label)/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory-3); }
.stat .v { font: 500 clamp(1.8rem, 1.2rem + 1.6vw, 2.5rem)/1.1 var(--serif); margin-top: 12px; }
.stat .v .gold { color: var(--gold-hi); }
.stat .s { text-wrap: balance; font-size: var(--fs-small); line-height: 1.45; color: var(--ivory-3); margin-top: 8px; }
.stat .s a { white-space: nowrap; }
.stat.kalshi a { color: var(--gold-hi); text-decoration: none; }
.stat.kalshi a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- sections ---------- */
section.block { padding: 96px 0; border-bottom: 1px solid var(--line-soft); }
@media (min-width: 1000px) { section.block { padding: 136px 0; } }

/* Why Us: six numbered reasons */
.why-grid { display: grid; gap: 44px; }
@media (min-width: 900px) { .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 44px; } }
.why-item { border-top: 1px solid var(--line); padding-top: 26px; }
.why-item .num { display: block; margin-bottom: 14px; font: 600 1.4rem/1 var(--serif); letter-spacing: 0.18em; color: var(--gold); }
.why-item h3 { margin: 0 0 12px; }
.why-item p { margin: 0; color: var(--ivory-2); text-wrap: pretty; }
.why-item a { color: var(--gold-hi); text-underline-offset: 3px; }

/* pillars, approach and steps share one card rhythm */
.pillars, .steps, .approach { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .pillars, .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .approach { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 72px; }
}
.pillar, .step, .approach-item { border-top: 1px solid var(--line); padding-top: 30px; }
.pillar h3, .step h3, .approach-item h3 { margin: 0 0 14px; }
.pillar p, .step p, .approach-item p { margin: 0; color: var(--ivory-2); text-wrap: pretty; }
.approach-item p { max-width: 34em; }
.pillar a { color: var(--gold-hi); text-underline-offset: 3px; }
.step .n { display: block; margin-bottom: 14px; font: 600 2rem/1 var(--serif); color: var(--gold); }

/* ---------- membership ----------
   Each card reads top to bottom in the order a buyer decides: rank, what it is, price, the button, then
   what's included. Side by side the cards share rows, so every price, button and list starts at the
   same height. Each rank has one accent colour, used for its emblem, ticks and list label. */
.interval-row { display: flex; justify-content: center; }
.interval { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; margin-bottom: 56px; }
.interval button { background: none; border: 0; color: var(--ivory-2); font: 600 var(--fs-ui)/1 var(--sans); padding: 13px 24px; border-radius: 999px; cursor: pointer; }
.interval button[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
.interval .save { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-hi); margin-left: 8px; }
.interval button[aria-pressed="true"] .save { color: var(--ink); opacity: 0.7; }

.tiers { display: grid; gap: 32px; padding-top: 20px; }
@media (min-width: 1000px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 999px) { .tier.t-knight { order: -1; } }
.tier { --accent: var(--gold); position: relative; display: flex; flex-direction: column; background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 24px; padding: 36px 32px 36px; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1000px) { .tier { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: 0; align-content: start; } }
}
.tier .flag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--gold); color: var(--ink); font: 700 0.8rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; white-space: nowrap; }

.tier-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.tier .emblem { flex: none; width: 44px; height: 44px; }
.tier .emblem svg { width: 100%; height: 100%; }
.tier h3 { font-size: clamp(2.2rem, 1.8rem + 1vw, 2.6rem); line-height: 1; }
.tier .blurb { margin: 0 0 28px; color: var(--ivory-2); font-size: 1.05rem; line-height: 1.5; text-wrap: pretty; }

.price-block { display: grid; align-content: start; gap: 8px; margin-bottom: 28px; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price .amt { font: 500 clamp(3.2rem, 2.5rem + 1.4vw, 3.7rem)/1 var(--serif); letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.price .per { color: var(--ivory-3); font-size: 1rem; }
.price-meta { margin: 4px 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--gold-hi); }
.price-meta s { margin-right: 6px; color: var(--ivory-3); font-weight: 400; text-decoration-thickness: 1.5px; }
.price-sub { margin: 0; font-size: var(--fs-small); color: var(--ivory-3); }
.seats { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: var(--fs-small); color: var(--ivory-2); }
.seats .bar { flex: 1; height: 5px; background: var(--ink-3); border-radius: 3px; overflow: hidden; }
.seats .bar i { display: block; height: 100%; background: linear-gradient(90deg, #b8862f, #f6dc8a); }

.tier .go { display: grid; gap: 14px; align-content: start; margin-bottom: 32px; }
.trial-link { display: block; text-align: center; font-size: var(--fs-ui); color: var(--ivory-2); text-decoration: underline; text-underline-offset: 4px; }
.trial-link:hover { color: var(--ivory); }
.go-note { margin: 0; text-align: center; font-size: var(--fs-small); color: var(--ivory-3); }


.incl { border-top: 1px solid var(--line-soft); padding-top: 28px; }
.incl-label { margin: 0 0 18px; font: 700 var(--fs-label)/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.tier ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; font-size: 1.05rem; line-height: 1.45; color: var(--ivory-2); }
.tier li { position: relative; padding-left: 30px; }
.tier li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 17px; height: 17px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6 6.3 11.8 13 4.6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6 6.3 11.8 13 4.6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.tier li b { color: var(--ivory); font-weight: 600; }
/* Knight's headline line: same size as its neighbours, but bolder and brighter, on a soft steel wash that
   fades out to the right. */
.tier li.key { margin: -7px -10px; padding: 7px 10px 7px 40px; border-radius: 10px; font-weight: 600; color: #f6f8fb;
  background: linear-gradient(90deg, rgba(205, 216, 227, 0.16), rgba(205, 216, 227, 0.05) 60%, rgba(205, 216, 227, 0)); }
.tier li.key b { color: #fff; font-weight: 700; }
.tier li.key::before { left: 10px; top: calc(7px + 0.2em); background: #eef3f8; }
.tier li.locked { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: rgba(237, 230, 214, 0.4); }
.tier li.locked b { color: inherit; }
.tier li.locked::before { width: 14px; height: 14px; top: 50%; margin-top: -8px; left: 2px; background: rgba(237, 230, 214, 0.4);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2h.5A1.5 1.5 0 0 1 13.5 8.5v5A1.5 1.5 0 0 1 12 15H4a1.5 1.5 0 0 1-1.5-1.5v-5A1.5 1.5 0 0 1 4 7h.5Zm1.5 0h4V5a2 2 0 0 0-4 0v2Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2h.5A1.5 1.5 0 0 1 13.5 8.5v5A1.5 1.5 0 0 1 12 15H4a1.5 1.5 0 0 1-1.5-1.5v-5A1.5 1.5 0 0 1 4 7h.5Zm1.5 0h4V5a2 2 0 0 0-4 0v2Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.tier li.locked .tag { flex: none; padding: 4px 9px; border: 1px solid rgba(195, 207, 220, 0.4); border-radius: 999px; font: 700 0.68rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #c3cfdc; }

.tiers-note { text-wrap: balance; margin: 40px auto 0; max-width: 40em; text-align: center; font-size: var(--fs-small); color: var(--ivory-3); }
.compare-toggle { margin-top: 20px; text-align: center; }
.compare-toggle summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 12px 22px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--gold-hi); font-size: var(--fs-ui); font-weight: 600; transition: border-color 0.2s, background 0.2s; }
.compare-toggle summary:hover { border-color: var(--gold); background: rgba(201, 169, 97, 0.06); }
.compare-toggle summary svg { width: 11px; height: 8px; transition: transform 0.25s; }
.compare-toggle[open] summary svg { transform: rotate(180deg); }
.compare-toggle summary::-webkit-details-marker { display: none; }
.compare-scroll { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 1rem; text-align: left; }
.compare th, .compare td { padding: 15px 14px; border-bottom: 1px solid var(--line-soft); }
.compare th { font: 600 var(--fs-label)/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory-3); }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 16%; }
.compare .y { color: var(--gold); }
.compare .n { color: var(--ivory-3); }

/* ---------- rank ladder: the ornament escalates Squire < Knight < The Court ---------- */
/* Squire: matte, bronze hairline */
.tier.t-squire { --accent: #c49a72; border-color: rgba(180, 138, 100, 0.34); }
.tier.t-squire .incl { border-top-color: rgba(180, 138, 100, 0.22); }

/* Knight: brushed-steel frame and lettering; on desktop the frame stands taller than the card */
.tier.t-knight { --accent: #cdd8e3; border: 1px solid transparent;
  background: linear-gradient(180deg, #181b22, #12151b) padding-box,
    linear-gradient(155deg, #eef3f8, #8d9bab 30%, #d9e1ea 55%, #6f7d8d 80%, #c7d1dc) border-box;
  box-shadow: 0 30px 80px -40px rgba(174, 188, 204, 0.35); }
.tier.t-knight h3 { background: linear-gradient(180deg, #f6f8fb, #a3b1c0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tier.t-knight .incl { border-top-color: rgba(195, 207, 220, 0.2); }
.tier.t-knight .flag { background: linear-gradient(180deg, #f4f6f9, #aab7c5); color: #0b0d12; }
.tier.t-knight .btn { background: linear-gradient(180deg, #f2f5f8, #b4c0cd); border-color: #d5dde6; color: #0b0d12; }
.tier.t-knight .btn:hover { background: #ffffff; }
.tier.t-knight .trial-link { color: #dfe6ee; }
@media (min-width: 1000px) {
  .tier.t-knight { background: none; border-color: transparent; box-shadow: none; isolation: isolate; z-index: 2; }
  .tier.t-knight::before { content: ""; position: absolute; inset: -18px 0; z-index: -1; border-radius: 26px; border: 1px solid transparent;
    background: linear-gradient(180deg, #1a1d25, #12151b) padding-box,
      linear-gradient(155deg, #eef3f8, #8d9bab 30%, #d9e1ea 55%, #6f7d8d 80%, #c7d1dc) border-box;
    box-shadow: 0 40px 100px -40px rgba(174, 188, 204, 0.45); }
  .tier.t-knight .flag { top: -18px; }
}

/* The Court: gold foil frame, engraving, glow, a slow sheen and corner ornaments */
.tier.t-court { --accent: #f0c24b; border: 1.5px solid transparent; overflow: hidden;
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(240, 194, 75, 0.2), transparent 62%) padding-box,
    repeating-linear-gradient(135deg, rgba(240, 194, 75, 0.05) 0 1px, transparent 1px 9px) padding-box,
    linear-gradient(180deg, #1c170b, #100d06) padding-box,
    linear-gradient(135deg, #fff1a8, #d4a93c 22%, #8a6420 45%, #f6dc8a 62%, #b8862f 82%, #fde9a0) border-box;
  box-shadow: 0 44px 110px -40px rgba(240, 194, 75, 0.5); }
.tier.t-court::before { content: ""; position: absolute; inset: -30% -70%; pointer-events: none;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 240, 190, 0.12) 50%, transparent 56%);
  transform: translateX(-55%); animation: kt-sheen 8s ease-in-out infinite; }
@keyframes kt-sheen { 0%, 60% { transform: translateX(-55%); } 90%, 100% { transform: translateX(55%); } }
.tier.t-court .emblem { filter: drop-shadow(0 0 14px rgba(240, 194, 75, 0.35)); }
.tier.t-court h3 { background: linear-gradient(180deg, #fff6d2, #e6b54c 55%, #a77a26); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tier.t-court .price .amt { background: linear-gradient(180deg, #fff3c4, #e0b04a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tier.t-court .blurb, .tier.t-court ul { color: rgba(245, 233, 205, 0.84); }
.tier.t-court .incl { border-top-color: rgba(240, 194, 75, 0.24); }
.tier.t-court .btn { background: linear-gradient(180deg, #f9e08c, #c9a13d); border-color: #e6c25e; color: #1a1305; box-shadow: 0 10px 30px -12px rgba(240, 194, 75, 0.6); }
.tier.t-court .btn:hover { background: linear-gradient(180deg, #fff0b0, #dcb44e); }
.tier .corner { position: absolute; width: 22px; height: 22px; border: 0 solid #e9c66a; opacity: 0.85; pointer-events: none; }
.tier .corner.tl { top: 16px; left: 16px; border-width: 1.5px 0 0 1.5px; }
.tier .corner.tr { top: 16px; right: 16px; border-width: 1.5px 1.5px 0 0; }
.tier .corner.bl { bottom: 16px; left: 16px; border-width: 0 0 1.5px 1.5px; }
.tier .corner.br { bottom: 16px; right: 16px; border-width: 0 1.5px 1.5px 0; }
@media (prefers-reduced-motion: reduce) { .tier.t-court::before { animation: none; display: none; } }

/* ---------- the Inner Circle: a separate offer in obsidian and platinum ---------- */
.inner-band { position: relative; overflow: hidden; margin-top: 56px; display: grid; gap: 26px; align-items: center;
  padding: 36px 28px; border-radius: 24px; border: 1px solid transparent;
  background: radial-gradient(70% 140% at 0% 0%, rgba(214, 219, 232, 0.09), transparent 55%) padding-box,
    linear-gradient(180deg, #0a0b0e, #050608) padding-box,
    linear-gradient(115deg, #fbfbf8, #a7adb9 18%, #e6dff5 36%, #9fb4c4 54%, #f2efe8 72%, #8f97a6 88%, #fbfbf8) border-box;
  box-shadow: 0 40px 100px -50px rgba(205, 212, 230, 0.35); }
@media (min-width: 900px) { .inner-band { grid-template-columns: auto 1fr auto; padding: 44px 52px; gap: 44px; } }
.inner-emblem { width: 76px; height: 76px; filter: drop-shadow(0 0 16px rgba(220, 225, 240, 0.25)); }
.inner-emblem svg { width: 100%; height: 100%; }
.inner-kicker { font: 600 var(--fs-label)/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #b9bfcb; }
.inner-band h3 { font-size: clamp(2.3rem, 1.8rem + 1.4vw, 2.9rem); margin: 10px 0 10px; background: linear-gradient(180deg, #ffffff, #b4bac6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.inner-band p { margin: 0; color: var(--ivory-2); max-width: 42em; font-size: 1.08rem; line-height: 1.6; }
.inner-buy { text-align: center; min-width: 250px; }
.inner-price .amt { font: 500 3.6rem/1 var(--serif); color: #f2f1ec; }
.inner-price .per { color: var(--ivory-3); margin-left: 8px; font-size: 1.05rem; }
.inner-btn { margin-top: 16px; width: 100%; background: linear-gradient(180deg, #f7f7f4, #b9bec8); border-color: #dfe2e8; color: #0b0d12; }
.inner-btn:hover { background: #ffffff; border-color: #ffffff; }
.inner-buy .renew { font-size: 0.9rem; color: var(--ivory-3); margin: 12px 0 0; }

/* ---------- court ---------- */
.court { position: relative; background: #0d0c09; overflow: hidden; }
.court::before {
  content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(201, 169, 97, 0.035) 0 1px, transparent 1px 14px);
}
/* Squire, Knight and the Court each get a section: the pitch on the left, an example call on the right. */
.rank-detail { --rank-accent: var(--gold); position: relative; overflow: hidden; }
.rank-detail .wrap { position: relative; display: grid; gap: 56px; }
@media (min-width: 1000px) { .rank-detail .wrap { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 80px; } }
.rank-emblem { display: block; width: 72px; height: 72px; margin-bottom: 22px; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55)); }
.rank-emblem svg { width: 100%; height: 100%; }
.rank-detail h2 { margin-top: 20px; }
.rank-detail .lede { margin-top: 24px; }
.squire-detail { --rank-accent: #c49a72; }
.inner-detail { --rank-accent: #e8e6e1; background: radial-gradient(70% 90% at 85% 40%, rgba(214, 219, 232, 0.06), transparent 70%); }
.inner-detail .btn-row .inner-btn { width: auto; margin-top: 0; }
.inner-band p a { color: #e8e6e1; text-underline-offset: 3px; white-space: nowrap; }
/* The Inner Circle's three steps, framed in platinum like the purchase panel. */
.join-card { position: relative; padding: 30px 32px 34px; border-radius: 20px; border: 1px solid transparent;
  background: linear-gradient(180deg, #0f1116, #0a0b0f) padding-box,
    linear-gradient(115deg, #fbfbf8, #a7adb9 18%, #e6dff5 36%, #9fb4c4 54%, #f2efe8 72%, #8f97a6 88%, #fbfbf8) border-box;
  box-shadow: 0 40px 100px -50px rgba(205, 212, 230, 0.35); }
.join-card .tag { display: flex; justify-content: space-between; margin-bottom: 22px; font: 600 var(--fs-label)/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory-3); }
.join-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.join-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.join-steps .n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(232, 230, 225, 0.4); font: 600 1.4rem/1 var(--serif); color: #f2f1ec; }
.join-steps b { display: block; margin: 2px 0 4px; color: var(--ivory); font-weight: 600; }
.join-steps p { margin: 0; color: var(--ivory-2); font-size: 1rem; line-height: 1.55; }
.knight-detail { --rank-accent: #cdd8e3; background: linear-gradient(180deg, #0e1117, #0b0d12); }
.knight-detail::before { content: ""; position: absolute; inset: 0; opacity: 0.6; pointer-events: none;
  background: radial-gradient(60% 70% at 85% 30%, rgba(205, 216, 227, 0.07), transparent 70%); }
.why .section-head { max-width: 980px; }
.rank-list { list-style: none; padding: 0; margin: 34px 0 30px; display: grid; gap: 18px; max-width: 34em; }
.rank-list li { position: relative; padding-left: 26px; color: var(--ivory-2); }
.rank-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; transform: rotate(45deg); background: var(--rank-accent); }
.rank-list b { color: var(--ivory); font-weight: 600; }
.rank-note { font-size: var(--fs-small); line-height: 1.6; color: var(--ivory-3); border-left: 2px solid var(--rank-accent); padding: 4px 0 4px 16px; margin: 0 0 30px; max-width: 40em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- faq ---------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line-soft); max-width: 940px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 28px 0; font: 500 var(--fs-faq)/1.25 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 1.9rem/1 var(--sans); color: var(--gold); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 28px; color: var(--ivory-2); max-width: 46em; }
.faq .a p { margin: 0 0 10px; }

/* ---------- closing ---------- */
.closing { text-align: center; padding: 120px 0 132px; }
@media (min-width: 1000px) { .closing { padding: 152px 0 160px; } }
.closing h2 { font-size: var(--fs-closing); max-width: 14em; margin: 0 auto 24px; }
.closing p { font-size: var(--fs-intro); color: var(--ivory-2); max-width: 32em; margin: 0 auto 40px; }
.closing .cta-row { justify-content: center; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line-soft); padding: 64px 0 48px; font-size: var(--fs-small); color: var(--ivory-3); }
footer .top { display: grid; gap: 36px; margin-bottom: 44px; }
@media (min-width: 860px) { footer .top { grid-template-columns: 1.4fr 1fr 1fr; } }
footer h4 { font: 600 var(--fs-label)/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-2); margin: 0 0 16px; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
footer a { text-decoration: none; color: var(--ivory-2); }
footer a:hover { color: var(--gold-hi); }
footer .disclosure { border-top: 1px solid var(--line-soft); padding-top: 28px; line-height: 1.6; display: grid; gap: 12px; }
footer .disclosure p { margin: 0; }

/* preview banner (local preview data only) */
.preview-banner { position: fixed; right: 12px; bottom: 12px; z-index: 60; background: #3a2a10; color: var(--gold-hi); border: 1px solid var(--gold-lo); font: 600 0.8rem/1.3 var(--sans); letter-spacing: 0.04em; padding: 8px 12px; border-radius: 4px; max-width: 280px; }

/* ---------- simple pages (account, welcome, legal) ---------- */
.page { padding: 80px 0 112px; }
.page .wrap { max-width: calc(880px + var(--gut) * 2); }
.page h1 { font-size: clamp(2.8rem, 1.6rem + 4vw, 4.4rem); line-height: 1; margin: 20px 0 22px; }
.card { background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--card); padding: 32px; margin-top: 32px; }
.card h2 { font-size: clamp(1.8rem, 1.5rem + 0.8vw, 2.1rem); margin-bottom: 12px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 12px 24px; margin: 20px 0 0; font-size: 1.05rem; }
.kv dt { color: var(--ivory-3); }
.kv dd { margin: 0; }
.badge { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--fs-label)/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 14px; border: 1px solid var(--gold); color: var(--gold-hi); border-radius: 999px; }
.legal { color: var(--ivory-2); font-size: 1.06rem; }
.legal h2 { font-size: clamp(1.8rem, 1.5rem + 0.8vw, 2.1rem); margin: 48px 0 14px; }
.legal h3 { font-size: 1.45rem; margin: 30px 0 10px; }
.legal p, .legal li { margin: 0 0 14px; }
.legal ul { padding-left: 1.2em; }
.legal .updated { font-size: var(--fs-small); color: var(--ivory-3); }
.legal .box { border: 1px solid var(--line); background: var(--ink-2); padding: 20px 24px; border-radius: 12px; margin: 24px 0; color: var(--ivory); }
.discord-btn { background: #5865f2; border-color: #5865f2; color: #fff; }
.discord-btn:hover { background: #6d78f5; border-color: #6d78f5; color: #fff; }