/* V15: a scene that answers in place; the phone gets a face and a real next step. */
.hero-intro>.eyebrow{margin-bottom:25px}
.hero-purchase .hero-buy-caption{margin-top:14px}
.hero-purchase .hero-explainer{margin-top:23px}
.hero-garden .garden-scene{isolation:isolate}
.hero-thought{grid-template-columns:1fr;padding:23px 27px;gap:17px;min-height:192px}
.hero-thought .note-eyebrow{font-size:9px;letter-spacing:.12em;color:#796282}
#hero-question{font:600 31px/1.14 var(--display);letter-spacing:-.035em;margin:10px 0 0;outline:none}
#hero-question:focus-visible{outline:2px solid #87679a;outline-offset:5px;border-radius:3px}
#hero-response{font-size:13px;line-height:1.65;color:#6d5478;margin:8px 0 0}
.hero-answer-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-answer-choices:empty{display:none}
.hero-answer-choices button{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;font-size:12px;line-height:1.45;padding:13px 15px;text-align:left}
.hero-answer-choices button:focus-visible,.hero-result-actions button:focus-visible{outline:3px solid #87679a;outline-offset:4px}
.hero-result-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hero-result-actions button{min-height:44px;font:600 12px var(--body);cursor:pointer}
.hero-result-actions button[hidden]{display:none}
.hero-result-actions:has(button:not([hidden])){border-top:1px solid #e9dce9;padding-top:13px}
.hero-result-actions [data-hero-keep]{border:1px solid #d4c2d8;border-radius:12px;padding:12px 17px;background:#efe6f4;color:#583568}
.hero-result-actions [data-hero-reset]{border:0;padding:5px 0;background:transparent;color:#755780;text-decoration:underline;text-underline-offset:5px}
.hero-scene-note{position:absolute;z-index:3;left:5%;right:5%;bottom:19px;width:max-content;max-width:90%;margin:auto;padding:9px 16px;border:1px solid #fffdf8;background:#fffdf8f2;border-radius:99px;box-shadow:0 3px 15px #5d3c6415;color:#614469;font:600 12px/1.4 var(--body);text-align:center}
.hero-scene-note[hidden],.hero-art-fallback[hidden]{display:none}
.hero-art-fallback{position:absolute;inset:0;z-index:2;background:#fbf4e9;display:grid;place-items:center;padding:30px 35px 60px}
.hero-art-fallback>*{width:100%;height:100%;object-fit:contain}
.hero-garden[data-art=loading] .hero-scene-note:after{content:' · Trying it on…';font-weight:400}
html[data-motion=on] .hero-garden[data-art=arrived] .garden-art{animation:idea-appears .48s ease-out both}
@keyframes idea-appears{from{opacity:.35}to{opacity:1}}
.hero-garden[data-step="2"] .hero-thought{background:#fcfbf3;border-color:#dadcc7}
.garden-caption{gap:12px;line-height:1.5}
@media(min-width:681px){.hero-workshop{align-items:center}.hero-purchase .hero-pricing{margin-top:24px}.hero-purchase .hero-buy{max-width:480px}.hero-workshop .hero-detail{margin-top:15px}.hero-workshop .hero-garden{align-self:center}.hero-workshop .garden-scene{border-radius:95px 95px 18px 18px}.hero-workshop .hero-intro h1{font-size:clamp(48px,5vw,72px)}}
@media(min-width:681px) and (max-width:1000px){.hero-thought{padding:19px 18px}#hero-question{font-size:27px}.hero-answer-choices{grid-template-columns:1fr}.hero-intro>.eyebrow{font-size:7px}.hero-workshop .hero-intro h1{font-size:48px}.hero-purchase .hero-buy{font-size:18px}}
@media(max-width:680px){
 .hero-workshop{display:grid;grid-template-columns:1fr;width:calc(100% - 36px);gap:0;padding:18px 0 30px}
 .hero-workshop .hero-copy,.hero-workshop .hero-garden{display:contents}
 .hero-intro{grid-row:1;text-align:center;margin-bottom:16px}
 .hero-intro>.eyebrow{font-size:7px;margin-bottom:10px;justify-content:center}
 .hero-workshop .hero-intro h1{font-size:clamp(32px,9.4vw,52px);line-height:1.03;letter-spacing:-.05em}
 .hero-workshop .hero-intro h1>br:nth-of-type(2){display:none}
 .hero-workshop .hero-intro .hero-description{font-size:14px;line-height:1.45;margin:12px auto 0;max-width:320px}
 .hero-intro .hero-detail{display:none}
 .hero-workshop .garden-scene{grid-row:2;width:100%;max-width:480px;justify-self:center;aspect-ratio:1.7;border-radius:50px 50px 16px 16px}
 .hero-workshop .garden-scene{scroll-margin-top:82px}
 .garden-scene picture{display:block;height:100%}
 .garden-art{object-position:center 55%}
 .garden-sign{top:9px;font-size:6px;padding:7px 11px}
 .hero-purchase{grid-row:3;text-align:center;padding:0 0 21px}
 .hero-purchase .hero-pricing{margin:14px 0 0;justify-content:center;font-size:11px}
 .hero-purchase .hero-actions{margin:11px 0 0}
 .hero-workshop .hero-purchase .hero-buy{min-height:68px;font-size:20px;padding:17px 22px;gap:12px}
 .hero-purchase .hero-availability{margin:12px auto 0;max-width:335px;font-size:10px;line-height:1.6}
 .hero-purchase .hero-buy-caption,.hero-purchase .hero-explainer{display:none}
 .hero-purchase .hero-giving{justify-content:center;text-align:left;margin:11px auto 0;font-size:10px;max-width:320px;min-height:30px}
 .hero-workshop .hero-thought{grid-row:4;display:grid;grid-template-columns:1fr;margin:0;border-radius:20px;padding:22px 20px;gap:15px;min-height:0}
 .hero-thought:before{display:none}
 .hero-thought .note-eyebrow{font-size:8px;letter-spacing:.1em}
 #hero-question{font-size:29px;line-height:1.12;margin-top:9px}
 #hero-response{font-size:13px;line-height:1.6}
 .hero-answer-choices{grid-template-columns:1fr}
 .hero-answer-choices button{font-size:13px;min-height:48px;padding:12px 14px}
 .hero-result-actions{gap:7px 15px}
 .hero-result-actions button{font-size:12px}
 .hero-scene-note{font-size:10px;padding:7px 12px;bottom:9px}
 .hero-workshop .garden-caption{grid-row:5;margin:13px 0 0;max-width:100%;gap:12px}
 .hero-workshop:has(.hero-garden[data-step="1"]) .hero-purchase,.hero-workshop:has(.hero-garden[data-step="2"]) .hero-purchase{grid-row:6;margin-top:16px;border-top:1px solid #e9dce9}
 .hero-workshop:has(.hero-garden[data-step="1"]) .hero-thought,.hero-workshop:has(.hero-garden[data-step="2"]) .hero-thought{margin-top:12px}
 .garden-caption>span{font-size:7px;max-width:195px}
 .garden-caption a{font-size:10px;min-height:44px;display:flex;align-items:center}
}
@media(max-width:360px){.hero-workshop .hero-intro h1{font-size:32px}.hero-workshop .hero-intro h1>br:nth-of-type(2){display:none}.hero-workshop .hero-intro .hero-description{font-size:12px}.hero-purchase .hero-buy{font-size:18px;min-height:64px}.hero-workshop .hero-thought{padding:19px 16px}#hero-question{font-size:26px}.hero-purchase .hero-giving{font-size:9px}}
@media(prefers-reduced-motion:reduce){html[data-motion=on] .hero-garden[data-art=arrived] .garden-art{animation:none}}
@media print{.hero-result-actions{display:none}}