.treatments-page { background: #f5faf9; }
.procedure-container { padding-top: 8px; padding-bottom: 20px; }
.procedure-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; background: white; color: #5687ed; font: 700 10px/1.2 'Poppins',sans-serif; letter-spacing: .3px; margin-bottom: 15px; }
.procedure-tag svg { width: 11px; height: 11px; }
.procedure-hero { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 25px; border-radius: 20px; background: radial-gradient(ellipse at 80% 10%,#007263,#002d27 80%); padding: 35px 45px; color: white; box-shadow: 0 12px 25px #103a3519; }
.procedure-hero .procedure-tag,.procedure-appointment .procedure-tag { background: #006750; color: #31e1b7; }
.procedure-hero h1 { color: white; font-size: 36px; line-height: 1.08; letter-spacing: -.9px; margin: 0 0 16px; }
.procedure-hero p { color: #c7e2da; font-size: 14px; line-height: 1.6; margin: 0 0 23px; }
.procedure-hero > img { width: 100%; height: auto; border-radius: 12px; }
.procedure-hero-features { display: flex; gap: 20px; flex-wrap: wrap; }
.procedure-hero-features span { display: flex; gap: 7px; align-items: center; font-size: 10px; font-weight: 600; }
.procedure-hero-features svg { width: 21px; height: 21px; color: #87d9c4; }
.procedure-services { padding-top: 32px; }
.procedure-intro { display: grid; grid-template-columns: 1.6fr 1fr; gap: 35px; align-items: center; }
.procedure-intro h2 { font-size: 36px; line-height: 1.1; margin: 0 0 12px; letter-spacing: -1.2px; }
.procedure-intro h2 span { color: #00a789; }
.procedure-intro p { font-size: 14px; line-height: 1.4; margin: 0; }
.procedure-help { display: flex; align-items: center; gap: 13px; background: #e5f6f1; border-radius: 18px; padding: 20px; }
.procedure-help > span { background: white; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; color: #00a88d; flex-shrink: 0; }
.procedure-help svg { width: 32px; height: 32px; }
.procedure-help strong { display: block; color: #005f59; font-size: 14px; line-height: 1.35; }
.procedure-help small { display: block; color: #70858b; font-size: 10px; margin-top: 7px; }
.procedure-help b { margin-left: auto; color: white; background: #009981; border-radius: 8px; padding: 5px 9px; }
.procedure-filters { margin: 26px 0 20px; gap: 12px; }
.procedure-filters .filter { border: 0; border-radius: 25px; padding: 12px 27px; font-size: 11px; box-shadow: 0 4px 12px #134e4406; }
.procedure-filters .filter.active { background: linear-gradient(110deg,#00b897,#008c77); box-shadow: 0 5px 12px #00a78920; }
.procedure-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: start; }
.procedure-card { padding: 22px; background: white; border: 1px solid #edf3f0; border-radius: 18px; box-shadow: 0 7px 20px #194d4510; min-width: 0; }
.procedure-card-body { min-height: 140px; padding-right: 93px; position: relative; }
.procedure-icon { display: grid; place-items: center; width: 46px; height: 46px; background: #e6faf4; color: #00b395; border-radius: 13px; margin-bottom: 10px; }
.procedure-icon svg { width: 27px; height: 27px; }
.procedure-card-body > img { position: absolute; top: 0; right: 0; width: 80px; height: auto; max-height: 113px; object-fit: contain; }
.procedure-card h3 { font-size: 15px; line-height: 1.3; letter-spacing: -.4px; margin: 0 0 7px; }
.procedure-card-body p { font-size: 11px; line-height: 1.45; margin: 0 0 12px; }
.procedure-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 10px; }
.procedure-meta > div { display: flex; gap: 6px; align-items: center; background: #edf9f5; border: 1px solid #dff5ed; border-radius: 9px; padding: 8px; }
.procedure-meta svg { width: 17px; height: 17px; flex-shrink: 0; color: #00af8c; }
.procedure-meta small { display: block; font-size: 7px; color: #7b9499; }
.procedure-meta strong { display: block; font-size: 9px; line-height: 1.4; color: #234f5a; }
.procedure-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.procedure-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(110deg,#00b995,#008d75); color: white; border: 1px solid transparent; border-radius: 22px; padding: 9px 16px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.procedure-button svg { width: 16px; height: 16px; }
.procedure-details { background: transparent; border: 0; color: #009b83; font-size: 10px; font-weight: 700; padding: 5px 0; }
.procedure-detail-panel { border-top: 1px solid #e2efeb; padding-top: 12px; margin-top: 14px; font-size: 12px; line-height: 1.5; color: #657c7a; }
.procedure-feature-strip { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin-top: 25px; background: #eaf8f3; border-radius: 17px; padding: 18px 15px; }
.procedure-feature-strip > div { display: flex; align-items: center; gap: 13px; padding: 0 14px; }
.procedure-feature-strip > div + div { border-left: 1px solid #cbe8de; }
.procedure-feature-strip svg { width: 26px; height: 26px; color: #00a681; flex-shrink: 0; }
.procedure-feature-strip strong { display: block; font-size: 9px; line-height: 1.4; }
.procedure-feature-strip small { display: block; font-size: 10px; color: #72838b; }
.procedure-highlights { padding: 30px 0 20px; }
.procedure-highlights h2 { font-size: 29px; margin: 0 0 9px; }
.procedure-highlights > p { font-size: 13px; line-height: 1.4; margin-bottom: 20px; }
.procedure-highlight-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.procedure-highlight-grid article { display: flex; align-items: center; gap: 13px; background: white; border-radius: 16px; padding: 20px; }
.procedure-highlight-grid article > span { display: grid; place-items: center; background: #e4f9f2; color: #00b08a; width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; }
.procedure-highlight-grid svg { width: 27px; height: 27px; }
.procedure-highlight-grid h3 { font-size: 11px; margin: 0 0 7px; letter-spacing: -.2px; }
.procedure-highlight-grid p { font-size: 10px; line-height: 1.4; margin: 0; }
.procedure-appointment { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 25px 40px; border-radius: 18px; background: linear-gradient(110deg,#004d3b,#002e28); color: white; }
.procedure-appointment h2 { color: white; font-size: 26px; line-height: 1.1; margin: 0 0 12px; }
.procedure-appointment p { color: #cce7df; font-size: 12px; line-height: 1.4; margin: 0; max-width: 420px; }
.procedure-appointment-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.procedure-appointment .procedure-button { padding: 12px 20px; }
.procedure-appointment .outline { background: #ffffff09; border-color: #70bda44d; }
@media(max-width:1100px) { .procedure-hero { padding: 30px; } .procedure-hero h1 { font-size: 30px; } .procedure-grid { grid-template-columns: 1fr 1fr; } .procedure-feature-strip { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 0; } .procedure-feature-strip > div:nth-child(4) { border-left: 0; } .procedure-highlight-grid { grid-template-columns: 1fr 1fr; } .procedure-appointment { flex-direction: column; align-items: flex-start; } }
@media(max-width:760px) {
  .procedure-hero,.procedure-intro { grid-template-columns: 1fr; gap: 25px; }
  .procedure-hero { padding: 26px 23px; }
  .procedure-hero h1 { font-size: 30px; }
  .procedure-hero > img { max-width: 380px; justify-self: center; }
  .procedure-intro h2 { font-size: 30px; }
  .procedure-help { max-width: none; }
  .procedure-filters { gap: 8px; }
  .procedure-filters .filter { padding: 10px 16px; font-size: 10px; }
  .procedure-grid { grid-template-columns: 1fr; }
  .procedure-card { padding: 22px; }
  .procedure-card h3 { font-size: 17px; }
  .procedure-card-body p { font-size: 13px; }
  .procedure-meta small { font-size: 8px; }
  .procedure-meta strong { font-size: 10px; }
  .procedure-button { font-size: 12px; }
  .procedure-details { font-size: 12px; }
  .procedure-feature-strip { grid-template-columns: 1fr 1fr; padding: 18px 7px; }
  .procedure-feature-strip > div:nth-child(odd) { border-left: 0; }
  .procedure-feature-strip > div:nth-child(4) { border-left: 1px solid #cbe8de; }
  .procedure-feature-strip strong { font-size: 8px; }
  .procedure-feature-strip small { font-size: 9px; }
  .procedure-feature-strip > div { padding: 0 8px; gap: 8px; }
  .procedure-highlight-grid article { flex-direction: column; align-items: flex-start; padding: 17px; }
  .procedure-highlight-grid h3 { font-size: 12px; }
  .procedure-highlight-grid p { font-size: 11px; }
  .procedure-appointment { padding: 26px; }
  .procedure-appointment-actions { gap: 10px; }
}