/* ─────────────────────────────────────────────────────────
   STUDIO SQUAT — BOOK.SQUAT.TODAY  ·  Intake Questionnaire
   Reuses the Setter Playbook token system verbatim:
   Ernest (display) + Avantt (UI/body) · 8dp spacing · M3 type scale.
   One screen at a time — feels like Jona asking, not a form.
───────────────────────────────────────────────────────── */

/* ── FONT FACES ── */
@font-face {
  font-family: 'Ernest';
  src: url('fonts/Ernest-Regular.woff2') format('woff2'),
       url('fonts/Ernest-Regular.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avantt';
  src: url('fonts/Avantt-Regular.woff2') format('woff2'),
       url('fonts/Avantt-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avantt';
  src: url('fonts/Avantt-Medium.woff2') format('woff2'),
       url('fonts/Avantt-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avantt';
  src: url('fonts/Avantt-SemiBold.woff2') format('woff2'),
       url('fonts/Avantt-SemiBold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avantt';
  src: url('fonts/Avantt-Bold.woff2') format('woff2'),
       url('fonts/Avantt-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── TOKENS (identical to setter-playbook) ── */
:root {
  --bg:            #F4EFE6;
  --white:         #FAFAF8;
  --pure-white:    #FFFFFF;
  --border:        #DDD8CF;
  --border-strong: #0A0A0A;
  --text:          #0A0A0A;
  --muted:         #7A756E;
  --orange:        #E8390A;
  --orange-light:  #F4845E;  /* solid lighter tone for completed slider stops */

  --surface:          #FAFAF8;
  --surface-variant:  #E8E3D8;

  --red:        #E8390A;  --red-light:   #FFF5F3;
  --amber:      #D97706;  --amber-light: #FFFBEB;
  --green:      #15803d;  --green-light: #F0FDF4;
  --green-mid:  #5DAE7E;  /* solid lighter green for completed slider stops */
  --gray:       #6B7280;  --gray-light:  #F9FAFB;

  /* Type scale */
  --t-display:   clamp(2rem, 4vw, 2.25rem);   /* 32→36px */
  --t-title:     clamp(1.5rem, 2.5vw, 1.875rem);
  --t-body-lg:   1rem;       /* 16px */
  --t-body:      0.875rem;   /* 14px */
  --t-body-sm:   0.75rem;    /* 12px */
  --t-label:     0.6875rem;  /* 11px */
  --t-caption:   0.625rem;   /* 10px */
  --t-micro:     0.5625rem;  /* 9px  */

  --md-ref-typeface-brand: 'Ernest', Georgia, serif;
  --md-ref-typeface-plain: 'Avantt', system-ui, sans-serif;

  /* Spacing — 8dp grid */
  --space-4: 4px;  --space-8: 8px;  --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px;
  --space-64: 64px; --space-80: 80px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[x-cloak] { display: none !important; }

/* ── MATERIAL SYMBOLS ── */
.ms {
  font-family: 'Material Symbols Sharp';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; user-select: none; flex-shrink: 0;
  transition: font-variation-settings 0.15s ease;
}
.ms-fill { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
.icon-row { display: flex; align-items: center; gap: var(--space-8); }

/* ── BASE ── */
html { -webkit-text-size-adjust: 100%; font-size: 18px; }
body {
  font-family: 'Avantt', system-ui, sans-serif;
  font-weight: 400; font-size: var(--t-body); line-height: 1.5;
  background: var(--bg); color: var(--text);
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}

/* ── TYPOGRAPHY HELPERS ── */
.t-display {
  font-family: var(--md-ref-typeface-brand); font-weight: normal;
  font-size: var(--t-display); line-height: 1.15; letter-spacing: 0.04rem;
}
.t-title {
  font-family: var(--md-ref-typeface-brand); font-weight: normal;
  font-size: var(--t-title); line-height: 1.2; letter-spacing: 0.04rem;
}
.t-body-lg { font-size: var(--t-body-lg); line-height: 1.55; letter-spacing: 0.02em; }
.t-body    { font-size: var(--t-body); line-height: 1.5; }
.t-body-sm { font-size: var(--t-body-sm); line-height: 1.5; }
.t-label {
  font-family: var(--md-ref-typeface-plain); font-size: var(--t-label);
  font-weight: 500; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase;
}
.color-muted  { color: var(--muted); }
.color-orange { color: var(--orange); }
.fw-semi { font-weight: 600; }
.fw-bold { font-weight: 700; }

/* ════════════════════════════════════════════════════════
   LAYOUT — fixed header, centred stage, fixed footer nav
   ════════════════════════════════════════════════════════ */

/* ── HEADER ── */
.site-header {
  background: var(--text); color: var(--white);
  padding: 0 var(--space-24);
  display: flex; align-items: stretch; justify-content: space-between;
  gap: var(--space-16); flex-shrink: 0;
  padding-top: env(safe-area-inset-top);
}
.header-brand { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) 0; }
.ss-icon { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; opacity: 0.9; }
.header-wordmark { line-height: 1.25; }
.header-sup {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: var(--space-4);
}
.header-title {
  font-family: 'Ernest', Georgia, serif; font-weight: normal;
  font-size: clamp(18px, 3vw, 24px); line-height: 1; letter-spacing: 0.04rem; color: var(--white);
}
.header-right { display: flex; align-items: center; }
.lang-toggle { display: flex; align-items: stretch; gap: 1px; background: rgba(255,255,255,0.12); }
.lang-btn {
  display: flex; align-items: center; padding: 0 var(--space-16);
  font-family: 'Avantt', sans-serif; font-size: var(--t-caption); font-weight: 600;
  letter-spacing: 0.1em; cursor: pointer; transition: background 0.12s, color 0.12s;
  color: rgba(255,255,255,0.55); background: var(--text); border: none; text-transform: uppercase;
}
.lang-btn:hover { background: rgba(255,255,255,0.1); color: white; }
.lang-btn.active { background: var(--white); color: var(--text); }

/* ── PROGRESS BAR (thin, under header) ── */
.progress-track { height: 3px; background: var(--surface-variant); flex-shrink: 0; }
.progress-fill { height: 100%; background: var(--orange); transition: width 0.4s cubic-bezier(0.4,0,0.2,1); }

/* ── STAGE (scroll area, holds one screen) ── */
.stage {
  flex: 1; display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.stage-inner {
  width: 100%; max-width: 660px; margin: 0 auto;
  padding: var(--space-40) var(--space-24);
  /* Content sits vertically centred in the stage. The cross-fade transition
     below masks the height change between screens so re-centring reads as a
     deliberate dissolve, not a jump. */
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}

/* ── SCREEN TRANSITION ──
   Opacity-led dissolve with a small rise. Leading with opacity (not movement)
   keeps the eye off the vertical re-centre, so variable-height screens settle
   smoothly. Two delivery paths, same feel:
   • .screen-enter          → CSS animation for x-if screens (intro/contact/results)
   • .anim-enter (+ states) → Alpine x-transition for the x-show question screens */
.screen-enter { animation: screenIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-enter       { transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.anim-enter-start { opacity: 0; transform: translateY(10px); }
.anim-enter-end   { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .screen-enter { animation: screenFade 0.3s ease both; }
  @keyframes screenFade { from { opacity: 0; } to { opacity: 1; } }
  .anim-enter { transition: opacity 0.3s ease; }
  .anim-enter-start { transform: none; }
}

/* ── Q META (step counter) ── */
.q-meta {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--orange); margin-bottom: var(--space-16);
}

/* ── QUESTION HEADLINE ── */
/* ── NO ORPHANS ──
   'pretty' prevents a lone last-line word without forcing equal line lengths
   (the over-tight look of 'balance'). Degrades gracefully where unsupported. */
.q-headline, .intro-title, .result-title,
.floor-label, .cal-embed-label, .slider-caption, .slider-anchor,
.q-help, .intro-body, .result-body, .floor-slab p,
.opt-card .opt-text, .three-desc {
  text-wrap: pretty;
}

.q-headline {
  font-family: var(--md-ref-typeface-brand); font-weight: normal;
  font-size: clamp(1.625rem, 3.6vw, 2.125rem); line-height: 1.18;
  letter-spacing: 0.02rem; color: var(--text); margin-bottom: var(--space-12);
}
.q-help { font-size: var(--t-body); color: var(--muted); line-height: 1.5; margin-bottom: var(--space-24); }

/* ════════════════════════════════════════════════════════
   OPENING SCREEN
   ════════════════════════════════════════════════════════ */
.intro-kicker {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--orange); margin-bottom: var(--space-12);
}
/* Studio Squat wordmark on the opening screen */
.intro-logo {
  display: block; width: 200px; max-width: 56%; height: auto;
  margin-bottom: var(--space-24);
}
@media (max-width: 540px) { .intro-logo { width: 168px; } }
.intro-title {
  font-family: var(--md-ref-typeface-brand); font-weight: normal;
  font-size: clamp(2.25rem, 6vw, 3.25rem); line-height: 1.05;
  letter-spacing: 0.02rem; margin-bottom: var(--space-24);
}
.intro-body { font-size: var(--t-body-lg); line-height: 1.65; color: var(--text); margin-bottom: var(--space-16); }
.intro-body.muted { color: var(--muted); font-size: var(--t-body); }

/* Floor callout — dark slab, the wall stated plainly */
.floor-slab {
  background: var(--text); color: var(--white);
  padding: var(--space-16) var(--space-24);
  margin: var(--space-24) 0;
}
.floor-slab .floor-label {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--orange); margin-bottom: var(--space-8);
}
.floor-slab p { font-size: var(--t-body); line-height: 1.6; color: rgba(255,255,255,0.88); }
.floor-slab b { color: var(--white); font-weight: 700; }
.intro-time { font-size: var(--t-body-sm); color: var(--muted); margin-top: var(--space-8); margin-bottom: var(--space-32); letter-spacing: 0.02em; }

/* ════════════════════════════════════════════════════════
   INPUTS
   ════════════════════════════════════════════════════════ */

/* Text / textarea — underline only, matches playbook .field */
.field {
  font-family: 'Avantt', sans-serif; font-size: var(--t-body-lg); font-weight: 400;
  line-height: 1.6;  /* room for descenders (g, j, y) above the bottom border */
  border: none; border-bottom: 2px solid var(--border); background: transparent;
  padding: var(--space-8) 0 var(--space-12); width: 100%; outline: none; color: var(--text);
  transition: border-color 0.15s;
}
.field:focus { border-bottom-color: var(--orange); }
.field::placeholder { color: var(--muted); opacity: 0.7; }
textarea.field { resize: none; line-height: 1.5; }

.reveal-field { margin-top: var(--space-16); }

/* Option cards */
.card-list { display: flex; flex-direction: column; gap: var(--space-8); }
.opt-card {
  display: flex; align-items: center; gap: var(--space-12);
  width: 100%; text-align: left; cursor: pointer; user-select: none;
  background: var(--surface); border: 2px solid var(--border);
  padding: var(--space-16) var(--space-16); font-family: 'Avantt', sans-serif;
  font-size: var(--t-body-lg); font-weight: 500; color: var(--text);
  transition: border-color 0.14s, background 0.14s, transform 0.06s;
}
.opt-card:hover { border-color: var(--text); }
.opt-card:active { transform: scale(0.99); }
.opt-card .opt-marker {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 2px solid var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.14s;
}
.opt-card.multi .opt-marker { border-radius: 4px; }
.opt-card .opt-marker .ms { font-size: 15px; opacity: 0; transition: opacity 0.12s; color: var(--white); }
.opt-card.selected { border-color: var(--green); background: var(--green-light); }
.opt-card.selected .opt-marker { background: var(--green); border-color: var(--green); }
.opt-card.selected .opt-marker .ms { opacity: 1; }
.opt-card .opt-text { flex: 1; }

/* ── SLIDER (Q5) — 5 discrete snapping stops ──
   Stack order, bottom → top:
     1. .slider-rail   the stroke  (z-index 1, furthest back)
     2. .slider-ticks  the circles (z-index 2)
     3. input / dial               (z-index 5, on top)
   The range input's own track is transparent, so the only visible stroke is
   .slider-rail behind the circles. */
.slider-wrap { margin: var(--space-32) 0 var(--space-16); }
.slider-rail-row { position: relative; padding: var(--space-16) 0; }

/* Standalone stroke — sits behind the circles, nudged up 3px.
   Inset by half the thumb width (15px) on each side so the rail spans exactly
   the range the thumb CENTRE can travel — keeps thumb + ticks aligned at the
   extremes (a range thumb never goes fully to the track edge). */
.slider-rail {
  position: absolute; left: 15px; right: 15px;
  top: calc(50% - 3px);
  height: 4px; background: var(--surface-variant);
  transform: translateY(-50%);
  z-index: 1; pointer-events: none;
}

/* Range input is transparent (track hidden); carries only the dial, on top */
input[type="range"].gap-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; background: transparent;
  outline: none; cursor: pointer; margin: 0; position: relative; z-index: 5;
  top: -14px;  /* lift the dial to sit centred on the (raised) rail */
}

/* Tick circles — between stroke and dial, also nudged up 3px to match rail */
.slider-ticks {
  position: absolute; left: 15px; right: 15px; top: calc(50% - 3px);
  transform: translateY(-50%);
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none; z-index: 2;
}
.slider-tick {
  position: relative;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border);
  padding: 0; cursor: pointer; pointer-events: auto;
  transition: background 0.14s, border-color 0.14s, transform 0.1s;
}
/* Invisible ~44px tap target around each small dot (mobile-friendly) */
.slider-tick::before {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}
/* Solid lighter orange for completed stops (no opacity) */
.slider-tick.past   { border-color: var(--orange-light); background: var(--orange-light); }
.slider-tick.active { border-color: var(--orange); background: var(--orange); transform: scale(1.15); }
input[type="range"].gap-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--orange); border: 4px solid var(--white);
  box-shadow: 0 2px 10px rgba(232,57,10,0.35); cursor: grab;
}
input[type="range"].gap-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
input[type="range"].gap-slider::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--orange); border: 4px solid var(--white);
  box-shadow: 0 2px 10px rgba(232,57,10,0.35); cursor: grab;
}
input[type="range"].gap-slider::-moz-range-track { background: transparent; height: 4px; }
input[type="range"].gap-slider::-webkit-slider-runnable-track { background: transparent; height: 4px; }
.slider-anchors { display: flex; justify-content: space-between; gap: var(--space-16); margin-top: var(--space-12); }
.slider-anchor {
  font-size: var(--t-body-sm); color: var(--muted); line-height: 1.4;
  max-width: 44%; font-weight: 500;
}
.slider-anchor.right { text-align: right; }
.slider-caption {
  margin-bottom: var(--space-32); padding: var(--space-16);
  background: var(--surface); font-size: var(--t-body-lg); font-weight: 500;
  line-height: 1.55; height: 88px; display: flex;
  align-items: center; justify-content: center;
  text-align: center; text-wrap: balance;
  overflow: hidden; transition: color 0.2s;
}
.slider-caption.low  { color: var(--muted); }
.slider-caption.mid  { color: var(--amber); }
.slider-caption.high { color: var(--orange); }
.slider-untouched { color: var(--muted); font-style: italic; font-weight: 500; }

/* Resting hint — 3 centred dots before the user touches the slider */
.caption-dots { display: inline-flex; align-items: center; gap: 7px; }
.caption-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border); display: block;
}

/* Contact final screen */
.contact-field-group { display: flex; flex-direction: column; gap: var(--space-24); margin-top: var(--space-8); }
.field-label {
  display: block; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-8);
}
.field-optional { color: var(--muted); opacity: 0.6; font-weight: 600; }

/* ════════════════════════════════════════════════════════
   FOOTER NAV
   ════════════════════════════════════════════════════════ */
.footer-nav {
  flex-shrink: 0; background: var(--bg);
  border-top: 1px solid var(--border);
  padding: var(--space-12) var(--space-24);
  padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-12);
}
.footer-inner {
  width: 100%; max-width: 660px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-16);
}

/* ── PAGINATION DOTS ── */
.pager-dots {
  display: flex; justify-content: center; align-items: center;
  gap: var(--space-8); flex-wrap: wrap;
}
.pager-dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0; border: none;
  background: var(--border); cursor: default;
  transition: background 0.2s, transform 0.2s, width 0.2s;
}
.pager-dot.done   { background: var(--orange-light); cursor: pointer; }
.pager-dot.done:hover { background: var(--orange); }
.pager-dot.active { background: var(--orange); width: 22px; border-radius: 4px; }
.back-btn {
  display: inline-flex; align-items: center; gap: var(--space-4);
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-family: 'Avantt', sans-serif; font-size: var(--t-label); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.12s; padding: var(--space-8) 0;
}
.back-btn:hover { color: var(--text); }
.back-btn .ms { font-size: 18px; }
.back-spacer { flex: 1; }

/* Primary button (Start / Next / Submit) */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  font-family: 'Avantt', sans-serif; font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: var(--space-16) var(--space-32); cursor: pointer; border: none;
  background: var(--text); color: var(--white); transition: background 0.14s, transform 0.06s;
}
.btn-primary:hover:not(:disabled) { background: var(--orange); }
/* Start button (opening screen) hovers green instead of orange */
.btn-primary.btn-start:hover:not(:disabled) { background: var(--green); }

/* Next button: hover stays black; animate the arrow gap instead of colour */
.btn-primary.btn-next:hover:not(:disabled) { background: var(--text); }
.btn-next-arrow { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.btn-primary.btn-next:hover:not(:disabled) .btn-next-arrow { transform: translateX(6px); }
.btn-primary:active:not(:disabled) { transform: scale(0.98); }
.btn-primary:disabled { background: var(--surface-variant); color: var(--muted); cursor: not-allowed; }
.btn-primary .ms { font-size: 18px; }
.btn-full { width: 100%; }

/* ════════════════════════════════════════════════════════
   CONFIRMATION / RESULT SCREENS
   ════════════════════════════════════════════════════════ */
.result-center { text-align: center; max-width: 570px; margin: 0 auto; }
/* Booked screen: comfortable column; the Cal embed self-constrains + centres
   within it, so all three Cal screens sit at one consistent width. */
.result-booked { max-width: 620px; }
.result-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--space-24);
  display: flex; align-items: center; justify-content: center;
}
.result-icon.green { background: var(--green-light); color: var(--green); }
.result-icon.warm  { background: var(--red-light); color: var(--orange); }
.result-icon .ms { font-size: 34px; }
.result-title {
  font-family: var(--md-ref-typeface-brand); font-weight: normal;
  font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.15; margin-bottom: var(--space-12);
}
.result-body { font-size: var(--t-body-lg); line-height: 1.6; color: var(--muted); margin-bottom: var(--space-24); }

/* Cal.com embed slot */
/* Booked confirmation screen sits on pure white so the Cal embed has no
   parchment seam around it. */
.stage:has(.result-booked) { background: var(--pure-white); }
/* Let the booked screen's column grow wider than the form's normal 660px
   so the Cal.com embed has more breathing room (~15%). */
.stage-inner:has(.result-booked) { max-width: 620px; }
#cal-inline { background: var(--pure-white) !important; }

.cal-embed-wrap { margin-top: var(--space-24); text-align: left; }
.cal-embed-label {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--orange); margin-bottom: var(--space-12);
}
.cal-embed-label.center { text-align: center; }
#cal-inline {
  width: 100%; max-width: 560px; margin: 0 auto;
  min-height: 580px; background: var(--surface);
  overflow: hidden;
}
/* Placeholder shown before Cal.com loads / if not configured */
.cal-placeholder {
  width: 100%; min-height: 320px; background: var(--pure-white);
  border: 2px dashed var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-12); text-align: center; padding: var(--space-40) var(--space-24); color: var(--muted);
}
.cal-placeholder .ms { font-size: 40px; opacity: 0.5; }

/* Manual fallback button (mailto / copy summary) */
.manual-actions { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-24); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  font-family: 'Avantt', sans-serif; font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; padding: var(--space-12) var(--space-16);
  cursor: pointer; border: none; background: var(--surface-variant); color: var(--text);
  transition: background 0.12s, color 0.12s;
}
.btn-ghost:hover { background: var(--text); color: var(--white); }
.btn-ghost.copied { background: var(--green); color: white; }
.btn-ghost .ms { font-size: 16px; }

/* Note line */
.fine-note { font-size: var(--t-body-sm); color: var(--muted); line-height: 1.5; margin-top: var(--space-16); }

/* ── RESPONSIVE ── */
@media (max-width: 540px) {
  html { font-size: 17px; }
  .site-header { padding: 0 var(--space-16); }
  .header-brand { gap: var(--space-12); }
  .ss-icon { width: 28px; height: 28px; }
  .lang-btn { padding: 0 var(--space-12); }
  .stage-inner { padding: var(--space-32) var(--space-16) var(--space-24); }
  .footer-nav { padding-left: var(--space-16); padding-right: var(--space-16); }
  .slider-anchor { font-size: var(--t-micro); }
  .btn-primary { padding: var(--space-16) var(--space-24); }

  /* Booked screen: Cal embed at 95% width on mobile, centred. */
  /* Mobile: Cal embed = 90% width, consistent across all Cal screens.
     Override the desktop 560px cap so the iframe fills the 90% wrap. */
  .result-booked .cal-embed-wrap {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  #cal-inline { max-width: none; }
}