:root{ --fc-blue:#0102a2; --fc-green:#82a522; --fc-text:#111; --fc-muted:#475569; }

  /* ===== Base + container ===== */
  .container-xxl{ padding-left:12px; padding-right:12px; }
  .text-justify{ text-align:justify; }

  /* ===== Unified Hero (parity with Personal Loan page) ===== */
  .fcHero-modern{
    background:#fff; border-radius:20px; padding:30px;
    border:10px solid #f5f5f5; margin-top:0; margin-bottom:16px;
  }
  .fcHero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
  .fcHero-content{ padding-right:20px; }
  .fcHero-media{ position:relative; border-radius:16px; overflow:hidden; }

  /* H1 exact size/color + accent */
  .fcH1{
    font-size:24px; color:var(--fc-blue); font-weight:800; line-height:1.25;
    margin:0 0 12px 0;
  }
  .fcH1 .fcAccent{ color:var(--fc-green) !important; font-weight:900; }

  /* Backlink (under H1) */
  .fcBacklink{ margin:4px 0 14px 0; font-size:13px; }
  .fcBacklink a{
    color:var(--fc-green); font-weight:700; text-decoration:none;
    border-bottom:2px solid rgba(130,165,34,.25); padding-bottom:1px;
  }
  .fcBacklink a:hover{ border-bottom-color:#82a522; color:#0102a2; }

  /* === Key Points (exact same pattern as personal-loan) === */
  .fcHero-keypoints{
    background:#f8f9ff;
    padding:16px; border-radius:12px;
    border-left:4px solid #0102a2;
    margin: 8px 0 18px;
  }
  .fcHero-keypoints b{
    color:#0102a2; font-size:14px;
  }
  .fcHero-keypoints p{
    margin:8px 0 0; font-size:13px; line-height:1.55; color:#111;
  }

  /* Hero subline */
  .fcHero-sub{ font-size:14px; color:var(--fc-muted); line-height:1.45; margin:6px 0 16px; }

  /* Metrics (flat) */
  .fcHero-metrics-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .fcHero-metric-card{
    background:#fff; padding:14px 12px; border-radius:12px;
    border:1px solid #e8edff; text-align:center; box-shadow:none;
  }
  .fcHero-metric-icon{
    width:40px; height:40px; margin:0 auto 8px;
    background:linear-gradient(135deg,#0102a2,#2b3cff);
    border-radius:10px; display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:14px;
  }
  .fcHero-metric-card b{ display:block; font-size:14px; color:#111; margin-bottom:4px; }
  .fcHero-metric-card span{ font-size:12px; color:#64748b; }

  /* Steps */
  .fcSteps{ display:grid; gap:12px; margin:6px 0 6px; }
  .fcStep{ display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start; }
  .fcStep .dot{
    width:30px; height:30px; border-radius:50%; background:#fff; border:2px solid #c7d2fe;
    color:#0102a2; font-weight:800; display:grid; place-items:center;
  }
  .fcStep b{ color:#0f172a; font-size:14px; }
  .fcStep p{ margin:2px 0 0; color:#64748b; font-size:13px; }

  /* Content cards */
  .fcCard{
    background:#fff; border-radius:16px; padding:16px;
    border:10px solid #f5f5f5; box-shadow:none; margin-bottom:16px;
  }
  .fcH{
    color:var(--fc-blue); font-weight:700; font-size:clamp(18px,3.8vw,22px);
    border-bottom:2px solid var(--fc-green); padding-bottom:8px; margin:0 0 12px;
  }
  .fcH6{ color:#0f172a; font-weight:700; font-size:16px; margin:8px 0 6px; }
  .fcList{ padding-left:18px; }
  .fcList li{ margin:4px 0; }

  /* Tables (if you add any later) */
  .table caption{ caption-side:top; font-weight:700; color:#111; margin-bottom:6px; }
  .table thead th{ background:#eef3ff; border-color:#e3e9ff; }

  /* ===== Contrast fix: FORCE readable text on white background ===== */
  .fcHero-modern :where(p, li, td, th, small, span, label, .accordion-body),
  .fcCard :where(p, li, td, th, small, span, label, .accordion-body){
    color:#111 !important;   /* override any stray .text-white etc. */
  }
  /* keep button text white */
  .btn, .btn * { color:#fff !important; }

  /* ===== Responsive ===== */
  @media (max-width: 991.98px){
    .fcHero-grid{ grid-template-columns:1fr; gap:24px; }
    .fcHero-content{ padding-right:0; }
    .fcHero-metrics-grid{ grid-template-columns:1fr; }
    .fcHero-modern{ padding:20px; border-radius:16px; }
  }
  @media (max-width:575.98px){
    .fcHero-modern{ padding:16px; }
    .fcHero-keypoints{ padding:14px; border-radius:10px; }
    .fcHero-keypoints b{ font-size:13.5px; }
    .fcHero-keypoints p{ font-size:13px; }
  }

  
/* ===== Two-tone heading (exact split) ===== */
 .fcw-title{
    margin:.45rem 0 .25rem;
    line-height:1.05;
    font-weight:900;
    letter-spacing:.2px;
    font-size: clamp(28px, 5vw, 48px);
    white-space: nowrap; /* Prevent wrap */
}

.fcw-title .t-left{
    color: var(--fc-blue) !important;
    display: inline; /* changed */
}

.fcw-title .t-right{
    color: var(--fc-green) !important;
    display: inline; /* changed */
}


  /* Scoped to #top to avoid clashes */
  #top{
    --fc-blue:#0102a2; --fc-green:#82a522; --ink:#0b1020; --muted:#64748b;
    --soft:#f6f8ff; --stroke:#e8edff;
  }
  #top .fcw-title{
    margin:.25rem 0 .5rem; line-height:1.05; font-weight:900; letter-spacing:.2px;
    font-size: clamp(28px, 5vw, 36px);
  }
  #top .fcHero-sub{ font-size:14px; color:var(--muted); margin:6px 0 12px; }

  /* Key highlights pills */
  #top .key-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
  #top .pill{
    display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px;
    background:#f7f9ff; border:1px solid #ebefff; color:#0b3ea8; font-weight:700; font-size:12.5px;
  }
  #top .pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--fc-green); }

  /* Metrics */
  #top .metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:8px 0 10px; }
  @media(max-width:575.98px){ #top .metrics{ grid-template-columns:1fr; } }
  #top .metric{
    background:#fff; border:1px solid var(--stroke); border-radius:12px; padding:12px; text-align:center;
  }
  #top .metric b{ display:block; font-size:14px; color:#111; }
  #top .metric span{ font-size:12px; color:#64748b; }

  /* Two info cards */
  #top .cols{ display:grid; gap:10px; grid-template-columns:1fr; }
  @media(min-width:768px){ #top .cols{ grid-template-columns:1fr 1fr; } }
  #top .cardLite{
    background:#fff; border:1px solid var(--stroke); border-radius:12px; padding:12px;
  }
  #top .cardLite h3{
    margin:0 0 6px; font-size:15px; color:var(--ink); font-weight:800;
  }
  #top .cardLite .list{ margin:0; padding-left:18px; }
  #top .cardLite .list li{ margin:4px 0; font-size:13px; color:var(--ink); }

  /* CTAs */
  #top .hero-ctas{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:6px; }
  #top .btn-primary{
    background:linear-gradient(90deg,var(--fc-blue),#2f86ff); color:#fff; border:none;
    border-radius:999px; padding:10px 16px; font-weight:800; display:inline-flex; gap:8px; align-items:center;
  }
  #top .btn-ghost{
    background:#eef6ff; color:#0b3ea8; border:1px solid #d7eaff; border-radius:999px; padding:10px 14px; font-weight:700;
  }

  :root{
    --fc-blue:#0102a2; --fc-green:#82a522; --ink:#0b1020; --muted:#64748b;
    --bg:#ffffff; --soft:#f6f8ff; --radius:16px; --shadow:0 8px 18px rgba(0,0,0,.06);
  }

  /* ===== Global compact spacing ===== */
  .fcSect{ padding:12px 0; }
  .fcCard{ background:#fff; border-radius:var(--radius); padding:14px; border:6px solid #f5f5f5; box-shadow:none; margin-bottom:12px; }
  .fcH{ color:var(--fc-blue); font-weight:800; margin:0 0 8px; font-size:18px; border-bottom:2px solid var(--fc-green); padding-bottom:6px; }
  .fcH6{ color:#0f172a; font-weight:700; font-size:16px; margin:6px 0 4px; }
  .fcList{ margin:0 0 6px 18px; padding:0; }
  .fcList li{ margin:4px 0; color:var(--ink); }
  .text-justify{ text-align:justify; }

  /* TOC chips */
  .fcTOC{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
  .fcTOC a{
    display:inline-flex; gap:8px; align-items:center; text-decoration:none;
    background:#f7f9ff; border:1px solid #ebefff; color:var(--fc-blue);
    border-radius:999px; padding:6px 10px; font-size:13px; font-weight:700;
  }
  .fcTOC a:hover{ background:#eef3ff; }

  /* Pointers */
  .fcPointers{ display:grid; grid-template-columns:1fr; gap:6px; margin-top:6px; }
  @media(min-width:768px){ .fcPointers{ grid-template-columns:repeat(3,1fr); } }
  .fcPoint{ background:#fff; border:1px dashed #dce3ff; border-radius:12px; padding:8px; display:flex; gap:8px; }
  .fcPoint .ic{ flex:0 0 24px; height:24px; display:grid; place-items:center; border-radius:8px; background:#edf1ff; font-weight:800; font-size:13px; }
  .fcPoint .tx{ font-size:13.5px; color:var(--ink); line-height:1.4; }

  /* Utilities */
  .fcGrid-2{ display:grid; gap:10px; grid-template-columns:1fr; }
  @media(min-width:768px){ .fcGrid-2{ grid-template-columns:1fr 1fr; } }
  .fcCallout{ background:#f8fbff; border:1px dashed #dce3ff; border-left:4px solid #0102a2; border-radius:12px; padding:10px; margin:8px 0; }
  .fcCallout b{ color:#0102a2; }

  /* WHAT (pills) */
  #what-topup .mini-list{ display:grid; gap:8px; grid-template-columns:1fr; margin:8px 0 6px; }
  @media(min-width:768px){ #what-topup .mini-list{ grid-template-columns:1fr 1fr; } }
  #what-topup .pill{
    display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px;
    border:1px solid #e8edff; background:#fff; font-size:13px; color:var(--ink);
  }
  #what-topup .pill .ic{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:#eaf4ff; border:1px solid #d7eaff; color:var(--fc-blue); font-weight:800; font-size:12px; }

  /* BENEFITS cards */
  #benefits .grid{ display:grid; gap:10px; margin-top:6px; grid-template-columns:1fr; }
  @media(min-width:768px){ #benefits .grid{ grid-template-columns:1fr 1fr; } }
  @media(min-width:1200px){ #benefits .grid{ grid-template-columns:1fr 1fr 1fr; } }
  #benefits .bcard{
    background:#fff; border:1px solid #e8edff; border-radius:12px; padding:12px 12px 12px 44px; position:relative;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  #benefits .bcard:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(1,2,162,.08); border-color:#d7e3ff; }
  #benefits .ic{ position:absolute; left:10px; top:12px; width:24px; height:24px; border-radius:999px; display:grid; place-items:center; font-size:12px; font-weight:800; background:#eaf4ff; color:var(--fc-blue); border:1px solid #d7eaff; }
  #benefits .btitle{ margin:0 0 2px; font-size:15px; color:var(--ink); font-weight:800; }
  #benefits .btxt{ margin:0; font-size:13px; color:var(--muted); line-height:1.5; }

  /* HOW timeline */
  #how-topup .timeline{ display:grid; gap:8px; position:relative; margin-top:4px; }
  #how-topup .tstep{
    display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start;
    background:#fff; border:1px solid #e8edff; border-radius:12px; padding:10px;
  }
  #how-topup .num{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#fff; border:2px solid #cfe0ff; color:#0102a2; font-weight:800; font-size:12px; }
  #how-topup .tstep b{ color:#0f172a; font-size:14px; display:block; margin:0 0 2px; }
  #how-topup .tstep p{ margin:0; color:#64748b; font-size:13px; line-height:1.45; }
  @media(min-width:992px){
    #how-topup .timeline{
      display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
      background:linear-gradient(#fff 20px, #fff calc(50% - 2px), #e1e8ff calc(50% - 2px), #e1e8ff calc(50% + 2px), #fff calc(50% + 2px));
      background-size:100% 100%; padding:6px 4px;
    }
    #how-topup .tstep{ grid-template-columns:1fr; text-align:center; padding:12px 10px 10px; }
    #how-topup .num{ margin:0 auto 6px; }
  }

  /* Table */
  .fcTable-mini{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid #e8edff; border-radius:12px; overflow:hidden; margin-top:8px; }
  .fcTable-mini th,.fcTable-mini td{ padding:10px 12px; font-size:14px; }
  .fcTable-mini thead th{ background:#eef3ff; color:#0102a2; }
  .fcTable-mini tbody tr+tr td{ border-top:1px solid #eef2ff; }

  /* FAQ */
  .accordion .accordion-item{ border:1px solid #e8edff; border-radius:10px; overflow:hidden; margin-bottom:8px; }
  .accordion-button{ font-weight:600; }
  .accordion-button:not(.collapsed){ background:#f8f9ff; color:#0102a2; }
  .accordion-button:focus{ box-shadow:0 0 0 .2rem rgba(1,2,162,.15); }
  .accordion-body{ color:#111; }


    :root{
    --fc-blue:#0102a2; --fc-green:#82a522; --ink:#0b1020; --muted:#64748b;
    --bg:#ffffff; --soft:#f6f8ff; --radius:16px; --stroke:#e8edff;
  }
  .fcSect{ padding:12px 0; }
  .fcCard{ background:#fff; border-radius:var(--radius); padding:14px; border:6px solid #f5f5f5; margin-bottom:12px; }
  .fcH{ color:var(--fc-blue); font-weight:800; margin:0 0 8px; font-size:18px; }
  .fcH6{ color:#0f172a; font-weight:700; font-size:16px; margin:6px 0 4px; }
  .fcList{ margin:0 0 6px 18px; padding:0; }
  .fcList li{ margin:4px 0; color:var(--ink); }
  .text-justify{ text-align:justify; }

  /* TOC + pointers */
  .fcTOC{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
  .fcTOC a{ display:inline-flex; gap:8px; align-items:center; text-decoration:none; background:#f7f9ff; border:1px solid #ebefff; color:var(--fc-blue); border-radius:999px; padding:6px 10px; font-size:13px; font-weight:600; }
  .fcTOC a:hover{ background:#eef3ff; }
  .fcPointers{ display:grid; grid-template-columns:1fr; gap:6px; margin-top:6px; }
  @media(min-width:768px){ .fcPointers{ grid-template-columns:repeat(3,1fr); } }
  .fcPoint{ background:#fff; border:1px dashed #dce3ff; border-radius:12px; padding:8px; display:flex; gap:8px; }
  .fcPoint .ic{ flex:0 0 24px; height:24px; display:grid; place-items:center; border-radius:8px; background:#edf1ff; font-weight:800; font-size:13px; }
  .fcPoint .tx{ font-size:13.5px; color:var(--ink); line-height:1.4; }

  /* Pills (one line, 3 items) */
  .key-pills{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:8px 0 10px; }
  .pill{ display:flex; gap:6px; align-items:center; justify-content:center; padding:7px 8px; font-size:12.5px; font-weight:700; color:#0b3ea8; background:#f7f9ff; border:1px solid #ebefff; border-radius:999px; white-space:nowrap; }
  .pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--fc-green); }

  /* Grids + callouts */
  .fcGrid-2{ display:grid; gap:10px; grid-template-columns:1fr; }
  @media(min-width:768px){ .fcGrid-2{ grid-template-columns:1fr 1fr; } }
  .fcCallout{ background:#f8fbff; border:1px dashed #dce3ff; border-left:4px solid #0102a2; border-radius:12px; padding:10px; margin:8px 0; }
  .fcCallout b{ color:#0102a2; }

  /* Benefits grid */
  .grid{ display:grid; gap:10px; margin-top:6px; grid-template-columns:1fr; }
  @media(min-width:768px){ .grid{ grid-template-columns:1fr 1fr; } }
  @media(min-width:1200px){ .grid{ grid-template-columns:1fr 1fr 1fr; } }
  .bcard{ background:#fff; border:1px solid var(--stroke); border-radius:12px; padding:12px 12px 12px 44px; position:relative; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
  .bcard:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(1,2,162,.08); border-color:#d7e3ff; }
  .bcard .ic{ position:absolute; left:10px; top:12px; width:24px; height:24px; border-radius:999px; display:grid; place-items:center; font-size:12px; font-weight:800; background:#eaf4ff; color:var(--fc-blue); border:1px solid #d7eaff; }
  .btitle{ margin:0 0 2px; font-size:15px; color:var(--ink); font-weight:800; }
  .btxt{ margin:0; font-size:13px; color:#64748b; line-height:1.5; }

  /* Timeline */
  .timeline{ display:grid; gap:8px; margin-top:4px; }
  .tstep{ display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; background:#fff; border:1px solid var(--stroke); border-radius:12px; padding:10px; }
  .num{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#fff; border:2px solid #cfe0ff; color:#0102a2; font-weight:800; font-size:12px; }
  .tstep b{ color:#0f172a; font-size:14px; display:block; margin:0 0 2px; }
  .tstep p{ margin:0; color:#64748b; font-size:13px; line-height:1.45; }
  @media(min-width:992px){
    .timeline{ grid-template-columns:repeat(5,1fr); }
    .tstep{ grid-template-columns:1fr; text-align:center; }
    .num{ margin:0 auto 6px; }
  }

  /* Mini comparison table */
  .fcTable-mini{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid #e8edff; border-radius:12px; overflow:hidden; margin-top:8px; }
  .fcTable-mini th,.fcTable-mini td{ padding:10px 12px; font-size:14px; }
  .fcTable-mini thead th{ background:#eef3ff; color:#0102a2; }
  .fcTable-mini tbody tr+tr td{ border-top:1px solid #eef2ff; }