/* The systems building workshop page (Jose, 2026-10-27; its method: docs/content-drafts/SYSTEMS-BUILDING-METHOD.md): the
   rules its own sections need, loaded after the production service-pages.css. */
.hero--sys .hero-visual{max-width:520px}
.hero--sys .hero-proof{max-width:640px}
.hero--sys .hero-proof img{height:26px;width:auto}
.hero--sys .hero-proof b{color:var(--paper)}
/* hero: what is not a system (the deck's list), then what is */
.notsys{padding:clamp(24px,3vw,34px);border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.notsys-k{font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--muted)}
.notsys ul{margin-top:12px}
.notsys li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-weight:300;font-size:clamp(19px,1rem + .4vw,23px);line-height:1.25;color:var(--soft)}
.notsys .x{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--red)}
.notsys-yes{margin-top:18px;display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;padding:16px 18px;border-radius:6px;background:var(--lemon);color:var(--ink);font-size:16.5px;line-height:1.45}
.notsys-yes .ok{font-weight:700}
/* the noise: activity and output up, results flat */
.noise-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px 64px;align-items:center}
.noise-grid .lede+.lede{margin-top:16px}
.noise{padding:clamp(22px,3vw,32px);border:1px solid var(--paper-line);border-radius:10px;background:var(--card)}
.noise-k{font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--ink-soft)}
.nbar{margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px 14px;align-items:center}
.nbar-k{grid-column:1/-1;font-size:15.5px;font-weight:700;line-height:1.3}
.nbar-fill{height:22px;border-radius:3px;background:var(--ink)}
.nbar.flat .nbar-fill{width:24%;background:var(--red-btn)}
.nbar-v{font-size:14px;font-weight:700;color:var(--ink-soft)}
.nbar.flat .nbar-v{color:var(--red-btn)}
/* three pillars */
.pillars{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pillar{padding:clamp(24px,2.6vw,32px);border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.pillar .pn{font-family:var(--display);font-size:20px;line-height:1;color:var(--lemon)}
.pillar h3{margin-top:12px;font-family:var(--display);font-weight:400;font-size:clamp(34px,1rem + 1.6vw,48px);line-height:1;text-transform:uppercase}
.pillar p{margin-top:14px;font-size:17px;line-height:1.55;color:var(--soft)}
.pillar p b{color:var(--paper)}
/* one owner, one KPI: dashboards at three levels and the weekly questions */
.levels{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.level{padding:26px;border:1px solid var(--paper-line);border-radius:var(--r);background:var(--card)}
.level-k{font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--red-btn)}
.level h3{margin-top:10px;font-family:var(--serif);font-weight:400;font-size:clamp(22px,1rem + .5vw,27px);line-height:1.2}
.level p{margin-top:10px;font-size:16.5px;line-height:1.5;color:var(--ink-soft)}
.weekly{margin-top:24px;padding:clamp(22px,3vw,32px);border-radius:10px;background:var(--ink);color:var(--paper)}
.weekly-k{font-size:14px;font-weight:700;line-height:1.4;color:var(--muted)}
.weekly ol{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 32px}
.weekly li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;font-family:var(--serif);font-weight:300;font-size:clamp(20px,1rem + .4vw,24px);line-height:1.25}
.weekly li b{font-family:var(--display);font-weight:400;color:var(--lemon)}
/* six phases */
.phases{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;border-top:1px solid var(--line)}
.phases li{padding:26px 0 28px;border-bottom:1px solid var(--line)}
.ph-n{font-family:var(--display);font-size:56px;line-height:1;color:var(--red)}
.phases h3{margin-top:12px;font-size:20px;line-height:1.3}
.phases p{margin-top:8px;font-size:16.5px;line-height:1.5;color:var(--soft)}
.phases-note{margin-top:30px;max-width:820px;font-size:17px;line-height:1.55;color:var(--soft)}
.phases-note b{color:var(--paper)}
/* the results-oriented leader fallacy */
.fallacy{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fal{margin:0;padding:clamp(24px,3vw,32px);border-radius:10px}
.fal.before{background:var(--paper-2);color:var(--ink)}
.fal.after{background:var(--ink);color:var(--paper)}
.fal-k{font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--ink-soft)}
.fal.after .fal-k{color:var(--lemon)}
.fal blockquote p{margin-top:14px;font-family:var(--serif);font-weight:300;font-size:clamp(22px,1rem + .7vw,30px);line-height:1.22;letter-spacing:-.01em}
.fal figcaption{margin-top:16px;font-size:15px;font-weight:700}
.fal.before figcaption{color:var(--red-btn)}
.fal.after figcaption{color:var(--lemon)}
#leaders .lede{max-width:820px}
.owner-line{margin-top:24px;max-width:820px;padding:18px 22px;border-left:3px solid var(--red-btn);background:var(--card);font-size:17px;line-height:1.55;color:var(--ink-soft)}
.owner-line b{color:var(--ink)}
/* when is a system done: the checklist */
.done{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--line);counter-reset:done}
.done li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.5;counter-increment:done}
.done li::before{content:counter(done,decimal-leading-zero);font-family:var(--display);font-size:20px;line-height:1.2;color:var(--lemon)}
/* the case */
.case-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px 64px;align-items:center}
.case-grid .lede+.lede{margin-top:16px}
.case-vid .vid{min-height:340px}
.case-more{margin-top:20px;font-weight:700}
#coach .bio2{margin-top:36px}
@media (max-width:1180px){.hero--sys .hero-visual{max-width:560px}}
@media (max-width:980px){
  .noise-grid,.case-grid,.fallacy{grid-template-columns:minmax(0,1fr)}
  .pillars,.levels{grid-template-columns:minmax(0,1fr)}
  .phases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .weekly ol{grid-template-columns:minmax(0,1fr)}
  .case-vid .vid{min-height:260px}
}
@media (max-width:640px){.phases,.done{grid-template-columns:minmax(0,1fr)}}
.done-cta{margin-top:36px}
/* the closing band: as the go-to-market workshop's */
.book.sys-book h2{font-size:clamp(44px,1.3rem + 3vw,84px)}
.book.sys-book h2 em{font-style:normal;color:var(--red)}
.sys-book .gets{margin-top:30px;max-width:560px}
.sys-book .gets .qs-k{color:var(--muted)}
.sys-book .gets .plain-list li{font-size:16.5px}
/* big type wraps in even lines; the call button breaks in two even halves on phones; labels with AA contrast */
.hook span,.hook em,.display,.talk,.book h2{text-wrap:balance}
.cta-row .btn{text-wrap:balance}
#voice .h2-seo{color:#ffe3ea}
.notsys-k b{color:#ff6b8b}
.pillars-note{margin-top:22px;max-width:760px;font-size:16.5px;line-height:1.55;color:var(--muted)}
#noise .lede b{color:var(--ink)}