/* Guide and shared navigation. Tokens intentionally inherit from the Composer. */
[hidden] { display:none !important; }
.guide-page { min-width:0; min-height:0; overflow:auto; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.guide-inner { max-width:1440px; margin-inline:auto; padding:0 clamp(24px,5.5vw,84px) 52px; }
.guide-nav { --guide-nav-min:44px; --guide-nav-range:144px; --guide-nav-extra:var(--guide-nav-range); --guide-nav-progress:1; position:sticky; top:0; z-index:40; display:flex; align-items:center; height:calc(var(--guide-nav-min) + var(--guide-nav-extra)); margin-bottom:calc(var(--guide-nav-range) - var(--guide-nav-extra)); padding:10px 0; overflow-anchor:none; }
.guide-nav .guide-link { font-size:var(--font-control); }
.guide-nav-links { display:flex; align-items:center; gap:24px; width:100%; max-width:1440px; margin-inline:auto; padding-inline:clamp(24px,5.5vw,84px); }
@media(min-width:721px){
 .guide-nav-links{justify-content:center;gap:calc(24px + 20px * var(--guide-nav-progress))}
 .guide-nav .guide-link{font-size:calc(var(--font-control) + 10px * var(--guide-nav-progress));font-weight:calc(500 - 150 * var(--guide-nav-progress))}
}
.guide-label-short { display:none; }
.guide-link { display:inline-flex; align-items:center; gap:8px; padding:4px 0; background:none; text-decoration:none; color:var(--muted); font-size:var(--font-button); font-weight:500; }
.guide-link[aria-current] { color:var(--ink); }
@media(hover:hover){.guide-link:hover { color:var(--ink); }}
.guide-link .icon { width:14px; height:14px; }
.guide-link .nav-index { font-size:var(--font-caption); color:var(--quiet); font-variant-numeric:tabular-nums; }
.guide-section { padding-top:24px; scroll-margin-top:20px; }
.guide-index { display:flex; align-items:center; gap:11px; font-size:var(--font-caption); letter-spacing:.14em; text-transform:uppercase; font-weight:650; color:var(--ink); }
.guide-index::before { content:""; width:22px; height:1px; background:currentColor; }
.guide-hero { display:grid; grid-template-columns:1fr 1.06fr; align-items:center; gap:40px; padding:32px 0 36px; }
.guide-hero h1,.guide-hero h2 { font-size:clamp(43px,4.8vw,72px); line-height:1.055; letter-spacing:-.06em; font-weight:450; margin:0 0 23px; }
.guide-hero h1:focus,.guide-hero h2:focus { outline:none; }
.guide-hero .second-line { color:var(--muted); font-weight:450; }
.guide-lead { font-size:18px; line-height:1.65; color:var(--muted); max-width:440px; margin:0; text-wrap:pretty; }
.guide-art { margin:0; min-width:0; }
.guide-art > svg { width:100%; height:auto; display:block; overflow:visible; }
.guide-art .art-ink { stroke:var(--ink); }
.guide-art .art-line { stroke:var(--line-strong); }
.guide-art .art-floor { stroke:var(--line); }
.guide-art .art-fill { fill:var(--panel-solid); }
.guide-art .art-text { fill:var(--ink); font:600 10px var(--font-app); letter-spacing:1.4px; }
.guide-art .art-label-line { stroke:var(--ink); }
.guide-art figcaption { font-size:var(--font-caption); color:var(--muted); line-height:1.6; text-align:center; margin-top:3px; }
.guide-domains { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; margin:5px 0 45px; }
.guide-domain { border-top:2px solid var(--domain); padding-top:15px; }
.guide-domain-label { display:flex; align-items:center; gap:8px; margin-bottom:10px; color:var(--domain-ink,var(--domain)); font-size:var(--font-caption); font-weight:600; letter-spacing:.08em; }
.guide-domain .icon { color:var(--domain-ink,var(--domain)); width:20px; height:20px; flex:none; }
.guide-domain h3 { font-size:16px; letter-spacing:-.01em; font-weight:650; margin:0 0 7px; }
.guide-domain p { margin:0; color:var(--muted); font-size:var(--font-small); line-height:1.65; }
.guide-domain-rainbow { display:none; position:relative; border-top:0; padding-top:17px; }
.guide-domain-rainbow::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,var(--blue) 0%,var(--blue) 17%,var(--red) 21%,var(--red) 37%,var(--yellow-ink) 41%,var(--yellow-ink) 57%,var(--green) 61%,var(--green) 77%,var(--purple) 81%,var(--purple) 100%); }
.guide-domain-rainbow .guide-domain-label { color:var(--ink); }
.guide-domain-rainbow .icon { color:var(--ink); }
/* Shared five-color bands with narrow blends; icon stops live in its SVG. */
.guide-domain-rainbow .rainbow-word { color:var(--ink); }
.guide-block { display:grid; grid-template-columns:260px minmax(0,1fr); gap:55px; padding:48px 0; border-top:1px solid var(--line); }
.guide-block h3 { font-size:23px; line-height:1.18; letter-spacing:-.04em; font-weight:620; margin:0; }
.guide-block-intro { font-size:var(--font-small); line-height:1.7; color:var(--muted); margin:0 0 22px; max-width:700px; }
.guide-three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.guide-small { min-width:0; }
.guide-kit-art { height:160px; margin:0 0 22px; }
.guide-kit-art > svg { height:100%; }
.guide-small h4 { font-size:17px; letter-spacing:-.015em; font-weight:650; margin:0 0 7px; }
.guide-small p { margin:0; font-size:var(--font-small); line-height:1.7; color:var(--muted); text-wrap:pretty; }
.guide-small .minor,.service-path-copy .minor { font-size:var(--font-caption); font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:var(--ink); display:block; margin-bottom:9px; }
.guide-footnote { color:var(--muted); font-size:var(--font-small); line-height:1.7; margin:20px 0 0; }
.guide-purpose { max-width:960px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:28px; padding:24px 0 0; }
.guide-purpose p { font-size:var(--font-small); line-height:1.65; max-width:540px; color:var(--muted); margin:0; }
.guide-purpose strong { color:var(--ink); font-weight:600; }
.guide-compose { text-decoration:none; flex:0 0 auto; font-size:var(--font-button); }
.guide-break { width:100%; height:70px; display:block; margin-top:25px; }
.guide-service .guide-hero { padding-bottom:43px; }
.guide-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; counter-reset:steps; }
.guide-step { position:relative; counter-increment:steps; }
.guide-step::before { content:"0" counter(steps); display:block; font-size:var(--font-caption); font-variant-numeric:tabular-nums; color:var(--quiet); margin-bottom:12px; }
.guide-step:not(:last-child)::after { content:""; position:absolute; left:28px; right:0; top:6px; height:1px; background:var(--line); }
.guide-step h4 { font-size:16px; line-height:1.3; font-weight:650; margin:0 0 9px; }
.guide-step p { font-size:var(--font-small); color:var(--muted); line-height:1.7; margin:0; }
.guide-notes { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:22px; padding-top:19px; border-top:1px solid var(--line); }
.guide-notes p { font-size:var(--font-small); line-height:1.7; color:var(--muted); margin:0; }
.guide-notes strong { font-weight:650; color:var(--ink); }
.guide-roadmap { margin-top:4px; }
@media (max-width:1000px) {
 .guide-inner,.guide-nav-links { padding-inline:32px; }
 .guide-hero { gap:20px; }
 .guide-block { grid-template-columns:200px minmax(0,1fr); gap:28px; }
 .guide-three { gap:20px; }
 .guide-steps { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:24px; }
}
@media (max-width:720px) {
 .guide-nav { --guide-nav-range:120px; }
 .guide-inner { padding:0 24px 36px; }
 .guide-nav-links { padding-inline:24px; }
 .guide-nav-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:calc(4px + 12px * var(--guide-nav-progress)); width:100%; }
 .guide-nav-links .guide-link { justify-content:center; }
 .guide-label-full { display:none; }
 .guide-label-short { display:inline; }
 .guide-nav .guide-link { font-size:calc(var(--font-control) + 4px * var(--guide-nav-progress)); font-weight:calc(550 - 100 * var(--guide-nav-progress)); letter-spacing:calc(.005em + .015em * var(--guide-nav-progress)); }
 .guide-nav .nav-index { display:none; }
 .guide-hero { grid-template-columns:1fr; gap:18px; padding:23px 0 30px; }
 .guide-hero > .guide-art { order:-1; }
 .guide-hero h1,.guide-hero h2 { font-size:clamp(41px,7.5vw,60px); margin-bottom:20px; }
 .guide-lead { font-size:18px; max-width:520px; }
 .guide-art { max-width:520px; width:100%; justify-self:center; margin-top:4px; }
 .guide-kit-art { height:180px; margin:0 0 20px; }
 .guide-art .art-text,.guide-art .art-label-line { display:none; }
 .guide-domains { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-bottom:32px; }
 .guide-domain-rainbow { display:block; }
 .guide-block { grid-template-columns:1fr; gap:20px; }
 .guide-block h3 { font-size:23px; }
 .guide-three { gap:22px; }
 .guide-purpose { align-items:flex-start; }
 .guide-purpose p { font-size:var(--font-small); }
 .guide-notes { grid-template-columns:1fr; gap:15px; }
 .guide-break { margin-top:15px; height:52px; }
}
@media(max-width:450px) {
 .guide-three { grid-template-columns:1fr; gap:20px; }
 .guide-small .minor,.service-path-copy .minor { margin-bottom:5px; }
 .guide-small h4 { margin-bottom:5px; }
 .guide-steps { gap:23px 20px; }
}
@media(prefers-reduced-motion:reduce) {
 .guide-nav { --guide-nav-range:0px; }
 ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root) { animation:none !important; }
 .guide-page { scroll-behavior:auto; }
}
@media print {
 .guide-page { overflow:visible; }
 .guide-nav,.guide-compose,.top-actions { display:none; }
 .guide-inner { max-width:none; padding:20px; }
 .guide-block,.guide-hero { break-inside:avoid; }
}

.guide-small p.guide-followup { margin-top:10px; }
.guide-small strong { color:var(--ink); font-weight:600; }

.service-paths{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;max-width:960px;margin:auto;padding-bottom:104px}
.service-paths article{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:24px}
.service-paths .guide-art{margin:0 0 20px}
.service-path-copy h3{font-size:25px;font-weight:450;letter-spacing:-.035em;margin:10px 0}
.service-path-copy p{font-size:var(--font-small);line-height:1.7;color:var(--muted);max-width:490px}
.service-path-copy .minor{display:flex;align-items:center;gap:8px}
.service-path-copy .minor .icon{width:18px;height:18px;flex:none}
.guide-small .minor{display:flex;align-items:center;gap:8px}
.guide-small .minor .icon{width:12px;height:12px;flex:none;fill:currentColor}
.guide-kit-art + .minor .icon{fill:none;stroke-width:3.6px}
.guide-cta{text-align:center;padding:40px 0 18px}
.guide-cta h3{font-size:27px;font-weight:450;letter-spacing:-.035em;margin:0 0 var(--content-cta-space)}
.guide-cta-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.guide-cta .editorial-art{max-width:360px;margin:0 auto 16px}
.guide-purpose .button{flex:none}
.mission-copy{max-width:620px;text-align:left;margin:40px auto 28px}
.guide-mission .guide-cta{padding-top:0}
.mission-copy h2{font-size:clamp(30px,3vw,44px);font-weight:450;letter-spacing:-.05em;line-height:1.15}
.mission-copy h2 span{color:var(--muted)}
.mission-copy p{font-size:var(--font-small);line-height:1.9;color:var(--muted);margin:20px 0}
@media(max-width:1000px){.guide-purpose{flex-wrap:wrap}.guide-purpose p{flex:1;min-width:230px}}
@media(max-width:720px){.service-paths{grid-template-columns:1fr;gap:26px}.guide-purpose .button{margin-left:0;width:100%}.guide-cta-actions .button{width:100%}.guide-cta{padding:30px 0 12px}}

/* Consistent apparent line weight, including scaled symbols and fine kit outlines. */
.guide-art :is(path,polyline,polygon,line,circle,ellipse,rect):not([data-guide-product] *),
.mission-mark :is(path,circle),.guide-break path,.guide-art .guide-outline {stroke-width:1.8px;vector-effect:non-scaling-stroke}
/* The On demand home is self-contained: do not rely on the other illustration's reused symbol. */
.on-demand-art .on-demand-house path:not([stroke="none"]) {stroke-width:2.5px;vector-effect:non-scaling-stroke}

/* Reading pages: larger mobile prose, without enlarging captions or controls. */
@media(max-width:720px){
 .guide-lead{font-size:20px;line-height:1.6}
 .guide-domain p,.guide-block-intro,.guide-small p,.guide-footnote,
 .guide-purpose p,.guide-step p,.guide-notes p,.service-path-copy p,
 .mission-copy p{font-size:var(--font-body)}
}
