/* ==========================================================================
   首页版式（home-02）
   --------------------------------------------------------------------------
   只按需加载：inc/enqueue.php 里 home 版式才会引这个文件。

   这一版的结构按搜索引擎首页来：**品牌标识在中部**，顶部只留一条功能条，
   搜索区是整页的视觉落点。所以这里最重要的一条约束是纵向节奏——
   顶部功能条 + 搜索区 + 首屏广告位的总高度必须控制在一屏之内，
   广告位必须落在首屏可见范围内（见文件末尾那条断言用的注释）。
   ========================================================================== */

/* ==========================================================================
   1. 首屏：品牌 + 搜索
   --------------------------------------------------------------------------
   底色一律纯白。用户明确说过不要灰白/米白（「视觉光感度差」），
   所以这里不做整块背景色分区，靠留白和一条细线分隔。
   ========================================================================== */

.home-hero {
  padding: var(--sp-9) 0 var(--sp-7);
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.home-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 元素之间用手工间距而不是统一 gap：标题和副标题要贴紧成一组，
     搜索框又要和它们拉开。用一个 gap 值会逼出后面一堆 margin 覆盖。 */
}

/* --- 品牌区 ------------------------------------------------------------- */

.home-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

/* 首屏的 logo 比站头里的大一号：它是这一屏的视觉起点。
   内联 SVG 回退用的是 currentColor，所以这里的颜色会直接生效。 */
.home-logo {
  width: 64px;
  height: 64px;
  color: var(--accent);
}

.home-title {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--ink);
}

.home-lead {
  margin-top: var(--sp-3);
  max-width: 46em;
  font-size: 16.5px;
  line-height: 1.75;
  /* 用 --ink-2 不用 --ink-3，是**层级**取舍：这是 16.5px 的引言正文，
     属于要读的内容，不是元信息。两档在这个底上都过
     （首页没有覆写墨色，取的是 :root 那一档；
     实测见 check-contrast.php 第 4 节）。
     这条注释以前记着"--ink-3 是 3.0:1"，那个数对不上现在的令牌，
     照着推会得出反的结论。 */
  color: var(--ink-2);
}

/* --- 搜索区 ------------------------------------------------------------- */

.home-search {
  width: 100%;
  max-width: 720px;
  margin-top: var(--sp-7);
  /* 表单本身在 template-tags.php 里输出，这里只负责尺寸和位置——
     结构归 PHP，版式归 CSS。 */
}

/* 首屏的输入框比站头里的高：它是页面的主交互，值得占更大面积。
   站头那个是 .aib-search--compact，只有 36px 高。

   （这里原来还写着一句「不是 .aib-search--multi 那个三类型版」——
   那个类连同它里面的 .aib-search-bar 已经删掉了，全站只剩一种搜索框。） */
.home-search .aib-search input[type="search"] {
  height: 56px;
  font-size: 16.5px;
  padding: 0 var(--sp-5);
}
/* 高度必须和输入框一起改。只改输入框的话按钮会矮一截，
   而外层的 .aib-search 是 align-items:center，于是按钮会浮在中间。 */
.home-search .aib-search-submit {
  height: 56px;
  padding: 0 var(--sp-7);
  font-size: 15.5px;
}
.home-search .aib-search-clear {
  width: 32px;
  height: 32px;
  font-size: 20px;
}

/* 搜索框下面那行「同时搜索：内容 · 网盘 · 磁力」。
   .aib-search-note 的基础样式在 style.css 里（三处共用），
   这里只改首屏这一份：字大一号、跟上面对齐。

   它挂在 .home-hero-inner 上（不是 .home-search 里面），
   因为那个容器是 align-items:center 的 flex 列，
   挂进去才能跟着 hero 居中。 */
.home-search-note {
  max-width: 720px;
  margin-top: var(--sp-4);
  font-size: 14px;
}

.home-hotwords {
  margin-top: var(--sp-5);
  justify-content: center;
}

@media (max-width: 768px) {
  .home-hero { padding: var(--sp-7) 0 var(--sp-6); }
  .home-logo { width: 52px; height: 52px; }
  .home-title { font-size: 27px; }
  .home-lead { font-size: 15.5px; }
  .home-search { margin-top: var(--sp-6); }
}

/* ==========================================================================
   2. 首屏广告位
   --------------------------------------------------------------------------
   位置是硬要求：必须在首屏可见范围内，不能埋进长内容中间。
   用户的理由是「他不一定往下滑……放在中间其实没什么意义」。

   所以这一块紧贴 hero 的下边缘，中间只留 --sp-6 的呼吸，
   不插任何标题、面包屑或引言。任何"先介绍一下再放广告"的改动
   都会把它推出首屏——要加东西请加在这一块**之后**。
   ========================================================================== */

.home-ads {
  padding: var(--sp-6) 0 0;
}

.home-ad-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

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

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

/* .aib-ad-cell 那两条（min-width / :empty 隐藏）搬去 style.css 了。
   搜索页的说明行下面也挂了一个广告格，而那一页加载的是 blog.css，
   不加载这一份——留在原处的话，那边的空格子会真的占位。 */
/* 小工具和广告卡都要撑满格子高度，否则同一行里长短不一的卡片底部会对不齐。 */
.aib-ad-cell .aib-ad { height: 100%; }

/* 首页的广告卡是"海报位"：图标大一号、标题大一档。
   站内其它位置的 .aib-ad 保持原尺寸不动，所以这里只覆盖必要的几项。 */
.home-ad-row .aib-ad { padding: var(--sp-4); }
.home-ad-row .aib-ad-img { width: 48px; height: 48px; }
/* 首字母方块跟着图一起放大。不写这条的话，同一排里"配了图的"是 48px、
   "没配图的"是 40px，卡片标题的基线会差 8px——而且只在混排时看得出来。 */
.home-ad-row .aib-ad-initial { width: 48px; height: 48px; font-size: 20px; }
.home-ad-row .aib-ad-title { font-size: 15px; }

/* 三列时推广标记会和标题抢位置：标记绝对定位在右上角，
   而三列比侧栏窄得多，标题一旦换行就会顶到标记底下。
   给标题留出标记的宽度即可。 */
.home-ad-row .aib-ad-body { padding-right: 46px; }

/* ==========================================================================
   3. 三类搜索入口卡
   --------------------------------------------------------------------------
   位置在**广告位之后**，不是 Demo 那样紧贴搜索框。这是首页唯一一处
   有意偏离 Demo 的地方，理由见 front-page.php 第 3 节和上面第 2 节：
   三张卡竖着排下来一百多像素，插在搜索框和广告之间会把广告推出首屏。

   和 Demo 一致的地方是**三张卡同时可见、各自独立**，
   不是一个需要点按切换的 tab。

   ─────────────────────────────────────────────────────────────────────
   颜色走 --tone / --tone-soft 一对自定义属性
   ─────────────────────────────────────────────────────────────────────
   每张卡具体是哪一对值，由 home-entry--tone-<键> 决定，
   键是后台「首页 → 入口卡颜色」选的。四个键全都指向 schemes.css 里
   已经按每档底色配过对比度的令牌，所以五档底色 × 五档强调色
   怎么组合都不会出现看不清的卡片。见 AISH_Customize::tones()。

   刻意没照搬 Demo 那三个写死的色值（品牌蓝 / 青 / 钢灰）：
   这套主题的底色有深色一档，写死的色值在那一档上没人核过对比度。
   ========================================================================== */

.home-entries {
  /* 上边紧挨广告位，留一段呼吸；下边交给后面 .home-sec 自己的 padding。 */
  padding: var(--sp-7) 0 0;
}

.home-entry-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.home-entry {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  /* 顶上那道 3px 是这套卡的识别特征，也是唯一用到 --tone 实色的地方。
     必须写在 border 简写**之后**，否则会被简写重置回 --line。 */
  border-top: 3px solid var(--tone);
  border-radius: var(--radius);
}

/* 卡片没有 hover 态，因为它**不是链接**（理由见 front-page.php）。
   给一个不可点的东西加位移和变色，是在用视觉暗示它有交互，
   点下去却什么都不发生。等它真的有落点再加。 */

.home-entry-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--tone-soft);
  color: var(--tone);
}

.home-entry-body { min-width: 0; }

.home-entry-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

/* 小标签用 --ink-2 当字色，不是 --tone。
   底是 --tone-soft，而 --tone 那一档里有一个选项是强调色——
   强调色压在它自己的浅底上，博客版式那套只有 4.1:1，
   够不上 11px 小字要求的 4.5:1（同样一笔账 style.css 里
   .aib-search-note 那一段已经记过一次）。--ink-2 压任何一档浅底都过。 */
.home-entry-title em {
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-2);
  background: var(--tone-soft);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.home-entry-desc {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-2);
}

/* --- 每张卡的颜色 -------------------------------------------------------
   每个键映射到的一对令牌，都定义在 style.css 的 :root 里（深色底那一套
   在 schemes.css 的 body.aish-scheme-ink），不是写死在这里的色值。

   中性那四档的 --tone-soft 借的是 --accent-soft / --surface-2：
   它们本来就是"某块颜色的浅底"和"比内容面暗一档的面"，正好是这个位置
   要的东西。色相那八档各有自己的 -soft——中性色没有"某一个色相的浅底"
   可以借。

   键名和后端下拉框一一对应，见 AISH_Customize::tones()。
   加一档要改三处：这里、那几个令牌、$mustPass 的循环名单。 */

.home-entry--tone-accent { --tone: var(--accent);      --tone-soft: var(--accent-soft); }
.home-entry--tone-ink    { --tone: var(--ink);         --tone-soft: var(--surface-2); }
.home-entry--tone-ink-2  { --tone: var(--ink-2);       --tone-soft: var(--surface-2); }
.home-entry--tone-ink-3  { --tone: var(--ink-3);       --tone-soft: var(--surface-2); }

.home-entry--tone-blue   { --tone: var(--tone-blue);   --tone-soft: var(--tone-blue-soft); }
.home-entry--tone-cyan   { --tone: var(--tone-cyan);   --tone-soft: var(--tone-cyan-soft); }
.home-entry--tone-indigo { --tone: var(--tone-indigo); --tone-soft: var(--tone-indigo-soft); }
.home-entry--tone-violet { --tone: var(--tone-violet); --tone-soft: var(--tone-violet-soft); }
.home-entry--tone-amber  { --tone: var(--tone-amber);  --tone-soft: var(--tone-amber-soft); }
.home-entry--tone-rose   { --tone: var(--tone-rose);   --tone-soft: var(--tone-rose-soft); }
.home-entry--tone-green  { --tone: var(--tone-green);  --tone-soft: var(--tone-green-soft); }
.home-entry--tone-slate  { --tone: var(--tone-slate);  --tone-soft: var(--tone-slate-soft); }

/* 窄屏三列会把说明文字挤成每行两三个字。
   不折成两列是因为三张卡折成两列会剩一张孤零零占满整行，比一列更难看。 */
@media (max-width: 900px) {
  .home-entry-row { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   4. 内容区
   ========================================================================== */

.home-sec {
  padding: var(--sp-9) 0;
  border-bottom: 1px solid var(--line);
}
.home-sec:last-of-type { border-bottom: 0; }

/* 不复用 .aib-sec-head：那个是左对齐的一行（标题 + 右侧"更多"），
   首页的区块标题是居中的两行（标题 + 说明）。形状不同、
   共享的只有字号量级，硬套过去要靠一堆覆盖去拆它的 flex 主轴。
   两边都属于"区块标题"这个组件，但结构确实是两套。 */
.home-sec-head {
  margin-bottom: var(--sp-6);
  text-align: center;
}
.home-sec-head > h2 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.home-sec-head > p {
  margin-top: var(--sp-3);
  font-size: 14.5px;
  color: var(--ink-2);
}

/* --- 4.1 分类入口 ------------------------------------------------------- */

.home-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-3);
}

.home-cat {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .16s ease, background-color .16s ease;
}
/* 双类名：单类 .home-cat:hover 是 (0,2,0)，会被 `a:hover` 那种
   (0,1,1) 加上后写的规则盖掉。凡是 <a> 上的组件色都写成双类。 */
.home-cats .home-cat:hover,
.home-cats .home-cat:focus {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

.home-cat-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.home-cat-count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* --- 4.2 站点介绍 ------------------------------------------------------- */

.home-intro {
  max-width: 46em;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-2);
}
.home-intro > * + * { margin-top: var(--sp-4); }
.home-intro h2,
.home-intro h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.home-intro a { color: var(--accent-btn); text-decoration: underline; text-underline-offset: 3px; }
.home-intro ul { list-style: disc; padding-left: 1.35em; }
.home-intro ol { list-style: decimal; padding-left: 1.35em; }
.home-intro li + li { margin-top: var(--sp-2); }

/* 这一节是全站唯一带侧栏的一节（见 front-page.php 第 5 节）。
   侧栏那边一行 CSS 都不用加：
     .aib-layout / .aib-side / .aib-panel 都在 style.css 的共用层里，
     1200px → 280px、900px → 塌成一栏的媒体查询也已经写在那儿了。
   左栏那边也一行都不用加：
     .aib-layout > * 已经给了 min-width:0，.home-col 是直接子级。
   写在这里是为了说明"这一节看着像没管侧栏"不是漏了。 */

/* --- 4.3 值得逛一逛的资源网 --------------------------------------------- */

/* ⚠ 外壳那层 <section class="home-sec home-band"> **没有规则，这是有意的**。
   home-band 是资源网和热门榜**共用**的外壳，两块各自开关。
   给它写规则就等于"两块只要开了一块，规则就生效"——
   比如给它加一道上边线，那么一个只开了榜单、没有资源网的页面上
   也会出现那道线，而且没人看得出是哪来的。
   尺寸、间距、分隔线全部由 .home-sec（上面第 4 节）出，够用了。

   两块各自的钩子是里面的 .home-site-grid 和 .home-rank。 */

.home-site-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 1px 的缝靠**底色透出来**画，不是给每张卡画一圈描边：
     描边的话相邻两张会有两道 1px 叠成 2px，而外圈和里圈看起来就不一样粗。
     这套主题里所有"细线栅格"都是这个做法。 */
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* 圆角要真的切到里面那些方角卡片上，否则四个角会露出直角的底色。 */
  overflow: hidden;
}

.home-site {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
}

/* 图标：42px 的方块，里面一个从站名推出来的字（AISH_Customize::initial()）。
   颜色走 --tone / --tone-soft 一对自定义属性，**复用入口卡那组类名**
   （.home-entry--tone-*，见上面第 3 节）。

   为什么复用而不是另开一组 `.home-site--tone-*`：
     _deliver/check-contrast.php 第 497 行是拿
     `/\.home-entry--tone-([a-z0-9-]+)\s*\{/` **数**这张名单的，
     它要求类名后面**紧跟一个 `{`**。写成
     `.home-entry--tone-blue, .home-site--tone-blue {` 这种并列选择器，
     那条正则就匹配不到了——名单会少一项，而报出来的错是
     "样式表和令牌名单对不上"，看着像少了一个色相。
     所以第二组类名不能和第一组并排写，只能**直接复用**。

   代价是 `home-entry--tone-` 这个子串不再等价于"首页有几张入口卡"了
   （现在还会数到这九个图标）。_deliver/render-check-front-page.php 里
   那条计数用的是完整的 `class="home-entry home-entry--tone-`，
   不受影响；这条记在这里是为了下次别拿子串去数卡片。 */
.home-site-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--tone-soft);
  color: var(--tone);
  font-size: 17px;
  font-weight: 600;
}

.home-site-body { min-width: 0; }

/* 站名一行，溢出打省略号。三列里最长的那条出厂值是 12 个字，
   再长的站名会顶到卡片边缘——挤断行会把下面两行一起推下去，
   而这三张卡是并排的，一高一矮立刻看得出来。 */
.home-site-name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

/* 说明固定**两行**。
   Demo 这里是 `height: 40px`（12.5px × 1.6 × 2 行）。写死高度在系统
   字号被放大时会切字——它切的是**行**，两行变三行而框还是 40px，
   第三行直接看不见，页面上不报错。改成按行数截断，高度由行高自己撐，
   放大字号时跟着变高。 */
.home-site-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.home-site-tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-3);
}

/* hover 只改字色，**不改底色**。
   底色一动，卡上三行字（--ink / --ink-2 / --ink-3）就全都换了一个底，
   三对都要重新核对比度：--ink-3 是这三对里最紧的一对，而它在
   --surface 上刚好 5.0 出头，换到任何一块浅色底上都要重算。
   只改字色的话，买的是一对已经核过的（--accent-btn 压 --surface，
   见 check-contrast.php 的「强调色当链接压内容面」那一条）。

   双类名：单类 .home-site:hover 是 (0,2,0)，而里面 .home-site-name
   也是 (0,1,0)+元素——层级不够会盖不住。照上面第 4.1 节
   .home-cats .home-cat:hover 那条的规矩写成双类。 */
.home-site-grid .home-site:hover .home-site-name,
.home-site-grid .home-site:focus .home-site-name {
  color: var(--accent-btn);
}

/* 窄屏：三列会窄到每张卡只放得下三四个字，先折两列，再折一列。
   和 demo 的两档一样（900px 两列、768px 一列）。 */
@media (max-width: 900px) {
  .home-site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* --- 4.4 热门搜索榜 ----------------------------------------------------- */

/* 只有榜单一块时整条带子是整宽的（.aib-layout--full），
   ≤900px 塌成一栏时也是整宽的——两种情况下榜单都会从 320px 摊到一千多像素。
   一个十行的列表摊满一整行，每行右边空出一大片，看起来像版式坏了。
   给一个上限即可：两栏时那条轨道本来就是 320px，这个上限不起作用。
   不做居中：这一块通常和左边别的内容有共同的中线，居中反而对不齐。 */
.home-side { max-width: 460px; }

.home-rank-list {
  /* 序号用 CSS 计数器画，不是写死的数字——理由见 front-page.php 第 5 节：
     写死的数字和列表顺序是两个来源，中间插一条就会出现 1 2 2 3。 */
  counter-reset: home-rank;
  list-style: none;
}

.home-rank-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.home-rank-item:last-child { border-bottom: 0; padding-bottom: 0; }

.home-rank-item::before {
  counter-increment: home-rank;
  content: counter(home-rank);
  flex: none;
  width: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

/* 第 1 名一档颜色，第 2~10 名另一档。
   ⚠ Demo 上第 2、3 名是写死的 #e07b2c / #c99a24（金银铜那套），
     这里**没有照抄**：那两档是十六进制字面量，且这张主题的五档底色里
     没有任何一档核过它们。改成两档令牌，两对都在
     check-contrast.php 的 $mustPass 里，且**都是已有的行**：
       --accent-btn 压 --surface  → 「强调色当链接压内容面」4.5
       --ink-2      压 --surface  → 「次要文字压内容面」  4.5
     所以这里不加新条目——$mustPass 是按 (combo, pair) 查表的，
     加一行完全相同的只会让两张表对不上（那一段注释里写着）。

   ⚠ 第 1 名用 :first-child 选，**不是给模板加一个 per-row 类**：
     序号本来就来自列表顺序，再加一个"我是第一名"的类又是第二个来源，
     和上面"数字不许写死"是同一条理由。 */
.home-rank-item:first-child::before { color: var(--accent-btn); }

/* 双类名，压过 .aib-panel a（那一条是 (0,1,1)，单类 .home-rank-kw
   只有 (0,1,0)，会被它盖住）。理由同 .aib-panel 那一段自己写的。 */
.aib-panel .home-rank-kw {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aib-panel .home-rank-kw:hover { color: var(--accent-btn); }

/* --- 4.5 关于（三栏） --------------------------------------------------- */

.home-about-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}

/* 每栏顶上一道 2px 的短线，是这一块的识别特征（和入口卡顶上那道 3px
   是同一类做法，粗一档是因为这里没有卡片的描边可以借）。 */
.home-about-col {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--line);
}

.home-about-col > h3 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

.home-about-col > p {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-2);
}

/* 正文里那几处加粗是文案的一部分（见 customize.php 的 default_home_about()）。
   白名单里还放行 <em> / <a> / <br>，所以这三样也要有样式——
   不放行的（<img>）在 wp_kses 那一步就没了，这里不用管。
   链接色和 .home-intro a 用同一对令牌。 */
.home-about-col strong { font-weight: 600; color: var(--ink); }
.home-about-col a {
  color: var(--accent-btn);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 窄屏折成一栏。和 demo 一样在 768px，不是 900px：
   三栏每栏三百多像素还读得下去，折一栏是因为每栏只剩两百出头，
   而这一段每栏是完整的一句话，断得太碎读不通。 */
@media (max-width: 768px) {
  .home-about-cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

/* ==========================================================================
   5. 底部行动区
   ========================================================================== */

.home-cta {
  padding: var(--sp-9) 0;
  text-align: center;
}
.home-cta > h2 {
  font-size: 21px;
  font-weight: 700;
}
.home-cta > p {
  margin-top: var(--sp-3);
  font-size: 14.5px;
  color: var(--ink-2);
}
.home-cta .aib-btns {
  margin-top: var(--sp-6);
  justify-content: center;
}