/* Editorial system page: the same content and components as Composer's Method. */
.system-page{--blue:#477ff3;--red:#ea5865;--yellow:#eab93f;--green:#45a474;--purple:#8966cb;--surface-soft:var(--surface);--tint:var(--accent-soft);padding-bottom:52px}
.system-intro{padding-block:128px 64px;grid-template-columns:1fr .95fr;align-items:start;row-gap:0}
@media(min-width:1001px){.system-intro{padding-left:76px;padding-right:36px}}
.system-intro h1{font-size:var(--font-display);line-height:1.16}
.system-intro-eyebrow{grid-column:1;grid-row:1;margin:0 0 24px;color:var(--ink)}
.system-intro>div{grid-column:1;grid-row:2}
.system-intro>.system-modules{grid-column:2;grid-row:1 / 3}
.system-intro .guide-lead{max-width:560px}
.system-intro .guide-lead+.guide-lead{margin-top:18px}
.system-page .method-section{display:grid;grid-template-columns:260px minmax(0,1fr);gap:55px;padding:36px 0;border-top:1px solid var(--line)}
.system-page .method-section-title{font-size:var(--font-title);font-weight:620;line-height:1.2;margin:0 0 16px;letter-spacing:-.04em}
.system-page .method-intro>p{font-size:var(--font-small);line-height:1.7}
.system-page :is(.method-color-grid,.method-kit-grid){gap:14px;margin-bottom:14px}
.system-page :is(.method-color-card,.method-kit-card){padding:20px;border-radius:14px}
.system-page :is(.method-color-card,.method-kit-card) :is(h3,h4){font-size:var(--font-lead);font-weight:600}
.system-page :is(.method-color-card,.method-kit-card) p{font-size:var(--font-small);color:var(--muted);line-height:1.65}
.system-page .method-color-card{gap:12px}
.system-page .legend-grid{gap:14px;margin:0}
.system-page .legend-card{padding:16px;gap:12px}
.system-page .legend-card strong{font-weight:600}
.system-page .legend-card span{font-size:var(--font-small);line-height:1.65}
.system-page .method-readiness{max-width:680px;margin:0 auto 40px;color:var(--muted);font-size:var(--font-small)}
.system-cta{padding:56px 0;border-block:1px solid var(--line)}
.system-cta h2{font-size:clamp(28px,3vw,42px);font-weight:450;letter-spacing:-.04em;line-height:1.2}
.system-cta>p{max-width:620px;margin:20px auto var(--content-cta-space);color:var(--muted);line-height:1.8}
@media(max-width:1000px){.system-page .method-section{grid-template-columns:200px minmax(0,1fr);gap:28px}.system-page .method-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){
 .system-intro{grid-template-columns:1fr;padding-top:36px}
 .system-intro-eyebrow{grid-column:1;grid-row:1;margin:0 0 22px}
 .system-intro .system-modules{grid-column:1;grid-row:2;order:0;max-width:420px;margin:0 auto 26px}
 .system-intro>div{grid-column:1;grid-row:3}
 .system-page .method-section{grid-template-columns:1fr;gap:12px;padding-block:30px}
 .system-page .method-section:first-child .method-section-title{text-align:center}
 .system-page .method-color-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;gap:8px}
 .system-page .legend-grid{grid-template-columns:1fr}
 .system-page .method-color-card{grid-template-columns:minmax(0,1fr);padding:16px;gap:10px}
 .system-cta{padding-block:36px}
}
@media(max-width:360px){.system-page .method-color-card{padding:12px}}
@media print{.system-page .method-section{break-inside:avoid}.system-page .guide-cta{display:none}}

.system-color-art{max-width:220px;margin:4px auto}
.system-page .method-form-art{width:120px;aspect-ratio:1;margin:0 auto 14px;background:none;border:0;padding:0}
.method-form-art>svg{display:block;width:100%;height:100%}
.system-page .method-form-card h3{display:flex;align-items:center;gap:8px}
.system-page .method-form-card h3 .icon{width:18px;height:18px;flex:none;fill:none;stroke-width:3px}
@media(max-width:1000px){
 .system-page .method-kit-grid:not(.method-extras-grid){grid-template-columns:1fr}
 .system-page .method-form-card{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:16px}
 .system-page .method-form-art{width:100%;margin:0}
}

@media(max-width:720px){
 .system-intro{padding-bottom:var(--content-section-space)}
 .system-page .method-section{padding-block:var(--content-section-space)}
 .system-page .method-readiness{margin-bottom:var(--content-section-space)}
 .system-cta{padding:var(--content-section-space) 0 0;border-bottom:0}
}

@media(max-width:720px){
 .system-page .method-intro>p,
 .system-page :is(.method-color-card,.method-kit-card) p,
 .system-page .legend-card span,.system-page .method-readiness{font-size:var(--font-body)}
 .system-cta>p{font-size:var(--font-body)}
}