/* The first section continues the hero's rounded shapes and SHARKZ purple. */
.lp-home {
  --hero-image-tail: clamp(80px, 14vh, 180px);
  --hero-image-tail: clamp(80px, 14dvh, 180px);
}

.lp-home .lp-hero--landscape {
  --hero-content-bottom: clamp(24px, 5vh, 64px);
  --hero-content-bottom: clamp(24px, 5dvh, 64px);
  height: calc(100vh + var(--hero-image-tail));
  height: calc(100dvh + var(--hero-image-tail));
  margin-bottom: 0;
  padding-bottom: calc(max(var(--hero-content-bottom), env(safe-area-inset-bottom)) + var(--hero-image-tail));
  overflow: hidden;
  overflow: clip;
}

/* The photo, overlay and solid backdrop share one continuous section.
   Extra bottom padding keeps the content in its original first-screen position. */
@media (max-width: 680px) {
  .lp-home { --hero-image-tail: 0px; }
  .lp-home .lp-hero--landscape {
    --hero-content-bottom: 24px;
    align-items: center;
  }
}

@media (max-height: 600px) {
  .lp-home .lp-hero--landscape { --hero-content-bottom: 16px; }
}

.lp-home .lp-order--hero-follow {
  --lp-brand: var(--brand, #6558e8);
  --lp-brand-dark: var(--brand-dark, #4f43cf);
  --lp-brand-soft: #efedff;
  z-index: 2;
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin-top: calc(-1 * var(--hero-image-tail));
  padding: clamp(16px, 3vh, 36px) 0;
  padding-block: clamp(16px, 3dvh, 36px);
  padding-bottom: max(clamp(16px, 3dvh, 36px), env(safe-area-inset-bottom));
  overflow: hidden;
  border-radius: 36px 36px 0 0;
  background: radial-gradient(ellipse at 5% 10%, #eeebff 0, transparent 55%), #faf9fd;
  scroll-margin-top: 24px;
}

.lp-home .lp-order--hero-follow > .lp-shell {
  display: grid;
  height: 100%;
  min-height: 0;
  width: min(calc(100% - clamp(32px, 6vw, 112px)), 1320px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(12px, 2vh, 24px);
  gap: clamp(12px, 2dvh, 24px);
}

.lp-home .lp-order--hero-follow .lp-section-heading { width: 100%; max-width: 960px; margin: 0 auto; text-align: center; }
.lp-home .lp-order--hero-follow .lp-section-heading h2 { margin: 10px 0; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.04em; }
.lp-home .lp-order--hero-follow .lp-section-heading > p { max-width: 680px; margin: 0 auto; font-size: 0.78rem; line-height: 1.45; }

.lp-home .lp-order--hero-follow .lp-order-form { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; max-width: none; min-width: 0; min-height: 0; margin: 0; padding: clamp(14px, 2.5vh, 28px); padding: clamp(14px, 2.5dvh, 28px); overflow: hidden; border: 1px solid #e7e2f2; border-radius: 26px; background: #fff; box-shadow: 0 24px 70px rgb(58 36 105 / 6%); }
.lp-home .lp-order--hero-follow .lp-order-form__progress { width: min(100%, 520px); margin: 0 auto 14px; padding-bottom: 12px; border-bottom: 1px solid #f0edf7; }
.lp-home .lp-order--hero-follow .lp-order-form__progress > span { gap: 5px; font-size: 0.65rem; }
.lp-home .lp-order--hero-follow .lp-order-form__progress i { width: 26px; height: 26px; isolation: isolate; overflow: hidden; background: #fff; }
.lp-home .lp-order--hero-follow .lp-order-form__progress > span::before,
.lp-home .lp-order--hero-follow .lp-order-form__progress > span::after { position: absolute; top: 12px; right: 50%; left: -50%; height: 2px; content: ''; }
.lp-home .lp-order--hero-follow .lp-order-form__progress > span::before { background: #e7e4ef; }
.lp-home .lp-order--hero-follow .lp-order-form__progress > span::after { background: #6558e8; transform: scaleX(0); transform-origin: left; }
.lp-home .lp-order--hero-follow .lp-order-form__progress > span:first-child::after { display: none; }
.lp-home .lp-order--hero-follow .lp-order-form__progress > span.is-active::after,
.lp-home .lp-order--hero-follow .lp-order-form__progress > span.is-complete::after { transform: scaleX(1); }
.lp-home .lp-order--hero-follow .lp-order-form__progress i::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: #6558e8; content: ''; transform: scaleX(0); transform-origin: left; }
.lp-home .lp-order--hero-follow .lp-order-form__progress .is-active i::before,
.lp-home .lp-order--hero-follow .lp-order-form__progress .is-complete i::before { transform: scaleX(1); }
.lp-home .lp-order--hero-follow .lp-form-step { height: 100%; min-height: 0; overflow-y: auto; padding: 3px 5px 5px; scrollbar-width: thin; scroll-padding-block: 8px; }
.lp-home .lp-order--hero-follow .lp-form-step:not([hidden]) { display: flex; flex-direction: column; }
.lp-home .lp-order--hero-follow .lp-form-step > * { flex-shrink: 0; }
.lp-home .lp-order--hero-follow .lp-form-step legend { margin: 10px 0; font-size: clamp(1.05rem, 1.7vw, 1.45rem); text-align: left; }
.lp-home .lp-order--hero-follow .lp-order-form.has-step-motion .lp-form-step { animation: none !important; }
.lp-home .lp-order--hero-follow .lp-service-grid { flex: 1 0 auto; width: 100%; max-width: 1120px; margin-inline: auto; min-height: 186px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(88px, 1fr); gap: 10px; }
.lp-home .lp-order--hero-follow .lp-service-grid label { display: flex; min-height: 0; }
.lp-home .lp-order--hero-follow .lp-choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-home .lp-order--hero-follow .lp-service-grid label > span { flex: 1; width: 100%; height: 100%; min-height: 88px; grid-template-columns: 1fr; justify-items: center; gap: 6px; padding: 10px 8px; border-color: #edeaf5; border-radius: 15px; background: #faf9fd; text-align: center; }
.lp-home .lp-order--hero-follow .lp-service-grid label:hover > span { border-color: #bcb1f6; background: #f5f2ff; }
.lp-home .lp-order--hero-follow .lp-service-grid b { font-size: 0.84rem; font-weight: 600; }
.lp-home .lp-order--hero-follow .lp-service-grid i { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 13px; background: #efebff; color: #6558e8; font-size: 1.55rem; }
.lp-home .lp-order--hero-follow .lp-service-grid b { margin: 0; line-height: 1.25; }
.lp-home .lp-order--hero-follow .lp-service-grid input:checked + span { border-color: #6558e8; background: #f1edff; color: #4f43cf; box-shadow: 0 0 0 2px rgb(101 88 232 / 9%); }
.lp-home .lp-order--hero-follow .lp-service-grid input:checked + span i { background: #6558e8; color: #fff; }
.lp-home .lp-order--hero-follow .lp-service-grid input:focus-visible + span,
.lp-home .lp-order--hero-follow .lp-choice-grid input:focus-visible + span { outline: 3px solid #b4a8f6; outline-offset: 3px; }
.lp-home .lp-order--hero-follow .lp-form-actions { flex: 0 0 auto; margin-top: auto; padding-top: 18px; }
.lp-home .lp-order--hero-follow .lp-form-actions .lp-button { min-height: 38px; gap: 10px; padding: 0 16px; border-radius: 999px !important; font-size: 0.75rem; }

@media (max-width: 1000px) {
  .lp-home .lp-order--hero-follow .lp-section-heading { max-width: 760px; }
  .lp-home .lp-order--hero-follow .lp-section-heading > p { max-width: 620px; }
  .lp-home .lp-order--hero-follow .lp-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .lp-home .lp-order--hero-follow { border-radius: 24px 24px 0 0; }
  .lp-home .lp-order--hero-follow > .lp-shell { width: calc(100% - 24px); }
  .lp-home .lp-order--hero-follow .lp-section-heading h2 { max-width: 380px; margin: 10px auto; font-size: clamp(1.3rem, 6vw, 1.65rem); }
  .lp-home .lp-order--hero-follow .lp-section-heading > p { margin-top: 0; font-size: 0.73rem; line-height: 1.4; }
  .lp-home .lp-order--hero-follow .lp-order-form { padding: 12px; border-radius: 22px; }
  .lp-home .lp-order--hero-follow .lp-service-grid { min-height: 320px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(74px, 1fr); gap: 8px; }
  .lp-home .lp-order--hero-follow .lp-choice-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-home .lp-order--hero-follow .lp-service-grid label > span { min-height: 74px; grid-template-columns: 1fr; justify-items: center; gap: 4px; padding: 7px; text-align: center; }
  .lp-home .lp-order--hero-follow .lp-service-grid i { width: 34px; height: 34px; font-size: 1.2rem; }
  .lp-home .lp-order--hero-follow .lp-service-grid b { font-size: 0.68rem; }
  .lp-home .lp-order--hero-follow .lp-form-actions .lp-button { min-height: 44px; }
}

@media (max-height: 560px) {
  .lp-home .lp-order--hero-follow { padding-block: 12px; }
  .lp-home .lp-order--hero-follow > .lp-shell { gap: 10px; }
  .lp-home .lp-order--hero-follow .lp-section-heading h2 { font-size: 1.25rem; }
  .lp-home .lp-order--hero-follow .lp-section-heading > p { font-size: 0.7rem; line-height: 1.3; margin-top: 4px; }
  .lp-home .lp-order--hero-follow .lp-order-form__progress { margin-bottom: 10px; padding-bottom: 8px; }
}

/* Animate wrappers, preserving the existing photo entrance and form interactions. */
@media (prefers-reduced-motion: no-preference) {
  .lp-home .lp-order--hero-follow .lp-order-form__progress > span::after { transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); }
  .lp-home .lp-order--hero-follow .lp-order-form__progress i { transition: color 280ms ease 220ms, border-color 280ms ease 220ms; }
  .lp-home .lp-order--hero-follow .lp-order-form__progress i::before { transition: transform 280ms ease 220ms; }
  .lp-home .lp-order--hero-follow .lp-form-actions .lp-button i { transition: transform 220ms ease; }
  .lp-home .lp-order--hero-follow .is-step-changing.is-step-forward .lp-form-actions .lp-button--primary i { transform: translateX(5px); }
  .lp-home.has-hero-scroll .lp-hero__backdrop { opacity: var(--hero-backdrop-opacity, 1); transform: translate3d(var(--hero-exit-x, 0px), var(--hero-exit-y, 0px), 0) scale(var(--hero-exit-scale, 1)); }
  .lp-home.has-hero-scroll .lp-hero__grid { opacity: var(--hero-copy-opacity, 1); transform: translate3d(0, var(--hero-copy-y, 0px), 0); }
  .lp-home.has-hero-scroll .lp-order--hero-follow .lp-section-heading { opacity: var(--order-heading-opacity, 1); transform: translate3d(0, var(--order-heading-y, 0px), 0); }
  .lp-home.has-hero-scroll .lp-order--hero-follow .lp-order-form { opacity: var(--order-enter-opacity, 1); transform: translate3d(0, var(--order-enter-y, 0px), 0); }
  .lp-home .lp-order--hero-follow .lp-form-step { animation-duration: 500ms; animation-timing-function: ease-in-out; }
}