/* ==========================================================================
   Personal Finance Deck — Late Spring / Early Summer Light Theme
   ========================================================================== */

:root {
  --bg-1:        #fbfaf4;            /* warm cream */
  --bg-2:        #eef6ee;            /* pale leaf */
  --bg-3:        #e7f1f8;            /* soft sky */
  --ink:         #1f2a2e;            /* deep slate */
  --ink-soft:    #4d5a60;
  --muted:       #7d8a90;
  --line:        #d9e2dd;

  --sage:        #8bb89a;            /* primary */
  --sage-deep:   #4f8a64;
  --sky:         #7fb6d6;
  --sky-deep:    #3d7fa8;
  --peach:       #f4b893;
  --peach-deep:  #e0875a;
  --gold:        #e6c875;
  --rose:        #e8a3aa;
  --lilac:       #c5b3e0;

  --shadow-sm: 0 2px 8px rgba(31, 42, 46, 0.06);
  --shadow-md: 0 8px 28px rgba(31, 42, 46, 0.10);
  --shadow-lg: 0 20px 60px rgba(31, 42, 46, 0.12);
  --radius:    14px;
  --radius-sm: 8px;
}

/* ---------- Global Reveal overrides ---------- */
html, body { background: var(--bg-1); }

.reveal {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--ink);
  font-size: 30px;
  letter-spacing: -0.005em;
}

.reveal-viewport {
  background:
    radial-gradient(1200px 800px at 85% -10%, rgba(127,182,214,0.18), transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, rgba(139,184,154,0.22), transparent 55%),
    radial-gradient(700px 500px at 50% 120%, rgba(244,184,147,0.14), transparent 60%),
    var(--bg-1) !important;
}

.reveal .slides { text-align: left; }

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-shadow: none;
  margin-bottom: 0.5em;
}
.reveal h1 { font-size: 2.6em; }
.reveal h2 { font-size: 2.05em; margin-bottom: 0.45em; }
.reveal h3 { font-size: 1.3em; color: var(--sage-deep); }
.reveal h4 { font-size: 1.05em; color: var(--ink-soft); font-weight: 500; }

.reveal p { line-height: 1.55; color: var(--ink-soft); }
.reveal a { color: var(--sky-deep); text-decoration: none; border-bottom: 1px dashed var(--sky); }

.reveal ul, .reveal ol { display: block; margin-left: 1.2em; }
.reveal li { margin: 0.35em 0; line-height: 1.5; color: var(--ink-soft); }
.reveal li::marker { color: var(--sage-deep); }

.reveal strong { color: var(--ink); font-weight: 600; }
.reveal em { color: var(--sage-deep); font-style: italic; }

/* ---------- Reveal controls / progress ---------- */
.reveal .controls { color: var(--sage-deep) !important; }
.reveal .progress { color: var(--sage-deep) !important; height: 4px; }
.reveal .progress span { background: linear-gradient(90deg, var(--sage), var(--sky)); }
.reveal .slide-number { color: var(--muted); background: rgba(255,255,255,0.6); border-radius: 6px; padding: 4px 8px; font-family: 'Inter', sans-serif; font-size: 14px; }

/* ---------- Title slide ---------- */
.title-slide {
  text-align: center !important;
  padding: 0 !important;
}
.title-slide .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.55em;
  color: var(--sage-deep);
  margin-bottom: 1.2em;
  font-weight: 500;
}
.title-slide h1 {
  font-size: 3.2em;
  background: linear-gradient(120deg, var(--sage-deep), var(--sky-deep) 60%, var(--peach-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.3em;
}
.title-slide .subtitle {
  font-size: 1.1em;
  color: var(--ink-soft);
  font-style: italic;
  font-family: 'Fraunces', serif;
  margin-bottom: 2em;
}
.title-slide .presenter {
  font-size: 0.7em;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.floral {
  position: absolute;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(0.2px);
}

/* ---------- Section eyebrow ---------- */
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.45em;
  color: var(--sage-deep);
  background: rgba(139,184,154,0.15);
  padding: 0.4em 0.9em;
  border-radius: 999px;
  font-weight: 600;
  margin-bottom: 1em;
}

/* ---------- Cards ---------- */
.card {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2em 1.4em;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1em;
  margin-top: 1.2em;
}
.card .card-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.15em; color: var(--ink); margin-bottom: 0.35em; }
.card .card-num { font-family: 'Fraunces', serif; font-size: 2.2em; font-weight: 600; color: var(--sage-deep); line-height: 1; }
.card .card-sub { font-size: 0.7em; color: var(--muted); margin-top: 0.4em; }

.card.accent-sage { border-left: 4px solid var(--sage-deep); }
.card.accent-sky { border-left: 4px solid var(--sky-deep); }
.card.accent-peach { border-left: 4px solid var(--peach-deep); }
.card.accent-gold { border-left: 4px solid var(--gold); }
.card.accent-rose { border-left: 4px solid var(--rose); }
.card.accent-lilac { border-left: 4px solid var(--lilac); }

/* ---------- Two-column layouts ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; align-items: center; }
.two-col.narrow-left { grid-template-columns: 0.9fr 1.1fr; }
.two-col.narrow-right { grid-template-columns: 1.1fr 0.9fr; }

/* ---------- Forms / interactive controls ---------- */
.controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.8em 1em;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1em 1.2em;
  box-shadow: var(--shadow-sm);
}
.field { display: flex; flex-direction: column; }
.field label {
  font-size: 0.55em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.3em;
  font-weight: 600;
}
.field input[type="number"],
.field input[type="text"] {
  font-family: 'Inter', sans-serif;
  font-size: 0.85em;
  padding: 0.45em 0.6em;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field input:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(139,184,154,0.25);
}

.field input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sage), var(--sky));
  outline: none;
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px; width: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--sage-deep);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.65em;
  padding: 0.55em 1.1em;
  background: var(--sage-deep);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.05em;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.15s ease;
}
.btn:hover { background: #3f7050; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--sage-deep); border: 1.5px solid var(--sage); }
.btn.ghost:hover { background: rgba(139,184,154,0.12); }

/* ---------- Charts ---------- */
.chart-wrap {
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1em;
  box-shadow: var(--shadow-md);
  position: relative;
}
.chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* ---------- Stat readouts ---------- */
.stat-row { display: flex; gap: 1em; flex-wrap: wrap; margin-top: 0.8em; }
.stat {
  flex: 1 1 0;
  min-width: 130px;
  background: rgba(255,255,255,0.78);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.9em;
  border: 1px solid var(--line);
}
.stat .stat-label {
  font-size: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
}
.stat .stat-value {
  font-family: 'Fraunces', serif;
  font-size: 1.5em;
  font-weight: 600;
  color: var(--ink);
  margin-top: 0.1em;
}
.stat .stat-value.sage { color: var(--sage-deep); }
.stat .stat-value.sky { color: var(--sky-deep); }
.stat .stat-value.peach { color: var(--peach-deep); }

/* ---------- Tables ---------- */
.fin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.7em;
  background: rgba(255,255,255,0.85);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.fin-table th {
  background: var(--bg-2);
  color: var(--ink);
  text-align: left;
  padding: 0.7em 0.9em;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78em;
}
.fin-table td {
  padding: 0.7em 0.9em;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
.fin-table tr:hover td { background: rgba(139,184,154,0.06); }
.fin-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: 'Inter', sans-serif; }
.fin-table .highlight { background: linear-gradient(90deg, rgba(244,184,147,0.2), rgba(230,200,117,0.15)); font-weight: 600; color: var(--ink); }

/* Larger variant — used on the 50/30/20 slide where the table is the hero */
.fin-table.fin-table-lg              { font-size: 0.9em; }
.fin-table.fin-table-lg th           { padding: 0.75em 0.95em; font-size: 0.74em; }
.fin-table.fin-table-lg td           { padding: 0.7em 0.95em; }
.fin-table.fin-table-lg .highlight   { font-size: 1em; }
.fin-table.fin-table-lg td:first-child,
.fin-table.fin-table-lg th:first-child { white-space: nowrap; }

/* Per-slide opt-in: enforce a minimum content height so Reveal centers the
   slide as if it were as tall as the typical content slides — keeps the
   title and interactive badge at a consistent Y across the deck. */
.reveal .slides > section.match-height { min-height: 600px; }

/* ---------- Pillars (waterfall) ---------- */
.pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8em; margin-top: 1.2em; }
.pillar {
  position: relative;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line);
  border-top: 4px solid var(--sage);
  border-radius: var(--radius-sm);
  padding: 1em 0.9em;
  text-align: center;
  transition: transform 0.2s ease;
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pillar .step {
  font-family: 'Fraunces', serif;
  font-size: 1.6em;
  color: var(--sage-deep);
  font-weight: 600;
  display: block;
}
.pillar .label { font-size: 0.7em; font-weight: 600; color: var(--ink); margin-top: 0.4em; display: block; }
.pillar .desc { font-size: 0.55em; color: var(--muted); margin-top: 0.3em; line-height: 1.4; }
.pillar:nth-child(2) { border-top-color: var(--sky); } .pillar:nth-child(2) .step { color: var(--sky-deep); }
.pillar:nth-child(3) { border-top-color: var(--peach); } .pillar:nth-child(3) .step { color: var(--peach-deep); }
.pillar:nth-child(4) { border-top-color: var(--gold); } .pillar:nth-child(4) .step { color: #b89535; }
.pillar:nth-child(5) { border-top-color: var(--lilac); } .pillar:nth-child(5) .step { color: #7d68a3; }

/* ---------- Pull-quote / hero ---------- */
.pullquote {
  font-family: 'Fraunces', serif;
  font-size: 1.6em;
  line-height: 1.3;
  color: var(--ink);
  font-style: italic;
  border-left: 4px solid var(--sage);
  padding: 0.4em 1em;
  background: linear-gradient(90deg, rgba(139,184,154,0.08), transparent);
}
.pullquote .cite {
  display: block;
  font-size: 0.5em;
  font-style: normal;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  margin-top: 0.6em;
  letter-spacing: 0.05em;
}

/* ---------- Highlight chip ---------- */
.chip {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.42em;
  padding: 0.3em 0.7em;
  background: rgba(127,182,214,0.18);
  color: var(--sky-deep);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  position: relative;
  top: -0.15em;
}

/* Top-right anchored "interactive" badge on calculator slides.
   Uses `position: fixed` so it's positioned relative to the slide canvas
   (Reveal applies a transform on .slides which makes it the containing block
   for fixed children). That way the badge appears at the EXACT same location
   on every interactive slide, regardless of that slide's individual content
   height — no per-section drift from Reveal's vertical centering. */
.interactive-badge {
  position: fixed;
  top: 24px;
  right: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sage-deep);
  background: rgba(139,184,154,0.18);
  border: 1px solid rgba(139,184,154,0.35);
  padding: 0.25em 0.7em;
  border-radius: 999px;
  z-index: 5;
  pointer-events: none;
}
.interactive-badge::before {
  content: '✎';
  margin-right: 0.4em;
  color: var(--sage-deep);
}
.chip.sage { background: rgba(139,184,154,0.2); color: var(--sage-deep); }
.chip.peach { background: rgba(244,184,147,0.25); color: var(--peach-deep); }
.chip.gold { background: rgba(230,200,117,0.25); color: #a07f23; }

/* ---------- Account comparison ---------- */
.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; align-items: stretch; }
.account-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.05em 1.15em;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.account-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--sage);
}
.account-card.sky::before { background: var(--sky); }
.account-card.peach::before { background: var(--peach); }
.account-card h3 { margin-top: 0.2em; margin-bottom: 0.4em; font-size: 1.18em; }
.account-card .feature { font-size: 0.68em; color: var(--ink-soft); margin: 0.4em 0; padding-left: 1em; position: relative; line-height: 1.4; }
.account-card .feature::before { content: '✓'; position: absolute; left: 0; color: var(--sage-deep); font-weight: 600; }
.account-card p.small { font-size: 0.66em; margin: 0.2em 0 0.55em 0; }

/* Provider pills (where to open each account) — high-specificity rules
   to beat Reveal's inline element resets. */
.reveal .account-card .provider-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: auto;          /* push to the bottom of the flex column */
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.reveal .account-card .provider-pill-label {
  display: inline-block;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin-right: 2px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1;
}
.reveal .account-card .provider-pill {
  display: inline-block;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: 4px 10px !important;
  background: rgba(79,138,100,0.14) !important;
  color: var(--sage-deep) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(79,138,100,0.32) !important;
  white-space: nowrap;
  line-height: 1.3;
  text-transform: none;
}
.reveal .account-card.sky .provider-pill {
  background: rgba(127,182,214,0.16) !important;
  color: var(--sky-deep) !important;
  border-color: rgba(127,182,214,0.36) !important;
}
.reveal .account-card.peach .provider-pill {
  background: rgba(244,184,147,0.20) !important;
  color: var(--peach-deep) !important;
  border-color: rgba(244,184,147,0.42) !important;
}
.reveal .account-card .provider-pill.provider-pill-muted {
  background: var(--bg-2) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
  font-style: italic;
}

/* ---------- Pitfall list ---------- */
.pitfalls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em 0.9em; }
.pitfall { display: flex; gap: 0.75em; align-items: flex-start; background: rgba(255,255,255,0.8); padding: 0.75em 0.95em; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.pitfall .icon { font-size: 1.5em; line-height: 1; flex-shrink: 0; }
.pitfall .pf-title { font-weight: 600; color: var(--ink); display: block; margin-bottom: 0.18em; font-size: 0.82em; }
.pitfall .pf-desc { font-size: 0.62em; color: var(--ink-soft); line-height: 1.42; }

/* ---------- Jarodisms (personal opinions slide) ---------- */
.jarodisms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em 0.9em;
}
.jarodism {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.7em;
  align-items: start;
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.55em 0.75em;
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.jarodism:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.j-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--sage-deep);
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 0.78em;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.jarodism:nth-child(1) .j-num { color: var(--sage-deep);  border-color: var(--sage);  background: rgba(139,184,154,0.18); }
.jarodism:nth-child(2) .j-num { color: var(--sky-deep);   border-color: var(--sky);   background: rgba(127,182,214,0.18); }
.jarodism:nth-child(3) .j-num { color: var(--peach-deep); border-color: var(--peach); background: rgba(244,184,147,0.20); }
.jarodism:nth-child(4) .j-num { color: #b89535;           border-color: var(--gold);  background: rgba(230,200,117,0.22); }
.jarodism:nth-child(5) .j-num { color: #7d68a3;           border-color: var(--lilac); background: rgba(197,179,224,0.22); }
.jarodism:nth-child(6) .j-num { color: #c46f76;           border-color: var(--rose);  background: rgba(232,163,170,0.22); }
.jarodism:nth-child(7) .j-num { color: var(--sage-deep);  border-color: var(--sage);  background: rgba(139,184,154,0.18); }
.jarodism:nth-child(8) .j-num { color: var(--sky-deep);   border-color: var(--sky);   background: rgba(127,182,214,0.18); }

.j-title {
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 0.78em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 0.18em;
}
.j-desc {
  display: block;
  font-size: 0.55em;
  color: var(--ink-soft);
  line-height: 1.42;
}

/* ---------- Animations ---------- */
@keyframes float-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal .present .float-in {
  animation: float-in 0.8s ease both;
}

@keyframes leaf-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
.leaf-anim { animation: leaf-sway 6s ease-in-out infinite; transform-origin: center bottom; }

/* ---------- Scrollbar polish ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--sage); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Misc ---------- */
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 0.7em; }
.big   { font-size: 1.2em; }
.mt-1  { margin-top: 0.5em; }
.mt-2  { margin-top: 1em; }
.mt-3  { margin-top: 1.5em; }
.mb-1  { margin-bottom: 0.5em; }
.spacer { height: 1em; }

.hint {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.55em; color: var(--muted);
  background: rgba(255,255,255,0.7); padding: 0.3em 0.7em; border-radius: 999px;
  border: 1px dashed var(--line);
}
.hint::before { content: '✎'; color: var(--sage-deep); }

/* ---- Fullscreen toggle button (YouTube-style, beside Reveal's nav) ---- */
.fullscreen-btn {
  position: fixed;
  bottom: 76px;                  /* above Reveal's arrow cluster */
  right: 26px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  color: var(--sage-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(31,42,46,0.16);
  transition:
    opacity 0.28s ease,
    transform 0.18s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
  padding: 0;
  margin: 0;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  line-height: 0;
  opacity: 0;                    /* hidden by default; revealed on cursor-in-corner */
  pointer-events: none;
}
.fullscreen-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.fullscreen-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(31,42,46,0.20);
}
.fullscreen-btn:active { transform: translateY(0); }
.fullscreen-btn svg { display: block; width: 20px; height: 20px; }
.fullscreen-btn.is-fullscreen { background: var(--sage-deep); color: #fff; border-color: var(--sage-deep); }
.fullscreen-btn.is-fullscreen:hover { background: #3f7050; color: #fff; }

/* ==========================================================================
   Slide-specific & component refinements (added in v2)
   ========================================================================== */

/* ---- Reveal vertical safe-area: ensure content doesn't kiss the bottom ---- */
.reveal .slides > section {
  padding-bottom: 0.5em;
  box-sizing: border-box;
}

/* ---- Title slide B-emoji headline ---- */
.title-slide .bigtitle {
  font-size: 4.4em;
  line-height: 1;
  margin-bottom: 0.2em;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.title-slide .b-emoji {
  display: inline-block;
  font-size: 0.95em;
  line-height: 1;
  transform: translateY(0.04em) rotate(-3deg);
  filter: drop-shadow(0 4px 10px rgba(31,42,46,0.15));
  transition: transform 0.4s ease;
  /* Override the gradient-text trick on the parent <h1> so the emoji
     renders with its native colored glyph instead of transparent fill. */
  color: initial;
  -webkit-text-fill-color: initial;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
}
.title-slide .b-emoji:hover { transform: translateY(0.04em) rotate(6deg) scale(1.08); }
.title-slide .title-rest {
  background: linear-gradient(120deg, var(--sage-deep), var(--sky-deep) 60%, var(--peach-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-family: 'Fraunces', serif;
}

/* ---- Prettier form controls (form-pretty variant) ---- */
.controls-grid.form-pretty {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* deterministic 2-col, never wraps weirdly */
  background: linear-gradient(180deg, #fff 0%, rgba(239,247,243,0.6) 100%);
  border: 1px solid var(--line);
  padding: 0.85em 0.95em;
  gap: 0.7em 0.85em;
  box-shadow: var(--shadow-sm);
  width: 100%;
  box-sizing: border-box;
}
.controls-grid.form-pretty .field {
  min-width: 0;                         /* allow inputs to shrink without overflowing parent */
}
.controls-grid.form-pretty .field input[type="number"],
.controls-grid.form-pretty .field input[type="text"] {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--ink);
  padding: 0.5em 0.65em;
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  width: 100%;
  box-sizing: border-box;
  transition: all 0.18s ease;
}
.controls-grid.form-pretty .field input:hover { border-color: var(--sage); }
.controls-grid.form-pretty .field input:focus {
  border-color: var(--sage-deep);
  box-shadow: 0 0 0 4px rgba(139,184,154,0.22);
  background: #fff;
}
.controls-grid.form-pretty .field label {
  font-size: 0.5em;
  color: var(--ink-soft);
  margin-bottom: 0.4em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Single-column variant (when slide layout already has the form in a narrow column) */
.controls-grid.form-pretty.cols-1 { grid-template-columns: 1fr; }
.controls-grid.form-pretty.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* compact (denser) variant — used by the investors slide */
.controls-grid.compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.7em 0.85em;
  gap: 0.5em 0.7em;
  width: 100%;
  box-sizing: border-box;
}
.controls-grid.compact .field { min-width: 0; }
.controls-grid.compact .field input {
  font-size: 0.75em;
  padding: 0.35em 0.5em;
  font-weight: 600;
  width: 100%;
  box-sizing: border-box;
}
.controls-grid.compact .field label {
  font-size: 0.46em;
  margin-bottom: 0.2em;
  white-space: nowrap;
}

/* Scrollable wrapper if content gets tall */
.controls-grid.scrollable {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sage) transparent;
}
.controls-grid.scrollable::-webkit-scrollbar { width: 6px; }
.controls-grid.scrollable::-webkit-scrollbar-thumb { background: var(--sage); border-radius: 3px; }

/* Aligned action row for buttons + hints under any control grid */
.controls-actions {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 0.7em;
  flex-wrap: wrap;
}

/* Compact card variant (used by investor summaries) */
.card.compact { padding: 0.55em 0.8em; }
.card.compact .card-title { font-size: 0.95em; margin-bottom: 0.15em; }
.card.compact p.small { font-size: 0.6em; line-height: 1.4; margin: 0; }

/* Investor card with circular profile photo */
.card.investor-card {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.7em 0.95em;
}
.investor-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-2);
  border: 2.5px solid var(--line);
  box-shadow: 0 2px 6px rgba(31,42,46,0.12);
}
.investor-avatar.sage  { border-color: var(--sage-deep); }
.investor-avatar.peach { border-color: var(--peach-deep); }
.investor-info {
  flex: 1 1 auto;
  min-width: 0;
}
.investor-info .investor-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 0.18em;
}
.investor-info p.small { font-size: 0.62em; line-height: 1.4; margin: 0; }

/* ---- Punchline slide: side-by-side big portraits with VS divider ---- */
.versus-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.2em;
  align-items: center;
  margin: 0 auto;
  max-width: 95%;
}
.versus-side { text-align: center; }
.investor-portrait {
  position: relative;
  display: inline-block;
  margin-bottom: 0.4em;
}
.investor-portrait img {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--line);
  box-shadow: 0 8px 28px rgba(31,42,46,0.18);
  display: block;
}
.investor-portrait.winner img {
  border-color: var(--sage-deep);
  box-shadow: 0 10px 36px rgba(244,207,97,0.45), 0 0 0 6px rgba(244,207,97,0.15);
  animation: portrait-bob 3.6s ease-in-out infinite;
}
.investor-portrait.loser img {
  border-color: var(--peach-deep);
  filter: grayscale(0.9) brightness(0.82) contrast(0.95);
  opacity: 0.85;
}
@keyframes portrait-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Emoji overlay */
.emoji-overlay {
  position: absolute;
  font-size: 3.5em;
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(31,42,46,0.30));
  pointer-events: none;
  z-index: 2;
}
.investor-portrait.winner .emoji-overlay {
  top: -12px;
  right: -18px;
  transform: rotate(18deg);
  animation: emoji-tilt-w 4s ease-in-out infinite;
}
.investor-portrait.loser .emoji-overlay {
  bottom: -8px;
  left: -16px;
  transform: rotate(-15deg);
  animation: emoji-tilt-l 5s ease-in-out infinite;
}
@keyframes emoji-tilt-w {
  0%, 100% { transform: rotate(15deg) translateY(0); }
  50%      { transform: rotate(22deg) translateY(-3px); }
}
@keyframes emoji-tilt-l {
  0%, 100% { transform: rotate(-12deg) translateY(0); }
  50%      { transform: rotate(-18deg) translateY(2px); }
}

.versus-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1em;
  color: var(--ink);
  margin-bottom: 0.3em;
}
.versus-stats {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  align-items: center;
}
.stat-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05em;
}
.versus-label {
  font-size: 0.42em;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 600;
}
.versus-value {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1em;
  font-variant-numeric: tabular-nums;
}
.versus-value.hero { font-size: 1.9em; line-height: 1; }
.versus-value.sage  { color: var(--sage-deep); }
.versus-value.peach { color: var(--peach-deep); }

.versus-divider {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vs-pill {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.5em;
  color: var(--muted);
  background: rgba(255,255,255,0.7);
  border: 2px dashed var(--line);
  border-radius: 999px;
  padding: 0.25em 0.7em;
  letter-spacing: 0.05em;
}

/* Tight vertical stack helper */
.stack-tight { display: flex; flex-direction: column; gap: 0.55em; }
.stack-tight > * { margin-top: 0 !important; }

/* Stat values shouldn't break / overflow */
.stat .stat-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Money tile pattern: labels top, big value bottom-aligned ----
   Applied automatically to .stat cards (used in .stat-row) and to any
   .cards-row given the .money-tiles class. Cards in the same row will all
   render the big number at the same Y, even if one card's label wraps. */
.stat-row { align-items: stretch; }
.stat {
  display: flex;
  flex-direction: column;
}
.stat .stat-label {
  min-height: 2.4em;          /* room for two wrapped lines */
  display: flex;
  align-items: flex-start;
  white-space: normal;
  line-height: 1.2;
}
.stat .stat-value {
  margin-top: auto;            /* push value to the bottom of the tile */
  font-variant-numeric: tabular-nums;
}

.cards-row.money-tiles { align-items: stretch; }
.cards-row.money-tiles > .card {
  display: flex;
  flex-direction: column;
}
.cards-row.money-tiles > .card > .card-sub:first-child,
.cards-row.money-tiles > .card > .card-title:first-child {
  min-height: 2.4em;
  display: flex;
  align-items: flex-start;
  margin-bottom: 0;
}
.cards-row.money-tiles > .card > .card-num {
  margin-top: auto;            /* anchor the value to the same baseline */
  font-variant-numeric: tabular-nums;
}
.cards-row.money-tiles > .card > .card-sub:last-child {
  margin-top: 0.3em;
}

/* Investor slide stat row: tighter for 4 cards in narrow space */
.stat-row .stat { padding: 0.45em 0.6em; min-width: 0; flex: 1 1 0; }
.stat-row .stat .stat-value { font-size: 0.95em; }
.stat-row .stat .stat-label { font-size: 0.42em; }

/* ---- Foundation slide: horizontal jobs row that always fits ---- */
.cards-row.jobs-row {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1em;
}
.cards-row.jobs-row .card {
  padding: 1.1em 1.2em;
}
.cards-row.jobs-row .card-title { font-size: 1.2em; margin-bottom: 0.4em; }
.cards-row.jobs-row p.small { font-size: 0.78em; line-height: 1.5; }
@media (max-width: 900px) {
  .cards-row.jobs-row { grid-template-columns: 1fr; }
}

/* ---- Investment funnel (animated cascading water) ---- */
.funnel-stage {
  position: relative;
  width: 100%;
  height: 660px;
  margin: 0 auto;
  padding-top: 16px;
}

#funnelCanvas {
  position: absolute;
  top: -240px;                    /* extend above stage so coins can fall from "heaven" through the title area */
  left: 0;
  right: 0;
  width: 100%;
  height: calc(100% + 240px);
  pointer-events: none;
  z-index: 3;
}

.funnel-row {
  position: absolute;
  top: var(--top);
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 1.6em;
  padding-left: 0;                /* align text with slide title/subtitle */
  padding-right: 0;
  z-index: 2;
}
.container-text   { flex: 1 1 auto; min-width: 0; text-align: left; }
.container-visual { flex: 0 0 280px; }

/* Significant alternating stagger — odd rows hug right; even rows shift left */
.funnel-row[data-offset="left"] .container-visual { margin-right: 140px; }
.funnel-row[data-offset="none"] .container-visual { margin-right: 0; }

/* The container itself */
.container-visual {
  position: relative;
  width: 280px;
  height: 56px;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.7) 100%);
  border: 2px solid rgba(31,42,46,0.55);
  border-top: none;
  border-radius: 0 0 18px 18px;
  overflow: visible;
  box-shadow:
    inset 0 -3px 8px rgba(255,255,255,0.55),
    0 4px 14px rgba(31,42,46,0.08);
  backdrop-filter: blur(2px);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.container-visual::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 8%;
  width: 22%;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0));
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  z-index: 2;
}
.container-rim {
  position: absolute;
  top: -4px; left: -4px; right: -4px;
  height: 4px;
  background: linear-gradient(90deg, #1f2a2e 0%, #4d5a60 50%, #1f2a2e 100%);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4);
  z-index: 4;
}
/* Per-step color identity — same progression as the original deck */
.funnel-row[data-step="1"] { --step-color: var(--sage);  --step-deep: var(--sage-deep);  --step-rgb: 139,184,154; }
.funnel-row[data-step="2"] { --step-color: var(--sky);   --step-deep: var(--sky-deep);   --step-rgb: 127,182,214; }
.funnel-row[data-step="3"] { --step-color: var(--peach); --step-deep: var(--peach-deep); --step-rgb: 244,184,147; }
.funnel-row[data-step="4"] { --step-color: var(--gold);  --step-deep: #b89535;           --step-rgb: 230,200,117; }
.funnel-row[data-step="5"] { --step-color: var(--lilac); --step-deep: #7d68a3;           --step-rgb: 197,179,224; }
.funnel-row[data-step="6"] { --step-color: var(--rose);  --step-deep: #c46f76;           --step-rgb: 232,163,170; }

.container-fill {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  height: 100%;
  background:
    linear-gradient(180deg,
      rgba(var(--step-rgb), 0.95) 0%,
      rgba(var(--step-rgb), 0.85) 55%,
      var(--step-deep) 100%);
  box-shadow: 0 -2px 12px rgba(var(--step-rgb), 0.55);
  z-index: 1;
  border-radius: 0 0 16px 16px;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

/* Spouts removed in favor of container tilt — keep the rule for reference but hide. */
.spout { display: none; }

/* Tilt containers so the liquid surface is slanted and naturally spills off
   the lower corner. Tilt direction matches data-spout (= which side the
   next container sits on). */
.funnel-row[data-spout="left"]  .container-visual { transform: rotate(-7deg); }
.funnel-row[data-spout="right"] .container-visual { transform: rotate(7deg);  }
.container-visual { transform-origin: 50% 70%; }   /* pivot lower so containers don't lift off baseline */

/* Active step glow + filled state — uses the per-step color */
.funnel-row.is-active .container-visual {
  box-shadow:
    inset 0 -3px 8px rgba(255,255,255,0.6),
    0 0 0 2px rgba(var(--step-rgb), 0.6),
    0 6px 24px rgba(var(--step-rgb), 0.4);
  border-color: var(--step-deep);
}
.funnel-row.is-full .container-visual { border-color: rgba(var(--step-rgb), 0.7); }

.container-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.18em;
  max-width: 100%;
  transition: opacity 0.3s ease;
  opacity: 0.85;
}
.funnel-row.is-active .container-text,
.funnel-row.is-full   .container-text { opacity: 1; }

.step-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 0.95em;
  color: var(--ink);
  line-height: 1.1;
  justify-content: flex-start;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--sage-deep);
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 0.85em;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.funnel-row.is-active .step-num,
.funnel-row.is-full   .step-num {
  background: linear-gradient(180deg, var(--step-color), var(--step-deep));
  color: #fff;
  border-color: var(--step-deep);
  box-shadow: 0 2px 6px rgba(var(--step-rgb), 0.55);
}
.step-desc {
  font-size: 0.62em;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Color progression — sage → sky → peach → gold → lilac → sage-deep */
.funnel-step.funnel-1 { border-left-color: var(--sage); }
.funnel-step.funnel-1 .funnel-num { color: var(--sage-deep); }
.funnel-step.funnel-2 { border-left-color: var(--sky); }
.funnel-step.funnel-2 .funnel-num { color: var(--sky-deep); }
.funnel-step.funnel-3 { border-left-color: var(--peach); }
.funnel-step.funnel-3 .funnel-num { color: var(--peach-deep); }
.funnel-step.funnel-4 { border-left-color: var(--gold); }
.funnel-step.funnel-4 .funnel-num { color: #b89535; }
.funnel-step.funnel-5 { border-left-color: var(--lilac); }
.funnel-step.funnel-5 .funnel-num { color: #7d68a3; }
.funnel-step.funnel-6 { border-left-color: var(--rose); }
.funnel-step.funnel-6 .funnel-num { color: #c46f76; }

/* ==========================================================================
   Custom help (?) and overview (Esc) overlays
   ========================================================================== */

#custom-help-overlay,
#custom-overview-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  display: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
#custom-help-overlay.open,
#custom-overview-overlay.open { display: block; }

/* Help overlay */
#custom-help-overlay .overlay-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 28, 32, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#custom-help-overlay .overlay-card {
  position: relative;
  max-width: 460px;
  margin: 8vh auto 0;
  background: #fff;
  color: var(--ink);
  border-radius: 16px;
  padding: 1.8em 2em 2em;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  border: 1px solid var(--line);
}
#custom-help-overlay .overlay-card h2 {
  font-family: 'Fraunces', serif;
  margin: 0 0 0.8em;
  font-size: 1.4rem;
  color: var(--ink);
}
#custom-help-overlay .overlay-card table {
  width: 100%;
  border-collapse: collapse;
}
#custom-help-overlay .overlay-card td,
#custom-help-overlay .overlay-card th {
  padding: 0.55em 0.6em;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink-soft);
  vertical-align: middle;
}
#custom-help-overlay .overlay-card kbd {
  display: inline-block;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 2px 8px;
  min-width: 1.6em;
  text-align: center;
}
#custom-help-overlay .overlay-close {
  position: absolute; top: 12px; right: 16px;
  border: 0; background: transparent;
  font-size: 1.6rem; line-height: 1;
  color: var(--muted); cursor: pointer;
  padding: 4px 10px; border-radius: 8px;
}
#custom-help-overlay .overlay-close:hover { background: var(--bg-2); color: var(--ink); }

/* Overview overlay */
#custom-overview-overlay {
  background: rgba(20, 28, 32, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: auto;
}
#custom-overview-overlay .overview-header {
  position: sticky; top: 0; z-index: 2;
  background: rgba(20, 28, 32, 0.85);
  color: #fff;
  padding: 0.9em 1.4em;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 0.9rem;
}
#custom-overview-overlay .overview-header .ov-title {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 600;
}
#custom-overview-overlay .overview-header .ov-hint { opacity: 0.7; }
#custom-overview-overlay .overview-close {
  border: 0; background: rgba(255,255,255,0.1); color: #fff;
  font-size: 1rem; padding: 4px 14px; border-radius: 999px;
  cursor: pointer;
}
#custom-overview-overlay .overview-close:hover { background: rgba(255,255,255,0.2); }

#custom-overview-overlay .overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.4rem;
  padding: 1.5rem 1.6rem 3rem;
  max-width: 1500px;
  margin: 0 auto;
}
#custom-overview-overlay .ov-thumb {
  display: block;
  color: #fff; text-decoration: none;
  border-radius: 10px;
  outline: 2px solid transparent;
  transition: outline-color .15s, transform .12s;
}
#custom-overview-overlay .ov-thumb:hover,
#custom-overview-overlay .ov-thumb:focus-visible {
  outline-color: var(--sage);
  transform: translateY(-2px);
  text-decoration: none;
}
#custom-overview-overlay .ov-thumb.is-current { outline-color: var(--peach); }
#custom-overview-overlay .ov-thumb-frame {
  position: relative;
  width: 100%;
  padding-bottom: 62.5%; /* 1280 × 800 */
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
#custom-overview-overlay .ov-thumb-frame iframe {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 800px;
  border: 0;
  transform-origin: top left;
  pointer-events: none;
}
#custom-overview-overlay .ov-thumb-label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.6em;
  padding: 0.55em 0.2em 0;
  font-size: 0.85rem;
}
#custom-overview-overlay .ov-thumb-num {
  font-weight: 700; color: #fff;
}
#custom-overview-overlay .ov-thumb-title {
  color: rgba(255,255,255,0.65);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.78rem;
}

/* Close (X) button — top-right twin of the fullscreen button.
   Returns to /presentation (combo page). Hidden by default; appears on
   cursor proximity to the top-right corner. */
.close-deck-btn {
  position: fixed;
  top: 22px;
  right: 26px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(31,42,46,0.16);
  transition:
    opacity 0.28s ease,
    transform 0.18s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
  padding: 0; margin: 0; font: inherit;
  -webkit-appearance: none; appearance: none;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
}
.close-deck-btn.is-visible { opacity: 1; pointer-events: auto; }
.close-deck-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(31,42,46,0.20);
  color: var(--peach-deep);
  border-color: var(--peach);
}
.close-deck-btn:active { transform: translateY(0); }
.close-deck-btn svg { display: block; width: 18px; height: 18px; }

/* Disable Fraunces' "wonky" letterforms and pin to the 9pt "caption" optical
   size for a calmer, less decorative look. */
@supports (font-variation-settings: normal) {
  .reveal, .reveal * {
    font-optical-sizing: none;
    font-variation-settings: "opsz" 9, "WONK" 0, "SOFT" 50;
  }
}