/* DueDateHQ pitch deck, based on html-ppt pitch-deck template. */
.tpl-due-date {
  --bg: oklch(0.987 0.006 230);
  --bg-soft: oklch(0.955 0.009 230);
  --surface: oklch(0.998 0.003 230);
  --surface-2: oklch(0.955 0.009 230);
  --surface-elevated: oklch(1 0.001 230);
  --surface-inverse: oklch(0.235 0.032 248);
  --surface-inverse-muted: oklch(0.3 0.032 248);
  --border: oklch(0.855 0.012 230);
  --border-strong: oklch(0.72 0.016 230);
  --text-1: oklch(0.205 0.026 248);
  --text-2: oklch(0.45 0.025 248);
  --text-3: oklch(0.56 0.02 248);
  --primary: oklch(0.265 0.035 248);
  --accent: oklch(0.5 0.105 230);
  --accent-2: oklch(0.91 0.035 225);
  --accent-3: oklch(0.8 0.055 230);
  --good: oklch(0.49 0.13 148);
  --warn: oklch(0.78 0.105 76);
  --bad: oklch(0.58 0.22 27);
  --brand-wash: oklch(0.955 0.025 230);
  --warning-wash: oklch(0.94 0.042 76);
  --radius: 0.6rem;
  --radius-lg: 0.6rem;
  --shadow: 0 1px 2px 0 oklch(0.205 0.026 248 / 0.04), 0 1px 3px 0 oklch(0.205 0.026 248 / 0.06);
  --shadow-lifted: 0 18px 45px -36px oklch(0.5 0.105 230 / 0.42);
  --shadow-panel: 0 32px 90px -56px oklch(0.205 0.026 248 / 0.3);
  font-family: var(--font-sans);
  background: var(--bg);
}

.tpl-due-date .slide {
  padding: 76px 104px;
}

.tpl-due-date .slide::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.tpl-due-date .cover-bg {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: -2;
}

.tpl-due-date .cover-orbit {
  position: absolute;
  right: 88px;
  top: 88px;
  width: 312px;
  height: 312px;
  border-radius: var(--radius-lg);
  background: var(--brand-wash);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: -1;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 24px;
}

.tpl-due-date .cover-orbit .panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--surface);
  padding: 8px 10px;
}

.tpl-due-date .cover-orbit .row-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

.tpl-due-date .cover-orbit .row-line {
  height: 7px;
  border-radius: 999px;
  background: var(--secondary, var(--surface-2));
  flex: 1;
}

.tpl-due-date .cover-orbit .row-pill {
  width: 42px;
  height: 16px;
  border-radius: 999px;
  background: var(--warning-wash);
  border: 1px solid oklch(0.84 0.078 76);
}

.tpl-due-date .brand-lockup {
  position: absolute;
  top: 54px;
  left: 104px;
  display: flex;
  align-items: center;
}

.tpl-due-date .deck-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-1);
  line-height: 1;
}

.tpl-due-date .deck-logo-mark {
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}

.tpl-due-date .deck-logo-word {
  display: inline-flex;
  align-items: baseline;
  color: var(--text-1);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}

.tpl-due-date .deck-logo-word span {
  color: var(--accent);
}

.tpl-due-date .deck-logo-final {
  justify-content: center;
  gap: 18px;
}

.tpl-due-date .deck-logo-final .deck-logo-mark {
  width: 112px;
  height: 112px;
}

.tpl-due-date .deck-logo-final .deck-logo-word {
  font-size: 76px;
  letter-spacing: 0;
}

.tpl-due-date .kicker,
.tpl-due-date .num-tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--accent);
  text-transform: uppercase;
}

.tpl-due-date .h1 {
  max-width: 980px;
  font-size: 72px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: 0;
}

.tpl-due-date .h2 {
  max-width: 980px;
  font-size: 52px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0;
}

.tpl-due-date .lede {
  max-width: 760px;
  font-size: 22px;
  line-height: 1.48;
}

.tpl-due-date .section-num {
  position: absolute;
  right: 70px;
  bottom: 42px;
  z-index: 0;
  color: var(--surface-2);
  font-size: 210px;
  line-height: 0.82;
  font-weight: 700;
  letter-spacing: 0;
}

.tpl-due-date .slide > * {
  position: relative;
  z-index: 1;
}

.tpl-due-date .cover-bg {
  position: absolute;
  z-index: -2;
}

.tpl-due-date .cover-orbit {
  position: absolute;
  z-index: -1;
}

.tpl-due-date .brand-lockup {
  position: absolute;
  z-index: 2;
}

.tpl-due-date .section-num {
  position: absolute;
  z-index: 0;
}

.tpl-due-date .card {
  border-radius: var(--radius);
  min-height: 150px;
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.tpl-due-date .card h4 {
  color: var(--text-1);
}

.tpl-due-date .quote {
  max-width: 980px;
  font-size: 48px;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: 0;
}

.tpl-due-date .metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tpl-due-date .metric .n {
  color: var(--accent);
  font-size: 68px;
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0;
}

.tpl-due-date .metric .l {
  color: var(--text-2);
  font-size: 16px;
}

.tpl-due-date .mini-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-3);
  text-transform: uppercase;
}

.tpl-due-date .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tpl-due-date .large-pill {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-weight: 700;
}

.tpl-due-date .flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.tpl-due-date .flow-step {
  padding: 20px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.tpl-due-date .flow-step b {
  display: block;
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 13px;
}

.tpl-due-date .source-accent {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
}

.tpl-due-date .compare {
  display: grid;
  grid-template-columns: 1.05fr 0.9fr 0.9fr 1fr;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.tpl-due-date .compare > div {
  padding: 18px 20px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.tpl-due-date .compare > div:nth-child(4n) {
  border-right: none;
}

.tpl-due-date .compare .head {
  color: var(--text-1);
  font-weight: 700;
  background: var(--surface-2);
}

.tpl-due-date .timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.tpl-due-date .timeline-item {
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.tpl-due-date .timeline-item .phase {
  color: var(--accent);
  font-weight: 700;
}

.tpl-due-date .ask-box {
  background: var(--surface-inverse);
  color: var(--surface);
  padding: 52px 58px;
  border-radius: var(--radius-lg);
  border: 1px solid oklch(0.43 0.028 248);
  box-shadow: var(--shadow-panel);
}

.tpl-due-date .ask-box .h2,
.tpl-due-date .ask-box .lede,
.tpl-due-date .ask-box .dim {
  color: var(--surface);
}

.tpl-due-date .deck-footer {
  color: var(--text-3);
}

.tpl-due-date .slide-number {
  font-weight: 700;
}

.tpl-due-date .ask-metric {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}

.tpl-due-date .matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tpl-due-date .matrix .card {
  min-height: 190px;
}

.tpl-due-date .soft-band {
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  background: var(--brand-wash);
  border: 1px solid var(--border);
}

@media (max-width: 900px) {
  .tpl-due-date .slide {
    padding: 56px 40px;
  }

  .tpl-due-date .h1 {
    font-size: 48px;
  }

  .tpl-due-date .h2 {
    font-size: 38px;
  }

  .tpl-due-date .grid.g3,
  .tpl-due-date .grid.g4,
  .tpl-due-date .flow,
  .tpl-due-date .timeline,
  .tpl-due-date .matrix {
    grid-template-columns: 1fr;
  }

  .tpl-due-date .compare {
    grid-template-columns: 1fr;
  }
}