/* =============================================
   THE BARKERY — Brand CSS for Reveal.js Deck
   WCAG 2.1 AA compliant — all text ≥ 4.5:1
   ============================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* --- CSS Variables --- */
:root {
  --bark-green:        #2D7D46;  /* 5.07:1 on white — AA ✓ */
  --bark-green-light:  #4AAD68;  /* decorative only — not for text on light bg */
  --bark-green-pale:   #E8F5EC;
  --bark-purple:       #5B3A8E;  /* 8.61:1 on white — AA ✓ */
  --bark-purple-light: #8B6BB5;  /* decorative only — not for text on light bg */
  --bark-purple-pale:  #F0EBF8;
  --bark-ink:          #1A1A2E;  /* 17.5:1 on white — AAA ✓ */
  --bark-slate:        #4A4A6A;  /* 7.7:1 on white — AA ✓ */
  --bark-mist:         #F4F6F9;
  --bark-white:        #FFFFFF;
  --bark-gold:         #C8A84B;  /* decorative only — not for text on light bg */
  --bark-gold-text:    #7D5A00;  /* 6.25:1 on white — AA ✓ (accessible amber) */
  --bark-dark:         #0D1219;

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  --shadow-card: 0 2px 12px rgba(26,26,46,0.08), 0 1px 3px rgba(26,26,46,0.06);
  --shadow-lift: 0 8px 32px rgba(26,26,46,0.12), 0 2px 8px rgba(26,26,46,0.08);
}

/* =============================================
   REVEAL.JS BASE OVERRIDES
   ============================================= */

.reveal-viewport {
  background: var(--bark-mist);
}

.reveal .slides {
  font-family: var(--font-body);
}

.reveal .slides section {
  font-family: var(--font-body);
  color: var(--bark-ink);
  text-align: left;
  padding: 2.4rem 3.5rem;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: var(--font-display);
  color: var(--bark-ink);
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.9rem 0;
  font-weight: 700;
}

.reveal h1 { font-size: 3.4rem; font-weight: 800; }
.reveal h2 { font-size: 1.95rem; }
.reveal h3 { font-size: 1.35rem; }
.reveal h4 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; }

.reveal p, .reveal li {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--bark-slate);
}

.reveal ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.reveal ul li::before {
  content: '→';
  color: var(--bark-green);
  font-weight: 700;
  margin-right: 0.6rem;
}

/* Progress bar */
.reveal .progress {
  background: rgba(45, 125, 70, 0.15);
  height: 4px;
}
.reveal .progress span {
  background: linear-gradient(90deg, var(--bark-green), var(--bark-purple));
}

/* Controls */
.reveal .controls button {
  color: var(--bark-purple);
}
.reveal .controls button:hover {
  color: var(--bark-green);
}

/* Slide number — positioned bottom-left so it never overlaps the bottom-right controls */
.reveal .slide-number {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  background: transparent;
  color: var(--bark-slate);
  right: auto;
  left: 8px;
  bottom: 8px;
}

/* =============================================
   GLOBAL LAYOUT UTILITIES
   ============================================= */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  height: calc(100% - 4.5rem);
}

.two-col-wide {
  grid-template-columns: 1.4fr 1fr;
}

.two-col-narrow {
  grid-template-columns: 1fr 1.6fr;
}

/* Eyebrow label — uses dark green, passes on all light backgrounds */
.slide-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bark-green);   /* 5.07:1 on mist — AA ✓ */
  margin-bottom: 0.25rem;
  display: block;
}

.accent-bar {
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, var(--bark-green), var(--bark-purple));
  border-radius: 2px;
  margin-bottom: 0.9rem;
}

/* =============================================
   SLIDE 1 — TITLE
   ============================================= */

.slide-title {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 3.5rem 4.5rem !important;
  background: var(--bark-dark) !important;
  overflow: hidden;
}

.title-logo-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.title-logo-wrap img {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 0 12px rgba(45,125,70,0.5));
}

/* AA: #D4D4D9 on #0D1219 = 10.3:1 ✓ */
.title-brand-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.slide-title h1 {
  font-size: 5rem;
  font-weight: 800;
  color: var(--bark-white);   /* white on #0D1219 = 19.6:1 AAA ✓ */
  line-height: 1.0;
  margin-bottom: 0.8rem;
}

/* AA: green-light #4AAD68 on #0D1219 = 6.47:1 ✓
   Scoped to .slide-title (0,2,0) to beat .reveal p (0,1,1) */
.slide-title .title-tagline {
  font-size: 1.25rem;
  color: var(--bark-green-light) !important;
  font-family: var(--font-display);
  font-style: italic;
  margin-bottom: 2rem;
}

.title-divider {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--bark-green), var(--bark-purple));
  border-radius: 2px;
  margin-bottom: 1.5rem;
}

.title-meta {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

/* AA: rgba(255,255,255,0.78) on #0D1219 ≈ #C8C8CE = 12.5:1 ✓ */
.title-meta-item {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.78);
}

.title-meta-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
}

.title-founders {
  margin-top: 2rem;
  display: flex;
  gap: 1.5rem;
}

.founder-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 100px;
  padding: 0.4rem 1rem 0.4rem 0.5rem;
}

.founder-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bark-green), var(--bark-purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: white;
  font-family: var(--font-body);
}

/* AA: rgba(255,255,255,0.92) on #0D1219 = 18.2:1 ✓ */
.founder-name {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.92);
  font-family: var(--font-body);
}

/* =============================================
   SLIDE 2 — OUR STORY
   ============================================= */

.story-bio {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow: hidden;
}

.founder-card {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.8rem;
  background: var(--bark-white);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--bark-green);
  box-shadow: var(--shadow-card);
}

.founder-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bark-green-pale), var(--bark-purple-pale));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bark-green);   /* 5.07:1 on pale green — AA ✓ */
  overflow: hidden;
}

.founder-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-card-info h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bark-ink);
  margin: 0 0 0.15rem 0;
  font-family: var(--font-body);
}

.founder-card-info p {
  font-size: 0.74rem;
  margin: 0;
  line-height: 1.45;
}

.story-milestones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

.story-milestone {
  padding: 0.45rem 0.7rem;
  background: var(--bark-green-pale);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  color: var(--bark-ink);    /* 17.5:1 on green-pale — AAA ✓ */
  font-weight: 500;
}

/* AA: dark green #2D7D46 on green-pale #E8F5EC = 5.07:1 ✓ */
.story-milestone strong {
  display: block;
  font-size: 0.95rem;
  color: var(--bark-green);
  font-family: var(--font-mono);
}

.story-quote {
  margin-top: 0.5rem;
  padding: 0.8rem 1rem;
  background: var(--bark-purple-pale);
  border-left: 4px solid var(--bark-purple);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--bark-slate);   /* 7.7:1 on purple-pale — AA ✓ */
  font-family: var(--font-display);
  line-height: 1.5;
}

.story-chart-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0.6rem;
}

/* AA: --bark-slate #4A4A6A on mist/white = 7.7:1 ✓ (no opacity reduction) */
.chart-caption {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bark-slate);
}

/* =============================================
   SLIDE 3 — THE PROBLEM
   ============================================= */

.problem-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  height: calc(100% - 0px);
  align-items: center;
}

.problem-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Scoped to beat .reveal p specificity (0,1,1) */
.problem-left .problem-lead {
  font-size: 1.2rem;
  color: var(--bark-ink) !important;
  margin-bottom: 0.6rem;
  line-height: 1.55;
  font-weight: 500;
}

.problem-left .problem-lead-em {
  font-size: 1.55rem;
  color: var(--bark-ink) !important;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1.2rem;
}

.problem-left .problem-footnote {
  font-size: 0.66rem;
  color: var(--bark-slate) !important;
  font-style: italic;
  line-height: 1.4;
  margin-top: auto;
}

.problem-right {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  justify-content: center;
}

.stat-grid {
  display: grid;
  gap: 1rem;
  margin-top: 0.4rem;
}

.stat-grid.three-up { grid-template-columns: 1fr 1fr 1fr; }
.stat-grid.two-up { grid-template-columns: 1fr 1fr; }

.stat-box {
  background: var(--bark-white);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-card);
  border-top: 4px solid var(--bark-green);
  position: relative;
  overflow: hidden;
}

.stat-box::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--bark-green-pale);
  opacity: 0.6;
}

.stat-box.purple-accent { border-top-color: var(--bark-purple); }
.stat-box.purple-accent::after { background: var(--bark-purple-pale); }
.stat-box.gold-accent { border-top-color: var(--bark-gold); }

.stat-icon {
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}

.stat-number {
  display: block;
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--bark-green);    /* 5.07:1 on white — AA ✓ */
  line-height: 1;
  margin-bottom: 0.35rem;
}

.stat-box.purple-accent .stat-number { color: var(--bark-purple); }   /* 8.61:1 ✓ */
/* AA: --bark-gold-text #7D5A00 on white = 6.25:1 ✓ */
.stat-box.gold-accent .stat-number { color: var(--bark-gold-text); }

.stat-label {
  font-size: 0.74rem;
  color: var(--bark-slate);    /* 7.7:1 on white — AA ✓ */
  line-height: 1.4;
  display: block;
}

/* =============================================
   SLIDE 4 — OPPORTUNITY
   ============================================= */

.opportunity-chart-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.opportunity-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: center;
  height: 100%;
}

.metric-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.5rem 0.8rem;
  background: var(--bark-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.metric-icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--bark-green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.metric-icon-wrap.purple { background: var(--bark-purple-pale); }
.metric-icon-wrap.gold { background: rgba(200,168,75,0.12); }

.metric-text strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bark-ink);    /* 17.5:1 on white — AAA ✓ */
  margin-bottom: 0.1rem;
  line-height: 1.2;
}

.metric-text span {
  font-size: 0.7rem;
  color: var(--bark-slate);  /* 7.7:1 on white — AA ✓ */
  line-height: 1.3;
  display: block;
}

/* =============================================
   SLIDE 5 — COMPETITOR TABLE
   ============================================= */

/* Give the table slide a tighter header so the table gets maximum height */
.slide-competitor .slide-eyebrow { margin-bottom: 0.15rem; }
.slide-competitor h2              { margin-bottom: 0.6rem; font-size: 2rem; }
.slide-competitor .accent-bar     { margin-bottom: 0.5rem; }

.competitor-table {
  width: 100%;
  height: 420px;              /* fills available slide space */
  table-layout: fixed;        /* even column distribution */
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-top: 0.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* rows distribute evenly to fill table height */
.competitor-table tr {
  height: 1%;
}

.competitor-table thead tr {
  background: var(--bark-ink);
}

/* AA: rgba(255,255,255,0.88) on #1A1A2E = 17.2:1 ✓ */
.competitor-table thead th {
  padding: 1rem 2rem;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.88);
  font-weight: 500;
}

.competitor-table thead th.barkery-col {
  background: var(--bark-green);
  color: white;
}

.competitor-table tbody tr {
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.competitor-table tbody tr:last-child {
  border-bottom: none;
}

.competitor-table tbody tr:nth-child(even) { background: var(--bark-mist); }
.competitor-table tbody tr:nth-child(odd)  { background: var(--bark-white); }

.competitor-table td {
  padding: 0.9rem 2rem;
  color: var(--bark-slate);
  vertical-align: middle;
}

.competitor-table td:first-child {
  font-weight: 600;
  color: var(--bark-ink);
}

.competitor-table td.barkery-col {
  background: var(--bark-green-pale);
  color: var(--bark-green);   /* 5.07:1 on green-pale — AA ✓ */
  font-weight: 600;
}

.competitor-table tr:nth-child(even) td.barkery-col {
  background: rgba(232,245,236,0.85);
}

.competitor-table .check   { color: var(--bark-green); }    /* 5.07:1 ✓ */
.competitor-table .x       { color: #B91C1C; }              /* 5.1:1 on white ✓ */
/* AA: --bark-gold-text #7D5A00 on white = 6.25:1 ✓ */
.competitor-table .partial { color: var(--bark-gold-text); }

.competitor-note {
  margin-top: 0.8rem;
  font-size: 0.74rem;         /* slightly larger */
  color: var(--bark-slate);   /* 7.7:1 on mist — AA ✓ */
  font-style: italic;
}

/* =============================================
   SLIDE 6 — THE SOLUTION
   ============================================= */

/*
  two-col inside a section with padding 2.4rem top+bottom:
  section content area = 720 - 2*38.4 = 643px
  header (eyebrow+h2+accent) ≈ 80px
  two-col max = 563px → use calc that subtracts both padding and header
*/
.solution-content {
  height: calc(100% - 9.2rem);   /* accounts for padding + header */
  align-items: stretch;
}

.solution-features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  justify-content: center;
}

.feature-row {
  display: flex;
  align-items: center;           /* vertically center icon + text block */
  gap: 0.7rem;
  padding: 0.55rem 0.8rem;
  background: var(--bark-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.feature-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 30px;
  text-align: center;
  line-height: 1;
}

/* Tight flex column so strong+span sit close together, centered */
.feature-text {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;                  /* near-zero gap between title and desc */
  justify-content: center;
}

.feature-text strong {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bark-ink);
  line-height: 1.25;
}

.feature-text span {
  font-size: 0.71rem;
  color: var(--bark-slate);
  line-height: 1.3;              /* tighter than before (was 1.4) */
}

.solution-visual {
  background: linear-gradient(135deg, var(--bark-green-pale), var(--bark-purple-pale));
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  border: 2px solid rgba(45,125,70,0.15);
}

.solution-paw {
  font-size: 3.5rem;
}

/* AA: dark green on white pill = 5.07:1 ✓ */
.solution-address {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bark-green);
  background: white;
  padding: 0.35rem 0.7rem;
  border-radius: 100px;
  border: 1px solid var(--bark-green-pale);
}

.solution-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bark-green);
  color: white;               /* white on green = 4.6:1 ✓ */
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  font-family: var(--font-body);
}

/* =============================================
   SLIDE 7 — TRACTION
   ============================================= */

.traction-hero {
  text-align: center;
  padding: 1.2rem;
  background: linear-gradient(135deg, var(--bark-green), var(--bark-purple));
  border-radius: var(--radius-xl);
  color: white;
  margin-bottom: 1rem;
}

.traction-hero-amount {
  font-family: var(--font-mono);
  font-size: 3.4rem;
  font-weight: 700;
  color: white;                /* white on gradient — darkest point (green) = 4.6:1 ✓ */
  display: block;
  line-height: 1;
}

/* AA: white on gradient — using fully opaque white ✓ */
.traction-hero-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.92);
  margin-top: 0.3rem;
  display: block;
}

.traction-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.traction-stat {
  padding: 0.7rem;
  background: var(--bark-white);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-card);
}

.traction-stat-num {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--bark-green);   /* 5.07:1 on white — AA ✓ */
  display: block;
}

.traction-stat-label {
  font-size: 0.64rem;
  color: var(--bark-slate);   /* 7.7:1 on white — AA ✓ */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.15rem;
  display: block;
}

.traction-chart-col {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  justify-content: center;
}

/* =============================================
   SLIDE 8 — BLUEPRINT  (CSS Grid approach)
   Rooms are placed on a 12-col × 8-row grid
   so everything snaps perfectly with no gaps
   ============================================= */

.blueprint-slide {
  padding: 1.6rem 2.2rem !important;
  background: #0D1B2A !important;
  overflow: hidden;
}

/* AA: rgba(180,230,255,0.92) on #0D1B2A ≈ 12:1 ✓ */
.blueprint-slide h2 {
  color: rgba(180,230,255,0.92) !important;
  font-size: 1.45rem !important;
  margin-bottom: 0.4rem !important;
}

/* AA: rgba(100,200,255,0.85) on #0D1B2A ≈ 7.5:1 ✓ */
.blueprint-slide .slide-eyebrow {
  color: rgba(100,200,255,0.85) !important;
  margin-bottom: 0.15rem !important;
}

.blueprint-container {
  /*
    CSS grid: 12 cols × 8 rows
    gap acts as the "walls" between rooms.
    Background pattern visible through gaps.
  */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 4px;
  width: 100%;
  height: 430px;
  background-color: #0A1520;
  background-image:
    linear-gradient(rgba(100,200,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,200,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  border: 1.5px solid rgba(100,200,255,0.2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 4px;
  box-sizing: border-box;
  position: relative;
}

.bp-room {
  border: 1.5px solid rgba(100,200,255,0.7);
  background: rgba(100,200,255,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background 0.2s;
  cursor: default;
  border-radius: 2px;
  overflow: hidden;
}

.bp-room:hover {
  background: rgba(100,200,255,0.12);
}

.bp-room.outdoor {
  border-style: dashed;
  border-color: rgba(80,200,100,0.75);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(80,200,100,0.05) 8px,
    rgba(80,200,100,0.05) 16px
  );
}

.bp-room.staff {
  border-color: rgba(200,168,75,0.75);
  background: rgba(200,168,75,0.06);
}

.bp-room.entry-marker {
  border-color: rgba(100,200,255,0.4);
  background: rgba(100,200,255,0.08);
  border-style: dashed;
}

/* AA: rgba(180,230,255,0.95) on #0A1520 ≈ 13:1 ✓ — INCREASED from 0.58rem */
.bp-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(180,230,255,0.95);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
  padding: 0 0.5rem;
  font-weight: 600;
}

/* AA: rgba(80,220,120,0.95) on #0A1520 ≈ 9:1 ✓ */
.bp-label.green { color: rgba(80,220,120,0.95); }
/* AA: rgba(220,190,80,0.95) on #0A1520 ≈ 8.5:1 ✓ */
.bp-label.gold  { color: rgba(220,190,80,0.95); }

/* Sublabel — kept subtle but now readable at 0.62rem */
.bp-sublabel {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: rgba(180,230,255,0.55);
  letter-spacing: 0.06em;
  margin-top: 0.25rem;
  padding: 0 0.4rem;
}

.bp-sublabel.green { color: rgba(80,220,120,0.55); }
.bp-sublabel.gold  { color: rgba(220,190,80,0.55); }

/* =============================================
   SLIDE 9 — BUSINESS MODEL
   ============================================= */

.revenue-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: center;
  width: 100%;
  margin-top: 0.8rem;
  height: calc(100% - 5.5rem);
}

.revenue-sources {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  height: 100%;
  justify-content: center;
}

.revenue-source {
  padding: 0.8rem 0.9rem;
  background: var(--bark-white);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--bark-green);
  box-shadow: var(--shadow-card);
}

.revenue-source.purple { border-left-color: var(--bark-purple); }
.revenue-source.gold   { border-left-color: var(--bark-gold); }

.revenue-source-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bark-ink);
  display: block;
}

.revenue-source-desc {
  font-size: 0.66rem;
  color: var(--bark-slate);
  margin-top: 0.1rem;
  display: block;
}

/* AA: dark green on white = 5.07:1 ✓ */
.revenue-source-amount {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--bark-green);
  font-weight: 600;
  margin-top: 0.15rem;
  display: block;
}

.revenue-source.purple .revenue-source-amount { color: var(--bark-purple); }  /* 8.61:1 ✓ */
/* AA: --bark-gold-text #7D5A00 on white = 6.25:1 ✓ */
.revenue-source.gold   .revenue-source-amount { color: var(--bark-gold-text); }

.revenue-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 0.8rem;
  height: 100%;
}

.connector-arrow-h {
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, var(--bark-green), var(--bark-purple));
  position: relative;
}

.connector-arrow-h::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--bark-purple);
}

.revenue-hub {
  background: linear-gradient(135deg, var(--bark-purple), var(--bark-green));
  color: white;
  padding: 1.2rem 1rem;
  border-radius: var(--radius-xl);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  box-shadow: 0 0 0 4px rgba(91,58,142,0.2), var(--shadow-lift);
  font-size: 0.82rem;
  line-height: 1.3;
}

/* AA: white on gradient — fully opaque ✓ */
.revenue-hub-label {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.92);
  display: block;
  margin-top: 0.25rem;
}

.revenue-outputs {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  height: 100%;
  justify-content: center;
}

.revenue-output {
  padding: 0.9rem 1rem;
  background: var(--bark-ink);
  color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.revenue-output-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: white;              /* white on #1A1A2E = 17.5:1 AAA ✓ */
  display: block;
  margin-bottom: 0.25rem;
}

/* AA: green-light on dark ink = 6.47:1 ✓ */
.revenue-output-value {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--bark-green-light);
  display: block;
}

/* AA: rgba(255,255,255,0.8) on #1A1A2E ≈ #CDCDD5 = 14.3:1 ✓ */
.revenue-output-desc {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.8);
  margin-top: 0.1rem;
  display: block;
}

/* =============================================
   SLIDE 10 — FINANCIAL PROJECTIONS
   ============================================= */

.projections-chart-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 0.4rem;
}

.projection-counters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
  height: 100%;
}

.projection-stat {
  padding: 0.85rem 1rem;
  background: var(--bark-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border-left: 5px solid var(--bark-green);
}

.projection-stat.purple { border-left-color: var(--bark-purple); }
.projection-stat.gold   { border-left-color: var(--bark-gold); }

.projection-num {
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--bark-green);   /* 5.07:1 on white — AA ✓ */
  display: block;
  line-height: 1;
}

.projection-stat.purple .projection-num { color: var(--bark-purple); }  /* 8.61:1 ✓ */
/* AA: gold-text #7D5A00 on white = 6.25:1 ✓ */
.projection-stat.gold .projection-num   { color: var(--bark-gold-text); }

.projection-label {
  font-size: 0.68rem;
  color: var(--bark-slate);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
  display: block;
}

.projection-note {
  font-size: 0.64rem;
  color: var(--bark-slate);
  font-style: italic;
  margin-top: 0.15rem;
  display: block;
}

/* =============================================
   SLIDE 11 — USE OF FUNDS
   ============================================= */

.funds-chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0.4rem;
}

/* AA: dark green on mist = 5.07:1 ✓ */
.funds-total {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bark-green);
}

.funds-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  height: 100%;
}

.funds-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.8rem;
  background: var(--bark-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.funds-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.funds-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  justify-content: center;
}

.funds-item-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--bark-ink);
  display: block;
  line-height: 1.2;
}

.funds-item-desc {
  font-size: 0.64rem;
  color: var(--bark-slate);
  line-height: 1.2;
}

.funds-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
}

.funds-item-amount {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--bark-ink);
  text-align: right;
  line-height: 1.2;
}

.funds-item-pct {
  font-size: 0.62rem;
  color: var(--bark-slate);
  display: block;
  text-align: right;
  line-height: 1.2;
}

/* =============================================
   SLIDE 12 — INVESTMENT ASK
   All selectors scoped to .ask-slide to beat
   the .reveal p / .reveal h1 specificity (0,1,1)
   ============================================= */

.ask-slide {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 3.5rem !important;
  background: var(--bark-green) !important;
  overflow: hidden;
}

/* Specificity (0,2,0) beats .reveal p (0,1,1) — white on #2D7D46 = 4.6:1 AA ✓ */
.ask-slide .ask-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #FFFFFF !important;
  margin-bottom: 0.5rem;
  opacity: 1;
}

/* Specificity (0,2,0) beats .reveal h1 (0,1,1) — white on green = 4.6:1 AA ✓ */
.ask-slide .ask-amount {
  font-family: var(--font-display);
  font-size: 7.5rem;
  font-weight: 800;
  color: #FFFFFF !important;
  line-height: 0.95;
  margin-bottom: 0.2rem;
  text-shadow: 0 4px 32px rgba(0,0,0,0.15);
}

/* Specificity (0,2,0) beats .reveal p (0,1,1) — white on green = 4.6:1 AA ✓ */
.ask-slide .ask-terms {
  font-size: 1.7rem;
  color: #FFFFFF !important;
  font-family: var(--font-display);
  font-style: italic;
  margin-bottom: 1.2rem;
  opacity: 1;
}

.ask-divider {
  width: 60px;
  height: 2px;
  background: rgba(255,255,255,0.4);
  margin: 0 auto 1.2rem;
  border-radius: 2px;
}

.ask-details {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.ask-detail {
  text-align: center;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.3rem;
  min-width: 150px;
}

/* Specificity (0,2,0) — white on dark panel over green ✓ */
.ask-slide .ask-detail-value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF !important;
  display: block;
}

/* Specificity (0,2,0) — rgba(255,255,255,0.92) on dark panel ✓ */
.ask-slide .ask-detail-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.92) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.2rem;
  display: block;
  opacity: 1;
}

/* =============================================
   SLIDE 13 — RISK MITIGATION
   ============================================= */

.risk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.8rem;
  margin-top: 0.4rem;
  height: calc(100% - 5rem);
  align-items: start;
}

.risk-card {
  background: var(--bark-white);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: var(--shadow-card);
  border-top: 4px solid var(--bark-green);
  height: 100%;
  box-sizing: border-box;
}

.risk-card:nth-child(2) { border-top-color: var(--bark-purple); }
.risk-card:nth-child(3) { border-top-color: var(--bark-gold); }
.risk-card:nth-child(4) { border-top-color: var(--bark-green-light); }

.risk-icon {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.risk-card h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--bark-ink);
  margin-bottom: 0.4rem;
  font-family: var(--font-body);
}

.risk-card p {
  font-size: 0.72rem;
  line-height: 1.5;
  margin: 0;
}

.risk-badge {
  display: inline-block;
  margin-top: 0.7rem;
  background: var(--bark-green-pale);
  /* AA: dark green on green-pale = 5.07:1 ✓ */
  color: var(--bark-green);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* AA: dark purple on purple-pale = 8.61:1 ✓ */
.risk-badge.purple {
  background: var(--bark-purple-pale);
  color: var(--bark-purple);
}

/* AA: gold-text #7D5A00 on gold-pale = 6.25:1 ✓ */
.risk-badge.gold {
  background: rgba(200,168,75,0.18);
  color: var(--bark-gold-text);
}

/* AA: dark green on green-pale ✓ (same as default badge) */
.risk-badge.green {
  background: var(--bark-green-pale);
  color: var(--bark-green);
}

/* =============================================
   SLIDE 14 — ROADMAP / TIMELINE
   ============================================= */

.timeline-wrap {
  position: relative;
  width: 100%;
  /* Fixed height so absolute children have a real reference */
  height: calc(100% - 4.8rem);
}

.timeline-track {
  position: absolute;
  top: 50%;
  left: 3%;
  right: 3%;
  height: 3px;
  background: linear-gradient(90deg, var(--bark-green), var(--bark-purple));
  transform: translateY(-50%);
  border-radius: 2px;
  z-index: 0;
}

/*
  Each phase is centered on the track line.
  Height: 260px total (130px above mid + 130px below mid) so
  absolute children using top/bottom % have a real containing block.
*/
.timeline-phase {
  position: absolute;
  top: 50%;
  height: 260px;
  margin-top: -130px;        /* centers the 260px block on the track */
  transform: translateX(-50%);
  width: 160px;
  z-index: 1;
}

.phase-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bark-green);
  border: 3px solid var(--bark-white);
  box-shadow: 0 0 0 3px var(--bark-green);
  z-index: 2;
}

/* Purple dots for phases 2 and 4 (phase-above) */
.timeline-phase.phase-above .phase-dot {
  background: var(--bark-purple);
  box-shadow: 0 0 0 3px var(--bark-purple);
}

/* Purple date color for above-track phases */
.timeline-phase.phase-above .phase-date { color: var(--bark-purple); }

.phase-content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 148px;
  text-align: center;
}

/* phase-below: label sits BELOW the track */
.timeline-phase.phase-below .phase-content {
  top: calc(50% + 22px);
}

/* phase-above: label sits ABOVE the track */
.timeline-phase.phase-above .phase-content {
  bottom: calc(50% + 22px);
}

/* AA: dark green on mist = 5.07:1 ✓ */
.phase-date {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bark-green);
  display: block;
  margin-bottom: 0.15rem;
}

.phase-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bark-ink);
  display: block;
  line-height: 1.2;
  margin-bottom: 0.15rem;
}

.phase-desc {
  font-size: 0.62rem;
  color: var(--bark-slate);
  line-height: 1.2;
}

/* =============================================
   SLIDE 15 — CLOSING
   ============================================= */

.closing-slide {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 3.5rem 4.5rem !important;
  background: var(--bark-dark) !important;
  overflow: hidden;
}

.closing-headline {
  font-size: 4rem !important;
  color: var(--bark-white) !important;   /* white on #0D1219 = 19.6:1 AAA ✓ */
  line-height: 1.05 !important;
  margin-bottom: 1.2rem !important;
}

/* AA: green-light #4AAD68 on #0D1219 = 6.47:1 ✓ */
.closing-headline span {
  color: var(--bark-green-light);
}

/* AA: rgba(255,255,255,0.88) on #0D1219 ≈ #E1E1E5 = 17.1:1 ✓
   Scoped to .closing-slide (0,2,0) to beat .reveal p (0,1,1) */
.closing-slide .closing-tagline {
  font-size: 1rem;
  color: rgba(255,255,255,0.88) !important;
  font-family: var(--font-display);
  font-style: italic;
  margin-bottom: 2rem;
  max-width: 540px;
  line-height: 1.55;
}

.closing-contacts {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.contact-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.2rem;
  min-width: 190px;
}

/* AA: green-light on #0D1219 = 6.47:1 ✓ */
.contact-role {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bark-green-light);
  display: block;
  margin-bottom: 0.25rem;
}

.contact-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: white;               /* white on #0D1219 = 19.6:1 AAA ✓ */
  display: block;
  margin-bottom: 0.15rem;
}

/* AA: rgba(255,255,255,0.8) on #0D1219 ≈ #CDCDD5 = 14.3:1 ✓ */
.contact-info {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.8);   /* was 0.45 — FAILED. Now 14.3:1 ✓ */
  display: block;
}

.closing-logo {
  margin-top: 2rem;
}

/* QR placeholder is purely decorative — labelled for screen readers via aria */
.closing-qr-placeholder {
  position: absolute;
  right: 4.5rem;
  bottom: 3.5rem;
  width: 76px;
  height: 76px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

/* Decorative label — low contrast intentional for secondary UI chrome */
.closing-qr-placeholder span {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
}

/* =============================================
   ANIMATIONS
   ============================================= */

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slide-title .title-logo-wrap { animation: heroFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
.slide-title h1               { animation: heroFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.25s both; }
.slide-title .title-tagline   { animation: heroFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.4s both; }
.slide-title .title-divider   { animation: heroFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.5s both; }
.slide-title .title-meta      { animation: heroFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.6s both; }
.slide-title .title-founders  { animation: heroFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.75s both; }

/* =============================================
   PRINT / PDF EXPORT
   ============================================= */

@media print {
  .reveal .slides section {
    page-break-after: always;
  }
  .reveal .controls,
  .reveal .progress { display: none !important; }
}