/* ==========================================================================
   Accessibility — statement hero with the contrast and focus specimen,
   what the site does, the keyboard map (night), the apps, known
   limitations, feedback and the statement facts.
   Scoped under .page-accessibility.
   ========================================================================== */

/* ------------------------------------------------------------------ Hero
   The default hero: white in light mode, night in dark. Copy on the left,
   the specimen on the right; stacked below 1024px.
   ------------------------------------------------------------------------ */
.page-accessibility .ax-hero {
  padding-top: calc(var(--header-h) + clamp(56px, 8vw, 128px));
  padding-bottom: clamp(72px, 9vw, 136px);
}
.page-accessibility .ax-hero__glow { top: -40%; left: 72%; width: min(900px, 120vw); opacity: 0.55; }
:root[data-theme="light"] .page-accessibility .ax-hero__glow { opacity: 0.28; }
.page-accessibility .ax-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.page-accessibility .ax-hero__title { max-width: 10ch; }
.page-accessibility .ax-hero__meta { margin-top: 36px; }
@media (max-width: 1024px) {
  .page-accessibility .ax-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .page-accessibility .ax-hero__title { max-width: 14ch; }
}

/* The specimen: four tiles measured from the colour tokens */
.page-accessibility .ax-spec { margin: 0; }
.page-accessibility .ax-spec__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.page-accessibility .ax-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 228px;
  padding: 20px 20px 18px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
@media (hover: hover) { .page-accessibility .ax-tile:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -34px rgb(0 0 0 / 0.35); } }
/* Fixed surfaces, so the ratios printed on them are the ratios you see */
.page-accessibility .ax-tile--paper {
  --card: var(--white);
  --line-2: rgb(10 10 12 / 0.15);
  background: var(--white);
  border-color: rgb(10 10 12 / 0.1);
  box-shadow: 0 1px 2px rgb(10 10 12 / 0.05), 0 18px 40px -22px rgb(10 10 12 / 0.28);
}
.page-accessibility .ax-tile--night {
  background: var(--night);
  border-color: rgb(255 255 255 / 0.1);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 24px 50px -26px rgb(0 0 0 / 0.7);
}
.page-accessibility .ax-tile__k {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.page-accessibility .ax-tile__sample {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: clamp(2.6rem, 1.6rem + 2.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.page-accessibility .ax-tile__sample em { font-style: normal; color: var(--accent-text); }
.page-accessibility .ax-tile__read { display: grid; gap: 0; margin-top: auto; border-top: 1px solid var(--line); }
.page-accessibility .ax-tile__read > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 9px; }
.page-accessibility .ax-tile__read dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-3); }
.page-accessibility .ax-tile__read dd { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--ink); white-space: nowrap; }
.page-accessibility .ax-tile__read dd b { padding: 1px 5px; border: 1px solid var(--line-2); border-radius: 2px; font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-2); }
.page-accessibility .ax-tile__ring {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 38px;
  margin: 10px 0 0 6px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--crimson);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ink);
}
.page-accessibility .ax-tile__motion {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-top: 6px;
  color: var(--ink);
}
.page-accessibility .ax-tile__note { margin-top: auto; font-size: var(--fs-micro); line-height: 1.45; color: var(--ink-3); }
.page-accessibility .ax-spec__cap { margin-top: 16px; font-size: var(--fs-micro); color: var(--ink-3); }
@media (max-width: 460px) {
  .page-accessibility .ax-spec__grid { gap: 8px; }
  .page-accessibility .ax-tile { min-height: 200px; padding: 16px 14px 14px; }
  .page-accessibility .ax-tile__read > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .page-accessibility .ax-tile__ring { font-size: 0.78rem; padding: 0 12px; height: 34px; }
}

/* ------------------------------------------------------ What the site does */
.page-accessibility .ax-head { align-items: end; margin-bottom: clamp(44px, 6vw, 84px); }
.page-accessibility .ax-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.page-accessibility .ax-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out), border-color var(--t-med);
}
@media (hover: hover) { .page-accessibility .ax-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 30px 60px -34px rgb(0 0 0 / 0.35); } }
.page-accessibility .ax-card__icon {
  display: grid;
  place-items: center;
  justify-content: start;
  color: var(--ink);
}
.page-accessibility .ax-card h3 { margin-top: 10px; font-size: var(--fs-h4); }
.page-accessibility .ax-card p { font-size: var(--fs-small); color: var(--ink-3); }
.page-accessibility .ax-card__try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-nano) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page-accessibility .ax-card__try span { color: var(--ink-3); }
@media (max-width: 1100px) { .page-accessibility .ax-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .page-accessibility .ax-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- Keyboard */
.page-accessibility .ax-keys { overflow: hidden; }
.page-accessibility .ax-keys__grid {
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, #000 10%, transparent 70%);
}
.page-accessibility .ax-keys .bg-glow--low { opacity: 0.4; }
.page-accessibility .ax-keymap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.page-accessibility .ax-key {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 2.8vw, 36px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.03), rgb(255 255 255 / 0.01));
  transition: border-color var(--t-med) var(--ease-soft), background-color var(--t-med);
}
@media (hover: hover) { .page-accessibility .ax-key:hover { border-color: var(--line-2); } }
.page-accessibility .ax-key dt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-accessibility .ax-cap {
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  height: 52px;
  padding: 0 14px;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--night-ink);
  background: linear-gradient(180deg, #1D1D23, #111115);
  border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 -3px 0 rgb(0 0 0 / 0.55) inset, 0 8px 18px -10px rgb(0 0 0 / 0.9);
  transition: transform var(--t-med) var(--ease-spring), border-color var(--t-med), box-shadow var(--t-med);
}
.page-accessibility .ax-cap--wide { min-width: 76px; }
.page-accessibility .ax-cap--space { min-width: 150px; }
@media (hover: hover) { .page-accessibility .ax-key:hover .ax-cap { transform: translateY(1px); border-color: rgb(255 255 255 / 0.32); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 -2px 0 rgb(255 255 255 / 0.18) inset; } }
.page-accessibility .ax-key__or { font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-inline: 4px; }
.page-accessibility .ax-key dd { margin: 0; color: var(--ink-2); }
.page-accessibility .ax-key dd b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.page-accessibility .ax-keys__more { margin-top: 44px; }
@media (max-width: 860px) { .page-accessibility .ax-keymap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) {
  .page-accessibility .ax-cap { min-width: 44px; height: 46px; padding: 0 11px; font-size: 13px; }
  .page-accessibility .ax-cap--wide { min-width: 60px; }
  .page-accessibility .ax-cap--space { min-width: 110px; }
}

/* ------------------------------------------------------------- The apps */
.page-accessibility .ax-apps__split { align-items: center; }
.page-accessibility .ax-ledger {
  display: grid;
  border-radius: var(--r-xl);
  border: 1px solid var(--card-line);
  background: var(--card);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.page-accessibility .ax-ledger__col { padding: clamp(24px, 2.8vw, 36px); }
.page-accessibility .ax-ledger__col--next { background: var(--paper-2); border-top: 1px solid var(--line); }
.page-accessibility .ax-ledger__h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.page-accessibility .ax-ledger__h vm-icon { color: var(--ink); }
.page-accessibility .ax-ledger__col--next .ax-ledger__h vm-icon { color: var(--ink-3); }
.page-accessibility .ax-ledger ul { display: grid; margin-top: 14px; }
.page-accessibility .ax-ledger li {
  position: relative;
  padding: 11px 0 11px 22px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.page-accessibility .ax-ledger li:first-child { border-top: 0; }
.page-accessibility .ax-ledger li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.3em;
  width: 10px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--ink-2);
}
.page-accessibility .ax-ledger__col--next li::before { background: var(--ink-3); }

/* ------------------------------------------------------ Known limitations */
.page-accessibility .ax-limits__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
}
.page-accessibility .ax-limit {
  position: relative;
  padding: 28px 0 34px;
  border-top: 1px solid var(--line-2);
}
.page-accessibility .ax-limit::after { /* hairline that draws in on hover */
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width 1s var(--ease-out);
}
@media (hover: hover) { .page-accessibility .ax-limit:hover::after { width: 100%; } }
.page-accessibility .ax-limit__num { display: block; margin-bottom: 18px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0; color: var(--ink-3); }
.page-accessibility .ax-limit h3 { font-size: var(--fs-h4); }
.page-accessibility .ax-limit p { margin-top: 10px; font-size: var(--fs-small); color: var(--ink-3); }
@media (max-width: 960px) { .page-accessibility .ax-limits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .page-accessibility .ax-limits__list { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------------- Feedback */
.page-accessibility .ax-band { --focus: 0 0 0 3px var(--crimson), 0 0 0 5px #fff; }
/* Full white on crimson: the band's light bloom leaves no room for tinted ink */
.page-accessibility .ax-band .eyebrow, .page-accessibility .ax-band p { color: #fff; }
.page-accessibility .ax-band .btn--glass { --btn-bg: rgb(60 0 12 / 0.34); --btn-line: rgb(255 255 255 / 0.32); }
.page-accessibility .ax-band .btn--glass:hover { --btn-bg: rgb(60 0 12 / 0.5); --btn-line: rgb(255 255 255 / 0.55); }
.page-accessibility .ax-band__mark {
  position: absolute;
  right: -6%;
  top: 50%;
  width: min(520px, 60%);
  aspect-ratio: 424 / 276;
  transform: translateY(-50%) rotate(-8deg);
  z-index: -1;
  background: rgb(255 255 255 / 0.06);
  -webkit-mask: url("../../assets/brand/v-mark-mask.svg") center / contain no-repeat;
  mask: url("../../assets/brand/v-mark-mask.svg") center / contain no-repeat;
}
.page-accessibility .ax-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.page-accessibility .ax-band h2 { margin-top: 18px; }
.page-accessibility .ax-band__list {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-lg);
  background: rgb(60 0 12 / 0.28);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.page-accessibility .ax-band__k { margin: 0 !important; font-family: var(--font-mono); font-size: var(--fs-nano) !important; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: rgb(255 255 255 / 0.84) !important; }
.page-accessibility .ax-band__list ol { display: grid; margin-top: 12px; }
.page-accessibility .ax-band__list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 11px 0;
  border-top: 1px solid rgb(255 255 255 / 0.16);
  font-size: var(--fs-small);
  color: #fff;
}
.page-accessibility .ax-band__list li span { font-family: var(--font-mono); font-size: var(--fs-micro); color: rgb(255 255 255 / 0.84); padding-top: 2px; }
@media (max-width: 900px) { .page-accessibility .ax-band__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .page-accessibility .ax-band .btn--lg { padding-inline: 20px; }
}

/* -------------------------------------------------- About this statement */
.page-accessibility .ax-about__title { font-size: var(--fs-h3); }
.page-accessibility .ax-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
  border-top: 1px solid var(--line);
}
.page-accessibility .ax-facts > div { padding: 22px 24px 0 0; }
.page-accessibility .ax-facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.page-accessibility .ax-facts dt { font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.page-accessibility .ax-facts dd { margin: 10px 0 0; font-size: var(--fs-small); color: var(--ink); }
.page-accessibility .ax-about__more { margin-top: 40px; font-size: var(--fs-small); color: var(--ink-3); }
.page-accessibility .ax-about__more a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { .page-accessibility .ax-about__more a:hover { text-decoration-thickness: 2px; } }
@media (max-width: 900px) {
  .page-accessibility .ax-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-accessibility .ax-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .page-accessibility .ax-facts > div:nth-child(n + 3) { margin-top: 22px; border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .page-accessibility .ax-hero .page-hero__actions .btn { flex: 1 1 100%; }   /* stacked full width, as on every other page */
  .page-accessibility .ax-facts { grid-template-columns: minmax(0, 1fr); }
  .page-accessibility .ax-facts > div, .page-accessibility .ax-facts > div + div { padding: 18px 0; border-left: 0; margin-top: 0; }
  .page-accessibility .ax-facts > div + div { border-top: 1px solid var(--line); }
}