.page-quiz {
  --ink: #213d42; --green: #3cd5af; --muted: #536b70; --line: #dce6e7;
  --mint: #9eead7; --pale: #ecfbf7; --quiz-lime: #9eead7; --quiz-paper: #f5fdfb;
  --quiz-surface: linear-gradient(145deg, #ffffffef, #ffffffc9);
  --quiz-shadow: inset 0 1px 0 #fff, 0 2px 3px #213d4203, 0 14px 36px #213d4207;
  background: var(--quiz-paper); color: var(--ink);
}
/* Keep the document content-sized; reserve the bottom safe area only once. */
.quiz-app { --quiz-gutter:32px; width: 100%; max-width: 800px; margin: auto; padding: 28px 32px 20px; padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
.quiz-header { position: relative; display: flex; align-items: center; justify-content: space-between; height: 52px; }
.quiz-header > a { position: absolute; left: 50%; display: flex; align-items: center; justify-content: center; min-height: 44px; transform: translateX(-50%); }
.quiz-header > a img { width: 138px; height: auto; object-fit: contain; }
.quiz-header .plain { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #dce6e7; border-radius: 16px; background: var(--quiz-surface); transition: background 160ms; box-shadow: var(--quiz-shadow); }
.quiz-header .plain .icon { width: 20px; height: 20px; transform: rotate(180deg); }
.quiz-header .plain:disabled { visibility: hidden; pointer-events: none; }
.quiz-progress { height: 7px; margin-top: 25px; overflow: hidden; border-radius: 9px; background: #cef5eb; }
.quiz-progress > div { position: relative; height: 100%; border-radius: inherit; background: var(--green); box-shadow:inset 0 0 0 1px #213d42; transition: width 180ms ease; }
.quiz-progress > div::after { content: ''; position: absolute; top: 2px; bottom: 2px; left: 2px; width: 14px; max-width: 60%; border-radius: 4px; background: var(--quiz-lime); }
.quiz-status { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; min-height: 24px; margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.9; text-align: center; }
.quiz-status.has-error { padding: 9px 14px; border: 1px solid #e4d2b3; border-radius: 14px; background: #faf2e4; color: #7b5125; }
.retry-link { min-height: 44px; padding: 8px 6px; border: 0; background: none; color: #714719; text-decoration: underline; text-underline-offset: 4px; }
.quiz-stage { width: 100%; max-width: 590px; margin: 27px auto 0; animation: step-in 190ms ease-out; }
.question-heading { margin-bottom: 31px; text-align: center; }
.question-eyebrow { display: inline-flex; margin-bottom: 13px; padding: 4px 12px; border: 1px solid #dce6e7; border-radius: 30px; background: var(--pale); color: #213d42; font-size: 13px; box-shadow: inset 0 1px 0 #fff; }
.question-heading h1 { max-width: 570px; margin: 0 auto; color: var(--ink); font-size: clamp(28px, 3.4vw, 37px); font-weight: 700; line-height: 1.6; text-wrap: balance; outline: none; }
.question-heading p { max-width: 490px; margin: 13px auto 0; color: var(--muted); font-size: 16px; line-height: 2; text-wrap: pretty; }
.question-heading p.question-pretitle { margin: 0 auto 9px; font-size: clamp(15px, 2vw, 17px); font-weight: 400; line-height: 1.9; }
.stage-start .question-heading h1 { font-size: 43px; }
.stage-start .question-heading p { max-width: 370px; }
.report-icon { display: block; flex-shrink: 0; width: 32px; height: 32px; color: currentColor; object-fit:contain; }
.section-index { display: block; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.8; }
.report-section-heading { margin-bottom: 18px; }
.report-section-heading h2 { margin: 6px 0 0; font-size: 23px; font-weight: 700; line-height: 1.8; }

.answer-grid { display: flex; flex-direction: column; gap: 11px; }
.answer-card { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-height: 81px; padding: 15px 19px; overflow: hidden; border: 1px solid #dce6e7; border-radius: 20px; background: var(--quiz-surface); box-shadow: var(--quiz-shadow); color: var(--ink); text-align: right; transition: background 150ms, border-color 150ms, transform 150ms, box-shadow 150ms; }
.answer-card:active { transform: scale(.99); }
.answer-card[data-selected=true] { border-color: var(--ink); background: var(--green); box-shadow: 0 5px 16px #213d4213; color: #213d42; }
.option-image { flex-shrink: 0; width: 58px; height: 58px; padding: 8px; border: 1px solid #dce6e7; border-radius: 17px; background: linear-gradient(150deg, #fff 12%, #ecfbf7 72%, #ecfbf7); object-fit: contain; box-shadow: inset 0 2px 0 #fff, 0 3px 8px #213d4209; }
.answer-card[data-selected=true] .option-image { border-color: #ffffff40; background: var(--mint); }
.answer-label { flex: 1; min-width: 0; }
.answer-label strong { display: block; font-size: 17px; font-weight: 400; line-height: 1.85; }
.answer-label small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.answer-card[data-selected=true] .answer-label small { color: #213d42; }
.choice-check { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1.5px solid #536b70; border-radius: 50%; background: transparent; color: transparent; font: 700 13px/1 Arial, sans-serif; }
.multiple .choice-check { border-radius: 7px; }
[data-selected=true] .choice-check { border-color: var(--ink); background: var(--quiz-lime); color: var(--ink); }
.illustrated { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:600px; margin:32px auto 0; }
.illustrated .answer-card { display:flex; flex-direction:column; gap:0; min-height:0; padding:0; }
.illustrated .option-image { width:100%; height:300px; padding:0; border:0; background:transparent; box-shadow:none; object-fit:cover; }
.illustrated .answer-label { align-self:stretch; flex:none; min-height:62px; padding:15px 18px 15px 52px; }
.illustrated .choice-check { position:absolute; left:20px; bottom:20px; }
.choice-art { position:relative; display:grid; place-items:center; flex:none; width:72px; height:72px; }
.choice-art .option-image { width:100%; height:100%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; object-fit:contain; }
.answer-card[data-selected=true] .choice-art .option-image { background:transparent; border:0; }
.art-badge { position:absolute; right:-3px; bottom:-3px; display:grid; place-items:center; min-width:24px; min-height:22px; padding:2px 6px; border:1px solid #dce6e7; border-radius:7px; background:#fff; color:#213d42; font-size:10px; line-height:1.4; font-weight:700; box-shadow:0 2px 5px #213d4210; }
.answer-card[data-selected=true] .art-badge { border-color:#213d42; }
.choice-art.art-detail { width:clamp(76px,23vw,104px); height:auto; gap:5px; }
.choice-art.art-detail .option-image { width:100%; height:104px; object-fit:contain; }
.art-detail .art-badge { position:static; max-width:100%; min-height:22px; text-align:center; }
.choice-gender { max-width:600px; gap:20px; margin-top:30px; }
.choice-gender .answer-card { position:relative; isolation:isolate; height:376px; min-height:0; padding:0; border:1px solid #dce6e7; border-radius:24px; background:#eeece5; box-shadow:0 5px 12px #213d4206,0 20px 40px #213d420a; }
.choice-gender .answer-card::before { display:none; }
.choice-gender .option-image { flex:none; width:100%; height:100%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; object-fit:cover; object-position:50% 25%; transition:transform 260ms ease; }
.choice-gender .answer-label { position:absolute; inset:auto 12px 12px; display:flex; align-items:center; min-height:54px; padding:10px 16px 10px 48px; border:1px solid #ffffffc9; border-radius:14px; background:#fffffff0; color:var(--ink); box-shadow:inset 0 1px 0 #fff,0 6px 20px #213d4210; }
.choice-gender .answer-label strong { font-size:19px; font-weight:700; }
.choice-gender .choice-check { z-index:1; left:27px; bottom:27px; border-color:#536b70; background:#ffffff60; }
.choice-gender .answer-card[data-selected=true] { border-color:var(--green); background:#eeece5; box-shadow:0 0 0 2px var(--green),0 15px 36px #213d4214; }
.choice-gender .answer-card[data-selected=true] .answer-label { border-color:#3cd5af; background:#3cd5aff5; color:#213d42; box-shadow:inset 0 1px 0 #ffffff25; }
.choice-gender .answer-card[data-selected=true] .choice-check { border-color:#213d42; background:#fff; color:#213d42; }
@media(hover:hover) { .choice-gender .answer-card:hover .option-image { transform:scale(1.025); } }
.choice-age .answer-card { min-height:100px; padding-top:9px; padding-bottom:9px; }
.choice-age .option-image { width:73px; height:80px; padding:0; border:0; border-radius:16px; background:#ecfbf7; object-fit:cover; object-position:center 25%; box-shadow:none; }
.choice-body .answer-card { min-height:130px; padding-top:8px; padding-bottom:8px; }
.choice-region .answer-card { min-height:111px; padding-top:7px; padding-bottom:7px; }
.choice-body .option-image { width:86px; height:112px; padding:0; border:0; border-radius:15px; background:#ecfbf7; object-fit:contain; box-shadow:none; }
.choice-region .option-image { width:94px; height:94px; padding:0; border:0; border-radius:15px; background:#ecfbf7; object-fit:contain; box-shadow:none; }
.choice-age .answer-card[data-selected=true] .option-image,.choice-body .answer-card[data-selected=true] .option-image,.choice-region .answer-card[data-selected=true] .option-image { background:#f5fdfb; }


.quiz-actions { padding-top: 26px; }
/* Multi-choice keeps its action visible; flow space and scroll margins protect the final option. */
.stage-multi { padding-bottom:112px; animation-name:multi-step-in; }
.stage-multi > .quiz-actions { position:fixed; z-index:10; inset:auto 0 0; width:calc(100% - 2 * var(--quiz-gutter)); max-width:590px; margin-inline:auto; padding:16px 0 max(12px,env(safe-area-inset-bottom,0px)); background:linear-gradient(to bottom,#f5fdfb00,var(--quiz-paper) 12px); }
.stage-multi .answer-card { scroll-margin-bottom:calc(112px + env(safe-area-inset-bottom,0px)); }
/* A transformed ancestor would temporarily anchor the fixed action to the stage. */
@keyframes multi-step-in { from { opacity:.5; } to { opacity:1; } }
.quiz-next { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 62px; padding: 13px 20px; border: 1px solid #3cd5af; border-radius: 18px; background: var(--green); box-shadow: inset 0 1px 0 #ffffff24, 0 5px 14px #213d4214; color: #213d42; font-size: 17px; font-weight: 700; line-height: 1.9; text-align: right; transition: background 150ms, transform 150ms; }
.quiz-next > span[aria-hidden] { display: grid; flex-shrink: 0; place-items: center; width: 33px; height: 33px; border-radius: 11px; background: #ffffff14; color: #213d42; font: 400 20px/1 Arial, sans-serif; box-shadow: inset 0 1px 0 #ffffff1c; }
.quiz-next:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffffff18, 0 2px 5px #213d420c; }
.quiz-next:disabled { border-color: #dce6e7; background: #ecfbf7; box-shadow: none; color: #536b70; opacity: 1; cursor: not-allowed; }
.quiz-next:disabled > span[aria-hidden] { background: #ecfbf7; color: #536b70; }
.quiz-app :is(button, a, input):focus-visible { outline: 3px solid #213d42; outline-offset: 4px; }

.number-panel { position: relative; margin-top: 35px; padding: 30px 31px 22px; border: 1px solid #dce6e7; border-radius: 27px; background: var(--quiz-surface); box-shadow: var(--quiz-shadow); }
.number-panel::before { content: ''; position: absolute; right: 32px; bottom: 88px; left: 32px; height: 15px; background: repeating-linear-gradient(90deg, transparent 0 11px, #9eead7 11px 12px); pointer-events: none; }
.number-entry { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 28px; }
.number-entry > span { padding: 3px 18px; border: 1px solid #dce6e7; border-radius: 20px; background: #fff; color: #536b70; font-size: 14px; }
.number-input { width: 235px; max-width: 100%; padding: 0; border: 0; border-bottom: 1px dashed #3cd5af; border-radius: 0; background: transparent; color: var(--ink); font-size: 86px; font-weight: 700; line-height: 1.35; text-align: center; font-variant-numeric: tabular-nums; }
.number-panel input[type=range] { position: relative; width: 100%; height: 44px; margin: 14px 0 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.number-panel input[type=range]::-webkit-slider-runnable-track { height: 7px; border-radius: 8px; background: linear-gradient(to right, #3cd5af var(--range-position, 50%), #cef5eb var(--range-position, 50%)); }
.number-panel input[type=range]::-webkit-slider-thumb { width: 29px; height: 29px; margin-top: -11px; border: 7px solid var(--ink); border-radius: 50%; background: var(--quiz-lime); box-shadow: 0 0 0 4px #fff, 0 3px 8px #213d4215; appearance: none; -webkit-appearance: none; }
.number-panel input[type=range]::-moz-range-track { height: 7px; border-radius: 8px; background: #cef5eb; }
.number-panel input[type=range]::-moz-range-progress { height: 7px; border-radius: 8px; background: var(--green); }
.number-panel input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border: 7px solid var(--ink); border-radius: 50%; background: var(--quiz-lime); box-shadow: 0 0 0 4px #fff; }
.range-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.field-hint { margin-top: 17px; color: var(--muted); font-size: 14px; line-height: 1.95; text-align: center; }
.field-label { display: block; margin: 24px 0 10px; color: var(--ink); font-size: 15px; font-weight: 700; }
.text-input { width: 100%; min-height: 67px; padding: 14px 18px; border: 1px solid #3cd5af; border-radius: 16px; background: #f5fdfb; color: var(--ink); font-size: 25px; font-variant-numeric: tabular-nums; line-height: 1.6; text-align: center; }
.text-input::placeholder { color: #536b70; opacity: 1; }
.text-input:focus { border-color: var(--ink); background: #fff; }
.input-error { min-height: 24px; margin-top: 8px; color: #9c3e34; font-size: 14px; line-height: 1.9; }

.info-image { display: block; width: 100%; max-width: 160px; height: 160px; margin: 25px auto; padding: 10px; object-fit: contain; }
.info-photo { max-width: none; height: 335px; padding: 0; border: 1px solid #dce6e7; border-radius: 26px; object-fit: cover; box-shadow: var(--quiz-shadow); }
.info-photo.info-portrait { width: min(100%, 310px); aspect-ratio: 4/5; height: auto; max-height: none; object-fit: cover; }
.info-life-change { width: min(100%, 500px); max-width: 500px; height: auto; aspect-ratio: 4/3; margin: 10px auto 18px; padding: 0; object-fit: contain; animation: life-pages-in .55s ease-out both; }
.info-daily-rhythm { width: min(100%, 500px); max-width: 500px; height: auto; aspect-ratio: 4/3; margin: 10px auto 18px; padding: 0; object-fit: contain; }
@keyframes life-pages-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .info-life-change { animation: none; } }
.info-copy { margin: 22px 0; color: var(--muted); font-size: 17px; line-height: 2.1; text-align: center; text-wrap: pretty; }
.program-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 30px 0; }
.program-pillars > div { display: flex; flex-direction: column; align-items: center; gap: 19px; padding: 26px 9px 20px; border: 1px solid #dce6e7; border-radius: 23px; background: var(--quiz-surface); box-shadow: var(--quiz-shadow); }
.program-pillars > div:nth-child(2) { background: #ecfbf7; }
.program-pillars > div:nth-child(3) { border-color: #dce6e7; background: var(--quiz-surface); color: var(--ink); }
.program-pillars .report-icon { width: 52px; height: 52px; }
.program-pillars strong { font-size: 16px; font-weight: 700; }
/* A questionnaire checkpoint, distinct from bootstrap and the AI analysis loader. */
.stage-preparation { margin-top:24px; padding-bottom:calc(148px + env(safe-area-inset-bottom,0px)); animation:none; }
.quiz-app:has(.stage-preparation) .quiz-status:empty { display:none; }
.quiz-app:has(.stage-preparation) .quiz-progress { visibility:visible; }
.stage-preparation .question-heading { margin-bottom:23px; }
.stage-preparation .question-heading h1 { font-size:clamp(25px,3.4vw,32px); line-height:1.55; }
.stage-preparation .question-heading p { max-width:450px; margin-top:9px; font-size:15px; line-height:1.9; }
.preparation-panel { padding:24px; border:1px solid #dce6e7; border-radius:28px; background:radial-gradient(ellipse at 100% 0,#ecfbf7,transparent 65%),#fff; box-shadow:0 14px 36px #213d4207; }
.preparation-top { display:flex; align-items:center; gap:12px; }
.preparation-mark { display:grid; place-items:center; flex:none; width:50px; height:50px; border:1px solid #dce6e7; border-radius:17px; background:#ecfbf7; color:#213d42; box-shadow:inset 0 1px 0 #fff; }
.preparation-top h2 { font-size:21px; line-height:1.7; }
.preparation-top .section-index { color:#536b70; font-size:12px; }
.preparation-panel .metric-grid { gap:10px; margin:22px 0; }
.preparation-panel .metric { gap:2px; padding:17px 4px 15px; border-color:#dce6e7; border-radius:18px; background:#f5fdfb; box-shadow:none; }
.preparation-panel .metric span { font-size:13px; }
.preparation-panel .metric strong { font-size:35px; line-height:1.5; }
.preparation-panel .metric small { font-size:11px; }
.preparation-panel .metric:last-child { border-color:#3cd5af; background:#3cd5af; }
.preparation-panel .metric:last-child :is(span,small) { color:#213d42; }
.preparation-panel .metric:last-child strong { color:#213d42; }
.preparation-next { display:flex; align-items:center; gap:16px; padding-top:18px; border-top:1px solid #dce6e7; }
.preparation-next > div { flex:1; min-width:0; }
.preparation-next small { display:block; margin-bottom:3px; color:#536b70; font-size:12px; }
.preparation-next strong { display:block; font-size:16px; line-height:1.8; overflow-wrap:anywhere; }
.preparation-next > span { display:grid; place-items:center; flex:none; width:36px; height:36px; border:1px solid #dce6e7; border-radius:50%; background:#ecfbf7; color:#213d42; font:20px Arial,sans-serif; }
.preparation-empty { margin:20px 0; color:var(--muted); font-size:14px; }
.stage-preparation > .info-copy { margin:18px 8px 0; font-size:14px; line-height:1.95; }
.stage-preparation > .quiz-actions { position:fixed; z-index:10; inset:auto 0 0; width:calc(100% - 2 * var(--quiz-gutter)); max-width:590px; margin-inline:auto; padding:20px 0 max(14px,env(safe-area-inset-bottom,0px)); background:linear-gradient(to bottom,#f5fdfb00,var(--quiz-paper) 16px); }
.stage-preparation > :not(.quiz-actions) { scroll-margin-bottom:calc(148px + env(safe-area-inset-bottom,0px)); }
@media(max-width:600px) {
 .stage-preparation { margin-top:20px; }
 .stage-preparation .question-heading { margin-bottom:20px; }
 .stage-preparation .question-heading p { font-size:14px; }
 .preparation-panel { padding:20px 17px; border-radius:24px; }
 .preparation-top h2 { font-size:19px; }
 .preparation-panel .metric-grid { gap:8px; margin:20px 0; }
 .preparation-panel .metric { padding:14px 3px 12px; border-radius:15px; }
 .preparation-panel .metric strong { font-size:31px; }
 .preparation-panel .metric span { font-size:12px; }
 .preparation-next strong { font-size:15px; }
}
@media(max-width:350px) {
 .preparation-panel { padding:18px 13px; }
 .preparation-panel .metric-grid { gap:6px; }
 .preparation-panel .metric strong { font-size:28px; }
 .preparation-panel .metric small { font-size:10px; }
}
@media(forced-colors:active) {
 .preparation-panel,.preparation-mark,.preparation-panel .metric,.preparation-next > span { border-color:CanvasText; }
 .preparation-panel .metric:last-child { background:Canvas; }
 .preparation-panel .metric:last-child :is(span,strong,small) { color:CanvasText; }
 .stage-preparation > .quiz-actions { background:Canvas; }
}
.lifestyle-review { display: flex; align-items: center; gap: 15px; margin-top: 14px; padding: 23px; border: 1px solid #dce6e7; border-radius: 22px; background: var(--quiz-surface); box-shadow: var(--quiz-shadow); }
.lifestyle-review > .report-icon { width: 43px; height: 43px; }
.lifestyle-review small { display: block; margin-bottom: 5px; color: #536b70; font-size: 12px; }
.lifestyle-review strong { font-size: 16px; font-weight: 400; line-height: 1.9; }
.phone-preview-card { display: grid; grid-template-columns: 57px minmax(0, 1fr); align-items: center; gap: 18px; margin: 28px 0; padding: 24px; border: 1px solid #3cd5af; border-radius: 26px; background: #3cd5af; color: #213d42; box-shadow: inset 0 1px 0 #ffffff16, 0 10px 24px #213d420a; }
.phone-preview-icon { display: grid; place-items: center; height: 68px; border-radius: 14px; background: var(--quiz-lime); color: var(--ink); transform: rotate(-7deg); }
.phone-preview-icon .report-icon { width: 38px; height: 38px; }
.phone-preview-card .section-index { margin-bottom: 5px; color: #213d42; }
.phone-preview-card strong { display: block; font-size: 18px; font-weight: 700; line-height: 1.9; }
.preview-tags { display: flex; grid-column: 1/-1; gap: 8px; padding-top: 2px; }
.preview-tags > span { flex: 1; padding: 6px 4px; border: 1px solid #3cd5af; border-radius: 10px; color: #213d42; font-size: 12px; text-align: center; }
.phone-form { padding: 26px; border: 1px solid #dce6e7; border-radius: 25px; background: var(--quiz-surface); box-shadow: var(--quiz-shadow); }
.phone-form > .field-label { margin-top: 0; }
.consent { display: flex; align-items: flex-start; gap: 11px; min-height: 44px; margin: 16px 0 25px; color: var(--muted); font-size: 14px; line-height: 2; }
.consent input { flex-shrink: 0; width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--ink); }
.consent a { color: #213d42; text-decoration: underline; text-underline-offset: 4px; }

.stage-analysis, .stage-checkout { max-width: 620px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin: 27px 0; }
.metric { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 22px 7px 20px; border: 1px solid #dce6e7; border-radius: 22px; background: var(--quiz-surface); text-align: center; box-shadow: var(--quiz-shadow); }
.metric:last-child { border-color: #dce6e7; background: var(--pale); }
.metric span { color: #536b70; font-size: 14px; }
.metric strong { color: var(--ink); font-size: 42px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.55; }
.metric small { color: #536b70; font-size: 12px; }
.weight-report { margin: 27px 0; padding: 24px 21px 18px; border: 1px solid #dce6e7; border-radius: 28px; background: var(--quiz-surface); box-shadow: var(--quiz-shadow); }
.weight-report-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 3px 22px; }
.weight-report-top .section-index { color: #536b70; font-size: 12px; }
.height-chip { padding: 4px 9px; border: 1px solid #dce6e7; border-radius: 9px; background: #fff; color: #536b70; font-size: 11px; white-space: nowrap; }
.weight-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 22px; padding-left: 54px; text-align: center; }
.weight-values > div > span { display: block; margin-bottom: 2px; color: #536b70; font-size: 13px; }
.weight-values strong { display: block; color: var(--ink); font-size: 39px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.6; }
.weight-values strong small { margin-right: 5px; color: #536b70; font-size: 12px; font-weight: 400; }
.weight-chart { display: block; width: 100%; height: auto; margin-top: 3px; overflow: visible; }
.chart-gridline { stroke: #dce6e7; stroke-width: 1; stroke-dasharray: 3 5; }
.chart-axis-label { fill: #536b70; font-family: inherit; font-size: 11px; }
.weight-column-current { fill: var(--ink); }
.weight-column-goal { fill: var(--quiz-lime); stroke: var(--ink); stroke-width: 1; }
.column-highlight { stroke: #ffffff55; stroke-width: 2; stroke-linecap: round; }
.weight-report figcaption { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 5px 0 0; padding-top: 13px; border-top: 1px solid #dce6e7; color: #536b70; font-size: 12px; line-height: 1.9; text-align: center; }
.weight-report figcaption .report-icon { width: 23px; height: 23px; }
.analysis-insights { margin-top: 23px; padding: 25px; border: 1px solid #dce6e7; border-radius: 26px; background: var(--quiz-surface); box-shadow: var(--quiz-shadow); }
.insight-row { display: flex; align-items: flex-start; gap: 13px; padding: 17px 0; }
.insight-row + .insight-row { border-top: 1px solid #dce6e7; }
.insight-row:last-child { padding-bottom: 0; }
.insight-row > .report-icon { width: 32px; height: 32px; padding: 4px; border: 1px solid #dce6e7; border-radius: 9px; background: var(--mint); }
.insight-row p { margin: 0; color: #536b70; font-size: 15px; line-height: 2.05; }
.preference-panel { margin-top: 27px; }
.preference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.preference-card { display: flex; align-items: flex-start; gap: 12px; padding: 20px 17px; border: 1px solid #dce6e7; border-radius: 22px; background: var(--quiz-surface); box-shadow: var(--quiz-shadow); }
.preference-card > .report-icon { width: 36px; height: 36px; padding: 4px; border: 1px solid #dce6e7; border-radius: 10px; background: var(--mint); }
.preference-card small { display: block; margin-bottom: 5px; color: #536b70; font-size: 12px; }
.preference-card strong { display: block; font-size: 15px; font-weight: 400; line-height: 1.95; }

.loading-message { padding: 30px 0; color: var(--muted); font-size: 15px; line-height: 2; text-align: center; }
.stage-loading { animation:none; }
.quiz-app:has(.stage-loading:not(.stage-preparation)) .quiz-progress { visibility:hidden; }
.quiz-loader { display:grid; justify-items:center; align-content:center; min-height:min(58vh,460px); padding:32px 12px; text-align:center; }
.loader-core { position:relative; display:grid; place-items:center; width:156px; height:156px; margin-bottom:28px; border:1px solid var(--line); border-radius:50%; background:radial-gradient(circle,#ecfbf7,transparent 70%); }
.loader-core::before { content:""; position:absolute; inset:12px; border:1px solid #dce6e780; border-radius:50%; }
.loader-core svg { width:96px; height:96px; }
.loader-orbit { position:absolute; inset:-1px; border:1px solid transparent; border-top-color:var(--brand); border-right-color:#3cd5af60; border-radius:50%; animation:loader-orbit 2.8s linear infinite; }
.loader-orbit::after { content:""; position:absolute; top:20px; right:20px; width:5px; height:5px; border-radius:50%; background:var(--green); }
.loader-kicker { margin-bottom:10px; font-size:10px; letter-spacing:.2em; color:#213d42; }
.quiz-loader h1 { font-size:25px; }
.quiz-loader p { margin-top:8px; color:var(--muted); font-size:14px; }
.loader-topics { display:flex; align-items:center; gap:12px; margin-top:25px; color:var(--muted); font-size:12px; }
.loader-topics i { width:12px; height:1px; background:var(--line); }
@keyframes loader-orbit { to { transform:rotate(360deg); } }
.stage-payment { padding: 27px; border: 1px solid #dce6e7; border-radius: 27px; background: var(--quiz-surface); box-shadow: var(--quiz-shadow); }

@media (hover: hover) {
  .quiz-header .plain:not(:disabled):hover { background: #ecfbf7; }
  .answer-card:hover { border-color: #3cd5af; background: #ecfbf7; }
  .answer-card[data-selected=true]:hover { border-color: var(--ink); background: #3cd5af; }
  .illustrated .answer-card:hover { transform: translateY(-3px); }
  .illustrated .answer-card[data-selected=true]:hover { background: #ecfbf7; }
  .quiz-next:not(:disabled):hover { border-color: #3cd5af; background: #3cd5af; }
}
@media (max-width: 600px) {
  .quiz-app { --quiz-gutter:20px; padding-top: 15px; padding-right: 20px; padding-left: 20px; }
  .quiz-header { height: 47px; }
  .quiz-header > a img { width: 122px; height: auto; }
  .quiz-header .plain { width: 44px; height: 44px; border-radius: 14px; }
  .quiz-progress { height: 6px; margin-top: 21px; }
  .quiz-status { min-height: 21px; margin-top: 8px; font-size: 12px; }
  .quiz-stage { margin-top: 21px; }
  .question-heading { margin-bottom: 27px; }
  .question-heading h1 { font-size: 29px; line-height: 1.7; }
  .question-heading p { margin-top: 11px; font-size: 15px; line-height: 1.95; }
  .stage-start .question-heading h1 { font-size: 37px; }
  .answer-card { min-height: 77px; padding: 14px 16px; border-radius: 18px; gap: 13px; }
  .answer-label strong { font-size: 16px; }
  .answer-label small { font-size: 13px; }
  .option-image { width: 54px; height: 54px; padding: 7px; border-radius: 16px; }
  .choice-check { width: 23px; height: 23px; }
  .quiz-actions { padding-top: 24px; }
  .quiz-next { min-height: 59px; padding: 12px 18px; font-size: 16px; }
  .number-panel { margin-top: 29px; padding: 26px 24px 19px; border-radius: 25px; }
  .number-panel::before { right: 26px; bottom: 85px; left: 26px; }
  .number-input { width: 208px; font-size: 77px; }
  .number-entry { margin-bottom: 25px; }
  .text-input { padding: 14px; font-size: 24px; }
  .info-photo { height: 286px; border-radius: 23px; }
  .info-copy { font-size: 16px; line-height: 2.05; }
  .program-pillars { gap: 8px; }
  .program-pillars > div { padding: 23px 8px 18px; border-radius: 20px; }
  .program-pillars .report-icon { width: 45px; height: 45px; }
  .phone-preview-card { padding: 21px; gap: 15px; border-radius: 24px; }
  .phone-preview-card strong { font-size: 16px; }
  .phone-form { padding: 23px 21px; border-radius: 23px; }
  .metric-grid { gap: 8px; margin: 24px 0; }
  .metric { padding: 20px 5px 17px; border-radius: 19px; }
  .metric span { font-size: 13px; }
  .metric strong { font-size: 34px; }
  .metric small { font-size: 11px; }
  .weight-report { padding: 20px 13px 15px; border-radius: 24px; }
  .weight-report-top { flex-wrap: wrap; gap: 8px; margin-bottom: 17px; }
  .weight-report-top .section-index { font-size: 11px; }
  .height-chip { font-size: 10px; padding: 3px 6px; }
  .weight-values { padding-right: 10px; padding-left: 35px; }
  .weight-values strong { font-size: 33px; }
  .weight-values strong small { font-size: 10px; margin-right: 3px; }
  .weight-values > div > span { font-size: 12px; }
  .weight-report figcaption { font-size: 11px; }
  .analysis-insights { padding: 22px 20px; border-radius: 23px; }
  .report-section-heading h2 { font-size: 21px; }
  .insight-row { gap: 11px; }
  .insight-row p { font-size: 14px; }
  .preference-grid { grid-template-columns: 1fr; gap: 10px; }
  .preference-card { padding: 18px; border-radius: 19px; }
  .lifestyle-review { padding: 20px; border-radius: 20px; }
  .stage-payment { padding: 24px 20px; }
}
@media (max-width: 350px) {
  .quiz-app { --quiz-gutter:16px; padding-right: 16px; padding-left: 16px; }
  .question-heading h1 { font-size: 26px; }
  .question-heading p { font-size: 14px; }
  .stage-start .question-heading h1 { font-size: 34px; }
  .answer-card { padding: 14px 12px; gap: 10px; }
  .answer-label strong { font-size: 15px; }
  .option-image { width: 49px; height: 49px; padding: 6px; }
  .phone-preview-card { grid-template-columns: 48px minmax(0, 1fr); padding: 19px 17px; gap: 13px; }
  .phone-preview-card strong { font-size: 15px; }
  .phone-preview-icon { height: 61px; }
  .preview-tags { gap: 5px; }
  .preview-tags > span { font-size: 11px; }
  .phone-form { padding: 19px 16px 21px; }
  .phone-form .text-input { padding-right: 10px; padding-left: 10px; font-size: 21px; }
  .metric-grid { gap: 6px; }
  .metric strong { font-size: 31px; }
  .metric span { font-size: 12px; }
  .weight-values strong { font-size: 29px; }
  .weight-values strong small { display: block; margin: 0; line-height: 1.2; }
  .weight-report-top { margin-bottom: 14px; }
  .program-pillars strong { font-size: 14px; }
}
@keyframes step-in { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal-card { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .quiz-stage { animation: none; }
  .quiz-app *, .quiz-app *::before, .quiz-app *::after { transition: none; }
}

@media(max-width:600px) {
  .choice-art { width:64px; height:64px; }
  .choice-gender { gap:13px; margin-top:27px; }
  .choice-gender .answer-card { height:286px; min-height:0; border-radius:20px; }
  .choice-gender .option-image { height:100%; object-position:50% 25%; }
  .choice-gender .answer-label { inset:auto 9px 9px; min-height:49px; padding:9px 12px 9px 38px; border-radius:12px; }
  .choice-gender .answer-label strong { font-size:17px; }
  .choice-gender .choice-check { width:22px; height:22px; left:21px; bottom:22px; }
  .choice-age .option-image { width:67px; height:76px; }
  .choice-age .answer-card { min-height:94px; }
  .choice-body .option-image { width:81px; height:103px; }
  .choice-body .answer-card { min-height:120px; }
  .choice-region .option-image { width:86px; height:86px; }
  .choice-region .answer-card { min-height:103px; }
}
@media(max-width:350px) {
  .choice-art { width:53px; height:53px; }
  .choice-gender { gap:11px; }
  .choice-gender .answer-card { height:254px; border-radius:18px; }
  .choice-gender .answer-label { inset:auto 7px 7px; min-height:45px; padding-right:11px; padding-left:34px; }
  .choice-gender .choice-check { left:17px; bottom:19px; width:20px; height:20px; }
  .choice-age .option-image { width:57px; height:69px; }
  .choice-age .answer-card { min-height:88px; }
  .choice-body .option-image { width:69px; height:96px; }
  .choice-body .answer-card { min-height:113px; }
  .choice-region .option-image { width:70px; height:70px; }
  .choice-region .answer-card { min-height:90px; }
}
.content-art { object-fit:contain; }
.program-pillars .content-art { width:78px; height:78px; margin:auto; }
.phone-preview-card { grid-template-columns:76px minmax(0,1fr); }
.phone-preview-icon { height:89px; border-radius:0; background:transparent; transform:none; }
.phone-preview-icon .content-art { width:89px; height:89px; }
.lifestyle-review > .content-art { width:66px; height:66px; }
.preference-card > .content-art { width:60px; height:60px; }
.insight-row > .content-art { width:53px; height:53px; }
@media(max-width:600px) {
  .program-pillars .content-art { width:65px; height:65px; }
  .phone-preview-card { grid-template-columns:65px minmax(0,1fr); gap:15px; }
  .phone-preview-icon,.phone-preview-icon .content-art { width:72px; height:83px; }
  .insight-row > .content-art { width:43px; height:43px; }
}