.home-sprite{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
  pointer-events:none;
}

.flag-red{fill:var(--color-flag-red)}
.flag-blue{fill:var(--color-flag-blue)}
.flag-white{fill:var(--color-flag-white)}
.flag-gold{fill:var(--color-flag-gold)}
.flag-black{fill:var(--color-flag-black)}
.flag-stroke-white{fill:none;stroke:var(--color-flag-white)}
.flag-stroke-red{fill:none;stroke:var(--color-flag-red)}
.flag-diagonal-wide{stroke-width:4}
.flag-diagonal-thin{stroke-width:1.7}
.flag-cross-wide{stroke-width:5}
.flag-cross-thin{stroke-width:2.5}

.statement{
  padding-top:72px;
  padding-bottom:56px;
  border-top:1px solid var(--color-border);
  background:var(--color-bg);
}

.node-preview{
  border-top:1px solid var(--color-border);
}

.node-guide{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:30px;
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}

.node-guide>div{
  padding:22px 24px;
}

.node-guide>div+div{
  border-left:1px solid var(--color-border);
}

.node-guide strong{
  display:block;
  margin-bottom:8px;
  font-size:16px;
}

.node-guide p{
  margin:0;
  font-size:14px;
}

.status-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin-top:42px;
  margin-bottom:22px;
}

.status-intro>div{
  max-width:760px;
}

.status-intro h3{
  margin-bottom:8px;
  font-size:24px;
}

.status-intro p{
  margin:0;
}

.text-link,
.section-link{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  color:var(--color-accent);
  font-weight:650;
}

.text-link{
  flex:0 0 auto;
}

.section-link{
  margin-top:28px;
}

#server-status{
  position:relative;
  width:100%;
  max-width:100%;
  margin-bottom:48px;
  overflow:hidden;
}

#server-status:empty{
  display:none;
}

#server-status:not(:empty){
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:12px;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  background:var(--color-panel-soft);
  box-shadow:0 1px 0 var(--color-highlight) inset;
}

.srv-row{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:48px;
  padding:8px 12px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-small);
  background:var(--color-panel);
}

.srv-dot{
  position:relative;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--color-success);
  flex:0 0 auto;
}

.srv-dot::after{
  position:absolute;
  inset:-4px;
  border:1px solid var(--color-success-ring);
  border-radius:50%;
  content:"";
  animation:live-pulse 2.4s ease-out infinite;
}

.srv-flag{
  display:block;
  width:24px;
  height:17px;
  border-radius:3px;
  box-shadow:0 0 0 1px var(--color-ink-line);
  object-fit:cover;
  flex:0 0 auto;
}

.srv-name{
  min-width:0;
  overflow:hidden;
  color:var(--color-text);
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.srv-type{
  max-width:100%;
  overflow:hidden;
  padding:3px 6px;
  border:1px solid var(--color-accent-line);
  border-radius:4px;
  background:var(--color-accent-fill);
  color:var(--color-accent);
  font-family:var(--font-mono);
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.srv-ms,
.srv-bw{
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:11px;
  white-space:nowrap;
}

.feature-catalog{
  border-top:1px solid var(--color-border);
}

.feature-lines{
  border-top:1px solid var(--color-border);
}

.feature-row{
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);
  gap:64px;
  align-items:center;
  padding-top:58px;
  padding-bottom:58px;
  border-bottom:1px solid var(--color-border);
}

.feature-row:nth-child(even) .figure-panel{
  order:2;
}

.feature-row:nth-child(even) .feature-copy{
  order:1;
}

.figure-panel{
  position:relative;
  min-height:230px;
  display:grid;
  place-items:center;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  background:linear-gradient(145deg,var(--color-accent-fill),var(--color-panel));
  box-shadow:0 1px 0 var(--color-highlight) inset;
  overflow:hidden;
}

.figure-panel::before{
  position:absolute;
  inset:0;
  background-image:linear-gradient(to right,var(--color-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--color-grid) 1px,transparent 1px);
  background-size:24px 24px;
  content:"";
  pointer-events:none;
}

.figure-number{
  position:absolute;
  left:16px;
  top:14px;
  z-index:1;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--color-muted);
}

.figure-panel svg{
  position:relative;
  z-index:1;
  width:min(86%,240px);
  color:var(--color-accent);
}

.figure-fill{
  fill:var(--color-accent-fill);
  stroke:none;
}

.figure-line{
  fill:none;
  stroke:var(--color-accent);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.feature-copy h3{
  margin:8px 0 14px;
  font-size:clamp(25px,3vw,36px);
}

.feature-copy p{
  margin:0;
  font-size:16px;
  line-height:1.85;
}

.decision-notes{
  display:grid;
  grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr);
  gap:56px;
  margin-top:64px;
  padding:34px;
  border:1px solid var(--color-accent-line);
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--color-accent-fill),var(--color-panel));
  box-shadow:var(--shadow-panel);
}

.decision-lead h3{
  margin:10px 0 12px;
  font-size:28px;
}

.decision-lead p{
  margin:0;
}

.decision-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:decision;
}

.decision-list li{
  position:relative;
  padding:8px 20px 22px 42px;
  counter-increment:decision;
}

.decision-list li::before{
  position:absolute;
  left:0;
  top:7px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid var(--color-accent-line);
  border-radius:var(--radius-small);
  background:var(--color-panel);
  color:var(--color-accent);
  font-family:var(--font-mono);
  font-size:11px;
  content:counter(decision,decimal-leading-zero);
}

.decision-list strong{
  display:block;
  margin-bottom:6px;
}

.decision-list p{
  margin:0;
  font-size:14px;
}

.pricing-preview{
  border-top:1px solid var(--color-border);
  background:var(--color-panel-soft);
}

.plan-summary{
  margin:18px 0 0;
  font-size:14px;
}

.traffic-pack{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
  gap:48px;
  align-items:center;
  margin-top:30px;
  padding:30px;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  background:var(--color-panel);
  box-shadow:0 1px 0 var(--color-highlight) inset;
}

.traffic-pack-copy h3{
  margin:8px 0 10px;
  font-size:27px;
}

.traffic-pack-copy p{
  margin:0;
}

.traffic-pack-list{
  margin:0;
  border-top:1px solid var(--color-border);
}

.traffic-pack-list>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:52px;
  border-bottom:1px solid var(--color-border);
}

.traffic-pack-list dt{
  color:var(--color-muted);
  font-family:var(--font-mono);
}

.traffic-pack-list dd{
  margin:0;
  color:var(--color-text);
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
}

.pricing-notes{
  display:flex;
  flex-wrap:wrap;
  gap:8px 28px;
  margin-top:24px;
}

.pricing-notes p{
  margin:0;
  font-size:14px;
}

.blog-preview{
  border-top:1px solid var(--color-border);
}

.home-article-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.blog-followup{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-top:30px;
  padding-top:26px;
  border-top:1px solid var(--color-border);
}

.blog-followup p{
  max-width:820px;
  margin:0;
}

.blog-followup p a{
  color:var(--color-accent);
  font-weight:650;
  text-decoration:underline;
  text-decoration-color:var(--color-accent-line);
  text-underline-offset:3px;
}

.blog-followup .section-link{
  flex:0 0 auto;
  margin-top:0;
}

@media (max-width:1024px){
  .feature-row{
    gap:40px;
  }

  .decision-notes{
    grid-template-columns:1fr;
  }

  .traffic-pack{
    grid-template-columns:1fr;
  }

  .srv-row{
    grid-template-columns:auto auto minmax(0,1fr) auto;
  }

  .srv-bw{
    grid-column:3/5;
    justify-self:end;
  }
}

@media (max-width:768px){
  .statement{
    padding-top:56px;
    padding-bottom:44px;
  }

  .node-guide{
    grid-template-columns:1fr;
  }

  .node-guide>div+div{
    border-top:1px solid var(--color-border);
    border-left:0;
  }

  .status-intro,
  .blog-followup{
    align-items:flex-start;
    flex-direction:column;
  }

  #server-status:not(:empty){
    grid-template-columns:1fr;
  }

  .feature-row{
    grid-template-columns:1fr;
    gap:28px;
    padding-top:44px;
    padding-bottom:44px;
  }

  .feature-row:nth-child(even) .figure-panel,
  .feature-row:nth-child(even) .feature-copy{
    order:initial;
  }

  .figure-panel{
    min-height:200px;
  }

  .decision-notes{
    gap:30px;
    padding:24px;
  }

  .decision-list{
    grid-template-columns:1fr;
  }

  .traffic-pack{
    min-width:0;
    padding:24px;
  }

  .home-article-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .node-guide>div{
    padding:20px 0;
  }

  .node-guide{
    padding-inline:18px;
  }

  .srv-row{
    grid-template-columns:auto auto minmax(0,1fr);
    gap:8px;
  }

  .srv-type{
    grid-column:3;
    justify-self:start;
  }

  .srv-ms,
  .srv-bw{
    grid-column:auto;
  }

  .srv-ms{
    grid-column:2;
  }

  .srv-bw{
    grid-column:3;
    justify-self:end;
  }

  .decision-list li{
    padding-right:0;
  }

  .pricing-notes{
    display:grid;
  }
}

@media (prefers-reduced-motion:reduce){
  .srv-dot::after{
    animation:none;
    opacity:0;
  }
}