:root{--brand-blue:#174fc4;--brand-green:#28644d;--brand-grey:#6c757d;--ex-ink:#182533;--ex-muted:var(--brand-grey);--ex-line:#dbe3ed;--ex-paper:#f7f8fa;--ex-green:var(--brand-green);--ex-blue:var(--brand-blue);--ex-plum:var(--brand-grey);--ex-amber:#a66b34}html{scroll-behavior:smooth}body.example-body{background:var(--ex-paper);color:var(--ex-ink);margin:0;overflow-x:hidden}.example-body *{box-sizing:border-box;letter-spacing:0}.example-header{z-index:50;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#f7f8fae6;border-bottom:1px solid #dbe3eddb;justify-content:space-between;align-items:center;height:76px;padding:0 clamp(20px,4vw,56px);display:flex;position:fixed;inset:0 0 auto}.example-header .logo-icon{align-items:center;gap:9px;text-decoration:none;display:flex}.example-header .logo-mark{width:27px;height:32px}.example-header .logo-text{margin:0;line-height:1}.example-back{color:var(--ex-muted);align-items:center;gap:9px;font-size:13px;text-decoration:none;display:inline-flex}.example-back:hover{color:var(--ex-blue)}.example-scroll{height:460dvh;position:relative}.example-viewport{z-index:2;background:var(--ex-paper);grid-template-columns:minmax(480px,1.15fr) minmax(360px,.85fr);align-items:center;gap:clamp(34px,5vw,80px);width:100%;height:100dvh;padding:100px clamp(28px,5vw,76px) 42px;display:grid;position:sticky;top:0;overflow:hidden}.story-track{z-index:-1;pointer-events:none;grid-template-rows:repeat(6,60dvh);display:grid;position:absolute;inset:0}.story-track span{display:block}.demo-sticky{place-items:center;min-width:0;height:min(72vh,680px);display:grid}.demo-window{width:min(100%,720px);height:min(var(--demo-card-height,460px),100%);background:#fff;border:1px solid #cfd9e6;border-radius:8px;transition:height .45s cubic-bezier(.2,.7,.2,1);position:relative;overflow:hidden;box-shadow:0 28px 75px #2032491f}body[data-story-stage=browse]{--demo-card-height:470px}body[data-story-stage=select]{--demo-card-height:450px}body[data-story-stage=answer]{--demo-card-height:460px}body[data-story-stage=results]{--demo-card-height:480px}body[data-story-stage=filters]{--demo-card-height:560px}body[data-story-stage=final]{--demo-card-height:420px}.demo-window:before{content:"";z-index:4;background:#edf1f5;height:1px;position:absolute;inset:48px 0 auto}.demo-window-top{z-index:5;height:49px;color:var(--ex-muted);justify-content:space-between;align-items:center;padding:0 22px;font-size:11px;display:flex;position:relative}.demo-wordmark{color:var(--ex-blue);align-items:center;gap:6px;font-size:17px;font-weight:700;display:inline-flex}.demo-wordmark img{object-fit:contain;width:18px;height:22px}.demo-progress-label b{color:var(--ex-green);font-size:14px}.demo-screen{opacity:0;visibility:hidden;scrollbar-width:none;padding:clamp(24px,4vw,46px);transition:opacity .5s,visibility .5s;position:absolute;inset:49px 0 0;overflow:auto}.demo-screen::-webkit-scrollbar{display:none}.story-step::-webkit-scrollbar{display:none}.demo-screen.is-active{opacity:1;visibility:visible;z-index:2}.screen-heading{justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px;font-weight:600;display:flex}.screen-heading small,.screen-kicker{color:var(--ex-green);text-transform:uppercase;font-size:10px;font-weight:600}.survey-list{gap:12px;display:grid}.survey-preview{border:1px solid var(--ex-line);background:#fff;border-radius:6px;grid-template-columns:46px 1fr;align-items:center;gap:15px;padding:17px;display:grid}.survey-preview:first-child{border-color:#8db3a1;box-shadow:0 10px 30px #28644d14}.survey-preview small{color:var(--ex-green);text-transform:uppercase;font-size:9px}.survey-preview h3{letter-spacing:0;margin:3px 0 0;font-size:14px;line-height:1.35}.survey-icon{aspect-ratio:1;border-radius:50%;place-items:center;width:42px;font-size:19px;display:grid}.survey-icon-sport{color:var(--ex-green);background:#e9f0ec}.survey-icon-time{color:var(--ex-blue);background:#e8effc}.survey-icon-world{color:var(--ex-plum);background:#f4edf4}.selection-ring{aspect-ratio:1;width:82px;color:var(--ex-green);background:#edf6f0;border:1px solid #b8d0c2;border-radius:50%;place-items:center;margin:clamp(18px,5vh,52px) 0 24px;display:grid}.selection-ring span{aspect-ratio:1;background:var(--ex-green);color:#fff;border-radius:50%;place-items:center;width:46px;font-size:21px;display:grid}.demo-screen[data-panel=select]{flex-direction:column;justify-content:center;display:flex}.demo-screen[data-panel=select] .selection-ring{margin:0 0 18px}.demo-screen[data-panel=select] .selection-meta{margin-top:16px}.demo-screen h2{letter-spacing:0;max-width:560px;margin:12px 0 16px;font-size:clamp(23px,2.7vw,36px);line-height:1.2}.demo-screen>p{max-width:520px;color:var(--ex-muted);font-size:14px}.selection-meta{flex-wrap:wrap;gap:8px;margin-top:26px;display:flex}.selection-meta span{border:1px solid var(--ex-line);color:var(--ex-muted);border-radius:4px;padding:6px 9px;font-size:10px}.answer-options{grid-template-columns:1fr 1fr;gap:10px;margin:28px 0 18px;display:grid}.answer-options button{border:1px solid var(--ex-line);min-height:54px;color:var(--ex-ink);background:#fff;border-radius:6px;justify-content:space-between;align-items:center;padding:12px 15px;font-size:12px;display:flex;text-align:left!important}.answer-options button.is-chosen{border-color:var(--ex-green);color:var(--ex-green);background:#edf6f0;font-weight:600}.answer-options button span{aspect-ratio:1;background:var(--ex-green);color:#fff;border-radius:50%;place-items:center;width:21px;display:grid}.answer-submit{background:var(--ex-green);color:#fff;border:0;border-radius:6px;width:100%;font-size:12px}.results-chart{gap:15px;margin-top:23px;display:grid}.result-item>div{justify-content:space-between;gap:16px;margin-bottom:6px;font-size:11px;display:flex}.result-item strong{font-variant-numeric:tabular-nums}.result-item i{background:#eef2f7;border-radius:3px;width:100%;height:11px;display:block;overflow:hidden}.result-item i:after{content:"";width:calc(var(--value) * 1%);border-radius:inherit;background:var(--bar);transform-origin:0;height:100%;transition:transform .75s cubic-bezier(.2,.7,.2,1),width .45s;display:block;transform:scaleX(0)}.demo-screen.is-active .result-item i:after{transform:scaleX(1)}.filter-play{color:var(--ex-muted);margin:-14px 0 16px!important;font-size:10px!important}.filter-controls{grid-template-columns:1fr 1fr;gap:9px 16px;display:grid}.filter-group{min-width:0}.filter-group:last-child{grid-column:1/-1}.filter-group>span{color:var(--ex-muted);margin-bottom:5px;font-size:9px;display:block}.filter-group>div{flex-wrap:wrap;gap:5px;display:flex}.filter-group button{border:1px solid var(--ex-line);min-height:27px;color:var(--ex-muted);background:#fff;border-radius:4px;padding:4px 8px;font-size:8px}.filter-group button.is-active{border-color:var(--ex-blue);color:var(--ex-blue);background:#eaf0fc;font-weight:600}.results-chart.compact{gap:8px;margin-top:14px}.results-chart.compact .result-item i{height:7px}.demo-final-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.demo-final-screen h2,.demo-final-screen>p{margin-left:auto;margin-right:auto}.demo-final-screen .screen-kicker{text-align:center;width:100%;display:block}.final-logo-mark{object-fit:contain;width:43px;height:51px;margin:0 auto 22px;display:block}.story-copy{min-width:0;height:min(72vh,680px);position:relative}.story-copy:before{content:"";background:#dbe3ed;width:1px;position:absolute;top:0;bottom:0;left:21px}.story-step{opacity:0;visibility:hidden;scrollbar-width:none;align-content:center;padding:40px 0 40px 72px;transition:opacity .48s,visibility .48s;display:grid;position:absolute;inset:0;overflow:auto}.story-step.is-active{opacity:1;visibility:visible;z-index:2}.story-number{aspect-ratio:1;border:1px solid var(--ex-green);background:var(--ex-green);color:#fff;border-radius:50%;place-items:center;width:43px;font-size:11px;display:grid;position:absolute;top:50%;left:0;translate:0 -50%}.story-kicker{color:var(--ex-green);text-transform:uppercase;margin:0 0 12px;font-size:10px;font-weight:600}.story-step h1,.story-step h2{letter-spacing:0;max-width:540px;margin:0 0 18px;font-size:clamp(30px,3.4vw,52px);line-height:1.15}.story-step p:not(.story-kicker):not(.form-privacy):not(.form-status){max-width:520px;color:var(--ex-muted);font-size:15px;line-height:1.75}.final-actions{flex-wrap:wrap;gap:10px;margin-top:24px;display:flex}.final-actions .btn{align-items:center;gap:10px;padding:11px 16px;font-size:12px;text-decoration:none;display:inline-flex}.access-form{border:1px solid var(--ex-line);background:#fff;border-radius:8px;max-width:520px;margin-top:18px;padding:17px}.access-form[hidden]{display:none}.access-form fieldset{border:0;align-items:center;gap:16px;margin:0 0 13px;padding:0;display:flex}.access-form legend{width:100%;margin-bottom:8px;font-size:11px;font-weight:600}.access-form fieldset label{align-items:center;gap:6px;font-size:11px;display:flex}.contact-field{gap:6px;font-size:11px;display:grid}.contact-field input{width:100%}.access-form>button{width:100%;margin-top:10px}.website-field{position:absolute;left:-9999px}.form-privacy,.form-status{color:var(--ex-muted);margin:7px 0 0;font-size:9px;line-height:1.4}.form-status.is-error{color:#9d2e27}.form-status.is-success{color:var(--ex-green)}.scroll-cue{z-index:8;color:var(--ex-muted);pointer-events:none;flex-direction:column;align-items:center;gap:2px;margin:0;font-size:12px;font-weight:500;line-height:1.2;transition:opacity .25s,visibility .25s;display:flex;position:absolute;bottom:15px;left:50%;translate:-50%}.scroll-cue[hidden]{display:none}.scroll-cue-arrow{color:var(--ex-blue);font-size:22px;line-height:1;animation:1.4s ease-in-out infinite scrollCue}@keyframes scrollCue{0%,to{opacity:.55;translate:0}50%{opacity:1;translate:0 4px}}.example-legal{z-index:7;gap:14px;font-size:9px;display:flex;position:absolute;bottom:13px;right:clamp(20px,4vw,56px)}.example-legal a{color:var(--ex-muted)}@media (orientation:portrait),(width<=760px){.example-header{height:64px;padding:0 18px}.example-header .logo-text{font-size:25px}.example-viewport{grid-template-rows:minmax(0,48%) minmax(0,52%);grid-template-columns:1fr;gap:10px;padding:76px 14px 26px}.demo-sticky{justify-self:center;width:min(60vw,520px);height:100%;min-height:0}.story-copy{width:100%;height:100%;min-height:0}.demo-window{width:100%;height:min(var(--demo-card-height,460px),100%)}.demo-window-top{height:37px;padding:0 14px}.demo-window:before{top:37px}.demo-screen{padding:15px 18px;inset:37px 0 0}.screen-heading{margin-bottom:10px}.survey-list{gap:7px}.survey-preview{grid-template-columns:34px 1fr;gap:10px;padding:8px 10px}.survey-icon{width:31px;font-size:13px}.survey-preview h3{font-size:11px}.survey-preview small{font-size:8px}.selection-ring{width:46px;margin:6px 0 10px}.selection-ring span{width:29px;font-size:13px}.demo-screen h2{margin:7px 0;font-size:18px}.demo-screen>p{margin:6px 0;font-size:10px}.selection-meta{margin-top:9px}.selection-meta span{padding:4px 6px;font-size:8px}.answer-options{gap:6px;margin:10px 0 8px}.answer-options button{min-height:35px;padding:6px 9px;font-size:9px}.answer-submit{min-height:34px}.results-chart{gap:6px;margin-top:8px}.result-item>div{margin-bottom:3px;font-size:9px}.result-item i{height:6px}.filter-play{margin:-5px 0 8px!important;font-size:8px!important}.filter-controls{grid-template-columns:1fr;gap:5px}.filter-group:last-child{grid-column:auto}.filter-group>span{margin-bottom:2px;font-size:8px}.filter-group>div{gap:3px}.filter-group button{min-height:22px;padding:2px 5px;font-size:7px}.results-chart.compact{gap:5px;margin-top:8px}.filter-group-mobile-optional{display:none}.final-logo-mark{width:30px;height:36px;margin-bottom:10px}.story-copy:before{top:14px;bottom:16px;left:21px}.story-step{align-content:center;padding:18px 12px 30px 58px}.story-number{width:41px;left:0}.story-step h1,.story-step h2{margin-bottom:10px;font-size:clamp(26px,7.4vw,38px)}.story-step p:not(.story-kicker):not(.form-privacy):not(.form-status){margin:0;font-size:12px;line-height:1.55}.story-kicker{margin-bottom:7px}.final-actions{margin-top:13px}.final-actions .btn{min-height:38px;padding:8px 11px;font-size:10px}.access-form{margin-top:10px;padding:11px}.access-form fieldset{margin-bottom:8px}.access-form legend{margin-bottom:5px}.contact-field input{min-height:38px;padding:7px 10px}.access-form>button{min-height:37px;margin-top:7px}.form-privacy{display:none}.scroll-cue{font-size:11px;bottom:28px}.scroll-cue-arrow{font-size:20px}.example-legal{gap:10px;font-size:8px;bottom:8px;right:16px}}@media (width<=420px) and (height<=740px){.example-viewport{grid-template-rows:minmax(0,46%) minmax(0,54%);padding-top:70px}.story-step h1,.story-step h2{font-size:24px}.story-step p:not(.story-kicker):not(.form-status){font-size:11px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.demo-screen,.story-step,.result-item i:after{transition:none}.scroll-cue-arrow{animation:none}}