/* ==========================================================================
   PraizEx Website v2 — main.css
   Stage 0 scaffold: design-token layer only. Component/page styles land in
   later stages. Tokens mirror CLAUDE.md "Brand tokens" exactly — do not drift.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand colors --- */
  --color-red: #A41E22;
  --color-red-hover: #7E161A;
  --color-ink: #0B0B0B;
  --color-charcoal: #151515;
  --color-line-dark: #262626;
  --color-off-white: #FAFAF8;
  --color-white: #FFFFFF;

  /* --- Status colors --- */
  --color-success: #22C55E;
  --color-success-soft: #7CF3A0;
  --color-warning: #E8B84B;
  --color-error: #FF7B7B;

  /* --- WhatsApp (floating bubble only) --- */
  --color-whatsapp: #25D366;

  /* --- Semantic roles --- */
  --bg-page: var(--color-ink);
  --bg-surface: var(--color-charcoal);
  --border-color: var(--color-line-dark);
  --text-primary: var(--color-off-white);
  --text-muted: #A6A6A2;
  --accent: var(--color-red);
  --accent-hover: var(--color-red-hover);

  /* --- Font families --- */
  --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* DATA ONLY */

  /* --- Type scale (mobile-first, 1.25 major-third) --- */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.5625rem;  /* 25px */
  --text-2xl: 1.953rem;  /* ~31px */
  --text-3xl: 2.441rem;  /* ~39px */
  --text-4xl: 3.052rem;  /* ~49px */

  /* --- Font weights --- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Line heights --- */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

  /* --- Spacing scale (4px base) --- */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */

  /* --- Radii (per CLAUDE.md: 8 inputs · 10 buttons · 14-16 cards · 18-20 panels) --- */
  --radius-input: 8px;
  --radius-button: 10px;
  --radius-card: 14px;
  --radius-card-lg: 16px;
  --radius-panel: 18px;
  --radius-panel-lg: 20px;
  --radius-full: 999px;

  /* --- Borders (brand favours borders over shadows) --- */
  --border-width: 1px;
  --border: var(--border-width) solid var(--border-color);

  /* --- Layout --- */
  --container-max: 1120px;
  --container-pad: var(--space-4);

  /* --- Motion --- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* --- Z-index --- */
  --z-nav: 100;
  --z-whatsapp: 200;
  --z-modal: 300;
}

/* --------------------------------------------------------------------------
   2. Base reset (minimal; full base styles arrive with components)
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
}

/* Monospace strictly for data: rates, amounts, references, timestamps, labels. */
.data,
[data-mono] {
  font-family: var(--font-mono);
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   3. Accessibility
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-success-soft);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   4. Shared layout — header, footer, WhatsApp bubble
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--bg-page) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand__mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-input);
  background: var(--color-red);
  color: #fff;
  font-size: var(--text-base);
}
.brand__logo {
  display: block;
  height: 30px;
  width: auto;
}
.site-header__cta { display: none; }
@media (min-width: 720px) {
  .site-header__cta { display: inline-flex; gap: var(--space-3); }
}

.site-footer {
  border-top: var(--border);
  margin-top: var(--space-9);
  padding: var(--space-7) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.site-footer a { color: var(--text-muted); }

/* Floating WhatsApp bubble — the only place brand green appears */
.wa-bubble {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-whatsapp);
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-whatsapp);
  color: #fff;
  border: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-fast);
}
.wa-bubble:hover { transform: translateY(-2px); }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-button);
  border: var(--border);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
}
.btn--primary:not(:disabled):hover { background: var(--color-red-hover); border-color: var(--color-red-hover); }
.btn--whatsapp {
  background: var(--color-whatsapp);
  border-color: var(--color-whatsapp);
  color: #06331b;
}
.btn--whatsapp:not(:disabled):hover { filter: brightness(1.05); }
.btn--ghost:hover { border-color: var(--text-muted); }
.btn--block { width: 100%; }
.btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }

/* ==========================================================================
   6. Page hero
   ========================================================================== */
.page-hero { padding: var(--space-7) 0 var(--space-5); }
.page-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-red);
}
.page-hero h1 {
  font-size: var(--text-3xl);
  margin: var(--space-3) 0 var(--space-2);
  letter-spacing: -0.02em;
}
.page-hero p { color: var(--text-muted); max-width: 58ch; margin: 0; }

/* ==========================================================================
   7. Trade wizard
   ========================================================================== */
.wizard {
  --panel-pad: var(--space-5);
  background: var(--bg-surface);
  border: var(--border);
  border-radius: var(--radius-panel-lg);
  padding: var(--panel-pad);
  max-width: 560px;
}
@media (min-width: 720px) { .wizard { --panel-pad: var(--space-6); } }

/* Signature speech-bubble rate panel (tail included) */
.bubble-panel {
  position: relative;
  background: var(--color-ink);
  border: var(--border);
  border-radius: var(--radius-panel);
  padding: var(--space-5);
}
.bubble-panel::after {
  content: "";
  position: absolute;
  left: var(--space-6);
  bottom: -10px;
  width: 18px;
  height: 18px;
  background: var(--color-ink);
  border-right: var(--border);
  border-bottom: var(--border);
  transform: rotate(45deg);
}

.wizard__steps {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.wizard__steps li { display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.wizard__steps li[aria-current="true"] { color: var(--text-primary); }
.wizard__steps li[data-done="true"] { color: var(--color-success); }

.wizard__step { display: none; }
.wizard__step.is-active { display: block; }
.wizard__step > * + * { margin-top: var(--space-4); }

.field { display: block; }
.field > label, .field-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}
.input, .select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--color-ink);
  border: var(--border);
  border-radius: var(--radius-input);
  padding: var(--space-3);
}
.input--mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.input:focus, .select:focus { border-color: var(--text-muted); }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.field__hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }

/* Direction toggle (segmented) */
.segmented {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: var(--color-ink);
  border: var(--border);
  border-radius: var(--radius-button);
}
.segmented button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
  border-radius: 7px;
  cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--color-red); color: #fff; }
/* Semantic direction cue: Sell = red, Buy = green (readable white label on both) */
.segmented button[data-dir="sell"][aria-pressed="true"] { background: var(--color-red); color: #fff; }
.segmented button[data-dir="buy"][aria-pressed="true"]  { background: var(--color-success); color: #fff; }

/* Coin picker */
.coin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
@media (min-width: 560px) { .coin-grid { grid-template-columns: repeat(3, 1fr); } }
.coin-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: var(--space-3);
  background: var(--color-ink);
  border: var(--border);
  border-radius: var(--radius-card);
  cursor: pointer;
  color: var(--text-primary);
}
.coin-chip:hover { border-color: var(--text-muted); }
.coin-chip[aria-pressed="true"] { border-color: var(--color-red); box-shadow: inset 0 0 0 1px var(--color-red); }
.coin-chip__coin { font-family: var(--font-display); font-weight: var(--weight-semibold); }
.coin-chip__net { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.coin-chip__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-success);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Either-side amount */
.amount-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 480px) { .amount-row { grid-template-columns: 1fr auto 1fr; align-items: end; } }
.amount-row__swap {
  display: grid; place-items: center;
  color: var(--text-muted);
  padding-bottom: var(--space-3);
}

/* Wise-style breakdown */
.breakdown { font-family: var(--font-mono); font-size: var(--text-sm); }
.breakdown__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  color: var(--text-muted);
}
.breakdown__row--total {
  color: var(--text-primary);
  font-size: var(--text-lg);
  border-top: var(--border);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
}
.breakdown__row--total .breakdown__val { font-weight: var(--weight-bold); }
.breakdown__val { color: var(--text-primary); }
.breakdown__updated { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }
.breakdown__updated[data-stale="true"] { color: var(--color-warning); }

/* Notices */
.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  border: var(--border);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.notice__icon { flex: 0 0 auto; margin-top: 2px; }
.notice--info { border-color: var(--color-line-dark); }
.notice--warning { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 8%, transparent); }
.notice--error { border-color: var(--color-error); background: color-mix(in srgb, var(--color-error) 8%, transparent); }
.notice--success { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 8%, transparent); }

/* OTC upsell */
.otc-upsell {
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
}
.otc-upsell h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }

/* Bank resolve states */
.resolve-status { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); min-height: 1.5em; }
.resolve-status[data-state="resolving"] { color: var(--text-muted); }
.resolve-status[data-state="verified"] { color: var(--color-success); }
.resolve-status[data-state="failed"] { color: var(--color-warning); }
.spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: pzx-spin 0.7s linear infinite; vertical-align: -1px;
}
@keyframes pzx-spin { to { transform: rotate(360deg); } }

/* Deposit / countdown / QR */
.trade-ref {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.countdown { font-family: var(--font-mono); font-size: var(--text-xl); }
.countdown[data-expired="true"] { color: var(--color-error); }
.qr {
  width: 180px; height: 180px;
  background: #fff; padding: var(--space-2);
  border-radius: var(--radius-card);
}
.qr svg { display: block; width: 100%; height: 100%; }
.address-box {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-sm);
  word-break: break-all;
  background: var(--color-ink); border: var(--border);
  border-radius: var(--radius-input); padding: var(--space-3);
}
.copy-btn { flex: 0 0 auto; }
.copy-btn[data-copied="true"] { color: var(--color-success); border-color: var(--color-success); }

/* Reference table */
.ref-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ref-table th, .ref-table td { text-align: left; padding: var(--space-3); border-bottom: var(--border); }
.ref-table th { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.ref-table td.data, .ref-table td .data { font-family: var(--font-mono); }
.ref-table caption { text-align: left; color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }

/* Security / trust module */
.trust-grid { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
.trust-card {
  border: var(--border); border-radius: var(--radius-card); padding: var(--space-4);
}
.trust-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); display: flex; gap: var(--space-2); align-items: center; }
.trust-card p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

/* Section rhythm */
.section { padding: var(--space-7) 0; }
.section > h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.section__lead { color: var(--text-muted); margin: 0 0 var(--space-5); max-width: 60ch; }

/* Modal (echo-confirm) */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: none; place-items: center;
  background: rgba(0, 0, 0, 0.6); padding: var(--space-4);
}
.modal.is-open { display: grid; }
.modal__panel {
  background: var(--bg-surface); border: var(--border);
  border-radius: var(--radius-panel); padding: var(--space-6);
  max-width: 420px; width: 100%;
}
.echo-chars { font-family: var(--font-mono); font-size: var(--text-xl); }
.echo-chars strong { color: var(--color-success); }

/* Utilities */
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

/* ==========================================================================
   Design System v1.0 — LOCKED (per DESIGN-SYSTEM.md)
   New token layer (globally available so pages inherit it as they're restyled)
   plus the homepage visual language, scoped under `body.paper` and new component
   classes so already-shipped dark pages are unaffected until their own pass.
   ========================================================================== */
:root {
  /* Design-system palette */
  --red: #B4181D;
  --red-br: #D8352F;
  --red-deep: #8E1418;
  --ink: #0B0B0B;      /* base ink — used for text and the dark footer background */
  --white: #FFFFFF;
  --charcoal: #141414;
  --paper: #FAFAF7;
  --sand: #F0ECE2;
  --line: #EAE7DF;
  --muted-warm: #6B665C;
  --green: #1E9E6A;
  --green-deep: #17754F; /* deeper green for text/contrast on light */
  /* coin brand colors */
  --coin-btc: #F7931A;
  --coin-eth: #627EEA;
  --coin-usdt: #26A17B;
  --coin-usdc: #2775CA;
  --coin-bnb: #F3BA2F;
  --coin-sol: #9945FF;
  --coin-trx: #EF0027;
  --radius-ds: 11px;
}

/* --------------------------------------------------------------------------
   Homepage base + shared-shell overrides (scoped to .paper only)
   -------------------------------------------------------------------------- */
body.paper {
  background: var(--paper);
  color: var(--ink);
}
.paper ::selection { background: var(--red); color: #fff; }

.paper .site-header {
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  border-bottom: 1px solid var(--line);
}
.paper .brand { color: var(--ink); }
.paper .brand__mark { background: var(--red); }
.paper .site-header__cta a.btn--ghost { color: var(--ink); border-color: var(--line); }
.paper .site-header__cta a.btn--ghost:hover { border-color: var(--muted-warm); }

.paper .btn { border-radius: var(--radius-ds); font-weight: var(--weight-semibold); }
.paper .btn--primary { background: var(--red); border-color: var(--red); color: #fff; }
.paper .btn--primary:hover { background: var(--red-deep); border-color: var(--red-deep); }
.paper .btn--ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.paper .btn--ink:hover { background: var(--charcoal); }
.paper .btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.paper .btn--ghost:hover { border-color: var(--ink); }

.paper .container { max-width: 1120px; }
.paper h1, .paper h2, .paper h3 { color: var(--ink); letter-spacing: -0.02em; }
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--red);
  margin: 0;
}
.ds-section { padding: var(--space-8) 0; }
.ds-section__head { max-width: 60ch; margin: 0 0 var(--space-6); }
.ds-section h2 { font-size: clamp(1.6rem, 5vw, 1.9rem); margin: var(--space-2) 0 var(--space-3); font-weight: var(--weight-bold); }
.ds-section__head p { color: var(--muted-warm); margin: 0; }
.ds-num { font-family: var(--font-mono); }
.paper em { font-style: normal; color: var(--red); }

/* --------------------------------------------------------------------------
   1. Diagonal red-split hero
   -------------------------------------------------------------------------- */
.hp-hero { position: relative; background: var(--paper); overflow: hidden; }
.hp-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-6);
  /* keep the shared .container horizontal inset; only set vertical padding here */
  padding-block: var(--space-7) var(--space-8);
}
.hp-hero__content { max-width: 34rem; }
.hp-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 8vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: var(--space-3) 0 var(--space-4);
}
.hp-hero__lead { color: var(--muted-warm); font-size: var(--text-lg); margin: 0 0 var(--space-5); max-width: 32rem; }
.hp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hp-hero__note { margin-top: var(--space-5); color: var(--muted-warm); font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-2); }

/* Red panel: block on mobile, absolute diagonal on desktop */
.hp-hero__panel {
  position: relative;
  background: var(--red);
  border-radius: var(--radius-panel);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hp-hero__panel-label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.7); margin: 0 0 var(--space-1); }

.rate-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  color: #fff;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.rate-card:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.rate-card__icon {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
}
.rate-card__body { flex: 1; min-width: 0; }
.rate-card__name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.rate-card__net { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.7); }
.rate-card__price { font-family: var(--font-mono); font-weight: 500; text-align: right; }
.rate-card__chg { font-family: var(--font-mono); font-size: var(--text-xs); text-align: right; }
.rate-card__chg[data-dir="up"] { color: var(--color-success-soft); }
.rate-card__chg[data-dir="down"] { color: var(--color-error); }

@media (min-width: 880px) {
  .hp-hero__grid { grid-template-columns: 1fr 1fr; align-items: center; min-height: 30rem; padding-block: var(--space-9); }
  .hp-hero__panel {
    position: absolute;
    inset: 0 0 0 auto;
    width: 56%;
    border-radius: 0;
    justify-content: center;
    padding: var(--space-7) var(--space-6) var(--space-7) var(--space-9);
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
  }
  .hp-hero__panel .hp-hero__panel-inner { max-width: 22rem; margin-left: auto; width: 100%; display: flex; flex-direction: column; gap: var(--space-3); }
  .hp-hero__content { position: relative; z-index: 2; }
}
@media (max-width: 879px) {
  .hp-hero__panel .hp-hero__panel-inner { display: flex; flex-direction: column; gap: var(--space-3); }
}

/* --------------------------------------------------------------------------
   2. Dark ticker
   -------------------------------------------------------------------------- */
.ticker { background: var(--ink); color: var(--paper); border-block: 1px solid var(--charcoal); }
.ticker__track {
  display: flex; gap: var(--space-6);
  padding: var(--space-3) var(--container-pad);
  overflow-x: auto; scrollbar-width: none;
  font-family: var(--font-mono); font-size: var(--text-sm);
  white-space: nowrap;
}
.ticker__track::-webkit-scrollbar { display: none; }
.ticker__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.ticker__coin { color: #fff; font-weight: 500; }
.ticker__val { color: rgba(255,255,255,0.75); }
.ticker__val b { color: #fff; font-weight: 500; }
.ticker__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }

/* --------------------------------------------------------------------------
   3. Supported assets row + Order-a-coin
   -------------------------------------------------------------------------- */
.assets { background: #fff; border-bottom: 1px solid var(--line); }
.assets__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); padding: var(--space-6) 0; }
.assets__label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-warm); }
.assets__list { display: flex; flex-wrap: wrap; gap: var(--space-4); flex: 1; }
.asset-coin { display: inline-flex; align-items: center; gap: var(--space-2); }
.asset-coin__dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 12px; }
.asset-coin__name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.order-coin__panel { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   4. 3-step cards with ghost numbers
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-card-lg); padding: var(--space-5);
}
.step-card__ghost {
  position: absolute; top: -0.4rem; right: 0.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 5.5rem;
  color: var(--sand); line-height: 1; z-index: 0; user-select: none;
}
.step-card__icon {
  position: relative; z-index: 1;
  width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center; background: var(--red); color: #fff;
  margin-bottom: var(--space-3);
}
.step-card h3 { position: relative; z-index: 1; font-family: var(--font-display); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
.step-card p { position: relative; z-index: 1; color: var(--muted-warm); margin: 0; font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   5. Product cards (one flipped red)
   -------------------------------------------------------------------------- */
.products { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .products { grid-template-columns: repeat(3, 1fr); } }
.product-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-card-lg); padding: var(--space-5);
  text-decoration: none; color: var(--ink);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.product-card:hover { transform: translateY(-2px); border-color: var(--muted-warm); }
.product-card__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-warm); }
.product-card h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); margin: 0; }
.product-card p { color: var(--muted-warm); font-size: var(--text-sm); margin: 0; flex: 1; }
.product-card__arrow { color: var(--red); display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); font-size: var(--text-sm); margin-top: var(--space-2); }
.product-card--feature { background: var(--red); border-color: var(--red); color: #fff; }
.product-card--feature .product-card__eyebrow { color: rgba(255,255,255,0.7); }
.product-card--feature p { color: rgba(255,255,255,0.85); }
.product-card--feature .product-card__arrow { color: #fff; }
.product-card--feature:hover { border-color: #fff; }

/* --------------------------------------------------------------------------
   6. Red savings band
   -------------------------------------------------------------------------- */
.savings-band { position: relative; overflow: hidden; background: var(--red); color: #fff; }
.savings-band__circle { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); }
.savings-band__circle--a { width: 320px; height: 320px; top: -120px; right: -80px; }
.savings-band__circle--b { width: 200px; height: 200px; bottom: -100px; left: -60px; background: rgba(255,255,255,0.04); border: none; }
.savings-band__inner { position: relative; z-index: 1; padding-block: var(--space-8); max-width: 42rem; }
.savings-band h2 { color: #fff; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(1.7rem, 5vw, 2.1rem); margin: var(--space-2) 0 var(--space-3); }
.savings-band__lead { color: rgba(255,255,255,0.9); margin: 0 0 var(--space-5); }
.savings-band .ds-eyebrow { color: rgba(255,255,255,0.8); }
.savings-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.savings-chip { display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-full); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.savings-band .btn--paper { background: #fff; color: var(--red); border-color: #fff; }
.savings-band .btn--paper:hover { background: var(--paper); }

/* --------------------------------------------------------------------------
   7. Iron Hill partner card
   -------------------------------------------------------------------------- */
.partner-card {
  display: grid; gap: var(--space-4);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-panel); padding: var(--space-6);
}
@media (min-width: 720px) { .partner-card { grid-template-columns: auto 1fr; align-items: center; } }
.partner-seal {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--green) 12%, #fff); color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 30%, #fff);
}
.partner-card h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
.partner-card p { color: var(--muted-warm); margin: 0; }

/* --------------------------------------------------------------------------
   8. Trust chips + testimonial placeholder
   -------------------------------------------------------------------------- */
.trust-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.trust-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-full); padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.trust-chip svg { color: var(--green); }
.testimonial-slot {
  border: 1px dashed var(--line); border-radius: var(--radius-card-lg);
  padding: var(--space-6); text-align: center; color: var(--muted-warm);
  background: color-mix(in srgb, var(--sand) 40%, #fff);
}

/* --------------------------------------------------------------------------
   9. Dark footer (homepage)
   -------------------------------------------------------------------------- */
.paper .site-footer { background: var(--ink); color: rgba(255,255,255,0.7); border-top: none; }
.hp-footer__grid { display: grid; gap: var(--space-6); padding: var(--space-8) 0 var(--space-6); }
@media (min-width: 720px) { .hp-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.hp-footer h4 { color: #fff; font-family: var(--font-display); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 var(--space-3); }
.hp-footer a { color: rgba(255,255,255,0.7); text-decoration: none; display: block; padding: var(--space-1) 0; }
.hp-footer a:hover { color: #fff; }
.hp-footer__brand .brand { color: #fff; }
.hp-footer__brand p { color: rgba(255,255,255,0.6); font-size: var(--text-sm); max-width: 30ch; }
.online-chip { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: rgba(255,255,255,0.8); border: 1px solid var(--charcoal); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); }
.online-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.hp-footer__bottom { border-top: 1px solid var(--charcoal); padding: var(--space-4) 0; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-xs); color: rgba(255,255,255,0.55); }

/* Gentle live pulse on rate dots — the site's heartbeat (scale + opacity).
   Auto-disabled by the global prefers-reduced-motion block above. */
@keyframes ds-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.62); } }
.ticker__dot, .online-chip .dot, .rate-live-dot { animation: ds-pulse 2s ease-in-out infinite; transform-origin: center; }
.rate-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success-soft); display: inline-block; }

/* Homepage form controls (light) */
.paper .input, .paper .select {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius-input);
}
.paper .input:focus, .paper .select:focus { border-color: var(--muted-warm); outline-color: var(--red); }
.paper .field > label, .paper .field-label { color: var(--ink); }
.paper .field__hint { color: var(--muted-warm); }
.paper .btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }

/* ==========================================================================
   Design System v1.0 — interior page components (light theme, `.paper` scope)
   Light-restyles the wizard/product component classes so any page with
   class="paper" shares the homepage's clean+bold+red look. Presentation only;
   markup/behaviour unchanged. (Dark base + these classes stay as-is on the
   pages not yet restyled.)
   ========================================================================== */

/* Page hero (interior) — bold Space Grotesk, one red word, subtle diagonal accent */
.paper .page-hero { position: relative; overflow: hidden; }
.paper .page-hero__eyebrow { color: var(--red); }
.paper .page-hero h1 {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(1.9rem, 6vw, 2.9rem); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--ink);
}
.paper .page-hero > p { color: var(--muted-warm); }
.paper .page-hero::before {
  content: ""; position: absolute; top: -30%; right: -6%; width: 42%; height: 150%;
  background: var(--red); opacity: 0.06; transform: rotate(12deg);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); z-index: 0; pointer-events: none;
}
.paper .page-hero > * { position: relative; z-index: 1; }

/* Sections */
.paper .section > h2 { color: var(--ink); font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.paper .section__lead { color: var(--muted-warm); }

/* Panels / cards → white on paper */
.paper .wizard { background: #fff; border: 1px solid var(--line); }
.paper .bubble-panel { background: #fff; border: 1px solid var(--line); }
.paper .bubble-panel::after { background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.paper .trust-card { background: #fff; border: 1px solid var(--line); }
.paper .trust-card h3 { color: var(--ink); }
.paper .trust-card p { color: var(--muted-warm); }
.paper .trust-card a { color: var(--red); }

/* Direction toggle — Sell = red, Buy = green (semantic buy/sell cue) */
.paper .segmented { background: var(--sand); border: 1px solid var(--line); }
.paper .segmented button { color: var(--muted-warm); }
.paper .segmented button[aria-pressed="true"] { background: var(--red); color: #fff; }
.paper .segmented button[data-dir="sell"][aria-pressed="true"] { background: var(--red); color: #fff; }
.paper .segmented button[data-dir="buy"][aria-pressed="true"]  { background: var(--green); color: #fff; }

/* Coin picker chips */
.paper .coin-chip { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.paper .coin-chip:hover { border-color: var(--muted-warm); }
.paper .coin-chip[aria-pressed="true"] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); background: color-mix(in srgb, var(--red) 5%, #fff); }
.paper .coin-chip__net { color: var(--muted-warm); }
.paper .coin-chip__tag { color: var(--green); }

/* Amount row */
.paper .amount-row__swap { color: var(--muted-warm); }

/* Wise-style breakdown */
.paper .breakdown__row { color: var(--muted-warm); }
.paper .breakdown__val { color: var(--ink); }
.paper .breakdown__row--total { color: var(--ink); border-top: 1px solid var(--line); }
.paper .breakdown__updated { color: var(--muted-warm); }
.paper .breakdown__updated[data-stale="true"] { color: #9A6A00; }

/* Notices — readable ink text on light tinted backgrounds */
.paper .notice { color: var(--ink); border-color: var(--line); }
.paper .notice--info { border-color: var(--line); background: color-mix(in srgb, var(--sand) 45%, #fff); }
.paper .notice--warning { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, #fff); }
.paper .notice--error { border-color: var(--red); background: color-mix(in srgb, var(--red) 7%, #fff); }
.paper .notice--success { border-color: var(--green); background: color-mix(in srgb, var(--green) 9%, #fff); }

/* OTC upsell */
.paper .otc-upsell { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, #fff); }

/* Bank / address resolve states */
.paper .resolve-status[data-state="resolving"] { color: var(--muted-warm); }
.paper .resolve-status[data-state="verified"] { color: var(--green); }
.paper .resolve-status[data-state="failed"] { color: #9A6A00; }

/* Reference + countdown (Feature 5: prominent reference) */
.paper .trade-ref { color: var(--red); font-weight: 500; }
.paper .countdown { color: var(--red); }
.paper .countdown[data-expired="true"] { color: var(--red-deep); }

/* Deposit address + copy */
.paper .address-box { background: var(--sand); border: 1px solid var(--line); color: var(--ink); }
.paper .copy-btn { border-color: var(--line); color: var(--ink); }
.paper .copy-btn[data-copied="true"] { color: var(--green); border-color: var(--green); }

/* Reference table */
.paper .ref-table th, .paper .ref-table td { border-bottom: 1px solid var(--line); }
.paper .ref-table th { color: var(--muted-warm); }
.paper .ref-table td { color: var(--ink); }
.paper .ref-table caption { color: var(--muted-warm); }

/* Echo-confirm modal */
.paper .modal__panel { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.paper .modal__panel h2 { color: var(--ink); }
.paper .echo-chars strong { color: var(--green); }

/* Feature 5: trade-reference callout (crypto generated-trade step) */
.paper .ref-callout {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  background: color-mix(in srgb, var(--red) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--red) 25%, var(--line));
  border-radius: var(--radius-card); padding: var(--space-4);
}
.paper .ref-callout .trade-ref { font-size: var(--text-2xl); }
.paper .ref-callout__hint { color: var(--muted-warm); font-size: var(--text-sm); margin: 0; max-width: 28ch; }

/* Iron Hill partner highlight (BDC) — green credential accent */
.paper .partner-highlight { border-left: 4px solid var(--green); }

/* Interior dark footer (simple .site-footer markup) */
.paper .site-footer { background: var(--ink); color: rgba(255,255,255,0.62); border-top: none; }
.paper .site-footer a { color: rgba(255,255,255,0.72); }
.paper .site-footer a:hover { color: #fff; }

/* ===================== FAQ accordion (faqs.html) ===================== */
.faq-group { margin-bottom: var(--space-6); }
.faq-group__title {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  letter-spacing: -0.02em; margin: 0 0 var(--space-4);
}
.faq {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: #fff; margin-bottom: var(--space-3); overflow: hidden;
}
.faq > summary {
  list-style: none; cursor: pointer; padding: var(--space-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); font-weight: 600; color: var(--ink);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.faq > summary:hover { background: color-mix(in srgb, var(--sand) 45%, #fff); }
.faq__chev {
  flex: 0 0 auto; color: var(--red); transition: transform 0.2s ease;
}
.faq[open] > summary .faq__chev { transform: rotate(180deg); }
.faq__body {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--muted-warm); max-width: 68ch;
}
.faq__body p { margin: 0 0 var(--space-3); }
.faq__body p:last-child { margin-bottom: 0; }
.faq__body a { color: var(--red); }
.faq__body strong { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .faq__chev { transition: none; } }

/* Contact channel cards */
.contact-card {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: #fff; padding: var(--space-5); text-align: center;
}
.contact-card__icon {
  display: inline-flex; margin-bottom: var(--space-3); color: var(--red);
}
.contact-card--wa .contact-card__icon { color: var(--color-whatsapp, #25D366); }
.contact-card h3 { margin: 0 0 var(--space-2); color: var(--ink); }
.contact-card p { color: var(--muted-warm); margin: 0 0 var(--space-4); }

/* ===================== Legal document layout (terms / privacy / dispute) ===================== */
.legal-hero { padding: var(--space-7) 0 var(--space-4); }
.legal-hero__eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--red); margin: 0 0 var(--space-3);
}
.legal-hero h1 {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  letter-spacing: -0.02em; margin: 0 0 var(--space-3);
}
.legal-hero h1 em { color: var(--red); font-style: normal; }
.legal-hero__meta {
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--muted-warm); margin: 0;
}

/* Draft banner — must be unmistakable */
.draft-banner {
  display: flex; gap: var(--space-3); align-items: flex-start;
  border: 2px solid var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 14%, #fff);
  border-radius: var(--radius-ds);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-7); max-width: 74ch;
}
.draft-banner__icon { flex: 0 0 auto; color: #9A6A00; margin-top: 2px; }
.draft-banner__text strong { display: block; color: var(--ink); font-size: var(--text-lg); margin-bottom: 2px; }
.draft-banner__text p { margin: 0; color: #5C4A18; line-height: 1.6; }

/* Article body */
.legal { max-width: 74ch; margin-inline: auto; }
.legal__lead { font-size: var(--text-lg); color: var(--muted-warm); line-height: 1.7; margin: 0 0 var(--space-6); }
.legal__section { margin-bottom: var(--space-7); scroll-margin-top: var(--space-6); }
.legal__section:last-child { margin-bottom: 0; }
.legal h2 {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--ink);
  margin: 0 0 var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.legal__num { color: var(--red); font-family: var(--font-mono); font-size: 0.72em; margin-right: var(--space-2); font-weight: var(--weight-medium); }
.legal h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink); margin: var(--space-5) 0 var(--space-2); }
.legal p, .legal li { color: #2B2925; line-height: 1.8; font-size: var(--text-base); }
.legal p { margin: 0 0 var(--space-4); }
.legal ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.legal li { margin-bottom: var(--space-2); }
.legal strong { color: var(--ink); font-weight: var(--weight-semibold); }
.legal a { color: var(--red); }

/* On-this-page table of contents */
.legal-toc {
  border: 1px solid var(--line); background: color-mix(in srgb, var(--sand) 40%, #fff);
  border-radius: var(--radius-ds); padding: var(--space-5);
  margin: 0 0 var(--space-7); max-width: 74ch;
}
.legal-toc h2 {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted-warm); font-weight: var(--weight-semibold);
  border: 0; padding: 0; margin: 0 0 var(--space-3);
}
.legal-toc ol { margin: 0; padding-left: var(--space-5); columns: 2; column-gap: var(--space-6); }
.legal-toc li { margin-bottom: var(--space-2); line-height: 1.5; break-inside: avoid; }
.legal-toc a { color: var(--ink); text-decoration: none; }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--red); text-decoration: underline; }
@media (max-width: 600px) { .legal-toc ol { columns: 1; } }

/* Closing note */
.legal-note {
  border-top: 1px solid var(--line); margin-top: var(--space-7); padding-top: var(--space-5);
  color: var(--muted-warm); font-size: var(--text-sm); line-height: 1.7; max-width: 74ch;
}

/* ==========================================================================
   Pass B — Motion & interaction layer (presentation only)
   Subtle, fast micro-interactions. Transform/opacity only (GPU-friendly).
   ALL motion here is auto-neutralised by the global prefers-reduced-motion
   block near the top of this file (transition/animation durations forced to
   ~0). Nothing here changes logic, pricing, or content.
   ========================================================================== */
:root {
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-micro: 140ms;
  --shadow-btn-hover: 0 2px 8px rgba(20, 20, 20, 0.10);
  --shadow-card-hover: 0 8px 24px rgba(20, 20, 20, 0.09);
}

/* 1. Buttons — hover lift + soft shadow, active press. Never lift when disabled. */
.btn {
  transition: background var(--transition-fast), border-color var(--transition-fast),
    transform var(--motion-micro) var(--ease-out-soft),
    box-shadow var(--motion-micro) var(--ease-out-soft), filter var(--transition-fast);
}
.btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow-btn-hover); }
.btn:not(:disabled):active { transform: translateY(0) scale(0.98); box-shadow: none; transition-duration: 90ms; }

/* 2. Cards & chips — hover lift + soft shadow bloom; tappable ones press */
.product-card, .step-card, .rate-card, .asset-coin, .partner-card,
.trust-card, .contact-card, .coin-chip, .trust-chip {
  transition: transform var(--motion-micro) var(--ease-out-soft),
    box-shadow var(--motion-micro) var(--ease-out-soft),
    border-color var(--transition-fast), background var(--transition-fast);
}
.product-card:hover, .step-card:hover, .rate-card:hover, .asset-coin:hover,
.partner-card:hover, .trust-card:hover, .contact-card:hover,
.coin-chip:hover, .trust-chip:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-card-hover);
}
a.product-card:active, a.asset-coin:active, a.rate-card:active,
.coin-chip:active, a.trust-chip:active, a.contact-card:active, a.partner-card:active {
  transform: translateY(0) scale(0.985); box-shadow: none; transition-duration: 90ms;
}

/* 3. Links — underline slides in on hover (scoped to text links, never buttons/cards) */
.site-footer a, .hp-footer a, .legal__section a, .legal__lead a,
.faq__body a, .bubble-panel a, .notice a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--transition-base) var(--ease-out-soft), color var(--transition-fast);
}
.site-footer a:hover, .hp-footer a:hover, .legal__section a:hover, .legal__lead a:hover,
.faq__body a:hover, .bubble-panel a:hover, .notice a:hover,
.site-footer a:focus-visible, .hp-footer a:focus-visible, .legal__section a:focus-visible,
.legal__lead a:focus-visible, .faq__body a:focus-visible, .bubble-panel a:focus-visible, .notice a:focus-visible {
  background-size: 100% 1.5px;
}

/* 5. Ticker — seamless marquee, pause on hover. Structure built by motion.js;
   without JS or under reduced-motion the plain swipeable strip remains. */
.ticker__marquee { overflow: hidden; }
.ticker__scroll {
  display: flex; width: max-content; will-change: transform;
  animation: pzx-marquee var(--marquee-duration, 40s) linear infinite;
}
.ticker__scroll:hover { animation-play-state: paused; }
.ticker__marquee .ticker__track {
  overflow: visible; padding: var(--space-3) 0; padding-right: var(--space-6);
}
@keyframes pzx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   Pass B — Stage 2: expand/retract transitions (presentation only)
   Smooth expand/collapse for the FAQ accordion, wizard coin picker and the
   "Other — request a coin" field. All motion is transform/opacity/grid-rows
   and is neutralised by the global prefers-reduced-motion block above. Every
   enhancement degrades to the original native behaviour without JS.
   ========================================================================== */

/* 1. FAQ accordion — smooth expand/collapse. Native <details> still works
   without JS; the transition only applies once motion.js marks <html>. The
   chevron rotation is defined earlier and flips back the moment a close
   starts (via .is-closing) rather than waiting for the collapse to finish. */
.faq__body { overflow: hidden; }
.js-accordion .faq__body {
  transition: max-height 240ms var(--ease-out-soft), opacity 200ms ease;
}
.faq.is-closing > summary .faq__chev { transform: none; }

/* 2. Coin picker options — fade + slide in as they render */
@keyframes pzx-fade-slide { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.coin-grid .coin-chip { animation: pzx-fade-slide 240ms var(--ease-out-soft) both; }

/* 3. Wizard collapsible panels (Other / quote) — grid-rows expand & collapse.
   motion.js adds .wizard-collapse and wraps the content in .__inner; the
   wizard keeps toggling .hidden, which we re-skin from an instant display:none
   into an animated collapse (kept out of the a11y tree via visibility). */
.wizard-collapse {
  display: grid; grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows 260ms var(--ease-out-soft), opacity 200ms ease;
}
.wizard-collapse > .wizard-collapse__inner { min-height: 0; overflow: hidden; }
.wizard-collapse.hidden {
  display: grid !important; grid-template-rows: 0fr; opacity: 0;
  visibility: hidden; pointer-events: none;
  transition: grid-template-rows 260ms var(--ease-out-soft), opacity 180ms ease,
    visibility 0s linear 260ms;
}

/* ==========================================================================
   Pass B — Stage 3: wizard step transitions + state feedback (presentation)
   The wizard keeps full control of its classes/attributes and data; these
   rules only animate the visual containers. All neutralised by the global
   prefers-reduced-motion block; motion.js only tags the entering step.
   ========================================================================== */

/* 1. Step transitions — the entering step fades + slides (direction set by
   motion.js: forward from the right, back from the left). */
@keyframes pzx-step-fwd  { from { opacity: 0; transform: translateX(22px); }  to { opacity: 1; transform: none; } }
@keyframes pzx-step-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.wizard__step.step-enter--fwd  { animation: pzx-step-fwd 250ms var(--ease-out-soft); }
.wizard__step.step-enter--back { animation: pzx-step-back 250ms var(--ease-out-soft); }
/* Step indicator (1-2-3) active/done state eases in */
.wizard__steps li { transition: color var(--transition-base) ease; }

/* 2. Verification / validation feedback — the resolved name, valid address and
   valid tx hash "confirm" with a quick scale+fade; failed states ease in. */
@keyframes pzx-pop  { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes pzx-fade { from { opacity: 0; } to { opacity: 1; } }
.resolve-status[data-state="verified"]  { animation: pzx-pop 220ms var(--ease-out-soft); }
.resolve-status[data-state="failed"]    { animation: pzx-fade 220ms ease; }
.resolve-status[data-state="resolving"] { animation: pzx-fade 160ms ease; }

/* 3. Echo-confirm modal — backdrop fades, panel scales + rises in */
@keyframes pzx-modal-in { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } }
.modal.is-open { animation: pzx-fade 200ms ease; }
.modal.is-open .modal__panel { animation: pzx-modal-in 240ms var(--ease-out-soft); }

/* 4. Trade generation — the whole settle step arrives via the step transition
   above (fade + slide). No extra per-child motion so it stays calm, not busy. */

/* 5. Buttons — disabled -> enabled eases (opacity added to the Stage-1 set) */
.btn {
  transition: background var(--transition-fast), border-color var(--transition-fast),
    transform var(--motion-micro) var(--ease-out-soft), box-shadow var(--motion-micro) var(--ease-out-soft),
    filter var(--transition-fast), opacity var(--transition-base) ease;
}

/* ==========================================================================
   Pass B — Stage 4 (final): scroll reveal + live rate-card flash
   Presentation only. Reveal state is gated on html.has-reveal, which motion.js
   only adds when JS runs and reduced-motion is OFF — so without JS or under
   reduced-motion, nothing is ever hidden. The rate flash animates the visual
   only; the value and its 60s fetch (rates.js) are untouched.
   ========================================================================== */

/* 1. Scroll reveal — gentle fade up as elements enter the viewport (once) */
html.has-reveal .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 460ms var(--ease-out-soft), transform 460ms var(--ease-out-soft);
}
html.has-reveal .reveal:not(.is-revealed) { will-change: opacity, transform; }
html.has-reveal .reveal.is-revealed { opacity: 1; transform: none; }

/* 2. Live rate-card flash — brief number fade + a green(up)/red(down) tint pulse
   when a card's price changes on the CoinGecko refresh. */
@keyframes pzx-card-up   { 0% { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--green) 20%, transparent); }        100% { box-shadow: inset 0 0 0 9999px transparent; } }
@keyframes pzx-card-down { 0% { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--color-error) 22%, transparent); } 100% { box-shadow: inset 0 0 0 9999px transparent; } }
@keyframes pzx-num-flash { 0% { opacity: 0.3; } 45% { opacity: 1; } 100% { opacity: 1; } }
.rate-card.is-flash-up   { animation: pzx-card-up 700ms ease-out; }
.rate-card.is-flash-down { animation: pzx-card-down 700ms ease-out; }
.rate-card.is-flash-up  [data-price],
.rate-card.is-flash-down [data-price] { animation: pzx-num-flash 500ms ease-out; }

/* ==========================================================================
   Futuristic "X" dropdown navigation (all pages)
   Presentation/UI only. Native <details> so it works without JS; motion.js
   adds outside-click / Escape close + aria. Deep-ink glassmorphism panel with
   glowing red accents and green "up-chart" energy — the locked PraizEx system.
   ========================================================================== */
:root { --xnav-top: 60px; }

/* Keep the brand left; group the CTAs + X trigger to the right */
.site-header__inner > .brand { margin-right: auto; }

.xnav { position: relative; display: inline-flex; align-items: center; }

/* --- Trigger: the animated X / up-chart mark --- */
.xnav__trigger {
  list-style: none; cursor: pointer; display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--red) 32%, var(--line));
  background: color-mix(in srgb, var(--red) 6%, #fff);
  transition: box-shadow 200ms ease, border-color 200ms ease, transform 120ms var(--ease-out-soft);
  -webkit-tap-highlight-color: transparent;
}
.xnav__trigger::-webkit-details-marker { display: none; }
.xnav__trigger::marker { content: ""; }
.xnav__trigger:hover { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 10%, transparent), 0 0 18px color-mix(in srgb, var(--red) 28%, transparent); }
.xnav__trigger:active { transform: scale(0.95); }
.xnav__trigger:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.xnav__mark { display: block; width: 26px; height: 26px; }
.xnav__mark svg { width: 100%; height: 100%; overflow: visible; }
.xnav__s-fall { stroke: var(--muted-warm); }
.xnav__s-rise, .xnav__s-tip { stroke: var(--red); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--red) 55%, transparent)); }
.xnav__s-dot { fill: var(--green); transform-origin: 22px 10px; animation: xnav-pulse 1.9s ease-in-out infinite; }
@keyframes xnav-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(1.7); } }
.xnav[open] .xnav__trigger { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 12%, transparent), 0 0 22px color-mix(in srgb, var(--red) 34%, transparent); }
.xnav[open] .xnav__s-rise, .xnav[open] .xnav__s-tip { filter: drop-shadow(0 0 6px var(--red)); }
.xnav[open] .xnav__mark { animation: xnav-nudge 240ms var(--ease-out-soft); }
@keyframes xnav-nudge { from { transform: rotate(-12deg) scale(0.9); } to { transform: none; } }

/* --- Scrim: click-catch + dim below the header. Height is set explicitly
   (not bottom:0) because the header's backdrop-filter makes it the containing
   block for these fixed children — bottom would collapse against the 60px bar. */
.xnav__scrim {
  position: fixed; top: var(--xnav-top); left: 0; right: 0;
  height: calc(100dvh - var(--xnav-top));
  z-index: var(--z-modal);
  background: rgba(8, 8, 10, 0.42); backdrop-filter: blur(3px);
  animation: xnav-fade 200ms ease;
}
@keyframes xnav-fade { from { opacity: 0; } to { opacity: 1; } }

/* --- Glass panel --- */
.xnav__panel {
  position: fixed; z-index: calc(var(--z-modal) + 1);
  top: calc(var(--xnav-top) + 6px); right: clamp(12px, 4vw, 28px);
  width: min(384px, calc(100vw - 24px));
  max-height: min(78vh, 760px); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-4);
  color: #fff; font-family: var(--font-body);
  background: color-mix(in srgb, var(--ink) 84%, transparent);
  backdrop-filter: blur(22px) saturate(130%);
  border: 1px solid color-mix(in srgb, var(--red) 42%, transparent);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--red) 14%, transparent),
    0 26px 64px rgba(0, 0, 0, 0.55),
    0 0 48px color-mix(in srgb, var(--red) 16%, transparent);
  transform-origin: top right;
  animation: xnav-in 240ms var(--ease-out-soft);
}
@keyframes xnav-in { from { opacity: 0; transform: translateY(-8px) scale(0.97); } to { opacity: 1; transform: none; } }

.xnav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.xnav__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, #fff 55%, transparent); }
.xnav__live { font-family: var(--font-mono); font-size: 11px; color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.xnav__live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: ds-pulse 2s ease-in-out infinite; }

.xnav__group { margin-top: var(--space-3); }
.xnav__glabel { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--red-br) 82%, #fff); margin: 0 0 var(--space-1); padding-left: 6px; }
/* Animated chart-line divider — a live baseline sweeping red into green */
.xnav__line {
  height: 1px; margin: 0 0 var(--space-2); border-radius: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--red-br) 85%, transparent) 42%, color-mix(in srgb, var(--green) 75%, transparent) 60%, transparent);
  background-size: 220% 100%;
  animation: xnav-sweep 3.4s linear infinite; opacity: 0.6;
}
@keyframes xnav-sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.xnav__item {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  padding: 9px 10px; border-radius: 11px; text-decoration: none; color: #fff;
  transition: background 160ms ease, transform 150ms var(--ease-out-soft), box-shadow 160ms ease;
}
.xnav__item + .xnav__item { margin-top: 2px; }
.xnav__item:hover, .xnav__item:focus-visible {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  transform: translateX(3px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 32%, transparent);
  outline: none;
}
.xnav__item::before {
  content: ""; position: absolute; left: 2px; top: 22%; bottom: 22%; width: 2px; border-radius: 2px;
  background: var(--green); box-shadow: 0 0 6px var(--green);
  transform: scaleY(0); transform-origin: center; transition: transform 180ms var(--ease-out-soft);
}
.xnav__item:hover::before, .xnav__item:focus-visible::before { transform: scaleY(1); }
.xnav__ico {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  background: color-mix(in srgb, #fff 6%, transparent);
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  color: var(--red-br); transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.xnav__item--home .xnav__ico { color: var(--green); }
.xnav__item:hover .xnav__ico, .xnav__item:focus-visible .xnav__ico {
  background: color-mix(in srgb, var(--red) 22%, transparent); color: #fff;
  border-color: color-mix(in srgb, var(--red) 50%, transparent);
}
.xnav__txt { min-width: 0; display: flex; flex-direction: column; }
.xnav__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); line-height: 1.2; }
.xnav__desc { font-size: 12px; color: color-mix(in srgb, #fff 58%, transparent); margin-top: 1px; }

/* --- Mobile: full-screen menu below the sticky header (X stays tappable) --- */
@media (max-width: 640px) {
  .xnav__panel {
    top: var(--xnav-top); right: 0; left: 0; height: calc(100dvh - var(--xnav-top));
    width: 100%; max-height: none; border: 0; border-top: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
    border-radius: 0; padding: var(--space-5) var(--space-5) var(--space-8);
    box-shadow: 0 0 40px color-mix(in srgb, var(--red) 14%, transparent);
    animation: xnav-in-m 260ms var(--ease-out-soft);
  }
  @keyframes xnav-in-m { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  .xnav__item { padding: 13px 12px; }
  .xnav__name { font-size: var(--text-base); }
  .xnav__desc { font-size: var(--text-sm); }
  .xnav__ico { width: 40px; height: 40px; }
}

/* --- Install App menu item: a <button> that matches the .xnav__item links --- */
button.xnav__item {
  width: 100%; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left; -webkit-appearance: none; appearance: none;
}
button.xnav__item + .xnav__item, .xnav__item + button.xnav__item { margin-top: 2px; }
.xnav__item--install .xnav__ico { color: var(--green); }

/* --- Install instructions modal (iOS / fallback). On-brand ink glass. --- */
.install-modal {
  position: fixed; inset: 0; z-index: calc(var(--z-modal) + 20);
  display: flex; align-items: center; justify-content: center; padding: var(--space-4);
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  backdrop-filter: blur(6px);
  animation: install-fade 200ms ease;
}
.install-modal[hidden] { display: none; }
@keyframes install-fade { from { opacity: 0; } to { opacity: 1; } }
.install-modal__card {
  position: relative; width: min(400px, calc(100vw - 32px));
  max-height: min(86vh, 620px); overflow-y: auto;
  color: #fff; font-family: var(--font-body);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(22px) saturate(130%);
  border: 1px solid color-mix(in srgb, var(--red) 42%, transparent);
  border-radius: 18px; padding: var(--space-6);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--red) 14%, transparent),
    0 26px 64px rgba(0, 0, 0, 0.55),
    0 0 48px color-mix(in srgb, var(--red) 16%, transparent);
  animation: install-in 260ms var(--ease-out-soft);
}
@keyframes install-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
.install-modal__close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 9px; cursor: pointer;
  color: color-mix(in srgb, #fff 70%, transparent);
  background: color-mix(in srgb, #fff 6%, transparent);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.install-modal__close:hover, .install-modal__close:focus-visible {
  background: color-mix(in srgb, var(--red) 22%, transparent); color: #fff;
  border-color: color-mix(in srgb, var(--red) 50%, transparent); outline: none;
}
.install-modal__eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: color-mix(in srgb, var(--red-br) 82%, #fff); margin: 0 0 var(--space-2);
}
.install-modal__title {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-xl); margin: 0 0 var(--space-4); line-height: 1.15;
}
.install-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.install-steps li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.install-steps__num {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: #fff;
  background: color-mix(in srgb, var(--red) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 55%, transparent);
}
.install-steps__ico { flex: 0 0 auto; width: 22px; height: 22px; color: var(--red-br); }
.install-modal__note {
  margin: var(--space-4) 0 0; font-size: 12px;
  color: color-mix(in srgb, #fff 58%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .install-modal, .install-modal__card { animation: none; }
}