/* ============================================================
   Treatment hub pages — styles not in brand.css
   ============================================================ */

.at-a-glance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--rad-m);
  overflow: hidden;
  margin-top: 36px;
}
@media (max-width: 880px) { .at-a-glance { grid-template-columns: repeat(2, 1fr); } }
.at-a-glance .cell { background: #fff; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.at-a-glance small { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.at-a-glance b { font: 500 22px/1.1 var(--serif); color: var(--ink); letter-spacing: -.005em; }

.overview-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 880px) { .overview-grid { grid-template-columns: 1fr; gap: 36px; } }
.overview-grid h2 { font: 500 clamp(28px, 3.4vw, 42px)/1.1 var(--serif); margin: 14px 0 18px; max-width: 22ch; }
.overview-grid p { font-size: 16.5px; color: var(--ink-soft); margin: 0 0 16px; }
.overview-grid .aside { background: var(--cream-2); border: 1px solid var(--ink-line); border-radius: var(--rad-m); padding: 26px; position: sticky; top: 96px; }
.overview-grid .aside h4 { font: 500 18px/1.2 var(--serif); margin: 0 0 12px; }
.overview-grid .aside ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.overview-grid .aside li { display: flex; align-items: start; gap: 10px; font-size: 14.5px; color: var(--ink-soft); }
.overview-grid .aside li::before { content: ""; flex: 0 0 auto; margin-top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }

.price-tiers { background: linear-gradient(180deg, #14172a, #1a1d36); color: #f6f4ef; }
.price-tiers .head h2 { color: #fff; }
.price-tiers .head .lede { color: rgba(246,244,239,.72); }
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 880px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: var(--rad-m); padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s ease, transform .25s ease; }
.tier-card:hover { border-color: var(--rose); transform: translateY(-2px); }
.tier-card .area { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
.tier-card .range { font: 500 24px/1.1 var(--serif); color: #fff; margin-top: 4px; }
.tier-card .note { font-size: 13px; color: rgba(246,244,239,.65); margin-top: 6px; }
.tier-card .bar { margin-top: 14px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.tier-card .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--rose), var(--rose-soft)); width: var(--w, 60%); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }
.step { border: 1px solid var(--ink-line); border-radius: var(--rad-m); padding: 26px 22px 22px; background: #fff; }
.step .num { font: 500 36px/1 var(--serif); color: var(--rose); letter-spacing: -.02em; margin-bottom: 14px; display: block; }
.step h4 { font: 500 18px/1.25 var(--serif); margin: 0 0 6px; }
.step p { color: var(--muted); margin: 0; font-size: 14.5px; }

.clinic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .clinic-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .clinic-grid { grid-template-columns: 1fr; } }

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 880px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .related-grid { grid-template-columns: 1fr; } }
.related-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--ink-line); border-radius: var(--rad-m); transition: border-color .2s ease, transform .2s ease; }
.related-card:hover { border-color: var(--rose); transform: translateY(-2px); }
.related-card .ico { width: 38px; height: 38px; border-radius: 10px; background: var(--cream); border: 1px solid var(--ink-line); display: grid; place-items: center; color: var(--rose-deep); flex: 0 0 auto; }
.related-card .meta { display: flex; flex-direction: column; gap: 2px; }
.related-card .name { font: 500 15px/1.2 var(--serif); }
.related-card .price { font: 500 12px/1 var(--mono); color: var(--muted); }

.strip-img { height: clamp(180px, 24vw, 320px); border-radius: var(--rad-l); }

/* FAQ grid used on treatment pages */
.faq-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; }
@media (max-width: 880px) { .faq-grid { grid-template-columns: 1fr; gap: 32px; } }