/*
 * MPT landing page (page-test-mindprofile.php) — loaded only on that template.
 * Built on the main.css tokens (--color-accent-*, --ink, --r-*, --ease…); everything
 * here is prefixed .mpt- so it can't leak into the other test pages.
 * Motion: reveal/marquee/beam/orbs are all decorative and are switched off by
 * main.css's global prefers-reduced-motion rule (plus the explicit block at the end).
 */

:root, .mpt-page {
  --mpt-green: var(--lc-4d7c62, #4d7c62);
  --mpt-green-deep: var(--lc-244a39, #244a39);
  --mpt-green-dark: var(--lc-163527, #163527);
  --mpt-mint: var(--lc-dff5e3, #DFF5E3);
  --mpt-peach: var(--lc-fbe1d1, #FBE1D1);
  --mpt-line: rgba(36, 74, 57, .12);
  overflow-x: clip;
}
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* main.css caps every <p> at 62ch, which leaves a paragraph hugging the start edge of a wider container (dead space on the other side) */
.mpt-page p { max-width: none; }
.mpt-head p, .mpt-final p { max-width: 64ch; margin-inline: auto; }
.mpt-i { width: 1.15em; height: 1.15em; flex: none; }
.mpt-narrow { max-width: 780px; }
.mpt-wide { max-width: 1120px; }
.mpt-center { text-align: center; margin-top: var(--space-lg); }

/* Focus mode: while a test is running, only the quiz stays on screen. */
.mpt-page.mpt-focus [data-mpt-focus-hide] { display: none !important; }
.mpt-page.mpt-focus .mpt-start { padding-top: var(--space-lg); }

/* ---------- Beam CTA ---------- */
@property --mpt-beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes mpt-beam-spin { to { --mpt-beam: 360deg; } }

.mpt-cta {
  --beam-w: 2.5px;
  position: relative; isolation: isolate; z-index: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  min-height: 56px; padding: .9em 2.2em; border-radius: var(--r-pill);
  font-family: var(--font); font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: 0;
  color: var(--lt-ffffff, #fff); text-align: center; cursor: pointer; border: 0;
  background: linear-gradient(135deg, var(--lc-5f9a7c, #5f9a7c) 0%, var(--lc-3d7a5d, #3d7a5d) 48%, var(--lc-2a6047, #2a6047) 100%);
  box-shadow: 0 14px 30px -12px rgba(36,74,57,.65), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.mpt-cta > * { position: relative; z-index: 2; }
.mpt-cta .mpt-i { transition: transform var(--dur) var(--ease); }
/* the travelling beam: a conic-gradient ring hugging the outside edge */
.mpt-cta::before {
  content: ''; position: absolute; inset: calc(var(--beam-w) * -1); z-index: -1; border-radius: inherit; padding: var(--beam-w);
  background: conic-gradient(from var(--mpt-beam), transparent 0 58%, rgba(159,224,191,.0) 60%, var(--lc-9fe0bf, #9fe0bf) 76%, var(--lc-ffffff, #fff) 86%, var(--lc-fbe1d1, #FBE1D1) 92%, transparent 100%);
  -webkit-mask: linear-gradient(var(--lc-000000, #000) 0 0) content-box, linear-gradient(var(--lc-000000, #000) 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: mpt-beam-spin 3.4s linear infinite;
}
/* soft static glow under the button (kept static: an animated blur repaints every frame) */
.mpt-cta::after {
  content: ''; position: absolute; inset: 6px -4px -10px; z-index: -2; border-radius: inherit;
  background: radial-gradient(60% 70% at 50% 60%, rgba(95,154,124,.55), transparent 75%);
  filter: blur(12px); opacity: .9;
}
.mpt-cta:hover { transform: translateY(-2px) scale(1.015); filter: saturate(1.08) brightness(1.04); }
.mpt-cta:hover .mpt-i { transform: translateX(-4px); }
.mpt-cta:active { transform: translateY(0) scale(.99); }
.mpt-cta:focus-visible { outline: 3px solid var(--mpt-peach); outline-offset: 5px; }
.mpt-cta:disabled { opacity: .7; cursor: progress; }
.mpt-cta--block { display: flex; width: 100%; }
.mpt-cta--sm { min-height: 44px; padding: .55em 1.4em; font-size: 15px; }
.mpt-cta--light { background: linear-gradient(135deg, var(--lc-ffffff, #fff), var(--lc-f1fbf4, #f1fbf4)); color: var(--mpt-green-deep); box-shadow: 0 16px 34px -14px rgba(0,0,0,.6); }
.mpt-cta--light::after { background: radial-gradient(60% 70% at 50% 60%, rgba(159,224,191,.5), transparent 75%); }
.mpt-cta--light::before { background: conic-gradient(from var(--mpt-beam), transparent 0 58%, var(--lc-9fe0bf, #9fe0bf) 76%, var(--lc-fbe1d1, #FBE1D1) 92%, transparent 100%); }

/* off-screen beams and marquee are paused (mpt-landing.js toggles .mpt-idle) */
.mpt-idle::before, .mpt-idle .mpt-marquee__track { animation-play-state: paused; }
.mpt-marquee.mpt-idle .mpt-marquee__track { animation-play-state: paused; }

/* ---------- Hero ---------- */
.mpt-hero { position: relative; overflow: hidden; padding: calc(var(--space-xl) * .9) 0 0; text-align: center; background: linear-gradient(180deg, var(--lc-fbfdfb, #fbfdfb) 0%, var(--lc-ffffff, #fff) 100%); }
.mpt-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.mpt-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .7; animation: mpt-float 14s ease-in-out infinite; }
.mpt-orb--a { width: 420px; height: 420px; background: var(--mpt-mint); inset-block-start: -120px; inset-inline-start: -80px; }
.mpt-orb--b { width: 360px; height: 360px; background: var(--mpt-peach); inset-block-start: 40px; inset-inline-end: -90px; animation-delay: -4s; }
.mpt-orb--c { width: 260px; height: 260px; background: var(--lc-cfe9dc, #cfe9dc); inset-block-end: -80px; inset-inline-start: 38%; animation-delay: -8s; opacity: .55; }
@keyframes mpt-float { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(24px,-28px,0) scale(1.08); } }
.mpt-hero__inner { position: relative; max-width: 860px; }
.mpt-eyebrow { display: inline-flex; align-items: center; gap: .5em; padding: .35em 1em; border-radius: var(--r-pill); background: rgba(223,245,227,.75); color: var(--mpt-green-deep); border: 1px solid var(--mpt-line); font-size: 13.5px; font-weight: 600; backdrop-filter: blur(6px); }
.mpt-hero__title { margin: var(--space-md) 0 var(--space-md); font-size: clamp(30px, 5.2vw, 52px); line-height: 1.2; letter-spacing: -.01em; }
.mpt-hero__title span { display: block; margin-top: .25em; font-size: .62em; font-weight: 500; background: linear-gradient(90deg, var(--mpt-green-deep), var(--lc-5f9a7c, #5f9a7c), var(--mpt-green-deep)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: mpt-shine 6s linear infinite; }
@keyframes mpt-shine { to { background-position: -200% 0; } }
.mpt-hero__lead { max-width: 720px; margin: 0 auto var(--space-lg); font-size: 17.5px; line-height: 1.95; color: var(--lt-4b4f58, #4b4f58); }
.mpt-hero__lead strong { color: var(--ink); }

.mpt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 760px; margin: 0 auto var(--space-lg); }
.mpt-stats li { padding: 16px 8px; border-radius: var(--r-sm); background: rgba(255,255,255,.8); border: 1px solid var(--mpt-line); box-shadow: 0 10px 24px -16px rgba(36,74,57,.35); backdrop-filter: blur(6px); }
.mpt-stats strong { display: block; font-family: var(--font-display); font-size: clamp(24px, 3.6vw, 34px); line-height: 1.2; color: var(--mpt-green-deep); }
.mpt-stats span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }

.mpt-hero__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 24px; }
.mpt-link { font-weight: 600; color: var(--mpt-green-deep); border-bottom: 1.5px dashed currentColor; padding-bottom: 2px; }
.mpt-link:hover { color: var(--mpt-green); }
.mpt-price-chip { flex-basis: 100%; font-size: 14px; color: var(--muted); }

.mpt-marquee { position: relative; margin-top: var(--space-xl); padding-bottom: var(--space-lg); display: grid; gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, var(--lc-000000, #000) 10%, var(--lc-000000, #000) 90%, transparent); mask-image: linear-gradient(90deg, transparent, var(--lc-000000, #000) 10%, var(--lc-000000, #000) 90%, transparent); }
.mpt-marquee__row { overflow: hidden; direction: ltr; }
.mpt-marquee__track { display: flex; width: max-content; gap: 12px; animation: mpt-marquee 60s linear infinite; }
.mpt-marquee__row--rev .mpt-marquee__track { animation-direction: reverse; animation-duration: 70s; }
.mpt-marquee:hover .mpt-marquee__track { animation-play-state: paused; }
@keyframes mpt-marquee { to { transform: translateX(-50%); } }
.mpt-chip { direction: rtl; white-space: nowrap; padding: .45em 1.1em; border-radius: var(--r-pill); background: var(--lc-ffffff, #fff); border: 1px solid var(--mpt-line); font-size: 14px; color: var(--mpt-green-deep); box-shadow: 0 6px 14px -10px rgba(36,74,57,.5); }

/* ---------- Action zone ---------- */
.mpt-start { padding-block: var(--space-xl); background: linear-gradient(180deg, var(--lc-ffffff, #fff), var(--surface-alt)); scroll-margin-top: calc(var(--header-h) + 10px); }
.mpt-card { position: relative; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: var(--lc-ffffff, #fff); border: 1px solid var(--mpt-line); box-shadow: 0 30px 60px -30px rgba(36,74,57,.35), 0 0 0 1px rgba(255,255,255,.6) inset; overflow: hidden; }
.mpt-card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: linear-gradient(90deg, var(--lc-9fe0bf, #9fe0bf), var(--lc-4d7c62, #4d7c62), var(--lc-fbe1d1, #FBE1D1)); }
.mpt-card__tag { display: inline-block; margin-bottom: 10px; padding: .25em .9em; border-radius: var(--r-pill); background: var(--mpt-mint); color: var(--mpt-green-deep); font-size: 12.5px; font-weight: 700; }
.mpt-card__title { font-size: clamp(20px, 3vw, 26px); margin-bottom: 12px; }
.mpt-card p { color: var(--lt-4b4f58, #4b4f58); }
.mpt-card__price { font-size: 16px; }
.mpt-card__price strong { color: var(--mpt-green-deep); font-size: 20px; }
.mpt-card__price span { color: var(--muted); font-size: 14px; }
.mpt-card .mpt-cta { margin-top: 12px; }
.mpt-quiz.test-quiz { margin-top: 0; }
.mpt-quiz .test-intro-card { text-align: start; }
.mpt-quiz .test-intro-list { margin-bottom: var(--space-md); }

.mpt-buy__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 18px; padding: 16px 20px; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--mpt-mint), var(--lc-f4fbf6, #f4fbf6)); }
.mpt-buy__price strong { font-family: var(--font-display); font-size: clamp(28px, 5vw, 38px); color: var(--mpt-green-deep); line-height: 1.1; }
.mpt-buy__price span { color: var(--lt-4b6b5a, #4b6b5a); font-size: 14px; }
.mpt-buy__list { display: grid; gap: 10px; margin: 0 0 18px; }
.mpt-buy__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--lt-3a3e46, #3a3e46); }
.mpt-buy__list .mpt-i, .mpt-ticks .mpt-i { color: var(--mpt-green); background: var(--mpt-mint); border-radius: 50%; padding: 3px; width: 1.6em; height: 1.6em; margin-top: 1px; }
.mpt-buy .mz-pay-error { min-height: 1.4em; margin: 10px 0 0; color: var(--danger, var(--lt-c0392b, #c0392b)); font-size: 14px; }
.mpt-buy__secure { margin: 6px 0 0; font-size: 13px; color: var(--muted) !important; text-align: center; }
.mpt-code { margin: 0 0 6px; }
.mpt-code summary { cursor: pointer; list-style: none; display: inline-block; color: var(--mpt-green-deep); font-size: 14.5px; font-weight: 600; border-bottom: 1.5px dashed currentColor; }
.mpt-code summary::-webkit-details-marker { display: none; }
.mpt-code .form-field { margin-top: 10px; }
.mpt-code__row { display: flex; gap: 8px; }
.mpt-code__row input { flex: 1; min-width: 0; padding: .7em 1em; border: 1px solid var(--border); border-radius: 14px; background: var(--lc-ffffff, #fff); }
.mpt-code__row input:focus { outline: 2px solid var(--mpt-green); outline-offset: 1px; }
.mpt-code .mz-discount-msg { margin: 8px 0 0; font-size: 14px; min-height: 1.3em; }

/* ---------- Marketing sections ---------- */
.mpt-section { padding-block: clamp(56px, 8vw, 96px); scroll-margin-top: calc(var(--header-h) + 10px); }
.mpt-section--why, .mpt-section--about { background: var(--surface-alt); }
.mpt-head { max-width: 760px; margin: 0 auto var(--space-lg); text-align: center; }
.mpt-head h2, .mpt-section h2 { font-size: clamp(24px, 3.6vw, 36px); line-height: 1.3; margin: 14px 0 12px; }
.mpt-head p { color: var(--lt-4b4f58, #4b4f58); font-size: 17px; }

.mpt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mpt-sec { --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: 24px; background: var(--lc-ffffff, #fff); border: 1px solid var(--mpt-line); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); overflow: hidden; }
.mpt-sec::before { content: ''; position: absolute; inset: 0; background: radial-gradient(360px circle at var(--mx) var(--my), rgba(159,224,191,.32), transparent 60%); opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; }
.mpt-sec:hover { transform: translateY(-6px); border-color: rgba(77,124,98,.4); box-shadow: 0 28px 44px -26px rgba(36,74,57,.5); }
.mpt-sec:hover::before { opacity: 1; }
.mpt-sec__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mpt-sec__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: linear-gradient(135deg, var(--mpt-mint), var(--lc-eefaf1, #eefaf1)); color: var(--mpt-green-deep); transition: transform var(--dur-slow) var(--ease); }
.mpt-sec__icon .mpt-i { width: 26px; height: 26px; }
.mpt-sec:hover .mpt-sec__icon { transform: rotate(-8deg) scale(1.1); }
.mpt-sec__num { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: rgba(36,74,57,.13); line-height: 1; }
.mpt-sec h3 { margin: 0 0 6px; font-size: 19px; }
.mpt-sec__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; font-size: 13px; color: var(--mpt-green); font-weight: 600; }
.mpt-sec__tag { padding: 0 .7em; border-radius: var(--r-pill); background: var(--mpt-peach); color: var(--accent-ink); }
.mpt-sec__desc { margin: 0 0 14px; font-size: 14.8px; line-height: 1.85; color: var(--lt-4b4f58, #4b4f58); }
.mpt-sec__items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.mpt-sec__items li { padding: .2em .8em; border-radius: var(--r-pill); background: var(--surface); font-size: 12.5px; color: var(--lt-3a3e46, #3a3e46); }
.mpt-sec--safety { background: linear-gradient(160deg, var(--lc-fff7f1, #fff7f1), var(--lc-ffffff, #fff)); border-color: rgba(93,42,26,.15); }
.mpt-sec--safety .mpt-sec__icon { background: var(--mpt-peach); color: var(--accent-ink); }
.mpt-sec--safety .mpt-sec__meta { color: var(--accent-ink); }
.mpt-note { max-width: 820px; margin: var(--space-lg) auto 0; padding: 18px 22px; border-radius: var(--r-sm); background: var(--lc-fffaf5, #fffaf5); border: 1px dashed rgba(93,42,26,.3); color: var(--lt-5a4033, #5a4033); font-size: 15px; }

.mpt-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.mpt-split--rev { grid-template-columns: .85fr 1.15fr; }
.mpt-split p { color: var(--lt-4b4f58, #4b4f58); font-size: 16.5px; }
.mpt-visual { margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(36,74,57,.5); aspect-ratio: 4 / 5; background: var(--mpt-mint); }
/* the source art is 4:5 (portrait) and 1:1 (banner): never crop it, just cap its size */
.mpt-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mpt-visual:hover img { transform: scale(1.05); }
.mpt-ticks { display: grid; gap: 14px; margin-top: 20px; }
.mpt-ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--lt-3a3e46, #3a3e46); }
.mpt-ticks strong { color: var(--ink); }

.mpt-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
.mpt-steps::before { content: ''; position: absolute; inset-block-start: 28px; inset-inline: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--mpt-green) 0 8px, transparent 8px 16px); opacity: .35; }
.mpt-steps li { position: relative; padding: 0 8px; text-align: center; }
.mpt-steps__n { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: linear-gradient(135deg, var(--lc-5f9a7c, #5f9a7c), var(--lc-2a6047, #2a6047)); color: var(--lt-ffffff, #fff); font-family: var(--font-display); font-size: 22px; font-weight: 700; box-shadow: 0 12px 22px -10px rgba(36,74,57,.7); }
.mpt-steps h3 { font-size: 18px; margin-bottom: 6px; }
.mpt-steps p { margin: 0; font-size: 14.8px; color: var(--lt-4b4f58, #4b4f58); }

.mpt-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.mpt-fit__col { padding: 18px 20px; border-radius: var(--r-sm); }
.mpt-fit__col h3 { font-size: 16px; margin-bottom: 8px; }
.mpt-fit__col ul { display: grid; gap: 6px; padding-inline-start: 18px; list-style: disc; font-size: 14.5px; color: var(--lt-3a3e46, #3a3e46); }
.mpt-fit__col--yes { background: var(--mpt-mint); }
.mpt-fit__col--no { background: var(--lc-fff7f1, #fff7f1); }
.mpt-fit__col--no h3 { color: var(--accent-ink); }

.mpt-section--about p { font-size: 16.5px; color: var(--lt-3f434b, #3f434b); }
.mpt-section--about a:not(.mpt-cta) { color: var(--mpt-green-deep); font-weight: 600; border-bottom: 1.5px solid rgba(77,124,98,.4); }
.mpt-section--about a:not(.mpt-cta):hover { color: var(--mpt-green); }
.mpt-banner { max-width: 520px; margin: var(--space-md) auto 0; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-artifact); }
.mpt-banner img { width: 100%; height: auto; }

.mpt-faq { display: grid; gap: 12px; }
.mpt-faq__item { border-radius: 20px; background: var(--lc-ffffff, #fff); border: 1px solid var(--mpt-line); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.mpt-faq__item[open] { border-color: rgba(77,124,98,.45); box-shadow: 0 20px 36px -26px rgba(36,74,57,.5); }
.mpt-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 600; font-size: 16.5px; }
.mpt-faq__item summary::-webkit-details-marker { display: none; }
.mpt-faq__item summary i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); transition: transform var(--dur) var(--ease), background var(--dur); }
.mpt-faq__item summary i::before, .mpt-faq__item summary i::after { content: ''; position: absolute; inset: 0; margin: auto; width: 11px; height: 1.6px; background: var(--ink); border-radius: 2px; }
.mpt-faq__item summary i::after { transform: rotate(90deg); transition: transform var(--dur) var(--ease); }
.mpt-faq__item[open] summary i { background: var(--mpt-mint); transform: rotate(180deg); }
.mpt-faq__item[open] summary i::after { transform: rotate(0); }
.mpt-faq__a { padding: 0 22px 20px; }
.mpt-faq__a p { margin: 0; color: var(--lt-4b4f58, #4b4f58); font-size: 15.5px; }
.mpt-faq__item[open] .mpt-faq__a { animation: mpt-drop var(--dur-slow) var(--ease); }
@keyframes mpt-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.mpt-final { position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 110px); text-align: center; color: var(--lt-ffffff, #fff); background: radial-gradient(900px 400px at 80% 0%, rgba(159,224,191,.28), transparent 60%), radial-gradient(700px 360px at 10% 100%, rgba(251,225,209,.18), transparent 60%), linear-gradient(160deg, var(--lc-1d4433, #1d4433), var(--mpt-green-dark)); }
.mpt-final h2 { color: var(--lt-ffffff, #fff); font-size: clamp(26px, 4.2vw, 42px); margin-bottom: 10px; }
.mpt-final p { color: rgba(255,255,255,.85); font-size: 17.5px; margin-bottom: 28px; }
.mpt-final small { display: block; margin-top: 18px; color: rgba(255,255,255,.65); font-size: 13.5px; }

/* ---------- Mobile sticky bar ---------- */
.mpt-sticky { position: fixed; left: 0; right: 0; bottom: 0; inset-inline: 0; inset-block-end: 0; z-index: 60; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--mpt-line); box-shadow: 0 -14px 30px -18px rgba(0,0,0,.25); transform: translateY(110%); transition: transform var(--dur-slow) var(--ease); }
.mpt-sticky.is-on { transform: none; }
.mpt-sticky strong { display: block; font-size: 14px; line-height: 1.3; }
.mpt-sticky span { font-size: 13px; color: var(--muted); }
.mpt-sticky[hidden] { display: none !important; }

/* ---------- Tier groups (NEO) ---------- */
.mpt-group { margin: var(--space-lg) 0 16px; }
.mpt-group:first-of-type { margin-top: 0; }
.mpt-group__title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 19px; padding-bottom: 10px; border-bottom: 2px solid var(--mpt-mint); }
.mpt-group__title small { padding: .15em .8em; border-radius: var(--r-pill); background: var(--mpt-mint); color: var(--mpt-green-deep); font-family: var(--font); font-size: 13px; font-weight: 700; }
.mpt-group__title--smart { border-color: var(--mpt-peach); }
.mpt-group__title--smart small { background: var(--mpt-peach); color: var(--accent-ink); }
.mpt-group__title--pro { border-color: var(--lc-d9d6f2, #d9d6f2); }
.mpt-group__title--pro small { background: var(--lc-ebe9fb, #ebe9fb); color: var(--lt-3b3577, #3b3577); }
.mpt-grid--tier { margin-bottom: 8px; }
.mpt-grid--four { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.mpt-sec--smart .mpt-sec__icon { background: linear-gradient(135deg, var(--mpt-peach), var(--lc-fff3ea, #fff3ea)); color: var(--accent-ink); }
.mpt-sec--pro .mpt-sec__icon { background: linear-gradient(135deg, var(--lc-ebe9fb, #ebe9fb), var(--lc-f6f5fd, #f6f5fd)); color: var(--lt-3b3577, #3b3577); }
.mpt-sec--pro { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px, 1fr) 1.7fr; column-gap: clamp(24px, 5vw, 64px); align-content: start; }
.mpt-sec--pro > .mpt-sec__top, .mpt-sec--pro > h3, .mpt-sec--pro > .mpt-sec__meta { grid-column: 1; }
.mpt-sec--pro > .mpt-sec__desc { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
.mpt-sec--pro > .mpt-sec__items { grid-column: 2; grid-row: 3; margin-top: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .mpt-grid { grid-template-columns: repeat(2, 1fr); }
  .mpt-sec--pro { display: flex; }
  .mpt-sec--pro > .mpt-sec__desc { margin: 0 0 14px; }
  .mpt-split, .mpt-split--rev { grid-template-columns: 1fr; }
  .mpt-split .mpt-visual { aspect-ratio: 4 / 5; width: min(100%, 340px); margin-inline: auto; order: -1; }
  .mpt-steps { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .mpt-steps::before { display: none; }
}
@media (max-width: 640px) {
  .mpt-hero { padding-top: var(--space-lg); }
  .mpt-stats { grid-template-columns: repeat(2, 1fr); }
  .mpt-grid { grid-template-columns: 1fr; }
  .mpt-fit { grid-template-columns: 1fr; }
  .mpt-steps { grid-template-columns: 1fr; }
  .mpt-hero__lead { font-size: 16px; }
  .mpt-cta { font-size: 16px; padding-inline: 1.6em; }
  .mpt-hero__actions .mpt-cta { width: 100%; }
  .mpt-sticky:not([hidden]) { display: flex; }
  .mpt-page { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .mpt-cta, .mpt-cta::before, .mpt-orb, .mpt-marquee__track, .mpt-hero__title span { animation: none !important; }
  .mpt-marquee__row { overflow-x: auto; }
}
@media print { .mpt-hero, .mpt-marketing, .mpt-sticky { display: none !important; } }

/* =====================================================================
   Quiz experience (2026-09-19): everything below applies inside .mpt-quiz on all
   test pages. The per-test scripts only fill .test-question / .test-options /
   .test-progress; this layer restyles them and mpt-landing.js adds the motion
   (question transitions, pace/time-left, milestones, keyboard). No test logic here.
   ===================================================================== */
.mpt-quiz.test-quiz { position: relative; overflow: hidden; border: 1px solid var(--mpt-line); border-radius: 28px; box-shadow: 0 30px 60px -34px rgba(36,74,57,.4); background: linear-gradient(180deg, var(--lc-ffffff, #fff), var(--lc-fbfdfb, #fbfdfb)); }
.mpt-quiz.test-quiz::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: linear-gradient(90deg, var(--lc-9fe0bf, #9fe0bf), var(--lc-4d7c62, #4d7c62), var(--lc-fbe1d1, #FBE1D1)); }

/* intro checklist */
.mpt-quiz .test-intro-list { list-style: none; padding: 0; display: grid; gap: 10px; color: var(--lt-3a3e46, #3a3e46); }
.mpt-quiz .test-intro-list li { position: relative; margin: 0; padding-inline-start: 34px; line-height: 1.9; }
.mpt-quiz .test-intro-list li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: calc(.95em - 11px); width: 22px; height: 22px; border-radius: 50%; background: var(--mpt-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d7c62' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* progress: a proper bar with a glowing head and a live pace line */
.mpt-quiz .test-progress { flex-wrap: wrap; gap: 8px 14px; margin-bottom: var(--space-md); }
.mpt-quiz .test-progress__track { height: 10px; background: var(--surface); border-radius: 999px; overflow: visible; position: relative; }
.mpt-quiz .test-progress__track span { position: relative; border-radius: 999px; background: linear-gradient(90deg, var(--lc-9fe0bf, #9fe0bf), var(--lc-4d7c62, #4d7c62)); min-width: 10px; transition: width .6s var(--ease); }
.mpt-quiz .test-progress__track span::after { content: ''; position: absolute; inset-inline-end: -3px; inset-block-start: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--lc-ffffff, #fff); border: 3px solid var(--lc-4d7c62, #4d7c62); box-shadow: 0 0 0 5px rgba(77,124,98,.18); }
.mpt-quiz .test-progress__count { font-size: 13.5px; font-weight: 600; color: var(--mpt-green-deep); }
.mpt-pace { flex-basis: 100%; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); min-height: 1.5em; }
.mpt-pace b { color: var(--mpt-green-deep); font-weight: 700; }

/* the question sits on its own soft card */
.mpt-quiz .test-question { margin: 0 0 var(--space-md); padding: 18px 20px; border-radius: 20px; background: linear-gradient(135deg, var(--lc-f3faf5, #f3faf5), var(--lc-ffffff, #fff)); border: 1px solid var(--mpt-line); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.85; }

/* answers: big tappable cards instead of thin table rows */
.mpt-quiz .test-options { gap: 10px; margin-top: 0; }
.mpt-quiz .test-option {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 12px 16px 12px 16px;
  border: 1.5px solid var(--mpt-line); border-bottom: 1.5px solid var(--mpt-line); border-radius: 18px; background: var(--lc-ffffff, #fff); color: var(--ink); font-size: 16px; font-weight: 500; text-align: start;
  box-shadow: 0 6px 14px -12px rgba(36,74,57,.5);
  transition: transform .18s var(--ease), border-color .18s, background .18s, box-shadow .18s;
}
.mpt-quiz .test-option:last-child { border-bottom: 1.5px solid var(--mpt-line); }
.mpt-key { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 700; transition: background .18s, color .18s; }

/* MBTI (typemap) and NEO (bigfive) only: the "most true/agree" end on top, the
   "least true/agree" end on the bottom. Visual flip only (flex-direction, not
   DOM order) so each test's own answer indices/scoring, the resume/autosave
   replay in mpt-landing.js (which clicks options by DOM position) and the
   number-key shortcuts all stay untouched -- nobody mid-test or resuming a
   saved-in-progress attempt is affected. */
#typemap-test .test-options, #bigfive-test .test-options { flex-direction: column-reverse; }
.mpt-quiz .test-option:focus-visible { background: var(--lc-f5fbf7, #f5fbf7); border-color: rgba(77,124,98,.55); transform: translateX(-4px); box-shadow: 0 14px 24px -16px rgba(36,74,57,.6); }
/* hover only on real pointers: touch browsers (iOS Safari) keep :hover stuck on whatever
   sits under the last tap, so the NEXT question's same-position option looked pre-selected */
@media (hover: hover) {
  .mpt-quiz .test-option:hover { background: var(--lc-f5fbf7, #f5fbf7); border-color: rgba(77,124,98,.55); transform: translateX(-4px); box-shadow: 0 14px 24px -16px rgba(36,74,57,.6); }
  .mpt-quiz .test-option:hover .mpt-key { background: var(--mpt-mint); color: var(--mpt-green-deep); }
}
.mpt-quiz .test-option:active { transform: scale(.985); }
.mpt-quiz .test-option:focus-visible { outline: 3px solid var(--mpt-peach); outline-offset: 2px; }
.mpt-quiz .test-option.is-selected { background: linear-gradient(135deg, var(--lc-4f8a6c, #4f8a6c), var(--lc-2a6047, #2a6047)); border-color: transparent; color: var(--lt-ffffff, #fff); animation: mpt-pick .35s var(--ease); }
.mpt-quiz .test-option.is-selected .mpt-key { background: rgba(255,255,255,.22); color: var(--lt-ffffff, #fff); }
.mpt-quiz .test-option--skip { min-height: 46px; border-style: dashed; background: transparent; color: var(--muted); box-shadow: none; font-size: 14.5px; }
@keyframes mpt-pick { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }
.mpt-quiz .test-prev { color: var(--muted); }

/* question change: the card and its answers glide in */
.mpt-q-enter { animation: mpt-q-in .42s var(--ease) both; }
.mpt-q-enter-opts .test-option { animation: mpt-q-in .42s var(--ease) both; }
.mpt-q-enter-opts .test-option:nth-child(2) { animation-delay: .04s; }
.mpt-q-enter-opts .test-option:nth-child(3) { animation-delay: .08s; }
.mpt-q-enter-opts .test-option:nth-child(4) { animation-delay: .12s; }
.mpt-q-enter-opts .test-option:nth-child(5) { animation-delay: .16s; }
.mpt-q-enter-opts .test-option:nth-child(n+6) { animation-delay: .2s; }
@keyframes mpt-q-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }

/* encouragement bubble at 25 / 50 / 75 / 90 % */
.mpt-toast { position: absolute; inset-inline: 16px; inset-block-start: 16px; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: linear-gradient(135deg, var(--lc-2a6047, #2a6047), var(--lc-163527, #163527)); color: var(--lt-ffffff, #fff); font-size: 15px; font-weight: 600; box-shadow: 0 18px 30px -16px rgba(22,53,39,.7); animation: mpt-toast 3.2s var(--ease) both; pointer-events: none; }
.mpt-toast i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.16); font-style: normal; font-size: 18px; }
@keyframes mpt-toast { 0% { opacity: 0; transform: translateY(-16px) scale(.96); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
.mpt-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.mpt-confetti span { position: absolute; inset-block-start: 40px; width: 9px; height: 9px; border-radius: 3px; opacity: 0; animation: mpt-fall 1.4s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes mpt-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), 260px) rotate(var(--rot)); } }
.mpt-keyhint { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--faint); }
@media (hover: none) { .mpt-keyhint { display: none; } }
@media (max-width: 600px) {
  .mpt-quiz .test-question { padding: 14px 14px; }
  .mpt-quiz .test-option { min-height: 54px; font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .mpt-q-enter, .mpt-q-enter-opts .test-option, .mpt-toast, .mpt-confetti span, .mpt-quiz .test-option.is-selected { animation: none !important; } .mpt-toast { opacity: 1; } }

/* resume card at the top of a quiz's intro (saved progress, see mpt-landing.js) */
.mpt-resume { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: var(--space-md); padding: 16px 18px; border-radius: 22px; background: linear-gradient(135deg, var(--lc-fff6ee, #fff6ee), var(--lc-f3faf5, #f3faf5)); border: 1px solid rgba(245,166,35,.4); animation: mpt-q-in .5s var(--ease) both; }
.mpt-resume__text { flex: 1; min-width: 180px; }
.mpt-resume__text strong { display: block; font-size: 16px; color: var(--ink); }
.mpt-resume__text p { margin: 2px 0 0; font-size: 14px; color: var(--lt-4b4f58, #4b4f58); }
.mpt-resume__btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mpt-resume .mpt-cta { margin-top: 0; }