/* One composed introduction. The accepted baseline is available without hero=companion. */
.hero-intro,.hero-conversation{display:none}
html[data-hero=companion] .hero-copy{top:25%;max-width:55%}
html[data-hero=companion] .hero-copy h1{font-size:clamp(76px,8.4vw,136px);line-height:1.02;letter-spacing:-.062em}
html[data-hero=companion] .hero-intro{display:block;max-width:24em;margin:26px 0 0;font-size:clamp(18px,1.5vw,22px);line-height:1.5;font-weight:400;letter-spacing:-.015em;color:#294438;text-wrap:balance}
html[data-hero=companion] .hero-copy .primary{margin-top:30px;min-height:58px;padding:17px 26px;font-size:16px;gap:13px}
/* Light belongs to the whole clearing, with a quiet reading area on the left. */
html[data-hero=companion] .journey-shade,
html[data-hero=companion].journey-boot .hero-shade,
html[data-hero=companion]:not(.continuous-journey) .hero-shade{background:linear-gradient(90deg,#f4f1e3ee 0%,#f4f1e3cf 23%,#f4f1e37a 42%,#f4f1e300 64%)}
html[data-hero=companion].scene-journey .hero-conversation{display:grid;position:absolute;z-index:4;left:76%;top:10%;width:256px;min-height:80px;transform:translate(-50%,8px);padding:14px 20px 16px;background:#f6f4e7ed;border:1px solid #ffffffe0;border-radius:24px;box-shadow:0 5px 24px #233d2f0d;color:#294438;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.3,1),visibility .55s}
html[data-hero=companion] .hero-conversation[data-step=request],html[data-hero=companion] .hero-conversation[data-step=response]{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hero-conversation-label{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:10px;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:#536b5c}
.hero-conversation-label:after{content:'Example';letter-spacing:.04em;color:#536b5c;opacity:.8;border-left:1px solid #536b5c50;padding-left:8px}
.hero-conversation-quote{font-size:18px;font-weight:400;line-height:1.35;letter-spacing:-.02em;text-wrap:balance}
@media(min-width:701px) and (max-height:650px){html[data-hero=companion] .hero-copy{top:23%}html[data-hero=companion] .hero-copy h1{font-size:clamp(66px,7.8vw,110px)}html[data-hero=companion] .hero-intro{margin-top:20px}html[data-hero=companion] .hero-copy .primary{margin-top:22px}html[data-hero=companion].scene-journey .hero-conversation{display:none}}
@media(max-width:700px){
 html[data-hero=companion].continuous-journey main{
  --hero-copy-top:max(82px,calc(var(--journey-height)*.105));
  --hero-font:clamp(40px,12vw,60px);--hero-button-gap:20px;
  --hero-intro-height:64px;
  --hero-content-bottom:calc(var(--hero-copy-top) + var(--hero-font)*2.02 + var(--hero-intro-height) + var(--hero-button-gap) + var(--hero-button-height));
  --hero-copy-bottom:var(--hero-content-bottom);
 }
 html[data-hero=companion] .hero-copy{max-width:none;top:var(--hero-copy-top,90px);display:flex;flex-direction:column;align-items:center}
 html[data-hero=companion] .hero-copy h1{font-size:var(--hero-font,48px);line-height:1.01}
 html[data-hero=companion] .hero-intro{max-width:290px;margin:16px 0 0;font-size:17px;line-height:24px;letter-spacing:-.015em}
 html[data-hero=companion] .hero-copy .primary{margin-top:var(--hero-button-gap,20px);height:var(--hero-button-height,50px);min-height:var(--hero-button-height,50px);padding:0 23px;font-size:15px}
 html[data-hero=companion] .journey-shade,html[data-hero=companion].journey-boot .hero-shade,html[data-hero=companion]:not(.continuous-journey) .hero-shade{background:linear-gradient(180deg,#f4f1e3d9 0%,#f4f1e3c2 24%,#f4f1e366 39%,transparent 58%)}
 html[data-hero=companion].scene-journey .hero-conversation{display:none}
}
@media(max-width:700px) and (min-height:800px){
 html[data-hero=companion].continuous-journey main{--hero-copy-bottom:calc(var(--hero-content-bottom) + 85px)}
 html[data-hero=companion].scene-journey .hero-conversation{display:grid;left:50%;top:calc(var(--hero-content-bottom) + 12px);width:242px;min-height:70px;padding:11px 18px 13px}
 .hero-conversation-quote{font-size:17px}.hero-conversation-label{margin-bottom:4px}
}
@media(max-width:700px) and (max-height:620px){
 html[data-hero=companion].continuous-journey main{--hero-copy-top:75px;--hero-font:clamp(36px,11.4vw,45px);--hero-button-gap:14px;--hero-intro-height:57px}
 html[data-hero=companion] .hero-intro{margin-top:13px;font-size:16px;line-height:22px;max-width:270px}
}
@media(prefers-reduced-motion:reduce){.hero-conversation{display:none!important}}