.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.playlist-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border: 1px solid #7fb9e5;
  border-radius: 999px;
  background: #ffffff12;
  color: #fff;
  font-weight: 850;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.playlist-button:hover,
.playlist-button:focus-visible {
  background: #ffffff24;
  border-color: #fff;
}

/* Larger guide artwork with subtle aviation context. */
.hero {
  min-height: 620px;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  gap: 28px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, #03172bf7 0%, #05243de8 45%, #0a355a9c 100%),
    url("assets/cockpit-hero.png") center / cover no-repeat;
  opacity: .24;
}

.hero::after {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  right: -130px;
  bottom: -210px;
  z-index: -1;
  border: 1px solid #78c7ff45;
  border-radius: 50%;
  box-shadow: 0 0 0 58px #78c7ff0b, 0 0 0 116px #78c7ff08;
}

.hero-art {
  position: relative;
  width: min(48vw, 690px);
  min-width: 420px;
  justify-self: end;
  display: grid;
  place-items: center;
}

.hero-art::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 3 / 4;
  right: -5%;
  top: 50%;
  transform: translateY(-50%) rotate(7deg) scale(1.12);
  z-index: 0;
  border-radius: 24px;
  background:
    linear-gradient(135deg, #0a355a26, #78c7ff52),
    url("assets/interview-study-guide-cover.jpg") center / cover no-repeat;
  opacity: .14;
  filter: blur(1.2px) saturate(.7);
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
}

.hero .hero-art img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-height: 550px;
  object-fit: contain;
  transform: scale(1.12);
  filter: drop-shadow(0 28px 42px #0009);
}

.hero-flight-path {
  position: absolute;
  inset: -7% -4% -10% -8%;
  width: 112%;
  height: 117%;
  z-index: 1;
  overflow: visible;
  opacity: .66;
}

.hero-flight-path path {
  fill: none;
  stroke: #78c7ff;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.hero-flight-path .hero-flight-dash {
  stroke: #e0ad51;
  stroke-width: 1.5;
  stroke-dasharray: 7 11;
  opacity: .7;
}

.hero-flight-path .hero-plane path {
  fill: #e0ad51;
  stroke: none;
}

@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: 64px;
    gap: 28px;
  }

  .hero-art {
    width: min(100%, 520px);
    min-width: 0;
    justify-self: center;
  }

  .hero-art::before {
    width: 88%;
    right: -2%;
    opacity: .11;
  }

  .hero .hero-art img {
    max-height: 410px;
    transform: scale(1.08);
  }

  .hero-flight-path {
    inset: -8% -2% -9% -4%;
    width: 106%;
    height: 116%;
  }
}

.guide-access {
  max-width: 1180px;
  margin: 0 auto 54px;
  padding: 42px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 44px;
  border: 1px solid #bfd4e5;
  border-radius: 28px;
  background: linear-gradient(135deg, #fff, #edf7ff);
  box-shadow: 0 18px 50px #15395812;
}

.guide-access h2 {
  margin: 4px 0 15px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.guide-access-copy > p:not(.eyebrow) {
  color: #5b6878;
  line-height: 1.65;
}

.privacy-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.privacy-points span {
  padding: 8px 12px;
  border-radius: 999px;
  color: #0b5ea8;
  background: #e3f2ff;
  font-size: .82rem;
  font-weight: 800;
}

.access-form {
  display: grid;
  gap: 15px;
  padding: 24px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #d4e2ed;
}

.access-form > label:not(.consent-row) {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.access-form small,
.form-note {
  color: #687688;
  font-weight: 500;
}

.access-form input[type="text"],
.access-form input[type="email"],
.access-form input[type="date"] {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #bfd1df;
  border-radius: 11px;
  background: #fbfdff;
  color: #071628;
  font: inherit;
}

.consent-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  color: #536274;
  font-size: .88rem;
  line-height: 1.5;
}

.consent-row input { margin-top: 4px; }
.access-form .primary-button:disabled { opacity: .65; cursor: wait; }
.form-note, .access-result { margin: 0; font-size: .86rem; line-height: 1.5; }
.access-result.good { color: #08723f; font-weight: 800; }
.access-result.retry { color: #9a4f00; font-weight: 800; }

@media (max-width: 800px) {
  .guide-access {
    margin: 0 16px 38px;
    padding: 25px 20px;
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .access-form { padding: 18px; }
}