/* The public pricing page. Loaded after pay.css, which already carries the
   cards, the ticks and the recommended pill, so everything below is the part
   the pay step has no use for: the marketing bar, the two group labels, five
   columns instead of three, and the questions under them. Colour comes from
   the tokens in platform.css and nothing here invents one. See DESIGN.md. */

/* ------------------------------------------------------------- the bar */
/* The app bar and the marketing bar are different bars, and this page wears
   the marketing one because somebody reading prices has not arrived in the
   funnel yet. `.nav-site` is the only hook: every rule below is scoped to it
   so the funnel's own bar, which shares these class names, is untouched. */
.nav-site .nav-inner { height: 62px; }
.nav-site .wordmark img { height: 42px; }
.nav-site .nav-links { gap: 30px; font-size: 12px; letter-spacing: .01em; }
.nav-site .nav-links a { padding: 4px 0; }
/* platform.css marks the current app section with a pale chip, which is the
   app spine's language; on a site bar the mark is the 2px rule the rest of
   the product underlines a selection with. */
.nav-site .nav-links a[aria-current] {
  background: transparent;
  margin-right: 0;
  border-bottom-color: var(--blue);
}
.nav-site .nav-do { display: flex; align-items: center; gap: 20px; margin: 0; }
.nav-site .nav-sign {
  font-size: 12px; letter-spacing: .01em;
  color: var(--muted-dark); text-decoration: none; white-space: nowrap;
}
.nav-site .nav-sign:hover { color: var(--ink-inv); }
.nav-site .pill-small { padding: 7px 16px; font-size: 14px; }
@media (min-width: 1100px) {
  .nav-site .nav-inner { height: 66px; }
}
@media (max-width: 833px) {
  .nav-site .nav-links { display: none; }
}

/* ------------------------------------------------------------ the page */
/* `.wrap` is the site's 760px column and five columns are not that page, so
   the wide measure takes a name of its own, the way the pay step's does. */
.pricing-wrap { max-width: 1360px; margin: 0 auto; padding: 48px var(--pad) 72px; }

/* Which half of the ladder is which, said once above the row rather than by a
   switch: this page is read, not chosen from. The labels sit on the same five
   columns the cards do, so each one spans exactly its own plans, and they are
   `aria-hidden` because a rule drawn across a heading is a picture. */
.groups {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px; margin-bottom: 30px;
}
.groups p {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-light);
}
.groups p::after { content: ""; flex: 1 1 auto; height: 0; border-top: 1px solid var(--hair); }
/* The line of copy under each label is the second row of the same flex line:
   the rule keeps its place beside the label, the sentence takes the width. */
.groups small {
  order: 1; flex: 1 0 100%;
  font-size: 13px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--muted-light);
}
.groups .g-one { grid-column: 1 / 3; }
/* Membership is the raised column, so its label is drawn in the same blue the
   recommended pill is, and the two read as one thing. */
.groups .g-biz { grid-column: 3 / 4; color: var(--blue); }
.groups .g-team { grid-column: 4 / 6; }

/* ---------------------------------------------------------- the ladder */
/* The pay step shows three doors, then two; this page shows all five at once,
   so the grid is the one thing about the card row that changes. */
.plangrid-five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.pricing-wrap .plancard.is-rec { transform: translateY(-14px); }
.plan-who { margin: 0 0 14px; min-height: 36px; font-size: 14px; line-height: 1.4; color: var(--muted-light); }
.pricing-wrap .plan-name { margin: 0 0 3px; font-size: 18px; }
.pricing-wrap .plan-num { font-size: 32px; }
.pricing-wrap .plan-second { margin: 3px 0 14px; font-size: 12px; }

/* ------------------------------------------------------ the questions */
.faq {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 48px; margin-top: 56px; padding-top: 30px;
  border-top: 1px solid var(--hair);
}
.faq h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.faq p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted-light); }

@media (max-width: 900px) {
  .groups { display: none; }
  .plangrid-five { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pricing-wrap .plancard.is-rec { transform: none; }
  .plan-who { min-height: 0; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}