/* ==========================================================================
   ChinaGo — Global Stylesheet
   --------------------------------------------------------------------------
   Contents:
     1. Design tokens (CSS variables) — single source of truth for color,
        type, spacing, etc. See docs/DESIGN-SYSTEM.md.
     2. Base / reset
     3. Typography
     4. Layout (container, sections, flow, grid)
     5. Components (skip link, header/nav, buttons, cards, hero,
        page headers, FAQ, footer)
     6. Utilities
     7. Motion & accessibility preferences

   Mobile-first: base styles target small screens; min-width media queries
   enhance for larger screens (48em = 768px, 64em = 1024px).
   ========================================================================== */

/* 1. Design tokens
   ========================================================================== */
:root {
  /* Color — ChinaGo brand palette (Phase 2): ChinaGo Red as the
     identification color, white / off-white / charcoal as the page base,
     gold as a minimal premium accent. Red is used for CTAs, links and
     accents — never as a page background. All combinations below meet
     WCAG AA contrast. */
  --color-primary: #c8102e;        /* ChinaGo Red — CTAs, links (5.9:1 on white) */
  --color-primary-dark: #a00d24;   /* hover / pressed (8.2:1 on white) */
  --color-primary-light: #fcebed;  /* soft red wash for tags */
  --color-gold: #7a5d16;           /* gold text accent (6.2:1 on white) */
  --color-gold-soft: #f5eedd;      /* subtle wash behind gold text */
  --color-gold-bright: #c9a227;    /* gold on dark surfaces (6.1:1 on ink) */
  --color-ink: #1d2939;            /* charcoal */
  --color-ink-text: #cbd5e1;       /* muted text on ink (9.9:1) */
  --color-ink-border: rgba(255, 255, 255, 0.22);
  --color-text: #1f2733;
  --color-text-muted: #55606e;
  --color-bg: #ffffff;
  --color-surface: #f7f9fb;
  --color-paper: #f9f7f2;          /* warm-neutral editorial tint (5E.2A) */
  --color-border: #dde3ea;
  --color-footer-bg: #1d2939;
  --color-footer-text: #cbd5e1;
  --color-footer-link: #a8c7fa;

  /* Typography */
  --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.375rem + 2.5vw, 2.75rem);

  /* Spacing (4px-based) */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Radius & shadow */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);

  /* Layout */
  --container-max: 72rem;
  --header-height: 4rem;

  /* Motion */
  --transition-fast: 150ms ease;
}

/* 2. Base / reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Keep the footer at the bottom on short pages. */
main {
  flex: 1 0 auto;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
select,
textarea {
  font: inherit;
}

/* Lists that carry a class (nav, grids, features) drop default bullets. */
ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

/* 3. Typography
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  color: var(--color-text);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4,
h5,
h6 {
  font-size: var(--text-md);
}

p {
  max-width: 65ch;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-primary-dark);
}

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* 4. Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section {
  padding-block: var(--space-2xl);
}

.section--surface {
  background-color: var(--color-surface);
}

.section__head {
  max-width: 46rem;
  margin-inline: auto;
  margin-block-end: var(--space-xl);
  text-align: center;
}

.section__head p {
  margin-inline: auto;
  color: var(--color-text-muted);
}

.section__more {
  margin-block-start: var(--space-xl);
  text-align: center;
}

/* Vertical rhythm for stacked content: .flow > * + * */
.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-md));
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid--3 {
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .container {
    padding-inline: var(--space-lg);
  }

  .section {
    padding-block: var(--space-3xl);
  }

  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 5. Components
   ========================================================================== */

/* Skip link --------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 100;
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-bg);
  color: var(--color-primary-dark);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Header & navigation ------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-height);
  padding-block: var(--space-2xs);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}



/* Brand logo imagery (Phase 3C final: official logo system integrated —
   symbol is a 894×894 square matching the 64×64 hint; the horizontal
   lockup is 1483×741 (≈2:1), so the logo img's width/height hint is
   128×64 to declare the true ratio and avoid a post-load shift; CSS
   sizing unchanged; 5E.2A: the compact horizontal lockup now shows at
   every breakpoint — 2rem tall below 64em so a first-time arrival from
   search sees the full official brand, 2.25rem from 64em. Both images
   carry the alt text
   "ChinaGo logo"; the one hidden via display:none leaves the
   accessibility tree, so exactly one logo is announced. Since Phase 5E.1
   every page — Home, Services, FAQ, Blog and articles — uses this approved
   logo system; the old subpage text lockup (.brand__mark / .brand__name)
   was retired with that pass. */
.brand__symbol {
  display: none;
}

.brand__logo {
  display: block;
  width: auto;
  height: 2rem;
}

@media (min-width: 64em) {
  .brand__logo {
    height: 2.25rem;
  }
}

/* Mobile menu panel (hidden until opened via main.js) */
.site-nav {
  display: none;
  width: 100%;
  padding-block: var(--space-2xs) var(--space-sm);
}

.site-nav[data-open="true"] {
  display: block;
}

/* No-JS fallback: keep the nav usable and hide the toggle button. */
html.no-js .site-nav {
  display: block;
}

html.no-js .nav-toggle {
  display: none;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.site-nav__list a {
  display: block;
  padding: var(--space-sm) var(--space-xs);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.site-nav__list a:hover {
  color: var(--color-primary);
  background-color: var(--color-surface);
  text-decoration: underline;
}

.site-nav__list a[aria-current="page"] {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

.site-header__cta {
  margin-left: auto;
  flex-shrink: 0;
}

/* Phase 4E (<64em only): slightly lighter mobile header footprint — inner
   min-height 4rem → 3.75rem (−6%) and the header CTA 40px → 38px (−5%),
   still a comfortable tap target. Compound selector beats the later
   .btn--sm rule at equal-mobile scope; the shared 64em header block below
   restores both, so the desktop header is unchanged. (Phase 5E.1: the
   header CTA is now hidden below 64em — see the 5E.1 block at the end of
   this file — and the 38px tweak above was removed with it.) */
.site-header__inner {
  min-height: 3.75rem;
}

/* Hamburger toggle (visible below 64em, last item in the header row) */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-sm);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle__bar {
  width: 22px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--color-text);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(4) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 64em) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: block;
    width: auto;
    padding: 0;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
  }

  .site-nav__list a {
    padding: var(--space-xs) var(--space-sm);
  }

  /* Phase 4E restore: desktop header keeps its approved measures. */
  .site-header__inner {
    min-height: var(--header-height);
  }

  .site-header__cta.btn--sm {
    min-height: 40px;
  }
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast), color var(--transition-fast);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background-color: var(--color-primary);
  color: #ffffff;
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  color: #ffffff;
}

.btn--secondary {
  background-color: var(--color-bg);
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}

.btn--secondary:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.btn--sm {
  min-height: 40px;
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--text-sm);
}

.btn--lg {
  min-height: 52px;
  padding: var(--space-sm) var(--space-xl);
  font-size: var(--text-md);
}

/* Cards -------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Push a card's CTA button to the bottom edge for aligned rows. */
.card > .btn {
  margin-top: auto;
}

.card__tag {
  align-self: flex-start;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card__title {
  font-size: var(--text-md);
}

/* Plan feature lists (dot markers) */
.plan-card__features {
  display: grid;
  gap: var(--space-xs);
}

.plan-card__features li {
  position: relative;
  padding-left: 1.25rem;
}

.plan-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--color-primary);
}

/* Hero (home) — full-bleed image hero on every breakpoint (Phase 3B.2 rev).
   Mobile (<48em): the dedicated art-directed portrait asset
   (chinago-hero-mobile.webp) is the section background; the text column sits
   on the photograph's left whitespace over a soft white-to-transparent
   gradient. Desktop (≥48em): the arrival photograph is the background,
   anchored center right, with the text floating in its left negative space.
   The .hero::before gradient and the .hero__content measure are tuned per
   breakpoint (mobile-first base rules, desktop restores in the 48em block).
   Inner pages use .page-header (below), which is unaffected by these rules. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 34rem;
  /* Vertical nudge (<48em only): symmetric 3xl padding lifts the centered
     column slightly and keeps the CTA clear of the bottom edge. ≥48em sets
     its own padding below, so the desktop hero is unaffected. */
  padding-block: var(--space-3xl);
  background-image: url("../images/chinago-hero-mobile.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Readability gradient behind the text — near-white on the left where the
   text column sits, fading to fully transparent so the right side of the
   photograph keeps its original color. Mobile (<48em) stops run further
   right than the desktop ones so the protection keeps covering the narrower
   column deeper into the portrait asset; ≥48em restores the approved
   desktop stops (48em block below). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.94) 48%,
    rgba(255, 255, 255, 0.82) 66%,
    rgba(255, 255, 255, 0.44) 84%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* Keep the content above the ::before overlay. */
.hero .container {
  position: relative;
  z-index: 1;
}

.hero__content {
  --flow-space: var(--space-lg);
  /* Mobile (<48em): narrower than the container so the column stays inside
     the asset's left whitespace instead of reaching the traveler. ≥48em
     restores the desktop 34rem measure (48em block below). */
  max-width: 21rem;
}

.hero__lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  /* Mobile (<48em): measured narrower than the 21rem column — 18rem keeps
     the lede reading as supporting text beside the H1, fully inside the
     asset's left safe area away from the traveler. ≥48em restores the
     desktop behavior (lede fills the 34rem column — 48em block below). */
  max-width: 18rem;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Mobile (<48em): the two CTAs share one horizontal row as equal-width
   buttons, mirroring the desktop CTA relationship. flex-basis 0 + min-width
   0 forces identical widths inside the 21rem column, and a slimmer
   horizontal padding (--space-md instead of .btn--lg's --space-xl) keeps
   each label comfortable at that width. ≥48em restores content-sized,
   wrap-capable buttons with the standard .btn--lg padding (48em block
   below). */
.hero__actions {
  flex-wrap: nowrap;
}

.hero__actions .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: var(--space-md);
}

@media (min-width: 48em) {
  .hero {
    min-height: 40.625rem; /* 650px */
    padding-block: var(--space-3xl);
    background-image: url("../images/chinago-hero-arrival.webp");
    background-position: center right;
  }

  /* Desktop hero renders exactly as approved (Phase 3B): restore the
     desktop gradient stops and the 34rem content measure that the
     mobile-first base rules above tune for the portrait asset. */
  .hero::before {
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.94) 36%,
      rgba(255, 255, 255, 0.72) 54%,
      rgba(255, 255, 255, 0.28) 72%,
      rgba(255, 255, 255, 0) 100%);
  }

  .hero__content {
    max-width: 34rem;
  }

  /* Desktop lede/CTA row renders exactly as before the mobile overlay
     tuning: lede unconstrained within the column, content-sized buttons
     that may wrap, with the standard .btn--lg horizontal padding. */
  .hero__lede {
    max-width: none;
  }

  .hero__actions {
    flex-wrap: wrap;
  }

  .hero__actions .btn {
    flex: 0 1 auto;
    padding-inline: var(--space-xl);
  }
}

@media (min-width: 64em) {
  .hero {
    min-height: 45rem; /* 720px — within the 650–750px desktop band */
  }
}

/* Page headers (inner pages) ------------------------------------------------ */
.page-header {
  padding-block: var(--space-2xl);
  background-color: var(--color-surface);
}

.page-header__inner {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

/* Keep centered page-header labels from inheriting the global paragraph width cap. */
.page-header__inner > .eyebrow {
  max-width: none;
}

.page-header__lede {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  margin-inline: auto;
}

@media (min-width: 48em) {
  .page-header {
    padding-block: var(--space-3xl);
  }
}

/* FAQ (native details/summary) ---------------------------------------------- */
.faq {
  display: grid;
  gap: var(--space-sm);
}

.faq__item {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 44px;
  padding: var(--space-md) var(--space-lg);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  color: var(--color-primary);
  transition: transform var(--transition-fast);
}

.faq__item[open] > summary::after {
  transform: rotate(45deg);
}

.faq__answer {
  display: grid;
  gap: var(--space-sm);
  padding: 0 var(--space-lg) var(--space-lg);
  color: var(--color-text-muted);
}

/* Footer -------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-2xl) var(--space-lg);
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-xl);
}

.site-footer__logo {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: #ffffff;
  margin-block-end: var(--space-xs);
}

.site-footer__brand p {
  color: var(--color-footer-text);
}

.site-footer__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  margin-block-end: var(--space-md);
}

.site-footer__list {
  display: grid;
  gap: var(--space-xs);
}

.site-footer__list a {
  color: var(--color-footer-link);
  text-decoration: none;
}

.site-footer__list a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.site-footer__bottom {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: var(--text-sm);
}

@media (min-width: 48em) {
  .site-footer__grid {
    /* 5E.2A: two peer link groups (Explore, Legal) beside the brand statement. */
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-2xl);
  }
}

/* Homepage components (Phase 2) --------------------------------------------- */

/* Small uppercase label above section headings */
.eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}

/* Pivot line below a section body */
.section__pivot {
  margin-block-start: var(--space-xl);
  text-align: center;
  font-size: var(--text-md);
}

/* Pillar / principle columns with hairline dividers */
.pillars {
  display: grid;
  gap: var(--space-lg);
}

.pillars h3 {
  margin-block-end: var(--space-2xs);
}

.pillars p {
  color: var(--color-text-muted);
}

.pillars > * + * {
  border-top: 1px solid var(--color-border);
  padding-block-start: var(--space-lg);
}

/* Phase 4E — mobile service cards (<48em only): internal padding
   1.5rem → 1.3rem (≈13% tighter) for slightly more usable line width.
   Scoped to the homepage services grid (.grid--services) so plan cards on
   other pages are untouched; restored at 48em below. */
.grid--services .card {
  padding: 1.3rem;
}

@media (min-width: 48em) {
  .pillars {
    gap: var(--space-xl) var(--space-lg);
  }

  .pillars > * + * {
    border-top: 0;
    padding-block-start: 0;
  }

  .pillars > * {
    border-inline-start: 1px solid var(--color-border);
    padding-inline-start: var(--space-lg);
  }

  .pillars--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phase 4E restore (≥48em): desktop keeps the approved measures — service
   cards return to the standard card padding. */
@media (min-width: 48em) {
  .grid--services .card {
    padding: var(--space-lg);
  }
}

/* Centered wrapping CTA button group */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

/* 6. Utilities
   ========================================================================== */
.muted {
  color: var(--color-text-muted);
}

.text-center {
  text-align: center;
}

.narrow {
  max-width: 46rem;
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 7. Motion & accessibility preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Phase 5A — Services page (products/index.html) --------------------------------
   Page-scoped additions only. Every selector here targets classes used
   solely by the Services page (hero--services, svc-*, the section ids),
   so the frozen Home page is visually unchanged. Appended at
   the end of the file so the same-specificity .hero overrides below win
   over the home hero base/48em rules above. */

/* In-page anchors land clear of the sticky header (no prior pattern existed). */
#connect,
#explore,
#concierge,
#which-one {
  scroll-margin-top: calc(var(--header-height) + var(--space-xs));
}

/* Services hero — mirrors the home hero pattern with the approved services
   assets (see the .hero block above for the shared structure). Mobile
   (<48em): products-hero-mobile.webp is a separately composed portrait whose
   built-in lower white/fade area carries the copy. Phase 5A.1: height is
   driven by a reserved photo zone (padding) plus the copy instead of a fixed
   min-height, and the asset is bottom-anchored so its native fade always
   sits under the copy — text begins only where the image is already fading
   to white, never over the traveler or the skyline. Desktop (≥48em):
   products-hero.webp places the traveler on the LEFT, so the gradient and
   the copy column are mirrored onto the photograph's right-side negative
   space (desktop composition unchanged — the photo-zone padding is
   explicitly restored there). */
.hero--services {
  min-height: 0;
  padding-block-start: 22rem;
  align-items: flex-end;
  background-image: url("../images/products-hero-mobile.webp");
  background-position: center bottom;
}

.hero--services::before {
  /* Very light blending aid only — must not override the asset's own
     built-in fade; it just guarantees the copy entry point reads white. */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.45) 72%,
    rgba(255, 255, 255, 0.9) 100%);
}

.hero--services .hero__content {
  max-width: 30rem;
  margin-inline: auto;
  text-align: center;
}

.hero--services .hero__lede {
  max-width: 26rem;
  margin-inline: auto;
}

@media (min-width: 48em) {
  .hero--services {
    min-height: 40.625rem;
    padding-block-start: var(--space-3xl); /* undo the mobile photo-zone padding */
    align-items: center;
    background-image: url("../images/products-hero.webp");
    background-position: center left;
  }

  .hero--services::before {
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.28) 28%,
      rgba(255, 255, 255, 0.72) 46%,
      rgba(255, 255, 255, 0.94) 64%,
      rgba(255, 255, 255, 0.94) 100%);
  }

  .hero--services .hero__content {
    max-width: 34rem;
    margin-left: auto;
    margin-right: 0;
    text-align: left;
  }

  .hero--services .hero__lede {
    max-width: none;
    margin-inline: 0;
  }
}

@media (min-width: 64em) {
  .hero--services {
    min-height: 45rem;
  }
}

/* Services price line (chooser cards + detail section heads) */
.svc-price {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

/* Detail-section content rhythm: a touch more air between blocks than the
   default flow space, matching the section-head bottom margin. */
.svc-flow {
  --flow-space: var(--space-xl);
}

/* card__tag reused as a centered pill inside section heads: inline-block so
   the pill hugs its label instead of stretching full width. */
.section__head .card__tag {
  display: inline-block;
}

/* Phase 5B.2 — Home mobile rhythm (<48em only) --------------------------------
   Two surgical spacing touches after the 5B.1 content reduction; nothing
   else changes. Scoped with the Home sections' unique aria-labelledby
   values (verified site-unique), so Services / FAQ / Blog sections keep
   the global .section / .pillars rhythm. Desktop ≥48em is untouched by
   construction — the whole block lives in a max-width query. */

@media (max-width: 47.99em) {

  /* Brand transition → Three ways seam: 5B.1 removed the section body, so
     the section head's 2rem bottom margin now dangles as dead whitespace
     before the section padding. Drop it and trim the section's bottom
     padding 3rem → 2.5rem — the h2 → Three-ways-h2 gap goes 8rem → 5.5rem:
     still a clear brand pause, Three ways arrives sooner. */
  section[aria-labelledby="problem-title"] .section__head {
    margin-block-end: 0;
  }

  section[aria-labelledby="problem-title"] {
    padding-block-end: 2.5rem;
  }

  /* Trust (Practical / Simple / Human): group spacing 3rem → 2.5rem total
     (1.25rem gap + 1.25rem padding) and
     section padding 3rem → 2.5rem top/bottom. Hairline dividers, alignment,
     sizes and the FAQ section's own padding are all untouched. */
  section[aria-labelledby="trust-title"] {
    padding-block: 2.5rem;
  }

  section[aria-labelledby="trust-title"] .pillars {
    gap: 1.25rem;
  }

  section[aria-labelledby="trust-title"] .pillars > * + * {
    padding-block-start: 1.25rem;
  }
}

/* Phase 5E.1 — Editorial article system + mobile chrome --------------------
   Article 01 establishes the reusable ChinaGo editorial foundation. All
   article styling is scoped to .article-* / .page-header--article — no
   global .flow / h2 / h3 / .section / .page-header / .plan-card__features
   rules change. Two global touches are explicitly in scope: the mobile
   header (persistent Get Started hidden below desktop) and a conservative
   mobile-only footer compression. Desktop pages are visually unchanged. */

/* Mobile header (<64em): hide the persistent Get Started button. Long-form
   content no longer sits under a permanent commercial element; Services in
   the nav remains the commercial route (Get Started is NOT added to the
   menu). This rule deliberately sits after the button section: at equal
   specificity source order decides, so it must come after .btn. The 64em
   header block earlier in the file keeps the desktop CTA untouched. */
@media (max-width: 63.99em) {
  .site-header__cta {
    display: none;
  }
}

/* Article page header: a slightly quicker entry on mobile only — confirm
   the page, then reach the answer sooner. Blog / FAQ / Services keep the
   standard .page-header rhythm. */
@media (max-width: 47.99em) {
  .page-header--article {
    padding-block: var(--space-lg);
  }
}

/* Editorial section heads: small priority label + H2, tightly grouped, and
   separated from preceding content (~32px). The grid also reserves a clean
   future slot for small app icons (see the phase report). */
.article-body > .article-section-head,
.article-body > .article-checklist {
  margin-block-start: var(--space-xl);
}

.article-section-head {
  display: grid;
  gap: var(--space-2xs);
}

/* Priority label: a small editorial eyebrow above the H2 — clearly
   secondary to the heading. (5E.2A: the 5E.1 outlined pill read as a SaaS
   filter tag; it is now plain uppercase text with no box or border. CORE
   uses the restrained brand red via .article-priority--core, lower tiers
   a darker neutral — the Short Answer emoji already carries the full
   color hierarchy.) */
.article-priority {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-priority--core {
  color: var(--color-primary-dark);
}

/* Article H3: a supporting statement, not a competing headline — modestly
   smaller and lighter than the global H3, scoped to the article body. */
.article-body h3 {
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
}

/* Desktop article measure: the Hero remains centered while left-aligned prose
   sits within a narrower shared reading column, keeping the visual transition
   between the two regions coherent without changing mobile or shared layout. */
@media (min-width: 48em) {
  .page-header--article + article.section > .article-body {
    max-width: 42rem;
  }
}

/* A38 — Halal restaurant sign teaching image. The image retains its full
   composition at the article measure; no fixed-height crop is applied. */
.article-body--a38 .article-figure--a38 {
  margin-block: var(--space-lg);
}

.article-body--a38 .article-figure--a38 img {
  display: block;
  width: 100%;
  height: auto;
}

.article-body--a38 .article-figure--a38 figcaption {
  margin-block-start: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* A30 first-hand screenshot gallery: compact fixed-ratio previews link to the
   original full screenshots without a frame, shadow or separate image assets. */
.article-test-gallery {
  margin-block: var(--space-xl);
}

.article-test-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  padding: 0;
  margin: var(--space-md) 0 0;
  list-style: none;
}

.article-test-gallery__item a {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.article-test-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.article-test-gallery__item p {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

@media (min-width: 601px) {
  .article-test-gallery__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Short Answer list: the emoji tier marker is the bullet — no pseudo dot,
   no indent. (The Before-you-fly checklist keeps .plan-card__features and
   its red dots; that distinction is intentional.) */
.article-priority-list {
  display: grid;
  gap: var(--space-sm);
}

/* Compact editorial note — used for the OPTIONAL section. */
.article-note {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Preparation checklist surface — used for "Before you fly". */
.article-checklist {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* CONNECT closing note: lighter than a standard section so it reads as an
   optional postscript, never another page hero. */
.article-close {
  padding-block: var(--space-lg);
}

@media (min-width: 48em) {
  .article-close {
    padding-block: var(--space-xl);
  }
}

/* Mobile footer (<48em): conservative compression only — spacing and
   padding come down, nothing is removed or redesigned. Desktop footer and
   all copy are unchanged. */
@media (max-width: 47.99em) {
  .site-footer {
    padding-block: var(--space-lg) var(--space-md);
  }

  .site-footer__grid {
    gap: var(--space-lg);
  }

  .site-footer__heading {
    margin-block-end: var(--space-sm);
  }

  .site-footer__bottom {
    margin-block-start: var(--space-lg);
    padding-block-start: var(--space-sm);
  }
}

/* Phase 5E.2A — Final editorial / navigation polish --------------------------
   Follows real mobile screenshot review of 5E.1. The de-pilled priority
   label was folded into the 5E.1 block above; everything here is additive
   and article-scoped (plus the header lockup change in the brand rules). */

/* Label + heading column inside a section head. Reserved structure so
   Phase 5E.2B can add small official app icons (Alipay + WeChat, Amap,
   12306 / Trip.com) beside the text without restructuring anything.
   Translation deliberately has no icon slot. */
.article-section-head__text {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
}

/* One deliberate editorial breathing point: a chosen section sits on an
   extremely light warm-neutral tint (currently: Translation). Opt-in via
   markup — never applied automatically. No border, no shadow: a tint,
   not a card. */
.article-section--surface {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--color-paper);
}

/* A surfaced section is still a major section boundary (~32px). */
.article-body > .article-section--surface {
  margin-block-start: var(--space-xl);
}

/* "← All articles": quiet editorial back-navigation (5E.2A spacing kept —
   still pulls back over the article's bottom padding for a ~32px beat;
   48−16 mobile, 64−32 from 48em). 5E.2B: left-aligned, small, muted, no
   underline at rest so it stops reading as a sibling of the centered
   commercial "See CONNECT →" CTA. Hover/focus stay consistent with the
   site link behavior (red + underline; global :focus-visible outline). */
article + .section__more {
  margin-block-start: calc(-1 * var(--space-md));
  text-align: start;
}

article + .section__more a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

article + .section__more a:hover,
article + .section__more a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (min-width: 48em) {
  article + .section__more {
    margin-block-start: calc(-1 * var(--space-xl));
  }
}

/* Phase 5E.2B — App identity anchors -----------------------------------------
   Current official App Store icons (Alipay, WeChat, AMap Global,
   Railway 12306, Trip.com; source record in the phase report) placed
   above the section label/title via the 5E.2A __text structure. Functional
   identifiers for a scanning traveler: 30px, two-icon rows 8px apart,
   no cards, no shadows, no captions. Artwork is full-bleed square, so one
   restrained shared corner rule gives the standard web app-icon
   presentation (~20% at this size, close to the native mask). Translation,
   Optional and Before You Fly intentionally have no icons — the controlled
   asymmetry is deliberate. */
.article-app-icons {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.article-app-icon {
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

/* Article 02 — Payment setup card + dependency visual ------------------------
   Article-scoped additions only: no frozen selector is touched, so Article
   01 stays byte-identical apart from this pure append (hash-verified). */

/* Editorial setup table: what we'd do with each payment method. Three quiet
   columns (What / What we'd do / Role) separated by hairlines — a practical
   list, deliberately NOT a ranking: no status colours, badges or pills, and
   the actions differ from the names only by case, size and tracking. Mobile
   (<48em) restacks each item as WHAT → WHAT WE'D DO → ROLE with a micro-
   label, mirroring the validated Article 03 judgement mechanics without its
   colour language. */
.article-setup__head,
.article-setup__row {
  display: grid;
  grid-template-columns: 1.05fr 0.8fr 1.15fr;
  gap: var(--space-sm);
  align-items: baseline;
}

.article-setup__head {
  padding-block: var(--space-2xs) var(--space-xs);
  border-block-end: 1px solid var(--color-border);
}

.article-setup__head p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-setup__row {
  padding-block: var(--space-sm);
}

.article-setup__row + .article-setup__row {
  border-top: 1px solid var(--color-border);
}

.article-setup__what {
  font-weight: var(--font-weight-bold);
}

.article-setup__do {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-setup__role {
  color: var(--color-text-muted);
}

.article-setup__mlabel {
  display: none;
}

@media (max-width: 47.99em) {
  .article-setup__head {
    display: none;
  }

  .article-setup__row {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }

  .article-setup__role {
    display: flex;
    gap: var(--space-xs);
    font-size: var(--text-sm);
  }

  .article-setup__mlabel {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* Dependency micro-diagram, refined: two independent routes instead of one
   shared card. Each pair is a single quiet line — app, arrow, card chip —
   with no decorative graphics; the role="img" label carries the meaning for
   non-visual access. */
.article-dependency {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
}

.article-dependency__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-dependency__pair {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.article-dependency__app {
  font-weight: var(--font-weight-medium);
}

.article-dependency__arrow {
  color: var(--color-text-muted);
}

.article-dependency__card {
  font-weight: var(--font-weight-medium);
}

/* Article 02 polish pass -----------------------------------------------------
   Everything below is scoped to .article-body--payguide / .article-callout
   (Article 02 only). No global or shared rule — h2, body, .flow,
   .section__more, .article-note, .article-checklist — is modified, so
   Article 01, Home, Services and FAQ are unaffected. */

/* Section H2: ~7% below the global --text-xl so H1 → H2 → body reads
   clearly. Same family, weight and color; balance wrapping preserved.
   Direct-child section heads only — the Before-you-fly heading inside the
   locked checklist component keeps its full approved size. */
.article-body--payguide > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* Conditional one-card callout: the section condition becomes a small
   uppercase label inside a compact quiet card — same surface, border and
   radius language, lighter rhythm than .article-note, clearly subordinate
   to the Before-you-fly checklist. */
.article-body--payguide > .article-callout {
  margin-block-start: var(--space-xl);
}

/* Follows the Article 03 hierarchy lesson: the conditional one-card note is
   secondary advice — a single top hairline replaces the boxed card, so
   "Before you fly" stays the visually stronger action anchor. Page-scoped;
   the shared .article-callout base is untouched. */
.article-body--payguide .article-callout {
  padding: var(--space-sm) 0 0;
  background-color: transparent;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
}

/* Hero → "Our setup" beat — mirrors the validated Article 03 implementation
   exactly (mobile: 24px section top padding, desktop: 48px restored) plus a
   zero margin on the first section head, so the hero and the setup table read
   as one continuous answer sequence while keeping clear separation. Page-
   scoped; global section spacing and Article 03 are untouched. */
.article-section--payguide {
  padding-block-start: var(--space-lg);
}

.article-body--payguide > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--payguide {
    padding-block-start: var(--space-2xl);
  }
}

.article-callout {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-callout__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Mobile prose density (<48em only): utility-article body copy steps to
   15px / 1.55 (~9% less vertical volume) while paragraph spacing, labels,
   Short Answer values, checklist text, H1 and page chrome stay untouched. */
@media (max-width: 47.99em) {
  .article-body--payguide > p,
  .article-body--payguide .article-callout > p {
    font-size: 0.9375rem;
    line-height: 1.55;
  }
}

/* Article 03 — Judgement table + connection comparison -----------------------
   Page-scoped additions only: .article-judge* / .article-compare* plus
   --netguide mirrors of the validated Article 02 typography rules. No shared
   or global selector is modified; Articles 01/02 and every other page keep
   their approved rendering (prefix of this file is hash-verified). */

/* Mirrors of the Article 02 polish pass so Article 03 matches the approved
   article rhythm: slightly lighter section H2, compact mobile prose, and
   section spacing for the conditional callout. */
.article-body--netguide > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

.article-body--netguide > .article-callout {
  margin-block-start: var(--space-xl);
}

@media (max-width: 47.99em) {
  .article-body--netguide > p,
  .article-body--netguide .article-callout > p {
    font-size: 0.9375rem;
    line-height: 1.55;
  }
}

/* Editorial judgement table: thin separators, uppercase micro-labels, status
   color as a text accent only — no fills, badges or boxes. Mobile (<48em)
   restacks each option into a compact scannable row; the desktop-only column
   head is aria-hidden and the Apps / Best-for labels live in the markup. */
.article-judge__head,
.article-judge__row {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 1.15fr 0.95fr;
  gap: var(--space-sm);
  align-items: baseline;
}

.article-judge__head {
  padding-block: var(--space-2xs) var(--space-xs);
  border-block-end: 1px solid var(--color-border);
}

.article-judge__head p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-judge__row {
  padding-block: var(--space-sm);
}

.article-judge__row + .article-judge__row {
  border-top: 1px solid var(--color-border);
}

.article-judge__option {
  font-weight: var(--font-weight-bold);
}

.article-judge__status {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Status accents: muted green = positive, brand red = not recommended,
   existing gold token = backup. Text-level only (4.9:1 / 8.2:1 / 6.2:1). */
.article-judge__status--recommend {
  color: #2e7d4f; /* muted green — Article 03 judgement accent only */
}

.article-judge__status--no {
  color: var(--color-primary-dark);
}

.article-judge__status--backup {
  color: var(--color-gold);
}

.article-judge__mlabel {
  display: none;
}

.article-judge__footnote {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 47.99em) {
  .article-judge__head {
    display: none;
  }

  .article-judge__row {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }

  .article-judge__cell {
    display: flex;
    gap: var(--space-xs);
    font-size: var(--text-sm);
  }

  .article-judge__mlabel {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* Connection comparison: two editorial groups separated by a hairline —
   desktop side by side, mobile stacked with the same divider. Marks are
   restrained text accents aligned to the right for a scannable yes/no column. */
.article-compare {
  display: grid;
  gap: var(--space-lg);
}

.article-compare__title {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-compare__src {
  font-weight: var(--font-weight-medium);
}

.article-compare__lines {
  display: grid;
  gap: var(--space-2xs);
  margin-block-start: var(--space-xs);
}

.article-compare__lines li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}

.article-compare__yes {
  color: #2e7d4f; /* muted green — matches the judgement accent */
  font-weight: var(--font-weight-bold);
}

.article-compare__no {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
}

@media (min-width: 48em) {
  .article-compare {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .article-compare__group + .article-compare__group {
    border-inline-start: 1px solid var(--color-border);
    padding-inline-start: var(--space-2xl);
  }
}

@media (max-width: 47.99em) {
  .article-compare__group + .article-compare__group {
    border-top: 1px solid var(--color-border);
    padding-block-start: var(--space-lg);
  }
}




/* Article 03 visual polish -----------------------------------------------------
   Page-scoped refinements from real desktop + mobile review. No shared or
   global rule is modified; Articles 01/02 keep their approved rendering. */

/* Hero → "Our judgement" beat: the article's top padding and the first
   section-head margin are the only levers. Hero typography, copy, header and
   width are untouched. Mobile gains the most (96px → 40px); desktop gets a
   restrained 128px → 96px from the first-head change alone. */
.article-section--netguide {
  padding-block-start: var(--space-lg);
}

.article-body--netguide > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--netguide {
    padding-block-start: var(--space-2xl);
  }
}

/* Comparison entry beat after the removed "Connection comparison" heading:
   a single calm margin so the transition reads as intentional. */
.article-body--netguide > .article-compare {
  margin-block-start: var(--space-lg);
}

/* "Need a Chinese SIM?" reads as secondary: one subtle top hairline replaces
   the boxed card (page-scoped override; the shared callout is untouched and
   "Before you fly" stays the visually stronger element). */
.article-body--netguide .article-callout {
  padding: var(--space-sm) 0 0;
  background-color: transparent;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
}


/* Article 04 — Transport decision guide ----------------------------------------
   Page-scoped additions only. Every selector below is scoped to
   .article-section--goguide / .article-body--goguide (Article 04: "How to
   Get Around China as a Tourist") or to new Article 04 component classes
   used solely on that page (.article-choices, .article-gorule,
   .article-pickup, .article-station, .article-scenario(s), .article-gonote,
   .article-anchor, .article-emph, .article-label-icon, .article-signoff).
   No shared or global rule is modified; Articles 01–03 keep their approved
   rendering. Icons are inline monochrome line SVGs — functional cues only. */

/* Mirrors of the validated Article 02/03 rhythm: quick hero → first-section
   entry, slightly lighter section H2, compact mobile prose density. */
.article-section--goguide {
  padding-block-start: var(--space-lg);
}

.article-body--goguide > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--goguide {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--goguide > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

@media (max-width: 47.99em) {
  .article-body--goguide > p,
  .article-body--goguide .article-gonote > p:not(.article-priority),
  .article-body--goguide .article-anchor .article-emph,
  .article-body--goguide .article-scenario__q {
    font-size: 0.9375rem;
    line-height: 1.55;
  }
}

/* Label cluster: a priority label plus its emphasized lead sentence, tightly
   grouped ("Before you request a ride", "Check the station",
   "Bring the right passport"). */
.article-body--goguide .article-anchor {
  display: grid;
  gap: var(--space-2xs);
}

/* Emphasized lead sentence under a label — the article-H3 voice (md, bold)
   without heading semantics. */
.article-body--goguide .article-emph {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Small inline line icon beside a priority label (passport, hotel note). */
.article-body--goguide .article-label-icon {
  display: inline-flex;
  align-items: center;
  margin-inline-end: var(--space-2xs);
  color: var(--color-text-muted);
  vertical-align: -0.15em;
}

.article-body--goguide .article-label-icon svg {
  width: 1rem;
  height: 1rem;
}

/* "Our setup" decision table: Situation / We'd use / Why — the established
   ChinaGo editorial table language (hairline rows, uppercase micro-labels).
   Mobile (<48em) drops the column head and restacks each row as an editorial
   decision line: uppercase situation → transport choice with its small icon
   → short reason. */
.article-body--goguide .article-choices__head,
.article-body--goguide .article-choices__row {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.35fr;
  gap: var(--space-sm);
  align-items: baseline;
}

.article-body--goguide .article-choices__head {
  padding-block: var(--space-2xs) var(--space-xs);
  border-block-end: 1px solid var(--color-border);
}

.article-body--goguide .article-choices__head p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--goguide .article-choices__row {
  padding-block: var(--space-sm);
}

.article-body--goguide .article-choices__row + .article-choices__row {
  border-top: 1px solid var(--color-border);
}

.article-body--goguide .article-choices__situation {
  font-weight: var(--font-weight-medium);
}

.article-body--goguide .article-choices__use {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--font-weight-bold);
}

.article-body--goguide .article-choices__why {
  color: var(--color-text-muted);
}

.article-body--goguide .article-choices__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.article-body--goguide .article-choices__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

@media (max-width: 47.99em) {
  .article-body--goguide .article-choices__head {
    display: none;
  }

  .article-body--goguide .article-choices__row {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }

  .article-body--goguide .article-choices__situation {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* "Our rule": the three-line summary under the setup table, separated by a
   single hairline. The lines stack on mobile for rhythm and share one row
   from 48em. */
.article-body--goguide .article-gorule {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.article-body--goguide .article-gorule__lines {
  display: grid;
  gap: var(--space-xs);
}

.article-body--goguide .article-gorule__lines li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--font-weight-medium);
}

.article-body--goguide .article-gorule__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.article-body--goguide .article-gorule__icon svg {
  width: 1rem;
  height: 1rem;
}

@media (min-width: 48em) {
  .article-body--goguide .article-gorule__lines {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-xl);
  }
}

/* Ride-hailing pickup micro-diagram: a vertical three-beat flow — inside
   (muted) → go outside (location accurate / car can stop) → request the
   ride. Typography, small line icons and text arrows only; no card, no map
   screenshot, and the flow stays vertical at every breakpoint. */
.article-body--goguide .article-pickup {
  display: grid;
  gap: var(--space-2xs);
  max-width: 26rem;
}

.article-body--goguide .article-pickup__step {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--space-xs);
  align-items: start;
}

.article-body--goguide .article-pickup__icon {
  display: inline-flex;
  margin-block-start: 0.1875rem;
  color: var(--color-text-muted);
}

.article-body--goguide .article-pickup__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.article-body--goguide .article-pickup__body {
  display: grid;
  gap: var(--space-2xs);
}

.article-body--goguide .article-pickup__title {
  font-weight: var(--font-weight-bold);
}

.article-body--goguide .article-pickup__sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.article-body--goguide .article-pickup__arrow {
  padding-inline-start: calc(1.5rem + var(--space-xs));
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1;
}

.article-body--goguide .article-pickup__step--muted .article-pickup__title {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* Station-name visual: pure typography — the "≠" is the visual. Centered and
   stacked at every breakpoint; no chips, no photograph. */
.article-body--goguide .article-station {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  margin-block: var(--space-md);
  text-align: center;
}

.article-body--goguide .article-station__name {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.article-body--goguide .article-station__neq {
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-primary-dark);
}

/* Airport decision scenarios: three typographic question → answer pairs
   separated by hairlines — deliberately not cards, no gold, no upsell. */
.article-body--goguide .article-scenarios {
  display: grid;
}

.article-body--goguide .article-scenario {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
}

.article-body--goguide .article-scenario + .article-scenario {
  border-top: 1px solid var(--color-border);
}

.article-body--goguide .article-scenario__q {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.article-body--goguide .article-scenario__a {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* "One more thing" hotel-address note: a light editorial aside — one top
   hairline, no box, never a warning. */
.article-body--goguide .article-gonote {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* Closing reassurance: the final line gets air and a slightly larger,
   medium-weight voice — calm, not instructional. */
.article-body--goguide .article-signoff {
  margin-block-start: var(--space-lg);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
}

/* Article 29 — trip-cost tables -------------------------------------------------
   Scoped semantic-table treatment. The compact mobile treatment keeps the
   comparison columns visible; only a table wrapper may scroll when necessary. */
.article-body--a29 .article-table-wrap {
  width: 100%;
  margin-block: var(--space-lg);
}

.article-body--a29 .article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.article-body--a29 .article-table th,
.article-body--a29 .article-table td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

.article-body--a29 .article-table thead th {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
}

.article-body--a29 .article-table tbody th {
  font-weight: var(--font-weight-bold);
}

.article-body--a29 .article-table th:first-child,
.article-body--a29 .article-table td:first-child {
  width: 42%;
}

.article-body--a29 .article-table th:not(:first-child),
.article-body--a29 .article-table td:not(:first-child) {
  text-align: end;
}

@media (max-width: 47.99em) {
  .article-body--a29 .article-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .article-body--a29 .article-table {
    font-size: 0.8125rem;
  }

  .article-body--a29 .article-table th,
  .article-body--a29 .article-table td {
    padding: 0.5rem 0.375rem;
  }

  .article-body--a29 .article-table thead th {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }

  .article-body--a29 .article-table--a29-comparison {
    table-layout: fixed;
  }

  .article-body--a29 .article-table--a29-comparison th:first-child,
  .article-body--a29 .article-table--a29-comparison td:first-child {
    width: 46%;
  }

  .article-body--a29 .article-table--a29-comparison th:not(:first-child),
  .article-body--a29 .article-table--a29-comparison td:not(:first-child) {
    width: 27%;
  }

  .article-body--a29 .article-table--a29-city {
    min-width: 22rem;
    table-layout: fixed;
  }

  .article-body--a29 .article-table--a29-city th:first-child,
  .article-body--a29 .article-table--a29-city td:first-child {
    width: 19%;
  }

  .article-body--a29 .article-table--a29-city th:nth-child(2),
  .article-body--a29 .article-table--a29-city td:nth-child(2) {
    width: 31%;
  }

  .article-body--a29 .article-table--a29-city th:nth-child(3),
  .article-body--a29 .article-table--a29-city td:nth-child(3) {
    width: 50%;
  }

  .article-body--a29 .article-table--a29-city td:last-child {
    white-space: nowrap;
  }
}

/* Article 31 — advance-booking table ----------------------------------------
   Reuses the Article 29 semantic-table treatment with an A31-only selector.
   On narrow screens, the table retains readable columns inside its own
   horizontal wrapper rather than causing page-level overflow. */
.article-body--a31 .article-table-wrap {
  width: 100%;
  margin-block: var(--space-lg);
}

.article-body--a31 .article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.article-body--a31 .article-table th,
.article-body--a31 .article-table td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

.article-body--a31 .article-table thead th {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
}

.article-body--a31 .article-table tbody th {
  font-weight: var(--font-weight-bold);
}

@media (max-width: 47.99em) {
  .article-body--a31 .article-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .article-body--a31 .article-table {
    min-width: 36rem;
    font-size: 0.8125rem;
  }

  .article-body--a31 .article-table th,
  .article-body--a31 .article-table td {
    padding: 0.5rem 0.375rem;
  }

  .article-body--a31 .article-table thead th {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }
}

/* Article 04 visual QA polish ---------------------------------------------------
   Scoped refinements from mobile review. Article 04 only: the shared
   checklist component, the shared anchor/label system and Articles 01–03
   are untouched. (The ride-hailing diagram tightening is applied in place
   above: container gap xs → 2xs and a smaller, single-line arrow.) */

/* Railway section rhythm: the station and passport anchors are the two real
   friction points between booking and boarding. One calmer beat above each
   (1rem flow rhythm → 1.5rem) separates booking → correct station →
   correct passport → arrival time into readable steps — no new components. */
.article-body--goguide .article-anchor--rail {
  margin-block-start: var(--space-lg);
}

/* "Before you travel": Article 04 keeps the checklist structure (heading,
   red-dot list, "That's enough.") but drops the boxed container for the
   established lighter editorial treatment — transparent surface and a
   single top hairline (the same language as the Article 02/03 callout
   refinements). Shared .article-checklist stays as-is for other pages. */
.article-body--goguide .article-checklist {
  padding: var(--space-sm) 0 0;
  background-color: transparent;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
}

/* Article 05 — "Best Maps for China" (mapguide) --------------------------------
   Inherits the shared article system and mirrors the validated Article 04
   scoped rhythm (section paddings, lighter section H2, compact mobile prose
   density, and the label / emph / note / signoff voices). Article-05-only
   components: shortlist (three scannable intro decisions), judgment (a key
   verdict line), flow (the AMap micro-flow) and cascade (the Google
   judgment). Every selector is scoped to Article 05; no shared or global
   rule is modified and Articles 01–04 keep their approved rendering. */

.article-section--mapguide {
  padding-block-start: var(--space-lg);
}

.article-body--mapguide > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--mapguide {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--mapguide > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

@media (max-width: 47.99em) {
  .article-body--mapguide > p,
  .article-body--mapguide .article-gonote > p:not(.article-priority),
  .article-body--mapguide .article-shortlist__q,
  .article-body--mapguide .article-cascade__beat--muted {
    font-size: 0.9375rem;
    line-height: 1.55;
  }
}

/* Intro shortlist: the three one-line decisions — question muted, answer
   bold, hairline-separated rows. Deliberately not a comparison table. */
.article-body--mapguide .article-shortlist {
  display: grid;
}

.article-body--mapguide .article-shortlist__row {
  padding-block: var(--space-sm);
}

.article-body--mapguide .article-shortlist__row + .article-shortlist__row {
  border-top: 1px solid var(--color-border);
}

.article-body--mapguide .article-shortlist__q {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.article-body--mapguide .article-shortlist__a {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Key judgment line ("Less friction."): the Apple section's verdict —
   pure typography, carrying the section-heading voice. */
.article-body--mapguide .article-judgment {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

/* AMap micro-flow: "Find the place → choose how to get there → go." as a
   vertical three-beat typography flow with muted arrows — the same language
   as the Article 04 pickup diagram, without icons or illustration. Stays
   vertical and narrow at every breakpoint. */
.article-body--mapguide .article-flow {
  display: grid;
  gap: 0.125rem;
  max-width: 26rem;
  margin-block: var(--space-md);
}

.article-body--mapguide .article-flow__beat {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.article-body--mapguide .article-flow__arrow {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1;
}

/* Google judgment cascade: "Can Google Maps open in China?" ↓ "Would we
   trust it as our main map for today's China?" ↓ "We wouldn't." —
   typography-led, no diagram. The verdict carries the restrained brand red
   used for core beats (the same accent as the Article 04 "≠"). */
.article-body--mapguide .article-cascade {
  display: grid;
  gap: var(--space-2xs);
  max-width: 30rem;
  margin-block: var(--space-md);
}

.article-body--mapguide .article-cascade__beat--muted {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.article-body--mapguide .article-cascade__lead {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.article-body--mapguide .article-cascade__beat--key {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.article-body--mapguide .article-cascade__arrow {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1;
}

.article-body--mapguide .article-cascade__verdict {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  color: var(--color-primary-dark);
}

/* Mirrors of the Article 04 editorial voices reused by Article 05
   (emphasized lead, small label icon, hairline note, calm signoff). */
.article-body--mapguide .article-emph {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.article-body--mapguide .article-label-icon {
  display: inline-flex;
  align-items: center;
  margin-inline-end: var(--space-2xs);
  color: var(--color-text-muted);
  vertical-align: -0.15em;
}

.article-body--mapguide .article-label-icon svg {
  width: 1rem;
  height: 1rem;
}

.article-body--mapguide .article-gonote {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.article-body--mapguide .article-signoff {
  margin-block-start: var(--space-lg);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
}

/* Article 06 — Arrival guide (airport → hotel) ----------------------------
   Page-scoped additions only, mirroring the validated Article 02–05 rhythm:
   section spacing, lighter section H2, compact mobile prose, the quiet
   hairline callout note (the approved Article 02 treatment) for the labeled
   asides, plus Article-06-only components: journey strip (Land → Connect →
   Check → Go), transport calls, the decision moment and the official
   resource utility. Every selector is scoped to Article 06; no shared or
   global rule is modified and Articles 01–05 keep their approved rendering. */

.article-section--arrival {
  padding-block-start: var(--space-lg);
}

.article-body--arrival > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--arrival {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--arrival > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

@media (max-width: 47.99em) {
  .article-body--arrival > p,
  .article-body--arrival .article-callout > p,
  .article-body--arrival .article-calls__if,
  .article-body--arrival .article-decision__then,
  .article-body--arrival .article-resource__body {
    font-size: 0.9375rem;
    line-height: 1.55;
  }
}

/* Journey strip: bare typography, no boxes or backgrounds. Desktop: one
   calm horizontal line; mobile (<48em): same horizontal flow with the
   secondary labels hidden, so the strip can never force horizontal
   overflow. */
.article-body--arrival .article-journey {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  margin-block: var(--space-lg);
}

.article-body--arrival .article-journey__step {
  display: grid;
  gap: 0.125rem;
}

.article-body--arrival .article-journey__beat {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.article-body--arrival .article-journey__sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.article-body--arrival .article-journey__arrow {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  padding-inline: var(--space-2xs);
}

@media (max-width: 47.99em) {
  /* Compact orientation cue: the main flow stays on one line and the
     secondary labels drop out — the journey reads at a glance. */
  .article-body--arrival .article-journey__sub {
    display: none;
  }
}

/* Quiet note treatment for every labeled aside (Before you fly / Quick
   check / Have this ready): mirrors the approved Article 02 lesson — a
   single top hairline replaces the boxed card. The shared .article-callout
   base is untouched. */
.article-body--arrival > .article-callout {
  margin-block-start: var(--space-xl);
}

.article-body--arrival .article-callout {
  padding: var(--space-sm) 0 0;
  background-color: transparent;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
}

/* Transport calls: three one-line judgments — condition muted, choice bold,
   hairline-separated rows (the Article 05 shortlist voice). Mobile (<48em)
   intentionally formats every row as two lines: condition first, arrow +
   choice below. */
.article-body--arrival .article-calls {
  display: grid;
}

.article-body--arrival .article-calls__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-sm);
  padding-block: var(--space-sm);
}

.article-body--arrival .article-calls__row + .article-calls__row {
  border-top: 1px solid rgba(221, 227, 234, 0.6);
}

.article-body--arrival .article-calls__if {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.article-body--arrival .article-calls__then {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.article-body--arrival .article-calls__arrow {
  color: var(--color-text-muted);
}

@media (max-width: 47.99em) {
  .article-body--arrival .article-calls__row {
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--space-2xs);
  }
}

/* Decision moment: the question carries the visual weight; Yes / No stay
   secondary hairline branches — no fills, no color, no cards. */
.article-body--arrival .article-decision {
  display: grid;
  gap: var(--space-md);
  margin-block: var(--space-md) var(--space-lg);
}

.article-body--arrival .article-decision__question {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

.article-body--arrival .article-decision__options {
  display: grid;
  gap: var(--space-md);
}

.article-body--arrival .article-decision__branch {
  display: grid;
  gap: var(--space-2xs);
  padding-block-start: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.article-body--arrival .article-decision__answer {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.article-body--arrival .article-decision__then {
  color: var(--color-text-muted);
}

/* Official resource: a quiet utility card in the shared surface / border /
   radius language — clearly informational, never a commercial CTA. The long
   official URL wraps (overflow-wrap) so it cannot overflow mobile. */
.article-body--arrival .article-resource {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--arrival .article-resource__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--arrival .article-resource__name {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.article-body--arrival .article-resource__source {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.article-body--arrival .article-resource__url,
.article-body--arrival .article-resource__url a {
  overflow-wrap: anywhere;
}

/* Contextual internal links: quiet dark brand tone by default (still an
   obvious link via the global underline), ChinaGo Red only on hover. Scoped
   to editorial body paragraphs — nav, footer and the resource link keep the
   global anchor behavior. */
.article-body--arrival > p a {
  color: var(--color-primary-dark);
}

.article-body--arrival > p a:hover {
  color: var(--color-primary);
}

/* Calm signoff: the Article 04/05 voice, bold for the locked closing
   emphasis. The final line uses the same quiet weight. */
.article-body--arrival .article-signoff {
  margin-block-start: var(--space-lg);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Article 07 — Beijing trip-length decision guide (daysguide) ------------------
   Page-scoped additions only, mirroring the validated Article 02–06 rhythm:
   section spacing, lighter section H2, compact mobile prose and the emphasized
   lead voice. Article-07-only components: the duration rows and the three
   booking questions (the Article 04/05 hairline-row voice, with the question
   as the bold scan anchor); the TRIP A / TRIP B comparison reuses the shared
   .article-compare groups. Every selector is scoped to Article 07; no shared
   or global rule is modified and Articles 01–06 keep their approved
   rendering. */

.article-section--daysguide {
  padding-block-start: var(--space-lg);
}

.article-body--daysguide > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--daysguide {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--daysguide > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

@media (max-width: 47.99em) {
  .article-body--daysguide > p,
  .article-body--daysguide .article-days p,
  .article-body--daysguide .article-questions__a {
    font-size: 0.9375rem;
    line-height: 1.55;
  }
}

/* Emphasized lead sentence — the Article 04/05 voice. */
.article-body--daysguide .article-emph {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Entry beat for the two-trip comparison (the Article 03 mirror). */
.article-body--daysguide > .article-compare {
  margin-block-start: var(--space-lg);
}

/* TRIP A / TRIP B: the timing conclusion of each group is the scannable
   takeaway, so it carries the bold voice — no marks, because this is a
   comparison of time, not a scorecard. */
.article-body--daysguide .article-compare__lines li {
  font-weight: var(--font-weight-bold);
}

/* Duration rows: four hairline-separated judgments — the H3 takes the bold
   md scenario voice, supporting copy stays regular. Deliberately not a
   rating scale: no status colors, no badges, no winner. */
.article-body--daysguide .article-days {
  display: grid;
}

.article-body--daysguide .article-days__item {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-md);
}

.article-body--daysguide .article-days__item + .article-days__item {
  border-top: 1px solid var(--color-border);
}

.article-body--daysguide .article-days h3 {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Three booking questions: the inverted scenario voice — the question is
   the primary scan anchor (bold md), the supporting answer stays secondary
   (muted). Typographic pairs separated by hairlines, not cards. */
.article-body--daysguide .article-questions {
  display: grid;
}

.article-body--daysguide .article-questions__item {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
}

.article-body--daysguide .article-questions__item + .article-questions__item {
  border-top: 1px solid var(--color-border);
}

.article-body--daysguide .article-questions__q {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.article-body--daysguide .article-questions__a {
  color: var(--color-text-muted);
}

/* Calm signoff: the Article 04–06 voice. Consecutive reframe lines keep one
   quiet beat between them instead of a full section gap. */
.article-body--daysguide .article-signoff {
  margin-block-start: var(--space-lg);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.article-body--daysguide .article-signoff + .article-signoff {
  margin-block-start: var(--space-xs);
}

/* Article 08 — Itinerary check case (itinerary) --------------------------------
   Page-scoped additions only, mirroring the validated Article 02–07 rhythm:
   section spacing, lighter section H2, compact mobile prose, the emphasized
   lead voice and the calm signoff. Article-08-only components: the original
   plan card (the shared checklist/note box language), the verdict block (the
   existing priority-label accent + judgment voice), the replaced/kept route
   lines and question/answer pairs (the Article 04/06 scenario voice), and
   the before/after change cards. Every selector is scoped to Article 08; no
   shared or global rule is modified and Articles 01–07 keep their approved
   rendering. */

.article-section--itinerary {
  padding-block-start: var(--space-lg);
}

.article-body--itinerary > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--itinerary {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--itinerary > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* Mobile reading rhythm lives at the end of this block (see final polish
   note below) so its scoped overrides win the cascade inside the media
   query. */

/* Emphasized lead sentence — the Article 04/05/07 voice. */
.article-body--itinerary .article-emph {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Original plan: the shared checklist/note box language — surface fill,
   hairline border, standard radius. Quiet uppercase day labels; the routes
   are the scannable line; subtle row dividers only, no icons. */
.article-body--itinerary .article-plan {
  display: grid;
  padding: var(--space-xs) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--itinerary .article-plan__row {
  display: grid;
  gap: 0.125rem;
  padding-block: var(--space-sm);
}

.article-body--itinerary .article-plan__row + .article-plan__row {
  border-top: 1px solid rgba(221, 227, 234, 0.6);
}

.article-body--itinerary .article-plan__day {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--itinerary .article-plan__route {
  font-weight: var(--font-weight-medium);
}

/* Verdict: the existing priority-label accent (restrained brand red) with a
   judgment lead — no box, no fills, no large surfaces. */
.article-body--itinerary .article-verdict {
  display: grid;
  gap: var(--space-2xs);
}

.article-body--itinerary .article-verdict__lead {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

/* Replaced vs kept route lines: typography only — the muted replaced line,
   the bold md kept line. No diagram. */
.article-body--itinerary .article-route {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.article-body--itinerary .article-route--old {
  color: var(--color-text-muted);
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
}

/* Question / answer pairs: the Article 04 scenario voice — question muted,
   decision bold. */
.article-body--itinerary .article-pair__q {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.article-body--itinerary .article-pair__a {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Before / after change cards: three restrained bordered cards — desktop
   three columns, mobile one. AFTER is visually stronger (red micro-label +
   bold md); BEFORE stays muted. No shadows, no gradients, no fills. */
.article-body--itinerary .article-changes {
  display: grid;
  gap: var(--space-md);
}

.article-body--itinerary .article-changes__card {
  display: grid;
  gap: 0.125rem;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--itinerary .article-changes__title {
  margin-block-end: var(--space-2xs);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.article-body--itinerary .article-changes__tag {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--itinerary .article-changes__tag--after {
  color: var(--color-primary-dark);
}

.article-body--itinerary .article-changes__before {
  color: var(--color-text-muted);
}

/* Final polish: the arrow is the pivot between the two stages — slightly
   larger (still muted, no color change) and given its own air above and
   below, so each card reads [BEFORE + its line] ↓ [AFTER + its line]. */
.article-body--itinerary .article-changes__arrow {
  margin-block: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
}

.article-body--itinerary .article-changes__after {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

@media (min-width: 48em) {
  .article-body--itinerary .article-changes {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

/* Calm signoff: the Article 04–07 voice. */
.article-body--itinerary .article-signoff {
  margin-block-start: var(--space-lg);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Mobile reading rhythm (final polish): the long-form case reads slightly
   tighter — flow gap down a step (16 → 11px), line-height 1.55 → 1.5,
   section heads 32 → 26px, compact boxes lose a little padding. Type sizes
   and the H2 hierarchy are untouched; desktop is unaffected. Kept last in
   this block so the scoped overrides win the cascade inside the media
   query. */
@media (max-width: 47.99em) {
  .article-section--itinerary {
    padding-block-start: var(--space-md);
  }
  .article-body--itinerary {
    --flow-space: 0.6875rem;
  }
  .article-body--itinerary > p,
  .article-body--itinerary .article-plan__route,
  .article-body--itinerary .article-route--old,
  .article-body--itinerary .article-pair__q,
  .article-body--itinerary .article-changes__before,
  .article-body--itinerary .article-priority-list li {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--itinerary > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--itinerary .article-plan__row {
    padding-block: var(--space-xs);
  }
  .article-body--itinerary .article-changes {
    gap: var(--space-sm);
  }
  .article-body--itinerary .article-changes__card {
    padding: var(--space-sm);
  }
  .article-body--itinerary .article-priority-list {
    gap: var(--space-xs);
  }
  .article-body--itinerary .article-signoff {
    margin-block-start: var(--space-md);
  }
}

/* Article 09 — 10 days / 5 cities itinerary check (cities) ---------------------
   Page-scoped additions only, mirroring the validated Article 02–08 rhythm:
   section spacing, lighter section H2, compact mobile prose, the emphasized
   lead voice, the calm signoff and the Article 08 mobile reading rhythm. The
   transfer table reuses the global Article 03 article-judge component
   unchanged except for a desktop-only three-column ratio scoped to this page.
   No shared or global rule is modified; Articles 01–08 keep their approved
   rendering. */

.article-section--cities {
  padding-block-start: var(--space-lg);
}

.article-body--cities > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--cities {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--cities > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* Route line: the Article 04/08 kept-route voice — bold md, wraps naturally. */
.article-body--cities .article-routeline {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* First judgment answer: the Article 08 verdict-lead voice. */
.article-body--cities .article-answer {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

/* Emphasized lines — the Article 04–08 voice. */
.article-body--cities .article-emph {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Transfer table: the global article-judge with a three-column ratio on
   desktop only — scoped and inside the media query, so the global mobile
   single-column stack (head hidden, mlabels shown) keeps winning below 48em. */
@media (min-width: 48em) {
  .article-body--cities .article-judge__head,
  .article-body--cities .article-judge__row {
    grid-template-columns: 1.05fr 1.15fr 1.45fr;
  }
}

/* Calm signoff: the Article 04–08 voice. */
.article-body--cities .article-signoff {
  margin-block-start: var(--space-lg);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Mobile reading rhythm (the Article 08 final-polish settings): slightly
   tighter flow and prose, heads 32 → 26px; type sizes and the H2 hierarchy
   are untouched; desktop is unaffected. Kept last so the scoped overrides
   win the cascade inside the media query. */
@media (max-width: 47.99em) {
  .article-section--cities {
    padding-block-start: var(--space-md);
  }
  .article-body--cities {
    --flow-space: 0.6875rem;
  }
  .article-body--cities > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--cities > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--cities .article-signoff {
    margin-block-start: var(--space-md);
  }
}

/* Article 10 — 10 days family itinerary check (check10) ---------------------
   Page-scoped additions only, mirroring the validated Article 02–09 rhythm:
   section spacing, lighter section H2, compact mobile prose, the emphasized
   lead voice and the calm signoff. Article-10-only components reuse the
   shared checklist/note box language (surface fill, hairline border, standard
   radius, quiet uppercase micro-labels): the traveler context grid, the
   original itinerary ledger, the reality-check judgment panel, the Day 03
   decision strip, the Xi'an decision fork and the checked-plan decision map.
   Status labels reuse the existing semantic palette (muted neutral, gold
   backup accent, restrained brand red) — no traffic-light colors. Every
   selector is scoped to Article 10; no shared or global rule is modified and
   Articles 01–09 keep their approved rendering. */

.article-section--check10 {
  padding-block-start: var(--space-lg);
}

.article-body--check10 > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--check10 {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--check10 > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* Keep the token "10-day" unbroken in the itinerary H2 on narrow screens —
   the only scoped no-wrap in this article. */
.article-body--check10 .article-keep {
  white-space: nowrap;
}

/* Route lines: the Article 04/08/09 kept-route voice — bold md. */
.article-body--check10 .article-routeline {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Emphasized lines — the Article 04–09 voice. */
.article-body--check10 .article-emph {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Calm signoff: the Article 04–09 voice. */
.article-body--check10 .article-signoff {
  margin-block-start: var(--space-lg);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* High-emphasis editorial question: the Article 08 verdict-lead voice, one
   step larger — the pivot of the article. */
.article-body--check10 .article-bigq {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

/* Quoted family voice inside the reopen branch — medium weight, no box. */
.article-body--check10 .article-voice {
  font-weight: var(--font-weight-medium);
}

/* H3 branch subheads: modest beats between the fork and the explanations. */
.article-body--check10 .article-subhead {
  margin-block-start: var(--space-lg);
}

/* Day 10: whitespace = flexibility — the section head gets a visibly more
   open beat and a quiet kicker; the pull-quote gets air, not a box. */
.article-body--check10 > .article-section-head--open {
  margin-block-start: var(--space-2xl);
}

.article-body--check10 .article-kicker {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check10 .article-quote {
  margin-block: var(--space-xl);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

/* Traveler context: ONE neutral container — four columns on desktop, a 2×2
   grid on mobile. Keys are quiet uppercase micro-labels; values carry the
   fact. No icons, no separate cards. */
.article-body--check10 .article-context {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--check10 .article-context__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check10 .article-context__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm) var(--space-md);
}

.article-body--check10 .article-context__item {
  display: grid;
  gap: var(--space-2xs);
}

.article-body--check10 .article-context__k {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check10 .article-context__v {
  font-size: var(--text-sm);
}

@media (min-width: 48em) {
  .article-body--check10 .article-context__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Original itinerary ledger: the shared checklist/note box language — city
   groups as desktop columns, a sequential compact timeline on mobile. Day
   rows are a narrow number gutter + content behind hairline dividers; quiet
   uppercase city heads and overnight connectors separate the groups. No
   per-day cards. */
.article-body--check10 .article-ledger {
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--check10 .article-ledger__col {
  display: grid;
}

.article-body--check10 .article-ledger__col + .article-ledger__col {
  margin-block-start: var(--space-sm);
}

.article-body--check10 .article-ledger__city {
  padding: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check10 .article-ledger__days {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.article-body--check10 .article-ledger__row {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--space-2xs);
  align-items: baseline;
  padding-block: var(--space-2xs);
}

.article-body--check10 .article-ledger__row + .article-ledger__row {
  border-top: 1px solid rgba(221, 227, 234, 0.6);
}

.article-body--check10 .article-ledger__num {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.article-body--check10 .article-ledger__txt {
  font-size: var(--text-sm);
}

.article-body--check10 .article-ledger__link {
  margin-block-start: var(--space-2xs);
  padding: var(--space-2xs) var(--space-2xs) 0;
  border-top: 1px solid rgba(221, 227, 234, 0.6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 48em) {
  .article-body--check10 .article-ledger {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
  }

  .article-body--check10 .article-ledger__col + .article-ledger__col {
    margin-block-start: 0;
  }
}

/* Reality check: a professional judgment panel in the note-box language —
   the question stays quiet, the judgment is the strongest element, the route
   is the scannable line, and the evidence is secondary behind a hairline.
   Neutral surface — deliberately not an alert. */
.article-body--check10 .article-reality {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--check10 .article-reality__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check10 .article-reality__q {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.article-body--check10 .article-reality__judge {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.article-body--check10 .article-reality__route {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.article-body--check10 .article-reality__evline {
  margin-block-start: var(--space-2xs);
  padding-block-start: var(--space-2xs);
  border-top: 1px solid rgba(221, 227, 234, 0.6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.article-body--check10 .article-reality__ev {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Day 03 decision strip: ONE compact container — a leading day label and
   three decision areas behind hairlines (stacked rows on mobile).
   Visually secondary to the judgment panels around it. */
.article-body--check10 .article-daystrip {
  display: grid;
  padding-block: var(--space-2xs);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--check10 .article-daystrip__day {
  padding: var(--space-xs) var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check10 .article-daystrip__slot {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
}

.article-body--check10 .article-daystrip__slot + .article-daystrip__slot {
  border-top: 1px solid rgba(221, 227, 234, 0.6);
}

.article-body--check10 .article-daystrip__tag {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check10 .article-daystrip__val {
  font-size: var(--text-sm);
}

.article-body--check10 .article-daystrip__val--key {
  font-weight: var(--font-weight-bold);
}

@media (min-width: 48em) {
  .article-body--check10 .article-daystrip {
    grid-template-columns: auto 1fr 1fr 1fr;
    align-items: center;
  }

  .article-body--check10 .article-daystrip__day {
    padding-inline: var(--space-lg);
  }

  .article-body--check10 .article-daystrip__slot + .article-daystrip__slot {
    border-top: none;
    border-left: 1px solid rgba(221, 227, 234, 0.6);
  }
}
/* Xi'an decision fork: ONE container, two branches — desktop side by side
   behind a center hairline, mobile stacked. Navigation/judgment only: a
   quiet condition label, the strong act, two short lines each. */
.article-body--check10 .article-fork {
  display: grid;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--check10 .article-fork__branch {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md);
}

.article-body--check10 .article-fork__branch + .article-fork__branch {
  border-top: 1px solid var(--color-border);
}

.article-body--check10 .article-fork__cond {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check10 .article-fork__act {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.article-body--check10 .article-fork__line {
  font-size: var(--text-sm);
}

.article-body--check10 .article-fork__line + .article-fork__line {
  margin-block-start: var(--space-2xs);
}

@media (min-width: 48em) {
  .article-body--check10 .article-fork {
    grid-template-columns: 1fr 1fr;
  }

  .article-body--check10 .article-fork__branch {
    padding: var(--space-lg);
  }

  .article-body--check10 .article-fork__branch + .article-fork__branch {
    border-top: none;
    border-left: 1px solid var(--color-border);
  }
}

/* Checked plan / decision map: the answer to "what changed after the
   check?" — compact judgment rows in the note-box language, deliberately
   not another full itinerary. Status labels reuse the existing semantic
   palette: muted neutral for KEEP / KEEP FLEXIBLE, the gold backup accent
   for ADJUST, the restrained brand red for the open QUESTION. */
.article-body--check10 .article-map {
  display: grid;
  padding: var(--space-2xs) var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--check10 .article-map__row {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-2xs) var(--space-sm);
  align-items: baseline;
  padding-block: var(--space-xs);
}

.article-body--check10 .article-map__row + .article-map__row,
.article-body--check10 .article-map__cond + .article-map__row {
  border-top: 1px solid rgba(221, 227, 234, 0.6);
}

.article-body--check10 .article-map__days {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.article-body--check10 .article-map__status {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check10 .article-map__status--keep,
.article-body--check10 .article-map__status--flex {
  color: var(--color-text-muted);
}

.article-body--check10 .article-map__status--adjust {
  color: var(--color-gold);
}

.article-body--check10 .article-map__status--question {
  color: var(--color-primary-dark);
}

.article-body--check10 .article-map__note {
  grid-column: 2;
  font-size: var(--text-sm);
}

.article-body--check10 .article-map__cond {
  display: grid;
  gap: var(--space-2xs);
  margin-inline-start: calc(3rem + var(--space-sm));
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md);
  border-left: 1px solid var(--color-border);
}

.article-body--check10 .article-map__condq {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.article-body--check10 .article-map__condline {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.article-body--check10 .article-map__opt {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

@media (min-width: 48em) {
  .article-body--check10 .article-map {
    padding-inline: var(--space-lg);
  }

  .article-body--check10 .article-map__row {
    grid-template-columns: 2.75rem 8.5rem 1fr;
  }

  .article-body--check10 .article-map__note {
    grid-column: auto;
  }

  .article-body--check10 .article-map__cond {
    margin-inline-start: calc(2.75rem + 8.5rem + var(--space-sm) * 2);
  }
}
/* Closing CTA: the existing light article-close band — a quiet postscript,
   not a promotional banner. The approved uppercase casing is typographic
   (text-transform), so the underlying copy stays intact. */
.article-close--check10 .article-close__title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-close--check10 .article-close__cta {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mobile reading rhythm (the Article 08/09 final-polish settings): slightly
   tighter flow and prose, heads 32 → 26px (the Day 10 open beat a step
   above), compact ledger rows and box padding. Type sizes and the H2
   hierarchy are untouched; desktop is unaffected. Kept last so the scoped
   overrides win the cascade inside the media query. */
@media (max-width: 47.99em) {
  .article-section--check10 {
    padding-block-start: var(--space-md);
  }
  .article-body--check10 {
    --flow-space: 0.6875rem;
  }
  .article-body--check10 > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--check10 > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--check10 > .article-section-head--open {
    margin-block-start: 2.25rem;
  }
  .article-body--check10 .article-quote {
    margin-block: var(--space-lg);
  }
  .article-body--check10 .article-bigq {
    font-size: 1.375rem;
  }
  .article-body--check10 .article-ledger__row {
    padding-block: 0.375rem;
  }
  .article-body--check10 .article-context,
  .article-body--check10 .article-ledger,
  .article-body--check10 .article-reality,
  .article-body--check10 .article-daystrip,
  .article-body--check10 .article-fork,
  .article-body--check10 .article-map {
    padding-inline: var(--space-md);
  }
  .article-body--check10 .article-signoff {
    margin-block-start: var(--space-md);
  }
}

/* Article 11 — 7 days / 3 cities trip check (check11) ---------------------------
   Page-scoped additions only, mirroring the validated Article 08–10 rhythm:
   section spacing, lighter section H2, compact mobile prose, the emphasized
   lead voice, the verdict-lead answer, the pivot question, the pull quote and
   the calm signoff. Article-11 components: the traveler-context evidence panel
   (the Article 10 context voice with a priority tier line), the compact route
   check (the Article 10 reality voice), the Xi'an keep/drop trade-off (two
   identical panels — the main visual moment), the ChinaGo judgment panel and
   the one-question-left alternatives. Every selector is scoped to Article 11;
   no shared or global rule is modified and Articles 01–10 keep their approved
   rendering. */

.article-section--check11 {
  padding-block-start: var(--space-lg);
}

.article-body--check11 > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--check11 {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--check11 > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* Route lines: the Article 04/08/09/10 kept-route voice — bold md. */
.article-body--check11 .article-routeline {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Emphasized lines — the Article 04–10 voice. */
.article-body--check11 .article-emph {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* First judgment answer: the Article 09 verdict-lead voice. */
.article-body--check11 .article-answer {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

/* High-emphasis editorial question: the Article 08/10 pivot voice. */
.article-body--check11 .article-bigq {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

/* Quiet inner question: the Article 08 pair-q voice — muted medium, no box. */
.article-body--check11 .article-voice {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* Pull quote: one level below the section H2 and one above body text — air,
   not a box. Reads as an editorial insight, never a second heading (A11
   polish: reduced from the Article 10 xl voice). */
.article-body--check11 .article-quote {
  margin-block: var(--space-xl);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

/* Calm signoff: the Article 04–10 voice. */
.article-body--check11 .article-signoff {
  margin-block-start: var(--space-lg);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Traveler context: ONE neutral evidence panel in the Article 10 context
   voice — a 7-days lead strip, then the three cities behind hairlines.
   Keys are quiet uppercase micro-labels; the tier line carries the priority
   contrast using only the existing semantic palette (text for PRIORITY, the
   restrained gold accent for HIGH INTEREST, muted for LOWER PRIORITY —
   deliberately not red/green status colors); values carry the fact.
   No icons, no separate cards. */
.article-body--check11 .article-travelers {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--check11 .article-travelers__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check11 .article-travelers__lead {
  display: grid;
  gap: var(--space-2xs);
  padding-block-end: var(--space-sm);
  border-block-end: 1px solid rgba(221, 227, 234, 0.6);
}

.article-body--check11 .article-travelers__grid {
  display: grid;
  gap: var(--space-sm);
}

.article-body--check11 .article-travelers__item {
  display: grid;
  gap: var(--space-2xs);
}

.article-body--check11 .article-travelers__item + .article-travelers__item {
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid rgba(221, 227, 234, 0.6);
}

.article-body--check11 .article-travelers__k {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check11 .article-travelers__tier {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.article-body--check11 .article-travelers__tier--high {
  color: var(--color-gold);
}

.article-body--check11 .article-travelers__tier--low {
  color: var(--color-text-muted);
}

.article-body--check11 .article-travelers__v {
  font-size: var(--text-sm);
}

@media (min-width: 48em) {
  .article-body--check11 .article-travelers__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .article-body--check11 .article-travelers__item + .article-travelers__item {
    padding-block-start: 0;
    padding-inline-start: var(--space-lg);
    border-block-start: none;
    border-inline-start: 1px solid rgba(221, 227, 234, 0.6);
  }
}

/* Route check: compact supporting evidence in the Article 10 reality voice —
   the label and route stay quiet, the checked-options line sits behind a
   hairline, and the fits-in-7-days judgment is the scannable line with its
   caveat. Neutral surface — deliberately not an alert, deliberately not the
   main visual. */
.article-body--check11 .article-routecheck {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--check11 .article-routecheck__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check11 .article-routecheck__route {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.article-body--check11 .article-routecheck__ev {
  padding-block-start: var(--space-2xs);
  border-block-start: 1px solid rgba(221, 227, 234, 0.6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.article-body--check11 .article-routecheck__judge {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.article-body--check11 .article-routecheck__caveat {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Xi'an trade-off: the MAIN visual — two identical panels, desktop side by
   side, mobile stacked. Both options carry exactly the same weight: same
   surface, border and type; no green/red, no check/cross, no dominant KEEP
   panel. Inside each panel: the act (the strong uppercase voice), the route
   (the scannable line, wrapping naturally), then the two YOU-… groups behind
   hairlines with one-line items. */
.article-body--check11 .article-tradeoff {
  display: grid;
  gap: var(--space-md);
}

.article-body--check11 .article-tradeoff__panel {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--check11 .article-tradeoff__act {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.article-body--check11 .article-tradeoff__route {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.article-body--check11 .article-tradeoff__group {
  display: grid;
  gap: var(--space-2xs);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid rgba(221, 227, 234, 0.6);
}

.article-body--check11 .article-tradeoff__tag {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check11 .article-tradeoff__list {
  display: grid;
}

.article-body--check11 .article-tradeoff__list li {
  padding-block: var(--space-2xs);
  font-size: var(--text-sm);
}

.article-body--check11 .article-tradeoff__list li + li {
  border-block-start: 1px solid rgba(221, 227, 234, 0.6);
}

@media (min-width: 48em) {
  .article-body--check11 .article-tradeoff {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .article-body--check11 .article-tradeoff__panel {
    padding: var(--space-lg);
  }
}

/* ChinaGo judgment: a professional review result in the Article 10 reality
   voice — one compact panel, secondary to the trade-off above it. The call is
   the strongest element; the WHY evidence and the CONDITION sit behind
   hairlines. */
.article-body--check11 .article-cg {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--check11 .article-cg__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check11 .article-cg__call {
  margin-block-end: var(--space-2xs);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.article-body--check11 .article-cg__why {
  display: grid;
  gap: var(--space-2xs);
  margin-block-start: var(--space-xs);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid rgba(221, 227, 234, 0.6);
}

.article-body--check11 .article-cg__tag {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check11 .article-cg__list {
  display: grid;
}

.article-body--check11 .article-cg__list li {
  padding-block: var(--space-2xs);
  font-size: var(--text-sm);
}

.article-body--check11 .article-cg__list li + li {
  border-block-start: 1px solid rgba(221, 227, 234, 0.6);
}

.article-body--check11 .article-cg__cond {
  margin-block-start: var(--space-xs);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid rgba(221, 227, 234, 0.6);
  font-size: var(--text-sm);
}

.article-body--check11 .article-cg__condtag {
  margin-inline-end: var(--space-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* One question left: the lightest treatment on the page — no surface, no
   boxes around the alternatives, so they read as decision alternatives,
   never as buttons or CTAs. A quiet label, the question, then the two
   options separated by a small "or" behind a hairline; side by side on
   desktop, stacked on mobile. */
.article-body--check11 .article-oneq {
  display: grid;
  gap: var(--space-2xs);
}

.article-body--check11 .article-oneq__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--check11 .article-oneq__q {
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
}

.article-body--check11 .article-oneq__opts {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-2xs);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid rgba(221, 227, 234, 0.6);
}

.article-body--check11 .article-oneq__opt {
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
}

.article-body--check11 .article-oneq__or {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

@media (min-width: 48em) {
  .article-body--check11 .article-oneq__opts {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: var(--space-lg);
  }
}

/* Closing CTA: the existing light article-close band — a quiet postscript,
   not a promotional banner. The approved uppercase casing is typographic
   (text-transform), so the underlying copy stays intact. */
.article-close--check11 .article-close__title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-close--check11 .article-close__cta {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mobile reading rhythm (the Article 08–10 final-polish settings): slightly
   tighter flow and prose, compact box padding and list rows. Type sizes and
   the H2 hierarchy are untouched; desktop is unaffected. Kept last so the
   scoped overrides win the cascade inside the media query. */
@media (max-width: 47.99em) {
  .article-section--check11 {
    padding-block-start: var(--space-md);
  }
  .article-body--check11 {
    --flow-space: 0.6875rem;
  }
  .article-body--check11 > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--check11 > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--check11 .article-quote {
    margin-block: var(--space-lg);
  }
  .article-body--check11 .article-bigq {
    font-size: 1.375rem;
  }
  .article-body--check11 .article-travelers,
  .article-body--check11 .article-routecheck,
  .article-body--check11 .article-tradeoff__panel,
  .article-body--check11 .article-cg {
    padding-inline: var(--space-md);
  }
  .article-body--check11 .article-tradeoff__list li {
    padding-block: 0.375rem;
  }
  .article-body--check11 .article-signoff {
    margin-block-start: var(--space-md);
  }
}

/* Article 12 — Autumn timing guide (autumn) ---------------------------------
   Page-scoped additions only, mirroring the validated Article 08–11 rhythm:
   section spacing, lighter section H2, compact mobile prose, the emphasized
   lead voice, the H3 subhead beat, the A08 one-line verdict (priority-label
   accent + bold lead, no box), the A04/08 route line and the existing global
   light-note language for the Golden Week constraint. Article-12-only
   components: the autumn timing strip — approximate planning windows as soft
   gold pills on a Sep/Oct/Nov grid whose boundary hairlines stay continuously
   readable and whose overlaps read as overlaps — and the compact four-question
   decision checklist. Every selector is scoped to Article 12; no shared or
   global rule is modified and Articles 01–11 keep their approved rendering. */

.article-section--autumn {
  padding-block-start: var(--space-lg);
}

.article-body--autumn > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--autumn {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--autumn > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* Route line: the Article 04/08–11 kept-route voice — bold md. */
.article-body--autumn .article-routeline {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Emphasized lines — the Article 04–11 voice. */
.article-body--autumn .article-emph {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* High-emphasis editorial question: the Article 08/10/11 pivot voice. */
.article-body--autumn .article-bigq {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
}

/* H3 destination subheads: the Article 10 beat. */
.article-body--autumn .article-subhead {
  margin-block-start: var(--space-lg);
}

/* Per-destination judgment: the Article 08 one-line verdict — priority-label
   accent + bold lead, no box. */
.article-body--autumn .article-verdict {
  display: grid;
  gap: var(--space-2xs);
}

.article-body--autumn .article-verdict__lead {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

/* Autumn timing strip: the note-box surface carrying a Sep/Oct/Nov grid.
   Windows are soft gold pills (gold-soft fill, gold hairline edge) placed on
   a 30-unit month scale — no dates, no peak labels, only approximate windows
   whose overlaps are honest. The month boundary rails are full-height
   hairlines above the bars, so a window crossing a boundary — Kanas across
   Sep/Oct — reads as crossing it. */
.article-body--autumn .article-timing {
  --timing-name: 10.5rem;
  --timing-gap: var(--space-md);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--autumn .article-timing__head,
.article-body--autumn .article-timing__row {
  display: grid;
  grid-template-columns: var(--timing-name) 1fr;
  column-gap: var(--timing-gap);
  row-gap: var(--space-2xs);
  align-items: center;
}

.article-body--autumn .article-timing__m {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
}

.article-body--autumn .article-timing__m p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.article-body--autumn .article-timing__m p + p {
  border-left: 1px solid rgba(221, 227, 234, 0.6);
}

.article-body--autumn .article-timing__lanes {
  position: relative;
  margin-block-start: var(--space-2xs);
}

.article-body--autumn .article-timing__rails {
  position: absolute;
  inset-block: 0;
  z-index: 1;
  pointer-events: none;
}

.article-body--autumn .article-timing__rails::before,
.article-body--autumn .article-timing__rails::after {
  content: "";
  position: absolute;
  inset-block: 0;
  border-left: 1px solid rgba(221, 227, 234, 0.6);
}

.article-body--autumn .article-timing__rails::before {
  left: calc(var(--timing-name) + var(--timing-gap) + (100% - var(--timing-name) - var(--timing-gap)) / 3);
}

.article-body--autumn .article-timing__rails::after {
  left: calc(var(--timing-name) + var(--timing-gap) + (100% - var(--timing-name) - var(--timing-gap)) * 2 / 3);
}

.article-body--autumn .article-timing__row {
  padding-block: 0.375rem;
}

.article-body--autumn .article-timing__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.article-body--autumn .article-timing__track {
  position: relative;
  block-size: 0.875rem;
}

.article-body--autumn .article-timing__bar {
  position: absolute;
  inset-block: 0;
  left: calc(var(--from) / 30 * 100%);
  width: calc((var(--to) - var(--from)) / 30 * 100%);
  background-color: var(--color-gold-soft);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
}

/* Decision checklist: the note-box language as a compact four-question grid —
   quiet uppercase handles, medium-weight questions, no cards, no icons. */
.article-body--autumn .article-dcheck {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--autumn .article-dcheck__item {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
}

.article-body--autumn .article-dcheck__k {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--autumn .article-dcheck__q {
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
}

@media (min-width: 48em) {
  .article-body--autumn .article-dcheck {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-xl);
    align-items: start;
  }
}

/* Closing CTA: the existing light article-close band — a quiet postscript,
   not a promotional banner. The approved uppercase casing is typographic
   (text-transform), so the underlying copy stays intact. */
.article-close--autumn .article-close__title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-close--autumn .article-close__cta {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mobile reading rhythm (the Article 08–11 final-polish settings): slightly
   tighter flow and prose, compact box padding, and a timing-strip reflow —
   destination names move above full-width tracks, so the Sep/Oct/Nov rails
   and the bar relationships stay readable instead of shrinking. Kept last so
   the scoped overrides win the cascade inside the media query. */
@media (max-width: 47.99em) {
  .article-section--autumn {
    padding-block-start: var(--space-md);
  }
  .article-body--autumn {
    --flow-space: 0.6875rem;
  }
  .article-body--autumn > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--autumn > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--autumn .article-bigq {
    font-size: 1.375rem;
  }
  .article-body--autumn .article-note,
  .article-body--autumn .article-dcheck {
    padding-inline: var(--space-md);
  }
  .article-body--autumn .article-note > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--autumn .article-timing {
    --timing-name: 0rem;
    --timing-gap: 0rem;
    padding-inline: var(--space-md);
  }
  .article-body--autumn .article-timing__head,
  .article-body--autumn .article-timing__row {
    grid-template-columns: 1fr;
  }
  .article-body--autumn .article-timing__corner {
    display: none;
  }
  .article-body--autumn .article-timing__rails::before {
    left: calc(100% / 3);
  }
  .article-body--autumn .article-timing__rails::after {
    left: calc(200% / 3);
  }
}

/* Article 13 — Yangtze cruise judgment (yangtze) -----------------------------
   Page-scoped additions only, mirroring the validated Article 08–12 rhythm:
   section spacing, lighter section H2, compact mobile prose, the emphasized
   lead voice and the Article 08/10/11 big-question line. Article-13-only
   components: the traveler-thought quote (a quiet left-hairline blockquote,
   not a testimonial card) and the final three-call decision block (one
   restrained note-box surface, three stacked rows separated by hairlines —
   scannable editorial judgments, never pricing tiers). Every selector is
   scoped to Article 13; no shared or global rule is modified and Articles
   01–12 keep their approved rendering. */

.article-section--yangtze {
  padding-block-start: var(--space-lg);
}

.article-body--yangtze > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--yangtze {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--yangtze > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* Emphasized lines — the Article 04–12 voice. */
.article-body--yangtze .article-emph {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* High-emphasis editorial judgment: the Article 08/10/11 pivot voice. */
.article-body--yangtze .article-bigq {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
}

/* Traveler-thought quotes: simple editorial quotes — a left hairline and a
   slight indent, md text. Not testimonial cards: no surface, no box, no
   attribution row. */
.article-body--yangtze blockquote {
  padding-inline-start: var(--space-md);
  border-inline-start: 2px solid var(--color-border);
  font-size: var(--text-md);
}

/* Final three calls: one restrained decision component — the note-box language
   carrying three stacked rows separated by hairlines. Quiet uppercase handles
   in the same neutral voice for all three (they are editorial judgments, not
   commercial tiers), a medium-weight condition line, regular follow-up
   prose. */
.article-body--yangtze .article-decision {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--yangtze .article-decision__item {
  display: grid;
  gap: var(--space-2xs);
}

.article-body--yangtze .article-decision__item + .article-decision__item {
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-border);
}

.article-body--yangtze .article-decision__k {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--yangtze .article-decision__if {
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
}

/* Closing CTA: the existing light article-close band — a quiet postscript,
   not a promotional banner. The approved uppercase casing is typographic
   (text-transform), so the underlying copy stays intact. */
.article-close--yangtze .article-close__title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-close--yangtze .article-close__cta {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mobile reading rhythm (the Article 08–12 final-polish settings): slightly
   tighter flow and prose, compact box padding, compact quotes. The decision
   block is already a single stacked column, so it only tightens. Kept last so
   the scoped overrides win the cascade inside the media query. */
@media (max-width: 47.99em) {
  .article-section--yangtze {
    padding-block-start: var(--space-md);
  }
  .article-body--yangtze {
    --flow-space: 0.6875rem;
  }
  .article-body--yangtze > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--yangtze > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--yangtze .article-bigq {
    font-size: 1.375rem;
  }
  .article-body--yangtze blockquote {
    padding-inline-start: var(--space-sm);
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--yangtze .article-decision {
    padding-inline: var(--space-md);
  }
  .article-body--yangtze .article-decision__if {
    font-size: 1rem;
    line-height: 1.5;
  }
  .article-body--yangtze .article-decision__item > p:not(.article-decision__k):not(.article-decision__if) {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
}

/* Article 14 — Summer itinerary adjustments (summer) -------------------------
   Page-scoped additions only, mirroring the validated Article 08–13 rhythm:
   section spacing, lighter section H2, compact mobile prose, the emphasized
   lead voice, the Article 08/10/11 big-judgment line, the Article 04/08–12
   route line (bold md, wraps naturally — no diagrams), and the global
   Article 01/10 plain priority list for the two scannable day lines. The four
   traveler cases stay normal editorial sections — no cards, no verdict badges,
   no repeated labels. Every selector is scoped to Article 14; no shared or
   global rule is modified and Articles 01–13 keep their approved rendering. */

.article-section--summer {
  padding-block-start: var(--space-lg);
}

.article-body--summer > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--summer {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--summer > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* Emphasized judgment lines — the Article 04–13 voice. */
.article-body--summer .article-emph {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Key editorial judgment of the opening: the Article 08/10–13 pivot voice. */
.article-body--summer .article-bigq {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
}

/* Route lines: the Article 04/08–13 kept-route voice — bold md, wraps
   naturally at the arrow spaces, no diagram. */
.article-body--summer .article-routeline {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Closing CTA: the existing light article-close band — a quiet postscript,
   not a promotional banner. The approved uppercase casing is typographic
   (text-transform), so the underlying copy stays intact. */
.article-close--summer .article-close__title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-close--summer .article-close__cta {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mobile reading rhythm (the Article 08–13 final-polish settings): slightly
   tighter flow and prose and compact day-list lines. Route lines keep the
   Article 12/13 treatment (bold md) and simply wrap across lines. Kept last
   so the scoped overrides win the cascade inside the media query. */
@media (max-width: 47.99em) {
  .article-section--summer {
    padding-block-start: var(--space-md);
  }
  .article-body--summer {
    --flow-space: 0.6875rem;
  }
  .article-body--summer > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--summer > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--summer .article-bigq {
    font-size: 1.375rem;
  }
  .article-body--summer .article-priority-list li {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
}

/* Article 15 — Winter traveler intent (winter) --------------------------------
   Page-scoped additions only, mirroring the validated Article 08–14 rhythm:
   section spacing, lighter section H2, compact mobile prose, the emphasized
   lead voice, the Article 08/10–14 big-judgment line, and the Article
   04/08–14 route line (bold md, wraps naturally — no diagrams). The three
   quoted traveler-intent sections stay plain editorial flow — no cards, no
   equal-height modules, no verdict badges, no winter-guide scaffolding.
   Every selector is scoped to Article 15; no shared or global rule is
   modified and Articles 01–14 keep their approved rendering. */

.article-section--winter {
  padding-block-start: var(--space-lg);
}

.article-body--winter > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--winter {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--winter > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* Emphasized judgment lines — the Article 04–14 voice. */
.article-body--winter .article-emph {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Key editorial question of the opening: the Article 08/10–14 pivot voice. */
.article-body--winter .article-bigq {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
}

/* Route line: the Article 04/08–14 kept-route voice — bold md, wraps
   naturally at the arrow spaces, no diagram. */
.article-body--winter .article-routeline {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Closing CTA: the existing light article-close band — a quiet postscript,
   not a promotional banner. The approved uppercase casing is typographic
   (text-transform), so the underlying copy stays intact. */
.article-close--winter .article-close__title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-close--winter .article-close__cta {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mobile reading rhythm (the Article 08–14 final-polish settings): slightly
   tighter flow and prose. Emphasis lines keep the existing md-bold mobile
   treatment; the route line simply wraps across lines. Kept last so the
   scoped overrides win the cascade inside the media query. */
@media (max-width: 47.99em) {
  .article-section--winter {
    padding-block-start: var(--space-md);
  }
  .article-body--winter {
    --flow-space: 0.6875rem;
  }
  .article-body--winter > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--winter > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--winter .article-bigq {
    font-size: 1.375rem;
  }
}

/* Article 16 — High-speed train first-ride guide (hst) ------------------------
   Page-scoped additions only, mirroring the validated Article 08–15 rhythm:
   section spacing, lighter section H2, compact mobile prose, the emphasized
   lead voice, the Article 08/10–15 big-judgment line, and the global
   Article 01/10/14 plain priority list for the station comparison and the
   five-item recap (stacks vertically by default — no infographic, no
   five-step diagram). This is a practical guide, so the page stays in normal
   editorial flow: no cards, no verdict badges, no railway-system UI. Every
   selector is scoped to Article 16; no shared or global rule is modified and
   Articles 01–15 keep their approved rendering. */

.article-section--hst {
  padding-block-start: var(--space-lg);
}

.article-body--hst > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--hst {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--hst > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* Emphasized practical lines — the Article 04–15 voice (small, not a warning). */
.article-body--hst .article-emph {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* The one big editorial line — the Article 08/10–15 pivot voice. */
.article-body--hst .article-bigq {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
}

/* Closing CTA: the existing light article-close band — a quiet postscript,
   not a promotional banner. The approved uppercase casing is typographic
   (text-transform), so the underlying copy stays intact. */
.article-close--hst .article-close__title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-close--hst .article-close__cta {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mobile reading rhythm (the Article 08–15 final-polish settings): slightly
   tighter flow and prose and compact list lines. The lists are single-column
   grids already, so the comparison and recap simply stack. Kept last so the
   scoped overrides win the cascade inside the media query. */
@media (max-width: 47.99em) {
  .article-section--hst {
    padding-block-start: var(--space-md);
  }
  .article-body--hst {
    --flow-space: 0.6875rem;
  }
  .article-body--hst > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--hst > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--hst .article-bigq {
    font-size: 1.375rem;
  }
  .article-body--hst .article-priority-list {
    gap: var(--space-xs);
  }
  .article-body--hst .article-priority-list li {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
}

/* Article 17 — Attractions booking decision + reference (bka) -----------------
   Page-scoped additions only, mirroring the validated Article 08–16 rhythm:
   section spacing, lighter section H2, compact mobile prose. Adds three small
   page-local voices — the OUR RULE judgment callout (the article's single
   main visual), the forward cue to the official links, and the compact
   single-column reservation directory (city groups + plain entries; a
   practical reference, not article cards). No hero image, no cards, no
   tables, no sales band. Every selector is scoped to Article 17; no shared
   or global rule is modified and Articles 01–16 keep their approved
   rendering. */

.article-section--bka {
  padding-block-start: var(--space-lg);
}

.article-body--bka > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--bka {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--bka > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* OUR RULE — the article's one main judgment visual: the existing
   article-note callout family (surface bg + border + radius) with the
   article-priority label voice and one bold formula line. Compact on both
   breakpoints; no decision tree, no infographic, no flowchart. */
.article-body--bka .article-rule {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--bka .article-rule__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--bka .article-rule__formula {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

/* Forward cue — the locked Visual Priority line: the same light callout
   treatment, quiet border, the down arrow carried in the copy. Not a
   button, not a commercial CTA. */
.article-body--bka .article-cue {
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--bka .article-cue p {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Reservation directory — practical reference, not cards: city label in the
   article-priority voice, entries as name + method lines separated by hair
   rules. Single column on every breakpoint, so a city heading never
   separates from its attractions; CJK names wrap naturally. */
.article-body--bka .article-resv {
  display: grid;
  gap: var(--space-lg);
}

.article-body--bka .article-resv__group {
  display: grid;
  gap: var(--space-2xs);
}

.article-body--bka .article-resv__city {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--bka .article-resv__list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-body--bka .article-resv__item {
  display: grid;
  gap: var(--space-2xs);
  padding-block-start: var(--space-2xs);
  border-top: 1px solid var(--color-border);
  overflow-wrap: break-word;
}

.article-body--bka .article-resv__name {
  font-weight: var(--font-weight-bold);
}

.article-body--bka .article-resv__how {
  font-size: var(--text-sm);
}

/* Checked-against-official-sources line: light smaller supporting text —
   not a warning box, no icon. */
.article-body--bka .article-resv__stamp {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Mobile reading rhythm (the Article 08–16 final-polish settings): slightly
   tighter flow and prose; the callouts compress their padding so the rule
   and cue stay compact. Kept last so the scoped overrides win the cascade
   inside the media query. */
@media (max-width: 47.99em) {
  .article-section--bka {
    padding-block-start: var(--space-md);
  }
  .article-body--bka {
    --flow-space: 0.6875rem;
  }
  .article-body--bka > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--bka > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--bka .article-rule,
  .article-body--bka .article-cue {
    padding: var(--space-sm) var(--space-md);
  }
  .article-body--bka .article-resv {
    gap: var(--space-md);
  }
}

/* Article 18 — Hotel booking guide for foreign travelers (bhc) ----------------
   Page-scoped additions only, mirroring the validated Article 08–17 rhythm:
   section spacing, lighter section H2, compact mobile prose, the emphasized
   practical voice and the big-question voice. Adds one page-local visual: the
   two-path accommodation-registration aid (the Article 06 decision-branch
   voice — hairline-separated stacked paths, condition label in the
   article-priority uppercase voice, plain steps, muted arrow; single column
   on every breakpoint so both paths stay fully readable on mobile). No hero
   image, no cards, no comparison table, no sales band. Every selector is
   scoped to Article 18; no shared or global rule is modified and Articles
   01–17 keep their approved rendering. */

.article-section--bhc {
  padding-block-start: var(--space-lg);
}

.article-body--bhc > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--bhc {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--bhc > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* Emphasized practical lines — the Article 04–17 voice (small, not a warning). */
.article-body--bhc .article-emph {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* The two big-question lines — the Article 08–17 pivot voice, held about
   half a step below the section H2: clearly stronger than body copy (bold,
   larger) yet clearly weaker than a heading — they are decision questions,
   not section titles. */
.article-body--bhc .article-bigq {
  font-size: calc(var(--text-xl) * 0.86);
  font-weight: var(--font-weight-bold);
}

/* Registration paths — the article's one approved visual decision aid: one
   quiet unit (the standard article sub-component surface: 1px hairline
   border, surface tint, small radius, no shadow — deliberately lighter than
   a card) holding two stacked paths separated by a hairline. The condition
   label uses the article-priority uppercase voice (typographic
   text-transform, so the underlying copy stays intact); steps are plain
   body-size lines and the arrow is muted. Both paths are single-column
   stacks already, so mobile needs nothing beyond the shared rhythm settings
   below. */
.article-body--bhc .article-regpaths {
  display: grid;
  gap: var(--space-md);
  margin-block: var(--space-md) var(--space-lg);
  padding: var(--space-md);
  list-style: none;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--bhc .article-regpaths__path {
  display: grid;
  gap: var(--space-2xs);
}

/* Internal separator only — the unit boundary above already frames path
   one; the hairline between the two paths keeps them distinct. */
.article-body--bhc .article-regpaths__path + .article-regpaths__path {
  padding-block-start: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.article-body--bhc .article-regpaths__when {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body--bhc .article-regpaths__what {
  font-size: var(--text-md);
}

.article-body--bhc .article-regpaths__arrow {
  color: var(--color-text-muted);
  line-height: 1;
}

/* Mobile reading rhythm (the Article 08–17 final-polish settings): slightly
   tighter flow and prose. Kept last so the scoped overrides win the cascade
   inside the media query. */
@media (max-width: 47.99em) {
  .article-section--bhc {
    padding-block-start: var(--space-md);
  }
  .article-body--bhc {
    --flow-space: 0.6875rem;
  }
  .article-body--bhc > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--bhc > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--bhc .article-bigq {
    font-size: 1.1875rem;
  }
  .article-body--bhc .article-regpaths {
    gap: var(--space-sm);
  }
}

/* Article 19 — China visa entry guide (vis) ----------------------------------
   Page-scoped additions only, mirroring the validated Article 08–18 rhythm:
   section spacing, lighter section H2 and compact mobile prose. No hero
   image, no cards, no comparison table, no sales band, no new visual
   component — the H3 subsections use the shared article H3 voice. Every
   selector is scoped to Article 19; no shared or global rule is modified
   and Articles 01–18 keep their approved rendering. */

.article-section--vis {
  padding-block-start: var(--space-lg);
}

.article-body--vis > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--vis {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--vis > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* Mobile reading rhythm (the Article 08–18 final-polish settings): slightly
   tighter flow and prose. Kept last so the scoped overrides win the cascade
   inside the media query. */
@media (max-width: 47.99em) {
  .article-section--vis {
    padding-block-start: var(--space-md);
  }
  .article-body--vis {
    --flow-space: 0.6875rem;
  }
  .article-body--vis > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--vis > .article-section-head {
    margin-block-start: 1.625rem;
  }
}

/* Article 19 — light entry-path decision unit (final editorial adjustment).
   A quiet bordered block: surface + hairline border + small radius, body-size
   text, bold YES/NO tokens. Deliberately below H2/H3 visual weight — it must
   read as a glanceable list, never a competing panel. No icons, no shadows,
   no color blocks, no button styling, single-column on every viewport.
   Scoped to Article 19 only; no shared rule is modified. */
.article-body--vis .article-decision {
  margin-block: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--vis .article-decision__lead {
  margin-block: 0;
  font-weight: 600;
}

.article-body--vis .article-decision__step {
  margin-block: 0.375rem;
}

.article-body--vis .article-decision__lead + .article-decision__step {
  margin-block-start: 0.5rem;
}

@media (max-width: 47.99em) {
  .article-body--vis .article-decision {
    margin-block: var(--space-sm);
    padding: var(--space-sm);
  }
}

/* Article 20 — 240-hour visa-free transit route check (vft) ------------------
   Page-scoped additions only, mirroring the validated Article 08–19 rhythm.
   Two approved editorial IA units live here, both deliberately below H2/H3
   weight: a single light 5-gate decision panel (surface + 1px border + small
   radius, vertical sequence, no icons/shadows/color blocks) and a lighter
   route-comparison pair with a hairline divider. Every selector is scoped to
   Article 20; no shared rule is modified and Articles 01–19 keep their
   approved rendering. */

.article-section--vft {
  padding-block-start: var(--space-lg);
}

.article-body--vft > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--vft {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--vft > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* 5-gate decision unit */
.article-body--vft .article-decision {
  margin-block: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--vft .article-decision__lead {
  margin-block: 0;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  font-weight: 600;
  text-transform: uppercase;
}

.article-body--vft .decision-gates {
  margin: 0.625rem 0 0;
}

.article-body--vft .decision-gates__gate {
  margin-block: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-body--vft .decision-gates__q {
  margin: 0.125rem 0 0;
}

.article-body--vft .decision-gates__arrow {
  margin-block: 0.125rem;
  padding-inline-start: 0.25rem;
  font-size: 0.875rem;
  opacity: 0.7;
}

.article-body--vft .decision-gates__pass {
  margin: 0.625rem 0 0;
}

.article-body--vft .decision-gates__note {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  opacity: 0.75;
}

/* Light route comparison */
.article-body--vft .route-compare {
  margin-block: var(--space-md);
}

.article-body--vft .route-compare__row {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr auto;
  column-gap: var(--space-sm);
  align-items: baseline;
  padding-block: 0.5rem;
}

.article-body--vft .route-compare__row + .route-compare__row {
  border-top: 1px solid var(--color-border);
}

.article-body--vft .route-compare__tag {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-body--vft .route-compare__route {
  margin: 0;
  font-weight: 600;
}

.article-body--vft .route-compare__sub {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  opacity: 0.75;
}

.article-body--vft .route-compare__verdict {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Mobile reading rhythm (the Article 08–19 final-polish settings) */
@media (max-width: 47.99em) {
  .article-section--vft {
    padding-block-start: var(--space-md);
  }
  .article-body--vft {
    --flow-space: 0.6875rem;
  }
  .article-body--vft > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--vft > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--vft .article-decision {
    margin-block: var(--space-sm);
    padding: var(--space-sm);
  }
  .article-body--vft .route-compare__row {
    grid-template-columns: 1fr;
    row-gap: 0.125rem;
    padding-block: 0.625rem;
  }
}

/* Article 21 — Golden Week trip adjustment (gw) --------------------------------
   Page-scoped additions only, mirroring the validated Article 08–20 rhythm.
   Two approved IA units, both deliberately below H2 weight: a light
   date-decision split (surface + 1px border + small radius; small YES/NO
   labels; semibold action lines carry the emphasis; quiet bottom note; two
   restrained columns on desktop, clear vertical sequence on mobile) and a
   lighter transport distinction (plain rows + hairline divider, no surface,
   no status colors). No icons, shadows, or decorative blocks anywhere.
   Scoped to Article 21; no shared rule is modified and Articles 01–20 keep
   their approved rendering. */

.article-section--gw {
  padding-block-start: var(--space-lg);
}

.article-body--gw > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--gw {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--gw > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* IA1 — date decision split */
.article-body--gw .article-decision {
  margin-block: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--gw .article-decision__lead {
  margin-block: 0;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  font-weight: 600;
  text-transform: uppercase;
}

.article-body--gw .decision-split__question {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
}

.article-body--gw .decision-split {
  margin-top: 0.625rem;
}

.article-body--gw .decision-split__path + .decision-split__path {
  border-top: 1px solid var(--color-border);
}

.article-body--gw .decision-split__label {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.article-body--gw .decision-split__condition {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
}

.article-body--gw .decision-split__action {
  margin: 0.25rem 0 0;
  font-weight: 600;
}

.article-body--gw .decision-split__note {
  margin: 0.625rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  opacity: 0.75;
}

@media (min-width: 48em) {
  .article-body--gw .decision-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-lg);
  }
  .article-body--gw .decision-split__path + .decision-split__path {
    border-top: 0;
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-lg);
  }
  .article-body--gw .decision-split__label {
    margin-top: 0;
  }
}

/* IA2 — transport distinction (lighter than IA1: no surface, rows + hairline) */
.article-body--gw .transport-note {
  margin-block: var(--space-md);
}

.article-body--gw .transport-note__row {
  padding-block: 0.5rem;
}

.article-body--gw .transport-note__row + .transport-note__row {
  border-top: 1px solid var(--color-border);
}

.article-body--gw .transport-note__tag {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.article-body--gw .transport-note__line {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
}

.article-body--gw .transport-note__action {
  margin: 0.125rem 0 0;
  font-weight: 600;
}

/* Mobile reading rhythm (the Article 08–20 final-polish settings) */
@media (max-width: 47.99em) {
  .article-section--gw {
    padding-block-start: var(--space-md);
  }
  .article-body--gw {
    --flow-space: 0.6875rem;
  }
  .article-body--gw > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--gw > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--gw .article-decision {
    margin-block: var(--space-sm);
    padding: var(--space-sm);
  }
  .article-body--gw .transport-note {
    margin-block: var(--space-sm);
  }
}

/* Article 22 — First trip preparation (ftc) ------------------------------------
   Page-scoped additions only, mirroring the validated Article 08–21 rhythm.
   Two approved IA units, both deliberately below H2/H3 weight: a light
   prepare-or-learn judgment split (surface + 1px border + small radius; small
   BEFORE/AFTER labels; semibold action lines carry the emphasis; quiet
   supporting question; two restrained columns on desktop, vertical on mobile)
   and a lighter transport-priority strip (no outer card — three labeled items
   with hairline separators; three columns on desktop, stacked on mobile).
   No icons, shadows, status colors, or decorative blocks. Scoped to
   Article 22; no shared rule is modified and Articles 01–21 keep their
   approved rendering. */

.article-section--ftc {
  padding-block-start: var(--space-lg);
}

.article-body--ftc > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--ftc {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--ftc > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* IA1 — prepare-or-learn judgment unit */
.article-body--ftc .article-decision {
  margin-block: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--ftc .article-decision__lead {
  margin-block: 0;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  font-weight: 600;
  text-transform: uppercase;
}

.article-body--ftc .prep-split {
  margin-top: 0.625rem;
}

.article-body--ftc .prep-split__path + .prep-split__path {
  border-top: 1px solid var(--color-border);
}

.article-body--ftc .prep-split__label {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.article-body--ftc .prep-split__condition {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
}

.article-body--ftc .prep-split__action {
  margin: 0.25rem 0 0;
  font-weight: 600;
}

.article-body--ftc .prep-split__note {
  margin: 0.625rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  opacity: 0.75;
}

@media (min-width: 48em) {
  .article-body--ftc .prep-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-lg);
  }
  .article-body--ftc .prep-split__path + .prep-split__path {
    border-top: 0;
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-lg);
  }
  .article-body--ftc .prep-split__label {
    margin-top: 0;
  }
}

/* IA2 — transport priority (lighter than IA1: no outer card) */
.article-body--ftc .transport-priority {
  margin-block: var(--space-md);
}

.article-body--ftc .transport-priority__item {
  padding-block: 0.5rem;
}

.article-body--ftc .transport-priority__item + .transport-priority__item {
  border-top: 1px solid var(--color-border);
}

.article-body--ftc .transport-priority__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.article-body--ftc .transport-priority__line {
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
}

@media (min-width: 48em) {
  .article-body--ftc .transport-priority {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-md);
  }
  .article-body--ftc .transport-priority__item + .transport-priority__item {
    border-top: 0;
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-md);
  }
}

/* Mobile reading rhythm (the Article 08–21 final-polish settings) */
@media (max-width: 47.99em) {
  .article-section--ftc {
    padding-block-start: var(--space-md);
  }
  .article-body--ftc {
    --flow-space: 0.6875rem;
  }
  .article-body--ftc > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--ftc > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--ftc .article-decision {
    margin-block: var(--space-sm);
    padding: var(--space-sm);
  }
  .article-body--ftc .transport-priority {
    margin-block: var(--space-sm);
  }
}

/* Article 23 — train vs flight decision guide (tvf) --------------------------------
   Page-scoped additions only, mirroring the validated Article 08–22 rhythm.
   Two approved IA units, both deliberately below H2 weight: a light
   train-or-flight decision path (surface + 1px border + small radius; two
   compact sequential gate columns on desktop joined by a quiet “Yes →”
   transition, with the final compare row beneath; a single natural vertical
   reading sequence on mobile) and a lighter fatigue
   comparison (no outer card, two balanced columns with a hairline divider on
   desktop, stacked on mobile). No icons, shadows, color blocks or
   winner/loser styling anywhere. Scoped to Article 23; no shared rule is
   modified and Articles 01–22 keep their approved rendering. */

.article-section--tvf {
  padding-block-start: var(--space-lg);
}

.article-body--tvf > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--tvf {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--tvf > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* IA1 — train-or-flight decision path */
.article-body--tvf .article-decision {
  margin-block: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--tvf .article-decision__lead {
  margin-block: 0;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  font-weight: 600;
  text-transform: uppercase;
}

.article-body--tvf .tf-gates {
  margin-top: 0.625rem;
}

.article-body--tvf .tf-gates__gate:last-child {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

/* Desktop-only “Yes →” transition between the two gates. Hidden on mobile,
   where the first gate’s “Yes ↓” line carries the continuation instead. */
.article-body--tvf .tf-gates__next {
  display: none;
}

.article-body--tvf .tf-gates__q {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.article-body--tvf .tf-gates__branch {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
}

.article-body--tvf .tf-gates__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.article-body--tvf .tf-gates__action {
  font-weight: 600;
}

.article-body--tvf .tf-gates__continue {
  padding-inline-start: 0.25rem;
  font-size: 0.875rem;
  opacity: 0.7;
}

.article-body--tvf .tf-gates__final {
  margin-top: 0.625rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.article-body--tvf .tf-gates__final-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.article-body--tvf .tf-gates__chain {
  margin: 0.25rem 0 0;
  font-weight: 600;
}

@media (min-width: 48em) {
  .article-body--tvf .tf-gates {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: var(--space-md);
    align-items: center;
  }
  .article-body--tvf .tf-gates__gate:last-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-lg);
  }
  .article-body--tvf .tf-gates__next {
    display: block;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
    white-space: nowrap;
  }
  /* On desktop the between-gates transition replaces the first gate’s
     “Yes ↓” line, so the second gate reads as the next step after Yes. */
  .article-body--tvf .tf-gates__branch--continue {
    display: none;
  }
}

/* IA2 — fatigue comparison (lighter than IA1: no outer card) */
.article-body--tvf .tf-fatigue {
  margin-block: var(--space-md);
}

.article-body--tvf .tf-fatigue__lead {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  font-weight: 600;
  text-transform: uppercase;
}

.article-body--tvf .tf-fatigue__cols {
  margin-top: 0.375rem;
}

.article-body--tvf .tf-fatigue__col + .tf-fatigue__col {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.article-body--tvf .tf-fatigue__mode {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.article-body--tvf .tf-fatigue__total {
  margin: 0.25rem 0 0;
  font-size: 1.0625rem;
}

.article-body--tvf .tf-fatigue__total strong {
  font-size: 1.1875rem;
}

.article-body--tvf .tf-fatigue__sub {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  opacity: 0.75;
}

.article-body--tvf .tf-fatigue__note {
  margin: 0.625rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  opacity: 0.75;
}

@media (min-width: 48em) {
  .article-body--tvf .tf-fatigue__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-lg);
  }
  .article-body--tvf .tf-fatigue__col + .tf-fatigue__col {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-lg);
  }
}

/* Mobile reading rhythm (the Article 08–22 final-polish settings) */
@media (max-width: 47.99em) {
  .article-section--tvf {
    padding-block-start: var(--space-md);
  }
  .article-body--tvf {
    --flow-space: 0.6875rem;
  }
  .article-body--tvf > p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--tvf > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--tvf .article-decision {
    margin-block: var(--space-sm);
    padding: var(--space-sm);
  }
  .article-body--tvf .tf-fatigue {
    margin-block: var(--space-sm);
  }
}

/* ==========================================================================
   A24 — Can I Bring a Power Bank to China? (article-body--pbk)
   Scoped to /blog/china-power-bank-rules/ only. Follows the A23 (--tvf)
   article-scoped pattern; no global or other-article rules touched.
   ========================================================================== */
.article-section--pbk {
  padding-block-start: var(--space-lg);
}

.article-body--pbk > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--pbk {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--pbk > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* Body checklist (Buying one in China) — plain bullets, modest indent */
.article-body--pbk > ul {
  padding-inline-start: 1.25rem;
}

/* IA1 — route example: same power bank, different trip */
.article-body--pbk .article-decision {
  margin-block: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--pbk .article-decision__lead {
  margin-block: 0;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  font-weight: 600;
  text-transform: uppercase;
}

.article-body--pbk .pbk-routes {
  margin-top: 0.625rem;
}

.article-body--pbk .pbk-routes__row {
  padding-block: 0.5rem;
}

.article-body--pbk .pbk-routes__row + .pbk-routes__row {
  border-top: 1px solid var(--color-border);
}

.article-body--pbk .pbk-routes__route {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* The Shanghai → Beijing segment is emphasized by bold text first;
   the darker red is reinforcement only, never the sole signal. */
.article-body--pbk .pbk-routes__seg {
  color: var(--color-primary-dark);
}

.article-body--pbk .pbk-routes__row--domestic {
  padding-inline: var(--space-sm);
  background-color: var(--color-primary-light);
  box-shadow: inset 3px 0 0 var(--color-primary);
  border-radius: var(--radius-sm);
}

.article-body--pbk .pbk-routes__type {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.article-body--pbk .pbk-routes__type--domestic {
  color: var(--color-primary-dark);
  opacity: 1;
}

.article-body--pbk .pbk-routes__note {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
}

.article-body--pbk .pbk-routes__note--stop {
  font-weight: 600;
}

.article-body--pbk .pbk-routes__foot {
  margin: 0.625rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9375rem;
  font-weight: 600;
}

@media (min-width: 48em) {
  .article-body--pbk .pbk-routes__row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: var(--space-lg);
    align-items: center;
  }
  .article-body--pbk .pbk-routes__side {
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-lg);
  }
}

/* IA2 — two-layer flight rule (lighter: no outer card). Layer 2 stacks
   ON TOP of layer 1: the "+" line plus wash/inset bar mark it as adding
   requirements, not replacing them. */
.article-body--pbk .pbk-layers {
  margin-block: var(--space-md);
}

.article-body--pbk .pbk-layers__lead {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  font-weight: 600;
  text-transform: uppercase;
}

.article-body--pbk .pbk-layers__layer {
  margin-top: 0.5rem;
  padding: var(--space-xs) var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.article-body--pbk .pbk-layers__layer--plus {
  border-top: 0;
  padding: var(--space-sm);
  background-color: var(--color-primary-light);
  box-shadow: inset 3px 0 0 var(--color-primary);
  border-radius: var(--radius-sm);
}

.article-body--pbk .pbk-layers__name {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.article-body--pbk .pbk-layers__name--domestic {
  color: var(--color-primary-dark);
  opacity: 1;
}

.article-body--pbk .pbk-layers__adds {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.article-body--pbk .pbk-layers__list {
  margin: 0.375rem 0 0;
  list-style: disc;
  padding-inline-start: 1.25rem;
}

.article-body--pbk .pbk-layers__list li {
  font-size: 0.9375rem;
}

.article-body--pbk .pbk-layers__list li + li {
  margin-top: 0.25rem;
}

.article-body--pbk .pbk-layers__list ::marker {
  color: var(--color-primary);
}

/* Mobile reading rhythm (the Article 08–23 final-polish settings) */
@media (max-width: 47.99em) {
  .article-section--pbk {
    padding-block-start: var(--space-md);
  }
  .article-body--pbk {
    --flow-space: 0.6875rem;
  }
  .article-body--pbk > p,
  .article-body--pbk > ul {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--pbk > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--pbk .article-decision {
    margin-block: var(--space-sm);
    padding: var(--space-sm);
  }
  .article-body--pbk .pbk-layers {
    margin-block: var(--space-sm);
  }
}

/* ==========================================================================
   A25 — Do You Need a Chinese Phone Number in China? (article-body--cpn)
   Scoped to /blog/chinese-phone-number-tourist/ only. Follows the A23 (--tvf)
   and A24 (--pbk) article-scoped patterns; no global or other-article rules
   are touched.
   ========================================================================== */
.article-section--cpn {
  padding-block-start: var(--space-lg);
}

.article-body--cpn > .article-section-head:first-child {
  margin-block-start: 0;
}

@media (min-width: 48em) {
  .article-section--cpn {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--cpn > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* Body lists (the phone-setup checklist and the physical-SIM conditions) —
   plain bullets, modest indent */
.article-body--cpn > ul {
  padding-inline-start: 1.25rem;
}

/* IA1 — three different jobs (home number / data / +86). Lighter treatment:
   no outer card. Three hairline-separated columns on desktop, stacked
   hairline rows on mobile. The three labels carry the hierarchy; the
   explanations stay secondary. Replaces a comparison table. */
.article-body--cpn .cpn-jobs {
  margin-block: var(--space-md);
}

.article-body--cpn .cpn-jobs__lead {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  font-weight: 600;
  text-transform: uppercase;
}

.article-body--cpn .cpn-jobs__cols {
  margin-top: 0.375rem;
}

.article-body--cpn .cpn-jobs__col + .cpn-jobs__col {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.article-body--cpn .cpn-jobs__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.article-body--cpn .cpn-jobs__note {
  margin: 0.3125rem 0 0;
  font-size: 0.875rem;
  opacity: 0.75;
}

.article-body--cpn .cpn-jobs__foot {
  margin: 0.625rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9375rem;
  font-weight: 600;
}

@media (min-width: 48em) {
  .article-body--cpn .cpn-jobs__cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--space-lg);
  }
  .article-body--cpn .cpn-jobs__col + .cpn-jobs__col {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-lg);
  }
}

/* IA2 — physical-SIM decision path (quiet card, uppercase lead question,
   small uppercase Yes/No labels, bold outcomes). Owner visual review: ONE
   single vertical sequence on desktop AND mobile — no column split, so the
   two No branches can never read as parallel paths. The sub-question
   outcomes sit in a hairline-indented nest under the top-level Yes branch;
   the eSIM-only No branch is separated by a hairline at the top level. */
.article-body--cpn .article-decision {
  margin-block: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--cpn .article-decision__lead {
  margin-block: 0;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  font-weight: 600;
  text-transform: uppercase;
}

.article-body--cpn .cpn-path {
  margin-top: 0.625rem;
}

.article-body--cpn .cpn-path__branch + .cpn-path__branch {
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--color-border);
}

.article-body--cpn .cpn-path__q {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.article-body--cpn .cpn-path__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.article-body--cpn .cpn-path__nest {
  margin-top: 0.5rem;
  padding-inline-start: var(--space-md);
  border-left: 1px solid var(--color-border);
}

.article-body--cpn .cpn-path__outcome {
  margin: 0.5rem 0 0;
  font-size: 1.0625rem;
}

.article-body--cpn .cpn-path__note + .cpn-path__outcome {
  margin-top: 0.75rem;
}

.article-body--cpn .cpn-path__action {
  font-weight: 600;
}

.article-body--cpn .cpn-path__note {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  opacity: 0.75;
}

.article-body--cpn .cpn-path__foot {
  margin: 0.625rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Mobile reading rhythm (the Article 08–24 final-polish settings) */
@media (max-width: 47.99em) {
  .article-section--cpn {
    padding-block-start: var(--space-md);
  }
  .article-body--cpn {
    --flow-space: 0.6875rem;
  }
  .article-body--cpn > p,
  .article-body--cpn > ul {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--cpn > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--cpn .article-decision {
    margin-block: var(--space-sm);
    padding: var(--space-sm);
  }
  .article-body--cpn .cpn-jobs {
    margin-block: var(--space-sm);
  }
}

/* ==========================================================================
   A26 — Do You Need Cash in China? (article-body--cash)
   Scoped to /blog/do-you-need-cash-in-china/ only. Follows the A24 (--pbk)
   and A25 (--cpn) article-scoped patterns; no global or other-article rules
   are touched.
   ========================================================================== */
.article-section--cash {
  padding-block-start: var(--space-lg);
}

@media (min-width: 48em) {
  .article-section--cash {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--cash > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* The key-rule quote — the same quiet left-hairline blockquote language as
   the Article 13 traveler-thought quotes (not a testimonial or promo card). */
.article-body--cash blockquote {
  padding-inline-start: var(--space-md);
  border-inline-start: 2px solid var(--color-border);
  font-size: var(--text-md);
}

/* Mobile reading rhythm (the Article 08–25 final-polish settings) */
@media (max-width: 47.99em) {
  .article-section--cash {
    padding-block-start: var(--space-md);
  }
  .article-body--cash {
    --flow-space: 0.6875rem;
  }
  .article-body--cash > p,
  .article-body--cash > ul {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--cash > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--cash blockquote {
    padding-inline-start: var(--space-sm);
    font-size: 0.9375rem;
  }
}

/* ==========================================================================
   A27 — Do I Need to Carry My Passport in China? (article-body--passport)
   Scoped to /blog/carry-passport-in-china/ only. Follows the A24 (--pbk),
   A25 (--cpn) and A26 (--cash) article-scoped patterns; no global or
   other-article rules are touched.
   ========================================================================== */
.article-section--passport {
  padding-block-start: var(--space-lg);
}

@media (min-width: 48em) {
  .article-section--passport {
    padding-block-start: var(--space-2xl);
  }
}

.article-body--passport > .article-section-head h2 {
  font-size: calc(var(--text-xl) * 0.93);
}

/* The key-rule quote — the same quiet left-hairline blockquote language as
   the A26 (--cash) key rule and the Article 13 traveler-thought quotes. */
.article-body--passport blockquote {
  padding-inline-start: var(--space-md);
  border-inline-start: 2px solid var(--color-border);
  font-size: var(--text-md);
}

/* Mobile reading rhythm (the Article 08–26 final-polish settings) */
@media (max-width: 47.99em) {
  .article-section--passport {
    padding-block-start: var(--space-md);
  }
  .article-body--passport {
    --flow-space: 0.6875rem;
  }
  .article-body--passport > p,
  .article-body--passport > ul {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .article-body--passport > .article-section-head {
    margin-block-start: 1.625rem;
  }
  .article-body--passport blockquote {
    padding-inline-start: var(--space-sm);
    font-size: 0.9375rem;
  }
}

/* ==========================================================================
   Phase 6 — Services page decision layout (products/index.html) -------------
   Pre-payment-launch Services page: Hero → CONNECT → EXPLORE → CONCIERGE →
   "Which one do I need?" selector. Three independent services, not tiers —
   CONNECT stays compact, EXPLORE carries the longer explanation, CONCIERGE
   stays quiet (no price, no CTA). Every selector here targets svc-* classes
   or section ids used solely by products/index.html; shared components
   (.section, .section__head, .narrow, .card__tag, .btn, .cta-row) and the
   hero--services rules earlier in this file are reused unchanged. Appended
   at the end of the file per phase convention. The still-wanted Phase 5A.2
   mobile-rhythm settings are re-declared below; the rest of that block was
   removed with the previous page structure it targeted.
   ========================================================================== */

/* Feature lists ("What you get" / "What we'll check"): quiet stacked items
   with hairline dividers — titles carry the scan, muted bodies explain. */
.svc-items {
  display: grid;
  gap: var(--space-lg);
}

.svc-items > li + li {
  border-top: 1px solid var(--color-border);
  padding-block-start: var(--space-lg);
}

.svc-item__title {
  margin-block-end: var(--space-2xs);
  font-weight: var(--font-weight-bold);
}

/* EXPLORE checks: two restrained columns on desktop for scanability;
   strict single column on mobile. */
@media (min-width: 48em) {
  .svc-items--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-3xl);
    row-gap: var(--space-xl);
  }

  .svc-items--split > li + li {
    border-top: 0;
    padding-block-start: 0;
  }

  /* Hairlines under the first row only, so the grid reads as rows of
     checks, not a comparison table. */
  .svc-items--split > li:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
    padding-block-start: var(--space-xl);
  }
}

/* Trust note closing the CONNECT list: quieter than the service itself. */
.svc-note {
  border-top: 1px solid var(--color-border);
  padding-block-start: var(--space-lg);
  color: var(--color-text-muted);
}

/* EXPLORE key statement: one quiet brand-red hairline, no box, no gradient. */
.svc-keyline {
  max-width: 40rem;
  margin-inline: auto;
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--color-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

/* "We'll tell you to keep it." — the answer voice in the brand accent. */
.svc-say {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
}

/* Deliverable panel ("What you'll receive"): the faq__item pattern —
   transparent surface (Phase 6.1: reads as "this is what you receive",
   not another product card), hairline border, no shadow, no card grid. */
.svc-deliverable {
  padding: var(--space-xl);
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.svc-deliverable__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

/* KEEP · CHANGE · BOOK · CHECK */
.svc-verbs {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
}

.svc-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* CONCIERGE status: a quiet bordered pill — no gold, no price, no CTA. */
.svc-soon {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* "Which one do I need?" — question rows with hairline dividers; the answer
   sits beside the question on desktop, below it on mobile. */
.svc-quiz {
  display: grid;
}

.svc-quiz > li + li {
  border-top: 1px solid var(--color-border);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-lg);
}

.svc-quiz__answer {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
}

.svc-quiz__closing {
  text-align: center;
}

.svc-quiz__line {
  text-align: center;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

@media (max-width: 47.99em) {
  .svc-quiz__answer {
    margin-block-start: var(--space-2xs);
  }
}

@media (min-width: 48em) {
  /* Phase 6.1: compact centered NEED → SERVICE rows. Question and answer hug
     their content and sit together mid-row — a quick decision aid, not a
     two-column comparison table. Wraps gracefully if a row ever runs long. */
  .svc-quiz > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: var(--space-lg);
  }
}

/* Mobile rhythm (<48em only): the Phase 5A.2 settings still wanted after
   the page rebuild — head-to-body gap, inter-block spacing and the H3
   step-down so each section's H2 stays its loudest voice on a long mobile
   scroll. */
@media (max-width: 47.99em) {
  #connect .section__head,
  #explore .section__head,
  #concierge .section__head,
  #which-one .section__head {
    margin-block-end: var(--space-lg);
  }

  .svc-flow {
    --flow-space: var(--space-lg);
  }

  .svc-flow h3 {
    font-size: var(--text-md);
  }

  .svc-deliverable {
    padding: var(--space-lg);
  }
}

/* Phase 6.1 — Owner visual-polish pass (products/index.html) ---------------
   Targeted adjustments only, all scoped to this page: modest EXPLORE rhythm
   tightening (line-height and text sizes untouched) and a mobile-only hero
   lede measure so the one-sentence subhead stays on a single line at 390px.
   No copy, prices, order, hero image or shared rules change.
   ========================================================================== */

/* EXPLORE desktop rhythm: 2rem → 1.5rem between the section head and the
   inter-body blocks, and 2rem → 1.5rem around the check-row hairline —
   easier to scan, modestly shorter, still clearly the substantial section. */
@media (min-width: 48em) {
  #explore .section__head {
    margin-block-end: var(--space-lg);
  }

  #explore .svc-flow {
    --flow-space: var(--space-lg);
  }

  #explore .svc-items--split {
    row-gap: var(--space-lg);
  }

  #explore .svc-items--split > li:nth-child(n + 3) {
    padding-block-start: var(--space-lg);
  }
}

/* EXPLORE mobile check rows: 3rem → 2rem total around each hairline
   (CONNECT keeps its original rhythm). */
@media (max-width: 47.99em) {
  #explore .svc-items {
    gap: var(--space-md);
  }

  #explore .svc-items > li + li {
    padding-block-start: var(--space-md);
  }
}

/* Mobile hero subhead (<48em only): "China can feel unfamiliar before your
   first trip." is one sentence — drop the unused 26rem cap so it can use the
   full column, and step the lede 20px → 15px (the established mobile reading
   size used across the article system) so it stays on a single line at
   390px with no orphaned "trip." Desktop typography is untouched. */
@media (max-width: 47.99em) {
  .hero--services .hero__lede {
    max-width: none;
    font-size: 0.9375rem;
    /* Safety for narrower phones (<390px): wrap into two balanced lines
       instead of orphaning "trip." — one line at 390px and above. */
    text-wrap: balance;
  }
}

/* ==========================================================================
   HELP Article Template V1
   --------------------------------------------------------------------------
   Reusable utility-first modules for canonical ChinaGo HELP problem pages.
   Scoped exclusively to .help-* so existing Blog articles and shared page
   presentation are unaffected. Modules are optional: later HELP pages can use
   only the breadcrumb, situation, action, steps, phrase, transition, CTA or
   sources patterns their specific problem requires.
   ========================================================================== */
.help-article {
  --help-column-max: 42rem;
}

.help-article__column {
  max-width: var(--help-column-max);
}

.help-article__header {
  padding-block: var(--space-lg) var(--space-md);
}

.help-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  list-style: none;
}

.help-breadcrumb li + li::before {
  margin-inline-end: var(--space-xs);
  content: "/";
  color: var(--color-border);
}

.help-article__situation {
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.help-immediate-action {
  max-width: none;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-primary-dark);
  background-color: var(--color-primary-light);
  border-inline-start: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.help-article__content {
  padding-block: var(--space-md) var(--space-2xl);
}

.help-article__body {
  --flow-space: var(--space-md);
}

.help-step {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-2xl);
}

.help-step h2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  font-size: var(--text-xl);
}

.help-step__number {
  color: var(--color-primary-dark);
  font-variant-numeric: tabular-nums;
}

.help-step p,
.help-step ul,
.help-step blockquote {
  margin: 0;
}

.help-step ul,
.article-sources ul {
  padding-inline-start: 1.25rem;
}

.help-step li + li,
.article-sources li + li {
  margin-block-start: var(--space-xs);
}

.help-step blockquote:not(.help-phrase-card) {
  padding-inline-start: var(--space-md);
  border-inline-start: 2px solid var(--color-border);
  font-size: var(--text-md);
}

.help-phrase-card {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.help-phrase-card__chinese {
  color: var(--color-text);
  font-size: clamp(1.25rem, 1.08rem + 1vw, 1.5rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.help-phrase-card__english {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.help-step--transition {
  padding-block-start: var(--space-xl);
  border-block-start: 1px solid var(--color-border);
}

.help-concierge {
  padding-block: var(--space-xl);
  background-color: var(--color-surface);
}

.help-concierge h2 {
  font-size: var(--text-xl);
}

.help-concierge__cta {
  margin-block-start: var(--space-lg);
}

.help-concierge__cta .btn {
  cursor: default;
}

.help-sources {
  padding-block: var(--space-xl) var(--space-2xl);
}

.help-sources .article-sources {
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--color-border);
}

.help-sources .article-sources h2 {
  margin-block-end: var(--space-md);
  font-size: var(--text-lg);
}

@media (min-width: 48em) {
  .help-article__header {
    padding-block: var(--space-2xl) var(--space-lg);
  }

  .help-article__content {
    padding-block-end: var(--space-3xl);
  }

  .help-phrase-card {
    padding: var(--space-lg);
  }
}

@media (max-width: 47.99em) {
  .help-article__header {
    padding-block-start: var(--space-md);
  }

  .help-article__body {
    --flow-space: var(--space-sm);
  }

  .help-step {
    gap: var(--space-sm);
    margin-block-start: var(--space-xl);
  }

  .help-step h2 {
    font-size: calc(var(--text-xl) * 0.94);
  }

  .help-phrase-card {
    padding: var(--space-md);
  }
}

/* HA10 — travel problems page: local table and checklist presentation only. */
.help-article--ha10 .help-article__body > .help-step:first-child {
  margin-block-start: calc(var(--space-xs) * -1);
}

.help-article--ha10 .help-table-wrap {
  overflow-x: auto;
}

.help-article--ha10 .help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.help-article--ha10 .help-table th,
.help-article--ha10 .help-table td {
  padding: var(--space-sm);
  text-align: start;
  vertical-align: top;
  border: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}

.help-article--ha10 .help-table th {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-surface);
}

.help-article--ha10 .help-table--emergency td:last-child {
  color: var(--color-primary-dark);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.help-article--ha10 .help-checklist {
  padding: 0;
  list-style: none;
}

.help-article--ha10 .help-checklist li {
  position: relative;
  padding-inline-start: 1.75rem;
}

.help-article--ha10 .help-checklist li::before {
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-primary-dark);
  content: "✓";
  font-weight: var(--font-weight-medium);
}

.help-article--ha10 .help-concierge__cta .btn {
  cursor: pointer;
}

.help-article--ha10 .help-concierge__cta .btn:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 3px;
}

/* HA11 — HA10 HELP patterns plus compact boundary note and translation examples. */
.help-article--ha11 .help-article__body > .help-step:first-child {
  margin-block-start: calc(var(--space-xs) * -1);
}

.help-article--ha11 .help-table-wrap {
  overflow-x: auto;
}

.help-article--ha11 .help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.help-article--ha11 .help-table th,
.help-article--ha11 .help-table td {
  padding: var(--space-sm);
  text-align: start;
  vertical-align: top;
  border: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}

.help-article--ha11 .help-table th {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-surface);
}

.help-article--ha11 .help-checklist {
  padding: 0;
  list-style: none;
}

.help-article--ha11 .help-checklist li {
  position: relative;
  padding-inline-start: 1.75rem;
}

.help-article--ha11 .help-checklist li::before {
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-primary-dark);
  content: "✓";
  font-weight: var(--font-weight-medium);
}

.help-article--ha11 .help-concierge__cta .btn {
  cursor: pointer;
}

.help-article--ha11 .help-concierge__cta .btn:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 3px;
}

.help-article--ha11 .help-scope-note {
  padding: var(--space-md);
  background-color: var(--color-paper);
  border-inline-start: 2px solid var(--color-border);
}

.help-article--ha11 .help-scope-note + .help-step {
  margin-block-start: var(--space-lg);
}

.help-article--ha11 .help-yes-no {
  display: grid;
  gap: var(--space-sm);
  border-block: 1px solid var(--color-border);
}

.help-article--ha11 .help-yes-no__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  padding-block: var(--space-sm);
}

.help-article--ha11 .help-yes-no__item + .help-yes-no__item {
  border-block-start: 1px solid var(--color-border);
}

.help-article--ha11 .help-yes-no__label {
  color: var(--color-primary-dark);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

/* Contact / Support page (/contact/) ----------------------------------------
   Page-scoped rules only (pre-payment launch). The two primary email paths
   reuse the FAQ item surface language (white panel, 1px border, small
   radius) and sit side by side from 48em; the reply emphasis stays purely
   typographic; quick answers are hairline-separated editorial rows reusing
   the global link + → arrow convention. All selectors are page-unique
   .contact-* names; no shared rule or media query is modified. */

/* Two primary contact paths: one column on mobile, two from 48em. */
.contact-paths {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 48em) {
  .contact-paths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A path panel: the same quiet surface language as .faq__item — border and
   radius, no shadow, no pricing-card styling. */
.contact-path {
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Email line: small muted label + the address as the scannable functional
   anchor of each block. overflow-wrap guards the longest address against
   any chance of mobile horizontal overflow. */
.contact-email {
  display: grid;
  gap: var(--space-2xs);
}

.contact-email__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contact-email__link {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

/* Boundary note: clearly visible but secondary — a single top hairline and
   small muted text (the established quiet-note treatment), never boxed or
   alarm-colored. */
.contact-note {
  padding-block-start: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Response-time emphasis: one easy-to-scan bold line, quieter than the two
   path panels above it (no panel, no color). */
.contact-reply {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Quick answers: lightweight clickable rows separated by hairlines (the
   .svc-quiz row convention). The whole row is one link; the title keeps
   the global underline affordance while the description stays muted, and
   the arrow reuses the site's → link convention. */
.contact-qa {
  display: grid;
}

.contact-qa > li + li {
  border-top: 1px solid var(--color-border);
}

.contact-qa__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-md);
  min-height: 44px;
  padding-block: var(--space-sm);
  text-decoration: none;
}

.contact-qa__title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.contact-qa__desc {
  color: var(--color-text-muted);
}

.contact-qa__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: var(--text-md);
}

/* Refund & Cancellation Policy page (/refund-policy/) ------------------------
   Page-scoped rules only (pre-payment launch). Quiet policy-page treatment:
   a small muted last-updated line under the H1, and the CONNECT / EXPLORE
   policy sections as subtle panels in the same FAQ-item / contact-path
   surface language (white bg, 1px border, small radius) — deliberately not
   pricing/product cards. The key cancellation boundaries are emphasized
   with plain <strong> typography inside the approved sentences; no sentence
   is rewritten. All selectors are page-unique .policy-* names; no shared
   rule or media query is modified. The closing "Email:" line reuses the
   shared .contact-email block introduced with the Contact page. */

.policy-updated {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.policy-panel {
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Blog Hub — guide directory -------------------------------------------------
   The Blog IA uses a compact topic index, a small Start Here selection, and
   divider-led guide rows rather than the site's general card/feed pattern.
   Every selector is scoped to the Blog Hub classes used only on /blog/. */

.blog-hub__topic-nav {
  padding-block: var(--space-lg);
  border-block-end: 1px solid var(--color-border);
}

.blog-hub__topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.blog-hub__topic-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-decoration: none;
}

.blog-hub__topic-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background-color: var(--color-primary-light);
}

.blog-hub__start-here {
  padding-block: var(--space-xl);
  background-color: var(--color-surface);
}

.blog-hub__start-here-intro,
.blog-hub__directory-intro {
  max-width: 44rem;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.blog-hub__guide-list {
  display: grid;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-hub__start-here .blog-hub__guide-list {
  gap: var(--space-md);
}

.blog-hub__start-here .blog-hub__guide-item {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.blog-hub__guide-title {
  font-size: var(--text-md);
  line-height: 1.35;
}

.blog-hub__guide-title a {
  color: var(--color-primary-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.blog-hub__guide-title a:hover {
  color: var(--color-primary);
}

.blog-hub__guide-description {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.blog-hub__directory {
  padding-block: var(--space-xl);
}

.blog-hub__directory + .blog-hub__directory {
  border-top: 1px solid var(--color-border);
}

.blog-hub__directory .blog-hub__guide-list {
  margin-block-start: var(--space-lg);
}

.blog-hub__directory .blog-hub__guide-item {
  position: relative;
  padding-block: var(--space-md);
}

.blog-hub__directory .blog-hub__guide-item + .blog-hub__guide-item {
  border-top: 1px solid var(--color-border);
}

.blog-hub__directory .blog-hub__guide-description {
  margin-block-start: var(--space-2xs);
}

.blog-hub__topic-link:focus-visible,
.blog-hub__guide-title a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

@media (min-width: 48em) {
  .blog-hub__start-here .blog-hub__guide-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-hub__start-here,
  .blog-hub__directory {
    padding-block: 2.5rem;
  }

  .blog-hub__directory .blog-hub__guide-item {
    padding-block: var(--space-lg);
  }

  .blog-hub__directory .blog-hub__guide-title::after {
    inset-block-start: var(--space-lg);
  }

}

/* Article 33 — tour-guide decision table -----------------------------------
   Scoped two-column table treatment. It follows the existing article table
   convention while allowing both columns to wrap at mobile widths, avoiding
   page-level horizontal overflow. */
.article-body--a33 .article-table-wrap {
  width: 100%;
  margin-block: var(--space-lg);
}

.article-body--a33 .article-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--text-sm);
}

.article-body--a33 .article-table th,
.article-body--a33 .article-table td {
  width: 50%;
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.article-body--a33 .article-table thead th {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
}

.article-body--a33 .article-table tbody th {
  font-weight: var(--font-weight-bold);
}

@media (max-width: 47.99em) {
  .article-body--a33 .article-table {
    font-size: 0.8125rem;
  }

  .article-body--a33 .article-table th,
  .article-body--a33 .article-table td {
    padding: 0.5rem 0.375rem;
  }

  .article-body--a33 .article-table thead th {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }
}

/* ==========================================================================
   CONCIERGE detail page (/products/concierge/) ------------------------------
   Page-scoped construction only. This page is a practical long-form service
   explanation: restrained editorial sections and divider-led examples, never
   a product-card grid or service catalogue. No shared component is changed.
   ========================================================================== */
.concierge-page__column {
  max-width: 42rem;
}

.concierge-page__closing {
  padding-block: var(--space-3xl);
}

.concierge-page__terms {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.concierge-page__cta {
  cursor: default;
}

@media (max-width: 47.99em) {
  .concierge-page__closing {
    padding-block: var(--space-xl);
  }

  .concierge-page__section .flow,
  .concierge-page__closing .flow {
    --flow-space: var(--space-md);
  }

}

.concierge-page__section {
  padding-block: var(--space-3xl);
}

.concierge-page__section h2,
.concierge-page__closing h2 {
  font-size: var(--text-xl);
}

.concierge-page__examples {
  display: grid;
  gap: var(--space-lg);
}

.concierge-page__example + .concierge-page__example {
  padding-block-start: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.concierge-page__example h3 {
  margin-block-end: var(--space-xs);
  font-size: var(--text-md);
}

.concierge-page__example p + p {
  margin-block-start: var(--space-xs);
}

.concierge-page__catchall {
  padding-block-start: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 47.99em) {
  .concierge-page__section {
    padding-block: var(--space-xl);
  }

  .concierge-hero + .concierge-page__section {
    padding-block-start: var(--space-md);
  }

  .concierge-page__examples {
    gap: var(--space-2xs);
  }

  .concierge-page__example + .concierge-page__example {
    padding-block-start: var(--space-md);
  }

  .concierge-page__catchall {
    padding-block-start: var(--space-md);
  }
}

@media (min-width: 48em) {
  .concierge-page__closing {
    padding-block: calc(var(--space-3xl) + var(--space-lg));
  }

  .concierge-page__section {
    padding-block: var(--space-3xl);
  }

  .concierge-page__section:has(#small-things-title),
  .concierge-page__section:has(#message-title) {
    padding-block: calc(var(--space-3xl) + var(--space-sm));
  }

  .concierge-page__section:has(#small-things-title) h2,
  .concierge-page__section:has(#message-title) h2,
  .concierge-page__closing h2 {
    font-size: var(--text-2xl);
  }

  .concierge-page__section:has(#backup-title) h2,
  .concierge-page__section:has(#isnt-title) h2 {
    font-size: var(--text-lg);
  }
}

@media (min-width: 48em) {
  .concierge-page__section .concierge-page__column,
  .concierge-page__closing .concierge-page__column {
    max-width: 48rem;
  }

  .concierge-page__section p,
  .concierge-page__closing p {
    max-width: none;
  }

  .concierge-page__section,
  .concierge-page__section:has(#small-things-title),
  .concierge-page__section:has(#message-title) {
    padding-block: 2.5rem;
  }

  .concierge-page__closing {
    padding-block: var(--space-2xl);
  }

  .concierge-page__examples {
    gap: var(--space-xs);
  }

  .concierge-page__example + .concierge-page__example {
    padding-block-start: var(--space-md);
  }

  .concierge-page__catchall {
    padding-block-start: var(--space-md);
  }
}

/* Concierge Hero (/products/concierge/) --------------------------------------
   A single mobile canvas switches at 48em to a separate single desktop canvas.
   Artwork and live copy are both placed from the canvas coordinate system so
   they scale and stop together; this is intentionally Concierge-only. */
.concierge-hero {
  padding-inline: var(--space-md);
}

.concierge-hero__canvas {
  position: relative;
  container-type: size;
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 1104 / 1425;
  margin-inline: auto;
  overflow: hidden;
}

.concierge-hero__media,
.concierge-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.concierge-hero__media {
  position: absolute;
  inset: 0;
}

.concierge-hero__media img {
  object-fit: cover;
}

.concierge-hero__copy {
  position: absolute;
  inset-block-start: 43cqh;
  inset-inline-start: 8cqw;
  width: 84cqw;
  color: var(--color-text);
}

.concierge-hero__label,
.concierge-hero__title,
.concierge-hero__intro,
.concierge-hero__terms {
  max-width: none;
}

.concierge-hero__label {
  color: var(--color-primary);
  font-size: 3.2cqw;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
}

.concierge-hero__title {
  margin-block-start: 2.7cqw;
  font-size: 5.7cqw;
  line-height: 1.18;
}

.concierge-hero__intro {
  margin-block-start: 3.2cqw;
  font-size: 4cqw;
  line-height: 1.4;
}

.concierge-hero__terms {
  margin-block-start: 3.2cqw;
  color: var(--color-text-muted);
  font-size: 3.35cqw;
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
}

.concierge-hero__action {
  min-height: 11cqw;
  margin-block-start: 4.3cqw;
  padding: 2.2cqw 5.2cqw;
  border-radius: 2.4cqw;
  font-size: 3.8cqw;
}

@media (min-width: 48em) {
  .concierge-hero {
    padding-inline: var(--space-lg);
  }

  .concierge-hero__canvas {
    max-width: 90rem;
    aspect-ratio: 8234 / 3079;
  }

  .concierge-hero__copy {
    inset-block-start: 10cqh;
    inset-inline-start: 6.25cqw;
    width: 28.5cqw;
  }

  .concierge-hero__label {
    font-size: 0.95cqw;
  }

  .concierge-hero__title {
    margin-block-start: 1.25cqw;
    font-size: 2.35cqw;
    line-height: 1.16;
  }

  .concierge-hero__intro {
    margin-block-start: 1.65cqw;
    font-size: 1.4cqw;
    line-height: 1.38;
  }

  .concierge-hero__terms {
    margin-block-start: 1.65cqw;
    font-size: 1.4cqw;
  }

  .concierge-hero__action {
    min-height: 5cqw;
    margin-block-start: 2.2cqw;
    padding: 1cqw 2cqw;
    border-radius: 0.7cqw;
    font-size: 1.25cqw;
  }
}

/* ==========================================================================
   Product detail pages V1 (/products/connect/, /products/explore/,
   /products/concierge/) -----------------------------------------------------
   The supplied hero artwork provides both the scene and its text-safe area.
   The picture is the full Hero layer; the existing HTML copy is layered above
   it without CSS-generated visual treatment.
   ========================================================================== */
.product-detail__content {
  max-width: 42rem;
}

.product-detail__label {
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
}

.product-detail__value {
  max-width: 35rem;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}

.product-detail__price {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

.product-detail__section,
.product-detail__closing {
  padding-block: var(--space-2xl);
}

.product-detail__section h2,
.product-detail__closing h2 {
  font-size: var(--text-xl);
}

.product-detail__items {
  display: grid;
  gap: var(--space-lg);
  margin-block-start: var(--space-xl);
}

.product-detail__item {
  padding-block-start: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.product-detail__item h3,
.product-detail__check-list h3 {
  font-size: var(--text-md);
}

.product-detail__item-title {
  font-weight: var(--font-weight-bold);
}

.product-detail__guidance {
  background-color: var(--color-paper);
}

.product-detail__guidance-line,
.product-detail__judgment {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

.product-detail__verbs {
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
}

.product-detail__check-list {
  display: grid;
  gap: var(--space-md);
  margin-block: var(--space-xl);
}

.product-detail__check-list section {
  padding-block-start: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.product-detail__check-list p {
  margin-block-start: var(--space-2xs);
}

@media (min-width: 48em) {
  .product-detail__section,
  .product-detail__closing {
    padding-block: var(--space-3xl);
  }

  .product-detail__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-2xl);
  }

  .product-detail__item:nth-child(2) {
    padding-block-start: var(--space-lg);
    border-top: 1px solid var(--color-border);
  }

  .product-detail__check-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-2xl);
  }

}

/* ==========================================================================
   EXPLORE detail page (/products/explore/) ---------------------------------
   A page-scoped rebuild. The hero has one bounded canvas: its artwork and
   live copy share one coordinate system and stop scaling together. Existing
   product-detail rules remain for CONNECT and are not used by EXPLORE.
   ========================================================================== */
.explore-page__content {
  max-width: 56rem;
}

.explore-page__content--narrow {
  max-width: 42rem;
}

.explore-hero {
  padding-inline: var(--space-md);
}

.explore-hero__canvas {
  position: relative;
  container-type: size;
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--color-paper);
}

.explore-hero__media,
.explore-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.explore-hero__media {
  position: absolute;
  inset: 0;
}

.explore-hero__media img {
  object-fit: cover;
}

.explore-hero__copy {
  position: absolute;
  inset-block-start: 35cqh;
  inset-inline-start: 8cqw;
  width: 84cqw;
  color: var(--color-text);
}

.explore-hero__label {
  color: var(--color-primary);
  font-size: 3.1cqw;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
}

.explore-hero__title {
  margin-block-start: 2.4cqw;
  font-size: 6.1cqw;
  line-height: 1.14;
}

.explore-hero__lead {
  margin-block-start: 3.2cqw;
  font-size: 4.1cqw;
  font-weight: var(--font-weight-bold);
  line-height: 1.32;
}

.explore-hero__body,
.explore-hero__emphasis {
  margin-block-start: 2.6cqw;
  font-size: 3.35cqw;
  line-height: 1.38;
}

.explore-hero__emphasis {
  font-weight: var(--font-weight-medium);
}

.explore-hero__price {
  margin-block-start: 3.1cqw;
  font-size: 4.25cqw;
  font-weight: var(--font-weight-bold);
}

.explore-hero__action {
  min-height: 10.5cqw;
  margin-block-start: 3.5cqw;
  padding: 2.1cqw 4.8cqw;
  border-radius: 2.2cqw;
  font-size: 3.65cqw;
}

.explore-page__section,
.explore-page__closing {
  padding-block: var(--space-2xl);
}

.explore-page__section h2,
.explore-page__closing h2 {
  font-size: var(--text-xl);
}

.explore-page__checks,
.explore-page__outputs {
  display: grid;
  margin-block-start: var(--space-xl);
}

.explore-page__check {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.explore-page__check:last-child {
  border-bottom: 1px solid var(--color-border);
}

.explore-page__check h3,
.explore-page__output h3 {
  font-size: var(--text-md);
}

.explore-page__check p,
.explore-page__output p {
  margin-block-start: var(--space-2xs);
  color: var(--color-text-muted);
}

.explore-page__section-emphasis {
  margin-block-start: var(--space-xl);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}

.explore-page__principle {
  background-color: var(--color-paper);
}

.explore-page__outputs {
  gap: var(--space-md);
}

.explore-page__output {
  padding-block-start: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.explore-page__output h3 {
  color: var(--color-primary);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
}

.explore-page__delivery {
  max-width: 42rem;
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.explore-page__delivery p:first-child {
  font-weight: var(--font-weight-bold);
}

.explore-page__price {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

@media (max-width: 47.99em) {
  .explore-hero + .explore-page__section {
    padding-block-start: var(--space-md);
  }
}

@media (min-width: 48em) {
  .explore-hero {
    padding-inline: var(--space-lg);
  }

  .explore-hero__canvas {
    max-width: 90rem;
    aspect-ratio: 1920 / 819;
  }

  .explore-hero__copy {
    inset-block-start: 9cqh;
    inset-inline-start: 6.25cqw;
    width: 31cqw;
  }

  .explore-hero__label {
    font-size: 0.95cqw;
  }

  .explore-hero__title {
    margin-block-start: 1.2cqw;
    font-size: 2.55cqw;
    line-height: 1.14;
  }

  .explore-hero__lead {
    margin-block-start: 1.55cqw;
    font-size: 1.45cqw;
  }

  .explore-hero__body,
  .explore-hero__emphasis {
    margin-block-start: 1.2cqw;
    font-size: 1.08cqw;
    line-height: 1.4;
  }

  .explore-hero__price {
    margin-block-start: 1.55cqw;
    font-size: 1.45cqw;
  }

  .explore-hero__action {
    min-height: 4.8cqw;
    margin-block-start: 1.55cqw;
    padding: 0.95cqw 2cqw;
    border-radius: 0.65cqw;
    font-size: 1.2cqw;
  }

  .explore-page__section,
  .explore-page__closing {
    padding-block: var(--space-3xl);
  }

  .explore-page__checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-2xl);
  }

  .explore-page__check:nth-child(2) {
    border-top: 1px solid var(--color-border);
  }

  .explore-page__check:last-child {
    border-bottom: 0;
  }

  .explore-page__check:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--color-border);
  }

  .explore-page__outputs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* ==========================================================================
   CONNECT detail page (/products/connect/) ---------------------------------
   CONNECT has its own bounded hero canvas. Each artwork breakpoint and its
   live copy share the same coordinate system; no generic product-detail hero
   architecture is used here.
   ========================================================================== */
.connect-page__content {
  max-width: 56rem;
}

.connect-page__content--narrow {
  max-width: 42rem;
}

.connect-hero {
  padding-inline: var(--space-md);
}

.connect-hero__canvas {
  position: relative;
  container-type: size;
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--color-paper);
}

.connect-hero__media,
.connect-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.connect-hero__media {
  position: absolute;
  inset: 0;
}

.connect-hero__media img {
  object-fit: cover;
}

.connect-hero__copy {
  position: absolute;
  inset-block-start: 40cqh;
  inset-inline-start: 8cqw;
  width: 84cqw;
  color: var(--color-text);
}

.connect-hero__label {
  color: var(--color-primary);
  font-size: 3.1cqw;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
}

.connect-hero__title {
  margin-block-start: 2.3cqw;
  font-size: 6.2cqw;
  line-height: 1.14;
}

.connect-hero__value {
  margin-block-start: 3cqw;
  font-size: 4cqw;
  font-weight: var(--font-weight-bold);
  line-height: 1.32;
}

.connect-hero__body {
  margin-block-start: 2.4cqw;
  font-size: 3.2cqw;
  line-height: 1.38;
}

.connect-hero__terms {
  margin-block-start: 2.8cqw;
  font-size: 3.85cqw;
  font-weight: var(--font-weight-bold);
}

.connect-hero__action {
  min-height: 10.5cqw;
  margin-block-start: 3.2cqw;
  padding: 2.1cqw 4.8cqw;
  border-radius: 2.2cqw;
  font-size: 3.65cqw;
}

.connect-page__section,
.connect-page__closing {
  padding-block: var(--space-2xl);
}

.connect-page__section h2,
.connect-page__closing h2 {
  font-size: var(--text-xl);
}

.connect-page__deliverables,
.connect-page__areas {
  display: grid;
  margin-block-start: var(--space-xl);
}

.connect-page__deliverable,
.connect-page__area {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.connect-page__deliverable:last-child,
.connect-page__area:last-child {
  border-bottom: 1px solid var(--color-border);
}

.connect-page__deliverable h3 {
  font-size: var(--text-md);
}

.connect-page__deliverable p + p,
.connect-page__area p {
  margin-block-start: var(--space-2xs);
}

.connect-page__area h3 {
  color: var(--color-primary);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.connect-page__area p {
  color: var(--color-text-muted);
}

.connect-page__checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-lg);
  margin-block: var(--space-xl);
  padding: 0;
  list-style: none;
}

.connect-page__checklist li {
  padding-block-start: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-weight: var(--font-weight-bold);
}

.connect-page__closing-line,
.connect-page__judgment {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}

.connect-page__roaming {
  background-color: var(--color-paper);
}

.connect-page__faq {
  margin-block-start: var(--space-xl);
}

.connect-page__terms {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

@media (max-width: 47.99em) {
  .connect-hero + .connect-page__section {
    padding-block-start: var(--space-md);
  }
}

@media (min-width: 48em) {
  .connect-hero {
    padding-inline: var(--space-lg);
  }

  .connect-hero__canvas {
    max-width: 90rem;
    aspect-ratio: 1920 / 819;
  }

  .connect-hero__copy {
    inset-block-start: 10cqh;
    inset-inline-start: 6.25cqw;
    width: 30cqw;
  }

  .connect-hero__label {
    font-size: 0.95cqw;
  }

  .connect-hero__title {
    margin-block-start: 1.2cqw;
    font-size: 2.55cqw;
  }

  .connect-hero__value {
    margin-block-start: 1.45cqw;
    font-size: 1.4cqw;
  }

  .connect-hero__body {
    margin-block-start: 1.1cqw;
    font-size: 1.04cqw;
    line-height: 1.4;
  }

  .connect-hero__terms {
    margin-block-start: 1.35cqw;
    font-size: 1.35cqw;
  }

  .connect-hero__action {
    min-height: 4.8cqw;
    margin-block-start: 1.55cqw;
    padding: 0.95cqw 2cqw;
    border-radius: 0.65cqw;
    font-size: 1.2cqw;
  }

  .connect-page__section,
  .connect-page__closing {
    padding-block: var(--space-3xl);
  }

  .connect-page__deliverables {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .connect-page__deliverable:last-child {
    border-bottom: 0;
  }

  .connect-page__areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-2xl);
  }

  .connect-page__area:last-child {
    border-bottom: 1px solid var(--color-border);
  }

  .connect-page__area:nth-child(2) {
    border-top: 1px solid var(--color-border);
  }

  .connect-page__area:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--color-border);
  }
}



/* ==========================================================================
   Products SELECT page — desktop V1 (products/index.html) ------------------
   A self-contained intro and three full-bleed product canvases. The mobile
   presentation is intentionally not designed in this desktop-only build.
   ========================================================================== */

.products-select-intro {
  padding-block: clamp(5rem, 10vw, 9rem) clamp(4rem, 8vw, 7rem);
  background: var(--color-bg);
}

.products-select-intro__content {
  max-width: 48rem;
}

.products-select-intro__content h1 {
  max-width: 42rem;
  margin-block-end: var(--space-lg);
}

.products-select-intro__content > p:last-child {
  max-width: 40rem;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.products-select {
  display: grid;
}

.products-select__master {
  display: none;
}

.products-select-closing {
  background: #ffffff;
}

.products-select__pagination {
  display: none;
}

.products-select__panel {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  color: #ffffff;
}

.products-select__panel > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.products-select__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  max-width: 26rem;
  padding: clamp(1.5rem, 3vw, 3rem);
}

.products-select__label {
  margin-block-end: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
}

.products-select__content h2 {
  max-width: 12.5rem;
  margin-block-end: var(--space-md);
  color: inherit;
  font-size: clamp(2rem, 2.8vw, 3.5rem);
  line-height: 1.05;
}

.products-select__content > p:not(.products-select__label):not(.products-select__price) {
  max-width: 22rem;
  font-size: var(--text-md);
  line-height: 1.55;
}

.products-select__price {
  margin-block: auto var(--space-lg);
  padding-block-start: var(--space-xl);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

.products-select__link {
  color: inherit;
  font-weight: var(--font-weight-medium);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.products-select__link:hover,
.products-select__link:focus-visible {
  color: inherit;
}

@media (max-width: 47.99875em) {
  .products-select-intro {
    padding-block: 1.5rem;
  }

  .products-select-intro__content h1 {
    margin-block-end: 0;
  }

  #products-select-title {
    text-align: center;
  }

  .products-select {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-inline: 1rem;
    scroll-behavior: smooth;
    scroll-padding-inline: 1rem;
    scroll-snap-type: x mandatory;
  }

  .products-select__panel {
    flex: 0 0 80vw;
    aspect-ratio: 2 / 3;
    scroll-snap-align: start;
  }

  .products-select__panel > img {
    object-fit: cover;
  }

  .products-select__pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding-block: 0.75rem;
  }

  .products-select__dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-border);
    cursor: pointer;
  }

  .products-select__dot[aria-current="true"] {
    background: var(--color-text);
  }

  .products-select-closing {
    min-block-size: 1rem;
  }
}

@media (min-width: 48em) {
  .products-select-intro {
    padding-block: clamp(1rem, 1.5vw, 1.25rem);
  }

  .products-select-intro__content {
    max-width: none;
    display: grid;
    align-items: center;
  }

  .products-select-intro__content h1 {
    grid-area: 1 / 1;
    justify-self: center;
    max-width: none;
    margin-block-end: 0;
    text-align: center;
  }

  .products-select {
    position: relative;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 80rem;
    aspect-ratio: 1920 / 973;
    margin-inline: auto;
    overflow: hidden;
  }

  .products-select__master {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
  }

  .products-select__panel {
    z-index: 2;
    min-width: 0;
    aspect-ratio: auto;
    cursor: pointer;
  }

  .products-select__panel > img {
    display: none;
  }

  .products-select-closing {
    min-block-size: 3rem;
  }

  .products-select__content {
    z-index: 2;
    padding-inline: clamp(2rem, 3.25vw, 3.75rem);
  }

  .products-select::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    content: "";
    background:
      radial-gradient(
        ellipse 24% 58% at 7% 12%,
        rgba(8, 15, 25, 0.34) 0%,
        rgba(8, 15, 25, 0.18) 42%,
        rgba(8, 15, 25, 0.06) 68%,
        rgba(8, 15, 25, 0) 100%
      ),
      radial-gradient(
        ellipse 31% 62% at 41% 14%,
        rgba(8, 15, 25, 0.44) 0%,
        rgba(8, 15, 25, 0.24) 42%,
        rgba(8, 15, 25, 0.08) 68%,
        rgba(8, 15, 25, 0) 100%
      ),
      radial-gradient(
        ellipse 27% 57% at 75% 13%,
        rgba(8, 15, 25, 0.26) 0%,
        rgba(8, 15, 25, 0.13) 42%,
        rgba(8, 15, 25, 0.04) 68%,
        rgba(8, 15, 25, 0) 100%
      ),
      radial-gradient(
        ellipse 6% 9% at 75.5% 64%,
        rgba(8, 15, 25, 0.13) 0%,
        rgba(8, 15, 25, 0.07) 45%,
        rgba(8, 15, 25, 0) 100%
      );
  }

  .products-select__content > p:not(.products-select__label):not(.products-select__price) {
    font-weight: var(--font-weight-medium);
  }

  .products-select__price {
    margin-block: var(--space-lg) 0;
    padding-block-start: 0;
  }

  .products-select__link {
    position: absolute;
    inset-block-start: 62%;
    inset-inline-start: clamp(2rem, 3.25vw, 3.75rem);
  }
}

/* A37 — Toilets in China: Desktop-only hero and ChinaGo introduction layout. */
@media (min-width: 48em) {
  .a37-hero .page-header__inner {
    max-width: 60rem;
  }

  .a37-hero__eyebrow {
    max-width: none;
  }

  .a37-desktop-break {
    display: block;
  }

  .a37-chinago-title {
    max-width: none;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .a37-product-row + .a37-product-row {
    margin-block-start: 0.5rem;
  }

  .a37-product-row a {
    font-weight: 600;
  }
}

/* A37 — Toilets in China: Mobile-only hero and ChinaGo introduction fixes. */
@media (max-width: 47.99em) {
  .a37-hero h1 {
    font-size: 1.875rem;
  }

  .a37-desktop-break {
    display: block;
    white-space: nowrap;
  }

  .a37-mobile-second-line {
    font-size: 1.5rem;
  }

  .a37-chinago-title {
    font-weight: 600;
  }
}

/* A39 — QR-code restaurant ordering phrases. Scoped display treatment for
   phrases a traveler may show directly to restaurant staff. */
.article-body--a39 .a39-phrase-card {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-body--a39 .a39-phrase-card__chinese {
  color: var(--color-text);
  font-size: clamp(1.25rem, 1.08rem + 1vw, 1.5rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.article-body--a39 .a39-phrase-card__english {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* A41 — How to Buy a SIM Card in China as a Tourist. Article-scoped airport
   jump navigation, source lists and tables; no shared Blog styles are changed. */
.article-section--a41 {
  padding-block-start: var(--space-lg);
}

.article-body--a41 > h2[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

.article-body--a41 > ul {
  padding-inline-start: 1.25rem;
}

.article-body--a41 .article-table-wrap {
  width: 100%;
  margin-block: var(--space-lg);
}

.article-body--a41 .article-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--text-sm);
}

.article-body--a41 .article-table th,
.article-body--a41 .article-table td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.article-body--a41 .article-table thead th {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
}

.article-body--a41 .article-table tbody th {
  font-weight: var(--font-weight-bold);
}

.article-body--a41 .a41-airport-jump {
  margin-block: var(--space-md);
  padding-block: var(--space-sm);
  border-block: 1px solid var(--color-border);
}

.article-body--a41 .a41-airport-jump__title {
  margin: 0 0 var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.article-body--a41 .a41-airport-jump__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-body--a41 .a41-airport-jump__list a {
  display: flex;
  gap: 0.375rem;
  align-items: baseline;
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.35;
  text-decoration: none;
}

.article-body--a41 .a41-airport-jump__list a:hover,
.article-body--a41 .a41-airport-jump__list a:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.article-body--a41 .a41-airport-jump__list span {
  flex: 0 0 auto;
  font-weight: var(--font-weight-bold);
}

.article-body--a41 .a41-sources {
  margin-block: var(--space-md);
  padding-block-start: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.article-body--a41 .a41-sources p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.article-body--a41 .a41-sources ul {
  margin: var(--space-xs) 0 0;
  padding-inline-start: 1.25rem;
}

.article-body--a41 .a41-sources li + li {
  margin-block-start: var(--space-2xs);
}

.article-body--a41 .a41-sources a {
  font-size: var(--text-sm);
}

@media (min-width: 48em) {
  .article-section--a41 {
    padding-block-start: var(--space-2xl);
  }

  .article-body--a41 .a41-airport-jump__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 47.99em) {
  .article-section--a41 {
    padding-block-start: var(--space-md);
  }

  .article-body--a41 {
    --flow-space: 0.6875rem;
  }

  .article-body--a41 > p,
  .article-body--a41 > ul {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .article-body--a41 > h2 {
    margin-block-start: 1.625rem;
  }

  .article-body--a41 .article-table {
    font-size: 0.8125rem;
  }

  .article-body--a41 .article-table th,
  .article-body--a41 .article-table td {
    padding: 0.5rem 0.375rem;
  }

  .article-body--a41 .article-table thead th {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }
}