/* ===============  Flow (MAM) Page  CSS  =============== */
/* 色板 */
:root{
    --bg:#f7f8fb;            /* 淺灰頁面底 */
    --card:#ffffff;          /* 卡片白底 */
    --text:#1b1f2a;          /* 主要深色字 */
    --muted:#6b7280;         /* 次要文字 */
    --primary:#0066cc;       /* 主色 */
    --primary-dark:#0053a6;  /* 主色 hover */
    --ring: rgba(0,102,204,.22);
  }
  
  /* Page wrapper */
  .flow{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3.5rem;
    padding:4rem 1.25rem 5rem;
    background:var(--bg);
    color:var(--text);
  }
  
  /* —— 強制非 CTA 區域全部用深色字，解決白字看不見 —— */
  .flow .hero,
  .flow .section,
  .flow .cards,
  .flow .steps,
  .flow .faq{
    color: var(--text) !important;
  }
  
  /* 區塊共用寬度及置中 */
  .section, .hero, .cta{
    width:min(1100px, 100%);
    margin-inline:auto;
    text-align:center;
  }
  
  /* ------------------ Hero ------------------ */
  .hero{ padding-top:.5rem; }
  .hero__title{
    font-size: clamp(2rem, 2.4vw + 1.2rem, 3rem);
    font-weight:800;
    letter-spacing:.2px;
    margin:0 0 .5rem;
    color: var(--text) !important;
  }
  .hero__subtitle{
    max-width: 780px;
    margin: 0 auto 1.25rem;
    line-height:1.7;
    color:var(--muted) !important;
  }
  .hero__cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
  
  /* ------------------ Buttons ------------------ */
  .btn{
    display:inline-block;
    padding:.8rem 1.2rem;
    border-radius:999px;
    background:#e8eef7;
    color:var(--text);
    text-decoration:none;
    font-weight:700;
    transition:.2s ease;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn--primary{
    background:var(--primary);
    color:#fff;
    box-shadow:0 10px 22px var(--ring);
  }
  .btn--primary:hover{ background:var(--primary-dark); }
  
  /* ------------------ Section headers ------------------ */
  .section__title{
    font-size: clamp(1.4rem, 1.2vw + 1rem, 2rem);
    font-weight:800;
    margin:0 0 .4rem;
    color: var(--text) !important;   /* ← 關鍵：標題改深色 */
  }
  .section__lead{
    color:var(--muted) !important;
    max-width: 720px;
    margin:0 auto 1.6rem;
  }
  
  /* ------------------ Feature cards ------------------ */
  .cards{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:1rem;
  }
  .card{
    background:var(--card);
    border-radius:1rem;
    padding:1.1rem 1rem;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 26px rgba(0,0,0,.09);
  }
  .card__title{ font-weight:800; margin:.1rem 0 .35rem; color: var(--text) !important; }
  .card__text{ color:var(--muted) !important; line-height:1.7; }
  
  /* ------------------ Integrations badges ------------------ */
  .badges{
    display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
    padding:0; list-style:none; margin:0;
    color: var(--text) !important;
  }
  .badge{
    background:#eef3fb;
    color:#1f3e72 !important;
    border:1px solid #dce6f9;
    padding:.45rem .75rem;
    border-radius:999px;
    font-weight:700;
    font-size:.95rem;
  }
  
  /* ------------------ Workflow steps ------------------ */
  .steps{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:1rem;
    padding:0; margin:0; list-style:none;
    color: var(--text) !important;
  }
  .step{
    background:var(--card);
    border-radius:1rem;
    padding:1rem 1rem 1.2rem;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
  }
  .step__num{
    display:inline-grid; place-items:center;
    width:2rem; height:2rem; border-radius:999px;
    background:var(--primary); color:#fff; font-weight:800;
    margin-bottom:.5rem;
  }
  .step__title{ margin:.2rem 0 .25rem; font-weight:800; color: var(--text) !important; }
  .step__text{ color:var(--muted) !important; line-height:1.7; }
  
  /* ------------------ FAQ ------------------ */
  .faq{
    background:var(--card);
    border-radius:.9rem;
    padding:.9rem 1rem;
    margin:.5rem auto;
    max-width:780px;
    text-align:left;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    color: var(--text) !important;
  }
  .faq__q{ cursor:pointer; font-weight:800; color: var(--text) !important; }
  .faq[open] .faq__q{ color:var(--primary) !important; }
  .faq__a{ color:var(--muted) !important; margin:.6rem 0 0; }
  
  /* ------------------ CTA（只此區塊用白字） ------------------ */
  .cta{
    background: linear-gradient(180deg, #0b4aa8 0%, #033875 100%);
    color:#fff;
    border-radius:1.2rem;
    padding:2rem 1.2rem;
    text-align:center;
    box-shadow:0 12px 30px rgba(3,56,117,.25);
  }
  .cta *{ color: inherit; }          /* 保持 CTA 內所有字跟住白色 */
  .cta__title{
    font-size: clamp(1.4rem, 1.3vw + 1rem, 2rem);
    font-weight:800; margin:0 0 .4rem;
  }
  .cta__text{ color:#e4e7f1; margin:0 0 1rem; }
  
  /* ------------------ Responsive ------------------ */
  @media (max-width: 1024px){
    .cards{ grid-template-columns: repeat(2, 1fr); }
    .steps{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px){
    .cards, .steps{ grid-template-columns: 1fr; }
    .hero__title{ letter-spacing: .1px; }
  }