/* ==========================================================================
   BRÜK — design tokens
   Concept: the XRP Ledger portrayed as water — a living instrument you
   watch, not a dashboard you read. Dark palette by default, drawn from
   deep-water blues and teals.
   ========================================================================== */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.9rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 640px;
  --content-default: 980px;
  --content-wide: 1240px;

  --font-display: 'General Sans', 'Satoshi', system-ui, sans-serif;
  --font-body: 'General Sans', 'Satoshi', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}

/* DARK — the default: a monitor glowing in a quiet room */
:root,
[data-theme='dark'] {
  --color-bg: #05070a;
  --color-surface: #0a0e13;
  --color-surface-2: #0f151b;
  --color-surface-offset: #131a21;
  --color-surface-dynamic: #182027;
  --color-divider: #182027;
  --color-border: #23303a;

  --color-text: #e4f2ec;
  --color-text-muted: #8aa39c;
  --color-text-faint: #4d6058;
  --color-text-inverse: #05070a;

  --color-primary: #34e0a1;
  --color-primary-hover: #58ecb4;
  --color-primary-active: #24c98a;
  --color-primary-highlight: #14332a;

  --color-warning: #ffb020;
  --color-warning-hover: #ffc355;
  --color-warning-active: #e69100;
  --color-warning-highlight: #3a2c10;

  --color-error: #ff5d6c;
  --color-error-hover: #ff8290;
  --color-error-active: #e6394b;
  --color-error-highlight: #3a1a1f;

  --color-blue: #4fd1ff;
  --color-blue-highlight: #12313e;
  --color-purple: #b98bff;
  --color-purple-highlight: #2b2247;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  --glow-primary: 0 0 24px rgba(52, 224, 161, 0.25);
}

/* LIGHT — a daylight ICU monitor */
[data-theme='light'] {
  --color-bg: #f2f6f4;
  --color-surface: #ffffff;
  --color-surface-2: #f8fbf9;
  --color-surface-offset: #edf3f0;
  --color-surface-dynamic: #e3ebe6;
  --color-divider: #dee8e3;
  --color-border: #cddcd5;

  --color-text: #0e1b16;
  --color-text-muted: #526059;
  --color-text-faint: #8a9a92;
  --color-text-inverse: #f2f6f4;

  --color-primary: #0c8f5c;
  --color-primary-hover: #0aa068;
  --color-primary-active: #076e46;
  --color-primary-highlight: #d3ecdf;

  --color-warning: #a6650a;
  --color-warning-hover: #c17a10;
  --color-warning-active: #855107;
  --color-warning-highlight: #f3e3c6;

  --color-error: #c62f3d;
  --color-error-hover: #d94656;
  --color-error-active: #a12331;
  --color-error-highlight: #f4d3d6;

  --color-blue: #0f7ea6;
  --color-blue-highlight: #d6ecf4;
  --color-purple: #6d3fc7;
  --color-purple-highlight: #e6dcf7;

  --shadow-sm: 0 1px 2px rgba(20, 40, 30, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 40, 30, 0.1);
  --shadow-lg: 0 20px 48px rgba(20, 40, 30, 0.14);
  --glow-primary: 0 0 24px rgba(12, 143, 92, 0.14);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg: #f2f6f4;
    --color-surface: #ffffff;
    --color-surface-2: #f8fbf9;
    --color-surface-offset: #edf3f0;
    --color-surface-dynamic: #e3ebe6;
    --color-divider: #dee8e3;
    --color-border: #cddcd5;
    --color-text: #0e1b16;
    --color-text-muted: #526059;
    --color-text-faint: #8a9a92;
    --color-text-inverse: #f2f6f4;
    --color-primary: #0c8f5c;
    --color-primary-hover: #0aa068;
    --color-primary-active: #076e46;
    --color-primary-highlight: #d3ecdf;
    --color-warning: #a6650a;
    --color-warning-highlight: #f3e3c6;
    --color-error: #c62f3d;
    --color-error-highlight: #f4d3d6;
    --color-blue: #0f7ea6;
    --color-purple: #6d3fc7;
    --shadow-sm: 0 1px 2px rgba(20, 40, 30, 0.06);
    --shadow-md: 0 8px 24px rgba(20, 40, 30, 0.1);
    --shadow-lg: 0 20px 48px rgba(20, 40, 30, 0.14);
    --glow-primary: 0 0 24px rgba(12, 143, 92, 0.14);
  }
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
  max-width: 640px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

h2.section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
}

.section-sub {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-divider);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  gap: var(--space-3) var(--space-6);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
  flex-shrink: 0;
  white-space: nowrap;
}

.brand svg {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.brand img.brand-mark {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

/* Small moniker riding alongside the wordmark. Inline (not a second line)
   so it never grows header height or disturbs the sticky-header math tuned
   elsewhere; hidden well before any header starts collapsing for space. */
.brand-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  /* No fixed negative margin: the concept pages override .brand's gap to
     var(--space-2) while the flagship uses var(--space-3), so a fixed
     offset tuned for one value pushes the middot prefix under the
     wordmark on the other. Let each page's own gap provide the spacing. */
}

.brand-tagline::before {
  content: '\00b7\0020';
}

/* Two-tier wordmark: "Brük" is the primary product name; "Ledger Vitals"
   rides directly beneath it as a visible, permanent second billing (not
   hidden at narrow widths like .brand-tagline is). Stacking vertically
   costs no horizontal space in the header row, and the header already
   measures its own real height for --scroll-pad, so a taller two-line
   lockup is accounted for automatically wherever it appears. */
.brand-lockup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  line-height: 1.05;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1em;
  color: var(--color-text);
}

.brand-sub {
  font-family: var(--font-body, var(--font-display));
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  white-space: nowrap;
}

/* Shared across the four full-bleed concept pages (Whale Reef, Aurora,
   The World Ledger, Coin Flow). Their intro copy and stats panel float
   over the live visualization, which on a small phone screen can eat the
   entire viewport and leave nothing of the actual art visible. This is
   the visible, permanent affordance for the tap-to-hide gesture wired up
   in each page's own JS (clicking the intro or panel enters ambient mode;
   any tap while ambient exits it again) — not just the small header icon. */
.overlay-hide-hint {
  /* Hidden by default — this hint only makes sense on the narrow viewport
     where the intro/panel become directly tappable (see each concept's own
     CSS, which flips this to display:flex at the same breakpoint it sets
     pointer-events:auto on the intro). On wider screens the intro and any
     stat panel are positioned independently with fixed offsets that assume
     a certain intro height, so an always-visible hint here silently grows
     the intro tall enough to collide with a panel below it. */
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  font-family: var(--font-body, var(--font-display));
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-faint);
  cursor: pointer;
}

.overlay-hide-hint svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.8;
}

/* Inside the flagship's embedded acts (loaded as ?embed=1 in an iframe),
   each concept's own enterAmbient() is a deliberate no-op -- ambient mode
   belongs to a standalone visit, not one panel of the scroll journey. The
   hint text would promise a tap gesture that silently does nothing there,
   so it must never render regardless of the embedded iframe's own width. */
html.lv-embedded .overlay-hide-hint {
  display: none !important;
}

@media (max-width: 1080px) {
  .brand-tagline { display: none; }
}

.brand .live-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
  border: 1px solid color-mix(in oklab, var(--color-primary) 40%, transparent);
  border-radius: var(--radius-full);
  padding: 0.15em 0.6em;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-primary) 60%, transparent);
  animation: pulse-ring 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Real disconnected state — the header badge must stop claiming "LIVE"
   the moment the stream actually drops, so it never reads as fabricated. */
.brand .live-badge.is-down {
  color: var(--color-warning);
  border-color: color-mix(in oklab, var(--color-warning) 40%, transparent);
}
.brand .live-badge.is-down .dot-pulse {
  background: var(--color-warning);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-warning) 60%, transparent);
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-primary) 55%, transparent);
  }
  70% {
    box-shadow: 0 0 0 8px color-mix(in oklab, var(--color-primary) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-primary) 0%, transparent);
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-links button.navlink {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
}
.nav-links button.navlink:hover {
  color: var(--color-text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-pills-bar {
  flex-basis: 100%;
  justify-content: center;
  order: 3;
}

.theme-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.theme-toggle:hover {
  color: var(--color-text);
  border-color: var(--color-primary);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.sound-toggle-wrap { display: inline-flex; }
.sound-cue {
  /* Fixed just below the sticky header, inside the guaranteed gap the
     hero itself already reserves there: .hero's own padding-top is
     clamp(var(--space-16) i.e. 64px, 10vw, ...), so there is ALWAYS a
     >=64px band directly under the header, on every act, before any real
     content starts — unlike a viewport corner, this band's position is
     driven by layout, not by viewport height, so it can't drift into a
     short-viewport hero CTA row the way a bottom-corner placement did
     (confirmed by measurement: bottom-left at a 375x812 viewport landed
     directly on the hero's "Watch it beat"/"Get early access" buttons).
     Paired with the scroll-dismissal fix below (app.js), the cue can only
     ever be visible during the untouched first screen, so it never needs
     to coexist with an embedded act's own top-left caption pill either —
     reaching Act II+ requires a scroll, which now dismisses the cue on
     first wheel/touch/key, before that content is ever in view. */
  position: fixed;
  top: calc(var(--scroll-pad, var(--space-16)) + 10px);
  bottom: auto;
  right: var(--space-4);
  left: auto;
  transform: none;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 7px 12px 7px 10px;
  border-radius: var(--radius-full);
  background: rgba(8, 14, 12, 0.92);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  color: #e4fff4;
  font-size: 12.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  animation: site-cue-in 600ms ease 900ms forwards;
  transition: opacity 400ms ease;
  z-index: 20;
  pointer-events: none;
}
.sound-cue svg { width: 14px; height: 14px; color: var(--color-primary); flex-shrink: 0; }
.sound-cue.is-hidden { opacity: 0 !important; }
@keyframes site-cue-in { to { opacity: 1; } }

.theme-toggle.is-on[data-kiosk-toggle] {
  color: #04140d;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.kiosk-toast {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  background: rgba(8, 14, 12, 0.94);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  color: #e4fff4;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
.kiosk-toast[hidden] { display: none; }
.kiosk-toast button {
  background: none;
  border: none;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 0.65em 1.3em;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary);
  color: #04140d;
  box-shadow: var(--glow-primary);
}
.btn-primary {
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), background var(--transition-interactive);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in oklab, var(--color-primary) 35%, transparent);
}
.btn-ghost {
  color: var(--color-text);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

@media (max-width: 1180px) {
  .nav-links {
    display: none;
  }
}

@media (max-width: 480px) {
  .site-header .wrap {
    padding-inline: var(--space-4);
    gap: var(--space-2);
  }
  .brand .live-badge {
    display: none;
  }
  .header-actions {
    gap: var(--space-2);
  }
  .header-actions .btn {
    padding: 0.6em 0.9em;
    font-size: var(--text-xs);
  }
  .theme-toggle {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  /* Still fixed just below the header (see base rule); just shrink to
     fit narrow screens and cap width so a long hint string wraps instead
     of reaching toward the nav pills on the left. */
  .sound-cue { right: var(--space-3); font-size: 11px; padding: 6px 10px 6px 9px; white-space: normal; max-width: 190px; text-align: left; }
  .site-pills { gap: var(--space-1); flex-basis: 100%; }
  .header-actions .btn.btn-primary {
    padding: 0.55em 0.7em;
    font-size: 10px;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding-top: clamp(var(--space-16), 10vw, var(--space-32));
  padding-bottom: var(--space-12);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in oklab, var(--color-primary) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--color-primary) 6%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black, transparent 75%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 720px;
  background:
    radial-gradient(38% 55% at 18% 20%, color-mix(in oklab, var(--color-primary) 30%, transparent), transparent 70%),
    radial-gradient(32% 48% at 82% 12%, color-mix(in oklab, var(--color-blue) 24%, transparent), transparent 70%),
    radial-gradient(30% 45% at 55% 55%, color-mix(in oklab, var(--color-purple) 16%, transparent), transparent 70%);
  filter: blur(10px);
  opacity: 0.8;
  animation: aurora-drift 16s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes aurora-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2%, 3%, 0) scale(1.06); }
}

.hero-inner {
  position: relative;
  display: grid;
  gap: var(--space-6);
  max-width: 760px;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--color-primary), var(--color-blue) 65%, var(--color-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.005em;
  margin-top: calc(var(--space-6) * -1);
  background: linear-gradient(100deg, var(--color-primary), var(--color-blue) 65%, var(--color-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
}

.hero-ctas {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}

.hero-meta {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.hero-meta span {
  color: var(--color-primary);
}

@media (max-width: 480px) {
  /* The sound-cue tooltip floats below the sticky header and would
     otherwise sit on top of the hero eyebrow line — the very first text
     a mobile visitor reads. Push the hero down just enough to clear it.
     --hero-safe-top is measured live in flagship.js from the tooltip's
     actual rendered height (it wraps to 2-3 lines depending on screen
     width), so the gap is always exactly as tall as needed and no
     taller — the 8.5rem literal here is only a pre-JS fallback for the
     first paint. Placed after the base .hero rule so it actually wins
     the cascade instead of being overridden by it. */
  .hero { padding-top: var(--hero-safe-top, 8.5rem); }
}

/* ==========================================================================
   Sound toggle
   ========================================================================== */

[data-sound-toggle] svg line {
  transition: opacity 150ms ease;
}

[data-sound-toggle].is-on svg line {
  opacity: 0;
}

[data-sound-toggle].is-on {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ==========================================================================
   How it works
   ========================================================================== */

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 860px) {
  .how-grid {
    grid-template-columns: 1fr;
  }
}

.how-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.how-card .num {
  font-family: var(--font-mono);
  color: var(--color-primary);
  font-size: var(--text-sm);
}

.how-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.how-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.sources-note {
  margin-top: var(--space-8);
  padding: var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.sources-note a {
  color: var(--color-primary);
}
.sources-note.sources-credits {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  border-style: solid;
  opacity: 0.85;
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

@media (max-width: 940px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

.price-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
}

.price-card.featured {
  border-color: var(--color-primary);
  box-shadow: var(--glow-primary);
}

.price-card .tier-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.price-card .featured-tag {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  background: var(--color-primary);
  color: #04140d;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.price-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

.price-features .roadmap-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.1em 0.55em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 0.5em;
  white-space: nowrap;
}

.price-amount {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
}
.price-amount .period {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

.price-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
}

.price-features li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.price-features svg {
  width: 15px;
  height: 15px;
  color: var(--color-primary);
  margin-top: 0.2em;
  flex-shrink: 0;
}

.waitlist-note {
  text-align: center;
  color: var(--color-text-faint);
  font-size: var(--text-sm);
  margin-top: var(--space-8);
  font-family: var(--font-mono);
}
.waitlist-note strong {
  color: var(--color-primary);
}

/* ==========================================================================
   Support (Ko-fi / XRP tipping)
   ========================================================================== */

.support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

@media (max-width: 940px) {
  .support-grid {
    grid-template-columns: 1fr;
  }
}

.support-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.support-card-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.support-card-head .tier-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.support-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

.support-card-copy {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.tip-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
}

.tip-amount-btn {
  min-width: 4.5rem;
  justify-content: center;
}

.tip-amount-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tip-amount-any {
  min-width: auto;
  padding-inline: var(--space-4);
}

.support-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.support-note a {
  color: var(--color-primary);
}

.xrp-tip-row {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.xrp-tip-qr {
  width: 108px;
  height: 108px;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 8px;
  flex-shrink: 0;
}

.xrp-tip-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.xrp-address-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  max-width: 100%;
}

.xrp-address-row code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text);
  overflow-wrap: anywhere;
  word-break: break-all;
  flex: 1;
}

.copy-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.25em 0.75em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.copy-btn:hover {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 560px) {
  .xrp-tip-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .xrp-address-row {
    max-width: 100%;
  }
}

/* ==========================================================================
   Modal
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, black 60%, transparent);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-4);
}
.modal-overlay.open {
  display: flex;
}

.modal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--color-text-muted);
}
.modal-close:hover {
  color: var(--color-text);
}

.modal-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.modal-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.field input {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.7em 0.9em;
  font-size: var(--text-sm);
}
.field input:focus-visible {
  border-color: var(--color-primary);
}

.form-status {
  font-size: var(--text-sm);
  min-height: 1.2em;
}
.form-status.ok {
  color: var(--color-primary);
}
.form-status.err {
  color: var(--color-error);
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-10);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-links {
  display: flex;
  gap: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.footer-links a {
  color: var(--color-text-muted);
}
.footer-links a:hover {
  color: var(--color-primary);
}

.footer-note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  max-width: 640px;
  margin-top: var(--space-4);
}

.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-6);
}

.footer-colophon {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  max-width: none;
}

/* ==========================================================================
   Utility
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: #04140d;
  padding: var(--space-2) var(--space-4);
  z-index: 200;
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* Site pills — the same 4 pills appear in every header, on every page,
   so visitors can jump straight to any view. Shared across all pages via
   this stylesheet (loaded on the monitor, Whale Reef, Aurora, and World
   Ledger pages alike) so the look is identical everywhere. */
.site-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.site-pill {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
  transition: var(--transition-interactive);
}
.site-pill:hover {
  color: var(--color-text);
  border-color: var(--color-primary);
}
.site-pill.is-current {
  color: #04140d;
  background: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 600;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 760px) {
  .site-pill { padding: var(--space-1) var(--space-3); font-size: 10px; }
}