/* Proof: the Tell system with its own palette. Loaded last on every page; everything here overrides, nothing else changed.
   Ink and black lean green, paper is a warm bone, and mint is the brand accent (the "verified" green). */
:root {
  --ink: #0b1310;
  --black: #070d0a;
  --night: #0a120e;
  --paper: #f2f0e9;
  --card: #e4e1d6;
  --line: #dcd8cb;
  --line-dark: rgba(214, 232, 221, .14);
  --grey: #5b625d;
  --stone: #8b928b;
  --chalk: #b3bcb4;
  --mint: #3fcf8e;
  --mint-soft: #9fe0c0;
  --mint-ink: #04170e;
}

/* Labels: a mint square instead of a grey one. */
.label::before, .dark .label::before { background: var(--mint); border-radius: 50%; }

/* Primary buttons are mint on dark sections; the dark button on light sections keeps the ink. */
.btn-light { background: var(--mint); color: var(--mint-ink); }
.btn-light:hover { background: #5ad9a0; }
.btn-dark { background: var(--ink); }
.btn-dark:hover { background: #1b2621; }
.nav[data-variant='light'] .nav-cta .btn-light { background: var(--ink); color: var(--white); }
.btn-ghost, .pill { background: rgba(63, 207, 142, .12); }
.btn-ghost:hover { background: rgba(63, 207, 142, .22); }

/* Second line of every big title in mint. */
.hero-title .dim, .dark .page-title .dim { color: var(--mint-soft); }
.page-title .dim { color: #2e9e6b; }

/* Hero: a green cast over the photo instead of plain black. */
.hero-grad { background: linear-gradient(90deg, rgba(4, 24, 14, .95) 5%, rgba(4, 24, 14, 0) 70%); opacity: .55; }
.hero-proof { display: flex; align-items: center; gap: 10px; margin-top: 28px; font: 400 11px/16.5px var(--mono); letter-spacing: .55px; text-transform: uppercase; color: var(--white-60); }

/* The thin left rule of each section becomes mint at the top, like a ledger margin. */
.inner::before { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 64px; background: var(--mint); z-index: 1; }

/* Metrics sit in a band of cards on the bone paper. */
.metrics.band { width: 100%; gap: 12px; }
.metrics.band .metric { background: var(--card); border-radius: 14px; padding: 28px 28px 24px; border: 0; }

/* Footer: deep green, the wordmark a touch brighter. */
.foot { background: var(--black); }
.foot-word { opacity: .14; }
.metrics.band .metric:first-child { padding-left: 28px; }
.metrics.band .metric + .metric::after { display: none; }
.metrics.band .metric-n { color: var(--ink); }
@media (max-width: 809px) { .metrics.band { flex-direction: column; } .metrics.band .metric { height: 150px; } }
.hero-proof .tag { font-size: 13px; padding: 7px 13px 7px 11px; text-transform: none; letter-spacing: -.1px; font-family: var(--sans); }
.hero-proof .tag, .hero-proof .tag em { white-space: nowrap; }
.intro-sec .film-inline { width: 100%; margin-top: 0; }
.hero-proof > span:last-child { white-space: nowrap; }
.logo img { height: 24px; }

/* Link a wallet: three steps, one open at a time. */
.btn-ghost-l { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost-l:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.link-card { width: 720px; }
.lsteps { list-style: none; margin: 0; padding: 0; }
.lstep { padding: 22px 0; border-top: 1px solid var(--line); }
.lstep:first-child { border-top: 0; padding-top: 0; }
.lstep-h { display: flex; align-items: baseline; gap: 14px; }
.lstep-n { font: 400 11px/16.5px var(--mono); letter-spacing: .55px; color: var(--stone); }
.lstep.done .lstep-n { color: #2e9e6b; }
.lstep.done .lstep-n::after { content: ' ✓'; }
.lstep:not(.on) h3 { color: var(--stone); }
.lstep-b { display: none; margin-top: 18px; }
.lstep.on .lstep-b { display: block; }
.lstep-b .fine { margin-top: 12px; }
.lmsg { margin: 12px 0 14px; padding: 14px 16px; border-radius: 8px; background: var(--card); font: 400 12.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; color: var(--ink); }
.lrow { display: flex; flex-wrap: wrap; gap: 8px; }
.lerr { color: #c7354a; min-height: 0; }
.lerr:empty { display: none; }
.ldone { margin-top: 8px; }
.ldone .tag { font-size: 14px; background: var(--ink); }
.ldone p { margin: 16px 0 20px; color: var(--grey); font-size: 15px; line-height: 1.45; }
@media (max-width: 809px) { .link-card { padding: 28px 20px; } }
.lunlink { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.lunlink summary { cursor: pointer; font-size: 13px; color: var(--grey); }
.lunlink[open] summary { margin-bottom: 10px; }
.lunlink .c-form { margin-top: 12px; }