/* Hero and approved console */
.hero-preview{position:relative;padding-top:34px;padding-bottom:0;overflow-x:clip;background:radial-gradient(circle at 82% 18%,var(--color-mark),transparent 32%),var(--color-page)}
.hero-copy{position:relative;z-index:2}
.hero-copy h1{max-width:1080px}
.hero-copy .lead{max-width:900px;margin-top:16px;font-size:17px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:22px}
.trust-list{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:16px;list-style:none;color:var(--color-muted);font-size:13px}
.trust-list li{display:flex;align-items:center;gap:7px}
.trust-check{width:14px;height:14px;color:var(--color-accent-deep);flex-shrink:0}
.hero-meta{display:grid;gap:10px;margin-top:20px}
.meta-line{display:flex;align-items:center;gap:20px;min-width:0}
.meta-label{width:64px;flex-shrink:0;color:var(--color-muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.platform-inline,.flag-inline{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;list-style:none}
.platform-inline li,.flag-inline li{display:flex;align-items:center;gap:7px;color:var(--color-muted);font-size:13px;font-weight:600}
.platform-inline svg{width:17px;height:17px;color:var(--color-muted);flex-shrink:0}
.flag-inline svg{width:21px;height:15px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--color-flag-line);flex-shrink:0;overflow:hidden}
.flag-white{fill:var(--color-surface)}.flag-red{fill:var(--color-error)}.flag-blue{fill:var(--color-accent-deep)}.flag-green{fill:var(--color-success)}.flag-gold{fill:var(--color-warning)}
.console-zone{position:relative;margin-top:30px}
.console{position:relative;color:var(--color-dark-text);border:1px solid var(--color-dark-line);border-radius:var(--radius-medium);background:var(--color-forest);box-shadow:var(--shadow-card);overflow:visible}
.console::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.console-bar,.console-body{position:relative;z-index:1}
.console-bar{display:flex;align-items:center;gap:8px;padding:13px 20px;border-bottom:1px solid var(--color-dark-line)}
.chrome-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot-error{background:var(--color-error)}.dot-warning{background:var(--color-warning)}.dot-success{background:var(--color-success)}
.console-title{margin-left:12px;font-size:13px;font-weight:800;letter-spacing:.06em}
.console-file{margin-left:auto;color:var(--color-dark-muted);font-family:var(--font-mono);font-size:12px}
.console-body{display:grid;grid-template-columns:1.45fr 1fr}
.route-list{padding:6px 0 10px;border-right:1px solid var(--color-dark-line)}
.route-head{display:flex;justify-content:space-between;padding:10px 22px 6px;color:var(--color-dark-muted);font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.route-row{display:flex;align-items:center;gap:12px;padding:10px 22px;border-top:1px solid var(--color-dark-line)}
.route-flag{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--color-surface);color:var(--color-ink);font-family:var(--font-mono);font-size:8px;font-weight:900;flex-shrink:0;overflow:hidden}
.route-name{font-size:14px;font-weight:700}
.route-code{color:var(--color-dark-muted);font-family:var(--font-mono);font-size:11px}
.route-state{display:flex;align-items:center;gap:7px;margin-left:auto;color:var(--color-dark-muted);font-size:12px}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--color-success);flex-shrink:0}
.connection-panel{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:26px 30px}
.connection-row{display:flex;align-items:center;gap:16px}
.connection-switch{position:relative;width:76px;height:40px;border-radius:var(--radius-pill);background:var(--color-accent);box-shadow:inset 0 2px 6px var(--color-switch-shadow);flex-shrink:0}
.connection-switch::after{content:"";position:absolute;top:4px;right:4px;width:32px;height:32px;border-radius:50%;background:var(--color-surface);box-shadow:0 2px 6px var(--color-switch-knob)}
.connection-state{display:flex;align-items:center;gap:8px;font-weight:800}
.connection-divider{height:1px;background:var(--color-dark-line)}
.plan-label{color:var(--color-dark-muted);font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.plan-current{font-family:var(--font-display);font-size:22px;font-weight:900}
.connection-note{color:var(--color-dark-muted);font-size:12px}
.console-fact{position:absolute;top:-18px;right:26px;z-index:3;padding:10px 18px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);box-shadow:var(--shadow-chip);color:var(--color-ink)}
.console-fact small{display:block;color:var(--color-muted);font-size:11px;letter-spacing:.08em}
.console-fact strong{display:block;margin-top:2px;font-family:var(--font-mono);font-size:13px}
.hero-deep-edge{margin-top:0;padding-top:44px;padding-bottom:54px;color:var(--color-dark-text);background-color:var(--color-forest);background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);background-size:26px 26px}
.fact-row{display:flex;flex-wrap:wrap;gap:12px;list-style:none}
.fact-row li{display:flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid var(--color-accent-line);border-radius:var(--radius-pill);font-size:13px}
.fact-row strong{color:var(--color-accent);font-family:var(--font-mono)}

/* Tabs and document navigation */
.tabs{display:grid;gap:24px}
.tab-list{display:flex;max-width:100%;gap:6px;padding:5px;border:1px solid var(--color-border);border-radius:var(--radius-small);background:var(--color-surface);overflow-x:auto}
.tab-list [role="tab"]{min-height:42px;padding:8px 18px;border:0;border-radius:var(--radius-small);background:transparent;color:var(--color-muted);font-weight:800;white-space:nowrap;cursor:pointer}
.tab-list [role="tab"][aria-selected="true"]{color:var(--color-surface);background:var(--color-forest)}
[role="tabpanel"][hidden]{display:none}
.toc-tabs{position:sticky;top:0;z-index:35;display:flex;max-width:100%;gap:6px;padding:8px;border:1px solid var(--color-border);border-radius:var(--radius-small);background:var(--color-surface);box-shadow:var(--shadow-chip);overflow-x:auto;overscroll-behavior-inline:contain}
.toc-tabs a{display:inline-flex;align-items:center;min-height:38px;padding:7px 14px;border-radius:var(--radius-pill);color:var(--color-muted);font-size:14px;font-weight:700;white-space:nowrap}
.toc-tabs a.is-current,.toc-tabs a[aria-current="location"]{color:var(--color-surface);background:var(--color-accent-deep)}

/* FAQ */
.faq-list{display:grid;border-top:1px solid var(--color-border)}
.faq-item{border-bottom:1px solid var(--color-border)}
.faq-item summary{position:relative;display:flex;align-items:center;min-height:64px;padding:16px 44px 16px 0;font-weight:800;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:8px;color:var(--color-accent-deep);font-family:var(--font-mono);font-size:22px}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 44px 20px 0;color:var(--color-muted)}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.plan-card{position:relative;display:grid;align-content:start;gap:18px;min-width:0;padding:28px;border:1px solid var(--color-border);border-radius:var(--radius-medium);background:var(--color-surface)}
.plan-card.is-featured{border:2px solid var(--color-accent);box-shadow:var(--shadow-card)}
.plan-badge{position:absolute;top:12px;right:12px;padding:4px 9px;border-radius:var(--radius-pill);color:var(--color-surface);background:var(--color-accent-deep);font-size:12px;font-weight:800}
.plan-card h3{padding-right:64px}
.plan-price{display:flex;align-items:baseline;gap:5px;font-family:var(--font-display)}
.plan-price strong{font-size:42px;line-height:1;font-weight:900}
.plan-price span{color:var(--color-muted)}
.plan-features{display:grid;gap:9px;list-style:none;color:var(--color-muted)}
.plan-features li{display:flex;gap:8px}
.plan-features li::before{content:"✓";color:var(--color-accent-deep);font-weight:900;flex-shrink:0}

/* Tables */
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{width:100%;min-width:680px;border:1px solid var(--color-border);background:var(--color-surface)}
.data-table th,.data-table td{padding:14px 16px;border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top}
.data-table th{color:var(--color-ink);background:var(--color-mark);font-size:13px;font-weight:900}
.data-table td:first-child{color:var(--color-ink);font-weight:800}
.data-table tbody tr:hover{background:var(--color-page)}
.prose>.data-table{display:block;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.region-heading{display:flex;align-items:center;gap:10px;margin:30px 0 12px}

/* Cards */
.platform-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.platform-card{display:grid;justify-items:start;gap:14px;min-width:0;padding:22px;border:1px solid var(--color-border);border-radius:var(--radius-small);background:var(--color-surface)}
.platform-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-small);color:var(--color-accent-deep);background:var(--color-mark)}
.platform-icon svg{width:22px;height:22px}
.platform-card h3{font-size:18px}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.article-card{display:grid;align-content:start;gap:14px;min-width:0;padding:24px;border:1px solid var(--color-border);border-radius:var(--radius-small);background:var(--color-surface);transition:transform .2s,border-color .2s}
.article-card:hover{transform:translateY(-3px);border-color:var(--color-accent)}
.article-card time{color:var(--color-muted);font-family:var(--font-mono);font-size:12px}
.article-card h3{font-size:22px}
.article-card p{color:var(--color-muted)}
.article-link{color:var(--color-accent-deep);font-weight:800}
.callout{padding:20px 22px;border-left:4px solid var(--color-accent);border-radius:0 var(--radius-small) var(--radius-small) 0;background:var(--color-mark)}
.callout strong{display:block;margin-bottom:5px}
.end-promo{display:grid;grid-template-columns:1fr auto;align-items:center;gap:28px;padding:34px;border-radius:var(--radius-medium);color:var(--color-dark-text);background-color:var(--color-forest);background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);background-size:26px 26px}
.end-promo h2{font-size:30px}
.end-promo p{margin-top:8px;color:var(--color-dark-muted)}

/* Preview-only layouts */
.preview-page{background:var(--color-page)}
.preview-section{padding-top:84px;padding-bottom:84px}
.preview-title{display:grid;gap:10px;margin-bottom:30px}
.preview-title p{color:var(--color-muted)}
.preview-swatch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.preview-swatch{overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-small);background:var(--color-surface)}
.swatch-color{height:86px}
.swatch-page{background:var(--color-page)}.swatch-surface{background:var(--color-surface)}.swatch-forest{background:var(--color-forest)}.swatch-border{background:var(--color-border)}.swatch-accent{background:var(--color-accent)}.swatch-accent-deep{background:var(--color-accent-deep)}.swatch-ink{background:var(--color-ink)}.swatch-muted{background:var(--color-muted)}
.swatch-label{display:grid;padding:12px;font-family:var(--font-mono);font-size:12px}
.type-specimen{display:grid;gap:26px}
.type-row{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:start;padding-bottom:20px;border-bottom:1px solid var(--color-border)}
.type-row small{color:var(--color-muted);font-family:var(--font-mono)}
.preview-component-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.preview-dark{color:var(--color-dark-text);background:var(--color-forest)}
.preview-footer{margin-top:84px}
.static-head{border-bottom:1px solid var(--color-border);background:var(--color-page)}

@media (max-width:1000px){
  .console-body{grid-template-columns:1fr}
  .route-list{border-right:0}
  .connection-panel{border-top:1px solid var(--color-dark-line)}
  .platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .article-grid,.pricing-grid{grid-template-columns:1fr}
  .preview-swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .hero-preview{padding-top:26px}
  .meta-line{align-items:flex-start}
  .platform-inline,.flag-inline{gap:10px 14px}
  .console-fact{position:static;display:inline-block;margin:0 16px 12px}
  .console-zone{margin-top:40px}
  .route-row{padding-inline:16px}
  .connection-panel{padding:22px 18px}
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preview-component-grid{grid-template-columns:1fr}
  .type-row{grid-template-columns:1fr}
  .end-promo{grid-template-columns:1fr}
}
@media (max-width:480px){
  .hero-actions .btn{width:100%}
  .meta-line{display:grid;gap:7px}
  .meta-label{width:auto}
  .platform-inline li,.flag-inline li{font-size:12px}
  .route-code{display:none}
  .route-state span:last-child{display:none}
  .preview-swatch-grid{grid-template-columns:1fr 1fr}
}