/* charm-quiz-glass.css */
.cqg,.cqg *{box-sizing:border-box}.cqg{position:relative;display:block;width:100%;min-height:100svh;overflow:hidden;color:#fff;font-family:EB Garamond,Georgia,serif;-webkit-font-smoothing:antialiased;background:#fff}.cqg [hidden]{display:none!important}.cqg__photo{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;transition:opacity 1.1s cubic-bezier(.22,.61,.36,1)}.cqg__photo img{display:block;width:100%;height:100%;object-fit:cover}.cqg__smoke{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;backdrop-filter:blur(26px) saturate(115%);-webkit-backdrop-filter:blur(26px) saturate(115%);background:radial-gradient(120% 90% at 50% 34%,#2e200e4d,#140e0699 55%,#0b0906cc),linear-gradient(180deg,#0b09066b,#0b090624 42%,#0b090694);transition:opacity 1.1s cubic-bezier(.22,.61,.36,1)}.cqg__sheen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background:radial-gradient(80% 55% at 50% 8%,#fff4de29,#fff4de00 68%);transition:opacity 1.1s cubic-bezier(.22,.61,.36,1)}.cqg__frost{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none;opacity:0;backdrop-filter:blur(40px) saturate(105%);-webkit-backdrop-filter:blur(40px) saturate(105%);background:radial-gradient(110% 80% at 50% 0%,#ffffffdb,#fffffff7 58%,#fff),linear-gradient(180deg,#ffffffeb,#fff);transition:opacity 1.1s cubic-bezier(.22,.61,.36,1)}.cqg[data-cq-running] .cqg__photo,.cqg[data-cq-running] .cqg__smoke,.cqg[data-cq-running] .cqg__sheen{opacity:0}.cqg[data-cq-running] .cqg__frost{opacity:1}.cqg[data-cq-running]{color:var(--ink)}.cqg__stage{position:relative;z-index:5;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:calc(var(--qapp-bar-h, 68px) + clamp(28px,5vh,64px)) clamp(22px,5vw,48px) clamp(48px,8vh,96px)}.cqg__inner{width:100%;max-width:var(--cqg-w, 560px)}.cqg__eyebrow{margin:0 0 20px;text-align:center;font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#ffffffb8}.cqg__head{margin:0;text-align:center;font-family:Libre Caslon Display,Georgia,serif;font-weight:400;font-size:clamp(2.5rem,5.2vw,4rem);line-height:1.04;letter-spacing:-.02em;color:#fff;text-wrap:balance;text-shadow:0 1px 40px rgba(0,0,0,.35)}.cqg__head p{margin:0}.cqg__head em{font-style:normal;color:var(--glow)}.cqg__lede{margin:22px auto 0;max-width:34ch;text-align:center;font-size:16.5px;line-height:1.6;color:#ffffffd1}.cqg__actions{margin-top:38px;display:flex;justify-content:center}.cqg__trust{display:flex;justify-content:center;align-items:center;gap:18px;margin:30px 0 0;padding:0;list-style:none;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff9}.cqg__trust li{display:flex;align-items:center;gap:18px}.cqg__trust li+li:before{content:"";width:1px;height:10px;background:#ffffff47}.cqg .cq__cta{display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:19px 42px;border:1px solid rgba(255,255,255,.34);border-radius:999px;background:#ffffff1a;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;text-decoration:none;cursor:pointer;font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease}.cqg .cq__cta svg{width:16px;height:16px;transition:transform .35s ease}@media(hover:hover)and (pointer:fine){.cqg .cq__cta:hover{background:#ffffff2e;border-color:#fff9;box-shadow:0 8px 40px #015ccf47}.cqg .cq__cta:hover svg{transform:translate(4px)}}.cqg .cq__cta:focus-visible{outline:2px solid var(--glow);outline-offset:3px}.cqg[data-cq-running] .cq__cta{background:var(--ink);border-color:var(--ink);color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}@media(hover:hover)and (pointer:fine){.cqg[data-cq-running] .cq__cta:hover{background:var(--led);border-color:var(--led);box-shadow:0 10px 34px color-mix(in srgb,var(--led) 34%,transparent)}}.cqg[data-cq-running] .cq__eyebrow{color:var(--led)}.cqg .cq__eyebrow{margin:0 0 8px;font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase}.cqg .cq__q{margin:0;outline:none;color:var(--ink);font-family:Libre Caslon Display,Georgia,serif;font-weight:400;font-size:clamp(1.55rem,2.6vw,2.05rem);line-height:1.18;letter-spacing:-.01em;overflow-wrap:normal;text-wrap:pretty}.cqg .cq__sub{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--ink-soft)}.cqg .cq__prog{margin:0 0 30px}.cqg .cq__prog-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}.cqg .cq__prog-track{height:2px;background:#14121017;border-radius:999px;overflow:hidden}.cqg .cq__prog-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--led-2),var(--led));box-shadow:0 0 12px color-mix(in srgb,var(--glow) 60%,transparent);transition:width .6s cubic-bezier(.16,.84,.32,1)}.cqg .cq__opts{display:grid;gap:10px;margin-top:28px}.cqg .cq__opt{display:flex;align-items:center;gap:15px;width:100%;padding:17px 21px;text-align:left;border:1px solid rgba(20,18,16,.07);border-radius:14px;background:#ffffffb8;backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);font-family:inherit;font-size:16px;line-height:1.35;color:var(--ink);cursor:pointer;box-shadow:0 2px 10px color-mix(in srgb,var(--led) 7%,transparent),0 10px 30px color-mix(in srgb,var(--led) 6%,transparent);transition:border-color .32s ease,background-color .32s ease,box-shadow .32s ease,transform .32s ease}.cqg .cq__dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#14121029;transition:background-color .3s ease,box-shadow .3s ease}@media(hover:hover)and (pointer:fine){.cqg .cq__opt:hover{background:#fffffff2;border-color:color-mix(in srgb,var(--sel-b, #6885E1) 55%,transparent);transform:translateY(-1px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sel-b, #6885E1) 22%,transparent),inset 0 1px #ffffff8c,0 4px 12px color-mix(in srgb,var(--sel-b, #6885E1) 10%,transparent),0 14px 38px color-mix(in srgb,var(--sel-b, #6885E1) 8%,transparent)}.cqg .cq__opt:hover .cq__dot{background:var(--sel-b, #6885E1);box-shadow:0 0 0 3px color-mix(in srgb,var(--sel-a, #93DDF9) 26%,transparent)}}.cqg .cq__opt:active{transform:scale(.994);border-color:color-mix(in srgb,var(--sel-b, #6885E1) 70%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sel-b, #6885E1) 38%,transparent),inset 0 1px #ffffff8c,0 2px 8px color-mix(in srgb,var(--sel-b, #6885E1) 12%,transparent);transition:transform .09s ease,border-color .09s ease,box-shadow .09s ease}.cqg .cq__opt:active .cq__dot{background:var(--sel-b, #6885E1)}.cqg .cq__opt:focus-visible{outline:2px solid var(--sel-b, #6885E1);outline-offset:2px}.cqg .cq__opt.is-on{background:linear-gradient(135deg,color-mix(in srgb,var(--sel-a, #93DDF9) 18%,transparent),color-mix(in srgb,var(--sel-b, #6885E1) 18%,transparent)),#fff;border-color:color-mix(in srgb,var(--sel-b, #6885E1) 80%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sel-b, #6885E1) 55%,transparent),inset 0 1px #fff9,0 6px 16px color-mix(in srgb,var(--sel-b, #6885E1) 12%,transparent),0 16px 44px color-mix(in srgb,var(--sel-b, #6885E1) 8%,transparent)}.cqg .cq__opt.is-on .cq__dot{background:linear-gradient(135deg,var(--sel-a, #93DDF9),var(--sel-b, #6885E1));box-shadow:0 0 0 3px color-mix(in srgb,var(--sel-a, #93DDF9) 30%,transparent),0 0 12px 1px color-mix(in srgb,var(--sel-a, #93DDF9) 60%,transparent)}.cqg .cq__note{margin:24px 0 0;padding-top:16px;border-top:1px solid rgba(20,18,16,.08);font-size:13px;line-height:1.6;font-style:italic;color:var(--ink-mute)}.cqg .cq__back{margin-top:20px;padding:0;border:0;background:none;font-family:inherit;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);cursor:pointer;transition:color .2s ease}.cqg .cq__back:before{content:"\2190\a0\a0"}.cqg .cq__back:hover{color:var(--ink)}.cqg .cq__lede{margin:14px 0 0;font-family:Libre Caslon Display,Georgia,serif;font-size:18px;line-height:1.42;color:var(--led)}.cqg .cq__story{margin-top:26px;display:grid;gap:17px}.cqg .cq__story-p{position:relative;margin:0;padding-left:32px;font-size:15px;line-height:1.62;color:var(--ink-soft)}.cqg .cq__story-n{position:absolute;left:0;top:.3em;font-size:10px;letter-spacing:.14em;color:var(--led)}.cqg .cq__form{margin-top:26px;display:grid;gap:15px}.cqg .cq__field{display:grid;gap:7px}.cqg .cq__field>span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}.cqg .cq__field em{font-style:normal;color:var(--ink-mute)}.cqg .cq__field input{width:100%;padding:15px 17px;border:1px solid rgba(20,18,16,.1);border-radius:12px;background:#ffffffc7;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-family:inherit;font-size:16px;color:var(--ink);box-shadow:0 2px 10px color-mix(in srgb,var(--led) 6%,transparent);transition:border-color .25s ease,box-shadow .25s ease}.cqg .cq__field input:focus{outline:none;background:#fff;border-color:color-mix(in srgb,var(--sel-b, #6885E1) 70%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sel-b, #6885E1) 40%,transparent),inset 0 1px #fff9,0 0 0 3px color-mix(in srgb,var(--sel-a, #93DDF9) 22%,transparent)}.cqg .cq__err{margin:0;font-size:14px;color:#a3251b}.cqg .cq__privacy{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-mute)}.cqg .cq__result{text-align:center}.cqg .cq__hello{margin:0 0 22px;font-size:14px;color:var(--ink-mute)}.cqg .cq__ring{position:relative;width:148px;height:148px;margin:0 auto}.cqg .cq__ring svg{width:100%;height:100%;transform:rotate(-90deg)}.cqg .cq__ring circle{fill:none;stroke-width:4;stroke-linecap:round}.cqg .cq__ring-bg{stroke:#14121014}.cqg .cq__ring-fg{stroke:var(--led);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--glow) 55%,transparent));transition:stroke-dasharray 1s cubic-bezier(.16,.84,.32,1)}.cqg .cq__ring-num{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:baseline;justify-content:center;gap:2px;font-family:Libre Caslon Display,Georgia,serif;font-size:44px;color:var(--ink)}.cqg .cq__ring-num i{font-style:normal;font-size:17px;color:var(--ink-mute)}.cqg .cq__result .cq__eyebrow{margin:22px 0 6px}.cqg .cq__band{margin:0;outline:none;font-family:Libre Caslon Display,Georgia,serif;font-weight:400;font-size:clamp(2rem,3.4vw,2.6rem);line-height:1.12;color:var(--ink)}.cqg .cq__band-body{margin:14px 0 0;font-size:15.5px;line-height:1.62;color:var(--ink-soft)}.cqg .cq__insights{margin:28px 0 0;padding:22px 24px;text-align:left;border:1px solid rgba(20,18,16,.07);border-radius:16px;background:#ffffffb3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 3px 14px color-mix(in srgb,var(--led) 8%,transparent),0 16px 46px color-mix(in srgb,var(--led) 7%,transparent)}.cqg .cq__insights h3{margin:0 0 14px;font-family:Libre Caslon Display,Georgia,serif;font-weight:400;font-size:16px;color:var(--ink)}.cqg .cq__insights ol{margin:0;padding-left:1.1em;display:grid;gap:13px}.cqg .cq__insights li{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}.cqg .cq__insights li::marker{color:var(--led);font-size:12px}.cqg .cq__strength{margin:20px 0 0;padding-left:16px;text-align:left;border-left:2px solid var(--led);font-size:15px;line-height:1.6;color:var(--ink-soft)}.cqg .cq__strength span{display:block;margin-bottom:5px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--led)}.cqg .cq__profile{margin:20px 0 0;text-align:left;font-size:14.5px;line-height:1.62;color:var(--ink-mute)}.cqg .cq__next{margin:32px 0 0;font-family:Libre Caslon Display,Georgia,serif;font-weight:400;font-size:clamp(1.4rem,2.3vw,1.85rem);line-height:1.2;color:var(--ink)}.cqg .cq__retake{display:block;margin:20px auto 0;padding:0;border:0;background:none;font-family:inherit;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);text-decoration:underline;text-underline-offset:4px;cursor:pointer}.cqg .cq__retake:hover{color:var(--ink)}@keyframes cqgRise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.cqg .cq__view.is-out{opacity:0;transition:opacity .28s ease}.cqg .cq__view.is-in>*{opacity:0;animation:cqgRise .6s cubic-bezier(.16,.84,.32,1) forwards}.cqg .cq__view.is-in .cq__prog{animation-delay:0s}.cqg .cq__view.is-in .cq__q{animation-delay:.06s}.cqg .cq__view.is-in .cq__sub,.cqg .cq__view.is-in .cq__lede{animation-delay:.12s}.cqg .cq__view.is-in .cq__opts,.cqg .cq__view.is-in .cq__story,.cqg .cq__view.is-in .cq__form{animation:none;opacity:1}.cqg .cq__view.is-in .cq__note,.cqg .cq__view.is-in .cq__back{animation-delay:.44s}.cqg .cq__view.is-in .cq__opt,.cqg .cq__view.is-in .cq__story-p,.cqg .cq__view.is-in .cq__field{opacity:0;animation:cqgRise .56s cubic-bezier(.16,.84,.32,1) forwards;animation-delay:calc(.16s + var(--i, 0) * .07s)}@media(max-width:720px){.cqg__stage{padding-left:22px;padding-right:22px}.cqg__head{font-size:clamp(2.1rem,9vw,2.9rem)}.cqg .cq__cta{width:100%}.cqg .cq__opt{padding:16px 18px;font-size:15.5px}.cqg .cq__ring{width:128px;height:128px}.cqg .cq__ring-num{font-size:38px}}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.cqg__smoke{background:linear-gradient(180deg,#0b0906b8,#0b0906d1)}.cqg__frost,.cqg .cq__opt,.cqg .cq__insights,.cqg .cq__field input{background:#fff}.cqg .cq__cta{background:#ffffff29}}@media(prefers-reduced-motion:reduce){.cqg__photo,.cqg__smoke,.cqg__sheen,.cqg__frost{transition:none}.cqg .cq__view.is-in>*,.cqg .cq__view.is-in .cq__opt,.cqg .cq__view.is-in .cq__story-p,.cqg .cq__view.is-in .cq__field{animation:none;opacity:1}.cqg .cq__prog-fill,.cqg .cq__opt,.cqg .cq__cta,.cqg .cq__ring-fg,.cqg .cq__opt:active{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/27/assets/charm-quiz-glass.css.map?v=66731590841252585301786460160 */


/* charm-quiz-ring.css */
.cq__ring{position:relative;width:var(--ring-size, 216px);height:var(--ring-size, 216px);margin:0 auto}.cq__ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}.cq__ring circle{fill:none}.cq__ring-track{stroke:#eeeae4;stroke-width:5}.cq__ring-bleed{stroke:#1b6fdd;stroke-width:11;opacity:.42;filter:blur(13px)}.cq__ring-body{stroke:url(#cqArcGrad);stroke-width:5}@keyframes cqRingFill{0%{stroke-dashoffset:var(--circ)}to{stroke-dashoffset:var(--target)}}.cq__ring-bleed,.cq__ring-body{stroke-dasharray:var(--circ);stroke-dashoffset:var(--circ);animation:cqRingFill 1.35s cubic-bezier(.16,.84,.32,1) .2s forwards}.cq__ring-num{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-family:Libre Caslon Display,Georgia,serif;color:var(--ink, #141210);letter-spacing:-.025em}.cq__ring-num b{position:relative;font-weight:400;font-size:var(--ring-num, 78px);line-height:1}.cq__ring-num i{position:absolute;left:100%;bottom:.14em;margin-left:.04em;font-style:normal;font-size:20px;letter-spacing:0;color:#9c968f}@media(max-width:720px){.cq__ring{--ring-size: 178px;--ring-num: 64px}.cq__ring-num i{font-size:17px}}@media(prefers-reduced-motion:reduce){.cq__ring-bleed,.cq__ring-body{animation:none;stroke-dashoffset:var(--target)}}@property --cqp{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.cqg .cq__steps .cq__step .cq__stepdot{position:relative;flex:0 0 auto;width:var(--cqr-size, 26px);height:var(--cqr-size, 26px);border-radius:50%;background:transparent;border:var(--cqr-w, 2px) solid rgba(20,18,16,.1);box-shadow:none;overflow:visible;transition:border-color .4s cubic-bezier(.16,1,.3,1)}.cqg .cq__steps .cq__step .cq__stepdot:before{content:"";position:absolute;inset:calc(-1 * var(--cqr-w, 2px));border-radius:50%;opacity:0;background:conic-gradient(from -90deg,var(--sel-a, #93DDF9) 0deg,var(--sel-b, #6885E1) 180deg,var(--sel-a, #93DDF9) 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--cqr-w, 2px) - var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-w, 2px) + var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-aa, .75px)),transparent 100%),conic-gradient(from -90deg,#000 var(--cqp),transparent var(--cqp));mask:radial-gradient(farthest-side,transparent calc(100% - var(--cqr-w, 2px) - var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-w, 2px) + var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-aa, .75px)),transparent 100%),conic-gradient(from -90deg,#000 var(--cqp),transparent var(--cqp));-webkit-mask-composite:source-in;mask-composite:intersect}.cqg .cq__steps .cq__step .cq__stepdot:after{content:"";position:absolute;left:33%;top:15%;width:28%;height:52%;border:solid var(--sel-b, #6885E1);border-width:0 var(--cqr-w, 2px) var(--cqr-w, 2px) 0;border-radius:1px;transform:rotate(45deg) scale(0);transform-origin:50% 50%;opacity:0}@keyframes cqStepArc{0%{--cqp: 0deg}to{--cqp: 360deg}}@keyframes cqStepCheck{0%{transform:rotate(45deg) scale(0);opacity:0}55%{transform:rotate(45deg) scale(1.14);opacity:1}to{transform:rotate(45deg) scale(1);opacity:1}}@keyframes cqStepHalo{0%{box-shadow:0 0 color-mix(in srgb,var(--sel-a, #93DDF9) 40%,transparent)}to{box-shadow:0 0 14px 2px color-mix(in srgb,var(--sel-a, #93DDF9) calc(var(--cqr-glow, .55) * 100%),transparent)}}.cqg .cq__steps .cq__step.is-active .cq__stepdot{border-color:#14121012;animation:cqStepHalo var(--cqr-dur, 1.05s) cubic-bezier(.16,1,.3,1) forwards}.cqg .cq__steps .cq__step.is-active .cq__stepdot:before{opacity:1;animation:cqStepArc var(--cqr-dur, 1.05s) cubic-bezier(.16,1,.3,1) forwards}.cqg .cq__steps .cq__step.is-active .cq__stepdot:after{animation:cqStepCheck calc(var(--cqr-dur, 1.05s) * .34) cubic-bezier(.16,1,.3,1) calc(var(--cqr-dur, 1.05s) * .88) forwards}.cqg .cq__steps .cq__step.is-done .cq__stepdot{border-color:transparent;background:color-mix(in srgb,var(--sel-a, #93DDF9) 14%,transparent);box-shadow:0 0 12px 1px color-mix(in srgb,var(--sel-a, #93DDF9) calc(var(--cqr-glow, .55) * 70%),transparent);animation:none}.cqg .cq__steps .cq__step.is-done .cq__stepdot:before{opacity:1;--cqp: 360deg;animation:none}.cqg .cq__steps .cq__step.is-done .cq__stepdot:after{transform:rotate(45deg) scale(1);opacity:1;animation:none}@supports not ((mask-composite: intersect) or (-webkit-mask-composite: source-in)){.cqg .cq__steps .cq__step.is-active .cq__stepdot:before,.cqg .cq__steps .cq__step.is-done .cq__stepdot:before{opacity:1;animation:none;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--cqr-w, 2px) - var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-w, 2px) + var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-aa, .75px)),transparent 100%);mask:radial-gradient(farthest-side,transparent calc(100% - var(--cqr-w, 2px) - var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-w, 2px) + var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-aa, .75px)),transparent 100%)}}@media(max-width:720px){.cqg .cq__steps .cq__step .cq__stepdot{--cqr-size: 24px}}@media(prefers-reduced-motion:reduce){.cqg .cq__steps .cq__step .cq__stepdot,.cqg .cq__steps .cq__step .cq__stepdot:before,.cqg .cq__steps .cq__step .cq__stepdot:after{animation:none!important}.cqg .cq__steps .cq__step.is-active .cq__stepdot:before{opacity:1;--cqp: 360deg}.cqg .cq__steps .cq__step.is-active .cq__stepdot:after{transform:rotate(45deg) scale(1);opacity:1}}
/*# sourceMappingURL=/cdn/shop/t/27/assets/charm-quiz-ring.css.map?v=109751391929888209961786460162 */


/* inline block 9 */

  .cqg { --led-lite: #6FB6FF; --led-deep: #0148A3; --cq-act-h: 55px;
         --gold-lite: #DCC08A; --gold-deep: #8C6B2F;
         --cq-hair: linear-gradient(90deg,
           transparent 0%,
           color-mix(in srgb, var(--led-lite) 16%, transparent) 16%,
           color-mix(in srgb, var(--led-lite) 52%, transparent) 33%,
           color-mix(in srgb, var(--led) 92%, transparent) 50%,
           color-mix(in srgb, var(--led-lite) 52%, transparent) 67%,
           color-mix(in srgb, var(--led-lite) 16%, transparent) 84%,
           transparent 100%); }

  .cqg__smoke {
    backdrop-filter: blur(9px) saturate(112%);
    -webkit-backdrop-filter: blur(9px) saturate(112%);
    background:
      radial-gradient(120% 95% at 50% 42%, rgba(18,12,4,.20) 0%, rgba(14,10,4,.46) 52%, rgba(9,7,4,.68) 100%),
      linear-gradient(180deg, rgba(9,7,4,.34) 0%, rgba(9,7,4,.06) 40%, rgba(9,7,4,.46) 100%);
  }
  .cqg__sheen { background: radial-gradient(70% 48% at 50% 6%, rgba(255,246,226,.20) 0%, rgba(255,246,226,0) 66%); }
  .cqg__inner { position: relative; }

  .cqg:not([data-cq-running]) .cqg__stage::before {
    content: "";
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(46% 40% at 50% 48%, rgba(8,6,3,.56) 0%, rgba(8,6,3,.36) 45%, rgba(8,6,3,0) 78%);
  }

  /* 13. Running screens anchor to the top of the stage. The hero keeps its centring. */
  .cqg[data-cq-running] .cqg__stage {
    align-items: flex-start;
    padding-top: calc(var(--qapp-bar-h, 68px) + clamp(26px, 4.5vh, 56px));
    padding-bottom: clamp(40px, 7vh, 84px);
  }

  /* ---------- opening screen. 18K GOLD, see note 14 ---------- */
  .cqg:not([data-cq-running]) .cqg__eyebrow {
    color: var(--gold-lite);
    display: flex; align-items: center; justify-content: center; gap: 12px;
  }
  .cqg:not([data-cq-running]) .cqg__eyebrow::before,
  .cqg:not([data-cq-running]) .cqg__eyebrow::after {
    content: ""; width: clamp(24px, 5vw, 54px); height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-lite));
  }
  .cqg:not([data-cq-running]) .cqg__eyebrow::after { transform: scaleX(-1); }

  /* 9. WHITE, not accent. Emphasis now comes from light rather than colour. Same
     selector as charm-quiz-glass.css (0,1,1), later in the document, so it wins. */
  .cqg__head em {
    font-style: normal;
    color: #FFFFFF;
    text-shadow: 0 0 34px rgba(255,255,255,.26), 0 1px 40px rgba(0,0,0,.35);
  }
  .cqg:not([data-cq-running]) .cqg__lede  { color: rgba(255,255,255,.92); }
  .cqg:not([data-cq-running]) .cqg__trust { color: rgba(255,255,255,.78); }
  /* 14c. the vertical rule between the two trust lines. 1px wide, 10px tall. */
  .cqg:not([data-cq-running]) .cqg__trust li + li::before { background: var(--gold-lite); opacity: .6; }

  .cqg:not([data-cq-running]) .cq__cta {
    border-color: color-mix(in srgb, var(--gold-lite) 55%, transparent);
    background: color-mix(in srgb, var(--gold-lite) 13%, rgba(255,255,255,.06));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-lite) 12%, transparent),
                0 10px 46px color-mix(in srgb, var(--gold-deep) 40%, transparent);
  }
  @media (hover: hover) and (pointer: fine) {
    .cqg:not([data-cq-running]) .cq__cta:hover {
      border-color: var(--gold-lite);
      background: color-mix(in srgb, var(--gold-lite) 22%, rgba(255,255,255,.10));
      box-shadow: 0 12px 56px color-mix(in srgb, var(--gold-lite) 36%, transparent);
    }
  }
  .cqg:not([data-cq-running]) .cq__cta.is-press {
    border-color: var(--gold-lite);
    box-shadow: 0 6px 30px color-mix(in srgb, var(--gold-lite) 44%, transparent),
                0 0 60px color-mix(in srgb, var(--gold-deep) 26%, transparent);
  }

  /* ---------- running. BLUE, unchanged ---------- */
  .cqg[data-cq-running] .cq__prog-row span:last-child { color: var(--led); font-weight: 600; }
  .cqg[data-cq-running] .cq__prog-track { background: color-mix(in srgb, var(--led) 10%, transparent); }

  /* 11 + 15. CURRENT - centred hairline, proportional to the column. The true accent
     sits at the midpoint at full strength and falls away through light azure to
     nothing at both ends, so the mark reads as a point of light rather than a bar. */
  .cqg[data-cq-running] .cq__q::after {
    content: ""; display: block;
    width: clamp(170px, 62%, 380px); height: 1px; margin: 26px auto 0;
    background: var(--cq-hair);
    border-radius: 999px;
  }
  /* 11. BACKUP v1 - the original 34x2px accent stub. */
  .cqg[data-cq-dash="v1"][data-cq-running] .cq__q::after {
    width: 34px; height: 2px; margin: 18px 0 0;
    background: linear-gradient(90deg, var(--led), color-mix(in srgb, var(--led-2) 60%, transparent));
  }
  /* 11. BACKUP v2 - the 72px left aligned dissolve. */
  .cqg[data-cq-dash="v2"][data-cq-running] .cq__q::after {
    width: 72px; height: 1px; margin: 20px 0 0;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--led) 88%, transparent) 0%,
      color-mix(in srgb, var(--led) 34%, transparent) 44%,
      transparent 100%);
  }

  .cqg .cq__opt {
    box-shadow: 0 2px 10px color-mix(in srgb, var(--led) 10%, transparent),
                0 12px 34px color-mix(in srgb, var(--led) 9%, transparent);
  }
  .cqg .cq__opt .cq__dot { background: color-mix(in srgb, var(--led) 26%, transparent); }
  .cqg .cq__note { border-top-color: color-mix(in srgb, var(--led) 14%, transparent); }

  /* ---------- 10 + 12. THE ACTION ROW ----------
     REST: neutral. White glass, ink type, neutral hairline, no blue anywhere in or on
     the button. The selector matches charm-quiz-glass.css exactly, so document order
     decides rather than specificity. */
  .cqg[data-cq-running] .cq__cta {
    display: flex;
    height: var(--cq-act-h);
    margin: 52px auto 0;
    background: rgba(255,255,255,.62);
    border-color: rgba(20,18,16,.12);
    color: var(--ink);
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.6),
      0 6px 20px rgba(20,18,16,.06);
    transition: box-shadow .38s ease, border-color .38s ease, translate .18s ease;
  }
  /* Back stays plain text, pulled up onto the Continue row and left aligned. Scoped
     with :has() to views that carry both controls, so a question screen with only a
     Back link is untouched. Browsers without :has() get Back below Continue, still on
     the left, which is correct, just not on one line. */
  .cqg[data-cq-running] .cq__view:has(.cq__cta) .cq__back {
    display: flex; align-items: center; width: max-content;
    height: var(--cq-act-h); margin: calc(-1 * var(--cq-act-h)) 0 0;
    padding: 0; border: 0; background: none; box-shadow: none;
    color: var(--ink-mute); position: relative; z-index: 1;
  }
  /* HOVER and PRESS: the fill never changes. The only thing that happens is an outer
     accent glow and the faintest lift in the hairline. */
  @media (hover: hover) and (pointer: fine) {
    .cqg[data-cq-running] .cq__cta:hover {
      border-color: color-mix(in srgb, var(--led) 24%, transparent);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.6),
        0 8px 24px color-mix(in srgb, var(--led) 20%, transparent),
        0 0 38px color-mix(in srgb, var(--glow) 20%, transparent);
    }
    .cqg[data-cq-running] .cq__view:has(.cq__cta) .cq__back:hover { color: var(--ink); }
  }
  /* A phone never fires :hover, so the glow is driven by a class set on pointerdown.
     :active is the no-JS fallback. The nudge uses the independent translate property,
     not transform: the cqgRise entrance animation ends on transform: none with fill
     forwards, and an animation beats a normal declaration, so a transform here would
     be silently discarded. */
  .cqg[data-cq-running] .cq__cta:active,
  .cqg[data-cq-running] .cq__cta.is-press {
    translate: 0 1px;
    border-color: color-mix(in srgb, var(--led) 38%, transparent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.6),
      0 6px 20px color-mix(in srgb, var(--led) 28%, transparent),
      0 0 46px color-mix(in srgb, var(--glow) 30%, transparent);
  }
  .cqg[data-cq-running] .cq__cta:focus-visible {
    outline: 2px solid var(--led); outline-offset: 3px;
  }

  /* ---------- ring ---------- */
  .cqg .cq__ring { --ring-size: 216px; --ring-num: 78px; width: var(--ring-size); height: var(--ring-size); filter: none; }
  .cqg .cq__ring svg circle.cq__ring-track { stroke: #EEEAE4; stroke-width: 5; }
  .cqg .cq__ring svg circle.cq__ring-bleed { stroke: #1B6FDD; stroke-width: 11; opacity: .42; filter: blur(13px); }
  .cqg .cq__ring svg circle.cq__ring-body  { stroke: url(#cqArcGrad); stroke-width: 5; }
  .cqg .cq__ring-num { display: grid; place-items: center; gap: 0; font-size: inherit; }
  .cqg .cq__ring-num b { position: relative; font-size: var(--ring-num); line-height: 1; }
  .cqg .cq__ring-num i { position: absolute; left: 100%; bottom: .14em; margin-left: .04em; font-size: 20px; color: #9C968F; }
  @media (max-width: 720px) {
    .cqg .cq__ring { --ring-size: 178px; --ring-num: 64px; }
    .cqg .cq__ring-num i { font-size: 17px; }
  }

  .cqg .cq__code {
    margin: 34px 0 0;
    font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; color: #B8B3AC;
  }

  /* ================= 16 + 18. THE RESULT SCREEN ================= */
  /* The only screen that widens past the reading measure. */
  .cqg[data-cq-result] .cqg__inner,
  .cqg[data-cq-result] .cq__view { max-width: min(1080px, 92vw); width: 100%; }

  .cqg[data-cq-result] .cq__hello { text-align: center; margin-bottom: clamp(28px, 3.4vw, 44px); }

  /* 18a. centre, not start. The two columns are never the same height and hanging
     them both from the top left the largest type on the page stranded. */
  .cq__rgrid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(30px, 4.2vw, 64px);
    align-items: center;
  }
  .cq__rcol { min-width: 0; text-align: left; }

  /* left. Bigger ring, optically left aligned to the type beneath it. See note 17:
     the negative margin is the SVG's own 9.77% padding, expressed as a fraction of
     --ring-size so it survives a resize. */
  .cqg[data-cq-result] .cq__rcol--score .cq__ring {
    --ring-size: 264px; --ring-num: 96px;
    margin: 0 0 0 calc(var(--ring-size) * -0.0977);
  }
  /* 18b. tight to the ring, so label and band read as one unit with it. */
  .cqg[data-cq-result] .cq__rcol--score .cq__eyebrow {
    margin: clamp(20px, 2.2vw, 28px) 0 8px; text-align: left;
  }
  .cqg[data-cq-result] .cq__rcol--score .cq__band { text-align: left; margin: 0; }
  .cqg[data-cq-result] .cq__rcol--score .cq__band-body { margin: 14px 0 0; text-align: left; }

  /* right. White glass card, blue shadow thrown UPWARD. Keep the negative Y. */
  .cqg[data-cq-result] .cq__insights {
    margin: 0;
    background: rgba(255,255,255,.58);
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
    border: 1px solid rgba(20,18,16,.07);
    border-radius: 16px;
    padding: clamp(24px, 2.6vw, 34px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      0 -6px 26px color-mix(in srgb, var(--led) 9%, transparent),
      0 14px 38px color-mix(in srgb, var(--led) 7%, transparent);
  }
  .cqg[data-cq-result] .cq__strength {
    margin: clamp(20px, 2.4vw, 30px) 0 0; padding: 0 0 0 16px;
    border-left: 1px solid color-mix(in srgb, var(--led) 30%, transparent);
    text-align: left;
  }
  .cqg[data-cq-result] .cq__strength span {
    display: block; margin-bottom: 7px;
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--led-deep);
  }

  /* below. One centred closing block, separated by the same hairline the questions
     use. See note 18c: margin is the air ABOVE the rule, padding is the air BELOW. */
  .cq__close {
    position: relative; text-align: center; max-width: 600px;
    margin: clamp(54px, 5vw, 78px) auto 0;
    padding-top: clamp(40px, 4vw, 58px);
  }
  .cq__close::before {
    content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
    width: clamp(170px, 62%, 380px); height: 1px;
    background: var(--cq-hair); border-radius: 999px;
  }
  .cqg[data-cq-result] .cq__close .cq__profile { margin: 0 0 clamp(22px, 2.6vw, 32px); color: var(--ink-soft); }
  .cqg[data-cq-result] .cq__close .cq__next { margin: 0; }
  .cqg[data-cq-result] .cq__close .cq__band-body { margin: 14px auto 0; }
  .cqg[data-cq-result] .cq__close .cq__cta { margin-top: clamp(30px, 3.4vw, 40px); }

  /* Plain text links. Same treatment the retake control already had. */
  .cq__links {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: 12px 28px; margin: clamp(26px, 3vw, 34px) 0 0;
  }
  .cqg[data-cq-result] .cq__textlink {
    display: inline; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
    font-family: inherit; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-mute); text-decoration: underline; text-underline-offset: 4px;
    cursor: pointer; transition: color .2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .cqg[data-cq-result] .cq__textlink:hover { color: var(--ink); }
  }
  .cqg[data-cq-result] .cq__textlink:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; }
  .cqg[data-cq-result] .cq__code { text-align: center; }

  /* One column once two will not fit. The ring centres again, so the note 17 negative
     margin is reset here or it would hang off the left edge. */
  @media (max-width: 900px) {
    .cq__rgrid { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 44px); align-items: start; }
    .cqg[data-cq-result] .cq__rcol--score { text-align: center; }
    .cqg[data-cq-result] .cq__rcol--score .cq__ring { margin: 0 auto; }
    .cqg[data-cq-result] .cq__rcol--score .cq__eyebrow,
    .cqg[data-cq-result] .cq__rcol--score .cq__band,
    .cqg[data-cq-result] .cq__rcol--score .cq__band-body { text-align: center; }
  }
  @media (max-width: 720px) {
    .cqg[data-cq-result] .cq__rcol--score .cq__ring { --ring-size: 200px; --ring-num: 72px; }
  }

  /* ---------- phone ----------
     charm-quiz-glass.css makes the button full width below 720px, so there is no room
     beside it. Back returns to the flow, directly under Continue, still on the left. */
  @media (max-width: 720px) {
    .cqg[data-cq-running] .cqg__stage {
      padding-top: calc(var(--qapp-bar-h, 68px) + 22px);
    }
    .cqg[data-cq-running] .cq__cta { margin-top: 38px; }
    .cqg[data-cq-running] .cq__view:has(.cq__cta) .cq__back {
      height: auto; margin: 18px 0 0;
    }
  }


/* inline block 10 */

  :root {
    --led: #015CCF;
    --led-2: #355BFF;
    --glow: #6CE0FB;
    --cq-feather: 64px;
    --cq-feather-hover: 77px;
    --cq-feather-press: 45px;
    --cq-halo: 11%;
    --cq-halo-hover: 15%;
    --cq-halo-press: 17%;
    --sel-a: #93DDF9;
    --sel-b: #6885E1;
    --cqr-size: 26px;
    --cqr-w: 2px;
    --cqr-dur: 1.05s;
    --cqr-glow: 0.55;
    --cqr-aa: 0.75px;
  }
  /* S28. The phone size is a DECLARATION ON THE ELEMENT, so it beats the inherited :root
     value. charm-quiz-ring.css carries its own 24px phone rule; this one is later in the
     document at equal specificity, so this wins and the control reaches phones. */
  @media (max-width: 720px) {
    .cqg .cq__steps .cq__step .cq__stepdot { --cqr-size: 24px; }
  }


/* inline block 11 */

  /* ============ 1. THE BUTTON ============
     background is declared in ALL THREE states on purpose. Do not remove it from any
     of them: an unstated background is what let the older file fill this blue.
     Every glow number is var(--name, fallback). Do not hardcode one back in. */
  .cqg[data-cq-running] .cq__cta {
    background: rgba(255,255,255,.62);
    color: var(--ink);
    border-color: color-mix(in srgb, var(--led) 26%, transparent);
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.6),
      0 0 0 1px color-mix(in srgb, var(--led) 10%, transparent),
      0 10px var(--cq-feather, 64px) color-mix(in srgb, var(--led-deep) var(--cq-halo, 11%), transparent);
  }
  @media (hover: hover) and (pointer: fine) {
    .cqg[data-cq-running] .cq__cta:hover {
      background: rgba(255,255,255,.62);
      color: var(--ink);
      border-color: color-mix(in srgb, var(--led) 62%, transparent);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.6),
        0 0 0 1px color-mix(in srgb, var(--led) 16%, transparent),
        0 12px var(--cq-feather-hover, 77px) color-mix(in srgb, var(--led-deep) var(--cq-halo-hover, 15%), transparent),
        0 0 var(--cq-feather, 64px) color-mix(in srgb, var(--glow) var(--cq-halo, 11%), transparent);
    }
  }
  .cqg[data-cq-running] .cq__cta:active,
  .cqg[data-cq-running] .cq__cta.is-press {
    background: rgba(255,255,255,.62);
    color: var(--ink);
    translate: 0 1px;
    border-color: color-mix(in srgb, var(--led) 62%, transparent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.6),
      0 6px var(--cq-feather-press, 45px) color-mix(in srgb, var(--led) var(--cq-halo-press, 17%), transparent),
      0 0 var(--cq-feather-hover, 77px) color-mix(in srgb, var(--glow) var(--cq-halo-hover, 15%), transparent);
  }
  /* A disabled Continue is dimmed and loses the halo. It must not read as pressable. */
  .cqg[data-cq-running] .cq__cta[disabled] {
    opacity: .42; cursor: not-allowed;
    border-color: rgba(20,18,16,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  }

  /* ============ 2. TEXT, DATE AND TEXTAREA ============
     Same glass as the option cards so the flow does not change material halfway. */
  .cqg .cq__inputwrap { margin-top: 26px; }
  .cqg .cq__input {
    width: 100%; padding: 17px 20px;
    border: 1px solid rgba(20,18,16,.08); border-radius: 14px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    font-family: inherit; font-size: 16px; line-height: 1.5; color: var(--ink);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--led) 8%, transparent),
                0 12px 34px color-mix(in srgb, var(--led) 6%, transparent);
    transition: border-color .28s ease, box-shadow .28s ease, background-color .28s ease;
  }
  .cqg .cq__input--area { min-height: 168px; resize: vertical; }
  .cqg .cq__input::placeholder { color: var(--ink-mute); }
  .cqg .cq__input:focus {
    outline: none; background: #FFFFFF;
    border-color: color-mix(in srgb, var(--led) 40%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--led) 12%, transparent),
                0 12px 38px color-mix(in srgb, var(--led) 12%, transparent);
  }
  /* Safari renders a date input at the wrong height without this. */
  .cqg .cq__input[type="date"] { min-height: 57px; -webkit-appearance: none; appearance: none; }

  /* ============ 2b. MULTI SELECT ============
     A square mark, not a round dot, so a reader can see at a glance that more than one
     answer is allowed. Same colours, different geometry. */
  .cqg .cq__opt[role="checkbox"] .cq__dot { border-radius: 3px; width: 15px; height: 15px; }
  .cqg .cq__opt[role="checkbox"].is-on .cq__dot {
    background: var(--led);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--led) 18%, transparent),
                0 0 12px 1px color-mix(in srgb, var(--glow) 60%, transparent);
  }

  /* ============ 2c. STORY BREAK IMAGE ============
     aspect-ratio plus object-fit, because the Lovable build used a fixed-height box
     and its first break renders with the photo filling only the top 40%. */
  .cqg .cq__storyimg {
    margin: 24px 0 0; border-radius: 16px; overflow: hidden;
    box-shadow: 0 3px 14px color-mix(in srgb, var(--led) 8%, transparent),
                0 18px 46px color-mix(in srgb, var(--led) 7%, transparent);
  }
  .cqg .cq__storyimg img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

  /* ============ 2d. ANALYSING SCREEN ============ */
  .cqg[data-cq-analysing] .cqg__stage { align-items: center; }
  .cqg .cq__analyse { text-align: center; }
  .cqg .cq__analyse .cq__q { text-align: center; }
  .cqg .cq__steps {
    margin: 40px auto 0; padding: 0; list-style: none;
    display: grid; gap: 20px; width: max-content; max-width: 100%; text-align: left;
  }
  .cqg .cq__step {
    display: flex; align-items: center; gap: 14px;
    font-family: 'Libre Caslon Display', Georgia, serif; font-size: 17px;
    color: var(--ink-mute); opacity: .45;
    transition: opacity .5s ease, color .5s ease;
  }
  .cqg .cq__stepdot {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid rgba(20,18,16,.14); background: rgba(255,255,255,.6);
    transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
  }
  .cqg .cq__step.is-active { opacity: 1; color: var(--ink); }
  .cqg .cq__step.is-active .cq__stepdot {
    border-color: var(--led);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--led) 14%, transparent),
                0 0 16px 2px color-mix(in srgb, var(--glow) 55%, transparent);
  }
  .cqg .cq__step.is-done { opacity: 1; color: var(--ink); }
  .cqg .cq__step.is-done .cq__stepdot {
    background: var(--led); border-color: var(--led);
    box-shadow: 0 0 14px 1px color-mix(in srgb, var(--glow) 50%, transparent);
  }

  /* ============ 3. THE REFLECTION PROFILE ============
     One centred column that scrolls, as asked. */
  .cqg[data-cq-result] .cqg__stage { align-items: flex-start; }
  .cqg[data-cq-result] .cqg__inner,
  .cqg[data-cq-result] .cq__view { max-width: min(760px, 92vw); width: 100%; margin: 0 auto; }
  .cqg .cq__result { text-align: center; }

  .cqg .cq__hero .cq__eyebrow {
    margin: 0 0 14px; color: var(--ink-mute);
    font-size: 11px; letter-spacing: .3em;
  }
  .cqg .cq__hero .cq__eyebrow--soft { margin-bottom: 18px; opacity: .8; }

  /* S13. The reader's name, on top, centred, in the accent. Starts at --led, not
     --glow, which measures 1.53:1 on white and disappears at this size. */
  .cqg .cq__name {
    margin: 0 0 10px; text-align: center;
    font-size: 13px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
    background: linear-gradient(90deg, var(--led) 0%, var(--led-2) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }

  /* The profile name is the product. It is the largest thing on the page and the only
     place the accent is allowed to become type, because it sits on white at display
     size where the gradient still resolves.
     The --glow start stop is LEFT ALONE here on purpose. See the header note. */
  .cqg .cq__title {
    margin: 0 0 18px; outline: none; padding-bottom: .12em;
    font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400;
    font-size: clamp(2.6rem, 6vw, 3.4rem); line-height: 1.18; letter-spacing: -.02em;
    background: linear-gradient(90deg, var(--glow) 0%, var(--led-2) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-wrap: balance;
  }
  .cqg .cq__modeline { margin: 0 0 38px; font-size: 14.5px; color: var(--ink-mute); }
  .cqg .cq__modeline span { color: var(--ink); }

  .cqg .cq__introcopy { display: grid; gap: 16px; max-width: 34em; margin: 0 auto; }
  .cqg .cq__introcopy p {
    margin: 0; font-family: 'Libre Caslon Display', Georgia, serif;
    font-size: clamp(1.1rem, 1.7vw, 1.32rem); line-height: 1.52; color: var(--ink-soft);
  }
  .cqg .cq__hint {
    margin: 34px auto 0; max-width: 32em;
    font-size: 14px; line-height: 1.6; color: var(--ink-mute);
  }

  /* ============ S13. THE 30 DAY REFLECTION CAPTURE ============
     Sits directly under .cq__hint in the hero, which is where he asked for it.
     The button is a plain .cq__cta and inherits the measured spec exactly: 55px tall,
     19/42 padding, 999px radius, EB Garamond 10.5px 600 at 2.73px tracking, uppercase,
     rgba(255,255,255,.62) glass, blur(18px) saturate(118%). Nothing here re-declares
     any of those. His instruction was to read the values off the other buttons rather
     than invent new ones, and reusing the class IS reading them.

     The box is inline, not a modal. A modal needs a scrim, a scroll lock and a focus
     trap, and every one of those is a chance to look like a plugin. Inline stays glass. */
  .cqg .cq__r30 { margin: clamp(30px, 3.4vw, 40px) 0 0; }
  .cqg[data-cq-result] .cq__r30 .cq__cta { margin: 0 auto; }

  .cqg .cq__r30-box {
    max-width: 460px; margin: 0 auto; padding: 26px 26px 22px;
    border: 1px solid rgba(20,18,16,.07); border-radius: 18px;
    background: rgba(255,255,255,.58);
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      0 -6px 26px color-mix(in srgb, var(--led) 7%, transparent),
      0 14px 38px color-mix(in srgb, var(--led) 6%, transparent);
    animation: cqR30In .42s cubic-bezier(.22,.61,.36,1) both;
  }
  @keyframes cqR30In {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  .cqg .cq__r30-label {
    display: block; margin: 0 0 12px; text-align: center;
    font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-mute);
  }
  .cqg .cq__r30-row { display: grid; gap: 12px; }
  .cqg .cq__r30-input { text-align: center; font-size: 15.5px; }
  .cqg[data-cq-result] .cq__r30-row .cq__cta { width: 100%; margin: 0; }
  .cqg .cq__r30-box .cq__err { margin: 12px 0 0; text-align: center; }

  /* The confirmation. Interpretive, not a receipt. No exclamation mark anywhere.
     Gradient starts at --led. At 27px in a 460px box the copy fills the box, so the
     glyphs sample the WHOLE gradient including its left end, where --glow measured
     1.53:1 on white and read as washed out. */
  .cqg .cq__r30-done {
    max-width: 460px; margin: 0 auto;
    animation: cqR30In .52s cubic-bezier(.22,.61,.36,1) both;
  }
  .cqg .cq__r30-donetitle {
    margin: 0 0 12px;
    font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.25;
    background: linear-gradient(90deg, var(--led) 0%, var(--led-2) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .cqg .cq__r30-donebody {
    margin: 0; font-family: 'Libre Caslon Display', Georgia, serif;
    font-size: clamp(1.02rem, 1.6vw, 1.16rem); line-height: 1.55; color: var(--ink-soft);
  }

  /* The same centred hairline the questions use. One language, not two. */
  .cqg .cq__rule {
    width: clamp(170px, 46%, 380px); height: 1px; margin: clamp(52px, 6vw, 80px) auto;
    background: var(--cq-hair); border-radius: 999px;
  }

  .cqg .cq__sec { text-align: left; }
  .cqg .cq__sec--mid { text-align: center; }
  .cqg .cq__sech {
    margin: 0 0 clamp(26px, 3vw, 40px); text-align: center;
    font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.18; color: var(--ink);
    text-wrap: balance;
  }

  .cqg .cq__pgrid { display: grid; gap: 16px; }
  .cqg .cq__pcard {
    padding: clamp(24px, 2.8vw, 34px); text-align: left;
    border: 1px solid rgba(20,18,16,.07); border-radius: 18px;
    background: rgba(255,255,255,.58);
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      0 -6px 26px color-mix(in srgb, var(--led) 9%, transparent),
      0 14px 38px color-mix(in srgb, var(--led) 7%, transparent);
  }
  .cqg .cq__revlabel {
    margin: 0 0 12px; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--ink-mute);
  }
  .cqg .cq__ptitle {
    margin: 0 0 12px; font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; color: var(--ink);
  }
  .cqg .cq__pbody { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }

  /* Quoted answers. The reader's own words, so they get the accent rule and the serif. */
  .cqg .cq__rev { margin: 0 0 clamp(36px, 4vw, 52px); text-align: left; }
  .cqg .cq__quote {
    margin: 0 0 18px; padding: 2px 0 2px 20px;
    border-left: 2px solid color-mix(in srgb, var(--led) 42%, transparent);
    font-family: 'Libre Caslon Display', Georgia, serif; font-style: italic;
    font-size: clamp(1.1rem, 1.8vw, 1.32rem); line-height: 1.5; color: var(--ink);
    overflow-wrap: break-word;
  }
  .cqg .cq__quote::before { content: "\201C"; }
  .cqg .cq__quote::after { content: "\201D"; }
  .cqg .cq__revbody { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--ink-soft); }
  .cqg .cq__revq {
    margin: 16px 0 0; font-family: 'Libre Caslon Display', Georgia, serif;
    font-size: 1.16rem; line-height: 1.45; color: var(--ink);
  }

  .cqg .cq__modename {
    margin: 6px 0 26px; font-family: 'Libre Caslon Display', Georgia, serif;
    font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--ink);
  }
  .cqg .cq__body { display: grid; gap: 16px; max-width: 36em; margin: 0 auto; text-align: left; }
  .cqg .cq__body p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); }
  .cqg .cq__body--centre { text-align: center; }
  .cqg .cq__pull {
    font-family: 'Libre Caslon Display', Georgia, serif;
    font-size: 1.16rem !important; line-height: 1.5 !important; color: var(--ink) !important;
  }

  .cqg .cq__verse { display: grid; gap: 12px; max-width: 34em; margin: 0 auto; }
  .cqg .cq__verse p {
    margin: 0; font-family: 'Libre Caslon Display', Georgia, serif;
    font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.5; color: var(--ink-soft);
  }
  .cqg .cq__verse .cq__versegap { margin-top: 18px; }

  .cqg .cq__ctasec { margin-top: clamp(64px, 7vw, 96px); }
  .cqg .cq__prodimg {
    display: block; width: min(320px, 72%); margin: 0 auto clamp(30px, 3.4vw, 44px);
    border-radius: 18px;
  }
  /* The result button centres. It is a block on this screen, not an inline pill. */
  .cqg[data-cq-result] .cq__cta { margin: clamp(30px, 3.4vw, 40px) auto 0; }
  .cqg .cq__privacy--centre { margin: 18px 0 0; text-align: center; }

  /* S13. Continue to Charm is a real button and Retake sits UNDER it as a line, not
     beside it. His words: "under it a minimal line retake the quiz". */
  .cqg .cq__links {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: 12px 28px; margin: 22px 0 0;
  }
  .cqg[data-cq-result] .cq__textlink {
    display: inline; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
    font-family: inherit; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-mute); text-decoration: underline; text-underline-offset: 4px;
    cursor: pointer; transition: color .2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .cqg[data-cq-result] .cq__textlink:hover { color: var(--ink); }
  }
  .cqg[data-cq-result] .cq__textlink:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; }

  /* The S11 two-column grid no longer renders. Neutralised so a cached template
     cannot resurrect a half-built layout. */
  .cqg .cq__rgrid { display: block; }

  @media (max-width: 720px) {
    .cqg .cq__input--area { min-height: 148px; }
    .cqg .cq__steps { width: 100%; }
    .cqg .cq__title { font-size: clamp(2.2rem, 11vw, 3rem); }
    .cqg .cq__prodimg { width: 78%; }
    .cqg[data-cq-result] .cq__cta { width: 100%; }
    .cqg .cq__name { letter-spacing: .26em; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cqg .cq__input, .cqg .cq__step, .cqg .cq__stepdot { transition: none; }
    .cqg .cq__r30-box, .cqg .cq__r30-done { animation: none; }
  }


/* inline block 12 */

  /* ============================================================
     1. THE "ONE FINAL REFLECTION" BLOCK IS OFF.
     ============================================================
     IT CANNOT BE REMOVED FROM THE THEME EDITOR. Blanking final_title, final_line_1
     and final_line_2 does nothing, because assets/charm-quiz.js falls back to its own
     hardcoded defaults when those settings are empty. That was tried first, saved
     blank, and the copy came straight back on the rendered page.

     .cq__result holds six section.cq__sec and the final reflection is always the LAST,
     so :last-of-type hits it exactly. Measured: document height 3966 -> 3654.

     The "Continue to Charm" button inside it (.cq__continue) goes with it. That is
     intended: the button the customer sees at the bottom is .cq__reflect, set to
     "Continue to Charm" and pointing at /#charm-reserve, the product selector.
     "Retake the quiz" is NOT lost, it is moved, see job 3.

     precaution: 1. Do NOT replace this with blank theme editor fields.
                 2. If charm-quiz.js ever appends a NEW section after this one,
                    :last-of-type hides the new one instead. Re-check then.
  */
  .cq__result section.cq__sec:last-of-type { display: none !important; }

  /* ============================================================
     2. EVERY PHOTOGRAPH IN THE QUIZ. ONE RULE, ON PURPOSE.
     ============================================================
     Ahmer: "there should be minimal distance above and bottom of the exact same
     spacing, CONSISTENCY IS IMPORTANT FOR ALL THE PAGES, NOT ONLY REFLECTION PAGE,
     IT HAS TO LOOK PREMIUM".

     So the story break photographs (.cq__storyimg, built by charm-quiz.js from the
     theme editor image pickers) and the three reflection page photographs (.cq__shot,
     inserted below) are governed by ONE declaration.

     SMALL ON PURPOSE. Ahmer: "dont fucking enlarge the photos, photos have to be
     minimal small like normal". 300px cap, centred. The first attempt ran them at the
     full 760px column and he rejected it.

     THE MARGIN COLLAPSE, AND WHY THE TWO NEIGHBOUR RULES ARE NOT OPTIONAL.
     margin:24px auto on the image is NOT enough. Adjacent sibling margins COLLAPSE to
     the larger of the two, and h3.cq__sech carries margin-bottom 37.77px, so the gap
     ABOVE every photograph rendered at 38px while the gap BELOW rendered at 24px.
     Ahmer spotted it on screen before I measured it.
     Measured before: above 38 / below 24, 24 and 34 across the three shots.
     Measured after:  above 24 / below 24 on all three.

     precaution: 1. Do NOT remove max-width. Full width was rejected.
                 2. Do NOT delete the two neighbour rules. Without them the gap above
                    goes back to 38px and the spacing is lopsided again.
                 3. Both neighbour rules are scoped to an element directly beside a
                    photograph, so nothing else on the page loses its spacing.
                 4. Radius 14px is deliberate. .cq__prodimg uses 18px, but that image
                    runs full width. At 300px, 18px reads too round.
  */
  .cq__shot,
  .cqg .cq__storyimg {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 24px auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .cqg .cq__storyimg img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: inherit !important;
  }
  /* Kill the collapsing margin the element ABOVE a photograph contributes. */
  .cq__result *:has(+ .cq__shot),
  .cqg *:has(+ .cq__storyimg) { margin-bottom: 0 !important; }
  /* Kill the margin the element BELOW a photograph contributes. */
  .cq__shot + *,
  .cqg .cq__storyimg + * { margin-top: 0 !important; }

  /* ============================================================
     3. RETAKE THE QUIZ SITS UNDER DISCOVER CHARM.
     ============================================================
     Type matched to p.cq__privacy measured on the rendered page: 12.5px,
     line-height 19.375px, #8C8880, centred, 18px clear of the button.

     precaution: these need !important. .cq__textlink sets its own size and wins
                 otherwise, measured at 12px instead of 12.5px.
  */
  .cq__r30 > .cq__retake {
    display: block !important;
    margin: 18px auto 0 !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 12.5px !important;
    line-height: 19.375px !important;
    color: #8C8880 !important;
    text-align: center !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .25s ease;
  }
  .cq__r30 > .cq__retake:hover { color: #141210 !important; }