/*
  VEHA Clean CSS v4.37
  Standalone foundation for a new page without the old CSS.
  Load this file only on pages that are being migrated to the new design system.

  Recommended usage:
  <main class="content"> ... </main>
*/

/* =========================================================
   01. Design tokens
   ========================================================= */
:root {
  /* Layout */
  --container: 1440px;
  --container-narrow: 860px;
  --container-wide: 1440px;
  --page-x: clamp(18px, 4vw, 32px);

  /* Spacing scale: 4px/8px based */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;

  --section-y: clamp(var(--s-9), 7vw, var(--s-11));
  --section-y-sm: clamp(var(--s-7), 5vw, var(--s-9));
  --flow: var(--s-5);

  /* Brand colors */
  --c-bg: #f4f5f7;
  --c-surface: #ffffff;
  --c-surface-2: #f8f8f8;
  --c-text: #111318;
  --c-text-soft: #3d424c;
  --c-muted: #6a707b;
  --c-border: #d9dce2;

  --c-primary: #ff6347;
  --c-primary-hover: #e95036;
  --c-primary-soft: #ffd8d1;

  --c-gold: #eec930;
  --c-gold-hover: #dcb824;
  --c-gold-soft: #fff6d1;

  --c-dark: #3c3d41;
  --c-dark-2: #5b5c5f;
  --c-white: #ffffff;

  --c-success: #d4edda;
  --c-warning: #fff3cd;
  --c-danger: #ff4949;

  /* Radius: restrained */
  --r-0: 0;
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .08);
  --sh-md: 0 4px 14px rgba(0, 0, 0, .14);
  --sh-lg: 0 12px 30px rgba(0, 0, 0, .18);

  /* Typography */
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  --fs-12: clamp(12px, .72vw, 13px);
  --fs-14: clamp(14px, .82vw, 15px);
  --fs-16: clamp(16px, .95vw, 17px);
  --fs-18: clamp(18px, 1.15vw, 20px);
  --fs-22: clamp(21px, 1.55vw, 26px);
  --fs-28: clamp(26px, 2.15vw, 36px);
  --fs-36: clamp(32px, 3.25vw, 52px);
  --fs-52: clamp(40px, 5.6vw, 84px);
  --fs-72: clamp(48px, 7.4vw, 112px);

  --lh-tight: 1.06;
  --lh-title: 1.16;
  --lh-body: 1.58;
  --lh-relaxed: 1.75;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Grid */
  --grid-gap: var(--s-6);
  --grid-min: 260px;
  --table-gap: 2px;

  /* Motion */
  --tr-fast: 160ms ease;
  --tr: 240ms ease;
}

/* =========================================================
   02. Base reset
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
  Global reset: all browser default margins and paddings are removed.
  Spacing must be assigned intentionally through typography, form, layout,
  component rules or spacing utilities.
*/

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-main);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c-primary), white 35%);
  outline-offset: 3px;
}

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

/* =========================================================
   03. Page, containers, sections
   ========================================================= */
.container {
  width: min(100% - (var(--page-x) * 2), var(--container));
  margin-inline: auto;
}

/* Direct editorial children of a full-width .content wrapper receive the
   standard page inset automatically. This is width-based spacing, not padding. */
.content > :where(p, figure, ol, ul, table, blockquote, h1, h2, h3, h4, h5, h6) {
  width: min(100% - (var(--page-x) * 2), var(--container));
  margin-inline: auto;
}

/* Avoid applying the page inset twice when .content is itself a container or
   is already placed inside one of the container utilities. */
:where(.container, .container-narrow, .container-wide).content > :where(p, figure, ol, ul, table, blockquote, h1, h2, h3, h4, h5, h6),
:where(.container, .container-narrow, .container-wide) .content > :where(p, figure, ol, ul, table, blockquote, h1, h2, h3, h4, h5, h6) {
  width: auto;
  margin-inline: 0;
}

.container-narrow {
  width: min(100% - (var(--page-x) * 2), var(--container-narrow));
  margin-inline: auto;
}

.container-wide {
  width: min(100% - (var(--page-x) * 2), var(--container-wide));
  margin-inline: auto;
}

.full {
  width: 100%;
  max-width: none;
}

.section {
  padding-block: var(--section-y);
}

.section-sm {
  padding-block: var(--section-y-sm);
}

.surface {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}

.bg {
  padding-block: var(--section-y);
}

.bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-dark,
.invert {
  background-color: var(--c-dark);
  color: var(--c-white);
}

.bg-gold {
  background-color: var(--c-gold-soft);
}

.bg-primary-soft {
  background-color: var(--c-primary-soft);
}

/* Flow: opt-in vertical rhythm inside layout/component blocks. */
.flow > * + * {
  margin-top: var(--flow);
}

/*
  Default article rhythm for .content is defined after the structural list
  reset so prose receives readable spacing while component classes can still
  override it with their more specific selectors.
*/

/* =========================================================
   04. Typography
   Visual type scales are opt-in through .t-* classes.
   The .content container never changes heading font-size or font-weight.
   ========================================================= */
.t-display {
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -.05em;
}

.t-hero {
  font-size: var(--fs-52);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -.04em;
}

.t-h1 {
  font-size: var(--fs-36);
  line-height: var(--lh-title);
  font-weight: var(--fw-bold);
  letter-spacing: -.03em;
}

.t-h2 {
  font-size: var(--fs-28);
  line-height: var(--lh-title);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
}

.t-h3 {
  font-size: var(--fs-22);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}

.t-h4 {
  font-size: var(--fs-18);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}

.t-h5 {
  font-size: var(--fs-16);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}

.t-h6 {
  font-size: var(--fs-14);
  line-height: 1.35;
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
}

.t-body,
.content :where(p, li) {
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}

.t-body,
.content :where(p, li) {
  font-weight: var(--fw-regular);
}

strong.t-body,
b.t-body {
  font-weight: var(--fw-bold);
}

.t-lead {
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--c-text-soft);
}

.t-small {
  font-size: var(--fs-12);
  line-height: 1.5;
}

.t-caption {
  font-size: var(--fs-12);
  line-height: 1.45;
  color: var(--c-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.t-muted {
  color: var(--c-muted);
}

.t-primary {
  color: var(--c-primary);
}

.t-gold {
  color: var(--c-gold);
}

.t-center {
  text-align: center;
}

.t-right {
  text-align: right;
}

.t-uppercase {
  text-transform: uppercase;
  letter-spacing: .06em;
}

.content :where(ul, ol) {
  padding-inline-start: var(--s-7);
}

/* ========================================================= Native list baseline after global reset
   Browser default list indentation is removed by the reset.
   Plain ul/ol lists get intentional indentation and markers back here,
   but no default vertical margins. Add .gap-* / .mt-* intentionally.
   Component lists such as .timeline, .steps, .takeaways, .faq-list
   keep their own dedicated rules later in the file.
   ========================================================= */
:where(ul, ol):not([class]) {
  margin-block: 0;
  padding-inline-start: var(--s-7);
  list-style-position: outside;
}

:where(ul):not([class]) {
  list-style-type: disc;
}

:where(ol):not([class]) {
  list-style-type: decimal;
}

:where(ul, ol):not([class]) :where(ul, ol):not([class]) {
  margin-block: 0;
  padding-inline-start: var(--s-6);
}

:where(ul, ol):not([class]) > li + li {
  margin-top: 0;
}

:where(ul, ol):not([class]) > li::marker {
  color: var(--c-primary);
  font-weight: var(--fw-semibold);
}

.content a:not(.btn):not(.badge) {
  color: currentColor;
  text-decoration: none;
}

/* =========================================================
   05. Spacing utilities
   ========================================================= */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--s-1) !important; }
.mt-2 { margin-top: var(--s-2) !important; }
.mt-3 { margin-top: var(--s-3) !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mt-5 { margin-top: var(--s-5) !important; }
.mt-6 { margin-top: var(--s-6) !important; }
.mt-7 { margin-top: var(--s-7) !important; }
.mt-8 { margin-top: var(--s-8) !important; }
.mt-9 { margin-top: var(--s-9) !important; }
.mt-10 { margin-top: var(--s-10) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--s-1) !important; }
.mb-2 { margin-bottom: var(--s-2) !important; }
.mb-3 { margin-bottom: var(--s-3) !important; }
.mb-4 { margin-bottom: var(--s-4) !important; }
.mb-5 { margin-bottom: var(--s-5) !important; }
.mb-6 { margin-bottom: var(--s-6) !important; }
.mb-7 { margin-bottom: var(--s-7) !important; }
.mb-8 { margin-bottom: var(--s-8) !important; }
.mb-9 { margin-bottom: var(--s-9) !important; }
.mb-10 { margin-bottom: var(--s-10) !important; }

.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.mx-auto { margin-inline: auto !important; }

.p-0 { padding: 0 !important; }
.p-3 { padding: var(--s-3) !important; }
.p-4 { padding: var(--s-4) !important; }
.p-5 { padding: var(--s-5) !important; }
.p-6 { padding: var(--s-6) !important; }
.p-7 { padding: var(--s-7) !important; }
.p-8 { padding: var(--s-8) !important; }

.py-section { padding-block: var(--section-y) !important; }
.py-section-sm { padding-block: var(--section-y-sm) !important; }

/* =========================================================
   06. Grid system
   ========================================================= */
.grid {
  display: grid;
  gap: var(--grid-gap);
  align-items: center;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.grid-auto {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min)), 1fr));
}

.grid-fill {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min)), 1fr));
}

.grid-sidebar-left {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
}

.grid-sidebar-right {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
}

.stack {
  display: grid;
  gap: var(--s-6);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.split {
  display: flex;
  gap: var(--s-6);
  align-items: center;
  justify-content: space-between;
}

.flex-split {
  display: flex;
  gap: var(--grid-gap);
  align-items: stretch;
}

.flex-split > * {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.flex-fill {
  flex: 1 1 0 !important;
  min-width: 0;
}

.flex-auto {
  flex: 0 0 auto !important;
}

.basis-custom { flex: 0 0 var(--basis, auto) !important; max-width: var(--basis, none); }
.basis-2 { flex: 0 0 50% !important; max-width: 50%; }
.basis-3 { flex: 0 0 33.333% !important; max-width: 33.333%; }
.basis-4 { flex: 0 0 25% !important; max-width: 25%; }
.basis-5 { flex: 0 0 20% !important; max-width: 20%; }
.basis-6 { flex: 0 0 16.666% !important; max-width: 16.666%; }
.basis-8 { flex: 0 0 12.5% !important; max-width: 12.5%; }
.basis-10 { flex: 0 0 10% !important; max-width: 10%; }
.basis-12 { flex: 0 0 8.333% !important; max-width: 8.333%; }

.x-start { justify-content: flex-start !important; }
.x-center { justify-content: center !important; }
.x-end { justify-content: flex-end !important; }
.x-between { justify-content: space-between !important; }
.y-start { align-items: flex-start !important; }
.y-center { align-items: center !important; }
.y-end { align-items: flex-end !important; }
.y-stretch { align-items: stretch !important; }

.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }

/* =========================================================
   07. Cards and media
   ========================================================= */
.card {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: none;
  overflow: hidden;
}

.card-body {
  padding: var(--s-6);
}

.card-title {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-22);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}

.card-text {
  margin: 0;
  color: var(--c-text-soft);
}

.media-cover,
.media-square,
.media-video {
  position: relative;
  overflow: hidden;
  background: var(--c-surface-2);
}

.media-cover { aspect-ratio: 4 / 3; }
.media-square { aspect-ratio: 1 / 1; }
.media-video { aspect-ratio: 16 / 9; }

.media-cover > img,
.media-square > img,
.media-video > img,
.media-cover > video,
.media-video > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-rounded {
  border-radius: var(--r-md);
}

.img-wide {
  width: 100%;
}

/* =========================================================
   08. Buttons
   Default button is red.
   Optional color modifiers: .gold / .gray; .red remains an explicit alias.
   Legacy aliases remain available: .btn-primary, .btn-red, .btn-gold,
   .btn-gray and .btn-dark.
   ========================================================= */
.btn {
  --btn-bg: var(--c-primary);
  --btn-color: var(--c-white);
  --btn-border: var(--c-primary);
  --btn-hover-bg: var(--c-primary-hover);
  --btn-hover-color: var(--c-white);
  --btn-hover-border: var(--c-primary-hover);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 14px 24px;
  border: 1px solid var(--btn-border);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-color);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--tr), border-color var(--tr), color var(--tr), box-shadow var(--tr), transform var(--tr-fast);
}

.btn:hover {
  border-color: var(--btn-hover-border);
  background: var(--btn-hover-bg);
  color: var(--btn-hover-color);
  text-decoration: none;
}

.btn.red,
.btn-primary,
.btn-red {
  --btn-bg: var(--c-primary);
  --btn-color: var(--c-white);
  --btn-border: var(--c-primary);
  --btn-hover-bg: var(--c-primary-hover);
  --btn-hover-color: var(--c-white);
  --btn-hover-border: var(--c-primary-hover);
}

.btn.gold,
.btn-gold {
  --btn-bg: var(--c-gold);
  --btn-color: var(--c-text);
  --btn-border: var(--c-gold);
  --btn-hover-bg: var(--c-gold-hover);
  --btn-hover-color: var(--c-text);
  --btn-hover-border: var(--c-gold-hover);
}

.btn.gray,
.btn-gray {
  --btn-bg: var(--c-border);
  --btn-color: var(--c-text);
  --btn-border: var(--c-border);
  --btn-hover-bg: color-mix(in srgb, var(--c-border), var(--c-text) 12%);
  --btn-hover-color: var(--c-text);
  --btn-hover-border: color-mix(in srgb, var(--c-border), var(--c-text) 12%);
}

/* Legacy dark button remains unchanged. */
.btn-dark {
  --btn-bg: var(--c-dark);
  --btn-color: var(--c-white);
  --btn-border: var(--c-dark);
  --btn-hover-bg: var(--c-text);
  --btn-hover-color: var(--c-white);
  --btn-hover-border: var(--c-text);
}

.btn:active {
  transform: translateY(1px);
}

.btn-sm {
  min-height: 36px;
  padding: 9px 16px;
  font-size: var(--fs-14);
  border-radius: var(--r-sm);
}

.btn-lg {
  min-height: 56px;
  padding: 18px 30px;
  font-size: var(--fs-18);
}

.btn-outline {
  --btn-bg: transparent;
  --btn-color: var(--c-text);
  --btn-border: currentColor;
  --btn-hover-bg: var(--c-text);
  --btn-hover-color: var(--c-white);
  --btn-hover-border: var(--c-text);
}

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

.btn-wide {
  display: flex;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

.btn.is-shine::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: -110%;
  width: 70%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: btn-shine 8s infinite linear;
}

@keyframes btn-shine {
  0%, 82% { left: -110%; }
  96%, 100% { left: 130%; }
}

/* =========================================================
   09. Tables
   Simple modifier system:
   <table>                  default gray table
   <table class="gray">     explicit gray table
   <table class="red">      red table
   <table class="gold">     gold table
   <table class="red full"> all body cells use the soft color
   <table class="red first"> first body column uses the accent color

   Color and state are independent classes. The same .full / .first states
   work with .gray, .red and .gold.
   ========================================================= */
.table-wrap {
  width: min(100% - (var(--page-x) * 2), var(--container));
  margin-inline: auto;
  overflow-x: auto;
  padding-block: var(--s-2);
}

.table-wrap.full,
.content .table-wrap.full {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.content table,
.table {
  --table-accent-bg: var(--c-border);
  --table-accent-color: var(--c-text);
  --table-soft-bg: var(--c-surface-2);
  --table-row-odd-bg: var(--c-surface);
  --table-row-even-bg: var(--table-soft-bg);

  width: 100%;
  border-collapse: separate;
  border-spacing: var(--table-gap);
  border: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  font-size: var(--fs-16);
}

.content table :where(th, td),
.table :where(th, td) {
  padding: var(--s-4);
  text-align: left;
  vertical-align: top;
  border: 0;
  background-clip: border-box;
}

.content table th,
.table th {
  background: var(--table-accent-bg);
  color: var(--table-accent-color);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  letter-spacing: .05em;
  line-height: 1.35;
  text-transform: uppercase;
}

.content table > tbody > tr:nth-child(odd) > td,
.table > tbody > tr:nth-child(odd) > td {
  background: var(--table-row-odd-bg);
}

.content table > tbody > tr:nth-child(even) > td,
.table > tbody > tr:nth-child(even) > td {
  background: var(--table-row-even-bg);
}

/* Color modifiers. Gray is also the default when no color class is set. */
.content table.gray,
table.table.gray {
  --table-accent-bg: var(--c-border);
  --table-accent-color: var(--c-text);
  --table-soft-bg: var(--c-surface-2);
}

.content table.red,
table.table.red {
  --table-accent-bg: var(--c-primary);
  --table-accent-color: var(--c-white);
  --table-soft-bg: var(--c-primary-soft);
}

.content table.gold,
table.table.gold {
  --table-accent-bg: var(--c-gold);
  --table-accent-color: var(--c-text);
  --table-soft-bg: var(--c-gold-soft);
}

/* State modifiers work independently from the selected color. */
.content table.full,
table.table.full {
  --table-row-odd-bg: var(--table-soft-bg);
  --table-row-even-bg: var(--table-soft-bg);
}

.content table.first > tbody > tr > td:first-child,
table.table.first > tbody > tr > td:first-child {
  background: var(--table-accent-bg);
  color: var(--table-accent-color);
  font-weight: var(--fw-bold);
  text-transform: none;
  letter-spacing: normal;
}

/* Outer cell radius keeps colored cells visually clipped with border-spacing. */
.content table > :first-child > tr:first-child > :first-child,
.table > :first-child > tr:first-child > :first-child {
  border-top-left-radius: var(--r-md);
}

.content table > :first-child > tr:first-child > :last-child,
.table > :first-child > tr:first-child > :last-child {
  border-top-right-radius: var(--r-md);
}

.content table > :last-child > tr:last-child > :first-child,
.table > :last-child > tr:last-child > :first-child {
  border-bottom-left-radius: var(--r-md);
}

.content table > :last-child > tr:last-child > :last-child,
.table > :last-child > tr:last-child > :last-child {
  border-bottom-right-radius: var(--r-md);
}

/* Backward compatibility for table classes used before v4.30. */
:where(table.table-gray, table.table-default, .table.table-gray, .table.table-default) {
  --table-accent-bg: var(--c-border);
  --table-accent-color: var(--c-text);
  --table-soft-bg: var(--c-surface-2);
}

:where(table.table-red, table.table-primary, .table.table-red, .table.table-primary) {
  --table-accent-bg: var(--c-primary);
  --table-accent-color: var(--c-white);
  --table-soft-bg: var(--c-primary-soft);
}

:where(table.table-gold, .table.table-gold) {
  --table-accent-bg: var(--c-gold);
  --table-accent-color: var(--c-text);
  --table-soft-bg: var(--c-gold-soft);
}

:where(
  table.table-gray-full, table.table-default-full, table.table-fullgray, table.table-fulldefault,
  table.table-red-full, table.table-fullred,
  table.table-gold-full, table.table-fullgold,
  .table.table-gray-full, .table.table-default-full, .table.table-fullgray, .table.table-fulldefault,
  .table.table-red-full, .table.table-fullred,
  .table.table-gold-full, .table.table-fullgold
) {
  --table-row-odd-bg: var(--table-soft-bg);
  --table-row-even-bg: var(--table-soft-bg);
}

:where(table.table-gray-full, table.table-default-full, table.table-fullgray, table.table-fulldefault,
       table.table-gray-first, table.table-default-first,
       .table.table-gray-full, .table.table-default-full, .table.table-fullgray, .table.table-fulldefault,
       .table.table-gray-first, .table.table-default-first) {
  --table-accent-bg: var(--c-border);
  --table-accent-color: var(--c-text);
  --table-soft-bg: var(--c-surface-2);
}

:where(table.table-red-full, table.table-fullred, table.table-red-first,
       .table.table-red-full, .table.table-fullred, .table.table-red-first) {
  --table-accent-bg: var(--c-primary);
  --table-accent-color: var(--c-white);
  --table-soft-bg: var(--c-primary-soft);
}

:where(table.table-gold-full, table.table-fullgold, table.table-gold-first,
       .table.table-gold-full, .table.table-fullgold, .table.table-gold-first) {
  --table-accent-bg: var(--c-gold);
  --table-accent-color: var(--c-text);
  --table-soft-bg: var(--c-gold-soft);
}

:where(table.table-gray-first, table.table-default-first,
       table.table-red-first, table.table-gold-first,
       .table.table-gray-first, .table.table-default-first,
       .table.table-red-first, .table.table-gold-first) > tbody > tr > td:first-child {
  background: var(--table-accent-bg);
  color: var(--table-accent-color);
  font-weight: var(--fw-bold);
  text-transform: none;
  letter-spacing: normal;
}

/* =========================================================
   10. Content components
   ========================================================= */
.marker {
  --marker-accent: var(--c-border);
  --marker-bg: var(--c-surface);

  padding: var(--s-4) var(--s-5);
  border-left: 4px solid var(--marker-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--marker-bg);
  color: var(--c-text);
}

.marker.gray,
.marker-gray {
  --marker-accent: var(--c-border);
  --marker-bg: var(--c-surface-2);
}

.marker.red,
.marker-primary,
.marker-red {
  --marker-accent: var(--c-primary);
  --marker-bg: var(--c-primary-soft);
}

.marker.gold,
.marker-gold {
  --marker-accent: var(--c-gold);
  --marker-bg: var(--c-gold-soft);
}

.callout {
  --callout-accent: var(--c-border);
  --callout-bg: var(--c-surface);

  padding: var(--s-6);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--callout-accent);
  border-radius: var(--r-md);
  background: var(--callout-bg);
  color: var(--c-text);
  box-shadow: var(--sh-sm);
}

.callout.gray,
.callout-gray {
  --callout-accent: var(--c-border);
  --callout-bg: var(--c-surface-2);
}

.callout.red,
.callout-primary,
.callout-red {
  --callout-accent: var(--c-primary);
  --callout-bg: var(--c-primary-soft);
}

.callout.gold,
.callout-gold {
  --callout-accent: var(--c-gold);
  --callout-bg: var(--c-gold-soft);
}

.quote,
.content blockquote {
  position: relative;
  min-height: 110px;
  padding: var(--s-6) var(--s-7);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.quote::before,
.content blockquote::before {
  content: "“";
  position: absolute;
  top: -20px;
  left: var(--s-4);
  color: rgba(0, 0, 0, .06);
  font-family: var(--font-serif);
  font-size: 120px;
  line-height: 1;
}

.quote > *,
.content blockquote > * {
  position: relative;
  z-index: 1;
}

.content blockquote p,
.quote p {
  margin: 0;
  font-size: var(--fs-18);
  line-height: var(--lh-body);
}

.content blockquote cite,
.quote cite {
  display: block;
  margin-top: var(--s-3);
  color: var(--c-muted);
  font-size: var(--fs-14);
  font-style: normal;
}

/* =========================================================
   11. FAQ / accordion base
   JS can toggle .is-open on .faq-item.
   Structural styles only: typography and spacing should be set in markup
   with existing utilities like .t-h4, .p-5, .px-5, .pb-5, .gap-3.
   ========================================================= */
.faq-list {
  display: grid;
}

.faq-item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
}

.faq-question > span {
  min-width: 0;
}

.faq-question::after {
  content: "";
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--tr);
}

.faq-answer {
  display: none;
}

.faq-item.is-open .faq-question::after {
  transform: rotate(225deg);
}

.faq-item.is-open .faq-answer {
  display: block;
}

/* =========================================================
   12. Hero and common page blocks
   ========================================================= */
.hero {
  padding-block: clamp(64px, 10vw, 130px);
  background: var(--c-dark);
  color: var(--c-white);
}

.hero-title {
  margin: var(--s-5) 0 var(--s-4);
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -.055em;
}

.hero-subtitle {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-18);
}

.chess {
  display: grid;
  gap: 0;
}

.chess-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.chess-row:nth-child(even) .chess-media {
  order: 2;
}

.chess-media {
  min-height: 420px;
}

.chess-text {
  padding: var(--s-8);
}


/* =========================================================
   13. Display utilities
   ========================================================= */
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* =========================================================
   13. Visibility helpers
   ========================================================= */
.only-mobile {
  display: none !important;
}

.hidden {
  display: none !important;
}

/* =========================================================
   14. Responsive rules
   ========================================================= */
@media (max-width: 1180px) {
  :root {
    --grid-gap: var(--s-5);
  }

  .grid-5,
  .grid-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 768px) {
  :root {
    --page-x: 18px;
    --grid-gap: var(--s-4);
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-sidebar-left,
  .grid-sidebar-right,
  .split,
  .chess-row {
    grid-template-columns: 1fr;
  }

  .split {
    display: grid;
  }

  .chess-row:nth-child(even) .chess-media {
    order: 0;
  }

  .chess-media {
    min-height: 220px;
  }

  .chess-text {
    padding: var(--s-5) 0 var(--s-7);
  }

  .only-mobile {
    display: block !important;
  }

  .no-mobile {
    display: none !important;
  }

  .t-center-mobile {
    text-align: center;
  }

  .table-wrap {
    width: 100%;
    padding-inline: var(--page-x);
  }

  .quote,
  .content blockquote,
  .takeaways,
  .card-body {
    padding: var(--s-5);
  }
}

@media (max-width: 768px) {
  .flex-split.stack-mobile {
    flex-direction: column;
  }

  .flex-split.stack-mobile > * {
    flex-basis: auto !important;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .grid-mobile-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .btn,
  .btn-wide {
    width: 100%;
  }

  .steps > li {
    padding-left: calc(56px + var(--s-4));
  }

  .steps > li::before {
    width: 56px;
  }
}


/* =========================================================
   15. Extended color utilities
   ========================================================= */
.text-main { color: var(--c-text) !important; }
.text-soft { color: var(--c-text-soft) !important; }
.text-muted { color: var(--c-muted) !important; }
.text-primary { color: var(--c-primary) !important; }
.text-gold { color: var(--c-gold) !important; }
.text-white { color: var(--c-white) !important; }
.text-success { color: #176b31 !important; }
.text-warning { color: #7a5b00 !important; }
.text-danger { color: #b42318 !important; }

.bg-page { background-color: var(--c-bg) !important; }
.bg-surface { background-color: var(--c-surface) !important; }
.bg-surface-2 { background-color: var(--c-surface-2) !important; }
.bg-primary { background-color: var(--c-primary) !important; color: var(--c-white) !important; }
.bg-primary-soft { background-color: var(--c-primary-soft) !important; color: var(--c-text) !important; }
.bg-gold { background-color: var(--c-gold) !important; color: var(--c-text) !important; }
.bg-gold-soft { background-color: var(--c-gold-soft) !important; color: var(--c-text) !important; }
.bg-dark { background-color: var(--c-dark) !important; color: var(--c-white) !important; }
.bg-dark-2 { background-color: var(--c-dark-2) !important; color: var(--c-white) !important; }
.bg-success { background-color: var(--c-success) !important; color: var(--c-text) !important; }
.bg-warning { background-color: var(--c-warning) !important; color: var(--c-text) !important; }
.bg-danger { background-color: var(--c-danger) !important; color: var(--c-white) !important; }

.bg-cover { background-size: cover !important; }
.bg-contain { background-size: contain !important; }
.bg-auto { background-size: auto !important; }
.bg-center { background-position: center !important; }
.bg-top { background-position: top center !important; }
.bg-bottom { background-position: bottom center !important; }
.bg-left { background-position: center left !important; }
.bg-right { background-position: center right !important; }
.bg-no-repeat { background-repeat: no-repeat !important; }
.bg-repeat { background-repeat: repeat !important; }
.bg-repeat-x { background-repeat: repeat-x !important; }
.bg-repeat-y { background-repeat: repeat-y !important; }
.bg-fixed { background-attachment: fixed !important; }
.bg-scroll { background-attachment: scroll !important; }

.text-shadow-none { text-shadow: none !important; }
.text-shadow-sm { text-shadow: 0 1px 2px rgba(0, 0, 0, .35) !important; }
.text-shadow-md { text-shadow: 0 2px 8px rgba(0, 0, 0, .45) !important; }
.text-shadow-lg { text-shadow: 0 1px 3px rgba(0, 0, 0, 1) !important; }

.border { border: 1px solid var(--c-border) !important; }
.border-none { border: 0 !important; }
.border-primary { border-color: var(--c-primary) !important; }
.border-gold { border-color: var(--c-gold) !important; }
.border-dark { border-color: var(--c-dark) !important; }

/* =========================================================
   16. Extended spacing and gap utilities
   ========================================================= */
.pt-0 { padding-top: 0 !important; }
.pt-3 { padding-top: var(--s-3) !important; }
.pt-4 { padding-top: var(--s-4) !important; }
.pt-5 { padding-top: var(--s-5) !important; }
.pt-6 { padding-top: var(--s-6) !important; }
.pt-7 { padding-top: var(--s-7) !important; }
.pt-8 { padding-top: var(--s-8) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-3 { padding-bottom: var(--s-3) !important; }
.pb-4 { padding-bottom: var(--s-4) !important; }
.pb-5 { padding-bottom: var(--s-5) !important; }
.pb-6 { padding-bottom: var(--s-6) !important; }
.pb-7 { padding-bottom: var(--s-7) !important; }
.pb-8 { padding-bottom: var(--s-8) !important; }

.px-0 { padding-inline: 0 !important; }
.px-3 { padding-inline: var(--s-3) !important; }
.px-4 { padding-inline: var(--s-4) !important; }
.px-5 { padding-inline: var(--s-5) !important; }
.px-6 { padding-inline: var(--s-6) !important; }
.px-7 { padding-inline: var(--s-7) !important; }
.px-8 { padding-inline: var(--s-8) !important; }

.py-0 { padding-block: 0 !important; }
.py-3 { padding-block: var(--s-3) !important; }
.py-4 { padding-block: var(--s-4) !important; }
.py-5 { padding-block: var(--s-5) !important; }
.py-6 { padding-block: var(--s-6) !important; }
.py-7 { padding-block: var(--s-7) !important; }
.py-8 { padding-block: var(--s-8) !important; }

.gap-0 { gap: 0 !important; }
.gap-2 { gap: var(--s-2) !important; }
.gap-3 { gap: var(--s-3) !important; }
.gap-4 { gap: var(--s-4) !important; }
.gap-5 { gap: var(--s-5) !important; }
.gap-6 { gap: var(--s-6) !important; }
.gap-7 { gap: var(--s-7) !important; }
.gap-8 { gap: var(--s-8) !important; }
.gap-9 { gap: var(--s-9) !important; }
.gap-10 { gap: var(--s-10) !important; }

/* =========================================================
   17. Shadow and radius utilities
   ========================================================= */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--sh-sm) !important; }
.shadow-md { box-shadow: var(--sh-md) !important; }
.shadow-lg { box-shadow: var(--sh-lg) !important; }
.shadow-xl { box-shadow: 0 20px 55px rgba(0, 0, 0, .22) !important; }
.shadow-primary { box-shadow: 0 12px 30px rgba(255, 99, 71, .28) !important; }
.shadow-gold { box-shadow: 0 12px 30px rgba(238, 201, 48, .34) !important; }

.round-0 { border-radius: var(--r-0) !important; }
.round-xs { border-radius: var(--r-xs) !important; }
.round-sm { border-radius: var(--r-sm) !important; }
.round-md { border-radius: var(--r-md) !important; }
.round-lg { border-radius: var(--r-lg) !important; }
.round-xl { border-radius: var(--r-xl) !important; }
.round-pill { border-radius: 999px !important; }

/* Circle utility: for numbers, icons and small labels inside a true circle.
   Standard color modifiers: .red / .gold / .gray. Default background is white. */
.circle {
  --circle-size: 40px;
  --circle-bg: var(--c-surface);
  --circle-color: var(--c-text);
  --circle-border: var(--c-border);

  display: inline-grid;
  place-items: center;
  inline-size: var(--circle-size);
  block-size: var(--circle-size);
  min-inline-size: var(--circle-size);
  border: 1px solid var(--circle-border);
  border-radius: 50%;
  background-color: var(--circle-bg);
  color: var(--circle-color);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-align: center;
  flex: 0 0 auto;
}

.circle.red,
.circle-primary,
.circle-red {
  --circle-bg: var(--c-primary);
  --circle-color: var(--c-white);
  --circle-border: var(--c-primary);
}

.circle.gold,
.circle-gold {
  --circle-bg: var(--c-gold);
  --circle-color: var(--c-text);
  --circle-border: var(--c-gold);
}

.circle.gray,
.circle-gray {
  --circle-bg: var(--c-border);
  --circle-color: var(--c-text);
  --circle-border: var(--c-border);
}

.circle-sm {
  --circle-size: 28px;
  font-size: var(--fs-12);
}

.circle-lg {
  --circle-size: 56px;
  font-size: var(--fs-22);
}


/* =========================================================
   18. Forms
   ========================================================= */
.form {
  display: grid;
  gap: var(--s-5);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

.form-row {
  display: grid;
  gap: var(--s-2);
}

.form-label {
  color: var(--c-text);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}

.form-help {
  color: var(--c-muted);
  font-size: var(--fs-12);
  line-height: 1.45;
}

.input,
.select,
.textarea,
.content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.content select,
.content textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-16);
  line-height: 1.35;
  transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
}

.textarea,
.content textarea {
  min-height: 130px;
  resize: vertical;
}

.input:hover,
.select:hover,
.textarea:hover,
.content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):hover,
.content select:hover,
.content textarea:hover {
  border-color: color-mix(in srgb, var(--c-border), var(--c-text) 25%);
}

.input:focus,
.select:focus,
.textarea:focus,
.content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.content select:focus,
.content textarea:focus {
  outline: 0;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(255, 99, 71, .16);
}

.input.is-error,
.select.is-error,
.textarea.is-error {
  border-color: var(--c-danger);
}

.input.is-success,
.select.is-success,
.textarea.is-success {
  border-color: #2f9e44;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  color: var(--c-text-soft);
  font-size: var(--fs-14);
  line-height: 1.45;
}

.choice input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--c-primary);
  flex: 0 0 auto;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* =========================================================
   19. Badges, dividers and simple helpers
   ========================================================= */
.badge {
  --badge-bg: var(--c-surface);
  --badge-color: var(--c-text-soft);
  --badge-border: var(--c-border);

  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--badge-border);
  border-radius: var(--r-sm);
  background: var(--badge-bg);
  color: var(--badge-color);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

.badge.red,
.badge-primary,
.badge-red {
  --badge-bg: var(--c-primary);
  --badge-color: var(--c-white);
  --badge-border: var(--c-primary);
}

.badge.gold,
.badge-gold {
  --badge-bg: var(--c-gold);
  --badge-color: var(--c-text);
  --badge-border: var(--c-gold);
}

.badge.gray,
.badge-gray,
.badge-soft {
  --badge-bg: var(--c-surface-2);
  --badge-color: var(--c-text-soft);
  --badge-border: var(--c-border);
}

/* Legacy dark badge remains available. */
.badge-dark {
  --badge-bg: var(--c-dark);
  --badge-color: var(--c-white);
  --badge-border: var(--c-dark);
}

/* Badge links keep badge styling and never receive the global link underline. */
a.badge,
.content a.badge,
a.badge:hover,
a.badge:focus-visible,
.content a.badge:hover,
.content a.badge:focus-visible {
  color: var(--badge-color);
  text-decoration: none !important;
}

.divider {
  height: 1px;
  background: var(--c-border);
  margin-block: var(--s-7);
}

.lede {
  max-width: 780px;
  color: var(--c-text-soft);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
}

.kicker {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--c-primary);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: .11em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* =========================================================
   20. Demo-only helpers
   You can remove this section from production if needed.
   ========================================================= */
.demo-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--c-border);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
}

.demo-nav .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-3);
}

.demo-nav a {
  color: var(--c-text-soft);
  font-size: var(--fs-14);
  text-decoration: none;
}

.demo-nav a:hover {
  color: var(--c-primary);
}

.demo-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.demo-swatch {
  min-height: 112px;
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.demo-swatch code,
.demo-box code,
.demo-class {
  display: inline-flex;
  width: fit-content;
  padding: 3px 7px;
  border-radius: var(--r-xs);
  background: rgba(0, 0, 0, .07);
  color: inherit;
  font-size: 12px;
  line-height: 1.3;
}

.bg-dark .demo-class,
.bg-dark-2 .demo-class,
.bg-primary .demo-class,
.bg-danger .demo-class,
.demo-swatch.bg-dark code,
.demo-swatch.bg-dark-2 code,
.demo-swatch.bg-primary code,
.demo-swatch.bg-danger code {
  background: rgba(255, 255, 255, .16);
}

.demo-box {
  min-height: 120px;
  padding: var(--s-5);
  border: 1px dashed color-mix(in srgb, var(--c-border), var(--c-text) 18%);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

.demo-mini-box {
  min-height: 70px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  font-weight: var(--fw-semibold);
}

.demo-scale {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}

.demo-scale-bar {
  width: var(--demo-size);
  height: var(--demo-size);
  min-width: var(--demo-size);
  border-radius: var(--r-xs);
  background: var(--c-primary);
}

.card-hover,
.demo-card-hover {
  transition: transform var(--tr), box-shadow var(--tr);
}
.card-hover:hover,
.demo-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .demo-nav .container {
    justify-content: center;
  }
}


/* =========================================================
   21. Demo add-on
   Demo-only helper layer. Existing classes are not rewritten.
   ========================================================= */
.demo-side-nav {
  position: fixed;
  left: var(--s-4);
  top: 92px;
  z-index: 30;
  width: 220px;
  max-height: calc(100vh - 116px);
  overflow: auto;
  padding: var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--sh-md);
  backdrop-filter: blur(10px);
}
.demo-side-nav strong {
  display: block;
  padding: var(--s-2) var(--s-3) var(--s-3);
  color: var(--c-text);
  font-size: var(--fs-14);
  line-height: 1.2;
}
.demo-side-nav a {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--c-text-soft);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--tr-fast), color var(--tr-fast), transform var(--tr-fast);
}
.demo-side-nav a:hover,
.demo-side-nav a.is-active {
  background: var(--c-gold-soft);
  color: var(--c-text);
  transform: translateX(2px);
}
.demo-side-nav span {
  color: var(--c-muted);
  font-size: 11px;
  font-weight: var(--fw-semibold);
}
@media (max-width: 1480px) {
  .demo-side-nav {
    left: var(--s-2);
    width: 188px;
  }
  .demo-side-nav a {
    font-size: 13px;
  }
}
@media (max-width: 1180px) {
  .demo-side-nav {
    position: sticky;
    top: 0;
    width: min(100% - (var(--page-x) * 2), var(--container));
    margin: 0 auto;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    display: flex;
    gap: var(--s-2);
  }
  .demo-side-nav strong { display: none; }
  .demo-side-nav a { white-space: nowrap; }
}

/* Legacy-inspired special blocks, rebuilt on the design tokens */
.legacy-special-stack {
  display: grid;
  gap: var(--s-9);
}
.legacy-block-title {
  margin: 0 0 var(--s-5);
  color: var(--c-text);
}
.legacy-note {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-gold);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-soft);
}

.legacy-takeaways {
  padding: clamp(var(--s-6), 4vw, var(--s-10));
  border: 3px solid var(--c-gold);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.legacy-takeaways-red { border-color: var(--c-primary); }
.legacy-takeaways ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(var(--s-6), 3vw, var(--s-8));
}
.legacy-takeaways li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}
.legacy-takeaways-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-gold-soft);
  color: var(--c-text);
  font-size: 34px;
  line-height: 1;
}
.legacy-takeaways-red .legacy-takeaways-icon { background: var(--c-primary-soft); }
.legacy-takeaways h4 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-22);
  line-height: var(--lh-title);
  font-weight: var(--fw-bold);
}
.legacy-takeaways p {
  margin: 0;
  color: var(--c-text-soft);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
}








.legacy-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-4);
  counter-reset: legacy-steps;
}
.legacy-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  min-height: 112px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  counter-increment: legacy-steps;
}
.legacy-steps li::before {
  content: counter(legacy-steps);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: start center;
  padding-top: var(--s-4);
  background: var(--legacy-steps-color, var(--c-gold));
  color: var(--c-white);
  font-size: var(--fs-36);
  line-height: 1;
  font-weight: var(--fw-bold);
}
.legacy-steps li::after {
  content: "";
  position: absolute;
  left: 92px;
  top: var(--s-5);
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 14px solid var(--legacy-steps-color, var(--c-gold));
}
.legacy-steps-red { --legacy-steps-color: var(--c-primary); }
.legacy-steps-body {
  padding: var(--s-4) var(--s-6) var(--s-5);
}
.legacy-steps h4 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-18);
  line-height: var(--lh-title);
  font-weight: var(--fw-bold);
}
.legacy-steps p {
  margin: 0;
  color: var(--c-text-soft);
}

.legacy-timeline {
  position: relative;
  margin: 0;
  padding: var(--s-4) 0 var(--s-1) var(--s-7);
  border-left: 3px solid var(--legacy-timeline-color, var(--c-border));
  list-style: none;
  counter-reset: legacy-timeline;
}
.legacy-timeline li {
  position: relative;
  margin: 0 0 var(--s-5) var(--s-7);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
  counter-increment: legacy-timeline;
}
.legacy-timeline li::before {
  content: counter(legacy-timeline);
  position: absolute;
  left: -62px;
  top: var(--s-3);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--legacy-timeline-color, var(--c-gold));
  color: var(--c-white);
  font-weight: var(--fw-bold);
  box-shadow: 0 0 0 5px var(--c-bg), 0 0 8px rgba(0,0,0,.14);
}
.legacy-timeline li::after {
  content: "";
  position: absolute;
  left: -10px;
  top: var(--s-5);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid var(--c-surface);
}
.legacy-timeline-red { --legacy-timeline-color: var(--c-primary); }
.legacy-timeline h4 {
  margin: 0 0 var(--s-1);
  font-size: var(--fs-18);
  line-height: var(--lh-title);
}
.legacy-timeline p {
  margin: 0;
  color: var(--c-text-soft);
}

.legacy-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s-5), 4vw, var(--s-10));
}
.legacy-service-card {
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
}
.legacy-service-media {
  min-height: 260px;
  padding: var(--s-5);
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s-4);
  border-bottom: 6px solid var(--c-primary);
  background: #95979d;
}
.legacy-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 14px 6px;
  border-radius: 999px;
  color: var(--c-text);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}
.legacy-pill-yellow { background: #fbf402; }
.legacy-pill-lime { background: #a7ff2b; }
.legacy-pill-cyan { background: #21e9ef; }
.legacy-service-body {
  padding: var(--s-7) var(--s-5);
  text-align: center;
}
.legacy-service-title {
  margin: 0;
  color: #000;
  font-size: var(--fs-28);
  line-height: 1;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}


@media (max-width: 768px) {
  .legacy-takeaways {
    padding: var(--s-5);
  }
  .legacy-takeaways li,
  .legacy-steps li {
    grid-template-columns: 1fr;
  }
  .legacy-takeaways-icon {
    width: 56px;
    height: 56px;
    font-size: 26px;
  }
  .legacy-steps li::before {
    min-height: 72px;
    place-items: center;
    padding-top: 0;
  }
  .legacy-steps li::after { display: none; }
  
  .legacy-service-grid {
    grid-template-columns: 1fr;
  }
  .legacy-service-media {
    min-height: 220px;
  }
}


/* =========================================================
   22. Demo layout: navigation moved into real sidebar
   This section intentionally overrides only demo navigation placement.
   Existing design classes stay untouched.
   ========================================================= */
:root {
  --demo-sidebar-w: 236px;
  --demo-sidebar-gap: var(--s-6);
}

.demo-layout {
  width: min(
    calc(100% - (var(--page-x) * 2)),
    calc(var(--container) + var(--demo-sidebar-w) + var(--demo-sidebar-gap))
  );
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--demo-sidebar-w) minmax(0, 1fr);
  gap: var(--demo-sidebar-gap);
  align-items: start;
  padding-block: var(--s-5) var(--s-10);
}

.demo-main {
  min-width: 0;
}

.demo-layout .demo-side-nav {
  position: sticky;
  top: var(--s-4);
  left: auto;
  z-index: 10;
  width: auto;
  max-height: calc(100vh - var(--s-8));
  margin: 0;
  display: block;
  border-radius: var(--r-lg);
}

.demo-layout .demo-side-nav strong {
  display: block;
}

.demo-layout .demo-side-nav a {
  white-space: normal;
}

@media (max-width: 1180px) {
  .demo-layout {
    width: 100%;
    display: block;
    padding-block: 0 var(--s-8);
  }

  .demo-layout .demo-side-nav {
    position: sticky;
    top: 0;
    width: 100%;
    max-height: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .demo-layout .demo-side-nav strong {
    display: none;
  }

  .demo-layout .demo-side-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}


/* =========================================================
   23. Special blocks scale fix
   Important: this section intentionally changes ONLY legacy-special blocks.
   Goal: keep the current visual system and bring old special blocks
   to the same typography, spacing, radius and shadow rhythm.
   ========================================================= */
.legacy-special-stack {
  gap: var(--s-8);
}

.legacy-block-title {
  margin: 0 0 var(--s-4);
  color: var(--c-text);
  font-size: var(--fs-22);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
  letter-spacing: -.02em;
}

.legacy-note {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-gold);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-soft);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}

.legacy-takeaways {
  padding: var(--s-7);
  border: 2px solid var(--c-gold);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}

.legacy-takeaways ul {
  gap: var(--s-5);
}

.legacy-takeaways li {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}

.legacy-takeaways-icon {
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--c-gold-soft);
  font-size: 20px;
}

.legacy-takeaways h4 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-18);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}

.legacy-takeaways p {
  margin: 0;
  color: var(--c-text-soft);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}









.legacy-steps {
  gap: var(--s-4);
}

.legacy-steps li {
  grid-template-columns: 72px minmax(0, 1fr);
  min-height: 88px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
}

.legacy-steps li::before {
  padding-top: var(--s-4);
  font-size: var(--fs-28);
  line-height: 1;
  font-weight: var(--fw-bold);
}

.legacy-steps li::after {
  left: 72px;
  top: var(--s-5);
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;
}

.legacy-steps-body {
  padding: var(--s-4) var(--s-5);
}

.legacy-steps h4 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-18);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}

.legacy-steps p {
  margin: 0;
  color: var(--c-text-soft);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}

.legacy-timeline {
  padding: var(--s-3) 0 0 var(--s-6);
  border-left-width: 2px;
}

.legacy-timeline li {
  margin: 0 0 var(--s-4) var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
}

.legacy-timeline li::before {
  left: -52px;
  top: var(--s-4);
  width: 32px;
  height: 32px;
  font-size: var(--fs-14);
  line-height: 1;
  box-shadow: 0 0 0 4px var(--c-bg);
}

.legacy-timeline li::after {
  top: var(--s-5);
  border-top-width: 8px;
  border-bottom-width: 8px;
  border-right-width: 8px;
}

.legacy-timeline h4 {
  margin: 0 0 var(--s-1);
  font-size: var(--fs-18);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}

.legacy-timeline p {
  margin: 0;
  color: var(--c-text-soft);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}

.legacy-service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}

.legacy-service-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
}

.legacy-service-media {
  min-height: 180px;
  padding: var(--s-5);
  gap: var(--s-3);
  border-bottom-width: 4px;
}

.legacy-pill {
  min-height: 28px;
  padding: 6px 12px 5px;
  font-size: var(--fs-12);
  letter-spacing: .06em;
}

.legacy-service-body {
  padding: var(--s-5);
}

.legacy-service-title {
  font-size: var(--fs-22);
  line-height: var(--lh-title);
  font-weight: var(--fw-bold);
}

@media (max-width: 768px) {
  .legacy-special-stack {
    gap: var(--s-6);
  }

  .legacy-takeaways {
    padding: var(--s-5);
  }

  .legacy-takeaways li {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--s-3);
  }

  .legacy-takeaways-icon {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  

  



  .legacy-steps li {
    grid-template-columns: 56px minmax(0, 1fr);
    min-height: 0;
  }

  .legacy-steps li::before {
    min-height: auto;
    padding-top: var(--s-4);
    font-size: var(--fs-22);
  }

  .legacy-steps li::after {
    display: block;
    left: 56px;
    top: var(--s-5);
  }

  .legacy-service-grid {
    grid-template-columns: 1fr;
  }

  .legacy-service-media {
    min-height: 150px;
  }
}


/* =========================================================
   24. Timeline
   Correct base timeline: ol.timeline + optional .red / .gold modifiers.
   This override keeps the current visual system and fixes only timeline behavior.
   ========================================================= */
ol.timeline,
.timeline {
  --timeline-accent: var(--c-border);
  --timeline-item-bg: var(--c-surface);
  --timeline-circle-bg: var(--timeline-accent);
  --timeline-circle-color: var(--c-text);
  --timeline-shadow-ring: var(--c-bg);

  position: relative;
  margin: 0;
  padding: var(--s-3) 0 0 var(--s-6);
  border-left: 3px solid var(--timeline-accent);
  counter-reset: timeline;
  list-style: none;
}

ol.timeline.gray,
.timeline.gray {
  --timeline-item-bg: var(--c-surface-2);
}

ol.timeline.red,
.timeline.red {
  --timeline-accent: var(--c-primary);
  --timeline-circle-bg: var(--c-primary);
  --timeline-circle-color: var(--c-white);
}

ol.timeline.gold,
.timeline.gold {
  --timeline-accent: var(--c-gold);
  --timeline-circle-bg: var(--c-gold);
  --timeline-circle-color: var(--c-text);
}

/* Backward aliases, only in case a page already used this naming. */
ol.timeline.timeline-red,
.timeline.timeline-red {
  --timeline-accent: var(--c-primary);
  --timeline-circle-bg: var(--c-primary);
  --timeline-circle-color: var(--c-white);
}

ol.timeline.timeline-gold,
.timeline.timeline-gold {
  --timeline-accent: var(--c-gold);
  --timeline-circle-bg: var(--c-gold);
  --timeline-circle-color: var(--c-text);
}

ol.timeline > li,
.timeline > li {
  position: relative;
  display: block;
  margin: 0 0 var(--s-4) var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--timeline-item-bg);
  box-shadow: var(--sh-sm);
  counter-increment: timeline;
}

ol.timeline > li:last-child,
.timeline > li:last-child {
  margin-bottom: 0;
}

ol.timeline > li::before,
.timeline > li::before {
  content: counter(timeline);
  position: absolute;
  top: var(--s-3);
  left: -50px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--timeline-circle-bg);
  color: var(--timeline-circle-color);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-align: center;
  box-shadow: 0 0 0 5px var(--timeline-shadow-ring), 0 0 6px rgba(0, 0, 0, .12);
}

ol.timeline > li::after,
.timeline > li::after {
  content: "";
  position: absolute;
  top: calc(var(--s-3) + 7px);
  left: -9px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 9px solid var(--timeline-item-bg);
}

ol.timeline :where(strong, h3, h4),
.timeline :where(strong, h3, h4) {
  color: inherit;
  font-weight: var(--fw-semibold);
}

ol.timeline :where(p),
.timeline :where(p) {
  margin: var(--s-1) 0 0;
  color: var(--c-text-soft);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}

ol.timeline code,
.timeline code {
  font-size: .86em;
}

@media (max-width: 768px) {
  ol.timeline,
  .timeline {
    padding-left: var(--s-5);
  }

  ol.timeline > li,
  .timeline > li {
    margin-left: var(--s-4);
    padding: var(--s-4);
  }

  ol.timeline > li::before,
  .timeline > li::before {
    left: -42px;
    width: 30px;
    height: 30px;
  }
}

/* =========================================================
   25. Timeline
   Base component: ol.timeline.
   Item modifiers: li.gold / li.red change item background and triangle only.
   List modifiers: .gray changes default item backgrounds; .gold changes line, circles and default item backgrounds; .red changes line and circles.
   ========================================================= */

ol.timeline,
.timeline {
  --timeline-accent: var(--c-border);
  --timeline-item-bg: var(--c-surface);
  --timeline-circle-bg: var(--timeline-accent);
  --timeline-circle-color: var(--c-text);
  --timeline-shadow-ring: var(--c-bg);

  border-left-color: var(--timeline-accent);
}

ol.timeline.gray,
.timeline.gray {
  --timeline-item-bg: var(--c-surface-2);
}

ol.timeline.red,
.timeline.red {
  --timeline-accent: var(--c-primary);
  --timeline-circle-bg: var(--c-primary);
  --timeline-circle-color: var(--c-white);
}

ol.timeline.gold,
.timeline.gold {
  --timeline-accent: var(--c-gold);
  --timeline-circle-bg: var(--c-gold);
  --timeline-circle-color: var(--c-text);
}

ol.timeline > li,
.timeline > li {
  --timeline-li-bg: var(--timeline-item-bg);

  border: 0;
  background: var(--timeline-li-bg);
}

ol.timeline.gold > li,
.timeline.gold > li {
  --timeline-li-bg: var(--c-gold-soft);
}

ol.timeline > li.gold,
.timeline > li.gold {
  --timeline-li-bg: var(--c-gold-soft);
}

ol.timeline > li.red,
.timeline > li.red {
  --timeline-li-bg: var(--c-primary-soft);
}

ol.timeline > li::after,
.timeline > li::after {
  border-right-color: var(--timeline-li-bg);
}

ol.timeline > li > .t-h4,
.timeline > li > .t-h4 {
  display: block;
  margin: 0 0 var(--s-2);
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

ol.timeline > li > p,
.timeline > li > p {
  margin: 0;
}

/* =========================================================
   26. Timeline
   Replace left border with centered vertical line under circles.
   The line belongs to ol.timeline::before and runs through circle centers.
   ========================================================= */

ol.timeline,
.timeline {
  --timeline-line-x: 11px;
  border-left: 0;
}

ol.timeline::before,
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--timeline-line-x);
  width: 3px;
  border-radius: 999px;
  background: var(--timeline-accent);
  z-index: 0;
}

ol.timeline > li,
.timeline > li {
  z-index: 1;
}

ol.timeline > li::before,
.timeline > li::before {
  z-index: 2;
}

@media (max-width: 768px) {
  ol.timeline,
  .timeline {
    --timeline-line-x: 9px;
  }
}







@media (max-width: 767px) {
  

  

}







@media (max-width: 767px) {
  
}





















@media (max-width: 767px) {
  

  
}





@media (max-width: 767px) {
  
}


/* ========================================================= Steps block
   - steps block uses ol.steps
   - default item background is white; .gray changes item backgrounds to gray
   - default accent is gray/border, red/gold modifiers change accent
   - no border on li
   - title uses .title.t-h4 in markup, not h4
   - paragraph uses the default text scale
   ========================================================= */
ol.steps,
.steps {
  --steps-accent: var(--c-border);
  --steps-panel-bg: var(--steps-accent);
  --steps-panel-color: var(--c-white);
  --steps-item-bg: var(--c-surface);

  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: steps;
}

ol.steps.gray,
.steps.gray {
  --steps-item-bg: var(--c-surface-2);
}

ol.steps.red,
.steps.red,
ol.steps.steps-red,
.steps.steps-red {
  --steps-accent: var(--c-primary);
  --steps-panel-bg: var(--c-primary);
  --steps-panel-color: var(--c-white);
}

ol.steps.gold,
.steps.gold,
ol.steps.steps-gold,
.steps.steps-gold {
  --steps-accent: var(--c-gold);
  --steps-panel-bg: var(--c-gold);
  --steps-panel-color: var(--c-white);
}

ol.steps > li,
.steps > li {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  min-height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--steps-item-bg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  counter-increment: steps;
}

ol.steps > li.gold,
.steps > li.gold {
  --steps-item-bg: var(--c-gold-soft);
}

ol.steps > li.red,
.steps > li.red {
  --steps-item-bg: var(--c-primary-soft);
}

ol.steps > li::before,
.steps > li::before {
  content: counter(steps);
  position: relative;
  inset: auto;
  width: 72px;
  height: auto;
  display: grid;
  place-items: start center;
  padding-top: var(--s-4);
  border-radius: 0;
  background: var(--steps-panel-bg);
  color: var(--c-white);
  font-size: var(--fs-28);
  line-height: 1;
  font-weight: var(--fw-bold);
  text-align: center;
}

ol.steps > li::after,
.steps > li::after {
  content: "";
  position: absolute;
  left: 72px;
  top: var(--s-4);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid var(--steps-panel-bg);
}

.steps-body {
  padding: var(--s-4) var(--s-5);
}

ol.steps .title,
.steps .title {
  display: block;
  margin: 0 0 var(--s-2);
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

ol.steps p,
.steps p {
  margin: 0;
  color: var(--c-text-soft);
}

/* Backward compatibility while migrating old demo/content snippets. */
.legacy-steps {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.legacy-steps-body {
  padding: var(--s-4) var(--s-5);
}

@media (max-width: 767px) {
  ol.steps > li,
  .steps > li {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  ol.steps > li::before,
  .steps > li::before {
    width: 56px;
    font-size: var(--fs-22);
    padding-top: var(--s-4);
  }

  ol.steps > li::after,
  .steps > li::after {
    left: 56px;
    top: var(--s-4);
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left-width: 8px;
  }

  .steps-body {
    padding: var(--s-4);
  }
}



/* ========================================================= Takeaways block
   - block uses .takeaways
   - .red / .gold change the border and icon accent
   - block background remains white
   - list items have no separate background, border or shadow
   - title uses .title.t-h4 in markup
   - decorative icon is generated by li::before
   ========================================================= */
.takeaways {
  --takeaways-accent: var(--c-border);
  --takeaways-icon-bg: var(--takeaways-accent);

  padding: var(--s-5);
  border: 3px solid var(--takeaways-accent);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: none;
}

.takeaways.red {
  --takeaways-accent: var(--c-primary);
}

.takeaways.gold {
  --takeaways-accent: var(--c-gold);
}

.takeaways ul {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.takeaways li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.takeaways li::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border-radius: 50%;
  background-color: var(--takeaways-icon-bg);
  background-image: url(https://www.svgrepo.com/show/438629/idea.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

/* Compatibility with markup created before v4.29. */
.takeaways-icon {
  display: none !important;
}

.takeaways .title {
  display: block;
  margin: 0 0 var(--s-2);
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

.takeaways p {
  margin: 0;
  color: var(--c-text-soft);
}

@media (max-width: 767px) {
  .takeaways {
    padding: var(--s-4);
  }

  .takeaways li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: var(--s-3);
  }

  .takeaways li::before {
    width: 34px;
    height: 34px;
    background-size: 19px 19px;
  }
}


/* ========================================================= Form field alignment fix
   ========================================================= */
.form-grid {
  align-items: start;
}

.form-row {
  align-content: start;
  align-items: stretch;
}

.input,
.select,
.content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.content select {
  display: block;
  height: 48px;
  min-height: 48px;
}

.select,
.content select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-muted) 50%),
    linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}


/* ========================================================= Overlay emphasis panel
   Purpose: block on top of image/background with semi-transparent dark frame.
   Outer wrapper uses padding to create the visual frame. Inner surface has no
   own padding so internal rows/dividers can run edge to edge.
   ========================================================= */
.overlay-demo-bg {
  position: relative;
  padding: clamp(var(--s-6), 4vw, var(--s-8));
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    linear-gradient(rgba(24, 24, 26, .2), rgba(24, 24, 26, .35)),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.28), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(135deg, #83644f 0%, #b98557 18%, #705640 34%, #9e7e64 52%, #4e4032 72%, #2f2a27 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.overlay-emphasis {
  --overlay-pad: clamp(var(--s-4), 2vw, var(--s-5));
  --overlay-bg: rgba(0, 0, 0, .42);
  --overlay-surface: #fff;
  --overlay-divider: var(--c-border);
  --overlay-accent: var(--c-primary);
  --overlay-soft: var(--c-surface-2);
  --overlay-phone-bg: #efefef;
  --overlay-radius: var(--r-lg);
  position: relative;
  max-width: 780px;
  padding: var(--overlay-pad);
  border-radius: calc(var(--overlay-radius) + var(--s-2));
  background: var(--overlay-bg);
  box-shadow: var(--sh-lg);
}

.overlay-emphasis-stack {
  display: grid;
  gap: var(--overlay-pad);
}

.overlay-emphasis-surface {
  background: var(--overlay-surface);
  border-radius: var(--overlay-radius);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.overlay-emphasis-head,
.overlay-emphasis-meta,
.overlay-emphasis-row,
.overlay-emphasis-status {
  padding: var(--s-4) var(--s-5);
}

.overlay-emphasis-head {
  display: grid;
  gap: var(--s-2);
}

.overlay-emphasis-brand {
  margin: 0;
  font-size: clamp(2rem, 2.8vw, 2.75rem);
  line-height: 1.05;
  font-weight: var(--fw-bold);
}

.overlay-emphasis-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.overlay-stars {
  display: inline-flex;
  gap: 6px;
  color: var(--c-primary);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 1px;
}

.overlay-rating-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 var(--s-3);
  border-radius: 999px;
  background: #ececec;
  color: var(--c-text-soft);
  font-size: var(--fs-2);
  line-height: 1;
  font-weight: var(--fw-semibold);
}

.overlay-emphasis-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border-top: 1px solid var(--overlay-divider);
}

.overlay-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex: 0 0 auto;
}

.overlay-emphasis-meta .title {
  margin: 0;
  color: var(--c-text);
}

.overlay-emphasis-row {
  display: grid;
  grid-template-columns: 56px minmax(0,1fr) auto;
  align-items: center;
  gap: var(--s-4);
  background: var(--overlay-phone-bg);
  border-top: 1px solid var(--overlay-divider);
}

.overlay-phone-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cfcfcf;
  font-size: 1.5rem;
  line-height: 1;
}

.overlay-phone-value {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.12;
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  color: #38393d;
}

.overlay-phone-tag {
  margin: 0;
  color: var(--overlay-accent);
  font-size: clamp(1.625rem, 2.5vw, 2.5rem);
  line-height: 1;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.overlay-emphasis-status {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4);
  border-top: 1px solid var(--overlay-divider);
}

.overlay-status-open,
.overlay-status-closed {
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  line-height: 1;
  font-weight: var(--fw-bold);
}

.overlay-status-closed { color: #ed3d2f; }
.overlay-status-open { color: #2f9b57; }

.overlay-status-time {
  color: #6d6e73;
  font-size: clamp(1.25rem, 1.8vw, 1.875rem);
  line-height: 1.2;
  font-weight: 500;
}

.overlay-status-toggle {
  width: 20px;
  height: 20px;
  position: relative;
  display: inline-block;
}

.overlay-status-toggle::before,
.overlay-status-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 11px;
  height: 3px;
  border-radius: 999px;
  background: #111;
}

.overlay-status-toggle::before {
  left: 1px;
  transform: translateY(-50%) rotate(45deg);
}

.overlay-status-toggle::after {
  right: 1px;
  transform: translateY(-50%) rotate(-45deg);
}

.overlay-emphasis .btn {
  width: 100%;
}

.overlay-note {
  margin-top: var(--s-4);
  color: var(--c-text-soft);
}

@media (max-width: 767px) {
  .overlay-demo-bg {
    padding: var(--s-4);
  }

  .overlay-emphasis {
    --overlay-pad: var(--s-3);
  }

  .overlay-emphasis-head,
  .overlay-emphasis-meta,
  .overlay-emphasis-row,
  .overlay-emphasis-status {
    padding: var(--s-3) var(--s-4);
  }

  .overlay-emphasis-row {
    grid-template-columns: 40px minmax(0,1fr) auto;
    gap: var(--s-3);
  }

  .overlay-phone-value {
    font-size: clamp(1.25rem, 6vw, 1.875rem);
  }

  .overlay-phone-tag {
    font-size: clamp(1.125rem, 5vw, 1.75rem);
  }

  .overlay-emphasis-status {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .overlay-status-time {
    grid-column: 1 / -1;
    font-size: 1.125rem;
  }
}


/* ========================================================= Overlay block tag and typography fix
   Applies targeted overlay markup styles and preserves strong/bold typography helpers.
   ========================================================= */
.overlay-demo-bg {
  padding: var(--s-5);
}

.overlay-emphasis {
  --overlay-pad: var(--s-2);
  max-width: 460px;
  border-radius: calc(var(--r-md) + var(--s-1));
}

.overlay-emphasis-stack {
  gap: var(--overlay-pad);
}

.overlay-emphasis-surface {
  border-radius: var(--r-md);
}

.overlay-emphasis-head,
.overlay-emphasis-meta,
.overlay-emphasis-row,
.overlay-emphasis-status {
  padding: var(--s-3) var(--s-4);
}

.overlay-emphasis-brand {
  font-size: clamp(1.35rem, 1.7vw, 1.75rem);
  line-height: 1.08;
}

.overlay-emphasis-rating {
  gap: var(--s-2);
}

.overlay-stars {
  gap: 3px;
  font-size: 1.25rem;
  letter-spacing: 0;
}

.overlay-rating-chip {
  min-height: 26px;
  padding: 0 var(--s-2);
  font-size: var(--fs-0);
}

.overlay-emphasis-meta {
  gap: var(--s-2);
}

.overlay-check {
  width: 20px;
  height: 20px;
  font-size: 11px;
}

.overlay-emphasis-meta .title {
  font-size: var(--fs-2);
  line-height: var(--lh-tight);
}

.overlay-emphasis-row {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: var(--s-3);
}

.overlay-phone-icon {
  width: 24px;
  height: 24px;
  font-size: 2rem;
}

.overlay-phone-value {
  font-size: clamp(1.125rem, 1.55vw, 1.375rem);
  line-height: 1.12;
}

.overlay-emphasis-row > a.t-h3 {
  color: #38393d;
  text-decoration: none;
  letter-spacing: .02em;
}

.overlay-emphasis-row > a.t-h3:hover {
  color: var(--overlay-accent);
}

.overlay-phone-tag {
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
}

.overlay-emphasis-status {
  gap: var(--s-3);
}

.overlay-status-open,
.overlay-status-closed {
  font-size: var(--fs-2);
}

.overlay-status-time {
  font-size: var(--fs-1);
}

.overlay-status-toggle {
  width: 14px;
  height: 14px;
}

.overlay-status-toggle::before,
.overlay-status-toggle::after {
  width: 8px;
  height: 2px;
}

.overlay-emphasis .btn {
  min-height: 44px;
  padding: 0 var(--s-4);
  font-size: var(--fs-1);
}

@media (max-width: 767px) {
  .overlay-demo-bg {
    padding: var(--s-3);
  }

  .overlay-emphasis {
    --overlay-pad: var(--s-2);
    max-width: 100%;
  }

  .overlay-emphasis-head,
  .overlay-emphasis-meta,
  .overlay-emphasis-row,
  .overlay-emphasis-status {
    padding: var(--s-3);
  }

  .overlay-emphasis-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: var(--s-2);
  }

  .overlay-phone-value,
  .overlay-phone-tag,
  .overlay-emphasis-row > a.t-h3,
  .overlay-emphasis-row > strong.t-lead {
    font-size: var(--fs-2);
  }

  .overlay-status-time {
    font-size: var(--fs-0);
  }
}


/* =========================================================
   47. Container and card hover alias
   =========================================================
   - Default --container is now 1440px.
   - .card-hover is the production alias for .demo-card-hover.
*/

/* =========================================================
   48. Card base and utility cleanup
   =========================================================
   - .card no longer has a default shadow.
   - .border-none removes border.
   - .round-0 remains the utility for removing border-radius.
*/

/* =========================================================
   49. Demo card utility examples
   =========================================================
   - Demo HTML now shows .card-hover, .border-none and .round-0 in Components.
   - No production CSS behavior changed in this version.
*/


/* =========================================================
   50. Flexible split row utilities
   =========================================================
   - Added .flex-split for rows where one child can define its basis.
   - Added .flex-fill and .flex-auto.
   - Added .basis-custom and percentage basis utilities.
   - Added optional .stack-mobile modifier for mobile stacking.
*/


/* =========================================================
   51. Flex Split demo section
   =========================================================
   - Demo HTML now has a standalone Flex Split section.
   - Shows .flex-split, all .basis-* values, .basis-custom, .flex-fill, .flex-auto and .stack-mobile.
   - .flex-split direct children now reset full margin to avoid default figure margins.
*/

/* =========================================================
   52. Denominator-based basis utilities
   =========================================================
   - Replaced percentage-named .basis-* utilities with denominator logic.
   - .basis-2 means 1/2, .basis-3 means 1/3, .basis-4 means 1/4, etc.
   - Kept .basis-custom for exact px/%/clamp values.
*/


/* =========================================================
   53. Spacing demo: external margins
   ========================================================= */
.demo-margin-card {
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

.demo-margin-frame {
  min-height: 118px;
  margin-top: var(--s-3);
  padding-inline: var(--s-3);
  border: 1px dashed color-mix(in srgb, var(--c-border), var(--c-text) 22%);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  overflow: hidden;
}

.demo-margin-block {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: var(--s-2);
  border-radius: var(--r-sm);
  background: var(--c-primary-soft);
  color: var(--c-text);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  text-align: center;
}


/* =========================================================
   54. Display utilities
   =========================================================
   - Added .d-block, .d-inline, .d-inline-block, .d-flex and .d-grid.
   - Demo HTML now shows examples in the Typography section.
*/


/* =========================================================
   55. Card color inheritance fix
   =========================================================
   - .card now resets text color to --c-text when placed inside inverted sections such as .bg-dark.
   - Background utility classes can still override color when applied directly to the card.
*/

/* =========================================================
   56. Background image and text shadow utilities
   ========================================================= */
.demo-bg-image {
  min-height: 220px;
  display: grid;
  align-content: end;
  padding: var(--s-7);
  border-radius: var(--r-md);
  overflow: hidden;
}

.demo-bg-image > :last-child {
  margin-bottom: 0;
}

/* Color background utilities now use background-color instead of background shorthand.
   - Added background image helpers: .bg-cover, .bg-contain, .bg-center, .bg-fixed, .bg-no-repeat, etc.
   - Added text shadow helpers for hero/CTA sections.
   - Demo HTML now shows .text-white, background image utilities and text shadows.
*/

/* =========================================================
   58. Alignment utilities
   =========================================================
   - Added .justify-start and .justify-end for flex/grid alignment control.
   - Added !important to justify utility values for predictable overrides.
   - Added .ml-auto, .mr-auto and .mx-auto for positioning fixed-width blocks inside wider containers.
   - Demo HTML now shows alignment utility examples in a separate section.
*/


/* =========================================================
   59. Axis alignment, text-shadow and circle utility
   =========================================================
   - Added .x-start / .x-center / .x-end and .y-start / .y-center / .y-end.
   - Removed .align-* from demo usage; axis-based classes are now the preferred system.
   - Updated .text-shadow-lg to a compact strong shadow.
   - Added .circle, .circle-sm and .circle-lg for numbers/icons in circles.
*/

/* =========================================================
   60. Fixed flex widths and centered fixed grid
   =========================================================
   - .basis-* remains proportional to the current row width.
   - .fixed-* uses the max container as a reference and keeps a stable width until the parent becomes too narrow.
   - .fixed-6 means 1/6 of --container. With --container: 1440px, it is 240px.
   - .grid-fixed creates centered fixed-width columns that shrink to 100% on narrow screens.
   ========================================================= */

.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.fixed-custom,
.fixed-2,
.fixed-3,
.fixed-4,
.fixed-5,
.fixed-6,
.fixed-8,
.fixed-10,
.fixed-12 {
  flex: 0 1 min(100%, var(--fixed-w, auto)) !important;
  width: min(100%, var(--fixed-w, auto));
  max-width: var(--fixed-w, none);
  min-width: 0;
}

.fixed-custom { --fixed-w: var(--fixed, 300px); }
.fixed-2 { --fixed-w: calc(var(--container) / 2); }
.fixed-3 { --fixed-w: calc(var(--container) / 3); }
.fixed-4 { --fixed-w: calc(var(--container) / 4); }
.fixed-5 { --fixed-w: calc(var(--container) / 5); }
.fixed-6 { --fixed-w: calc(var(--container) / 6); }
.fixed-8 { --fixed-w: calc(var(--container) / 8); }
.fixed-10 { --fixed-w: calc(var(--container) / 10); }
.fixed-12 { --fixed-w: calc(var(--container) / 12); }

.grid-fixed {
  --grid-fixed-w: 300px;
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-fixed-w)), var(--grid-fixed-w)));
  justify-content: center;
}

.grid-fixed-160 { --grid-fixed-w: 160px; }
.grid-fixed-200 { --grid-fixed-w: 200px; }
.grid-fixed-240 { --grid-fixed-w: 240px; }
.grid-fixed-280 { --grid-fixed-w: 280px; }
.grid-fixed-300 { --grid-fixed-w: 300px; }
.grid-fixed-320 { --grid-fixed-w: 320px; }
.grid-fixed-360 { --grid-fixed-w: 360px; }
.grid-fixed-420 { --grid-fixed-w: 420px; }
.grid-fixed-480 { --grid-fixed-w: 480px; }



/* =========================================================
   61. Responsive columns and responsive spacing
   - .coll-tab-* / .coll-mob-* control column count on tablet/mobile.
   - Works for .grid, .grid-fixed and .flex-split.
   - When responsive column classes are active, .grid-fixed and .flex-split behave like grid: children fill their column.
   - Spacing can be adjusted with *-desk-*, *-tab-* and *-mob-* utilities.
   ========================================================= */

@media (min-width: 1181px) {
.grid.coll-desk-1, .grid-fixed.coll-desk-1, .grid.col-desk-1, .grid-fixed.col-desk-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.flex-split.coll-desk-1, .flex-split.col-desk-1 { display: grid !important; grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid.coll-desk-2, .grid-fixed.coll-desk-2, .grid.col-desk-2, .grid-fixed.col-desk-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.flex-split.coll-desk-2, .flex-split.col-desk-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid.coll-desk-3, .grid-fixed.coll-desk-3, .grid.col-desk-3, .grid-fixed.col-desk-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.flex-split.coll-desk-3, .flex-split.col-desk-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid.coll-desk-4, .grid-fixed.coll-desk-4, .grid.col-desk-4, .grid-fixed.col-desk-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.flex-split.coll-desk-4, .flex-split.col-desk-4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid.coll-desk-5, .grid-fixed.coll-desk-5, .grid.col-desk-5, .grid-fixed.col-desk-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.flex-split.coll-desk-5, .flex-split.col-desk-5 { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid.coll-desk-6, .grid-fixed.coll-desk-6, .grid.col-desk-6, .grid-fixed.col-desk-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.flex-split.coll-desk-6, .flex-split.col-desk-6 { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid[class*="coll-desk-"] > *, .grid-fixed[class*="coll-desk-"] > *, .grid[class*="col-desk-"] > *, .grid-fixed[class*="col-desk-"] > * { width: auto !important; max-width: none !important; min-width: 0; }
.flex-split[class*="coll-desk-"] > *, .flex-split[class*="col-desk-"] > * { flex: initial !important; width: auto !important; max-width: none !important; min-width: 0; }

.mt-desk-0 { margin-top: var(--s-0) !important; }
.mb-desk-0 { margin-bottom: var(--s-0) !important; }
.p-desk-0 { padding: var(--s-0) !important; }
.pt-desk-0 { padding-top: var(--s-0) !important; }
.pb-desk-0 { padding-bottom: var(--s-0) !important; }
.px-desk-0 { padding-inline: var(--s-0) !important; }
.py-desk-0 { padding-block: var(--s-0) !important; }
.gap-desk-0 { gap: var(--s-0) !important; }
.mt-desk-1 { margin-top: var(--s-1) !important; }
.mb-desk-1 { margin-bottom: var(--s-1) !important; }
.p-desk-1 { padding: var(--s-1) !important; }
.pt-desk-1 { padding-top: var(--s-1) !important; }
.pb-desk-1 { padding-bottom: var(--s-1) !important; }
.px-desk-1 { padding-inline: var(--s-1) !important; }
.py-desk-1 { padding-block: var(--s-1) !important; }
.gap-desk-1 { gap: var(--s-1) !important; }
.mt-desk-2 { margin-top: var(--s-2) !important; }
.mb-desk-2 { margin-bottom: var(--s-2) !important; }
.p-desk-2 { padding: var(--s-2) !important; }
.pt-desk-2 { padding-top: var(--s-2) !important; }
.pb-desk-2 { padding-bottom: var(--s-2) !important; }
.px-desk-2 { padding-inline: var(--s-2) !important; }
.py-desk-2 { padding-block: var(--s-2) !important; }
.gap-desk-2 { gap: var(--s-2) !important; }
.mt-desk-3 { margin-top: var(--s-3) !important; }
.mb-desk-3 { margin-bottom: var(--s-3) !important; }
.p-desk-3 { padding: var(--s-3) !important; }
.pt-desk-3 { padding-top: var(--s-3) !important; }
.pb-desk-3 { padding-bottom: var(--s-3) !important; }
.px-desk-3 { padding-inline: var(--s-3) !important; }
.py-desk-3 { padding-block: var(--s-3) !important; }
.gap-desk-3 { gap: var(--s-3) !important; }
.mt-desk-4 { margin-top: var(--s-4) !important; }
.mb-desk-4 { margin-bottom: var(--s-4) !important; }
.p-desk-4 { padding: var(--s-4) !important; }
.pt-desk-4 { padding-top: var(--s-4) !important; }
.pb-desk-4 { padding-bottom: var(--s-4) !important; }
.px-desk-4 { padding-inline: var(--s-4) !important; }
.py-desk-4 { padding-block: var(--s-4) !important; }
.gap-desk-4 { gap: var(--s-4) !important; }
.mt-desk-5 { margin-top: var(--s-5) !important; }
.mb-desk-5 { margin-bottom: var(--s-5) !important; }
.p-desk-5 { padding: var(--s-5) !important; }
.pt-desk-5 { padding-top: var(--s-5) !important; }
.pb-desk-5 { padding-bottom: var(--s-5) !important; }
.px-desk-5 { padding-inline: var(--s-5) !important; }
.py-desk-5 { padding-block: var(--s-5) !important; }
.gap-desk-5 { gap: var(--s-5) !important; }
.mt-desk-6 { margin-top: var(--s-6) !important; }
.mb-desk-6 { margin-bottom: var(--s-6) !important; }
.p-desk-6 { padding: var(--s-6) !important; }
.pt-desk-6 { padding-top: var(--s-6) !important; }
.pb-desk-6 { padding-bottom: var(--s-6) !important; }
.px-desk-6 { padding-inline: var(--s-6) !important; }
.py-desk-6 { padding-block: var(--s-6) !important; }
.gap-desk-6 { gap: var(--s-6) !important; }
.mt-desk-7 { margin-top: var(--s-7) !important; }
.mb-desk-7 { margin-bottom: var(--s-7) !important; }
.p-desk-7 { padding: var(--s-7) !important; }
.pt-desk-7 { padding-top: var(--s-7) !important; }
.pb-desk-7 { padding-bottom: var(--s-7) !important; }
.px-desk-7 { padding-inline: var(--s-7) !important; }
.py-desk-7 { padding-block: var(--s-7) !important; }
.gap-desk-7 { gap: var(--s-7) !important; }
.mt-desk-8 { margin-top: var(--s-8) !important; }
.mb-desk-8 { margin-bottom: var(--s-8) !important; }
.p-desk-8 { padding: var(--s-8) !important; }
.pt-desk-8 { padding-top: var(--s-8) !important; }
.pb-desk-8 { padding-bottom: var(--s-8) !important; }
.px-desk-8 { padding-inline: var(--s-8) !important; }
.py-desk-8 { padding-block: var(--s-8) !important; }
.gap-desk-8 { gap: var(--s-8) !important; }
.mt-desk-9 { margin-top: var(--s-9) !important; }
.mb-desk-9 { margin-bottom: var(--s-9) !important; }
.p-desk-9 { padding: var(--s-9) !important; }
.pt-desk-9 { padding-top: var(--s-9) !important; }
.pb-desk-9 { padding-bottom: var(--s-9) !important; }
.px-desk-9 { padding-inline: var(--s-9) !important; }
.py-desk-9 { padding-block: var(--s-9) !important; }
.gap-desk-9 { gap: var(--s-9) !important; }
.mt-desk-10 { margin-top: var(--s-10) !important; }
.mb-desk-10 { margin-bottom: var(--s-10) !important; }
.p-desk-10 { padding: var(--s-10) !important; }
.pt-desk-10 { padding-top: var(--s-10) !important; }
.pb-desk-10 { padding-bottom: var(--s-10) !important; }
.px-desk-10 { padding-inline: var(--s-10) !important; }
.py-desk-10 { padding-block: var(--s-10) !important; }
.gap-desk-10 { gap: var(--s-10) !important; }
.mt-desk-11 { margin-top: var(--s-11) !important; }
.mb-desk-11 { margin-bottom: var(--s-11) !important; }
.p-desk-11 { padding: var(--s-11) !important; }
.pt-desk-11 { padding-top: var(--s-11) !important; }
.pb-desk-11 { padding-bottom: var(--s-11) !important; }
.px-desk-11 { padding-inline: var(--s-11) !important; }
.py-desk-11 { padding-block: var(--s-11) !important; }
.gap-desk-11 { gap: var(--s-11) !important; }
.mt-desk-12 { margin-top: var(--s-12) !important; }
.mb-desk-12 { margin-bottom: var(--s-12) !important; }
.p-desk-12 { padding: var(--s-12) !important; }
.pt-desk-12 { padding-top: var(--s-12) !important; }
.pb-desk-12 { padding-bottom: var(--s-12) !important; }
.px-desk-12 { padding-inline: var(--s-12) !important; }
.py-desk-12 { padding-block: var(--s-12) !important; }
.gap-desk-12 { gap: var(--s-12) !important; }
}

@media (max-width: 1180px) {
.grid.coll-tab-1, .grid-fixed.coll-tab-1, .grid.col-tab-1, .grid-fixed.col-tab-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.flex-split.coll-tab-1, .flex-split.col-tab-1 { display: grid !important; grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid.coll-tab-2, .grid-fixed.coll-tab-2, .grid.col-tab-2, .grid-fixed.col-tab-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.flex-split.coll-tab-2, .flex-split.col-tab-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid.coll-tab-3, .grid-fixed.coll-tab-3, .grid.col-tab-3, .grid-fixed.col-tab-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.flex-split.coll-tab-3, .flex-split.col-tab-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid.coll-tab-4, .grid-fixed.coll-tab-4, .grid.col-tab-4, .grid-fixed.col-tab-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.flex-split.coll-tab-4, .flex-split.col-tab-4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid.coll-tab-5, .grid-fixed.coll-tab-5, .grid.col-tab-5, .grid-fixed.col-tab-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.flex-split.coll-tab-5, .flex-split.col-tab-5 { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid.coll-tab-6, .grid-fixed.coll-tab-6, .grid.col-tab-6, .grid-fixed.col-tab-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.flex-split.coll-tab-6, .flex-split.col-tab-6 { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid[class*="coll-tab-"] > *, .grid-fixed[class*="coll-tab-"] > *, .grid[class*="col-tab-"] > *, .grid-fixed[class*="col-tab-"] > * { width: auto !important; max-width: none !important; min-width: 0; }
.flex-split[class*="coll-tab-"] > *, .flex-split[class*="col-tab-"] > * { flex: initial !important; width: auto !important; max-width: none !important; min-width: 0; }

.mt-tab-0 { margin-top: var(--s-0) !important; }
.mb-tab-0 { margin-bottom: var(--s-0) !important; }
.p-tab-0 { padding: var(--s-0) !important; }
.pt-tab-0 { padding-top: var(--s-0) !important; }
.pb-tab-0 { padding-bottom: var(--s-0) !important; }
.px-tab-0 { padding-inline: var(--s-0) !important; }
.py-tab-0 { padding-block: var(--s-0) !important; }
.gap-tab-0 { gap: var(--s-0) !important; }
.mt-tab-1 { margin-top: var(--s-1) !important; }
.mb-tab-1 { margin-bottom: var(--s-1) !important; }
.p-tab-1 { padding: var(--s-1) !important; }
.pt-tab-1 { padding-top: var(--s-1) !important; }
.pb-tab-1 { padding-bottom: var(--s-1) !important; }
.px-tab-1 { padding-inline: var(--s-1) !important; }
.py-tab-1 { padding-block: var(--s-1) !important; }
.gap-tab-1 { gap: var(--s-1) !important; }
.mt-tab-2 { margin-top: var(--s-2) !important; }
.mb-tab-2 { margin-bottom: var(--s-2) !important; }
.p-tab-2 { padding: var(--s-2) !important; }
.pt-tab-2 { padding-top: var(--s-2) !important; }
.pb-tab-2 { padding-bottom: var(--s-2) !important; }
.px-tab-2 { padding-inline: var(--s-2) !important; }
.py-tab-2 { padding-block: var(--s-2) !important; }
.gap-tab-2 { gap: var(--s-2) !important; }
.mt-tab-3 { margin-top: var(--s-3) !important; }
.mb-tab-3 { margin-bottom: var(--s-3) !important; }
.p-tab-3 { padding: var(--s-3) !important; }
.pt-tab-3 { padding-top: var(--s-3) !important; }
.pb-tab-3 { padding-bottom: var(--s-3) !important; }
.px-tab-3 { padding-inline: var(--s-3) !important; }
.py-tab-3 { padding-block: var(--s-3) !important; }
.gap-tab-3 { gap: var(--s-3) !important; }
.mt-tab-4 { margin-top: var(--s-4) !important; }
.mb-tab-4 { margin-bottom: var(--s-4) !important; }
.p-tab-4 { padding: var(--s-4) !important; }
.pt-tab-4 { padding-top: var(--s-4) !important; }
.pb-tab-4 { padding-bottom: var(--s-4) !important; }
.px-tab-4 { padding-inline: var(--s-4) !important; }
.py-tab-4 { padding-block: var(--s-4) !important; }
.gap-tab-4 { gap: var(--s-4) !important; }
.mt-tab-5 { margin-top: var(--s-5) !important; }
.mb-tab-5 { margin-bottom: var(--s-5) !important; }
.p-tab-5 { padding: var(--s-5) !important; }
.pt-tab-5 { padding-top: var(--s-5) !important; }
.pb-tab-5 { padding-bottom: var(--s-5) !important; }
.px-tab-5 { padding-inline: var(--s-5) !important; }
.py-tab-5 { padding-block: var(--s-5) !important; }
.gap-tab-5 { gap: var(--s-5) !important; }
.mt-tab-6 { margin-top: var(--s-6) !important; }
.mb-tab-6 { margin-bottom: var(--s-6) !important; }
.p-tab-6 { padding: var(--s-6) !important; }
.pt-tab-6 { padding-top: var(--s-6) !important; }
.pb-tab-6 { padding-bottom: var(--s-6) !important; }
.px-tab-6 { padding-inline: var(--s-6) !important; }
.py-tab-6 { padding-block: var(--s-6) !important; }
.gap-tab-6 { gap: var(--s-6) !important; }
.mt-tab-7 { margin-top: var(--s-7) !important; }
.mb-tab-7 { margin-bottom: var(--s-7) !important; }
.p-tab-7 { padding: var(--s-7) !important; }
.pt-tab-7 { padding-top: var(--s-7) !important; }
.pb-tab-7 { padding-bottom: var(--s-7) !important; }
.px-tab-7 { padding-inline: var(--s-7) !important; }
.py-tab-7 { padding-block: var(--s-7) !important; }
.gap-tab-7 { gap: var(--s-7) !important; }
.mt-tab-8 { margin-top: var(--s-8) !important; }
.mb-tab-8 { margin-bottom: var(--s-8) !important; }
.p-tab-8 { padding: var(--s-8) !important; }
.pt-tab-8 { padding-top: var(--s-8) !important; }
.pb-tab-8 { padding-bottom: var(--s-8) !important; }
.px-tab-8 { padding-inline: var(--s-8) !important; }
.py-tab-8 { padding-block: var(--s-8) !important; }
.gap-tab-8 { gap: var(--s-8) !important; }
.mt-tab-9 { margin-top: var(--s-9) !important; }
.mb-tab-9 { margin-bottom: var(--s-9) !important; }
.p-tab-9 { padding: var(--s-9) !important; }
.pt-tab-9 { padding-top: var(--s-9) !important; }
.pb-tab-9 { padding-bottom: var(--s-9) !important; }
.px-tab-9 { padding-inline: var(--s-9) !important; }
.py-tab-9 { padding-block: var(--s-9) !important; }
.gap-tab-9 { gap: var(--s-9) !important; }
.mt-tab-10 { margin-top: var(--s-10) !important; }
.mb-tab-10 { margin-bottom: var(--s-10) !important; }
.p-tab-10 { padding: var(--s-10) !important; }
.pt-tab-10 { padding-top: var(--s-10) !important; }
.pb-tab-10 { padding-bottom: var(--s-10) !important; }
.px-tab-10 { padding-inline: var(--s-10) !important; }
.py-tab-10 { padding-block: var(--s-10) !important; }
.gap-tab-10 { gap: var(--s-10) !important; }
.mt-tab-11 { margin-top: var(--s-11) !important; }
.mb-tab-11 { margin-bottom: var(--s-11) !important; }
.p-tab-11 { padding: var(--s-11) !important; }
.pt-tab-11 { padding-top: var(--s-11) !important; }
.pb-tab-11 { padding-bottom: var(--s-11) !important; }
.px-tab-11 { padding-inline: var(--s-11) !important; }
.py-tab-11 { padding-block: var(--s-11) !important; }
.gap-tab-11 { gap: var(--s-11) !important; }
.mt-tab-12 { margin-top: var(--s-12) !important; }
.mb-tab-12 { margin-bottom: var(--s-12) !important; }
.p-tab-12 { padding: var(--s-12) !important; }
.pt-tab-12 { padding-top: var(--s-12) !important; }
.pb-tab-12 { padding-bottom: var(--s-12) !important; }
.px-tab-12 { padding-inline: var(--s-12) !important; }
.py-tab-12 { padding-block: var(--s-12) !important; }
.gap-tab-12 { gap: var(--s-12) !important; }
}

@media (max-width: 768px) {
.grid.coll-mob-1, .grid-fixed.coll-mob-1, .grid.col-mob-1, .grid-fixed.col-mob-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.flex-split.coll-mob-1, .flex-split.col-mob-1 { display: grid !important; grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid.coll-mob-2, .grid-fixed.coll-mob-2, .grid.col-mob-2, .grid-fixed.col-mob-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.flex-split.coll-mob-2, .flex-split.col-mob-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid.coll-mob-3, .grid-fixed.coll-mob-3, .grid.col-mob-3, .grid-fixed.col-mob-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.flex-split.coll-mob-3, .flex-split.col-mob-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid.coll-mob-4, .grid-fixed.coll-mob-4, .grid.col-mob-4, .grid-fixed.col-mob-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.flex-split.coll-mob-4, .flex-split.col-mob-4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid.coll-mob-5, .grid-fixed.coll-mob-5, .grid.col-mob-5, .grid-fixed.col-mob-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.flex-split.coll-mob-5, .flex-split.col-mob-5 { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid.coll-mob-6, .grid-fixed.coll-mob-6, .grid.col-mob-6, .grid-fixed.col-mob-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.flex-split.coll-mob-6, .flex-split.col-mob-6 { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid[class*="coll-mob-"] > *, .grid-fixed[class*="coll-mob-"] > *, .grid[class*="col-mob-"] > *, .grid-fixed[class*="col-mob-"] > * { width: auto !important; max-width: none !important; min-width: 0; }
.flex-split[class*="coll-mob-"] > *, .flex-split[class*="col-mob-"] > * { flex: initial !important; width: auto !important; max-width: none !important; min-width: 0; }

.mt-mob-0 { margin-top: var(--s-0) !important; }
.mb-mob-0 { margin-bottom: var(--s-0) !important; }
.p-mob-0 { padding: var(--s-0) !important; }
.pt-mob-0 { padding-top: var(--s-0) !important; }
.pb-mob-0 { padding-bottom: var(--s-0) !important; }
.px-mob-0 { padding-inline: var(--s-0) !important; }
.py-mob-0 { padding-block: var(--s-0) !important; }
.gap-mob-0 { gap: var(--s-0) !important; }
.mt-mob-1 { margin-top: var(--s-1) !important; }
.mb-mob-1 { margin-bottom: var(--s-1) !important; }
.p-mob-1 { padding: var(--s-1) !important; }
.pt-mob-1 { padding-top: var(--s-1) !important; }
.pb-mob-1 { padding-bottom: var(--s-1) !important; }
.px-mob-1 { padding-inline: var(--s-1) !important; }
.py-mob-1 { padding-block: var(--s-1) !important; }
.gap-mob-1 { gap: var(--s-1) !important; }
.mt-mob-2 { margin-top: var(--s-2) !important; }
.mb-mob-2 { margin-bottom: var(--s-2) !important; }
.p-mob-2 { padding: var(--s-2) !important; }
.pt-mob-2 { padding-top: var(--s-2) !important; }
.pb-mob-2 { padding-bottom: var(--s-2) !important; }
.px-mob-2 { padding-inline: var(--s-2) !important; }
.py-mob-2 { padding-block: var(--s-2) !important; }
.gap-mob-2 { gap: var(--s-2) !important; }
.mt-mob-3 { margin-top: var(--s-3) !important; }
.mb-mob-3 { margin-bottom: var(--s-3) !important; }
.p-mob-3 { padding: var(--s-3) !important; }
.pt-mob-3 { padding-top: var(--s-3) !important; }
.pb-mob-3 { padding-bottom: var(--s-3) !important; }
.px-mob-3 { padding-inline: var(--s-3) !important; }
.py-mob-3 { padding-block: var(--s-3) !important; }
.gap-mob-3 { gap: var(--s-3) !important; }
.mt-mob-4 { margin-top: var(--s-4) !important; }
.mb-mob-4 { margin-bottom: var(--s-4) !important; }
.p-mob-4 { padding: var(--s-4) !important; }
.pt-mob-4 { padding-top: var(--s-4) !important; }
.pb-mob-4 { padding-bottom: var(--s-4) !important; }
.px-mob-4 { padding-inline: var(--s-4) !important; }
.py-mob-4 { padding-block: var(--s-4) !important; }
.gap-mob-4 { gap: var(--s-4) !important; }
.mt-mob-5 { margin-top: var(--s-5) !important; }
.mb-mob-5 { margin-bottom: var(--s-5) !important; }
.p-mob-5 { padding: var(--s-5) !important; }
.pt-mob-5 { padding-top: var(--s-5) !important; }
.pb-mob-5 { padding-bottom: var(--s-5) !important; }
.px-mob-5 { padding-inline: var(--s-5) !important; }
.py-mob-5 { padding-block: var(--s-5) !important; }
.gap-mob-5 { gap: var(--s-5) !important; }
.mt-mob-6 { margin-top: var(--s-6) !important; }
.mb-mob-6 { margin-bottom: var(--s-6) !important; }
.p-mob-6 { padding: var(--s-6) !important; }
.pt-mob-6 { padding-top: var(--s-6) !important; }
.pb-mob-6 { padding-bottom: var(--s-6) !important; }
.px-mob-6 { padding-inline: var(--s-6) !important; }
.py-mob-6 { padding-block: var(--s-6) !important; }
.gap-mob-6 { gap: var(--s-6) !important; }
.mt-mob-7 { margin-top: var(--s-7) !important; }
.mb-mob-7 { margin-bottom: var(--s-7) !important; }
.p-mob-7 { padding: var(--s-7) !important; }
.pt-mob-7 { padding-top: var(--s-7) !important; }
.pb-mob-7 { padding-bottom: var(--s-7) !important; }
.px-mob-7 { padding-inline: var(--s-7) !important; }
.py-mob-7 { padding-block: var(--s-7) !important; }
.gap-mob-7 { gap: var(--s-7) !important; }
.mt-mob-8 { margin-top: var(--s-8) !important; }
.mb-mob-8 { margin-bottom: var(--s-8) !important; }
.p-mob-8 { padding: var(--s-8) !important; }
.pt-mob-8 { padding-top: var(--s-8) !important; }
.pb-mob-8 { padding-bottom: var(--s-8) !important; }
.px-mob-8 { padding-inline: var(--s-8) !important; }
.py-mob-8 { padding-block: var(--s-8) !important; }
.gap-mob-8 { gap: var(--s-8) !important; }
.mt-mob-9 { margin-top: var(--s-9) !important; }
.mb-mob-9 { margin-bottom: var(--s-9) !important; }
.p-mob-9 { padding: var(--s-9) !important; }
.pt-mob-9 { padding-top: var(--s-9) !important; }
.pb-mob-9 { padding-bottom: var(--s-9) !important; }
.px-mob-9 { padding-inline: var(--s-9) !important; }
.py-mob-9 { padding-block: var(--s-9) !important; }
.gap-mob-9 { gap: var(--s-9) !important; }
.mt-mob-10 { margin-top: var(--s-10) !important; }
.mb-mob-10 { margin-bottom: var(--s-10) !important; }
.p-mob-10 { padding: var(--s-10) !important; }
.pt-mob-10 { padding-top: var(--s-10) !important; }
.pb-mob-10 { padding-bottom: var(--s-10) !important; }
.px-mob-10 { padding-inline: var(--s-10) !important; }
.py-mob-10 { padding-block: var(--s-10) !important; }
.gap-mob-10 { gap: var(--s-10) !important; }
.mt-mob-11 { margin-top: var(--s-11) !important; }
.mb-mob-11 { margin-bottom: var(--s-11) !important; }
.p-mob-11 { padding: var(--s-11) !important; }
.pt-mob-11 { padding-top: var(--s-11) !important; }
.pb-mob-11 { padding-bottom: var(--s-11) !important; }
.px-mob-11 { padding-inline: var(--s-11) !important; }
.py-mob-11 { padding-block: var(--s-11) !important; }
.gap-mob-11 { gap: var(--s-11) !important; }
.mt-mob-12 { margin-top: var(--s-12) !important; }
.mb-mob-12 { margin-bottom: var(--s-12) !important; }
.p-mob-12 { padding: var(--s-12) !important; }
.pt-mob-12 { padding-top: var(--s-12) !important; }
.pb-mob-12 { padding-bottom: var(--s-12) !important; }
.px-mob-12 { padding-inline: var(--s-12) !important; }
.py-mob-12 { padding-block: var(--s-12) !important; }
.gap-mob-12 { gap: var(--s-12) !important; }
}

/* =========================================================
   62. Compact spacing steps
   - Adds missing small spacing utilities for the base scale.
   ========================================================= */
.p-1 { padding: var(--s-1) !important; }
.p-2 { padding: var(--s-2) !important; }

.pt-1 { padding-top: var(--s-1) !important; }
.pt-2 { padding-top: var(--s-2) !important; }

.pb-1 { padding-bottom: var(--s-1) !important; }
.pb-2 { padding-bottom: var(--s-2) !important; }

.px-1 { padding-inline: var(--s-1) !important; }
.px-2 { padding-inline: var(--s-2) !important; }

.py-1 { padding-block: var(--s-1) !important; }
.py-2 { padding-block: var(--s-2) !important; }

.gap-1 { gap: var(--s-1) !important; }

/* =========================================================
   63. Order and responsive text alignment utilities
   - .first-block removed. Use .order-2 when a block should move later on desktop.
   - .order-2 resets on mobile so stacked content returns to natural order.
   - Text alignment now has base, desktop, tablet and mobile variants.
   ========================================================= */
.order-2 { order: 2 !important; }

.t-left { text-align: left !important; }
.t-justify { text-align: justify !important; }

@media (min-width: 1181px) {
  .t-desk-left { text-align: left !important; }
  .t-desk-center { text-align: center !important; }
  .t-desk-right { text-align: right !important; }
  .t-desk-justify { text-align: justify !important; }
}

@media (max-width: 1180px) {
  .t-tab-left { text-align: left !important; }
  .t-tab-center { text-align: center !important; }
  .t-tab-right { text-align: right !important; }
  .t-tab-justify { text-align: justify !important; }
}

@media (max-width: 768px) {
  .order-2 { order: 0 !important; }

  .t-mob-left { text-align: left !important; }
  .t-mob-center { text-align: center !important; }
  .t-mob-right { text-align: right !important; }
  .t-mob-justify { text-align: justify !important; }
}



/* =========================================================
   64. Vertical split utilities
   - .v-split creates a vertical flex layout for cards/CTA blocks.
   - .v-top stays at the top and keeps content-based width.
   - .v-fill takes available space and full width.
   - .v-bottom sticks to the bottom when the parent has extra height.
   ========================================================= */
.v-split {
  --v-split-gap: var(--s-4);
  display: flex !important;
  flex-direction: column !important;
  gap: var(--v-split-gap);
  min-height: var(--v-split-min, auto);
}

.v-split > * {
  min-width: 0;
}

.v-top {
  width: fit-content;
  max-width: 100%;
}

.v-fill {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0;
}

.v-bottom {
  margin-top: auto !important;
  width: fit-content;
  max-width: 100%;
}

.v-bottom-full {
  margin-top: auto !important;
  width: 100% !important;
}

/* ========================================================= Positioned section/container baseline
   Gives sections and container blocks a local positioning context
   for absolute pseudo-elements, overlays, badges and decorative layers.
   ========================================================= */
.section,
.section-sm,
.container,
.container-narrow,
.container-wide {
  position: relative;
}


/* ========================================================= Sticky utilities
   - No z-index is assigned here by design.
   - Add z-index locally when a sticky header or panel must sit above content.
   ========================================================= */
.sticky-top {
  position: sticky !important;
  top: 0 !important;
}

.sticky-offset {
  position: sticky !important;
  top: var(--sticky-offset, var(--s-4)) !important;
}


/* ========================================================= Horizontal margin utilities
   Adds numeric ml-*, mr-* and mx-* utilities using the shared --s-* spacing scale.
   Responsive variants follow the existing desk/tab/mob spacing pattern.
   ========================================================= */
.ml-0 { margin-left: var(--s-0) !important; }
.mr-0 { margin-right: var(--s-0) !important; }
.mx-0 { margin-inline: var(--s-0) !important; }
.ml-1 { margin-left: var(--s-1) !important; }
.mr-1 { margin-right: var(--s-1) !important; }
.mx-1 { margin-inline: var(--s-1) !important; }
.ml-2 { margin-left: var(--s-2) !important; }
.mr-2 { margin-right: var(--s-2) !important; }
.mx-2 { margin-inline: var(--s-2) !important; }
.ml-3 { margin-left: var(--s-3) !important; }
.mr-3 { margin-right: var(--s-3) !important; }
.mx-3 { margin-inline: var(--s-3) !important; }
.ml-4 { margin-left: var(--s-4) !important; }
.mr-4 { margin-right: var(--s-4) !important; }
.mx-4 { margin-inline: var(--s-4) !important; }
.ml-5 { margin-left: var(--s-5) !important; }
.mr-5 { margin-right: var(--s-5) !important; }
.mx-5 { margin-inline: var(--s-5) !important; }
.ml-6 { margin-left: var(--s-6) !important; }
.mr-6 { margin-right: var(--s-6) !important; }
.mx-6 { margin-inline: var(--s-6) !important; }
.ml-7 { margin-left: var(--s-7) !important; }
.mr-7 { margin-right: var(--s-7) !important; }
.mx-7 { margin-inline: var(--s-7) !important; }
.ml-8 { margin-left: var(--s-8) !important; }
.mr-8 { margin-right: var(--s-8) !important; }
.mx-8 { margin-inline: var(--s-8) !important; }
.ml-9 { margin-left: var(--s-9) !important; }
.mr-9 { margin-right: var(--s-9) !important; }
.mx-9 { margin-inline: var(--s-9) !important; }
.ml-10 { margin-left: var(--s-10) !important; }
.mr-10 { margin-right: var(--s-10) !important; }
.mx-10 { margin-inline: var(--s-10) !important; }
.ml-11 { margin-left: var(--s-11) !important; }
.mr-11 { margin-right: var(--s-11) !important; }
.mx-11 { margin-inline: var(--s-11) !important; }
.ml-12 { margin-left: var(--s-12) !important; }
.mr-12 { margin-right: var(--s-12) !important; }
.mx-12 { margin-inline: var(--s-12) !important; }

@media (min-width: 1181px) {
  .ml-desk-0 { margin-left: var(--s-0) !important; }
  .mr-desk-0 { margin-right: var(--s-0) !important; }
  .mx-desk-0 { margin-inline: var(--s-0) !important; }
  .ml-desk-1 { margin-left: var(--s-1) !important; }
  .mr-desk-1 { margin-right: var(--s-1) !important; }
  .mx-desk-1 { margin-inline: var(--s-1) !important; }
  .ml-desk-2 { margin-left: var(--s-2) !important; }
  .mr-desk-2 { margin-right: var(--s-2) !important; }
  .mx-desk-2 { margin-inline: var(--s-2) !important; }
  .ml-desk-3 { margin-left: var(--s-3) !important; }
  .mr-desk-3 { margin-right: var(--s-3) !important; }
  .mx-desk-3 { margin-inline: var(--s-3) !important; }
  .ml-desk-4 { margin-left: var(--s-4) !important; }
  .mr-desk-4 { margin-right: var(--s-4) !important; }
  .mx-desk-4 { margin-inline: var(--s-4) !important; }
  .ml-desk-5 { margin-left: var(--s-5) !important; }
  .mr-desk-5 { margin-right: var(--s-5) !important; }
  .mx-desk-5 { margin-inline: var(--s-5) !important; }
  .ml-desk-6 { margin-left: var(--s-6) !important; }
  .mr-desk-6 { margin-right: var(--s-6) !important; }
  .mx-desk-6 { margin-inline: var(--s-6) !important; }
  .ml-desk-7 { margin-left: var(--s-7) !important; }
  .mr-desk-7 { margin-right: var(--s-7) !important; }
  .mx-desk-7 { margin-inline: var(--s-7) !important; }
  .ml-desk-8 { margin-left: var(--s-8) !important; }
  .mr-desk-8 { margin-right: var(--s-8) !important; }
  .mx-desk-8 { margin-inline: var(--s-8) !important; }
  .ml-desk-9 { margin-left: var(--s-9) !important; }
  .mr-desk-9 { margin-right: var(--s-9) !important; }
  .mx-desk-9 { margin-inline: var(--s-9) !important; }
  .ml-desk-10 { margin-left: var(--s-10) !important; }
  .mr-desk-10 { margin-right: var(--s-10) !important; }
  .mx-desk-10 { margin-inline: var(--s-10) !important; }
  .ml-desk-11 { margin-left: var(--s-11) !important; }
  .mr-desk-11 { margin-right: var(--s-11) !important; }
  .mx-desk-11 { margin-inline: var(--s-11) !important; }
  .ml-desk-12 { margin-left: var(--s-12) !important; }
  .mr-desk-12 { margin-right: var(--s-12) !important; }
  .mx-desk-12 { margin-inline: var(--s-12) !important; }
}

@media (max-width: 1180px) {
  .ml-tab-0 { margin-left: var(--s-0) !important; }
  .mr-tab-0 { margin-right: var(--s-0) !important; }
  .mx-tab-0 { margin-inline: var(--s-0) !important; }
  .ml-tab-1 { margin-left: var(--s-1) !important; }
  .mr-tab-1 { margin-right: var(--s-1) !important; }
  .mx-tab-1 { margin-inline: var(--s-1) !important; }
  .ml-tab-2 { margin-left: var(--s-2) !important; }
  .mr-tab-2 { margin-right: var(--s-2) !important; }
  .mx-tab-2 { margin-inline: var(--s-2) !important; }
  .ml-tab-3 { margin-left: var(--s-3) !important; }
  .mr-tab-3 { margin-right: var(--s-3) !important; }
  .mx-tab-3 { margin-inline: var(--s-3) !important; }
  .ml-tab-4 { margin-left: var(--s-4) !important; }
  .mr-tab-4 { margin-right: var(--s-4) !important; }
  .mx-tab-4 { margin-inline: var(--s-4) !important; }
  .ml-tab-5 { margin-left: var(--s-5) !important; }
  .mr-tab-5 { margin-right: var(--s-5) !important; }
  .mx-tab-5 { margin-inline: var(--s-5) !important; }
  .ml-tab-6 { margin-left: var(--s-6) !important; }
  .mr-tab-6 { margin-right: var(--s-6) !important; }
  .mx-tab-6 { margin-inline: var(--s-6) !important; }
  .ml-tab-7 { margin-left: var(--s-7) !important; }
  .mr-tab-7 { margin-right: var(--s-7) !important; }
  .mx-tab-7 { margin-inline: var(--s-7) !important; }
  .ml-tab-8 { margin-left: var(--s-8) !important; }
  .mr-tab-8 { margin-right: var(--s-8) !important; }
  .mx-tab-8 { margin-inline: var(--s-8) !important; }
  .ml-tab-9 { margin-left: var(--s-9) !important; }
  .mr-tab-9 { margin-right: var(--s-9) !important; }
  .mx-tab-9 { margin-inline: var(--s-9) !important; }
  .ml-tab-10 { margin-left: var(--s-10) !important; }
  .mr-tab-10 { margin-right: var(--s-10) !important; }
  .mx-tab-10 { margin-inline: var(--s-10) !important; }
  .ml-tab-11 { margin-left: var(--s-11) !important; }
  .mr-tab-11 { margin-right: var(--s-11) !important; }
  .mx-tab-11 { margin-inline: var(--s-11) !important; }
  .ml-tab-12 { margin-left: var(--s-12) !important; }
  .mr-tab-12 { margin-right: var(--s-12) !important; }
  .mx-tab-12 { margin-inline: var(--s-12) !important; }
}

@media (max-width: 768px) {
  .ml-mob-0 { margin-left: var(--s-0) !important; }
  .mr-mob-0 { margin-right: var(--s-0) !important; }
  .mx-mob-0 { margin-inline: var(--s-0) !important; }
  .ml-mob-1 { margin-left: var(--s-1) !important; }
  .mr-mob-1 { margin-right: var(--s-1) !important; }
  .mx-mob-1 { margin-inline: var(--s-1) !important; }
  .ml-mob-2 { margin-left: var(--s-2) !important; }
  .mr-mob-2 { margin-right: var(--s-2) !important; }
  .mx-mob-2 { margin-inline: var(--s-2) !important; }
  .ml-mob-3 { margin-left: var(--s-3) !important; }
  .mr-mob-3 { margin-right: var(--s-3) !important; }
  .mx-mob-3 { margin-inline: var(--s-3) !important; }
  .ml-mob-4 { margin-left: var(--s-4) !important; }
  .mr-mob-4 { margin-right: var(--s-4) !important; }
  .mx-mob-4 { margin-inline: var(--s-4) !important; }
  .ml-mob-5 { margin-left: var(--s-5) !important; }
  .mr-mob-5 { margin-right: var(--s-5) !important; }
  .mx-mob-5 { margin-inline: var(--s-5) !important; }
  .ml-mob-6 { margin-left: var(--s-6) !important; }
  .mr-mob-6 { margin-right: var(--s-6) !important; }
  .mx-mob-6 { margin-inline: var(--s-6) !important; }
  .ml-mob-7 { margin-left: var(--s-7) !important; }
  .mr-mob-7 { margin-right: var(--s-7) !important; }
  .mx-mob-7 { margin-inline: var(--s-7) !important; }
  .ml-mob-8 { margin-left: var(--s-8) !important; }
  .mr-mob-8 { margin-right: var(--s-8) !important; }
  .mx-mob-8 { margin-inline: var(--s-8) !important; }
  .ml-mob-9 { margin-left: var(--s-9) !important; }
  .mr-mob-9 { margin-right: var(--s-9) !important; }
  .mx-mob-9 { margin-inline: var(--s-9) !important; }
  .ml-mob-10 { margin-left: var(--s-10) !important; }
  .mr-mob-10 { margin-right: var(--s-10) !important; }
  .mx-mob-10 { margin-inline: var(--s-10) !important; }
  .ml-mob-11 { margin-left: var(--s-11) !important; }
  .mr-mob-11 { margin-right: var(--s-11) !important; }
  .mx-mob-11 { margin-inline: var(--s-11) !important; }
  .ml-mob-12 { margin-left: var(--s-12) !important; }
  .mr-mob-12 { margin-right: var(--s-12) !important; }
  .mx-mob-12 { margin-inline: var(--s-12) !important; }
}

/* Demo helper for horizontal margin examples only. */
.demo-margin-inline { width: min(68%, 220px); }



/* ========================================================= Background shadow overlay utilities
   - .bg-shadow creates a ::after overlay above the background image.
   - Direct children are lifted above the overlay.
   - Stop modifiers control how high the shadow gradient reaches.
   ========================================================= */
.bg-shadow,
.bg-shadow-50,
.bg-shadow-24,
.bg-shadow-18 {
  --bg-shadow-alpha: .6;
  --bg-shadow-stop: 100%;
  position: relative;
  isolation: isolate;
}

.bg-shadow-50 { --bg-shadow-stop: 50%; }
.bg-shadow-24 { --bg-shadow-stop: 24%; }
.bg-shadow-18 { --bg-shadow-stop: 18%; }

.bg-shadow::after,
.bg-shadow-50::after,
.bg-shadow-24::after,
.bg-shadow-18::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(0deg, rgba(0, 0, 0, var(--bg-shadow-alpha)) 0%, rgba(0, 0, 0, 0) var(--bg-shadow-stop));
}

.bg-shadow > *,
.bg-shadow-50 > *,
.bg-shadow-24 > *,
.bg-shadow-18 > * {
  position: relative;
  z-index: 1;
}


/* ========================================================= Background bottom curve utility
   - .bg-curve-bottom adds an adaptive curved lower edge via ::before.
   - Works together with .bg-shadow, which uses ::after.
   - Direct children are kept above decorative layers.
   ========================================================= */
.bg-curve-bottom {
  --curve-h: clamp(42px, 6vw, 96px);
  --curve-w: 140%;
  --curve-bg: var(--c-bg);

  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bg-curve-bottom::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--curve-h) * -0.72);
  width: var(--curve-w);
  height: var(--curve-h);
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background-color: var(--curve-bg);
  pointer-events: none;
  z-index: 1;
}

.bg-curve-bottom > * {
  position: relative;
  z-index: 2;
}

.bg-curve-bottom-sm { --curve-h: clamp(28px, 4vw, 56px); }
.bg-curve-bottom-md { --curve-h: clamp(42px, 6vw, 96px); }
.bg-curve-bottom-lg { --curve-h: clamp(64px, 9vw, 140px); }

.bg-curve-page { --curve-bg: var(--c-bg); }
.bg-curve-surface { --curve-bg: var(--c-surface); }
.bg-curve-surface-2 { --curve-bg: var(--c-surface-2); }
.bg-curve-dark { --curve-bg: var(--c-dark); }
.bg-curve-dark-2 { --curve-bg: var(--c-dark-2); }

/* ========================================================= Background bottom curve direction fix
   - .bg-curve-bottom now creates a downward concave cut at the lower edge.
   - The old opposite direction is preserved as .bg-curve-bottom-reverse.
   ========================================================= */
.bg-curve-bottom::before {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: var(--curve-h);
  transform: none;
  border-radius: 0;
  background-color: var(--curve-bg);
  -webkit-mask-image: radial-gradient(ellipse 76% 145% at 50% -42%, transparent 0 63%, #000 64%);
  mask-image: radial-gradient(ellipse 76% 145% at 50% -42%, transparent 0 63%, #000 64%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.bg-curve-bottom-reverse::before {
  left: 50%;
  right: auto;
  bottom: calc(var(--curve-h) * -0.72);
  width: var(--curve-w);
  height: var(--curve-h);
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  -webkit-mask-image: none;
  mask-image: none;
}


/* ========================================================= Background bottom curve edge coverage fix
   - curve pseudo-element is wider than the parent so the white shape
     reaches both edges on wide screens;
   - --curve-x allows small horizontal shifting when the curve needs
     to be visually moved left/right.
   ========================================================= */
.bg-curve-bottom {
  --curve-w: 140%;
  --curve-x: 50%;
}

.bg-curve-bottom::before {
  left: var(--curve-x);
  right: auto;
  width: var(--curve-w);
  transform: translateX(-50%);
}

.bg-curve-left { --curve-x: 46%; }
.bg-curve-right { --curve-x: 54%; }


/* ========================================================= Background curve default color
   - .bg-curve-bottom now uses the page/body background by default.
   - Color modifiers like .bg-curve-surface still override it explicitly.
   ========================================================= */


/* ========================================================= Column span utilities
   - Allows a child item to span all columns or a specific number of columns.
   - Works with .grid, .grid-fixed and .flex-split when responsive .coll-* classes
     switch it to grid mode.
   - .span-*-full also works as a full-row flex item when the parent remains flex.
   ========================================================= */
.span-full {
  grid-column: 1 / -1 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: none !important;
}

.span-1 { grid-column: span 1 !important; }
.span-2 { grid-column: span 2 !important; }
.span-3 { grid-column: span 3 !important; }
.span-4 { grid-column: span 4 !important; }
.span-5 { grid-column: span 5 !important; }
.span-6 { grid-column: span 6 !important; }

@media (min-width: 1181px) {
  .span-desk-full {
    grid-column: 1 / -1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
  }

  .span-desk-1 { grid-column: span 1 !important; }
  .span-desk-2 { grid-column: span 2 !important; }
  .span-desk-3 { grid-column: span 3 !important; }
  .span-desk-4 { grid-column: span 4 !important; }
  .span-desk-5 { grid-column: span 5 !important; }
  .span-desk-6 { grid-column: span 6 !important; }
}

@media (max-width: 1180px) {
  .span-tab-full {
    grid-column: 1 / -1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
  }

  .span-tab-1 { grid-column: span 1 !important; }
  .span-tab-2 { grid-column: span 2 !important; }
  .span-tab-3 { grid-column: span 3 !important; }
  .span-tab-4 { grid-column: span 4 !important; }
  .span-tab-5 { grid-column: span 5 !important; }
  .span-tab-6 { grid-column: span 6 !important; }
}

@media (max-width: 768px) {
  .span-mob-full {
    grid-column: 1 / -1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
  }

  .span-mob-1 { grid-column: span 1 !important; }
  .span-mob-2 { grid-column: span 2 !important; }
  .span-mob-3 { grid-column: span 3 !important; }
  .span-mob-4 { grid-column: span 4 !important; }
  .span-mob-5 { grid-column: span 5 !important; }
  .span-mob-6 { grid-column: span 6 !important; }
}


/* ========================================================= Desktop page side spacing
   - tablet viewport returns to the previous default gutter scale;
   - desktop viewport gets the larger 64px side gutter;
   - mobile keeps the existing 18px gutter.
   ========================================================= */
@media (min-width: 769px) and (max-width: 1180px) {
  :root {
    --page-x: clamp(18px, 4vw, 32px);
  }
}

@media (min-width: 1181px) {
  :root {
    --page-x: 64px;
  }
}


/* ========================================================= FAQ block cleanup
   - FAQ styling existed already, but it had its own typography and padding.
   - FAQ CSS is now structural only.
   - Use existing utility classes in markup for font scale and spacing.
   ========================================================= */


/* ========================================================= Background curve seam fix
   - Slightly overlaps the curve layer below the section edge to avoid
     a 1px browser/subpixel seam on some screens.
   ========================================================= */
.bg-curve-bottom::before {
  bottom: -1px;
  height: calc(var(--curve-h) + 1px);
}



/* ========================================================= Global links
   - Links inherit the current text color.
   - Links have no underline by default.
   - Add .line or .underline when an underline is required.
   - Buttons and badges keep their own component styling.
   ========================================================= */
a:not(.btn):not(.badge) {
  color: currentColor;
  text-decoration: none;
}

a.line,
a.underline,
.content a.line,
.content a.underline {
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
}

a.line:hover,
a.underline:hover,
.content a.line:hover,
.content a.underline:hover {
  text-decoration-line: underline !important;
}


/* ========================================================= Complete margin utilities
   Aligns margin helpers with the existing padding scale.
   Adds m-*, my-* and completes mt/mb to --s-12; keeps mx/ml/mr behavior.
   ========================================================= */
.m-0 { margin: var(--s-0) !important; }
.mt-0 { margin-top: var(--s-0) !important; }
.mr-0 { margin-right: var(--s-0) !important; }
.mb-0 { margin-bottom: var(--s-0) !important; }
.ml-0 { margin-left: var(--s-0) !important; }
.mx-0 { margin-inline: var(--s-0) !important; }
.my-0 { margin-block: var(--s-0) !important; }
.m-1 { margin: var(--s-1) !important; }
.mt-1 { margin-top: var(--s-1) !important; }
.mr-1 { margin-right: var(--s-1) !important; }
.mb-1 { margin-bottom: var(--s-1) !important; }
.ml-1 { margin-left: var(--s-1) !important; }
.mx-1 { margin-inline: var(--s-1) !important; }
.my-1 { margin-block: var(--s-1) !important; }
.m-2 { margin: var(--s-2) !important; }
.mt-2 { margin-top: var(--s-2) !important; }
.mr-2 { margin-right: var(--s-2) !important; }
.mb-2 { margin-bottom: var(--s-2) !important; }
.ml-2 { margin-left: var(--s-2) !important; }
.mx-2 { margin-inline: var(--s-2) !important; }
.my-2 { margin-block: var(--s-2) !important; }
.m-3 { margin: var(--s-3) !important; }
.mt-3 { margin-top: var(--s-3) !important; }
.mr-3 { margin-right: var(--s-3) !important; }
.mb-3 { margin-bottom: var(--s-3) !important; }
.ml-3 { margin-left: var(--s-3) !important; }
.mx-3 { margin-inline: var(--s-3) !important; }
.my-3 { margin-block: var(--s-3) !important; }
.m-4 { margin: var(--s-4) !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mr-4 { margin-right: var(--s-4) !important; }
.mb-4 { margin-bottom: var(--s-4) !important; }
.ml-4 { margin-left: var(--s-4) !important; }
.mx-4 { margin-inline: var(--s-4) !important; }
.my-4 { margin-block: var(--s-4) !important; }
.m-5 { margin: var(--s-5) !important; }
.mt-5 { margin-top: var(--s-5) !important; }
.mr-5 { margin-right: var(--s-5) !important; }
.mb-5 { margin-bottom: var(--s-5) !important; }
.ml-5 { margin-left: var(--s-5) !important; }
.mx-5 { margin-inline: var(--s-5) !important; }
.my-5 { margin-block: var(--s-5) !important; }
.m-6 { margin: var(--s-6) !important; }
.mt-6 { margin-top: var(--s-6) !important; }
.mr-6 { margin-right: var(--s-6) !important; }
.mb-6 { margin-bottom: var(--s-6) !important; }
.ml-6 { margin-left: var(--s-6) !important; }
.mx-6 { margin-inline: var(--s-6) !important; }
.my-6 { margin-block: var(--s-6) !important; }
.m-7 { margin: var(--s-7) !important; }
.mt-7 { margin-top: var(--s-7) !important; }
.mr-7 { margin-right: var(--s-7) !important; }
.mb-7 { margin-bottom: var(--s-7) !important; }
.ml-7 { margin-left: var(--s-7) !important; }
.mx-7 { margin-inline: var(--s-7) !important; }
.my-7 { margin-block: var(--s-7) !important; }
.m-8 { margin: var(--s-8) !important; }
.mt-8 { margin-top: var(--s-8) !important; }
.mr-8 { margin-right: var(--s-8) !important; }
.mb-8 { margin-bottom: var(--s-8) !important; }
.ml-8 { margin-left: var(--s-8) !important; }
.mx-8 { margin-inline: var(--s-8) !important; }
.my-8 { margin-block: var(--s-8) !important; }
.m-9 { margin: var(--s-9) !important; }
.mt-9 { margin-top: var(--s-9) !important; }
.mr-9 { margin-right: var(--s-9) !important; }
.mb-9 { margin-bottom: var(--s-9) !important; }
.ml-9 { margin-left: var(--s-9) !important; }
.mx-9 { margin-inline: var(--s-9) !important; }
.my-9 { margin-block: var(--s-9) !important; }
.m-10 { margin: var(--s-10) !important; }
.mt-10 { margin-top: var(--s-10) !important; }
.mr-10 { margin-right: var(--s-10) !important; }
.mb-10 { margin-bottom: var(--s-10) !important; }
.ml-10 { margin-left: var(--s-10) !important; }
.mx-10 { margin-inline: var(--s-10) !important; }
.my-10 { margin-block: var(--s-10) !important; }
.m-11 { margin: var(--s-11) !important; }
.mt-11 { margin-top: var(--s-11) !important; }
.mr-11 { margin-right: var(--s-11) !important; }
.mb-11 { margin-bottom: var(--s-11) !important; }
.ml-11 { margin-left: var(--s-11) !important; }
.mx-11 { margin-inline: var(--s-11) !important; }
.my-11 { margin-block: var(--s-11) !important; }
.m-12 { margin: var(--s-12) !important; }
.mt-12 { margin-top: var(--s-12) !important; }
.mr-12 { margin-right: var(--s-12) !important; }
.mb-12 { margin-bottom: var(--s-12) !important; }
.ml-12 { margin-left: var(--s-12) !important; }
.mx-12 { margin-inline: var(--s-12) !important; }
.my-12 { margin-block: var(--s-12) !important; }

.m-auto { margin: auto !important; }
.mt-auto { margin-top: auto !important; }
.mr-auto { margin-right: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto { margin-left: auto !important; }
.mx-auto { margin-inline: auto !important; }
.my-auto { margin-block: auto !important; }

@media (min-width: 1181px) {
  .m-desk-0 { margin: var(--s-0) !important; }
  .mt-desk-0 { margin-top: var(--s-0) !important; }
  .mr-desk-0 { margin-right: var(--s-0) !important; }
  .mb-desk-0 { margin-bottom: var(--s-0) !important; }
  .ml-desk-0 { margin-left: var(--s-0) !important; }
  .mx-desk-0 { margin-inline: var(--s-0) !important; }
  .my-desk-0 { margin-block: var(--s-0) !important; }
  .m-desk-1 { margin: var(--s-1) !important; }
  .mt-desk-1 { margin-top: var(--s-1) !important; }
  .mr-desk-1 { margin-right: var(--s-1) !important; }
  .mb-desk-1 { margin-bottom: var(--s-1) !important; }
  .ml-desk-1 { margin-left: var(--s-1) !important; }
  .mx-desk-1 { margin-inline: var(--s-1) !important; }
  .my-desk-1 { margin-block: var(--s-1) !important; }
  .m-desk-2 { margin: var(--s-2) !important; }
  .mt-desk-2 { margin-top: var(--s-2) !important; }
  .mr-desk-2 { margin-right: var(--s-2) !important; }
  .mb-desk-2 { margin-bottom: var(--s-2) !important; }
  .ml-desk-2 { margin-left: var(--s-2) !important; }
  .mx-desk-2 { margin-inline: var(--s-2) !important; }
  .my-desk-2 { margin-block: var(--s-2) !important; }
  .m-desk-3 { margin: var(--s-3) !important; }
  .mt-desk-3 { margin-top: var(--s-3) !important; }
  .mr-desk-3 { margin-right: var(--s-3) !important; }
  .mb-desk-3 { margin-bottom: var(--s-3) !important; }
  .ml-desk-3 { margin-left: var(--s-3) !important; }
  .mx-desk-3 { margin-inline: var(--s-3) !important; }
  .my-desk-3 { margin-block: var(--s-3) !important; }
  .m-desk-4 { margin: var(--s-4) !important; }
  .mt-desk-4 { margin-top: var(--s-4) !important; }
  .mr-desk-4 { margin-right: var(--s-4) !important; }
  .mb-desk-4 { margin-bottom: var(--s-4) !important; }
  .ml-desk-4 { margin-left: var(--s-4) !important; }
  .mx-desk-4 { margin-inline: var(--s-4) !important; }
  .my-desk-4 { margin-block: var(--s-4) !important; }
  .m-desk-5 { margin: var(--s-5) !important; }
  .mt-desk-5 { margin-top: var(--s-5) !important; }
  .mr-desk-5 { margin-right: var(--s-5) !important; }
  .mb-desk-5 { margin-bottom: var(--s-5) !important; }
  .ml-desk-5 { margin-left: var(--s-5) !important; }
  .mx-desk-5 { margin-inline: var(--s-5) !important; }
  .my-desk-5 { margin-block: var(--s-5) !important; }
  .m-desk-6 { margin: var(--s-6) !important; }
  .mt-desk-6 { margin-top: var(--s-6) !important; }
  .mr-desk-6 { margin-right: var(--s-6) !important; }
  .mb-desk-6 { margin-bottom: var(--s-6) !important; }
  .ml-desk-6 { margin-left: var(--s-6) !important; }
  .mx-desk-6 { margin-inline: var(--s-6) !important; }
  .my-desk-6 { margin-block: var(--s-6) !important; }
  .m-desk-7 { margin: var(--s-7) !important; }
  .mt-desk-7 { margin-top: var(--s-7) !important; }
  .mr-desk-7 { margin-right: var(--s-7) !important; }
  .mb-desk-7 { margin-bottom: var(--s-7) !important; }
  .ml-desk-7 { margin-left: var(--s-7) !important; }
  .mx-desk-7 { margin-inline: var(--s-7) !important; }
  .my-desk-7 { margin-block: var(--s-7) !important; }
  .m-desk-8 { margin: var(--s-8) !important; }
  .mt-desk-8 { margin-top: var(--s-8) !important; }
  .mr-desk-8 { margin-right: var(--s-8) !important; }
  .mb-desk-8 { margin-bottom: var(--s-8) !important; }
  .ml-desk-8 { margin-left: var(--s-8) !important; }
  .mx-desk-8 { margin-inline: var(--s-8) !important; }
  .my-desk-8 { margin-block: var(--s-8) !important; }
  .m-desk-9 { margin: var(--s-9) !important; }
  .mt-desk-9 { margin-top: var(--s-9) !important; }
  .mr-desk-9 { margin-right: var(--s-9) !important; }
  .mb-desk-9 { margin-bottom: var(--s-9) !important; }
  .ml-desk-9 { margin-left: var(--s-9) !important; }
  .mx-desk-9 { margin-inline: var(--s-9) !important; }
  .my-desk-9 { margin-block: var(--s-9) !important; }
  .m-desk-10 { margin: var(--s-10) !important; }
  .mt-desk-10 { margin-top: var(--s-10) !important; }
  .mr-desk-10 { margin-right: var(--s-10) !important; }
  .mb-desk-10 { margin-bottom: var(--s-10) !important; }
  .ml-desk-10 { margin-left: var(--s-10) !important; }
  .mx-desk-10 { margin-inline: var(--s-10) !important; }
  .my-desk-10 { margin-block: var(--s-10) !important; }
  .m-desk-11 { margin: var(--s-11) !important; }
  .mt-desk-11 { margin-top: var(--s-11) !important; }
  .mr-desk-11 { margin-right: var(--s-11) !important; }
  .mb-desk-11 { margin-bottom: var(--s-11) !important; }
  .ml-desk-11 { margin-left: var(--s-11) !important; }
  .mx-desk-11 { margin-inline: var(--s-11) !important; }
  .my-desk-11 { margin-block: var(--s-11) !important; }
  .m-desk-12 { margin: var(--s-12) !important; }
  .mt-desk-12 { margin-top: var(--s-12) !important; }
  .mr-desk-12 { margin-right: var(--s-12) !important; }
  .mb-desk-12 { margin-bottom: var(--s-12) !important; }
  .ml-desk-12 { margin-left: var(--s-12) !important; }
  .mx-desk-12 { margin-inline: var(--s-12) !important; }
  .my-desk-12 { margin-block: var(--s-12) !important; }
  .m-desk-auto { margin: auto !important; }
  .mt-desk-auto { margin-top: auto !important; }
  .mr-desk-auto { margin-right: auto !important; }
  .mb-desk-auto { margin-bottom: auto !important; }
  .ml-desk-auto { margin-left: auto !important; }
  .mx-desk-auto { margin-inline: auto !important; }
  .my-desk-auto { margin-block: auto !important; }
}

@media (max-width: 1180px) {
  .m-tab-0 { margin: var(--s-0) !important; }
  .mt-tab-0 { margin-top: var(--s-0) !important; }
  .mr-tab-0 { margin-right: var(--s-0) !important; }
  .mb-tab-0 { margin-bottom: var(--s-0) !important; }
  .ml-tab-0 { margin-left: var(--s-0) !important; }
  .mx-tab-0 { margin-inline: var(--s-0) !important; }
  .my-tab-0 { margin-block: var(--s-0) !important; }
  .m-tab-1 { margin: var(--s-1) !important; }
  .mt-tab-1 { margin-top: var(--s-1) !important; }
  .mr-tab-1 { margin-right: var(--s-1) !important; }
  .mb-tab-1 { margin-bottom: var(--s-1) !important; }
  .ml-tab-1 { margin-left: var(--s-1) !important; }
  .mx-tab-1 { margin-inline: var(--s-1) !important; }
  .my-tab-1 { margin-block: var(--s-1) !important; }
  .m-tab-2 { margin: var(--s-2) !important; }
  .mt-tab-2 { margin-top: var(--s-2) !important; }
  .mr-tab-2 { margin-right: var(--s-2) !important; }
  .mb-tab-2 { margin-bottom: var(--s-2) !important; }
  .ml-tab-2 { margin-left: var(--s-2) !important; }
  .mx-tab-2 { margin-inline: var(--s-2) !important; }
  .my-tab-2 { margin-block: var(--s-2) !important; }
  .m-tab-3 { margin: var(--s-3) !important; }
  .mt-tab-3 { margin-top: var(--s-3) !important; }
  .mr-tab-3 { margin-right: var(--s-3) !important; }
  .mb-tab-3 { margin-bottom: var(--s-3) !important; }
  .ml-tab-3 { margin-left: var(--s-3) !important; }
  .mx-tab-3 { margin-inline: var(--s-3) !important; }
  .my-tab-3 { margin-block: var(--s-3) !important; }
  .m-tab-4 { margin: var(--s-4) !important; }
  .mt-tab-4 { margin-top: var(--s-4) !important; }
  .mr-tab-4 { margin-right: var(--s-4) !important; }
  .mb-tab-4 { margin-bottom: var(--s-4) !important; }
  .ml-tab-4 { margin-left: var(--s-4) !important; }
  .mx-tab-4 { margin-inline: var(--s-4) !important; }
  .my-tab-4 { margin-block: var(--s-4) !important; }
  .m-tab-5 { margin: var(--s-5) !important; }
  .mt-tab-5 { margin-top: var(--s-5) !important; }
  .mr-tab-5 { margin-right: var(--s-5) !important; }
  .mb-tab-5 { margin-bottom: var(--s-5) !important; }
  .ml-tab-5 { margin-left: var(--s-5) !important; }
  .mx-tab-5 { margin-inline: var(--s-5) !important; }
  .my-tab-5 { margin-block: var(--s-5) !important; }
  .m-tab-6 { margin: var(--s-6) !important; }
  .mt-tab-6 { margin-top: var(--s-6) !important; }
  .mr-tab-6 { margin-right: var(--s-6) !important; }
  .mb-tab-6 { margin-bottom: var(--s-6) !important; }
  .ml-tab-6 { margin-left: var(--s-6) !important; }
  .mx-tab-6 { margin-inline: var(--s-6) !important; }
  .my-tab-6 { margin-block: var(--s-6) !important; }
  .m-tab-7 { margin: var(--s-7) !important; }
  .mt-tab-7 { margin-top: var(--s-7) !important; }
  .mr-tab-7 { margin-right: var(--s-7) !important; }
  .mb-tab-7 { margin-bottom: var(--s-7) !important; }
  .ml-tab-7 { margin-left: var(--s-7) !important; }
  .mx-tab-7 { margin-inline: var(--s-7) !important; }
  .my-tab-7 { margin-block: var(--s-7) !important; }
  .m-tab-8 { margin: var(--s-8) !important; }
  .mt-tab-8 { margin-top: var(--s-8) !important; }
  .mr-tab-8 { margin-right: var(--s-8) !important; }
  .mb-tab-8 { margin-bottom: var(--s-8) !important; }
  .ml-tab-8 { margin-left: var(--s-8) !important; }
  .mx-tab-8 { margin-inline: var(--s-8) !important; }
  .my-tab-8 { margin-block: var(--s-8) !important; }
  .m-tab-9 { margin: var(--s-9) !important; }
  .mt-tab-9 { margin-top: var(--s-9) !important; }
  .mr-tab-9 { margin-right: var(--s-9) !important; }
  .mb-tab-9 { margin-bottom: var(--s-9) !important; }
  .ml-tab-9 { margin-left: var(--s-9) !important; }
  .mx-tab-9 { margin-inline: var(--s-9) !important; }
  .my-tab-9 { margin-block: var(--s-9) !important; }
  .m-tab-10 { margin: var(--s-10) !important; }
  .mt-tab-10 { margin-top: var(--s-10) !important; }
  .mr-tab-10 { margin-right: var(--s-10) !important; }
  .mb-tab-10 { margin-bottom: var(--s-10) !important; }
  .ml-tab-10 { margin-left: var(--s-10) !important; }
  .mx-tab-10 { margin-inline: var(--s-10) !important; }
  .my-tab-10 { margin-block: var(--s-10) !important; }
  .m-tab-11 { margin: var(--s-11) !important; }
  .mt-tab-11 { margin-top: var(--s-11) !important; }
  .mr-tab-11 { margin-right: var(--s-11) !important; }
  .mb-tab-11 { margin-bottom: var(--s-11) !important; }
  .ml-tab-11 { margin-left: var(--s-11) !important; }
  .mx-tab-11 { margin-inline: var(--s-11) !important; }
  .my-tab-11 { margin-block: var(--s-11) !important; }
  .m-tab-12 { margin: var(--s-12) !important; }
  .mt-tab-12 { margin-top: var(--s-12) !important; }
  .mr-tab-12 { margin-right: var(--s-12) !important; }
  .mb-tab-12 { margin-bottom: var(--s-12) !important; }
  .ml-tab-12 { margin-left: var(--s-12) !important; }
  .mx-tab-12 { margin-inline: var(--s-12) !important; }
  .my-tab-12 { margin-block: var(--s-12) !important; }
  .m-tab-auto { margin: auto !important; }
  .mt-tab-auto { margin-top: auto !important; }
  .mr-tab-auto { margin-right: auto !important; }
  .mb-tab-auto { margin-bottom: auto !important; }
  .ml-tab-auto { margin-left: auto !important; }
  .mx-tab-auto { margin-inline: auto !important; }
  .my-tab-auto { margin-block: auto !important; }
}

@media (max-width: 768px) {
  .m-mob-0 { margin: var(--s-0) !important; }
  .mt-mob-0 { margin-top: var(--s-0) !important; }
  .mr-mob-0 { margin-right: var(--s-0) !important; }
  .mb-mob-0 { margin-bottom: var(--s-0) !important; }
  .ml-mob-0 { margin-left: var(--s-0) !important; }
  .mx-mob-0 { margin-inline: var(--s-0) !important; }
  .my-mob-0 { margin-block: var(--s-0) !important; }
  .m-mob-1 { margin: var(--s-1) !important; }
  .mt-mob-1 { margin-top: var(--s-1) !important; }
  .mr-mob-1 { margin-right: var(--s-1) !important; }
  .mb-mob-1 { margin-bottom: var(--s-1) !important; }
  .ml-mob-1 { margin-left: var(--s-1) !important; }
  .mx-mob-1 { margin-inline: var(--s-1) !important; }
  .my-mob-1 { margin-block: var(--s-1) !important; }
  .m-mob-2 { margin: var(--s-2) !important; }
  .mt-mob-2 { margin-top: var(--s-2) !important; }
  .mr-mob-2 { margin-right: var(--s-2) !important; }
  .mb-mob-2 { margin-bottom: var(--s-2) !important; }
  .ml-mob-2 { margin-left: var(--s-2) !important; }
  .mx-mob-2 { margin-inline: var(--s-2) !important; }
  .my-mob-2 { margin-block: var(--s-2) !important; }
  .m-mob-3 { margin: var(--s-3) !important; }
  .mt-mob-3 { margin-top: var(--s-3) !important; }
  .mr-mob-3 { margin-right: var(--s-3) !important; }
  .mb-mob-3 { margin-bottom: var(--s-3) !important; }
  .ml-mob-3 { margin-left: var(--s-3) !important; }
  .mx-mob-3 { margin-inline: var(--s-3) !important; }
  .my-mob-3 { margin-block: var(--s-3) !important; }
  .m-mob-4 { margin: var(--s-4) !important; }
  .mt-mob-4 { margin-top: var(--s-4) !important; }
  .mr-mob-4 { margin-right: var(--s-4) !important; }
  .mb-mob-4 { margin-bottom: var(--s-4) !important; }
  .ml-mob-4 { margin-left: var(--s-4) !important; }
  .mx-mob-4 { margin-inline: var(--s-4) !important; }
  .my-mob-4 { margin-block: var(--s-4) !important; }
  .m-mob-5 { margin: var(--s-5) !important; }
  .mt-mob-5 { margin-top: var(--s-5) !important; }
  .mr-mob-5 { margin-right: var(--s-5) !important; }
  .mb-mob-5 { margin-bottom: var(--s-5) !important; }
  .ml-mob-5 { margin-left: var(--s-5) !important; }
  .mx-mob-5 { margin-inline: var(--s-5) !important; }
  .my-mob-5 { margin-block: var(--s-5) !important; }
  .m-mob-6 { margin: var(--s-6) !important; }
  .mt-mob-6 { margin-top: var(--s-6) !important; }
  .mr-mob-6 { margin-right: var(--s-6) !important; }
  .mb-mob-6 { margin-bottom: var(--s-6) !important; }
  .ml-mob-6 { margin-left: var(--s-6) !important; }
  .mx-mob-6 { margin-inline: var(--s-6) !important; }
  .my-mob-6 { margin-block: var(--s-6) !important; }
  .m-mob-7 { margin: var(--s-7) !important; }
  .mt-mob-7 { margin-top: var(--s-7) !important; }
  .mr-mob-7 { margin-right: var(--s-7) !important; }
  .mb-mob-7 { margin-bottom: var(--s-7) !important; }
  .ml-mob-7 { margin-left: var(--s-7) !important; }
  .mx-mob-7 { margin-inline: var(--s-7) !important; }
  .my-mob-7 { margin-block: var(--s-7) !important; }
  .m-mob-8 { margin: var(--s-8) !important; }
  .mt-mob-8 { margin-top: var(--s-8) !important; }
  .mr-mob-8 { margin-right: var(--s-8) !important; }
  .mb-mob-8 { margin-bottom: var(--s-8) !important; }
  .ml-mob-8 { margin-left: var(--s-8) !important; }
  .mx-mob-8 { margin-inline: var(--s-8) !important; }
  .my-mob-8 { margin-block: var(--s-8) !important; }
  .m-mob-9 { margin: var(--s-9) !important; }
  .mt-mob-9 { margin-top: var(--s-9) !important; }
  .mr-mob-9 { margin-right: var(--s-9) !important; }
  .mb-mob-9 { margin-bottom: var(--s-9) !important; }
  .ml-mob-9 { margin-left: var(--s-9) !important; }
  .mx-mob-9 { margin-inline: var(--s-9) !important; }
  .my-mob-9 { margin-block: var(--s-9) !important; }
  .m-mob-10 { margin: var(--s-10) !important; }
  .mt-mob-10 { margin-top: var(--s-10) !important; }
  .mr-mob-10 { margin-right: var(--s-10) !important; }
  .mb-mob-10 { margin-bottom: var(--s-10) !important; }
  .ml-mob-10 { margin-left: var(--s-10) !important; }
  .mx-mob-10 { margin-inline: var(--s-10) !important; }
  .my-mob-10 { margin-block: var(--s-10) !important; }
  .m-mob-11 { margin: var(--s-11) !important; }
  .mt-mob-11 { margin-top: var(--s-11) !important; }
  .mr-mob-11 { margin-right: var(--s-11) !important; }
  .mb-mob-11 { margin-bottom: var(--s-11) !important; }
  .ml-mob-11 { margin-left: var(--s-11) !important; }
  .mx-mob-11 { margin-inline: var(--s-11) !important; }
  .my-mob-11 { margin-block: var(--s-11) !important; }
  .m-mob-12 { margin: var(--s-12) !important; }
  .mt-mob-12 { margin-top: var(--s-12) !important; }
  .mr-mob-12 { margin-right: var(--s-12) !important; }
  .mb-mob-12 { margin-bottom: var(--s-12) !important; }
  .ml-mob-12 { margin-left: var(--s-12) !important; }
  .mx-mob-12 { margin-inline: var(--s-12) !important; }
  .my-mob-12 { margin-block: var(--s-12) !important; }
  .m-mob-auto { margin: auto !important; }
  .mt-mob-auto { margin-top: auto !important; }
  .mr-mob-auto { margin-right: auto !important; }
  .mb-mob-auto { margin-bottom: auto !important; }
  .ml-mob-auto { margin-left: auto !important; }
  .mx-mob-auto { margin-inline: auto !important; }
  .my-mob-auto { margin-block: auto !important; }
}

/* ========================================================= Global native form controls
   Text-like input, select and textarea now receive the VEHA field style
   globally when module markup has no .input/.select/.textarea.
   Checkbox, radio, submit, button, file, hidden and other special controls
   are intentionally not targeted.
   ========================================================= */
.input,
.select,
.textarea,
:where(
  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"]
),
select,
textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-16);
  line-height: 1.35;
  text-align: left;
  transition: border-color var(--tr), box-shadow var(--tr), background-color var(--tr);
}

.input,
.select,
:where(
  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"]
),
select {
  height: 48px;
}

.textarea,
textarea {
  min-height: 130px;
  resize: vertical;
}

.input:hover,
.select:hover,
.textarea:hover,
:where(
  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"]
):hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--c-border), var(--c-text) 25%);
}

.input:focus,
.select:focus,
.textarea:focus,
:where(
  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"]
):focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(255, 99, 71, .16);
}

.select,
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-muted) 50%),
    linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* =========================================================
   48. Timeline horizontal
   Use: <ol class="timeline timeline-horizontal"> ... </ol>
   Desktop: horizontal timeline. Mobile: returns to vertical timeline.
   ========================================================= */
ol.timeline.timeline-horizontal,
.timeline.timeline-horizontal {
  --timeline-h-circle: 34px;
  --timeline-h-gap: var(--s-5);
  --timeline-line-y: calc(var(--timeline-h-circle) / 2);

  display: flex;
  gap: var(--grid-gap);
  align-items: stretch;
  padding: calc(var(--timeline-h-circle) + var(--timeline-h-gap)) 0 0;
}

ol.timeline.timeline-horizontal::before,
.timeline.timeline-horizontal::before {
  top: var(--timeline-line-y);
  right: 0;
  bottom: auto;
  left: 0;
  width: auto;
  height: 3px;
}

ol.timeline.timeline-horizontal > li,
.timeline.timeline-horizontal > li {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: var(--s-4) var(--s-5);
}

ol.timeline.timeline-horizontal > li::before,
.timeline.timeline-horizontal > li::before {
  top: calc((var(--timeline-h-circle) + var(--timeline-h-gap)) * -1);
  left: 50%;
  width: var(--timeline-h-circle);
  height: var(--timeline-h-circle);
  transform: translateX(-50%);
}

ol.timeline.timeline-horizontal > li::after,
.timeline.timeline-horizontal > li::after {
  top: -9px;
  left: 50%;
  width: 0;
  height: 0;
  border: 0;
  border-right: 9px solid transparent;
  border-bottom: 9px solid var(--timeline-li-bg);
  border-left: 9px solid transparent;
  transform: translateX(-50%);
}

@media (max-width: 768px) {
  ol.timeline.timeline-horizontal,
  .timeline.timeline-horizontal {
    display: block;
    padding: var(--s-3) 0 0 var(--s-5);
  }

  ol.timeline.timeline-horizontal::before,
  .timeline.timeline-horizontal::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: var(--timeline-line-x);
    width: 3px;
    height: auto;
  }

  ol.timeline.timeline-horizontal > li,
  .timeline.timeline-horizontal > li {
    margin: 0 0 var(--s-4) var(--s-4);
    padding: var(--s-4);
  }

  ol.timeline.timeline-horizontal > li:last-child,
  .timeline.timeline-horizontal > li:last-child {
    margin-bottom: 0;
  }

  ol.timeline.timeline-horizontal > li::before,
  .timeline.timeline-horizontal > li::before {
    top: var(--s-3);
    left: -42px;
    width: 30px;
    height: 30px;
    transform: none;
  }

  ol.timeline.timeline-horizontal > li::after,
  .timeline.timeline-horizontal > li::after {
    top: calc(var(--s-3) + 7px);
    left: -9px;
    border: 0;
    border-top: 9px solid transparent;
    border-right: 9px solid var(--timeline-li-bg);
    border-bottom: 9px solid transparent;
    border-left: 0;
    transform: none;
  }
}



/* =========================================================
   49. Text alignment utilities
   Normalized base/responsive text alignment helpers.
   - Base: .t-left / .t-center / .t-right / .t-justify
   - Desktop: .t-desk-* and alias .t-desc-*
   - Tablet: .t-tab-*
   - Mobile: .t-mob-*
   ========================================================= */
.t-left { text-align: left !important; }
.t-center { text-align: center !important; }
.t-right { text-align: right !important; }
.t-justify { text-align: justify !important; }

@media (min-width: 1181px) {
  .t-desk-left,
  .t-desc-left { text-align: left !important; }

  .t-desk-center,
  .t-desc-center { text-align: center !important; }

  .t-desk-right,
  .t-desc-right { text-align: right !important; }

  .t-desk-justify,
  .t-desc-justify { text-align: justify !important; }
}

@media (max-width: 1180px) {
  .t-tab-left { text-align: left !important; }
  .t-tab-center { text-align: center !important; }
  .t-tab-right { text-align: right !important; }
  .t-tab-justify { text-align: justify !important; }
}

@media (max-width: 768px) {
  .t-mob-left { text-align: left !important; }
  .t-mob-center { text-align: center !important; }
  .t-mob-right { text-align: right !important; }
  .t-mob-justify { text-align: justify !important; }
}

/* =========================================================
   50. Responsive typography size utilities
   Use these as breakpoint overrides on top of base typography classes.
   Example: class="t-h1 t-desc-hero t-tab-h2 t-mob-h4".
   Full set: display, hero, h1, h2, h3, h4, h5, h6, lead, body, small, caption.
   ========================================================= */
@media (min-width: 1181px) {
  .t-desk-display,
  .t-desc-display {
    font-size: var(--fs-72) !important;
    line-height: var(--lh-tight) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: -.05em !important;
  }

  .t-desk-hero,
  .t-desc-hero {
    font-size: var(--fs-52) !important;
    line-height: var(--lh-tight) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: -.04em !important;
  }

  .t-desk-h1,
  .t-desc-h1 {
    font-size: var(--fs-36) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: -.03em !important;
  }

  .t-desk-h2,
  .t-desc-h2 {
    font-size: var(--fs-28) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: -.02em !important;
  }

  .t-desk-h3,
  .t-desc-h3 {
    font-size: var(--fs-22) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0 !important;
  }

  .t-desk-h4,
  .t-desc-h4 {
    font-size: var(--fs-18) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0 !important;
  }

  .t-desk-h5,
  .t-desc-h5 {
    font-size: var(--fs-16) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0 !important;
  }

  .t-desk-h6,
  .t-desc-h6 {
    font-size: var(--fs-14) !important;
    line-height: 1.35 !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: .02em !important;
  }

  .t-desk-lead,
  .t-desc-lead {
    font-size: var(--fs-18) !important;
    line-height: var(--lh-body) !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: 0 !important;
    color: var(--c-text-soft) !important;
  }

  .t-desk-body,
  .t-desc-body {
    font-size: var(--fs-16) !important;
    line-height: var(--lh-body) !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: 0 !important;
  }

  .t-desk-small,
  .t-desc-small {
    font-size: var(--fs-12) !important;
    line-height: 1.5 !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: 0 !important;
  }

  .t-desk-caption,
  .t-desc-caption {
    font-size: var(--fs-12) !important;
    line-height: 1.45 !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: var(--c-muted) !important;
  }
}

@media (max-width: 1180px) {
  .t-tab-display {
    font-size: var(--fs-72) !important;
    line-height: var(--lh-tight) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: -.05em !important;
  }

  .t-tab-hero {
    font-size: var(--fs-52) !important;
    line-height: var(--lh-tight) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: -.04em !important;
  }

  .t-tab-h1 {
    font-size: var(--fs-36) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: -.03em !important;
  }

  .t-tab-h2 {
    font-size: var(--fs-28) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: -.02em !important;
  }

  .t-tab-h3 {
    font-size: var(--fs-22) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0 !important;
  }

  .t-tab-h4 {
    font-size: var(--fs-18) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0 !important;
  }

  .t-tab-h5 {
    font-size: var(--fs-16) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0 !important;
  }

  .t-tab-h6 {
    font-size: var(--fs-14) !important;
    line-height: 1.35 !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: .02em !important;
  }

  .t-tab-lead {
    font-size: var(--fs-18) !important;
    line-height: var(--lh-body) !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: 0 !important;
    color: var(--c-text-soft) !important;
  }

  .t-tab-body {
    font-size: var(--fs-16) !important;
    line-height: var(--lh-body) !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: 0 !important;
  }

  .t-tab-small {
    font-size: var(--fs-12) !important;
    line-height: 1.5 !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: 0 !important;
  }

  .t-tab-caption {
    font-size: var(--fs-12) !important;
    line-height: 1.45 !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: var(--c-muted) !important;
  }
}

@media (max-width: 768px) {
  .t-mob-display {
    font-size: var(--fs-72) !important;
    line-height: var(--lh-tight) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: -.05em !important;
  }

  .t-mob-hero {
    font-size: var(--fs-52) !important;
    line-height: var(--lh-tight) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: -.04em !important;
  }

  .t-mob-h1 {
    font-size: var(--fs-36) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: -.03em !important;
  }

  .t-mob-h2 {
    font-size: var(--fs-28) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: -.02em !important;
  }

  .t-mob-h3 {
    font-size: var(--fs-22) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0 !important;
  }

  .t-mob-h4 {
    font-size: var(--fs-18) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0 !important;
  }

  .t-mob-h5 {
    font-size: var(--fs-16) !important;
    line-height: var(--lh-title) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0 !important;
  }

  .t-mob-h6 {
    font-size: var(--fs-14) !important;
    line-height: 1.35 !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: .02em !important;
  }

  .t-mob-lead {
    font-size: var(--fs-18) !important;
    line-height: var(--lh-body) !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: 0 !important;
    color: var(--c-text-soft) !important;
  }

  .t-mob-body {
    font-size: var(--fs-16) !important;
    line-height: var(--lh-body) !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: 0 !important;
  }

  .t-mob-small {
    font-size: var(--fs-12) !important;
    line-height: 1.5 !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: 0 !important;
  }

  .t-mob-caption {
    font-size: var(--fs-12) !important;
    line-height: 1.45 !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: var(--c-muted) !important;
  }
}

/* =========================================================
   51. Responsive visibility utilities
   Complete hide helpers by breakpoint.
   - .desk-hide / .desc-hide: hidden on desktop only.
   - .tab-hide: hidden on tablet only.
   - .mob-hide: hidden on mobile only.
   ========================================================= */
@media (min-width: 1181px) {
  .desk-hide,
  .desc-hide {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .tab-hide {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .mob-hide {
    display: none !important;
  }
}



/* =========================================================
   66. Complete responsive spacing utilities
   Full per-side margin and padding controls for desktop/tablet/mobile.
   Pattern: .pb-mob-4, .pr-tab-6, .ml-desk-8, .px-desc-7.
   Desktop alias: desc = desk.
   ========================================================= */

@media (min-width: 1181px) {
  .m-desk-0 { margin: var(--s-0) !important; }
  .mt-desk-0 { margin-top: var(--s-0) !important; }
  .mr-desk-0 { margin-right: var(--s-0) !important; }
  .mb-desk-0 { margin-bottom: var(--s-0) !important; }
  .ml-desk-0 { margin-left: var(--s-0) !important; }
  .mx-desk-0 { margin-inline: var(--s-0) !important; }
  .my-desk-0 { margin-block: var(--s-0) !important; }
  .p-desk-0 { padding: var(--s-0) !important; }
  .pt-desk-0 { padding-top: var(--s-0) !important; }
  .pr-desk-0 { padding-right: var(--s-0) !important; }
  .pb-desk-0 { padding-bottom: var(--s-0) !important; }
  .pl-desk-0 { padding-left: var(--s-0) !important; }
  .px-desk-0 { padding-inline: var(--s-0) !important; }
  .py-desk-0 { padding-block: var(--s-0) !important; }
  .gap-desk-0 { gap: var(--s-0) !important; }
  .m-desk-1 { margin: var(--s-1) !important; }
  .mt-desk-1 { margin-top: var(--s-1) !important; }
  .mr-desk-1 { margin-right: var(--s-1) !important; }
  .mb-desk-1 { margin-bottom: var(--s-1) !important; }
  .ml-desk-1 { margin-left: var(--s-1) !important; }
  .mx-desk-1 { margin-inline: var(--s-1) !important; }
  .my-desk-1 { margin-block: var(--s-1) !important; }
  .p-desk-1 { padding: var(--s-1) !important; }
  .pt-desk-1 { padding-top: var(--s-1) !important; }
  .pr-desk-1 { padding-right: var(--s-1) !important; }
  .pb-desk-1 { padding-bottom: var(--s-1) !important; }
  .pl-desk-1 { padding-left: var(--s-1) !important; }
  .px-desk-1 { padding-inline: var(--s-1) !important; }
  .py-desk-1 { padding-block: var(--s-1) !important; }
  .gap-desk-1 { gap: var(--s-1) !important; }
  .m-desk-2 { margin: var(--s-2) !important; }
  .mt-desk-2 { margin-top: var(--s-2) !important; }
  .mr-desk-2 { margin-right: var(--s-2) !important; }
  .mb-desk-2 { margin-bottom: var(--s-2) !important; }
  .ml-desk-2 { margin-left: var(--s-2) !important; }
  .mx-desk-2 { margin-inline: var(--s-2) !important; }
  .my-desk-2 { margin-block: var(--s-2) !important; }
  .p-desk-2 { padding: var(--s-2) !important; }
  .pt-desk-2 { padding-top: var(--s-2) !important; }
  .pr-desk-2 { padding-right: var(--s-2) !important; }
  .pb-desk-2 { padding-bottom: var(--s-2) !important; }
  .pl-desk-2 { padding-left: var(--s-2) !important; }
  .px-desk-2 { padding-inline: var(--s-2) !important; }
  .py-desk-2 { padding-block: var(--s-2) !important; }
  .gap-desk-2 { gap: var(--s-2) !important; }
  .m-desk-3 { margin: var(--s-3) !important; }
  .mt-desk-3 { margin-top: var(--s-3) !important; }
  .mr-desk-3 { margin-right: var(--s-3) !important; }
  .mb-desk-3 { margin-bottom: var(--s-3) !important; }
  .ml-desk-3 { margin-left: var(--s-3) !important; }
  .mx-desk-3 { margin-inline: var(--s-3) !important; }
  .my-desk-3 { margin-block: var(--s-3) !important; }
  .p-desk-3 { padding: var(--s-3) !important; }
  .pt-desk-3 { padding-top: var(--s-3) !important; }
  .pr-desk-3 { padding-right: var(--s-3) !important; }
  .pb-desk-3 { padding-bottom: var(--s-3) !important; }
  .pl-desk-3 { padding-left: var(--s-3) !important; }
  .px-desk-3 { padding-inline: var(--s-3) !important; }
  .py-desk-3 { padding-block: var(--s-3) !important; }
  .gap-desk-3 { gap: var(--s-3) !important; }
  .m-desk-4 { margin: var(--s-4) !important; }
  .mt-desk-4 { margin-top: var(--s-4) !important; }
  .mr-desk-4 { margin-right: var(--s-4) !important; }
  .mb-desk-4 { margin-bottom: var(--s-4) !important; }
  .ml-desk-4 { margin-left: var(--s-4) !important; }
  .mx-desk-4 { margin-inline: var(--s-4) !important; }
  .my-desk-4 { margin-block: var(--s-4) !important; }
  .p-desk-4 { padding: var(--s-4) !important; }
  .pt-desk-4 { padding-top: var(--s-4) !important; }
  .pr-desk-4 { padding-right: var(--s-4) !important; }
  .pb-desk-4 { padding-bottom: var(--s-4) !important; }
  .pl-desk-4 { padding-left: var(--s-4) !important; }
  .px-desk-4 { padding-inline: var(--s-4) !important; }
  .py-desk-4 { padding-block: var(--s-4) !important; }
  .gap-desk-4 { gap: var(--s-4) !important; }
  .m-desk-5 { margin: var(--s-5) !important; }
  .mt-desk-5 { margin-top: var(--s-5) !important; }
  .mr-desk-5 { margin-right: var(--s-5) !important; }
  .mb-desk-5 { margin-bottom: var(--s-5) !important; }
  .ml-desk-5 { margin-left: var(--s-5) !important; }
  .mx-desk-5 { margin-inline: var(--s-5) !important; }
  .my-desk-5 { margin-block: var(--s-5) !important; }
  .p-desk-5 { padding: var(--s-5) !important; }
  .pt-desk-5 { padding-top: var(--s-5) !important; }
  .pr-desk-5 { padding-right: var(--s-5) !important; }
  .pb-desk-5 { padding-bottom: var(--s-5) !important; }
  .pl-desk-5 { padding-left: var(--s-5) !important; }
  .px-desk-5 { padding-inline: var(--s-5) !important; }
  .py-desk-5 { padding-block: var(--s-5) !important; }
  .gap-desk-5 { gap: var(--s-5) !important; }
  .m-desk-6 { margin: var(--s-6) !important; }
  .mt-desk-6 { margin-top: var(--s-6) !important; }
  .mr-desk-6 { margin-right: var(--s-6) !important; }
  .mb-desk-6 { margin-bottom: var(--s-6) !important; }
  .ml-desk-6 { margin-left: var(--s-6) !important; }
  .mx-desk-6 { margin-inline: var(--s-6) !important; }
  .my-desk-6 { margin-block: var(--s-6) !important; }
  .p-desk-6 { padding: var(--s-6) !important; }
  .pt-desk-6 { padding-top: var(--s-6) !important; }
  .pr-desk-6 { padding-right: var(--s-6) !important; }
  .pb-desk-6 { padding-bottom: var(--s-6) !important; }
  .pl-desk-6 { padding-left: var(--s-6) !important; }
  .px-desk-6 { padding-inline: var(--s-6) !important; }
  .py-desk-6 { padding-block: var(--s-6) !important; }
  .gap-desk-6 { gap: var(--s-6) !important; }
  .m-desk-7 { margin: var(--s-7) !important; }
  .mt-desk-7 { margin-top: var(--s-7) !important; }
  .mr-desk-7 { margin-right: var(--s-7) !important; }
  .mb-desk-7 { margin-bottom: var(--s-7) !important; }
  .ml-desk-7 { margin-left: var(--s-7) !important; }
  .mx-desk-7 { margin-inline: var(--s-7) !important; }
  .my-desk-7 { margin-block: var(--s-7) !important; }
  .p-desk-7 { padding: var(--s-7) !important; }
  .pt-desk-7 { padding-top: var(--s-7) !important; }
  .pr-desk-7 { padding-right: var(--s-7) !important; }
  .pb-desk-7 { padding-bottom: var(--s-7) !important; }
  .pl-desk-7 { padding-left: var(--s-7) !important; }
  .px-desk-7 { padding-inline: var(--s-7) !important; }
  .py-desk-7 { padding-block: var(--s-7) !important; }
  .gap-desk-7 { gap: var(--s-7) !important; }
  .m-desk-8 { margin: var(--s-8) !important; }
  .mt-desk-8 { margin-top: var(--s-8) !important; }
  .mr-desk-8 { margin-right: var(--s-8) !important; }
  .mb-desk-8 { margin-bottom: var(--s-8) !important; }
  .ml-desk-8 { margin-left: var(--s-8) !important; }
  .mx-desk-8 { margin-inline: var(--s-8) !important; }
  .my-desk-8 { margin-block: var(--s-8) !important; }
  .p-desk-8 { padding: var(--s-8) !important; }
  .pt-desk-8 { padding-top: var(--s-8) !important; }
  .pr-desk-8 { padding-right: var(--s-8) !important; }
  .pb-desk-8 { padding-bottom: var(--s-8) !important; }
  .pl-desk-8 { padding-left: var(--s-8) !important; }
  .px-desk-8 { padding-inline: var(--s-8) !important; }
  .py-desk-8 { padding-block: var(--s-8) !important; }
  .gap-desk-8 { gap: var(--s-8) !important; }
  .m-desk-9 { margin: var(--s-9) !important; }
  .mt-desk-9 { margin-top: var(--s-9) !important; }
  .mr-desk-9 { margin-right: var(--s-9) !important; }
  .mb-desk-9 { margin-bottom: var(--s-9) !important; }
  .ml-desk-9 { margin-left: var(--s-9) !important; }
  .mx-desk-9 { margin-inline: var(--s-9) !important; }
  .my-desk-9 { margin-block: var(--s-9) !important; }
  .p-desk-9 { padding: var(--s-9) !important; }
  .pt-desk-9 { padding-top: var(--s-9) !important; }
  .pr-desk-9 { padding-right: var(--s-9) !important; }
  .pb-desk-9 { padding-bottom: var(--s-9) !important; }
  .pl-desk-9 { padding-left: var(--s-9) !important; }
  .px-desk-9 { padding-inline: var(--s-9) !important; }
  .py-desk-9 { padding-block: var(--s-9) !important; }
  .gap-desk-9 { gap: var(--s-9) !important; }
  .m-desk-10 { margin: var(--s-10) !important; }
  .mt-desk-10 { margin-top: var(--s-10) !important; }
  .mr-desk-10 { margin-right: var(--s-10) !important; }
  .mb-desk-10 { margin-bottom: var(--s-10) !important; }
  .ml-desk-10 { margin-left: var(--s-10) !important; }
  .mx-desk-10 { margin-inline: var(--s-10) !important; }
  .my-desk-10 { margin-block: var(--s-10) !important; }
  .p-desk-10 { padding: var(--s-10) !important; }
  .pt-desk-10 { padding-top: var(--s-10) !important; }
  .pr-desk-10 { padding-right: var(--s-10) !important; }
  .pb-desk-10 { padding-bottom: var(--s-10) !important; }
  .pl-desk-10 { padding-left: var(--s-10) !important; }
  .px-desk-10 { padding-inline: var(--s-10) !important; }
  .py-desk-10 { padding-block: var(--s-10) !important; }
  .gap-desk-10 { gap: var(--s-10) !important; }
  .m-desk-11 { margin: var(--s-11) !important; }
  .mt-desk-11 { margin-top: var(--s-11) !important; }
  .mr-desk-11 { margin-right: var(--s-11) !important; }
  .mb-desk-11 { margin-bottom: var(--s-11) !important; }
  .ml-desk-11 { margin-left: var(--s-11) !important; }
  .mx-desk-11 { margin-inline: var(--s-11) !important; }
  .my-desk-11 { margin-block: var(--s-11) !important; }
  .p-desk-11 { padding: var(--s-11) !important; }
  .pt-desk-11 { padding-top: var(--s-11) !important; }
  .pr-desk-11 { padding-right: var(--s-11) !important; }
  .pb-desk-11 { padding-bottom: var(--s-11) !important; }
  .pl-desk-11 { padding-left: var(--s-11) !important; }
  .px-desk-11 { padding-inline: var(--s-11) !important; }
  .py-desk-11 { padding-block: var(--s-11) !important; }
  .gap-desk-11 { gap: var(--s-11) !important; }
  .m-desk-12 { margin: var(--s-12) !important; }
  .mt-desk-12 { margin-top: var(--s-12) !important; }
  .mr-desk-12 { margin-right: var(--s-12) !important; }
  .mb-desk-12 { margin-bottom: var(--s-12) !important; }
  .ml-desk-12 { margin-left: var(--s-12) !important; }
  .mx-desk-12 { margin-inline: var(--s-12) !important; }
  .my-desk-12 { margin-block: var(--s-12) !important; }
  .p-desk-12 { padding: var(--s-12) !important; }
  .pt-desk-12 { padding-top: var(--s-12) !important; }
  .pr-desk-12 { padding-right: var(--s-12) !important; }
  .pb-desk-12 { padding-bottom: var(--s-12) !important; }
  .pl-desk-12 { padding-left: var(--s-12) !important; }
  .px-desk-12 { padding-inline: var(--s-12) !important; }
  .py-desk-12 { padding-block: var(--s-12) !important; }
  .gap-desk-12 { gap: var(--s-12) !important; }
  .m-desk-auto { margin: auto !important; }
  .mt-desk-auto { margin-top: auto !important; }
  .mr-desk-auto { margin-right: auto !important; }
  .mb-desk-auto { margin-bottom: auto !important; }
  .ml-desk-auto { margin-left: auto !important; }
  .mx-desk-auto { margin-inline: auto !important; }
  .my-desk-auto { margin-block: auto !important; }
  .m-desc-0 { margin: var(--s-0) !important; }
  .mt-desc-0 { margin-top: var(--s-0) !important; }
  .mr-desc-0 { margin-right: var(--s-0) !important; }
  .mb-desc-0 { margin-bottom: var(--s-0) !important; }
  .ml-desc-0 { margin-left: var(--s-0) !important; }
  .mx-desc-0 { margin-inline: var(--s-0) !important; }
  .my-desc-0 { margin-block: var(--s-0) !important; }
  .p-desc-0 { padding: var(--s-0) !important; }
  .pt-desc-0 { padding-top: var(--s-0) !important; }
  .pr-desc-0 { padding-right: var(--s-0) !important; }
  .pb-desc-0 { padding-bottom: var(--s-0) !important; }
  .pl-desc-0 { padding-left: var(--s-0) !important; }
  .px-desc-0 { padding-inline: var(--s-0) !important; }
  .py-desc-0 { padding-block: var(--s-0) !important; }
  .gap-desc-0 { gap: var(--s-0) !important; }
  .m-desc-1 { margin: var(--s-1) !important; }
  .mt-desc-1 { margin-top: var(--s-1) !important; }
  .mr-desc-1 { margin-right: var(--s-1) !important; }
  .mb-desc-1 { margin-bottom: var(--s-1) !important; }
  .ml-desc-1 { margin-left: var(--s-1) !important; }
  .mx-desc-1 { margin-inline: var(--s-1) !important; }
  .my-desc-1 { margin-block: var(--s-1) !important; }
  .p-desc-1 { padding: var(--s-1) !important; }
  .pt-desc-1 { padding-top: var(--s-1) !important; }
  .pr-desc-1 { padding-right: var(--s-1) !important; }
  .pb-desc-1 { padding-bottom: var(--s-1) !important; }
  .pl-desc-1 { padding-left: var(--s-1) !important; }
  .px-desc-1 { padding-inline: var(--s-1) !important; }
  .py-desc-1 { padding-block: var(--s-1) !important; }
  .gap-desc-1 { gap: var(--s-1) !important; }
  .m-desc-2 { margin: var(--s-2) !important; }
  .mt-desc-2 { margin-top: var(--s-2) !important; }
  .mr-desc-2 { margin-right: var(--s-2) !important; }
  .mb-desc-2 { margin-bottom: var(--s-2) !important; }
  .ml-desc-2 { margin-left: var(--s-2) !important; }
  .mx-desc-2 { margin-inline: var(--s-2) !important; }
  .my-desc-2 { margin-block: var(--s-2) !important; }
  .p-desc-2 { padding: var(--s-2) !important; }
  .pt-desc-2 { padding-top: var(--s-2) !important; }
  .pr-desc-2 { padding-right: var(--s-2) !important; }
  .pb-desc-2 { padding-bottom: var(--s-2) !important; }
  .pl-desc-2 { padding-left: var(--s-2) !important; }
  .px-desc-2 { padding-inline: var(--s-2) !important; }
  .py-desc-2 { padding-block: var(--s-2) !important; }
  .gap-desc-2 { gap: var(--s-2) !important; }
  .m-desc-3 { margin: var(--s-3) !important; }
  .mt-desc-3 { margin-top: var(--s-3) !important; }
  .mr-desc-3 { margin-right: var(--s-3) !important; }
  .mb-desc-3 { margin-bottom: var(--s-3) !important; }
  .ml-desc-3 { margin-left: var(--s-3) !important; }
  .mx-desc-3 { margin-inline: var(--s-3) !important; }
  .my-desc-3 { margin-block: var(--s-3) !important; }
  .p-desc-3 { padding: var(--s-3) !important; }
  .pt-desc-3 { padding-top: var(--s-3) !important; }
  .pr-desc-3 { padding-right: var(--s-3) !important; }
  .pb-desc-3 { padding-bottom: var(--s-3) !important; }
  .pl-desc-3 { padding-left: var(--s-3) !important; }
  .px-desc-3 { padding-inline: var(--s-3) !important; }
  .py-desc-3 { padding-block: var(--s-3) !important; }
  .gap-desc-3 { gap: var(--s-3) !important; }
  .m-desc-4 { margin: var(--s-4) !important; }
  .mt-desc-4 { margin-top: var(--s-4) !important; }
  .mr-desc-4 { margin-right: var(--s-4) !important; }
  .mb-desc-4 { margin-bottom: var(--s-4) !important; }
  .ml-desc-4 { margin-left: var(--s-4) !important; }
  .mx-desc-4 { margin-inline: var(--s-4) !important; }
  .my-desc-4 { margin-block: var(--s-4) !important; }
  .p-desc-4 { padding: var(--s-4) !important; }
  .pt-desc-4 { padding-top: var(--s-4) !important; }
  .pr-desc-4 { padding-right: var(--s-4) !important; }
  .pb-desc-4 { padding-bottom: var(--s-4) !important; }
  .pl-desc-4 { padding-left: var(--s-4) !important; }
  .px-desc-4 { padding-inline: var(--s-4) !important; }
  .py-desc-4 { padding-block: var(--s-4) !important; }
  .gap-desc-4 { gap: var(--s-4) !important; }
  .m-desc-5 { margin: var(--s-5) !important; }
  .mt-desc-5 { margin-top: var(--s-5) !important; }
  .mr-desc-5 { margin-right: var(--s-5) !important; }
  .mb-desc-5 { margin-bottom: var(--s-5) !important; }
  .ml-desc-5 { margin-left: var(--s-5) !important; }
  .mx-desc-5 { margin-inline: var(--s-5) !important; }
  .my-desc-5 { margin-block: var(--s-5) !important; }
  .p-desc-5 { padding: var(--s-5) !important; }
  .pt-desc-5 { padding-top: var(--s-5) !important; }
  .pr-desc-5 { padding-right: var(--s-5) !important; }
  .pb-desc-5 { padding-bottom: var(--s-5) !important; }
  .pl-desc-5 { padding-left: var(--s-5) !important; }
  .px-desc-5 { padding-inline: var(--s-5) !important; }
  .py-desc-5 { padding-block: var(--s-5) !important; }
  .gap-desc-5 { gap: var(--s-5) !important; }
  .m-desc-6 { margin: var(--s-6) !important; }
  .mt-desc-6 { margin-top: var(--s-6) !important; }
  .mr-desc-6 { margin-right: var(--s-6) !important; }
  .mb-desc-6 { margin-bottom: var(--s-6) !important; }
  .ml-desc-6 { margin-left: var(--s-6) !important; }
  .mx-desc-6 { margin-inline: var(--s-6) !important; }
  .my-desc-6 { margin-block: var(--s-6) !important; }
  .p-desc-6 { padding: var(--s-6) !important; }
  .pt-desc-6 { padding-top: var(--s-6) !important; }
  .pr-desc-6 { padding-right: var(--s-6) !important; }
  .pb-desc-6 { padding-bottom: var(--s-6) !important; }
  .pl-desc-6 { padding-left: var(--s-6) !important; }
  .px-desc-6 { padding-inline: var(--s-6) !important; }
  .py-desc-6 { padding-block: var(--s-6) !important; }
  .gap-desc-6 { gap: var(--s-6) !important; }
  .m-desc-7 { margin: var(--s-7) !important; }
  .mt-desc-7 { margin-top: var(--s-7) !important; }
  .mr-desc-7 { margin-right: var(--s-7) !important; }
  .mb-desc-7 { margin-bottom: var(--s-7) !important; }
  .ml-desc-7 { margin-left: var(--s-7) !important; }
  .mx-desc-7 { margin-inline: var(--s-7) !important; }
  .my-desc-7 { margin-block: var(--s-7) !important; }
  .p-desc-7 { padding: var(--s-7) !important; }
  .pt-desc-7 { padding-top: var(--s-7) !important; }
  .pr-desc-7 { padding-right: var(--s-7) !important; }
  .pb-desc-7 { padding-bottom: var(--s-7) !important; }
  .pl-desc-7 { padding-left: var(--s-7) !important; }
  .px-desc-7 { padding-inline: var(--s-7) !important; }
  .py-desc-7 { padding-block: var(--s-7) !important; }
  .gap-desc-7 { gap: var(--s-7) !important; }
  .m-desc-8 { margin: var(--s-8) !important; }
  .mt-desc-8 { margin-top: var(--s-8) !important; }
  .mr-desc-8 { margin-right: var(--s-8) !important; }
  .mb-desc-8 { margin-bottom: var(--s-8) !important; }
  .ml-desc-8 { margin-left: var(--s-8) !important; }
  .mx-desc-8 { margin-inline: var(--s-8) !important; }
  .my-desc-8 { margin-block: var(--s-8) !important; }
  .p-desc-8 { padding: var(--s-8) !important; }
  .pt-desc-8 { padding-top: var(--s-8) !important; }
  .pr-desc-8 { padding-right: var(--s-8) !important; }
  .pb-desc-8 { padding-bottom: var(--s-8) !important; }
  .pl-desc-8 { padding-left: var(--s-8) !important; }
  .px-desc-8 { padding-inline: var(--s-8) !important; }
  .py-desc-8 { padding-block: var(--s-8) !important; }
  .gap-desc-8 { gap: var(--s-8) !important; }
  .m-desc-9 { margin: var(--s-9) !important; }
  .mt-desc-9 { margin-top: var(--s-9) !important; }
  .mr-desc-9 { margin-right: var(--s-9) !important; }
  .mb-desc-9 { margin-bottom: var(--s-9) !important; }
  .ml-desc-9 { margin-left: var(--s-9) !important; }
  .mx-desc-9 { margin-inline: var(--s-9) !important; }
  .my-desc-9 { margin-block: var(--s-9) !important; }
  .p-desc-9 { padding: var(--s-9) !important; }
  .pt-desc-9 { padding-top: var(--s-9) !important; }
  .pr-desc-9 { padding-right: var(--s-9) !important; }
  .pb-desc-9 { padding-bottom: var(--s-9) !important; }
  .pl-desc-9 { padding-left: var(--s-9) !important; }
  .px-desc-9 { padding-inline: var(--s-9) !important; }
  .py-desc-9 { padding-block: var(--s-9) !important; }
  .gap-desc-9 { gap: var(--s-9) !important; }
  .m-desc-10 { margin: var(--s-10) !important; }
  .mt-desc-10 { margin-top: var(--s-10) !important; }
  .mr-desc-10 { margin-right: var(--s-10) !important; }
  .mb-desc-10 { margin-bottom: var(--s-10) !important; }
  .ml-desc-10 { margin-left: var(--s-10) !important; }
  .mx-desc-10 { margin-inline: var(--s-10) !important; }
  .my-desc-10 { margin-block: var(--s-10) !important; }
  .p-desc-10 { padding: var(--s-10) !important; }
  .pt-desc-10 { padding-top: var(--s-10) !important; }
  .pr-desc-10 { padding-right: var(--s-10) !important; }
  .pb-desc-10 { padding-bottom: var(--s-10) !important; }
  .pl-desc-10 { padding-left: var(--s-10) !important; }
  .px-desc-10 { padding-inline: var(--s-10) !important; }
  .py-desc-10 { padding-block: var(--s-10) !important; }
  .gap-desc-10 { gap: var(--s-10) !important; }
  .m-desc-11 { margin: var(--s-11) !important; }
  .mt-desc-11 { margin-top: var(--s-11) !important; }
  .mr-desc-11 { margin-right: var(--s-11) !important; }
  .mb-desc-11 { margin-bottom: var(--s-11) !important; }
  .ml-desc-11 { margin-left: var(--s-11) !important; }
  .mx-desc-11 { margin-inline: var(--s-11) !important; }
  .my-desc-11 { margin-block: var(--s-11) !important; }
  .p-desc-11 { padding: var(--s-11) !important; }
  .pt-desc-11 { padding-top: var(--s-11) !important; }
  .pr-desc-11 { padding-right: var(--s-11) !important; }
  .pb-desc-11 { padding-bottom: var(--s-11) !important; }
  .pl-desc-11 { padding-left: var(--s-11) !important; }
  .px-desc-11 { padding-inline: var(--s-11) !important; }
  .py-desc-11 { padding-block: var(--s-11) !important; }
  .gap-desc-11 { gap: var(--s-11) !important; }
  .m-desc-12 { margin: var(--s-12) !important; }
  .mt-desc-12 { margin-top: var(--s-12) !important; }
  .mr-desc-12 { margin-right: var(--s-12) !important; }
  .mb-desc-12 { margin-bottom: var(--s-12) !important; }
  .ml-desc-12 { margin-left: var(--s-12) !important; }
  .mx-desc-12 { margin-inline: var(--s-12) !important; }
  .my-desc-12 { margin-block: var(--s-12) !important; }
  .p-desc-12 { padding: var(--s-12) !important; }
  .pt-desc-12 { padding-top: var(--s-12) !important; }
  .pr-desc-12 { padding-right: var(--s-12) !important; }
  .pb-desc-12 { padding-bottom: var(--s-12) !important; }
  .pl-desc-12 { padding-left: var(--s-12) !important; }
  .px-desc-12 { padding-inline: var(--s-12) !important; }
  .py-desc-12 { padding-block: var(--s-12) !important; }
  .gap-desc-12 { gap: var(--s-12) !important; }
  .m-desc-auto { margin: auto !important; }
  .mt-desc-auto { margin-top: auto !important; }
  .mr-desc-auto { margin-right: auto !important; }
  .mb-desc-auto { margin-bottom: auto !important; }
  .ml-desc-auto { margin-left: auto !important; }
  .mx-desc-auto { margin-inline: auto !important; }
  .my-desc-auto { margin-block: auto !important; }
}

@media (max-width: 1180px) {
  .m-tab-0 { margin: var(--s-0) !important; }
  .mt-tab-0 { margin-top: var(--s-0) !important; }
  .mr-tab-0 { margin-right: var(--s-0) !important; }
  .mb-tab-0 { margin-bottom: var(--s-0) !important; }
  .ml-tab-0 { margin-left: var(--s-0) !important; }
  .mx-tab-0 { margin-inline: var(--s-0) !important; }
  .my-tab-0 { margin-block: var(--s-0) !important; }
  .p-tab-0 { padding: var(--s-0) !important; }
  .pt-tab-0 { padding-top: var(--s-0) !important; }
  .pr-tab-0 { padding-right: var(--s-0) !important; }
  .pb-tab-0 { padding-bottom: var(--s-0) !important; }
  .pl-tab-0 { padding-left: var(--s-0) !important; }
  .px-tab-0 { padding-inline: var(--s-0) !important; }
  .py-tab-0 { padding-block: var(--s-0) !important; }
  .gap-tab-0 { gap: var(--s-0) !important; }
  .m-tab-1 { margin: var(--s-1) !important; }
  .mt-tab-1 { margin-top: var(--s-1) !important; }
  .mr-tab-1 { margin-right: var(--s-1) !important; }
  .mb-tab-1 { margin-bottom: var(--s-1) !important; }
  .ml-tab-1 { margin-left: var(--s-1) !important; }
  .mx-tab-1 { margin-inline: var(--s-1) !important; }
  .my-tab-1 { margin-block: var(--s-1) !important; }
  .p-tab-1 { padding: var(--s-1) !important; }
  .pt-tab-1 { padding-top: var(--s-1) !important; }
  .pr-tab-1 { padding-right: var(--s-1) !important; }
  .pb-tab-1 { padding-bottom: var(--s-1) !important; }
  .pl-tab-1 { padding-left: var(--s-1) !important; }
  .px-tab-1 { padding-inline: var(--s-1) !important; }
  .py-tab-1 { padding-block: var(--s-1) !important; }
  .gap-tab-1 { gap: var(--s-1) !important; }
  .m-tab-2 { margin: var(--s-2) !important; }
  .mt-tab-2 { margin-top: var(--s-2) !important; }
  .mr-tab-2 { margin-right: var(--s-2) !important; }
  .mb-tab-2 { margin-bottom: var(--s-2) !important; }
  .ml-tab-2 { margin-left: var(--s-2) !important; }
  .mx-tab-2 { margin-inline: var(--s-2) !important; }
  .my-tab-2 { margin-block: var(--s-2) !important; }
  .p-tab-2 { padding: var(--s-2) !important; }
  .pt-tab-2 { padding-top: var(--s-2) !important; }
  .pr-tab-2 { padding-right: var(--s-2) !important; }
  .pb-tab-2 { padding-bottom: var(--s-2) !important; }
  .pl-tab-2 { padding-left: var(--s-2) !important; }
  .px-tab-2 { padding-inline: var(--s-2) !important; }
  .py-tab-2 { padding-block: var(--s-2) !important; }
  .gap-tab-2 { gap: var(--s-2) !important; }
  .m-tab-3 { margin: var(--s-3) !important; }
  .mt-tab-3 { margin-top: var(--s-3) !important; }
  .mr-tab-3 { margin-right: var(--s-3) !important; }
  .mb-tab-3 { margin-bottom: var(--s-3) !important; }
  .ml-tab-3 { margin-left: var(--s-3) !important; }
  .mx-tab-3 { margin-inline: var(--s-3) !important; }
  .my-tab-3 { margin-block: var(--s-3) !important; }
  .p-tab-3 { padding: var(--s-3) !important; }
  .pt-tab-3 { padding-top: var(--s-3) !important; }
  .pr-tab-3 { padding-right: var(--s-3) !important; }
  .pb-tab-3 { padding-bottom: var(--s-3) !important; }
  .pl-tab-3 { padding-left: var(--s-3) !important; }
  .px-tab-3 { padding-inline: var(--s-3) !important; }
  .py-tab-3 { padding-block: var(--s-3) !important; }
  .gap-tab-3 { gap: var(--s-3) !important; }
  .m-tab-4 { margin: var(--s-4) !important; }
  .mt-tab-4 { margin-top: var(--s-4) !important; }
  .mr-tab-4 { margin-right: var(--s-4) !important; }
  .mb-tab-4 { margin-bottom: var(--s-4) !important; }
  .ml-tab-4 { margin-left: var(--s-4) !important; }
  .mx-tab-4 { margin-inline: var(--s-4) !important; }
  .my-tab-4 { margin-block: var(--s-4) !important; }
  .p-tab-4 { padding: var(--s-4) !important; }
  .pt-tab-4 { padding-top: var(--s-4) !important; }
  .pr-tab-4 { padding-right: var(--s-4) !important; }
  .pb-tab-4 { padding-bottom: var(--s-4) !important; }
  .pl-tab-4 { padding-left: var(--s-4) !important; }
  .px-tab-4 { padding-inline: var(--s-4) !important; }
  .py-tab-4 { padding-block: var(--s-4) !important; }
  .gap-tab-4 { gap: var(--s-4) !important; }
  .m-tab-5 { margin: var(--s-5) !important; }
  .mt-tab-5 { margin-top: var(--s-5) !important; }
  .mr-tab-5 { margin-right: var(--s-5) !important; }
  .mb-tab-5 { margin-bottom: var(--s-5) !important; }
  .ml-tab-5 { margin-left: var(--s-5) !important; }
  .mx-tab-5 { margin-inline: var(--s-5) !important; }
  .my-tab-5 { margin-block: var(--s-5) !important; }
  .p-tab-5 { padding: var(--s-5) !important; }
  .pt-tab-5 { padding-top: var(--s-5) !important; }
  .pr-tab-5 { padding-right: var(--s-5) !important; }
  .pb-tab-5 { padding-bottom: var(--s-5) !important; }
  .pl-tab-5 { padding-left: var(--s-5) !important; }
  .px-tab-5 { padding-inline: var(--s-5) !important; }
  .py-tab-5 { padding-block: var(--s-5) !important; }
  .gap-tab-5 { gap: var(--s-5) !important; }
  .m-tab-6 { margin: var(--s-6) !important; }
  .mt-tab-6 { margin-top: var(--s-6) !important; }
  .mr-tab-6 { margin-right: var(--s-6) !important; }
  .mb-tab-6 { margin-bottom: var(--s-6) !important; }
  .ml-tab-6 { margin-left: var(--s-6) !important; }
  .mx-tab-6 { margin-inline: var(--s-6) !important; }
  .my-tab-6 { margin-block: var(--s-6) !important; }
  .p-tab-6 { padding: var(--s-6) !important; }
  .pt-tab-6 { padding-top: var(--s-6) !important; }
  .pr-tab-6 { padding-right: var(--s-6) !important; }
  .pb-tab-6 { padding-bottom: var(--s-6) !important; }
  .pl-tab-6 { padding-left: var(--s-6) !important; }
  .px-tab-6 { padding-inline: var(--s-6) !important; }
  .py-tab-6 { padding-block: var(--s-6) !important; }
  .gap-tab-6 { gap: var(--s-6) !important; }
  .m-tab-7 { margin: var(--s-7) !important; }
  .mt-tab-7 { margin-top: var(--s-7) !important; }
  .mr-tab-7 { margin-right: var(--s-7) !important; }
  .mb-tab-7 { margin-bottom: var(--s-7) !important; }
  .ml-tab-7 { margin-left: var(--s-7) !important; }
  .mx-tab-7 { margin-inline: var(--s-7) !important; }
  .my-tab-7 { margin-block: var(--s-7) !important; }
  .p-tab-7 { padding: var(--s-7) !important; }
  .pt-tab-7 { padding-top: var(--s-7) !important; }
  .pr-tab-7 { padding-right: var(--s-7) !important; }
  .pb-tab-7 { padding-bottom: var(--s-7) !important; }
  .pl-tab-7 { padding-left: var(--s-7) !important; }
  .px-tab-7 { padding-inline: var(--s-7) !important; }
  .py-tab-7 { padding-block: var(--s-7) !important; }
  .gap-tab-7 { gap: var(--s-7) !important; }
  .m-tab-8 { margin: var(--s-8) !important; }
  .mt-tab-8 { margin-top: var(--s-8) !important; }
  .mr-tab-8 { margin-right: var(--s-8) !important; }
  .mb-tab-8 { margin-bottom: var(--s-8) !important; }
  .ml-tab-8 { margin-left: var(--s-8) !important; }
  .mx-tab-8 { margin-inline: var(--s-8) !important; }
  .my-tab-8 { margin-block: var(--s-8) !important; }
  .p-tab-8 { padding: var(--s-8) !important; }
  .pt-tab-8 { padding-top: var(--s-8) !important; }
  .pr-tab-8 { padding-right: var(--s-8) !important; }
  .pb-tab-8 { padding-bottom: var(--s-8) !important; }
  .pl-tab-8 { padding-left: var(--s-8) !important; }
  .px-tab-8 { padding-inline: var(--s-8) !important; }
  .py-tab-8 { padding-block: var(--s-8) !important; }
  .gap-tab-8 { gap: var(--s-8) !important; }
  .m-tab-9 { margin: var(--s-9) !important; }
  .mt-tab-9 { margin-top: var(--s-9) !important; }
  .mr-tab-9 { margin-right: var(--s-9) !important; }
  .mb-tab-9 { margin-bottom: var(--s-9) !important; }
  .ml-tab-9 { margin-left: var(--s-9) !important; }
  .mx-tab-9 { margin-inline: var(--s-9) !important; }
  .my-tab-9 { margin-block: var(--s-9) !important; }
  .p-tab-9 { padding: var(--s-9) !important; }
  .pt-tab-9 { padding-top: var(--s-9) !important; }
  .pr-tab-9 { padding-right: var(--s-9) !important; }
  .pb-tab-9 { padding-bottom: var(--s-9) !important; }
  .pl-tab-9 { padding-left: var(--s-9) !important; }
  .px-tab-9 { padding-inline: var(--s-9) !important; }
  .py-tab-9 { padding-block: var(--s-9) !important; }
  .gap-tab-9 { gap: var(--s-9) !important; }
  .m-tab-10 { margin: var(--s-10) !important; }
  .mt-tab-10 { margin-top: var(--s-10) !important; }
  .mr-tab-10 { margin-right: var(--s-10) !important; }
  .mb-tab-10 { margin-bottom: var(--s-10) !important; }
  .ml-tab-10 { margin-left: var(--s-10) !important; }
  .mx-tab-10 { margin-inline: var(--s-10) !important; }
  .my-tab-10 { margin-block: var(--s-10) !important; }
  .p-tab-10 { padding: var(--s-10) !important; }
  .pt-tab-10 { padding-top: var(--s-10) !important; }
  .pr-tab-10 { padding-right: var(--s-10) !important; }
  .pb-tab-10 { padding-bottom: var(--s-10) !important; }
  .pl-tab-10 { padding-left: var(--s-10) !important; }
  .px-tab-10 { padding-inline: var(--s-10) !important; }
  .py-tab-10 { padding-block: var(--s-10) !important; }
  .gap-tab-10 { gap: var(--s-10) !important; }
  .m-tab-11 { margin: var(--s-11) !important; }
  .mt-tab-11 { margin-top: var(--s-11) !important; }
  .mr-tab-11 { margin-right: var(--s-11) !important; }
  .mb-tab-11 { margin-bottom: var(--s-11) !important; }
  .ml-tab-11 { margin-left: var(--s-11) !important; }
  .mx-tab-11 { margin-inline: var(--s-11) !important; }
  .my-tab-11 { margin-block: var(--s-11) !important; }
  .p-tab-11 { padding: var(--s-11) !important; }
  .pt-tab-11 { padding-top: var(--s-11) !important; }
  .pr-tab-11 { padding-right: var(--s-11) !important; }
  .pb-tab-11 { padding-bottom: var(--s-11) !important; }
  .pl-tab-11 { padding-left: var(--s-11) !important; }
  .px-tab-11 { padding-inline: var(--s-11) !important; }
  .py-tab-11 { padding-block: var(--s-11) !important; }
  .gap-tab-11 { gap: var(--s-11) !important; }
  .m-tab-12 { margin: var(--s-12) !important; }
  .mt-tab-12 { margin-top: var(--s-12) !important; }
  .mr-tab-12 { margin-right: var(--s-12) !important; }
  .mb-tab-12 { margin-bottom: var(--s-12) !important; }
  .ml-tab-12 { margin-left: var(--s-12) !important; }
  .mx-tab-12 { margin-inline: var(--s-12) !important; }
  .my-tab-12 { margin-block: var(--s-12) !important; }
  .p-tab-12 { padding: var(--s-12) !important; }
  .pt-tab-12 { padding-top: var(--s-12) !important; }
  .pr-tab-12 { padding-right: var(--s-12) !important; }
  .pb-tab-12 { padding-bottom: var(--s-12) !important; }
  .pl-tab-12 { padding-left: var(--s-12) !important; }
  .px-tab-12 { padding-inline: var(--s-12) !important; }
  .py-tab-12 { padding-block: var(--s-12) !important; }
  .gap-tab-12 { gap: var(--s-12) !important; }
  .m-tab-auto { margin: auto !important; }
  .mt-tab-auto { margin-top: auto !important; }
  .mr-tab-auto { margin-right: auto !important; }
  .mb-tab-auto { margin-bottom: auto !important; }
  .ml-tab-auto { margin-left: auto !important; }
  .mx-tab-auto { margin-inline: auto !important; }
  .my-tab-auto { margin-block: auto !important; }
}

@media (max-width: 768px) {
  .m-mob-0 { margin: var(--s-0) !important; }
  .mt-mob-0 { margin-top: var(--s-0) !important; }
  .mr-mob-0 { margin-right: var(--s-0) !important; }
  .mb-mob-0 { margin-bottom: var(--s-0) !important; }
  .ml-mob-0 { margin-left: var(--s-0) !important; }
  .mx-mob-0 { margin-inline: var(--s-0) !important; }
  .my-mob-0 { margin-block: var(--s-0) !important; }
  .p-mob-0 { padding: var(--s-0) !important; }
  .pt-mob-0 { padding-top: var(--s-0) !important; }
  .pr-mob-0 { padding-right: var(--s-0) !important; }
  .pb-mob-0 { padding-bottom: var(--s-0) !important; }
  .pl-mob-0 { padding-left: var(--s-0) !important; }
  .px-mob-0 { padding-inline: var(--s-0) !important; }
  .py-mob-0 { padding-block: var(--s-0) !important; }
  .gap-mob-0 { gap: var(--s-0) !important; }
  .m-mob-1 { margin: var(--s-1) !important; }
  .mt-mob-1 { margin-top: var(--s-1) !important; }
  .mr-mob-1 { margin-right: var(--s-1) !important; }
  .mb-mob-1 { margin-bottom: var(--s-1) !important; }
  .ml-mob-1 { margin-left: var(--s-1) !important; }
  .mx-mob-1 { margin-inline: var(--s-1) !important; }
  .my-mob-1 { margin-block: var(--s-1) !important; }
  .p-mob-1 { padding: var(--s-1) !important; }
  .pt-mob-1 { padding-top: var(--s-1) !important; }
  .pr-mob-1 { padding-right: var(--s-1) !important; }
  .pb-mob-1 { padding-bottom: var(--s-1) !important; }
  .pl-mob-1 { padding-left: var(--s-1) !important; }
  .px-mob-1 { padding-inline: var(--s-1) !important; }
  .py-mob-1 { padding-block: var(--s-1) !important; }
  .gap-mob-1 { gap: var(--s-1) !important; }
  .m-mob-2 { margin: var(--s-2) !important; }
  .mt-mob-2 { margin-top: var(--s-2) !important; }
  .mr-mob-2 { margin-right: var(--s-2) !important; }
  .mb-mob-2 { margin-bottom: var(--s-2) !important; }
  .ml-mob-2 { margin-left: var(--s-2) !important; }
  .mx-mob-2 { margin-inline: var(--s-2) !important; }
  .my-mob-2 { margin-block: var(--s-2) !important; }
  .p-mob-2 { padding: var(--s-2) !important; }
  .pt-mob-2 { padding-top: var(--s-2) !important; }
  .pr-mob-2 { padding-right: var(--s-2) !important; }
  .pb-mob-2 { padding-bottom: var(--s-2) !important; }
  .pl-mob-2 { padding-left: var(--s-2) !important; }
  .px-mob-2 { padding-inline: var(--s-2) !important; }
  .py-mob-2 { padding-block: var(--s-2) !important; }
  .gap-mob-2 { gap: var(--s-2) !important; }
  .m-mob-3 { margin: var(--s-3) !important; }
  .mt-mob-3 { margin-top: var(--s-3) !important; }
  .mr-mob-3 { margin-right: var(--s-3) !important; }
  .mb-mob-3 { margin-bottom: var(--s-3) !important; }
  .ml-mob-3 { margin-left: var(--s-3) !important; }
  .mx-mob-3 { margin-inline: var(--s-3) !important; }
  .my-mob-3 { margin-block: var(--s-3) !important; }
  .p-mob-3 { padding: var(--s-3) !important; }
  .pt-mob-3 { padding-top: var(--s-3) !important; }
  .pr-mob-3 { padding-right: var(--s-3) !important; }
  .pb-mob-3 { padding-bottom: var(--s-3) !important; }
  .pl-mob-3 { padding-left: var(--s-3) !important; }
  .px-mob-3 { padding-inline: var(--s-3) !important; }
  .py-mob-3 { padding-block: var(--s-3) !important; }
  .gap-mob-3 { gap: var(--s-3) !important; }
  .m-mob-4 { margin: var(--s-4) !important; }
  .mt-mob-4 { margin-top: var(--s-4) !important; }
  .mr-mob-4 { margin-right: var(--s-4) !important; }
  .mb-mob-4 { margin-bottom: var(--s-4) !important; }
  .ml-mob-4 { margin-left: var(--s-4) !important; }
  .mx-mob-4 { margin-inline: var(--s-4) !important; }
  .my-mob-4 { margin-block: var(--s-4) !important; }
  .p-mob-4 { padding: var(--s-4) !important; }
  .pt-mob-4 { padding-top: var(--s-4) !important; }
  .pr-mob-4 { padding-right: var(--s-4) !important; }
  .pb-mob-4 { padding-bottom: var(--s-4) !important; }
  .pl-mob-4 { padding-left: var(--s-4) !important; }
  .px-mob-4 { padding-inline: var(--s-4) !important; }
  .py-mob-4 { padding-block: var(--s-4) !important; }
  .gap-mob-4 { gap: var(--s-4) !important; }
  .m-mob-5 { margin: var(--s-5) !important; }
  .mt-mob-5 { margin-top: var(--s-5) !important; }
  .mr-mob-5 { margin-right: var(--s-5) !important; }
  .mb-mob-5 { margin-bottom: var(--s-5) !important; }
  .ml-mob-5 { margin-left: var(--s-5) !important; }
  .mx-mob-5 { margin-inline: var(--s-5) !important; }
  .my-mob-5 { margin-block: var(--s-5) !important; }
  .p-mob-5 { padding: var(--s-5) !important; }
  .pt-mob-5 { padding-top: var(--s-5) !important; }
  .pr-mob-5 { padding-right: var(--s-5) !important; }
  .pb-mob-5 { padding-bottom: var(--s-5) !important; }
  .pl-mob-5 { padding-left: var(--s-5) !important; }
  .px-mob-5 { padding-inline: var(--s-5) !important; }
  .py-mob-5 { padding-block: var(--s-5) !important; }
  .gap-mob-5 { gap: var(--s-5) !important; }
  .m-mob-6 { margin: var(--s-6) !important; }
  .mt-mob-6 { margin-top: var(--s-6) !important; }
  .mr-mob-6 { margin-right: var(--s-6) !important; }
  .mb-mob-6 { margin-bottom: var(--s-6) !important; }
  .ml-mob-6 { margin-left: var(--s-6) !important; }
  .mx-mob-6 { margin-inline: var(--s-6) !important; }
  .my-mob-6 { margin-block: var(--s-6) !important; }
  .p-mob-6 { padding: var(--s-6) !important; }
  .pt-mob-6 { padding-top: var(--s-6) !important; }
  .pr-mob-6 { padding-right: var(--s-6) !important; }
  .pb-mob-6 { padding-bottom: var(--s-6) !important; }
  .pl-mob-6 { padding-left: var(--s-6) !important; }
  .px-mob-6 { padding-inline: var(--s-6) !important; }
  .py-mob-6 { padding-block: var(--s-6) !important; }
  .gap-mob-6 { gap: var(--s-6) !important; }
  .m-mob-7 { margin: var(--s-7) !important; }
  .mt-mob-7 { margin-top: var(--s-7) !important; }
  .mr-mob-7 { margin-right: var(--s-7) !important; }
  .mb-mob-7 { margin-bottom: var(--s-7) !important; }
  .ml-mob-7 { margin-left: var(--s-7) !important; }
  .mx-mob-7 { margin-inline: var(--s-7) !important; }
  .my-mob-7 { margin-block: var(--s-7) !important; }
  .p-mob-7 { padding: var(--s-7) !important; }
  .pt-mob-7 { padding-top: var(--s-7) !important; }
  .pr-mob-7 { padding-right: var(--s-7) !important; }
  .pb-mob-7 { padding-bottom: var(--s-7) !important; }
  .pl-mob-7 { padding-left: var(--s-7) !important; }
  .px-mob-7 { padding-inline: var(--s-7) !important; }
  .py-mob-7 { padding-block: var(--s-7) !important; }
  .gap-mob-7 { gap: var(--s-7) !important; }
  .m-mob-8 { margin: var(--s-8) !important; }
  .mt-mob-8 { margin-top: var(--s-8) !important; }
  .mr-mob-8 { margin-right: var(--s-8) !important; }
  .mb-mob-8 { margin-bottom: var(--s-8) !important; }
  .ml-mob-8 { margin-left: var(--s-8) !important; }
  .mx-mob-8 { margin-inline: var(--s-8) !important; }
  .my-mob-8 { margin-block: var(--s-8) !important; }
  .p-mob-8 { padding: var(--s-8) !important; }
  .pt-mob-8 { padding-top: var(--s-8) !important; }
  .pr-mob-8 { padding-right: var(--s-8) !important; }
  .pb-mob-8 { padding-bottom: var(--s-8) !important; }
  .pl-mob-8 { padding-left: var(--s-8) !important; }
  .px-mob-8 { padding-inline: var(--s-8) !important; }
  .py-mob-8 { padding-block: var(--s-8) !important; }
  .gap-mob-8 { gap: var(--s-8) !important; }
  .m-mob-9 { margin: var(--s-9) !important; }
  .mt-mob-9 { margin-top: var(--s-9) !important; }
  .mr-mob-9 { margin-right: var(--s-9) !important; }
  .mb-mob-9 { margin-bottom: var(--s-9) !important; }
  .ml-mob-9 { margin-left: var(--s-9) !important; }
  .mx-mob-9 { margin-inline: var(--s-9) !important; }
  .my-mob-9 { margin-block: var(--s-9) !important; }
  .p-mob-9 { padding: var(--s-9) !important; }
  .pt-mob-9 { padding-top: var(--s-9) !important; }
  .pr-mob-9 { padding-right: var(--s-9) !important; }
  .pb-mob-9 { padding-bottom: var(--s-9) !important; }
  .pl-mob-9 { padding-left: var(--s-9) !important; }
  .px-mob-9 { padding-inline: var(--s-9) !important; }
  .py-mob-9 { padding-block: var(--s-9) !important; }
  .gap-mob-9 { gap: var(--s-9) !important; }
  .m-mob-10 { margin: var(--s-10) !important; }
  .mt-mob-10 { margin-top: var(--s-10) !important; }
  .mr-mob-10 { margin-right: var(--s-10) !important; }
  .mb-mob-10 { margin-bottom: var(--s-10) !important; }
  .ml-mob-10 { margin-left: var(--s-10) !important; }
  .mx-mob-10 { margin-inline: var(--s-10) !important; }
  .my-mob-10 { margin-block: var(--s-10) !important; }
  .p-mob-10 { padding: var(--s-10) !important; }
  .pt-mob-10 { padding-top: var(--s-10) !important; }
  .pr-mob-10 { padding-right: var(--s-10) !important; }
  .pb-mob-10 { padding-bottom: var(--s-10) !important; }
  .pl-mob-10 { padding-left: var(--s-10) !important; }
  .px-mob-10 { padding-inline: var(--s-10) !important; }
  .py-mob-10 { padding-block: var(--s-10) !important; }
  .gap-mob-10 { gap: var(--s-10) !important; }
  .m-mob-11 { margin: var(--s-11) !important; }
  .mt-mob-11 { margin-top: var(--s-11) !important; }
  .mr-mob-11 { margin-right: var(--s-11) !important; }
  .mb-mob-11 { margin-bottom: var(--s-11) !important; }
  .ml-mob-11 { margin-left: var(--s-11) !important; }
  .mx-mob-11 { margin-inline: var(--s-11) !important; }
  .my-mob-11 { margin-block: var(--s-11) !important; }
  .p-mob-11 { padding: var(--s-11) !important; }
  .pt-mob-11 { padding-top: var(--s-11) !important; }
  .pr-mob-11 { padding-right: var(--s-11) !important; }
  .pb-mob-11 { padding-bottom: var(--s-11) !important; }
  .pl-mob-11 { padding-left: var(--s-11) !important; }
  .px-mob-11 { padding-inline: var(--s-11) !important; }
  .py-mob-11 { padding-block: var(--s-11) !important; }
  .gap-mob-11 { gap: var(--s-11) !important; }
  .m-mob-12 { margin: var(--s-12) !important; }
  .mt-mob-12 { margin-top: var(--s-12) !important; }
  .mr-mob-12 { margin-right: var(--s-12) !important; }
  .mb-mob-12 { margin-bottom: var(--s-12) !important; }
  .ml-mob-12 { margin-left: var(--s-12) !important; }
  .mx-mob-12 { margin-inline: var(--s-12) !important; }
  .my-mob-12 { margin-block: var(--s-12) !important; }
  .p-mob-12 { padding: var(--s-12) !important; }
  .pt-mob-12 { padding-top: var(--s-12) !important; }
  .pr-mob-12 { padding-right: var(--s-12) !important; }
  .pb-mob-12 { padding-bottom: var(--s-12) !important; }
  .pl-mob-12 { padding-left: var(--s-12) !important; }
  .px-mob-12 { padding-inline: var(--s-12) !important; }
  .py-mob-12 { padding-block: var(--s-12) !important; }
  .gap-mob-12 { gap: var(--s-12) !important; }
  .m-mob-auto { margin: auto !important; }
  .mt-mob-auto { margin-top: auto !important; }
  .mr-mob-auto { margin-right: auto !important; }
  .mb-mob-auto { margin-bottom: auto !important; }
  .ml-mob-auto { margin-left: auto !important; }
  .mx-mob-auto { margin-inline: auto !important; }
  .my-mob-auto { margin-block: auto !important; }
}


/* ========================================================= Dark palette update
   - --c-dark: #3c3d41
   - --c-dark-2: #5b5c5f
   Main dark is now softer; secondary dark is a lighter graphite tone.
   ========================================================= */

/* ========================================================= Background image overlay utilities
   Purpose: add a reusable filter layer over background images without
   writing custom ::before / ::after for every section.

   Usage:
   <section class="section bg bg-overlay bg-overlay-warm" style="background-image:url(...)">
     <div class="container">...</div>
   </section>

   Custom gradient:
   <section class="bg-overlay" style="--bg-overlay: linear-gradient(...)">
   ========================================================= */
.bg-overlay,
.bg-filter {
  --bg-overlay: linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .42) 100%);

  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.bg-overlay::before,
.bg-filter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--bg-overlay);
}

.bg-overlay > :where(:not(style):not(script)),
.bg-filter > :where(:not(style):not(script)) {
  position: relative;
  z-index: 1;
}

/* Default practical variants */
.bg-overlay-soft {
  --bg-overlay: linear-gradient(0deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .22) 100%);
}

.bg-overlay-dark {
  --bg-overlay: linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .48) 100%);
}

.bg-overlay-strong {
  --bg-overlay: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .62) 100%);
}

/* The warm ARGO-style filter you usually used manually */
.bg-overlay-warm {
  --bg-overlay: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(61, 46, 34, .7) 300px);
}

/* Directional gradients for hero/background sections */
.bg-overlay-bottom {
  --bg-overlay: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .5) 46%, rgba(0, 0, 0, .12) 100%);
}

.bg-overlay-top {
  --bg-overlay: linear-gradient(180deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .5) 46%, rgba(0, 0, 0, .12) 100%);
}

.bg-overlay-center {
  --bg-overlay: radial-gradient(circle at center, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .72) 100%);
}

/* Optional color overlays */
.bg-overlay-primary {
  --bg-overlay: linear-gradient(0deg, rgba(255, 99, 71, .62) 0%, rgba(0, 0, 0, .42) 100%);
}

.bg-overlay-gold {
  --bg-overlay: linear-gradient(0deg, rgba(238, 201, 48, .42) 0%, rgba(0, 0, 0, .5) 100%);
}


.demo-overlay-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.demo-overlay-card code {
  color: inherit;
}


/* ========================================================= Explicit list defaults and structural list reset
   Plain ul/ol without classes keep normal content-list formatting.
   Structural list containers such as ul.grid / ol.grid do not inherit
   list markers, left padding, or li vertical margins from content rhythm.

   Use .list-default when a list has classes but should still look like
   a normal article/content list.
   ========================================================= */
.list-default {
  margin-block: 0 !important;
  padding-inline-start: var(--s-7) !important;
  list-style-position: outside !important;
}

.content :where(ul, ol).list-default {
  margin-block: 0 var(--s-5) !important;
  padding-inline-start: var(--s-7) !important;
  list-style-position: outside !important;
}

ul.list-default,
.content ul.list-default {
  list-style-type: disc !important;
}

ol.list-default,
.content ol.list-default {
  list-style-type: decimal !important;
}

.list-default :where(ul, ol),
.content .list-default :where(ul, ol) {
  margin-block: 0 !important;
  padding-inline-start: var(--s-6) !important;
  list-style-position: outside !important;
}

.list-default > li + li {
  margin-top: 0 !important;
}

.content .list-default > li + li {
  margin-top: var(--s-2) !important;
}

.list-default > li::marker,
.content .list-default > li::marker {
  color: var(--c-primary);
  font-weight: var(--fw-semibold);
}

.list-unstyled,
.content :where(ul, ol).list-unstyled {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.list-unstyled > li,
.content .list-unstyled > li,
.list-unstyled > li + li,
.content .list-unstyled > li + li {
  margin-top: 0 !important;
}

/* When semantic ul/ol is used as a layout container, layout wins. */
:where(ul, ol):where(.grid, .grid-auto, .grid-fill, .cluster, .stack, .split):not(.list-default),
.content :where(ul, ol):where(.grid, .grid-auto, .grid-fill, .cluster, .stack, .split):not(.list-default) {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

:where(ul, ol):where(.grid, .grid-auto, .grid-fill, .cluster, .stack, .split):not(.list-default) > li,
:where(ul, ol):where(.grid, .grid-auto, .grid-fill, .cluster, .stack, .split):not(.list-default) > li + li,
.content :where(ul, ol):where(.grid, .grid-auto, .grid-fill, .cluster, .stack, .split):not(.list-default) > li,
.content :where(ul, ol):where(.grid, .grid-auto, .grid-fill, .cluster, .stack, .split):not(.list-default) > li + li {
  margin-top: 0 !important;
}

/* =========================================================
   Native reset and readable article rhythm

   Outside .content, semantic elements keep zero browser margins.
   Inside .content, headings, paragraphs and article media receive a
   predictable reading rhythm. All selectors use :where() so component
   classes and explicit .mt-* / .mb-* utilities can override the defaults.
   ========================================================= */
:where(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, figcaption, blockquote, table, dl, dd) {
  margin-block: 0;
}

/* Heading spacing by semantic tag. */
:where(.content) :where(h1) {
  margin-top: var(--s-10);
  margin-bottom: var(--s-5);
}

:where(.content) :where(h2) {
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
}

:where(.content) :where(h3) {
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
}

:where(.content) :where(h4) {
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
}

:where(.content) :where(h5) {
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
}

:where(.content) :where(h6) {
  margin-top: var(--s-4);
  margin-bottom: var(--s-2);
}

/* Typography classes use the same rhythm and win by source order when a
   visual heading class is applied to another semantic tag. */
:where(.content) :where(.t-h1) {
  margin-top: var(--s-10);
  margin-bottom: var(--s-5);
}

:where(.content) :where(.t-h2) {
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
}

:where(.content) :where(.t-h3) {
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
}

:where(.content) :where(.t-h4) {
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
}

:where(.content) :where(.t-h5) {
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
}

:where(.content) :where(.t-h6) {
  margin-top: var(--s-4);
  margin-bottom: var(--s-2);
}

/* Body copy: 16px after a paragraph works well with --lh-body: 1.58. */
:where(.content) :where(p) {
  margin-bottom: var(--s-4);
}

:where(.content) :where(p):last-child {
  margin-bottom: 0;
}

/* Lists and large editorial elements need slightly more separation. */
:where(.content) :where(ul, ol):not(.list-unstyled):not(.grid):not(.grid-auto):not(.grid-fill):not(.cluster):not(.stack):not(.split):not(.tab-header) {
  margin-bottom: var(--s-5);
}

:where(.content) :where(ul, ol):not([class]) > li + li,
:where(.content) :where(ul, ol).list-default > li + li {
  margin-top: var(--s-2);
}

:where(.content) :where(figure, table, blockquote, dl) {
  margin-bottom: var(--s-6);
}

:where(.content) :where(figcaption) {
  margin-top: var(--s-2);
}

/* No artificial gap at the top or bottom of the main content/container. */
:where(.content) > :where(h1, h2, h3, h4, h5, h6, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6):first-child,
:where(.content) :where(.container, .container-narrow, .container-wide) > :where(h1, h2, h3, h4, h5, h6, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6):first-child,
:where(.content) :where(div, button) > :where(h1, h2, h3, h4, h5, h6, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6):first-child {
  margin-top: 0;
}

:where(.content) > :last-child,
:where(.content) :where(.container, .container-narrow, .container-wide) > :last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  :where(.content) :where(h1) {
    margin-top: var(--s-8);
    margin-bottom: var(--s-4);
  }

  :where(.content) :where(h2) {
    margin-top: var(--s-7);
    margin-bottom: var(--s-3);
  }

  :where(.content) :where(h3) {
    margin-top: var(--s-6);
    margin-bottom: var(--s-3);
  }

  :where(.content) :where(h4) {
    margin-top: var(--s-5);
    margin-bottom: var(--s-2);
  }

  /* Visual heading classes keep precedence over the semantic tag. */
  :where(.content) :where(.t-h1) {
    margin-top: var(--s-8);
    margin-bottom: var(--s-4);
  }

  :where(.content) :where(.t-h2) {
    margin-top: var(--s-7);
    margin-bottom: var(--s-3);
  }

  :where(.content) :where(.t-h3) {
    margin-top: var(--s-6);
    margin-bottom: var(--s-3);
  }

  :where(.content) :where(.t-h4) {
    margin-top: var(--s-5);
    margin-bottom: var(--s-2);
  }
}

/* ========================================================= bg-curve-bottom + bg-overlay conflict fix
   Problem: both utilities used ::before on the same element.
   Fix: when .bg-curve-bottom is combined with .bg-overlay/.bg-filter,
   ::before is reserved for the overlay filter, and the bottom curve moves
   to ::after. Content stays above both decorative layers.
   ========================================================= */
.bg-curve-bottom.bg-overlay,
.bg-curve-bottom.bg-filter {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bg-curve-bottom.bg-overlay::before,
.bg-curve-bottom.bg-filter::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  height: auto;
  transform: none;
  border-radius: inherit;
  background: var(--bg-overlay);
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-mask-repeat: initial;
  mask-repeat: initial;
  -webkit-mask-size: auto;
  mask-size: auto;
  pointer-events: none;
  z-index: 0;
}

.bg-curve-bottom.bg-overlay::after,
.bg-curve-bottom.bg-filter::after {
  content: "";
  position: absolute;
  top: auto;
  right: auto;
  left: var(--curve-x, 50%);
  bottom: 0;
  width: var(--curve-w, 140%);
  height: var(--curve-h, clamp(42px, 6vw, 96px));
  transform: translateX(-50%);
  border-radius: 0;
  background: none;
  background-color: var(--curve-bg, var(--c-bg));
  -webkit-mask-image: radial-gradient(ellipse 76% 145% at 50% -42%, transparent 0 63%, #000 64%);
  mask-image: radial-gradient(ellipse 76% 145% at 50% -42%, transparent 0 63%, #000 64%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
  z-index: 1;
}

.bg-curve-bottom.bg-curve-bottom-reverse.bg-overlay::after,
.bg-curve-bottom.bg-curve-bottom-reverse.bg-filter::after {
  top: auto;
  left: var(--curve-x, 50%);
  right: auto;
  bottom: calc(var(--curve-h, clamp(42px, 6vw, 96px)) * -0.72);
  width: var(--curve-w, 140%);
  height: var(--curve-h, clamp(42px, 6vw, 96px));
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.bg-curve-bottom.bg-overlay > :where(:not(style):not(script)),
.bg-curve-bottom.bg-filter > :where(:not(style):not(script)) {
  position: relative;
  z-index: 2;
}


/* =========================================================
   v4.05 — Dropdown navigation root lives on UL
   Markup pattern:
   <div class="bg-* text-* round-* shadow-*">
     <nav>
       <button class="nav-dropdown-toggle ...">...</button>
       <ul class="nav-dropdown nav-dropdown-static">
         <li class="has-submenu">...</li>
       </ul>
     </nav>
   </div>

   .nav-dropdown is now assigned to the root UL, not to NAV.
   Wrapper DIV owns background, color, radius, shadow and spacing.
   ========================================================= */

ul.nav-dropdown,
ul.nav-dropdown ul,
ul.nav-dropdown li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.nav-dropdown {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
}

ul.nav-dropdown li {
  position: relative;
}

ul.nav-dropdown a,
ul.nav-dropdown button {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

ul.nav-dropdown a:hover,
ul.nav-dropdown button:hover {
  text-decoration: none;
}

ul.nav-dropdown .has-submenu > a,
ul.nav-dropdown .has-submenu > button {
  justify-content: space-between;
}

ul.nav-dropdown .has-submenu > a::after,
ul.nav-dropdown .has-submenu > button::after {
  content: "";
  width: .45em;
  height: .45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transform-origin: center;
  flex: 0 0 auto;
}

ul.nav-dropdown .nav-dropdown-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--tr-fast), visibility var(--tr-fast), transform var(--tr-fast);
}

ul.nav-dropdown .nav-dropdown-submenu .nav-dropdown-submenu {
  top: 0;
  left: 100%;
  transform: translateX(8px);
}

ul.nav-dropdown .nav-dropdown-submenu a,
ul.nav-dropdown .nav-dropdown-submenu button {
  width: 100%;
}

ul.nav-dropdown li:hover > .nav-dropdown-submenu,
ul.nav-dropdown li:focus-within > .nav-dropdown-submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

ul.nav-dropdown .nav-dropdown-submenu .has-submenu > a::after,
ul.nav-dropdown .nav-dropdown-submenu .has-submenu > button::after {
  transform: rotate(-45deg);
}

.nav-dropdown-toggle {
  display: none;
  width: 100%;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .nav-dropdown-toggle {
    display: flex;
  }

  ul.nav-dropdown {
    display: none;
    width: 100%;
    align-items: stretch;
  }

  ul.nav-dropdown.is-open,
  ul.nav-dropdown.nav-dropdown-static,
  ul.nav-dropdown.nav-static {
    display: grid;
  }

  nav:has(> ul.nav-dropdown.nav-dropdown-static) > .nav-dropdown-toggle,
  nav:has(> ul.nav-dropdown.nav-static) > .nav-dropdown-toggle {
    display: none !important;
  }

  ul.nav-dropdown a,
  ul.nav-dropdown button {
    width: 100%;
    white-space: normal;
  }

  ul.nav-dropdown li:hover > .nav-dropdown-submenu,
  ul.nav-dropdown li:focus-within > .nav-dropdown-submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  ul.nav-dropdown .nav-dropdown-submenu,
  ul.nav-dropdown .nav-dropdown-submenu .nav-dropdown-submenu {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  ul.nav-dropdown .is-open > .nav-dropdown-submenu,
  ul.nav-dropdown .nav-dropdown-submenu.open {
    display: grid;
  }

  ul.nav-dropdown .has-submenu > a::after,
  ul.nav-dropdown .has-submenu > button::after,
  ul.nav-dropdown .nav-dropdown-submenu .has-submenu > a::after,
  ul.nav-dropdown .nav-dropdown-submenu .has-submenu > button::after {
    transform: rotate(45deg) translateY(-1px);
  }

  ul.nav-dropdown .has-submenu.is-open > a::after,
  ul.nav-dropdown .has-submenu.is-open > button::after {
    transform: rotate(225deg) translateY(-1px);
  }
}


/* =========================================================
   v4.05 — Joomla mod_menu compatibility for dropdown navigation
   Joomla output uses:
   - li.nav-item
   - li.deeper.parent for items with children
   - ul.mod-menu__sub.list-unstyled.small for submenu levels

   This layer is structural only. It does not set colors, font sizes,
   padding, shadows or backgrounds. Use utility classes / wrapper blocks
   for visual styling.
   ========================================================= */

ul.nav-dropdown .mod-menu__sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--tr-fast), visibility var(--tr-fast), transform var(--tr-fast);
}

ul.nav-dropdown .mod-menu__sub .mod-menu__sub {
  top: 0;
  left: 100%;
  transform: translateX(8px);
}

ul.nav-dropdown .mod-menu__sub a,
ul.nav-dropdown .mod-menu__sub button {
  width: 100%;
}

ul.nav-dropdown li.parent > a,
ul.nav-dropdown li.parent > button,
ul.nav-dropdown li.deeper > a,
ul.nav-dropdown li.deeper > button {
  justify-content: space-between;
}

ul.nav-dropdown li.parent > a::after,
ul.nav-dropdown li.parent > button::after,
ul.nav-dropdown li.deeper > a::after,
ul.nav-dropdown li.deeper > button::after {
  content: "";
  width: .45em;
  height: .45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transform-origin: center;
  flex: 0 0 auto;
}

ul.nav-dropdown li:hover > .mod-menu__sub,
ul.nav-dropdown li:focus-within > .mod-menu__sub {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

ul.nav-dropdown .mod-menu__sub li.parent > a::after,
ul.nav-dropdown .mod-menu__sub li.parent > button::after,
ul.nav-dropdown .mod-menu__sub li.deeper > a::after,
ul.nav-dropdown .mod-menu__sub li.deeper > button::after {
  transform: rotate(-45deg);
}

@media (max-width: 767px) {
  ul.nav-dropdown li:hover > .mod-menu__sub,
  ul.nav-dropdown li:focus-within > .mod-menu__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  ul.nav-dropdown .mod-menu__sub,
  ul.nav-dropdown .mod-menu__sub .mod-menu__sub {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  ul.nav-dropdown .is-open > .mod-menu__sub,
  ul.nav-dropdown .mod-menu__sub.open {
    display: grid;
  }

  ul.nav-dropdown li.parent > a::after,
  ul.nav-dropdown li.parent > button::after,
  ul.nav-dropdown li.deeper > a::after,
  ul.nav-dropdown li.deeper > button::after,
  ul.nav-dropdown .mod-menu__sub li.parent > a::after,
  ul.nav-dropdown .mod-menu__sub li.parent > button::after,
  ul.nav-dropdown .mod-menu__sub li.deeper > a::after,
  ul.nav-dropdown .mod-menu__sub li.deeper > button::after {
    transform: rotate(45deg) translateY(-1px);
  }

  ul.nav-dropdown li.parent.is-open > a::after,
  ul.nav-dropdown li.parent.is-open > button::after,
  ul.nav-dropdown li.deeper.is-open > a::after,
  ul.nav-dropdown li.deeper.is-open > button::after {
    transform: rotate(225deg) translateY(-1px);
  }
}

/* =========================================================
   v4.05 — Tablet breakpoint, responsive X alignment and image modes
   - mobile: <= 768px
   - tablet: 769px–1180px
   - desktop: >= 1181px
   - x-tab-* applies through the tablet breakpoint; x-mob-* can override it.
   - .wide / .stretch are always active.
   - .d-wide / .d-stretch are active above mobile (>768px).
   - .m-wide / .m-stretch are active on mobile (<=768px).
   ========================================================= */

@media (max-width: 1180px) {
  .x-tab-start { justify-content: flex-start !important; }
  .x-tab-center { justify-content: center !important; }
  .x-tab-end { justify-content: flex-end !important; }
  .x-tab-between { justify-content: space-between !important; }
}

@media (max-width: 768px) {
  .x-mob-start { justify-content: flex-start !important; }
  .x-mob-center { justify-content: center !important; }
  .x-mob-end { justify-content: flex-end !important; }
  .x-mob-between { justify-content: space-between !important; }
}

/* Natural image width: image follows the container width and keeps its ratio. */
.wide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

/* Cover image: fills the available media area and crops excess content. */
.stretch,
.stretch > figure {
  position: relative;
  min-height: 180px;
  overflow: hidden;
}

.stretch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: var(--r-md);
  transition: var(--tr-fast);
}

@media (min-width: 769px) {
  .d-wide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-md);
  }

  .d-stretch,
  .d-stretch > figure {
    position: relative;
    min-height: 180px;
    overflow: hidden;
  }

  .d-stretch img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: var(--r-md);
    transition: var(--tr-fast);
  }
}

@media (max-width: 768px) {
  .m-wide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-md);
  }

  .m-stretch,
  .m-stretch > figure {
    position: relative;
    min-height: 180px;
    overflow: hidden;
  }

  .m-stretch img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: var(--r-md);
    transition: var(--tr-fast);
  }
}

/* =========================================================
   Definition
   Semantic markup without an extra heading wrapper:
   <div class="definition red">
     <h3>Definition title</h3>
     <p>Definition text...</p>
   </div>

   Modifiers:
   - .definition        = gray lines + black heading
   - .definition.gray   = gray lines + gray heading
   - .definition.red    = red lines + red heading
   - .definition.gold   = gold lines + gold heading
   ========================================================= */
.definition {
  --definition-color: var(--c-border);
  --definition-title-color: var(--c-text);

  width: auto;
  margin-inline: clamp(var(--s-5), 4vw, var(--s-7));
  padding-block: var(--s-5);
  border-bottom: 2px solid var(--definition-color);
}

.definition.gray {
  --definition-title-color: var(--c-border);
}

.definition.red {
  --definition-color: var(--c-primary);
  --definition-title-color: var(--c-primary);
}

.definition.gold {
  --definition-color: var(--c-gold);
  --definition-title-color: var(--c-gold);
}

.definition > :is(h2, h3, h4) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  width: 100%;
  margin: 0 0 var(--s-3);
  color: var(--definition-title-color);
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
}

.definition > :is(h2, h3, h4)::before,
.definition > :is(h2, h3, h4)::after {
  content: "";
  flex: 1 1 0;
  min-width: var(--s-5);
  height: 2px;
  background-color: var(--definition-color);
}

.definition > p {
  margin: 0;
  color: var(--c-text-soft);
}

@media (max-width: 768px) {
  .definition {
    margin-inline: var(--s-4);
  }

  .definition > :is(h2, h3, h4) {
    gap: var(--s-3);
  }
}

/* =========================================================
   Tabs
   Base markup:
   <div class="tab-section tabs-vertical">
     <ul class="tab-header">
       <li><button class="tab-link active" type="button">Tab</button></li>
     </ul>
     <div class="tab-contents">
       <section class="tab-content active">...</section>
     </div>
   </div>

   Variants:
   - .tabs-horizontal: tabs above the content.
   - .tabs-vertical: tabs at the left on desktop and horizontally scrollable
     through the tab/mobile range.
   - .tabs-sticky: keeps the tab header visible inside the component.
     Override --tabs-sticky-offset when needed.
   ========================================================= */
.tab-section {
  --tabs-accent: var(--c-border);
  --tabs-accent-hover: var(--c-muted);
  --tabs-accent-soft: var(--c-surface-2);
  --tabs-active-color: var(--c-text);
  --tabs-hover-color: var(--c-white);
  --tabs-panel-bg: var(--c-surface);
  --tabs-tab-bg: var(--tabs-accent-soft);
  --tabs-tab-color: var(--c-text);
  --tabs-sticky-offset: var(--s-4);

  width: 100%;
  min-width: 0;
}

.tab-section.gray,
.tab-section-gray,
.tab-section.tabs-gray {
  --tabs-accent: var(--c-border);
  --tabs-accent-hover: var(--c-muted);
  --tabs-accent-soft: var(--c-surface-2);
  --tabs-active-color: var(--c-text);
  --tabs-hover-color: var(--c-white);
}

.tab-section.red,
.tab-section-primary,
.tab-section-red,
.tab-section.tabs-primary,
.tab-section.tabs-red {
  --tabs-accent: var(--c-primary);
  --tabs-accent-hover: var(--c-primary-hover);
  --tabs-accent-soft: var(--c-primary-soft);
  --tabs-active-color: var(--c-primary);
  --tabs-hover-color: var(--c-white);
}

.tab-section.gold,
.tab-section-gold,
.tab-section.tabs-gold {
  --tabs-accent: var(--c-gold);
  --tabs-accent-hover: var(--c-gold-hover);
  --tabs-accent-soft: var(--c-gold-soft);
  --tabs-active-color: var(--c-text);
  --tabs-hover-color: var(--c-text);
}

.tab-header {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--s-1);
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--c-border) transparent;
}

.tab-header::-webkit-scrollbar {
  height: 6px;
}

.tab-header::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--c-border);
}

.tab-header > li,
.content .tab-header > li,
.content .tab-header > li + li {
  margin: 0;
  list-style: none;
}

.tab-header > li {
  display: flex;
  min-width: 0;
}

.tab-link {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--s-2) var(--s-4);
  border: 0;
  border-top: 4px solid transparent;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--tabs-tab-bg);
  color: var(--tabs-tab-color);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast);
}

.tab-link:hover {
  background: var(--tabs-accent-hover);
  color: var(--tabs-hover-color);
  text-decoration: none;
}

.tab-link.active,
.tab-link[aria-selected="true"],
.tab-link.active:hover,
.tab-link[aria-selected="true"]:hover {
  z-index: 2;
  border-color: var(--tabs-accent);
  background: var(--tabs-panel-bg);
  color: var(--tabs-active-color);
}

.tab-link:focus-visible {
  z-index: 3;
}

/* Optional image tabs. Use .tab-link-img; .img is kept only as an image-layout modifier. */
.tab-link > img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--s-3);
  border-radius: var(--r-sm);
}

.tab-link.img,
.tab-link.tab-link-img {
  flex-direction: column;
  max-width: 220px;
  padding: var(--s-3);
  border-top-width: 6px;
}

.tab-contents {
  min-width: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--tabs-panel-bg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.tab-content {
  display: none;
  min-width: 0;
  padding: var(--s-6);
  background: var(--tabs-panel-bg);
}

.tab-content.active,
.tab-content:not([hidden])[aria-hidden="false"] {
  display: block;
  animation: tabs-content-in var(--tr-fast);
}

.tab-content[hidden] {
  display: none !important;
}

@keyframes tabs-content-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Horizontal tabs share the available header width on desktop. */
.tab-section.tabs-horizontal .tab-header > li {
  flex: 1 1 0;
}

.tab-section.tabs-horizontal .tab-header > .tab-link,
.tab-section.tabs-horizontal .tab-header > li > .tab-link {
  width: 100%;
  white-space: normal;
}

/* Vertical desktop layout. */
.tab-section.tabs-vertical {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: start;
}

.tab-section.tabs-vertical .tab-header {
  display: grid;
  align-content: start;
  justify-content: stretch;
  gap: var(--s-1);
  overflow: visible;
}

.tab-section.tabs-vertical .tab-header > li:not(.tab-link) {
  display: block;
}

.tab-section.tabs-vertical .tab-link {
  justify-content: flex-start;
  width: calc(100% - var(--s-4));
  margin-left: var(--s-4);
  border-top: 0;
  border-left: 4px solid transparent;
  border-radius: var(--r-md) 0 0 var(--r-md);
  text-align: left;
  white-space: normal;
}

.tab-section.tabs-vertical .tab-link.active,
.tab-section.tabs-vertical .tab-link[aria-selected="true"] {
  width: 100%;
  margin-left: 0;
  border-left-color: var(--tabs-accent);
  box-shadow: var(--sh-sm);
}

.tab-section.tabs-vertical .tab-contents {
  min-height: 100%;
  border-radius: 0 var(--r-md) var(--r-md) var(--r-md);
}

.tab-section.tabs-sticky > .tab-header {
  position: sticky;
  top: var(--tabs-sticky-offset);
  z-index: 4;
}

/* Tablet and mobile: vertical tabs become a horizontal scrollable strip. */
@media (max-width: 1180px) {
  .tab-section.tabs-vertical {
    display: block;
  }

  .tab-section.tabs-vertical .tab-header {
    display: flex;
    justify-content: flex-start;
    gap: var(--s-1);
    padding-inline: var(--s-2);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }

  .tab-section.tabs-vertical .tab-header > li {
    display: flex;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .tab-section.tabs-vertical .tab-link {
    justify-content: center;
    width: auto;
    min-width: 220px;
    height: 100%;
    margin-left: 0;
    border-top: 4px solid transparent;
    border-left: 0;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    text-align: center;
  }

  .tab-section.tabs-vertical .tab-link.active,
  .tab-section.tabs-vertical .tab-link[aria-selected="true"] {
    width: auto;
    margin-left: 0;
    border-top-color: var(--tabs-accent);
    border-left: 0;
    box-shadow: none;
  }

  .tab-section.tabs-vertical .tab-contents {
    border-radius: 0 0 var(--r-md) var(--r-md);
  }
}

@media (max-width: 768px) {
  .tab-header {
    justify-content: flex-start;
    scroll-snap-type: x proximity;
  }

  .tab-header > li {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }

  .tab-link,
  .tab-section.tabs-horizontal .tab-header > .tab-link,
  .tab-section.tabs-horizontal .tab-header > li > .tab-link,
  .tab-section.tabs-vertical .tab-link {
    width: auto;
    min-width: min(78vw, 300px);
    white-space: normal;
  }

  .tab-content {
    padding: var(--s-5);
  }
}

/* TinyMCE/Joomla editor: all panels remain visible and editable.
   Joomla/TinyMCE can identify the editable iframe body either with
   .mce-content-body or body#tinymce, so both forms are supported.

   The explicit color/background reset is editor-only. It prevents generic
   editor.css rules such as .red / .gold / .gray from painting the entire
   tab component. Frontend tab colors continue to be controlled exclusively
   through the --tabs-* variables above. */
body#tinymce .tab-section,
body.mce-content-body .tab-section,
.mce-content-body .tab-section,
body#tinymce .tab-section.tabs-vertical,
body.mce-content-body .tab-section.tabs-vertical,
.mce-content-body .tab-section.tabs-vertical {
  display: block;
  color: inherit !important;
  background: transparent !important;
}

body#tinymce .tab-header,
body.mce-content-body .tab-header,
.mce-content-body .tab-header {
  display: none !important;
}

body#tinymce .tab-contents,
body.mce-content-body .tab-contents,
.mce-content-body .tab-contents {
  display: grid;
  gap: var(--s-4);
  border-radius: var(--r-md);
  background: transparent !important;
  box-shadow: none;
  overflow: visible;
}

body#tinymce .tab-content,
body#tinymce .tab-content[hidden],
body.mce-content-body .tab-content,
body.mce-content-body .tab-content[hidden],
.mce-content-body .tab-content,
.mce-content-body .tab-content[hidden] {
  display: block !important;
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface) !important;
  color: inherit !important;
  animation: none;
}



/* =========================================================
   67. Full-bleed negative margin utilities
   Compensate parent padding and let a child reach the parent's edges.
   Examples:
   - .p-4 > .full-x-4
   - .p-tab-3 > .full-tab-x-3
   - .p-mob-2 > .full-mob-x-2
   Directions: t, r, b, l. Axes: x, y. Scale: 0-12.
   These utilities change margin only; keep the target block width automatic.
   ========================================================= */
.full-0 { margin: calc(var(--s-0) * -1) !important; }
.full-t-0 { margin-top: calc(var(--s-0) * -1) !important; }
.full-r-0 { margin-right: calc(var(--s-0) * -1) !important; }
.full-b-0 { margin-bottom: calc(var(--s-0) * -1) !important; }
.full-l-0 { margin-left: calc(var(--s-0) * -1) !important; }
.full-x-0 { margin-inline: calc(var(--s-0) * -1) !important; }
.full-y-0 { margin-block: calc(var(--s-0) * -1) !important; }
.full-1 { margin: calc(var(--s-1) * -1) !important; }
.full-t-1 { margin-top: calc(var(--s-1) * -1) !important; }
.full-r-1 { margin-right: calc(var(--s-1) * -1) !important; }
.full-b-1 { margin-bottom: calc(var(--s-1) * -1) !important; }
.full-l-1 { margin-left: calc(var(--s-1) * -1) !important; }
.full-x-1 { margin-inline: calc(var(--s-1) * -1) !important; }
.full-y-1 { margin-block: calc(var(--s-1) * -1) !important; }
.full-2 { margin: calc(var(--s-2) * -1) !important; }
.full-t-2 { margin-top: calc(var(--s-2) * -1) !important; }
.full-r-2 { margin-right: calc(var(--s-2) * -1) !important; }
.full-b-2 { margin-bottom: calc(var(--s-2) * -1) !important; }
.full-l-2 { margin-left: calc(var(--s-2) * -1) !important; }
.full-x-2 { margin-inline: calc(var(--s-2) * -1) !important; }
.full-y-2 { margin-block: calc(var(--s-2) * -1) !important; }
.full-3 { margin: calc(var(--s-3) * -1) !important; }
.full-t-3 { margin-top: calc(var(--s-3) * -1) !important; }
.full-r-3 { margin-right: calc(var(--s-3) * -1) !important; }
.full-b-3 { margin-bottom: calc(var(--s-3) * -1) !important; }
.full-l-3 { margin-left: calc(var(--s-3) * -1) !important; }
.full-x-3 { margin-inline: calc(var(--s-3) * -1) !important; }
.full-y-3 { margin-block: calc(var(--s-3) * -1) !important; }
.full-4 { margin: calc(var(--s-4) * -1) !important; }
.full-t-4 { margin-top: calc(var(--s-4) * -1) !important; }
.full-r-4 { margin-right: calc(var(--s-4) * -1) !important; }
.full-b-4 { margin-bottom: calc(var(--s-4) * -1) !important; }
.full-l-4 { margin-left: calc(var(--s-4) * -1) !important; }
.full-x-4 { margin-inline: calc(var(--s-4) * -1) !important; }
.full-y-4 { margin-block: calc(var(--s-4) * -1) !important; }
.full-5 { margin: calc(var(--s-5) * -1) !important; }
.full-t-5 { margin-top: calc(var(--s-5) * -1) !important; }
.full-r-5 { margin-right: calc(var(--s-5) * -1) !important; }
.full-b-5 { margin-bottom: calc(var(--s-5) * -1) !important; }
.full-l-5 { margin-left: calc(var(--s-5) * -1) !important; }
.full-x-5 { margin-inline: calc(var(--s-5) * -1) !important; }
.full-y-5 { margin-block: calc(var(--s-5) * -1) !important; }
.full-6 { margin: calc(var(--s-6) * -1) !important; }
.full-t-6 { margin-top: calc(var(--s-6) * -1) !important; }
.full-r-6 { margin-right: calc(var(--s-6) * -1) !important; }
.full-b-6 { margin-bottom: calc(var(--s-6) * -1) !important; }
.full-l-6 { margin-left: calc(var(--s-6) * -1) !important; }
.full-x-6 { margin-inline: calc(var(--s-6) * -1) !important; }
.full-y-6 { margin-block: calc(var(--s-6) * -1) !important; }
.full-7 { margin: calc(var(--s-7) * -1) !important; }
.full-t-7 { margin-top: calc(var(--s-7) * -1) !important; }
.full-r-7 { margin-right: calc(var(--s-7) * -1) !important; }
.full-b-7 { margin-bottom: calc(var(--s-7) * -1) !important; }
.full-l-7 { margin-left: calc(var(--s-7) * -1) !important; }
.full-x-7 { margin-inline: calc(var(--s-7) * -1) !important; }
.full-y-7 { margin-block: calc(var(--s-7) * -1) !important; }
.full-8 { margin: calc(var(--s-8) * -1) !important; }
.full-t-8 { margin-top: calc(var(--s-8) * -1) !important; }
.full-r-8 { margin-right: calc(var(--s-8) * -1) !important; }
.full-b-8 { margin-bottom: calc(var(--s-8) * -1) !important; }
.full-l-8 { margin-left: calc(var(--s-8) * -1) !important; }
.full-x-8 { margin-inline: calc(var(--s-8) * -1) !important; }
.full-y-8 { margin-block: calc(var(--s-8) * -1) !important; }
.full-9 { margin: calc(var(--s-9) * -1) !important; }
.full-t-9 { margin-top: calc(var(--s-9) * -1) !important; }
.full-r-9 { margin-right: calc(var(--s-9) * -1) !important; }
.full-b-9 { margin-bottom: calc(var(--s-9) * -1) !important; }
.full-l-9 { margin-left: calc(var(--s-9) * -1) !important; }
.full-x-9 { margin-inline: calc(var(--s-9) * -1) !important; }
.full-y-9 { margin-block: calc(var(--s-9) * -1) !important; }
.full-10 { margin: calc(var(--s-10) * -1) !important; }
.full-t-10 { margin-top: calc(var(--s-10) * -1) !important; }
.full-r-10 { margin-right: calc(var(--s-10) * -1) !important; }
.full-b-10 { margin-bottom: calc(var(--s-10) * -1) !important; }
.full-l-10 { margin-left: calc(var(--s-10) * -1) !important; }
.full-x-10 { margin-inline: calc(var(--s-10) * -1) !important; }
.full-y-10 { margin-block: calc(var(--s-10) * -1) !important; }
.full-11 { margin: calc(var(--s-11) * -1) !important; }
.full-t-11 { margin-top: calc(var(--s-11) * -1) !important; }
.full-r-11 { margin-right: calc(var(--s-11) * -1) !important; }
.full-b-11 { margin-bottom: calc(var(--s-11) * -1) !important; }
.full-l-11 { margin-left: calc(var(--s-11) * -1) !important; }
.full-x-11 { margin-inline: calc(var(--s-11) * -1) !important; }
.full-y-11 { margin-block: calc(var(--s-11) * -1) !important; }
.full-12 { margin: calc(var(--s-12) * -1) !important; }
.full-t-12 { margin-top: calc(var(--s-12) * -1) !important; }
.full-r-12 { margin-right: calc(var(--s-12) * -1) !important; }
.full-b-12 { margin-bottom: calc(var(--s-12) * -1) !important; }
.full-l-12 { margin-left: calc(var(--s-12) * -1) !important; }
.full-x-12 { margin-inline: calc(var(--s-12) * -1) !important; }
.full-y-12 { margin-block: calc(var(--s-12) * -1) !important; }

@media (max-width: 1180px) {
  .full-tab-0 { margin: calc(var(--s-0) * -1) !important; }
  .full-tab-t-0 { margin-top: calc(var(--s-0) * -1) !important; }
  .full-tab-r-0 { margin-right: calc(var(--s-0) * -1) !important; }
  .full-tab-b-0 { margin-bottom: calc(var(--s-0) * -1) !important; }
  .full-tab-l-0 { margin-left: calc(var(--s-0) * -1) !important; }
  .full-tab-x-0 { margin-inline: calc(var(--s-0) * -1) !important; }
  .full-tab-y-0 { margin-block: calc(var(--s-0) * -1) !important; }
  .full-tab-1 { margin: calc(var(--s-1) * -1) !important; }
  .full-tab-t-1 { margin-top: calc(var(--s-1) * -1) !important; }
  .full-tab-r-1 { margin-right: calc(var(--s-1) * -1) !important; }
  .full-tab-b-1 { margin-bottom: calc(var(--s-1) * -1) !important; }
  .full-tab-l-1 { margin-left: calc(var(--s-1) * -1) !important; }
  .full-tab-x-1 { margin-inline: calc(var(--s-1) * -1) !important; }
  .full-tab-y-1 { margin-block: calc(var(--s-1) * -1) !important; }
  .full-tab-2 { margin: calc(var(--s-2) * -1) !important; }
  .full-tab-t-2 { margin-top: calc(var(--s-2) * -1) !important; }
  .full-tab-r-2 { margin-right: calc(var(--s-2) * -1) !important; }
  .full-tab-b-2 { margin-bottom: calc(var(--s-2) * -1) !important; }
  .full-tab-l-2 { margin-left: calc(var(--s-2) * -1) !important; }
  .full-tab-x-2 { margin-inline: calc(var(--s-2) * -1) !important; }
  .full-tab-y-2 { margin-block: calc(var(--s-2) * -1) !important; }
  .full-tab-3 { margin: calc(var(--s-3) * -1) !important; }
  .full-tab-t-3 { margin-top: calc(var(--s-3) * -1) !important; }
  .full-tab-r-3 { margin-right: calc(var(--s-3) * -1) !important; }
  .full-tab-b-3 { margin-bottom: calc(var(--s-3) * -1) !important; }
  .full-tab-l-3 { margin-left: calc(var(--s-3) * -1) !important; }
  .full-tab-x-3 { margin-inline: calc(var(--s-3) * -1) !important; }
  .full-tab-y-3 { margin-block: calc(var(--s-3) * -1) !important; }
  .full-tab-4 { margin: calc(var(--s-4) * -1) !important; }
  .full-tab-t-4 { margin-top: calc(var(--s-4) * -1) !important; }
  .full-tab-r-4 { margin-right: calc(var(--s-4) * -1) !important; }
  .full-tab-b-4 { margin-bottom: calc(var(--s-4) * -1) !important; }
  .full-tab-l-4 { margin-left: calc(var(--s-4) * -1) !important; }
  .full-tab-x-4 { margin-inline: calc(var(--s-4) * -1) !important; }
  .full-tab-y-4 { margin-block: calc(var(--s-4) * -1) !important; }
  .full-tab-5 { margin: calc(var(--s-5) * -1) !important; }
  .full-tab-t-5 { margin-top: calc(var(--s-5) * -1) !important; }
  .full-tab-r-5 { margin-right: calc(var(--s-5) * -1) !important; }
  .full-tab-b-5 { margin-bottom: calc(var(--s-5) * -1) !important; }
  .full-tab-l-5 { margin-left: calc(var(--s-5) * -1) !important; }
  .full-tab-x-5 { margin-inline: calc(var(--s-5) * -1) !important; }
  .full-tab-y-5 { margin-block: calc(var(--s-5) * -1) !important; }
  .full-tab-6 { margin: calc(var(--s-6) * -1) !important; }
  .full-tab-t-6 { margin-top: calc(var(--s-6) * -1) !important; }
  .full-tab-r-6 { margin-right: calc(var(--s-6) * -1) !important; }
  .full-tab-b-6 { margin-bottom: calc(var(--s-6) * -1) !important; }
  .full-tab-l-6 { margin-left: calc(var(--s-6) * -1) !important; }
  .full-tab-x-6 { margin-inline: calc(var(--s-6) * -1) !important; }
  .full-tab-y-6 { margin-block: calc(var(--s-6) * -1) !important; }
  .full-tab-7 { margin: calc(var(--s-7) * -1) !important; }
  .full-tab-t-7 { margin-top: calc(var(--s-7) * -1) !important; }
  .full-tab-r-7 { margin-right: calc(var(--s-7) * -1) !important; }
  .full-tab-b-7 { margin-bottom: calc(var(--s-7) * -1) !important; }
  .full-tab-l-7 { margin-left: calc(var(--s-7) * -1) !important; }
  .full-tab-x-7 { margin-inline: calc(var(--s-7) * -1) !important; }
  .full-tab-y-7 { margin-block: calc(var(--s-7) * -1) !important; }
  .full-tab-8 { margin: calc(var(--s-8) * -1) !important; }
  .full-tab-t-8 { margin-top: calc(var(--s-8) * -1) !important; }
  .full-tab-r-8 { margin-right: calc(var(--s-8) * -1) !important; }
  .full-tab-b-8 { margin-bottom: calc(var(--s-8) * -1) !important; }
  .full-tab-l-8 { margin-left: calc(var(--s-8) * -1) !important; }
  .full-tab-x-8 { margin-inline: calc(var(--s-8) * -1) !important; }
  .full-tab-y-8 { margin-block: calc(var(--s-8) * -1) !important; }
  .full-tab-9 { margin: calc(var(--s-9) * -1) !important; }
  .full-tab-t-9 { margin-top: calc(var(--s-9) * -1) !important; }
  .full-tab-r-9 { margin-right: calc(var(--s-9) * -1) !important; }
  .full-tab-b-9 { margin-bottom: calc(var(--s-9) * -1) !important; }
  .full-tab-l-9 { margin-left: calc(var(--s-9) * -1) !important; }
  .full-tab-x-9 { margin-inline: calc(var(--s-9) * -1) !important; }
  .full-tab-y-9 { margin-block: calc(var(--s-9) * -1) !important; }
  .full-tab-10 { margin: calc(var(--s-10) * -1) !important; }
  .full-tab-t-10 { margin-top: calc(var(--s-10) * -1) !important; }
  .full-tab-r-10 { margin-right: calc(var(--s-10) * -1) !important; }
  .full-tab-b-10 { margin-bottom: calc(var(--s-10) * -1) !important; }
  .full-tab-l-10 { margin-left: calc(var(--s-10) * -1) !important; }
  .full-tab-x-10 { margin-inline: calc(var(--s-10) * -1) !important; }
  .full-tab-y-10 { margin-block: calc(var(--s-10) * -1) !important; }
  .full-tab-11 { margin: calc(var(--s-11) * -1) !important; }
  .full-tab-t-11 { margin-top: calc(var(--s-11) * -1) !important; }
  .full-tab-r-11 { margin-right: calc(var(--s-11) * -1) !important; }
  .full-tab-b-11 { margin-bottom: calc(var(--s-11) * -1) !important; }
  .full-tab-l-11 { margin-left: calc(var(--s-11) * -1) !important; }
  .full-tab-x-11 { margin-inline: calc(var(--s-11) * -1) !important; }
  .full-tab-y-11 { margin-block: calc(var(--s-11) * -1) !important; }
  .full-tab-12 { margin: calc(var(--s-12) * -1) !important; }
  .full-tab-t-12 { margin-top: calc(var(--s-12) * -1) !important; }
  .full-tab-r-12 { margin-right: calc(var(--s-12) * -1) !important; }
  .full-tab-b-12 { margin-bottom: calc(var(--s-12) * -1) !important; }
  .full-tab-l-12 { margin-left: calc(var(--s-12) * -1) !important; }
  .full-tab-x-12 { margin-inline: calc(var(--s-12) * -1) !important; }
  .full-tab-y-12 { margin-block: calc(var(--s-12) * -1) !important; }
}

@media (max-width: 768px) {
  .full-mob-0 { margin: calc(var(--s-0) * -1) !important; }
  .full-mob-t-0 { margin-top: calc(var(--s-0) * -1) !important; }
  .full-mob-r-0 { margin-right: calc(var(--s-0) * -1) !important; }
  .full-mob-b-0 { margin-bottom: calc(var(--s-0) * -1) !important; }
  .full-mob-l-0 { margin-left: calc(var(--s-0) * -1) !important; }
  .full-mob-x-0 { margin-inline: calc(var(--s-0) * -1) !important; }
  .full-mob-y-0 { margin-block: calc(var(--s-0) * -1) !important; }
  .full-mob-1 { margin: calc(var(--s-1) * -1) !important; }
  .full-mob-t-1 { margin-top: calc(var(--s-1) * -1) !important; }
  .full-mob-r-1 { margin-right: calc(var(--s-1) * -1) !important; }
  .full-mob-b-1 { margin-bottom: calc(var(--s-1) * -1) !important; }
  .full-mob-l-1 { margin-left: calc(var(--s-1) * -1) !important; }
  .full-mob-x-1 { margin-inline: calc(var(--s-1) * -1) !important; }
  .full-mob-y-1 { margin-block: calc(var(--s-1) * -1) !important; }
  .full-mob-2 { margin: calc(var(--s-2) * -1) !important; }
  .full-mob-t-2 { margin-top: calc(var(--s-2) * -1) !important; }
  .full-mob-r-2 { margin-right: calc(var(--s-2) * -1) !important; }
  .full-mob-b-2 { margin-bottom: calc(var(--s-2) * -1) !important; }
  .full-mob-l-2 { margin-left: calc(var(--s-2) * -1) !important; }
  .full-mob-x-2 { margin-inline: calc(var(--s-2) * -1) !important; }
  .full-mob-y-2 { margin-block: calc(var(--s-2) * -1) !important; }
  .full-mob-3 { margin: calc(var(--s-3) * -1) !important; }
  .full-mob-t-3 { margin-top: calc(var(--s-3) * -1) !important; }
  .full-mob-r-3 { margin-right: calc(var(--s-3) * -1) !important; }
  .full-mob-b-3 { margin-bottom: calc(var(--s-3) * -1) !important; }
  .full-mob-l-3 { margin-left: calc(var(--s-3) * -1) !important; }
  .full-mob-x-3 { margin-inline: calc(var(--s-3) * -1) !important; }
  .full-mob-y-3 { margin-block: calc(var(--s-3) * -1) !important; }
  .full-mob-4 { margin: calc(var(--s-4) * -1) !important; }
  .full-mob-t-4 { margin-top: calc(var(--s-4) * -1) !important; }
  .full-mob-r-4 { margin-right: calc(var(--s-4) * -1) !important; }
  .full-mob-b-4 { margin-bottom: calc(var(--s-4) * -1) !important; }
  .full-mob-l-4 { margin-left: calc(var(--s-4) * -1) !important; }
  .full-mob-x-4 { margin-inline: calc(var(--s-4) * -1) !important; }
  .full-mob-y-4 { margin-block: calc(var(--s-4) * -1) !important; }
  .full-mob-5 { margin: calc(var(--s-5) * -1) !important; }
  .full-mob-t-5 { margin-top: calc(var(--s-5) * -1) !important; }
  .full-mob-r-5 { margin-right: calc(var(--s-5) * -1) !important; }
  .full-mob-b-5 { margin-bottom: calc(var(--s-5) * -1) !important; }
  .full-mob-l-5 { margin-left: calc(var(--s-5) * -1) !important; }
  .full-mob-x-5 { margin-inline: calc(var(--s-5) * -1) !important; }
  .full-mob-y-5 { margin-block: calc(var(--s-5) * -1) !important; }
  .full-mob-6 { margin: calc(var(--s-6) * -1) !important; }
  .full-mob-t-6 { margin-top: calc(var(--s-6) * -1) !important; }
  .full-mob-r-6 { margin-right: calc(var(--s-6) * -1) !important; }
  .full-mob-b-6 { margin-bottom: calc(var(--s-6) * -1) !important; }
  .full-mob-l-6 { margin-left: calc(var(--s-6) * -1) !important; }
  .full-mob-x-6 { margin-inline: calc(var(--s-6) * -1) !important; }
  .full-mob-y-6 { margin-block: calc(var(--s-6) * -1) !important; }
  .full-mob-7 { margin: calc(var(--s-7) * -1) !important; }
  .full-mob-t-7 { margin-top: calc(var(--s-7) * -1) !important; }
  .full-mob-r-7 { margin-right: calc(var(--s-7) * -1) !important; }
  .full-mob-b-7 { margin-bottom: calc(var(--s-7) * -1) !important; }
  .full-mob-l-7 { margin-left: calc(var(--s-7) * -1) !important; }
  .full-mob-x-7 { margin-inline: calc(var(--s-7) * -1) !important; }
  .full-mob-y-7 { margin-block: calc(var(--s-7) * -1) !important; }
  .full-mob-8 { margin: calc(var(--s-8) * -1) !important; }
  .full-mob-t-8 { margin-top: calc(var(--s-8) * -1) !important; }
  .full-mob-r-8 { margin-right: calc(var(--s-8) * -1) !important; }
  .full-mob-b-8 { margin-bottom: calc(var(--s-8) * -1) !important; }
  .full-mob-l-8 { margin-left: calc(var(--s-8) * -1) !important; }
  .full-mob-x-8 { margin-inline: calc(var(--s-8) * -1) !important; }
  .full-mob-y-8 { margin-block: calc(var(--s-8) * -1) !important; }
  .full-mob-9 { margin: calc(var(--s-9) * -1) !important; }
  .full-mob-t-9 { margin-top: calc(var(--s-9) * -1) !important; }
  .full-mob-r-9 { margin-right: calc(var(--s-9) * -1) !important; }
  .full-mob-b-9 { margin-bottom: calc(var(--s-9) * -1) !important; }
  .full-mob-l-9 { margin-left: calc(var(--s-9) * -1) !important; }
  .full-mob-x-9 { margin-inline: calc(var(--s-9) * -1) !important; }
  .full-mob-y-9 { margin-block: calc(var(--s-9) * -1) !important; }
  .full-mob-10 { margin: calc(var(--s-10) * -1) !important; }
  .full-mob-t-10 { margin-top: calc(var(--s-10) * -1) !important; }
  .full-mob-r-10 { margin-right: calc(var(--s-10) * -1) !important; }
  .full-mob-b-10 { margin-bottom: calc(var(--s-10) * -1) !important; }
  .full-mob-l-10 { margin-left: calc(var(--s-10) * -1) !important; }
  .full-mob-x-10 { margin-inline: calc(var(--s-10) * -1) !important; }
  .full-mob-y-10 { margin-block: calc(var(--s-10) * -1) !important; }
  .full-mob-11 { margin: calc(var(--s-11) * -1) !important; }
  .full-mob-t-11 { margin-top: calc(var(--s-11) * -1) !important; }
  .full-mob-r-11 { margin-right: calc(var(--s-11) * -1) !important; }
  .full-mob-b-11 { margin-bottom: calc(var(--s-11) * -1) !important; }
  .full-mob-l-11 { margin-left: calc(var(--s-11) * -1) !important; }
  .full-mob-x-11 { margin-inline: calc(var(--s-11) * -1) !important; }
  .full-mob-y-11 { margin-block: calc(var(--s-11) * -1) !important; }
  .full-mob-12 { margin: calc(var(--s-12) * -1) !important; }
  .full-mob-t-12 { margin-top: calc(var(--s-12) * -1) !important; }
  .full-mob-r-12 { margin-right: calc(var(--s-12) * -1) !important; }
  .full-mob-b-12 { margin-bottom: calc(var(--s-12) * -1) !important; }
  .full-mob-l-12 { margin-left: calc(var(--s-12) * -1) !important; }
  .full-mob-x-12 { margin-inline: calc(var(--s-12) * -1) !important; }
  .full-mob-y-12 { margin-block: calc(var(--s-12) * -1) !important; }
}


/* =========================================================
   82. Direct-child spacing utilities
   - Class is placed on the parent and affects direct child div elements only.
   - Spacing is created only between children, never outside the first/last child.
   - Responsive next-tab-* / next-mob-* reset the base direction before applying
     the breakpoint-specific direction.
   - Prefer gap-* when the parent is already flex/grid. Use next-* for normal
     document-flow wrappers or when directional child margins are required.
   ========================================================= */
.next-t-0 > div + div { margin-block-start: var(--s-0) !important; }
.next-r-0 > div:not(:last-child) { margin-inline-end: var(--s-0) !important; }
.next-b-0 > div:not(:last-child) { margin-block-end: var(--s-0) !important; }
.next-l-0 > div + div { margin-inline-start: var(--s-0) !important; }
.next-x-0 > div:not(:last-child) { margin-inline-end: var(--s-0) !important; }
.next-y-0 > div:not(:last-child) { margin-block-end: var(--s-0) !important; }
.next-t-1 > div + div { margin-block-start: var(--s-1) !important; }
.next-r-1 > div:not(:last-child) { margin-inline-end: var(--s-1) !important; }
.next-b-1 > div:not(:last-child) { margin-block-end: var(--s-1) !important; }
.next-l-1 > div + div { margin-inline-start: var(--s-1) !important; }
.next-x-1 > div:not(:last-child) { margin-inline-end: var(--s-1) !important; }
.next-y-1 > div:not(:last-child) { margin-block-end: var(--s-1) !important; }
.next-t-2 > div + div { margin-block-start: var(--s-2) !important; }
.next-r-2 > div:not(:last-child) { margin-inline-end: var(--s-2) !important; }
.next-b-2 > div:not(:last-child) { margin-block-end: var(--s-2) !important; }
.next-l-2 > div + div { margin-inline-start: var(--s-2) !important; }
.next-x-2 > div:not(:last-child) { margin-inline-end: var(--s-2) !important; }
.next-y-2 > div:not(:last-child) { margin-block-end: var(--s-2) !important; }
.next-t-3 > div + div { margin-block-start: var(--s-3) !important; }
.next-r-3 > div:not(:last-child) { margin-inline-end: var(--s-3) !important; }
.next-b-3 > div:not(:last-child) { margin-block-end: var(--s-3) !important; }
.next-l-3 > div + div { margin-inline-start: var(--s-3) !important; }
.next-x-3 > div:not(:last-child) { margin-inline-end: var(--s-3) !important; }
.next-y-3 > div:not(:last-child) { margin-block-end: var(--s-3) !important; }
.next-t-4 > div + div { margin-block-start: var(--s-4) !important; }
.next-r-4 > div:not(:last-child) { margin-inline-end: var(--s-4) !important; }
.next-b-4 > div:not(:last-child) { margin-block-end: var(--s-4) !important; }
.next-l-4 > div + div { margin-inline-start: var(--s-4) !important; }
.next-x-4 > div:not(:last-child) { margin-inline-end: var(--s-4) !important; }
.next-y-4 > div:not(:last-child) { margin-block-end: var(--s-4) !important; }
.next-t-5 > div + div { margin-block-start: var(--s-5) !important; }
.next-r-5 > div:not(:last-child) { margin-inline-end: var(--s-5) !important; }
.next-b-5 > div:not(:last-child) { margin-block-end: var(--s-5) !important; }
.next-l-5 > div + div { margin-inline-start: var(--s-5) !important; }
.next-x-5 > div:not(:last-child) { margin-inline-end: var(--s-5) !important; }
.next-y-5 > div:not(:last-child) { margin-block-end: var(--s-5) !important; }
.next-t-6 > div + div { margin-block-start: var(--s-6) !important; }
.next-r-6 > div:not(:last-child) { margin-inline-end: var(--s-6) !important; }
.next-b-6 > div:not(:last-child) { margin-block-end: var(--s-6) !important; }
.next-l-6 > div + div { margin-inline-start: var(--s-6) !important; }
.next-x-6 > div:not(:last-child) { margin-inline-end: var(--s-6) !important; }
.next-y-6 > div:not(:last-child) { margin-block-end: var(--s-6) !important; }
.next-t-7 > div + div { margin-block-start: var(--s-7) !important; }
.next-r-7 > div:not(:last-child) { margin-inline-end: var(--s-7) !important; }
.next-b-7 > div:not(:last-child) { margin-block-end: var(--s-7) !important; }
.next-l-7 > div + div { margin-inline-start: var(--s-7) !important; }
.next-x-7 > div:not(:last-child) { margin-inline-end: var(--s-7) !important; }
.next-y-7 > div:not(:last-child) { margin-block-end: var(--s-7) !important; }
.next-t-8 > div + div { margin-block-start: var(--s-8) !important; }
.next-r-8 > div:not(:last-child) { margin-inline-end: var(--s-8) !important; }
.next-b-8 > div:not(:last-child) { margin-block-end: var(--s-8) !important; }
.next-l-8 > div + div { margin-inline-start: var(--s-8) !important; }
.next-x-8 > div:not(:last-child) { margin-inline-end: var(--s-8) !important; }
.next-y-8 > div:not(:last-child) { margin-block-end: var(--s-8) !important; }
.next-t-9 > div + div { margin-block-start: var(--s-9) !important; }
.next-r-9 > div:not(:last-child) { margin-inline-end: var(--s-9) !important; }
.next-b-9 > div:not(:last-child) { margin-block-end: var(--s-9) !important; }
.next-l-9 > div + div { margin-inline-start: var(--s-9) !important; }
.next-x-9 > div:not(:last-child) { margin-inline-end: var(--s-9) !important; }
.next-y-9 > div:not(:last-child) { margin-block-end: var(--s-9) !important; }
.next-t-10 > div + div { margin-block-start: var(--s-10) !important; }
.next-r-10 > div:not(:last-child) { margin-inline-end: var(--s-10) !important; }
.next-b-10 > div:not(:last-child) { margin-block-end: var(--s-10) !important; }
.next-l-10 > div + div { margin-inline-start: var(--s-10) !important; }
.next-x-10 > div:not(:last-child) { margin-inline-end: var(--s-10) !important; }
.next-y-10 > div:not(:last-child) { margin-block-end: var(--s-10) !important; }
.next-t-11 > div + div { margin-block-start: var(--s-11) !important; }
.next-r-11 > div:not(:last-child) { margin-inline-end: var(--s-11) !important; }
.next-b-11 > div:not(:last-child) { margin-block-end: var(--s-11) !important; }
.next-l-11 > div + div { margin-inline-start: var(--s-11) !important; }
.next-x-11 > div:not(:last-child) { margin-inline-end: var(--s-11) !important; }
.next-y-11 > div:not(:last-child) { margin-block-end: var(--s-11) !important; }
.next-t-12 > div + div { margin-block-start: var(--s-12) !important; }
.next-r-12 > div:not(:last-child) { margin-inline-end: var(--s-12) !important; }
.next-b-12 > div:not(:last-child) { margin-block-end: var(--s-12) !important; }
.next-l-12 > div + div { margin-inline-start: var(--s-12) !important; }
.next-x-12 > div:not(:last-child) { margin-inline-end: var(--s-12) !important; }
.next-y-12 > div:not(:last-child) { margin-block-end: var(--s-12) !important; }

@media (max-width: 1180px) {
  :is([class^="next-tab-"], [class*=" next-tab-"]) > div {
    margin-block-start: 0 !important;
    margin-inline-end: 0 !important;
    margin-block-end: 0 !important;
    margin-inline-start: 0 !important;
  }
  .next-tab-t-0 > div + div { margin-block-start: var(--s-0) !important; }
  .next-tab-r-0 > div:not(:last-child) { margin-inline-end: var(--s-0) !important; }
  .next-tab-b-0 > div:not(:last-child) { margin-block-end: var(--s-0) !important; }
  .next-tab-l-0 > div + div { margin-inline-start: var(--s-0) !important; }
  .next-tab-x-0 > div:not(:last-child) { margin-inline-end: var(--s-0) !important; }
  .next-tab-y-0 > div:not(:last-child) { margin-block-end: var(--s-0) !important; }
  .next-tab-t-1 > div + div { margin-block-start: var(--s-1) !important; }
  .next-tab-r-1 > div:not(:last-child) { margin-inline-end: var(--s-1) !important; }
  .next-tab-b-1 > div:not(:last-child) { margin-block-end: var(--s-1) !important; }
  .next-tab-l-1 > div + div { margin-inline-start: var(--s-1) !important; }
  .next-tab-x-1 > div:not(:last-child) { margin-inline-end: var(--s-1) !important; }
  .next-tab-y-1 > div:not(:last-child) { margin-block-end: var(--s-1) !important; }
  .next-tab-t-2 > div + div { margin-block-start: var(--s-2) !important; }
  .next-tab-r-2 > div:not(:last-child) { margin-inline-end: var(--s-2) !important; }
  .next-tab-b-2 > div:not(:last-child) { margin-block-end: var(--s-2) !important; }
  .next-tab-l-2 > div + div { margin-inline-start: var(--s-2) !important; }
  .next-tab-x-2 > div:not(:last-child) { margin-inline-end: var(--s-2) !important; }
  .next-tab-y-2 > div:not(:last-child) { margin-block-end: var(--s-2) !important; }
  .next-tab-t-3 > div + div { margin-block-start: var(--s-3) !important; }
  .next-tab-r-3 > div:not(:last-child) { margin-inline-end: var(--s-3) !important; }
  .next-tab-b-3 > div:not(:last-child) { margin-block-end: var(--s-3) !important; }
  .next-tab-l-3 > div + div { margin-inline-start: var(--s-3) !important; }
  .next-tab-x-3 > div:not(:last-child) { margin-inline-end: var(--s-3) !important; }
  .next-tab-y-3 > div:not(:last-child) { margin-block-end: var(--s-3) !important; }
  .next-tab-t-4 > div + div { margin-block-start: var(--s-4) !important; }
  .next-tab-r-4 > div:not(:last-child) { margin-inline-end: var(--s-4) !important; }
  .next-tab-b-4 > div:not(:last-child) { margin-block-end: var(--s-4) !important; }
  .next-tab-l-4 > div + div { margin-inline-start: var(--s-4) !important; }
  .next-tab-x-4 > div:not(:last-child) { margin-inline-end: var(--s-4) !important; }
  .next-tab-y-4 > div:not(:last-child) { margin-block-end: var(--s-4) !important; }
  .next-tab-t-5 > div + div { margin-block-start: var(--s-5) !important; }
  .next-tab-r-5 > div:not(:last-child) { margin-inline-end: var(--s-5) !important; }
  .next-tab-b-5 > div:not(:last-child) { margin-block-end: var(--s-5) !important; }
  .next-tab-l-5 > div + div { margin-inline-start: var(--s-5) !important; }
  .next-tab-x-5 > div:not(:last-child) { margin-inline-end: var(--s-5) !important; }
  .next-tab-y-5 > div:not(:last-child) { margin-block-end: var(--s-5) !important; }
  .next-tab-t-6 > div + div { margin-block-start: var(--s-6) !important; }
  .next-tab-r-6 > div:not(:last-child) { margin-inline-end: var(--s-6) !important; }
  .next-tab-b-6 > div:not(:last-child) { margin-block-end: var(--s-6) !important; }
  .next-tab-l-6 > div + div { margin-inline-start: var(--s-6) !important; }
  .next-tab-x-6 > div:not(:last-child) { margin-inline-end: var(--s-6) !important; }
  .next-tab-y-6 > div:not(:last-child) { margin-block-end: var(--s-6) !important; }
  .next-tab-t-7 > div + div { margin-block-start: var(--s-7) !important; }
  .next-tab-r-7 > div:not(:last-child) { margin-inline-end: var(--s-7) !important; }
  .next-tab-b-7 > div:not(:last-child) { margin-block-end: var(--s-7) !important; }
  .next-tab-l-7 > div + div { margin-inline-start: var(--s-7) !important; }
  .next-tab-x-7 > div:not(:last-child) { margin-inline-end: var(--s-7) !important; }
  .next-tab-y-7 > div:not(:last-child) { margin-block-end: var(--s-7) !important; }
  .next-tab-t-8 > div + div { margin-block-start: var(--s-8) !important; }
  .next-tab-r-8 > div:not(:last-child) { margin-inline-end: var(--s-8) !important; }
  .next-tab-b-8 > div:not(:last-child) { margin-block-end: var(--s-8) !important; }
  .next-tab-l-8 > div + div { margin-inline-start: var(--s-8) !important; }
  .next-tab-x-8 > div:not(:last-child) { margin-inline-end: var(--s-8) !important; }
  .next-tab-y-8 > div:not(:last-child) { margin-block-end: var(--s-8) !important; }
  .next-tab-t-9 > div + div { margin-block-start: var(--s-9) !important; }
  .next-tab-r-9 > div:not(:last-child) { margin-inline-end: var(--s-9) !important; }
  .next-tab-b-9 > div:not(:last-child) { margin-block-end: var(--s-9) !important; }
  .next-tab-l-9 > div + div { margin-inline-start: var(--s-9) !important; }
  .next-tab-x-9 > div:not(:last-child) { margin-inline-end: var(--s-9) !important; }
  .next-tab-y-9 > div:not(:last-child) { margin-block-end: var(--s-9) !important; }
  .next-tab-t-10 > div + div { margin-block-start: var(--s-10) !important; }
  .next-tab-r-10 > div:not(:last-child) { margin-inline-end: var(--s-10) !important; }
  .next-tab-b-10 > div:not(:last-child) { margin-block-end: var(--s-10) !important; }
  .next-tab-l-10 > div + div { margin-inline-start: var(--s-10) !important; }
  .next-tab-x-10 > div:not(:last-child) { margin-inline-end: var(--s-10) !important; }
  .next-tab-y-10 > div:not(:last-child) { margin-block-end: var(--s-10) !important; }
  .next-tab-t-11 > div + div { margin-block-start: var(--s-11) !important; }
  .next-tab-r-11 > div:not(:last-child) { margin-inline-end: var(--s-11) !important; }
  .next-tab-b-11 > div:not(:last-child) { margin-block-end: var(--s-11) !important; }
  .next-tab-l-11 > div + div { margin-inline-start: var(--s-11) !important; }
  .next-tab-x-11 > div:not(:last-child) { margin-inline-end: var(--s-11) !important; }
  .next-tab-y-11 > div:not(:last-child) { margin-block-end: var(--s-11) !important; }
  .next-tab-t-12 > div + div { margin-block-start: var(--s-12) !important; }
  .next-tab-r-12 > div:not(:last-child) { margin-inline-end: var(--s-12) !important; }
  .next-tab-b-12 > div:not(:last-child) { margin-block-end: var(--s-12) !important; }
  .next-tab-l-12 > div + div { margin-inline-start: var(--s-12) !important; }
  .next-tab-x-12 > div:not(:last-child) { margin-inline-end: var(--s-12) !important; }
  .next-tab-y-12 > div:not(:last-child) { margin-block-end: var(--s-12) !important; }
}

@media (max-width: 768px) {
  :is([class^="next-mob-"], [class*=" next-mob-"]) > div {
    margin-block-start: 0 !important;
    margin-inline-end: 0 !important;
    margin-block-end: 0 !important;
    margin-inline-start: 0 !important;
  }
  .next-mob-t-0 > div + div { margin-block-start: var(--s-0) !important; }
  .next-mob-r-0 > div:not(:last-child) { margin-inline-end: var(--s-0) !important; }
  .next-mob-b-0 > div:not(:last-child) { margin-block-end: var(--s-0) !important; }
  .next-mob-l-0 > div + div { margin-inline-start: var(--s-0) !important; }
  .next-mob-x-0 > div:not(:last-child) { margin-inline-end: var(--s-0) !important; }
  .next-mob-y-0 > div:not(:last-child) { margin-block-end: var(--s-0) !important; }
  .next-mob-t-1 > div + div { margin-block-start: var(--s-1) !important; }
  .next-mob-r-1 > div:not(:last-child) { margin-inline-end: var(--s-1) !important; }
  .next-mob-b-1 > div:not(:last-child) { margin-block-end: var(--s-1) !important; }
  .next-mob-l-1 > div + div { margin-inline-start: var(--s-1) !important; }
  .next-mob-x-1 > div:not(:last-child) { margin-inline-end: var(--s-1) !important; }
  .next-mob-y-1 > div:not(:last-child) { margin-block-end: var(--s-1) !important; }
  .next-mob-t-2 > div + div { margin-block-start: var(--s-2) !important; }
  .next-mob-r-2 > div:not(:last-child) { margin-inline-end: var(--s-2) !important; }
  .next-mob-b-2 > div:not(:last-child) { margin-block-end: var(--s-2) !important; }
  .next-mob-l-2 > div + div { margin-inline-start: var(--s-2) !important; }
  .next-mob-x-2 > div:not(:last-child) { margin-inline-end: var(--s-2) !important; }
  .next-mob-y-2 > div:not(:last-child) { margin-block-end: var(--s-2) !important; }
  .next-mob-t-3 > div + div { margin-block-start: var(--s-3) !important; }
  .next-mob-r-3 > div:not(:last-child) { margin-inline-end: var(--s-3) !important; }
  .next-mob-b-3 > div:not(:last-child) { margin-block-end: var(--s-3) !important; }
  .next-mob-l-3 > div + div { margin-inline-start: var(--s-3) !important; }
  .next-mob-x-3 > div:not(:last-child) { margin-inline-end: var(--s-3) !important; }
  .next-mob-y-3 > div:not(:last-child) { margin-block-end: var(--s-3) !important; }
  .next-mob-t-4 > div + div { margin-block-start: var(--s-4) !important; }
  .next-mob-r-4 > div:not(:last-child) { margin-inline-end: var(--s-4) !important; }
  .next-mob-b-4 > div:not(:last-child) { margin-block-end: var(--s-4) !important; }
  .next-mob-l-4 > div + div { margin-inline-start: var(--s-4) !important; }
  .next-mob-x-4 > div:not(:last-child) { margin-inline-end: var(--s-4) !important; }
  .next-mob-y-4 > div:not(:last-child) { margin-block-end: var(--s-4) !important; }
  .next-mob-t-5 > div + div { margin-block-start: var(--s-5) !important; }
  .next-mob-r-5 > div:not(:last-child) { margin-inline-end: var(--s-5) !important; }
  .next-mob-b-5 > div:not(:last-child) { margin-block-end: var(--s-5) !important; }
  .next-mob-l-5 > div + div { margin-inline-start: var(--s-5) !important; }
  .next-mob-x-5 > div:not(:last-child) { margin-inline-end: var(--s-5) !important; }
  .next-mob-y-5 > div:not(:last-child) { margin-block-end: var(--s-5) !important; }
  .next-mob-t-6 > div + div { margin-block-start: var(--s-6) !important; }
  .next-mob-r-6 > div:not(:last-child) { margin-inline-end: var(--s-6) !important; }
  .next-mob-b-6 > div:not(:last-child) { margin-block-end: var(--s-6) !important; }
  .next-mob-l-6 > div + div { margin-inline-start: var(--s-6) !important; }
  .next-mob-x-6 > div:not(:last-child) { margin-inline-end: var(--s-6) !important; }
  .next-mob-y-6 > div:not(:last-child) { margin-block-end: var(--s-6) !important; }
  .next-mob-t-7 > div + div { margin-block-start: var(--s-7) !important; }
  .next-mob-r-7 > div:not(:last-child) { margin-inline-end: var(--s-7) !important; }
  .next-mob-b-7 > div:not(:last-child) { margin-block-end: var(--s-7) !important; }
  .next-mob-l-7 > div + div { margin-inline-start: var(--s-7) !important; }
  .next-mob-x-7 > div:not(:last-child) { margin-inline-end: var(--s-7) !important; }
  .next-mob-y-7 > div:not(:last-child) { margin-block-end: var(--s-7) !important; }
  .next-mob-t-8 > div + div { margin-block-start: var(--s-8) !important; }
  .next-mob-r-8 > div:not(:last-child) { margin-inline-end: var(--s-8) !important; }
  .next-mob-b-8 > div:not(:last-child) { margin-block-end: var(--s-8) !important; }
  .next-mob-l-8 > div + div { margin-inline-start: var(--s-8) !important; }
  .next-mob-x-8 > div:not(:last-child) { margin-inline-end: var(--s-8) !important; }
  .next-mob-y-8 > div:not(:last-child) { margin-block-end: var(--s-8) !important; }
  .next-mob-t-9 > div + div { margin-block-start: var(--s-9) !important; }
  .next-mob-r-9 > div:not(:last-child) { margin-inline-end: var(--s-9) !important; }
  .next-mob-b-9 > div:not(:last-child) { margin-block-end: var(--s-9) !important; }
  .next-mob-l-9 > div + div { margin-inline-start: var(--s-9) !important; }
  .next-mob-x-9 > div:not(:last-child) { margin-inline-end: var(--s-9) !important; }
  .next-mob-y-9 > div:not(:last-child) { margin-block-end: var(--s-9) !important; }
  .next-mob-t-10 > div + div { margin-block-start: var(--s-10) !important; }
  .next-mob-r-10 > div:not(:last-child) { margin-inline-end: var(--s-10) !important; }
  .next-mob-b-10 > div:not(:last-child) { margin-block-end: var(--s-10) !important; }
  .next-mob-l-10 > div + div { margin-inline-start: var(--s-10) !important; }
  .next-mob-x-10 > div:not(:last-child) { margin-inline-end: var(--s-10) !important; }
  .next-mob-y-10 > div:not(:last-child) { margin-block-end: var(--s-10) !important; }
  .next-mob-t-11 > div + div { margin-block-start: var(--s-11) !important; }
  .next-mob-r-11 > div:not(:last-child) { margin-inline-end: var(--s-11) !important; }
  .next-mob-b-11 > div:not(:last-child) { margin-block-end: var(--s-11) !important; }
  .next-mob-l-11 > div + div { margin-inline-start: var(--s-11) !important; }
  .next-mob-x-11 > div:not(:last-child) { margin-inline-end: var(--s-11) !important; }
  .next-mob-y-11 > div:not(:last-child) { margin-block-end: var(--s-11) !important; }
  .next-mob-t-12 > div + div { margin-block-start: var(--s-12) !important; }
  .next-mob-r-12 > div:not(:last-child) { margin-inline-end: var(--s-12) !important; }
  .next-mob-b-12 > div:not(:last-child) { margin-block-end: var(--s-12) !important; }
  .next-mob-l-12 > div + div { margin-inline-start: var(--s-12) !important; }
  .next-mob-x-12 > div:not(:last-child) { margin-inline-end: var(--s-12) !important; }
  .next-mob-y-12 > div:not(:last-child) { margin-block-end: var(--s-12) !important; }
}


/* Demo-only: shows direction switching for next-* utilities. */
.demo-next-switch {
  display: block;
}

@media (max-width: 1180px) {
  .demo-next-switch {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .demo-next-switch {
    display: block;
  }
}

/* =========================================================
   75. Table of contents / bookmarks
   Expected structure:
   <div class="bookmarks">
     <ol>...</ol>
   </div>

   .bookmarks itself is intentionally unstyled.
   The active link can use either .active or aria-current="location".
   ========================================================= */

/* Reset list spacing inside the component. */
.bookmarks ol,
.content .bookmarks ol {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bookmarks ol > li,
.content .bookmarks ol > li,
.bookmarks ol > li + li,
.content .bookmarks ol > li + li {
  display: block;
  margin: 0;
}

.bookmarks a,
.content .bookmarks a {
  display: block;
  padding: var(--s-2) var(--s-4);
  border-inline-start: 3px solid transparent;
  border-radius: 0;
  background-color: var(--c-surface);
  color: var(--c-text-soft);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  text-decoration: none;
  transition:
    background-color var(--tr-fast),
    border-color var(--tr-fast),
    color var(--tr-fast);
}

.bookmarks a:hover,
.content .bookmarks a:hover {
  border-inline-start-color: var(--c-primary);
  background-color: var(--c-primary-soft);
  color: var(--c-text);
  text-decoration: none;
}

.bookmarks a.active,
.bookmarks a[aria-current="true"],
.bookmarks a[aria-current="location"],
.content .bookmarks a.active,
.content .bookmarks a[aria-current="true"],
.content .bookmarks a[aria-current="location"] {
  border-inline-start-color: var(--c-primary);
  background-color: var(--c-primary-soft);
  color: var(--c-primary-hover);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.bookmarks ol ol a,
.content .bookmarks ol ol a {
  padding-block: var(--s-2);
  padding-inline-start: calc(var(--s-4) + var(--s-4));
  font-size: var(--fs-12);
}

/* =========================================================
   76. Breadcrumbs
   Structural styling for Joomla mod_breadcrumbs.
   The component has no forced background, border or radius.
   Separator is generated between items with ::before.
   ========================================================= */
.breadcrumb,
.content .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: auto;
  max-width: none;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  color: var(--c-muted);
  font-size: var(--fs-12);
  line-height: 1.5;
}

.breadcrumb > li,
.content .breadcrumb > li,
.breadcrumb > li + li,
.content .breadcrumb > li + li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin: 0;
}

/* Joomla may output an empty location-icon item when “You are here” is disabled. */
.breadcrumb > .float-start,
.content .breadcrumb > .float-start {
  display: none;
}

.breadcrumb > .float-start-here,
.content .breadcrumb > .float-start-here {
  color: inherit;
  font-weight: var(--fw-regular);
}

.breadcrumb > .breadcrumb-item + .breadcrumb-item::before,
.breadcrumb > .float-start-here + .breadcrumb-item::before,
.content .breadcrumb > .breadcrumb-item + .breadcrumb-item::before,
.content .breadcrumb > .float-start-here + .breadcrumb-item::before {
  content: "›";
  display: inline-block;
  margin-inline: var(--s-2);
  color: var(--c-border);
  font-size: 1.15em;
  font-weight: var(--fw-regular);
  line-height: 1;
}

.breadcrumb a,
.breadcrumb .pathway,
.content .breadcrumb a,
.content .breadcrumb .pathway {
  color: inherit;
  text-decoration: none;
  transition: text-decoration-color var(--tr-fast);
}

.breadcrumb a:hover,
.breadcrumb .pathway:hover,
.content .breadcrumb a:hover,
.content .breadcrumb .pathway:hover {
  color: inherit;
  text-decoration: none;
}

.breadcrumb .breadcrumb-item.active,
.content .breadcrumb .breadcrumb-item.active {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

.breadcrumb .breadcrumb-item.active > span,
.content .breadcrumb .breadcrumb-item.active > span {
  color: inherit;
}

@media (max-width: 768px) {
  .breadcrumb,
  .content .breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    white-space: nowrap;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .breadcrumb > li,
  .content .breadcrumb > li {
    flex: 0 0 auto;
  }
}

/* =========================================================
   77. Editorial image with overlay caption
   Use: <figure class="image">...</figure> inside .content.
   The default ratio intentionally crops the common blog image to 1170 × 570.
   Override per image with style="--image-ratio: 16 / 9" when needed.
   ========================================================= */
.content figure.image {
  --image-ratio: 1170 / 570;

  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--image-ratio);
  overflow: hidden;
  border-radius: var(--r-md);
}

.content figure.image > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: inherit;
}

.content figure.image > figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--s-2) var(--s-3);
  color: var(--c-border);
  font-size: var(--fs-12);
  line-height: 1.45;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}



/* =========================================================
   79. Unified component color modifiers
   - .callout, .marker, .badge and .circle use .red / .gold / .gray.
   - Their default background is white; .btn is red by default.
   - .tab-section uses the same accent modifiers and stays transparent.
   - .tab-contents / .tab-content keep the white panel background.
   - Legacy compound class names remain as aliases.
   ========================================================= */


/* =========================================================
   80. Default button and link underline behavior
   - .btn is red by default; .red remains an explicit alias.
   - Links are not underlined by default.
   - .line and .underline explicitly enable underlining.
   ========================================================= */