/* ============================================================
   Signal Spa · Booking Calendar Widget
   Custom-built. Printer's marks, hairline rules, serif italics.
   Mobile-first. Sits inside the .book-wrap band on /lp/book.html.
   ============================================================ */

:root{
  --ss-cream:        var(--cream);
  --ss-cream-dim:    rgba(245,239,228,0.62);
  --ss-cream-faint:  rgba(245,239,228,0.32);
  --ss-cream-ghost:  rgba(245,239,228,0.14);
  --ss-hairline:     rgba(245,239,228,0.12);
  --ss-hairline-soft:rgba(245,239,228,0.07);
  --ss-gold:         var(--gold);
  --ss-gold-soft:    var(--gold-soft);
  --ss-gold-glow:    rgba(201,166,107,0.32);
  --ss-ink-deep:     #0F1F18;
}

/* ===== Stage / container ===== */
.ss-cal{
  position:relative;
  display:block;
  width:100%;
  max-width:540px;
  margin:0 auto;
  color:var(--ss-cream);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
}

.ss-cal-stage{
  position:relative;
  padding:22px 22px 28px;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(201,166,107,0.045), transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(201,166,107,0.025), transparent 60%),
    linear-gradient(180deg, rgba(245,239,228,0.014), rgba(245,239,228,0.022));
  border-radius:2px;
}

/* Corner registration marks (printer's marks) */
.ss-cal-corner{
  position:absolute;
  width:13px; height:13px;
  pointer-events:none;
  color:var(--ss-gold);
  opacity:0;
  animation:ss-corner .8s cubic-bezier(.2,.7,.2,1) .2s forwards;
}
.ss-cal-corner::before, .ss-cal-corner::after{
  content:""; position:absolute; background:currentColor;
}
.ss-cal-corner::before{ width:13px; height:1px; }
.ss-cal-corner::after{  width:1px; height:13px; }
.ss-cal-corner.tl{ top:0; left:0; }
.ss-cal-corner.tl::before, .ss-cal-corner.tl::after{ top:0; left:0; }
.ss-cal-corner.tr{ top:0; right:0; animation-delay:.28s; }
.ss-cal-corner.tr::before{ top:0; right:0; }
.ss-cal-corner.tr::after{ top:0; right:0; }
.ss-cal-corner.bl{ bottom:0; left:0; animation-delay:.36s; }
.ss-cal-corner.bl::before{ bottom:0; left:0; }
.ss-cal-corner.bl::after{ bottom:0; left:0; }
.ss-cal-corner.br{ bottom:0; right:0; animation-delay:.44s; }
.ss-cal-corner.br::before{ bottom:0; right:0; }
.ss-cal-corner.br::after{ bottom:0; right:0; }
@keyframes ss-corner{ to{ opacity:1; } }

/* ===== Step indicator ===== */
.ss-cal-steps{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:nowrap;
  gap:clamp(8px, 3vw, 14px);
  margin-bottom:26px;
  opacity:0;
  animation:ss-fade .8s cubic-bezier(.2,.7,.2,1) .3s forwards;
}
.ss-step{
  display:inline-flex; align-items:baseline; gap:8px;
  color:rgba(245,239,228,0.38);
  transition:color .4s ease;
  min-width:0;
}
.ss-step-num{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(17px, 4.6vw, 20px);
  letter-spacing:.02em;
  line-height:1;
  color:rgba(245,239,228,0.34);
  transition:color .4s ease;
  flex-shrink:0;
}
.ss-step-label{
  font-size:clamp(8.25px, 2.4vw, 9.5px);
  letter-spacing:clamp(.16em, .6vw, .26em);
  text-transform:uppercase;
  font-weight:500;
  white-space:nowrap;
}
.ss-step.is-active{ color:var(--ss-cream); }
.ss-step.is-active .ss-step-num{ color:var(--ss-gold); }
.ss-step.is-done{ color:rgba(245,239,228,0.55); }
.ss-step.is-done .ss-step-num{ color:var(--ss-gold-soft); }
.ss-step-rule{
  flex:0 1 auto;
  width:clamp(14px, 7vw, 36px);
  height:1px;
  background:linear-gradient(90deg, rgba(201,166,107,0.05), rgba(201,166,107,0.5), rgba(201,166,107,0.05));
}

/* ===== Section eyebrow (dashes + label) ===== */
.ss-cal-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(245,239,228,0.55);
  margin:0 0 12px;
  opacity:0;
  animation:ss-fade .8s cubic-bezier(.2,.7,.2,1) .35s forwards;
}
.ss-cal-eyebrow .dash{
  width:16px; height:1px;
  background:rgba(201,166,107,0.5);
  flex-shrink:0;
}
.ss-cal-eyebrow .dot{
  width:3px; height:3px; border-radius:50%;
  background:var(--ss-gold);
  flex-shrink:0;
}

/* ===== Title ===== */
.ss-cal-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(22px, 5.5vw, 28px);
  line-height:1.1;
  letter-spacing:-.015em;
  text-align:center;
  margin:0 0 8px;
  color:var(--ss-cream);
  opacity:0;
  animation:ss-rise .9s cubic-bezier(.2,.7,.2,1) .42s forwards;
}
.ss-cal-title em{ font-style:italic; color:var(--ss-gold); }

/* Section-style title, even quieter, used as a step label */
.ss-cal-title.is-section{
  font-size:clamp(18px, 4.4vw, 22px);
  letter-spacing:.005em;
  color:rgba(245,239,228,0.88);
  position:relative;
  padding-bottom:14px;
  margin:0 0 22px;
}
.ss-cal-title.is-section::after{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  transform:translateX(-50%);
  width:28px; height:1px;
  background:linear-gradient(90deg, transparent, var(--ss-gold), transparent);
}

.ss-cal-sub{
  font-size:14px;
  font-weight:300;
  line-height:1.55;
  text-align:center;
  max-width:36ch;
  margin:0 auto 26px;
  color:rgba(245,239,228,0.72);
  opacity:0;
  animation:ss-rise .9s cubic-bezier(.2,.7,.2,1) .5s forwards;
}
.ss-cal-sub em{ font-style:italic; color:var(--ss-gold-soft); }

/* ===== Unified panel layout =====
   Step 1 shows form fields above a blurred calendar preview, with the
   primary CTA pinned at the bottom. On submit, the form-wrap collapses
   (grid 1fr → 0fr) and the calendar unblurs in place; the button at
   the bottom stays put so the action feels continuous. */
.ss-cal-section.is-unified{
  display:block;
}

.ss-cal-form-wrap{
  display:grid;
  grid-template-rows:1fr;
  transition:
    grid-template-rows .65s cubic-bezier(.2,.7,.2,1),
    opacity .45s ease,
    margin .55s cubic-bezier(.2,.7,.2,1),
    filter .45s ease;
  margin-bottom:0;
}
.ss-cal-form-wrap > .ss-cal-form-inner{
  min-height:0;
  overflow:hidden;
}
.ss-cal-form-wrap.is-closed{
  grid-template-rows:0fr;
  opacity:0;
  margin-bottom:-2px;
  pointer-events:none;
  filter:blur(1.5px);
}

/* ===== Form fields, underline only ===== */
.ss-cal-form{
  display:flex; flex-direction:column;
  gap:22px;
  margin-top:8px;
  opacity:0;
  animation:ss-rise .9s cubic-bezier(.2,.7,.2,1) .58s forwards;
}
.ss-cal-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.ss-cal-field{
  position:relative;
  display:flex; flex-direction:column;
}
.ss-cal-field label{
  font-size:9.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ss-gold-soft);
  margin-bottom:8px;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.ss-cal-field label::before{
  content:"";
  width:6px; height:1px;
  background:var(--ss-gold);
  flex-shrink:0;
}
.ss-cal-field input{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--ss-hairline);
  padding:6px 0 8px;
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  color:var(--ss-cream);
  letter-spacing:.005em;
  outline:none;
  border-radius:0;
  transition:border-color .25s ease;
  -webkit-appearance:none;
}
.ss-cal-field input::placeholder{
  color:rgba(245,239,228,0.28);
}
.ss-cal-field input:focus{
  border-bottom-color:var(--ss-gold);
}
.ss-cal-field input.is-error{
  border-bottom-color:#C97A6B;
  animation:ss-shake .35s cubic-bezier(.2,.7,.2,1);
}
/* Animated gold underline on focus */
.ss-cal-field{ overflow:hidden; }
.ss-cal-field::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:1px;
  width:100%;
  background:var(--ss-gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.ss-cal-field:focus-within::after{ transform:scaleX(1); }

@keyframes ss-shake{
  0%, 100% { transform:translateX(0); }
  20% { transform:translateX(-4px); }
  40% { transform:translateX(4px); }
  60% { transform:translateX(-2px); }
  80% { transform:translateX(2px); }
}

/* Autofill: suppress Chrome's painted bg so the transparent input shows through.
   Transparent inset shadow blocks the yellow; a 100000s transition delay
   prevents Chrome from ever animating its bg color in. Lock padding/font so
   autofilled text renders identically to manually typed text. */
.ss-cal-field input:-webkit-autofill,
.ss-cal-field input:-webkit-autofill:hover,
.ss-cal-field input:-webkit-autofill:focus,
.ss-cal-field input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--ss-cream);
  -webkit-box-shadow:0 0 0 1000px transparent inset;
  box-shadow:0 0 0 1000px transparent inset;
  transition:background-color 100000s 0s, color 100000s 0s, -webkit-text-fill-color 100000s 0s;
  caret-color:var(--ss-gold);
  padding:6px 0 8px;
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  letter-spacing:.005em;
}

.ss-cal-consent{
  font-size:11px;
  line-height:1.55;
  color:rgba(245,239,228,0.5);
  text-align:center;
  margin:6px 0 0;
  letter-spacing:.005em;
}
.ss-cal-consent a{
  color:rgba(245,239,228,0.72);
  border-bottom:1px solid rgba(245,239,228,0.22);
  padding-bottom:1px;
  transition:color .25s, border-color .25s;
}
@media (hover: hover){
  .ss-cal-consent a:hover{
    color:var(--ss-gold);
    border-bottom-color:var(--ss-gold);
  }
}

/* ===== Primary button ===== */
.ss-cal-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:14px;
  width:100%;
  padding:18px 24px;
  background:var(--ss-gold);
  color:var(--forest-deep);
  border:1px solid var(--ss-gold);
  border-radius:999px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  margin-top:8px;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, border-color .3s;
}
.ss-cal-btn::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
@media (hover: hover){
  .ss-cal-btn:hover{
    background:var(--forest-deep);
    color:var(--ss-cream);
    border-color:var(--ss-gold);
  }
  .ss-cal-btn:hover::before{ transform:translateX(120%); }
  .ss-cal-btn:hover .ss-cal-btn-arrow{ width:28px; }
}
/* Touch-equivalent of hover: triggered by JS only when form validates */
.ss-cal-btn.is-submitting{
  background:var(--forest-deep);
  color:var(--ss-cream);
  border-color:var(--ss-gold);
}
.ss-cal-btn.is-submitting::before{ transform:translateX(120%); }
.ss-cal-btn.is-submitting .ss-cal-btn-arrow{ width:28px; }
.ss-cal-btn:disabled{ opacity:.65; cursor:wait; }
.ss-cal-btn-arrow{
  display:inline-block;
  width:18px; height:1px;
  background:currentColor;
  position:relative;
  transition:width .35s cubic-bezier(.2,.7,.2,1);
}
.ss-cal-btn-arrow::after{
  content:"";
  position:absolute; right:0; top:-3px;
  width:7px; height:7px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.ss-cal-btn.is-loading .ss-cal-btn-arrow{
  display:inline-block;
  width:14px; height:14px;
  border:1.5px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  background:transparent;
  animation:ss-spin .7s linear infinite;
}
.ss-cal-btn.is-loading .ss-cal-btn-arrow::after{ display:none; }

@keyframes ss-spin{ to{ transform:rotate(360deg); } }

/* ===== Step 2: contact summary strip ===== */
.ss-cal-summary{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "head edit"
    "name name";
  align-items:center;
  column-gap:14px;
  row-gap:8px;
  padding:12px 14px 13px;
  margin:0 auto 22px;
  max-width:480px;
  border-top:1px solid var(--ss-hairline);
  border-bottom:1px solid var(--ss-hairline);
  color:rgba(245,239,228,0.62);
  opacity:0;
  animation:ss-fade .7s ease .15s forwards;
}
.ss-cal-summary-head{
  grid-area:head;
  display:inline-flex; align-items:center; gap:9px;
  min-width:0;
}
.ss-cal-summary-mark{
  width:5px; height:5px; border-radius:50%;
  background:var(--ss-gold);
  flex-shrink:0;
  box-shadow:0 0 0 0 var(--ss-gold-glow);
  animation:ss-pulse 2.6s ease-in-out infinite;
}
.ss-cal-summary-label{
  font-size:9px; letter-spacing:.30em; text-transform:uppercase;
  font-weight:500;
  color:var(--ss-gold-soft);
  white-space:nowrap;
}
.ss-cal-summary-name{
  grid-area:name;
  font-family:var(--serif);
  font-style:italic;
  font-size:16px;
  line-height:1.25;
  letter-spacing:.005em;
  color:var(--ss-cream);
  min-width:0;
  word-break:break-word;
}
.ss-cal-summary-sep{
  display:inline-block;
  margin:0 .55em;
  font-style:normal;
  color:var(--ss-gold);
  font-size:.85em;
  vertical-align:.08em;
}
.ss-cal-edit{
  grid-area:edit;
  justify-self:end;
  font-size:9.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ss-gold-soft);
  background:none; border:0; padding:4px 0;
  cursor:pointer;
  position:relative;
  transition:color .25s;
}
.ss-cal-edit::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background:currentColor;
  opacity:.4;
  transform:scaleX(.5); transform-origin:left;
  transition:transform .35s, opacity .25s;
}
@media (hover: hover){
  .ss-cal-edit:hover{ color:var(--ss-gold); }
  .ss-cal-edit:hover::after{ transform:scaleX(1); opacity:1; }
}

@keyframes ss-pulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(201,166,107,0.55); opacity:.95; }
  50%     { box-shadow:0 0 0 7px rgba(201,166,107,0);   opacity:.55; }
}

/* ===== Calendar ===== */
.ss-cal-calendar{
  position:relative;
  margin:6px auto 24px;
  max-width:420px;
  /* Horizontal drags are ours (month swipe); vertical still scrolls the page. */
  touch-action:pan-y;
}

/* Directional month transition — applied for one render after a button press
   or swipe. The day cells keep their own staggered entrance underneath. */
@keyframes ss-month-next{
  from{ opacity:0; transform:translateX(20px); }
  to{ opacity:1; transform:none; }
}
@keyframes ss-month-prev{
  from{ opacity:0; transform:translateX(-20px); }
  to{ opacity:1; transform:none; }
}
.ss-cal-grid.is-slide-next,
.ss-cal-month-title.is-slide-next{
  animation:ss-month-next .34s cubic-bezier(.2,.7,.2,1) both;
}
.ss-cal-grid.is-slide-prev,
.ss-cal-month-title.is-slide-prev{
  animation:ss-month-prev .34s cubic-bezier(.2,.7,.2,1) both;
}
@media (prefers-reduced-motion: reduce){
  .ss-cal-grid.is-slide-next,
  .ss-cal-grid.is-slide-prev,
  .ss-cal-month-title.is-slide-next,
  .ss-cal-month-title.is-slide-prev{ animation:none; }
}
.ss-cal-month{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  margin-bottom:14px;
  padding:0 6px;
}
.ss-cal-nav{
  display:inline-grid; place-items:center;
  width:36px; height:36px;
  border-radius:50%;
  background:transparent;
  border:1px solid var(--ss-hairline);
  color:var(--ss-cream-dim);
  cursor:pointer;
  transition:border-color .25s, color .25s, background .25s, transform .25s;
}
@media (hover: hover){
  .ss-cal-nav:hover:not(:disabled){
    border-color:var(--ss-gold);
    color:var(--ss-gold);
    background:rgba(201,166,107,0.06);
  }
}
.ss-cal-nav:disabled{
  opacity:.25; cursor:default;
}
.ss-cal-month-title{
  display:flex; align-items:baseline; justify-content:center; gap:10px;
  text-align:center;
}
.ss-cal-month-name{
  font-family:var(--serif);
  font-style:italic;
  font-size:26px;
  line-height:1;
  letter-spacing:-.01em;
  color:rgba(245,239,228,0.82);
}
.ss-cal-month-year{
  position:relative;
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.34em;
  color:var(--ss-gold);
  text-transform:uppercase;
  padding-bottom:4px;
}
.ss-cal-month-year::after{
  content:"";
  position:absolute;
  left:0; right:.34em; /* offset matches letter-spacing so the rule ends under the last glyph */
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, var(--ss-gold) 0%, var(--ss-gold) 100%);
  opacity:.55;
}

.ss-cal-weekdays{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  margin-bottom:6px;
  padding:0 2px;
}
.ss-cal-weekdays span{
  text-align:center;
  font-size:9px;
  letter-spacing:.32em;
  font-weight:600;
  color:rgba(201,166,107,0.6);
  padding:6px 0;
}

.ss-cal-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:2px;
  border-top:1px solid var(--ss-hairline-soft);
  padding-top:6px;
}

/* Day cell */
.ss-day{
  position:relative;
  aspect-ratio:1 / 1;
  display:grid; place-items:center;
  background:transparent;
  border:0;
  padding:0;
  cursor:default;
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  line-height:1;
  color:rgba(245,239,228,0.18);
  opacity:0;
  transform:translateY(6px);
  animation:ss-day-in .5s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) forwards;
  user-select:none;
}
.ss-day.is-empty{ animation:none; opacity:1; transform:none; }
.ss-day-num{
  position:relative;
  z-index:2;
  transition:color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.ss-day-today-dot{
  position:absolute;
  left:50%; bottom:13%;
  transform:translateX(-50%);
  width:3px; height:3px;
  border-radius:50%;
  background:var(--ss-gold);
  z-index:2;
}
.ss-day-ring{
  position:absolute;
  inset:8%;
  width:84%; height:84%;
  pointer-events:none;
  opacity:0;
  transform:rotate(-90deg) scale(.85);
  transition:opacity .3s, transform .4s cubic-bezier(.2,.7,.2,1);
  z-index:1;
}
.ss-day-ring circle{
  fill:none;
  stroke:var(--ss-gold);
  stroke-width:1.2;
  stroke-dasharray:115;
  stroke-dashoffset:115;
  transition:stroke-dashoffset .55s cubic-bezier(.2,.7,.2,1);
}

.ss-day.is-past .ss-day-num{ color:rgba(245,239,228,0.1); }
.ss-day.is-out .ss-day-num{ color:rgba(245,239,228,0.16); }

/* In-window day with no openings left: dimmed, struck through, inert. */
.ss-day.is-full{ cursor:default; }
.ss-day.is-full .ss-day-num{ color:rgba(245,239,228,0.18); }
.ss-day.is-full::after{
  content:"";
  position:absolute;
  left:30%; right:30%;
  top:50%;
  height:1px;
  background:rgba(201,166,107,0.32);
  pointer-events:none;
  z-index:2;
}

.ss-day.is-open{ cursor:pointer; color:var(--ss-cream); }
.ss-day.is-open .ss-day-num{ color:var(--ss-cream); }
@media (hover: hover){
  .ss-day.is-open:hover .ss-day-num{ color:var(--ss-gold); }
  .ss-day.is-open:hover .ss-day-ring{ opacity:.45; transform:rotate(0deg) scale(1); }
  .ss-day.is-open:hover .ss-day-ring circle{ stroke-dashoffset:0; }
}

.ss-day.is-selected .ss-day-num{ color:var(--ss-gold); }
.ss-day.is-selected .ss-day-ring{ opacity:1; transform:rotate(0deg) scale(1); }
.ss-day.is-selected .ss-day-ring circle{ stroke-dashoffset:0; stroke-width:1.4; }
.ss-day.is-selected{
  background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(201,166,107,0.08), transparent 70%);
}

/* When availability is loading or failed, dim every cell so the overlay
   message dominates and the booking-window cells don't read as bright/active. */
.ss-cal-calendar.is-busy .ss-day.is-open{ cursor:default; }
.ss-cal-calendar.is-busy .ss-day.is-open .ss-day-num,
.ss-cal-calendar.is-busy .ss-day.is-today .ss-day-num{
  color:rgba(245,239,228,0.18);
}
.ss-cal-calendar.is-busy .ss-day-today-dot{
  background:rgba(201,166,107,0.35);
}

.ss-day:focus-visible{ outline:none; }
.ss-day:focus-visible .ss-day-ring{ opacity:.6; transform:rotate(0deg) scale(1); }
.ss-day:focus-visible .ss-day-ring circle{ stroke-dashoffset:0; }

@keyframes ss-day-in{
  to{ opacity:1; transform:none; }
}

/* Calendar loading / error overlays.
   Light vellum tint (not darker forest) so the overlay reads as a quiet
   pause, not a muddy plate sitting on the panel. Calendar grid stays
   faintly visible underneath. */
.ss-cal-loading,
.ss-cal-error,
.ss-cal-empty{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(245,239,228,0.05), rgba(245,239,228,0.02) 70%);
  border-radius:2px;
  color:var(--ss-cream-dim);
  opacity:0;
  animation:ss-fade .35s ease forwards;
}
.ss-cal-loading-mark{
  position:relative;
  width:96px; height:1px;
  background:var(--ss-hairline);
}
.ss-cal-loading-mark::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(201,166,107,0.55), transparent);
  animation:ss-load-sweep 1.6s cubic-bezier(.45,.2,.35,1) infinite;
}
.ss-cal-loading-mark::after{
  content:"";
  position:absolute; top:50%; left:0;
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%;
  background:var(--ss-gold);
  box-shadow:0 0 8px rgba(201,166,107,0.55);
  animation:ss-load-dot 1.6s cubic-bezier(.45,.2,.35,1) infinite;
}
.ss-cal-loading-text{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:13.5px;
  letter-spacing:.01em;
  color:rgba(245,239,228,0.62);
}
@keyframes ss-load-sweep{
  0%   { opacity:0; }
  20%  { opacity:1; }
  80%  { opacity:1; }
  100% { opacity:0; }
}
@keyframes ss-load-dot{
  0%   { left:0%;   opacity:.45; }
  50%  { opacity:1; }
  100% { left:100%; opacity:.45; }
}
.ss-cal-error p,
.ss-cal-empty p{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  color:var(--ss-cream);
}
.ss-cal-empty-link{
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ss-gold);
  border-bottom:1px solid rgba(201,166,107,0.4);
  padding-bottom:2px;
  transition:color .25s, border-color .25s;
}
@media (hover: hover){
  .ss-cal-empty-link:hover{
    color:var(--ss-cream);
    border-bottom-color:var(--ss-cream);
  }
}
.ss-cal-retry{
  background:transparent;
  border:1px solid var(--ss-gold);
  color:var(--ss-gold);
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  padding:9px 18px;
  border-radius:999px;
  cursor:pointer;
  transition:background .25s, color .25s;
}
@media (hover: hover){
  .ss-cal-retry:hover{
    background:var(--ss-gold);
    color:var(--forest-deep);
  }
}

/* ===== Slots ===== */
.ss-cal-slots-wrap{ margin-top:6px; }
.ss-cal-slots-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(245,239,228,0.55);
  margin:0 0 14px;
}
.ss-cal-slots-eyebrow .dash{
  width:14px; height:1px; background:rgba(201,166,107,0.5);
}
.ss-cal-slots-eyebrow .dot{
  width:3px; height:3px; border-radius:50%; background:var(--ss-gold);
}
.ss-cal-slots{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
  max-width:420px;
  margin:0 auto;
}
.ss-slot{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  padding:12px 10px;
  background:rgba(245,239,228,0.018);
  border:1px solid var(--ss-hairline);
  color:var(--ss-cream);
  cursor:pointer;
  border-radius:1px;
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  line-height:1.15;
  letter-spacing:.01em;
  transition:border-color .25s, color .25s, background .25s, transform .2s;
  opacity:0;
  transform:translateY(6px);
  animation:ss-day-in .5s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) forwards;
}
.ss-slot-times{
  display:inline-flex; flex-direction:column; align-items:center;
  gap:3px;
}
.ss-slot-mark{
  width:4px; height:4px;
  border-radius:50%;
  background:transparent;
  border:1px solid var(--ss-cream-faint);
  flex-shrink:0;
  transition:background .25s, border-color .25s, box-shadow .35s;
}
@media (hover: hover){
  .ss-slot:hover{
    border-color:var(--ss-gold-soft);
    color:var(--ss-gold);
    background:rgba(201,166,107,0.04);
  }
  .ss-slot:hover .ss-slot-mark{
    border-color:var(--ss-gold);
  }
}
.ss-slot.is-selected{
  border-color:var(--ss-gold);
  color:var(--ss-gold);
  background:rgba(201,166,107,0.08);
  box-shadow:inset 0 0 0 1px var(--ss-gold);
}
.ss-slot.is-selected .ss-slot-mark{
  background:var(--ss-gold);
  border-color:var(--ss-gold);
  box-shadow:0 0 0 3px rgba(201,166,107,0.22);
}

.ss-cal-no-slots{
  position:relative;
  text-align:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:14.5px;
  line-height:1.5;
  color:rgba(245,239,228,0.62);
  margin:14px auto 6px;
  padding:18px 14px 16px;
  max-width:340px;
  border-top:1px solid var(--ss-hairline-soft);
  border-bottom:1px solid var(--ss-hairline-soft);
}
.ss-cal-no-slots::before{
  content:"";
  display:block;
  width:18px; height:1px;
  margin:0 auto 12px;
  background:linear-gradient(90deg, transparent, var(--ss-gold-soft), transparent);
}

/* ===== Confirm "receipt" block ===== */
.ss-cal-confirm-wrap{ margin-top:26px; }
.ss-cal-receipt{
  position:relative;
  max-width:420px;
  margin:0 auto 16px;
  padding:18px 22px 16px;
  text-align:center;
  background:linear-gradient(180deg, rgba(201,166,107,0.04), rgba(201,166,107,0.015));
}
.ss-cal-receipt-corner{
  position:absolute;
  width:10px; height:10px;
  color:var(--ss-gold);
  pointer-events:none;
}
.ss-cal-receipt-corner::before,
.ss-cal-receipt-corner::after{
  content:""; position:absolute; background:currentColor;
}
.ss-cal-receipt-corner::before{ width:10px; height:1px; }
.ss-cal-receipt-corner::after{  width:1px; height:10px; }
.ss-cal-receipt-corner.tl{ top:0; left:0; }
.ss-cal-receipt-corner.tl::before, .ss-cal-receipt-corner.tl::after{ top:0; left:0; }
.ss-cal-receipt-corner.tr{ top:0; right:0; }
.ss-cal-receipt-corner.tr::before{ top:0; right:0; }
.ss-cal-receipt-corner.tr::after{ top:0; right:0; }
.ss-cal-receipt-corner.bl{ bottom:0; left:0; }
.ss-cal-receipt-corner.bl::before{ bottom:0; left:0; }
.ss-cal-receipt-corner.bl::after{ bottom:0; left:0; }
.ss-cal-receipt-corner.br{ bottom:0; right:0; }
.ss-cal-receipt-corner.br::before{ bottom:0; right:0; }
.ss-cal-receipt-corner.br::after{ bottom:0; right:0; }

.ss-cal-receipt-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:9px; letter-spacing:.30em; text-transform:uppercase;
  color:rgba(245,239,228,0.55);
  margin:0 auto 12px;
}
.ss-cal-receipt-eyebrow .dash{
  width:14px; height:1px; background:rgba(201,166,107,0.5);
}
.ss-cal-receipt-line{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.3;
  letter-spacing:.005em;
  color:var(--ss-cream);
  margin:2px 0;
}
.ss-cal-receipt-line em{ font-style:italic; color:var(--ss-gold); }
.ss-cal-receipt-time{
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-style:italic;
  color:var(--ss-gold);
}
.ss-cal-receipt-time .dash-h{
  display:inline-block;
  width:12px; height:1px;
  background:var(--ss-gold);
  opacity:.7;
}
.ss-cal-receipt-tz{
  font-family:var(--sans);
  font-style:normal;
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ss-gold-soft);
  margin-left:4px;
  vertical-align:.18em;
}
/* Confirm-button error message */
.ss-cal-confirm-error{
  margin:12px auto 0;
  max-width:380px;
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  line-height:1.45;
  color:#E6B5A8;
  text-align:center;
}

/* ===== Confirmation screen ===== */
.ss-cal-section.is-done{
  text-align:center;
  padding:8px 0 4px;
  animation:ss-rise .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.ss-cal-section.is-done .ss-cal-title{
  font-size:clamp(28px, 7vw, 36px);
  letter-spacing:-.02em;
  line-height:1.05;
}
.ss-cal-seal{
  width:64px; height:64px;
  margin:0 auto 22px;
  color:var(--ss-gold);
  display:grid; place-items:center;
  position:relative;
}
.ss-cal-seal::before{
  content:"";
  position:absolute; inset:-8px;
  border:1px dashed rgba(201,166,107,0.25);
  border-radius:50%;
  animation:ss-spin 24s linear infinite;
}
.ss-seal-check{
  stroke-dasharray:42;
  stroke-dashoffset:42;
  animation:ss-draw .7s cubic-bezier(.2,.7,.2,1) .35s forwards;
}
@keyframes ss-draw{ to{ stroke-dashoffset:0; } }

.ss-cal-receipt.is-final{
  margin-top:24px;
  padding:22px 24px 20px;
  text-align:left;
}
.ss-cal-receipt-rows .row{
  display:grid;
  grid-template-columns:80px 1fr;
  align-items:baseline;
  padding:10px 0;
  border-bottom:1px solid var(--ss-hairline-soft);
}
.ss-cal-receipt-rows .row:last-child{ border-bottom:0; }
.ss-cal-receipt-rows .row span{
  font-size:9px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ss-gold-soft);
}
.ss-cal-receipt-rows .row strong{
  font-weight:400;
  font-size:15px;
  color:var(--ss-cream);
  letter-spacing:.005em;
}
.ss-cal-receipt-rows .row strong em{
  font-family:var(--serif);
  font-style:italic;
  font-size:16px;
  color:var(--ss-gold);
}

/* ===== Confirmation: calling card =====
   Smaller, in-widget cousin of the .callcard on /lp/thank-you. Same
   visual grammar: printer's marks, soft incoming-call pulse, italic
   nameplate digits, sized for the booking panel and tied into the
   staggered post-confirm reveal. */
.ss-cal-callcard{
  position:relative;
  display:block;
  margin:24px auto 0;
  padding:20px 22px 18px;
  max-width:380px;
  text-align:center;
  color:var(--ss-cream);
  background:
    radial-gradient(ellipse 130% 90% at 50% 0%, rgba(201,166,107,0.08), transparent 65%),
    linear-gradient(180deg, rgba(245,239,228,0.018), rgba(245,239,228,0.028));
  border-radius:2px;
  opacity:0;
  animation:ss-rise .8s cubic-bezier(.2,.7,.2,1) .55s forwards;
  transform:translateY(8px);
}
.ss-cal-callcard-corner{
  position:absolute;
  width:11px; height:11px;
  pointer-events:none;
  color:var(--ss-gold);
  opacity:0;
  animation:ss-fade .6s cubic-bezier(.2,.7,.2,1) .95s forwards;
}
.ss-cal-callcard-corner::before,
.ss-cal-callcard-corner::after{ content:""; position:absolute; background:currentColor; }
.ss-cal-callcard-corner::before{ width:11px; height:1px; }
.ss-cal-callcard-corner::after { width:1px;  height:11px; }
.ss-cal-callcard-corner.tl{ top:0; left:0; }
.ss-cal-callcard-corner.tl::before{ top:0; left:0; }
.ss-cal-callcard-corner.tl::after{  top:0; left:0; }
.ss-cal-callcard-corner.tr{ top:0; right:0; animation-delay:1.01s; }
.ss-cal-callcard-corner.tr::before{ top:0; right:0; }
.ss-cal-callcard-corner.tr::after{  top:0; right:0; }
.ss-cal-callcard-corner.bl{ bottom:0; left:0; animation-delay:1.01s; }
.ss-cal-callcard-corner.bl::before{ bottom:0; left:0; }
.ss-cal-callcard-corner.bl::after{  bottom:0; left:0; }
.ss-cal-callcard-corner.br{ bottom:0; right:0; animation-delay:1.07s; }
.ss-cal-callcard-corner.br::before{ bottom:0; right:0; }
.ss-cal-callcard-corner.br::after{  bottom:0; right:0; }

.ss-cal-callcard-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans);
  font-size:9px;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:rgba(245,239,228,0.58);
  margin:0 0 14px;
}
.ss-cal-callcard-eyebrow .dash{
  width:18px; height:1px;
  background:rgba(201,166,107,0.5);
}

.ss-cal-callcard-body{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.ss-cal-callcard-ico{
  position:relative;
  width:28px; height:28px;
  display:grid; place-items:center;
  color:var(--ss-gold);
  flex-shrink:0;
}
.ss-cal-callcard-ico svg{ width:18px; height:18px; }
.ss-cal-ring-pulse{
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid var(--ss-gold);
  opacity:0;
  animation: ss-cal-ring 2.8s cubic-bezier(.2,.7,.2,1) infinite;
  animation-delay:1.2s;
}
.ss-cal-ring-pulse.delay{ animation-delay:2.6s; }
@keyframes ss-cal-ring{
  0%   { transform:scale(.6); opacity:0; }
  20%  { opacity:.55; }
  100% { transform:scale(1.6); opacity:0; }
}

.ss-cal-callcard-number{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(26px, 6.4vw, 32px);
  line-height:1;
  letter-spacing:-.005em;
  color:var(--ss-cream);
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  white-space:nowrap;
}
.ss-cal-callcard-number .grp{
  color:var(--ss-cream);
  font-variant-numeric: tabular-nums lining-nums;
}
.ss-cal-callcard-number .sep{
  color:var(--ss-gold);
  opacity:.85;
  font-size:.7em;
  transform:translateY(-.18em);
  margin:0 1px;
}

.ss-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Confirmation: prep note (computer + quiet room) */
.ss-cal-prep{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  max-width:380px;
  margin:18px auto 0;
  padding:0 6px;
  font-family:var(--sans);
  font-size:12.5px;
  line-height:1.5;
  color:rgba(245,239,228,0.6);
  text-align:left;
  opacity:0;
  animation:ss-rise .8s cubic-bezier(.2,.7,.2,1) .75s forwards;
  transform:translateY(6px);
}
.ss-cal-prep-mark{
  flex-shrink:0;
  width:22px; height:22px;
  display:grid; place-items:center;
  color:var(--ss-gold-soft);
}
.ss-cal-prep-mark svg{ width:18px; height:18px; }
.ss-cal-prep em{
  font-family:var(--serif);
  font-style:italic;
  color:rgba(245,239,228,0.75);
  font-size:13.5px;
}

/* ============================================================
   Unified panel: step 1 preview lock & persistent CTA
   ============================================================ */

/* Positioning shell for the blurred preview + the lock-tag sibling.
   The tag has to live OUTSIDE .ss-cal-availability so the locked-state
   blur doesn't soften the only legible instruction on screen. */
.ss-cal-availability-wrap{
  position:relative;
}

/* Lock-tag: small cream plaque floating over the blurred calendar in
   step 1, telling the visitor what to do next. Forest ink on cream so
   it reads cleanly against the blurred dark grid behind it. Fades out
   the moment the availability section unlocks. */
.ss-cal-lock-tag{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  z-index:5;

  display:inline-flex;
  align-items:center;
  gap:11px;

  padding:12px 18px 12px 15px;
  background:rgba(15,31,24,0.94);
  color:var(--ss-cream);
  border:1px solid var(--ss-gold);
  border-radius:1px;

  font-family:var(--sans);
  font-size:12.5px;
  font-weight:500;
  line-height:1.1;
  letter-spacing:.005em;
  white-space:nowrap;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  box-shadow:
    0 18px 38px -12px rgba(0,0,0,0.7),
    0 4px 12px rgba(0,0,0,0.35);

  pointer-events:none;
  opacity:1;
  /* `backwards` (not `forwards`): hold the hidden start state during the
     .7s delay, then let declared values resume after the animation. If we
     used `forwards`, the held end-state would mask the exit transition
     and the tag would snap when .is-unlocked lands. */
  animation:ss-lock-tag-in .8s cubic-bezier(.2,.7,.2,1) .7s backwards;
  /* Re-entry transition (used when going back to step 1). No visibility
     delay here, since that delay belongs only on the exit, otherwise the tag
     stays `visibility:hidden` through the whole fade-in and pops in at
     the end instead of crossfading with the calendar re-blur. */
  transition:
    opacity .55s cubic-bezier(.2,.7,.2,1) .15s,
    transform .55s cubic-bezier(.2,.7,.2,1) .15s;
}
@keyframes ss-lock-tag-in{
  from{ opacity:0; transform:translate(-50%, calc(-50% + 8px)); }
  to  { opacity:1; transform:translate(-50%, -50%); }
}
/* Hairline corner ticks: tiny printer's marks to keep the chit from
   reading as a generic pill toast. */
.ss-cal-lock-tag::before,
.ss-cal-lock-tag::after{
  content:"";
  position:absolute;
  width:6px; height:6px;
  border:1px solid var(--ss-gold);
  pointer-events:none;
}
.ss-cal-lock-tag::before{
  top:-3px; left:-3px;
  border-right:0; border-bottom:0;
}
.ss-cal-lock-tag::after{
  bottom:-3px; right:-3px;
  border-left:0; border-top:0;
}
.ss-cal-lock-tag-arrow{
  width:11px; height:13px;
  color:var(--ss-gold);
  flex-shrink:0;
}

/* Exit: fade & drift up in lockstep with the calendar unblur (.85s on
   .ss-cal-availability filter/opacity). The longer timing + delayed
   visibility flip live on this rule, not the base, so re-entry on the
   way back to step 1 stays snappy and visible the whole way. */
.ss-cal-availability-wrap:has(.ss-cal-availability.is-unlocked) .ss-cal-lock-tag{
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, calc(-50% - 6px));
  transition:
    opacity .85s cubic-bezier(.2,.7,.2,1),
    transform .85s cubic-bezier(.2,.7,.2,1),
    visibility 0s .85s;
}

@media (max-width:380px){
  .ss-cal-lock-tag{
    font-size:11px;
    padding:10px 14px 10px 12px;
    gap:9px;
  }
}

/* The availability section is rendered in step 1 too, but blurred
   and inert. On unlock, blur lifts, pointer-events return, and any
   ancillary chrome (tz notice, slots, receipt) becomes visible. */
.ss-cal-availability{
  position:relative;
  margin-top:28px;
  transition:
    filter .85s cubic-bezier(.2,.7,.2,1),
    opacity .85s cubic-bezier(.2,.7,.2,1);
}
.ss-cal-availability.is-locked{
  filter:blur(0.9px) saturate(.97);
  opacity:.84;
  pointer-events:none;
  user-select:none;
}

/* Slots, receipt, and the step-2 summary fade out before their innerHTML
   is cleared in goToStep1(). Without this, the heights snap to zero and
   the page visibly jolts. Empty containers collapse silently afterward. */
.ss-cal-summary-wrap,
.ss-cal-slots-wrap,
.ss-cal-receipt-wrap{
  transition:opacity .2s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.ss-cal-summary-wrap.is-exiting,
.ss-cal-slots-wrap.is-exiting,
.ss-cal-receipt-wrap.is-exiting{
  opacity:0;
  pointer-events:none;
  transform:translateY(-4px);
}

/* Receipt wrap, appears above the persistent CTA once a slot is
   selected. The receipt itself keeps its corner-marks treatment;
   we just give the wrap a top margin so it breathes from the slots. */
.ss-cal-receipt-wrap{
  margin-top:22px;
}
.ss-cal-receipt-wrap:empty{ margin-top:0; }
.ss-cal-receipt-wrap .ss-cal-receipt{
  margin:0 auto;
  opacity:0;
  animation:ss-rise .6s cubic-bezier(.2,.7,.2,1) .05s forwards;
  transform:translateY(6px);
}

/* Persistent action area: same DOM element in every state, so the
   CTA at the bottom feels like a fixed anchor as the form above
   collapses, the calendar unblurs, and the receipt appears. */
.ss-cal-action-wrap{
  position:relative;
  margin-top:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ss-cal-action-wrap .ss-cal-btn{ margin-top:0; }
/* Quieter treatment for the "Choose a day / Choose a time" interim
   states. Scoped to :not(.is-loading) so the bright primary look
   returns during the booking spinner. */
.ss-cal-action-wrap .ss-cal-btn:disabled:not(.is-loading){
  background:transparent;
  color:rgba(245,239,228,0.5);
  border-color:var(--ss-hairline);
  cursor:not-allowed;
  opacity:1;
}
.ss-cal-action-wrap .ss-cal-btn:disabled:not(.is-loading)::before{ display:none; }
.ss-cal-action-wrap .ss-cal-btn:disabled:not(.is-loading) .ss-cal-btn-arrow{
  background:rgba(245,239,228,0.35);
  opacity:.6;
}
.ss-cal-action-wrap .ss-cal-btn:disabled:not(.is-loading) .ss-cal-btn-arrow::after{
  border-color:rgba(245,239,228,0.35);
}

/* Consent line, visible in step 1, hidden in step 2 via [hidden]. */
.ss-cal-section.is-unified .ss-cal-consent{
  margin:18px 0 0;
  opacity:0;
  animation:ss-fade .8s cubic-bezier(.2,.7,.2,1) .9s forwards;
}

/* ===== Animations ===== */
@keyframes ss-fade{ to{ opacity:1; } }
@keyframes ss-rise{ to{ opacity:1; transform:none; } }

/* ===== Larger phones / tablets ===== */
@media (min-width:520px){
  .ss-cal-stage{ padding:28px 32px 32px; }
  .ss-cal-title{ font-size:clamp(24px, 3.4vw, 30px); }
  .ss-cal-title.is-section{ font-size:clamp(20px, 2.6vw, 24px); }
  .ss-cal-sub{ font-size:14.5px; max-width:42ch; }
  .ss-cal-slots{ grid-template-columns:repeat(3, 1fr); }
  .ss-cal-month-name{ font-size:32px; }
  .ss-day{ font-size:19px; }
  .ss-cal-summary{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"head name edit";
    column-gap:18px;
    row-gap:0;
    padding:11px 16px;
  }
  .ss-cal-summary-name{ font-size:15px; }
}

/* ===== Desktop: keep narrow column, breathe more ===== */
@media (min-width:860px){
  .ss-cal{ max-width:600px; }
  .ss-cal-stage{ padding:32px 44px 40px; }
  .ss-cal-calendar{ max-width:460px; }
  .ss-cal-slots{ grid-template-columns:repeat(4, 1fr); max-width:460px; }
  .ss-cal-receipt{ max-width:460px; }
  .ss-day{ font-size:20px; }
  .ss-day-today-dot{ bottom:18%; }
}

/* ===== Tiny phones ===== */
@media (max-width:380px){
  .ss-cal-stage{ padding:24px 16px 22px; }
  .ss-cal-steps{ gap:10px; }
  .ss-step-rule{ width:24px; }
  .ss-cal-title{ font-size:clamp(24px, 8vw, 32px); }
  .ss-cal-row{ grid-template-columns:1fr; gap:22px; }
  .ss-cal-month-name{ font-size:24px; }
  .ss-day{ font-size:17px; }
  .ss-cal-grid{ gap:1px; }
  .ss-slot{ padding:12px 8px; font-size:15px; }
  .ss-cal-summary{ padding:10px 12px 11px; column-gap:10px; row-gap:6px; }
  .ss-cal-summary-name{ font-size:14.5px; }
  .ss-cal-summary-label{ font-size:8.5px; letter-spacing:.26em; }
}

/* ===== Mobile: shorten the morph =====
   Long, layered transitions (filter blur + grid-template-rows + opacity)
   drop frames on phones. The desktop timings (.65s / .85s) feel composed;
   the mobile timings (~.45s / ~.55s) feel crisp without the jank. */
@media (max-width:768px){
  .ss-cal-form-wrap{
    transition:
      grid-template-rows .45s cubic-bezier(.2,.7,.2,1),
      opacity .3s ease,
      margin .42s cubic-bezier(.2,.7,.2,1),
      filter .3s ease;
  }
  .ss-cal-availability{
    transition:
      filter .55s cubic-bezier(.2,.7,.2,1),
      opacity .55s cubic-bezier(.2,.7,.2,1);
  }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  .ss-cal-corner,
  .ss-cal-steps,
  .ss-cal-eyebrow,
  .ss-cal-title,
  .ss-cal-sub,
  .ss-cal-form,
  .ss-cal-summary,
  .ss-day,
  .ss-slot,
  .ss-cal-section.is-done,
  .ss-cal-callcard,
  .ss-cal-callcard-corner,
  .ss-cal-prep,
  .ss-cal-section.is-unified .ss-cal-consent,
  .ss-cal-receipt-wrap .ss-cal-receipt{
    animation:none; opacity:1; transform:none;
  }
  .ss-cal-form-wrap,
  .ss-cal-availability{
    transition:none;
  }
  .ss-cal-lock-tag{
    animation:none; opacity:1;
  }
  .ss-day-ring,
  .ss-cal-seal::before,
  .ss-cal-summary-mark,
  .ss-cal-loading-mark::before,
  .ss-cal-loading-mark::after,
  .ss-cal-ring-pulse{
    animation:none;
  }
  .ss-cal-loading-mark::after{ left:50%; }
  .ss-seal-check{ stroke-dashoffset:0; animation:none; }
}