/* ==========================================================================
   globalcasinospot.com - core stylesheet
   Theme: "the digital dollar desk". Black-rock violet ground, electric violet
   as the primary and ember orange as the secondary, gold reserved for ratings
   and the expensive rail. Monospaced figures everywhere a number carries meaning.
   Class vocabulary for this site only: peg-*  (pegged to the dollar)
   ========================================================================== */

:root {
  /* ground */
  --peg-void: #08021f;
  --peg-deck: #110635;
  --peg-panel: #1a0b4a;
  --peg-ridge: #2a1568;
  --peg-line: #38207f;

  /* ink */
  --peg-ink: #f4f1ff;
  --peg-ink-soft: #c9c2f0;
  --peg-ink-mute: #a79ed6;

  /* the two dollars: violet carries USDT, ember carries USDC.
     -lite variants are the text-safe versions, used wherever the accent
     becomes ink on a dark ground rather than a fill. */
  --peg-violet: #7c5cff;
  --peg-violet-lite: #9a80ff;
  --peg-violet-deep: #4712bd;
  --peg-ember: #f55800;
  --peg-ember-lite: #ff8f4d;
  --peg-ember-deep: #a83a00;

  /* signals */
  --peg-warn: #ffc700;
  --peg-alarm: #ff5f66;
  --peg-good: #3ddc97;

  --peg-shell: 1180px;
  --peg-gut: 24px;
  --peg-rail: 2px;

  /* surface recipe: every panel gets a lit top edge, a glass wash and a soft
     drop so the page reads as stacked hardware rather than flat rectangles */
  --peg-glass: linear-gradient(168deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014) 42%, rgba(255, 255, 255, 0) 78%);
  --peg-inset: inset 0 1px 0 rgba(255, 255, 255, .07);
  --peg-lift: 0 26px 64px -38px rgba(0, 0, 0, .95);

  --peg-sans: 'Inter', 'Inter fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --peg-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --peg-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Inter arrives over the network, so the first paint uses a system face and the
   swap reflows every paragraph under it. This fallback wears Inter's own metrics,
   which means the swap changes the shapes and not the line boxes. */
@font-face {
  font-family: 'Inter fallback';
  src: local('Arial');
  size-adjust: 107.12%;
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* keep anchor targets clear of the sticky masthead */
:target, h2[id], h3[id], section[id] { scroll-margin-top: 84px; }

body {
  margin: 0;
  background: var(--peg-void);
  color: var(--peg-ink);
  font-family: var(--peg-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden turns body into a scroll container and that is what
     breaks position:sticky on the masthead */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--peg-violet-lite); text-decoration: none; }
a:hover { text-decoration: underline; }
/* a link sitting inside running text has to be findable without colour: violet
   against the body ink is only 1.2:1, far under the 3:1 the rule asks for. Cards,
   nav, buttons and tiles are their own element and keep the clean look. */
.peg-prose a, .peg-lede a, .peg-band-intro a, .peg-fine a, .peg-faq a,
.peg-disclose a, .peg-note a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
}

/* ---- icon ink ------------------------------------------------------------
   Phosphor SVGs are stroked in currentColor. Loaded through <img> there is no
   element to inherit from, so currentColor resolves to black and every glyph
   disappears into this ground. Punch them to white here and dim with opacity
   at each site. The one glyph that is deliberately not white, the gold warning,
   overrides this further down. */
.peg-burger img,
.peg-disclose img,
.peg-faq summary img,
.back-to-top img { filter: brightness(0) invert(1); }

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
p { margin: 0 0 1.1em; }

/* one shared container so body copy starts at the logo's left edge
   and ends at the last nav item (house rule) */
.peg-shell {
  width: 100%;
  max-width: var(--peg-shell);
  margin-inline: auto;
  padding-inline: var(--peg-gut);
}

.peg-mono { font-family: var(--peg-mono); font-variant-numeric: tabular-nums; }

/* ====================== scroll reveal =====================================
   Gated on html.js so the page is fully visible when JS is off or when a
   headless capture never fires IntersectionObserver.                        */
html.js .peg-rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--peg-ease), transform .7s var(--peg-ease);
}
html.js .peg-rise.peg-lit { opacity: 1; transform: none; }
html.js .peg-rise[data-peg-delay="1"] { transition-delay: .08s; }
html.js .peg-rise[data-peg-delay="2"] { transition-delay: .16s; }
html.js .peg-rise[data-peg-delay="3"] { transition-delay: .24s; }
html.js .peg-rise[data-peg-delay="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .peg-rise { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ====================== header ============================================ */
/* the injected wrappers must not generate a box, or the sticky masthead is trapped
   inside a 68px tall parent and scrolls away with it */
#header, #footer { display: contents; }
/* ...but until the fetch lands the wrapper is empty, and with no box at all the
   whole page starts 69px too high and jumps when the masthead arrives. Hold the
   exact height (68px bar + 1px border) while it is empty. Biggest single CLS
   contributor on the site before this rule existed. */
#header:empty { display: block; height: 69px; }

.peg-mast {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8, 2, 31, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--peg-line);
}
.peg-mast-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.peg-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.06rem; color: var(--peg-ink); letter-spacing: -.03em; }
.peg-brand:hover { text-decoration: none; }
.peg-brand-coin { width: 30px; height: 30px; flex: none; display: block; }
.peg-brand-mark {
  text-transform: uppercase; letter-spacing: .01em; line-height: 1;
  font-weight: 800;
}
/* the coin carries the G, so the letter itself is held for readers and crawlers only */
.peg-brand-hid { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.peg-brand-thin { font-weight: 400; letter-spacing: .02em; }
.peg-brand-hot { color: var(--peg-ember); font-weight: 800; }
.peg-brand-mark small { display: block; margin-top: 3px; white-space: nowrap; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--peg-ink-mute); }
.peg-brand:hover .peg-brand-hot { color: var(--peg-ember-lite); }

/* ---- primary nav ---------------------------------------------------------
   The nav owns the whole strip right of the brand: the search box sits at its
   left edge and the five cells are pushed to the far right by an auto margin
   on the first of them. Holding both in one flex row is what lets the phone
   sheet reuse the same markup, with the search simply becoming its first row.
   The rail underline belongs to .peg-nav-top only: it must never reach the
   links inside a panel or a search result.                                   */
.peg-nav { margin-left: 28px; flex: 1; min-width: 0; display: flex; align-items: center; gap: 22px; }
.peg-nav-cell { position: relative; display: flex; align-items: center; }

.peg-nav-top {
  display: inline-flex; align-items: center; gap: 6px; position: relative;
  font-family: var(--peg-sans); font-size: .92rem; font-weight: 500; line-height: 1;
  color: var(--peg-ink-soft); background: none; border: 0; padding: 6px 0;
  white-space: nowrap; cursor: pointer;
}
.peg-nav-top img { width: 12px; height: 12px; filter: brightness(0) invert(1); opacity: .5; transition: transform .3s var(--peg-ease), opacity .3s var(--peg-ease); }
.peg-nav-top:hover,
.peg-nav-top[aria-current="page"],
.peg-nav-cell.peg-open > .peg-nav-top,
.peg-nav-cell.peg-here > .peg-nav-top { color: var(--peg-ink); text-decoration: none; }
.peg-nav-cell.peg-open > .peg-nav-top img { transform: rotate(180deg); opacity: 1; }
.peg-nav-top::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: var(--peg-rail); width: 0;
  background: linear-gradient(90deg, var(--peg-violet), var(--peg-ember));
  transition: width .3s var(--peg-ease);
}
.peg-nav-top:hover::after,
.peg-nav-top[aria-current="page"]::after,
.peg-nav-cell.peg-open > .peg-nav-top::after,
.peg-nav-cell.peg-here > .peg-nav-top::after { width: 100%; }

/* ---- the panels ----------------------------------------------------------
   Right-anchored to their own cell so the widest panel can never push past
   the shell. The padding above the card is a hover bridge, not a gap: a real
   gap would drop the hover on the way down to the first row.                */
.peg-drop { z-index: 70; }
.peg-drop-card { background-color: var(--peg-panel); background-image: var(--peg-glass); }
.peg-drop-rows { list-style: none; margin: 0; padding: 0; }
.peg-drop-rows a {
  display: block; color: var(--peg-ink-soft);
  transition: background .2s var(--peg-ease), border-color .2s var(--peg-ease), color .2s var(--peg-ease);
}
.peg-drop-rows a:hover, .peg-drop-rows a[aria-current="page"] { color: var(--peg-ink); text-decoration: none; background: rgba(124, 92, 255, .14); }
.peg-drop-rows b { display: block; font-size: .88rem; font-weight: 600; color: var(--peg-ink); }
.peg-drop-rows span { display: block; margin-top: 3px; font-size: .755rem; line-height: 1.45; color: var(--peg-ink-mute); }
.peg-drop-rows--score a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.peg-drop-rows--score b { font-size: .88rem; }
.peg-drop-rows span.peg-drop-score { margin: 0; font-family: var(--peg-mono); font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 600; color: var(--peg-warn); }
.peg-drop-more { margin: 0; font-size: .8rem; font-weight: 600; }
.peg-drop-more a { display: inline-flex; align-items: center; gap: 8px; color: var(--peg-ink); }
.peg-drop-more a:hover { color: var(--peg-ember-lite); text-decoration: none; }
.peg-drop-more img { width: 13px; height: 13px; filter: brightness(0) invert(1); opacity: .62; transition: transform .25s var(--peg-ease); }
.peg-drop-more a:hover img { transform: translate(3px, -3px); opacity: 1; }

/* ---- search --------------------------------------------------------------
   Index is /peg-search.json, fetched on the first focus rather than on load,
   so an ordinary reader never pays 32 KB for a box they did not open.
   Deliberately colourless: a plain slab of lifted ground with the glyph and the
   placeholder on it. Every state is a step in the same white wash, so the field
   never competes with the ranked figures, the score dials or the nav rail.   */
.peg-find { position: relative; flex: 0 1 290px; min-width: 0; display: flex; align-items: center; }
.peg-find-box {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 13px;
  background: rgba(255, 255, 255, .05);
  transition: background .25s var(--peg-ease), box-shadow .25s var(--peg-ease);
}
.peg-find-box:hover { background: rgba(255, 255, 255, .085); }
.peg-find-box:focus-within {
  background: rgba(255, 255, 255, .11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}
.peg-find-box img { width: 15px; height: 15px; flex: none; filter: brightness(0) invert(1); opacity: .42; transition: opacity .25s var(--peg-ease); }
.peg-find-box:hover img { opacity: .7; }
.peg-find-box:focus-within img { opacity: 1; }
.peg-find-in {
  flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 0;
  font-family: var(--peg-sans); font-size: .87rem; color: var(--peg-ink);
}
.peg-find-in::placeholder { color: var(--peg-ink-mute); }
.peg-find-in::-webkit-search-cancel-button { -webkit-appearance: none; }

.peg-find-out { z-index: 70; }
.peg-find-out[hidden] { display: none; }
.peg-find-card { background-color: var(--peg-panel); background-image: var(--peg-glass); }
.peg-find-hit {
  display: block; color: var(--peg-ink-soft);
  transition: background .16s var(--peg-ease), border-color .16s var(--peg-ease);
}
.peg-find-hit:hover, .peg-find-hit.peg-on { text-decoration: none; background: rgba(124, 92, 255, .14); }
.peg-find-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.peg-find-hit b { font-size: .855rem; font-weight: 600; color: var(--peg-ink); }
.peg-find-hit mark { background: none; color: var(--peg-ember-lite); font-weight: 700; }
.peg-find-tag {
  flex: none; font-size: .63rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--peg-ink-mute);
}
.peg-find-sub {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: 3px; font-size: .755rem; line-height: 1.45; color: var(--peg-ink-mute);
}
.peg-find-none { margin: 0; font-size: .82rem; color: var(--peg-ink-mute); }

.peg-burger { display: none; margin-left: auto; background: none; border: 1px solid var(--peg-line); padding: 8px; cursor: pointer; }
.peg-burger img { width: 22px; height: 22px; }

@media (min-width: 1000px) {
  /* the nav and everything in it fills the 68px bar, so top:100% lands on the
     masthead border rather than on the bottom of a 38px box floating in the
     middle of it. Without the stretch on .peg-nav itself the row is only as
     tall as the search field and every panel hangs 15px too high. */
  .peg-nav { align-self: stretch; }
  .peg-nav-cell { align-self: stretch; }
  .peg-nav-cell:first-of-type { margin-left: auto; }
  .peg-drop {
    position: absolute; top: 100%; right: 0; padding-top: 10px;
    opacity: 0; visibility: hidden; transform: translateY(-9px);
    transition: opacity .22s var(--peg-ease), transform .22s var(--peg-ease), visibility .22s;
  }
  .peg-nav-cell.peg-open .peg-drop { opacity: 1; visibility: visible; transform: none; }
  .peg-drop-card {
    width: 300px; padding: 12px;
    border: 1px solid var(--peg-line);
    box-shadow: var(--peg-lift), var(--peg-inset);
  }
  .peg-drop--mid .peg-drop-card { width: 400px; }
  .peg-drop--wide .peg-drop-card { width: 520px; }
  /* column flow, not row flow: the list is written in true reading order so the
     phone accordion reads top to bottom, and the two desktop columns fill down
     the first before starting the second */
  .peg-drop-rows--two { display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .peg-drop-rows--r5 { grid-template-rows: repeat(5, auto); }
  .peg-drop-rows--r6 { grid-template-rows: repeat(6, auto); }
  .peg-drop-rows a { padding: 9px 12px; border-left: var(--peg-rail) solid transparent; }
  .peg-drop-rows a:hover, .peg-drop-rows a[aria-current="page"] { border-left-color: var(--peg-violet); }
  .peg-drop-more { margin-top: 10px; padding: 11px 12px 2px; border-top: 1px solid var(--peg-line); }

  .peg-find { align-self: stretch; }
  .peg-find-out { position: absolute; top: calc(100% + 10px); left: 0; width: 460px; max-width: 92vw; }
  .peg-find-card {
    padding: 8px; border: 1px solid var(--peg-line);
    box-shadow: var(--peg-lift), var(--peg-inset);
    max-height: 68vh; overflow-y: auto;
  }
  .peg-find-hit { padding: 9px 12px; border-left: var(--peg-rail) solid transparent; }
  .peg-find-hit:hover, .peg-find-hit.peg-on { border-left-color: var(--peg-violet); }
  .peg-find-none { padding: 12px; }
}

@media (max-width: 999px) {
  .peg-burger { display: block; }
  .peg-nav {
    position: fixed; inset: 68px 0 auto 0; margin: 0; flex: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--peg-deck); border-bottom: 1px solid var(--peg-line);
    max-height: 0; overflow: hidden; transition: max-height .35s var(--peg-ease);
  }
  .peg-nav.peg-open { max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; }
  .peg-nav-cell { display: block; }
  .peg-nav-top {
    width: 100%; justify-content: space-between; text-align: left;
    font-size: 1rem; padding: 15px var(--peg-gut);
    border-bottom: 1px solid var(--peg-line);
  }
  .peg-nav-top::after { display: none; }
  .peg-nav-top img { width: 14px; height: 14px; }
  /* on a phone every panel is an accordion drawer, so the description lines go:
     they double the drawer height and the row label already carries the page */
  .peg-drop { max-height: 0; overflow: hidden; transition: max-height .35s var(--peg-ease); }
  .peg-nav-cell.peg-open .peg-drop { max-height: 640px; }
  .peg-drop-card { background-image: none; background-color: var(--peg-void); padding: 4px 0 8px; }
  .peg-drop-rows a { padding: 12px var(--peg-gut) 12px calc(var(--peg-gut) + 10px); }
  .peg-drop-rows span { display: none; }
  .peg-drop-rows span.peg-drop-score { display: block; }
  .peg-drop-more { padding: 10px var(--peg-gut) 4px calc(var(--peg-gut) + 10px); }

  /* the search becomes the first row of the sheet, which is where a thumb
     lands first anyway */
  /* block, not flex: down here the result list is in normal flow, and as a
     flex sibling it would sit beside the field instead of under it */
  .peg-find { display: block; flex: none; padding: 12px var(--peg-gut); border-bottom: 1px solid var(--peg-line); }
  .peg-find-box { height: 44px; }
  .peg-find-card { background-image: none; background-color: var(--peg-void); padding: 4px 0; }
  .peg-find-out { margin-top: 10px; }
  .peg-find-hit { padding: 11px 12px; border-left: var(--peg-rail) solid transparent; }
  .peg-find-hit.peg-on { border-left-color: var(--peg-violet); }
  .peg-find-none { padding: 10px 12px; }
}

/* ====================== hero ============================================== */
/* no top padding: the breadcrumb sits straight under the sticky mast */
.peg-hero { position: relative; overflow: hidden; padding: 0 0 58px; }
.peg-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(58% 70% at 14% 6%, rgba(124, 92, 255, .20), transparent 62%),
    radial-gradient(52% 64% at 88% 22%, rgba(245, 88, 0, .18), transparent 60%),
    var(--peg-void);
}
/* faint ledger grid: reads as an instrument panel, not wallpaper */
.peg-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}
.peg-hero > * { position: relative; z-index: 1; }

.peg-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: 46px; align-items: start; padding-top: 40px; }
@media (max-width: 940px) { .peg-hero-grid { grid-template-columns: 1fr; gap: 34px; padding-top: 30px; } }

/* Natural flow, not space-between: the intro column is shorter than the verdict
   panel, and spreading three blocks to match it left them floating with equal
   air above and below. The leftover height under the CTAs is hero background,
   which reads as breathing room instead of a gap. */
.peg-hero-lead { display: flex; flex-direction: column; gap: 30px; }
.peg-hero-lead > div:first-child > *:last-child { margin-bottom: 0; }
.peg-hero-acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* what the casino actually gives you, stated in the hero */
.peg-offer {
  display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; max-width: 60ch;
  border: 1px solid var(--peg-line); border-left: 3px solid var(--peg-violet);
  background: linear-gradient(100deg, rgba(124, 92, 255, .15), transparent 52%), var(--peg-glass), rgba(26, 11, 74, .72);
  box-shadow: var(--peg-inset), var(--peg-lift);
}
.peg-offer-coin {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--peg-mono); font-size: 1.1rem; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, var(--peg-violet-deep), var(--peg-violet));
  box-shadow: 0 0 22px -6px var(--peg-violet);
}
.peg-offer strong { display: block; font-size: .98rem; margin-bottom: 6px; }
.peg-offer p { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--peg-ink-soft); }

/* breadcrumb strip: docked to the underside of the header, its own hairline */
.peg-crumbs {
  font-size: .8rem; color: var(--peg-ink-mute); padding: 10px 0 11px;
  border-bottom: 1px solid rgba(56, 32, 127, .8);
}
.peg-crumbs a { color: var(--peg-ink-mute); }
.peg-crumbs a:hover { color: var(--peg-violet-lite); }
.peg-crumbs span { opacity: .5; padding: 0 2px; }

/* the brand mark sits straight on the hero, no frame around it */
.peg-idcard { margin-bottom: 26px; }
/* one box for every brand lockup: a wide wordmark is capped by width, a chunky
   one by height, so logos of very different aspect ratios read the same weight */
.peg-mark { display: block; width: auto; height: auto; max-width: 264px; max-height: 56px; }
@media (max-width: 470px) { .peg-mark { max-width: 208px; max-height: 46px; } }
.peg-idcard-meta { display: block; font-size: .8rem; color: var(--peg-ink-mute); font-family: var(--peg-mono); letter-spacing: .02em; margin-top: 12px; }

.peg-lede { font-size: 1.16rem; color: var(--peg-ink-soft); max-width: 60ch; }

/* ---- headline spec strip -------------------------------------------------
   Not a grid of boxes. One lit surface whose edges fade out, with the cells
   separated by hairlines that fade at both ends, and each figure carrying the
   colour of the thing it measures.                                          */
.peg-vitals {
  display: grid; grid-template-columns: repeat(6, 1fr);
  margin: 46px 0 0; position: relative; isolation: isolate;
  background:
    radial-gradient(60% 190% at 2% 0%, rgba(124, 92, 255, .14), transparent 58%),
    radial-gradient(60% 190% at 98% 100%, rgba(245, 88, 0, .13), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .008)),
    linear-gradient(0deg, rgba(8, 2, 31, .74), rgba(8, 2, 31, .74));
}
.peg-vitals::before, .peg-vitals::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--peg-line) 8%, var(--peg-line) 92%, transparent);
}
.peg-vitals::before { top: 0; }
.peg-vitals::after { bottom: 0; }
.peg-vital { --peg-c: var(--peg-ink); padding: 20px 18px 19px; position: relative; }
.peg-vital--usdt { --peg-c: var(--peg-violet-lite); }
.peg-vital--usdc { --peg-c: var(--peg-ember); }
.peg-vital--dear { --peg-c: var(--peg-warn); }

/* Cells are divided by hairlines that fade out at both ends, never by a full
   grid of borders. Every breakpoint redraws which edges carry a line. */
.peg-vital::before {
  content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--peg-line) 26%, var(--peg-line) 74%, transparent);
}
.peg-vital::after {
  content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--peg-line) 18%, var(--peg-line) 82%, transparent);
}
.peg-vital:nth-child(6n+1)::before, .peg-vital:nth-child(-n+6)::after { content: none; }

@media (max-width: 1040px) {
  .peg-vitals { grid-template-columns: repeat(3, 1fr); }
  .peg-vital:nth-child(6n+1)::before { content: ''; }
  .peg-vital:nth-child(-n+6)::after { content: ''; }
  .peg-vital:nth-child(3n+1)::before, .peg-vital:nth-child(-n+3)::after { content: none; }
}
@media (max-width: 640px) {
  .peg-vitals { grid-template-columns: repeat(2, 1fr); }
  .peg-vital:nth-child(3n+1)::before { content: ''; }
  .peg-vital:nth-child(-n+3)::after { content: ''; }
  .peg-vital:nth-child(odd)::before, .peg-vital:nth-child(-n+2)::after { content: none; }
}
/* Six stats in one column ran ~700px tall on a phone, so two columns hold to
   the narrowest common handset and only a 320px screen falls back to one. */
@media (max-width: 359px) {
  .peg-vitals { grid-template-columns: 1fr; }
  .peg-vital::before { content: none; }
  .peg-vital:nth-child(-n+3)::after { content: ''; }
  .peg-vital:first-child::after { content: none; }
}

.peg-vital dt {
  display: flex; align-items: center; gap: 8px;
  font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--peg-ink-mute); margin-bottom: 11px; line-height: 1.4;
}
.peg-vital dt::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--peg-c); box-shadow: 0 0 12px -1px var(--peg-c);
}
.peg-vital dd { margin: 0; line-height: 1.05; }
.peg-vital dd b {
  font-family: var(--peg-mono); font-size: 1.58rem; font-weight: 800;
  color: var(--peg-c); text-shadow: 0 0 26px rgba(255, 255, 255, .12);
  letter-spacing: -.03em;
}
/* the unit is a sibling of the figure, never a child: the count-up writes
   textContent and would wipe out any element nested inside it */
.peg-vital dd em { font-style: normal; font-family: var(--peg-mono); font-size: .84rem; font-weight: 700; color: var(--peg-c); opacity: .7; margin-left: 5px; }
.peg-vital dd span {
  display: block; font-family: var(--peg-sans); font-size: .77rem;
  color: var(--peg-ink-mute); font-weight: 400; margin-top: 8px; line-height: 1.45;
}

/* score block */
.peg-score {
  border: 1px solid var(--peg-line); padding: 24px 22px; position: sticky; top: 96px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(124, 92, 255, .13), transparent 62%),
    var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-lift);
}
@media (max-width: 940px) { .peg-score { position: static; } }

/* circular rating dial */
.peg-dial { position: relative; width: 140px; margin: 2px auto 0; filter: drop-shadow(0 0 22px rgba(124, 92, 255, .3)); }
.peg-dial svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.peg-ring-bg { fill: none; stroke: var(--peg-ridge); stroke-width: 9; }
.peg-ring-fg {
  fill: none; stroke: url(#pegRingGrad); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 326.73; stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1.3s var(--peg-ease);
}
.peg-dial-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
.peg-dial-num {
  font-family: var(--peg-mono); font-size: 2.45rem; font-weight: 800; line-height: 1;
  background: linear-gradient(118deg, var(--peg-violet-lite), var(--peg-ember-lite));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.peg-dial-of { font-family: var(--peg-mono); font-size: .72rem; color: var(--peg-ink-mute); margin-top: 3px; }
.peg-score-label { font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--peg-ink-mute); text-align: center; margin: 11px 0 0; }

/* plus / minus verdict list inside the score panel */
.peg-pc { margin: 18px 0 0; padding: 18px 0 0; list-style: none; position: relative; }
.peg-pc::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--peg-line) 10%, var(--peg-line) 90%, transparent);
}
/* the minus list follows the plus list with no second rule between them */
.peg-pc + .peg-pc { margin-top: 11px; padding-top: 0; }
.peg-pc + .peg-pc::before { content: none; }
.peg-pc li { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; line-height: 1.45; color: var(--peg-ink-soft); margin-bottom: 9px; }
.peg-pc li:last-child { margin-bottom: 0; }
.peg-pc .peg-sign {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  display: grid; place-items: center;
  font-family: var(--peg-mono); font-size: 1rem; font-weight: 800; line-height: 1;
}
.peg-pc .peg-plus { color: var(--peg-good); border: 1px solid rgba(61, 220, 151, .42); background: rgba(61, 220, 151, .1); }
.peg-pc .peg-minus { color: var(--peg-alarm); border: 1px solid rgba(255, 95, 102, .42); background: rgba(255, 95, 102, .1); }

/* ====================== buttons =========================================== */
.peg-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: .96rem; letter-spacing: .01em;
  padding: 15px 26px; border: 0; cursor: pointer; border-radius: 6px;
  color: #fff; background: linear-gradient(100deg, #b03700, #cf4200);
  position: relative; overflow: hidden;
  box-shadow: 0 10px 26px -14px rgba(124, 92, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .18s var(--peg-ease), box-shadow .25s var(--peg-ease);
}
.peg-cta:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(124, 92, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .4); }
.peg-cta::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transition: left .65s var(--peg-ease);
}
.peg-cta:hover::after { left: 130%; }
.peg-cta--wide { width: 100%; margin-top: 17px; }
/* the CTA is an ember fill with white text, so its arrow is punched to white too */
.peg-cta img { filter: brightness(0) invert(1); }

.peg-cta-ghost {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 6px;
  border: 1px solid var(--peg-line); color: var(--peg-ink-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  padding: 13px 22px; font-size: .9rem; font-weight: 600;
  transition: border-color .2s var(--peg-ease), color .2s var(--peg-ease), box-shadow .25s var(--peg-ease);
}
.peg-cta-ghost:hover { border-color: rgba(124, 92, 255, .55); color: var(--peg-ink); text-decoration: none; box-shadow: 0 0 24px -10px var(--peg-violet); }

.peg-fineprint { font-size: .72rem; color: var(--peg-ink-mute); text-align: center; margin: 12px 0 0; line-height: 1.55; }

/* ====================== disclosure bar ==================================== */
.peg-disclose {
  background: var(--peg-deck); border-block: 1px solid var(--peg-line);
  font-size: .8rem; color: var(--peg-ink-mute); padding: 11px 0;
}
.peg-disclose .peg-shell { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.peg-disclose img { width: 16px; height: 16px; flex: none; opacity: .6; }

/* ====================== sections ========================================== */
/* the site's only spacing helpers: a block that has to clear the intro above it */
.peg-mt-s { margin-top: 20px; }
.peg-mt { margin-top: 26px; }
.peg-mt-l { margin-top: 34px; }
.peg-fine { font-size: .9rem; color: var(--peg-ink-mute); }

.peg-band { padding: 66px 0; position: relative; }
/* a sunk band is lit from one corner rather than filled with flat grey */
.peg-band--sunk {
  background:
    radial-gradient(58% 90% at 88% 0%, rgba(245, 88, 0, .07), transparent 60%),
    radial-gradient(52% 80% at 4% 100%, rgba(124, 92, 255, .06), transparent 62%),
    var(--peg-deck);
  border-block: 1px solid var(--peg-line);
}
.peg-band h2 { max-width: 24ch; }
/* the accent under a section heading, in place of a boxed eyebrow */
.peg-band h2::after {
  content: ''; display: block; width: 62px; height: 3px; margin-top: 18px; border-radius: 999px;
  background: linear-gradient(90deg, var(--peg-violet), var(--peg-ember));
  box-shadow: 0 0 18px -4px var(--peg-violet);
}
.peg-band-intro { color: var(--peg-ink-soft); max-width: 68ch; margin-top: 20px; }

/* ---- centred section leads -----------------------------------------------
   A heading that introduces a full-width module is centred; body copy never
   is. The split falls out of the markup on its own: a section lead is a direct
   child of .peg-shell, while article copy lives inside .peg-prose. */
.peg-band > .peg-shell > h2,
.peg-band > .peg-shell > .peg-band-intro,
.peg-band > .peg-shell > .peg-fine,
.peg-verdict h2 { text-align: center; margin-inline: auto; }
.peg-band > .peg-shell > h2::after,
.peg-verdict h2::after { margin-inline: auto; }
.peg-band > .peg-shell > .peg-fine { max-width: 72ch; }
.peg-verdict h2 { max-width: 22ch; }

.peg-prose { max-width: 72ch; }
.peg-prose h3 { margin-top: 1.9em; }

/* prose plus a data panel, so no section is a column of text with a dead half */
.peg-duo { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 48px; align-items: start; }
@media (max-width: 980px) { .peg-duo { grid-template-columns: 1fr; gap: 36px; } }

/* ---- published payout gauge ---- */
.peg-gauge {
  border: 1px solid var(--peg-line); padding: 26px 24px; position: sticky; top: 96px;
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(245, 88, 0, .14), transparent 62%),
    var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-lift);
}
@media (max-width: 980px) { .peg-gauge { position: static; } }
.peg-dial--sm { width: 130px; }
.peg-dial--sm .peg-dial-num { font-size: 2.15rem; }

.peg-gauge-lede { margin: 0 0 20px; font-size: .87rem; line-height: 1.55; color: var(--peg-ink-soft); }

/* published speed per rail: widths are fixed because the figures are fixed,
   scaled against the slowest chain the operator quotes */
.peg-speed { list-style: none; margin: 0; padding: 0; }
.peg-speed li { --peg-c: var(--peg-violet); margin-bottom: 16px; }
.peg-speed li:last-child { margin-bottom: 0; }
.peg-speed b { display: block; font-size: .84rem; font-weight: 600; color: var(--peg-ink); margin-bottom: 7px; }
.peg-speed-bar {
  display: block; height: 8px; border-radius: 999px; position: relative; overflow: hidden;
  background: rgba(0, 0, 0, .42); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
}
.peg-speed-bar i {
  position: absolute; inset: 0 auto 0 0; display: block; border-radius: 999px;
  background: linear-gradient(90deg, var(--peg-violet-deep), var(--peg-c));
  box-shadow: 0 0 14px -3px var(--peg-c);
}
.peg-speed em {
  display: block; font-style: normal; font-family: var(--peg-mono);
  font-size: .74rem; font-weight: 700; color: var(--peg-c); margin-top: 7px;
}
/* the li selector above sets --peg-c, so the modifiers have to out-specify it */
.peg-speed li.peg-speed--a i { width: 12%; }
.peg-speed li.peg-speed--b { --peg-c: var(--peg-ember); }
.peg-speed li.peg-speed--b i { width: 26%; background: linear-gradient(90deg, var(--peg-ember-deep), var(--peg-c)); }
.peg-speed li.peg-speed--c { --peg-c: var(--peg-warn); }
.peg-speed li.peg-speed--c i { width: 100%; background: linear-gradient(90deg, #8a6a00, var(--peg-c)); }

.peg-facts { list-style: none; margin: 22px 0 0; padding: 20px 0 0; position: relative; }
.peg-facts::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--peg-line) 10%, var(--peg-line) 90%, transparent);
}
.peg-facts li { margin-bottom: 16px; }
.peg-facts li:last-child { margin-bottom: 0; }
.peg-facts b {
  display: block; font-family: var(--peg-mono); font-size: 1.15rem; font-weight: 800;
  color: var(--peg-ember-lite); letter-spacing: -.02em;
}
.peg-facts li:nth-child(2) b { color: var(--peg-violet-lite); }
.peg-facts li:nth-child(3) b { color: var(--peg-ink); }
.peg-facts span { display: block; font-size: .82rem; line-height: 1.5; color: var(--peg-ink-mute); margin-top: 4px; }
.peg-gauge .peg-fineprint { text-align: left; margin-top: 20px; }

/* ---- what the lobby carries ---- */
.peg-lobby {
  border: 1px solid var(--peg-line); padding: 26px 24px;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(124, 92, 255, .13), transparent 62%),
    var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-lift);
}
.peg-lobby-top { margin: 0 0 20px; }
.peg-lobby-top b {
  display: block; font-family: var(--peg-mono); font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(118deg, var(--peg-violet-lite), var(--peg-ember-lite));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.peg-lobby-top span { display: block; font-size: .84rem; line-height: 1.5; color: var(--peg-ink-mute); margin-top: 6px; }
/* Category tiles. The glyph is painted with mask-image rather than an <img>, so
   the icon takes the tile's own accent colour exactly and the label carries the
   meaning for screen readers. Phosphor only, per the house icon rule. */
.peg-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.peg-cat {
  --peg-c: var(--peg-violet);
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  padding: 15px 6px 13px; border-radius: 8px; border: 1px solid var(--peg-line);
  background: linear-gradient(170deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
  transition: border-color .25s var(--peg-ease), box-shadow .25s var(--peg-ease), transform .25s var(--peg-ease);
}
.peg-cat:hover { border-color: var(--peg-c); box-shadow: 0 0 26px -10px var(--peg-c); transform: translateY(-2px); }
.peg-cat i {
  width: 25px; height: 25px; display: block; background: var(--peg-c);
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
  filter: drop-shadow(0 0 9px var(--peg-c));
}
.peg-cat b { font-size: .73rem; font-weight: 600; color: var(--peg-ink-soft); line-height: 1.25; }
.peg-cat:hover b { color: var(--peg-ink); }
/* every second column takes the Circle blue so the grid reads as the two dollars */
.peg-cat:nth-child(3n+2) { --peg-c: var(--peg-ember); }
.peg-cats .peg-cat--originals { --peg-c: var(--peg-warn); }

.peg-cat--slots i { -webkit-mask-image: url(/icons/cherries-regular.svg); mask-image: url(/icons/cherries-regular.svg); }
.peg-cat--live i { -webkit-mask-image: url(/icons/video-camera-regular.svg); mask-image: url(/icons/video-camera-regular.svg); }
.peg-cat--blackjack i { -webkit-mask-image: url(/icons/cards-three-regular.svg); mask-image: url(/icons/cards-three-regular.svg); }
.peg-cat--roulette i { -webkit-mask-image: url(/icons/chart-pie-regular.svg); mask-image: url(/icons/chart-pie-regular.svg); }
.peg-cat--baccarat i { -webkit-mask-image: url(/icons/spade-regular.svg); mask-image: url(/icons/spade-regular.svg); }
.peg-cat--crash i { -webkit-mask-image: url(/icons/chart-line-up-regular.svg); mask-image: url(/icons/chart-line-up-regular.svg); }
.peg-cat--arcade i { -webkit-mask-image: url(/icons/joystick-regular.svg); mask-image: url(/icons/joystick-regular.svg); }
.peg-cat--shows i { -webkit-mask-image: url(/icons/television-simple-regular.svg); mask-image: url(/icons/television-simple-regular.svg); }
.peg-cat--bingo i { -webkit-mask-image: url(/icons/grid-nine-regular.svg); mask-image: url(/icons/grid-nine-regular.svg); }
.peg-cat--keno i { -webkit-mask-image: url(/icons/number-circle-nine-regular.svg); mask-image: url(/icons/number-circle-nine-regular.svg); }
.peg-cat--poker i { -webkit-mask-image: url(/icons/poker-chip-regular.svg); mask-image: url(/icons/poker-chip-regular.svg); }
.peg-cat--originals i { -webkit-mask-image: url(/icons/sparkle-regular.svg); mask-image: url(/icons/sparkle-regular.svg); }
.peg-cat--buys i { -webkit-mask-image: url(/icons/shopping-cart-simple-regular.svg); mask-image: url(/icons/shopping-cart-simple-regular.svg); }
.peg-cat--sports i { -webkit-mask-image: url(/icons/soccer-ball-regular.svg); mask-image: url(/icons/soccer-ball-regular.svg); }
.peg-cat--esports i { -webkit-mask-image: url(/icons/game-controller-regular.svg); mask-image: url(/icons/game-controller-regular.svg); }

@media (max-width: 980px) { .peg-cats { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 720px) { .peg-cats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 440px) { .peg-cats { grid-template-columns: repeat(3, 1fr); } }

.peg-lobby-note { margin: 20px 0 0; font-size: .84rem; line-height: 1.55; color: var(--peg-ink-soft); }

/* ====================== the network shelf =================================
   One chip per rail a coin can arrive on, each lit in that chain's own colour
   from the shared [data-peg-chain] table. Used where a casino carries more
   networks than the chain desk can sensibly list as rows. */
.peg-net {
  border: 1px solid var(--peg-line); padding: 26px 24px;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(245, 88, 0, .12), transparent 62%),
    var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-lift);
}
.peg-net-top { margin: 0 0 20px; }
.peg-net-top b {
  display: block; font-family: var(--peg-mono); font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(118deg, var(--peg-ember-lite), var(--peg-violet-lite));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.peg-net-top span { display: block; font-size: .84rem; line-height: 1.5; color: var(--peg-ink-mute); margin-top: 6px; }
/* the fallback colour lives on the list, not the item: a `.peg-net li` rule
   would out-specify the single-class [data-peg-chain] table and grey them all */
.peg-net ul {
  --peg-c: var(--peg-ink-mute);
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.peg-net li {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 9px 11px; border-radius: 8px; border: 1px solid var(--peg-line);
  background: linear-gradient(170deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
  font-size: .76rem; font-weight: 600; line-height: 1.3; color: var(--peg-ink-soft);
  transition: border-color .25s var(--peg-ease), box-shadow .25s var(--peg-ease), color .25s var(--peg-ease);
}
.peg-net li:hover { border-color: var(--peg-c); box-shadow: 0 0 22px -10px var(--peg-c); color: var(--peg-ink); }
.peg-net li i {
  width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--peg-c);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .04), 0 0 12px -2px var(--peg-c);
}
.peg-net li em {
  font-style: normal; margin-left: auto; padding-left: 6px;
  font-family: var(--peg-mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--peg-ember-lite);
}
.peg-net-note { margin: 20px 0 0; font-size: .84rem; line-height: 1.55; color: var(--peg-ink-soft); }
@media (max-width: 980px) {
  .peg-net { text-align: center; }
  .peg-net-top span, .peg-net-note { margin-inline: auto; max-width: 46ch; }
  .peg-net ul { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) { .peg-net ul { grid-template-columns: 1fr 1fr; } }

/* ====================== the chain desk (signature module) =================
   A lit instrument, not a table. Each network carries its own brand colour as
   a coin token, the meters glow in the colour of the stablecoin on screen, and
   the whole panel re-tints when the toggle flips.                            */
.peg-desk {
  position: relative; overflow: hidden;
  border: 1px solid var(--peg-line);
  background:
    radial-gradient(80% 130% at 0% 0%, rgba(124, 92, 255, .14), transparent 55%),
    radial-gradient(70% 120% at 100% 108%, rgba(71, 18, 189, .14), transparent 58%),
    var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-lift);
  transition: background .5s var(--peg-ease);
}
.peg-desk[data-peg-active="usdc"] {
  background:
    radial-gradient(80% 130% at 0% 0%, rgba(245, 88, 0, .15), transparent 55%),
    radial-gradient(70% 120% at 100% 108%, rgba(168, 58, 0, .15), transparent 58%),
    var(--peg-glass), var(--peg-panel);
}

/* title over a centred toggle: the module reads as its own little instrument */
.peg-desk-head {
  display: flex; flex-direction: column; align-items: center; gap: 15px;
  padding: 22px 26px 20px; position: relative; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), transparent);
}
.peg-desk-head::after {
  content: ''; position: absolute; left: 26px; right: 26px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--peg-line) 10%, var(--peg-line) 90%, transparent);
}
.peg-desk-head h2, .peg-desk-head h3 { margin: 0; font-size: 1.08rem; max-width: none; }
.peg-desk-head h2::after { content: none; }

/* The desk closes the hero at full shell width. It used to sit inside the hero's
   left column, which forced the score panel to stretch to the desk's height and
   left ~680px of empty panel beside it. Full width also gives the meters room. */
.peg-desk--hero { margin: 40px 0 0; }

/* segmented pill with a thumb that slides between the two stablecoins */
.peg-toggle {
  position: relative; display: inline-flex; padding: 4px; border-radius: 999px;
  background: rgba(0, 0, 0, .38); border: 1px solid var(--peg-line);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
}
.peg-toggle::before {
  content: ''; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px); border-radius: 999px;
  background: linear-gradient(100deg, #4f18d6, #6a3df0);
  box-shadow: 0 4px 16px -6px var(--peg-violet);
  transition: transform .38s var(--peg-ease), background .38s var(--peg-ease), box-shadow .38s var(--peg-ease);
}
.peg-desk[data-peg-active="usdc"] .peg-toggle::before {
  transform: translateX(100%);
  background: linear-gradient(100deg, #a83a00, #cf4200);
  box-shadow: 0 4px 16px -6px var(--peg-ember);
}
.peg-toggle button {
  position: relative; z-index: 1; font: inherit; font-family: var(--peg-mono);
  font-size: .8rem; font-weight: 800; letter-spacing: .06em;
  padding: 9px 22px; background: none; border: 0; cursor: pointer; border-radius: 999px;
  color: var(--peg-ink-mute); transition: color .28s var(--peg-ease);
}
.peg-toggle button[aria-pressed="true"] { color: #fff; }

/* ---- rows ---- */
.peg-chain {
  --peg-c: var(--peg-ink-mute);
  display: grid; grid-template-columns: 26px 178px 1fr 152px; gap: 16px;
  align-items: center; padding: 15px 26px; position: relative;
  transition: background .28s var(--peg-ease);
}
.peg-chain + .peg-chain::before {
  content: ''; position: absolute; left: 26px; right: 26px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--peg-line) 8%, var(--peg-line) 92%, transparent);
}
.peg-chain:hover { background: rgba(255, 255, 255, .026); }

/* the coin token: each network in its own brand colour */
.peg-token {
  width: 26px; height: 26px; border-radius: 50%; position: relative; flex: none;
  background: var(--peg-c);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .035), 0 0 18px -5px var(--peg-c);
  transition: box-shadow .28s var(--peg-ease);
}
.peg-token::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: rgba(10, 3, 30, .55); }
.peg-chain:hover .peg-token { box-shadow: 0 0 0 3px rgba(255, 255, 255, .06), 0 0 24px -3px var(--peg-c); }

/* Chain colours are keyed off the attribute alone, not off .peg-chain, so the
   network shelf further down the page lights its dots from the same table. */
[data-peg-chain="eth"] { --peg-c: #627eea; }
[data-peg-chain="bnb"] { --peg-c: #f0b90b; }
[data-peg-chain="avax"] { --peg-c: #e84142; }
[data-peg-chain="sol"] { --peg-c: #14f195; }
[data-peg-chain="matic"] { --peg-c: #8247e5; }
[data-peg-chain="tron"] { --peg-c: #ff2d32; }
[data-peg-chain="ton"] { --peg-c: #0098ea; }
[data-peg-chain="base"] { --peg-c: #2f6bff; }
[data-peg-chain="op"] { --peg-c: #ff4d5a; }
[data-peg-chain="arb"] { --peg-c: #2ea8f0; }
[data-peg-chain="ronin"] { --peg-c: #1f8ef1; }
[data-peg-chain="celo"] { --peg-c: #fcff52; }
[data-peg-chain="sonic"] { --peg-c: #fe9a4d; }
[data-peg-chain="world"] { --peg-c: #9aa4ff; }
[data-peg-chain="dot"] { --peg-c: #e6007a; }
[data-peg-chain="zksync"] { --peg-c: #6d7bff; }
[data-peg-chain="sui"] { --peg-c: #4da2ff; }

.peg-chain-name { font-size: .94rem; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.peg-chain-tag {
  font-family: var(--peg-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--peg-warn); border: 1px solid rgba(255, 199, 0, .45); background: rgba(255, 199, 0, .12);
  padding: 2px 7px; border-radius: 999px; line-height: 1.5;
}

/* A static row flag. .peg-chain-tag is owned by wireDesk (it shows/hides it per
   coin for memo chains), so anything meant to stay visible needs its own class. */
.peg-chain-flag {
  font-family: var(--peg-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--peg-ink-mute); border: 1px solid var(--peg-line); background: rgba(255, 255, 255, .05);
  padding: 2px 7px; border-radius: 999px; line-height: 1.5;
}
.peg-chain-meter {
  height: 10px; border-radius: 999px; position: relative; overflow: hidden;
  background: rgba(0, 0, 0, .42); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
}
.peg-chain-meter i {
  position: absolute; inset: 0 auto 0 0; width: 0; display: block; border-radius: 999px;
  background: linear-gradient(90deg, var(--peg-violet-deep), var(--peg-violet) 72%, #b9a6ff);
  box-shadow: 0 0 16px -3px var(--peg-violet);
  transition: width 1s var(--peg-ease), background .4s var(--peg-ease), box-shadow .4s var(--peg-ease);
}
/* a slow sheen so the meters read as live instrumentation */
.peg-chain-meter i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .22), transparent 58%);
  transform: translateX(-110%); animation: peg-sheen 4.2s var(--peg-ease) infinite;
}
@keyframes peg-sheen { 0%, 62% { transform: translateX(-110%); } 100% { transform: translateX(240%); } }

.peg-desk[data-peg-active="usdc"] .peg-chain-meter i {
  background: linear-gradient(90deg, var(--peg-ember-deep), var(--peg-ember) 72%, #ff9a5e);
  box-shadow: 0 0 16px -3px var(--peg-ember);
}

.peg-chain-val {
  font-family: var(--peg-mono); font-size: 1rem; font-weight: 800; text-align: right;
  white-space: nowrap; display: block;
}
.peg-chain-mult {
  display: block; font-family: var(--peg-mono); font-size: .62rem; letter-spacing: .1em;
  color: var(--peg-ink-mute); text-align: right; margin-top: 4px;
}
/* A second, STATIC figure per row, for casinos whose story is the gap between
   two numbers rather than the gap between chains. It deliberately replaces
   .peg-chain-mult in the markup: wireDesk guards on that class being present,
   so a row carrying this one is left alone. */
.peg-chain-out {
  display: block; font-family: var(--peg-mono); font-size: .62rem; letter-spacing: .08em;
  color: var(--peg-warn); text-align: right; margin-top: 4px; white-space: nowrap;
}
.peg-chain--dear .peg-chain-val { color: var(--peg-warn); text-shadow: 0 0 20px rgba(255, 199, 0, .45); }
.peg-chain--dear .peg-chain-mult { color: var(--peg-warn); }
.peg-chain--dear .peg-chain-meter i { background: linear-gradient(90deg, #8a6a00, var(--peg-warn) 72%, #ffe38a); box-shadow: 0 0 18px -3px var(--peg-warn); }
.peg-chain--none { opacity: .38; }
.peg-chain--none .peg-chain-val { color: var(--peg-ink-mute); font-weight: 500; font-size: .84rem; }
.peg-chain--none .peg-chain-meter i::after { animation: none; }

@media (max-width: 660px) {
  .peg-chain {
    grid-template-columns: 26px 1fr 96px; gap: 10px 12px;
    grid-template-areas: 'token name val' '. meter meter'; padding: 15px 20px;
  }
  .peg-token { grid-area: token; }
  .peg-chain-name { grid-area: name; }
  .peg-chain-val, .peg-chain-mult, .peg-chain-out { grid-area: val; }
  .peg-chain-mult { display: none; }
  .peg-chain-meter { grid-area: meter; }
  .peg-chain + .peg-chain::before, .peg-desk-head::after { left: 20px; right: 20px; }
  .peg-desk-head { padding: 20px; }
}

.peg-desk-foot {
  /* padding, never max-width: the tinted bar has to span the whole panel while
     the sentence inside it stays a readable centred measure */
  padding: 17px clamp(26px, 12%, 150px); font-size: .82rem; color: var(--peg-ink-mute);
  position: relative; text-align: center;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .32));
}
.peg-desk-foot::before {
  content: ''; position: absolute; left: 26px; right: 26px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--peg-line) 10%, var(--peg-line) 90%, transparent);
}

/* ====================== pros / cons ======================================= */
.peg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 780px) { .peg-split { grid-template-columns: 1fr; } }
.peg-col {
  border: 1px solid var(--peg-line); padding: 26px;
  background: var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-lift);
}
.peg-col h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; color: var(--peg-ink-mute); margin-bottom: 16px;
}
.peg-col h3::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--peg-violet); box-shadow: 0 0 12px -1px var(--peg-violet);
}
.peg-col + .peg-col h3::before { background: var(--peg-ember); box-shadow: 0 0 12px -1px var(--peg-ember); }
.peg-col ul { list-style: none; margin: 0; padding: 0; }
.peg-col li { display: flex; gap: 11px; margin-bottom: 13px; font-size: .95rem; color: var(--peg-ink-soft); line-height: 1.55; }
.peg-col li:last-child { margin-bottom: 0; }
.peg-col img { width: 17px; height: 17px; flex: none; margin-top: 4px; }
.peg-col p { font-size: .95rem; color: var(--peg-ink-soft); margin: 0; }

/* ====================== screenshot rail =================================== */
/* Device-matched captures: desktop visitors get the desktop UI, phone visitors get
   the phone UI, and the image is NEVER cropped. A screenshot exists to show the whole
   screen, so height is always left to the file's own aspect ratio. */
.peg-rail-scroll {
  /* two full captures on screen with the third peeking, so the row reads as scrollable
     and a 1440-wide capture is still large enough to read. A single value, not minmax:
     minmax() only grows a track into free space, so it can never overflow and scroll. */
  display: grid; grid-auto-flow: column; grid-auto-columns: max(300px, 45%);
  gap: 18px; overflow-x: auto; padding-bottom: 16px;
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--peg-ridge) transparent;
  align-items: start;
}
.peg-rail-scroll > figure { scroll-snap-align: start; margin: 0; }
.peg-shot {
  border: 1px solid var(--peg-line); background: var(--peg-panel); overflow: hidden; position: relative;
  box-shadow: var(--peg-lift);
  transition: border-color .3s var(--peg-ease), box-shadow .3s var(--peg-ease);
}
.peg-shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(160deg, rgba(124, 92, 255, .18), transparent 45%, rgba(245, 88, 0, .16));
  transition: opacity .4s var(--peg-ease);
}
.peg-shot:hover { border-color: rgba(124, 92, 255, .45); box-shadow: 0 26px 64px -34px rgba(124, 92, 255, .55); }
.peg-shot:hover::after { opacity: 1; }
.peg-shot img { width: 100%; height: auto; transition: transform .5s var(--peg-ease); }
.peg-shot:hover img { transform: scale(1.035); }
.peg-rail-scroll figcaption { font-size: .82rem; color: var(--peg-ink-mute); padding-top: 12px; line-height: 1.5; text-align: center; }

@media (max-width: 700px) {
  /* one full-width phone screenshot at a time, complete and uncropped */
  .peg-rail-scroll { grid-auto-columns: 78%; }
  /* the img element carries the desktop file's 1440x900 attributes, so the phone
     ratio has to be declared here or the row jumps once the source swaps in */
  .peg-shot img { aspect-ratio: 390 / 844; }
}

/* ====================== callout =========================================== */
.peg-note {
  border: 1px solid var(--peg-line); border-left: 3px solid var(--peg-warn);
  background: linear-gradient(100deg, rgba(255, 199, 0, .13), transparent 46%), var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-lift);
  padding: 22px 24px; display: flex; gap: 14px;
}
.peg-note img { width: 21px; height: 21px; flex: none; margin-top: 3px; filter: invert(76%) sepia(50%) saturate(766%) hue-rotate(342deg) brightness(101%) contrast(91%); }
.peg-note p { margin: 0; font-size: .93rem; color: var(--peg-ink-soft); }
.peg-note strong { color: var(--peg-ink); }

/* ====================== data table ======================================== */
.peg-tablewrap {
  overflow-x: auto; border: 1px solid var(--peg-line);
  background: var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-lift);
}
.peg-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .9rem; }
.peg-table th, .peg-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--peg-line); }
.peg-table thead th {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent);
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--peg-ink-mute); font-weight: 700;
}
.peg-table tbody tr { transition: background .22s var(--peg-ease); }
.peg-table tbody tr:hover { background: rgba(124, 92, 255, .06); }
.peg-table td.peg-num { font-family: var(--peg-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--peg-ink); }
.peg-table tbody tr:last-child td { border-bottom: 0; }
/* the first cell carries the row's identity, so it gets the ink weight */
.peg-table tbody th, .peg-table tbody td:first-child { color: var(--peg-ink); font-weight: 600; }

/* ====================== faq =============================================== */
.peg-faq {
  border: 1px solid var(--peg-line);
  background: var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-lift);
}
.peg-faq details { position: relative; transition: background .25s var(--peg-ease); }
.peg-faq details + details::before {
  content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--peg-line) 8%, var(--peg-line) 92%, transparent);
}
.peg-faq details[open] { background: rgba(124, 92, 255, .045); }
.peg-faq summary {
  cursor: pointer; list-style: none; padding: 20px 24px;
  font-weight: 600; font-size: 1rem; display: flex; justify-content: space-between; gap: 16px; align-items: center;
  transition: color .2s var(--peg-ease);
}
.peg-faq summary:hover { color: var(--peg-violet-lite); }
.peg-faq summary::-webkit-details-marker { display: none; }
.peg-faq summary img {
  width: 18px; height: 18px; flex: none; opacity: .75;
  transition: transform .3s var(--peg-ease), opacity .2s var(--peg-ease);
}
.peg-faq summary:hover img, .peg-faq details[open] summary img { opacity: 1; }
.peg-faq details[open] summary img { transform: rotate(180deg); }
.peg-faq .peg-faq-body { padding: 0 24px 22px; color: var(--peg-ink-soft); font-size: .95rem; }
.peg-faq .peg-faq-body p:last-child { margin-bottom: 0; }

/* ====================== sticky action bar ================================= */
.peg-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(17, 6, 53, .95); backdrop-filter: blur(12px);
  border-top: 1px solid var(--peg-line);
  transform: translateY(110%); transition: transform .4s var(--peg-ease);
}
.peg-dock.peg-dock-up { transform: none; }
.peg-dock .peg-shell { display: flex; align-items: center; gap: 16px; padding-block: 12px; }
.peg-dock-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.peg-dock-id img { width: 74px; height: 28px; object-fit: contain; flex: none; }
.peg-dock-score {
  font-family: var(--peg-mono); font-weight: 800; color: var(--peg-violet-lite);
  text-shadow: 0 0 18px rgba(124, 92, 255, .5);
}
.peg-dock .peg-cta { margin-left: auto; padding: 12px 22px; }
@media (max-width: 560px) { .peg-dock-id span { display: none; } }

/* ====================== byline ============================================ */
.peg-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: .82rem; color: var(--peg-ink-mute); border-top: 1px solid var(--peg-line); border-bottom: 1px solid var(--peg-line); padding: 14px 0; margin-bottom: 34px; }
.peg-byline b { color: var(--peg-ink-soft); font-weight: 600; }

/* ====================== verdict =========================================== */
.peg-verdict {
  border: 1px solid var(--peg-line); padding: 38px; position: relative; overflow: hidden;
  background:
    radial-gradient(70% 110% at 0% 0%, rgba(124, 92, 255, .17), transparent 58%),
    radial-gradient(70% 110% at 100% 100%, rgba(245, 88, 0, .15), transparent 58%),
    var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-lift);
}
.peg-verdict h2 { margin-top: 0; }
.peg-verdict p { color: var(--peg-ink-soft); }
.peg-verdict p:last-of-type { margin-bottom: 0; }

/* ====================== footer ============================================ */
.peg-foot { background: var(--peg-deck); border-top: 1px solid var(--peg-line); padding: 52px 0 30px; font-size: .88rem; color: var(--peg-ink-mute); }
/* the reviews cell carries nine names, so it gets the extra width */
.peg-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.15fr 1.25fr 1fr; gap: 28px; }
@media (max-width: 1080px) { .peg-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .peg-foot-grid { grid-template-columns: 1fr; } }

/* nine short links read better balanced across two columns than as one long stack */
.peg-foot-two { columns: 2; column-gap: 20px; }
.peg-foot-two li { break-inside: avoid; }
.peg-foot-all { margin: 13px 0 0; padding-top: 11px; border-top: 1px solid var(--peg-line); }
.peg-foot-head { margin: 0 0 14px; font-weight: 700; font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--peg-ink-soft); margin-bottom: 14px; }
.peg-foot ul { list-style: none; margin: 0; padding: 0; }
.peg-foot li { margin-bottom: 9px; }
.peg-foot a { color: var(--peg-ink-mute); }
.peg-foot a:hover { color: var(--peg-violet-lite); }
.peg-foot-rg { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.peg-foot-18 { font-family: var(--peg-mono); font-weight: 700; border: 2px solid var(--peg-alarm); color: var(--peg-alarm); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; flex: none; font-size: .82rem; }
.peg-foot-base { border-top: 1px solid var(--peg-line); margin-top: 34px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .8rem; }

/* ====================== back to top ======================================= */
.back-to-top {
  position: fixed; right: 20px; bottom: 84px; z-index: 65;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--peg-glass), var(--peg-panel); border: 1px solid var(--peg-line); cursor: pointer;
  box-shadow: var(--peg-inset), var(--peg-lift);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--peg-ease), border-color .2s var(--peg-ease), box-shadow .25s var(--peg-ease);
}
.back-to-top.peg-seen { opacity: 1; pointer-events: auto; }
.back-to-top:hover { border-color: rgba(124, 92, 255, .6); box-shadow: 0 0 26px -8px var(--peg-violet); }
.back-to-top img { width: 20px; height: 20px; opacity: .85; transition: opacity .2s var(--peg-ease); }
.back-to-top:hover img { opacity: 1; }

/* ====================== stacked layouts ===================================
   Once the two-column layouts collapse there is no column edge left to align
   against, so the short blocks centre and only running copy stays flush left. */
@media (max-width: 940px) {
  .peg-hero-lead { text-align: center; align-items: center; }
  .peg-hero-lead > div:first-child { width: 100%; }
  .peg-mark { margin-inline: auto; }
  .peg-lede { margin-inline: auto; }
  .peg-hero-acts { justify-content: center; }
  /* the offer callout keeps its icon-then-text reading order */
  .peg-offer { text-align: left; }
  .peg-byline { justify-content: center; text-align: center; }
}

@media (max-width: 980px) {
  .peg-gauge, .peg-lobby { text-align: center; }
  .peg-gauge-lede, .peg-lobby-top span, .peg-lobby-note, .peg-gauge .peg-fineprint { margin-inline: auto; max-width: 46ch; }
  .peg-speed b, .peg-speed em, .peg-facts span, .peg-facts b { text-align: center; }
  .peg-col h3 { justify-content: center; }
  .peg-col { text-align: center; }
  .peg-col li { text-align: left; }
}

@media (max-width: 640px) {
  .peg-vital { text-align: center; }
  .peg-vital dt { justify-content: center; }
  .peg-vital dd span { margin-inline: auto; max-width: 30ch; }
  /* The offer sits inside the centred hero block, so it centres with it and
     drops its left stripe: an accent edge under centred content reads as a
     mistake. The warning callout stays flush left - it is the longest single
     paragraph on the page and centring it would cost more than it gains. */
  .peg-offer { flex-direction: column; align-items: center; text-align: center; gap: 14px; border-left: 1px solid var(--peg-line); }
  .peg-idcard-meta { text-align: center; }
  /* Two stacked buttons of different natural widths read as a mistake once they
     are centred, so on a phone they take the full column and line up. */
  .peg-hero-acts { flex-direction: column; align-items: stretch; }
  .peg-hero-acts .peg-cta-ghost { justify-content: center; }
}

/* ====================== a11y ============================================== */
.peg-skip { position: absolute; left: -9999px; }
.peg-skip:focus { left: var(--peg-gut); top: 10px; z-index: 100; background: var(--peg-violet-deep); color: #fff; padding: 10px 16px; font-weight: 700; }
:focus-visible { outline: 2px solid var(--peg-violet); outline-offset: 3px; }

/* ============================================================
   REVIEW HUB (/reviews)
   One card per casino, ranked. The card leads with the figure
   that decided the score, so the grid is scannable without
   opening anything.
   ============================================================ */
.peg-roster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px; }
@media (max-width: 900px) { .peg-roster { grid-template-columns: 1fr; } }

/* the home page leads with a podium of three, so it needs its own track count */
.peg-roster--podium { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .peg-roster--podium { grid-template-columns: 1fr; } }

.peg-card {
  border: 1px solid var(--peg-line); padding: 24px 24px 20px; position: relative;
  background:
    radial-gradient(76% 58% at 100% 0%, rgba(124, 92, 255, .11), transparent 62%),
    var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-lift);
  display: flex; flex-direction: column; gap: 15px;
}

.peg-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.peg-card-id { min-width: 0; }
.peg-card-id img { display: block; max-width: 148px; max-height: 40px; width: auto; height: auto; }
.peg-card-lic {
  display: block; margin-top: 10px; font-family: var(--peg-mono); font-size: .66rem;
  letter-spacing: .01em; color: var(--peg-ink-mute); line-height: 1.5;
}

.peg-card-rank {
  flex: none; text-align: right; font-family: var(--peg-mono); line-height: 1;
}
.peg-card-rank b {
  display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(118deg, var(--peg-violet-lite), var(--peg-ember-lite));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.peg-card-rank span {
  display: block; margin-top: 6px; font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--peg-ink-mute); font-family: var(--peg-sans);
}

.peg-card-hook { margin: 0; font-size: .93rem; line-height: 1.62; color: var(--peg-ink-soft); }
.peg-card-hook b { color: var(--peg-ink); font-weight: 600; }

.peg-card-figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.peg-card-figs li { border-top: 1px solid var(--peg-line); padding-top: 10px; }
.peg-card-figs b {
  display: block; font-family: var(--peg-mono); font-size: 1.02rem; font-weight: 700;
  color: var(--peg-ink); letter-spacing: -.02em;
}
.peg-card-figs span { display: block; margin-top: 5px; font-size: .72rem; line-height: 1.45; color: var(--peg-ink-mute); }

.peg-card-acts { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 4px; }
.peg-card-acts .peg-cta { padding: 11px 18px; font-size: .84rem; }
.peg-card-more { font-size: .84rem; font-weight: 600; color: var(--peg-violet-lite); }
.peg-card-more:hover { color: var(--peg-ember-lite); }

/* the "what we measure" strip above the roster */
.peg-scope { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--peg-line); border: 1px solid var(--peg-line); }
@media (max-width: 760px) { .peg-scope { grid-template-columns: repeat(2, 1fr); } }
.peg-scope div { background: var(--peg-panel); padding: 20px 18px; }
.peg-scope b {
  display: block; font-family: var(--peg-mono); font-size: 1.6rem; font-weight: 800;
  letter-spacing: -.03em; color: var(--peg-violet-lite);
}
.peg-scope span { display: block; margin-top: 8px; font-size: .78rem; line-height: 1.5; color: var(--peg-ink-mute); }

/* ============================================================
   HERO MARQUEE (/reviews)
   Two rows of lobby tiles drifting in opposite directions. Each
   tile links to its review, so the motion is navigation rather
   than decoration. The track holds the list twice and travels
   exactly -50%, which is what makes the loop seamless.
   ============================================================ */
.peg-parade {
  position: relative; margin-top: 36px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--peg-line); border-bottom: 1px solid var(--peg-line);
  background:
    radial-gradient(58% 120% at 50% 50%, rgba(124, 92, 255, .10), transparent 70%),
    rgba(0, 0, 0, .18);
  overflow: hidden;
}

/* full-bleed out of the shell without a horizontal scrollbar */
.peg-parade--bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

.peg-parade::before,
.peg-parade::after {
  content: ""; position: absolute; top: -1px; bottom: -1px; width: 22%; z-index: 2; pointer-events: none;
}
.peg-parade::before {
  left: 0;
  background: linear-gradient(90deg, var(--peg-void) 12%, rgba(8, 2, 31, .72) 52%, transparent);
}
.peg-parade::after {
  right: 0;
  background: linear-gradient(270deg, var(--peg-void) 12%, rgba(8, 2, 31, .72) 52%, transparent);
}
@media (max-width: 700px) { .peg-parade::before, .peg-parade::after { width: 13%; } }

.peg-lane { display: flex; width: max-content; gap: 16px; }
.peg-lane + .peg-lane { margin-top: 16px; }

html.js .peg-lane--a { animation: peg-drift-a 64s linear infinite; }
html.js .peg-lane--b { animation: peg-drift-b 76s linear infinite; }

@keyframes peg-drift-a { from { transform: translate3d(0, 0, 0); }      to { transform: translate3d(-50%, 0, 0); } }
@keyframes peg-drift-b { from { transform: translate3d(-50%, 0, 0); }   to { transform: translate3d(0, 0, 0); } }

.peg-parade:hover .peg-lane,
.peg-parade:focus-within .peg-lane { animation-play-state: paused; }

.peg-plate {
  position: relative; flex: none; width: 268px; display: block;
  border: 1px solid var(--peg-line); overflow: hidden; background: var(--peg-panel);
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .9);
  transition: border-color .22s ease, transform .22s ease;
}
.peg-plate img { display: block; width: 100%; height: auto; opacity: .82; transition: opacity .22s ease; }
.peg-plate:hover, .peg-plate:focus-visible { border-color: var(--peg-violet); transform: translateY(-3px); }
.peg-plate:hover img, .peg-plate:focus-visible img { opacity: 1; }

.peg-plate b {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 20px 12px 9px; font-size: .78rem; font-weight: 600; color: var(--peg-ink);
  background: linear-gradient(0deg, rgba(6, 2, 20, .94), transparent);
}
.peg-plate b em {
  font-style: normal; font-family: var(--peg-mono); font-size: .78rem; font-weight: 700;
  color: var(--peg-violet-lite);
}

@media (max-width: 700px) { .peg-plate { width: 208px; } .peg-lane { gap: 12px; } }

@media (prefers-reduced-motion: reduce) {
  html.js .peg-lane--a, html.js .peg-lane--b { animation: none; }
  .peg-lane { flex-wrap: wrap; width: auto; justify-content: center; }
  .peg-parade--bleed { margin-left: 0; margin-right: 0; }
  /* the track carries the list twice so the loop can be seamless; with the animation
     off that would print every casino twice, so drop the duplicated half */
  .peg-lane .peg-plate[aria-hidden="true"] { display: none; }
}

/* ============================================================
   CENTRED HERO (pages with no score panel beside the heading)
   The heading and lede are centred and given room to run, so a
   line breaks because the screen ran out, not because a narrow
   measure forced it. text-wrap balances what is left.
   ============================================================ */
.peg-hero-mid { text-align: center; }

.peg-hero-mid h1 {
  margin-inline: auto;
  max-width: 30ch;
  text-wrap: balance;              /* evens the last line against the ones above */
}

.peg-hero-mid .peg-lede {
  margin-inline: auto;
  max-width: 84ch;                 /* wide enough that mid-size screens keep full lines */
  text-wrap: pretty;               /* no orphan word on the final line */
}

.peg-hero-mid .peg-crumbs { text-align: left; }   /* a centred breadcrumb reads wrong */

@media (max-width: 600px) {
  .peg-hero-mid h1 { max-width: none; }
  /* the heading stays centred on a phone, but a nine-line centred paragraph is
     ragged on both edges and hard to track back to, so the lede goes flush left */
  .peg-hero-mid .peg-lede { max-width: none; text-align: left; }
}


/* ====================== the author ========================================
   Theo Brandt ships in three places: a face in every page byline, a box at the
   foot of every page, and the /theo-brandt profile. All three are inline HTML,
   never injected by site.js, because author signals have to be in the source.
   ========================================================================== */

/* the hub sits under a centred hero, so its byline centres to match; review
   pages keep the flush-left strip under their left-aligned hero */
.peg-byline-mid { justify-content: center; text-align: center; }

/* ---- the byline face ---- */
.peg-byline-who { display: inline-flex; align-items: center; gap: 11px; }
.peg-byline-face {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--peg-ridge); flex: none;
}
.peg-byline-who a { color: var(--peg-ink-soft); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--peg-line); }
.peg-byline-who a:hover, .peg-byline-who a:focus-visible { color: var(--peg-violet-lite); border-bottom-color: var(--peg-violet); }

/* ---- the box at the foot of every page ---- */
.peg-author {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 28px; align-items: start;
  border: 1px solid var(--peg-line); padding: 32px 34px;
  background:
    radial-gradient(58% 108% at 0% 0%, rgba(124, 92, 255, .17), transparent 62%),
    var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-lift);
}
.peg-author-shot {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--peg-ridge); display: block;
}
/* .peg-band h2 is a descendant selector, so its width cap and underline rule
   both reach in here and have to be switched off */
.peg-author h2 { margin: 0 0 5px; font-size: 1.18rem; max-width: none; }
.peg-author h2::after { content: none; }
.peg-author-role {
  margin: 0 0 15px; font-family: var(--peg-mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--peg-ink-mute);
}
.peg-author p { color: var(--peg-ink-soft); font-size: .93rem; line-height: 1.72; margin: 0 0 13px; }
.peg-author p:last-child { margin-bottom: 0; }
.peg-author a { color: var(--peg-violet-lite); }
@media (max-width: 620px) {
  .peg-author { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; padding: 28px 22px; }
}

/* ---- the profile page ----
   Same parts as the rest of the site rearranged so the page cannot be mistaken
   for a review: a portrait split instead of a score panel, a flat hairline fact
   row instead of the lit spec strip, and a numbered method instead of a desk. */
.peg-writer { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 54px; align-items: start; padding-top: 40px; }
.peg-writer-shot {
  /* it is a <figure>, whose UA margin is 1em 40px and would shrink the frame
     80px inside its own grid column */
  margin: 0;
  border: 1px solid var(--peg-line); padding: 11px;
  background: var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-lift);
}
.peg-writer-shot img { display: block; width: 100%; height: auto; }
.peg-writer-cap {
  display: block; margin-top: 13px; text-align: center; font-family: var(--peg-mono);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--peg-ink-mute);
}
.peg-writer-role {
  font-family: var(--peg-mono); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--peg-violet-lite); margin: 0 0 16px;
}
.peg-writer-words h1 { margin-top: 0; }

/* the fact row: hairlines only, no panels, so it reads as a stamp and not as
   the six-cell spec strip a review opens with */
.peg-stamp {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 46px; position: relative; padding: 26px 0 4px;
}
.peg-stamp::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--peg-line) 8%, var(--peg-line) 92%, transparent);
}
.peg-stamp div { padding-right: 26px; }
.peg-stamp dt {
  font-family: var(--peg-mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--peg-ink-mute); margin-bottom: 8px;
}
.peg-stamp dd { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--peg-ink); }
.peg-stamp dd a { color: var(--peg-violet-lite); }
@media (max-width: 900px) { .peg-stamp { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } }
@media (max-width: 460px) { .peg-stamp { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .peg-writer { grid-template-columns: 1fr; gap: 34px; justify-items: center; text-align: center; }
  .peg-writer-shot { max-width: 268px; }
  .peg-writer-words .peg-lede { margin-inline: auto; }
}

/* the numbered method. Capped and centred: a 66ch reading measure left flush in a
   1180px shell leaves half the band empty, which the house rule bans. */
.peg-steps { list-style: none; margin-inline: auto; margin-block: 0; padding: 0; max-width: 1000px; }
.peg-step { position: relative; padding: 26px 0 26px 78px; }
.peg-step + .peg-step::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--peg-line), var(--peg-line) 72%, transparent);
}
.peg-step-no {
  position: absolute; left: 0; top: 24px; width: 52px; text-align: left;
  font-family: var(--peg-mono); font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em;
  background: linear-gradient(126deg, var(--peg-violet-lite), var(--peg-ember-lite));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.peg-step b { display: block; font-size: 1.02rem; color: var(--peg-ink); margin-bottom: 9px; }
.peg-step p { margin: 0; color: var(--peg-ink-soft); font-size: .94rem; line-height: 1.72; max-width: 66ch; }
@media (max-width: 560px) {
  .peg-step { padding-left: 0; padding-top: 60px; }
  .peg-step-no { top: 22px; }
}

/* the sign-off */
.peg-signoff {
  display: flex; align-items: center; gap: 18px; margin-top: 44px; padding-top: 26px; position: relative;
}
.peg-signoff::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--peg-line), transparent 62%);
}
.peg-signoff img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--peg-ridge); flex: none; }
.peg-signoff span { font-size: .88rem; line-height: 1.6; color: var(--peg-ink-mute); }
.peg-signoff b { display: block; color: var(--peg-ink); font-size: .98rem; margin-bottom: 3px; }
@media (max-width: 560px) { .peg-signoff { flex-direction: column; text-align: center; } }

/* ---- the author page reads centred throughout ----
   Scoped to .peg-mid-page, so review article copy is untouched. The measure stays
   capped, because centred lines give the eye no fixed left edge to return to, but
   the cap is set near where the shell ends so lines do not break early. */
.peg-mid-page { text-align: center; }
.peg-mid-page .peg-crumbs { text-align: left; }

/* masthead becomes a centred stack: portrait on its own row above the words */
.peg-mid-page .peg-writer { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 32px; }
.peg-mid-page .peg-writer-shot { width: 100%; max-width: 262px; }
.peg-mid-page .peg-writer-words { max-width: 100%; }
.peg-mid-page .peg-lede { margin-inline: auto; max-width: 84ch; text-wrap: pretty; }
.peg-mid-page h1 { margin-inline: auto; max-width: 26ch; text-wrap: balance; }
/* .peg-band h2 caps at 24ch sitewide, which splits these headings a word early */
.peg-mid-page .peg-band h2 { max-width: 30ch; margin-inline: auto; text-wrap: balance; }

.peg-mid-page .peg-stamp div { padding: 0 14px; }

.peg-mid-page .peg-prose { max-width: 88ch; margin-inline: auto; text-wrap: pretty; }
.peg-mid-page .peg-band-intro { margin-inline: auto; max-width: 82ch; text-wrap: pretty; }

/* the step number sits above its title instead of beside it */
.peg-mid-page .peg-step { padding: 62px 0 30px; }
.peg-mid-page .peg-step-no { left: 50%; transform: translateX(-50%); width: auto; text-align: center; top: 24px; }
.peg-mid-page .peg-step p { margin-inline: auto; max-width: 82ch; text-wrap: pretty; }

.peg-mid-page .peg-col h3 { justify-content: center; }
.peg-mid-page .peg-col li { justify-content: center; }
.peg-mid-page .peg-signoff { flex-direction: column; gap: 14px; }
.peg-mid-page .peg-signoff::before { background: linear-gradient(90deg, transparent, var(--peg-line) 30%, var(--peg-line) 70%, transparent); }

/* the duo's data panel would sit off to one side of a centred page, so both
   sections stack: prose first, then the panel centred underneath */
.peg-mid-page .peg-duo { grid-template-columns: minmax(0, 1fr); gap: 34px; justify-items: center; }
.peg-mid-page .peg-duo > div:last-child { width: 100%; max-width: 760px; }
.peg-mid-page .peg-col { width: 100%; }

@media (max-width: 720px) {
  .peg-mid-page .peg-lede,
  .peg-mid-page .peg-prose,
  .peg-mid-page .peg-band-intro,
  .peg-mid-page .peg-step p,
  .peg-mid-page h1,
  .peg-mid-page .peg-band h2 { max-width: none; }
}

/* a footnote inside a data card needs a rule above it, or it reads as one more
   list item; and it aligns with the list rather than centring like a section note */
.peg-col .peg-fineprint { text-align: left; margin-top: 17px; padding-top: 14px; position: relative; }
.peg-col .peg-fineprint::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--peg-line), transparent 82%);
}


/* ---- reading cards ---------------------------------------------------------
   Analysis that follows a full-width table used to sit in a 72ch column with a
   dead half beside it. Same fix as .peg-duo, for prose that splits into three
   or four points instead of two: auto-fit so 2, 3 and 4 cards all balance. */
.peg-reads { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 20px; }
.peg-reads .peg-col p + p { margin-top: 13px; }
/* .peg-col + .peg-col paints every card after the first ember, which reads as
   one odd card and a run of identical ones once there are more than two */
.peg-reads .peg-col:nth-child(odd) h3::before { background: var(--peg-violet); box-shadow: 0 0 12px -1px var(--peg-violet); }
.peg-reads .peg-col:nth-child(even) h3::before { background: var(--peg-ember); box-shadow: 0 0 12px -1px var(--peg-ember); }
@media (max-width: 620px) {
  .peg-reads { grid-template-columns: 1fr; gap: 16px; }
}


/* ---- rail chips ------------------------------------------------------------
   A toplist row that says "All five" tells the reader nothing, so every network
   is named. The mark sits on a white disc because several official chain logos
   are dark by design (Ethereum's is #343434) and vanish on this theme; the disc
   is how the brain's own payment tiles present them. Optimism has no official
   file in the brain yet, so its chip falls back to the shared chain colour. */
.peg-rails { display: flex; flex-wrap: wrap; gap: 6px; --peg-c: var(--peg-ink-mute); }
.peg-rail {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 3px 11px 3px 3px; border: 1px solid var(--peg-line); border-radius: 999px;
  font-size: .78rem; font-weight: 500; color: var(--peg-ink-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0));
}
.peg-rail img, .peg-rail i {
  width: 19px; height: 19px; border-radius: 50%; flex: none; box-sizing: border-box;
}
.peg-rail img { background: #fff; padding: 2px; }
.peg-rail i { background: var(--peg-c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }

/* ---- the play button in a toplist row --------------------------------------
   Same ember treatment as .peg-cta, sized to sit inside a table cell. */
.peg-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 17px; border-radius: 7px; white-space: nowrap;
  font-size: .82rem; font-weight: 700; letter-spacing: .01em; color: #fff;
  background: linear-gradient(100deg, #b03700, #cf4200);
  box-shadow: 0 10px 24px -12px rgba(245, 88, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .32);
  transition: transform .2s var(--peg-ease), box-shadow .2s var(--peg-ease);
}
.peg-play:hover { text-decoration: none; color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(245, 88, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .45); }
.peg-play img { width: 13px; height: 13px; filter: brightness(0) invert(1); }
.peg-table td.peg-act { text-align: right; }

/* casino names and the flat-rail note both split a word early otherwise */
.peg-table th[scope="row"], .peg-table td.peg-dear { white-space: nowrap; }
/* without a floor the rails column collapses on a phone and every chip takes its
   own line, so a six-chip row grows to six. The wrapper scrolls either way. */
.peg-table .peg-rails { min-width: 276px; }

/* ---- the floor axis --------------------------------------------------------
   The hero has to answer "who is cheapest" AND show the 200x spread that the
   whole page is about, so it plots all ten casinos on one log-scaled rail
   instead of listing figures. Log, because on a linear axis 0.1 through 5 all
   pile up in the first quarter inch. Stops are pre-computed into a 4-96% band
   so the end clusters are not half-cut by the shell edge. */
.peg-axis { margin: 26px 0 0; }
.peg-axis-plot { position: relative; height: 152px; }
.peg-axis-plot::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 30px; height: 2px;
  background: linear-gradient(90deg, var(--peg-violet), var(--peg-violet-lite) 44%, var(--peg-ember));
}
.peg-axis-stop {
  position: absolute; bottom: 0; left: var(--peg-x); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
}
.peg-axis-stop::before {
  content: ''; position: absolute; bottom: 26px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--peg-violet-lite); box-shadow: 0 0 0 4px rgba(8, 2, 31, .9), 0 0 14px -2px var(--peg-violet-lite);
}
.peg-axis-stop--dear::before { background: var(--peg-ember-lite); box-shadow: 0 0 0 4px rgba(8, 2, 31, .9), 0 0 14px -2px var(--peg-ember-lite); }
.peg-axis-pins { display: flex; flex-direction: column-reverse; gap: 5px; align-items: center; margin-bottom: 16px; }
.peg-axis-pins a {
  display: block; white-space: nowrap; text-decoration: none;
  padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  color: var(--peg-ink-soft); border: 1px solid var(--peg-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)), var(--peg-panel);
  transition: color .18s var(--peg-ease), border-color .18s var(--peg-ease);
}
.peg-axis-pins a:hover { color: var(--peg-ink); border-color: rgba(124, 92, 255, .6); }
.peg-axis-val {
  height: 30px; line-height: 30px; font-family: var(--peg-mono);
  font-size: .96rem; font-weight: 800; letter-spacing: -.02em; color: var(--peg-violet-lite);
}
.peg-axis-stop--dear .peg-axis-val { color: var(--peg-ember-lite); }
/* the unit is redundant under the desktop rail, where six repeats crowd the
   scale and the figcaption names it once. On a phone the plot is a list of
   standalone rows, so a bare "0.1" has nothing to tell the reader what it is. */
.peg-axis-val em { display: none; }
.peg-axis figcaption { margin: 16px 0 0; font-size: .82rem; line-height: 1.6; color: var(--peg-ink-mute); }
.peg-axis figcaption b { font-family: var(--peg-mono); font-weight: 800; color: var(--peg-ink-soft); }

/* ---- the three figures beside the lede -------------------------------------
   Replaces the 4-cell .peg-scope box grid in this hero: same facts, no wall. */
.peg-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.peg-keys li { padding-left: 15px; border-left: 2px solid var(--peg-violet); }
.peg-keys li:nth-child(2) { border-left-color: var(--peg-violet-lite); }
.peg-keys li:nth-child(3) { border-left-color: var(--peg-ember); }
.peg-keys b { display: block; font-family: var(--peg-mono); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--peg-ink); }
.peg-keys span { display: block; margin-top: 5px; font-size: .8rem; line-height: 1.5; color: var(--peg-ink-mute); }

@media (max-width: 860px) {
  /* six stops and eleven pins will not share 390px, so the plot stops being a
     plot and becomes the list it always was underneath */
  .peg-axis-plot { height: auto; display: flex; flex-direction: column; gap: 14px; }
  .peg-axis-plot::after { display: none; }
  .peg-axis-stop {
    position: static; transform: none; flex-direction: row; align-items: center; gap: 14px;
    padding-bottom: 14px; border-bottom: 1px solid var(--peg-line);
  }
  .peg-axis-stop:last-child { border-bottom: 0; padding-bottom: 0; }
  .peg-axis-stop::before { position: static; flex: none; }
  .peg-axis-pins { flex-direction: row; flex-wrap: wrap; margin-bottom: 0; justify-content: flex-start; }
  .peg-axis-val { height: auto; line-height: 1; min-width: 92px; text-align: right; flex: none; order: -1; }
  .peg-axis-val em { display: inline; font-style: normal; font-size: .72rem; font-weight: 700; color: var(--peg-ink-mute); margin-left: 5px; }
  .peg-axis-stop::before { order: -1; }
}

/* ---- the paired rail chart -----------------------------------------------
   One casino per row, USDT rails above USDC rails, so the gap between the two
   dollars is a shape rather than a sentence. Violet carries USDT and ember
   carries USDC throughout, per the palette note at the top of this file. */
.peg-pair {
  margin: 34px 0 0; padding: 26px 28px 24px;
  border: 1px solid var(--peg-line);
  background: var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-drop);
}
.peg-pair-key {
  display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 22px;
  font-family: var(--peg-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--peg-ink-mute);
}
.peg-pair-key span { display: flex; align-items: center; gap: 9px; }
.peg-pair-key i { width: 24px; height: 9px; background: var(--peg-violet); }
.peg-pair-key span + span i { background: var(--peg-ember); }
.peg-pair-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.peg-pair-rows > li { display: grid; grid-template-columns: 122px 1fr; align-items: center; gap: 18px; }
.peg-pair-rows > li > a { color: var(--peg-ink); font-weight: 600; font-size: .92rem; letter-spacing: -.01em; }
.peg-pair-rows > li > a:hover { color: var(--peg-violet-lite); text-decoration: none; }
/* rows are casinos on the money pages and chain names in the fee guide; the
   label is only a link when there is a page behind it. */
.peg-pair-rows > li > span { color: var(--peg-ink); font-weight: 600; font-size: .92rem; letter-spacing: -.01em; }
.peg-pair-bars { display: grid; gap: 6px; min-width: 0; --peg-scale: 1; }
.peg-pair-bar { display: flex; align-items: center; gap: 11px; min-width: 0; }
.peg-pair-bar i {
  flex: 0 0 auto; height: 11px; width: calc(var(--peg-w) * var(--peg-scale));
  background: linear-gradient(90deg, var(--peg-violet-deep), var(--peg-violet));
}
.peg-pair-bar--c i { background: linear-gradient(90deg, var(--peg-ember-deep), var(--peg-ember)); }
.peg-pair-bar b { font-family: var(--peg-mono); font-size: .8rem; font-weight: 800; color: var(--peg-ink); }
.peg-pair-bar em { font-style: normal; font-size: .8rem; color: var(--peg-ink-mute); }
.peg-pair figcaption {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--peg-line);
  font-size: .88rem; line-height: 1.6; color: var(--peg-ink-mute);
}
.peg-pair figcaption b { color: var(--peg-ink-soft); font-family: var(--peg-mono); font-weight: 800; }
@media (max-width: 640px) {
  .peg-pair { padding: 20px 18px 18px; }
  .peg-pair-rows > li { grid-template-columns: 1fr; gap: 7px; }
  .peg-pair-rows > li > a { font-size: .88rem; }
  /* the bar eats the row width here, so the note drops to its own line
     instead of being squeezed into a four-character column */
  /* the bars wrap here, so a 100% bar would take the whole line and push its
     count onto the next one. Scaling every bar by the same factor keeps the
     comparison honest and leaves the count inline. */
  .peg-pair-bars { gap: 9px; --peg-scale: .88; }
  .peg-pair-bar { flex-wrap: wrap; }
  .peg-pair-bar em { flex: 1 0 100%; margin-top: 2px; font-size: .78rem; }
}

/* ---- chain chips: two marks that are not circular logos --------------------
   Base ships its brand mark as a solid blue tile, so the white disc and the
   circular crop the other chips use would flatten it into an anonymous dot.
   It keeps its own shape instead. Optimism's symbol only exists as a raster
   in the official repo, so that one chip is a webp among the SVGs. */
.peg-rail img[src$="peg-rail-base.svg"] {
  background: none; padding: 0; border-radius: 3px;
  /* solid fill reads heavier than the disc-mounted marks, so inset it slightly */
  width: 16px; height: 16px; margin: 1.5px;
}
.peg-rail-note {
  display: block; margin-top: 7px;
  font-size: .82rem; line-height: 1.45; color: var(--peg-ink-mute);
}

/* ---- the terms matrix -----------------------------------------------------
   Money page 4's signature graphic. Pages 1 and 2 open on a log axis and page 3
   on paired bars; this one is a traffic-light grid, because the finding here is
   a set of categories rather than a spread or a comparison of two series. */
.peg-matrix {
  margin: 34px 0 0; padding: 24px 26px 22px;
  border: 1px solid var(--peg-line);
  background: var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-drop);
}
.peg-matrix-key {
  display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 20px;
  font-family: var(--peg-mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--peg-ink-mute);
}
.peg-matrix-key span { display: flex; align-items: center; gap: 8px; }
.peg-matrix-key i { width: 12px; height: 12px; }
.peg-matrix-key i.ok { background: var(--peg-good); }
.peg-matrix-key i.mid { background: var(--peg-warn); }
.peg-matrix-key i.bad { background: var(--peg-alarm); }
.peg-matrix-scroll { overflow-x: auto; }
.peg-matrix table { width: 100%; min-width: 760px; border-collapse: collapse; }
.peg-matrix caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.peg-matrix th[scope="col"] {
  padding: 0 8px 13px; text-align: left; vertical-align: bottom;
  font-family: var(--peg-mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--peg-ink-mute);
}
.peg-matrix th[scope="row"] {
  padding: 8px 16px 8px 0; text-align: left; white-space: nowrap;
  font-size: .92rem; font-weight: 600;
}
.peg-matrix th[scope="row"] a { color: var(--peg-ink); }
.peg-matrix th[scope="row"] a:hover { color: var(--peg-violet-lite); text-decoration: none; }
.peg-matrix td { padding: 5px 8px; }
.peg-matrix tbody tr + tr { border-top: 1px solid rgba(56, 32, 127, .55); }
.peg-chip {
  display: inline-block; padding: 5px 10px;
  font-family: var(--peg-mono); font-size: .74rem; font-weight: 700; white-space: nowrap;
  color: var(--peg-ink-soft); background: rgba(255, 255, 255, .05);
  border-left: 2px solid var(--peg-ink-mute);
}
.peg-chip--ok  { color: #8ff0c4; background: rgba(61, 220, 151, .12); border-left-color: var(--peg-good); }
.peg-chip--mid { color: #ffe08a; background: rgba(255, 199, 0, .11);  border-left-color: var(--peg-warn); }
.peg-chip--bad { color: #ffb3b7; background: rgba(255, 95, 102, .13); border-left-color: var(--peg-alarm); }
.peg-matrix figcaption {
  margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--peg-line);
  font-size: .88rem; line-height: 1.6; color: var(--peg-ink-mute);
}
.peg-matrix figcaption b { color: var(--peg-ink-soft); font-family: var(--peg-mono); font-weight: 800; }
@media (max-width: 640px) {
  .peg-matrix { padding: 18px 16px 16px; }
  .peg-matrix table { min-width: 700px; }
}

/* ---- the span chart -------------------------------------------------------
   Money page 5's signature graphic. Each row spans from the year a casino's own
   copyright line starts to the year its licence was issued, on a shared scale,
   so the gap between "trading since" and "licensed since" is the shape. Use it
   when the finding is a DISTANCE between two dates, not a level or a category. */
.peg-span {
  margin: 34px 0 0; padding: 26px 28px 22px;
  border: 1px solid var(--peg-line);
  background: var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-drop);
}
.peg-span-key {
  display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px;
  font-family: var(--peg-mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--peg-ink-mute);
}
.peg-span-key span { display: flex; align-items: center; gap: 8px; }
.peg-span-key i { width: 11px; height: 11px; border-radius: 50%; background: var(--peg-violet); }
.peg-span-key i.lic { background: var(--peg-ember); }
.peg-span-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.peg-span-rows > li { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 16px; }
.peg-span-rows > li > a { color: var(--peg-ink); font-weight: 600; font-size: .9rem; }
.peg-span-rows > li > a:hover { color: var(--peg-violet-lite); text-decoration: none; }
.peg-span-track { position: relative; height: 26px; }
.peg-span-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(56, 32, 127, .8);
}
.peg-span-bar {
  position: absolute; top: 50%; transform: translateY(-50%); height: 4px;
  left: var(--peg-a); width: var(--peg-len);
  background: linear-gradient(90deg, var(--peg-violet), var(--peg-ember));
}
.peg-span-dot {
  position: absolute; top: 50%; left: var(--peg-x);
  transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 50%;
  background: var(--peg-violet); box-shadow: 0 0 0 3px var(--peg-panel);
}
.peg-span-dot--lic { background: var(--peg-ember); }
.peg-span-dot b {
  position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%);
  font-family: var(--peg-mono); font-size: .64rem; font-weight: 800;
  color: var(--peg-ink-soft); white-space: nowrap;
}
.peg-span-none {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  font-size: .78rem; color: var(--peg-ink-mute);
}
/* ticks are positioned on the same 2013-2026 scale as the dots. space-between
   would put 2019 at 50% when the true position is 46.2%, which reads as the
   chart being misaligned against its own axis. */
.peg-span-axis {
  position: relative; height: 15px; margin: 14px 0 0 128px;
  font-family: var(--peg-mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; color: var(--peg-ink-mute);
}
.peg-span-axis span { position: absolute; left: var(--peg-x); transform: translateX(-50%); }
.peg-span-axis span:first-child { transform: none; }
.peg-span-axis span:last-child { transform: translateX(-100%); }
.peg-span figcaption {
  margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--peg-line);
  font-size: .88rem; line-height: 1.6; color: var(--peg-ink-mute);
}
.peg-span figcaption b { color: var(--peg-ink-soft); font-family: var(--peg-mono); font-weight: 800; }
@media (max-width: 700px) {
  .peg-span { padding: 20px 16px 18px; }
  .peg-span-rows > li { grid-template-columns: 88px 1fr; gap: 10px; }
  .peg-span-rows > li > a { font-size: .82rem; }
  .peg-span-axis { margin-left: 98px; font-size: .6rem; }
  /* five ticks collide at this width; keep the ends and the midpoint */
  .peg-span-axis span:nth-child(2), .peg-span-axis span:nth-child(4) { display: none; }
  .peg-span-dot b { font-size: .58rem; }
}

/* ---- the evidence tiers ---------------------------------------------------
   Money page 6's signature graphic. Casinos are grouped into bands by how good
   their payout claim is as evidence, strongest at the top. Use it when the
   finding is a RANKING INTO BUCKETS rather than a value per casino. */
.peg-tier {
  margin: 34px 0 0; padding: 26px 28px 22px;
  border: 1px solid var(--peg-line);
  background: var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset), var(--peg-drop);
}
.peg-tier-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.peg-tier-rows > li {
  display: grid; grid-template-columns: 232px 1fr; align-items: center; gap: 22px;
  padding: 14px 16px; border-left: 3px solid var(--peg-c, var(--peg-ink-mute));
  background: rgba(255, 255, 255, .035);
}
.peg-tier-rows > li:nth-child(1) { --peg-c: var(--peg-good); }
.peg-tier-rows > li:nth-child(2) { --peg-c: var(--peg-violet); }
.peg-tier-rows > li:nth-child(3) { --peg-c: var(--peg-warn); }
.peg-tier-rows > li:nth-child(4) { --peg-c: var(--peg-alarm); }

/* worst-first ranking: the deposit guide orders failures by what they cost, so the
   band ramp has to run the other way round. */
.peg-tier--inverse .peg-tier-rows > li:nth-child(1) { --peg-c: var(--peg-alarm); }
.peg-tier--inverse .peg-tier-rows > li:nth-child(2) { --peg-c: var(--peg-warn); }
.peg-tier--inverse .peg-tier-rows > li:nth-child(3) { --peg-c: var(--peg-violet); }
.peg-tier--inverse .peg-tier-rows > li:nth-child(4) { --peg-c: var(--peg-good); }
.peg-tier-lab { display: block; }
.peg-tier-lab b {
  display: block; font-size: 1rem; font-weight: 700; color: var(--peg-ink);
  letter-spacing: -.015em;
}
.peg-tier-lab span {
  display: block; margin-top: 3px; font-size: .8rem; line-height: 1.45;
  color: var(--peg-ink-mute);
}
.peg-tier-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.peg-tier-pills a, .peg-tier-pills span {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--peg-line);
  background: var(--peg-deck); font-size: .86rem; font-weight: 600; color: var(--peg-ink);
}
.peg-tier-pills a:hover { border-color: var(--peg-c); text-decoration: none; }
.peg-tier-pills em {
  font-style: normal; font-family: var(--peg-mono); font-size: .76rem;
  font-weight: 700; color: var(--peg-c);
}
.peg-tier figcaption {
  margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--peg-line);
  font-size: .88rem; line-height: 1.6; color: var(--peg-ink-mute);
}
.peg-tier figcaption b { color: var(--peg-ink-soft); font-family: var(--peg-mono); font-weight: 800; }
@media (max-width: 760px) {
  .peg-tier { padding: 20px 16px 18px; }
  .peg-tier-rows > li { grid-template-columns: 1fr; gap: 12px; }
}

/* ---- the guides deck -------------------------------------------------------
   The hub lists twelve guides in three groups of four. Each card is one whole
   link so the hit area is the card and not the four words in its heading, and
   the mono line at the bottom is the single figure that guide is built on. */
.peg-deck { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.peg-deck > a {
  display: flex; flex-direction: column; gap: 9px; padding: 22px 24px 22px;
  border: 1px solid var(--peg-line);
  background: var(--peg-glass), var(--peg-panel);
  box-shadow: var(--peg-inset);
  transition: border-color .2s var(--peg-ease), transform .2s var(--peg-ease), box-shadow .2s var(--peg-ease);
}
.peg-deck > a:hover {
  text-decoration: none; border-color: var(--peg-violet); transform: translateY(-3px);
  box-shadow: var(--peg-inset), var(--peg-lift);
}
.peg-deck b { font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.32; color: var(--peg-ink); }
.peg-deck span { font-size: .9rem; line-height: 1.55; color: var(--peg-ink-soft); }
.peg-deck em {
  margin-top: auto; padding-top: 14px; font-style: normal;
  font-family: var(--peg-mono); font-size: .73rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--peg-ember);
}
@media (max-width: 1080px) { .peg-deck { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .peg-deck { grid-template-columns: 1fr; gap: 14px; } }

/* ---- help organisations ----------------------------------------------------
   The support-body logos ship light on transparent, so they sit straight on the
   dark panel with no tile behind them. Whole-card links, same shape as the deck. */
.peg-help { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.peg-help > a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 22px 22px 20px; border: 1px solid var(--peg-line);
  background: var(--peg-glass), var(--peg-panel); box-shadow: var(--peg-inset);
  transition: border-color .2s var(--peg-ease), transform .2s var(--peg-ease);
}
.peg-help > a:hover { text-decoration: none; border-color: var(--peg-violet); transform: translateY(-3px); }
.peg-help img { width: auto; height: 42px; max-width: 150px; object-fit: contain; object-position: left center; }
.peg-help b { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; color: var(--peg-ink); }
.peg-help span { font-size: .86rem; line-height: 1.5; color: var(--peg-ink-soft); }
.peg-help em {
  margin-top: auto; padding-top: 10px; font-style: normal;
  font-family: var(--peg-mono); font-size: .71rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--peg-ink-mute);
}
@media (max-width: 1080px) { .peg-help { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .peg-help { grid-template-columns: 1fr; gap: 13px; } }

/* the legal pages are one long column of prose and need a readable measure */
.peg-legal { max-width: 74ch; }
.peg-legal h2 { margin-top: 2.1em; font-size: clamp(1.3rem, 2.6vw, 1.65rem); }
.peg-legal h2:first-of-type { margin-top: 0; }
.peg-legal h3 { margin-top: 1.7em; font-size: 1.06rem; }
.peg-legal ul { margin: 0 0 1.2em; padding-left: 1.15em; }
.peg-legal li { margin-bottom: .5em; line-height: 1.65; }
.peg-legal .peg-updated {
  display: inline-block; margin-bottom: 30px; padding: 9px 15px;
  border-left: 2px solid var(--peg-violet); background: rgba(255, 255, 255, .04);
  font-family: var(--peg-mono); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--peg-ink-soft);
}


/* ==========================================================================
   HOME ONLY - three modules that appear on no other page. The home page is
   the tour, so it gets its own furniture: a journey rail, a story spread
   and a plain ledger of what is still unread.
   ========================================================================== */

/* ---- the journey rail: where a dollar goes, and who covers each stop ---- */
.peg-flow {
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr);
  margin: 34px 0 0; padding: 0; list-style: none;
}
.peg-flow > li {
  position: relative; display: flex; flex-direction: column;
  --peg-pad: 0px; padding: 0 20px 0 0;
}
.peg-flow > li + li { --peg-pad: 22px; padding-left: 22px; border-left: 1px solid var(--peg-line); }
/* one connector per gap, so the rail stops at the last stop instead of dangling */
.peg-flow > li:not(:last-child)::after {
  content: ''; position: absolute; top: 26px; left: calc(var(--peg-pad) + 60px); right: -8px; height: 1px;
  background: linear-gradient(90deg, var(--peg-violet), var(--peg-violet-deep));
  opacity: .55;
}
.peg-flow-dot {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 52px; height: 52px; border: 1px solid var(--peg-line); background: var(--peg-deck);
  font-family: var(--peg-mono); font-size: .95rem; font-weight: 800; color: var(--peg-violet-lite);
  transition: border-color .22s var(--peg-ease), color .22s var(--peg-ease), box-shadow .22s var(--peg-ease);
}
.peg-flow h3 { margin: 17px 0 7px; font-size: 1.01rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.peg-flow p { margin: 0 0 13px; font-size: .875rem; line-height: 1.58; color: var(--peg-ink-soft); }
.peg-flow-go {
  margin-top: auto; font-family: var(--peg-mono); font-size: .71rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase; color: var(--peg-ember);
}
.peg-flow > li:hover .peg-flow-dot, .peg-flow > li:focus-within .peg-flow-dot {
  border-color: var(--peg-violet); color: var(--peg-ink); box-shadow: 0 0 0 4px rgba(124, 92, 255, .13);
}
@media (max-width: 1000px) {
  .peg-flow { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  /* the base rule carries :not(:last-child), so match it or specificity wins */
  .peg-flow > li:not(:last-child)::after { content: none; }
  .peg-flow > li { padding-right: 24px; }
  .peg-flow > li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .peg-flow > li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--peg-line); }
}
@media (max-width: 560px) {
  .peg-flow { grid-template-columns: 1fr; row-gap: 28px; }
  .peg-flow > li, .peg-flow > li:nth-child(even) { padding: 0; border-left: 0; }
  .peg-flow > li + li { padding-top: 26px; border-top: 1px solid var(--peg-line); }
}

/* ---- the story spread: one finding, one figure, alternating sides ---- */
.peg-storey { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; margin-top: 32px; }
.peg-storey--flip .peg-storey-fig { order: 2; }
.peg-storey-fig {
  margin: 0; padding: 32px 30px 30px; border: 1px solid var(--peg-line);
  background: var(--peg-glass), var(--peg-panel); box-shadow: var(--peg-inset), var(--peg-lift);
}
.peg-storey-num {
  display: block; font-family: var(--peg-mono); font-weight: 800;
  font-size: clamp(2.9rem, 6.4vw, 4.3rem); line-height: .9; letter-spacing: -.05em; color: var(--peg-ink);
}
.peg-storey-num em { font-style: normal; font-size: .36em; letter-spacing: -.02em; color: var(--peg-violet-lite); margin-left: 6px; }
.peg-storey-cap { margin: 15px 0 0; font-size: .89rem; line-height: 1.58; color: var(--peg-ink-soft); }
.peg-storey-bars { list-style: none; margin: 24px 0 0; padding: 21px 0 0; border-top: 1px solid var(--peg-line); }
.peg-storey-bars li { display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 13px; margin-bottom: 13px; }
.peg-storey-bars li:last-child { margin-bottom: 0; }
.peg-storey-bars span { font-size: .81rem; color: var(--peg-ink-soft); }
.peg-storey-bars i {
  display: block; height: 10px; width: var(--peg-w, 50%);
  background: linear-gradient(90deg, var(--peg-violet-deep), var(--peg-violet));
}
.peg-storey-bars li.peg-dearest i { background: linear-gradient(90deg, var(--peg-ember-deep), var(--peg-ember)); }
.peg-storey-bars b { font-family: var(--peg-mono); font-size: .84rem; font-weight: 800; color: var(--peg-ink); }
.peg-storey-words > :first-child { margin-top: 0; }
.peg-storey-words h2 { margin-bottom: .5em; }
@media (max-width: 940px) {
  .peg-storey { grid-template-columns: 1fr; gap: 30px; }
  .peg-storey--flip .peg-storey-fig { order: 0; }
}

/* ---- the ledger: a plain record of what has not been read yet ---- */
.peg-ledger { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--peg-line); }
.peg-ledger > li {
  display: grid; grid-template-columns: 215px 1fr 158px; gap: 22px; align-items: baseline;
  padding: 19px 2px; border-bottom: 1px solid var(--peg-line);
}
.peg-ledger b { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.peg-ledger p { margin: 0; font-size: .89rem; line-height: 1.62; color: var(--peg-ink-soft); }
.peg-ledger em {
  font-style: normal; text-align: right; font-family: var(--peg-mono);
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--peg-warn);
}
.peg-ledger em.peg-closed { color: var(--peg-good); }
@media (max-width: 860px) {
  .peg-ledger > li { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .peg-ledger p { grid-column: 1 / -1; }
  .peg-ledger em { text-align: right; }
}

/* ---- the weights: what a score is made of, sized to its own share ---- */
.peg-weights { list-style: none; margin: 30px 0 0; padding: 0; }
.peg-weights > li { padding: 18px 0 19px; border-top: 1px solid var(--peg-line); }
.peg-weights > li:last-child { border-bottom: 1px solid var(--peg-line); }
.peg-weights-top { display: grid; grid-template-columns: 1fr 42% auto; align-items: center; gap: 18px; }
.peg-weights-top b { font-size: 1.01rem; font-weight: 700; letter-spacing: -.015em; }
.peg-weights-bar { display: block; height: 12px; background: var(--peg-ridge); }
.peg-weights-bar i {
  display: block; height: 100%; width: var(--peg-w, 50%);
  background: linear-gradient(90deg, var(--peg-violet-deep), var(--peg-violet));
}
.peg-weights > li:nth-child(5) .peg-weights-bar i { background: linear-gradient(90deg, var(--peg-ember-deep), var(--peg-ember)); }
.peg-weights-pc { font-family: var(--peg-mono); font-size: 1.05rem; font-weight: 800; color: var(--peg-ink); }
.peg-weights p { margin: 10px 0 0; max-width: 66ch; font-size: .89rem; line-height: 1.6; color: var(--peg-ink-soft); }
@media (max-width: 760px) {
  .peg-weights-top { grid-template-columns: 1fr auto; gap: 10px 14px; }
  .peg-weights-top b { grid-area: 1 / 1; }
  .peg-weights-pc { grid-area: 1 / 2; }
  .peg-weights-bar { grid-area: 2 / 1 / 3 / -1; }
}

/* ---- the editor block: the portrait is a column here, never a poster ---- */
.peg-editor { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 48px; align-items: start; }
.peg-editor .peg-prose > :first-child { margin-top: 0; }
@media (max-width: 860px) {
  .peg-editor { grid-template-columns: 1fr; gap: 28px; }
  .peg-editor .peg-writer-shot { max-width: 330px; }
}


/* ==========================================================================
   HOME ARTWORK - the rendered scenes. One visual language across the set:
   isometric matte renders, indigo ground, violet edges, one ember accent.
   ========================================================================== */

/* ---- the hero carries the desk render behind it ---- */
.peg-hero--home { position: relative; isolation: isolate; overflow: hidden; }
/* the hero art IS the LCP element, so a phone must not pull the 1600px plate for
   a 412px screen. Narrow crop by default, wide one only where it is worth it. */
.peg-hero--home::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: url('/images/peg-scene-desk-narrow.webp') center right / cover no-repeat;
  opacity: .66;
}
@media (min-width: 760px) {
  .peg-hero--home::before { background-image: url('/images/peg-scene-desk.webp'); }
}
.peg-hero--home::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, var(--peg-void) 20%, rgba(8, 2, 31, .9) 42%, rgba(8, 2, 31, .62) 100%),
    linear-gradient(0deg, var(--peg-void) 12%, rgba(8, 2, 31, .82) 34%, transparent 62%);
}

/* ---- a full-width scene strip, with the caption sitting under it ---- */
.peg-art { margin: 30px 0 0; }
.peg-art img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--peg-line); box-shadow: var(--peg-inset), var(--peg-lift);
}
.peg-art figcaption {
  margin-top: 13px; font-size: .82rem; line-height: 1.55; color: var(--peg-ink-mute);
}
.peg-art--short img { max-height: 430px; object-fit: cover; object-position: center; }

/* ---- the storey figure gains artwork above its number ---- */
.peg-storey-fig { padding: 0; overflow: hidden; }
.peg-storey-art { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--peg-line); }
.peg-storey-body { padding: 26px 30px 28px; }

/* ---- a scene beside prose: image column, then words ---- */
.peg-scene { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 44px; align-items: center; margin-top: 30px; }
.peg-scene--flip { grid-template-columns: minmax(0, 1fr) 420px; }
.peg-scene--flip .peg-scene-shot { order: 2; }
.peg-scene-shot { margin: 0; }
.peg-scene-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--peg-line); box-shadow: var(--peg-inset), var(--peg-lift);
}
.peg-scene-words > :first-child { margin-top: 0; }
.peg-scene-words p { font-size: .96rem; line-height: 1.72; color: var(--peg-ink-soft); }
@media (max-width: 940px) {
  .peg-scene, .peg-scene--flip { grid-template-columns: 1fr; gap: 26px; }
  .peg-scene--flip .peg-scene-shot { order: 0; }
}

/* ---- a band that carries the brushed texture instead of flat colour ---- */
.peg-band--tex { position: relative; isolation: isolate; }
.peg-band--tex::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('/images/peg-texture-weave.webp') center / cover no-repeat;
  opacity: .3;
}

/* ---- guide cards carry a cover image ---- */
.peg-deck > a.peg-deck--art { padding: 0; gap: 0; }
.peg-deck--art img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--peg-line); }
.peg-deck-body { display: flex; flex-direction: column; gap: 9px; flex: 1; padding: 19px 21px 20px; }

/* ==========================================================================
   THE LADDER - ranks four to ten, as a chart rather than a table. Every row
   shares one logarithmic track running 0.1 to 20 USDT, so reading down the
   column shows the spread that the next section then explains.
   ========================================================================== */
.peg-ladder-head {
  margin: 40px 0 0; font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--peg-ink-soft); text-align: center;
}
.peg-ladder { list-style: none; margin: 22px 0 0; padding: 0; }
.peg-ladder > li {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) 40% auto auto;
  align-items: center; gap: 22px;
  padding: 14px 18px 14px 14px; border: 1px solid var(--peg-line);
  background: var(--peg-glass), var(--peg-panel); box-shadow: var(--peg-inset);
  transition: border-color .2s var(--peg-ease), transform .2s var(--peg-ease);
}
.peg-ladder > li + li { margin-top: 10px; }
.peg-ladder > li:hover { border-color: var(--peg-violet); transform: translateX(3px); }

.peg-ladder-shot { position: relative; display: block; margin: 0; }
.peg-ladder-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--peg-ridge); }
.peg-ladder-shot b {
  position: absolute; top: 0; left: 0; padding: 3px 7px;
  background: var(--peg-void); font-family: var(--peg-mono);
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; color: var(--peg-violet-lite);
}

.peg-ladder-id b { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em; }
.peg-ladder-id b a { color: var(--peg-ink); }
.peg-ladder-id span { display: block; margin-top: 4px; font-size: .85rem; line-height: 1.5; color: var(--peg-ink-soft); }

/* the shared track: a rule with one marker on it and the figure above the marker */
.peg-ladder-track { position: relative; height: 46px; }
.peg-ladder-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 30px; height: 2px;
  background: linear-gradient(90deg, var(--peg-violet-deep), var(--peg-ridge) 55%, var(--peg-ember-deep));
}
.peg-ladder-mark { position: absolute; top: 24px; left: var(--peg-x, 50%); transform: translateX(-50%); }
.peg-ladder-mark i {
  display: block; width: 14px; height: 14px; margin: 0 auto;
  background: var(--peg-violet-lite); box-shadow: 0 0 0 4px rgba(124, 92, 255, .2);
}
.peg-ladder-mark b {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--peg-mono); font-size: .82rem; font-weight: 800; color: var(--peg-ink);
}
.peg-ladder > li.peg-dearest .peg-ladder-mark i { background: var(--peg-ember); box-shadow: 0 0 0 4px rgba(245, 88, 0, .22); }
/* the legend is a row of the ladder itself, so it lands on the track column */
.peg-ladder > li.peg-ladder-legend {
  border: 0; background: none; box-shadow: none; padding: 4px 18px 0 14px; margin-top: 4px;
}
.peg-ladder > li.peg-ladder-legend:hover { transform: none; }
/* the legend keeps the score and button columns at their real width so the
   scale lands exactly under the track it describes */
.peg-ghost { visibility: hidden; }
.peg-ladder-scale {
  display: grid; grid-template-columns: repeat(3, 1fr);
  font-family: var(--peg-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--peg-ink-mute);
}
.peg-ladder-scale span:nth-child(2) { text-align: center; }
.peg-ladder-scale span:nth-child(3) { text-align: right; }

.peg-ladder-score { font-family: var(--peg-mono); font-size: 1.24rem; font-weight: 800; color: var(--peg-ink); }

/* named areas below the desktop width: the track drops to its own full-width
   row, so the five children never fight over an implicit grid */
@media (max-width: 1080px) {
  .peg-ladder > li {
    grid-template-columns: 108px minmax(0, 1fr) auto auto;
    grid-template-areas: "shot id score play" "track track track track";
    gap: 15px 18px;
  }
  .peg-ladder-shot { grid-area: shot; }
  .peg-ladder-id { grid-area: id; }
  .peg-ladder-track { grid-area: track; }
  .peg-ladder-score { grid-area: score; }
  .peg-ladder .peg-play { grid-area: play; }
}
@media (max-width: 620px) {
  .peg-ladder > li {
    grid-template-columns: 78px minmax(0, 1fr) auto;
    grid-template-areas: "shot id score" "track track track" "play play play";
    gap: 12px 13px; padding: 12px;
  }
  .peg-ladder-score { align-self: start; font-size: 1.1rem; }
  .peg-ladder .peg-play { justify-self: start; }
  .peg-ladder-shot b { font-size: .6rem; padding: 2px 5px; }
  .peg-ladder-id span { font-size: .82rem; }
}

/* ---- the podium cards carry the lobby they were read in ---- */
.peg-card-shot { margin: -24px -24px 18px; position: relative; }
.peg-card-shot img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--peg-line); }
.peg-card-shot span {
  position: absolute; left: 0; bottom: 0; padding: 5px 11px;
  background: var(--peg-void); font-family: var(--peg-mono); font-size: .68rem;
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--peg-ink-mute);
}