/* Reuse the app's calligraphic navigation artwork beside its destination content. */
main #lune-beta-title::before,
main .blog-hero h1::before,
main #about-title::before,
.site-footer__directory-title::before {
  content: "";
  display: block;
  background: currentColor;
  -webkit-mask: var(--section-icon) center / contain no-repeat;
  mask: var(--section-icon) center / contain no-repeat;
}

main #lune-beta-title { --section-icon: url("/campaign/nav-icons/envelope.webp"); }
main #lune-beta-title::before {
  width: 38px;
  height: 38px;
  margin: 0 auto 10px;
  -webkit-mask-size: 145%;
  mask-size: 145%;
}

main #lost-cosmos-title { --section-icon: url("/campaign/nav-icons/lightningCloud.webp"); }
main #neuro-title { --section-icon: url("/campaign/nav-icons/circuit.webp"); }
main #constellations-title { --section-icon: url("/campaign/nav-icons/stars.webp"); }
main #quick-missions-title { --section-icon: url("/campaign/nav-icons/target.webp"); }
main #problem-solver-title { --section-icon: url("/campaign/nav-icons/puzzle.webp"); }
main #platform-title { --section-icon: url("/campaign/nav-icons/fountainPen.webp"); }
main #voice-title { --section-icon: url("/campaign/nav-icons/microphone.webp"); }
main #luna-title { --section-icon: url("/campaign/nav-icons/pawPrint.webp"); }
main #processing-title { --section-icon: url("/campaign/nav-icons/checklist.webp"); }
main #medals-title { --section-icon: url("/campaign/nav-icons/medal.webp"); }
main #tock-title { --section-icon: url("/campaign/nav-icons/clock.webp"); }
main #engine-title { --section-icon: url("/campaign/nav-icons/gear.webp"); }
main #blog-title { --section-icon: url("/campaign/nav-icons/book.webp"); }
main .section--handwriting > .section-title:not([id]) { --section-icon: url("/campaign/nav-icons/fountainPen.webp"); }

main :is(#lost-cosmos-title, #neuro-title, #constellations-title,
         #quick-missions-title, #problem-solver-title, #platform-title,
         #voice-title, #luna-title, #processing-title, #medals-title,
         #engine-title, #blog-title, .section--handwriting > .section-title:not([id]))::before {
  content: "";
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background: var(--blue, currentColor);
  box-shadow: none;
  -webkit-mask: var(--section-icon) center / contain no-repeat;
  mask: var(--section-icon) center / contain no-repeat;
}
main #processing-title::before {
  -webkit-mask-size: 145%;
  mask-size: 145%;
}

main .blog-hero h1 { --section-icon: url("/campaign/nav-icons/book.webp"); }
main .blog-hero h1::before,
main #about-title::before {
  width: clamp(38px, 4vw, 52px);
  height: clamp(38px, 4vw, 52px);
  margin-bottom: 14px;
}
main #about-title { --section-icon: url("/campaign/nav-icons/empathy.webp"); }

/* Replace the short heading strokes in feature panels with the matching artwork. */
main .lost-cosmos__eyebrow::before,
main .campaign-feature__eyebrow::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 0;
  background: currentColor;
  box-shadow: none;
  -webkit-mask: var(--section-icon) center / contain no-repeat;
  mask: var(--section-icon) center / contain no-repeat;
}
main .lost-cosmos__eyebrow { --section-icon: url("/campaign/nav-icons/lightningCloud.webp"); }
main .campaign-feature[data-feature="quick-missions"] .campaign-feature__eyebrow {
  --section-icon: url("/campaign/nav-icons/target.webp");
}
main .campaign-feature[data-feature="constellations"] .campaign-feature__eyebrow {
  --section-icon: url("/campaign/nav-icons/stars.webp");
}

.site-footer__directory-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--text);
  font: 700 18px var(--font-sans);
  --section-icon: url("/campaign/nav-icons/map.webp");
}
.site-footer__directory-title::before {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

/* A pen flourish points at the waitlist action without intercepting taps.
   Its tiny SVG owns the gradient and halo, including on mobile where CSS
   filters are disabled. Reduced motion keeps its gradient still. */
main .hero-waitlist,
.lune-cta__form {
  position: relative;
  width: min(100%, 560px);
}
main .hero-waitlist button[type="submit"],
.lune-cta__form button[type="submit"] {
  position: relative;
}
main .hero-waitlist button[type="submit"]::after,
.lune-cta__form button[type="submit"]::after {
  content: "";
  position: absolute;
  top: 6px;
  left: calc(100% + 8px);
  width: 64px;
  height: 60px;
  background: url("/campaign/waitlist-arrow.svg?v=2") center / contain no-repeat;
  pointer-events: none;
}

@media (max-width: 640px) {
  /* Equal side margins center the form and leave room for the outside arrow. */
  main .hero-waitlist { width: calc(100% - 36px); }
  main .hero-waitlist input { text-align: center; }
  main .hero-waitlist button[type="submit"] {
    width: 100%;
    align-self: center;
    padding-inline: 12px;
    white-space: nowrap;
  }
  main .hero-waitlist button[type="submit"]::after {
    width: 48px;
    height: 45px;
    left: calc(100% + 7px);
    top: 4px;
  }
}

@media (max-width: 600px) {
  .lune-cta__form { width: calc(100% - 36px); }
  .lune-cta__form button[type="submit"] {
    width: 100%;
    align-self: center;
    padding-inline: 12px;
    white-space: nowrap;
  }
  .lune-cta__form button[type="submit"]::after {
    width: 48px;
    height: 45px;
    left: calc(100% + 7px);
    top: 4px;
  }
}

@media (max-width: 640px) {
  main :is(#lost-cosmos-title, #neuro-title, #constellations-title,
           #quick-missions-title, #problem-solver-title, #platform-title,
           #voice-title, #luna-title, #processing-title, #medals-title,
           #engine-title, #blog-title, .section--handwriting > .section-title:not([id])) { align-items: flex-start; }
  main :is(#lost-cosmos-title, #neuro-title, #constellations-title,
           #quick-missions-title, #problem-solver-title, #platform-title,
           #voice-title, #luna-title, #processing-title, #medals-title,
           #engine-title, #blog-title, .section--handwriting > .section-title:not([id]))::before {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
}