/* ============================================================
   AXIS, the clinic page. Loaded after site.css, scoped to
   body.medspa. The AXIS surface does not change: same ground,
   same volt, same curves, same type. What changes is the sample
   business inside the devices, porcelain and mulberry instead of
   the plumber's cream and forest, and two surfaces this audience
   needs that the trades page does not: the missed call log, and
   the grid of worked examples with the text each one sends.
   ============================================================ */

.medspa{
  --hl-bg:#F7F2F0;
  --hl-ink:#231B18;
  --hl-dim:rgba(35,27,24,.66);
  --hl-line:rgba(35,27,24,.12);
  --hl-brand:#6D2E4C;
  --hl-brand-ink:#F7F2F0;
}
.medspa .hl-call:hover,.medspa .hld-call:hover{background:#3b2e29}
.medspa .hl-book:hover,.medspa .hld-book:hover{background:#5b2540}

/* the sample's rating line carries a registration fact, not stars */
.medspa .hl-rating{display:block}

/* ---------- the missed call, as the phone shows it ---------- */
.calllog{
  display:grid;grid-template-columns:1fr auto;gap:.25rem 1.5rem;align-items:baseline;
  max-width:44rem;margin-bottom:1.5rem;
  padding:1.1rem 1.35rem 1.2rem;
  border:1px solid var(--hair2);border-radius:var(--r-md);
  background:rgba(0,0,0,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.10);
}
.calllog > div{grid-column:1;grid-row:1}
.calllog-tag{display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#f87171}
.calllog-num{font-family:var(--display);font-weight:500;font-size:1.35rem;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.calllog-time{grid-column:2;grid-row:1 / 3;align-self:center;justify-self:end;font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em;color:var(--faint);font-variant-numeric:tabular-nums}
.calllog-note{grid-column:1 / -1;font-size:.88rem;color:var(--faint);margin-top:.35rem;max-width:44ch}

/* ---------- eight jobs, each with the text it sends ---------- */
.ex-grid{
  list-style:none;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-md);overflow:clip;
}
.ex{display:flex;flex-direction:column;gap:.55rem;background:var(--bg);padding:1.4rem 1.4rem 1.5rem}
.ex h3{font-size:1.02rem;letter-spacing:0}
.ex p{font-size:.88rem;line-height:1.5;color:var(--quiet)}
.ex-sms{
  margin-top:auto;padding-top:.85rem;
  font-size:.8rem;line-height:1.45;color:var(--dim);
}
.ex-sms span{
  display:inline-block;background:var(--accent-dim);border:1px solid rgba(232,255,71,.22);
  border-radius:var(--r-md) var(--r-md) var(--r-md) .25rem;padding:.55rem .75rem;
}
.ex-sums{margin-top:1.5rem}

@media (max-width:1100px){
  .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ex-grid{grid-template-columns:1fr}
  .calllog-time{font-size:1.5rem}
}