.tab-shell{display:grid;gap:24px}
.tab-list{display:flex;max-width:100%;gap:6px;padding:6px;overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-panel-alt);scrollbar-width:thin}
.tab-list [role="tab"]{min-height:40px;padding:8px 17px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-muted);font-weight:700;white-space:nowrap;cursor:pointer}
.tab-list [role="tab"][aria-selected="true"]{background:var(--color-panel);color:var(--color-ink);box-shadow:0 4px 14px var(--color-shadow-paper)}
[role="tabpanel"][hidden]{display:none}
.toc-tabs{position:sticky;top:12px;z-index:35;display:flex;max-width:100%;gap:6px;padding:7px;overflow-x:auto;overscroll-behavior-inline:contain;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-panel);box-shadow:0 8px 24px var(--color-shadow-paper);scrollbar-width:thin}
.toc-tabs a{display:flex;min-height:38px;align-items:center;padding:7px 13px;border-radius:var(--radius-sm);color:var(--color-muted);font-size:13px;font-weight:700;white-space:nowrap}
.toc-tabs a:hover,.toc-tabs a.is-current,.toc-tabs a[aria-current="location"]{background:var(--color-accent-tint);color:var(--color-accent-dark)}
.faq-list{display:grid;gap:10px}
.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-panel)}
.faq-item summary{position:relative;min-height:54px;padding:15px 48px 15px 18px;font-weight:750;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;border:1px solid var(--color-border);border-radius:50%;content:"+";display:grid;place-items:center;transform:translateY(-50%);color:var(--color-accent-dark)}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 18px 18px;color:var(--color-muted)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.plan-card{position:relative;display:flex;min-width:0;flex-direction:column;padding:26px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-panel);box-shadow:var(--shadow-card)}
.plan-card.is-featured{border-color:var(--color-accent);background:linear-gradient(180deg,var(--color-accent-tint),var(--color-panel))}
.plan-card-badge{position:absolute;top:14px;right:14px}
.plan-period{margin-bottom:8px;color:var(--color-muted);font-size:13px;font-weight:700}
.plan-name{margin-bottom:18px;font-size:24px}
.plan-price{display:flex;align-items:baseline;gap:5px;margin-bottom:6px;font-family:var(--font-mono);font-size:38px;font-weight:800;line-height:1}
.plan-price small{color:var(--color-muted);font-family:var(--font-body);font-size:13px;font-weight:600}
.plan-note{min-height:48px;color:var(--color-muted);font-size:14px}
.plan-features{display:grid;gap:9px;margin:22px 0;padding:18px 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);list-style:none}
.plan-features li{position:relative;padding-left:24px}
.plan-features li::before{position:absolute;left:0;color:var(--color-success);content:"✓";font-weight:800}
.plan-card .btn{margin-top:auto}
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-panel)}
.data-table{width:100%;min-width:680px;text-align:left}
.data-table th,.data-table td{padding:14px 16px;border-bottom:1px solid var(--color-border);vertical-align:top}
.data-table th{background:var(--color-panel-alt);color:var(--color-ink);font-size:13px;font-weight:800}
.data-table td:first-child{color:var(--color-ink);font-weight:700}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:var(--color-accent-tint)}
.prose>.data-table{display:block;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.route-group{margin-top:28px}
.route-type{display:inline-flex;padding:3px 8px;border-radius:var(--radius-pill);background:var(--color-violet-tint);color:var(--color-violet-deep);font-family:var(--font-mono);font-size:11px;font-weight:800}
.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;padding:20px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-panel);transition:transform var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast)}
.platform-card:hover{transform:translateY(-3px);border-color:var(--color-accent-line);background:var(--color-accent-tint)}
.platform-icon{display:grid;width:42px;height:42px;margin-bottom:18px;place-items:center;border-radius:var(--radius-sm);background:var(--color-panel-alt);color:var(--color-accent-dark)}
.platform-icon svg{width:23px;height:23px}
.platform-card h3{margin-bottom:6px;font-size:18px}
.platform-card p{margin-bottom:18px;color:var(--color-muted);font-size:13px}
.platform-card .btn{margin-top:auto;padding-inline:14px}
.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-top:3px solid var(--color-accent);border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);border-left:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-panel)}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:14px;color:var(--color-muted);font-family:var(--font-mono);font-size:11px}
.article-card h3{font-size:21px}
.article-card p{color:var(--color-muted)}
.article-card .text-link{margin-top:auto}
.callout{position:relative;margin:24px 0;padding:20px 22px 20px 26px;border:1px solid var(--color-border);border-left:4px solid var(--color-accent);border-radius:var(--radius-sm);background:var(--color-panel-alt)}
.callout-title{display:block;margin-bottom:5px;font-weight:800}
.promo-block{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;margin-top:52px;padding:clamp(26px,5vw,48px);overflow-x:clip;border:1px solid var(--color-dusk-line);border-radius:var(--radius-lg);background:radial-gradient(circle at 84% 120%,var(--color-glow-high),transparent 45%),var(--color-dusk);color:var(--color-dusk-ink)}
.promo-block h2{margin-bottom:8px;font-size:clamp(28px,4vw,42px)}
.promo-block p{margin-bottom:0;color:var(--color-dusk-muted)}
.feature-ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--color-border)}
.feature-row{display:grid;grid-template-columns:42px minmax(120px,.7fr) minmax(0,1.3fr);gap:18px;align-items:start;padding:28px 18px;border-bottom:1px solid var(--color-border);transition:transform var(--transition-fast),background var(--transition-fast)}
.feature-row:nth-child(even){transform:translateY(14px)}
.feature-row:first-child{grid-column:1/-1;padding-block:36px}
.feature-row:hover{transform:translateX(4px);background:var(--color-panel)}
.feature-row:nth-child(even):hover{transform:translate(4px,14px)}
.feature-check{display:grid;width:32px;height:32px;place-items:center;border:2px solid var(--color-accent);border-radius:50%;color:var(--color-accent-dark);font-weight:800}
.feature-row h3{margin:2px 0 0;font-size:20px}
.feature-row p{margin:0;color:var(--color-muted)}
.ticker{max-width:100%;overflow:hidden;border-block:1px solid var(--color-border);background:var(--color-panel-alt)}
.ticker-track{display:flex;width:max-content;will-change:transform}
.ticker-group{display:flex;flex-shrink:0;align-items:center;gap:28px;padding:14px 28px}
.ticker-item{display:flex;align-items:center;gap:9px;color:var(--color-muted);font-family:var(--font-mono);font-size:12px;white-space:nowrap}
.ticker-item::before{width:6px;height:6px;border-radius:50%;background:var(--color-violet);content:""}
.hero-preview{position:relative;display:flex;min-height:calc(100svh - var(--header-height) - 52px);align-items:center;overflow-x:clip;background:var(--color-dusk);color:var(--color-dusk-ink)}
.hero-preview::before{position:absolute;bottom:-150px;left:50%;width:1480px;height:580px;background:radial-gradient(closest-side,var(--color-glow-high),var(--color-glow-low) 54%,transparent 76%);content:"";transform:translateX(-50%);pointer-events:none}
.hero-preview-grid{position:relative;display:grid;width:100%;grid-template-columns:minmax(0,47%) minmax(0,1fr);gap:64px;align-items:center;padding-top:44px;padding-bottom:56px}
.hero-copy{position:relative;z-index:2;max-width:600px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;padding:5px 14px;border:1px solid var(--color-dusk-line);border-radius:var(--radius-pill);background:var(--color-dusk-chip);color:var(--color-dusk-muted);font-size:13px;letter-spacing:.08em}
.hero-kicker::before{width:7px;height:7px;border-radius:50%;background:var(--color-violet);content:"";flex-shrink:0}
.hero-copy h1{margin-bottom:26px;color:var(--color-dusk-ink);font-size:60px;line-height:1.14}
.gradient-word{background:linear-gradient(118deg,var(--color-accent-soft) 8%,var(--color-accent) 52%,var(--color-accent-dark) 96%);background-clip:text;color:var(--color-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-description{margin-bottom:22px;color:var(--color-dusk-muted);font-size:16.5px;line-height:1.75}
.hero-description strong{color:var(--color-dusk-ink)}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;padding:0;list-style:none}
.hero-facts li{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border:1px solid var(--color-dusk-line);border-radius:var(--radius-pill);background:var(--color-dusk-chip);font-size:13px}
.hero-facts li::before{width:6px;height:6px;border-radius:50%;background:var(--color-accent);content:"";flex-shrink:0}
.hero-trust{margin-bottom:24px;color:var(--color-dusk-muted);font-size:13px}
.hero-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-top:12px;border-top:1px solid var(--color-dusk-line)}
.hero-strip+.hero-strip{margin-top:10px}
.hero-strip-label{min-width:56px;color:var(--color-dusk-muted);font-size:11px;letter-spacing:.14em}
.platform-inline,.flag-inline{display:inline-flex;align-items:center;gap:7px;color:var(--color-dusk-muted);font-size:12px}
.platform-inline svg{width:16px;height:16px}
.flag-inline svg{width:22px;height:15px;overflow:hidden;border-radius:3px}
.hero-device{position:relative;z-index:1}
.client-card{width:100%;max-width:620px;overflow:hidden;border:1px solid var(--color-card-edge);border-radius:var(--radius-lg);background:var(--color-panel);box-shadow:0 0 0 1px var(--color-ring),0 34px 72px var(--color-shadow-deep),0 10px 26px var(--color-shadow-mid);color:var(--color-ink);transform:rotate(2deg)}
.client-chrome{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--color-border);background:var(--color-panel-alt)}
.chrome-dot{width:10px;height:10px;border-radius:50%}
.chrome-dot.error{background:var(--color-error)}
.chrome-dot.warning{background:var(--color-warning)}
.chrome-dot.success{background:var(--color-success)}
.chrome-title{flex:1;margin-right:44px;color:var(--color-muted);font-family:var(--font-mono);font-size:12px;font-weight:800;text-align:center;letter-spacing:.06em}
.client-body{display:grid;grid-template-columns:1.25fr .95fr;gap:14px;padding:16px}
.client-heading{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
.client-heading h3{margin:0;font-size:14px}
.client-count{color:var(--color-muted);font-family:var(--font-mono);font-size:11px}
.client-routes{display:grid;gap:6px}
.client-route{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-panel)}
.client-route.is-active{border-color:var(--color-accent-line);background:var(--color-accent-tint)}
.route-city{font-size:13px;font-weight:700}
.route-switch{position:relative;width:36px;height:20px;margin-left:auto;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-panel-alt)}
.route-switch::after{position:absolute;top:2px;left:2px;width:14px;height:14px;border:1px solid var(--color-border);border-radius:50%;background:var(--color-panel);content:""}
.client-route.is-active .route-switch{border-color:var(--color-accent-dark);background:var(--color-accent)}
.client-route.is-active .route-switch::after{right:2px;left:auto;border-color:var(--color-accent-dark)}
.client-side{display:flex;flex-direction:column;gap:10px}
.client-plan,.client-status{padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md)}
.client-plan{background:var(--color-panel-alt)}
.client-label{margin:0;color:var(--color-muted);font-size:11px}
.client-plan-name{margin:2px 0;color:var(--color-ink);font-size:20px;font-weight:800}
.client-price{margin:0;color:var(--color-accent-dark);font-family:var(--font-mono);font-size:12px}
.client-status{display:flex;align-items:center;gap:8px}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--color-success)}
.status-text{font-size:13px;font-weight:800}
.status-route{margin-left:auto;color:var(--color-muted);font-family:var(--font-mono);font-size:10px}
.client-note{margin:0;padding:2px;color:var(--color-muted);font-size:11px}
.preview-peek{height:52px;background:var(--color-bg);color:var(--color-muted)}
.preview-peek .wrap{display:flex;height:100%;align-items:center;gap:10px}
.preview-peek-mark{width:8px;height:8px;border:2px solid var(--color-accent);border-radius:50%}
.preview-section-heading{max-width:760px;margin-bottom:38px}
.preview-section-heading p{color:var(--color-muted)}
.swatch-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.swatch{overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-panel)}
.swatch-color{height:82px}
.swatch-color.bg{background:var(--color-bg)}
.swatch-color.panel{background:var(--color-panel)}
.swatch-color.panel-alt{background:var(--color-panel-alt)}
.swatch-color.dusk{background:var(--color-dusk)}
.swatch-color.dusk-panel{background:var(--color-dusk-panel)}
.swatch-color.accent{background:var(--color-accent)}
.swatch-color.accent-dark{background:var(--color-accent-dark)}
.swatch-color.violet{background:var(--color-violet)}
.swatch-color.success{background:var(--color-success)}
.swatch-color.error{background:var(--color-error)}
.swatch-label{padding:11px;font-family:var(--font-mono);font-size:11px}
.type-samples{display:grid;gap:24px}
.type-row{display:grid;grid-template-columns:130px 1fr;gap:24px;align-items:baseline;padding-bottom:22px;border-bottom:1px solid var(--color-border)}
.type-label{color:var(--color-muted);font-family:var(--font-mono);font-size:12px}
.type-display{font-family:var(--font-display);font-size:52px;font-weight:800;line-height:1.1}
.type-heading{font-family:var(--font-display);font-size:34px;font-weight:800}
.type-body{font-size:17px}
.component-stack{display:grid;gap:40px}
.demo-dark{padding:28px;border-radius:var(--radius-lg);background:var(--color-dusk);color:var(--color-dusk-ink)}
.button-demo{display:flex;flex-wrap:wrap;gap:12px}
.preview-footer{margin-top:0}
@media (max-width:1100px){
  .hero-preview-grid{grid-template-columns:1fr;gap:48px}
  .hero-device{max-width:700px}
  .hero-copy{max-width:720px}
  .platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:780px){
  .pricing-grid,.article-grid{grid-template-columns:1fr}
  .feature-ledger{grid-template-columns:1fr}
  .feature-row,.feature-row:first-child{grid-column:auto;grid-template-columns:36px 1fr}
  .feature-row p{grid-column:2}
  .feature-row:nth-child(even){transform:none}
  .feature-row:nth-child(even):hover{transform:translateX(4px)}
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo-block{grid-template-columns:1fr}
  .hero-preview{min-height:auto}
  .hero-preview-grid{padding-top:50px;padding-bottom:56px}
  .hero-copy h1{font-size:clamp(34px,9vw,40px)}
  .swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .type-row{grid-template-columns:1fr;gap:8px}
}
@media (max-width:520px){
  .hero-preview::before{width:100%}
  .client-body{grid-template-columns:1fr}
  .platform-grid{grid-template-columns:1fr}
  .swatch-grid{grid-template-columns:1fr}
  .hero-strip{gap:10px 14px}
  .hero-strip-label{width:100%}
  .ticker-track{width:100%;will-change:auto}
  .ticker-group{min-width:0;flex:1 1 100%;flex-wrap:wrap;padding-inline:16px}
  .ticker-group~.ticker-group{display:none}
  .ticker-item{white-space:normal}
}