.hero { position: relative; isolation: isolate; overflow-x: clip; max-width: 100%; padding: var(--s8) var(--s8) 0; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 57%, var(--warm-haze), var(--clear) 67%), linear-gradient(180deg, var(--header-wash), var(--clear) 80%); }
.hero-copy { text-align: center; position: relative; }
.eyebrow { display: flex; justify-content: center; align-items: center; gap: var(--s3); font-size: var(--fs-xs); color: var(--muted); letter-spacing: var(--tracking-label); min-height: var(--s5); }
.hero-actions { display: flex; justify-content: center; gap: var(--s3); margin-top: var(--s5); }
.hero-description { margin: var(--s4) 0 0; color: var(--muted); font-size: var(--fs-body); }
.hero-description strong { font-weight: var(--medium); color: var(--text); }
.trust-row { display: flex; align-items: center; justify-content: center; gap: var(--s6); margin-top: var(--s2); font-size: var(--fs-sm); color: var(--muted); }
.trust-item { display: inline-flex; gap: var(--s2); align-items: center; }
.trust-item svg { width: var(--s4); height: var(--s4); color: var(--success); }
.trust-divider { height: var(--s3); width: var(--hairline); background: var(--border); }
.coverage { display: flex; justify-content: center; margin: var(--s6) auto 0; }
.coverage-item { width: var(--stat-width); display: flex; flex-direction: column; align-items: center; }
.coverage-value { font-family: var(--mono); font-size: var(--fs-number); font-weight: var(--regular); line-height: var(--line-title); color: var(--accent); letter-spacing: var(--tracking-title); font-variant-numeric: tabular-nums; }
.coverage-caption { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s1); }
.access-stage { max-width: var(--stage-width); min-height: var(--stage-height); margin: var(--s6) auto 0; position: relative; }
.access-tray { width: calc(100% - var(--side-clearance)); min-height: var(--stage-height); margin: auto; padding: var(--s6); border: var(--hairline) solid var(--border); border-radius: var(--radius-tray); background: linear-gradient(145deg, var(--panel), var(--bg) 43%, var(--recess)); box-shadow: var(--tray-shadow); position: relative; }
.tray-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: var(--s8); }
.tray-heading h2 { font: var(--regular) var(--fs-card)/var(--line-title) var(--serif); margin: 0; }
.tray-heading h2 .square { vertical-align: middle; margin-right: var(--s3); }
.tray-groups { display: flex; align-items: center; background: var(--recess); padding: var(--s1) var(--s3); border-radius: var(--radius); box-shadow: var(--recess-shadow); font-size: var(--fs-xs); color: var(--muted); gap: var(--s3); }
.tray-groups span + span { padding-left: var(--s3); border-left: var(--hairline) solid var(--border); }
.platform-grid, .route-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); padding: 0; list-style: none; }
.platform-grid { margin: var(--s6) 0 0; }
.platform-card { min-height: var(--platform-height); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--card-shadow); font-size: var(--fs-sm); min-width: 0; }
.platform-card svg { width: var(--platform-icon); height: var(--platform-icon); fill: currentColor; color: var(--text); }
.route-heading { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s4); font-size: var(--fs-xs); color: var(--muted); }
.route-heading p { margin: 0; }
.route-heading span { font-family: var(--mono); font-size: var(--fs-xs); }
.route-grid { margin: var(--s2) 0 0; }
.route-card { min-height: var(--route-height); background: var(--panel); border: var(--hairline) solid var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; gap: var(--s3); box-shadow: var(--card-shadow); font-size: var(--fs-sm); }
.flag { width: var(--flag-width); height: var(--flag-height); border-radius: var(--radius-dot); overflow: hidden; box-shadow: 0 0 0 var(--hairline) var(--edge-low); }
.flag-white { fill: var(--flag-white); }
.flag-red { fill: var(--flag-red); }
.flag-blue { fill: var(--flag-blue); }
.flag-japan { fill: var(--flag-japan); }
.flag-hk { fill: var(--flag-hk); }
.flag-sg { fill: var(--flag-sg); }
.flag-uk { fill: var(--flag-uk); }
.uk-white-diagonal { stroke: var(--flag-white); stroke-width: var(--uk-white-stroke); }
.uk-red-diagonal { stroke: var(--flag-uk); stroke-width: var(--uk-red-stroke); }
.tray-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); font-size: var(--fs-xs); color: var(--muted); }
.tray-foot p { margin: 0; }
.tray-foot a { display: flex; align-items: center; gap: var(--s2); color: var(--accent-dark); min-height: var(--s6); }
.fact-note { position: absolute; width: var(--fact-width); padding: var(--s5); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--badge-wash); box-shadow: var(--fact-shadow); }
.fact-note-left { left: 0; top: var(--fact-left-y); transform: rotate(var(--fact-tilt-left)); }
.fact-note-right { right: 0; top: var(--fact-right-y); transform: rotate(var(--fact-tilt-right)); }
.fact-note svg { width: var(--s6); height: var(--s6); color: var(--accent-dark); margin-bottom: var(--s3); }
.fact-note p { margin: 0; color: var(--text); font-size: var(--fs-sm); font-weight: var(--medium); }
.fact-note small { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--fs-xs); }
.fact-note strong { display: block; font-size: var(--fs-card); font-weight: var(--regular); margin-top: var(--s1); }
.coverage-strip { margin-top: var(--s6); min-height: var(--s10); display: flex; justify-content: center; align-items: center; gap: var(--s8); font-size: var(--fs-xs); color: var(--muted); border-top: var(--hairline) solid var(--border); background: var(--header-wash); }
.strip-number { font-family: var(--mono); color: var(--text); }
.strip-divider { width: var(--s6); height: var(--hairline); background: var(--border); }
.editorial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.feature-card { min-width: 0; padding: var(--s8); background: var(--panel); border: var(--hairline) solid var(--border); border-radius: var(--radius-tray); box-shadow: var(--inner-highlight); }
.feature-card > .square { margin-bottom: var(--s6); }
.feature-card h3 { font-family: var(--serif); font-weight: var(--regular); font-size: var(--fs-section); }
.feature-card p { color: var(--muted); }
.inset-stage { overflow-x: clip; max-width: 100%; padding: var(--s8); margin-top: var(--s6); background: radial-gradient(ellipse at 75% 80%, var(--warm-shadow), var(--clear) 70%), linear-gradient(140deg, var(--recess), var(--bg)); border-radius: var(--radius); box-shadow: var(--recess-shadow); }
.inset-card { padding: var(--s5); border: var(--hairline) solid var(--border); background: var(--panel); border-radius: var(--radius); box-shadow: var(--fact-shadow); }
.inset-card + .inset-card { margin-top: var(--s3); margin-left: var(--s6); }
.inset-card p:last-child { margin-bottom: 0; }
.fact-rail { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8); padding: var(--s6); margin-top: var(--s6); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--recess); font-size: var(--fs-md); }
.tabs { min-width: 0; }
.tab-list, [role="tablist"] { display: flex; gap: var(--s2); max-width: 100%; overflow-x: auto; padding: var(--s2); background: var(--recess); border: var(--hairline) solid var(--border); border-radius: var(--radius); box-shadow: var(--recess-shadow); }
[role="tab"] { flex-shrink: 0; min-height: var(--tap-size); padding: var(--s2) var(--s5); border: var(--hairline) solid var(--clear); border-radius: var(--radius); background: var(--clear); color: var(--muted); font-size: var(--fs-md); }
[role="tab"][aria-selected="true"] { color: var(--accent-dark); background: var(--panel); border-color: var(--border); box-shadow: var(--inner-highlight); }
.tab-panel, [role="tabpanel"] { padding-top: var(--s6); min-width: 0; }
.toc-tabs { position: sticky; top: 0; z-index: var(--z-toc); display: flex; align-items: center; gap: var(--s2); min-height: var(--toc-height); max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding: var(--s2); margin-block: var(--s6); background: var(--panel); border: var(--hairline) solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); }
.toc-tabs a { flex-shrink: 0; display: inline-flex; align-items: center; min-height: var(--tap-size); padding: var(--s2) var(--s4); border-radius: var(--radius); font-size: var(--fs-sm); }
.toc-tabs a.is-current { color: var(--accent-dark); background: var(--recess); box-shadow: var(--inner-highlight); }
.toc-tabs.toc-static { position: static; }
body:has(.toc-tabs) section[id], body:has(.toc-tabs) h2[id] { scroll-margin-top: var(--anchor-offset); }
.faq-item { border-bottom: var(--hairline) solid var(--border); background: var(--panel); padding: var(--s4) var(--s6); }
.faq-item:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.faq-item:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.faq-item summary { cursor: pointer; padding: var(--s3) var(--s8) var(--s3) 0; min-height: var(--tap-size); position: relative; font-weight: var(--medium); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 0; top: var(--s3); color: var(--accent-dark); }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { color: var(--muted); margin-top: var(--s3); }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.plan-card { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; padding: var(--s6); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--card-shadow); }
.plan-card.is-selected { border-color: var(--accent); box-shadow: var(--fact-shadow); }
.plan-card h3, .plan-card p { margin: 0; }
.plan-card ul { margin: 0; padding-left: var(--s5); color: var(--muted); font-size: var(--fs-md); }
.plan-card li + li { margin-top: var(--s2); }
.plan-card > .button { margin-top: auto; }
.plan-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.plan-price { font: var(--regular) var(--fs-number)/var(--line-title) var(--mono); color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.plan-price small { font-family: var(--body); color: var(--muted); }
.badge, .tag { display: inline-flex; align-items: center; gap: var(--s2); max-width: 100%; overflow-wrap: anywhere; padding: var(--s1) var(--s2); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--recess); color: var(--text); font-size: var(--fs-xs); line-height: var(--line-body); }
.badge-best { color: var(--accent-dark); background: var(--warm-haze); border-color: var(--accent); }
.badge-success { color: var(--success); }
.badge-warn { color: var(--warn); }
.badge-error { color: var(--error); }
.table-scroll { overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--panel); }
.data-table, .route-table { border-collapse: collapse; width: 100%; min-width: var(--table-width); text-align: left; font-size: var(--fs-md); }
.data-table caption, .route-table caption { text-align: left; padding: var(--s4); font-weight: var(--medium); color: var(--text); }
.data-table th, .data-table td, .route-table th, .route-table td { padding: var(--s4) var(--s5); border-bottom: var(--hairline) solid var(--border); vertical-align: top; }
.data-table th, .route-table th { color: var(--text); background: var(--recess); font-weight: var(--medium); }
.data-table td:first-child, .route-table td:first-child { color: var(--text); font-weight: var(--medium); }
.route-table .region-heading th { background: var(--bg); color: var(--accent-dark); }
.prose > .data-table, .prose > .route-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
.download-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); }
.download-card { min-width: 0; padding: var(--s6) var(--s4); display: flex; flex-direction: column; align-items: center; gap: var(--s4); text-align: center; border: var(--hairline) solid var(--border); background: var(--panel); border-radius: var(--radius); box-shadow: var(--card-shadow); }
.download-card svg { width: var(--platform-icon); height: var(--platform-icon); fill: currentColor; overflow: hidden; }
.download-card h3 { font-size: var(--fs-body); margin: 0; }
.download-card .button { min-width: 0; padding-inline: var(--s3); width: 100%; font-size: var(--fs-sm); }
.article-card { padding: var(--s6); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--card-shadow); min-width: 0; }
.article-card h3 { margin-top: var(--s5); font-size: var(--fs-subheading); }
.article-card h3 a:hover { color: var(--accent-dark); }
.article-card p { color: var(--muted); font-size: var(--fs-md); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; color: var(--muted); font-size: var(--fs-xs); }
.article-chrome { border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--card-shadow); overflow: clip; }
.chrome-bar { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s5); background: var(--recess); border-bottom: var(--hairline) solid var(--border); font: var(--regular) var(--fs-xs)/var(--line-body) var(--mono); }
.chrome-bar::before { content: ''; width: var(--s2); height: var(--s2); border-radius: var(--radius-dot); background: var(--accent); box-shadow: var(--s3) 0 0 var(--border), var(--s6) 0 0 var(--muted); margin-right: var(--s6); }
.chrome-content { padding: var(--s8); }
.callout { margin: var(--s6) 0; padding: var(--s5) var(--s6); border-left: var(--s1) solid var(--accent); border-radius: var(--radius); background: var(--recess); box-shadow: var(--inner-highlight); }
.callout p:last-child { margin-bottom: 0; }
.article-promo { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); padding: var(--s8); margin-block: var(--s8); background: linear-gradient(115deg, var(--panel), var(--recess)); border: var(--hairline) solid var(--border); border-radius: var(--radius-tray); box-shadow: var(--fact-shadow); }
.promo-copy { min-width: 0; }
.promo-brand { font: var(--medium) var(--fs-brand)/var(--line-title) var(--display); margin-bottom: var(--s3); }
.promo-copy p:last-child { margin: 0; color: var(--muted); font-size: var(--fs-md); }
.article-promo .button { flex-shrink: 0; }
.float-cta { position: fixed; right: var(--s6); bottom: calc(var(--s6) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-float); display: inline-flex; align-items: center; justify-content: center; gap: var(--s4); min-height: var(--button-height); padding: var(--s3) var(--s4); background: var(--panel); color: var(--accent-dark); border: var(--hairline) solid var(--border); border-radius: var(--radius); box-shadow: var(--fact-shadow); font-size: var(--fs-sm); }
.float-cta:hover { border-color: var(--accent); }
.float-cta svg { width: var(--s4); height: var(--s4); }
body:has(.float-cta)::after { content: ''; display: block; height: calc(var(--float-clearance) + env(safe-area-inset-bottom, 0px)); }
.demo-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); margin-block: var(--s6); }
.swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.swatch { padding: var(--s3); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--panel); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.swatch::before { content: ''; display: block; height: var(--swatch-height); border: var(--hairline) solid var(--edge-low); border-radius: var(--radius); margin-bottom: var(--s3); }
.swatch-bg::before { background: var(--bg); }
.swatch-panel::before { background: var(--panel); }
.swatch-recess::before { background: var(--recess); }
.swatch-border::before { background: var(--border); }
.swatch-accent::before { background: var(--accent); }
.swatch-accent-dark::before { background: var(--accent-dark); }
.swatch-text::before { background: var(--text); }
.swatch-muted::before { background: var(--muted); }
.swatch-success::before { background: var(--success); }
.swatch-warn::before { background: var(--warn); }
.swatch-error::before { background: var(--error); }
.swatch-white::before { background: var(--white); }
.swatch-haze::before { background: var(--warm-haze); }
.swatch-warm-shadow::before { background: var(--warm-shadow); }
.swatch-cool-shadow::before { background: var(--cool-shadow); }
.swatch-light::before { background: var(--edge-light); }
.swatch-low::before { background: var(--edge-low); }
.swatch-header::before { background: var(--header-wash); }
.swatch-badge::before { background: var(--badge-wash); }
.swatch-veil::before { background: var(--veil); }
.swatch-button-light::before { background: var(--button-light); }
.swatch-clear::before { background: var(--clear); }
.swatch-flag-red::before { background: var(--flag-red); }
.swatch-flag-blue::before { background: var(--flag-blue); }
.swatch-flag-white::before { background: var(--flag-white); }
.swatch-flag-japan::before { background: var(--flag-japan); }
.swatch-flag-hk::before { background: var(--flag-hk); }
.swatch-flag-sg::before { background: var(--flag-sg); }
.swatch-flag-uk::before { background: var(--flag-uk); }
.type-display { font: var(--regular) var(--fs-display)/var(--line-title) var(--display); letter-spacing: var(--tracking-cjk); }
.motion-line-mask { display: block; overflow: clip; }
.motion-line { display: block; }
@media (min-width: 1441px) { .hero { padding-top: var(--s12); } }
@media (max-width: 1350px) {
  .access-tray { width: calc(100% - var(--side-clearance-medium)); }
  .fact-note { width: var(--fact-width-medium); }
  .route-card { gap: var(--s2); }
}
@media (max-width: 1150px) {
  .access-tray { width: calc(100% - var(--side-clearance-small)); padding: var(--s5); }
  .fact-note { width: var(--fact-width-small); padding: var(--s4); }
  .tray-heading { flex-wrap: wrap; gap: var(--s3); }
  .tray-groups { width: 100%; justify-content: center; }
  .route-card { flex-direction: column; gap: var(--s2); padding: var(--s2); }
  .hero { padding-left: var(--s6); padding-right: var(--s6); }
  .download-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .access-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .access-tray { width: 100%; grid-column: 1 / -1; }
  .fact-note { position: static; width: auto; transform: none; display: flex; align-items: center; gap: var(--s3); padding: var(--s4); }
  .fact-note svg { margin: 0; }
  .fact-note strong { font-size: var(--fs-md); }
  .tray-heading { flex-wrap: nowrap; }
  .tray-groups { width: auto; }
  .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .float-cta { bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px)); right: var(--s4); }
}
@media (max-width: 768px) {
  .editorial-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-card { padding: var(--s6); }
  .feature-card h3 { font-size: var(--fs-mobile-number); }
  .article-promo { flex-direction: column; align-items: flex-start; padding: var(--s6); }
  .type-display { font-size: var(--fs-mobile); }
}
@media (max-width: 640px) {
  .hero { padding: var(--s8) var(--s4) 0; }
  .hero-actions { gap: var(--s3); }
  .hero-actions .button { flex: 1; max-width: var(--button-width); }
  .hero-description { font-size: var(--fs-md); max-width: 100%; margin: var(--s5) auto 0; text-wrap: pretty; }
  .trust-row { gap: var(--s4); flex-wrap: wrap; margin-top: var(--s3); }
  .coverage { margin-top: var(--s6); }
  .coverage-item { width: 33.333%; }
  .coverage-value { font-size: var(--fs-mobile-number); }
  .coverage-caption { font-size: var(--fs-xs); }
  .access-stage { margin-top: var(--s6); gap: var(--s3); }
  .access-tray { padding: var(--s4); min-height: 0; }
  .tray-heading { flex-wrap: wrap; }
  .tray-heading h2 { font-size: var(--fs-card); }
  .tray-groups { width: 100%; min-height: var(--s8); }
  .platform-grid, .route-grid { gap: var(--s2); }
  .platform-grid { margin-top: var(--s4); }
  .platform-card { min-height: var(--platform-height-mobile); gap: var(--s3); font-size: var(--fs-tiny); }
  .platform-card svg { width: var(--s6); height: var(--s6); }
  .route-card { font-size: var(--fs-xs); min-height: var(--route-height); gap: var(--s2); }
  .flag { width: var(--flag-width-mobile); height: var(--s5); }
  .route-heading span { font-size: var(--fs-tiny); }
  .tray-foot { align-items: flex-start; line-height: var(--line-body); }
  .tray-foot p { max-width: 60%; }
  .tray-foot a { flex-shrink: 0; }
  .fact-note { padding: var(--s3); gap: var(--s2); align-items: flex-start; transform: none; }
  .fact-note svg { width: var(--s5); height: var(--s5); }
  .fact-note p { font-size: var(--fs-xs); }
  .fact-note small { font-size: var(--fs-tiny); }
  .fact-note strong { font-size: var(--fs-md); }
  .coverage-strip { gap: var(--s3); padding: var(--s3) var(--s4); margin-top: var(--s6); flex-wrap: wrap; }
  .strip-divider { width: var(--s3); }
  .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inset-stage { padding: var(--s4); }
  .inset-card + .inset-card { margin-left: var(--s3); }
  .swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-item { padding-inline: var(--s4); }
  .chrome-content { padding: var(--s5); }
}