/* NIS2 service page — regulatory phase timeline */

.nis2-timeline{padding:6rem 8vw 8rem;box-shadow:none}
.nis2-timeline .eyebrow{margin-bottom:1.2rem}
.nis2-timeline h2{font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:400;max-width:720px;margin-bottom:1.2rem}
.nis2-timeline>p{font-size:1rem;line-height:1.85;color:var(--mid);max-width:640px;margin-bottom:4rem}

.timeline{position:relative;max-width:760px;margin:0 0 4.5rem;padding-left:0}
.timeline-track{position:absolute;left:23px;top:6px;bottom:6px;width:2px;background:var(--sheet-rule);overflow:hidden}
.timeline-track:after{content:'';position:absolute;left:0;top:0;width:100%;height:0;background:var(--accent);transition:height 1.1s cubic-bezier(.4,.0,.2,1)}
.timeline.in-view .timeline-track:after{height:100%}

.timeline-step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:1.6rem;padding-bottom:3rem;opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.timeline-step:last-child{padding-bottom:0}
.timeline-step.visible{opacity:1;transform:translateY(0)}

.step-node{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;border:1px solid var(--sheet-rule);background:var(--paper);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.05em;color:var(--mid);transition:border-color .4s,color .4s,background .4s,box-shadow .4s}
.timeline-step.current .step-node{border-color:var(--accent);color:var(--accent);background:var(--paper);box-shadow:0 0 0 4px rgba(242,97,10,.12)}

.step-body{padding-top:.35rem}
.step-phase{font-size:.6rem;letter-spacing:.2em;color:var(--mid);margin-bottom:.5rem;text-transform:uppercase}
.timeline-step.current .step-phase{color:var(--accent)}
.step-body h3{font-family:'Source Serif 4',serif;font-weight:400;font-size:1.35rem;line-height:1.3;margin-bottom:.6rem}
.step-body p{font-size:.95rem;line-height:1.8;color:var(--mid);max-width:520px}

.applicability-callout{border:1px solid var(--sheet-rule);background:var(--paper);padding:2.2rem 2.4rem;max-width:760px;display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:start}
.applicability-callout .flag{font-size:1.4rem;color:var(--accent);line-height:1;padding-top:.1rem}
.applicability-callout strong{display:block;font-family:'Source Serif 4',serif;font-weight:400;font-size:1.15rem;margin-bottom:.6rem;color:var(--dark)}
.applicability-callout p{font-size:.9rem;line-height:1.8;color:var(--mid)}

@media(prefers-reduced-motion:reduce){
  .timeline-step{opacity:1;transform:none;transition:none}
  .timeline-track:after{transition:none}
}

@media(max-width:768px){
  .nis2-timeline{padding:4rem 6vw 5rem}
  .nis2-timeline>p{margin-bottom:2.8rem}
  .timeline{margin-bottom:3rem}
  .timeline-track{left:19px}
  .timeline-step{grid-template-columns:40px 1fr;gap:1.1rem;padding-bottom:2.2rem}
  .step-node{width:40px;height:40px;font-size:.65rem}
  .step-body h3{font-size:1.15rem}
  .step-body p{font-size:.9rem}
  .applicability-callout{grid-template-columns:1fr;padding:1.6rem 1.4rem;gap:.8rem}
}

@media(max-width:420px){
  .nis2-timeline{padding:3.5rem 5.5vw 4rem}
}