/* Polish pass, 24 Oct 2026: additive only. Defects, phone, tap targets, focus, motion. Nothing approved is replaced. */

/* story steps: a square pixel marks each step instead of a number */
.ma-steps li { grid-template-columns: 10px 1fr; gap: 18px; transition: opacity .5s cubic-bezier(.16, 1, .3, 1), border-color .5s cubic-bezier(.16, 1, .3, 1); }
.ma-steps span { width: 8px; height: 8px; margin-top: .55em; background: var(--fg-3); transition: background-color .4s var(--ease); }
.ma-steps li.on span { background: var(--pk); }
.ma-steps li:hover { opacity: .75; }
.ma-steps li.on:hover { opacity: 1; }
.ma-steps li:focus-visible { outline: 2px solid var(--pk); outline-offset: 2px; opacity: 1; }

/* Apps We Build: the title sits where the counter was */
.ma-card h3 { margin-top: 0; }
.ma-card { transition: border-color .5s var(--ease); }
.ma-card:hover { border-color: var(--rule); }
.ma-track:focus-visible { outline: 2px solid var(--pk); outline-offset: -2px; }

/* the lab: a real button, not a browser-default bevel; visible focus on every control */
.ma-install { border: 0; cursor: pointer; }
.ma-install:focus-visible, .ma-seg button:focus-visible, .ma-btn:focus-visible { outline: 2px solid var(--pk); outline-offset: 3px; }
.ma-sw button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.ma-seg button { transition: background-color .3s var(--ease), color .3s var(--ease); }

/* FAQ: comfortable measure, focus ring */
.sv-faq summary:focus-visible { outline: 2px solid var(--pk); outline-offset: 4px; }
.sv-faq details p { max-width: 66ch; }

/* closing line: readable over the concrete */
.closing .closing-copy .body { color: var(--fg); text-shadow: 0 1px 18px rgb(0 0 0 / .75); }

@media (max-width: 767px) {
  /* tap targets of at least 44px */
  .ma-seg button { min-height: 44px; padding: 0 18px; }
  .ma-sw { gap: 8px; }
  .ma-sw button { width: 44px; height: 44px; }
  .crumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumb { align-items: center; row-gap: 0; }
  .ma-hero .crumb { margin-bottom: 12px; }
  .close-alt .link { min-height: 44px; display: inline-flex; align-items: center; }
  .sv-faq summary { min-height: 44px; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ma-body, .ma-ring circle + circle, .ma-track-bar i, .ma-phone.home .ma-app.mine, .ma-badge, .ma-hint i::after { animation-duration: 1ms; animation-delay: 0ms; }
  .ma-card img, .ma-shot, .ma-phone, .ma-screen, .ma-home { transition: none; }
  .ma-card:hover img { transform: none; }
}