/* Site-wide small fixes, loaded after style.css from site/html.html.
   Keep this file short: one rule per defect, a comment naming the defect. */

/* Footer bottom strip. Three items sat in one flex row: the copyright, a long
   disclaimer sentence and the two legal links. The sentence wrapped onto its own
   line centred and upper-cased while the copyright stayed left, so the strip read
   as three misaligned fragments. Now: copyright left and links right on one line,
   the disclaimer underneath as a full-width sentence in normal case. */
.footer_copyright_outer { row-gap: 16px; }
.footer_copyright_outer .footer_copyright { text-align: left; order: 1; }
.footer_copyright_outer .footer_links { order: 2; }
.footer_copyright_outer .footer_disclaimer_line {
  flex: 0 0 100%; order: 3; text-align: left; text-transform: none;
  font-size: 13px; line-height: 140%; letter-spacing: -0.01em;
}
@media screen and (max-width: 768px) {
  .footer_copyright_outer .footer_copyright,
  .footer_copyright_outer .footer_disclaimer_line { text-align: center; }
}

/* /how-it-works opens with .ab_intro (a mid-page section on /about) instead of .first_bk, so its
   hero sat 16px under the fixed header. Same top clearance as .first_bk (180px, 120px on tablets
   and phones). The hero title is an h1 there now; .title_bk sets its size and weight, this its margin. */
.wrapper > .header + .ab_intro { padding-top: 180px; }
h1.title_bk { margin: 0; }
@media screen and (max-width: 1024px) {
  .wrapper > .header + .ab_intro { padding-top: 120px; }
}

/* Privacy Policy and Terms & Conditions in the footer strip read as links: hairline underline,
   lilac on hover, and a 44px tap height on phones (they were 14px-tall plain text). */
.footer_copyright_outer .footer_links a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.35); transition: color 0.25s, text-decoration-color 0.25s;
}
.footer_copyright_outer .footer_links a:hover { color: #8585e9; text-decoration-color: currentColor; }
@media screen and (max-width: 768px) {
  .footer_copyright_outer .footer_links { justify-content: center; }
  .footer_copyright_outer .footer_links a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* /about and /how-it-works on phones: one alignment for the section heads. On a desktop the full-width heads are
   centred and the heads that open a two-column block (intro, services, team) sit at the left of their column; on a
   phone every block is one column, so the two alternated down the page ("one centred, the next on the left" -- Nate,
   15 Sep). The rest of the site centres its heads on a phone, so these three follow. */
@media screen and (max-width: 768px) {
  .ab_intro_col_left, .ab_services_head_top, .ab_team_col_right { text-align: center; }
  .ab_intro_col_left .subbox, .ab_services_head_top .subbox, .ab_team_col_right .subbox { margin-left: auto; margin-right: auto; }
}

/* Card pictures drawn standing up. Some issuers publish their card art only as a vertical card
   (Wells Fargo One Key, 333x528). The catalog card, the card page, the Finder and the community
   card header drew it at its own shape, a tall picture that pushed the layout down. With
   bx-art-portrait (services/cards/art.py card_portrait) it keeps the landscape box of every other
   card and shows whole and upright at the box's height on the card background: never rotated,
   cropped or enlarged. */
.cc_cib_image img.bx-art-portrait,
.cr-face img.bx-art-portrait { display: block; width: 100%; height: auto; aspect-ratio: 1.586 / 1; object-fit: scale-down; background: #090C21; }
.cr_head_art img.bx-art-portrait { width: 120px; height: auto; aspect-ratio: 1.586 / 1; object-fit: scale-down; background: #090C21; }