/* How interactive elements respond, on the homepage and /how-it-works (loaded after each page's own styles).
   One quick, consistent response: 150ms ease-out on colour, background, border and opacity, and a subtle pressed
   state so a click registers. Nothing changes size or position, so hover and press never move the layout. */
.links a, .lang button, .menu-btn, .brand, .go, .chips button, .send, .seg button, .trsel, details > summary, .optnote a,
.foot a, .sheet a, .msg.ai .acts button, .msg.ai .acts a, .cdlg-x, .card .btns .alt {
  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, opacity 150ms ease-out, transform 150ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.links a::after { transition: transform 150ms ease-out; }

/* hover: brighter text where it was grey */
.seg button:hover, details > summary:hover, .optnote a:hover { color: #fff; }

/* pressed */
.links a:active, .lang button:active, .menu-btn:active, .brand:active, .chips button:active, .seg button:active, details > summary:active,
.optnote a:active, .foot a:active, .sheet a:active, .msg.ai .acts button:active, .msg.ai .acts a:active, .cdlg-x:active, .card .btns .alt:active { opacity: 0.6; }
.go:active { opacity: 0.8; }
.send:active:not([disabled]) { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .links a, .links a::after, .lang button, .menu-btn, .brand, .go, .chips button, .send, .seg button, .trsel, details > summary, .optnote a,
  .foot a, .sheet a, .msg.ai .acts button, .msg.ai .acts a, .cdlg-x, .card .btns .alt { transition: none; }
  .send:active:not([disabled]) { transform: none; }
}