/* ============================================================================
 * EVO brand skin — agency-quiz funnel ONLY.
 *
 * Loaded via funnel.json `brandCss` (app/f/[funnel]/layout.tsx). Other
 * funnels never load this file. Everything here is presentation only:
 * copy, flow, tracking and component logic are untouched.
 *
 * Sources: EVO Brand Guide 2026 (colors/typography), the evomarketing.co
 * landing page (localhost:3100) for calibration, and ui-ux-pro-max guidance
 * (contrast >= 4.5:1 body text, 44px touch targets, visible focus, loading
 *  feedback, linear spinner easing, hover transitions 150-300ms,
 *  reduced-motion support).
 *
 * Selector strategy: theme CSS variables first; component rules use
 * [class*=""] substring selectors so they survive CSS-module hash changes.
 * ========================================================================== */

.fun-page {
  /* -- EVO palette ------------------------------------------------------- */
  --evo-orange: #e16100;        /* pop */
  --evo-orange-bright: #f26e07; /* hover pop */
  --evo-black: #000000;
  --evo-deep-gray: #212121;
  --evo-moon-gray: #e3e3db;
  --evo-light-gray: #efefe8;
  --evo-hunter: #414f47;
  --evo-hunter-light: #7e8782;
  --evo-hunter-deep: #2f3330;
  /* dark-UI derived tokens (surfaces sit between black and deep gray) */
  --evo-surface: #151514;
  --evo-surface-raised: #1d1d1b;
  --evo-border: #2c2c28;
  --evo-muted: #a6ab9f;         /* 7.5:1 on --evo-surface */
  --evo-error: #f87171;         /* 7.6:1 on black */

  /* -- engine theme variable overrides ----------------------------------- */
  --fun-button-bg: var(--evo-orange);
  --fun-field-bg: var(--evo-orange); /* focus/selection accent */
  --fun-font-color: var(--evo-light-gray);
  --fun-radius: 12px;
  --font-family: 'Red Hat Display';
  --heading-font-family: 'Transducer Condensed';

  color-scheme: dark;
}

.fun-page ::selection {
  background: var(--evo-orange);
  color: #000;
}

/* Subtle brand glow at the top of every page (sibling of the landing hero). */
.fun-page .fun-main {
  background:
    radial-gradient(
      900px 420px at 50% -160px,
      color-mix(in srgb, var(--evo-orange) 9%, transparent),
      transparent 70%
    );
}

/* ============================ TYPOGRAPHY ==================================
 * Heading (30/40px scale)  -> Transducer Condensed Bold, uppercase
 * Subheading (24px lead)   -> Transducer Medium
 * Body / everything else   -> Red Hat Display (via --font-family above)
 * The wysiwyg spans carry their sizes inline (--fs-m/--fs-t/--fs-d), so we
 * key the display treatment off those stable inline values. */

.fun-page [style*="--fs-m: 30px"],
.fun-page [style*="--fs-m: 40px"] {
  font-family: 'Transducer Condensed', 'Red Hat Display', ui-sans-serif,
    system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  /* replace the Inter-era negative tracking (inline --ls-*) */
  --ls-m: 0.015em !important;
  --ls-t: 0.015em !important;
  --ls-d: 0.015em !important;
  --lh-m: 1.05 !important;
  --lh-t: 1.05 !important;
  --lh-d: 1.05 !important;
}
.fun-page [style*="--fs-m: 30px"] strong,
.fun-page [style*="--fs-m: 40px"] strong {
  font-weight: 700;
}

/* 24px lead paragraphs -> Transducer Medium (Subheading 1) */
.fun-page [style*="--fs-m: 24px"] {
  font-family: 'Transducer', 'Red Hat Display', ui-sans-serif, system-ui,
    sans-serif;
  font-weight: 500;
  --ls-m: 0 !important;
  --ls-t: 0 !important;
  --ls-d: 0 !important;
}
.fun-page [style*="--fs-m: 24px"] strong {
  font-weight: 500;
}

/* Inline accent colors baked into the wysiwyg content -> EVO orange.
 * (#0080FF "Questions?" eyebrow, #2197dd "Add our call to your calendar"
 * links, #C5610B legacy Perspective-orange eyebrows.) The values live in the
 * spans' style attributes, so the remap keys off those stable strings;
 * !important is required to beat the inline declaration.
 * evo orange on black: 5.9:1 — passes WCAG AA for normal text. */
.fun-page [style*="color: #0080FF"],
.fun-page [style*="color: #2197dd"],
.fun-page [style*="color: #C5610B"] {
  color: var(--evo-orange) !important;
}

/* =============================== CTAs =====================================
 * Landing-page sibling: evo-orange pill, Transducer uppercase, tracked.
 * Covers ButtonBlock (basic .button) and form submit (.submitBtn).
 * background-color set directly so the two legacy #C5610B inline-configured
 * buttons follow the brand too. */

.fun-page button[class*="button"],
.fun-page button[class*="submitBtn"] {
  font-family: 'Transducer', 'Red Hat Display', ui-sans-serif, system-ui,
    sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-radius: 9999px;
  background-color: var(--evo-orange);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 28px -10px color-mix(in srgb, var(--evo-orange) 55%, transparent);
  transition:
    background-color 0.18s ease-out,
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out;
}
/* normalize wysiwyg bold inside labels to the Transducer Medium weight */
.fun-page button[class*="button"] strong,
.fun-page button[class*="submitBtn"] strong {
  font-weight: 500;
}
@media (min-width: 640px) {
  .fun-page button[class*="button"]:hover,
  .fun-page button[class*="submitBtn"]:hover {
    background-color: var(--evo-orange-bright);
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 14px 34px -10px color-mix(in srgb, var(--evo-orange) 70%, transparent);
  }
}
.fun-page button[class*="button"]:active,
.fun-page button[class*="submitBtn"]:active {
  background-color: var(--evo-orange);
  transform: scale(0.97);
  transition-duration: 0.1s;
}
.fun-page button[class*="button"]:focus-visible,
.fun-page button[class*="submitBtn"]:focus-visible {
  outline: 2px solid var(--evo-moon-gray);
  outline-offset: 3px;
}

/* ============================ ANSWER CARDS ================================
 * From flat Perspective-orange blocks to EVO dark surfaces: deep-gray card,
 * hunter border, orange only as the interaction accent (brand: orange = pop,
 * not flood). Text inside stays #F5F5F5 (component inline) — 15.7:1. */

.fun-page [role="button"][class*="textAnswer"] {
  background-color: var(--evo-surface);
  border: 1px solid var(--evo-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition:
    background-color 0.18s ease-out,
    border-color 0.18s ease-out,
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out;
}
@media (min-width: 640px) {
  .fun-page [role="button"][class*="textAnswer"]:hover {
    background-color: var(--evo-surface-raised);
    border-color: color-mix(in srgb, var(--evo-orange) 70%, transparent);
    transform: translateY(-2px);
    box-shadow:
      0 10px 24px -12px rgba(0, 0, 0, 0.8),
      0 0 0 1px color-mix(in srgb, var(--evo-orange) 25%, transparent);
  }
}
.fun-page [role="button"][class*="textAnswer"]:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}
.fun-page [role="button"][class*="textAnswerSelected"],
.fun-page [role="button"][class*="textAnswerSelected"]:hover {
  background-color: color-mix(in srgb, var(--evo-orange) 18%, var(--evo-surface));
  border-color: var(--evo-orange);
}
.fun-page [role="button"][class*="textAnswer"]:focus-visible {
  outline: 2px solid var(--evo-moon-gray);
  outline-offset: 2px;
}

.fun-page [role="button"][class*="mediaCard"] {
  background-color: var(--evo-surface);
  border: 1px solid var(--evo-border);
  transition:
    background-color 0.18s ease-out,
    border-color 0.18s ease-out,
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    filter 0.18s ease-out;
}
@media (min-width: 640px) {
  .fun-page [role="button"][class*="mediaCard"]:hover {
    transform: translateY(-3px);
    background-color: var(--evo-surface-raised);
    border-color: color-mix(in srgb, var(--evo-orange) 70%, transparent);
    box-shadow:
      0 14px 30px -14px rgba(0, 0, 0, 0.85),
      0 0 0 1px color-mix(in srgb, var(--evo-orange) 25%, transparent);
  }
}
.fun-page [role="button"][class*="mediaCard"]:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}
.fun-page [role="button"][class*="mediaCardSelected"] {
  filter: none;
  border-color: var(--evo-orange);
  background-color: color-mix(in srgb, var(--evo-orange) 18%, var(--evo-surface));
}
.fun-page [role="button"][class*="mediaCard"]:focus-visible {
  outline: 2px solid var(--evo-moon-gray);
  outline-offset: 2px;
}
/* icon zone: faint orange halo behind the white glyph */
.fun-page [class*="mediaIconArea"] {
  background: radial-gradient(
    70% 70% at 50% 46%,
    color-mix(in srgb, var(--evo-orange) 16%, transparent),
    transparent 72%
  );
}
.fun-page [class*="mediaLabel"] {
  font-weight: 500;
}

/* ============================ FORM FIELDS =================================
 * White Perspective fields -> EVO dark fields. Text --evo-light-gray
 * (~16:1), placeholder --evo-muted (7.5:1), orange focus ring. */

.fun-page [class*="fieldBox"] {
  background: var(--evo-surface);
  border: 1px solid var(--evo-border);
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.fun-page [class*="fieldBox"]:focus-within {
  border-color: var(--evo-orange);
  background: var(--evo-surface-raised);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--evo-orange) 25%, transparent);
}
.fun-page [class*="fieldBox"] input,
.fun-page [class*="fieldBox"] textarea {
  color: var(--evo-light-gray);
  font-weight: 400;
  caret-color: var(--evo-orange);
}
.fun-page [class*="fieldBox"] input::placeholder,
.fun-page [class*="fieldBox"] textarea::placeholder {
  color: var(--evo-muted);
  opacity: 1;
}
.fun-page [class*="phonePlaceholder"] {
  color: var(--evo-muted);
  font-weight: 400;
}
/* emoji field icons -> muted monochrome glyphs (no color-emoji-as-icon) */
.fun-page [class*="fieldIcon"] {
  filter: grayscale(1) brightness(1.15);
  opacity: 0.8;
}
/* error state */
.fun-page [class*="fieldBoxError"] {
  border-color: var(--evo-error);
}
.fun-page [class*="errorMsg"] {
  color: var(--evo-error);
}

/* dropdown chevron + phone flag caret on dark */
.fun-page [class*="chevron"] {
  color: var(--evo-muted);
}
.fun-page [class*="flagBtn"] svg path {
  fill: var(--evo-muted);
}

/* -- country-code panel + dropdown panel (dark) -- */
.fun-page [class*="ccPanel"],
.fun-page [class*="ddPanel"] {
  background: var(--evo-surface-raised);
  border: 1px solid var(--evo-border);
  box-shadow:
    0 16px 40px -12px rgba(0, 0, 0, 0.9),
    0 4px 10px -4px rgba(0, 0, 0, 0.7);
}
.fun-page [class*="ccSearchInput"] {
  color: var(--evo-light-gray);
  border-bottom: 1px solid var(--evo-border);
  font-weight: 400;
}
.fun-page [class*="ccSearchInput"]::placeholder {
  color: var(--evo-muted);
  opacity: 1;
}
.fun-page [class*="ccSearchIcon"] {
  color: var(--evo-muted);
}
.fun-page [class*="ccOption"] {
  color: var(--evo-moon-gray);
}
@media (min-width: 640px) {
  .fun-page [class*="ccOption"]:hover,
  .fun-page [class*="ccOption"]:focus {
    background-color: color-mix(in srgb, var(--evo-orange) 14%, transparent);
  }
}
.fun-page [class*="ccOption"]:focus-visible {
  outline: 2px solid var(--evo-moon-gray);
  outline-offset: -2px;
}
.fun-page [class*="ccDial"] {
  color: var(--evo-muted);
}
.fun-page [class*="ddOption"] {
  background: var(--evo-surface);
  border: 1px solid var(--evo-border);
  color: var(--evo-moon-gray);
}
.fun-page [class*="ddOption"]:hover {
  background-color: var(--evo-surface-raised);
  border-color: color-mix(in srgb, var(--evo-orange) 60%, transparent);
}
.fun-page [class*="ddOptionSelected"] {
  border-color: var(--evo-orange);
  color: var(--evo-light-gray);
  background: color-mix(in srgb, var(--evo-orange) 14%, var(--evo-surface));
}

/* ============================ STRUCTURE ================================= */

/* dividers: hairline in deep hunter gray instead of full-white */
.fun-page [class*="dividerLine"] {
  border-top: 1px solid var(--evo-hunter-deep);
}

/* FAQ accordion: rows become quiet cards; chevron readable on dark */
.fun-page .fracc-itempad {
  background: var(--evo-surface);
  border: 1px solid var(--evo-border);
  border-radius: var(--fun-radius);
  transition: border-color 0.18s ease-out, background-color 0.18s ease-out;
}
@media (min-width: 640px) {
  .fun-page .fracc-itempad:hover {
    border-color: color-mix(in srgb, var(--evo-orange) 45%, var(--evo-border));
  }
}
.fun-page .fracc-itempad button:focus-visible {
  outline: 2px solid var(--evo-moon-gray);
  outline-offset: -4px;
  border-radius: calc(var(--fun-radius) - 4px);
}
.fun-page .fracc-chev {
  fill: var(--evo-moon-gray);
}

/* review strip: empty-star base dimmed for dark bg (filled stars take
   --fun-button-bg = evo orange automatically) */

/* routing-page loader: brighter track + a soft brand glow around the ring */
.fun-page .fun-routing-loader-ring {
  border-color: color-mix(in srgb, var(--evo-orange) 32%, transparent);
  border-top-color: var(--evo-orange);
  box-shadow: 0 0 20px color-mix(in srgb, var(--evo-orange) 18%, transparent);
}

/* header: hairline separation that fades at the edges */
.fun-page .fun-header {
  padding-top: 22px;
  padding-bottom: 10px;
}

/* ---- starfield: "scale to the moon" space backdrop -------------------- */
/* Pure CSS, two parallax depths, GPU-cheap (transform/opacity only).      */
/* Paint-order: body's own background renders AFTER negative-z layers, so
   only html may carry the black canvas — body and the wrapper stay
   transparent for the z:-1 star layers to show through. */
body {
  background: transparent !important;
}
.fun-page {
  position: relative;
  background: transparent;
}
.fun-page::before,
.fun-page::after {
  content: '';
  position: fixed;
  left: -24px; /* horizontal overscan for the pointer parallax shift */
  right: -24px;
  top: -120vh;
  bottom: -20vh;
  pointer-events: none;
  z-index: -1;
}
/* Cursor-reactive parallax (brand.js lerps the vars on rAF): the individual
   `translate` property composes with the drift animation's `transform`, so
   both stay compositor-only. Vars default to 0 — without brand.js (or with
   reduced motion / coarse pointers) nothing moves. Layers shift in opposite
   directions (near follows, far counters) for depth. */
.fun-page::before {
  translate: var(--evo-par-far-x, 0px) var(--evo-par-far-y, 0px);
}
.fun-page::after {
  translate: var(--evo-par-near-x, 0px) var(--evo-par-near-y, 0px);
}
/* far stars: tiny, dense-ish, slow drift + gentle twinkle */
.fun-page::before {
  background-image:
    radial-gradient(1.5px 1.5px at 17% 12%, rgba(227, 227, 219, 0.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 31%, rgba(227, 227, 219, 0.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 57%, rgba(227, 227, 219, 0.75) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 72%, rgba(227, 227, 219, 0.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 83%, rgba(227, 227, 219, 0.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 18%, rgba(227, 227, 219, 0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 29% 94%, rgba(227, 227, 219, 0.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 6%, rgba(227, 227, 219, 0.55) 50%, transparent 51%);
  background-size: 420px 420px;
  animation:
    evo-star-drift 240s linear infinite,
    evo-star-twinkle 7s ease-in-out infinite alternate;
}
/* near stars: fewer, brighter, one warm evo accent, faster drift */
.fun-page::after {
  background-image:
    radial-gradient(2.5px 2.5px at 71% 44%, rgba(239, 239, 232, 0.8) 50%, transparent 51%),
    radial-gradient(2px 2px at 23% 68%, rgba(239, 239, 232, 0.65) 50%, transparent 51%),
    radial-gradient(3px 3px at 47% 22%, rgba(225, 97, 0, 0.75) 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 88% 87%, rgba(239, 239, 232, 0.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 12% 35%, rgba(239, 239, 232, 0.8) 50%, transparent 51%);
  background-size: 640px 640px;
  animation:
    evo-star-drift 150s linear infinite,
    evo-star-twinkle 5s ease-in-out infinite alternate-reverse;
}
@keyframes evo-star-drift {
  from { transform: translateY(0); }
  to { transform: translateY(120vh); }
}
@keyframes evo-star-twinkle {
  from { opacity: 0.55; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fun-page::before,
  .fun-page::after {
    animation: none;
    top: 0;
    bottom: 0;
  }
}

/* ==================== LAYOUT COMPOSITION SYSTEM ============================
 * The quiz is one question per screen — the composition treats each page as
 * a centered "stage": header pinned top, the content group vertically
 * centered in the leftover viewport (overflow-safe via flex auto margins:
 * on tall pages they resolve to 0 and the page scrolls normally).
 *
 * Column widths (desktop):
 *   answers, 2-col card grid ........ 46rem  (cards ~352px)
 *   compact long lists (9+ rows) .... 44rem  (rows ~344px)
 *   exactly-3 lists ................. 27rem  single centered column
 *   media cards ..................... 52rem
 *   form fields ..................... 30rem
 * Rhythm: heading -> answer block 22px mobile / 30px desktop; list gaps
 * 14x16 (cards) / 10x12 (compact rows). */

/* -- vertical centering of the content group (header stays pinned) ------- */
.fun-page .fun-main > div.fun-motion-item:first-of-type {
  margin-top: auto;
  /* keeps tall pages (result/VSL), where the auto margin resolves to 0,
     from starting flush against the header */
  padding-top: 20px;
}
.fun-page .fun-main > div.fun-motion-item:last-of-type {
  margin-bottom: auto;
}

/* -- heading -> answers rhythm ------------------------------------------ */
.fun-page [class*="textAnswerList"] {
  margin-top: 22px;
  gap: 14px 16px;
}
@media (min-width: 768px) {
  .fun-page [class*="textAnswerList"] {
    margin-top: 30px;
  }
}

/* -- form column: balanced field width, heading kept close --------------- */
.fun-page form[class*="form"] {
  max-width: 30rem;
}

/* -- media-card pages: tighten the card row, keep the heading measure ---- */
@media (min-width: 1024px) {
  .fun-page [class*="mediaAnswerList"] {
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========================= ANSWER GRID + ICONS =============================
 * Desktop: text-answer lists become 2-column grids (the engine only did this
 * for even counts). Odd counts: the last card recenters at column width so
 * every card stays the same size. Mobile stays single-column.
 * Icons come from funnel.json `answerIcons` (rendered by TextAnswerCard);
 * here they get a quiet instrument-tile treatment: 48px rounded square with
 * a 32px icon, raised surface, hunter border — orange stays inside the icon
 * art only. */

@media (min-width: 768px) {
  /* one shared answer column for every questionText page (narrow AND wide
     container) so two columns breathe without going cavernous */
  .fun-page [class*="containerNarrow"]:has([class*="textAnswerList"]),
  .fun-page [class*="containerWide"]:has([class*="textAnswerList"]) {
    max-width: 46rem;
  }
  .fun-page [class*="textAnswerList"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* odd counts: center the trailing card at column width (gap is 16px) */
  .fun-page
    [class*="textAnswerList"]
    > [role="button"]:last-child:nth-child(odd):not(:first-child) {
    grid-column: 1 / -1;
    width: calc(50% - 8px);
    justify-self: center;
  }
  /* EXACTLY 3 answers: a 2+1 grid reads as a leftover — stack them in one
     centered column instead (the classic "pick a tier" composition) */
  .fun-page
    [class*="textAnswerList"]:has(> [role="button"]:nth-child(3):last-child) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 27rem;
    margin-left: auto;
    margin-right: auto;
  }
  .fun-page
    [class*="textAnswerList"]:has(> [role="button"]:nth-child(3):last-child)
    > [role="button"]:last-child {
    grid-column: auto;
    width: 100%;
  }
}

/* LONG LISTS (9+ answers, the funding/revenue pages): compact scan rows —
 * tighter padding, smaller icon tile, denser gaps, narrower column. Applies
 * on mobile too, where 11 full-size cards were two screens of scrolling. */
.fun-page [class*="textAnswerList"]:has(> [role="button"]:nth-child(9)) {
  gap: 10px 12px;
}
.fun-page
  [class*="textAnswerList"]:has(> [role="button"]:nth-child(9))
  > [role="button"] {
  min-height: 52px;
  padding: 8px 14px;
  gap: 12px;
}
.fun-page
  [class*="textAnswerList"]:has(> [role="button"]:nth-child(9))
  [class*="answerIcon"] {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}
.fun-page
  [class*="textAnswerList"]:has(> [role="button"]:nth-child(9))
  [class*="answerIcon"]
  img {
  width: 24px;
  height: 24px;
}
@media (min-width: 768px) {
  .fun-page
    [class*="containerNarrow"]:has(
      [class*="textAnswerList"] > [role="button"]:nth-child(9)
    ),
  .fun-page
    [class*="containerWide"]:has(
      [class*="textAnswerList"] > [role="button"]:nth-child(9)
    ) {
    max-width: 44rem;
  }
}

.fun-page [role="button"][class*="textAnswer"] [class*="answerIcon"] {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background-color: var(--evo-surface-raised);
  border: 1px solid var(--evo-border);
  color: var(--evo-moon-gray); /* currentColor base for the SVG line work */
  transition:
    border-color 0.18s ease-out,
    background-color 0.18s ease-out,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 640px) {
  /* icon micro-motion: the tile lifts a touch further than the card and
     picks up the orange accent — transform/paint only, 60fps */
  .fun-page [role="button"][class*="textAnswer"]:hover [class*="answerIcon"] {
    border-color: color-mix(in srgb, var(--evo-orange) 45%, var(--evo-border));
    background-color: color-mix(in srgb, var(--evo-orange) 8%, var(--evo-surface-raised));
    transform: translateY(-1px) scale(1.06);
  }
}
/* engine default is 28px; the v2 set carries fuller 2px-stroke objects that
   want 32px to breathe (overrides the img width/height attributes) */
.fun-page [role="button"][class*="textAnswer"] [class*="answerIcon"] img {
  width: 32px;
  height: 32px;
}
.fun-page [role="button"][class*="textAnswer"]:active [class*="answerIcon"] {
  transform: scale(0.96);
  transition-duration: 0.1s;
}
.fun-page
  [role="button"][class*="textAnswerSelected"]
  [class*="answerIcon"] {
  background-color: color-mix(in srgb, var(--evo-orange) 14%, var(--evo-surface-raised));
  border-color: color-mix(in srgb, var(--evo-orange) 60%, var(--evo-border));
}

/* ============================== FLUIDITY ==================================
 * Micro-interactions (transform/opacity/paint only, 150-250ms, ease-out or
 * spring-ish cubic-bezier) so every touchpoint answers the cursor. All of it
 * sits behind hover-capable pointers and inside no-preference motion. */

/* form fields: quiet border response on hover (focus ring already handled) */
@media (hover: hover) {
  .fun-page [class*="fieldBox"] {
    transition:
      border-color 0.18s ease-out,
      box-shadow 0.18s ease-out,
      background-color 0.18s ease-out;
  }
  .fun-page [class*="fieldBox"]:hover:not(:focus-within) {
    border-color: color-mix(in srgb, var(--evo-moon-gray) 28%, var(--evo-border));
  }
}

/* trust strip: avatars gently un-overlap and lift toward the cursor;
   stars brighten with a soft orange glow. Composited transforms only —
   the -12px stacking margin itself never changes (no layout). */
.fun-page .fun-reviews-avatar {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .fun-page .fun-reviews-avatars:hover .fun-reviews-avatar {
    transform: translateY(-2px);
  }
  .fun-page .fun-reviews-avatars:hover .fun-reviews-avatar:nth-child(2) {
    transform: translateX(3px) translateY(-2px);
  }
  .fun-page .fun-reviews-avatars:hover .fun-reviews-avatar:nth-child(3) {
    transform: translateX(6px) translateY(-2px);
  }
  .fun-page .fun-reviews-avatars:hover .fun-reviews-avatar:nth-child(4) {
    transform: translateX(9px) translateY(-2px);
  }
  .fun-page .fun-reviews-avatars:hover .fun-reviews-avatar:nth-child(5) {
    transform: translateX(12px) translateY(-2px);
  }
  /* keep the strip visually centered while it spreads */
  .fun-page .fun-reviews-avatars {
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .fun-page .fun-reviews-avatars:hover {
    transform: translateX(-5px);
  }
}
.fun-page .fun-reviews-stars {
  transition: filter 0.2s ease-out, transform 0.2s ease-out;
}
@media (hover: hover) {
  .fun-page .fun-reviews-stars:hover {
    filter: brightness(1.18)
      drop-shadow(0 0 6px color-mix(in srgb, var(--evo-orange) 45%, transparent));
    transform: scale(1.04);
  }
}

/* stillness for everyone who asked for it */
@media (prefers-reduced-motion: reduce) {
  .fun-page [role="button"][class*="textAnswer"],
  .fun-page [role="button"][class*="textAnswer"] [class*="answerIcon"],
  .fun-page [role="button"][class*="mediaCard"],
  .fun-page button[class*="button"],
  .fun-page button[class*="submitBtn"],
  .fun-page .fun-reviews-avatars,
  .fun-page .fun-reviews-avatar,
  .fun-page .fun-reviews-stars {
    transition: none;
    transform: none;
  }
}

/* ---- rocket liftoff (v3, three.js) ------------------------------------- */
/* The routing interstitial's launch animation is code-native now: engine
   RocketLoader/rocketScene via funnel.json `loaderAnimation` (the v2
   rocket-video CSS that lived here was removed with the video). This funnel
   only carries a sizing nudge for the reduced-motion static rocket. */
.fun-page .fun-rocket-static {
  height: 132px;
}

/* ==================== MEDIA-CARD ICONS (questionMedia) =====================
 * EVO icons on the big media answer cards (business-type page + UGC yes/no).
 * QuestionMedia.tsx renders `img[data-answer-icon]` when funnel.json
 * `answerIcons` matches the answer's plainText; funnels without the config
 * keep their stock inline SVGs and never produce this element. The icons are
 * the icons-v2 language (moon-gray stroke + one orange accent) so they sit
 * on the dark card over the existing mediaIconArea halo. This section is
 * self-contained — append-only, owned by the media-icons pass. */

.fun-page [class*="mediaIconArea"] img[data-answer-icon] {
  width: 64px;
  height: 64px;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) {
  .fun-page [class*="mediaIconArea"] img[data-answer-icon] {
    width: 72px;
    height: 72px;
  }
}
@media (min-width: 640px) {
  /* icon micro-motion mirrors the text-answer tiles: lifts a touch further
     than the card on hover — transform only, 60fps */
  .fun-page
    [role="button"][class*="mediaCard"]:hover
    [class*="mediaIconArea"]
    img[data-answer-icon] {
    transform: translateY(-2px) scale(1.06);
  }
}
.fun-page
  [role="button"][class*="mediaCard"]:active
  [class*="mediaIconArea"]
  img[data-answer-icon] {
  transform: scale(0.96);
  transition-duration: 0.1s;
}
@media (prefers-reduced-motion: reduce) {
  .fun-page [class*="mediaIconArea"] img[data-answer-icon] {
    transition: none;
    transform: none;
  }
}

/* ---- CALENDLY EMBED: force full-bleed dark layout -------------------- */
/* At <=620px Calendly's inline embed drops its white page mat and renders
   the dark themed card edge-to-edge (theme colors come from the data-url
   params in the page JSON). Wider layouts bring back a white mat - keep it
   narrow. */
.fun-page .calendly-inline-widget {
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 16px;
  overflow: hidden;
  background: #141414;
}

/* Calendly iframe: dark canvas while booting + fade-in on load (brand.js)
   so the pre-boot white flash never shows; data-resize on the widget div
   keeps the iframe hugging content height (no white band below). */
.fun-page .calendly-inline-widget iframe {
  color-scheme: dark;
  opacity: 0;
  transition: opacity 240ms ease;
}
.fun-page .calendly-inline-widget iframe.evo-cal-ready {
  opacity: 1;
}

/* ---- ROUTING POPUP: playful line during the rocket ------------------- */
.evo-routing-pop {
  position: fixed;
  left: 50%;
  bottom: clamp(72px, 14vh, 140px);
  transform: translateX(-50%) scale(0.9);
  opacity: 0;
  z-index: 30;
  pointer-events: none;
  background: rgba(20, 20, 20, 0.92);
  border: 1px solid rgba(225, 97, 0, 0.55);
  border-radius: 999px;
  padding: 14px 26px;
  color: #efefe8;
  font-size: 16px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 40px rgba(225, 97, 0, 0.18);
  animation: evo-pop-in 480ms cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s forwards;
}
.evo-routing-pop strong {
  color: #e16100;
}
@media (max-width: 640px) {
  .evo-routing-pop {
    white-space: normal;
    text-align: center;
    max-width: 82vw;
    border-radius: 20px;
  }
}
@keyframes evo-pop-in {
  from { opacity: 0; transform: translateX(-50%) scale(0.9); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .evo-routing-pop {
    animation: none;
    opacity: 1;
    transform: translateX(-50%);
  }
}