/* ============================================================
   Parfait — Brand design system
   Palette + type pulled from parfait-app (globals.css) + the live site.
   Coral #F25F50 · Cream #F9F8E6 · Plum #7A4252 · Lilac #F2BCFF · Iris #4872FF
   Display: gelica (Adobe Typekit) · Body: Lato · Mono: Inconsolata
   gelica is loaded via the Typekit <link> in each page head; Fraunces is the
   web-safe fallback so headlines keep their soft-serif character if Typekit
   is blocked.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Inconsolata:wght@400;500;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

:root {
  /* ---- brand ---- */
  --pf-coral:        #F25F50;   /* signature surface + primary */
  --pf-coral-deep:   #D8412E;   /* legible coral for text/accents on cream */
  --pf-coral-soft:   #F79286;
  --pf-cream:        #F9F8E6;   /* primary card surface */
  --pf-cream-2:      #F4F1B6;   /* pale-gold alt surface tier */
  --pf-cream-3:      #EBE8A8;   /* deeper pale gold */
  --pf-plum:         #7A4252;   /* body text on cream / mid surface */
  --pf-plum-2:       #5A2E3C;   /* mid plum */
  --pf-plum-deep:    #3A1D27;   /* dark slide canvas (espresso plum) */
  --pf-lilac:        #F2BCFF;   /* light lilac accent (pops on plum) */
  --pf-lilac-deep:   #B768D6;   /* legible lilac on cream */
  --pf-iris:         #4872FF;   /* iris-blue accent */
  --pf-iris-deep:    #2C4FDB;
  --pf-honey:        #E7A33C;   /* warm honey/amber data accent (the bee) */
  --pf-success:      #2E7D5B;

  /* plum alphas over cream surfaces */
  --pf-ink-88: #3A1D27e0;
  --pf-ink-64: #3A1D27a3;
  --pf-ink-48: #3A1D277a;
  --pf-ink-16: #3A1D2729;
  --pf-ink-10: #3A1D271a;
  /* cream alphas over coral / plum surfaces */
  --pf-paper-88: #F9F8E6e0;
  --pf-paper-64: #F9F8E6a3;
  --pf-paper-48: #F9F8E67a;
  --pf-paper-16: #F9F8E629;
  --pf-paper-10: #F9F8E61a;

  /* ---- type ---- */
  --font-display: 'gelica', 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Lato', system-ui, -apple-system, sans-serif;
  --font-mono:    'Inconsolata', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius: 22px;
  --radius-sm: 13px;
  --hairline: 1px solid var(--pf-ink-16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--pf-plum-deep);
  color: var(--pf-plum);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- logo lockup: the bee mark + a typeset wordmark ---- */
.lockup { display: inline-flex; align-items: center; gap: 0.5em; line-height: 1; }
.lockup .bee {
  height: 1.15em; width: auto; flex: none;
  display: inline-block; transform: translateY(-0.04em);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
}

/* ---- shared content primitives (used inside slides) ---- */
.kicker {
  font-family: var(--font-mono);
  font-size: 1.5cqw;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 6.4cqw;
  line-height: 1.03;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.headline.sm { font-size: 5cqw; }
.headline.xl { font-size: 8.6cqw; letter-spacing: -0.03em; }
.lead {
  font-size: 2.5cqw;
  line-height: 1.45;
  font-weight: 400;
  max-width: 46ch;
}
.lead.tight { line-height: 1.32; }

/* inline emphasis — colour resolved per theme in deck.css */
em.hl   { font-style: normal; color: var(--pf-coral-deep); font-weight: 700; }
em.iris { font-style: normal; color: var(--pf-iris-deep);  font-weight: 700; }
em.serif{ font-style: italic; font-family: var(--font-display); font-weight: 500; }

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

/* monospaced data ticker */
.ticker {
  font-family: var(--font-mono);
  font-size: 1.5cqw;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

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

/* stat grid */
.stat-grid { display: grid; gap: 2.4cqw 3cqw; }
.stat .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5.4cqw;
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.stat .lab { font-size: 1.65cqw; line-height: 1.28; margin-top: 0.5em; 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.1cqh 1.1cqw; border-bottom: 1px solid var(--pf-ink-16); }
.dtable th { font-family: var(--font-mono); font-size: 1.2cqw; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.65; font-weight: 600; }
.dtable td.em { font-weight: 700; }
.dtable .pf-col { color: var(--pf-coral-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: 600; font-size: 2.4cqw; letter-spacing: -0.015em;
  margin: 0 0 0.6em;
}
.bullets { list-style: none; margin: 0; padding: 0; }
.bullets li { font-size: 1.85cqw; line-height: 1.48; padding-left: 1.5em; position: relative; margin-bottom: 0.55em; }
.bullets li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 0.6em; height: 0.6em; border-radius: 50%; background: currentColor; }
.bullets.iris li::before { background: currentColor; }
.bullets.lilac li::before { background: currentColor; }

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

/* helpers */
.mono-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.muted { opacity: 0.6; }
.serif-q { font-family: var(--font-display); font-style: italic; font-weight: 500; }

/* ---- email-the-PDF modal ---- */
.pf-modal {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(58,29,39,0.55); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.25s var(--ease); padding: 20px;
}
.pf-modal.open { opacity: 1; }
.pf-modal__card {
  background: var(--pf-cream); color: var(--pf-plum); width: min(430px, 100%);
  border-radius: 22px; padding: 32px 32px 28px; position: relative;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.55);
  transform: translateY(12px) scale(0.98); transition: transform 0.3s var(--ease);
}
.pf-modal.open .pf-modal__card { transform: none; }
.pf-modal__x { position: absolute; top: 14px; right: 18px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--pf-ink-48); cursor: pointer; }
.pf-modal__card h3 { font-family: var(--font-display); font-weight: 600; font-size: 25px; margin: 14px 0 6px; letter-spacing: -0.015em; }
.pf-modal__card p { font-size: 14px; color: var(--pf-ink-64); margin: 0 0 16px; }
#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(--pf-ink-16); border-radius: 12px; outline: none; transition: border-color 0.2s; background: #fff; color: var(--pf-plum); }
#pdfForm input:focus { border-color: var(--pf-coral); }
.pf-modal__msg { min-height: 1.2em; font-size: 13px; margin: 4px 0 0 !important; }
.pf-modal__msg.ok { color: var(--pf-success); }