/* Agency identity: compact wizard, translucent artwork, responsive and reduced-motion variants. */
.experience { min-height:100svh;background:#fcfbff;overflow-x:hidden }
.experience main { position:relative }
.ambient { position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 12% 48%,#e9e0ff 0,transparent 43%),radial-gradient(ellipse at 90% 5%,#eeeaff 0,transparent 38%);opacity:.65 }
.experience header { border-bottom:0 }
.live-dot { display:inline-block;width:6px;height:6px;border-radius:50%;background:#7b3ff2;margin-right:6px;box-shadow:0 0 0 4px #7b3ff214 }
.experience-layout { display:grid;align-items:center }
.story h1 { line-height:1.15;margin:21px 0 }
.story-copy { line-height:1.8 }
.voice-art { position:relative;display:grid;place-items:center }
.speaker-credit { display:flex;gap:14px;align-items:center }
.speaker-credit div { display:grid }
.speaker-credit small { font-size:8px;letter-spacing:.15em }
.speaker-credit strong { color:#111827 }
.speaker-credit div>span { color:#6b7280 }
.journey { background:#ffffffed;border:1px solid #e8e1f2;box-shadow:0 16px 60px #4f36780b,0 2px 4px #4f367803;min-width:0;overflow:hidden }
.steps { display:flex;justify-content:space-between;border-bottom:1px solid #f0ebf7;gap:12px }
.steps span { display:flex;align-items:center;gap:7px;font-size:10px;color:#80818b }
.steps b { font-size:9px;border:1px solid #e7e2ed;border-radius:50%;display:grid;place-items:center;width:25px;height:25px;font-weight:500 }
.steps [aria-current=step] { color:#5b35d5;font-weight:600 }
.steps [aria-current=step] b { background:#5b35d5;border-color:#5b35d5;color:#fff }
.steps .completed b { background:#f0e8ff;color:#5b35d5;border-color:#f0e8ff }
.experience form { border:0;box-shadow:none;border-radius:0;gap:0;background:transparent }
.experience fieldset { min-width:0;border:0;padding:0;margin:0;display:grid;animation:step-in .35s ease both }
.experience fieldset>.eyebrow { font-size:9px;letter-spacing:.13em;margin:0 }
.experience h2 { margin:0;letter-spacing:-1px }
.experience h2:focus { outline:none }
.step-copy { line-height:1.7;margin:-8px 0 4px;color:#6b7280 }
.experience input:not([type=checkbox]):not([type=radio]):not([type=range]) { border-radius:12px;background:#fdfcfe;border-color:#e1dbe9 }
.experience label { font-size:12px;gap:9px }
.personal-note { border-left:2px solid #c6b2f0;background:#f8f5ff;border-radius:0 10px 10px 0;line-height:1.65;color:#765a9c;min-height:50px }
.wizard-actions { display:flex;gap:15px;align-items:center }
.wizard-actions #continue,.wizard-actions #submit { flex:1;min-height:50px;font-size:13px }
.back-button { background:none;color:#6b7280;padding:12px 0;font-size:12px;border-radius:6px;box-shadow:none!important;transform:none!important }
.step-footnote { font-size:9px;line-height:1.5;color:#8d8798;text-align:center;margin:18px 0 0 }
.field-label { font-size:12px;font-weight:600;color:#111827;display:block;margin-bottom:12px }
.goal-options { display:grid;grid-template-columns:1fr 1fr;gap:10px }
.goal-options label { position:relative;cursor:pointer }
.goal-options input { position:absolute;opacity:0;width:1px;height:1px }
.goal-options span { border:1px solid #e5dfed;border-radius:12px;display:flex;align-items:center;padding:12px;font-weight:500;line-height:1.5;transition:background .2s,border-color .2s,transform .2s }
.goal-options input:checked+span { border-color:#9572d9;background:#f5f0ff;color:#5b35d5 }
.goal-options input:focus-visible+span { outline:3px solid #b8a1f4;outline-offset:3px }
.goal-options label:hover span { transform:translateY(-2px) }
.experience .check { font-size:10px;line-height:1.7 }
.experience .fine { font-size:10px }
.experience #form-error { background:#fff0f2;color:#9c2743;padding:12px;border-radius:8px;font-size:12px;line-height:1.6 }
.result-view { animation:step-in .4s ease both }
.result-view>.eyebrow { font-size:9px;margin:28px 0 16px }
.result-view h2 { line-height:1.2 }
.result-view #status { line-height:1.7;margin:18px 0 25px }
.result-visual { display:grid;place-items:center }
.result-view .fine { margin-top:20px }
.contact-cta { display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--agency-gradient);color:white;text-decoration:none;border-radius:999px;padding:17px 20px;font-weight:600;margin-top:25px;line-height:1.4 }
.result-view #new { margin-top:18px }
#audio-panel { display:flex;align-items:center;gap:14px;padding:18px;background:#f7f4ff;border:1px solid #e8defb;border-radius:18px }
.play-button { justify-content:center;align-content:center; width:47px;height:47px;padding:0;display:grid;place-items:center;flex-shrink:0;font-size:18px }
.audio-timeline { flex:1;min-width:0 }
.audio-timeline label { font-size:11px }
.audio-timeline input { width:100%;accent-color:#5b35d5;padding:0;cursor:pointer;height:20px }
.audio-timeline span { font-size:9px;color:#6b7280 }
.experience footer { font-size:9px }
.experience footer a { font-weight:500;text-decoration:none }
@keyframes step-in { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)} }
@media(min-width:761px) and (max-width:1050px) {
  .voice-art { max-width:310px }
}
@media(max-width:760px) {
  .experience header { gap:12px }
  .experience .badge { padding:8px 10px }
  .story { position:relative }
  .story>.eyebrow { margin:0 }
  .story-copy { margin:0 }
  .speaker-credit small { font-size:7px }
  .steps { gap:8px }
  .steps span { gap:5px }
  .experience label { font-size:12px }
  .experience input::placeholder { font-size:14px }
  .experience .fine { font-size:10px }
  .goal-options span { padding:10px }
  .experience footer { gap:20px;align-items:center;line-height:1.6 }
  .experience footer span { font-size:8px;text-align:left }
  .experience footer a { text-align:right }
  .wizard-actions { margin-top:24px }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none!important;transition:none!important;scroll-behavior:auto!important }
}
.experience main { max-width:1030px;padding:22px 34px 12px }
.experience-layout { grid-template-columns:.88fr 1.12fr;gap:48px;min-height:580px;padding:20px 0 10px }
.story h1 { font-size:43px;letter-spacing:-1.8px }
.story-copy { font-size:13px;max-width:300px }
.story>.eyebrow { font-size:9px }
.voice-art { height:200px;width:280px;max-width:100%;margin:15px 0 0;isolation:isolate }
.silk { position:absolute;inset:16%;border-radius:42% 58% 67% 33% / 47% 32% 68% 53%;background:linear-gradient(145deg,#c4b5fd60 4%,#7851d9a8 43%,#5231bd35 72%,#e9c5ed);box-shadow:inset 2px 2px 4px #fff9,inset -8px -9px 20px #5b35d542,0 18px 35px #7b3ff219;transform:rotate(-25deg);animation:silk-drift 12s ease-in-out infinite alternate }
.silk-two { inset:9% 25% 13% 14%;transform:rotate(38deg);background:linear-gradient(200deg,#bad7ffb0,#835de366 49%,#d8b8f877);mix-blend-mode:multiply;animation:silk-turn 15s ease-in-out infinite alternate;box-shadow:inset 1px 2px 3px #fff9,inset -4px -7px 18px #7c52da40 }
.silk-three { inset:25% 12% 17% 26%;background:linear-gradient(115deg,#f0d6f8aa,#c7a2e377 45%,#7b3ff23b);transform:rotate(-70deg);animation:silk-drift 10s ease-in-out -5s infinite alternate;box-shadow:inset 2px 2px 3px #fff8 }
.silk-line { position:absolute;inset:10% 2%;border:1px solid #a98ad34a;border-radius:50%;transform:rotate(-18deg) scaleY(.65);animation:silk-turn 20s linear infinite alternate }
.speaker-credit { margin-top:8px }
.speaker-credit div { gap:4px }
.speaker-credit strong { font-size:13px }
.speaker-credit div>span { font-size:9px }
.journey { border-radius:24px }
.steps { padding:20px 24px }
.experience form { padding:25px 26px }
.experience h2 { font-size:27px }
.experience fieldset { gap:16px }
.step-copy { font-size:11px }
.personal-note { padding:12px;font-size:11px;margin:0 }
.wizard-actions { margin-top:23px }
.step-footnote { margin-top:14px }
.goal-options span { min-height:43px;font-size:10px }
.experience input:not([type=checkbox]):not([type=radio]):not([type=range]) { padding:12px 13px }
.result-view { padding:24px 28px;min-height:520px }
.result-visual { position:relative;width:150px;height:130px;background:none;border-radius:0;box-shadow:none;margin:0 auto 10px }
.result-view>.eyebrow { margin-top:16px }
.result-view h2 { font-size:30px }
.result-visual.busy .silk { animation-duration:4s }
.result-visual.playing .silk { animation-duration:2s }
.result-view #status { font-size:12px }
.experience footer { padding:16px 0;margin-top:12px }
.contact-cta { font-size:11px }
.experience[data-step="1"] .silk { filter:hue-rotate(10deg) }
.experience[data-step="2"] .silk { filter:hue-rotate(-12deg) }
@keyframes silk-drift { 0%{border-radius:42% 58% 67% 33% / 47% 32% 68% 53%;transform:translateY(0) rotate(-25deg) scale(.98)}50%{border-radius:68% 32% 41% 59% / 30% 64% 36% 70%;transform:translateY(-9px) rotate(8deg) scale(1.04)}100%{border-radius:36% 64% 57% 43% / 67% 44% 56% 33%;transform:translateY(4px) rotate(-14deg) scale(.95)} }
@keyframes silk-turn { from{transform:rotate(38deg) scale(.97)}to{transform:rotate(78deg) scale(1.06)} }
@media(min-width:761px) and (max-width:1050px) {
  .experience-layout { gap:30px }
  .story h1 { font-size:35px }
  .experience main { padding:20px 24px }
  .experience form { padding:24px }
  .steps { padding:20px }
  .voice-art { width:245px }
}
@media(max-width:760px) {
  .experience main { padding:17px 18px 12px }
  .experience header { padding-bottom:5px }
  .experience .brand img { width:124px }
  .experience .badge { font-size:8px;max-width:135px }
  .experience-layout { grid-template-columns:1fr;gap:18px;padding-top:21px;min-height:0 }
  .story h1 { font-size:29px;letter-spacing:-1px;margin:11px 0 10px;max-width:245px }
  .story-copy { font-size:11px;max-width:270px;line-height:1.6 }
  .story>.eyebrow { font-size:8px }
  .voice-art { display:block;position:absolute;right:-24px;top:19px;width:132px;height:140px;opacity:.6;z-index:-1;margin:0 }
  .speaker-credit { margin-top:13px }
  .speaker-credit small { display:none }
  .speaker-credit div { display:flex;align-items:baseline;gap:8px;flex-wrap:wrap }
  .speaker-credit strong { font-size:10px }
  .speaker-credit div>span { font-size:8px }
  .journey { border-radius:20px }
  .experience form { padding:22px 20px }
  .experience h2 { font-size:25px }
  .steps { padding:16px 18px }
  .steps span { font-size:8px }
  .steps b { width:21px;height:21px;font-size:8px }
  .experience fieldset { gap:15px }
  .experience fieldset>.eyebrow { font-size:8px }
  .step-copy { font-size:11px }
  .experience input:not([type=checkbox]):not([type=radio]):not([type=range]) { padding:12px }
  .goal-options span { font-size:10px;min-height:46px }
  .experience .check { font-size:10px }
  .result-view { padding:23px;min-height:480px }
  .result-view h2 { font-size:28px }
  .result-visual { width:135px;height:110px }
  .experience footer { font-size:8px }
  .step-footnote { font-size:8px }
}
@media(prefers-reduced-motion:reduce) {
  .silk,.silk-line { animation:none!important }
}
@media(max-width:760px) {
  .story { isolation:isolate }
  .story>.voice-art { right:0;top:10px;width:120px;height:142px;z-index:0;overflow:clip }
  .story>h1,.story>.eyebrow,.story>.story-copy,.story>.speaker-credit { position:relative;z-index:1 }
  .story>.voice-art .silk-line { display:none }
}