/**
 * forge-funnel.css — the shared funnel stylesheet (our data.perspective.co/pages.css).
 * Mobile-first, brand-driven via CSS variables set per funnel (--f-bg/--f-fg/--f-accent).
 * Deliberately small: generated page HTML uses these classes, so a copy tweak never
 * needs a style change, and every funnel inherits the same conversion-tested UX.
 * Plan: plans/2026-07-17-forge-funnels-own-perspective.md
 */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--f-bg, #fff);
  color: var(--f-fg, #111827);
  font-family: var(--f-font, 'Inter', system-ui, -apple-system, sans-serif);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

/* ── progress ─────────────────────────────────────────────────────────────── */
.f-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: rgba(127,127,127,.18); z-index: 50; }
.f-progress-bar { height: 100%; width: 0; background: var(--f-accent, #059669); transition: width .35s ease; }

/* ── pages: all steps live in one document; only the active one shows ─────── */
.f-funnel { max-width: 560px; margin: 0 auto; padding: 28px 20px 48px; }
.f-page { display: none; animation: f-in .28s ease; }
.f-page[data-page-active] { display: block; }
@keyframes f-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .f-page { animation: none; } .f-progress-bar { transition: none; } }

/* ── typography ───────────────────────────────────────────────────────────── */
.f-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin: 0 0 10px; }
.f-h1 { font-size: 28px; line-height: 1.18; font-weight: 700; margin: 0 0 12px; }
.f-h2 { font-size: 21px; line-height: 1.25; font-weight: 700; margin: 0 0 10px; }
.f-sub { font-size: 15px; line-height: 1.5; opacity: .75; margin: 0 0 20px; }
.f-accent { color: var(--f-accent, #059669); }
@media (min-width: 640px) { .f-h1 { font-size: 34px; } }

/* ── answer cards (their questionTextAnswer — the workhorse: 109 uses) ────── */
.f-answers { display: grid; gap: 10px; margin: 18px 0; }
.f-answer {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 16px 18px; border-radius: 12px; border: 1.5px solid transparent;
  background: var(--f-accent, #059669); color: var(--f-accent-fg, #fff);
  font: inherit; font-size: 15px; font-weight: 600; text-align: left;
  cursor: pointer; transition: transform .12s ease, filter .12s ease;
}
.f-answer:hover { filter: brightness(1.07); }
.f-answer:active { transform: scale(.985); }
.f-answer[data-selected] { outline: 3px solid rgba(255,255,255,.55); outline-offset: -6px; }
.f-answer-icon { font-size: 20px; line-height: 1; }
/* image answer cards (their questionMediaAnswer) */
.f-answers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f-answer-media { padding: 0; overflow: hidden; flex-direction: column; align-items: stretch; }
.f-answer-media img { width: 100%; height: 118px; object-fit: cover; display: block; }
.f-answer-media span { padding: 12px 14px; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.f-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 16px 22px; border: 0; border-radius: 12px;
  background: var(--f-accent, #059669); color: var(--f-accent-fg, #fff);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: filter .12s ease, transform .12s ease;
}
.f-btn:hover { filter: brightness(1.07); }
.f-btn:active { transform: scale(.99); }
.f-btn[disabled] { opacity: .6; cursor: default; }
.f-btn[data-loading]::after { content: ''; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: f-spin .7s linear infinite; }
@keyframes f-spin { to { transform: rotate(360deg); } }
.f-btn-ghost { background: transparent; color: inherit; border: 1.5px solid rgba(127,127,127,.35); }

/* ── form ────────────────────────────────────────────────────────────────── */
.f-form { display: grid; gap: 12px; margin: 18px 0; }
.f-field { display: grid; gap: 6px; }
.f-label { font-size: 13px; font-weight: 600; opacity: .8; }
.f-input {
  width: 100%; padding: 15px 16px; border-radius: 12px;
  border: 1.5px solid rgba(127,127,127,.32); background: rgba(255,255,255,.04);
  color: inherit; font: inherit; font-size: 16px; /* 16px = no iOS zoom-on-focus */
}
.f-input::placeholder { opacity: .45; color: inherit; }
.f-input:focus { outline: none; border-color: var(--f-accent, #059669); }
.f-input[data-invalid='1'] { border-color: #dc2626; }
.f-err { display: none; font-size: 12.5px; color: #dc2626; }

/* ── media / video (their media block: testimonials land here) ───────────── */
.f-media { margin: 16px 0; }
.f-media img, .f-media video { width: 100%; border-radius: 12px; display: block; }
.f-media-framed img, .f-media-framed video { border: 1px solid rgba(127,127,127,.25); }

/* ── social proof (their reviews block) ──────────────────────────────────── */
.f-reviews { display: grid; gap: 10px; margin: 18px 0; padding: 16px; border-radius: 12px; background: rgba(127,127,127,.08); }
.f-review { font-size: 14px; line-height: 1.5; }
.f-review-stars { color: #f59e0b; letter-spacing: 2px; }
.f-review-name { font-size: 12.5px; opacity: .6; margin-top: 4px; }

/* ── list (their list block: benefit ticks) ──────────────────────────────── */
.f-list { display: grid; gap: 10px; margin: 16px 0; padding: 0; list-style: none; }
.f-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.f-list li::before { content: '✓'; color: var(--f-accent, #059669); font-weight: 700; }

/* ── misc ────────────────────────────────────────────────────────────────── */
.f-divider { height: 1px; background: rgba(127,127,127,.22); margin: 22px 0; border: 0; }
.f-trust { font-size: 12px; opacity: .55; text-align: center; margin-top: 18px; }
.f-logo { max-height: 40px; margin: 0 auto 18px; display: block; }
/* embeds (GHL booking iframe + form_embed.js resizer keep working untouched) */
.f-embed { margin: 16px 0; }
.f-embed iframe { width: 100%; border: 0; border-radius: 12px; display: block; }
/* a full-document embed is framed (srcdoc) — it carries its own <html>, so it cannot
   be inlined into the page. Height is set inline at import; tune it per page. */
.f-embed-frame { min-height: 200px; background: transparent; }