/* ==========================================================================
   Form pages (layouts/form-page.njk): teal heading section + white card with an embedded form iframe.
   Per-page numbers come in as custom properties set by the layout from front matter.
   ========================================================================== */

.fp {
  background: var(--teal); min-height: 80vh; padding: var(--fp-pad-d);
  display: flex; justify-content: center; align-items: center;
}
.fp__inner { flex: 1 0 0; min-width: 0; max-width: 1200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--fp-gap-d); }
.fp__head { position: relative; z-index: 3; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.fp__title { width: 100%; max-width: 698px; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
             font: 600 64px/64px var(--f-head); letter-spacing: -0.04em; color: var(--white); text-align: center; }
.fp__text { width: 100%; max-width: 540px; white-space: pre-wrap; font: 400 18px/27px var(--f-body); color: var(--white); text-align: center; }

.fp__card { width: 100%; max-width: 1000px; padding: 60px; border-radius: 20px; background: var(--white); overflow: clip;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.fp__frame { width: 100%; max-width: 1000px; height: var(--fp-h-d); position: relative; }
.fp__frame iframe { display: block; width: 100%; height: 100%; border: none; border-radius: 20px; }

/* Outline "Back to …" pill (left arrow + label, 1px #f8f8fa border) */
.fp-back { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 10px;
           padding: 10px 15px; border-radius: 23px; box-shadow: inset 0 0 0 1px #f8f8fa;
           font: 400 14px/19.6px var(--f-body); color: var(--white); white-space: nowrap; }
.fp-back__icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex: none; }
.fp-back__icon svg { width: 20px; height: 20px; fill: currentColor; }

/* Appear effect on the live page: fade up 40px */
.js .fp [data-reveal="up"], .js [data-reveal="up"] { transform: translateY(40px); }
.js [data-reveal="up"].is-in { transform: none; }

@media (max-width: 1199.98px) {
  .fp { min-height: 60vh; padding: var(--fp-pad-t); }
  .fp__inner { gap: var(--fp-gap-t); }
  .fp__title { max-width: 600px; font-size: 49px; line-height: 49px; }
  .fp__text { max-width: 450px; font-size: 17px; line-height: 25.5px; }
  .fp__card { padding: 60px 24px; }
  .fp__frame { height: var(--fp-h-t); }
}

@media (max-width: 809.98px) {
  .fp { flex-direction: column; min-height: 70vh; padding: var(--fp-pad-p); }
  .fp__inner { flex: none; width: 100%; gap: var(--fp-gap-p); }
  .fp__title { max-width: 540px; font-size: 38px; line-height: 38px; }
  .fp__text { max-width: 400px; font-size: 16px; line-height: 24px; }
  .fp__card { padding: 24px 20px; }
  .fp__frame { height: var(--fp-h-p); }
}

/* Framer's lime token on these pages is #d5ed71 (site.css --lime is the brand-guide #d4ed71) */
.fp-lime { color: #d5ed71; }

/* ---------- Course price cards (idea-to-app, ai-masterclass) ---------- */
.fp-plans { width: 100%; max-width: 1000px; overflow: clip; display: flex; justify-content: center; align-items: center; gap: 20px; }
.fp-plans--pair { height: 118px; }
.fp-plan { flex: 1 0 0; min-width: 0; align-self: stretch; overflow: clip; border-radius: 12px; background: #285757; padding: 20px;
           display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; }
.fp-plan__top { width: 100%; display: flex; justify-content: space-between; align-items: center; overflow: clip; }
.fp-plan__group { display: flex; align-items: center; gap: 10px; overflow: clip; }
.fp-plan__row { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px; overflow: clip; }
.fp-plan__icon { flex: none; width: 29px; height: 29px; color: #d5ed71; }
.fp-plan__name { white-space: pre; font: 500 22px/28.6px var(--f-head); letter-spacing: -0.02em; color: #d5ed71; text-align: left; }
.fp-plan__price { white-space: pre; font: 500 24px/28.8px var(--f-head); letter-spacing: -0.02em; color: var(--white); }
.fp-plan__price--big { display: none; font: 600 30px/36px var(--f-head); letter-spacing: -0.09em; }
.fp-plan__pill { flex: none; overflow: clip; border-radius: 20px; background: #242424; padding: 4px 12px; display: flex; align-items: center; }
.fp-plan__pill p { white-space: pre; font: 400 18px/27px var(--f-body); color: var(--white); }

/* Live idea-to-app / ai-masterclass pages render a stray custom-code text line above the page (14px tall, hidden behind the nav).
   We keep the resulting 14px offset (not the text) so the layout lines up; remove this once the live page is fixed. */
.fp--stray14 { margin-top: 14px; }

@media (max-width: 1199.98px) {
  .fp-plans--single, .fp-plans--pair { flex-wrap: wrap; }
  .fp-plans--single .fp-plan { flex: none; width: 100%; }
  .fp-plans--pair .fp-plan { flex: none; width: 48%; padding: 20px 20px 31px; }
  .fp-plan__name { font-size: 20px; line-height: 26px; }
  .fp-plan__price { font-size: 22px; line-height: 26.4px; }
  .fp-plan__price--big { font-size: 30px; line-height: 36px; }
  .fp-plan__pill p { font-size: 17px; line-height: 25.5px; }
}

@media (max-width: 809.98px) {
  .fp-plans { flex-direction: column; gap: 24px; }
  .fp-plans--pair { height: auto; }
  .fp-plans--pair .fp-plan { width: 100%; padding: 20px; }
  .fp-plan { flex: none; width: 100%; }
  .fp-plans--pair .fp-plan__row { flex-direction: column; gap: 0; }
  .fp-plan__name { font-size: 18px; line-height: 23.4px; }
  .fp-plan__price { font-size: 20px; line-height: 24px; }
  .fp-plan__price.not-phone-flex { display: none; }
  .fp-plan__price.fp-plan__price--big { display: block; font-size: 30px; line-height: 36px; }
  .fp-plan__pill p { font-size: 16px; line-height: 24px; }
  .fp-plan__pill--no-phone { display: none; }
}