/* About shares the document scroll and chrome of the public content pages. */
html[data-page="about"]{--blue:var(--rainbow-text-blue);--red:var(--rainbow-text-red);--yellow:#eab93f;--green:var(--rainbow-text-green);--purple:var(--rainbow-text-purple);--yellow-ink:var(--rainbow-text-yellow)}
#guidePage{max-width:none;margin:0;padding:0;overflow:visible}
.guide-inner{padding-bottom:calc(52px + var(--guide-scroll-tail,0px))}
#guidePage .guide-nav{top:var(--site-header-height,80px)}
html[data-page="about"] .shop-header.is-scrolled{box-shadow:none}
#guideSystem>.guide-domains{margin-bottom:72px}
/* Keep About's hero sections flush with their section indices. */
#guidePage .guide-hero{padding:0 0 36px}
@media(max-width:720px){#guidePage .guide-hero{padding:0 0 30px}}
@media(min-width:1001px){#guideSystem>.guide-hero{padding-right:48px}}
.guide-essentials{--kit-art-height:160px;--kit-art-gap:22px}
.guide-essentials .guide-kit-art{height:var(--kit-art-height);margin-bottom:var(--kit-art-gap)}
.guide-service .guide-hero>figure{width:100%;max-width:420px}
.service-paths .guide-art{display:flex;align-items:center;width:100%;max-width:420px;height:220px;margin:0 0 20px}
.service-paths .on-demand-art{max-width:380px}
.guide-mission .guide-cta .editorial-art{max-width:450px}
@media(max-width:720px){
 #guideSystem>.guide-domains{margin-bottom:56px}
 .guide-start-cta{padding:var(--content-cta-space) 0 0}
 .guide-essentials{--kit-art-height:180px;--kit-art-gap:20px}
 .guide-essentials>.guide-icon-heading{justify-content:center;align-items:center;text-align:center}
 .guide-essentials>.guide-icon-heading>.icon{margin-top:0}
 .guide-essentials .minor,.service-path-copy .minor{justify-content:center;text-align:center}
 .guide-essentials h4{font-size:var(--font-title);font-weight:500;text-align:center;margin-bottom:16px}
 .service-path-copy h3{text-align:center}
 .service-paths .guide-art{height:auto;margin-bottom:32px}
}

.guide-purpose { justify-content:flex-start; align-items:center; gap:25px; row-gap:var(--content-cta-space); }
.service-paths>.guide-purpose {grid-column:1/-1;width:100%;padding:0}
.mission-mark { width:74px; height:74px; flex:0 0 74px; color:var(--ink); }
.guide-purpose p { max-width:540px; }
.guide-art .bulk-label { font-weight:750; font-size:var(--font-note); fill:var(--ink); letter-spacing:1px; }
.guide-art [data-guide-product] > svg { display:block; width:100%; height:100%; overflow:visible; }
.guide-steps .guide-step h4 { min-height:0; }

@media(max-width:720px){.mission-mark{width:49px;height:49px;flex-basis:49px}.guide-purpose{gap:15px;align-items:flex-start}.guide-purpose p{font-size:var(--font-body)}}

/* Cropped service diagrams retain their screen-space strokes and label sizes. */
@media(min-width:721px){
 .guide-service .guide-hero{grid-template-columns:1fr 0.98fr}
 .guide-mission .mission-copy{margin-top:80px}
 .service-paths .service-illustration{max-width:calc(180px * 514 / 266)}
 .service-paths .service-illustration>svg{max-height:180px}
 .service-paths article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center;gap:48px;border-top:0;padding-top:0}
 .service-paths .guide-art{margin:0}
 .guide-service .guide-hero>div{grid-column:2;grid-row:1}
 .guide-service .guide-hero>figure{grid-column:1;grid-row:1;justify-self:end;align-self:center}
 .service-paths .art-text{font-size:calc(10px * var(--service-label-scale,1));letter-spacing:calc(1.4px * var(--service-label-scale,1));font-weight:600}
}

.guide-icon-heading{display:flex;align-items:flex-start;gap:12px}
.guide-icon-heading>.icon{width:24px;height:24px;flex:none;margin-top:2px}
@media(max-width:720px){
 .guide-inner{padding-bottom:calc(var(--content-section-space) + var(--guide-scroll-tail,0px))}
 .guide-service .guide-hero>figure{max-width:280px;margin-inline:auto}

 #guideSystem>.guide-domains{display:none}
 .guide-block{padding-block:var(--content-section-space)}
 .guide-cta{padding:var(--content-section-space) 0 0}
 .guide-purpose{padding-top:var(--content-section-space);row-gap:var(--content-cta-space)}
 .guide-break{margin-top:var(--content-section-space)}
 .service-paths{row-gap:var(--content-section-space);padding-bottom:104px}
 .service-paths article{border-top:0;padding-top:var(--content-section-space)}
 .service-paths article:first-child{padding-top:0}
 /* Match the visible gap before the second service path with the gap before the promise block. */
 .service-paths>.guide-purpose{margin-top:var(--content-section-space)}
}