/* ============================================================
   /quiz/ — the standalone funnel surface (PRD 8.1)
   Loaded after main.css. Tokens only.

   The page is one section on the drench, mirroring the quiz block
   on the home page: copy left, the quiz panel right. Everything
   here exists to make that single section behave like a page.
   ============================================================ */

.funnel {
  /* The seal is cropped by the viewport edge by design; without
     this it would widen the page instead of being cut off. */
  overflow: hidden;
  /* One job, one screen: the drench reaches the fold even before
     the quiz panel has rendered. */
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
}
.funnel__in { position: relative; z-index: 1; width: 100%; }

/* The Apply button in the nav IS this page. The shared current-page
   rule paints a crimson hairline under it, which reads as damage on
   the gold pill — a transparent edge shows the fill through. */
.nav a.btn[aria-current="page"] { border-bottom-color: transparent; }

/* The meta line sits above the h1 here, same as the home hero. */
.funnel .hero__meta { margin-bottom: var(--s-4); }

@media (min-width: 901px) {
  /* The quiz panel is the tallest thing on the page; centering the
     copy against it spreads the empty half instead of leaving one
     dead block under the lead. */
  .funnel .grid12 { align-items: center; }
  /* Seal on the copy side, cropped by the left edge: it sits behind
     the type the way it does on the home hero, and keeps the quiz
     panel and the form on clean crimson. */
  .funnel .seal { right: auto; left: calc(var(--gutter) * -0.6); }
}

@media (max-width: 900px) {
  /* Stacked, the quiz panel should follow the copy immediately
     rather than inheriting the desktop column gap. */
  .funnel .col-right { margin-top: var(--s-2); }
}