/* ==========================================================================
   Ad landing pages (template-landing.php) and thank-you pages (template-thank-you.php).
   Sizes come from theme-redo/audit/measure-el/landing-*.txt and thankyou-*.txt.
   ========================================================================== */

/* ---------- Shared section rhythm ---------- */
.lp-section { padding: 85px 0; }
.lp-stack { display: flex; flex-direction: column; gap: 25px; }
.lp-stack > * { margin: 0; }
.lp .lp-h2 { font-size: 40px; line-height: 1; font-weight: 400; text-align: center; margin: 0; }
.lp-sub { font-family: var(--f-head); font-size: 23px; line-height: 1; font-weight: 400; text-align: center; }
.lp-intro { font-size: 18px; line-height: 27px; text-align: center; color: var(--c-black); padding-bottom: 14px; }
.lp-actions { display: flex; justify-content: center; }

/* ---------- Hero ---------- */
.lp-hero { position: relative; padding: 75px 0; background: var(--c-navy-deep); overflow: hidden; }
/* Imagify may wrap an image in <picture>, so background photos are sized through their wrapper. */
.lp-bg, .lp-bg picture { position: absolute; inset: 0; display: block; }
.lp-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.lp-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .7); }
.lp-hero__inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 25px; }
.lp-hero__text, .lp-hero__form { flex: 1 1 0; min-width: 0; padding: 10px; }
.lp-hero__title { font-size: 40px; line-height: 1.4; font-weight: 500; color: #FFFAFA; margin: 0; }
.lp-hero__form { scroll-margin-top: calc(var(--header-h) + 16px); }

.lp-form { padding: 25px; border-radius: var(--radius); background: #1F2937; }
.lp-hero__form--bare { padding-block: 0; }
.lp-form--bare { padding: 15px; }
.lp-form.lp-form--bare .gform_wrapper { margin-top: -20px; }
.lp-form__heading { font-size: 28px; line-height: 1; font-weight: 400; color: #FFFAFA; margin: 0 0 34px; }

/* Gravity Forms draws the fields with its own theme; these rules only fit it to the dark card. */
.lp-form .gform_wrapper { margin: 0; }
.lp-form .gform_wrapper .gform_fields { --gf-form-gap-y: 16px; row-gap: 16px; }
.lp-form .gform_wrapper .gfield_label,
.lp-form .gform_wrapper legend,
.lp-form .gform_wrapper label,
.lp-form .gform_wrapper .gfield_required { color: var(--c-white); }
.lp-form .gform_wrapper .gfield_description:not(.validation_message) { color: #B8BDC7; }
.lp-form .gform_wrapper .gform_validation_errors { margin-top: 20px; }
.lp-form .gform_wrapper .gform_footer .gform_button,
.lp-form .gform_wrapper .gform_footer input[type="submit"] {
  background: var(--c-green) !important; color: var(--c-white) !important; border-color: transparent;
}
.lp-form .gform_wrapper .gform_footer .gform_button:hover,
.lp-form .gform_wrapper .gform_footer .gform_button:focus-visible,
.lp-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.lp-form .gform_wrapper .gform_footer input[type="submit"]:focus-visible { background: var(--c-green-hover) !important; }

/* ---------- Comparison table ---------- */
.lp-compare { background: var(--c-navy); color: var(--c-white); }
.lp-compare .lp-h2, .lp-compare .lp-sub { color: var(--c-white); }
.lp-table-wrap { overflow-x: auto; padding-bottom: 15px; }
.lp-table { width: 100%; font-size: 14.4px; line-height: 21.6px; font-weight: 600; color: var(--c-white); }
.lp-table th, .lp-table td { padding: 15px; border: 1px solid rgba(128, 128, 128, .5); text-align: left; vertical-align: top; }
.lp-table thead th { background: var(--c-green); font-weight: 700; text-align: center; }
.lp-table tbody th, .lp-table tbody td { background: rgba(128, 128, 128, .07); font-weight: 600; }

/* ---------- Cards (features, audiences, steps) ---------- */
.lp-cards { list-style: none; margin: 0; padding: 10px; display: grid; gap: 25px 45px; }
.lp-cards--three, .lp-cards--steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-cards > li { display: flex; }
.lp-card {
  display: flex; flex-direction: column; gap: 20px; width: 100%; min-height: 200px; padding: 15px 13px;
  background: var(--c-white); color: var(--c-black); text-decoration: none;
  border: 2px solid var(--c-green); border-radius: var(--radius); box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
  transition: box-shadow .3s;
}
.lp-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, .3); }
.lp-cards--grey .lp-card { background: #E9E9E9; }
.lp-card__icon { font-size: 30px; line-height: 37px; color: var(--c-green); }
.lp-card__title { font-size: 28px; line-height: 1; font-weight: 700; color: #0A0A0A; margin: 0; }
.lp-card__text { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0 0 14px; }

.lp-features { background: var(--c-white); }
.lp-features .lp-h2 { color: var(--c-black); }

.lp-audiences { background: var(--c-navy); }
.lp-audiences .lp-h2 { color: var(--c-white); }
.lp-cards--dark .lp-card { background: #1F2937; color: var(--c-white); }
.lp-cards--dark .lp-card__icon { color: var(--c-green-on-dark); }
.lp-cards--dark .lp-card__title { color: var(--c-white); }

/* ---------- How it Works ---------- */
.lp-steps { background: var(--c-panel-3); padding: 75px 0; }
.lp-steps .lp-h2, .lp-cta .lp-h2 { color: var(--c-navy); }
.lp-steps__lead { max-width: 800px; align-self: center; text-align: center; font-size: 18px; line-height: 27px; color: var(--c-navy); }
.lp-steps__lead p { margin: 0 0 14.4px; }
.lp-steps__lead strong { font-weight: 700; }
.lp-card--step { align-items: center; text-align: center; background: #FAFAFA; }
.lp-step__num {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-green); color: var(--c-white); font-family: var(--f-head); font-size: 32px; font-weight: 700; line-height: 1;
}
.lp-card--step .lp-card__title { font-size: 25px; line-height: 1.3; font-weight: 700; color: var(--c-navy); }

/* ---------- Testimonial and closings band ---------- */
.lp-proof { position: relative; background: var(--c-navy); color: var(--c-white); overflow: hidden; }
.lp-proof::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 51, 102, .845); }
.lp-proof > .container { position: relative; z-index: 2; }
.lp-quote { max-width: 670px; align-self: center; text-align: center; font-size: 20px; line-height: 30px; font-weight: 300; font-style: italic; padding-bottom: 44px; }
.lp-quote blockquote { margin: 0; }
.lp-quote blockquote p { margin: 0; }
.lp-quote figcaption { margin-top: 30px; }
.lp .lp-proof__heading { font-size: 23px; line-height: 1; font-weight: 400; text-align: center; color: var(--c-white); margin: 0; }

.lp-closings { list-style: none; margin: 0; padding: 20px 20px 20px; display: flex; justify-content: center; gap: 35px; }
.lp-closings > li { flex: 0 1 calc((100% - 70px) / 3); min-width: 0; display: flex; }
.lp-closing { display: flex; flex-direction: column; width: 100%; border-radius: 15px; overflow: hidden; background: var(--c-white); box-shadow: 0 6px 10px rgba(0, 0, 0, .1); }
.lp-closing__media { background: var(--c-white); }
.lp-closing__media picture { display: block; }
.lp-closing__media img { width: 100%; height: auto; }
.lp-closing--crop .lp-closing__media img { height: 294px; object-fit: cover; object-position: 0 0; }
.lp-closing--crop .lp-closing__link { min-height: 96px; }
.lp-closing__body { flex: 1; display: flex; align-items: center; gap: 20px; padding: 20px; color: var(--c-text); }
.lp-closing__type { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; min-height: 78px; margin: 0; padding: 15px; border-radius: var(--radius); background: #F1F1F1; font-size: 16px; line-height: 24px; font-weight: 600; color: #333; }
.lp-closing__type-label { color: #555; }
.lp-closing__link {
  flex: 0 0 calc(50% - 10px); display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 78px; padding: 15px;
  border-radius: var(--radius); background: var(--c-green); color: var(--c-white); font-size: 18px; line-height: 1; text-align: center; text-decoration: none;
  transition: background-color .3s;
}
.lp-closing__link:hover, .lp-closing__link:focus-visible { background: var(--c-green-hover); }

.lp-cities { list-style: none; margin: 0; padding: 20px; display: flex; gap: 20px; }
.lp-cities > li {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 75px; padding: 10px;
  border: 1px solid var(--c-green); border-radius: 16px; background: rgba(170, 170, 170, .28);
  font-size: 16px; line-height: 24px; font-weight: 600; color: var(--c-white); text-align: center;
}

/* Carousel: a scroll-snap strip, so it works by touch, trackpad and keyboard even before the script runs. */
.lp-carousel { padding: 10px 20px; }
.lp-carousel__viewport { position: relative; }
.lp-carousel__track {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
}
.lp-carousel__track::-webkit-scrollbar { display: none; }
.lp-carousel__slide { flex: 0 0 calc((100% - 20px) / 3); min-width: 0; scroll-snap-align: start; display: flex; }
.lp-carousel__arrow {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: var(--c-white); font-size: 16px; line-height: 1;
}
.lp-carousel__arrow:hover, .lp-carousel__arrow:focus-visible { background: rgba(0, 0, 0, .8); }
.lp-carousel__arrow--prev { left: 6px; }
.lp-carousel__arrow--next { right: 6px; }
.lp-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 32px; }
.lp-carousel__dots { display: flex; align-items: center; }
.lp-carousel__dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; }
.lp-carousel__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.lp-carousel__dot[aria-current="true"]::before { background: var(--c-white); }
.lp-carousel__pause { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; background: none; color: var(--c-white); font-size: 12px; }
.lp-carousel__pause[hidden], .lp-carousel__dot[hidden] { display: none; }

/* ---------- Closing call-to-action ---------- */
.lp-cta { background: var(--c-panel-3); }
.lp-cta__text { max-width: 800px; align-self: center; text-align: center; font-size: 18px; line-height: 27px; color: var(--c-navy); padding-bottom: 14px; }

/* ---------- Thank-you pages ---------- */
.ty { background: var(--c-black); }
.ty-panel { background: var(--c-black); color: var(--c-white); }
.ty-panel__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 400px; padding: 10px; }
.ty-panel__title { font-size: 55px; line-height: 1; font-weight: 500; color: var(--c-white); margin: 0; }
.ty-panel__text { font-size: 16px; line-height: 24px; margin: 0 0 14px; }
.ty-quote { max-width: 670px; margin: 0; text-align: center; font-size: 20px; line-height: 30px; font-weight: 300; font-style: italic; }
.ty-quote blockquote { margin: 0; }
.ty-quote blockquote p, .ty-quote figcaption { margin: 0 0 14.4px; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .lp-cards { gap: 25px; }
  .lp-cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-closings { gap: 25px; }
  .lp-closings > li { flex-basis: calc((100% - 50px) / 3); }
  .lp-closing__body { flex-wrap: wrap; }
  .lp-closing__type, .lp-closing__link { flex: 1 1 100%; }
  .lp-carousel__slide { flex-basis: calc((100% - 10px) / 2); }
  .lp-cities { flex-wrap: wrap; }
  .lp-cities > li { flex: 1 1 28%; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .lp .container { padding-inline: 16px; }
  .lp-section, .lp-steps { padding: 50px 0; }
  .lp .lp-h2 { font-size: 40px; line-height: 1.3; }
  .lp-sub, .lp .lp-proof__heading { line-height: 1.3; }

  .lp-hero__inner { flex-direction: column; align-items: stretch; }
  .lp-hero__text, .lp-hero__form { flex: 0 0 auto; padding: 0; }
  .lp-hero__title { line-height: 1.3; }


  .lp-cards { padding: 0; }
  .lp-cards--three, .lp-cards--four, .lp-cards--steps { grid-template-columns: minmax(0, 1fr); }

  .lp-closings { flex-direction: column; gap: 25px; padding: 60px 34px; }
  .lp-closings > li { flex: 0 0 auto; }
  .lp-closing--crop .lp-closing__media img { height: 205px; }
  .lp-closing--crop .lp-closing__link { min-height: 78px; }
  .lp-carousel { padding: 10px; }
  .lp-carousel__slide { flex-basis: 100%; }
  .lp-cities { flex-direction: column; flex-wrap: nowrap; }
  .lp-cities > li { flex: 0 0 auto; }

  .ty-panel__inner { align-items: flex-start; }
  .ty-quote { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-carousel__track { scroll-behavior: auto; }
}