/* DZIVS urgent responsive repair — loaded after styles.css */

@media (max-width:1200px) and (min-width:761px){
  .site-shell{width:calc(100% - 32px);margin:16px auto;min-height:calc(100svh - 32px)}
  .topbar{top:16px;left:5%;right:5%;padding:20px 0}
  .hero{min-height:calc(100svh - 32px);grid-template-columns:minmax(0,52%) minmax(0,48%);padding:106px 5% 34px;align-items:center;isolation:isolate}
  .hero-copy{grid-column:1;grid-row:1;position:relative;z-index:6;width:100%;max-width:540px;min-width:0;transform:none;padding-right:24px}
  .hero h1{font-size:clamp(54px,7vw,78px);max-width:520px;overflow-wrap:normal}
  .hero-copy>p{max-width:370px}
  .flow{grid-column:2;grid-row:1;position:relative;z-index:7;width:100%;height:530px;min-width:0;margin:0;align-self:center;padding-left:8px}
  .flow-label{text-align:left;margin:0 0 18px 52px;white-space:nowrap}
  .flow-line{height:420px;margin-left:52px;justify-content:space-between;border-left:1px solid #7f9fc4}
  .node{margin-left:22px;padding:4px 0;min-width:0}
  .node b{left:-29px}.node-icon{width:52px;height:52px;flex:0 0 52px}.node-icon svg{width:24px;height:24px}
  .node strong{font-size:11px;letter-spacing:.15em;white-space:nowrap}.node small{font-size:8px;white-space:nowrap}
  .continues{margin-top:7px;text-align:left;padding-left:47px}.continues small{font-size:8px}
  .hero-image{inset:0 0 0 48%;z-index:1}
  .image-overlay{background:linear-gradient(90deg,rgba(241,245,252,1) 0%,rgba(241,245,252,.94) 14%,rgba(241,245,252,.56) 36%,rgba(241,245,252,.18) 70%,rgba(241,245,252,0) 100%) !important}
  .side-note{display:none}
  .launch-card{right:4%;bottom:5%;min-width:190px;padding:16px 18px;z-index:3}
}
@media (max-width:760px){
  .site-shell{width:100%;margin:0;min-height:100svh;border-radius:0}
  .hero{display:flex !important;flex-direction:column;align-items:stretch;min-height:0;padding:84px 18px 34px}
  .hero-copy{order:1;width:100%;max-width:none;padding:0 2px}
  .hero h1{font-size:clamp(48px,14vw,64px);max-width:350px}
  .hero-image{order:2;position:relative;inset:auto;width:100%;height:220px;margin:28px 0 0;border-radius:14px;overflow:hidden}
  .flow{order:3;width:100%;height:auto;margin:30px 0 0;padding:0}
  .flow-label{margin:0 0 12px;padding:0;text-align:left}
  .flow-line{display:grid;grid-template-columns:1fr 1fr;gap:8px;height:auto;margin:0;border:0}
  .node{min-width:0;min-height:64px;margin:0;padding:12px 9px 12px 29px;border:1px solid #d8dde4;border-radius:13px;background:rgba(255,255,255,.68)}
  .node b{display:block;left:11px;top:17px;width:9px;height:9px}.node strong{font-size:10px}.node small{font-size:8px}
  .continues{margin-top:23px;padding:0;text-align:center}.continues small{font-size:7px}
}
@media (max-width:420px){.topbar{padding-left:14px;padding-right:14px}.hero{padding-left:14px;padding-right:14px}.flow-line{grid-template-columns:1fr}}
@media (min-width:761px) and (max-width:900px){
  .hero{display:flex !important;flex-direction:column;align-items:stretch;min-height:0;padding:110px 36px 42px}
  .hero-copy{order:1;width:100%;max-width:440px;padding:0}.hero h1{font-size:clamp(54px,9vw,68px);max-width:440px}
  .hero-image{order:2;position:relative;inset:auto;width:100%;height:260px;margin:32px 0 0;border-radius:16px;overflow:hidden;z-index:1}
  .image-overlay{background:linear-gradient(90deg,rgba(241,245,252,.34),rgba(241,245,252,.06)) !important}
  .flow{order:3;width:100%;height:auto;margin:32px 0 0;padding:0;z-index:2}.flow-label{margin:0 0 14px;padding:0;text-align:left}
  .flow-line{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;height:auto;margin:0;border:0}
  .node{min-width:0;min-height:76px;margin:0;padding:12px 12px 12px 32px;border:1px solid #d8dde4;border-radius:14px;background:rgba(255,255,255,.78)}
  .node b{display:block;left:13px;top:18px;width:9px;height:9px}.node-icon{width:50px;height:50px;flex:0 0 50px}.node strong{font-size:11px;white-space:normal}.node small{font-size:9px;white-space:normal}
  .continues{margin-top:24px;padding:0;text-align:center}
}

/* FLOW terminal geometry: LIFE CONTINUES is a caption, not a sixth node. */
.continues{position:relative;z-index:6;text-align:center}
.continues span{display:none !important}
.continues small{display:block !important;width:max-content;height:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#69717b;font-size:9px;line-height:1.4;letter-spacing:.34em;white-space:nowrap;cursor:default}
.continues small::after{content:none !important}

/* Desktop: the continuation axis is anchored to the exact 50% axis used by .flow-line. */
@media (min-width:1201px){
  .continues{width:0;margin:0 0 0 50%;padding:18px 0 0;text-align:left}
  .continues::before{content:"";position:absolute;left:0;top:0;width:1px;height:18px;background:#7f858d}
  .continues small{margin:22px 0 0;transform:translateX(-50%)}
}

/* 901–1200px: .flow-line uses a fixed 52px axis offset. */
@media (max-width:1200px) and (min-width:901px){
  .continues{width:0;margin:0 0 0 52px;padding:14px 0 0;text-align:left}
  .continues::before{content:"";position:absolute;left:0;top:0;width:1px;height:14px;background:#7f9fc4}
  .continues small{margin:18px 0 0;transform:translateX(-50%)}
}

.node:focus-visible{outline:1px solid #075db7;outline-offset:6px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important;transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}