/* Pricing: the home page's tokens, nav, rows and footer (styles.css), with the plans as the lime dot on black. */

/* The intro, on the lime */
.pr-hero { padding-bottom: 104px; }
.pr-intro { padding-top: 120px; }
.pr-label { font-size: 15px; color: rgba(0, 0, 0, .6); letter-spacing: -0.005em; }
.pr-intro h1 { margin-top: 18px; max-width: 980px; font-size: 96px; font-weight: 400; line-height: .96; letter-spacing: -0.045em; }
.pr-intro .pr-lede { margin-top: 30px; max-width: 640px; font-size: 22px; line-height: 1.35; letter-spacing: -0.01em; }
.pr-cardback { margin-top: 36px; font-size: 15px; color: rgba(0, 0, 0, .6); letter-spacing: -0.005em; }
.links a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }

/* Plus and the packs */
.pr-plans { padding: 104px 0 96px; }
.pr-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.pr-plus { background: var(--lime); color: var(--black); border-radius: 28px; padding: 36px 36px 40px; }
.pr-best { display: inline-block; font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--black); color: var(--lime); }
.pr-plus h2 { margin-top: 28px; font-size: 40px; font-weight: 400; letter-spacing: -0.03em; }
.pr-price { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pr-price [data-price] { font-size: 112px; line-height: .9; letter-spacing: -0.05em; }
.pr-per { font-size: 19px; }
.pr-perks { margin-top: 36px; list-style: none; border-top: 1px solid rgba(0, 0, 0, .18); }
.pr-perks li { position: relative; padding-block: 16px; padding-inline: 26px 0; border-bottom: 1px solid rgba(0, 0, 0, .18); font-size: 19px; letter-spacing: -0.01em; }
/* each perk ends its line on the full stop, as the dot */
.pr-perks li::before { content: ''; position: absolute; inset-inline-start: 2px; top: 50%; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: var(--black); }

.pr-packs h2, .pr-buys h2, .pr-faq h2 { font-size: 64px; font-weight: 400; line-height: 1.04; letter-spacing: -0.025em; }
.pr-sub { margin-top: 16px; font-size: 21px; line-height: 1.4; color: var(--grey); max-width: 680px; }
.pr-pack-list { margin-top: 44px; list-style: none; border-top: 1px solid var(--bubble); }
.pr-pack { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 120px; align-items: baseline; gap: 24px; padding: 26px 0 28px; border-bottom: 1px solid var(--bubble); }
.pr-size { font-size: 40px; letter-spacing: -0.03em; }
.pr-size small { font-size: 19px; letter-spacing: -0.01em; color: var(--grey); }
.pr-cost { font-size: 40px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pr-save { justify-self: end; font-size: 15px; color: var(--lime); }
.pr-flag { position: absolute; top: -13px; inset-inline-start: 0; font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--lime); color: var(--black); }
.pr-pack-top { padding-top: 34px; }
.pr-tax { margin-top: 20px; font-size: 15px; color: var(--grey); }

/* What credits buy: the home page's rows, two columns */
.pr-buys { padding: 88px 0 96px; border-top: 1px solid var(--bubble); }
.pr-table { margin-top: 56px; }
.pr-table .thead, .pr-table .row { grid-template-columns: minmax(0, 1fr) auto; }
.pr-table .thead span:last-child, .pr-credits { text-align: end; }
.pr-table .row { padding: 26px 0 30px; }
.pr-credits { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.pr-free { color: var(--lime); }

/* Questions */
.pr-faq { padding: 88px 0 110px; border-top: 1px solid var(--bubble); }
.pr-questions { margin-top: 48px; border-top: 1px solid var(--bubble); }
.pr-questions details { border-bottom: 1px solid var(--bubble); }
.pr-questions summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font-size: 26px; letter-spacing: -0.01em; }
.pr-questions summary::-webkit-details-marker { display: none; }
/* the dot opens into a long dot, as a yes does */
.pr-questions summary::after { content: ''; flex: none; width: 14px; height: 14px; border-radius: 7px; background: var(--lime); transition: width .35s cubic-bezier(.3, .75, .1, 1); }
.pr-questions details[open] summary::after { width: 34px; }
.pr-questions summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.pr-questions summary:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.pr-questions details p { max-width: 820px; padding: 0 0 30px; font-size: 21px; line-height: 1.4; color: var(--grey); }

/* The end, back on the lime */
.pr-end { padding: 120px 0 128px; }
.pr-end h2 { font-size: 132px; line-height: 1; letter-spacing: -0.05em; font-weight: 400; }
.pr-end .pr-lede { margin-top: 30px; font-size: 40px; letter-spacing: -0.025em; }

/* Side by side, the headline's capitals start on the card's top edge, not its line box (7px lower) */
@media (min-width: 1181px) { .pr-packs h2 { margin-top: -0.115em; } }
@media (max-width: 1180px) {
  .pr-intro h1 { font-size: 80px; }
  .pr-grid { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .pr-plus { max-width: 560px; }
}
@media (max-width: 760px) {
  .pr-hero { padding-bottom: 64px; }
  .pr-intro { padding-top: 64px; }
  .pr-intro h1 { font-size: 52px; }
  .pr-intro .pr-lede { font-size: 18px; margin-top: 22px; }
  .pr-plans { padding: 64px 0; }
  .pr-plus { padding: 28px 24px 30px; }
  .pr-price [data-price] { font-size: 84px; }
  .pr-packs h2, .pr-buys h2, .pr-faq h2 { font-size: 40px; }
  .pr-sub { font-size: 17px; }
  .pr-pack { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .pr-size, .pr-cost { font-size: 30px; }
  .pr-save { grid-column: 1 / -1; justify-self: start; }
  .pr-buys, .pr-faq { padding: 64px 0; }
  .pr-table .row { padding: 20px 0 22px; }
  .pr-table .job, .pr-credits { font-size: 19px; line-height: 1.25; }
  .pr-questions summary { font-size: 19px; padding: 22px 0; }
  .pr-questions details p { padding-inline-end: 0; font-size: 17px; }
  .pr-end { padding: 72px 0 80px; }
  .pr-end h2 { font-size: 64px; }
  .pr-end .pr-lede { font-size: 24px; }
}