.ff-page {
  --ff-ink: #16382a;
  --ff-muted: #5e625b;
  --ff-line: #d8d7d0;
  --ff-surface: #fff;
  --ff-soft: #faf8ff;
  --ff-accent: #8b5cf6;
  --ff-accent-soft: #f4f0ff;
  --ff-purple: #8b5cf6;
  --ff-yellow: #ffc52c;
  background: #fff;
  color: var(--ff-ink);
}

.ff-page [hidden] {
  display: none !important;
}

.ff-page .button:focus-visible,
.ff-page input:focus-visible,
.ff-page select:focus-visible,
.ff-page textarea:focus-visible,
.ff-page summary:focus-visible {
  outline: 3px solid rgba(139, 92, 246, 0.32);
  outline-offset: 3px;
}

.ff-page p,
.ff-page li,
.ff-page small {
  color: var(--ff-muted);
}

.ff-shell {
  width: min(calc(100% - 28px), 720px);
  margin: 0 auto;
}

.ff-header {
  position: static;
  padding: 20px 0 6px;
  background: transparent;
}

.ff-header .page {
  width: min(calc(100% - 28px), 720px);
  padding: 0;
  justify-content: center;
}

.ff-header .wordmark {
  width: 82px;
  height: auto;
}

.ff-main {
  min-height: 70vh;
}

.ff-enrollment {
  padding: 6px 0 72px;
}

.ff-success {
  border: 1px solid #ece9f2;
  border-radius: 16px;
  background: var(--ff-surface);
}

.ff-program-header {
  margin-bottom: 26px;
  padding: 28px 18px 10px;
  text-align: center;
}

.ff-eyebrow {
  margin: 0 0 12px;
  color: #8a827b !important;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.ff-program-header h1,
.ff-success h2,
.ff-success h3,
.ff-child-heading h3 {
  color: var(--ff-ink);
  font-family: var(--serif);
  font-weight: 500;
}

.ff-program-header h1 {
  margin: 0 0 12px;
  color: var(--ff-purple);
  font-size: clamp(44px, 9vw, 66px);
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.ff-program-header h1 span {
  position: relative;
  z-index: 0;
  display: inline-block;
}

.ff-program-header h1 span::after {
  position: absolute;
  z-index: 1;
  right: -3px;
  bottom: -2px;
  left: -3px;
  height: 4px;
  border-radius: 999px 60%;
  background: var(--ff-yellow);
  content: "";
  pointer-events: none;
  transform: rotate(-2deg);
}

.ff-offer {
  max-width: 560px;
  margin: 0 auto;
  color: var(--ff-ink) !important;
  font-size: clamp(19px, 3vw, 23px);
  font-weight: 700;
  line-height: 1.4;
}

.ff-start-line {
  margin: 12px 0 0;
  color: var(--ff-ink) !important;
  font-size: 15px;
  font-weight: 720;
  line-height: 1.5;
}

.ff-product-figure {
  margin: 0;
}

.ff-product-preview {
  display: block;
  width: min(100%, 560px);
  height: auto;
  margin: 24px auto 0;
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(47, 35, 27, 0.12);
}

.ff-program-guide {
  margin: 0 0 18px;
  padding: 30px 0 28px;
  border-top: 1px solid #ece9f2;
  border-bottom: 1px solid #ece9f2;
}

.ff-section-kicker {
  margin: 0 0 8px;
  color: #817b86 !important;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ff-program-guide h2,
.ff-program-guide h3 {
  font-family: var(--serif);
  font-weight: 500;
}

.ff-program-guide h2 {
  margin: 0;
  color: var(--ff-purple);
  font-size: clamp(32px, 5vw, 42px);
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.ff-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
}

.ff-timeline li {
  position: relative;
  text-align: center;
}

.ff-timeline li::after {
  position: absolute;
  z-index: 0;
  top: 18px;
  right: calc(-50% + 18px);
  left: calc(50% + 18px);
  height: 2px;
  background: #e3d8ff;
  content: "";
}

.ff-timeline li:last-child::after {
  display: none;
}

.ff-timeline-number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 50%;
  background: var(--ff-purple);
  color: #fff;
  font-weight: 800;
}

.ff-timeline strong,
.ff-timeline small {
  display: block;
}

.ff-timeline strong {
  color: var(--ff-ink);
  font-size: 14px;
  line-height: 1.3;
}

.ff-timeline small {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
}

.ff-faq {
  padding-top: 24px;
  border-top: 1px solid #ece9f2;
}

.ff-faq h3 {
  margin: 0 0 10px;
  color: var(--ff-ink);
  font-size: 25px;
}

.ff-faq details {
  border-top: 1px solid #ece9f2;
}

.ff-faq summary {
  padding: 14px 2px;
  color: var(--ff-ink);
  font-weight: 720;
  cursor: pointer;
}

.ff-faq details[open] summary {
  color: var(--ff-purple);
}

.ff-faq details p {
  margin: -2px 0 16px;
  padding-right: 28px;
  font-size: 14px;
  line-height: 1.55;
}

.ff-form {
  display: grid;
  gap: 0;
}

.ff-fieldset {
  min-width: 0;
  margin: 0;
  padding: 26px 0 28px;
  border: 0;
  border-bottom: 1px solid #ece9f2;
  border-radius: 0;
  background: transparent;
}

.ff-fieldset legend {
  float: left;
  width: 100%;
  max-width: none;
  margin: 0 0 16px;
  padding: 0;
  color: #3c3136;
  font-size: 20px;
  font-weight: 720;
  line-height: 1.35;
}

.ff-fieldset legend + * {
  clear: both;
}

.ff-fieldset-intro,
.ff-device-summary {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
}

.ff-first-question {
  padding-top: 20px;
}

[data-after-participation] {
  display: grid;
  gap: 14px;
}

.ff-validation-summary {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #dbad98;
  border-radius: 9px;
  background: #fff7f3;
  color: #843416 !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.ff-validation-summary:focus {
  outline: 3px solid rgba(139, 92, 246, 0.22);
  outline-offset: 2px;
}

.ff-choice-stack {
  display: grid;
  gap: 10px;
}

.ff-choice-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--ff-line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.ff-choice-card:has(input:checked) {
  border-color: var(--ff-purple);
  background: var(--ff-accent-soft);
  box-shadow: 0 0 0 1px var(--ff-purple);
}

.ff-choice-card input,
.ff-inline-choices input,
.ff-check-list input,
.ff-consent-check input,
.ff-primary-child input {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--ff-accent);
}

.ff-choice-card strong,
.ff-choice-card small {
  display: block;
}

.ff-choice-card strong {
  color: var(--ff-ink);
  font-size: 16px;
}

.ff-choice-card small {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
}

.ff-fields-grid {
  display: grid;
  gap: 16px;
}

.ff-page .form-field input,
.ff-page .form-field select,
.ff-page .form-field textarea {
  border-color: #c8c9c4;
  border-radius: 7px;
  background: #fff;
  font-size: 16px;
}

.ff-page .form-field input,
.ff-page .form-field select {
  min-height: 50px;
}

.ff-page .form-field input:focus,
.ff-page .form-field select:focus,
.ff-page .form-field textarea:focus {
  border-color: var(--ff-accent);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.14);
}

.ff-page [aria-invalid="true"] {
  border-color: #a63e1c !important;
  background: #fff8f4 !important;
}

.ff-helper,
.ff-clarification {
  margin: 0;
  color: var(--ff-muted);
  font-size: 13px;
  line-height: 1.5;
}

.ff-children {
  display: grid;
  gap: 12px;
}

.ff-child-card,
.ff-conditional-panel {
  padding: 18px;
  border: 1px solid #e0e0da;
  border-radius: 9px;
  background: var(--ff-soft);
}

.ff-child-heading {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ff-child-heading h3 {
  margin: 0;
  font-size: 21px;
}

.ff-remove-child,
.ff-add-child {
  border: 0;
  background: none;
  color: var(--ff-purple);
  font: inherit;
  font-size: 14px;
  font-weight: 720;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ff-add-child {
  margin-top: 15px;
  padding: 0;
}

.ff-primary-child {
  display: flex;
  gap: 9px;
  align-items: center;
  width: fit-content;
  margin-top: 16px;
  color: var(--ff-ink);
  font-size: 14px;
  font-weight: 700;
}

.ff-question-block + .ff-question-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ff-line);
}

.ff-question {
  margin: 0 0 12px;
  color: var(--ff-ink) !important;
  font-weight: 700;
}

.ff-inline-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ff-inline-choices label {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--ff-line);
  border-radius: 8px;
  color: var(--ff-ink);
  font-size: 14px;
  cursor: pointer;
}

.ff-inline-choices label:has(input:checked) {
  border-color: var(--ff-accent);
  background: var(--ff-accent-soft);
}

.ff-inline-choices input {
  width: 17px;
  height: 17px;
  margin: 0;
}

.ff-conditional-panel {
  margin-top: 20px;
}

.ff-clarification {
  margin-top: 14px;
  padding-left: 12px;
  border-left: 2px solid var(--ff-accent);
}

.ff-check-list {
  display: grid;
}

.ff-check-list label,
.ff-consent-check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--ff-line);
  color: var(--ff-ink);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

.ff-check-list label:last-child {
  padding-bottom: 0;
}

.ff-consent-check {
  border-top: 0;
}

.ff-final-check {
  border-color: #ded5f5;
}

.ff-referral {
  margin: 8px 0 24px;
  padding: 22px;
  border-radius: 14px;
  background: var(--ff-accent-soft);
}

.ff-referral h2 {
  margin: 0 0 8px;
  color: var(--ff-ink);
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 500;
}

.ff-referral > p:not(.ff-section-kicker, .ff-share-status) {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
}

.ff-share-invite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid var(--ff-purple);
  border-radius: 999px;
  background: #fff;
  color: var(--ff-purple);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.ff-share-invite:hover {
  background: #fbf9ff;
}

.ff-share-status {
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--ff-ink) !important;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.ff-share-status a {
  color: var(--ff-purple);
  font-weight: 750;
}

.ff-submit-row {
  display: grid;
  gap: 8px;
}

.ff-submit-row .button,
.ff-review-actions .button {
  width: 100%;
  min-height: 54px;
  border-color: var(--ff-purple);
  border-radius: 999px;
  background: var(--ff-purple);
  color: #fff;
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.2);
}

.ff-submit-row .button:hover,
.ff-review-actions .button:hover {
  border-color: #7546e8;
  background: #7546e8;
}

.ff-review-panel {
  margin-top: 18px;
  padding: 24px;
  border: 1px solid #ded5f5;
  border-top: 5px solid var(--ff-purple);
  border-radius: 14px;
  background: #fff;
}

.ff-review-panel:focus {
  outline: none;
}

.ff-review-panel h2 {
  margin: 0 0 22px;
  color: var(--ff-ink);
  font-family: var(--serif);
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 500;
  line-height: 1.1;
}

.ff-review-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ff-review-details section {
  padding: 16px;
  border-radius: 10px;
  background: var(--ff-soft);
}

.ff-review-details h3 {
  margin: 0 0 8px;
  color: var(--ff-ink);
  font-size: 14px;
  font-weight: 800;
}

.ff-review-details p {
  margin: 3px 0 0;
  color: var(--ff-muted);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ff-review-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.ff-review-actions .button {
  width: auto;
  min-width: 190px;
}

.ff-edit-review {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid #d8d2e4;
  border-radius: 999px;
  background: #fff;
  color: var(--ff-ink);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.ff-edit-review:hover {
  border-color: var(--ff-purple);
}

.ff-form-status {
  min-height: 20px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.ff-form-status[data-state="error"] {
  color: #9c3a16;
}

.ff-success {
  padding: clamp(26px, 6vw, 46px);
  border-top: 7px solid var(--ff-purple);
}

.ff-success:focus {
  outline: none;
}

.ff-success-mark {
  display: grid;
  width: 42px;
  height: 42px;
  margin: 0 0 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--ff-accent-soft);
  color: var(--ff-purple) !important;
  font-size: 21px;
}

.ff-success h2 {
  margin: 0 0 18px;
  font-size: clamp(36px, 7vw, 50px);
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.ff-success > p {
  max-width: 600px;
}

.ff-footer {
  border-top: 1px solid var(--ff-line);
  background: #faf9f7;
}

.ff-footer .page {
  width: min(calc(100% - 28px), 720px);
  padding-bottom: 28px;
}

@media (min-width: 680px) {
  .ff-shell {
    width: min(calc(100% - 64px), 720px);
  }

  .ff-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ff-span-2 {
    grid-column: 1 / -1;
  }

  .ff-program-header {
    padding: 36px 38px 14px;
  }

  .ff-fieldset { padding: 30px 0; }
}

@media (max-width: 520px) {
  .ff-review-details {
    grid-template-columns: 1fr;
  }

  .ff-review-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .ff-review-actions .button,
  .ff-edit-review {
    width: 100%;
  }

  .ff-program-header {
    padding: 22px 8px 8px;
  }

  .ff-program-header h1 {
    font-size: 48px;
  }

  .ff-product-preview {
    margin-top: 20px;
    border-radius: 13px;
  }

  .ff-fieldset {
    padding: 23px 0 24px;
  }

  .ff-fieldset legend {
    font-size: 18px;
  }

  .ff-child-card,
  .ff-conditional-panel {
    padding: 16px 13px;
  }

  .ff-inline-choices {
    display: grid;
  }

  .ff-timeline {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 22px 0 28px;
  }

  .ff-timeline li {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    padding-bottom: 18px;
    text-align: left;
  }

  .ff-timeline li::after {
    top: 36px;
    right: auto;
    bottom: 0;
    left: 18px;
    width: 2px;
    height: auto;
  }

  .ff-timeline-number {
    margin: 0;
  }

  .ff-timeline small {
    margin-top: 3px;
  }
}

/* Refreshed to match the homepage system: display type, the site container,
   the left-aligned header, and the homepage FAQ cards. */
.ff-page {
  --ff-purple: #9841e6;
  --ff-accent-soft: #f6edfd;
  --ff-ink: #371b0a;
  --ff-gutter: clamp(20px, 5vw, 140px);
  --ff-column: calc(1400px + var(--ff-gutter) * 2);
}

.ff-header {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.ff-header .page,
.ff-footer .page {
  width: 100%;
  max-width: var(--ff-column);
  padding: 0 var(--ff-gutter);
}

.ff-header .page {
  justify-content: space-between;
}

.ff-header .wordmark {
  width: 92px;
  height: auto;
}

/* One container for the page, matching the header and the homepage sections. */
.ff-shell {
  width: 100%;
  max-width: var(--ff-column);
  padding: 0 var(--ff-gutter);
}

.ff-program-header,
.ff-form,
.ff-referral,
.ff-review-panel,
.ff-success {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}

.ff-enrollment {
  padding: clamp(28px, 5vw, 64px) 0 clamp(64px, 8vw, 110px);
}

.ff-program-header {
  padding: 0 0 8px;
}

.ff-program-header h1,
.ff-program-guide h2,
.ff-program-guide h3,
.ff-faq h3,
.ff-referral h2,
.ff-review-panel h2,
.ff-success h2,
.ff-success h3,
.ff-child-heading h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
}

.ff-eyebrow,
.ff-section-kicker {
  margin: 0 0 10px;
  color: var(--ff-purple) !important;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
}

.ff-program-header h1 {
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.05;
}

.ff-program-header h1 span::after {
  background: var(--hp-yellow, #fdbc2c);
}

.ff-offer {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
}

.ff-program-guide h2,
.ff-referral h2,
.ff-review-panel h2,
.ff-success h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.15;
}

/* FAQ: the same cards as the homepage. */
.ff-faq {
  padding-top: clamp(26px, 3vw, 44px);
}

.ff-faq h3 {
  margin: 0 0 clamp(18px, 2vw, 28px);
  color: var(--ff-purple);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
}

.ff-faq details {
  margin-top: 12px;
  padding: clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 32px);
  border: 0;
  border-radius: 20px;
  background: #f7f7fa;
}

.ff-faq summary {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  color: #000;
  font-family: var(--display);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 400;
  line-height: 1.25;
  list-style: none;
}

.ff-faq summary::-webkit-details-marker {
  display: none;
}

.ff-faq summary::after {
  flex: none;
  color: rgba(0, 0, 0, 0.5);
  content: "+";
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
}

.ff-faq details[open] summary {
  color: #000;
}

.ff-faq details[open] summary::after {
  content: "\2212";
}

.ff-faq details p {
  margin: 16px 0 0;
  padding-right: 0;
  color: rgba(0, 0, 0, 0.6) !important;
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 500;
  line-height: 1.45;
}

.ff-footer {
  background: #fff;
}

.ff-footer .page,
.ff-footer .footer-blurb,
.ff-footer .footer-bar p {
  color: var(--hero-green);
}

/* Form controls: the rounded fields and cards the homepage uses. */
.ff-page .form-field input,
.ff-page .form-field select,
.ff-page .form-field textarea {
  border-color: #dedede;
  border-radius: 14px;
  font-weight: 500;
}

.ff-page .form-field input,
.ff-page .form-field select {
  min-height: 54px;
  padding-inline: 18px;
}

.ff-fieldset legend {
  color: var(--ff-ink);
  font-family: var(--display);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 400;
  letter-spacing: 0;
}

.ff-choice-card,
.ff-child-card,
.ff-conditional-panel,
.ff-review-details {
  border-radius: 20px;
}

.ff-choice-card {
  padding: 18px 20px;
}

.ff-choice-card strong,
.ff-check-list span,
.ff-consent-check span,
.ff-inline-choices label {
  font-weight: 500;
}

.ff-submit-row .button,
.ff-review-actions .button,
.ff-share-invite {
  border-radius: 999px;
  font-weight: 600;
}

.ff-product-preview {
  width: 100%;
  margin-top: clamp(24px, 3vw, 40px);
  border-radius: 24px;
  box-shadow: none;
}

.ff-product-figure {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

/* Hero: full-bleed cream band, so the video sits on the same colour as its
   own backdrop, the way the homepage hero does. */
.ff-page {
  --ff-cream: #f2eadf;
}

.ff-enrollment {
  padding-top: 0;
}

.ff-program-header {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  padding: clamp(40px, 6vw, 80px) var(--ff-gutter) 0;
  background: var(--ff-cream);
}

.ff-program-header h1 {
  color: #000;
}

.ff-offer,
.ff-start-line {
  max-width: 720px;
  margin-inline: auto;
}

.ff-product-figure {
  max-width: 1180px;
}

.ff-product-preview {
  margin-top: clamp(20px, 3vw, 44px);
  border-radius: 0;
  background: transparent;
}

/* The guide sits in the same column as the form below it. */
.ff-program-guide {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  padding-top: clamp(48px, 6vw, 84px);
  border-top: 0;
}

.ff-program-guide > .ff-section-kicker,
.ff-program-guide > h2 {
  text-align: center;
}

/* Timeline: our type sizes, and connectors that leave an equal gap either
   side of every number. */
.ff-timeline {
  --ff-timeline-gap: 14px;
  --ff-timeline-dot: 40px;
  gap: var(--ff-timeline-gap);
  margin: clamp(28px, 4vw, 44px) 0 clamp(28px, 4vw, 44px);
}

.ff-timeline-number {
  width: var(--ff-timeline-dot);
  height: var(--ff-timeline-dot);
  font-size: 18px;
  font-weight: 600;
}

.ff-timeline li::after {
  top: calc(var(--ff-timeline-dot) / 2 - 1px);
  right: calc(-50% + var(--ff-timeline-dot) / 2 - var(--ff-timeline-gap));
  left: calc(50% + var(--ff-timeline-dot) / 2);
}

.ff-timeline strong {
  color: #000;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1.3;
}

.ff-timeline small {
  margin-top: 6px;
  color: rgba(0, 0, 0, 0.6);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 500;
  line-height: 1.45;
}

/* Footer: the homepage footer, so it needs the shared page column, not the
   narrow one this page used to have. */
.ff-footer {
  padding-top: clamp(40px, 5vw, 60px);
  border-top: 1px solid var(--line);
}

/* The cream band is a viewport-wide breakout, so keep it from adding a
   horizontal scrollbar. */
.ff-page {
  overflow-x: hidden;
}

.ff-program-header h1 {
  max-width: 900px;
  margin-inline: auto;
}

.ff-product-figure {
  max-width: 1040px;
}

/* Stacked timeline: the connector runs down the middle of the numbers. */
@media (max-width: 520px) {
  .ff-timeline li {
    grid-template-columns: var(--ff-timeline-dot) 1fr;
  }

  .ff-timeline li::after {
    top: var(--ff-timeline-dot);
    right: auto;
    bottom: 0;
    left: calc(var(--ff-timeline-dot) / 2 - 1px);
    width: 2px;
    height: auto;
  }
}

@media (min-width: 680px) {
  /* The two answers sit side by side, since they are one either/or choice. */
  .ff-choice-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* When the declining path hides the participating fields, the ones that
     remain take the full row instead of leaving a gap. */
  .ff-fields-grid:has(> .ff-participating-only[hidden]) > .form-field:not(.ff-participating-only) {
    grid-column: 1 / -1;
  }
}

/* The video canvas is padded out to flat cream, and it runs the full width of
   the band up to its own size, so the tablet's shadow never meets an edge. */
.ff-product-figure {
  width: 100vw;
  max-width: 1600px;
  margin-left: calc(50% - min(50vw, 800px));
}

.ff-program-header {
  padding-inline: 0;
}

.ff-eyebrow,
.ff-program-header h1,
.ff-offer,
.ff-start-line {
  padding-inline: var(--ff-gutter);
}

.ff-product-preview {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 680px) {
  /* On a phone the padded canvas would shrink the tablet, so crop back to the
     original framing, which only trims the flat cream at the sides. */
  .ff-product-preview {
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
  }
}

/* Section headings are black, the eyebrow above them carries the purple. */
.ff-program-guide h2,
.ff-faq h3,
.ff-referral h2,
.ff-review-panel h2,
.ff-success h2,
.ff-success h3,
.ff-child-heading h3,
.ff-fieldset legend {
  color: #000;
}

/* The dates run on from the offer line rather than sitting under it. */
.ff-offer .ff-start-line {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* Wide enough for the offer and the dates to share one line on a desktop. */
.ff-offer {
  max-width: 1240px;
}

/* Fade the sides and the top into the hero, so the video's frame never meets
   the cream on a line. The bottom stays hard, since hands cross it. */
.ff-product-preview {
  --ff-video-fade: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 100%);
  -webkit-mask-image: var(--ff-video-fade);
  -webkit-mask-composite: source-in;
  mask-image: var(--ff-video-fade);
  mask-composite: intersect;
}

/* Readiness items read as one list, the fieldset rule below it is the only
   divider between questions. */
.ff-check-list {
  gap: 12px;
}

.ff-check-list label {
  padding: 0;
  border-top: 0;
}

/* The join question and everything it reveals share one light purple panel, so
   the form reads as the page's call to action. */
.ff-page .ff-form {
  padding: clamp(20px, 2.6vw, 34px);
  border-radius: 28px;
  background: var(--ff-accent-soft);
}

.ff-form .ff-first-question {
  padding: 4px 0 26px;
}

.ff-first-question .ff-choice-card:has(input:checked) {
  border-color: var(--ff-purple);
  background: #fff;
}

/* Sections sit straight on the panel, split by the same rules as before. */
.ff-form [data-after-participation] .ff-fieldset:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ff-form .ff-referral {
  margin: 4px 0 20px;
  padding: 26px 0 0;
  background: none;
}

.ff-footer-signup {
  grid-column: 1 / -1;
  max-width: 560px;
  padding-bottom: 8px;
}

.ff-footer-signup-copy {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.ff-footer-signup .subscribe-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px 12px;
  margin-top: 14px;
}

.ff-footer-signup .form-field {
  min-width: 0;
}

.ff-footer-signup .field-label {
  color: var(--ff-muted);
  font-size: 13px;
  font-weight: 700;
}

.ff-footer-signup .ff-edit-review {
  min-height: 44px;
  padding: 10px 16px;
  white-space: nowrap;
}

.ff-footer-signup .ff-edit-review:disabled {
  cursor: wait;
  filter: saturate(0.72);
  opacity: 0.72;
  transform: none;
}

.ff-footer-signup .subscribe-form[data-complete="true"] > .ff-edit-review {
  display: none;
}

.ff-footer-signup .form-status {
  grid-column: 1 / -1;
  font-size: 13px;
}

@media (max-width: 520px) {
  .ff-footer-signup .subscribe-form {
    grid-template-columns: 1fr;
  }

  .ff-footer-signup .ff-edit-review {
    width: 100%;
  }
}