/* 关关通营销首页样式（landing 专用，自包含，不 link app/css/site.css）
   口径：docs/plans/JN-UI-08-裁决与区块规格.md 第三节（逐区块规格）
   工单：docs/plans/JN-UI-08-落地页重设计工单.md
   下面第一个 :root 块逐字节复制自 app/css/site.css 的 :root，值冻结，本文件不自创任何颜色；
   landing 专有别名只许引用该块内的 token。 */
:root {
  color-scheme: light;

  /* ── 色彩 ────────────────────────────────────────────────── */
  --brand: #6846E8;              /* 稿面采样 #6B4AFC / #6444E8，取现役品牌值 */
  --brand-strong: #5632D6;       /* 按下态与紫色文字 */
  --brand-tint: #E9E2FD;         /* hero 与浅色面板底 */
  --brand-soft: #F1EDFE;         /* 弱按钮、标签、状态条底 */
  --page: #EDE9FC;               /* 站体之外那一圈 */
  --canvas: #FFFFFF;             /* 画布，由暖白改为纯白 */
  --surface: #FFFFFF;
  --surface-muted: #FAFAFD;

  --ink: #1A1A2E;
  --ink-2: #4A4A63;
  --ink-muted: #73738B;
  --border: #ECECF3;
  --border-strong: #DEDEE9;
  --dark-panel: #21223A;

  --ok: #1B864C;                 /* 稿面 #3CC969，压到 AA */
  --ok-bg: #F1FAF4;
  --ok-border: #C7EBD5;
  --warn: #E39400;               /* 稿面 #FEB414，压到 AA；只用于边框与大色块 */
  --warn-graphic: #A96F00;       /* 与 site.css 同源，check_landing 的 token 同源门盯着。
                                    状态点与状态图标用它：对白 4.23:1、对 --warn-bg 3.93:1、
                                    对未填点 --border 3.60:1，均过非文字 3:1 */
  --warn-bg: #FDF6E6;
  --warn-border: #F5E3BC;
  --bad: #C73539;                /* 稿面 #FD5243，压到 AA */
  --bad-bg: #FBEBEC;
  --bad-border: #F3CFD1;
  --focus: #2D6BFF;

  /* 入口与分区的四个色相（图标色块、插画底、圆形箭头） */
  --hue-violet: #6846E8;
  --hue-coral: #F0654B;
  --hue-blue: #3B7DEA;
  --hue-green: #34A96C;

  /* ── 几何：封闭圆角档 ─────────────────────────────────────── */
  --radius-xs: 8px;              /* 小控件、标签 */
  --radius-sm: 12px;             /* 输入框、表单按钮、图标色块 */
  --radius-md: 16px;             /* 卡片、提示条 */
  --radius-lg: 20px;             /* 大面板、登录卡 */
  --radius-xl: 28px;             /* 站体内的大分区 */
  --radius-shell: 24px;          /* 站体本身 */
  --radius-pill: 999px;

  /* ── 间距刻度 ────────────────────────────────────────────── */
  /* 间距八档，档外的值一律视为错 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ── 阴影两档加一档浮层 ──────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.04), 0 2px 8px rgba(26, 26, 46, 0.04);
  --shadow-md: 0 4px 18px rgba(26, 26, 46, 0.07);
  --shadow-pop: 0 16px 44px rgba(52, 36, 116, 0.14);

  /* ── 字体与字阶 ──────────────────────────────────────────── */
  --font-sans: ui-rounded, "SF Pro Rounded", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;

  --fs-display: clamp(2.1rem, 3.1vw, 2.75rem);
  --fs-h1: clamp(1.55rem, 2.3vw, 2rem);
  --fs-h2: clamp(1.22rem, 1.7vw, 1.4rem);
  --fs-h3: 1.0625rem;
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.75rem;

  --card-inset: 24px;
  --content: 1320px;
  --motion-feedback: transform 160ms cubic-bezier(0.2, 0, 0, 1),
                     box-shadow 160ms cubic-bezier(0.2, 0, 0, 1),
                     background-color 160ms cubic-bezier(0.2, 0, 0, 1);

  /* ── 迁移期别名：尚未改版的页面仍在引用这些名字，页面迁完即删 ── */
  --lavender: var(--brand-soft);
  --lavender-deep: #DCD3FB;
  --hero-soft: var(--brand-tint);
  --sun: #FFC94A;
  --coral: var(--hue-coral);
  --mint: #C9F3D3;
  --bad-soft: var(--bad-bg);
  --radius-inline: var(--radius-sm);
  --radius-row: var(--radius-xs);
  --radius-panel: var(--radius-md);
  --radius-card: var(--radius-md);
  --radius-hero: var(--radius-lg);
  --radius-shell-legacy: var(--radius-shell);
  --shadow-soft: var(--shadow-sm);
  --shadow-raised: var(--shadow-md);
  --font-accent: var(--font-sans);
  --type-display: var(--fs-display);
  --type-section-title: var(--fs-h1);
  --type-panel-title: var(--fs-h1);
  --type-card-title: var(--fs-h2);
  --type-lead: var(--fs-sm);
  --type-body: var(--fs-body);
  --type-supporting: var(--fs-sm);
  --type-label: var(--fs-label);
}

/* landing 专有别名：只引用上面块内的 token，不引入新值 */
:root {
  /* 区块节奏：裁决 3 给定写法，端点由八档合成，这是本页唯一的合成式间距 */
  --rhythm: clamp(var(--sp-7), 6vw, calc(var(--sp-8) + var(--sp-7)));
  /* 深色面板上的浅文字与浅件：一律由 --canvas 经 color-mix 压透明度得出 */
  --on-dark: color-mix(in srgb, var(--canvas) 86%, transparent);
  --on-dark-muted: color-mix(in srgb, var(--canvas) 66%, transparent);
  --on-dark-bar: color-mix(in srgb, var(--canvas) 32%, transparent);
  /* 试听内卡：深色面板底色提亮约 8%（规格 B） */
  --panel-raise: color-mix(in srgb, var(--dark-panel) 92%, var(--canvas));
}

* { box-sizing: border-box; }
html { font-size: 16px; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  overflow-wrap: break-word;
}

/* 白色圆角站体，站体外一圈淡紫 */
.site-shell {
  background: var(--canvas);
  width: min(calc(100% - var(--sp-5)), 1540px);
  margin-inline: auto;
  margin-block: var(--sp-3);
  border-radius: var(--radius-shell);
  overflow: clip;
}

h1, h2, h3 { color: var(--ink); margin: 0; }
p { margin: 0; }
img { max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
.title-line { display: block; }

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

:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* 强调词：品牌紫加粗，无底线无旋转无纸片（裁决 4） */
.accent-word { color: var(--brand); font-weight: 800; }

/* 区块小眉标 */
.eyebrow {
  margin: 0 0 var(--sp-3);
  color: var(--brand-strong); font-size: var(--fs-label); line-height: 1.3;
  font-weight: 800; letter-spacing: 0.06em;
}

/* ── 行动件 ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-pill); padding: var(--sp-3) var(--sp-5);
  background: var(--brand); color: var(--canvas); font-weight: 700;
  text-decoration: none; min-height: 44px; text-align: center;
}
.btn-lg { min-height: var(--sp-7); padding: var(--sp-3) var(--sp-6); font-size: var(--fs-body); }

@media (hover: hover) and (pointer: fine) {
  .btn { transition: var(--motion-feedback); }
  .btn:hover { background: var(--brand-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .site-nav a { transition: var(--motion-feedback); }
  .site-nav a:hover { color: var(--brand); }
  .step-card { transition: var(--motion-feedback); }
  .step-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .voice-play { transition: var(--motion-feedback); }
  .voice-play:hover::before { background: var(--brand-strong); }
}

/* ── A. 头部 ─────────────────────────────────────────────────── */
/* 与版心同一条左缘：内距取「档位值」与「版心外余量」的较大者 */
.site-header {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4);
  align-items: center; justify-content: space-between;
  min-height: 74px;
  padding-block: var(--sp-3);
  padding-inline: max(var(--sp-5), calc((100% - var(--content)) / 2));
  border-bottom: 1px solid var(--border);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-inline-size: 0;
  font-weight: 800; color: var(--brand-strong);
  font-size: 1.28rem; letter-spacing: -0.02em;
}
.brand-mark {
  display: inline-grid; place-items: center; flex: 0 0 var(--sp-7);
  width: var(--sp-7); height: 38px;
  border-radius: var(--radius-pill); background: var(--brand); color: var(--canvas);
  font-size: 1.38rem; line-height: 1; font-weight: 700;
}
.brand-copy { display: inline-flex; flex-direction: column; min-inline-size: 0; }
.brand-name { line-height: 1.15; }
.brand-tag {
  color: var(--ink-muted); font-size: var(--fs-label);
  line-height: 1.2; font-weight: 700; letter-spacing: 0.02em;
}
/* 页内锚点导航（裁决 R3）：四条都指向本页区块，不放假链接 */
.site-nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  align-items: center; min-inline-size: 0;
}
.site-nav a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
/* 当前锚点：品牌紫文字加下方 3px 圆角紫短线（规格 A） */
.site-nav a[aria-current="true"] { color: var(--brand); }
.site-nav a[aria-current="true"]::after {
  content: ""; position: absolute;
  inset-inline: var(--sp-3); inset-block-end: var(--sp-2);
  height: 3px; border-radius: var(--radius-pill); background: var(--brand);
}
.header-cta {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-1); min-inline-size: 0;
}
.header-note { font-size: var(--fs-xs); color: var(--ink-muted); }

/* ── 版心 ────────────────────────────────────────────────────── */
main {
  width: min(calc(100% - var(--sp-7)), var(--content));
  margin-inline: auto;
  padding-block: var(--sp-6) 0;
}

/* ── B. 首屏三列 ─────────────────────────────────────────────── */
.hero {
  display: grid; gap: var(--sp-6);
  align-items: stretch;
}
.hero-copy { min-inline-size: 0; align-self: center; }
.hero-title {
  margin: 0 0 var(--sp-4);
  font-size: clamp(2.15rem, 4.6vw, 4.5rem);
  line-height: 1.06; letter-spacing: -0.075em; font-weight: 800;
}
.hero-lead {
  margin: 0 0 var(--sp-5); max-inline-size: 36rem;
  font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-muted);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: center; }
.hero-note { font-size: var(--fs-sm); color: var(--ink-muted); }
.hero-art {
  position: relative; min-inline-size: 0;
  display: flex; align-items: flex-end; justify-content: center;
}
/* 淡紫圆形光晕：brand-tint 到透明的径向渐变，人物压在光晕上；
   缺图时 landing.js 给 .hero-art 加 .is-missing，光晕随图一起收掉，干净留白 */
.hero-art::before {
  content: ""; position: absolute; z-index: 0; inset: 0; margin: auto;
  width: 100%; max-height: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, var(--brand-tint) 0%, transparent 70%);
}
.hero-art.is-missing::before { display: none; }
.hero-art.is-missing img { visibility: hidden; }
.hero-art img {
  position: relative; z-index: 1;
  display: block; width: auto; max-width: 100%; height: auto; max-height: 460px;
}

/* 深色叙事面板：首屏右列，与左侧内容同高 */
.story-panel {
  min-inline-size: 0;
  background: var(--dark-panel);
  border-radius: var(--radius-lg);
  padding: var(--card-inset);
  color: var(--canvas);
}
.story-eyebrow {
  margin: 0 0 var(--sp-2); color: var(--on-dark-muted);
  font-size: var(--fs-label); font-weight: 800; letter-spacing: 0.08em;
}
.story-title {
  margin: 0 0 var(--sp-3); color: var(--canvas);
  font-size: var(--fs-h1);
  line-height: 1.2; letter-spacing: -0.03em; font-weight: 800;
}
/* 阅读列上限：中文正文超过约 40 字一行就开始费眼。三处在 768 档卡片摊平成整宽后
   顶到 43 字，36rem 把它们压回 38 字上下；1440 档本来就在栅格列里，这条不生效。 */
.story-body {
  margin: 0 0 var(--sp-3); max-inline-size: 36rem;
  font-size: var(--fs-sm); line-height: 1.8; color: var(--on-dark);
}

/* 试听内卡：面板底色提亮约 8%，播放逻辑不经本文件 */
.voice-card {
  margin-block-start: var(--sp-4);
  background: var(--panel-raise);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}
.card-label {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-label); font-weight: 800; letter-spacing: 0.06em;
  color: var(--on-dark-muted);
}
.voice-name { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 700; }
/* 无脚本时露出的原生控件；landing.js 接管后由 .is-enhanced 换成自定义皮肤。 */
.voice-audio { display: block; width: 100%; max-width: 100%; }
.voice-shell { display: none; }
.voice-card.is-enhanced .voice-audio { display: none; }
.voice-card.is-enhanced .voice-shell { display: block; }
.voice-head { display: flex; align-items: center; gap: var(--sp-3); }
/* 播放键视觉 40px（规格 B），触控矩形 44px（门禁）：按钮本体 44，紫色圆画在伪元素上 */
.voice-play {
  position: relative; flex: 0 0 44px; width: 44px; height: 44px;
  border: 0; padding: 0; background: transparent; cursor: pointer; appearance: none;
  display: inline-grid; place-items: center;
}
.voice-play::before {
  content: ""; position: absolute; inset: 2px;
  border-radius: var(--radius-pill); background: var(--brand);
}
.voice-icon { position: relative; z-index: 1; grid-area: 1 / 1; fill: var(--canvas); }
.voice-icon-pause,
.voice-card.is-playing .voice-icon-play { display: none; }
.voice-card.is-playing .voice-icon-pause { display: block; }
/* 波形条：纯 CSS 等宽竖条，不做音频分析；上层亮条按 --voice-progress 截断示进度 */
/* 检测器把这里的竖条读成表面装饰，实为音频进度的功能可视化；豁免写在 index.html 顶部，
   因为发现是记在那个文件上的（本文件是被 link 进去的）。案卷见 quality/impeccable-adjudications.md */
.voice-track {
  position: relative; flex: 1 1 auto; min-inline-size: 0; height: var(--sp-5);
  overflow: hidden;
  background-image: repeating-linear-gradient(90deg, var(--on-dark-bar) 0 2px, transparent 2px 6px);
}
.voice-progress {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: var(--voice-progress, 0%);
  background-image: repeating-linear-gradient(90deg, var(--canvas) 0 2px, transparent 2px 6px);
}
.voice-time {
  flex: 0 0 auto; font-size: var(--fs-xs); color: var(--on-dark-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.voice-caption {
  margin: var(--sp-4) 0 0; max-inline-size: 36rem;
  font-size: var(--fs-sm); line-height: 1.75; color: var(--on-dark);
}
.voice-highlight {
  color: var(--canvas);
  background: color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--radius-xs); padding: 0 var(--sp-1);
}

/* ── C. 四条来历 ─────────────────────────────────────────────── */
.supports { margin-top: var(--rhythm); }
.support-list {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.support { padding: var(--card-inset); min-inline-size: 0; }
.support + .support { border-block-start: 1px solid var(--border); }
.support-icon { display: block; width: var(--sp-6); height: var(--sp-6); color: var(--brand); }
.support h3 {
  margin: var(--sp-3) 0 var(--sp-2);
  font-size: var(--fs-h3); line-height: 1.3; font-weight: 800;
}
.support p { font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-muted); }

/* ── D、E、F 同一行：5 : 3.5 : 2.5，同一行等高 ────────────────── */
.trio {
  margin-top: var(--rhythm);
  display: grid; gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.trio > * { min-inline-size: 0; }

/* 三张卡同一配方：白底、1px border、radius-md、shadow-sm、内衬 24px */
.steps, .feature-panel, .letter {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: var(--card-inset);
}

/* D. 四步流程 */
.section-head { margin-bottom: var(--sp-5); }
.section-title {
  margin: 0;
  font-size: var(--fs-h2); line-height: 1.3; font-weight: 800;
}
.section-note {
  margin: var(--sp-2) 0 0; max-inline-size: 36rem;
  font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-muted);
}
.step-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.step-card {
  border: 1px solid var(--brand-soft); border-radius: var(--radius-md);
  padding: var(--sp-3); min-inline-size: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.step-num {
  align-self: flex-start;
  display: inline-grid; place-items: center; width: var(--sp-5); height: var(--sp-5);
  border-radius: var(--radius-pill); background: var(--brand); color: var(--canvas);
  font-weight: 800; font-size: var(--fs-xs); line-height: 1;
}
.step-icon { width: var(--sp-7); height: var(--sp-7); color: var(--brand); margin-block-start: var(--sp-3); }
.step-card h3 {
  margin: var(--sp-3) 0 var(--sp-2);
  font-size: var(--fs-h3); line-height: 1.3; font-weight: 800;
}
.step-card p { font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-muted); }
/* 步骤序号上方的字样原文保留，旧旋转与杂色底一并收掉（裁决 4） */
.tag {
  display: inline-block; margin-block-start: var(--sp-3);
  border-radius: var(--radius-pill); padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700;
  background: var(--brand-soft); color: var(--brand-strong);
}
.step-link { display: none; color: var(--ink-muted); }
.step-link svg { width: var(--sp-4); height: var(--sp-4); }

/* E. 家长看板卡：三行圆点示意内容不动（规格 E） */
.feature-eyebrow {
  margin: 0 0 var(--sp-2); color: var(--ink-muted);
  font-size: var(--fs-label); font-weight: 800; letter-spacing: 0.08em;
}
.feature-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h2); line-height: 1.3; font-weight: 800;
}
.feature-body {
  margin: 0 0 var(--sp-4); max-inline-size: 36rem;
  font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-muted);
}
.mastery-card { min-inline-size: 0; }
.mastery-card .card-label { color: var(--ink-muted); margin-bottom: var(--sp-3); }
.mastery-rows { display: grid; gap: var(--sp-3); }
.mastery-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }
.row-name { flex: 0 0 3.2em; font-size: var(--fs-sm); font-weight: 700; }
.row-dots { display: inline-flex; gap: var(--sp-1); }
.dot { display: inline-block; width: var(--sp-3); height: var(--sp-3); border-radius: var(--radius-pill); }
.dot-ok { background: var(--ok); }
.dot-mid { background: var(--warn-graphic); }
/* 未练点不改：点阵是离散进度计，要分辨的是「已填 vs 未填」而不是「未填 vs 白底」，
   与进度条同一口径。已填对未填 3.60:1（琥珀）与 3.92:1（绿），两项都过。 */
.dot-none { background: var(--border); }
.row-val { margin-inline-start: auto; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.mastery-legend { margin: var(--sp-3) 0 0; font-size: var(--fs-label); line-height: 1.6; color: var(--ink-muted); }

/* F. 致同行家长：白卡，无信纸装饰（裁决 4） */
.letter-title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h2);
  line-height: 1.3; font-weight: 800; color: var(--brand-strong);
}
.letter-body p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-2); }
.letter-body p:last-child { margin-bottom: 0; }
.letter-body strong { font-weight: 800; color: var(--ink); }

/* 折叠：原生 details，零 JS；品牌紫文字链加 chevron-down，带下划线，触控高 44px */
.letter-more { margin-block-start: var(--sp-3); }
.letter-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px;
  color: var(--brand);
  font-size: var(--fs-sm); font-weight: 700;
  text-decoration: underline; text-underline-offset: var(--sp-1);
  cursor: pointer; list-style: none;
}
.letter-toggle::-webkit-details-marker { display: none; }
.letter-toggle::marker { content: ""; }
.letter-toggle-arrow { flex: 0 0 auto; transition: transform 200ms cubic-bezier(0.2, 0, 0, 1); }
.letter-more[open] .letter-toggle-arrow { transform: rotate(180deg); }
.letter-toggle-less { display: none; }
.letter-more[open] .letter-toggle-more { display: none; }
.letter-more[open] .letter-toggle-less { display: inline; }
.letter-more[open] .letter-body { margin-block-start: var(--sp-4); }
.letter-more[open] > .letter-body,
.letter-more[open] > .letter-sign { animation: letter-reveal 220ms cubic-bezier(0.2, 0, 0, 1); }
@keyframes letter-reveal {
  from { opacity: 0; transform: translateY(-6px); }
}
.letter-sign {
  display: block;
  margin: var(--sp-5) 0 0;
  text-align: end;
  font-size: var(--fs-h3);
  color: var(--brand-strong); font-weight: 800;
}

/* ── G. 三条原则 ─────────────────────────────────────────────── */
.principles {
  margin-top: var(--rhythm);
  display: grid; gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}
.principle {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: var(--card-inset);
  display: flex; gap: var(--sp-4); align-items: center; min-inline-size: 0;
}
/* 56px 圆形淡色底图标：紫、红、绿三色组 */
.principle-icon {
  flex: 0 0 56px; width: 56px; height: 56px;
  border-radius: var(--radius-pill);
  display: grid; place-items: center;
}
.tone-brand { background: var(--brand-soft); color: var(--brand); }
.tone-bad { background: var(--bad-bg); color: var(--bad); }
.tone-ok { background: var(--ok-bg); color: var(--ok); }
.principle-copy { min-inline-size: 0; }
.principle h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3); line-height: 1.3; font-weight: 800;
}
.principle p { font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-muted); }

/* ── H. 结尾行动区 ───────────────────────────────────────────── */
.closing {
  margin-block: var(--rhythm);
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-radius: var(--radius-md);
  padding: var(--card-inset);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.closing-icon { width: var(--sp-8); height: var(--sp-8); color: var(--warn-graphic); flex: 0 0 auto; }
.closing-copy { min-inline-size: 0; }
.closing h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2); line-height: 1.3; font-weight: 800;
}
.closing p { font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-2); }
.closing-cta {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-1); flex: 0 0 auto;
}
.closing-note { font-size: var(--fs-xs); color: var(--ink-muted); }

/* ── I. 页脚 ─────────────────────────────────────────────────── */
.site-footer {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: center;
  border-top: 1px solid var(--border);
  padding-block: var(--sp-4) var(--sp-5);
  padding-inline: max(var(--sp-5), calc((100% - var(--content)) / 2));
  color: var(--ink-muted); font-size: var(--fs-sm);
}
.footer-brand {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--brand-strong); font-weight: 700; min-height: 44px;
}
.footer-mark {
  display: inline-grid; place-items: center; width: 28px; height: var(--sp-5);
  border-radius: var(--radius-pill); background: var(--brand); color: var(--canvas);
  font-size: 0.9rem; line-height: 1;
}
.footer-line { margin: 0; line-height: 1.6; }

/* ── 窄屏推导（规格第四节）：范围语法，700 与 1100 两档 ────────── */
@media (width >= 700px) {
  /* 首屏：左文案右插画，深色面板落到第二行整宽 */
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .story-panel { grid-column: 1 / -1; }
  /* 四条来历两列，竖分隔线改为横分隔线 */
  .support-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support + .support { border-block-start: 0; }
  .support:nth-child(n + 3) { border-block-start: 1px solid var(--border); }
  /* 四步流程两列，步骤间箭头不出 */
  .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* D 独占一行，E 与 F 并排 */
  .trio { grid-template-columns: minmax(0, 3.5fr) minmax(0, 2.5fr); }
  .trio .steps { grid-column: 1 / -1; }
  /* 结尾行动区横排 */
  .closing { flex-direction: row; align-items: center; gap: var(--sp-5); }
  .closing-copy { flex: 1 1 auto; }
}

@media (width >= 1100px) {
  /* 首屏三列，比例约 45 : 25 : 30，深色面板与左侧内容同高 */
  .hero { grid-template-columns: minmax(0, 45fr) minmax(0, 25fr) minmax(0, 30fr); }
  .story-panel { grid-column: auto; }
  /* 四条来历四列，竖分隔线 */
  .support-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .support:nth-child(n + 3) { border-block-start: 0; }
  .support + .support { border-inline-start: 1px solid var(--border); }
  /* 四步流程横排，步骤间灰色 › */
  .step-grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--sp-2); align-items: stretch;
  }
  .step-link { display: grid; place-items: center; }
  /* 规格修订（2026-08-19 主控）：原定 D : E : F = 5 : 3.5 : 2.5，四步卡挤在
     600px 列里横排四张，真实文案被压成每行三四个字（实测文字列 84px）。
     设计稿能横排是因为稿面文案是生成的短句。改为 D 独占一行、E 与 F 并排。 */
  .trio { grid-template-columns: minmax(0, 3.5fr) minmax(0, 2.5fr); }
  .trio .steps { grid-column: 1 / -1; }
  /* 三条原则三张一行等宽 */
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 700 以下：首屏三块各占一行，插画在标题下；结尾行动区竖排按钮整宽 */
@media (width < 700px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-note { text-align: center; }
  .closing .btn { width: 100%; }
  .closing-cta { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}