/*
 * The home page, and only the home page: a dark hero with the app on a phone,
 * the problem in three lines, the three steps, and the way out.
 * Everything shared with privacy, support and 404 lives in base.css.
 */

/* ---------- The hero ---------- */

/*
 * Near-black with the app's sunset glowing through it, the same ramp as the
 * App Store pictures: blue high on the left, orange across the middle, coral
 * low on the right. Kept dim on purpose, so white text stays well over 4.5:1.
 */
.hero {
  padding-block: var(--s-section) var(--section-gap);
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(50, 93, 163, 0.55), transparent 58%),
    radial-gradient(95% 75% at 88% 26%, rgba(247, 150, 60, 0.28), transparent 60%),
    radial-gradient(110% 95% at 72% 100%, rgba(253, 100, 115, 0.4), transparent 64%),
    var(--camera-dock);
  color: var(--surface);
}

.hero__inner {
  display: grid;
  gap: var(--s-section);
  justify-items: center;
  text-align: center;
}

.hero .h1 {
  color: var(--surface);
}

/* On near-black the app's own coral is 5.9:1, so it needs no darkening here. */
.hero .h1 em {
  color: var(--primary);
}

.hero__lead {
  max-width: 34rem;
  margin-top: var(--s-lg);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--on-dark-2);
  text-wrap: pretty;
}

@media (min-width: 900px) {
  .hero {
    padding-block: var(--section-gap);
  }

  .hero__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--s-section) 64px;
    justify-items: start;
    text-align: left;
  }

  .hero__lead {
    font-size: 1.25rem;
  }
}

/* ---------- The call to action, in the hero and at the foot ---------- */

.cta {
  margin-top: var(--s-xxl);
}

.cta__note {
  margin-top: var(--s-md);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2-web);
}

.hero .cta__note {
  color: var(--on-dark-2);
}

/* ---------- The phone ---------- */

/*
 * A screenshot in a thin dark bezel. The picture element carries the frame, so
 * the rounded screen inside it can keep its own corners.
 */
.phone {
  display: block;
  width: min(62vw, 300px);
  padding: 5px;
  border-radius: 34px;
  background: linear-gradient(160deg, #40404e, #1a1a22 55%, #2c2c36);
  box-shadow: var(--shadow-phone);
}

.phone__screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 29px;
}

@media (min-width: 900px) {
  .hero__phone .phone {
    width: 330px;
  }
}

/* ---------- The problem ---------- */

.problem__inner {
  max-width: 46rem;
}

.problem__list {
  margin-top: var(--s-xxl);
  display: grid;
  gap: var(--s-md);
  font-size: 1.125rem;
  line-height: 1.5;
  list-style: none;
}

/* A coral dash instead of a bullet: this is a list of complaints, not of features. */
.problem__list li {
  position: relative;
  padding-left: var(--s-xxl);
  text-wrap: pretty;
}

.problem__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
}

.problem__turn {
  margin-top: var(--s-section);
  font-family: var(--font-tagline);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-tagline);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---------- How it works ---------- */

.steps__head {
  max-width: 40rem;
  margin-bottom: var(--s-section);
}

.steps__list {
  display: grid;
  gap: var(--s-section);
  list-style: none;
}

/*
 * On a phone the three screenshots would be most of the page, so there they sit
 * small beside their text. From the tablet up they stand above it, in a row.
 */
.step {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-xl);
}

.step .phone--small {
  width: 100%;
  max-width: 150px;
  padding: 3px;
  border-radius: 20px;
}

.step .phone--small .phone__screen {
  border-radius: 17px;
}

.step__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: var(--s-md);
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
}

.step h3 {
  margin-bottom: var(--s-sm);
}

.step__text p:last-child {
  color: var(--ink-2-web);
  line-height: 1.55;
  text-wrap: pretty;
}

@media (min-width: 760px) {
  .steps__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-section);
  }

  /*
   * The three steps stretch to the tallest of them. Without align-content the
   * spare height is shared out between the screenshot and the text, so a step
   * with one line less would sit its heading higher than its neighbours.
   */
  .step {
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
    gap: var(--s-xl);
    justify-items: center;
    text-align: center;
  }

  .step .phone--small {
    max-width: 260px;
    padding: 5px;
    border-radius: 30px;
  }

  .step .phone--small .phone__screen {
    border-radius: 25px;
  }

  .step__n {
    margin-inline: auto;
  }
}

/* ---------- The promise ---------- */

.promise {
  background: var(--primary-subtle);
  padding-block: var(--s-section);
  margin-block: calc(var(--section-gap) / 2);
}

.promise__list {
  display: grid;
  gap: var(--s-sm);
  list-style: none;
  text-align: center;
}

.promise__list li {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}

/*
 * Side by side once they fit on one line, with a coral dot between them. Below
 * that they stack, because a dot at the start of a wrapped line reads as a bullet.
 */
@media (min-width: 900px) {
  .promise__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-md) var(--s-section);
  }

  .promise__list li + li {
    position: relative;
  }

  .promise__list li + li::before {
    content: '';
    position: absolute;
    left: calc(var(--s-section) / -2);
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: var(--r-full);
    background: var(--primary);
  }
}

/* ---------- Getting the app ---------- */

.get__inner {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}