.table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-paper);
  -webkit-overflow-scrolling:touch;
}
.data-table{
  width:100%;
  min-width:680px;
  background:var(--color-paper);
}
.data-table th,.data-table td{
  padding:14px 16px;
  border-bottom:1px solid var(--color-line);
  text-align:left;
  vertical-align:middle;
}
.data-table th{background:var(--color-surface-strong);color:var(--color-ink);font-size:13px;font-weight:800}
.data-table td:first-child{color:var(--color-ink);font-weight:700}
.data-table tr:last-child td{border-bottom:0}
.prose>.data-table{
  display:block;
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.tab-list{
  display:inline-flex;
  max-width:100%;
  gap:4px;
  padding:5px;
  overflow-x:auto;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-surface-strong);
}
.tab-button{
  min-width:90px;
  min-height:42px;
  padding:8px 16px;
  border:0;
  border-radius:var(--radius-xs);
  background:transparent;
  color:var(--color-muted);
  white-space:nowrap;
}
.tab-button[aria-selected="true"],.tab-button.is-active{
  background:var(--color-paper);
  color:var(--color-brand);
  font-weight:800;
  box-shadow:var(--shadow-card);
}
.tab-panel{padding-top:28px}
.tab-panel[hidden]{display:none}
.toc-tabs{
  position:sticky;
  top:calc(var(--header-height) + 8px);
  z-index:35;
  display:flex;
  max-width:100%;
  gap:6px;
  margin-bottom:34px;
  padding:7px;
  overflow-x:auto;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-paper);
  box-shadow:var(--shadow-card);
  scrollbar-width:thin;
}
.toc-tabs a{
  display:inline-flex;
  min-height:36px;
  flex:0 0 auto;
  align-items:center;
  padding:6px 13px;
  border-radius:var(--radius-xs);
  color:var(--color-muted);
  font-size:14px;
  white-space:nowrap;
}
.toc-tabs a.is-reading,.toc-tabs a[aria-current="location"]{background:var(--color-brand-soft);color:var(--color-brand);font-weight:750}
body:has(.toc-tabs) section[id]{scroll-margin-top:var(--toc-offset)}
.faq-list{display:grid;gap:10px}
.faq-item{
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
}
.faq-item summary{
  position:relative;
  min-height:56px;
  padding:15px 48px 15px 18px;
  color:var(--color-ink);
  font-weight:750;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  position:absolute;
  top:50%;
  right:18px;
  color:var(--color-brand);
  content:"+";
  font-family:var(--font-mono);
  font-size:22px;
  transform:translateY(-50%);
}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 18px 18px;color:var(--color-muted)}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan-card{
  position:relative;
  min-width:0;
  padding:28px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  box-shadow:var(--shadow-card);
}
.plan-card.is-current{border-color:var(--color-brand);background:var(--color-paper);box-shadow:var(--shadow-window)}
.plan-ribbon{
  position:absolute;
  top:14px;
  right:14px;
  padding:4px 9px;
  border-radius:var(--radius-pill);
  background:var(--color-brand);
  color:var(--color-paper);
  font-size:12px;
  font-weight:800;
}
.plan-name{font-size:18px;font-weight:800}
.plan-price{margin:18px 0 4px;color:var(--color-brand);font-family:var(--font-mono);font-size:38px;font-weight:800;line-height:1}
.plan-period{color:var(--color-muted);font-size:13px}
.plan-features{display:grid;gap:8px;margin:22px 0;padding:0;list-style:none}
.plan-features li{color:var(--color-muted)}
.plan-features li::before{margin-right:8px;color:var(--color-success);content:"✓"}
.server-group{margin-bottom:34px}
.server-group-title{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.server-table{min-width:720px}
.server-type,.streaming-tag{
  display:inline-flex;
  min-height:26px;
  align-items:center;
  padding:3px 9px;
  border-radius:var(--radius-pill);
  background:var(--color-brand-soft);
  color:var(--color-brand-deep);
  font-size:12px;
  white-space:nowrap;
}
.platform-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.platform-card{
  min-width:0;
  padding:22px 16px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-paper);
  text-align:center;
  box-shadow:var(--shadow-card);
}
.platform-icon{
  display:grid;
  width:44px;
  height:44px;
  margin:0 auto 12px;
  place-items:center;
  border-radius:var(--radius-sm);
  background:var(--color-brand-soft);
  color:var(--color-brand);
}
.platform-icon svg{width:24px;height:24px}
.platform-name{margin-bottom:14px;font-weight:800}
.platform-card .btn{width:100%;padding-inline:10px;font-size:13px}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.article-card{
  display:flex;
  min-width:0;
  min-height:230px;
  flex-direction:column;
  padding:24px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  color:var(--color-ink);
  box-shadow:var(--shadow-card);
}
.article-card:hover{transform:translateY(-3px);color:var(--color-ink)}
.article-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;color:var(--color-muted);font-size:12px}
.article-card h3{font-size:21px}
.article-card p{color:var(--color-muted)}
.article-more{margin-top:auto;color:var(--color-brand);font-weight:750}
.callout{
  margin:28px 0;
  padding:18px 20px;
  border-left:4px solid var(--color-brand);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:var(--color-surface-strong);
  color:var(--color-ink);
}
.callout strong{color:var(--color-brand-deep)}
.promo-block{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  margin-top:52px;
  padding:30px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface-strong);
  box-shadow:var(--shadow-card);
}
.promo-block h2{margin-bottom:8px;font-size:28px}
.promo-block p{margin:0;color:var(--color-muted)}
.float-cta{
  position:fixed;
  right:26px;
  bottom:calc(26px + env(safe-area-inset-bottom,0px));
  z-index:80;
  display:inline-flex;
  min-height:48px;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  border-radius:var(--radius-pill);
  background:var(--color-brand);
  color:var(--color-paper);
  font-weight:800;
  box-shadow:var(--shadow-button);
}
.float-cta:hover{background:var(--color-brand-deep);color:var(--color-paper);transform:translateY(-2px)}
.float-cta svg{width:18px;height:18px;flex:0 0 auto}
body:has(.float-cta)::after{
  display:block;
  height:calc(88px + env(safe-area-inset-bottom,0px));
  content:"";
}
.hero-preview{
  position:relative;
  display:flex;
  min-height:calc(100svh - var(--header-height));
  align-items:center;
  overflow-x:clip;
  padding-top:26px;
  padding-bottom:30px;
}
.hero-preview::before{
  position:absolute;
  inset:8% 4% auto auto;
  width:38%;
  height:62%;
  border-radius:50%;
  background:radial-gradient(circle,var(--color-brand-mid),transparent 68%);
  content:"";
  pointer-events:none;
}
.hero-bento{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
  width:100%;
}
.bento-cell{
  min-width:0;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  box-shadow:var(--shadow-card);
  transition:transform var(--duration-base) ease,box-shadow var(--duration-base) ease;
}
.bento-cell:hover{transform:translateY(-3px);box-shadow:var(--shadow-window)}
.hero-copy{
  grid-column:1/8;
  padding:40px 44px 34px;
}
.hero-copy .badge{margin-bottom:22px}
.hero-copy h1{margin-bottom:18px}
.hero-lead{max-width:580px;color:var(--color-muted);font-size:16.5px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0}
.trust-row{display:flex;flex-wrap:wrap;gap:8px}
.trust-pill{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border-radius:var(--radius-pill);
  background:var(--color-brand-soft);
  color:var(--color-brand-deep);
  font-size:13px;
  font-weight:650;
}
.trust-pill svg{width:12px;height:12px;flex:0 0 auto}
.hero-device{
  grid-column:8/13;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 26px;
  background:var(--color-surface-strong);
  overflow:clip;
}
.app-window{
  width:100%;
  max-width:470px;
  overflow:hidden;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-paper);
  box-shadow:var(--shadow-window);
  transform:rotate(1.8deg);
}
.window-chrome{
  display:flex;
  height:36px;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border-bottom:1px solid var(--color-line);
  background:var(--color-surface);
}
.window-dot{width:11px;height:11px;flex:0 0 auto;border-radius:50%}
.window-dot.red{background:var(--color-danger)}
.window-dot.yellow{background:var(--color-warning)}
.window-dot.green{background:var(--color-success)}
.window-title{flex:1;padding-right:42px;color:var(--color-muted);font-size:12px;text-align:center}
.window-body{display:grid;grid-template-columns:188px minmax(0,1fr)}
.route-list{padding:12px 10px;border-right:1px solid var(--color-line)}
.route-label{padding:0 8px 7px;color:var(--color-muted);font-size:11px;letter-spacing:.08em}
.route-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
  padding:8px;
  border-radius:var(--radius-sm);
}
.route-item.is-active{background:var(--color-brand-soft)}
.route-item.is-active::before{
  position:absolute;
  top:8px;
  bottom:8px;
  left:0;
  width:3px;
  border-radius:var(--radius-pill);
  background:var(--color-brand);
  content:"";
}
.flag-mini{width:18px;height:13px;flex:0 0 auto;border-radius:3px;overflow:hidden}
.route-copy{min-width:0;line-height:1.25}
.route-name{font-size:12px;font-weight:750;white-space:nowrap}
.route-type{display:inline-block;margin-top:3px;padding:2px 5px;border-radius:4px;background:var(--color-surface-strong);color:var(--color-muted);font-size:9px}
.connect-pane{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;padding:20px 14px}
.connect-state{display:flex;align-items:center;gap:7px;margin-bottom:14px;color:var(--color-success);font-size:13px;font-weight:750}
.connect-state::before{width:8px;height:8px;border-radius:50%;background:var(--color-success);box-shadow:0 0 0 3px var(--color-success-soft);content:""}
.connect-switch{
  display:grid;
  width:112px;
  height:112px;
  margin-bottom:14px;
  place-items:center;
  border:4px solid var(--color-brand);
  border-radius:50%;
  background:var(--color-paper);
  box-shadow:0 0 0 9px var(--color-brand-soft),0 10px 24px -8px var(--color-shadow-deep);
  color:var(--color-brand);
}
.connect-switch svg{width:54px;height:54px}
.connected-route{margin-bottom:13px;color:var(--color-muted);font-size:12px;white-space:nowrap}
.current-plan{
  padding:6px 12px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-pill);
  background:var(--color-surface);
  color:var(--color-muted);
  font-size:11px;
  white-space:nowrap;
}
.current-plan strong{color:var(--color-ink);font-family:var(--font-mono)}
.bento-small{padding:18px 22px}
.bento-platforms{grid-column:1/5}
.bento-flags{grid-column:5/9;background:var(--color-paper)}
.bento-refund{grid-column:9/11;background:var(--color-surface-strong)}
.bento-signup{grid-column:11/13;background:var(--color-surface-strong)}
.cell-kicker{margin-bottom:10px;color:var(--color-muted);font-size:12px;letter-spacing:.06em}
.mini-platform-row,.mini-flag-row{display:flex;justify-content:space-between;gap:8px}
.mini-platform,.mini-flag{display:flex;min-width:0;flex-direction:column;align-items:center;gap:6px;color:var(--color-muted);font-size:11px}
.mini-platform svg{width:22px;height:22px;color:var(--color-ink)}
.mini-flag svg{width:24px;height:17px;border-radius:3px}
.fact-number{color:var(--color-brand);font-family:var(--font-mono);font-size:28px;font-weight:800;line-height:1.1}
.fact-title{font-size:14px;font-weight:800}
.fact-copy{color:var(--color-muted);font-size:12px}
.preview-main{padding-top:70px;padding-bottom:90px}
.preview-section{padding-top:72px;padding-bottom:24px}
.preview-title{margin-bottom:30px}
.swatch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.swatch{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-paper);
}
.swatch-color{height:76px}
.swatch-copy{padding:12px;font-family:var(--font-mono);font-size:12px}
.swatch-bg{background:var(--color-canvas)}
.swatch-panel{background:var(--color-surface)}
.swatch-panel2{background:var(--color-surface-strong)}
.swatch-border{background:var(--color-line)}
.swatch-accent{background:var(--color-brand)}
.swatch-accent-dark{background:var(--color-brand-deep)}
.swatch-text{background:var(--color-ink)}
.swatch-muted{background:var(--color-muted)}
.swatch-success{background:var(--color-success)}
.swatch-warn{background:var(--color-warning)}
.swatch-error{background:var(--color-danger)}
.swatch-paper{background:var(--color-paper)}
.type-samples{display:grid;gap:18px;padding:28px}
.type-display{font-family:var(--font-display);font-size:52px;font-weight:900;line-height:1.1}
.type-heading{font-family:var(--font-display);font-size:34px;font-weight:850}
.type-body{color:var(--color-muted);font-size:18px}
.type-mono{font-family:var(--font-mono);color:var(--color-brand-deep)}
.preview-button-row{display:flex;flex-wrap:wrap;gap:12px}
.preview-grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.static-footer{margin-top:80px}
@media (max-width:1080px){
  .hero-preview{min-height:auto}
  .hero-copy,.hero-device{grid-column:1/13}
  .bento-platforms,.bento-flags{grid-column:1/7}
  .bento-refund,.bento-signup{grid-column:span 3}
  .platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .plan-grid,.article-grid{grid-template-columns:1fr}
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo-block{grid-template-columns:1fr}
  .hero-copy{padding:30px 24px}
  .hero-device{padding:22px 16px}
  .bento-platforms,.bento-flags,.bento-refund,.bento-signup{grid-column:1/13}
  .swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preview-grid-two{grid-template-columns:1fr}
  .type-display{font-size:38px}
}
@media (max-width:640px){
  .hero-actions{display:grid}
  .window-body{grid-template-columns:1fr}
  .route-list{border-right:0;border-bottom:1px solid var(--color-line)}
  .route-item:nth-of-type(n+4){display:none}
  .connect-pane{padding-block:28px}
  .mini-platform-row,.mini-flag-row{flex-wrap:wrap;justify-content:flex-start}
  .mini-platform,.mini-flag{width:calc(33.333% - 8px)}
  .platform-grid{grid-template-columns:1fr}
  .float-cta{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .swatch-grid{grid-template-columns:1fr}
}