/*
 * Why Lockii pages — typography alignment and shared spacing.
 * Tighter section/card padding aligned with standard marketing cards.
 */

.gsf-page,
.ent-page,
.stl-page {
  --why-section-y: clamp(4.5rem, 8.5vw, 7rem);
  --why-section-x: 1.5rem;
  --why-section-heading-gap: clamp(1.5rem, 4vw, 2.5rem);
  --why-card-radius: 20px;
  --why-card-inner-radius: 16px;
  --why-card-padding: 16px 20px;
  --why-card-shell-padding: 8px;
  --why-card-gap: 12px;
  --why-grid-gap: 28px;
  --why-hero-bottom-pad: clamp(4rem, 10vh, 6rem);
  --why-section-radius: clamp(1.25rem, 3vw, 2rem);
}

.gsf-page .title-center-2,
.ent-page .title-center-2,
.stl-page .title-center-2 {
  margin-bottom: var(--why-section-heading-gap);
  text-align: center;
}

.gsf-page .gsf-section-heading.title-center-2 .para-2,
.ent-page .ent-section-heading.title-center-2 .para-2,
.stl-page .stl-section-heading.title-center-2 .para-2,
.stl-page .title-center-2 .para-2 {
  text-align: center;
}

.para-2.centre {
  text-align: center;
}

.gsf-launch-copy,
.gsf-product-sidebar,
.ent-highlight-card,
.ent-saving,
.stl-saving,
.stl-migration-copy,
.stl-quote {
  text-align: left;
}

.ent-kicker,
.stl-kicker {
  text-align: left;
}

.ent-saving-metric,
.stl-saving-metric {
  text-align: left;
}

.gsf-final-inner,
.ent-final-inner,
.stl-final-inner {
  text-align: center;
}

/* Get started fast */
.gsf-page .gsf-dark,
.gsf-page .gsf-light,
.gsf-page .gsf-final {
  padding: var(--why-section-y) var(--why-section-x);
}

.gsf-page .gsf-section-heading {
  margin: 0 auto var(--why-section-heading-gap);
}

.gsf-page .gsf-launch-stage {
  gap: var(--why-card-gap);
}

.gsf-page .gsf-launch-card {
  gap: 0;
  align-items: stretch;
  padding: var(--why-card-shell-padding);
  background: #fff;
  border-radius: var(--why-card-radius);
}

.gsf-page .gsf-launch-image,
.gsf-page .gsf-product-main {
  border-radius: var(--why-card-inner-radius);
}

.gsf-page .gsf-launch-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 0;
  max-height: 220px;
  aspect-ratio: auto;
  overflow: hidden;
}

.gsf-page .gsf-launch-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--why-card-padding);
}

.gsf-page .gsf-launch-meta {
  margin-bottom: 0.5rem;
}

.gsf-page .gsf-launch-copy .subheading-regular-7 {
  margin: 0;
}

.gsf-page .gsf-launch-copy .para-2 {
  margin-top: 0.5rem;
}

.gsf-page .gsf-visual {
  min-height: 0;
  padding: 8px;
}

.gsf-page .gsf-launch-image .gsf-channel-visual {
  width: 100%;
  max-width: 100%;
  padding: 0.25rem 0.35rem;
}

.gsf-page .gsf-launch-image .gsf-channel-list {
  width: min(100%, 340px);
  height: 110px;
}

.gsf-page .gsf-payments {
  padding-top: var(--why-card-gap);
}

.gsf-page .gsf-product-showcase {
  gap: var(--why-card-gap);
}

.gsf-page .gsf-product-main {
  min-height: 280px;
  padding: var(--why-card-shell-padding);
  background: #fff;
}

.gsf-page .gsf-product-main img {
  border-radius: var(--why-card-inner-radius);
}

.gsf-page .gsf-product-sidebar {
  gap: var(--why-card-gap);
}

.gsf-page .gsf-product-sidebar div {
  gap: 0.35rem;
  min-height: 0;
  padding: var(--why-card-padding);
  background: #fff;
  border-radius: var(--why-card-radius);
}

.gsf-page .gsf-hero-content {
  padding: clamp(5rem, 10vh, 6.5rem) var(--why-section-x)
    clamp(2.5rem, 6vh, 3.5rem);
}

/* Enterprise */
.ent-page .ent-hero-content {
  padding-top: 100px;
  padding-bottom: 100px;
}

.ent-page .ent-light-section,
.ent-page .ent-savings-section {
  padding: var(--why-section-y) var(--why-section-x);
}

.ent-page .ent-highlights-section {
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.ent-page .ent-light-section {
  border-radius: var(--why-section-radius) var(--why-section-radius) 0 0;
}

.ent-page .ent-section-heading {
  margin: 0 auto var(--why-section-heading-gap);
}

.ent-page .ent-highlights-grid {
  gap: var(--why-card-gap);
}

.ent-page .ent-highlight-card {
  gap: 0.5rem;
  padding: var(--why-card-padding);
  border-radius: var(--why-card-radius);
}

.ent-page .ent-feature-grid-wrap {
  position: relative;
  z-index: 1;
  width: min(100%, 1180px);
  margin: 0 auto;
}

.ent-page .ent-feature-grid-wrap .feature-grid-2 {
  margin-top: 0;
}

.ent-page .ent-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4rem);
  width: min(100%, 1180px);
  margin-inline: auto;
  margin-bottom: 3.875rem;
}

.ent-page .ent-outcomes-grid .ent-saving {
  min-width: 0;
}

.ent-page .ent-saving {
  padding-top: 1rem;
}

.ent-page .ent-saving-title {
  margin-top: 0.75rem;
}

.ent-page .ent-saving .para-2 {
  margin-top: 0.5rem;
}

.ent-page .ent-outcomes-stats {
  padding-top: clamp(2rem, 4vw, 3rem);
  margin-top: 0;
}

.ent-page .ent-final {
  padding: var(--why-section-y) 0;
}

.ent-page .ent-final img {
  margin-bottom: 1.25rem;
}

.ent-page .ent-final-actions {
  gap: 1.25rem;
  margin-top: 1rem;
}

.ent-page .card.feature-02.updated,
.stl-page .card.feature-02.updated {
  min-height: auto;
}

.ent-page .ent-home-card-wrap .image-wrapper,
.stl-page .stl-home-card-wrap .image-wrapper {
  min-height: 220px;
}

.ent-page .card.feature-02.updated .card-feature,
.stl-page .card.feature-02.updated .card-feature {
  padding: 16px 20px 20px;
}

/* Switch to Lockii */
.stl-page .stl-hero-content {
  padding-bottom: var(--why-hero-bottom-pad);
}

.stl-page .stl-light-section,
.stl-page .stl-purple-section,
.stl-page .stl-savings-section,
.stl-page .stl-migration-section {
  padding: var(--why-section-y) var(--why-section-x);
}

.stl-page .stl-final {
  padding: var(--why-section-y) 0;
}

.stl-page .stl-light-section,
.stl-page .stl-migration-section {
  border-radius: var(--why-section-radius) var(--why-section-radius) 0 0;
}

.stl-page .stl-migration-section {
  margin-top: calc(var(--why-section-radius) * -1);
}

.stl-page .stl-section-heading {
  margin: 0 auto var(--why-section-heading-gap);
}

.stl-page .stl-savings-grid {
  gap: var(--why-grid-gap);
}

.stl-page .stl-saving {
  padding-top: 1rem;
}

.stl-page .stl-saving-title {
  margin-top: 0.75rem;
}

.stl-page .stl-saving .para-2,
.stl-page .stl-migration-steps .para-2 {
  margin-top: 0.5rem;
}

.stl-page .stl-migration-grid {
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.stl-page .stl-migration-steps {
  gap: 1rem;
  padding-top: 1.25rem;
  margin-top: 1.5rem;
}

.stl-page .stl-quote-card {
  min-height: 420px;
}

.stl-page .stl-quote {
  padding: var(--why-card-padding);
  border-radius: var(--why-card-radius);
}

.stl-page .stl-final img {
  margin-bottom: 1.25rem;
}

.stl-page .stl-final-actions {
  gap: 1.25rem;
  margin-top: 1rem;
}

.gsf-page .gsf-final-inner {
  gap: 1.5rem;
}

.gsf-page .feature-card-4.row.noright .bento-card-content,
.ent-page .feature-card-4.row.noright .bento-card-content {
  justify-content: center;
}

@media screen and (max-width: 991px) {
  .gsf-page .gsf-section-heading.title-center-2,
  .ent-page .ent-section-heading.title-center-2,
  .stl-page .title-center-2 {
    align-items: flex-start;
    width: 100%;
    max-width: none;
    text-align: left;
  }

  .gsf-page .gsf-section-heading.title-center-2 .display-2,
  .gsf-page .gsf-section-heading.title-center-2 .para-2,
  .ent-page .ent-section-heading.title-center-2 .display-2,
  .ent-page .ent-section-heading.title-center-2 .para-2,
  .stl-page .title-center-2 .display-2,
  .stl-page .title-center-2 .para-2 {
    margin-right: 0;
    margin-left: 0;
    text-align: left;
  }

  .gsf-page .gsf-launch-image {
    max-height: 180px;
    padding: 4px 0;
  }

  .gsf-page .gsf-launch-copy {
    padding: 14px 16px;
  }

  .gsf-page .gsf-product-main {
    min-height: 220px;
  }

  .gsf-page .para-2.left,
  .ent-page .para-2.left,
  .stl-page .para-2.left,
  .gsf-page .subheading-regular-7.left,
  .ent-page .subheading-regular-7.left,
  .stl-page .subheading-regular-7.left,
  .gsf-page .display-2.left,
  .ent-page .display-2.left,
  .stl-page .display-2.left {
    text-align: left;
  }

  .gsf-page .gsf-hero-content {
    padding: 1rem 1.25rem 2.5rem;
  }

  .gsf-page .gsf-final-actions,
  .ent-page .ent-final-actions,
  .stl-page .stl-final-actions {
    align-items: stretch;
  }

  .gsf-page .gsf-final-actions .btn-primary.w-button,
  .gsf-page .gsf-final-actions .link-arrow-wrapper,
  .ent-page .ent-final-actions .btn-primary.w-button,
  .ent-page .ent-final-actions .link-arrow-wrapper,
  .stl-page .stl-final-actions .btn-primary.w-button,
  .stl-page .stl-final-actions .link-arrow-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
  }

  .ent-page .ent-outcomes-grid {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
    column-gap: 0;
  }

  .ent-page .ent-hero-content,
  .stl-page .stl-hero-content {
    padding-bottom: clamp(2.5rem, 8vh, 4rem);
  }

  .ent-page .ent-feature-grid-wrap .flex-block-12 {
    align-self: flex-start;
    text-align: left;
  }

  .ent-page .ent-feature-grid-wrap .para-2,
  .ent-page .ent-feature-grid-wrap .subheading-regular-6 {
    text-align: left;
  }
}

@media screen and (max-width: 767px) {
  .gsf-page .gsf-final-inner .display-2.centre,
  .ent-page .ent-final-inner .display-2.centre,
  .stl-page .stl-final-inner .display-2.centre {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .gsf-page .feature-card-4.row.bottom,
  .ent-page .feature-card-4.row.bottom,
  .gsf-page .feature-card-4.row.noright,
  .ent-page .feature-card-4.row.noright {
    max-height: none;
    overflow: visible;
  }

  .gsf-page .feature-card-4.row.bottom .bento-card-content,
  .ent-page .feature-card-4.row.bottom .bento-card-content,
  .gsf-page .feature-card-4.row.noright .bento-card-content,
  .ent-page .feature-card-4.row.noright .bento-card-content {
    position: relative;
    z-index: 1;
    padding-bottom: clamp(2.5rem, 8vw, 4rem);
  }

  .gsf-page .feature-card-4.row.bottom .bento-image-horizontal.left,
  .ent-page .feature-card-4.row.bottom .bento-image-horizontal.left,
  .gsf-page .feature-card-4.row.noright .bento-image-horizontal,
  .ent-page .feature-card-4.row.noright .bento-image-horizontal {
    width: 100%;
    height: auto;
    margin-top: 0;
  }
}