:root{
      --brand:#0ea5e9;   /* medical blue */
      --ink:#0b1220;     /* headings */
      --muted:#475569;   /* body */
      --bg:#ffffff;
      --card:#f8fbff;
      --radius:16px;
      --shadow:0 6px 30px rgba(2,24,55,.08);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
    img{max-width:100%;height:auto;display:block}
    a{color:var(--brand);text-decoration:none}

    .wrap{max-width:1160px;margin:auto;padding:18px}
    .grid{display:grid;gap:18px}
    .hero{grid-template-columns:1fr}
    @media (min-width:960px){.hero{grid-template-columns:1.1fr .9fr}}

    .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}
    .p24{padding:24px}

    h1{font-size:clamp(22px,2.8vw,36px);margin:0 0 8px}
    h2{font-size:clamp(18px,2.2vw,24px);margin:0 0 12px}
    .muted{color:var(--muted)}

    .price-line{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
    .badges{display:flex;flex-wrap:wrap;gap:8px}
    .badge{background:#e6f4ff;color:#0369a1;border-radius:999px;padding:6px 10px;font-size:12px}

    .cta{display:grid;gap:10px;margin-top:14px}
    .btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;font-weight:600;border:1px solid transparent;cursor:pointer}
    .btn-primary{background:var(--brand);color:#fff}
    .btn-ghost{background:#fff;border-color:#dbeafe;color:#0f172a}
    @media (min-width:720px){.cta{grid-auto-flow:column;grid-auto-columns:1fr}}

    .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
    .thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px}

    .hero-img{width:100%;border-radius:14px}

    .ksp{display:grid;gap:12px}
    .ksp ul{margin:0;padding:0}
    .ksp li{list-style:none;background:#fff;border:1px solid #eef2ff;border-radius:12px;padding:12px}

    /* table: horizontal scroll on small screens */
    .table-wrap{overflow:auto}
    .table{min-width:640px;width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}
    .table th,.table td{padding:12px;border-bottom:1px solid #eef2ff;text-align:left;white-space:nowrap}
    .table th{background:#f1f5ff;font-weight:600}

    .faq details{background:#fff;border:1px solid #eef2ff;border-radius:12px;padding:12px}
    .faq details+details{margin-top:10px}

    .compare{display:grid;grid-template-columns:1fr;gap:12px}
    @media (min-width:900px){.compare{grid-template-columns:1fr 1fr}}

    /* ===== Before/After ===== */
    .ba-grid{display:grid;gap:16px;grid-template-columns:1fr}
    @media (min-width:720px){.ba-grid{grid-template-columns:1fr 1fr}}
    .ba-item{margin:0;background:#fff;border:1px solid #eef2ff;border-radius:12px;overflow:hidden}
    .ba-item figcaption{padding:10px 12px;font-size:14px;color:var(--muted)}

    /* sticky buy bar */
    .stickybar{position:sticky;bottom:0;z-index:10;display:grid;gap:10px;grid-template-columns:1fr;background:transparent;margin-top:18px}
    .stickybar .btn{box-shadow:0 8px 24px rgba(14,165,233,.3)}
    @media (min-width:960px){
      .stickybar{position:static;grid-template-columns:repeat(2,auto);justify-content:flex-start}
      .stickybar .btn{box-shadow:none}
    }

    /* small helpers */
    nav[aria-label="breadcrumb"]{font-size:14px}
    .note{font-size:12px;color:var(--muted)}