/* ============================================================================
   AI 故事工坊 · 官网样式
   依据：Captain Dash VI Guidelines V2（§4 色彩 · §5 字体 · §6 辅助图形 · §8.2 官网）

   铁律（改动前先读 VI，勿凭直觉破坏）：
   · 官网 = 传播场景 → 用传播版色板（深空黑/星舰白/薄荷/珊瑚）。
     产品版色板（净白/数据薄荷/墨蓝）只许出现在 .product-frame 内的界面示意里。
     两套禁止互相混用：珊瑚永不进图表，星空永不进产品界面。
   · 零圆角、零投影。分隔一律靠 1px 发丝线。
   · 珊瑚橙是「按下按钮」的颜色：每屏至多一处成片色块（此站 = 下载 CTA）。
   · 珊瑚底上的文字一律深空黑（白字对比度 2.6:1 不达标）。
   · 数据薄荷 #56D5BC 只给大号 KPI 数字；小字薄荷一律深薄荷 #11806A。
   · 黑用 #1D1D1B，禁纯黑 #000。
   ========================================================================== */

/* ── 字体 · VI §5 ───────────────────────────────────────────────────────── */
@font-face{font-family:'Josefin Sans';src:url('../fonts/JosefinSans-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Josefin Sans';src:url('../fonts/JosefinSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Josefin Sans';src:url('../fonts/JosefinSans-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Josefin Sans';src:url('../fonts/JosefinSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Grand Hotel';src:url('../fonts/GrandHotel-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  /* 传播版色板 · VI §4.1 */
  --black:#1D1D1B;        /* 深空黑 Space Black —— 禁纯黑 */
  --white:#F1F0EB;        /* 星舰白 Off-White */
  --mint:#8BD8CB;         /* 薄荷绿 Mint —— 两套色板唯一共享血脉 */
  --coral:#E8754F;        /* 珊瑚橙 Coral —— 每屏至多一处成片色块 */
  /* 薄荷的小字可用形（VI §4.4-04），跨两套色板通用。
     亮底上 mint #8BD8CB 只有 1.6:1，任何字号都不能直接当文字色。 */
  --mint-text:#11806A;

  /* 产品版色板 · VI §4.2 —— 仅限 .product-frame 内 */
  --p-white:#FFFFFF;
  --p-fog:#E6E6E2;        /* 雾灰描边 */
  --p-text:#6F6F69;
  --p-navy:#2A3E50;       /* 墨蓝 */
  --p-data-mint:#56D5BC;  /* 数据薄荷 —— 只给大号 KPI 数字 */
  --p-deep-mint:#11806A;  /* 深薄荷 —— 小字薄荷/链接/label */

  --paper:#F4F3EE;        /* 纸感画布 */
  --hair:#E6E6E2;         /* 亮底发丝线 */
  --hair-dark:rgba(241,240,235,.18); /* 暗底发丝线 18% */
  --body:#44443F;         /* 正文灰 */
  --caption:#85847D;      /* 注释灰 */
  --danger:#C0392B;       /* 唯一允许的红 */

  --display:'Josefin Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --script:'Grand Hotel',cursive;
  /* VI §5 标称 Noto Sans SC；桌面与本站用系统 PingFang SC 作等价替代
     （与 App 内 platform_typography.dart 的裁决一致，避免 MB 级 CJK 字体下载） */
  --han:'PingFang SC','Noto Sans SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;

  --gut:1px;              /* 网格缝 = 发丝线宽 */
  --pad:clamp(20px,4vw,56px);
  --maxw:1360px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;background:var(--paper);color:var(--black);
  font-family:var(--han);font-size:16px;line-height:1.9;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit}

/* 外边距一律归零，间距只由 flex/grid 的 gap 与显式 margin 决定。
   历史 bug：.step__n 只设 margin-bottom，继承默认 p{margin:1em 0} 后
   52px 字号在卡片顶部撑出 52px 幽灵空白。 */
p,h1,h2,h3,h4,h5,h6,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}

/* ── 字阶 · VI §5.2 ─────────────────────────────────────────────────────── */
.display{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(38px,6.6vw,88px);line-height:1.05;letter-spacing:.05em;
}
.h1{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,4.4vw,56px);line-height:1.15;letter-spacing:.02em;margin:0}
.h2{font-family:var(--display);font-weight:700;
  font-size:clamp(24px,2.8vw,36px);line-height:1.25;letter-spacing:0;margin:0}
/* 中英混排：中文取英文的 0.95 倍作光学对齐（VI §5.2 排版规则） */
.h1 .han,.h2 .han,.display .han{font-family:var(--han);font-size:.95em;letter-spacing:.01em}
.label{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:12px;line-height:1.3;letter-spacing:.25em;margin:0;
}
.script{font-family:var(--script);font-weight:400;transform:rotate(-2.5deg);
  display:inline-block;text-transform:none;letter-spacing:0}
.body{font-size:16px;line-height:1.9;color:var(--body);margin:0;max-width:42em}
/* 注释灰 #85847D 在白底只有 3.7:1；亮底一律用 #6F6F69（4.6:1 过 AA），
   暗底才用 #85847D/#9B9B95（对黑底 4.7:1+）。 */
.caption{font-size:13px;line-height:1.7;color:#6F6F69}
.sec--black .caption,.foot .caption,.on-dark .caption{color:#9B9B95}
.num{font-family:var(--display);font-weight:300;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:0}

.on-dark{color:var(--white)}
.on-dark .body{color:rgba(241,240,235,.78)}

/* ── 4 列漫画网格 · 模块化卡片 ──────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

.grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--gut);background:var(--hair);border:1px solid var(--hair);
}
.grid > *{background:var(--paper)}
.cell{padding:clamp(22px,2.6vw,38px);display:flex;flex-direction:column;gap:14px;min-width:0}
.cell--black{background:var(--black);color:var(--white)}
.cell--mint{background:var(--mint);color:var(--black)}
.cell--white{background:#fff}
.span2{grid-column:span 2}.span3{grid-column:span 3}.span4{grid-column:span 4}

/* ── 顶栏 ───────────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:50;background:var(--black);color:var(--white);
  border-bottom:1px solid var(--hair-dark);
}
.topbar__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  height:64px;display:flex;align-items:center;gap:clamp(16px,3vw,40px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand img{height:30px;width:auto}
.brand__txt{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:14px;line-height:1}
.brand__zh{font-family:var(--han);font-size:11px;letter-spacing:.22em;
  color:var(--mint);line-height:1;margin-top:4px}
.nav{display:flex;gap:clamp(14px,2.2vw,30px);margin-left:auto;align-items:center}
.nav a{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:12px;letter-spacing:.18em;text-decoration:none;color:rgba(241,240,235,.72);
  padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.nav a:hover,.nav a:focus-visible{color:var(--white);border-bottom-color:var(--mint)}
.nav a.is-cta{color:var(--black);background:var(--coral);padding:9px 16px;border-bottom:none}
.nav a.is-cta:hover{background:#f08a67}
@media (max-width:860px){.nav a:not(.is-cta){display:none}}

/* ── 主舞台 · VI §8.2 版式公式 ──────────────────────────────────────────── */
/* 星空底 + 中心图形 + 手写体引导词 + 全大写主标题，垂直居中 */
.stage{
  position:relative;background:var(--black);color:var(--white);overflow:hidden;
  border-bottom:1px solid var(--hair-dark);
}
.stage::before{
  content:"";position:absolute;inset:0;
  background:url('../img/starfield.svg') center/cover no-repeat;
  pointer-events:none;
}
.stage__in{position:relative;max-width:var(--maxw);margin:0 auto;
  padding:clamp(48px,7vw,84px) var(--pad) clamp(44px,6vw,72px);text-align:center}
.stage__lead{font-family:var(--script);font-size:clamp(24px,3.4vw,40px);
  color:var(--mint);line-height:1.15;margin:0 0 18px;transform:rotate(-2.5deg)}
/* Grand Hotel 无 CJK 字形，不声明就会落进不可控的系统回退。
   显式指定楷体系——手写引导语的中文等价物，跨机一致。 */
.stage__lead .han{font-family:'Kaiti SC','STKaiti','KaiTi',var(--han);
  font-size:.92em;letter-spacing:.02em}
.stage__sub{margin:22px auto 0;max-width:38em;color:rgba(241,240,235,.8);
  font-size:clamp(15px,1.4vw,17px);line-height:1.85}
.stage__title .rule{
  display:block;width:64px;height:3px;background:var(--coral);margin:22px auto 0;
}

/* 缎带徽章 · VI §6.2：米白带面 + 灰色折角，倾斜 −8° */
.ribbon{display:inline-block;transform:rotate(-8deg);margin:0 0 26px;position:relative}
.ribbon__band{background:var(--white);color:var(--black);padding:9px 30px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(11px,1.2vw,14px);letter-spacing:.24em;white-space:nowrap;position:relative;z-index:2}
.ribbon__fold{position:absolute;top:100%;width:14px;height:12px;background:#B9B8B2}
.ribbon__fold--l{left:0;clip-path:polygon(0 0,100% 0,100% 100%)}
.ribbon__fold--r{right:0;clip-path:polygon(0 0,100% 0,0 100%)}

.stage__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}

/* ── 按钮 · 零圆角零投影 ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 30px;text-decoration:none;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:13px;letter-spacing:.18em;border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s;cursor:pointer;
}
/* 珊瑚 = 激活态/CTA；珊瑚底文字一律深空黑（VI §4.4-03） */
.btn--coral{background:var(--coral);color:var(--black);border-color:var(--coral)}
.btn--coral:hover,.btn--coral:focus-visible{background:#f08a67;border-color:#f08a67}
.btn--ghost{background:transparent;color:var(--white);border-color:rgba(241,240,235,.4)}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--white);background:rgba(241,240,235,.08)}
.btn--ink{background:var(--black);color:var(--white);border-color:var(--black)}
.btn--ink:hover,.btn--ink:focus-visible{background:#333330;border-color:#333330}
.btn__meta{font-family:var(--han);font-weight:400;text-transform:none;
  letter-spacing:.02em;font-size:12px;opacity:.72}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* ── 区块骨架 ───────────────────────────────────────────────────────────── */
.sec{padding:clamp(62px,8vw,110px) 0}
.sec--black{background:var(--black);color:var(--white)}
.sec--white{background:#fff}
.sec__head{margin-bottom:clamp(30px,4vw,52px);max-width:62em}
/* 亮底标签用深薄荷而非珊瑚：珊瑚/近白 ≈2.9:1，VI §4.3 明列为仅限装饰。
   这也让全站的珊瑚成片色块只剩下载 CTA 一处，符合 §4.1 配比。 */
.sec__head .label{color:var(--mint-text);margin-bottom:14px}
.sec--black .sec__head .label{color:var(--mint)}
.sec__head .body{margin-top:18px}

/* ── KPI 条 · VI §7.1 / §7.3 ────────────────────────────────────────────── */
/* 结构固定：标签 → 大数字 → 注脚。千位用空格分隔，禁用逗号。 */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);
  background:var(--hair-dark);border-top:1px solid var(--hair-dark);border-bottom:1px solid var(--hair-dark)}
.kpi__c{background:var(--black);padding:clamp(24px,3vw,38px)}
.kpi .label{color:var(--mint);margin-bottom:16px}
.kpi__n{font-family:var(--display);font-weight:300;line-height:1;
  font-size:clamp(38px,5.2vw,72px);color:var(--mint);font-variant-numeric:tabular-nums}
.kpi__u,.pf__u{font-size:.6em}               /* VI §7.3 单位缩小至数字的 0.6 倍 */
.kpi__f{margin-top:14px;font-size:12px;color:#9B9B95;line-height:1.6}
@media (max-width:760px){.kpi{grid-template-columns:repeat(2,1fr)}}

/* ── 管线六站 ───────────────────────────────────────────────────────────── */
.step{position:relative}
.step__n{font-family:var(--display);font-weight:300;font-size:52px;line-height:1;
  color:var(--mint);margin-bottom:6px}
.cell--black .step__n{color:var(--mint)}
.cell--white .step__n{color:var(--p-deep-mint)}   /* 小面积/亮底薄荷 → 深薄荷 */
.step__t{font-family:var(--han);font-weight:700;font-size:19px;line-height:1.4;margin:0}
.step__d{font-size:14px;line-height:1.8;color:var(--body);margin:0}
.cell--black .step__d{color:rgba(241,240,235,.72)}
.step__k{margin-top:auto;padding-top:14px;border-top:1px solid var(--hair);
  font-family:var(--display);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--caption)}
.cell--black .step__k{border-top-color:var(--hair-dark);color:#9B9B95}

/* 管线格的填充单元：VI 的 4 列漫画网格要求每个单元格都承载内容或导航，
   6 个步骤 + 2 个填充 = 8 格填满两行，不留空格子。 */
.fill{justify-content:center}
.fill__q{font-family:var(--han);font-weight:700;font-size:clamp(17px,1.7vw,21px);
  line-height:1.6;margin:0}
.cell--mint .fill__q{color:var(--black)}
.fill__by{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:11px;letter-spacing:.2em;margin-top:14px}
.cell--mint .fill__by{color:rgba(29,29,27,.72)}  /* .6 只有 4.1:1，不够 AA */

/* ── 信任准则四宫 · VI §1.5 ─────────────────────────────────────────────── */
.trust__t{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:19px;letter-spacing:.06em;margin:0}
.trust__zh{font-family:var(--han);font-size:13px;letter-spacing:.2em;
  color:var(--mint);margin:0}
.cell--white .trust__zh,.cell--mint .trust__zh{color:var(--p-deep-mint)}
.cell--mint .trust__zh{color:var(--black);opacity:.66}

/* ── 规约表 ─────────────────────────────────────────────────────────────── */
/* 窄屏必须横向滚动，不能把列挤成一字一行的长条。
   width:100% 会让表跟着容器缩，min-width 才让 .rules__scroll 真的滚起来。 */
.rules{width:100%;min-width:680px;border-collapse:collapse;font-size:14px}
.rules th,.rules td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--hair);
  vertical-align:top;line-height:1.75}
.sec--black .rules th,.sec--black .rules td{border-bottom-color:var(--hair-dark)}
.rules thead th{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:11px;letter-spacing:.22em;color:var(--caption);padding-bottom:12px}
.sec--black .rules thead th{color:#9B9B95}
.rules td:first-child{font-weight:700;white-space:nowrap;font-size:15px}
.rules code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--paper);padding:2px 6px;color:var(--p-navy)}
.sec--black .rules code{background:rgba(241,240,235,.1);color:var(--mint)}
.rules__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rules__hint{display:none;margin-top:12px;font-size:12px;color:#9B9B95;letter-spacing:.04em}
@media (max-width:760px){.rules__hint{display:block}}

/* ── 产品界面示意 · 这里且仅这里用产品版色板 · VI §4.2 / §8.3 ───────────── */
.product-frame{
  background:var(--p-white);border:1px solid var(--p-fog);color:var(--black);
  display:grid;grid-template-columns:168px 1fr;min-height:400px;
}
.pf__rail{border-right:1px solid var(--p-fog);padding:20px 0;background:#FBFBF9}
.pf__rail-h{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:10px;letter-spacing:.22em;color:var(--p-text);padding:0 18px 14px}
.pf__step{display:flex;gap:11px;align-items:baseline;padding:9px 18px;font-size:13px;color:var(--p-text)}
.pf__step i{font-family:var(--display);font-style:normal;font-size:11px;
  letter-spacing:.1em;color:#A9A9A2;min-width:14px}
.pf__step.is-on{background:var(--p-white);color:var(--black);font-weight:600;
  box-shadow:inset 3px 0 0 var(--p-deep-mint)}   /* 内嵌实线非投影：零投影仍成立 */
.pf__step.is-on i{color:var(--p-deep-mint)}
.pf__main{padding:24px 26px;display:flex;flex-direction:column;gap:20px}
.pf__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:16px;border-bottom:1px solid var(--p-fog)}
.pf__title{font-family:var(--han);font-weight:700;font-size:16px;margin:0}
.pf__tag{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:10px;letter-spacing:.2em;color:var(--p-white);background:var(--p-navy);padding:4px 10px}
.pf__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--p-fog);
  border:1px solid var(--p-fog)}
.pf__card{background:var(--p-white);padding:16px 18px}
.pf__k{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:10px;letter-spacing:.2em;color:var(--p-navy)}
.pf__v{font-family:var(--display);font-weight:300;font-size:clamp(30px,3.4vw,46px);
  line-height:1;color:var(--p-data-mint);margin-top:10px;font-variant-numeric:tabular-nums}
.pf__f{font-size:11px;color:var(--p-text);margin-top:9px;line-height:1.5}
.pf__f .up{color:var(--p-deep-mint)}
.pf__f .dn{color:var(--danger)}
/* FIRST MATE / AI 洞察卡 · VI §7.5：浅薄荷底是 AI 内容专属信号 */
.pf__ai{background:#EFFAF5;border:1px solid #BFEDE2;padding:16px 18px}
.pf__ai-h{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.pf__ai-h img{height:16px;width:auto}
.pf__ai-h span{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:10px;letter-spacing:.2em;color:var(--p-deep-mint)}
.pf__ai-h em{margin-left:auto;font-style:normal;font-size:10px;color:var(--p-text);letter-spacing:.08em}
.pf__ai p{margin:0;font-size:13px;line-height:1.8;color:#3B3B37}
.pf__ai .src{margin-top:9px;font-size:11px;color:var(--p-text)}
.pf__track{height:5px;background:#EFEEE9}
.pf__track i{display:block;height:100%;background:var(--p-data-mint)}
@media (max-width:720px){.product-frame{grid-template-columns:1fr}
  .pf__rail{border-right:none;border-bottom:1px solid var(--p-fog)}
  .pf__cards{grid-template-columns:1fr}}

/* ── 下载 ───────────────────────────────────────────────────────────────── */
.dl{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--gut);
  background:var(--hair-dark);border:1px solid var(--hair-dark)}
.dl__main{background:var(--coral);color:var(--black);padding:clamp(30px,4vw,48px)}
.dl__side{background:var(--black);color:var(--white);padding:clamp(30px,4vw,48px)}
.dl__main .label{color:var(--black);opacity:.7}
.dl__v{font-family:var(--display);font-weight:300;font-size:clamp(44px,6vw,80px);
  line-height:1;margin:10px 0 4px}
.dl__meta{font-size:14px;line-height:1.9;margin:0 0 26px}
.dl__hash{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  word-break:break-all;line-height:1.7;color:rgba(241,240,235,.66);
  background:rgba(241,240,235,.07);padding:10px 12px;margin-top:8px}
/* 珊瑚格里的清单与细则：让激活格与右侧 Requirements 等高，不留空场 */
.dl__incl{margin:26px 0 0;padding:0;border-top:1px solid rgba(29,29,27,.22)}
.dl__incl li{padding:10px 0 10px 20px;position:relative;font-size:14px;line-height:1.7;
  border-bottom:1px solid rgba(29,29,27,.16)}
.dl__incl li:last-child{border-bottom:none}
.dl__incl li::before{content:"";position:absolute;left:0;top:.95em;
  width:7px;height:7px;background:var(--black)}
.dl__fine{margin-top:20px;font-size:12px;line-height:1.8;color:rgba(29,29,27,.72)}
.dl__fine a{color:var(--black);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(29,29,27,.4);white-space:nowrap}
.dl__fine a:hover,.dl__fine a:focus-visible{border-bottom-color:var(--black)}

.req{margin:0;padding:0}
.req li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--hair-dark);
  font-size:14px;line-height:1.7;align-items:baseline}
.req li:last-child{border-bottom:none}
.req b{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:10px;letter-spacing:.2em;color:var(--mint);flex:0 0 92px}
@media (max-width:820px){.dl{grid-template-columns:1fr}}

/* 安装步骤 */
.steps{counter-reset:s;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);
  background:var(--hair);border:1px solid var(--hair)}
.steps li{counter-increment:s;background:#fff;padding:clamp(22px,2.6vw,32px)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;
  font-family:var(--display);font-weight:300;font-size:40px;line-height:1;
  color:var(--p-deep-mint);margin-bottom:12px}
.steps h4{font-family:var(--han);font-weight:700;font-size:16px;margin:0 0 8px}
.steps p{margin:0;font-size:14px;line-height:1.8;color:var(--body)}
.steps code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;background:var(--paper);border:1px solid var(--hair);
  padding:10px 12px;margin-top:12px;overflow-x:auto;color:var(--p-navy);line-height:1.6}

/* 警示条 —— 红是唯一警示色（VI §4.4） */
.note{border-left:3px solid var(--danger);padding:14px 18px;background:#fff;
  font-size:14px;line-height:1.8;color:var(--body);margin-top:26px}
.note b{color:var(--danger)}
.sec--black .note{background:rgba(241,240,235,.06);color:rgba(241,240,235,.8)}

/* ── 页脚 · 轨道地球 VI §6.3 ────────────────────────────────────────────── */
.foot{background:var(--black);color:var(--white);
  padding:clamp(52px,6vw,84px) 0 32px;border-top:1px solid var(--hair-dark)}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(28px,4vw,56px);
  padding-bottom:36px;border-bottom:1px solid var(--hair-dark)}
.foot h5{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:11px;letter-spacing:.22em;color:#9B9B95;margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:11px}
.foot a{color:rgba(241,240,235,.78);text-decoration:none;font-size:14px;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.foot a:hover,.foot a:focus-visible{color:var(--white);border-bottom-color:var(--mint)}
.foot__end{padding-top:26px;display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;font-size:12px;color:#9B9B95}
.foot__slogan{font-family:var(--script);font-size:26px;color:var(--coral);
  transform:rotate(-2.5deg);display:inline-block;line-height:1.2}
.orbit{opacity:.5;height:40px;width:auto}
@media (max-width:760px){.foot__grid{grid-template-columns:1fr}}

/* ── 响应式网格坍缩 ─────────────────────────────────────────────────────── */
@media (max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .span3,.span4{grid-column:span 2}
  .steps{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .span2,.span3,.span4{grid-column:span 1}
  .kpi{grid-template-columns:1fr}
}

/* 跳转到主内容（无障碍） */
.skip{position:absolute;left:-9999px;top:0;background:var(--mint);color:var(--black);
  padding:12px 20px;font-family:var(--display);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;font-size:12px;text-decoration:none;z-index:99}
.skip:focus{left:0}