:root {
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: #203237;
  background: #f7f2ee;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background:
    radial-gradient(
      circle at top,
      #fffaf6 0,
      #f7f2ee 44%,
      #f2ece7 100%
    );

  color: #203237;
  line-height: 1.62;
}

a {
  color: inherit;
}

.gl-shell {
  width: min(100% - 32px, 780px);
  margin: 0 auto;
}

.gl-topbar {
  position: sticky;
  top: 0;
  z-index: 20;

  border-bottom:
    1px solid rgba(37, 58, 62, 0.08);

  background:
    rgba(250, 247, 243, 0.93);

  backdrop-filter: blur(14px);
}

.gl-topbar-inner {
  display: flex;

  min-height: 62px;

  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.gl-brand {
  text-decoration: none;
  font-weight: 820;
  letter-spacing: -0.025em;
}

.gl-top-cta,
.gl-primary,
.gl-secondary {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  text-decoration: none;

  border-radius: 14px;

  font-weight: 780;
}

.gl-top-cta {
  min-height: 40px;

  padding: 8px 14px;

  background: #235d60;
  color: #fff;

  font-size: .86rem;
}

.gl-main {
  padding:
    38px 0
    calc(
      52px +
      env(safe-area-inset-bottom)
    );
}

.gl-eyebrow {
  margin: 0 0 9px;

  color: #607779;

  font-size: .76rem;
  font-weight: 820;

  letter-spacing: .11em;
  text-transform: uppercase;
}

.gl-hero h1 {
  max-width: 720px;

  margin:
    0 0
    15px;

  color: #183f43;

  font-size:
    clamp(2.15rem, 8vw, 4rem);

  line-height: 1.02;
  letter-spacing: -.045em;
}

.gl-dek {
  max-width: 700px;
  margin: 0;

  color: #4a6062;

  font-size:
    clamp(1.03rem, 3vw, 1.2rem);
}

.gl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;

  margin-top: 25px;
}

.gl-primary,
.gl-secondary {
  min-height: 50px;

  padding:
    12px 19px;
}

.gl-primary {
  background: #235d60;
  color: #fff;

  box-shadow:
    0 12px 28px
    rgba(29, 76, 79, .15);
}

.gl-secondary {
  border:
    1px solid
    rgba(35, 93, 96, .17);

  background: #fffaf6;
}

.gl-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin:
    19px 0 0;

  padding: 0;

  list-style: none;
}

.gl-trust li {
  padding:
    7px 10px;

  border:
    1px solid
    rgba(53, 77, 79, .10);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .58);

  color: #587072;

  font-size: .78rem;
  font-weight: 680;
}

.gl-section {
  margin-top: 42px;

  padding: 26px;

  border:
    1px solid
    rgba(42, 66, 68, .09);

  border-radius: 22px;

  background:
    rgba(255, 253, 250, .86);

  box-shadow:
    0 15px 38px
    rgba(52, 44, 38, .045);
}

.gl-section h2,
.gl-faq h2 {
  margin:
    0 0
    13px;

  color: #214e52;

  font-size:
    clamp(1.38rem, 4vw, 1.8rem);

  line-height: 1.15;
  letter-spacing: -.027em;
}

.gl-section p {
  margin:
    12px 0
    0;
}

.gl-signals {
  display: grid;
  gap: 11px;

  margin:
    18px 0 0;

  padding: 0;

  list-style: none;
}

.gl-signals li {
  position: relative;

  padding:
    13px 14px
    13px 40px;

  border-radius: 15px;

  background: #f3f7f5;
}

.gl-signals li::before {
  position: absolute;

  left: 15px;
  top: 12px;

  content: "•";

  color: #267174;

  font-size: 1.2rem;
  font-weight: 900;
}

.gl-callout {
  margin-top: 42px;

  padding: 28px;

  border-radius: 24px;

  background: #173f43;
  color: #f9fbfa;
}

.gl-callout h2 {
  margin:
    0 0
    10px;

  line-height: 1.16;
}

.gl-callout p {
  color: #dfeaea;
}

.gl-callout .gl-primary {
  margin-top: 8px;

  background: #f7f2ee;
  color: #173f43;
}

.gl-faq {
  margin-top: 42px;
}

.gl-faq details {
  margin-bottom: 10px;

  padding:
    16px 18px;

  border:
    1px solid
    rgba(42, 66, 68, .10);

  border-radius: 16px;

  background:
    rgba(255, 253, 250, .82);
}

.gl-faq summary {
  cursor: pointer;
  font-weight: 780;
}

.gl-faq details p {
  color: #52696b;
}

.gl-safety {
  margin-top: 31px;

  padding:
    14px 16px;

  border-left:
    3px solid #8e6469;

  background:
    rgba(255, 255, 255, .44);

  color: #617173;

  font-size: .86rem;
}

.gl-footer {
  padding:
    28px 0
    calc(
      34px +
      env(safe-area-inset-bottom)
    );

  border-top:
    1px solid
    rgba(42, 66, 68, .08);

  color: #667779;

  font-size: .82rem;
}

.gl-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;

  margin-top: 7px;
}

@media (max-width: 560px) {
  .gl-shell {
    width:
      min(
        100% - 24px,
        780px
      );
  }

  .gl-main {
    padding-top: 29px;
  }

  .gl-section,
  .gl-callout {
    padding: 21px;
    border-radius: 19px;
  }

  .gl-actions {
    display: grid;
  }

  .gl-primary,
  .gl-secondary {
    width: 100%;
  }
}
