/* StageHeading: the step trail, title, description and tools align in every step. */
:root { --stage-title-size:clamp(30px,3vw,40px); }
.stage { max-width:1320px; min-height:calc(100dvh - 100px); margin:auto; padding:24px 30px 28px; outline:none; }
.stage-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 24px; margin:0 0 20px; }
.stage-title { display:contents; }
.stage-title>.stage-steps,.stage-title>.eyebrow { grid-column:1/-1; grid-row:1; margin-bottom:6px; }
.stage-title>h1 { grid-column:1; grid-row:2; margin:0; font-size:var(--stage-title-size); line-height:1.3; letter-spacing:-1.3px; word-break:keep-all; }
.stage-title>p { grid-column:1/-1; grid-row:3; margin:0; color:var(--muted); font-size:14px; line-height:1.7; word-break:keep-all; }
.context-tools { grid-column:2; grid-row:2; display:flex; align-items:center; justify-content:flex-end; gap:10px; width:auto; }
.stage-heading.steps-only { display:block; margin-bottom:16px; }
.stage-heading.steps-only .stage-steps { margin:0; }
.week-cover-copy>h1 { margin:8px 0 6px; font-size:var(--stage-title-size); line-height:1.3; letter-spacing:-1.3px; word-break:keep-all; }
@media(min-width:801px) and (max-height:800px) { .stage { padding-top:18px; } }
@media(max-width:820px) { .stage { padding-inline:25px; } }
@media(max-width:600px) {
 :root { --stage-title-size:clamp(27px,7vw,32px); }
 .stage { padding:20px 20px 28px; min-height:calc(100dvh - 112px); }
 .stage-heading { gap:8px 12px; }
 .stage-title>p { font-size:13px; }
 .context-tools { gap:8px; }
 .context-tools .relationship-help { width:40px; height:40px; font-size:21px; }
 .context-tools .icon { width:19px; height:19px; }
 .week-cover-copy>h1 { font-size:26px; }
}