:root { color-scheme: dark; --ink: #06060e; --ink-2: #0a0918; --panel: rgba(255, 255, 255, 0.065); --panel-strong: rgba(255, 255, 255, 0.095); --stroke: rgba(255, 255, 255, 0.12); --stroke-soft: rgba(255, 255, 255, 0.075); --text: #fff; --muted: rgba(255, 255, 255, 0.62); --quiet: rgba(255, 255, 255, 0.4); --violet: #a16eff; --violet-deep: #6333eb; --cyan: #4dc7ff; --mint: #4de6ad; --warm: #ffba61; --danger: #ff6a7e; --radius: 24px; --content: 560px; font-family: Inter, ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; }
*, ::before, ::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); text-size-adjust: 100%; }
body { min-width: 320px; min-height: 100dvh; margin: 0px; overflow-x: hidden; color: var(--text); background: radial-gradient(1100px 720px at 18% -8%, rgba(161, 110, 255, 0.27), transparent 60%),

    radial-gradient(900px 680px at 92% 108%, rgba(77, 199, 255, 0.11), transparent 58%),

    var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; }
body::before { position: fixed; inset: 0px; z-index: 0; pointer-events: none; content: ""; opacity: 0.5; background-image: radial-gradient(circle at 11% 17%, rgba(255, 255, 255, 0.4) 0px, rgba(255, 255, 255, 0.4) 1px, transparent 1.3px), radial-gradient(circle at 72% 9%, rgba(255, 255, 255, 0.24) 0px, rgba(255, 255, 255, 0.24) 0.8px, transparent 1.2px), radial-gradient(circle at 88% 38%, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0.3) 1px, transparent 1.3px), radial-gradient(circle at 25% 72%, rgba(255, 255, 255, 0.23) 0px, rgba(255, 255, 255, 0.23) 0.8px, transparent 1.2px), radial-gradient(circle at 63% 83%, rgba(255, 255, 255, 0.28) 0px, rgba(255, 255, 255, 0.28) 1px, transparent 1.3px); background-size: 230px 260px, 290px 250px, 330px 310px, 270px 330px, 350px 280px; }
button, input { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.funnel-shell { position: relative; z-index: 1; width: 100%; min-height: 100dvh; }
.screen { width: 100%; min-height: 100dvh; padding: max(10px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.screen-enter { animation: 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) 0s 1 normal both running screen-in; }
@keyframes screen-in {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.funnel-topbar { display: grid; grid-template-columns: 46px minmax(0px, 1fr) auto; align-items: center; gap: 14px; width: min(100%, var(--content)); min-height: 54px; margin: 0px auto; }
.back-button, .paywall-nav button { display: grid; width: 46px; height: 46px; padding: 0px 0px 4px; place-items: center; border: 1px solid var(--stroke-soft); border-radius: 50%; color: rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.07); font-size: 31px; line-height: 1; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.back-button:hover, .paywall-nav button:hover { background: rgba(255, 255, 255, 0.12); transform: translateX(-2px); }
.back-button:focus-visible, button:focus-visible, input:focus-visible { outline: rgba(77, 199, 255, 0.38) solid 3px; outline-offset: 3px; }
.top-progress { height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.09); }
.top-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: rgba(77, 199, 255, 0.4) 0px 0px 14px; transition: width 0.4s; }
.time-label { color: var(--quiet); font-size: 10px; font-weight: 800; letter-spacing: 0.13em; }
.topbar-spacer { grid-column: 2 / 4; }
h1, h2, p { margin-top: 0px; }
h1, h2 { text-wrap: balance; }
.question-content, .insight-content, .form-screen, .blocker-ready, .feature-screen, .commitment-screen, .trend-screen, .price-screen, .paywall-screen { width: min(100%, var(--content)); margin-inline: auto; }
.question-content { padding-top: clamp(46px, 10vh, 92px); padding-bottom: 28px; }
.eyebrow, .gradient-eyebrow {
  margin-bottom: 12px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.eyebrow.mint { color: var(--mint); }
.gradient-eyebrow { background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; color: transparent; }
.question-content h1, .insight-content h1, .form-screen h1, .blocker-ready h1, .feature-screen h1, .commitment-screen h1, .trend-screen h1, .price-screen h1 { margin-bottom: 15px; color: rgb(255, 255, 255); font-size: clamp(29px, 7.7vw, 38px); font-weight: 850; line-height: 1.11; letter-spacing: -0.035em; }
.question-helper, .form-copy, .insight-copy, .blocker-ready > p, .feature-screen > p, .price-screen > p { color: var(--muted); font-size: 16px; font-weight: 500; line-height: 1.55; }
.option-list { display: grid; gap: 12px; margin-top: clamp(28px, 6vh, 48px); }
.option { display: grid; grid-template-columns: 36px minmax(0px, 1fr) 22px; align-items: center; gap: 12px; width: 100%; min-height: 70px; padding: 14px 17px; border: 1px solid var(--stroke-soft); border-radius: 19px; color: rgb(255, 255, 255); text-align: left; background: var(--panel); box-shadow: rgba(255, 255, 255, 0.03) 0px 1px inset; cursor: pointer; opacity: 0; transform: translateY(10px); animation: option-in .35s calc(70ms + var(--i) * 65ms) ease forwards; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
@keyframes option-in {
  100% { opacity: 1; transform: none; }
}
.option:hover { border-color: rgba(161, 110, 255, 0.45); background: rgba(161, 110, 255, 0.11); transform: translateY(-1px); }
.option.is-selected { border-color: rgba(161, 110, 255, 0.82); background: linear-gradient(135deg, rgba(161, 110, 255, 0.19), rgba(77, 199, 255, 0.09)); }
.option:disabled { cursor: default; }
.option-index { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.07); font-size: 13px; font-weight: 800; }
.option-label { font-size: 16px; font-weight: 650; line-height: 1.3; }
.option-arrow { color: rgba(255, 255, 255, 0.25); font-size: 15px; font-weight: 800; }
.primary-button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 58px; padding: 15px 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px; color: rgb(255, 255, 255); background: linear-gradient(135deg, var(--violet), var(--violet-deep)); box-shadow: rgba(99, 51, 235, 0.3) 0px 14px 34px, rgba(255, 255, 255, 0.2) 0px 1px inset; font-size: 16px; font-weight: 800; cursor: pointer; transition: transform 0.2s, filter 0.2s, opacity 0.2s; }
.primary-button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-2px); }
.primary-button:active:not(:disabled) { transform: scale(0.985); }
.primary-button:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.primary-button > span:last-child { font-size: 19px; }
.welcome-screen { overflow: hidden; }
.welcome { display: flex; flex-direction: column; align-items: center; min-height: calc(100dvh - 32px); text-align: center; }
.marble-wordmark { display: flex; gap: 4px; margin-top: clamp(72px, 12vh, 120px); font-size: clamp(30px, 8vw, 42px); font-weight: 900; letter-spacing: 0.03em; }
.marble-wordmark span { position: relative; opacity: 0; animation: marble-land .85s calc(.1s + var(--i) * .09s) cubic-bezier(.2,.85,.25,1.15) forwards; }
.marble-wordmark span::before { position: absolute; inset: 10%; z-index: -1; border-radius: 50%; content: ""; background: radial-gradient(circle at 30% 24%, white, var(--orb), rgba(120,75,235,.45) 70%); filter: blur(0.2px); opacity: 0; animation: marble-fade .38s calc(.68s + var(--i) * .09s) ease both; box-shadow: 0 4px 17px var(--orb); }
.marble-wordmark span:nth-child(1) { --orb: #a16eff; }
.marble-wordmark span:nth-child(2) { --orb: #9e8fff; }
.marble-wordmark span:nth-child(3) { --orb: #ff9ecc; }
.marble-wordmark span:nth-child(4) { --orb: #8cebcf; }
.marble-wordmark span:nth-child(5) { --orb: #ffd16b; }
.marble-wordmark span:nth-child(6) { --orb: #b8ccff; }
.marble-wordmark span:nth-child(7) { --orb: #ffb884; }
@keyframes marble-land {
  0% { opacity: 1; transform: translateX(var(--from)) rotate(var(--spin)); color: transparent; }
  70% { color: transparent; }
  100% { opacity: 1; transform: none; color: white; }
}
@keyframes marble-fade {
  0% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(0.5); }
}
.welcome-copy { margin-top: clamp(56px, 9vh, 84px); opacity: 0; animation: 0.55s ease 1.25s 1 normal forwards running welcome-copy; }
@keyframes welcome-copy {
  100% { opacity: 1; transform: none; }
  0% { opacity: 0; transform: translateY(14px); }
}
.welcome-copy h1 { margin: 0px; font-size: clamp(32px, 8.2vw, 44px); line-height: 1.14; letter-spacing: -0.035em; }
.welcome-copy h1 span { display: block; color: rgb(194, 168, 255); }
.welcome-copy p { max-width: 390px; margin: 22px auto 0px; color: rgba(255, 255, 255, 0.88); font-size: 17px; line-height: 1.55; }
.rating { margin-top: 25px; color: rgb(255, 211, 95); font-size: 18px; letter-spacing: 0.08em; }
.rating strong { margin-left: 7px; color: rgb(255, 255, 255); font-size: 16px; letter-spacing: 0px; }
.welcome-action { display: flex; flex-direction: column; align-items: center; gap: 15px; margin: auto 0px 38px; opacity: 0; animation: 0.55s ease 1.55s 1 normal forwards running welcome-copy; }
.marble-button { display: grid; width: 108px; height: 108px; padding-bottom: 4px; place-items: center; border: 0px; border-radius: 50%; color: white; background: radial-gradient(circle at 32% 25%, rgb(221, 210, 255) 0px, rgb(221, 210, 255) 3%, rgb(161, 110, 255) 27%, rgb(99, 51, 235) 72%); box-shadow: rgba(161, 110, 255, 0.52) 0px 10px 34px, rgba(30, 5, 90, 0.28) -8px -12px 24px inset, rgba(255, 255, 255, 0.22) 6px 8px 16px inset; font-size: 38px; cursor: pointer; animation: 2.5s ease-in-out 0s infinite normal none running button-pulse; }
@keyframes button-pulse {
  50% { transform: scale(1.04); box-shadow: rgba(161, 110, 255, 0.68) 0px 12px 46px, rgba(30, 5, 90, 0.28) -8px -12px 24px inset, rgba(255, 255, 255, 0.22) 6px 8px 16px inset; }
}
.welcome-action small { color: var(--quiet); font-size: 12px; font-weight: 650; letter-spacing: 0.03em; }
.safe-word-reminder { display: block; width: 100%; margin: 0px 0px 24px; padding: 20px; border: 1px solid var(--stroke); border-radius: 16px; color: var(--mint); background: var(--panel); overflow-wrap: anywhere; white-space: pre-wrap; font-size: 18px; }
.insight-content { display: flex; flex-direction: column; min-height: calc(100dvh - 84px); padding: clamp(24px, 5vh, 48px) 0px 10px; }
.insight-visual { display: grid; min-height: 210px; margin-bottom: 20px; place-items: center; }
.lottie-animation { position: relative; width: min(100%, 340px); height: 260px; overflow: hidden; }
.lottie-animation svg { display: block; width: 100% !important; height: 100% !important; }
.lottie-fallback { position: absolute; inset: 0px; display: grid; place-items: center; color: rgba(161, 110, 255, 0.38); font-size: 12px; font-weight: 900; letter-spacing: 0.18em; }
.lottie-animation.is-loaded .lottie-fallback { display: none; }
.insight-visual > .lottie-animation { width: min(100%, 380px); height: 300px; filter: drop-shadow(rgba(0, 0, 0, 0.25) 0px 18px 35px); }
.brain-visual, .plant-visual, .trophy-visual { font-size: clamp(78px, 21vw, 110px); filter: drop-shadow(rgba(0, 0, 0, 0.32) 0px 14px 28px); animation: 3.5s ease-in-out 0s infinite normal none running float; }
@keyframes float {
  50% { transform: translateY(-9px) rotate(2deg); }
}
.generic-insight-visual { display: grid; width: 128px; height: 128px; place-items: center; border: 1px solid rgba(161, 110, 255, 0.3); border-radius: 36px; color: var(--violet); background: linear-gradient(145deg, rgba(161, 110, 255, 0.18), rgba(77, 199, 255, 0.05)); box-shadow: rgba(99, 51, 235, 0.2) 0px 22px 60px; font-size: 58px; }
.accent-cyan .generic-insight-visual { color: var(--cyan); border-color: rgba(77, 199, 255, 0.3); }
.accent-mint .generic-insight-visual { color: var(--mint); border-color: rgba(77, 230, 173, 0.3); }
.insight-copy { margin-bottom: 18px; }
.takeaway { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0px 28px; padding: 16px; border: 1px solid rgba(161, 110, 255, 0.18); border-radius: 18px; background: rgba(161, 110, 255, 0.09); color: rgba(255, 255, 255, 0.78); font-size: 13px; line-height: 1.45; }
.takeaway span { color: var(--violet); }
.accent-cyan .takeaway { border-color: rgba(77, 199, 255, 0.2); background: rgba(77, 199, 255, 0.08); }
.accent-cyan .takeaway span { color: var(--cyan); }
.accent-mint .takeaway { border-color: rgba(77, 230, 173, 0.2); background: rgba(77, 230, 173, 0.08); }
.accent-mint .takeaway span { color: var(--mint); }
.insight-content .primary-button { margin-top: auto; }
.threshold-visual { position: relative; display: flex; align-items: flex-end; gap: 16px; width: 230px; height: 160px; padding: 20px 25px; border: 1px solid rgba(77, 199, 255, 0.2); border-radius: 28px; background: rgba(77, 199, 255, 0.06); }
.threshold-visual span { flex: 1 1 0%; border-radius: 9px 9px 3px 3px; background: linear-gradient(180deg,var(--cyan),rgba(77,199,255,.2)); animation: 1s ease 0s 1 normal both running bars; }
.threshold-visual span:nth-child(1) { height: 32%; }
.threshold-visual span:nth-child(2) { height: 60%; animation-delay: 0.12s; }
.threshold-visual span:nth-child(3) { height: 92%; animation-delay: 0.24s; }
@keyframes bars {
  0% { height: 0px; }
}
.blocked-showcase { width: 100%; max-width: 460px; padding: 24px; border: 1px solid var(--stroke-soft); border-radius: 24px; background: rgba(255, 255, 255, 0.024); }
.blocked-heading { margin-bottom: 20px; color: var(--quiet); font-size: 10px; font-weight: 650; letter-spacing: 0.15em; }
.blocked-sites { display: grid; gap: 12px; }
.blocked-row { display: grid; grid-template-columns: 40px minmax(0px, 1fr) 50px; align-items: center; gap: 14px; min-height: 70px; padding: 14px; border: 1px solid var(--stroke-soft); border-radius: 14px; background: rgba(255, 255, 255, 0.035); text-align: left; animation: site-arrive .4s var(--delay) both, site-block .45s calc(var(--delay) + 1s) both; }
.blocked-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: var(--muted); font-size: 12px; font-weight: 750; }
.blocked-site-name { position: relative; width: fit-content; font-size: 16px; font-weight: 650; animation: site-name-block .4s calc(var(--delay) + 1s) both; }
.blocked-site-name::after { position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; content: ""; background: rgb(255, 124, 136); transform: scaleX(0); transform-origin: left center; animation: site-cross .35s calc(var(--delay) + 1.2s) forwards; }
.blocked-status { display: grid; place-items: center; }
.blocked-status > span { grid-area: 1 / 1; }
.site-detected { color: var(--quiet); font-size: 10px; animation: site-status-out .2s calc(var(--delay) + 1.5s) forwards; }
.site-locked { display: grid; gap: 4px; justify-items: center; font-size: 21px; opacity: 0; animation: site-lock-in .35s calc(var(--delay) + 1.7s) forwards; }
.site-locked small { color: rgb(255, 161, 170); font-size: 9px; font-weight: 600; }
.blocked-custom { margin: 20px 0px 0px; color: var(--quiet); font-size: 12px; line-height: 1.5; }
@keyframes site-arrive {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}
@keyframes site-block {
  100% { border-color: rgba(255, 100, 120, 0.3); background: rgba(255, 80, 110, 0.067); }
}
@keyframes site-name-block {
  100% { color: rgb(255, 142, 154); }
}
@keyframes site-cross {
  100% { transform: scaleX(1); }
}
@keyframes site-status-out {
  100% { opacity: 0; }
}
@keyframes site-lock-in {
  0% { opacity: 0; transform: scale(0.75); }
  100% { opacity: 1; transform: scale(1); }
}
.form-screen { display: flex; flex-direction: column; min-height: calc(100dvh - 84px); padding: clamp(48px, 10vh, 98px) 0px 8px; }
.centered-form { justify-content: center; padding-top: 20px; }
.field-label { margin: 22px 0px 9px; color: var(--quiet); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; }
.text-field { width: 100%; height: 64px; padding: 0px 18px; border: 1px solid var(--stroke); border-radius: 18px; color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.07); font-size: 17px; font-weight: 650; caret-color: var(--cyan); appearance: none; }
.text-field::placeholder { color: rgba(255, 255, 255, 0.25); }
.text-field:focus { border-color: rgba(161, 110, 255, 0.7); box-shadow: rgba(161, 110, 255, 0.08) 0px 0px 0px 4px; outline: 0px; }
.validation-message { margin: 10px 2px 26px; color: var(--quiet); font-size: 12px; font-weight: 650; }
.validation-message.is-valid { color: var(--mint); }
.blocker-ready { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100dvh - 84px); text-align: center; }
.blocker-ready > p { max-width: 440px; }
.blocker-ready .primary-button { margin-top: 28px; }
.lock-animation { position: relative; width: 185px; height: 185px; margin-bottom: 34px; }
.lock-rays { position: absolute; inset: 0px; animation: 18s linear 0s infinite normal none running spin; }
.lock-rays i { position: absolute; left: 50%; top: 50%; width: 2px; height: 18px; border-radius: 3px; background: linear-gradient(var(--mint),transparent); transform-origin: 0px 0px; transform: rotate(calc(var(--n,0)*25.714deg)) translateY(-90px); }
.lock-rays i:nth-child(1) { --n: 0; }
.lock-rays i:nth-child(2) { --n: 1; }
.lock-rays i:nth-child(3) { --n: 2; }
.lock-rays i:nth-child(4) { --n: 3; }
.lock-rays i:nth-child(5) { --n: 4; }
.lock-rays i:nth-child(6) { --n: 5; }
.lock-rays i:nth-child(7) { --n: 6; }
.lock-rays i:nth-child(8) { --n: 7; }
.lock-rays i:nth-child(9) { --n: 8; }
.lock-rays i:nth-child(10) { --n: 9; }
.lock-rays i:nth-child(11) { --n: 10; }
.lock-rays i:nth-child(12) { --n: 11; }
.lock-rays i:nth-child(13) { --n: 12; }
.lock-rays i:nth-child(14) { --n: 13; }
@keyframes spin {
  100% { transform: rotate(360deg); }
}
.lock-shackle{position:absolute;left:61px;top:38px;width:64px;height:68px;border:10px solid var(--mint);border-bottom:0;border-radius:34px 34px 0 0;box-shadow:0 0 24px rgba(77,230,173,.32)}
.lock-body { position: absolute; left: 43px; top: 91px; width: 100px; height: 78px; border-radius: 23px; background: linear-gradient(145deg,var(--mint),#29a985); box-shadow: rgba(77, 230, 173, 0.3) 0px 16px 45px; }
.lock-body span { position: absolute; left: 47px; top: 25px; width: 7px; height: 25px; border-radius: 5px; background: rgb(7, 62, 49); }
.feature-screen { display: flex; flex-direction: column; min-height: calc(100dvh - 84px); padding: 20px 0px 8px; }
.feature-meta { display: flex; justify-content: space-between; margin: 6px 0px 22px; color: var(--quiet); font-size: 10px; font-weight: 800; letter-spacing: 0.13em; }
.feature-meta span:first-child { color: var(--cyan); }
.feature-visual { display: grid; min-height: clamp(245px, 38vh, 330px); margin-bottom: 25px; place-items: center; overflow: hidden; border: 1px solid var(--stroke-soft); border-radius: 28px; background: linear-gradient(145deg, rgba(161, 110, 255, 0.13), rgba(77, 199, 255, 0.055)); }
.feature-screen > p { margin-bottom: 20px; }
.progress-visual { width: 100%; padding: 25px; }
.progress-stat { display: flex; justify-content: space-between; align-items: end; }
.progress-stat span { color: var(--quiet); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; }
.progress-stat strong { font-size: 22px; }
.progress-visual svg { margin-top: 12px; overflow: visible; }
.chart-grid { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.chart-line { fill: none; stroke: url("#line"); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(rgba(77, 199, 255, 0.35) 0px 5px 8px); stroke-dasharray: 390; animation: 1.5s ease 0s 1 normal both running draw-line; }
@keyframes draw-line {
  0% { stroke-dashoffset: 390; }
}
.community-visual { position: relative; display: grid; place-items: center; width: 100%; min-height: 240px; }
.avatar-cloud { position: relative; width: 240px; height: 160px; }
.avatar-cloud span { position: absolute; display: grid; width: 58px; height: 58px; place-items: center; border: 3px solid rgba(255, 255, 255, 0.18); border-radius: 50%; background: linear-gradient(145deg, rgb(77, 199, 255), rgb(99, 51, 235)); font-weight: 850; box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 28px; }
.avatar-cloud span:nth-child(1) { left: 91px; top: 15px; width: 72px; height: 72px; z-index: 3; }
.avatar-cloud span:nth-child(2) { left: 28px; top: 65px; }
.avatar-cloud span:nth-child(3) { right: 18px; top: 72px; }
.avatar-cloud span:nth-child(4) { left: 78px; bottom: 0px; }
.avatar-cloud span:nth-child(5) { right: 67px; bottom: 2px; }
.community-pulse { position: absolute; width: 190px; height: 190px; border: 1px solid rgba(77, 199, 255, 0.22); border-radius: 50%; animation: 2.4s ease 0s infinite normal none running pulse-ring; }
@keyframes pulse-ring {
  50% { transform: scale(1.2); opacity: 0.25; }
}
.community-visual strong { color: var(--muted); font-size: 12px; }
.feature-visual > .lottie-animation { width: 100%; height: 100%; min-height: inherit; padding: 12px; }
.chat-visual { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; width: 100%; height: 100%; padding: 20px 18px; overflow: hidden; }
.chat-row { display: flex; align-items: flex-end; gap: 8px; width: 100%; opacity: 0; animation: 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) 0s 1 normal forwards running chat-in; }
.chat-row.user { justify-content: flex-end; }
.chat-bubble, .typing-dots { max-width: calc(100% - 72px); padding: 10px 14px; border-radius: 18px 18px 18px 6px; color: rgb(255, 255, 255); background: rgb(43, 43, 43); font-size: 13px; font-weight: 500; line-height: 1.35; text-align: left; }
.chat-row.user .chat-bubble, .chat-row.user .typing-dots { border-radius: 18px 18px 6px; background: rgb(10, 133, 255); }
.coach-orb, .user-avatar { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 50%; font-size: 12px; font-style: normal; font-weight: 850; }
.coach-orb { background: conic-gradient(from 30deg, rgb(115, 80, 242), rgb(51, 190, 205), rgb(153, 89, 242), rgb(115, 80, 242)); box-shadow: rgba(255, 255, 255, 0.22) 5px 5px 9px inset; animation: 14s linear 0s infinite normal none running orb-spin; }
.user-avatar { color: white; background: rgb(75, 75, 75); }
.chat-spacer { display: block; flex: 0 0 28px; width: 28px; }
.typing-dots { display: flex; align-items: center; gap: 4px; width: 58px; height: 39px; }
.typing-dots b { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.78); animation: 0.8s ease 0s infinite alternate none running typing-dot; }
.typing-dots b:nth-child(2) { animation-delay: 0.16s; }
.typing-dots b:nth-child(3) { animation-delay: 0.32s; }
@keyframes typing-dot {
  100% { opacity: 0.32; transform: translateY(-3px); }
}
@keyframes orb-spin {
  100% { transform: rotate(360deg); }
}
@keyframes chat-in {
  100% { opacity: 1; transform: none; }
  0% { opacity: 0; transform: translateY(12px) scale(0.94); }
}
.lessons-visual { display: grid; place-items: center; gap: 15px; }
.lesson-stack { display: flex; gap: 8px; }
.lesson-stack span { display: grid; width: 54px; height: 70px; place-items: center; border: 1px solid var(--stroke); border-radius: 13px; color: var(--cyan); background: rgba(255, 255, 255, 0.06); font-weight: 850; }
.lesson-stack span:nth-child(2) { transform: translateY(-12px); color: var(--violet); }
.lesson-book { font-size: 54px; color: var(--violet); }
.lessons-visual strong { color: var(--quiet); font-size: 10px; letter-spacing: 0.12em; }
.commitment-screen, .trend-screen { display: flex; flex-direction: column; min-height: calc(100dvh - 84px); padding: clamp(32px, 7vh, 65px) 0px 8px; }
.range-wrap { margin: auto 0px 25px; }
.range-wrap input, .trend-range input { width: 100%; height: 8px; appearance: none; border-radius: 99px; background: linear-gradient(90deg,var(--violet),var(--cyan)); cursor: pointer; }
.range-wrap input::-webkit-slider-thumb, .trend-range input::-webkit-slider-thumb { width: 28px; height: 28px; appearance: none; border: 5px solid white; border-radius: 50%; background: var(--violet); box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 18px; }
.range-wrap > div, .trend-range > div { display: flex; justify-content: space-between; margin-top: 12px; color: var(--quiet); font-size: 10px; font-weight: 750; letter-spacing: 0.07em; }
.commitment-actions { width: 100%; }
.dodge-zone { position: relative; height: 94px; }
.not-yet-button { position: absolute; left: 50%; top: 22px; width: 126px; height: 44px; border: 1px solid var(--stroke); border-radius: 99px; color: var(--muted); background: rgba(255, 255, 255, 0.06); font-size: 13px; font-weight: 700; cursor: pointer; transform: translate(calc(-50% + var(--x)),var(--y)) scale(var(--scale)); transition: transform 0.25s; }
.name-screen { padding-top: clamp(75px, 15vh, 140px); }
.name-field { height: 78px; margin-top: 24px; text-align: center; font-size: 25px; }
.form-spacer { flex: 1 1 0%; min-height: 80px; }
.trend-response { display: flex; flex-direction: column; align-items: center; margin: clamp(36px, 8vh, 75px) 0px 35px; }
.trend-response div { font-size: 86px; filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 14px 25px); }
.trend-response strong { margin-top: 14px; font-size: 20px; }
.trend-range { margin: 0px 0px 30px; }
.trend-spacer { flex: 1 1 0%; min-height: 50px; }
.pledge-page { padding: 0 max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); background: radial-gradient(600px 380px at 50% 108%, rgba(161, 110, 255, 0.16), transparent 67%); }
.pledge-screen { position: relative; width: min(100%, 620px); min-height: 100dvh; margin: auto; padding: max(32px,env(safe-area-inset-top)) 0 24px; }
.pledge-heading { text-align: center; }
.pledge-heading p { margin-bottom: 8px; color: var(--violet); font-size: 11px; font-weight: 850; letter-spacing: 0.16em; }
.pledge-heading h1 { margin: 0px; font-size: 38px; letter-spacing: -0.04em; }
.pledge-heading > span { display: block; margin-top: 9px; color: var(--quiet); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }
.vow-copy { margin-top: 30px; padding: 22px; border: 1px solid var(--stroke-soft); border-radius: 22px; background: rgba(255, 255, 255, 0.043); }
.vow-copy p { margin: 0px 0px 16px; color: rgba(255, 255, 255, 0.84); font-size: 15px; line-height: 1.58; }
.vow-copy p:last-child { margin-bottom: 0px; }
.vow-copy strong { color: var(--violet); }
.vow-copy b { color: rgb(255, 255, 255); font-weight: 900; letter-spacing: 0.06em; text-decoration-line: underline; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: var(--violet); text-underline-offset: 5px; }
.vow-copy em { color: white; }
.signature-heading { margin: 25px 0px 10px; color: var(--quiet); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; }
.signature-heading span { color: var(--violet); font-size: 15px; }
.signature-row { display: grid; grid-template-columns: 40px minmax(0px, 1fr); align-items: center; gap: 10px; }
.clear-signature { width: 38px; height: 38px; border: 1px solid var(--stroke); border-radius: 50%; color: var(--muted); background: rgba(255, 255, 255, 0.055); font-size: 17px; cursor: pointer; }
.clear-signature:disabled { opacity: 0.25; }
.signature-pad { position: relative; height: 118px; overflow: hidden; border: 1px dashed rgba(161, 110, 255, 0.45); border-radius: 18px; background: rgba(161, 110, 255, 0.055); }
.signature-pad canvas { position: absolute; inset: 0px; width: 100%; height: 100%; touch-action: none; }
.signature-placeholder { position: absolute; inset: 0px; display: grid; place-content: center; gap: 3px; color: rgba(161, 110, 255, 0.6); text-align: center; pointer-events: none; }
.signature-placeholder span { color: var(--quiet); font-size: 12px; }
.signature-pad > i { position: absolute; left: 15px; right: 15px; bottom: 26px; height: 1px; background: rgba(255, 255, 255, 0.1); pointer-events: none; }
.hold-helper { margin: 15px 0px 8px; color: var(--quiet); text-align: center; font-size: 11px; font-weight: 650; }
.hold-button { position: relative; width: 100%; height: 60px; overflow: hidden; border: 1px solid var(--stroke); border-radius: 18px; color: var(--quiet); background: rgba(255, 255, 255, 0.06); font-weight: 800; cursor: not-allowed; }
.hold-button > i { position: absolute; inset: 0px; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg,var(--violet-deep),var(--violet)); }
.hold-button span { position: relative; }
.hold-button.is-ready { color: white; cursor: pointer; border-color: rgba(161, 110, 255, 0.42); }
.hold-button.is-holding > i { animation: 2s linear 0s 1 normal forwards running hold-fill; }
.hold-button.is-holding { box-shadow: rgba(161, 110, 255, 0.3) 0px 0px 30px; }
@keyframes hold-fill {
  100% { transform: scaleX(1); }
}
.seal-stamp { position: absolute; left: 50%; bottom: 35px; display: flex; align-items: center; gap: 8px; padding: 13px 18px; border: 3px double rgb(255, 255, 255); border-radius: 13px; color: white; background: var(--violet-deep); font-size: 25px; font-weight: 900; letter-spacing: 0.08em; opacity: 0; transform: translateX(-50%) scale(0.5) rotate(-8deg); pointer-events: none; }
.seal-stamp span { font-size: 15px; }
.seal-stamp.is-visible { animation: 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.35) 0s 1 normal forwards running seal-pop; }
@keyframes seal-pop {
  100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(-5deg); }
}
.price-screen { display: flex; flex-direction: column; min-height: calc(100dvh - 84px); padding: clamp(28px, 6vh, 55px) 0px 8px; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0px 20px; }
.price-choice { min-height: 116px; padding: 15px; border: 1px solid var(--stroke-soft); border-radius: 21px; background: var(--panel); cursor: pointer; transition: 0.2s; }
.price-choice strong, .price-choice span { display: block; }
.price-choice strong { font-size: 29px; }
.price-choice span { margin-top: 7px; color: var(--quiet); font-size: 9px; font-weight: 800; letter-spacing: 0.12em; }
.price-choice:hover { border-color: rgba(161, 110, 255, 0.45); }
.price-choice.is-selected { border-color: var(--violet); background: linear-gradient(145deg, rgba(161, 110, 255, 0.25), rgba(99, 51, 235, 0.14)); box-shadow: rgba(99, 51, 235, 0.18) 0px 12px 30px; }
.price-support { display: flex; gap: 11px; padding: 15px; border: 1px solid rgba(161, 110, 255, 0.17); border-radius: 17px; color: var(--violet); background: rgba(161, 110, 255, 0.075); font-size: 14px; font-weight: 750; line-height: 1.4; }
.price-support span { color: var(--muted); }
.price-spacer { flex: 1 1 0%; min-height: 35px; }
.trial-note { margin-top: 13px; color: var(--quiet); text-align: center; font-size: 11px; font-weight: 650; }
.paywall-page { padding-top: max(18px,env(safe-area-inset-top)); padding-bottom: max(30px,env(safe-area-inset-bottom)); }
.paywall-screen { padding-bottom: 15px; }
.paywall-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.paywall-nav a { text-decoration: none; font-size: 14px; font-weight: 900; letter-spacing: 0.14em; }
.paywall-shield { display: grid; width: 92px; height: 92px; margin: 0px auto 24px; place-items: center; border: 1px solid rgba(161, 110, 255, 0.3); border-radius: 30px; color: var(--violet); background: linear-gradient(145deg, rgba(161, 110, 255, 0.2), rgba(77, 199, 255, 0.08)); font-size: 42px; box-shadow: rgba(99, 51, 235, 0.2) 0px 18px 50px; }
.paywall-screen > h1 { margin: 0px; text-align: center; font-size: clamp(33px, 8vw, 44px); letter-spacing: -0.04em; }
.paywall-screen > h2 { margin: 10px auto 25px; color: var(--muted); text-align: center; font-size: 18px; font-weight: 650; line-height: 1.4; }
.recap-card, .included-card { display: grid; gap: 13px; padding: 20px; border: 1px solid var(--stroke-soft); border-radius: 22px; background: var(--panel); }
.recap-card div, .included-card div { display: flex; gap: 11px; color: rgba(255, 255, 255, 0.82); font-size: 14px; font-weight: 650; line-height: 1.35; }
.recap-card span { display: grid; flex: 0 0 21px; height: 21px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--mint); font-size: 11px; }
.offer-card { margin: 14px 0px; padding: 23px; border: 1px solid rgba(161, 110, 255, 0.4); border-radius: 26px; text-align: center; background: linear-gradient(145deg, rgba(161, 110, 255, 0.2), rgba(99, 51, 235, 0.08)); box-shadow: rgba(99, 51, 235, 0.15) 0px 18px 45px; }
.offer-card span { display: block; color: var(--warm); font-size: 11px; font-weight: 900; letter-spacing: 0.15em; }
.offer-card strong { display: block; margin-top: 6px; font-size: 45px; line-height: 1.1; }
.offer-card p { margin: 7px 0px 0px; color: var(--muted); font-size: 14px; font-weight: 650; }
.included-card > span { margin-bottom: 2px; color: var(--quiet); font-size: 10px; font-weight: 850; letter-spacing: 0.13em; }
.included-card b { color: var(--cyan); }
.testimonial-grid { display: grid; gap: 12px; margin: 14px 0px 20px; }
.testimonial-grid blockquote { margin: 0px; padding: 18px; border: 1px solid var(--stroke-soft); border-radius: 20px; background: var(--panel); }
.testimonial-grid blockquote > span { color: var(--warm); font-size: 12px; letter-spacing: 0.08em; }
.testimonial-grid p { margin: 10px 0px; color: rgba(255, 255, 255, 0.77); font-size: 14px; line-height: 1.45; }
.testimonial-grid cite { color: var(--quiet); font-size: 11px; font-weight: 750; font-style: normal; }
.paywall-fineprint { margin: 12px 0px 0px; color: var(--quiet); text-align: center; font-size: 11px; }
.checkout-error { min-height: 20px; margin-top: 8px; color: var(--danger); text-align: center; font-size: 12px; }
.paywall-links { display: flex; justify-content: center; gap: 20px; margin-top: 18px; color: var(--quiet); font-size: 11px; }
.paywall-links a, .paywall-links button { padding: 0px; border: 0px; color: inherit; background: none; text-decoration: none; cursor: pointer; }
.paywall-links a:hover, .paywall-links button:hover { color: white; }
:root { --content: 520px; --muted: rgba(240, 237, 255, .7); --quiet: rgba(240, 237, 255, .52); }
body::before { opacity: 0.2; }
.screen { padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.funnel-topbar { min-height: 44px; grid-template-columns: 40px minmax(0px, 1fr) auto; gap: 16px; }
.back-button { width: 40px; height: 40px; background: transparent; }
.top-progress { height: 4px; }
.top-progress span { background: var(--violet); box-shadow: none; }
.info-topbar { display: flex; justify-content: center; }
.funnel-brand { font-size: 12px; font-weight: 850; letter-spacing: 0.16em; }
.time-label { font-size: 10px; white-space: nowrap; }
.question-content, .form-screen, .commitment-screen, .trend-screen, .price-screen { min-height: 0px; padding: clamp(32px, 6vh, 56px) 0px 0px; }
.question-content h1, .insight-content h1, .form-screen h1, .blocker-ready h1, .feature-screen h1, .commitment-screen h1, .trend-screen h1, .price-screen h1 { font-size: clamp(28px, 6.8vw, 36px); line-height: 1.16; letter-spacing: -0.035em; font-weight: 750; }
.option-list { margin-top: 28px; gap: 10px; }
.option { min-height: 66px; border-radius: 16px; padding: 14px 16px; background: rgba(255, 255, 255, 0.035); }
.option-index { width: 30px; height: 30px; font-weight: 600; font-size: 12px; background: rgba(255, 255, 255, 0.043); }
.option-label { line-height: 1.45; font-weight: 550; }
.option.is-selected .option-index { color: white; background: var(--violet-deep); }
.primary-button { min-height: 56px; border-radius: 16px; background: linear-gradient(120deg, rgb(135, 80, 230), rgb(99, 51, 235)); box-shadow: rgba(99, 51, 235, 0.18) 0px 8px 24px; font-weight: 700; }
.insight-content { min-height: 0px; padding: 24px 0px 0px; }
.insight-visual { min-height: 0px; margin-bottom: 24px; }
.insight-visual > .lottie-animation { width: min(100%, 290px); height: clamp(150px, 25vh, 220px); }
.generic-insight-visual { width: 92px; height: 92px; border-radius: 28px; font-size: 42px; margin: 10px 0px; box-shadow: rgba(99, 51, 235, 0.12) 0px 12px 36px; }
.insight-copy { margin-bottom: 20px; line-height: 1.65; }
.takeaway { margin: 0px 0px 24px; padding: 16px; border-radius: 16px; }
.takeaway strong { font-weight: 550; }
.insight-content .primary-button { margin-top: 0px; }
.feature-screen { min-height: 0px; padding: 24px 0px 0px; }
.feature-meta { margin: 0px 0px 18px; }
.feature-visual { min-height: 230px; margin-bottom: 24px; border-radius: 24px; }
.feature-visual > .lottie-animation { height: 230px; }
.feature-visual:has(.chat-visual) { min-height: 310px; }
.chat-visual { min-height: 310px; }
.blocker-ready { min-height: 0px; padding-top: 40px; }
.blocker-ready .primary-button { margin-top: 16px; }
.centered-form { justify-content: flex-start; }
.form-spacer, .trend-spacer, .price-spacer { flex: 0 0 auto; min-height: 0px; height: 28px; }
.range-wrap { margin: 16px 0px 28px; }
@media (min-width: 720px) {
  .screen { width: min(100%, 1080px); margin-inline: auto; padding: 32px 48px 56px; }
  .question-content, .form-screen, .commitment-screen, .trend-screen, .price-screen { padding-top: 56px; }
  .question-content h1, .insight-content h1, .form-screen h1, .blocker-ready h1, .feature-screen h1, .commitment-screen h1, .trend-screen h1, .price-screen h1 { font-size: 36px; }
  .insight-content, .feature-screen { padding-top: 36px; }
  .insight-visual > .lottie-animation { height: 230px; }
  .pledge-screen { min-height: 0px; padding-top: 36px; }
  .paywall-page { width: min(100%, 760px); }
  .paywall-screen { width: 100%; }
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
}
.insight-content, .feature-screen { text-align: center; }
.insight-content > .eyebrow, .insight-content > h1, .insight-copy, .feature-screen > h1, .feature-screen > p { text-align: center; }
.insight-content .takeaway { justify-content: center; }
.insight-content > .primary-button, .feature-screen > .primary-button, .blocker-ready > .primary-button { justify-content: center; gap: 12px; }
@media (max-width: 359px) {
  .screen { padding-inline: 20px; }
  .option { grid-template-columns: 28px minmax(0px, 1fr) 16px; gap: 9px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (min-width: 980px) {
  .welcome-screen { padding: 36px 64px; }
  .welcome { display: grid; grid-template-columns: minmax(0px, 1.12fr) minmax(360px, 0.88fr); grid-template-areas: "brand action" "copy action"; column-gap: clamp(70px, 9vw, 140px); align-content: center; align-items: center; min-height: calc(100dvh - 72px); text-align: left; }
  .marble-wordmark { grid-area: brand; justify-self: start; margin: 0px 0px 46px; font-size: clamp(42px, 4.2vw, 62px); letter-spacing: 0.055em; }
  .welcome-copy { grid-area: copy; align-self: start; margin: 0px; }
  .welcome-copy h1 { max-width: 720px; font-size: clamp(58px, 5.4vw, 78px); line-height: 0.98; }
  .welcome-copy h1 span { margin-top: 10px; }
  .welcome-copy p { max-width: 540px; margin: 30px 0px 0px; font-size: 19px; }
  .rating { margin-top: 30px; font-size: 20px; }
  .welcome-action { position: relative; grid-area: action; justify-self: center; gap: 22px; width: min(38vw, 460px); aspect-ratio: 1 / 1; margin: 0px; border: 1px solid rgba(161, 110, 255, 0.2); border-radius: 50%; background: radial-gradient(circle, rgba(161, 110, 255, 0.17) 0px, rgba(161, 110, 255, 0.17) 31%, transparent 32%), radial-gradient(circle, rgba(77, 199, 255, 0.07), rgba(161, 110, 255, 0.035) 53%, transparent 70%); box-shadow: rgba(161, 110, 255, 0.06) 0px 0px 90px inset, rgba(99, 51, 235, 0.1) 0px 0px 100px; }
  .welcome-action::before, .welcome-action::after { position: absolute; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; content: ""; }
  .welcome-action::before { inset: 13%; }
  .welcome-action::after { inset: 28%; border-color: rgba(77, 199, 255, 0.13); }
  .marble-button { position: relative; z-index: 1; width: 132px; height: 132px; font-size: 45px; }
  .welcome-action small { position: relative; z-index: 1; font-size: 13px; }
  .welcome-screen { width: min(100%, 1240px); }
}
@media (max-height: 720px) and (max-width: 719px) {
  .welcome-copy { margin-top: 38px; }
  .marble-wordmark { margin-top: 45px; }
  .marble-button { width: 88px; height: 88px; }
  .welcome-action { margin-bottom: 20px; }
}
.question-content > h1, .question-content > .eyebrow, .question-content > .question-helper, .form-screen > h1, .form-screen > .eyebrow, .commitment-screen > h1, .trend-screen > h1, .price-screen > h1 { text-align: center; }
.binary-options { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.binary-options .option { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 140px; padding: 22px 16px; text-align: center; }
.binary-options .option-emoji { font-size: 36px; line-height: 1; }
.binary-options .option-label { font-size: 18px; font-weight: 650; }
.trend-screen > .primary-button { justify-content: center; gap: 12px; }
.blocker-intro-screen .insight-content { width: min(100%, 560px); padding-top: 28px; }
.blocker-intro-screen .insight-visual { margin-bottom: 36px; }
.blocker-intro-screen .insight-copy { max-width: 440px; margin: 18px auto 0px; }
.blocker-intro-screen .takeaway { border: 0px; background: none; padding: 0px; margin: 24px auto 28px; max-width: 400px; }
.blocker-intro-screen .takeaway > span { display: none; }
@media (max-width: 359px) {
  .blocked-showcase { padding: 18px 14px; }
  .blocked-row { gap: 10px; padding: 12px 10px; grid-template-columns: 34px minmax(0px, 1fr) 44px; }
  .blocked-icon { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .blocked-showcase *, .blocked-showcase ::after { animation-delay: 0s !important; }
}
.feature-page .feature-screen { width: min(100%, 560px); padding-top: 20px; }
.feature-page .feature-meta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 0px 0px 14px; text-align: center; }
.feature-meta span:last-child { font-size: 9px; letter-spacing: 0.12em; }
.feature-viewport { overflow: hidden; width: 100%; }
.feature-track { display: grid; grid-template-columns: repeat(4, 100%); align-items: stretch; transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.25, 1); }
.feature-slide { display: grid; grid-template-rows: 340px 1fr; min-width: 0px; }
.feature-slide .feature-visual { width: 100%; height: 340px; min-height: 0px; margin: 0px; border: 0px; border-radius: 0px; background: none; overflow: hidden; }
.feature-slide .feature-visual > .lottie-animation { width: 100%; height: 100%; min-height: 0px; max-width: 380px; padding: 20px; }
.feature-copy { min-height: 166px; padding: 20px 4px 8px; }
.feature-copy h1 { margin: 0px 0px 14px; font-size: clamp(28px, 6.8vw, 34px); line-height: 1.16; }
.feature-copy p { max-width: 430px; margin: 0px auto; color: var(--muted); font-size: 16px; line-height: 1.6; }
.feature-page .primary-button { justify-content: center; gap: 12px; }
.feature-slide .chat-visual { justify-content: flex-start; min-height: 0px; height: 100%; max-width: 460px; padding: 20px 2px; gap: 14px; }
.feature-slide .chat-row { flex-shrink: 0; }
.feature-slide .chat-bubble, .feature-slide .typing-dots { max-width: calc(100% - 44px); font-size: 13px; line-height: 1.5; }
.feature-slide .chat-row.user .chat-bubble, .feature-slide .chat-row.user .typing-dots { background: rgb(99, 51, 184); }
.feature-slide .chat-row.bot .chat-bubble { background: rgba(255, 255, 255, 0.075); }
.journey-visual { width: 100%; max-width: 450px; padding: 16px 14px; }
.journey-eyebrow { color: var(--quiet); font-size: 9px; font-weight: 650; letter-spacing: 0.15em; }
.journey-visual > strong { display: block; margin-top: 16px; font-size: 27px; line-height: 1.2; letter-spacing: -0.03em; }
.journey-visual em { color: rgb(189, 160, 255); font-style: normal; }
.journey-visual svg { display: block; width: 100%; margin-top: 16px; overflow: visible; }
.journey-guide { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.journey-line { fill: none; stroke: url("#journeyColor"); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.journey-points { fill: rgb(140, 235, 207); opacity: 0; }
.has-played .journey-line { animation: 2.8s cubic-bezier(0.25, 0.6, 0.3, 1) 0.2s 1 normal forwards running journey-grow; }
.has-played .journey-points { animation: 0.8s ease 2.3s 1 normal forwards running journey-reveal; }
.journey-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 8px; letter-spacing: 0.1em; color: var(--quiet); }
@keyframes journey-grow {
  100% { stroke-dashoffset: 0; }
}
@keyframes journey-reveal {
  100% { opacity: 1; }
}
@media (max-width: 359px) {
  .feature-slide { grid-template-rows: 360px 1fr; }
  .feature-slide .feature-visual { height: 360px; }
  .feature-copy { min-height: 196px; }
  .feature-slide .chat-visual { gap: 10px; padding-top: 12px; }
}
.course-visual { width: 100%; max-width: 390px; padding: 12px; }
.course-eyebrow { color: var(--quiet); font-size: 9px; font-weight: 650; letter-spacing: 0.15em; }
.course-grid { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 10px; margin-top: 24px; perspective: 700px; }
.course-tile { display: flex; flex-direction: column; justify-content: center; gap: 5px; height: 50px; padding: 8px 10px; border: 1px solid rgba(180, 144, 255, 0.2); border-radius: 9px; text-align: left; background: linear-gradient(145deg, rgba(161, 110, 255, 0.13), rgba(161, 110, 255, 0.03)); opacity: 0; }
.course-tile span { margin-bottom: 2px; color: rgb(199, 173, 255); font-size: 10px; font-weight: 650; }
.course-tile i { display: block; height: 2px; border-radius: 2px; background: rgba(199, 173, 255, 0.2); }
.course-tile i:last-child { width: 60%; }
.course-tile:first-child { border-color: rgba(140, 235, 207, 0.5); background: rgba(140, 235, 207, 0.09); }
.course-tile:first-child span { color: rgb(140, 235, 207); }
.has-played .course-tile { animation: course-appear .5s calc(.15s + var(--lesson) * .055s) both; }
.course-visual p { margin: 20px 0px 0px; color: var(--quiet); font-size: 12px; }
@keyframes course-appear {
  0% { opacity: 0; transform: translateY(12px) rotateX(-12deg); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-slide *, .feature-slide ::before, .feature-slide ::after { animation-delay: 0s !important; }
}
.commitment-screen > .gradient-eyebrow { text-align: center; }
.commitment-screen .primary-button { justify-content: center; gap: 12px; }
.commitment-screen > .gradient-eyebrow { color: #b895f3; background: none; }
.commitment-screen h1 { max-width: 490px; align-self: center; text-align: center; }
.commitment-meter { --commitment-progress: .66; --commitment-color: #ffcf5a; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; margin: 6px auto 4px; text-align: center; }
.commitment-score { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: 12px; color: var(--quiet); font-variant-numeric: tabular-nums; }
.commitment-score strong { font-size: 15px; line-height: 1; font-weight: 650; color: var(--muted); }
.commitment-score span { font-size: 13px; font-weight: 500; }
.commitment-label { max-width: 100%; margin: 0; color: var(--commitment-color); font-size: calc(22px + var(--commitment-progress) * 18px); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; overflow-wrap: anywhere; transition: font-size .28s cubic-bezier(.2,.8,.3,1), color .28s ease; }
.commitment-screen .range-wrap { width: min(100%, 440px); align-self: center; margin: 14px 0 28px; }
.commitment-screen .range-wrap input { --commitment-color: #ffcf5a; background: linear-gradient(90deg, var(--commitment-color) 0%, var(--commitment-color) var(--commitment-fill), rgba(255,255,255,.14) var(--commitment-fill), rgba(255,255,255,.14) 100%); }
.commitment-screen .range-wrap input::-webkit-slider-thumb { background: var(--commitment-color); border-color: #fff; }
.commitment-screen .range-wrap input::-moz-range-thumb { width: 18px; height: 18px; border: 5px solid #fff; border-radius: 50%; background: var(--commitment-color); box-shadow: 0 4px 18px #0006; }
@media (max-height: 750px) {
  .commitment-screen { padding-top: 24px; }
}
.name-screen > h1 { font-size: clamp(25px, 6vw, 30px); line-height: 1.2; }
.name-screen > .form-copy { text-align: center; }
.name-screen .name-field { height: 62px; font-size: 18px; }
.name-screen > .primary-button { justify-content: center; gap: 12px; }
.seal-wash { position: fixed; inset: 0px; z-index: 20; pointer-events: none; }
.seal-wash-fill { position: absolute; inset: 0px; background: linear-gradient(165deg, rgb(156, 100, 244), rgb(99, 51, 235)); transform: scaleY(0); transform-origin: center bottom; transition: transform 0.2s ease-out; }
.seal-wash.is-holding .seal-wash-fill { transform: scaleY(1); transition: transform 2s linear; }
.seal-wash.is-complete .seal-wash-fill { transform: scaleY(1); transition: none; }
.seal-wash.is-complete { pointer-events: auto; }
.seal-wash .seal-stamp { position: absolute; top: max(48px, env(safe-area-inset-top)); bottom: auto; padding: 18px 26px; background: rgba(69, 25, 148, 0.3); box-shadow: rgba(43, 10, 97, 0.2) 0px 12px 40px; font-size: 34px; }
.seal-wash .seal-stamp span { font-size: 22px; }
.seal-stamp[hidden] { display: none; }
.hold-button { touch-action: none; user-select: none; }
.hold-button > i { display: none; }
@media (prefers-reduced-motion: reduce) {
  .seal-wash-fill { transform: none; opacity: 0; transition: opacity 0.15s !important; }
  .seal-wash.is-holding .seal-wash-fill { opacity: 0.25; }
  .seal-wash.is-complete .seal-wash-fill { opacity: 1; }
}
.price-page .price-screen { width: min(100%, 680px); padding-top: 36px; text-align: center; }
.price-screen > .eyebrow { margin-bottom: 14px; color: rgb(181, 156, 222); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; }
.price-screen > h1 { margin: 0px 0px 32px; padding-bottom: 28px; border-bottom: 0px; position: relative; font-size: clamp(28px, 4vw, 40px); font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; }
.price-message { margin-bottom: 26px; }
.price-message h2 { margin: 0px 0px 10px; color: rgb(181, 156, 222); font-size: 10px; font-weight: 650; letter-spacing: 0.14em; }
.price-message p { max-width: 570px; margin: 0px auto; color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1.65; }
.price-screen .price-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 8px; margin: 2px auto 20px; width: 100%; max-width: 320px; }
.price-screen .price-choice { min-height: 40px; height: 40px; padding: 7px 4px; border-radius: 9px; background: transparent; }
.price-screen .price-choice strong { font-size: 13px; font-weight: 550; line-height: 1; white-space: nowrap; }
.price-screen .price-choice.is-selected { border-color: rgb(161, 110, 255); background: linear-gradient(120deg, rgb(161, 110, 255), rgb(120, 68, 206)); box-shadow: rgba(126, 72, 212, 0.18) 0px 5px 18px; }
.price-screen .price-support { display: block; max-width: 550px; margin: 0px auto; padding: 0px; border: 0px; background: none; color: var(--muted); font-size: 14px; font-weight: 400; font-style: italic; line-height: 1.65; }
.price-screen .price-spacer { height: 30px; }
.price-screen > .primary-button { width: min(100%, 390px); min-height: 56px; align-self: center; justify-content: center; gap: 0px; font-size: 16px; font-weight: 600; }
@media (max-width: 359px) {
  .price-screen .price-grid { gap: 6px; }
  .price-screen .price-choice strong { font-size: 13px; }
  .price-message p { font-size: 15px; }
}
.analysis-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%, 620px); min-height: calc(100dvh - 150px); margin: 0px auto; padding: 36px 0px; text-align: center; }
.analysis-screen > .eyebrow { color: #b59cde; font-size: 9px; font-weight: 600; letter-spacing: .16em; margin: 0 0 12px; }
.analysis-screen h1 { margin: 0; font-size: clamp(26px,5vw,36px); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.analysis-scan { position: relative; width: min(100%,350px); height: 365px; margin: 8px 0 28px; isolation: isolate; }
.scan-halo { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse,rgba(134,75,230,.2),transparent 68%); }
.plan-assembly { position: absolute; inset: 22px 30px 12px; isolation: isolate; }
.assembly-sheet { --depth: min(var(--slot),2); position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 23px; padding: 30px 24px; overflow: hidden; isolation: isolate; border: 1px solid hsl(var(--card-hue) 55% 72% / .4); border-radius: 20px; background: radial-gradient(ellipse at 0 0,hsl(var(--card-hue) 40% 33%),transparent 60%),linear-gradient(145deg,hsl(var(--card-hue) 31% 19%),#181020); box-shadow: 0 20px 50px #0005,inset 0 1px 0 #ffffff15; will-change: transform; z-index: calc(7 - var(--slot)); transform: translate(calc(var(--depth) * 7px),calc(var(--depth) * -13px)) rotate(calc(var(--depth) * -4deg)) scale(calc(1 - var(--depth) * .03)); }
.assembly-sheet::before { content: ''; position: absolute; inset: 9px; border: 1px solid #d7b1ff19; border-radius: 13px; pointer-events: none; }
.assembly-sheet::after { content: ''; position: absolute; inset: -40%; z-index: -1; opacity: .3; background: repeating-radial-gradient(ellipse at 10% 20%,transparent 0 25px,#c1a0ff26 26px,transparent 27px 42px); transform: rotate(-15deg); }
.card-engraving { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; border: 1px solid #cdb0ff29; background: radial-gradient(circle,#ac6efe22,transparent 70%); box-shadow: 0 0 40px #ad79ff15,inset 0 0 20px #c8a2ff08; }
.card-engraving::before { content: ''; position: absolute; inset: -8px; border: 1px dashed #c7a0ff24; border-radius: 50%; }
.card-engraving svg { width: 45px; height: 45px; fill: none; stroke: #d4b8ff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px #b883ff50); }
.assembly-sheet[data-slot="0"] .card-engraving { animation: engraving-reveal .75s ease-out both; }
.assembly-sheet[data-slot="0"]::after { animation: card-light 2.1s ease-in-out both; }
.card-pips { display: flex; justify-content: center; gap: 6px; margin-top: 1px; }
.card-pips i { width: 4px; height: 4px; border-radius: 50%; background: #d2b4f52b; }
.card-pips i.is-lit { background: #d3b7f6; box-shadow: 0 0 6px #d3b7f650; }
@keyframes engraving-reveal { from { opacity: .4; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes card-light { 0% { opacity: .12; } 50% { opacity: .45; } 100% { opacity: .3; } }
.assembly-title { display: block; margin: 0; color: #f3eafa; font-size: 28px; line-height: 1.18; font-weight: 600; letter-spacing: -.04em; text-align: center; overflow-wrap: anywhere; }
.assembly-title.is-long { font-size: 23px; }
@media (max-width: 359px) { .assembly-sheet { padding: 20px; } .assembly-title { font-size: 25px; } .assembly-title.is-long { font-size: 21px; } .analysis-phase { gap: 5px; } .analysis-phase b { font-size: 9px; } .analysis-phase i { width: 17px; height: 17px; } }
.analysis-status { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes analysis-blink {
  100% { opacity: 0; }
}
.analysis-typing { width: 100%; max-width: 500px; min-height: 76px; margin-top: 22px; color: var(--muted); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.analysis-caret { display: inline-block; width: 1px; height: 15px; margin-left: 3px; vertical-align: -2px; background: #ba95ff; animation: analysis-blink 1s steps(2,end) infinite; }
.analysis-timeline { width: min(100%,390px); position: relative; margin-top: 4px; }
.analysis-track { position: relative; margin-top: 18px; height: 3px; border-radius: 4px; background: #ffffff12; overflow: hidden; }
.analysis-track > i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#7941d6,#d5bbff); transform: scaleX(0); transform-origin: left; animation: timeline-fill 15.7s linear forwards; }
.analysis-track > span { position: absolute; top: 0; bottom: 0; left: 33.333%; width: 1px; background: #08071188; }
.analysis-track > span:last-child { left: 66.666%; }
.analysis-phases { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.analysis-phase { display: flex; justify-content: center; align-items: center; gap: 7px; color: #7f728e; transition: color .5s; }
.analysis-phase b { font-size: 10px; font-weight: 500; white-space: nowrap; }
.analysis-phase i { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border: 1px solid #8b6caf44; border-radius: 50%; font-size: 9px; font-style: normal; font-weight: 500; animation: milestone-charge .8s calc(4.433333s + var(--milestone) * 5.233333s) ease-in-out; }
.analysis-phase.is-current { color: #e0c8ff; }
.analysis-phase.is-current i { background: #a16eff20; border-color: #ab80ec99; }
.analysis-phase.is-complete { color: #bfa6dc; }
.analysis-phase.is-complete i { background: #a16eff; color: #fff; border-color: #a16eff; }
@keyframes timeline-fill { to { transform: scaleX(1); } }
@keyframes milestone-charge { 0%,100% { transform: none; } 20%,60% { transform: translateX(-1px) scale(1.12); box-shadow: 0 0 12px #a16eff66; } 40%,80% { transform: translateX(1px) scale(1.12); } }
@media (max-height: 720px) {
  .analysis-scan { margin-bottom: 20px; }
  .analysis-screen { padding: 24px 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .analysis-caret { display: none; }
}
.price-screen > h1::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background: linear-gradient(90deg, transparent, rgba(190, 160, 240, 0.25) 50%, transparent); }
.screen.paywall-page { width: 100%; padding: 0 max(20px,env(safe-area-inset-right)) 40px max(20px,env(safe-area-inset-left)); animation: auto ease 0s 1 normal none running none; }
.paywall-page .paywall-screen { width: min(100%, 740px); padding: 0px; }
.offer-timer { position: sticky; top: 0px; z-index: 10; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin-inline: calc(-1 * max(20px,env(safe-area-inset-right))); padding: max(13px,env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid rgba(183, 157, 222, 0.14); background: rgba(11, 9, 22, 0.94); backdrop-filter: blur(18px); color: rgb(197, 186, 207); font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.offer-timer > strong { min-width: 51px; color: rgb(212, 182, 255); font-size: 17px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.offer-timer-line { --timer-color: #5ee6aa; --timer-remaining: 1; position: absolute; top: 0px; left: 0px; width: 100%; height: 2px; background: color-mix(in srgb,var(--timer-color) 22%,transparent); }
.offer-timer-line::before { content: ""; display: block; height: 100%; transform: scaleX(var(--timer-remaining)); transform-origin: left center; background: var(--timer-color); box-shadow: 0 0 10px var(--timer-color); transition: transform 1s linear, background 1s linear; }
.offer-brand { padding: 32px 0px 35px; text-align: center; color: rgb(238, 229, 255); font-size: 13px; font-weight: 700; letter-spacing: 0.24em; }
.offer-eyebrow { margin: 0px 0px 15px; color: rgb(185, 152, 230); font-size: 10px; font-weight: 650; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; }
.offer-hero { max-width: 700px; margin: 0px auto 40px; text-align: center; }
.offer-hero h1 { margin: 0px; color: rgb(245, 240, 251); font-size: clamp(34px, 5.1vw, 56px); font-weight: 550; line-height: 1.13; letter-spacing: -0.045em; }
.offer-lead { max-width: 570px; margin: 21px auto 0px; color: rgb(170, 162, 184); font-size: 15px; line-height: 1.75; text-align: center; }
.offer-for { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 27px auto 0px; color: rgb(143, 135, 159); font-size: 11px; line-height: 1.5; }
.offer-for strong { color: rgb(210, 200, 224); font-weight: 500; overflow-wrap: anywhere; }
.offer-initial { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(134, 98, 183, 0.3); border-radius: 50%; background: rgba(150, 112, 197, 0.11); color: rgb(197, 160, 244); font-size: 11px; }
.roadmap { position: relative; padding: 36px; border: 1px solid rgba(173, 142, 219, 0.22); border-radius: 25px; background: radial-gradient(at 90% 0px, rgba(137, 83, 209, 0.17), transparent 58%), linear-gradient(140deg, rgba(30, 24, 49, 0.94), rgba(12, 11, 22, 0.92)); box-shadow: rgba(0, 0, 0, 0.133) 0px 24px 70px; }
.roadmap-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.roadmap h2 { margin: 0px; font-size: clamp(26px, 3.5vw, 34px); font-weight: 500; line-height: 1.25; letter-spacing: -0.035em; }
.roadmap h2 span { color: rgb(182, 151, 223); }
.roadmap-heading .offer-eyebrow { margin-bottom: 13px; }
.roadmap-duration { display: flex; flex-direction: column; align-items: center; }
.roadmap-duration strong { color: rgb(214, 190, 249); font-size: clamp(55px, 8vw, 78px); font-weight: 350; line-height: 1; letter-spacing: -0.07em; }
.roadmap-duration span { margin-top: 8px; color: rgb(158, 139, 185); font-size: 9px; letter-spacing: 0.2em; }
.roadmap-focus { margin: 27px 0px 30px; padding: 17px 0px; border-block: 1px solid rgba(180, 153, 210, 0.133); }
.roadmap-focus > span { color: rgb(164, 148, 184); font-size: 9px; letter-spacing: 0.14em; }
.roadmap-focus p { margin: 6px 0px 0px; color: rgb(226, 215, 240); font-size: 14px; line-height: 1.6; }
.roadmap-steps { display: grid; gap: 0px; margin: 0px; padding: 0px; list-style: none; }
.roadmap-steps li { position: relative; display: grid; grid-template-columns: 33px minmax(0px, 1fr); gap: 19px; padding-bottom: 30px; }
.roadmap-steps li:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0px; width: 1px; background: linear-gradient(rgba(166, 124, 223, 0.533), rgba(166, 124, 223, 0.133)); }
.roadmap-steps li:last-child { padding-bottom: 0px; }
.roadmap-node { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid rgba(173, 133, 230, 0.35); border-radius: 50%; color: rgb(203, 177, 238); background: rgb(38, 32, 52); font-size: 10px; font-weight: 500; }
.roadmap-steps li:first-child .roadmap-node { border-color: rgb(161, 110, 255); background: rgb(152, 96, 239); color: white; box-shadow: rgba(153, 92, 255, 0.23) 0px 0px 24px; }
.roadmap-period { display: block; margin: 1px 0px 8px; color: rgb(178, 148, 215); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.6; }
.roadmap h3 { margin: 0px 0px 8px; color: rgb(236, 230, 244); font-size: 17px; font-weight: 500; line-height: 1.45; letter-spacing: -0.02em; }
.roadmap-steps p { max-width: 520px; margin: 0px; color: rgb(159, 150, 175); font-size: 13px; line-height: 1.75; }
.roadmap-finish { display: flex; align-items: center; gap: 16px; margin-top: 29px; color: rgb(162, 148, 180); font-size: 8px; font-weight: 550; letter-spacing: 0.07em; }
.roadmap-finish > span:not(.roadmap-finish-line) { flex-shrink: 0; }
.roadmap-finish-line { flex: 1 1 0%; height: 1px; background: linear-gradient(90deg, rgb(171, 118, 243), rgba(173, 138, 219, 0.15)); }
.roadmap-note { margin: 13px 0px 0px; color: rgb(143, 130, 159); font-size: 10px; line-height: 1.6; }
.offer-challenge { display: flex; gap: 16px; margin: 30px 0px; padding-top: 26px; border-top: 1px solid rgba(180, 153, 210, 0.133); }
.challenge-icon { color: rgb(209, 165, 114); font-size: 23px; line-height: 1; }
.offer-challenge .offer-eyebrow { margin-bottom: 8px; color: rgb(204, 172, 134); font-size: 8px; letter-spacing: 0.12em; }
.offer-challenge h3 { font-size: 16px; }
.offer-challenge div > p:last-child { margin: 0px; color: rgb(162, 152, 175); font-size: 13px; line-height: 1.7; }
.paywall-screen .primary-button { display: flex; justify-content: center; gap: 15px; width: min(100%, 490px); min-height: 58px; margin-inline: auto; padding: 17px 22px; border: 1px solid rgba(179, 138, 227, 0.37); border-radius: 14px; background: linear-gradient(115deg, rgb(178, 138, 232), rgb(151, 102, 214)); color: rgb(24, 12, 45); font-size: 15px; font-weight: 650; box-shadow: rgba(159, 99, 235, 0.125) 0px 10px 35px; }
.paywall-screen .primary-button:hover { box-shadow: rgba(159, 99, 235, 0.24) 0px 12px 40px; transform: translateY(-1px); }
.offer-micro { margin: 13px 0px 0px; color: rgb(145, 134, 159); font-size: 10px; line-height: 1.6; text-align: center; }
.offer-purchase { margin: 88px auto 0px; scroll-margin-top: 80px; text-align: center; }
.offer-purchase h2, .plan-preview h2, .offer-stories h2, .offer-faq h2, .offer-final h2 { margin: 0px; color: rgb(238, 231, 245); font-size: clamp(28px, 3.9vw, 40px); font-weight: 500; line-height: 1.2; letter-spacing: -0.035em; }
.offer-purchase h2:focus { outline: none; }
.plan-price-card { margin-top: 30px; overflow: hidden; border: 1px solid rgba(172, 128, 229, 0.408); border-radius: 18px; background: linear-gradient(125deg, rgba(34, 27, 50, 0.55), rgba(53, 39, 69, 0.4)); text-align: left; }
.plan-price-banner { padding: 12px 16px; background: linear-gradient(110deg, rgb(181, 141, 229), rgb(147, 102, 196)); color: rgb(32, 16, 46); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-align: center; }
.plan-price-body { padding: 6px 24px 17px; }
.plan-price-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 0px; color: rgb(215, 206, 223); font-size: 15px; line-height: 1.4; }
.plan-price-row strong { flex-shrink: 0; font-weight: 550; font-variant-numeric: tabular-nums; }
.plan-price-row > strong { font-size: 21px; }
.plan-price-row .intro-price { color: rgb(192, 155, 233); }
.plan-price-row.total { border-top: 1px solid rgba(169, 144, 194, 0.17); }
.plan-price-row.total > strong:first-child { font-size: 14px; }
.plan-price-row.bonus { padding: 0px 0px 17px; color: rgb(167, 154, 181); font-size: 12px; }
.plan-price-row.bonus div { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.plan-price-row.bonus s { color: rgb(139, 126, 152); font-size: 12px; }
.plan-price-row.bonus strong { color: rgb(231, 221, 238); font-size: 18px; }
.plan-price-renewal { margin: 0px; padding-top: 13px; border-top: 1px solid rgba(169, 144, 194, 0.1); color: rgb(169, 154, 184); font-size: 11px; line-height: 1.6; text-align: center; }
.payment-security { margin: 25px 0px; color: rgb(98, 204, 166); font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
.payment-security span { margin-right: 6px; }
.offer-start { margin: 0px 0px 28px; color: rgb(224, 213, 235); font-size: 14px; font-weight: 550; }
.offer-benefits { display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 24px 20px; margin: 30px 0px; padding: 28px 5px; border-block: 1px solid rgba(169, 144, 194, 0.12); }
.offer-benefits > div { grid-column: span 2; }
.offer-benefits > div:nth-last-child(2) { grid-column: 2 / span 2; }
.offer-benefits > div > span { display: block; margin-bottom: 10px; color: rgb(179, 140, 222); font-size: 23px; font-weight: 400; line-height: 1; }
.offer-benefits h3 { margin: 0px 0px 7px; color: rgb(216, 203, 232); font-size: 11px; font-weight: 550; }
.offer-benefits p { max-width: 150px; margin: auto; color: rgb(151, 136, 169); font-size: 11px; line-height: 1.6; }
.subscription-copy { margin: 0px 0px 26px; color: rgb(154, 141, 167); font-size: 12px; line-height: 1.85; }
.subscription-copy strong { color: rgb(196, 181, 210); font-weight: 500; }
.subscription-copy a, .subscription-copy button { border: 0px; padding: 0px; background: none; color: rgb(182, 162, 203); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.plan-preview { margin: 68px auto 0px; max-width: 650px; }
.plan-preview h2 { font-size: clamp(26px, 3.5vw, 33px); }
.plan-preview > p:not(.offer-eyebrow) { margin: 22px 0px 0px; color: rgb(190, 177, 206); font-size: 15px; line-height: 1.85; }
.preview-locked { position: relative; margin-top: 10px; overflow: hidden; }
.preview-blur { filter: blur(5px); user-select: none; pointer-events: none; color: rgb(192, 181, 208); font-size: 15px; line-height: 1.85; opacity: 0.6; mask-image: linear-gradient(rgb(0, 0, 0) 30%, transparent); }
.preview-blur p { margin: 0px 0px 14px; }
.preview-lock-label { position: absolute; inset: 0px; display: flex; justify-content: center; align-items: center; gap: 9px; color: rgb(187, 162, 214); font-size: 12px; }
.offer-stories { width: min(100%, 600px); margin: 60px auto 0px; text-align: center; }
.paywall-screen .testimonial-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 30px 0px; text-align: left; }
.paywall-screen .testimonial-grid blockquote { padding: 26px; border: 1px solid rgba(170, 140, 206, 0.19); border-radius: 18px; background: linear-gradient(135deg, rgba(183, 152, 207, 0.043), rgba(183, 152, 207, 0.01)); }
.paywall-screen .testimonial-grid blockquote > span { color: rgb(201, 168, 117); font-size: 11px; }
.paywall-screen .testimonial-grid p { margin: 12px 0px 20px; color: rgb(208, 197, 220); font-size: 15px; line-height: 1.75; }
.paywall-screen .testimonial-grid cite { display: flex; align-items: center; gap: 8px; color: rgb(185, 163, 209); font-size: 11px; font-weight: 500; }
.paywall-screen .testimonial-grid cite > span:last-child { color: rgb(145, 130, 159); }
.review-avatar { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: rgba(166, 120, 215, 0.11); font-size: 9px; }
.offer-faq { width: min(100%, 600px); margin: 75px auto 0px; text-align: center; }
.offer-faq h2 { margin-bottom: 30px; }
.offer-faq details { margin-top: 10px; border: 1px solid rgba(170, 140, 206, 0.19); border-radius: 13px; background: rgba(183, 152, 207, 0.02); text-align: left; }
.offer-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px; list-style: none; color: rgb(208, 188, 223); font-size: 13px; line-height: 1.6; cursor: pointer; }
.offer-faq summary::-webkit-details-marker { display: none; }
.offer-faq summary > span { flex-shrink: 0; color: rgb(172, 130, 209); font-size: 20px; line-height: 1; transition: transform 0.2s; }
.offer-faq details[open] summary > span { transform: rotate(45deg); }
.offer-faq summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 13px; }
.offer-faq details p { margin: 0px; padding: 0px 20px 20px; color: rgb(163, 152, 175); font-size: 13px; line-height: 1.8; }
.offer-final { margin: 75px auto 0px; padding: 42px 32px 30px; border: 1px solid rgba(170, 140, 206, 0.24); border-radius: 23px; background: radial-gradient(at center top, rgba(123, 73, 183, 0.12), transparent 75%); text-align: center; }
.offer-final > p:not(.offer-eyebrow):not(.offer-micro):not(.offer-final-price) { max-width: 510px; margin: 20px auto 28px; color: rgb(166, 154, 179); font-size: 14px; line-height: 1.8; }
.offer-final-price { margin: 18px 0px 0px; color: rgb(162, 144, 177); font-size: 12px; }
.offer-final-price strong { color: rgb(216, 193, 240); font-weight: 550; }
.offer-final .offer-micro { margin-top: 7px; }
.paywall-screen .paywall-links { flex-wrap: wrap; gap: 22px; margin: 28px 0px 0px; color: rgb(137, 119, 151); font-size: 10px; }
.offer-policy { width: min(90vw, 490px); padding: 32px; border: 1px solid rgb(147, 106, 173); border-radius: 20px; background: rgb(26, 17, 40); color: rgb(225, 209, 239); }
.offer-policy::backdrop { background: rgba(6, 2, 11, 0.73); backdrop-filter: blur(5px); }
.offer-policy h2 { padding-right: 28px; font-size: 25px; font-weight: 500; }
.offer-policy p { margin: 0px; color: rgb(187, 167, 203); font-size: 14px; line-height: 1.8; }
.policy-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0px; border-radius: 50%; background: rgba(177, 136, 214, 0.133); font-size: 23px; cursor: pointer; }
@media (max-width: 599px) {
  .offer-brand { padding: 26px 0px 32px; }
  .offer-hero { margin-bottom: 30px; }
  .offer-hero h1 { font-size: clamp(32px, 8.5vw, 44px); }
  .offer-for { flex-wrap: wrap; gap: 5px 7px; font-size: 10px; }
  .offer-for > span:last-child { width: 100%; }
  .offer-for-dot { display: none; }
  .roadmap { padding: 25px 21px; border-radius: 19px; }
  .roadmap h2 { font-size: 26px; }
  .roadmap-duration strong { font-size: 58px; }
  .roadmap-steps li { gap: 13px; padding-bottom: 28px; }
  .roadmap h3 { font-size: 15px; }
  .roadmap-steps p { font-size: 12px; }
  .roadmap-period { font-size: 8px; }
  .roadmap-finish { gap: 10px; font-size: 7px; }
  .offer-challenge { gap: 10px; }
  .offer-challenge .offer-eyebrow { letter-spacing: 0.08em; }
  .offer-challenge div > p:last-child { font-size: 12px; }
  .offer-purchase { margin-top: 65px; }
  .plan-price-body { padding-inline: 18px; }
  .plan-price-row { font-size: 13px; }
  .plan-price-row.bonus { gap: 8px; font-size: 10px; }
  .plan-price-row.bonus div { gap: 7px; }
  .plan-price-row.bonus s { font-size: 10px; }
  .plan-price-row.bonus strong { font-size: 16px; }
  .offer-benefits { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 24px 12px; }
  .offer-benefits > div { grid-column: auto; }
  .offer-benefits > div:nth-last-child(2) { grid-column: auto; }
  .offer-benefits > div:last-child { grid-column: 1 / -1; }
  .offer-benefits h3 { font-size: 12px; }
  .offer-benefits p { font-size: 11px; }
  .subscription-copy { font-size: 12px; }
  .plan-preview { margin-top: 50px; }
  .plan-preview > p:not(.offer-eyebrow) { font-size: 14px; }
  .preview-blur { font-size: 14px; }
  .preview-lock-label { font-size: 11px; }
  .paywall-screen .testimonial-grid blockquote { padding: 22px; }
  .offer-faq { margin-top: 62px; }
  .offer-faq summary { font-size: 12px; padding: 18px; }
  .offer-final { padding: 32px 20px 25px; margin-top: 58px; }
  .offer-final h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .analysis-track > i { animation-duration: 15.7s !important; } }

/* Archetype reveal and a shorter, more open plan overview. */
.offer-hero { margin-bottom: 0; }
.archetype-result { max-width: 610px; margin: 38px auto 64px; padding: 20px 40px 34px; border: 1px solid rgba(184,137,221,.35); border-radius: 26px; background: radial-gradient(ellipse at 50% 0,rgba(143,83,190,.16),transparent 68%),linear-gradient(155deg,#191124,#0f0b17); box-shadow: 0 20px 60px rgba(0,0,0,.2),inset 0 1px 0 rgba(220,184,249,.05); text-align: center; }
.archetype-art { position: relative; isolation: isolate; width: min(100%,340px); margin: 0 auto 8px; aspect-ratio: 1; }
.archetype-aura { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse,rgba(168,94,237,.26),rgba(119,66,181,.06) 50%,transparent 70%); filter: blur(12px); }
.archetype-emblem { display: block; width: 100%; height: 100%; overflow: visible; }
.emblem-body { transform-origin: center; animation: archetype-float 6s ease-in-out infinite; }
.emblem-symbol { filter: drop-shadow(0 0 8px rgba(184,122,245,.45)); }
.emblem-shadow { opacity: .55; filter: blur(5px); }
.archetype-spark { position: absolute; color: #b38bd8; font-size: 17px; animation: archetype-glimmer 4s ease-in-out infinite alternate; }
.spark-one { top: 20%; right: 5%; }
.spark-two { bottom: 18%; left: 6%; font-size: 22px; animation-delay: -2s; }
.archetype-result > .offer-eyebrow { margin-bottom: 10px; color: #b78fdc; font-size: 10px; }
.archetype-result h2 { margin: 0; color: #e8d8f8; font-size: clamp(29px,4vw,38px); font-weight: 500; line-height: 1.18; letter-spacing: -.035em; }
.archetype-description { max-width: 460px; margin: 18px auto 0; color: #a99cb7; font-size: 15px; line-height: 1.75; }
.archetype-clues { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 22px auto 0; }
.archetype-clues span { padding: 8px 12px; border: 1px solid #b997d52b; border-radius: 8px; background: #a97fd20a; color: #bba2cd; font-size: 11px; line-height: 1.5; }
.archetype-focus { max-width: 430px; margin: 24px auto 0; padding-top: 20px; border-top: 1px solid rgba(183,137,216,.16); color: #d6bde8; font-size: 15px; font-weight: 400; line-height: 1.6; }
.archetype-for { margin: 12px 0 0; color: #8c7b9e; font-size: 12px; line-height: 1.6; }
.archetype-for span { color: #b7a3ca; overflow-wrap: anywhere; }
.roadmap.roadmap-simple { padding: 0 8px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.roadmap-simple > h2 { text-align: center; font-size: 32px; font-weight: 500; }
.roadmap-stages { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 38px 0 0; padding: 0; list-style: none; }
.roadmap-stages li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.roadmap-stages li:not(:last-child)::after { content: ''; position: absolute; top: 42px; left: calc(50% + 27px); width: calc(100% - 34px); height: 1px; background: linear-gradient(90deg,#ae7cd865,#ae7cd824); }
.stage-period { color: #9f86b3; font-size: 11px; letter-spacing: .02em; }
.stage-point { display: grid; place-items: center; width: 36px; height: 36px; margin: 14px 0 18px; border: 1px solid #ab7acf50; border-radius: 50%; background: #1b1226; color: #b99acb; font-size: 10px; }
.roadmap-stages li:first-child .stage-point { background: #af82df; border-color: #bd92e9; color: #261338; box-shadow: 0 0 20px #ae7ee42a; }
.roadmap-stages h3 { max-width: 175px; margin: 0; color: #dbcfdf; font-size: 15px; font-weight: 400; line-height: 1.55; }
.roadmap-simple .offer-challenge { max-width: 570px; gap: 18px; margin: 38px auto 32px; padding: 26px 0 0; }
.roadmap-simple .offer-challenge .offer-eyebrow { margin-bottom: 12px; font-size: 9px; line-height: 1.6; }
.roadmap-simple .offer-challenge h3 { margin-bottom: 9px; font-size: 18px; font-weight: 400; }
.roadmap-simple .offer-challenge div > p:last-child { max-width: 440px; color: #a396af; font-size: 14px; line-height: 1.7; }
.subscription-copy, .subscription-copy a, .subscription-copy button { color: #9a8da7; font-size: 12px; font-weight: 400; text-decoration: none; }
.subscription-copy a:hover, .subscription-copy button:hover { text-decoration: underline; }
.subscription-copy a:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.offer-start { margin-bottom: 26px; }
.offer-stories { width: min(100%,620px); }
.paywall-screen .testimonial-grid { gap: 18px; }
.paywall-screen .testimonial-grid blockquote { padding: 28px 30px; border-color: #aa8cce25; border-radius: 16px; background: linear-gradient(125deg,#a57bcc0c,#a57bcc04); }
.testimonial-grid h3 { margin: 16px 0 12px; color: #d6b5ec; font-size: 19px; font-weight: 400; font-style: italic; line-height: 1.5; letter-spacing: -.02em; }
.paywall-screen .testimonial-grid p { margin: 0 0 19px; color: #b3a5bd; font-size: 14px; line-height: 1.75; }
.paywall-screen .testimonial-grid cite { flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 400; color: #b895d0; }
.paywall-screen .testimonial-grid cite .review-context { margin-left: auto; color: #8d7d9c; font-size: 10px; }
@keyframes archetype-float { 0%,100% { transform: translateY(3px); } 50% { transform: translateY(-5px); } }
@keyframes archetype-glimmer { from { opacity: .3; transform: scale(.8); } to { opacity: .9; transform: scale(1.1); } }
@media (max-width: 599px) {
  .archetype-art { width: min(100%,280px); margin-bottom: 0; }
  .archetype-result { margin-top: 30px; margin-bottom: 48px; padding: 14px 22px 28px; border-radius: 22px; }
  .archetype-result h2 { font-size: 28px; }
  .archetype-description { max-width: 330px; font-size: 14px; }
  .archetype-clues { gap: 7px; }
  .archetype-clues span { padding: 7px 10px; font-size: 10px; }
  .archetype-focus { font-size: 14px; }
  .roadmap.roadmap-simple { padding-inline: 4px; }
  .roadmap-simple > h2 { font-size: 29px; }
  .roadmap-stages { display: grid; grid-template-columns: 1fr; gap: 24px; width: min(100%,310px); margin: 31px auto 0; }
  .roadmap-stages li { display: grid; grid-template-columns: 36px minmax(0,1fr); column-gap: 18px; row-gap: 6px; align-items: start; text-align: left; }
  .stage-point { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .stage-period { grid-column: 2; font-size: 10px; }
  .roadmap-stages h3 { grid-column: 2; max-width: none; font-size: 15px; }
  .roadmap-stages li:not(:last-child)::after { top: 44px; bottom: -16px; left: 17px; width: 1px; height: auto; background: linear-gradient(#ae7cd865,#ae7cd824); }
  .roadmap-simple .offer-challenge { gap: 12px; margin-top: 31px; padding-top: 25px; }
  .roadmap-simple .offer-challenge .offer-eyebrow { font-size: 8px; }
  .roadmap-simple .offer-challenge h3 { font-size: 16px; }
  .roadmap-simple .offer-challenge div > p:last-child { font-size: 13px; }
  .paywall-screen .testimonial-grid blockquote { padding: 24px; }
  .testimonial-grid h3 { font-size: 18px; }
  .paywall-screen .testimonial-grid cite .review-context { width: 100%; margin: 4px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .emblem-body, .archetype-spark { animation: none; }
}


/* Let the personalized headline lead the result reveal. */
.paywall-page.offer-intro { height: 100dvh; overflow: hidden; }
.offer-intro > .offer-timer,
.offer-intro .paywall-screen > :not(.offer-hero),
.offer-intro .offer-hero > :not(h1) { visibility: hidden; }
#offerHeroTitle { position: relative; text-wrap: wrap; }
.offer-heading-space { visibility: hidden; }
.offer-heading-typed { position: absolute; inset: 0; }
.offer-heading-typed::after { content: ''; display: inline-block; width: 2px; height: .82em; margin-left: 5px; background: #c7a2ff; vertical-align: -.04em; animation: analysis-blink .9s steps(2,end) infinite; }
.offer-reveal-item { opacity: 0; filter: blur(7px); transform: translateY(12px); transition: opacity .85s ease, filter 1s ease, transform 1s cubic-bezier(.22,.8,.25,1); transition-delay: var(--reveal-delay,0ms); }
.offer-revealed .offer-reveal-item { opacity: 1; filter: blur(0); transform: none; }
.offer-intro .archetype-result * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .offer-heading-typed::after { display: none; } .offer-reveal-item { filter: none; transform: none; } }

.subscription-copy { text-wrap: pretty; }

/* Transition beat between an insight screen and the next question. Words settle
   in on a CSS stagger, then the whole line fades out before the next screen. */
.bridge-stage { display: grid; width: 100%; place-items: center; }
.bridge-screen { display: flex; min-height: 58vh; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.bridge-line { max-width: 460px; margin: 0px; color: var(--text); font-size: clamp(22px, 5.4vw, 30px); font-weight: 700; line-height: 1.32; letter-spacing: -0.025em; overflow-wrap: anywhere; transition: opacity 0.58s ease, filter 0.58s ease, transform 0.58s ease; }
.bridge-line.is-leaving { opacity: 0; filter: blur(9px); transform: translateY(-6px); }
.bridge-word { display: inline-block; animation: 0.55s cubic-bezier(0.2, 0.7, 0.25, 1) calc(var(--i) * 85ms) both running bridge-word-in; }
@keyframes bridge-word-in {
  0% { opacity: 0; filter: blur(8px); transform: translateY(11px); }
  100% { opacity: 1; filter: blur(0px); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bridge-word { animation: none; }
  .bridge-line { transition: none; }
}

/* Obstacle insight scenes ------------------------------------------------ */
.obstacle-visual { display: block; width: min(100%, 380px); height: auto; overflow: visible; filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 18px 35px); }
.ov-label { fill: var(--quiet); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; opacity: 0; animation: ov-fade 0.8s ease 1.4s forwards; }
.ov-aura { opacity: 0; animation: ov-fade 1.6s ease 0.2s forwards; }
.ov-dot { fill: #fff; }
.ov-ring { fill: none; stroke: #c9a6ff; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ov-ring 2.4s ease-out 1.2s infinite; }
@keyframes ov-fade { to { opacity: 1; } }
@keyframes ov-draw { to { stroke-dashoffset: 0; } }
@keyframes ov-pop { 0% { opacity: 0; transform: scale(0.3); } 70% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ov-ring { 0% { opacity: 0.8; transform: scale(0.5); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes ov-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
/* willpower vs system */
.ov-graph-aura { animation-delay: 5.6s; }
.ov-graph-grid path { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.ov-graph-floor { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.ov-graph-goal { stroke: rgba(140, 235, 207, 0.45); stroke-width: 1.5; stroke-dasharray: 4 6; stroke-linecap: round; opacity: 0; animation: ov-fade 0.8s ease 0.2s forwards; }
.ov-graph-goal-label { animation-delay: 0.4s; fill: rgba(140, 235, 207, 0.7); }
/* attempt one: willpower. draws, crashes, then dims to a ghost */
.ov-graph-willpower { animation: ov-graph-dim 0.6s ease 3.1s forwards; }
@keyframes ov-graph-dim { to { opacity: 0.28; } }
.ov-graph-will-line { fill: none; stroke: url(#ovDanger); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ov-draw 2.3s linear 0.4s forwards; }
.ov-graph-will-label { animation-delay: 0.3s; fill: rgba(255, 106, 126, 0.85); }
.ov-graph-crash { fill: #ff6a7e; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ov-pop 0.35s ease-out calc(0.75s + var(--i) * 0.36s) forwards; }
/* attempt two: the system. dips, recovers, makes it */
.ov-graph-sys-line { fill: none; stroke: url(#ovStroke); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ov-draw 2.8s cubic-bezier(0.5, 0, 0.3, 1) 3.5s forwards; }
.ov-graph-sys-glow { fill: none; stroke: #a16eff; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ov-draw 2.8s cubic-bezier(0.5, 0, 0.3, 1) 3.5s forwards; }
.ov-graph-sys-label { animation-delay: 3.5s; fill: rgba(140, 235, 207, 0.85); }
.ov-graph-dip { fill: #8cebcf; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ov-pop 0.4s ease-out calc(4.2s + var(--i) * 0.75s) forwards; }
.ov-graph-summit { opacity: 0; animation: ov-fade 0.4s ease 6.2s forwards; }
.ov-graph-summit .ov-ring { animation-delay: 6.3s; }
/* the route */
.ov-grid path { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.ov-route-ghost { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; }
.ov-route { fill: none; stroke: url(#ovStroke); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ov-draw 3.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards; }
.ov-route-glow { fill: none; stroke: #a16eff; stroke-width: 12; stroke-linecap: round; opacity: 0.45; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ov-draw 3.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards; }
.ov-start .ov-ring { animation-delay: 0.2s; }
.ov-stop { opacity: 0; transform-box: fill-box; transform-origin: center; animation: ov-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) calc(1.3s + var(--i) * 1s) forwards; }
.ov-stop-disc { fill: #17102a; stroke: url(#ovStroke); stroke-width: 2; }
.ov-stop-halo { fill: #a16eff; opacity: 0.6; }
.ov-stop-number { fill: #fff; font-size: 11px; font-weight: 800; }
.ov-traveller-dot { fill: #fff; }
.ov-traveller-glow { fill: #8cebcf; opacity: 0.8; }
.ov-path .ov-label:last-of-type { animation-delay: 3.4s; }
/* the climb */
.ov-floor { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.ov-ghost { fill: none; stroke: rgba(255, 106, 126, 0.55); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; opacity: 0; animation: ov-fade 0.6s ease calc(0.9s + var(--i, 0) * 1.1s) forwards; }
.ov-rail { opacity: 0; animation: ov-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) calc(1.2s + var(--i) * 1.15s) forwards; transform-box: fill-box; transform-origin: center; }
.ov-rail-bar { fill: #8cebcf; }
.ov-rail-glow { fill: #4de6ad; opacity: 0.7; }
.ov-climb { fill: none; stroke: url(#ovStroke); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ov-draw 3.4s cubic-bezier(0.5, 0, 0.3, 1) 0.4s forwards; }
.ov-climb-glow { fill: none; stroke: #a16eff; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ov-draw 3.4s cubic-bezier(0.5, 0, 0.3, 1) 0.4s forwards; }
.ov-summit { opacity: 0; animation: ov-fade 0.4s ease 3.6s forwards; }
.ov-summit .ov-ring { animation-delay: 3.7s; }
.ov-catch .ov-label:last-of-type { animation-delay: 3.8s; }
/* the first step */
.ov-beam { opacity: 0; animation: ov-fade 1.4s ease 1.2s forwards; }
.ov-step { opacity: 0; animation: ov-rise 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) calc(0.2s + var(--i) * 0.25s) forwards; }
@keyframes ov-rise { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: var(--o); transform: translateY(0); } }
.ov-tread { fill: rgba(255, 255, 255, 0.07); stroke: rgba(201, 166, 255, 0.35); stroke-width: 1; }
.ov-tread-edge { fill: url(#ovStroke); opacity: 0.85; }
.ov-riser { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.ov-marker-drop { animation: ov-land 1.1s cubic-bezier(0.3, 0, 0.2, 1) 1.1s both; }
@keyframes ov-land { 0% { transform: translateY(-120px); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(2px); } 100% { transform: translateY(-6px); } }
.ov-marker-glow { fill: #a16eff; opacity: 0.9; }
.ov-land-ring { fill: none; stroke: #c9a6ff; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ov-ring 2.4s ease-out calc(2.1s + var(--i, 0) * 1.2s) infinite; }
.ov-chevrons { fill: none; stroke: rgba(201, 166, 255, 0.5); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: ov-fade 0.8s ease 2.6s forwards, ov-breathe 2.4s ease-in-out 3.4s infinite; }
.ov-first-step .ov-label { animation-delay: 2.4s; }
@media (max-width: 767px) { .obstacle-visual { width: min(100%, 320px); margin: 4px 0; } }

/* Single-benefit spotlight shown right after the support answer. */
.feature-spotlight .feature-meta { justify-content: center; }
.feature-spotlight .primary-button { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .commitment-label { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .card-engraving,.assembly-sheet::after { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .analysis-phase i { animation: none; } }