:root{
      --ink:#1f2328;
      --muted:#6b7280;
      --bg:#f6f7f6;
      --paper:#ffffff;
      --line:rgba(31,35,40,.12);
      --shadow:0 12px 34px rgba(0,0,0,.08);
      --radius:18px;

      --brand:#1677ff;
      --brand2:#0f62fe;
      --good:#16a34a;
      --warn:#f59e0b;
      --bad:#dc2626;

      --chip:#f1f5ff;
      --chip2:#ecfeff;

      --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behaviour:smooth}
    body{
      font-family:var(--font);
      background:var(--bg);
      color:var(--ink);
      line-height:1.6;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}

    .container{max-width:1160px;margin:0 auto;}
    .card{
      background:var(--paper);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .pad{padding:18px}
    .grid{display:grid;gap:14px}
    .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
    @media (max-width: 900px){
      .g2,.g3{grid-template-columns:1fr}
    }

    /* Sticky mini nav (optional but helpful) */
    
    .brand{
      display:flex;align-items:center;gap:10px;
      font-weight:900;letter-spacing:.2px;
    }
    .dot{width:10px;height:10px;border-radius:999px;background:var(--brand)}
    .nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
    .pill{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 10px;border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.75);
      font-size:13px;color:var(--muted);
      transition:.18s ease;
      white-space:nowrap;
    }
    .pill:hover{transform:translateY(-1px);border-color:rgba(22,119,255,.35);color:var(--ink)}

    /* HERO */
    .hero{
      position:relative;
      min-height:360px;
      display:flex;
      align-items:flex-end;
    }
    .heroImg{
      position:absolute;inset:0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55)),
        url("https://uspm.aosomcdn.com/aosomweb/activity/UK/content/016-1.jpg");
      background-size:cover;
      background-position:center;
      transform:scale(1.02);
    }
    .heroInner{
      position:relative;
      padding:22px;
      width:100%;
    }
    .heroBox{
      max-width:720px;
      color:#fff;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(0,0,0,.28);
      border-radius:18px;
      padding:18px;
      backdrop-filter: blur(8px);
    }
    .hero h1{
      font-size:clamp(26px, 3.2vw, 42px);
      line-height:1.12;
      letter-spacing:-.5px;
      margin-bottom:8px;
      font-weight:900;
    }
    .hero p{
      font-size:15px;
      color:rgba(255,255,255,.88);
      margin-bottom:12px;
      max-width:62ch;
    }
    .ctaRow{display:flex;flex-wrap:wrap;gap:10px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      padding:11px 14px;border-radius:14px;
      border:1px solid rgba(255,255,255,.22);
      background:linear-gradient(180deg, rgba(22,119,255,1), rgba(15,98,254,1));
      color:#fff;font-weight:800;font-size:13.5px;
      box-shadow:0 14px 30px rgba(15,98,254,.22);
      transition:.18s ease;
      cursor:pointer;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px);filter:saturate(1.05)}
    .btn.secondary{
      background:rgba(255,255,255,.12);
      color:#fff;
      box-shadow:none;
    }

    /* Section head */
    .sectionHead{
      display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
      padding:18px 18px 10px 18px;
    }
    .sectionHead h2{
      font-size:20px;
      letter-spacing:-.2px;
      line-height:1.2;
    }
    .sectionHead p{color:var(--muted);font-size:14px;margin-top:6px;max-width:72ch}
    .tagRow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
    .tag{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 10px;border-radius:999px;
      background:var(--chip);
      border:1px solid rgba(79,70,229,.10);
      color:#3730a3;
      font-size:12.5px;
      white-space:nowrap;
    }
    .tag.alt{background:var(--chip2);border-color:rgba(6,182,212,.14);color:#155e75}

    /* Bar chart (short) */
    .chartWrap{padding:0 18px 18px 18px}
    .chartNote{color:var(--muted);font-size:13.5px;margin-bottom:12px}
    .barChart{display:grid;gap:10px}
    .barRow{
      display:grid;
      grid-template-columns: 170px 1fr 56px;
      gap:12px;
      align-items:center;
    }
    @media (max-width: 700px){
      .barRow{grid-template-columns: 1fr}
    }
    .lbl{font-size:13.5px;color:var(--muted)}
    .bar{
      height:14px;border-radius:999px;
      background:rgba(31,35,40,.08);
      border:1px solid var(--line);
      overflow:hidden;
    }
    .bar > i{
      display:block;height:100%;
      background:linear-gradient(90deg, rgba(22,119,255,1), rgba(16,185,129,1));
      border-radius:999px;
      width:40%;
    }
    .val{font-size:13px;color:var(--muted);text-align:right}

    /* Layout block */
    .layout{padding:0 18px 18px 18px}
    .layoutCard{
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
      background:rgba(255,255,255,.88);
    }
    .layoutTop{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:12px 14px;border-bottom:1px solid var(--line);
      background:rgba(255,255,255,.92);
    }
    .layoutTitle{font-weight:900}
    .seg{display:flex;gap:8px;flex-wrap:wrap}
    .seg button{
      border:1px solid var(--line);
      background:rgba(22,119,255,.06);
      padding:9px 11px;border-radius:999px;
      font-weight:900;font-size:13px;color:var(--ink);
      cursor:pointer;transition:.18s ease;
      white-space:nowrap;
    }
    .seg button.active{
      background:linear-gradient(180deg, rgba(22,119,255,1), rgba(15,98,254,1));
      border-color:rgba(22,119,255,.35);
      color:#fff;
    }
    .seg button:hover{transform:translateY(-1px)}
    .layoutBody{padding:14px}
    .svgWrap{
      width:100%;
      border:1px dashed rgba(31,35,40,.18);
      border-radius:16px;
      background:linear-gradient(180deg, rgba(246,247,246,.65), rgba(255,255,255,.75));
      overflow:hidden;
    }
    .legend{
      display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;
      color:var(--muted);font-size:13px
    }
    .key{display:inline-flex;align-items:center;gap:8px}
    .sw{width:12px;height:12px;border-radius:4px;border:1px solid var(--line)}
    .sw.flow{background:rgba(22,119,255,.25)}
    .sw.storage{background:rgba(16,185,129,.22)}
    .sw.work{background:rgba(245,158,11,.22)}
    .sw.risk{background:rgba(220,38,38,.18)}

    /* Recommendations */
    .recWrap{padding:0 18px 18px 18px}
    .layoutRecTabs{
      display:flex;flex-wrap:wrap;gap:8px;
      padding:0 18px 10px 18px;
    }
    .recTab{
      border:1px solid var(--line);
      background:rgba(255,255,255,.75);
      padding:9px 12px;border-radius:999px;
      font-weight:900;font-size:13px;color:var(--ink);
      cursor:pointer;transition:.18s ease;
      white-space:nowrap;
    }
    .recTab.active{
      background:rgba(22,119,255,.10);
      border-color:rgba(22,119,255,.35);
    }
    .recTab:hover{transform:translateY(-1px)}
    .recHeader{
      display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
      padding:14px 14px 0 14px;
    }
    .recTitle{font-weight:900;font-size:16px}
    .recOneLine{color:var(--muted);font-size:13.5px}
    .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
    .chip{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 10px;border-radius:999px;
      border:1px solid var(--line);
      background:rgba(22,119,255,.05);
      font-size:12.5px;color:rgba(31,35,40,.86);
      white-space:nowrap;
    }
    .cards{
      display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
      padding:12px 14px 14px 14px;
    }
    @media (max-width: 980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media (max-width: 700px){.cards{grid-template-columns:1fr}}
    /* 产品卡片：纵向陈列，不再锁死顶部高度 */
.p{
  border:none;
  border-radius:18px;
  overflow:hidden;
  background:transparent;

  display:flex;              /* ⭐ 改为 flex */
  flex-direction:column;     /* ⭐ 上图，下文 */
  min-height:70vh;           /* ⭐ 一张卡片接近一屏 */

  transition:.18s ease;
}

    .p:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.10)}
    .pTop{
      padding:12px;
      border-bottom:1px solid var(--line);
      background:
        radial-gradient(220px 120px at 25% 30%, rgba(22,119,255,.18), transparent 60%),
        radial-gradient(220px 120px at 75% 40%, rgba(16,185,129,.16), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
      display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
    }
    .pIcon{
      width:40px;height:40px;border-radius:14px;
      border:1px solid var(--line);
      background:rgba(22,119,255,.08);
      display:flex;align-items:center;justify-content:center;
      font-weight:900;color:var(--brand);
      font-size:18px;
      flex:0 0 auto;
    }
    .pBadge{
      font-size:12px;color:#0f172a;
      padding:7px 10px;border-radius:999px;
      border:1px solid rgba(31,35,40,.14);
      background:rgba(255,255,255,.85);
      white-space:nowrap;
    }
    .pBody{padding:12px}
    .pTitle{font-weight:900;letter-spacing:-.2px;margin-bottom:6px;font-size:14.5px}
    .pText{color:var(--muted);font-size:13.5px;margin-bottom:10px}
    .pMeta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
    .pill2{
      padding:7px 9px;border-radius:999px;
      border:1px solid var(--line);
      background:rgba(22,119,255,.05);
      font-size:12px;color:rgba(31,35,40,.86);
      white-space:nowrap;
    }
    .pCTA{display:flex;gap:10px;align-items:center;justify-content:space-between}
    .linkBtn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      padding:10px 12px;border-radius:14px;
      border:1px solid rgba(22,119,255,.35);
      background:rgba(22,119,255,.08);
      color:var(--ink);
      font-weight:900;
      font-size:13px;
      transition:.18s ease;
      white-space:nowrap;
    }
    .linkBtn:hover{background:rgba(22,119,255,.12);transform:translateY(-1px)}
    .hint{font-size:12.5px;color:var(--muted)}
    .yes{color:var(--good);font-weight:900}
    .no{color:var(--bad);font-weight:900}
    .maybe{color:var(--warn);font-weight:900}

    /* Footer CTA */
    .footerCTA{
      padding:18px;
      display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
      border-top:1px solid var(--line);
      background:rgba(255,255,255,.85);
    }
    .footerCTA b{font-size:15px}
    .footerCTA span{color:var(--muted);font-size:13.5px}
    .footerCTA .btn{border-color:rgba(31,35,40,.12)}
:root{
  --ink:#2b2b2b;
  --muted:#6f6f6f;
  --bg:#f7f7f5;
  --paper:#ffffff;
  --line:rgba(0,0,0,.06);

  --accent:#111111;       /* CTA 深色 */
  --soft:#ecece8;         /* 模块分隔 */
  --warm:#faf9f7;

  --radius:12px;
  --shadow:none;          /* ❗️去掉所有卡片阴影 */
}

/* 2. 页面整体 */
body{
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  font-weight:400;
}

/* 3. 卡片全部“去卡片化” */
.card{
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  margin-bottom:56px;
}

/* 内部内容仍然居中 */
.card > .pad,
.sectionHead,
.chartWrap,
.layout,
.recWrap{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

/* 4. 标题体系（杂志感） */
h1{
  font-size:clamp(30px, 4vw, 44px);
  font-weight:500;
  letter-spacing:-0.02em;
}

h2{
  font-size:26px;
  font-weight:500;
  letter-spacing:-0.01em;
  margin-bottom:12px;
}

p{
  font-size:16px;
  color:var(--muted);
}

/* 5. Hero 区域 */
.hero{
  min-height:420px;
}

.heroBox{
  background:rgba(255,255,255,.88);
  border:none;
  backdrop-filter:none;
  color:var(--ink);
  max-width:680px;
}

.hero p{
  color:#444;
}

/* 6. 按钮：低调、可亲 */
.btn{
  background:#111;
  color:#fff;
  border:none;
  box-shadow:none;
  border-radius:6px;
  padding:12px 18px;
  font-weight:500;
}

.btn.secondary{
  background:transparent;
  color:#111;
  border:1px solid rgba(0,0,0,.12);
}

/* 7. Bar Chart 去“工具感” */
.bar{
  background:#e6e6e3;
  border:none;
}

.bar > i{
  background:#bfbfb8;
}

/* 8. SVG 容器：像插画一样 */
.svgWrap{
  border:none;
  background:var(--warm);
}

/* 9. Tabs / Pills 更像标签 */
.pill,
.recTab,
.seg button{
  background:transparent;
  border:1px solid rgba(0,0,0,.12);
  font-weight:400;
}

.seg button.active,
.recTab.active{
  background:#111;
  color:#fff;
  border-color:#111;
}

/* 10. 产品卡片 → 陈列感 */
.p{
  border:none;
  box-shadow:none;
  background:transparent;
}

.pTop{
  background:var(--warm);
  border:none;
}

.pBody{
  padding-left:0;
  padding-right:0;
}

.pTitle{
  font-size:16px;
  font-weight:500;
}

.pText{
  font-size:14.5px;
}

/* 11. Footer CTA */
.footerCTA{
  background:var(--warm);
  border:none;
  padding:32px 0;
}

/* 12. 标签更像内容提示 */
.tag,
.chip,
.pill2{
  background:#efefeb;
  border:none;
  font-size:13px;
}
.pImg{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
}
/* Layout picks = 主舞台 */
#picks{
  padding-top:72px;
  padding-bottom:96px;
}

/* 产品卡片：主内容体量 */
.p{
  display:flex;
  flex-direction:column;
  min-height:70vh;          /* ⭐ 核心：一张卡片接近一屏高度 */
  background:transparent;
}
/* 产品主图：占据卡片 60% 以上 */
.pIcon{
  width:100%;
  aspect-ratio:4 / 3;
  flex:0 0 auto;
}

@media (min-width:1024px){
  .pIcon{
    aspect-ratio:3 / 2;     /* 桌面端更像你给的猫床图 */
  }
}
.pBody{
  padding-top:20px;
  padding-bottom:24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;                  /* ⭐ 撑满剩余空间 */
}
.pCTA{
  margin-top:auto;         /* ⭐ 把按钮推到底部 */
}
/* ===== FORCE FIX: unlock product image height ===== */
#picks .cards .p{
  display:flex !important;
  flex-direction:column !important;
  min-height:70vh !important;
}

#picks .cards .pTop{
  padding:0 !important;
}

#picks .cards .pIcon{
  width:100% !important;
  aspect-ratio:4 / 3 !important;
  height:auto !important;
}

#picks .cards .pIcon img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
/* 全宽容器（用于沉浸模块） */
.container--full{
  max-width:100%;
  padding-left:0;
  padding-right:0;
}
/* Layout picks tabs 与标题左对齐 */
#picks .layoutRecTabs{
  padding-left:18px;
  padding-right:18px;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}
/* ===== Section 标题与正文层级强化 ===== */

/* 1️⃣ 板块标题（Why / Find your layout / Layout picks） */
.sectionHead h2{
  font-size:clamp(28px, 3vw, 36px);   /* 明显放大 */
  line-height:1.25;
  font-weight:500;                    /* 保留 IKEA 风格 */
  letter-spacing:-0.02em;
  margin-bottom:10px;
}

/* 2️⃣ 板块说明正文 */
.sectionHead p{
  font-size:17px;                     /* 从 14–15px 提升 */
  line-height:1.65;
  max-width:60ch;                     /* 控制阅读宽度 */
  color:var(--muted);
}

/* 3️⃣ Why it feels smaller 里的标签文本（bar chart 左侧） */
.barRow .lbl{
  font-size:15px;
}

/* 4️⃣ Why it feels smaller 右侧 High / Med */
.barRow .val{
  font-size:14px;
}

/* 5️⃣ Layout picks 顶部 Galley: keep the centre clear */
.recTitle{
  font-size:20px;                     /* 提升存在感 */
  line-height:1.35;
  font-weight:500;
}

.recOneLine{
  font-size:16px;
  line-height:1.6;
}
/* ===== Section spacing rhythm (reduce fragmentation) ===== */

/* 1️⃣ 所有主 section 的基础间距（统一、偏紧） */
main > .card{
  margin-bottom:32px !important;
}

/* 2️⃣ 首屏 Hero 后，第一块不要太远 */
main > .card#why{
  margin-top:24px !important;
}

/* 3️⃣ Why → Find your layout：更连续 */
#why + #layout{
  margin-top:20px !important;
}

/* 4️⃣ Find your layout → Layout picks：略强承接 */
#layout + #picks{
  margin-top:28px !important;
}

/* 5️⃣ Section 内部 header 和内容的距离（防止再被拉开） */
.sectionHead{
  padding-bottom:8px !important;
}

/* 6️⃣ Layout picks 里 tabs 不要“掉下去” */
#picks .layoutRecTabs{
  margin-top:8px !important;
}

/* 7️⃣ 防止旧 padding 把 section 撑太高 */
#why,
#layout,
#picks{
  padding-top:0 !important;
}
/* Hero = 3/4 屏沉浸式 Banner */
.hero{
  min-height:75vh;          /* ⭐ 关键 */
  display:flex;
  align-items:flex-end;
}
/* Product text as bullet list */
.pList{
  margin: 8px 0 0;
  padding-left: 18px;
  list-style: disc;
}

.pList li{
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 4px;
}