/* Static site migration: a before-and-after of what actually runs, then the benefits. */
.static-defence{background:#e8dfef}
.static-defence-intro{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start}
.static-defence-intro h2{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.1;letter-spacing:-.04em;margin:0;max-width:16ch}
.static-defence-intro>p{font-size:1.1rem;line-height:1.75;margin:0;max-width:55ch}

.static-stacks{display:grid;grid-template-columns:1fr auto 1fr;gap:0 34px;align-items:stretch;margin-top:48px}
.static-stack{display:flex;flex-direction:column;margin:0;padding:32px;background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--radius);box-shadow:0 5px 0 var(--ink)}
.static-stack figcaption h3{font-size:clamp(1.4rem,2.1vw,1.9rem);line-height:1.2;letter-spacing:-.03em;margin:0 0 10px}
.static-stack figcaption p{font-size:.975rem;line-height:1.6;color:var(--muted);margin:0 0 26px;max-width:38ch}

/* One continuous rail runs the height of the stack and is covered by each opaque
   chip, so the connectors between them can never misalign or overlap a border. */
.static-layers{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.static-layers:before{content:"";position:absolute;left:31px;top:12px;bottom:12px;width:2px;background:var(--ink);border-radius:2px}
.static-layer{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border:1.5px solid var(--ink);border-radius:12px;background:#eef1ea;font-size:1rem;line-height:1.35}
.static-layer-name{font-weight:600}
.static-layer-risk{background:#f5ba9e}
.static-layer-flag{flex-shrink:0;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper)}
.static-stack-after .static-layer{background:#d2ff71}
.static-stack-after .static-layer:first-child{background:#eef1ea}

.static-stack-note{margin:22px 0 0;font-size:.925rem;line-height:1.6;color:var(--muted);max-width:40ch}
.static-stack-count{display:flex;align-items:baseline;gap:10px;margin:26px 0 0;padding:15px 18px;border:1.5px solid var(--ink);border-radius:12px;font-size:.95rem;line-height:1.3}
.static-stack-count strong{font-size:2rem;line-height:1;letter-spacing:-.04em}
/* The count band is the shared baseline, so both panels finish on the same line. */
.static-stack .static-stack-count{margin-top:auto}
.static-stack-note+.static-stack-count{margin-top:26px}
.static-stack-after .static-stack-note{margin-top:auto;padding-top:22px}

/* A single chevron carries the before-to-after direction; the chips need no arrows. */
.static-stacks-step{align-self:center;display:block;width:15px;height:15px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);border-radius:0 0 3px 0;transform:rotate(-45deg)}

.static-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:40px}
.static-benefits .static-benefit{min-height:0;padding:28px;transition:none}
.static-benefits .static-benefit:hover{transform:none;box-shadow:0 5px 0 var(--ink)}
.static-benefit-icon{display:block;width:38px;height:38px;margin-bottom:22px;flex-shrink:0}
.static-benefit-icon svg{display:block;width:100%;height:100%}
.static-benefit h3{font-size:clamp(1.3rem,1.8vw,1.65rem);line-height:1.2;letter-spacing:-.03em;margin:0 0 16px;text-wrap:balance}
.static-benefit p{font-size:.975rem;line-height:1.65;margin:0}

@media(max-width:1000px){
 .static-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
 .static-stacks{gap:0 22px}
 .static-stack{padding:28px}
}
@media(max-width:720px){
 .static-defence-intro{grid-template-columns:1fr;gap:18px}
 .static-stacks{grid-template-columns:1fr;gap:20px;margin-top:32px}
 .static-stacks-step{justify-self:center;transform:rotate(45deg)}
 .static-stack{padding:26px}
 .static-stack-after .static-stack-note{margin-top:22px;padding-top:0}
 .static-benefits{grid-template-columns:1fr;gap:20px;margin-top:30px}
 .static-benefits .static-benefit{padding:26px}
}