/* Chrome for the Pricing page.
 *
 * The cards are the Background Effects picker's card, reused rather than
 * reinvented: white on the paper background, a 1px rule at 10% ink, 1.2rem
 * corners, and a head divided from the body by the same rule. Anything that
 * looked hand-picked here would drift from that page the first time either
 * one changed.
 *
 * Sized in rem so it follows the theme scale in base.css, like the blocks.
 */

.pricing {
  max-width: 96rem;
  margin: 0 auto;
  padding: 0 2rem 6.4rem;
}

.pricing__plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
  /* Both cards run to the height of the taller one. Pro carries nine
     features to Lite's four, and cards of different heights sitting on one
     line read as a mistake rather than as a difference in content. */
  align-items: stretch;
  grid-template-rows: auto 1fr;
}

/* Grid items floor at min-content, and the feature lines are long enough to
   push a column past its share of the row. */
.pricing__plans > * { min-width: 0; }

/* ===== A plan ===== */

.plan {
  display: flex;
  flex-direction: column;
  background: var(--eez-white);
  border: 1px solid rgba(52, 21, 57, 0.1);
  border-radius: 1.2rem;
  overflow: hidden;
}

/* Pro's head carries a trial line and Lite's does not, so left alone the two
   dividing rules sit 29px apart -- close enough to look like a mistake rather
   than a difference. Handing the rows to the parent lines the heads up
   whatever either one contains, with no height guessed at. */
@supports (grid-template-rows: subgrid) {
  .plan {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

.plan__head {
  padding: 2.4rem 2.4rem 2rem;
  border-bottom: 1px solid rgba(52, 21, 57, 0.1);
}

.plan__name {
  margin: 0;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 2.2rem;
  line-height: 1.2;
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
}

.plan__price {
  margin: 1.2rem 0 0;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1.1;
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
}

/* The cadence after the figure: "/ month" is not the figure. */
.plan__period {
  font-size: 1.7rem;
  font-weight: var(--font-heading-weight);
  opacity: 0.7;
}

.plan__trial {
  margin: 0.6rem 0 0;
  font-size: 1.4rem;
  line-height: 1.45;
  color: var(--eez-accent);
}

.plan__body {
  display: flex;
  flex-direction: column;
  /* Takes the slack where the flex fallback is in use. */
  flex: 1;
  padding: 2rem 2.4rem 2.4rem;
}

.plan__desc {
  margin: 0 0 1.8rem;
  font-size: 1.5rem;
  line-height: 1.6;
  opacity: 0.8;
}

.plan__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.plan__features li {
  display: grid;
  /* A fixed first column, so a feature that wraps aligns under its own text
     rather than back under the tick. */
  grid-template-columns: 1.8rem 1fr;
  gap: 0.8rem;
  font-size: 1.45rem;
  line-height: 1.5;
}

.plan__tick {
  /* Optical, not geometric: the tick sits better a shade below the cap line
     of the first word. */
  margin-top: 0.3rem;
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  color: var(--eez-accent);
}

/* ===== What sits under the pair ===== */

.pricing__footnote {
  max-width: 62rem;
  margin: 3.2rem auto 0;
  text-align: center;
  font-size: 1.45rem;
  line-height: 1.6;
  opacity: 0.75;
}

.pricing__cta {
  margin-top: 2.4rem;
  text-align: center;
}

/* The header's CTA takes margin-left:auto below 990px to hold the right-hand
   end of that row. Centred under the cards, that would shove it off to one
   side. */
.pricing__cta .site-header__cta {
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 749px) {
  .pricing {
    padding-bottom: 4.8rem;
  }

  /* Side by side, each card is too narrow for a nine-line feature list. */
  .pricing__plans {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 1.6rem;
  }

  /* Stacked, there is nothing to line up with, and two cards each claiming
     two rows of a two-row grid is not what we want. */
  .plan {
    display: flex;
    grid-row: auto;
  }

  .plan__price {
    font-size: 3rem;
  }
}