/* ===========================================================================
 * shared/base.css — Common foundation for all redesign variants.
 *
 * - CSS reset + normalize
 * - Semantic token slots (values set per-variant in theme.css)
 * - A11y utilities (skip-link, visually-hidden, focus-visible)
 * - Reveal-on-scroll utility (IntersectionObserver-driven)
 * - Reduced-motion guard (MUST ship before any reveal/transition code)
 * - Fluid type scale + spacing scale
 * - Reusable component primitives (nav, button, card, input, divider)
 * ======================================================================== */

/* ---- Self-hosted fonts --------------------------------------------------- */

/* Fraunces — display serif (variable: opsz 9-144, wght 400-600, SOFT axis) */
@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces-italic-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter — body sans-serif (variable: opsz 14-32, wght 400-600) */
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono — UI monospace (variable: wght 400-700) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { line-height: 1.5; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---- Reduced motion guard — ships FIRST ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Theme token slots (values assigned per variant) --------------------- */

:root {
  /* Semantic color slots — each variant sets these via [data-theme] */
  --color-bg: white;
  --color-surface-1: #f8f8f8;
  --color-surface-2: #eee;
  --color-text: #111;
  --color-text-muted: #666;
  --color-border: #e5e5e5;
  --color-accent: #1e5baa;
  --color-accent-fg: white;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;

  /* Typography slots */
  --font-display: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

  /* Fluid type scale (clamp) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-48: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --fs-64: clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
  --fs-h1: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);

  /* Spacing scale (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;
  --s-40: 10rem;

  /* Layout widths */
  --w-prose: 680px;
  --w-content: 960px;
  --w-bento: 1200px;
  --w-max: 1360px;

  /* Radii */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;

  /* Easing + durations */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
}

/* ---- A11y utilities ------------------------------------------------------ */

.skip-link {
  position: absolute;
  top: 0; left: 0;
  padding: var(--s-2) var(--s-4);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  transform: translateY(-100%);
  transition: transform var(--dur-fast) var(--ease-out);
  z-index: 100;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus-visible { transform: translateY(0); outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---- Reveal-on-scroll --------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---- Layout helpers ------------------------------------------------------ */

.container {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-6);
}
.container--prose { max-width: var(--w-prose); }
.container--bento { max-width: var(--w-bento); }
.container--max { max-width: var(--w-max); }

@media (min-width: 768px) {
  .container { padding-inline: var(--s-8); }
}
@media (min-width: 1280px) {
  .container { padding-inline: var(--s-12); }
}

section { padding-block: var(--s-24); }
@media (min-width: 768px) { section { padding-block: var(--s-32); } }
@media (min-width: 1280px) { section { padding-block: var(--s-40); } }

/* ---- Nav (shared shell) -------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--color-bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-nav__inner {
  max-width: var(--w-max);
  margin-inline: auto;
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.site-nav__logo {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: var(--fs-20);
  color: var(--color-text);
}
.site-nav__links {
  display: none;
  gap: var(--s-6);
  font-size: var(--fs-14);
  color: var(--color-text-muted);
}
.site-nav__links a { transition: color var(--dur-fast); }
.site-nav__links a:hover, .site-nav__links a[aria-current="location"] { color: var(--color-text); }
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
@media (min-width: 768px) {
  .site-nav__links { display: flex; }
}

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-md);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1.2;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-fg);
}
.btn--primary:hover { filter: brightness(0.92); }
.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--secondary:hover { border-color: var(--color-text); }
.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
}
.btn--ghost:hover { color: var(--color-text); }
.btn--icon {
  padding: var(--s-2);
  border-radius: var(--r-sm);
}

/* ---- Cards --------------------------------------------------------------- */

.card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--s-6);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base);
}
.card:hover {
  border-color: color-mix(in oklch, var(--color-accent) 60%, var(--color-border));
}
.card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--s-3);
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.card__body {
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ---- Forms --------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.field label {
  font-size: var(--fs-14);
  color: var(--color-text-muted);
}
.field input, .field textarea {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-16);
  color: var(--color-text);
  transition: border-color var(--dur-fast), background var(--dur-fast);
  font-family: var(--font-body);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-bg);
}
.field textarea { resize: vertical; min-height: 8rem; }

/* ---- Typography primitives ---------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-48); }
h3 { font-size: var(--fs-24); }
p { max-width: 62ch; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--s-4);
  display: inline-block;
}
.section-number {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  margin-bottom: var(--s-2);
}
.lead {
  font-size: var(--fs-20);
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 54ch;
}

/* ---- Divider ------------------------------------------------------------- */

.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: 0;
}

/* ---- Theme toggle (3-state segmented control) --------------------------- */

.theme-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-surface-1);
}
.theme-toggle button {
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-12);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  border-radius: var(--r-sm);
  transition: background var(--dur-fast), color var(--dur-fast);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.theme-toggle button:hover { color: var(--color-text); }
.theme-toggle button[aria-pressed="true"] {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 0 0 1px var(--color-border);
}

/* ---- Footer -------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--s-16) var(--s-6);
  margin-top: var(--s-24);
}
.site-footer__inner {
  max-width: var(--w-max);
  margin-inline: auto;
  display: grid;
  gap: var(--s-8);
}
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fs-14);
  color: var(--color-text-muted);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
}
.site-footer__links a:hover { color: var(--color-text); }
.site-footer__social { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.site-footer__social-link { color: var(--color-text-muted); transition: color 200ms; }
.site-footer__social-link:hover { color: var(--color-accent); }

/* ---- Demo grid (bento) --------------------------------------------------- */

.demos-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .demos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .demos-grid { grid-template-columns: repeat(3, 1fr); }
}

.demo-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-base), transform var(--dur-base);
}
.demo-card:hover { border-color: color-mix(in oklch, var(--color-accent) 60%, var(--color-border)); }
.demo-card__media {
  aspect-ratio: 16/9;
  background: var(--color-surface-2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.demo-card__media img, .demo-card__media video {
  width: 100%; height: 100%; object-fit: cover;
}
.demo-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-accent);
  letter-spacing: 0.04em;
}
.demo-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
}
.demo-card__tagline {
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  line-height: 1.55;
  flex: 1;
}
.demo-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.demo-card__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  padding: 2px var(--s-2);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.demo-card__link {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: var(--s-2);
}
.demo-card__link:hover { text-decoration: underline; }

/* ============================================================
 * Card tint palette — 12 hues
 * Appliqué sur .dossier--tint-N (ou tout conteneur). Override
 * --color-surface-1 / --color-bg / --color-accent scopé au card,
 * donc tout enfant qui utilise ces tokens hérite la teinte.
 * ============================================================ */

.dossier--tint-1  { --tint-bg: oklch(95% 0.042 20);  --tint-accent: oklch(55% 0.175 25);  }
.dossier--tint-2  { --tint-bg: oklch(95% 0.042 50);  --tint-accent: oklch(60% 0.170 50);  }
.dossier--tint-3  { --tint-bg: oklch(95% 0.048 85);  --tint-accent: oklch(62% 0.160 85);  }
.dossier--tint-4  { --tint-bg: oklch(95% 0.045 115); --tint-accent: oklch(58% 0.150 115); }
.dossier--tint-5  { --tint-bg: oklch(95% 0.042 150); --tint-accent: oklch(55% 0.140 150); }
.dossier--tint-6  { --tint-bg: oklch(95% 0.042 180); --tint-accent: oklch(55% 0.130 180); }
.dossier--tint-7  { --tint-bg: oklch(95% 0.042 215); --tint-accent: oklch(55% 0.140 215); }
.dossier--tint-8  { --tint-bg: oklch(95% 0.045 245); --tint-accent: oklch(50% 0.150 245); }
.dossier--tint-9  { --tint-bg: oklch(95% 0.045 275); --tint-accent: oklch(52% 0.150 275); }
.dossier--tint-10 { --tint-bg: oklch(95% 0.042 305); --tint-accent: oklch(55% 0.145 305); }
.dossier--tint-11 { --tint-bg: oklch(95% 0.045 335); --tint-accent: oklch(58% 0.155 335); }
.dossier--tint-12 { --tint-bg: oklch(93% 0.028 90);  --tint-accent: oklch(45% 0.040 250); }

[data-theme="dark"] .dossier--tint-1  { --tint-bg: oklch(28% 0.050 25);  --tint-accent: oklch(75% 0.150 25);  }
[data-theme="dark"] .dossier--tint-2  { --tint-bg: oklch(28% 0.050 50);  --tint-accent: oklch(80% 0.155 50);  }
[data-theme="dark"] .dossier--tint-3  { --tint-bg: oklch(28% 0.055 85);  --tint-accent: oklch(82% 0.150 85);  }
[data-theme="dark"] .dossier--tint-4  { --tint-bg: oklch(28% 0.050 115); --tint-accent: oklch(80% 0.140 115); }
[data-theme="dark"] .dossier--tint-5  { --tint-bg: oklch(28% 0.050 150); --tint-accent: oklch(78% 0.135 150); }
[data-theme="dark"] .dossier--tint-6  { --tint-bg: oklch(28% 0.050 180); --tint-accent: oklch(78% 0.130 180); }
[data-theme="dark"] .dossier--tint-7  { --tint-bg: oklch(28% 0.050 215); --tint-accent: oklch(80% 0.140 215); }
[data-theme="dark"] .dossier--tint-8  { --tint-bg: oklch(28% 0.055 245); --tint-accent: oklch(78% 0.150 245); }
[data-theme="dark"] .dossier--tint-9  { --tint-bg: oklch(28% 0.055 275); --tint-accent: oklch(78% 0.150 275); }
[data-theme="dark"] .dossier--tint-10 { --tint-bg: oklch(28% 0.050 305); --tint-accent: oklch(80% 0.145 305); }
[data-theme="dark"] .dossier--tint-11 { --tint-bg: oklch(28% 0.055 335); --tint-accent: oklch(82% 0.155 335); }
[data-theme="dark"] .dossier--tint-12 { --tint-bg: oklch(30% 0.030 240); --tint-accent: oklch(85% 0.040 90);  }

/* Apply tint ONLY to the little tape (top-left sticker). Card stays white/cream. */
.dossier[class*="--tint-"] .dossier__tape {
  background: var(--tint-accent);
  color: oklch(98% 0.008 85); /* cream white for contrast on saturated bg */
  border-color: transparent;
}

/* ============================================================
 * Compact CTA band (terracotta) — title left, accent button right
 * Usage: <section class="moe-band moe-band--compact">
 * ============================================================ */

.moe-band.moe-band--compact {
  padding: var(--s-8) var(--s-6);
  min-height: 0;
}

.cta-compact {
  max-width: var(--w-content);
  margin-inline: auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-inline: var(--s-6);
}

.cta-compact__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.625rem);
  font-weight: 500;
  color: var(--moe-cream, #F5F1E8);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}

.cta-compact__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border: 1px solid var(--color-accent);
  text-decoration: none;
  border-radius: 8px;
  transition:
    transform 220ms cubic-bezier(.4,0,.2,1),
    box-shadow 220ms cubic-bezier(.4,0,.2,1),
    background 220ms cubic-bezier(.4,0,.2,1);
}

.cta-compact__arrow {
  width: 18px;
  height: 9px;
  transition: transform 220ms cubic-bezier(.4,0,.2,1);
}

.cta-compact__btn:hover,
.cta-compact__btn:focus-visible {
  transform: translateY(-2px);
  background: var(--color-accent-hi, var(--color-accent));
  box-shadow: 0 10px 24px -10px color-mix(in oklch, var(--color-accent) 70%, transparent);
  outline: none;
}

.cta-compact__btn:hover .cta-compact__arrow,
.cta-compact__btn:focus-visible .cta-compact__arrow {
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  .cta-compact__btn,
  .cta-compact__arrow { transition: none; }
  .cta-compact__btn:hover { transform: none; }
  .cta-compact__btn:hover .cta-compact__arrow { transform: none; }
}