/* ═══════════════════════════════════════════════════════════════════════════
   SPS · Design system
   Source of truth: handoff/docs/09-design-system.md
   When any value here disagrees with a prototype file, the prototype wins.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Fonts ─────────────────────────────────────────────────────────────── */
/* Self-hosted woff2 files in public/assets/fonts/.
   Variable fonts: one file per subset covers all weights. */

/* Big Shoulders Display (latin-ext) — weights 600 700 900 */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('../fonts/big-shoulders-display-latin-ext.woff2') format('woff2');
  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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Big Shoulders Display (latin) — weights 600 700 900 */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('../fonts/big-shoulders-display-latin.woff2') format('woff2');
  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;
}

/* DM Sans (latin-ext) — weights 300 500 700 */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* DM Sans (latin) — weights 300 500 700 */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  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;
}

/* Manrope (latin-ext) — weights 400 600 */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Manrope (latin) — weights 400 600 */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  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;
}

/* Tabler Icons 3.19.0 webfont */
@font-face {
  font-family: 'tabler-icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/tabler-icons.woff2') format('woff2');
}

/* ── 1. Colour tokens ─────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:        #05050C;
  --surface:   #10101E;
  --surface-2: #181828;
  --surface-3: #0A0A14;

  /* Ink */
  --ink:    #EEEEF8;
  --ink-78: rgba(238,238,248,.78);
  --ink-52: rgba(238,238,248,.52);

  /* Lines */
  --line-24: rgba(238,238,248,.24);
  --line-18: rgba(238,238,248,.18);
  --line-14: rgba(238,238,248,.14);
  --line-10: rgba(238,238,248,.10);
  --line-08: rgba(238,238,248,.08);

  /* Brand */
  --purple:   #93278F;
  --purple-2: #B44DB0;
  --pink:     #D07ACD;
  --indigo:   #5544BB;
  --violet:   #7A6BE0;
  --blue:     #1F93FF;
  --blue-2:   #5BB3FF;

  /* Status */
  --green:      #00C878;
  --amber:      #F59E0B;
  --amber-dark: #B7770A;
  --red:        #F04040;
  --grey-bar:   #606060;

  /* Gradients */
  --grad-brand: linear-gradient(110deg,#93278F,#5544BB,#1F93FF);
  --grad-bar:   linear-gradient(90deg,#93278F,#1F93FF);

  /* Radius */
  --r-sm:   8px;
  --r-md:   15px;
  --r-lg:   20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-raised:  0 8px 32px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
  --shadow-brand:   0 0 0 1px rgba(147,39,143,.4), 0 0 30px rgba(147,39,143,.2), 0 8px 32px rgba(0,0,0,.5);
  --shadow-cta:     0 0 0 1px rgba(147,39,143,.35), 0 0 30px rgba(147,39,143,.2), 0 0 60px rgba(31,147,255,.12);
  --shadow-selected:0 0 0 1px rgba(147,39,143,.5), 0 0 20px rgba(147,39,143,.25);
  --shadow-danger:  0 0 0 1px rgba(240,64,64,.5), 0 0 20px rgba(240,64,64,.2);

  /* Easing */
  --ease: cubic-bezier(.16,1,.3,1);

  /* Container */
  --container-max: 1280px;
  --container-pad: clamp(20px,4vw,48px);
}

/* ── 2. Reset & base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font: 300 16px/1.6 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--blue-2);
  text-decoration: none;
}
a:hover { color: var(--ink); }

img, svg { display: block; max-width: 100%; }

p { text-wrap: pretty; }

/* ── 3. Typography ────────────────────────────────────────────────────────── */
.display-h1 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(40px,6vw,64px);
  letter-spacing: .03em;
  line-height: .9;
  text-transform: uppercase;
  text-wrap: balance;
}

.display-h2 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700;
  font-size: clamp(32px,4.5vw,48px);
  letter-spacing: .04em;
  line-height: .93;
  text-transform: uppercase;
  text-wrap: balance;
}

.display-h3 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 600;
  font-size: clamp(22px,2.5vw,26px);
  letter-spacing: .08em;
  line-height: 1.05;
  text-transform: uppercase;
}

.display-num {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(40px,5vw,56px);
  letter-spacing: .04em;
  line-height: .9;
}

.eyebrow {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-52);
}

.label-num {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .05em;
}

.body-lead {
  font-weight: 300;
  font-size: clamp(16px,1.6vw,19px);
  line-height: 1.75;
}

.body-sm {
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-78);
}

/* ── 4. Layout ────────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

.section-pad {
  padding-block: clamp(64px,10vw,120px);
}

/* ── 5. Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding-inline: 20px;
  border-radius: var(--r-md);
  font: 500 16px/1 'DM Sans', sans-serif;
  color: var(--ink);
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow .2s var(--ease), opacity .15s;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[disabled] {
  background: var(--surface-2);
  color: var(--ink-52);
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — solid purple */
.btn-primary {
  background: var(--purple);
  color: #EEEEF8;
}
.btn-primary:hover { box-shadow: var(--shadow-cta); }

/* Gradient CTA */
.btn-cta {
  background: var(--grad-brand);
  color: #fff;
}
.btn-cta:hover { box-shadow: var(--shadow-cta); }

/* Outline */
.btn-outline {
  background: transparent;
  border: 1px solid var(--line-24);
}
.btn-outline:hover { border-color: var(--line-18); background: var(--surface-2); }

/* Secondary */
.btn-secondary {
  background: var(--surface-2);
  border: 1px solid var(--line-18);
}
.btn-secondary:hover { border-color: var(--line-24); }

/* Icon button */
.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--line-18);
  background: transparent;
}

/* Header height variant */
.btn-sm { height: 44px; padding-inline: 16px; font-size: 14px; }

/* ── 6. Inputs ────────────────────────────────────────────────────────────── */
.input {
  display: block;
  width: 100%;
  height: 52px;
  padding-inline: 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line-14);
  color: var(--ink);
  font: 300 16px/1 'DM Sans', sans-serif;
  outline: none;
  transition: border-color .15s;
}
.input::placeholder { color: var(--ink-52); }
.input:focus { border-color: var(--blue); }
.input.error { border-color: var(--red); }
.input.changed { border-color: rgba(245,158,11,.55); }

/* On-page: darker background */
.input-page { background: var(--bg); }

textarea.input { height: auto; padding-block: 14px; resize: vertical; line-height: 1.5; }

/* ── 7. Card ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-10);
  padding: 20px;
}
.card-lg { padding: 24px; }

/* Metric card — coloured top stripe */
.card-metric {
  position: relative;
  overflow: hidden;
}
.card-metric::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--metric-color, var(--purple));
}

/* ── 8. Tags / chips ──────────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding-inline: 10px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--tag-color, var(--line-24));
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tag-color, var(--ink-78));
}

/* Status tag colours */
.tag-active   { --tag-color: var(--green); }
.tag-draft    { --tag-color: var(--ink-52); }
.tag-closed   { --tag-color: var(--ink-52); }
.tag-suspended{ --tag-color: var(--red); }
.tag-paused   { --tag-color: var(--amber); }
.tag-live     { --tag-color: var(--blue); }

/* ── 9. Toggle ────────────────────────────────────────────────────────────── */
.toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--line-18);
  transition: background .2s var(--ease);
  cursor: pointer;
}
.toggle input:checked + .toggle-track { background: var(--blue); }
.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  transition: left .2s var(--ease);
}
.toggle input:checked + .toggle-track::after { left: 23px; }

/* ── 10. Progress bar ─────────────────────────────────────────────────────── */
.progress {
  height: 6px;
  border-radius: 10px;
  background: var(--line-10);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 10px;
  background: var(--grad-bar);
  transition: width .4s var(--ease);
}
.progress-fill.warn { background: var(--amber); }
.progress-fill.full { background: var(--red); }
.progress-fill.grey { background: var(--grey-bar); }

/* ── 11. Banners ──────────────────────────────────────────────────────────── */
.banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  font-size: 14px;
}
.banner i { font-size: 22px; flex-shrink: 0; margin-top: 1px; }

.banner-info {
  background: rgba(31,147,255,.06);
  border: 1px solid rgba(31,147,255,.35);
  color: var(--blue-2);
}
.banner-info i { color: var(--blue); }

.banner-warn {
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.5);
  color: var(--amber);
}

.banner-bad {
  background: rgba(240,64,64,.08);
  border: 1px solid rgba(240,64,64,.5);
  color: var(--red);
}

.banner-ok {
  background: rgba(0,200,120,.06);
  border: 1px solid rgba(0,200,120,.35);
  color: var(--green);
}

.banner-body { flex: 1; }
.banner-title { font-weight: 500; margin-bottom: 2px; }

/* ── 12. Modal overlay ────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,5,12,.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 900;
  animation: ev-fade-up .25s var(--ease);
}
.modal-panel {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-brand);
  animation: ev-scale-in .25s var(--ease);
}
.modal-panel.modal-danger { box-shadow: var(--shadow-danger); }
.modal-panel.modal-pay    { max-width: 460px; }

/* ── 13. Toast ────────────────────────────────────────────────────────────── */
.toast-wrap {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  min-width: 280px;
  max-width: 400px;
  pointer-events: all;
  animation: ev-fade-up .3s var(--ease);
  border: 1px solid transparent;
}
.toast-ok   { border-color: rgba(0,200,120,.4); }
.toast-err  { border-color: rgba(240,64,64,.4); }
.toast-warn { border-color: rgba(245,158,11,.4); }
.toast i { font-size: 22px; flex-shrink: 0; }
.toast-ok i   { color: var(--green); }
.toast-err i  { color: var(--red); }
.toast-warn i { color: var(--amber); }
.toast-title  { font: 500 14px/1.2 'DM Sans',sans-serif; }
.toast-body   { font-size: 13px; color: var(--ink-78); margin-top: 2px; }

/* ── 14. Segmented control ────────────────────────────────────────────────── */
.seg {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--line-10);
  gap: 2px;
}
.seg-item {
  height: 40px;
  padding-inline: 16px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--ink-52);
  font: 500 14px/1 'DM Sans',sans-serif;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.seg-item.active, .seg-item[aria-selected="true"] {
  background: var(--surface-2);
  color: var(--ink);
}

/* ── 15. Checkbox ─────────────────────────────────────────────────────────── */
.checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.checkbox {
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid rgba(238,238,248,.4);
  background: transparent;
  appearance: none;
  cursor: pointer;
  position: relative;
  transition: background .15s, border-color .15s;
  margin-top: 2px;
}
.checkbox:checked {
  background: var(--purple);
  border-color: var(--purple);
}
.checkbox:checked::after {
  content: '';
  position: absolute;
  top: 4px; left: 7px;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

/* ── 16. Radio card ───────────────────────────────────────────────────────── */
.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--bg);
  border: 1px solid var(--line-10);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.radio-card.selected {
  background: var(--surface-2);
  border-color: var(--purple);
  box-shadow: var(--shadow-selected);
}
.radio-ring {
  width: 18px; height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--line-24);
  position: relative;
  margin-top: 2px;
  transition: border-color .15s;
}
.radio-card.selected .radio-ring {
  border-color: var(--purple-2);
}
.radio-card.selected .radio-ring::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--purple-2);
}

/* ── 17. Code boxes (OTP) ─────────────────────────────────────────────────── */
.code-boxes {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.code-box {
  width: 48px; height: 56px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-14);
  background: var(--surface);
  text-align: center;
  font: 700 22px/56px 'Manrope',sans-serif;
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}
.code-box:focus, .code-box.active { border-color: var(--blue); }
.code-box.filled { border-color: rgba(238,238,248,.32); }

/* ── 18. Tabler Icons ─────────────────────────────────────────────────────── */
.ti {
  font-family: 'tabler-icons' !important;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ti-alert-circle:before{content:"\ea05"}
.ti-arrow-left:before{content:"\ea19"}
.ti-arrow-right:before{content:"\ea1f"}
.ti-battery-3:before{content:"\ea31"}
.ti-briefcase:before{content:"\ea46"}
.ti-camera:before{content:"\ea54"}
.ti-chart-bar:before{content:"\ea59"}
.ti-check:before{content:"\ea5e"}
.ti-chevron-down:before{content:"\ea5f"}
.ti-circle-check:before{content:"\ea67"}
.ti-clock:before{content:"\ea70"}
.ti-credit-card:before{content:"\ea84"}
.ti-crown:before{content:"\ed12"}
.ti-device-mobile:before{content:"\ea8a"}
.ti-device-mobile-check:before{content:"\f8af"}
.ti-device-tv:before{content:"\ea8d"}
.ti-download:before{content:"\ea96"}
.ti-eye:before{content:"\ea9a"}
.ti-eye-off:before{content:"\ecf0"}
.ti-file-text:before{content:"\eaa2"}
.ti-file-zip:before{content:"\ed4e"}
.ti-gift:before{content:"\eb68"}
.ti-history:before{content:"\ebea"}
.ti-home:before{content:"\eac1"}
.ti-id-badge:before{content:"\eff7"}
.ti-layout-grid:before{content:"\edba"}
.ti-lock:before{content:"\eae2"}
.ti-mail:before{content:"\eae5"}
.ti-mail-code:before{content:"\f93a"}
.ti-map-pin:before{content:"\eae8"}
.ti-menu-2:before{content:"\ec42"}
.ti-minus:before{content:"\eaf2"}
.ti-palette:before{content:"\eb01"}
.ti-photo:before{content:"\eb0a"}
.ti-photo-hexagon:before{content:"\fc4b"}
.ti-plus:before{content:"\eb0b"}
.ti-progress:before{content:"\fa0d"}
.ti-qrcode:before{content:"\eb11"}
.ti-receipt:before{content:"\edfd"}
.ti-send:before{content:"\eb1e"}
.ti-ticket:before{content:"\eb3d"}
.ti-upload:before{content:"\eb47"}
.ti-wifi:before{content:"\eb52"}
.ti-world:before{content:"\eb54"}
.ti-x:before{content:"\eb55"}
.ti-calendar:before{content:"\ea53"}
.ti-cloud-upload:before{content:"\ea75"}
.ti-photo-plus:before{content:"\f363"}
.ti-scan:before{content:"\ebc8"}
.ti-clock-pause:before{content:"\f548"}
.ti-device-desktop:before{content:"\ea89"}
.ti-shield-lock:before{content:"\ed58"}
.ti-user:before{content:"\eb4d"}
.ti-calendar-event:before{content:"\ea52"}
.ti-building:before{content:"\ea4f"}
.ti-scale:before{content:"\ebc2"}
.ti-receipt-refund:before{content:"\edfc"}
.ti-file-pencil:before{content:"\f039"}
.ti-message-circle:before{content:"\eaed"}
.ti-cookie:before{content:"\fdb1"}
.ti-layout-dashboard:before{content:"\f02c"}
.ti-users:before{content:"\ebf2"}
.ti-settings:before{content:"\eb20"}
.ti-logout:before{content:"\eba8"}
.ti-broadcast:before{content:"\f1e9"}
.ti-pencil:before{content:"\eb04"}
.ti-clock-off:before{content:"\f0cf"}
.ti-ban:before{content:"\ea2e"}
.ti-database:before{content:"\ea88"}
.ti-lock-x:before{content:"\f936"}
.ti-cash:before{content:"\ea55"}
.ti-search:before{content:"\eb1c"}
.ti-copy:before{content:"\ea7a"}
.ti-trash:before{content:"\eb41"}
.ti-wand:before{content:"\ebcb"}
.ti-user-cog:before{content:"\f9d4"}
.ti-qrcode-off:before{content:"\f41e"}
.ti-alert-triangle:before{content:"\ea06"}
.ti-calendar-plus:before{content:"\ebba"}
.ti-circle-x:before{content:"\ea6a"}
.ti-user-off:before{content:"\ecf9"}
.ti-user-check:before{content:"\eb49"}
.ti-login:before{content:"\eba7"}
.ti-player-pause:before{content:"\ed45"}
.ti-player-play:before{content:"\ed46"}
.ti-external-link:before{content:"\ea99"}
.ti-info-circle:before{content:"\eac5"}
.ti-user-share:before{content:"\f9d8"}
.ti-mail-x:before{content:"\f949"}
.ti-receipt-2:before{content:"\edfa"}

/* ── 19. Animations ───────────────────────────────────────────────────────── */
@keyframes ev-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ev-scale-in {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes ev-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(147,39,143,.5), 0 0 16px rgba(147,39,143,.2); }
  50%       { box-shadow: 0 0 0 1px rgba(31,147,255,.6), 0 0 32px rgba(31,147,255,.35); }
}
@keyframes bgs {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes ev-fly {
  0%   { opacity: 0; transform: translate(0,0) scale(.6) rotate(-8deg); }
  15%  { opacity: 1; transform: translate(0,-10px) scale(1) rotate(-4deg); }
  80%  { opacity: 1; transform: translate(150px,-175px) scale(1.15) rotate(0); }
  100% { opacity: 0; transform: translate(150px,-175px) scale(1.3); }
}

.spin { animation: spin .8s linear infinite; }

/* ── 20. Utilities ────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.flex       { display: flex; }
.flex-col   { display: flex; flex-direction: column; }
.items-center   { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--ink-52); }
.subtle { color: var(--ink-78); }

/* ── 21. Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── 22. Breakpoints ──────────────────────────────────────────────────────── */
/* 480 (roomy), 900 (tablet), 1024 (desktop nav), 1200 (partners 5-up) */
@media (max-width: 1024px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 1025px) {
  .hide-desktop { display: none !important; }
}