.gl-faq details > *:not(summary) {
  overflow: hidden;
}
.gl-faq details summary {
  cursor: pointer;
}
.gl-faq details:not([open]) > *:not(summary) {
  animation: faq-close 0.2s ease forwards;
}
.gl-faq details[open] > *:not(summary) {
  animation: faq-open 0.25s ease forwards;
}
@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes faq-close {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Hero copy — body text color */
.gl-lp-hero__sub {
  color: #263856 !important;
}

/* Final CTA — backdrop covers full section height */
.gl-lp-cta__backdrop {
  top: auto !important;
  bottom: 0 !important;
}
.gl-lp-cta__bg-img {
  width: 100% !important;
  height: auto !important;
  object-fit: unset !important;
}

/* How it works — gradient background, remove extra head margin */
.gl-lp-howto {
  background: linear-gradient(180deg, #f1f5fb 0%, #fff 100%) !important;
  margin-bottom: 0 !important;
  background: #fff !important;
}

.gl-lp-howto .gl-lp-head {
  margin-top: 0 !important;
}

/* Caveats — body text color */
.gl-caveat__body {
  color: #263856 !important;
}

/* What is Y-DNA — 4-point layout with center illustration */
.gl-lp-y101 {
  background: #fff !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 128px max(var(--gl-space-6), calc((100vw - 1120px) / 2)) 96px;
}
.gl-lp-y101 .gl-lp-head {
  margin-top: 0 !important;
}
.gl-lp-metrics {
  margin-bottom: 0 !important;
}
.gl-y101-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 64px;
  align-items: center;
}
@media (min-width: 900px) {
  .gl-y101-body {
    grid-template-columns: 1fr 480px 1fr;
    gap: 40px;
  }
}
.gl-y101-col {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.gl-y101-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gl-y101-item__icon {
  width: 32px;
  height: 32px;
}
.gl-y101-item__icon img {
  width: 32px;
  height: 32px;
}
.gl-y101-item__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: #263856;
  margin: 0;
}
.gl-y101-item__body {
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  color: rgba(38, 56, 86, 0.6);
  margin: 0;
}
.gl-y101-visual {
  overflow: hidden;
}

/* FAQ — reset margins */
.gl-faq-panel .gl-faq {
  margin: 0 !important;
}

/* Final CTA section button */
.gl-lp .gl-btn--cta-final {
  height: 60px !important;
  border-radius: 32px !important;
  padding: 0 32px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
}

/* Four ways — feature section text styles */
.gl-lp-feature__eyebrow {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  color: #155eef !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
.gl-lp .gl-lp-feature__copy h3 {
  font-family: "Lexend Deca", var(--gl-font) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 32px !important;
  color: #263856 !important;
}
.gl-lp-feature__copy p:not(.gl-lp-feature__eyebrow) {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #263856 !important;
}
.gl-lp-feature__cta {
  margin-top: 16px !important;
}

/* How it works — step text styles */
.gl-lp-howto-step__eyebrow {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  color: #155eef !important;
}
.gl-lp-howto-step__title {
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 32px !important;
}
.gl-lp-howto-step__body {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #263856 !important;
}

/* All CTA buttons on landing — match Figma desktop spec */
.gl-lp .gl-btn {
  height: 48px;
  padding: 0 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 20px;
  min-width: 224px;
}
.gl-lp .gl-btn--primary {
  background: #ff7c11 !important;
}
.gl-lp .gl-btn--primary:hover {
  background: #f2690b !important;
}
.gl-lp .gl-btn--secondary {
  border-color: rgba(38, 56, 86, 0.6) !important;
  color: #263856 !important;
}
.gl-lp .gl-btn--secondary:hover {
  background: rgba(201, 214, 228, 0.3) !important;
  border-color: #225a9c !important;
  color: #225a9c !important;
  text-decoration: none !important;
}

/* Desktop hero image — no crop */
/* .gl-lp-hero__visual {
  position: relative !important;
  inset: unset !important;
} */
.gl-lp-hero__img {
  object-fit: unset !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
/* Give the hero the image's own aspect ratio (2880×2328) so `cover` shows the
   FULL composition instead of cropping the bottom of the world map, and let it
   bleed all the way down to the metrics row. Copy is pinned to the top so it
   doesn't float in the now-taller section. Capped so ultra-wide screens don't
   get an absurdly tall hero (a small bottom crop there is harmless map). */
@media (min-width: 901px) {
  .gl-lp-hero {
    aspect-ratio: 2880 / 2328 !important;
    min-height: 0 !important;
    max-height: 1200px !important;
    align-items: flex-start !important;
    background: #fff !important;
  }
  /* Pull the stat cards up over the map — and drag the "What is Y-DNA" section
     up with them (a negative top-margin moves the element and everything after
     it). The clamp() mirrors the hero's clamp(min, width/aspect, max) height so
     the gap below the CTAs stays ~constant instead of ballooning on wide
     screens. Lower the leading constant to seat the cards higher. */
  .gl-lp-metrics {
    margin-top: calc(758px - clamp(886px, 80.84vw, 1200px)) !important;
  }
  /* The lifted metrics drag whatever comes next up so it overlaps the hero —
     that's "What is Y-DNA" now that it's the first section after the metrics.
     The hero image is position:absolute z-index:0 (positioned), while
     .gl-lp-y101 is static (non-positioned) and so paints *under* it — the map
     bled over the heading. Put the section in the stacking flow above the hero
     image (but below the z-index:2 cards) so its solid bg cleanly covers the
     map bottom. */
  .gl-lp-y101 {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    background: #fff !important;
  }
  /* Closing-CTA footer image: the section was taller than the image's cover
     height, so the whole image showed — including the empty light strip below
     the map/cards. Trim the bottom padding so the section is shorter than the
     image; cover (anchored top center) then crops that empty bottom and seats
     the footer right under the relative cards. */
  .gl-lp-cta {
    padding-bottom: calc(67.5vw - 322px) !important;
  }
}

/* ── Mobile hero ── */
.gl-lp-hero-m {
  display: none;
}

@media (max-width: 768px) {
  /* Hide desktop hero */
  .gl-lp-hero {
    display: none !important;
  }

  /* 343px content width */
  .gl-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* "Four ways" section header — mobile */
  .gl-lp-head h2 {
    font-size: 24px !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    margin-top: 0px !important;
  }
  .gl-lp-head p {
    color: #263856 !important;
    font-size: 16px !important;
    line-height: 24px !important;
  }
  .gl-lp-head {
    padding-top: 64px !important;
    margin-top: 0 !important;
    padding-bottom: 32px !important;
    margin-bottom: 0 !important;
  }

  .gl-lp-y101 {
    padding-top: 64px !important;
  }
  .gl-lp-y101 .gl-lp-head {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .gl-y101-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
  .gl-y101-visual {
    order: -1;
  }
  .gl-y101-col {
    gap: 32px !important;
  }

  /* Feature section — mobile layout: eyebrow → title → image → body → button */
  .gl-lp-feature {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .gl-lp-feature--left:first-of-type {
    margin-top: 32px !important;
  }
  .gl-lp-feature__copy {
    display: contents !important;
  }
  .gl-lp-feature__eyebrow {
    order: 1 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #5079ff !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    line-height: 24px !important;
    text-align: left !important;
  }
  .gl-lp .gl-lp-feature__copy h3 {
    order: 2 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    font-weight: 700 !important;
    color: #263856 !important;
  }
  .gl-lp-feature__visual {
    order: 3 !important;
  }
  .gl-lp-feature__copy p:not(.gl-lp-feature__eyebrow) {
    order: 4 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #263856 !important;
    margin: 0 !important;
  }
  .gl-lp-feature__cta {
    order: 5 !important;
    margin-top: 16px !important;
    width: 100% !important;
  }

  /* Feature image on mobile */
  .gl-lp-feature__visual--img {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    border-radius: 0 !important;
    height: 280px !important;
    overflow: hidden !important;
  }
  .gl-lp-feature__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  /* All landing buttons on mobile — match hero button */
  .gl-lp .gl-btn {
    height: 64px !important;
    border-radius: 32px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .gl-lp-feature__cta form {
    display: block !important;
    width: 100% !important;
  }
  .gl-lp-howto__cta form {
    display: block !important;
    width: 100% !important;
  }

  /* How it works */
  .gl-lp-howto {
    padding: 64px 16px !important;
    margin-top: 0 !important;
    margin-bottom: 0px !important;
    background: #fff !important;
  }
  .gl-lp-howto .gl-lp-head {
    margin: 0 0 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .gl-lp-howto .gl-lp-head h2 {
    font-family: "Lexend Deca", var(--gl-font);
    font-size: 24px !important;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0;
  }
  .gl-lp-howto__grid {
    gap: 48px !important;
  }
  .gl-howviz {
    max-width: 100% !important;
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    height: 180px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
  }
  .gl-howviz__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center top;
  }
  .gl-lp-howto-step {
    gap: 8px !important;
  }
  .gl-lp-howto-step__eyebrow {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    color: #155eef !important;
    letter-spacing: 0 !important;
  }
  .gl-lp-howto-step__title {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    color: #263856 !important;
  }
  .gl-lp-howto-step__body {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #263856 !important;
    line-height: 24px !important;
    max-width: 100% !important;
  }

  /* Metrics cards */
  .gl-lp-metrics {
    margin-top: 32px !important;
    gap: 16px !important;
    padding: 0;
    margin-bottom: 48px;
    position: relative !important;
    z-index: auto !important;
    background: transparent !important;
    z-index: 0 !important;
  }
  .gl-lp-metrics:before {
    position: absolute;
    top: -32px;
    content: "";
    width: 100vw;
    height: calc(100% + 32px);
    background: #fff;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }

  .gl-lp-metric {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 2px solid #fff !important;
    border-radius: 24px !important;
    box-shadow: 0 5px 10px rgba(74, 93, 128, 0.16) !important;
    padding: 32px !important;
  }
  .gl-lp-metric__num {
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    margin-bottom: 8px !important;
    line-height: normal !important;
  }
  .gl-lp-metric__label {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: #263856 !important;
  }

  .gl-lp-hero-m {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: calc(-1 * var(--gl-space-8));
    padding: 32px 16px 0;
    background: #fff;
  }
  .gl-lp-hero-m__bg {
    display: none;
  }
  .gl-lp-hero-m__eyebrow {
    position: relative;
    z-index: 1;
    font-family: "Lexend Deca", var(--gl-font);
    font-size: 16px;
    font-weight: 600;
    color: #155eef;
    letter-spacing: -0.01em;
    margin: 0 0 20px;
    text-align: center;
  }
  .gl-lp-hero-m__title {
    position: relative;
    z-index: 1;
    font-family: "Lexend Deca", var(--gl-font);
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--gl-primary-dark);
    margin: 0;
    text-align: center;
  }
  .gl-lp-hero-m__image {
    position: relative;
    z-index: 1;
    width: 100vw;
    margin: 24px calc(50% - 50vw) 16px;
  }
  .gl-lp-hero-m__image img {
    display: block;
    width: 100%;
    height: auto;
  }
  .gl-lp-hero-m__cta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 0 32px;
  }
  .gl-lp-hero-m__cta form {
    width: 100%;
  }
  .gl-lp-hero-m__btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64px;
    background: #ff7c11;
    color: #fff;
    border: none;
    border-radius: 32px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
  }
  .gl-lp-hero-m__btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64px;
    background: transparent;
    color: #263856;
    border: 1px solid rgba(38, 56, 86, 0.6);
    border-radius: 32px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
  }
  .gl-lp-hero-m__btn-primary:hover {
    background: #f2690b;
  }
  .gl-lp-hero-m__btn-secondary:hover {
    background: rgba(201, 214, 228, 0.3);
    border-color: #225a9c;
    color: #225a9c;
    text-decoration: none;
  }
  .gl-lp-hero-m__sub {
    position: relative;
    z-index: 1;
    font-size: 16px;
    line-height: 1.6;
    color: var(--gl-primary-dark);
    margin: 0 0 16px;
    text-align: center;
  }
  .gl-lp-hero-m__sub--bold {
    font-weight: 700;
  }
  .gl-lp-hero-m__body {
    position: relative;
    z-index: 1;
    padding-bottom: 32px;
  }

  /* Caveats section */
  .gl-lp-head + .gl-caveats {
    margin-top: 16px !important;
  }
  .gl-caveats {
    gap: 16px !important;
    margin-bottom: 64px !important;
  }
  .gl-caveat {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 24px !important;
    align-items: flex-start !important;
  }
  .gl-caveat__icon {
    margin-bottom: 16px !important;
  }
  .gl-caveat__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    margin-bottom: 8px !important;
    color: #263856 !important;
  }
  .gl-caveat__body {
    font-size: 16px !important;
    line-height: 24px !important;
    color: #263856 !important;
  }
  /* Caveats section heading */
  .gl-lp-head + .gl-caveats,
  .gl-lp-head:has(+ .gl-caveats) {
    text-align: left !important;
  }
  .gl-lp-head:has(+ .gl-caveats) h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    text-align: center !important;
    margin: 0 !important;
  }

  /* Pricing section */
  .gl-lp-pricing {
    padding-top: 64px !important;
  }
  .gl-lp-pricing h2 {
    font-size: 28px !important;
    line-height: 36px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 24px !important;
  }
  .gl-lp-pricing__list {
    gap: 16px !important;
  }
  .gl-lp-pricing__item span {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
  }
  .gl-lp-pricing__price-amount {
    font-size: 48px !important;
  }
  .gl-lp-pricing__price-sub {
    justify-content: center !important;
    text-align: center !important;
  }
  .gl-lp-pricing__price-footer {
    text-align: center !important;
    font-size: 14px !important;
  }
  .gl-lp-pricing__price {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  /* FAQ section */
  .gl-faq-panel {
    padding: 24px !important;
    border-radius: 16px !important;
    margin: 0 0 48px !important;
    gap: 48px !important;
  }

  /* Final CTA — mobile layout: content first, image below */
  .gl-lp-cta {
    display: flex !important;
    flex-direction: column !important;
    padding: 64px 16px 0 !important;
    margin-bottom: -80px !important;
  }
  .gl-lp-cta__backdrop {
    position: static !important;
    order: 2 !important;
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }
  .gl-lp-cta__backdrop {
    line-height: 0 !important;
  }
  .gl-lp-cta__backdrop picture,
  .gl-lp-cta__backdrop img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .gl-lp-cta__inner {
    order: 1 !important;
    position: static !important;
    margin-bottom: 40px !important;
  }
  .gl-lp-cta__inner h2 {
    font-size: 28px !important;
    line-height: 36px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
  }
  .gl-lp-cta__inner > p {
    font-size: 16px !important;
    line-height: 24px !important;
    margin-bottom: 24px !important;
  }
  .gl-lp-cta__inner .gl-btn {
    width: 100% !important;
  }
  .gl-faq-panel__title {
    font-family: "Lexend Deca", var(--gl-font) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;
    color: #263856 !important;
    margin-bottom: 0 !important;
  }
  .gl-faq-panel .gl-faq {
    gap: 32px !important;
    margin: 0 !important;
  }
  .gl-faq-panel .gl-faq details {
    border-bottom: none !important;
    border-top: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .gl-faq summary {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 26px !important;
    color: #263856 !important;
  }
  .gl-faq details > p,
  .gl-faq details > div {
    font-size: 14px !important;
    line-height: 22px !important;
    margin-top: 8px !important;
  }

  .gl-y101-item__title {
    color: #263856;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
  }

  .gl-y101-item__body {
    color: rgba(38, 56, 86, 0.6);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }
}

.y-dna-page {
  background: #e9f2fd !important;
}

.white-bg-yo {
  width: 100%;
  position: relative;
  z-index: 0;
}
.white-bg-yo::after {
  content: "";
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: 200%;
  background: #fff !important;
  position: absolute;
  top: 0;
  z-index: -1;
}