/* Public quiz landings. Keep questionnaire and private result styles independent. */
.ql-page { background: #faf8fb; color: #45344f; }
.ql-shell { max-width: 1140px; margin: 0 auto 42px; }
.ql-back { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; color: #8a7892; font-size: 12px; }
.ql-back a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.ql-back > span { font-size: 11px; letter-spacing: .04em; }
.ql-hero { display: grid; grid-template-columns: 1.08fr 1fr; border: 1px solid #e9e0ec; border-radius: 26px; overflow: hidden; background: #f0e9f4; }
.ql-hero-copy { min-width: 0; padding: 45px 42px 39px; align-self: center; }
.ql-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font: 11px/1.6 var(--sans); letter-spacing: .045em; color: #80638e; }
.ql-spark { font-size: 20px; line-height: 1; margin-right: 1px; }
.ql-separator { color: #af98b9; }
.ql-hero h1 { margin: 21px 0 20px; font: 400 46px/1.08 Georgia, 'Times New Roman', serif; letter-spacing: -1.45px; color: #4d315c; text-wrap: balance; }
.ql-lead { max-width: 465px; font: 15px/1.75 var(--sans); color: #7b6687; }
.ql-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 29px; }
.ql-button { display: inline-flex; justify-content: space-between; align-items: center; gap: 34px; min-height: 50px; padding: 13px 21px; border: 1px solid transparent; border-radius: 12px; background: #755084; color: #fff; font: 14px/1.5 var(--sans); text-decoration: none; transition: background .15s; }
.ql-button:hover { background: #5c3c6b; color: #fff; }
.ql-button > span { font-size: 21px; line-height: 1; }
.ql-share { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 10px 0; background: transparent; border: 0; color: #785c85; font: 13px/1.5 var(--sans); }
.ql-share:hover { color: #4d315c; }
.ql-share svg { flex-shrink: 0; }
.ql-entry-note { margin-top: 15px; color: #796485; font: 12px/1.65 var(--sans); max-width: 320px; }
.ql-muted { font-size: 14px; color: #7e688a; }
.ql-cover { position: relative; min-height: 408px; margin: 0; background: #e0cfe6; isolation: isolate; }
.ql-cover img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.ql-cover figcaption { position: absolute; left: 24px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 48px); border: 1px solid #ffffffa8; border-radius: 30px; padding: 9px 14px; background: #fffcf3dd; color: #795b71; font: 11px/1.5 var(--sans); backdrop-filter: blur(8px); }
.ql-cover figcaption > span { font-size: 18px; line-height: 1; }
.ql-journey { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; list-style: none; margin: 0; padding: 29px 8px; }
.ql-journey li { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.ql-step-number { color: #b49bbf; font: italic 23px/1.3 Georgia,serif; }
.ql-journey h2 { font: 500 13px/1.5 var(--sans); color: #72577f; margin: 0 0 5px; }
.ql-journey p { color: #806e8a; font: 12px/1.6 var(--sans); }
.ql-comparison { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 34px; padding: 30px 42px; background: #fff; border: 1px solid #ebe3ee; border-radius: 24px; }
.ql-comparison-copy { max-width: 370px; padding: 8px 0; }
.ql-example-label { display: inline-block; padding: 5px 10px; border-radius: 6px; color: #80688e; background: #f4eff7; font: 11px/1.5 var(--sans); }
.ql-comparison h2 { font: 400 39px/1.12 Georgia,serif; letter-spacing: -1px; margin: 16px 0 14px; color: #5d3f6d; }
.ql-comparison h2 em { font-weight: 400; color: #9673a8; }
.ql-comparison-copy > p:not(.ql-example-note) { color: #8b7595; font: 14px/1.7 var(--sans); max-width: 355px; }
.ql-score { display: flex; align-items: center; gap: 18px; margin-top: 24px; }
.ql-score > strong { color: #805a91; font: 48px/1 Georgia,serif; letter-spacing: -2px; }
.ql-score small { font: 24px/1 Georgia,serif; letter-spacing: -1px; }
.ql-score b { display: block; color: #785987; font: 500 13px/1.5 var(--sans); }
.ql-score div > span { display: block; color: #887093; font: 12px/1.5 var(--sans); margin-top: 3px; }
.ql-example-note { color: #846d8f; font: 12px/1.65 var(--sans); max-width: 300px; margin-top: 14px; }
.ql-comparison-chart { border-left: 1px solid #eee6f1; padding-left: 24px; min-width: 0; }
.ql-comparison-chart .qp-chart { margin: 0; }
.ql-comparison-chart .qp-radar { width: 100%; height: 275px; overflow: visible; }
.ql-comparison-chart .qp-radar-label { fill: #80648e; font-size: 13px; }
.ql-comparison-chart .qp-chart-legend { font-size: 12px; margin: 5px 0 0; gap: 26px; }
.ql-comparison-chart .qp-radar-other { fill: #d0aa912e; stroke: #c2997d; }
.ql-comparison-chart .qp-radar-mine { fill: #b191c84d; stroke: #9872b2; }
.ql-details { display: grid; grid-template-columns: 1fr 1fr; gap: 62px; padding: 46px 8px 38px; }
.ql-details h2 { font: 500 21px/1.4 var(--sans); color: #694e79; letter-spacing: -.4px; margin: 0 0 18px; }
.ql-about > p { color: #806c8c; font: 13px/1.85 var(--sans); margin-bottom: 15px; }
.ql-accordions details { border-bottom: 1px solid #e9e0ed; }
.ql-accordions summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 54px; padding: 15px 0; list-style: none; font: 13px/1.5 var(--sans); color: #7f638e; }
.ql-accordions summary::-webkit-details-marker { display: none; }
.ql-accordions summary > span { flex-shrink: 0; font-size: 21px; font-weight: 300; line-height: 1; color: #b19bbe; }
.ql-accordions details[open] summary > span { transform: rotate(45deg); }
.ql-accordions details p { font: 13px/1.85 var(--sans); color: #806c8c; margin: 0 0 16px; }
.ql-final { display: flex; align-items: center; justify-content: space-between; gap: 30px; background: #765883; color: #fff; padding: 28px 35px; border-radius: 20px; }
.ql-final p { color: #decde7; font: 11px/1.5 var(--sans); margin-bottom: 7px; }
.ql-final h2 { font: 400 28px/1.2 Georgia,serif; letter-spacing: -.5px; }
.ql-button-light { background: #f9f4fb; color: #765583; flex-shrink: 0; }
.ql-button-light:hover { background: #eadff1; color: #5c3f68; }
.ql-method-note { color: #887293; font: 11px/1.7 var(--sans); margin: 19px 7px 0; }
.ql-method-note a { text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:1050px) {
  .ql-hero-copy { padding: 35px 32px; }
  .ql-hero h1 { font-size: 39px; }
  .ql-lead { font-size: 14px; }
  .ql-actions { gap: 17px; }
  .ql-button { gap: 24px; }
  .ql-cover { min-height: 398px; }
  .ql-comparison { padding: 26px 30px; gap: 20px; }
  .ql-comparison-chart { padding-left: 12px; }
  .ql-comparison h2 { font-size: 35px; }
  .ql-details { gap: 35px; }
}
@media(max-width:760px) {
  .ql-back { min-height: 54px; font-size: 11px; }
  .ql-back > span { font-size: 10px; }
  .ql-hero { grid-template-columns: 1fr; border-radius: 21px; }
  .ql-hero-copy { padding: 27px 25px 28px; }
  .ql-eyebrow { font-size: 10px; gap: 7px; }
  .ql-hero h1 { font-size: 37px; line-height: 1.08; letter-spacing: -1.2px; margin: 16px 0; }
  .ql-lead { font-size: 14px; line-height: 1.7; }
  .ql-actions { margin-top: 23px; gap: 22px; }
  .ql-button { font-size: 13px; padding: 12px 17px; min-height: 48px; gap: 28px; }
  .ql-share { font-size: 12px; gap: 7px; }
  .ql-entry-note { font-size: 11px; margin-top: 13px; max-width: 275px; }
  .ql-cover { min-height: 0; aspect-ratio: 1.8; }
  .ql-cover figcaption { left: 16px; bottom: 14px; font-size: 10px; padding: 7px 12px; }
  .ql-journey { padding: 26px 9px; gap: 19px; grid-template-columns: 1fr; }
  .ql-journey li { gap: 15px; align-items: center; }
  .ql-step-number { font-size: 23px; }
  .ql-journey h2 { font-size: 13px; margin: 0 0 2px; }
  .ql-journey p { font-size: 12px; }
  .ql-comparison { grid-template-columns: 1fr; gap: 23px; border-radius: 21px; padding: 27px 25px 23px; }
  .ql-comparison-copy { max-width: none; padding: 0; }
  .ql-comparison h2 { font-size: 36px; margin: 15px 0 12px; }
  .ql-comparison-copy > p:not(.ql-example-note) { font-size: 13px; }
  .ql-score { margin-top: 20px; gap: 16px; }
  .ql-score > strong { font-size: 43px; }
  .ql-score small { font-size: 23px; }
  .ql-score b { font-size: 12px; }
  .ql-example-note { margin-top: 12px; font-size: 11px; }
  .ql-comparison-chart { border-left: 0; border-top: 1px solid #eee6f1; padding: 18px 0 0; }
  .ql-comparison-chart .qp-radar { height: auto; aspect-ratio: 420/300; }
  .ql-comparison-chart .qp-chart-legend { margin-top: 9px; font-size: 11px; }
  .ql-details { grid-template-columns: 1fr; gap: 30px; padding: 33px 7px; }
  .ql-details h2 { font-size: 20px; margin-bottom: 14px; }
  .ql-final { display: block; padding: 27px; border-radius: 20px; }
  .ql-final h2 { font-size: 27px; max-width: 280px; line-height: 1.25; }
  .ql-final .ql-button { margin-top: 22px; width: 100%; }
}
@media(max-width:370px) {
  .ql-back > span { display: none; }
  .ql-hero-copy { padding: 25px 21px; }
  .ql-hero h1 { font-size: 33px; }
  .ql-lead { font-size: 13px; }
  .ql-actions { gap: 15px; }
  .ql-button { gap: 20px; padding-inline: 15px; }
  .ql-share { font-size: 11px; }
  .ql-comparison { padding: 24px 21px; }
}
@media(prefers-reduced-motion:reduce) { .ql-button { transition: none; } }