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

/* case kicker: a real sector label with the square pixel, instead of a counter */
.sw-num { display: flex; align-items: center; gap: 10px; text-transform: uppercase; color: var(--fg-2); }
.sw-num::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--accent); }
.sw-line { max-width: 52ch; }

/* What You Get: the card title sits where the counter was */
.wg-txt h3 { margin-top: 0; }
.wg-card { transition: border-color .5s var(--ease); }
.wg-card:hover { border-color: var(--rule); }
.wg-track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* the long page that scrolls inside a frame ends exactly on its last pixel, at any frame height */
.sw-scroll { container-type: size; }
.sw-case.in .sw-scroll img { transform: translateY(calc(-100% + 100cqh)); }

/* Shukria device picker: square pixels instead of numbers */
.sw-devs { gap: 2px; }
.sw-dev { position: relative; width: 32px; height: 32px; border-radius: 0; background: none; border: 0; padding: 0; }
.sw-dev::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; translate: -50% -50%; background: rgb(255 255 255 / .85); outline: 1px solid rgb(18 16 22 / .25); transition: background-color .3s var(--ease), scale .4s cubic-bezier(.16, 1, .3, 1); }
.sw-dev:hover::before { scale: 1.2; }
.sw-dev[aria-pressed="true"] { background: none; border: 0; }
.sw-dev[aria-pressed="true"]::before { background: var(--accent); outline-color: var(--accent); }
.sw-dev:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* links and tabs: visible focus, calmer hover */
.sw-visit { transition: color .3s var(--ease); }
.sw-visit::after { transition: translate .4s cubic-bezier(.16, 1, .3, 1); }
.sw-visit:hover::after { translate: 2px -2px; }
.sw-visit:focus-visible, .sw-more:focus-visible, .pg-next a:focus-visible, .faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sw-tab { transition: color .3s var(--ease), border-color .3s var(--ease); }
.sw-tab:hover { color: var(--fg); }

/* FAQ answers: a comfortable measure */
.faq details p { line-height: 1.65; 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: 860px) {
  /* hero: a quiet scrim so the breadcrumb and headline never sit on the live build's lines */
  .lb-copy::before { content: ""; position: absolute; inset: calc(46svh - 120px) 0 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, oklch(0.135 0.006 358 / .82) 120px, oklch(0.135 0.006 358 / .9) 100%); }

  /* tap targets of at least 44px */
  .sw-bar { height: 52px; }
  .sw-tab { min-height: 44px; padding: 0 12px; }
  .sw-dev { width: 44px; height: 44px; }
  .sw-devs { left: 4px; bottom: 2px; gap: 0; }
  .sw-visit, .sw-more { min-height: 44px; display: inline-flex; align-items: center; padding-bottom: 0; }
  .sw-links { gap: 4px 20px; }
  .crumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumb { align-items: center; gap: 0 10px; margin-bottom: 20px; }
  .close-alt .link { min-height: 44px; display: inline-flex; align-items: center; }
  .x3-next a { min-height: 44px; display: inline-flex; align-items: center; }
  .sw-name { margin: 14px 0 12px; }
  .sw-case { padding-block: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .sw-dev::before, .sw-visit::after, .wg-card img { transition: none; }
  .wg-card:hover img { transform: none; }
}