:root{
      --ink:#0f172a;         /* deep ink */
      --muted:#64748b;       /* slate */
      --soft:#f8fafc;        /* soft background */
      --brand:#0ea5e9;       /* aqua accent */
      --accent:#10b981;      /* mint accent */
      --card:#ffffff;
      --line:#e2e8f0;
      --radius:18px;
      --shadow:0 10px 30px rgba(2,6,23,.08);
      --maxw:1160px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--soft);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
    a{color:var(--brand);text-decoration:none}
    a:hover{text-decoration:underline}
    .container{max-width:var(--maxw);margin:auto;padding:24px}
    .breadcrumbs{font-size:12px;color:var(--muted);margin:8px 0 16px}
    .breadcrumbs a{color:var(--muted)}
    .hero{position:relative;background:linear-gradient(180deg, #e6f6fe 0%, #fff 100%);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
    .hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;padding:28px}
    .hero h1{font-size:28px;line-height:1.2;margin:0 0 12px}
    .hero p{color:var(--muted);margin:0 0 18px}
    .hero img{width:100%;height:auto;border-radius:16px;display:block}
    .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
    .badge{background:#ecfeff;border:1px solid #cffafe;border-radius:999px;padding:6px 12px;font-size:12px}
    .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
    .btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--line);background:#111827;color:#fff;box-shadow:var(--shadow)}
    .btn--ghost{background:#fff;color:var(--ink)}
    .toc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:24px 0;box-shadow:var(--shadow)}
    .toc h2{font-size:16px;margin:0 0 10px}
    .toc ul{margin:0;padding-left:18px}
    .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:18px 0;box-shadow:var(--shadow)}
    .h2{font-size:22px;margin:0 0 10px}
    .h3{font-size:18px;margin:0 0 6px}
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .note{font-size:14px;color:var(--muted)}
    .pros{list-style: "✓  ";padding-left:24px}
    .pros li{margin:4px 0}
    .callout{border-left:4px solid var(--accent);padding-left:12px}
    .faq summary{cursor:pointer;font-weight:600}
    .faq details{border-top:1px solid var(--line);padding:12px 0}
    .footer-cta{background:linear-gradient(180deg,#e6fff7 0,#fff 100%);border:1px solid #bbf7d0;border-radius:24px;padding:24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
    .footer-cta .btn{background:var(--accent);border-color:#34d399}
    figure{margin:0}
    figcaption{font-size:12px;color:var(--muted);margin-top:6px;text-align:center}
    /* Mobile */
    @media (max-width: 920px){
      .hero-grid{grid-template-columns:1fr}
      .grid-2{grid-template-columns:1fr}
      .grid-3{grid-template-columns:1fr}
      .hero h1{font-size:24px}
    }