/* =============================================================
   SKYWAY — /annuity-quiz/ landing page
   -------------------------------------------------------------
   This file adds ONLY what is specific to the quiz landing page.
   Everything else (tokens, type scale, buttons, cards, header,
   hero, FAQ, footer, section rhythm) comes from the site's own
   assets/tokens.css, assets/components.css and assets/site.css,
   which are linked ahead of this file in index.html.

   No new colors, no new fonts, no new radii, no new shadows.
   ============================================================= */


/* -------------------------------------------------------------
   1. HEADER (Step 5B) — a compact, in-flow bar rather than the old
   floating pill. Two jobs only: the Skyway lockup as the conventional
   home link, and one explicit "Learn About Skyway" path for a prospect
   who wants to read about the company first. It is deliberately NOT
   sticky: on a 320-430px phone a pinned bar costs viewport on every
   screen of the funnel and can sit over the quiz, the contact fields or
   the consent block. Static costs nothing and can never overlap.
   ------------------------------------------------------------- */
.aq-topbar {
  position: relative;
  z-index: 10;
  background: var(--sky-cream);
  border-bottom: 1px solid rgba(14, 33, 72, 0.08);
}
.aq-topbar-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 10px var(--gutter-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
}
.aq-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 6px;
  margin-left: -6px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--sky-navy-900);
}
.aq-brand:focus-visible { outline: 3px solid rgba(16, 144, 168, 0.30); outline-offset: 2px; }
.aq-brand-mark {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.aq-brand-word {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  padding-top: 2px;
  color: var(--sky-navy-900);
}
/* Secondary by construction: body-muted colour, no fill, no pill, so it
   never reads as a second call to action next to the funnel CTA. */
.aq-learn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 4px 2px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.aq-learn:hover { color: var(--sky-navy-800); }
.aq-learn:focus-visible { outline: 3px solid rgba(16, 144, 168, 0.30); outline-offset: 3px; border-radius: var(--r-xs); }
@media (max-width: 900px) {
  .aq-topbar-inner { padding: 8px var(--gutter-tablet); min-height: 56px; }
}
@media (max-width: 600px) {
  .aq-topbar-inner { padding: 8px var(--gutter-mobile); gap: 12px; min-height: 54px; }
  .aq-learn { font-size: 14px; }
}
/* Below ~360px the bar has under 290px of track, so the wordmark stands
   down and the bridge mark carries the brand — the same behaviour the main
   site uses at its narrowest width. The link is never hidden. */
@media (max-width: 360px) {
  .aq-brand-word { display: none; }
  .aq-learn { font-size: 13.5px; }
}


/* -------------------------------------------------------------
   2. HERO
   Same .sky-hero treatment as the site (navy, grid backdrop,
   gold glow, 36px bottom radius, signature wave). Only the
   vertical rhythm is tightened so the CTA lands inside the first
   phone screen.
   ------------------------------------------------------------- */
.aq-hero .inner { padding: 64px 0 56px; }
.aq-hero h1 { max-width: 20ch; margin-bottom: 24px; }
/* The verified carrier count in the hero lede: same size as the surrounding
   sentence, lifted by weight, colour and a hairline so it reads as the
   differentiator without adding a block or breaking the line rhythm. */
.aq-hero .aq-lede-figure {
  font-weight: 600;
  color: var(--sky-cream);
  white-space: nowrap;
  border-bottom: 2px solid var(--sky-gold-500);
  padding-bottom: 1px;
}

.aq-hero .lede { max-width: 50ch; margin-bottom: 32px; }

@media (max-width: 900px) {
  .aq-hero .inner { padding: 52px 0 48px; }
}
@media (max-width: 600px) {
  .aq-hero .inner { padding: 40px 0 40px; }
  .aq-hero h1 { font-size: 2.25rem; max-width: 17ch; line-height: 1.06; margin-bottom: 18px; }
  .aq-hero .lede { font-size: 17px; margin-bottom: 26px; }
}

/* Credibility, one line, directly under the CTA (Step 5B). Small, quiet,
   no card, no logos — it qualifies the CTA rather than competing with it. */
.aq-hero-trust {
  margin: 16px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--sky-gold-300);
}

/* Reassurance row under the CTA. Never competes with the button. */
.aq-reassure {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}
.aq-reassure li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(247, 245, 240, 0.78);
}
.aq-reassure .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: var(--r-pill);
  background: rgba(16, 144, 168, 0.18);
  color: var(--sky-teal-300);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  /* One per line, centred as a block: three short rows read faster
     than an uneven 2 + 1 wrap. */
  .aq-reassure {
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    margin: 22px auto 0;
    gap: 14px;
  }
  .aq-reassure li { font-size: 16px; line-height: 1.45; }
}


/* -------------------------------------------------------------
   3. PRIMARY CTA — micro-interaction layer on top of .sk-btn
   Lift, soft shadow bloom, a slow low-contrast sheen, and an
   immediate press response. Nothing loops, nothing pulses,
   nothing delays the tap.
   ------------------------------------------------------------- */
.aq-cta {
  position: relative;
  overflow: hidden;
  min-height: 56px;
  padding: 17px 32px;
  font-size: 17px;
  font-weight: 500;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.aq-cta svg { transition: transform var(--dur-base) var(--ease-out); }

/* sheen */
.aq-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.42) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.aq-cta:hover::after { transform: translateX(120%); }

.aq-cta:hover { transform: translateY(-2px); }
.aq-cta:hover svg { transform: translateX(3px); }
.aq-cta:active { transform: translateY(0) scale(0.985); transition-duration: var(--dur-fast); }

.aq-cta:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus), 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* On navy the hero CTA is cream; the sheen has to darken, not lighten. */
.aq-hero .actions .aq-cta::after {
  background: linear-gradient(105deg, transparent 35%, rgba(14, 33, 72, 0.10) 50%, transparent 65%);
}
.aq-hero .actions .aq-cta:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}
.aq-banner .aq-cta {
  background: var(--sky-cream);
  color: var(--sky-navy-900);
  border-color: var(--sky-cream);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.aq-banner .aq-cta::after {
  background: linear-gradient(105deg, transparent 35%, rgba(14, 33, 72, 0.10) 50%, transparent 65%);
}
.aq-banner .aq-cta:hover {
  background: var(--sky-white);
  color: var(--sky-navy-900);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30);
}

@media (max-width: 600px) {
  .aq-cta { width: 100%; justify-content: center; font-size: 17px; padding: 18px 24px; }
}


/* -------------------------------------------------------------
   4. THE QUIZ
   Five questions, one screen at a time. While it is running the
   landing-page sections are hidden (see `body.aq-quiz-active`)
   so the screen has exactly one job.
   ------------------------------------------------------------- */
.aq-quiz { background: var(--bg); padding-top: var(--space-16); padding-bottom: var(--space-16); }
.aq-quiz-panel {
  max-width: 660px;
  margin: 0 auto;
  background: var(--sky-white);
  border: 1px solid rgba(14, 33, 72, 0.05);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: 40px;
}

/* While the quiz is running the rest of the page steps aside.
   The header and footer stay: brand continuity and compliance. */
body.aq-quiz-active .sky-hero,
body.aq-quiz-active .aq-reasons,
body.aq-quiz-active .sky-trust,
body.aq-quiz-active .aq-banner,
body.aq-quiz-active .sky-faq { display: none; }
/* Step 5B: the header is a static in-flow bar, so the quiz simply
   follows it — no fixed-header offset to reserve, and nothing can be
   overlapped on a small screen. */
body.aq-quiz-active .aq-quiz { padding-top: 40px; }

@media (max-width: 600px) {
  body.aq-quiz-active .aq-quiz { padding-top: 28px; }
}

/* ---- progress ---- */
.aq-progress { margin-bottom: 28px; }
.aq-progress-label {
  font-size: 13px;              /* a touch above the site's 12px eyebrow:
                                   this label is wayfinding, not decoration */
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sky-teal-700);
  margin: 0 0 10px;
}
.aq-progress-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--sky-navy-50);
  overflow: hidden;
}
.aq-progress-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--sky-teal-500);
  transition: width var(--dur-slow) var(--ease-out);
}

/* ---- one question at a time ---- */
.aq-view { will-change: opacity, transform; }
.aq-js .aq-view.is-entering-fwd { animation: aqInFwd 260ms var(--ease-out) both; }
.aq-js .aq-view.is-entering-back { animation: aqInBack 260ms var(--ease-out) both; }
.aq-js .aq-view.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); }
@keyframes aqInFwd  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes aqInBack { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

.aq-question {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--sky-navy-900);
  margin: 0 0 24px;
  max-width: 24ch;
}
.aq-question:focus { outline: none; }
.aq-question:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); }

.aq-answers { display: grid; gap: 12px; }

/* ---- answer buttons ---- */
.aq-answer {
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  gap: 16px;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-align: left;
  color: var(--sky-navy-900);
  background: var(--sky-white);
  border: 1.5px solid var(--sky-navy-200);
  border-radius: var(--r-md);
  padding: 18px 22px;
  min-height: 64px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
/* Hover only where a real pointer exists. On touch, a tapped button
   keeps :hover afterwards, which would leave an unselected answer
   looking chosen. */
@media (hover: hover) and (pointer: fine) {
  .aq-answer:hover {
    border-color: var(--sky-navy-500);
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
  }
}
.aq-answer:active { transform: translateY(0) scale(0.995); transition-duration: var(--dur-fast); }
.aq-answer:focus-visible { outline: none; border-color: var(--sky-navy-800); box-shadow: var(--shadow-focus); }

/* The tick is the non-colour half of the selected state, so the
   answer still reads as chosen without relying on colour. */
.aq-answer .aq-check {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: var(--r-pill);
  background: var(--sky-navy-800);
  color: var(--sky-cream);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.aq-answer[aria-pressed="true"] {
  border-color: var(--sky-navy-800);
  border-width: 2px;
  padding: 17.5px 21.5px;      /* keeps the box the same size as the 1.5px border */
  background: var(--sky-navy-50);
  box-shadow: var(--shadow-2);
}
.aq-answer[aria-pressed="true"] .aq-check { opacity: 1; transform: scale(1); }

/* ---- back control ---- */
.aq-quiz-nav { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.aq-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px 10px 12px;
  margin-left: -12px;
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--fg-subtle);
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.aq-back:hover { background: rgba(14, 33, 72, 0.05); color: var(--sky-navy-900); }
.aq-back:focus-visible { outline: none; box-shadow: var(--shadow-focus); color: var(--sky-navy-900); }
.aq-back svg { transition: transform var(--dur-base) var(--ease-out); }
.aq-back:hover svg { transform: translateX(-2px); }

.aq-done-mark {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  background: var(--sky-teal-100);
  color: var(--sky-teal-700);
  margin-bottom: 22px;
}

@media (max-width: 600px) {
  .aq-quiz-panel { padding: 26px 20px; border-radius: var(--r-lg); }
  .aq-answer { font-size: 16.5px; padding: 17px 18px; gap: 12px; }
  .aq-answer[aria-pressed="true"] { padding: 16.5px 17.5px; }
  .aq-question { margin-bottom: 20px; }
}


/* -------------------------------------------------------------
   4b. CONTACT SCREEN + STEP-4 PLACEHOLDER
   Same panel, same width, same rhythm as a quiz question. It is
   meant to read as the last screen of the quiz, not as a form
   that turned up afterwards.
   ------------------------------------------------------------- */
.aq-contact-head { margin-bottom: 28px; }
.aq-contact-head h2,
.aq-value h2 {
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--sky-navy-900);
  margin: 0 0 12px;
  max-width: 20ch;
}
.aq-contact-head p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  max-width: 44ch;
  margin: 0;
}

.aq-required-note {
  font-size: 16px;
  color: var(--fg-subtle);
  margin: 10px 0 0;
}

.aq-form { display: grid; gap: 18px; }
.aq-name-row { display: grid; gap: 20px; }
@media (min-width: 601px) {
  .aq-name-row { grid-template-columns: 1fr 1fr; }
}

.aq-field { display: grid; gap: 8px; }
.aq-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--sky-navy-900);
}
.aq-input {
  font-family: var(--font-sans);
  font-size: 17px;              /* 16px or more, so iOS does not zoom on focus */
  font-weight: 400;
  line-height: 1.4;
  color: var(--sky-navy-900);
  background: var(--sky-white);
  border: 1.5px solid var(--sky-navy-200);
  border-radius: var(--r-md);
  padding: 15px 16px;
  min-height: 56px;
  width: 100%;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.aq-input::placeholder { color: var(--fg-faint); }
.aq-input:hover { border-color: var(--sky-navy-300); }
.aq-input:focus {
  outline: none;
  border-color: var(--sky-navy-800);
  box-shadow: var(--shadow-focus);
}

/* Calm error state: a border, a short line of text, and a glyph so
   it never depends on colour alone. No red fills, no shaking. */
.aq-input[aria-invalid="true"] { border-color: var(--sky-danger); }
.aq-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 58, 46, 0.22); }
.aq-error {
  display: none;
  align-items: flex-start;
  gap: 7px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--sky-danger);
  margin: 0;
}
.aq-error.is-shown { display: flex; }
.aq-error svg { flex-shrink: 0; margin-top: 2px; }

/* Consent (Step 5B presentation pass). The disclosure text itself is
   unchanged, word for word. What changed is its weight on the page: the
   lifted card and full border are gone in favour of a hairline-separated
   group, the checkbox is larger and aligned to the first line, and the
   text runs at a comfortable measure and line height. Less intimidating,
   not less transparent — nothing was shrunk, hidden or collapsed. */
.aq-consent-slot {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 0 0;
  background: transparent;
}
.aq-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.aq-consent-box {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--sky-navy-800);
  cursor: pointer;
}
.aq-consent-label {
  font-size: var(--fs-body-sm);
  line-height: 1.65;
  max-width: 62ch;
  color: var(--fg-muted);
  cursor: pointer;
}
.aq-consent-link {
  color: var(--sky-teal-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aq-consent-link:hover { color: var(--sky-teal-500); }
.aq-consent-slot .aq-error { margin-top: 10px; }

/* ---------------------------------------------------------------------
   FAQ — the shared site stylesheet hides answers with
   `.sky-faq .a:not(.shown) { display: none }`, because the main site's
   FAQ is React-driven and adds `.shown` when a panel opens. This page
   uses native <details>, which never gets that class, so answers stayed
   hidden even when open. Reveal them from the open state instead, and
   mirror the existing `.item.open` toggle treatment on `[open]`.
   Native <details> keeps mouse, touch, keyboard and ARIA behaviour.
   --------------------------------------------------------------------- */
.aq-faq details.item[open] > .a { display: block; }
.aq-faq details.item > summary.q { cursor: pointer; list-style: none; }
.aq-faq details.item > summary.q::-webkit-details-marker { display: none; }
.aq-faq details.item > summary.q::marker { content: ''; }
.aq-faq details.item[open] > summary.q .toggle {
  background: var(--sky-navy-800);
  color: var(--sky-cream);
}
.aq-faq details.item[open] > summary.q .toggle svg { transform: rotate(45deg); }
.aq-faq details.item > summary.q .toggle svg {
  transition: transform var(--dur-base) var(--ease-out);
}

/* ---------------------------------------------------------------------
   Marketplace research section
   --------------------------------------------------------------------- */
.aq-marketplace {
  padding: var(--section-y-mobile) 0;
  background: var(--bg);
}
.aq-market-panel {
  max-width: var(--content-max);
  margin: 0 auto;
  background: var(--sky-white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  padding: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px 48px;
  align-items: start;
}
.aq-market-copy h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  color: var(--sky-navy-900);
  margin: 0 0 14px;
}
.aq-market-copy p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  margin: 0;
  max-width: 46ch;
}
.aq-market-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.aq-market-points li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.aq-market-points .ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--sky-navy-50);
  color: var(--sky-navy-800);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aq-market-points .lbl {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--sky-navy-900);
  margin: 0 0 3px;
}
/* The verified carrier count, sized to scan at a glance without shouting. */
.aq-market-figure {
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  color: var(--sky-navy-900);
  margin-right: 2px;
}
.aq-market-points .det {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  margin: 0;
}
.aq-market-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
}
@media (min-width: 901px) {
  .aq-marketplace { padding: var(--section-y-desktop) 0; }
}
@media (max-width: 1024px) {
  .aq-market-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 28px 24px;
    border-radius: var(--r-lg);
  }
  .aq-market-copy p { max-width: none; }
}

/* ---- report-value block above the contact fields (Step 5B) ----
   The value exchange is stated before any personal field is seen:
   what happens to the answers, what the report may contain, and what
   is NOT being asked for. Compact by design — an eyebrow, a headline,
   one sentence, four short lines and one reassurance. */
.aq-value { margin-bottom: 26px; }
.aq-value-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sky-teal-700);
}
.aq-value-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  margin: 0 0 16px;
  max-width: 46ch;
}
.aq-value-intro {
  font-size: 15px;
  font-weight: 600;
  color: var(--sky-navy-900);
  margin: 0 0 10px;
}
.aq-value-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.aq-value-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-muted);
}
.aq-value-list .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: var(--r-pill);
  background: var(--sky-teal-100);
  color: var(--sky-teal-700);
}
.aq-value-note {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--fg-subtle);
}
/* The form's own heading: smaller than the value headline above it, so
   the screen reads as one flow rather than two competing titles. */
.aq-form-head { margin-bottom: 18px; }
.aq-form-head h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  color: var(--sky-navy-900);
  margin: 0 0 6px;
}
.aq-form-head p {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
}
@media (max-width: 600px) {
  .aq-value { margin-bottom: 22px; }
  .aq-value-lead { font-size: 17px; }
  .aq-form-head h3 { font-size: 19px; }
}

.aq-privacy-note {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-subtle);
  margin: 0;
  max-width: 52ch;
}

.aq-form .aq-cta { justify-content: center; }

/* -------------------------------------------------------------
   Step 7 — submission states

   Honeypot: off-screen rather than display:none, since some
   scripted submitters skip fields that are display:none. Not
   focusable, hidden from assistive technology, and out of the
   normal tab order, so no real visitor ever meets it.
   ------------------------------------------------------------- */
.aq-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* The button while the lead is being recorded. Dimmed and inert,
   but the same size, so nothing on the screen moves. */
.aq-form .aq-cta.is-submitting,
.aq-form .aq-cta:disabled {
  opacity: 0.72;
  cursor: default;
  transform: none;
  box-shadow: var(--shadow-1);
}

.aq-submit-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--sky-danger-bg);
  border: 1px solid rgba(180, 58, 46, 0.28);
  color: var(--sky-danger);
  font-size: 16px;
  line-height: 1.5;
  max-width: 52ch;
}

.aq-submit-error[hidden] { display: none; }

.aq-submit-error svg {
  flex: none;
  margin-top: 2px;
}


@media (max-width: 600px) {
  .aq-form { gap: 18px; }
  .aq-name-row { gap: 18px; }
  .aq-form .aq-cta { width: 100%; }
}


/* -------------------------------------------------------------
   4c. RESULT SCREEN (step 4)
   Same panel, same width, same card language as the quiz. It is
   another state in the funnel, not a report.
   ------------------------------------------------------------- */
.aq-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  /* teal-700 on teal-100 measured 4.09:1 — under AA for 13px text.
     Navy text keeps the pale teal surface and the teal dot. */
  color: var(--sky-navy-800);
  background: var(--sky-teal-100);
  border-radius: var(--r-pill);
  padding: 7px 15px 7px 12px;
  margin: 0 0 18px;
}
.aq-result-badge .dot {
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--sky-teal-500);
  flex-shrink: 0;
}

.aq-result h2 {
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--sky-navy-900);
  margin: 0 0 18px;
  max-width: 22ch;
}
.aq-result h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--sky-teal-700);
  letter-spacing: -0.005em;
}
.aq-result-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  margin: 0 0 var(--space-8);
}

/* Small section headings inside the result. */
.aq-result h3 {
  font-size: 12px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sky-teal-700);
  margin: 0 0 14px;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.aq-result-body p {
  font-size: 17px;
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  margin: 0 0 14px;
}
.aq-result-body p:last-child { margin-bottom: 0; }

.aq-result-review {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.aq-result-review li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 17px;
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
.aq-result-review .ico {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--sky-navy-50);
  color: var(--sky-navy-800);
  margin-top: 2px;
}

/* Readable, not fine print. */
.aq-result-disclaimer {
  margin: var(--space-8) 0 0;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--bg-lifted);
  border: 1px solid var(--border);
  font-size: 16px;
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

/* ---- next steps: guide (primary) and conversation (secondary) ---- */
.aq-next {
  display: grid;
  gap: 16px;
  margin-top: var(--space-8);
}
@media (min-width: 601px) {
  .aq-next { grid-template-columns: 1fr 1fr; align-items: start; }
}
.aq-next-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--sky-white);
  border: 1px solid rgba(14, 33, 72, 0.06);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  box-shadow: var(--shadow-1);
}
.aq-next-card .icon-wrap {
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  background: var(--sky-navy-50);
  color: var(--sky-navy-800);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.aq-next-card .eyebrow-sm {
  font-size: 11px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sky-teal-700);
  margin: 0;
}
.aq-next-card h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--sky-navy-900);
  margin: 0;
}
.aq-next-card p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0 0 6px;
}
.aq-next-card .sk-btn {
  margin-top: auto;
  justify-content: center;
  min-height: 48px;
  /* Same 17px as every other button in the funnel. Legibility for a
     55+ audience beats forcing a label onto one line — a clean wrap
     is fine. */
  font-size: 17px;
  padding: 14px 16px;
  line-height: 1.25;
  text-align: center;
}

/* The personalized report is the primary next step, so it gets the
   lifted card and the teal accent. It carries a status line rather than
   a button — there is nothing to press — so the visual weight comes from
   the surface, not from a call to action. Scheduling stays available
   without dominating. */
.aq-next-card.is-report {
  background: var(--bg-lifted);
  border-color: rgba(14, 33, 72, 0.10);
  box-shadow: var(--shadow-2);
}
.aq-next-card.is-report .icon-wrap { background: var(--sky-teal-100); color: var(--sky-teal-700); }

/* Step 5 — the confirmation screen carries one optional scheduling card
   instead of the old report/scheduling pair. Kept narrow on desktop so
   the confirmation, not the CTA, owns the screen. */
@media (min-width: 601px) {
  .aq-next.is-single { grid-template-columns: minmax(0, 520px); }
}
.aq-next-card .aq-schedule-detail {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* Status, not a control: no pointer, no hover, not focusable. It sits
   where the other card's button sits so the two cards stay balanced. */
.aq-report-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 13px 16px;
  min-height: 48px;
  border-radius: var(--r-md);   /* not a pill: a pill reads as a button,
                                   and this is a status, not a control */
  background: var(--sky-teal-100);
  border: 1px solid var(--sky-teal-300);
  color: var(--sky-navy-800);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.aq-report-status .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sky-teal-700);
  flex-shrink: 0;
}


.aq-result-foot {
  margin: var(--space-6) 0 0;
  font-size: 16px;
  line-height: var(--lh-relaxed);
  color: var(--fg-subtle);
}

/* Restrained stagger: badge, then copy, then the next-step cards. */
.aq-js .aq-result .aq-stagger { animation: aqRise 380ms var(--ease-out) both; }
.aq-js .aq-result .aq-stagger-2 { animation-delay: 70ms; }
.aq-js .aq-result .aq-stagger-3 { animation-delay: 140ms; }
@keyframes aqRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .aq-js .aq-result .aq-stagger { animation: none; }
}

@media (max-width: 600px) {
  .aq-result-lead { font-size: 17px; }
  .aq-result-body p,
  .aq-result-review li { font-size: 16.5px; }
  .aq-next-card { padding: 22px 18px; }
}


/* -------------------------------------------------------------
   5. THREE REASONS — same card treatment as .sky-services .card
   ------------------------------------------------------------- */
.aq-reasons { background: var(--bg); }
.aq-reasons .section-head { margin-bottom: var(--space-10); }
.aq-reasons .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.aq-reasons .card {
  background: var(--sky-white);
  border-radius: 18px;
  padding: 32px 28px 28px;
  box-shadow: 0 1px 2px rgba(14, 33, 72, 0.04), 0 1px 1px rgba(14, 33, 72, 0.03);
  border: 1px solid rgba(14, 33, 72, 0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.aq-reasons .card:hover {
  box-shadow: 0 12px 32px rgba(14, 33, 72, 0.08), 0 4px 8px rgba(14, 33, 72, 0.04);
  transform: translateY(-2px);
}
.aq-reasons .card .icon-wrap {
  width: 48px; height: 48px;
  border-radius: var(--r-pill);
  background: var(--sky-navy-50);
  color: var(--sky-navy-800);
  display: flex; align-items: center; justify-content: center;
}
.aq-reasons .card h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--sky-navy-900);
  letter-spacing: -0.012em;
  line-height: 1.25;
}
.aq-reasons .card p { font-size: 17px; line-height: 1.6; color: var(--fg-muted); margin: 0; }

@media (max-width: 900px) { .aq-reasons .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 600px) { .aq-reasons .grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  /* Even the stack: the third card carries the longest copy, so tighten
     leading and gaps rather than forcing equal heights (which would leave
     dead space in the shorter two). */
  .aq-reasons .card { padding: 22px 20px; gap: 10px; }
  .aq-reasons .card .icon-wrap { width: 44px; height: 44px; }
  .aq-reasons .card h3 { font-size: 19px; }
  .aq-reasons .card p { font-size: 16.5px; line-height: 1.55; }
  .aq-reasons .grid { gap: 14px; }
}


/* -------------------------------------------------------------
   6. TRUST
   ------------------------------------------------------------- */
/* Portrait beside the copy on desktop, stacked and centred on mobile.
   One photo, medium, in the site's own card treatment. */
.aq-trust .aq-trust-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 640px);
  justify-content: start;      /* left edges line up with the cards below */
  gap: 48px;
  align-items: center;
  margin: 0 0 var(--space-10);
}
.aq-trust .aq-portrait { margin: 0; }
.aq-trust .aq-portrait-img {
  width: 100%;
  height: auto;                /* beats the img height attribute, so the
                                  aspect-ratio below governs the crop */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--r-lg);
  border: 1px solid rgba(14, 33, 72, 0.05);
  box-shadow: var(--shadow-2);
}
.aq-trust .aq-portrait figcaption {
  margin-top: 14px;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--fg-subtle);
  letter-spacing: -0.005em;
}

.aq-trust .aq-trust-head { max-width: 720px; text-align: left; }
.aq-trust .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--sky-teal-700); margin: 0 0 18px;
}
.aq-trust .eyebrow::before {
  content: ''; width: 22px; height: 2px;
  background: var(--sky-gold-500); display: inline-block;
}
.aq-trust h2 {
  font-size: clamp(2rem, 3.6vw, 2.875rem);
  letter-spacing: -0.022em;
  font-weight: 500;
  line-height: 1.1;
  color: var(--sky-navy-900);
  margin-bottom: 22px;
}
.aq-trust .aq-trust-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: var(--sky-navy-900);
  text-align: left;
  max-width: 46ch;
  margin: 0 auto 22px;
  padding-left: 20px;
  border-left: 2px solid var(--sky-gold-500);
}
/* Founder credential line — sits between the serif quote and the closing
   statement, one step quieter than both. */
.aq-trust .aq-trust-credential {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  margin: 0 0 18px;
  max-width: 46ch;
}
.aq-trust .aq-trust-body {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  max-width: 56ch;
  margin: 0 auto;
}
@media (max-width: 900px) {
  /* Stacked: a modest centred portrait above the copy, and the copy
     keeps the centred treatment it already had on small screens. */
  .aq-trust .aq-trust-layout {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 28px;
    max-width: 640px;
  }
  /* the caption gets the full width, so it never wraps under a
     narrow image */
  .aq-trust .aq-portrait { width: auto; text-align: center; }
  .aq-trust .aq-portrait-img { width: 200px; margin: 0 auto; }
  .aq-trust .aq-trust-head { text-align: center; }
  .aq-trust .aq-trust-quote { margin-left: 0; margin-right: auto; }
  .aq-trust .aq-trust-credential { margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) {
  /* Tighter pacing only — no content removed and no type shrunk below the
     sizes already approved for this breakpoint. Measured ~1394px before. */
  .aq-trust .aq-portrait-img { width: 176px; }
  .aq-trust .aq-trust-quote { font-size: 19px; margin-bottom: 16px; }
  .aq-trust .aq-trust-credential { font-size: 15.5px; margin-bottom: 14px; }
  .aq-trust .aq-trust-body { font-size: 17px; }
}


/* -------------------------------------------------------------
   7. REPEAT CTA BANNER
   ------------------------------------------------------------- */
.aq-banner { background: var(--bg); position: relative; }
.aq-banner-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--sky-navy-800);
  color: var(--sky-cream);
  border-radius: var(--r-2xl);
  padding: 64px 48px;
  text-align: center;
}
.aq-banner-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(224, 177, 67, 0.18), transparent 60%),
    radial-gradient(ellipse at 12% 0%, rgba(16, 144, 168, 0.12), transparent 55%);
  pointer-events: none;
}
.aq-banner-panel .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--sky-teal-300); margin: 0 0 16px;
}
.aq-banner-panel h2 {
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--sky-cream);
  margin: 0 0 14px;
}
.aq-banner-panel p {
  font-size: var(--fs-body-lg);
  color: rgba(247, 245, 240, 0.74);
  max-width: 46ch;
  margin: 0 auto 30px;
}

@media (max-width: 600px) {
  .aq-banner-panel { padding: 44px 24px; border-radius: var(--r-xl); }
  .aq-banner-panel p { font-size: 17px; margin-bottom: 26px; }
}


/* -------------------------------------------------------------
   8. FAQ — the site's .sky-faq look, driven by <details>/<summary>
   so it works with the keyboard and without JavaScript.
   ------------------------------------------------------------- */
.aq-faq { background: var(--bg-lifted); }
.aq-faq .section-head { margin-bottom: var(--space-8); }
.aq-faq .q { list-style: none; min-height: 44px; }
.aq-faq .q::-webkit-details-marker { display: none; }
.aq-faq .q::marker { content: ''; }
.aq-faq .item[open] .q .toggle { background: var(--sky-navy-800); color: var(--sky-cream); }
.aq-faq .q .toggle svg { transition: transform var(--dur-base) var(--ease-out); }
.aq-faq .item[open] .q .toggle svg { transform: rotate(180deg); }
.aq-faq .q:focus-visible { outline: none; border-radius: var(--r-sm); box-shadow: var(--shadow-focus); }
/* the site hides .a until a JS class is added; here <details> owns that */
.aq-faq .a { display: block; }
.aq-faq .a p { font-size: 17px; line-height: 1.65; color: var(--fg-muted); margin: 0; }
@media (max-width: 600px) {
  .aq-faq .q { padding: 22px 4px; }
  .aq-faq .a { padding-bottom: 24px; }
}


/* -------------------------------------------------------------
   9. FOOTER — one brand column, then the site's compliance block
   ------------------------------------------------------------- */
.aq-footer .top {
  grid-template-columns: 1fr;
  padding: 64px 0 40px;
}
.aq-footer .brand-col p { max-width: 46ch; font-size: 15px; }

/* The site's footer legal runs at 13px. This page is aimed at a 55+
   audience arriving from an ad, so the disclosures are set larger. */
.aq-footer .compliance,
.aq-footer .compliance p { font-size: 14.5px; line-height: 1.75; }
.aq-footer .bottom { font-size: 13.5px; }
.aq-footer .compliance .badge { font-size: 12px; }

/* 44px minimum touch targets on the small links this page still needs. */
.aq-footer .brand-col .meta a,
.aq-footer .bottom .legal-links a {
  display: inline-block;
  padding: 12px 0;
}
.aq-footer .brand-col .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }

.aq-trust .trust-grid li { padding: 18px 20px; }

@media (max-width: 600px) {
  .aq-footer .top { padding: 48px 0 28px; }
  .aq-footer .bottom .legal-links { gap: 0 22px; }
}


/* -------------------------------------------------------------
   10. ENTRANCE REVEALS
   Applied only when JavaScript is running, so nothing is ever
   hidden from a visitor whose JS fails.
   ------------------------------------------------------------- */
.aq-js .aq-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.aq-js .aq-reveal.is-in { opacity: 1; transform: none; }


/* -------------------------------------------------------------
   11. REDUCED MOTION — honour the system setting everywhere
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aq-js .aq-reveal { opacity: 1; transform: none; transition: none; }
  .aq-cta,
  .aq-cta svg,
  .aq-cta::after,
  .aq-answer,
  .aq-reasons .card,
  .aq-faq .q .toggle svg { transition: none !important; }
  .aq-cta:hover,
  .aq-cta:active,
  .aq-answer:hover:not([disabled]),
  .aq-reasons .card:hover { transform: none; }
  .aq-cta:hover::after { transform: translateX(-120%); }
  html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------
   12. NO-JAVASCRIPT NOTICE
   The landing page reads fine without JS; the quiz cannot run,
   so say so and give a way through.
   ------------------------------------------------------------- */
.aq-noscript {
  max-width: 44ch;
  margin: 20px auto 0;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: rgba(247, 245, 240, 0.10);
  border: 1px solid rgba(247, 245, 240, 0.22);
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(247, 245, 240, 0.86);
}
.aq-noscript a { color: var(--sky-teal-300); text-decoration: underline; }


/* -------------------------------------------------------------
   13. VISUALLY HIDDEN
   For headings that keep the document outline sound without
   adding anything to the visual design.
   ------------------------------------------------------------- */
.aq-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- mobile "Call Us" pill (hero-anchored) ---------- */
/* Geometry, type and interaction mirror the main site's header chip
   (.sky-nav .quiz-cta); colour/emphasis mirrors .menu-btn — white fill, faint
   navy hairline. It sits in the hero's existing .actions flex row (12px gap,
   centred, wrapping), so it scrolls away with the hero. It is deliberately NOT
   fixed or sticky: a viewport-fixed pill crossed the lower banner's eyebrow
   and CTA at several device heights. The cream primary beside it stays
   dominant through size and elevation. Mobile only; also suppressed by the
   existing body.aq-quiz-active class as a second layer of protection. */
.aq-call-cta { display: none; }

@media (max-width: 1080px) {
  .aq-hero .actions .aq-call-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 11px 16px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--sky-navy-900);
    text-decoration: none;
    background: var(--sky-white);
    border: 1px solid rgba(14, 33, 72, 0.12);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-2);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .aq-hero .actions .aq-call-cta:hover,
  .aq-hero .actions .aq-call-cta:active {
    background: var(--sky-navy-50);
    border-color: var(--sky-navy-200);
  }
  /* The quiz owns the screen once it starts. The hero is hidden then, so
     the pill is already gone; this keeps the explicit guard effective by
     matching the specificity of the rule above. */
  body.aq-quiz-active .aq-hero .actions .aq-call-cta,
  body.aq-quiz-active .aq-call-cta { display: none; }
}

@media (max-width: 380px) {
  .aq-hero .actions .aq-call-cta { padding: 11px 13px; font-size: 14px; }
}