/*
 * Wump landing page — v1 design-system CSS
 * Dark-first, DESIGN.md tokens, pass-1 primitives (hex badge, shimmer skeleton, chip soft-fill).
 * Light mode via prefers-color-scheme: light.
 * No external framework. Vanilla CSS. Static serve only.
 */

/* ─── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; overflow-x: hidden; }

/* ─── Design tokens — dark mode (default) ────────────────────────────────── */
:root {
  /* Surfaces */
  --wump-surface-0: #0B0D10;
  --wump-surface-1: #14171C;
  --wump-surface-2: #1C2026;
  /* Borders */
  --wump-border-subtle: #23272E;
  /* Text */
  --wump-text-primary: #E8EAED;
  --wump-text-secondary: #A0A6AD;
  --wump-text-tertiary: #838992; /* drift fix, addendum § 3.5 — matches shipped app .dark value */
  /* Wump purple — primary brand anchor (DESIGN.md § 1.1/§ 1.2, ratified 2026-05-04) */
  --wump-purple: #A259B5;
  --wump-purple-strong: #B87EC9;
  --wump-purple-soft: rgba(162, 89, 181, 0.16);
  --wump-purple-fg: #FFFFFF;
  /* Bitcoin orange — bounded action accent (verification affordance only) */
  --wump-accent-bitcoin: #F7931A;
  --wump-accent-bitcoin-soft: rgba(247, 147, 26, 0.12);
  /* State colours */
  --wump-state-success: #4ADE80;
  --wump-state-success-soft: rgba(74, 222, 128, 0.12);
  --wump-state-success-text: #4ADE80;
  --wump-state-warning: #FBBF24;
  --wump-state-warning-soft: rgba(251, 191, 36, 0.12);
  --wump-state-warning-text: #FBBF24;
  --wump-state-danger: #F87171;
  --wump-state-danger-soft: rgba(248, 113, 113, 0.12);
  --wump-state-danger-text: #F87171;
  /* Radius */
  --radius: 8px;
  --radius-lg: 16px;
}

/* ─── Light-mode mirror ───────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --wump-surface-0: #FFFFFF;
    --wump-surface-1: #F5F6F7;
    --wump-surface-2: #ECEEF0;
    --wump-border-subtle: #D8DADE;
    --wump-text-primary: #0B0D10;
    --wump-text-secondary: #4A5059;
    --wump-text-tertiary: #8A9099;
    --wump-purple: #6B1F7A;
    --wump-purple-strong: #571762;
    --wump-purple-soft: rgba(107, 31, 122, 0.10);
    --wump-purple-fg: #FFFFFF;
    --wump-accent-bitcoin: #F7931A; /* identical in both modes */
    --wump-accent-bitcoin-soft: rgba(247, 147, 26, 0.10);
    --wump-state-success: #16A34A;
    --wump-state-success-soft: rgba(22, 163, 74, 0.10);
    --wump-state-success-text: #16A34A;
    --wump-state-warning: #D97706;
    --wump-state-warning-soft: rgba(217, 119, 6, 0.10);
    --wump-state-warning-text: #D97706;
    --wump-state-danger: #DC2626;
    --wump-state-danger-soft: rgba(220, 38, 38, 0.10);
    --wump-state-danger-text: #DC2626;
  }
}

/* ─── Base ────────────────────────────────────────────────────────────────── */
body {
  background-color: var(--wump-surface-0);
  color: var(--wump-text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tabular numerals utility */
.font-tabular {
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}

/* Mono — for xpubs, txids, sat figures paired with fiat */
.font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  font-size: 0.8125rem; /* 13px */
  letter-spacing: 0.01em;
}

/* ─── Skip link ───────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--wump-accent-bitcoin);
  color: #fff;
  padding: 0.625rem 1.25rem;
  z-index: 10000;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; }

/* ─── Container system ────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 72rem; /* 1152px — max-w-6xl */
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.container--narrow {
  max-width: 45rem; /* 720px — T1's "Narrow" section measure (live check, safety, close) */
}
.container--wide {
  max-width: 80rem; /* 1280px — T1's "Wide" section measure (the delta, screenshots) */
}

/* ─── Typography helpers ──────────────────────────────────────────────────── */
.text-eyebrow {
  font-size: 0.6875rem; /* 11px — text-2xs */
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wump-text-tertiary);
}

/* ─── T2: section meta layout (left-gutter eyebrow, ≥1024px) ──────────────────
   Sections 3 (the delta), 4 (credibility), 6 (screenshots) and 7 (pricing)
   render as a fixed 200px meta gutter + content column at ≥1024px. Below
   that the gutter collapses above the heading; eyebrow stays left-aligned
   either way (T3 — nothing on this page centres except hero and close). */
.section-meta__gutter {
  margin-bottom: 1.5rem;
}
.section-meta__gutter .text-eyebrow {
  margin: 0;
}
.section-meta__sublabel {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--wump-text-secondary);
}
@media (min-width: 1024px) {
  .section-meta {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    align-items: start;
  }
  .section-meta__gutter {
    margin-bottom: 0;
    padding-top: 0.25rem; /* optical alignment to the first heading line */
  }
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.875rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.1s, transform 0.1s;
  outline: none;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--wump-accent-bitcoin), 0 0 0 4px var(--wump-surface-0);
}
.btn:active { transform: scale(0.97); }

/* Purple — the sign-up funnel, Wump's brand voice (DESIGN.md § 1.2 / v2 § 3.2).
   Used on every CTA except the one that touches the chain (see .btn--verify). */
.btn--primary {
  background-color: var(--wump-purple);
  color: var(--wump-purple-fg);
  transition: background-color 0.15s, transform 0.1s;
}
.btn--primary:hover { background-color: var(--wump-purple-strong); }

/* Orange — the one CTA per v2 § 3.2 that reaches the chain: the demo widget's
   "verify against blockchain" affordance. Never the funnel. */
.btn--verify {
  background-color: var(--wump-accent-bitcoin);
  color: #0B0D10; /* high-contrast on orange, same in both modes */
}
.btn--verify:hover { opacity: 0.9; }

/* Purple outline — the Pro trial CTA (v2 § 3.3): a no-card trial start is the
   funnel wearing a different label, not the paywall's most-committed action.
   Outline gives Free real hierarchy without a "Most Popular" badge.
   Uses --wump-purple-strong, not --wump-purple: on the pricing card's
   --wump-surface-1 background, --wump-purple text measures 3.96:1 (fails AA
   4.5:1 for a 15px semibold label); --wump-purple-strong measures 5.87:1. */
.btn--outline {
  background-color: transparent;
  border: 1px solid var(--wump-purple-strong);
  color: var(--wump-purple-strong);
  transition: background-color 0.15s;
}
.btn--outline:hover { background-color: var(--wump-purple-soft); }

.btn--ghost {
  background-color: transparent;
  color: var(--wump-text-secondary);
  padding-inline: 0.75rem;
}
.btn--ghost:hover { color: var(--wump-text-primary); }

/* ─── Focus rings (all interactive elements) ─────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--wump-accent-bitcoin);
  outline-offset: 2px;
}

/* ─── Nav ─────────────────────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--wump-surface-0);
  border-bottom: 1px solid var(--wump-border-subtle);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
}
.site-nav__wordmark {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--wump-text-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-nav__wordmark span { color: var(--wump-purple); } /* v2 § 3.4 — W mark is purple's territory */
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.site-nav__link {
  font-size: 0.875rem;
  color: var(--wump-text-secondary);
  text-decoration: none;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius);
  transition: color 0.15s;
}
.site-nav__link:hover { color: var(--wump-text-primary); }

/* ─── Section spacing (T1 — the step-down is the volume drop, in whitespace) ── */
/* Default rhythm: 64px mobile / 96px tablet / 128px desktop (v2 § 4.4). */
.section {
  padding-block: 4rem;
  border-top: 1px solid var(--wump-border-subtle); /* hairline block separator, T1 */
}
/* Hero and live check get the taller rhythm: 80 / 128 / 160 (v2 § 4.4). */
.section--hero,
.section--demo {
  padding-block: 5rem;
}
.section--hero {
  border-top: none; /* first section on the page — nav already carries a bottom hairline */
}
.section--demo {
  background-color: var(--wump-surface-0);
}
/* At most two --wump-surface-1 bands on the page (T1 criterion 2): credibility
   and screenshots. Their background shift is the boundary signal, so they
   drop the hairline rather than carry both. */
.section--alt {
  background-color: var(--wump-surface-1);
  border-top: none;
}

@media (min-width: 768px) {
  .section { padding-block: 6rem; }
  .section--hero,
  .section--demo { padding-block: 8rem; }
}
@media (min-width: 1024px) {
  .section { padding-block: 8rem; }
  .section--hero,
  .section--demo { padding-block: 10rem; }
}

/* ─── Section entrance animation ─────────────────────────────────────────── */
@keyframes wump-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-enter {
  animation: wump-enter 300ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-enter {
    animation: none;
  }
}

/* ─── Block 1: Hero ───────────────────────────────────────────────────────── */
.hero {
  text-align: center;
}
.hero__headline {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: clamp(2rem, 6vw, 3.75rem); /* text-4xl → text-6xl */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--wump-text-primary);
  max-width: 52rem;
  margin-inline: auto;
}
.hero__subheadline {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  color: var(--wump-text-secondary);
  max-width: 40rem;
  margin-inline: auto;
  margin-top: 1.25rem;
  line-height: 1.6;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
.hero__microcopy {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--wump-text-tertiary);
}

/* ─── Block 2: Demo widget ────────────────────────────────────────────────── */
/* T3 — only hero and close are centred. The eyebrow/heading here read left,
   like every other block's intro text. */
.demo-section__label {
  margin-bottom: 1.5rem;
}
.demo-section__above {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--wump-text-primary);
  margin-bottom: 1.5rem;
}
.demo-widget {
  max-width: 32rem; /* ~512px */
  margin-inline: auto;
  background-color: var(--wump-surface-1);
  border: 1px solid var(--wump-border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: relative;
}
/* T3's named exception: the widget stays centred as a single object below
   1024px. At 1024px+ it reads left, matching the section's left-aligned
   intro text — the object stops being "the thing in the middle of an empty
   page" and starts being "the first thing in a left-aligned column." */
@media (min-width: 1024px) {
  .demo-widget { margin-inline: 0; }
}

/* Hex badge in widget upper-right */
.demo-widget__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* xpub input area */
.demo-widget__input-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.demo-widget__label {
  font-size: 0.75rem;
  color: var(--wump-text-tertiary);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.demo-widget__xpub {
  background-color: var(--wump-surface-2);
  border: 1px solid var(--wump-border-subtle);
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
  color: var(--wump-text-secondary);
  word-break: break-all;
  font-size: 0.8125rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  line-height: 1.5;
}

.demo-widget__divider {
  height: 1px;
  background-color: var(--wump-border-subtle);
  margin-block: 1.25rem;
}

/* Balance reveal area */
.demo-widget__balance-area {
  margin-bottom: 1rem;
}
.demo-widget__balance-label {
  font-size: 0.75rem;
  color: var(--wump-text-tertiary);
  margin-bottom: 0.375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.demo-widget__balance-row {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.demo-widget__btc {
  font-family: 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wump-text-primary);
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.02em;
}
.demo-widget__sats {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8125rem;
  color: var(--wump-accent-bitcoin);
  font-feature-settings: 'tnum' 1;
}

/* Reconciliation chips */
.demo-widget__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ─── Skeleton shimmer (pass-1 § 5.1) ────────────────────────────────────── */
.skeleton {
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--wump-surface-1) 0%,
    var(--wump-surface-2) 50%,
    var(--wump-surface-1) 100%
  );
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}

@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: var(--wump-surface-1);
  }
}

.skeleton--text { height: 0.875rem; border-radius: 4px; }
.skeleton--btc  { height: 2rem;    border-radius: 4px; width: 10rem; }
.skeleton--sats { height: 0.875rem; border-radius: 4px; width: 7rem; }

/* Demo widget state: loading vs revealed vs done */
.demo-widget[data-state="loading"] .demo-balance-revealed   { display: none; }
.demo-widget[data-state="loading"] .demo-balance-skeleton   { display: block; }
.demo-widget[data-state="revealed"] .demo-balance-skeleton  { display: none; }
.demo-widget[data-state="revealed"] .demo-balance-revealed  { display: block; }
/* In "done" state, keep balance visible and skeleton hidden */
.demo-widget[data-state="done"] .demo-balance-skeleton      { display: none; }
.demo-widget[data-state="done"] .demo-balance-revealed      { display: block; }

/* Badge transition */
.demo-widget[data-state="loading"] .hex-badge { opacity: 0.3; }
.demo-widget[data-state="revealed"] .hex-badge,
.demo-widget[data-state="done"] .hex-badge {
  opacity: 1;
  transition: opacity 0.18s ease;
}

/* Demo captions — same T3 exception as the widget: centred as a group below
   1024px, left-aligned alongside it at 1024px+. */
.demo-captions {
  max-width: 32rem;
  margin-inline: auto;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 1024px) {
  .demo-captions { margin-inline: 0; }
}
.demo-caption {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--wump-text-secondary);
}
.demo-caption__num {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--wump-surface-2);
  border: 1px solid var(--wump-border-subtle);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--wump-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.0625rem;
}
.demo-caption__text { line-height: 1.5; }
.demo-caption__text strong { color: var(--wump-text-primary); font-weight: 500; }

.demo-footnote {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--wump-text-tertiary);
  font-style: italic;
}

/* Replay button */
.demo-widget__replay {
  display: none;
  margin-top: 1rem;
  width: 100%;
  background-color: transparent;
  border: 1px solid var(--wump-border-subtle);
  border-radius: var(--radius);
  color: var(--wump-text-secondary);
  padding: 0.5rem;
  font-size: 0.8125rem;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.demo-widget__replay:hover { color: var(--wump-text-primary); border-color: var(--wump-text-secondary); }
.demo-widget__replay:focus-visible {
  outline: 2px solid var(--wump-accent-bitcoin);
  outline-offset: 2px;
}
.demo-widget[data-state="done"] .demo-widget__replay { display: block; }

/* ─── Hex verification badge (pass-1 § 6.8) ──────────────────────────────── */
.hex-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 32×36px standalone size */
  width: 2rem;
  height: 2.25rem;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background-color 0.18s ease, opacity 0.18s ease;
}

.hex-badge--muted {
  background-color: var(--wump-surface-2);
}
.hex-badge--verified {
  background-color: var(--wump-accent-bitcoin);
}
.hex-badge--warn {
  background-color: var(--wump-state-warning);
}

/* Inner check SVG */
.hex-badge svg {
  width: 1rem;
  height: 1rem;
  color: var(--wump-surface-0);
  stroke-width: 2.5;
}

/* Inline 18×20 size (credibility row) */
.hex-badge--inline {
  width: 1.125rem;
  height: 1.25rem;
}
.hex-badge--inline svg {
  width: 0.625rem;
  height: 0.625rem;
  stroke-width: 3;
}

/* ─── Chip soft-fill (pass-1 § 5.1) ──────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  font-size: 0.6875rem; /* text-2xs */
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip svg {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  stroke-width: 2;
}

.chip--success {
  background-color: var(--wump-state-success-soft);
  color: var(--wump-state-success-text);
}
.chip--warning {
  background-color: var(--wump-state-warning-soft);
  color: var(--wump-state-warning-text);
}
.chip--danger {
  background-color: var(--wump-state-danger-soft);
  color: var(--wump-state-danger-text);
}
/* Not a result colour — "Only in Wump" is a normal state, not an error
   (v2 § 5.3). Neutral surface fill, not red. */
.chip--neutral {
  background-color: var(--wump-surface-2);
  color: var(--wump-text-secondary);
}
.chip--bitcoin {
  background-color: var(--wump-accent-bitcoin-soft);
  color: var(--wump-accent-bitcoin);
}

/* ─── Block 3: Credibility row (T6 — hairline-divided, not four cards) ─────── */
.credibility-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .credibility-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Four fields divided by rules, not four bordered cards — the chassis
   T6 replaces. 2×2 on mobile needs a cross of dividers; 4×1 desktop needs
   only vertical ones between cells. */
.cred-cell {
  /* min-width: 0 overrides the grid item's default auto minimum size, which
     otherwise equals the min-content width of its content — and cell 1's
     .cred-cell__artefact line is `white-space: nowrap` by design (it's
     truncated with an ellipsis, not wrapped). Without this, that unbreakable
     string forces its grid column wider than the viewport at mobile widths,
     pushing the whole page into horizontal overflow (root cause of the
     mobile "Why Wump" break). */
  min-width: 0;
  padding: 1.5rem 1.25rem;
  cursor: default;
}
@media (max-width: 767px) {
  .cred-cell:nth-child(2n) { border-left: 1px solid var(--wump-border-subtle); }
  .cred-cell:nth-child(n+3) { border-top: 1px solid var(--wump-border-subtle); }
}
@media (min-width: 768px) {
  .cred-cell:not(:first-child) { border-left: 1px solid var(--wump-border-subtle); }
}

.cred-cell__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--wump-text-primary);
  stroke-width: 1.5;
  margin-bottom: 0.75rem;
}

.cred-cell__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wump-text-primary);
  margin-bottom: 0.375rem;
}

.cred-cell__explainer {
  font-size: 0.8125rem;
  color: var(--wump-text-secondary);
  line-height: 1.5;
}

/* v2 § 5.4 density addition — the real artefact behind the claim, typeset
   as page type, never a screenshot. Truncated below 768px, full string at
   768px+ where the cell has room. */
.cred-cell__artefact {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: var(--wump-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .cred-cell__artefact {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-all;
  }
}

/* Expand affordance */
.cred-cell__expand-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  color: var(--wump-text-tertiary);
  padding: 0;
  transition: color 0.15s;
}
.cred-cell__expand-btn:hover { color: var(--wump-text-secondary); }
.cred-cell__expand-btn:focus-visible {
  outline: 2px solid var(--wump-accent-bitcoin);
  outline-offset: 2px;
  border-radius: 2px;
}

.cred-cell__expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  stroke-width: 1.5;
  transition: transform 0.2s ease;
}
.cred-cell__expand-btn[aria-expanded="true"] .cred-cell__expand-icon {
  transform: rotate(180deg);
}

.cred-cell__detail {
  display: none;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--wump-border-subtle);
  font-size: 0.8125rem;
  color: var(--wump-text-secondary);
  line-height: 1.6;
}
.cred-cell__detail[data-open="true"] { display: block; }

/* ─── Block 4: Reconciliation explainer ──────────────────────────────────── */
.reconcile-heading {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wump-text-primary);
  margin-bottom: 0.75rem;
}
.reconcile-body {
  font-size: 1rem;
  color: var(--wump-text-secondary);
  max-width: 38rem;
  line-height: 1.65;
  margin-bottom: 2rem;
}
.reconcile-body strong { color: var(--wump-text-primary); font-weight: 500; }

/* T5 — asymmetric 40/60 split: pitch + definition list on the left, the
   ledger strip promoted to the block's visual anchor on the right. Stacked
   full-width below 1024px, where the block's Wide (1280px) measure has no
   room to split. */
.delta-layout {
  display: block;
}
@media (min-width: 1024px) {
  .delta-layout {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 3rem;
    align-items: center;
  }
}

/* A definition list, because it is a list — not three equal cards. */
.delta-list {
  margin-top: 0.5rem;
}
.delta-list__row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-block: 1rem;
  border-top: 1px solid var(--wump-border-subtle);
}
.delta-list__row:first-child { border-top: none; padding-top: 0; }
@media (min-width: 640px) {
  .delta-list__row {
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
  }
  .delta-list__row dt { flex-shrink: 0; width: 8rem; }
}
.delta-list__row dd {
  font-size: 0.875rem;
  color: var(--wump-text-secondary);
  line-height: 1.5;
}

/* The mono ledger strip — the product's real output shown, not described. */
.ledger-strip {
  background-color: var(--wump-surface-1);
  border: 1px solid var(--wump-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ledger-strip__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--wump-border-subtle);
}
.ledger-strip__row:first-child { border-top: none; }
.ledger-strip__date {
  font-size: 0.8125rem;
  color: var(--wump-text-tertiary);
}
.ledger-strip__amount {
  font-size: 0.9375rem;
  text-align: right;
  color: var(--wump-text-primary);
}
@media (max-width: 767px) {
  .ledger-strip__row { grid-template-columns: 1fr auto; }
  .ledger-strip__date { display: none; }
}
.ledger-strip__disclosure {
  margin-top: 0.75rem;
  font-size: 0.6875rem;
  color: var(--wump-text-tertiary);
}

.reconcile-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--wump-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}
.reconcile-link:hover { color: var(--wump-text-primary); }

/* ─── Block 5: Pricing ────────────────────────────────────────────────────── */
.pricing-heading {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wump-text-primary);
  margin-bottom: 0.5rem;
}
.pricing-subheading {
  font-size: 1rem;
  color: var(--wump-text-secondary);
  margin-bottom: 2.5rem;
  max-width: 38rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 52rem;
}
@media (min-width: 640px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

.pricing-card {
  background-color: var(--wump-surface-1);
  border: 1px solid var(--wump-border-subtle);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .pricing-card { padding: 2.5rem; }
}

.pricing-card__tier {
  font-family: 'Inter', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--wump-text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}
.pricing-card__tagline {
  font-size: 0.8125rem;
  color: var(--wump-text-secondary);
  margin-bottom: 1.5rem;
}

.pricing-card__capabilities {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 2rem;
  flex: 1;
}
.pricing-card__cap {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--wump-text-primary);
  line-height: 1.5;
}
.pricing-card__cap-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  stroke-width: 2;
}
.pricing-card__cap-icon--check { color: var(--wump-state-success); }
.pricing-card__cap-icon--minus { color: var(--wump-text-tertiary); }

.pricing-card__cta { width: 100%; }

.pricing-card__trial-note {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--wump-text-secondary);
  line-height: 1.5;
}
.pricing-card__trial-note strong { font-weight: 600; }

/* ─── Block 6: Safety one-liner ──────────────────────────────────────────── */
.safety-card {
  max-width: 40rem;
  margin-inline: auto;
  background-color: var(--wump-surface-1);
  border: 1px solid var(--wump-border-subtle);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}
.safety-card__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--wump-text-secondary);
  stroke-width: 1.5;
  margin-top: 0.125rem;
}
.safety-card__text {
  font-size: 0.9375rem;
  color: var(--wump-text-primary);
  line-height: 1.6;
  flex: 1;
}
.safety-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--wump-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}
.safety-card__link:hover { color: var(--wump-text-primary); }

/* ─── Block 7: Screenshots row (T4 — lead-plus-three, built but HIDDEN) ─────
   Section carries the `hidden` HTML attribute per addendum P1 until real
   captures land (§ 7.1). The rules below are correct for when it unhides;
   there is nothing to see on the deployed page today. */
.screenshots-heading {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wump-text-primary);
  margin-bottom: 1.5rem;
}

.screenshots-row--split {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.screenshot-slot {
  background-color: var(--wump-surface-2);
  border: 1px solid var(--wump-border-subtle);
  border-radius: var(--radius);
}
.screenshot-slot--lead {
  flex: 0 0 55%;
  aspect-ratio: 3 / 4;
}
.screenshots-row--split__support-group {
  display: flex;
  gap: 1rem;
  flex: 1 1 auto;
  overflow: hidden; /* clips the third slot's trailing edge (T4) */
}
.screenshot-slot--support {
  flex: 0 0 30%;
  aspect-ratio: 4 / 5;
}
@media (max-width: 767px) {
  .screenshots-row--split { flex-direction: column; }
  .screenshot-slot--lead { flex-basis: auto; width: 100%; }
  .screenshots-row--split__support-group { overflow-x: auto; }
  .screenshot-slot--support { flex-basis: 45%; }
}

/* ─── Block 8: Footer ─────────────────────────────────────────────────────── */
.site-footer {
  background-color: var(--wump-surface-1);
  border-top: 1px solid var(--wump-border-subtle);
  padding-block: 3rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1fr repeat(3, auto);
    gap: 3rem;
    align-items: start;
  }
}

.site-footer__brand .wordmark {
  font-size: 1rem;
  font-weight: 700;
  color: var(--wump-text-primary);
  letter-spacing: -0.01em;
}
.site-footer__brand .wordmark span { color: var(--wump-purple); }
.site-footer__tagline {
  font-size: 0.8125rem;
  color: var(--wump-text-tertiary);
  margin-top: 0.375rem;
  font-style: italic;
}
.site-footer__micro {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: var(--wump-text-tertiary);
}

.site-footer__col-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wump-text-tertiary);
  margin-bottom: 0.75rem;
}

.site-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-footer__links a {
  font-size: 0.875rem;
  color: var(--wump-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer__links a:hover { color: var(--wump-text-primary); }
.site-footer__links-note {
  font-size: 0.8125rem;
  color: var(--wump-text-tertiary);
}

.site-footer__social {
  display: flex;
  gap: 0.875rem;
  margin-top: 0.25rem;
}
.site-footer__social a {
  color: var(--wump-text-tertiary);
  transition: color 0.15s;
  display: flex;
  align-items: center;
}
.site-footer__social a:hover { color: var(--wump-text-primary); }
.site-footer__social svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 1.5;
}

.site-footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wump-border-subtle);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.site-footer__copyright {
  font-size: 0.8125rem;
  color: var(--wump-text-tertiary);
}

/* ─── Utility helpers ─────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.text-center { text-align: center; }
.section-label {
  margin-bottom: 2.5rem;
}

/* ─── Demo animation keyframes ────────────────────────────────────────────── */
@keyframes badge-reveal {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}
@keyframes balance-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.demo-widget[data-state="revealed"] .demo-balance-revealed {
  animation: balance-fadein 0.2s ease both;
}
.demo-widget[data-state="revealed"] .hex-badge {
  animation: badge-reveal 0.18s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .demo-widget[data-state="revealed"] .demo-balance-revealed,
  .demo-widget[data-state="revealed"] .hex-badge {
    animation: none;
  }
  /* In reduced motion, render end-state immediately — handled in JS */
}

/* ─── Live-demo input form ────────────────────────────────────────────────── */

.demo-widget__input-group {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.demo-widget__xpub-input {
  flex: 1;
  background-color: var(--wump-surface-2);
  border: 1px solid var(--wump-border-subtle);
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
  color: var(--wump-text-primary);
  font-size: 0.8125rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  line-height: 1.5;
  transition: border-color 0.15s;
  min-width: 0; /* prevent overflow in flex */
}
.demo-widget__xpub-input::placeholder {
  color: var(--wump-text-tertiary);
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
}
.demo-widget__xpub-input:focus {
  outline: none;
  border-color: var(--wump-accent-bitcoin);
}
.demo-widget__xpub-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.demo-widget__submit {
  flex-shrink: 0;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
}
.demo-widget__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.demo-widget__xpub-display {
  margin-top: 0.5rem;
}

/* ─── Error state ─────────────────────────────────────────────────────────── */

.demo-balance-error {
  display: none;
  padding: 0.75rem 0;
}
.demo-widget[data-state="error"] .demo-balance-error   { display: block; }
.demo-widget[data-state="error"] .demo-balance-skeleton { display: none; }
.demo-widget[data-state="error"] .demo-balance-revealed { display: none; }
.demo-widget[data-state="error"] .demo-widget__replay   { display: none; }

.demo-error-msg {
  font-size: 0.875rem;
  color: var(--wump-state-danger, #EF4444);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.demo-widget__replay--error {
  display: block;
}