/* Slide shared shell + tokens. Each slide HTML loads this. */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: #0a0a0a; }

.slide {
  width: 1280px;
  height: 720px;
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--bone-white);
  background: var(--charcoal);
  background-image:
    linear-gradient(rgba(249, 246, 240, 0.04) 0.5px, transparent 0.5px),
    linear-gradient(90deg, rgba(249, 246, 240, 0.04) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
}

.slide--light {
  background: var(--bone-white);
  color: var(--charcoal);
  background-image:
    linear-gradient(rgba(45, 45, 45, 0.06) 0.5px, transparent 0.5px),
    linear-gradient(90deg, rgba(45, 45, 45, 0.06) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
}

/* ============================================================
   Slide header — top eyebrow + slide number
   ============================================================ */
.slide-header {
  position: absolute;
  top: 40px; left: 60px; right: 60px;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 5;
}
.slide-header__brand { display: flex; align-items: center; gap: 14px; }
.slide-header__brand img,
.slide-header__brand svg { width: 22px; height: 22px; }
.slide-header__brand .pulse-stack {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
}
.slide-header__brand .pulse-stack::before {
  content: ""; position: absolute; width: 18px; height: 18px;
  background: var(--pulse-blue); border-radius: 50%; opacity: 0.25;
  animation: da-fab-ring 2.2s ease-out infinite;
}
.slide-header__brand .pulse-stack::after {
  content: ""; position: relative; width: 12px; height: 12px;
  background: var(--pulse-blue); border-radius: 50%;
  border: 1px solid currentColor;
  animation: da-brand-pulse 3s ease-in-out infinite;
}
.slide-header__title {
  font-family: var(--font-details);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.slide-header__num {
  font-family: var(--font-details);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  display: flex; align-items: center; gap: 12px;
}
.slide-header__num .num-box {
  display: inline-block;
  border: 1px solid var(--signal-red);
  padding: 2px 8px;
  color: var(--signal-red);
}
.slide-header__rule {
  position: absolute;
  top: 84px; left: 60px; right: 60px;
  height: 1px;
  background: rgba(249,246,240,0.18);
}
.slide--light .slide-header__rule { background: var(--hairline); }

/* ============================================================
   Slide footer — contact strip
   ============================================================ */
.slide-footer {
  position: absolute;
  bottom: 36px; left: 60px; right: 60px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-details);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(249,246,240,0.6);
}
.slide--light .slide-footer { color: var(--fg-muted); }
.slide-footer__brand { font-family: var(--font-headers); font-weight: 700; color: inherit; letter-spacing: 0.02em; font-size: 14px; }
.slide-footer__meta { display: flex; gap: 18px; align-items: center; }
.slide-footer__meta .sep { color: var(--signal-red); }

/* ============================================================
   Slide body — typography
   ============================================================ */
.slide-eyebrow {
  font-family: var(--font-details);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-red);
}
.slide h1, .slide h2, .slide h3, .slide h4 { color: inherit; }
.slide--light h1, .slide--light h2, .slide--light h3, .slide--light h4 { color: var(--charcoal); }
.slide-display {
  font-family: var(--font-headers);
  font-weight: 700;
  font-size: 78px;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
  color: inherit;
}
.slide-display--xl {
  font-size: 108px;
}
.slide-h1 {
  font-family: var(--font-headers);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}
.slide-h2 {
  font-family: var(--font-headers);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.15;
  margin: 0;
}
.slide-sub {
  font-family: var(--font-details);
  font-size: 22px;
  line-height: 1.35;
  font-weight: 400;
  margin: 0;
  color: rgba(249,246,240,0.78);
}
.slide--light .slide-sub { color: var(--fg-muted); }
.slide-body {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   Helpers
   ============================================================ */
.slide-pulse-dot {
  display: inline-block; width: 14px; height: 14px;
  background: var(--pulse-blue); border-radius: 50%;
  border: 1px solid currentColor;
  vertical-align: middle;
}
.slide-signal-dot {
  display: inline-block; width: 14px; height: 14px;
  background: var(--signal-red); border-radius: 50%;
  border: 1px solid currentColor;
}

.slide-card {
  border: 1.5px solid var(--pulse-blue);
  padding: 36px 32px;
  background: rgba(58,123,213,0.04);
}
.slide-card--light {
  background: var(--bone-white);
  border: 1px solid var(--charcoal);
  color: var(--charcoal);
}
.slide-card__label {
  font-family: var(--font-details);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pulse-blue);
  margin-bottom: 12px;
}

.slide-pinned {
  position: relative;
  background: var(--pinned-note);
  color: var(--charcoal);
  border: 1px solid var(--charcoal);
  border-left: 4px solid var(--signal-red);
  padding: 56px 40px 36px;
}
.slide-pinned::before {
  content: "";
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px;
  background: var(--signal-red);
  border: 1px solid var(--charcoal);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}