:root {
    --bg: #0a0a0a;
    --panel: #141414;
    --panel-border: #232323;
    --ink: #f5f5f4;
    --ink-dim: #9CA3AF;
    --ink-faint: #8A94A6;
    --accent: #3fb950;
    --accent-hover: #56d364;
    --accent-soft: rgba(63, 185, 80, 0.14);
    --gain: #4ADE80;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --maxw: 1120px;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }

  a { color: inherit; text-decoration: none; }

  .wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
  }

  .eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
  }

  /* ---------- Header ---------- */
  header.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 10, 10, 0.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--panel-border);
  }
  .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 92px;
  }
  .logo {
    width: 126px;
    height: 84px;
    display: block;
    object-fit: contain;
  }
  nav.primary-nav {
    display: flex;
    align-items: center;
    gap: 32px;
  }
  nav.primary-nav a.nav-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-dim);
  }
  nav.primary-nav a.nav-link:hover { color: var(--ink); }
  .header-ctas { display: flex; align-items: center; gap: 10px; }
  .menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    color: var(--ink);
    font-size: 18px;
    cursor: pointer;
  }
  .mobile-menu {
    display: none;
    flex-direction: column;
    border-top: 1px solid var(--panel-border);
    padding: 8px 24px 14px;
  }
  .mobile-menu a {
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-dim);
    border-bottom: 1px solid var(--panel-border);
  }
  .mobile-menu a:last-child { border-bottom: none; }
  .mobile-menu.open { display: flex; }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--accent);
    color: #fff;
  }
  .btn-primary:hover { background: var(--accent-hover); }
  .btn-ghost {
    background: transparent;
    border-color: var(--panel-border);
    color: var(--ink);
  }
  .btn-ghost:hover { border-color: #3a3a3a; }
  .btn-sm { padding: 9px 16px; font-size: 13.5px; }

  /* ---------- Hero ---------- */
  .hero {
    padding: 88px 0 60px;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: 54px;
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
  }
  .accent { color: var(--accent); }
  .hero p.lead {
    font-size: 18px;
    color: var(--ink-dim);
    /* No max-width -- the h1 above has none either, so both fill the same
       column width and read as roughly the same width as each other. */
    margin: 0 0 32px;
  }
  .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
  .hero .hero-ctas { justify-content: center; }
  .hero-note { font-size: 13px; color: var(--ink-faint); text-align: center; }

  /* ---------- Product showcase (illustrative mockups, not live screenshots) ---------- */
  /* Phone mockup shell -- wraps every showcase below in a pretend phone
     screen instead of a browser window. Fixed width AND height (a real
     phone's proportions) rather than sizing to content, so every phone on
     the page shares the exact same aspect ratio regardless of how much
     content it holds -- phone-content (flex: 1) absorbs any slack so the
     home indicator still sits at the true bottom either way. */
  .phone-frame {
    width: 270px;
    height: 468px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #2e2e38, #17171d);
    border-radius: 46px;
    padding: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 1.5px rgba(255, 255, 255, 0.06);
  }
  .phone-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: var(--bg);
    border-radius: 34px;
    overflow: hidden;
  }
  .phone-statusbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px 10px;
  }
  .phone-time { font-size: 14px; font-weight: 700; color: #fff; }
  .phone-icons { display: flex; align-items: center; gap: 5px; }
  .phone-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 22px;
    background: #000;
    border-radius: 12px;
  }
  .phone-content { flex: 1; padding: 0 16px 18px; }
  .phone-home-indicator {
    width: 120px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.3);
    margin: 4px auto 2px;
  }

  /* Portfolio value mockup */
  .pf-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    background: #111827;
    border-radius: 16px;
    padding: 18px 16px;
    margin-bottom: 6px;
  }
  .pf-numbers { flex: 1; min-width: 0; }
  .pf-label { font-size: 14px; color: #9CA3AF; margin-bottom: 6px; }
  .pf-value { font-size: 30px; font-weight: 800; color: #fff; margin-bottom: 6px; }
  .pf-change { font-size: 13px; font-weight: 700; color: #4ADE80; }
  .pf-chart { flex: 1.4; min-width: 0; }
  .pf-pills { display: flex; gap: 6px; margin-bottom: 6px; }
  .pf-pill {
    border: 1px solid #2A2A2A;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-dim);
  }
  .pf-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  .pf-axis {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ink-faint);
    margin-top: 4px;
  }

  /* Card sales-history stat mockup */
  .stats-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .stats-title { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--ink-faint); }
  .stats-grade { font-size: 11px; font-weight: 700; border: 1px solid #2A2A2A; border-radius: 12px; padding: 3px 9px; }
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
  .stat-tile { border: 1px solid #22C55E; border-radius: 10px; padding: 7px 4px; text-align: center; }
  .stat-tile-value { font-size: 13px; font-weight: 800; line-height: 1.2; }
  .stat-tile-label { font-size: 9px; color: var(--ink-dim); margin-top: 2px; }
  .stats-card-name { font-size: 12px; font-weight: 700; line-height: 1.3; margin-bottom: 3px; }
  .stats-card-meta { font-size: 10px; color: var(--ink-dim); margin-bottom: 1px; }
  .stats-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid #1E1E1E;
    margin-top: 8px;
    padding-top: 8px;
  }
  .stats-footer-label { font-size: 8.5px; letter-spacing: 0.04em; color: var(--ink-faint); text-transform: uppercase; margin-bottom: 2px; }
  .stats-footer-value { font-size: 13px; font-weight: 800; }

  /* Three phones fanned out and slightly overlapping, like a typical
     product-photo phone mockup. The center phone is pulled in front via
     z-index (it would otherwise sit visually behind the last-painted
     phone, since normal DOM/paint order goes left-to-right). */
  .phone-fan {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 52px;
    padding: 24px 0 40px;
  }
  .phone-fan::before {
    content: '';
    position: absolute;
    bottom: 16px;
    left: 50%;
    width: 320px;
    height: 32px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 72%);
    transform: translateX(-50%);
  }
  .phone-fan .phone-frame { flex: none; margin: 0; position: relative; }
  .phone-fan-left { transform: rotate(-11deg) translate(30px, 16px); z-index: 1; }
  .phone-fan-center { margin: 0 -50px; transform: translateY(-10px); z-index: 3; }
  .phone-fan-right { margin-left: -50px; transform: rotate(11deg) translate(-30px, 16px); z-index: 2; }
  /* Never restack: shrink the whole group so the layout stays the same at every width. */
  @media (max-width: 800px) { .phone-fan { zoom: 0.88; } }
  @media (max-width: 740px) { .phone-fan { zoom: 0.8; } }
  @media (max-width: 680px) { .phone-fan { zoom: 0.72; } }
  @media (max-width: 620px) { .phone-fan { zoom: 0.66; } }
  @media (max-width: 560px) { .phone-fan { zoom: 0.58; } }
  @media (max-width: 500px) { .phone-fan { zoom: 0.5; } }
  @media (max-width: 440px) { .phone-fan { zoom: 0.47; } }
  @media (max-width: 400px) { .phone-fan { zoom: 0.41; } }
  @media (max-width: 360px) { .phone-fan { zoom: 0.37; } }
  @media (max-width: 340px) { .phone-fan { zoom: 0.35; } }


  /* Hero phone screens: the middle phone shows the real collection screenshot,
     trimmed to the phone's screen; the right one a collection-by-set pie. */
  .phone-content-shot { padding: 0; overflow: hidden; position: relative; }
  .phone-content-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .pie-card { background: #111827; border-radius: 16px; padding: 16px 14px 14px; }
  .pie-title { font-size: 14px; color: #9CA3AF; margin-bottom: 10px; text-align: center; }
  .pie-wrap { position: relative; width: 132px; height: 132px; margin: 0 auto 12px; }
  .pie-wrap svg { display: block; }
  .pie-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
  .pie-center strong { font-size: 20px; font-weight: 800; color: #fff; }
  .pie-center span { font-size: 10px; color: #9CA3AF; }
  .pie-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .pie-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
  .pie-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .pie-name { flex: 1; color: #E5E7EB; }
  .pie-pct { font-weight: 800; color: #fff; }


  /* Feed + events phone mockups (illustrative, styled after the app). */
  .fd-content { padding: 0 12px 12px; overflow: hidden; }
  .fd-tabs { display: flex; justify-content: space-between; border-bottom: 1px solid #222; margin: 0 -12px 8px; padding: 0 8px; }
  .fd-tabs span { font-size: 8.5px; font-weight: 800; color: #8b8b8b; padding: 6px 2px 7px; border-bottom: 2px solid transparent; }
  .fd-tabs span.on { color: var(--accent); border-bottom-color: var(--accent); }
  .fd-composer { display: flex; align-items: center; gap: 8px; border: 1px solid #262626; border-radius: 12px; padding: 7px 9px; margin-bottom: 8px; font-size: 10px; color: #8b8b8b; }
  .fd-composer img { border-radius: 50%; }
  .fd-post { border: 1px solid #262626; border-radius: 12px; padding: 10px; }
  .fd-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
  .fd-head img { border-radius: 50%; }
  .fd-head strong { display: block; font-size: 11px; line-height: 1.2; }
  .fd-head span { display: block; font-size: 8.5px; color: #8b8b8b; }
  .fd-title { font-size: 11px; font-weight: 800; line-height: 1.3; margin-bottom: 4px; }
  .fd-body { font-size: 9.5px; line-height: 1.35; color: #d4d4d4; margin-bottom: 8px; }
  .fd-want { display: flex; align-items: center; gap: 7px; border: 1.5px solid var(--accent); border-radius: 9px; padding: 6px; margin-bottom: 8px; }
  .fd-want img { border-radius: 3px; flex: none; }
  .fd-want div { flex: 1; min-width: 0; line-height: 1.25; }
  .fd-want span { display: block; font-size: 7.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); }
  .fd-want strong { display: block; font-size: 11px; }
  .fd-want em { display: block; font-style: normal; font-size: 8.5px; color: #8b8b8b; }
  .fd-want b { background: var(--accent); color: #fff; font-size: 8.5px; border-radius: 8px; padding: 5px 7px; white-space: nowrap; }
  .fd-react { display: flex; gap: 5px; }
  .fd-react span { border: 1px solid #262626; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 11px; }
  .ev-list { display: flex; flex-direction: column; gap: 7px; }
  .ev-card { display: flex; align-items: center; gap: 9px; border: 1px solid #262626; border-radius: 12px; padding: 8px 9px; background: var(--panel); }
  .ev-card .ev-date { width: 38px; height: 42px; border-radius: 9px; border-width: 1.3px; }
  .ev-card .ev-date .em { font-size: 8px; }
  .ev-card .ev-date .ed { font-size: 15px; }
  .ev-title { font-size: 11px; font-weight: 800; line-height: 1.25; }
  .ev-meta { font-size: 9px; color: var(--ink-dim); margin-top: 1px; }
  .ev-links { font-size: 8.5px; font-weight: 700; color: var(--accent); margin-top: 3px; }

  .fd-tabs span { white-space: nowrap; }
  .fd-tabs.tight { padding: 0 2px; }
  .fd-tabs.tight span { font-size: 6px; padding-left: 1px; padding-right: 1px; }
  .fd-tabs i { font-style: normal; background: var(--accent); color: #fff; border-radius: 6px; padding: 0 3px; font-size: 7px; margin-left: 1px; }
  .of-head { font-size: 11px; font-weight: 800; margin: 6px 0 5px; }
  .of-card { border: 1px solid #262626; border-radius: 10px; padding: 8px 9px; margin-bottom: 6px; display: flex; flex-direction: column; gap: 3px; }
  .of-card strong { font-size: 10px; line-height: 1.25; }
  .of-card span { font-size: 8.5px; color: #9a9a9a; }
  .of-card .neg { font-style: normal; color: #9b4a4a; font-weight: 700; }
  .of-btn { align-self: flex-start; margin-top: 3px; border: 1px solid #333; border-radius: 7px; padding: 4px 8px; font-size: 8.5px; }
  .of-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
  .trade-caption { text-align: center; max-width: 560px; margin: 8px auto 0; }
  @media (min-width: 901px) { .phone-lean.wide { zoom: 1; } }

  /* Two phones leaning together, like a typical product-photo phone
     mockup -- rotated toward each other and pulled close so they overlap,
     with a soft ground shadow underneath to sell the "leaning" look. The
     front phone is later in DOM order, so it naturally paints over the
     back one at the overlap -- no z-index juggling needed. */
  .phone-lean {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 20px 0 40px;
  }
  .phone-lean::before {
    content: '';
    position: absolute;
    bottom: 22px;
    left: 50%;
    width: 240px;
    height: 32px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 72%);
    transform: translateX(-50%);
  }
  .phone-lean .phone-frame { flex: none; margin: 0; position: relative; }
  .phone-lean-back { transform: rotate(8deg) translate(30px, 4px); }
  .phone-lean-front { transform: rotate(-8deg) translate(-30px, 0); }
  /* Never restack: shrink the whole group so the layout stays the same at every width. */
  @media (max-width: 1100px) { .phone-lean { zoom: 0.8; } }
  @media (max-width: 920px) { .phone-lean { zoom: 0.88; } }
  @media (max-width: 900px) { .phone-lean { zoom: 1; } }
  @media (max-width: 560px) { .phone-lean { zoom: 0.92; } }
  @media (max-width: 520px) { .phone-lean { zoom: 0.85; } }
  @media (max-width: 480px) { .phone-lean { zoom: 0.78; } }
  @media (max-width: 440px) { .phone-lean { zoom: 0.7; } }
  @media (max-width: 400px) { .phone-lean { zoom: 0.62; } }
  @media (max-width: 360px) { .phone-lean { zoom: 0.58; } }
  @media (max-width: 340px) { .phone-lean { zoom: 0.5; } }

  .tm-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
  .tm-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: #fff; flex: none; background: var(--accent);
  }
  .tm-name { font-size: 14px; font-weight: 700; }
  .tm-feedback { font-size: 12px; color: var(--ink-faint); font-weight: 600; margin-top: 1px; }
  .tm-side-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); margin: 14px 0 8px; }
  .tm-cards { display: flex; gap: 10px; }
  .tm-card { width: 68px; }
  .tm-card-art {
    width: 68px; height: 95px; border-radius: 8px;
    overflow: hidden; margin-bottom: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  .tm-card-art svg { display: block; width: 100%; height: 100%; }
  .tm-card-name { font-size: 11px; color: var(--ink-dim); line-height: 1.3; }
  .tm-cash { font-size: 12.5px; font-weight: 700; color: #22C55E; margin-top: 12px; }

  .an-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
  .an-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #1E1E1E; }
  .an-row:first-of-type { border-top: none; }
  .an-label-col { flex: 1.3; font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }
  .an-head-col { flex: 1; font-size: 12px; font-weight: 700; color: var(--ink-faint); text-align: right; }
  .an-cell { flex: 1; font-size: 12.5px; font-weight: 700; text-align: right; }
  .an-summary { font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); margin-top: 14px; }

  /* ---------- Value strip ---------- */
  .value-strip {
    border-top: 1px solid var(--panel-border);
    border-bottom: 1px solid var(--panel-border);
    padding: 36px 0;
  }
  .value-strip .wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .value-item { text-align: center; }
  .value-item .vi-num { font-size: 26px; font-weight: 900; color: var(--accent); margin-bottom: 4px; }
  .value-item .vi-label { font-size: 13px; color: var(--ink-dim); }

  /* ---------- Section shell ---------- */
  section.block { padding: 96px 0; }
  .section-head { max-width: 620px; margin: 0 0 52px; }
  .section-head h2 {
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
  }
  .section-head p { font-size: 16px; color: var(--ink-dim); margin: 0; }

  /* ---------- Feature grid ---------- */
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .feature-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    padding: 28px;
  }
  .feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 19px;
  }
  .feature-card h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
  .feature-card p { font-size: 14.5px; color: var(--ink-dim); margin: 0; line-height: 1.55; }

  /* ---------- How it works ---------- */
  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  /* Trading's 4-step flow -- 2x2 keeps each card as wide/readable as the
     3-column layout above instead of squeezing a 4th column in. */
  .steps.steps-4 { grid-template-columns: repeat(2, 1fr); }
  .step {
    position: relative;
    padding: 30px 26px 26px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
  }
  .step .step-num {
    font-size: 13px;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: 0.08em;
    margin-bottom: 14px;
  }
  .step h3 { font-size: 17px; font-weight: 800; margin: 0 0 8px; }
  .step p { font-size: 14px; color: var(--ink-dim); margin: 0; }

  /* ---------- Community section ---------- */
  .community-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .social-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .social-list li { display: flex; gap: 12px; font-size: 14.5px; color: var(--ink); align-items: flex-start; }
  .social-list li .dot {
    width: 20px; height: 20px; border-radius: 6px; background: var(--accent-soft); color: var(--accent);
    flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; margin-top: 1px;
  }
  .mini-owners .mo-title { font-size: 13px; color: var(--ink-dim); margin-bottom: 14px; }
  .mo-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--panel-border); }
  .mo-row:last-child { border-bottom: none; }
  .mo-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; flex: none;
  }
  .mo-name { font-size: 13.5px; font-weight: 700; }
  .mo-sub { font-size: 11.5px; color: var(--ink-faint); }

  /* Community thread mockup */
  .thread-header { font-size: 12.5px; font-weight: 700; color: var(--ink-dim); margin-bottom: 16px; }
  .thread-post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .thread-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
  }
  .thread-name { font-size: 13px; font-weight: 700; }
  .thread-time { font-size: 11px; color: var(--ink-faint); }
  .thread-text { font-size: 13px; line-height: 1.5; color: var(--ink); margin: 0 0 10px; }
  .thread-actions { display: flex; gap: 16px; font-size: 12px; color: var(--ink-dim); margin-bottom: 6px; }
  .thread-comment { display: flex; gap: 8px; padding: 10px 0; border-top: 1px solid #1E1E1E; }
  .thread-comment .thread-avatar { width: 24px; height: 24px; }
  .thread-comment-body { font-size: 12.5px; line-height: 1.45; color: var(--ink); }
  .thread-comment-name { font-weight: 700; margin-right: 4px; }

  /* ---------- Final CTA ---------- */
  .final-cta {
    text-align: center;
    padding: 100px 0 110px;
  }
  .final-cta h2 { font-size: 40px; font-weight: 900; margin: 0 0 14px; letter-spacing: -0.01em; }
  .final-cta p { font-size: 16px; color: var(--ink-dim); margin: 0 0 32px; }
  .final-cta .hero-ctas { justify-content: center; }

  /* ---------- Footer ---------- */
  footer {
    border-top: 1px solid var(--panel-border);
    padding: 40px 0;
  }
  .footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .footer-brand { width: 96px; height: 64px; display: block; object-fit: contain; }
  .footer-tag { font-size: 13px; color: var(--ink-faint); margin-top: 4px; }
  .footer-right { text-align: right; }
  .footer-links { display: flex; gap: 18px; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
  .footer-links a { font-size: 13px; color: var(--ink-dim); }
  .footer-links a:hover { color: var(--ink); }
  .footer-copy { font-size: 13px; color: var(--ink-faint); }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px) {
    nav.primary-nav { display: none; }
    .menu-toggle { display: block; }
    .hero h1 { font-size: 40px; }
    .value-strip .wrap { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
    .feature-grid { grid-template-columns: 1fr 1fr; }
    .community-split { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    /* .steps.steps-4 (two classes) otherwise outranks the single-class
       .steps rule above regardless of source order -- repeat here so the
       4-step trading grid also collapses to one column on narrow screens. */
    .steps.steps-4 { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .feature-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 32px; }
    .section-head h2 { font-size: 28px; }
    .footer-right { text-align: left; }
    .footer-links { justify-content: flex-start; }
    /* Logo + Sign In + Get Started + hamburger were wider than the
       viewport at this breakpoint, pushing the page into horizontal
       scroll -- shrink the logo and tighten the button/gap sizing so the
       header row fits without wrapping or overflowing. */
    .site-header .wrap { padding: 0 16px; }
    .logo { width: 84px; height: 56px; }
    .header-ctas { gap: 6px; }
    .header-ctas .btn-sm { padding: 8px 12px; font-size: 12.5px; }
  }

  /* ---------- New in this version ---------- */
  .lead-narrow { text-align: center; }
  .hero { text-align: center; }
  .game-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 28px; }
  .game-chip { font-size: 12.5px; font-weight: 700; color: var(--ink-dim); border: 1px solid var(--panel-border); border-radius: 999px; padding: 6px 14px; background: var(--panel); }

  .pay-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .pay-step { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 22px 20px; }
  .pay-step .pay-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
  .pay-step h3 { font-size: 16px; font-weight: 800; margin: 0 0 6px; }
  .pay-step .pay-link { color: var(--accent); font-weight: 700; white-space: nowrap; }
  .pay-step .pay-link:hover { text-decoration: underline; }
  .pay-step p { font-size: 13.5px; color: var(--ink-dim); margin: 0; line-height: 1.5; }

  .mock-caption { text-align: center; font-size: 12px; color: var(--ink-faint); margin-top: 12px; }

  .icon-list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
  .icon-list li { display: flex; gap: 14px; align-items: flex-start; }
  .il-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
  .il-icon svg { width: 20px; height: 20px; }
  .il-text { display: flex; flex-direction: column; gap: 3px; }
  .il-text strong { font-size: 16px; font-weight: 800; color: var(--ink); }
  .il-text span { font-size: 14.5px; color: var(--ink-dim); line-height: 1.55; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .waitlist { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 520px; margin: 0 auto; }
  .wl-input { flex: 1 1 260px; min-width: 0; background: var(--panel); color: var(--ink); border: 1px solid var(--panel-border); border-radius: 999px; padding: 13px 20px; font-size: 15px; font-family: inherit; }
  .wl-input::placeholder { color: var(--ink-faint); }
  .wl-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
  .wl-honey { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
  .wl-msg { min-height: 22px; margin: 14px 0 0; font-size: 14px; color: var(--ink-dim); }
  .wl-msg.ok { color: var(--accent); }
  .wl-msg.err { color: #f87171; }
  .trust-grid .feature-card { padding: 22px; }
  .trust-grid .feature-card h3 { font-size: 16px; }
  .trust-grid .feature-card p { font-size: 14px; }
  .faq { max-width: 760px; }
  .faq-item { border-top: 1px solid var(--panel-border); padding: 0; }
  .faq-item:last-child { border-bottom: 1px solid var(--panel-border); }
  .faq-item summary { cursor: pointer; list-style: none; padding: 18px 0; font-size: 16px; font-weight: 700; display: flex; justify-content: space-between; gap: 16px; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: "+"; color: var(--accent); font-weight: 800; flex: none; }
  .faq-item[open] summary::after { content: "–"; }
  .faq-item p a { color: var(--accent); }
  .faq-item p { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-dim); line-height: 1.6; max-width: 640px; }
  .shot { display: block; width: 100%; height: auto; border: 1px solid var(--panel-border); border-radius: var(--radius-md); }
  .showcase { margin-top: 64px; }
  .trade-pair { display: flex; column-gap: 64px; row-gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 44px; }
  .trade-fig { margin: 0; }
  .trade-fig-left { width: min(100%, 440px); }
  .trade-fig-right { width: min(100%, 330px); }
  .trade-fig .mock-caption { margin-top: 10px; min-height: 3em; }
  .promo-shot { display: block; width: 100%; max-width: 170px; margin: 0 auto; height: auto; border: 1px solid var(--panel-border); border-radius: var(--radius-md); }
  .shot-label { display: flex; align-items: center; gap: 10px; max-width: 420px; margin: 32px auto 12px; font-size: 18px; font-weight: 800; }
  .shot-label svg { color: var(--accent); flex: none; }
  .trade-fig .shot-label { max-width: none; margin: 0 0 12px; }
  .community-shot { display: block; width: 100%; max-width: 420px; height: auto; margin: 22px auto 0; border: 1px solid var(--panel-border); border-radius: var(--radius-md); }
  .event-mock { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 18px; max-width: 420px; margin: 0 auto; display: flex; gap: 14px; align-items: center; }
  .event-date { width: 58px; height: 62px; border: 1.5px solid var(--accent); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
  .event-date .em { font-size: 11px; font-weight: 800; color: var(--accent); letter-spacing: 0.08em; }
  .event-date .ed { font-size: 22px; font-weight: 900; }
  .event-title { font-size: 15px; font-weight: 800; }
  .event-meta { font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }
  .event-links { font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 6px; }

  .plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
  .plan-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column; }
  .plan-card.featured { border: 2px solid var(--accent); }
  .plan-badge { align-self: flex-start; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--accent); border-radius: 999px; padding: 3px 12px; margin-bottom: 12px; }
  .plan-name { font-size: 19px; font-weight: 800; margin: 0 0 4px; }
  .plan-for { font-size: 13px; color: var(--ink-faint); margin: 0 0 14px; }
  .plan-price { font-size: 34px; font-weight: 900; margin: 0 0 16px; }
  .plan-price small { font-size: 14px; font-weight: 600; color: var(--ink-dim); }
  .plan-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; }
  .plan-list li { display: flex; gap: 10px; font-size: 14px; padding: 9px 0; border-top: 1px solid var(--panel-border); color: var(--ink); }
  .plan-list li.off { color: var(--ink-faint); }
  .plan-list .mark { width: 16px; flex: none; color: var(--accent); font-weight: 900; }
  .plan-list li.off .mark { color: var(--ink-faint); }
  .plan-card .btn { margin-top: auto; }
  .plans-note { text-align: center; font-size: 13px; color: var(--ink-faint); margin-top: 22px; }

  .fine-print { font-size: 12px; color: var(--ink-faint); line-height: 1.6; max-width: 820px; margin: 18px auto 0; text-align: center; }
  .fine-print.footer-fine-print { margin-top: 28px; }

  @media (max-width: 900px) {
    .pay-flow { grid-template-columns: 1fr 1fr; }
    .plans-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .pay-flow { grid-template-columns: 1fr; }
  }


  /* ---------- Sign-up page ---------- */
  .signup-hero { padding-top: 80px; padding-bottom: 80px; }
  .waitlist-form { max-width: 620px; margin: 0 auto; }
  .plan-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
  .plan-chip { position: relative; }
  .plan-chip input { position: absolute; opacity: 0; pointer-events: none; }
  .plan-chip span { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 18px; border: 1px solid var(--panel-border); border-radius: 14px; background: var(--panel); font-size: 14px; font-weight: 800; cursor: pointer; }
  .plan-chip small { font-size: 12px; font-weight: 600; color: var(--ink-dim); }
  .plan-chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
  .plan-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
  .final-cta .wl-fine { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; }
  .wl-fine a, .plan-sub-link { color: var(--accent); text-decoration: underline; }
  .plan-sub-link { display: block; text-align: center; font-size: 13px; margin-top: 10px; }
  .plan-card .btn.plan-pick { width: 100%; }

  .wl-captcha { display: flex; justify-content: center; margin: 0 0 14px; min-height: 0; }


  /* Trading pair: leaning outward (mirror of the community pair's angles). */
  .phone-lean.wide .phone-lean-back { transform: rotate(-8deg) translate(30px, 4px); }
  .phone-lean.wide .phone-lean-front { transform: rotate(8deg) translate(-30px, 0); }

  /* ---------- Tour video (click to play) ---------- */
  .video-block { padding-top: 40px; padding-bottom: 20px; }
  .video-embed { position: relative; width: 100%; max-width: 960px; margin: 28px auto 0; aspect-ratio: 16 / 9; border: 1px solid var(--panel-border); border-radius: var(--radius-md); overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
  .video-compact .video-embed { max-width: 720px; }
  .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .video-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; display: block; }
  .video-play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: opacity 0.2s; }
  .video-play:hover img, .video-play:focus-visible img { opacity: 1; }
  .video-play:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
  .video-play-icon { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transition: transform 0.15s, background 0.15s; }
  .video-play-icon svg { margin-left: 5px; }
  .video-play:hover .video-play-icon { transform: scale(1.06); background: var(--accent-hover); }
  .video-length { position: absolute; right: 14px; bottom: 12px; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }

.lead-strong { color: var(--ink); font-weight: 800; }

  /* ---------- Scan-a-card phone mockup (Your collection section) ---------- */
  .sc-cam { position: relative; padding: 0; overflow: hidden; background: #000; }
  /* The photo sits inside the four corner marks; the black strip under them holds the shutter button. */
  .sc-cam img { position: absolute; left: 14px; right: 14px; top: 16px; bottom: 70px; width: calc(100% - 28px); height: calc(100% - 86px); object-fit: contain; }
  .sc-corner { position: absolute; width: 30px; height: 30px; border: 3px solid #fff; opacity: 0.9; }
  .sc-corner.tl { top: 16px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
  .sc-corner.tr { top: 16px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
  .sc-corner.bl { bottom: 70px; left: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
  .sc-corner.br { bottom: 70px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
  .sc-shutter { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: #000; display: flex; align-items: center; justify-content: center; }
  .sc-shutter span { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; box-shadow: inset 0 0 0 4px rgba(0,0,0,0.5); background: #fff; }
  .sc-add { padding: 0 12px 12px; overflow: hidden; }
  .sc-title { font-size: 13px; font-weight: 800; margin: 2px 0 8px; }
  .sc-btns { display: flex; gap: 6px; margin-bottom: 8px; }
  .sc-btns span { flex: 1; text-align: center; font-size: 8.5px; font-weight: 800; padding: 6px 0; border: 1px solid #2a2a2a; border-radius: 8px; color: var(--ink); }
  .sc-btns span.on { border-color: var(--accent); color: var(--accent); }
  .sc-note { font-size: 8.5px; color: var(--ink-dim); margin-bottom: 8px; }
  .sc-row { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-bottom: 1px solid #1f1f1f; border-radius: 8px; }
  .sc-row.best { background: var(--accent-soft); border: 1px solid rgba(63,185,80,0.45); }
  .sc-row img { width: 30px; height: 42px; border-radius: 3px; flex: none; object-fit: cover; }
  .sc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .sc-info strong { font-size: 10.5px; font-weight: 800; }
  .sc-info span { font-size: 8px; color: var(--ink-dim); }
  .sc-info em { font-size: 7.5px; font-style: normal; color: var(--ink-faint); }
  .sc-row b { font-size: 11px; font-weight: 800; color: var(--accent); flex: none; }
  .sc-check { width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid #777; flex: none; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; line-height: 1; }
  .sc-check.on { background: var(--accent); border-color: var(--accent); }
  .sc-continue { margin-top: 8px; background: var(--accent); color: #fff; text-align: center; font-size: 9.5px; font-weight: 800; padding: 8px 0; border-radius: 8px; }