/* 汇总页（功能总览 / 教程中心 / 价格页 / 常见问题的图文版式）的样式，叠在 guide.css 上。结构由 scripts/build-hubs.mjs 输出。 */
.hb-page .g-main{padding-bottom:64px}
.hb-hero{padding-bottom:8px}
.hb-jump{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0}
.hb-jump a{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--brand-100);box-shadow:var(--shadow-soft);font-size:14px;font-weight:600;color:var(--ink);transition:border-color .2s,color .2s}
.hb-jump a:hover{border-color:var(--brand-300);color:var(--brand-700)}
.hb-sec{padding:44px 0 0;scroll-margin-top:96px}
.hb-h{margin:0 0 8px;font-size:clamp(22px,3vw,28px);line-height:1.3;font-weight:800;letter-spacing:-.01em}
.hb-h3{margin:26px 0 12px;font-size:15px;font-weight:700;color:var(--slate-600)}
.hb-sub{margin:0 0 20px;max-width:46rem;color:var(--slate-600)}
.hb-note{margin:18px 0 0;font-size:14px;color:var(--slate-500)}

/* 手机截图外框 */
.hb-phone{border-radius:26px;padding:6px;background:#1b2540;box-shadow:0 18px 44px rgba(30,45,79,.2)}
.hb-phone img{display:block;width:100%;height:auto;border-radius:21px;background:#fff}

/* 功能总览：一行一个功能，图文左右交替 */
.hb-row{display:grid;gap:24px;align-items:center;margin-top:28px;padding:26px 20px;border-radius:1.75rem;background:#fff;border:1px solid var(--brand-50);box-shadow:var(--shadow-soft);scroll-margin-top:96px}
.hb-k{display:inline-block;margin-bottom:10px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--brand-600)}
.hb-row h2{margin:0 0 14px;font-size:clamp(22px,2.8vw,30px);line-height:1.3;font-weight:800;letter-spacing:-.01em}
.hb-points{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:9px}
.hb-points li{display:flex;gap:10px;color:var(--slate-700);font-size:15.5px;line-height:1.65}
.hb-points svg{width:18px;height:18px;flex-shrink:0;margin-top:4px;color:var(--brand-500)}
.hb-tag{display:inline-block;margin:0 0 16px;padding:3px 10px;border-radius:999px;background:var(--brand-50);border:1px solid var(--brand-100);font-size:12.5px;font-weight:600;color:var(--brand-700)}
.hb-copy .btn{display:flex;width:fit-content}
.hb-copy .btn svg{width:15px;height:15px}
.hb-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px;border-radius:1.25rem;background:linear-gradient(160deg,#eef3fb,#dbe7fb)}
.hb-shots .hb-phone:nth-child(2){margin-top:28px}
@media(min-width:860px){
  .hb-row{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:44px;padding:36px 40px}
  .hb-row.flip .hb-copy{order:2}
  .hb-shots{gap:18px;padding:24px}
}

/* 小卡片（「还有这些」和汇总入口） */
.hb-mini{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-top:16px}
@media(min-width:860px){.hb-mini.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hb-mini a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--brand-50);box-shadow:var(--shadow-soft);color:var(--ink);transition:transform .2s,border-color .2s}
.hb-mini a:hover{transform:translateY(-2px);border-color:var(--brand-200)}
.hb-mini b{font-size:16px;font-weight:700}
.hb-mini span{font-size:13.5px;line-height:1.6;color:var(--slate-500)}

/* 教程中心：带缩略图的卡片 */
.hb-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.hb-card{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;background:#fff;border:1px solid var(--brand-50);box-shadow:var(--shadow-soft);color:var(--ink);transition:transform .2s,border-color .2s,box-shadow .2s}
.hb-card:hover{transform:translateY(-2px);border-color:var(--brand-200);box-shadow:var(--shadow-lift)}
.hb-thumb{display:flex;justify-content:center;height:150px;padding-top:18px;overflow:hidden;background:linear-gradient(160deg,#eef3fb,#dbe7fb)}
.hb-thumb img{width:168px;height:auto;align-self:flex-start;border-radius:14px 14px 0 0;border:4px solid #1b2540;border-bottom:0;background:#fff}
.hb-thumb.sheet{align-items:flex-start;justify-content:flex-start;padding:18px 0 0 18px;background:linear-gradient(160deg,#f0fdf4,#dcfce7)}
.hb-thumb.sheet img{width:230%;max-width:none;border:1px solid #bbf7d0;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.hb-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.hb-body b{font-size:16px;font-weight:700;line-height:1.4}
.hb-body span{font-size:13.5px;line-height:1.6;color:var(--slate-500)}
.hb-exams{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.hb-exam{display:flex;flex-direction:column;gap:4px;padding:10px 10px 12px;border-radius:16px;background:#fff;border:1px solid var(--brand-50);box-shadow:var(--shadow-soft);color:var(--ink);transition:transform .2s,border-color .2s}
.hb-exam:hover{transform:translateY(-2px);border-color:#bbf7d0}
.hb-sheet{display:block;height:74px;margin-bottom:6px;overflow:hidden;border-radius:10px;border:1px solid #dcfce7;background:#f0fdf4}
.hb-sheet img{display:block;width:260%;max-width:none;height:auto}
.hb-exam b{padding:0 4px;font-size:15px;font-weight:700;line-height:1.4}
.hb-exam small{display:inline-flex;align-items:center;gap:4px;padding:0 4px;font-size:12px;color:#15803d}
.hb-exam small svg{width:13px;height:13px}

/* 价格页 */
.hb-plans{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:20px}
.hb-plan{position:relative;display:flex;flex-direction:column;padding:26px 22px 22px;border-radius:1.5rem;background:#fff;border:1px solid var(--brand-50);box-shadow:var(--shadow-soft)}
.hb-plan.hot{border:2px solid var(--brand-500);box-shadow:var(--shadow-lift)}
.hb-plan.soon{background:#fafcff}
.hb-badge{position:absolute;top:-12px;left:22px;padding:3px 12px;border-radius:999px;background:var(--brand-500);color:#fff;font-size:12px;font-weight:700}
.hb-plan h2{margin:0;font-size:18px;font-weight:800}
.hb-psub{margin:2px 0 14px;font-size:13.5px;color:var(--slate-500)}
.hb-price{margin:0 0 16px;display:flex;align-items:baseline;gap:6px}
.hb-price b{font-size:38px;line-height:1;font-weight:900;letter-spacing:-.02em}
.hb-price small{font-size:14px;color:var(--slate-500)}
.hb-plan ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.hb-plan li{display:flex;gap:8px;font-size:14.5px;line-height:1.55;color:var(--slate-700)}
.hb-plan li svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--brand-500)}
.hb-plan .btn{width:100%}
.hb-off{background:var(--brand-50);color:var(--slate-500);cursor:default}
.hb-plat{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.hb-plat>div{padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--brand-50);box-shadow:var(--shadow-soft)}
.hb-plat b{display:block;margin-bottom:4px;font-size:15.5px}
.hb-plat p{margin:0;font-size:14px;line-height:1.7;color:var(--slate-600)}
.hb-table{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px;background:#fff;border:1px solid var(--brand-100);box-shadow:var(--shadow-soft)}
.hb-table table{width:100%;min-width:480px;border-collapse:collapse;font-size:14.5px}
.hb-table thead th{padding:14px 16px;background:var(--brand-50);font-weight:700;text-align:center;white-space:nowrap}
.hb-table thead th:first-child,.hb-table tbody th{text-align:left}
.hb-table tbody th{padding:12px 16px;font-weight:500;color:var(--slate-700)}
.hb-table td{padding:12px 16px;text-align:center;color:var(--slate-700);width:28%}
.hb-table tbody tr+tr th,.hb-table tbody tr+tr td{border-top:1px solid var(--brand-50)}
.hb-table tr.hb-group th{padding:10px 16px;background:#fafcff;border-top:1px solid var(--brand-100);font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--slate-500)}
.hb-yes,.hb-no{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px}
.hb-yes{background:#dcfce7;color:#16a34a}.hb-no{background:#f1f5f9;color:#94a3b8}
.hb-yes svg,.hb-no svg{width:14px;height:14px;stroke-width:3}
.hb-points-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.hb-box{padding:22px;border-radius:1.25rem;background:#fff;border:1px solid var(--brand-50);box-shadow:var(--shadow-soft)}
.hb-box h3{margin:0 0 14px;font-size:16px;font-weight:700}
.hb-box p{margin:14px 0 0;font-size:13.5px;line-height:1.65;color:var(--slate-500)}
.hb-packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hb-packs div{display:flex;flex-direction:column;align-items:center;padding:14px 8px;border-radius:14px;background:var(--brand-50);border:1px solid var(--brand-100)}
.hb-packs b{font-size:17px;font-weight:800}.hb-packs span{font-size:14px;color:var(--brand-700);font-weight:600}
.hb-use{margin:0}
.hb-use div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14.5px}
.hb-use div+div{border-top:1px solid var(--brand-50)}
.hb-use dt{color:var(--slate-700)}.hb-use dd{margin:0;font-weight:700;white-space:nowrap}
.hb-page .faq{margin:16px 0 0;max-width:52rem}

/* 手机：教程卡片改成左图右文的一行一条，对照表压进一屏宽 */
@media(max-width:560px){
  .hb-cards{grid-template-columns:1fr;gap:12px}
  .hb-card{flex-direction:row}
  .hb-thumb{flex:0 0 104px;height:116px;padding-top:14px}
  .hb-thumb img{width:80px;border-width:3px;border-radius:10px 10px 0 0}
  .hb-thumb.sheet{padding:14px 0 0 10px}
  .hb-thumb.sheet img{width:300px}
  .hb-body{flex:1;min-width:0;justify-content:center;padding:12px 14px}
  .hb-body span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hb-exams{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hb-table table{min-width:0;font-size:13.5px}
  .hb-table thead th{padding:12px 6px}
  .hb-table thead th:first-child,.hb-table tbody th{padding-left:14px}
  .hb-table tbody th{padding:11px 6px 11px 14px}
  .hb-table td{width:24%;padding:11px 6px;font-size:12.5px;line-height:1.45}
  .hb-row{padding:22px 16px}
  .hb-shots{padding:14px;gap:10px}
}