/* Quiz result and staging preview. Shared values come from css/tokens.css. */
.msa-result-preview {
  margin: 0;
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm-lh);
}
.msa-result-preview * { box-sizing: border-box; }
.msa-result-preview :is(button, input, select, textarea) { font-family: var(--font-family); }
.msa-result-preview a { color: var(--color-accent); }
.msa-result-preview :is(a, button) { -webkit-tap-highlight-color: transparent; }
.msa-result-preview :is(a, button, input):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.msa-result-preview img { max-width: 100%; }
.msa-result-preview [hidden] { display: none !important; }
.msa-result-preview main, .msa-result-preview .result-main { max-width: calc(var(--container-width) + 2 * var(--container-padding)); margin: auto; padding: 0 var(--container-padding); }
/* Review controls are separate from the proposed customer-facing result. */
.msa-result-preview .preview-tools { background: var(--color-accent); color: var(--color-white); font-size: var(--text-caption); line-height: var(--text-caption-lh); }
.msa-result-preview .preview-tools__inner { max-width: calc(var(--container-width) + 2 * var(--container-padding)); min-height: 48px; margin: auto; padding: var(--gap-xs) var(--container-padding); display: flex; flex-wrap: wrap; gap: var(--gap-sm); align-items: center; justify-content: space-between; }
.msa-result-preview .preview-tools b { font-size: inherit; }
.msa-result-preview .preview-tools nav { display: flex; flex-wrap: wrap; gap: 4px; }
.msa-result-preview .preview-tools a { color: inherit; text-decoration: none; padding: var(--gap-xs); border-radius: var(--radius-xs); }
.msa-result-preview .preview-tools a[aria-current] { background: var(--color-white); color: var(--color-accent); }
.msa-result-preview .preview-tools a:hover { text-decoration: underline; }
.msa-result-preview .offer-switch { border: 1px solid currentColor; }
/* The entry language is retained; no language choice is added to this preview. */
body:has(.msa-result-preview) .new-hdr__top-right .new-hdr__lang { display: none; }
.msa-result-preview .result-intro { text-align: center; max-width: 850px; margin: var(--gap-lg) auto var(--gap-md); }
.msa-result-preview .eyebrow { font-size: var(--text-caption); line-height: var(--text-caption-lh); font-weight: var(--font-weight-bold); letter-spacing: .08em; margin: 0 0 var(--gap-sm); color: var(--color-text-secondary); }
.msa-result-preview h1 { font-size: var(--text-hero-dt); line-height: var(--text-hero-dt-lh); font-weight: var(--font-weight-bold); letter-spacing: normal; margin: var(--gap-xs) auto var(--gap-sm); max-width: 850px; }
.msa-result-preview :is(h2, h3) { color: var(--color-text); font-weight: 600; letter-spacing: normal; }
.msa-result-preview .intro-copy { max-width: 710px; margin: 0 auto; color: var(--color-text-secondary); font-size: var(--text-body); line-height: var(--text-body-lh); }
.msa-result-preview .benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-md); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--gap-md); background: var(--color-bg-secondary); }
.msa-result-preview .benefits article + article { border-left: 1px solid var(--color-border); padding-left: var(--gap-md); }
.msa-result-preview .benefit-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); margin-bottom: var(--gap-sm); background: var(--color-bg-tint); color: var(--color-accent); }
.msa-result-preview .benefit-icon svg { width: 20px; height: 20px; }
.msa-result-preview .benefits h2 { font-size: var(--text-h3); line-height: var(--text-h3-lh); margin: 0 0 var(--gap-xs); }
.msa-result-preview .benefits p { font-size: var(--text-body-sm); line-height: var(--text-body-sm-lh); color: var(--color-text-secondary); margin: 0; }
.msa-result-preview .benefits .eligibility-note { grid-column: 1 / -1; font-size: var(--text-caption); line-height: var(--text-caption-lh); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.msa-result-preview .choice-section { margin-top: var(--gap-lg); }
.msa-result-preview .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap-md); margin-bottom: var(--gap-md); }
.msa-result-preview .section-heading h2 { font-size: var(--text-title); line-height: var(--text-title-lh); margin: 0; }
.msa-result-preview .section-heading > p { font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-text-secondary); margin: 0; text-align: right; }
.msa-result-preview .choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); align-items: stretch; }
.msa-result-preview .choice-card { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--gap-md); display: flex; flex-direction: column; background: var(--color-white); min-width: 0; }
.msa-result-preview .choice-card--premium { border: 2px solid var(--color-accent-2); padding: calc(var(--gap-md) - 1px); background: linear-gradient(var(--color-error-bg), var(--color-white) 47%); }
.msa-result-preview .bundle-label { align-self: flex-start; max-width: 100%; margin: calc(-1 * (var(--gap-md) + var(--gap-sm))) 0 var(--gap-sm); background: var(--color-accent-2); border-radius: var(--radius-xs); padding: 4px var(--gap-xs); font-size: var(--text-caption); line-height: var(--text-caption-lh); font-weight: var(--font-weight-bold); color: var(--color-white); }
.msa-result-preview .card-label { display: block; font-size: var(--text-caption); line-height: var(--text-caption-lh); font-weight: 600; color: var(--color-text-secondary); }
.msa-result-preview .card-top h3 { font-size: var(--text-title); line-height: var(--text-title-lh); margin: var(--gap-xs) 0; }
.msa-result-preview .card-top p { font-size: var(--text-body-sm); line-height: var(--text-body-sm-lh); color: var(--color-text-secondary); margin: 0; }
.msa-result-preview .product-image { height: 140px; background: var(--color-white); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: var(--gap-sm) 0; }
.msa-result-preview .product-image img { height: 140px; width: 90%; object-fit: contain; }
.msa-result-preview .included { list-style: none; margin: 0 0 var(--gap-sm); padding: 0; }
.msa-result-preview .included li { position: relative; font-size: var(--text-body-sm); line-height: var(--text-body-sm-lh); padding: 4px 0 4px var(--gap-md); }
.msa-result-preview .included li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 10px; height: 6px; border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(-45deg); }
.msa-result-preview .included .full-accessories { font-weight: 600; background: var(--color-error-bg); padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) var(--gap-lg); border-radius: var(--radius-sm); margin-top: var(--gap-xs); }
.msa-result-preview .included .full-accessories::before { left: 10px; top: 14px; }
.msa-result-preview .purchase-block { margin-top: auto; padding-top: var(--gap-sm); border-top: 1px solid var(--color-border); }
.msa-result-preview .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gap-xs); color: var(--color-text); }
.msa-result-preview .price strong { font-size: var(--text-display); line-height: var(--text-display-lh); font-weight: 600; letter-spacing: normal; }
.msa-result-preview .price > span, .msa-result-preview .price small { font-size: var(--text-caption); color: var(--color-text-secondary); }
.msa-result-preview .price del { font-size: var(--text-h3); color: var(--color-icon-gray); }
.msa-result-preview .price-caption { font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-text-secondary); margin: 4px 0 var(--space-md); }
.msa-result-preview .choice-card .price-caption { margin-bottom: var(--gap-sm); }
/* Match product-card V2 controls: Montserrat, 16px/20px, 48px target, 8px corners. */
.msa-result-preview .button, .msa-result-preview .accessory-card .new-hdr__prod-cart { font-family: var(--font-family); font-size: var(--text-btn-bold); line-height: var(--text-btn-bold-lh); font-weight: var(--font-weight-bold); min-height: 48px; height: auto; width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--gap-xs); border-radius: var(--radius-sm); border: 1px solid var(--color-accent-2); padding: var(--gap-sm) var(--space-md); text-decoration: none; text-transform: none; text-align: center; white-space: normal; cursor: pointer; box-shadow: none; }
.msa-result-preview .button > span { margin-left: auto; font-size: 20px; line-height: 1; flex-shrink: 0; }
.msa-result-preview .button-primary { background: var(--color-accent-2); color: var(--color-white); }
.msa-result-preview .button-primary:hover { background: var(--color-white); color: var(--color-accent-2); }
.msa-result-preview .button-secondary, .msa-result-preview .accessory-card .new-hdr__prod-cart { background: var(--color-white); color: var(--color-accent-2); }
.msa-result-preview .button-secondary:hover:not(:disabled), .msa-result-preview .accessory-card .new-hdr__prod-cart:hover:not(:disabled) { background: var(--color-accent-2); color: var(--color-white); }
.msa-result-preview button:disabled { opacity: .5; cursor: not-allowed; }
.msa-result-preview .testimonial { display: grid; grid-template-columns: 40px 1fr; gap: var(--gap-sm); margin: var(--gap-lg) 0; padding: var(--gap-md); border-radius: var(--radius-xl); background: var(--color-bg-tint); border: 1px solid var(--color-border); }
.msa-result-preview .quote-mark { font-family: var(--font-family); font-size: 64px; line-height: 1; color: var(--color-accent); }
.msa-result-preview .testimonial blockquote { font-size: var(--text-h3); line-height: var(--text-body-lh); letter-spacing: normal; margin: 0; max-width: 770px; }
.msa-result-preview .review-author { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-sm); margin-top: var(--space-md); }
.msa-result-preview .avatar { width: 32px; height: 32px; background: var(--color-white); color: var(--color-accent); border-radius: var(--radius-full); font-weight: var(--font-weight-bold); font-size: var(--text-caption); display: flex; align-items: center; justify-content: center; }
.msa-result-preview .review-author div { display: flex; flex-direction: column; gap: 2px; }
.msa-result-preview .review-author strong { font-size: var(--text-label); }
.msa-result-preview .review-author div > span, .msa-result-preview .review-author > a { font-size: var(--text-caption); line-height: var(--text-caption-lh); }
.msa-result-preview .review-author div > span { color: var(--color-text-secondary); }
.msa-result-preview .review-author > a { margin-left: auto; text-underline-offset: 4px; }
.msa-result-preview .accessories { padding: var(--gap-lg) 0; border-top: 1px solid var(--color-border); }
.msa-result-preview .accessory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-md); }
.msa-result-preview .accessory-card { border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--gap-md); display: flex; flex-direction: column; min-width: 0; background: var(--color-bg-secondary); }
.msa-result-preview .accessory-card > a { text-decoration: none; }
.msa-result-preview .accessory-card img { width: 100%; height: 160px; object-fit: contain; margin-bottom: var(--space-md); background: var(--color-white); border-radius: var(--radius-lg); }
.msa-result-preview .accessory-card h3 { font-size: var(--text-h3); line-height: var(--text-h3-lh); min-height: 44px; margin: 0 0 var(--space-md); }
.msa-result-preview .accessory-card .new-hdr__prod-cart { position: static; flex: none; margin-top: auto; }
.msa-result-preview .accessory-note { font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-text-secondary); margin: var(--space-md) 0 0; }
.msa-result-preview .result-footer { border-top: 1px solid var(--color-border); font-size: var(--text-body-sm); padding: var(--gap-md) 0 var(--gap-xl); }
.msa-result-preview .result-footer a { text-underline-offset: 4px; }
.msa-result-preview .preview-note { background: var(--color-bg-secondary); color: var(--color-text-secondary); font-size: var(--text-caption); line-height: var(--text-caption-lh); text-align: center; padding: var(--space-md) var(--container-padding); border-top: 1px solid var(--color-border); }
.msa-result-preview .email-preview { max-width: 560px; margin: var(--gap-xl) auto var(--gap-xxl); }
.msa-result-preview .email-preview h1 { font-size: var(--text-h1); line-height: var(--text-h1-lh); }
.msa-result-preview .email-preview > label { display: block; font-size: var(--text-body-sm); margin: var(--space-md) 0 var(--gap-xs); }
.msa-result-preview .email-preview input[type=email] { width: 100%; padding: var(--gap-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; background: var(--color-bg-secondary); }
.msa-result-preview .preview-email-note { font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-text-secondary); }
.msa-result-preview #preview-continue { margin-top: var(--space-md); }
@media (max-width: 768px) {
  .msa-result-preview .preview-tools__inner > span { width: 100%; }
  .msa-result-preview h1 { font-size: var(--text-h1); line-height: var(--text-h1-lh); }
  .msa-result-preview .intro-copy { font-size: var(--text-body-sm); line-height: var(--text-body-sm-lh); }
  .msa-result-preview .benefits { grid-template-columns: 1fr; padding: var(--space-md); gap: var(--space-md); }
  .msa-result-preview .benefits article + article { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--space-md); }
  .msa-result-preview .section-heading { display: block; margin-bottom: var(--gap-lg); }
  .msa-result-preview .section-heading h2 { font-size: var(--text-h2); line-height: var(--text-h2-lh); }
  .msa-result-preview .section-heading > p { text-align: left; margin-top: var(--gap-xs); }
  .msa-result-preview .choices, .msa-result-preview .accessory-grid { grid-template-columns: 1fr; gap: var(--gap-lg); }
  .msa-result-preview .testimonial { grid-template-columns: 1fr; gap: 0; padding: var(--gap-md); }
  .msa-result-preview .quote-mark { height: 40px; font-size: 48px; }
  .msa-result-preview .review-author > a { margin-left: 44px; }
  .msa-result-preview .accessory-card h3 { min-height: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .msa-result-preview :is(a, button) { transition: background .2s, color .2s; }
}

/* Live result uses the existing full-width quiz shell beneath the real site menu. */
.msa-quiz-popup.is-result-v3 .msa-quiz__step-content { max-width: none; }
.msa-quiz-popup.is-result-v3 .msa-popup__head-text, .msa-quiz-popup.is-result-v3 .msa-quiz__bg { display: none; }
.msa-quiz-popup.is-result-v3 .msa-popup__head { min-height: 56px; padding: 12px 24px; flex-shrink: 0; }
.msa-quiz-popup.is-result-v3 .msa-quiz__body { padding: 0 0 24px; }
.msa-quiz-result-v3 .choices--single { grid-template-columns: minmax(0, 1fr); max-width: 600px; margin: auto; }
.msa-quiz-result-v3 .result-footer { gap: 16px; flex-wrap: wrap; }
.msa-quiz-result-v3 .result-footer small { font-size: var(--text-caption); color: var(--color-text-secondary); }
.msa-quiz-result-v3 .msa-quiz__retake { background: none; border: 0; color: var(--color-accent); cursor: pointer; padding: 12px 0; }

.msa-quiz-result-v3 .result-coupon-note { margin: 16px 0 0; font-size: 14px; line-height: 22px; color: var(--color-text-secondary); overflow-wrap: anywhere; }

.msa-quiz-popup.is-result-v3 [class^="msa-quiz__bg-"] { display: none !important; }
.msa-quiz-result-v3 .result-footer { display: flex; justify-content: space-between; }

.msa-result-preview .preview-skip-link { display: block; min-height: 44px; padding: var(--gap-sm) 0; text-align: center; font-size: var(--text-body-sm); text-underline-offset: 3px; }

.msa-quiz-popup .msa-quiz__email-skip { min-height: 44px; padding: 12px 0; }