/* ============================================================
   LINNEBEL — Funnel pages (ESSENTIA application → booking)
   Two focused steps: Google Form → Calendly.
   Built on tokens.css + main.css. Matches the ESSENTIA voice.
   ============================================================ */

.funnel-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Header (on-dawn watercolor, like the ESSENTIA hero) ---- */
.funnel-head {
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.funnel-head .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.funnel-logo {
  width: clamp(6.5rem, 11vw, 9rem);
  height: auto;
  margin-bottom: 1.5rem;
}

/* Step indicator — the archive-stamp mono voice */
.funnel-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dawn-deep);
  margin-bottom: 1.4rem;
}
.funnel-steps .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}
.funnel-steps .dot.on {
  opacity: 1;
  background: var(--flame-deep);
}

.funnel-title {
  font-size: var(--text-h2);
  max-width: 13em;
}
.funnel-lede {
  margin-top: 1.1rem;
  max-width: 32em;
  color: var(--dawn-deep);
  font-size: var(--text-lede);
  line-height: 1.55;
}

/* ---- Embed body ---- */
.funnel-body {
  flex: 1;
  padding-block: clamp(2.25rem, 5vw, 4rem) clamp(3.5rem, 8vw, 6rem);
}
.funnel-embed {
  max-width: 48rem;
  margin-inline: auto;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 45px 90px -55px rgba(38, 22, 13, 0.55);
  padding: clamp(0.5rem, 1.6vw, 1rem);
  overflow: hidden;
}
.funnel-embed iframe {
  width: 100%;
  border: 0;
  display: block;
  border-radius: 10px;
}
/* Google Form: measured at 640px width. Narrower screens wrap more and grow
   taller, so add height buffers so the form fits without an inner scrollbar
   (the whole page scrolls instead). Adjust if Google adds/removes questions. */
.funnel-form iframe { height: 2613px; }
@media (max-width: 700px) { .funnel-form iframe { height: 3000px; } }
@media (max-width: 430px) { .funnel-form iframe { height: 3400px; } }
.funnel-embed .calendly-inline-widget {
  border-radius: 10px;
  overflow: hidden;
  /* Tall enough that Calendly's own content fits without an inner scrollbar,
     so the whole page scrolls instead of the widget. */
  height: 1000px;
}
@media (max-width: 820px) {
  .funnel-embed .calendly-inline-widget { height: 1150px; }
}
@media (max-width: 520px) {
  .funnel-embed .calendly-inline-widget { height: 1300px; }
}

/* Placeholder shown until the real Google Form embed is dropped in */
.funnel-placeholder {
  min-height: 26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  border: 1.5px dashed var(--hairline);
  border-radius: 10px;
  padding: 2rem;
  color: var(--clay);
}
.funnel-placeholder .stamp { margin-bottom: 0.5rem; }
.funnel-placeholder .eyebrow { color: var(--clay); }

/* ---- Continue / back ---- */
.funnel-continue {
  margin-top: 2.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.funnel-continue-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  max-width: 30em;
  line-height: 1.6;
}
.funnel-back {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: color var(--speed-micro), border-color var(--speed-micro);
}
.funnel-back:hover { color: var(--flame-deep); border-color: var(--flame-deep); }

@media (max-width: 600px) {
  .funnel-embed { padding: 0.4rem; border-radius: 12px; }
  .funnel-steps { font-size: 0.66rem; letter-spacing: 0.12em; }
}