.hero{
  position:relative;
  max-width:100%;
  padding-top:20px;
  padding-bottom:28px;
  overflow-x:clip
}
.hero .wrap{position:relative}
.copy{position:relative;z-index:2;text-align:center}
.copy h1{margin-top:14px;margin-bottom:8px}
.ul{position:relative;z-index:0}
.ul::after{
  content:"";
  position:absolute;
  left:.02em;
  right:.02em;
  bottom:-.02em;
  z-index:-1;
  height:.13em;
  border-radius:var(--radius-sm);
  background:var(--color-focus-shadow)
}
.sep{margin-inline:.1em;color:var(--color-muted);font-weight:500}
.pl{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:30px;
  padding-top:14px;
  padding-bottom:12px
}
.pl input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none
}
.pl label{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:2px;
  color:var(--color-muted);
  cursor:pointer;
  font-size:17px;
  font-weight:650;
  line-height:1.3
}
.pl label:hover,.pl input:checked+label{color:var(--color-text)}
.pl input:checked+label{font-weight:750}
.pl label .ico{width:20px;height:20px}
.pl-marks,.pl-arc{position:absolute;display:none;color:var(--color-accent)}
.pl-marks{top:-13px;left:-6px;width:30px;height:14px}
.pl-arc{right:-4px;bottom:-10px;left:-4px;width:calc(100% + 8px);height:9px}
.pl input:checked+label .pl-marks,.pl input:checked+label .pl-arc{display:block}
.pl input:focus-visible+label{outline:var(--focus-ring);outline-offset:4px;border-radius:var(--radius-sm)}
.linux-icon path:last-child{fill:var(--color-panel)}
.cta{justify-content:center;margin-top:12px}
.btn-main{border-color:var(--color-accent)}
.btn-sub{border-color:var(--color-border)}
.lead{margin-top:14px;margin-bottom:0;color:var(--color-muted);font-size:16px}
.lead strong{color:var(--color-text);font-weight:750}
.trust{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:10px;
  color:var(--color-muted);
  font-size:13px
}
.trust span{display:inline-flex;align-items:center}
.trust span+span::before{content:"·";margin-inline:10px;color:var(--color-border)}
.trust b{color:var(--color-text);font-weight:650}
.flags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px}
.flag{min-height:30px}
.fl,.fl-s{flex:none;overflow:hidden;border-radius:3px}
.fl{width:22px;height:15px}
.fl-s{width:24px;height:17px}
.stage{position:relative;z-index:2;width:78%;margin:30px auto 0}
.win{position:relative}
.side{min-width:0}
.dots .d1{background:var(--color-error)}
.dots .d2{background:var(--color-warning)}
.dots .d3{background:var(--color-success)}
.tab.on{background:var(--color-sidebar-active);color:var(--color-paper)}
.list{display:flex;min-width:0;flex-direction:column}
.list-head{gap:8px}
.list-head strong{font-size:14px}
.list-head .tools,.det-head .tools{display:flex;gap:10px;margin-left:auto;color:var(--color-muted)}
.list-head .tools svg,.det-head .tools svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.routes{min-width:0}
.route{height:52px}
.route.k-line::before{background:var(--color-accent-wash)}
.route.k-relay::before{background:var(--color-edge-shadow)}
.route.k-direct::before{background:var(--color-success-wash)}
.route.on::before{background:var(--color-accent)}
.route .rt{display:flex;min-width:0;flex-direction:column;line-height:1.25}
.route .rt b{font-size:13px}
.route .rt small{margin-top:2px;color:var(--color-muted);font-size:11px}
.route .rt small em{font-family:var(--font-mono);font-style:normal}
.route .go{width:14px;height:14px;margin-left:auto;stroke:currentColor;fill:none;color:var(--color-muted)}
.route.on .go{color:var(--color-accent)}
.detail{min-width:0;text-align:left}
.det-head{padding-inline:18px}
.det-body{padding:16px 20px 14px}
.det-title{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.det-title h3{margin:0}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:var(--radius-pill);font-size:12px;font-weight:750}
.pill-ok{background:var(--color-success-wash);color:var(--color-success)}
.pill-ok i{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--color-success)}
.kv{margin-top:12px;margin-bottom:0}
.kv dd .mono{padding:1px 7px;border-radius:var(--radius-sm);background:var(--color-panel-recessed);font-family:var(--font-mono)}
.tg{position:relative;display:inline-block;width:30px;height:17px;border-radius:var(--radius-pill);background:var(--color-success)}
.tg::after{
  content:"";
  position:absolute;
  top:2px;
  right:2px;
  width:13px;
  height:13px;
  border-radius:var(--radius-pill);
  background:var(--color-paper)
}
.plan{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pill-plan{background:var(--color-accent-wash);color:var(--color-accent);font-family:var(--font-mono)}
.pill-dev{background:var(--color-panel-recessed);color:var(--color-text)}
.pill-dev b{font-weight:750}
.det-tools{height:38px}
.det-tools .sp{width:1px;height:16px;margin-inline:4px;background:var(--color-border)}
.float-card,.float-pill{display:inline-flex;align-items:center;gap:8px}
.float-card svg,.float-pill svg{stroke:currentColor;fill:none}
.float-card svg{width:16px;height:16px;color:var(--color-accent)}
.float-pill svg{width:15px;height:15px}
.doodle{position:absolute;z-index:1;color:var(--color-border);pointer-events:none}
.doodle svg{stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dd-signal{bottom:34px;left:34px}
.dd-signal svg{width:150px;height:120px}
.dd-planet{right:46px;bottom:52px}
.dd-planet svg{width:150px;height:110px}
.dd-plane{top:76px;right:110px}
.dd-plane svg{width:120px;height:90px}
.stats{margin-top:0;border-top:1px solid var(--color-border)}
.stats .wrap{display:flex;justify-content:center;gap:72px;padding-top:26px;padding-bottom:26px}
.stat{display:flex;align-items:center;gap:6px;color:var(--color-muted)}
.stat .laurel{width:28px;height:44px;flex:none;stroke:var(--color-border);fill:none;stroke-width:1.4}
.stat .laurel.r{transform:scaleX(-1)}
.stat .st{min-width:120px;text-align:center}
.stat .st b{display:block;color:var(--color-text);font-family:var(--font-mono);font-size:22px;line-height:1.1}
.stat .st span{display:block;margin-top:3px;font-size:12px}

.feature-details{min-width:0}
.feature-detail:not(.is-active){display:none}
.feature-detail p{color:var(--color-muted)}
.feature-detail p:last-of-type{margin-bottom:0}

.home-routes-section{background:var(--color-panel-recessed)}
.route-guidance{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:24px
}
.route-guidance article{
  min-width:0;
  padding:20px;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  background:var(--color-panel);
  box-shadow:inset 0 1px 0 var(--color-paper)
}
.route-guidance h3{font-size:18px}
.route-guidance p{margin:0;color:var(--color-muted)}
.section-link-row{display:flex;justify-content:flex-end;margin-top:24px;padding-bottom:7px}
.route-note{margin-top:28px}

.server-status:empty{display:none}
#server-status.server-status{
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  margin-top:24px;
  margin-bottom:24px;
  overflow:hidden
}
.server-status .srv-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:100%;
  max-width:100%
}
.server-status .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);
  border-radius:var(--radius);
  background:var(--color-panel);
  box-shadow:inset 0 1px 0 var(--color-paper)
}
.server-status .srv-dot{
  width:8px;
  height:8px;
  flex:none;
  border-radius:var(--radius-pill);
  background:var(--color-success);
  box-shadow:0 0 0 3px var(--color-success-wash)
}
.server-status .srv-flag{
  width:24px;
  height:17px;
  overflow:hidden;
  border-radius:3px
}
.server-status .srv-name{
  min-width:0;
  overflow:hidden;
  color:var(--color-text);
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}
.server-status .srv-type{
  max-width:100%;
  overflow:hidden;
  padding:2px 8px;
  border-radius:var(--radius-pill);
  background:var(--color-panel-recessed);
  color:var(--color-muted);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap
}
.server-status .srv-ms,.server-status .srv-bw{
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.price-audience{margin-top:18px;color:var(--color-muted)}
.traffic-pack-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
  margin-top:24px
}
.traffic-pack-panel h3{font-size:24px}
.traffic-pack-panel p{color:var(--color-muted)}
.traffic-pack-panel p:last-child{margin-bottom:0}

.home-difference{border-top:1px solid var(--color-border)}
.difference-layout{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);
  gap:18px
}
.difference-main p{color:var(--color-muted)}
.difference-main p:last-child{margin-bottom:0}
.difference-notes{display:grid;gap:12px}
.difference-notes .card{box-shadow:inset 0 1px 0 var(--color-paper)}
.difference-notes h3{font-size:18px}
.difference-notes p{margin:0;color:var(--color-muted)}
.difference-callout{margin-top:24px}

#blog-preview{background:var(--color-panel-recessed)}
#blog-preview .article-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
#blog-preview .article-card h3{font-size:18px}

@media (max-width:1040px){
  #blog-preview .article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .server-status .srv-row{grid-template-columns:auto auto minmax(0,1fr) auto}
  .server-status .srv-type{display:none}
}
@media (max-width:900px){
  .route-guidance{grid-template-columns:1fr}
  .difference-layout{grid-template-columns:1fr}
}
@media (max-width:768px){
  .pl{gap:16px}
  .stage{width:100%}
  .doodle{display:none}
  .stats .wrap{flex-direction:column;align-items:center;gap:18px}
  .feature-browser{display:block}
  .feature-tabs{gap:8px}
  .feature-tab{width:100%}
  .feature-detail{
    margin-top:8px;
    margin-bottom:8px;
    padding:22px
  }
  .feature-detail:not(.is-active){display:none}
  .traffic-pack-panel{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero{padding-top:10px}
  .copy h1{margin-top:12px}
  .trust{display:grid;justify-items:center;gap:4px}
  .trust span+span::before{display:none}
  .flags{gap:7px}
  .flag{padding-right:9px;font-size:12px}
  .stage{margin-top:42px}
  .float-card{top:-28px;left:8px;transform:none}
  .float-pill{top:12px;right:8px}
  .route-list-head{padding-inline:12px}
  .route-items{padding-inline:6px}
  .detail-body{padding:16px}
  .stats .wrap{padding-top:22px;padding-bottom:22px}
  .server-status .srv-grid{grid-template-columns:1fr}
  .server-status .srv-row{grid-template-columns:auto auto minmax(0,1fr) auto}
  .server-status .srv-bw{display:none}
  .section-link-row{justify-content:flex-start}
  #blog-preview .article-grid{grid-template-columns:1fr}
  .traffic-pack-panel .btn{width:100%}
}
@media (max-width:420px){
  .pl{gap:12px 14px}
  .pl label{font-size:14px}
  .pl label .ico{width:18px;height:18px}
  .flags{justify-content:flex-start}
  .server-status .srv-ms{font-size:11px}
}