/* Visual explanations for the planning page, within the existing Banktrade identity. */
.planning-page main {
  --planning-rule: rgba(61, 117, 108, .22);
  --planning-tint: #edf5ef;
}
.planning-page main :where(section[id], h2[id]) { scroll-margin-top: 112px; }
.planning-page main :where(h1, h2, h3, p, li, a) { overflow-wrap: break-word; }
.planning-page main h1,
.planning-page .hero.short h1 {
  max-width: 28ch;
  font-size: clamp(1.875rem, 3.2vw, 2.625rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.planning-page main h2 {
  max-width: 30ch;
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.planning-page main h3 {
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.018em;
}
.planning-page main p { max-width: 65ch; font-size: 1rem; line-height: 1.7; }
.planning-page main .section { padding-block: clamp(48px, 5vw, 72px); }
.planning-page main .section.soft { background: var(--paper-2); }
.planning-page .hero.short { min-height: min(560px, 68vh); }
.planning-page .hero-content { padding-block: clamp(40px, 4.5vw, 68px); }
.planning-page .hero-copy { max-width: min(730px, 64%); min-width: 0; }
.planning-page .hero-media img { animation: none; will-change: auto; }
.planning-page .lead { margin-top: 20px; font-size: clamp(1rem, 1.2vw, 1.12rem); }
.planning-page .hero-actions { gap: 14px 22px; margin-top: 24px; }
.planning-page .section-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(24px, 5vw, 78px);
  margin-bottom: 30px;
  align-items: end;
}
.planning-page .section-head p { margin-bottom: 0; }
.planning-page .planning-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  padding-block: 14px;
  border-block: 1px solid var(--planning-rule);
  color: var(--green);
  font-size: .85rem;
  font-weight: 700;
}
.planning-page .planning-subnav a { padding-block: 8px; background-image: none; }
.planning-page .planning-subnav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.planning-page main :where(a, summary):focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
.planning-page .text-link {
  display: inline-block;
  color: var(--green);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.planning-page .text-link:hover { text-decoration-thickness: 2px; }

.planning-page .planning-icon {
  display: block;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
  color: var(--green);
}
.planning-page .planning-hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--planning-rule);
  list-style: none;
}
.planning-page .planning-hero-points > * { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; }
.planning-page .planning-hero-points .planning-icon { width: 26px; height: 26px; }
.planning-page .planning-hero-points span { color: var(--ink); font-size: .79rem; font-weight: 600; line-height: 1.5; }
.planning-page :where(.planning-overview, .planning-ai, .planning-start) {
  display: grid;
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
.planning-page :where(.planning-overview, .planning-ai, .planning-start) > * { min-width: 0; }
.planning-page :where(.planning-overview, .planning-ai, .planning-start) h2 { margin-bottom: 18px; }
.planning-page .planning-overview { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 54px); }
.planning-page :where(.planning-overview-visual, .planning-process-visual, .planning-ai-visual) {
  position: relative;
  margin: 0;
  padding: 0;
  color: var(--green);
}
.planning-page .planning-render-image {
  display: block;
  width: 100%;
  height: auto;
  background: #f7f8f4;
}
.planning-page .planning-render-caption {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--planning-rule);
}
.planning-page .planning-render-heading {
  display: flex;
  align-items: baseline;
  gap: 13px;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.5;
}
.planning-page .planning-render-heading strong { font-weight: 600; }
.planning-page .planning-render-index { flex: 0 0 auto; color: var(--green); font-family: Sora, sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .07em; white-space: nowrap; }
.planning-page .planning-render-note { margin: 6px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.6; }

.planning-page .planning-usecases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.planning-page .planning-usecase {
  position: relative;
  min-width: 0;
  padding: 24px;
  border-top: 2px solid var(--green);
  background: var(--planning-tint);
}
.planning-page .planning-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.planning-page :where(.planning-usecase > span, .planning-system-index) {
  display: block;
  color: var(--green);
  font-family: Sora, Manrope, sans-serif;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .07em;
}
.planning-page .planning-card-head .planning-system-index { margin-bottom: 0; }
.planning-page .planning-usecase > .planning-icon { float: right; margin: 0 0 12px 12px; }
.planning-page :where(.planning-usecase, .planning-system, .planning-decision-grid article) h3 { margin-bottom: 10px; }
.planning-page :where(.planning-usecase, .planning-system, .planning-decision-grid article) p:last-child { margin-bottom: 0; }
.planning-page .planning-usecase p { font-size: .95rem; }
.planning-page .planning-system-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.planning-page .planning-system {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--planning-rule);
  background: var(--paper);
}
.planning-page .planning-card-head > .planning-system-icon { width: 56px; height: 56px; color: var(--green); background: transparent; }
.planning-page .planning-system > .planning-system-index { margin-bottom: 12px; }
.planning-page .planning-system p { margin-bottom: 14px; }
.planning-page .planning-system .text-link { margin-top: auto; padding-top: 12px; align-self: flex-start; }

.planning-page .planning-decisions { background: var(--green); color: #fff; }
.planning-page .planning-decisions :where(p, .eyebrow) { color: #eef7f1; }
.planning-page .planning-decisions .planning-system-index { color: #d8eee7; }
.planning-page .planning-decisions .planning-icon { color: var(--mint); }
.planning-page .planning-decision-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 54px); }
.planning-page .planning-decision-grid article { min-width: 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .32); }
.planning-page .planning-decision-visual { display: grid; min-height: 128px; align-items: center; margin-bottom: 20px; color: #d8eee7; }
.planning-page .planning-decision-visual svg { display: block; width: 100%; max-height: 150px; overflow: visible; }

.planning-page .planning-process-panel { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.planning-page .planning-process-visual { margin-top: 8px; }
.planning-page .planning-process { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.planning-page .planning-process-step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-block: 18px;
  border-top: 1px solid var(--planning-rule);
}
.planning-page .planning-process-step:last-child { border-bottom: 1px solid var(--planning-rule); }
.planning-page .planning-process-step::before { position: absolute; top: 50px; bottom: -17px; left: 15px; border-left: 1px solid var(--planning-rule); content: ""; pointer-events: none; }
.planning-page .planning-process-step:last-child::before { display: none; }
.planning-page .planning-step-number { display: grid; width: 32px; height: 32px; margin: 0; place-items: center; border: 1px solid var(--planning-rule); background: var(--bg); color: var(--green); font-family: Sora, sans-serif; font-size: .72rem; font-weight: 600; }
.planning-page .planning-process-step h3 { margin: 3px 0 6px; font-size: 1rem; }
.planning-page .planning-process-step > div { min-width: 0; }
.planning-page .planning-process-step p { margin-bottom: 0; line-height: 1.65; }
.planning-page .planning-step-output { display: block; margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--mint); color: var(--green); font-size: .78rem; line-height: 1.5; }
.planning-page .planning-ai { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; }
.planning-page .planning-ai-note { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 20px; padding: 16px 18px; border-left: 2px solid var(--green); background: var(--paper-2); }
.planning-page .planning-ai-note .planning-icon { width: 30px; height: 30px; }
.planning-page .planning-ai-note p { margin: 0; font-size: .88rem; }
.planning-page main .planning-ai-note { font-size: .88rem; line-height: 1.65; }
.planning-page .planning-ai-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; width: 100%; margin: 28px 0 0; padding: 0; list-style: none; }
.planning-page .planning-ai > .planning-ai-checklist { grid-column: 1 / -1; margin-top: 0; }
.planning-page .planning-ai-checklist li { min-width: 0; padding: 14px 18px; border-left: 2px solid var(--mint); background: var(--paper-2); }
.planning-page .planning-ai-checklist strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: .88rem; font-weight: 700; line-height: 1.5; }
.planning-page .planning-ai-checklist span { display: block; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.planning-page .planning-start-section { background: var(--planning-tint); }
.planning-page .planning-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 6px; }
.planning-page .planning-start { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.planning-page .planning-input-list { margin: 0; padding: 0; list-style: none; counter-reset: planning-input; }
.planning-page .planning-input-list li { position: relative; padding: 16px 0 16px 44px; border-top: 1px solid var(--planning-rule); color: var(--muted); counter-increment: planning-input; }
.planning-page .planning-input-list li::before { position: absolute; top: 19px; left: 0; color: var(--green); font-family: Sora, sans-serif; font-size: .75rem; font-weight: 600; content: "0" counter(planning-input); }
.planning-page .planning-input-list strong { display: block; margin-bottom: 5px; color: var(--ink); }
.planning-page .planning-input-list span { display: block; line-height: 1.7; }
.planning-page .planning-start a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Only decorative SVG strokes move; all copy and illustration bases stay visible. */
.planning-page .planning-motion svg .plan-flow { stroke-dasharray: 8 7; animation: planning-flow 8s linear infinite paused; }
.planning-page .planning-motion svg .plan-pulse { animation: planning-pulse 4s ease-in-out infinite paused; }
.planning-page .planning-motion svg .plan-fan { transform-box: fill-box; transform-origin: center; animation: planning-fan 12s linear infinite paused; }
.planning-page .planning-motion svg .plan-flow-fast { stroke-dasharray: 5 5; animation: planning-flow 4s linear infinite paused; }
.planning-page .planning-motion svg .plan-ring { transform-box: fill-box; transform-origin: center; animation: planning-ring 2.6s ease-out infinite paused; }
.planning-page .planning-motion svg .plan-march { stroke-dasharray: 4 4; animation: planning-march 5s linear infinite paused; }
.planning-page .planning-motion svg .plan-blink { animation: planning-blink 2.4s linear infinite paused; }
.planning-page .planning-motion svg .plan-wave-run { animation: planning-wave 3s linear infinite paused; }
.planning-page .planning-motion svg .plan-noise-run { animation: planning-wave 1.6s linear infinite paused; }
.planning-page .planning-motion svg .plan-rotate { transform-box: view-box; transform-origin: 210px 190px; animation: planning-rotate 18s linear infinite paused; }
/* Construction sequence on one 10 s cycle: test, check, connect the B feed, then the A feed, the new racks come alive. */
.planning-page .planning-motion svg .plan-seq-bar { transform-box: fill-box; transform-origin: left center; animation: planning-seq-bar 10s ease-in-out infinite paused; }
.planning-page .planning-motion svg .plan-seq-check { animation: planning-seq-check 10s ease infinite paused; }
.planning-page .planning-motion svg .plan-seq-connect { stroke-dasharray: 1; animation: planning-seq-connect 10s ease-in-out infinite paused; }
.planning-page .planning-motion svg .plan-seq-connect-a { stroke-dasharray: 1; animation: planning-seq-connect-a 10s ease-in-out infinite paused; }
.planning-page .planning-motion svg .plan-seq-live { animation: planning-seq-live 10s ease infinite paused; }
.planning-page .planning-motion.is-in-view svg :where(.plan-flow, .plan-flow-fast, .plan-pulse, .plan-fan, .plan-ring, .plan-march, .plan-blink, .plan-wave-run, .plan-noise-run, .plan-rotate, .plan-seq-bar, .plan-seq-check, .plan-seq-connect, .plan-seq-connect-a, .plan-seq-live) { animation-play-state: running; }
.planning-page.planning-paused .planning-motion svg :where(.plan-flow, .plan-flow-fast, .plan-pulse, .plan-fan, .plan-ring, .plan-march, .plan-blink, .plan-wave-run, .plan-noise-run, .plan-rotate, .plan-seq-bar, .plan-seq-check, .plan-seq-connect, .plan-seq-connect-a, .plan-seq-live) { animation-play-state: paused; }
@keyframes planning-flow { to { stroke-dashoffset: -120; } }
@keyframes planning-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes planning-fan { to { transform: rotate(360deg); } }
@keyframes planning-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes planning-march { to { stroke-dashoffset: -32; } }
@keyframes planning-blink { 0%, 70% { opacity: 1; } 72%, 100% { opacity: .25; } }
@keyframes planning-wave { from { transform: translateX(0); } to { transform: translateX(40px); } }
@keyframes planning-rotate { to { transform: rotate(360deg); } }
@keyframes planning-seq-bar { 0% { transform: scaleX(0); opacity: 1; } 30%, 92% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes planning-seq-check { 0%, 30% { opacity: 0; } 36%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes planning-seq-connect { 0%, 38% { stroke-dashoffset: 1; opacity: 1; } 52%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes planning-seq-connect-a { 0%, 58% { stroke-dashoffset: 1; opacity: 1; } 72%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes planning-seq-live { 0%, 74% { opacity: 0; } 80%, 92% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 1100px) {
  .planning-page .hero-copy { max-width: min(690px, 72%); }
  .planning-page .planning-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planning-page .planning-process-panel { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
  .planning-page .planning-overview,
  .planning-page .planning-ai,
  .planning-page .planning-start { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .planning-page .hero-copy { max-width: 720px; }
  .planning-page .planning-overview-visual { max-width: 640px; width: 100%; }
  .planning-page .planning-ai-visual { max-width: 650px; width: 100%; }
  .planning-page .planning-process-panel { grid-template-columns: minmax(0, 1fr); }
  .planning-page .planning-process-visual { display: block; max-width: 640px; }

  .planning-page .planning-decision-grid { gap: 20px; }
  .planning-page .planning-usecase { padding: 20px; }
}
@media (max-width: 700px) {
  .planning-page main .section { padding-block: 44px; }
  .planning-page .hero.short { min-height: auto; }
  .planning-page .hero-content { padding-block: 36px 34px; }
  .planning-page .planning-subnav { gap: 0 22px; padding-block: 10px; }
  .planning-page .section-head,
  .planning-page .planning-usecases,
  .planning-page .planning-system-grid,
  .planning-page .planning-decision-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .planning-page .section-head { margin-bottom: 24px; }
  .planning-page .planning-usecases { margin-top: 24px; gap: 12px; }
  .planning-page .planning-usecase { padding: 20px; }
  .planning-page .planning-usecase .planning-card-head { margin-bottom: 12px; }
  .planning-page .planning-system { padding: 22px; }
  .planning-page .planning-decision-visual { min-height: 100px; max-width: 380px; margin-bottom: 16px; }
  .planning-page .planning-hero-points { gap: 10px; margin-top: 20px; padding-top: 16px; }
  .planning-page .planning-hero-points > * { grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; }
  .planning-page .planning-hero-points span { font-size: .74rem; }
  .planning-page .planning-process-visual { display: block; }
  .planning-page .planning-render-caption { margin-top: 14px; padding-top: 14px; }

  .planning-page .planning-process-step { padding-block: 18px; gap: 14px; }
}
@media (max-width: 420px) {
  .planning-page .planning-ai-checklist { gap: 16px; }
  .planning-page .planning-ai-checklist strong { font-size: .85rem; }
  .planning-page .planning-ai-checklist span { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .planning-page .planning-motion svg :where(.plan-flow, .plan-flow-fast, .plan-pulse, .plan-fan, .plan-ring, .plan-march, .plan-blink, .plan-wave-run, .plan-noise-run, .plan-rotate, .plan-seq-bar, .plan-seq-check, .plan-seq-connect, .plan-seq-connect-a, .plan-seq-live) { animation: none !important; }
}

/* 4. szakasz (tervezési mintaoldal): adatsáv, négy esetkártya, kéthasábos szakaszok,
   Tier-szintek és a CDU-ábra. */
.planning-page .planning-hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: none;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--planning-rule);
  list-style: none;
}
.planning-page .planning-hero-facts li { min-width: 0; }
.planning-page .planning-hero-facts strong { display: block; color: var(--green); font-family: Sora, Manrope, sans-serif; font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.planning-page .planning-hero-facts span { display: block; margin-top: 4px; color: var(--ink); font-size: .79rem; font-weight: 600; line-height: 1.45; }
.planning-page .planning-usecases-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.planning-page .planning-columns { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 72px); align-items: start; }
.planning-page .planning-columns > * { min-width: 0; }
.planning-page .planning-columns h2 { margin-bottom: 18px; }
.planning-page .planning-columns > .planning-ai-checklist { margin-top: 0; }

@media (max-width: 1100px) {
  .planning-page .planning-usecases-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .planning-page .planning-columns { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 700px) {
  .planning-page .planning-usecases-4 { grid-template-columns: minmax(0, 1fr); }
  .planning-page .planning-hero-facts { gap: 10px; }
  .planning-page .planning-hero-facts span { font-size: .72rem; }
}
@media (max-width: 560px) {
  .planning-page :where(.planning-factor-list) { grid-template-columns: minmax(0, 1fr); }
}
.planning-page .planning-tier-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.planning-page .planning-tier { display: flex; flex-direction: column; min-width: 0; padding: 22px; border-top: 2px solid var(--green); background: var(--paper); }
.planning-page .planning-tier-visual { display: block; width: 100%; height: auto; margin-bottom: 18px; color: var(--green); }
.planning-page .planning-tier .planning-system-index { margin-bottom: 6px; font-size: .78rem; }
.planning-page .planning-tier h3 { margin-bottom: 10px; }
.planning-page .planning-tier p { font-size: .92rem; line-height: 1.65; }
.planning-page .planning-tier-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0 12px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--planning-rule); font-size: .8rem; line-height: 1.5; }
.planning-page .planning-tier-facts dt { padding: 4px 0; color: var(--muted); }
.planning-page .planning-tier-facts dd { margin: 0; padding: 4px 0; color: var(--ink); font-weight: 600; }
.planning-page main .planning-tier-note { max-width: none; margin: 22px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.65; }
.planning-page main .planning-tier-note + .planning-tier-note { margin-top: 6px; }
.planning-page main .planning-tier-callout { max-width: none; margin: 26px 0 0; padding: 16px 20px; border-left: 2px solid var(--green); background: var(--paper); color: var(--ink); font-size: .92rem; line-height: 1.65; }
.planning-page .planning-tier-callout strong { color: var(--green); }
/* Tier diagrams: current flows from the mains through the UPS to the IT rack. All four run the
   same 10 s cycle, so they compare one moment: normal operation, then maintenance on the first
   path (Tier IV: a fault). Tier I stops, the others keep the servers running. Paused, out of
   view or with reduced motion they show normal operation. */
.planning-page .planning-tier-visual .tier-bus { stroke: #cfe6da; stroke-width: 3; }
.planning-page .planning-tier-visual .tier-flow { stroke-width: 1.4; stroke-dasharray: 4 5; animation: tier-dash 1.2s linear infinite paused; }
.planning-page .planning-tier-visual .tier-p2 { opacity: 0; }
.planning-page .planning-tier-visual :is(.tier-p1, .tier-p2):not(.tier-flow) { animation: tier-p1 10s ease infinite paused; }
.planning-page .planning-tier-visual .tier-p2:not(.tier-flow) { animation-name: tier-p2; }
.planning-page .planning-tier-visual .tier-flow.tier-p1 { animation: tier-dash 1.2s linear infinite paused, tier-p1 10s ease infinite paused; }
.planning-page .planning-tier-visual .tier-flow.tier-p2 { animation: tier-dash 1.2s linear infinite paused, tier-p2 10s ease infinite paused; }
.planning-page .planning-tier-visual .tier-dim { animation: tier-dim 10s ease infinite paused; }
.planning-page .planning-motion.is-in-view .planning-tier-visual :where(.tier-flow, .tier-p1, .tier-p2, .tier-dim) { animation-play-state: running; }
.planning-page.planning-paused .planning-motion .planning-tier-visual :where(.tier-flow, .tier-p1, .tier-p2, .tier-dim) { animation-play-state: paused; }
@keyframes tier-dash { to { stroke-dashoffset: -18; } }
@keyframes tier-p1 { 0%, 44% { opacity: 1; } 50%, 88% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes tier-p2 { 0%, 44% { opacity: 0; } 50%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes tier-dim { 0%, 44% { opacity: 1; } 50%, 88% { opacity: .18; } 94%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .planning-page .planning-tier-visual :where(.tier-flow, .tier-p1, .tier-p2, .tier-dim) { animation: none !important; }
}
@media (max-width: 1100px) {
  .planning-page .planning-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .planning-page .planning-tier-grid { grid-template-columns: minmax(0, 1fr); }
}