/* ==========================================================================
   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);
  /* 10px 18px / 12.5px / 600, read off .header__buy-button. Every button on
     the live page uses these, so the base carries them and variants only
     change the fill. */
  padding: 10px 18px;
  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: 12.5px;
  font-weight: var(--elx-w-semi);
  letter-spacing: var(--elx-ls);
  text-transform: none;
  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); }
.elx-badge--warning { border-color: var(--elx-warning); background: rgba(251,191,36,.1); color: var(--elx-warning); }

/* Domain verification: work in progress, with an honest sense of duration.
   DNS propagation is minutes-to-hours and nobody can predict it, so this is
   deliberately an indeterminate sweep rather than a percentage — a progress
   bar that claims 60% of an unknowable wait is a lie the user can measure. */
.cs-dnsbar {
  position: relative; height: 4px; border-radius: var(--elx-r-pill);
  background: rgba(255, 255, 255, .07); overflow: hidden;
}
.cs-dnsbar::after {
  content: ''; position: absolute; inset-block: 0; inline-size: 38%;
  border-radius: inherit; background: var(--elx-warning); opacity: .85;
  animation: cs-dnssweep 1.6s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes cs-dnssweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(365%); }
}
/* A spinner beside the status text, sized to sit on a line of body copy. */
.cs-dnsdot {
  inline-size: 13px; block-size: 13px; border-radius: 50%; flex: none;
  border: 2px solid rgba(251, 191, 36, .25); border-top-color: var(--elx-warning);
  animation: cs-rotate .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cs-dnsbar::after { animation-duration: 4s; }
  .cs-dnsdot { animation-duration: 2.4s; }
}

/* 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 — the live site's .card-3d: a #343434 -> #272727 vertical ramp,
   NO border, 14px radius, one deep shadow. Verbatim from the page.
   USE FOR: content cards, dashboard panels, settings groups, list rows,
   pricing tiers, anything that needs to sit on the dark page. */
.elx-card {
  background-image: var(--elx-card-fill);
  background-color: transparent;
  border: 0;
  border-radius: var(--elx-r-card);
  box-shadow: var(--elx-card-shadow);
  padding: var(--elx-s-6);
  transition: box-shadow var(--elx-dur), transform var(--elx-dur), filter var(--elx-dur);
}
.elx-card--hover:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* Quieter panel — the live page's secondary surface
   (rgba(255,255,255,.04) on a .08 hairline, 12px). USE FOR: nested groups
   and anything that should recede behind a real card. */
.elx-card--subtle {
  background-image: none;
  background-color: rgba(255, 255, 255, .04);
  border: 1px solid var(--elx-hairline);
  border-radius: 12px;
  box-shadow: none;
}
.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); }

/**
 * Critical — the site is about to stop working, or already has.
 *
 * Solid rather than tinted, on purpose. The other alerts are things to know;
 * this one is a thing to DO, and by the time a customer reaches it they have
 * already ignored an email. It is used for exactly one message at a time
 * (see lifecycleBanner) — a wall of red for several things at once teaches
 * people to scroll past red.
 */
.elx-alert--critical {
  border: 1px solid #b3261e;
  border-left: 2px solid #b3261e;
  background: #b3261e;
  color: #fff;
  align-items: center;
}
.elx-alert--critical svg { color: #fff; margin-top: 0; }
.elx-alert--critical a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* The action reads as a button on red without borrowing the accent colour,
   which on this background would be the least legible pairing available. */
.elx-alert--critical .elx-btn {
  background: #fff;
  color: #7f1d1d;
  border-color: #fff;
  /* .elx-btn--primary carries a blue-tinted glow shadow, a glossy rim and a
     text shadow. Every one of them survives a background override, and a blue
     glow behind a white button on a red bar reads as a broken theme — so the
     whole treatment is switched off here, not just recoloured. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  text-shadow: none;
}
.elx-alert--critical .elx-btn::before { content: none; }
.elx-alert--critical .elx-btn:hover {
  background: #f5f5f5; border-color: #f5f5f5;
  transform: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.elx-alert--critical .elx-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.elx-alert--critical .elx-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 640px) {
  /* Stack rather than squeeze: on a phone the message and the button both end
     up unreadable side by side, and the button is the point. */
  .elx-alert--critical { flex-wrap: wrap; }
  .elx-alert--critical .elx-btn { margin-left: 0 !important; width: 100%; justify-content: center; }
}


/* ==========================================================================
   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; }
}


/* ==========================================================================
   CHECKOUT
   A dialog on a pointer, a drag-dismissable drawer on a phone.

   Built as its own component rather than a variant of the generic modal
   because its body is a third-party iframe: it cannot inherit our padding,
   it sizes itself, and it brings its own submit button. Trying to make the
   shared modal accommodate that gave a card that scrolled, a footer with a
   second button that looked like it paid, and a scrollbar down the side of
   somebody's payment form.
   ========================================================================== */

/* Warming: fully laid out and painted by the browser, minus the pixels.
   visibility rather than display so the iframe inside loads and renders at
   real size — open() then has nothing left to do but show it. */
.cs-checkout.is-warming { visibility: hidden; pointer-events: none; }

.cs-checkout {
  position: fixed; z-index: 101; left: 50%; top: 50%; translate: -50% -50%;
  display: flex; flex-direction: column;
  width: min(460px, calc(100vw - 32px));
  max-height: 94vh;
  background: var(--elx-surface);
  border: 1px solid var(--elx-border);
  border-radius: var(--elx-r-card);
  box-shadow: var(--elx-shadow-pop);
  overflow: hidden;                 /* the iframe owns any scrolling */
}

.cs-checkout__head {
  display: flex; align-items: flex-start; gap: var(--elx-s-3);
  padding: 14px 16px 10px;
}
/* `.elx h2` is (0,1,1) and would otherwise win over a single class, which is
   what rendered this at heading size and wrapped it onto two lines. */
.cs-checkout .cs-checkout__title { font-size: 17px; font-weight: var(--elx-w-semi); line-height: 1.3; }
.cs-checkout .cs-checkout__sub { margin-top: 4px; font-size: 13px; color: var(--elx-text-60); line-height: 1.4; }

/* The cadence switcher — the house glass segmented control, centred in its
   own rail between the header and the form. z-index keeps it above the
   skeleton overlay, which sits on the body right below. */
.cs-checkout__plans {
  align-self: center;
  margin: 2px 16px 10px;
  position: relative; z-index: 1;
}
.cs-checkout__plans .elx-tab { padding: 7px 15px; white-space: nowrap; }

/* Always reachable, never in the payment form's way. */
.cs-checkout__close {
  margin-left: auto; flex: none;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid transparent;
  background: rgba(255,255,255,.06); color: var(--elx-text-60);
  cursor: pointer; transition: background var(--elx-dur-fast) ease, color var(--elx-dur-fast) ease;
}
.cs-checkout__close:hover { background: rgba(255,255,255,.12); color: #fff; }
.cs-checkout__close svg { width: 15px; height: 15px; }

/* The iframe keeps the height IT chose.
   Forcing height:100% made Whop's payment element fail to render at all —
   it measures its own container to lay out, so a height imposed from outside
   leaves it with nothing to measure. The body scrolls instead, without a
   visible bar, and the card sizes to the form so on a normal desktop there is
   nothing to scroll. */
/* No min-height once loaded: the frame is taller than any figure worth
   hardcoding, and pinning one clipped the form. The loading height is set
   inline while the skeleton is up and cleared on reveal, so the card holds one
   size during load and then fits the form exactly. */
.cs-checkout__body {
  position: relative; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}
/* !important because the loader writes an inline width measured before the
   sheet has taken its phone width, which left the form clipped off the right
   edge with the price column unreadable. */
.cs-checkout__body iframe { display: block; width: 100% !important; max-width: 100%; border: 0; }

/* No gutter down the side of a payment form. */
.cs-checkout, .cs-checkout__body { scrollbar-width: none; }
.cs-checkout::-webkit-scrollbar, .cs-checkout__body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* --- Skeleton -------------------------------------------------------------
   Shaped like the form that replaces it, so the swap is a fill rather than a
   relayout. A spinner would say "something is happening"; this says "a card
   form is coming", which is the thing worth knowing before you commit. */
.cs-checkout__skeleton { padding: 4px 18px 18px; }

/* Laid OVER the frame rather than swapped for it, so the embed can load and
   resize behind a surface that is not moving. */
.cs-checkout__skeleton--overlay {
  position: absolute; inset: 0; z-index: 2;
  background: var(--elx-surface);
  opacity: 1; transition: opacity 200ms ease;
  pointer-events: none;
}
.cs-checkout__skeleton--overlay.is-done { opacity: 0; }
.cs-sk {
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.05) 63%);
  background-size: 400% 100%;
  animation: cs-sk-shimmer 1.4s ease infinite;
}
.cs-sk--label { height: 10px; width: 38%; margin: 14px 0 8px; }
.cs-sk--field { height: 40px; width: 100%; }
.cs-sk--row { display: flex; gap: 10px; }
.cs-sk--row .cs-sk--field { flex: 1; }
.cs-sk--button { height: 44px; margin-top: 20px; }
@keyframes cs-sk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .cs-sk { animation: none; } }

/* --- Phone: a drawer ------------------------------------------------------
   Centred dialogs on a phone put the fields under the thumb and the submit
   off-screen. A sheet starts at the bottom, where the hand already is. */
@media (max-width: 640px) {
  .cs-checkout {
    top: auto; bottom: 0; left: 0; translate: none;
    width: 100%; height: auto; max-height: 90vh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    /* Driven by JS during a drag; transition is removed while dragging so the
       sheet tracks the finger exactly instead of easing behind it. */
    transform: translateY(100%);
    transition: transform 320ms cubic-bezier(.22,1,.36,1);
    will-change: transform;
  }
  .cs-checkout.is-open { transform: translateY(0); }
  .cs-checkout.is-dragging { transition: none; }

  /* The grab handle. Also the only part that starts a drag, so a swipe over
     the card number field scrolls the form instead of dismissing checkout. */
  .cs-checkout__grip {
    display: block; padding: 10px 0 2px; cursor: grab; touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  .cs-checkout__grip::before {
    content: ''; display: block; width: 38px; height: 4px; margin: 0 auto;
    border-radius: 999px; background: rgba(255,255,255,.22);
  }
  .cs-checkout__head { padding-top: 6px; }
}
@media (min-width: 641px) { .cs-checkout__grip { display: none; } }

.cs-checkout__tos {
  flex: 0 0 auto;                /* a rail under the form, never over it */
  position: relative; z-index: 1;
  border-top: 1px solid var(--elx-hairline);
  background: var(--elx-surface);
  padding: 10px 18px 14px;
  font-size: 11.5px; line-height: 1.5;
  color: var(--elx-text-50); text-align: center;
}
.cs-checkout__tos a { color: var(--elx-text-70); text-decoration: underline; text-underline-offset: 2px; }
.cs-checkout__tos a:hover { color: #fff; }

/* --- Paid -----------------------------------------------------------------
   Replaces the form in the same panel rather than opening a second thing over
   it: the customer is finishing one action, not starting another. */
.cs-checkout--done { width: min(380px, calc(100vw - 32px)); }
.cs-done { display: grid; place-items: center; gap: 14px; padding: 34px 24px 30px; text-align: center; }
.cs-done__mark {
  width: 56px; height: 56px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(74, 222, 128, .10);
  border: 1px solid rgba(74, 222, 128, .30);
  color: var(--elx-success);
}
.cs-done__mark svg { width: 26px; height: 26px; stroke-width: 2.5; opacity: 0; transform: scale(.6); }
.cs-done__mark.is-done svg { animation: cs-done-pop 420ms cubic-bezier(.22,1,.36,1) forwards; }
@keyframes cs-done-pop { to { opacity: 1; transform: scale(1); } }
/* Scoped, because `.elx h2` is (0,1,1) and beats a lone class — the same
   trap that rendered the checkout heading at hero size. */
.cs-checkout .cs-done__title { font-size: 17px; font-weight: var(--elx-w-semi); }
.cs-checkout .cs-done__sub { font-size: 13px; color: var(--elx-text-60); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .cs-done__mark svg { opacity: 1; transform: none; }
  .cs-done__mark.is-done svg { animation: none; }
}

.elx-overlay--fade { opacity: 0; transition: opacity 240ms ease; }
.elx-overlay--fade.is-open { opacity: 1; }


/* --- Billing rows ---------------------------------------------------------
   A ledger, not a pitch: state on the left, price in the middle, the one
   action that state allows on the right. */
.cs-bill__top { display: flex; align-items: center; justify-content: space-between; gap: var(--elx-s-4); flex-wrap: wrap; }
.cs-bill__h { font-size: var(--elx-body-lg); font-weight: var(--elx-w-semi); }
.cs-bill__list { margin-top: var(--elx-s-4); display: grid; }
.cs-bill__item {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--elx-s-4);
  padding: 14px 0; border-top: 1px solid var(--elx-hairline);
}
.cs-bill__item:first-child { border-top: 0; }
.cs-bill__item-name { font-weight: var(--elx-w-medium); }
.cs-bill__item-state { margin-top: 3px; font-size: 12.5px; color: var(--elx-text-50); }
.cs-bill__item-state--ok   { color: var(--elx-success); }
.cs-bill__item-state--warn { color: var(--elx-warning); }
.cs-bill__item-state--bad  { color: var(--elx-danger); }
.cs-bill__item-price { font-variant-numeric: tabular-nums; color: var(--elx-text-70); white-space: nowrap; }
.cs-bill__item-action { display: flex; gap: 8px; }

@media (max-width: 640px) {
  /* Price under the name rather than squeezed between it and the button. */
  .cs-bill__item { grid-template-columns: 1fr auto; }
  .cs-bill__item-price { grid-column: 1; grid-row: 2; }
  .cs-bill__item-action { grid-column: 2; grid-row: 1 / span 2; }
}


/* --- Destructive, in the house treatment ----------------------------------
   The same construction as .elx-btn--primary — radial gradient, glossy rim,
   layered lift shadow — rotated to red.

   Built as its own variant rather than recolouring .elx-btn--danger, which is
   the flat style used for small inline actions all over the dashboard. Giving
   every one of those a glow would make routine buttons shout; this is for the
   single confirming action in a destructive dialog, where the button IS the
   decision. */
.elx-btn--danger-glow {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: radial-gradient(114.65% 114.65% at 9.73% 17.27%, #ff8a8a 0%, #c1121f 100%);
  border-radius: var(--elx-r-md);
  color: #fff;
  font-size: 12.5px;
  font-weight: var(--elx-w-semi);
  text-transform: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  box-shadow:
    0 62px 17px #7f111100, 0 40px 16px #7f111108, 0 22px 13px #7f111117,
    0 10px 10px #7f111122, 0 2px 5px #7f11112b,
    inset -3px -3px 4px #fecaca33, inset 4px 4px 6px #7f11112b;
  transition: transform var(--elx-dur-fast) var(--elx-ease), box-shadow var(--elx-dur) ease;
}
.elx-btn--danger-glow::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--danger-glow > * { position: relative; z-index: 3; }
.elx-btn--danger-glow:hover {
  transform: translateY(-2px);
  box-shadow:
    0 62px 17px #7f111100, 0 40px 16px #7f111108, 0 22px 13px #7f111117,
    0 10px 10px #7f111122, 0 2px 5px #7f11112b, 18px 18px 24px #ff1a1a4d,
    inset -3px -3px 4px #fecaca44, inset 4px 4px 4px #7f11111a;
}
.elx-btn--danger-glow:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px #7f11111a, 0 1px 2px #7f111112,
              inset -3px -3px 4px #fecaca33, inset 4px 4px 6px #7f11112b;
}