/* ==========================================================================
   OPC出海 — design system
   Light-first, developer-documentation feel. Restrained, high signal, no
   decoration that carries no information.
   ========================================================================== */

/* ------------------------------------------------------------- tokens */
:root {
  --bg:        #ffffff;
  --bg-soft:   #f7f8fa;
  --bg-card:   #ffffff;
  --bg-inset:  #f2f4f7;
  --line:      #e4e7ec;
  --line-soft: #eef0f4;

  --fg:        #101828;
  --fg-muted:  #5a6474;
  --fg-faint:  #98a2b3;

  --accent:      #2455e6;
  --accent-soft: #eef2ff;
  --ok:          #067647;
  --ok-soft:     #ecfdf3;
  --warn:        #b54708;
  --warn-soft:   #fffaeb;
  --info:        #175cd3;
  --info-soft:   #eff8ff;

  --radius:    10px;
  --radius-sm: 7px;
  --radius-lg: 16px;
  --maxw:      1140px;
  --gut:       20px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

:root[data-theme="dark"] {
  --bg:        #0b0e14;
  --bg-soft:   #10141c;
  --bg-card:   #121722;
  --bg-inset:  #1a2030;
  --line:      #222a3a;
  --line-soft: #1a2130;

  --fg:        #e8edf6;
  --fg-muted:  #98a3b6;
  --fg-faint:  #6b7688;

  --accent:      #7aa2ff;
  --accent-soft: #16203a;
  --ok:          #6ee7a8;
  --ok-soft:     #10241c;
  --warn:        #f5c069;
  --warn-soft:   #2a1f0c;
  --info:        #8ab4ff;
  --info-soft:   #131d33;
}

/* -------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[hidden] { display: none !important; }

body {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { padding-left: 1.15em; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.018em; font-weight: 650; }
h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: -.028em; }
h2 { font-size: 1.32rem; }
h3 { font-size: 1.02rem; }

.ic { width: 16px; height: 16px; flex-shrink: 0; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 26px; }
.muted { color: var(--fg-muted); }
.small { font-size: 13px; line-height: 1.6; }
.note {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--radius);
  background: var(--warn-soft); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 24%, transparent);
  font-size: 14px;
}
.center { text-align: center; }
.center-actions { justify-content: center; }

/* ------------------------------------------------------------ layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap.narrow { max-width: 660px; }
.section { padding: 62px 0; }
.section-alt { background: var(--bg-soft); border-block: 1px solid var(--line-soft); }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }
.grid-side { display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) { .grid-side { grid-template-columns: minmax(0, 1fr) 296px; } }
.grid-side > * { min-width: 0; }

/* ------------------------------------------------------------ header */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 14px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner { display: flex; align-items: center; gap: 14px; height: 58px; }

/* Brand mark. The artwork sits on a transparent background and comes in two
   variants, because the black outline and 出海站 glyphs would vanish against
   the dark theme. Each variant is referenced only inside its own theme rule, so
   the browser fetches just the one that applies rather than both. */
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo {
  display: block; width: 76px; height: 32px;
  background: url(/logo.png) no-repeat left center / contain;
}
:root[data-theme="dark"] .brand-logo {
  background-image: url(/logo-dark.png);
}

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
/* Primary navigation.
   Was --fg-muted at normal weight, which read as secondary against the brand
   mark beside it. Now full-contrast text at medium weight, with the accent used
   for both the hover and current-page states so the active page is obvious
   without relying on weight alone. Every colour comes from a theme token, so
   both light and dark follow automatically. */
.nav a {
  padding: 7px 11px; border-radius: var(--radius-sm); white-space: nowrap;
  font-size: 14px; font-weight: 500; color: var(--fg);
  transition: color .14s, background .14s;
}
.nav a:hover { color: var(--accent); background: var(--accent-soft); }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }

.icon-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-card); cursor: pointer;
  transition: border-color .14s, color .14s;
}
.icon-btn:hover { border-color: var(--fg-faint); }
.menu-toggle { display: none; margin-left: auto; }

@media (max-width: 900px) {
  .nav {
    position: absolute; left: var(--gut); right: var(--gut); top: calc(100% + 8px);
    flex-direction: column; align-items: stretch;
    background: var(--bg-card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 8px; gap: 2px;
    box-shadow: 0 16px 40px -18px rgba(16, 24, 40, .28);
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 10px 12px; font-size: 15px; }
  .menu-toggle { display: grid; margin-left: auto; }
}

/* --------------------------------------------------------------- hero */
.hero { padding: 76px 0 58px; border-bottom: 1px solid var(--line-soft); }
.kicker {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
/* Hero: copy on the left, the pixel globe on the right.
   The h1 previously carried `max-width: 16ch`, which wraps this tagline
   because CJK glyphs are full-width — twelve characters occupy roughly 24ch.
   The column now constrains it instead, and the size is tuned so the tagline
   stays on one line from the two-column breakpoint up, while still shrinking
   enough on a phone that it does not wrap there either. */
.hero-grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 340px); }
}
.hero h1 { max-width: none; font-size: clamp(1.55rem, 4.6vw, 2.85rem); }
.hero-lede { margin-top: 20px; font-size: 16.5px; color: var(--fg-muted); max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
/* Decorative globe. Hidden below the two-column breakpoint: on a phone there is
   no right-hand space for it, and skipping it there also keeps the animation
   off mobile CPUs entirely. */
.hero-globe { display: none; }
@media (min-width: 900px) {
  .hero-globe { display: block; }
  .hero-globe canvas {
    display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
    touch-action: pan-y; cursor: grab;
  }
  .hero-globe canvas:active { cursor: grabbing; }
}
.hero-objective {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  font-size: 13.5px; color: var(--fg-muted);
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  padding: 7px 13px; border-radius: 999px;
}

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 17px; border-radius: var(--radius-sm);
  font-size: 14.5px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all .14s;
  white-space: nowrap;
}
.btn .ic { width: 15px; height: 15px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: var(--line); color: var(--fg); background: var(--bg-card); }
.btn-ghost:hover { border-color: var(--fg-faint); }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* -------------------------------------------------------------- cards */
.card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
  transition: border-color .14s, transform .14s;
}
.card h2, .card h3 { margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--fg-muted); }
a.card:hover { border-color: var(--fg-faint); }

.tool-card { display: flex; flex-direction: column; gap: 10px; }
.tool-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tool-card-top h3 { min-width: 0; overflow-wrap: anywhere; }
.tool-card-top .badge { flex-shrink: 0; }
.tool-card h3 { font-size: 15.5px; margin: 0; }

/* Vendor favicon, drawn at 18px next to the tool name. A hairline ring keeps a
   white-on-transparent mark from disappearing into the card, and a subtle radius
   stops the square PNGs from looking pasted on. inline-block + vertical-align
   rather than flex so the name still wraps naturally inside the heading. */
.tool-favicon {
  width: 18px; height: 18px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 7px;
  border-radius: 4px;
  object-fit: contain;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool-favicon { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
}
[data-theme="dark"] .tool-favicon { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.tool-card-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }

.model-card { display: flex; flex-direction: column; gap: 8px; }
.cat-card { display: flex; flex-direction: column; gap: 8px; }
.cat-ic { color: var(--accent); }
.cat-count { font-family: var(--mono); font-size: 12px; color: var(--fg-faint); }
.model-detail { display: flex; flex-direction: column; gap: 10px; }
.guide-card { display: flex; flex-direction: column; gap: 9px; }
.card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--accent); margin-top: auto;
}
.card-link .ic { width: 14px; height: 14px; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 44px 20px; }

/* ------------------------------------------------------------ badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  padding: 2.5px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--fg-muted); background: var(--bg-soft);
  white-space: nowrap;   /* never break a status label mid-word */
}
.badge .ic { width: 11px; height: 11px; }
.trust-tested { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.trust-verified { color: var(--info); background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 26%, transparent); }
.trust-pending { color: var(--fg-faint); background: var(--bg-inset); }
.badge-affiliate { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 26%, transparent); }
.badge-sponsored { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 26%, transparent); }
.badge-plain { color: var(--fg-faint); }

.tag {
  display: inline-block; font-size: 12px; padding: 2px 8px;
  border-radius: var(--radius-sm); background: var(--bg-inset); color: var(--fg-muted);
}
.tag-affiliate, .tag-sponsored { background: var(--warn-soft); color: var(--warn); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.trust-inline { font-size: 11.5px; color: var(--fg-faint); }

.status {
  align-self: flex-start; font-size: 11.5px; font-weight: 600;
  padding: 2.5px 8px; border-radius: 999px;
  background: var(--bg-inset); color: var(--fg-muted);
}
.status-planned { background: var(--info-soft); color: var(--info); }

/* ---------------------------------------------------------- sections */
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.sec-head h2 { font-size: 1.42rem; }
.sec-lede { margin-top: 9px; font-size: 14.5px; color: var(--fg-muted); max-width: 62ch; }
.sec-link {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 14px; font-weight: 600; color: var(--accent);
}
.sec-link .ic { width: 14px; height: 14px; }

/* -------------------------------------------------------- page heads */
.page-head { padding: 52px 0 34px; border-bottom: 1px solid var(--line-soft); }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-faint); margin-bottom: 16px; }
.crumb a:hover { color: var(--accent); }
.crumb-sep { opacity: .5; }
.page-lede { margin-top: 16px; font-size: 16px; color: var(--fg-muted); max-width: 64ch; }

/* -------------------------------------------------------- stage rail */
.stage-rail {
  display: grid; gap: 8px; list-style: none; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr));
}
.stage-rail-inline { margin: 16px 0 26px; }
.stage-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px; align-items: baseline;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-card); font-size: 14px;
}
.stage-item.is-current { border-color: var(--accent); }
.stage-num { font-family: var(--mono); font-size: 11.5px; color: var(--accent); font-weight: 600; grid-column: 1; }
.stage-item a { font-weight: 600; grid-column: 2; min-width: 0; }
.stage-en { font-size: 10.5px; color: var(--fg-faint); grid-column: 2; letter-spacing: .04em; }

/* --------------------------------------------------------- timeline */
.timeline { list-style: none; padding: 0; display: grid; gap: 4px; }
.tl-item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px; padding: 24px 0; border-top: 1px solid var(--line-soft);
}
.tl-item:first-child { border-top: 0; }
.tl-num { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--accent); letter-spacing: -.03em; }
.tl-body h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 1.16rem; margin-bottom: 9px; }
.tl-en { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--fg-faint); text-transform: uppercase; letter-spacing: .06em; }
.tl-body p { color: var(--fg-muted); font-size: 14.5px; max-width: 68ch; }
.tl-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.tl-body .card-link { margin-top: 13px; }

/* ------------------------------------------------------------- prose */
.prose { min-width: 0; }
.prose h2 { margin: 32px 0 12px; padding-top: 4px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 14px; color: var(--fg-muted); }
.prose ul, .prose ol { margin-bottom: 16px; color: var(--fg-muted); }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent); }
.prose a:hover { text-decoration: underline; }
.prose code { font-family: var(--mono); font-size: .9em; background: var(--bg-inset); padding: 1px 5px; border-radius: 4px; }
.prose .note { margin: 18px 0; }
.prose .note a { color: inherit; text-decoration: underline; }

.facts { display: grid; gap: 13px; margin: 18px 0 26px; }
.facts-sm { gap: 9px; }
.facts > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.facts dt { font-size: 13px; color: var(--fg-faint); }
.facts dd { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.facts a { color: var(--accent); }

.editorial-pending {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 15px 17px; border-radius: var(--radius);
  background: var(--bg-soft); border: 1px dashed var(--line);
  margin: 16px 0 22px;
}
.editorial-pending p { margin: 0; font-size: 14px; color: var(--fg-muted); }
.editorial-pending strong { color: var(--fg); }

.outline { list-style: none; padding: 0; counter-reset: o; }
.outline li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.outline-num { font-family: var(--mono); font-size: 12px; color: var(--accent); flex-shrink: 0; padding-top: 3px; }

.stack-list, .link-list, .commerce-list { list-style: none; padding: 0; }
.stack-list li { padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.stack-list li:last-child, .link-list li:last-child, .commerce-list li:last-child { border-bottom: 0; }
.stack-list li a { font-weight: 600; color: var(--accent); }
.stack-list li span { display: block; font-size: 12.5px; color: var(--fg-faint); }
.link-list li { padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--line-soft); }
.link-list a { color: var(--accent); }
.commerce-list li { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--line-soft); }
.commerce-list span { color: var(--fg-muted); }
.commerce-card { border-color: color-mix(in srgb, var(--warn) 22%, var(--line)); }

/* --------------------------------------------------------- callout */
.callout {
  display: grid; gap: 24px; align-items: center;
  padding: 30px; border-radius: var(--radius-lg);
  background: var(--bg-soft); border: 1px solid var(--line);
}
@media (min-width: 800px) { .callout { grid-template-columns: minmax(0, 1fr) auto; } }
.callout h2 { font-size: 1.35rem; margin-bottom: 12px; }
.callout p { color: var(--fg-muted); font-size: 14.5px; max-width: 60ch; }
.callout-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------ forms */
.consult-form { display: grid; gap: 15px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14.5px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-inset); color: var(--fg-muted);
}
.field input:disabled, .field select:disabled, .field textarea:disabled { cursor: not-allowed; }
.demo-notice {
  display: flex; gap: 11px; align-items: flex-start; margin-bottom: 18px;
  background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 24%, transparent);
}
.demo-notice p { margin: 0; color: var(--warn); font-size: 13.5px; }
.demo-notice strong { color: var(--warn); }

/* ---------------------------------------------------------- go page */
.go-page { padding: 70px 0; }
.go-card { margin-top: 24px; display: grid; gap: 14px; }
.go-target { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--fg); }
.go-host { font-family: var(--mono); font-size: 13px; color: var(--fg-faint); }
.go-note {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--fg-muted);
}
.go-note-affiliate { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 24%, transparent); }
.go-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------ stack */
.stack-stage { margin-bottom: 42px; }
.stack-stage-head { display: flex; align-items: baseline; gap: 11px; margin-bottom: 16px; }
.stack-stage-head h2 { font-size: 1.16rem; }

/* ----------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--line-soft); background: var(--bg-soft); padding: 48px 0 24px; margin-top: 20px; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.7fr repeat(3, 1fr); } }
/* The brand mark is reused here rather than duplicated, so the header and
   footer cannot drift apart. It carries role="img" + aria-label because this
   instance is not inside a link that could supply the accessible name. */
.footer-logo { margin-bottom: 2px; }
.footer-tagline { margin-top: 8px; font-size: 14px; color: var(--fg); }
.footer-note { margin-top: 10px; font-size: 13px; color: var(--fg-faint); max-width: 42ch; }
.footer-col h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 12px;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 7px; }
.footer-col a { font-size: 13.5px; color: var(--fg-muted); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--fg-faint);
}
.footer-legal a:hover { color: var(--accent); }

/* Contact channels on the consultation page.
   The QR keeps a white card behind it in both themes: scanners need a light
   quiet zone, so letting it sit directly on the dark background would make it
   harder to read. image-rendering keeps the 1-bit source crisp when scaled. */
.consult-channels { display: grid; gap: 16px; margin: 18px 0 10px; }
@media (min-width: 640px) {
  .consult-channels { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); align-items: start; }
}
.consult-channel { padding: 18px 20px; }
.consult-channel h3 { margin-bottom: 10px; }
.consult-qr {
  display: block; width: 100%; max-width: 190px; height: auto;
  margin: 0 0 12px; padding: 8px; background: #ffffff;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  image-rendering: pixelated;
}

/* FAQ block used by the tool-category and business-model pages. Built on
   <details> so it needs no JavaScript and stays keyboard- and screen-reader
   accessible; the styling only replaces the default disclosure triangle. */
.faq-list { margin: 14px 0 4px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  cursor: pointer; list-style: none; padding: 13px 0;
  font-weight: 500; color: var(--fg); display: flex; gap: 10px; align-items: baseline;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before {
  content: '+'; flex-shrink: 0; width: 14px; color: var(--accent);
  font-weight: 400; font-size: 16px; line-height: 1;
}
.faq-item[open] > summary::before { content: '−'; }
.faq-item > summary:hover { color: var(--accent); }
.faq-body { padding: 0 0 15px 24px; }
.faq-body p { margin: 0; }

/* Ordered steps, for the "get started in this order" sections. */
.step-list { counter-reset: step; list-style: none; padding-left: 0; margin: 12px 0 4px; }
.step-list li {
  counter-increment: step; position: relative;
  padding: 0 0 14px 38px; margin: 0;
}
.step-list li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 600;
  display: grid; place-items: center;
}
.step-list li::after {
  content: ''; position: absolute; left: 11.5px; top: 28px; bottom: 2px;
  width: 1px; background: var(--line);
}
.step-list li:last-child { padding-bottom: 0; }
.step-list li:last-child::after { display: none; }

/* Community block on the renamed /consult/ page. Reuses the contact-channel
   grid from the same page; only the price ladder and the lead line are new. */
.community-lead { font-size: 1.05rem; color: var(--fg); }
.price-ladder { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 16px; }
.price-tier {
  flex: 1 1 150px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg-card);
  display: flex; flex-direction: column; gap: 2px;
}
.price-tier.price-now { border-color: var(--accent); background: var(--accent-soft); }
.price-tag { font-size: 12px; color: var(--fg-muted); }
.price-tier.price-now .price-tag { color: var(--accent); }
.price-num { font-size: 1.35rem; font-weight: 600; color: var(--fg); }
.price-tier.price-now .price-num { color: var(--accent); }
.price-unit { font-size: 12px; color: var(--fg-muted); }
.community-qr .qr-title { margin-bottom: 10px; }

/* ------------------------------------------------- accessibility */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 620px) {
  :root { --gut: 16px; }
  .section { padding: 46px 0; }
  .hero { padding: 52px 0 42px; }
  .facts > div { grid-template-columns: 1fr; gap: 3px; }
}

/* ==========================================================================
   STEP 2 — decision system components
   ========================================================================== */

/* ------------------------------------------------ empty / pending states */
/* Absence of verified data is rendered as an explicit, deliberate state.
   Never as a blank area, and never filled with invented copy. */
.unknown {
  color: var(--fg-faint);
  font-style: normal;
  border-bottom: 1px dashed var(--line);
}
.pending-block {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 15px 17px; border-radius: var(--radius);
  background: var(--bg-soft); border: 1px solid var(--line);
  margin: 0 0 24px;
}
.pending-block p { margin: 0 0 5px; font-size: 13.8px; color: var(--fg-muted); }
.pending-block p:last-child { margin-bottom: 0; }
.pending-block strong { color: var(--fg); }
.pending-block .ic { margin-top: 3px; color: var(--fg-faint); }
.pending-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.pending-warn .ic, .pending-warn p, .pending-warn strong { color: var(--warn); }
.pending-inline {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--bg-soft); border: 1px dashed var(--line);
  margin: 12px 0 20px;
}
.pending-inline p { margin: 0; font-size: 13.5px; color: var(--fg-muted); }
.pending-inline a { color: var(--accent); }
.pending-inline .ic { margin-top: 3px; color: var(--fg-faint); flex-shrink: 0; }

/* -------------------------------------------------------- research labels */
.rs-unreviewed  { color: var(--fg-faint); background: var(--bg-inset); }
.rs-researching { color: var(--info);     background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 26%, transparent); }
.rs-verified    { color: var(--ok);       background: var(--ok-soft);   border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.rs-tested      { color: #fff; background: var(--ok); border-color: var(--ok); }
.rs-review      { color: var(--info);     background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 26%, transparent); }

.research-legend {
  padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft);
}
.legend-head { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14px; margin-bottom: 14px; }
.research-legend ul { list-style: none; padding: 0; display: grid; gap: 9px; margin-bottom: 14px; }
.research-legend li { display: flex; gap: 12px; align-items: baseline; font-size: 13.5px; color: var(--fg-muted); }
.research-legend li .badge { flex-shrink: 0; }

/* ------------------------------------------------------------- tool cards */
.tool-status-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tool-card h3 a { color: inherit; }
.tool-card h3 a:hover { color: var(--accent); }
.tool-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }

/* ---------------------------------------------------------------- filters */
.browse { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .browse:has(.filter-bar:not([hidden])) { grid-template-columns: 236px minmax(0, 1fr); align-items: start; } }
.filter-bar {
  display: grid; gap: 18px; align-content: start;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-card); padding: 16px;
  position: sticky; top: 72px;
}
@media (max-width: 979px) { .filter-bar { position: static; } }
.filter-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.filter-title { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 14px; }
.filter-group { border: 0; padding: 0; margin: 0; }
.filter-group legend {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-faint); padding: 0 0 9px;
}
.filter-options { display: grid; gap: 2px; }
.filter-option {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 6px 8px; border-radius: var(--radius-sm); font-size: 13.5px;
}
.filter-option:hover { background: var(--bg-soft); }
.filter-option input { accent-color: var(--accent); flex-shrink: 0; }
.filter-option span { flex: 1; min-width: 0; }
.filter-option em { font-style: normal; font-size: 11.5px; color: var(--fg-faint); font-family: var(--mono); }
.filter-status { font-size: 12.5px; color: var(--fg-muted); border-top: 1px solid var(--line-soft); padding-top: 12px; }
.empty-filter { font-size: 14px; color: var(--fg-muted); padding: 28px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); }
.btn-sm { padding: 5px 11px; font-size: 12.5px; }

/* ------------------------------------------------------------- fit blocks */
.fit-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin: 14px 0 18px; }
.fit-block { padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-card); }
.fit-block h3 { display: flex; align-items: center; gap: 7px; font-size: 13.5px; margin-bottom: 9px; }
.fit-block ul { margin: 0; padding-left: 1.1em; font-size: 13.8px; color: var(--fg-muted); }
.fit-block li { margin-bottom: 4px; }
.fit-yes { border-color: color-mix(in srgb, var(--ok) 24%, var(--line)); }
.fit-yes h3 { color: var(--ok); }
.fit-no { border-color: color-mix(in srgb, var(--warn) 24%, var(--line)); }
.fit-no h3 { color: var(--warn); }

/* ------------------------------------------------------------- stage page */
.stage-rail-wrap { overflow-x: auto; padding-bottom: 4px; }
.stage-facts { display: grid; gap: 12px; margin: 16px 0 18px; }
.stage-facts > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.stage-facts dt { font-size: 12.5px; color: var(--fg-faint); }
.stage-facts dd { font-size: 14.2px; color: var(--fg-muted); }
.stage-facts dd.is-hard { color: var(--warn); font-weight: 600; }
.stage-facts dd.is-soft { color: var(--ok); font-weight: 600; }
.tl-short { font-weight: 500; color: var(--fg) !important; }
.questions { background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 16px; margin: 16px 0; }
.questions-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--fg-muted); margin-bottom: 8px; }
.questions ul { margin: 0; padding-left: 1.1em; font-size: 13.8px; color: var(--fg-muted); }
.stage-links { display: grid; gap: 10px; margin: 16px 0; }
.stage-link-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stage-link-group > span:first-child { font-size: 12px; color: var(--fg-faint); min-width: 84px; }
.stage-relevance { border-left: 2px solid var(--line); padding-left: 14px; margin: 16px 0; }
.stage-relevance p { font-size: 13.6px; color: var(--fg-muted); margin-bottom: 6px; }
.stage-notes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin-top: 26px; }
.stage-note { border-top: 2px solid var(--line); padding-top: 12px; }
.stage-note strong { font-size: 14.5px; }
.stage-note p { font-size: 13.4px; color: var(--fg-muted); margin-top: 5px; }
.entry-card { display: flex; flex-direction: column; gap: 7px; }
.entry-card h3 { font-size: 15px; }
.entry-card .stage-num { font-size: 12px; }
.entry-card .card-link { margin-top: auto; padding-top: 8px; }

/* ------------------------------------------------------------ journey */
.journey { list-style: none; padding: 0; counter-reset: j; }
.journey-item { padding: 18px 0; border-top: 1px solid var(--line-soft); }
.journey-item:first-child { border-top: 0; padding-top: 6px; }
.journey-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.journey-head h3 { font-size: 15px; }
.journey-num { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 600; }
.journey-item > p { font-size: 14.2px; color: var(--fg-muted); }
.journey-cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin-top: 12px; }
.journey-cols ul { margin: 6px 0 0; padding-left: 1.1em; font-size: 13.6px; color: var(--fg-muted); }
.journey-cols li { margin-bottom: 4px; }
.label-do, .label-delay, .block-label, .dim-label, .q-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint);
}
.label-do { color: var(--warn); }
.label-delay { color: var(--ok); }
.model-facts { display: grid; gap: 10px; margin: 12px 0; }
.model-facts > div span { font-size: 11.5px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: .05em; }
.model-facts > div p { font-size: 13.6px; margin-top: 3px; }
.model-money { display: flex; align-items: center; gap: 7px; font-size: 13.2px; color: var(--fg-muted); }
.model-money .ic { width: 14px; height: 14px; color: var(--fg-faint); }
.tag-stack { background: var(--accent-soft); color: var(--accent); }

/* -------------------------------------------------------------- stacks */
.stack-card { display: flex; flex-direction: column; gap: 9px; }
.stack-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.stack-card-top h3 { font-size: 15.5px; margin: 0; }
.stack-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.status-published { background: var(--ok-soft); color: var(--ok); }
.stack-intro { font-size: 15.5px; color: var(--fg) !important; }
.callout-plain { background: var(--bg-soft); }
.callout-plain h2 { margin-bottom: 10px; }

.layer-list { list-style: none; padding: 0; }
.layer-list li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.layer-list li:last-child { border-bottom: 0; }
.layer-state { margin-left: auto; font-size: 11.5px; color: var(--fg-faint); }

.stack-layers { list-style: none; padding: 0; display: grid; gap: 0; }
.layer { padding: 26px 0; border-top: 1px solid var(--line); }
.layer:first-child { border-top: 0; }
.layer-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.layer-head h3 { font-size: 17px; }
.layer-num { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent); }
.layer-en { font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: .07em; }
.layer-cat { margin-left: auto; font-size: 12px; }
.layer-cat a { color: var(--accent); }
.layer-q { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); margin-bottom: 16px; }
.layer-q > div { background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px 14px; }
.layer-q p { font-size: 13.6px; color: var(--fg-muted); margin-top: 5px; }
.layer-q p.is-hard { color: var(--warn); font-weight: 600; }
.layer-q p.is-soft { color: var(--ok); font-weight: 600; }
.layer-block { margin: 14px 0; }
.layer-block ul { margin: 7px 0 0; padding-left: 1.1em; font-size: 13.8px; color: var(--fg-muted); }
.layer-block li { margin-bottom: 4px; }
.layer-china { border-left: 2px solid var(--warn); padding-left: 13px; }
.layer-china p { font-size: 13.8px; color: var(--fg-muted); margin-top: 5px; }
.layer-relevance { border-left: 2px solid var(--line); padding-left: 13px; margin: 12px 0; }
.layer-relevance p { font-size: 13.4px; color: var(--fg-muted); margin-bottom: 4px; }
.layer-tools { margin: 16px 0; }
.tool-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 9px 0; }
.tool-chip {
  display: inline-flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 11px; background: var(--bg-card); transition: border-color .14s;
}
.tool-chip:hover { border-color: var(--accent); }
.tool-chip-name { font-size: 13.5px; font-weight: 600; }
.tool-chip-state { font-size: 11px; color: var(--fg-faint); }
.layer-next { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--fg-faint); border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 14px; }
.layer-next .ic { margin-top: 3px; flex-shrink: 0; }

.option-card { display: flex; flex-direction: column; gap: 9px; }
.option-card h3 { font-size: 15.5px; }
.option-fits { font-size: 13.4px; }
.tradeoff-list { list-style: none; padding: 0; display: grid; gap: 5px; }
.tradeoff-list li { font-size: 13.2px; color: var(--fg-muted); padding-left: 15px; position: relative; }
.tradeoff-list li::before { content: '—'; position: absolute; left: 0; color: var(--fg-faint); }

/* ------------------------------------------------------ category roles */
.role-table { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.role-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); border-bottom: 1px solid var(--line-soft); }
.role-row:last-child { border-bottom: 0; }
.role-key { padding: 10px 13px; font-family: var(--mono); font-size: 12px; color: var(--fg-faint); background: var(--bg-soft); }
.role-val { padding: 10px 13px; font-size: 13.6px; color: var(--fg-muted); }
@media (max-width: 560px) { .role-row { grid-template-columns: 1fr; } .role-key { border-bottom: 1px solid var(--line-soft); } }

/* -------------------------------------------------------- payments page */
.pay-card { display: flex; flex-direction: column; gap: 10px; }
.pay-card h2 { font-size: 16.5px; }
.pay-who { font-size: 13.5px; }
.pay-consider ul { margin: 7px 0 0; padding-left: 1.1em; font-size: 13.4px; color: var(--fg-muted); }
.pay-consider li { margin-bottom: 4px; }
.qa { margin-bottom: 26px; }
.qa h2 { font-size: 16px; }
.misconceptions li { margin-bottom: 9px; }

/* ------------------------------------------------------------ disclosure */
.state-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin: 18px 0 24px; }
.state-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--bg-card); }
.state-card h3 { font-size: 14px; margin-bottom: 7px; }
.state-card p { font-size: 13.4px; color: var(--fg-muted); margin: 0; }

/* ------------------------------------------------------- sources / dims */
.source-list { list-style: none; padding: 0; }
.source-list li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.6px; }
.source-list a { color: var(--accent); }
.source-meta { font-size: 11.5px; color: var(--fg-faint); font-family: var(--mono); }
.decision-dims { display: grid; gap: 12px; margin: 14px 0; }
.decision-dims > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 44px 20px; }

/* --------------------------------------------------------- mobile fixes */
@media (max-width: 620px) {
  .stage-facts > div, .decision-dims > div { grid-template-columns: 1fr; gap: 3px; }
  .layer-head { gap: 8px; }
  .layer-cat { margin-left: 0; width: 100%; }
  .filter-bar { position: static; }
  .tool-list { grid-template-columns: 1fr; }
  .stage-rail { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
}

/* ==========================================================================
   STEP 3 — verified provenance + guide reading experience
   ========================================================================== */

.verified-banner {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 15px 17px; border-radius: var(--radius);
  background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 26%, transparent);
  margin: 0 0 24px;
}
.verified-banner .ic { color: var(--ok); margin-top: 3px; flex-shrink: 0; }
.verified-banner p { margin: 0 0 5px; font-size: 13.8px; color: var(--fg-muted); }
.verified-banner p:last-child { margin-bottom: 0; }
.verified-banner strong { color: var(--ok); }

/* source list, grouped by what each source backs */
.source-list li { align-items: flex-start; }
.source-supports {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; width: 100%;
}
.source-supports span {
  font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint);
  background: var(--bg-inset); border-radius: 4px; padding: 1px 5px;
}

/* ------------------------------------------------------------- guides */
.guide-meta {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13.2px; color: var(--fg-muted);
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 24px;
}
.guide-meta .ic { margin-top: 3px; flex-shrink: 0; color: var(--fg-faint); }

.guide-body { counter-reset: gs; }
.guide-section { margin-bottom: 8px; }
.guide-section h2 {
  font-size: 1.22rem; margin: 34px 0 12px;
  padding-top: 18px; border-top: 1px solid var(--line-soft);
}
.guide-section:first-child h2 { border-top: 0; padding-top: 0; margin-top: 0; }

.time-sensitive {
  margin: 40px 0 8px; padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--warn) 24%, transparent);
  border-radius: var(--radius); background: var(--warn-soft);
}
.time-sensitive h2 { font-size: 1.05rem; margin: 0 0 8px; color: var(--warn); }
.time-sensitive > p { font-size: 13.4px; color: var(--warn); margin-bottom: 14px; }
.time-sensitive ul { list-style: none; padding: 0; margin: 0; }
.time-sensitive li { padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--warn) 18%, transparent); }
.time-sensitive li:first-child { border-top: 0; padding-top: 0; }
.time-sensitive li > p { font-size: 13.8px; color: var(--fg); margin: 0 0 5px; }
.ts-source { font-size: 12px !important; color: var(--fg-muted) !important; }
.ts-source a { color: var(--accent); overflow-wrap: anywhere; }

/* long URLs must never break the layout */
.prose a, .link-list a, .source-list a { overflow-wrap: anywhere; }

/* STEP 4 — one primary action per stage, at most two secondary links */
.stage-next {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.stage-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13.2px; }
.stage-secondary .sec-label { color: var(--fg-faint); font-size: 12px; }
.stage-secondary a { color: var(--accent); }
.stage-secondary a:hover { text-decoration: underline; }

/* stack layer tool chips: verified records read differently from candidates */
.tool-chip.is-verified { border-color: color-mix(in srgb, var(--ok) 34%, var(--line)); }
.tool-chip.is-verified .tool-chip-state { color: var(--ok); }
.tool-chip-note {
  display: block; margin-top: 4px; max-width: 34ch;
  font-size: 12px; color: var(--fg-muted); line-height: 1.5;
}
.tool-chips { align-items: stretch; }
.tool-chip { max-width: 100%; }

/* ==========================================================================
   STEP 4 — trust layer (methodology) + stale-data notice
   ========================================================================== */
.method-intro {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  margin: 0 0 30px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft);
}
.method-intro > div { display: flex; flex-direction: column; gap: 3px; }
.method-num { font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--accent); letter-spacing: -.03em; }
.method-label { font-size: 12.5px; color: var(--fg-muted); line-height: 1.4; }

.method-commerce { display: grid; gap: 12px; margin: 16px 0 22px; }
.method-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--bg-card); }
.method-card h3 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 14px; margin-bottom: 7px; }
.method-card p { font-size: 13.4px; color: var(--fg-muted); margin: 0; }
.method-state {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--ok-soft); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 26%, transparent);
}
.method-off { background: var(--bg-inset); color: var(--fg-faint); border-color: var(--line); }

.stale-notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 15px; border-radius: var(--radius-sm);
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 26%, transparent);
  margin: 0 0 20px; font-size: 13.4px; color: var(--warn);
}
.stale-notice .ic { margin-top: 3px; flex-shrink: 0; }
.stale-notice a { color: inherit; text-decoration: underline; }