/* MACOMX — white institutional design system (direction B: gateway).

   The page is white everywhere. Weight comes from photography, from generous section rhythm and from
   one accent (the deep teal of the logo's left leg). Signal colours are reserved for market data.
   Fonts are self-hosted: no Google Fonts request, because the site has to load from mainland China.

   House rules this file has to keep (each one is a bug we already shipped once):
     · a padding shorthand on a class that also carries .wrap wipes out the side gutter (use padding-block)
     · position: fixed inside an ancestor with filter/transform/backdrop-filter is not fixed to the viewport
     · auto-repeat tracks may only sit beside fixed-size tracks, or the browser drops the whole declaration
     · images need height: auto, or a width/height attribute pair letterboxes them
     · touch targets are 44px and phone text never goes under 11px
*/

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/schibsted-var.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex-mono-600.woff2") format("woff2"); }

:root {
  --paper: #ffffff;
  --tint: #f3f6f7;          /* quiet section */
  --tint-2: #eaf1f0;        /* teal-leaning panel */
  --ink: #122431;
  --ink-2: #4a5a66;
  --ink-3: #78868f;
  --line: #e3e8ec;
  --line-2: #ccd6dc;
  --teal: #1b5a55;
  --teal-2: #237069;
  --gold: #a98b52;
  --bid: #17684d;
  --ask: #9c3030;
  --live: #1c8257;
  --pending: #8a6212;
  --steel: #35628c;
  --sans: "Schibsted Grotesk", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 76px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16.5px/1.62 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px;
  transform: translateY(-160%); transition: transform .2s var(--ease); }
.skip:focus { transform: none; }
.num, .mkt td, .stat-value, .pd-q strong { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

h1 { font-size: clamp(2.35rem, 4.4vw, 3.9rem); font-weight: 700; line-height: 1.04; letter-spacing: -.028em; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 2.9vw, 2.6rem); font-weight: 700; line-height: 1.14; letter-spacing: -.022em; text-wrap: balance; }
h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.25; letter-spacing: -.012em; text-wrap: balance; }
h4 { font-size: 1rem; font-weight: 700; }
html[lang="zh"] h1, html[lang="zh"] h2 { letter-spacing: 0; line-height: 1.24; }
html[lang="zh"] main :is(h1, h2, h3, h4, .lede) { word-break: keep-all; overflow-wrap: anywhere; }
p { text-wrap: pretty; }
.lede { margin-top: 18px; font-size: 1.0625rem; color: var(--ink-2); max-width: 62ch; text-wrap: balance; }

/* ═══ STATUS STRIP ═══ */
.strip { background: var(--tint); border-bottom: 1px solid var(--line); font-size: .8125rem; color: var(--ink-2); }
.strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 38px; }
.strip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-right: 9px; vertical-align: 1px; }
.strip .updated { font-family: var(--mono); font-size: .75rem; letter-spacing: .03em; color: var(--ink-3); }

/* ═══ NAV ═══ */
.nav { position: sticky; top: 0; z-index: 90; background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 30px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 54px; width: auto; }
.nav-links { display: flex; gap: 26px; margin-left: 8px; }
.nav-links a { font-size: .9375rem; font-weight: 500; color: var(--ink-2); padding: 8px 0; position: relative; transition: color .2s var(--ease); white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--teal);
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-act { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-login { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.nav-login:hover { color: var(--ink); }
.nav-toggle { display: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  font: 600 .9375rem/1 var(--sans); border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  cursor: pointer; white-space: nowrap; border-radius: 3px;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn:hover { border-color: var(--teal); color: var(--teal); }
.btn-fill { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-fill:hover { background: var(--teal-2); border-color: var(--teal-2); color: #fff; }
.btn-ghost { background: transparent; }
.btn-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-light:hover { background: #fff; border-color: #fff; color: var(--teal); }
.btn-line { background: transparent; border-color: rgba(255, 255, 255, .65); color: #fff; }
.btn-line:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }

/* ═══ LANGUAGE SWITCH — both options always visible, so a reader can see which one they are on ═══ */
.lang { display: inline-flex; flex: none; border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; }
.lang a { display: flex; align-items: center; justify-content: center; padding: 0 12px; min-height: 40px;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; color: var(--ink-2); transition: background .2s, color .2s; }
.lang a + a { border-left: 1px solid var(--line-2); }
.lang a:hover { background: var(--tint); color: var(--ink); }
.lang a.on { background: var(--ink); color: #fff; }

/* ═══ HERO — one photograph, carrying the whole first screen ═══ */
.hero { position: relative; min-height: min(720px, calc(100dvh - var(--nav-h))); display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; background: #0d1c26; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 24, 32, .8) 0%, rgba(8, 24, 32, .45) 48%, rgba(8, 24, 32, .05) 82%),
              linear-gradient(0deg, rgba(8, 24, 32, .55), rgba(8, 24, 32, 0) 46%); }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-block: clamp(64px, 12vh, 132px) clamp(52px, 9vh, 92px); }
.hero-tag { font-size: .9375rem; font-weight: 600; letter-spacing: .03em; color: rgba(255, 255, 255, .92); }
.hero h1 { margin-top: 18px; max-width: 17ch; }
html[lang="zh"] .hero h1 { max-width: 15ch; }
.hero-support { margin-top: 22px; font-size: 1.0625rem; color: rgba(255, 255, 255, .88); max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-meta { margin-top: 30px; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

/* ═══ SECTIONS ═══ */
.section { padding: clamp(60px, 7vw, 108px) 0; }
.section.alt { background: var(--tint); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 28px; flex-wrap: wrap; }
.sec-head p { color: var(--ink-2); max-width: 58ch; margin-top: 14px; }
.sec-top { margin-top: 0; }
.label { display: inline-block; font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 14px; }
.fnote { margin-top: 26px; font-size: .875rem; color: var(--ink-3); }

/* ═══ PHOTO BANDS ═══ */
.photo-band { position: relative; overflow: hidden; }
.photo-band img { width: 100%; height: clamp(300px, 40vw, 560px); object-fit: cover; object-position: 50% 62%; }
.photo-band .wrap { position: absolute; inset: auto 0 0 0; padding-block: clamp(28px, 4vw, 52px); color: #fff; z-index: 1; }
.photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 24, 32, .86), rgba(8, 24, 32, .1) 62%); }
.photo-band h2 { max-width: 20ch; }
.photo-band p { margin-top: 14px; color: rgba(255, 255, 255, .88); max-width: 56ch; }
.split { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ═══ MARKET TABLE ═══ */
.mkt-wrap { border: 1px solid var(--line); background: #fff; }
.mkt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.mkt-bar .label { color: var(--ink-2); margin-bottom: 0; }
.mkt-stamp { margin-left: auto; font-family: var(--mono); font-size: .6875rem; letter-spacing: .05em; color: var(--ink-3); }
.mkt-stamp [data-updated] { white-space: nowrap; }
.mkt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mkt { width: 100%; min-width: 880px; }
.mkt--full { min-width: 1120px; }
.mkt.mkt--full th, .mkt.mkt--full td { padding-left: 7px; padding-right: 7px; }   /* 12 columns have to fit 1166px at 1440 */
.mkt--full .prod-sub { display: block; margin-top: 3px; }
.mkt th { font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); text-align: right; padding: 12px 14px; background: var(--tint); border-bottom: 1px solid var(--line); white-space: nowrap; }
.mkt th:first-child, .mkt th.tl { text-align: left; }
.mkt td { font-size: .875rem; color: var(--ink); text-align: right; padding: 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mkt td:first-child, .mkt td.tl { text-align: left; }
.mkt tbody tr { transition: background .18s var(--ease); }
.mkt tbody tr:hover { background: var(--tint); }
.mkt tbody tr:last-child td { border-bottom: 0; }
.mkt .prod { font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }
.mkt .prod-sub { font-family: var(--mono); font-size: .6875rem; color: var(--ink-3); }
.mkt .none { color: var(--ink-3); }
.mkt .bid { color: var(--bid); font-weight: 500; }
.mkt .ask { color: var(--ask); font-weight: 500; }
.mkt tbody a { border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.mkt tbody tr:hover a { border-color: var(--line-2); }
.mkt td.empty { text-align: left; color: var(--ink-2); padding: 26px 16px; white-space: normal; }
.mkt td.empty a { color: var(--teal); font-weight: 600; border-bottom: 1px solid currentColor; }
.onboard { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.bars span { width: 2px; height: 4px; background: var(--ink-3); animation: stretch 1.8s ease infinite both; }
.bars span:nth-child(2) { animation-delay: .15s; }
.bars span:nth-child(3) { animation-delay: .3s; }
.mkt tbody tr.stream { animation: rowin .5s var(--ease) both; }
.mkt-foot { padding: 14px 18px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-2); }
.mkt-foot a { color: var(--teal); font-weight: 600; border-bottom: 1px solid currentColor; }

/* ═══ BADGES ═══ */
.badge { display: inline-block; font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line-2); color: var(--ink-2); background: #fff; white-space: nowrap; }
.b-official { color: var(--steel); border-color: color-mix(in srgb, var(--steel) 35%, #fff); background: color-mix(in srgb, var(--steel) 7%, #fff); }
.b-reference { color: var(--ink-2); }
.b-direct { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 35%, #fff); background: color-mix(in srgb, var(--teal) 7%, #fff); }
.b-firm, .b-verified { color: var(--bid); border-color: color-mix(in srgb, var(--bid) 38%, #fff); background: color-mix(in srgb, var(--bid) 7%, #fff); }
.b-indicative { color: var(--pending); border-color: color-mix(in srgb, var(--pending) 38%, #fff); background: color-mix(in srgb, var(--pending) 8%, #fff); }

/* ═══ STAT CARDS ═══ */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.stat { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; padding: 26px 24px 22px; }
.stat-value { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.stat-name { margin-top: 12px; font-size: .9375rem; font-weight: 600; }
.stat-note { margin-top: 6px; font-size: .875rem; color: var(--ink-2); }
.stat-src { margin-top: auto; padding-top: 18px; font-family: var(--mono); font-size: .6875rem; line-height: 1.7;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.stat-src a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.stat-src a:hover { color: var(--teal); text-decoration-color: currentColor; }
.src-pending { color: var(--pending); }
.stat .badge { align-self: flex-start; margin-bottom: 14px; }

/* ═══ DATA-TYPE CARDS ═══ */
.types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
/* 5 cards in a 4-column grid strand one on its own row; 3 columns read as 3 + 2.
   Scoped to the desktop range on purpose: :has() raises specificity above the responsive
   rules below, so an unscoped version would keep three columns on a phone and blow the page open. */
@media (min-width: 1081px) {
  .stats:has(> :nth-child(5)):not(:has(> :nth-child(7))),
  .types:has(> :nth-child(5)):not(:has(> :nth-child(7))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.type { border: 1px solid var(--line); background: #fff; padding: 26px 24px; }
.type .badge { margin-bottom: 14px; }
.type h3 { font-size: 1.125rem; }
.type p { margin-top: 10px; font-size: .9375rem; color: var(--ink-2); }
.type .fields { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--mono);
  font-size: .6875rem; line-height: 1.75; color: var(--ink-3); }

/* ═══ MAP ═══ */
.map { position: relative; margin-top: 32px; border: 1px solid var(--line); background: var(--tint); padding: clamp(14px, 2vw, 26px); }
.map-canvas { position: relative; }
.map-canvas img { width: 100%; }
.map-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-arcs path { fill: none; stroke: var(--teal); stroke-width: .8; opacity: .38;
  stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.map.in .map-arcs path { animation: draw 2.4s var(--ease) both; }
.pin { position: absolute; width: 10px; height: 10px; transform: translate(-50%, -50%); }
.pin i { display: block; width: 9px; height: 9px; margin: .5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.pin.is-tracked i { background: var(--steel); }
.pin.is-idle i { background: var(--ink-3); }
.map-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.map-key span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.key-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--steel); }
.nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; margin-top: 40px; }
.node-col h4 { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.node-col li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.node-note { margin-top: 16px; font-size: .875rem; color: var(--ink-2); }

/* ═══ FLOW ═══ */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.step { border: 1px solid var(--line); background: #fff; padding: 26px 24px; }
.step-n { display: inline-grid; place-items: center; min-width: 34px; height: 34px; border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: .8125rem; color: var(--teal); margin-bottom: 16px; }
.step h3 { font-size: 1.125rem; }
.step p { margin-top: 10px; font-size: .9375rem; color: var(--ink-2); }
.step b { font-weight: 600; }

/* ═══ CTA BAND ═══ */
.band { background: var(--tint-2); padding: clamp(56px, 6vw, 92px) 0; }
.band h2 { max-width: 20ch; }
.band p { margin-top: 16px; color: var(--ink-2); max-width: 56ch; }
.band .hero-cta { margin-top: 30px; }

/* ═══ FOOTER ═══ */
.foot { border-top: 1px solid var(--line); background: var(--tint); padding: clamp(48px, 5vw, 72px) 0 32px; font-size: .9375rem; color: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 34px; }
.foot .brand { font-family: var(--mono); font-size: 1.0625rem; font-weight: 600; letter-spacing: .14em; color: var(--ink); }
.foot h4 { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; }
.foot a:hover { color: var(--teal); }
.foot li { margin-bottom: 10px; font-size: .9375rem; }
.foot-note { margin-top: 16px; font-size: .875rem; line-height: 1.65; max-width: 46ch; }
.foot-bar { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap;
  gap: 10px 20px; align-items: center; font-family: var(--mono); font-size: .6875rem; letter-spacing: .05em; color: var(--ink-3); }
.foot-bar .sp { margin-left: auto; }

/* ═══ PAGE HEAD / CRUMB ═══ */
.page-head { padding: clamp(36px, 4.5vw, 64px) 0 clamp(26px, 3vw, 40px); }
.page-head h1 { font-size: clamp(2.1rem, 3.8vw, 3.2rem); margin-top: 14px; }
.crumb { display: flex; gap: 10px; align-items: center; padding-top: 22px; font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.crumb a:hover { color: var(--teal); }
.head-photo img { width: 100%; height: clamp(220px, 26vw, 380px); object-fit: cover; object-position: 50% 64%; }

/* ═══ BOOK TABS + FILTERS ═══ */
.book-tabs { display: flex; flex-wrap: wrap; }
.book-tab { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 0 18px; min-height: 46px; background: #fff; color: var(--ink-2); border: 1px solid var(--line); cursor: pointer; }
.book-tab + .book-tab { border-left: 0; }
.book-tab:hover { color: var(--ink); background: var(--tint); }
.book-tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.filters { display: flex; flex-wrap: wrap; gap: 26px; margin: 28px 0 22px; }
.filter .label { margin-bottom: 10px; color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .05em; padding: 0 14px; background: #fff;
  border: 1px solid var(--line-2); color: var(--ink-2); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip.on { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ═══ TWO-UP PANELS ═══ */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
.panel { border: 1px solid var(--line); background: #fff; padding: clamp(24px, 3vw, 36px); }
.panel .label { color: var(--ink-3); }
.panel h3 { font-size: 1.375rem; }
.panel p { margin-top: 12px; color: var(--ink-2); }
.panel ul { margin-top: 18px; }
.panel li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.panel li::before { content: "—"; color: var(--teal); }
.panel li:last-child { border-bottom: 0; }

/* ═══ LIST ROWS ═══ */
.soon { border: 1px solid var(--line); background: #fff; margin-top: 36px; }
.soon-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; }
.soon-item + .soon-item { border-top: 1px solid var(--line); }
.soon-item h3 { font-size: 1.0625rem; font-weight: 600; }
.soon-item p { margin-top: 4px; font-size: .875rem; color: var(--ink-2); }

/* ═══ PRODUCT DETAIL ═══ */
.pd { padding-block: 22px 10px; }
.pd-head { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.pd-head h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); margin-top: 12px; }
.pd-ident { margin-top: 14px; font-family: var(--mono); font-size: .875rem; color: var(--ink-2); }
.pd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pd-quote { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.pd-q { border: 1px solid var(--line); background: #fff; padding: 22px 24px; }
.pd-q .label { margin-bottom: 10px; color: var(--ink-3); }
.pd-q strong { display: block; font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }
.pd-q strong.none { color: var(--ink-3); font-size: 1.125rem; }
.pd-q strong.bid { color: var(--bid); }
.pd-q strong.ask { color: var(--ask); }
.pd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line);
  border-left: 1px solid var(--line); margin-top: 32px; }
.pd-field { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 20px; }
.pd-field dt { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pd-field dd { margin-top: 8px; font-size: .9375rem; }
.pd-sources { margin-top: 56px; }
.pd-note { margin-top: 14px; color: var(--ink-2); max-width: 64ch; }
.pd-layers { border: 1px solid var(--line); background: #fff; margin-top: 28px; }
.pd-layers li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: start; gap: 12px 20px; padding: 20px 24px; }
.pd-layers li + li { border-top: 1px solid var(--line); }
.pd-layers li:not(.has) { background: var(--tint); }
.pd-layers .badge { justify-self: start; margin-top: 2px; }
.pd-layers h3 { font-size: 1.0625rem; }
.pd-layers p { margin-top: 6px; font-size: .9375rem; color: var(--ink-2); }
.pd-layers .waiting { font-family: var(--mono); font-size: .8125rem; color: var(--ink-3); }
.pd-warn { display: flex; gap: 16px; align-items: flex-start; border-left: 3px solid var(--teal); background: var(--tint);
  padding: 20px 24px; margin-top: 32px; }
.pd-warn p { font-size: .9375rem; color: var(--ink-2); }
.pd-cta { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.load-err { padding: 40px 0; color: var(--ask); }

/* ═══ FORMS ═══ */
.form-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.form fieldset { border: 1px solid var(--line); background: #fff; padding: 26px 26px 10px; margin: 0 0 20px; }
.form legend { padding: 0 10px; margin-left: -10px; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.f { margin: 0 0 18px; min-width: 0; }
.f label { display: block; font-family: var(--mono); font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px; }
.f label b { color: var(--ask); font-weight: 400; }
.f label .opt { text-transform: none; letter-spacing: .02em; color: var(--ink-3); }
.f input, .f select, .f textarea { width: 100%; min-height: 48px; background: #fff; color: var(--ink);
  border: 1px solid var(--line-2); padding: 12px 14px; font: 400 .9375rem/1.4 var(--sans); border-radius: 3px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.f textarea { min-height: 120px; resize: vertical; }
.f input:hover, .f select:hover, .f textarea:hover { border-color: var(--ink-3); }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, #fff); }
.f input::placeholder, .f textarea::placeholder { color: var(--ink-3); }
.f select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.f.err input, .f.err select, .f.err textarea { border-color: var(--ask); }
.f .msg { display: block; margin-top: 6px; font-family: var(--mono); font-size: .6875rem; color: var(--ask); }
.fcheck { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; padding: 16px 18px; border: 1px solid var(--line); background: var(--tint); }
.fcheck.err { border-color: var(--ask); }
.fcheck input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--teal); }
.fcheck label { margin: 0; font-size: .9375rem; color: var(--ink-2); }
.fsubmit { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.form-status { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); background: var(--tint); font-size: .9375rem; }
.form-status.ok { border-color: color-mix(in srgb, var(--bid) 40%, #fff); background: color-mix(in srgb, var(--bid) 6%, #fff); color: var(--bid); }
.form-status.bad { border-color: color-mix(in srgb, var(--ask) 40%, #fff); background: color-mix(in srgb, var(--ask) 6%, #fff); color: var(--ask); }
.form-status.warn { border-color: color-mix(in srgb, var(--pending) 40%, #fff); color: var(--pending); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-aside { display: grid; gap: 18px; position: sticky; top: calc(var(--nav-h) + 20px); }
.form-aside .panel { padding: 24px 26px; }
.form-aside h3 { font-size: 1.0625rem; }
.form-aside p, .form-aside li { font-size: .9375rem; color: var(--ink-2); }

/* ═══ DATA GOVERNANCE PAGE ═══ */
.gov-hero { padding: clamp(40px, 5vw, 76px) 0 clamp(28px, 3vw, 44px); }
.gov-eyebrow { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.gov-hero h1 { margin-top: 16px; }
.gov-lead { margin-top: 20px; font-size: 1.0625rem; color: var(--ink-2); max-width: 64ch; }
.gov-body { margin-top: 16px; color: var(--ink-2); max-width: 64ch; }
.gov-note { margin-top: 26px; padding: 18px 22px; border-left: 3px solid var(--gold); background: var(--tint); font-size: .9375rem; color: var(--ink-2); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.cols-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.section.inst { background: var(--tint-2); }
.inst-title { max-width: 22ch; }
.inst-lead { margin-top: 18px; color: var(--ink-2); max-width: 62ch; }
.inst .type { background: #fff; }
.gov-closing { margin-top: 30px; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
html[lang="zh"] .gov-closing { letter-spacing: .05em; }
.gov-attr { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column;
  gap: 4px; font-size: .875rem; color: var(--ink-3); }
.gov-attr .brand { font-size: 1rem; color: var(--ink); font-weight: 700; letter-spacing: .04em; }

/* ═══ MOBILE ACTION BAR ═══ */
.mbar { display: none; }

/* ═══ REVEAL ═══ */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ═══ MOTION ═══ */
@keyframes rowin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: var(--len, 400); } to { stroke-dashoffset: 0; } }
@keyframes stretch { 0%, 100% { height: 4px; } 50% { height: 10px; } }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1340px) {
  .nav-links { gap: 20px; }
  .nav-in { gap: 22px; }
  .nav-act .btn-ghost, .nav-act .nav-login { display: none; }
}
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; order: 3; width: 44px; height: 44px;
    border: 1px solid var(--line-2); background: #fff; cursor: pointer; border-radius: 3px; }
  .nav-toggle span { display: block; width: 17px; height: 1.5px; background: var(--ink); position: relative; }
  .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ink); }
  .nav-toggle span::before { top: -5px; }
  .nav-toggle span::after { top: 5px; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { transition: transform .25s var(--ease), top .25s var(--ease), background .2s; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
  /* z 89: under the header (90) so its toggle stays tappable, over the action bar (88).
     The drawer is a sibling of <header> on purpose: the nav's backdrop-filter would otherwise become
     the containing block for this fixed layer and shrink it to the height of the bar. */
  .drawer { position: fixed; inset: 0; z-index: 89; background: #fff;
    padding: calc(var(--nav-h) + 38px + 16px) var(--gutter) 40px; overflow-y: auto; overscroll-behavior: contain; }
  .drawer[hidden] { display: none; }
  .drawer a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line); font-family: var(--mono);
    font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }
  .drawer .btn { display: flex; margin-top: 16px; }
  .drawer-lang { margin-top: 26px; }
  .drawer-lang .lang { display: flex; width: 100%; }
  .drawer-lang .lang a { flex: 1; border-bottom: 0; padding: 14px 0; font-size: .8125rem; text-transform: none; }
  .brand img { height: 48px; }
  .stats, .types, .cols-4, .cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-layout { grid-template-columns: 1fr; }
  .form-aside { position: static; }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .lang a { min-width: 44px; min-height: 44px; }
  .nav-act .btn { min-height: 44px; }
  .foot li a { display: inline-block; padding: 11px 0; min-width: 44px; }
  .foot li { margin-bottom: 0; }
  .crumb a { display: inline-block; padding: 14px 0; margin-block: -14px; min-width: 44px; }
  .stat-src a { padding: 16px 6px; margin-inline: -6px; }
  .fcheck label { display: block; padding-block: 11px; margin-block: -11px; }
  .mkt td.tl a { display: inline-block; min-height: 44px; }
}
@media (max-width: 900px) {
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { padding-bottom: 68px; }
  .strip .updated { display: none; }
  .hero { min-height: 560px; }
  .hero::after { background: linear-gradient(0deg, rgba(8, 24, 32, .86) 8%, rgba(8, 24, 32, .28) 72%); }
  .hero .wrap { padding-block: 100px 44px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .split, .two-up, .nodes, .stats, .types, .flow, .cols-3, .cols-4, .cols-5, .pd-quote, .pd-grid { grid-template-columns: 1fr; }
  .pd-layers li { grid-template-columns: 1fr; }
  .photo-band img { height: 300px; }
  .fgrid { grid-template-columns: 1fr; }
  .fsubmit .btn { flex: 1; }
  .form fieldset { padding: 20px 18px 4px; }
  .f input, .f select, .f textarea { font-size: 16px; }   /* iOS zooms a focused field under 16px */
  .nav-act .lang { display: none; }                        /* the drawer carries it at phone width */
  .nav-act .btn-fill { display: none; }                    /* the action bar already carries it */
  .badge, .stat-src, .pd-field dt, .mkt td::before { font-size: .6875rem; }

  .mkt-scroll { overflow: visible; }
  .mkt, .mkt--full { min-width: 0; }
  .mkt { display: block; }
  .mkt thead { display: none; }
  .mkt tbody, .mkt tr, .mkt td { display: block; }
  .mkt tr { padding: 18px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 18px; }
  .mkt tr:last-child { border-bottom: 0; }
  .mkt td { padding: 0; border: 0; text-align: left; display: flex; flex-direction: column; align-items: flex-start;
    gap: 4px; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
  .mkt.mkt--full td { padding-left: 0; padding-right: 0; }
  .mkt td::before { content: attr(data-l); font-family: var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
  .mkt td.row-head, .mkt td.empty { grid-column: 1 / -1; }
  .mkt td.row-head { display: block; padding-bottom: 12px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
  .mkt td.row-head::before { display: none; }
  .mkt td.row-head a { display: block; }
  .mkt .prod { font-size: 1.0625rem; }
  .mkt-stamp { margin-left: 0; }
  .book-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .book-tab { flex: none; }
  .filters { gap: 18px 0; flex-direction: column; }

  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .pd-warn { flex-direction: column; gap: 12px; }
  .pd-cta { flex-direction: column; }
  .pd-cta .btn { text-align: center; white-space: normal; }
  .soon-item { flex-direction: column; align-items: flex-start; gap: 10px; }

  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 88; border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .97); backdrop-filter: saturate(150%) blur(12px);
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
  .mbar .btn { flex: 1; text-align: center; padding: 0 8px; min-height: 44px; font-size: .75rem; letter-spacing: .06em; }
}
@media (max-width: 400px) {
  .stat, .type, .step, .panel { padding-left: 18px; padding-right: 18px; }
  .pd-cta .btn, .hero-cta .btn, .split .cta .btn { font-size: .8125rem; letter-spacing: .04em; padding-inline: 12px;
    white-space: normal; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
  .bars span { height: 7px; }
  .map-arcs path { stroke-dashoffset: 0; }
}
@media print { .nav, .strip, .mbar, .band { display: none; } }