.hero {
  max-width: 100%;
  overflow-x: clip;
  background: linear-gradient(180deg,var(--ambient-top),var(--ambient-bottom));
  padding-top: var(--s7);
  padding-bottom: var(--s6);
}
.hero-grid { display: grid; grid-template-columns: 1.14fr 1fr; column-gap: var(--s8); row-gap: var(--s6); align-items: center; }
.hero-grid > * { min-width: 0; }
.intro { position: relative; z-index: 1; min-width: 0; }
.eyebrow { display: inline-flex; padding: var(--s1) var(--s2); border-radius: var(--radius); background: var(--tint); color: var(--accent-dark); font-size: var(--text-sm); font-weight: var(--semibold); line-height: var(--leading-label); }
.title-name { display: block; margin-bottom: var(--s1); }
.title-subject { display: block; }
.hero-actions { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.description { max-width: 100%; font-size: var(--text-body); line-height: var(--leading-body); color: var(--muted); }
.description strong { color: var(--text); font-weight: var(--semibold); }
.trust { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); font-size: var(--text-sm); color: var(--muted); }
.trust li { display: flex; align-items: center; gap: var(--s1); white-space: nowrap; }
.trust svg { width: var(--s2); height: var(--s2); color: var(--accent); }
.device { position: relative; height: var(--device-height); min-width: 0; isolation: isolate; }
.device-slab { position: absolute; inset: var(--s3) 0 var(--s2) var(--s2); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg,var(--slab-top),var(--slab-mid) 52%,var(--slab-bottom)); box-shadow: var(--shadow-slab); }
.access-pill { position: absolute; top: var(--s6); left: var(--s7); right: var(--s4); min-height: var(--s8); display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s2); border: var(--hairline) solid var(--glow-edge); border-radius: var(--radius-pill); color: var(--accent); background: linear-gradient(110deg,var(--bg),var(--tint)); box-shadow: var(--shadow-glow); z-index: 3; }
.access-pill svg { width: var(--s4); height: var(--s4); }
.access-pill span { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); font-weight: var(--medium); }
.access-card { position: absolute; top: var(--access-top); left: var(--s4); right: var(--s6); padding: var(--s3); border: var(--hairline) solid var(--white-glass); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-card); z-index: 2; }
.card-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.card-title { font-size: var(--text-base); font-weight: var(--bold); }
.card-caption { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); }
.platform-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--s0); }
.platform-tabs span { padding: var(--s1) 0; text-align: center; border: var(--hairline) solid var(--border); border-radius: var(--radius-small); background: var(--panel); font-size: var(--text-xs); font-weight: var(--medium); }
.coverage { display: grid; grid-template-columns: 1fr 1fr; margin: var(--s2) 0; padding: var(--s2) 0; border-bottom: var(--hairline) solid var(--border); }
.coverage div { display: flex; align-items: baseline; gap: var(--s1); }
.coverage div + div { padding-left: var(--s3); border-left: var(--hairline) solid var(--border); }
.coverage strong { font-family: var(--font); font-size: var(--text-metric); font-weight: var(--heavy); line-height: var(--leading-metric); letter-spacing: var(--tracking-title); color: var(--accent-dark); }
.coverage span { color: var(--muted); font-size: var(--text-sm); }
.fact-line { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); font-size: var(--text-sm); }
.fact-line + .fact-line { margin-top: var(--s1); }
.fact-line dt { color: var(--muted); }
.fact-line dd { font-weight: var(--semibold); }
.refund-card { position: absolute; bottom: var(--s4); right: var(--s4); display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--bg); border: var(--hairline) solid var(--white-glass); border-radius: var(--radius); box-shadow: var(--shadow-card); font-size: var(--text-sm); font-weight: var(--semibold); z-index: 4; }
.refund-icon { display: grid; place-items: center; background: var(--tint); color: var(--accent); border-radius: var(--radius); width: var(--s4); height: var(--s4); flex-shrink: 0; }
.refund-icon svg { width: var(--icon-size); height: var(--icon-size); }
.identity-band { grid-column: 1/-1; border-top: var(--hairline) solid var(--border); border-bottom: var(--hairline) solid var(--border); }
.identity-row { display: grid; grid-template-columns: var(--identity-label) 1fr; align-items: center; min-height: var(--s8); gap: var(--s3); }
.identity-row + .identity-row { border-top: var(--hairline) solid var(--border); }
.row-label { font-size: var(--text-sm); color: var(--muted); display: flex; align-items: center; gap: var(--s2); }
.row-label::before { content: ''; width: var(--s2); height: var(--hairline); background: var(--glow-edge); flex-shrink: 0; }
.platform-list,.flag-list { display: grid; align-items: center; gap: var(--s2); }
.platform-list { grid-template-columns: repeat(5,minmax(0,1fr)); }
.flag-list { grid-template-columns: repeat(6,minmax(0,1fr)); }
.platform-list li,.flag-list li { display: flex; align-items: center; justify-content: center; gap: var(--s1); min-width: 0; font-size: var(--text-sm); font-weight: var(--medium); }
.platform-list svg { width: var(--icon-size); height: var(--icon-size); color: var(--text); }
.flag-list svg,.flag-inline svg { width: var(--flag-width); height: var(--flag-height); border-radius: var(--radius-small); overflow: hidden; box-shadow: 0 0 0 var(--hairline) var(--border); }
.flag-white { fill: var(--bg); }
.flag-red { fill: var(--flag-red); }
.flag-blue { fill: var(--flag-blue); }
.flag-fr-blue { fill: var(--flag-fr-blue); }
.flag-hk-red { fill: var(--flag-hk-red); }
.flag-stripes { fill: none; stroke: var(--flag-red); stroke-width: 2; }
.icon-bank { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.flag-inline { display: inline-flex; align-items: center; gap: var(--s1); }
.tabs { min-width: 0; }
.topic-tabs,[role="tablist"] { display: flex; gap: var(--s2); overflow-x: auto; max-width: 100%; padding: var(--s1) var(--s0); margin-bottom: var(--s4); overscroll-behavior-inline: contain; scrollbar-width: thin; }
[role="tab"] { flex: 1 0 auto; display: inline-flex; justify-content: center; align-items: center; min-height: var(--button-height); padding: var(--s2) var(--s3); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-weight: var(--semibold); font-size: var(--text-base); }
[role="tab"][aria-selected="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); box-shadow: var(--shadow-button); }
[role="tabpanel"] { min-width: 0; }
.topic-detail { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s6); align-items: start; }
.topic-detail > * { min-width: 0; }
.topic-copy { display: grid; gap: var(--s3); }
.topic-copy p { color: var(--muted); font-size: var(--text-body); }
.fact-stage { padding: var(--s4); border-radius: var(--radius); background: linear-gradient(145deg,var(--slab-top),var(--slab-bottom)); box-shadow: inset 0 0 0 var(--hairline) var(--white-glass); }
.fact-stage .card + .card { margin-top: var(--s3); margin-left: var(--s3); }
.toc-tabs { position: sticky; top: var(--toc-offset); z-index: var(--layer-toc); display: flex; gap: var(--s1); padding: var(--s1); margin-block: var(--s4); max-width: 100%; overflow-x: auto; background: var(--bg); border: var(--hairline) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft); overscroll-behavior-inline: contain; scrollbar-width: thin; }
.toc-tabs a { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: var(--tap-size); padding: var(--s1) var(--s2); border-radius: var(--radius-small); color: var(--text); font-size: var(--text-sm); }
.toc-tabs a.is-current { background: var(--tint); color: var(--accent-dark); font-weight: var(--bold); }
.toc-tabs.toc-static { position: static; }
body:has(.toc-tabs) section[id] { scroll-margin-top: var(--anchor-offset); }
.faq-list { border-top: var(--hairline) solid var(--border); }
.faq-item { border-bottom: var(--hairline) solid var(--border); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: var(--s8); padding: var(--s2) var(--s1); font-weight: var(--semibold); list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--accent); font-size: var(--text-logo); flex-shrink: 0; }
.faq-item[open] summary::after { content: '−'; }
.faq-item > p,.faq-answer { padding: var(--s1) var(--s1) var(--s3); max-width: var(--reading-width); color: var(--muted); }
.plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s3); }
.plan-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); padding: var(--s4); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-soft); }
.plan-card.is-current { border-color: var(--accent); background: linear-gradient(180deg,var(--tint),var(--bg)); box-shadow: var(--shadow-card); }
.plan-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1); }
.plan-price { font-family: var(--font-display); font-size: var(--text-metric); line-height: var(--leading-metric); font-weight: var(--heavy); letter-spacing: var(--tracking-title); color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.plan-price small { font-size: var(--text-sm); font-weight: var(--medium); letter-spacing: normal; color: var(--muted); }
.plan-facts { display: grid; gap: var(--s1); color: var(--muted); }
.plan-card .btn { margin-top: auto; width: 100%; }
.badge,.tag { display: inline-flex; align-items: center; gap: var(--s1); max-width: 100%; padding: var(--s0) var(--s1); border-radius: var(--radius-small); background: var(--tint); color: var(--accent-dark); font-size: var(--text-xs); font-weight: var(--semibold); overflow-wrap: anywhere; white-space: normal; }
.badge-value { background: var(--accent); color: var(--bg); }
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--bg); }
.data-table { width: 100%; min-width: var(--table-width); border-collapse: collapse; text-align: left; font-size: var(--text-sm); }
.data-table caption { text-align: left; padding: var(--s2) var(--s3); color: var(--text); font-weight: var(--bold); }
.data-table th,.data-table td { padding: var(--s2) var(--s3); border-bottom: var(--hairline) solid var(--border); vertical-align: top; }
.data-table thead th { background: var(--panel-2); color: var(--text); font-weight: var(--bold); }
.data-table tbody th { color: var(--text); font-weight: var(--semibold); }
.data-table tbody:last-child tr:last-child > * { border-bottom: 0; }
.region-row th { background: var(--tint); color: var(--accent-dark); }
.prose > .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
.table-note { margin-top: var(--s2); color: var(--muted); font-size: var(--text-sm); }
.platform-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--s2); }
.platform-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); padding: var(--s3); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--bg); }
.platform-card > svg { width: var(--s4); height: var(--s4); color: var(--text); }
.platform-card .btn { margin-top: auto; width: 100%; font-size: var(--text-sm); padding: var(--s1); min-height: var(--tap-size); }
.post-card { min-width: 0; padding: var(--s4); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: linear-gradient(160deg,var(--bg),var(--panel)); box-shadow: inset 0 0 0 var(--hairline) var(--white-glass); }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); font-size: var(--text-xs); color: var(--muted); }
.post-card h3 { margin-bottom: var(--s2); }
.post-card p { color: var(--muted); margin-bottom: var(--s3); }
.post-card a:hover { color: var(--accent-dark); }
.article-lead { position: relative; padding: var(--s5) var(--s5) var(--s5) var(--s7); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: linear-gradient(130deg,var(--tint),var(--panel)); }
.article-lead::before { content: ''; position: absolute; left: var(--s3); top: var(--s3); bottom: var(--s3); width: var(--s0); border-radius: var(--radius-pill); background: linear-gradient(var(--accent),var(--glow-edge)); }
.callout { margin: 0; padding: var(--s3); border-left: var(--s0) solid var(--accent); border-radius: var(--radius-small); background: var(--tint); color: var(--accent-dark); }
.promo-block,.cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5); border-radius: var(--radius); background: var(--text); color: var(--bg); }
.promo-block p,.cta-band p { margin-top: var(--s1); color: var(--panel-2); }
.promo-block .btn,.cta-band .btn { flex-shrink: 0; }
.float-cta { position: fixed; right: var(--s3); bottom: calc(var(--s3) + env(safe-area-inset-bottom,0px)); z-index: var(--layer-float); display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: var(--tap-size); max-width: calc(100% - var(--s3) - var(--s3)); padding: var(--s1) var(--s2); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--accent-dark); box-shadow: var(--shadow-soft); font-size: var(--text-sm); font-weight: var(--semibold); }
.float-cta svg { width: var(--s2); height: var(--s2); }
.float-cta:hover { border-color: var(--accent); }
body:has(.float-cta)::after { content: ''; display: block; height: calc(var(--float-clearance) + env(safe-area-inset-bottom,0px)); }
.draw-lines { width: 100%; height: var(--s8); color: var(--accent); overflow: hidden; }
.swatch-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--s2); }
.swatch { min-width: 0; padding: var(--s2); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--bg); font-family: var(--mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.swatch::before { content: ''; display: block; height: var(--s7); margin-bottom: var(--s2); border: var(--hairline) solid var(--border); border-radius: var(--radius-small); background: var(--sample-color,var(--bg)); }
.swatch[data-token="bg"] { --sample-color: var(--bg); }
.swatch[data-token="panel"] { --sample-color: var(--panel); }
.swatch[data-token="panel-2"] { --sample-color: var(--panel-2); }
.swatch[data-token="border"] { --sample-color: var(--border); }
.swatch[data-token="accent"] { --sample-color: var(--accent); }
.swatch[data-token="accent-dark"] { --sample-color: var(--accent-dark); }
.swatch[data-token="text"] { --sample-color: var(--text); }
.swatch[data-token="muted"] { --sample-color: var(--muted); }
.swatch[data-token="success"] { --sample-color: var(--success); }
.swatch[data-token="warn"] { --sample-color: var(--warn); }
.swatch[data-token="error"] { --sample-color: var(--error); }
.swatch[data-token="tint"] { --sample-color: var(--tint); }
.swatch[data-token="slab-top"] { --sample-color: var(--slab-top); }
.swatch[data-token="slab-mid"] { --sample-color: var(--slab-mid); }
.swatch[data-token="slab-bottom"] { --sample-color: var(--slab-bottom); }
.swatch[data-token="slab-edge"] { --sample-color: var(--slab-edge); }
.swatch[data-token="glow-edge"] { --sample-color: var(--glow-edge); }
.swatch[data-token="white-glass"] { --sample-color: var(--white-glass); }
.swatch[data-token="ambient-top"] { --sample-color: var(--ambient-top); }
.swatch[data-token="ambient-bottom"] { --sample-color: var(--ambient-bottom); }
.swatch[data-token="veil"] { --sample-color: var(--veil); }
.swatch[data-token="flag-red"] { --sample-color: var(--flag-red); }
.swatch[data-token="flag-blue"] { --sample-color: var(--flag-blue); }
.swatch[data-token="flag-fr-blue"] { --sample-color: var(--flag-fr-blue); }
.swatch[data-token="flag-hk-red"] { --sample-color: var(--flag-hk-red); }
.sample-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.sample-mast { background: var(--bg); }
.sample-language { position: relative; font-size: var(--text-sm); color: var(--muted); }
.sample-language summary { min-height: var(--tap-size); display: flex; align-items: center; cursor: pointer; white-space: nowrap; }
.sample-language .language-list { z-index: var(--layer-drawer); }
.sample-label { font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--s2); }
@media (min-width:1500px) {
  .hero { padding-top: var(--s9); padding-bottom: var(--s9); }
}
@media (max-width:1200px) {
  .hero-grid { column-gap: var(--s4); grid-template-columns: 1.05fr 1fr; }
  .trust { gap: var(--s2); flex-wrap: wrap; }
  .access-card { left: var(--s3); right: var(--s3); padding: var(--s2); }
  .access-pill { left: var(--s4); right: var(--s2); }
  .access-pill span { letter-spacing: var(--tracking-label-tablet); }
  .identity-row { grid-template-columns: var(--identity-label-tablet) 1fr; }
  .coverage div + div { padding-left: var(--s2); }
  .platform-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .intro { max-width: var(--intro-width); }
  .device { grid-row: 3; width: 100%; max-width: var(--device-width); justify-self: center; }
  .identity-band { grid-row: 2; }
  .hero { padding-top: var(--s5); }
  .trust { flex-wrap: nowrap; }
  .identity-row { grid-template-columns: 1fr; gap: var(--s2); padding-top: var(--s3); padding-bottom: var(--s3); }
  .platform-list li,.flag-list li { flex-direction: column; }
  .access-card { left: var(--s4); right: var(--s6); padding: var(--s3); }
  .topic-detail { grid-template-columns: 1fr; gap: var(--s4); }
  .plan-grid { grid-template-columns: 1fr; }
  .promo-block,.cta-band { align-items: flex-start; flex-direction: column; }
  .sample-mast .mast-inner { flex-wrap: wrap; }
  .sample-mast .nav { display: flex; overflow-x: auto; justify-content: flex-start; padding-block: var(--s1); }
  .sample-mast .account { margin-left: auto; }
}
@media (max-width:640px) {
  .hero { padding-top: var(--s4); padding-bottom: var(--s9); }
  .hero-grid { row-gap: var(--s4); }
  .hero-actions { gap: var(--s1); }
  .hero-actions .btn { flex: 1; }
  .description { font-size: var(--text-base); }
  .trust { display: grid; grid-template-columns: 1fr; gap: var(--s1); }
  .trust li { white-space: normal; }
  .identity-row { padding-top: var(--s2); padding-bottom: var(--s2); gap: var(--s2); }
  .platform-list,.flag-list { gap: var(--s1); }
  .platform-list li,.flag-list li { font-size: var(--text-xs); gap: var(--s1); }
  .row-label { font-size: var(--text-xs); }
  .device { height: var(--device-mobile-height); }
  .device-slab { inset: var(--s2) 0 var(--s2); }
  .access-pill { top: var(--s5); left: var(--s2); right: var(--s2); gap: var(--s1); padding: var(--s1); }
  .access-pill span { font-size: var(--text-xs); letter-spacing: var(--tracking-label-mobile); }
  .access-pill svg { width: var(--icon-size); height: var(--icon-size); }
  .access-card { top: var(--access-mobile-top); left: var(--s2); right: var(--s2); padding: var(--s2); }
  .card-heading { gap: var(--s1); flex-wrap: wrap; }
  .coverage strong { font-size: var(--text-logo); }
  .coverage div + div { padding-left: var(--s2); }
  .coverage span { font-size: var(--text-xs); }
  .platform-tabs span { font-size: var(--text-xs); letter-spacing: var(--tracking-title); }
  .refund-card { right: var(--s2); bottom: var(--s3); padding: var(--s1) var(--s2); }
  .float-cta { right: var(--s2); bottom: calc(var(--s2) + env(safe-area-inset-bottom,0px)); }
  .topic-copy p { font-size: var(--text-base); }
  .fact-stage,.plan-card,.post-card,.promo-block,.cta-band { padding: var(--s3); }
  .fact-stage .card + .card { margin-left: 0; }
  .platform-grid,.swatch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .platform-card { padding: var(--s2); }
  .article-lead { padding: var(--s3) var(--s3) var(--s3) var(--s5); }
  .article-lead::before { left: var(--s2); }
}