/* ============================================================
   NIL — What's Next Quiz
   ------------------------------------------------------------
   The quiz shell, rebuilt to the TALENTnext `/new/get-started`
   design: blueprint canvas, one fixed-height white card, a
   single continuous progress bar with "QUESTION — n of N",
   radio-marked option rows, and a ruled footer holding the two
   actions.

   PORTED FROM `web/src/components/quiz/QuizFlow.module.css`,
   with the Gridline Button and ProgressTrack rules folded in
   where this markup uses plain elements instead of components.
   The `--gl-*` tokens come from `tokens.css`, enqueued first;
   nothing here invents a value the system already names.

   WHAT IS NOT HERE. The results screen, share row, marquee and
   HubSpot modal keep their own design and follow below,
   untouched. Only the question and contact steps were
   redesigned, so only those were rewritten.

   EVERYTHING IS SCOPED TO `.nil-quiz`. This is a theme the
   plugin does not own, so no bare element ever gets a rule.
   ============================================================ */

/* The results screen below still sets Bebas Neue and Roboto, so the import
   stays. The redesigned shell does not use either: the TALENTnext system
   names no webfont at all — its sans is the platform's own Helvetica Neue
   stack — so the quiz steps download nothing. */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,400;0,500;1,400&display=swap");

/* ---------- the canvas ---------- */

/* Two blueprint cells top and bottom, three each side: the card's
   boundaries land exactly on gridlines while sitting in from the
   canvas edges. */
.nil-quiz {
  --nil-quiz-cell: var(--gl-blueprint-cell, 56px);
  --nil-quiz-cell-x: var(--gl-blueprint-cell-x, 4%);

  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: calc(2 * var(--nil-quiz-cell)) calc(3 * var(--nil-quiz-cell-x));
  background-image: var(--gl-gradient-blueprint);
  background-size: var(--nil-quiz-cell-x) var(--nil-quiz-cell);
  background-position: -1px -1px;
  border-bottom: var(--gl-border-width-hairline) solid var(--gl-color-border-rule);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: var(--gl-font-sans);
  color: var(--gl-color-text-body);
}

.nil-quiz *,
.nil-quiz *::before,
.nil-quiz *::after {
  box-sizing: border-box;
}

/* The card. No radius, no shadow, and a fixed height so the box does
   not resize between questions — eleven grid cells, with a floor for
   narrow viewports where a cell is small.

   Only the bottom and right edges are drawn. The lattice paints its
   line in the last pixel BEFORE each boundary, so the top and left
   already sit on one; a hairline there stacks and reads as a doubled
   edge. */
.nil-quiz-card {
  width: 100%;
  max-width: var(--gl-frame-max-width, 1400px);
  height: calc(11 * var(--nil-quiz-cell));
  min-height: 610px;
  padding: clamp(2rem, 3.5vw, 3.25rem) clamp(2rem, 4vw, 3.5rem);
  background-color: var(--gl-color-surface-raised);
  border: none;
  border-right: var(--gl-border-width-hairline) solid var(--gl-color-border-rule);
  border-bottom: var(--gl-border-width-hairline) solid var(--gl-color-border-rule);
  border-radius: 0;
  box-shadow: none;
  /* A column flex container, which is what the active step's `height: 100%`
     and its `margin-top: auto` footer are laid out against. Without it the
     step had nothing to fill, the footer stopped being pinned, and the two
     actions pushed out through the bottom of the card. */
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------- steps ---------- */

/* Each step fills the card and pushes its footer to the bottom, which
   is what keeps the two actions on one line however short the
   question is. `display: none` rather than visibility: a hidden step
   must not be reachable by tab. */
/* `flex: 1`, NOT `height: 100%`.

   The progress header is a sibling of the steps here, not a child of one —
   it is shared across all twelve, where the React version rebuilds it inside
   each. So `height: 100%` asked for the card's whole content box, the header
   sat above that, and the total came to more than the card: the footer was
   pushed out through the bottom edge. Filling what is LEFT is the same
   intent, expressed in a way that counts the header. */
.nil-quiz .nil-quiz-step {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  justify-content: space-between;
}

.nil-quiz .nil-quiz-step.active {
  display: flex;
}

/* ---------- progress header ---------- */

.nil-quiz-progress {
  margin-bottom: var(--gl-space-9);
}

.nil-quiz-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gl-space-3);
}

.nil-quiz-progress-label {
  font-size: var(--gl-size-caption);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  color: var(--gl-color-text-muted);
  font-weight: var(--gl-weight-regular);
}

.nil-quiz-progress-count {
  font-size: var(--gl-size-caption);
  color: var(--gl-color-text-secondary);
  font-weight: var(--gl-weight-regular);
  letter-spacing: var(--gl-tracking-normal);
}

/* ProgressTrack, size sm, tone accent, track shown. */
.nil-quiz-progress-track {
  width: 100%;
  height: 4px;
  border-radius: var(--gl-radius-sm);
  background-color: var(--gl-color-data-track-alt);
  overflow: hidden;
  position: relative;
}

.nil-quiz-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background-color: var(--gl-color-accent);
  transition: width var(--gl-duration-moderate) var(--gl-ease-standard);
}

/* ---------- the question ---------- */

.nil-quiz-q-head {
  margin-bottom: var(--gl-space-7);
}

.nil-quiz .nil-quiz-question {
  font-family: var(--gl-font-sans);
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: var(--gl-weight-regular);
  line-height: var(--gl-leading-tight);
  color: var(--gl-color-text-primary);
  letter-spacing: -0.015em;
  margin: 0 0 var(--gl-space-2);
  text-transform: none;
}

.nil-quiz .nil-quiz-q-num-label {
  display: inline-block;
  font-size: var(--gl-size-caption);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  color: var(--gl-color-text-muted);
  margin-bottom: var(--gl-space-3);
  padding: 0;
  background: none;
  border-radius: 0;
}

/* ---------- options ---------- */

.nil-quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-3);
  margin-bottom: auto;
}

/* The real radio is CLIPPED, never `display: none` — hiding it that
   way takes it out of the tab order and off the accessibility tree,
   and arrow keys are how a radio group is meant to be driven. */
.nil-quiz .nil-quiz-option {
  display: block;
  position: relative;
  margin: 0;
  cursor: pointer;
}

.nil-quiz .nil-quiz-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* One geometry, three states. The border is always 1.5px and the mark
   is always drawn, so nothing shifts by a pixel between unselected,
   hovered, focused and selected — only colour changes. */
.nil-quiz .nil-quiz-option-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 22px;
  text-align: left;
  background-color: var(--gl-color-surface-hover);
  /* Transparent rather than absent: the selected state paints this
     same 1.5px, so the row never grows when it is chosen. */
  border: 1.5px solid transparent;
  border-radius: 0;
  color: var(--gl-color-text-body);
  font-size: 1.05rem;
  font-weight: var(--gl-weight-regular);
  line-height: var(--gl-leading-normal);
  transition:
    border-color var(--gl-duration-fast) var(--gl-ease-standard),
    background-color var(--gl-duration-fast) var(--gl-ease-standard),
    color var(--gl-duration-fast) var(--gl-ease-standard);
}

/* The mark. Ring only when unselected; ring plus filled core when
   selected, the core an inset shadow so it needs no extra element. */
.nil-quiz .nil-quiz-badge {
  flex: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  border-radius: var(--gl-radius-full);
  border: 1.5px solid var(--gl-color-border-interactive);
  background-color: transparent;
  /* The letter it used to carry is gone from the markup; this guards
     against a stale cached template still sending one through. */
  font-size: 0;
  color: transparent;
  transition:
    border-color var(--gl-duration-fast) var(--gl-ease-standard),
    background-color var(--gl-duration-fast) var(--gl-ease-standard),
    box-shadow var(--gl-duration-fast) var(--gl-ease-standard);
}

.nil-quiz .nil-quiz-option-text {
  font-size: inherit;
  color: inherit;
}

.nil-quiz .nil-quiz-option input:not(:checked) ~ .nil-quiz-option-row:hover {
  background-color: var(--gl-color-surface-sunken);
}

/* Keyboard focus: the row keeps whatever state it is in and gains a
   ring OUTSIDE its own box, so focused and unfocused rows are the
   same size and colour. */
.nil-quiz .nil-quiz-option input:focus-visible ~ .nil-quiz-option-row {
  box-shadow:
    0 0 0 2px var(--gl-color-surface-raised),
    0 0 0 4px var(--gl-color-accent);
}

/* Selected: accent border, 15% accent fill, filled accent mark. The
   label stays in the ordinary text colour — the mark and the fill
   carry the state, so a chosen row reads no louder than the rest. */
.nil-quiz .nil-quiz-option input:checked ~ .nil-quiz-option-row {
  border-color: var(--gl-color-accent);
  background-color: rgba(249, 66, 58, 0.15);
  color: var(--gl-color-text-primary);
}

.nil-quiz .nil-quiz-option input:checked ~ .nil-quiz-option-row .nil-quiz-badge {
  border-color: var(--gl-color-accent);
  background-color: var(--gl-color-accent);
  /* The white gap between ring and core. */
  box-shadow: inset 0 0 0 3px var(--gl-color-surface-raised);
}

/* ---------- footer navigation ---------- */

.nil-quiz .nil-quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gl-space-5);
  margin-top: auto;
  padding-top: var(--gl-space-7);
  border-top: var(--gl-border-width-hairline) solid var(--gl-color-border-rule);
}

/* ---------- buttons ---------- */

/* Gridline Button, size md. Actions are SQUARE: zero radius, no
   border, uppercase tracked-out label.

   The doubled class is load-bearing. A theme styling bare `button`
   at (0,1,1) beats a single class at (0,1,0), which is how these
   ended up as someone else's black pill the first time. */
.nil-quiz .nil-quiz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gl-space-3);
  width: auto;
  height: auto;
  padding: var(--gl-control-padding-md);
  border: none;
  border-radius: var(--gl-radius-none);
  outline: none;
  font-family: var(--gl-font-sans);
  font-size: var(--gl-type-action-md-size);
  font-weight: var(--gl-type-action-md-weight);
  letter-spacing: var(--gl-type-action-md-tracking);
  line-height: var(--gl-leading-flat);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--gl-duration-fast) var(--gl-ease-standard),
    color var(--gl-duration-fast) var(--gl-ease-standard),
    transform var(--gl-duration-fast) var(--gl-ease-standard);
}

.nil-quiz .nil-quiz-btn:focus-visible {
  outline: var(--gl-border-width-thick) solid var(--gl-color-focus-ring);
  outline-offset: 2px;
}

.nil-quiz .nil-quiz-btn:disabled,
.nil-quiz .nil-quiz-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* Next, before anything is chosen: secondary. */
.nil-quiz .nil-quiz-btn.nil-quiz-next {
  background-color: var(--gl-color-action-secondary-bg);
  color: var(--gl-color-action-secondary-fg);
}

.nil-quiz .nil-quiz-btn.nil-quiz-next:hover {
  background-color: var(--gl-color-action-secondary-bg-hover);
}

/* Next, once an option is chosen: primary. The class is added by the
   script on change, so the button answers the choice. */
.nil-quiz .nil-quiz-btn.nil-quiz-next.is-answered {
  background-color: var(--gl-color-action-primary-bg);
  color: var(--gl-color-action-primary-fg);
}

.nil-quiz .nil-quiz-btn.nil-quiz-next.is-answered:hover {
  background-color: var(--gl-color-action-primary-bg-hover);
  transform: translateY(-1px);
}

/* Back: ghost. */
.nil-quiz .nil-quiz-btn.nil-quiz-btn-back {
  background-color: transparent;
  color: var(--gl-color-action-ghost-fg);
}

.nil-quiz .nil-quiz-btn.nil-quiz-btn-back:hover {
  background-color: var(--gl-color-action-ghost-bg-hover);
  color: var(--gl-color-action-ghost-fg-hover);
}

/* The one accent action in the flow, on the final step. */
.nil-quiz .nil-quiz-btn.nil-quiz-submit {
  background-color: var(--gl-color-accent);
  color: var(--gl-color-text-inverse);
}

.nil-quiz .nil-quiz-btn.nil-quiz-submit:hover {
  background-color: var(--gl-color-accent-hover);
  transform: translateY(-1px);
}

.nil-quiz .nil-quiz-arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* ---------- the contact step ---------- */

.nil-quiz-form-lede {
  font-size: var(--gl-size-body-base);
  line-height: var(--gl-leading-relaxed);
  color: var(--gl-color-text-body);
  margin: 0 0 var(--gl-space-8);
  max-width: 58ch;
}

.nil-quiz .nil-quiz-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.nil-quiz-form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-5);
  margin-bottom: var(--gl-space-8);
}

.nil-quiz .nil-quiz-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gl-space-5);
}

.nil-quiz .nil-quiz-field {
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-2);
}

.nil-quiz .nil-quiz-field label {
  font-size: var(--gl-size-body-sm);
  font-weight: var(--gl-weight-medium);
  color: var(--gl-color-text-primary);
  text-transform: none;
  letter-spacing: var(--gl-tracking-normal);
  margin: 0;
}

/* (0,3,1), clearing a theme's bare-input rule. */
.nil-quiz .nil-quiz-field input[type] {
  width: 100%;
  padding: 13px 16px;
  font-size: 1rem;
  font-family: var(--gl-font-sans);
  border: var(--gl-border-width-hairline) solid var(--gl-color-border-rule);
  border-radius: 0;
  background-color: var(--gl-neutral-0);
  color: var(--gl-color-text-primary);
  outline: none;
  transition: border-color var(--gl-duration-fast) var(--gl-ease-standard);
}

.nil-quiz .nil-quiz-field input[type]:focus {
  border-color: var(--gl-color-accent);
  box-shadow: 0 0 0 1px var(--gl-color-accent);
}

.nil-quiz .nil-quiz-field input[aria-invalid="true"] {
  border-color: var(--gl-color-accent);
}

.nil-quiz-privacy {
  font-size: var(--gl-size-caption);
  color: var(--gl-color-text-muted);
  margin: var(--gl-space-5) 0 0;
}

/* ---------- the closing screen, 'thanks' mode ---------- */

/* Ported from the app's own `IntakeForm.module.css` `.success` — the panel
   at the foot of the landing page, same badge, same two lines, same tokens.
   Centred in the card rather than pinned to its top, because there is no
   footer under it to balance against. */
.nil-quiz-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  padding: var(--gl-space-11) var(--gl-space-7);
}

.nil-quiz-thanks-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--gl-space-7);
  border-radius: var(--gl-radius-full);
  background: var(--gl-color-surface-success);
  color: var(--gl-color-text-success);
  font-size: 24px;
  line-height: 1;
}

.nil-quiz .nil-quiz-thanks-title {
  margin: 0 0 var(--gl-space-3);
  font-family: var(--gl-font-sans);
  font-size: var(--gl-size-heading-md);
  line-height: var(--gl-leading-heading);
  font-weight: var(--gl-weight-regular);
  color: var(--gl-color-text-primary);
  text-transform: none;
}

.nil-quiz .nil-quiz-thanks-body {
  margin: 0;
  font-size: var(--gl-size-body-md);
  line-height: var(--gl-leading-body);
  color: var(--gl-color-text-secondary);
  max-width: 48ch;
}

/* ---------- the intro step ---------- */

/* Not part of the redesigned flow, but it opens the card, so it is
   brought onto the same type and spacing rather than left in the
   previous design's voice. */
.nil-quiz-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  max-width: 62ch;
  margin: auto 0;
}

.nil-quiz .nil-quiz-intro-eyebrow {
  font-size: var(--gl-size-caption);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  color: var(--gl-color-text-muted);
  background: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: var(--gl-space-4);
}

.nil-quiz .nil-quiz-intro-stat {
  font-family: var(--gl-font-sans);
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: var(--gl-weight-regular);
  line-height: var(--gl-leading-tight);
  letter-spacing: -0.015em;
  color: var(--gl-color-text-primary);
  text-transform: none;
  margin: 0 0 var(--gl-space-5);
}

.nil-quiz .nil-quiz-intro-asterisk {
  color: var(--gl-color-accent);
}

.nil-quiz .nil-quiz-intro-body {
  font-size: var(--gl-size-body-base);
  line-height: var(--gl-leading-relaxed);
  color: var(--gl-color-text-body);
  margin: 0 0 var(--gl-space-9);
  max-width: 58ch;
}

.nil-quiz .nil-quiz-intro-source {
  font-size: var(--gl-size-caption);
  color: var(--gl-color-text-muted);
  margin: var(--gl-space-7) 0 0;
}

/* The intro's Next is the flow's one opening action, and has no
   choice to answer — so it is primary from the start. */
.nil-quiz .nil-quiz-intro .nil-quiz-btn.nil-quiz-next {
  background-color: var(--gl-color-action-primary-bg);
  color: var(--gl-color-action-primary-fg);
}

.nil-quiz .nil-quiz-intro .nil-quiz-btn.nil-quiz-next:hover {
  background-color: var(--gl-color-action-primary-bg-hover);
  transform: translateY(-1px);
}

/* The page title sat above the card in the old design. The card now
   opens on its own progress header, and a second heading above it
   competed with the question — so it is gone from sight but kept for
   anything reading the page aloud. */
.nil-quiz .nil-quiz-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- the shell, on a phone ---------- */

@media (max-width: 860px) {
  .nil-quiz {
    padding: var(--gl-space-8) var(--gl-space-4);
  }

  .nil-quiz-card {
    height: auto;
    min-height: 560px;
    padding: var(--gl-space-8) var(--gl-space-6);
  }

  .nil-quiz .nil-quiz-form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .nil-quiz .nil-quiz-option-row {
    padding: 12px 16px;
    gap: 12px;
    font-size: 1rem;
  }

  /* Stacked, and the forward action first: on a narrow screen the
     button under the thumb should be the one that continues. */
  .nil-quiz .nil-quiz-nav {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--gl-space-3);
  }

  .nil-quiz .nil-quiz-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nil-quiz .nil-quiz-progress-fill {
    transition: none;
  }

  .nil-quiz .nil-quiz-btn:hover {
    transform: none;
  }
}

/* ============================================================
   Result screen — matches the "QUIZ RESULTS" Figma designs
   Lime #c8ff78 · Navy #021d44 · Bebas Neue headings · Roboto body
   ============================================================ */

body.nil-quiz-result-active {
  overflow-x: hidden !important;
}

.nil-quiz--result {
  background: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  position: relative;
}
.nil-quiz--result::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: #ffffff;
  z-index: 0;
}
.nil-quiz--result .nil-quiz-progress,
.nil-quiz--result .nil-quiz-title {
  display: none;
}
.nil-quiz-step[data-step="14"] {
  position: relative;
  z-index: 1;
}

/* Fixed to the Figma canvas: 1160px content (two flush 580px columns, 740px
   tall). Exact px are used at >=1200px so it matches the design pixel-for-pixel;
   below that it scales down / stacks. */
.nil-quiz-result-page {
  width: 1160px;
  max-width: 100%;
  margin: 0 auto;
  padding: 60px 0 0;
}

/* -- two-column grid: lime card + bordered box, flush -- */
.nil-quiz-result-grid {
  position: relative;
  display: grid;
  grid-template-columns: 580px 580px;
  justify-content: center;
  height: 680px;
  margin-bottom: 20px;
}

/* Vertical "QUIZ RESULTS" label to the left of the card */
.nil-quiz-result-vlabel {
  position: absolute;
  top: 0;
  left: -30px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Bebas Neue", sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  color: #021d44;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Left column (lime card) ---------- */
.nil-quiz-result-left {
  position: relative;
  overflow: hidden;
  background: #c8ff78;
}

/* Speech-bubble greeting (navy bubble is the exact Figma vector) */
.nil-quiz-result-greetwrap {
  position: relative;
  height: 231px;
  padding: 33px 44px 0 72px;
  box-sizing: border-box;
}
.nil-quiz-result-bubble {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.nil-quiz-result-greeting {
  position: relative;
  z-index: 1;
}
.nil-quiz-result-hey {
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: 0.5px;
  color: #c8ff78;
  text-transform: uppercase;
}
.nil-quiz-result-bigtitle {
  display: block;
  margin-top: 4px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 100px;
  line-height: 0.9;
  letter-spacing: 1px;
  color: #c8ff78;
  text-transform: uppercase;
}

.nil-quiz-result-left-body {
  position: relative;
  z-index: 1;
  padding: 62px 60px 44px;
}
.nil-quiz-result-archetype {
  font-family: "Bebas Neue", sans-serif;
  font-size: 36px;
  font-weight: 400;
  color: #021d44;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 16px;
}
.nil-quiz-result-desc {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  line-height: 24px;
  color: #222222;
  margin: 0 0 48px;
  max-width: 460px;
}
.nil-quiz-result-list-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 36px;
  font-weight: 400;
  color: #021d44;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 16px;
}
.nil-quiz-result-traits {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nil-quiz-result-trait {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.nil-quiz-result-check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  line-height: 0;
  margin-top: 1px;
}
.nil-quiz-result-check svg {
  width: 20px;
  height: 20px;
  display: block;
}
.nil-quiz-result-trait-text {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  line-height: 22px;
  color: #222222;
}

/* ---------- Right column (bordered box) ---------- */
.nil-quiz-result-right {
  background: #ffffff;
  border: 1px solid #021d44;
  display: flex;
  flex-direction: column;
  height: 740px;
  box-sizing: border-box;
}
.nil-quiz-result-careers {
  height: 435px;
  box-sizing: border-box;
  padding: 40px 60px 0;
  border-bottom: 1px solid #021d44;
  overflow: hidden;
}
.nil-quiz-result-section-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 36px !important;
  font-weight: 400 !important;
  color: #021d44;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 16px;
}
.nil-quiz-result-career-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nil-quiz-result-career {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.nil-quiz-result-career-ic {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.nil-quiz-result-career-ic svg {
  width: 20px;
  height: 20px;
  display: block;
}
.nil-quiz-result-career-txt {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #222222;
}
.nil-quiz-result-career-name {
  color: #222222;
}
.nil-quiz-result-nextstep {
  flex: 1 1 auto;
  padding: 46px 60px 0;
}
.nil-quiz-result-next-desc {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 20px;
  color: #222222;
  margin: 16px 0 16px;
}

/* Three resource cards, flush at the bottom; middle one highlighted */
.nil-quiz-result-resources {
  height: 120px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #021d44;
}
.nil-quiz-result-resource {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  text-align: center;
  text-decoration: none !important;
  border-right: 1px solid #021d44;
  border-bottom: 1px solid #021d44;
  transition: background 0.2s;
}
.nil-quiz-result-resource:last-child {
  border-right: none;
}
.nil-quiz-result-resource:hover {
  background: #c8ff78;
  text-decoration: underline !important;
  text-decoration-color: #222222 !important;
}
.nil-quiz-result-resource--highlight {
  background: #c8ff78;
}
.nil-quiz-result-resource--highlight:hover {
  background: #bcf964;
}
.nil-quiz-result-res-ic {
  width: 32px;
  height: 32px;
  line-height: 0;
}
.nil-quiz-result-res-ic svg {
  width: 32px;
  height: 32px;
  display: block;
}
.nil-quiz-result-res-label {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 20px;
  color: #222222;
}
.nil-quiz-result-resource--highlight .nil-quiz-result-res-label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Share row ---------- */
.nil-quiz-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 24px 0 0;
}
.nil-quiz-share-text {
  font-family: "Roboto", sans-serif;
  font-style: italic;
  font-size: 16px;
  line-height: 20px;
  color: #222222;
  margin: 0;
}
.nil-quiz-share-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #c8ff78;
  border-radius: 40px;
  padding: 4px 12px;
}
.nil-quiz-share-label {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #2d4c00;
}
.nil-quiz-share-sep {
  width: 8px;
  height: 0;
  border-top: 1px solid #2d4c00;
}
.nil-quiz-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  background: transparent;
  border: none;
  color: #021d44;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
  text-decoration: none;
}
.nil-quiz-share-icon:hover {
  opacity: 0.6;
}
.nil-quiz-share-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}
/* ---------- Marquee ticker ---------- */
.nil-quiz-marquee {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  overflow: hidden;
  background: #c8ff78;
  border-top: 2px solid #021d44;
  border-bottom: 2px solid #021d44;
  padding: 8px 0;
  margin-top: 40px;
}
.nil-quiz-marquee-track {
  display: flex;
  white-space: nowrap;
  animation: nilMarquee 30s linear infinite;
}
.nil-quiz-marquee-item {
  font-family: "Bebas Neue", sans-serif;
  font-size: 40px;
  font-weight: 400;
  color: #021d44;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 0 24px;
}
@keyframes nilMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nil-quiz-marquee-track {
    animation: none;
  }
}

/* ============================================================
   Result responsive — below the 1160px design width, scale down
   ============================================================ */
@media (max-width: 1199px) {
  .nil-quiz-result-page {
    width: 100%;
    padding: 48px 24px 0;
  }
  .nil-quiz-result-grid {
    grid-template-columns: 1fr 1fr;
    height: auto;
  }
  .nil-quiz-result-vlabel {
    display: none;
  }
  .nil-quiz-result-right {
    height: auto;
  }
  .nil-quiz-result-greetwrap {
    height: auto;
    min-height: 200px;
    padding: 32px 32px 60px;
  }
  .nil-quiz-result-bigtitle {
    font-size: clamp(48px, 8vw, 100px);
  }
  .nil-quiz-result-hey {
    font-size: clamp(20px, 2.6vw, 32px);
  }
  .nil-quiz-result-left-body {
    padding: 40px 32px 40px;
  }
  .nil-quiz-result-careers {
    height: auto;
    padding: 32px 32px 28px;
  }
  .nil-quiz-result-nextstep {
    padding: 32px 32px 0;
  }
  .nil-quiz-result-archetype,
  .nil-quiz-result-list-title,
  .nil-quiz-result-section-title {
    font-size: clamp(26px, 3.2vw, 36px);
  }
}
@media (max-width: 768px) {
  .nil-quiz-result-page {
    padding: 32px 16px 0;
  }
  .nil-quiz-result-grid {
    grid-template-columns: 1fr;
  }
  .nil-quiz-result-desc,
  .nil-quiz-result-trait-text {
    font-size: 16px;
  }
  .nil-quiz-result-marquee-item,
  .nil-quiz-marquee-item {
    font-size: 28px;
  }
}
@media (max-width: 480px) {
  .nil-quiz-result-greetwrap {
    padding: 26px 22px 48px;
  }
  .nil-quiz-result-left-body {
    padding: 32px 22px 32px;
  }
  .nil-quiz-result-careers {
    padding: 26px 22px 22px;
  }
  .nil-quiz-result-nextstep {
    padding: 26px 22px 0;
  }
  .nil-quiz-result-desc,
  .nil-quiz-result-trait-text {
    font-size: 15px;
  }
  .nil-quiz-result-resources {
    height: auto;
    grid-template-columns: 1fr;
  }
  .nil-quiz-result-resource {
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border-right: none;
    border-bottom: 1px solid #021d44;
  }
  .nil-quiz-result-resource:last-child {
    border-bottom: none;
  }
  .nil-quiz-marquee-item {
    font-size: 22px;
    padding: 0 14px;
  }
}

/* ---------- spinner ---------- */
.nil-quiz-btn.is-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.nil-quiz-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: nilSpin 0.6s linear infinite;
}
@keyframes nilSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- HubSpot form modal (Explorer result) ---------- */
.nil-quiz-hs-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
.nil-quiz-hs-modal.active {
  display: flex;
}
.nil-quiz-hs-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 29, 68, 0.6);
  backdrop-filter: blur(4px);
}
.nil-quiz-hs-modal-content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 48px 40px 40px;
  width: 90%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.nil-quiz-hs-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  color: #021d44;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.nil-quiz-hs-modal-close:hover {
  color: #3aafa9;
}
.nil-quiz-hs-open {
  cursor: pointer;
  border: none;
}
@media (max-width: 480px) {
  .nil-quiz-hs-modal-content {
    padding: 40px 20px 24px;
    width: 95%;
  }
}