/* Layout for the desktop page pricing cards. Kept in its own file so the
   shared stylesheet is not widened for one page. The colour tokens are the
   ones the rest of the site already uses, so the cards follow the theme
   without introducing a second palette. The grid is centred and capped so it
   does not sprawl across a wide screen. */
/* The landing page centres its hero copy with an auto margin and centred text.
   The opening block here is the same idea, so the lead sits under the centred
   heading instead of hanging off the left edge. */
.desktop-lead {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
/*
 * The buttons and the download warning are one group, so the space above the
 * buttons matches the space between them and the warning.
 *
 * The gap property only separates siblings, and the buttons are the first child,
 * so nothing sat between the callout and the heading: 0px above against 12px
 * below. Padding-top is set to the same value as the gap rather than the gap
 * being moved onto the actions, because the top of the group is what needs to
 * move and the buttons are flush against the heading above them.
 */
.desktop-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  margin: 1rem 0 0.5rem;
  text-align: center;
}
/*
 * The two actions sit side by side so a customer who has not downloaded yet has
 * the reference in the same place as the button, rather than having to look for a
 * link further down the page.
 *
 * They are the same colour, so neither reads as the real action and the customer
 * has to guess which one to press. They are also the same width. A shared
 * min-width rather than equal grid columns, because sizing to a grid would have
 * also stretched the pair on a wide screen, and this keeps each button sized to
 * its own label plus a shared floor. The floor sits just above the download
 * button's own width of 16.01rem, so that button is unchanged and the shorter
 * Learn More label grows to meet it. nowrap keeps both labels on one line.
 */
.desktop-download-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.desktop-download-actions .cta-button {
  white-space: nowrap;
  min-width: 16.1rem;
}
/*
 * The version line is the first line of the callout rather than a note above it,
 * because it is a fact about the same file the callout is warning about.
 */
/*
 * The opening paragraph is centred and held to 800px, which is the same measure
 * the home page uses for its hero subtitle, so the two landing pages open the same
 * way. The margin is set explicitly because centring alone would run the text
 * across the full width of the card.
 *
 * An earlier version of this also constrained the heading above to 44rem so the
 * two lined up. Every other h1 on the site runs the full width of the card, so
 * that made this one page the only heading on the site in a different shape. The
 * heading is left alone now and the paragraph takes the shared measure.
 */
.centered-lead {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/*
 * The download warning follows the site's own callout standard, which is
 * feature-callout--plain on the pricing page: a one pixel border in the strong
 * border colour with no fill. The classes here were invented and matched nothing,
 * so the warning rendered as two loose paragraphs with no relationship to the
 * rest of the site.
 */
/*
 * The width is the section width, not a narrow measure. It was capped at 34rem,
 * which is a comfortable line length for reading and the wrong shape for a
 * warning: the callout sat in the middle of a full width section as a small
 * centred box, so it read as an aside rather than as something to notice before
 * running a file. A warning about where to download from should span the section
 * it guards. The line length inside it is still controlled by the measure on the
 * paragraph, not by the box.
 */
.download-source-warning,
.download-source-note {
  max-width: 52rem;
  width: 100%;
  margin: 0 auto;
}
.download-source-warning p,
.download-source-note p {
  color: var(--text-secondary);
  font-size: 0.88rem;
}
.download-source-note p + p {
  margin-top: 0.6rem;
}
/* The plan cards are the pricing page cards. The markup carries the pricing
   classes, so everything visual comes from style.css and nothing is restated
   here. Only three things differ and all three are in this block: the pricing
   container is hidden at wide viewports because the pricing page shows a
   comparison table there instead, these two cards sit side by side, and their
   hover is quieter so a card does not jump while a visitor is reading both
   prices. */
.desktop-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
  max-width: 52rem;
  margin: 1.5rem auto;
}
/* The shared card lifts 5px and doubles its shadow. With two cards side by side
   that reads as a call to action rather than as one of a pair, so the lift is
   removed and the shadow keeps its resting value. */
.desktop-plans .pricing-card:hover {
  transform: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
/* The card is a flex column, so this pushes the footer to the bottom and the two
   buy buttons end on the same line even though the text above them differs. */
.desktop-plans .card-footer {
  margin-top: auto;
}
/*
 * The feature list, and it deliberately is not the pricing page chips.
 *
 * Measured on this card, the chips came out at 11px of text, 314px wide each for a
 * dozen characters, and six of them stacked took 225px of the card. That is the
 * chip style from a 480px card with six short labels, dropped into a 404px card
 * with longer ones: unreadable text, most of the width wasted on background, and
 * half the card given to a list of six words. Two columns of plain text at the
 * list's own size uses a third of the height and reads at 14px.
 */
/*
 * The feature list was removed rather than restyled. Both plans carry the same six
 * modules, the paragraph above already says so, and printing the same six words
 * twice, once per card, gave a reader nothing to compare. The list cost 111px of a
 * 417px card and put a marker in front of every word, and the plan that looked
 * fuller was not fuller.
 */
/*
 * The spacing, set from measured numbers rather than taste.
 *
 * Inherited as it stood, the card put 32px at the top, 24px at the sides, 24px
 * under the header rule and then the note sat 42px below that rule, because the
 * header carries its own 24px bottom padding and the note added 17.6px of margin
 * on top of it. The note then touched the button with no space at all, so the two
 * read as one block and the button looked like part of the sentence. The card was
 * mostly gaps with a price at the top.
 *
 * Now: the note clears the rule by a fixed 28px, which is the same rhythm as the
 * 28px side padding, and the button is held off the note by 24px. The footer
 * inherits a 24px top margin from the pricing page which is doubled here, so it
 * is removed and replaced by the one gap that means something. Bottom padding
 * matches the top at 32px so the card is square, and the price keeps the header
 * padding it inherits so the rule under it stays put.
 */
.desktop-plans .pricing-card {
  padding: 2rem 1.75rem 2rem;
  /* The content is centred as a block rather than pinned to the top, so the price
     sits at the optical centre of the card and the button below it is balanced
     against the space above. With the footer on auto the button was already at the
     bottom; the flex distribution puts the group in the middle. */
  justify-content: center;
}
.desktop-plans .card-header {
  margin-bottom: 0;
  padding-bottom: 1.5rem;
}
.desktop-plan-note {
  margin: 1.75rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: center;
  color: var(--muted-text);
}
.desktop-plans .card-footer {
  margin-top: 1.5rem;
}
@media (max-width: 40rem) {
  .desktop-plans {
    grid-template-columns: 1fr;
    max-width: 26rem;
  }
}