/* SKYL palette: harbour blue leads, cornflower accents, coral stays for buttons. */
:root { --teal: #1E4A6E; --shell: #F6E7DC; --peach: #E3EBF2; --apricot: #7C9CC4; }
.hero::after { background: linear-gradient(90deg, rgba(30,74,110,0.94) 0%, rgba(30,74,110,0.78) 38%, rgba(30,74,110,0) 66%); }
.footer-top img.sub-logo { width: 220px; margin: 0; }
.brand img.lockup { width: 220px; }
@media (max-width: 700px) {
  .brand img.lockup { width: 168px; }
  .hero::after { background: linear-gradient(180deg, rgba(30,74,110,1) 0%, rgba(30,74,110,1) calc(100% - 340px), rgba(30,74,110,0) calc(100% - 250px)); }
}
/* The book site: additions to the shared styles. */
.book-hero { background: var(--teal); color: var(--shell); }
.book-hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s6); align-items: center; padding-block: var(--s6); }
.book-hero .label { color: var(--shell); }
.book-hero .display { font-size: 76px; line-height: 70px; }
.book-hero .display em { color: var(--peach); }
.book-hero p { font-size: 20px; line-height: 30px; max-width: 520px; }
.book-hero a:not(.btn) { color: var(--shell); }
.book-hero .cover { border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28); max-width: 360px; justify-self: end; }
.book-hero .cover img { width: 100%; height: auto; }
.signup { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
.signup .field { flex: 1 1 260px; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--teal); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.exercise { border-top: 1px solid var(--peach); padding-block: var(--s5); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5); align-items: start; }
.exercise:last-child { border-bottom: 1px solid var(--peach); }
@media (max-width: 1000px) {
  .book-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .book-hero .cover { justify-self: start; max-width: 260px; }
  .exercise { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}
@media (max-width: 700px) {
  .book-hero .display { font-size: 50px; line-height: 48px; }
  .book-hero .wrap { padding-block: var(--s5); }
}