/* ==========================================================================
   Academy — E-Learning design tokens and site styles
   Companion to "design and content/DESIGN.md". Light theme, magenta accent.
   The single stylesheet for the frontend: tokens first, then components.

   THE ONE RULE: #f50db4 is 3.75:1 on white. It clears the 3:1 required of
   non-text UI, and fails the 4.5:1 required of text — in both directions.
   Use --color-magenta for fills, indicators and icons.
   Use --color-magenta-ink for anything that is, or carries, text.

   TOKENS
   BASE
   1 — Buttons and controls
   2 — Popovers
   3 — Topbar
   4 — Masthead
   5 — Mobile drawer
   6 — Cart slide-over
   7 — Preloader
   8 — Footer
   9 — Flash toasts
  10 — Cookie consent
  11 — Page banner
  12 — Auth split screen
  13 — Contact
  14 — Checkout
  15 — Account dashboard
  16 — Receipt
  17 — Static page
  18 — Order result
  19 — Course catalogue
  20 — Course detail
  21 — Cart and course cart
  22 — Buy credits
  23 — About us
  24 — Home
  25 — Page atmosphere
   ========================================================================== */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------------
     Magenta ramp — the entire chromatic identity
     ------------------------------------------------------------------ */
  --color-magenta-wash: #fff0fa;      /* tinted surface */
  --color-magenta-tint: #ffe4f5;      /* accent badge / chip background */
  --color-magenta-edge: #ffc2e9;      /* decorative border on washed surfaces */

  --color-magenta: #f50db4;           /* 3.75:1 — NON-TEXT fills, indicators, focus */
  --color-magenta-ink: #c40a8f;       /* 5.54:1 — links, accent text, CTA fill */
  --color-magenta-ink-hover: #a80a7b; /* 7.01:1 — on light, hover goes darker */
  --color-magenta-ink-active: #8c0866;/* 8.97:1 — pressed, accent text on wash */

  /* ------------------------------------------------------------------
     Ink and neutrals — contrast measured against #ffffff
     ------------------------------------------------------------------ */
  --color-ink-black: #0e0f12;         /* 19.2:1 */
  --color-obsidian: #1e1e24;          /* 16.6:1 */
  --color-graphite: #2d2d34;          /* 13.7:1 */
  --color-slate: #5c6068;             /*  6.3:1 */
  --color-ash: #8e929b;               /*  3.1:1 — glyphs, control borders, placeholders */
  --color-fog: #d2d4d7;
  --color-mist: #e4e7ed;
  --color-mist-light: #f3f5f8;
  --color-pure-white: #ffffff;

  /* ------------------------------------------------------------------
     Surfaces
     ------------------------------------------------------------------ */
  --surface-canvas: #ffffff;
  --surface-subtle: #f8f9fc;          /* alternating bands, dashboard ground */
  --surface-card: #ffffff;
  --surface-raised: #f3f5f8;          /* row hover, table headers, secondary button */
  --surface-magenta-wash: var(--color-magenta-wash);
  --surface-inset: #1e1e24;           /* video letterbox — dark inside a light theme */

  /* ------------------------------------------------------------------
     Borders
     ------------------------------------------------------------------ */
  --border-subtle: #eef0f4;
  --border-default: #e4e7ed;          /* 1.2:1 — decorative, never a control's only edge */
  --border-strong: #d2d4d7;
  --border-control: #8e929b;          /* 3.1:1 — inputs, checkboxes, radios */

  --border-hairline: 1px solid var(--border-subtle);
  --border-card: 1px solid var(--border-default);
  --border-input: 1px solid var(--border-control);

  /* ------------------------------------------------------------------
     Text
     ------------------------------------------------------------------ */
  --text-primary: var(--color-ink-black);
  --text-secondary: var(--color-slate);
  --text-muted: var(--color-graphite);
  --text-disabled: var(--color-ash);   /* 3.1:1 — placeholders and disabled only */
  --text-on-accent: #ffffff;           /* 5.5:1 on --color-magenta-ink */

  /* ------------------------------------------------------------------
     Semantic status — tint / border / text triplets
     Every text value clears 4.5:1 on white AND on its own tint.
     ------------------------------------------------------------------ */
  --status-success-bg: #ecfdf5;
  --status-success-border: #a7f3d0;
  --status-success-text: #047857;     /* 5.5:1 white, 5.2:1 tint */

  --status-error-bg: #fef2f2;
  --status-error-border: #fecaca;
  --status-error-text: #c31c1c;       /* 6.0:1 white, 5.5:1 tint */

  --status-warning-bg: #fffbeb;
  --status-warning-border: #fde68a;
  --status-warning-text: #b45309;     /* 5.0:1 white, 4.8:1 tint */

  --status-info-bg: #f5f3ff;          /* violet, not blue — stays in the magenta family */
  --status-info-border: #ddd6fe;
  --status-info-text: #6d28d9;        /* 7.1:1 white, 6.5:1 tint */

  /* ------------------------------------------------------------------
     Learning state — always pair with a glyph and a text label
     ------------------------------------------------------------------ */
  --state-completed: var(--status-success-text);
  --state-in-progress: var(--color-magenta-ink);       /* label and title */
  --state-in-progress-fill: var(--color-magenta);      /* bar fill and edge */
  --state-not-started: var(--color-ash);
  --state-locked: var(--color-ash);
  --state-locked-bg: var(--color-mist-light);
  --state-credit: var(--color-magenta-ink);
  --state-credit-expiring: var(--status-warning-text);

  --progress-track: var(--color-mist);
  --progress-fill: var(--color-magenta);
  --progress-fill-complete: var(--state-completed);

  /* ------------------------------------------------------------------
     Badges
     ------------------------------------------------------------------ */
  --badge-bg: var(--color-mist-light);
  --badge-text: var(--color-graphite);
  --badge-border: var(--border-default);

  --badge-accent-bg: var(--color-magenta-tint);
  --badge-accent-text: var(--color-magenta-ink-active);
  --badge-accent-border: var(--color-magenta-edge);

  /* ------------------------------------------------------------------
     Typography — families
     ------------------------------------------------------------------ */
  --font-ui: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-prose: 'Lora', 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ------------------------------------------------------------------
     Typography — scale, leading, tracking
     ------------------------------------------------------------------ */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.15px;

  --text-body-sm: 13px;
  --leading-body-sm: 1.5;

  --text-body: 15px;
  --leading-body: 1.55;

  --text-prose: 17px;                 /* lesson reading size */
  --leading-prose: 1.7;

  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.2px;

  --text-heading-sm: 22px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: -0.4px;

  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.6px;

  --text-heading-lg: 44px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.88px;

  --text-display: 56px;
  --leading-display: 1.05;
  --tracking-display: -1.8px;

  /* Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Reading measure */
  --measure-prose: 68ch;
  --measure-narrow: 52ch;

  /* ------------------------------------------------------------------
     Spacing scale (base 4px)
     ------------------------------------------------------------------ */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-112: 112px;

  /* ------------------------------------------------------------------
     Layout and sizing
     ------------------------------------------------------------------ */
  --page-max-width: 1240px;
  --topbar-height: 40px;
  --header-height: 72px;
  --section-gap: 80px;
  --card-padding: 20px;
  --element-gap: 16px;
  --grid-gutter: 24px;
  --touch-target-min: 44px;

  --sidebar-curriculum-width: 320px;
  --sidebar-filter-width: 280px;
  --panel-purchase-width: 360px;

  /* ------------------------------------------------------------------
     Border radius
     ------------------------------------------------------------------ */
  --radius-sm: 8px;
  --radius-media: 10px;
  --radius-cards: 14px;
  --radius-buttons: 60px;
  --radius-inputs: 72px;
  --radius-pill-badge: 9999px;

  /* ------------------------------------------------------------------
     Shadows — soft, tinted with ink rather than pure black
     ------------------------------------------------------------------ */
  --shadow-subtle: 0 2px 8px rgba(14, 15, 18, 0.04);
  --shadow-hover: 0 12px 28px -6px rgba(14, 15, 18, 0.08);
  --shadow-overlay: 0 16px 36px -8px rgba(14, 15, 18, 0.12);
  --shadow-accent: 0 6px 20px -4px rgba(196, 10, 143, 0.30);

  /* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-magenta);

  /* Media */
  --aspect-thumbnail: 16 / 9;
  --scrim-thumbnail: rgba(14, 15, 18, 0.64);
  --scrim-video: linear-gradient(to top, rgba(14, 15, 18, 0.85), rgba(14, 15, 18, 0));
  --scrim-overlay: rgba(14, 15, 18, 0.48);   /* behind a slide-over */

  /* Stacking — every fixed layer in the header is declared here */
  --z-sticky: 50;
  --z-popover: 60;
  --z-scrim: 90;
  --z-panel: 100;
  --z-toast: 120;
  --z-consent: 140;
  --z-preloader: 9999;

  --toast-offset: calc(var(--topbar-height) + var(--header-height) + var(--spacing-16));

  /* ------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------ */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 200ms ease;
  --transition-panel: 240ms var(--ease-out-soft);
  --transition-progress: 400ms var(--ease-out-soft);
}

/* ==========================================================================
   Responsive — largest type steps clamp down, sections tighten
   ========================================================================== */
@media (max-width: 991px) {
  :root {
    --toast-offset: calc(var(--header-height) + var(--spacing-16));
  }
}

@media (max-width: 900px) {
  :root {
    --text-display: 40px;
    --text-heading-lg: 32px;
    --text-heading: 26px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-gap: 48px;
    --grid-gutter: 16px;
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-base: 1ms linear;
    --transition-panel: 1ms linear;
    --transition-progress: 1ms linear;
  }
}

/* ==========================================================================
   BASE
   Enough ground for the tokens to take effect: no component below relies on a
   browser default.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Set by the header script while a slide-over holds the screen. */
body.is-locked {
  overflow: hidden;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Figures that change in place — balances, quantities, currency codes. The one
   scoped use of the mono family. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   1 — Buttons and controls
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-24);
  border: 1px solid transparent;
  border-radius: var(--radius-buttons);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base),
              border-color var(--transition-base), box-shadow var(--transition-base);
}

/* The fill is --color-magenta-ink, never --color-magenta: white only clears AA
   on the darker step. */
.btn--primary {
  background-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
}

.btn--primary:hover {
  background-color: var(--color-magenta-ink-hover);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-accent);
}

.btn--primary:active {
  background-color: var(--color-magenta-ink-active);
}

.btn--ghost {
  background-color: var(--surface-card);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn--ghost:hover {
  background-color: var(--color-magenta-wash);
  border-color: var(--color-magenta-edge);
  color: var(--color-magenta-ink);
}

.btn--quiet {
  background-color: transparent;
  color: var(--text-secondary);
}

.btn--quiet:hover {
  background-color: var(--surface-raised);
  color: var(--text-primary);
}

/* Compact step for the desktop topbar, where the band is 40px. Coarse pointers
   get the full target back below. */
.btn--sm {
  min-height: 32px;
  padding: 0 var(--spacing-16);
  font-size: var(--text-body-sm);
}

.btn--block {
  width: 100%;
}

.iconbtn {
  display: inline-grid;
  place-items: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-pill-badge);
  color: var(--text-secondary);
  font-size: var(--text-body);
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base),
              border-color var(--transition-base);
}

.iconbtn:hover {
  background-color: var(--surface-raised);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Language and currency choices inside the drawer. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-16);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-base), background-color var(--transition-base),
              border-color var(--transition-base);
}

.pill:hover {
  border-color: var(--color-magenta-edge);
  color: var(--color-magenta-ink);
}

.pill.is-active {
  background-color: var(--color-magenta-tint);
  border-color: var(--color-magenta-edge);
  color: var(--color-magenta-ink-active);
}

@media (pointer: coarse) {
  .btn--sm {
    min-height: var(--touch-target-min);
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill-badge);
  background-color: var(--surface-subtle);
  border: 1px solid var(--border-default);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate);
}

.badge--brand {
  background-color: var(--color-magenta-tint);
  border-color: var(--color-magenta-edge);
  color: var(--color-magenta-ink);
}

.badge--brand i {
  color: var(--color-magenta-ink);
  font-size: 11px;
}

/* ==========================================================================
   2 — Popovers
   One panel treatment for every dropdown in the header: language, currency,
   categories and the account menu. Opened by the header script, which owns
   aria-expanded and closes on outside click or Escape.
   ========================================================================== */

.pop {
  position: relative;
}

.topbar__right,
.topbar__set,
.mainnav,
.masthead__actions {
  align-self: stretch;
}

.topbar .pop,
.mainnav .pop,
.masthead__actions .pop {
  align-self: stretch;
  display: flex;
  align-items: center;
}

.pop__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  background: none;
  border: 0;
  border-radius: var(--radius-buttons);
  font-family: inherit;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
}

.pop__chev {
  font-size: 10px;
  color: currentColor;
  transition: transform var(--transition-base);
}

.pop.is-open .pop__chev {
  transform: rotate(180deg);
}

.pop__panel {
  position: absolute;
  top: calc(100% + var(--spacing-8));
  left: 0;
  z-index: var(--z-popover);
  min-width: 220px;
  padding: var(--spacing-8);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-base), transform var(--transition-base),
              visibility var(--transition-base);
}

.pop__panel--end {
  left: auto;
  right: 0;
}

.pop__panel--wide {
  width: min(88vw, 480px);
}

.pop__panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: var(--spacing-8);
}

.pop.is-open > .pop__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (hover: hover) and (min-width: 992px) {
  .pop:hover > .pop__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .pop:hover .pop__chev {
    transform: rotate(180deg);
  }

  .mainnav .pop:hover > .pop__trigger {
    background-color: var(--color-magenta-wash);
    color: var(--color-magenta-ink);
  }

  .topbar .pop:hover > .pop__trigger {
    background-color: var(--color-magenta-tint);
  }

  .masthead__actions .pop:hover > .pop__trigger {
    background-color: var(--surface-raised);
  }
}

.pop__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-12);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.pop__item:hover {
  background-color: var(--surface-raised);
  color: var(--text-primary);
}

.pop__item.is-active {
  background-color: var(--color-magenta-wash);
  color: var(--color-magenta-ink-active);
  font-weight: var(--font-weight-medium);
}

.pop__sym {
  display: inline-grid;
  place-items: center;
  width: 20px;
  color: var(--color-ash);
}

.pop__item.is-active .pop__sym {
  color: var(--color-magenta-ink);
}

.pop__head {
  padding: var(--spacing-8) var(--spacing-12) var(--spacing-12);
  margin-bottom: var(--spacing-8);
  border-bottom: var(--border-hairline);
}

.pop__name {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.pop__sub {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin: var(--spacing-4) 0 0;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-magenta-ink);
}

.pop__rule {
  display: block;
  height: 1px;
  margin: var(--spacing-8) var(--spacing-12);
  background-color: var(--border-subtle);
}

/* Categories list inside the wide panel. One level of rows; a parent's
   children sit beneath it as plain links rather than a nested flyout. */
.cats {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cats__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-12);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.cats__row:hover {
  background-color: var(--color-magenta-wash);
  color: var(--color-magenta-ink);
}

.cats__go {
  font-size: 11px;
  color: var(--color-ash);
}

.cats__row:hover .cats__go {
  color: var(--color-magenta);
}

.cats__subs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4) var(--spacing-12);
  margin: 0;
  padding: var(--spacing-4) var(--spacing-12) var(--spacing-8);
  list-style: none;
}

.cats__sub {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  text-decoration: none;
}

.cats__sub:hover {
  color: var(--color-magenta-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cats__none {
  margin: 0;
  padding: var(--spacing-12);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

/* ==========================================================================
   3 — Topbar
   A washed 40px strip above the masthead carrying contact, language, currency
   and — for a signed-out visitor — login and register. It scrolls away; the
   masthead below it sticks. Below 992px the drawer carries all of this, so the
   strip is dropped rather than crushed.
   ========================================================================== */

.topbar {
  background-color: var(--color-magenta-wash);
  border-bottom: 1px solid var(--color-magenta-edge);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  width: min(100%, var(--page-max-width));
  min-height: var(--topbar-height);
  margin-inline: auto;
  padding-inline: var(--grid-gutter);
}

.topbar__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
  color: var(--color-magenta-ink);
  text-decoration: none;
}

.topbar__mail:hover {
  color: var(--color-magenta-ink-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.topbar__set {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.topbar .pop__trigger {
  min-height: 32px;
  padding: 0 var(--spacing-12);
  color: var(--color-magenta-ink);
}

.topbar .pop__trigger:hover {
  background-color: var(--color-magenta-tint);
}

.topbar__rule {
  width: 1px;
  height: 20px;
  background-color: var(--color-magenta-edge);
}

.topbar__auth {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

@media (max-width: 991px) {
  .topbar {
    display: none;
  }
}

/* ==========================================================================
   4 — Masthead
   72px sticky bar: logo, navigation, credit balance, cart and account.
   Gains a subtle shadow once the page scrolls.
   ========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--surface-canvas);
  border-bottom: 1px solid var(--border-default);
  transition: box-shadow var(--transition-base);
}

.masthead.is-stuck {
  box-shadow: var(--shadow-subtle);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  width: min(100%, var(--page-max-width));
  min-height: var(--header-height);
  margin-inline: auto;
  padding-inline: var(--grid-gutter);
}

.masthead__logo {
  flex: none;
  display: inline-flex;
  align-items: center;
}

.masthead__logo img {
  display: block;
  width: auto;
  max-height: 44px;
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-inline-start: auto;
}

/* --- Primary navigation --- */

.mainnav {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.mainnav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-12);
  background: none;
  border: 0;
  border-radius: var(--radius-buttons);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.mainnav__link:hover {
  background-color: var(--color-magenta-wash);
  color: var(--color-magenta-ink);
}

.mainnav__link.is-active {
  background-color: var(--color-magenta-tint);
  color: var(--color-magenta-ink-active);
}

/* --- Credit balance chip --- */

.credit {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-16);
  background-color: var(--badge-accent-bg);
  border: 1px solid var(--badge-accent-border);
  border-radius: var(--radius-pill-badge);
  color: var(--badge-accent-text);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.credit:hover {
  background-color: var(--color-magenta-wash);
}

.credit i {
  font-size: 13px;
  color: var(--color-magenta-ink);
}

.credit .num {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}

/* --- Cart trigger --- */

.cartbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-12);
  background-color: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill-badge);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base),
              border-color var(--transition-base);
}

.cartbtn:hover {
  background-color: var(--color-magenta-wash);
  border-color: var(--color-magenta-edge);
  color: var(--color-magenta-ink);
}

/* The count carries white text, so it takes the darker magenta step. */
.cartbtn__count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--spacing-4);
  background-color: var(--color-magenta-ink);
  border-radius: var(--radius-pill-badge);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--text-on-accent);
}

/* --- Account trigger --- */

.user {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-12) 0 var(--spacing-4);
  background: none;
  border: 0;
  border-radius: var(--radius-buttons);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.user:hover {
  background-color: var(--surface-raised);
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  background-color: var(--color-magenta-tint);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink-active);
  text-transform: uppercase;
}

.avatar--lg {
  width: 48px;
  height: 48px;
  font-size: var(--text-subheading);
}

/* Desktop-only and mobile-only members of the masthead. */
@media (max-width: 991px) {
  .mainnav,
  .is-desktop {
    display: none;
  }
}

@media (min-width: 992px) {
  .is-mobile {
    display: none;
  }
}

/* ==========================================================================
   5 — Mobile drawer
   Slides in from the leading edge and carries everything the topbar and
   navigation hold on desktop. Categories use a native <details> accordion.
   ========================================================================== */

/* Shared by the drawer and the cart — only one is ever open. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background-color: var(--scrim-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.scrim.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  width: min(88vw, 360px);
  background-color: var(--surface-card);
  box-shadow: var(--shadow-overlay);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--transition-panel), visibility var(--transition-panel);
}

.drawer.is-open {
  transform: none;
  visibility: visible;
}

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  flex: none;
  padding: var(--spacing-16) var(--spacing-20);
  border-bottom: 1px solid var(--border-default);
}

.drawer__top img {
  display: block;
  width: auto;
  max-height: 36px;
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-20);
}

.drawer__user {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-12);
  margin-bottom: var(--spacing-20);
  background-color: var(--color-magenta-wash);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-cards);
}

.drawer__user-name {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.drawer__user-credits {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-top: var(--spacing-4);
  font-size: var(--text-body-sm);
  color: var(--color-magenta-ink);
  text-decoration: none;
}

.drawer__user-credits:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.drawer__nav {
  display: grid;
  gap: 2px;
}

.drawer__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-12);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.drawer__link:hover {
  background-color: var(--surface-raised);
}

.drawer__link.is-active {
  background-color: var(--color-magenta-tint);
  color: var(--color-magenta-ink-active);
}

.acc summary.drawer__link {
  cursor: pointer;
  list-style: none;
}

.acc summary.drawer__link::-webkit-details-marker {
  display: none;
}

.acc__chev {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--color-ash);
  transition: transform var(--transition-base);
}

.acc[open] .acc__chev {
  transform: rotate(180deg);
}

.acc__body {
  display: grid;
  gap: 2px;
  padding: var(--spacing-4) 0 var(--spacing-8);
}

.catrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-height: 56px;
  padding: var(--spacing-8);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.catrow:hover {
  background-color: var(--color-magenta-wash);
  color: var(--color-magenta-ink);
}

.catrow__thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background-color: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-media);
  color: var(--color-ash);
  font-size: var(--text-body-sm);
}

.catrow__go {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--color-ash);
}

.drawer__prefs {
  margin-top: var(--spacing-24);
  padding-top: var(--spacing-20);
  border-top: var(--border-hairline);
}

.drawer__label {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  color: var(--text-secondary);
}

.drawer__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-20);
}

.drawer__pills:last-child {
  margin-bottom: 0;
}

.drawer__foot {
  display: grid;
  gap: var(--spacing-8);
  flex: none;
  padding: var(--spacing-16) var(--spacing-20);
  background-color: var(--surface-subtle);
  border-top: 1px solid var(--border-default);
}

/* ==========================================================================
   6 — Cart slide-over
   Slides in from the trailing edge. Scrolling item list between a fixed head
   and a summary foot, so the totals never leave the screen.
   ========================================================================== */

.cart {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  width: min(92vw, var(--panel-purchase-width));
  background-color: var(--surface-card);
  box-shadow: var(--shadow-overlay);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition-panel), visibility var(--transition-panel);
}

.cart.is-open {
  transform: none;
  visibility: visible;
}

.cart__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  flex: none;
  padding: var(--spacing-16) var(--spacing-20);
  border-bottom: 1px solid var(--border-default);
}

.cart__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.cart__qty {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--spacing-8);
  background-color: var(--badge-accent-bg);
  border: 1px solid var(--badge-accent-border);
  border-radius: var(--radius-pill-badge);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--badge-accent-text);
}

.cart__scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-16) var(--spacing-20);
}

.cart__list {
  display: grid;
  gap: var(--spacing-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart__item {
  display: grid;
  grid-template-columns: 64px 1fr var(--touch-target-min);
  align-items: start;
  gap: var(--spacing-12);
  padding: var(--spacing-12);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  transition: border-color var(--transition-base);
}

.cart__item:hover {
  border-color: var(--color-magenta-edge);
}

.cart__img {
  display: grid;
  place-items: center;
  width: 64px;
  aspect-ratio: var(--aspect-thumbnail);
  overflow: hidden;
  background-color: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-media);
}

.cart__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart__img--credits {
  background-color: var(--color-magenta-tint);
  border-color: var(--color-magenta-edge);
  color: var(--color-magenta-ink);
}

.cart__name {
  margin: 0;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-body-sm);
  color: var(--text-primary);
}

.cart__level {
  display: inline-flex;
  align-items: center;
  margin-top: var(--spacing-4);
  padding: 2px var(--spacing-8);
  background-color: var(--badge-accent-bg);
  border: 1px solid var(--badge-accent-border);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  color: var(--badge-accent-text);
}

.cart__meta {
  margin: var(--spacing-4) 0 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-secondary);
}

.cart__price {
  margin: var(--spacing-4) 0 0;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--state-credit);
}

.cart__remove {
  display: grid;
  place-items: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: var(--radius-sm);
  color: var(--color-ash);
  font-size: var(--text-body-sm);
  text-decoration: none;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.cart__remove:hover {
  background-color: var(--status-error-bg);
  color: var(--status-error-text);
}

.cart__empty {
  display: grid;
  justify-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-48) var(--spacing-16);
  text-align: center;
}

.cart__empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background-color: var(--surface-raised);
  border-radius: var(--radius-pill-badge);
  color: var(--color-ash);
  font-size: var(--text-heading-sm);
}

.cart__empty-text {
  max-width: var(--measure-narrow);
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.cart__foot {
  flex: none;
  padding: var(--spacing-16) var(--spacing-20);
  background-color: var(--surface-subtle);
  border-top: 1px solid var(--border-default);
}

.cart__summary {
  display: grid;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-16);
}

.cart__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
}

.cart__row-label {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.cart__row-value {
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.cart__row-value small {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
}

.cart__row--muted .cart__row-value {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.cart__actions {
  display: grid;
  gap: var(--spacing-8);
}

/* ==========================================================================
   7 — Preloader
   A level ladder climbing beside the site name, over an indeterminate rail.
   The product sorts courses into levels, so the mark is three ascending steps
   filling in sequence rather than a spinning glyph.

   jQuery fades the sheet out on load (assets/js/script.js), so the layout only
   has to survive being hidden with display: none.
   ========================================================================== */

#preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: grid;
  place-items: center;
  padding: var(--spacing-24);
  background-color: var(--surface-subtle);
}

.pre {
  width: min(100%, 300px);
  padding: var(--spacing-32) var(--spacing-28);
  text-align: center;
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

/* The ladder: three steps, each filling from the bottom one after the next.
   The fill is a background layer rather than a child element, so a step stays
   a single empty span in the markup. */
.pre__ladder {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--spacing-8);
  height: 40px;
  margin-bottom: var(--spacing-24);
}

.pre__step {
  width: 12px;
  border-radius: var(--radius-sm);
  background-color: var(--progress-track);
  background-image: linear-gradient(var(--progress-fill), var(--progress-fill));
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 0%;
  /* A loop, not a transition — the 400ms ceiling in DESIGN.md governs state
     changes, and a step still reads as one beat of that length. */
  animation: pre-climb 1400ms var(--ease-out-soft) infinite;
}

.pre__step:nth-child(1) {
  height: 16px;
}

.pre__step:nth-child(2) {
  height: 28px;
  animation-delay: 160ms;
}

.pre__step:nth-child(3) {
  height: 40px;
  animation-delay: 320ms;
}

@keyframes pre-climb {
  0%,
  100% {
    background-size: 100% 0%;
  }

  40%,
  70% {
    background-size: 100% 100%;
  }
}

.pre__name {
  margin: 0;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.pre__rail {
  display: block;
  height: 6px;
  margin: var(--spacing-20) 0 var(--spacing-12);
  overflow: hidden;
  background-color: var(--progress-track);
  border-radius: var(--radius-pill-badge);
}

.pre__shuttle {
  display: block;
  width: 40%;
  height: 100%;
  background-color: var(--progress-fill);
  border-radius: inherit;
  animation: pre-shuttle 1400ms var(--ease-out-soft) infinite;
}

@keyframes pre-shuttle {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(250%);
  }
}

.pre__label {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

/* Motion off: the ladder stands at full height and the rail reads as full, so
   the panel still says "working" without moving. */
@media (prefers-reduced-motion: reduce) {
  .pre__step {
    animation: none;
    background-size: 100% 100%;
  }

  .pre__shuttle {
    animation: none;
    width: 100%;
  }
}

/* ==========================================================================
   8 — Footer
   ========================================================================== */

.foot {
  background-color: var(--surface-subtle);
  border-top: 1px solid var(--border-default);
}

.foot__inner {
  width: min(100%, var(--page-max-width));
  margin-inline: auto;
  padding: var(--spacing-64) var(--grid-gutter) var(--spacing-32);
}

.foot__lead {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--spacing-48);
  align-items: start;
}

.foot__dir {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-32);
  margin-top: var(--spacing-48);
  padding-top: var(--spacing-40);
  border-top: 1px solid var(--border-default);
}

.foot__end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  margin-top: var(--spacing-40);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--border-default);
}

.foot__copy {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.foot__copy a {
  font-weight: var(--font-weight-medium);
  color: var(--color-magenta-ink);
  text-decoration: none;
}

.foot__copy a:hover {
  color: var(--color-magenta-ink-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.foot__pay {
  display: block;
  width: auto;
  height: 24px;
}

.ident__logo {
  display: inline-flex;
}

.ident__logo img {
  display: block;
  width: auto;
  max-height: 44px;
}

.ident__about {
  max-width: var(--measure-narrow);
  margin: var(--spacing-20) 0 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.ident__facts {
  display: grid;
  gap: var(--spacing-4);
  margin: var(--spacing-24) 0 0;
  padding: 0;
  list-style: none;
}

.ident__fact {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-height: var(--touch-target-min);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a.ident__fact:hover {
  color: var(--color-magenta-ink);
}

.ident__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  background-color: var(--color-magenta-tint);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-sm);
  color: var(--color-magenta-ink);
  font-size: 12px;
  transition: background-color var(--transition-base);
}

a.ident__fact:hover .ident__tile {
  background-color: var(--surface-card);
}

.signup {
  padding: var(--spacing-32);
  background-color: var(--color-magenta-wash);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.signup__title {
  margin: 0;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.signup__desc {
  margin: var(--spacing-12) 0 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.signup__form {
  display: flex;
  gap: var(--spacing-8);
  margin-top: var(--spacing-20);
}

.signup__field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.signup__field i {
  position: absolute;
  inset-inline-start: var(--spacing-16);
  color: var(--color-ash);
  font-size: 13px;
  pointer-events: none;
}

.signup__input {
  width: 100%;
  min-height: var(--touch-target-min);
  padding-inline: var(--spacing-40) var(--spacing-16);
  background-color: var(--surface-card);
  border: var(--border-input);
  border-radius: var(--radius-inputs);
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--text-primary);
  transition: border-color var(--transition-base);
}

.signup__input::placeholder {
  color: var(--text-disabled);
}

.signup__input:focus {
  border-color: var(--color-magenta);
}

.signup__ok {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: var(--spacing-12) 0 0;
  padding: var(--spacing-8) var(--spacing-12);
  background-color: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  color: var(--status-success-text);
}

.signup__ok[hidden] {
  display: none;
}

.signup__list {
  display: grid;
  gap: var(--spacing-8);
  margin: var(--spacing-20) 0 0;
  padding: 0;
  list-style: none;
}

.signup__point {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--text-muted);
}

.signup__point i {
  margin-top: 4px;
  color: var(--state-completed);
  font-size: 11px;
}

.signup__note {
  margin: var(--spacing-20) 0 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--text-secondary);
}

.dir__label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-12);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-primary);
}

.dir__label::after {
  content: "";
  width: 24px;
  height: 2px;
  background-color: var(--color-magenta);
  border-radius: var(--radius-pill-badge);
}

.dir__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dir__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--touch-target-min);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-base);
}

.dir__link::before {
  content: "";
  width: 0;
  height: 1px;
  background-color: var(--color-magenta);
  transition: width var(--transition-base);
}

.dir__link:hover {
  color: var(--color-magenta-ink);
}

.dir__link:hover::before {
  width: 12px;
}

.dir__empty {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.totop {
  position: fixed;
  inset-inline-end: var(--spacing-24);
  inset-block-end: var(--spacing-24);
  z-index: var(--z-sticky);
  display: grid;
  place-items: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  background-color: var(--color-magenta-ink);
  border: 0;
  border-radius: var(--radius-pill-badge);
  color: var(--text-on-accent);
  font-size: var(--text-body);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base),
              visibility var(--transition-base), background-color var(--transition-base),
              box-shadow var(--transition-base);
}

.totop.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.totop:hover {
  background-color: var(--color-magenta-ink-hover);
  box-shadow: var(--shadow-accent);
}

@media (max-width: 991px) {
  .foot__lead {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-32);
  }

  .foot__dir {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .foot__inner {
    padding-block: var(--spacing-48) var(--spacing-24);
  }

  .foot__dir {
    grid-template-columns: minmax(0, 1fr);
  }

  .signup {
    padding: var(--spacing-20);
  }

  .signup__form {
    flex-direction: column;
  }
}

/* ==========================================================================
   9 — Flash toasts
   ========================================================================== */

.toasts {
  position: fixed;
  inset-block-start: var(--toast-offset);
  inset-inline-end: var(--spacing-16);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--spacing-8);
  width: min(calc(100vw - var(--spacing-32)), 380px);
  pointer-events: none;
}

.toast {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-12);
  overflow: hidden;
  padding: var(--spacing-12);
  padding-inline-start: var(--spacing-16);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-inline-start: 3px solid var(--color-ash);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-overlay);
  pointer-events: auto;
  animation: toast-in var(--transition-panel) backwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.toast.is-hiding {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.toast--success {
  border-inline-start-color: var(--status-success-text);
}

.toast--error {
  border-inline-start-color: var(--status-error-text);
}

.toast__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill-badge);
  font-size: 13px;
}

.toast--success .toast__icon {
  background-color: var(--status-success-bg);
  color: var(--status-success-text);
}

.toast--error .toast__icon {
  background-color: var(--status-error-bg);
  color: var(--status-error-text);
}

.toast__msg {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--text-primary);
}

.toast__close {
  display: grid;
  place-items: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-pill-badge);
  color: var(--color-ash);
  font-size: var(--text-body-sm);
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.toast__close:hover {
  background-color: var(--surface-raised);
  color: var(--text-primary);
}

.toast__bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  height: 3px;
  background-color: var(--status-success-text);
  animation: toast-run 4500ms linear both;
}

@keyframes toast-run {
  from {
    width: 100%;
  }

  to {
    width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }

  .toast__bar {
    width: 100%;
    animation: none;
  }
}

/* ==========================================================================
   10 — Cookie consent
   ========================================================================== */

.consent {
  position: fixed;
  inset-block-end: var(--spacing-24);
  inset-inline: 0;
  z-index: var(--z-consent);
  width: min(100% - var(--spacing-32), 680px);
  margin-inline: auto;
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-overlay);
  animation: consent-in var(--transition-panel) backwards;
}

@keyframes consent-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

body:has(.consent) .totop {
  display: none;
}

.consent__inner {
  padding: var(--spacing-24);
}

.consent__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.consent__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  background-color: var(--color-magenta-tint);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-sm);
  color: var(--color-magenta-ink);
  font-size: var(--text-body);
}

.consent__title {
  margin: 0;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.consent__intro {
  margin-top: var(--spacing-12);
}

.consent__intro p {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.consent__intro p + p {
  margin-top: var(--spacing-4);
}

.consent__intro a {
  color: var(--color-magenta-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent__intro a:hover {
  color: var(--color-magenta-ink-hover);
}

.consent__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.consent__panel.is-open {
  max-height: min(46vh, 380px);
  overflow-y: auto;
}

.consent__panel-in {
  padding-top: var(--spacing-20);
}

.consent__acts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  margin-top: var(--spacing-20);
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--border-default);
}

.consent__more {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-12);
  background: none;
  border: 0;
  border-radius: var(--radius-buttons);
  font-family: inherit;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.consent__more:hover {
  background-color: var(--surface-raised);
  color: var(--text-primary);
}

.consent__chev {
  font-size: 10px;
  transition: transform var(--transition-base);
}

[aria-expanded="true"] .consent__chev {
  transform: rotate(180deg);
}

.consent__choice {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.cbtn {
  display: flex;
  margin: 0;
}

.cbtn__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-20);
  border: 1px solid transparent;
  border-radius: var(--radius-buttons);
  font-family: inherit;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base),
              border-color var(--transition-base), box-shadow var(--transition-base);
}

.cbtn--all .cbtn__link {
  background-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
}

.cbtn--all .cbtn__link:hover {
  background-color: var(--color-magenta-ink-hover);
  box-shadow: var(--shadow-accent);
}

.cbtn--all .cbtn__link:active {
  background-color: var(--color-magenta-ink-active);
}

.cbtn--essential .cbtn__link {
  background-color: var(--surface-card);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.cbtn--essential .cbtn__link:hover {
  background-color: var(--color-magenta-wash);
  border-color: var(--color-magenta-edge);
  color: var(--color-magenta-ink);
}

.prefs {
  display: grid;
  gap: var(--spacing-12);
}

.prefs__row {
  padding: var(--spacing-16);
  background-color: var(--surface-subtle);
  border: var(--border-card);
  border-radius: var(--radius-cards);
}

.prefs__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  min-height: 28px;
  cursor: pointer;
}

.prefs__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.prefs__lock {
  font-size: 11px;
  color: var(--color-ash);
}

.swt {
  position: relative;
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 22px;
  margin: 0;
  background-color: var(--progress-track);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-pill-badge);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.swt::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  background-color: var(--surface-card);
  border-radius: var(--radius-pill-badge);
  box-shadow: var(--shadow-subtle);
  transition: transform var(--transition-base);
}

.swt:checked {
  background-color: var(--color-magenta);
  border-color: var(--color-magenta);
}

.swt:checked::after {
  transform: translateX(18px);
}

.swt:disabled {
  background-color: var(--color-ash);
  border-color: var(--color-ash);
  cursor: not-allowed;
}

.prefs__info {
  margin: var(--spacing-8) 0 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-secondary);
}

.prefs__details {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 36px;
  margin-top: var(--spacing-4);
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  color: var(--color-magenta-ink);
  cursor: pointer;
  transition: color var(--transition-base);
}

.prefs__details:hover {
  color: var(--color-magenta-ink-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prefs__drop {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.prefs__drop.is-open {
  max-height: 260px;
  overflow-y: auto;
}

.prefs__list {
  display: grid;
  gap: var(--spacing-8);
  margin: var(--spacing-8) 0 0;
  padding: 0;
  list-style: none;
}

.prefs__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-4) var(--spacing-12);
  padding: var(--spacing-12);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-sm);
}

.prefs__name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  word-break: break-all;
}

.prefs__dur {
  justify-self: end;
  font-size: var(--text-caption);
  color: var(--text-secondary);
  white-space: nowrap;
}

.prefs__desc {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-secondary);
}

@media (max-width: 600px) {
  .consent {
    inset-block-end: 0;
    width: 100%;
    border-inline: 0;
    border-block-end: 0;
    border-radius: var(--radius-cards) var(--radius-cards) 0 0;
  }

  .consent__inner {
    padding: var(--spacing-20);
  }

  .consent__acts {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .consent__choice {
    flex-direction: column;
    align-items: stretch;
  }

  .consent__more {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent {
    animation: none;
  }
}

/* ==========================================================================
   11 — Page banner
   ========================================================================== */

.bn {
  --bn-h: 340px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #fbb9c8;
  background-image: linear-gradient(180deg, #fdc7d5 0%, #fbb9c8 50%, #f0a0b4 100%);
  font-family: var(--font-ui);
}

.bn--compact {
  --bn-h: 240px;
}

.bn__media {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(72%, calc(var(--bn-h) * 2.5));
  background-image: url("../assets/images/breadcrumb.webp");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  pointer-events: none;
}

.bn__fx {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bn-shoot {
  position: absolute;
  left: -160px;
  width: 150px;
  height: 2px;
  border-radius: var(--radius-pill-badge);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
  opacity: 0;
  transform: rotate(14deg);
  animation: bn-shoot 5.5s linear infinite;
}

.bn-shoot::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  width: 7px;
  height: 7px;
  background-color: var(--color-pure-white);
  border-radius: 50%;
  box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.9), 0 0 18px 6px rgba(245, 13, 180, 0.45);
  transform: translateY(-50%);
}

.bn-shoot--1 { top: 12%; animation-delay: 0s; }
.bn-shoot--2 { top: 34%; animation-delay: 1.6s; animation-duration: 6.5s; }
.bn-shoot--3 { top: 58%; animation-delay: 3.1s; }
.bn-shoot--4 { top: 22%; animation-delay: 4.4s; animation-duration: 7s; }

@keyframes bn-shoot {
  0% { opacity: 0; transform: translate(0, 0) rotate(14deg); }
  6% { opacity: 1; }
  45% { opacity: 0.9; }
  60%, 100% { opacity: 0; transform: translate(62vw, 15.5vw) rotate(14deg); }
}

.bn-spark {
  position: absolute;
  color: var(--color-pure-white);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
  animation: bn-twinkle 3s ease-in-out infinite;
}

.bn-spark--1 { top: 16%; left: 38%; font-size: 12px; }
.bn-spark--2 { top: 70%; left: 8%; font-size: 9px; animation-delay: -1s; }
.bn-spark--3 { top: 30%; left: 52%; font-size: 10px; animation-delay: -2s; }

@keyframes bn-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}

.bn-icon {
  position: absolute;
  left: -48px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 8px 20px -6px rgba(140, 8, 102, 0.35);
  color: var(--color-magenta-ink);
  font-size: 16px;
  opacity: 0;
  animation: bn-drift 12s linear infinite;
}

.bn-icon--fill {
  background-color: var(--color-magenta-ink);
  color: var(--color-pure-white);
  box-shadow: 0 8px 20px -6px rgba(196, 10, 143, 0.6);
}

.bn-icon--1 { top: 6%; animation-delay: 0s; }
.bn-icon--2 { top: 77%; animation-delay: -1.5s; width: 46px; height: 46px; font-size: 20px; }
.bn-icon--3 { top: 17%; animation-delay: -3s; width: 34px; height: 34px; font-size: 12px; }
.bn-icon--4 { top: 84%; animation-delay: -4.5s; }
.bn-icon--5 { top: 3%; animation-delay: -6s; width: 34px; height: 34px; font-size: 13px; }
.bn-icon--6 { top: 76%; animation-delay: -7.5s; }
.bn-icon--7 { top: 12%; animation-delay: -9s; width: 34px; height: 34px; font-size: 14px; }
.bn-icon--8 { top: 86%; animation-delay: -10.5s; width: 34px; height: 34px; font-size: 13px; }

@keyframes bn-drift {
  0% { opacity: 0; transform: translate(0, 0) scale(0.7) rotate(-10deg); }
  10% { opacity: 0.95; }
  50% { transform: translate(24vw, -18px) scale(1) rotate(6deg); }
  75% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(46vw, 10px) scale(0.85) rotate(-4deg); }
}

.bn__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: min(100%, var(--page-max-width));
  min-height: var(--bn-h);
  margin-inline: auto;
  padding: var(--spacing-40) var(--grid-gutter);
}

.bn__panel {
  position: relative;
  width: min(100%, 560px);
  animation: bn-in 480ms var(--ease-out-soft) backwards;
}

.bn__panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40px -60px -40px -80px;
  background: radial-gradient(closest-side, rgba(255, 240, 250, 0.75), rgba(255, 240, 250, 0));
  pointer-events: none;
}

@keyframes bn-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.bn__crumbs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-20);
  padding: 6px var(--spacing-16);
  list-style: none;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-pill-badge);
  box-shadow: 0 6px 18px -8px rgba(140, 8, 102, 0.3);
  backdrop-filter: blur(8px);
}

.bn__crumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.bn__home {
  font-size: 11px;
  color: var(--color-magenta-ink);
}

.bn__link {
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite);
  text-decoration: none;
  transition: color var(--transition-base);
}

.bn__link:hover {
  color: var(--color-magenta-ink-active);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bn__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-magenta-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.bn__sep {
  font-size: 8px;
  color: var(--color-slate);
}

.bn__current {
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink-active);
}

.bn__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
  padding: 5px var(--spacing-16) 5px 5px;
  background-color: var(--color-ink-black);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-pure-white);
  box-shadow: 0 10px 24px -10px rgba(14, 15, 18, 0.5);
}

.bn__eyebrow-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--color-magenta), var(--color-magenta-ink));
  border-radius: 50%;
  font-size: 10px;
}

.bn__title {
  margin: 0;
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-black);
  overflow-wrap: anywhere;
}

.bn__mark {
  background-image: linear-gradient(transparent 62%, rgba(255, 255, 255, 0.75) 62%, rgba(255, 255, 255, 0.75) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.bn--compact .bn__crumbs {
  margin-bottom: var(--spacing-12);
}

@media (max-width: 991px) {
  .bn {
    --bn-h: 300px;
  }

  .bn--compact {
    --bn-h: 220px;
  }

  .bn__panel {
    width: min(100%, 460px);
  }

  .bn__title {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
  }
}

@media (max-width: 767px) {
  .bn {
    --bn-h: 260px;
  }

  .bn--compact {
    --bn-h: 200px;
  }

  .bn__media {
    width: 100%;
    background-image: url("../assets/images/breadcrumb-sm.webp");
    background-size: cover;
    background-position: 78% center;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .bn__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(253, 199, 213, 0.95) 0%, rgba(253, 199, 213, 0.8) 45%, rgba(253, 199, 213, 0) 80%);
  }

  .bn__inner {
    padding-block: var(--spacing-28);
  }

  .bn__panel {
    width: min(100%, 300px);
  }

  .bn__panel::before {
    display: none;
  }

  .bn__crumbs {
    padding: 5px var(--spacing-12);
  }

  .bn-icon--4,
  .bn-icon--6,
  .bn-icon--7,
  .bn-icon--8,
  .bn-shoot--4,
  .bn-spark--3 {
    display: none;
  }
}

@media (max-width: 420px) {
  .bn__panel {
    width: min(100%, 240px);
  }

  .bn__title {
    font-size: var(--text-heading-sm);
    line-height: var(--leading-heading-sm);
    letter-spacing: var(--tracking-heading-sm);
  }

  .bn__eyebrow {
    font-size: 10px;
    letter-spacing: 0.4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bn__panel,
  .bn-spark {
    animation: none;
  }

  .bn-shoot {
    display: none;
  }

  .bn-icon {
    animation: none;
    opacity: 0.9;
  }

  .bn-icon--1 { left: 30%; }
  .bn-icon--2 { left: 44%; }
  .bn-icon--3 { left: 52%; }
  .bn-icon--4 { left: 36%; }
  .bn-icon--5 { left: 58%; }
  .bn-icon--6 { left: 48%; }
  .bn-icon--7 { left: 26%; }
  .bn-icon--8 { left: 54%; }
}

/* ==========================================================================
   12 — Auth split screen
   ========================================================================== */

.auth {
  padding: var(--spacing-64) var(--grid-gutter);
  background-color: var(--surface-canvas);
}

.auth__split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  align-items: stretch;
  width: min(100%, var(--page-max-width));
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.auth__art {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  background-color: #f7a9bd;
  background-image: url("../assets/images/auth-desk.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 28%;
}

.auth__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(14, 15, 18, 0.72) 0%,
              rgba(14, 15, 18, 0.28) 34%,
              rgba(14, 15, 18, 0) 62%);
  pointer-events: none;
}

.auth__logo {
  position: absolute;
  inset-block-start: var(--spacing-24);
  inset-inline-start: var(--spacing-24);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-12) var(--spacing-20);
  background-color: var(--surface-card);
  border-radius: var(--radius-pill-badge);
  box-shadow: var(--shadow-subtle);
}

.auth__logo img {
  display: block;
  width: auto;
  height: 26px;
}

.auth__art-inner {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  padding: var(--spacing-40);
}

.auth__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
  padding: var(--spacing-4) var(--spacing-12);
  background-color: var(--color-magenta-ink);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  color: var(--text-on-accent);
}

.auth__lead {
  max-width: 34ch;
  margin: 0;
  font-size: var(--text-subheading);
  line-height: 1.5;
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-medium);
  color: var(--color-pure-white);
}

.auth__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-48) var(--spacing-40);
}

.auth__inner {
  width: min(100%, 440px);
}

.auth__back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 36px;
  margin-bottom: var(--spacing-24);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-base), gap var(--transition-base);
}

.auth__back:hover {
  gap: var(--spacing-12);
  color: var(--color-magenta-ink);
}

.auth__title {
  margin: 0;
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.auth__sub {
  margin: var(--spacing-12) 0 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.auth__fields {
  display: grid;
  gap: var(--spacing-20);
  margin-top: var(--spacing-32);
}

.auth__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
}

.auth__opts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-12);
}

.auth__check {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--touch-target-min);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.tick {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
}

.tick input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: var(--surface-card);
  border: var(--border-input);
  border-radius: 5px;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.tick i {
  position: relative;
  font-size: 9px;
  color: var(--text-on-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.tick input:checked {
  background-color: var(--color-magenta-ink);
  border-color: var(--color-magenta-ink);
}

.tick input:checked + i {
  opacity: 1;
}

.auth__link {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-magenta-ink);
  text-decoration: none;
}

.auth__link:hover {
  color: var(--color-magenta-ink-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth__submit {
  width: 100%;
  min-height: 52px;
  margin-top: var(--spacing-8);
}

.auth__divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  margin: var(--spacing-32) 0 var(--spacing-16);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--border-default);
}

.auth__alt {
  width: 100%;
}

/* --- Fields --- */

.fld__label {
  display: block;
  margin-bottom: var(--spacing-8);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.fld__box {
  position: relative;
  display: flex;
  align-items: center;
}

.fld__icon {
  position: absolute;
  inset-inline-start: var(--spacing-20);
  font-size: 14px;
  color: var(--color-ash);
  pointer-events: none;
  transition: color var(--transition-base);
}

.fld__input {
  width: 100%;
  min-height: 52px;
  padding-inline: var(--spacing-48) var(--spacing-20);
  background-color: var(--surface-card);
  border: var(--border-input);
  border-radius: var(--radius-inputs);
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--text-primary);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.fld__input::placeholder {
  color: var(--text-disabled);
}

.fld__input:focus {
  outline: none;
  border-color: var(--color-magenta);
  box-shadow: 0 0 0 4px var(--color-magenta-wash);
}

.fld__box:focus-within .fld__icon {
  color: var(--color-magenta-ink);
}

.fld__input.is-invalid {
  border-color: var(--status-error-text);
}

.fld__input.is-invalid:focus {
  box-shadow: 0 0 0 4px var(--status-error-bg);
}

.fld--pass .fld__input {
  padding-inline-end: var(--spacing-48);
}

.fld__eye {
  position: absolute;
  inset-inline-end: var(--spacing-8);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-pill-badge);
  color: var(--color-ash);
  font-size: var(--text-body-sm);
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.fld__eye:hover {
  background-color: var(--surface-raised);
  color: var(--text-primary);
}

.fld__err {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--status-error-text);
}

/* --- Captcha --- */

.cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--spacing-8);
}

.cap__img {
  display: grid;
  place-items: center;
  height: 52px;
  padding-inline: var(--spacing-8);
  overflow: hidden;
  background-color: var(--surface-raised);
  border: var(--border-card);
  border-radius: var(--radius-media);
}

.cap__img img {
  display: block;
  max-height: 40px;
  width: auto;
}

.cap__refresh {
  display: grid;
  place-items: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-pill-badge);
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base),
              border-color var(--transition-base);
}

.cap__refresh:hover {
  background-color: var(--color-magenta-wash);
  border-color: var(--color-magenta-edge);
  color: var(--color-magenta-ink);
}

.cap.is-invalid .fld__input {
  border-color: var(--status-error-text);
}

/* --- Inline messages --- */

.msg {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  margin-top: var(--spacing-24);
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-cards);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.msg i {
  margin-top: 2px;
}

.msg--error {
  background-color: var(--status-error-bg);
  border: 1px solid var(--status-error-border);
  color: var(--status-error-text);
}

.msg--ok {
  background-color: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  color: var(--status-success-text);
}

@media (max-width: 991px) {
  .auth {
    padding-block: var(--spacing-40);
  }

  .auth__split {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth__art {
    min-height: 280px;
    background-position: center 30%;
  }

  .auth__logo {
    inset-block-start: var(--spacing-16);
    inset-inline-start: var(--spacing-16);
    padding: var(--spacing-8) var(--spacing-16);
  }

  .auth__logo img {
    height: 22px;
  }

  .auth__art-inner {
    padding: var(--spacing-24);
  }

  .auth__lead {
    font-size: var(--text-body);
  }

  .auth__form {
    padding: var(--spacing-32) var(--spacing-24);
  }
}

@media (max-width: 600px) {
  .auth__pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .cap {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cap__img {
    grid-column: 1 / -1;
    order: -1;
    justify-self: start;
  }
}

/* ==========================================================================
   13 — Contact
   ========================================================================== */

.contact {
  padding: var(--spacing-64) var(--grid-gutter);
  background-color: var(--surface-canvas);
}

.contact__split {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  align-items: stretch;
  width: min(100%, var(--page-max-width));
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.contact__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-32);
  min-height: 620px;
  padding: var(--spacing-32);
  background-color: #f9d2d4;
  background-image: url("../assets/images/contact-illustration.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center 38%;
}

.contact__kicker {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-12);
  padding: var(--spacing-4) var(--spacing-12);
  background-color: var(--color-pure-white);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  color: var(--color-magenta-ink-active);
}

.contact__lead {
  max-width: 26ch;
  margin: 0;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-black);
}

.contact__card {
  padding: var(--spacing-20);
  background-color: var(--surface-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-hover);
}

.contact__rows {
  display: grid;
  gap: var(--spacing-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-12);
}

.contact__tile {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-magenta-tint);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-sm);
  color: var(--color-magenta-ink);
  font-size: 13px;
}

.contact__label {
  display: block;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--text-secondary);
}

.contact__value {
  display: block;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
  word-break: break-word;
}

a.contact__value:hover {
  color: var(--color-magenta-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact__form {
  padding: var(--spacing-48) var(--spacing-40);
}

.contact__title {
  margin: 0;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.contact__desc {
  margin: var(--spacing-12) 0 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.contact__reasons {
  margin: 0 0 var(--spacing-28);
  padding: var(--spacing-16) var(--spacing-20);
  background-color: var(--color-magenta-wash);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-cards);
}

.contact__reasons-title {
  margin: 0 0 var(--spacing-12);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink-active);
}

.contact__reasons-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-8) var(--spacing-20);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact__reasons-list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: var(--spacing-8);
  align-items: start;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--text-muted);
}

.contact__reasons-list i {
  margin-top: 3px;
  font-size: 11px;
  color: var(--color-magenta-ink);
}

@media (max-width: 640px) {
  .contact__reasons-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.contact__fields {
  display: grid;
  gap: var(--spacing-20);
  margin-top: var(--spacing-32);
}

.contact__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
}

.contact__submit {
  width: 100%;
  min-height: 52px;
  margin-top: var(--spacing-8);
}

.fld__box--area {
  align-items: flex-start;
}

.fld__box--area .fld__icon {
  inset-block-start: 18px;
}

.fld__area {
  min-height: 150px;
  padding-block: var(--spacing-16);
  border-radius: var(--radius-cards);
  line-height: var(--leading-body);
  resize: vertical;
}

@media (max-width: 991px) {
  .contact {
    padding-block: var(--spacing-40);
  }

  .contact__split {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact__aside {
    min-height: 0;
    padding: var(--spacing-24);
    background-size: 240px auto;
    background-position: right var(--spacing-24) top var(--spacing-24);
  }

  .contact__lead {
    max-width: 22ch;
  }

  .contact__form {
    padding: var(--spacing-32) var(--spacing-24);
  }
}

@media (max-width: 600px) {
  .contact__pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact__aside {
    background-image: none;
  }

  .contact__lead {
    max-width: none;
  }
}

/* ==========================================================================
   14 — Checkout
   ========================================================================== */

.co {
  padding: var(--spacing-48) var(--grid-gutter) var(--spacing-64);
  background-color: var(--surface-subtle);
}

.co__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-purchase-width);
  align-items: start;
  gap: var(--grid-gutter);
  width: min(100%, var(--page-max-width));
  margin-inline: auto;
}

.co__main {
  display: grid;
  gap: var(--grid-gutter);
  min-width: 0;
}

.co__rail {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-16));
  min-width: 0;
}

.steps {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin: 0 0 var(--spacing-8);
  padding: 0;
  list-style: none;
}

.steps__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.steps__no {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  background-color: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill-badge);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.steps__item.is-active {
  color: var(--color-magenta-ink-active);
}

.steps__item.is-active .steps__no {
  background-color: var(--color-magenta-ink);
  border-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
}

.steps__line {
  flex: 1;
  height: 1px;
  min-width: 16px;
  background-color: var(--border-strong);
}

.panel {
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.panel__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-20) var(--spacing-24);
  border-bottom: 1px solid var(--border-default);
}

.panel__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  background-color: var(--color-magenta-tint);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-magenta-ink-active);
}

.panel__title {
  margin: 0;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.panel__body {
  padding: var(--spacing-24);
}

.co__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-20) var(--spacing-16);
}

.co__full {
  grid-column: 1 / -1;
}

.co__captcha {
  margin-top: var(--spacing-20);
}

.co__req {
  color: var(--status-error-text);
}

.fld__select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: var(--spacing-48);
  cursor: pointer;
}

.fld__caret {
  position: absolute;
  inset-inline-end: var(--spacing-20);
  font-size: 10px;
  color: var(--color-ash);
  pointer-events: none;
}

.expiry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-8);
}

.expiry .fld__input {
  padding-inline: var(--spacing-20);
  text-align: center;
}

.expiry__sep {
  font-size: var(--text-subheading);
  color: var(--color-ash);
}

/* --- Card preview --- */

.co__pay {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
  gap: var(--spacing-32);
}

.ccard {
  perspective: 1000px;
  aspect-ratio: 1.586;
}

.ccard__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease-out-soft);
}

.ccard.is-flipped .ccard__inner {
  transform: rotateY(180deg);
}

.ccard__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--spacing-20);
  overflow: hidden;
  background: linear-gradient(135deg, #8c0866 0%, #c40a8f 55%, #f50db4 100%);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-overlay);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color: var(--color-pure-white);
}

.ccard__back {
  justify-content: flex-start;
  gap: var(--spacing-16);
  padding-inline: 0;
  transform: rotateY(180deg);
}

.ccard__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.ccard__chip {
  width: 38px;
  height: 28px;
  background: linear-gradient(135deg, #f7d488, #d6a544);
  border-radius: 5px;
}

.ccard__brand {
  font-size: 28px;
  transition: opacity var(--transition-base);
}

.ccard__number {
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: 1px;
}

.ccard__label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.75;
}

.ccard__value {
  display: block;
  margin-top: 2px;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}

.ccard__right {
  text-align: end;
}

.ccard__stripe {
  display: block;
  height: 44px;
  margin-top: var(--spacing-8);
  background-color: rgba(14, 15, 18, 0.72);
}

.ccard__sign {
  padding-inline: var(--spacing-20);
  text-align: end;
}

.ccard__cvv {
  display: inline-block;
  min-width: 64px;
  margin-top: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-8);
  background-color: var(--color-pure-white);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
}

/* --- Terms --- */

.agree {
  display: grid;
  gap: var(--spacing-4);
}

.agree__row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  min-height: var(--touch-target-min);
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.agree__row:hover {
  background-color: var(--surface-raised);
}

.agree__row .tick {
  margin-top: 2px;
}

.agree__text {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.agree__text a {
  font-weight: var(--font-weight-medium);
  color: var(--color-magenta-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.agree__text a:hover {
  color: var(--color-magenta-ink-hover);
}

.co__facts {
  margin-top: var(--spacing-20);
  padding: var(--spacing-16);
  background-color: var(--color-magenta-wash);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-cards);
}

.co__facts-title {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink-active);
}

.co__facts-list {
  display: grid;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.co__facts-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--spacing-8);
  align-items: start;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--text-muted);
}

.co__facts-list i {
  margin-top: 3px;
  font-size: 12px;
  text-align: center;
  color: var(--color-magenta-ink);
}

.dba {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  margin-top: var(--spacing-20);
  padding: var(--spacing-16);
  background-color: var(--status-info-bg);
  border: 1px solid var(--status-info-border);
  border-radius: var(--radius-cards);
}

.dba > i {
  margin-top: 3px;
  flex: none;
  color: var(--status-info-text);
  font-size: var(--text-body-sm);
}

.dba p {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.9;
  color: var(--text-secondary);
}

.dba img {
  display: inline-block;
  height: 18px;
  width: auto;
  margin-inline-start: var(--spacing-8);
  vertical-align: -4px;
}

/* --- Summary rail --- */

.sum {
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.sum__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-20) var(--spacing-24);
  border-bottom: 1px solid var(--border-default);
}

.sum__title {
  margin: 0;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.sum__body {
  padding: var(--spacing-20) var(--spacing-24);
}

.sum__rows {
  display: grid;
  gap: var(--spacing-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sum__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
}

.sum__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-width: 0;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.sum__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  background-color: var(--color-magenta-tint);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-sm);
  color: var(--color-magenta-ink);
  font-size: 12px;
}

.sum__price {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.sum__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-top: var(--spacing-16);
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--border-default);
}

.sum__total span {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.sum__total strong {
  font-family: var(--font-mono);
  font-size: var(--text-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink-active);
}

.sum__foot {
  display: grid;
  gap: var(--spacing-12);
  padding: var(--spacing-20) var(--spacing-24);
  background-color: var(--surface-subtle);
  border-top: 1px solid var(--border-default);
  border-radius: 0 0 var(--radius-cards) var(--radius-cards);
}

.sum__pay {
  width: 100%;
  min-height: 52px;
}

.sum__trust {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-secondary);
}

.sum__trust i {
  margin-top: 2px;
  color: var(--state-completed);
}

.sum__methods {
  display: block;
  width: auto;
  height: 22px;
  margin-inline: auto;
}

@media (max-width: 1100px) {
  .co__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .co__rail {
    position: static;
    order: -1;
  }

  .co__pay {
    grid-template-columns: minmax(0, 1fr);
  }

  .ccard {
    max-width: 320px;
  }
}

@media (max-width: 600px) {
  .co {
    padding-block: var(--spacing-32) var(--spacing-40);
  }

  .co__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel__body {
    padding: var(--spacing-20);
  }

  .steps__label {
    display: none;
  }
}

/* ==========================================================================
   15 — Account dashboard
   ========================================================================== */

.dash {
  padding: var(--spacing-48) var(--grid-gutter) var(--spacing-64);
  background-color: var(--surface-subtle);
}

.dash__grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  gap: var(--grid-gutter);
  width: min(100%, var(--page-max-width));
  margin-inline: auto;
}

.dash__rail {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-16));
  display: grid;
  gap: var(--spacing-16);
}

.dash__main {
  display: grid;
  gap: var(--grid-gutter);
  min-width: 0;
}

.who {
  display: grid;
  justify-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-24);
  text-align: center;
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.who__avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-12);
  background-color: var(--color-magenta-tint);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink-active);
  text-transform: uppercase;
}

.who__name {
  margin: 0;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.who__email {
  max-width: 100%;
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  word-break: break-word;
}

.who__since {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-12);
  padding: var(--spacing-4) var(--spacing-12);
  background-color: var(--surface-raised);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--text-secondary);
}

.dnav {
  display: grid;
  gap: 2px;
  padding: var(--spacing-8);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.dnav__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  width: 100%;
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-12);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  text-align: start;
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.dnav__item i {
  flex: none;
  width: 16px;
  font-size: 13px;
}

.dnav__item:hover {
  background-color: var(--surface-raised);
  color: var(--text-primary);
}

.dnav__item.is-active {
  background-color: var(--color-magenta-tint);
  color: var(--color-magenta-ink-active);
}

.dnav__count {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 20px;
  margin-inline-start: auto;
  padding: 0 var(--spacing-8);
  background-color: var(--surface-raised);
  border-radius: var(--radius-pill-badge);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.dnav__item.is-active .dnav__count {
  background-color: var(--color-pure-white);
  color: var(--color-magenta-ink-active);
}

.dash__actions {
  display: grid;
  gap: var(--spacing-8);
}

/* --- Figures --- */

.figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
}

.fig {
  display: grid;
  gap: var(--spacing-8);
  padding: var(--spacing-20);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.fig--credits {
  background-color: var(--color-magenta-wash);
  border-color: var(--color-magenta-edge);
}

.fig__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background-color: var(--surface-raised);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
}

.fig--credits .fig__icon {
  background-color: var(--color-magenta-tint);
  color: var(--color-magenta-ink);
}

.fig__label {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--text-secondary);
}

.fig__value {
  font-family: var(--font-mono);
  font-size: var(--text-heading-sm);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.fig--credits .fig__value {
  color: var(--color-magenta-ink-active);
}

.fig__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-4);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-magenta-ink);
  text-decoration: none;
  transition: gap var(--transition-base);
}

.fig__link:hover {
  gap: var(--spacing-12);
  color: var(--color-magenta-ink-hover);
}

/* --- Shared data chips --- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: 3px var(--spacing-8);
  background-color: var(--badge-accent-bg);
  border: 1px solid var(--badge-accent-border);
  border-radius: var(--radius-pill-badge);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--badge-accent-text);
  white-space: nowrap;
}

.chip--text {
  font-family: var(--font-ui);
  font-weight: var(--font-weight-semibold);
}

.state {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: 3px var(--spacing-8);
  border: 1px solid transparent;
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  white-space: nowrap;
}

.state--ok {
  background-color: var(--status-success-bg);
  border-color: var(--status-success-border);
  color: var(--status-success-text);
}

.state--wait {
  background-color: var(--status-warning-bg);
  border-color: var(--status-warning-border);
  color: var(--status-warning-text);
}

.state--err {
  background-color: var(--status-error-bg);
  border-color: var(--status-error-border);
  color: var(--status-error-text);
}

/* --- Purchases --- */

.orders {
  display: grid;
  gap: var(--spacing-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.order {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-16);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.order:hover {
  border-color: var(--color-magenta-edge);
  box-shadow: var(--shadow-subtle);
}

.order__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background-color: var(--color-magenta-tint);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-sm);
  color: var(--color-magenta-ink);
  font-size: 14px;
}

.order__no {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  word-break: break-all;
}

.order__date {
  display: block;
  margin-top: 2px;
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.order__facts {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.order__price {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}

/* --- Courses --- */

.courses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--grid-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.course {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.course:hover {
  border-color: var(--color-magenta-edge);
  box-shadow: var(--shadow-hover);
}

.course__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--aspect-thumbnail);
  overflow: hidden;
  background-color: var(--surface-raised);
  color: var(--color-ash);
  font-size: var(--text-heading-sm);
}

.course__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course__status {
  position: absolute;
  inset-block-start: var(--spacing-12);
  inset-inline-start: var(--spacing-12);
}

.course__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--card-padding);
}

.course__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-12);
}

.course__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.course__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4) var(--spacing-16);
  margin-top: var(--spacing-8);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.course__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
}

.course__btn {
  width: 100%;
  margin-top: var(--spacing-16);
}

/* --- Password --- */

.pwd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: var(--grid-gutter);
}

.pwd__fields {
  display: grid;
  gap: var(--spacing-20);
}

.pwd__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
}

.tips {
  padding: var(--spacing-20);
  background-color: var(--status-info-bg);
  border: 1px solid var(--status-info-border);
  border-radius: var(--radius-cards);
}

.tips__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--spacing-12);
  background-color: var(--color-pure-white);
  border-radius: var(--radius-sm);
  color: var(--status-info-text);
  font-size: 14px;
}

.tips__title {
  margin: 0 0 var(--spacing-12);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.tips__list {
  display: grid;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tips__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-secondary);
}

.tips__list i {
  margin-top: 2px;
  color: var(--state-completed);
  font-size: 10px;
}

/* --- Empty state --- */

.blank {
  display: grid;
  justify-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-48) var(--spacing-16);
  text-align: center;
}

.blank__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background-color: var(--surface-raised);
  border-radius: var(--radius-pill-badge);
  color: var(--color-ash);
  font-size: var(--text-heading-sm);
}

.blank p {
  max-width: var(--measure-narrow);
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

@media (max-width: 1100px) {
  .dash__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dash__rail {
    position: static;
  }

  .dnav {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .dash__actions {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .pwd {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .dash {
    padding-block: var(--spacing-32) var(--spacing-40);
  }

  .figs {
    grid-template-columns: minmax(0, 1fr);
  }

  .dnav {
    grid-auto-flow: row;
  }

  .dnav__item {
    text-align: start;
  }

  .order {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .order__facts,
  .order .btn {
    grid-column: 2 / -1;
  }

  .order__facts {
    flex-wrap: wrap;
  }

  .pwd__pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   16 — Receipt
   ========================================================================== */

.rcpt {
  padding: var(--spacing-48) var(--grid-gutter) var(--spacing-64);
  background-color: var(--surface-subtle);
}

.rcpt__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-purchase-width);
  align-items: start;
  gap: var(--grid-gutter);
  width: min(100%, var(--page-max-width));
  margin-inline: auto;
}

.rcpt__rail {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-16));
  display: grid;
  gap: var(--spacing-16);
}

.ticket {
  position: relative;
  padding: var(--spacing-32);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.ticket__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-24);
}

.ticket__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-magenta-ink);
}

.ticket__no {
  margin: var(--spacing-8) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  word-break: break-all;
}

.ticket__date {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.ticket__stamp {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  background-color: var(--status-warning-bg);
  border: 2px solid var(--status-warning-border);
  border-radius: var(--radius-pill-badge);
  color: var(--status-warning-text);
  font-size: var(--text-subheading);
}

.ticket__stamp.is-ok {
  background-color: var(--status-success-bg);
  border-color: var(--status-success-border);
  color: var(--status-success-text);
}

.tear {
  position: relative;
  height: 0;
  margin: var(--spacing-28) 0;
  border-top: 1px dashed var(--border-strong);
}

.tear::before,
.tear::after {
  content: "";
  position: absolute;
  inset-block-start: -10px;
  width: 20px;
  height: 20px;
  background-color: var(--surface-subtle);
  border-radius: var(--radius-pill-badge);
}

.tear::before {
  inset-inline-start: calc((var(--spacing-32) + 10px) * -1);
}

.tear::after {
  inset-inline-end: calc((var(--spacing-32) + 10px) * -1);
}

.ticket__h {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ticket__h i {
  color: var(--color-magenta);
}

.items {
  display: grid;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-28);
  padding: 0;
  list-style: none;
}

.item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-12);
  background-color: var(--surface-subtle);
  border-radius: var(--radius-sm);
}

.item__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-magenta-tint);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-sm);
  color: var(--color-magenta-ink);
  font-size: 13px;
}

.item__title {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.item__level {
  display: block;
  margin-top: 2px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
}

.details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4) var(--spacing-24);
  margin: 0;
}

.detail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-12) 0;
  border-bottom: var(--border-hairline);
}

.detail--wide {
  grid-column: 1 / -1;
}

.detail dt {
  flex: none;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--text-secondary);
}

.detail dd {
  margin: 0;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  text-align: end;
  word-break: break-word;
}

.detail dd i {
  color: var(--color-magenta-ink);
}

/* --- Rail --- */

.total {
  padding: var(--spacing-24);
  background-color: var(--color-magenta-wash);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  text-align: center;
}

.total__label {
  display: block;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--text-secondary);
}

.total__value {
  display: block;
  margin-top: var(--spacing-4);
  font-family: var(--font-mono);
  font-size: var(--text-heading);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink-active);
}

.stats {
  display: grid;
  gap: var(--spacing-12);
  padding: var(--spacing-20);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.stats__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.rcpt__actions {
  display: grid;
  gap: var(--spacing-8);
}

@media (max-width: 991px) {
  .rcpt__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rcpt__rail {
    position: static;
    order: -1;
  }

  .ticket {
    padding: var(--spacing-20);
  }

  .tear::before {
    inset-inline-start: calc((var(--spacing-20) + 10px) * -1);
  }

  .tear::after {
    inset-inline-end: calc((var(--spacing-20) + 10px) * -1);
  }

  .details {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .rcpt {
    padding-block: var(--spacing-32) var(--spacing-40);
  }

  .ticket__stamp {
    width: 44px;
    height: 44px;
    font-size: var(--text-body);
  }
}

@media print {
  .topbar,
  .masthead,
  .foot,
  .totop,
  .scrim,
  .drawer,
  .cart,
  .toasts,
  .consent,
  .bn,
  .rcpt__actions,
  #preloader {
    display: none !important;
  }

  .rcpt {
    padding: 0;
    background-color: var(--surface-canvas);
  }

  .rcpt__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-16);
  }

  .rcpt__rail {
    position: static;
  }

  .ticket,
  .total,
  .stats {
    box-shadow: none;
  }

  .tear::before,
  .tear::after {
    display: none;
  }
}

/* ==========================================================================
   17 - Static page & rich prose
   Dedicated editorial layout for database-driven CMS content.
   Provides typographic hierarchy, inline floated media wrapping,
   code snippets, definition lists, responsive tables, and callouts.
   ========================================================================== */

.pg {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-gap);
  background-color: var(--surface-subtle);
}

.pg__wrap {
  position: relative;
  max-width: 920px;
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}

/* --- Document Sheet --- */
.pg-sheet {
  padding: var(--spacing-48);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

/* --- Meta bar at top of sheet --- */
.pg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-36);
  padding-bottom: var(--spacing-20);
  border-bottom: var(--border-hairline);
}

.pg-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-12);
}

.pg-meta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: 6px 14px;
  background-color: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill-badge);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  color: var(--text-secondary);
}

.pg-meta__item i {
  color: var(--color-magenta-ink);
  font-size: 13px;
  margin-inline-end: 2px;
}

.pg-tools {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
}

.pg-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-pill-badge);
  background-color: var(--surface-subtle);
  border: 1px solid var(--border-default);
  color: var(--color-graphite);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-base);
}

.pg-tool-btn i {
  font-size: 13px;
  color: var(--color-slate);
  margin-inline-end: 2px;
  transition: color var(--transition-base);
}

.pg-tool-btn:hover {
  background-color: var(--color-magenta-tint);
  border-color: var(--color-magenta-edge);
  color: var(--color-magenta-ink);
}

.pg-tool-btn:hover i {
  color: var(--color-magenta-ink);
}

/* --- Prose Container & Typography --- */
.pg-prose {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-slate);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.pg-prose::after {
  content: "";
  display: table;
  clear: both;
}

/* First child margin reset */
.pg-prose > :first-child {
  margin-top: 0 !important;
}

/* Last child margin reset */
.pg-prose > :last-child {
  margin-bottom: 0 !important;
}

/* --- Headings --- */
.pg-prose h1,
.pg-prose h2,
.pg-prose h3,
.pg-prose h4,
.pg-prose h5,
.pg-prose h6 {
  font-family: var(--font-ui);
  color: var(--color-ink-black);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--spacing-36);
  margin-bottom: var(--spacing-16);
  line-height: 1.25;
  clear: both;
}

.pg-prose h1 {
  font-size: var(--text-heading-lg);
  letter-spacing: var(--tracking-heading);
}

.pg-prose h2 {
  font-size: var(--text-heading);
  letter-spacing: var(--tracking-heading);
  padding-bottom: var(--spacing-8);
  border-bottom: var(--border-hairline);
}

.pg-prose h3 {
  font-size: var(--text-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}

.pg-prose h4 {
  font-size: var(--text-subheading);
  letter-spacing: var(--tracking-subheading);
}

.pg-prose h5 {
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
}

.pg-prose h6 {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

/* --- Paragraphs & Text Elements --- */
.pg-prose p {
  margin: 0 0 var(--spacing-20);
}

.pg-prose strong,
.pg-prose b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-black);
}

.pg-prose em,
.pg-prose i {
  font-style: italic;
}

.pg-prose a {
  color: var(--color-magenta-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-base), text-decoration-color var(--transition-base);
}

.pg-prose a:hover {
  color: var(--color-magenta-ink-hover);
  text-decoration-color: var(--color-magenta-ink-hover);
}

.pg-prose mark {
  background-color: var(--color-magenta-tint);
  color: var(--color-ink-black);
  padding: 1px 4px;
  border-radius: var(--radius-xs);
}

.pg-prose del,
.pg-prose s {
  color: var(--text-secondary);
  text-decoration: line-through;
}

.pg-prose ins,
.pg-prose u {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pg-prose small {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.pg-prose sub,
.pg-prose sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.pg-prose sup {
  top: -0.5em;
}

.pg-prose sub {
  bottom: -0.25em;
}

.pg-prose kbd {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  padding: 2px 6px;
  background-color: var(--surface-subtle);
  border: 1px solid var(--border-control);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  color: var(--color-ink-black);
}

/* --- Horizontal Divider --- */
.pg-prose hr {
  margin: var(--spacing-36) 0;
  border: 0;
  height: 1px;
  background-color: var(--border-default);
  clear: both;
}

/* --- Lists --- */
.pg-prose ul,
.pg-prose ol {
  margin: 0 0 var(--spacing-20);
  padding-inline-start: var(--spacing-28);
}

.pg-prose ul {
  list-style-type: disc;
}

.pg-prose ol {
  list-style-type: decimal;
}

.pg-prose li {
  margin-bottom: var(--spacing-8);
  padding-inline-start: var(--spacing-4);
}

.pg-prose li::marker {
  color: var(--color-magenta-ink);
  font-weight: var(--font-weight-medium);
}

.pg-prose ul ul,
.pg-prose ol ol,
.pg-prose ul ol,
.pg-prose ol ul {
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}

/* Definition Lists */
.pg-prose dl {
  margin: 0 0 var(--spacing-24);
}

.pg-prose dt {
  font-family: var(--font-ui);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-black);
  margin-top: var(--spacing-16);
}

.pg-prose dd {
  margin-inline-start: var(--spacing-24);
  margin-bottom: var(--spacing-12);
  color: var(--text-secondary);
}

/* --- Blockquotes & Callouts --- */
.pg-prose blockquote {
  position: relative;
  margin: var(--spacing-24) 0;
  padding: var(--spacing-16) var(--spacing-24);
  background-color: var(--surface-magenta-wash);
  border-inline-start: 4px solid var(--color-magenta);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: var(--color-obsidian);
}

.pg-prose blockquote p:last-child {
  margin-bottom: 0;
}

.pg-prose blockquote cite {
  display: block;
  margin-top: var(--spacing-8);
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

/* Callout utility classes from rich editors */
.pg-prose .callout,
.pg-prose .alert,
.pg-prose .note {
  margin: var(--spacing-24) 0;
  padding: var(--spacing-16) var(--spacing-20);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  border: 1px solid var(--border-default);
  background-color: var(--surface-subtle);
}

.pg-prose .callout--info,
.pg-prose .alert-info {
  background-color: var(--surface-lavender-wash, #f4f3ff);
  border-color: #dcd7fe;
  color: #3525e6;
}

.pg-prose .callout--warning,
.pg-prose .alert-warning {
  background-color: #fff9eb;
  border-color: #fee7b3;
  color: #b45309;
}

.pg-prose .callout--success,
.pg-prose .alert-success {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}

/* --- Inline & Floated Media --- */
.pg-prose img,
.pg-prose video,
.pg-prose iframe {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-media);
}

/* Standalone centered image */
.pg-prose img {
  margin: var(--spacing-24) auto;
  box-shadow: var(--shadow-subtle);
}

/* Floated / Inline Images */
.pg-prose img.alignleft,
.pg-prose img.float-left,
.pg-prose img.float-start,
.pg-prose .alignleft,
.pg-prose [style*="float: left"],
.pg-prose [style*="float:left"] {
  float: left !important;
  margin: var(--spacing-8) var(--spacing-24) var(--spacing-20) 0 !important;
  max-width: min(50%, 420px) !important;
  clear: left;
}

.pg-prose img.alignright,
.pg-prose img.float-right,
.pg-prose img.float-end,
.pg-prose .alignright,
.pg-prose [style*="float: right"],
.pg-prose [style*="float:right"] {
  float: right !important;
  margin: var(--spacing-8) 0 var(--spacing-20) var(--spacing-24) !important;
  max-width: min(50%, 420px) !important;
  clear: right;
}

.pg-prose img.aligncenter,
.pg-prose .aligncenter,
.pg-prose [style*="margin: auto"],
.pg-prose [style*="margin:auto"],
.pg-prose [style*="text-align: center"] img {
  margin-inline: auto !important;
  float: none !important;
}

/* Figures & Captions */
.pg-prose figure {
  margin: var(--spacing-28) 0;
  text-align: center;
}

.pg-prose figure img {
  margin-inline: auto;
}

.pg-prose figcaption {
  margin-top: var(--spacing-8);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

/* Video / Iframe Embeds */
.pg-prose iframe,
.pg-prose video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  margin: var(--spacing-24) 0;
}

/* --- Code & Preformatted Text --- */
.pg-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background-color: var(--surface-subtle);
  border: 1px solid var(--border-default);
  color: var(--color-ink-black);
}

.pg-prose pre {
  margin: var(--spacing-24) 0;
  padding: var(--spacing-20);
  overflow-x: auto;
  background-color: var(--color-obsidian);
  border-radius: var(--radius-sm);
  color: var(--color-mist-light);
  line-height: 1.5;
}

.pg-prose pre code {
  font-size: var(--text-body-sm);
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
}

/* --- Tables — hairline rows only, overriding database inline borders & backgrounds --- */
.pg-prose table,
.pg-prose table.ag-table {
  width: 100% !important;
  max-width: 100% !important;
  margin: var(--spacing-16) 0 var(--spacing-28) !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  border: 0 !important;
  background: none !important;
  font-family: var(--font-ui) !important;
  font-size: var(--text-body-sm) !important;
  line-height: var(--leading-body-sm) !important;
}

.pg-prose tbody,
.pg-prose thead,
.pg-prose tfoot,
.pg-prose tr {
  border: 0 !important;
  background: none !important;
}

.pg-prose tbody tr:hover {
  background-color: var(--surface-subtle) !important;
}

.pg-prose th,
.pg-prose td {
  padding: var(--spacing-12) var(--spacing-16) !important;
  border: 0 !important;
  border-bottom: var(--border-hairline) !important;
  background: none !important;
  color: var(--color-slate) !important;
  text-align: start !important;
  vertical-align: middle !important;
  word-break: break-word !important;
  font-family: var(--font-ui) !important;
}

.pg-prose thead th {
  color: var(--color-ink-black) !important;
  font-weight: var(--font-weight-semibold) !important;
  border-bottom: 2px solid var(--border-default) !important;
  background-color: var(--surface-subtle) !important;
}

/* First column reads as the label of the row in database property tables */
.pg-prose td:first-child,
.pg-prose th:first-child {
  width: 34% !important;
  color: var(--color-ink-black) !important;
  font-weight: var(--font-weight-medium) !important;
}

.pg-prose table thead th {
  font-weight: var(--font-weight-semibold) !important;
}

/* Inside a table an image is a value in a cell (e.g. DBA logo) */
.pg-prose td img,
.pg-prose th img {
  display: inline-block !important;
  margin: 0 !important;
  max-width: 200px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  box-shadow: none !important;
  border-radius: var(--radius-xs) !important;
  vertical-align: middle !important;
}

/* --- Article Footer / Actions Bar --- */
.pg-footer {
  margin-top: var(--spacing-48);
  padding: var(--spacing-20) var(--spacing-24);
  background-color: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-cards);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-16);
}

.pg-footer__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-12);
}

.pg-footer__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-pill-badge);
  background-color: var(--color-pure-white);
  border: 1px solid var(--border-default);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(14, 15, 18, 0.05);
  transition: all var(--transition-base);
}

.pg-footer__btn i {
  font-size: 12px;
  color: var(--color-slate);
  margin-inline-end: 2px;
  transition: color var(--transition-base), transform var(--transition-base);
}

.pg-footer__btn:hover {
  border-color: var(--color-magenta-edge);
  background-color: var(--color-magenta-wash);
  color: var(--color-magenta-ink);
}

.pg-footer__btn:hover i {
  color: var(--color-magenta-ink);
}

.pg-footer__btn--primary {
  background-color: var(--color-obsidian);
  border-color: var(--color-obsidian);
  color: var(--color-pure-white);
}

.pg-footer__btn--primary i {
  color: var(--color-pure-white);
}

.pg-footer__btn--primary:hover {
  background-color: var(--color-magenta);
  border-color: var(--color-magenta);
  color: var(--color-pure-white);
}

.pg-footer__btn--primary:hover i {
  color: var(--color-pure-white);
}

/* --- Responsive Layout for Static Page --- */
@media (max-width: 768px) {
  .pg {
    padding-block: var(--spacing-36);
  }

  .pg__wrap {
    padding-inline: var(--spacing-16);
  }

  .pg-sheet {
    padding: var(--spacing-28) var(--spacing-20);
  }

  .pg-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-12);
  }

  .pg-tools {
    width: 100%;
    justify-content: flex-start;
  }

  .pg-footer {
    padding: var(--spacing-16);
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-12);
  }

  .pg-footer__links {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-8);
  }

  .pg-footer__btn {
    justify-content: center;
    width: 100%;
  }

  .pg-prose {
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  .pg-prose h1 {
    font-size: var(--text-heading);
  }

  .pg-prose h2 {
    font-size: var(--text-heading-sm);
  }

  .pg-prose h3 {
    font-size: var(--text-subheading);
  }

  /* Unfloat images on smaller screens so text isn't pinched into tiny columns */
  .pg-prose img.alignleft,
  .pg-prose img.float-left,
  .pg-prose img.float-start,
  .pg-prose .alignleft,
  .pg-prose [style*="float: left"],
  .pg-prose [style*="float:left"],
  .pg-prose img.alignright,
  .pg-prose img.float-right,
  .pg-prose img.float-end,
  .pg-prose .alignright,
  .pg-prose [style*="float: right"],
  .pg-prose [style*="float:right"] {
    float: none !important;
    margin: var(--spacing-16) auto !important;
    max-width: 100% !important;
    display: block;
    clear: both;
  }

  /* Scrollable table wrapper for narrow devices */
  .pg-prose table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ==========================================================================
   18 - Order result pages — success and failed
   Centred layout with status medallion, animated rings, ticket receipt,
   recovery steps, and theme buttons.
   ========================================================================== */

.res {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-gap);
  background-color: var(--surface-subtle);
  text-align: center;
  font-family: var(--font-ui);
}

.res__wrap {
  position: relative;
  max-width: 600px;
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}

/* --- Status Medallion --- */
.res-mark {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--spacing-24);
  display: grid;
  place-items: center;
}

.res-mark__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--status-success-border);
  opacity: 0.6;
  animation: res-ping 2.6s var(--ease-out-soft) infinite;
}

.res--failed .res-mark__ring {
  border-color: var(--status-error-border);
}

.res-mark__icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--status-success-bg);
  border: 2px solid var(--status-success-border);
  color: var(--status-success-text);
  font-size: 28px;
  box-shadow: 0 8px 24px -6px rgba(4, 120, 87, 0.25);
  animation: res-pop 520ms var(--ease-out-soft) both;
}

.res--failed .res-mark__icon {
  background-color: var(--status-error-bg);
  border-color: var(--status-error-border);
  color: var(--status-error-text);
  box-shadow: 0 8px 24px -6px rgba(195, 28, 28, 0.25);
}

@keyframes res-ping {
  0% {
    transform: scale(0.85);
    opacity: 0.6;
  }
  70% {
    transform: scale(1.15);
    opacity: 0;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

@keyframes res-pop {
  from {
    opacity: 0;
    transform: scale(0.72);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .res-mark__ring,
  .res-mark__icon {
    animation: none;
  }
}

/* --- Headings --- */
.res-title {
  margin: 0 0 var(--spacing-12);
  font-family: var(--font-ui);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.res-msg {
  margin: 0 auto var(--spacing-32);
  max-width: 480px;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

/* --- Ticket Receipt Card --- */
.res-ticket {
  position: relative;
  margin-bottom: var(--spacing-28);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  text-align: start;
  overflow: hidden;
}

.res-ticket__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-20) var(--spacing-24);
  background-color: var(--surface-subtle);
  border-bottom: var(--border-hairline);
}

.res-ticket__label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
}

.res-ticket__number {
  display: block;
  margin-top: var(--spacing-4);
  font-family: var(--font-mono);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-subheading);
  color: var(--text-primary);
  word-break: break-all;
}

.res-ticket .tear {
  margin: 0;
}

.res-ticket__rows {
  margin: 0;
  padding: var(--spacing-20) var(--spacing-24);
  list-style: none;
}

.res-ticket__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-12) 0;
}

.res-ticket__row + .res-ticket__row {
  border-top: var(--border-hairline);
}

.res-ticket__row dt {
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  margin: 0;
}

.res-ticket__row dd {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  text-align: end;
  word-break: break-all;
}

.res-ticket__row--total dt {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-size: var(--text-body);
}

.res-ticket__row--total dd {
  font-family: var(--font-mono);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--color-magenta-ink-active);
}

.res-mono {
  font-family: var(--font-mono) !important;
}

.res-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill-badge);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

.res-badge--success {
  background-color: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  color: var(--status-success-text);
}

.res-badge--warning {
  background-color: var(--status-warning-bg);
  border: 1px solid var(--status-warning-border);
  color: var(--status-warning-text);
}

.res-ticket__foot {
  padding: 0 var(--spacing-24) var(--spacing-24);
}

.res-note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: var(--spacing-16) 0 0;
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-sm);
  background-color: var(--surface-subtle);
  border: 1px solid var(--border-default);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  line-height: var(--leading-body-sm);
  color: var(--text-secondary);
  text-align: start;
}

.res-note i {
  color: var(--color-magenta-ink);
  font-size: 14px;
  margin-top: 2px;
  flex: none;
}

.res-note a {
  color: var(--color-magenta-ink);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Failed Recovery Help Card --- */
.res-help {
  margin-bottom: var(--spacing-28);
  padding: var(--spacing-28);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  text-align: start;
}

.res-help__title {
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-ui);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-subheading);
  color: var(--text-primary);
}

.res-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.res-next {
  margin-top: var(--spacing-28);
}

.res-next__list {
  display: grid;
  gap: var(--spacing-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.res-next__list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--spacing-12);
  align-items: start;
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

.res-next__list i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-magenta-wash);
  border-radius: 50%;
  font-size: 13px;
  color: var(--color-magenta-ink);
}

.res-next__list a {
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink);
}

.res-step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--text-secondary);
}

.res-step__num {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill-badge);
  background-color: var(--color-magenta-tint);
  border: 1px solid var(--color-magenta-edge);
  color: var(--color-magenta-ink);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.res-assist {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
  margin-top: var(--spacing-24);
  padding-top: var(--spacing-20);
  border-top: var(--border-hairline);
}

.res-assist__icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill-badge);
  background-color: var(--color-obsidian);
  color: var(--color-pure-white);
  font-size: 16px;
}

.res-assist__title {
  margin: 0 0 var(--spacing-4);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.res-assist__msg {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--text-secondary);
}

.res-assist__msg a {
  color: var(--color-magenta-ink);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Action Buttons Row --- */
.res-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-12);
}

.res-actions .btn {
  min-width: 170px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 600px) {
  .res {
    padding-block: var(--spacing-36);
  }

  .res__wrap {
    padding-inline: var(--spacing-16);
  }

  .res-ticket__top,
  .res-ticket__rows,
  .res-ticket__foot,
  .res-help {
    padding-inline: var(--spacing-16);
  }

  .res-actions {
    flex-direction: column;
    width: 100%;
  }
}

/* ==========================================================================
   19 - Course catalogue
   ========================================================================== */

.cg {
  position: relative;
  isolation: isolate;
  padding-block: var(--spacing-64) var(--section-gap);
  background-color: var(--surface-subtle);
  font-family: var(--font-ui);
  color: var(--text-primary);
}

.cg__wrap {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--spacing-32);
  align-items: start;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}

.cg__wrap > .cg-main:only-child {
  grid-column: 1 / -1;
}

.cg-side {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-24));
}

.cg-menu {
  padding: var(--spacing-16);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.cg-menu__title {
  margin: 0 0 var(--spacing-12);
  padding: 0 var(--spacing-8);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.cg-menu__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cg-menu__link {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-12);
  min-height: var(--touch-target-min);
  padding: 6px var(--spacing-8);
  border-radius: var(--radius-media);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  text-decoration: none;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.cg-menu__link:hover {
  background-color: var(--color-magenta-wash);
  color: var(--color-magenta-ink);
}

.cg-menu__link.is-active {
  background-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
  font-weight: var(--font-weight-semibold);
}

.cg-menu__thumb {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  background-color: var(--color-magenta-wash);
  border-radius: var(--radius-sm);
  color: var(--color-magenta-ink);
  font-size: 13px;
}

.cg-menu__link.is-active .cg-menu__thumb {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.cg-menu__link.is-active .cg-menu__thumb--all {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--text-on-accent);
}

.cg-menu__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cg-menu__count {
  min-width: 26px;
  padding: 2px 8px;
  background-color: var(--surface-raised);
  border-radius: var(--radius-pill-badge);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--text-secondary);
}

.cg-menu__link.is-active .cg-menu__count {
  background-color: rgba(255, 255, 255, 0.22);
  color: var(--text-on-accent);
}

.cg-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-24);
  margin-bottom: var(--spacing-24);
}

.cg-bar__title {
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.cg-bar__desc {
  max-width: 62ch;
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.cg-bar__count {
  display: inline-flex;
  align-items: baseline;
  flex: none;
  gap: 6px;
  padding: 6px var(--spacing-16);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.cg-bar__count strong {
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-magenta-ink);
}

.cg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-20);
  margin: 0 0 var(--spacing-40);
  padding: 0;
  list-style: none;
}

.cg-card {
  display: flex;
  min-width: 0;
}

.cg-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  color: inherit;
  text-decoration: none;
  transition: transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft),
              border-color 220ms var(--ease-out-soft);
}

.cg-card__link:hover {
  transform: translateY(-3px);
  border-color: var(--color-magenta-edge);
  box-shadow: var(--shadow-hover);
}

.cg-card__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.cg-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  margin: 8px 8px 0;
  overflow: hidden;
  background-color: var(--surface-raised);
  border-radius: var(--radius-media);
}

.cg-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out-soft);
}

.cg-card__link:hover .cg-card__media img {
  transform: scale(1.05);
}

.cg-card__empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-ash);
  font-size: 28px;
}

.cg-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--spacing-8);
  padding: var(--spacing-12) var(--spacing-16) var(--spacing-16);
}

.cg-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--spacing-8);
}

.cg-card__cat {
  max-width: 100%;
  overflow: hidden;
  padding: 2px var(--spacing-8);
  background-color: var(--badge-accent-bg);
  border-radius: var(--radius-pill-badge);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--badge-accent-text);
}

.cg-card__levels {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.cg-card__levels i {
  font-size: 9px;
  color: var(--color-magenta-ink);
}

.cg-card__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-body);
  line-height: 1.4;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color var(--transition-base);
}

.cg-card__link:hover .cg-card__title {
  color: var(--color-magenta-ink);
}

.cg-card__desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--text-secondary);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cg-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  margin-top: auto;
  padding-top: var(--spacing-12);
  border-top: var(--border-hairline);
}

.cg-card__price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.cg-card__price small {
  font-size: 11px;
  color: var(--text-secondary);
}

.cg-card__price strong {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.cg-card__price strong i {
  font-size: 10px;
  color: var(--color-magenta);
}

.cg-card__go {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  background-color: var(--color-magenta-wash);
  border-radius: 50%;
  color: var(--color-magenta-ink);
  font-size: 11px;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.cg-card__go-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cg-card__link:hover .cg-card__go {
  background-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
}

.cg-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.cg-pages__btn,
.cg-pages__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--spacing-16);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-decoration: none;
  transition: background-color var(--transition-base), border-color var(--transition-base),
              color var(--transition-base);
}

.cg-pages__num {
  padding: 0;
}

.cg-pages__nums {
  display: inline-flex;
  gap: 4px;
}

.cg-pages__btn:hover,
.cg-pages__num:hover {
  background-color: var(--color-magenta-wash);
  border-color: var(--color-magenta-edge);
  color: var(--color-magenta-ink);
}

.cg-pages__num.is-current {
  background-color: var(--color-magenta-ink);
  border-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
  font-weight: var(--font-weight-semibold);
}

.cg-pages__btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.cg-empty {
  max-width: 520px;
  margin: 0 auto;
  padding: var(--spacing-48) var(--spacing-28);
  text-align: center;
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.cg-empty__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-16);
  background-color: var(--color-magenta-wash);
  border: 1px solid var(--color-magenta-edge);
  border-radius: 50%;
  color: var(--color-magenta-ink);
  font-size: 24px;
}

.cg-empty__title {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.cg-empty__desc {
  margin: 0 0 var(--spacing-24);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.cg-menu__link:focus-visible,
.cg-pages__btn:focus-visible,
.cg-pages__num:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

@media (max-width: 1180px) {
  .cg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cg__wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-24);
  }

  .cg-side {
    position: static;
    min-width: 0;
  }

  .cg-menu {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .cg-menu__title {
    display: none;
  }

  .cg-menu__list {
    display: flex;
    gap: var(--spacing-8);
    overflow-x: auto;
    padding-bottom: var(--spacing-4);
    scrollbar-width: none;
  }

  .cg-menu__list::-webkit-scrollbar {
    display: none;
  }

  .cg-menu__link {
    grid-template-columns: 28px auto auto;
    gap: var(--spacing-8);
    min-height: 40px;
    padding: 4px var(--spacing-12) 4px 4px;
    background-color: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-pill-badge);
    white-space: nowrap;
  }

  .cg-menu__link.is-active {
    border-color: var(--color-magenta-ink);
  }

  .cg-menu__thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }

  .cg-menu__name {
    overflow: visible;
  }

  .cg-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--spacing-12);
  }

}

@media (max-width: 560px) {
  .cg {
    padding-top: var(--spacing-32);
  }

  .cg__wrap {
    padding-inline: var(--spacing-16);
  }

  .cg-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-12);
  }

  .cg-card__link {
    flex-direction: row;
    align-items: stretch;
  }

  .cg-card__media {
    flex: none;
    width: 112px;
    aspect-ratio: auto;
    margin: 8px 0 8px 8px;
  }

  .cg-card__body {
    min-width: 0;
    gap: 6px;
    padding: var(--spacing-12);
  }

  .cg-card__desc {
    display: none;
  }

  .cg-card__foot {
    padding-top: var(--spacing-8);
  }

  .cg-card__go {
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cg-card__link:hover,
  .cg-card__link:hover .cg-card__media img {
    transform: none;
  }
}

@media print {
  .pg {
    padding: 0;
    background-color: var(--surface-canvas);
  }

  .pg__wrap {
    max-width: 100%;
    padding: 0;
  }

  .pg-sheet {
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .pg-header,
  .pg-tools,
  .pg-footer {
    display: none !important;
  }

  .pg-prose {
    font-size: 12pt;
    line-height: 1.5;
    color: #000000;
  }

  .pg-prose a {
    text-decoration: underline;
    color: #000000;
  }

  .pg-prose a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
}

/* ==========================================================================
   20 - Course detail
   ========================================================================== */

.cd {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-gap);
  background-color: var(--surface-subtle);
  font-family: var(--font-ui);
  color: var(--text-primary);
}

.cd__wrap {
  display: grid;
  gap: var(--spacing-64);
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}

.cd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "media info"
    "about info";
  column-gap: var(--spacing-48);
  row-gap: var(--spacing-32);
  align-items: start;
}

.cd-media { grid-area: media; }
.cd-about { grid-area: about; }

.cd-info {
  grid-area: info;
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-24));
}

.cd-stage {
  position: relative;
  margin: 0;
  aspect-ratio: var(--aspect-thumbnail);
  overflow: hidden;
  background-color: var(--surface-inset);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-hover);
}

.cd-stage__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: cd-fade 360ms var(--ease-out-soft);
}

.cd-stage__empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--color-magenta-wash);
  color: var(--color-magenta);
  font-size: 56px;
}

.cd-thumbs {
  display: flex;
  gap: var(--spacing-12);
  margin-top: var(--spacing-12);
  overflow-x: auto;
  padding-bottom: var(--spacing-4);
  scrollbar-width: thin;
}

.cd-thumb {
  position: relative;
  flex: 0 0 112px;
  aspect-ratio: var(--aspect-thumbnail);
  padding: 0;
  overflow: hidden;
  background-color: var(--surface-raised);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  opacity: 0.72;
  cursor: pointer;
  transition: opacity var(--transition-base), border-color var(--transition-base),
              transform var(--transition-base);
}

.cd-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cd-thumb:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.cd-thumb.is-active {
  opacity: 1;
  border-color: var(--color-magenta);
}

.cd-thumb:focus-visible,
.cd-tag--link:focus-visible,
.cd-arrow:focus-visible,
.cd-dot:focus-visible,
.cd-track:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.cd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-16);
}

.cd-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 var(--spacing-12);
  background-color: var(--badge-bg);
  border: 1px solid var(--badge-border);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  color: var(--badge-text);
  text-decoration: none;
  transition: color var(--transition-base), background-color var(--transition-base),
              border-color var(--transition-base);
}

.cd-tag i {
  font-size: 11px;
  color: var(--text-secondary);
}

.cd-tag--link:hover {
  background-color: var(--color-magenta-wash);
  border-color: var(--color-magenta-edge);
  color: var(--color-magenta-ink);
}

.cd-tag--link:hover i,
.cd-tag--accent i {
  color: var(--color-magenta-ink);
}

.cd-tag--accent {
  background-color: var(--badge-accent-bg);
  border-color: var(--badge-accent-border);
  color: var(--badge-accent-text);
}

.cd-lede {
  margin: 0 0 var(--spacing-24);
  font-size: var(--text-subheading);
  line-height: 1.6;
  color: var(--text-muted);
}

.cd-start {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-24);
  padding: var(--spacing-20);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.cd-start__price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.cd-start__from {
  flex-basis: 100%;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.cd-start__price i {
  font-size: 16px;
  color: var(--color-magenta);
}

.cd-start__price strong {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-heading);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.8px;
  color: var(--text-primary);
}

.cd-start__price small {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.cd-start__cta i {
  font-size: 12px;
  transition: transform var(--transition-base);
}

.cd-start__cta:hover i {
  transform: translateY(3px);
}

.cd-facts {
  display: grid;
  gap: var(--spacing-12);
  margin: 0 0 var(--spacing-20);
  padding: 0;
  list-style: none;
}

.cd-fact {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--spacing-12);
  align-items: start;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--text-muted);
}

.cd-fact i {
  margin-top: 3px;
  font-size: 13px;
  text-align: center;
  color: var(--color-magenta-ink);
}

.cd-fact a {
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink);
}

.cd-fact a:hover {
  color: var(--color-magenta-ink-hover);
}

.cd-note {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--spacing-12);
  margin: 0;
  padding: var(--spacing-16);
  background-color: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  border-radius: var(--radius-media);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--text-muted);
}

.cd-note i {
  margin-top: 3px;
  text-align: center;
  color: var(--status-success-text);
}

.cd-section-title {
  position: relative;
  margin: 0;
  padding-left: var(--spacing-16);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.cd-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 4px;
  border-radius: var(--radius-pill-badge);
  background-color: var(--color-magenta);
}

.cd-levels {
  scroll-margin-top: calc(var(--header-height) + var(--spacing-24));
}

.cd-levels__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-24);
}

.cd-levels__sub {
  margin: var(--spacing-8) 0 0;
  padding-left: var(--spacing-16);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.cd-arrows {
  display: flex;
  gap: var(--spacing-8);
  flex: none;
}

.cd-arrow {
  display: grid;
  place-items: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  background-color: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base),
              color var(--transition-base), opacity var(--transition-base);
}

.cd-arrow:hover:not(:disabled) {
  background-color: var(--color-magenta-ink);
  border-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
}

.cd-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.cd-track {
  --cd-per-view: 3;
  display: flex;
  gap: var(--grid-gutter);
  margin: 0;
  padding: var(--spacing-4) 0 var(--spacing-16);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.cd-track::-webkit-scrollbar {
  display: none;
}

.cd-slide {
  display: flex;
  flex: 0 0 calc((100% - (var(--cd-per-view) - 1) * var(--grid-gutter)) / var(--cd-per-view));
  min-width: 0;
  scroll-snap-align: start;
}

.cd-level {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  transition: transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft),
              border-color 220ms var(--ease-out-soft);
}

.cd-level:hover {
  transform: translateY(-3px);
  border-color: var(--color-magenta-edge);
  box-shadow: var(--shadow-hover);
}

.cd-level__head {
  padding: var(--spacing-24);
  background-color: var(--color-magenta-wash);
  border-bottom: 1px solid var(--color-magenta-edge);
}

.cd-level__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-12);
}

.cd-level__num {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink-active);
}

.cd-level__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}

.cd-level__bars span {
  width: 5px;
  border-radius: 2px;
  background-color: var(--color-magenta-edge);
}

.cd-level__bars span:nth-child(1) { height: 25%; }
.cd-level__bars span:nth-child(2) { height: 50%; }
.cd-level__bars span:nth-child(3) { height: 75%; }
.cd-level__bars span:nth-child(4) { height: 100%; }

.cd-level__bars span.is-on {
  background-color: var(--color-magenta);
}

.cd-level__name {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.cd-level__price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.cd-level__price i {
  font-size: 13px;
  color: var(--color-magenta);
}

.cd-level__price strong {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-heading-sm);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.cd-level__price small {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.cd-points {
  display: grid;
  gap: var(--spacing-20);
  margin: 0;
  padding: var(--spacing-24);
  list-style: none;
}

.cd-point {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--spacing-12);
  align-items: start;
}

.cd-point__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-magenta-wash);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-sm);
  color: var(--color-magenta-ink);
  font-size: 14px;
}

.cd-point__label {
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.cd-point__desc {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  white-space: pre-line;
}

.cd-form {
  margin: auto 0 0;
  padding: 0 var(--spacing-24) var(--spacing-24);
}

.cd-form__submit {
  min-height: 50px;
}

.cd-form__submit i {
  font-size: 13px;
  transition: transform var(--transition-base);
}

.cd-form__submit:hover i {
  transform: translateX(4px);
}

.cd-form__submit:disabled {
  opacity: 0.75;
  cursor: progress;
}

.cd-dots {
  display: flex;
  justify-content: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
}

.cd-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  background-color: var(--color-fog);
  border: 0;
  border-radius: var(--radius-pill-badge);
  cursor: pointer;
  transition: width var(--transition-base), background-color var(--transition-base);
}

.cd-dot.is-active {
  width: 28px;
  background-color: var(--color-magenta);
}

.cd-levels.is-static .cd-arrows,
.cd-levels.is-static .cd-dots {
  display: none;
}

.cd-about {
  padding: var(--spacing-32);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.cd-about .cd-section-title {
  margin-bottom: var(--spacing-20);
}

.cd-prose {
  max-width: var(--measure-prose);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

@keyframes cd-fade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

@media (max-width: 1100px) {
  .cd-track {
    --cd-per-view: 2;
  }
}

@media (max-width: 991px) {
  .cd-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "media"
      "info"
      "about";
    row-gap: var(--spacing-32);
  }

  .cd-info {
    position: static;
  }

  .cd__wrap {
    gap: var(--spacing-48);
  }
}

@media (max-width: 640px) {
  .cd__wrap {
    padding-inline: var(--spacing-16);
  }

  .cd-track {
    --cd-per-view: 1.12;
  }

  .cd-thumb {
    flex-basis: 88px;
  }

  .cd-lede {
    font-size: var(--text-body);
  }

  .cd-start__cta {
    width: 100%;
  }

  .cd-levels__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .cd-arrows {
    display: none;
  }

  .cd-level__head,
  .cd-points {
    padding: var(--spacing-20);
  }

  .cd-form {
    padding: 0 var(--spacing-20) var(--spacing-20);
  }

  .cd-about {
    padding: var(--spacing-20);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cd-stage__img {
    animation: none;
  }

  .cd-track {
    scroll-behavior: auto;
  }

  .cd-thumb:hover,
  .cd-level:hover {
    transform: none;
  }
}

/* ==========================================================================
   21 - Cart and course cart
   ========================================================================== */

.cr {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-gap);
  background-color: var(--surface-subtle);
  font-family: var(--font-ui);
  color: var(--text-primary);
}

.cr__wrap {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}

.cr-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 640px;
  margin: 0 auto var(--spacing-48);
  padding: 0;
  list-style: none;
}

.cr-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
  text-align: center;
}

.cr-step + .cr-step::before {
  content: "";
  position: absolute;
  top: 17px;
  right: calc(50% + 26px);
  left: calc(-50% + 26px);
  height: 2px;
  border-radius: var(--radius-pill-badge);
  background-color: var(--border-strong);
}

.cr-step__dot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background-color: var(--surface-card);
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.cr-step__label {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.cr-step.is-current .cr-step__dot {
  background-color: var(--color-magenta-ink);
  border-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
  box-shadow: 0 0 0 5px var(--color-magenta-tint);
}

.cr-step.is-current .cr-step__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink);
}

.cr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-purchase-width);
  gap: var(--spacing-32);
  align-items: start;
}

.cr-main {
  min-width: 0;
}

.cr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-16);
}

.cr-head__title {
  position: relative;
  margin: 0;
  padding-left: var(--spacing-16);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.cr-head__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 4px;
  border-radius: var(--radius-pill-badge);
  background-color: var(--color-magenta);
}

.cr-head__count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--spacing-12);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

.cr-list {
  display: grid;
  gap: var(--spacing-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-item {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-20);
  padding: var(--spacing-16);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.cr-item:hover {
  border-color: var(--color-magenta-edge);
  box-shadow: var(--shadow-hover);
}

.cr-item__media {
  display: grid;
  place-items: center;
  aspect-ratio: var(--aspect-thumbnail);
  overflow: hidden;
  background-color: var(--surface-raised);
  border-radius: var(--radius-media);
  color: var(--color-ash);
  font-size: 24px;
}

.cr-item__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cr-item__media--credits {
  background: linear-gradient(135deg, var(--color-magenta-ink), var(--color-magenta));
  color: var(--text-on-accent);
}

.cr-item__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.cr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 var(--spacing-8);
  background-color: var(--badge-bg);
  border: 1px solid var(--badge-border);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--badge-text);
}

.cr-chip i {
  font-size: 10px;
  color: var(--color-magenta-ink);
}

.cr-chip--accent {
  background-color: var(--badge-accent-bg);
  border-color: var(--badge-accent-border);
  color: var(--badge-accent-text);
}

.cr-item__title {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--transition-base);
}

a.cr-item__title:hover {
  color: var(--color-magenta-ink);
}

.cr-item__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.cr-item__meta i {
  font-size: 11px;
  color: var(--color-magenta);
}

.cr-item__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-8);
}

.cr-item__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cr-item__price small {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.cr-item__price strong {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-primary);
}

.cr-item__price strong i {
  font-size: 12px;
  color: var(--color-magenta);
}

.cr-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 var(--spacing-12);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.cr-remove:hover {
  background-color: var(--status-error-bg);
  color: var(--status-error-text);
}

.cr-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-20);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink);
  text-decoration: none;
}

.cr-back i {
  font-size: 12px;
  transition: transform var(--transition-base);
}

.cr-back:hover {
  color: var(--color-magenta-ink-hover);
}

.cr-back:hover i {
  transform: translateX(-3px);
}

.cr-alert {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--spacing-12);
  margin: 0 0 var(--spacing-24);
  padding: var(--spacing-16);
  background-color: var(--status-warning-bg);
  border: 1px solid var(--status-warning-border);
  border-radius: var(--radius-media);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--status-warning-text);
}

.cr-alert i {
  margin-top: 2px;
}

.cr-side {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-24));
  display: grid;
  gap: var(--spacing-16);
}

.cr-wallet {
  position: relative;
  display: grid;
  gap: var(--spacing-8);
  padding: var(--spacing-24);
  overflow: hidden;
  background: linear-gradient(150deg, var(--color-obsidian) 0%, var(--color-graphite) 100%);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-overlay);
  color: var(--color-pure-white);
}

.cr-wallet__label {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-fog);
}

.cr-wallet__amount {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-8);
}

.cr-wallet__amount i {
  font-size: 18px;
  color: var(--color-magenta);
}

.cr-wallet__amount strong {
  font-size: var(--text-heading);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.8px;
}

.cr-wallet__amount small {
  font-size: var(--text-body-sm);
  color: var(--color-fog);
}

.cr-meter {
  height: 8px;
  margin-top: var(--spacing-8);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill-badge);
}

.cr-meter__fill {
  display: block;
  height: 100%;
  background-color: var(--color-magenta);
  border-radius: inherit;
  transition: width var(--transition-progress);
}

.cr-meter__fill.is-short {
  background-color: var(--status-warning-border);
}

.cr-wallet__note {
  font-size: var(--text-caption);
  color: var(--color-fog);
}

.cr-wallet__topup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: var(--touch-target-min);
  margin-top: var(--spacing-8);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-buttons);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-pure-white);
  text-decoration: none;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.cr-wallet__topup:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-pure-white);
}

.cr-sum {
  position: relative;
  padding: var(--spacing-24);
  overflow: hidden;
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-overlay);
}

.cr-sum::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--color-magenta), var(--color-magenta-ink));
}

.cr-sum__title {
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.cr-sum__rows {
  display: grid;
  gap: var(--spacing-12);
  margin: 0 0 var(--spacing-20);
}

.cr-sum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.cr-sum__row dt {
  font-weight: var(--font-weight-regular);
}

.cr-sum__row dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-primary);
}

.cr-sum__row--cut dd {
  color: var(--status-success-text);
}

.cr-sum__row--after dd {
  color: var(--status-success-text);
}

.cr-sum__row--total {
  padding-top: var(--spacing-12);
  border-top: 1px dashed var(--border-strong);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.cr-sum__row--total dd {
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.4px;
}

.cr-sum__row--total dd small {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  color: var(--text-secondary);
}

.cr-sum__cta {
  min-height: 52px;
  box-shadow: var(--shadow-accent);
}

.cr-sum__cta i {
  font-size: 13px;
}

.cr-secure {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: var(--spacing-8);
  margin: var(--spacing-16) 0 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-secondary);
}

.cr-secure i {
  margin-top: 2px;
  color: var(--status-success-text);
}

.cr-pay {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 32px;
  margin-top: var(--spacing-16);
  padding-top: var(--spacing-16);
  border-top: var(--border-hairline);
  box-sizing: content-box;
}

.cr-empty {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--spacing-48) var(--spacing-32);
  text-align: center;
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.cr-empty__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--spacing-20);
  background-color: var(--color-magenta-wash);
  border: 1px solid var(--color-magenta-edge);
  border-radius: 50%;
  box-shadow: 0 0 0 8px var(--color-magenta-wash);
  color: var(--color-magenta-ink);
  font-size: 26px;
}

.cr-empty__title {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.cr-empty__desc {
  margin: 0 auto var(--spacing-24);
  max-width: var(--measure-narrow);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.cr-empty__balance {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-24);
  padding: var(--spacing-8) var(--spacing-16);
  background-color: var(--surface-raised);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.cr-empty__balance strong {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.cr-empty__balance i {
  color: var(--color-magenta);
}

.cr-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-12);
}

.cr-remove:focus-visible,
.cr-back:focus-visible,
.cr-wallet__topup:focus-visible,
a.cr-item__title:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

@media (max-width: 991px) {
  .cr-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-32);
  }

  .cr-side {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
  }
}

@media (max-width: 640px) {
  .cr__wrap {
    padding-inline: var(--spacing-16);
  }

  .cr-steps {
    margin-bottom: var(--spacing-32);
  }

  .cr-step__label {
    font-size: var(--text-caption);
  }

  .cr-item {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--spacing-12);
    padding: var(--spacing-12);
  }

  .cr-item__title {
    font-size: var(--text-body);
  }

  .cr-item__end {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-12);
    border-top: var(--border-hairline);
  }

  .cr-item__price {
    flex-direction: row;
    align-items: baseline;
    gap: var(--spacing-8);
  }

  .cr-empty {
    padding: var(--spacing-32) var(--spacing-20);
  }

  .cr-empty__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr-meter__fill,
  .cr-back i {
    transition: none;
  }
}

/* ==========================================================================
   22 - Buy credits
   ========================================================================== */

.tp {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-gap);
  background-color: var(--surface-subtle);
  font-family: var(--font-ui);
  color: var(--text-primary);
}

.tp__wrap {
  display: grid;
  gap: var(--spacing-40);
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}

.tp-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--spacing-32);
  align-items: center;
}

.tp-intro__text {
  margin: 0;
  font-size: var(--text-subheading);
  line-height: 1.6;
  color: var(--text-muted);
}

.tp-intro__facts {
  display: grid;
  gap: var(--spacing-12);
  justify-items: start;
}

.tp-rate {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 36px;
  padding: 0 var(--spacing-16);
  background-color: var(--badge-accent-bg);
  border: 1px solid var(--badge-accent-border);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--badge-accent-text);
}

.tp-notice {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--spacing-8);
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--status-info-bg);
  border: 1px solid var(--status-info-border);
  border-radius: var(--radius-media);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--text-muted);
}

.tp-notice--valid {
  background-color: var(--color-magenta-wash);
  border-color: var(--color-magenta-edge);
}

.tp-notice.tp-notice--valid i {
  color: var(--color-magenta-ink);
}

.tp-notice i {
  margin-top: 3px;
  color: var(--status-info-text);
}

.tp-notice strong {
  font-weight: var(--font-weight-semibold);
  color: var(--status-info-text);
}

.tp-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-purchase-width);
  gap: var(--spacing-32);
  align-items: start;
  margin: 0;
}

.tp-calc {
  padding: var(--spacing-32);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.tp-calc__head {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-28);
  padding-bottom: var(--spacing-24);
  border-bottom: var(--border-hairline);
}

.tp-calc__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  background-color: var(--color-magenta-wash);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-media);
  color: var(--color-magenta-ink);
  font-size: 19px;
}

.tp-calc__title {
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.tp-calc__desc {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.tp-label {
  display: block;
  margin-bottom: var(--spacing-8);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.tp-label--sm {
  margin-top: var(--spacing-20);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.tp-amount {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-height: 68px;
  padding: 0 var(--spacing-24);
  background-color: var(--surface-card);
  border: var(--border-input);
  border-radius: var(--radius-cards);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.tp-amount:focus-within {
  border-color: var(--color-magenta);
  box-shadow: 0 0 0 4px var(--color-magenta-tint);
}

.tp-amount__symbol {
  flex: none;
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink);
}

.tp-amount__input {
  flex: 1;
  min-width: 0;
  height: 64px;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  -moz-appearance: textfield;
  appearance: textfield;
}

.tp-amount__input::placeholder {
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  color: var(--text-disabled);
}

.tp-amount__input::-webkit-outer-spin-button,
.tp-amount__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tp-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-8);
}

.tp-quick__btn {
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-8);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-buttons);
  font-family: inherit;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base),
              color var(--transition-base);
}

.tp-quick__btn:hover {
  background-color: var(--color-magenta-wash);
  border-color: var(--color-magenta-edge);
  color: var(--color-magenta-ink);
}

.tp-quick__btn.is-active {
  background-color: var(--color-obsidian);
  border-color: var(--color-obsidian);
  color: var(--color-pure-white);
}

.tp-tiers {
  margin-top: var(--spacing-32);
  padding-top: var(--spacing-24);
  border-top: var(--border-hairline);
}

.tp-tiers__title {
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.tp-ladder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: var(--spacing-12);
  margin: 0;
  padding: var(--spacing-16) 0 0;
  list-style: none;
}

.tp-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--spacing-16);
  background-color: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-media);
  transition: background-color var(--transition-base), border-color var(--transition-base),
              box-shadow var(--transition-base), transform var(--transition-base);
}

.tp-tier:nth-child(1) { min-height: 150px; }
.tp-tier:nth-child(2) { min-height: 166px; }
.tp-tier:nth-child(3) { min-height: 182px; }
.tp-tier:nth-child(4) { min-height: 198px; }

.tp-tier__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: auto;
  background-color: var(--surface-raised);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.tp-tier__mult {
  margin-top: var(--spacing-12);
  font-size: var(--text-heading-sm);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.tp-tier__name {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.tp-tier__range {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.tp-tier__badge {
  position: absolute;
  top: -11px;
  left: var(--spacing-12);
  right: var(--spacing-12);
  overflow: hidden;
  padding: 3px var(--spacing-8);
  background-color: var(--color-magenta-ink);
  border-radius: var(--radius-pill-badge);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-on-accent);
}

.tp-tier--best {
  border-color: var(--color-magenta-edge);
}

.tp-tier--best .tp-tier__icon {
  background-color: var(--color-magenta-tint);
  color: var(--color-magenta-ink);
}

.tp-tier__match {
  display: none;
  align-items: center;
  gap: 4px;
  margin-top: var(--spacing-4);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink-active);
}

.tp-tier.is-match {
  background-color: var(--color-magenta-wash);
  border-color: var(--color-magenta);
  box-shadow: 0 0 0 1px var(--color-magenta) inset, var(--shadow-hover);
  transform: translateY(-4px);
}

.tp-tier.is-match .tp-tier__icon {
  background-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
}

.tp-tier.is-match .tp-tier__mult {
  color: var(--color-magenta-ink-active);
}

.tp-tier.is-match .tp-tier__match {
  display: inline-flex;
}

.tp-result {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-24));
}

.tp-result__card {
  display: grid;
  gap: var(--spacing-8);
  padding: var(--spacing-28) var(--spacing-24) var(--spacing-24);
  background: linear-gradient(160deg, var(--color-obsidian) 0%, var(--color-graphite) 100%);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-overlay);
  color: var(--color-pure-white);
}

.tp-result__label {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-fog);
}

.tp-result__total {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-12);
  min-width: 0;
}

.tp-result__total i {
  font-size: 24px;
  color: var(--color-magenta);
}

.tp-result__total strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-heading-lg);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

.tp-result__total.is-pulse strong {
  animation: tp-pulse 360ms var(--ease-out-soft);
}

.tp-result__rows {
  display: grid;
  gap: var(--spacing-12);
  margin: var(--spacing-16) 0 var(--spacing-20);
  padding-top: var(--spacing-16);
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.tp-result__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  font-size: var(--text-body-sm);
  color: var(--color-fog);
}

.tp-result__row dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-pure-white);
}

.tp-result__mult {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 var(--spacing-12);
  background-color: var(--color-magenta-tint);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-magenta-ink-active);
}

.tp-submit {
  min-height: 52px;
  box-shadow: var(--shadow-accent);
}

.tp-submit i {
  font-size: 13px;
  transition: transform var(--transition-base);
}

.tp-submit:hover i {
  transform: translateX(4px);
}

.tp-submit:disabled {
  opacity: 0.75;
  cursor: progress;
}

.tp-secure {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: var(--spacing-8);
  margin: var(--spacing-8) 0 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-fog);
}

.tp-secure i {
  margin-top: 2px;
  color: var(--status-success-border);
}

.tp-how__title {
  position: relative;
  margin: 0 0 var(--spacing-24);
  padding-left: var(--spacing-16);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.tp-how__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 4px;
  border-radius: var(--radius-pill-badge);
  background-color: var(--color-magenta);
}

.tp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-step {
  position: relative;
  padding: var(--spacing-24);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.tp-step__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-16);
  background-color: var(--color-magenta-wash);
  border: 1px solid var(--color-magenta-edge);
  border-radius: 50%;
  color: var(--color-magenta-ink);
  font-size: 18px;
}

.tp-step__num {
  position: absolute;
  top: var(--spacing-24);
  right: var(--spacing-24);
  font-size: var(--text-heading);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-mist);
}

.tp-step__title {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.tp-step__desc {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.tp-quick__btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

@keyframes tp-pulse {
  0% { opacity: 0.4; transform: translateY(4px); }
  100% { opacity: 1; transform: none; }
}

@media (max-width: 991px) {
  .tp-intro,
  .tp-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .tp-result {
    position: static;
  }

  .tp-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .tp__wrap {
    padding-inline: var(--spacing-16);
    gap: var(--spacing-32);
  }

  .tp-intro__text {
    font-size: var(--text-body);
  }

  .tp-calc {
    padding: var(--spacing-20);
  }

  .tp-quick,
  .tp-ladder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tp-ladder {
    row-gap: var(--spacing-20);
  }

  .tp-tier:nth-child(n) {
    min-height: 0;
  }

  .tp-amount {
    padding: 0 var(--spacing-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-result__total.is-pulse strong {
    animation: none;
  }

  .tp-tier.is-match {
    transform: none;
  }
}

/* ==========================================================================
   23 - About us
   ========================================================================== */

.au {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--spacing-112);
  font-family: var(--font-ui);
}

.au__wrap {
  position: relative;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}

.au--story {
  background-color: var(--surface-canvas);
}

.au-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-80);
  align-items: center;
}

.au-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--spacing-16);
  height: 580px;
}

.au-mosaic__item {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  background-color: var(--surface-raised);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-hover);
}

.au-mosaic__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out-soft);
}

.au-mosaic__item:hover img {
  transform: scale(1.04);
}

.au-mosaic__item--main {
  grid-row: 1 / 3;
}

.au-mosaic__item--top {
  margin-top: var(--spacing-40);
}

.au-mosaic__item--bottom {
  margin-bottom: var(--spacing-40);
}

.au-mosaic__glow {
  position: absolute;
  z-index: 0;
  inset: 12% -8% -8% 20%;
  background: radial-gradient(closest-side, var(--color-magenta-tint), transparent);
  border-radius: 50%;
  pointer-events: none;
}

.au-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-magenta-ink);
}

.au-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: var(--radius-pill-badge);
  background-color: var(--color-magenta);
}

.au-eyebrow--light {
  color: var(--color-magenta-edge);
}

.au-title {
  margin: 0 0 var(--spacing-20);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.au-title--light {
  color: var(--color-pure-white);
}

.au-copy {
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--text-secondary);
}

.au-copy--light {
  margin-bottom: 0;
  color: var(--color-fog);
}

.au-checks {
  display: grid;
  gap: var(--spacing-12);
  margin: var(--spacing-24) 0 var(--spacing-32);
  padding: var(--spacing-20);
  list-style: none;
  background-color: var(--surface-subtle);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.au-check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--spacing-12);
  align-items: start;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.au-check__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  background-color: var(--color-magenta-ink);
  border-radius: 50%;
  color: var(--text-on-accent);
  font-size: 10px;
}

.au-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
}

.au-actions .btn i {
  font-size: 12px;
  transition: transform var(--transition-base);
}

.au-actions .btn:hover i {
  transform: translateX(4px);
}

.au--flow {
  background-color: var(--color-ink-black);
  background-image:
    radial-gradient(60% 50% at 85% 0%, rgba(196, 10, 143, 0.28), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(245, 13, 180, 0.14), transparent 70%);
}

.au-flow__head {
  max-width: 720px;
  margin: 0 auto var(--spacing-64);
  text-align: center;
}

.au-flow__head .au-eyebrow {
  justify-content: center;
}

.au-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gutter);
  margin: 0 0 var(--spacing-64);
  padding: 0;
  list-style: none;
}

.au-path::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 52px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), var(--color-magenta), rgba(255, 255, 255, 0.08));
}

.au-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--spacing-28) var(--spacing-24);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-cards);
  backdrop-filter: blur(6px);
  transition: transform 260ms var(--ease-out-soft), border-color 260ms var(--ease-out-soft),
              background-color 260ms var(--ease-out-soft);
}

.au-node:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 194, 233, 0.4);
}

.au-node__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-20);
  background-color: var(--color-obsidian);
  border: 2px solid var(--color-magenta);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--color-ink-black);
  color: var(--color-magenta-edge);
  font-size: 17px;
}

.au-node__num {
  position: absolute;
  top: var(--spacing-24);
  right: var(--spacing-24);
  font-size: var(--text-heading);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.1);
}

.au-node__title {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-pure-white);
}

.au-node__desc {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.7;
  color: var(--color-fog);
}

.au-node--accent {
  background: linear-gradient(160deg, rgba(196, 10, 143, 0.3), rgba(196, 10, 143, 0.08));
  border-color: rgba(245, 13, 180, 0.5);
}

.au-node--accent .au-node__icon {
  background-color: var(--color-magenta-ink);
  border-color: var(--color-magenta-ink);
  color: var(--color-pure-white);
}

.au-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-32);
  padding: var(--spacing-40) var(--spacing-48);
  background: linear-gradient(120deg, var(--color-magenta-ink) 0%, var(--color-magenta-ink-active) 100%);
  border-radius: var(--radius-cards);
  box-shadow: 0 24px 48px -16px rgba(196, 10, 143, 0.5);
}

.au-cta__text {
  max-width: 620px;
}

.au-cta__title {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-pure-white);
}

.au-cta__desc {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-magenta-wash);
}

.au-cta__actions {
  display: flex;
  flex-wrap: wrap;
  flex: none;
  gap: var(--spacing-12);
}

.au-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-24);
  border: 1px solid transparent;
  border-radius: var(--radius-buttons);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--transition-base), color var(--transition-base),
              border-color var(--transition-base);
}

.au-cta__btn i {
  font-size: 12px;
  transition: transform var(--transition-base);
}

.au-cta__btn:hover i {
  transform: translateX(4px);
}

.au-cta__btn--solid {
  background-color: var(--color-pure-white);
  color: var(--color-magenta-ink-active);
}

.au-cta__btn--solid:hover {
  background-color: var(--color-magenta-wash);
  color: var(--color-magenta-ink-active);
}

.au-cta__btn--line {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--color-pure-white);
}

.au-cta__btn--line:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--color-pure-white);
  color: var(--color-pure-white);
}

.au-cta__btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-pure-white);
  outline-offset: var(--focus-ring-offset);
}

@media (max-width: 1100px) {
  .au-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .au-path::before {
    display: none;
  }
}

@media (max-width: 991px) {
  .au {
    padding-block: var(--section-gap);
  }

  .au-story {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-48);
  }

  .au-mosaic {
    height: 460px;
  }

  .au-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-32);
  }
}

@media (max-width: 640px) {
  .au__wrap {
    padding-inline: var(--spacing-16);
  }

  .au-mosaic {
    height: 360px;
    gap: var(--spacing-8);
  }

  .au-mosaic__item--top {
    margin-top: var(--spacing-20);
  }

  .au-mosaic__item--bottom {
    margin-bottom: var(--spacing-20);
  }

  .au-path {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: var(--spacing-40);
  }

  .au-flow__head {
    margin-bottom: var(--spacing-40);
  }

  .au-cta {
    padding: var(--spacing-24);
  }

  .au-cta__actions,
  .au-cta__btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .au-mosaic__item:hover img,
  .au-node:hover {
    transform: none;
  }
}

/* ==========================================================================
   24 - Home
   ========================================================================== */

.ho__wrap {
  position: relative;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}

.ho-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-magenta-ink);
}

.ho-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: var(--radius-pill-badge);
  background-color: var(--color-magenta);
}

.ho-eyebrow--light {
  color: var(--color-magenta-edge);
}

.ho-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--spacing-80) var(--spacing-112);
  background-color: var(--surface-canvas);
  background-image:
    radial-gradient(45% 60% at 88% 20%, var(--color-magenta-wash), transparent 70%),
    radial-gradient(30% 40% at 0% 100%, var(--surface-subtle), transparent 70%);
  font-family: var(--font-ui);
}

.ho-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--spacing-64);
  align-items: center;
}

.ho-hero__title {
  margin: 0 0 var(--spacing-20);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.ho-hero__desc {
  max-width: var(--measure-narrow);
  margin: 0 0 var(--spacing-32);
  font-size: var(--text-subheading);
  line-height: 1.65;
  color: var(--text-secondary);
}

.ho-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
}

.ho-hero__actions .btn {
  min-height: 52px;
  padding-inline: var(--spacing-28);
}

.ho-hero__cta {
  box-shadow: var(--shadow-accent);
}

.ho-hero__cta i {
  font-size: 12px;
  transition: transform var(--transition-base);
}

.ho-hero__cta:hover i {
  transform: translateX(4px);
}

.ho-collage {
  position: relative;
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  grid-template-rows: 1.1fr 0.9fr;
  gap: var(--spacing-16);
  height: 560px;
}

.ho-collage__item {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  background-color: var(--surface-raised);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-overlay);
}

.ho-collage__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out-soft);
}

.ho-collage__item:hover img {
  transform: scale(1.04);
}

.ho-collage__item--tall {
  grid-row: 1 / 3;
  margin-block: var(--spacing-32);
}

.ho-collage__item--tall img {
  object-position: 45% 30%;
}

.ho-collage__item--wide img {
  object-position: 70% 30%;
}

.ho-collage__item--small {
  width: 82%;
}

.ho-collage__ring {
  position: absolute;
  z-index: 0;
  top: -28px;
  right: -28px;
  width: 180px;
  height: 180px;
  border: 2px dashed var(--color-magenta-edge);
  border-radius: 50%;
  pointer-events: none;
}

.ho-floats {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ho-float {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  max-width: 240px;
  padding: var(--spacing-12) var(--spacing-16) var(--spacing-12) var(--spacing-12);
  background-color: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill-badge);
  box-shadow: var(--shadow-overlay);
  backdrop-filter: blur(8px);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--text-primary);
  animation: ho-bob 6s ease-in-out infinite;
}

.ho-float__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  background-color: var(--color-magenta-tint);
  border-radius: 50%;
  color: var(--color-magenta-ink);
  font-size: 13px;
}

.ho-float__icon--accent {
  background-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
}

.ho-float--levels {
  top: 12%;
  left: -32px;
}

.ho-float--pace {
  bottom: 4%;
  left: 14%;
  animation-delay: -2s;
}

.ho-float--credits {
  top: 52%;
  right: -24px;
  animation-delay: -4s;
}

@keyframes ho-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.ho-hero {
  background-color: #fdf3f9;
  background-image:
    radial-gradient(38% 55% at 92% 18%, rgba(245, 13, 180, 0.16), transparent 70%),
    radial-gradient(30% 45% at 4% 10%, rgba(139, 92, 246, 0.12), transparent 70%),
    radial-gradient(40% 50% at 30% 100%, rgba(255, 194, 233, 0.55), transparent 70%),
    linear-gradient(180deg, #fff5fb 0%, #fdf0f8 100%);
}

.ho-hero .ho__wrap {
  z-index: 1;
}

.ho-fx {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ho-fx::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-dots);
  background-size: 22px 22px;
  -webkit-mask-image:
    radial-gradient(34% 46% at 0% 0%, #000 0%, transparent 72%),
    radial-gradient(40% 50% at 100% 100%, #000 0%, transparent 72%);
  mask-image:
    radial-gradient(34% 46% at 0% 0%, #000 0%, transparent 72%),
    radial-gradient(40% 50% at 100% 100%, #000 0%, transparent 72%);
}

.ho-fx__shoot {
  position: absolute;
  left: -160px;
  width: 160px;
  height: 2px;
  border-radius: var(--radius-pill-badge);
  background: linear-gradient(90deg, rgba(245, 13, 180, 0), rgba(245, 13, 180, 0.55));
  opacity: 0;
  transform: rotate(14deg);
  animation: bn-shoot 6s linear infinite;
}

.ho-fx__shoot::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  width: 7px;
  height: 7px;
  background-color: var(--color-pure-white);
  border-radius: 50%;
  box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.95), 0 0 20px 7px rgba(245, 13, 180, 0.45);
  transform: translateY(-50%);
}

.ho-fx__shoot--1 { top: 6%; }
.ho-fx__shoot--2 { top: 16%; animation-delay: 2.2s; animation-duration: 7s; }
.ho-fx__shoot--3 { top: 72%; animation-delay: 4s; animation-duration: 6.5s; }

.ho-fx__spark {
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--bg-sparkle) no-repeat center / contain;
  animation: bn-twinkle 3.2s ease-in-out infinite;
}

.ho-fx__spark--1 { top: 12%; left: 40%; }
.ho-fx__spark--2 { top: 84%; left: 6%; width: 12px; height: 12px; animation-delay: -1s; }
.ho-fx__spark--3 { top: 8%; right: 6%; width: 22px; height: 22px; animation-delay: -2s; }
.ho-fx__spark--4 { bottom: 10%; right: 42%; width: 14px; height: 14px; animation-delay: -1.6s; }

.ho-fx__icon {
  position: absolute;
  left: -52px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 10px 24px -8px rgba(140, 8, 102, 0.4);
  color: var(--color-magenta-ink);
  font-size: 16px;
  opacity: 0;
  animation: bn-drift 14s linear infinite;
}

.ho-fx__icon--fill {
  background-color: var(--color-magenta-ink);
  color: var(--color-pure-white);
}

.ho-fx__icon--1 { top: 4%; }
.ho-fx__icon--2 { top: 86%; animation-delay: -2.3s; width: 48px; height: 48px; font-size: 20px; }
.ho-fx__icon--3 { top: 12%; animation-delay: -4.6s; width: 34px; height: 34px; font-size: 12px; }
.ho-fx__icon--4 { top: 92%; animation-delay: -7s; width: 36px; height: 36px; font-size: 14px; }
.ho-fx__icon--5 { top: 7%; animation-delay: -9.3s; width: 36px; height: 36px; font-size: 14px; }
.ho-fx__icon--6 { top: 80%; animation-delay: -11.6s; }

.ho-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-20);
  padding: 5px var(--spacing-16) 5px 5px;
  background-color: var(--color-ink-black);
  border-radius: var(--radius-pill-badge);
  box-shadow: 0 10px 24px -10px rgba(14, 15, 18, 0.5);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-pure-white);
}

.ho-hero__badge-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--color-magenta), var(--color-magenta-ink));
  border-radius: 50%;
  font-size: 11px;
}

.ho-hero__title {
  position: relative;
  margin-bottom: var(--spacing-28);
}

.ho-hero__ink {
  background-image: linear-gradient(100deg, var(--color-ink-black) 0%, var(--color-ink-black) 38%, var(--color-magenta-ink) 78%, var(--color-magenta-ink-active) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ho-hero__squiggle {
  display: block;
  width: min(300px, 70%);
  height: 16px;
  margin-top: var(--spacing-8);
  overflow: visible;
}

.ho-hero__squiggle path {
  fill: none;
  stroke: var(--color-magenta);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: ho-draw 1.4s 0.3s var(--ease-out-soft) forwards;
}

@keyframes ho-draw {
  to { stroke-dashoffset: 0; }
}

.ho-collage__blob {
  position: absolute;
  z-index: 0;
  inset: 8% 4% 2% 12%;
  background: linear-gradient(145deg, var(--color-magenta-tint), var(--color-magenta-edge));
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  filter: blur(2px);
  transform: rotate(-6deg);
  pointer-events: none;
}

.ho-bubble {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background-color: var(--color-pure-white);
  border-radius: 50%;
  box-shadow: 0 12px 28px -10px rgba(140, 8, 102, 0.45);
  color: var(--color-magenta-ink);
  font-size: 17px;
  animation: ho-bob 5s ease-in-out infinite;
}

.ho-bubble--heart {
  top: -18px;
  left: 32%;
  color: #e11d74;
}

.ho-bubble--play {
  right: -20px;
  bottom: 24%;
  background-color: var(--color-magenta-ink);
  color: var(--color-pure-white);
  animation-delay: -1.7s;
}

.ho-bubble--star {
  right: 30%;
  bottom: -18px;
  width: 38px;
  height: 38px;
  font-size: 14px;
  color: #f5a524;
  animation-delay: -3.3s;
}

@media (max-width: 991px) {
  .ho-hero__squiggle {
    margin-inline: auto;
  }

  .ho-fx__icon--2,
  .ho-fx__icon--4,
  .ho-fx__icon--6 {
    display: none;
  }
}

@media (max-width: 560px) {
  .ho-hero__badge {
    font-size: 10px;
    letter-spacing: 0.4px;
  }

  .ho-fx__icon--3,
  .ho-fx__icon--5,
  .ho-fx__shoot--3,
  .ho-fx__spark--4,
  .ho-bubble--star {
    display: none;
  }

  .ho-bubble {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  .ho-bubble--play {
    right: -8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ho-fx__shoot {
    display: none;
  }

  .ho-fx__spark,
  .ho-bubble {
    animation: none;
  }

  .ho-fx__icon {
    animation: none;
    opacity: 0.9;
  }

  .ho-fx__icon--1 { left: 8%; }
  .ho-fx__icon--2 { left: 22%; }
  .ho-fx__icon--3 { left: 30%; }
  .ho-fx__icon--4 { left: 40%; }
  .ho-fx__icon--5 { left: 46%; }
  .ho-fx__icon--6 { left: 14%; }

  .ho-hero__squiggle path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.ho-sec {
  padding-block: var(--section-gap);
  background-color: var(--surface-canvas);
  font-family: var(--font-ui);
}

.ho-sec--tint {
  background-color: var(--surface-subtle);
}

.ho-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-24);
  margin-bottom: var(--spacing-32);
}

.ho-head > div {
  max-width: 640px;
}

.ho-head--center {
  justify-content: center;
  text-align: center;
}

.ho-head--center .ho-eyebrow {
  justify-content: center;
}

.ho-head__title {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.ho-head__desc {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-secondary);
}

.ho-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  flex: none;
  min-height: var(--touch-target-min);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink);
  text-decoration: none;
}

.ho-link i {
  font-size: 12px;
  transition: transform var(--transition-base);
}

.ho-link:hover {
  color: var(--color-magenta-ink-hover);
}

.ho-link:hover i {
  transform: translateX(4px);
}

.ho-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spacing-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ho-cat {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-16);
  height: 100%;
  padding: var(--spacing-12);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  text-decoration: none;
  transition: transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft),
              border-color 220ms var(--ease-out-soft);
}

.ho-cat:hover {
  transform: translateY(-3px);
  border-color: var(--color-magenta-edge);
  box-shadow: var(--shadow-hover);
}

.ho-cat__media {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background-color: var(--color-magenta-wash);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-media);
  color: var(--color-magenta-ink);
  font-size: 19px;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.ho-cat:hover .ho-cat__media {
  background-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
}

.ho-cat__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ho-cat__name {
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  transition: color var(--transition-base);
}

.ho-cat:hover .ho-cat__name {
  color: var(--color-magenta-ink);
}

.ho-cat__count {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.ho-cat__go {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: var(--spacing-4);
  background-color: var(--surface-raised);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 11px;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.ho-cat:hover .ho-cat__go {
  background-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
}

.ho-arrows {
  display: flex;
  gap: var(--spacing-8);
  flex: none;
}

.ho-arrow {
  display: grid;
  place-items: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  background-color: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base),
              color var(--transition-base), opacity var(--transition-base);
}

.ho-arrow:hover:not(:disabled) {
  background-color: var(--color-magenta-ink);
  border-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
}

.ho-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

[data-slider].is-static .ho-arrows {
  display: none;
}

.ho-track {
  --ho-per-view: 4;
  display: flex;
  gap: var(--grid-gutter);
  margin: 0;
  padding: var(--spacing-4) 0 var(--spacing-16);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.ho-track::-webkit-scrollbar {
  display: none;
}

.ho-slide {
  display: flex;
  flex: 0 0 calc((100% - (var(--ho-per-view) - 1) * var(--grid-gutter)) / var(--ho-per-view));
  min-width: 0;
  scroll-snap-align: start;
}

.ho-course {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  text-decoration: none;
  transition: transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft),
              border-color 220ms var(--ease-out-soft);
}

.ho-course:hover {
  transform: translateY(-3px);
  border-color: var(--color-magenta-edge);
  box-shadow: var(--shadow-hover);
}

.ho-course__media {
  position: relative;
  display: block;
  aspect-ratio: var(--aspect-thumbnail);
  overflow: hidden;
  background-color: var(--surface-raised);
}

.ho-course__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out-soft);
}

.ho-course:hover .ho-course__media img {
  transform: scale(1.05);
}

.ho-course__cat {
  position: absolute;
  top: var(--spacing-12);
  left: var(--spacing-12);
  max-width: calc(100% - var(--spacing-24));
  overflow: hidden;
  padding: 4px 10px;
  background-color: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius-pill-badge);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.ho-course__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-20) var(--spacing-20);
}

.ho-course__levels {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink);
}

.ho-course__levels i {
  font-size: 10px;
}

.ho-course__title {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  transition: color var(--transition-base);
}

.ho-course:hover .ho-course__title {
  color: var(--color-magenta-ink);
}

.ho-course__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-top: auto;
  padding-top: var(--spacing-12);
  border-top: var(--border-hairline);
}

.ho-course__price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
}

.ho-course__price small {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.ho-course__price strong {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.ho-course__price strong i {
  font-size: 12px;
  color: var(--color-magenta);
}

.ho-course__go {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  background-color: var(--color-magenta-wash);
  border-radius: 50%;
  color: var(--color-magenta-ink);
  font-size: 11px;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.ho-course:hover .ho-course__go {
  background-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
}

.ho-foot {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-24);
}

.ho-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ho-steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 52px;
  left: 10%;
  right: 10%;
  border-top: 2px dashed var(--color-magenta-edge);
}

.ho-step {
  position: relative;
  z-index: 1;
  padding: var(--spacing-28) var(--spacing-24);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  transition: transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft);
}

.ho-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.ho-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-20);
}

.ho-step__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-magenta-wash);
  border: 1px solid var(--color-magenta-edge);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--surface-card);
  color: var(--color-magenta-ink);
  font-size: 17px;
}

.ho-step__num {
  font-size: var(--text-heading);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-mist);
}

.ho-step__title {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.ho-step__desc {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.7;
  color: var(--text-secondary);
}

.ho-step--accent {
  background: linear-gradient(160deg, var(--color-magenta-ink), var(--color-magenta-ink-active));
  border-color: transparent;
  box-shadow: var(--shadow-accent);
}

.ho-step--accent .ho-step__icon {
  background-color: var(--color-pure-white);
  border-color: var(--color-pure-white);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.16);
}

.ho-step--accent .ho-step__num {
  color: rgba(255, 255, 255, 0.22);
}

.ho-step--accent .ho-step__title {
  color: var(--color-pure-white);
}

.ho-step--accent .ho-step__desc {
  color: var(--color-magenta-wash);
}

.ho-credits {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-gap);
  background-color: var(--color-ink-black);
  background-image:
    radial-gradient(50% 60% at 100% 0%, rgba(196, 10, 143, 0.32), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(245, 13, 180, 0.12), transparent 70%);
  font-family: var(--font-ui);
}

.ho-credits__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--spacing-64);
  align-items: center;
}

.ho-credits__title {
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-pure-white);
}

.ho-credits__desc {
  margin: 0 0 var(--spacing-28);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-fog);
}

.ho-credits__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 52px;
  padding: 0 var(--spacing-28);
  background-color: var(--color-pure-white);
  border-radius: var(--radius-buttons);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-ink-active);
  text-decoration: none;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.ho-credits__cta i:last-child {
  font-size: 12px;
  transition: transform var(--transition-base);
}

.ho-credits__cta:hover {
  background-color: var(--color-magenta-wash);
  color: var(--color-magenta-ink-active);
}

.ho-credits__cta:hover i:last-child {
  transform: translateX(4px);
}

.ho-tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ho-tier {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon mult"
    "icon name"
    "range range";
  column-gap: var(--spacing-16);
  row-gap: 2px;
  align-items: center;
  padding: var(--spacing-20);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-cards);
  transition: transform 220ms var(--ease-out-soft), border-color 220ms var(--ease-out-soft),
              background-color 220ms var(--ease-out-soft);
}

.ho-tier:hover {
  transform: translateY(-3px);
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 194, 233, 0.4);
}

.ho-tier__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-media);
  color: var(--color-magenta-edge);
  font-size: 17px;
}

.ho-tier__mult {
  grid-area: mult;
  font-size: var(--text-heading-sm);
  line-height: 1.1;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-pure-white);
}

.ho-tier__name {
  grid-area: name;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fog);
}

.ho-tier__range {
  grid-area: range;
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-12);
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--color-fog);
}

.ho-tier--best {
  background: linear-gradient(160deg, rgba(196, 10, 143, 0.4), rgba(196, 10, 143, 0.12));
  border-color: rgba(245, 13, 180, 0.55);
}

.ho-tier--best .ho-tier__icon {
  background-color: var(--color-magenta-ink);
  color: var(--color-pure-white);
}

.ho-tier__badge {
  position: absolute;
  top: -11px;
  right: var(--spacing-16);
  max-width: calc(100% - var(--spacing-32));
  overflow: hidden;
  padding: 3px var(--spacing-12);
  background-color: var(--color-pure-white);
  border-radius: var(--radius-pill-badge);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-magenta-ink-active);
}

.ho-cat:focus-visible,
.ho-course:focus-visible,
.ho-arrow:focus-visible,
.ho-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.ho-credits__cta:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-pure-white);
  outline-offset: var(--focus-ring-offset);
}

@media (max-width: 1100px) {
  .ho-track {
    --ho-per-view: 3;
  }

  .ho-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ho-steps::before {
    display: none;
  }

  .ho-float--levels {
    left: -12px;
  }

  .ho-float--credits {
    right: -8px;
  }
}

@media (max-width: 991px) {
  .ho-hero {
    padding-block: var(--spacing-48) var(--spacing-80);
  }

  .ho-hero__grid,
  .ho-credits__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-48);
  }

  .ho-hero__text {
    text-align: center;
  }

  .ho-hero__text .ho-eyebrow,
  .ho-hero__actions {
    justify-content: center;
  }

  .ho-hero__desc {
    margin-inline: auto;
  }

  .ho-collage {
    height: 480px;
  }
}

@media (max-width: 768px) {
  .ho-track {
    --ho-per-view: 2;
  }

  .ho-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ho-head--center {
    align-items: center;
  }
}

@media (max-width: 560px) {
  .ho__wrap {
    padding-inline: var(--spacing-16);
  }

  .ho-hero__actions .btn {
    width: 100%;
  }

  .ho-collage {
    height: 380px;
    gap: var(--spacing-8);
  }

  .ho-collage__item--tall {
    margin-block: var(--spacing-16);
  }

  .ho-collage__ring {
    display: none;
  }

  .ho-float {
    max-width: 190px;
    padding: var(--spacing-8) var(--spacing-12) var(--spacing-8) var(--spacing-8);
    font-size: var(--text-caption);
  }

  .ho-float__icon {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .ho-float--levels {
    top: 4%;
    left: 4px;
  }

  .ho-float--credits {
    top: auto;
    right: 4px;
    bottom: 36%;
  }

  .ho-float--pace {
    display: none;
  }

  .ho-track {
    --ho-per-view: 1.15;
  }

  .ho-arrows {
    display: none;
  }

  .ho-steps,
  .ho-tiers {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ho-float {
    animation: none;
  }

  .ho-track {
    scroll-behavior: auto;
  }

  .ho-collage__item:hover img,
  .ho-cat:hover,
  .ho-course:hover,
  .ho-step:hover,
  .ho-tier:hover {
    transform: none;
  }
}

.ho-watch {
  overflow: hidden;
}

.ho-watch__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--spacing-80);
  align-items: center;
}

.ho-watch__media {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: var(--spacing-24);
}

.ho-reel {
  position: relative;
  z-index: 2;
  width: min(100%, 340px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background-color: var(--surface-inset);
  border: 8px solid var(--surface-card);
  border-radius: 32px;
  box-shadow: 0 32px 64px -20px rgba(14, 15, 18, 0.35), 0 0 0 1px var(--border-default);
}

.ho-reel__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ho-reel__toggle {
  position: absolute;
  right: var(--spacing-16);
  bottom: var(--spacing-16);
  display: grid;
  place-items: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  background-color: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-overlay);
  color: var(--color-magenta-ink);
  font-size: 14px;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.ho-reel__toggle:hover {
  background-color: var(--color-magenta-ink);
  color: var(--text-on-accent);
}

.ho-reel__toggle:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.ho-watch__blob {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(92%, 420px);
  aspect-ratio: 1;
  background: linear-gradient(145deg, var(--color-magenta-tint), var(--color-magenta-edge));
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  transform: translate(-50%, -50%) rotate(-8deg);
}

.ho-watch__dots {
  position: absolute;
  z-index: 1;
  right: 4%;
  bottom: 8%;
  width: 120px;
  height: 120px;
  background-image: radial-gradient(var(--color-magenta) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.45;
}

.ho-watch__list {
  display: grid;
  gap: var(--spacing-12);
  margin: var(--spacing-28) 0 var(--spacing-32);
  padding: 0;
  list-style: none;
}

.ho-watch__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--spacing-16);
  align-items: center;
  padding: var(--spacing-12);
  background-color: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-body);
  color: var(--text-primary);
}

.ho-watch__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-magenta-wash);
  border: 1px solid var(--color-magenta-edge);
  border-radius: var(--radius-media);
  color: var(--color-magenta-ink);
  font-size: 16px;
}

.ho-watch__cta {
  min-height: 52px;
  padding-inline: var(--spacing-28);
  box-shadow: var(--shadow-accent);
}

.ho-watch__cta i {
  font-size: 12px;
  transition: transform var(--transition-base);
}

.ho-watch__cta:hover i {
  transform: translateX(4px);
}

@media (max-width: 991px) {
  .ho-watch__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-48);
  }

  .ho-reel {
    width: min(100%, 300px);
  }
}

@media (max-width: 560px) {
  .ho-reel {
    width: min(78%, 280px);
    border-width: 6px;
    border-radius: 26px;
  }

  .ho-watch__dots {
    display: none;
  }

  .ho-watch__cta {
    width: 100%;
  }
}

/* ==========================================================================
   25 — Page atmosphere
   ========================================================================== */

:root {
  --bg-blush: #fcf7fb;
  --bg-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f50db4' d='M12 0c.9 6.6 5.4 11.1 12 12-6.6.9-11.1 5.4-12 12-.9-6.6-5.4-11.1-12-12C6.6 11.1 11.1 6.6 12 0z'/%3E%3C/svg%3E");
  --bg-glow:
    radial-gradient(40% 44% at 100% 0%, rgba(245, 13, 180, 0.10), transparent 70%),
    radial-gradient(36% 40% at 0% 34%, rgba(139, 92, 246, 0.08), transparent 70%),
    radial-gradient(44% 40% at 62% 100%, rgba(255, 194, 233, 0.40), transparent 70%),
    linear-gradient(180deg, #fdf7fb 0%, #faf7fd 100%);
  --bg-glow-alt:
    radial-gradient(40% 44% at 0% 0%, rgba(245, 13, 180, 0.09), transparent 70%),
    radial-gradient(36% 40% at 100% 60%, rgba(139, 92, 246, 0.08), transparent 70%),
    radial-gradient(44% 40% at 30% 100%, rgba(255, 194, 233, 0.36), transparent 70%),
    linear-gradient(180deg, #fbf5fa 0%, #fdf8fc 100%);
  --bg-dots: radial-gradient(rgba(196, 10, 143, 0.18) 1.2px, transparent 1.4px);
}

body {
  background-color: var(--bg-blush);
}

.contact,
.co,
.dash,
.rcpt,
.pg,
.res,
.cg,
.cd,
.cr,
.tp,
.au--story,
.ho-sec {
  position: relative;
  isolation: isolate;
  background-color: var(--bg-blush);
  background-image: var(--bg-glow);
}

.ho-sec--tint,
.cd,
.tp {
  background-image: var(--bg-glow-alt);
}

.contact::before,
.co::before,
.dash::before,
.rcpt::before,
.pg::before,
.res::before,
.cg::before,
.cd::before,
.cr::before,
.tp::before,
.au--story::before,
.ho-sec::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--bg-dots);
  background-size: 22px 22px;
  -webkit-mask-image:
    radial-gradient(38% 50% at 100% 0%, #000 0%, transparent 72%),
    radial-gradient(32% 46% at 0% 100%, #000 0%, transparent 72%);
  mask-image:
    radial-gradient(38% 50% at 100% 0%, #000 0%, transparent 72%),
    radial-gradient(32% 46% at 0% 100%, #000 0%, transparent 72%);
  pointer-events: none;
}

.contact::after,
.co::after,
.dash::after,
.rcpt::after,
.pg::after,
.res::after,
.cg::after,
.cd::after,
.cr::after,
.tp::after,
.au--story::after,
.ho-sec::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--bg-sparkle), var(--bg-sparkle), var(--bg-sparkle);
  background-repeat: no-repeat;
  background-size: 26px 26px, 14px 14px, 18px 18px;
  background-position:
    right max(4%, 24px) top 40px,
    right calc(max(4%, 24px) + 40px) top 84px,
    left max(3%, 16px) bottom 56px;
  opacity: 0.32;
  pointer-events: none;
}

.ho-sec--tint::after {
  background-position:
    left max(4%, 24px) top 40px,
    left calc(max(4%, 24px) + 40px) top 84px,
    right max(3%, 16px) bottom 56px;
}

@media (max-width: 640px) {
  .contact::after,
  .co::after,
  .dash::after,
  .rcpt::after,
  .pg::after,
  .res::after,
  .cg::after,
  .cd::after,
  .cr::after,
  .tp::after,
  .au--story::after,
  .ho-sec::after {
    background-size: 18px 18px, 10px 10px, 12px 12px;
    opacity: 0.24;
  }
}

@media print {
  body,
  .contact,
  .co,
  .dash,
  .rcpt,
  .pg,
  .res,
  .cg,
  .cd,
  .cr,
  .tp,
  .au--story,
  .ho-sec {
    background: var(--surface-canvas) !important;
  }

  .contact::before,
  .co::before,
  .dash::before,
  .rcpt::before,
  .pg::before,
  .res::before,
  .cg::before,
  .cd::before,
  .cr::before,
  .tp::before,
  .au--story::before,
  .ho-sec::before,
  .contact::after,
  .co::after,
  .dash::after,
  .rcpt::after,
  .pg::after,
  .res::after,
  .cg::after,
  .cd::after,
  .cr::after,
  .tp::after,
  .au--story::after,
  .ho-sec::after {
    display: none;
  }
}