/* Centered gauge hero */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.stage-wrap { position: relative; max-width: 100%; overflow-x: clip; background: linear-gradient(180deg,var(--hero-top) 0%,var(--hero-bottom) 100%); }
.stage-wrap::before { content: ""; position: absolute; inset: 0 0 auto; height: 620px; background: radial-gradient(ellipse 46% 58% at 50% 32%,var(--glow-white) 0%,var(--clear) 72%); pointer-events: none; }
.stage-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 460px; background: radial-gradient(ellipse 44% 56% at 50% 64%,var(--accent-tint) 0%,var(--clear) 72%); pointer-events: none; }
.hero { position: relative; z-index: 1; }
.hero-inner { position: relative; max-width: 1440px; margin: 0 auto; padding: 32px 64px 40px; }
.copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.copy .badge { margin-bottom: 20px; height: 28px; }
.hero h1 { margin: 0 0 20px; font-family: var(--font-display); font-weight: 900; font-size: 66px; line-height: 72px; letter-spacing: -.03em; color: var(--text); }
.hero .cta-row .btn { height: 52px; }
.desc { margin: 0 0 14px; font-size: 18px; line-height: 28px; color: var(--text-muted); }
.desc strong { color: var(--text); font-weight: 700; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 22px; color: var(--text-muted); }
.trust li { display: flex; align-items: center; gap: 6px; }
.trust svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent); }
.frags { position: absolute; top: 2px; left: 50%; width: 1200px; height: 340px; margin-left: -600px; pointer-events: none; z-index: 0; overflow: visible; }
.frags path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.frags .o1 { opacity: .25; }
.frags .o2 { opacity: .4; }
.frags .o3 { opacity: .55; }
.frags .o4 { opacity: .7; }
.drift-a { animation: drift-a 26s ease-in-out infinite; }
.drift-b { animation: drift-b 31s ease-in-out infinite; }
.drift-c { animation: drift-c 23s ease-in-out infinite; }
@keyframes drift-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(5px,-7px); } }
@keyframes drift-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-6px,5px); } }
@keyframes drift-c { 0%,100% { transform: translate(0,0); } 50% { transform: translate(3px,6px); } }
.floats { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.routes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.routes-label { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--accent-dark); }
.routes-label::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--accent); flex-shrink: 0; }
.route { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-panel); box-shadow: var(--hi-inset),var(--shadow-chip); font-size: 13px; font-weight: 600; color: var(--text); }
.route svg { width: 22px; height: 16px; flex-shrink: 0; display: block; overflow: hidden; border-radius: var(--radius-s); }
.fact-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-panel); box-shadow: var(--hi-inset),var(--shadow-lift); max-width: 100%; }
.fact-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-circle); background: var(--accent-soft); flex-shrink: 0; }
.fact-ico svg { width: 24px; height: 18px; display: block; color: var(--accent-dark); }
.fact-text { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.fact-main { font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--text-muted); }
.fact-main b { color: var(--text); font-weight: 700; }
.fact-sub { font-size: 12px; line-height: 18px; color: var(--accent-dark); font-weight: 600; }
.device { position: relative; z-index: 2; margin-top: 32px; }
.tiers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; max-width: 1008px; margin: 0 auto; padding: 0; list-style: none; }
.tier { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg,var(--white) 0%,var(--bg-panel) 58%); box-shadow: var(--hi-inset),var(--shadow-lift); transition: transform .35s var(--ease); }
.tier:hover { transform: perspective(900px) rotateX(3deg) translateY(-4px); }
.tier-head { display: flex; align-items: center; justify-content: space-between; height: 24px; gap: 8px; }
.tier-kind { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.tier-kind::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-s); background: var(--border); flex-shrink: 0; }
.tier-art { display: flex; justify-content: center; align-items: flex-end; margin: 6px 0; }
.tier-art svg { width: 240px; height: 177px; display: block; max-width: 100%; }
.tier-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; height: 40px; }
.gb-wrap { display: flex; align-items: baseline; gap: 8px; }
.gb { font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 34px; letter-spacing: -.03em; color: var(--text); }
.gb-sub { font-size: 12px; color: var(--text-muted); }
.gauge { width: 96px; height: 8px; margin-bottom: 12px; border-radius: var(--radius-s); background: var(--bg-panel-2); box-shadow: inset 0 1px 1px var(--inset-shade); overflow: hidden; }
.gauge i { display: block; height: 100%; border-radius: var(--radius-s); background: linear-gradient(90deg,var(--accent-2),var(--accent)); }
.gauge .w12 { width: 12%; }
.gauge .w50 { width: 50%; }
.gauge .w100 { width: 100%; }
.rail { position: relative; display: flex; align-items: center; justify-content: center; max-width: 1008px; height: 28px; margin: 14px auto 0; border-radius: var(--radius-nav); background: var(--bg-panel-2); box-shadow: inset 0 1px 2px var(--inset-shade),inset 0 -1px 0 var(--white); }
.rail::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 6px; background: repeating-linear-gradient(90deg,var(--border) 0 1px,var(--clear) 1px 14px); }
.rail-label { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 20px; padding: 0 12px; background: var(--bg-panel-2); font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.rail-label svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--accent); }
.platline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 16px; }
.platforms { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.platforms li { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.platforms svg { width: 18px; height: 18px; flex-shrink: 0; display: block; color: var(--text); fill: currentColor; }
.plat-vr { width: 1px; height: 18px; background: var(--border); }
.cover-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 13px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-panel); box-shadow: var(--hi-inset),var(--shadow-chip); font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--accent-dark); }
.cover-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
.s-acc { stop-color: var(--accent); }
.s-acc2 { stop-color: var(--accent-2); }
.s-dark { stop-color: var(--accent-dark); }
.o-40 { stop-opacity: .4; }
.o-30 { stop-opacity: .3; }
.o-0 { stop-opacity: 0; }
.disc-side { fill: url(#gSide); }
.disc-top { fill: url(#gTop); }
.disc-sheen { fill: var(--white); opacity: .16; }
.disc-rim { fill: none; stroke: var(--white); stroke-opacity: .75; stroke-width: 1.2; stroke-linecap: round; }
.st-glow { fill: url(#gGlow); }
.st-ring { fill: none; stroke: var(--accent); stroke-opacity: .16; stroke-width: 1; }
.st-shadow { fill: url(#gShadow); }
.tile-shadow { fill: var(--accent-dark); opacity: .28; }
.tile-base { fill: var(--bg-panel-2); }
.tile-face { fill: var(--white); stroke: var(--border); stroke-width: 1; }
.tile-globe { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.f-red { fill: var(--flag-red); }
.f-white { fill: var(--white); }
.f-blue { fill: var(--flag-blue); }
.f-edge { fill: none; stroke: var(--text); stroke-opacity: .14; stroke-width: 1; }

/* Tabs, chapter navigation and disclosure */
.tabs { min-width: 0; }
.tab-list,[role="tablist"] { display: flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; overflow-x: auto; padding: 6px; margin-bottom: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel-2); box-shadow: inset 0 1px 2px var(--inset-shade); }
[role="tab"] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 44px; padding: 10px 20px; border: 1px solid var(--clear); border-radius: var(--radius-nav); background: var(--clear); font-weight: 700; color: var(--text-muted); white-space: nowrap; }
[role="tab"]:hover { color: var(--text); }
[role="tab"][aria-selected="true"] { border-color: var(--border); color: var(--accent-dark); background: var(--bg-panel); box-shadow: var(--hi-inset),var(--shadow-chip); }
[role="tabpanel"] { min-width: 0; }
.toc-tabs { position: sticky; top: var(--toc-top); z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px; margin-block: 0 32px; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); box-shadow: var(--hi-inset),var(--shadow-nav); }
.toc-tabs a { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 44px; padding: 8px 16px; border-radius: var(--radius-nav); font-size: 14px; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.toc-tabs a:hover { background: var(--bg-panel-2); color: var(--text); }
.toc-tabs a.is-active { background: var(--accent-soft); color: var(--accent-dark); box-shadow: var(--hi-inset); }
.toc-tabs.toc-static { position: static; }
body:has(.toc-tabs) section[id] { scroll-margin-top: var(--section-anchor); }
.faq { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); box-shadow: var(--hi-inset),var(--shadow-chip); margin-bottom: 12px; }
.faq summary { position: relative; min-height: 60px; padding: 18px 52px 18px 22px; font-weight: 700; line-height: 1.5; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 17px; color: var(--accent-dark); font-family: var(--font-mono); font-size: 20px; }
.faq[open] summary::after { content: "−"; }
.faq[open] summary { border-bottom: 1px solid var(--border); }
.faq-answer { padding: 20px 22px; color: var(--text-muted); }
.faq-answer > :last-child { margin-bottom: 0; }

/* Plans and wide tables */
.plan-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); box-shadow: var(--hi-inset),var(--shadow-lift); }
.plan-card h3 { font-size: 22px; margin-block: 16px; }
.plan-card.is-current { border-color: var(--accent); box-shadow: var(--hi-inset),var(--shadow-lift),0 0 0 1px var(--accent); }
.plan-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.plan-period { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.plan-best { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent); border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; }
.plan-price { margin: 8px 0 16px; font-family: var(--font-display); font-size: 42px; font-weight: 900; letter-spacing: -.03em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.plan-price small { font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: normal; color: var(--text-muted); }
.plan-quota { padding: 12px 16px; border-radius: var(--radius-nav); background: var(--bg-panel-2); font-family: var(--font-mono); font-size: 18px; font-weight: 600; }
.plan-features { flex: 1; margin: 24px 0; padding: 0; list-style: none; font-size: 14px; color: var(--text-muted); }
.plan-features li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-dark); }
.plan-card .btn { width: 100%; min-width: 0; }
.table-scroll { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); box-shadow: var(--hi-inset),var(--shadow-chip); }
.data-table,.route-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.data-table caption,.route-table caption { padding: 18px 20px; font-family: var(--font-mono); color: var(--accent-dark); text-align: left; font-weight: 600; }
.data-table th,.data-table td,.route-table th,.route-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border); word-break: keep-all; }
.table-scroll th,.data-table th,.route-table th { white-space: nowrap; background: var(--bg-panel-2); color: var(--text); font-weight: 700; }
.data-table td:first-child,.route-table td:first-child { color: var(--text); font-weight: 600; }
.data-table tr:last-child td,.route-table tr:last-child td { border-bottom: 0; }
.route-table .region-row th { color: var(--accent-dark); background: var(--accent-soft); font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; }
.prose > .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
.status-note { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.status-note::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; border-radius: var(--radius-circle); background: var(--success); }

/* Platforms, articles and editorial content */
.platform-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; }
.platform-card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 16px; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); box-shadow: var(--hi-inset),var(--shadow-chip); text-align: center; }
.platform-icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--white); box-shadow: var(--hi-inset); color: var(--text); }
.platform-icon svg { width: 28px; height: 28px; fill: currentColor; }
.platform-card h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.platform-card .btn { min-width: 0; width: 100%; padding-inline: 10px; font-size: 13px; margin-top: auto; }
.article-card { display: flex; flex-direction: column; min-width: 0; padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); box-shadow: var(--hi-inset),var(--shadow-chip); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.article-card h3 { font-size: 23px; line-height: 1.5; letter-spacing: -.02em; }
.article-card h3 a { text-decoration: none; }
.article-card h3 a:hover { color: var(--accent-dark); }
.article-card p { color: var(--text-muted); font-size: 14px; }
.article-card > a { align-self: flex-start; margin-top: auto; min-height: 28px; color: var(--accent-dark); font-weight: 700; font-size: 14px; }
.blog-hero { position: relative; padding: 48px; border-radius: var(--radius); background: var(--bg-panel); overflow-x: clip; }
.blog-hero h1 { max-width: 900px; padding-right: 80px; font-size: clamp(36px,4vw,56px); }
.blog-stamp { position: absolute; right: 28px; top: 28px; display: grid; place-items: center; width: 76px; height: 76px; border: 3px double var(--accent); border-radius: var(--radius-circle); transform: rotate(-11deg); color: var(--accent-dark); font-family: var(--font-mono); font-size: 20px; font-weight: 700; }
.prose { min-width: 0; overflow-wrap: anywhere; }
.prose p,.prose li { line-height: 1.9; }
.prose h2 { margin-top: 56px; font-size: 32px; }
.prose h3 { margin-top: 32px; }
.prose img { border-radius: var(--radius-m); }
.callout { margin: 28px 0; padding: 20px 24px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-m); background: var(--bg-panel); color: var(--text-muted); box-shadow: var(--hi-inset); }
.callout strong { color: var(--text); }
.callout > :last-child { margin-bottom: 0; }
.promo-block { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-block: 40px; padding: 32px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel-2); box-shadow: var(--hi-inset),var(--shadow-lift); }
.promo-copy { min-width: 0; }
.promo-copy strong { display: block; margin-bottom: 8px; font-family: var(--font-display); font-weight: 900; font-size: 24px; }
.promo-copy p { margin: 0; color: var(--text-muted); }
.promo-block .btn,.promo-block .btn-secondary { flex-shrink: 0; white-space: nowrap; }
.cta-band { padding-top: 48px; padding-bottom: 48px; background: var(--ink-deep); color: var(--white); }
.cta-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta-band h2 { margin-bottom: 12px; font-size: 32px; }
.cta-band p { margin: 0; color: var(--line-on-dark); }
.feature-stack { display: grid; gap: 120px; }
.feature-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 80px; align-items: center; }
.feature-row > * { min-width: 0; }
.feature-row:nth-child(even) .feature-copy { order: 2; }
.feature-row:nth-child(even) .feature-art { order: 1; }
.feature-copy p { color: var(--text-muted); }
.feature-copy .btn { border-radius: var(--radius-pill); }
.feature-art { position: relative; display: grid; place-items: center; min-height: 320px; padding: 32px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); box-shadow: var(--hi-inset),var(--shadow-lift); overflow-x: clip; }
.feature-art > svg { width: 280px; height: 240px; max-width: 100%; }
.feature-card { min-width: 0; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(72px,1fr)); gap: 10px; width: 100%; }
.tile-grid .symbol-tile { aspect-ratio: auto; min-height: 60px; overflow: visible; overflow-wrap: anywhere; text-align: center; }
.symbol-tile { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 3px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--white); box-shadow: var(--hi-inset),var(--shadow-chip); font-family: var(--font-mono); font-size: 10px; color: var(--accent-dark); }
.symbol-tile svg { width: 24px; height: 20px; max-width: 100%; overflow: hidden; }
.next { position: relative; padding: 96px 64px 120px; background: var(--bg); }
.next-inner { max-width: 1120px; margin: 0 auto; }
.next h2 { margin: 0 0 16px; font-size: 44px; line-height: 52px; }
.next p { max-width: 640px; margin: 0; font-size: 17px; line-height: 28px; color: var(--text-muted); }

/* Static design specimen */
.specimen-section { padding-top: 64px; padding-bottom: 64px; }
.specimen-heading { margin-bottom: 32px; }
.swatch-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.swatch { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--bg-panel); }
.swatch code { display: block; margin-top: 10px; font-size: 12px; }
.swatch-color { height: 64px; border: 1px solid var(--border); border-radius: var(--radius-s); }
.swatch-bg { background: var(--bg); }
.swatch-panel { background: var(--bg-panel); }
.swatch-inset { background: var(--bg-panel-2); }
.swatch-border { background: var(--border); }
.swatch-accent { background: var(--accent); }
.swatch-dark { background: var(--accent-dark); }
.swatch-companion { background: var(--accent-2); }
.swatch-text { background: var(--text); }
.swatch-muted { background: var(--text-muted); }
.swatch-success { background: var(--success); }
.swatch-warn { background: var(--warn); }
.swatch-error { background: var(--error); }
.swatch-top { background: var(--hero-top); }
.swatch-bottom { background: var(--hero-bottom); }
.swatch-white { background: var(--white); }
.swatch-ink { background: var(--ink-deep); }
.swatch-red { background: var(--flag-red); }
.swatch-blue { background: var(--flag-blue); }
.swatch-soft { background: var(--accent-soft); }
.swatch-tint { background: var(--accent-tint); }
.sample-display { font-family: var(--font-display); font-size: 48px; line-height: 1.2; font-weight: 900; letter-spacing: -.03em; }
.sample-subtitle { font-size: 20px; color: var(--text-muted); }
.sample-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.sample-table-space { margin-top: 32px; }
@media (min-width: 1320px) {
  .floats { position: static; display: block; margin: 0; }
  .routes { position: absolute; z-index: 3; left: 64px; top: 72px; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
  .routes-label { margin-bottom: 2px; }
  .fact-pill { position: absolute; z-index: 3; right: 64px; top: 96px; }
}
@media (max-width: 1100px) {
  .feature-row { gap: 40px; }
  .platform-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .frags { display: none; }
  .feature-row { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .feature-row:nth-child(even) .feature-copy,.feature-row:nth-child(even) .feature-art { order: initial; }
}
@media (max-width: 768px) {
  .hero-inner { padding: 28px 16px 40px; }
  .hero h1 { font-size: 40px; line-height: 46px; }
  .desc { font-size: 16px; line-height: 26px; }
  .tiers { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; max-width: 100%; margin: 0; padding: 4px 0 18px; }
  .tier { min-width: 0; }
  .tier-art svg { width: 210px; height: 155px; }
  .rail { margin-top: 4px; }
  .platforms { flex-wrap: wrap; justify-content: center; gap: 12px 18px; }
  .plat-vr { display: none; }
  .next { padding: 72px 20px 96px; }
  .next h2 { font-size: 32px; line-height: 40px; }
  .swatch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .feature-stack { gap: 72px; }
  .promo-block { flex-direction: column; align-items: flex-start; padding: 24px; }
  .blog-hero { padding: 28px 24px; }
  .blog-hero h1 { font-size: 36px; padding-right: 0; }
  .blog-stamp { display: none; }
}
@media (max-width: 640px) {
  .platform-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .plan-card { padding: 24px; }
  .feature-art { padding: 16px; max-width: 100%; }
  .stage-wrap::before,.stage-wrap::after { max-width: 100%; }
  .tier:hover { transform: none; }
  .sample-display { font-size: 32px; }
  .tile-grid { gap: 6px; }
  .symbol-tile { font-size: 8px; }
  .symbol-tile svg { width: 20px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .drift-a,.drift-b,.drift-c { animation: none; }
  .tier:hover { transform: none; }
}