.tab-shell{max-width:100%;overflow:hidden}
.tab-list{display:flex;max-width:100%;gap:5px;padding:5px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-panel-alt);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab-list [role="tab"]{min-height:42px;padding:8px 18px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-muted);font-weight:700;white-space:nowrap}
.tab-list [role="tab"][aria-selected="true"]{background:var(--color-panel);color:var(--color-accent);box-shadow:0 4px 12px -8px var(--color-shadow-mid)}
.tab-panel{padding-top:24px}.tab-panel[hidden]{display:none}
.toc-tabs{position:sticky;top:calc(var(--header-height) + 8px);z-index:30;display:flex;max-width:100%;gap:6px;padding:7px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-panel);box-shadow:0 10px 22px -20px var(--color-shadow-heavy);overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.toc-tabs a{display:inline-flex;min-height:38px;align-items:center;padding:7px 14px;border-radius:var(--radius-pill);color:var(--color-muted);font-size:14px;text-decoration:none;white-space:nowrap}
.toc-tabs a.is-current,.toc-tabs a[aria-current="location"]{background:var(--color-accent-soft);color:var(--color-accent);font-weight:700}
body:has(.toc-tabs) section[id]{scroll-margin-top:var(--toc-offset)}
.faq-list{border-top:1px solid var(--color-border)}
.faq-item{border-bottom:1px solid var(--color-border)}
.faq-item summary{position:relative;display:flex;min-height:62px;align-items:center;padding:16px 48px 16px 0;cursor:pointer;font-weight:750;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:8px;display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:var(--color-panel-alt);color:var(--color-accent);font-size:20px;line-height:1}
.faq-item[open] summary::after{content:"−"}
.faq-answer{max-width:820px;padding:0 48px 20px 0;color:var(--color-muted)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.plan-card{position:relative;display:flex;min-width:0;flex-direction:column;padding:30px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-panel)}
.plan-card.is-featured{border-color:var(--color-accent);box-shadow:var(--shadow-float)}
.plan-ribbon{position:absolute;top:16px;right:16px;max-width:calc(100% - 32px);padding:5px 10px;border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-white);font-size:12px;font-weight:800;overflow:hidden}
.plan-name{margin-bottom:6px;font-size:21px}.plan-note{min-height:52px;color:var(--color-muted)}
.plan-price{display:flex;align-items:baseline;gap:5px;margin:20px 0 8px;font-family:var(--font-mono);font-size:42px;font-weight:800;line-height:1}
.plan-price small{color:var(--color-muted);font-family:var(--font-body);font-size:13px;font-weight:500}
.plan-list{flex:1;margin:18px 0 24px;padding:0;list-style:none}
.plan-list li{position:relative;padding:7px 0 7px 25px}.plan-list li::before{content:"✓";position:absolute;left:0;color:var(--color-success);font-weight:800}
.table-scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table,.route-table,.compare-table{width:100%;min-width:700px;border-spacing:0;border-collapse:separate;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-panel);overflow:hidden}
.data-table th,.data-table td,.route-table th,.route-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,.route-table th,.compare-table th{background:var(--color-panel-alt);color:var(--color-text);font-size:13px;font-weight:800}
.data-table tr:last-child td,.route-table tr:last-child td,.compare-table tr:last-child td{border-bottom:0}
.route-group td{background:var(--color-accent-soft);color:var(--color-accent);font-weight:800}
.route-kind{font-family:var(--font-mono);font-size:12px}
.route-yes{color:var(--color-success);font-weight:700}
.prose>.data-table{display:block;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.platform-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.platform-card{display:flex;min-width:0;flex-direction:column;align-items:flex-start;padding:22px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-panel)}
.platform-icon{display:grid;width:42px;height:42px;flex-shrink:0;place-items:center;margin-bottom:16px;border-radius:var(--radius-sm);background:var(--color-panel-alt);color:var(--color-accent)}
.platform-icon svg,.platform-mark{width:24px;height:24px}
.platform-card h3{margin-bottom:6px;font-size:18px}.platform-card p{flex:1;color:var(--color-muted);font-size: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:26px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-panel);color:var(--color-text);text-decoration:none;transition:transform var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
.article-card:hover{color:var(--color-text);transform:translateY(-3px);box-shadow:var(--shadow-float)}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:13px;color:var(--color-muted);font-family:var(--font-mono);font-size:12px}
.article-card h3{font-size:21px}.article-card p{color:var(--color-muted)}
.callout{margin:28px 0;padding:20px 22px;border-left:4px solid var(--color-accent);border-radius:0 var(--radius-md) var(--radius-md) 0;background:var(--color-accent-soft)}
.callout strong{color:var(--color-accent)}
.promo-block{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;margin-top:48px;padding:clamp(24px,4vw,42px);border-radius:var(--radius-xl);background:var(--color-dark-band);color:var(--color-dark-band-text);box-shadow:var(--shadow-card)}
.promo-block h2{margin-bottom:8px;color:inherit;font-size:clamp(28px,4vw,42px)}.promo-block p{margin:0;color:inherit;opacity:.78}
.float-cta{position:fixed;right:28px;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;min-height:48px;align-items:center;gap:9px;padding:12px 24px;border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-white);font-weight:800;text-decoration:none;box-shadow:var(--shadow-button);transition:transform var(--motion-fast) ease,background-color var(--motion-fast) ease}
.float-cta:hover{background:var(--color-accent-dark);color:var(--color-white);transform:translateY(-2px)}
.float-cta svg{width:18px;height:18px;flex-shrink:0}
body:has(.float-cta)::after{content:"";display:block;height:calc(88px + env(safe-area-inset-bottom,0px))}
.feature-browser{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.45fr);gap:24px}
.feature-list{display:flex;flex-direction:column;gap:6px}
.feature-trigger{position:relative;width:100%;min-height:54px;padding:12px 15px 12px 20px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-muted);text-align:left}
.feature-trigger::before{content:"";position:absolute;inset:10px auto 10px 0;width:3px;border-radius:var(--radius-pill);background:transparent}
.feature-trigger.is-active{background:var(--color-accent-soft);color:var(--color-accent);font-weight:800}
.feature-trigger.is-active::before{background:var(--color-accent)}
.feature-detail{min-height:350px;padding:clamp(26px,4vw,46px);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-panel);box-shadow:0 18px 34px -30px var(--color-shadow-heavy)}
/* Preview and hero system */
.preview-page{background:var(--color-bg)}
.preview-hero{position:relative;display:flex;min-height:calc(100svh - var(--header-height));align-items:center;overflow-x:clip}
.preview-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(640px 500px at 71% 40%,var(--color-glow-warm),transparent 70%),radial-gradient(520px 420px at 24% 78%,var(--color-glow-accent),transparent 72%)}
.preview-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;align-items:center;width:100%;padding-top:34px;padding-bottom:48px}
.hero-copy{position:relative;z-index:2;max-width:620px}
.hero-copy .hero-title{margin:18px 0 24px}
.hero-copy .lead{margin-bottom:19px;font-size:16px}
.trust-row,.platform-line,.flag-line,.fact-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.trust-row{margin:0 0 24px;padding:0;color:var(--color-muted);font-size:13px;list-style:none}
.trust-row li{display:inline-flex;align-items:center;gap:6px}.trust-check{color:var(--color-success)}
.platform-line,.flag-line{margin-top:10px}.line-label{margin-right:3px;color:var(--color-muted);font-size:12px;letter-spacing:.08em}
.platform-chip,.flag-chip{display:inline-flex;min-height:32px;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-panel);font-size:12px}
.platform-chip svg{width:17px;height:17px;color:var(--color-muted)}.flag-chip svg{width:24px;height:16px;flex-shrink:0;border-radius:3px}
.hero-stage{position:relative;min-height:560px}
.client-window{position:relative;width:min(560px,100%);margin:36px 14px 0 auto;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-panel);box-shadow:var(--shadow-card);transform:rotate(-2deg)}
.window-chrome{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--color-border)}
.chrome-dot{width:11px;height:11px;flex-shrink:0;border-radius:50%}.chrome-red{background:var(--color-error)}.chrome-yellow{background:var(--color-warn)}.chrome-green{background:var(--color-success)}
.window-title{margin-left:8px;font-size:13px;font-weight:700}.window-version{margin-left:auto;color:var(--color-muted);font-family:var(--font-mono);font-size:11px}
.window-body{display:grid;grid-template-columns:190px 1fr;min-height:404px}
.window-sidebar{padding:14px 10px;border-right:1px solid var(--color-border);border-radius:0 0 0 var(--radius-lg);background:var(--color-panel-alt)}
.route-label{padding:8px 10px 5px;color:var(--color-muted);font-size:11px;letter-spacing:.14em}
.route-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;font-size:13px}
.route-item svg{width:24px;height:16px;flex-shrink:0}.route-item small{margin-left:auto;color:var(--color-muted)}
.route-item.is-current{background:var(--color-panel);box-shadow:inset 3px 0 0 var(--color-accent),0 1px 3px var(--color-shadow-light);font-weight:700}
.window-main{display:flex;flex-direction:column;align-items:center;padding:26px}
.connection-state{display:flex;width:100%;align-items:center;color:var(--color-muted);font-size:12px}
.connection-pill{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:4px 11px;border-radius:var(--radius-pill);background:var(--color-panel-alt);color:var(--color-success);font-weight:700}
.connection-pill i{width:7px;height:7px;border-radius:50%;background:var(--color-success)}
.connection-switch{position:relative;width:112px;height:58px;margin:32px 0 16px;border-radius:var(--radius-pill);background:var(--color-accent);box-shadow:0 12px 26px -8px var(--color-accent-shadow)}
.connection-switch::after{content:"";position:absolute;top:6px;right:6px;width:46px;height:46px;border-radius:50%;background:var(--color-panel);box-shadow:0 3px 8px var(--color-shadow-heavy)}
.current-route{margin:0;font-weight:800}.current-route-note{margin:0 0 20px;color:var(--color-muted);font-size:12px}
.plan-capsule{display:inline-flex;gap:9px;padding:8px 17px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-panel-alt);font-size:12px}.plan-capsule strong{font-size:13px}
.fact-row{justify-content:center;margin-top:22px}.fact-row span{padding:4px 10px;border:1px dashed var(--color-border);border-radius:var(--radius-pill);color:var(--color-muted);font-family:var(--font-mono);font-size:10px}
.hero-float{position:absolute;display:flex;align-items:center;gap:10px;padding:13px 17px;border:1px solid var(--color-border);border-radius:16px;background:var(--color-panel);box-shadow:var(--shadow-float)}
.refund-float{top:0;right:0;transform:rotate(2deg)}.platform-float{left:0;bottom:20px;transform:rotate(-1.2deg)}
.float-icon{display:grid;width:34px;height:34px;flex-shrink:0;place-items:center;border-radius:50%;background:var(--color-accent-soft);color:var(--color-accent)}
.float-icon svg{width:18px;height:18px}.hero-float strong{display:block;font-size:14px}.hero-float small{display:block;color:var(--color-muted)}
.preview-section{padding-top:90px;padding-bottom:90px}
.preview-heading{margin-bottom:36px}.preview-heading p{max-width:670px;color:var(--color-muted)}
.swatch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.swatch{overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-panel)}
.swatch-color{height:84px}.swatch-body{padding:13px}.swatch-body strong,.swatch-body code{display:block}.swatch-body code{color:var(--color-muted);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-warn{background:var(--color-warn)}.swatch-error{background:var(--color-error)}
.type-samples{display:grid;gap:22px}.type-row{padding-bottom:20px;border-bottom:1px solid var(--color-border)}.type-row:last-child{border:0}.type-meta{display:block;margin-bottom:7px;color:var(--color-muted);font-family:var(--font-mono);font-size:11px}
.component-stack{display:grid;gap:26px}.button-demo{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.static-footer{margin-top:90px}
@media (max-width:1120px){
  .preview-hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-stage{min-height:540px}.client-window{margin-inline:auto}
  .platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .pricing-grid,.article-grid{grid-template-columns:1fr}
  .feature-browser{grid-template-columns:1fr}
  .swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo-block{grid-template-columns:1fr}
}
@media (max-width:768px){
  .hero-stage{min-height:auto;padding-top:18px}.client-window{transform:none}
  .hero-float{position:relative;inset:auto!important;display:inline-flex;margin:12px 8px 0 0;transform:none}
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .window-body{grid-template-columns:1fr}.window-sidebar{display:none}
  .preview-hero{min-height:auto}.preview-hero-grid{padding-top:52px;padding-bottom:64px}
}
@media (max-width:640px){
  .plan-card.is-featured{padding-top:58px}
  .toc-tabs{border-radius:var(--radius-md)}
  .swatch-grid{grid-template-columns:1fr 1fr}
  .float-cta{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:11px 19px}
  .platform-grid{grid-template-columns:1fr}
  .client-window{transform:none}
}