/* ==========================================================================
   FinLearn 营销层 v3 —— 按金融产品设计规范实现
   --------------------------------------------------------------------------
   依据：_ref/fintech-design-replication-spec.md 的 G2「官网落地清单」
     容器 1200px / 区块垂直 96px / 首屏 128—192px
     H1 56px·300·行高1.03·字距-1.4px·#061b31
     色彩三段交替：白 → 浅蓝白 #f6f9fc → 暗带 #1c1e54
     特性卡 3 栏 gap 32px，卡 = 白底 + 1px #e5edf5 + 12px 圆角 + padding 32px
     纪律：每个色带只允许 1 个实心强调色按钮
   ========================================================================== */

/* ---------------------------- 容器与区块节奏 ---------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

@media (max-width: 768px) {
  .shell { padding-inline: var(--shell-pad-sm); }
}

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

.section--tight { padding-block: var(--space-12); }

.section--tinted {
  background: var(--bg-soft);
  border-block: 1px solid var(--hairline);
}

/* 暗带：海军蓝，非黑。用于需要强对比的区块 */
.section--dark {
  background: var(--dark-band);
  border-block: 0;
  color: rgba(255, 255, 255, 0.72);
}

.section--dark h2,
.section--dark .section__head h2 { color: #ffffff; }

/* ---------------------------- 首屏 ---------------------------- */
.hero {
  position: relative;
  padding-block: var(--space-hero) var(--space-16);
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: var(--space-16);
  align-items: center;
}

/* 眉标：11px 大写 + 0.04em 字距 + 紫点，金融产品官网的标准做法 */
.hero__eyebrow,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

.hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

/* H1：56px / 300 / 1.03 / -1.4px —— 轻字重是"贵感"的关键，不要用 700 */
.hero__title {
  margin: 0 0 var(--space-6);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 4.6vw, var(--fs-display));
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.hero__title em {
  display: block;
  color: var(--ink);
  font-style: normal;
}

.hero__lead {
  max-width: 58ch;
  margin: 0 0 var(--space-8);
  color: var(--ink-mute);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

/* ---------------------------- 按钮 ---------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.btn--primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
  box-shadow: var(--shadow-xs);
}

.btn--primary:hover {
  border-color: var(--brand-hover);
  background: var(--brand-hover);
}

.btn--primary:active { background: var(--brand-press); }

/* 幽灵按钮：紫字 + 淡紫描边（规范用 --brand-soft 描边） */
.btn--outline {
  border-color: var(--brand-soft);
  background: var(--bg);
  color: var(--brand);
}

.btn--outline:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--brand);
}

.btn--ghost:hover { background: var(--brand-tint); }

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ---------------------------- 学习闭环卡 ---------------------------- */
.loop {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.loop__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-muted);
}

.loop__title {
  color: var(--ink);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}

.loop__steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loop__step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--hairline-soft);
  counter-increment: loop;
}

.loop__step:last-child { border-bottom: 0; }

.loop__step::before {
  content: counter(loop, decimal-leading-zero);
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  padding-top: 2px;
}

.loop__steps { counter-reset: loop; }

.loop__step strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: 2px;
}

.loop__step span {
  color: var(--ink-mute);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

/* ---------------------------- 首屏数据带 ---------------------------- */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: var(--space-16) 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.hero__stat {
  padding: var(--space-6) var(--space-5) var(--space-2) 0;
  border-right: 1px solid var(--hairline);
}

.hero__stat:last-child { border-right: 0; }

.hero__stat dt {
  margin-bottom: var(--space-2);
  color: var(--ink-faint);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

.hero__stat dd {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 2.25rem;      /* 36px：KPI 数值档 */
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--font-features-num);
}

.hero__stat:first-child dd {
  font-size: 1.75rem;
  font-weight: var(--fw-medium);
}

.hero__stat-unit {
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  letter-spacing: 0;
}

/* ---------------------------- 章节标题 ---------------------------- */
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.section__head-text { min-width: 0; }

.section__head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.6vw, var(--fs-h2));
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}

.section__note {
  max-width: 40ch;
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* 去掉旧体系的金色装饰线 */
.section__head::after { display: none; }

/* ---------------------------- 内页页头 ---------------------------- */
.page-head {
  padding: var(--space-16) 0 var(--space-12);
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}

.page-head h1 {
  /* 原为 30ch（≈333px）：中文 16 字标题刚好放不下，「把沙盘方案落到可操作的单据与指标上」
     会被挤成两行且断在「可操/作」中间（截图核对发现）。改为 46ch，保留 text-wrap: balance。 */
  max-width: 46ch;
  margin: 0 0 var(--space-4);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 3.4vw, var(--fs-h1));
  font-weight: var(--fw-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  text-wrap: balance;
}

.page-head h1::after { display: none; }

.page-head__lead {
  max-width: 72ch;
  margin: 0 0 var(--space-5);
  color: var(--ink-mute);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.page-head__lead strong { color: var(--ink); font-weight: var(--fw-semibold); }

.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--fs-caption);
}

.page-head__meta > * {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
}

.page-head__meta > * + *::before {
  content: "·";
  margin-right: var(--space-4);
  color: var(--hairline);
}

.page-head__eyebrow { color: var(--brand); }

/* 面包屑 */
.breadcrumb {
  margin-bottom: var(--space-5);
  color: var(--ink-faint);
  font-size: var(--fs-caption);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--color-border-strong);
}

.breadcrumb a { color: var(--ink-mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* ---------------------------- 卡片与网格 ---------------------------- */
.grid { display: grid; gap: var(--space-8); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.card {
  padding: var(--space-8);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.card__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: 1.3;
}

.card__body {
  margin: var(--space-4) 0 0;
  color: var(--ink-mute);
  font-size: var(--fs-body);
  line-height: 1.55;
}

.card ul {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-5);
  color: var(--ink-mute);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.card ul li::marker { color: var(--brand); }

/* ---------------------------- 统计卡 ---------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat {
  padding: var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.stat__label {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--ink-faint);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

.stat__value {
  margin-bottom: var(--space-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--font-features-num);
}

.stat__hint {
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

/* ---------------------------- 徽标 ---------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  color: var(--ink-mute);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.badge--accent { background: var(--brand-tint); color: var(--brand-press); }
.badge--info { background: var(--color-info-bg); color: var(--ink-2); }
.badge--success { background: var(--color-success-bg); color: var(--color-success); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.badge--gold { background: var(--brand-tint); color: var(--brand-press); }
.badge--outline { background: transparent; border: 1px solid var(--hairline); }

/* ---------------------------- 页脚 ---------------------------- */
.site-footer {
  padding: var(--space-16) 0 var(--space-8);
  border-top: 1px solid var(--hairline);
  background: var(--bg-soft);
  color: var(--ink-mute);
  font-size: var(--fs-caption);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
}

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

@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

.site-footer h3 {
  margin: 0 0 var(--space-4);
  color: var(--ink);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.site-footer a { color: var(--ink-mute); text-decoration: none; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; }

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}

.site-footer__note {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  color: var(--ink-faint);
  font-size: var(--fs-micro);
}

/* 兼容旧结构里的内联浅色文字 */
.site-footer .small,
.site-footer p { color: var(--ink-mute); }

/* ---------------------------- 品牌标记 ---------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.brand__text { display: grid; gap: 1px; }

.brand__title {
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}

.brand__sub {
  color: var(--ink-faint);
  font-size: var(--fs-micro);
  line-height: 1.2;
}

/* ---------------------------- 顶栏 ---------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(12px);
}

@supports not (backdrop-filter: blur(4px)) {
  .site-header { background: var(--bg); }
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-left: auto;
}

.site-nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.site-nav a::after { display: none; }

.site-nav a:hover { background: var(--surface-muted); color: var(--ink); }

.site-nav a[aria-current="page"] {
  color: var(--brand);
  font-weight: var(--fw-medium);
  box-shadow: none;
}

.header-tools { display: flex; align-items: center; gap: var(--space-2); }

/* ---------------------------- 表格 ---------------------------- */
.table-wrap {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow-x: auto;
}

.kpi-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }

.kpi-table th,
.kpi-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}

.kpi-table thead th {
  background: var(--surface-muted);
  color: var(--ink-faint);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.kpi-table tbody tr:last-child th,
.kpi-table tbody tr:last-child td { border-bottom: 0; }

.kpi-table__target {
  color: var(--ink);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.kpi-table__note { color: var(--ink-mute); font-size: var(--fs-caption); }

/* ---------------------------- 提示块 ---------------------------- */
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.callout--info { background: var(--brand-tint); border-color: var(--brand-soft); }
.callout__icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-bold);
  font-style: normal;
}
.callout strong { color: var(--ink); }
.callout p { margin: var(--space-2) 0 0; color: var(--ink-mute); }

/* ---------------------------- 窄屏 ---------------------------- */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__stat:nth-child(2n) { border-right: 0; }
  .hero__stat:nth-child(-n + 2) { border-bottom: 1px solid var(--hairline); }
  .hero { padding-block: var(--space-16) var(--space-12); }
}

@media (max-width: 560px) {
  .hero__title { font-size: 2rem; }
  .section { padding-block: var(--space-12); }
}

/* ---------------------------- 打印 ---------------------------- */
@media print {
  .site-header, .site-nav, .hero__actions { display: none; }
  .section--dark { background: #fff; color: #000; }
  .card, .stat, .loop, .table-wrap { box-shadow: none; }
}

/* ---------------------------- 页脚修正（v3 浅色页脚）---------------------------- */
/* components.css 为旧的深色页脚写过 .site-footer__brand .brand__mark {
     background: rgba(255,255,255,0.12);
   }
   在 v3 的浅色页脚上，这会导致白字压白底（axe 实测对比度 1.04:1）。
   这里用品牌紫覆盖。 */
.site-footer__brand .brand__mark {
  background: var(--brand);
  color: #ffffff;
}

/* 旧深色页脚遗留的浅蓝内联文字在浅底上不可读，统一改为语义色 */
.site-footer [style*="#a9c0d6"],
.site-footer .small {
  color: var(--ink-mute) !important;
}

.site-footer__brand > span:not(.brand__mark) { color: var(--ink); }

/* ---------------------------- 行内链接与次要按钮文字 ---------------------------- */
/* 链接一律用品牌紫：在白底(6.19:1)与浅灰底(5.43:1)上都达标；
   ink-faint 只用于不可点击的元数据，不用于链接。 */
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }

.ws-table__link,
.table-link,
button[data-case] {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
}

.ws-table__link:hover,
.table-link:hover,
button[data-case]:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}

.ws-table__link:focus-visible,
button[data-case]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}