@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

.qmu-quiz,
.qmu-quiz * { box-sizing: border-box; }
.qmu-quiz {
  --qmu-primary: #168A5B;
  --qmu-secondary: #123B52;
  --qmu-accent: #C6A15B;
  --qmu-bg: #F7F4ED;
  --qmu-surface: #FFFFFF;
  --qmu-text: #172126;
  --qmu-muted: #5E6A70;
  width: 100%;
  min-height: min(100vh, 980px);
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--qmu-primary) 8%, transparent), transparent 28%),
    radial-gradient(circle at 86% 92%, color-mix(in srgb, var(--qmu-accent) 10%, transparent), transparent 30%),
    var(--qmu-bg);
  color: var(--qmu-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow: hidden;
  position: relative;
}
.qmu-quiz::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M0 36h72M36 0v72' stroke='%23123B52' stroke-opacity='.035' stroke-width='.7'/%3E%3C/svg%3E");
}
.qmu-stage { min-height: inherit; position: relative; z-index: 1; }
.qmu-shell { width: min(100% - 32px, 620px); margin-inline: auto; padding: 46px 0; }
.qmu-shell--intro { width: min(100% - 32px, 660px); text-align: center; padding-top: clamp(48px, 8vh, 96px); }
.qmu-shell--result { width: min(100% - 32px, 720px); }
.qmu-serif,
.qmu-quiz h1,
.qmu-quiz h2,
.qmu-quiz h3 { font-family: "Cormorant Garamond", Georgia, serif; margin: 0; color: var(--qmu-text); }
.qmu-title { font-size: clamp(2.35rem, 7vw, 4rem); line-height: 1.02; letter-spacing: -.035em; max-width: 16ch; margin: 18px auto 20px !important; }
.qmu-subtitle { font-size: clamp(1rem, 2.4vw, 1.13rem); color: var(--qmu-muted); max-width: 58ch; margin: 0 auto 28px; }
.qmu-eyebrow,
.qmu-result-label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: color-mix(in srgb, var(--qmu-secondary) 9%, transparent); color: var(--qmu-secondary); font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.qmu-result-label { color: var(--qmu-primary); background: color-mix(in srgb, var(--qmu-primary) 9%, transparent); }
.qmu-benefits { width: fit-content; max-width: 100%; margin: 0 auto 28px; padding: 0; list-style: none; text-align: left; display: grid; gap: 10px; }
.qmu-benefits li { display: flex; align-items: center; gap: 10px; }
.qmu-check { flex: 0 0 21px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--qmu-primary); color: #fff; font-size: .68rem; font-weight: 800; }
.qmu-button { appearance: none; border: 0; width: 100%; min-height: 58px; padding: 14px 20px; border-radius: 18px; background: var(--qmu-primary); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 16px 36px color-mix(in srgb, var(--qmu-primary) 22%, transparent); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.qmu-button:hover { transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 19px 38px color-mix(in srgb, var(--qmu-primary) 28%, transparent); }
.qmu-button:active { transform: translateY(0); }
.qmu-button:focus-visible,
.qmu-option:focus-visible,
.qmu-back:focus-visible { outline: 3px solid color-mix(in srgb, var(--qmu-secondary) 55%, white); outline-offset: 4px; }
.qmu-button--secondary { background: var(--qmu-secondary); }
.qmu-microcopy { margin: 12px 0 0; color: var(--qmu-muted); font-size: .75rem; }
.qmu-support { display: grid; justify-items: center; gap: 10px; margin-top: 34px; padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--qmu-muted) 18%, transparent); }
.qmu-support--compact { margin-top: 34px; padding-top: 20px; }
.qmu-support p { margin: 0; color: var(--qmu-muted); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.qmu-support img { display: block; width: min(100%, 320px); height: auto; padding: 10px 14px; background: rgba(255,255,255,.66); border-radius: 14px; filter: saturate(.9); }
.qmu-support--compact img { width: 210px; opacity: .78; }

.qmu-art { height: 86px; display: grid; place-items: center; margin: 0 auto 16px; color: var(--qmu-primary); }
.qmu-art svg { width: min(100%, 190px); height: 100%; overflow: visible; }
.qmu-art .qmu-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.qmu-art .qmu-line--soft { opacity: .28; }
.qmu-art .qmu-gold { stroke: var(--qmu-accent); }
.qmu-art .qmu-dot { fill: var(--qmu-accent); stroke: none; }
.qmu-has-motion .qmu-draw { stroke-dasharray: 320; stroke-dashoffset: 320; animation: qmu-draw 2.4s ease forwards; }
.qmu-has-motion .qmu-float { animation: qmu-float 4s ease-in-out infinite; transform-origin: center; }
.qmu-has-motion .qmu-pulse { animation: qmu-pulse 3.4s ease-in-out infinite; transform-origin: center; }
@keyframes qmu-draw { to { stroke-dashoffset: 0; } }
@keyframes qmu-float { 50% { transform: translateY(-4px); } }
@keyframes qmu-pulse { 50% { opacity: .35; transform: scale(.92); } }
@keyframes qmu-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.qmu-view { animation: qmu-enter .36s ease both; }

.qmu-progress-head { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 18px; margin-bottom: 38px; }
.qmu-back { border: 0; background: transparent; color: var(--qmu-muted); padding: 8px 0; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; text-align: left; }
.qmu-progress-meta { display: grid; gap: 8px; }
.qmu-progress-meta span { color: var(--qmu-muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.qmu-progress { height: 4px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--qmu-muted) 14%, transparent); }
.qmu-progress b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--qmu-primary), color-mix(in srgb, var(--qmu-primary) 68%, var(--qmu-accent))); transition: width .35s ease; }
.qmu-question-title { font-size: clamp(2rem, 5vw, 2.65rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 25px !important; }
.qmu-options { display: grid; gap: 12px; }
.qmu-option { width: 100%; min-height: 67px; padding: 16px 20px; border-radius: 18px; border: 1px solid transparent; background: var(--qmu-surface); color: var(--qmu-text); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 7px 24px rgba(18,59,82,.035); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease; }
.qmu-option:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--qmu-primary) 35%, transparent); box-shadow: 0 10px 28px rgba(18,59,82,.07); }
.qmu-option[aria-pressed="true"] { border-color: var(--qmu-secondary); background: color-mix(in srgb, var(--qmu-secondary) 3%, white); box-shadow: 0 0 0 2px color-mix(in srgb, var(--qmu-secondary) 10%, transparent); }
.qmu-insight { margin-top: 18px; padding: 15px 17px; border-radius: 14px; border-left: 3px solid var(--qmu-accent); background: color-mix(in srgb, var(--qmu-accent) 10%, white); color: var(--qmu-muted); font-size: .88rem; animation: qmu-enter .25s ease both; }

.qmu-processing { min-height: 520px; display: grid; align-content: center; text-align: center; }
.qmu-processing h2 { font-size: 2.55rem; }
.qmu-spinner { width: 52px; height: 52px; margin: 22px auto; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--qmu-secondary) 13%, transparent); border-top-color: var(--qmu-secondary); animation: qmu-spin .8s linear infinite; }
@keyframes qmu-spin { to { transform: rotate(360deg); } }
.qmu-process-list { display: grid; gap: 10px; color: var(--qmu-muted); }
.qmu-process-list span { opacity: .35; transition: opacity .3s ease; }
.qmu-process-list span.is-done { opacity: 1; color: var(--qmu-primary); }

.qmu-result-head { text-align: center; margin-bottom: 28px; }
.qmu-result-head h1 { margin: 13px 0 8px; font-size: clamp(2.7rem, 7vw, 4rem); line-height: 1; }
.qmu-result-head p { max-width: 54ch; margin: 0 auto; color: var(--qmu-muted); }
.qmu-card { border: 1px solid color-mix(in srgb, var(--qmu-muted) 12%, transparent); border-radius: 28px; background: color-mix(in srgb, var(--qmu-surface) 94%, transparent); box-shadow: 0 20px 60px rgba(18,59,82,.07); }
.qmu-diagnostic { padding: clamp(22px, 5vw, 36px); }
.qmu-kicker { color: var(--qmu-muted); font-size: .67rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.qmu-base { margin-top: 4px; color: var(--qmu-secondary); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.7rem; font-weight: 700; }
.qmu-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 25px 0; margin: 22px 0; border-top: 1px solid color-mix(in srgb, var(--qmu-muted) 14%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--qmu-muted) 14%, transparent); }
.qmu-two-col h3 { font-family: inherit; font-size: 1rem; margin-bottom: 10px; color: var(--qmu-primary); }
.qmu-two-col > div:last-child h3 { color: var(--qmu-accent); }
.qmu-two-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; font-size: .88rem; }
.qmu-two-col li::before { content: "•"; margin-right: 7px; color: var(--qmu-primary); }
.qmu-plan h3 { font-family: inherit; font-size: 1rem; margin-bottom: 13px; }
.qmu-plan-list { display: grid; gap: 9px; }
.qmu-plan-item { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; padding: 13px 15px; border-radius: 14px; background: var(--qmu-bg); font-size: .86rem; }
.qmu-plan-item b { color: var(--qmu-secondary); }
.qmu-bridge { text-align: center; padding: 44px 0 26px; }
.qmu-bridge h2 { max-width: 20ch; margin: 0 auto 12px; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.05; }
.qmu-bridge p { max-width: 56ch; margin: 0 auto 23px; color: var(--qmu-muted); }
.qmu-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.qmu-mini-card { padding: 16px 12px; border-radius: 16px; background: rgba(255,255,255,.62); color: var(--qmu-secondary); font-size: .78rem; font-weight: 600; }
.qmu-mini-card b { display: block; font-size: 1.15rem; margin-bottom: 5px; }

.qmu-offer { display: none; margin-top: 22px; overflow: hidden; }
.qmu-offer.is-visible { display: block; animation: qmu-enter .45s ease both; }
.qmu-offer-visual { min-height: 300px; padding: 30px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center; background: linear-gradient(145deg, var(--qmu-secondary), color-mix(in srgb, var(--qmu-secondary) 72%, #000)); color: #fff; }
.qmu-book-scene { min-height: 230px; display: grid; place-items: center; perspective: 800px; }
.qmu-book { width: 155px; aspect-ratio: .72; padding: 20px 14px; border-radius: 4px 15px 15px 4px; color: var(--qmu-secondary); background: linear-gradient(135deg, #fffdf6, #ebe5d6); box-shadow: -10px 12px 0 color-mix(in srgb, var(--qmu-accent) 75%, #6d5525), 0 28px 50px rgba(0,0,0,.3); transform: rotateY(-9deg) rotateZ(-2deg); display: grid; align-content: center; text-align: center; }
.qmu-book small { font-size: .55rem; letter-spacing: .15em; text-transform: uppercase; }
.qmu-book strong { margin-top: 9px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; line-height: 1; }
.qmu-book-mark { width: 58px; height: 58px; margin: 14px auto 0; border: 1px solid var(--qmu-accent); border-radius: 50%; display: grid; place-items: center; color: var(--qmu-accent); font-size: 1.4rem; }
.qmu-offer-copy h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.02; }
.qmu-offer-copy > p { color: rgba(255,255,255,.75); }
.qmu-offer-body { padding: clamp(22px, 5vw, 36px); }
.qmu-product-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.qmu-pill { padding: 7px 10px; border-radius: 999px; color: var(--qmu-secondary); background: color-mix(in srgb, var(--qmu-secondary) 8%, white); font-size: .72rem; font-weight: 700; }
.qmu-offer-items { list-style: none; padding: 0; margin: 0 0 25px; display: grid; gap: 10px; }
.qmu-offer-items li { display: flex; gap: 10px; align-items: flex-start; }
.qmu-offer-items li::before { content: "✓"; flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--qmu-primary) 12%, white); color: var(--qmu-primary); font-size: .72rem; font-weight: 800; }
.qmu-price { text-align: center; padding: 22px 0; border-top: 1px solid color-mix(in srgb, var(--qmu-muted) 12%, transparent); }
.qmu-price del { color: var(--qmu-muted); font-size: .85rem; }
.qmu-price strong { display: block; color: var(--qmu-primary); font-family: "Cormorant Garamond", Georgia, serif; font-size: 3rem; line-height: 1.1; }
.qmu-price span { color: var(--qmu-muted); font-size: .75rem; }
.qmu-secure { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 15px; color: var(--qmu-muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.qmu-disclosure { margin-top: 18px; padding: 14px 16px; border-radius: 13px; background: color-mix(in srgb, var(--qmu-secondary) 5%, white); color: var(--qmu-muted); font-size: .72rem; text-align: center; }

@media (max-width: 620px) {
  .qmu-shell { width: min(100% - 24px, 620px); padding: 28px 0; }
  .qmu-shell--intro { padding-top: 42px; }
  .qmu-title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .qmu-art { height: 68px; margin-bottom: 8px; }
  .qmu-progress-head { margin-bottom: 27px; }
  .qmu-question-title { font-size: 2.1rem; }
  .qmu-option { min-height: 61px; }
  .qmu-two-col { grid-template-columns: 1fr; }
  .qmu-benefit-grid { grid-template-columns: 1fr; }
  .qmu-offer-visual { grid-template-columns: 1fr; text-align: center; }
  .qmu-book-scene { min-height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .qmu-quiz *, .qmu-quiz *::before, .qmu-quiz *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}