/* After the wave: few elements, huge type, foam and abyss grounds. Radii: 24px, 999px, and the arch. */
.h-xl {
  font-weight: 700; /* big statements: Bold, sentence case */
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.035em;
}
.h-lg {
  font-weight: 500;
  font-size: clamp(36px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.h-md {
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.015em;
}
.lede {
  font-size: 20px;
  line-height: 28px;
  max-width: 34ch;
}
.small {
  font-size: 14px;
  line-height: 20px;
}
/* Numbers and captions: ExtraLight italic, as in the deck. */
.num {
  display: inline-block;
  min-width: 1.5em;
  font-weight: 200;
  font-style: italic;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
/* App screens are phone frames on a white square: clip them to the phone's own corners. */
.screen {
  clip-path: inset(0 round 13% / 6.2%);
}

/* Grounds */
[data-tone="light"].how,
[data-tone="light"].uses,
[data-tone="light"].study,
[data-tone="light"].groups,
[data-tone="light"].faq {
  background: var(--foam);
  color: var(--midnight);
}
.flow,
.foot {
  background: var(--abyss);
  color: var(--foam);
}
.pricing {
  background: var(--midnight);
  color: var(--foam);
}
.how,
.flow,
.uses,
.host,
.study,
.pricing,
.groups,
.faq {
  padding-block: calc(var(--s-900) * 1.5);
}

/* How it works: three arch windows, the barrel mouth as a frame. */
.how__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-400);
  margin-top: var(--s-800);
}
.arch {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--arch);
  background: var(--cobalt);
  overflow: hidden;
}
.arch img {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 66%;
  transform: translateX(-50%);
}
.how__steps .h-md {
  margin-top: var(--s-300);
}


/* Ask to be waived */
.flow__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-600);
  margin-top: var(--s-800);
  align-items: start;
}
.flow__row li:nth-child(2) {
  margin-top: var(--s-900);
}
.flow__row li:nth-child(3) {
  margin-top: calc(var(--s-900) * 2);
}
.flow__row img {
  width: min(100%, 320px);
  margin-inline: auto;
}
.flow__row p {
  margin-top: var(--s-300);
  text-align: center;
  color: var(--spray);
}
.flow__result {
  margin-top: var(--s-900);
  text-align: right;
}

/* Friends, family, events */
.uses__list {
  margin-top: var(--s-800);
}
.use {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-400);
  padding-block: var(--s-600);
  border-top: 1px solid var(--midnight-14);
}
.use {
  align-items: baseline;
}
.use p {
  max-width: 40ch;
  font-size: 22px;
  line-height: 32px;
  color: var(--midnight-78);
}
.use .textlink {
  margin-left: var(--s-75);
  font-weight: 500;
  color: var(--cobalt);
  white-space: nowrap;
}

/* Research */
.study__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-600);
  align-items: end;
}
.study .cite {
  margin-top: var(--s-300);
  font-size: 14px;
  line-height: 20px;
  font-weight: 200;
  font-style: italic;
  color: var(--midnight-78);
  max-width: 44ch;
}

/* Pricing: two lines, like a tide table. */
.pricing .lede {
  margin-top: var(--s-300);
  color: var(--spray);
}
.pricing .h-xl {
  max-width: 14em;
}
.plans {
  margin-top: var(--s-800);
}
.plan {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 4fr);
  gap: var(--s-300);
  align-items: baseline;
  padding-block: var(--s-500);
  border-top: 1px solid var(--spray-20);
}
.plan:last-child {
  border-bottom: 1px solid var(--spray-20);
}
.plan__price {
  font-size: 20px;
  line-height: 28px;
  color: var(--spray);
}
.plan__price .nw {
  white-space: nowrap;
}
.plan__price .amt {
  font-size: 30px;
  line-height: 36px;
  font-weight: 200;
  font-style: italic;
  color: var(--foam);
  font-variant-numeric: tabular-nums;
}
.plan__what {
  color: var(--spray);
}

/* FAQ */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s-600);
}
.faq__mail {
  margin-top: var(--s-300);
  color: var(--midnight-72);
}
.faq__mail a {
  color: var(--midnight);
  font-weight: 500;
}
.faq details {
  border-top: 1px solid var(--midnight-14);
}
.faq details:last-child {
  border-bottom: 1px solid var(--midnight-14);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-300);
  min-height: 64px;
  padding-block: var(--s-200);
  font-size: 20px;
  line-height: 28px;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 300ms var(--ease);
}
.faq details[open] summary::after {
  transform: translateY(3px) rotate(-135deg);
}
.faq details p {
  padding-bottom: var(--s-300);
  max-width: 56ch;
  color: var(--midnight-78);
}

/* Footer, after Vansita on footer.design: one centred line, the way to get the app, a quiet row of links,
   and the wordmark bleeding off the bottom edge in cobalt. */
.foot {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--s-900) * 1.5);
  background: radial-gradient(90% 60% at 50% 100%, rgba(21, 73, 197, 0.34), var(--abyss-0) 70%), var(--abyss);
}
.foot__inner {
  display: grid;
  justify-items: center;
  gap: var(--s-500);
  text-align: center;
}
.foot__title {
  font-weight: 700; /* campaign line: bold caps */
  text-transform: uppercase;
  font-size: clamp(56px, 8.4vw, 120px);
  line-height: 0.94;
  letter-spacing: -0.025em;
}
.get {
  display: grid;
  justify-items: center;
}
.get__qr {
  display: none;
  justify-items: center;
  gap: var(--s-100);
  margin: 0;
}
.get__qr img {
  width: 152px;
  height: 152px;
  padding: var(--s-100);
  border-radius: var(--r);
  background: #fff; /* QR codes scan best on white */
}
.get__qr figcaption {
  font-size: 14px;
  line-height: 20px;
  font-weight: 200;
  font-style: italic;
  color: var(--spray);
}
.not-iphone .get__qr {
  display: grid;
}
.not-iphone .get__badge {
  display: none;
}
.foot__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-50) var(--s-300);
  font-size: 15px;
  line-height: 20px;
}
.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--spray);
  text-decoration: none;
  transition: color 300ms var(--ease);
}
.foot__links a:hover {
  color: var(--foam);
}
.foot__mark {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--max);
  margin: var(--s-800) auto 0;
  height: clamp(90px, 18vw, 240px);
  overflow: hidden;
}
.foot__mark .logo {
  width: 100%;
  background: linear-gradient(180deg, var(--cobalt), rgba(21, 73, 197, 0.25));
}
.foot__copy {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 200;
  font-style: italic;
  color: var(--spray);
}

/* "Get waived" in the nav on a phone that isn't an iPhone: the QR in a sheet. */
.getqr {
  width: min(360px, calc(100% - 2 * var(--s-200)));
  padding: var(--s-500) var(--s-400) var(--s-400);
  border: 0;
  border-radius: 32px;
  background: var(--foam);
  color: var(--midnight);
  text-align: center;
  box-shadow: 0 30px 80px rgba(3, 10, 23, 0.5);
}
.getqr::backdrop {
  background: rgba(3, 10, 23, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.getqr[open] {
  display: grid;
  justify-items: center;
  gap: var(--s-200);
}
.getqr__close-form {
  position: absolute;
  top: var(--s-100);
  right: var(--s-100);
}
.getqr__close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--pill);
  background: var(--midnight-14);
  color: var(--midnight);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.getqr__mark {
  width: 40px;
  color: var(--cobalt);
}
.getqr__title {
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
}
.getqr img {
  width: 200px;
  height: 200px;
  padding: var(--s-100);
  border-radius: var(--r);
  background: #fff;
}
.getqr__link {
  font-size: 14px;
  color: var(--midnight-72);
}

@media (max-width: 900px) {
  .how__steps,
  .flow__row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .how__steps > li,
  .flow__row > li {
    scroll-snap-align: start;
  }
  .flow__row li:nth-child(n) {
    margin-top: 0;
  }
  .use,
  .study__grid,
  .faq__grid,
  .plan {
    grid-template-columns: minmax(0, 1fr);
  }
  .use {
    gap: var(--s-200);
  }
  .flow__result {
    text-align: left;
  }
  .how,
  .flow,
  .uses,
  .host,
  .study,
  .pricing,
  .groups,
  .faq {
    padding-block: var(--s-900);
  }
  .plan {
    gap: var(--s-100);
  }
}
@media (max-width: 640px) {
  .h-xl {
    font-size: 36px;
    line-height: 40px;
  }
  .lede,
  .use p {
    font-size: 18px;
    line-height: 28px;
  }
}