/* Sales landing — sections below the hero. Layered on the shared classes in
   site.css (.hero, .pillars, .cta-band). Token-only, per the design system
   (raw px only for icon dimensions, matching site.css). */

/* Shared section header: eyebrow + headline + optional sub, centered. */
.section-head {
  text-align: center;
  max-width: var(--container-prose);
  margin: 0 auto var(--space-10);
}
.section-head h2 {
  font: var(--text-h2);
  color: var(--text-strong);
  text-wrap: balance;
  margin: var(--space-2) 0 0;
}
.section-head .section-sub {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  margin: var(--space-3) 0 0;
}

/* Trust strip — evergreen positioning facts under the hero. */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  padding: var(--space-6);
  margin-bottom: var(--space-16);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--fw-semibold) var(--fs-sm) / 1.2 var(--font-sans);
  color: var(--text-strong);
}
.trust-item i, .trust-item svg { width: 18px; height: 18px; color: var(--brand); }

/* --- What is Coins of Record — the two pillars, with miniature UI mocks. --- */
.whatis-section { padding-bottom: var(--space-20); }
.whatis-section .pillars { padding-bottom: 0; }
.whatis-section .pillar-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pillar-visual {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  min-height: 12.5rem;
}
.pillar-body { padding: var(--space-6) var(--space-8) var(--space-8); }
.pillar-body h3 {
  font: var(--text-h3);
  color: var(--text-strong);
  margin: var(--space-2) 0 var(--space-2);
}
.pillar-body p { margin: 0 0 var(--space-4); color: var(--text-body); }
.pillar-link {
  font: var(--fw-semibold) var(--fs-sm) / 1 var(--font-sans);
  color: var(--brand-ink);
  text-decoration: none;
}
.pillar-link:hover { color: var(--link-hover); text-decoration: underline; }

/* Circular coin photo crop, shared by both mocks. Images are square photos;
   the inner img is scaled up so the coin fills the circle. */
.mock-coin {
  display: block;
  flex: none;
  border-radius: var(--radius-coin);
  overflow: hidden;
  width: var(--space-16);
  height: var(--space-16);
  box-shadow: var(--shadow-md);
  border: 2px solid var(--surface-card);
}
.mock-coin img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* These scale factors are hand-tuned to the current crops of hero/coin-a.jpg
   (coin sits small in frame) and hero/coin-b.jpg (nearly fills it). If either
   asset is swapped, re-tune the matching value so the coin fills the circle. */
.mock-coin--a img { transform: scale(1.6); }
.mock-coin--b img { transform: scale(1.12); }

/* Mini coin record: coin + title + facts + provenance chain + QR chip. */
.mock-record {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
}
.mock-record-main { flex: 1; min-width: 0; }
.mock-title {
  display: block;
  font: var(--fw-bold) var(--fs-body) / 1.2 var(--font-serif);
  color: var(--text-strong);
}
.mock-facts {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: var(--space-1) 0 var(--space-3);
}
.mock-chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mock-chain li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--fw-medium) var(--fs-xs) / 1.4 var(--font-sans);
  color: var(--text-body);
}
.mock-chain i, .mock-chain svg { width: 13px; height: 13px; color: var(--brand); flex: none; }
.mock-chain .is-locked, .mock-chain li.is-locked { color: var(--brand-ink); font-weight: var(--fw-semibold); }
.mock-qr {
  flex: none;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-ink);
  color: var(--brass-2);
}
.mock-qr i, .mock-qr svg { width: 22px; height: 22px; }

/* Mini trade match: two coins around a swap chip, then the match alert.
   Wrapped in the same card surface as the record mock so both pillars read
   as product UI. */
.mock-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mock-exchange {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}
.mock-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.mock-tag {
  font: var(--fw-bold) var(--fs-overline) / 1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
}
.mock-swap {
  flex: none;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-coin);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: var(--text-on-brass);
  box-shadow: var(--sheen-brass), var(--shadow-sm);
  margin-bottom: var(--space-6); /* optically centers on the coins, above the tags */
}
.mock-swap i, .mock-swap svg { width: 18px; height: 18px; }
.mock-match {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  font: var(--fw-semibold) var(--fs-sm) / 1.2 var(--font-sans);
  color: var(--brand-ink);
}
.mock-match i, .mock-match svg { width: 15px; height: 15px; color: var(--brand); }

/* The "How it works", "Beyond the trade", and "See it live" sections were cut
   from this first pass. Their markup + styles will be re-added together when
   those sections return, so no speculative CSS ships here in the meantime. */