/* Public site: accessibility fixes (WCAG 2.1 AA), 2026-10-25. Loaded last, right after site-fullwidth.css, on every
   public page. Owner rule: no redesign. This file only adds focus rings, field edges and selected-state edges in the
   site's own greens and greys, screen-reader-only text, and layout help for very short or zoomed windows. The
   full-width, small-corner, motion design is unchanged. Remove the line and a page looks as before.
   Record: docs/backend/accessibility-2026-10-25.md. */

/* Text-field and select edges: the lightest grey of the ink family that keeps 3:1 against white and mint-50 (1.4.11). */
:root { --field-line: #88928C; }
.field input, .field select, .field textarea, .fit-contact-grid input, .fit-contact-grid select, .chatbot__input { border-color: var(--field-line); }
.chatbot__input::placeholder { color: var(--ink-3); }

/* 2.4.7: fields keep the site-wide 3px focus ring (styles.css switched it off on .field controls). */
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--focus-ring); outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* 1.4.11 / 1.4.1: a selected option is shown by a darker, doubled green edge, not by a pale fill alone. */
.choice input:checked + span { border-color: var(--green); box-shadow: inset 0 0 0 2px var(--green), 0 0 0 3px rgba(0, 214, 122, .13); }
.checkout-plan input:checked + span { border-color: var(--green); box-shadow: inset 0 0 0 2px var(--green), 0 0 0 4px rgba(0, 214, 122, .14), var(--sh-md); }
.pricing-jump__in a[aria-current="location"], .pricing-jump__in a[aria-selected="true"] { border-color: var(--green-ink); }

/* 1.4.3: the home "Built for" label in the darker brand green (6.6:1 on white); same size and weight. */
.hero--home .hero__audience-label { color: var(--green-ink); }
/* 1.4.3: footer links on the dark band stay light on hover (green-ink on ink was unreadable). */
.foot__bar a:hover { color: var(--green-bright); }
/* The footer "Accessibility" link sits in the bottom bar after the Stripe line, next to "Analytics choices". Wider than
   phones it keeps to the right end of its row (beside "Analytics choices"), so no footer row is added. */
@media (min-width: 721px) { .foot__bar .foot__a11y { margin-left: auto; } }

/* 1.4.12: with enlarged text spacing the home buttons wrap instead of being cut off (same layout otherwise). */
@media (max-width: 620px) { .hero--home .hero__cta--home { grid-template-columns: minmax(0, 1fr); } }

/* 1.1.1 / 1.3.1: CSS symbols are decoration; screen readers skip them (browsers without the alt syntax keep the old rule). */
.faq summary::after { content: "+" / ""; }
.faq details[open] summary::after { content: "x" / ""; }
.fit-assurances li::before { content: "\2713" / ""; }
.fit-options--checks input:checked + span::before { content: "\2713" / ""; }
@media (max-width: 680px) { .comparison td::before { content: attr(data-label) / ""; } }

/* Screen-reader-only text ("opens in a new tab", the plan group's legend). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* .btn sets display:inline-flex, which would otherwise show a hidden button or link (4.1.2). */
.btn[hidden] { display: none !important; }
/* Inline form errors (3.3.1), shown only after a submit with a missing answer. */
.field-error { margin-top: .35rem; color: var(--coral-ink); font-size: var(--fs-sm); font-weight: 700; line-height: 1.45; }
/* The plan radios are a fieldset now: no browser border or padding (looks exactly as the grid did). */
fieldset.checkout-plans { min-width: 0; margin: 0; padding: 0; border: 0; }
/* The custom intake's live request summary is text now, not a heading: it keeps the heading's look. */
.form-aside__summary .form-aside__title { display: block; margin-top: .35rem; color: var(--ink); font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; letter-spacing: -.018em; text-wrap: balance; overflow-wrap: anywhere; }

/* 2.4.7: keyboard focus never waits behind a section that has not faded or risen into place yet. */
.js .reveal:focus-within, .aa-motion .reveal:focus-within { opacity: 1; transform: none; transition: none; }
@media (min-width: 769px) { .aa-motion .reveal:not(.is-visible):focus-within { opacity: 1; transform: none; transition: none; } }
/* 2.4.7: focused items scroll clear of the sticky header, the pricing tabs and the phone bar. */
html { scroll-padding-top: calc(var(--public-nav-height, 0px) + .75rem); }
html:has(#pricingJump) { scroll-padding-top: calc(var(--public-nav-height, 4.3rem) + 4.75rem); }
@media (min-width: 721px) { html.js:has(#chatToggle) { scroll-padding-bottom: 5.5rem; } }
@media (max-width: 720px) { html:has(body.has-mobile-conversion) { scroll-padding-bottom: calc(5.75rem + env(safe-area-inset-bottom)); } }

/* 1.4.10: the consent prompt and the open phone menu scroll inside short or zoomed windows; the phone bar steps aside
   while the menu is open. */
.analytics-consent { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 720px) { .analytics-consent { max-height: calc(100vh - 6.75rem); max-height: calc(100dvh - 6.75rem - env(safe-area-inset-bottom)); } }
@media (max-width: 960px) {
  .nav__panel.is-open { max-height: calc(100vh - 4.75rem); max-height: calc(100dvh - 4.75rem); overflow-y: auto; overscroll-behavior: contain; }
  body.nav-open .mobile-conversion { display: none; }
}
/* 1.4.10: very short windows (a laptop at 400% zoom, 320 by 256): the header and pricing tabs scroll away with the
   page and the phone bar is not shown, so the content is not covered. 17rem (272px) and below only: phones held
   sideways (320px tall and up) keep the sticky header, the pricing tabs and the phone bar exactly as before. */
@media (max-height: 17rem) {
  .nav, .pricing-jump { position: static; }
  .nav__panel.is-open { max-height: none; overflow: visible; }
  html, html:has(#pricingJump) { scroll-padding-top: .5rem; }
  .mobile-conversion { display: none !important; }
  body.has-mobile-conversion { padding-bottom: 0; }
  html:has(body.has-mobile-conversion) { scroll-padding-bottom: 0; }
  .has-mobile-conversion .analytics-consent { bottom: .65rem; }
  .analytics-consent { max-height: calc(100vh - 1.3rem); max-height: calc(100dvh - 1.3rem); }
}

/* The accessibility statement page (accessibility.html). */
.statement { max-width: 52rem; }
.statement h2 { margin: 2.4rem 0 .9rem; font-size: var(--fs-2xl); }
.statement h2:first-child { margin-top: 0; }
.statement .prose { max-width: none; }
.statement .prose + .check-list { margin-top: 1.1rem; }
.statement .check-list li { font-size: var(--fs-base); }
.statement .check-list a, .statement .prose a { color: var(--green-ink); font-weight: 700; }