:root {
  --ink: #fffafd;
  --muted: #c9bfd2;
  --muted-2: #978ba3;
  --night: #12081f;
  --night-2: #1a0c2c;
  --surface: rgba(38, 19, 59, 0.78);
  --surface-solid: #241239;
  --line: rgba(255, 255, 255, 0.12);
  --orange: #fb7434;
  --pink: #e8348e;
  --violet: #652aeb;
  --green: #58d6a9;
  --danger: #ff7896;
  --gradient: linear-gradient(105deg, var(--orange) 0%, var(--pink) 52%, var(--violet) 100%);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 30px 90px rgba(7, 2, 15, 0.42);
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--night); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }

.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; transform: translateY(-150%); padding: 10px 14px; color: #181020; background: white; border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky; top: 0; z-index: 10; height: 76px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 72px); border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(24, 10, 40, .82); backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; font-size: 18px; font-weight: 800; font-style: italic; line-height: 1; text-decoration: none; border: 2px solid rgba(255,255,255,.85); border-radius: 7px; box-shadow: 0 0 0 2px #191020, 0 0 0 3px rgba(251,116,52,.55); }
.brand strong { padding: 3px 5px; color: white; background: var(--violet); border-radius: 3px; }
.header-link { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.header-link:hover { color: white; }

.calculator-shell { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; background: radial-gradient(circle at 82% 16%, rgba(232, 52, 142, .15), transparent 29%), radial-gradient(circle at 8% 78%, rgba(101, 42, 235, .18), transparent 33%), linear-gradient(145deg, #1b0b2d 0%, #11071e 64%, #190b28 100%); }
.calculator-shell::before { content: ""; position: absolute; z-index: -2; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 70%); }
.ambient { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.ambient-one { width: 420px; height: 420px; top: 8%; right: -260px; background: radial-gradient(circle, rgba(251,116,52,.18), transparent 68%); }
.ambient-two { width: 320px; height: 320px; bottom: 4%; left: -200px; background: radial-gradient(circle, rgba(101,42,235,.27), transparent 68%); }

.experience, .experience.is-wide { width: min(calc(100% - 200px), 1400px); min-height: 100svh; margin: 0 auto; padding: 40px 0; display: flex; flex-direction: column; justify-content: center; }
.experience.has-progress { position: relative; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr); align-content: stretch; justify-content: stretch; overflow: hidden; padding-top: 12px; padding-bottom: 108px; }
.panel { position: relative; width: 100%; margin-inline: auto; }
.experience.is-wide .panel { width: 100%; }
.experience.has-progress .panel { min-height: 0; display: flex; flex-direction: column; justify-content: safe center; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 34px 0 32px; scrollbar-color: rgba(232,52,142,.45) transparent; scrollbar-width: thin; }
.experience.has-progress .panel::-webkit-scrollbar { width: 5px; }
.experience.has-progress .panel::-webkit-scrollbar-track { background: transparent; }
.experience.has-progress .panel::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(232,52,142,.45); }
.experience.has-progress.has-panel-overflow:not(.is-panel-scroll-end) .panel { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 56px), transparent 100%); }
.experience.has-progress:has(.insights-panel) { height: auto; min-height: 100svh; grid-template-rows: 72px auto; overflow: visible; padding-bottom: 56px; }
.experience.has-progress:has(.insights-panel) .insights-panel { justify-content: flex-start; overflow: visible; padding-bottom: 20px; -webkit-mask-image: none !important; mask-image: none !important; }
.experience.has-progress .panel > form { min-height: 0; flex: 0 0 auto; display: flex; flex-direction: column; }
.panel:has(.question-counter) { --panel-enter-duration: .64s; --content-enter-duration: .72s; }
.panel-enter { animation: panel-in var(--panel-enter-duration, .48s) cubic-bezier(.2,.75,.2,1) both; }
@keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }
.panel-enter > :not(form):not(.actions):not([aria-hidden="true"]),
.panel-enter > form > :not(.actions) {
  animation: content-slide-left var(--content-enter-duration, .52s) cubic-bezier(.2,.78,.2,1) both;
}
@keyframes content-slide-left {
  from { opacity: 0; transform: translateX(52px); }
  to { opacity: 1; transform: translateX(0); }
}

.section-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: #ffb066; font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.section-eyebrow > span { display: block; width: 22px; height: 2px; background: var(--gradient); }
h1 { max-width: 950px; margin: 0; font-size: clamp(40px, 6.1vw, 76px); font-weight: 700; line-height: 1.04; letter-spacing: -.052em; text-wrap: balance; }
h1[tabindex="-1"]:focus { outline: none; }
.gradient-text { color: transparent; background: var(--gradient); background-clip: text; -webkit-background-clip: text; font-weight: inherit; }
.lede { max-width: 720px; margin: 26px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 21px); line-height: 1.65; }
.lede.compact { margin-top: 18px; font-size: 17px; }
.lede strong { color: white; }

.hero-grid { position: absolute; z-index: -1; width: 560px; height: 560px; right: -180px; top: -200px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255,255,255,.13) 0 1px, transparent 1px 48px); opacity: .35; }
.hero-orbit { position: absolute; z-index: -1; border: 1px solid rgba(232,52,142,.3); border-radius: 50%; }
.orbit-one { width: 12px; height: 12px; top: 25px; right: 125px; background: var(--pink); box-shadow: 0 0 22px var(--pink); }
.orbit-two { width: 16px; height: 16px; top: 180px; right: -14px; background: var(--orange); box-shadow: 0 0 28px var(--orange); }
.intro-meta { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 28px; color: #e4dce8; font-size: 14px; }
.intro-meta span { display: flex; align-items: center; gap: 8px; }
.intro-meta .icon { width: 18px; color: #ff9b5f; }
.intro-start { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 38px; }
.intro-start > span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.intro-start > span .icon { width: 18px; color: #ff9b5f; }
.volume-privacy-note { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--green); font-size: 12px; font-weight: 650; line-height: 1.4; }
.volume-privacy-note .icon { flex: 0 0 auto; width: 16px; color: var(--green); }
.trust-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 62px; color: var(--muted-2); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.trust-line i { width: 3px; height: 3px; border-radius: 50%; background: var(--pink); }

.actions { width: 100%; min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin: 38px auto 0; }
.experience.has-progress > .actions { position: fixed; z-index: 20; left: 50%; bottom: 40px; width: min(calc(100% - 200px), 1400px); min-height: 52px; margin: 0; padding: 0; transform: translateX(-50%); }
.actions .button-primary { order: 2; flex: 0 0 260px; width: 260px; }
.actions .button-secondary { order: 1; flex: 0 0 260px; width: 260px; }
.actions:has(> .button:nth-child(2):last-child) > .button { flex: 1 1 0; width: auto; }
.button-placeholder { order: 2; visibility: hidden; pointer-events: none; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 22px; border-radius: var(--radius-sm); border: 0; font-weight: 650; text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.button .icon { width: 20px; transition: transform .2s ease; }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.actions .button:hover:not(:disabled) { transform: none; }
.button:hover:not(:disabled) .icon { transform: translateX(3px); }
.button:focus-visible, .option-card:has(input:focus-visible), input:focus-visible, select:focus-visible, .restart-button:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.button-primary { color: #1b1120; background: #fdfcfe; box-shadow: 0 12px 34px rgba(232,52,142,.17); }
.button-primary:hover:not(:disabled) { box-shadow: 0 16px 40px rgba(232,52,142,.28); }
.button-primary:disabled { opacity: .45; cursor: not-allowed; }
.button-secondary { color: var(--muted); background: transparent; border: 1px solid var(--line); }
.button-secondary:hover { color: white; border-color: rgba(232,52,142,.55); background: rgba(255,255,255,.04); }

.progress-state { width: 100%; height: 52px; margin: 0; }
.progress-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 42px); margin: 0; padding: 0; list-style: none; }
.progress-steps li { position: relative; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 2px 9px; color: var(--muted-2); transition: color .25s ease; }
.progress-steps li::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-radius: 8px; background: rgba(255,255,255,.08); content: ""; transition: background .25s ease, box-shadow .25s ease; }
.step-marker { flex: 0 0 auto; color: inherit; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.step-copy { min-width: 0; }
.step-copy strong { overflow: hidden; display: block; font-size: 13px; font-weight: 750; letter-spacing: .045em; text-overflow: ellipsis; text-transform: uppercase; }
.progress-step-lock { min-height: 0; margin: 0; padding: 0; color: inherit; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.progress-step-lock:hover { color: #e7dff0; }
.progress-step-lock:focus-visible { border-radius: 4px; outline: 2px solid white; outline-offset: 4px; }
.step-copy.has-insight-rotation { position: relative; height: 15px; overflow: visible; perspective: 180px; }
.step-copy.has-insight-rotation > strong { transform-origin: center bottom; animation: insights-title-cycle 6s ease-in-out infinite; }
.progress-problem-count { position: absolute; inset: 2px auto auto 0; display: inline-flex; align-items: center; gap: 5px; color: #ff91a8; font-size: 9px; font-weight: 750; letter-spacing: .015em; line-height: 1; white-space: nowrap; transform-origin: center top; animation: insights-problem-cycle 6s ease-in-out infinite; }
.progress-problem-count i { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: #ff7896; box-shadow: 0 0 10px rgba(255,120,150,.55); }
.problem-count-compact { display: none; }
.step-copy.has-new-problem { animation: progress-problem-pop 1.15s cubic-bezier(.16,1,.3,1) both; }
.progress-steps li:has(.progress-problem-count.is-new)::after { animation: progress-problem-line 1.15s ease-out both; }
@keyframes insights-problem-cycle { 0%, 42% { opacity: 1; transform: rotateX(0); } 48%, 94% { opacity: 0; transform: rotateX(-88deg); } 100% { opacity: 1; transform: rotateX(0); } }
@keyframes insights-title-cycle { 0%, 42% { opacity: 0; transform: rotateX(88deg); } 48%, 94% { opacity: 1; transform: rotateX(0); } 100% { opacity: 0; transform: rotateX(-88deg); } }
@keyframes progress-problem-pop { 0% { opacity: 0; transform: translateY(5px) scale(.82); } 32% { opacity: 1; transform: translateY(0) scale(1.12); text-shadow: 0 0 16px rgba(255,120,150,.7); } 62% { transform: scale(.97); } 100% { opacity: 1; transform: none; text-shadow: none; } }
@keyframes progress-problem-line { 0%, 100% { box-shadow: none; } 35% { background: #ff7896; box-shadow: 0 0 18px rgba(255,120,150,.78); } }
.progress-steps li.is-complete { color: #bda9e8; }
.progress-steps li.is-complete::after { background: rgba(126,71,226,.72); }
.progress-steps li.is-active { color: white; }
.progress-steps li.is-active .step-marker { color: #ffad69; }
.progress-steps li.is-active::after { background: var(--gradient); box-shadow: 0 0 18px rgba(232,52,142,.35); }
.progress-steps li.is-upcoming { color: rgba(190,174,200,.48); }

form { margin-top: 38px; }
.field-group { margin-top: 24px; }
.field-group:first-child { margin-top: 0; }
.field-group > label, .currency-select label { display: block; margin-bottom: 11px; color: #f3ebf6; font-size: 15px; font-weight: 600; }
.input-shell { position: relative; display: flex; align-items: center; min-height: 66px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.055); transition: border-color .2s, box-shadow .2s, background .2s; }
.input-shell:focus-within { border-color: var(--pink); background: rgba(255,255,255,.075); box-shadow: 0 0 0 4px rgba(232,52,142,.12); }
.input-shell input { width: 100%; min-width: 0; padding: 17px 20px; color: white; background: transparent; border: 0; outline: 0; font-size: 24px; font-weight: 650; }
.input-shell input::placeholder { color: #695d74; }
.input-affix { padding-left: 20px; color: var(--muted); font-size: 21px; font-weight: 600; }
.input-affix.suffix { padding: 0 20px 0 4px; }
.field-helper, .field-error { margin: 9px 0 0; color: var(--muted-2); font-size: 13px; line-height: 1.45; }
.field-error { color: #ff9bb0; }
.has-error .input-shell { border-color: var(--danger); }

.range-field { margin-top: 36px; padding: clamp(22px, 4vw, 32px); border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius); background: rgba(255,255,255,.045); }
.range-field:first-child { margin-top: 0; }
.range-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.range-heading label { max-width: 520px; color: #f3ebf6; font-size: 16px; font-weight: 600; line-height: 1.4; }
.range-heading output { flex: 0 0 auto; color: #ff9e67; font-size: clamp(27px, 4vw, 38px); font-weight: 800; letter-spacing: -.04em; }
.input-slider { width: 100%; height: 38px; margin: 25px 0 0; appearance: none; background: transparent; cursor: pointer; touch-action: pan-y; }
.input-slider::-webkit-slider-runnable-track { height: 8px; border-radius: 12px; background: linear-gradient(90deg, var(--pink) var(--slider-progress), rgba(255,255,255,.14) var(--slider-progress)); }
.input-slider::-moz-range-track { height: 8px; border-radius: 12px; background: rgba(255,255,255,.14); }
.input-slider::-moz-range-progress { height: 8px; border-radius: 12px; background: var(--pink); }
.input-slider::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -11px; appearance: none; border: 5px solid white; border-radius: 50%; background: var(--pink); box-shadow: 0 5px 20px rgba(232,52,142,.55); }
.input-slider::-moz-range-thumb { width: 20px; height: 20px; border: 5px solid white; border-radius: 50%; background: var(--pink); box-shadow: 0 5px 20px rgba(232,52,142,.55); }
.input-slider:focus-visible { outline: 3px solid white; outline-offset: 5px; border-radius: 8px; }
.range-bounds { display: flex; justify-content: space-between; color: var(--muted-2); font-size: 12px; }
.range-field.has-error { border-color: var(--danger); }

.reveal-number { color: transparent; background: var(--gradient); background-clip: text; -webkit-background-clip: text; font-size: clamp(72px, 14vw, 148px); font-weight: 800; line-height: .95; letter-spacing: -.07em; animation: number-reveal .7s cubic-bezier(.15,.8,.2,1) both; }
@keyframes number-reveal { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.reveal-heading { max-width: 830px; margin-top: 16px; font-size: clamp(36px, 5vw, 62px); }
.step-complete-badge { width: fit-content; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.step-complete-badge .icon { width: 16px; }
.step-complete-note { --complete-accent: #72b7ff; margin: 14px auto 0; padding: 15px 18px; border-left: 3px solid var(--complete-accent); border-radius: 0 12px 12px 0; background: rgba(114,183,255,.07); }
.step-complete-note.tone-high { --complete-accent: #ff7896; background: rgba(255,120,150,.07); }
.step-complete-note.tone-medium { --complete-accent: #ffb071; background: rgba(255,176,113,.07); }
.step-complete-note.tone-positive { --complete-accent: var(--green); background: rgba(88,214,169,.07); }
.step-complete-note strong { color: var(--complete-accent); font-size: 13px; }
.step-complete-note p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.step-complete-panel { width: 100%; }
.step-complete-screen { max-width: none; margin: auto; }
.step-complete-screen h1 { max-width: none; }
.step-complete-screen > p { max-width: none; margin: 22px 0 0; color: var(--muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.65; }
.context-note { margin: 18px 0 0; color: var(--muted-2); font-size: 13px; }

.question-count { margin: 3px 0 13px; color: var(--muted-2); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.question-counter { margin-bottom: 15px; color: #ffad69; font-size: 12px; font-weight: 750; letter-spacing: .09em; }
.question-title { max-width: none; font-size: clamp(34px, 5vw, 56px); }
.question-heading-row { display: flex; align-items: flex-start; gap: 14px; }
.question-heading-row .question-title { flex: 1 1 auto; min-width: 0; }
.question-helper { margin: 12px 0 -10px; color: var(--muted-2); font-size: 13px; line-height: 1.4; }
.registration-structure-question { position: relative; z-index: 1; max-width: none; display: block; color: white; font-size: clamp(34px, 5vw, 56px); font-weight: 760; line-height: 1.3; letter-spacing: -.04em; }
.registration-structure-question:has(.structure-picker.is-open) { z-index: 200; }
.registration-structure-helper { margin: 16px 0 0; color: var(--muted-2); font-size: 13px; line-height: 1.4; }
.structure-keep { display: inline-block; max-width: 100%; white-space: nowrap; }
.structure-keep > .structure-picker + span { margin-left: 10px; }
.structure-picker { position: relative; z-index: 24; flex: 0 0 auto; display: inline-flex; font-size: clamp(21px, 2.5vw, 28px); letter-spacing: -.025em; vertical-align: middle; }
.structure-picker.is-open { z-index: 130; }
.structure-trigger { position: relative; min-width: 150px; min-height: 62px; padding: 0 48px 0 18px; color: white; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); font: inherit; font-weight: 720; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.structure-trigger::after { position: absolute; width: 8px; height: 8px; right: 18px; top: 50%; border-right: 1.5px solid #ffad69; border-bottom: 1.5px solid #ffad69; content: ""; transform: translateY(-70%) rotate(45deg); transition: transform .18s ease; }
.structure-picker.is-open .structure-trigger { border-color: rgba(232,52,142,.7); background: rgba(232,52,142,.12); }
.structure-picker.is-open .structure-trigger::after { transform: translateY(-25%) rotate(225deg); }
.structure-trigger:hover { border-color: rgba(232,52,142,.7); background: rgba(232,52,142,.12); }
.structure-trigger:focus-visible { border-color: var(--pink); box-shadow: 0 0 0 3px white, 0 0 30px rgba(232,52,142,.2); outline: none; }
.structure-menu { top: calc(100% + 8px); width: max-content; min-width: 100%; max-width: 220px; }
.structure-option { min-width: 100%; white-space: nowrap; }
.question-options { margin-top: 34px; }
.segmented-control { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.segmented-control.columns-one { grid-template-columns: 1fr; }
.segmented-control.columns-two { grid-template-columns: repeat(2, 1fr); }
.segmented-control.columns-three { grid-template-columns: repeat(3, 1fr); }
.option-card { position: relative; min-height: 74px; display: flex; align-items: center; gap: 12px; padding: 15px 17px; color: var(--muted); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(255,255,255,.045); cursor: pointer; line-height: 1.35; transition: border .2s, background .2s, color .2s, transform .2s; }
.option-card:hover { color: white; border-color: rgba(232,52,142,.6); transform: translateY(-1px); }
.option-card.is-selected { color: white; border-color: var(--pink); background: linear-gradient(135deg, rgba(232,52,142,.18), rgba(101,42,235,.12)); box-shadow: 0 0 0 1px rgba(232,52,142,.18), 0 14px 40px rgba(10,3,22,.22); }
.option-card.is-selected .tooltip-control { display: none; }
.option-card input { position: absolute; opacity: 0; pointer-events: none; }
.option-copy { min-width: 0; flex: 1 1 auto; display: grid; gap: 5px; }
.option-label { min-width: 0; font-weight: 500; }
.option-qualifier { color: rgba(255,255,255,.42); font-size: .88em; font-weight: 500; }
.option-card.has-detail { align-items: flex-start; min-height: 104px; padding-block: 14px; }
.option-card.has-detail .option-indicator { margin-top: 2px; }
.option-card.has-detail .option-label { color: #fff; font-weight: 700; }
.option-description { color: var(--muted); font-size: 14px; line-height: 1.45; }
.option-example { color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.45; }
.option-example strong { color: #ffad69; font-weight: 600; }
.tracking-metric-entry { width: min(100%, 520px); margin: 32px auto 0; }
.tracking-metric-value-row { width: 100%; display: block; }
.tracking-metric-input { min-width: 0; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(9,4,16,.28); transition: border-color .2s, box-shadow .2s; }
.tracking-metric-input:focus-within { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(232,52,142,.12); }
.tracking-metric-input input { width: 100%; min-width: 0; height: 56px; padding: 0 12px 0 16px; color: white; border: 0; outline: 0; background: transparent; font: inherit; font-size: 18px; font-weight: 750; text-align: center; }
.tracking-metric-input input::placeholder { color: rgba(255,255,255,.28); }
.tracking-metric-input small { padding-right: 16px; color: #ffad69; font-size: 13px; font-weight: 800; }
.tracking-volume-picker { width: 100%; font-size: 16px; }
.tracking-volume-picker .structure-trigger { width: 100%; min-width: 0; min-height: 56px; font-size: 16px; }
.tracking-volume-picker .structure-menu { width: 100%; min-width: 100%; max-width: none; max-height: min(330px, 48vh); overflow-y: auto; }
.tracking-metric-range { width: 100%; display: block; }
.tracking-metric-range output { display: block; color: white; font-size: clamp(30px, 4vw, 40px); font-weight: 800; line-height: 1; text-align: center; }
.tracking-metric-range .input-slider { margin-top: 24px; }
.tracking-metric-range-bounds { display: flex; justify-content: space-between; margin-top: 2px; color: var(--muted-2); font-size: 12px; }
.tracking-unknown-action { display: block; margin: 18px auto 0; padding: 4px 6px; color: var(--muted); border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.tracking-unknown-action:hover, .tracking-unknown-action:focus-visible { color: white; outline: none; }
.tracking-metric-error { width: min(100%, 520px); margin: 10px auto 0; text-align: center; }
.quantify-panel { width: 100%; }
.quantify-question-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); align-items: center; gap: clamp(36px, 6vw, 72px); }
.quantify-question-copy { min-width: 0; }
.quantify-question-copy .question-counter { margin-bottom: 22px; }
.quantify-period-picker { z-index: 40; margin-inline: 2px; font-size: .56em; vertical-align: .1em; }
.quantify-period-picker .structure-trigger { min-width: 178px; min-height: 54px; padding-left: 16px; font-size: 1em; }
.quantify-period-picker .structure-menu { min-width: 178px; }
.quantify-question-copy .question-title { max-width: 520px; font-size: clamp(34px, 4.2vw, 48px); line-height: 1.06; }
.quantify-question-note { max-width: 500px; margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.quantify-control-card { position: relative; min-width: 0; padding: clamp(22px, 3vw, 30px); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: 0 24px 60px rgba(7,2,15,.22), inset 0 1px 0 rgba(255,255,255,.05); }
.quantify-control-card::before { position: absolute; inset: -1px 28px auto; height: 2px; content: ""; background: var(--gradient); border-radius: 99px; opacity: .82; }
.quantify-control-label { display: block; margin-bottom: 20px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .035em; }
.quantify-control-card .tracking-metric-entry { width: 100%; margin: 0; }
.quantify-control-card .tracking-metric-range output { text-align: left; }
.quantify-control-card .tracking-metric-range .input-slider { margin-top: 28px; }
.quantify-control-card .question-options { margin-top: 0; }
.quantify-control-card .segmented-control { gap: 8px; }
.quantify-control-card .option-card { min-height: 58px; padding: 12px 13px; }
.quantify-control-card .tracking-unknown-action { margin-top: 22px; }
.quantify-control-card .tracking-metric-error { width: 100%; text-align: left; }
.quantify-control-card .average-deposit-entry { margin-top: 0; }
.quantify-control-card .average-deposit-entry > label { font-size: 12px; }
.progress-visibility-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.progress-visibility-card { min-height: 206px; display: grid; grid-template-rows: 1fr auto; align-items: stretch; gap: 14px; padding: 14px; }
.progress-visibility-answer { min-width: 0; display: flex; align-items: center; gap: 10px; }
.progress-visibility-answer .option-label { color: white; font-weight: 650; }
.progress-ui-preview { min-width: 0; height: 139px; display: block; }
.progress-preview-window { width: 100%; height: 100%; overflow: hidden; display: grid; grid-template-rows: 16px 1fr; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; background: #170b25; box-shadow: inset 0 0 28px rgba(101,42,235,.08); }
.progress-preview-bar { display: flex; align-items: center; gap: 3px; padding-inline: 7px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.04); }
.progress-preview-bar i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.32); }
.progress-preview-body { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 10px; }
.progress-preview-body > small { color: rgba(255,255,255,.66); font-size: 7px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.progress-preview-body > small.is-muted { color: rgba(255,255,255,.32); }
.progress-preview-stepper { width: min(100%, 126px); display: grid; grid-template-columns: 16px 1fr 16px 1fr 16px; align-items: center; }
.progress-preview-stepper i { width: 16px; height: 16px; display: grid; place-items: center; color: rgba(255,255,255,.38); border: 1px solid rgba(255,255,255,.22); border-radius: 50%; font-size: 6px; font-style: normal; }
.progress-preview-stepper .step-one { animation: progress-step-one 6s ease-in-out infinite; }
.progress-preview-stepper .step-two { animation: progress-step-two 6s ease-in-out infinite; }
.progress-preview-stepper .step-three { animation: progress-step-three 6s ease-in-out infinite; }
.progress-preview-stepper b { position: relative; height: 1px; background: rgba(255,255,255,.16); }
.progress-preview-stepper b::after { position: absolute; inset: 0; content: ""; background: var(--green); transform: scaleX(0); transform-origin: left; }
.progress-preview-stepper .line-one::after { animation: progress-line-one 6s ease-in-out infinite; }
.progress-preview-stepper .line-two::after { animation: progress-line-two 6s ease-in-out infinite; }
.progress-preview-form { width: min(100%, 128px); display: grid; grid-template-columns: 1fr; gap: 5px; }
.progress-preview-form i { height: 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 3px; background: rgba(255,255,255,.04); }
.progress-preview-form b { min-height: 17px; display: grid; place-items: center; border-radius: 3px; color: white; background: linear-gradient(100deg, var(--pink), var(--violet)); font-size: 6px; letter-spacing: .03em; text-transform: uppercase; }
.progress-ui-throughout .progress-preview-form, .progress-ui-none .progress-preview-form { animation: progress-form-change 6s ease-in-out infinite; }
.progress-ui-throughout .progress-preview-form i:first-child, .progress-ui-none .progress-preview-form i:first-child { animation: progress-field-one-change 6s ease-in-out infinite; }
.progress-ui-throughout .progress-preview-form i:nth-child(2), .progress-ui-none .progress-preview-form i:nth-child(2) { animation: progress-field-two-change 6s ease-in-out infinite; }
.progress-preview-count { position: relative; width: 62px; height: 9px; display: block; }
.progress-preview-count span { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; white-space: nowrap; }
.progress-preview-count span:nth-child(1) { animation: progress-count-one 6s linear infinite; }
.progress-preview-count span:nth-child(2) { animation: progress-count-two 6s linear infinite; }
.progress-preview-count span:nth-child(3) { animation: progress-count-three 6s linear infinite; }
.progress-preview-unknown { width: 48px; height: 48px; display: grid; place-items: center; color: rgba(255,255,255,.52); border: 1px dashed rgba(255,255,255,.24); border-radius: 50%; background: rgba(255,255,255,.025); font-size: 24px; font-weight: 600; }
.option-card.is-selected .progress-preview-window { border-color: rgba(88,214,169,.58); box-shadow: 0 0 0 1px rgba(88,214,169,.1), inset 0 0 30px rgba(88,214,169,.08); }
@keyframes progress-step-one {
  0%, 29% { color: white; border-color: var(--pink); background: rgba(232,52,142,.22); box-shadow: 0 0 10px rgba(232,52,142,.34); }
  34%, 100% { color: #170b25; border-color: var(--green); background: var(--green); box-shadow: none; }
}
@keyframes progress-step-two {
  0%, 29%, 100% { color: rgba(255,255,255,.38); border-color: rgba(255,255,255,.22); background: transparent; box-shadow: none; }
  34%, 62% { color: white; border-color: var(--pink); background: rgba(232,52,142,.22); box-shadow: 0 0 10px rgba(232,52,142,.34); }
  67%, 96% { color: #170b25; border-color: var(--green); background: var(--green); box-shadow: none; }
}
@keyframes progress-step-three {
  0%, 62%, 100% { color: rgba(255,255,255,.38); border-color: rgba(255,255,255,.22); background: transparent; box-shadow: none; }
  67%, 96% { color: white; border-color: var(--pink); background: rgba(232,52,142,.22); box-shadow: 0 0 10px rgba(232,52,142,.34); }
}
@keyframes progress-line-one { 0%, 29% { transform: scaleX(0); } 34%, 100% { transform: scaleX(1); } }
@keyframes progress-line-two { 0%, 62% { transform: scaleX(0); } 67%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes progress-form-change {
  0%, 27%, 35%, 60%, 68%, 95%, 100% { opacity: 1; transform: translateX(0); }
  30%, 63%, 98% { opacity: 0; transform: translateX(-16px); }
  31%, 64%, 99% { opacity: 0; transform: translateX(16px); }
}
@keyframes progress-field-one-change {
  0%, 29%, 100% { width: 78%; }
  34%, 62% { width: 100%; }
  67%, 96% { width: 58%; }
}
@keyframes progress-field-two-change {
  0%, 29%, 100% { width: 100%; }
  34%, 62% { width: 72%; }
  67%, 96% { width: 88%; }
}
@keyframes progress-count-one { 0%, 29% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes progress-count-two { 0%, 31%, 65%, 100% { opacity: 0; } 34%, 62% { opacity: 1; } }
@keyframes progress-count-three { 0%, 65%, 100% { opacity: 0; } 68%, 96% { opacity: 1; } }
.post-registration-options { width: 100%; margin-top: 34px; }
.post-registration-destinations { width: 100%; display: grid; grid-template-columns: 1fr; gap: 9px; }
.post-registration-destination { min-width: 0; min-height: 82px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 11px 12px; }
.post-registration-destination-icon { width: 30px; height: 30px; display: grid; place-items: center; color: #cba9e8; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.055); transition: color .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease; }
.post-registration-destination-icon .icon { width: 15px; height: 15px; }
.post-registration-destination .option-indicator { width: 17px; height: 17px; }
.post-registration-destination .option-copy { gap: 4px; }
.post-registration-destination .option-label { color: white; font-size: 18px; font-weight: 720; }
.post-registration-destination-detail { color: rgba(255,255,255,.52); font-size: 14px; line-height: 1.35; }
.post-registration-destination.is-selected .post-registration-destination-icon { color: white; border-color: rgba(232,52,142,.62); background: linear-gradient(145deg, rgba(232,52,142,.38), rgba(101,42,235,.32)); box-shadow: 0 0 20px rgba(232,52,142,.16); }
.option-leading-icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; color: #cba9e8; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.045); transition: color .2s ease, border-color .2s ease, background .2s ease; }
.option-leading-icon .icon { width: 18px; height: 18px; }
.option-card.is-selected .option-leading-icon { color: white; border-color: rgba(232,52,142,.5); background: rgba(232,52,142,.18); }
.option-card.has-detail .option-leading-icon { margin-top: -2px; }
.cashier-question-options { max-width: none; }
.cashier-builder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
.mobile-preview-controls, .mobile-preview-launch, .mobile-preview-close { display: none; }
.cashier-feature-list { display: grid; gap: 8px; }
.cashier-feature-option, .cashier-feature-option.is-selected { min-height: 42px; padding: 6px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 16px; }
.cashier-feature-option:hover { border-color: transparent; background: transparent; transform: none; }
.cashier-feature-option.is-unknown { margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); background: transparent; }
.cashier-feature-option .cashier-switch { position: relative; flex: 0 0 38px; width: 38px; height: 22px; display: block; padding: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.055); transition: border-color .22s ease, background .22s ease, box-shadow .22s ease; }
.cashier-feature-option .cashier-switch > * { display: none !important; }
.cashier-feature-option .cashier-switch::after { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.78); box-shadow: 0 2px 7px rgba(4,1,9,.3); content: ""; transition: transform .28s cubic-bezier(.2,.8,.2,1), background .22s ease; }
.cashier-feature-option.is-selected .cashier-switch { border-color: rgba(232,52,142,.78); background: linear-gradient(105deg, var(--pink), var(--violet)); box-shadow: 0 0 0 3px rgba(232,52,142,.1); }
.cashier-feature-option.is-selected .cashier-switch::after { background: white; transform: translateX(16px); }
.cashier-screen { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: linear-gradient(160deg, #21152c 0%, #16101f 72%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 65px rgba(7,2,15,.38); }
.cashier-screen::before { position: absolute; inset: 0 0 auto; height: 2px; content: ""; background: linear-gradient(90deg, #ff7357, #ef3c9b 52%, #7652ff); }
.cashier-screen-header { min-height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); }
.cashier-screen-title { display: grid; gap: 4px; color: white; }
.cashier-screen-title > b { font-size: 17px; font-weight: 760; letter-spacing: -.015em; }
.cashier-title-deposit { display: none; }
.cashier-builder:has(.cashier-feature-option input[value="payment-methods"]:checked) .cashier-title-deposit { display: block; }
.cashier-builder:has(.cashier-feature-option input[value="payment-methods"]:checked) .cashier-title-method { display: none; }
.cashier-screen-title > small { display: flex; align-items: center; gap: 4px; color: var(--green); font-size: 8px; font-weight: 650; letter-spacing: .02em; }
.cashier-screen-title > small .icon { width: 10px; height: 10px; }
.cashier-screen-close { width: 28px; height: 28px; display: grid; place-items: center; color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.035); font-size: 15px; font-style: normal; }
.cashier-screen-body { min-height: 260px; display: grid; align-content: start; gap: 20px; padding: 20px 20px 18px; }
.cashier-preview-section { display: none; gap: 8px; padding: 2px; margin: -2px; border-radius: 12px; animation: cashier-reveal .5s cubic-bezier(.16,1,.3,1) both; }
.cashier-required-amount { display: grid; gap: 8px; }
.cashier-preview-predefined-amounts, .cashier-preview-deposit-limits { display: none; border-radius: 9px; animation: cashier-reveal .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes cashier-reveal {
  0% { opacity: 0; transform: translateY(-10px) scale(.975); }
  52% { opacity: 1; box-shadow: 0 0 0 3px rgba(232,52,142,.2), 0 0 22px rgba(232,52,142,.16); }
  100% { opacity: 1; box-shadow: 0 0 0 0 rgba(232,52,142,0), 0 0 0 rgba(232,52,142,0); transform: none; }
}
.cashier-area-title { color: rgba(255,255,255,.76); font-size: 10px; font-weight: 680; line-height: 1.3; }
.cashier-area-visual { min-width: 0; display: grid; gap: 8px; color: var(--muted); }
.cashier-payment-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cashier-payment-tiles > i { position: relative; min-height: 55px; display: grid; align-content: center; justify-items: start; gap: 3px; padding: 0 11px; overflow: hidden; color: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); font-style: normal; }
.cashier-payment-tiles > i b { font-size: 10px; font-weight: 800; letter-spacing: -.01em; }
.cashier-payment-tiles > i small { color: rgba(255,255,255,.38); font-size: 7px; font-weight: 600; }
.cashier-method-limits { display: none; }
.cashier-builder:has(.cashier-feature-option input[value="deposit-limits"]:checked) .cashier-method-type { display: none; }
.cashier-builder:has(.cashier-feature-option input[value="deposit-limits"]:checked) .cashier-method-limits { display: block; }
.cashier-payment-tiles > i em { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; display: grid; place-items: center; color: #170d20; border-radius: 50%; background: var(--green); font-size: 8px; font-style: normal; font-weight: 900; }
.cashier-payment-tiles > i.is-active { color: white; border-color: rgba(232,52,142,.72); background: linear-gradient(145deg, rgba(232,52,142,.2), rgba(101,42,235,.11)); box-shadow: inset 0 0 0 1px rgba(232,52,142,.1), 0 8px 20px rgba(232,52,142,.08); }
.cashier-amount-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cashier-amount-heading > small { color: rgba(255,255,255,.35); font-size: 8px; font-weight: 700; letter-spacing: .05em; }
.cashier-amount-field { min-height: 56px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 11px; background: rgba(8,5,12,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.cashier-amount-field > i { padding-left: 14px; color: rgba(255,255,255,.42); font-size: 15px; font-style: normal; }
.cashier-amount-field > b { padding-inline: 8px; color: white; font-size: 22px; font-weight: 740; letter-spacing: -.03em; }
.cashier-amount-field > small { margin-right: 7px; padding: 7px 9px; color: rgba(255,255,255,.58); border-radius: 7px; background: rgba(255,255,255,.055); font-size: 8px; font-weight: 750; }
.cashier-amount-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.cashier-amount-chips i { min-height: 32px; display: grid; place-items: center; color: rgba(255,255,255,.68); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.025); font-size: 9px; font-weight: 680; font-style: normal; }
.cashier-amount-chips i.is-active { color: white; border-color: rgba(232,52,142,.56); background: rgba(232,52,142,.13); box-shadow: inset 0 0 0 1px rgba(232,52,142,.06); }
.cashier-preview-deposit-limits { padding-inline: 2px; color: rgba(255,255,255,.4); font-size: 8px; line-height: 1.4; }
.cashier-bonus-preview { min-height: 58px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid rgba(255,173,105,.18); border-radius: 11px; background: linear-gradient(105deg, rgba(251,116,52,.08), rgba(232,52,142,.055)); }
.cashier-bonus-preview > strong { width: 30px; height: 30px; display: grid; place-items: center; color: #ffb06c; border-radius: 9px; background: rgba(251,116,52,.12); font-size: 13px; }
.cashier-bonus-preview > span { display: grid; gap: 2px; }
.cashier-bonus-preview small { color: #ffad69; font-size: 7px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.cashier-bonus-preview b { color: white; font-size: 10px; }
.cashier-bonus-preview i { color: rgba(255,255,255,.42); font-size: 7px; font-style: normal; }
.cashier-bonus-preview em { color: rgba(255,255,255,.48); font-size: 14px; font-style: normal; }
.cashier-screen-footer { display: grid; gap: 14px; padding: 2px 20px 22px; text-align: center; }
.cashier-footer-fees { display: none; align-items: center; justify-content: center; gap: 14px; color: rgba(255,255,255,.58); animation: cashier-reveal .5s cubic-bezier(.16,1,.3,1) both; }
.cashier-footer-fees i { font-size: 8px; font-weight: 650; font-style: normal; }
.cashier-footer-fees i::before { margin-right: 4px; color: var(--green); content: "✓"; }
.cashier-deposit-action { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; color: white; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: linear-gradient(105deg, #e9378f, #7b35ed); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 26px rgba(142,36,187,.22); font-size: 11px; }
.cashier-deposit-action b { font-weight: 760; }
.cashier-deposit-action i { font-size: 14px; font-style: normal; transition: transform .2s ease; }
.cashier-footer-support { display: none; align-items: center; justify-content: center; gap: 6px; min-height: 32px; color: rgba(255,255,255,.5); font-size: 8px; animation: cashier-reveal .5s cubic-bezier(.16,1,.3,1) both; }
.cashier-footer-support .icon { width: 11px; height: 11px; color: #a5d5ff; }
.cashier-footer-support b { color: rgba(255,255,255,.62); font-weight: 650; }
.cashier-footer-support i { color: #a5d5ff; font-style: normal; font-weight: 700; }
.cashier-builder:has(.cashier-feature-option input[value="payment-methods"]:checked) .cashier-preview-payment-methods,
.cashier-builder:has(.cashier-feature-option input[value="bonus-terms"]:checked) .cashier-preview-bonus-terms { display: grid; }
.cashier-builder:has(.cashier-feature-option input[value="support-contacts"]:checked) .cashier-footer-support { display: flex; }
.cashier-builder:has(.cashier-feature-option input[value="fees-timing"]:checked) .cashier-footer-fees { display: flex; }
.cashier-builder:has(.cashier-feature-option input[value="predefined-amounts"]:checked) .cashier-preview-predefined-amounts { display: block; }
.cashier-builder:has(.cashier-feature-option input[value="deposit-limits"]:checked) .cashier-preview-deposit-limits { display: block; }
.password-question-options { max-width: none; }
.password-feature-builder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.password-feature-list { display: grid; gap: 8px; }
.password-feature-option .info-trigger { width: 25px; height: 25px; }
.password-feature-option .info-trigger .icon { width: 14px; }
.password-preview-screen { position: relative; min-height: 402px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: linear-gradient(155deg, #21152c, #140d1c 78%); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 24px 65px rgba(7,2,15,.36); }
.password-preview-screen::before { position: absolute; inset: 0 0 auto; z-index: 3; height: 2px; content: ""; background: linear-gradient(90deg, #ff7357, #ef3c9b 52%, #7652ff); }
.password-preview-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); }
.password-preview-header > span { display: grid; gap: 3px; }
.password-preview-header small { color: rgba(255,255,255,.38); font-size: 7px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.password-preview-header b { color: white; font-size: 13px; }
.password-preview-header > i { padding: 6px 8px; color: rgba(255,255,255,.48); border: 1px solid rgba(255,255,255,.11); border-radius: 7px; font-size: 7px; font-style: normal; font-weight: 700; }
.password-preview-body { position: relative; display: grid; align-content: start; gap: 10px; padding: 20px; }
.password-preview-field-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.password-preview-field-label > b, .password-preview-repeat > small { color: rgba(255,255,255,.74); font-size: 9px; font-weight: 700; }
.password-preview-autofill { display: none; align-items: center; gap: 4px; color: var(--green); font-size: 7px; font-style: normal; font-weight: 680; animation: cashier-reveal .45s cubic-bezier(.16,1,.3,1) both; }
.password-preview-autofill .icon { width: 9px; height: 9px; }
.password-preview-input, .password-preview-repeat > span { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; color: white; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(7,4,10,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.password-preview-value { position: relative; width: 112px; height: 22px; display: flex; align-items: center; }
.password-preview-value > b, .password-preview-repeat > span b { font-size: 15px; letter-spacing: .13em; }
.password-preview-value > b { display: inline-block; white-space: nowrap; opacity: 1; transition: opacity .18s ease; }
.password-preview-value > em { position: absolute; left: 0; display: block; color: white; font-size: 13px; font-style: normal; font-weight: 650; letter-spacing: .01em; opacity: 0; transform: translateY(2px); transition: opacity .18s ease, transform .18s ease; }
.password-preview-placeholder { display: none; color: rgba(255,255,255,.3); font-size: 9px; }
.password-preview-eye { position: relative; display: none; width: 28px; height: 28px; place-items: center; color: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; background: rgba(255,255,255,.04); transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease; }
.password-preview-eye .icon { width: 14px; }
.password-autofill-prompt { position: absolute; z-index: 8; top: 94px; left: 30px; right: 30px; display: none; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; min-height: 48px; padding: 8px 10px; color: #251a2d; border: 1px solid rgba(31,20,38,.1); border-radius: 10px; background: #fff; box-shadow: 0 16px 38px rgba(4,1,8,.42), 0 2px 8px rgba(4,1,8,.18); opacity: 0; transform: translateY(-5px) scale(.985); transform-origin: top right; pointer-events: none; transition: opacity .28s ease, transform .28s ease; }
.password-autofill-prompt::before { position: absolute; top: -5px; right: 27px; width: 9px; height: 9px; border-top: 1px solid rgba(31,20,38,.1); border-left: 1px solid rgba(31,20,38,.1); background: #fff; content: ""; transform: rotate(45deg); }
.password-autofill-prompt > strong { width: 25px; height: 25px; display: grid; place-items: center; color: #188c69; border-radius: 7px; background: #e7f7f1; }
.password-autofill-prompt > strong .icon { width: 13px; }
.password-autofill-prompt > span { min-width: 0; display: grid; gap: 2px; }
.password-autofill-prompt small { color: #786b80; font-size: 6px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.password-autofill-prompt > span b { color: #251a2d; font-size: 8px; }
.password-autofill-prompt > span i { display: none; color: #188c69; font-size: 8px; font-style: normal; font-weight: 700; }
.password-autofill-prompt > em { position: relative; min-width: 66px; min-height: 26px; display: grid; place-items: center; padding: 0 8px; color: white; border-radius: 7px; background: #281833; font-size: 7px; font-style: normal; font-weight: 800; transition: transform .18s ease, color .22s ease, background .22s ease; }
.password-preview-eye::after,
.password-autofill-prompt > em::after { position: absolute; z-index: 10; top: 50%; left: 50%; width: 52px; height: 52px; border: 2px solid rgba(255,255,255,.94); border-radius: 50%; background: rgba(232,52,142,.16); box-shadow: 0 0 0 8px rgba(232,52,142,.1), 0 0 28px rgba(232,52,142,.46); content: ""; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(1.14); }
.password-feature-builder.is-eye-pressed .password-preview-eye::after,
.password-feature-builder.is-autofill-accepting .password-autofill-prompt > em::after { animation: password-click-indicator .18s ease-out both; }
@keyframes password-click-indicator {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.14); }
  24% { opacity: 1; }
  100% { opacity: .88; transform: translate(-50%, -50%) scale(.82); }
}
.password-autofill-prompt > em i { display: none; font-style: normal; }
.password-preview-requirements { display: none; grid-template-columns: 1fr; gap: 5px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(255,255,255,.025); animation: cashier-reveal .45s cubic-bezier(.16,1,.3,1) both; }
.password-preview-requirements small { margin-bottom: 2px; color: rgba(255,255,255,.48); font-size: 7px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.password-preview-requirements i { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.48); font-size: 7px; font-style: normal; }
.password-preview-requirements i b { width: 12px; height: 12px; display: none; place-items: center; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: transparent; font-size: 6px; transform: scale(.88); transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.password-rule-live { display: none; }
.password-preview-repeat { display: none; gap: 7px; animation: cashier-reveal .45s cubic-bezier(.16,1,.3,1) both; }
.password-preview-repeat > i { color: var(--green); font-size: 7px; font-style: normal; font-weight: 650; opacity: 0; transform: translateY(-2px); transition: opacity .2s ease, transform .2s ease; }
.password-preview-action { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 2px; color: rgba(255,255,255,.34); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: rgba(255,255,255,.055); box-shadow: none; font-size: 9px; font-weight: 750; transition: color .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease; }
.password-preview-action i { font-size: 11px; font-style: normal; opacity: .35; transition: opacity .28s ease, transform .28s ease; }
.password-preview-unknown { position: absolute; z-index: 5; inset: 68px 0 0; display: none; place-content: center; justify-items: center; gap: 8px; background: linear-gradient(155deg, rgba(33,21,44,.98), rgba(20,13,28,.98)); color: rgba(255,255,255,.5); }
.password-preview-unknown b { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(255,255,255,.04); color: rgba(255,255,255,.7); font-size: 25px; }
.password-preview-unknown span { font-size: 9px; }
.password-feature-builder:has(input[value="requirements-upfront"]:checked) .password-preview-requirements,
.password-feature-builder:has(input[value="live-validation"]:checked) .password-preview-requirements { display: grid; }
.password-feature-builder:has(input[value="requirements-upfront"]:checked):not(:has(input[value="live-validation"]:checked)) .password-preview-requirements { display: block; }
.password-feature-builder:has(input[value="requirements-upfront"]:checked):not(:has(input[value="live-validation"]:checked)) .password-preview-requirements small { display: block; margin-bottom: 7px; }
.password-feature-builder:has(input[value="requirements-upfront"]:checked):not(:has(input[value="live-validation"]:checked)) .password-preview-requirements i { display: inline; line-height: 1.55; }
.password-feature-builder:has(input[value="requirements-upfront"]:checked):not(:has(input[value="live-validation"]:checked)) .password-preview-requirements i:not(:last-child)::after { content: ". "; }
.password-feature-builder:has(input[value="requirements-upfront"]:checked):not(:has(input[value="live-validation"]:checked)) .password-preview-requirements i:last-child::after { content: "."; }
.password-feature-builder:has(input[value="requirements-upfront"]:checked):not(:has(input[value="live-validation"]:checked)):not(:has(input[value="show-hide"]:checked)):not(:has(input[value="repeat-password"]:checked)):not(:has(input[value="password-autofill"]:checked)) .password-preview-input > .password-preview-value { display: none; }
.password-feature-builder:has(input[value="requirements-upfront"]:checked):not(:has(input[value="live-validation"]:checked)):not(:has(input[value="show-hide"]:checked)):not(:has(input[value="repeat-password"]:checked)):not(:has(input[value="password-autofill"]:checked)) .password-preview-placeholder { display: block; }
.password-feature-builder:has(input[value="live-validation"]:checked) .password-preview-requirements i { color: rgba(255,255,255,.72); }
.password-feature-builder:has(input[value="live-validation"]:checked) .password-preview-requirements i b { display: grid; }
.password-feature-builder:has(input[value="live-validation"]:checked) .password-rule-static { display: none; }
.password-feature-builder:has(input[value="live-validation"]:checked) .password-rule-live { display: inline; }
.password-feature-builder:has(input[value="show-hide"]:checked) .password-preview-eye { display: grid; }
.password-feature-builder:has(input[value="repeat-password"]:checked) .password-preview-repeat { display: grid; }
.password-feature-builder:has(input[value="password-autofill"]:checked) .password-preview-autofill { display: flex; }
.password-feature-builder:has(input[value="password-autofill"]:checked) .password-autofill-prompt { display: grid; }
.password-feature-builder:has(input[value="not-sure"]:checked) .password-preview-unknown { display: grid; animation: cashier-reveal .45s cubic-bezier(.16,1,.3,1) both; }
.password-feature-builder.is-rule-length-complete .password-rule-length b,
.password-feature-builder.is-rule-number-complete .password-rule-number b,
.password-feature-builder.is-rule-uppercase-complete .password-rule-uppercase b { color: #160d20; border-color: transparent; background: var(--green); transform: scale(1); }
.password-feature-builder.is-repeat-matched .password-preview-repeat > i { opacity: 1; transform: none; }
.password-feature-builder.is-password-visible .password-preview-value > b { opacity: 0; }
.password-feature-builder.is-password-visible .password-preview-value > em { opacity: 1; transform: none; }
.password-feature-builder.is-eye-pressed .password-preview-eye { color: white; border-color: rgba(232,52,142,.55); background: rgba(232,52,142,.18); transform: scale(.82); }
.password-feature-builder.is-password-ready .password-preview-action { color: white; border-color: transparent; background: linear-gradient(105deg, #e9378f, #7b35ed); box-shadow: 0 10px 24px rgba(142,36,187,.2); }
.password-feature-builder.is-password-ready .password-preview-action i { opacity: 1; transform: translateX(1px); }
.password-feature-builder.is-autofill-offered .password-autofill-prompt { opacity: 1; transform: none; }
.password-feature-builder.is-autofill-accepting .password-autofill-prompt > em { transform: scale(.84); }
.password-feature-builder.is-autofill-filled .password-autofill-prompt { opacity: 1; transform: none; }
.password-feature-builder.is-autofill-filled .password-autofill-prompt > span b,
.password-feature-builder.is-autofill-filled .password-autofill-prompt > em span { display: none; }
.password-feature-builder.is-autofill-filled .password-autofill-prompt > span i,
.password-feature-builder.is-autofill-filled .password-autofill-prompt > em i { display: block; }
.password-feature-builder.is-autofill-filled .password-autofill-prompt > em { color: #188c69; background: #e7f7f1; }
.password-feature-builder.is-autofill-dismissed .password-autofill-prompt { opacity: 0; transform: translateY(-5px) scale(.985); }
.option-indicator { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.26); }
.option-radio { border-radius: 50%; }
.option-checkbox { border-radius: 5px; }
.is-selected .option-indicator { color: #1c1022; border-color: transparent; background: #ff9c63; }
.option-indicator .icon { width: 14px; }
.radio-dot { width: 8px; height: 8px; border-radius: 50%; background: #1c1022; }
.unsure-option { margin-top: 12px; }
.unsure-option .option-card { width: 100%; min-height: 58px; background: rgba(255,255,255,.025); }
.tooltip-control { flex: 0 0 auto; display: inline-flex; }
.question-heading-row > .tooltip-control { margin-top: 8px; }
.info-trigger { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; color: #ffad69; border: 1px solid rgba(251,116,52,.35); border-radius: 50%; background: rgba(251,116,52,.08); font: inherit; cursor: help; transition: color .2s, border-color .2s, background .2s, box-shadow .2s; }
.info-trigger .icon { width: 17px; }
.info-trigger:hover, .info-trigger:focus-visible, .info-trigger[aria-expanded="true"] { color: white; border-color: var(--pink); background: rgba(232,52,142,.18); outline: none; }
.info-trigger:focus-visible { box-shadow: 0 0 0 3px white; }
.app-tooltip { position: fixed; z-index: 10000; width: max-content; max-width: min(320px, calc(100vw - 24px)); padding: 13px 14px; color: #f7effa; border: 1px solid rgba(255,255,255,.17); border-radius: 10px; background: #2b1740; box-shadow: 0 18px 50px rgba(5,1,12,.58), 0 0 0 1px rgba(232,52,142,.08); font-size: 13px; font-weight: 500; line-height: 1.5; pointer-events: none; animation: tooltip-in .16s ease-out both; }
.app-tooltip[hidden] { display: none; }
.app-tooltip::after { position: absolute; left: var(--tooltip-arrow-left); width: 9px; height: 9px; border-right: 1px solid rgba(255,255,255,.17); border-bottom: 1px solid rgba(255,255,255,.17); background: #2b1740; content: ""; }
.app-tooltip[data-placement="top"]::after { bottom: -5px; transform: translateX(-50%) rotate(45deg); }
.app-tooltip[data-placement="bottom"]::after { top: -5px; transform: translateX(-50%) rotate(225deg); }
@keyframes tooltip-in { from { opacity: 0; transform: translateY(4px) scale(.985); } to { opacity: 1; transform: none; } }

.feedback-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: none; margin-top: 16px; }
.feedback-section { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.025); }
.feedback-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.075); color: #f8f2fa; font-size: 12px; font-weight: 750; }
.feedback-section-heading span:last-child { color: var(--muted-2); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.feedback-section ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.feedback-section li { padding: 11px 12px 12px; }
.feedback-section li + li { border-top: 1px solid rgba(255,255,255,.06); }
.feedback-gap-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #eee6f1; font-size: 12px; font-weight: 700; }
.feedback-priority { flex: 0 0 auto; padding: 3px 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.feedback-priority.priority-critical { color: #ff9cb1; border-color: rgba(255,120,150,.25); background: rgba(255,120,150,.08); }
.feedback-priority.priority-high { color: #ffbd91; border-color: rgba(255,156,112,.24); background: rgba(255,156,112,.07); }
.feedback-section li p, .issue-body .feedback-section li p { margin-top: 5px; color: #bdb1c4; font-size: 11px; line-height: 1.48; }
.issue-body .feedback-context { max-width: none; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.08); color: #cfc3d5; font-size: 12px; }

.journey-score-overview, .journey-score-row, .journey-feedback-stage { --score-color: #ff7896; }
.journey-score-overview.is-strong, .journey-score-row.is-strong, .journey-feedback-stage.is-strong { --score-color: var(--green); }
.journey-score-overview.is-solid, .journey-score-row.is-solid, .journey-feedback-stage.is-solid { --score-color: #a6d985; }
.journey-score-overview.is-watch, .journey-score-row.is-watch, .journey-feedback-stage.is-watch { --score-color: #ffc16d; }
.journey-score-overview.is-unassessed, .journey-score-row.is-unassessed { --score-color: rgba(255,255,255,.38); }
.journey-score-overview { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(330px, 1.28fr); gap: 24px; margin-top: 26px; padding: 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.journey-score-total { padding-right: 22px; border-right: 1px solid rgba(255,255,255,.09); }
.journey-score-total > span { display: block; color: var(--muted-2); font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.journey-score-total > strong { display: block; margin-top: 8px; color: var(--score-color); font-size: clamp(42px, 6vw, 64px); line-height: 1; letter-spacing: -.06em; }
.journey-score-total > strong small { margin-left: 4px; color: rgba(255,255,255,.42); font-size: .34em; letter-spacing: 0; }
.journey-score-total > em { display: inline-block; margin-top: 9px; padding: 4px 8px; color: var(--score-color); border: 1px solid color-mix(in srgb, var(--score-color) 32%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--score-color) 8%, transparent); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.journey-score-total > p { margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.journey-score-breakdown { display: grid; align-content: center; gap: 10px; }
.journey-score-row { display: grid; grid-template-columns: minmax(128px, 1fr) minmax(90px, 1.35fr) 28px; align-items: center; gap: 11px; }
.journey-score-row > span { min-width: 0; color: #e9e1ed; font-size: 11px; font-weight: 650; }
.journey-score-row > span small { margin-right: 8px; color: var(--muted-2); font-size: 8px; letter-spacing: .05em; }
.journey-score-row > i { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.journey-score-row > i b { height: 100%; display: block; border-radius: inherit; background: var(--score-color); box-shadow: 0 0 12px color-mix(in srgb, var(--score-color) 30%, transparent); }
.journey-score-row > strong { color: var(--score-color); font-size: 12px; text-align: right; }
.journey-feedback-stages { display: grid; gap: 34px; margin-top: 34px; }
.journey-feedback-stage { min-width: 0; }
.journey-stage-heading { display: flex; align-items: baseline; gap: 10px; }
.journey-stage-number { color: var(--score-color); font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.journey-stage-heading h3 { margin: 0; color: white; font-size: 18px; }
.journey-stage-issues { margin: 14px 0 0; }
.journey-stage-issues .issue-grid { margin-top: 0; }
.journey-stage-issues .issue-summary { min-height: 78px; padding: 15px 18px; }
.journey-stage-issues .issue-summary-copy > strong { font-size: 16px; }
.journey-stage-issues .issue-body { padding: 0 18px 20px 70px; }
.issue-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 38px; }
.issue-card { overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius); background: rgba(12,6,23,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); animation: issue-in .45s var(--delay) both; }
@keyframes issue-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.issue-card.is-positive { border-color: rgba(88,214,169,.35); box-shadow: inset 0 -1px 0 rgba(88,214,169,.35); }
.issue-card.is-neutral { border-color: rgba(251,174,105,.28); box-shadow: inset 0 -1px 0 rgba(251,174,105,.3); }
.issue-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 96px; padding: 20px 24px; cursor: pointer; list-style: none; transition: background .2s; }
.issue-summary::-webkit-details-marker { display: none; }
.issue-summary::marker { content: ""; }
.issue-summary:hover { background: rgba(255,255,255,.035); }
.issue-summary:focus-visible { outline: 3px solid white; outline-offset: -4px; }
.issue-summary-copy { min-width: 0; display: grid; gap: 7px; }
.issue-summary-copy > strong { color: #fff; font-size: 19px; line-height: 1.3; }
.issue-toggle { position: relative; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.035); }
.issue-toggle::before, .issue-toggle::after { position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; border-radius: 2px; background: #ffad69; content: ""; transform: translate(-50%, -50%); transition: transform .2s, opacity .2s; }
.issue-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.issue-card[open] .issue-toggle::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
.issue-card[open] .issue-summary { background: rgba(255,255,255,.025); }
.issue-icon { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; color: #ff9b61; border-radius: 10px; background: rgba(251,116,52,.12); }
.is-positive .issue-icon { color: var(--green); background: rgba(88,214,169,.12); }
.issue-icon .icon { width: 19px; }
.issue-summary .eyebrow { display: block; color: #ff9b61; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.is-positive .issue-summary .eyebrow { color: var(--green); }
.issue-body { padding: 0 24px 24px 76px; border-top: 1px solid rgba(255,255,255,.08); }
.issue-body > p { margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.issue-recommendation { display: grid; gap: 5px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.issue-recommendation strong { color: #ffad69; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.issue-recommendation span { color: #e4dbe9; font-size: 13px; line-height: 1.55; }
.behaviour-message { display: grid; grid-template-columns: auto 1fr; gap: 22px; margin-top: 20px; padding: clamp(24px, 4vw, 38px); border-radius: var(--radius); background: var(--gradient); color: white; }
.behaviour-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: rgba(18,8,31,.28); }
.behaviour-mark .icon { width: 26px; }
.behaviour-message h2 { margin: 0; font-size: clamp(25px, 3.2vw, 37px); line-height: 1.18; letter-spacing: -.035em; }
.behaviour-message h2 span { color: #1c0b29; }
.behaviour-message p { max-width: 820px; margin: 14px 0 0; color: rgba(255,255,255,.85); line-height: 1.65; }

.maxed-message { margin-top: 30px; padding: 24px; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.04); line-height: 1.6; }

.inline-impact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 14px 16px; border-radius: 10px; background: rgba(232,52,142,.13); }
.inline-impact span { color: var(--muted); }
.inline-impact strong { color: white; font-size: 23px; }
.sub-question { margin-top: 34px; color: #f3ebf6; font-size: 15px; font-weight: 600; }
.average-deposit-entry { position: relative; z-index: 10; margin-top: 26px; }
.average-deposit-entry:has(.amount-currency-picker.is-open) { z-index: 100; }
.amount-input-shell { z-index: 10; overflow: visible; align-items: stretch; }
.amount-currency-picker { position: relative; z-index: 20; flex: 0 0 96px; width: 96px; }
.amount-currency-trigger { position: relative; width: 100%; height: 100%; padding: 0 32px 0 15px; color: white; border: 0; border-right: 1px solid rgba(255,255,255,.16); border-radius: 12px 0 0 12px; background: rgba(255,255,255,.055); font-size: 14px; font-weight: 750; text-align: left; cursor: pointer; }
.amount-currency-trigger::after { position: absolute; width: 7px; height: 7px; right: 15px; top: 50%; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: translateY(-70%) rotate(45deg); transition: transform .18s ease; }
.amount-currency-picker.is-open .amount-currency-trigger { background: rgba(232,52,142,.12); }
.amount-currency-picker.is-open .amount-currency-trigger::after { transform: translateY(-25%) rotate(225deg); }
.amount-currency-trigger:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(232,52,142,.82); }
.amount-currency-menu { position: absolute; z-index: 110; top: calc(100% + 8px); left: 0; width: 142px; display: grid; gap: 3px; padding: 6px; border: 1px solid rgba(232,52,142,.42); border-radius: 10px; background-color: #160a25; box-shadow: 0 18px 45px rgba(5,1,12,.68), 0 0 24px rgba(232,52,142,.16); isolation: isolate; }
.amount-currency-menu[hidden] { display: none; }
.amount-currency-option { min-height: 38px; padding: 0 11px; color: var(--muted); border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 13px; font-weight: 650; text-align: left; cursor: pointer; }
.amount-currency-option:hover, .amount-currency-option:focus-visible { color: white; outline: none; background: rgba(255,255,255,.08); }
.amount-currency-option[aria-selected="true"] { color: white; background: linear-gradient(110deg, rgba(251,116,52,.18), rgba(232,52,142,.2)); }
.amount-input-shell .inline-custom-currency { flex: 0 0 74px; width: 74px; padding: 17px 10px; border-right: 1px solid rgba(255,255,255,.16); font-size: 16px; text-align: center; }
.amount-input-shell #playerValue { flex: 1 1 auto; min-width: 0; }
.amount-currency-suffix { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0 18px 0 4px; color: var(--muted); font-size: 21px; font-weight: 650; }
.amount-currency-suffix:empty { display: none; }
.measurement-callout { display: grid; grid-template-columns: auto 1fr; gap: 18px; margin-top: 34px; padding: 26px; border: 1px solid rgba(251,116,52,.4); border-radius: var(--radius); background: rgba(251,116,52,.08); }
.measurement-callout > span { width: 44px; height: 44px; display: grid; place-items: center; color: #ffac68; border-radius: 12px; background: rgba(251,116,52,.12); }
.measurement-callout h2 { margin: 0; font-size: 24px; }
.measurement-callout p { margin: 8px 0 0; color: var(--muted); line-height: 1.55; }
.insights-intro { max-width: 720px; margin: 16px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.insights-stack { display: grid; gap: 18px; margin-top: 38px; }
.insights-stack.has-section-reveal > .summary-section { opacity: 0; transform: translateY(34px) scale(.985); }
.insights-stack.has-section-reveal > .summary-section.is-section-visible { animation: insights-section-reveal .72s cubic-bezier(.16,1,.3,1) var(--insights-section-delay, 0ms) both; }
@keyframes insights-section-reveal {
  0% { opacity: 0; transform: translateY(34px) scale(.985); }
  62% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.insights-findings .issue-grid { margin-top: 24px; }
.summary-section.insights-simulator > h2 { margin: 0 0 12px; color: #ffad69; font-size: 10px; font-weight: 800; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; }
.insights-simulator:has(.scenario-picker.is-open) { z-index: 150; }
.improvement-sentence { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 34px 0 52px; padding-left: 18px; color: white; font-size: clamp(24px, 3vw, 34px); font-weight: 780; line-height: 1.25; letter-spacing: -.03em; }
.improvement-sentence::before { position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #fb7434, var(--pink), #6b2ced); content: ""; }
.improvement-sentence-lead, .improvement-sentence-tail { display: inline-flex; align-items: center; gap: 10px; }
.improvement-sentence-lead { flex-wrap: wrap; }
.improvement-sentence-tail { white-space: nowrap; }
.scenario-picker { position: relative; z-index: 24; display: inline-flex; min-width: 0; }
.scenario-picker.is-open { z-index: 140; }
.scenario-trigger { position: relative; min-height: 52px; padding: 0 42px 0 15px; color: white; border: 1px solid rgba(255,255,255,.27); border-radius: 11px; background: rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); font: inherit; font-size: 18px; font-weight: 750; text-align: left; cursor: pointer; transition: color .18s, border-color .18s, background-color .18s, box-shadow .18s; }
.scenario-trigger:hover, .scenario-picker.is-open .scenario-trigger { color: white; border-color: rgba(232,52,142,.7); background: rgba(232,52,142,.12); }
.scenario-trigger:focus-visible { border-color: var(--pink); box-shadow: 0 0 0 3px white, 0 0 26px rgba(232,52,142,.2); outline: none; }
.scenario-chevron { position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid #ffad69; border-bottom: 1.5px solid #ffad69; transform: translateY(-70%) rotate(45deg); transition: transform .18s ease; }
.scenario-picker.is-open .scenario-chevron { transform: translateY(-25%) rotate(225deg); }
.scenario-uplift-trigger { min-width: 76px; color: #ffad69; }
.scenario-menu { z-index: 200; top: calc(100% + 8px); width: max-content; min-width: 100%; max-width: min(330px, 80vw); max-height: 270px; overflow-y: auto; }
.scenario-uplift-menu { min-width: 250px; grid-template-columns: repeat(5, minmax(38px, 1fr)); }
.scenario-uplift-menu .scenario-option { min-width: 0; text-align: center; }
.scenario-option { min-width: 100%; white-space: nowrap; }
.insight-funnel-scroll { width: 100%; margin-top: 22px; overflow: visible; }
.insight-funnel-chart { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.8vw, 20px); padding: 22px 4px 4px; overflow: visible; }
.insight-funnel-column { min-width: 0; }
.insight-funnel-plot { height: clamp(190px, 25vw, 255px); display: flex; align-items: flex-end; }
.insight-funnel-shell { position: relative; width: 100%; height: var(--funnel-shell-height); overflow: visible; border: 1px solid rgba(255,255,255,.18); border-radius: 11px 11px 8px 8px; background: rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.insight-funnel-fill { position: absolute; right: 0; bottom: 0; left: 0; height: var(--funnel-fill-height); overflow: visible; border: 1px solid rgba(255,76,170,.82); border-radius: 10px 10px 7px 7px; background: linear-gradient(180deg, #e8348e 0%, #b52fc2 42%, #6b2ced 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 22px rgba(232,52,142,.24), 0 12px 30px rgba(32,8,54,.25); }
.insight-funnel-growth { position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: var(--funnel-growth-height); min-height: 3px; border-radius: 9px 9px 3px 3px; background: linear-gradient(180deg, #71efbf, #35c98f); box-shadow: inset 0 -1px 0 rgba(9,75,54,.32), 0 0 18px rgba(88,214,169,.28); }
.insight-funnel-rate { position: absolute; z-index: 2; bottom: var(--funnel-fill-height); left: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 54px; padding: 5px 8px; color: white; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; background: #2b183b; box-shadow: 0 8px 18px rgba(0,0,0,.2); font-size: 12px; font-weight: 800; text-align: center; white-space: nowrap; transform: translate(-50%, 50%); }
.insight-funnel-rate small { color: var(--green); font-size: .82em; }
.insight-funnel-value { min-height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding-top: 8px; text-align: center; }
.insight-funnel-value em { color: var(--green); font-size: 11px; font-style: normal; font-weight: 850; }
.insight-funnel-chart.has-dropoffs .insight-funnel-value { min-height: 56px; }
.insight-funnel-value .insight-funnel-dropoff { color: #ff7896; font-size: 10px; letter-spacing: .01em; }
.insight-funnel-value strong { color: white; font-size: clamp(16px, 2.2vw, 22px); line-height: 1; letter-spacing: -.035em; }
.insight-funnel-label { min-height: 54px; display: grid; place-items: start center; padding-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.25; text-align: center; }
.insight-funnel-label span { max-width: 150px; }
.insight-funnel-column.is-unknown .insight-funnel-shell { border-style: dashed; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.035); box-shadow: none; }
.insights-performance .insight-funnel-column { --funnel-reveal-delay: 140ms; }
.insights-performance .insight-funnel-column:nth-child(2) { --funnel-reveal-delay: 260ms; }
.insights-performance .insight-funnel-column:nth-child(3) { --funnel-reveal-delay: 380ms; }
.insights-performance .insight-funnel-column:nth-child(4) { --funnel-reveal-delay: 500ms; }
.insights-performance .is-reveal-animated .insight-funnel-shell { animation: current-funnel-shell-reveal 260ms ease-out var(--funnel-reveal-delay) both; }
.insights-performance .is-reveal-animated .insight-funnel-fill { animation: current-funnel-fill-reveal 900ms cubic-bezier(.2,.78,.24,1) var(--funnel-reveal-delay) both; }
.insights-performance .is-reveal-animated .insight-funnel-rate { animation: current-funnel-rate-rise 900ms cubic-bezier(.2,.78,.24,1) var(--funnel-reveal-delay) both; }
.insights-performance .is-reveal-animated .insight-funnel-value { animation: current-funnel-copy-reveal 240ms ease-out var(--funnel-reveal-delay) both; }
.insights-performance .is-reveal-animated .insight-funnel-label { animation: current-funnel-copy-reveal 380ms ease-out calc(var(--funnel-reveal-delay) + 540ms) both; }
.insights-performance .value-impact { animation: current-funnel-result-reveal 480ms ease-out 1500ms both; }
.insights-simulator .is-growth-animated .insight-funnel-growth { transform-origin: center bottom; animation: simulator-growth-reveal 720ms cubic-bezier(.2,.78,.24,1) var(--growth-delay, 80ms) both; }
.insights-simulator .is-growth-animated .insight-funnel-column:nth-child(2) { --growth-delay: 160ms; }
.insights-simulator .is-growth-animated .insight-funnel-column:nth-child(3) { --growth-delay: 240ms; }
.insights-simulator .is-growth-animated .insight-funnel-column:nth-child(4) { --growth-delay: 320ms; }
.insights-simulator .is-growth-animated .insight-funnel-value em,
.insights-simulator .scenario-projected-value em { animation: simulator-gain-reveal 420ms ease-out 120ms both; }
.insights-simulator .scenario-projected-value em { animation-delay: 420ms; }
@keyframes current-funnel-shell-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes current-funnel-fill-reveal {
  from { height: 0; }
  to { height: var(--funnel-fill-height); }
}
@keyframes current-funnel-rate-rise {
  from { bottom: 0; }
  to { bottom: var(--funnel-fill-height); }
}
@keyframes current-funnel-copy-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes current-funnel-result-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes simulator-growth-reveal {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}
@keyframes simulator-gain-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.scenario-projection-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 10px; }
.projection-metric { display: flex; min-height: 112px; flex-direction: column; justify-content: space-between; }
.projection-metric > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: auto; }
.projection-metric > div strong { color: white; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.035em; overflow-wrap: anywhere; }
.projection-metric > div small { color: var(--green); font-size: 12px; font-weight: 800; }
.scenario-projected-value { display: grid; justify-items: start; gap: 7px; margin-top: 10px; padding: clamp(22px, 3.5vw, 32px); border: 1px solid rgba(232,52,142,.34); border-radius: 14px; background: linear-gradient(115deg, rgba(232,52,142,.2), rgba(101,42,235,.22)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.scenario-projected-value > span { color: var(--muted); font-size: 14px; line-height: 1.4; }
.scenario-projected-value strong { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 11px; color: white; font-size: clamp(38px, 5vw, 58px); line-height: 1; letter-spacing: -.045em; }
.scenario-projected-value strong small { font-size: .32em; letter-spacing: 0; }
.scenario-projected-value em { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 14px; font-style: normal; font-weight: 800; }
.scenario-projected-value em small { font-size: .86em; }
.scenario-basis-note { margin: 9px 0 0; color: var(--muted-2); font-size: 10px; line-height: 1.45; text-align: center; }
.insights-measurement .measurement-callout { margin-top: 0; }
.improvement-stage-tabs { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px; padding: 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(8,3,17,.28); }
.improvement-stage-tab { min-height: 42px; padding: 0 12px; color: var(--muted-2); border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: color .18s, background .18s, box-shadow .18s; }
.improvement-stage-tab:hover { color: white; background: rgba(255,255,255,.045); }
.improvement-stage-tab:focus-visible { color: white; outline: 2px solid white; outline-offset: 2px; }
.improvement-stage-tab.is-active { color: white; background: linear-gradient(115deg, rgba(251,116,52,.22), rgba(232,52,142,.19)); box-shadow: inset 0 0 0 1px rgba(232,52,142,.4); }
.improvement-stage-single { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.035); }
.improvement-stage-single span { color: var(--muted-2); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.improvement-stage-single strong { color: white; font-size: 13px; text-align: right; }
.scenario-impact-chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
.scenario-impact-chain > div { position: relative; display: grid; gap: 4px; padding: 13px 15px; border-radius: 10px; background: rgba(232,52,142,.1); }
.scenario-impact-chain > div:not(:first-child)::before { position: absolute; left: -8px; top: 50%; z-index: 2; color: #ff9e67; content: "→"; transform: translateY(-50%); }
.scenario-impact-chain span { color: var(--muted-2); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.scenario-impact-chain strong { color: white; font-size: 17px; }
.scenario-impact-chain em { color: var(--green); font-size: 12px; font-style: normal; font-weight: 800; }
.scenario-enhancement { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; padding: 10px 12px; border: 1px dashed rgba(255,255,255,.14); border-radius: 9px; }
.scenario-enhancement > span { color: var(--muted-2); font-size: 11px; line-height: 1.45; }
.scenario-enhancement button { padding: 3px 0; color: #ffad69; border: 0; background: transparent; font: inherit; font-size: 11px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.scenario-enhancement button:hover, .scenario-enhancement button:focus-visible { color: white; outline: none; }
.scenario-enhancement button:focus-visible { box-shadow: 0 2px 0 white; }
.measurement-unlock { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 22px; border: 1px solid rgba(251,116,52,.38); border-radius: 13px; background: linear-gradient(125deg, rgba(251,116,52,.08), rgba(232,52,142,.055)); }
.measurement-unlock-icon { width: 44px; height: 44px; display: grid; place-items: center; color: #ffac68; border-radius: 11px; background: rgba(251,116,52,.12); }
.measurement-unlock-icon .icon { width: 23px; }
.measurement-unlock-copy > span { color: #ffad69; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.measurement-unlock h3 { margin: 7px 0 0; color: white; font-size: clamp(19px, 2.5vw, 25px); line-height: 1.3; }
.measurement-unlock p { max-width: 720px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.measurement-add-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.measurement-add-actions button { min-height: 36px; padding: 0 12px; color: #ffb169; border: 1px solid rgba(251,116,52,.34); border-radius: 8px; background: rgba(251,116,52,.08); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: color .18s, border-color .18s, background .18s; }
.measurement-add-actions button:hover, .measurement-add-actions button:focus-visible { color: white; border-color: rgba(232,52,142,.62); background: rgba(232,52,142,.14); outline: none; }
.measurement-add-actions button:focus-visible { box-shadow: 0 0 0 2px white; }
.evidence-panel { overflow: hidden; background: radial-gradient(circle at 82% 10%, rgba(77,178,255,.1), transparent 31%), radial-gradient(circle at 10% 90%, rgba(232,52,142,.1), transparent 30%), rgba(255,255,255,.04); }
.evidence-heading { max-width: 780px; padding-right: 54px; }
.evidence-recommendation { display: inline-flex; min-height: 27px; align-items: center; padding: 0 10px; color: #ffb169; border: 1px solid rgba(251,116,52,.3); border-radius: 99px; background: rgba(251,116,52,.07); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.needs-context .evidence-recommendation { color: var(--green); border-color: rgba(88,214,169,.3); background: rgba(88,214,169,.07); }
.evidence-heading h2 { max-width: 710px; margin: 12px 0 0; color: white; font-size: clamp(26px, 3.7vw, 40px); line-height: 1.08; letter-spacing: -.04em; }
.evidence-heading p { margin: 10px 0 0; color: var(--muted-2); font-size: 12px; }
.evidence-heading p strong { color: white; }
.evidence-steps { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 24px; }
.evidence-step { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 320px) minmax(220px, 1fr); grid-template-areas: "header header" "visual copy"; column-gap: 24px; padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(10,4,20,.3); }
.evidence-step:not(:last-child)::after { position: absolute; z-index: 3; right: auto; bottom: -22px; left: 50%; display: grid; width: 26px; height: 26px; place-items: center; color: #ff9c66; border: 1px solid rgba(255,156,102,.24); border-radius: 50%; background: #1a0c28; font-size: 13px; content: "↓"; transform: translate(-50%,50%); }
.evidence-step.is-context:not(:last-child)::after { color: #72b7ff; border-color: rgba(114,183,255,.24); }
.evidence-step.is-start { border-color: rgba(232,52,142,.62); background: linear-gradient(155deg, rgba(232,52,142,.15), rgba(101,42,235,.1)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 36px rgba(32,8,54,.22); }
.needs-context .evidence-step.is-start { border-color: rgba(88,214,169,.5); background: linear-gradient(155deg, rgba(88,214,169,.09), rgba(77,178,255,.08)); }
.evidence-step header { grid-area: header; min-height: 30px; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.evidence-step header > span { display: grid; width: 28px; height: 28px; place-items: center; color: white; border-radius: 8px; background: rgba(255,255,255,.075); font-size: 9px; font-weight: 800; }
.evidence-step header > small { color: var(--muted-2); font-size: 8px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.evidence-step header > b { padding: 5px 6px; color: #ffb169; border-radius: 5px; background: rgba(251,116,52,.1); font-size: 7px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.needs-context .evidence-step header > b { color: var(--green); background: rgba(88,214,169,.1); }
.evidence-step-visual { position: relative; grid-area: visual; width: 100%; max-width: 320px; height: 220px; margin-top: 14px; overflow: visible; }
.evidence-step-copy { grid-area: copy; display: flex; flex-direction: column; justify-content: center; padding: 14px 8px 0 0; }
.evidence-step-copy h3 { margin: 0; color: white; font-size: 22px; line-height: 1.2; }
.evidence-step-copy p { margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.evidence-step-copy small { margin-top: auto; padding-top: 13px; color: #ffad69; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.evidence-step.is-context .evidence-step-copy small { color: #72b7ff; }
.mini-branch-flow { position: relative; width: 100%; height: 100%; }
.mini-branch-flow svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mini-branch-flow svg > path { fill: none; stroke: #c45cff; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(196,92,255,.42)); }
.mini-branch-flow svg > path.to-exit { stroke: #ff5b7f; filter: drop-shadow(0 0 4px rgba(255,91,127,.16)); }
.mini-branch-flow svg > path.to-deposit { stroke: var(--green); filter: drop-shadow(0 0 4px rgba(88,214,169,.16)); }
.mini-branch-flow svg > path.flow-path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1; animation: mini-flow-verify 7.2s cubic-bezier(.16,1,.3,1) infinite; }
.mini-branch-flow svg > path.path-bonus { animation-name: mini-flow-bonus; }
.mini-branch-flow svg > path.path-games { animation-name: mini-flow-games; }
.mini-branch-flow svg > path.path-exit { animation-name: mini-flow-exit; }
.mini-branch-flow svg > path.path-deposit-one { animation-name: mini-flow-deposit-one; }
.mini-branch-flow svg > path.path-deposit-two { animation-name: mini-flow-deposit-two; }
.mini-branch-flow marker path { fill: none; stroke: #c45cff; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.mini-branch-flow marker#exit-arrow path { stroke: #ff5b7f; }
.mini-branch-flow marker#deposit-arrow path { stroke: var(--green); }
.branch-node { --node-color: #d76dff; position: absolute; z-index: 2; width: 64px; min-height: 30px; padding-top: 16px; color: #f8f2fb; font-size: 10px; font-weight: 800; line-height: 1; text-align: center; text-shadow: 0 2px 7px rgba(8,2,18,.95); opacity: 0; transform: translate(-50%,-6px); animation: mini-node-start 7.2s ease-out infinite; }
.branch-node::before { position: absolute; top: 0; left: 50%; width: 8px; height: 8px; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; background: var(--node-color); box-shadow: 0 0 0 4px rgba(215,109,255,.1), 0 0 12px var(--node-color); content: ""; transform: translateX(-50%); }
.branch-node.is-start-node { --node-color: #f03d9e; left: 17%; top: 50%; }
.branch-node.is-verify { left: 44%; top: 17%; animation-name: mini-node-verify; }
.branch-node.is-bonus { left: 44%; top: 50%; animation-name: mini-node-bonus; }
.branch-node.is-games { left: 44%; top: 83%; animation-name: mini-node-games; }
.branch-node.is-exit { --node-color: #ff5b7f; left: 80%; top: 17%; color: #ff7898; animation-name: mini-node-exit; }
.branch-node.is-exit::before { box-shadow: 0 0 0 3px rgba(255,91,127,.1), 0 0 10px var(--node-color); }
.branch-node.is-deposit { --node-color: #58d6a9; left: 80%; top: 66%; color: #70e9bd; animation-name: mini-node-deposit; }
.branch-node.is-deposit::before { box-shadow: 0 0 0 3px rgba(88,214,169,.1), 0 0 10px var(--node-color); }
.branch-node.is-exit::before, .branch-node.is-deposit::before { animation: mini-node-pulse 2.2s ease-in-out infinite; }
.mini-field-funnel { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.mini-field-column { min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) 16px; gap: 4px; justify-items: center; }
.mini-field-column > span { color: #f2eaf5; font-size: 9px; font-weight: 700; line-height: 1; text-align: center; }
.mini-field-shell { position: relative; width: 100%; height: var(--mini-shell); align-self: end; border: 1px solid rgba(255,255,255,.22); border-radius: 6px 6px 4px 4px; background: rgba(255,255,255,.055); }
.mini-field-fill { position: absolute; right: 0; bottom: 0; left: 0; height: var(--mini-fill); border: 1px solid rgba(255,76,170,.7); border-radius: 5px 5px 3px 3px; background: linear-gradient(180deg, #e8348e, #9f2bd1 48%, #6b2ced); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 12px rgba(232,52,142,.16); transform-origin: bottom; animation: mini-field-one 7.2s cubic-bezier(.16,1,.3,1) infinite; }
.mini-field-column:nth-child(2) .mini-field-fill { animation-name: mini-field-two; }
.mini-field-column:nth-child(3) .mini-field-fill { animation-name: mini-field-three; }
.mini-field-count { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: white; font-size: 13px; font-style: normal; font-weight: 850; opacity: 0; text-shadow: 0 2px 8px rgba(13,3,22,.9); pointer-events: none; transition: opacity .18s ease-out; }
.mini-heatmap, .mini-recording { position: relative; height: 100%; overflow: hidden; }
.mini-site-frame { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(196,156,225,.22); border-radius: 8px; background: rgba(30,16,43,.9); box-shadow: 0 8px 18px rgba(8,2,16,.28); }
.mini-site-nav { height: 24px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(12,6,22,.82); }
.mini-site-nav b { width: 23px; height: 4px; margin-right: auto; border-radius: 3px; background: linear-gradient(90deg, #e8348e, #7830ec); box-shadow: 0 0 7px rgba(232,52,142,.24); }
.mini-site-nav span { width: 14px; height: 3px; border-radius: 2px; background: rgba(224,207,234,.22); }
.mini-site-hero { height: calc(58% - 12px); min-height: 47px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; column-gap: 10px; align-content: center; padding: 12px 16px; color: white; border-bottom: 1px solid rgba(232,52,142,.14); background: linear-gradient(120deg, rgba(102,42,235,.12), rgba(232,52,142,.15)); }
.mini-site-hero small { grid-column: 1; align-self: end; color: #d8c5e2; font-size: 7px; font-weight: 800; letter-spacing: .09em; }
.mini-site-hero strong { grid-column: 1; font-size: 16px; line-height: 1; }
.mini-site-hero > b { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 7px 10px; color: white; border: 1px solid rgba(255,102,182,.66); border-radius: 4px; background: linear-gradient(135deg, #e8348e, #7830ec); box-shadow: 0 0 10px rgba(232,52,142,.22); font-size: 7px; letter-spacing: .03em; }
.mini-site-grid { height: calc(42% - 12px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 14px; }
.mini-site-grid span { border: 1px solid rgba(203,172,220,.13); border-radius: 3px; background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(149,73,188,.08)); }
.mini-data-frame { background: linear-gradient(145deg, rgba(34,18,48,.96), rgba(22,10,35,.96)); }
.mini-data-body { position: absolute; inset: 25px 0 0; padding: 10px 18px; }
.mini-data-body .mini-branch-flow, .mini-data-body .mini-field-funnel { height: 100%; }
.field-data-body { padding: 12px 24px 8px; }
.heatmap-hotspot { position: absolute; z-index: 3; display: block; border: 2px solid rgba(255,237,111,.8); border-radius: 50%; background: rgba(255,83,49,.72); filter: blur(1.5px); box-shadow: 0 0 4px #ff5735, 0 0 11px #ff2e90, 0 0 18px rgba(255,224,74,.72); animation: mini-heatmap-pulse 2.4s ease-in-out infinite; }
.heatmap-hotspot.hotspot-nav { top: 10px; right: 18px; width: 10px; height: 10px; }
.heatmap-hotspot.hotspot-cta { top: 40%; right: 12%; width: 27px; height: 27px; }
.heatmap-hotspot.hotspot-card-one { bottom: 17%; left: 20%; width: 17px; height: 17px; }
.heatmap-hotspot.hotspot-card-two { right: 25%; bottom: 13%; width: 21px; height: 21px; }
.heatmap-hotspot.hotspot-cta { animation-delay: -.5s; }
.heatmap-hotspot.hotspot-card-one { animation-delay: -1s; }
.heatmap-hotspot.hotspot-card-two { animation-delay: -1.5s; }
.heatmap-click-key { position: absolute; z-index: 4; right: 8px; bottom: 4px; display: flex; align-items: center; gap: 3px; padding: 2px 4px; color: #eadff0; border: 1px solid rgba(255,255,255,.1); border-radius: 3px; background: rgba(15,7,25,.86); font-size: 5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.heatmap-click-key i { width: 5px; height: 5px; border-radius: 50%; background: #ff493d; box-shadow: 0 0 5px #ff2e90; }
.recording-site-frame { opacity: .72; }
.recording-trail { position: absolute; z-index: 2; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); overflow: visible; }
.recording-trail path { fill: none; stroke: #f04aa5; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 3 3; filter: drop-shadow(0 0 4px rgba(240,74,165,.7)); animation: mini-recording-trail 1.2s linear infinite; }
.recording-trail circle { fill: #ffad68; stroke: rgba(255,255,255,.75); stroke-width: 1; filter: drop-shadow(0 0 5px rgba(255,173,104,.8)); animation: mini-recording-dot 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.recording-play { position: absolute; z-index: 4; top: 50%; left: 50%; width: 28px; height: 28px; display: grid; place-items: center; padding-left: 2px; color: white; border: 1px solid rgba(255,100,180,.62); border-radius: 50%; background: linear-gradient(135deg, rgba(232,52,142,.94), rgba(101,42,235,.94)); box-shadow: 0 0 16px rgba(232,52,142,.28); font-size: 8px; transform: translate(-50%,-50%); animation: mini-play-pulse 2s ease-in-out infinite; }
.recording-cursor { position: absolute; z-index: 3; top: 78%; left: 16%; width: 0; height: 0; border-top: 8px solid white; border-right: 4px solid transparent; border-left: 4px solid transparent; filter: drop-shadow(0 2px 3px rgba(4,0,10,.7)); transform: rotate(-38deg); animation: mini-cursor-tour 4.8s cubic-bezier(.45,0,.55,1) infinite; }

@keyframes mini-flow-verify { 0%, 7% { stroke-dashoffset: 1; } 26%, 92% { stroke-dashoffset: 0; opacity: 1; } 95% { stroke-dashoffset: 0; opacity: 0; } 96%, 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes mini-flow-bonus { 0%, 12% { stroke-dashoffset: 1; } 31%, 92% { stroke-dashoffset: 0; opacity: 1; } 95% { stroke-dashoffset: 0; opacity: 0; } 96%, 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes mini-flow-games { 0%, 17% { stroke-dashoffset: 1; } 36%, 92% { stroke-dashoffset: 0; opacity: 1; } 95% { stroke-dashoffset: 0; opacity: 0; } 96%, 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes mini-flow-exit { 0%, 34% { stroke-dashoffset: 1; } 53%, 92% { stroke-dashoffset: 0; opacity: 1; } 95% { stroke-dashoffset: 0; opacity: 0; } 96%, 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes mini-flow-deposit-one { 0%, 39% { stroke-dashoffset: 1; } 58%, 92% { stroke-dashoffset: 0; opacity: 1; } 95% { stroke-dashoffset: 0; opacity: 0; } 96%, 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes mini-flow-deposit-two { 0%, 44% { stroke-dashoffset: 1; } 63%, 92% { stroke-dashoffset: 0; opacity: 1; } 95% { stroke-dashoffset: 0; opacity: 0; } 96%, 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes mini-node-start { 0%, 2% { opacity: 0; } 5%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes mini-node-verify { 0%, 24% { opacity: 0; } 28%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes mini-node-bonus { 0%, 29% { opacity: 0; } 33%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes mini-node-games { 0%, 34% { opacity: 0; } 38%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes mini-node-exit { 0%, 51% { opacity: 0; } 55%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes mini-node-deposit { 0%, 61% { opacity: 0; } 65%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes mini-node-pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.35); } }
@keyframes mini-field-one { 0%, 4% { transform: scaleY(.04); opacity: .5; } 22%, 92% { transform: scaleY(1); opacity: 1; } 98%, 100% { transform: scaleY(.04); opacity: .5; } }
@keyframes mini-field-two { 0%, 27% { transform: scaleY(.04); opacity: .5; } 45%, 92% { transform: scaleY(1); opacity: 1; } 98%, 100% { transform: scaleY(.04); opacity: .5; } }
@keyframes mini-field-three { 0%, 50% { transform: scaleY(.04); opacity: .5; } 68%, 92% { transform: scaleY(1); opacity: 1; } 98%, 100% { transform: scaleY(.04); opacity: .5; } }
@keyframes mini-heatmap-pulse { 0%, 100% { opacity: .5; transform: scale(.78); } 50% { opacity: 1; transform: scale(1.16); } }
@keyframes mini-recording-trail { to { stroke-dashoffset: -12; } }
@keyframes mini-recording-dot { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.35); } }
@keyframes mini-play-pulse { 0%, 100% { box-shadow: 0 0 12px rgba(232,52,142,.22); transform: translate(-50%,-50%) scale(.96); } 50% { box-shadow: 0 0 22px rgba(232,52,142,.42); transform: translate(-50%,-50%) scale(1.04); } }
@keyframes mini-cursor-tour { 0% { top: 78%; left: 16%; } 34% { top: 48%; left: 42%; } 66% { top: 30%; left: 69%; } 100% { top: 57%; left: 87%; } }
.evidence-outcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; padding: 22px 24px; border: 1px solid rgba(232,52,142,.24); border-radius: 14px; background: linear-gradient(115deg, rgba(232,52,142,.12), rgba(101,42,235,.1)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.evidence-outcome-copy { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.evidence-outcome-copy > div { display: grid; gap: 4px; }
.evidence-hotjar-logo { width: 168px; display: grid; place-items: center; }
.evidence-hotjar-logo img { display: block; width: 100%; height: auto; }
.evidence-outcome small { color: #ffad69; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.evidence-outcome strong { color: white; font-size: clamp(18px, 2vw, 24px); line-height: 1.2; letter-spacing: -.02em; }
.evidence-outcome p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.evidence-actions { flex: 0 0 auto; display: flex; gap: 10px; }
.evidence-actions a { min-height: 52px; display: inline-flex; align-items: center; gap: 9px; padding: 0 19px; color: white; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.05); font-size: 11px; font-weight: 750; text-decoration: none; }
.evidence-actions a:first-child { color: #1d1024; border-color: transparent; background: white; }
.evidence-actions .icon { width: 13px; }
.evidence-actions a:hover, .evidence-actions a:focus-visible { border-color: var(--pink); outline: none; }
.summary-grid { display: grid; gap: 16px; margin-top: 40px; }
.summary-section { position: relative; padding: clamp(24px, 4vw, 38px); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: rgba(255,255,255,.045); }
.summary-number { position: absolute; right: 26px; top: 20px; color: rgba(255,255,255,.12); font-size: 46px; font-weight: 800; letter-spacing: -.06em; }
.summary-section > h2 { margin: 0 0 25px; padding-right: 58px; font-size: 24px; }
.summary-intro { color: #ffae68; font-weight: 700; }
.summary-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.summary-list li { display: flex; gap: 10px; align-items: center; padding: 13px; color: var(--muted); border-radius: 9px; background: rgba(255,255,255,.035); }
.summary-list .icon { flex: 0 0 17px; width: 17px; color: #ff9761; }
.scenario-rate { display: flex; align-items: center; gap: 14px; margin: -8px 0 22px; font-size: 25px; }
.scenario-rate span { color: var(--muted); }
.scenario-rate .icon { width: 20px; color: var(--pink); }
.scenario-rate strong { color: white; }
.scenario-note { margin: 18px 0 0; color: var(--muted-2); font-size: 12px; }
.sales-message { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; margin-top: 18px; padding: clamp(28px, 5vw, 50px); border-radius: var(--radius-lg); background: var(--gradient); box-shadow: 0 30px 80px rgba(101,42,235,.22); }
.sales-message .section-eyebrow { color: white; }
.sales-message .section-eyebrow > span { background: white; }
.sales-message h2 { max-width: 800px; margin: 0; font-size: clamp(30px, 4.8vw, 52px); line-height: 1.08; letter-spacing: -.05em; }
.sales-message h2 > span { color: #210d2d; }
.sales-message p { max-width: 680px; margin: 20px 0 0; color: rgba(255,255,255,.86); line-height: 1.6; }
.sales-message .button { flex: 0 0 auto; }
.report-status { min-height: 20px; }
.restart-button { display: block; margin: 24px auto 0; padding: 10px 15px; color: var(--muted-2); border: 0; background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.restart-button:hover { color: white; }

.site-footer { min-height: 190px; display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 42px clamp(20px, 5vw, 72px); color: var(--muted-2); background: #0c0613; font-size: 13px; }
.site-footer > div { display: flex; flex-direction: column; gap: 7px; }
.footer-wordmark { color: white; font-size: 27px; font-weight: 750; }

#qa-tools { position: fixed; z-index: 1000; inset: 0; pointer-events: none; font-family: Inter, sans-serif; }
.qa-launcher { position: absolute; right: 18px; bottom: 18px; z-index: 2; min-width: 54px; min-height: 42px; padding: 0 14px; color: #160a25; border: 0; border-radius: 12px; background: var(--green); box-shadow: 0 12px 34px rgba(0,0,0,.38); font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; pointer-events: auto; }
.qa-launcher:hover, .qa-launcher:focus-visible { background: white; outline: none; }
.qa-panel { position: absolute; z-index: 3; top: 0; right: 0; width: min(450px, 100vw); height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: white; border-left: 1px solid rgba(255,255,255,.14); background: #160a25; box-shadow: -24px 0 80px rgba(0,0,0,.52); pointer-events: auto; }
.qa-panel[hidden] { display: none; }
.qa-panel header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.1); background: linear-gradient(110deg, rgba(232,52,142,.14), rgba(101,42,235,.12)); }
.qa-panel header > div { display: grid; gap: 2px; }
.qa-panel header span { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.qa-panel header strong { font-size: 18px; }
.qa-panel header button { width: 34px; height: 34px; color: var(--muted); border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(255,255,255,.05); font-size: 22px; cursor: pointer; }
.qa-panel header button:hover, .qa-panel header button:focus-visible { color: white; border-color: var(--pink); outline: none; }
.qa-panel-body { overflow-y: auto; overscroll-behavior: contain; padding: 18px; }
.qa-panel-body > section + section { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.09); }
.qa-panel h2 { margin: 0 0 11px; color: #ffb169; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.qa-screen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.qa-screen-grid button { min-height: 40px; padding: 8px 10px; color: var(--muted); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.035); font: inherit; font-size: 11px; font-weight: 650; line-height: 1.3; text-align: left; cursor: pointer; }
.qa-screen-grid button:hover, .qa-screen-grid button:focus-visible { color: white; border-color: rgba(232,52,142,.58); background: rgba(232,52,142,.1); outline: none; }
.qa-screen-grid button.is-current { color: white; border-color: var(--green); background: rgba(75,224,174,.09); }
.qa-question-links { grid-template-columns: 1fr; }
.qa-check-list { display: grid; gap: 7px; }
.qa-check-list label { min-height: 36px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; color: #e8dfeb; border-radius: 7px; background: rgba(255,255,255,.035); font-size: 11px; line-height: 1.35; cursor: pointer; }
.qa-check-list input { width: 15px; height: 15px; margin: 0; accent-color: var(--pink); }
.qa-fields { display: grid; gap: 10px; }
.qa-field { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.qa-field > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.qa-field input, .qa-field select, .qa-question-body select { width: 100%; min-width: 0; min-height: 38px; padding: 0 10px; color: white; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: #241333; font: inherit; font-size: 12px; }
.qa-field input:focus, .qa-field select:focus, .qa-question-body select:focus { border-color: var(--pink); outline: none; box-shadow: 0 0 0 2px rgba(232,52,142,.14); }
.qa-field small { color: var(--muted-2); font-size: 11px; }
.qa-question-editors { display: grid; gap: 7px; }
.qa-question { border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.025); }
.qa-question summary { min-height: 42px; display: flex; align-items: center; padding: 9px 12px; color: #e8dfeb; font-size: 11px; font-weight: 650; line-height: 1.4; cursor: pointer; }
.qa-question[open] summary { color: white; border-bottom: 1px solid rgba(255,255,255,.08); }
.qa-question-body { display: grid; gap: 8px; padding: 10px; }
.qa-panel footer { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.1); background: #160a25; }
.qa-panel footer button { min-height: 42px; color: white; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(255,255,255,.05); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.qa-panel footer button:hover, .qa-panel footer button:focus-visible { border-color: var(--pink); outline: none; }
.qa-panel footer button.qa-fill-test { grid-column: 1 / -1; border-color: rgba(232,52,142,.5); background: rgba(232,52,142,.12); }
.qa-panel footer button.qa-fill-test:hover, .qa-panel footer button.qa-fill-test:focus-visible { color: white; border-color: var(--pink); background: rgba(232,52,142,.2); }
.qa-panel footer button.is-primary { color: #160a25; border-color: transparent; background: var(--green); }
.qa-panel footer button.is-primary:hover, .qa-panel footer button.is-primary:focus-visible { background: white; }

@media (max-width: 760px) {
  .site-header { height: 64px; padding: 0 20px; }
  .brand { font-size: 14px; }
  .header-link { font-size: 13px; }
  .experience, .experience.is-wide { width: min(100% - 32px, 640px); padding: 28px 0; justify-content: flex-start; }
  .experience:not(.has-progress) { justify-content: center; }
  .experience.has-progress { grid-template-rows: 54px minmax(0, 1fr); padding-bottom: 84px; }
  .experience.has-progress .panel { padding: 18px 0 22px; }
  .experience.has-progress:has(.insights-panel) { height: 100svh; min-height: 100svh; grid-template-rows: 54px minmax(0, 1fr); overflow: hidden; padding-top: 12px; padding-bottom: 0; }
  .experience.has-progress:has(.insights-panel) .insights-panel { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 18px 0 40px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  h1 { font-size: clamp(38px, 12vw, 54px); }
  .question-title { text-wrap: wrap; }
  .lede { margin-top: 20px; font-size: 17px; line-height: 1.55; }
  .intro-meta { flex-direction: column; gap: 10px; }
  .intro-start { align-items: stretch; flex-direction: column; }
  .intro-start .button { width: 100%; }
  .trust-line { margin-top: 42px; gap: 8px; }
  .trust-line i { display: none; }
  .trust-line span { width: 100%; }
  .actions { align-items: stretch; flex-direction: column; }
  .experience.has-progress > .actions { bottom: 16px; width: calc(100% - 32px); flex-flow: row nowrap; align-items: stretch; gap: 6px; }
  .experience.has-progress .actions .button-primary, .experience.has-progress .actions .button-secondary { min-width: 0; flex: 1 1 0; width: auto; padding-inline: 8px; font-size: 12px; line-height: 1.2; }
  .experience.has-progress .actions .button-placeholder { min-width: 0; flex: 1 1 0; width: auto; }
  .actions .button-primary, .actions .button-secondary { flex-basis: 52px; width: 100%; }
  .progress-state { height: 54px; }
  .progress-steps { gap: 10px; }
  .progress-steps li { min-height: 46px; gap: 6px; padding: 0 1px 9px; }
  .step-marker { font-size: 10px; }
  .step-copy strong { font-size: 11px; }
  .progress-problem-count { gap: 3px; font-size: 8px; letter-spacing: 0; }
  .button { width: 100%; }
  .segmented-control, .segmented-control.columns-one, .segmented-control.columns-two, .segmented-control.columns-three { grid-template-columns: 1fr; }
  .option-card { min-height: 64px; }
  .tracking-metric-entry { width: 100%; margin-top: 26px; }
  .quantify-question-layout { grid-template-columns: 1fr; align-items: start; gap: 28px; }
  .quantify-question-copy .question-counter { margin-bottom: 16px; }
  .quantify-question-copy .question-title { font-size: clamp(32px, 9.5vw, 44px); }
  .quantify-question-note { margin-top: 14px; font-size: 13px; }
  .quantify-control-card { padding: 21px 18px; border-radius: 15px; }
  .cashier-feature-option, .cashier-feature-option.is-selected { min-height: 48px; padding: 6px 0; font-size: 13px; }
  .cashier-feature-option.is-unknown { padding-top: 10px; }
  .progress-visibility-grid { grid-template-columns: 1fr; }
  .progress-visibility-card { min-height: 116px; grid-template-columns: minmax(124px, .9fr) minmax(0, 1fr); grid-template-rows: 1fr; align-items: center; gap: 12px; }
  .progress-ui-preview { height: 97px; }
  .progress-preview-window { grid-template-rows: 12px 1fr; }
  .progress-preview-body { gap: 5px; padding: 6px; }
  .progress-preview-stepper { width: min(100%, 104px); grid-template-columns: 13px 1fr 13px 1fr 13px; }
  .progress-preview-stepper i { width: 13px; height: 13px; font-size: 5px; }
  .progress-preview-form { width: min(100%, 104px); }
  .progress-preview-form i { height: 9px; }
  .progress-preview-form b { min-height: 13px; font-size: 5px; }
  .progress-preview-unknown { width: 40px; height: 40px; font-size: 20px; }
  .post-registration-options { margin-top: 30px; }
  .post-registration-destinations { grid-template-columns: 1fr; gap: 8px; }
  .post-registration-destination { min-height: 70px; gap: 11px; padding: 10px 13px; }
  .post-registration-destination .option-label { font-size: 14px; }
  .post-registration-destination-detail { font-size: 11px; }
  .option-leading-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .option-leading-icon .icon { width: 16px; height: 16px; }
  .cashier-builder { grid-template-columns: 1fr; }
  .panel-enter > .cashier-question-options, .panel-enter > .password-question-options { animation: none; }
  .experience.has-progress:has(.mobile-preview-launch) { padding-bottom: 144px; }
  .mobile-preview-controls { display: block; }
  .mobile-preview-launch { position: fixed; z-index: 21; right: 16px; bottom: 76px; left: 16px; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 0 18px; color: white; border: 1px solid rgba(232,52,142,.55); border-radius: 8px; background: linear-gradient(105deg, rgba(232,52,142,.22), rgba(101,42,235,.2)); box-shadow: 0 10px 28px rgba(8,2,17,.24); font-weight: 750; cursor: pointer; }
  .mobile-preview-launch:focus-visible, .mobile-preview-close:focus-visible { outline: 3px solid white; outline-offset: 3px; }
  .cashier-builder[data-cashier-mobile-view="options"] > .cashier-screen,
  .password-feature-builder[data-cashier-mobile-view="options"] > .password-preview-screen { display: none; }
  .calculator-shell:has(> .mobile-preview-modal-builder)::after { position: fixed; z-index: 200; inset: 0; content: ""; background: rgba(8,3,15,.9); backdrop-filter: blur(14px); }
  body:has(.mobile-preview-modal-builder) { overflow: hidden; }
  .mobile-preview-modal-builder { position: fixed; z-index: 201; inset: max(16px, env(safe-area-inset-top)) 16px calc(84px + env(safe-area-inset-bottom)); width: auto; min-height: 0; display: block; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; animation: mobile-preview-pop .36s cubic-bezier(.16,1,.3,1) both; }
  .mobile-preview-modal-builder > .cashier-feature-list,
  .mobile-preview-modal-builder > .password-feature-list { display: none !important; }
  .mobile-preview-modal-builder > .cashier-screen,
  .mobile-preview-modal-builder > .password-preview-screen { width: 100%; min-height: 100%; display: block !important; }
  .experience.is-mobile-preview-open .mobile-preview-launch { display: none; }
  .experience.is-mobile-preview-open .mobile-preview-close { position: fixed; z-index: 202; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); left: 16px; min-height: 52px; display: flex; align-items: center; justify-content: center; color: #1b1120; border: 0; border-radius: 8px; background: #fdfcfe; box-shadow: 0 12px 34px rgba(8,2,17,.35); font-weight: 750; cursor: pointer; }
  .cashier-feature-list { gap: 10px; }
  .cashier-screen-body { min-height: 230px; gap: 26px; padding: 20px 16px 22px; }
  .cashier-screen-footer { gap: 18px; padding: 4px 16px 26px; }
  .password-feature-builder { grid-template-columns: 1fr; }
  .password-feature-list { gap: 10px; }
  .registration-structure-question { font-size: clamp(30px, 8vw, 42px); }
  .structure-keep > .structure-picker + span { margin-left: 8px; }
  .structure-picker { min-width: 0; font-size: 20px; }
  .structure-trigger { min-width: 112px; min-height: 52px; padding-right: 34px; padding-left: 12px; }
  .structure-trigger::after { right: 13px; }
  .feedback-sections { grid-template-columns: 1fr; gap: 8px; margin-top: 13px; }
  .feedback-section-heading { padding: 9px 10px; }
  .feedback-section li { padding: 10px; }
  .feedback-gap-heading { align-items: flex-start; font-size: 11px; }
  .question-heading-row > .tooltip-control { margin-top: 3px; }
  .step-complete-note { margin-top: 10px; padding: 12px 14px; }
  .step-complete-note p { font-size: 11px; }
  .issue-summary { min-height: 86px; gap: 12px; padding: 17px 16px; }
  .issue-summary-copy > strong { font-size: 16px; }
  .issue-toggle { width: 30px; height: 30px; }
  .issue-body { padding: 0 16px 18px; }
  .behaviour-message { grid-template-columns: 1fr; }
  .behaviour-mark { width: 44px; height: 44px; }
  .amount-currency-picker { flex-basis: 88px; width: 88px; }
  .amount-currency-trigger { padding-right: 27px; padding-left: 12px; }
  .amount-currency-trigger::after { right: 12px; }
  .amount-input-shell .inline-custom-currency { flex-basis: 66px; width: 66px; }
  .amount-currency-suffix { padding-right: 14px; font-size: 19px; }
  .evidence-heading { padding-right: 34px; }
  .evidence-step { grid-template-columns: 1fr; grid-template-areas: "header" "visual" "copy"; padding: 16px; }
  .evidence-step:not(:last-child)::after { bottom: -19px; }
  .evidence-step-visual { height: 150px; }
  .evidence-step-copy { padding: 16px 0 0; }
  .evidence-step-copy h3 { font-size: 18px; }
  .evidence-step-copy p { font-size: 12px; }
  .evidence-outcome { align-items: stretch; flex-direction: column; }
  .evidence-outcome-copy { grid-template-columns: 1fr; }
  .evidence-hotjar-logo { width: 152px; }
  .evidence-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .evidence-actions a { justify-content: center; text-align: center; }
  .improvement-stage-tabs { grid-template-columns: 1fr; }
  .scenario-impact-chain { grid-template-columns: 1fr; }
  .scenario-impact-chain > div:not(:first-child)::before { left: 50%; top: -10px; transform: translateX(-50%) rotate(90deg); }
  .measurement-unlock { grid-template-columns: 1fr; padding: 18px; }
  .improvement-sentence { align-items: flex-start; gap: 9px; margin-bottom: 17px; padding-left: 14px; font-size: 24px; }
  .improvement-sentence-tail { flex-wrap: wrap; white-space: normal; }
  .scenario-trigger { min-height: 48px; padding-right: 36px; padding-left: 12px; font-size: 16px; }
  .scenario-uplift-menu { min-width: 82px; }
  .insight-funnel-scroll { margin-top: 16px; }
  .insight-funnel-chart { gap: 6px; padding-right: 0; padding-left: 0; }
  .insight-funnel-plot { height: clamp(170px, 48vw, 210px); }
  .insight-funnel-shell { border-radius: 8px 8px 6px 6px; }
  .insight-funnel-fill { border-radius: 7px 7px 5px 5px; }
  .insight-funnel-rate { min-width: 40px; padding: 4px 5px; border-radius: 6px; font-size: 10px; }
  .insight-funnel-value { min-height: 34px; gap: 2px; padding-top: 7px; }
  .insight-funnel-value em { font-size: 9px; }
  .insight-funnel-chart.has-dropoffs .insight-funnel-value { min-height: 50px; }
  .insight-funnel-value .insight-funnel-dropoff { font-size: 8px; }
  .insight-funnel-value strong { font-size: clamp(12px, 3.5vw, 18px); }
  .insight-funnel-label { min-height: 60px; padding-top: 8px; font-size: 9px; overflow-wrap: anywhere; }
  .scenario-projected-value { gap: 6px; padding: 20px; }
  .projection-metric { display: grid; min-height: 0; }
  .projection-metric > div { align-items: flex-end; margin-top: 0; }
  .summary-list { grid-template-columns: 1fr; }
  .journey-score-overview { grid-template-columns: 1fr; gap: 18px; padding: 17px; }
  .journey-score-total { padding: 0 0 17px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); }
  .journey-score-row { grid-template-columns: minmax(112px, 1fr) minmax(64px, 1fr) 26px; gap: 8px; }
  .journey-score-row > span { font-size: 10px; }
  .journey-stage-heading h3 { font-size: 15px; }
  .journey-stage-issues .issue-summary { min-height: 70px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 13px; }
  .journey-stage-issues .issue-icon { width: 30px; height: 30px; }
  .journey-stage-issues .issue-summary-copy > strong { font-size: 14px; }
  .journey-stage-issues .issue-body { padding: 0 14px 17px; }
  .sales-message { grid-template-columns: 1fr; align-items: stretch; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
  .problem-count-full { display: none; }
  .problem-count-compact { display: inline; }
}

@keyframes mobile-preview-pop {
  from { opacity: 0; transform: translateY(18px) scale(.975); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 430px) {
  .experience, .experience.is-wide { width: calc(100% - 32px); }
  .section-eyebrow { font-size: 11px; }
  .progress-steps li { min-height: 46px; padding: 0 1px 9px; }
  .step-marker { font-size: 9px; }
  .step-copy strong { font-size: 9px; }
  .actions { margin-top: 30px; }
  .input-shell { min-height: 60px; }
  .input-shell input { font-size: 21px; }
  .range-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .range-heading output { font-size: 32px; }
  .behaviour-message, .summary-section, .sales-message { padding: 22px; }
  .insight-funnel-chart { gap: 4px; }
  .insight-funnel-plot { height: 168px; }
  .insight-funnel-rate { min-width: 34px; padding: 3px 4px; font-size: 8px; }
  .insight-funnel-value strong { font-size: clamp(10px, 3.2vw, 14px); }
  .insight-funnel-value em { font-size: 8px; }
  .insight-funnel-label { font-size: 8px; }
  .summary-number { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .step-copy.has-insight-rotation > strong { opacity: 0; animation: none !important; }
  .progress-problem-count { opacity: 1; transform: none; animation: none !important; }
  .insights-stack.has-section-reveal > .summary-section { opacity: 1; transform: none; }
  .progress-preview-stepper i,
  .progress-preview-stepper b::after,
  .progress-preview-form,
  .progress-preview-form i,
  .progress-preview-count span { animation: none !important; }
  .progress-preview-stepper .step-one { color: #170b25; border-color: var(--green); background: var(--green); box-shadow: none; }
  .progress-preview-stepper .step-two { color: white; border-color: var(--pink); background: rgba(232,52,142,.22); box-shadow: 0 0 10px rgba(232,52,142,.34); }
  .progress-preview-stepper .line-one::after { transform: scaleX(1); }
  .progress-preview-count span:nth-child(2) { opacity: 1; }
  .mini-branch-flow svg > path.flow-path { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .branch-node { animation: none !important; opacity: 1 !important; }
  .mini-field-fill { animation: none !important; transform: none !important; opacity: 1 !important; }
  .mini-field-count { display: none; }
  .insights-performance .insight-funnel-shell,
  .insights-performance .insight-funnel-value,
  .insights-performance .insight-funnel-label,
  .insights-performance .value-impact { animation: none !important; }
  .insights-simulator .insight-funnel-growth,
  .insights-simulator .insight-funnel-value em,
  .insights-simulator .scenario-projected-value em { animation: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@font-face { font-family:Inter; src:url('/assets/fonts/InterVariable.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
.calculator-home { position:absolute; top:18px; left:24px; z-index:5; display:block; }
.calculator-home img { display:block; width:112px; height:50px; object-fit:contain; }
.calculator-home:focus-visible { outline:2px solid #ff963e; outline-offset:5px; border-radius:8px; }
.calculator-shell:has(.has-progress) .calculator-home { display:none; }
.option-card { border-radius:16px; transition:border-color .25s ease,background .25s ease,box-shadow .25s ease; }
.option-card.is-selected { box-shadow:inset 0 0 0 1px #ffab6355,0 0 30px #bd3fbb24; }
.question-title { text-wrap:balance; }
.question-counter { color:#ffb46e; }
.auto-next-timer { display:none; width:23px; height:23px; flex:0 0 23px; transform:rotate(-90deg); }
.auto-next-timer.is-counting { display:block; }
.auto-next-timer circle { fill:none; stroke:currentColor; stroke-width:2.5; }
.timer-track { opacity:.18; }
.auto-next-timer.is-counting .timer-progress { stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; animation:answer-countdown var(--countdown-duration,1200ms) linear forwards; }
@keyframes answer-countdown { to { stroke-dashoffset:1; } }
.auto-next-timer.is-counting .timer-progress { animation-duration:var(--countdown-duration,1200ms) !important; }
/* Readable full-size password demo, including optional feedback states. */
.password-preview-header { min-height:88px; padding:18px 26px; }
.password-preview-header small { font-size:11px; }
.password-preview-header b { font-size:20px; line-height:1.3; }
.password-preview-header > i { font-size:12px; padding:8px 10px; white-space:nowrap; }
.password-preview-body { gap:16px; padding:26px; }
.password-preview-field-label > b, .password-preview-repeat > small { font-size:14px; }
.password-preview-input, .password-preview-repeat > span { min-height:64px; padding:12px 18px; border-radius:12px; }
.password-preview-value { width:170px; height:30px; }
.password-preview-value > b, .password-preview-repeat > span b { font-size:22px; }
.password-preview-value > em { font-size:19px; }
.password-preview-placeholder { font-size:14px; }
.password-preview-eye { width:38px; height:38px; flex-shrink:0; }
.password-preview-eye .icon { width:20px; }
.password-preview-autofill { font-size:12px; gap:6px; }
.password-preview-autofill .icon { width:15px; height:15px; }
.password-preview-requirements { padding:16px; gap:9px; }
.password-preview-requirements small { font-size:11px; }
.password-preview-requirements i { font-size:13px; line-height:1.5; gap:9px; }
.password-preview-requirements i b { width:18px; height:18px; flex-shrink:0; font-size:10px; }
.password-preview-repeat { gap:10px; }
.password-preview-repeat > i { font-size:12px; }
.password-preview-action { min-height:58px; font-size:15px; gap:14px; border-radius:12px; }
.password-preview-action i { font-size:18px; }
.password-preview-unknown { inset:88px 0 0; }
.password-preview-unknown span { font-size:14px; }
@media(max-width:600px) { .password-preview-header { padding:16px 18px; } .password-preview-header b { font-size:18px; } .password-preview-body { padding:20px 18px; } .password-preview-field-label { flex-wrap:wrap; } }
@media(max-width:760px) {
  .experience.has-progress:has(.mobile-preview-launch) { padding-bottom:210px; }
  .mobile-preview-launch { left:auto; right:16px; bottom:80px; width:156px; height:132px; min-height:0; padding:0; display:block; overflow:hidden; border:1px solid #b65cec; border-radius:13px; background:#1c1028; box-shadow:0 10px 30px #0009,0 0 18px #8c37d333; }
  .mini-preview-viewport { display:block; width:100%; height:103px; overflow:hidden; pointer-events:none; text-align:left; }
  .mini-preview-viewport .mini-preview-builder { display:block; width:500px; margin:0; transform:scale(.31); transform-origin:top left; pointer-events:none; }
  .mini-preview-builder > .cashier-feature-list, .mini-preview-builder > .password-feature-list { display:none !important; }
  .mini-preview-builder > .cashier-screen, .mini-preview-builder > .password-preview-screen { display:block !important; width:500px; min-height:330px; }
  .mini-preview-caption { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; font-size:11px; line-height:16px; background:#362044; color:#f6eaff; pointer-events:none; }
  .mini-preview-caption b { font-size:15px; }
  .experience.is-mobile-preview-open .mobile-preview-close { gap:14px; }
}
.cashier-screen-title > b { font-size:21px; }
.cashier-screen-title > small { font-size:11px; }
.cashier-screen-title > small .icon { width:13px; height:13px; }
.cashier-screen-header { min-height:76px; }
.cashier-screen-close { width:32px; height:32px; font-size:18px; }
.cashier-area-title { font-size:13px; }
.cashier-payment-tiles > i { min-height:66px; padding:10px; }
.cashier-payment-tiles > i b { font-size:13px; }
.cashier-payment-tiles > i small { font-size:10px; }
.cashier-payment-tiles > i em { width:16px; height:16px; font-size:10px; }
.cashier-amount-heading { flex-wrap:wrap; gap:6px 12px; }
.cashier-amount-heading > small { font-size:10px; }
.cashier-amount-field { min-height:64px; }
.cashier-amount-field > b { font-size:28px; }
.cashier-amount-field > i { font-size:19px; }
.cashier-amount-field > small { font-size:11px; }
.cashier-amount-chips i { min-height:38px; font-size:12px; }
.cashier-preview-deposit-limits { font-size:11px; }
.cashier-bonus-preview { min-height:72px; padding:12px; }
.cashier-bonus-preview > strong { width:36px; height:36px; font-size:17px; }
.cashier-bonus-preview small { font-size:10px; }
.cashier-bonus-preview b { font-size:14px; }
.cashier-bonus-preview i { font-size:11px; line-height:1.4; }
.cashier-footer-fees { flex-wrap:wrap; gap:8px 14px; }
.cashier-footer-fees i { font-size:11px; }
.cashier-deposit-action { min-height:56px; font-size:15px; }
.cashier-deposit-action i { font-size:18px; }
.cashier-footer-support { font-size:11px; }
.cashier-footer-support .icon { width:15px; height:15px; }
.audit-missing-metrics { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.audit-missing-metrics h3 { margin: 0 0 8px; font-size: 18px; }
.audit-missing-metrics > p { color: var(--muted, #b9b1c7); line-height: 1.5; }