/* ==========================================================================
   Brite Lotus — Homepage
   A deliberate squeeze page: no navigation, one action.
   ========================================================================== */

.bl-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: clamp(3.5rem, 2rem + 7vw, 7rem);
  overflow: hidden;
}

/* A second, slowly drifting starfield layer sits above the base image so the
   sky has parallax depth rather than reading as one flat photo. */
.bl-hero::after {
  content: "";
  position: absolute;
  inset: -10% -5%;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 0.5px, transparent 0.5px);
  background-size: 120px 120px;
  opacity: 0.28;
  pointer-events: none;
  animation: bl-drift 90s linear infinite;
}

@keyframes bl-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-120px, -120px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bl-hero::after { animation: none; }
}

/* The headline gets its own row so it can run wider than the paragraph
   column, the way it does in the design — it reaches toward the portrait
   instead of wrapping inside a narrow measure. */
.bl-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  grid-template-areas:
    "title title"
    "copy  media";
  align-items: start;
  column-gap: clamp(2rem, 1rem + 4vw, 5rem);
  row-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  width: 100%;
}

.bl-hero__headline { grid-area: title; }
.bl-hero__copy     { grid-area: copy; max-width: 34rem; }
.bl-hero__media    { grid-area: media; }

.bl-hero__title {
  color: var(--bl-off-white);
  text-wrap: balance;
}

.bl-hero__intro > * + * { margin-top: var(--bl-space-5); }

.bl-hero__intro p {
  font-size: var(--bl-size-lead);
  font-weight: var(--bl-weight-medium);
  line-height: 1.5;
  letter-spacing: -0.028em;
  color: var(--bl-off-white);
  max-width: 30rem;
}

.bl-hero__intro .bl-tight > * + * { margin-top: 0; }

/* Portrait ------------------------------------------------------------------ */

.bl-hero__media {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 30rem;
  /* The portrait sits lower than the intro copy, creating the diagonal the
     eye travels down toward the form. */
  margin-top: clamp(0rem, -8rem + 14vw, 7rem);
}

/* The PNG already carries its own rounded corners, so no border-radius here
   — adding one would clip a shape that is already clipped. It also has no
   drop-shadow: a black shadow against the night sky reads as a dark box
   around the photo rather than depth. */
.bl-hero__portrait {
  display: block;
  width: 100%;
}

/* Neon spill from the photo onto the sky behind it. A soft radial wash
   rather than a box-shadow, so there is no hard rectangular edge — the
   glow just fades out into the starfield. */
.bl-hero__media::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  background:
    radial-gradient(52% 46% at 38% 42%, rgba(214, 62, 196, 0.34) 0%, rgba(214, 62, 196, 0) 70%),
    radial-gradient(56% 52% at 66% 62%, rgba(78, 96, 232, 0.30) 0%, rgba(78, 96, 232, 0) 72%);
  filter: blur(18px);
  pointer-events: none;
}

/* Signup form --------------------------------------------------------------- */

.bl-signup {
  margin-top: var(--bl-space-8);
  max-width: 22.5rem;
}

.bl-signup__fields > * + * { margin-top: var(--bl-space-4); }

.bl-signup__consent { margin-top: var(--bl-space-4); }

.bl-signup__submit { margin-top: var(--bl-space-5); }

.bl-signup__note { margin-top: var(--bl-space-3); }

.bl-signup__status {
  margin-top: var(--bl-space-4);
  padding: var(--bl-space-4) var(--bl-space-5);
  border-radius: var(--bl-radius-md);
  background: rgba(250, 250, 250, 0.1);
  border: 1px solid var(--bl-hairline-dark);
  font-size: var(--bl-size-sm);
  font-weight: var(--bl-weight-bold);
  line-height: 1.45;
}

.bl-signup__status[hidden] { display: none; }
.bl-signup__status[data-state="error"] { border-color: rgba(255, 138, 138, 0.5); color: #ff8a8a; }
.bl-signup__status[data-state="ok"]    { border-color: rgba(230, 255, 0, 0.5); color: var(--bl-yellow); }

/* Responsive ---------------------------------------------------------------- */

@media (max-width: 980px) {
  .bl-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "media"
      "copy";
    row-gap: var(--bl-space-7);
  }

  .bl-hero__copy { max-width: 40rem; }

  /* Portrait moves above the story on narrow screens so the face lands
     before the reading does. */
  .bl-hero__media {
    justify-self: start;
    max-width: 22rem;
    margin-top: 0;
  }

  .bl-signup { max-width: 26rem; }
}

@media (max-width: 560px) {
  .bl-hero { min-height: 0; }
  .bl-hero__media { max-width: 100%; }
  .bl-signup { max-width: none; }
}

/* Short viewports ----------------------------------------------------------

   A 13-inch laptop is wide enough for the two-column hero but not tall enough
   for it, and the gap is worse in Firefox and its forks, whose chrome sits
   roughly 80px deeper than Safari's. The signup fields were landing just below
   the fold — on a page whose whole job is that one action.

   So on short screens the layout gives up spacing before it gives up type.
   Padding, row gaps and the air above the form shrink first; body copy only
   tightens its leading and never drops below 16px, because the readers this
   site is for are the last people who should be squinting. The portrait also
   narrows, since it is what sets the row height. */

@media (min-width: 981px) and (max-height: 900px) {
  .bl-hero { padding-block: clamp(2rem, 1rem + 2vw, 3rem); }

  .bl-hero__grid { row-gap: var(--bl-space-5); }

  /* Caps the display size without touching the token, which other pages use. */
  .bl-hero__title { font-size: clamp(2.5rem, 1.2rem + 3.4vw, 3.75rem); }

  .bl-hero__intro > * + * { margin-top: var(--bl-space-4); }
  .bl-hero__intro p { line-height: 1.42; }

  .bl-signup { margin-top: var(--bl-space-5); }
  .bl-signup__fields > * + * { margin-top: var(--bl-space-3); }
  .bl-signup__submit { margin-top: var(--bl-space-4); }

  /* The diagonal between copy and portrait is the point of the composition,
     so it is reduced rather than removed. */
  .bl-hero__media {
    max-width: 24rem;
    margin-top: clamp(0rem, -6rem + 10vw, 4rem);
  }
}

@media (min-width: 981px) and (max-height: 760px) {
  .bl-hero { padding-block: 1.5rem; }
  .bl-hero__title { font-size: clamp(2.25rem, 1rem + 2.8vw, 3rem); }
  .bl-hero__intro > * + * { margin-top: var(--bl-space-3); }

  .bl-hero__media {
    max-width: 20rem;
    margin-top: 0;
  }
}

/* FAQ ----------------------------------------------------------------------- */

.bl-faq__title {
  margin-bottom: var(--bl-space-8);
  text-align: center;
  text-wrap: balance;
}

.bl-faq__inner {
  max-width: 60rem;
  margin-inline: auto;
}