/* Website CTA card — docs/webflow-cta-booking.md §1 (states) + §3 (motion).
   Served from gs://psg-assets-public/webflow/cta/cta.css; markup is the Webflow
   component "CTA — Book a call" (reference copy: card.html). All durations are
   multiplied by --cta-speed (set from ?slow=N by cta.js) so motion can be
   reviewed in slow motion. Only transform / opacity / clip-path / filter
   animate, plus grid-template-rows on the expand wrappers (§3, escape field)
   and the two continuous indicators (the perimeter beam while we look, the
   gradient ink on a derived value). */

.cta-card {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --cta-speed: 1;
  --cta-orange: #FF4A1C;
  --cta-ink: #12192B;
  --cta-label: #5C6470;
  --cta-faint: #9CA3AF;
  --cta-meta: #6B7280;
  --cta-border: #E5E7EB;
  --cta-divider: #EEEEEC;
  --cta-tint: #FFF4EF;
  --cta-tint-border: rgba(255, 74, 28, 0.25);
  --cta-skel: #E7E9ED;
  --cta-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cta-display: "Coolvetica Rg", "Coolvetica", "Manrope", system-ui, sans-serif;

  position: relative;
  box-sizing: border-box;
  width: 470px;
  max-width: 100%;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid var(--cta-border);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(18, 24, 40, 0.05), 0 24px 56px rgba(18, 24, 40, 0.12);
  font-family: var(--cta-font);
  font-size: 14px;
  line-height: 18px;
  color: var(--cta-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
}
.cta-card *, .cta-card *::before, .cta-card *::after { box-sizing: border-box; }
.cta-card :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
.cta-card :where(input, select, textarea) { font: inherit; color: inherit; margin: 0; }
.cta-card :where(a) { color: var(--cta-orange); text-decoration: none; }
.cta-card [hidden] { display: none !important; }

/* Forced ?state= renders skip every transition for one frame. */
.cta-card.cta-no-motion, .cta-card.cta-no-motion * { transition: none !important; animation-duration: 0s !important; }

/* ── Expand wrappers (grid-template-rows 0fr → 1fr, §3 escape row) ───────── */
:is(.cta-x-body, .cta-x-escape, .cta-x-rows, .cta-x-step1, .cta-x-step2, .cta-x-all, .cta-x-booked, .cta-x-call, .cta-x-note) {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  margin-top: -16px;
  transition:
    grid-template-rows calc(180ms * var(--cta-speed)) var(--ease-in-out),
    margin-top calc(180ms * var(--cta-speed)) var(--ease-in-out),
    opacity calc(140ms * var(--cta-speed)) var(--ease-out),
    visibility 0s linear calc(180ms * var(--cta-speed));
}
/* min-width: 0 as well: a grid item defaults to min-width: auto, so a scrolling day strip
   wider than the card would size the column to its scrollWidth once overflow is visible. */
:is(.cta-x-body, .cta-x-escape, .cta-x-rows, .cta-x-step1, .cta-x-step2, .cta-x-all, .cta-x-booked, .cta-x-call, .cta-x-note) > * { min-height: 0; min-width: 0; overflow: hidden; }
:is(.cta-x-body, .cta-x-escape, .cta-x-rows, .cta-x-step1, .cta-x-step2, .cta-x-all, .cta-x-booked, .cta-x-call, .cta-x-note).is-open {
  grid-template-rows: 1fr;
  margin-top: 0;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows calc(220ms * var(--cta-speed)) var(--ease-out),
    margin-top calc(220ms * var(--cta-speed)) var(--ease-out),
    opacity calc(220ms * var(--cta-speed)) var(--ease-out),
    visibility 0s;
}
:is(.cta-x-body, .cta-x-escape, .cta-x-rows, .cta-x-step1, .cta-x-step2, .cta-x-all, .cta-x-booked, .cta-x-call, .cta-x-note).is-open.is-settled > * { overflow: visible; }
:is(.cta-body, .cta-x-escape-inner, .cta-x-rows-inner, .cta-x-step1-inner, .cta-x-step2-inner, .cta-x-all-inner, .cta-x-booked-inner, .cta-x-call-inner, .cta-x-note-inner) { display: flex; flex-direction: column; gap: 16px; }
/* The card gap still applies to a collapsed wrapper; the negative margin-top
   above cancels it so a closed wrapper takes no space at all. */
.cta-x-body, .cta-x-step1 { grid-template-rows: 1fr; opacity: 1; visibility: visible; margin-top: 0; }
:is(.cta-x-body, .cta-x-step1).is-closed { grid-template-rows: 0fr; opacity: 0; visibility: hidden; margin-top: -16px; }

/* ── Head: progress dots, top right ──────────────────────────────────────── */
.cta-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 20px; }
.cta-head-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cta-head-mark { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.cta-head-title { color: var(--cta-ink); font-family: var(--cta-display); font-size: 19px; line-height: 20px; letter-spacing: 0; white-space: nowrap; display: inline-block; transform: translateY(0); filter: blur(0); opacity: 1; transition: transform 150ms ease-in-out, filter 150ms ease-in-out, opacity 150ms ease-in-out; will-change: transform, filter, opacity; }
/* Title swap (transitions.dev "text states swap", driven by setTitle in cta.js): old text slides up + blurs out, the new text enters from below. */
.cta-head-title.is-exit { transform: translateY(-4px); filter: blur(2px); opacity: 0; }
.cta-head-title.is-enter-start { transform: translateY(4px); filter: blur(2px); opacity: 0; transition: none; }
.cta-dots { display: flex; align-items: center; gap: 6px; height: 14px; }
.cta-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--cta-border);
  transition:
    width calc(200ms * var(--cta-speed)) var(--ease-out),
    background-color calc(200ms * var(--cta-speed)) var(--ease-out);
}
.cta-dot.is-on { background: var(--cta-orange); }
.cta-dot.is-current { width: 16px; }
.cta-dots-done {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: var(--cta-orange);
}
.cta-dots-done svg { display: block; width: 8px; height: 8px; }
.cta-dots-done path { stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* ── Fields ──────────────────────────────────────────────────────────────── */
:is(.cta-field-email, .cta-field-company-escape, .cta-company-real, .cta-name-real, .cta-heard-real, .cta-x-note-inner) { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cta-x-note-inner { gap: 12px; }
:is(.cta-label-email, .cta-label-company-escape, .cta-label-company, .cta-label-name, .cta-label-heard, .cta-label-note) { color: var(--cta-label); font-size: 12px; font-weight: 600; line-height: 16px; }
:is(.cta-company-label-row, .cta-name-label-row, .cta-heard-label-row, .cta-note-label-row) { display: flex; align-items: center; gap: 6px; min-height: 16px; }
:is(.cta-email, .cta-company-escape, .cta-company-name, .cta-name, .cta-heard, .cta-note-text) {
  width: 100%;
  min-height: 45px;
  padding: 12px 14px;
  border: 1.5px solid var(--cta-border);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--cta-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color calc(120ms * var(--cta-speed)) var(--ease-out),
    box-shadow calc(160ms * var(--cta-speed)) var(--ease-out);
}
:is(.cta-email, .cta-company-escape, .cta-company-name, .cta-name, .cta-heard, .cta-note-text)::placeholder { color: var(--cta-faint); opacity: 1; }
:is(.cta-email, .cta-company-escape, .cta-company-name, .cta-name, .cta-heard, .cta-note-text):focus-visible { border-color: var(--cta-orange); box-shadow: 0 0 0 3px rgba(255, 74, 28, 0.16); }
:is(.cta-email, .cta-company-escape, .cta-company-name, .cta-name, .cta-heard, .cta-note-text).is-error { border-color: var(--cta-orange); }
:is(.cta-email, .cta-company-escape, .cta-company-name, .cta-name, .cta-heard):disabled { opacity: 0.7; }
.cta-note-text { min-height: 112px; resize: vertical; line-height: 20px; }
.cta-heard {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 L5 5 L9 1' fill='none' stroke='%239CA3AF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 32px;
  cursor: pointer;
}
.cta-heard.is-empty { color: var(--cta-faint); }

/* Derived value: gradient ink (the app's fieldDerivedClass) until the first edit;
   plain ink under the caret so the glyphs are never noise while typing. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  :is(.cta-company-name, .cta-name).is-derived:not(:focus) {
    background-image: linear-gradient(90deg, var(--cta-ink) 0%, var(--cta-ink) 38%, var(--cta-orange) 50%, var(--cta-ink) 62%, var(--cta-ink) 100%);
    background-size: 200% 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cta-ink calc(2400ms * var(--cta-speed)) linear infinite;
  }
}
@keyframes cta-ink { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Email input + trailing logo slot */
.cta-input-wrap { position: relative; }
.cta-input-wrap :is(.cta-email, .cta-company-escape) { padding-right: 46px; }
.cta-logo-slot {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  pointer-events: none;
}
.cta-logo {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity calc(180ms * var(--cta-speed)) var(--ease-out),
    transform calc(180ms * var(--cta-speed)) var(--ease-out);
}
.cta-logo.is-in { opacity: 1; transform: none; }

/* Perimeter beam while we look the email up (the app's DraftingBeam): a conic
   sweep masked to the 1.5px ring. Declared -webkit-mask BEFORE mask-composite —
   the shorthand resets the composite in Blink. */
@property --cta-beam-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cta-beam {
  position: absolute;
  inset: -1.5px;
  border-radius: 11.5px;
  padding: 1.5px;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from var(--cta-beam-angle), transparent 0deg, transparent 250deg, rgba(255, 74, 28, 0.35) 300deg, var(--cta-orange) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: opacity calc(150ms * var(--cta-speed)) var(--ease-out);
}
.cta-input-wrap.is-looking .cta-beam { opacity: 1; animation: cta-beam calc(2800ms * var(--cta-speed)) linear infinite; }
@keyframes cta-beam { to { --cta-beam-angle: 360deg; } }

/* "✦ Found Best Day Brewing" — the prefetch landed before Continue was pressed. */
.cta-found {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 16px;
  padding-top: 2px;
  color: var(--cta-orange);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity calc(160ms * var(--cta-speed)) var(--ease-out),
    transform calc(160ms * var(--cta-speed)) var(--ease-out);
}
.cta-found.is-in { opacity: 1; transform: none; }
.cta-found svg { display: block; width: 11px; height: 11px; flex-shrink: 0; }
.cta-found path { fill: var(--cta-orange); }
.cta-found-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Helper line (freemail error) — translateY(-4px)→0 + opacity 160ms */
.cta-helper-x { display: grid; grid-template-rows: 0fr; transition: grid-template-rows calc(160ms * var(--cta-speed)) var(--ease-out); }
.cta-helper-x > * { min-height: 0; overflow: hidden; }
.cta-helper-x.is-open { grid-template-rows: 1fr; }
.cta-helper {
  padding-top: 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--cta-orange);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity calc(120ms * var(--cta-speed)) var(--ease-out),
    transform calc(120ms * var(--cta-speed)) var(--ease-out);
}
.cta-helper-x.is-open .cta-helper {
  opacity: 1;
  transform: none;
  transition:
    opacity calc(160ms * var(--cta-speed)) var(--ease-out),
    transform calc(160ms * var(--cta-speed)) var(--ease-out);
}
.cta-helper-text { display: block; }
.cta-escape-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--cta-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(18, 25, 43, 0.3);
  text-underline-offset: 2px;
  border-radius: 4px;
  transition: text-decoration-color calc(160ms * var(--cta-speed)) var(--ease-out), transform calc(160ms * var(--cta-speed)) var(--ease-out);
}
.cta-escape-link:focus-visible { outline: 2px solid var(--cta-orange); outline-offset: 2px; }
.cta-escape-link:active { transform: scale(0.97); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
:is(.cta-continue, .cta-book, .cta-send) {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 54px;
  padding: 15px;
  border-radius: 10px;
  background: var(--cta-orange);
  color: #FFFFFF;
  font-family: var(--cta-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.005em;
  text-align: center;
  transition:
    transform calc(160ms * var(--cta-speed)) var(--ease-out),
    background-color calc(160ms * var(--cta-speed)) var(--ease-out),
    opacity calc(160ms * var(--cta-speed)) var(--ease-out);
}
:is(.cta-continue, .cta-book, .cta-send) > * { grid-area: 1 / 1; }
:is(.cta-continue, .cta-book, .cta-send):focus-visible { outline: 2px solid var(--cta-orange); outline-offset: 3px; }
:is(.cta-continue, .cta-book, .cta-send):active { transform: scale(0.97); }
:is(.cta-continue, .cta-book, .cta-send):disabled { cursor: not-allowed; opacity: 0.45; }
:is(.cta-continue, .cta-book, .cta-send):disabled:active { transform: none; }
:is(.cta-continue-idle, .cta-continue-busy, .cta-book-idle, .cta-book-busy, .cta-send-idle, .cta-send-busy) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition:
    opacity calc(200ms * var(--cta-speed)) var(--ease-out),
    filter calc(200ms * var(--cta-speed)) var(--ease-out);
}
:is(.cta-continue-busy, .cta-book-busy, .cta-send-busy) { opacity: 0; filter: blur(2px); pointer-events: none; }
:is(.cta-continue, .cta-book, .cta-send).is-busy { cursor: progress; opacity: 1; }
:is(.cta-continue, .cta-book, .cta-send).is-busy :is(.cta-continue-idle, .cta-book-idle, .cta-send-idle) { opacity: 0; filter: blur(2px); }
:is(.cta-continue, .cta-book, .cta-send).is-busy :is(.cta-continue-busy, .cta-book-busy, .cta-send-busy) { opacity: 1; filter: none; }
:is(.cta-continue-spinner, .cta-book-spinner, .cta-send-spinner) {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: cta-spin calc(600ms * var(--cta-speed)) linear infinite;
}
@keyframes cta-spin { to { transform: rotate(360deg); } }

/* Success morph (transitions.dev "spinner → check"): the busy row blurs out,
   a ring draws closed and the check draws inside it, both in the button. */
.cta-book-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.cta-book-done.is-in { opacity: 1; }
.cta-book-done svg { display: block; width: 24px; height: 24px; }
.cta-book-done circle { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; }
.cta-book-done path { fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

:is(.cta-note-2, .cta-note-3, .cta-note-4) { color: var(--cta-faint); font-size: 11px; font-weight: 500; line-height: 14px; text-align: center; }
.cta-divider-2 { height: 1px; width: 100%; background: var(--cta-divider); }

/* ── Skeleton ↔ text slots (grid-stacked; no layout shift) ───────────────── */
:is(.cta-field-company, .cta-field-name, .cta-field-heard, .cta-chips-stack) { display: grid; min-width: 0; }
:is(.cta-field-company, .cta-field-name, .cta-field-heard, .cta-chips-stack) > * { grid-area: 1 / 1; min-width: 0; }
:is(.cta-company-skel, .cta-name-skel, .cta-heard-skel) { pointer-events: none; display: flex; flex-direction: column; gap: 6px; }
:is(.cta-company-skel-bar, .cta-name-skel-bar, .cta-heard-skel-bar) { height: 8px; border-radius: 4px; background: var(--cta-skel); width: 38%; margin: 4px 0; }
.cta-company-skel-bar { width: 22%; }
:is(.cta-company-skel-box, .cta-name-skel-box, .cta-heard-skel-box, .cta-chip-skel-a, .cta-chip-skel-b, .cta-chip-skel-c) { border-radius: 10px; background: #F3F4F6; }
:is(.cta-company-skel-box, .cta-name-skel-box, .cta-heard-skel-box) { height: 45px; }
:is(.cta-company-real, .cta-name-real, .cta-heard-real, .cta-chips) { opacity: 0; }
.cta-card.is-resolved :is(.cta-company-real, .cta-name-real, .cta-heard-real, .cta-chips) { opacity: 1; }
.cta-card.is-resolved :is(.cta-company-skel, .cta-name-skel, .cta-heard-skel) { visibility: hidden; }
:is(.cta-company-skel-bar, .cta-name-skel-bar, .cta-heard-skel-bar, .cta-company-skel-box, .cta-name-skel-box, .cta-heard-skel-box, .cta-chip-skel-a, .cta-chip-skel-b, .cta-chip-skel-c) { position: relative; overflow: hidden; }
:is(.cta-company-skel-bar, .cta-name-skel-bar, .cta-heard-skel-bar, .cta-company-skel-box, .cta-name-skel-box, .cta-heard-skel-box, .cta-chip-skel-a, .cta-chip-skel-b, .cta-chip-skel-c)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-100%);
  animation: cta-shimmer calc(1400ms * var(--cta-speed)) var(--ease-in-out) infinite;
}
@keyframes cta-shimmer { to { transform: translateX(100%); } }

/* ── Company field ───────────────────────────────────────────────────────── */
.cta-company-meta { color: var(--cta-meta); font-size: 11px; font-weight: 500; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cta-company-meta:empty { display: none; }

/* ── Sparkle provenance mark + tooltip (the app's DerivedSparkle) ────────── */
:is(.cta-company-badge, .cta-name-badge) {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--cta-orange);
  border-radius: 4px;
  cursor: help;
  transform-origin: center;
  transition:
    opacity calc(140ms * var(--cta-speed)) var(--ease-out),
    transform calc(140ms * var(--cta-speed)) var(--ease-out);
}
:is(.cta-company-badge, .cta-name-badge)::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 9.4 6.1 14 7.5 9.4 8.9 8 13.5 6.6 8.9 2 7.5 6.6 6.1 8 1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 9.4 6.1 14 7.5 9.4 8.9 8 13.5 6.6 8.9 2 7.5 6.6 6.1 8 1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.cta-company-badge, .cta-name-badge):focus-visible { outline: 2px solid var(--cta-orange); outline-offset: 2px; }
:is(.cta-company-badge, .cta-name-badge):active { transform: scale(0.97); }
:is(.cta-company-badge, .cta-name-badge).is-off { opacity: 0; transform: scale(0.4) rotate(-30deg); pointer-events: none; }
:is(.cta-company-tip, .cta-name-tip) {
  display: block;
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 2;
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--cta-ink);
  color: #D4DAE6;
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  white-space: normal;
  text-align: left;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition:
    opacity calc(120ms * var(--cta-speed)) var(--ease-out),
    transform calc(120ms * var(--cta-speed)) var(--ease-out);
}
:is(.cta-company-tip, .cta-name-tip)::after { content: ""; position: absolute; left: 6px; top: 100%; border: 5px solid transparent; border-top-color: var(--cta-ink); }
:is(.cta-company-badge, .cta-name-badge):focus-visible :is(.cta-company-tip, .cta-name-tip), :is(.cta-company-badge, .cta-name-badge).is-tip :is(.cta-company-tip, .cta-name-tip) { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  :is(.cta-company-badge, .cta-name-badge):hover :is(.cta-company-tip, .cta-name-tip) { opacity: 1; transform: none; }
}

/* ── Name + heard-from row ───────────────────────────────────────────────── */
.cta-people-row { display: flex; gap: 12px; align-items: flex-start; }
.cta-field-name { flex: 1 1 auto; }
.cta-field-heard { flex: 0 0 180px; width: 180px; }

/* ── Times ───────────────────────────────────────────────────────────────── */
.cta-times { display: flex; flex-direction: column; gap: 10px; }
.cta-times-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cta-times-label { color: var(--cta-label); font-size: 12px; font-weight: 600; line-height: 16px; }
.cta-times-tz { color: var(--cta-faint); font-weight: 500; }
:is(.cta-more, .cta-all-toggle) {
  color: var(--cta-orange);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  padding: 4px 0;
  margin: -4px 0;
  border-radius: 4px;
  transition: transform calc(160ms * var(--cta-speed)) var(--ease-out), opacity calc(160ms * var(--cta-speed)) var(--ease-out);
}
:is(.cta-more, .cta-all-toggle):focus-visible { outline: 2px solid var(--cta-orange); outline-offset: 2px; }
:is(.cta-more, .cta-all-toggle):active { transform: scale(0.97); }
.cta-chips-wrap { position: relative; }
.cta-chips, .cta-chips-on, .cta-chips-skel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cta-chip, .cta-chip-on {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  min-height: 50px;
  padding: 10px 18px;
  border: 1px solid var(--cta-border);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--cta-ink);
  text-align: center;
  transition:
    transform calc(160ms * var(--cta-speed)) var(--ease-out),
    border-color calc(160ms * var(--cta-speed)) var(--ease-out);
}
.cta-chip:focus-visible { outline: 2px solid var(--cta-orange); outline-offset: 2px; }
.cta-chip:active { transform: scale(0.97); }
.cta-chip-time { font-size: 13px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.cta-chip-sub { color: var(--cta-faint); font-size: 10px; font-weight: 500; line-height: 12px; white-space: nowrap; }
.cta-chip.is-selected { border-color: var(--cta-orange); }
/* Orange duplicate of the row, clipped to the selected chip (§3 clip-path technique). */
.cta-chips-on {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  clip-path: inset(0 100% 0 0 round 10px);
  transition:
    clip-path calc(200ms * var(--cta-speed)) var(--ease-in-out),
    opacity calc(200ms * var(--cta-speed)) var(--ease-out);
}
.cta-chips-on.is-on { opacity: 1; }
.cta-chip-on { border-color: var(--cta-orange); background: var(--cta-orange); color: #FFFFFF; }
.cta-chip-on .cta-chip-sub { color: rgba(255, 255, 255, 0.85); }
.cta-chips-skel { pointer-events: none; }
:is(.cta-chip-skel-a, .cta-chip-skel-b, .cta-chip-skel-c) { height: 50px; }
.cta-chips-empty { color: var(--cta-meta); font-size: 12px; font-weight: 500; line-height: 16px; }

/* More times: a day strip (days with openings) + six spread-out times on the
   30-minute grain for the picked day; "All N times on Tuesday" opens the full grid. */
.cta-x-all:not(.is-open) { margin-top: -10px; }
.cta-all { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; min-width: 0; }
.cta-days { display: flex; gap: 6px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 2px; }
.cta-days::-webkit-scrollbar { display: none; }
.cta-day {
  flex: 1 0 auto;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--cta-border);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--cta-ink);
  scroll-snap-align: start;
  transition:
    transform calc(160ms * var(--cta-speed)) var(--ease-out),
    background-color calc(160ms * var(--cta-speed)) var(--ease-out),
    border-color calc(160ms * var(--cta-speed)) var(--ease-out),
    color calc(160ms * var(--cta-speed)) var(--ease-out);
}
.cta-day:focus-visible { outline: 2px solid var(--cta-orange); outline-offset: 2px; }
.cta-day:active { transform: scale(0.97); }
.cta-day-name { font-size: 12px; font-weight: 700; line-height: 14px; white-space: nowrap; }
.cta-day-num { color: var(--cta-faint); font-size: 11px; font-weight: 500; line-height: 14px; }
.cta-day.is-selected { background: var(--cta-ink); border-color: var(--cta-ink); color: #FFFFFF; }
.cta-day.is-selected .cta-day-num { color: rgba(255, 255, 255, 0.7); }
.cta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cta-all-slot {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 11px 7px;
  border: 1px solid var(--cta-border);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--cta-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  transition:
    transform calc(160ms * var(--cta-speed)) var(--ease-out),
    background-color calc(160ms * var(--cta-speed)) var(--ease-out),
    border-color calc(160ms * var(--cta-speed)) var(--ease-out),
    color calc(160ms * var(--cta-speed)) var(--ease-out);
}
.cta-all-slot:focus-visible { outline: 2px solid var(--cta-orange); outline-offset: 2px; }
.cta-all-slot:active { transform: scale(0.97); }
.cta-all-slot.is-selected { background: var(--cta-orange); border-color: var(--cta-orange); color: #FFFFFF; }
.cta-all-toggle { display: block; margin: 0 auto; color: var(--cta-label); }
.cta-all-toggle:empty { display: none; }

/* ── Send a note instead ─────────────────────────────────────────────────── */
.cta-switch {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 4px 0;
  margin: -4px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--cta-label);
  transition: transform calc(160ms * var(--cta-speed)) var(--ease-out);
}
.cta-switch:focus-visible { outline: 2px solid var(--cta-orange); outline-offset: 2px; }
.cta-switch:active { transform: scale(0.97); }
.cta-switch-link { color: var(--cta-orange); font-weight: 600; }
.cta-card.is-note .cta-divider-2 { display: none; }

/* ── Booked / sent ───────────────────────────────────────────────────────── */
.cta-booked { display: flex; flex-direction: column; gap: 18px; }
.cta-booked-head { display: flex; align-items: center; gap: 14px; }
.cta-check {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: var(--cta-orange);
}
.cta-check svg { display: block; width: 20px; height: 20px; }
.cta-check path { stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.cta-booked-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cta-booked-title { color: var(--cta-ink); font-family: var(--cta-display); font-size: 27px; line-height: 30px; }
.cta-booked-sub { color: var(--cta-meta); font-size: 12px; font-weight: 500; line-height: 16px; overflow-wrap: anywhere; }
.cta-booked-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--cta-tint-border);
  border-radius: 10px;
  background: var(--cta-tint);
}
.cta-booked-time { color: var(--cta-ink); font-size: 14px; font-weight: 700; line-height: 18px; }
.cta-booked-host { color: var(--cta-meta); font-size: 12px; font-weight: 500; line-height: 16px; }
.cta-booked-links { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 2px; }
:is(.cta-meet-link, .cta-cal-link) {
  display: inline-block;
  color: var(--cta-orange);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  border-radius: 4px;
  transition: transform calc(160ms * var(--cta-speed)) var(--ease-out), opacity calc(160ms * var(--cta-speed)) var(--ease-out);
}
:is(.cta-meet-link, .cta-cal-link):focus-visible { outline: 2px solid var(--cta-orange); outline-offset: 2px; }
:is(.cta-meet-link, .cta-cal-link):active { transform: scale(0.97); }
.cta-booked-next { display: flex; flex-direction: column; gap: 4px; }
.cta-booked-next-title { color: var(--cta-ink); font-size: 13px; font-weight: 700; line-height: 18px; }
.cta-booked-next-text { color: var(--cta-label); font-size: 13px; font-weight: 500; line-height: 18px; }
.cta-fallback-copy { color: var(--cta-ink); font-size: 13px; font-weight: 500; line-height: 19px; }
.cta-booked-slot { display: none; }
.cta-card.is-fallback :is(.cta-booked-detail, .cta-booked-next) { display: none; }
.cta-card:not(.is-fallback) .cta-fallback-copy { display: none; }
.cta-card.is-sent :is(.cta-booked-detail, .cta-booked-next, .cta-fallback-copy, .cta-note-3) { display: none; }

/* Turnstile invisible widget host */
.cta-turnstile { height: 0; overflow: hidden; }

/* ── Page section around the card (page-level, not in the component) ─────── */
/* The section is transparent: the body's noise texture shows through, the same ground as the
   navbar and the footer. The copy anchors to the top so it holds still while the card grows. */
.cta-section { box-sizing: border-box; width: 100%; padding: 96px 200px 80px; background: transparent; font-family: var(--cta-font, "Manrope", system-ui, sans-serif); }
.cta-section-inner { box-sizing: border-box; display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; max-width: 1040px; margin: 0 auto; }
.cta-copy { display: flex; flex-direction: column; gap: 26px; width: 480px; max-width: 100%; flex-shrink: 1; padding-top: 6px; }
.cta-copy-eyebrow { color: #98A1AE; font-family: "Manrope", system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; line-height: 16px; }
.cta-copy-h1 { margin: 0; color: #111111; font-family: "Coolvetica Rg", "Coolvetica", "Manrope", system-ui, sans-serif; font-size: 64px; font-weight: 400; line-height: 68px; letter-spacing: 0; }
.cta-copy-h1-accent { display: block; color: #FF4A1C; }
.cta-copy-lede { margin: 0; max-width: 420px; color: #5C6470; font-family: "Manrope", system-ui, sans-serif; font-size: 17px; font-weight: 500; line-height: 27px; }
.cta-copy-list { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.cta-copy-item, :is(.cta-copy-item-a, .cta-copy-item-b, .cta-copy-item-c) { display: flex; align-items: center; gap: 10px; color: #2B2B30; font-family: "Manrope", system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 18px; }
:is(.cta-copy-item, .cta-copy-item-a, .cta-copy-item-b, .cta-copy-item-c)::before { content: "✦"; flex-shrink: 0; color: #FF4A1C; font-size: 14px; line-height: 14px; }
.cta-card-host { flex-shrink: 0; width: 470px; max-width: 100%; }

@media screen and (max-width: 991px) {
  .cta-section { padding: 72px 48px 64px; }
  .cta-section-inner { gap: 40px; }
  .cta-copy-h1 { font-size: 52px; line-height: 56px; }
}
@media screen and (max-width: 767px) {
  .cta-section { padding: 56px 24px 56px; }
  .cta-section-inner { flex-direction: column; align-items: stretch; gap: 36px; }
  .cta-copy { width: 100%; }
  .cta-card-host { width: 100%; }
  .cta-copy-h1 { font-size: 44px; line-height: 48px; }
}
@media screen and (max-width: 560px) {
  .cta-card { width: 100%; padding: 22px 18px; }
  .cta-card-host { width: 100%; }
  :is(.cta-email, .cta-company-escape, .cta-company-name, .cta-name, .cta-heard) { min-height: 46px; }
  :is(.cta-continue, .cta-book, .cta-send) { min-height: 54px; }
  .cta-chip, .cta-chip-on { padding: 10px 6px; }
  :is(.cta-more, .cta-switch) { padding: 12px 0; margin: -12px 0; }
  .cta-all-toggle { padding: 12px 0; margin: -12px auto; }
  .cta-escape-link { padding: 6px 0; }
  .cta-all-slot { min-height: 44px; padding: 13px 6px; }
  :is(.cta-company-badge, .cta-name-badge) { width: 24px; height: 24px; }
}
@media screen and (max-width: 479px) {
  .cta-section { padding: 40px 16px 48px; }
  .cta-copy-h1 { font-size: 40px; line-height: 44px; }
  .cta-people-row { flex-direction: column; align-items: stretch; }
  .cta-field-heard { flex-basis: auto; width: 100%; }
  :is(.cta-company-tip, .cta-name-tip) { max-width: 220px; }
}

/* ── Reduced motion: keep opacity + color, drop translate / scale / shake ─── */
@media (prefers-reduced-motion: reduce) {
  .cta-logo, .cta-helper, .cta-found, :is(.cta-company-badge, .cta-name-badge), :is(.cta-company-tip, .cta-name-tip), :is(.cta-continue, .cta-book, .cta-send), .cta-chip, .cta-chip-on, .cta-more, .cta-all-toggle,
  .cta-escape-link, .cta-all-slot, .cta-day, .cta-switch, :is(.cta-meet-link, .cta-cal-link) { transform: none !important; }
  :is(.cta-continue, .cta-book, .cta-send):active, .cta-chip:active, .cta-more:active, .cta-all-toggle:active, .cta-escape-link:active, .cta-all-slot:active, .cta-day:active, .cta-switch:active, :is(.cta-meet-link, .cta-cal-link):active { transform: none !important; }
  :is(.cta-company-skel-bar, .cta-name-skel-bar, .cta-heard-skel-bar, .cta-company-skel-box, .cta-name-skel-box, .cta-heard-skel-box, .cta-chip-skel-a, .cta-chip-skel-b, .cta-chip-skel-c)::after, :is(.cta-continue-spinner, .cta-book-spinner, .cta-send-spinner) { animation-duration: 0s; }
  :is(.cta-continue-spinner, .cta-book-spinner, .cta-send-spinner) { animation: cta-spin 600ms linear infinite; }
  /* The beam becomes a static tinted ring; the ink stops sweeping. */
  .cta-input-wrap.is-looking .cta-beam { animation: none; background: rgba(255, 74, 28, 0.4); }
  :is(.cta-company-name, .cta-name).is-derived:not(:focus) { animation: none; }
  .cta-head-title { transition: none !important; transform: none !important; filter: none !important; }
}