/* ─────────────────────────────────────────────────────────────────────────────
 * Capillary — site styles. Built on styles/tokens.css.
 * Cooler / austere standards-body posture. Dark marine bookends (hero,
 * ownership, ask), cool near-white reading sections between. The capillary
 * motif is woven through as a structural device.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Layout primitives ───────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
.reading { max-width: var(--reading-w); }
.section { position: relative; padding: var(--sp-24) 0; overflow: clip; }
.section--tight { padding: var(--sp-16) 0; }
.section--deep { background: var(--bg-deep); }
.section--dark { background: var(--marine-900); color: #C9D8E8; }
.section--dark h2, .section--dark h3, .section--dark .display { color: #F4F8FC; }
.section--dark .eyebrow { color: var(--terra-300); }

.section-head { max-width: 720px; }
.section-head .eyebrow { display: block; margin-bottom: var(--sp-4); }
.section-head h2 { margin-bottom: var(--sp-5); }
.section-head .lede { color: var(--fg-muted); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.section--dark .section-head .lede { color: #9FB6CE; }

.eyebrow-row { display: flex; align-items: center; gap: 12px; }
.eyebrow-row .rule { height: 1px; width: 38px; background: var(--accent); opacity: calc(0.9 * var(--accent-strength)); flex: none; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px; font: inherit;
  font-weight: 600; font-size: 0.95rem; padding: 13px 24px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: transparent; color: var(--primary); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--primary); background: var(--surface); }
.btn-arrow { font-size: 1.05em; transform: translateY(0.5px); }
.btn-sm { padding: 9px 16px; font-size: 0.875rem; }

/* On dark sections */
.section--dark .btn-primary, .nav--dark .btn-primary { background: #fff; color: var(--marine-900); }
.section--dark .btn-primary:hover, .nav--dark .btn-primary:hover { background: #EAF0F6; }
.section--dark .btn-ghost, .nav--dark .btn-ghost { color: #CFE0F0; border-color: rgba(255,255,255,0.22); }
.section--dark .btn-ghost:hover, .nav--dark .btn-ghost:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 32px;
  background: color-mix(in srgb, var(--marine-900) 92%, transparent);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background var(--dur-med), border-color var(--dur-med);
}
.nav.is-light {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom-color: var(--border-soft);
}
.wordmark { font-weight: 600; font-size: 1.2rem; letter-spacing: -0.03em; color: #EAF0F6; text-decoration: none; }
.nav.is-light .wordmark { color: var(--fg); }
.wordmark .dot { color: var(--accent); }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: #9FB6CE; font-size: 0.9rem; font-weight: 500; }
.nav.is-light .nav-links a { color: var(--fg-muted); }
.nav-links a:hover { color: #fff; }
.nav.is-light .nav-links a:hover { color: var(--fg); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; }

/* ── Hero (dark, direction C) ────────────────────────────────────────────── */
.hero { position: relative; background: var(--marine-900); color: #C9D8E8; overflow: hidden; }
.hero .fullnet { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-inner { position: relative; z-index: 2; padding: var(--sp-20) 0 var(--sp-16); }
.hero .display { color: #F4F8FC; margin-top: var(--sp-5); max-width: 16ch; }
.hero .eyebrow { color: var(--terra-300); }
.hero .lead { color: #C9D8E8; font-size: clamp(1.1rem, 1.7vw, 1.35rem); margin-top: var(--sp-6); max-width: 56ch; line-height: var(--lh-relaxed); }
.hero .cta-row { display: flex; gap: 14px; margin-top: var(--sp-8); flex-wrap: wrap; }
.hero .proof {
  display: grid; grid-template-columns: repeat(3, auto); gap: var(--sp-12);
  margin-top: var(--sp-16); padding-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.14); width: fit-content;
}
.hero .proof .p b { display: block; color: #fff; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; }
.hero .proof .p span { color: #9FB6CE; font-size: 0.85rem; max-width: 18ch; display: block; }
.hero .proof .p .ac { color: var(--terra-300); }
.hero-foot { display:flex; gap: 8px; align-items:center; margin-top: var(--sp-8); color:#7E96B2; font-size: 0.82rem; }
.hero-foot .dot-sep { width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5; }

/* ── Generic cards ───────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  padding: var(--sp-6); transition: box-shadow var(--dur-med) var(--ease-soft), border-color var(--dur-med), transform var(--dur-med);
}
.section--dark .card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.12); }

/* ── The problem ─────────────────────────────────────────────────────────── */
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-12); }
.problem-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.problem-card .ic { width: 40px; height: 40px; color: var(--primary); }
.problem-card h3 { font-size: 1.15rem; }
.problem-card p { color: var(--fg-muted); font-size: 1rem; line-height: var(--lh-relaxed); }
.problem-lead { font-size: clamp(1.3rem, 2.3vw, 1.7rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.4; color: var(--fg); max-width: 24ch; }
.problem-lead .em { color: var(--accent); font-style: italic; font-weight: 400; }

/* the moat callout */
.moat {
  margin-top: var(--sp-16); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-12);
  align-items: start; padding-top: var(--sp-12); border-top: 1px solid var(--border);
}
.moat .moat-label { font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; color: var(--fg); line-height: 1.3; }
.moat .moat-body p { color: var(--fg-body); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.moat .moat-body p + p { margin-top: var(--sp-4); }
.moat strong { color: var(--fg); font-weight: 600; }
.moat .moat-proof { margin-top: var(--sp-5); padding-left: var(--sp-4); border-left: 2px solid var(--accent); font-size: 1rem; line-height: var(--lh-relaxed); color: var(--fg-muted); }
.moat .moat-proof .kicker { font-weight: 600; color: var(--accent); }
.moat .moat-proof em { font-style: italic; color: var(--fg); }

/* ── Four pillars ────────────────────────────────────────────────────────── */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); margin-top: var(--sp-12); }
.pillar { position: relative; display: flex; gap: var(--sp-5); align-items: flex-start; }
.pillar .num {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--primary); font-weight: 600; font-size: 1rem;
  font-feature-settings: "tnum"; background: var(--surface);
}
.pillar h3 { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.pillar p { color: var(--fg-muted); line-height: var(--lh-relaxed); font-size: 1rem; }
.pillar .tag { display:inline-block; margin-top: var(--sp-3); font-size: var(--fs-micro); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color: var(--accent); }

/* ── Evidence / stats ────────────────────────────────────────────────────── */
.evidence-lead {
  display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-6);
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  margin-top: var(--sp-8); max-width: 820px;
}
.evidence-lead .ic { color: var(--success); flex: none; width: 28px; height: 28px; margin-top: 2px; }
.evidence-lead p { font-size: 1.0625rem; line-height: var(--lh-relaxed); }
.evidence-lead code { font-family: var(--font-num); background: var(--surface-sunk); padding: 2px 7px; border-radius: var(--r-xs); font-size: 0.9em; color: var(--fg); }

.findings { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-10); }
.finding { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-5); border-top: 2px solid var(--marine-700); }
.finding .big { font-size: 2.4rem; font-weight: 600; letter-spacing: -0.025em; color: var(--fg); line-height: 1; }
.finding .big.ac { color: var(--accent); }
.finding .big.ok { color: var(--success); }
.finding h4 { font-size: 1rem; font-weight: 600; color: var(--fg); }
.finding p { color: var(--fg-muted); font-size: 0.95rem; line-height: 1.55; }
.finding .src { font-size: var(--fs-micro); color: var(--fg-faint); font-family: var(--font-num); margin-top: auto; padding-top: var(--sp-2); }

/* ── Demo shells ─────────────────────────────────────────────────────────── */
.demo {
  margin-top: var(--sp-10); background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1);
}
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.demo-head .title { display:flex; flex-direction:column; gap: 3px; }
.demo-head h3 { font-size: 1.15rem; }
.demo-head .sub { color: var(--fg-muted); font-size: 0.9rem; }
.demo-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.demo-body { padding: var(--sp-6); }
.market-2up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.market-panel { display: flex; flex-direction: column; gap: var(--sp-3); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: var(--sp-5); background: var(--surface-alt); }
.market-panel.is-cap { border-color: var(--marine-200); }
.market-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.market-panel-head .label { display:flex; align-items:center; gap:8px; font-weight: 600; color: var(--fg); font-size: 1rem; }
.market-panel-head .swatch { width: 11px; height: 11px; border-radius: 3px; }
.market-panel-head .tag { font-size: var(--fs-micro); color: var(--fg-muted); }
.chart-wrap { position: relative; width: 100%; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.panel-caption { font-size: 0.92rem; color: var(--fg-muted); line-height: 1.5; min-height: 3em; }
.panel-caption b { color: var(--fg); font-weight: 600; }
.panel-result { display:flex; gap: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--border-soft); }
.panel-result .r b { display:block; font-size: 1.3rem; font-weight: 600; color: var(--fg); letter-spacing:-0.02em; }
.panel-result .r .ac { color: var(--accent); }
.panel-result .r span { font-size: var(--fs-micro); color: var(--fg-muted); }

.payoff { margin-top: var(--sp-5); padding: var(--sp-5) var(--sp-6); background: var(--primary-soft); border-radius: var(--r-md); font-size: 1.05rem; line-height: var(--lh-relaxed); color: var(--marine-900); }
.payoff b { font-weight: 600; }
.payoff.is-hidden { display: none; }

/* toggle switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 0.9rem; color: var(--fg-body); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 40px; height: 23px; border-radius: 999px; background: var(--surface-sunk); border: 1px solid var(--border); position: relative; transition: background var(--dur-fast); flex: none; }
.switch .track::after { content:""; position:absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform var(--dur-fast) var(--ease-soft); }
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::after { transform: translateX(17px); }
.switch input:focus-visible + .track { box-shadow: var(--ring-focus); }

/* ── Liquidity dial ──────────────────────────────────────────────────────── */
.dial-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-8); align-items: center; }
.dial-readout { display: flex; flex-direction: column; gap: var(--sp-5); }
.dial-traders { font-size: 0.9rem; color: var(--fg-muted); }
.dial-traders b { font-size: 2.2rem; font-weight: 600; color: var(--fg); letter-spacing: -0.02em; display:block; }
.dial-vals { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.dial-val .k { display:flex; align-items:center; gap: 7px; font-size: 0.85rem; color: var(--fg-muted); }
.dial-val .k .sw { width: 14px; height: 3px; border-radius: 2px; }
.dial-val .v { font-size: 1.5rem; font-weight: 600; color: var(--fg); letter-spacing: -0.02em; }
.dial-verdict { font-size: 1.05rem; line-height: var(--lh-relaxed); color: var(--fg-body); border-left: 2px solid var(--accent); padding-left: var(--sp-4); min-height: 3.2em; }
.dial-verdict b { color: var(--fg); }
.range { width: 100%; margin-top: var(--sp-4); accent-color: var(--primary); height: 28px; }
.range-labels { display:flex; justify-content: space-between; font-size: var(--fs-micro); color: var(--fg-faint); font-family: var(--font-num); margin-top: -4px; }

/* ── How it's owned (dark) ───────────────────────────────────────────────── */
.owned-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-12); }
.owned-card { padding: var(--sp-6); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-md); background: rgba(255,255,255,0.03); display:flex; flex-direction:column; gap: var(--sp-3); }
.owned-card .ic { width: 34px; height: 34px; color: var(--terra-300); }
.owned-card h3 { color: #F4F8FC; font-size: 1.15rem; }
.owned-card p { color: #9FB6CE; font-size: 0.98rem; line-height: var(--lh-relaxed); }
.owned-toll { margin-top: var(--sp-12); padding-top: var(--sp-10); border-top: 1px solid rgba(255,255,255,0.14); display:grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-12); }
.owned-toll .h { font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; color: #F4F8FC; line-height: 1.3; }
.owned-toll p { color: #B8C9DC; line-height: var(--lh-relaxed); }
.owned-toll p + p { margin-top: var(--sp-4); }
.owned-toll strong { color: #fff; font-weight: 600; }

/* ── Europe ──────────────────────────────────────────────────────────────── */
.europe-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); margin-top: var(--sp-10); align-items:start; }
.europe-stats { display:flex; flex-direction:column; gap: var(--sp-5); }
.europe-stat { display:flex; gap: var(--sp-4); align-items: baseline; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border-soft); }
.europe-stat .n { font-size: 2rem; font-weight: 600; color: var(--primary); letter-spacing: -0.025em; flex: none; min-width: 3.2ch; }
.europe-stat .t { color: var(--fg-body); font-size: 1rem; line-height: 1.5; }
.europe-body p { color: var(--fg-body); line-height: var(--lh-relaxed); }
.europe-body p + p { margin-top: var(--sp-4); }
.europe-body strong { color: var(--fg); font-weight:600; }
.chips { display:flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-6); }
.chip { font-size: var(--fs-micro); font-weight:600; letter-spacing:0.02em; color: var(--fg-muted); background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--r-pill); padding: 6px 12px; }

/* ── Audience paths ──────────────────────────────────────────────────────── */
.audience-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); margin-top: var(--sp-10); }
.aud {
  display:flex; flex-direction:column; gap: var(--sp-3); padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  text-decoration: none; transition: border-color var(--dur-med), box-shadow var(--dur-med), transform var(--dur-med);
}
.aud:hover { border-color: var(--marine-200); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.aud .ic { width: 26px; height: 26px; color: var(--primary); }
.aud h4 { font-size: 1rem; color: var(--fg); }
.aud p { font-size: 0.9rem; color: var(--fg-muted); line-height: 1.5; flex: 1; }
.aud .go { font-size: var(--fs-micro); font-weight: 600; color: var(--primary); letter-spacing: 0.02em; display:flex; align-items:center; gap:5px; }

/* ── The ask (dark) ──────────────────────────────────────────────────────── */
.ask { position: relative; overflow: hidden; }
.ask .fullnet { position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
.ask-inner { position: relative; z-index: 2; }
.ask-status { display:inline-flex; align-items:center; gap: 9px; font-size: 0.85rem; color: #9FB6CE; border:1px solid rgba(255,255,255,0.18); border-radius: var(--r-pill); padding: 7px 14px; }
.ask-status .pulse { width: 8px; height: 8px; border-radius:50%; background: var(--sage-500); box-shadow: 0 0 0 0 rgba(91,132,117,0.5); animation: pulse 2.4s var(--ease-soft) infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(91,132,117,.5)} 70%{box-shadow:0 0 0 8px rgba(91,132,117,0)} 100%{box-shadow:0 0 0 0 rgba(91,132,117,0)} }
.ask h2 { margin-top: var(--sp-5); max-width: 18ch; }
.ask-list { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); margin-top: var(--sp-10); }
.ask-item { padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,0.16); }
.ask-item h4 { color:#F4F8FC; font-size:1.05rem; margin-bottom: var(--sp-2); }
.ask-item p { color:#9FB6CE; font-size:0.95rem; line-height: var(--lh-relaxed); }
.ask-cta { margin-top: var(--sp-12); display:flex; align-items:center; gap: var(--sp-5); flex-wrap: wrap; }
.ask-cta .email { font-size: 1.25rem; font-weight: 600; color:#F4F8FC; letter-spacing:-0.01em; text-decoration:none; border-bottom: 2px solid var(--terra-500); padding-bottom: 2px; }
.ask-cta .email:hover { color:#fff; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { background: var(--marine-900); color: #7E96B2; padding: var(--sp-12) 0 var(--sp-10); border-top: 1px solid rgba(255,255,255,0.08); }
.footer-top { display:flex; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; align-items: flex-start; }
.footer .wordmark { color:#EAF0F6; }
.footer-tag { max-width: 30ch; font-size: 0.92rem; margin-top: var(--sp-3); color:#7E96B2; line-height: 1.6; }
.footer-cols { display:flex; gap: var(--sp-16); flex-wrap: wrap; }
.footer-col h5 { color:#9FB6CE; font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-3); font-weight:600; }
.footer-col a { display:block; color:#A7BBD2; font-size:0.92rem; padding: 4px 0; }
.footer-col a:hover { color:#fff; }
.footer-bottom { margin-top: var(--sp-12); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,0.08); display:flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; font-size: 0.82rem; color:#6B82A0; }

/* ── Section divider motif ───────────────────────────────────────────────── */
.divider-motif { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none; }
.divider-motif svg { position:absolute; left:0; right:0; bottom: 0; width: 100%; height: 110px; }

/* ── Scroll reveal ───────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .problem-grid, .findings, .owned-grid, .ask-list { grid-template-columns: 1fr 1fr; }
  .pillars, .moat, .owned-toll, .europe-grid, .market-2up, .dial-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .hero .proof { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-10); }
}
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .section { padding: var(--sp-16) 0; }
  .problem-grid, .findings, .owned-grid, .ask-list, .audience-grid { grid-template-columns: 1fr; }
  .hero .proof { grid-template-columns: 1fr; gap: var(--sp-5); }
}