/* ============================================================
   EnterCannected — Fit & Focus Call page (/fit-and-focus)
   Page-specific styles only. Reuses design tokens (--green, --white,
   --mid, --dark, --black, --gray, fonts, --edge, --maxw) and shared
   components (.btn, .btn.ghost, .eyebrow, .wrap, .nav, .footer,
   .magnetic-cta) already defined in ec-styles.css. No new fonts,
   colors, or animation systems are introduced here.
   ============================================================ */

.ff-body { background: var(--black); }

/* Fixed nav needs the same top offset pattern used on the Health
   Check page (.hc-app) so content never sits under the fixed bar.
   --ff-nav-h is measured live from the ACTUAL rendered #nav element by
   fit-and-focus.js (mirroring health-check.js's syncNavHeightVar) and
   kept in sync on resize, so this never drifts out of sync with the
   nav's real height at any breakpoint, font-load state, or future nav
   content change. The static px fallback values below only apply for
   the instant before that JS measurement runs (or if JS is disabled). */
.ff-app { padding-top: calc(var(--ff-nav-h, 96px) + 24px); }

.ff-wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--edge); }

.ff-section { padding: 48px 0 100px; }
.ff-hero-section { padding-bottom: 24px; }
.ff-scheduler-section { padding-top: 8px; }
.ff-prereq-section { padding: 64px 0 120px; }

.ff-h1 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.08;
  font-size: clamp(32px, 4.4vw, 52px);
  margin: 18px 0 22px;
  max-width: 24ch;
}

.ff-intro-emphasis {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--white);
  max-width: 62ch;
  margin-bottom: 28px;
}

.ff-supporting-copy p,
.ff-supporting-copy-single {
  color: #c7c7c7;
  max-width: 64ch;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.65;
}
.ff-supporting-copy p:last-child { margin-bottom: 0; }

.ff-scheduler-heading {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: clamp(24px, 2.6vw, 32px);
  margin-bottom: 10px;
}
.ff-scheduler-note {
  color: var(--gray);
  font-size: 14px;
  margin-bottom: 28px;
}

/* ---------- Calendly embed wrap ---------- */
/* SIZING MODEL: Calendly's inline widget reports its own real content
   height for whatever step is currently showing via a
   `calendly.page_height` postMessage event (fit-and-focus.js listens
   for this and sets `.ff-calendly-wrap`'s height inline to match, e.g.
   ~1000px for the calendar+time-list step, ~400-500px for the short
   "Verify your email" / confirmation steps). `height` below is only
   the STARTING value shown before that first real signal arrives (and
   the floor if JS is ever disabled) -- it intentionally uses `height`,
   not `min-height`. A previous version of this rule used `min-height`
   on the iframe itself, which silently acts as a floor that a SMALLER
   inline height can never shrink below -- that pinned every step
   (including short ones) to this one fixed tall size, leaving a large
   empty white gap under short steps like the email-verification code
   entry. Letting JS set an explicit `height` (which iframe/embed then
   fill via height:100% below) lets each step render at its own
   natural size instead. */
.ff-calendly-wrap {
  position: relative;
  height: 920px;
  min-height: 320px; /* safety floor only, well below any real Calendly step height, so a stray/late-arriving tiny page_height value can never collapse the container to something unusable */
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.02);
  overflow: visible;
  transition: height 0.25s ease;
}
.ff-calendly-embed {
  width: 100%;
  height: 100%;
}
.ff-calendly-embed iframe { width: 100%; height: 100%; border: 0; }
/* ROOT CAUSE of the reported "false error shown over a working
   scheduler" bug: fit-and-focus.js correctly sets errorEl.hidden = true
   once a real iframe is detected, but the [hidden] attribute is a
   low-specificity UA style that this rule's own `display: flex` was
   silently overriding -- so the overlay kept rendering on top of the
   successfully-loaded Calendly iframe regardless of what JS set. Fixed
   the same way already used for .hc-modal-overlay[hidden] elsewhere in
   this codebase: an explicit [hidden] rule that wins. */
.ff-calendly-loading,
.ff-calendly-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
  color: var(--gray);
  font-size: 14px;
}
.ff-calendly-loading[hidden],
.ff-calendly-error[hidden] { display: none; }
.ff-calendly-error p { max-width: 40ch; color: #c7c7c7; }

.ff-spinner {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: var(--green);
  animation: ff-spin 0.8s linear infinite;
}
@keyframes ff-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ff-spinner { animation-duration: 1.6s; }
}

.ff-disclosure {
  margin-top: 20px;
  font-size: 13px;
  color: var(--gray);
  max-width: 62ch;
}

/* ---------- Prerequisite (State B) ---------- */
.ff-prereq-actions { margin: 28px 0 32px; }

.ff-resend-wrap { margin-top: 8px; }
.ff-resend-toggle {
  color: var(--gray);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.25);
  text-underline-offset: 3px;
  transition: color .2s;
}
.ff-resend-toggle:hover { color: var(--white); }

.ff-resend-form-wrap { margin-top: 18px; max-width: 480px; }
.ff-resend-label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
}
.ff-resend-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ff-resend-row input {
  flex: 1 1 220px;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 13px 20px;
  color: var(--white);
  font: inherit;
  font-size: 15px;
}
.ff-resend-row input::placeholder { color: var(--gray); }
.ff-resend-row input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.ff-resend-status {
  min-height: 20px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--green);
}

/* ---------- Footer variant on this page ---------- */
.ff-footer { padding: 32px 0; }

/* ---------- Focus states ---------- */
.ff-body a:focus-visible,
.ff-body button:focus-visible,
.ff-body input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ---------- Responsive ---------- */
/* scroll-margin-top: any anchor-targetable heading/section on this page
   must not land under the fixed header if ever reached via a URL
   fragment (mirrors --ff-nav-h, kept live by fit-and-focus.js). */
.ff-h1, .ff-scheduler-heading { scroll-margin-top: calc(var(--ff-nav-h, 96px) + 24px); }

@media (max-width: 900px) {
  .ff-calendly-wrap { height: 820px; }
}
@media (max-width: 720px) {
  .ff-calendly-wrap { height: 760px; }
  .ff-resend-row { flex-direction: column; align-items: stretch; }
  .ff-resend-row input { flex: 1 1 auto; }
}