/* Benefits of Massage - page-specific styles. Loaded after base.css. */

/* ============ Benefits ============ */
.chip-grid{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  max-width:800px;margin-inline:auto;
}
.chip{
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:12px 24px;font-size:16px;font-weight:500;color:var(--ink);
}

.can-list{
  columns:2;column-gap:clamp(28px,4vw,56px);
  list-style:none;max-width:900px;
}
.can-list li{
  break-inside:avoid;
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;
  padding-block:9px;font-size:16px;line-height:1.6;color:var(--ink-soft);
}
.can-list li::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--peri);transform:translateY(-3px);
}
.can-note{
  margin-top:clamp(28px,4vw,38px);padding:16px 20px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  font-size:14.5px;color:var(--ink-soft);max-width:66ch;
}

.ben-cta{text-align:center}
.ben-cta .lede{margin-inline:auto}
.ben-cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}

/* ============ Responsive - page ============ */
@media (max-width:640px){
  .can-list{columns:1}
}