/* ═══════════════════════════════════════════════════════════════
   sleep-doc.css
   Palette: Deep Obsidian / Midnight Slate / Zerest Amber Gold
   ═══════════════════════════════════════════════════════════════ */

body {
  background:             var(--bg);
  color:                  var(--text-1);
  font-family:            var(--font);
  -webkit-font-smoothing: antialiased;
}
b, strong {
  font-weight: bold !important;
  color:#C8A96E;
}

#sleep-doc-page {
    --bg:          #0e0e10;
  --surface:     #16161a;
  --surface-2:   #1e1e24;
  --border:      rgba(255, 255, 255, 0.07);
  --accent:      #c8a96e;
  --accent-dim:  rgba(200, 169, 110, 0.14);
  --accent-ring: rgba(200, 169, 110, 0.3);
  --text-1:      #e8e6e0;
  --text-2:      rgba(232, 230, 224, 0.55);
  --text-3:      rgba(232, 230, 224, 0.25);
  --font:        'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono:        'JetBrains Mono', 'Fira Mono', 'Courier New', monospace;
  --radius:      12px;
  --radius-sm:   6px;
  max-width: 1200px;
  margin:    0 auto;
  padding:   3.5rem 1.5rem 6rem;
}

/* ── Header ──────────────────────────────────────────────────── */

.sd-header {
  text-align:    center;
  margin-bottom: 3rem;
}

.sd-eyebrow {
  font-size:      30px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--accent);
  font-family:    var(--mono);
  margin-bottom:  0.6rem;
}

.sd-title {
  font-size:      clamp(1.8rem, 5vw, 2.6rem);
  font-weight:    300;
  letter-spacing: 0.01em;
  line-height:    1.25;
  color:var(--accent)
}

/* ── Video grid ──────────────────────────────────────────────── */

.sd-videos {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.sd-video-card {
  background:    var(--surface);
  border:        0.5px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
}

.sd-video-frame {
  position:      relative;
  width:         100%;
  padding-top:   56.25%;
  background:    var(--surface-2);
}

.sd-video-frame iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   none;
}

/* ── Message card ────────────────────────────────────────────── */

.sd-message-section {
  margin-bottom: 3rem;
}

.sd-message-card {
  background:    var(--surface);
  border:        0.5px solid var(--border);
  border-radius: var(--radius);
  padding:       1.5rem;
  text-align:    center;
}

.sd-message-eyebrow {
  color:         var(--accent);
  font-size:     1.2rem;
}

.sd-message-text {
  font-size:      1.2rem;
  line-height:    1.5;
  color:          var(--text-2);
  max-width:      1500px;
  margin:         0 auto;
  font-weight:    300;
}

/* ── CTA ─────────────────────────────────────────────────────── */

.sd-cta-section {
  display:         flex;
  justify-content: center;
}

.sd-cta-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  background:      var(--accent-dim);
  border:          0.5px solid var(--accent-ring);
  color:           var(--accent);
  font-size:       14px;
  font-family:     var(--font);
  letter-spacing:  0.02em;
  padding:         0.85rem 1.75rem;
  border-radius:   30px;
  text-decoration: none;
  transition:      background 0.18s, color 0.18s, transform 0.18s;
}

.sd-cta-btn:hover {
  background: var(--accent);
  color:      var(--bg);
  transform:  translateY(-1px);
}

.sd-cta-btn:active {
  transform: translateY(0);
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 640px) {
  #sleep-doc-page {
    padding: 2.5rem 1.25rem 4rem;
  }

  .sd-videos {
    grid-template-columns: 1fr;
  }

  .sd-message-card {
    padding: 1.75rem 1.5rem;
  }

  .sd-cta-btn {
    width:           100%;
    justify-content: center;
  }
}