/* Module pages. Builds on site-base.css tokens and the shared components in home.css (bt-*, sp-*, h-cta).
   Content pages load this file too. */

.cp-alt{background:var(--c-subtle)}
.cp-head-left{text-align:left;margin-left:0}

.mp-hero{position:relative;padding:var(--s-6) 0 var(--s-8);isolation:isolate}
.mp-hero::before{content:"";position:absolute;inset:-68px 0 auto;height:640px;z-index:-1;pointer-events:none;background:radial-gradient(50% 60% at 75% 10%,var(--c-primary-soft),transparent 70%)}
.mp-crumbs{display:flex;flex-wrap:wrap;gap:var(--s-2);font-size:var(--fs-14);color:var(--c-muted)}
.mp-crumbs a:hover{color:var(--c-text)}
.mp-crumbs [aria-current]{color:var(--c-text);font-weight:500}
.mp-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s-8);align-items:center;margin-top:var(--s-7)}
.mp-hero h1{margin-top:var(--s-4);font-size:clamp(var(--fs-32),4vw,var(--fs-44));line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
.mp-lede{margin-top:var(--s-5);font-size:var(--fs-18);line-height:1.6;color:var(--c-muted);text-wrap:pretty}
.mp-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.mp-frame{border-radius:var(--r-panel);background:var(--c-surface);box-shadow:0 2px 4px #0b17300a,0 32px 80px -36px color-mix(in srgb,var(--c-primary) 40%,transparent),inset 0 0 0 1px var(--c-line);overflow:hidden}
.mp-frame-body{padding:var(--s-6)}
.mp-frame-body .bt-gantt{background:none;padding:0}

.mp-hero-catalog{padding-bottom:0}
.mp-catalog-head{max-width:820px;margin-top:var(--s-7)}
.mp-catalog-head h1{font-size:clamp(var(--fs-32),4vw,var(--fs-44))}
.mp-catalog{padding-top:var(--s-8)}
.mp-catalog .bt{min-height:0}
.mp-catalog .bt-grid{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (max-width:1000px){.mp-catalog .bt-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.mp-catalog .bt-grid{grid-template-columns:1fr}}
.mp-more{font-size:var(--fs-14);font-weight:600;color:var(--c-primary)}

.mp-spec{border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);background:var(--c-surface)}
.mp-spec-grid{display:grid;grid-template-columns:repeat(3,1fr);margin:0}
.mp-spec-grid>div{padding:var(--s-6) var(--s-5)}
.mp-spec-grid>div+div{border-left:1px solid var(--c-line)}
.mp-spec-grid dt{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-14);font-weight:600;color:var(--c-muted)}
.mp-spec-grid .h-icon{width:36px;height:36px}
.mp-spec-grid .h-icon svg{width:18px;height:18px}
.mp-spec-grid dd{margin:var(--s-3) 0 0;font-size:var(--fs-16);line-height:1.55;color:var(--c-text)}

.mp-steps .h-head,.mp-case .h-head,.mp-related .h-head{text-align:left;margin-left:0;margin-bottom:var(--s-7)}
.mp-step-list{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
.mp-step-track{position:absolute;left:18px;right:calc(25% - 18px);top:17px;height:2px;background:var(--c-line)}
.mp-step-track i{position:absolute;inset:0;background:var(--c-primary);transform-origin:left;transform:scaleX(var(--p,0))}
.mp-step-list li{position:relative}
.mp-step-n{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--c-surface);box-shadow:inset 0 0 0 1.5px var(--c-primary);color:var(--c-primary);font-size:var(--fs-14);font-weight:650}
.mp-step-list h3{margin-top:var(--s-4);font-size:var(--fs-18)}
.mp-step-list p{margin-top:var(--s-2);font-size:var(--fs-16);color:var(--c-muted);line-height:1.6}

.mp-case{background:var(--c-subtle)}
.mp-case-grid{display:grid;grid-template-columns:1fr 56px 1.4fr;gap:var(--s-4);align-items:stretch}
.mp-case-arrow{align-self:center;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--c-primary);color:var(--c-on-primary);box-shadow:var(--glow)}
.mp-case-arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mp-case-card.is-ok{box-shadow:inset 0 0 0 1.5px var(--c-primary)}
.mp-case-card{padding:var(--s-6);border-radius:var(--r-card);background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line)}
.mp-case-card.is-warn{background:var(--c-warn-soft);box-shadow:none}
.mp-case-card.is-warn .sp-label{color:var(--c-warn)}
.mp-case-card h3{margin-top:var(--s-3);font-size:var(--fs-24);line-height:1.3}
.mp-case-card>p:not(.sp-label){margin-top:var(--s-3);font-size:var(--fs-16);line-height:1.65;color:var(--c-text)}
.mp-chain{margin-top:var(--s-5);padding:var(--s-5) var(--s-6);border-radius:var(--r-card);background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line)}
.mp-chain ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-3)}
.mp-chain li{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-14);font-weight:600;color:var(--c-text);white-space:nowrap;font-variant-numeric:tabular-nums}
.mp-chain li span{padding:4px 10px;border-radius:var(--r-chip);background:var(--c-subtle);box-shadow:inset 0 0 0 1px var(--c-line)}
.mp-chain li+li::before{content:"";width:24px;height:2px;background:var(--c-primary);opacity:.6;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);transition-delay:calc(.25s + var(--r) * 220ms)}
.mp-chain li span{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s var(--ease-spring);transition-delay:calc(var(--r) * 220ms + .1s)}
.is-in .mp-chain li span,.mp-chain.is-in li span{opacity:1;transform:none}
.mp-chain.is-in li+li::before{transform:none}
.mp-chain li:last-child span{background:var(--c-primary);color:var(--c-on-primary);box-shadow:none}

.mp-prep-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--s-9);align-items:start}
.mp-prep h2{margin-top:var(--s-3);font-size:clamp(var(--fs-24),3vw,var(--fs-32))}
.mp-prep-text{margin:var(--s-4) 0 var(--s-5);font-size:var(--fs-18);line-height:1.6;color:var(--c-muted)}

.mp-related{padding-top:0}
.mp-related-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-4)}
.mp-related-grid a{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);border-radius:var(--r-card);background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line);transition:transform .3s var(--ease),box-shadow .3s}
.mp-related-grid a:hover{transform:translateY(-3px);box-shadow:var(--shadow-card),inset 0 0 0 1px var(--c-primary)}
.mp-related-grid .bt-tag{align-self:flex-start}
.mp-related-grid strong{font-size:var(--fs-16);font-weight:600;color:var(--c-text);line-height:1.35}
.mp-related-grid span:not(.bt-tag){font-size:var(--fs-14);color:var(--c-muted);line-height:1.5}
.mp-related-grid b{margin-top:auto;color:var(--c-primary)}

@media (max-width:1000px){
  .mp-hero-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .mp-step-list{grid-template-columns:1fr 1fr}
  .mp-step-track{display:none}
  .mp-related-grid{grid-template-columns:repeat(3,1fr)}
  .mp-prep-grid{grid-template-columns:1fr;gap:var(--s-6)}
}
@media (max-width:760px){
  .mp-spec-grid{grid-template-columns:1fr}
  .mp-spec-grid>div+div{border-left:0;border-top:1px solid var(--c-line)}
  .mp-spec-grid>div{padding:var(--s-5) 0}
  .mp-step-list{grid-template-columns:1fr}
  .mp-case-grid{grid-template-columns:1fr}
  .mp-case-arrow{justify-self:center;transform:rotate(90deg);width:44px;height:44px}
  .mp-related-grid{grid-template-columns:1fr 1fr}
  .mp-frame-body{padding:var(--s-4)}
  .mp-actions .btn{flex:1 1 100%}
}