.question-hero{padding:48px 0 46px;background:#fcfcf9;border-bottom:1px solid var(--line)}.question-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}.question-heading .eyebrow{margin-bottom:16px}.question-heading h1{font-size:clamp(30px,3.4vw,46px);line-height:1.4}.question-heading h1 span{color:var(--orange-dark)}.question-heading p{font-size:14px;color:var(--muted);margin-top:13px}.motion-control{border:1px solid var(--line);border-radius:24px;padding:8px 15px;background:transparent;color:var(--muted);font-size:12px;white-space:nowrap}/* Fixed targets contain independently floating faces, so tapping never chases a button. */
.problem-orbits{position:relative;height:490px;max-width:1100px;margin:24px auto 22px}
.orbit-slot{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size)}
.orbit-0{--x:1%;--y:54px;--size:184px;--duration:7.1s;--delay:-2s}
.orbit-1{--x:25%;--y:10px;--size:194px;--duration:8.3s;--delay:-5s}
.orbit-2{--x:51%;--y:65px;--size:180px;--duration:6.7s;--delay:-1s}
.orbit-3{--x:77%;--y:16px;--size:202px;--duration:9.2s;--delay:-6s}
.orbit-4{--x:7%;--y:285px;--size:170px;--duration:8.6s;--delay:-4s}
.orbit-5{--x:32%;--y:242px;--size:190px;--duration:7.7s;--delay:-3s}
.orbit-6{--x:56%;--y:296px;--size:164px;--duration:6.9s;--delay:-5s}
.orbit-7{--x:79%;--y:259px;--size:178px;--duration:8.9s;--delay:-2s}
.problem-orb{position:relative;width:100%;height:100%;border:0;border-radius:50%;padding:0;background:transparent;color:var(--ink);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.orb-face{position:absolute;inset:0;border-radius:50%;border:1px solid #d8e2d1;background:radial-gradient(circle at 30% 20%,#fff,#e6efdb);box-shadow:0 15px 30px #3347250a,inset 0 0 0 7px #ffffff70;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 8px 18px;pointer-events:none;animation:orb-drift var(--duration) ease-in-out var(--delay) infinite;transition:background .25s,box-shadow .25s}
.orbit-slot:nth-child(3n) .orb-face{background:radial-gradient(circle at 30% 20%,#fffefa,#f4e4d3);border-color:#e8dbca}
.orbit-slot:nth-child(4n) .orb-face{background:radial-gradient(circle at 30% 20%,#fff,#e3edf1);border-color:#d9e1e4}
.orb-label{font-size:16px;font-weight:600;line-height:1.65;letter-spacing:-.02em;white-space:nowrap}.orb-category{font-size:10px;color:#53624e;margin-top:10px;letter-spacing:.08em}.orb-mark{position:absolute;right:24px;top:20px;font-size:19px;font-weight:300;color:#65765a;transition:transform .3s}
.problem-orb[aria-pressed=true] .orb-face{background:radial-gradient(circle at 28% 20%,#ffbb79,#f48634)!important;border-color:#d76a1d;box-shadow:0 9px 25px #f4772125,inset 0 0 0 7px #ffffff26}
.problem-orb[aria-pressed=true] .orb-category,.problem-orb[aria-pressed=true] .orb-mark{color:#58371d}.problem-orb[aria-pressed=true] .orb-mark{transform:none}
.problem-orb:focus-visible{outline:2px solid var(--orange-dark);outline-offset:8px}
.problem-orb:focus-visible .orb-face,.problem-orb[aria-pressed=true] .orb-face,.motion-paused .orb-face,.touch-active .orb-face{animation-play-state:paused}
@media(hover:hover){.problem-orb:hover .orb-face{animation-play-state:paused;box-shadow:0 18px 35px #33472518}}
.question-action{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:22px}.question-action p{font-size:13px;color:var(--muted)}.question-action>div{display:flex;align-items:center;gap:20px}#clear-problems{border:0;background:transparent;color:var(--muted);font-size:12px;text-decoration:underline}.problem-results{padding-top:65px;scroll-margin-top:100px}.problem-results h2{font-size:32px}.answer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:30px 0}.answer-grid article{position:relative;background:white;border:1px solid var(--line);border-radius:12px;padding:25px 26px 25px 40px}.answer-grid h3{font-size:19px;line-height:1.5;margin-bottom:12px}.answer-grid p{font-size:14px;color:var(--muted)}.answer-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--orange);top:35px;left:21px}.solution-products{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:25px}.solution-products a{padding:9px 15px;background:#e9eee5;border-radius:6px;font-size:13px;color:var(--green)}.problem-results[hidden],.answer-grid [hidden],.solution-products [hidden],#clear-problems[hidden]{display:none}@keyframes orb-drift{0%,100%{transform:translate(-8px,6px)}25%{transform:translate(5px,-16px)}50%{transform:translate(12px,-2px)}75%{transform:translate(-3px,14px)}}
@media(min-width:761px) and (max-width:1100px){.orbit-slot{width:calc(var(--size)*.82);height:calc(var(--size)*.82)}.orb-label{font-size:14px}.problem-orbits{height:450px}.orbit-4{top:260px}.orbit-5{top:220px}.orbit-6{top:275px}.orbit-7{top:235px}}
@media(max-width:760px){.question-hero{padding-top:28px}.question-heading{display:block;position:relative}.question-heading h1{font-size:30px;max-width:350px}.question-heading h1 span{display:block}.question-heading p{font-size:13px;max-width:300px;margin-bottom:16px}.motion-control{padding:6px 12px;font-size:11px}.problem-orbits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px;height:auto;margin:30px 0 55px;padding:0 4px}.orbit-slot{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:1}.orbit-slot:nth-child(even){top:37px}.orbit-slot:nth-child(3n){width:94%;justify-self:center}.orbit-slot:nth-child(4n+1){width:98%}.orb-face{padding:22px 5px 15px;animation-name:orb-drift-mobile}.orb-mark{top:14px;right:22px}.orb-label{font-size:14px}.orb-category{font-size:9px;margin-top:7px}.question-action{align-items:flex-start;flex-direction:column;gap:14px}.question-action>div{width:100%;justify-content:space-between;flex-direction:row-reverse}.question-action .btn{font-size:13px}.answer-grid{grid-template-columns:1fr}.problem-results{padding-top:45px}.problem-results h2{font-size:27px}}@media(prefers-reduced-motion:reduce){.orbit-slot{animation:none}.problem-orb,.orb-mark{transition:none}}
@keyframes orb-drift-mobile{0%,100%{transform:translate(0,4px)}30%{transform:translate(3px,-8px)}65%{transform:translate(-3px,7px)}}
.orb-face:after{content:"";position:absolute;inset:-5px;border:1px solid #9cae8b44;border-radius:50%;pointer-events:none;animation:orb-breathe 5s ease-in-out var(--delay) infinite alternate}
@keyframes orb-breathe{from{transform:scale(.98);opacity:.12}to{transform:scale(1.035);opacity:.6}}
.motion-paused .orb-face:after,.touch-active .orb-face:after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.orb-face,.orb-face:after{animation:none!important}.orb-face,.orb-mark{transition:none}}
@media(max-width:360px){.orb-label{font-size:13px}.orb-category{font-size:8px}.orb-mark{top:10px;right:20px}.problem-orbits{gap:25px 12px}}

.problem-orb:before{content:"";position:absolute;inset:-18px;border-radius:50%}
@media(max-width:760px){.problem-orb:before{inset:-8px}}

/* Each selected problem has its own real-product walkthrough. */
.problem-results{padding-top:30px}.answer-grid{display:block;margin:0}.answer-grid .solution-story{padding:30px 0 48px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;scroll-margin-top:105px;margin-bottom:28px}
.solution-story .chosen-problem{font-size:14px;margin:12px 0 20px;color:var(--muted)}
.answer-grid .solution-headline{font-size:clamp(27px,3.5vw,46px);line-height:1.5;letter-spacing:-.035em;margin:0 0 20px;outline-offset:8px}
.solution-line{display:block}.solution-line:last-child{color:var(--orange-dark)}.solution-line>span{display:inline-block}
.revealing .solution-line>span{animation:solution-letter .32s both;animation-delay:calc(var(--step)*.035s)}
@keyframes solution-letter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.answer-grid .solution-description{font-size:16px;max-width:820px;line-height:1.9;margin-bottom:24px}
.solution-shot{max-width:1000px;margin:0}.solution-shot .screen-button{display:block;width:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:white;padding:0}.solution-shot img{display:block;width:100%;height:auto}.solution-shot figcaption{font-size:12px;color:var(--muted);margin-top:10px}
.solution-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:24px}.back-to-problems{font-size:13px;margin-left:auto;text-decoration:underline}
@media(max-width:760px){.answer-grid .solution-story{scroll-margin-top:85px;padding-top:20px}.answer-grid .solution-headline{font-size:27px;line-height:1.55}.answer-grid .solution-description{font-size:14px}.solution-cta .btn{flex:1;font-size:14px;text-align:center;justify-content:center}.back-to-problems{width:100%;margin:6px 0 0}.solution-story .chosen-problem{font-size:12px}}
@media(prefers-reduced-motion:reduce){.revealing .solution-line>span{animation:none}}

.solution-line>span{white-space:pre}