/* A readable introduction and a complete, locally bounded hero sequence. */
.b-legendary .b-nav>span{font:400 20px/1.3 'DM Serif Display',Georgia,serif;letter-spacing:0;text-align:center}
.b-legendary .b-growth{--hero-runway:0px}
.b-hero-skip{position:absolute;z-index:10;left:7%;bottom:22px;min-height:44px;padding:10px 0;border:0;background:transparent;color:#172423;font:12px/1.4 'DM Sans',sans-serif;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.b-hero-skip:focus-visible{outline:2px solid var(--brand-orange);outline-offset:5px}
.b-growth[data-sequence=complete] .b-hero-skip{visibility:hidden;pointer-events:none}
@media(max-width:700px){
 .b-legendary .b-nav{gap:16px}
 .b-legendary .b-nav>span{font-size:17px;max-width:none}
 .b-legendary .b-growth{--hero-stage:calc(var(--nav-h) + 570px)}
 .b-legendary .b-growth-split .b-growth-heading{left:6%;width:88%;top:calc(var(--nav-h) + 28px);text-align:center}
 .b-legendary .b-growth-heading p{max-width:330px;margin-left:auto;margin-right:auto;letter-spacing:.065em}
 .b-legendary .b-growth-split .b-growth-heading p{margin-bottom:20px}
 .b-legendary .b-growth-end{left:6%;right:6%;max-width:none;top:calc(var(--nav-h) + 30px);text-align:center}
 .b-legendary .b-shell{left:50%;top:calc(var(--nav-h) + 220px);width:180px;height:270px}
 .b-legendary .b-shell-bottom{transform:translate(-50%,calc(var(--hatch)*45px)) rotate(calc(var(--hatch)*7deg + var(--shell-tremor,0deg)))}
 .b-legendary .b-shell-top{transform:translate(calc(-50% + var(--hatch)*55px),calc(var(--hatch)*-67px)) rotate(calc(var(--hatch)*20deg + var(--shell-tremor,0deg))) scale(calc(1 - var(--hatch)*.18))}
 .b-legendary .b-hero-hatch{left:60%;top:calc(var(--nav-h) + 255px);width:min(54vw,240px);opacity:clamp(0,calc(var(--hatch)*2),1);transform:translate(calc(-50% - var(--lift)*30px),calc(75px - var(--lift)*90px)) scale(calc(.59 + var(--lift)*.35))}
 /* Keep the replay control clear of the primary Hatch your plan button. */
 .b-hero-skip{left:50%;transform:translateX(-50%);bottom:52px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.b-hero-skip{display:none}}

/* The audience line belongs to the reveal, after the dragon has emerged. */
.b-legendary .b-growth-end .b-hero-reveal-label{font:600 16px/1.5 'DM Sans',sans-serif!important;letter-spacing:.08em;max-width:350px;margin:22px 0 0;opacity:var(--ending-label,0)}
@media(max-width:700px){
 .b-legendary .b-growth-split .b-growth-heading{top:calc(var(--nav-h) + 60px)}
 .b-legendary .b-growth-end{top:calc(var(--nav-h) + 25px);font-size:clamp(32px,9.3vw,40px)}
 .b-legendary .b-growth-end>span br{display:none}
 .b-legendary .b-growth-end .b-hero-reveal-label{font-size:15px!important;line-height:1.5;max-width:330px;margin:16px auto 0;letter-spacing:.065em}
}
/* Bring the opening question closer to the egg, leaving the fire reveal intact. */
@media(min-width:701px){.b-legendary .b-growth-split .b-growth-heading{left:12%;width:43%}}

/* Lift the desktop illustration clear of the divider and enlarge around the mouth. */
.b-legendary .b-hero-hatch .b-skin{transform:scale(1.08);transform-origin:97% 61.5%}
@media(min-width:701px){
 .b-legendary .b-shell{top:calc(var(--hero-center) - 294.5px)}
 .b-legendary .b-hero-hatch{top:calc(var(--hero-center) - 209.5px)}
.b-legendary .b-shell-top{transform:translate(calc(-50% + var(--hatch)*90px),calc(var(--hatch)*-34px)) rotate(calc(var(--hatch)*25deg + var(--shell-tremor,0deg)))}
 .b-legendary .b-fire-cameo-evidence{left:var(--work-dragon-left,auto);right:auto}
}

/* Keep the mobile landing beside its smoke and directly beneath the closing line. */
@media(max-width:700px){
 .b-legendary .b-footer>div.b-footer-closing:not(.b-footer-landing){gap:40px;padding:0;min-height:0}
 .b-legendary .b-footer-closing .b-footer-story{height:calc(min(300px,72vw) * 2 / 3);min-height:0;padding:0}
 .b-legendary .b-footer>div.b-footer-bottom:not(.b-footer-landing){gap:24px;padding-top:30px;min-height:0}
 .b-legendary .b-footer-landing .b-nostril-smoke{width:calc(var(--landing-w) * .2)}
}
/* Above the approved 1070px layout, follow the egg's left edge with a fixed
   reading gap. Its center is 73%; the two shell widths are 350px and 410px. */
@media(min-width:1071px){.b-legendary .b-growth-split .b-growth-heading{left:auto;right:calc(27% + 175px + 123px);width:max-content}}
@media(min-width:1500px){.b-legendary .b-growth-split .b-growth-heading{right:calc(27% + 205px + 123px)}}
@media(min-width:1071px){.b-legendary .b-growth-end{left:var(--ending-left,7%)}}
@media(min-width:1500px){.b-legendary .b-shell-bottom{transform:translate(calc(-50% + var(--hatch)*20px),calc(var(--hatch)*12px)) rotate(calc(var(--hatch)*7deg + var(--shell-tremor,0deg)))}}