/* ══ 以下来自 assets/css/en/header-footer.css 的非 chrome 部分（2026-09-16 搬入，见 scripts/split-en-chrome-sheet.mjs）。
   必须留在本文件最前面：它们原本排在本表之前，挪后会翻转同特异性平局。 ══ */

:root {
      --primary: #d6336c;
      --bg: #f6f7fb;
      --card: #ffffff;
      --soft-hot: #a61e4d;
      --ink: #1f2633;
      --muted: #667085;
      --border: #e5e7eb;
  }

  * {
      box-sizing: border-box;
  }

  body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: #f6f7fb;
      color: #1f2633;
      line-height: 1.65;
  }

  .container {
      max-width: 1100px;
      margin: 0 auto;
      padding-left: 20px;
      padding-right: 20px;
  }

  a {
      text-decoration: none;
      color: inherit;
  }


  a.goto-affiliate:not(.btn):not(.btn-primary):not(.btn-ghost) {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(214, 51, 108, 0.22);
      background: #fff1f6;
      color: var(--soft-hot);
      text-decoration: none;
      font-weight: 700;
      line-height: 1.45;
      max-width: 100%;
      box-shadow: 0 6px 16px rgba(214, 51, 108, 0.12);
  }

  a.goto-affiliate:not(.btn):not(.btn-primary):not(.btn-ghost):hover {
      background: #ffe5ef;
      color: var(--primary);
  }

/* Inline English page templates define their own context-link cards instead
   of loading main.css. Keep their keyboard feedback aligned with the shared
   component without changing page-specific layout. */
.context-links > a:focus-visible {
  border-color: #d6336c !important;
  background: #fff8fb !important;
  box-shadow: 0 12px 24px rgba(16, 24, 40, .12) !important;
  color: #be185d !important;
  outline: 3px solid rgba(214, 51, 108, .24) !important;
  outline-offset: 3px !important;
}

/* A few legacy English pages define their chips inline and do not load
   main.css. Static span chips must still read as metadata, not controls. */
.chips > span.chip {
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: #f1f3f6;
  box-shadow: none;
  color: #5f6b7a;
  font-size: 11px;
  font-weight: 500;
  cursor: default;
  transform: none;
}

  /* ================= Mobile ================= */
@media (max-width: 768px) {

      a.goto-affiliate:not(.btn):not(.btn-primary):not(.btn-ghost) {
          width: 100%;
      }

      /* Phone fallback for headings that no class rule reaches. A handful of
         videos/ and stories/ index pages have bare <h2>s, which otherwise
         render at the UA defaults (h1 2em = 32px, h2 1.5em = 24px) with no
         step-down at all. Bare element selectors are specificity (0,0,1) and
         lose to every ".class h2" rule (0,1,1) -- including the ones inside
         other stylesheets' media blocks, since media queries add no
         specificity -- so this only fills gaps and never overrides a
         stylesheet that already sizes its own headings. */
      h1 {
          font-size: 22px;
          line-height: 1.25;
      }

      h2 {
          font-size: 20px;
      }

      h3 {
          font-size: 17px;
      }
  }

/* inline-style-classes:begin --- 由 scripts/sync-inline-style-classes.mjs 生成，勿手改 */
.block-gap,
.disclosure.block-gap,
.guide-page .cta-row.block-gap,
.main .notice.block-gap {
  margin-top: 14px;
}

.block-gap-md {
  margin-top: 12px;
}

.block-gap-xs {
  margin-top: 8px;
}

.card-body-text {
  font-size: 14px;
  margin: 0;
}

.card-heading,
h2.card-heading {
  font-size: 18px;
  margin: 0 0 8px;
}

.card-heading-lg,
h2.card-heading-lg {
  font-size: 18px;
  margin: 0 0 10px;
}

.col-220 {
  width: 220px;
}

.col-70 {
  width: 70px;
}

.cta-row-centered {
  justify-content: center;
}

.flush {
  margin: 0;
}

.flush-bottom {
  margin-bottom: 0;
}

.heading-gap {
  margin: 0 0 10px;
}

.heading-gap-sm {
  margin: 0 0 8px;
}

.muted-body {
  color: #5b6574;
  font-size: 14px;
  line-height: 1.7;
}

.muted-fineprint,
.page-section p.muted-fineprint {
  color: #5b6574;
  font-size: 13px;
}

.muted-lead {
  color: #5b6574;
  line-height: 1.7;
}

.note-pullup,
.guide-page .note.note-pullup {
  margin-top: -6px;
}

.panel-hint,
.interaction-panel p.panel-hint {
  color: #7a4a5c;
  font-size: 13px;
  margin-top: 10px;
}

.visual-guide-image {
  background: #fff;
  border: 1px solid #f2d9e3;
  border-radius: 16px;
  height: auto;
  width: 100%;
}
/* inline-style-classes:end */

/* ── 原 assets/css/en/main.css（2026-09-16 并入）───────────────────────────── */

.main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 20px 20px 20px;
}

.page-head {
    background: #fff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .08);
}

.main .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.main .chips .chip {
    padding: 5px 9px;
    border: 0;
    border-radius: 6px;
    background: #f1f3f6;
    color: #5f6b7a;
    font-size: 11px;
    font-weight: 500;
    cursor: default;
}

.main .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.page-head h1 {
    margin: 0 0 12px;
    font-size: 30px;
    color: var(--primary);
}

.page-head p {
    margin: 0;
    max-width: 900px;
    font-size: 14px;
}

.page-head .hero-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    margin-top: 15px;
}

.page-head .hero-card h2 {
    margin: 0 0 10px;
    font-size: 16px;
    color: var(--ink);
}

.page-head .hero-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-head .hero-card li {
    font-size: 13px;
    color: var(--muted);
    line-height: 2;
    padding-left: 12px;
    position: relative;
}

.page-head .hero-card li::before {
    content: "-";
    position: absolute;
    left: 0;
    color: var(--accent);
}

.cta-top,
.cta-mid {
    margin-top: 20px;
    text-align: center;
    width: 100%;

}

.cta-mid a {
    border: var(--primary) 1px solid;
    border-radius: 10px;
    padding: 10px;
    color: var(--primary);
    background-color: rgba(242, 232, 229, 0.4);
    width: 100%;
    display: inline-block;
}

.cta-top a {
    border: var(--primary) 1px solid;
    border-radius: 10px;
    padding: 10px;
    color: var(--primary);
    font-weight: 600;
    width: 100%;
    display: inline-block;
    background-color: rgba(232, 222, 219, 0.5);
    box-shadow: 0 3px 5px rgba(246, 72, 24, 0.4);
}

.cta-mid a:hover {
    border: var(--primary) 1px solid;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(246, 98, 24, 0.3);
}

.cta-top a:hover {
    border: var(--primary) 2px solid;
    font-weight: 600;
    text-decoration: underline;
}

/* ================= CTA Section ================= */
.cta-section {
    margin-top: 36px;
    /* 与内容区块拉开节奏 */
    padding: 28px;
    border-radius: 16px;
    background: #fff5f8;
    border: 1px solid #f2c2d4;
}

.cta-section p {
    max-width: 720px;
}

.cta-actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.cta-disclaimer {
    margin-top: 14px;
    font-size: 12px;
    color: var(--muted);
}


.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #d6336c, #f06292);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.4;
    min-height: 48px;
    text-align: center;
    white-space: normal;
    box-shadow: 0 10px 25px rgba(214, 51, 108, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(214, 51, 108, 0.35);
    text-decoration: underline;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    padding: 11px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
    background: #fff;
    font-weight: 700;
    line-height: 1.4;
    min-height: 48px;
    text-align: center;
    white-space: normal;
}

.btn-ghost:hover {
    color: var(--primary);
    border: 1px solid var(--soft-hot);
}

.page-section {
    margin-top: 28px;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .06);
}

.page-section h2 {
    margin-top: 0;
    font-size: 22px;
    /* color: var(--primary); */
}

.page-section h3 {
    margin-top: 0;
    font-size: 20px;
}

.page-section p {
    font-size: 14px;
}

.tag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 22px;
    margin-top: 25px;
}

.tag-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 24px;
    margin-top: 20px;
}

.tag-section h3 {
    margin: 0 0 14px;
    font-size: 18px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.tag-section .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.tag-section .tag {
    background: #fdf1f7;
    color: #c22d63;
    padding: 5px 10px;
    border-radius: 99px;
    font-size: 13px;
    border: 1px solid #f7d9e6;
    font-weight: 500;
}

.tag-section .tag:hover {
    background: #fcf7f1;
    text-decoration: underline;
    color: var(--primary);
}

.page-section .grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.page-section .card {
    border: 1px solid #e6e9f0;
    border-radius: 14px;
    padding: 16px;
    background: #fff;
    min-width: 0;
    transition: box-shadow .2s ease, transform .2s ease;
    color: var(--soft-hot);
}

.page-section .card-link {
    border: 1px solid #e6e9f0;
    border-radius: 14px;
    padding: 16px;
    background: #fff;
    min-width: 0;
    transition: box-shadow .2s ease, transform .2s ease;
    color: var(--soft-hot);
    box-shadow: 0 8px 18px rgba(16, 24, 40, .08);
}

.page-section .card-link:hover,
.page-section .card-link h2:hover,
.page-section .card-link h3:hover {
    color: var(--primary);
}


.page-section .card h2,
.page-section .card h3 {
    margin-top: 0;
    font-size: 17px;
    color: #000;
}

.page-section .card-link:hover {
    transform: translateY(-2px);
}


.page-section .card p,
.page-section .card-link p {
    margin: 0;
    color: #5b6574;
    font-size: 14px;
}

.page-section .card .meta,
.main .meta {
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
}

.main input,
.main select,
.main textarea,
.main button {
    min-height: 40px;
}

.page-section ul {
    list-style: disc;
    margin: 12px 0 0;
    padding-left: 20px;
    display: block;
}

.page-section ul li {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.page-section ul li + li {
    margin-top: 8px;
}

.page-section ul li a {
    color: var(--soft-hot);
    text-decoration: none;
    position: static;
    padding-left: 0;
}

.page-section ul li a::before {
    content: none;
}

.page-section ul li a:hover {
    text-decoration: underline;
    color: var(--primary);
}

.page-section .text-list {
    margin: 12px 0 0;
    padding-left: 20px;
    font-size: 14px;
    list-style: disc;
}

.page-section .text-list li {
    margin: 6px 0;
}

.page-section .text-list a {
    color: #c0265a;
    font-weight: 600;
}

.page-section .directory-card {
    background: var(--card);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 6px 18px rgba(16, 24, 40, .06);
}

.page-section .directory-card h2 {
    margin-top: 0;
    font-size: 20px;
    /* color: var(--primary); */
}

.page-section .directory-card p {
    font-size: 14px;
    color: #374151;
    margin-bottom: 0;
}

/* 要“卡片之间”是 20px（首尾不留空） */
.page-section>.directory-card+.directory-card {
    margin-top: 20px;
}

.main .link {
    color: var(--soft-hot);
}

.main .link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.page-section .story-meta {
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
}

.main .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    color: var(--primary);
    font-weight: 700;
    margin: 0 0 10px;
}

.main .notice {
    margin-top: 28px;
    padding: 18px;
    border-radius: 12px;
    background: #fff5f8;
    border: 1px solid #f2c2d4;
    color: #9c1f4b;
    font-size: 14px;
}

/* 独立风格 */
.context-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.context-links a {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #f1dce4;
    background: #ffffff;
    text-decoration: none;
    color: var(--soft-hot);
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(16, 24, 40, .08);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;

}

.context-links a:hover,
.context-links a:focus-visible {
    background: #fff8fb;
    transform: translateY(-2px);
    color: var(--primary);
    box-shadow: 0 12px 24px rgba(16, 24, 40, .12);
    border: 1px solid var(--primary);
}

.context-links a:focus-visible {
    outline: 3px solid rgba(214, 51, 108, .24);
    outline-offset: 3px;
}

.context-links span {
    display: block;
}

.context-links .link-title {
    font-weight: 600;
    font-size: 14px;
}

.context-links .link-note {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.highlight-box {
    background: #fff8fb;
    border: 1px dashed #f1dce4;
    border-radius: 14px;
    padding: 20px 22px;
    margin: 24px 0;
}

.highlight-box p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
}

.cta-box {
    background: #fdf2f7;
    border-radius: 18px;
    padding: 26px;
    text-align: center;
    margin: 30px 0 0 0;
}

.cta-box p {
    font-size: 14px;
    color: #5b6574;
    margin-bottom: 14px;
}

.cta-box a {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 999px;
    background: #c0265a;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.cta-box a:hover {
    background: #f0265a;
    text-decoration: underline;
}

.disclosure {
    font-size: 13px;
    color: #7a7f8a;
    margin-top: 24px;
    padding: 12px;
    border: 1px solid #e6e9f0;
    border-radius: 12px;
}

/* ================= Mobile ================= */
@media (max-width: 768px) {
    .main {
        padding: 20px 14px 16px;
    }

    .page-head {
        padding: 24px;
    }

    .cta-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-head h1 {
        font-size: 18px;
    }

    .page-section h2 {
        font-size: 18px;
    }

    .page-section h3 {
        font-size: 17px;
    }

    .page-section .directory-card h2 {
        font-size: 18px;
    }

    .tag-grid,
    .page-section .grid,
    .page-section ul {
        grid-template-columns: 1fr;
    }

    .page-section {
        padding: 18px;
    }

    .btn-primary,
    .btn-ghost {
        width: 100%;
        justify-content: center;
    }

    .cta-actions,
    .cta-row {
        width: 100%;
    }
}

/* ================= 通用组件（2026-09-08 从 locale 表提上来） =================
 * 这三组类是与语言无关的通用组件，之前却只存在于 fil / lt / lv / sr / he / ur
 * 六个 locale 的 main.css 里。实测有 1610 个页面用 .table-wrap、1124 个用
 * .compare-table、436 个用 .check-list，而它们加载的样式表一条规则都没有 ——
 * 其中 ko 一家就占 776 + 793。缺 overflow-x 意味着宽表在手机上直接撑破页面，
 * 而不是在容器内横向滚动。
 *
 * RTL 的镜像版本留在 he/main.css 与 ur/main.css 里（padding-right、
 * text-align:right），它们排在本表之后，照常覆盖。
 * ========================================================================= */
.check-list {
  padding-left: 1.25rem;
}

.check-list li {
  margin: 0.45rem 0;
}

.table-wrap {
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  border: 1px solid #e5e7eb;
  padding: 0.75rem;
  text-align: left;
  vertical-align: top;
}

.compare-table th {
  background: #fafafa;
}

/* ── 原 assets/css/en/visual-guides.css（2026-09-16 并入）──────────────────── */

.visual-main {
  max-width: 1120px;
}

.vg-eyebrow {
  margin: 0 0 8px;
  color: #1f7668;
  font-size: 13px;
  font-weight: 700;
}

.vg-summary {
  display: grid;
  gap: 10px;
}

.vg-summary p + p {
  margin-top: 8px;
}

.vg-card-grid,
.vg-related-grid,
.vg-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.vg-card,
.vg-category,
.vg-related-link {
  background: #fff;
  border: 1px solid #dfe7ef;
  border-radius: 8px;
  overflow: hidden;
}

.vg-card {
  display: flex;
  flex-direction: column;
}

.vg-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #edf7f5;
}

.vg-card-body,
.vg-category,
.vg-related-link {
  padding: 16px;
}

.vg-card h3,
.vg-category h3,
.vg-related-link h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #1f2633;
}

.vg-card p,
.vg-category p,
.vg-related-link p {
  margin: 0;
  color: #566375;
  font-size: 14px;
}

.vg-card .btn-ghost {
  align-self: flex-start;
  margin-top: 14px;
}

.vg-section {
  margin-top: 34px;
}

.vg-section h2 {
  margin: 0 0 14px;
  font-size: 22px;
  color: #1f2633;
}

.vg-section > p {
  max-width: 860px;
}

.vg-hero-figure {
  margin: 24px 0 0;
}

.vg-hero-figure img {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  border-radius: 8px;
  border: 1px solid #dbe4ec;
  background: #f1f5f9;
}

.vg-hero-figure figcaption {
  max-width: 860px;
  margin-top: 10px;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
}

.vg-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 4px solid #1f7668;
  background: #edf7f5;
  color: #334155;
  font-size: 14px;
}

.vg-checklist {
  margin: 12px 0 0;
  padding-left: 20px;
}

.vg-checklist li {
  margin: 8px 0;
}

.vg-table-wrap {
  overflow-x: auto;
  margin-top: 14px;
}

.vg-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #dfe7ef;
}

.vg-table th,
.vg-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e8eef5;
  vertical-align: top;
  text-align: left;
  font-size: 14px;
}

.vg-table th {
  background: #f4f8fb;
  color: #1f2633;
}

.vg-faq h3 {
  margin: 20px 0 6px;
  font-size: 18px;
}

.vg-faq p {
  margin: 0;
}

.vg-ad-gap {
  margin-top: 24px;
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .vg-card-grid,
  .vg-related-grid,
  .vg-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .visual-main {
    padding-left: 14px;
    padding-right: 14px;
  }

  .vg-card-grid,
  .vg-related-grid,
  .vg-category-grid {
    grid-template-columns: 1fr;
  }

  .vg-card-body,
  .vg-category,
  .vg-related-link {
    padding: 14px;
  }

  .vg-section {
    margin-top: 28px;
  }

  .vg-section h2 {
    font-size: 20px;
  }

  .vg-hero-figure {
    margin-top: 18px;
  }

  .vg-card img {
    max-height: 260px;
  }
}

/* ══ 以下为本表原有内容（本表 2026-09-16 由 en/articles-cluster.css 改名而来）══ */

.article-main {
  background: #f6f7fb;
}

.article-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 20px 48px;
}

.article-breadcrumbs {
  margin-bottom: 16px;
  font-size: 14px;
  color: #6b7280;
}

.article-breadcrumbs a {
  color: #c2346e;
  text-decoration: none;
}

.article-breadcrumbs a:hover {
  text-decoration: underline;
}

.article-hero,
.article-box {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #f6dce7;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.05);
  padding: 26px;
  margin-bottom: 22px;
}

.article-hero {
  background:
    linear-gradient(135deg, rgba(255, 244, 248, 0.96), rgba(255, 255, 255, 0.98)),
    linear-gradient(90deg, rgba(255, 206, 225, 0.18), transparent);
}

/* Ad slots on article pages: same card treatment as .article-hero/.article-box
   (background, border, radius, shadow) so ad creatives read as one page with
   the content instead of raw images breaking the reading flow. Selectors are
   qualified with the element type to out-specificity exoclick-ads.css's
   plain class rules regardless of stylesheet load order. */
div.header-after-ad,
div.section-after-ad,
div.mid-ad-center,
div.footer-ad-center,
div.ad-center.bottom-after-footer-ad {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #f6dce7;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.05);
  padding: 20px;
}

.article-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a81d59;
  background: #ffe4ef;
  border-radius: 999px;
  padding: 7px 12px;
  margin-bottom: 12px;
}

.article-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(31px, 5vw, 46px);
  line-height: 1.15;
  color: #111827;
}

.article-lead,
.article-hero p,
.article-box p,
.article-box li,
.article-box td,
.article-box th {
  color: #374151;
  font-size: 16px;
  line-height: 1.8;
}

.article-lead {
  font-size: 17px;
  margin: 0;
  max-width: 920px;
}

.article-hero p + p,
.article-box p + p {
  margin-top: 14px;
}

.article-box h2 {
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.24;
  color: #111827;
}

.article-box h3 {
  margin: 18px 0 10px;
  font-size: 18px;
  color: #111827;
}

.article-chips,
.article-cta-row,
.article-link-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.article-chips span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: #f1f3f6;
  color: #5f6b7a;
  font-size: 12px;
  font-weight: 500;
  cursor: default;
}

.article-link-pills a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid #f3c7d8;
  background: #fff;
  color: #a41d55;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.article-link-pills a::after {
  content: "→";
  margin-inline-start: 6px;
  font-weight: 700;
  line-height: 1;
}

.article-link-pills a:hover,
.article-link-pills a:focus-visible {
  border-color: #d6336c;
  background: #fff0f5;
  color: #d6336c;
  box-shadow: 0 6px 16px rgba(190, 24, 93, 0.12);
}

.article-link-pills a:focus-visible {
  outline: 3px solid rgba(214, 51, 108, 0.24);
  outline-offset: 2px;
}

.article-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.article-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(214, 51, 108, 0.18);
}

.article-btn.primary {
  background: #d6336c;
  color: #fff;
}

.article-btn.primary:hover {
  background: #be255d;
}

.article-btn.secondary {
  background: #fff;
  color: #a41d55;
  border: 1px solid #f3c7d8;
}

.article-grid,
.article-route-grid,
.article-related-grid,
.article-cluster-grid,
.article-check-grid,
.article-split-grid {
  display: grid;
  gap: 16px;
}

.article-grid,
.article-related-grid,
.article-cluster-grid,
.article-check-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.article-route-grid {
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

.article-split-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.article-card,
.article-route-card,
.article-related-card,
.article-check-card,
.article-split-card,
.article-cluster-card {
  background: #fffafc;
  border: 1px solid #f2d9e3;
  border-radius: 16px;
  padding: 18px;
}

.article-card p,
.article-route-card p,
.article-related-card p,
.article-check-card p,
.article-split-card p,
.article-cluster-card p {
  margin: 0;
}

.article-card h3,
.article-route-card h3,
.article-related-card h3,
.article-check-card h3,
.article-split-card h3,
.article-cluster-card h3 {
  margin: 0 0 10px;
}

.article-route-card .route-tag,
.article-cluster-card .route-tag {
  display: inline-flex;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8c1849;
  background: #ffe7f1;
  padding: 5px 10px;
  border-radius: 999px;
}

.article-card a,
.article-route-card a,
.article-related-card a,
.article-cluster-card a {
  color: #c2346e;
  text-decoration: none;
  font-weight: 700;
}

.article-card a:hover,
.article-route-card a:hover,
.article-related-card a:hover,
.article-cluster-card a:hover,
.article-box a:hover {
  text-decoration: underline;
}

.article-list,
.article-box ul,
.article-box ol {
  margin: 0;
  padding-left: 22px;
}

.article-list li + li,
.article-box li + li {
  margin-top: 8px;
}

.article-note {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff6ea;
  border: 1px solid #fed7aa;
  color: #7c2d12;
}

.article-table-wrap {
  overflow-x: auto;
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.article-table th,
.article-table td {
  padding: 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #f2d9e3;
}

.article-table th {
  background: #fff2f8;
  color: #8c1849;
  font-size: 14px;
}

.article-faq-item + .article-faq-item {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #f2d9e3;
}

.article-callout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff3f7, #fff);
  border: 1px solid #f4cfdd;
}

.article-related-card .link-title,
.context-links .link-title {
  display: block;
  font-weight: 800;
  color: #111827;
  margin-bottom: 6px;
}

.article-related-card .link-note {
  color: #4b5563;
}

.article-mini {
  color: #6b7280;
  font-size: 14px;
}

@media (max-width: 768px) {
  .article-shell {
    padding: 18px 14px 34px;
  }

  .article-hero,
  .article-box {
    padding: 22px 18px;
    border-radius: 18px;
  }

  div.header-after-ad,
  div.section-after-ad,
  div.mid-ad-center,
  div.footer-ad-center,
  div.ad-center.bottom-after-footer-ad {
    padding: 16px;
    border-radius: 18px;
  }

  .article-hero h1 {
    font-size: 22px;
    line-height: 1.2;
  }

  .article-lead {
    font-size: 16px;
  }

  .article-box h2 {
    font-size: 22px;
  }

  .article-box h3 {
    font-size: 17px;
  }
}

/* Narrow phones (360-480px: Galaxy S8+, iPhone SE/12/13/14/15 and friends).
   The 768px block above is still far too roomy at 360px, where .article-hero
   has only ~288px of usable width -- a 58-character h1 (the P90 for en/) wraps
   to four lines at the desktop size. Step the headings down one more notch. */
@media (max-width: 480px) {
  .article-hero,
  .article-box {
    padding: 20px 16px;
  }

  .article-hero h1 {
    font-size: 20px;
    line-height: 1.22;
  }

  .article-box h2 {
    font-size: 20px;
  }

  .article-box h3 {
    font-size: 16px;
  }

  .article-eyebrow {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* ── 原 assets/css/en/content-hub.css（2026-09-16 并入）────────────────────── */

.hub-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: #687386;
  font-size: 0.9rem;
}

.hub-breadcrumb a {
  color: #a3285a;
  font-weight: 700;
  text-decoration: none;
}

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

.hub-topic-grid .article-related-card a {
  min-height: 100%;
}

.hub-link-label {
  display: inline-block;
  margin-top: 0.85rem;
  color: #a3285a;
  font-size: 0.92rem;
  font-weight: 800;
}

.hub-featured-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hub-featured-card h3 {
  margin: 0.45rem 0 0.5rem;
}

.hub-featured-card p {
  flex: 1;
}

.hub-featured-card > a {
  display: inline-flex;
  width: auto;
  margin-top: 0.8rem;
  padding: 0.62rem 0.9rem;
  border-radius: 0.75rem;
  background: #fff0f5;
  color: #9b2455;
  font-weight: 800;
  text-decoration: none;
}

.hub-featured-card > a:hover {
  background: #fbd9e6;
}

.hub-card-topic {
  color: #a3285a;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-value-section {
  border-left: 4px solid #f06292;
}

.hub-check-list strong {
  color: #7d2148;
}

@media (max-width: 720px) {
  .hub-topic-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .hub-breadcrumb {
    font-size: 0.82rem;
  }

  .hub-featured-card > a {
    width: 100%;
    justify-content: center;
  }
}