:root{
  --table-min:720px;
  --toc-top:80px;
  --hero-board-width:640px;
  --hero-board-height:540px;
}

/* Tabs */
.tabs{min-width:0}
.tab-list,[role="tablist"]{display:flex;align-items:center;gap:6px;max-width:100%;padding:5px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-panel-soft);overflow-x:auto}
.tab-button,[role="tab"]{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:40px;padding:8px 18px;border:0;border-radius:var(--radius-pill);background:var(--color-transparent);font-weight:750}
.tab-button[aria-selected="true"],[role="tab"][aria-selected="true"]{background:var(--color-panel);box-shadow:var(--highlight),var(--shadow-card)}
.tab-panel[hidden],[role="tabpanel"][hidden]{display:none}

/* Long-page TOC */
.toc-tabs{position:sticky;top:var(--toc-top);z-index:20;display:flex;gap:6px;max-width:100%;margin-bottom:32px;padding:7px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-panel);box-shadow:var(--highlight),var(--shadow-card);overflow-x:auto;scrollbar-width:thin}
.toc-tabs a{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:38px;padding:7px 15px;border-radius:var(--radius-pill);color:var(--color-muted);font-weight:700}
.toc-tabs a.is-current,.toc-tabs a[aria-current="true"]{background:var(--color-accent);color:var(--color-text)}
body:has(.toc-tabs) section[id]{scroll-margin-top:136px}

/* FAQ */
.faq-list{display:grid;gap:12px}
.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-panel);box-shadow:var(--highlight)}
.faq-item summary{position:relative;min-height:56px;padding:17px 52px 17px 20px;cursor:pointer;font-weight:750;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:20px;top:50%;width:24px;height:24px;transform:translateY(-50%);display:grid;place-items:center;border-radius:50%;background:var(--color-accent);font:800 18px/1 var(--font-display)}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 20px 18px;color:var(--color-muted)}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.pricing-card{position:relative;min-width:0;padding:28px;border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-panel);box-shadow:var(--highlight),var(--shadow-accent);transform-style:preserve-3d}
.pricing-card.is-featured{border-color:var(--color-accent-dark);background:linear-gradient(180deg,var(--color-panel),var(--color-panel-soft))}
.value-badge{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border-radius:var(--radius-pill);background:var(--color-accent);font-size:12px;font-weight:800}
.plan-cycle{font:700 12px/1.3 var(--font-mono);color:var(--color-accent-dark);text-transform:uppercase}
.plan-price{display:flex;align-items:flex-end;gap:6px;margin:18px 0;font:800 clamp(38px,4vw,56px)/1 var(--font-display);letter-spacing:-.04em}
.plan-price small{padding-bottom:6px;color:var(--color-muted);font:600 14px/1 var(--font-body);letter-spacing:0}
.plan-features{display:grid;gap:10px;margin:22px 0;padding:0;list-style:none}
.plan-features li{display:flex;gap:9px;color:var(--color-muted)}
.plan-features li::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--color-accent);color:var(--color-text);font-weight:900;flex-shrink:0}
.pricing-card .btn{width:100%}

/* Tables */
.table-scroll{width:100%;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,.server-table,.comparison-table{width:100%;min-width:var(--table-min)}
.data-table th,.data-table td,.server-table th,.server-table td,.comparison-table th,.comparison-table td{padding:14px 16px;border-bottom:1px solid var(--color-border);text-align:left;vertical-align:middle}
.data-table th,.server-table th,.comparison-table th{background:var(--color-panel-soft);color:var(--color-text);font-size:13px;font-weight:800}
.data-table td:first-child,.server-table td:first-child,.comparison-table td:first-child{color:var(--color-text);font-weight:700}
.data-table tr:last-child td,.server-table tr:last-child td,.comparison-table tr:last-child td{border-bottom:0}
.prose > .data-table{display:block;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.server-groups{display:grid;gap:26px}
.server-group{min-width:0}
.server-group-title{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:22px}

/* Platform cards */
.platform-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.platform-card{display:flex;min-width:0;min-height:190px;padding:20px;flex-direction:column;align-items:flex-start;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-panel);box-shadow:var(--highlight),var(--shadow-accent)}
.platform-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:20px;border-radius:50%;background:var(--color-accent);color:var(--color-deep-start)}
.platform-icon svg{width:25px;height:25px}
.platform-name{margin-bottom:16px;font:800 18px/1.2 var(--font-display)}
.platform-card .btn{margin-top:auto;width:100%}

/* Article cards */
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.article-card{display:flex;min-width:0;min-height:250px;padding:24px;flex-direction:column;border-radius:var(--radius-lg);background:var(--color-panel-soft);box-shadow:var(--highlight),var(--shadow-accent);transition:transform var(--transition-base)}
.article-card:hover{transform:translateY(-2px)}
.article-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;color:var(--color-muted);font:650 12px/1.4 var(--font-mono)}
.article-card h3{font-size:22px}
.article-card p{margin-bottom:20px}
.article-more{margin-top:auto;color:var(--color-accent-dark);font-weight:800}

/* Callouts and promotions */
.callout{position:relative;margin:24px 0;padding:22px 24px 22px 30px;border-radius:var(--radius-md);background:var(--color-panel-soft);color:var(--color-muted)}
.callout::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:5px;border-radius:var(--radius-pill);background:var(--color-accent)}
.callout strong{color:var(--color-text)}
.article-promo{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;margin-top:48px;padding:30px;border-radius:var(--radius-xl);background:linear-gradient(145deg,var(--color-deep-start),var(--color-deep-end));box-shadow:var(--shadow-panel)}
.article-promo h2,.article-promo p{color:var(--color-white)}
.article-promo p{margin-bottom:0;color:var(--alpha-white-72)}

/* Feature timeline */
.feature-timeline{position:relative;display:grid;gap:28px}
.feature-timeline::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--color-border)}
.timeline-node{position:relative;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin-inline:auto;border-radius:50%;background:var(--color-accent);box-shadow:0 12px 24px -8px var(--alpha-green-55)}
.timeline-node svg{width:22px;height:22px}
.feature-wide,.feature-half{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:28px;min-width:0;padding:30px;border-radius:var(--radius-xl);background:var(--color-panel-soft);box-shadow:var(--highlight),var(--shadow-accent);transition:transform var(--transition-base);transform-style:preserve-3d}
.feature-wide:hover,.feature-half:hover{transform:translateY(-2px)}
.feature-inner{min-width:0;padding:20px;border-radius:var(--radius-md);background:var(--color-panel);box-shadow:var(--highlight)}
.feature-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}

/* Approved hero */
.preview-hero{position:relative;padding-top:40px;padding-bottom:40px;overflow-x:clip}
.preview-hero::before{content:"";position:absolute;inset:-112px 0 0;background:linear-gradient(180deg,var(--alpha-green-07),var(--alpha-green-04) 55%,var(--alpha-bg-00));pointer-events:none}
.hero-layout{position:relative;display:grid;grid-template-columns:46fr 54fr;gap:40px;align-items:center}
.hero-copy{position:relative;z-index:2;min-width:0}
.hero-copy h1{margin:24px 0 0}
.hero-copy h1 .separator{color:var(--color-accent);margin-inline:.06em}
.hero-subtitle{max-width:560px;margin:22px 0 0;font-size:18px;line-height:1.65}
.hero-subtitle strong{color:var(--color-text)}
.hero-subtitle .mono{color:var(--color-text);font-size:17px;font-weight:700}
.hero-actions{display:flex;align-items:center;gap:12px;margin-top:28px;flex-wrap:wrap}
.signup-unit{display:flex;align-items:center;gap:6px;padding:5px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-panel);box-shadow:var(--highlight),0 16px 32px -12px var(--alpha-green-22)}
.signup-unit input{width:206px;height:44px;padding-inline:12px;border:0;background:var(--color-transparent)}
.signup-unit:focus-within{border-color:var(--color-accent-dark)}
.hero-trust{display:flex;align-items:center;gap:9px;margin-top:20px;flex-wrap:wrap;color:var(--color-muted);font-size:14px}
.check-dot{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--color-accent);flex-shrink:0}
.check-dot svg{width:11px;height:11px}
.hero-shelf{margin-top:28px;padding:4px 18px;border-radius:var(--radius-md);background:var(--color-panel-soft);box-shadow:var(--shadow-accent)}
.shelf-row{display:flex;align-items:center;gap:8px;min-height:46px}
.shelf-row + .shelf-row{border-top:1px solid var(--color-border)}
.shelf-label{width:66px;flex:none;color:var(--color-muted);font-size:12px;font-weight:800}
.icon-list{display:flex;align-items:center;gap:16px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.icon-list li{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;font-weight:700}
.icon-list svg{width:18px;height:18px}
.flag-icon{width:22px!important;height:16px!important;border-radius:3px;box-shadow:0 0 0 1px var(--alpha-text-08)}
.flag-icon.square{width:16px!important}
.hero-stage{position:relative;z-index:1;display:flex;justify-content:flex-start;min-width:0}
.hero-device{position:relative;width:var(--hero-board-width);height:var(--hero-board-height);margin:0 48px 64px 0}
.hero-board{position:absolute;inset:0;border-radius:var(--radius-xl);background:linear-gradient(160deg,var(--color-deep-start),var(--color-deep-end));box-shadow:var(--shadow-panel),inset 0 1px 0 var(--alpha-white-10);overflow:hidden}
.hero-board::before{content:"";position:absolute;top:-140px;right:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,var(--alpha-green-18),var(--alpha-green-08) 38%,var(--alpha-green-00) 70%)}
.hero-board::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 10% 100%,var(--alpha-black-28),var(--alpha-black-00) 60%)}
.route-lines{position:absolute;inset:0;width:640px;height:540px}
.route-lines line{stroke:var(--alpha-white-26);stroke-width:1}
.globe-shadow{position:absolute;left:330px;top:404px;width:200px;height:44px;border-radius:50%;background:radial-gradient(ellipse,var(--alpha-green-16),var(--alpha-green-00) 72%)}
.hero-globe{position:absolute;left:288px;top:118px;width:284px;height:284px;border-radius:50%;background:radial-gradient(circle at 72% 24%,var(--color-accent-soft),var(--color-accent) 16%,var(--color-globe) 52%,var(--color-deep-mid) 88%,var(--color-deep-start));box-shadow:0 30px 60px -20px var(--alpha-green-35),inset -22px -26px 48px var(--alpha-deep-42),inset 0 0 0 1px var(--alpha-white-08)}
.hero-globe svg{position:absolute;inset:0;width:284px;height:284px}
.hero-globe path{fill:none;stroke:var(--alpha-white-34);stroke-width:1}
.hero-globe::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 74% 22%,var(--alpha-white-62),var(--alpha-white-18) 14%,var(--color-transparent) 34%);animation:globe-breathe 6s ease-in-out infinite}
.map-node{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid var(--alpha-green-55);border-radius:50%;background:var(--color-deep-mid);color:var(--color-white);display:grid;place-items:center;font:800 10px/1 var(--font-mono)}
.map-node span{position:absolute;top:41px;left:50%;transform:translateX(-50%);color:var(--alpha-white-72);font:650 11px/1 var(--font-body);white-space:nowrap}
.node-tokyo{left:88px;top:110px}.node-hk{left:170px;top:180px}.node-sg{left:110px;top:288px}.node-la{left:238px;top:388px}.node-am{left:98px;top:412px}.node-zh{left:235px;top:80px}
.fact-band{position:absolute;left:28px;bottom:24px;z-index:3;display:flex;align-items:center;min-height:32px;padding:5px 14px;border:1px solid var(--alpha-white-10);border-radius:var(--radius-pill);background:var(--alpha-ink-42);color:var(--alpha-white-86);font:650 12px/1.3 var(--font-mono)}
.fact-band b{color:var(--color-accent)}
.receipt-card{position:absolute;z-index:5;padding:12px 14px;border:1px solid var(--alpha-text-06);border-radius:var(--radius-md);background:var(--color-panel);box-shadow:var(--highlight),var(--shadow-card);transform-style:preserve-3d}
.receipt-one{right:-20px;top:36px;width:262px}.receipt-two{right:-48px;top:236px;width:272px}.receipt-three{left:390px;bottom:-44px;width:264px}
.receipt-head{display:flex;align-items:center;gap:8px;color:var(--color-text);font-size:13px;font-weight:800}
.receipt-head .flag-icon{flex:none}
.receipt-state{display:flex;align-items:center;gap:5px;margin-left:auto;color:var(--color-accent-dark);font-size:11px;white-space:nowrap}
.receipt-copy{margin:7px 0 0;color:var(--color-muted);font-size:13px;line-height:1.5}
.receipt-chips{display:flex;gap:6px;margin-top:8px}
.receipt-chip{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:var(--radius-pill);background:var(--color-panel-soft);font-size:11px;font-weight:800}
.hero-timeline-node{position:absolute;left:-16px;top:-16px;z-index:6;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--color-accent);box-shadow:0 12px 24px -8px var(--alpha-green-60),0 0 0 6px var(--color-bg)}
.hero-timeline-node svg{width:22px;height:22px}
.payment-pill{position:absolute;right:-24px;top:412px;z-index:6;display:flex;align-items:center;gap:8px;min-height:34px;padding:6px 14px;border:1px solid var(--alpha-text-06);border-radius:var(--radius-pill);background:var(--color-panel);box-shadow:var(--highlight),var(--shadow-card);font-size:12px;font-weight:800}
.payment-pill svg{width:16px;height:16px}
@keyframes globe-breathe{0%,100%{opacity:.55}50%{opacity:.92}}

/* Preview-only layouts */
.preview-section{padding-top:88px;padding-bottom:88px;overflow-x:clip}
.preview-heading{max-width:760px;margin-bottom:38px}
.preview-heading p{font-size:17px}
.swatch-grid{display:grid;grid-template-columns:repeat(5,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:90px}
.swatch-meta{padding:12px;font:650 12px/1.5 var(--font-mono)}
.swatch-bg{background:var(--color-bg)}.swatch-panel{background:var(--color-panel)}.swatch-soft{background:var(--color-panel-soft)}.swatch-accent{background:var(--color-accent)}.swatch-accent-soft{background:var(--color-accent-soft)}.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;padding:32px}
.type-display{font:800 clamp(42px,5vw,68px)/1.08 var(--font-display);letter-spacing:-.03em}
.type-body{max-width:720px;font-size:18px;color:var(--color-muted)}
.type-mono{font:700 15px/1.6 var(--font-mono);color:var(--color-accent-dark)}
.button-row,.badge-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.component-stack{display:grid;gap:32px}
.preview-footer{margin-top:0}
.static-nav{border-bottom:1px solid var(--color-border)}

@media (max-width:1280px){
  .hero-layout{grid-template-columns:1fr;gap:56px}
  .hero-copy{max-width:680px}
  .hero-stage{justify-content:center}
}
@media (max-width:900px){
  .pricing-grid,.article-grid{grid-template-columns:1fr 1fr}
  .platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .hero-device{width:100%;height:auto;aspect-ratio:4/3;margin:24px 0 0}
  .route-lines,.globe-shadow,.fact-band,.payment-pill,.map-node{display:none}
  .hero-globe{left:50%;top:6%;width:44%;height:auto;aspect-ratio:1;transform:translateX(-50%)}
  .hero-globe svg{width:100%;height:100%}
  .hero-receipts{position:absolute;left:12px;right:12px;bottom:12px;display:grid;gap:8px}
  .receipt-card{position:static;width:auto}
  .hero-timeline-node{left:12px;top:12px}
  .feature-timeline::before{left:20px}
  .timeline-node{margin-left:0}
  .feature-wide,.feature-half{grid-template-columns:1fr;margin-left:20px}
  .feature-pair{grid-template-columns:1fr}
  .article-promo{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero-actions{align-items:stretch;flex-direction:column}
  .signup-unit{width:100%}
  .signup-unit input{width:auto;min-width:0;flex:1}
  .hero-actions > .btn{width:100%}
  .shelf-row{align-items:flex-start;flex-direction:column;padding-block:10px}
  .shelf-label{width:auto}
  .pricing-grid,.article-grid,.platform-grid,.swatch-grid{grid-template-columns:1fr}
  .pricing-card,.feature-wide,.feature-half{transform:none}
  .toc-tabs{border-radius:var(--radius-md)}
}
@media (prefers-reduced-motion:reduce){
  .hero-globe::after{animation:none;opacity:1}
}