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

.flag-white{fill:var(--color-white)}
.flag-red{fill:var(--color-error)}
.flag-blue{fill:var(--color-accent-dark)}
.flag-white-stroke{
  fill:none;
  stroke:var(--color-white);
  stroke-width:1.1;
}

.hero-lede strong{
  color:var(--color-text);
  font-weight:600;
}

.entry-platforms{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--color-muted-2);
}

.entry-platforms .platform-icon{
  width:16px;
  height:16px;
}

.feature-browser{
  margin-top:56px;
}

.feature-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
}

.tab-detail h3{
  margin-bottom:16px;
  font-size:30px;
}

.tab-detail p{
  max-width:72ch;
}

.route-sample{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:4px 16px;
  align-items:center;
  margin-top:26px;
  padding:18px;
  border:1.5px dashed var(--color-success);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--color-success-soft-2),var(--color-success-soft));
}

.route-sample span{
  grid-row:1 / span 2;
  align-self:stretch;
  display:flex;
  align-items:center;
  padding-right:16px;
  border-right:1px solid var(--color-success);
  color:var(--color-forest);
  font:500 12px/1.4 var(--font-mono);
}

.route-sample strong{
  color:var(--color-text);
  font-weight:500;
}

.route-sample small{
  color:var(--color-forest);
}

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

.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  max-width:100%;
  overflow:hidden;
  margin-bottom:32px;
}

.srv-row{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:12px 14px;
  border:1px solid var(--color-border-soft);
  border-radius:var(--radius-lg);
  background:var(--color-panel);
  box-shadow:var(--shadow-panel);
  color:var(--color-muted);
  font-size:13px;
}

.srv-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:var(--radius-pill);
  background:var(--color-success);
  box-shadow:0 0 0 3px var(--color-success-soft);
}

.srv-flag{
  width:20px;
  height:20px;
  flex:0 0 20px;
  border-radius:var(--radius-sm);
  overflow:hidden;
}

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

.srv-type{
  max-width:100%;
  overflow:hidden;
  padding:3px 8px;
  border-radius:var(--radius-pill);
  background:var(--color-panel-2);
  color:var(--color-muted);
  font:500 11px/1.3 var(--font-mono);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.srv-ms,
.srv-bw{
  color:var(--color-accent-dark);
  font:500 12px/1.3 var(--font-mono);
  white-space:nowrap;
}

.route-guide,
.traffic-note{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:32px;
  margin-top:24px;
  padding:28px;
}

.route-guide h3,
.traffic-note h3{
  margin-bottom:10px;
}

.route-guide p,
.traffic-note p{
  margin-bottom:0;
}

.article-link{
  color:var(--color-accent-dark);
  font-weight:500;
}

.client-callout{
  margin-top:24px;
}

.client-callout a{
  color:var(--color-accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}

.plan-features li{
  position:relative;
  padding-left:20px;
}

.plan-features li::before{
  content:"";
  position:absolute;
  top:.7em;
  left:0;
  width:7px;
  height:7px;
  border-radius:var(--radius-pill);
  background:var(--color-success);
  box-shadow:0 0 0 3px var(--color-success-soft);
}

.difference-layout{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:64px;
  align-items:start;
}

.difference-layout .section-head{
  position:sticky;
  top:96px;
  margin-bottom:0;
}

.difference-notes{
  display:grid;
  gap:0;
  border-top:1px solid var(--color-border);
}

.difference-notes article{
  position:relative;
  padding:30px 24px 30px 44px;
  border-bottom:1px solid var(--color-border);
}

.difference-notes article::before{
  content:"";
  position:absolute;
  top:38px;
  left:12px;
  width:12px;
  height:12px;
  border:2px solid var(--color-success);
  border-radius:var(--radius-pill);
  background:var(--color-panel);
  box-shadow:0 0 0 5px var(--color-success-soft);
}

.difference-notes article::after{
  content:"";
  position:absolute;
  top:52px;
  bottom:-38px;
  left:18px;
  border-left:1px dashed var(--color-success);
}

.difference-notes article:last-child::after{
  display:none;
}

.difference-notes h3{
  margin-bottom:10px;
}

.difference-notes p{
  margin-bottom:0;
}

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

.promo-block.wrap{
  margin-top:32px;
  margin-bottom:32px;
}

@media (max-width:1080px){
  .server-status{
    grid-template-columns:1fr;
  }

  .difference-layout{
    grid-template-columns:1fr;
    gap:32px;
  }

  .difference-layout .section-head{
    position:static;
  }
}

@media (max-width:768px){
  .feature-browser{
    margin-top:40px;
  }

  .tab-detail h3{
    font-size:26px;
  }

  .route-guide,
  .traffic-note{
    grid-template-columns:1fr;
  }

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

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

.stat-card.is-success .stat-label{
  color:var(--color-text);
}

@media (max-width:640px){
  .hero .trust-band{
    width:100%;
    overflow-x:visible;
  }

  .hero .band-list{
    min-width:0;
    flex-wrap:wrap;
    gap:10px 0;
  }

  .hero .device{
    max-width:100%;
    overflow:hidden;
  }

  .hero .kb-window{
    max-width:100%;
  }

  .route-sample{
    grid-template-columns:1fr;
  }

  .route-sample span{
    grid-row:auto;
    align-self:auto;
    padding-right:0;
    padding-bottom:10px;
    border-right:0;
    border-bottom:1px solid var(--color-success);
  }

  .route-guide,
  .traffic-note{
    padding:22px;
  }

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

  .srv-type{
    grid-column:2 / -1;
  }

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

  .difference-notes article{
    padding-right:0;
  }

  .promo-block.wrap{
    margin-inline:var(--gutter);
    width:auto;
  }
}