/* assets/css/pricing.css
 * Layout for the Pricing page. The plan card itself is the shared .plan
 * component from components.css; everything here is page composition.
 */

/* ---- Page head ------------------------------------------------------ */

.pricing-hero {
  display: flex;
  align-items: center;
  min-height: var(--hero-h);
  padding: 40px 0;
  background: var(--band);
}

.pricing-hero > .container {
  width: 100%;
  max-width: var(--hero-w);
}

  /* PROPORTIONAL, NOT FIXED. At a fixed 726px the artwork kept its full size
     while the narrower band took every pixel out of the copy. 1.16fr is the
     ratio the two columns already had at 1460, so the balance is unchanged and
     both simply scale. */
.pricing-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr);
  gap: 60px;
  align-items: center;
}

.pricing-hero__title {
  /* FACE AND WEIGHT STATED, NOT INHERITED.
     These relied on the global `h1` rule for bold. That holds while the hero
     is an <h1> on a page that loaded base.css in the usual order — and stops
     holding the moment one is rendered from a React page, wrapped in another
     element, or reached with a different stylesheet order. A hero headline
     should not depend on which tag it happens to be in. */
  font-family: var(--font-heading);
  font-weight: 700;

  --hard-shadow-offset: 3px;
  margin-top: 8px;
  font-size: var(--hero);
  line-height: var(--hero-lh);
}

.pricing-hero__lead {
  max-width: 470px;
  margin-top: 18px;
}

.pricing-hero__art {
  width: 100%;
  height: auto;
}

/* ---- Plans ---------------------------------------------------------- */

.pricing-plans {
  padding-top: 90px;
}

.pricing-plans__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;

  /* WAS align-items: start, which is why the three cards were three different
     heights — each one sized to its own copy, so a two-line tagline made
     Campus taller than Starter.

     stretch makes every card the height of the tallest, and because .plan is a
     column flex with .plan__body on flex: 1, the extra height lands in the
     light half where the button already sits at margin-top: auto. So the
     bottoms line up as well as the tops.

     The featured card keeps its -18px lift, so it now stands proud at both
     edges rather than just the top. */
  align-items: stretch;
}

.pricing-plans__note {
  margin-top: 28px;
  text-align: center;
  color: var(--ink-soft);
}

/* ---- Comparison table -----------------------------------------------
 * A real <table>: the content is a feature matrix, so screen readers get
 * row and column headers instead of a grid of unlabelled ticks.
 */

.compare {
  padding-top: 120px;
  /* The table is wider than a phone and scrolls inside .compare__scroll.
     Without this the scroll container's content still widened the document,
     giving the whole page a horizontal scrollbar on mobile. */
  overflow: hidden;
}

.compare__scroll {
  margin-top: 56px;
  overflow-x: auto;
}

.cmp {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0 4px;
  text-align: left;
}

.cmp thead th {
  padding: 0 16px 20px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--h6);
  line-height: 30px;
  text-align: center;
  vertical-align: bottom;
}

.cmp thead th span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body);
  line-height: 22px;
  color: var(--ink-soft);
}

.cmp__group th {
  padding: 15px 20px;
  border-radius: var(--radius);
  background: var(--forest);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--h6);
  line-height: 30px;
}

.cmp tbody tr:not(.cmp__group) th {
  width: 40%;
  padding: 15px 20px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--lead);
  line-height: 22px;
}

/* Striping is set on the row in markup rather than with nth-of-type, so it
   restarts inside each group instead of being thrown off by the group
   header rows. */
.cmp__row--alt th,
.cmp__row--alt td {
  background: var(--paper);
}

.cmp tbody tr:not(.cmp__group) th {
  border-radius: var(--radius) 0 0 var(--radius);
}

.cmp__cell {
  padding: 15px 16px;
  text-align: center;
  vertical-align: middle;
}

.cmp tbody tr td:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.cmp__yes {
  display: inline-block;
  width: 24px;
  height: auto;
}

.cmp__no {
  display: inline-block;
  color: var(--ink-soft);
  font-size: 20px;
  opacity: 0.55;
}

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 1340px) {
  .pricing-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  }

@media (max-width: 1100px) {
  .pricing-hero {
    padding: 56px 0 52px;
  }

  .pricing-hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  

  .pricing-hero__title .marker {
    display: none;
  }

  .pricing-hero__art {
    max-width: 560px;
  }

  .pricing-plans,
  .compare {
    padding-top: 72px;
  }

    }

@media (max-width: 860px) {
  .pricing-plans__grid {
    grid-template-columns: 1fr;
  }

  }

@media (max-width: 640px) {
  

  }
/* ---- The matrix ---------------------------------------------------------
 * Modules down, plans across — the arrangement the admin already uses for the
 * same data. Read down a column to see a plan, across a row to compare them.
 */

.c-matrix {
  margin-top: 46px;
  border-top: 1px solid var(--line);
}

/* Columns that line up with the cards above: .pricing-plans__grid is
   repeat(3, 1fr) at a 30px gap, so a fixed plan column here would sit at a
   different rhythm and the two halves would read as unrelated tables. */
.c-matrix__row {
  display: grid;
  grid-template-columns: 260px repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--body);
}

/* Somebody who has scrolled past the cards still needs to know which column is
   which. A matrix labelled only off-screen is a puzzle. */
.c-matrix__head {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--ink);
}

.c-matrix__row > span:not(:first-child) {
  display: flex;
  justify-content: center;
}

/* The site's own tick, smaller than in a feature list — in a column of
   thirteen rows the 26px version is a lot of ink. */
.c-matrix__yes {
  width: 20px;
  margin-top: 0;
}

/* An em dash, not an empty cell. A blank reads as "we forgot to fill this in";
   a dash reads as an answer. */
.c-matrix__no {
  color: var(--ink-soft);
  opacity: 0.45;
}

@media (max-width: 860px) {
  .c-matrix__row {
    grid-template-columns: minmax(0, 1fr) repeat(3, 56px);
    gap: 12px;
    font-size: var(--small);
  }
  }

/* The line under the matrix. Centred and narrow, because it is a footnote to
   the whole comparison rather than to any one column. */
.c-plan-foot {
  max-width: 640px;
  margin: 34px auto 0;
  text-align: center;
}