/* ============================================================
   TrueCost — Brand design system
   Palette + type extracted from truecost.care (dembrandt tokens)
   Primary #579cbc · Gold #ffc800 · Steel #709098 · Ink #111
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* brand */
  --tc-primary:        #579cbc;
  --tc-primary-deep:   #3b7d9c;
  --tc-primary-light:  #a2d0e5;
  --tc-primary-glow:   rgba(87, 156, 188, 0.35);
  --tc-gold:           #ffc800;
  --tc-gold-deep:      #d78e2c;
  --tc-steel:          #709098;
  --tc-success:        #027a48;
  --tc-error:          #b42318;

  /* ink + paper */
  --tc-ink:            #0e1417;   /* near-black with a cool undertone */
  --tc-ink-2:          #1b2429;
  --tc-paper:          #fafafa;
  --tc-white:          #ffffff;
  --tc-n-900:          #111111;
  --tc-n-700:          #333333;
  --tc-n-600:          #555555;
  --tc-n-500:          #6b7378;
  --tc-n-300:          #c9ced1;
  --tc-n-200:          #e6e9ea;
  --tc-n-100:          #eef1f2;

  /* type */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius: 14px;
  --radius-sm: 9px;
  --hairline: 1px solid var(--tc-n-200);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--tc-ink);
  color: var(--tc-n-900);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- logo mark (tintable via currentColor) ---- */
.wing {
  display: inline-block;
  -webkit-mask: url('../img/wing.svg') center / contain no-repeat;
          mask: url('../img/wing.svg') center / contain no-repeat;
  background: currentColor;
}

/* wordmark lockup */
.lockup { display: inline-flex; align-items: center; gap: 0.55em; line-height: 1; }
.lockup .wing { width: 1.55em; height: 0.65em; }
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.wordmark .dot { color: var(--tc-gold); }

/* ---- shared content primitives (used inside slides) ---- */
.kicker {
  font-family: var(--font-mono);
  font-size: 1.5cqw;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6.4cqw;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.headline.sm { font-size: 5cqw; }
.headline.xl { font-size: 8.2cqw; }
.lead {
  font-size: 2.55cqw;
  line-height: 1.4;
  font-weight: 400;
  max-width: 46ch;
}
.lead.tight { line-height: 1.32; }
em.hl { font-style: normal; color: var(--tc-primary); font-weight: 700; }
em.gold { font-style: normal; color: var(--tc-gold-deep); font-weight: 700; }

/* the giant accent figure */
.figure {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* monospaced data ticker, e.g. BUILT ON BASE · USDC-BACKED */
.ticker {
  font-family: var(--font-mono);
  font-size: 1.5cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* pill / tag */
.pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 1.25cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5em 0.9em;
  border-radius: 999px;
  border: 1px solid currentColor;
}

/* stat grid */
.stat-grid { display: grid; gap: 2.2cqw 3cqw; }
.stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 5.4cqw;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat .lab { font-size: 1.7cqw; line-height: 1.25; margin-top: 0.45em; opacity: 0.82; }

/* simple data table */
.dtable { width: 100%; border-collapse: collapse; font-size: 1.85cqw; }
.dtable th, .dtable td { text-align: left; padding: 1.15cqh 1.1cqw; border-bottom: 1px solid var(--tc-n-200); }
.dtable th { font-family: var(--font-mono); font-size: 1.25cqw; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; font-weight: 700; }
.dtable td.em { font-weight: 700; }
.dtable .tc-col { color: var(--tc-primary-deep); font-weight: 700; }

/* columns */
.cols { display: grid; gap: 3cqw; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.col-h {
  font-family: var(--font-display);
  font-weight: 700; font-size: 2.4cqw; letter-spacing: -0.02em;
  margin: 0 0 0.6em;
}
.bullets { list-style: none; margin: 0; padding: 0; }
.bullets li { font-size: 1.85cqw; line-height: 1.45; padding-left: 1.4em; position: relative; margin-bottom: 0.5em; }
.bullets li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.55em; height: 0.55em; border-radius: 2px; background: var(--tc-primary); }
.bullets.gold li::before { background: var(--tc-gold); }

/* callout band */
.callout {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.5cqw;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* helpers */
.mono-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.muted { opacity: 0.62; }

/* ---- email-the-PDF modal ---- */
.tc-modal {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(8,12,14,0.55); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.25s var(--ease); padding: 20px;
}
.tc-modal.open { opacity: 1; }
.tc-modal__card {
  background: #fff; color: var(--tc-n-900); width: min(420px, 100%);
  border-radius: 18px; padding: 30px 30px 26px; position: relative;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.6);
  transform: translateY(12px) scale(0.98); transition: transform 0.3s var(--ease);
}
.tc-modal.open .tc-modal__card { transform: none; }
.tc-modal__x { position: absolute; top: 12px; right: 16px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--tc-n-500); cursor: pointer; }
.tc-modal__card h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; margin: 16px 0 6px; letter-spacing: -0.02em; }
.tc-modal__card p { font-size: 14px; color: var(--tc-n-600); margin: 0 0 16px; }
.tc-modal__card .lockup .wing { width: 30px; height: 13px; }
#pdfForm { display: flex; flex-direction: column; gap: 10px; }
#pdfForm input { font-family: var(--font-body); font-size: 15px; padding: 12px 14px; border: 1px solid var(--tc-n-300); border-radius: 10px; outline: none; transition: border-color 0.2s; }
#pdfForm input:focus { border-color: var(--tc-primary); }
.tc-modal__msg { min-height: 1.2em; font-size: 13px; margin: 4px 0 0 !important; }
.tc-modal__msg.ok { color: var(--tc-success); }