/* =========================================================
   Quiz funnel — v2
   ========================================================= */
body.quiz { min-height: 100svh; background: var(--paper); }

/* sky: shifts from dawn to night as you progress */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky-layer { position: absolute; inset: 0; transition: opacity 1.4s var(--ease); }
.sky-dawn { background: linear-gradient(180deg, #FBF6EF 0%, #F9E8D6 60%, #F6D7BC 100%); }
.sky-dusk { background: linear-gradient(180deg, #F3EEF6 0%, #E7DDF1 55%, #EBCFD8 100%); opacity: 0; }
.sky-dark { background: linear-gradient(180deg, #0D0F2C 0%, #1B1C4A 60%, #2F2B69 100%); opacity: 0; }
.sky .stars { opacity: 0; transition: opacity 1.4s; }
.sky-orb { position: absolute; left: 50%; border-radius: 50%; transition: transform 1.6s var(--ease), opacity 1.4s; }
.sky-sun { bottom: 0; width: min(90vw, 760px); aspect-ratio: 1; translate: -50% 62%; background: radial-gradient(closest-side, rgba(255, 186, 120, .75), rgba(255, 186, 120, .25) 55%, rgba(255, 186, 120, 0)); filter: blur(10px); }
.sky-moon { top: 12%; left: 82%; width: 90px; aspect-ratio: 1; background: radial-gradient(circle at 38% 38%, #FFF8EE, #EADBC8 70%); transform: translateY(110vh); }

/* top bar */
.q-top { position: sticky; top: 0; z-index: 10; padding: 18px 0 0; }
.q-top .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 44px; }
.q-exit { font-size: .86rem; font-weight: 500; text-decoration: none; opacity: .75; transition: opacity .2s; }
.q-exit:hover { opacity: 1; }
.night .q-top { color: #fff; }
.progress { height: 2px; background: rgba(24, 22, 27, .1); margin-top: 16px; overflow: hidden; border-radius: 2px; }
.progress i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease); }
.progress-label { display: flex; justify-content: space-between; margin-top: 10px; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.night .progress { background: rgba(255, 255, 255, .18); }
.night .progress i { background: #fff; }
.night .progress-label { color: rgba(255, 255, 255, .7); }

.stage { min-height: calc(100svh - 110px); display: grid; place-items: start center; padding: clamp(16px, 6vh, 64px) 0 64px; }
.panel { width: min(100% - 32px, 720px); margin-inline: auto; border-radius: 24px; padding: clamp(28px, 5vw, 56px); background: var(--card); box-shadow: 0 1px 2px rgba(24, 22, 27, .04), 0 40px 90px -40px rgba(40, 20, 60, .35); }
.panel.enter { animation: panelIn .7s var(--ease) both; }
.panel.exit { animation: panelOut .18s ease-in both; pointer-events: none; }
.panel.back.enter { animation-name: panelInBack; }
@keyframes panelIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes panelInBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes panelOut { to { opacity: 0; transform: translateY(-8px); } }

.q-kicker { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.q-title { font-size: clamp(2rem, 4.4vw, 3rem); margin: 14px 0 10px; }
.q-sub { color: var(--ink-2); font-size: 1rem; margin-bottom: 28px; }

.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opts.one-col { grid-template-columns: 1fr; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; width: 100%; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--hair); background: var(--card); transition: border-color .25s, background .25s, transform .25s var(--ease); }
.opt:hover { border-color: var(--ink); }
.opt .ico { display: none; }
.opt .txt { display: grid; gap: 3px; }
.opt b { font-size: .98rem; font-weight: 500; line-height: 1.3; }
.opt small { color: var(--ink-3); font-size: .84rem; line-height: 1.35; }
.opt .key { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--hair-2); display: grid; place-items: center; font-size: .72rem; font-weight: 600; color: var(--ink-2); transition: all .25s; }
.opt:hover .key { border-color: var(--ink); color: var(--ink); }
.opt[aria-pressed="true"] { border-color: var(--ink); background: #FBF9F6; box-shadow: inset 0 0 0 1px var(--ink); }
.opt[aria-pressed="true"] .key { background: var(--ink); border-color: var(--ink); color: #fff; }
.opt[aria-pressed="true"] .key span { display: none; }
.opt[aria-pressed="true"] .key::before { content: '✓'; }
.opt.pulse { animation: pulse .3s var(--ease); }
@keyframes pulse { 50% { transform: scale(.985); } }

.q-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.q-back { font-size: .9rem; font-weight: 500; color: var(--ink-2); padding: 10px 0; }
.q-back:hover { color: var(--ink); }
.q-note { margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: #FBEDE4; font-size: .92rem; display: none; }
.q-note.is-on { display: block; animation: panelIn .5s var(--ease); }

.text-q { display: grid; gap: 14px; }
.text-q .input { height: 60px; font-size: 1.15rem; padding: 0 20px; }
.privacy { font-size: .8rem; color: var(--ink-3); }

/* intro */
.intro { text-align: center; }
.intro-cans { display: flex; justify-content: center; align-items: flex-end; margin: 4px auto 28px; height: 190px; }
.intro-cans .can { width: 56px; margin-inline: -4px; filter: drop-shadow(0 14px 12px rgba(24, 22, 27, .18)); transform: rotate(var(--r)) translateY(var(--y)); transform-origin: 50% 100%; animation: fanIn 1s var(--ease) both; animation-delay: calc(var(--i) * .05s); }
@keyframes fanIn { from { opacity: 0; transform: translateY(30px); } }
.intro .q-title { font-size: clamp(2.6rem, 6vw, 4rem); }
.intro .q-sub { max-width: 30rem; margin-inline: auto; }
.intro-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 24px; margin-top: 24px; font-size: .82rem; color: var(--ink-2); }

/* loading */
.loading { text-align: center; padding: 36px 0; }
.loader { width: 84px; height: 84px; margin: 0 auto 28px; position: relative; }
.loader::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--hair); border-top-color: var(--ink); animation: spin 1.1s linear infinite; }
.loader::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #FFD9A8, #E97A45); animation: breathe 2.2s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(.8); background: radial-gradient(circle at 40% 40%, #E8E0FA, #4B3F9E); } }
.loading ul { list-style: none; padding: 0; margin: 20px auto 0; display: grid; gap: 10px; max-width: 300px; text-align: left; }
.loading li { color: var(--ink-2); font-size: .95rem; opacity: 0; animation: fadeUp .5s var(--ease) forwards; animation-delay: var(--d); }
.loading li::before { content: '✓'; display: inline-block; width: 22px; color: var(--ink); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- results ---------- */
.result { width: 100%; max-width: 1180px; margin-inline: auto; padding: 0 var(--gutter) 72px; }
.result-hero { position: relative; border-radius: 28px; padding: clamp(28px, 5vw, 64px); overflow: hidden; background: var(--tint, var(--paper-2)); animation: panelIn .9s var(--ease) both; }
.result-hero.both { background: linear-gradient(100deg, var(--tint) 0%, var(--tint) 35%, var(--tint2) 65%, var(--tint2) 100%); }
.result-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: center; position: relative; }
.result-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); margin: 14px 0 10px; }
.result-hero .flv { font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.result-hero .tagline { font-size: 1.1rem; margin-top: 18px; max-width: 30rem; color: var(--ink-2); }
.for { font-size: 1rem; color: var(--ink-2); }
.match { margin-top: 24px; font-size: .95rem; color: var(--ink-2); }
.match b { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--ink); margin-right: 4px; }
.match .ring { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: .76rem; font-weight: 600; background: conic-gradient(var(--ink) calc(var(--p) * 1%), rgba(24, 22, 27, .12) 0); position: relative; }
.match .ring::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--tint, #fff); }
.match .ring span { position: relative; }
.result-cans { display: flex; justify-content: center; align-items: flex-end; gap: 4%; min-height: 380px; position: relative; }
.result-cans .can { width: min(30%, 150px); filter: drop-shadow(0 30px 26px rgba(24, 22, 27, .22)); animation: canDrop 1.1s var(--ease) both; }
.result-cans .can ~ .can { animation-delay: .15s; }
.result-cans.solo .can { width: min(38%, 172px); }
.result-cans .plus { align-self: center; font-family: var(--serif); font-weight: 300; font-size: 2rem; color: var(--ink-3); }
.result-glow, .sparkles { display: none; }
@keyframes canDrop { from { opacity: 0; transform: translateY(-36px) rotate(-6deg); } to { opacity: 1; transform: none; } }

.result-body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; margin-top: 20px; align-items: start; }
.card { border-radius: 24px; padding: clamp(24px, 3.5vw, 40px); background: var(--card); box-shadow: 0 1px 2px rgba(24, 22, 27, .04), 0 30px 60px -36px rgba(40, 20, 60, .3); }
.card h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); margin-bottom: 22px; }
.why { list-style: none; padding: 0; margin: 0; display: grid; counter-reset: w; }
.why li { padding: 14px 0; border-top: 1px solid var(--hair); color: var(--ink-2); font-size: .96rem; display: grid; grid-template-columns: 30px 1fr; }
.why li::before { content: counter(w, decimal-leading-zero); counter-increment: w; font-size: .72rem; font-weight: 600; color: var(--ink-3); padding-top: 3px; }
.why b { color: var(--ink); font-weight: 600; }
.ing-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.how-to { margin-top: 22px; padding: 18px 20px; border-radius: 14px; background: var(--paper); font-size: .94rem; color: var(--ink-2); }
.how-to b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }

.offer-opts { display: grid; gap: 8px; }
.offer { display: grid; grid-template-columns: 20px 58px 1fr auto; gap: 14px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--hair); background: var(--card); width: 100%; transition: border-color .25s, box-shadow .25s; }
.offer:hover { border-color: var(--hair-2); }
.offer .radio { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--hair-2); position: relative; }
.offer[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.offer[aria-checked="true"] .radio { border-color: var(--ink); }
.offer[aria-checked="true"] .radio::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink); }
.offer .mini { display: flex; height: 64px; align-items: flex-end; justify-content: center; border-radius: 10px; background: var(--paper); padding: 6px 4px 4px; }
.offer .mini .can { width: 18px; margin-inline: -2px; }
.offer .mini img.box { width: 100%; height: 100%; object-fit: contain; }
.offer b { display: block; font-size: .96rem; font-weight: 600; }
.offer small { color: var(--ink-2); font-size: .8rem; }
.offer .tag { display: inline-block; margin-top: 6px; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sun); }
.offer .pr { text-align: right; font-weight: 600; font-size: .95rem; }
.offer .pr s { display: block; font-weight: 400; color: var(--ink-3); font-size: .8rem; }

.buy-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 14px; }
.buy-mode button { border-radius: 14px; padding: 14px 16px; border: 1px solid var(--hair); text-align: left; transition: border-color .25s, box-shadow .25s; }
.buy-mode button b { display: block; font-weight: 600; font-size: .92rem; }
.buy-mode button small { color: var(--ink-2); font-size: .78rem; }
.buy-mode button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; height: 40px; border-radius: 999px; border: 1px solid var(--hair-2); }
.stepper button { width: 38px; height: 100%; font-size: 1.05rem; }
.stepper output { min-width: 20px; text-align: center; font-weight: 600; font-size: .9rem; }
.reco { font-size: .82rem; color: var(--ink-3); margin-top: 10px; }
.total-row { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 0 16px; padding-top: 18px; border-top: 1px solid var(--hair); }
.total-row b { font-family: var(--serif); font-weight: 400; font-size: 2rem; letter-spacing: -.02em; }
.total-row s { color: var(--ink-3); margin-right: 8px; }
.total-row .lbl { font-weight: 600; font-size: .95rem; }
.total-row .lbl small { display: block; font-weight: 400; color: var(--ink-2); font-size: .8rem; }
.guarantee { text-align: center; font-size: .8rem; color: var(--ink-3); margin-top: 14px; }

.result-foot { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 28px; }

@media (max-width: 860px) {
  .result-grid, .result-body { grid-template-columns: 1fr; }
  .result-hero { text-align: center; }
  .result-hero .tagline { margin-inline: auto; }
  .result-cans { min-height: 250px; order: -1; }
  .result-cans .can { width: min(28%, 110px); }
  .result-cans.solo .can { width: min(34%, 130px); }
  .result-hero.both { background: linear-gradient(180deg, var(--tint) 0%, var(--tint2) 100%); }
}
@media (max-width: 560px) {
  .sky-moon { top: 72px; left: 88%; width: 34px; }
  .opts { grid-template-columns: 1fr; }
  .opt { padding: 14px 16px; }
  .offer { grid-template-columns: 18px 48px 1fr; }
  .offer .pr { grid-column: 3; text-align: left; }
  .offer .pr s { display: inline; margin-left: 6px; }
  .intro-cans { height: 140px; }
  .intro-cans .can { width: 40px; }
  .buy-mode { grid-template-columns: 1fr; }
}