/* Toggle AI — the analytics consent banner. Travels with `consent.js`.

   It reads the tokens defined at the top of `landing.css`, so it inherits light/dark with the
   rest of the site and defines no colour of its own.

   THE ONE PLACE ON THIS SITE THAT IS ALLOWED A BREAKPOINT. `landing.css` has none on purpose —
   the page is a Figma frame laid out at 1512px and scaled whole, so nothing on it ever
   reflows. The banner is not on that frame. It is `position: fixed`, which means it is pinned
   to the viewport at real size and never passes through the scale, and a viewport is the one
   thing here that genuinely has a width. It is also why the markup must sit OUTSIDE
   `.frame-holder`: a transformed ancestor becomes the containing block for `fixed`, and the
   banner would be pinned to the frame instead of the window — off-screen, at the wrong size. */

.consent {
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 32px));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  border: 1px solid var(--sage-4);
  border-radius: var(--radius);
  background: var(--sage-1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  color: var(--text);
  font: 400 14px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* `display: flex` above outranks the UA's `[hidden] { display: none }`, so the attribute the
   script toggles has to be honoured here or the banner is permanently visible. */
.consent[hidden] { display: none; }

.consent__copy { margin: 0; flex: 1; }
.consent__copy a { text-decoration: underline; text-underline-offset: 2px; }
.consent__copy a:hover { color: var(--brand-10); }

.consent__actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* Accept and Decline are the SAME SIZE and the same weight, and Decline is not a muted link
   tucked under the paragraph. An interface where refusing is the harder of the two is not
   collecting consent at all — EDPB 03/2022 on deceptive patterns is explicit about it, and a
   banner that fails that test is worse than no banner, because it also documents the intent. */
.consent__btn {
  min-width: 104px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  /* LONGHANDS, NOT `font:`. `inherit` is not a font-family name, and one invalid piece throws
     away the whole shorthand — weight, size and line-height with it, silently, leaving the UA's
     13.33px/400. That is commit 457b3cb on this same branch, eight declarations at once. A
     <button> also does not inherit the page's family the way the <a>-based `.btn` does, so the
     family has to be said out loud here even though `.btn` gets away without it. */
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.consent__btn--accept { background: var(--brand-10); color: var(--on-brand); }
.consent__btn--accept:hover { background: var(--brand-10-hover); }
.consent__btn--decline { background: var(--sage-2); border-color: var(--sage-4); color: var(--text); }
.consent__btn--decline:hover { background: var(--sage-3); }

@media (max-width: 640px) {
  .consent { flex-direction: column; align-items: stretch; gap: 16px; bottom: 12px; }
  .consent__actions { justify-content: stretch; }
  .consent__btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .consent__btn { transition-duration: 0.01ms; }
}