/* ⭐ director_fix 2026-08-27：hero 两档原本各配一根柱状图（height:100% / 88%）。
   🚨 移除理由 —— **装饰在冒充数据**：
   ① 3400 与 3200 只差 6%，在 94px 高度上**肉眼完全一样**；
   ② 柱宽 44px、轨道宽 501px ⇒ 读起来像「501 里只填了 44」，而那个 501 代表什么**没人知道**（量程未标）。
   ⭐ 真正的区分是**栅数档位**（3–12BB vs 13–20BB），那个标签本来就在。
   ⇒ 让数字自己说话，⛔ 不用一张比不出东西的图表撑场面。 */
/* 🚨 director_fix 2026-08-27：**同一个病第三次**。
   `.hs-tag`（第2页）· `.hg-tag`（第7页）· `.hero-tag` 都用 rgba(10,10,10,.82) 承载文字，
   **半透明深底与底图混合后变浅**（实测合成 ≈ #333）⇒ --primary-lt 只有 **3.63:1** < AA。
   ⭐ 两档绿的前提是**实底**，⛔ 半透明遮罩不算深色语境。
   ⇒ 凡**承载文字**的深色标签一律实底 #0A0A0A；纯遮罩层（无 color:）不动。 */
/* solarmoduleline.com — index stylesheet
   Self-contained, no external CDN, system font stack.
   Two-tier green: --primary (#0F7A32) on light, --primary-lt (#149F41) on dark.
   Dark context switch via @container style() with a direct-selector fallback. */

/* ---------- tokens ---------- */
:root{
  --primary:#0F7A32;
  --primary-lt:#149F41;
  --ink:#1A1A1A;
  --body:#333333;
  --muted:#666666;
  --faint:#999999;
  --line:#E0E0E0;
  --surface:#F7F7F7;
  --surface2:#F0F0F0;
  --surface3:#E6E6E6;
  --bg:#FFFFFF;
  --dark:#0A0A0A;
  --accent:var(--primary);
  --maxw:1200px;
  --pad:clamp(20px,5vw,40px);
  --sec-pad:clamp(60px,7vw,104px);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

/* dark-context accent swap — mechanism, not per-element memory */
[data-ctx="dark"]{ --ctx:dark; --accent:var(--primary-lt); }
/* direct-selector fallback (must exist; @container support is still narrow) */
[data-ctx="dark"] .eb span,
[data-ctx="dark"] .rule,
[data-ctx="dark"] .stat-num,
[data-ctx="dark"] .step-dot,
[data-ctx="dark"] .tl-dot,
[data-ctx="dark"] .foot-col h4::after,
[data-ctx="dark"] .kw{ color:var(--primary-lt); border-color:var(--primary-lt); }
[data-ctx="dark"] .step-dot,[data-ctx="dark"] .tl-dot{ background:transparent; }
/* 🚨 director_fix 2026-08-26：深色语境规则原本只覆盖 .eb/.rule/.stat-num/.step-dot/.tl-dot/.kw ——
   **⛔ 漏了 strong 与 b**。深色带里的加粗字拿到 --ink #1A1A1A，压在 #0A0A0A 上 = **1.14:1**，
   几乎不可读（第 3 页 contrast-gate 实测抓出「0.6 to 0.8 MPa」）。
   ⭐ 这是**系统性缺口，三页都受影响** ⇒ 修在共享层。
   ⚠️ 深底的加粗字用**白**，⛔ 不用绿 —— 绿是强调层（数字/eyebrow/序号），
   正文里的 strong 只是「这句里的重点」，全用绿会把强调层稀释掉。 */
[data-ctx="dark"] strong,
[data-ctx="dark"] b,
[data-ctx="dark"] .lead strong,
[data-ctx="dark"] .lead b{ color:#fff; }
@container style(--ctx: dark){
  strong,b{ color:#fff; }
}
@container style(--ctx: dark){
  .eb span,.rule,.stat-num,.step.is-on,.kw{ color:var(--primary-lt); border-color:var(--primary-lt); }
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--font); font-size:16.5px; line-height:1.7; font-weight:400;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; }
img{ display:block; height:auto; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ color:var(--ink); margin:0 0 .5em; }
h1{ font-size:clamp(38px,4.6vw,60px); font-weight:800; letter-spacing:-.028em; line-height:1.08; }
h2{ font-size:clamp(27px,2.9vw,42px); font-weight:800; letter-spacing:-.024em; line-height:1.14; }
h3{ font-size:clamp(18px,1.5vw,21px); font-weight:800; letter-spacing:-.01em; line-height:1.25; }
p{ margin:0 0 1em; }
strong{ font-weight:800; color:var(--ink); }
.kw{ color:var(--primary); font-weight:800; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
main section{ padding-block:var(--sec-pad); position:relative; }
/* light sections carry a faint texture so no section is a bare-white void */
.sec{
  background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.028) 1px, transparent 0);
  background-size:26px 26px;
}
.sec.alt{ background-color:var(--surface); }
.lead{ font-size:clamp(17px,1.4vw,19px); font-weight:500; color:var(--muted); line-height:1.6; max-width:64ch; }

/* ---------- eyebrow + chain motif ---------- */
.eb{ display:flex; align-items:center; gap:14px; margin:0 0 18px; }
.eb span{
  color:var(--accent); font-size:12.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; white-space:nowrap;
}
.eb::after{ content:""; height:1.5px; width:44px; background:var(--faint); }
.eb.on::before{ content:""; width:8px; height:8px; border-radius:50%; border:2px solid var(--accent); flex:0 0 auto; }

.rule{ color:var(--primary); font-weight:800; }
.sec-head{ max-width:74ch; margin-bottom:clamp(28px,3vw,44px); }
.sec-head .lead{ margin-top:8px; }

/* ---------- header / nav ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:var(--dark); }
#main-menu{
  display:flex; align-items:center; gap:22px; height:64px;
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad);
}
.brand{ display:flex; align-items:center; gap:9px; color:#fff; font-weight:800; letter-spacing:-.02em; font-size:17px; }
.brand:hover{ text-decoration:none; }
.brand .bmark{ width:26px; height:26px; }
.nav-links{ display:flex; gap:20px; margin-left:12px; }
.nav-links a{ color:#cfd3cf; font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:5px; }
.nav-links a:hover{ color:#fff; text-decoration:none; }
.nav-links a svg{ width:13px; height:13px; opacity:.7; }
.nav-cta{ margin-left:auto; }
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px;
  padding:11px 18px; border-radius:8px; border:1.6px solid transparent; cursor:pointer; line-height:1;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn-solid{ background:var(--primary); color:#fff; }
.btn-solid:hover{ background:#0c682a; }
.btn svg{ width:16px; height:16px; }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost:hover{ border-color:#fff; }
.btn-ghost-dk{ background:transparent; color:var(--ink); border-color:var(--surface3); }
.btn-ghost-dk:hover{ border-color:var(--ink); }
@media(max-width:860px){ .nav-links{ display:none; } }

/* ---------- hero ---------- */
#hero{ padding:0; background-color:var(--bg); background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.028) 1px, transparent 0); background-size:26px 26px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,42%) minmax(0,58%); min-height:min(86vh,720px); }
.hero-copy{
  background:#0A0A0A; color:#e9ece9; padding:clamp(40px,6vw,84px) clamp(28px,4vw,64px);
  display:flex; flex-direction:column; justify-content:center;
}
.hero-copy h1{
  color:#fff;
  /* ⭐ director_fix 2026-08-24：v4 基线 B2 的 H1 是 clamp(38px,4.6vw,60px) —— 那条按**视口宽**算，
     但分栏 hero 的 H1 住在 42% 宽的列里（1440 视口 = 605px 列）。实测 60px ⇒ 折 6 行 ⇒
     主 CTA 在 1440×900 掉出首屏 112px、1536×864 掉 32px、390×844 掉 10px（只有 1920×1080 够）。
     一个 B2B 首页的全部工作是「3 秒知道这是什么 + 一个明确的下一步」，下一步看不见 = 功能失效。
     ⇒ 改成按**容器宽**算：字重 800 / 字距 / 行高一律不动，只让公式认得容器。
     ⚠️ 这是对阮总 08-21 规格的一处偏离，已记入 _CHECK 与 build-rules §12，交他亲验时一并说明。 */
  font-size:clamp(38px, 7.8cqw, 50px);
}
.hero-copy{ container-type:inline-size; }
@supports not (font-size: 1cqw){
  /* 兜底：不支持容器查询单位时退回视口公式，但收窄上限 */
  .hero-copy h1{ font-size:clamp(38px,3.4vw,50px); }
}
.hero-copy .lead{ color:#b9beb9; max-width:46ch; }
.hero-axes{ margin:26px 0 30px; display:flex; flex-direction:column; gap:12px; }
.hero-axes li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; color:#c9cec9; font-weight:500; }
.hero-axes li b{ color:#fff; font-weight:700; }
.hero-axes .ax-dot{ flex:0 0 auto; width:20px; height:20px; margin-top:1px; color:var(--primary-lt); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-media{ position:relative; background:#0d0d0d; }
.hero-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.hero-seam{ position:absolute; inset:0; pointer-events:none; z-index:2; width:100%; height:100%; }
.hero-seam .seam-path{ stroke:var(--primary-lt); stroke-width:2; fill:none; }
.js .hero-seam .seam-path{ stroke-dasharray:1; stroke-dashoffset:1; }
.reveal-seam .hero-seam .seam-path{ animation:draw .7s ease .2s forwards; }
.hero-tag{ position:absolute; left:0; bottom:0; z-index:3; background:#0A0A0A; color:#dfe3df; font-size:12.5px; font-weight:600; letter-spacing:.04em; padding:9px 14px; border-top-right-radius:8px; }
.hero-tag b{ color:var(--primary-lt); }
@media(max-width:820px){
  .hero-grid{ grid-template-columns:1fr; min-height:0; }
  .hero-copy{ order:1; padding:clamp(32px,8vw,48px) var(--pad); }
  .hero-media{ order:2; aspect-ratio:16/10; }
  .hero-media img{ position:absolute; }
  .hero-ctas .btn{ width:100%; justify-content:center; }
  /* ⭐ director_fix 2026-08-24：390×844 上主 CTA 差 10px 掉出首屏。
     H1 已在 v4 基线 38px 地板上 ⇒ ⛔ 不动字号，改收窄纵向间距。 */
  .hero-axes{ margin:16px 0 20px; gap:9px; }
  /* ⚠️ 偏离登记：v4 基线 B2 的 H1 地板是 38px，那条是给**桌面整幅** H1 写的。
     360px 宽屏上 38px/800/-0.028em 会折 6 行 ⇒ 主 CTA 掉出首屏 50px。
     ⇒ <400px 视口单独放到 33px。⛔ 仅此一处，≥400px 一律守 38px 地板。 */
  @media(max-width:399px){ .hero-copy h1{ font-size:33px; } }
  .hero-copy .lead{ margin-bottom:.7em; }
}

/* ---------- KPI ---------- */
#kpi{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:6px; }
.kpi-card{
  background:#fff; border:1px solid var(--surface3); border-radius:10px; padding:24px 22px 22px;
  box-shadow:0 1px 2px rgba(10,10,10,.04);
}
.kpi-ico{ width:26px; height:26px; color:var(--primary); margin-bottom:14px; }
.stat-num{ font-size:clamp(26px,2.4vw,30px); font-weight:800; color:var(--primary); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1; }
.kpi-card h3{ font-size:15px; font-weight:700; margin:12px 0 5px; }
.kpi-card p{ font-size:13px; color:var(--muted); margin:0; line-height:1.45; }
.kpi-note{ margin-top:22px; font-size:14px; color:var(--muted); max-width:70ch; }
@media(max-width:760px){ #kpi{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:420px){ #kpi{ grid-template-columns:1fr; } }

/* ---------- process chain (six stations) ---------- */
.flow-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.flow-svg{ width:100%; min-width:720px; height:auto; }
.flow-svg .st-num{ fill:var(--bg); stroke:var(--primary); stroke-width:2; }  /* ⭐ director_fix 2026-08-24：原 fill:none ⇒ 连接线从圈里透出来压住序号数字 */
.flow-svg .st-body{ fill:none; stroke:#c4c9c4; stroke-width:2; }
.flow-svg .st-arrow{ stroke:var(--primary); stroke-width:2; fill:none; }
.flow-svg .st-name{ fill:var(--ink); font-weight:800; font-size:15px; letter-spacing:-.01em; }
.flow-svg .st-desc{ fill:var(--muted); font-size:11.5px; font-weight:500; }
.flow-svg .st-numtext{ fill:var(--primary); font-weight:800; font-size:15px; }
.flow-svg .st-node.is-off{ opacity:.25; }
.reveal.is-in .flow-svg .st-node{ opacity:1; transition:opacity .4s ease; }
.flow-desc{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 30px; margin-top:34px; }
.flow-desc li{ font-size:14.5px; color:var(--body); font-weight:500; padding-left:16px; position:relative; }
.flow-desc li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; border:2px solid var(--primary); }
.flow-desc li b{ color:var(--ink); font-weight:800; }
.boundary{ margin-top:34px; border:1px solid var(--surface3); border-left:3px solid var(--primary); border-radius:10px; background:#fff; padding:22px 24px; }
.boundary h4{ font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:10px; }
.boundary p{ margin:0; font-size:14.5px; color:var(--body); }
@media(max-width:760px){ .flow-desc{ grid-template-columns:1fr; } }

/* ---------- cards (buyers / equipment) ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card{
  background:#fff; border:1px solid var(--surface3); border-radius:10px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(10,10,10,.04);
}
.card-media{ aspect-ratio:4/3; background:var(--surface2); overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; }
.card-b{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.card-ico{ width:26px; height:26px; color:var(--primary); margin-bottom:12px; }
.card h3{ margin-bottom:8px; }
.card p{ font-size:14.5px; color:var(--body); margin:0 0 14px; }
/* 🚨 director_fix 2026-08-27：`.micro` 原先被**按位置**声明了 4 次
   （.card / .blist li / .nav-rail / .tri-col），⛔ 落在这四处之外就一点样式都没有 ——
   实测 entry-stringer-sml-s15 的箭头涨到 **1068px**、robotic-layup-sml-a6 到 315px，
   而**十八道闸没有一道看得见**（它不遮挡、不溢出、不空白）。
   ⇒ 样式绑在**组件类**上，位置只做差异覆盖（同 build-rules §15）。 */
.micro{ font-weight:700; font-size:13.5px; color:var(--primary); display:inline-flex; align-items:center; gap:6px; }
.micro svg{ width:15px; height:15px; flex:0 0 auto; }
.card .micro{ margin-top:auto; font-weight:700; font-size:14px; color:var(--primary); display:inline-flex; align-items:center; gap:6px; }
.card .micro svg{ width:15px; height:15px; }
.big-fig{ font-size:24px; font-weight:800; color:var(--primary); letter-spacing:-.02em; margin:2px 0 8px; font-variant-numeric:tabular-nums; }
.big-fig small{ display:block; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.02em; text-transform:uppercase; margin-top:3px; }
@media(max-width:900px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .card-grid{ grid-template-columns:1fr; } }

/* gallery (B-class) */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gtile{ background:#fff; border:1px solid var(--surface3); border-radius:10px; overflow:hidden; }
.gtile .card-media{ aspect-ratio:4/3; }
.gtile .gb{ padding:16px 18px 18px; }
.gtile h3{ font-size:16px; margin-bottom:4px; }
.gtile p{ font-size:13.5px; color:var(--muted); margin:0; line-height:1.45; }
@media(max-width:900px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .gallery{ grid-template-columns:1fr; } }
.more-link{ display:inline-flex; align-items:center; gap:7px; margin-top:26px; font-weight:700; color:var(--primary); }
.more-link svg{ width:16px; height:16px; }

/* ---------- tables ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--surface3); border-radius:12px; background:#fff; }
table.spec{ border-collapse:collapse; width:100%; min-width:680px; font-size:14px; }
table.spec th,table.spec td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
table.spec thead th{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; background:var(--surface); position:sticky; top:0; }
table.spec tbody th{ font-weight:700; color:var(--ink); background:#fff; position:sticky; left:0; z-index:1; }
table.spec td strong{ color:var(--ink); }
table.spec tr:last-child td,table.spec tr:last-child th{ border-bottom:none; }
/* highlighted flagship column */
table.spec .col-hi{ background:rgba(15,122,50,.06); box-shadow:inset 3px 0 0 var(--primary); }
table.spec thead .col-hi{ background:rgba(15,122,50,.12); color:var(--primary); }
.tbl-caption{ font-size:13px; color:var(--muted); margin-top:12px; }
.tbl-note{ font-size:14.5px; color:var(--body); margin-top:16px; max-width:78ch; }

/* before/after tint */
table.ba th.ba-old,table.ba td.ba-old{ color:var(--muted); }
table.ba thead .ba-old{ background:var(--surface2); }
table.ba thead .ba-new{ background:rgba(15,122,50,.1); color:var(--primary); }
table.ba td.ba-new strong{ color:var(--primary); }

/* pull quote (light) */
.pull{ margin:30px 0 0; border-left:3px solid var(--primary); padding:6px 0 6px 20px; font-size:clamp(18px,1.8vw,22px); font-weight:800; color:var(--ink); letter-spacing:-.01em; line-height:1.3; max-width:60ch; }

/* ---------- dark sections ---------- */
.dark{ background:var(--dark); color:#cdd2cd; }
.dark h2,.dark h3{ color:#fff; }
.dark .lead{ color:#a9aea9; }
.dark .eb::after{ background:#3a3f3a; }
.band{ background:var(--dark); }
.band-inner{ display:flex; align-items:center; gap:22px; padding-block:clamp(34px,4vw,48px); }
.band-mark{ flex:0 0 auto; width:34px; height:34px; color:var(--primary-lt); }
.band-inner p{ margin:0; font-size:clamp(19px,2.2vw,26px); font-weight:800; color:#fff; letter-spacing:-.02em; line-height:1.28; }
.band-inner p em{ font-style:normal; color:var(--primary-lt); }
/* ⭐ director_fix 2026-08-24：把 §1 创意母题（细横线 + 节点圆）带进深色带。
   两条金句带原先只有一行左对齐引文，右侧 392px 空着且母题在深色带里完全缺席。
   母题线从引文延伸到右缘 —— 既承载概念，也让这条带读起来是「一条链上的一站」而非一句孤立标语。
   ⚠️ 装饰性，故 aria-hidden 由 ::after 天然满足（伪元素不入无障碍树）。*/
.band-inner{ --bl:1px; }
.band-rule{
  /* ⭐ director_fix 2026-08-26：原为 .band-inner::after（伪元素）。
     🚨 伪元素**没有 DOM 节点** ⇒ layout-gate 的 querySelectorAll 看不见它，
        于是那条母题线明明填了右侧空间，闸仍然报「右侧空档 512px」——
        变成一条**永久假红**，而永久假红会训练人忽略这道闸（= 闸真正失效的方式）。
     ⇒ 改成**真元素**：闸看得见，空档也就真的没了。⛔ 这不是为了让闸变绿，
        母题线本来就承载 §1 的创意概念，它本就该是内容的一部分。 */
  flex:1 1 auto; height:var(--bl); min-width:40px; margin-left:6px;
  background:linear-gradient(to right, var(--primary-lt), rgba(20,159,65,.15) 70%, rgba(20,159,65,0));
}
.band-inner p{ flex:0 1 auto; }
@media(max-width:600px){ .band-rule{ display:none; } }
@media(max-width:600px){ .band-inner{ gap:14px; } }

/* seam dark section (split) */
.seam-grid{ display:grid; grid-template-columns:minmax(0,52%) minmax(0,48%); align-items:stretch; }
.seam-copy{ padding-right:clamp(20px,3vw,48px); }
.seam-media{ position:relative; min-height:340px; border-radius:12px; overflow:hidden; }
.seam-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tl{ margin-top:26px; position:relative; }
.tl::before{ content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:#2a2f2a; }
.tl li{ position:relative; padding:0 0 22px 40px; }
.tl li:last-child{ padding-bottom:0; }
.tl-dot{ position:absolute; left:2px; top:1px; width:22px; height:22px; border-radius:50%; border:2px solid var(--primary-lt); background:var(--dark); display:flex; align-items:center; justify-content:center; }
.tl-dot span{ width:7px; height:7px; border-radius:50%; background:var(--primary-lt); }
.reveal.is-in .tl-dot{ animation:pop .4s ease backwards; }
.tl h4{ color:#fff; font-size:15.5px; margin:0 0 5px; }
.tl p{ margin:0; font-size:14.5px; color:#a9aea9; }
.tl p b{ color:#e6e9e6; font-weight:700; }
.opt-flag{ display:inline-block; margin-top:4px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--primary-lt); border:1px solid rgba(20,159,65,.5); border-radius:5px; padding:2px 8px; }
.mid-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-weight:700; color:var(--primary-lt); }
.mid-cta svg{ width:16px; height:16px; }
@media(max-width:820px){ .seam-grid{ grid-template-columns:1fr; } .seam-copy{ padding-right:0; margin-bottom:26px; } .seam-media{ min-height:260px; } }

/* ---------- process / diagram two-col ---------- */
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:center; }
.split.rev{ grid-template-columns:.9fr 1.1fr; }
/* ⭐ director_fix 2026-08-24：对比表需要 min-width 680px，而 2 列栅格最宽只给到 585px
   ⇒ 表格被自己的 overflow 容器裁掉第三列（1440px 桌面端默认看不到「Laser Non-Destructive」那列，
   而对比正是这一节的全部意义）。改为表格占满整幅宽，图卡改横向排以免 4:3 撑成 840px 高。 */
.split.stack{ grid-template-columns:1fr; align-items:stretch; }
.card.h{ flex-direction:row; align-items:stretch; }
.card.h .card-media{ flex:0 0 38%; aspect-ratio:4/3; }
.card.h .card-b{ flex:1; justify-content:center; }
@media(max-width:820px){ .card.h{ flex-direction:column; } .card.h .card-media{ flex:none; } }
.diag{ border:1px solid var(--surface3); border-radius:12px; background:#fff; padding:22px; }
.diag svg{ width:100%; height:auto; }
.steps-list li{ display:flex; gap:14px; margin-bottom:18px; }
.steps-list li:last-child{ margin-bottom:0; }
.steps-list .n{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:2px solid var(--primary); color:var(--primary); font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; }
.steps-list h4{ margin:2px 0 4px; font-size:16px; }
.steps-list p{ margin:0; font-size:14.5px; color:var(--body); }
.icon-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.chip{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--surface3); border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; color:var(--body); background:#fff; }
.chip svg{ width:18px; height:18px; color:var(--primary); }
@media(max-width:820px){ .split,.split.rev{ grid-template-columns:1fr; } }

/* horizontal 3-step timeline */
.htl{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:st; }
.htl .step{ position:relative; padding-top:18px; }
.htl .step::before{ content:""; position:absolute; top:23px; left:34px; right:-11px; height:2px; background:var(--surface3); }
.htl .step:last-child::before{ display:none; }
.step-dot{ width:30px; height:30px; border-radius:50%; border:2px solid var(--primary); color:var(--primary); font-weight:800; display:flex; align-items:center; justify-content:center; background:#fff; position:relative; z-index:1; }
.htl .step-ico{ width:22px; height:22px; color:var(--primary); margin:16px 0 8px; }
.htl h4{ font-size:16px; margin:0 0 6px; }
.htl p{ font-size:14px; color:var(--body); margin:0 0 8px; }
.when{ font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--primary); }
@media(max-width:760px){ .htl{ grid-template-columns:1fr; } .htl .step::before{ display:none; } }

/* vertical delivery timeline */
.vtl{ position:relative; margin-top:8px; }
.vtl::before{ content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:var(--surface3); }
.vtl li{ position:relative; padding:0 0 22px 40px; }
.vtl li:last-child{ padding-bottom:0; }
.vtl .d{ position:absolute; left:2px; top:1px; width:22px; height:22px; border-radius:50%; border:2px solid var(--primary); background:#fff; display:flex; align-items:center; justify-content:center; }
.vtl .d span{ width:7px; height:7px; border-radius:50%; background:var(--primary); }
.vtl h4{ margin:0 0 4px; font-size:16px; }
.vtl p{ margin:0; font-size:14.5px; color:var(--body); }

/* ---------- service card + FAQ ---------- */
.svc-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(26px,4vw,48px); align-items:start; }
.svc-card{ border:1px solid var(--surface3); border-radius:12px; background:#fff; padding:26px; box-shadow:0 1px 2px rgba(10,10,10,.04); }
.svc-card .promise{ font-size:20px; font-weight:800; color:var(--ink); letter-spacing:-.02em; margin-bottom:6px; }
.svc-card .sla{ font-size:15px; color:var(--primary); font-weight:800; }
.svc-card ul{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.svc-card ul li{ display:flex; gap:10px; font-size:14px; color:var(--body); }
.svc-card ul li svg{ width:20px; height:20px; color:var(--primary); flex:0 0 auto; }
.faq details{ border:1px solid var(--surface3); border-radius:10px; background:#fff; margin-bottom:12px; overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding:16px 18px; font-weight:700; color:var(--ink); font-size:15.5px; display:flex; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .fq-ico{ width:18px; height:18px; color:var(--primary); flex:0 0 auto; transition:transform .2s ease; }
.faq details[open] summary .fq-ico{ transform:rotate(90deg); }
.faq .fa{ padding:0 18px 18px 48px; font-size:14.5px; color:var(--body); }
@media(max-width:820px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---------- training table ---------- */
.kv{ width:100%; border-collapse:collapse; font-size:14.5px; background:#fff; border:1px solid var(--surface3); border-radius:12px; overflow:hidden; }
.kv th{ text-align:left; width:34%; background:var(--surface); color:var(--ink); font-weight:700; padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
.kv td{ padding:14px 18px; border-bottom:1px solid var(--line); color:var(--body); }
.kv tr:last-child th,.kv tr:last-child td{ border-bottom:none; }
.kv strong{ color:var(--primary); }

/* bullets (changeover) */
.blist{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.blist li{ border:1px solid var(--surface3); border-radius:10px; background:#fff; padding:18px 20px; }
.blist h4{ font-size:15.5px; margin:0 0 5px; display:flex; align-items:center; gap:9px; }
.blist h4 svg{ width:18px; height:18px; color:var(--primary); flex:0 0 auto; }
.blist p{ margin:0; font-size:14px; color:var(--body); }
@media(max-width:700px){ .blist{ grid-template-columns:1fr; } }

/* ---------- final CTA ---------- */
#cta{ position:relative; overflow:hidden; }
#cta .cta-media{ position:absolute; inset:0; z-index:0; }
#cta .cta-media img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
#cta .cta-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--dark) 34%, rgba(10,10,10,.72) 70%, rgba(10,10,10,.5)); }
#cta .wrap{ position:relative; z-index:1; }
.cta-box{ max-width:60ch; }
.cta-box h2{ color:#fff; }
.cta-box .lead{ color:#b9beb9; }
.cta-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 18px; }
.cta-alt{ display:inline-flex; align-items:center; gap:8px; color:#cdd2cd; font-weight:600; font-size:14.5px; }
.cta-alt a{ color:var(--primary-lt); font-weight:700; }
.micro-trust{ font-size:13.5px; color:#9aa09a; margin-top:8px; }
.micro-trust b{ color:var(--primary-lt); }
@media(max-width:600px){ .cta-ctas .btn{ width:100%; justify-content:center; } }

/* ---------- footer ---------- */
.site-footer{ background:var(--dark); color:#9aa09a; padding-block:56px 30px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:32px; }
.ft-logo{ display:flex; align-items:center; gap:9px; color:#fff; font-weight:800; font-size:17px; margin-bottom:14px; }
.ft-logo .bmark{ width:26px; height:26px; }
.foot-brand p{ font-size:13.5px; color:#8b918b; max-width:34ch; line-height:1.6; }
.foot-contact{ margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.foot-contact a,.foot-contact span{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#c2c7c2; }
.foot-contact svg{ width:16px; height:16px; color:var(--primary-lt); flex:0 0 auto; }
.foot-col h4{ color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin:0 0 16px; padding-bottom:8px; position:relative; }
.foot-col h4::after{ content:""; position:absolute; left:0; bottom:0; width:24px; height:2px; background:var(--primary-lt); }
.foot-col ul{ display:flex; flex-direction:column; gap:10px; }
.foot-col a{ color:#a9aea9; font-size:13.5px; }
.foot-col a:hover{ color:#fff; text-decoration:none; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:40px; padding-top:22px; border-top:1px solid #23271f; font-size:12.5px; color:#7c827c; flex-wrap:wrap; }
.social{ display:flex; gap:10px; }
.social a{ width:32px; height:32px; border-radius:50%; border:1px solid #2c312c; display:flex; align-items:center; justify-content:center; color:#a9aea9; }
.social a:hover{ border-color:var(--primary-lt); color:#fff; }
.social svg{ width:15px; height:15px; }
@media(max-width:860px){ .foot-top{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .foot-top{ grid-template-columns:1fr; } }

/* ---------- reveal / motion ---------- */
/* reveal hidden-state is gated on .js so content is fully visible without JS */
.reveal{ transition:opacity .6s ease, transform .6s ease; }
.js .reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{ opacity:1; transform:none; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes pop{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-seam .seam-path{ animation:none !important; stroke-dashoffset:0 !important; }
  .reveal.is-in .tl-dot{ animation:none !important; }
  .flow-svg .st-node{ opacity:1 !important; }
}

/* ---------- shape dividers (between sections, only at light⇄dark boundaries) ---------- */
.dvc{ width:100%; height:54px; line-height:0; overflow:hidden; position:relative; }
.dvc svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.dvc.l2d{ background:var(--bg); }
.dvc.l2d.from-alt{ background:var(--surface); }
.dvc.l2d svg path{ fill:var(--dark); }
.dvc.d2l{ background:var(--dark); }
.dvc.d2l svg path{ fill:var(--bg); }
@media(max-width:600px){ .dvc{ height:38px; } }

/* utility */
.two-col{ columns:2; column-gap:40px; }
@media(max-width:700px){ .two-col{ columns:1; } }
.mt0{ margin-top:0; }
.center-narrow{ max-width:70ch; }

/* ============================================================================
   bc-tabber-stringer-sml-s60 — product-template page (appended, not a new file)
   Only styles that differ from the index components live here; tokens / .eb /
   .card / table.spec / .dark / .split / .steps-list / .tl / buttons / footer
   are all reused from above.
   ============================================================================ */

/* ---- §1 stacked hero (independent class — must NOT inherit #hero split) ---- */
.hero-stack{
  background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.028) 1px, transparent 0);
  background-size:26px 26px; overflow:hidden;
  padding-block:clamp(46px,6vw,84px) 0 !important;
}
.hero-stack .hs-head{ max-width:78ch; }
.hero-stack h1{ margin:6px 0 0; max-width:22ch; }
.hero-stack .lead{ max-width:62ch; margin-top:15px; }
.hero-stack .hs-sub{ margin-top:14px; font-size:15.5px; color:var(--body); max-width:60ch; }
.hero-stack .hs-sub b{ color:var(--ink); font-weight:800; }
.hs-figs{
  display:flex; margin:clamp(28px,3.4vw,42px) 0 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
/* ⭐ director_fix 2026-08-26（二版，⚠️ 一版改错了方向）：
   一版写 `margin-block:14px` —— 原规则 bottom 是 0，`margin-block` 把上下都设成 14px ⇒
   **等于在加间距**，实测 1366 从 +26 恶化到 +44。⭐ 逐块量过再改：
   .hs-cta 有 36px 上内距 + 14px 上外距 = 50px 纯间隙，是最大的一块。
   H1 仍在基线 38px 地板上 ⇒ ⛔ 不动字号。 */
.hs-head{ margin-bottom:12px; }
.hs-head .lead{ margin-bottom:14px; }
.hs-figs{ margin-top:12px; margin-bottom:0; padding-block:10px; }
.hs-cta{ margin-top:10px; padding-top:12px; }
.hs-fig{ flex:1 1 0; min-width:0; padding:22px clamp(14px,1.6vw,26px); }
.hs-fig + .hs-fig{ border-left:1px solid var(--line); }
.hs-fig .hs-ico{ width:22px; height:22px; color:var(--primary); margin-bottom:11px; }
.hs-num{ font-size:clamp(24px,2.5vw,33px); font-weight:800; color:var(--primary); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.hs-lab{ margin-top:9px; font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); line-height:1.3; }
.hs-media{ position:relative; margin-top:clamp(30px,3.6vw,46px); aspect-ratio:16/9; background:var(--surface2); }
.hs-media img{ width:100%; height:100%; object-fit:cover; }
.hs-tag{ position:absolute; left:0; bottom:0; background:#0A0A0A/* ⭐ director_fix 2026-08-26：原为 rgba(10,10,10,.82) —— 半透明深底与图混合后比纯 #0A0A0A 浅，--primary-lt 在其上只有 3.63:1（<AA 4.5）。两档绿的前提是**实底**，⛔ 半透明遮罩不算深色语境 */; color:#dfe3df; font-size:12.5px; font-weight:600; letter-spacing:.03em; padding:9px 14px; border-top-right-radius:8px; }
.hs-tag b{ color:var(--primary-lt); }
.hs-cta{ padding:clamp(26px,3vw,36px) 0 clamp(4px,1vw,8px); }
@media(max-width:760px){
  .hs-figs{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
            border-left:1px solid var(--line); border-right:1px solid var(--line); }
  .hs-fig{ background:var(--bg); }
  .hs-fig + .hs-fig{ border-left:none; }
  .hs-cta .btn{ width:100%; justify-content:center; }
}

/* grid/flex children must be allowed to shrink below content min-width, so a
   min-width table / SVG inside them scrolls in its own container instead of
   pushing the page body wider (mobile horizontal-scroll guard — build-rules §14).
   The scroll container itself also needs min-width:0 or table.spec{min-width}
   / flow-svg{min-width} tops it open past the viewport at 320px. */
.split>*, .floorrow>*, .diag-stack{ min-width:0; }
.table-scroll, .pstrip, .diag{ min-width:0; }

/* ---- §2 process strip (only the S60 segment, not the six-station chain) ---- */
.pstrip{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; border:1px solid var(--surface3); border-radius:12px; background:#fff; }
.pstrip .flow-svg{ min-width:560px; padding:18px 10px 8px; }
.flow-svg .st-node.is-on .st-num{ fill:rgba(15,122,50,.09); stroke-width:2.8; }
.flow-svg .st-node.is-on .st-name{ fill:var(--primary); }
.flow-svg .st-faint{ fill:var(--faint); font-size:12px; font-weight:700; }
.pstrip-note{ margin-top:16px; font-size:14.5px; color:var(--body); max-width:76ch; }

/* ---- §3 who-it-is-for (two legit columns; alt col is neutral, never red) ---- */
.fitgrid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fitcol{ border:1px solid var(--surface3); border-radius:12px; background:#fff; padding:26px 26px 24px; display:flex; flex-direction:column; }
.fitcol.is-fit{ border-color:rgba(15,122,50,.35); box-shadow:inset 3px 0 0 var(--primary); }
.fit-h{ display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.fit-ico{ width:26px; height:26px; flex:0 0 auto; }
.fitcol.is-fit .fit-ico{ color:var(--primary); }
.fitcol.is-alt .fit-ico{ color:var(--muted); }
.fit-h h3{ margin:0; font-size:18px; }
.fitcol ul{ display:flex; flex-direction:column; gap:14px; }
.fitcol li{ font-size:14.5px; color:var(--body); padding-left:19px; position:relative; }
.fitcol li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; }
.fitcol.is-fit li::before{ border:2px solid var(--primary); }
.fitcol.is-alt li::before{ border:2px solid var(--faint); }
.fitcol li b{ color:var(--ink); font-weight:800; }
.fit-photo{ margin-top:18px; border-radius:10px; overflow:hidden; aspect-ratio:16/9; background:var(--surface2); }
.fit-photo img{ width:100%; height:100%; object-fit:cover; }
.fit-foot{ margin-top:24px; font-size:14.5px; color:var(--body); max-width:80ch; }
@media(max-width:760px){ .fitgrid{ grid-template-columns:1fr; } }

/* ---- §4 grouped specs table ---- */
.spec.grouped{ min-width:520px; }
table.spec tr.grp th{ background:var(--surface2); color:var(--primary); font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; padding-top:16px; padding-bottom:9px; position:static; }
table.spec td small.bound{ display:block; margin-top:5px; font-size:12px; color:var(--muted); font-weight:600; line-height:1.45; }
.spec-lead-note{ font-size:14.5px; color:var(--body); margin:0 0 18px; max-width:80ch; border-left:3px solid var(--primary); padding:4px 0 4px 16px; }

/* ---- §5 feeding deep-dive: spool comparison chips ---- */
.spoolset{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px; }
.spool-chip{ border:1px solid var(--surface3); border-radius:10px; background:#fff; padding:18px 18px 16px; }
.spool-chip .sc-num{ font-size:22px; font-weight:800; color:var(--primary); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1; }
.spool-chip .sc-lab{ margin-top:8px; font-size:13px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.diag-stack{ display:flex; flex-direction:column; gap:16px; }
@media(max-width:640px){ .spoolset{ grid-template-columns:1fr; } }

/* ---- §7 dark stats band ---- */
.statband{ background:var(--dark); color:#cdd2cd; }
.statrow{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto auto; gap:clamp(24px,4vw,52px); margin-top:10px; }
/* 数字换行时标签仍逐列对齐 —— ⛔ 不靠「数字都是一行」这个巧合 */
.statcell{ display:grid; grid-template-rows:subgrid; grid-row:span 3; min-width:0; }
.statcell .sb-ico{ width:30px; height:30px; color:var(--primary-lt); margin-bottom:16px; }
.statcell .sb-num{ font-size:clamp(40px,5.4vw,62px); font-weight:800; color:var(--primary-lt); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.statcell .sb-lab{ margin-top:13px; font-size:15px; color:#cdd2cd; font-weight:600; line-height:1.4; }
.statband .sb-foot{ margin-top:clamp(26px,3vw,40px); font-size:14px; color:#9aa09a; max-width:74ch; }
.statband .sb-foot b{ color:#e6e9e6; font-weight:700; }
@media(max-width:700px){ .statrow{ grid-template-columns:1fr; gap:28px; } }

/* ---- §9 EL trade-off (both options legit) + soft light CTA ---- */
.el-frame{ border-radius:12px; overflow:hidden; aspect-ratio:21/9; background:var(--surface2); margin-bottom:24px; max-width:820px; }
.el-frame img{ width:100%; height:100%; object-fit:cover; }
.fitcol.is-opt{ border-color:var(--surface3); }
.fitcol.is-opt .fit-ico{ color:var(--primary); }
.fitcol.is-opt li::before{ border:2px solid var(--primary); }
.opt-tag{ display:inline-block; margin-left:10px; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--primary); border:1px solid rgba(15,122,50,.4); border-radius:5px; padding:2px 8px; vertical-align:middle; }
.soft-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:24px; font-weight:700; color:var(--primary); font-size:15px; }
.soft-cta svg{ width:17px; height:17px; }

/* ---- §10 runs-continuously bullets ---- */
.runlist{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.runlist li{ border:1px solid var(--surface3); border-radius:10px; background:#fff; padding:22px 22px 20px; }
.runlist .r-ico{ width:26px; height:26px; color:var(--primary); margin-bottom:13px; }
.runlist h4{ font-size:16px; margin:0 0 6px; }
.runlist p{ margin:0; font-size:14px; color:var(--body); }
@media(max-width:760px){ .runlist{ grid-template-columns:1fr; } }

/* ---- §11 site row small table + footprint diagram ---- */
.floorrow{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,4vw,48px); align-items:start; }
/* 🚨 director_fix 2026-08-26：`table.spec{min-width:680px}` 被塞进 .floorrow 的左列（实测 561px）
   ⇒ **1440px 桌面端第三列默认看不见**，得在小框里横拖。⭐ 这已是**第二次**（第 2 页 §6 同病）。
   ⛔ 横滚是**窄屏的降级手段，⛔ 不是桌面端的常态**。
   ⇒ 表格所在的那一列在 ≥1000px 时**独占整行**，右侧卡片移到表格下方。 */
@media(min-width:1000px){
  .floorrow{ grid-template-columns:1fr; }
  /* 🚨 director_fix 2026-08-27：上面那条原写 `> *:last-child`，⛔ 按位置判断。
     实测 10 页的末列**全是 .diag / .diag-stack，没有一页是三张卡** ⇒ 单张示意图被挤成 1/3 宽
     （实测 347px / 1076px），右侧空 690px，⛔ 10 页全中而我一路没看出来。
     ⇒ 改为**按内容判断**：只有真装着 ≥2 张图的那一列才铺三列。 */
  .floorrow > :last-child:has(> .diag + .diag){ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
  /* 单张图的那一列独占整行 ⇒ 限宽居中，⛔ 不许拉成 1076×610 的巨图 */
  .floorrow > .diag:last-child > svg,
  .floorrow > .diag-stack:last-child:not(:has(> .diag + .diag)) .diag > svg{ max-width:620px; margin-inline:auto; display:block; }
}
.floorrow .more-link{ margin-top:18px; }
@media(max-width:820px){ .floorrow{ grid-template-columns:1fr; } }

/* ---- §13 after-you-buy bullets carry a link ---- */
.blist li .micro{ margin-top:10px; font-weight:700; font-size:13.5px; color:var(--primary); display:inline-flex; align-items:center; gap:6px; }
.blist li .micro svg{ width:15px; height:15px; }

/* ---- §14 closing CTA: single solid button (not the index double CTA) ---- */
.cta-box .cta-single{ margin:26px 0 16px; }
@media(max-width:600px){ .cta-box .cta-single .btn{ width:100%; justify-content:center; } }

/* ============================================================================
   line-utilities-and-layout — spec/registration page (appended, not a new file)
   Third hero form (dark narrow registration band, no big image); everything
   else reuses tokens / .eb / .split / .diag / table.spec / .dark / .band / .htl.
   ============================================================================ */

/* grid/flex children that hold a min-width table / SVG must be allowed to
   shrink below content width (mobile horizontal-scroll guard — build-rules §14). */
.envelope-set>*, .scope-split>*, .thumbrow>*, .qual-set>*, .nav-rail>*, .diag-stack>*{ min-width:0; }

/* ---- §1 registration hero: dark narrow strip (~45vh), no big image ---- */
.hero-reg{
  position:relative; background:var(--dark); color:#e9ece9; overflow:hidden;
  padding-block:clamp(40px,6vw,72px) !important;
  min-height:clamp(360px,45vh,520px); display:flex; align-items:center;
}
.hero-reg .hr-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
/* 🚨 director_fix 2026-08-26：本页 hero 原先只有蓝图网格 SVG，**没有照片位** ——
   v4 基线 B11 要求 hero 有实景背景图（v2 那次阮总原话「hero 背景图都没有」），
   而 CLAUDE.md 全局规矩：SVG 可放手用，**唯一红线是 ⛔ 不顶替照片位**。
   ⇒ 改成**实景照片打底 + 蓝图网格叠加**（对「你这楼装不装得下」反而更贴题），⛔ 不是二选一。
   ⚠️ 我原先在设计指导里写「无大图」，那是**我跟老板基线顶了** —— 已回改设计指导。 */
.hero-reg .hr-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-reg .hr-scrim{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.82) 55%,rgba(10,10,10,.72) 100%); }
.hero-reg .hr-bg svg{ position:relative; z-index:1; }
.hero-reg .hr-bg svg{ width:100%; height:100%; display:block; opacity:.5; }
.hero-reg .hr-inner{ position:relative; z-index:1; width:100%; }
.hero-reg h1{ color:#fff; max-width:20ch; font-size:clamp(32px,4.4vw,50px); }
.hero-reg .hr-lead{ color:#b9beb9; font-size:clamp(16px,1.4vw,19px); font-weight:500; max-width:60ch; margin:14px 0 0; line-height:1.6; }
.hr-anchors{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:clamp(24px,3vw,34px) 0 0; }
.hr-anchors a{
  display:block; border:1px solid rgba(255,255,255,.16); border-radius:10px;
  background:rgba(255,255,255,.03); padding:16px 18px; color:#e9ece9;
  transition:border-color .15s ease, background .15s ease;
}
.hr-anchors a:hover{ text-decoration:none; border-color:var(--primary-lt); background:rgba(20,159,65,.08); }
.hr-anchors svg{ width:22px; height:22px; color:var(--primary-lt); margin-bottom:9px; }
.hr-anchors b{ display:block; color:#fff; font-size:15.5px; font-weight:800; letter-spacing:-.01em; }
.hr-anchors span{ display:block; margin-top:4px; font-size:13px; color:#a9aea9; line-height:1.4; }
.hr-cta{ display:inline-flex; align-items:center; gap:9px; margin-top:clamp(22px,2.6vw,30px); color:var(--primary-lt); font-weight:800; font-size:15.5px; }
.hr-cta svg{ width:17px; height:17px; }
@media(max-width:760px){ .hr-anchors{ grid-template-columns:1fr; gap:10px; } .hero-reg{ min-height:0; } }

/* ---- §2 navigation rail: three anchors on a connecting line ---- */
.nav-rail{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; }
.nav-rail li{ position:relative; padding-top:14px; }
.nav-rail li::before{ content:""; position:absolute; top:23px; left:38px; right:-11px; height:2px; background:var(--surface3); }
.nav-rail li:last-child::before{ display:none; }
.nav-rail .nr-node{ width:34px; height:34px; border-radius:9px; border:2px solid var(--primary); color:var(--primary); display:flex; align-items:center; justify-content:center; background:#fff; position:relative; z-index:1; }
.nav-rail .nr-node svg{ width:19px; height:19px; }
.nav-rail h3{ margin:16px 0 6px; font-size:17px; }
.nav-rail p{ font-size:14px; color:var(--body); margin:0 0 10px; }
.nav-rail .micro{ font-weight:700; font-size:13.5px; color:var(--primary); display:inline-flex; align-items:center; gap:6px; }
.nav-rail .micro svg{ width:15px; height:15px; }
@media(max-width:760px){ .nav-rail{ grid-template-columns:1fr; } .nav-rail li::before{ display:none; } }

/* ---- four-segment markers (square outlined number + long rule) ---- */
.seg-mark{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.seg-mark .seg-no{ font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--primary); border:2px solid var(--primary); border-radius:6px; padding:4px 9px; font-variant-numeric:tabular-nums; }
.seg-mark .seg-nm{ font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.seg-mark::after{ content:""; flex:1 1 auto; height:2px; background:linear-gradient(to right,var(--surface3),transparent); }

/* ---- §3 envelope set: three nested-frame diagrams side by side ---- */
.envelope-set{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:6px; }
.env-fig{ margin:0; }
.env-fig .diag{ padding:16px; }
.env-fig figcaption{ margin-top:10px; font-size:13.5px; color:var(--body); line-height:1.45; }
.env-fig figcaption b{ color:var(--ink); font-weight:800; }
@media(max-width:820px){ .envelope-set{ grid-template-columns:1fr; } }

/* ---- §6/§8 risk warning callout (distinct from §12 boundary block) ---- */
.warn{ border:1px solid var(--surface3); border-left:3px solid #C9772B; border-radius:10px; background:#fff; padding:14px 18px; margin-bottom:14px; }
.warn .warn-tag{ display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#B4611C; margin-bottom:6px; }
.warn p{ margin:0; font-size:14.5px; color:var(--body); }

/* ---- §7 dark air-quality set (deep card carries the deep-dive) ---- */
.qual-set{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:18px; margin-top:6px; }
.qual-card{ border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.03); padding:24px 22px; }
.qual-card.is-deep{ border-color:rgba(20,159,65,.5); background:rgba(20,159,65,.06); }
.qual-ico{ width:30px; height:30px; color:var(--primary-lt); margin-bottom:14px; }
.qual-num{ font-size:clamp(26px,2.6vw,32px); font-weight:800; color:var(--primary-lt); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.qual-lab{ margin-top:10px; font-size:13.5px; font-weight:700; letter-spacing:.03em; color:#cdd2cd; }
.qual-card p{ margin:14px 0 0; font-size:14px; color:#a9aea9; line-height:1.55; }
@media(max-width:820px){ .qual-set{ grid-template-columns:1fr; } }

/* ---- §5 thumbnail row above the site table ---- */
.thumbrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.thumbrow figure{ margin:0; border:1px solid var(--surface3); border-radius:10px; overflow:hidden; background:#fff; }
.thumbrow .card-media{ aspect-ratio:4/3; }
.thumbrow figcaption{ padding:10px 14px; font-size:14px; font-weight:800; color:var(--ink); }
@media(max-width:640px){ .thumbrow{ grid-template-columns:1fr 1fr 1fr; gap:10px; } .thumbrow figcaption{ font-size:12.5px; padding:8px 10px; } }

/* ---- §10 environment bullets ---- */
.envlist{ margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.envlist li{ position:relative; padding-left:20px; font-size:14.5px; color:var(--body); }
.envlist li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; border:2px solid var(--primary); }
.envlist li b{ color:var(--ink); font-weight:800; }

/* ---- §12 scope boundary: two left-green quote blocks (own form) ---- */
.scope-split{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.scope-split blockquote{ margin:0; border:1px solid var(--surface3); border-left:3px solid var(--faint); border-radius:10px; background:#fff; padding:20px 22px; }
.scope-split .scope-we{ border-left-color:var(--primary); }
.scope-tag{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.scope-tag.is-us{ color:var(--primary); }
.scope-split p{ margin:0; font-size:14.5px; color:var(--body); }
@media(max-width:760px){ .scope-split{ grid-template-columns:1fr; } }

/* ============================================================================
   after-you-sign — trust / terms page (appended, not a new file)
   Fourth hero form: horizontal six-node timeline over a photo + scrim.
   Everything else reuses tokens / .eb / .split / .diag / table.spec / .dark /
   .band / .htl / .blist / .scope-split / .faq / .seg-mark.
   ============================================================================ */

/* grid/flex children that hold a min-width table / SVG must be allowed to shrink
   below content width (mobile horizontal-scroll guard — build-rules §14). */
.judge-split>*, .warr-split>*{ min-width:0; }

/* ---- §1 hero: horizontal six-node timeline over a photo (fourth skeleton) ---- */
.hero-sign{
  position:relative; background:var(--dark); color:#e9ece9; overflow:hidden;
  padding-block:clamp(40px,6vw,72px) clamp(30px,4vw,50px) !important;
}
.hero-sign .sh-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-sign .sh-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* solid-heavy scrim (max alpha .9) — text sits over the photo, so scrim carries contrast */
.hero-sign .sh-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.86) 0%,rgba(10,10,10,.72) 52%,rgba(10,10,10,.9) 100%); }
.hero-sign .sh-inner{ position:relative; z-index:1; }
.hero-sign h1{ color:#fff; max-width:24ch; font-size:clamp(32px,4.4vw,52px); }
.hero-sign .sh-lead{ color:#b9beb9; font-size:clamp(16px,1.4vw,19px); font-weight:500; max-width:66ch; margin:15px 0 0; line-height:1.6; }
.hero-sign .sh-cta{ display:inline-flex; align-items:center; gap:9px; margin-top:clamp(20px,2.4vw,28px); color:var(--primary-lt); font-weight:800; font-size:15.5px; }
.hero-sign .sh-cta:hover{ text-decoration:none; }
.hero-sign .sh-cta svg{ width:17px; height:17px; flex:0 0 auto; }
/* the timeline track: full-width row of six nodes joined by a rule */
.sh-track{ position:relative; z-index:1; display:flex; margin-top:clamp(28px,3.4vw,46px); padding-top:2px; }
.arc-step{ flex:1 1 0; min-width:0; position:relative; padding:26px 12px 0 0; }
.arc-step::before{ content:""; position:absolute; top:9px; left:9px; right:6px; height:2px;
  background:linear-gradient(to right, var(--primary-lt), rgba(20,159,65,.28)); }
.arc-step:last-child::before{ display:none; }
.arc-dot{ position:absolute; top:0; left:0; width:20px; height:20px; border-radius:50%;
  border:2px solid var(--primary-lt); background:var(--dark); }
.arc-dot::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--primary-lt); }
.arc-lab{ display:block; font-size:12px; color:#a9aea9; line-height:1.4; }
.arc-lab b{ display:block; color:#fff; font-size:13.5px; font-weight:800; letter-spacing:-.01em; margin-bottom:3px; }
@media(max-width:760px){
  .sh-track{ display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }
  .arc-step{ padding:26px 4px 0 0; }
  .arc-step::before{ display:none; }
}
@media(max-width:380px){ .sh-track{ grid-template-columns:1fr; } }

/* ---- §3 acceptance contrast: table vs promise (two quote cards) ---- */
.judge-split{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px; }
.judge{ border:1px solid var(--surface3); border-left:3px solid var(--faint); border-radius:10px; background:#fff; padding:20px 22px; }
.judge.is-table{ border-left-color:var(--primary); }
.judge-tag{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.judge-tag.is-us{ color:var(--primary); }
.judge p{ margin:0; font-size:14.5px; color:var(--body); }
@media(max-width:700px){ .judge-split{ grid-template-columns:1fr; } }

/* ---- §6 training table: indented sub-rows under a block ---- */
table.spec tr.sub th{ font-weight:600; color:var(--muted); padding-left:28px; background:#fff; }
table.spec tr.sub td{ color:var(--body); }

/* ---- §8 warranty vs lifetime repair: two dark cards ---- */
.warr-split{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:6px; }
.warr-card{ border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.03); padding:24px 22px; }
.warr-card.is-free{ border-color:rgba(20,159,65,.5); background:rgba(20,159,65,.06); }
.warr-ico{ width:30px; height:30px; color:var(--primary-lt); margin-bottom:14px; }
.warr-tag{ font-size:14px; font-weight:800; letter-spacing:.02em; color:#fff; margin-bottom:10px; }
.warr-card p{ margin:0; font-size:14.5px; color:#a9aea9; line-height:1.55; }
@media(max-width:760px){ .warr-split{ grid-template-columns:1fr; } }

/* ============================================================================
   laser-scriber-sml-c72 — product page (appended, not a new file)
   Fifth hero skeleton (H5): a single dominant figure (≤0.05%) on the left, the
   headline pressed to its right, and a full-width photo strip below. Direct
   children of the hero section are .hm-top + .hm-media — a fingerprint distinct
   from every built page (design-baseline-v4-gate hero-skeleton check).
   Everything else reuses tokens / .eb / .split / .fitgrid / .diag / table.spec /
   .dark / .seam-grid / .statband / .runlist / .blist / buttons / footer.
   ============================================================================ */

/* grid/flex children that could hold a min-width table / SVG must be allowed to
   shrink below content width (mobile horizontal-scroll guard — build-rules §14). */
.hm-grid>*{ min-width:0; }

/* ---- §1 mono hero: dominant figure left, headline right, photo strip below ---- */
.hero-mono{
  background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.028) 1px, transparent 0);
  background-size:26px 26px; overflow:hidden;
  padding-block:clamp(44px,6vw,82px) 0 !important;
}
.hm-grid{ display:grid; grid-template-columns:minmax(0,42%) minmax(0,58%); gap:clamp(26px,4vw,56px); align-items:center; }
.hm-figure{ padding-right:clamp(18px,2.4vw,36px); border-right:1px solid var(--line); }
.hm-ico{ width:26px; height:26px; color:var(--primary); margin-bottom:14px; }
.hm-num{ font-size:clamp(58px,9vw,124px); font-weight:800; color:var(--primary); letter-spacing:-.04em; line-height:.92; font-variant-numeric:tabular-nums; }
.hm-num-lab{ margin-top:14px; font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); line-height:1.3; ; color:var(--muted); }
.hm-num-lab span{ display:block; margin-top:6px; font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--muted); }
/* ⭐ director_fix 2026-08-26：原 --faint #999 在白底 2.85:1 < AA。该 span 是「A-grade cells · lowest on this range」——**它是 ≤0.05% 成立的前提条件**，去掉买家就不知道这个数在什么条件下成立 ⇒ 按 site.config.md 的判据属**功能性文字**，⛔ 不许用 faint。
   ⚠️ 我第一次改错了规则（命中父级 .hm-num-lab 而非 .hm-num-lab span）——**改 CSS 前先确认命中的是哪一条**，⛔ 别只看类名前缀。 */
.hm-headline h1{ margin:6px 0 0; max-width:20ch; }
.hm-headline .lead{ max-width:56ch; margin-top:15px; }
.hm-sub{ margin-top:14px; font-size:15.5px; color:var(--body); max-width:54ch; }
.hm-sub b{ color:var(--ink); font-weight:800; }
.hm-cta{ margin-top:clamp(20px,2.4vw,28px); }
.hm-media{ position:relative; margin-top:clamp(30px,3.6vw,46px); aspect-ratio:16/9; background:var(--surface2); }
.hm-media img{ width:100%; height:100%; object-fit:cover; }
@media(max-width:820px){
  .hm-grid{ grid-template-columns:1fr; gap:22px; }
  .hm-figure{ border-right:none; border-bottom:1px solid var(--line); padding-right:0; padding-bottom:20px; }
  .hm-num{ font-size:clamp(52px,16vw,88px); }
  .hm-cta .btn{ width:100%; justify-content:center; }
}

/* ============================================================================
   entry-laser-scriber-sml-c20 — product page (appended, not a new file)
   Sixth hero skeleton (H6): proportional-scale compare. A text rail on the left,
   a real machine photo + a to-scale drawing (machine vs person vs doorway) on the
   right. Direct children of the hero section are .hs2-rail + .hs2-scale — a
   fingerprint distinct from every built page (design-baseline-v4-gate hero check).
   Everything else reuses tokens / .eb / .split / .fitgrid / .diag / table.spec /
   .dark / .seam-grid / .statband / .runlist / .blist / buttons / footer.
   ============================================================================ */

/* full-bleed background with centred, max-width content — the two content
   columns sit in tracks 2 & 3, gutters (1 & 4) collapse below --pad.
   min-width:0 on both so the photo / SVG can shrink (build-rules §14). */
.hero-scale{
  display:grid;
  grid-template-columns:
    minmax(var(--pad),1fr)
    minmax(0, calc(var(--maxw) * .44))
    minmax(0, calc(var(--maxw) * .56))
    minmax(var(--pad),1fr);
  align-items:center;
  background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.028) 1px, transparent 0);
  background-size:26px 26px;
  border-bottom:1px solid var(--line);
  padding-block:clamp(34px,5vw,72px);
  overflow:hidden;
}
.hs2-rail{ grid-column:2; min-width:0; }
.hs2-scale{ grid-column:3; min-width:0; padding-left:clamp(24px,4vw,56px); display:flex; flex-direction:column; gap:14px; }
.hs2-rail h1{ margin:8px 0 0; max-width:18ch; font-size:clamp(30px,4vw,48px); }
.hs2-rail .lead{ max-width:52ch; margin-top:14px; }
.hs2-foot{ margin-top:16px; font-size:15px; color:var(--body); font-weight:500; max-width:52ch; line-height:1.55; }
.hs2-foot b{ color:var(--ink); font-weight:800; }
.hs2-cta{ margin-top:clamp(18px,2.2vw,26px); }
.hs2-photo{ position:relative; aspect-ratio:4/3; background:var(--surface2); border:1px solid var(--surface3); overflow:hidden; }
.hs2-photo img{ width:100%; height:100%; object-fit:cover; }
.hs2-badge{ position:absolute; left:12px; bottom:12px; background:var(--dark); color:#fff; font-size:12px; font-weight:800; letter-spacing:.02em; padding:6px 10px; border-radius:2px; }
.hs2-diagram{ background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:12px 14px; }
.hs2-diagram svg{ width:100%; height:auto; display:block; }
@media(max-width:860px){
  .hero-scale{ grid-template-columns:var(--pad) minmax(0,1fr) var(--pad); row-gap:24px; padding-block:clamp(28px,7vw,44px); }
  .hs2-rail{ grid-column:2; }
  .hs2-scale{ grid-column:2; padding-left:0; }
  .hs2-cta .btn{ width:100%; justify-content:center; }
}

/* ============================================================================
   multi-busbar-stringer-sml-s40 — product page (appended, not a new file)
   Eighth hero skeleton (H8): throughput "gears" bar. Copy on top, then two
   gear columns (3–12BB / 13–20BB) with a rated bar each, a single CTA, and a
   full-width machine photo below. Direct children of the hero section are
   .hg-inner + .hg-media — a fingerprint distinct from every built page
   (design-baseline-v4-gate hero check). Everything else reuses tokens / .eb /
   .sec / .split / .fitgrid / .diag / table.spec / .dark / .seam-grid /
   .statband / .runlist / .blist / .floorrow / buttons / footer.
   min-width:0 throughout so nothing forces a desktop h-scroll (build-rules §14).
   ============================================================================ */
.hero-gears{
  background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.028) 1px, transparent 0);
  background-size:26px 26px;
  overflow:hidden;
  padding-block:clamp(40px,5.5vw,78px) 0;
}
.hero-gears .hg-inner{ display:block; }
.hg-head{ max-width:78ch; }
.hg-head h1{ margin:6px 0 0; max-width:24ch; }
.hg-head .lead{ max-width:62ch; margin-top:15px; }
/* two rated "gears" side by side; a hairline divider between them */
.hg-gears{
  margin-top:clamp(24px,3vw,38px);
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.hg-gear{ min-width:0; background:var(--bg); padding:clamp(18px,2.2vw,26px) clamp(16px,2vw,30px); }
.hg-gtop{ display:flex; align-items:center; gap:10px; }
.hg-ico{ width:22px; height:22px; color:var(--primary); flex:0 0 auto; }
.hg-bb{ font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
/* the bar: a fixed track with a filled column that reads as the "gear" height */
/* ⭐ director_fix 2026-08-27：原先 .is-hi 让 3–12BB 档用大号绿字、13–20BB 档用小号灰字 ——
   🚨 那把**两种平等的工作模式**画成了「主选 vs 次选」。跑 13–20BB 的买家（而高栅数正是行业走向）
   看到自己那档是灰的小字，读到的是「你是次要情况」。⇒ 两档**等重**。 */
.hg-num{ margin-top:10px; font-size:clamp(30px,3.6vw,46px); font-weight:800; color:var(--primary); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
/* ⭐ 两档共用同一条 —— 平等的两种工作模式，⛔ 不分主次 */
.hg-unit{ margin-top:9px; font-size:12.5px; font-weight:700; letter-spacing:.05em; color:var(--muted); line-height:1.35; }
.hg-cta{ margin-top:clamp(20px,2.4vw,28px); }
.hg-media{ position:relative; margin-top:clamp(30px,3.6vw,46px); aspect-ratio:16/9; background:var(--surface2); }
.hg-media img{ width:100%; height:100%; object-fit:cover; }
.hg-tag{
  position:absolute; left:14px; bottom:14px;
  background:#0A0A0A; color:#fff; font-size:13px; font-weight:600;
  padding:8px 13px; border-radius:3px; backdrop-filter:blur(2px);
}
.hg-tag b{ color:var(--primary-lt); font-weight:800; }
@media(max-width:640px){
  .hg-gears{ grid-template-columns:1fr; }
  .hg-cta .btn{ width:100%; justify-content:center; }
}

/* ============================================================================
   entry-stringer-sml-s15 — product page (appended, not a new file)
   Ninth hero skeleton (H9): a three-tier staircase (entry / standard / high-speed)
   with THIS machine — the entry tier — highlighted, then a single CTA and a
   full-width machine photo below. Direct children of the hero section are
   .hst-inner + .hst-media — a fingerprint distinct from every built page
   (design-baseline-v4-gate hero check). Everything else reuses tokens / .eb /
   .sec / .split / .fitgrid / .diag / table.spec / .dark / .seam-grid /
   .statband / .runlist / .blist / .floorrow / buttons / footer.
   🚨 Tier design rule (dispatch): three TIERS, not three ranks. The entry step is
   highlighted (green, "you are here"); the taller two are neutral outline, ⛔ never
   glorified. All three tier numbers share ONE size — the 7th page painted equal
   modes as big-green vs small-grey; the only distinction here is which tier is active.
   min-width:0 throughout so nothing forces a desktop h-scroll (build-rules §14).
   ============================================================================ */
.hero-steps{
  background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.028) 1px, transparent 0);
  background-size:26px 26px;
  overflow:hidden;
  padding-block:clamp(40px,5.5vw,78px) 0;
}
.hero-steps .hst-inner{ display:block; }
.hst-head{ max-width:78ch; }
.hst-head h1{ margin:6px 0 0; max-width:26ch; }
.hst-head .lead{ max-width:62ch; margin-top:15px; }
/* the staircase: three tiers side by side, each a step riser rising to the right */
.hst-stair{
  margin-top:clamp(24px,3vw,38px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.hst-stair>*{ min-width:0; }
.tier{ background:var(--bg); padding:clamp(18px,2.2vw,24px) clamp(15px,1.9vw,26px) 0; display:flex; flex-direction:column; }
/* the active (entry) tier — highlighted, but NOT enlarged: distinction is "you are here", not "better".
   🚨 contrast: the highlight is the green LEFT BORDER + green riser + green icon + green text on WHITE
   (5.45:1). ⛔ NO green background tint — green text on a green tint fell to 3.88:1 < AA (contrast-gate). */
.tier.is-here{ background:var(--bg); box-shadow:inset 3px 0 0 var(--primary); }
.tier-top{ display:flex; align-items:center; gap:9px; }
.tier-ico{ width:20px; height:20px; flex:0 0 auto; color:var(--muted); }
.tier.is-here .tier-ico{ color:var(--primary); }
.tier-name{ font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); line-height:1.3; }
.tier.is-here .tier-name{ color:var(--primary); }
/* all three numbers share one size + weight — equal tiers, ⛔ no primary/secondary hierarchy */
.tier-num{ margin-top:11px; font-size:clamp(24px,2.8vw,34px); font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.tier.is-here .tier-num{ color:var(--primary); }
.tier-unit{ margin-top:8px; font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--muted); line-height:1.35; }
.tier-unit b{ color:var(--ink); font-weight:800; }
/* the riser bar: heights encode the real throughput ordering (1100 < 3400 < 4800),
   the numbers above carry the quantitative truth. Active riser green, others neutral. */
.tier-riser{ margin-top:16px; align-self:stretch; border-radius:4px 4px 0 0; background:var(--surface3); }
.tier-riser.r1{ height:34px; }
.tier-riser.r2{ height:64px; }
.tier-riser.r3{ height:92px; }
.tier.is-here .tier-riser{ background:var(--primary); }
.hst-note{ margin-top:clamp(18px,2vw,26px); font-size:15px; color:var(--body); font-weight:500; max-width:70ch; }
.hst-note b{ color:var(--ink); font-weight:800; }
.hst-cta{ margin-top:clamp(18px,2.2vw,26px); }
.hst-media{ position:relative; margin-top:clamp(30px,3.6vw,46px); aspect-ratio:16/9; background:var(--surface2); }
.hst-media img{ width:100%; height:100%; object-fit:cover; }
.hst-tag{
  position:absolute; left:14px; bottom:14px;
  background:#0A0A0A; color:#fff; font-size:13px; font-weight:600;
  padding:8px 13px; border-radius:3px;
}
.hst-tag b{ color:var(--primary-lt); font-weight:800; }
@media(max-width:640px){
  .hst-stair{ grid-template-columns:1fr; }
  /* stacked on mobile: risers would misread as a bar chart, so hide them and let the
     labelled numbers carry the tiers */
  .tier-riser{ display:none; }
  .tier{ padding-bottom:18px; }
  .hst-cta .btn{ width:100%; justify-content:center; }
}

/* ============================================================================
   robotic-layup-sml-a6 — product page (appended, not a new file)
   Seventh hero skeleton (H7): a TEMPO RING. A 6-second sweep ring (one sweep =
   one string, the ≥6 s/string cadence) with the H1 inside it, then a caption,
   a single CTA, and a full-width machine photo below. Direct children of the
   hero section are .a6-ring-stage + .a6-hero-media — a fingerprint distinct
   from every built page (design-baseline-v4-gate hero check).
   🚨 The ring is a TIME metaphor, NOT a data bar (the 7th page fell into
   charting magnitude on an unlabeled scale): one sweep = one string interval,
   labelled as such; it encodes no quantity and implies no range. Under
   prefers-reduced-motion the sweep is a static arc.
   Everything else reuses tokens / .eb / .sec / .split / .fitgrid / .diag /
   table.spec / .dark / .seam-grid / .statband / .runlist / .blist / .floorrow /
   buttons / footer. min-width:0 throughout (build-rules §14).
   ============================================================================ */
.a6-hero{
  background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.028) 1px, transparent 0);
  background-size:26px 26px;
  overflow:hidden;
  padding-block:clamp(38px,5vw,68px) 0;
}
.a6-ring-stage{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.a6-ring-stage>*{ min-width:0; }
/* the ring: a large circle with a sweeping arc; H1 lives inside it */
.a6-ring{
  position:relative;
  width:clamp(300px, 56vw, 468px);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  margin:2px auto 0;
}
.a6-ring-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.a6-ring-track{ fill:none; stroke:var(--surface3); stroke-width:5; }
.a6-ring-sweep{
  fill:none; stroke:var(--primary); stroke-width:5; stroke-linecap:round;
  transform-box:fill-box; transform-origin:center;
  animation:a6sweep 6s linear infinite;
}
.a6-ring-start{ fill:var(--primary); }
@keyframes a6sweep{ from{ transform:rotate(-90deg); } to{ transform:rotate(270deg); } }
.a6-ring-core{
  position:relative; z-index:1;
  width:66%; max-width:288px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.a6-ring-core .eb{ justify-content:center; margin-bottom:12px; }
.a6-ring-core h1{ margin:0; font-size:clamp(20px,4.4vw,27px); line-height:1.14; max-width:15ch; }
.a6-cad{ margin:14px 0 0; font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--muted); }
.a6-cad b{ font-size:19px; font-weight:800; color:var(--primary); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.a6-ring-cap{
  display:block; margin:clamp(16px,2vw,24px) auto 0; max-width:52ch; text-align:center;
  font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
}
.a6-ring-cap .a6-cap-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; border:2px solid var(--primary); vertical-align:middle; margin-right:9px; }
.a6-lead{ margin:16px auto 0; max-width:64ch; text-align:center; }
.a6-lead b{ color:var(--ink); font-weight:800; }
.a6-cta{ margin-top:clamp(20px,2.4vw,28px); }
.a6-hero-media{
  position:relative; margin-top:clamp(30px,3.6vw,46px);
  aspect-ratio:16/9; background:var(--surface2);
}
.a6-hero-media img{ width:100%; height:100%; object-fit:cover; }
.a6-hero-tag{
  position:absolute; left:14px; bottom:14px;
  background:#0A0A0A; color:#fff; font-size:13px; font-weight:600;
  padding:8px 13px; border-radius:3px;
}
.a6-hero-tag b{ color:var(--primary-lt); font-weight:800; }
@media(prefers-reduced-motion:reduce){
  /* ⭐ director_fix 2026-08-27：原先只 `animation:none` ⇒ 22% 长的彗尾弧**冻在起点**，
     静态下读起来是「一个停在 22% 的进度环」—— 而 22% **不代表任何东西**（量程未标）。
     🚨 这正是本站禁的那条：⛔ 不许暗示未标注的量程（第 7 页柱状图同病）。
     ⭐ 关动画时应显示**终态** = 转完一圈 ⇒ 整环填满，与图注
     「ONE SWEEP OF THE RING = ONE STRING LAID」一致。 */
  .a6-ring-sweep{ animation:none; transform:rotate(-90deg); stroke-dasharray:100 0; }
}
@media(max-width:600px){
  .a6-ring{ width:min(84vw,330px); }
  .a6-ring-core{ width:72%; }
  .a6-cta .btn{ width:100%; justify-content:center; }
}

/* §5 docking-height deep-dive + §8 CCD diagram share the diag-stack column,
   already min-width:0 above. §11 supply diagram reuses .diag. Nothing new. */

/* ============================================================================
   tabber-stringer-machine — family / selection page (appended, not a new file)
   Tenth hero skeleton (H10): a three-column triptych — the three stringers set
   side by side at EQUAL weight (⛔ none highlighted; the family page's job is to
   compare, not to sell the biggest). Direct children of the hero section are
   .tri-head + .tri-cols + .tri-note + .tri-cta + .tri-media — a fingerprint
   distinct from every built page (design-baseline-v4-gate hero check).
   Everything else reuses tokens / .eb / .sec / .nav-rail / table.spec / .dark /
   .band / .statband / .card-grid / .warn / .htl / .blist / .floorrow / buttons.
   🚨 Equal-weight rule (dispatch): all three tri-num share ONE size, weight and
   colour; the ONLY thing that differs column to column is the route word and the
   number itself. The 7th page painted equal modes big-green vs small-grey — ⛔ not
   here. min-width:0 throughout so nothing forces a desktop h-scroll (build-rules §14).
   ============================================================================ */
.hero-tri{
  background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.028) 1px, transparent 0);
  background-size:26px 26px;
  overflow:hidden;
  padding-block:clamp(40px,5.5vw,78px) 0;
}
.hero-tri .tri-head{ max-width:80ch; }
.hero-tri .tri-head h1{ margin:6px 0 0; max-width:26ch; }
.hero-tri .tri-head .lead{ max-width:66ch; margin-top:15px; }
/* three equal columns, hairline-divided; ⛔ no is-here / highlight class exists here */
.tri-cols{
  margin-top:clamp(24px,3vw,38px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.tri-cols>*{ min-width:0; }
.tri-col{ background:var(--bg); padding:clamp(18px,2.2vw,26px) clamp(15px,1.9vw,26px); display:flex; flex-direction:column; }
.tri-ico{ width:22px; height:22px; color:var(--primary); margin-bottom:12px; }
.tri-route{ font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.tri-name{ margin-top:6px; font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
/* all three numbers: one size / weight / colour — equal tiers, ⛔ no primary/secondary hierarchy */
.tri-num{ margin-top:12px; font-size:clamp(24px,2.6vw,33px); font-weight:800; color:var(--primary); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.tri-numlab{ margin-top:8px; font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--muted); line-height:1.35; }
.tri-say{ margin:14px 0 16px; font-size:14px; color:var(--body); }
.tri-col .micro{ margin-top:auto; font-weight:700; font-size:14px; color:var(--primary); display:inline-flex; align-items:center; gap:6px; }
.tri-col .micro svg{ width:15px; height:15px; }
.tri-note{ margin-top:clamp(18px,2vw,26px); font-size:15px; color:var(--body); font-weight:500; max-width:74ch; }
.tri-note b{ color:var(--ink); font-weight:800; }
.tri-cta{ margin-top:clamp(18px,2.2vw,26px); }
.tri-media{ position:relative; margin-top:clamp(30px,3.6vw,46px); aspect-ratio:16/9; background:var(--surface2); }
.tri-media img{ width:100%; height:100%; object-fit:cover; }
.tri-tag{
  position:absolute; left:14px; bottom:14px;
  background:#0A0A0A; color:#fff; font-size:13px; font-weight:600;
  padding:8px 13px; border-radius:3px;
}
.tri-tag b{ color:var(--primary-lt); font-weight:800; }
@media(max-width:760px){
  .tri-cols{ grid-template-columns:1fr; }
  .tri-cta .btn{ width:100%; justify-content:center; }
}

/* ---- §8 two-up risk cards (reuses .warn callout, laid two across) ---- */
.riskgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.riskgrid>*{ min-width:0; }
.riskgrid .warn{ margin-bottom:0; }
.riskgrid .warn p{ margin-top:8px; }
@media(max-width:760px){ .riskgrid{ grid-template-columns:1fr; } }

/* ============================================================================
   solar-cell-laser-scribing-machine — family / selection page (appended)
   Eleventh hero skeleton (H11): a two-panel DUO — industry mechanical cleaving
   set beside the family's laser scribing, at EQUAL, neutral weight (⛔ not
   painted good-vs-bad; both panels share styling, both icons green). Direct
   children of the hero section are .cl-inner + .cl-media — a fingerprint
   distinct from every built page (design-baseline-v4-gate hero check).
   🚨 The left panel is the industry's OLD move, NOT our SML-C20 (C20 is a
   micro-loss laser process, not a mechanical snap). Both panels neutral.
   Everything else reuses tokens / .eb / .sec / .nav-rail / table.spec / .dark /
   .band / .statband / .card-grid / .warn / .htl / .blist / .floorrow / buttons.
   min-width:0 throughout so nothing forces a desktop h-scroll (build-rules §14).
   ============================================================================ */
.hero-cleave{
  background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.028) 1px, transparent 0);
  background-size:26px 26px;
  overflow:hidden;
  padding-block:clamp(40px,5.5vw,78px) 0;
}
.cl-inner{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.hero-cleave .cl-head{ max-width:80ch; }
.hero-cleave .cl-head h1{ margin:6px 0 0; max-width:24ch; }
.hero-cleave .cl-head .lead{ max-width:66ch; margin-top:15px; }
/* two equal, neutral panels + a hairline divider between; ⛔ no highlight class */
.cl-duo{
  margin-top:clamp(24px,3vw,38px);
  display:flex; align-items:stretch;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg);
}
.cl-duo>.cl-side{
  flex:1 1 0; min-width:0;
  padding:clamp(20px,2.4vw,30px) clamp(18px,2vw,30px);
  display:flex; flex-direction:column;
}
.cl-div{ flex:0 0 1px; background:var(--line); align-self:stretch; }
/* both icons green — equal weight, neither panel is "the bad one" */
.cl-ico{ width:26px; height:26px; color:var(--primary); margin-bottom:14px; }
.cl-tag{ font-size:18px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.cl-sub{ margin-top:4px; font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.cl-side p{ margin:14px 0 0; font-size:14.5px; color:var(--body); }
.cl-note{ margin-top:clamp(18px,2vw,26px); font-size:15px; color:var(--body); font-weight:500; max-width:78ch; }
.cl-note b{ color:var(--ink); font-weight:800; }
.cl-cta{ margin-top:clamp(18px,2.2vw,26px); }
.cl-media{ position:relative; margin-top:clamp(30px,3.6vw,46px); aspect-ratio:16/9; background:var(--surface2); }
.cl-media img{ width:100%; height:100%; object-fit:cover; }
.cl-mediatag{
  position:absolute; left:14px; bottom:14px;
  background:#0A0A0A; color:#fff; font-size:13px; font-weight:600;
  padding:8px 13px; border-radius:3px;
}
.cl-mediatag b{ color:var(--primary-lt); font-weight:800; }
@media(max-width:760px){
  .cl-duo{ flex-direction:column; }
  .cl-div{ flex:0 0 1px; width:auto; height:1px; align-self:stretch; }
  .cl-cta .btn{ width:100%; justify-content:center; }
}

/* ────────────────────────────────────────────────────────────────────────
   Twelfth hero skeleton (H12): a DUAL-TRACK FORK. A slim full-width photo
   band on top, then a Y-fork diagram where one shared spine splits into two
   equal-weight branches (BC / TOPCon·PERC) at the two stations that change,
   and merges back. Direct children of the hero section are .fk-media + .fk-inner
   — a fingerprint distinct from every built page (design-baseline-v4-gate hero
   check). Additive only: unique .fk-* / .hero-fork class names, no positional
   selectors, min-width:0 throughout — touches no other page (build-rules §15).
   🚨 Equal-weight rule (brief §5): both branches share ONE stroke width and ONE
   neutral colour; only the two change-point markers are green, applied to BOTH
   branches identically — colour never implies one route is better.
   Everything else reuses tokens / .eb / .btn / table.spec / .dark / .band /
   .statband / .card-grid / .warn / .htl / .blist / .floorrow / footer. */
.hero-fork{
  position:relative; background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.028) 1px, transparent 0);
  background-size:26px 26px; overflow:hidden;
  padding-bottom:clamp(34px,4.4vw,58px);
}
.fk-media{ position:relative; width:100%; aspect-ratio:24/7; background:var(--surface2); overflow:hidden; }
.fk-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.fk-mediatag{
  position:absolute; left:14px; bottom:14px;
  background:#0A0A0A; color:#fff; font-size:13px; font-weight:600;
  padding:8px 13px; border-radius:3px;
}
.fk-mediatag b{ color:var(--primary-lt); font-weight:800; }
.fk-inner{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.fk-inner>*{ min-width:0; }
.fk-head{ max-width:80ch; margin-top:clamp(26px,3.4vw,44px); }
.fk-head h1{ margin:6px 0 0; max-width:26ch; }
.fk-head .lead{ max-width:66ch; margin-top:15px; }
.fk-diagram{
  margin-top:clamp(24px,3vw,38px); min-width:0;
  border:1px solid var(--line); border-radius:12px; background:var(--bg);
  padding:clamp(16px,2.2vw,28px);
}
.fk-diagram>svg{ width:100%; height:auto; display:block; }
.fk-legend{ display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:16px; }
.fk-legend span{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; color:var(--muted); }
.fk-legend i{ width:24px; border-top:2.4px solid #4b524b; display:inline-block; }
/* 🚨 director_fix 2026-08-27：图例原画的是**绿虚线**，而分叉图里 stroke-dasharray 出现 **0 次** ——
   图上真正标出分叉站点的是**绿色空心圆环**。图例符号必须指向图上真有的东西。
   ⛔ 反向修法（把支线改成虚线）不可取：那会破坏「两条支线等重」这条硬要求。 */
.fk-legend .is-fork i{ width:11px; height:11px; border:2.4px solid var(--primary); border-radius:50%; background:#fff; }
.fk-note{ margin-top:clamp(18px,2vw,26px); font-size:15px; color:var(--body); font-weight:500; max-width:80ch; }
.fk-note b{ color:var(--ink); font-weight:800; }
.fk-cta{ margin-top:clamp(18px,2.2vw,26px); }
@media(max-width:760px){
  .fk-media{ aspect-ratio:16/9; }
  .fk-cta .btn{ width:100%; justify-content:center; }
}

/* route-card machine link list (§9 of bc-vs-topcon-perc-module-line) — additive,
   unique class; ul reset already removes bullets, this only adds row spacing. */
.foot-inline{ display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.foot-inline li .micro{ font-weight:700; font-size:14px; color:var(--primary); display:inline-flex; align-items:center; gap:6px; }
.foot-inline li .micro svg{ width:15px; height:15px; flex:0 0 auto; }

/* ════════════════════════════════════════════════════════════════════════
   PAGE: solar-module-production-line (P11 · whole-line hub)
   Fourteenth hero skeleton (H14): a SIX-STATION CHAIN SPANNING FULL WIDTH.
   A slim real photo band on top, then the full-width six-station chain as the
   hero's subject, then the copy BELOW the chain (⛔ not left-text/right-image).
   Direct children of the hero section are .lnh-media + .lnh-chain + .lnh-copy —
   a fingerprint distinct from every built page (design-baseline-v4-gate hero
   check). Additive only: unique .lnh-* / .hero-chain / .lnmerge / .lnhand class
   names, no positional selectors, min-width:0 throughout — touches no other page
   (build-rules §15). Everything else reuses tokens / .eb / .sec / .pstrip /
   .flow-svg / .statband / .card-grid / .gallery / .blist / .htl / .dark / .band
   / buttons / footer.
   ════════════════════════════════════════════════════════════════════════ */
.hero-chain{
  position:relative; background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.028) 1px, transparent 0);
  background-size:26px 26px; overflow:hidden;
  padding-bottom:clamp(30px,4vw,54px);
}
.lnh-media{ position:relative; width:100%; aspect-ratio:32/9; background:var(--surface2); overflow:hidden; }
.lnh-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.lnh-mediatag{
  position:absolute; left:14px; bottom:14px; background:#0A0A0A; color:#fff;
  font-size:13px; font-weight:600; padding:8px 13px; border-radius:3px;
}
.lnh-mediatag b{ color:var(--primary-lt); font-weight:800; }
.lnh-chain{ max-width:var(--maxw); margin:clamp(22px,3vw,40px) auto 0; padding-inline:var(--pad); min-width:0; }
.lnh-chainbox{
  border:1px solid var(--line); border-radius:12px; background:var(--bg);
  padding:clamp(14px,2vw,24px) clamp(10px,1.6vw,18px);
  overflow-x:auto; -webkit-overflow-scrolling:touch; min-width:0;
}
.lnh-chainbox svg{ display:block; width:100%; min-width:660px; height:auto; }
.lnh-chainlegend{ display:flex; flex-wrap:wrap; gap:9px 22px; margin-top:14px; padding-inline:4px; }
.lnh-chainlegend span{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; color:var(--muted); }
.lnh-chainlegend i{ width:22px; border-top:2.4px solid #4b524b; display:inline-block; }
.lnh-chainlegend .is-merge i{ width:11px; height:11px; border:2.4px solid var(--primary); border-radius:3px; background:#fff; }
.lnh-copy{ max-width:var(--maxw); margin:clamp(22px,3vw,36px) auto 0; padding-inline:var(--pad); }
.lnh-copy h1{ margin:6px 0 0; max-width:24ch; }
.lnh-copy .lead{ max-width:70ch; margin-top:15px; }
.lnh-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px 30px; margin-top:clamp(18px,2.2vw,26px); max-width:88ch; }
.lnh-list>div{ min-width:0; }
.lnh-list h4{ font-size:15.5px; margin:0 0 5px; display:flex; align-items:center; gap:9px; }
.lnh-list h4 svg{ width:19px; height:19px; color:var(--primary); flex:0 0 auto; }
.lnh-list p{ margin:0; font-size:14.5px; color:var(--body); }
.lnh-cta{ margin-top:clamp(20px,2.4vw,28px); }
@media(max-width:760px){
  .lnh-media{ aspect-ratio:16/9; }
  .lnh-list{ grid-template-columns:1fr; gap:16px; }
  .lnh-cta .btn{ width:100%; justify-content:center; }
}

/* §4 handoff rail — the five seams, as a horizontal chain with interface tags on
   the arrows (reuses .pstrip scroll container; only the tag styling is new). */
.lnhand-tag{ font-size:10px; fill:#0F7A32; font-weight:700; }

/* §5 merge comparison — two equal-weight rows in one scaling viewBox SVG:
   six discrete station boxes vs the same run with the front three folded into
   one machine. Both rows share ONE stroke width and ONE neutral colour; only the
   merge bracket is green. ⛔ No row is drawn heavier — the merged front is not
   "better", it is fewer machines. (brief §0: L150 stated from its name only.) */
.lnmerge{ margin-top:clamp(20px,2.6vw,32px); border:1px solid var(--surface3); border-radius:12px; background:#fff; padding:clamp(18px,2.4vw,28px); min-width:0; }
.lnmerge svg{ display:block; width:100%; height:auto; min-width:0; }
.lnmerge-foot{ margin-top:16px; font-size:13.5px; color:var(--muted); max-width:82ch; }
.lnmerge-foot b{ color:var(--ink); font-weight:700; }

/* §8 statement block — a plain discipline statement, not a callout card. */
.lnsay{ max-width:80ch; }
.lnsay p{ font-size:clamp(16px,1.6vw,18px); color:var(--body); line-height:1.6; }
.lnsay p strong{ color:var(--ink); font-weight:800; }
.lnsay .lnsay-cta{ margin-top:22px; }

/* ════════════════════════════════════════════════════════════════════════
   PAGE: about (P18 · site page · ⭐ short version)
   Seventeenth hero skeleton (H17): a BOUNDARY BAND. A real photo underlays the
   whole hero behind a heavy scrim; the copy sits left; and below it the full
   PV workflow runs as a chain whose SIX in-scope stations are live and whose
   two ends (wafer/cell making · lamination/framing) are greyed OUT past a
   cut-off line at each edge — the page's subject is *where the boundary is*.
   Direct children of the hero section are .abh-photo + .abh-inner + .abh-band —
   a fingerprint distinct from every built page (design-baseline-v4-gate hero
   check). Additive only: unique .abh-* / .ab-* / .hero-boundary class names, no
   positional selectors, min-width:0 throughout — touches no other page
   (build-rules §15). Reduced-motion shows the terminal state (chain fully drawn).
   Everything else reuses tokens / .eb / .sec / .fitgrid / .flow-wrap / .flow-svg
   / .split / .diag / .card-grid / .nav-rail / .band / .dark / buttons / footer.
   ════════════════════════════════════════════════════════════════════════ */
.hero-boundary{
  position:relative; background:var(--dark); color:#e9ece9; overflow:hidden;
  padding-block:clamp(40px,6vw,72px) clamp(28px,3.6vw,46px) !important;
}
.abh-photo{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.abh-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* heavy scrim (max alpha .9) — copy sits over the photo, so the scrim carries contrast */
.abh-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.74) 46%,rgba(10,10,10,.9) 100%); }
.abh-inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.abh-inner>*{ min-width:0; }
.hero-boundary h1{ color:#fff; max-width:22ch; font-size:clamp(32px,4.4vw,52px); }
.abh-lead{ color:#b9beb9; font-size:clamp(16px,1.4vw,19px); font-weight:500; max-width:60ch; margin:15px 0 0; line-height:1.6; }
.abh-cta{ display:inline-flex; align-items:center; gap:9px; margin-top:clamp(20px,2.4vw,28px); color:var(--primary-lt); font-weight:800; font-size:15.5px; }
.abh-cta:hover{ text-decoration:none; }
.abh-cta svg{ width:17px; height:17px; flex:0 0 auto; }
/* the boundary chain: a full-width workflow with two cut-off lines and greyed ends */
.abh-band{ position:relative; z-index:1; max-width:var(--maxw); margin:clamp(26px,3.2vw,42px) auto 0; padding-inline:var(--pad); min-width:0; }
.abh-bandbox{
  border:1px solid rgba(255,255,255,.14); border-radius:12px;
  background:rgba(10,10,10,.55); padding:clamp(14px,2vw,22px) clamp(12px,1.8vw,20px); min-width:0;
}
.abh-bandbox>svg{ display:block; width:100%; height:auto; }
.ab-chain .ab-track{ stroke:var(--primary-lt); stroke-width:2.4; fill:none; }
.ab-chain .ab-node{ fill:var(--dark); stroke:var(--primary-lt); stroke-width:2.4; }
.ab-chain .ab-node-lab{ fill:#fff; font-weight:800; font-size:13px; letter-spacing:-.01em; }
.ab-chain .ab-node-num{ fill:var(--primary-lt); font-weight:800; font-size:12px; }
.ab-chain .ab-cut{ stroke:var(--primary-lt); stroke-width:2; stroke-dasharray:5 4; }
.ab-chain .ab-cut-lab{ fill:var(--primary-lt); font-weight:800; font-size:11px; letter-spacing:.08em; }
.ab-chain .ab-out{ stroke:#6f766f; stroke-width:2; stroke-dasharray:4 4; fill:none; }
.ab-chain .ab-out-lab{ fill:#9aa09a; font-weight:700; font-size:12px; }
.js .ab-chain .ab-draw{ stroke-dasharray:4 3; }
.abh-legend{ display:flex; flex-wrap:wrap; gap:9px 22px; margin-top:14px; padding-inline:4px; }
.abh-legend span{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; color:#a9aea9; }
.abh-legend i{ width:22px; border-top:2.4px solid var(--primary-lt); display:inline-block; }
.abh-legend .is-out i{ border-top:2px dashed #6f766f; }
@media(max-width:760px){ .hero-boundary{ padding-bottom:clamp(20px,5vw,32px)!important; } }

/* §2 six-station strip: reuses .flow-wrap / .flow-svg / .flow-desc / .boundary — nothing new. */

/* §4 two-figure dark facts (only 6 and 3 exist for this page) — a two-up, not the 3-col statrow. */
.abfacts{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,52px); margin-top:10px; }
.abfacts>*{ min-width:0; }
.abfact .af-ico{ width:30px; height:30px; color:var(--primary-lt); margin-bottom:16px; }
.abfact .af-num{ font-size:clamp(48px,7vw,86px); font-weight:800; color:var(--primary-lt); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.abfact .af-lab{ margin-top:13px; font-size:15px; color:#cdd2cd; font-weight:600; line-height:1.4; max-width:26ch; }
.abfacts + .sb-foot{ margin-top:clamp(26px,3vw,40px); font-size:14.5px; color:#9aa09a; max-width:76ch; }
.abfacts + .sb-foot b{ color:#e6e9e6; font-weight:700; }
@media(max-width:600px){ .abfacts{ grid-template-columns:1fr; gap:30px; } }

/* §3 downstream-edge deep-dive diagram column reuses .diag / .diag-stack (already min-width:0). */

/* ══════════════════════════════════════════════════════════════════
   contact.html — the drop-off (eighteenth hero skeleton, unique to this page)
   ⛔ zero phone/whatsapp; only email + address. All selectors ct-/cth- scoped
   so nothing here can reach another page (build-rules §15). Solid darks only.
   ══════════════════════════════════════════════════════════════════ */
.ct-hero{ position:relative; background:var(--dark); color:#e9ece9; overflow:hidden;
  padding-block:clamp(44px,6vw,78px); }
.cth-photo{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.cth-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* heavy scrim (max alpha .9) — copy and the slot panel sit over the photo */
.cth-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.72) 44%,rgba(10,10,10,.92) 100%); }
.cth-inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:clamp(28px,4vw,56px); align-items:center; }
.cth-inner>*{ min-width:0; }
.ct-hero h1{ color:#fff; max-width:16ch; font-size:clamp(32px,4.4vw,52px); }
.cth-lead{ color:#b9beb9; font-size:clamp(16px,1.4vw,19px); font-weight:500; max-width:52ch; margin:15px 0 0; line-height:1.6; }
.cth-cta{ display:inline-flex; align-items:center; gap:9px; margin-top:clamp(20px,2.4vw,28px);
  color:var(--primary-lt); font-weight:800; font-size:15.5px; }
.cth-cta:hover{ text-decoration:none; }
.cth-cta svg{ width:17px; height:17px; flex:0 0 auto; }
/* the drop box: a solid dark panel with four fill-in slots + a 24h receipt stamp */
.cth-slots{ border:1px solid rgba(255,255,255,.16); border-radius:14px; background:#0d0f0d;
  padding:clamp(18px,2.2vw,26px); box-shadow:0 24px 60px rgba(0,0,0,.5); }
.cth-slots-head{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.1); }
.cth-slots-head p{ margin:0; font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#9aa09a; }
.cth-stamp{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; border:2px solid var(--primary-lt); color:var(--primary-lt);
  flex:0 0 auto; line-height:1; transform:rotate(-8deg); }
.cth-stamp b{ font-size:22px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.cth-stamp span{ font-size:8.5px; font-weight:800; letter-spacing:.1em; margin-top:3px; }
.cth-slot{ display:flex; align-items:flex-start; gap:13px; padding:15px 2px; border-bottom:1px dashed rgba(255,255,255,.14); }
.cth-slot:last-child{ border-bottom:0; padding-bottom:4px; }
.cth-slot .cs-no{ flex:0 0 auto; width:26px; height:26px; border-radius:7px; border:2px solid var(--primary-lt);
  color:var(--primary-lt); display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.cth-slot .cs-body{ min-width:0; }
.cth-slot .cs-lab{ font-size:15px; font-weight:800; color:#fff; letter-spacing:-.01em; }
.cth-slot .cs-hint{ font-size:12.5px; color:#8a908a; margin-top:2px; display:block; margin-left:0; }
@media(max-width:820px){ .cth-inner{ grid-template-columns:1fr; } }

/* §4 proof — one figure (24h), solid dark. reuses .dark section; ct-scoped bits only. */
.ct-proof{ display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:clamp(24px,4vw,52px); align-items:center; margin-top:8px; }
.ct-proof>*{ min-width:0; }
.ct-clock{ display:flex; align-items:baseline; gap:6px; }
.ct-clock .cc-num{ font-size:clamp(60px,9vw,108px); font-weight:800; color:var(--primary-lt);
  letter-spacing:-.04em; line-height:.9; font-variant-numeric:tabular-nums; }
.ct-clock .cc-unit{ font-size:clamp(20px,2.4vw,30px); font-weight:800; color:var(--primary-lt); letter-spacing:-.02em; }
.ct-proof .cp-lab{ font-size:15px; color:#cdd2cd; font-weight:600; line-height:1.5; max-width:44ch; }
.ct-proof .cp-lab b{ color:#fff; font-weight:800; }
@media(max-width:640px){ .ct-proof{ grid-template-columns:1fr; gap:20px; } }

/* §5 contact block — email + address only (⛔ no phone). two solid cards. */
.ct-reach{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:6px; }
.ct-reach>*{ min-width:0; }
.ct-card{ border:1px solid var(--surface3); border-radius:12px; background:#fff; padding:24px 24px 22px;
  display:flex; flex-direction:column; gap:4px; }
.ct-card.is-key{ border-color:rgba(15,122,50,.35); box-shadow:inset 3px 0 0 var(--primary); }
.ct-card .cr-ico{ width:26px; height:26px; color:var(--primary); margin-bottom:10px; }
.ct-card h3{ font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800; }
.ct-card .cr-val{ font-size:clamp(17px,1.6vw,20px); font-weight:800; color:var(--ink); letter-spacing:-.01em; word-break:break-word; }
.ct-card .cr-val a{ color:var(--primary); }
.ct-card .cr-sub{ font-size:13.5px; color:var(--body); margin-top:4px; }
@media(max-width:600px){ .ct-reach{ grid-template-columns:1fr; } }

/* §6 after-you-sign hand-off diagram column reuses .split / .diag (min-width:0 already). */

/* §3 the two-reply comparison — ct-scoped double column (⛔ not shared .fitcol) */
.ct-vs{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ct-vs>*{ min-width:0; }
.ct-vscol{ border:1px solid var(--surface3); border-radius:12px; background:#fff; padding:26px 26px 24px;
  display:flex; flex-direction:column; }
.ct-vscol.is-yes{ border-color:rgba(15,122,50,.35); box-shadow:inset 3px 0 0 var(--primary); }
.cv-h{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cv-h svg{ width:24px; height:24px; flex:0 0 auto; }
.ct-vscol.is-yes .cv-h svg{ color:var(--primary); }
.ct-vscol.is-no .cv-h svg{ color:var(--muted); }
.cv-h h3{ font-size:18px; }
.cv-intro{ font-size:14.5px; color:var(--body); font-weight:600; margin:0 0 16px; line-height:1.55; }
.ct-vscol ul{ display:flex; flex-direction:column; gap:13px; margin:0; }
.ct-vscol li{ font-size:14.5px; color:var(--body); line-height:1.5; padding-left:22px; position:relative; }
.ct-vscol li::before{ content:""; position:absolute; left:0; top:6px; width:9px; height:9px; border-radius:50%; }
.ct-vscol.is-yes li::before{ border:2px solid var(--primary); }
.ct-vscol.is-no li::before{ border:2px solid var(--surface3); background:var(--surface2); }
.cv-foot{ margin-top:24px; border:1px solid var(--surface3); border-left:3px solid var(--primary); border-radius:10px;
  background:#fff; padding:22px 24px; }
.cv-foot p{ margin:0; font-size:15px; color:var(--body); line-height:1.65; max-width:88ch; }
@media(max-width:700px){ .ct-vs{ grid-template-columns:1fr; } }

/* §2 four inputs — a 4-up card row (ct-scoped modifier on shared .card-grid) */
.card-grid.ct-four{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .card-grid.ct-four{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .card-grid.ct-four{ grid-template-columns:1fr; } }

/* ── director_fix 2026-08-30 · 手机上两列参数表改为换行，⛔ 不再横向滚动 ──
   实测 390px：table.spec{min-width:680px} 让 Parameter/Value 两列表在 .table-scroll 里横向溢出，
   手机不显示滚动条 ⇒ 值列被裁成「BC, 166–210 mm, half / thir」看着像坏了。
   两列表（.grouped）直接按 38/62 固定列宽换行；多列对比表保留横向滚动。本块保持在文件最末。 */
@media (max-width:600px){
  table.spec.cols-2{ min-width:0; table-layout:fixed; }
  table.spec.cols-2 tbody th[scope="row"]{ width:38%; position:static; }
  table.spec.cols-2 th, table.spec.cols-2 td{ padding:11px 12px; overflow-wrap:anywhere; white-space:normal; }
  table.spec.cols-2 tr.grp th{ width:auto; }
  .table-scroll{ border-radius:10px; }
}

/* ── director_fix 2026-08-30 · 多列表在手机上横滑要有提示 + 更紧凑 ── */
@media (max-width:600px){
  .table-scroll{ position:relative; }
  .table-scroll::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:34px; pointer-events:none;
    background:linear-gradient(to left, rgba(255,255,255,.95), rgba(255,255,255,0)); border-radius:0 10px 10px 0; }
  table.spec:not(.cols-2){ min-width:560px; font-size:13px; }
  table.spec:not(.cols-2) th, table.spec:not(.cols-2) td{ padding:10px 12px; }
}

/* ── director_fix 2026-08-30 · 移动端导航：原来 ≤860px 直接 display:none 把全站导航藏没了 ──
   补汉堡按钮 + 下拉面板；品牌名与 CTA 各自单行。本块保持在文件最末。 */
.nav-toggle{ display:none; }
@media (max-width:860px){
  .site-header .dm-menu{ position:relative; flex-wrap:nowrap; gap:10px; }
  .brand{ white-space:nowrap; font-size:15.5px; flex:0 0 auto; }
  .nav-cta{ white-space:nowrap; font-size:13px; padding:9px 12px; margin-left:auto; }
  .nav-cta svg{ width:14px; height:14px; }
  .nav-toggle{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:42px; height:40px;
    padding:0 9px; margin:0; background:transparent; border:1px solid rgba(255,255,255,.28); border-radius:9px; cursor:pointer; flex:0 0 auto; }
  .nav-toggle .nt-bar{ display:block; height:2px; width:100%; background:#fff; border-radius:2px; transition:transform .2s, opacity .2s; }
  .site-header.menu-open .nav-toggle .nt-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-header.menu-open .nav-toggle .nt-bar:nth-child(2){ opacity:0; }
  .site-header.menu-open .nav-toggle .nt-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-links{ display:none; position:absolute; left:0; right:0; top:100%; margin:0; padding:8px 20px 16px;
    flex-direction:column; gap:0; background:var(--dark); border-top:1px solid rgba(255,255,255,.12); box-shadow:0 14px 30px rgba(0,0,0,.35); }
  .site-header.menu-open .nav-links{ display:flex; }
  .nav-links a{ padding:13px 2px; font-size:16px; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav-links a:last-child{ border-bottom:0; }
  .nav-links a svg{ width:15px; height:15px; }
}
@media (max-width:400px){ .brand{ font-size:14.5px; } .nav-cta{ font-size:12.5px; padding:9px 10px; } }
@media (max-width:860px){
  .site-header .dm-menu{ padding-inline:14px; }
  .brand{ font-size:14.5px; gap:7px; }
  .brand .bmark{ width:22px; height:22px; }
  .nav-cta{ font-size:12.5px; padding:8px 10px; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width:400px){ .nav-cta svg{ display:none; } .nav-cta{ padding:8px 9px; } }
/* 流程图 SVG 在窄屏按容器缩放，⛔ 不许把页面撑宽 */
.flow-svg{ max-width:100%; height:auto; }
@media (max-width:600px){ svg.flow-svg, .flow-wrap svg{ max-width:100%; height:auto; } }
@media (max-width:600px){
  .flow-wrap{ position:relative; }
  .flow-wrap::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:40px; pointer-events:none; background:linear-gradient(to left, var(--bg,#fff), rgba(255,255,255,0)); }
}

/* ── director_fix 2026-08-30 · 卡片网格/runlist 在手机上必须单列（页级 .two/.cols-2 等写在通用规则之后把它盖掉了，实测 165px 窄列）。本块保持在文件最末。 ── */
@media (max-width:600px){
  .card-grid, .card-grid[class*="two"], .card-grid[class*="cols"], section .card-grid, .runlist, section .runlist{ grid-template-columns:minmax(0,1fr) !important; }
}

/* ── director_fix 2026-08-30 · 审图共性修复（solar） ──
   ① .more-link 是 inline-flex，文字折行后箭头悬在右缘 → 改成行内，箭头跟着最后一个词
   ② 内页 *-cta 的 .cta-media 没有 #cta 那套绝对定位，图变成一整块堆在标题上 → 通用为压底图+遮罩
   ③ .thumbrow 三缩略图在手机上三列并排被裁 → 单列
   ④ 大数字折行导致三格基线不齐 → 不折行、字号略收
   ⑤ .sb-foot / .cta-alt 间距与折行 */
.more-link{ display:inline; }
.more-link svg{ display:inline-block; vertical-align:-3px; margin-left:6px; }
section[id$="-cta"]{ position:relative; overflow:hidden; }
section[id$="-cta"] .cta-media{ position:absolute; inset:0; z-index:0; }
section[id$="-cta"] .cta-media img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
section[id$="-cta"] .cta-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--dark) 34%, rgba(10,10,10,.72) 70%, rgba(10,10,10,.5)); }
section[id$="-cta"] > .wrap{ position:relative; z-index:1; }
.statcell .sb-num{ white-space:nowrap; font-size:clamp(32px,3.8vw,54px); }
.statband .sb-foot{ margin-top:clamp(26px,3vw,40px); }
.sb-foot{ margin-top:22px; }
.cta-alt{ display:block; }
@media (max-width:600px){
  .thumbrow{ grid-template-columns:1fr; gap:12px; }
  .thumbrow .card-media{ aspect-ratio:16/9; }
  .pstrip{ position:relative; }
  .pstrip::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:36px; pointer-events:none; background:linear-gradient(to left,#fff,rgba(255,255,255,0)); border-radius:0 12px 12px 0; }
}
/* SVG 示意图里压在线上的标注：加白色描边光晕，线从字后面过 */
svg text.halo, svg .halo text{ paint-order:stroke fill; stroke:#fff; stroke-width:4px; stroke-linejoin:round; }
/* ⑨ 审图零散项：首页 scribing 两卡对齐；after-you-sign inputs 示意图别放到整栏宽 */
#scribing .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
#scribing .split > .diag{ height:100%; box-sizing:border-box; }
#sign-inputs .diag svg{ max-width:560px; display:block; margin:0 auto; }
/* ⑩ s15 hero 三档卡：柱条按底对齐、卡片跟随最高柱条，不再溢出卡底 */
.hst-stair{ align-items:stretch; }
.tier{ justify-content:flex-end; }
.tier .tier-riser{ margin-top:auto; padding-top:0; }
.tier > *:not(.tier-riser){ flex:0 0 auto; }
.tier .tier-unit{ margin-bottom:16px; }
@media (max-width:480px){
  .brand{ font-size:13.5px; gap:6px; }
  .nav-cta{ font-size:12px; padding:8px 9px; letter-spacing:0; flex:0 0 auto; overflow:visible; }
  .nav-cta svg{ display:none; }
  .site-header .dm-menu{ gap:8px; padding-inline:12px; }
  .nav-toggle{ width:38px; height:38px; padding:0 8px; }
}
@media (max-width:400px){
  .site-header .dm-menu{ padding-inline:10px; gap:6px; }
  .brand{ font-size:12.5px; gap:5px; }
  .brand .bmark{ width:20px; height:20px; }
  .nav-cta{ font-size:11.5px; padding:7px 8px; }
  .nav-toggle{ width:36px; height:36px; padding:0 7px; }
}