:root {
  --color-amber-50: #fff2f2;
  --color-amber-100: #ffdede;
  --color-amber-200: #f4b9b9;
  --color-amber-600: #cc3300;
  --color-amber-700: #bc1010;
  --color-amber-800: #a10f10;
  --color-amber-900: #891515;
  --color-amber-950: #5f0e0e;
  --color-emerald-50: #eef7ff;
  --color-emerald-100: #dcebfb;
  --color-emerald-200: #bad7f0;
  --color-emerald-300: #8fc0e8;
  --color-emerald-400: #61a9dd;
  --color-emerald-500: #3d99d5;
  --color-emerald-600: #277cb6;
  --color-emerald-700: #1f689a;
  --color-emerald-800: #19557e;
  --color-emerald-900: #144566;
  --color-emerald-950: #0d3049;
  --color-sky-50: #f3f9ff;
  --color-sky-100: #e4f1fd;
  --color-sky-200: #c8e1f7;
  --color-sky-600: #277cb6;
  --color-sky-700: #1f689a;
  --color-sky-800: #19557e;
  --color-sky-900: #144566;
}

body {
  color: #1b3651;
  overflow-x: hidden;
}

a {
  color: #bc1010;
}

a:hover {
  color: #cc3300;
}

main p a,
main li a,
main h2 a,
main h3 a {
  color: inherit;
  text-decoration: none;
}

main p a:hover,
main li a:hover,
main h2 a:hover,
main h3 a:hover {
  color: inherit;
  text-decoration: none;
}

a.text-white {
  color: #fff;
}

a.text-white:hover {
  color: #fff;
}

a.text-emerald-700 {
  color: #1f689a;
}

a.text-emerald-800 {
  color: #19557e;
}

a.text-emerald-900,
a.text-sky-900 {
  color: #144566;
}

a.text-emerald-950 {
  color: #0d3049;
}

a.text-sky-800 {
  color: #19557e;
}

a.text-amber-900 {
  color: #bc1010;
}

.card {
  border: 1px solid #d6e6f5;
  box-shadow: 0 10px 26px rgba(20, 69, 102, 0.08);
}

.section-heading {
  color: #bc1010;
}


.site-header {
  background-color: var(--color-emerald-50);
  border-bottom: 4px solid #277cb6;
}

.site-header__logo-frame {
  max-width: 1065px;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  background: #fff;
  border-radius: 2rem 2rem 0.35rem 0.35rem;
  box-shadow: 0 10px 24px rgba(20, 69, 102, 0.18);
}

.max-w-\[960px\] {
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.home-feature-card {
  display: block;
}

.home-feature-card__image {
  display: block;
  width: 100%;
  object-position: center;
}

.home-feature-card__image--top {
  object-position: center top;
}

.home-feature-card__image--contain {
  object-fit: contain;
  background: #f3f9ff;
}

.home-feature-card__image--rosey {
  object-position: center 35%;
}

.email-update-card {
  align-self: start;
}

.pill-links a {
  white-space: nowrap;
}

.home-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-stat-card {
  min-width: 0;
}

.home-stat-card p {
  word-break: normal;
  overflow-wrap: normal;
}

.song-legacy-copy {
  color: #1f2937;
}

.song-legacy-copy > * + * {
  margin-top: 1rem;
}

.song-legacy-copy img {
  display: block;
  height: auto;
}

.video-feature-grid,
.video-lesson-grid {
  display: grid;
  gap: 1rem;
}

.video-lesson-card {
  position: relative;
  display: block;
  min-height: 11.5rem;
  padding: 1.4rem 4.4rem 1.35rem 1.4rem;
  border: 1px solid #bad7f0;
  border-radius: 1.75rem;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
  box-shadow: 0 12px 28px rgba(20, 69, 102, 0.09);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.video-lesson-card:hover {
  transform: translateY(-2px);
  border-color: #61a9dd;
  box-shadow: 0 18px 34px rgba(20, 69, 102, 0.13);
}

.video-lesson-card__eyebrow {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: #eef7ff;
  color: #277cb6;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.video-lesson-card__title {
  margin-top: 0.9rem;
  color: #144566;
  font-size: 1.2rem;
  line-height: 1.25;
  font-weight: 900;
}

.video-lesson-card__summary {
  margin-top: 0.8rem;
  color: #35536d;
  font-size: 0.98rem;
  line-height: 1.6;
}

.video-lesson-card__cue {
  position: absolute;
  right: 1.15rem;
  bottom: 1.15rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #3d99d5;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  box-shadow: 0 10px 18px rgba(39, 124, 182, 0.22);
}

.video-lesson-card--feature {
  min-height: 13.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #eef7ff 100%);
}

/* The content area is ~752px wide (960px container minus 208px sidebar),
   which is below Tailwind's md breakpoint (768px). Force md: grid classes
   to activate at sm breakpoint instead so columns render correctly. */
@media (min-width: 40rem) {
  main .grid.md\:grid-cols-2,
  main .grid.md\:grid-cols-\[240px_1fr\] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  main .grid.lg\:grid-cols-\[1fr_280px\],
  main .grid.lg\:grid-cols-\[1fr_320px\],
  main .grid.lg\:grid-cols-\[0\.9fr_1\.1fr\],
  main .grid.lg\:grid-cols-\[0\.95fr_1\.05fr\],
  main .grid.lg\:grid-cols-\[1\.05fr_0\.95fr\],
  main .grid.lg\:grid-cols-\[1\.15fr_0\.85fr\] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Missing Tailwind utilities not present in compiled site.css */
.bg-sky-500 { background-color: #0ea5e9; }
.bg-sky-800 { background-color: #075985; }
.bg-\[\#2d83c7\] { background-color: #2d83c7; }
.bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }
.bg-white\/15 { background-color: rgb(255 255 255 / 0.15); }
.border-sky-100 { border-color: #e0f2fe; }
.border-white\/70 { border-color: rgb(255 255 255 / 0.7); }
.ring-emerald-100 { --tw-ring-color: #d1fae5; }
.text-sky-950 { color: #082f49; }
.from-sky-50 { --tw-gradient-from: #f0f9ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(240 249 255 / 0)); }
.from-sky-600 { --tw-gradient-from: #0284c7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(2 132 199 / 0)); }
.from-amber-50 { --tw-gradient-from: #fffbeb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 251 235 / 0)); }
.via-sky-500 { --tw-gradient-stops: var(--tw-gradient-from), #0ea5e9, var(--tw-gradient-to, rgb(14 165 233 / 0)); }
.decoration-amber-300 { text-decoration-color: #fcd34d; }
.hover\:bg-amber-50:hover { background-color: #fffbeb; }
.hover\:bg-amber-100:hover { background-color: #fef3c7; }
.hover\:bg-amber-200:hover { background-color: #fde68a; }
.hover\:bg-amber-700:hover { background-color: #b45309; }
.hover\:bg-emerald-50:hover { background-color: #ecfdf5; }
.hover\:bg-emerald-100:hover { background-color: #d1fae5; }
.hover\:bg-emerald-200:hover { background-color: #a7f3d0; }
.hover\:bg-emerald-700:hover { background-color: #047857; }
.hover\:bg-sky-50:hover { background-color: #f0f9ff; }
.hover\:bg-sky-100:hover { background-color: #e0f2fe; }
.hover\:bg-sky-600:hover { background-color: #0284c7; }
.hover\:bg-sky-700:hover { background-color: #0369a1; }
.hover\:bg-sky-900:hover { background-color: #0c4a6e; }
.hover\:border-amber-400:hover { border-color: #fbbf24; }
.hover\:border-emerald-400:hover { border-color: #34d399; }
.hover\:border-sky-400:hover { border-color: #38bdf8; }
.hover\:text-amber-700:hover { color: #b45309; }
.hover\:text-amber-900:hover { color: #78350f; }

@media (max-width: 47.99rem) {
  .home-stats {
    grid-template-columns: 1fr;
  }

  .video-lesson-card {
    min-height: auto;
    padding-right: 4rem;
  }
}