/* ==========================================================================
   ELIXIR UI — COMPONENTS
   --------------------------------------------------------------------------
   Requires tokens.css first.

   Every block is tagged:
     [EXTRACTED] — values lifted from the live site's computed styles.
                   Use these freely; they will look native.
     [DERIVED]   — the marketing site has no such component (it has no real
                   forms, no dashboard, no modals). Built from the same
                   tokens so it belongs, but it is a new invention — expect
                   to tune it the first time you use it for real.

   Naming: .elx-<block>__<element>--<variant>
   ========================================================================== */

/* ==========================================================================
   00 · BASE
   ========================================================================== */
.elx, .elx * { box-sizing: border-box; }

.elx {
  background: var(--elx-bg);
  color: var(--elx-text);
  font-family: var(--elx-font);
  font-size: var(--elx-body);
  font-weight: var(--elx-w-light);
  line-height: var(--elx-lh-normal);
  letter-spacing: var(--elx-ls);
  -webkit-font-smoothing: antialiased;
}

.elx h1, .elx h2, .elx h3, .elx h4 {
  margin: 0;
  font-weight: var(--elx-w-semi);
  line-height: var(--elx-lh-tight);
  letter-spacing: var(--elx-ls);
}
.elx h1 { font-size: var(--elx-h1); }
.elx h2 { font-size: var(--elx-h2); }
.elx h3 { font-size: var(--elx-h3); }
.elx h4 { font-size: var(--elx-h4); }
.elx p  { margin: 0; }
.elx a  { color: inherit; text-decoration: none; }
.elx ul { margin: 0; padding: 0; list-style: none; }
.elx img, .elx svg { display: block; max-width: 100%; }

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

.elx-muted  { color: var(--elx-text-50); }

/* --- GRADIENT HEADING TEXT ---------------------------------------------
   Headings on this site are never a flat colour — they are clipped
   gradients. Wrap each clause in a span:

     <h2><span class="elx-head">Why Elixir is a</span>
         <span class="elx-head-accent">no-brainer</span></h2>

   .elx-head        white fading upward to 60%
   .elx-head-accent three-stop pale-blue → cyan, plus a hairline stroke and
                    a glow shadow. All three properties go together — the
                    stroke is what keeps thin strokes legible once the fill
                    is transparent.
   ---------------------------------------------------------------------- */
.elx-head,
.elx-head-accent {
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: var(--elx-w-semi);
  letter-spacing: var(--elx-ls);
}
.elx-head        { background-image: var(--elx-grad-head); }
.elx-head-accent {
  background-image: var(--elx-grad-head-accent);
  -webkit-text-stroke: var(--elx-head-accent-stroke);
  text-shadow: var(--elx-head-accent-shadow);
  display: block;
}

/* Flat accent — for body copy and links, where a clipped gradient on a
   single word reads as a rendering bug rather than a treatment. */
.elx-accent { color: var(--elx-accent); }


/* ==========================================================================
   01 · LAYOUT                                                   [EXTRACTED]
   USE FOR: every page. .elx-section gives the site's standard 60px
   vertical rhythm; .elx-wrap is the 1200px content column.
   ========================================================================== */
.elx-wrap {
  width: 100%;
  max-width: var(--elx-page);
  margin-inline: auto;
  padding-inline: var(--elx-gutter);
}
.elx-wrap--wide { max-width: 1380px; }
.elx-wrap--narrow { max-width: 720px; }

.elx-section { padding-block: var(--elx-s-15); position: relative; }
.elx-section--alt { background: var(--elx-bg-alt); }
.elx-section--flush { padding-block: 0; }

/* Dotted backdrop + glow. USE FOR: hero areas, empty states, auth pages —
   anywhere a flat dark panel feels too plain. Put content in a child with
   position:relative so it sits above. */
.elx-backdrop { position: relative; overflow: hidden; }
.elx-backdrop::before,
.elx-backdrop::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.elx-backdrop::before {
  background-image: radial-gradient(var(--elx-dot) 1px, transparent 1px);
  background-size: var(--elx-dot-size) var(--elx-dot-size);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 22%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 22%, #000 25%, transparent 78%);
}
.elx-backdrop::after {
  background: radial-gradient(ellipse 46% 34% at 50% 8%, rgba(110, 228, 255, .13), transparent 70%);
}
.elx-backdrop > * { position: relative; z-index: 1; }


/* ==========================================================================
   02 · EYEBROW / SECTION LABEL                                  [EXTRACTED]
   The 〈 label 〉 bracket device above every section heading.
   USE FOR: section kickers, card group labels, dashboard panel titles.
   ========================================================================== */
.elx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--elx-s-2);
  font-size: var(--elx-body);
  font-weight: var(--elx-w-medium);
  color: var(--elx-text-50);
  letter-spacing: var(--elx-ls);
}
.elx-eyebrow::before,
.elx-eyebrow::after {
  content: '';
  width: 11px; height: 22px;
  border: 1px solid var(--elx-hairline-2);
  opacity: .85;
}
.elx-eyebrow::before { border-right: 0; border-radius: 9px 0 0 9px; }
.elx-eyebrow::after  { border-left: 0;  border-radius: 0 9px 9px 0; }

/* Centred section header block */
.elx-sec-head { text-align: center; max-width: 720px; margin-inline: auto; }
.elx-sec-head h2 { margin-top: var(--elx-s-3); }
.elx-sec-head p  { margin-top: var(--elx-s-4); color: var(--elx-text-60); font-size: var(--elx-body-lg); line-height: var(--elx-lh-loose); }


/* ==========================================================================
   03 · BUTTONS                                                  [EXTRACTED]
   ========================================================================== */
.elx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--elx-s-2);
  padding: 14px 26px;
  border: 0;
  /* <button> defaults to the UA `buttonface` colour, so variants that only
     set a background-image (glass) or just a border (ghost) would render as
     a light grey pill. Reset it here; filled variants override below. */
  background-color: transparent;
  border-radius: var(--elx-r-btn);
  font-family: var(--elx-font);
  font-size: var(--elx-body-sm);
  font-weight: var(--elx-w-bold);
  letter-spacing: var(--elx-ls);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--elx-dur-med), color var(--elx-dur-med),
              transform var(--elx-dur-fast), box-shadow var(--elx-dur), border-color var(--elx-dur);
}
.elx-btn:active { transform: translateY(1px); }
.elx-btn:disabled, .elx-btn[aria-disabled='true'] { opacity: .45; pointer-events: none; }
.elx-btn svg { width: 15px; height: 15px; flex: none; }

/* PRIMARY — matches .header__buy-button from the real site: cyan→deep-blue
   radial, 10px radius, 12.5px/600, white text, blue-tinted shadow, and a
   2px glossy rim drawn with mask-composite. If you can use the verbatim
   class (components/button-buy.css) do that instead; this exists so NEW
   surfaces like forms can carry the same treatment.
   USE FOR: the one main action per view. Submit, Buy, Save, Continue. */
.elx-btn--primary {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: var(--elx-grad-buy);
  border-radius: var(--elx-r-md);            /* 10px, not the pill radius */
  color: #fff;
  font-size: 12.5px;
  font-weight: var(--elx-w-semi);
  text-transform: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  box-shadow: var(--elx-shadow-buy);
  transition: transform var(--elx-dur-fast) var(--elx-ease), box-shadow var(--elx-dur) ease;
}
/* the glossy rim */
.elx-btn--primary::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--elx-grad-rim);
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.elx-btn--primary > * { position: relative; z-index: 3; }
.elx-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 62px 17px #1a4dca00, 0 40px 16px #1a4dca08, 0 22px 13px #1a4dca17,
    0 10px 10px #1a4dca22, 0 2px 5px #1a4dca2b, 18px 18px 24px #1a6dff4d,
    inset -3px -3px 4px #93c5fd44, inset 4px 4px 4px #0c3a8a1a;
}
.elx-btn--primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px #1a4dca1a, 0 1px 2px #1a4dca12,
              inset -3px -3px 4px #93c5fd33, inset 4px 4px 6px #0c3a8a2b;
}

/* Flat cyan. The site does NOT use this for buttons — kept only for small
   utility chips where a gradient would be noise. */
.elx-btn--flat { background: var(--elx-accent); color: var(--elx-accent-ink); text-transform: uppercase; }
.elx-btn--flat:hover { background: var(--elx-accent-hover); }

/* DISCORD — matches .header__discord-join: violet→indigo radial. */
.elx-btn--discord {
  background: var(--elx-grad-discord);
  border-radius: var(--elx-r-md);
  color: #fff;
  font-size: 12.5px;
  font-weight: var(--elx-w-semi);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  box-shadow:
    0 10px 10px rgba(88, 101, 242, .10), 0 2px 5px rgba(88, 101, 242, .12),
    14px 14px 20px rgba(88, 101, 242, .20),
    inset -3px -3px 4px rgba(190, 190, 253, .27), inset 4px 4px 4px rgba(40, 46, 138, .10);
  transition: transform var(--elx-dur-fast) var(--elx-ease), box-shadow var(--elx-dur) ease;
}
.elx-btn--discord:hover { transform: translateY(-2px); }

/* GLASS — the dark translucent pill button.
   USE FOR: secondary actions on dark backgrounds, toolbars, filter bars. */
.elx-btn--glass {
  background-image: var(--elx-glass);
  border: 1px solid var(--elx-hairline);
  box-shadow: var(--elx-shadow-glass);
  color: var(--elx-text-80);
  font-weight: var(--elx-w-medium);
}
.elx-btn--glass:hover { color: var(--elx-text); }

/* GLASS ON MEDIA — white, blurred, 6px radius. This is the only place the
   site uses a small radius, because it sits on top of photography.
   USE FOR: actions overlaid on images/video/screenshots. */
.elx-btn--onmedia {
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--elx-r-xs);
  box-shadow: var(--elx-shadow-soft), inset 0 1px 2px #fff;
  backdrop-filter: var(--elx-blur);
  -webkit-backdrop-filter: var(--elx-blur);
  color: var(--elx-text-ink);
  font-size: var(--elx-micro);
  font-weight: var(--elx-w-semi);
  padding: 6px 12px;
}
.elx-btn--onmedia:hover { background: rgba(255, 255, 255, .85); }

/* GHOST. USE FOR: cancel, dismiss, tertiary. */
.elx-btn--ghost {
  border: 1px solid var(--elx-hairline-2);
  color: var(--elx-text-80);
  font-weight: var(--elx-w-medium);
}
.elx-btn--ghost:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.04); color: var(--elx-text); }

/* DANGER. [DERIVED] USE FOR: destructive confirmation. */
.elx-btn--danger { background: var(--elx-danger); color: #2a0d0d; text-transform: uppercase; }
.elx-btn--danger:hover { background: #ff8686; }

.elx-btn--sm    { padding: 9px 18px; font-size: var(--elx-caption); }
.elx-btn--lg    { padding: 18px 38px; font-size: 15px; }
.elx-btn--block { width: 100%; }
.elx-btn--icon  { padding: 11px; width: 40px; height: 40px; }


/* ==========================================================================
   04 · PILL / CHIP                                              [EXTRACTED]
   The single most reused element on the site (219 instances).
   USE FOR: feature tags, metadata, status labels, filter chips, table
   badges, "included" lists, category switchers, dashboard KPI labels.
   ========================================================================== */
.elx-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background-color: transparent;   /* see note on .elx-btn — matters for <button> pills */
  background-image: var(--elx-glass);
  border: 1px solid var(--elx-hairline);
  border-radius: var(--elx-r-pill);
  box-shadow: var(--elx-shadow-glass);
  color: var(--elx-text-80);
  font-size: 15px;
  font-weight: var(--elx-w-semi);
  letter-spacing: var(--elx-ls);
  line-height: 21px;
}
.elx-pill svg { width: 14px; height: 14px; flex: none; color: var(--elx-accent); }

/* Small variant, no border. USE FOR: inline/table labels, dense lists. */
.elx-pill--xs {
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  font-size: var(--elx-micro);
  font-weight: var(--elx-w-medium);
  line-height: 11px;
}

/* Interactive chip. USE FOR: filters, tag pickers, toggleable options. */
.elx-pill--button { cursor: pointer; transition: transform var(--elx-dur-fast) var(--elx-ease), box-shadow var(--elx-dur); }
.elx-pill--button:hover  { transform: translateY(-1px); }
.elx-pill--button:active { transform: translateY(0); }
.elx-pill--button[aria-pressed='true'] {
  background: var(--elx-accent); background-image: none;
  color: var(--elx-accent-ink); border-color: transparent;
}
.elx-pill--button[aria-pressed='true'] svg { color: var(--elx-accent-ink); }

/* Tonal variants. [DERIVED] USE FOR: status in dashboards/tables. */
.elx-pill--success { color: var(--elx-success); }
.elx-pill--warning { color: var(--elx-warning); }
.elx-pill--danger  { color: var(--elx-danger); }
.elx-pill--success svg { color: var(--elx-success); }
.elx-pill--warning svg { color: var(--elx-warning); }
.elx-pill--danger  svg { color: var(--elx-danger); }


/* ==========================================================================
   05 · BADGE                                                    [EXTRACTED]
   The small outlined "LATEST" tag.
   USE FOR: version tags, "new", counts, inline status next to a title.
   ========================================================================== */
.elx-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1px solid var(--elx-accent);
  border-radius: var(--elx-r-pill);
  background: rgba(110, 228, 255, .1);
  color: var(--elx-accent);
  font-size: 10px;
  font-weight: var(--elx-w-bold);
  letter-spacing: .7px;
  text-transform: uppercase;
}
.elx-badge--neutral { border-color: var(--elx-hairline-2); background: rgba(255,255,255,.05); color: var(--elx-text-60); }
.elx-badge--success { border-color: var(--elx-success); background: rgba(74,222,128,.1); color: var(--elx-success); }
.elx-badge--danger  { border-color: var(--elx-danger);  background: rgba(248,113,113,.1); color: var(--elx-danger); }

/* Live status dot. USE FOR: "online", "syncing", build status. */
.elx-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--elx-success);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
}
.elx-dot--idle   { background: var(--elx-text-40); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.elx-dot--danger { background: var(--elx-danger);  box-shadow: 0 0 0 3px rgba(248,113,113,.18); }


/* ==========================================================================
   06 · CARDS                                                    [EXTRACTED]
   ========================================================================== */

/* DARK CARD — #212121 on #444 border, 14px radius.
   USE FOR: content cards, dashboard panels, settings groups, list rows,
   pricing tiers, anything that needs to sit on the dark page. */
.elx-card {
  background: var(--elx-surface);
  border: 1px solid var(--elx-border);
  border-radius: var(--elx-r-card);
  padding: var(--elx-s-6);
  transition: border-color var(--elx-dur), background-color var(--elx-dur), transform var(--elx-dur);
}
.elx-card--hover:hover { background: var(--elx-raise); transform: translateY(-2px); }
.elx-card--flush  { padding: 0; overflow: hidden; }
.elx-card--glass  { background-image: var(--elx-glass); background-color: transparent;
                    border-color: var(--elx-hairline); box-shadow: var(--elx-shadow-glass); }
.elx-card--accent { border-color: var(--elx-accent); }

/* Corner accent wash. USE FOR: highlighting the recommended plan, an
   active dashboard widget, a success/attention panel. Add to .elx-card. */
.elx-card--wash { position: relative; overflow: hidden; }
.elx-card--wash::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 100% 0%, rgba(110, 228, 255, .16) 0%, transparent 70%);
}
.elx-card--wash > * { position: relative; }
.elx-card--wash-danger::before  { background: radial-gradient(circle at 0% 0%, rgba(248,113,113,.14) 0%, transparent 70%); }
.elx-card--wash-success::before { background: radial-gradient(circle at 100% 0%, rgba(74,222,128,.14) 0%, transparent 70%); }

/* LIGHT CARD — white gradient + layered shadow, 8px radius.
   USE FOR: showcasing screenshots/product imagery, light-on-dark contrast
   moments. Text inside must switch to --elx-text-ink. */
.elx-card--light {
  background-color: #fff;
  background-image: var(--elx-glass-light),
                    radial-gradient(circle at 100% 0%, var(--elx-accent-sky) 0%, transparent 80%);
  border: 0;
  border-radius: var(--elx-r-sm);
  box-shadow: var(--elx-shadow-light);
  color: var(--elx-text-ink);
}
.elx-card--light:hover { transform: translateY(-2px); }

/* SPLIT CARD — the "Your Problem / Our Solution" two-half layout.
   USE FOR: before→after, old way→new way, error→resolution,
   current plan→upgrade. Any two-state comparison inside one card. */
.elx-split { display: flex; flex-direction: column; }
.elx-split__half { padding: var(--elx-s-5) var(--elx-s-6); }
.elx-split__half + .elx-split__half { border-top: 1px dashed var(--elx-border); }
.elx-split__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--elx-micro); text-transform: uppercase; letter-spacing: .6px; color: var(--elx-text-50); }
.elx-split__title { font-size: var(--elx-body-lg); font-weight: var(--elx-w-medium); margin-top: var(--elx-s-2); }
.elx-split__body  { color: var(--elx-text-60); font-size: var(--elx-body-sm); line-height: var(--elx-lh-loose); margin-top: var(--elx-s-2); }
.elx-split__half--neg .elx-split__title { color: var(--elx-text-50); }
.elx-split__half--pos .elx-split__title { color: var(--elx-accent); font-weight: var(--elx-w-semi); }


/* ==========================================================================
   07 · STAT / KPI                                               [EXTRACTED]
   USE FOR: pricing, dashboard metric tiles, before/after totals, counters.
   ========================================================================== */
.elx-stat__label { font-size: var(--elx-micro); text-transform: uppercase; letter-spacing: .9px; color: var(--elx-text-50); }
.elx-stat__value { font-size: clamp(30px, 4vw, 50px); font-weight: var(--elx-w-semi); letter-spacing: -2px; line-height: 1; margin-top: var(--elx-s-2); }
.elx-stat__value small { font-size: .4em; font-weight: var(--elx-w-medium); letter-spacing: var(--elx-ls); }
.elx-stat__value--accent { color: var(--elx-accent); }
.elx-stat__value--muted  { color: var(--elx-text-50); }
.elx-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--elx-caption); margin-top: var(--elx-s-2); }
.elx-stat__delta--up   { color: var(--elx-success); }
.elx-stat__delta--down { color: var(--elx-danger); }

/* Line-item list under a stat. USE FOR: cost breakdowns, invoice lines. */
.elx-lines { display: grid; gap: 9px; margin-top: var(--elx-s-4); }
.elx-line  { display: flex; justify-content: space-between; gap: var(--elx-s-4);
             font-size: var(--elx-body-sm); padding-bottom: 9px; border-bottom: 1px solid var(--elx-hairline); }
.elx-line > span:first-child { color: var(--elx-text-60); }
.elx-line > span:last-child  { color: var(--elx-text-80); font-variant-numeric: tabular-nums; }
.elx-line--accent > span:last-child { color: var(--elx-accent); font-weight: var(--elx-w-semi); }


/* ==========================================================================
   08 · TABS / SEGMENTED SWITCHER                                [EXTRACTED]
   USE FOR: page-type switchers, dashboard views, date ranges, category
   filters, settings sections, signup step switching.
   ========================================================================== */
.elx-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--elx-s-1);
  padding: 5px;
  background-color: transparent;
  background-image: var(--elx-glass);
  border: 1px solid var(--elx-hairline);
  border-radius: var(--elx-r-pill);
}
.elx-tab {
  padding: 9px 19px;
  border: 0;
  border-radius: var(--elx-r-pill);
  background: none;
  font-family: var(--elx-font);
  font-size: var(--elx-caption);
  font-weight: var(--elx-w-medium);
  letter-spacing: var(--elx-ls);
  color: var(--elx-text-60);
  cursor: pointer;
  transition: background-color var(--elx-dur), color var(--elx-dur);
}
.elx-tab:hover { color: var(--elx-text); }
.elx-tab[aria-selected='true'] { background: var(--elx-accent); color: var(--elx-accent-ink); font-weight: var(--elx-w-bold); }

/* Underline variant. [DERIVED] USE FOR: dashboard page-level nav where a
   pill switcher would be too loud. */
.elx-tabs--line { background: none; border: 0; border-bottom: 1px solid var(--elx-hairline); border-radius: 0; padding: 0; gap: var(--elx-s-6); width: 100%; }
.elx-tabs--line .elx-tab { border-radius: 0; padding: 14px 0; position: relative; }
.elx-tabs--line .elx-tab[aria-selected='true'] { background: none; color: var(--elx-accent); }
.elx-tabs--line .elx-tab[aria-selected='true']::after {
  content: ''; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--elx-accent);
}

.elx-panel[hidden] { display: none; }


/* ==========================================================================
   09 · ACCORDION                                                [EXTRACTED]
   USE FOR: FAQ, settings disclosure, help panels, nested filters,
   "advanced options" in forms.
   ========================================================================== */
.elx-acc__item { border-bottom: 1px solid var(--elx-hairline); }
.elx-acc__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--elx-s-5);
  padding: var(--elx-s-5) 0;
  background: none; border: 0;
  font-family: var(--elx-font);
  font-size: var(--elx-body-lg);
  font-weight: var(--elx-w-medium);
  letter-spacing: var(--elx-ls);
  color: var(--elx-text);
  text-align: left;
  cursor: pointer;
  list-style: none;
  transition: color var(--elx-dur-med);
}
.elx-acc__q::-webkit-details-marker { display: none; }
.elx-acc__q::marker { content: ''; }
.elx-acc__q:hover { color: var(--elx-accent); }

/* The +/− that rotates into a − */
.elx-acc__sign { position: relative; width: 20px; height: 20px; flex: none; color: var(--elx-text-60); }
.elx-acc__sign::before,
.elx-acc__sign::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--elx-dur-med), opacity var(--elx-dur-med);
}
.elx-acc__sign::after { transform: rotate(90deg); }
.elx-acc__item[open] .elx-acc__sign::after { transform: rotate(0); opacity: 0; }

.elx-acc__a { overflow: hidden; height: 0; transition: height var(--elx-dur-med) var(--elx-ease-soft); }
.elx-acc__a > div { padding-bottom: var(--elx-s-6); color: var(--elx-text-60); line-height: var(--elx-lh-loose); }


/* ==========================================================================
   10 · DATA TABLE                                               [EXTRACTED]
   USE FOR: comparison matrices, pricing tables, dashboard data grids,
   invoice/order lists, admin records.
   ========================================================================== */
.elx-table-scroll { overflow-x: auto; }
.elx-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.elx-table th,
.elx-table td {
  padding: 16px 14px;
  text-align: center;
  font-size: var(--elx-body-sm);
  letter-spacing: var(--elx-ls);
  border-bottom: 1px solid var(--elx-hairline);
}
.elx-table thead th { color: var(--elx-text-50); font-weight: var(--elx-w-medium); padding: 28px 14px 24px; }
.elx-table thead th small { display: block; margin-top: 4px; color: var(--elx-text-40); font-size: var(--elx-caption); }
.elx-table tbody th { text-align: left; font-weight: var(--elx-w-light); color: var(--elx-text-60); }
.elx-table tbody tr:hover td { background: var(--elx-inset); }

/* Highlighted "ours"/active column. USE FOR: the recommended option. */
.elx-table .elx-col-hi { background: rgba(110, 228, 255, .05); color: var(--elx-accent); font-weight: var(--elx-w-semi); }
.elx-table thead .elx-col-hi { font-size: var(--elx-body-lg); font-weight: var(--elx-w-bold); }

.elx-tick  { color: var(--elx-accent); }
.elx-cross { color: var(--elx-text-40); }


/* ==========================================================================
   11 · MARQUEE / TICKER                                         [EXTRACTED]
   Track content must be duplicated (ui.js does this automatically).
   USE FOR: logo walls, feature tickers, social proof, integration lists,
   "as seen in" rows, dashboard activity streams.
   ========================================================================== */
.elx-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.elx-marquee + .elx-marquee { margin-top: var(--elx-s-3); }
.elx-marquee__track { display: flex; gap: var(--elx-s-3); width: max-content; animation: elx-slide 46s linear infinite; }
.elx-marquee--reverse .elx-marquee__track { animation-direction: reverse; }
.elx-marquee--slow .elx-marquee__track { animation-duration: 76s; }
.elx-marquee:hover .elx-marquee__track { animation-play-state: paused; }
@keyframes elx-slide { to { transform: translateX(-50%); } }


/* ==========================================================================
   12 · AVATAR                                                   [EXTRACTED]
   USE FOR: testimonials, team lists, comment threads, account menus.
   ========================================================================== */
.elx-avatar {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--elx-hairline);
  background: linear-gradient(150deg, #2f3339, #191b1f);
  object-fit: cover;
  display: grid; place-items: center;
  font-size: var(--elx-caption); font-weight: var(--elx-w-semi); color: var(--elx-text-60);
}
.elx-avatar--lg { width: 56px; height: 56px; }
.elx-avatar--sm { width: 28px; height: 28px; font-size: 10px; }
.elx-avatar-stack { display: flex; }
.elx-avatar-stack .elx-avatar + .elx-avatar { margin-left: -10px; box-shadow: 0 0 0 2px var(--elx-bg); }


/* ==========================================================================
   13 · PROGRESS / STEPS                                         [EXTRACTED]
   USE FOR: multi-step signup, onboarding, checkout, upload progress,
   dashboard goal meters, cart free-shipping bars.
   ========================================================================== */
.elx-progress { height: 4px; background: var(--elx-hairline); border-radius: 4px; overflow: hidden; }
.elx-progress > i { display: block; height: 100%; width: 0; background: var(--elx-accent); border-radius: 4px; transition: width 1s var(--elx-ease-soft); }

.elx-steps { display: grid; gap: var(--elx-s-6); grid-auto-flow: column; }
.elx-step__n { font-size: var(--elx-caption); font-weight: var(--elx-w-bold); color: var(--elx-accent); letter-spacing: .5px; }
.elx-step__bar { height: 2px; background: var(--elx-hairline); border-radius: 2px; overflow: hidden; margin: var(--elx-s-3) 0 var(--elx-s-5); }
.elx-step__bar > i { display: block; height: 100%; width: 0; background: var(--elx-accent); transition: width 1s var(--elx-ease-soft); }
.elx-step--done .elx-step__bar > i,
.elx-step--active .elx-step__bar > i { width: 100%; }
.elx-step p { color: var(--elx-text-60); font-size: var(--elx-body-sm); line-height: var(--elx-lh-loose); margin-top: var(--elx-s-2); }


/* ==========================================================================
   14 · FORM FIELDS                                                [DERIVED]
   The marketing site has NO text inputs — only a range slider and hidden
   fields. Everything below is built from the tokens above so it matches,
   but it is new. Tune padding/height the first time you ship a real form.

   USE FOR: signup, login, account settings, dashboard filters, search.
   ========================================================================== */
.elx-field { display: grid; gap: 7px; }
.elx-field__label { font-size: var(--elx-body-sm); font-weight: var(--elx-w-medium); color: var(--elx-text-80); }
.elx-field__label span { color: var(--elx-danger); }        /* required marker */
.elx-field__hint  { font-size: var(--elx-caption); color: var(--elx-text-40); }
.elx-field__error { font-size: var(--elx-caption); color: var(--elx-danger); display: none; }

.elx-input,
.elx-textarea,
.elx-select {
  width: 100%;
  padding: 13px 15px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--elx-hairline);
  border-radius: var(--elx-r-md);
  font-family: var(--elx-font);
  font-size: var(--elx-body-sm);
  font-weight: var(--elx-w-light);
  letter-spacing: var(--elx-ls);
  color: var(--elx-text);
  transition: border-color var(--elx-dur), background-color var(--elx-dur), box-shadow var(--elx-dur);
}
.elx-input::placeholder, .elx-textarea::placeholder { color: var(--elx-text-40); }
.elx-input:hover, .elx-textarea:hover, .elx-select:hover { border-color: var(--elx-hairline-2); }
.elx-input:focus, .elx-textarea:focus, .elx-select:focus {
  outline: 0;
  border-color: var(--elx-accent);
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 3px rgba(110, 228, 255, .14);
}
.elx-textarea { min-height: 108px; resize: vertical; line-height: var(--elx-lh-loose); }

.elx-select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff80'%3E%3Cpath d='M12 16 6 10l1.4-1.4L12 13.2l4.6-4.6L18 10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 18px;
  cursor: pointer;
}

/* Invalid state — add .is-invalid to .elx-field */
.elx-field.is-invalid .elx-input,
.elx-field.is-invalid .elx-textarea,
.elx-field.is-invalid .elx-select { border-color: var(--elx-danger); }
.elx-field.is-invalid .elx-field__error { display: block; }

/* Input with a leading icon or trailing button */
.elx-inputgroup { position: relative; display: flex; align-items: center; }
.elx-inputgroup .elx-input { padding-left: 42px; }
.elx-inputgroup__icon { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--elx-text-40); pointer-events: none; }

/* Checkbox & radio */
.elx-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: var(--elx-body-sm); color: var(--elx-text-80); }
.elx-check input { appearance: none; margin: 0; flex: none; width: 18px; height: 18px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--elx-hairline-2); border-radius: 5px;
  transition: background-color var(--elx-dur), border-color var(--elx-dur); }
.elx-check input[type='radio'] { border-radius: 50%; }
.elx-check input:checked { background: var(--elx-accent); border-color: var(--elx-accent); }
.elx-check input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  background-size: 15px; background-position: center; background-repeat: no-repeat;
}
.elx-check input[type='radio']:checked { box-shadow: inset 0 0 0 4px var(--elx-bg); }
.elx-check input:focus-visible { outline: 2px solid var(--elx-accent); outline-offset: 2px; }

/* Switch */
.elx-switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-size: var(--elx-body-sm); color: var(--elx-text-80); }
.elx-switch input { appearance: none; margin: 0; position: relative; width: 40px; height: 22px; flex: none; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid var(--elx-hairline-2); border-radius: var(--elx-r-pill);
  transition: background-color var(--elx-dur), border-color var(--elx-dur); }
.elx-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: var(--elx-text-60); border-radius: 50%; transition: transform var(--elx-dur) var(--elx-ease-soft), background-color var(--elx-dur); }
.elx-switch input:checked { background: var(--elx-accent); border-color: var(--elx-accent); }
.elx-switch input:checked::after { transform: translateX(18px); background: var(--elx-accent-ink); }


/* ==========================================================================
   15 · ALERT / INLINE MESSAGE                                     [DERIVED]
   USE FOR: form errors, save confirmations, quota warnings, empty-state
   notices, dashboard banners.
   ========================================================================== */
.elx-alert {
  display: flex; align-items: flex-start; gap: var(--elx-s-3);
  padding: 14px 16px;
  border: 1px solid var(--elx-hairline);
  border-left: 2px solid var(--elx-accent);
  border-radius: var(--elx-r-md);
  background: rgba(110, 228, 255, .06);
  font-size: var(--elx-body-sm);
  color: var(--elx-text-80);
  line-height: var(--elx-lh-loose);
}
.elx-alert svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--elx-accent); }
.elx-alert--success { border-left-color: var(--elx-success); background: rgba(74,222,128,.06); }
.elx-alert--success svg { color: var(--elx-success); }
.elx-alert--warning { border-left-color: var(--elx-warning); background: rgba(251,191,36,.06); }
.elx-alert--warning svg { color: var(--elx-warning); }
.elx-alert--danger  { border-left-color: var(--elx-danger);  background: rgba(248,113,113,.06); }
.elx-alert--danger svg { color: var(--elx-danger); }


/* ==========================================================================
   16 · SIDEBAR NAV                                                [DERIVED]
   USE FOR: dashboard / account / admin shells.
   ========================================================================== */
.elx-shell { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
/* Grid items default to min-width:auto, so a wide table or <pre> inside the
   content column forces the whole track past 1fr and scrolls the page
   sideways. min-width:0 lets the column shrink and hand overflow to the
   child (.elx-table-scroll) where it belongs. */
.elx-shell > * { min-width: 0; }
.elx-side { border-right: 1px solid var(--elx-hairline); padding: var(--elx-s-6) var(--elx-s-4); background: var(--elx-bg-alt); }
.elx-side__group + .elx-side__group { margin-top: var(--elx-s-6); }
.elx-side__title { font-size: var(--elx-micro); text-transform: uppercase; letter-spacing: .8px; color: var(--elx-text-40); padding: 0 12px var(--elx-s-2); }
.elx-navitem {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: var(--elx-r-sm);
  font-size: var(--elx-body-sm);
  color: var(--elx-text-60);
  transition: background-color var(--elx-dur), color var(--elx-dur);
}
.elx-navitem svg { width: 16px; height: 16px; flex: none; }
.elx-navitem:hover { background: rgba(255,255,255,.04); color: var(--elx-text); }
.elx-navitem[aria-current='page'] { background: rgba(110,228,255,.1); color: var(--elx-accent); font-weight: var(--elx-w-medium); }
.elx-navitem__count { margin-left: auto; font-size: var(--elx-micro); color: var(--elx-text-40); font-variant-numeric: tabular-nums; }


/* ==========================================================================
   17 · MODAL / DRAWER                                             [DERIVED]
   USE FOR: confirmations, quick-edit, auth prompts, cart drawer.
   ========================================================================== */
.elx-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); z-index: 100; }
.elx-modal {
  position: fixed; z-index: 101; left: 50%; top: 50%; translate: -50% -50%;
  width: min(520px, calc(100vw - 32px));
  background: var(--elx-surface);
  border: 1px solid var(--elx-border);
  border-radius: var(--elx-r-card);
  box-shadow: var(--elx-shadow-pop);
  padding: var(--elx-s-6);
}
.elx-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--elx-s-4); margin-bottom: var(--elx-s-4); }
.elx-modal__foot { display: flex; justify-content: flex-end; gap: var(--elx-s-2); margin-top: var(--elx-s-6); }


/* ==========================================================================
   18 · TOOLTIP + SKELETON                                         [DERIVED]
   ========================================================================== */
.elx-tip { position: relative; display: inline-flex; }
.elx-tip__bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0;
  padding: 7px 11px; border-radius: var(--elx-r-xs);
  background: #0f0f0f; border: 1px solid var(--elx-hairline-2);
  font-size: var(--elx-caption); color: var(--elx-text-80); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--elx-dur);
}
.elx-tip:hover .elx-tip__bubble, .elx-tip:focus-within .elx-tip__bubble { opacity: 1; }

.elx-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.04) 63%);
  background-size: 400% 100%;
  animation: elx-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--elx-r-xs);
  height: 14px;
}
@keyframes elx-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }


/* ==========================================================================
   19 · SCROLL REVEAL                                            [EXTRACTED]
   The site's exact reveal timing. ui.js adds .is-in via IntersectionObserver.
   USE FOR: any section entering the viewport. Do not overuse in dashboards.
   ========================================================================== */
.elx-reveal { opacity: 0; transform: translateY(22px); transition: var(--elx-reveal); }
.elx-reveal.is-in { opacity: 1; transform: none; }
.elx-reveal[data-d='1'] { transition-delay: .22s; }
.elx-reveal[data-d='2'] { transition-delay: .30s; }
.elx-reveal[data-d='3'] { transition-delay: .38s; }
.elx-reveal[data-d='4'] { transition-delay: .46s; }


/* ==========================================================================
   20 · GRID HELPERS
   ========================================================================== */
.elx-grid   { display: grid; gap: var(--elx-s-4); }
.elx-grid > * { min-width: 0; }   /* same min-width:auto guard as .elx-shell */
.elx-grid-2 { grid-template-columns: repeat(2, 1fr); }
.elx-grid-3 { grid-template-columns: repeat(3, 1fr); }
.elx-grid-4 { grid-template-columns: repeat(4, 1fr); }
.elx-row    { display: flex; align-items: center; gap: var(--elx-s-3); flex-wrap: wrap; }

@media (max-width: 1000px) {
  .elx-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .elx-shell  { grid-template-columns: 1fr; }
  .elx-side   { border-right: 0; border-bottom: 1px solid var(--elx-hairline); }
}
@media (max-width: 700px) {
  .elx-grid-2, .elx-grid-3, .elx-grid-4 { grid-template-columns: 1fr; }
  .elx-steps { grid-auto-flow: row; }
}
@media (prefers-reduced-motion: reduce) {
  .elx-reveal { opacity: 1; transform: none; }
  .elx-marquee__track { animation: none; }
  .elx *, .elx *::before, .elx *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}