/* ============================================================
   /book — talk-to-team booking page
   Matches the landing's warm palette + frame chrome.
   ============================================================ */

:root {
  --bg: #ede8e0;
  --bg-2: #e5e0d7;
  --fg: #1a1a1a;
  --fg-muted: #5a5a5a;
  --fg-dim: #8b8b8b;
  --border: #d4cfc7;
  --border-strong: #b8b3aa;
  --terminal-bg: #1a1a1a;
  --terminal-fg: #ede8e0;
  --green: #5a9a6b;
  --slot-bg: #f6f1e8;
  --slot-bg-hover: #ebe5d8;
  --slot-disabled: #ddd6cb;
  --transition: 0.18s ease;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --page-pad: clamp(20px, 4vw, 56px);
  --max-w: min(1180px, 96vw);
  --nav-h: clamp(54px, 5.5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
*:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

html, body {
  height: 100dvh;
  background: var(--bg);
}
body {
  font-family: var(--font-sans);
  color: var(--fg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex; flex-direction: column;
  overflow: hidden;
}

a { color: var(--fg); text-decoration: none; transition: opacity var(--transition); }
a:hover { opacity: 0.6; }
button { font: inherit; cursor: pointer; color: inherit; background: transparent; border: 0; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ---- Header ---- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  flex-shrink: 0;
  background: rgba(237, 232, 224, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
  padding: 0 var(--page-pad);
  gap: 16px;
}
.site-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(14px, 1vw, 16px);
}
.site-logo img { background: var(--terminal-bg); padding: 3px; }
.head-right { display: inline-flex; align-items: center; gap: 18px; }
.tz-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.tz-badge i { font-size: 14px; line-height: 1; }
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- Shell + frame ---- */
.book-shell {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: clamp(16px, 2vw, 28px) var(--page-pad) clamp(28px, 3.5vw, 52px);
}
.book-frame {
  position: relative;
  flex: 1; min-height: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(26, 26, 26, 0.08);
}

/* ---- Mount choreography ---- */
@keyframes mount-head-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes mount-frame-in {
  from { opacity: 0; transform: translateY(14px) scale(0.992); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes child-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slot-in {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes done-pop {
  0%   { opacity: 0; transform: scale(0.55); }
  55%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cal-cell-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

.site-head {
  /* override the sticky element's first paint with a soft drop-in. */
  animation: mount-head-in 500ms cubic-bezier(0.2, 0.9, 0.32, 1) both;
}
.book-frame {
  animation: mount-frame-in 520ms cubic-bezier(0.2, 0.9, 0.32, 1) 120ms both;
}

/* ---- Steps share the frame; one visible at a time ---- */
.step {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: clamp(24px, 4vw, 52px) clamp(24px, 5vw, 64px);
  animation: step-in 280ms cubic-bezier(0.2, 0.9, 0.32, 1);
}
@keyframes step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Children of the email/confirm/done cards stagger up gently. */
.email-card > *, .confirm-card > *, .done-card > * {
  opacity: 0;
  animation: child-fade-up 360ms cubic-bezier(0.2, 0.9, 0.32, 1) forwards;
}
.email-card > *:nth-child(1),
.confirm-card > *:nth-child(1),
.done-card > *:nth-child(1)   { animation-delay: 80ms; }
.email-card > *:nth-child(2),
.confirm-card > *:nth-child(2),
.done-card > *:nth-child(2)   { animation-delay: 140ms; }
.email-card > *:nth-child(3),
.confirm-card > *:nth-child(3),
.done-card > *:nth-child(3)   { animation-delay: 200ms; }
.email-card > *:nth-child(4),
.confirm-card > *:nth-child(4),
.done-card > *:nth-child(4)   { animation-delay: 260ms; }
.email-card > *:nth-child(5),
.confirm-card > *:nth-child(5),
.done-card > *:nth-child(5)   { animation-delay: 320ms; }
.email-card > *:nth-child(n+6),
.confirm-card > *:nth-child(n+6),
.done-card > *:nth-child(n+6) { animation-delay: 380ms; }

/* Calendar step — left/right panes glide up in sequence. */
.cal-head, .cal-pane, .slots-pane {
  opacity: 0;
  animation: child-fade-up 380ms cubic-bezier(0.2, 0.9, 0.32, 1) forwards;
}
.cal-head   { animation-delay: 80ms; }
.cal-pane   { animation-delay: 160ms; }
.slots-pane { animation-delay: 220ms; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 14px;
}
.step-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.step-title.small { font-size: clamp(22px, 2.2vw, 28px); }
.step-sub {
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--fg-muted);
  max-width: 56ch;
}
.step-sub.small { font-size: 13px; margin-bottom: 0; }
.muted { color: var(--fg-dim); }
.muted-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 6px;
}

/* ---- CTAs ---- */
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(13px, 1vw, 15px);
  border: 1px solid transparent;
  transition: opacity var(--transition), background var(--transition), transform var(--transition);
}
.cta i { font-size: 18px; line-height: 1; }
.cta.primary { background: var(--terminal-bg); color: var(--terminal-fg); }
.cta.primary:hover { opacity: 0.9; }
.cta.ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.cta.ghost:hover { background: var(--fg); color: var(--terminal-fg); opacity: 1; }
.cta.big { padding: 16px 26px; font-size: 16px; }
.cta[disabled] { opacity: 0.45; cursor: not-allowed; }
.link-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.link-btn:hover { opacity: 0.6; }
.back-step { margin-bottom: 18px; }

/* Square icon button (e.g. pencil for "change email"). */
.icon-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--fg);
  transition: background var(--transition), color var(--transition);
}
.icon-btn i { font-size: 13px; line-height: 1; }
.icon-btn:hover { background: var(--fg); color: var(--terminal-fg); }

/* ============================================================
   Step 1 — email gate
   ============================================================ */
.step-email {
  align-items: center; justify-content: center;
  text-align: center;
}
.email-card {
  max-width: 540px;
  width: 100%;
}
.email-card .step-sub { margin-left: auto; margin-right: auto; margin-bottom: 28px; }
.email-form { display: flex; flex-direction: column; gap: 8px; }
.email-row {
  display: flex; gap: 0;
  border: 1px solid var(--fg);
  background: var(--bg);
}
.email-row input {
  flex: 1; min-width: 0;
  font: inherit;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  color: var(--fg);
  outline: none;
}
.email-row input::placeholder { color: var(--fg-dim); }
.email-row .cta { border-radius: 0; }
.form-error {
  font-size: 13px;
  color: #c0392b;
  min-height: 1.2em;
  text-align: left;
  padding-left: 4px;
}
.email-fineprint {
  margin-top: 16px;
  font-size: 12px;
  color: var(--fg-dim);
}

/* ============================================================
   Step 2 — calendar + slots
   ============================================================ */
.step-cal {
  /* Trim the step's bottom chrome by ~50px so the time list shows
     one more row before having to scroll. Other steps keep their
     generous padding. */
  padding-bottom: max(4px, calc(clamp(24px, 4vw, 52px) - 50px));
}

.cal-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.cal-head .step-sub { margin-bottom: 0; }
.signed-as {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.signed-as strong { font-weight: 600; }

.cal-layout {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 820px) {
  .cal-layout { grid-template-columns: 1fr; }
}

/* Calendar pane */
.cal-pane {
  display: flex; flex-direction: column;
  min-height: 0;
}
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.cal-arrow {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--fg);
}
.cal-arrow:hover { background: var(--fg); color: var(--terminal-fg); }
.cal-arrow[disabled] { opacity: 0.3; cursor: not-allowed; background: var(--bg); color: var(--fg); }
.cal-month-label {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 6px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  animation: child-fade-up 320ms cubic-bezier(0.2, 0.9, 0.32, 1) both;
}
.cal-day {
  aspect-ratio: 1.1 / 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg);
  position: relative;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.cal-day.is-out { color: var(--fg-dim); pointer-events: none; }
.cal-day.is-disabled { color: var(--fg-dim); cursor: not-allowed; pointer-events: none; }
.cal-day.has-slots { font-weight: 600; }
.cal-day.has-slots::after {
  content: "";
  position: absolute;
  bottom: 6px; left: 50%;
  width: 4px; height: 4px;
  background: var(--green);
  transform: translateX(-50%);
  border-radius: 50%;
}
.cal-day:not(.is-out):not(.is-disabled):not(.is-selected):hover {
  background: var(--slot-bg-hover);
  cursor: pointer;
}
/* Already selected — keep the inverted look on hover, no wash-out. */
.cal-day.is-selected:hover { cursor: default; }
.cal-day.is-today { border-color: var(--border-strong); }
.cal-day.is-selected {
  background: var(--terminal-bg);
  color: var(--terminal-fg);
  font-weight: 600;
  border-color: var(--terminal-bg);
}
.cal-day.is-selected::after { background: var(--terminal-fg); }

/* Slots pane */
.slots-pane {
  display: flex; flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--border);
  padding-left: clamp(20px, 3vw, 40px);
}
@media (max-width: 820px) {
  .slots-pane { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 20px; }
}
.slots-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 14px;
}
.slots-head strong { font-size: 18px; letter-spacing: -0.01em; }
.slots-head .muted { font-size: 13px; }
.slot-duration-pill {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 4px 9px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.slots-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
  /* Force the scrollbar to stay visible — macOS hides overlay scrollbars by
     default and the user wants to see they can scroll. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.slots-scroll::-webkit-scrollbar {
  width: 8px;
}
.slots-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.slots-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}
.slots-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--fg-muted);
}
.slots-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.slot-btn {
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  background: var(--slot-bg);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  text-align: center;
  transition: background var(--transition), color var(--transition), transform var(--transition);
  animation: slot-in 280ms cubic-bezier(0.2, 0.9, 0.32, 1) both;
  /* --i is set by JS for each button — cascades the entire row in. */
  animation-delay: calc(var(--i, 0) * 22ms);
}
.slot-btn:hover {
  background: var(--terminal-bg);
  color: var(--terminal-fg);
  transform: translateY(-1px);
}
.slot-btn.is-selected {
  background: var(--terminal-bg);
  color: var(--terminal-fg);
  border-color: var(--terminal-bg);
}
.slots-empty {
  text-align: center;
  color: var(--fg-dim);
  padding: 40px 20px;
}
.slots-empty i { font-size: 28px; margin-bottom: 10px; display: block; }
.slots-empty p { font-size: 14px; }
.slots-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 20px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--fg);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Step 3 — confirm
   ============================================================ */
.step-confirm { align-items: center; }
.confirm-card {
  max-width: 580px;
  width: 100%;
}
.confirm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 20px;
  margin: 18px 0 22px;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
@media (max-width: 620px) {
  .confirm-row { grid-template-columns: 1fr; }
}
.confirm-when-line {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.confirm-when-tz {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.confirm-where { font-size: 14px; }

.confirm-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
}
.field textarea, .field input {
  font: inherit;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  outline: none;
  resize: vertical;
}
.field textarea:focus, .field input:focus { border-color: var(--fg); }
#confirm-submit { align-self: flex-start; margin-top: 6px; }

/* ============================================================
   Step 4 — done
   ============================================================ */
.step-done { align-items: center; justify-content: center; text-align: center; }
.done-card { max-width: 520px; }
.done-mark i {
  font-size: 60px;
  color: var(--fg);
  margin-bottom: 18px;
  display: block;
  animation: done-pop 560ms cubic-bezier(0.34, 1.6, 0.5, 1) 120ms both;
}
.done-when {
  margin: 20px 0;
  padding: 16px 20px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 17px);
}
.done-actions {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.done-home {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ============================================================
   Footer — mail-us-at line
   ============================================================ */
.book-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px var(--page-pad) 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Mobile: shell goes edge-to-edge, the Continue button drops below the input,
   and the footer collapses to a single full-width email chip (no "mail us at"
   label since the icon + address are self-explanatory at small sizes, and the
   external "copied" flash text is replaced by the in-button icon swap). */
@media (max-width: 768px) {
  .book-shell {
    padding: 0;
    max-width: none;
  }
  .book-frame {
    border: 0;
    box-shadow: none;
  }
  .email-row {
    flex-direction: column;
    border: 0;
    gap: 10px;
    background: transparent;
  }
  .email-row input {
    border: 1px solid var(--fg);
    padding: 14px 16px;
  }
  .email-row .cta {
    width: 100%;
    justify-content: center;
  }
  .book-foot { padding: 12px 16px 16px; }
  .book-foot .book-foot-label,
  .book-foot .book-foot-flash { display: none; }
  .book-foot .email-copy {
    flex: 1;
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    font-size: 13px;
  }
}

/* Phones: trim the call-page chrome — drop the tz badge in the nav, hide the
   "booking as ..." line on step 2, and remove the green availability dots on
   the calendar days (the bold weight already conveys availability). */
@media (max-width: 500px) {
  .tz-badge { display: none; }
  .signed-as { display: none; }
  .cal-day.has-slots::after { display: none; }
}
.book-foot .email-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;     /* keep the email casing intact */
  transition: background var(--transition), color var(--transition);
}
.book-foot .email-copy:hover {
  background: var(--fg);
  color: var(--terminal-fg);
}
.book-foot .email-copy.copied {
  background: var(--fg);
  color: var(--terminal-fg);
}
.book-foot .email-icon { font-size: 13px; }
.book-foot-flash {
  opacity: 0;
  transition: opacity var(--transition);
  color: var(--fg);
}
.book-foot-flash.show { opacity: 1; }