/* ==========================================================================
   start.html — the qualifier funnel

   Loaded after styles.css, and leans on it for .btn, .eyebrow, .lede,
   .accent-word, .grain, .cursor-dot and .orb. Everything here is specific to
   the one-question-at-a-time flow.
   ========================================================================== */

.start-body {
  min-height: 100svh;   /* see the note on .footer — dvh thrashes on iOS */
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Header — wordmark and one way out, nothing else
   -------------------------------------------------------------------------- */
.start-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
}
.start-head__logo {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
}
.start-head__logo em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-normal);
  padding-right: 0.25rem;
}
.start-head__back {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow-sm);
  text-transform: uppercase;
  color: var(--text-subtle);
  transition: color var(--dur-300) var(--ease-house);
}
.start-head__back:hover { color: var(--text-strong); }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.start-main {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.25rem 4rem;
  overflow: hidden;
}
.start-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.start-intro {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  align-items: center;
  text-align: center;
}
.start-intro h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.25rem, 7vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
  max-width: 14ch;
}
.start-intro .lede { max-width: 40ch; }

.start-foot {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-subtle);
}
.start-foot a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Quiz card — the same aperture as the pricing pair

   Layer order matches .plan exactly: sky 0, aurora 1, content 2, glare 3,
   rim 4. The drift and aurora keyframes are the ones already defined in
   styles.css, so both cards move to the same clock.

   No 3D tilt here, unlike .plan — a card that leans while you are typing
   into it is a nuisance rather than an effect.
   -------------------------------------------------------------------------- */
.quiz { position: relative; }

.quiz__card {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg,
              rgba(10, 15, 13, 0.92) 0%,
              rgba(10, 15, 13, 0.82) 40%,
              rgba(5, 5, 16, 0.90) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 6px rgba(10, 15, 13, 0.10),
    0 22px 44px -18px rgba(10, 15, 13, 0.34),
    0 64px 100px -44px rgba(10, 15, 13, 0.40);
}

.quiz__content {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
}

/* --- Sky ------------------------------------------------------------------
   Strip width and background-size are the pricing card's numbers, and must
   stay paired with the translate distance in sky-drift-a/b: each layer has to
   travel exactly one tile per loop or the reset is visible.
   -------------------------------------------------------------------------- */
/* Carried at the featured card's strength, not the base one — this is a
   single card on an empty page, so it has to hold the composition alone. */
.quiz__sky {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
}
.quiz__sky span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background-repeat: repeat-x;
  background-position: left bottom;
  will-change: transform;
}
.quiz__sky span:nth-child(1) {
  background-image: url("assets/clouds/cloud-b.png");
  width: 400%;
  background-size: 63.25% auto;
  opacity: 0.55;
  animation: sky-drift-a 38s linear infinite;
}
.quiz__sky span:nth-child(2) {
  background-image: url("assets/clouds/cloud-a.png");
  width: 460%;
  background-size: 65.2174% auto;
  opacity: 0.40;
  animation: sky-drift-b 26s linear infinite;
}

/* --- Aurora --------------------------------------------------------------- */
.quiz__aurora {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.80;
  background:
    radial-gradient(38% 44% at 24% 28%, rgba(20, 225, 193, 0.55) 0%, rgba(20, 225, 193, 0) 70%),
    radial-gradient(34% 40% at 78% 22%, rgba(76, 229, 199, 0.42) 0%, rgba(76, 229, 199, 0) 72%),
    radial-gradient(46% 50% at 58% 82%, rgba(16, 198, 169, 0.38) 0%, rgba(16, 198, 169, 0) 74%);
  animation: aurora-drift 18s var(--ease-in-out) infinite alternate;
}

/* --- Glare — --mx/--my are written from start.js on pointer move ----------- */
.quiz__glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms var(--ease-house);
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.30) 0%,
    rgba(255, 255, 255, 0.08) 34%,
    rgba(255, 255, 255, 0) 68%);
}
.quiz:hover .quiz__glare { opacity: 1; }

/* --- Iridescent rim ------------------------------------------------------- */
.quiz__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: conic-gradient(from 0deg at 50% 50%,
              rgba(20, 225, 193, 0) 0deg,
              rgba(20, 225, 193, 0.75) 70deg,
              rgba(255, 255, 255, 0.85) 150deg,
              rgba(76, 229, 199, 0.55) 240deg,
              rgba(20, 225, 193, 0) 360deg);
  /* Border-only: fill the box, then punch out everything inside the padding */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.55;
  transition: opacity 400ms var(--ease-house);
}
.quiz:hover .quiz__card::after { opacity: 1; }

.quiz__bar {
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.quiz__fill {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: var(--radius-pill);
  background: var(--grad-button);
  box-shadow: 0 0 14px 0 rgba(20, 225, 193, 0.55);
  transition: width var(--dur-500) var(--ease-house);
}

.quiz__count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.875rem 0 1.5rem;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow-sm);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.quiz__back {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: rgba(255, 255, 255, 0.45);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: color var(--dur-300) var(--ease-house);
}
.quiz__back:hover { color: var(--accent); }
.quiz__back[hidden] { display: none; }

/* --- Stage ---------------------------------------------------------------
   Only the active step is in flow; the rest are lifted out of it so the card
   is never sized by the tallest step it is not currently showing. The stage's
   height is set from JS and eased, so the card grows into the next question
   rather than snapping.
   -------------------------------------------------------------------------- */
.quiz__stage {
  position: relative;
  overflow: hidden;
  transition: height var(--dur-500) var(--ease-house);
}
.quiz__step {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--dur-300) var(--ease-house),
    transform var(--dur-300) var(--ease-house),
    visibility 0s linear var(--dur-300);
}
.quiz__step[data-active] {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0.08s, 0.08s, 0s;
}

.quiz__q {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.375rem, 4.5vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tighter);
  color: #fff;
}
.quiz__hint {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   Options
   -------------------------------------------------------------------------- */
.quiz__options { display: grid; grid-template-columns: 1fr; gap: 0.625rem; }

.opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.125rem;
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    background-color var(--dur-300) var(--ease-house),
    border-color var(--dur-300) var(--ease-house),
    transform var(--dur-300) var(--ease-house);
}
.opt:hover {
  background: rgba(20, 225, 193, 0.10);
  border-color: rgba(20, 225, 193, 0.45);
  transform: translateY(-2px);
}
.opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Held for a beat after the click so the choice is seen before the step
   advances — otherwise the answer appears to be ignored. */
.opt[data-chosen] {
  background: rgba(20, 225, 193, 0.20);
  border-color: var(--accent);
}

.opt__go {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.26);
  position: relative;
  transition: background-color var(--dur-300) var(--ease-house),
              border-color var(--dur-300) var(--ease-house);
}
.opt__go::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background-color var(--dur-300) var(--ease-house);
}
.opt:hover .opt__go { border-color: var(--accent); }
.opt[data-chosen] .opt__go { border-color: var(--accent); background: rgba(20, 225, 193, 0.25); }
.opt[data-chosen] .opt__go::after { background: var(--accent); }

.quiz__options--pair { grid-template-columns: 1fr; }

/* --- The two packages, as compact versions of the pricing pair ------------
   Full apertures rather than translucent panels: their own cloud plates,
   aurora and rim, so they read as the cards from the pricing section rather
   than as holes cut in the quiz card behind them.
   -------------------------------------------------------------------------- */
.quiz__options--plans { grid-template-columns: 1fr; }

.opt--plan {
  display: block;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  /* Denser than .plan__card's mix. These sit ON weather rather than on the
     light page, so they need to out-darken the fog behind them or the card
     edge disappears and the small type goes muddy. */
  background: linear-gradient(180deg,
              rgba(6, 10, 9, 0.97) 0%,
              rgba(8, 12, 11, 0.93) 40%,
              rgba(3, 3, 12, 0.97) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 14px 30px -14px rgba(0, 0, 0, 0.7);
}
/* The base .opt hover tints the whole surface; here the weather is doing that
   job, so hover only brightens the rim and lifts. */
.opt--plan:hover { background-color: transparent; }

.opt__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.125rem 1.25rem 1.25rem;
}

/* Sky — same tile scales and travel as .plan__sky, so it shares the
   sky-drift-a/b keyframes and loops seamlessly at this size too. */
.opt__sky {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
.opt__sky i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background-repeat: repeat-x;
  background-position: left bottom;
  will-change: transform;
}
.opt__sky i:nth-child(1) {
  background-image: url("assets/clouds/cloud-b.png");
  width: 400%;
  background-size: 63.25% auto;
  opacity: 0.55;
  animation: sky-drift-a 38s linear infinite;
}
.opt__sky i:nth-child(2) {
  background-image: url("assets/clouds/cloud-a.png");
  width: 460%;
  background-size: 65.2174% auto;
  opacity: 0.40;
  animation: sky-drift-b 26s linear infinite;
}
/* Offset phase so the pair are never showing the same frame of weather. */
.opt--plan:nth-child(2) .opt__sky i:nth-child(1) { animation-delay: -14s; }
.opt--plan:nth-child(2) .opt__sky i:nth-child(2) { animation-delay: -9s; }

.opt__aurora {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.8;
  background:
    radial-gradient(38% 44% at 24% 28%, rgba(20, 225, 193, 0.55) 0%, rgba(20, 225, 193, 0) 70%),
    radial-gradient(34% 40% at 78% 22%, rgba(76, 229, 199, 0.42) 0%, rgba(76, 229, 199, 0) 72%),
    radial-gradient(46% 50% at 58% 82%, rgba(16, 198, 169, 0.38) 0%, rgba(16, 198, 169, 0) 74%);
  animation: aurora-drift 18s var(--ease-in-out) infinite alternate;
}
.opt--plan:nth-child(2) .opt__aurora { animation-delay: -7s; }

/* Rim on ::before — ::after is spoken for by the "You clicked this" badge. */
.opt--plan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: conic-gradient(from 0deg at 50% 50%,
              rgba(20, 225, 193, 0) 0deg,
              rgba(20, 225, 193, 0.75) 70deg,
              rgba(255, 255, 255, 0.85) 150deg,
              rgba(76, 229, 199, 0.55) 240deg,
              rgba(20, 225, 193, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.45;
  transition: opacity 400ms var(--ease-house);
}
.opt--plan:hover::before,
.opt--plan[data-chosen]::before { opacity: 1; }
.opt__eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow-sm);
  text-transform: uppercase;
  color: var(--accent);
}
.opt__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tighter);
  color: #fff;
}
.opt__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tighter);
  color: var(--accent);
}
.opt__price small {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow-sm);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.opt__note {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.62);
}
/* Chosen: the rim and border carry it — a tint would fight the weather. */
.opt--plan[data-chosen] { background-color: transparent; border-color: var(--accent); }

/* Arrived here from a specific plan button on the home page. */
.opt--plan[data-suggested]::after {
  content: "You clicked this";
  position: absolute;
  z-index: 4;
  top: 0.875rem;
  right: 1rem;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow-sm);
  text-transform: uppercase;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Lead form
   -------------------------------------------------------------------------- */
.lead { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow-sm);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.field input {
  width: 100%;
  padding: 0.875rem 1rem;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color var(--dur-300) var(--ease-house),
              background-color var(--dur-300) var(--ease-house);
}
.field input::placeholder { color: rgba(255, 255, 255, 0.28); }
.field input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(20, 225, 193, 0.07);
}
.field[data-invalid] input { border-color: #FF7A6B; }
.field__error {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-eyebrow-sm);
  text-transform: uppercase;
  color: #FF9C90;
  min-height: 0;
}
.field[data-invalid] .field__error { min-height: 1em; }

.lead .btn { margin-top: 0.5rem; }
.lead__note {
  min-height: 1.2em;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
}
.lead__note[data-tone="error"] { color: #FF9C90; }

/* Submitting: the button says so and stops accepting a second press. */
[data-submit][data-busy] { opacity: 0.7; pointer-events: none; }

/* --------------------------------------------------------------------------
   Calendar step

   Calendly's booking page is light and, on the free tier, cannot be recoloured
   from the embed URL. Rather than fight it, it gets a light panel to sit in —
   which reads as a deliberate inset rather than a foreign widget dropped on a
   dark card.
   -------------------------------------------------------------------------- */
.book__frame {
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* --- Booking mode ---------------------------------------------------------
   On this one step the funnel's chrome gets out of the way: no dark aperture,
   no weather, no progress rail, and no heading of ours — the Calendly page
   inside carries its own title, and two competing headings stacked on top of
   each other read as a mistake. What is left is the calendar on the page's
   own background.
   -------------------------------------------------------------------------- */
body[data-step-mode="book"] .start-intro { display: none; }
/* The calendar is taller than the viewport; centring it would bury the month
   grid below the fold. */
body[data-step-mode="book"] .start-main { align-items: flex-start; }

body[data-step-mode="book"] .quiz__card {
  background: none;
  border-color: transparent;
  box-shadow: none;
}
body[data-step-mode="book"] .quiz__card::after,
body[data-step-mode="book"] .quiz__sky,
body[data-step-mode="book"] .quiz__aurora,
body[data-step-mode="book"] .quiz__glare,
body[data-step-mode="book"] .quiz__bar,
body[data-step-mode="book"] .quiz__count { display: none; }

body[data-step-mode="book"] .quiz__content { padding: 0; }

/* The booking step keeps its own heading — it is the only text on the screen
   once the card chrome is gone, and it sits on the light page, so it takes
   the page's ink rather than the card's white. */
.quiz__step--book {
  gap: 0.5rem;
  align-items: center;
  text-align: center;
}
.quiz__step--book .quiz__q {
  color: var(--text-strong);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  max-width: 18ch;
}
.quiz__step--book .quiz__hint {
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.quiz__step--book .book__frame { width: 100%; }
/* Calendly's inline widget needs a real height on its container — it does not
   size itself from content. Mobile needs more: the month grid and the time
   list stack there instead of sitting side by side. */
/* Tall enough for Calendly's single-column layout — month grid, timezone
   picker and its footer — so the calendar never scrolls inside its own box.
   It stays single-column until the frame is far wider than this funnel wants
   to be, so there is no two-column case to shorten for. */
.book__mount { min-width: 320px; height: 1040px; }

.book__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow-sm);
  text-transform: uppercase;
  color: var(--text-subtle);
  pointer-events: none;
}
.book__fallback {
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.book__fallback a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Done
   -------------------------------------------------------------------------- */
.quiz__step--done { align-items: flex-start; }
.done__mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--grad-button);
  color: var(--bg-dark);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  box-shadow: 0 0 26px -4px rgba(20, 225, 193, 0.7);
}
.quiz__step--done .btn { margin-top: 0.75rem; }

/* --------------------------------------------------------------------------
   Up
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .start-head { padding: 2rem 2.5rem; }
  .start-main { padding: 2rem 2.5rem 5rem; }
  .quiz__content { padding: 2rem; }
  .quiz__options--pair { grid-template-columns: 1fr 1fr; }
  .quiz__options--plans { grid-template-columns: 1fr 1fr; }
  .lead { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
  .lead .btn, .lead__note { grid-column: 1 / -1; }
}

/* The calendar wants room the three questions do not. Widening only this step
   would jump the card mid-flow, so the shell widens for the whole funnel from
   the breakpoint where Calendly's two-column layout kicks in. */
@media (min-width: 900px) {
  .start-shell { max-width: 760px; }
}

@media (hover: none), (pointer: coarse) {
  .quiz__glare { display: none; }          /* nothing to track */
}

@media (prefers-reduced-motion: reduce) {
  .quiz__step { transition-duration: 0.01ms; }
  .quiz__fill { transition-duration: 0.01ms; }
  .quiz__sky span,
  .quiz__aurora,
  .opt__sky i,
  .opt__aurora { animation: none; }
  .opt:hover { transform: none; }
}