/* 首页：白和浅灰全宽分段；首屏靠一张大产品图和大字撑重心。 */

/* ---------- 首屏 ---------- */
#pg-home .hm-hero-band { padding: 56px 0 72px; }
#pg-home .hm-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; }
#pg-home .hm-h { margin-top: 20px; font-size: var(--t56); line-height: 1.1; font-weight: 500; color: var(--ink); }   /* v7.2 大标题 500，窄屏缩到 40 也是 500 */
html[lang="en"] #pg-home .hm-h { letter-spacing: -0.02em; }
html[lang="en"] #pg-home .hm-cell.big .cell-t { letter-spacing: -0.015em; }
#pg-home .hm-lead { margin-top: 24px; max-width: 520px; }
#pg-home .hm-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 40px; }
#pg-home .hm-nonag { display: flex; align-items: center; gap: 8px; max-width: 440px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line-2); font-size: var(--t14); color: var(--ink-2); }
#pg-home .hm-nonag svg { color: var(--ink-2); }

#pg-home .hm-stage { display: block; position: relative; height: 504px; padding: 0; }
#pg-home .hm-dev { position: absolute; top: 36px; left: 104px; right: 28px; }
@media (min-width: 760px) { html[lang="en"] #pg-home .hm-dev { left: 40px; } }   /* 英文产品图里一行字长（Netherlands · garden light），窗口往左放宽，不出省略号 */
#pg-home .hm-dev .device-body.lg p { margin-top: 6px; }
#pg-home .hm-float { position: absolute; z-index: 2; left: 24px; bottom: 24px; width: 296px; padding: 20px 24px 16px; border-radius: var(--r-img);
  background: var(--device-bg); color: var(--device-ink); box-shadow: var(--shadow-product); }
#pg-home .hm-float-k { font-size: var(--t14); color: var(--device-soft); }
#pg-home .hm-float-row { margin-top: 10px; }
#pg-home .hm-float .delta { flex-wrap: nowrap; gap: 4px 12px; }
#pg-home .hm-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
#pg-home .hm-bars > span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 72px; }
#pg-home .hm-bars i { display: block; width: 14px; flex: none; border-radius: 3px; background: var(--device-ink); opacity: .16; }
#pg-home .hm-bars > span:last-child i { opacity: .88; }
/* 没有每周数字的：原来 / 现在 两根横条 */
#pg-home .hm-hbars { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
#pg-home .hm-hbars > span { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; }
#pg-home .hm-hbars b { font-size: var(--t14); font-weight: 400; color: var(--device-soft); line-height: 1.2; white-space: nowrap; }
#pg-home .hm-track { display: block; height: 10px; border-radius: 5px; background: var(--skel); overflow: hidden; }
#pg-home .hm-track i { display: block; height: 100%; border-radius: 5px; background: var(--device-ink); opacity: .2; }
#pg-home .hm-hbars > span:last-child .hm-track i { opacity: .88; }
#pg-home .hm-bars b { font-size: var(--t14); font-weight: 400; color: var(--device-soft); line-height: 1.2; white-space: nowrap; }
#pg-home .hm-float-ok { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--device-line); }

#pg-home .hm-cap { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 0 8px; }
#pg-home .hm-cap-l { display: flex; flex-direction: column; min-width: 0; }
#pg-home .hm-cap-k { font-size: var(--t14); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pg-home .hm-cap-t { font-size: var(--t17); font-weight: 500; color: var(--ink); }
#pg-home .hm-ver { font-weight: 400; color: var(--ink-2); }
#pg-home .hm-cap .lnk-a { flex: none; font-size: var(--t15); }
/* 段标题右边那条链接（看全部 12 件）不折行 */
#pg-home .sec-h > .lnk-a { flex: none; white-space: nowrap; }

/* ---------- 跟你有关 ---------- */
#pg-home .hm-mine { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
#pg-home .hm-next { margin-top: 40px; padding: 24px 24px 28px; border-radius: var(--r-img); background: var(--cell-bg); }
#pg-home .hm-next-k { display: flex; align-items: center; gap: 8px; font-size: var(--t14); color: var(--ink-2); }
#pg-home .hm-next-d { margin-top: 12px; font-size: var(--t21); line-height: 1.4; font-weight: 500; color: var(--ink); }
#pg-home .hm-next-t { margin-top: 4px; font-size: var(--t15); color: var(--ink-2); }
#pg-home .hm-ml { border-top: 1px solid var(--line); }
#pg-home .hm-ml > li { border-bottom: 1px solid var(--line); }
#pg-home .hm-mi { display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; gap: 20px; align-items: start; padding: 28px 0; }
#pg-home .hm-mi-empty, #pg-home .hm-wants-empty { padding:28px 0; }
#pg-home .hm-mi-empty { display:block; }
#pg-home .hm-picks-empty { padding:24px 0; border-top:1px solid var(--line); }
#pg-home .hm-mi.has-acts { grid-template-columns: 48px minmax(0, 1fr); }
#pg-home .hm-mi-i { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cell-bg); color: var(--ink); }
#pg-home .hm-mi-t { font-size: var(--t21); line-height: 1.45; font-weight: 500; color: var(--ink); }
#pg-home a.hm-mi:hover .hm-mi-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
#pg-home .hm-mi-p { margin-top: 4px; font-size: var(--t15); color: var(--ink-2); }
#pg-home .hm-mi-m { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
#pg-home .hm-mi-m .source { background: var(--cell-bg); }
#pg-home .hm-mi-d { font-size: var(--t14); color: var(--ink-2); }
#pg-home .hm-mi-a { align-self: center; color: var(--ink-2); transition: transform var(--dur) var(--ease); }
#pg-home a.hm-mi:hover .hm-mi-a { transform: translateX(3px); color: var(--ink); }
#pg-home .hm-prog { display: inline-flex; align-items: center; gap: 4px; }
#pg-home .hm-prog i { width: 20px; height: 4px; border-radius: 2px; background: var(--line); }
#pg-home .hm-prog i.d { background: var(--ink); }
#pg-home .hm-prog i.n { background: var(--ink); opacity: .45; }
#pg-home .hm-prog em { margin-left: 8px; font-style: normal; font-size: var(--t14); color: var(--ink-2); }
#pg-home .hm-mi-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#pg-home .hm-mi-acts .btn-2:not(.line):not(.done) { background: var(--cell-bg); }
#pg-home .hm-mi-note { margin-top: 8px; font-size: var(--t14); color: var(--ink-2); }

/* 王姐第一次来：先拿这三件 */
#pg-home .hm-pick { font-weight: 500; color: var(--ink); }

/* ---------- 这周新上的（bento） ---------- */
#pg-home .hm-cell { min-height: 500px; }
#pg-home .hm-cell .cell-t { font-size: var(--t21); }
#pg-home .hm-cell.big .cell-t { font-size: var(--t28); line-height: 1.3; font-weight: 700; }
#pg-home .hm-cell .cell-p { max-width: 460px; }
#pg-home .hm-new { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-right: 8px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t14); line-height: 1; color: var(--ink); vertical-align: 1px; }
#pg-home .hm-from { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: var(--t14); color: var(--ink-2); }
#pg-home .hm-ch { display: flex; flex-direction: column; }
#pg-home .hm-ch .cell-k { display: flex; align-items: center; flex-wrap: wrap; }
/* 英文的作者一行长：「新」标签和后面的字排在同一行字流里一起折行，不让标签单独占一行 */
html[lang="en"] #pg-home .hm-ch .cell-k { display: block; }
html[lang="en"] #pg-home .hm-cell .cell-k { text-wrap: balance; }
#pg-home .hm-cd { margin-top: 24px; }
#pg-home .hm-img { margin-top: auto; padding-top: 32px; max-height: 240px; overflow: hidden; }
#pg-home .hm-cell.big .hm-img { padding-left: 64px; }
#pg-home .hm-img .device { border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: transform .4s var(--ease); }
#pg-home a.hm-cell:hover .hm-img .device { transform: translateY(-4px); }
/* 英文：格子里的小产品图，窗口外面那几栏本来只露半个字，干脆不画（中文照旧）。
   窄格（王姐「先拿这三件」那三格）只露前两栏；手机宽时其余格子只露前三栏 */
html[lang="en"] #pg-home .hm-cell.c-4 .hm-img .d-table :is(th, td):nth-child(n+3) { display: none; }
@media (max-width: 759px) { html[lang="en"] #pg-home .hm-img .d-table :is(th, td):nth-child(n+4) { display: none; } }
#pg-home .hm-first .hm-cell { min-height: 460px; }

/* ---------- 这周有人回了什么 ---------- */
#pg-home .hm-talk { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
#pg-home .hm-k { font-size: var(--t14); font-weight: 500; color: var(--ink-2); margin-bottom: 12px; }
#pg-home .hm-vl > li { padding: 28px 0; border-top: 1px solid var(--line); }
#pg-home .hm-vl > li:last-child { border-bottom: 1px solid var(--line); }
/* 左栏三条、右栏卡片下两条都是整行链接：右边一个灰色「>」（跟「跟你有关」那三行一样），悬停往右挪一点 */
#pg-home .hm-v, #pg-home .hm-al a { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 20px; align-items: center; }
#pg-home .hm-v-b, #pg-home .hm-al-b { display: block; min-width: 0; }
#pg-home .hm-v-a { display: flex; color: var(--ink-2); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
#pg-home a.hm-v:hover .hm-v-a, #pg-home .hm-al a:hover .hm-v-a { transform: translateX(3px); color: var(--ink); }
#pg-home .hm-q { font-size: var(--t21); line-height: 1.55; color: var(--ink); }
html[lang="en"] #pg-home .hm-q { line-height: 1.5; }   /* v7.2 英文正文行距 1.5 */
#pg-home a.hm-v:hover .hm-q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line); }
#pg-home .hm-qm { margin-top: 8px; }
#pg-home .hm-re { margin-top: 16px; padding-left: 16px; border-left: 2px solid var(--line); font-size: var(--t15); color: var(--ink-2); }
#pg-home .hm-re b { margin-right: 8px; font-weight: 500; color: var(--ink); }
#pg-home .hm-aq { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: var(--r-img); background: var(--cell-bg); transition: transform var(--dur) var(--ease); }
#pg-home .hm-aq:hover { transform: translateY(-2px); }
#pg-home .hm-aq-k { font-size: var(--t14); color: var(--ink-2); }
#pg-home .hm-aq-t { font-size: var(--t21); line-height: 1.45; font-weight: 500; color: var(--ink); }
#pg-home .hm-aq-p { font-size: var(--t15); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#pg-home .hm-aq-v { margin-top: 4px; }
#pg-home .hm-aq-v .voice { width: 100%; }
#pg-home .hm-aq-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: var(--t14); color: var(--ink-2); }
#pg-home .hm-aq-f .lnk-a { font-size: var(--t15); }
#pg-home .hm-al { margin-top: 8px; }
#pg-home .hm-al a { padding: 20px 0; border-bottom: 1px solid var(--line); }
#pg-home .hm-al-t { display: block; font-size: var(--t17); font-weight: 500; line-height: 1.5; color: var(--ink); }
#pg-home .hm-al a:hover .hm-al-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
#pg-home .hm-al-m { display: block; margin-top: 4px; }

/* ---------- 同学想要、还没有的 ---------- */
#pg-home .hm-wants { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
#pg-home .hm-wants-h .lnk-a { display: inline-flex; }
#pg-home .hm-wl { border-top: 1px solid var(--line); }
#pg-home .hm-w { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
#pg-home .hm-w-t { font-size: var(--t17); font-weight: 500; line-height: 1.5; color: var(--ink); }
#pg-home .hm-w-m { margin-top: 4px; }
#pg-home .hm-w-r { display: flex; justify-content: flex-end; }

/* ---------- 问一句 ---------- */
#pg-home .hm-ask-band { padding-top: 0; }
#pg-home .hm-askp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 72px 64px; border-radius: var(--r-stage); background: var(--bg-2); overflow: hidden; }
#pg-home .hm-askp .h2 { text-wrap: balance; }
#pg-home .hm-title-phrase { display:inline-block; }
#pg-home .hm-promise { margin-top: 24px; }
#pg-home .hm-promise .ok { font-size: var(--t15); color: var(--ink); }
#pg-home .hm-promise .ok svg { color: var(--ink); }
#pg-home .hm-askdev { max-width: 520px; margin-left: auto; }
#pg-home .hm-adq { font-size: var(--t17); font-weight: 500; line-height: 1.5; color: var(--device-soft); }
#pg-home .hm-adb { margin-top: 4px; font-size: var(--t14); color: var(--device-soft); }
#pg-home .hm-adtl { margin-top: 24px; }
#pg-home .hm-adtl .tl-i { padding-bottom: 16px; }
#pg-home .hm-adtl .tl-t { font-size: var(--t15); }
#pg-home .hm-adtl .tl-p { font-size: var(--t14); }
#pg-home .hm-adtl .tl-dot { background: var(--device-bg); }
#pg-home .hm-adtl .tl-i.done .tl-dot { background: var(--device-ink); color: var(--device-bg); }
#pg-home .hm-adv { margin-top: 20px; opacity: .5; }

/* ---------- 响应式 ---------- */
@media (max-width: 1279px) {
  #pg-home .hm-h { font-size: var(--t40); line-height: 1.2; }
}
@media (max-width: 1099px) {
  #pg-home .hm-hero { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  #pg-home .hm-h { font-size: var(--t56); line-height: 1.1; }
  #pg-home .hm-mine, #pg-home .hm-talk, #pg-home .hm-wants { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  #pg-home .hm-askp { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 48px 40px; }
  #pg-home .hm-askdev { margin: 0 auto; }
  #pg-home .hm-cell { min-height: 440px; }
}
@media (max-width: 759px) {
  #pg-home .hm-hero-band { padding: 40px 0 56px; }
  #pg-home .hm-h { font-size: var(--t40); line-height: 1.15; }
  /* 中文也保留两句之间的换行：原来连排，390 宽断成「同学跑通的 AI」「工具，拿走」「今天就能用。」，把「拿走今天就能用」拆开了。
     现在第一句折成「同学跑通的」「AI 工具，」（home.js 把空格两边各包一个 .nowrap），第二句「拿走今天就能用。」整句一行（40 号 8 个字约 320px，375 宽以上放得下） */
  #pg-home .hm-v, #pg-home .hm-al a { gap: 12px; }
  #pg-home .hm-lead { margin-top: 16px; }
  #pg-home .hm-acts { margin-top: 28px; }
  #pg-home .hm-nonag { margin-top: 32px; }
  #pg-home .hm-stage { height: 360px; }
  #pg-home .hm-dev { top: 24px; left: 20px; right: -120px; }
  #pg-home .hm-dev .device { transform: none; }
  #pg-home .hm-float { left: 12px; bottom: 12px; width: 240px; padding: 16px 18px 12px; }
  #pg-home .hm-bars, #pg-home .hm-float-ok { display: none; }
  #pg-home .hm-cap { flex-direction: column; align-items: flex-start; }
  #pg-home .hm-cap-l { max-width: 100%; }   /* 竖排时左栏不按内容撑开，省略号才起作用 */
  html[lang="en"] #pg-home .hm-cap-k { white-space: normal; }   /* 英文这行长，窄屏允许折成两行，不截掉 */
  #pg-home .hm-mi { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 24px 0; }
  #pg-home .hm-mi-empty, #pg-home .hm-wants-empty { padding:24px 0; }
  #pg-home .hm-mi-a { display: none; }
  #pg-home .hm-mi-i { width: 40px; height: 40px; }
  #pg-home .hm-mi-t { font-size: var(--t17); }
  #pg-home .hm-cell, #pg-home .hm-first .hm-cell { min-height: 0; }
  #pg-home .hm-cell.big .hm-img { padding-left: var(--s3); }
  #pg-home .hm-q { font-size: var(--t17); }
  #pg-home .hm-aq { padding: 24px; }
  #pg-home .hm-w { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #pg-home .hm-w-r { justify-content: flex-start; }
  #pg-home .hm-askp { padding: 32px 20px; border-radius: var(--r-img); }
}


/* A lone recommendation fills the row instead of leaving unused card columns. */
#pg-home .hm-cell.hm-cell-single, #pg-me .hm-cell.hm-cell-single { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px; align-items:center; min-height:0; padding:32px; }
#pg-home .hm-cell-single .hm-card-copy, #pg-me .hm-cell-single .hm-card-copy { min-width:0; }
#pg-home .hm-cell-single .cell-t, #pg-me .hm-cell-single .cell-t { display:block; font-size:var(--t28); font-weight:500; line-height:1.4; }
#pg-home .hm-cell-single .cell-p, #pg-me .hm-cell-single .cell-p { display:block; }
#pg-home .hm-cell-single .hm-img, #pg-me .hm-cell-single .hm-img { margin:0; padding:0; max-height:none; width:100%; max-width:520px; justify-self:end; }
#pg-home .hm-cell-single .hm-img .device, #pg-me .hm-cell-single .hm-img .device { border-radius:var(--r-img); }
#pg-me .hm-cell .hm-ch { display:flex; flex-direction:column; }
#pg-me .hm-cell .hm-cd { margin-top:24px; }
@media (max-width:759px) {
  #pg-home .hm-cell.hm-cell-single, #pg-me .hm-cell.hm-cell-single { grid-template-columns:minmax(0,1fr); gap:24px; padding:24px; }
  #pg-home .hm-cell-single .cell-t, #pg-me .hm-cell-single .cell-t { font-size:var(--t21); }
  #pg-home .hm-cell-single .hm-img, #pg-me .hm-cell-single .hm-img { justify-self:center; }
}