/* pixelategroup.com/guides only. Loaded after the site stylesheet by guide pages
   and never by any other page, so the website's own look is untouched. Written
   from design-qa-gate's 24 Sep 2026 MATRIX on the first launch build. */

/* One reading column: prose, the short answer and tables share the centred
   axis the section headings already use. Prose was stranded at the left
   edge at 1920 and ran 66 to 85 characters a line (M3, H5). */
.legal { max-width: 40rem; margin-inline: auto; }
.section-head--mid { max-width: 46rem; }
/* .legal p would otherwise set the answer in the secondary ink (a11y-gate, 24 Sep 2026). */
.legal p.guide-answer { font-size: clamp(1.08rem, 1.6vw, 1.2rem); line-height: 1.6; color: var(--ink); }
.table-caption { max-width: 46rem; margin: 0 auto .6rem; color: var(--ink-2); font-size: .95rem; text-align: left; }
.section .table-wrap { max-width: 46rem; margin-inline: auto; }
.nowrap { white-space: nowrap; }

/* Buttons first, then the fine print, in the markup itself, so the call to
   action sits in the first phone screen (design-qa H2) and the focus order
   matches what is seen, which a CSS reorder would not (WCAG 2.4.3). */
.hero--wide .hero__aside .hero__cta { margin-top: 0; }
.hero--wide .hero__aside .hero__fine { margin-top: 1.25rem; }

/* Five steps in one row gave about 22 characters a line at 1920 (M2). */
@media (min-width: 75rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A card whose title is its link says so on hover and focus (M1), and its
   overlay keeps the card's radius (N2). */
.card--link h3 a::after { border-radius: var(--r-lg); }
/* No lift: the site's reveal rule (.js [data-reveal].in) pins transform, and a
   hover that does not move needs no reduced-motion exception. */
.card--link { transition: box-shadow var(--mid) var(--ease), border-color var(--mid) var(--ease); }
.card--link:hover { box-shadow: var(--lift-2); border-color: var(--rule-2); }
.card--link:focus-within { outline: 3px solid var(--action-ring); outline-offset: 3px; }

@media (max-width: 48rem) {
  /* Every headline part on one line on a phone: at the site's 7.6vw a
     25-character part overflowed a 375px screen by up to 10px (B1). The
     1.4rem floor keeps 7vw in force down to 320 (a11y-gate reflow check). */
  .hero--wide h1 { font-size: clamp(1.4rem, 7vw, 3.07rem); }
}

@media (prefers-reduced-motion: reduce) {
  .card--link { transition: none; }
}