.hero-preview{
  position:relative;
  overflow-x:clip;
  border-bottom:1px solid var(--color-border);
}
.hero-preview-in{padding-top:38px;padding-bottom:34px}
.hero-top{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:48px;
  align-items:start;
}
.hero-copy,.hero-side{min-width:0}
.hero-title .line{display:block}
.hero-highlight{position:relative;z-index:0;color:var(--color-accent)}
.hero-highlight::after{
  position:absolute;
  right:2px;
  bottom:5px;
  left:2px;
  z-index:-1;
  height:12px;
  border-radius:3px;
  content:"";
  background:var(--color-accent-soft);
}
.hero-side{padding-top:34px}
.hero-lead{color:var(--color-muted);font-size:16px;line-height:1.75}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px}
.trust-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.trust-row .chip{padding:7px 14px}
.platform-inline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin-top:18px;
  color:var(--color-muted);
}
.platform-inline li{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700}
.platform-inline svg{width:15px;height:15px}

/* Kinetic hero */
.rise{animation:hero-rise .5s cubic-bezier(.22,.7,.3,1) both}
.rise-delay-1{animation-delay:.1s}
.rise-delay-2{animation-delay:.22s}
.rise-delay-3{animation-delay:.34s}
.rise-delay-4{animation-delay:.46s}
@keyframes hero-rise{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}

/* Browser device */
.hero-stage{position:relative;margin-top:36px;padding-bottom:56px}
.dot-band{
  position:absolute;
  right:-40px;
  bottom:18px;
  left:-40px;
  z-index:0;
  height:96px;
  opacity:.28;
  background-image:radial-gradient(var(--color-accent) 1.1px,transparent 1.2px);
  background-size:15px 15px;
}
.device-wrap{position:relative;z-index:1;width:80%;max-width:940px;margin:auto}
.device{
  overflow:hidden;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-panel);
  box-shadow:var(--shadow-device);
  transform:rotate(-1.5deg);
}
.device-chrome{
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px 18px;
  border-bottom:1px solid var(--color-border);
  background:var(--color-panel-alt);
}
.window-dots{display:flex;gap:6px;flex-shrink:0}
.window-dots i{width:10px;height:10px;border-radius:50%}
.dot-error{background:var(--color-error)}
.dot-warning{background:var(--color-warning)}
.dot-success{background:var(--color-success)}
.device-address{
  display:flex;
  min-width:280px;
  align-items:center;
  gap:7px;
  padding:5px 16px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  background:var(--color-bg);
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:12px;
}
.device-address svg{width:11px;height:11px;color:var(--color-success)}
.device-label{margin-left:auto;color:var(--color-muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em}
.route-list li{
  display:grid;
  grid-template-columns:auto minmax(130px,1fr) auto auto auto;
  align-items:center;
  gap:16px;
  padding:12px 22px;
  border-top:1px solid var(--color-border);
}
.route-list li:first-child{border-top:0}
.route-list li.is-connected{background:var(--color-bg)}
.route-flag{width:28px;height:20px;overflow:hidden;border:1px solid var(--color-border);border-radius:4px}
.route-name{display:grid;min-width:0}
.route-name b{font-size:14px}
.route-name span{color:var(--color-muted);font-family:var(--font-mono);font-size:11px}
.route-type{white-space:nowrap}
.media-tag{
  max-width:100%;
  overflow:hidden;
  padding:3px 9px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  color:var(--color-muted);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.route-state{width:8px;height:8px;border-radius:50%;background:var(--color-border)}
.route-state.on{background:var(--color-success)}
.connection-card{
  position:absolute;
  top:-52px;
  right:-30px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-panel);
  box-shadow:var(--shadow-card);
  transform:rotate(1.2deg);
}
.connection-card div{display:grid}
.connection-card b{font-size:13px}
.connection-card span{color:var(--color-muted);font-family:var(--font-mono);font-size:10px}

/* Tabs */
.tabs{min-width:0}
.tab-list{
  display:flex;
  max-width:100%;
  gap:5px;
  padding:5px;
  overflow-x:auto;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-panel-alt);
  scrollbar-width:thin;
}
.tab-list [role="tab"]{
  min-width:max-content;
  min-height:42px;
  padding:8px 18px;
  border:0;
  border-radius:var(--radius-xs);
  background:transparent;
  font-weight:800;
}
.tab-list [role="tab"][aria-selected="true"]{color:var(--color-white);background:var(--color-accent)}
[role="tabpanel"][hidden]{display:none}
.tab-panel{padding-top:24px}

/* TOC */
.toc-tabs{
  position:sticky;
  top:12px;
  z-index:30;
  display:flex;
  max-width:100%;
  gap:6px;
  margin-bottom:32px;
  padding:7px;
  overflow-x:auto;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-panel);
  box-shadow:0 4px 0 var(--color-shadow-soft);
  scrollbar-width:thin;
}
.toc-tabs a{
  display:inline-flex;
  min-width:max-content;
  min-height:38px;
  align-items:center;
  padding:7px 13px;
  border-radius:var(--radius-xs);
  color:var(--color-muted);
  font-size:13px;
  font-weight:800;
}
.toc-tabs a:hover,.toc-tabs a.is-current,.toc-tabs a[aria-current="location"]{
  color:var(--color-white);
  background:var(--color-accent);
}
body:has(.toc-tabs) section[id]{scroll-margin-top:var(--toc-offset)}

/* FAQ */
.faq-list{display:grid;gap:10px}
.faq-item{
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-panel);
}
.faq-item summary{
  position:relative;
  min-height:54px;
  padding:15px 52px 15px 18px;
  cursor:pointer;
  font-weight:800;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  position:absolute;
  top:50%;
  right:18px;
  width:24px;
  height:24px;
  content:"+";
  transform:translateY(-50%);
  color:var(--color-accent);
  font-family:var(--font-mono);
  font-size:22px;
  line-height:24px;
  text-align:center;
}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 18px 18px;color:var(--color-muted)}

/* Pricing */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}
.plan-card{
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:28px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-panel);
}
.plan-card.is-featured{
  border:2px solid var(--color-accent);
  background:var(--color-panel);
  box-shadow:var(--shadow-card);
}
.plan-ribbon{
  position:absolute;
  top:14px;
  right:14px;
  color:var(--color-white);
  background:var(--color-accent);
}
.plan-name{padding-right:70px;font-size:22px;font-weight:900}
.plan-price{display:flex;align-items:end;gap:5px;margin-top:22px}
.plan-price strong{font-size:42px;line-height:1}
.plan-price span{color:var(--color-muted)}
.plan-traffic{margin-top:10px;font-family:var(--font-mono);font-size:13px;color:var(--color-accent)}
.plan-features{display:grid;gap:9px;margin:22px 0;padding-top:18px;border-top:1px solid var(--color-border)}
.plan-features li{display:flex;gap:9px;color:var(--color-muted)}
.plan-features li::before{flex-shrink:0;content:"✓";color:var(--color-success);font-weight:900}
.plan-card .btn{margin-top:auto}

/* Wide tables */
.table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-panel);
  -webkit-overflow-scrolling:touch;
}
.data-table,.node-table,.compare-table{
  width:100%;
  min-width:680px;
  border-collapse:collapse;
}
.data-table th,.data-table td,.node-table th,.node-table td,.compare-table th,.compare-table td{
  padding:14px 16px;
  border-bottom:1px solid var(--color-border);
  text-align:left;
  vertical-align:middle;
}
.data-table th,.node-table th,.compare-table th{
  color:var(--color-text);
  background:var(--color-panel-alt);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
}
.data-table tr:last-child td,.node-table tr:last-child td,.compare-table tr:last-child td{border-bottom:0}
.node-group td{color:var(--color-accent);background:var(--color-accent-soft);font-weight:900}
.flag-inline{display:flex;align-items:center;gap:9px}
.flag-inline svg{width:28px;height:20px;border-radius:3px}
.prose>.data-table{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Cards */
.platform-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}
.platform-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:22px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-panel);
}
.platform-card svg{width:28px;height:28px;color:var(--color-accent)}
.platform-card h3{font-size:18px}
.platform-card p{color:var(--color-muted);font-size:13px}
.platform-card .btn{margin-top:auto;width:100%;padding-inline:12px}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.article-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:24px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-panel);
}
.article-card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;color:var(--color-muted);font-family:var(--font-mono);font-size:11px}
.article-card h3{font-size:21px}
.article-card p{margin-top:12px;color:var(--color-muted);font-size:14px}
.article-card-link{margin-top:auto;padding-top:20px;color:var(--color-accent);font-weight:800}
.callout{
  padding:20px 22px;
  border-left:5px solid var(--color-accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:var(--color-panel-alt);
}
.callout strong{display:block;margin-bottom:5px}
.promo-block{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:center;
  padding:32px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-text);
  color:var(--color-panel);
  box-shadow:var(--shadow-card);
}
.promo-block h2,.promo-block h3,.promo-block strong{color:var(--color-panel)}
.promo-block p{margin-top:8px;color:var(--color-shadow-soft)}
.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);
  color:var(--color-white);
  background:var(--color-accent);
  box-shadow:var(--shadow-button);
  font-size:14px;
  font-weight:900;
}
.float-cta:hover{background:var(--color-accent-dark)}
.float-cta svg{width:18px;height:18px}
body:has(.float-cta)::after{
  display:block;
  height:calc(88px + env(safe-area-inset-bottom,0px));
  content:"";
}

/* Feature tickets */
.feature-tickets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 48px}
.feature-ticket{
  position:relative;
  min-width:0;
  padding:28px 22px;
  border-top:3px solid var(--color-accent);
  transition:transform var(--transition-fast),background-color var(--transition-fast);
}
.feature-ticket:nth-child(even){transform:translateY(28px)}
.feature-ticket:hover{background:var(--color-panel-alt);transform:translateX(-2px)}
.feature-ticket:nth-child(even):hover{transform:translate(-2px,28px)}
.feature-ticket p{margin-top:12px;color:var(--color-muted)}

/* Preview-only layouts */
.preview-page{overflow-x:clip}
.preview-section{padding-top:76px;padding-bottom:76px;border-bottom:1px solid var(--color-border)}
.preview-title{margin-bottom:34px}
.preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.preview-swatch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.preview-swatch{overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-panel)}
.preview-swatch-color{height:82px}
.preview-swatch-info{padding:12px;font-family:var(--font-mono);font-size:11px}
.swatch-bg{background:var(--color-bg)}
.swatch-panel{background:var(--color-panel)}
.swatch-panel-alt{background:var(--color-panel-alt)}
.swatch-border{background:var(--color-border)}
.swatch-accent{background:var(--color-accent)}
.swatch-accent-dark{background:var(--color-accent-dark)}
.swatch-text{background:var(--color-text)}
.swatch-muted{background:var(--color-muted)}
.swatch-success{background:var(--color-success)}
.swatch-warning{background:var(--color-warning)}
.swatch-error{background:var(--color-error)}
.swatch-shadow{background:var(--color-shadow)}
.type-samples{display:grid;gap:24px}
.type-display{font-family:var(--font-display);font-size:clamp(38px,6vw,68px);font-weight:900;line-height:1.05}
.type-body{max-width:720px;color:var(--color-muted);font-size:18px}
.type-mono{font-family:var(--font-mono);font-size:14px;color:var(--color-accent)}
.preview-button-row{display:flex;flex-wrap:wrap;gap:14px}
.preview-footer{margin-top:0}

@media (max-width:960px){
  .hero-top{grid-template-columns:1fr;gap:18px}
  .hero-side{padding-top:0}
  .device-wrap{width:90%}
  .pricing-grid{grid-template-columns:1fr}
  .platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .article-grid{grid-template-columns:1fr 1fr}
  .preview-swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .device-wrap{width:94%}
  .connection-card{right:0}
  .route-list li{grid-template-columns:auto minmax(0,1fr) auto}
  .route-list .media-tag,.route-list .route-state{display:none}
  .platform-grid{grid-template-columns:1fr 1fr}
  .article-grid,.preview-grid{grid-template-columns:1fr}
  .feature-tickets{grid-template-columns:1fr}
  .feature-ticket:nth-child(even){transform:none}
  .feature-ticket:nth-child(even):hover{transform:translateX(-2px)}
  .promo-block{grid-template-columns:1fr}
  .toc-tabs{top:8px}
}
@media (max-width:640px){
  .hero-preview-in{padding-top:28px}
  .hero-stage{margin-top:30px;padding-bottom:36px}
  .device-wrap{width:100%}
  .device{box-shadow:8px 9px 0 var(--color-shadow)}
  .device-chrome{gap:8px;padding:10px}
  .device-address{min-width:0;flex:1;padding-inline:10px;overflow:hidden}
  .device-label{display:none}
  .route-list li{gap:9px;padding:10px}
  .route-name b{font-size:13px}
  .route-type{padding-inline:7px;font-size:9px}
  .connection-card{top:-18px;right:5px;padding:9px 12px;transform:none}
  .platform-grid{grid-template-columns:1fr}
  .article-grid{grid-template-columns:1fr}
  .preview-swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preview-button-row{display:grid}
  .float-cta{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .promo-block{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
}