/* Pricing page: its own rules only. The header, the footer, the grounds,
   the tiers, the type roles, the buttons, the columns of tiles, the
   reading row and the accordion come from /styles.css; nothing here
   restyles them, and the page adds no color of its own.

   The page answers one question first: what each plan costs and what it
   gives. So the four app plans stand as four white cards side by side,
   each with its price set large, its profile counts on hairlines and its
   support line at the foot, and the foot lines of the four cards level
   with each other. What every plan shares follows on the strip, the
   compute plans that are still to come on the dark band, then three
   short answers.

   The page's own rules use no amber. On this site amber means an agent
   is waiting for you, and nothing on this page is. The exception is the
   mark's amber facet in the header and the footer, which stands for the
   pane where an agent waits. */

/* The hero: the page's name, the launch line and the one paragraph that
   answers it. Short, so the plans are close below it. The shared
   stylesheet draws a field of dots behind every page's first section and
   veils it where the text stands; here the veil is centered on this hero's
   own text block. Under 1024px the text fills the whole width, so the
   veil does too. */

.pr-hero {
  --field-veil-at: 50% 50%;
  --field-veil-size: 120% 100%;
  padding-block: clamp(48px, 6vw, 96px) clamp(40px, 4vw, 56px);
}

@media (min-width: 1024px) {
  .pr-hero {
    --field-veil-at: 40% 48%;
    --field-veil-size: 95% 58%;
  }
}

.pr-hero-grid {
  display: grid;
  gap: var(--s4);
}

.pr-hero h1 {
  font-size: var(--fs-h1);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.pr-hero .lead {
  margin-top: var(--s2);
}

/* The launch line: the same form as the home page's, a small label in
   monospace and the date in the light ink */
.pr-when {
  color: var(--night-ink);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

.pr-when-label {
  margin-right: 0.5em;
  color: var(--night-quiet);
  font-family: var(--mono);
  font-size: var(--fs-tag);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pr-when time {
  font-weight: 600;
  white-space: nowrap;
}

/* On wide screens the name and the launch line take the left column and
   the paragraph the right, on the split the reading rows below use, so
   the left edge holds from top to bottom. */
@media (min-width: 1024px) {
  .pr-hero-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--split-gap);
  }

  .pr-hero h1 {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .pr-when {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
  }

  .pr-hero .lead {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin-top: 0;
  }
}

/* The plans: the heading and the launch note over the cards, the two
   notes under them */

.pr-head > * + * {
  margin-top: var(--s4);
}

.pr-head > h2 {
  max-width: var(--measure-heading);
}

.pr-launch-note {
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.pr-plans {
  margin-top: var(--s7);
}

/* A card: the name, the price, the year, the counts, then the support
   line pushed to the foot, so the foot lines of a row of cards are
   level */
.pr-plan {
  display: flex;
  flex-direction: column;
}

.pr-plan > h3 {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.pr-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4em;
}

.pr-amount {
  color: var(--ink);
  font-size: var(--fs-statement);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.pr-per,
.pr-year {
  color: var(--quiet);
  font-size: var(--fs-meta);
  line-height: 1.45;
}

.cols > .pr-plan > .pr-year {
  margin-top: var(--s1);
}

/* The two counts on hairlines: the name of the count, and the figure at
   the row's end in the figure face */
.pr-caps {
  margin-block: var(--s4) var(--s5);
  border-top: 1px solid var(--line-strong);
}

.pr-caps > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}

.pr-caps dt {
  color: var(--ink);
  font-size: var(--fs-meta);
  line-height: 1.4;
}

.pr-caps dd {
  flex: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.cols > .pr-plan > .pr-help {
  margin-top: auto;
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.45;
}

.pr-notes {
  margin-top: var(--s5);
}

.pr-notes > p {
  color: var(--quiet);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

.pr-notes > p + p {
  margin-top: var(--s2);
}

/* In every plan: a lead keeps the lead's measure inside the reading row,
   where the shared rule for the row's paragraphs would widen it */

.reading-body > .lead {
  max-width: var(--measure-lead);
}

.pr-more > li {
  font-size: var(--fs-meta);
}

/* The compute plans, on the dark band: the heading on the left from
   1024px, the four names as a row on hairlines on the right */

.pr-split {
  display: grid;
  gap: var(--s5);
}

.pr-split > h2 {
  max-width: 18ch;
}

@media (min-width: 1024px) {
  .pr-split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--split-gap);
    align-items: baseline;
  }
}

.pr-compute-body > * + * {
  margin-top: var(--s5);
}

.pr-compute {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--night-line-strong);
}

.pr-compute > li {
  padding-block: var(--s3);
  border-bottom: 1px solid var(--night-line);
  color: var(--night-ink);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 720px) {
  .pr-compute {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--s5);
  }
}

/* Printed or saved as a PDF, the page should read on white paper.
   Browsers drop backgrounds in print, which would leave the dark parts'
   light text on white; these parts print in ink instead. */
@media print {
  .pr-hero,
  #compute {
    background: none;
  }

  .pr-hero h1,
  .pr-hero .lead,
  .pr-when,
  .pr-when-label,
  #compute h2,
  #compute .lead,
  #compute .note,
  .pr-compute > li {
    color: var(--ink);
  }

  .pr-compute,
  .pr-compute > li {
    border-color: var(--line-strong);
  }
}