/* Nexodyne parent quiz (audit.html). Works with js/nx-quiz.js.
   Palette and offset shadows match the rest of the site. */
.nxq {
  --q-navy: #282858;
  --q-ink: #1f1f3a;
  --q-muted: #4a4a68;
  --q-line: #dcdce8;
  --q-yellow: #fedb71;
  --q-yellow-soft: #fff6d6;
  --q-mint: #75c5a8;
  --q-mint-soft: #bfffe6;
  --q-coral: #fb7d7e;
  --q-lilac: #e9d9ff;
  --q-ease: cubic-bezier(.2, .75, .25, 1);
  --q-shadow: 4px 4px 0 #282858;
  font-family: Geist, Inter, system-ui, sans-serif;
  color: var(--q-ink);
}

/* ---------- Page: let the quiz scroll on small screens (the export clipped everything to one screen) ---------- */
body.nxq, .nxq .page-wrapper.pad-60, .nxq .section.pad-135.custom._1, .nxq .form-full.custom, .nxq .form-4,
.nxq .mask-2, .nxq .slide-5, .nxq .slider-3 { max-height: none !important; overflow: visible !important; height: auto !important; }
/* The form panel and its column were still held to one screen, so on small phones the FATHER and MOTHER buttons, the
   consent line and the last answer of some questions were cut off. They grow with the step now. Clip, not hidden, so
   the Next bar can stick to the bottom of the screen on phones too. */
.nxq .form-wrapper, .nxq .base-container.pad-0 { max-height: none; overflow: clip; }
/* Phones: the export pushed the consent line 100px down to the foot of that one-screen panel; it now follows the
   privacy note with the same space as on larger screens. */
@media screen and (max-width: 479px) { .nxq .container-4 { margin-top: 20px; } }
.nxq .form-wrapper.w-form { margin: 0; width: 100%; max-width: none; }
.nxq .section.pad-135.custom._1 .base-container { max-width: 720px !important; width: 100%; }
.nxq .form-full.custom { padding-left: 0 !important; padding-right: 0 !important; }
.nxq .section.pad-135.custom._1 { margin-top: 8px; }

/* Hold everything back for a moment until fonts are in, then fade in (never longer than 2.5s, even without JS) */
.nxq #nd-quiz-header, .nxq .nx-quiz { opacity: 0; transition: opacity .35s ease; }
.nxq.nx-ready #nd-quiz-header, .nxq.nx-ready .nx-quiz { opacity: 1; }
.nxq:not(.nx-ready) #nd-quiz-header, .nxq:not(.nx-ready) .nx-quiz { animation: nxq-failsafe 0s linear 2.5s forwards; }
@keyframes nxq-failsafe { to { opacity: 1; } }

/* ---------- Header ---------- */
.nxq #nd-quiz-header { max-width: 1100px; margin: 0 auto; padding: 12px 8px 14px; }
.nxq .nd-quiz-progress-bg { height: 8px; background: #ececf3; }
.nxq .nd-quiz-progress-fill { transition: width .6s var(--q-ease), background-color .6s ease; }
.nxq .nd-quiz-progress-label { color: var(--q-muted); font-family: Geist, Inter, sans-serif; letter-spacing: .07em; }

/* ---------- Stage + slide transitions ---------- */
.nxq .nx-quiz { position: relative; max-width: 680px; margin: 0 auto; padding: 0 16px; }
.nxq .nx-quiz-stage { position: relative; white-space: normal; width: 100% !important; height: auto !important; margin: 0 auto; padding: 0; }
.nxq .nx-quiz .w-slide {
  display: none; position: relative; width: 100%; height: auto; max-height: none; padding: 4px 0 8px; vertical-align: top;
  white-space: normal; text-align: center; border-radius: 0;
}
.nxq .nx-quiz .w-slide.is-active, .nxq .nx-quiz .w-slide.is-leaving { display: block; }
.nxq .nx-quiz .w-slide.is-active { opacity: 0; transform: translateX(28px); }
.nxq .nx-quiz .w-slide.is-active.from-left { transform: translateX(-28px); }
.nxq .nx-quiz .w-slide.is-active.is-shown {
  opacity: 1; transform: none;
  transition: opacity .52s var(--q-ease) .08s, transform .6s var(--q-ease) .08s;
}
.nxq .nx-quiz .w-slide.is-leaving {
  position: absolute; top: 0; left: 0; right: 0; pointer-events: none;
  opacity: 0; transform: translateX(-22px); transition: opacity .22s ease, transform .26s ease;
}
.nxq .nx-quiz .w-slide.is-leaving.to-right { transform: translateX(22px); }

/* Content column inside every slide (overrides the export's narrow 448px wrappers) */
.nxq .slider-content-wrap, .nxq .slider-content-wrap-26, .nxq .nxq-slide {
  max-width: 600px !important; width: 100% !important; height: auto !important; margin: 0 auto !important;
  padding: 0 0 12px !important; background: transparent; display: block; position: relative;
}
.nxq .form-content, .nxq .form-content-3 { width: 100% !important; padding: 0 !important; margin: 0 !important; }
.nxq .form-title-wrap-copy, .nxq .form-title-wrap-copy-2 { margin: 0 0 22px !important; padding: 0 44px; display: block; }
.nxq .form-section-title, .nxq .form-section-title-3, .nxq .nxq-title {
  font-family: Geist, Inter, sans-serif; color: var(--q-navy); font-weight: 650; font-size: 27px; line-height: 1.22;
  letter-spacing: -.01em; text-wrap: balance; margin: 0 auto 8px; padding: 0; width: auto; text-align: center;
}
.nxq .nxq-title:focus, .nxq .form-section-title:focus, .nxq .form-section-title-3:focus { outline: none; }
.nxq .nxq-slide > .nxq-title:first-child { padding: 0 44px; }
.nxq #SLIDEID25 .form-title-wrap-copy-2 { padding: 0 44px; }
.nxq .nxq-lead { font-size: 17px; line-height: 1.55; color: var(--q-muted); max-width: 520px; margin: 0 auto 22px; text-wrap: pretty; }

/* Back button: top-left of the question */
.nxq .nx-back {
  position: absolute; top: 2px; left: 12px; z-index: 5; width: 40px; height: 40px; display: grid; place-items: center;
  border: 2px solid var(--q-navy); border-radius: 50%; background: #fff; color: var(--q-navy); cursor: pointer;
  transition: transform .2s var(--q-ease), box-shadow .2s var(--q-ease), opacity .25s ease;
}
.nxq .nx-back[hidden] { display: none; }
@media (hover: hover) { .nxq .nx-back:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--q-navy); } }
/* No cursor flicker: things that lift on hover can slide out from under a mouse resting on their edge, drop back,
   lift again, and the cursor flips between the arrow and the hand. While hovered (and pressed), an invisible area
   stretches back over the spot they moved from, so the mouse stays on them. Answer cards use a span (.nxq-hit),
   because their ::before and ::after hold the export's clearfix. */
.nxq .nx-back:hover::before, .nxq .nx-next:hover::before, .nx-pop-actions button:hover::before, .nxq .nx-act:hover::before {
  content: ""; position: absolute; inset: -4px -6px -6px -4px;
}
.nx-pop-actions button { position: relative; }
.nxq .nxq-hit { position: absolute; inset: -4px -6px -6px -4px; display: none; }
.nxq .nxq-opt:hover > .nxq-hit { display: block; }

/* ---------- Next button (with the "take a moment" fill) ---------- */
.nxq .nx-nav {
  position: sticky; bottom: 0; z-index: 120; /* above the plan step's phase boxes (the export gives them z-index 99) */ display: flex; justify-content: center; padding: 14px 0 18px;
  background: linear-gradient(to top, #fff 72%, rgba(255, 255, 255, 0));
  transition: opacity .3s ease, transform .3s var(--q-ease);
}
.nxq .nx-nav[hidden] { display: flex; opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; }
.nxq .nx-next {
  position: relative; min-width: 240px; height: 56px; padding: 0 30px; border: 2px solid var(--q-navy);
  border-radius: 999px; background: var(--q-navy); color: var(--q-yellow); font: 700 17px/1 Geist, Inter, sans-serif;
  letter-spacing: .02em; cursor: pointer; box-shadow: var(--q-shadow);
  transition: transform .2s var(--q-ease), box-shadow .2s var(--q-ease), background-color .25s ease, color .25s ease;
}
.nxq .nx-next-label { position: relative; z-index: 1; }
.nxq .nx-next-fill { display: none; }
html body.nxq { overflow-x: clip !important; }
/* While a step's minimum time runs: a thin line grows from the centre towards the screen edges, then becomes the button */
.nxq .nx-line {
  position: absolute; left: 50%; top: 50%; width: 100vw; height: 2px; border-radius: 999px; background: #282858; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scaleX(0); transform-origin: center;
}
.nxq .nx-nav[data-mode="line"] .nx-line { opacity: .5; }
.nxq .nx-nav[data-mode="line"] .nx-next { opacity: 0; pointer-events: none; }
.nxq .nx-line.is-morph {
  opacity: 1 !important; box-shadow: var(--q-shadow);
  transition: width .58s cubic-bezier(.65, 0, .35, 1), height .58s cubic-bezier(.65, 0, .35, 1), opacity .25s ease, background-color .3s ease, box-shadow .3s ease .3s;
}
.nxq .nx-line.is-morph.is-outline { background: #fff; box-shadow: inset 0 0 0 2px #282858; }
.nxq .nx-line.is-nudge { animation: nxq-line-nudge .45s ease; }
@keyframes nxq-line-nudge { 30% { opacity: 1; height: 4px; } }
.nxq .nx-nav[data-mode="next"] .nx-next-label { animation: nxq-fade .35s ease backwards; }
.nxq .nx-next[aria-disabled="true"] { background: #fff; color: var(--q-navy); box-shadow: none; cursor: default; }
.nxq .nx-next[aria-disabled="true"] .nx-next-fill { opacity: .9; }
.nxq .nx-next.is-checking { cursor: progress; }
@media (hover: hover) { .nxq .nx-next[aria-disabled="false"]:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--q-navy); } }
.nxq .nx-next[aria-disabled="false"]:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--q-navy); }
.nxq .nx-next.is-nudge { animation: nxq-nudge .38s ease; }
@keyframes nxq-nudge { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }

/* ---------- After an answer: the button area shows a filling ring (while a fast answer waits) or, now and then, a tick ---------- */
.nxq .nx-nav[data-mode="status"] .nx-next { display: none; }
.nxq .nx-nav:not([data-mode="status"]) .nx-ok { display: none; }
.nxq .nx-ok { width: 56px; height: 56px; display: grid; place-items: center; }
.nxq .nx-ok svg { overflow: visible; }
.nxq .nx-ok-bg { fill: #fff; stroke: #e2e2ec; stroke-width: 4; transition: fill .25s ease, stroke .25s ease; }
.nxq .nx-ok-ring { fill: none; stroke: var(--q-navy); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 157.08; stroke-dashoffset: 157.08; transform: rotate(-90deg); transform-origin: 28px 28px; }
.nxq .nx-ok-tick { fill: none; stroke: var(--q-navy); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; }
.nxq .nx-ok.is-in { animation: nxq-ok-in .35s cubic-bezier(.3, 1.5, .5, 1); }
.nxq .nx-ok.is-done svg { animation: nxq-ok-done .5s cubic-bezier(.3, 1.6, .5, 1); }
.nxq .nx-ok.is-done .nx-ok-bg { fill: var(--q-yellow); stroke: var(--q-navy); }
.nxq .nx-ok.is-done .nx-ok-ring { opacity: 0; }
.nxq .nx-ok.is-done .nx-ok-tick { stroke-dashoffset: 0; transition: stroke-dashoffset .38s var(--q-ease) .06s; }
@keyframes nxq-ok-in { from { opacity: 0; transform: scale(.6); } }
@keyframes nxq-ok-done { 40% { transform: scale(1.14); } }

/* ---------- Toast (gentle or firm notes, e.g. when someone clicks through too fast) ---------- */
.nx-toast {
  position: relative; z-index: 119; /* under the sticky Next button (120), so a scrolled note can never cover it */ box-sizing: border-box; width: min(440px, calc(100% - 32px)); margin: 0 auto; max-height: 0; overflow: hidden;
  padding: 0 18px; border: 0 solid #282858; border-radius: 16px; background: #282858; color: #fff; box-shadow: 4px 4px 0 #fedb71;
  font: 500 15px/1.5 Geist, Inter, sans-serif; text-align: left;
  opacity: 0; visibility: hidden;
  transition: max-height .35s ease, padding .35s ease, margin .35s ease, border-width .35s ease, opacity .25s ease, visibility .35s;
}
.nx-toast.is-show { max-height: 260px; padding: 14px 18px; margin: 14px auto 2px; border-width: 2px; opacity: 1; visibility: visible; }
.nx-toast.is-firm { background: #fff; color: #282858; box-shadow: 4px 4px 0 #fb7d7e; border-color: #282858; }
.nx-toast strong { display: block; margin-bottom: 2px; }

/* ---------- Answer cards ---------- */
.nxq .checkbox_wrap { display: grid !important; gap: 12px; width: 100% !important; max-width: 560px !important; margin: 0 auto !important; padding: 0 !important; justify-content: stretch !important; justify-items: stretch; align-items: stretch !important; grid-template-columns: 1fr !important; }
.nxq .nxq-opt { cursor: pointer; -webkit-tap-highlight-color: transparent; max-width: none !important; min-width: 0 !important; }
.nxq .nxq-opt input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none; }
.nxq .form12_checkbox_field.energy, .nxq .form12_checkbox_field.energy.grey, .nxq .form12_checkbox_field.energy.yellow, .nxq .form12_checkbox_field.energy.pink {
  display: flex !important; flex-flow: row nowrap; align-items: center; gap: 14px; width: 100% !important; min-width: 0; height: auto !important;
  min-height: 62px; margin: 0 !important; padding: 15px 18px !important; background: #fff !important; filter: none !important;
  border: 2px solid var(--q-navy) !important; border-radius: 16px !important; box-shadow: 0 0 0 var(--q-navy) !important; text-align: left;
  transition: transform .24s var(--q-ease), box-shadow .24s var(--q-ease), background-color .2s ease;
}
.nxq .form12_checkbox_field.energy .checkbox-title, .nxq .form12_checkbox_field.energy .checkbox-title._24px {
  display: block !important; margin: 0 !important; padding: 0 !important; text-align: left !important; letter-spacing: 0;
  font: 500 16.5px/1.45 Geist, Inter, sans-serif !important; color: var(--q-navy) !important; flex: 1;
}
.nxq .nxq-dot {
  flex: none; width: 24px; height: 24px; border: 2px solid var(--q-navy); border-radius: 50%; background: #fff; display: grid; place-items: center;
  transition: background-color .2s ease, transform .25s var(--q-ease);
}
.nxq .nxq-dot svg { width: 14px; height: 14px; color: var(--q-yellow); opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .25s var(--q-ease); }
@media (hover: hover) {
  .nxq .form12_checkbox_field.energy:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--q-navy) !important; background: #fffdf4 !important; }
}
.nxq .nxq-opt:active { transform: translate(1px, 1px) !important; }
.nxq .nxq-opt.is-selected.energy, .nxq .form12_checkbox_field.energy.is-selected { background: var(--q-yellow) !important; box-shadow: 4px 4px 0 var(--q-navy) !important; transform: translate(-2px, -2px); }
.nxq .nxq-opt.is-selected .nxq-dot { background: var(--q-navy); transform: scale(1.06); }
.nxq .nxq-opt.is-selected .nxq-dot svg { opacity: 1; transform: none; }
.nxq .nxq-opt:has(input:focus-visible) { outline: 3px solid #4f46e5; outline-offset: 3px; }

/* Answers arrive one after another instead of all at once */
.nxq .w-slide.is-shown .nxq-opt, .nxq .w-slide.is-shown .nxq-anim {
  animation: nxq-rise .58s var(--q-ease) backwards; animation-delay: calc(180ms + var(--i, 0) * 85ms);
}
@keyframes nxq-rise { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Step 1: who is taking the quiz ---------- */
.nxq .nxq-intro { color: var(--q-muted) !important; font-size: 17px !important; line-height: 1.55 !important; max-width: 520px; margin: 10px auto 6px !important; opacity: 1 !important; }
.nxq #SLIDEID0 .form-section-title { font-size: 30px; margin-bottom: 4px; }
.nxq #SLIDEID0 .form-section-title.light { font-size: 15px; font-weight: 500; color: var(--q-muted); margin-top: 6px; opacity: 1; } /* Webflow's 67% made it 3.6:1 on wide screens */
.nxq #SLIDEID0 .checkbox_wrap { max-width: 440px !important; margin: 22px auto 18px !important; }
.nxq #SLIDEID0 .grid-9 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px; width: 100%; margin: 0 !important; grid-auto-flow: row !important; place-items: stretch !important; }
.nxq #SLIDEID0 .grid-9 > label { grid-area: auto !important; justify-self: stretch !important; align-self: stretch !important; }
.nxq .form12_checkbox_field.male, .nxq .form12_checkbox_field.female {
  width: 100% !important; height: 172px !important; margin: 0 !important; padding: 16px 12px 60px !important; position: relative;
  background: #fff !important; border: 2px solid var(--q-navy) !important; border-radius: 18px !important; overflow: hidden;
  box-shadow: 4px 4px 0 var(--q-navy) !important; filter: none !important;
  transition: transform .24s var(--q-ease), box-shadow .24s var(--q-ease), background-color .2s ease;
}
.nxq .form12_checkbox_field.male .text-wrapper-2, .nxq .form12_checkbox_field.female .text-wrapper-2 { background: var(--q-navy) !important; height: 48px; border-radius: 0; justify-content: center !important; }
.nxq .form12_checkbox_field.male .flex-horozntal, .nxq .form12_checkbox_field.female .flex-horozntal { width: 100%; justify-content: center; }
.nxq .form12_checkbox_field.female .checkbox-title-copy, .nxq .form12_checkbox_field.male .checkbox-title-copy { color: #fff !important; font: 700 15px/1 Geist, Inter, sans-serif !important; letter-spacing: .1em; }
.nxq .image-45, .nxq .image-45-copy { width: 88px !important; height: 88px !important; max-width: none !important; margin: 0 auto !important; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
@media (hover: hover) { .nxq .form12_checkbox_field.male:hover .image-45, .nxq .form12_checkbox_field.female:hover .image-45-copy { transform: translateY(-3px) rotate(-3deg); } }
/* The who-is-taking-it cards clip their picture to the rounded frame, so an area outside them would be cut off: on hover
   they stay put (no cursor flicker at the edge) and lift by their shadow and the picture's wiggle instead. */
@media (hover: hover) { .nxq .form12_checkbox_field.male:hover, .nxq .form12_checkbox_field.female:hover { box-shadow: 6px 6px 0 var(--q-navy) !important; } }
.nxq .form12_checkbox_field.male.is-selected, .nxq .form12_checkbox_field.female.is-selected { background: var(--q-yellow) !important; }
.nxq #SLIDEID0 .light-copy-copy { font-size: 13px; line-height: 1.55; color: var(--q-muted); max-width: 480px; margin: 0 auto 10px; }

/* ---------- Age: figures that grow ---------- */
.nxq .checkbox_wrap.nxq-ages { grid-template-columns: repeat(4, 1fr) !important; gap: 12px; }
.nxq .form12_checkbox_field.age.nxq-opt {
  display: flex !important; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; width: 100% !important;
  height: 170px !important; min-height: 0; margin: 0 !important; padding: 14px 8px 12px !important; background: #fff !important; filter: none !important;
  border: 2px solid var(--q-navy) !important; border-radius: 18px !important;
  transition: transform .24s var(--q-ease), box-shadow .24s var(--q-ease), background-color .2s ease;
}
.nxq .form12_checkbox_field.age .checkbox-title { padding: 0 !important; font: 700 18px/1.1 Geist, Inter, sans-serif !important; color: var(--q-navy) !important; }
.nxq .nxq-age-years { font-size: 12px; font-weight: 500; color: var(--q-muted); margin-top: -6px; }
.nxq .nxq-fig { display: block; transition: transform .35s var(--q-ease); }
@media (hover: hover) { .nxq .form12_checkbox_field.age:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--q-navy) !important; } .nxq .form12_checkbox_field.age:hover .nxq-fig { transform: translateY(-3px); } }
.nxq .form12_checkbox_field.age.is-selected { background: var(--q-yellow) !important; box-shadow: 4px 4px 0 var(--q-navy) !important; transform: translate(-2px, -2px); }

/* ---------- Spectrum scale (tap or drag) ---------- */
.nxq .nxq-hidden-list { display: none !important; }
.nxq .nx-scale { max-width: 560px; margin: 6px auto 0; user-select: none; }
.nxq .nx-scale-ends { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--q-muted); margin-bottom: 4px; }
.nxq .nx-scale-track { position: relative; height: 76px; touch-action: none; cursor: pointer; }
.nxq .nx-scale-line, .nxq .nx-scale-fill { position: absolute; top: 30px; left: 8%; height: 8px; border-radius: 4px; }
.nxq .nx-scale-line { right: 8%; background: linear-gradient(90deg, #ffe0de, #fff3c4 50%, #d9f6ea); border: 2px solid var(--q-navy); top: 28px; height: 12px; border-radius: 8px; }
.nxq .nx-scale-stop {
  position: absolute; top: 34px; width: 34px; height: 34px; margin: 0; padding: 0; border: 3px solid var(--q-navy); border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%); cursor: pointer; display: grid; place-items: center;
  transition: transform .25s var(--q-ease), background-color .2s ease, box-shadow .2s ease;
}
.nxq .nx-scale-stop::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--q-navy); transform: scale(0); transition: transform .25s var(--q-ease); }
.nxq .nx-scale-stop[aria-checked="true"] { background: var(--q-yellow); transform: translate(-50%, -50%) scale(1.28); box-shadow: 3px 3px 0 var(--q-navy); }
.nxq .nx-scale-stop[aria-checked="true"]::after { transform: scale(1); }
@media (hover: hover) { .nxq .nx-scale-stop:hover { transform: translate(-50%, -50%) scale(1.12); } .nxq .nx-scale-stop[aria-checked="true"]:hover { transform: translate(-50%, -50%) scale(1.28); } }
.nxq .nx-scale-stop:focus-visible { outline: 3px solid #4f46e5; outline-offset: 4px; }
.nxq .nx-scale-tick { position: absolute; top: 61px; transform: translateX(-50%); width: 76px; font-size: 12.5px; line-height: 1.15; font-weight: 600; color: var(--q-navy); text-align: center; white-space: normal; transition: color .2s ease; }
.nxq .nx-scale-track { height: 96px; }
.nxq .nx-scale-desc {
  min-height: 74px; margin: 6px 0 0; padding: 14px 18px; border: 2px dashed #b8b8cc; border-radius: 16px; background: #fafaf7;
  font-size: 16.5px; line-height: 1.5; color: var(--q-muted); display: grid; place-items: center; text-align: center;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.nxq .nx-scale-desc.is-set { border-style: solid; border-color: var(--q-navy); background: var(--q-yellow-soft); color: var(--q-navy); font-weight: 500; }

/* ---------- Icon cards ---------- */
.nxq .checkbox_wrap.nxq-iconcards { grid-template-columns: repeat(3, 1fr) !important; }
.nxq .nxq-iconcards .form12_checkbox_field.energy { flex-direction: column !important; align-items: center; justify-content: flex-start; text-align: center; padding: 18px 14px 16px !important; gap: 10px; }
.nxq .nxq-iconcards .nxq-dot { display: none; }
.nxq .nxq-iconcards .checkbox-title { text-align: center !important; font-size: 14.5px !important; color: var(--q-muted) !important; }
.nxq .nxq-ic { width: 54px; height: 54px; border-radius: 16px; border: 2px solid var(--q-navy); display: grid; place-items: center; background: var(--c, #fff); color: var(--q-navy); transition: transform .3s var(--q-ease); }
.nxq .nxq-head { display: block; font: 700 17px/1.25 Geist, Inter, sans-serif; color: var(--q-navy); }
@media (hover: hover) { .nxq .nxq-iconcards .nxq-opt:hover .nxq-ic { transform: rotate(-6deg) scale(1.06); } }

/* ---------- Quote cards ---------- */
.nxq .nxq-quotes .form12_checkbox_field.energy { align-items: flex-start; border-radius: 18px 18px 18px 4px !important; }
.nxq .nxq-quotes .nxq-dot { display: none; }
.nxq .nxq-qmark { flex: none; font: 800 40px/0.8 Georgia, serif; color: var(--q-coral); margin-top: 4px; }
.nxq .nxq-quotes .checkbox-title { font-style: italic; }

/* ---------- Tiles (skills) ---------- */
.nxq .checkbox_wrap.nxq-tiles { grid-template-columns: repeat(3, 1fr) !important; }
.nxq .nxq-tiles .form12_checkbox_field.energy { flex-direction: column !important; text-align: center; padding: 20px 12px 18px !important; gap: 12px; }
.nxq .nxq-tiles .nxq-dot { display: none; }
.nxq .nxq-tiles .checkbox-title { text-align: center !important; font-weight: 600 !important; }

/* ---------- Chips (where did you hear about us) ---------- */
.nxq .checkbox_wrap.nxq-chips { grid-template-columns: 1fr 1fr !important; }
.nxq .nxq-chips .form12_checkbox_field.energy { min-height: 58px; padding: 12px 14px !important; gap: 10px; }
.nxq .nxq-chips .nxq-dot { display: none; }
.nxq .nxq-chips .nxq-ic { width: 36px; height: 36px; border-radius: 10px; }
.nxq .nxq-chips .checkbox-title { font-size: 15px !important; }

/* ---------- Time per day ---------- */
.nxq .nx-time { max-width: 520px; margin: 0 auto; }
.nxq .nx-time-top { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 4px 0 6px; }
.nxq .nx-clock {
  --m: 10; width: 112px; height: 112px; border-radius: 50%; border: 3px solid var(--q-navy); position: relative; flex: none;
  background: conic-gradient(var(--q-yellow) 0 calc(var(--m) * 6deg), #fff 0); box-shadow: 4px 4px 0 var(--q-navy);
  transition: background .4s ease;
}
.nxq .nx-clock::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--q-navy); }
.nxq .nx-clock-hand { position: absolute; left: 50%; bottom: 50%; width: 3px; height: 42%; margin-left: -1.5px; background: var(--q-navy); border-radius: 2px; transform-origin: bottom center; transform: rotate(calc(var(--m) * 6deg)); transition: transform .5s var(--q-ease); }
.nxq .nx-time-read { text-align: left; }
.nxq .nx-time-read strong { display: block; font: 800 40px/1 'Orbitron Variablefont Wght', Orbitron, sans-serif; color: var(--q-navy); }
.nxq .nx-time-read span { display: block; font-size: 15px; color: var(--q-muted); margin-top: 6px; }
.nxq .nx-time .nx-scale-line { background: #fff; }
.nxq .nx-time .nx-scale-fill { background: var(--q-yellow); top: 28px; height: 12px; border: 2px solid var(--q-navy); border-radius: 8px; transition: width .35s var(--q-ease); }

/* ---------- Text fields ---------- */
.nxq .input-field-wrapper { max-width: 520px; margin: 0 auto; }
.nxq .link-wrapper, .nxq .link-wrapper-2 { position: relative; }
.nxq .text-field, .nxq .text-field-2 {
  width: 100%; height: 60px; margin: 0; padding: 0 18px 0 50px !important; border: 2px solid var(--q-navy) !important; border-radius: 16px !important;
  background: #fff; color: var(--q-navy); font: 500 18px/1 Geist, Inter, sans-serif; text-align: left !important; box-shadow: none !important;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.nxq .text-field-2 { padding-left: 18px !important; text-align: center !important; }
.nxq .text-field:focus, .nxq .text-field-2:focus { outline: none !important; box-shadow: 4px 4px 0 var(--q-navy) !important; }
.nxq .text-field.is-invalid, .nxq .text-field-2.is-invalid { border-color: #d64545 !important; box-shadow: 4px 4px 0 #fb7d7e !important; }
.nxq .image-14 { position: absolute; left: 16px; top: 50%; width: 22px; transform: translateY(-50%); opacity: .75; }
.nxq .nx-field-msg { min-height: 24px; margin: 10px auto 0; max-width: 520px; font-size: 15px; line-height: 1.5; color: #b33a3a; text-align: left; }
.nxq .nx-field-msg:empty { min-height: 0; margin: 0; }
.nxq .nx-field-msg.is-ok { color: var(--q-navy); }
.nxq #nx-name-msg { text-align: center; }
.nxq .nx-hello, .nxq .nx-email-ok {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 2px solid var(--q-navy); border-radius: 999px;
  background: var(--q-mint-soft); color: var(--q-navy); font-weight: 600; box-shadow: 3px 3px 0 var(--q-navy);
  animation: nxq-hello .45s cubic-bezier(.3, 1.5, .5, 1);
}
.nxq .nx-email-ok svg { color: #1f8a63; }
@keyframes nxq-hello { from { opacity: 0; transform: translateY(6px) scale(.9); } }
.nxq .nx-field-msg .nx-suggest { margin: 0 2px; padding: 2px 10px; border: 2px solid var(--q-navy); border-radius: 999px; background: var(--q-yellow); color: var(--q-navy); font: 600 15px Geist, Inter, sans-serif; cursor: pointer; }
.nxq #SLIDEID22 .form-section-title.form { max-width: 520px; margin: 14px auto 0; font-size: 13px !important; line-height: 1.55; color: var(--q-muted); text-align: center; }

/* ---------- Results at a glance: the heading and note type in, then one area at a time, the verdict last ---------- */
.nxq .nx-result { max-width: 560px; margin: 0 auto; }
.nxq .w-slide:not(.is-shown) .nx-area-bar span { width: 0 !important; transition: none !important; }
.nxq .nx-area-bar span { transition: none; }
@keyframes nxq-fade { from { opacity: 0; } }
.nxq #SLIDEID23.is-shown .nx-area { animation: nxq-rise .7s var(--q-ease) backwards; }
.nxq #SLIDEID23.is-shown .nx-area-bar span { transition: width 1.1s cubic-bezier(.35, .1, .25, 1); }
.nxq #SLIDEID23.is-shown .nx-area [data-level] { animation: nxq-fade .55s ease backwards; }
.nxq #SLIDEID23.is-shown .nx-area:nth-of-type(1) { animation-delay: .45s; }
.nxq #SLIDEID23.is-shown .nx-area:nth-of-type(1) .nx-area-bar span { transition-delay: .65s; }
.nxq #SLIDEID23.is-shown .nx-area:nth-of-type(1) [data-level] { animation-delay: 1.5s; }
.nxq #SLIDEID23.is-shown .nx-area:nth-of-type(2) { animation-delay: .75s; }
.nxq #SLIDEID23.is-shown .nx-area:nth-of-type(2) .nx-area-bar span { transition-delay: .95s; }
.nxq #SLIDEID23.is-shown .nx-area:nth-of-type(2) [data-level] { animation-delay: 1.8s; }
.nxq #SLIDEID23.is-shown .nx-area:nth-of-type(3) { animation-delay: 1.05s; }
.nxq #SLIDEID23.is-shown .nx-area:nth-of-type(3) .nx-area-bar span { transition-delay: 1.25s; }
.nxq #SLIDEID23.is-shown .nx-area:nth-of-type(3) [data-level] { animation-delay: 2.1s; }
.nxq #SLIDEID23.is-shown .nx-start { animation: nxq-rise .75s var(--q-ease) 2.1s backwards; }
.nxq #SLIDEID23.is-shown .nx-strength { animation: nxq-rise .6s var(--q-ease) .25s backwards; }

/* ---------- Plan shape: compact, phases arrive one by one, and the unopened ones keep pulsing ---------- */
.nxq #SLIDEID25 .grid-10 { display: block; }
.nxq #SLIDEID25 [data-nx-greeting], .nxq #SLIDEID25 .form-section-title-3-copy { display: inline; font-family: Geist, Inter, sans-serif !important; font-size: 27px; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; color: var(--q-navy); }
@media (max-width: 640px) { .nxq #SLIDEID25 [data-nx-greeting], .nxq #SLIDEID25 .form-section-title-3-copy { font-size: 22px; } .nxq .nxq-slide > .nxq-title:first-child, .nxq #SLIDEID25 .form-title-wrap-copy-2 { padding: 0 34px; } }
.nxq #SLIDEID25 .form-title-wrap-copy-2 { margin-bottom: 10px !important; }
.nxq #SLIDEID25 .input-field-wrapper { max-width: 540px; }
.nxq #overthink-svg-25 { display: block; width: 100%; max-width: 420px; height: auto; max-height: 180px; margin: 0 auto; }
.nxq #SLIDEID25 .after-upgrade { margin: 0 0 2px; }
.nxq #SLIDEID25 .code-embed-11-copy { margin-top: 6px; } /* Webflow pulls it up 20px on phones, under the card's shadow */
.nxq #nexodyne-dashboard-wrapper-2 { margin-bottom: 4px !important; }
.nxq #nexodyne-dashboard-wrapper-2 .nd-grid { padding: 6px 4px !important; }
.nxq #nexodyne-dashboard-wrapper-2 .nd-card.nd-active { min-height: 0 !important; padding: 12px 14px !important; }
.nxq #nexodyne-dashboard-wrapper-2 .nd-card.nd-active .nd-description { margin-top: 8px !important; padding-top: 8px !important; font-size: 13.5px !important; line-height: 1.5 !important; }
.nxq #SLIDEID25 #nexodyne-dashboard-wrapper-2 .nd-grid.nd-expanded-mode .nd-card:not(.nd-active) { min-height: 72px !important; padding: 8px 4px !important; }
.nxq .nx-phase-hint { font-size: 13.5px; font-weight: 600; color: var(--q-muted); margin: 4px 0 6px; letter-spacing: .02em; }
.nxq #SLIDEID25.is-shown #nexodyne-dashboard-wrapper-2 .nd-card { animation: nxq-rise .65s var(--q-ease) backwards; animation-delay: calc(.5s + var(--i, 0) * .26s); }
.nxq #SLIDEID25.is-shown .nx-phase-hint { animation: nxq-fade .6s ease 1.5s backwards; }
/* the cards' own hover look (a 2px lift and a deeper shadow), playing on its own until each phase has been opened once */
.nxq #SLIDEID25.is-shown #nexodyne-dashboard-wrapper-2 .nd-card:not(.nd-active):not(.is-viewed) {
  cursor: pointer;
  animation: nxq-rise .65s var(--q-ease) backwards, nxq-breathe 2.4s ease-in-out infinite;
  animation-delay: calc(.5s + var(--i, 0) * .26s), calc(1.8s + var(--i, 0) * .4s);
}
@keyframes nxq-breathe {
  0%, 100% { transform: translateY(0); box-shadow: 4px 5px 0 #2E3058; background-color: #E6E6E6; }
  50% { transform: translateY(-2px); box-shadow: 5px 7px 0 #2E3058; background-color: #F0F0F0; }
}
@media (hover: hover) { .nxq #nexodyne-dashboard-wrapper-2 .nd-card:not(.nd-active):hover { animation-play-state: paused; } }
.nxq .nd-description .nx-caret, .nxq .nx-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: nxq-caret .8s steps(1) infinite; }
@keyframes nxq-caret { 50% { opacity: 0; } }

/* ---------- Typed text: every letter is in place from the start (no layout jumps), and fades in in turn ---------- */
.nxq .nx-ch { opacity: 0; }
.nxq .nx-ch.on { opacity: 1; }
.nxq .nx-ch.cur { position: relative; }
.nxq .nx-ch.cur::after { content: ""; position: absolute; right: -3px; top: .1em; bottom: .05em; width: 2px; background: currentColor; animation: nxq-caret .8s steps(1) infinite; }
.nxq .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Step 15 illustration: three ideas, one plan ---------- */
.nxq .nx-found { position: relative; max-width: 520px; margin: 8px auto 0; padding-top: 74px; }
.nxq .nx-found-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; position: relative; z-index: 1; }
.nxq .nx-found-block {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 14px; border: 2px solid var(--q-navy); border-radius: 16px;
  background: var(--c); box-shadow: 4px 4px 0 var(--q-navy); color: var(--q-navy); opacity: 0; transform: translateY(-36px) rotate(-4deg);
}
.nxq .nx-found-block strong { font-size: 16px; line-height: 1.2; }
.nxq .nx-found-block small { font-size: 12.5px; line-height: 1.3; color: #3a3a5c; }
.nxq .nx-found-plan {
  position: absolute; top: 0; left: 50%; display: flex; align-items: center; gap: 10px; padding: 12px 20px; border: 2px solid var(--q-navy);
  border-radius: 999px; background: var(--q-navy); color: var(--q-yellow); font-weight: 700; white-space: nowrap; box-shadow: 4px 4px 0 var(--q-yellow);
  opacity: 0; transform: translate(-50%, -24px);
}
.nxq .nx-found-ground { height: 10px; margin: 14px 6% 0; border-radius: 50%; background: rgba(40, 40, 88, .12); transform: scaleX(.2); opacity: 0; }
.nxq .nx-found.is-built .nx-found-block { animation: nxq-drop .72s cubic-bezier(.3, 1.4, .5, 1) forwards; animation-delay: calc(var(--d) * .2s); }
.nxq .nx-found.is-built .nx-found-ground { animation: nxq-ground .85s var(--q-ease) .25s forwards; }
.nxq .nx-found.is-built .nx-found-plan { animation: nxq-plan .72s cubic-bezier(.3, 1.4, .5, 1) .85s forwards; }
@keyframes nxq-drop { to { opacity: 1; transform: none; } }
@keyframes nxq-ground { to { opacity: 1; transform: none; } }
@keyframes nxq-plan { to { opacity: 1; transform: translate(-50%, 0); } }
.nxq .nx-found.is-static .nx-found-block, .nxq .nx-found.is-static .nx-found-ground { opacity: 1; transform: none; animation: none; }
.nxq .nx-found.is-static .nx-found-plan { opacity: 1; transform: translate(-50%, 0); animation: none; }

/* ---------- Step 22: building the plan ---------- */
.nxq .nx-load { display: grid; gap: 18px; max-width: 520px; margin: 8px auto 0; text-align: left; }
.nxq .nx-load-row { opacity: .35; transition: opacity .5s ease; }
.nxq .nx-load-note { min-height: 20px; margin: 7px 0 0; font-size: 13.5px; color: var(--q-muted); transition: color .3s ease; }
.nxq .nx-load-row.is-done .nx-load-note { color: #1f8a63; font-weight: 600; }
.nxq .nx-load-row.is-on, .nxq .nx-load-row.is-done { opacity: 1; }
.nxq .nx-load-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 600; color: var(--q-navy); }
.nxq .nx-load-head span { flex: 1; }
.nxq .nx-load-pct { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--q-muted); }
.nxq .nx-load-track { height: 18px; border: 2px solid var(--q-navy); border-radius: 999px; background: #fff; overflow: hidden; }
.nxq .nx-load-bar {
  height: 100%; width: 0; border-radius: 999px; background: var(--q-navy);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .14) 0 8px, transparent 8px 16px); background-size: 200% 100%;
  animation: nxq-stripes 1s linear infinite;
}
.nx-pop-open .nxq .nx-load-bar, .nxq.nx-pop-open .nx-load-bar { animation-play-state: paused; }
.nxq .nx-load-row.is-done .nx-load-bar { background: var(--q-mint); animation: none; }
.nxq .nx-load-row.is-done .nx-load-head svg { color: #1f8a63; }
@keyframes nxq-stripes { to { background-position: -45px 0; } }

/* Popup question during the build: fades in and out softly */
.nx-pop { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px; background: rgba(28, 28, 60, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .45s cubic-bezier(.4, 0, .2, 1); }
.nx-pop.is-open { opacity: 1; }
.nx-pop[hidden] { display: none; }
.nx-pop-card {
  width: min(410px, 100%); padding: 24px 22px 22px; border: 2px solid #282858; border-radius: 22px; background: #fff; box-shadow: 8px 8px 0 #282858;
  text-align: center; font-family: Geist, Inter, sans-serif; opacity: 0; transform: translateY(18px) scale(.985);
  transition: opacity .4s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.nx-pop.is-open .nx-pop-card { opacity: 1; transform: none; transition-delay: .06s; }
.nx-pop:not(.is-open) .nx-pop-card { transform: translateY(8px) scale(.99); transition: opacity .3s ease, transform .4s ease; }
.nx-pop-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4a4a68; }
.nx-pop-q { margin: 0 0 20px; font-size: 22px; line-height: 1.3; font-weight: 650; color: #282858; text-wrap: balance; }
.nx-pop-card:focus { outline: none; }
.nx-stop-text { margin: -8px 0 18px; font-size: 16px; line-height: 1.55; color: #3a3a5a; }
.nx-stop-go { display: flex; align-items: center; justify-content: center; height: 52px; border: 2px solid #282858; border-radius: 999px; background: #282858; color: #fedb71; font: 700 16px Geist, Inter, sans-serif; text-decoration: none; }
.nx-stop-go:focus-visible { outline: 3px solid #4f46e5; outline-offset: 3px; }
.nx-stop-wait { margin: 12px 0 0; font-size: 13px; color: #4a4a68; }
.nx-pop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nx-pop-actions button {
  height: 52px; border: 2px solid #282858; border-radius: 999px; font: 700 16px Geist, Inter, sans-serif; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.75,.25,1), box-shadow .25s cubic-bezier(.2,.75,.25,1), background-color .25s ease;
}
.nx-pop-actions button { background: #fff; color: #282858; }
.nx-pop-actions button:focus-visible { outline: 3px solid #4f46e5; outline-offset: 3px; }
@media (hover: hover) { .nx-pop-actions button:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #282858; } }

/* ---------- Step 23: done ---------- */
.nxq .nx-done { padding-bottom: 8px !important; }
.nxq .nx-done-badge { position: relative; width: 96px; height: 96px; margin: 0 auto 10px; }
.nxq .nx-done-ring { fill: var(--q-yellow); stroke: var(--q-navy); stroke-width: 5; }
.nxq .nx-done-tick { fill: none; stroke: var(--q-navy); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; }
.nxq .nx-done:not(.is-intro) .nx-done-tick { stroke-dashoffset: 0; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-badge svg { animation: nxq-pop .65s cubic-bezier(.3, 1.5, .5, 1) .25s backwards; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-tick { animation: nxq-tick .6s var(--q-ease) .8s forwards; }
@keyframes nxq-tick { to { stroke-dashoffset: 0; } }
@keyframes nxq-pop { from { transform: scale(.4); opacity: 0; } }
.nxq .nx-confetti { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.nxq .nx-confetti i { position: absolute; width: 10px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-confetti i { animation: nxq-confetti 1.4s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: calc(1.05s + var(--t) * 1s); }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-kicker, .nxq .w-slide.is-shown .nx-done.is-intro .nx-done-steps li,
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-recap .nx-area, .nxq .w-slide.is-shown .nx-done.is-intro .nx-done-recap .nx-start,
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-note { animation: nxq-rise .72s var(--q-ease) backwards; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-kicker { animation-delay: .6s; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-steps li:nth-child(1) { animation-delay: 1s; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-steps li:nth-child(2) { animation-delay: 1.1s; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-steps li:nth-child(3) { animation-delay: 1.2s; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-steps li:nth-child(4) { animation-delay: 1.3s; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-recap .nx-area-bar span { transition: width 1.45s cubic-bezier(.35, .1, .25, 1); }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-recap .nx-area:nth-of-type(1) { animation-delay: 1.4s; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-recap .nx-area:nth-of-type(1) .nx-area-bar span { transition-delay: 1.6s; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-recap .nx-area:nth-of-type(2) { animation-delay: 1.55s; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-recap .nx-area:nth-of-type(2) .nx-area-bar span { transition-delay: 1.75s; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-recap .nx-area:nth-of-type(3) { animation-delay: 1.7s; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-recap .nx-area:nth-of-type(3) .nx-area-bar span { transition-delay: 1.9s; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-recap .nx-start { animation-delay: 2s; }
.nxq .w-slide.is-shown .nx-done.is-intro .nx-done-note { animation-delay: .4s; }
/* "See my plan": shown at once since 2026-10-17 (the line that grew into the button is no longer used) */
.nxq .nx-done-cta { position: sticky; }
.nxq .nx-cta-line {
  position: absolute; left: 50%; top: 46px; width: 100vw; height: 2px; border-radius: 999px; background: #282858; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scaleX(0); transform-origin: center;
}
.nxq .nx-cta-line.is-growing { opacity: .5; transform: translate(-50%, -50%) scaleX(1); }
.nxq .nx-cta-line.is-morph {
  opacity: 1; transform: translate(-50%, -50%); box-shadow: 5px 5px 0 var(--q-yellow), 5px 5px 0 2px var(--q-navy);
  transition: width .6s cubic-bezier(.65, 0, .35, 1), height .6s cubic-bezier(.65, 0, .35, 1), opacity .25s ease, box-shadow .3s ease .3s;
}
.nxq .nx-done.is-intro .nx-done-cta:not(.is-ready) .nx-act { opacity: 0; pointer-events: none; animation: none; }
.nxq .nx-done-cta.is-ready .nx-cta-line { opacity: 0; transition: opacity .2s ease; }
.nxq .nx-done-cta.is-ready .nx-act { opacity: 1; transition: opacity .3s ease; }
.nxq .nx-done.is-intro .nx-done-cta.is-ready .nx-act, .nxq .nx-done.is-intro .nx-done-cta.is-ready .nx-act::after { animation-delay: .5s; }
@keyframes nxq-confetti {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px + 60px)) rotate(calc(var(--r) * 1deg)); }
}
.nxq .nx-done-kicker { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1f8a63; }
.nxq .nx-done-title { font-size: 30px; }
.nxq .nx-done-praise { margin-bottom: 16px; }
.nxq .nx-done-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 4px; list-style: none; padding: 0; margin: 0 auto 22px; max-width: 560px; }
.nxq .nx-done-steps li { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border: 2px solid var(--q-line); border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--q-muted); background: #fff; }
.nxq .nx-done-steps li span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--q-line); display: grid; place-items: center; }
.nxq .nx-done-steps li.is-done { border-color: var(--q-navy); color: var(--q-navy); background: var(--q-mint-soft); }
.nxq .nx-done-steps li.is-done span { border-color: var(--q-navy); background: var(--q-navy); color: var(--q-yellow); }
.nxq .nx-done-steps li.is-done span svg { width: 12px; height: 12px; }
.nxq .nx-done-recap { text-align: left; margin: 0 auto 8px; }
.nxq .nx-done-recap .nx-result-note { display: none; }
.nxq .nx-done-cta { position: sticky; bottom: 0; z-index: 4; padding: 16px 0 14px; background: linear-gradient(to top, #fff 78%, rgba(255, 255, 255, 0)); }
.nxq .nx-act {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 260px; height: 60px; padding: 0 34px;
  border: 2px solid var(--q-navy); border-radius: 999px; background: var(--q-navy); color: var(--q-yellow); text-decoration: none;
  font: 800 19px/1 Geist, Inter, sans-serif; letter-spacing: .03em; box-shadow: 5px 5px 0 var(--q-yellow), 5px 5px 0 2px var(--q-navy);
  transition: transform .2s var(--q-ease), box-shadow .2s var(--q-ease);
  animation: nxq-act 2.2s ease-in-out 2; /* two pulses on arrival: anything moving for over 5s needs a stop button (WCAG 2.2.2) */
}
.nxq .nx-act::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 3px solid var(--q-yellow); opacity: 0; animation: nxq-ring 2.2s ease-out 2; pointer-events: none; }
@keyframes nxq-act { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes nxq-ring { 0% { opacity: .9; transform: scale(.96); } 70%, 100% { opacity: 0; transform: scale(1.18); } }
@media (hover: hover) { .nxq .nx-act:hover { animation-play-state: paused; transform: translate(-1px, -1px) scale(1.02); } }
.nxq .nx-act:active { transform: translate(2px, 2px); }
.nxq .nx-done-note { margin: 12px auto 0; max-width: 460px; font-size: 13.5px; line-height: 1.5; color: var(--q-muted); }

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  .nxq #nd-quiz-header { padding: 10px 4px 12px; gap: 12px; }
  .nxq .nd-quiz-logo img { height: 26px; }
  .nxq .nx-quiz { padding: 0 14px; }
  .nxq .form-title-wrap-copy, .nxq .form-title-wrap-copy-2 { padding: 0 34px; margin-bottom: 18px !important; }
  .nxq .form-section-title, .nxq .form-section-title-3, .nxq .nxq-title { font-size: 22px; }
  .nxq #SLIDEID0 .form-section-title { font-size: 24px; }
  .nxq .nx-back { left: 0; width: 36px; height: 36px; }
  .nxq .checkbox_wrap.nxq-ages { grid-template-columns: 1fr 1fr !important; }
  .nxq .form12_checkbox_field.age.nxq-opt { height: 150px !important; }
  .nxq .checkbox_wrap.nxq-iconcards { grid-template-columns: 1fr !important; }
  .nxq .nxq-iconcards .form12_checkbox_field.energy { flex-direction: row !important; text-align: left; align-items: center; padding: 14px 16px !important; }
  .nxq .nxq-iconcards .nxq-ic { width: 46px; height: 46px; border-radius: 14px; flex: none; }
  .nxq .nxq-iconcards .checkbox-title { text-align: left !important; }
  .nxq .nxq-iconcards .nxq-iconcard-text { text-align: left; }
  .nxq .checkbox_wrap.nxq-tiles { grid-template-columns: 1fr !important; }
  .nxq .nxq-tiles .form12_checkbox_field.energy { flex-direction: row !important; text-align: left; }
  .nxq .nxq-tiles .checkbox-title { text-align: left !important; }
  .nxq .checkbox_wrap.nxq-chips { grid-template-columns: 1fr !important; }
  .nxq .nx-next { width: 100%; min-width: 0; }
  .nxq .nx-act { width: 100%; min-width: 0; }
  .nxq .nx-found-block small { display: none; }
  .nxq .nx-found-block strong { font-size: 14px; }
  .nxq .nx-time-read strong { font-size: 32px; }
  .nxq .nx-scale-tick { width: 62px; font-size: 11.5px; }
  .nxq .nx-clock { width: 92px; height: 92px; }
  .nxq .nx-done-title { font-size: 25px; }
}

/* "Reduce motion" on the visitor's device: nothing slides, bounces, zooms or loops, but every step still
   fades in, in the same order and at the same unhurried pace. */
@media (prefers-reduced-motion: reduce) {
  .nxq .nx-quiz .w-slide.is-active, .nxq .nx-quiz .w-slide.is-active.from-left,
  .nxq .nx-quiz .w-slide.is-leaving, .nxq .nx-quiz .w-slide.is-leaving.to-right { transform: none; }
  @keyframes nxq-rise { from { opacity: 0; } }
  @keyframes nxq-pop { from { opacity: 0; } }
  @keyframes nxq-ok-in { from { opacity: 0; } }
  @keyframes nxq-ok-done { from { opacity: .6; } }
  @keyframes nxq-hello { from { opacity: 0; } }
  @keyframes nxq-nudge { 50% { opacity: .6; } }
  @keyframes nxq-drop { to { opacity: 1; } }
  @keyframes nxq-ground { to { opacity: 1; } }
  @keyframes nxq-plan { to { opacity: 1; } }
  @keyframes nxq-breathe { 50% { box-shadow: 4px 5px 0 #2E3058, 0 0 0 5px rgba(254, 219, 113, .65); background-color: #F0F0F0; } }
  .nxq #SLIDEID25.is-shown #nexodyne-dashboard-wrapper-2 .nd-card:not(.nd-active):not(.is-viewed) { animation-iteration-count: 1, infinite !important; }
  .nx-pop-card, .nx-pop.is-open .nx-pop-card, .nx-pop:not(.is-open) .nx-pop-card { transform: none; }
  @keyframes nxq-act { 50% { box-shadow: 5px 5px 0 #fedb71, 5px 5px 0 2px #282858, 0 0 0 7px rgba(254, 219, 113, .55); } }
  @keyframes nxq-ring { 0% { opacity: 0; } }
  .nxq .nx-found-block, .nxq .nx-found-ground { transform: none; }
  .nxq .nx-found-plan { transform: translate(-50%, 0); }
  .nxq .nx-load-bar { animation: none; }
  .nxq #overthink-svg-25.active .progress-bar { width: 330px; animation: nxq-fade 1.2s ease backwards, pulse-25 1.5s ease-in-out 1.2s infinite; } /* full at once, fades in */
  .nxq .nx-confetti { display: none; }
  .nx-toast { transition: opacity .3s ease, visibility .3s; } /* the space opens at once, the note fades in */
}

/* ---------- 2026-10-17 (improvement reccomendations/audit.md): price line, "not yet" answers, soft exits, a sharper
   result, one email step, the 12-week shape, and room for the cookie banner ---------- */
.nxq .nxq-price { max-width: 520px; margin: 6px auto 0; font-size: 14px; line-height: 1.45; color: var(--q-muted); text-align: center; }
.nxq .nxq-hint { margin: 8px auto 0; max-width: 600px; font-size: 15px; line-height: 1.45; font-weight: 400; color: var(--q-muted); }
/* "Not yet" answers and the two edge ages: small pills under the main answers */
.nxq .nxq-side { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 560px; margin: 14px auto 0; }
.nxq .nxq-side .nxq-side-opt { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 8px 18px;
  border: 2px dashed #8a8aa8; border-radius: 999px; background: #fff; color: var(--q-navy); text-align: center; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.nxq .nxq-side .nxq-side-opt .checkbox-title { margin: 0 !important; padding: 0 !important; font: 600 15px/1.3 Geist, Inter, sans-serif !important; color: inherit !important; }
.nxq .nxq-side .nxq-side-opt.is-selected { border-style: solid; border-color: var(--q-navy); background: var(--q-yellow); box-shadow: 3px 3px 0 var(--q-navy); }
@media (hover: hover) { .nxq .nxq-side .nxq-side-opt:hover { border-color: var(--q-navy); } }
/* A soft exit: one plain block in the page, under the answers */
.nxq .nxq-exit { max-width: 560px; margin: 18px auto 0; padding: 16px 18px 12px; border: 2px solid var(--q-navy); border-radius: 18px; background: var(--q-yellow-soft); text-align: left; }
.nxq .nxq-exit[hidden] { display: none; }
.nxq .nxq-exit p { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: var(--q-ink); }
.nxq .nxq-exit-links { display: flex; flex-wrap: wrap; gap: 10px; }
.nxq .nxq-exit-go { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 2px solid var(--q-navy); border-radius: 999px; background: var(--q-navy); color: var(--q-yellow); font-weight: 700; line-height: 1.2; text-decoration: none; }
.nxq .nxq-exit-go + .nxq-exit-go { background: #fff; color: var(--q-navy); }
.nxq .nxq-exit-on { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--q-navy); font: 600 15px Geist, Inter, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nxq .nxq-exit-go:focus-visible, .nxq .nxq-exit-on:focus-visible { outline: 3px solid #4f46e5; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .nxq .nxq-exit:not([hidden]) { animation: nxq-rise .45s var(--q-ease); } }
/* The result: a strength first, "Not yet" for an area with no answer, and one thing to try */
.nxq .nx-strength { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--q-mint-soft); color: var(--q-navy); font-size: 15px; font-weight: 600; line-height: 1.45; }
.nxq .nx-strength:empty { display: none; }
.nxq .nx-area.is-notyet [data-level] { color: var(--q-muted); }
.nxq .nx-try { margin: 12px 0 0; padding: 12px 14px; border: 2px dashed var(--q-navy); border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.nxq .nx-try strong { display: block; margin-bottom: 2px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--q-navy); }
.nxq .nx-try span:empty, .nxq .nx-try:has(span:empty) { display: none; }
.nxq .nx-done-recap .nx-strength, .nxq .nx-done-recap .nx-try { display: none; }
/* The ideas step: who makes it */
.nxq .nxq-founder { max-width: 520px; margin: 18px auto 0; font-size: 14px; line-height: 1.5; color: var(--q-muted); }
/* One email step, with the first name optional */
.nxq .nxq-name-label { display: block; max-width: 508px; margin: 18px auto 6px; font-size: 15px; font-weight: 600; color: var(--q-navy); text-align: left; }
.nxq .nxq-name-label span { font-weight: 400; color: var(--q-muted); }
/* The plan shape: three stages (the inline style in audit.html sets three columns for four phases) */
.nxq #nexodyne-dashboard-wrapper-2 .nd-grid.nd-expanded-mode { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* While the cookie banner shows (js/nx-consent.js sets --nxc-h), the buttons stay above it and the page can scroll clear */
html.nxc-open body.nxq { padding-bottom: var(--nxc-h, 0px); }
html.nxc-open .nxq .nx-nav, html.nxc-open .nxq .nx-done-cta { bottom: var(--nxc-h, 0px); }
/* Calm pace (js/nx-quiz.js, checkPace): after an early answer the question is pointed at before any words.
   1st time: the other answers fade back, the question pops and types itself again. 2nd time: also a highlighter on the
   question's lines that pulses twice (2 pulses in under a second: well under WCAG's 3 flashes a second) and a "Read me
   first" sticker on a line of its own above it. With Reduce Motion the pop and the sticker fade in instead. */
.nxq .w-slide.nxq-attn .checkbox_wrap .nxq-opt:not(.is-selected), .nxq .w-slide.nxq-attn .nxq-side .nxq-opt:not(.is-selected),
.nxq .w-slide.nxq-attn .nx-scale, .nxq .w-slide.nxq-attn .nx-time-top, .nxq .w-slide.nxq-attn .nxq-hint { opacity: .38; transition: opacity .25s ease; }
.nxq .w-slide .checkbox_wrap .nxq-opt, .nxq .w-slide .nx-scale { transition: opacity .35s ease; }
.nxq .form-section-title.nxq-attn-pop { animation: nxq-attn-pop .45s cubic-bezier(.3, 1.45, .5, 1); }
@keyframes nxq-attn-pop { 0% { transform: none; } 40% { transform: scale(1.045) translateY(-3px); } 100% { transform: none; } }
.nxq .form-section-title .nxq-hl {
  background-color: var(--q-yellow); border-radius: .18em; padding: 0 .16em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: nxq-attn-blink .9s ease-in-out .15s 1 both;
}
@keyframes nxq-attn-blink { 0%, 50% { background-color: var(--q-yellow-soft); } 25%, 75%, 100% { background-color: var(--q-yellow); } }
.nxq .nxq-sticker {
  display: block; width: max-content; margin: 0 auto 10px; padding: 3px 10px; border: 2px solid var(--q-navy); border-radius: 8px;
  background: var(--q-coral); color: var(--q-navy); box-shadow: 2px 2px 0 var(--q-navy); font: 800 12px/1.25 Geist, Inter, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; transform: rotate(-4deg);
  animation: nxq-sticker .5s cubic-bezier(.3, 1.6, .5, 1) .2s backwards;
}
@keyframes nxq-sticker { from { opacity: 0; transform: rotate(-30deg) scale(.3); } }
@media (prefers-reduced-motion: reduce) {
  @keyframes nxq-attn-pop { 0% { opacity: .25; } 100% { opacity: 1; } }
  @keyframes nxq-sticker { from { opacity: 0; } }
}
/* The hidden answer inputs carry Webflow's class ms-hide, whose rule loads a placeholder picture from Webflow's CDN
   (d3e54v103j8qbb.cloudfront.net) for every visitor. The inputs are invisible, so the picture is dropped and the quiz
   asks nothing from Webflow (legal memo 4.18: Webflow no longer sees visitors). */
.nxq .ms-hide { background-image: none !important; }