/* What you get (built from the original section#accounts). Only what the original markup can't express. */

/* Card art: the 3:2 hand-and-card photos (object-fit: cover) are now square chrome renders on a transparent canvas,
   contained in the same grey image box. Each render fills its canvas differently (the key reaches 85% of it, the bars
   66%), so each is scaled by its measured visible bounds to one optical size (~66% of the box height, 194px at 1440)
   and centred on its visible centre, the way the original's three photos share one identical framing. */
.section-accounts img.premiere-art { object-fit: contain; top: 6%; height: 88%; }
.section-accounts img.premiere-art[src$="ff4b1a12a88b0894.png"] { top: -2.4%; height: 101.9%; }
.section-accounts img.premiere-art[src$="8efb03cb05a0d0b4.png"] { top: 5.2%; height: 92.8%; }
.section-accounts img.premiere-art[src$="2c5c5863dd38f508.png"] { top: 8.3%; height: 82.2%; }

/* The longer Premier copy would leave one word alone on a last line (sub at phone width, a card text on laptops);
   carry two over, as the original's lines do. Body copy only, headings keep their breaks. */
.section-accounts p[class*="text-[#595959]"] { text-wrap: pretty; }

/* Bottom whitespace as the original: the 80px (48px mobile) padding plus the 24px gap that always rendered
   under the removed "Compare Accounts" toggle. */
.section-accounts > .desktop-view > .tab-transition > .design-content > div { padding-bottom: 104px; }
.section-accounts > .mobile-view > .tab-transition > .design-content > div { padding-bottom: 72px; }

/* The Premier copy is longer than the original's, so below ~1400px one description takes a third line. Keep the
   cards one height (as the original's are at these widths) with the buttons on a common baseline. */
.section-accounts [data-node-id="666:1471"] { align-items: stretch; }
.section-accounts [data-node-id="666:1471"] > div > div:last-child { flex-grow: 1; }
.section-accounts [data-node-id="666:1471"] > div > div:last-child > div:last-child { margin-top: auto; }

/* Buttons keep the original's label-hugging pills wherever "Apply For Access" + "How It Works" (298px) fit the card.
   Where they don't (the 320-357px tablet cards, and phone carousels under 410px where cards are 85vw), the pair
   fills the card with 10px side padding, the original's own narrow-card button rule (section-choose); the dark pill
   keeps its label width so it can never clip. */
@media (min-width: 768px) and (max-width: 1199px), (max-width: 409px) {
  .section-accounts [data-node-id="666:1471"] div:has(> .design-button) { width: 100%; }
  .section-accounts [data-node-id="666:1471"] .design-button { padding-left: 10px; padding-right: 10px; }
  .section-accounts [data-node-id="666:1471"] .design-button + .design-button { flex: 1 1 0%; min-width: 0; }
}
/* Under 360px even that can't hold "How It Works": stack the pair as full-width pills (the original's mobile
   full-width pill, as on its Compare Accounts toggle). */
@media (max-width: 359px) {
  .section-accounts [data-node-id="666:1471"] div:has(> .design-button) { flex-direction: column; }
  .section-accounts [data-node-id="666:1471"] .design-button,
  .section-accounts [data-node-id="666:1471"] .design-button + .design-button { flex: none; width: 100%; }
}