/* page-website-accessibility.css — /website-accessibility/ only (tokens.css v1.7)
   Values reference var(--token) wherever a token exists.
   ONE FILE: the Drive design-handoff copy, the local design-handoff copy and
   the theme copy are byte-identical. Built 2026-10-08 from the v1.2 handoff;
   small text raised to 1rem like page-home.css, and the guardrail's bold
   text uses --text-strong (warm white) instead of #fff. */

/* ---- page hero (not the homepage hero — own section, own class) ---- */
.a11y-hero{padding:96px 0 72px;background:
  radial-gradient(900px 420px at 85% -10%, rgba(125,40,24,.45) 0%, transparent 60%),
  radial-gradient(700px 380px at -10% 110%, rgba(145,61,20,.28) 0%, transparent 55%)}
.a11y-hero .wrap{max-width:820px}
.a11y-hero .eyebrow{font-family:var(--head);font-stretch:125%;color:var(--orange-mid);font-weight:700;font-size:.9rem;letter-spacing:.04em;margin-bottom:14px}
.a11y-hero h1{font-size:clamp(2rem,4.2vw,3rem);line-height:1.15;color:var(--text-strong);font-weight:800;letter-spacing:-.01em;margin:0 0 20px}
.a11y-hero .lead{font-size:1.14rem;max-width:38em;margin-bottom:28px}
.a11y-hero .micro{margin-top:18px}

/* ---- what's included: four cards as a 2×2 grid (the shared .grid is three
   columns, which left the fourth card alone on a row) ---- */
@media(min-width:901px){
  #services .grid{grid-template-columns:repeat(2,1fr)}
}
/* the homepage's fixed card height (357px, tokens.css) fits its longer copy;
   these cards size to their own text */
#services .card{min-height:0}

/* ---- approach band + steps (page-specific: own numbering, not tokens .steps) ---- */
.a11y-approach-band{background:var(--band)}
.a11y-approach{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:a11y-step}
.a11y-step{background:var(--card);border-radius:14px;padding:28px 26px;border:1px solid var(--line);position:relative}
.a11y-step::before{counter-increment:a11y-step;content:"0" counter(a11y-step);font-family:var(--head);font-stretch:125%;font-weight:800;font-size:2.4rem;color:rgba(248,179,144,.3);position:absolute;top:18px;right:22px;line-height:1}
.a11y-step h3{color:var(--text-strong);font-size:1.1rem;margin-bottom:10px;font-weight:700}
.a11y-step p{font-size:1rem}

/* ---- guardrail band: where supporting technology fits / doesn't ---- */
.a11y-guardrail{background:linear-gradient(165deg,var(--maroon-darkest) 40%,var(--maroon-dark));color:var(--warm-white)}
.a11y-guardrail .wrap{max-width:820px}
.a11y-guardrail h2{color:var(--orange);font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:800;margin-bottom:18px;line-height:1.25}
.a11y-guardrail p{color:var(--text);font-size:1.03rem;margin-bottom:16px}
.a11y-guardrail p:last-child{margin-bottom:0}
.a11y-guardrail p b{color:var(--text-strong);font-family:var(--head)}

/* ---- FAQ (semantic definition list) ---- */
.faq-list{display:grid;gap:18px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 26px}
.faq-item dt{font-family:var(--head);font-stretch:125%;color:var(--text-strong);font-weight:700;font-size:1.05rem;margin-bottom:8px}
.faq-item dd{margin:0;font-size:1rem;color:var(--text)}

/* ---- page responsive ---- */
@media(max-width:900px){
  .a11y-approach{grid-template-columns:1fr}
}