/*
 * Homepage V2 accessibility fixes (founder, 2026-10-24): WCAG AA contrast, heading order and touch-target size, without
 * changing the design. Loaded after the generated homepage.css (which stays byte-identical to the reference), so every
 * change is visible here in one place.
 */

/*
 * Contrast (P-84, founder 2026-10-24): the reference blue #3573EA gives white text 4.38:1; #326FE6 gives 4.61:1 (AA). Only
 * blue BEHIND WHITE TEXT uses it. --blue stays #3573EA everywhere else, the logo's "i" dot included.
 */
.btn-primary,
.tstep.on .k,
.focus,
.gm-btn,
.tp-nav .nx,
.in-t.hl .in-n,
.nx.s2 .nx-slot span,
.w5-n,
.fm2:hover .ib,
.lp-copy b,
.tx-pick button[aria-selected="true"],
.ip-p em,
.setup2.on .in-n,
.plan2.main .p2-step i,
.lp.on .lp-node { background: #326FE6; }
.tx-pick button[aria-selected="true"] { border-color: #326FE6; }
.next.on li span { background: #326FE6 !important; }

/* Small labels: 3.3–4.2:1 → AA. */
.vc-ex { color: rgba(201, 212, 226, .6); }          /* 4.8:1 on the dark panel */
.pt-ex, .ff-ex { opacity: 1; }                      /* --text-2 at full strength: 8.5:1 */
.tx-ex { color: #66738A; }                          /* 4.8:1 on white */

/* Headings: the trade cards and Setup groups are <h3> (they were <h4> under an <h2>), styled exactly as before. */
.tr2-b h3 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.sx-g h3 { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #3B4A60; }

/* Step dots: each is a 24×24 tap target (WCAG 2.5.8); the visible dot keeps its size and colour. */
.tp-dots { gap: 0; }
.tp-dots button { width: 24px; height: 24px; border-radius: 0; background: none; position: relative; }
.tp-dots button::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(238, 243, 249, .25); transform: translate(-50%, -50%); transition: width .3s, background .3s;
}
.tp-dots button[aria-current="true"] { width: 30px; border-radius: 0; background: none; }
.tp-dots button[aria-current="true"]::before { width: 22px; border-radius: 4px; background: #8fb3ff; }
.tp-dots button:focus-visible { outline: 2px solid #8fb3ff; outline-offset: -2px; border-radius: 6px; }
.tp-nav .nx { border-color: #326FE6; }

/* P-159 (founder, 2026-11-08): with reduced motion the revealed sections show at once, with no fade or slide. */
@media (prefers-reduced-motion: reduce) { .lp *, .vc *, .pt *, .uc *, .ff *, .tx *, .setup2 *, .flow *, .flow3 *, .pic *, .pic-grid *, .w5 * { transition: none !important; } }

/* P-159 (founder, 2026-11-08): phones. The Compare table's label column collapsed to 0-54 px below 420 px and printed over the
   numbers: the label now takes its own line. The header logo never shrinks below a legible size. */
@media (max-width: 420px) {
  .tx-dh, .tx-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92px; row-gap: 2px; }
  .tx-r span { grid-column: 1 / -1; }
  .tx-dh > :first-child { display: none; }
}
.nav .logo { flex-shrink: 0; }
@media (max-width: 400px) { .nav .brand-logo { height: 28px; min-width: 124px; } }

/* P-159: the orbit's "EXAMPLE DATA" tag readable (it was 2.87:1). */
.o2-ex { color: rgba(201, 212, 226, .8); }

/* P-163 (founder, 2026-11-09; WCAG 2.2.2): the orbit's pause/play control (added by vendor/orbit/o2.js); paused, the orbit's CSS
   animations stop too. With reduced motion there is no motion and no control. */
.o2-pause { position: absolute; left: 8px; top: 8px; z-index: 8; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(238, 243, 249, .4); background: rgba(7, 20, 36, .72); color: #EEF3F9; display: grid; place-items: center; cursor: pointer; }
.o2-pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.o2-pause .pl { display: none; fill: currentColor; stroke: none; }
.o2-pause[aria-pressed="true"] .pz { display: none; }
.o2-pause[aria-pressed="true"] .pl { display: block; }
.o2-pause:hover { border-color: #8fb3ff; }
.o2-pause:focus-visible { outline: 2px solid #8fb3ff; outline-offset: 2px; }
@media (pointer: coarse) { .o2-pause { width: 44px; height: 44px; } }
.o2-paused *, .o2-paused *::before, .o2-paused *::after { animation-play-state: paused !important; }

/* P-168 (founder, 2026-11-10): on phones the orbit hides its node names (homepage.css), but the AI node keeps its full
   "AI Discovery" label: not shortened, hidden or clipped (checked at 360–430 px). */
@media (max-width: 760px) { .o2 .o2-fam .nm { display: inline; white-space: nowrap; } }

/* P-163 (Phase C speed): sections below the fold are laid out only as they come near the screen (the page has 2,100+ elements). */
main > section:not(.hero), main > div > section { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* P-168 (founder, 2026-11-10): no sideways scroll at 360 px. The header (logo, "Check Your Business" and Menu) needed 412 px:
   on narrow phones the side padding, the gaps and the button's padding tighten and the logo is a little smaller. Same words,
   same order; the button keeps its 44 px tap height. */
@media (max-width: 380px) {
  header.nav .wrap { padding-left: 16px; padding-right: 16px; gap: 10px; }
  header.nav .nav-links .nav-cta { margin-left: 0; padding-left: 10px; padding-right: 10px; min-height: 44px; }
  header.nav .nav-links { gap: 2px; }
  header.nav a.logo .brand-logo { height: auto; max-width: 112px; }
}