/* Sorellina Clinic — /memberships. The plans are painted on the price
   mirror, one row each: name and inclusions, the monthly price in gilt, and
   a join button to Fresha. The phone line sits on the blue counter. */

.plan-rows { list-style: none; margin: 0; padding: 0; }
.plan-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px clamp(20px, 3vw, 44px); align-items: center;
  padding: clamp(20px, 2.4vw, 28px) 0; border-top: 1px solid rgba(201, 161, 74, .18);
}
.plan-row:first-child { border-top: 0; padding-top: 0; }
.plan-row:last-child { padding-bottom: 0; }
.plan-name h3 { font-size: clamp(1.5rem, 2.3vw, 2.2rem); line-height: 1.1; color: var(--on-dark); }
.plan-name p { margin-top: 6px; font-size: .98rem; color: var(--on-dark-2); }
.plan-name .plan-kind { margin-top: 4px; color: var(--gold-light); }
.plan-name .plan-term { margin-top: 4px; color: #f1ece1; font-weight: 500; }
.plan-price { display: grid; justify-items: end; }
.plan-price span { font: 400 clamp(2rem, 3.2vw, 3rem)/1 var(--serif); color: var(--gold); text-shadow: 0 1px 0 var(--gold-shade), 0 2px 1px rgba(0, 0, 0, .5); font-variant-numeric: lining-nums; white-space: nowrap; }
.plan-price small { margin-top: 6px; font-size: .84rem; color: var(--on-dark-2); white-space: nowrap; }
.plan-join { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px; background: var(--gold); color: var(--ink); font-weight: 500; text-decoration: none; border-radius: 2px; transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.plan-join svg { transition: transform 200ms var(--ease-out); }
.plan-join:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .plan-join:hover { background: var(--gold-light); }
  .plan-join:hover svg { transform: translateX(3px); }
}
/* the facial plan, with its minimum term, leads the mirror */
.plan-glow .plan-name h3 { color: var(--gold); text-shadow: 0 1px 0 var(--gold-shade), 0 2px 1px rgba(0, 0, 0, .5); }
@media (max-width: 640px) {
  .plan-row { grid-template-columns: minmax(0, 1fr) auto; }
  .plan-name { grid-column: 1 / -1; }
  .plan-price { justify-items: start; }
}

.talk { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.on-blue .talk h2 { color: var(--on-blue); }
.talk-phone .phone-number { font: 400 clamp(2.2rem, 4.4vw, 3.8rem)/1 var(--serif); color: var(--on-blue); text-decoration: underline; text-decoration-color: rgba(243, 241, 236, .35); text-underline-offset: .16em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; transition: text-decoration-color 160ms ease; }
.talk-phone p { margin-top: 14px; color: #d6e1ea; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .talk-phone .phone-number:hover { text-decoration-color: currentColor; } }
@media (max-width: 760px) { .talk { grid-template-columns: 1fr; } }