.hero { position: relative; overflow-x: clip; max-width: 100%; padding-top: 24px; padding-bottom: 96px; background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 52%, var(--bg-bottom) 100%); }
.hero__copy { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 16px; border-radius: var(--r-pill); background: var(--marigold); color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .01em; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel) 45%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--marigold) 80%, transparent); }
.pill:hover { background: color-mix(in srgb, var(--marigold) 88%, var(--text)); }
.pill__arrow { font-family: var(--font-display); font-weight: var(--weight-heavy); }
.hero__title { margin: 16px 0 0; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 64px; line-height: 1.04; letter-spacing: -.03em; color: var(--accent-dark); }
.hero__line { display: block; }
.hero__line--brand { letter-spacing: -.04em; }
.hero__dot { color: color-mix(in srgb, var(--accent-dark) 45%, var(--bg)); }
.hero__sub { margin: 16px 0 0; max-width: 720px; font-size: var(--text-lg); line-height: 1.5; color: var(--muted); }
.hero__sub strong { color: var(--text); font-weight: var(--weight-bold); }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 20px 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--muted); }
.trust__item { display: inline-flex; align-items: center; gap: 6px; }
.trust__icon { width: 14px; height: 14px; flex: none; color: var(--accent); }
.marks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 16px; }
.marks__group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.marks__item { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 13px; color: var(--muted); }
.marks__icon { width: 16px; height: 16px; flex: none; color: var(--text); }
.marks__sep { width: 1px; height: 16px; background: var(--border); }
.marks__label { font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-medium); letter-spacing: .08em; color: var(--muted); }
.f-red { fill: var(--flag-red); }
.f-white { fill: var(--flag-white); }
.f-blue { fill: var(--flag-blue); }
.f-edge { fill: none; stroke: var(--flag-edge); stroke-width: 1; }
.flag { display: block; flex: none; width: 24px; height: 16px; }
.flag--sq { width: 16px; height: 16px; }
.stage { position: relative; margin-top: 32px; }
.stage::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -96px; height: 260px; z-index: 0; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--marigold) 12%, transparent) 0%, color-mix(in srgb, var(--marigold) 5%, transparent) 45%, transparent 72%); }
.console { position: relative; z-index: 1; margin: 0; border-radius: var(--r-window); background: var(--cocoa); color: var(--cream); overflow: hidden; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel) 8%, transparent), 0 2px 0 color-mix(in srgb, var(--accent-dark) 10%, transparent), 0 24px 48px -24px color-mix(in srgb, var(--accent) 22%, transparent), 0 64px 120px -40px color-mix(in srgb, var(--accent) 12%, transparent); }
.console::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at 22% -8%, color-mix(in srgb, var(--cream) 7%, transparent), transparent 70%); }
.chrome { position: relative; display: flex; align-items: center; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--cocoa-line); background: linear-gradient(180deg, color-mix(in srgb, var(--cocoa-2) 85%, var(--cocoa)) 0%, var(--cocoa) 100%); }
.chrome__dots { display: flex; gap: 8px; width: 52px; flex: none; }
.chrome__dot { width: 12px; height: 12px; border-radius: var(--r-circle); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel) 30%, transparent), inset 0 -1px 1px color-mix(in srgb, var(--cocoa) 35%, transparent); }
.chrome__dot--err { background: var(--error); }
.chrome__dot--warn { background: var(--warn); }
.chrome__dot--ok { background: var(--success); }
.chrome__title { flex: 1; text-align: center; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .04em; color: var(--cream-muted); }
.chrome__spacer { width: 52px; flex: none; }
.console__body { position: relative; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.side { display: flex; flex-direction: column; padding: 16px; border-right: 1px solid var(--cocoa-line); }
.side__brand { display: flex; align-items: center; gap: 10px; height: 24px; font-family: var(--font-display); font-weight: var(--weight-heavy); font-size: var(--text-sm); letter-spacing: -.01em; }
.side__mark { width: 22px; height: 22px; display: block; flex: none; border-radius: var(--r-sm); }
.side__menu { display: grid; margin: 16px 0 0; padding: 0; list-style: none; }
.side__item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--cream-muted); }
.side__item svg { width: 16px; height: 16px; flex: none; }
.side__item--on { background: var(--cocoa-2); color: var(--cream); font-weight: var(--weight-semibold); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 5%, transparent); }
.side__item--on svg { color: var(--moss-soft); }
.side__label { margin: 20px 0 8px; font-family: var(--font-mono); font-size: 10.5px; line-height: 14px; letter-spacing: .1em; color: var(--cream-muted); }
.regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.region { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--cocoa-2) 70%, transparent); font-size: 13px; color: var(--cream); white-space: nowrap; }
.region .flag { width: 21px; height: 14px; }
.region .flag--sq { width: 14px; height: 14px; }
.region .dot { margin-left: auto; }
.side__foot { margin-top: auto; padding-top: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--cream-muted); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-circle); flex: none; }
.dot--ok { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 24%, transparent); }
.dot--warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 24%, transparent); }
.dot--err { background: var(--error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 26%, transparent); }
.main { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 24px; }
.main__top { display: flex; align-items: center; gap: 16px; height: 36px; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-md); background: var(--cocoa-2); box-shadow: inset 0 0 0 1px var(--cocoa-line); }
.seg__opt { display: flex; align-items: center; height: 30px; padding: 0 16px; border-radius: var(--r-sm); font-size: 13px; color: var(--cream-muted); }
.seg__opt--on { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, var(--cream)) 0%, var(--accent) 100%); color: var(--cream); font-weight: var(--weight-semibold); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 18%, transparent); }
.main__hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--cream-muted); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-lg); background: var(--cocoa-2); }
.fact { position: relative; padding: 18px 24px; min-width: 0; }
.fact + .fact::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--cocoa-line); }
.fact__tag { display: block; font-family: var(--font-mono); font-size: 10.5px; line-height: 14px; letter-spacing: .1em; color: var(--cream-muted); }
.fact__num { display: block; margin-top: 6px; font-family: var(--font-display); font-weight: var(--weight-heavy); font-size: 36px; line-height: 1.1; letter-spacing: -.02em; color: var(--cream); }
.fact__unit { margin-left: 4px; font-size: 18px; font-weight: var(--weight-bold); letter-spacing: 0; color: color-mix(in srgb, var(--cream) 82%, var(--cocoa)); }
.fact__desc { display: block; margin-top: 4px; font-size: 12.5px; color: var(--cream-muted); }
.plan { padding: 16px 24px 18px; border-radius: var(--r-lg); background: var(--cocoa-2); }
.plan__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 18px; }
.plan__title { font-size: 13.5px; font-weight: var(--weight-bold); color: var(--cream); }
.plan__title small { margin-left: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-normal); letter-spacing: .04em; color: var(--cream-muted); }
.plan__note { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--cream-muted); }
.tiers { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.tier { display: grid; grid-template-columns: 120px minmax(0, 1fr) 44px; align-items: center; gap: 16px; height: 16px; }
.tier__label { font-family: var(--font-mono); font-size: 12.5px; color: var(--cream); white-space: nowrap; }
.tier__track { position: relative; height: 16px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--cocoa-3) 80%, var(--cocoa-2)); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--cocoa) 60%, transparent); }
.tier__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 50%, var(--marigold)) 62%, var(--marigold) 100%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 32%, transparent); }
.tier__fill--60 { width: 12%; }
.tier__fill--250 { width: 50%; }
.tier__fill--500 { width: 100%; }
.tier__badge { justify-self: end; font-size: 11px; font-weight: var(--weight-semibold); color: var(--moss-soft); }
.main__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.chips { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips__label { margin-right: 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--cream-muted); }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 26px; padding: 3px 12px; border-radius: var(--r-pill); background: var(--cocoa-3); font-size: var(--text-xs); color: var(--cream); max-width: 100%; overflow-wrap: anywhere; }
.chip .dot { width: 6px; height: 6px; box-shadow: none; }
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--cream); }
.switch__track { position: relative; width: 32px; height: 18px; flex: none; border-radius: var(--r-pill); background: var(--accent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 18%, transparent); }
.switch__track::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: var(--r-circle); background: var(--cream); box-shadow: 0 1px 2px color-mix(in srgb, var(--cocoa) 50%, transparent); }
.float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--r-lg); background: var(--panel); color: var(--text); box-shadow: var(--shadow-float); }
.float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel) 90%, var(--bg-top)); }
.float--link { top: 48px; right: -44px; transform: rotate(2.5deg); }
.float--pack { top: 340px; left: -40px; transform: rotate(-2deg); }
.float__text { display: flex; flex-direction: column; line-height: 1.3; }
.float__title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text); }
.float__sub { font-size: var(--text-xs); color: var(--muted); }
.float__icon { width: 18px; height: 18px; flex: none; color: var(--accent); }
.float__one { font-size: 13.5px; font-weight: var(--weight-semibold); white-space: nowrap; }
.brief { position: relative; padding-top: 96px; padding-bottom: 120px; background: linear-gradient(180deg, var(--bg-bottom) 0%, var(--bg) 240px); }
.brief__eyebrow { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: .1em; color: var(--muted); }
.brief__statement { margin: 16px 0 0; max-width: 1040px; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 36px; line-height: 1.45; letter-spacing: -.01em; color: var(--text); }
.tabs { min-width: 0; }
.tab-list, [role="tablist"] { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 6px; border-radius: var(--r-md); background: var(--panel-2); }
.tab-list [role="tab"], [role="tablist"] > [role="tab"] { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 44px; padding: 8px 20px; border: 0; border-radius: var(--r-sm); color: var(--muted); background: var(--clear); font-weight: var(--weight-bold); white-space: nowrap; }
[role="tab"][aria-selected="true"] { color: var(--panel); background: var(--accent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel) 20%, transparent); }
.tab-panel { margin-top: 24px; min-width: 0; }
.toc-tabs { position: sticky; top: 12px; z-index: 15; display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--shadow-panel); }
.toc-tabs a { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); white-space: nowrap; color: var(--muted); }
.toc-tabs a.is-current, .toc-tabs a[aria-current] { background: var(--accent); color: var(--panel); font-weight: var(--weight-bold); }
.toc-tabs.toc-static { position: static; }
.editorial-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; margin-top: 48px; }
.editorial-toc { align-self: start; position: sticky; top: 24px; display: grid; gap: 8px; }
.editorial-toc a { position: relative; min-height: 44px; padding: 10px 16px; color: var(--muted); font-weight: var(--weight-semibold); }
.editorial-toc a[aria-current] { color: var(--accent-dark); }
.editorial-toc a[aria-current]::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: var(--r-pill); background: var(--accent); }
.editorial-entry { padding-top: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--border); }
.editorial-entry:first-child { padding-top: 0; }
.editorial-entry .more-link { font-size: var(--text-base); margin-top: 8px; }
.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { position: relative; padding: 24px 40px 24px 0; cursor: pointer; font-weight: var(--weight-bold); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 24px; color: var(--accent); font-family: var(--font-mono); }
.faq-item[open] summary::after { content: "−"; }
.faq-item > p, .faq-item > div { padding-right: 24px; color: var(--muted); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pricing-card { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-panel); }
.pricing-card--current { border: 2px solid var(--accent); box-shadow: inset 0 1px 0 var(--panel), 0 20px 48px -24px color-mix(in srgb, var(--accent) 22%, transparent); }
.pricing-card__title { margin: 0 0 16px; font-size: 24px; font-weight: var(--weight-heavy); }
.pricing-card__price { margin: 0 0 8px; color: var(--accent-dark); font-family: var(--font-display); font-weight: var(--weight-display); font-size: 40px; font-variant-numeric: tabular-nums; }
.pricing-card__period { font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--muted); }
.pricing-card__list { padding-left: 20px; margin: 20px 0 24px; }
.pricing-card__list li { margin-bottom: 8px; }
.pricing-card .btn { margin-top: auto; width: 100%; }
.badge, .tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; min-height: 26px; border-radius: var(--r-sm); background: var(--panel-2); color: var(--accent-dark); font-size: var(--text-xs); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.badge--best { align-self: flex-start; margin-bottom: 16px; background: var(--accent); color: var(--panel); }
.badge--status { color: var(--accent-dark); background: color-mix(in srgb, var(--success) 10%, var(--panel)); }
.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(--r-md); background: var(--panel); }
.data-table, .line-table { width: 100%; min-width: 680px; border-collapse: collapse; text-align: left; font-size: var(--text-sm); }
.data-table caption, .line-table caption { text-align: left; padding: 16px 20px; font-weight: var(--weight-bold); color: var(--text); }
.data-table th, .data-table td, .line-table th, .line-table td { padding: 16px 20px; border-bottom: 1px solid var(--border); word-break: keep-all; }
.table-scroll th { white-space: nowrap; color: var(--text); background: var(--panel-2); font-weight: var(--weight-bold); }
.table-scroll td:first-child { color: var(--text); font-weight: var(--weight-semibold); }
.line-table .line-table__group th { background: var(--panel-2); color: var(--accent-dark); }
.data-table tr:last-child td, .line-table 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: 16px; }
.platform-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; padding: 24px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow-panel); }
.platform-card__icon { width: 32px; height: 32px; color: var(--accent-dark); }
.platform-card__name { margin: 0; font-size: 18px; font-weight: var(--weight-heavy); }
.platform-card .btn { font-size: var(--text-sm); padding-inline: 12px; width: 100%; }
.article-card { min-width: 0; padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow-panel); }
.article-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; font-size: var(--text-xs); color: var(--muted); }
.article-card__title { margin: 0 0 16px; font-size: 24px; line-height: 1.4; }
.article-card__title a:hover { color: var(--accent); }
.article-card p { color: var(--muted); }
.article-hero { position: relative; overflow-x: clip; padding: 48px; border-radius: var(--r-lg); background: var(--panel); }
.article-hero__stamp { position: absolute; right: 28px; top: 28px; display: grid; place-items: center; width: 96px; height: 96px; border: 3px double var(--accent); border-radius: var(--r-circle); transform: rotate(-10deg); color: var(--accent); font-family: var(--font-mono); font-weight: var(--weight-bold); }
.article-hero h1, .article-hero p { max-width: calc(100% - 128px); }
.callout { margin: 24px 0; padding: 24px; border-left: 4px solid var(--accent); border-radius: var(--r-sm); background: var(--panel-2); color: var(--text); }
.callout p:last-child { margin-bottom: 0; }
.promo-block { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow-panel); }
.promo-block__brand { margin: 0 0 8px; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 24px; color: var(--accent-dark); }
.promo-block p { margin-bottom: 0; }
.promo-block .btn { flex-shrink: 0; white-space: nowrap; }
.ticker { overflow: hidden; max-width: 100%; width: 100%; padding-top: 24px; padding-bottom: 24px; border-block: 1px solid var(--border); }
.ticker__track { display: flex; width: max-content; }
.ticker__group { display: flex; align-items: center; flex: none; gap: 40px; padding-right: 40px; font-family: var(--font-mono); color: var(--muted); }
.ticker__group span { white-space: nowrap; }
.preview-section { padding-top: 64px; padding-bottom: 64px; }
.preview-section + .preview-section { border-top: 1px solid var(--border); }
.preview-stack { display: grid; gap: 24px; }
.preview-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.swatch-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.swatch { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.swatch__color { display: block; height: 72px; }
.swatch code { display: block; padding: 12px; font-size: var(--text-xs); }
.swatch--bg { background: var(--bg); }
.swatch--bg-top { background: var(--bg-top); }
.swatch--bg-bottom { background: var(--bg-bottom); }
.swatch--panel { background: var(--panel); }
.swatch--panel-2 { background: var(--panel-2); }
.swatch--border { background: var(--border); }
.swatch--accent { background: var(--accent); }
.swatch--accent-dark { background: var(--accent-dark); }
.swatch--marigold { background: var(--marigold); }
.swatch--text { background: var(--text); }
.swatch--muted { background: var(--muted); }
.swatch--slate { background: var(--slate); }
.swatch--success { background: var(--success); }
.swatch--warn { background: var(--warn); }
.swatch--error { background: var(--error); }
.swatch--cocoa { background: var(--cocoa); }
.swatch--cocoa-2 { background: var(--cocoa-2); }
.swatch--cocoa-3 { background: var(--cocoa-3); }
.swatch--cocoa-line { background: var(--cocoa-line); }
.swatch--cream { background: var(--cream); }
.swatch--cream-muted { background: var(--cream-muted); }
.swatch--flag-red { background: var(--flag-red); }
.swatch--flag-blue { background: var(--flag-blue); }
.swatch--flag-white { background: var(--flag-white); }
.swatch--flag-edge { background: var(--flag-edge); }
.swatch--moss-soft { background: var(--moss-soft); }
.swatch--clear { background: var(--clear); }
.type-display { margin: 0; font-family: var(--font-display); font-size: 48px; font-weight: var(--weight-display); color: var(--accent-dark); line-height: 1.2; }
.type-mono { font-family: var(--font-mono); color: var(--muted); }
@media (max-width: 1320px) {
  .float--link { right: 16px; }
  .float--pack { left: 16px; }
}
@media (max-width: 1024px) {
  .console__body { grid-template-columns: 200px minmax(0, 1fr); }
  .region { font-size: var(--text-xs); gap: 4px; padding: 0 6px; }
  .fact__num { font-size: 30px; }
  .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .editorial-layout { gap: 32px; grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .hero { padding-bottom: 64px; }
  .hero__title { font-size: 40px; }
  .hero__sub { font-size: 17px; }
  .float { display: none; }
  .console__body { grid-template-columns: minmax(0, 1fr); }
  .side { padding: 12px; border-right: 0; border-bottom: 1px solid var(--cocoa-line); }
  .side__brand, .side__menu, .side__label, .side__foot { display: none; }
  .regions { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .region { flex: none; border-radius: var(--r-pill); padding: 0 12px; gap: 6px; }
  .main { padding: 16px; }
  .main__top { flex-wrap: wrap; height: auto; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact + .fact::before { left: 24px; right: 24px; top: 0; bottom: auto; width: auto; height: 1px; }
  .tier { grid-template-columns: 96px minmax(0, 1fr) 36px; gap: 12px; }
  .plan__head { flex-direction: column; align-items: flex-start; height: auto; gap: 4px; }
  .brief { padding-top: 64px; padding-bottom: 80px; }
  .brief__statement { font-size: 26px; }
  .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  .pricing-card { padding: 24px; }
  .editorial-layout { grid-template-columns: minmax(0, 1fr); }
  .editorial-toc { position: static; display: flex; overflow-x: auto; max-width: 100%; }
  .editorial-toc a { flex: none; white-space: nowrap; border-radius: var(--r-pill); background: var(--panel-2); }
  .promo-block { flex-direction: column; align-items: flex-start; padding: 24px; }
  .article-hero__stamp { display: none; }
  .article-hero { padding: 24px; }
  .article-hero h1, .article-hero p { max-width: 100%; }
  .swatch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .type-display { font-size: 32px; }
}
@media (max-width: 640px) {
  .hero__title { font-size: 36px; }
  .hero__title { letter-spacing: -.02em; }
  .marks__sep { display: none; }
  .chips { flex-wrap: wrap; }
  .brief__statement { font-size: 24px; }
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-card { padding: 16px; }
  .swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .float, .article-hero__stamp { transform: none; }
  .plan { padding-inline: 16px; }
  .tier { grid-template-columns: 90px minmax(0, 1fr); gap: 8px; }
  .tier__badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { width: 100%; flex-wrap: wrap; transform: none !important; }
  .ticker__group { flex-wrap: wrap; gap: 16px; padding-right: 0; }
  .ticker__group[data-ticker-copy] { display: none; }
}