/* Shared content components */
.tablist { display:flex; gap:4px; max-width:100%; padding:5px; overflow-x:auto; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-panel-2) }
.tablist [role="tab"] { flex:none; min-height:40px; padding:7px 16px; border:0; border-radius:var(--r-sm); background:transparent; color:var(--c-muted); font-weight:600; white-space:nowrap }
.tablist [role="tab"][aria-selected="true"] { background:var(--c-panel); color:var(--c-ink); box-shadow:var(--sh-hair) }
[role="tabpanel"][hidden] { display:none }
.toc-tabs { position:sticky; top:16px; z-index:10; display:flex; align-items:center; gap:6px; max-width:100%; margin:24px 0 36px; padding:8px; overflow-x:auto; scrollbar-width:thin; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-panel); box-shadow:var(--sh-soft) }
.toc-tabs a { display:inline-flex; align-items:center; flex:none; min-height:36px; padding:5px 12px; border-radius:var(--r-sm); color:var(--c-muted); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap }
.toc-tabs a:hover,.toc-tabs a.is-current,.toc-tabs a[aria-current="location"] { background:var(--a-accent-10); color:var(--c-accent-dark) }
body:has(.toc-tabs) section[id] { scroll-margin-top:96px }
.faq-list { border-top:1px solid var(--c-border) }
.faq-item { border-bottom:1px solid var(--c-border) }
.faq-item summary { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px; padding:16px 8px; cursor:pointer; font-weight:650; list-style:none }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none; border:1px solid var(--c-border); border-radius:var(--r-xs); color:var(--c-accent); font:600 20px/1 var(--font-mono) }
.faq-item[open] summary::after { content:"−" }
.faq-item > :not(summary) { max-width:780px; padding:0 8px 20px; color:var(--c-muted) }
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.plan-card { position:relative; min-width:0; padding:28px; border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-panel); box-shadow:var(--hl-inset),var(--sh-soft) }
.plan-card.is-featured { border-color:var(--c-accent); box-shadow:var(--hl-inset),var(--sh-panel) }
.plan-card.is-featured::before { content:""; position:absolute; top:-1px; left:16%; right:16%; height:2px; background:linear-gradient(90deg,var(--c-accent),var(--c-accent-2)) }
.plan-badge { display:inline-flex; align-items:center; max-width:100%; min-height:26px; margin-bottom:18px; padding:3px 10px; border-radius:var(--r-pill); background:var(--a-accent-10); color:var(--c-accent-dark); font:600 11px/1.4 var(--font-mono); overflow:hidden }
.plan-card h3 { font-size:22px }
.plan-price { margin:18px 0; font:800 38px/1.2 var(--font-display); letter-spacing:-.02em }
.plan-price small { font-size:16px; font-weight:500; color:var(--c-muted) }
.plan-card ul { display:grid; gap:10px; margin:20px 0 28px }
.plan-card li { position:relative; padding-left:18px; font-size:14px; color:var(--c-muted) }
.plan-card li::before { content:""; position:absolute; top:.65em; left:0; width:7px; height:7px; border-radius:50%; background:var(--c-accent) }
.plan-card .btn { width:100% }
.table-scroll { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-panel) }
.route-table,.data-table,.compare-table { width:100%; min-width:650px; border-collapse:collapse; font-size:14px }
.table-scroll th,.table-scroll td,.prose .data-table th,.prose .data-table td { padding:14px 18px; border-bottom:1px solid var(--c-border); text-align:left; word-break:keep-all }
.table-scroll th,.prose .data-table th { color:var(--c-ink); font-weight:700; white-space:nowrap }
.table-scroll td { color:var(--c-muted) }
.table-scroll thead { background:var(--c-panel-2) }
.table-scroll tr:last-child td { border-bottom:0 }
.region-row th { background:var(--a-accent-05); color:var(--c-accent-dark); font:600 12px/1.5 var(--font-mono) }
.prose > .data-table { display:block; min-width:0; max-width:100%; 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; flex-direction:column; align-items:flex-start; min-width:0; padding:22px; border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-panel); box-shadow:var(--hl-inset),var(--sh-soft) }
.platform-card > svg { width:28px; height:28px; color:var(--c-accent-dark) }
.platform-card strong { margin-top:16px; font-size:17px }
.platform-card p { flex:1; margin:8px 0 20px; color:var(--c-muted); font-size:13px }
.platform-card .btn { min-height:40px; padding-inline:12px; font-size:13px }
.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.article-card { display:flex; flex-direction:column; min-width:0; padding:25px; border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-panel); box-shadow:var(--hl-inset),var(--sh-soft) }
.article-card__meta { margin-bottom:12px; color:var(--c-accent-dark); font:600 11px/1.5 var(--font-mono) }
.article-card h3 { font-size:19px }
.article-card h3 a { text-decoration:none }
.article-card h3 a:hover { color:var(--c-accent-dark) }
.article-card p { margin:12px 0 20px; color:var(--c-muted); font-size:14px }
.article-card__link { margin-top:auto; font-size:14px; font-weight:600; text-decoration:none }
.callout { margin:24px 0; padding:18px 22px; border-left:3px solid var(--c-accent); border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--a-accent-05); color:var(--c-ink) }
.callout p:last-child { margin-bottom:0 }
.promo-block { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:48px 0; padding:28px; border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-panel); box-shadow:var(--sh-panel) }
.promo-block strong { font-size:20px }
.promo-block p { margin:6px 0 0; color:var(--c-muted); font-size:14px }
.promo-block .btn { flex-shrink:0; white-space:nowrap }
.float-cta { position:fixed; right:max(18px,env(safe-area-inset-right,0px)); bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:60; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:0 17px; border:1px solid var(--c-ink); border-radius:var(--r-md); background:var(--c-ink); color:var(--c-on-ink); box-shadow:var(--sh-panel); font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap }
.float-cta svg { width:16px; height:16px; flex:none }
.float-cta:hover { background:var(--c-ink-2) }
body:has(.float-cta)::after { content:""; display:block; height:calc(88px + env(safe-area-inset-bottom,0px)) }

/* Dark component directory */
.feature-shell { position:relative; overflow-x:clip; padding-top:96px; padding-bottom:96px; background:var(--c-ink); color:var(--c-on-ink); clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%,0 24px) }
.feature-shell::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.04; background:repeating-linear-gradient(90deg,transparent 0 96px,var(--c-on-ink) 97px 98px,transparent 99px 192px) }
.feature-shell h2 { color:var(--c-on-ink) }
.feature-layout { position:relative; display:grid; grid-template-columns:5fr 7fr; gap:8%; align-items:start }
.feature-list details { border-bottom:1px solid var(--c-on-ink-line) }
.feature-list summary { display:flex; align-items:center; gap:14px; min-height:64px; cursor:pointer; list-style:none; font:600 13px/1.5 var(--font-mono); letter-spacing:.06em }
.feature-list summary::-webkit-details-marker { display:none }
.feature-list summary::before { content:""; width:10px; height:10px; flex:none; border:1.5px solid var(--c-on-ink-muted); border-radius:50% }
.feature-list details[open] summary::before { border-color:var(--c-accent); background:var(--c-accent) }
.feature-list details p { padding:0 0 20px 24px; color:var(--c-on-ink-muted); font-size:15px }
.feature-detail { position:relative; padding:36px; border-radius:var(--r-lg); background:var(--c-panel); color:var(--c-ink); box-shadow:var(--sh-panel) }
.feature-detail::before,.feature-detail::after { content:""; position:absolute; z-index:-1; inset:12px -10px -12px 10px; border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--a-white-72) }
.feature-detail::after { inset:24px -20px -24px 20px; opacity:.45 }
.feature-detail p { color:var(--c-muted) }
.feature-detail ul { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px }

/* Preview-only layout, defined here so the standalone page needs no extra stylesheet */
.preview-section { padding-top:84px; padding-bottom:84px; border-top:1px solid var(--c-border) }
.preview-head { max-width:700px; margin-bottom:30px }
.preview-head p { margin-top:10px; color:var(--c-muted) }
.preview-swatches { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px }
.preview-swatch { min-width:0; overflow:hidden; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-panel) }
.preview-swatch__paint { display:block; height:70px; border-bottom:1px solid var(--c-border) }
.preview-swatch__name { display:block; padding:10px; font:500 11px/1.5 var(--font-mono); overflow-wrap:anywhere }
.preview-bg { background:var(--c-bg) }.preview-panel { background:var(--c-panel) }.preview-panel2 { background:var(--c-panel-2) }.preview-border { background:var(--c-border) }.preview-accent { background:var(--c-accent) }.preview-accent-dark { background:var(--c-accent-dark) }.preview-accent2 { background:var(--c-accent-2) }.preview-ink { background:var(--c-ink) }.preview-muted { background:var(--c-muted) }.preview-success { background:var(--c-success) }.preview-warn { background:var(--c-warn) }.preview-error { background:var(--c-error) }
.preview-type { display:grid; gap:16px }
.preview-type p { margin:0 }
.preview-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px }
.preview-actions button:disabled { opacity:.45; cursor:not-allowed }
.preview-stack { display:grid; gap:32px }
.preview-stack > * { min-width:0 }
.preview-footer { padding:36px var(--gutter); background:var(--c-ink); color:var(--c-on-ink) }
.preview-footer p { max-width:500px; margin:8px 0 0; color:var(--c-on-ink-muted); font-size:14px }
@media (max-width:900px) {
  .platform-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .preview-swatches { grid-template-columns:repeat(4,minmax(0,1fr)) }
}
@media (max-width:640px) {
  .plan-grid,.article-grid,.platform-grid { grid-template-columns:1fr }
  .promo-block { flex-direction:column; align-items:flex-start }
  .feature-layout { grid-template-columns:1fr }
  .feature-detail { display:none }
  .feature-shell { padding-top:72px; padding-bottom:72px }
  .preview-swatches { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .preview-section { padding-top:60px; padding-bottom:60px }
  .toc-tabs { top:8px }
}