/*
 * Fixes on top of Taylor's prototype (smb-homepage-proto), from QA on
 * 2026-10-23 (Abhishek's sheet, IDs below). Loaded after the prototype's own
 * CSS by scripts/home-beta/import.mjs, so a re-import keeps them. If Taylor
 * fixes one of these in the prototype, delete the rule here.
 */

/* UI-01: on a small phone with Products expanded, the open menu is taller than
   the screen and couldn't scroll, so Contact and Log in were unreachable. */
@media (max-width: 1000px) {
  .site-nav { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}

/* UI-02: Terms of Service / Privacy Policy links (added to the footer by the import). */
.footer-legal { display: inline-flex; gap: 18px; margin-left: 18px; }
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
  .footer-legal { display: flex; margin: 10px 0 0; }
}

/* UI-04: the two full-width sections (buyer system, stories) gave their content
   1280px while every other section's content is 1152px, so their left edge sat
   64px further left on desktop. */
.system > *, .stories > * { max-width: calc(var(--max) - 2 * var(--pad)); }
/* Same for "Other tools solve one step": a full-width two-column grid, so its
   copy started at the page padding (64px) instead of 144px. Pad it in to the
   1280px column; the background stays full width. The narrower column would
   squeeze the comparison table under its 720px minimum, so the copy column and
   gap give up a little width to keep the table whole down to 1280px. */
.stack-compare { padding-inline: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); }
@media (min-width: 1001px) {
  .stack-compare { grid-template-columns: minmax(300px, .65fr) minmax(640px, 1.35fr); gap: clamp(48px, 4.5vw, 72px); }
}

/* UI-07: testimonial cards were a fixed 350px tall with the author pinned to the
   bottom, leaving one-line quotes mostly empty. Without the fixed height, each
   row is as tall as its longest quote: cards in a row still match, the author
   still sits at the bottom, and short-quote rows shrink. */
.story-row article { min-height: 0; }
.story-row footer { padding-top: 28px; }

/* UI-06 / UI-10: the break after the live-help cards (and, on phones, after the
   last product scene) was the biggest on the page: 374px on desktop against
   230-300px between the product scenes, 220-280px on a phone against ~160px.
   Trim the padding on both sides of those two breaks only. */
.coaching { padding-bottom: clamp(80px, 9vw, 130px); }
.system { padding-top: clamp(80px, 9vw, 130px); }
@media (max-width: 640px) {
  .product-scene:last-child { padding-bottom: 40px; }
  .coaching { padding-top: 40px; }
}

/* UI-09: on a phone the homepage hero was a fixed 820px with its content
   centred, leaving ~110px of blank space under the header. */
@media (max-width: 640px) {
  .hero { min-height: 720px; padding-top: 96px; }
}

/* UI-05: product pages started their hero 94px below the header on a phone. */
@media (max-width: 640px) {
  .page-hero { padding-top: 48px; }
}