:root{
      --bg:#f3f8ff; --ink:#0b1220; --muted:#5a6473; --brand:#2d7eff;
      --card:#ffffff; --border:#e1ebfb; --shadow:0 10px 30px rgba(45,126,255,.10);
      --accent:#0ea5a4; --good:#0ea66c; --warn:#f59e0b;
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    body{font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--ink);background:var(--bg)}
    img{max-width:100%;height:auto;display:block}
    a{color:var(--brand);text-decoration:none}
    .wrap{max-width:1100px;margin:0 auto;padding:clamp(16px,2.4vw,28px)}
    .hero{
      display:grid;gap:clamp(16px,2vw,24px);
      grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
      align-items:center;margin-top:6px
    }
    @media (max-width:960px){ .hero{grid-template-columns:1fr} }
    .eyebrow{display:inline-block;background:#eaf2ff;color:#0a3ea8;border-radius:999px;padding:6px 12px;font-weight:800;font-size:12px;letter-spacing:.3px}
    h1{font-size:clamp(28px,3vw,40px);line-height:1.15;margin:.4rem 0;color:#0d2b6b}
    .sub{color:var(--muted);margin:0 0 .4rem}
    .hero-img{border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow)}
    .toc, .card{
      background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);
      padding:clamp(14px,2vw,20px); margin:clamp(16px,2vw,22px) 0;
    }
    .toc h3{margin:.2rem 0 .6rem;color:#0d2b6b}
    .toc a{display:block;padding:8px 0;border-bottom:1px dashed var(--border);font-size:15px}
    .toc a:last-child{border-bottom:0}
    h2{font-size:clamp(22px,2.2vw,30px);margin:0 0 .6rem;color:#0d2b6b}
    h3{font-size:clamp(18px,1.8vw,20px);margin:1rem 0 .4rem}
    p{margin:.4rem 0}
    .grid{
      display:grid;gap:clamp(16px,2vw,22px);
      grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    }
    .kpi{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
    .kpi b{color:#0d2b6b}
    table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow);margin-top:.4rem}
    th,td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:15px}
    th{background:#f7fbff;text-align:left;color:#0d2b6b}
    tr:last-child td{border-bottom:0}
    .note{font-size:13px;color:var(--muted)}
    .badge{display:inline-block;background:#ecfdfa;color:#03655f;border:1px solid #c9f2ee;padding:4px 10px;border-radius:999px;font-size:12px}
    .callout{background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);border:1px solid var(--border);border-radius:14px;padding:14px;margin:.6rem 0}
    .cta{text-align:center;margin:clamp(20px,3vw,36px) 0}
    .btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:800}
    .btn-primary{background:var(--brand);color:#fff}
    .btn-outline{background:#fff;border:2px solid var(--brand);color:var(--brand);margin-left:8px}
    footer{text-align:center;color:var(--muted);font-size:13px;margin:36px 0 12px}
    /* ROI calculator */
    .roi{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
    .roi label{font-size:14px;color:#0d2b6b}
    .roi input{width:100%;padding:10px;border-radius:10px;border:1px solid var(--border)}
    .roi .out{background:#f9fbff;border:1px dashed var(--border);border-radius:12px;padding:12px}