/* ===== Cost page: guided wedding-cost calculator, package quiz ===== */
.calc [hidden], .pq-card [hidden] { display: none !important; }

/* ---------- hero: title beside the calculator ---------- */
.cost-hero { text-align: start; display: block; padding-top: calc(var(--header-h) + clamp(44px, 6vw, 90px)); padding-bottom: clamp(40px, 6vw, 90px); }
.cost-grid { position: relative; z-index: 3; max-width: var(--container); margin-inline: auto; display: grid; gap: clamp(28px, 4vw, 70px); align-items: center; }
@media (min-width: 1024px) { .cost-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 580px); align-items: start; } .cost-intro { position: sticky; top: calc(var(--header-h) + 50px); padding-top: clamp(20px, 4vw, 60px); } }
/* keep the silk at a normal height; the hero grows with the calculator result */
.cost-hero .hero-bg, .cost-hero .hero-scrim { bottom: auto; height: min(100%, 980px); }
.cost-hero .hero-bg::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(to bottom, transparent, var(--wine-900)); }
.cost-intro .breadcrumb { justify-content: flex-start; }
.cost-intro .h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.7rem); color: #fff; }
.cost-hero .lead { margin: 20px 0 0; max-width: 600px; }
.cost-hero .lead b { color: var(--gold-300); font-weight: 700; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.trust li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(226, 201, 143, 0.22); color: rgba(255, 255, 255, 0.88); font-size: 0.88rem; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.trust svg { width: 18px; height: 18px; color: var(--gold-300); }

/* ---------- calculator card ---------- */
.calc { --route: 0; position: relative; overflow: hidden; background: var(--paper); color: var(--ink); border-radius: var(--radius-xl); padding: clamp(18px, 2.4vw, 30px); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(226, 201, 143, 0.3); text-align: start; }
.calc::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: linear-gradient(90deg, var(--gold-300), var(--gold), var(--gold-300)); }
.calc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.calc-title { display: inline-flex; align-items: center; gap: 10px; font-size: 1.12rem; color: var(--wine-800); }
.calc-title svg { width: 22px; height: 22px; color: var(--gold); }
.calc-eta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--gold-100); color: var(--bronze); font-size: 0.8rem; font-weight: 700; }
.calc-eta svg { width: 15px; height: 15px; }
.calc-eta b { font-size: 0.95rem; }

/* route-style progress */
.route { position: relative; margin: 14px 0 12px; padding-top: 24px; }
.route-track { position: absolute; top: calc(24px + 17px); inset-inline: calc(100% / 12); height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 11px); border-radius: 3px; }
.route-track i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--route) * 100%); border-radius: inherit; background: linear-gradient(270deg, var(--gold-300), var(--gold)); transition: width 0.8s var(--ease); }
.route-car { position: absolute; top: -34px; inset-inline-start: calc(var(--route) * 100%); transform: translateX(50%); width: 30px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--wine-800); color: var(--gold-300); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6); transition: inset-inline-start 0.8s var(--ease); }
.route-car::after { content: ""; position: absolute; bottom: -5px; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--wine-800); border-bottom: 0; }
.route-car svg { width: 18px; height: 18px; transform: scaleX(-1); }
.route-stops { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.route-stops li { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rs-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--line-strong); color: var(--ink-mute); transition: background 0.5s, color 0.5s, border-color 0.5s, transform 0.5s var(--ease), box-shadow 0.5s; position: relative; z-index: 1; }
.rs-dot svg { width: 16px; height: 16px; }
.rs-label { font-size: 0.72rem; font-weight: 700; color: var(--ink-mute); transition: color 0.4s; white-space: nowrap; }
.route-stops li.is-done .rs-dot { background: var(--gold); border-color: var(--gold); color: var(--wine-900); }
.route-stops li.is-current .rs-dot { background: var(--wine-800); border-color: var(--wine-800); color: var(--gold-300); transform: scale(1.12); box-shadow: 0 0 0 5px rgba(175, 138, 50, 0.18); }
.route-stops li.is-done .rs-label, .route-stops li.is-current .rs-label { color: var(--wine-800); }

.calc-hint { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--ivory); border: 1px solid var(--line); color: var(--wine-800); font-size: 0.86rem; font-weight: 600; line-height: 1.6; margin-bottom: 18px; transition: background 0.3s, border-color 0.3s; }
.calc-hint .turn { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--wine-800); color: var(--gold-300); }
.calc-hint .turn svg { width: 16px; height: 16px; }
.calc-hint.is-warn { background: var(--gold-100); border-color: var(--gold); color: var(--bronze); }
.calc-hint.shake { animation: shake 0.45s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* steps */
.calc-steps { position: relative; }
.cstep { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.cstep.is-active { display: block; }
.cstep.from-fwd { animation: stepFwd 0.6s var(--ease) both; }
.cstep.from-back { animation: stepBack 0.6s var(--ease) both; }
@keyframes stepFwd { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes stepBack { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
.cstep:focus { outline: none; }
.cstep-q { padding: 0; margin-bottom: 14px; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); font-weight: 800; color: var(--wine-800); line-height: 1.5; }
.cstep-q small { font-size: 0.8rem; font-weight: 600; color: var(--ink-mute); }
.cstep-sub { font-size: 0.8rem; font-weight: 800; color: var(--gold); margin: 4px 0 8px; }
.cstep-sub + .choices + .cstep-sub { margin-top: 18px; }
.cstep-note { margin-top: 14px; font-size: 0.82rem; color: var(--ink-soft); }
.calc .choice span { padding: 8px 16px; }
.calc .choice span svg { width: 17px; height: 17px; color: var(--gold); transition: color 0.25s; }
.calc .choice input:checked + span svg { color: var(--gold-300); }
.calc .choice input:checked + span { box-shadow: 0 8px 18px -10px rgba(33, 26, 16, 0.6); }
.months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.months .choice span { width: 100%; justify-content: center; padding: 8px 4px; font-size: 0.9rem; }
@media (min-width: 480px) { .months { grid-template-columns: repeat(4, 1fr); } }
.years-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.years { display: flex; gap: 6px; }
.choice-unknown span { border-style: dashed; }

.guest-read { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.guest-read output { font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); font-weight: 800; color: var(--wine-800); line-height: 1.1; font-variant-numeric: tabular-nums; }
.guest-read span { font-weight: 700; color: var(--ink-soft); }
.guest-chips .choice span { min-width: 60px; justify-content: center; }
.range-wrap { display: block; margin-top: 20px; }
.range-wrap input { --fill: 16%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }
.range-wrap input::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to left, var(--gold) var(--fill), var(--cream) var(--fill)); }
.range-wrap input::-moz-range-track { height: 6px; border-radius: 6px; background: var(--cream); }
.range-wrap input::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--gold); }
.range-wrap input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--wine-800); border: 4px solid #fff; box-shadow: 0 0 0 1px var(--gold), 0 6px 14px -4px rgba(0, 0, 0, 0.45); }
.range-wrap input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--wine-800); border: 4px solid #fff; box-shadow: 0 0 0 1px var(--gold); }
.range-wrap input:focus-visible { outline: none; }
.range-wrap input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--gold-300), 0 6px 14px -4px rgba(0, 0, 0, 0.45); }
.range-scale { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--ink-mute); margin-top: -4px; }

.pk-opts { display: grid; gap: 8px; }
@media (min-width: 480px) { .pk-opts { grid-template-columns: 1fr 1fr; } .pk-unknown { grid-column: span 2; } }
.pk-opt { position: relative; display: block; cursor: pointer; }
.pk-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pk-card { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 2px; align-items: start; height: 100%; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line-strong); background: #fff; transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.3s var(--ease); }
.pk-opt:hover .pk-card { border-color: var(--gold); transform: translateY(-2px); }
.pk-ic { grid-row: span 3; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-100); color: var(--wine); }
.pk-ic svg { width: 24px; height: 24px; }
.pk-card b { font-size: 1.02rem; color: var(--wine-800); line-height: 1.5; }
.pk-card small { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.7; }
.pk-card small a { color: var(--wine); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold-300); }
.pk-card em { font-style: normal; font-size: 0.74rem; font-weight: 700; color: var(--bronze); line-height: 1.6; }
.pk-opt input:checked + .pk-card { border-color: var(--gold); background: linear-gradient(160deg, #fffaf0, var(--gold-100)); box-shadow: 0 0 0 3px rgba(175, 138, 50, 0.2); }
.pk-opt input:checked + .pk-card .pk-ic { background: var(--wine-800); color: var(--gold-300); }
.pk-opt input:focus-visible + .pk-card { outline: 2px solid var(--gold); outline-offset: 2px; }
.pk-unknown .pk-card { border-style: dashed; }
.addons .choice span { font-size: 0.92rem; }

/* nav */
.calc-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.calc-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border-radius: 10px; font-weight: 700; color: var(--ink-soft); transition: opacity 0.3s, background 0.3s; }
.calc-back:hover { background: var(--cream); }
.calc-back svg { width: 16px; height: 16px; }
.calc-back[disabled] { opacity: 0; pointer-events: none; }
.calc-next { margin-inline-start: auto; }
.calc-restart { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 12px; font-weight: 700; font-size: 0.9rem; color: var(--ink-soft); }
.calc-restart svg { width: 16px; height: 16px; color: var(--gold); }

/* result */
.res-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 800; color: var(--gold); }
.res-kicker svg { width: 16px; height: 16px; }
.res-range { margin-top: 4px; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem); font-weight: 800; color: var(--wine-800); line-height: 1.35; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.res-num b { font-variant-numeric: tabular-nums; }
.res-unit { font-size: 0.45em; font-weight: 700; color: var(--ink-soft); }
.res-exact { font-size: 0.82rem; color: var(--ink-mute); margin-top: 2px; }
.res-sum { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.res-sum li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--cream); font-size: 0.8rem; font-weight: 600; color: var(--wine-800); line-height: 1.7; }
.res-sum svg { width: 14px; height: 14px; color: var(--gold); flex: none; }
.res-alts { margin-top: 18px; }
.res-label { font-size: 0.8rem; font-weight: 800; color: var(--ink-soft); margin-bottom: 6px; }
.res-alts ul { list-style: none; display: grid; gap: 2px; }
.res-alts button { width: 100%; min-height: 40px; display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 10px; text-align: start; transition: background 0.3s; }
.res-alts button:hover { background: var(--ivory); }
.alt-name { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 700; color: var(--ink-soft); }
.alt-name svg { width: 16px; height: 16px; color: var(--gold); }
.alt-bar { position: relative; height: 8px; border-radius: 8px; background: var(--cream); }
.alt-bar i { position: absolute; inset-block: 0; inset-inline-start: var(--a); width: calc(var(--b) - var(--a)); min-width: 8px; border-radius: 8px; background: var(--line-strong); transition: background 0.4s; }
.alt-val { font-size: 0.78rem; font-weight: 700; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.res-alts li.is-on .alt-bar i { background: linear-gradient(270deg, var(--gold-300), var(--gold)); }
.res-alts li.is-on .alt-name, .res-alts li.is-on .alt-val { color: var(--wine-800); }
.calc.is-result .alt-bar i { animation: barIn 1s var(--ease) both; }
@keyframes barIn { from { transform: scaleX(0); } }
.alt-bar i { transform-origin: right; }
.res-break { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; }
.res-break summary { list-style: none; cursor: pointer; padding: 10px 14px; font-weight: 800; font-size: 0.88rem; color: var(--wine-800); display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.res-break summary::-webkit-details-marker { display: none; }
.res-break summary::after { content: ""; width: 9px; height: 9px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); transition: transform 0.3s; }
.res-break[open] summary::after { transform: rotate(135deg); }
.res-break ul { list-style: none; padding: 0 14px 10px; display: grid; }
.res-break li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px dashed var(--line-strong); font-size: 0.86rem; line-height: 1.7; }
.res-break li span { color: var(--ink-soft); }
.res-break li b { color: var(--wine-800); text-align: end; }
.res-break li.is-pending b { color: var(--ink-mute); font-weight: 600; }
.res-break li.is-gift b { color: var(--gold); }
.res-disc { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--ivory); font-size: 0.78rem; line-height: 1.9; color: var(--ink-soft); }
.res-disc svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 3px; }

.lead-box { margin-top: 18px; padding: 18px; border-radius: 18px; background: linear-gradient(160deg, #fffaf0, var(--gold-100)); border: 1px solid rgba(175, 138, 50, 0.3); }
.lead-title { font-size: 1.12rem; color: var(--wine-800); }
.lead-sub { font-size: 0.85rem; color: var(--ink-soft); margin: 4px 0 14px; }
.calc-lead .form-grid { grid-template-columns: 1fr; }
@media (min-width: 480px) { .calc-lead .form-grid { grid-template-columns: 1fr 1fr; } .calc-lead .span-2 { grid-column: span 2; } }
.calc-lead .field input { min-height: 56px; background: #fff; }
.calc-lead .choice-group legend { font-size: 0.85rem; }
.lead-actions { display: grid; gap: 8px; }
.lead-actions .consent { display: flex; align-items: flex-start; gap: 6px; line-height: 1.8; }
.lead-actions .consent svg { width: 15px; height: 15px; color: var(--gold); flex: none; margin-top: 4px; }
.btn.is-busy { opacity: 0.7; }
.calc-thanks { text-align: center; padding: 8px 4px; animation: tabIn 0.7s var(--ease) both; }
.calc-thanks:focus { outline: none; }
.calc-thanks .seal { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--wine-800); color: var(--gold-300); }
.calc-thanks .seal svg { width: 30px; height: 30px; }
.calc-thanks p { margin-top: 8px; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.9; }
.thx-links { list-style: none; display: grid; gap: 6px; margin: 12px 0 6px; }
.thx-links a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: 12px; background: #fff; font-weight: 700; font-size: 0.9rem; color: var(--wine-800); border: 1px solid var(--line); }
.thx-links svg { width: 18px; height: 18px; color: var(--gold); }

/* ---------- what's included ---------- */
.inc-grid { display: grid; gap: clamp(12px, 1.4vw, 20px); }
.inc h3 { font-size: 1.2rem; }
.inc .ico-badge { margin-bottom: 16px; }
@media (min-width: 700px) { .inc-grid { grid-template-columns: 1fr 1fr; } .inc-main { grid-column: span 2; } }
@media (min-width: 1024px) { .inc-grid { grid-template-columns: 1.25fr 1fr 1fr; } .inc-main { grid-column: auto; grid-row: span 2; } }
.inc-main { display: flex; flex-direction: column; }
.inc-receipt { margin-top: auto; padding-top: 26px; display: grid; gap: 12px; }
.inc-receipt span { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.8); }
.inc-receipt i { font-style: normal; }
.inc-receipt b { flex: 1; height: 1px; border-bottom: 1px dashed rgba(226, 201, 143, 0.4); }
.inc-receipt span::after { content: ""; width: 54px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(226, 201, 143, 0.25), rgba(226, 201, 143, 0.6)); }

/* ---------- cost parts ---------- */
.parts-head { display: grid; gap: 18px; align-items: end; margin-bottom: clamp(30px, 4vw, 50px); }
@media (min-width: 1024px) { .parts-head { grid-template-columns: 1fr 1fr; gap: 60px; } }
.parts { display: grid; gap: clamp(12px, 1.4vw, 18px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.part { position: relative; padding: 26px 24px; border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-sm); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.part:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.part-ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--wine-800); color: var(--gold-300); margin-bottom: 16px; }
.part-ico svg { width: 24px; height: 24px; }
.part-tag { position: absolute; top: 24px; inset-inline-end: 22px; padding: 3px 11px; border-radius: 999px; background: var(--gold-100); color: var(--bronze); font-size: 0.74rem; font-weight: 700; max-width: 55%; text-align: center; line-height: 1.7; }
.part h3 { font-size: 1.2rem; }
.part p { margin-top: 8px; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.95; }
.part a { color: var(--wine); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold-300); text-underline-offset: 4px; }
.mid-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 26px; padding: 14px 16px; border-radius: 20px; background: var(--paper); border: 1px dashed var(--gold); }
.mid-cta p { flex: 1 1 260px; color: var(--ink-soft); }
.mid-cta p b { color: var(--wine-800); }
.mid-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-100); color: var(--wine); flex: none; }
.mid-ico svg { width: 22px; height: 22px; }

/* ---------- 7 ways ---------- */
.save-wrap { display: grid; gap: 30px; }
@media (min-width: 1024px) { .save-wrap { grid-template-columns: 0.9fr 1.1fr; gap: 80px; } .save-aside { position: sticky; top: 120px; align-self: start; } }
.save-media { margin: 26px 0 22px; }
.save-list { list-style: none; counter-reset: sv; }
.save-list li { counter-increment: sv; display: grid; grid-template-columns: 70px 1fr; column-gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.save-list li:first-child { padding-top: 0; }
.save-list li::before { content: counter(sv, persian); grid-row: span 2; font-size: 3.2rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--gold); }
.save-list h3 { font-size: 1.18rem; }
.save-list p { margin-top: 6px; color: var(--ink-soft); line-height: 1.95; }

/* ---------- package quiz ---------- */
.pq-wrap { display: grid; gap: clamp(28px, 4vw, 70px); align-items: center; }
@media (min-width: 1024px) { .pq-wrap { grid-template-columns: 0.85fr 1.15fr; } }
.pq-flowers { display: flex; gap: 10px; margin-top: 26px; }
.pq-flowers span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(226, 201, 143, 0.1); border: 1px solid rgba(226, 201, 143, 0.25); color: var(--gold-300); }
.pq-flowers svg { width: 24px; height: 24px; }
.pq-card { border-radius: var(--radius-xl); padding: clamp(20px, 3vw, 36px); background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(226, 201, 143, 0.22); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pq-head { display: flex; justify-content: space-between; align-items: center; color: var(--gold-300); font-weight: 700; font-size: 0.9rem; }
.pq-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border-radius: 10px; color: rgba(255, 255, 255, 0.75); font-weight: 600; }
.pq-back svg { width: 16px; height: 16px; }
.pq-back[disabled] { opacity: 0; pointer-events: none; }
.pq-bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin: 10px 0 22px; }
.pq-bar i { display: block; height: 100%; width: 0; background: linear-gradient(270deg, var(--gold-300), var(--gold)); transition: width 0.7s var(--ease); }
.pq-stage { display: grid; }
.pq-q { grid-area: 1 / 1; border: 0; margin: 0; padding: 0; min-width: 0; opacity: 0; visibility: hidden; transform: translateX(-40px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.6s; }
.pq-q.is-done { transform: translateX(40px); }
.pq-q.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.6s var(--ease) 0.12s, transform 0.7s var(--ease) 0.12s, visibility 0s; }
.pq-q legend { padding: 0; margin-bottom: 16px; }
.pq-q h3 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem); color: #fff; }
.pq-opts { display: grid; gap: 10px; }
@media (min-width: 560px) { .pq-opts { grid-template-columns: 1fr 1fr; } }
.pqo { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-weight: 700; text-align: start; transition: background 0.3s, border-color 0.3s, transform 0.4s var(--ease); }
.pqo svg { width: 22px; height: 22px; color: var(--gold-300); flex: none; }
.pqo:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(226, 201, 143, 0.5); transform: translateY(-2px); }
.pqo.is-picked { background: var(--gold); border-color: var(--gold); color: var(--wine-900); }
.pqo.is-picked svg { color: var(--wine-900); }
.pq-result { grid-area: 1 / 1; animation: tabIn 0.8s var(--ease) both; }
.pq-result:focus { outline: none; }
.pq-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #e2c98f, #af8a32); color: var(--wine-900); box-shadow: 0 12px 30px -10px rgba(175, 138, 50, 0.7); }
.pq-ic svg { width: 32px; height: 32px; }
.pq-kicker { margin-top: 16px; color: var(--gold-300); font-weight: 700; font-size: 0.88rem; }
.pq-name { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); color: #fff; margin-top: 4px; }
.pq-desc { margin-top: 10px; color: rgba(255, 255, 255, 0.8); line-height: 2; }
.pq-price { margin-top: 10px; font-size: 0.85rem; color: var(--gold-100); }
.pq-actions { margin-top: 20px; }
.pq-again { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px; color: rgba(255, 255, 255, 0.7); font-weight: 600; }
.pq-again svg { width: 16px; height: 16px; color: var(--gold-300); }

/* ---------- final CTA ---------- */
.final-cta { display: grid; gap: 24px; align-items: center; padding: clamp(26px, 4vw, 56px); border-radius: var(--radius-xl); background: radial-gradient(80% 120% at 100% 0%, rgba(175, 138, 50, 0.35), transparent 60%), var(--wine-900); color: rgba(255, 255, 255, 0.78); }
@media (min-width: 1024px) { .final-cta { grid-template-columns: 1.3fr auto; gap: 50px; } }
.final-cta .h2 { color: #fff; }
.final-cta .hl { color: var(--gold-300); }
.fc-text p { margin-top: 12px; line-height: 2; max-width: 620px; }
.fc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.final-cta .btn-glass { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #fff; --chip: rgba(255, 255, 255, 0.12); }
.final-cta .btn-glass .chip { color: var(--gold-300); }
.fc-note { flex-basis: 100%; display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); }
.fc-note svg { width: 15px; height: 15px; color: var(--gold-300); }
@media (max-width: 479px) { .fc-actions .btn { width: 100%; justify-content: space-between; } }