@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");

:root {
  --navy: #00132e;
  --navy-soft: #737b8f;
  --navy-muted: #404e62;
  --blue: #58d5ff;
  --blue-link: #1d67cd;
  --orange: #ff6200;
  --white: #ffffff;
  --line: rgba(0, 19, 46, 0.12);
  --peach: rgba(249, 197, 180, 0.78);
  --blue-tint: rgba(88, 213, 255, 0.3);

  --font_0: 400 95px/1em "Space Grotesk", sans-serif;
  --font_1: 500 16px/1.4em "Space Grotesk", sans-serif;
  --font_2: 700 68px/1.1em "Space Grotesk", sans-serif;
  --font_3: 700 47px/1.2em "Space Grotesk", sans-serif;
  --font_4: 700 34px/1.3em "Space Grotesk", sans-serif;
  --font_5: 700 24px/1.3em "Space Grotesk", sans-serif;
  --font_6: 700 20px/1.5em "Space Grotesk", sans-serif;
  --font_7: 400 18px/1.3em "Space Grotesk", sans-serif;
  --font_8: 400 16px/1.5em "Space Grotesk", sans-serif;
  --font_9: 400 14px/1.3em "Space Grotesk", sans-serif;
  --font_10: 400 12px/1.4em "Space Grotesk", sans-serif;

  --site-width: calc(100% - 160px);
  --site-min-width: 980px;
  --section-padding-x: 80px;
  --section-padding-wide: 90px;
  --header-grid: 196px 588px 196px;
  --hero-columns: 588px 392px;
  --hero-image-width: 392px;
  --hero-image-height: 634px;
  --hero-image-radius: 200px;
  --hero-image-shadow: 17.42px 11.73px 0 0 rgba(0, 19, 46, 1);
  --testimonial-photo-size: 232px;
  --divider-top-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 100 1920 200' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0 285L80 274.3C160 263.7 320 242.3 480 215.7C640 189 800 157 960 151.8C1120 147 1280 170 1440 187.7C1600 205 1760 217 1840 223.3L1920 229.7V300H1840C1760 300 1600 300 1440 300C1280 300 1120 300 960 300C800 300 640 300 480 300C320 300 160 300 80 300H0Z'/%3E%3C/svg%3E");
  --divider-bottom-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 100 1920 200' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0 115L80 125.7C160 136.3 320 157.7 480 184.3C640 211 800 243 960 248.2C1120 253 1280 230 1440 212.3C1600 195 1760 183 1840 176.7L1920 170.3V100H1840C1760 100 1600 100 1440 100C1280 100 1120 100 960 100C800 100 640 100 480 100C320 100 160 100 80 100H0Z'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: var(--site-min-width);
  color: var(--navy-muted);
  background: var(--white);
  font: var(--font_8);
  font-family: "Space Grotesk", sans-serif;
  text-rendering: geometricPrecision;
}

a {
  color: var(--blue-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--navy);
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading,
.section-title,
.site-brand {
  margin: 0;
  color: var(--navy);
  font-family: "Space Grotesk", sans-serif;
}

h1,
.display-title,
.hero__title {
  font: var(--font_2);
}

h2,
.section-title {
  font: var(--font_4);
}

h3 {
  font: var(--font_5);
}

h4 {
  font: var(--font_6);
}

p,
ul,
ol,
dl,
blockquote {
  margin: 0;
}

.site-shell,
.page,
.page-shell {
  min-width: var(--site-min-width);
}

.container,
.section__inner,
.site-width,
.content-width,
.header__inner,
.footer__inner,
.hero__inner {
  width: var(--site-width);
  max-width: 1760px;
  min-width: var(--site-min-width);
  margin: 0 auto;
}

.header,
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header__inner,
.site-header__inner {
  display: grid;
  grid-template-columns: var(--header-grid);
  align-items: center;
  min-height: 104px;
  gap: 0;
}

.header__brand,
.site-header__brand {
  justify-self: start;
}

.header__nav,
.site-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
}

.header__actions,
.site-header__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.header__nav a,
.site-nav a,
.footer__nav a,
.site-footer__nav a {
  color: var(--blue-link);
  font: var(--font_1);
  text-decoration: none;
}

.header__nav a:hover,
.site-nav a:hover,
.footer__nav a:hover,
.site-footer__nav a:hover {
  color: var(--navy);
}

main section,
.page-section {
  position: relative;
}

.hero,
.hero-section {
  background:
    linear-gradient(
      90deg,
      var(--peach) 0%,
      rgba(249, 197, 180, 0.5) 32%,
      var(--blue-tint) 100%
    ),
    var(--white);
}

.hero__inner,
.hero-section__inner {
  display: grid;
  grid-template-columns: var(--hero-columns);
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 72px 0 88px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-right: 48px;
}

.hero__eyebrow {
  color: var(--navy-soft);
  font: var(--font_9);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero__text,
.section-copy,
.text-body {
  color: var(--navy-muted);
  font: var(--font_8);
}

.hero__media {
  display: flex;
  justify-content: flex-end;
}

.hero__image,
img.hero-image,
.hero figure img {
  width: var(--hero-image-width);
  height: var(--hero-image-height);
  object-fit: cover;
  border-radius: var(--hero-image-radius);
  box-shadow: var(--hero-image-shadow);
}

.section,
.content-section {
  padding: 88px 0;
}

.section--white,
.section--stories,
.section--hero,
.stories {
  background: var(--white);
}

.section--blue,
.section--how-it-works,
.section--faq,
.site-footer,
.footer {
  background: var(--blue);
}

.section--wave-top::before,
.section--faq::before,
.section--how-it-works::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 auto;
  height: 120px;
  background-image: var(--divider-top-image);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top center;
  transform: translateY(-100%);
  pointer-events: none;
}

.section--wave-bottom::after,
.section--faq::after {
  content: "";
  display: block;
  position: absolute;
  inset: auto 0 0;
  height: 120px;
  background-image: var(--divider-bottom-image);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: bottom center;
  transform: translateY(100%);
  pointer-events: none;
}

.section__inner--wide,
.how-it-works .section__inner,
.faq .section__inner {
  width: calc(100% - 180px);
  min-width: var(--site-min-width);
  max-width: 1740px;
}

.how-it-works__layout,
.faq__layout,
.two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
}

.button,
.btn,
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font: var(--font_1);
  text-decoration: none;
}

.button:hover,
.btn:hover,
.cta-button:hover {
  background: var(--navy);
  color: var(--white);
}

.button--ghost,
.btn--ghost {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}

.cards,
.testimonials__grid,
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.card,
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
}

.testimonial-card__photo,
.testimonial-card img,
img.testimonial-photo {
  width: var(--testimonial-photo-size);
  height: var(--testimonial-photo-size);
  object-fit: cover;
  border-radius: 50%;
}

.testimonial-card__quote,
blockquote {
  color: var(--navy);
  font: var(--font_8);
}

.testimonial-card__name,
.caption {
  color: var(--navy-soft);
  font: var(--font_10);
}

.faq__items,
.accordion {
  display: grid;
  gap: 16px;
}

.faq details,
.accordion details {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.68);
  overflow: hidden;
}

.faq summary,
.accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 28px;
  color: var(--navy);
  font: var(--font_6);
}

.faq summary::-webkit-details-marker,
.accordion summary::-webkit-details-marker {
  display: none;
}

.faq details > *:not(summary),
.accordion details > *:not(summary) {
  padding: 0 28px 24px;
}

.footer,
.site-footer {
  position: relative;
  padding: 88px 0;
}

.footer__inner,
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: 48px;
  align-items: start;
}

.footer__brand,
.site-footer__brand {
  color: var(--navy);
  font:
    700 42px/1.05 "Space Grotesk",
    sans-serif;
}

.footer__meta,
.site-footer__meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--navy);
}

.footer__nav,
.site-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  body,
  .site-shell,
  .page,
  .page-shell {
    min-width: 0;
  }

  .container,
  .section__inner,
  .site-width,
  .content-width,
  .header__inner,
  .footer__inner,
  .hero__inner,
  .section__inner--wide,
  .how-it-works .section__inner,
  .faq .section__inner {
    width: min(100% - 48px, 100%);
    min-width: 0;
  }

  .header__inner,
  .site-header__inner,
  .hero__inner,
  .hero-section__inner,
  .how-it-works__layout,
  .faq__layout,
  .two-column,
  .footer__inner,
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .header__inner,
  .site-header__inner {
    gap: 20px;
    padding: 20px 0;
  }

  .header__brand,
  .site-header__brand,
  .header__nav,
  .site-nav,
  .header__actions,
  .site-header__actions,
  .hero__media {
    justify-self: center;
    justify-content: center;
  }

  .header__nav,
  .site-nav {
    flex-wrap: wrap;
  }

  .hero__content {
    padding-right: 0;
  }

  .hero__image,
  img.hero-image,
  .hero figure img {
    width: min(392px, 100%);
    height: auto;
    aspect-ratio: 392 / 634;
  }

  .cards,
  .testimonials__grid,
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  :root {
    --section-padding-x: 24px;
  }

  .container,
  .section__inner,
  .site-width,
  .content-width,
  .header__inner,
  .footer__inner,
  .hero__inner,
  .section__inner--wide,
  .how-it-works .section__inner,
  .faq .section__inner {
    width: min(100% - 32px, 100%);
  }

  h1,
  .display-title,
  .hero__title {
    font-size: 48px;
    line-height: 1.08;
  }

  h2,
  .section-title {
    font-size: 28px;
    line-height: 1.2;
  }

  .cards,
  .testimonials__grid,
  .card-grid {
    grid-template-columns: 1fr;
  }

  .button,
  .btn,
  .cta-button {
    width: 100%;
  }

  .footer__brand,
  .site-footer__brand {
    font-size: 42px;
  }
}