/* Lucy's Mexican Grill — Brandcore proposal deck
   One stylesheet, no override layers. Desktop slides are laid out on a 1640 × 920
   artboard and scaled with --px, so proportions hold from 1366 × 768 to 2560 × 1440.
   Theme pairs (WCAG contrast on their own surface, all ≥ 7:1 for text):
     dark  #1A100C–#2B1A12: #FFFFFF 16.7+, #EDE3DA 13.2+, #D9CBBE 10.5+, #FBBF24 10.0+
     light #F7F0E6 / #FFFCF7 / #EFE4D4: #1A100C 14.9+, #3D2C22 10.6+, #4A3A30 8.6+, #7A2410 8.0+ */

@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/space-grotesk-500-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/plus-jakarta-sans-400-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/jetbrains-mono-400-normal.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --px: 1px;

  /* Espresso, gold and chile: taken from the client's own mark */
  --espresso: #1A100C;          /* logo plate */
  --espresso-2: #24150F;
  --espresso-3: #2B1A12;
  --ember: #140C09;
  --gold: #FBBF24;
  --gold-deep: #F59E0B;         /* logo tile */
  --chile: #EF4444;             /* decorative only, never small text */

  --cream: #F7F0E6;
  --paper: #FFFCF7;
  --linen: #EFE4D4;
  --terracotta: #7A2410;        /* small accent text on light */
  --terracotta-em: #8A2C10;     /* display accent on light */

  --on-dark: #FFFFFF;
  --on-dark-2: #EDE3DA;
  --on-dark-3: #D9CBBE;
  --ink: #1A100C;
  --ink-2: #3D2C22;
  --ink-3: #4A3A30;

  --font-display: 'Space Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

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

button, a, input { font: inherit; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

.ui-icon, .date-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Deck frame & slide shell ---------- */
#deck, .deck {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--espresso);
}

.slide {
  position: relative;
  display: none;
  flex-direction: column;
  height: 100vh;
  min-height: 640px;
  padding: calc(40 * var(--px)) calc(72 * var(--px)) calc(30 * var(--px));
  overflow: hidden;
}
.slide.active { display: flex; }

.theme-dark {
  background:
    radial-gradient(calc(900 * var(--px)) calc(620 * var(--px)) at 88% 8%, rgba(239, 68, 68, 0.10), transparent 70%),
    radial-gradient(calc(820 * var(--px)) calc(560 * var(--px)) at 6% 100%, rgba(245, 158, 11, 0.09), transparent 70%),
    linear-gradient(160deg, var(--espresso) 0%, var(--espresso-2) 100%);
  color: var(--on-dark);
}
.theme-light {
  background:
    radial-gradient(calc(900 * var(--px)) calc(600 * var(--px)) at 92% 0%, rgba(245, 158, 11, 0.12), transparent 70%),
    linear-gradient(170deg, var(--paper) 0%, var(--cream) 55%, #F3E9DB 100%);
  color: var(--ink);
}

/* ---------- Slide header (slides 2–7) ---------- */
.slide-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--px));
  padding-bottom: calc(16 * var(--px));
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}
.theme-light .slide-header { border-bottom-color: rgba(26, 16, 12, 0.14); }

.header-brand {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--px));
}

/* The client's mark always sits on its own espresso plate (#1A100C is the logo's
   background), so the white and gold lettering keeps full contrast on any slide. */
.header-logo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: calc(66 * var(--px));
  padding: calc(8 * var(--px)) calc(14 * var(--px));
  border-radius: calc(12 * var(--px));
  background: var(--espresso);
  border: 1px solid rgba(251, 191, 36, 0.38);
  box-shadow: 0 calc(8 * var(--px)) calc(22 * var(--px)) rgba(0, 0, 0, 0.32);
}
.theme-light .header-logo-pill {
  border-color: rgba(26, 16, 12, 0.5);
  box-shadow: 0 calc(8 * var(--px)) calc(20 * var(--px)) rgba(60, 30, 10, 0.18);
}
.header-logo-pill img {
  height: calc(50 * var(--px));
  width: auto;
  max-width: none;
  opacity: 1;
  filter: none;
}

.header-wordmark {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--px));
  padding-left: calc(18 * var(--px));
  border-left: 1px solid rgba(251, 191, 36, 0.28);
}
.header-wordmark b {
  font-family: var(--font-display);
  font-size: max(14px, calc(17 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--on-dark);
}
.header-wordmark small {
  font-size: max(12px, calc(14 * var(--px)));
  font-weight: 500;
  color: var(--on-dark-3);
}
.theme-light .header-wordmark { border-left-color: rgba(26, 16, 12, 0.2); }
.theme-light .header-wordmark b { color: var(--ink); }
.theme-light .header-wordmark small { color: var(--ink-3); }

.header-meta {
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--px));
  font-family: var(--font-mono);
  font-size: max(12px, calc(14 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.header-meta b {
  padding: calc(7 * var(--px)) calc(12 * var(--px));
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: var(--gold);
  letter-spacing: 0.1em;
}
.theme-light .header-meta { color: var(--ink-2); }
.theme-light .header-meta b { background: var(--espresso); border-color: var(--espresso); color: var(--gold); }

/* ---------- Slide footer ---------- */
.slide-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(14 * var(--px));
  font-size: max(12px, calc(14 * var(--px)));
  color: var(--on-dark-3);
}
.theme-light .slide-footer { color: var(--ink-3); }

.page {
  font-family: var(--font-mono);
  font-size: max(12px, calc(14 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.theme-light .page { color: var(--terracotta); }

/* ---------- Type ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--px));
  font-family: var(--font-mono);
  font-size: max(12px, calc(14 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.kicker::before {
  content: '';
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: var(--chile);
  box-shadow: 0 0 calc(10 * var(--px)) rgba(239, 68, 68, 0.8);
}
.theme-light .kicker { color: var(--terracotta); }
.theme-light .kicker::before { box-shadow: none; }

h1, h2, h3 { text-wrap: balance; }
h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--on-dark);
}
h1 {
  margin-top: calc(18 * var(--px));
  font-size: calc(58 * var(--px));
  line-height: 1.02;
}
h2 {
  margin-top: calc(14 * var(--px));
  font-size: calc(46 * var(--px));
  line-height: 1.06;
}
h1 em, h2 em {
  display: block;
  font-style: normal;
  color: var(--gold);
}
.theme-light h2 { color: var(--ink); }
.theme-light h2 em { color: var(--terracotta-em); }

h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.lead {
  margin-top: calc(18 * var(--px));
  max-width: 60ch;
  font-size: max(15px, calc(19 * var(--px)));
  line-height: 1.55;
  color: var(--on-dark-2);
}
.theme-light .lead { color: var(--ink-2); }

.card-label {
  display: block;
  font-family: var(--font-mono);
  font-size: max(12px, calc(13 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.theme-light .card-label { color: var(--terracotta); }

/* Number chips: always gold on espresso, the logo's own pairing (11.2:1) */
.num-chip {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: calc(44 * var(--px));
  height: calc(44 * var(--px));
  min-width: 34px;
  min-height: 34px;
  border-radius: calc(10 * var(--px));
  background: var(--espresso);
  border: 1px solid rgba(251, 191, 36, 0.45);
  font-family: var(--font-mono);
  font-size: max(13px, calc(16 * var(--px)));
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gold);
}

/* ---------- Shared numbered list ---------- */
.num-list {
  display: grid;
  gap: calc(14 * var(--px));
  margin-top: calc(28 * var(--px));
}
.num-item {
  display: flex;
  align-items: flex-start;
  gap: calc(18 * var(--px));
  padding: calc(18 * var(--px)) calc(22 * var(--px));
  border-radius: calc(14 * var(--px));
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(251, 191, 36, 0.18);
}
.theme-light .num-item {
  background: var(--paper);
  border-color: rgba(26, 16, 12, 0.1);
  box-shadow: 0 calc(6 * var(--px)) calc(18 * var(--px)) rgba(70, 35, 12, 0.07);
}
.num-item h3 {
  font-size: max(16px, calc(21 * var(--px)));
  color: var(--on-dark);
}
.num-item p {
  margin-top: calc(5 * var(--px));
  font-size: max(15px, calc(17 * var(--px)));
  line-height: 1.5;
  color: var(--on-dark-2);
}
.theme-light .num-item h3 { color: var(--ink); }
.theme-light .num-item p { color: var(--ink-2); }

.two {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(64 * var(--px));
  align-items: center;
  padding: calc(20 * var(--px)) 0;
}
.narrative-col { display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- Browser & phone frames ---------- */
.browser {
  overflow: hidden;
  border-radius: calc(14 * var(--px));
  background: var(--ember);
  border: 1px solid rgba(251, 191, 36, 0.3);
  box-shadow: 0 calc(34 * var(--px)) calc(80 * var(--px)) rgba(0, 0, 0, 0.5);
}
.browser-bar, .case-bar {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--px));
  height: calc(42 * var(--px));
  min-height: 32px;
  padding: 0 calc(16 * var(--px));
  background: var(--espresso-2);
  border-bottom: 1px solid rgba(251, 191, 36, 0.18);
}
.browser-dots { display: inline-flex; gap: calc(7 * var(--px)); }
.browser-dots i {
  width: calc(11 * var(--px));
  height: calc(11 * var(--px));
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  background: #EF4444;
}
.browser-dots i:nth-child(2) { background: #F59E0B; }
.browser-dots i:nth-child(3) { background: #22C55E; }
.browser-url {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--px));
  flex: 1;
  max-width: calc(420 * var(--px));
  height: calc(28 * var(--px));
  min-height: 22px;
  padding: 0 calc(12 * var(--px));
  border-radius: calc(7 * var(--px));
  background: rgba(0, 0, 0, 0.35);
  font-family: var(--font-mono);
  font-size: max(12px, calc(13 * var(--px)));
  color: var(--on-dark-2);
  white-space: nowrap;
  overflow: hidden;
}
.browser-url .ui-icon { color: #4ADE80; }

.phone {
  padding: calc(9 * var(--px));
  border-radius: calc(40 * var(--px));
  background: linear-gradient(150deg, #3A2418, #0E0806 60%);
  border: 1px solid rgba(251, 191, 36, 0.34);
  box-shadow: 0 calc(34 * var(--px)) calc(70 * var(--px)) rgba(0, 0, 0, 0.6);
}
.phone-screen {
  overflow: hidden;
  border-radius: calc(32 * var(--px));
  background: var(--espresso);
}
.phone-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(52 * var(--px));
  padding: calc(10 * var(--px)) calc(16 * var(--px)) 0;
  color: var(--on-dark);
}
.phone-nav img { height: calc(28 * var(--px)); width: auto; }
.phone-nav .ui-icon { width: calc(22 * var(--px)); height: calc(22 * var(--px)); }
.phone-hero img { width: 100%; aspect-ratio: 544 / 404; object-fit: cover; }
.phone-body {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--px));
  padding: calc(16 * var(--px)) calc(16 * var(--px)) calc(20 * var(--px));
}
.phone-body b {
  font-family: var(--font-display);
  font-size: max(13px, calc(19 * var(--px)));
  line-height: 1.15;
  color: var(--on-dark);
}
.phone-body > span:not(.phone-btn):not(.phone-btn-row) {
  margin-bottom: calc(4 * var(--px));
  font-size: max(11px, calc(13 * var(--px)));
  color: var(--on-dark-3);
}
.phone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--px));
  height: calc(38 * var(--px));
  padding: 0 calc(6 * var(--px));
  border-radius: calc(9 * var(--px));
  border: 1px solid rgba(251, 191, 36, 0.5);
  font-size: max(11px, calc(13 * var(--px)));
  white-space: nowrap;
  font-weight: 700;
  color: var(--on-dark);
}
.phone-btn.primary { background: var(--gold); border-color: var(--gold); color: var(--espresso); }
.phone-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--px)); }

/* ---------- Slide 1: cover ---------- */
.slide.cover {
  padding: 0;
  background: linear-gradient(100deg, var(--ember) 0%, var(--espresso) 60%);
}
.slide.cover.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: calc(60 * var(--px)) calc(40 * var(--px)) calc(60 * var(--px)) calc(84 * var(--px));
}

.header-logo-pill.cover-logo {
  height: auto;
  margin-bottom: calc(44 * var(--px));
  padding: calc(20 * var(--px)) calc(26 * var(--px));
  border-radius: calc(20 * var(--px));
  border-color: rgba(251, 191, 36, 0.42);
  box-shadow:
    0 calc(20 * var(--px)) calc(50 * var(--px)) rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.header-logo-pill.cover-logo img { height: calc(118 * var(--px)); }

.cover h1 { max-width: calc(700 * var(--px)); }
.cover .lead { max-width: calc(600 * var(--px)); margin-top: calc(24 * var(--px)); }

.fact-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--px));
  margin-top: calc(32 * var(--px));
}
.fact-row li {
  display: inline-flex;
  align-items: center;
  gap: calc(9 * var(--px));
  height: calc(42 * var(--px));
  min-height: 32px;
  padding: 0 calc(16 * var(--px));
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.36);
  font-size: max(13px, calc(16 * var(--px)));
  font-weight: 600;
  color: var(--on-dark);
}
.fact-row .ui-icon { color: var(--gold); }

.prepared {
  margin-top: calc(30 * var(--px));
  font-size: max(13px, calc(15 * var(--px)));
  color: var(--on-dark-3);
}
.prepared b { color: var(--on-dark); font-weight: 700; }

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(calc(620 * var(--px)) calc(520 * var(--px)) at 50% 46%, rgba(160, 62, 22, 0.42), transparent 72%),
    radial-gradient(calc(500 * var(--px)) calc(400 * var(--px)) at 80% 92%, rgba(239, 68, 68, 0.16), transparent 70%),
    linear-gradient(180deg, #24130C 0%, #1A0F0A 100%);
  border-left: 1px solid rgba(251, 191, 36, 0.2);
}
.hero-visual canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.22;
  pointer-events: none;
}
.stage-label {
  position: absolute;
  z-index: 3;
  top: calc(44 * var(--px));
  left: calc(48 * var(--px));
  font-family: var(--font-mono);
  font-size: max(12px, calc(14 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero-stage {
  position: relative;
  z-index: 2;
  width: calc(752 * var(--px));
  height: calc(650 * var(--px));
  margin-top: calc(20 * var(--px));
}
.hero-browser {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(700 * var(--px));
}
.hero-browser .browser-view img {
  width: 100%;
  aspect-ratio: 1134 / 668;
  object-fit: cover;
  object-position: center top;
}
.hero-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(244 * var(--px));
}
.stage-caption {
  position: absolute;
  left: calc(4 * var(--px));
  top: calc(482 * var(--px));
  width: calc(420 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--px));
  padding-left: calc(18 * var(--px));
  border-left: 2px solid var(--gold);
}
.stage-caption b {
  font-family: var(--font-display);
  font-size: max(15px, calc(20 * var(--px)));
  color: var(--on-dark);
}
.stage-caption span {
  font-size: max(13px, calc(16 * var(--px)));
  line-height: 1.5;
  color: var(--on-dark-2);
}
.cover > .page {
  position: absolute;
  z-index: 3;
  right: calc(48 * var(--px));
  bottom: calc(36 * var(--px));
}

/* ---------- Slide 2: foundation ---------- */
.sources-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.sources-card {
  padding: calc(24 * var(--px)) calc(26 * var(--px));
  border-radius: calc(18 * var(--px));
  background: var(--paper);
  border: 1px solid rgba(26, 16, 12, 0.1);
  box-shadow: 0 calc(16 * var(--px)) calc(40 * var(--px)) rgba(70, 35, 12, 0.1);
}
.source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12 * var(--px));
  margin-top: calc(16 * var(--px));
}
.source-grid li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: calc(12 * var(--px));
  align-items: center;
  padding: calc(14 * var(--px));
  border-radius: calc(12 * var(--px));
  background: var(--cream);
  border: 1px solid rgba(26, 16, 12, 0.08);
}
.source-grid .ui-icon {
  grid-row: span 2;
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  min-width: 30px;
  min-height: 30px;
  padding: calc(9 * var(--px));
  border-radius: 50%;
  background: var(--espresso);
  color: var(--gold);
  stroke-width: 1.8;
}
.source-grid b { font-size: max(14px, calc(17 * var(--px))); color: var(--ink); }
.source-grid small { font-size: max(12px, calc(14 * var(--px))); color: var(--ink-3); }
.source-note {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--px));
  margin-top: calc(16 * var(--px));
  font-size: max(14px, calc(16 * var(--px)));
  font-weight: 600;
  color: var(--terracotta);
}
.sources-flow {
  display: block;
  width: calc(240 * var(--px));
  height: calc(56 * var(--px));
  margin: calc(4 * var(--px)) auto;
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.home-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: calc(18 * var(--px)) calc(22 * var(--px));
  padding: calc(22 * var(--px)) calc(26 * var(--px));
  border-radius: calc(18 * var(--px));
  background: linear-gradient(150deg, var(--espresso-3), var(--espresso));
  border: 1px solid rgba(251, 191, 36, 0.4);
  box-shadow: 0 calc(20 * var(--px)) calc(46 * var(--px)) rgba(40, 18, 8, 0.32);
  color: var(--on-dark);
}
.home-card .header-logo-pill {
  height: auto;
  padding: calc(12 * var(--px));
  border-color: rgba(251, 191, 36, 0.3);
  box-shadow: none;
}
.home-card .header-logo-pill img { height: calc(56 * var(--px)); }
.home-card .card-label { color: var(--gold); }
.home-copy b {
  display: block;
  margin-top: calc(4 * var(--px));
  font-family: var(--font-display);
  font-size: max(17px, calc(24 * var(--px)));
  color: var(--on-dark);
}
.home-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(10 * var(--px)) calc(20 * var(--px));
  padding-top: calc(16 * var(--px));
  border-top: 1px solid rgba(251, 191, 36, 0.22);
}
.home-list li { white-space: nowrap; }
.home-list li, .exec-deliverables li {
  position: relative;
  padding-left: calc(24 * var(--px));
  font-size: max(13px, calc(15 * var(--px)));
  line-height: 1.45;
  color: var(--on-dark-2);
}
.home-list li::before, .exec-deliverables li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.05em;
  height: 1.05em;
  background: var(--gold);
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}

/* ---------- Slide 3: opportunities ---------- */
.section-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: calc(48 * var(--px));
  align-items: end;
  margin-top: calc(30 * var(--px));
}
.section-head .lead { margin-top: 0; }

.opportunity-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(24 * var(--px));
  align-content: center;
  padding: calc(26 * var(--px)) 0 calc(10 * var(--px));
}
.opportunity-card {
  display: flex;
  flex-direction: column;
  padding: calc(30 * var(--px));
  border-radius: calc(18 * var(--px));
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.2);
  box-shadow: 0 calc(22 * var(--px)) calc(48 * var(--px)) rgba(0, 0, 0, 0.3);
}
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(22 * var(--px));
}
.icon-badge {
  display: inline-grid;
  place-items: center;
  width: calc(56 * var(--px));
  height: calc(56 * var(--px));
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: var(--gold);
}
.icon-badge .ui-icon { width: 46%; height: 46%; }
.opportunity-card h3 {
  margin-top: calc(10 * var(--px));
  font-size: max(19px, calc(25 * var(--px)));
  color: var(--on-dark);
}
.opportunity-card p {
  margin: calc(12 * var(--px)) 0 calc(22 * var(--px));
  font-size: max(16px, calc(17.5 * var(--px)));
  line-height: 1.55;
  color: var(--on-dark-2);
}
.card-outcome {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
  margin-top: auto;
  padding-top: calc(18 * var(--px));
  border-top: 1px solid rgba(251, 191, 36, 0.2);
}
.card-outcome span {
  font-family: var(--font-mono);
  font-size: max(12px, calc(13 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.card-outcome b { font-size: max(15px, calc(18 * var(--px))); color: var(--gold); }

/* ---------- Slide 4: website ---------- */
.website-two { grid-template-columns: 0.82fr 1.18fr; gap: calc(56 * var(--px)); }
.website .num-list { margin-top: calc(24 * var(--px)); gap: calc(12 * var(--px)); }
.website .num-item { padding: calc(16 * var(--px)) calc(20 * var(--px)); }
.mockup-col { display: flex; flex-direction: column; min-width: 0; }
.website-browser { border-color: rgba(26, 16, 12, 0.55); box-shadow: 0 calc(30 * var(--px)) calc(70 * var(--px)) rgba(60, 28, 10, 0.32); }
.mock-hero-stage {
  position: relative;
  width: 100%;
  height: clamp(300px, 42vh, 440px);
  overflow: hidden;
  background: var(--espresso);
}
.mockup-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.mockup-caption {
  margin-top: calc(16 * var(--px));
  font-size: max(13px, calc(15 * var(--px)));
  color: var(--ink-3);
}
.mockup-caption b { color: var(--ink); }

/* ---------- Slide 5: before & after ---------- */
.proof-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: calc(48 * var(--px));
  align-items: end;
  margin-top: calc(30 * var(--px));
}
.proof-head .lead { margin-top: 0; }
.comparison {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-content: center;
  gap: calc(32 * var(--px));
}
.case-frame {
  overflow: hidden;
  border-radius: calc(14 * var(--px));
  background: var(--ember);
  border: 1px solid rgba(251, 191, 36, 0.28);
  box-shadow: 0 calc(28 * var(--px)) calc(64 * var(--px)) rgba(0, 0, 0, 0.5);
}
.case-url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: max(12px, calc(13 * var(--px)));
  color: var(--on-dark-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-tag {
  padding: calc(4 * var(--px)) calc(12 * var(--px));
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: max(12px, calc(13 * var(--px)));
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.case-tag.before { border: 1px solid rgba(237, 227, 218, 0.5); color: var(--on-dark-2); }
.case-tag.after { background: var(--gold); color: var(--espresso); }
.case-viewport {
  position: relative;
  height: clamp(280px, 38vh, 400px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #FFFFFF;
}
.case-viewport img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.035);
  transform-origin: center top;
}
.case-frame figcaption {
  padding: calc(14 * var(--px)) calc(18 * var(--px));
  background: var(--espresso-2);
  border-top: 1px solid rgba(251, 191, 36, 0.18);
  font-size: max(14px, calc(16 * var(--px)));
  font-weight: 600;
  color: var(--on-dark);
}

/* ---------- Slide 6: roadmap ---------- */
.exec-head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: calc(48 * var(--px));
  align-items: end;
  margin-top: calc(30 * var(--px));
}
.exec-head .lead { margin-top: 0; }
.exec-cards-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(24 * var(--px));
  align-content: center;
  padding: calc(24 * var(--px)) 0 calc(18 * var(--px));
}
.exec-phase-card {
  display: flex;
  flex-direction: column;
  padding: calc(28 * var(--px)) calc(30 * var(--px));
  border-radius: calc(18 * var(--px));
  background: var(--paper);
  border: 1px solid rgba(26, 16, 12, 0.1);
  box-shadow: 0 calc(16 * var(--px)) calc(40 * var(--px)) rgba(70, 35, 12, 0.09);
  color: var(--ink);
}
.exec-card-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(12 * var(--px));
  padding-bottom: calc(16 * var(--px));
  border-bottom: 1px solid rgba(26, 16, 12, 0.12);
}
.exec-days {
  display: inline-flex;
  align-items: baseline;
  gap: calc(8 * var(--px));
  font-family: var(--font-mono);
  font-size: max(12px, calc(14 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.exec-days b {
  font-family: var(--font-display);
  font-size: calc(64 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--terracotta-em);
}
.exec-phase-num {
  padding-bottom: calc(4 * var(--px));
  font-family: var(--font-mono);
  font-size: max(12px, calc(13 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.exec-phase-card h3 {
  margin-top: calc(18 * var(--px));
  font-size: max(18px, calc(23 * var(--px)));
  color: var(--ink);
}
.exec-phase-card > p {
  margin: calc(10 * var(--px)) 0 calc(18 * var(--px));
  font-size: max(15px, calc(16.5 * var(--px)));
  line-height: 1.55;
  color: var(--ink-2);
}
.exec-deliverables {
  display: grid;
  gap: calc(9 * var(--px));
  margin-top: auto;
  padding-top: calc(18 * var(--px));
  border-top: 1px dashed rgba(26, 16, 12, 0.2);
}
.exec-deliverables li { color: var(--ink-2); font-weight: 500; }
.exec-deliverables li::before { background: var(--terracotta); }

.exec-phase-card.featured {
  background: linear-gradient(160deg, var(--espresso-3), var(--espresso));
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 calc(26 * var(--px)) calc(56 * var(--px)) rgba(40, 18, 8, 0.36);
  color: var(--on-dark);
}
.featured .exec-card-top { border-bottom-color: rgba(251, 191, 36, 0.24); }
.featured .exec-days, .featured .exec-days b { color: var(--gold); }
.featured .exec-phase-num { color: var(--on-dark-3); }
.featured h3 { color: var(--on-dark); }
.exec-phase-card.featured > p { color: var(--on-dark-2); }
.featured .exec-deliverables { border-top-color: rgba(251, 191, 36, 0.3); }
.featured .exec-deliverables li { color: var(--on-dark-2); }
.featured .exec-deliverables li::before { background: var(--gold); }

.exec-footer-bar {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(24 * var(--px));
  padding: calc(14 * var(--px)) calc(24 * var(--px));
  border-radius: calc(12 * var(--px));
  background: var(--espresso);
  font-family: var(--font-mono);
  font-size: max(12px, calc(13 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.exec-footer-bar b {
  display: block;
  margin-top: calc(3 * var(--px));
  font-family: var(--font-body);
  font-size: max(14px, calc(16 * var(--px)));
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-dark);
}

/* ---------- Slide 7: partner & request ---------- */
.close-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: calc(56 * var(--px));
  align-items: center;
  padding: calc(20 * var(--px)) 0;
}
.close h2 { font-size: calc(54 * var(--px)); }
.close .lead { font-size: max(15px, calc(20 * var(--px))); }
.partner-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(22 * var(--px)) calc(28 * var(--px));
  align-items: center;
  margin-top: calc(36 * var(--px));
  padding: calc(30 * var(--px)) calc(32 * var(--px));
  border-radius: calc(20 * var(--px));
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.24);
  box-shadow: 0 calc(22 * var(--px)) calc(48 * var(--px)) rgba(0, 0, 0, 0.32);
}
/* Portrait is an edge-to-edge circular crop; the ring is drawn here, not baked in. */
.partner-avatar-wrap {
  width: calc(150 * var(--px));
  height: calc(150 * var(--px));
  min-width: 112px;
  min-height: 112px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 0 0 4px var(--espresso), 0 0 0 6px var(--gold), 0 calc(16 * var(--px)) calc(34 * var(--px)) rgba(0, 0, 0, 0.5);
}
.partner-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  opacity: 1;
  filter: none;
}
.partner-name-heading {
  font-family: var(--font-display);
  font-size: max(22px, calc(32 * var(--px)));
  font-weight: 700;
  line-height: 1.1;
  color: var(--on-dark);
}
.partner-role-sub {
  margin-top: calc(4 * var(--px));
  font-size: max(14px, calc(16 * var(--px)));
  font-weight: 600;
  color: var(--gold);
}
.partner-quote {
  margin-top: calc(12 * var(--px));
  font-size: max(15px, calc(18 * var(--px)));
  line-height: 1.5;
  font-style: italic;
  color: var(--on-dark-2);
}
.partner-contact-pills {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--px));
  padding-top: calc(20 * var(--px));
  border-top: 1px solid rgba(251, 191, 36, 0.2);
}
.partner-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--px));
  min-height: 34px;
  padding: calc(8 * var(--px)) calc(14 * var(--px));
  border-radius: calc(9 * var(--px));
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.34);
  font-family: var(--font-mono);
  font-size: max(13px, calc(14.5 * var(--px)));
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
}
.partner-pill .ui-icon { color: var(--gold); }
.partner-pill:hover { border-color: var(--gold); }

.concierge-col { display: flex; flex-direction: column; }
.request {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--px));
  padding: calc(30 * var(--px)) calc(32 * var(--px));
  border-radius: calc(20 * var(--px));
  background: var(--espresso-2);
  border: 1px solid rgba(251, 191, 36, 0.26);
  border-top: calc(4 * var(--px)) solid var(--gold);
  box-shadow: 0 calc(26 * var(--px)) calc(56 * var(--px)) rgba(0, 0, 0, 0.4);
}
.request h3 {
  font-size: max(26px, calc(38 * var(--px)));
  line-height: 1.05;
  color: var(--on-dark);
}
.request > p {
  font-size: max(15px, calc(17 * var(--px)));
  line-height: 1.5;
  color: var(--on-dark-2);
}
.screen-request { display: flex; flex-direction: column; gap: calc(12 * var(--px)); margin-top: calc(4 * var(--px)); }
.suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--px)); }
.suggestions button {
  min-height: 44px;
  padding: calc(12 * var(--px));
  border-radius: calc(10 * var(--px));
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.42);
  font-family: var(--font-mono);
  font-size: max(13px, calc(14 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--on-dark);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.suggestions button:hover,
.suggestions button[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--espresso);
}
.picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--px)); }
.picker-col { display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.request label {
  font-family: var(--font-mono);
  font-size: max(12px, calc(13 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.date-control { position: relative; display: flex; align-items: center; }
.request input {
  width: 100%;
  height: 50px;
  padding: 0 52px 0 14px;
  border-radius: calc(10 * var(--px));
  background: var(--ember);
  border: 1px solid rgba(251, 191, 36, 0.36);
  color: var(--on-dark);
  color-scheme: dark;
  font-family: var(--font-mono);
  font-size: max(14px, calc(15 * var(--px)));
}
.request input::-webkit-calendar-picker-indicator { opacity: 0; pointer-events: none; }
.date-control button {
  position: absolute;
  right: 3px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
}
.date-control button:hover { background: rgba(251, 191, 36, 0.12); }
.date-icon { width: 22px; height: 22px; pointer-events: none; }
#picker-help {
  font-size: max(13px, calc(14 * var(--px)));
  color: var(--gold);
}
a#contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--px));
  min-height: 52px;
  margin-top: calc(4 * var(--px));
  padding: calc(14 * var(--px)) calc(18 * var(--px));
  border-radius: calc(12 * var(--px));
  background: var(--gold);
  color: var(--espresso);
  font-family: var(--font-mono);
  font-size: max(14px, calc(15 * var(--px)));
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 calc(12 * var(--px)) calc(28 * var(--px)) rgba(245, 158, 11, 0.28);
  transition: transform 0.15s ease, background 0.15s ease;
}
a#contact:hover { background: #FCD34D; transform: translateY(-1px); }
.request small {
  font-size: max(13px, calc(14 * var(--px)));
  line-height: 1.5;
  color: var(--on-dark-3);
}
.print-contact { display: none; }

/* ---------- Presentation controls ---------- */
.controls {
  position: fixed;
  left: 50%;
  bottom: 1.4vh;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(20, 12, 9, 0.94);
  border: 1px solid rgba(251, 191, 36, 0.36);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  color: var(--on-dark);
}
.controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--on-dark);
  cursor: pointer;
}
.controls button:hover { background: rgba(255, 255, 255, 0.1); }
#counter {
  min-width: 48px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
}
#play {
  padding: 0 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0 999px 999px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--gold);
}
.controls button:focus-visible, a:focus-visible, input:focus-visible, .suggestions button:focus-visible, .date-control button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.theme-light a:focus-visible { outline-color: var(--terracotta); }

/* ---------- Desktop: centered artboard ---------- */
@media screen and (min-width: 701px) {
  :root { --px: min(1px, calc(96vw / 1640), calc(91vh / 920)); }

  html, body {
    height: 100vh;
    overflow: hidden;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 30%, #24150F 0%, #0B0705 100%);
  }
  #deck, .deck {
    width: calc(1640 * var(--px));
    height: calc(920 * var(--px));
    margin: auto;
    border-radius: calc(18 * var(--px));
    border: 1px solid rgba(251, 191, 36, 0.24);
    box-shadow: 0 36px 100px rgba(0, 0, 0, 0.65);
  }
  .slide {
    height: 100%;
    min-height: 0;
  }
}

/* Short desktop viewports (e.g. 1366 × 768): the text floors outgrow the scaled cards,
   so the roadmap drops its summary bar (the cards carry the same facts) and tightens. */
@media screen and (min-width: 701px) and (max-height: 820px) {
  .exec-footer-bar { display: none; }
  .exec-cards-grid { padding-bottom: 0; }
  .exec-phase-card { padding: calc(24 * var(--px)) calc(26 * var(--px)); }
  .exec-days b { font-size: calc(56 * var(--px)); }
  .exec-deliverables { gap: calc(6 * var(--px)); }
}

@media screen and (min-width: 701px) and (max-height: 760px) {
  .two, .close-grid { padding: calc(10 * var(--px)) 0; }
  .num-list { margin-top: calc(18 * var(--px)); gap: calc(8 * var(--px)); }
  .num-item { padding: calc(12 * var(--px)) calc(18 * var(--px)); }
  .num-item p { margin-top: 2px; line-height: 1.4; }
  .lead { line-height: 1.45; }
}

/* ---------- Mobile ---------- */
@media screen and (max-width: 700px) {
  html, body { overflow-x: hidden; }
  html { scroll-padding-top: 72px; }
  .slide {
    height: auto;
    min-height: 100svh;
    padding: 76px 18px 32px;
  }
  .slide-header { flex-wrap: wrap; gap: 12px; }
  .header-wordmark { display: none; }
  .header-logo-pill { height: 54px; }
  .header-logo-pill img { height: 40px; }
  .header-meta { font-size: 12px; gap: 8px; }

  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  .lead { font-size: 16px; }

  .slide.cover { padding: 76px 18px 32px; }
  .slide.cover.active { display: flex; flex-direction: column; }
  .close h2 { font-size: 30px; }
  .close .lead { font-size: 16px; }
  a#contact { text-align: center; }
  .hero-copy { padding: 0 0 28px; }
  .header-logo-pill.cover-logo { margin-bottom: 28px; padding: 14px 18px; }
  .header-logo-pill.cover-logo img { height: 76px; max-width: 100%; }
  .fact-row li { height: 38px; }
  .hero-visual {
    display: block;
    padding: 64px 14px 18px;
    border-left: 0;
    border-radius: 16px;
  }
  .stage-label { top: 20px; left: 16px; }
  .hero-stage { width: 100%; height: auto; margin: 0; }
  .hero-browser { position: relative; width: 100%; }
  .hero-phone { display: none; }
  .cover > .page { position: static; align-self: flex-end; margin-top: 14px; }

  .two, .website-two, .close-grid, .proof-head, .exec-head, .section-head,
  .opportunity-grid, .exec-cards-grid, .comparison {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .home-copy b { font-size: 19px; overflow-wrap: anywhere; }
  .two, .close-grid { padding: 22px 0; }
  .source-grid { grid-template-columns: 1fr; }
  .home-card { grid-template-columns: 1fr; }
  .home-list { grid-template-columns: 1fr; }
  .home-list li { white-space: normal; }
  .stage-caption { position: static; width: auto; margin-top: 18px; }
  .mock-hero-stage { height: auto; aspect-ratio: 1134 / 668; }
  .comparison { justify-content: stretch; }
  .case-viewport { width: 100%; height: auto; }
  .exec-footer-bar { grid-template-columns: 1fr; }
  .partner-card { grid-template-columns: 1fr; justify-items: start; padding: 22px; }
  .picker-grid, .suggestions { grid-template-columns: 1fr; }
  .slide-footer { flex-wrap: wrap; gap: 8px; }

  .controls { top: 10px; bottom: auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Print: every slide on its own landscape page ---------- */
@media print {
  @page { size: letter landscape; margin: 0.25in; }
  :root { --px: 0.6px; }
  html, body { background: #FFFFFF; height: auto; overflow: visible; }
  #deck, .deck { width: auto; height: auto; overflow: visible; border: 0; box-shadow: none; }
  .slide, .slide.active, .slide.cover {
    display: flex !important;
    width: calc(1640 * var(--px));
    height: calc(920 * var(--px));
    min-height: 0;
    break-after: page;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .slide.cover { display: grid !important; grid-template-columns: 1fr 1fr; }
  .slide:last-child { break-after: auto; }
  .controls, canvas, .screen-request { display: none !important; }
  .print-contact {
    display: block;
    font-family: var(--font-mono);
    font-size: 10pt;
    font-weight: 700;
    color: var(--on-dark);
  }
}