:root {
  --ivory: #f5f0e6;
  --ivory-deep: #ece3d4;
  --paper: rgba(255, 253, 248, 0.82);
  --ink: #272a25;
  --ink-soft: #62665d;
  --sage: #7f8b74;
  --sage-deep: #53604d;
  --gold: #aa8956;
  --gold-soft: #d4bd94;
  --blue: #cbdcde;
  --line: rgba(82, 86, 73, 0.18);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ivory); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 14% 6%, rgba(255,255,255,.98), transparent 31%),
    radial-gradient(circle at 92% 89%, rgba(176,194,181,.24), transparent 34%),
    linear-gradient(135deg, #f9f6ef 0%, var(--ivory) 47%, #eee6d8 100%);
  overflow-x: hidden;
}

button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(170,137,86,.45); outline-offset: 4px; }

.atmosphere { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.orb-one { width: 520px; height: 520px; top: -250px; right: -150px; border: 1px solid rgba(170,137,86,.17); box-shadow: inset 0 0 120px rgba(255,255,255,.6); }
.orb-two { width: 250px; height: 250px; bottom: 4%; left: -100px; background: rgba(198,218,216,.16); border: 1px solid rgba(255,255,255,.6); }
.orb-three { width: 11px; height: 11px; top: 22%; right: 12%; background: rgba(255,255,255,.75); box-shadow: 0 0 20px rgba(170,137,86,.8); }
.serum-line { position: absolute; border: 1px solid rgba(255,255,255,.68); border-radius: 50%; transform: rotate(-18deg); box-shadow: 0 8px 30px rgba(145,157,143,.08); }
.serum-line-one { width: 860px; height: 160px; left: -260px; bottom: 5%; }
.serum-line-two { width: 740px; height: 130px; right: -360px; top: 27%; }

.app-shell { position: relative; z-index: 1; width: min(1240px, calc(100% - 56px)); margin: 0 auto; min-height: 100vh; }
.brandbar { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.header-logos { display: flex; align-items: center; gap: 18px; min-width: 0; }
.header-logos span { width: 1px; height: 30px; flex: 0 0 1px; background: var(--line); }
.header-logos img { width: 154px; height: 52px; object-fit: contain; mix-blend-mode: multiply; }
.brandbar > p { margin: 0; color: var(--ink-soft); font-size: .73rem; letter-spacing: .23em; }

.screen { display: none; min-height: calc(100vh - 92px); animation: screenIn .6s cubic-bezier(.2,.8,.2,1); }
.screen.active { display: block; }
@keyframes screenIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.screen-welcome { padding: 28px 0 26px; }
.campaign-kicker { display: flex; align-items: center; justify-content: center; gap: 15px; color: var(--sage-deep); font-size: .72rem; letter-spacing: .28em; font-weight: 600; }
.campaign-kicker span { width: 46px; height: 1px; background: var(--gold-soft); }
.welcome-hero { position: relative; min-height: clamp(720px, calc(100vh - 168px), 820px); margin: 24px 0 20px; display: flex; align-items: center; overflow: hidden; border: 1px solid rgba(170,137,86,.2); background: #f5ecdc; box-shadow: 0 28px 75px rgba(75,66,48,.1); isolation: isolate; }
.welcome-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(250,247,239,.99) 0%, rgba(250,247,239,.98) 31%, rgba(250,247,239,.9) 37%, rgba(250,247,239,.5) 41%, rgba(250,247,239,.12) 45%, rgba(250,247,239,0) 49%); }
.hero-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; }
.welcome-copy { position: relative; z-index: 1; width: 42%; min-width: 0; padding: clamp(38px, 3.5vw, 56px) clamp(34px, 3.8vw, 62px); }
.eyebrow { margin: 0 0 15px; color: var(--sage-deep); font-size: .76rem; line-height: 1.5; letter-spacing: .2em; font-weight: 600; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; }
.welcome-copy h1 { max-width: 560px; margin: 0; font-size: clamp(3.25rem, 4vw, 4.95rem); line-height: .94; letter-spacing: -.045em; }
.welcome-copy h1 em { color: var(--gold); font-weight: 500; }
.welcome-lead { max-width: 540px; margin: 19px 0 11px; color: var(--ink); font-family: var(--serif); font-size: clamp(1.14rem, 1.35vw, 1.3rem); line-height: 1.38; }
.welcome-support { max-width: 530px; margin: 0 0 15px; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.orientation-note { max-width: 530px; margin: 0 0 15px; border-left: 2px solid var(--gold-soft); padding: 10px 13px; background: rgba(255,253,248,.62); color: var(--ink-soft); font-size: .78rem; line-height: 1.45; backdrop-filter: blur(8px); }
.orientation-note strong, .orientation-note span { display: block; }
.orientation-note strong { margin-bottom: 2px; color: var(--sage-deep); font-weight: 600; }
.test-facts { max-width: 530px; margin: 0 0 17px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; list-style: none; }
.test-facts li { min-height: 38px; padding: 8px 10px; display: flex; align-items: center; border: 1px solid rgba(170,137,86,.25); background: rgba(255,253,248,.56); color: var(--sage-deep); font-size: .7rem; line-height: 1.25; letter-spacing: .035em; font-weight: 600; backdrop-filter: blur(8px); }
.core-message { display: grid; grid-template-columns: 2px 1fr; gap: 18px; margin: 0 0 34px; }
.gold-rule { display: block; background: linear-gradient(var(--gold), transparent); }
.core-message p { margin: 0; font-size: .93rem; line-height: 1.68; }
.core-message strong { color: var(--sage-deep); font-weight: 600; }

.primary-button { min-height: 58px; border: 0; border-radius: 2px; padding: 0 22px 0 26px; display: inline-flex; align-items: center; justify-content: center; gap: 26px; color: #fff; background: var(--sage-deep); box-shadow: 0 14px 35px rgba(67,78,63,.18); cursor: pointer; font-size: .77rem; font-weight: 600; letter-spacing: .11em; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.primary-button:hover { transform: translateY(-2px); background: #465440; box-shadow: 0 18px 38px rgba(67,78,63,.24); }
.primary-button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.primary-button svg, .text-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#startButton { width: 100%; max-width: 530px; min-height: 62px; justify-content: space-between; font-size: .8rem; box-shadow: 0 16px 38px rgba(67,78,63,.24); }
.microcopy { max-width: 530px; margin: 11px 0 0; color: #666a62; font-size: .76rem; line-height: 1.5; }
.hero-concept { width: fit-content; margin: 30px 0 0; padding: 12px 16px; border: 1px solid rgba(170,137,86,.28); background: rgba(255,253,248,.58); color: var(--sage-deep); backdrop-filter: blur(8px); }
.hero-concept strong, .hero-concept span { display: block; }
.hero-concept strong { font-family: var(--serif); font-size: .9rem; font-weight: 500; letter-spacing: .08em; }
.hero-concept span { margin-top: 3px; font-size: .58rem; letter-spacing: .2em; }
.disclaimer { margin: 0; color: #666a62; text-align: center; font-size: .78rem; line-height: 1.55; }

.screen-quiz { padding: 26px 0 64px; }
.quiz-topline { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.text-button { padding: 10px 0; display: flex; gap: 10px; align-items: center; border: 0; background: none; color: var(--ink-soft); cursor: pointer; font-size: .7rem; letter-spacing: .14em; }
.quiz-topline p { margin: 0; color: var(--gold); font-family: var(--serif); font-size: 1rem; letter-spacing: .08em; }
.progress-track { height: 2px; margin-top: 13px; background: rgba(80,88,74,.12); }
.progress-track span { display: block; height: 100%; width: 14.28%; background: linear-gradient(90deg, var(--sage), var(--gold)); transition: width .45s ease; }
.question-wrap { max-width: 980px; margin: 0 auto; padding: clamp(40px, 6vh, 68px) 0 30px; }
.question-heading { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 24px; align-items: start; }
.question-heading-copy { min-width: 0; }
.question-icon { position: relative; width: 78px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #fffdf8; isolation: isolate; box-shadow: 0 12px 28px rgba(88,75,49,.16), inset 0 0 0 1px rgba(255,255,255,.55); }
.question-icon::before, .question-icon::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.question-icon::before { inset: -4px; z-index: -2; border: 1px solid rgba(170,137,86,.72); background: rgba(255,253,248,.64); box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.question-icon::after { inset: 4px; z-index: -1; border: 1px solid rgba(255,255,255,.55); }
.question-icon--gold { background: radial-gradient(circle at 34% 28%, #dfbd75 0%, #bd8335 52%, #8f5c21 100%); }
.question-icon--sage { background: radial-gradient(circle at 34% 28%, #afb69b 0%, #7f8b6f 52%, #56634d 100%); }
.question-icon svg { width: 50px; height: 50px; display: block; fill: none; stroke: currentColor; stroke-width: 2.35; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(75,58,29,.2)); }
.question-heading--multi { grid-template-columns: 264px minmax(0, 1fr); gap: 6px; }
.question-icon-group { width: 264px; min-height: 78px; display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-end; gap: 1px; }
.question-icon-mini { position: relative; width: 52px; aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 52px; border-radius: 50%; color: #fffdf8; isolation: isolate; box-shadow: 0 5px 12px rgba(88,75,49,.13), inset 0 0 0 1px rgba(255,255,255,.5); }
.question-icon-mini::before, .question-icon-mini::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.question-icon-mini::before { inset: -2px; z-index: -2; border: 1px solid rgba(170,137,86,.68); background: rgba(255,253,248,.64); }
.question-icon-mini::after { inset: 2px; z-index: -1; border: 1px solid rgba(255,255,255,.48); }
.question-icon-mini--gold { background: radial-gradient(circle at 34% 28%, #dfbd75 0%, #bd8335 52%, #8f5c21 100%); }
.question-icon-mini--sage { background: radial-gradient(circle at 34% 28%, #afb69b 0%, #7f8b6f 52%, #56634d 100%); }
.question-icon-mini svg { width: 34px; height: 34px; display: block; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(75,58,29,.18)); }
.question-wrap h2 { max-width: 820px; margin: 0; font-size: clamp(2.25rem, 4.6vw, 4.65rem); line-height: 1.06; letter-spacing: -.025em; }
.question-help { margin: 20px 0 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 38px; }
.answer-card { min-height: 78px; padding: 17px 20px; display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255,253,248,.62); color: var(--ink); text-align: left; cursor: pointer; transition: border .2s, background .2s, transform .2s, box-shadow .2s; }
.answer-card:hover { transform: translateY(-2px); border-color: rgba(170,137,86,.5); background: rgba(255,255,255,.8); }
.answer-card.selected { border-color: var(--sage); background: rgba(239,243,234,.9); box-shadow: 0 13px 30px rgba(67,78,63,.09); }
.answer-marker { flex: 0 0 28px; height: 28px; border: 1px solid rgba(84,96,77,.38); border-radius: 50%; display: grid; place-items: center; color: white; font-size: .85rem; transition: background .2s; }
.answer-card.selected .answer-marker { background: var(--sage-deep); border-color: var(--sage-deep); }
.answer-text { font-family: var(--serif); font-size: 1.08rem; line-height: 1.35; }
.quiz-actions { min-height: 84px; margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-top: 1px solid var(--line); padding-top: 24px; }
.quiz-actions > p { margin: 0; color: var(--ink-soft); font-size: .75rem; line-height: 1.5; }
.primary-button.compact { min-height: 52px; min-width: 190px; }

.screen-result {
  --result-accent: var(--gold);
  --result-wash: rgba(239,233,219,.58);
  padding: 68px 0 32px;
}
.screen-result[data-treatment="t2"] { --result-accent: #b37b76; --result-wash: rgba(232,203,198,.28); }
.screen-result[data-treatment="t3"] { --result-accent: #9c8448; --result-wash: rgba(218,208,169,.28); }
.screen-result[data-treatment="t4"] { --result-accent: #8e7155; --result-wash: rgba(223,211,194,.38); }
.screen-result[data-treatment="t5"] { --result-accent: #688b94; --result-wash: rgba(195,218,224,.34); }
.result-intro { max-width: 900px; }
.result-overline { margin: 0 0 16px; color: var(--gold); font-size: .78rem; letter-spacing: .18em; font-weight: 600; }
.result-logos { display: flex; align-items: center; gap: 18px; min-height: 52px; margin: 0 0 18px; }
.result-logos span { width: 1px; height: 28px; flex: 0 0 1px; background: var(--line); }
.result-logos img { display: block; width: auto; max-width: 168px; height: 48px; object-fit: contain; mix-blend-mode: multiply; }
.result-intro h1 { margin: 0; font-size: clamp(3rem, 6vw, 6.2rem); line-height: .98; letter-spacing: -.04em; }
.result-lead { max-width: 780px; margin: 24px 0 0; color: var(--ink-soft); font-family: var(--serif); font-size: 1.22rem; line-height: 1.6; }
.result-flow { margin-top: 44px; display: flex; flex-direction: column; }
.treatment-card, .secondary-card { border: 1px solid rgba(104,110,96,.18); background: var(--paper); backdrop-filter: blur(14px); }
.treatment-card { padding: clamp(25px, 4vw, 48px); box-shadow: 0 26px 70px rgba(78,84,70,.08); }
.treatment-card-top { display: flex; align-items: center; gap: 18px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.treatment-number { color: var(--result-accent); font-family: var(--serif); font-size: 2.5rem; }
.treatment-label { color: var(--sage-deep); font-size: .7rem; letter-spacing: .18em; font-weight: 600; }
.concept-quote { margin: 26px 0 0; padding: 18px 22px; color: var(--sage-deep); border-left: 2px solid var(--result-accent); background: var(--result-wash); font-family: var(--serif); font-size: 1.16rem; line-height: 1.45; }
.needs-block { margin-top: 30px; }
.needs-block > p, .products-heading p, .complement-box p, .brand-card > p, .why-complete > p { margin: 0; color: var(--ink-soft); font-size: .75rem; line-height: 1.5; letter-spacing: .16em; font-weight: 600; }
.needs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.needs-tags span { padding: 8px 12px; border-radius: 99px; background: rgba(126,139,115,.1); color: var(--sage-deep); font-size: .82rem; text-transform: uppercase; }
.why-complete { margin-top: 30px; padding: 22px 24px; border-left: 2px solid var(--result-accent); background: var(--result-wash); }
.why-complete > span { display: block; margin-top: 9px; color: var(--ink-soft); font-family: var(--serif); font-size: 1.02rem; line-height: 1.6; }
.products-heading { margin-top: 34px; display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.products-heading > span { color: var(--gold); font-family: var(--serif); font-size: .8rem; }
.products-showcase { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.product-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid rgba(104,110,96,.14); background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(250,247,239,.54)); overflow: hidden; }
.product-card figure { height: clamp(210px, 20vw, 290px); margin: 0; padding: 9px; display: flex; align-items: flex-end; justify-content: center; background: rgba(255,255,255,.28); }
.product-card figure img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center bottom; mix-blend-mode: multiply; }
.product-toner figure img { max-height: 100%; }
.product-fito figure img { max-height: 68%; }
.product-serum figure img { max-height: 72%; }
.product-gel figure img { max-height: 82%; }
.product-cream figure img { max-height: 74%; }
.product-ampoules figure img { max-height: 58%; }
.product-sunscreen figure { background: #fff; }
.product-sunscreen figure img { max-height: 100%; object-fit: contain; object-position: center; mix-blend-mode: normal; }
.product-copy { flex: 1; padding: 16px 14px 18px; border-top: 1px solid rgba(104,110,96,.12); }
.product-index { color: var(--result-accent); font-family: var(--serif); font-size: .9rem; }
.product-action { display: block; margin-top: 5px; color: var(--sage-deep); font-size: .75rem; line-height: 1.35; letter-spacing: .11em; }
.product-name { margin: 11px 0 0; font-family: var(--serif); font-size: 1rem; line-height: 1.28; }
.product-brand { margin: 9px 0 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.35; letter-spacing: .1em; text-align: left; }
.product-price { margin: 13px 0 0; padding-top: 11px; border-top: 1px solid rgba(104,110,96,.12); color: var(--ink); font-family: var(--serif); font-size: .95rem; line-height: 1.35; }
.complement-box { margin-top: 28px; display: flex; align-items: flex-start; gap: 16px; }
.complement-icon { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--gold-soft); border-radius: 50%; color: var(--gold); font-size: 1.3rem; }
.complement-box div > span { display: block; margin-top: 7px; color: var(--ink-soft); font-family: var(--serif); line-height: 1.55; }
.complement-box strong { display: block; margin-top: 9px; color: var(--result-accent); font-size: .78rem; line-height: 1.55; letter-spacing: .12em; }
.promotion-card { position: relative; margin-top: 32px; padding: 27px; overflow: hidden; border: 1px solid rgba(170,137,86,.3); background: linear-gradient(130deg, rgba(239,226,198,.72), rgba(255,253,246,.72) 55%, rgba(214,194,154,.38)); }
.promotion-card::after { content: ""; position: absolute; width: 170px; height: 170px; right: -70px; top: -90px; border: 1px solid rgba(170,137,86,.25); border-radius: 50%; }
.promotion-card p { margin: 0 0 16px; color: var(--sage-deep); font-size: .78rem; letter-spacing: .16em; font-weight: 600; }
.promotion-card div { color: var(--ink-soft); font-size: .85rem; line-height: 1.55; letter-spacing: .06em; }
.promotion-card strong { display: block; margin-top: 7px; color: #6f5b35; font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1.22; font-weight: 500; }
.promotion-card strong span, .promotion-card strong em { display: block; }
.promotion-card strong em { margin-top: 4px; color: #8d6e34; font-style: normal; font-size: 1.16em; }
.promotion-card small { display: block; margin-top: 18px; color: #777066; font-size: .75rem; line-height: 1.5; }
.result-promotion { order: 4; width: min(900px, 100%); margin: 28px auto 0; text-align: center; }
.secondary-card { order: 2; width: min(780px, 100%); margin: 26px auto 0; padding: 28px; background: linear-gradient(155deg, rgba(226,235,231,.88), rgba(250,248,241,.74)); }
.secondary-card > p:first-child { margin: 0 0 24px; color: var(--sage-deep); font-size: .68rem; line-height: 1.65; letter-spacing: .13em; font-weight: 600; }
.secondary-card > span { color: var(--gold); font-family: var(--serif); font-size: 1.5rem; }
.secondary-card h3 { margin: 9px 0 13px; font-size: 1.75rem; line-height: 1.15; }
#secondaryWhy { margin: 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.65; }
.secondary-button { margin-top: 22px; padding: 9px 0; border: 0; border-bottom: 1px solid var(--result-accent); color: var(--sage-deep); background: transparent; cursor: pointer; font-size: .75rem; line-height: 1.45; letter-spacing: .11em; text-align: left; }
.secondary-detail { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--sage-deep); font-size: .78rem; line-height: 1.65; letter-spacing: .06em; }
.price-summary { order: 3; margin-top: 34px; padding: clamp(28px, 4.5vw, 54px); border: 1px solid rgba(170,137,86,.3); background: linear-gradient(135deg, rgba(255,253,248,.92), rgba(239,226,198,.55)); box-shadow: 0 26px 64px rgba(78,84,70,.08); }
.price-kicker { margin: 0; color: var(--sage-deep); font-size: .72rem; line-height: 1.5; letter-spacing: .2em; font-weight: 600; }
.price-summary h2 { max-width: 640px; margin: 12px 0 32px; font-size: clamp(1.8rem, 3.3vw, 3.15rem); line-height: 1.12; }
.price-grid { display: grid; grid-template-columns: .8fr 1.35fr 1fr; border-top: 1px solid rgba(170,137,86,.28); border-bottom: 1px solid rgba(170,137,86,.28); }
.price-grid > div { min-width: 0; padding: 25px; }
.price-grid > div + div { border-left: 1px solid rgba(170,137,86,.28); }
.price-grid span { display: block; color: var(--ink-soft); font-size: .68rem; line-height: 1.5; letter-spacing: .14em; font-weight: 600; }
.price-regular strong { display: block; margin-top: 13px; color: var(--ink); font-family: var(--serif); font-size: clamp(1.55rem, 2.6vw, 2.45rem); font-weight: 500; }
.price-product > strong { display: block; margin-top: 13px; color: var(--sage-deep); font-family: var(--serif); font-size: 1.15rem; line-height: 1.35; font-weight: 500; }
.price-product dl { margin: 22px 0 0; }
.price-product dl div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-top: 1px solid rgba(104,110,96,.12); }
.price-product dt, .price-product dd { margin: 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.45; }
.price-product dd { flex: 0 0 auto; color: var(--ink); font-family: var(--serif); }
.price-final { display: flex; flex-direction: column; justify-content: center; background: rgba(170,137,86,.08); }
.price-final strong { display: block; margin-top: 12px; color: #765f38; font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1; font-weight: 500; }
.price-final small { display: block; margin-top: 17px; color: var(--ink-soft); font-size: .74rem; line-height: 1.5; }
.usage-card { order: 4; margin-top: 34px; padding: clamp(28px, 4.5vw, 48px); border: 1px solid rgba(104,110,96,.2); background: linear-gradient(145deg, rgba(247,244,235,.96), rgba(255,253,248,.9)); box-shadow: 0 22px 56px rgba(78,84,70,.07); }
.usage-card h2 { margin: 0 0 28px; color: var(--ink); font-size: clamp(1.8rem, 3.3vw, 3rem); line-height: 1.12; }
.usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(170,137,86,.28); border-bottom: 1px solid rgba(170,137,86,.28); }
.usage-period { min-width: 0; padding: 27px; }
.usage-period + .usage-period { border-left: 1px solid rgba(170,137,86,.28); }
.usage-period h3 { margin: 0 0 18px; color: var(--result-accent); font-family: var(--serif); font-size: 1.35rem; font-weight: 500; letter-spacing: .06em; }
.usage-period ol { margin: 0; padding-left: 1.35rem; color: var(--ink-soft); }
.usage-period li { padding-left: .38rem; font-size: .95rem; line-height: 1.55; }
.usage-period li + li { margin-top: 8px; }
.usage-period li::marker { color: var(--gold); font-family: var(--serif); }
.usage-note { margin-top: 25px; padding: 20px 22px; border-left: 2px solid var(--result-accent); background: var(--result-wash); }
.usage-note > strong { display: block; color: var(--sage-deep); font-size: .73rem; line-height: 1.5; letter-spacing: .14em; }
.usage-note p { margin: 9px 0 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }
.result-promotion { order: 5; }
.result-actions { order: 6; width: min(680px, 100%); margin: 34px auto 0; text-align: center; }
.result-closing { order: 7; margin: 56px auto 28px; text-align: center; }
.result-closing > p:first-child { max-width: 700px; margin: 0 auto 28px; font-family: var(--serif); font-size: clamp(1.65rem, 3vw, 2.65rem); line-height: 1.25; }
.purchase-button { width: 100%; min-height: 64px; justify-content: space-between; padding-inline: 28px 24px; box-shadow: 0 18px 42px rgba(67,78,63,.24); }
.consultation-panel { margin-top: 34px; padding: 30px; border: 1px solid rgba(104,110,96,.2); background: rgba(255,253,248,.58); text-align: left; }
.consultation-title { margin: 0; color: var(--sage-deep); font-size: .76rem; line-height: 1.5; letter-spacing: .16em; font-weight: 600; }
.consultation-copy { margin: 8px 0 18px; color: var(--ink-soft); font-family: var(--serif); font-size: 1rem; line-height: 1.55; }
.consultation-input { width: 100%; min-height: 118px; resize: vertical; border: 1px solid rgba(104,110,96,.28); border-radius: 2px; padding: 15px 16px; color: var(--ink); background: rgba(255,255,255,.72); font: 400 1rem/1.55 var(--sans); }
.consultation-input::placeholder { color: #85877f; }
.consultation-input:focus { outline: 3px solid rgba(170,137,86,.24); border-color: var(--gold); }
.consultation-button { width: 100%; min-height: 54px; margin-top: 13px; border: 1px solid var(--sage-deep); border-radius: 2px; padding: 12px 18px; color: var(--sage-deep); background: transparent; cursor: pointer; font-size: .73rem; line-height: 1.45; letter-spacing: .1em; font-weight: 600; transition: color .2s ease, background .2s ease, opacity .2s ease; }
.consultation-button:hover:not(:disabled) { color: #fff; background: var(--sage-deep); }
.consultation-button:disabled { opacity: .38; cursor: not-allowed; }
.restart-button { margin-top: 28px; border: 0; border-bottom: 1px solid var(--gold-soft); padding: 7px 0; color: var(--ink-soft); background: none; cursor: pointer; font-size: .68rem; letter-spacing: .15em; }
.result-disclaimer { max-width: 680px; margin: 0 auto; }

body[data-screen="result"] .brandbar { display: none; }

@media (max-width: 820px) {
  .app-shell { width: min(100% - 34px, 680px); }
  .brandbar { height: 76px; }
  .brandbar > p { font-size: .68rem; }
  .header-logos { gap: 11px; }
  .header-logos img { width: 132px; height: 46px; }
  .header-logos span { height: 24px; }
  .screen { min-height: calc(100vh - 76px); }
  .screen-welcome { padding-top: 25px; }
  .campaign-kicker { gap: 8px; font-size: .57rem; letter-spacing: .18em; }
  .campaign-kicker span { width: 20px; }
  .welcome-hero { min-height: 0; margin-top: 22px; display: block; overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .welcome-hero::after { display: none; }
  .hero-image { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; border: 1px solid rgba(170,137,86,.2); box-shadow: 0 22px 54px rgba(75,66,48,.11); }
  .welcome-copy { width: 100%; padding: 38px 0 20px; }
  .welcome-copy h1 { font-size: clamp(3.45rem, 15vw, 5.3rem); }
  .welcome-lead { font-size: 1.24rem; margin-top: 24px; }
  .welcome-support { font-size: .98rem; }
  .orientation-note { padding: 13px 15px; font-size: .86rem; }
  .test-facts { margin-bottom: 20px; }
  .test-facts li { min-height: 44px; font-size: .78rem; }
  #startButton { max-width: none; }
  .disclaimer { padding-bottom: 20px; }
  .question-wrap { padding-top: 38px; }
  .question-heading { grid-template-columns: 68px minmax(0, 1fr); gap: 18px; }
  .question-icon { width: 68px; }
  .question-icon svg { width: 43px; height: 43px; }
  .question-heading--multi { grid-template-columns: 239px minmax(0, 1fr); gap: 5px; }
  .question-icon-group { width: 239px; min-height: 68px; gap: 1px; }
  .question-icon-mini { width: 47px; flex-basis: 47px; }
  .question-icon-mini svg { width: 30px; height: 30px; }
  .question-wrap h2 { font-size: clamp(2.15rem, 9vw, 3.45rem); }
  .answers { grid-template-columns: 1fr; margin-top: 28px; }
  .answer-card { min-height: 72px; }
  .quiz-actions { align-items: stretch; flex-direction: column; }
  .quiz-actions > p { min-height: 18px; }
  .primary-button.compact { width: 100%; }
  .screen-result { padding-top: 48px; }
  .result-intro h1 { font-size: clamp(2.8rem, 12vw, 4.8rem); }
  .products-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card figure { height: clamp(210px, 48vw, 290px); }
  .result-logos img { max-width: 145px; height: 43px; }
  .treatment-card { order: 1; }
  .price-summary { order: 2; }
  .usage-card { order: 3; }
  .result-promotion { order: 4; }
  .result-actions { order: 5; }
  .secondary-card { order: 6; }
  .result-closing { order: 7; }
  .price-grid { grid-template-columns: 1fr; }
  .price-grid > div + div { border-left: 0; border-top: 1px solid rgba(170,137,86,.28); }
  .usage-grid { grid-template-columns: 1fr; }
  .usage-period + .usage-period { border-left: 0; border-top: 1px solid rgba(170,137,86,.28); }
}

@media (max-width: 480px) {
  .app-shell { width: min(100% - 28px, 680px); }
  .brandbar > p { display: none; }
  .header-logos { width: 100%; justify-content: center; }
  .header-logos img { width: min(42vw, 145px); height: 44px; }
  .welcome-hero { margin-inline: -14px; }
  .welcome-copy { width: auto; margin-inline: 14px; padding-top: 36px; }
  .welcome-copy .eyebrow { font-size: .65rem; }
  .primary-button { width: 100%; padding-inline: 18px; gap: 14px; }
  .test-facts { grid-template-columns: 1fr; }
  .microcopy { font-size: .8rem; text-align: left; }
  .question-wrap { padding-top: 34px; }
  .question-heading { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; }
  .question-icon { width: 58px; }
  .question-icon svg { width: 37px; height: 37px; stroke-width: 2.5; }
  .question-heading--multi { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .question-icon-group { width: 194px; min-height: 40px; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 1px; }
  .question-icon-mini { width: 38px; flex-basis: 38px; }
  .question-icon-mini svg { width: 25px; height: 25px; stroke-width: 3; }
  .answer-text { font-size: 1rem; }
  .treatment-card { padding: 20px 14px; }
  .result-intro h1 { font-size: clamp(2.55rem, 11.5vw, 3.9rem); line-height: 1.02; }
  .products-showcase { grid-template-columns: 1fr; gap: 10px; }
  .product-card { display: grid; grid-template-columns: minmax(124px, 42%) 1fr; min-height: 205px; }
  .product-card figure { height: 205px; padding: 6px; }
  .product-copy { border-top: 0; border-left: 1px solid rgba(104,110,96,.12); }
  .product-copy { padding: 13px 10px 15px; }
  .product-name { font-size: .94rem; }
  .product-action { font-size: .72rem; }
  .product-brand { font-size: .72rem; }
  .product-price { font-size: .9rem; }
  .price-summary { padding: 24px 17px; }
  .price-grid > div { padding: 20px 0; }
  .price-product dl div { gap: 12px; }
  .price-final { margin-inline: -17px; padding-inline: 17px !important; }
  .usage-card { padding: 24px 17px; }
  .usage-period { padding: 22px 0; }
  .usage-note { padding: 18px 16px; }
  .result-actions { width: 100%; }
  .purchase-button { min-height: 62px; padding-inline: 18px; }
  .consultation-panel { margin-top: 26px; padding: 22px 17px; }
  .consultation-input { min-height: 132px; }
  .why-complete, .promotion-card { padding: 20px 17px; }
  .promotion-card strong { font-size: 1.3rem; }
}

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