/* cost-comparison breakpoints, loaded after the shared ones. */

@media (max-width: 900px) {
  .cost-comparison { padding: 80px 0 87px; }
  .cost-comparison .section-intro h2 { max-width: 300px; }
  .cost-comparison .section-intro > p:last-of-type:not(.eyebrow):not(.eyebrow) { max-width: 352px; margin-top: 20px; font-size: 16px; line-height: 24px; }
  .comparison-grid { display: flex; max-width: none; flex-direction: column; gap: 20px; margin-top: 40px; padding-inline: 16px; }
  .comparison-card { width: 100%; padding: 24px; }
  /* The "One Subscription" tag sits fully inside the white card (client request,
     moved down from straddling the top edge): 24px in, 30px tall, then the design's
     32px gap to the logo -- 24 + 30 + 32 - 16 (logo margin) = 70px top padding. The
     card grows by the same 24px so nothing below runs into the pinned button. */
  .comparison-card--idris { order: 1; height: 700px; padding-top: 70px; }
  .comparison-card--traditional { order: 2; height: 617px; }
  .comparison-card h3 { font-size: 20px; line-height: 20px; }
  .comparison-card__brand-row { display: block; }
  .comparison-card__brand-row img { margin-top: 16px; }
  .comparison-card__brand-row span { position: absolute; top: 24px; left: 24px; font-size: 14px; line-height: 16px; }
  .comparison-price { margin-top: 35px; }
  .comparison-price strong { font-size: 40px; line-height: 40px; }
  .comparison-price--idris { margin-top: 50px; flex-wrap: wrap; }
  .comparison-price--idris b { font-size: 24px; }
  .comparison-price--idris span { margin-left: auto; }
  .comparison-note { margin-top: 27px; font-size: 16px; line-height: 24px; }
  .saving-callout { min-height: 87px; gap: 22px; margin-top: 27px; padding: 14px; }
  .saving-callout p { font-size: 16px; line-height: 24px; }
  .comparison-card__cta { right: 28px; bottom: 28px; left: 28px; }
  .cost-list { margin-top: 25px; }
  .cost-list div { min-height: 76px; }
  .cost-list dt, .cost-list dd { font-size: 16px; }
}