/* Signup panel — an fs-card "index card" that expands inline under the
   clicked CTA key. Carousel of 3 steps, machine-style progress readout. */

.panel-clip {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms ease;
}
.panel-clip.open { grid-template-rows: 1fr; }
.panel-clip > .panel-viewport { overflow: hidden; min-height: 0; }

.signup-card {
  /* reset inherited context (the footer sets mono/uppercase/letter-spacing) */
  font-family: var(--f-body);
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  position: relative;
  margin: 18px 2px 6px;
  background: var(--fs-card);
  color: var(--fs-ink);
  border: 1px solid var(--fs-edge);
  border-left: 5px solid var(--fs-olive);
  border-radius: 10px;
  box-shadow: var(--fs-shadow-card);
  padding: 26px 26px 22px;
  max-width: 560px;
}
.signup-card::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 26px;
  width: 74px;
  height: 18px;
  background: rgba(217, 162, 59, 0.4);
  transform: rotate(-2deg);
  pointer-events: none;
}

.signup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.signup-head .readout {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fs-ink-soft);
}
.step-dots { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.step-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--fs-ink-soft);
  background: transparent;
}
.step-dots i.on { background: var(--fs-olive); border-color: var(--fs-olive); }

/* steps: only the active one is in the DOM flow (others have [hidden]) */
.step[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .step { animation: step-in 220ms ease both; }
  .step.from-right { animation-name: step-in; }
  .step.from-left { animation-name: step-in-back; }
  @keyframes step-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
  @keyframes step-in-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
}
.step h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.field { margin-bottom: 16px; }
.field label, fieldset legend {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-ink-soft);
  margin-bottom: 6px;
}
.field input[type='text'], .field input[type='email'] {
  width: 100%;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--fs-ink);
  background: var(--fs-panel);
  border: 1px solid var(--fs-hair);
  border-radius: 6px;
  padding: 10px 12px;
}
.field input::placeholder { color: var(--fs-ink-faint); }
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

fieldset { border: 0; margin-bottom: 16px; }

/* 1–5 blend scale: a row of tactile keys */
.scale-row { display: flex; gap: 8px; }
.scale-row label {
  flex: 1;
  text-align: center;
  font-family: var(--f-dotmx);
  font-size: 1.3rem;
  color: var(--fs-ink);
  background: var(--fs-panel);
  border: 1px solid var(--fs-hair);
  border-radius: 6px;
  padding: 8px 0;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--fs-hair);
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}
.scale-row input { position: absolute; opacity: 0; pointer-events: none; }
.scale-row input:checked + label {
  background: color-mix(in srgb, var(--fs-olive) 38%, var(--fs-card));
  border-color: var(--fs-ink);
  box-shadow: 0 0 0 var(--fs-hair);
  transform: translateY(2px);
}
.scale-row input:focus-visible + label { outline: 2px solid var(--fs-mustard); outline-offset: 2px; }
.scale-ends {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-ink-faint);
  margin-top: 6px;
}

/* radio list (capture method) */
.radio-list { display: flex; flex-direction: column; gap: 8px; }
.radio-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fs-ink);
  background: var(--fs-panel);
  border: 1px solid var(--fs-edge);
  border-radius: 6px;
  padding: 9px 12px;
  cursor: pointer;
  margin: 0;
}
.radio-list label:has(input:checked) {
  border-color: var(--fs-olive);
  background: color-mix(in srgb, var(--fs-olive) 12%, var(--fs-card));
}
.radio-list input { accent-color: var(--fs-olive); }
#capture-other-wrap[hidden] { display: none; }

.error-msg {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--fs-red);
  margin-top: 6px;
}
.error-msg:empty { display: none; }
input[aria-invalid='true'], .invalid { border-color: var(--fs-red) !important; }

.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.key--ghost {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--fs-hair);
  color: var(--fs-ink-soft);
}
.key--ghost:hover { background: var(--fs-panel); }
.key[disabled] { opacity: 0.55; cursor: wait; transform: none; }

.form-error {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--fs-red);
  margin-top: 12px;
}
.form-error:empty { display: none; }
.form-error a { color: inherit; }

/* collapsed confirmation strip */
.confirm-strip {
  letter-spacing: normal;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 2px 6px;
  max-width: 560px;
  background: var(--fs-card);
  border: 1px solid var(--fs-edge);
  border-left: 5px solid var(--fs-olive);
  border-radius: 10px;
  box-shadow: var(--fs-shadow-soft);
  padding: 14px 18px;
  font-family: var(--f-body);
  font-size: 0.9375rem;
  color: var(--fs-ink);
}
.confirm-strip .check {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fs-olive);
  color: var(--fs-card);
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.8125rem;
}

/* Calendly scheduling embed — mounts inside the post-submit confirm block
   (C and D) */
.calendly-slot {
  margin-top: 18px;
  border-top: 1px dotted var(--fs-hair);
  padding-top: 18px;
}
.calendly-slot[hidden] { display: none; }
.calendly-mount { height: clamp(520px, 80vh, 700px); }
.calendly-mount iframe { width: 100%; height: 100%; border: 0; }
.calendly-loading {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-ink-faint);
}
/* post-submit confirm block: the strip plus the scheduler under it */
.confirm-block {
  margin: 18px 2px 6px;
  max-width: 560px;
  background: var(--fs-card);
  border: 1px solid var(--fs-edge);
  border-left: 5px solid var(--fs-olive);
  border-radius: 10px;
  box-shadow: var(--fs-shadow-soft);
  padding: 14px 18px 18px;
  letter-spacing: normal;
  text-transform: none;
}
.confirm-block .confirm-strip {
  margin: 0;
  padding: 0;
  max-width: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* visually hidden (honeypot wrapper, sr-only text) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .signup-card { padding: 20px 16px 18px; }
  .name-row { grid-template-columns: 1fr; }
}