/* Tactile workflow mosaic: preserve the material, with colour for each role. */
:root{--paper:#fafaf7;--ink:#202936;--muted:#5b6471;--line:#dce1e6;--rust:#244ad2;--forest:#172b37;--focus:#244ad2}
.hero{grid-template-columns:.92fr 1.22fr;gap:40px;padding-top:55px;padding-bottom:45px;min-height:720px}
.hero h1{font-size:clamp(48px,5.65vw,82px);line-height:1.05;letter-spacing:-.055em;margin:27px 0}
.hero-description{max-width:425px;font-size:17px;line-height:1.7;color:#536172}
.hero .eyebrow{font-size:10px;letter-spacing:.12em;color:#536172}
.primary{background:var(--rust);color:#fff}
.primary:hover{background:#1738ad}
.hero-art{min-width:0}
.workflow-context{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:0 0 14px;margin:0 0 8px;color:#536172;font:10px/1.5 ui-monospace,monospace;letter-spacing:.04em}
.workflow-context>span:first-child{color:var(--ink);font-weight:600}
.mosaic-stage{position:relative;overflow:hidden;aspect-ratio:1602/981;background:#f6f0e4;isolation:isolate}
.mosaic-plane{position:absolute;inset:0;transform-origin:0 0}
.mosaic-artwork,.mosaic-focus{display:block;width:100%;height:100%;object-fit:contain}
.mosaic-focus{position:absolute;inset:0;pointer-events:none}
.mosaic-stage[data-selected="1"] .mosaic-artwork,.mosaic-stage[data-selected="2"] .mosaic-artwork,.mosaic-stage[data-selected="3"] .mosaic-artwork,.mosaic-stage[data-selected="4"] .mosaic-artwork{opacity:.28}
.mosaic-player{display:flex;gap:18px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:14px;padding:3px 0}
.mosaic-player button{border:0;background:none;padding:12px 0;min-height:44px;color:var(--rust);font-size:11px;white-space:nowrap;text-align:left}
#mosaic-play{min-width:100px}
.mosaic-zoom-control{display:flex;align-items:center;gap:9px;font-size:10px;color:var(--muted);min-width:0;flex:1;max-width:270px}
.mosaic-zoom-control input{width:100%;min-width:60px;accent-color:var(--rust);cursor:ew-resize;height:28px}
.mosaic-stage.is-ready{cursor:crosshair}
.workflow-context{min-height:31px}
.hero-art figcaption{align-items:start;gap:20px;padding-top:17px;padding-bottom:8px;margin-top:18px}
.art-caption-title{display:block;font:500 17px/1.35 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:var(--ink);letter-spacing:-.02em}
.art-caption-detail{display:block;max-width:460px;min-height:40px;margin-top:8px;font-size:12px;line-height:1.7;color:var(--muted)}
.follow-button{flex:none;border:0;border-bottom:1px solid #a3b3cd;background:transparent;color:var(--rust);padding:7px 0;font-size:11px;line-height:1.4;min-height:36px}
.follow-button:hover{border-bottom-color:var(--rust)}
.piece-controls .swatch.context{background:#f06a39}
.piece-controls .swatch.intelligence{background:#3259e8}
.piece-controls .swatch.policy{background:#f3bd39}
.piece-controls .swatch.people{background:#b94c2c}
.piece-controls .swatch.systems{background:#008f83;border:0}
.piece-example{grid-column:2;justify-self:start;margin:0;font-size:11px;line-height:1.7;color:var(--rust);border-bottom:1px solid currentColor;padding:3px 0}
.composition-note{max-width:800px;min-height:36px}
.perspective{background:#eef2f6}
.perspective .section-head p,.fragment p,.whole>p{color:#536172}
.case-steps{background:#eef2f6}
.case-steps button{color:#536172}
.case-steps button[aria-selected=true]{background:var(--paper);color:var(--ink)}
.case-steps small{color:#536172}
.operation-strip li:nth-child(2){background:#244ad2}
.operation-strip li:nth-child(3){background:#b84b24}
.operation-strip li:nth-child(4){background:#00796f}
.moss-intro em,.moss-letter{color:#f3bd39}
.moss-intro .eyebrow,.moss-intro p,.moss-domain p,.moss-connection,.principles-heading>p,.principles-list p{color:#cbd7df}
.moss-domain,.moss-connection{border-color:#546978}
.moss-domain:nth-child(2) .moss-letter{color:#8da7ff}
.moss-domain:nth-child(3) .moss-letter{color:#64cfbd}
.moss-domain:nth-child(4) .moss-letter{color:#ff916b}
@media(max-width:1100px) and (min-width:761px){
  .hero{gap:25px;min-height:640px;grid-template-columns:1fr 1.12fr}
  .hero h1{font-size:clamp(43px,5.6vw,62px)}
  .hero-description{font-size:15px}
  .hero-art figcaption{flex-direction:column;gap:3px}
  .art-caption-detail{min-height:61px}
}
@media(max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:38px;padding-bottom:22px;gap:36px;min-height:0}
  .hero h1{font-size:clamp(42px,8vw,58px);margin:23px 0;max-width:540px}
  .hero-description{font-size:16px}
  .hero-art{max-width:600px;margin:0 auto}
  .workflow-context{font-size:9px;gap:15px;padding-bottom:10px}
  .hero-art figcaption{gap:10px;padding-top:15px;margin-top:12px}
  .art-caption-title{font-size:15px}
  .art-caption-detail{font-size:11px;min-height:76px}
  .follow-button{font-size:10px;padding-top:3px;min-width:105px;text-align:right}
  .piece-example{grid-column:1}
  .composition-note{min-height:54px}
  .mosaic-player{display:grid;grid-template-columns:1fr 1fr;gap:0 15px;padding:3px 0 8px}
  .mosaic-zoom-control{grid-column:1/-1;grid-row:2;max-width:none;width:100%}
  #mosaic-finish{text-align:right}
}
@media(max-width:360px){.hero h1{font-size:37px}.hero-art figcaption{flex-direction:column;gap:2px}.art-caption-detail{min-height:57px}.follow-button{text-align:left;min-width:0}}