/* ==========================================================================
   apple.css — content-page layer for the product pages and the product hub.
   Visual language: one idea per band, oversized photography, restrained type,
   generous vertical rhythm.

   Bilingual pairing is part of the layout and is driven by one switch:
   <html data-lang="en|zh" data-pair="off|on"> — the same pair markup used by
   main.css renders as a single language or as English-line-over-Chinese-line.
   Loaded after main.css; product pages carry the .ap body register.
   ========================================================================== */

:root {
  --ap-ink: #1d1d1f;
  --ap-ink-2: #424245;
  --ap-ink-3: #6e6e73;
  --ap-line: #d2d2d7;
  --ap-surface: #ffffff;
  --ap-surface-2: #f5f5f7;
  --ap-surface-3: #e8e8ed;
  --ap-dark: #000000;
  --ap-dark-2: #1d1d1f;
  --ap-blue: #0071e3;
  --ap-blue-hover: #0077ed;
  --ap-radius: 18px;
  --ap-radius-lg: 28px;
  --ap-band: clamp(64px, 5vw + 42px, 132px);
  --ap-measure: 692px;
  --ap-wide: 1024px;
  --ap-full: 1440px;
}

/* the product body opts out of the B2B register */
body.ap {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    system-ui, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ap-ink);
  background: var(--ap-surface);
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: -0.014em;
  -webkit-font-smoothing: antialiased;
  /* pair mode needs a quieter second colour than the B2B register provides */
  --ink-3: var(--ap-ink-3);
}
body.ap h1, body.ap h2, body.ap h3, body.ap h4 {
  letter-spacing: -0.028em;
  font-weight: 600;
  color: var(--ap-ink);
}
body.ap a { color: var(--ap-blue); }
body.ap a:hover { text-decoration: underline; }

/* Chinese typography in this register: no negative tracking, looser leading */
[data-lang="zh"] body.ap,
body.ap[data-lang="zh"] { letter-spacing: 0; line-height: 1.75; }
[data-lang="zh"] body.ap h1, [data-lang="zh"] body.ap h2, [data-lang="zh"] body.ap h3,
[data-lang="zh"] body.ap h4 { letter-spacing: -0.01em; }

/* --- bilingual pairs inside content bands ------------------------------- */
/* English leads at full emphasis; Chinese follows in a quieter token, close
   enough to read as one statement said twice. */
[data-pair="on"] .ap .hy-pair > .i18n-zh,
[data-pair="on"] body.ap .hy-pair > .i18n-zh {
  color: var(--ap-ink-3);
  font-size: .82em;
  line-height: 1.66;
  letter-spacing: 0;
  font-weight: 400;
}
[data-pair="on"] .ap-hero .hy-pair > .i18n-zh { font-size: clamp(15px, .5vw + 13px, 18px); }
[data-pair="on"] .hy-pair--inline > .i18n-zh { display: inline; font-size: .94em; margin-top: 0; }

/* the hero headline: the Chinese line is a subtitle, not a second headline */
[data-pair="on"] .ap-hero h1 .hy-pair > .i18n-zh {
  font-size: clamp(19px, 1.5vw + 12px, 30px);
  line-height: 1.3; letter-spacing: 0; font-weight: 500;
  color: var(--ap-ink-3); max-width: 26ch; margin: .35em auto 0;
}
[data-pair="on"] .ap-tagline .hy-pair > .i18n-zh,
[data-pair="on"] .ap-lede .hy-pair > .i18n-zh { font-size: .78em; }
[data-pair="on"] .ap-section-title .hy-pair > .i18n-zh {
  font-size: .5em; line-height: 1.4; font-weight: 500; margin-top: .38em;
}
[data-pair="on"] .ap-fam-title .hy-pair > .i18n-zh { font-size: .58em; margin-top: .3em; }
[data-pair="on"] .ap-tile h3 .hy-pair > .i18n-zh { font-size: .8em; margin-top: .22em; }
[data-pair="on"] .ap-spec-k .hy-pair > .i18n-zh { display: block; margin-top: .15em; font-size: .96em; }
[data-pair="on"] .ap-notes .i18n-zh { display: block; margin-top: .34em; font-size: .96em; }
[data-pair="on"] .ap-schematic figcaption .i18n-zh { display: block; margin-top: .25em; }
[data-pair="on"] .ap-chip .i18n-zh { color: var(--ap-ink-3); font-size: .94em; }

/* dark bands flip the secondary colour so it stays legible */
[data-pair="on"] .ap-band--dark .hy-pair > .i18n-zh { color: #a1a1a6; }
[data-pair="on"] .ap-band--dark .ap-section-title .hy-pair > .i18n-zh { color: #a1a1a6; }

/* table headers are dense: keep the pair on one line and centred */
[data-pair="on"] table.spec thead th .hy-pair--inline { justify-content: center; }
[data-pair="on"] table.spec thead th .i18n-zh { white-space: nowrap; }

/* buttons: the two sides stack, and no button ever changes height between modes */
.ap-cta--pill .hy-pair--inline { flex-direction: column; align-items: center; gap: 0; }
[data-pair="on"] .ap-cta--pill .i18n-zh { display: block; color: rgba(255, 255, 255, .94); font-size: .78em; margin-top: .1em; }

/* --- colour and contrast for controls ----------------------------------- */
/* A label inside a filled control inherits the control's colour, never the link
   colour: otherwise the English side of a blue pill button paints itself blue on
   blue and the button looks empty. */
body.ap .ap-cta--pill,
body.ap .ap-cta--pill .i18n-en,
body.ap .ap-cta--pill:hover,
body.ap .ap-cta--pill:hover .i18n-en,
body.ap .ap-buy,
body.ap .ap-buy .i18n-en { color: #fff; }
/* on the black band a plain link needs a lighter blue to stay legible */
body.ap .ap-band--dark a { color: #6cb2f5; }
body.ap .ap-band--dark .i18n-zh { color: #a1a1a6; }
[data-pair="on"] .ap-band--dark .ap-cta--pill .i18n-zh { color: rgba(255, 255, 255, .94); }

.ap-wrap { max-width: var(--ap-wide); margin: 0 auto; padding: 0 22px; }
.ap-wrap--narrow { max-width: var(--ap-measure); margin: 0 auto; padding: 0 22px; }
.ap-wrap--full { max-width: var(--ap-full); margin: 0 auto; padding: 0 22px; }

/* --- local nav (product sub-navigation) --------------------------------- */
.ap-subnav {
  position: sticky; top: 62px; z-index: 88;
  background: rgba(250, 250, 252, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ap-line);
}
.ap-subnav-inner {
  max-width: var(--ap-full); margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; gap: 18px; min-height: 52px;
}
.ap-subnav .ap-title {
  font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
  min-width: 0; flex: 0 1 auto; max-width: 30ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-subnav .ap-title .i18n-zh { font-size: .84em; color: var(--ap-ink-3); }
[data-pair="on"] .ap-subnav .ap-title { white-space: normal; }
[data-pair="on"] .ap-subnav .ap-title .i18n-zh { display: block; font-size: 12px; margin-top: 1px; }
.ap-subnav nav { display: flex; gap: 16px; margin-left: auto; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.ap-subnav nav::-webkit-scrollbar { display: none; }
.ap-subnav nav a {
  font-size: 12px; color: var(--ap-ink-2); white-space: nowrap; padding: 4px 0;
  text-decoration: none; transition: color .2s var(--ease-ui, ease);
}
.ap-subnav nav a:hover { color: var(--ap-blue); text-decoration: none; }
[data-pair="on"] .ap-subnav nav a { font-size: 11.5px; }
[data-pair="on"] .ap-subnav nav a .i18n-zh { display: block; font-size: .92em; color: var(--ap-ink-3); }
.ap-subnav .ap-buy {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; background: var(--ap-blue); color: #fff; border-radius: 980px;
  padding: 6px 14px; white-space: nowrap; text-decoration: none; line-height: 1.3;
}
.ap-subnav .ap-buy .hy-pair--inline { flex-direction: column; align-items: flex-start; gap: 0; }
.ap-subnav .ap-buy .i18n-zh { color: rgba(255, 255, 255, .95); font-size: .92em; }
.ap-subnav .ap-buy:hover { background: var(--ap-blue-hover); text-decoration: none; }

/* --- hero: oversized product photography ------------------------------- */
.ap-hero { background: var(--ap-surface); padding-top: clamp(30px, 2.6vw, 52px); text-align: center; }
.ap-hero .ap-eyebrow {
  font-size: 16px; font-weight: 600; color: var(--ap-ink-3);
  letter-spacing: 0; margin: 0 0 6px;
}
.ap-hero .ap-eyebrow .i18n-zh { display: inline; margin-left: .5em; font-size: .95em; }
.ap-hero h1 {
  font-size: clamp(34px, 3.1vw + 18px, 64px);
  line-height: 1.06; letter-spacing: -0.035em; font-weight: 650;
  max-width: 22ch; margin: 0 auto 12px;
}
.ap-hero .ap-tagline {
  font-size: clamp(18px, .8vw + 14px, 25px); line-height: 1.3;
  color: var(--ap-ink-2); font-weight: 400; max-width: 44ch; margin: 0 auto 6px;
}
[data-pair="on"] .ap-hero .ap-tagline { max-width: 40ch; }

.ap-herofigure { margin: clamp(26px, 3vw, 48px) auto 0; max-width: var(--ap-full); }
.ap-herofigure img, .ap-herofigure svg {
  width: 100%; height: auto; display: block;
  max-height: min(64vh, 560px); object-fit: contain; margin: 0 auto;
}
.ap-cta-row {
  display: flex; justify-content: center; align-items: center; gap: 26px;
  flex-wrap: wrap; margin: clamp(20px, 2.4vw, 34px) 0 0;
}
.ap-cta { font-size: 17px; color: var(--ap-blue); text-decoration: none; }
.ap-cta:hover { text-decoration: underline; }
.ap-cta--pill {
  background: var(--ap-blue); color: #fff; border-radius: 980px; padding: 12px 26px;
  font-size: 17px; text-decoration: none; display: inline-flex; flex-direction: column;
  align-items: center; line-height: 1.24;
}
.ap-cta--pill:hover { background: var(--ap-blue-hover); text-decoration: none; }

/* --- key figures strip -------------------------------------------------- */
.ap-figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--ap-line); border-radius: var(--ap-radius);
  overflow: hidden; margin: clamp(34px, 4vw, 62px) auto 0; max-width: var(--ap-wide);
}
.ap-figures > div { background: var(--ap-surface); padding: 22px 20px; text-align: center; }
.ap-figure-num {
  font-size: clamp(26px, 2vw + 18px, 40px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.ap-figure-num small { font-size: .48em; font-weight: 600; color: var(--ap-ink-3); margin-left: .18em; }
.ap-figure-label { font-size: 12px; color: var(--ap-ink-3); margin-top: 6px; letter-spacing: 0; }
.ap-figure-label .i18n-zh, .ap-spec-k .i18n-zh { word-break: keep-all; }
[data-pair="on"] .ap-figure-label .i18n-zh { display: block; margin-top: 2px; }

/* --- content bands ------------------------------------------------------ */
.ap-band { padding: var(--ap-band) 0; }
.ap-band--alt { background: var(--ap-surface-2); }
.ap-band--dark { background: var(--ap-dark); color: #f5f5f7; }
.ap-band--dark h2, .ap-band--dark h3, .ap-band--dark .ap-section-title { color: #f5f5f7; }
.ap-band--dark .ap-kicker { color: #86868b; }

.ap-band-head { max-width: var(--ap-measure); margin: 0 auto clamp(30px, 3.4vw, 54px); text-align: center; }
.ap-band-head--left { margin-left: 0; text-align: left; }
.ap-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ap-ink-3); margin-bottom: 10px; display: block;
}
.ap-section-title {
  font-size: clamp(26px, 2.2vw + 16px, 44px); line-height: 1.1; font-weight: 640;
  letter-spacing: -0.03em; margin: 0 0 14px;
}

/* --- text + schematic + spec block (one idea per band) ------------------ */
.ap-idea {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 3.6vw, 64px); align-items: center;
}
.ap-idea--flip .ap-idea-copy { order: 2; }
.ap-idea--flip .ap-idea-visual { order: 1; }
.ap-idea-copy p { font-size: 17px; color: var(--ap-ink-2); margin: 0 0 1em; }
.ap-idea-copy p:last-child { margin-bottom: 0; }
.ap-lede { font-size: clamp(19px, .7vw + 16px, 22px) !important; color: var(--ap-ink) !important; }
.ap-idea-visual { min-width: 0; }
.ap-idea-visual figure { margin: 0; }

/* schematic frame */
.ap-schematic {
  background: var(--ap-surface-2); border-radius: var(--ap-radius);
  padding: clamp(12px, 1.4vw, 22px);
}
.ap-schematic img, .ap-schematic svg {
  background: #fff; border-radius: 12px;
}
.ap-band--dark .ap-schematic { background: #101012; }
.ap-schematic img, .ap-schematic svg { width: 100%; height: auto; display: block; }
.ap-schematic figcaption {
  font-size: 12px; color: var(--ap-ink-3); margin-top: 12px; text-align: center; letter-spacing: 0;
}
.ap-band--dark .ap-schematic figcaption { color: #86868b; }
body.ap img.ap-photo { border-radius: var(--ap-radius); }

/* spec grid, Apple footnote-table register */
.ap-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px; background: var(--ap-line); border-radius: var(--ap-radius);
  overflow: hidden; margin-top: clamp(18px, 2vw, 28px);
}
/* keep 2 and 3 item grids visually full */
.ap-specs:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.ap-specs:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.ap-specs:has(> div:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
.ap-specs > div { min-width: 0; }
.ap-spec-k, .ap-spec-k .i18n-zh { overflow-wrap: normal; word-break: keep-all; }
.ap-specs > div { background: var(--ap-surface); padding: 16px 16px 15px; }
.ap-band--dark .ap-specs { background: #2d2d2f; }
.ap-band--dark .ap-specs > div { background: #101012; }
/* the English side of a dark-band label must not sit darker than the Chinese */
.ap-band--dark .ap-spec-k,
.ap-band--dark .ap-notes li,
.ap-band--dark .ap-notes li::before { color: #a1a1a6; }
.ap-band--dark .ap-spec-v { color: #f5f5f7; }
.ap-spec-k { font-size: 11.5px; color: var(--ap-ink-3); letter-spacing: 0; margin-bottom: 5px; }
.ap-spec-v {
  font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1.25;
  overflow-wrap: anywhere;
}
.ap-spec-v small { font-size: .58em; font-weight: 600; color: var(--ap-ink-3); margin-left: .16em; }
/* A published range is one figure with a unit word after it ("10.8 – 432 kW
   heat transfer area", "3 – 90 HP compressor match"). The figure is the same
   number in both languages and is written once; only the unit word is
   translated, sitting beside it in a quieter token. Nothing is repeated. */
.ap-tile-value .hy-pair,
.ap-spec-v .hy-pair,
td .hy-pair { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5em; }
[data-pair="on"] .ap-tile-value .i18n-zh,
[data-pair="on"] .ap-spec-v .i18n-zh,
[data-pair="on"] td .i18n-zh {
  display: inline; margin-top: 0; font-size: .84em;
  font-weight: 500; color: var(--ap-ink-3);
}
[data-pair="on"] .ap-band--dark .ap-spec-v .i18n-zh { color: #a1a1a6; }

/* --- full-width spec table --------------------------------------------- */
.ap-tablecard {
  background: var(--ap-surface); border-radius: var(--ap-radius-lg);
  padding: clamp(16px, 2vw, 30px); box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
}
.ap-tablecard .table-scroll { max-height: min(70vh, 720px); border-radius: 12px; }
.ap-tablecard table.spec { font-size: 13.5px; }
.ap-tablecard table.spec thead th { background: var(--ap-surface-2); color: var(--ap-ink-2); border-right: 1px solid var(--ap-line); }
.ap-tablecard table.spec tbody td { border-bottom: 1px solid var(--ap-surface-3); border-right: 1px solid var(--ap-surface-3); }
.ap-tablecard table.spec tbody tr:nth-child(even) { background: #fbfbfd; }
.ap-tablecard table.spec tbody tr:hover { background: #f0f6fd; }
.ap-tablecard .table-note { background: var(--ap-surface-2); color: var(--ap-ink-3); font-size: 12px; }

/* --- horizontal tile rail (Apple "explore the line-up") ---------------- */
.ap-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px; overflow-x: auto; padding: 4px 22px 18px; scroll-snap-type: x mandatory; }
.ap-rail > * { scroll-snap-align: start; }
.ap-tile {
  background: var(--ap-surface); border-radius: var(--ap-radius-lg); padding: 24px 22px;
  display: flex; flex-direction: column; min-height: 240px;
}
.ap-band--alt .ap-tile { background: var(--ap-surface); }
.ap-tile h3 { font-size: 21px; margin: 0 0 6px; }
.ap-tile .ap-tile-value { font-size: 34px; font-weight: 650; letter-spacing: -0.03em; margin-top: auto; font-variant-numeric: tabular-nums; }
.ap-tile .ap-tile-label { font-size: 12px; color: var(--ap-ink-3); letter-spacing: 0; }

/* --- notes / compliance ------------------------------------------------ */
.ap-notes { max-width: var(--ap-measure); margin: 0 auto; }
.ap-notes ol { counter-reset: n; list-style: none; margin: 0; padding: 0; }
.ap-notes li {
  position: relative; padding-left: 26px; margin-bottom: 16px;
  font-size: 13px; color: var(--ap-ink-3); line-height: 1.55; letter-spacing: 0;
}
.ap-notes li::before {
  counter-increment: n; content: counter(n) ".";
  position: absolute; left: 0; color: var(--ap-ink-3);
}

/* --- CTA footer band --------------------------------------------------- */
.ap-cta-band { text-align: center; }
.ap-cta-band .ap-section-title { max-width: 22ch; margin: 0 auto 18px; }

/* --- hub page: family index, dense tile grid, chips ---------------------- */
/* The hub is an index, so it is read in rows: one family per row, the family
   heading in a fixed left column, its tiles in the rest of the width. */
.ap-famnav {
  position: sticky; top: 62px; z-index: 80;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 clamp(26px, 3vw, 44px); padding: 10px 0;
  border-bottom: 1px solid var(--ap-line);
  background: linear-gradient(var(--ap-surface-2) 70%, rgba(245, 245, 247, .82));
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
.ap-famnav::-webkit-scrollbar { display: none; }
.ap-famnav-chip {
  display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap;
  font-size: 12.5px; color: var(--ap-ink-2); text-decoration: none;
  background: var(--ap-surface); border: 1px solid var(--ap-line);
  border-radius: 980px; padding: 6px 13px;
  transition: color .2s var(--ease-ui, ease), border-color .2s var(--ease-ui, ease),
              transform .2s var(--ease-ui, ease), background-color .2s var(--ease-ui, ease);
}
.ap-famnav-chip:hover { color: var(--ap-blue); border-color: var(--ap-blue); transform: translateY(-1px); text-decoration: none; }
.ap-famnav-chip sup { font-size: 10px; color: var(--ap-ink-3); font-variant-numeric: tabular-nums; }
.ap-famnav-chip .i18n-zh { color: var(--ap-ink-3); font-size: .96em; }
.ap-famnav-chip:hover .i18n-zh { color: var(--ap-blue); }

.ap-fam {
  display: grid; grid-template-columns: 208px minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  padding: clamp(22px, 2.4vw, 34px) 0;
  border-top: 1px solid var(--ap-line);
  scroll-margin-top: 132px;
}
.ap-fam:first-of-type { border-top: 0; }
.ap-fam-head { position: sticky; top: 140px; align-self: start; }
.ap-fam-title {
  font-size: 19px; line-height: 1.25; letter-spacing: -0.02em;
  margin: 0 0 6px; font-weight: 640;
}
.ap-fam-count { font-size: 12px; color: var(--ap-ink-3); letter-spacing: 0; margin: 0; }
.ap-fam-count .i18n-zh { display: inline; margin-left: .4em; }
[data-pair="on"] .ap-fam-head { top: 168px; }

.ap-tiles {
  display: grid; gap: 20px; align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.ap-tile--link {
  background: var(--ap-surface); border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius); padding: 0 0 16px;
  text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .28s var(--ease-reveal, cubic-bezier(.16,1,.3,1)),
              box-shadow .28s var(--ease-reveal, cubic-bezier(.16,1,.3,1)),
              border-color .28s var(--ease-ui, ease);
  display: flex; flex-direction: column;
}
.ap-tile--link:hover {
  transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
  border-color: var(--ap-ink-3); text-decoration: none;
}
.ap-tile-media { margin: 0; background: var(--ap-surface); width: 100%; border-bottom: 1px solid var(--ap-surface-3); }
.ap-tile-media img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: contain; object-position: center;
  padding: 12px; display: block;
}
.ap-tile-body { padding: 14px 16px 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.ap-tile-code {
  margin: 0 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ap-ink-3); font-variant-numeric: tabular-nums;
}
.ap-tile--link h3 { font-size: 16.5px; line-height: 1.3; margin: 0 0 12px; letter-spacing: -0.015em; }
.ap-tile-meta { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ap-surface-3); }
.ap-tile--link .ap-tile-value {
  display: block; font-size: 15.5px; font-weight: 640; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums; color: var(--ap-ink);
}
.ap-tile--link .ap-tile-label { display: block; font-size: 11.5px; color: var(--ap-ink-3); letter-spacing: 0; margin-top: 2px; }
[data-pair="on"] .ap-tile--link .ap-tile-label .i18n-zh { display: inline; margin-left: .45em; }
[data-pair="on"] .ap-tiles .ap-tile--link { padding-bottom: 18px; }

/* range rail on a product page keeps the roomier register */
.ap-rail .ap-tile { min-height: 0; padding: 18px 18px 16px; }
.ap-rail .ap-tile h3 { font-size: 17px; margin: 0 0 6px; }
.ap-rail .ap-tile .ap-tile-value { font-size: 24px; }

.ap-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ap-chip {
  font-size: 13px; color: var(--ap-ink-2); background: var(--ap-surface-2);
  border-radius: 980px; padding: 8px 16px; letter-spacing: 0;
}
.ap-chip .i18n-zh { color: var(--ap-ink-3); font-size: .95em; }
.ap-chip .hy-pair--inline { gap: 0 .4em; }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  /* the trailing "more series" link is the first thing to go when space runs out */
  .ap-subnav nav a:last-child { display: none; }
  .ap-fam { grid-template-columns: 172px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ap-idea { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ap-idea--flip .ap-idea-copy, .ap-idea--flip .ap-idea-visual { order: 0; }
  .ap-subnav .ap-title { font-size: 16px; }
  .ap-subnav nav { gap: 16px; }
  .ap-herofigure img, .ap-herofigure svg { max-height: 46vh; }
  .ap-fam { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ap-fam-head { position: static; }
}
@media (max-width: 720px) {
  body.ap { font-size: 16px; }
  .ap-wrap, .ap-wrap--narrow, .ap-wrap--full { padding: 0 18px; }
  .ap-subnav-inner { gap: 12px; min-height: 46px; }
  .ap-subnav .ap-buy { display: none; }
  .ap-famnav { top: 0; scroll-margin-top: 60px; }
  .ap-fam { scroll-margin-top: 76px; }
  .ap-figures { grid-template-columns: repeat(2, 1fr); }
  .ap-specs { grid-template-columns: repeat(2, 1fr) !important; }
  .ap-rail { grid-auto-columns: 82%; }
  .ap-band { padding: clamp(44px, 12vw, 72px) 0; }
  .ap-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
  .ap-hero h1 { font-size: clamp(28px, 7.4vw, 40px); }
  [data-pair="on"] .ap-hero h1 .hy-pair > .i18n-zh { font-size: 17px; }
  .ap-hero .ap-tagline { font-size: 17px; }
  [data-pair="on"] .ap-fam-title .hy-pair > .i18n-zh { font-size: .9em; }
}

@media (prefers-reduced-motion: reduce) {
  body.ap * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}
@media print {
  .ap-subnav { display: none !important; }
  .ap-band { padding: 18px 0; }
}

/* --- legacy hub grid kept for any page still using it -------------------- */
.ap-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: 20px; align-items: stretch;
}
@media (max-width: 720px) {
  .ap-grid { grid-template-columns: 1fr; }
}