.glyph-bank { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero { max-width: 100%; overflow-x: clip; position: relative; padding: var(--s8) var(--s6); background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 60%, var(--recess) 100%); }
.hero::before { content: ''; position: absolute; inset: 38% 0 0; pointer-events: none; background: radial-gradient(ellipse at center, var(--haze), var(--clear) 72%); }
.hero-copy { position: relative; text-align: center; z-index: 1; }
.eyebrow { display: inline-flex; gap: var(--s2); align-items: center; padding: var(--s1) var(--s4); border: var(--hair) solid var(--border); border-radius: var(--pill); color: var(--deep); font-size: var(--tiny); background: var(--bg); letter-spacing: var(--wide); }
.eyebrow svg { width: var(--small); height: var(--small); }
.title-end { color: var(--accent); }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s4); }
.hero-actions svg { width: var(--s5); height: var(--s5); }
.lead { font-size: var(--body); color: var(--muted); margin: var(--s5) 0 var(--s2); }
.lead strong { font-weight: var(--medium); color: var(--deep); }
.trust { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--s6); padding: 0; margin: 0; list-style: none; color: var(--muted); font-size: var(--small); }
.trust li { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.trust svg { width: var(--s4); height: var(--s4); color: var(--accent); }
.platforms { display: flex; align-items: center; justify-content: center; gap: var(--s8); margin: var(--s5) 0 var(--s3); color: var(--muted); font-size: var(--small); }
.platforms span { display: inline-flex; align-items: center; gap: var(--s2); }
.platforms svg { width: var(--platform-icon); height: var(--platform-icon); }
.routes { display: flex; align-items: center; justify-content: center; gap: var(--s5); font-size: var(--tiny); color: var(--muted); }
.routes-label { color: var(--accent); }
.route { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.flag { width: var(--flag-width); height: var(--flag-height); overflow: hidden; border-radius: var(--flag-radius); box-shadow: var(--flag-shadow); }
.flag-white { fill: var(--white); }
.flag-red { fill: var(--flag-red); }
.flag-blue { fill: var(--flag-blue); }
.showcase { position: relative; max-width: var(--board-width); margin: var(--s6) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); z-index: 1; }
.subscription-board { min-width: 0; min-height: var(--board-height); position: relative; border: var(--hair) solid var(--border); border-radius: var(--radius); background: var(--panel); padding: var(--s5) var(--s6) 0; box-shadow: var(--paper-shadow); text-align: center; }
.panel-heading { margin: 0; font-size: var(--small); font-weight: var(--medium); }
.panel-heading span { display: inline-block; padding: var(--s1) var(--s5); border-radius: var(--pill); background: var(--recess); color: var(--deep); }
.pack-board .panel-heading span { background: var(--bg); }
.route-model { height: var(--flow-height); display: grid; grid-template-columns: 1fr var(--node-width) 1fr; align-items: center; position: relative; margin-top: var(--s2); isolation: isolate; }
.route-model::before { content: ''; position: absolute; left: 13%; right: 13%; top: var(--flow-line-top); border-top: var(--rule) dashed var(--copper-light); z-index: -1; }
.endpoint { display: flex; flex-direction: column; align-items: center; gap: var(--s3); font-size: var(--tiny); color: var(--muted); min-width: 0; }
.coin { width: var(--disc); height: var(--disc); display: grid; place-items: center; border-radius: var(--circle); background: linear-gradient(145deg, var(--panel), var(--recess)); border: var(--hair) solid var(--border); box-shadow: var(--coin-shadow); color: var(--accent); overflow: hidden; }
.coin svg { width: var(--coin-icon); height: var(--coin-icon); }
.core-node { align-self: center; display: flex; flex-direction: column; align-items: center; gap: var(--s1); font-size: var(--tiny); color: var(--deep); }
.core-node svg { width: var(--node-width); height: var(--node-height); filter: var(--node-shadow); }
.node-light { stop-color: var(--panel); }
.node-mid { stop-color: var(--copper-light); }
.node-dark { stop-color: var(--accent); }
.node-side { fill: var(--copper-mid); }
.node-front { fill: var(--border); }
.node-stroke { stroke: var(--shine); stroke-width: var(--stroke); }
.node-mark { fill: none; stroke: var(--deep); stroke-width: var(--node-mark-stroke); stroke-linecap: round; stroke-linejoin: round; }
.node-dot { fill: var(--deep); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--recess); border-radius: var(--radius); padding: var(--s4) 0; box-shadow: var(--inset-shadow); margin-top: var(--s1); }
.plan { display: flex; flex-direction: column; align-items: center; gap: var(--s1); min-width: 0; }
.plan + .plan { border-left: var(--hair) solid var(--border); }
.plan-price { font-family: var(--font); font-size: var(--price-type); font-weight: var(--medium); line-height: var(--heading-line); letter-spacing: var(--tight); color: var(--deep); white-space: nowrap; }
.plan-price small { font-size: var(--tiny); font-weight: var(--regular); letter-spacing: normal; }
.plan-data { font-family: var(--mono); font-size: var(--small); color: var(--muted); white-space: nowrap; }
.reset-note { margin: var(--s3) 0 var(--s4); font-size: var(--tiny); color: var(--muted); }
.board-foot { display: flex; align-items: center; justify-content: center; gap: var(--s2); border-top: var(--hair) solid var(--border); padding: var(--s3) 0; font-size: var(--tiny); color: var(--deep); }
.board-foot svg { width: var(--s4); height: var(--s4); }
.floating-note { position: absolute; top: var(--tag-top); width: var(--tag-width); text-align: left; display: flex; gap: var(--s3); align-items: center; padding: var(--s3); background: var(--panel); border: var(--hair) solid var(--border); border-radius: var(--radius); box-shadow: var(--tag-shadow); font-size: var(--tiny); color: var(--deep); }
.floating-note small { display: block; font-size: var(--tiny); color: var(--muted); margin-bottom: var(--s1); }
.note-account { left: var(--account-offset); transform: rotate(calc(-1 * var(--decor-tilt))); }
.note-payment { right: var(--payment-offset); width: var(--payment-width); transform: rotate(var(--decor-tilt)); }
.note-icon { width: var(--s8); height: var(--s8); border-radius: var(--circle); background: var(--recess); display: grid; place-items: center; flex-shrink: 0; color: var(--accent); }
.note-icon svg { width: var(--body); height: var(--body); }
.note-payment .note-icon { display: none; }
.below-hint { position: relative; display: flex; justify-content: center; gap: var(--s3); align-items: center; font-size: var(--tiny); color: var(--muted); margin-top: var(--s6); }
.below-hint svg { width: var(--small); height: var(--small); }
.badge, .tag { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3); border-radius: var(--pill); background: var(--recess); color: var(--deep); font-size: var(--tiny); max-width: 100%; overflow-wrap: anywhere; }
.badge-success { color: var(--success); }
.badge-warn { color: var(--warn); }
.badge-error { color: var(--error); }
.badge-best { background: var(--accent); color: var(--panel); }
.badge-dot::before { content: ''; flex-shrink: 0; width: var(--s2); height: var(--s2); border-radius: var(--circle); background: currentColor; }
.button-samples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin-block: var(--s6); }
.tabs { min-width: 0; }
.tab-list, [role="tablist"] { display: flex; gap: var(--s2); padding: var(--s2); margin-bottom: var(--s6); max-width: 100%; overflow-x: auto; border-radius: var(--radius); background: var(--recess); box-shadow: var(--inset-shadow); }
[role="tab"] { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: var(--s2) var(--s5); background: var(--clear); border: var(--hair) solid var(--clear); border-radius: var(--radius); color: var(--deep); }
[role="tab"][aria-selected="true"] { background: var(--panel); border-color: var(--border); box-shadow: var(--tag-shadow); }
[role="tab"]:hover { background: var(--bg); }
[role="tabpanel"] { min-width: 0; }
.toc-tabs { display: flex; align-items: center; gap: var(--s2); position: sticky; top: 0; z-index: var(--layer-toc); min-height: var(--toc-height); max-width: 100%; overflow-x: auto; padding: var(--s2); margin-block: var(--s6); background: var(--panel); border: var(--hair) solid var(--border); border-radius: var(--radius); box-shadow: var(--tag-shadow); overscroll-behavior-x: contain; }
.toc-tabs a { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: var(--tap); padding: var(--s2) var(--s4); font-size: var(--small); border-radius: var(--pill); color: var(--muted); white-space: nowrap; }
.toc-tabs a:hover, .toc-tabs a.is-current { color: var(--deep); background: var(--recess); }
.toc-tabs.toc-static { position: static; }
body:has(.toc-tabs) section[id] { scroll-margin-top: var(--toc-offset); }
.faq-list { display: grid; gap: var(--s3); }
.faq-item { border: var(--hair) solid var(--border); background: var(--panel); border-radius: var(--radius); box-shadow: var(--inset-shadow); }
.faq-item summary { cursor: pointer; padding: var(--s5) var(--s6); color: var(--deep); }
.faq-item summary::marker { color: var(--accent); }
.faq-item[open] { box-shadow: var(--tag-shadow); }
.faq-answer { padding: 0 var(--s6) var(--s6); color: var(--muted); }
.faq-answer p:last-child { margin-bottom: 0; }
.price-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); min-width: 0; padding: var(--s8); border: var(--hair) solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--paper-shadow); }
.price-card.is-current { border-color: var(--accent); box-shadow: var(--paper-shadow), inset 0 0 0 var(--hair) var(--accent); }
.price-card h3, .price-card p { margin: 0; }
.price-card .plan-price { font-size: var(--heading-two); }
.price-card ul { padding-left: var(--s5); margin: 0 0 var(--s4); color: var(--muted); font-size: var(--small); }
.price-card .btn { margin-top: auto; width: 100%; }
.price-caption { font-size: var(--small); color: var(--muted); }
.table-scroll { display: block; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--hair) solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--tag-shadow); }
.data-table, .route-table { width: 100%; min-width: var(--table-width); border-collapse: collapse; text-align: left; font-size: var(--small); }
.data-table caption, .route-table caption { padding: var(--s4); text-align: left; color: var(--deep); font-weight: var(--medium); }
.data-table th, .data-table td, .route-table th, .route-table td { padding: var(--s4) var(--s5); border-bottom: var(--hair) solid var(--border); vertical-align: top; }
.data-table thead, .route-table thead { background: var(--recess); color: var(--text); }
.data-table th, .route-table th { font-weight: var(--medium); color: var(--text); }
.route-table .region-row th { background: var(--bg); color: var(--deep); }
.data-table tbody tr:last-child td, .route-table tbody tr:last-child td { border-bottom: 0; }
.prose > .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
.platform-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); }
.platform-card { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s4); padding: var(--s6) var(--s4); border-radius: var(--radius); border: var(--hair) solid var(--border); background: var(--panel); box-shadow: var(--tag-shadow); text-align: center; }
.platform-card > svg { width: var(--s8); height: var(--s8); color: var(--accent); }
.platform-card h3 { margin: 0; font-size: var(--body); }
.platform-card .btn { width: 100%; padding: var(--s2); min-height: var(--tap); font-size: var(--tiny); margin-top: auto; }
.article-card { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; padding: var(--s8); background: var(--panel); border: var(--hair) solid var(--border); border-radius: var(--radius); box-shadow: var(--tag-shadow); }
.article-card h3 { margin: 0; }
.article-card p { color: var(--muted); font-size: var(--small); margin: 0; }
.article-meta { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; color: var(--muted); font-size: var(--tiny); }
.article-link { margin-top: auto; display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--small); color: var(--deep); }
.article-mast { max-width: var(--reading-width); margin-inline: auto; text-align: center; padding-top: var(--s16); padding-bottom: var(--s12); }
.article-mast h1 { font-size: var(--heading-two); }
.article-mast::after { content: ''; display: block; width: 4em; height: var(--rule); background: var(--accent); margin: var(--s6) auto 0; }
.article-mast .article-meta { justify-content: center; }
.callout { margin: var(--s6) 0; padding: var(--s6); border-left: var(--s1) solid var(--accent); border-radius: var(--radius); background: var(--recess); color: var(--deep); box-shadow: var(--inset-shadow); }
.callout p:last-child { margin-bottom: 0; }
.article-promo { display: flex; justify-content: space-between; align-items: center; gap: var(--s8); padding: var(--s8); margin-block: var(--s12); background: linear-gradient(135deg, var(--panel), var(--recess)); border: var(--hair) solid var(--border); border-radius: var(--radius); box-shadow: var(--paper-shadow); }
.article-promo p { margin: var(--s2) 0 0; color: var(--muted); }
.article-promo .btn { flex-shrink: 0; }
.promo-brand { font-size: var(--brand-type); font-weight: var(--medium); color: var(--deep); }
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s16); }
.feature-row.is-reversed .feature-illustration { order: -1; }
.feature-list { display: grid; gap: var(--s8); margin: 0; padding: 0; list-style: none; }
.feature-list li { display: flex; align-items: flex-start; gap: var(--s5); margin: 0; }
.feature-icon { display: grid; place-items: center; width: var(--logo-size); height: var(--logo-size); flex-shrink: 0; border-radius: var(--circle); background: var(--accent); color: var(--panel); box-shadow: var(--button-shadow); }
.feature-icon svg { width: var(--s5); height: var(--s5); }
.feature-list p { color: var(--muted); margin: var(--s2) 0 0; }
.feature-illustration { padding: var(--s8); background: linear-gradient(145deg, var(--panel), var(--recess)); border: var(--hair) solid var(--border); border-radius: var(--radius); box-shadow: var(--paper-shadow); }
.preview-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.swatch { padding: var(--s4); border: var(--hair) solid var(--border); border-radius: var(--radius); background: var(--panel); font-family: var(--mono); font-size: var(--tiny); overflow-wrap: anywhere; }
.swatch::before { content: ''; display: block; height: var(--s12); margin-bottom: var(--s3); border-radius: var(--radius); border: var(--hair) solid var(--border); background: var(--swatch-color, var(--bg)); }
.swatch-bg { --swatch-color: var(--bg); }
.swatch-panel { --swatch-color: var(--panel); }
.swatch-recess { --swatch-color: var(--recess); }
.swatch-border { --swatch-color: var(--border); }
.swatch-accent { --swatch-color: var(--accent); }
.swatch-deep { --swatch-color: var(--deep); }
.swatch-text { --swatch-color: var(--text); }
.swatch-muted { --swatch-color: var(--muted); }
.swatch-success { --swatch-color: var(--success); }
.swatch-warn { --swatch-color: var(--warn); }
.swatch-error { --swatch-color: var(--error); }
.swatch-white { --swatch-color: var(--white); }
.swatch-light { --swatch-color: var(--copper-light); }
.swatch-mid { --swatch-color: var(--copper-mid); }
.swatch-red { --swatch-color: var(--flag-red); }
.swatch-blue { --swatch-color: var(--flag-blue); }
.swatch-haze { --swatch-color: var(--haze); }
.swatch-shade { --swatch-color: var(--shade); }
.swatch-strong { --swatch-color: var(--shade-strong); }
.swatch-shine { --swatch-color: var(--shine); }
.swatch-button-shine { --swatch-color: var(--button-shine); }
.swatch-veil { --swatch-color: var(--veil); }
.swatch-clear { --swatch-color: var(--clear); }
.preview-types { display: grid; gap: var(--s6); }
.preview-types p { margin: 0; }
.type-h2 { font-size: var(--heading-two); line-height: var(--mobile-heading-line); }
.type-h3 { font-size: var(--heading-three); }
.preview-mobile { display: none; }
.preview-mobile summary { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); border: var(--hair) solid var(--border); border-radius: var(--radius); background: var(--bg); cursor: pointer; }
.preview-mobile[open] .mobile-drawer { display: block; }
@media (min-width: 1450px) {
  .hero { padding-top: var(--s10); padding-bottom: var(--s10); }
}
@media (max-width: 1390px) {
  .floating-note { position: static; transform: none; width: auto; justify-content: center; box-shadow: none; background: var(--bg); margin: var(--s2) 0 var(--s4); padding: var(--s2); }
  .floating-note small { display: inline; margin-right: var(--s2); }
  .note-icon { display: none; }
}
@media (max-width: 1100px) {
  .hero { padding-top: var(--s6); }
  .showcase { max-width: var(--tablet-board-width); }
  .platforms { gap: var(--s6); }
  .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preview-mobile { display: block; }
  .feature-row { gap: var(--s8); }
}
@media (max-width: 768px) {
  .feature-row { grid-template-columns: minmax(0, 1fr); }
  .feature-row.is-reversed .feature-illustration { order: initial; }
  .article-promo { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
  .hero { padding: var(--s5) var(--gutter) var(--s6); }
  .hero h1 { max-width: 100%; margin: var(--s4) auto var(--s5); }
  .hero-actions { gap: var(--s3); }
  .hero-actions .btn { min-height: var(--s12); padding: var(--s2) var(--s5); font-size: var(--nav-type); gap: var(--s4); }
  .lead { font-size: var(--nav-type); margin: var(--s4) 0 var(--s3); }
  .trust { gap: var(--s2) var(--s4); font-size: var(--tiny); }
  .platforms { gap: var(--s3); flex-wrap: wrap; margin: var(--s4) 0 var(--s3); font-size: var(--micro); }
  .platforms span { gap: var(--s1); }
  .platforms svg { width: var(--mobile-platform-icon); height: var(--mobile-platform-icon); }
  .routes { gap: var(--s3); flex-wrap: wrap; font-size: var(--micro); }
  .routes-label { width: 100%; }
  .route { gap: var(--s1); }
  .flag { width: var(--mobile-flag-width); height: var(--mobile-flag-height); }
  .showcase { grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin-top: var(--s5); }
  .subscription-board { padding: var(--s4) var(--s4) 0; }
  .route-model { grid-template-columns: 1fr var(--mobile-node-width) 1fr; }
  .core-node svg { width: var(--mobile-node-width); height: var(--mobile-node-height); }
  .coin { width: var(--mobile-disc); height: var(--mobile-disc); }
  .plan-price { font-size: var(--mobile-price); }
  .plan-data { font-size: var(--tiny); }
  .below-hint { margin-top: var(--s5); }
  .platform-grid, .preview-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-card, .article-card, .article-promo { padding: var(--s6); }
  .faq-item summary { padding: var(--s4); }
  .faq-answer { padding: 0 var(--s4) var(--s5); }
  .feature-illustration { padding: var(--s4); }
}