/* ============================================================
   CLINIC OS — STYLESHEET
   Built on the SAL Digital brand system (gold on near-black),
   with rose-gold as the single beauty-niche accent.

   TO RE-SKIN FOR A CLIENT: change only the tokens in :root.
   Nothing below :root hard-codes a colour.
   ============================================================ */

:root {
  /* ============================================================
     AURELIA — CLINICAL MONOGRAPH SKIN
     ------------------------------------------------------------
     The clinic's own photography is warm, candlelit and dark. The
     page is therefore pale, cool and quiet, so the photographs are
     the only warm thing on it — plates in a monograph rather than
     decoration on a dark field.

     This is a re-skin of the SAL token system. Every value below
     can be swapped for another clinic without touching a rule.
     ============================================================ */

  /* --- Surfaces: a pale paper with a faint green-grey bias.
         Deliberately not cream — cream with a serif and a gold
         accent is the stock "luxury beauty" look. --- */
  --bg:        #F1F2EE;   /* page */
  --bg2:       #E8EAE3;   /* alternating section */
  --panel:     #FBFCF9;   /* raised surface */
  --panel2:    #E4E7DE;   /* hover / nested */
  --line:      #D4D9CE;   /* hairline */
  --line2:     #B2BAAC;   /* stronger border */

  /* --- Accent: petrol. Clinical rather than decorative, and the
         complement of the amber in the clinic's photographs, so the
         two reinforce each other instead of competing. --- */
  --gold:      #1F4A47;   /* primary */
  --gold2:     #143331;   /* deep — emphasis, prices */
  --gold3:     #0C2423;   /* deepest — gradient ends */
  --on-accent: #F3F5F0;   /* text on an accent field */

  /* --- Secondary: clay, taken from the sunset in the clinic's own
         window. Two appearances per page at most. --- */
  --rose:      #A8623C;
  --rose2:     #8C4E2D;

  /* --- Semantic state, kept separate from the accent --- */
  --ok:        #2C6A4F;
  --warn:      #8A6420;
  --crit:      #8F3D2F;

  /* --- Text --- */
  --txt:       #14181A;
  --muted:     #58605C;
  --muted2:    #848B85;

  /* --- Type ---
     Newsreader for display: a reading serif with the set of a
     journal, deliberately not Cormorant or Playfair.
     IBM Plex Sans and Mono for everything operational — the mono
     carries prices, durations and times, which are the clinic's
     real units and want tabular figures. --- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Rhythm --- */
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --section: clamp(5rem, 12vw, 9rem);
  --maxw:    1200px;
  --r:       4px;         /* near-square: a document, not a card deck */
  --r2:      6px;

  /* Shadows are light on paper. Heavy black shadow on a pale ground
     is the single fastest way to make a site look cheap. */
  --shadow:    0 1px 2px rgba(20,24,26,.05), 0 10px 28px rgba(20,24,26,.07);
  --shadow-lg: 0 28px 70px rgba(20,24,26,.13);
  --glow:      0 0 0 1px rgba(31,74,71,.20), 0 8px 26px rgba(31,74,71,.10);

  /* Scrim used over photography and under fixed chrome */
  --scrim:     rgba(241,242,238,.86);
  --scrim-dk:  rgba(14,18,20,.55);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--gold); color: var(--on-accent); }

/* ---------- TYPE ----------
   Newsreader is a sturdier face than the stock luxury serifs, so it
   is set lighter and a size smaller than they would be, and given
   real optical sizing through the variable `opsz` axis. */
h1, h2, h3 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 48;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.018em;
  text-wrap: balance;
  margin: 0;
}
h1 {
  font-size: clamp(2.7rem, 7vw, 5rem);
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  letter-spacing: -.026em;
  line-height: 1.02;
}
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); font-variation-settings: "opsz" 24; }
h4 { margin: 0; }

/* Section label. A hairline and a lowercase mono annotation, the way
   a figure is labelled in a printed monograph — not a tracked-out
   capital eyebrow, which is the stock generated-page signature. */
.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--gold);
  margin: 0 0 1.5rem;
}
.eyebrow::before {
  content: ""; flex: 0 0 1.6rem; height: 1px; background: currentColor; opacity: .55;
}
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.18rem);
  color: var(--muted);
  max-width: 62ch;
  line-height: 1.72;
}
.muted  { color: var(--muted); }
.muted2 { color: var(--muted2); }

/* Every figure on this site — price, duration, interval, time — is
   set in the mono face with lining tabular figures, so numbers in a
   column line up the way they do on a clinical chart. */
.num, .price, .dur, .slot, .cal__grid button, .recap__row strong {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- LAYOUT ---------- */
.wrap    { width: min(var(--maxw), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.band    { background: var(--bg2); border-block: 1px solid var(--line); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 2.1rem;
  border: 1px solid transparent; border-radius: 2px;
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transition: all .4s var(--ease);
  white-space: nowrap;
}
.btn--gold {
  background: var(--gold);
  color: var(--on-accent);
}
.btn--gold:hover { background: var(--gold2); box-shadow: var(--glow); }
.btn--ghost { background: transparent; color: var(--txt); border-color: var(--line2); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold2); }
.btn:disabled { opacity: .3; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn--block { width: 100%; }

/* ---------- NAV ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem var(--gutter);
  transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: var(--scrim);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  padding-block: .85rem;
  border-bottom-color: var(--line);
}
.nav__brand { text-decoration: none; line-height: 1; }
.nav__brand .bn {
  display: block; font-family: var(--serif); font-size: 1.6rem;
  font-weight: 600; letter-spacing: .02em; color: var(--txt);
}
.nav__brand .bl {
  display: block; font-family: var(--mono); font-size: .58rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-top: .4rem;
}
.nav__links { display: flex; align-items: center; gap: 2.2rem; }
.nav__links a {
  font-size: .78rem; font-weight: 500; letter-spacing: .06em;
  text-decoration: none; color: var(--muted); transition: color .3s var(--ease);
}
.nav__links a:hover { color: var(--gold2); }
.nav__cta { padding: .78rem 1.5rem; font-size: .72rem; }
.nav__burger { display: none; background: none; border: 0; padding: .5rem; }
.nav__burger span { display: block; width: 24px; height: 1.5px; background: var(--txt); margin: 5px 0; transition: .3s var(--ease); }

@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav.is-open { background: var(--bg); }
  .nav.is-open .nav__links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem;
    position: absolute; inset: 100% 0 auto 0;
    background: var(--bg); padding: 2rem var(--gutter) 2.5rem;
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open .nav__links a { font-size: 1rem; }
  .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; grid-template-columns: 1.08fr .92fr; align-items: center;
  gap: clamp(2rem, 6vw, 5.5rem);
  padding: 9rem var(--gutter) 4rem;
}
.hero::before {   /* warm pool of light behind the copy */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 12% 40%, rgba(31,74,71,.07) 0%, transparent 70%);
}
.hero__text { position: relative; max-width: 36rem; }
.hero h1 { margin-bottom: 1.7rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.6rem; }

.hero__media {
  position: relative; aspect-ratio: 4/5;
  border-radius: var(--r2); overflow: hidden;
  background: linear-gradient(150deg, var(--panel), #241C18 60%, #0F0C0B);
  box-shadow: var(--shadow-lg);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(14,18,20,.42) 100%);
}

.promises {
  position: relative; grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: 2.75rem; border-top: 1px solid var(--line);
}
.promise__n {
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; color: var(--rose); margin-bottom: .7rem;
}
.promise h4 {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 500;
  color: var(--txt); margin-bottom: .55rem;
}
.promise p { margin: 0; font-size: .94rem; color: var(--muted); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 7.5rem; }
  .hero__media { aspect-ratio: 3/4; max-height: 58vh; order: -1; }
  .promises { grid-template-columns: 1fr; gap: 1.9rem; }
}

/* ---------- SPLIT (about) ---------- */
.split {
  display: grid; grid-template-columns: .88fr 1.12fr;
  gap: clamp(2rem, 6vw, 5.5rem); align-items: center;
}
.split__media {
  aspect-ratio: 3/4; border-radius: var(--r2); overflow: hidden;
  background: linear-gradient(160deg, var(--panel), #241C18 70%, #0F0C0B);
  box-shadow: var(--shadow);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.creds {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  margin: 1rem 0 1.7rem;
}
.stats { display: flex; flex-wrap: wrap; gap: clamp(2rem,5vw,3.5rem); margin-top: 2.75rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }
.stat__v { font-family: var(--serif); font-size: 2.6rem; font-weight: 500; line-height: 1; color: var(--gold2); }
.stat__l { font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted2); margin-top: .5rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split__media { max-height: 55vh; } }

/* ---------- TREATMENTS ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.75rem 0 2.5rem; }
.filter {
  background: transparent; border: 1px solid var(--line2); border-radius: 100px;
  padding: .58rem 1.35rem;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  transition: all .35s var(--ease);
}
.filter:hover { border-color: var(--gold); color: var(--gold2); }
.filter.is-active { background: var(--gold); border-color: var(--gold); color: #16110A; }

.menu { display: grid; gap: .7rem; }
.item {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center;
  padding: 1.6rem 1.75rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.item:hover { border-color: var(--line2); background: var(--panel2); transform: translateY(-2px); }
.item__name { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; margin: 0 0 .4rem; }
.item__sum  { margin: 0 0 .7rem; color: var(--muted); font-size: .95rem; max-width: 54ch; }
.item__meta {
  display: flex; flex-wrap: wrap; gap: 1.1rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted2);
}
.item__right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .85rem; }
.item__price { font-family: var(--serif); font-size: 1.95rem; font-weight: 500; color: var(--gold2); line-height: 1; white-space: nowrap; }
.item__book {
  background: transparent; border: 1px solid var(--line2); border-radius: 100px;
  padding: .5rem 1.2rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--txt);
  transition: all .3s var(--ease);
}
.item__book:hover { background: var(--gold); border-color: var(--gold); color: #16110A; }
@media (max-width: 660px) {
  .item { grid-template-columns: 1fr; padding: 1.4rem 1.3rem; }
  .item__right { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}

/* ---------- GALLERY ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.shot {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  border-radius: var(--r); margin: 0;
  background: linear-gradient(155deg, var(--panel), #241C18 70%, #0F0C0B);
  border: 1px solid var(--line);
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.shot:hover img { transform: scale(1.05); }
.shot__tag {
  position: absolute; left: .8rem; bottom: .8rem;
  background: var(--scrim); backdrop-filter: blur(10px);
  border: 1px solid var(--line2);
  padding: .38rem .8rem; border-radius: 100px;
  font-family: var(--mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gold2);
}
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* ---------- TRUST (replaces fabricated testimonials) ---------- */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.trust__card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 2rem 1.85rem;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.trust__card:hover { border-color: var(--line2); transform: translateY(-3px); }
.trust__k {
  font-family: var(--mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--rose); margin-bottom: 1rem;
}
.trust__card h3 { font-size: 1.4rem; margin-bottom: .7rem; }
.trust__card p { margin: 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 900px) { .trust { grid-template-columns: 1fr; } }

/* ---------- AREA LINKS ---------- */
.areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.area {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.6rem 1.5rem;
  transition: border-color .35s var(--ease);
}
.area:hover { border-color: var(--line2); }
.area__n {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 500;
  margin: 0 0 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line);
}
.area__l { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.area__l a {
  font-size: .9rem; color: var(--muted); text-decoration: none;
  transition: color .3s var(--ease);
}
.area__l a:hover { color: var(--gold2); }
@media (max-width: 900px) { .areas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .areas { grid-template-columns: 1fr; } }

/* ---------- AFTERCARE ACCORDION ---------- */
.acc { border-top: 1px solid var(--line); }
.acc__row { border-bottom: 1px solid var(--line); }
.acc__head {
  width: 100%; background: none; border: 0; padding: 1.55rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  text-align: left; font-family: var(--serif); font-size: 1.3rem; font-weight: 500;
  color: var(--txt); transition: color .3s var(--ease);
}
.acc__head:hover { color: var(--gold2); }
.acc__sign { position: relative; width: 13px; height: 13px; flex: 0 0 auto; }
.acc__sign::before, .acc__sign::after { content: ""; position: absolute; background: var(--gold); transition: transform .4s var(--ease); }
.acc__sign::before { inset: 6px 0 auto 0; height: 1.5px; }
.acc__sign::after  { inset: 0 5.75px auto auto; width: 1.5px; height: 13px; }
.acc__row.is-open .acc__sign::after { transform: rotate(90deg); }
.acc__body { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
.acc__inner { padding-bottom: 1.9rem; display: grid; gap: 1.6rem; }
.care-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .65rem; }
.care-list li { position: relative; padding-left: 1.4rem; color: var(--muted); font-size: .95rem; }
.care-list li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rose);
}
.care-title {
  font-family: var(--mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 .8rem;
}

/* ---------- CONTACT ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); }
.info-rows { display: grid; gap: 0; margin-top: 2.25rem; }
.info-row {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline;
  padding: 1.15rem 0; border-bottom: 1px solid var(--line);
}
.info-row dt {
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted2);
}
.info-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.info-row a { text-decoration: none; border-bottom: 1px solid var(--line2); transition: border-color .3s, color .3s; }
.info-row a:hover { border-color: var(--gold); color: var(--gold2); }
.hours-list { margin: 0; display: grid; gap: .55rem; margin-top: 1.5rem; font-size: .95rem; }
.hours-row { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); }
.hours-row.is-today { color: var(--txt); }
.hours-row.is-today span:first-child::after {
  content: " · today"; color: var(--gold); font-family: var(--mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .info-row { grid-template-columns: 1fr; gap: .3rem; }
}

/* ---------- FOOTER ---------- */
.foot { background: var(--bg2); border-top: 1px solid var(--line); padding-block: 4rem 2.5rem; }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.foot__brand { font-family: var(--serif); font-size: 1.9rem; font-weight: 500; }
.foot__note { font-size: .88rem; color: var(--muted2); max-width: 40ch; margin-top: .6rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.foot__links a { font-size: .82rem; color: var(--muted); text-decoration: none; transition: color .3s; }
.foot__links a:hover { color: var(--gold2); }
.foot__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 2rem; font-size: .76rem; color: var(--muted2);
}
.foot__by { display: inline-flex; align-items: center; gap: .5rem; }
.foot__by img { height: 26px; width: auto; opacity: .85; }

/* ---------- WHATSAPP CHAT WIDGET ---------- */
.chat { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 850; display: flex; flex-direction: column; align-items: flex-end; gap: .85rem; }
.chat__fab {
  position: relative; width: 58px; height: 58px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: #25D366; color: #fff; border: 0; border-radius: 50%;
  box-shadow: 0 10px 30px rgba(37,211,102,.3);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.chat__fab:hover { transform: scale(1.06); box-shadow: 0 16px 40px rgba(37,211,102,.42); }
.chat__fab svg { width: 30px; height: 30px; fill: currentColor; }
.chat__ping { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: ping 2.4s var(--ease) infinite; }
.chat.is-open .chat__ping { display: none; }
@keyframes ping {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
.chat__card {
  width: min(330px, calc(100vw - 3rem));
  background: var(--panel); border: 1px solid var(--line2);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg);
  transform-origin: bottom right;
  transform: translateY(12px) scale(.94); opacity: 0; visibility: hidden;
  transition: transform .4s var(--ease), opacity .35s var(--ease), visibility .4s;
}
.chat.is-open .chat__card { transform: none; opacity: 1; visibility: visible; }
.chat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; background: #075E54; color: #fff; padding: 1rem 1.15rem; }
.chat__name  { font-family: var(--serif); font-size: 1.12rem; font-weight: 500; line-height: 1.25; }
.chat__reply { font-size: .72rem; opacity: .8; margin-top: .2rem; }
.chat__x { background: none; border: 0; color: #fff; opacity: .7; font-size: 1.35rem; line-height: 1; padding: 0 .15rem; transition: opacity .3s; }
.chat__x:hover { opacity: 1; }
.chat__body { padding: 1.35rem 1.15rem; background: var(--panel2); }
.chat__bubble {
  position: relative; background: var(--panel2); color: var(--txt);
  padding: .8rem .95rem; border-radius: 0 12px 12px 12px;
  border: 1px solid var(--line); font-size: .9rem; line-height: 1.5;
  animation: rise .4s var(--ease);
}
.chat__foot { padding: .9rem 1.15rem 1.05rem; }
.chat__go {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  background: #25D366; color: #fff; text-decoration: none;
  padding: .85rem 1rem; border-radius: 100px;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  transition: background .3s var(--ease);
}
.chat__go:hover { background: #1EBE5B; }
.chat__go svg { width: 19px; height: 19px; fill: currentColor; }
.chat__status { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .7rem; font-size: .7rem; color: var(--muted2); }
.chat__status i { width: 7px; height: 7px; border-radius: 50%; background: #25D366; }
@media (max-width: 560px) { .chat { right: 1rem; bottom: 1rem; } .chat__fab { width: 54px; height: 54px; } }

/* ============================================================
   BOOKING MODAL
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 1rem;
  background: var(--scrim-dk);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.sheet {
  width: min(650px, 100%); max-height: min(92svh, 880px);
  display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--line2);
  border-radius: var(--r2); box-shadow: var(--shadow-lg);
  transform: translateY(18px) scale(.985);
  transition: transform .45s var(--ease);
  overflow: hidden;
}
.modal.is-open .sheet { transform: none; }
.sheet__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.7rem 1.85rem 1.3rem; border-bottom: 1px solid var(--line);
}
.sheet__title { font-family: var(--serif); font-size: 1.65rem; font-weight: 500; }
.sheet__sub {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-top: .4rem;
}
.sheet__x { background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--muted2); padding: .1rem .35rem; transition: color .3s; }
.sheet__x:hover { color: var(--txt); }
.steps { display: flex; gap: .4rem; padding: 1.1rem 1.85rem 0; }
.step-dot { flex: 1; height: 2px; background: var(--line2); transition: background .45s var(--ease); }
.step-dot.is-done { background: var(--gold); }
.sheet__body { padding: 1.6rem 1.85rem 1.85rem; overflow-y: auto; flex: 1; }
.sheet__foot {
  display: flex; gap: .75rem; justify-content: space-between; align-items: center;
  padding: 1.15rem 1.85rem; border-top: 1px solid var(--line); background: var(--bg);
}
.pane { display: none; animation: rise .45s var(--ease); }
.pane.is-active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* --- treatment picker --- */
.pick { display: grid; gap: .5rem; }
.pick__opt {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: center;
  width: 100%; text-align: left; padding: 1rem 1.2rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  transition: all .3s var(--ease);
}
.pick__opt:hover { border-color: var(--gold3); background: var(--panel2); transform: translateX(3px); }
.pick__opt.is-sel { border-color: var(--gold); background: var(--panel2); }
.pick__n { font-family: var(--serif); font-size: 1.18rem; font-weight: 500; }
.pick__d { grid-column: 1; font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2); }
.pick__p { grid-row: 1 / span 2; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; color: var(--gold2); }
.pick__group { font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted2); margin: 1.5rem 0 .6rem; }
.pick__group:first-child { margin-top: 0; }

/* --- calendar --- */
.cal__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.15rem; }
.cal__mo { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.cal__nav { display: flex; gap: .4rem; }
.cal__nav button {
  width: 36px; height: 36px; border: 1px solid var(--line2); background: var(--panel);
  border-radius: 10px; color: var(--muted); transition: all .3s var(--ease);
}
.cal__nav button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold2); }
.cal__nav button:disabled { opacity: .28; cursor: not-allowed; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.cal__dow { text-align: center; font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); padding-bottom: .5rem; }
.cal__day {
  aspect-ratio: 1; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  font-size: .9rem; color: var(--txt); transition: all .25s var(--ease);
  position: relative;
}
.cal__day:hover:not(:disabled) { border-color: var(--gold); color: var(--gold2); }
.cal__day:disabled { background: transparent; border-color: transparent; color: var(--muted2); opacity: .35; cursor: not-allowed; }
.cal__day.is-sel { background: var(--gold); border-color: var(--gold); color: var(--on-accent); font-weight: 600; }
.cal__day.is-empty { background: none; border: 0; }

/* --- slots --- */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .5rem; }
.slot {
  padding: .8rem .4rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r);
  font-size: .93rem; color: var(--txt); transition: all .25s var(--ease);
}
.slot:hover { border-color: var(--gold); color: var(--gold2); }
.slot.is-sel { background: var(--gold); border-color: var(--gold); color: var(--on-accent); font-weight: 600; }
.slots-empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted2); }

/* --- form --- */
.field { margin-bottom: 1.05rem; }
.field label {
  display: block; font-family: var(--mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted2); margin-bottom: .45rem;
}
.field input, .field textarea {
  width: 100%; padding: .88rem 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--sans); font-size: .96rem; color: var(--txt);
  transition: border-color .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted2); }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--gold); }
.field textarea { resize: vertical; min-height: 84px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.check { display: flex; gap: .75rem; align-items: flex-start; margin-top: 1.1rem; font-size: .85rem; color: var(--muted); line-height: 1.55; }
.check input { margin-top: .28rem; accent-color: var(--gold); width: 16px; height: 16px; flex: 0 0 auto; }

.recap { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem 1.3rem; margin-bottom: 1.5rem; }
.recap__row { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; padding: .32rem 0; }
.recap__row strong { font-weight: 600; color: var(--txt); }
.recap__row:last-child { border-top: 1px solid var(--line); margin-top: .55rem; padding-top: .75rem; }
.recap__row:last-child strong { color: var(--gold2); }

/* --- done --- */
.done { text-align: center; padding: 1.5rem 0 .5rem; }
.done__mark {
  width: 64px; height: 64px; margin: 0 auto 1.6rem;
  border: 1px solid var(--gold); border-radius: 50%;
  display: grid; place-items: center; color: var(--gold2); font-size: 1.6rem;
  box-shadow: var(--glow); animation: pop .55s var(--ease);
}
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.done h3 { margin-bottom: .8rem; }
.next-steps { text-align: left; margin-top: 1.85rem; }

/* --- misc --- */
.spinner {
  width: 26px; height: 26px; margin: 2.5rem auto;
  border: 2px solid var(--line2); border-top-color: var(--gold); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.notice {
  background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--gold);
  border-radius: 8px; padding: .9rem 1.05rem; font-size: .87rem; color: var(--muted); margin-bottom: 1.25rem;
}
.err { color: var(--crit); font-size: .87rem; margin-top: .75rem; }

/* ---------- REVEAL ---------- */
/* The hero entrance is the only orchestrated motion on the page.
   Everything else is interaction response. A fade-up on every
   section reads as a template and hides content from anyone who
   lands mid-page. */
@keyframes rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
.hero__text > *, .hero__media { animation: rise .85s var(--ease) backwards; }
.hero__text .eyebrow      { animation-delay: .04s; }
.hero__text h1            { animation-delay: .13s; }
.hero__text .lede         { animation-delay: .25s; }
.hero__text .hero__actions{ animation-delay: .35s; }
.hero__media              { animation-delay: .18s; }
.promises                 { animation: rise .85s var(--ease) .45s backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero__text > *, .hero__media, .promises { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   THE ENGINE — owner-facing section
   ------------------------------------------------------------
   Set as a clinical record rather than a deck of cards: hairline
   rules, square corners, mono figures, one accent. The only
   animation on the page that is not an interaction response lives
   here, and it is the product demo, so it earns its place.
   ============================================================ */

.engine { background: var(--bg2); border-block: 1px solid var(--line); }
.engine__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }

/* ---------- the refill showpiece ---------- */
.refill {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.refill__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
}
.refill__head h3 { margin-bottom: .4rem; }
.refill__sub { font-size: .92rem; margin: 0; }
.refill__play { padding: .85rem 1.5rem; font-size: .72rem; }
.refill__play[data-running] { opacity: .45; pointer-events: none; }

.refill__body {
  display: grid; gap: 1px;
  background: var(--line);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .refill__body { grid-template-columns: 22rem 1fr; } }

/* --- the appointment slot --- */
.refill__slot {
  background: var(--panel);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  display: grid; gap: .7rem; align-content: start;
  border-left: 3px solid var(--line2);
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.slot__time {
  display: flex; align-items: baseline; gap: .6rem;
  font-family: var(--mono); font-size: 1.5rem; font-weight: 500; color: var(--txt);
}
.slot__time .muted2 { font-size: .78rem; font-weight: 400; }
.slot__tx { font-family: var(--serif); font-size: 1.22rem; line-height: 1.25; }
.slot__who {
  font-family: var(--mono); font-size: .85rem; color: var(--muted);
  transition: color .4s var(--ease);
}
.slot__val { font-family: var(--mono); font-size: 1.15rem; font-weight: 500; }
.slot__state {
  justify-self: start;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .04em;
  padding: .3rem .6rem; border-radius: 2px;
  border: 1px solid currentColor; color: var(--muted);
  transition: color .4s var(--ease);
}
/* state is carried on the container so the stripe, the name and the
   chip all move together */
.refill__slot[data-state="booked"]    { border-left-color: var(--line2); }
.refill__slot[data-state="cancelled"] { border-left-color: var(--crit);  background: rgba(143,61,47,.045); }
.refill__slot[data-state="cancelled"] .slot__state,
.refill__slot[data-state="cancelled"] .slot__who { color: var(--crit); }
.refill__slot[data-state="cancelled"] .slot__who { text-decoration: line-through; }
.refill__slot[data-state="hunting"]   { border-left-color: var(--warn);  background: rgba(138,100,32,.05); }
.refill__slot[data-state="hunting"] .slot__state { color: var(--warn); }
.refill__slot[data-state="refilled"]  { border-left-color: var(--ok);    background: rgba(44,106,79,.05); }
.refill__slot[data-state="refilled"] .slot__state,
.refill__slot[data-state="refilled"] .slot__who { color: var(--ok); }

/* --- the waitlist --- */
.refill__list { background: var(--panel); padding: clamp(1.2rem, 3vw, 1.6rem); }
.wl__head {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: .7rem; color: var(--muted2);
  padding-bottom: .75rem; border-bottom: 1px solid var(--line); margin-bottom: .25rem;
}
.wl { list-style: none; margin: 0; padding: 0; }
.wl__row {
  display: grid; align-items: center; gap: .5rem 1rem;
  grid-template-columns: 1.5rem 1fr auto;
  grid-template-areas: "rank name stat" ".  why  stat";
  padding: .85rem .6rem;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  transition: background .45s var(--ease), border-color .45s var(--ease), opacity .45s var(--ease);
}
.wl__row:last-child { border-bottom: 0; }
.wl__rank { grid-area: rank; font-family: var(--mono); font-size: .85rem; color: var(--muted2); }
.wl__name { grid-area: name; font-weight: 500; }
.wl__why  { grid-area: why;  font-size: .84rem; color: var(--muted); }
.wl__stat {
  grid-area: stat;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .03em;
  color: var(--muted2); white-space: nowrap;
  transition: color .4s var(--ease);
}
.wl__row[data-state="notified"] {
  background: rgba(138,100,32,.07); border-left-color: var(--warn);
}
.wl__row[data-state="notified"] .wl__stat { color: var(--warn); }
.wl__row[data-state="passed"]  { opacity: .4; }
.wl__row[data-state="claimed"] {
  background: rgba(44,106,79,.08); border-left-color: var(--ok);
}
.wl__row[data-state="claimed"] .wl__stat { color: var(--ok); font-weight: 600; }

/* the one piece of ambient motion: a notification going out */
@keyframes wlPing {
  0%   { box-shadow: inset 3px 0 0 -1px var(--warn); }
  50%  { box-shadow: inset 3px 0 0 1px var(--warn); }
  100% { box-shadow: inset 3px 0 0 -1px var(--warn); }
}
.wl__row[data-state="notified"] { animation: wlPing 1.4s var(--ease) infinite; }

/* --- commentary + counters --- */
.refill__say {
  margin: 0; padding: 1.1rem clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
  font-size: .95rem; color: var(--muted); min-height: 3.4rem;
  display: flex; align-items: center;
}
.refill__say strong { color: var(--txt); font-weight: 500; }
.refill__foot {
  display: grid; gap: 1px; background: var(--line);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px solid var(--line);
}
.stat { background: var(--panel); padding: 1.1rem clamp(1.4rem, 3vw, 2rem); }
.stat__k { display: block; font-family: var(--mono); font-size: .68rem; color: var(--muted2); margin-bottom: .3rem; }
.stat__v { font-family: var(--mono); font-size: 1.35rem; font-weight: 500; transition: color .4s var(--ease); }
.stat__v[data-flash] { color: var(--ok); }

/* ---------- the catalogue ---------- */
.engine__cat { margin-top: clamp(3rem, 6vw, 4.5rem); }
.cat__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}
.cat__filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.cat__filters button {
  background: transparent; border: 1px solid var(--line2); border-radius: 2px;
  padding: .5rem .9rem;
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  transition: all .3s var(--ease);
}
.cat__filters button:hover { border-color: var(--gold); color: var(--gold); }
.cat__filters button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }

.cat { border-top: 1px solid var(--line2); }
.cat__row {
  display: grid; gap: .5rem 2rem;
  grid-template-columns: 1fr;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) {
  .cat__row { grid-template-columns: minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,.9fr); align-items: start; }
}
.cat__name { font-family: var(--serif); font-size: 1.18rem; line-height: 1.3; }
.cat__when { font-family: var(--mono); font-size: .74rem; color: var(--gold); margin-top: .35rem; display: block; }
.cat__does { font-size: .93rem; color: var(--muted); line-height: 1.65; margin: 0; }
.cat__pay  { font-size: .89rem; color: var(--txt); margin: .6rem 0 0; }
.cat__pay::before { content: "—  "; color: var(--muted2); }
.cat__side { display: grid; gap: .55rem; align-content: start; }
.cat__needs { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.cat__needs li { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.cat__needs li::before { content: "+ "; color: var(--muted2); }
.cat__tag {
  justify-self: start;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .03em;
  padding: .28rem .55rem; border-radius: 2px;
  border: 1px solid var(--ok); color: var(--ok);
}
.cat__tag[data-bundled] { border-color: var(--line2); color: var(--muted2); }
.cat__fee { font-family: var(--mono); font-size: .95rem; font-weight: 500; color: var(--txt); }
.cat__note { font-size: .82rem; margin-top: 1.5rem; max-width: 62ch; line-height: 1.6; }

/* ---------- reduced motion ----------
   The sequence still runs and still tells the story; it simply
   arrives at each state without animating into it. */
@media (prefers-reduced-motion: reduce) {
  .wl__row[data-state="notified"] { animation: none; }
  .refill__slot, .wl__row, .slot__who, .slot__state, .wl__stat, .stat__v { transition: none; }
}

/* ---------- WAITLIST (booking flow) ----------
   Shown when a day is full. Styled as part of the booking sheet, not
   as a consolation prize. */
.wlist { display: grid; gap: 1.25rem; }
.wlist__top h4 { font-family: var(--serif); font-size: 1.45rem; margin-bottom: .5rem; }
.wlist__top p  { margin: 0; font-size: .93rem; line-height: 1.65; }

.wlist__flex { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; }
.wlist__flex legend {
  font-family: var(--mono); font-size: .7rem; color: var(--muted2);
  padding: 0; margin-bottom: .35rem;
}
.wlist__flex label {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .8rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.wlist__flex label:hover { border-color: var(--line2); }
.wlist__flex input { margin-top: .22rem; accent-color: var(--gold); flex: 0 0 auto; }
.wlist__flex label:has(input:checked) { border-color: var(--gold); background: rgba(31,74,71,.04); }
.wlist__flex label span { display: grid; gap: .15rem; }
.wlist__flex strong { font-weight: 500; font-size: .95rem; }
.wlist__flex em { font-style: normal; font-size: .82rem; color: var(--muted); }

.wlist__small { font-size: .78rem; line-height: 1.55; margin: 0; }
.wlist--done { text-align: left; }
.wlist--done h4 { font-family: var(--serif); font-size: 1.5rem; color: var(--ok); margin-bottom: .6rem; }

/* ---------- PLATES ----------
   Photographs set as plates in a monograph: full measure, a hairline
   frame, and a mono caption that says what the reader is looking at.
   The page is pale so these carry all the warmth. */
.plate { margin: 0; }
.plate img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.plate figcaption {
  font-family: var(--mono); font-size: .74rem; color: var(--muted);
  margin-top: .7rem; line-height: 1.5;
}
.plate--wide { padding-inline: var(--gutter); }
.plate--wide figcaption { max-width: 62ch; }

/* Aftercare accordion sits beside the tray, not under it */
.acc-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .acc-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.plate--tall img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------- TOUCH TARGETS ----------
   Measured at 390px: the nav action and the catalogue filters came in
   under 44px. Nothing tappable is allowed below that. */
@media (max-width: 900px) {
  .nav__cta,
  .cat__filters button { min-height: 44px; padding-block: .7rem; }
  .info-rows a,
  .foot__links a { display: inline-block; min-height: 44px; line-height: 44px; }
  .refill__play { min-height: 46px; width: 100%; }
}

/* ---------- CALENDAR AVAILABILITY ----------
   The month knows what is free before anybody clicks a day. A day that
   is full is still clickable, because that is the way in to the
   waitlist — it is just never a surprise. */
.cal__day.is-free::after {
  content: ""; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--ok);
}
.cal__day.is-full {
  color: var(--muted2);
  border-style: dashed;
  border-color: var(--line2);
  background: transparent;
}
.cal__day.is-full::after {
  content: ""; position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 1px; background: var(--muted2);
}
.cal__day.is-full:hover { border-color: var(--warn); color: var(--warn); }
.cal__day.is-full:hover::after { background: var(--warn); }
.cal__day.is-sel::after { background: var(--on-accent); }

.cal__key {
  display: flex; flex-wrap: wrap; gap: 1.1rem;
  margin-top: .9rem;
  font-family: var(--mono); font-size: .7rem; color: var(--muted);
}
.cal__key span { display: inline-flex; align-items: center; gap: .4rem; }
.cal__key i { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }
.cal__key i[data-full] { width: 9px; height: 1px; border-radius: 0; background: var(--muted2); }

/* Demo-mode note where a real clinic would have a form button. */
.form-note {
  margin: 1.5rem 0 0;
  padding: .95rem 1.1rem;
  border: 1px dashed var(--line2);
  border-radius: var(--r);
  font-size: .86rem; line-height: 1.6; color: var(--muted);
}
.form-note strong { color: var(--txt); font-weight: 500; }
.form-note code {
  font-family: var(--mono); font-size: .82em;
  background: var(--panel2); padding: .1em .35em; border-radius: 2px;
}