/* Result screen (quiz step 6): dark panel with the glowing stage figure on the left,
   white result card on the right. One colour per stage: .rv-tone-early / -moderate / -high. */
.rv-tone-early{--rv-tone:#16a36b;--rv-tone-2:#0b7a55;--rv-glow:#3ff0a8;--rv-soft:#e7f7ef;--rv-soft-line:#bfe8d3}
.rv-tone-moderate{--rv-tone:#ef7a16;--rv-tone-2:#c9530a;--rv-glow:#ffb13d;--rv-soft:#fff2e4;--rv-soft-line:#f8d5ae}
.rv-tone-high{--rv-tone:#d11b52;--rv-tone-2:#96103a;--rv-glow:#ff4d7c;--rv-soft:#fde9ef;--rv-soft-line:#f5c3d2}

/* The dialog itself while the result is showing */
.reference-replica #quiz[data-step="6"][open]{width:min(1040px,calc(100% - 32px))!important;max-width:none!important;max-height:calc(100dvh - 24px)!important;background:radial-gradient(120% 90% at 20% 0%,#3a2a86 0%,#1d1450 45%,#140d38 100%);border:1px solid #7b5cf04d;border-radius:18px!important;box-shadow:0 30px 120px #000a,0 0 0 1px #ffffff0d inset;color:#fff}
.reference-replica #quiz[data-step="6"] .modal-top{background:transparent!important;border-bottom:1px solid #ffffff14!important;padding:14px 26px!important}
.reference-replica #quiz[data-step="6"] .modal-brand{font-family:Podium,Impact,sans-serif;letter-spacing:.5px;text-transform:uppercase;position:relative;padding-bottom:12px}
.reference-replica #quiz[data-step="6"] .modal-brand::after{content:"Healthier you, brighter tomorrow";position:absolute;left:58px;bottom:0;font:600 9px/1 ReplicaInter,Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#c6a9f2;white-space:nowrap}
.reference-replica #quiz[data-step="6"] .modal-top #language{background:#ffffff0d!important;border:1px solid #ffffff33!important;color:#fff!important;border-radius:10px;padding:8px 16px!important}
.reference-replica #quiz[data-step="6"] #screen{padding:0 18px 18px 0!important;overflow-y:auto}

.result-v2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:stretch;min-height:500px;text-align:left}

/* ---------- Left: figure ---------- */
.rv-visual{position:relative;overflow:hidden;min-height:500px}
.rv-visual::before{content:"";position:absolute;inset:10% 5% 0 20%;background:radial-gradient(closest-side,#5b6cff33,#0000);pointer-events:none}
.rv-figure{position:absolute;top:18px;bottom:6px;left:4%;right:4%;color:var(--rv-glow)}
.rv-figure-svg{width:100%;height:100%;display:block;overflow:visible}



/* ---------- Right: white card ---------- */
.rv-card{position:relative;margin:18px 0 0;padding:34px 30px 22px;background:linear-gradient(160deg,#ffffff 0%,#faf8ff 100%);border-radius:16px;box-shadow:0 20px 60px #0006;color:#352f4d;display:flex;flex-direction:column}
.reference-replica #quiz[data-step="6"] #quiz-title.rv-title{font:400 68px/.95 Podium,Impact,sans-serif!important;text-transform:uppercase!important;letter-spacing:.5px;color:#1b1238!important;text-align:left!important;margin:0 0 14px 0!important}
.rv-title em{font-style:normal;background:linear-gradient(90deg,var(--rv-tone),var(--rv-tone-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.rv-rule{display:block;width:72px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--rv-tone),#0000);margin:0 0 18px}
.reference-replica #quiz[data-step="6"] .rv-body{font:16px/1.6 ReplicaInter,'Noto Sans Tamil',Arial,sans-serif;color:#453d5c;margin:0 0 18px;max-width:none;text-align:left}
.rv-bridge{display:flex;align-items:center;gap:16px;background:var(--rv-soft);border:1px solid var(--rv-soft-line);border-radius:12px;padding:14px 18px;margin:0 0 18px}
.rv-bridge svg{flex:0 0 34px;height:34px;fill:none;stroke:var(--rv-tone);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rv-bridge::before{content:"";order:1;align-self:stretch;width:1px;background:var(--rv-soft-line)}
.reference-replica #quiz[data-step="6"] .rv-bridge p{order:2;margin:0;font:700 15px/1.45 ReplicaInter,'Noto Sans Tamil',Arial,sans-serif;color:#2a2340;text-align:left}
.reference-replica #quiz[data-step="6"] .rv-cta{width:100%;min-height:64px;display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 18px;border-radius:12px;background:linear-gradient(180deg,var(--rv-tone),var(--rv-tone-2))!important;box-shadow:0 12px 28px color-mix(in srgb,var(--rv-tone) 45%,transparent);font:italic 400 34px/1 Podium,Impact,sans-serif;text-transform:uppercase;color:#fff;margin:0 0 18px;white-space:nowrap}
.reference-replica #quiz[data-step="6"] .rv-cta:hover{filter:brightness(1.07)}
.reference-replica #quiz[data-step="6"][data-language=ta] .rv-cta{font:700 17px/1.3 'Noto Sans Tamil',Arial,sans-serif;white-space:normal}

/* Tamil headings */
.reference-replica #quiz[data-step="6"][data-language=ta] #quiz-title.rv-title{font:800 34px/1.35 'Noto Sans Tamil',Arial,sans-serif!important;text-transform:none!important;margin-right:0!important}

/* ---------- Motion ---------- */
.rv-organs,.rv-core{animation:rv-organ-pulse 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.rv-ring-front{stroke-dasharray:6 10;animation:rv-ring-run 3s linear infinite}
.result-v2.is-revealing .rv-figure{animation:rv-rise .8s cubic-bezier(.2,.8,.2,1) both}
.result-v2.is-revealing .rv-card>*{animation:rv-in .5s ease-out both}
.result-v2.is-revealing .rv-card>:nth-child(2){animation-delay:.08s}
.result-v2.is-revealing .rv-card>:nth-child(3){animation-delay:.16s}
.result-v2.is-revealing .rv-card>:nth-child(4){animation-delay:.22s}
.result-v2.is-revealing .rv-card>:nth-child(5){animation-delay:.3s}
.result-v2.is-revealing .rv-card>:nth-child(6){animation-delay:.38s}
.result-v2.is-revealing .rv-card>:nth-child(7){animation-delay:.46s}
.result-v2.is-revealing .rv-card>:nth-child(8){animation-delay:.54s}
.result-v2.is-revealing .rv-rule{animation:rv-rule .7s ease-out .3s both}
@keyframes rv-organ-pulse{0%,100%{opacity:.85}50%{opacity:1;filter:brightness(1.25)}}
@keyframes rv-ring-run{to{stroke-dashoffset:-32}}
@keyframes rv-rise{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes rv-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rv-rule{from{width:0}to{width:72px}}
@media(prefers-reduced-motion:reduce){
  .rv-organs,.rv-core,.rv-ring-front,.result-v2.is-revealing .rv-figure,.result-v2.is-revealing .rv-card>*,.result-v2.is-revealing .rv-rule{animation:none}
  .rv-ring-dot{display:none}
}

/* ---------- Tablet ---------- */
@media(max-width:960px){
  .reference-replica #quiz[data-step="6"] #quiz-title.rv-title{font-size:56px!important}
  .reference-replica #quiz[data-step="6"] .rv-cta{font-size:28px}
}

/* ---------- Phones: figure on top, card below ---------- */
@media(max-width:767px){
  .reference-replica #quiz[data-step="6"][open]{background:radial-gradient(120% 60% at 30% 0%,#3a2a86 0%,#1d1450 50%,#140d38 100%)!important}
  .reference-replica #quiz[data-step="6"] .modal-top{padding:10px 14px!important;border-bottom:1px solid #ffffff14!important}
  .reference-replica #quiz[data-step="6"] .modal-brand::after{left:44px;font-size:7px;letter-spacing:1.4px}
  .reference-replica #quiz[data-step="6"] #screen{padding:0 12px 14px!important}
  .result-v2{grid-template-columns:1fr;min-height:0}
  .rv-visual{min-height:250px;height:36dvh;max-height:300px}
  .rv-figure{left:0;right:0;top:10px;bottom:0}
  .rv-card{margin:0;padding:22px 18px 18px}
  .reference-replica #quiz[data-step="6"] #quiz-title.rv-title{font-size:46px!important;margin-right:0!important}
  .reference-replica #quiz[data-step="6"][data-language=ta] #quiz-title.rv-title{font-size:26px!important;margin-right:0!important}
  .reference-replica #quiz[data-step="6"] .rv-body{font-size:15px;line-height:1.55}
  .rv-bridge{padding:12px 14px;gap:12px}
  .reference-replica #quiz[data-step="6"] .rv-bridge p{font-size:14px}
  .reference-replica #quiz[data-step="6"] .rv-cta{font-size:clamp(20px,6.4vw,28px);min-height:56px;gap:10px}
}

/* "Preparing your result" spinner shown just before the result, now on the dark dialog */
.reference-replica #quiz[data-step="6"] #screen:has(.result-preparing){padding:18px!important}
.reference-replica #quiz[data-step="6"] .result-preparing .eyebrow{color:#c6a9f2}
.reference-replica #quiz[data-step="6"] .result-preparing #quiz-title{color:#fff!important}
.reference-replica #quiz[data-step="6"] .preparing-orbit{color:#fff}
.reference-replica #quiz[data-step="6"] .preparing-orbit:before{border-color:#ffffff26;border-top-color:#da3f96;border-right-color:#8f7fd4}
.reference-replica #quiz[data-step="6"] .preparing-dots i{background:#da3f96}

/* Keep the title words in the title font (older #quiz rules reach em) */
.reference-replica #quiz[data-step="6"] .rv-title span,.reference-replica #quiz[data-step="6"] .rv-title em{font:inherit!important;letter-spacing:inherit}
.reference-replica #quiz[data-step="6"] .rv-title em{font-style:normal!important}
.reference-replica #quiz[data-step="6"] #quiz-title.rv-title:focus{outline:none}

/* Phones: compact so the whole result fits one screen (fitResultScreen() handles the last bit) */
@media(max-width:767px){
  .rv-visual{height:210px;min-height:0;max-height:none}
  .rv-figure{left:0;right:0;top:6px;bottom:0}
  .rv-card{padding:16px 16px 14px}
  .reference-replica #quiz[data-step="6"] #quiz-title.rv-title{font-size:38px!important;margin-bottom:8px!important}
  .reference-replica #quiz[data-step="6"][data-language=ta] #quiz-title.rv-title{font-size:22px!important}
  .rv-rule{margin-bottom:10px}
  .reference-replica #quiz[data-step="6"] .rv-body{font-size:14px;line-height:1.5;margin-bottom:12px}
  .rv-bridge{padding:10px 12px;margin-bottom:12px}
  .rv-bridge svg{flex-basis:28px;height:28px}
  .reference-replica #quiz[data-step="6"] .rv-bridge p{font-size:13px}
  .reference-replica #quiz[data-step="6"] .rv-cta{min-height:52px;margin-bottom:12px}
}

/* Stage-coloured glow around the figure image */
.rv-figure-img{filter:drop-shadow(0 0 10px var(--rv-glow)) drop-shadow(0 0 28px color-mix(in srgb,var(--rv-glow) 55%,transparent));animation:rv-figure-glow 3s ease-in-out infinite}
@keyframes rv-figure-glow{0%,100%{filter:drop-shadow(0 0 8px var(--rv-glow)) drop-shadow(0 0 22px color-mix(in srgb,var(--rv-glow) 45%,transparent))}50%{filter:drop-shadow(0 0 14px var(--rv-glow)) drop-shadow(0 0 38px color-mix(in srgb,var(--rv-glow) 70%,transparent))}}
@media(prefers-reduced-motion:reduce){.rv-figure-img{animation:none}}

/* Phones: bigger figure, with its lower half tucked behind the card */
@media(max-width:767px){
  .rv-visual{height:350px;overflow:visible;z-index:0}
  .rv-figure{left:0;right:0;top:2px;bottom:auto;height:470px}
  .rv-figure-svg{height:100%;width:100%}
  .rv-card{position:relative;z-index:2;margin-top:-120px;box-shadow:0 -18px 40px #140d3899,0 20px 60px #0006}
  .result-v2{overflow:hidden}
}

/* Back link under the result button */
.reference-replica #quiz[data-step="6"] .rv-back{align-self:center;margin:12px 0 0;padding:4px 10px;border:0;background:none;font:600 14px/1.2 ReplicaInter,'Noto Sans Tamil',Arial,sans-serif;color:#6b5f7c;cursor:pointer}
.reference-replica #quiz[data-step="6"] .rv-back:hover{color:#1b1238;text-decoration:underline}
.reference-replica #quiz[data-step="6"] .rv-cta{margin-bottom:0!important}

/* Header brand on the result and payment screens: logo beside name-over-tagline, laid out in the flow
   (not absolutely positioned) so the tagline can never run under the language and close buttons. */
.reference-replica #quiz:is([data-step="6"],[data-step="7"]) .modal-top{gap:14px}
.reference-replica #quiz:is([data-step="6"],[data-step="7"]) .modal-top>div{flex-shrink:0;display:flex;align-items:center;gap:10px}
.reference-replica #quiz:is([data-step="6"],[data-step="7"]) .modal-brand{display:grid!important;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;row-gap:5px;align-items:center;justify-content:start;min-width:0;padding-bottom:0!important;font-size:22px!important;line-height:1!important}
.reference-replica #quiz:is([data-step="6"],[data-step="7"]) .modal-brand .df-logo{grid-row:1/3;width:36px!important;height:36px!important}
.reference-replica #quiz:is([data-step="6"],[data-step="7"]) .modal-brand .df-logo img{width:42px!important;height:42px!important}
.reference-replica #quiz:is([data-step="6"],[data-step="7"]) .modal-brand>span:not(.df-logo){align-self:end}
.reference-replica #quiz:is([data-step="6"],[data-step="7"]) .modal-brand::after{position:static!important;grid-column:2;align-self:start;font-size:7.5px!important;letter-spacing:1.1px!important;line-height:1!important}
@media(max-width:600px){
  .reference-replica #quiz:is([data-step="6"],[data-step="7"]) .modal-top{gap:10px}
  .reference-replica #quiz:is([data-step="6"],[data-step="7"]) .modal-top>div{gap:8px}
  .reference-replica #quiz:is([data-step="6"],[data-step="7"]) .modal-brand{font-size:18px!important;column-gap:8px;row-gap:4px}
  .reference-replica #quiz:is([data-step="6"],[data-step="7"]) .modal-brand .df-logo{width:30px!important;height:30px!important}
  .reference-replica #quiz:is([data-step="6"],[data-step="7"]) .modal-brand .df-logo img{width:35px!important;height:35px!important}
  .reference-replica #quiz:is([data-step="6"],[data-step="7"]) .modal-brand::after{font-size:6px!important;letter-spacing:.7px!important}
}