/* ============================================================================
   assets/pages-worker-3.css — ems-pdu / IDCPDU · 编码 worker-3
   范围：/pdu/ · /pdu/metered/ · /pdu/switched/ · /pdu/per-outlet-monitoring/
         /pdu/vertical/ · /pdu/horizontal/  （6 页，6 个 PDU 能力页）

   ⛔ 全部选择器以 .w3- 前缀命名 —— 防跨包重名（check-css-conflicts.py 按
      「规范化选择器字符串相等」判 FAIL，类名跨文件重复只 WARN）。
   ⛔ CSP（style-src 'self'）：全文无 style="..."、无内联事件、无外链第三方。
      组件参数化一律走类名（列数用 site.css 的 .is-c2/.is-c3/... ，
      本文件不注册任何新的 @property）。
   ⛔ 只复用 design-tokens.css 的 token，**不新建任何 --token 定义**
      （自检第 2 项要求本文件引用的自定义属性全部落在 tokens 表内）。
   ⛔ 长宽比只用契约白名单 3/2 · 2/3 · 1/1。site.css 的 .img-grid__item.is-tall
      用 4/5、.certwall 用 4/5 —— 本文件不复用那两条 tall 变体，避免白名单外比例。
   ⛔ 本文件加载顺序在 design-tokens.css 与 assets/site.css 之后，因此这里对
      既有类名（.hero__grid/.lead/.linkdoc）的覆盖是**预期的局部收窄**，
      不是重复定义同一选择器（判据是选择器字符串相等，这里都是复合选择器）。

   结构总览
     §0  w3-hero        hero 内的文案定位（rail 落负空间一侧，不压主体）
     §1  w3-panel       全出血叠加图文段（feature-split 的 overlay 落地形态）
     §2  w3-split       标准分栏（图在自有列，1/1 满幅）
     §3  w3-note        信息板 / 两列表
     §4  w3-tile-grid   表单式路径板（3 列 × 2 行 = 6 格）
     §5  w3-spec        参数矩阵（0px 直角，数值列 mono）
     §6  w3-icon-grid   图示格架（固定列数，图标 24×24）
     §7  w3-meter-strip 读数条（display 字族的量级）
     §8  w3-support     支持 / 清单表
     §9  w3-ctaband     收口段（同页唯一转化动作）
     §10 窄屏
   ========================================================================= */

/* ============================ §0 · hero 文案定位 =========================
   hero 主体归 site.css 的 .hero（全幅出血 + 双层遮罩 + 顶沿橙条）。
   这里只做三件事：把文案列收窄到负空间一侧、把 rail 放到文案列之下、
   并把 hero 的**总高钉死**。

   ⛔ 为什么必须钉高（check-layout-edges.js 判据①「过大图」）：
      hero 底图是 `position:absolute; inset:0` 的铺底图，它跟随 .hero 的高度。
      .hero 只给了 `min-height: 88svh`，**没有 max-height** —— 一旦文案（H1 三行
      + lead + rail 六行）比 88svh 高，hero 就被内容撑到 1000px 上下，底图跟着
      渲染到 103%~121% 视口高，判 FAIL。实测：/pdu/per-outlet-monitoring/ 在
      1440x900 下 H1 占 402px（4 行 × 89.28px），hero 总高 1093px。
      钉高后内容改为「可收缩」：H1/lead/btn 不压，rail 内部滚动兜底。
   ========================================================================= */
.w3-hero {
  max-height: calc(var(--hero-min) + 80px);   /* 80px = 固定页头让位，与 .hero 的 padding-top 同值 */
}
.w3-hero .hero__inner { display: flex; align-items: flex-end; overflow: hidden; }
.w3-hero .wrap { width: 100%; max-width: 1180px; margin-inline: 0; }
.w3-hero .hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
.w3-hero .hero__split { max-width: 72ch; }
.w3-hero .rail { max-width: 640px; overflow-y: auto; min-height: 0; }

/* 标题与副文各自封顶：hero 是叠加版式，字号要服从「一屏之内」而不是 clamp 上限 */
.w3-hero .h1 { font-size: clamp(44px, 5vw, 88px); }
.w3-hero .lead { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* 镜像：文案落右列（用于 image-strategy layout = text-right-media-left 的页） */
.w3-hero--right .wrap { margin-inline: auto; }
.w3-hero--right .hero__split { margin-left: auto; }
.w3-hero--right .rail { margin-left: auto; }

/* ============================ §1 · 全出血叠加图文段 ======================
   block_type feature-split，display_mode overlay（简报 §4 的块图契约）。
   图铺满整段做叠加层，文案排进影像**留白侧**那一列，另一列留空让主体露出来：
     .w3-panel            图在右 55%（layout text-left-media-right）: 字在左半
     .w3-panel--mirror    图在左 55%（layout text-right-media-left）: 字在右半
   &#9940; 图不是装饰：<img> 用 object-fit: cover 落在自己的 .w3-panel__shot 里，
      排版比 1/1（源图 1024×1024），不是纯 CSS 图形冒充图片位。
   ========================================================================= */
.w3-panel {
  position: relative;
  display: flex; align-items: center;
  min-height: 64svh;
  padding-block: var(--s-2xl);
  overflow: hidden;
  background-color: var(--ink-void);
  border-bottom: 1px solid var(--rule);
}
.w3-panel--flush { min-height: 0; padding-block: 0; }

.w3-panel__shot {
  position: absolute; inset: 0;
  display: flex; align-items: stretch; justify-content: flex-end;
  pointer-events: none;
}
.w3-panel--mirror .w3-panel__shot { justify-content: flex-start; }
.w3-panel__shot img {
  width: 50%; height: 100%; max-height: 560px; margin-block: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover; object-position: 88% 50%;
  filter: saturate(.5) brightness(.82) contrast(1.05);
}
.w3-panel--mirror .w3-panel__shot img { object-position: 12% 50%; }

/* 左侧压字侧的横向遮罩（从左 96% 压到 55% 处放手） */
.w3-panel__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(90deg,
    rgba(var(--scrim-base), .96) 0%,
    rgba(var(--scrim-base), .88) 40%,
    rgba(var(--scrim-base), .10) 62%,
    rgba(var(--scrim-base), 0) 100%);
}
.w3-panel--mirror .w3-panel__scrim {
  background-image: linear-gradient(270deg,
    rgba(var(--scrim-base), .96) 0%,
    rgba(var(--scrim-base), .88) 40%,
    rgba(var(--scrim-base), .10) 62%,
    rgba(var(--scrim-base), 0) 100%);
}

.w3-panel__inner { position: relative; z-index: 2; width: 100%; }
.w3-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: var(--s-xl);
  align-items: center;
}
.w3-panel__copy { max-width: 62ch; }
.w3-panel--mirror .w3-panel__copy { order: 2; }
.w3-panel--mirror .w3-panel__aside { order: 1; }

.w3-panel__title {
  margin-top: var(--s-sm);
  font-size: var(--fs-h3);
  text-shadow: var(--text-shadow-hero);
}
.w3-panel__lead {
  margin: var(--s-md) 0 0;
  max-width: 54ch;
  color: #C6CDD0;
  font-size: var(--fs-body);
  line-height: var(--lh-copy);
  text-shadow: var(--text-shadow-data);
}
.w3-panel__keys {
  margin: var(--s-md) 0 0; padding: 0; list-style: none;
  max-width: 56ch;
  border-top: 1px solid var(--hair-2);
}
.w3-panel__keys li {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s-md);
  padding: 9px 0;
  border-bottom: 1px solid var(--hair-1);
  font-family: var(--f-mono); font-size: var(--fs-data);
  color: var(--fg-4);
  letter-spacing: .04em;
}
.w3-panel__keys b { color: var(--fg-1); font-weight: var(--w-regular); text-align: right; }
.w3-panel .btn-row { margin-top: var(--s-lg); }

/* ============================ §2 · 标准分栏 ==============================
   图在自有列，1/1 满幅（简报 image_contracts 的 section-figure）。
   铁律 1：图片列与文字列强制同高 —— align-items: stretch。
   &#9940; 不用 .img-grid__item.is-tall（4/5）与 .certwall__scan（4/5）：白名单外比例。
   ========================================================================= */
.w3-split { align-items: stretch; }
.w3-split .w3-split__media { display: flex; flex-direction: column; }
.w3-split__plate { flex: 1 1 auto; display: flex; }
.w3-split__plate img {
  width: 100%; align-self: center;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(.5) brightness(.86) contrast(1.04);
}
.w3-split__cap {
  margin-top: var(--s-sm); padding-top: var(--s-xs);
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: .05em; color: var(--fg-label);
}

/* ============================ §3 · 信息板 ================================
   两列 dl / 短列表，暗底 1px 发丝线，不用卡片阴影堆叠。
   ========================================================================= */
.w3-note {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-xl);
  margin-top: var(--s-lg);
}
.w3-note__item {
  padding: var(--s-md) 0;
  border-top: 1px solid var(--rule-strong);
}
.w3-note__item h3 { font-size: var(--fs-h4); margin-top: var(--s-xs); }
.w3-note__item p {
  margin: var(--s-xs) 0 0; max-width: 46ch;
  color: var(--fg-3); font-size: var(--fs-body-s); line-height: var(--lh-copy);
}
.w3-note__item .w3-dl { margin: var(--s-sm) 0 0; }
.w3-dl { margin: 0; padding: 0; }
.w3-dl > div {
  display: flex; justify-content: space-between; gap: var(--s-sm);
  padding: 8px 0; border-bottom: 1px solid var(--hair-1);
}
.w3-dl dt {
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-label);
}
.w3-dl dd {
  margin: 0; font-family: var(--f-mono); font-size: var(--fs-data);
  color: var(--fg-1); text-align: right;
}

/* ============================ §4 · 路径板（固定列数网格）=================
   &#9940; 铁律 3：固定列数、禁 auto-fit；卡片数 = 列数整倍数（这里 3 列 × 2 行 = 6）。
   ========================================================================= */
.w3-tile-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-sm); margin-top: var(--s-lg);
}
.w3-tile {
  display: flex; flex-direction: column;
  padding: var(--s-md);
  background-color: var(--surface-strong);
  border: 1px solid var(--rule);
  box-shadow: var(--e-1);
  transition: var(--transition-ctl);
}
a.w3-tile:hover { border-color: var(--brand); transform: var(--hover-lift); }
.w3-tile__label { display: block; }
.w3-tile h3 { font-size: var(--fs-h4); margin-top: var(--s-xs); }
.w3-tile h3 a { transition: var(--transition-ctl); }
.w3-tile h3 a:hover { color: var(--brand-ink); }
.w3-tile p {
  margin: var(--s-xs) 0 0;
  color: var(--fg-3); font-size: var(--fs-body-s); line-height: var(--lh-body);
}
.w3-tile .w3-dl { margin-top: var(--s-sm); }
.w3-tile__more {
  display: inline-block; margin-top: var(--s-md);
  font-family: var(--f-mono); font-size: var(--fs-data);
  letter-spacing: .06em; color: var(--brand-ink);
  border-bottom: 1px solid var(--rule-strong);
  transition: var(--transition-ctl);
}
.w3-tile__more:hover { border-bottom-color: var(--brand-ink); }

/* ============================ §5 · 参数矩阵 ==============================
   0px 直角 + mono 数值列。桌面端不出现横向滚动条（铁律 4）：
   min-width 只在 <=768px 的媒体查询里给 560px，滚动留在 .table-scroll 内。
   ========================================================================= */
.w3-spec { width: 100%; border-collapse: collapse; margin-top: var(--s-md); min-width: 0; }
.w3-spec caption {
  text-align: left; padding-bottom: var(--s-sm);
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-label);
}
.w3-spec th {
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-label);
  text-align: left; font-weight: var(--w-regular);
  padding: 0 var(--s-sm) 10px 0; border-bottom: 1px solid var(--rule-strong);
}
.w3-spec td {
  padding: 11px var(--s-sm) 11px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg-2); font-size: var(--fs-body-s); vertical-align: top;
}
.w3-spec td:first-child { color: var(--fg-1); font-weight: var(--w-regular); }
.w3-spec td.n {
  font-family: var(--f-mono); font-size: var(--fs-data);
  color: var(--fg-1); white-space: nowrap;
}
.w3-spec .is-quiet td { color: var(--fg-3); }

/* ============================ §6 · 图示格架 ==============================
   &#9940; 固定列数（is-c2..is-c6 由 site.css 的 @property 控制），禁 auto-fit。
      每格一个真实数据点 + 一枚 /assets/icons/*.svg（24×24，见任务书 §3.9）。
   ========================================================================= */
.w3-icon-grid { margin-top: var(--s-lg); }
.w3-icon-cell {
  display: flex; flex-direction: column;
  padding: var(--s-md);
  background-color: var(--surface);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--rule-strong);
  transition: var(--transition-ctl);
}
.w3-icon-cell:hover { border-top-color: var(--brand); transform: var(--hover-lift); }
.w3-icon-cell img { width: 24px; height: 24px; opacity: .92; }
.w3-icon-cell b {
  display: block; margin-top: var(--s-sm);
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-label); font-weight: var(--w-regular);
}
.w3-icon-cell strong {
  display: block; margin-top: 5px;
  font-family: var(--f-mono); font-size: 13px;
  letter-spacing: .02em; color: var(--fg-1); font-weight: var(--w-regular);
}
.w3-icon-cell span {
  display: block; margin-top: 7px;
  color: var(--fg-3); font-size: var(--fs-body-s); line-height: var(--lh-body);
}
.is-light .w3-icon-cell { background-color: var(--paper); border-color: var(--hair-light-soft); }
.is-light .w3-icon-cell b { color: var(--steel-cap); }
.is-light .w3-icon-cell strong { color: var(--on-light); }
.is-light .w3-icon-cell span { color: var(--steel-ink); }

/* ============================ §7 · 读数条 ================================
   量级用 display 字族，单位与标签用 mono；数据点行不是段落（可读性优先）。
   ========================================================================= */
.w3-meter-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0; margin-top: var(--s-lg);
  border-top: 1px solid var(--hair-2);
}
.w3-meter-strip > div {
  padding: var(--s-md) var(--s-sm) var(--s-md) 0;
  border-bottom: 1px solid var(--hair-1);
}
.w3-meter-strip b {
  display: block; font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-label); font-weight: var(--w-regular);
}
.w3-meter-strip strong {
  display: block; margin-top: 6px;
  font-family: var(--f-display); font-weight: var(--w-display);
  font-size: clamp(26px, 2.6vw, 40px); line-height: 1;
  letter-spacing: .5px; color: var(--fg-1);
}
.w3-meter-strip span {
  display: block; margin-top: 7px;
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: .05em; color: var(--fg-4);
}

/* ============================ §8 · 支持表 ================================
   清单型表格（左列 = 项目资料，右列 = 需要你给的量），行式不是段落。
   ========================================================================= */
.w3-support__lead {
  margin-top: var(--s-md); max-width: 60ch;
  color: var(--fg-3); font-size: var(--fs-body-s); line-height: var(--lh-copy);
}

/* ============================ §9 · 收口段 ================================
   cta-band / page-end-form（同页唯一转化动作）。背景图铺满，字压在留白侧。
   ========================================================================= */
.w3-ctaband {
  position: relative;
  overflow: hidden;
  background-color: var(--ink-void);
  border-bottom: 1px solid var(--rule);
}
.w3-ctaband__shot { position: absolute; inset: 0; }
.w3-ctaband__shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  filter: saturate(.35) brightness(.42);
}
.w3-ctaband__scrim {
  position: absolute; inset: 0;
  background-image: linear-gradient(90deg,
    rgba(var(--scrim-base), .94) 0%,
    rgba(var(--scrim-base), .72) 46%,
    rgba(var(--scrim-base), .38) 100%);
}
.w3-ctaband__inner { position: relative; z-index: 2; }
.w3-ctaband__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--gap-split); align-items: center;
}
.w3-ctaband__copy { max-width: 60ch; }
.w3-ctaband__title {
  margin-top: var(--s-sm); font-size: var(--fs-h2);
  text-shadow: var(--text-shadow-hero);
}
.w3-ctaband__lead {
  margin: var(--s-md) 0 0; max-width: 52ch;
  color: #C6CDD0; font-size: var(--fs-body); line-height: var(--lh-copy);
  text-shadow: var(--text-shadow-data);
}
.w3-ctaband .btn-row { margin-top: var(--s-lg); }
.w3-ctaband__list {
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--hair-2);
}
.w3-ctaband__list li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-md);
  padding: 10px 0; border-bottom: 1px solid var(--hair-1);
  font-family: var(--f-mono); font-size: var(--fs-data);
  letter-spacing: .04em; color: var(--fg-4);
}
.w3-ctaband__list b { color: var(--fg-1); font-weight: var(--w-regular); text-align: right; }

/* ============================ §11 · 步骤轨（复用 site.css 的 .process）=====
   站内既有 .process 用 auto-fit，1–3 步会撑成 3 列并留下空列（孤行网格）。
   这里只加一个按步数锁列的变体类，不改 .process 本体。
   ========================================================================= */
.process.w3-process--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.process.w3-process--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .process.w3-process--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .process.w3-process--3, .process.w3-process--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================ §12 · 收口前的清单条 ======================
   CTA 之前的一条 mono 清单（用 dl，不是段落）。
   ========================================================================= */
.w3-close-dl { margin-top: var(--s-md); max-width: 900px; }

/* 本文件专用的紧凑段：把相邻两个信息段之间的留白收一档。
   &#9940; 不是 site.css 的 .sec--flush（那是 padding 0），这里保底 54px。 */
.sec.w3-tight { padding-block: var(--s-xl); }

/* ============================ §14 · 全幅影像带（节奏停顿）================
   一张图单独呼吸的段：影像出血铺满，一句陈述压在左侧负空间，
   段高固定 62svh —— 高于此值会撞上 check-layout-edges 的「过大图」判据。
   ========================================================================= */
.w3-band {
  position: relative; display: flex; align-items: flex-end;
  min-height: 62svh; overflow: hidden;
  background-color: var(--ink-void);
  border-bottom: 1px solid var(--rule);
}
.w3-band__shot { position: absolute; inset: 0; }
.w3-band__shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 55% 50%;
  filter: saturate(.4) brightness(.55) contrast(1.04);
}
.w3-band__scrim {
  position: absolute; inset: 0;
  background-image: linear-gradient(90deg,
    rgba(var(--scrim-base), .95) 0%,
    rgba(var(--scrim-base), .74) 42%,
    rgba(var(--scrim-base), .34) 100%);
}
.w3-band__inner { position: relative; z-index: 2; width: 100%; padding-bottom: var(--s-xl); }
.w3-band__title {
  margin-top: var(--s-sm); max-width: 30ch; font-size: var(--fs-h3);
  text-shadow: var(--text-shadow-hero);
}
.w3-band__lead {
  margin: var(--s-md) 0 0; max-width: 56ch;
  color: #C6CDD0; font-size: var(--fs-body); line-height: var(--lh-copy);
  text-shadow: var(--text-shadow-data);
}
@media (max-width: 768px) {
  .w3-band { min-height: 46svh; }
  .w3-band__title, .w3-band__lead { max-width: none; }
}

/* ============================ §13 · 窄屏防溢出兜底 ======================
   网格子项默认 min-width:auto，不肯缩到内容宽以下 —— 长标签会把版心撑破。
   这是 ems-uqd / worker-2 都实测过的一类横向溢出成因，这里统一兜住。
   ========================================================================= */
.w3-panel__grid > *, .w3-ctaband__grid > *, .w3-tile-grid > *,
.w3-note > *, .w3-icon-grid > *, .w3-meter-strip > *, .process > *,
.w3-band__inner > * { min-width: 0; }
.w3-tile h3 a, .w3-tile__more, .w3-icon-cell strong,
.w3-dl dt, .w3-dl dd, .w3-panel__keys b, .w3-ctaband__list b { overflow-wrap: anywhere; }

/* ============================ §10 · 窄屏 ================================= */
@media (max-width: 1180px) {
  .w3-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w3-meter-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .w3-icon-grid.is-c6, .w3-icon-grid.is-c4 { --ig-cols: 3; }
}
@media (max-width: 1024px) {
  .w3-panel__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-lg); }
  .w3-panel--mirror .w3-panel__copy { order: 0; }
  .w3-panel--mirror .w3-panel__aside { order: 0; }
  /* 单列堆叠时图不再做叠加层：右侧图列收窄成一条，文案落在图外 */
  .w3-panel__shot img { width: 62%; opacity: .5; }
  .w3-panel__scrim {
    background-image: linear-gradient(180deg,
      rgba(var(--scrim-base), .80) 0%,
      rgba(var(--scrim-base), .92) 60%,
      rgba(var(--scrim-base), .96) 100%);
  }
  .w3-panel--mirror .w3-panel__scrim {
    background-image: linear-gradient(180deg,
      rgba(var(--scrim-base), .80) 0%,
      rgba(var(--scrim-base), .92) 60%,
      rgba(var(--scrim-base), .96) 100%);
  }
  .w3-ctaband__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .w3-note { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .w3-split__plate { display: block; }
  .w3-split__plate img { aspect-ratio: 1 / 1; }
}
@media (max-width: 768px) {
  .w3-tile-grid { grid-template-columns: minmax(0, 1fr); }
  .w3-meter-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w3-icon-grid.is-c3, .w3-icon-grid.is-c2 { --ig-cols: 2; }
  /* 铁律 4：表格桌面端无滚动条，min-width 只进移动端 */
  .w3-spec { min-width: 560px; }
  .w3-panel { padding-block: var(--s-xl); min-height: 0; }
  .w3-panel__lead, .w3-panel__keys { max-width: none; }
  .w3-ctaband__list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 560px) {
  .w3-meter-strip { grid-template-columns: minmax(0, 1fr); }
  .w3-panel__keys li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .w3-panel__keys b { text-align: left; }
  .w3-hero .wrap { padding-inline: var(--s-md); }
}