/* ==========================================================================
   DS — "Orbit" Design System  (neumorphic / soft-UI edition)
   A self-contained, token-driven UI library faithful to the orbAI aesthetic:
   ultra-minimal, premium, LIGHT & MONOCHROME, and — crucially — SOFT-UI:
   surfaces share the canvas color and are extruded with layered shadows +
   an inset highlight, giving everything a tactile 3D relief.

   • Single file, drop-in. No build step. Prefix: tokens --ds-*  classes .ds-*
   • Light by default; dark via  <html data-theme="dark">
   • ONE accent knob: override --ds-accent to colorize the whole system.

   Neumorphic recipe (extracted from live computed styles):
     canvas == element bg (#f5f5f5), no border,
     box-shadow: <layered soft drop> , inset 0 3px 1px #fff  (lit top edge)
   --------------------------------------------------------------------------
   1 Cascade layers · 2 Tokens · 3 Dark · 4 Reduced-motion · 5 Reset
   6 Base · 7 Layout · 8 Components · 9 Forms · 10 Utilities
   ========================================================================== */

@layer ds.reset, ds.tokens, ds.base, ds.layout, ds.components, ds.forms, ds.utilities;

/* ==========================================================================
   2. TOKENS
   ========================================================================== */
@layer ds.tokens {
  :root {
    /* ---- color · ink (text) ---- */
    --ds-ink-primary: #000000;
    --ds-ink-secondary: rgba(0, 0, 0, 0.55);
    --ds-ink-muted: rgba(0, 0, 0, 0.50);   /* nudged for AA; still best for >=18px / decorative */
    --ds-ink-disabled: rgba(0, 0, 0, 0.25);
    --ds-ink-inverse: #ffffff;
    --ds-text-1: var(--ds-ink-primary);
    --ds-text-2: var(--ds-ink-secondary);
    --ds-text-3: var(--ds-ink-muted);
    --ds-on-ink: var(--ds-ink-inverse);

    /* ---- color · surface ----
       NOTE: the page canvas and most raised elements share ONE color (#f5f5f5).
       Relief comes from the neumorphic shadows, not from a color difference. */
    --ds-surface-page: #f5f5f5;          /* neumorphic canvas */
    --ds-surface-default: #f5f5f5;       /* raised cards/pills share the canvas */
    --ds-surface-warm: #faf9f5;
    --ds-surface-raised: #ffffff;        /* overlays/popovers that float ABOVE canvas */
    --ds-surface-sunken: #ececec;        /* inset fields, toggle tracks */
    --ds-surface-white: #ffffff;
    --ds-surface-glass: rgba(255, 255, 255, 0.55);
    --ds-surface-inverse: #000000;
    --ds-surface-inverse-near: #1f1e1d;
    --ds-surface-inverse-mid: #30302e;
    --ds-surface: var(--ds-surface-default);
    --ds-surface-alt: var(--ds-surface-warm);
    /* --ds-ink is a SURFACE-FILL alias (dark buttons, icon tiles), NOT text. */
    --ds-ink: var(--ds-surface-inverse);
    --ds-navbar-bg: rgba(245, 245, 245, 0.80);

    /* ---- color · accent (THE colorization knob) ----
       :root { --ds-accent:#6366f1; --ds-accent-fg:#fff; --ds-accent-subtle:rgba(99,102,241,.08);} */
    --ds-accent: #000000;
    --ds-accent-fg: #ffffff;
    --ds-accent-subtle: rgba(0, 0, 0, 0.06);

    /* ---- color · border (hairlines; neumorphic surfaces are mostly borderless) ---- */
    --ds-border-hairline: rgba(0, 0, 0, 0.06);
    --ds-border-subtle: rgba(0, 0, 0, 0.10);
    --ds-border-default: rgba(0, 0, 0, 0.16);
    --ds-border-strong: rgba(0, 0, 0, 0.40);
    --ds-border-inverse: rgba(255, 255, 255, 0.15);
    --ds-border: var(--ds-border-subtle);
    --ds-bw-hairline: 1px;
    --ds-bw-thin: 1.5px;
    --ds-bw-medium: 2px;

    /* ---- color · state (desaturated to fit monochrome) ---- */
    --ds-state-success-bg: rgb(240, 247, 240);
    --ds-state-success-border: rgba(34, 134, 58, 0.30);
    --ds-state-success-text: rgb(22, 101, 42);
    --ds-state-success-icon: rgb(34, 134, 58);
    --ds-state-warning-bg: rgb(250, 246, 237);
    --ds-state-warning-border: rgba(160, 100, 0, 0.28);
    --ds-state-warning-text: rgb(120, 72, 0);
    --ds-state-warning-icon: rgb(160, 100, 0);
    --ds-state-error-bg: rgb(252, 240, 240);
    --ds-state-error-border: rgba(185, 28, 28, 0.30);
    --ds-state-error-text: rgb(153, 22, 22);
    --ds-state-error-icon: rgb(185, 28, 28);
    --ds-state-info-bg: rgb(239, 246, 255);
    --ds-state-info-border: rgba(29, 78, 216, 0.22);
    --ds-state-info-text: rgb(29, 60, 168);
    --ds-state-info-icon: rgb(29, 78, 216);
    --ds-error: var(--ds-state-error-icon);
    --ds-success: var(--ds-state-success-icon);
    --ds-warning: var(--ds-state-warning-icon);

    /* ---- color · gradient ---- */
    --ds-gradient-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 46%);
    --ds-gradient-glow-ambient: radial-gradient(60% 60% at 100% 0%, rgba(184, 199, 217, 0.45) 0%, transparent 100%);
    --ds-gradient-glow-ambient-alt: radial-gradient(60% 60% at 0% 100%, rgba(184, 199, 217, 0.38) 0%, transparent 100%);
    /* subtle lighter-top fill for raised neumorphic surfaces */
    --ds-gradient-raise: linear-gradient(145deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 55%);

    /* ---- typography ---- */
    --ds-font-display: 'Inter', system-ui, sans-serif;
    --ds-font-heading: 'Satoshi', 'Plus Jakarta Sans', system-ui, sans-serif;
    --ds-font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --ds-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    /* caption face — its OWN knob so caption badges can be retuned independently of
       the table/body font. Default = Inter (tested-good, and never the broken Poppins
       bold). Change to var(--ds-font-heading) or a custom stack to restyle EVERY
       caption badge (dashboard §16a + .egk-content-title §8) in one line. */
    --ds-font-caption: var(--ds-font-body);

    --ds-text-display: clamp(56px, 6vw + 2rem, 100px);
    --ds-text-h1: clamp(36px, 3.5vw + 1rem, 56px);
    --ds-text-h2: clamp(28px, 2.5vw + 0.75rem, 44px);
    --ds-text-h3: clamp(24px, 2vw + 0.5rem, 36px);
    --ds-text-h4: clamp(20px, 1.5vw + 0.375rem, 28px);
    --ds-text-h5: clamp(16px, 1vw + 0.25rem, 20px);
    --ds-text-h6: 16px;
    --ds-text-body: 16px;
    --ds-text-body-sm: 14px;
    --ds-text-caption: 12px;
    --ds-text-price: 44px;

    --ds-fw-regular: 400;
    --ds-fw-medium: 500;
    --ds-fw-semibold: 600;

    --ds-lh-tight: 1.2;
    --ds-lh-snug: 1.4;
    --ds-lh-normal: 1.5;
    --ds-lh-relaxed: 1.6;

    --ds-ls-display: -0.06em;
    --ds-ls-h1: -0.025em;
    --ds-ls-h2: -0.02em;
    --ds-ls-h3: -0.015em;
    --ds-ls-h4: -0.01em;
    --ds-ls-h5: -0.005em;
    --ds-ls-body: 0em;
    --ds-ls-eyebrow: 0.06em;

    /* ---- spacing (4px grid) ---- */
    --ds-space-0: 0px;  --ds-space-1: 4px;  --ds-space-1-5: 6px; --ds-space-2: 8px;
    --ds-space-2-5: 10px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px;
    --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px;
    --ds-space-16: 64px; --ds-space-20: 80px; --ds-space-24: 96px; --ds-space-32: 128px;
    --ds-gap: var(--ds-space-6);
    --ds-card-pad: var(--ds-space-6);
    --ds-section-pad-y-sm: 48px;
    --ds-section-pad-y-md: 80px;
    --ds-section-pad-y-lg: 96px;
    --ds-section-pad-y-xl: 128px;
    --ds-section-pad-x: 24px;

    /* ---- radius ---- */
    --ds-radius-xs: 6px;  --ds-radius-sm: 8px; --ds-radius-md: 10px; --ds-radius-lg: 12px;
    --ds-radius-xl: 16px; --ds-radius-2xl: 20px; --ds-radius-3xl: 24px; --ds-radius-pill: 1000px;
    --ds-radius-btn: var(--ds-radius-md);
    --ds-radius-card: var(--ds-radius-2xl);   /* 20px — orbAI card radius */
    --ds-radius-card-lg: var(--ds-radius-3xl);
    --ds-radius-row: var(--ds-radius-lg);
    --ds-radius-tile: var(--ds-radius-lg);
    --ds-radius-bubble: var(--ds-radius-xl);
    --ds-radius-section: var(--ds-radius-3xl);
    --ds-radius-full: var(--ds-radius-pill);

    /* ---- NEUMORPHIC ELEVATION (the signature soft-UI relief) ----
       raised  = layered soft drop shadow + inset white top highlight
       circle  = stronger relief + inset bottom rim (domed)
       inset   = pressed / sunken (fields, toggle tracks) */
    --ds-neu-highlight: #ffffff;
    --ds-shadow-neu:
      0 0.71px 0.71px -0.67px rgba(0,0,0,0.08),
      0 1.81px 1.81px -1.33px rgba(0,0,0,0.08),
      0 3.62px 3.62px -2px rgba(0,0,0,0.07),
      0 6.87px 6.87px -2.67px rgba(0,0,0,0.07),
      0 13.65px 13.65px -3.33px rgba(0,0,0,0.05),
      0 30px 30px -4px rgba(0,0,0,0.02),
      inset 0 3px 1px var(--ds-neu-highlight);
    --ds-shadow-neu-hover:
      0 1px 1px -0.5px rgba(0,0,0,0.09),
      0 2.6px 2.6px -1px rgba(0,0,0,0.08),
      0 6px 6px -2px rgba(0,0,0,0.07),
      0 12px 12px -3px rgba(0,0,0,0.06),
      0 22px 22px -3.5px rgba(0,0,0,0.05),
      0 44px 44px -5px rgba(0,0,0,0.03),
      inset 0 3px 1px rgba(255,255,255,0.95);
    /* every raised element uses the FULL card shadow (per live site) */
    --ds-shadow-neu-sm: var(--ds-shadow-neu);
    --ds-shadow-neu-circle:
      0 0.64px 0.64px -1px rgba(0,0,0,0.16),
      0 1.93px 1.93px -2px rgba(0,0,0,0.15),
      0 5.11px 5.11px -3px rgba(0,0,0,0.13),
      0 16px 16px -4px rgba(0,0,0,0.04),
      inset 0 -3px 1px rgba(225,225,225,0.5),
      inset 0 2px 1px rgba(255,255,255,0.9);
    --ds-shadow-neu-inset:
      inset 0 2px 5px rgba(0,0,0,0.10),
      inset 0 -1px 1px rgba(255,255,255,0.7);
    --ds-shadow-neu-pressed:
      inset 0 3px 6px rgba(0,0,0,0.14),
      inset 0 -1px 1px rgba(255,255,255,0.5);

    /* legacy flat aliases kept for callers that want a plain drop shadow */
    --ds-shadow-e0: none;
    --ds-shadow-e1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
    --ds-shadow-e2: var(--ds-shadow-neu);
    --ds-shadow-e3: var(--ds-shadow-neu);
    --ds-shadow-e4:
      0 1px 1px -0.5px rgba(0,0,0,0.10),
      0 3px 3px -1px rgba(0,0,0,0.09),
      0 8px 8px -2px rgba(0,0,0,0.08),
      0 18px 18px -3px rgba(0,0,0,0.06),
      0 40px 40px -4px rgba(0,0,0,0.05);
    --ds-shadow-hover: var(--ds-shadow-neu-hover);
    --ds-shadow-soft: var(--ds-shadow-neu);
    --ds-shadow-soft-sm: var(--ds-shadow-neu-sm);
    --ds-shadow-sm: var(--ds-shadow-neu-sm);
    --ds-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --ds-shadow-inset: var(--ds-shadow-neu-inset);
    /* dark / black elements (primary button) keep a punchy drop shadow */
    --ds-shadow-dark-button:
      0 0.6px 1.08px -1.25px rgba(40,40,40,0.7),
      0 2.29px 4.12px -2.5px rgba(40,40,40,0.55),
      0 10px 18px -3.75px rgba(40,40,40,0.30),
      0 24px 36px -5px rgba(0,0,0,0.30);
    --ds-shadow-dark: var(--ds-shadow-dark-button);
    /* pressed: dark/accent buttons sink instead of lifting */
    --ds-shadow-dark-pressed: 0 1px 2px -1px rgba(0,0,0,0.5), inset 0 2px 6px rgba(0,0,0,0.5);

    /* ---- z-index ---- */
    --ds-z-base: 0; --ds-z-raised: 10; --ds-z-dropdown: 100; --ds-z-sticky: 200;
    --ds-z-overlay: 300; --ds-z-modal: 400; --ds-z-toast: 500; --ds-z-tooltip: 600;

    /* ---- motion ---- */
    --ds-duration-instant: 80ms; --ds-duration-fast: 150ms; --ds-duration-base: 240ms;
    --ds-duration-moderate: 320ms; --ds-duration-slow: 480ms; --ds-duration-xslow: 640ms;
    --ds-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ds-ease-in: cubic-bezier(0.55, 0, 1, 1);
    --ds-transition-color:
      color var(--ds-duration-fast) var(--ds-ease-out),
      background-color var(--ds-duration-fast) var(--ds-ease-out),
      border-color var(--ds-duration-fast) var(--ds-ease-out);
    --ds-transition-base:
      color var(--ds-duration-fast) var(--ds-ease-out),
      background-color var(--ds-duration-fast) var(--ds-ease-out),
      border-color var(--ds-duration-fast) var(--ds-ease-out),
      box-shadow var(--ds-duration-base) var(--ds-ease-spring),
      transform var(--ds-duration-moderate) var(--ds-ease-spring);
    --ds-lift-hover: translateY(-2px);
    --ds-lift-card: translateY(-4px);
    --ds-chevron-rotate: rotate(180deg);

    /* ---- layout ---- */
    --ds-container-sm: 640px; --ds-container-md: 768px; --ds-container-lg: 1024px;
    --ds-container-xl: 1200px; --ds-container-2xl: 1440px;
    --ds-container: var(--ds-container-xl);
  }

  /* 3. DARK THEME — soft-UI inverts: dark canvas, dark drops, faint light top edge */
  [data-theme="dark"] {
    --ds-ink-primary: #ffffff;
    --ds-ink-secondary: rgba(255, 255, 255, 0.60);
    --ds-ink-muted: rgba(255, 255, 255, 0.46);
    --ds-ink-disabled: rgba(255, 255, 255, 0.22);
    --ds-ink-inverse: #000000;

    --ds-surface-page: #17181a;
    --ds-surface-default: #1c1d21;       /* one step above the page so raised cards read in dark */
    --ds-surface-warm: #1a1a18;
    --ds-surface-raised: #202024;
    --ds-surface-sunken: #121214;
    --ds-surface-white: #202024;
    --ds-surface-glass: rgba(30, 32, 36, 0.55);
    --ds-surface-inverse: #ffffff;
    --ds-surface-inverse-near: #e8e8e4;
    --ds-surface-inverse-mid: #c8c8c2;
    --ds-navbar-bg: rgba(23, 24, 26, 0.80);

    --ds-accent: #ffffff;
    --ds-accent-fg: #000000;
    --ds-accent-subtle: rgba(255, 255, 255, 0.08);

    --ds-border-hairline: rgba(255, 255, 255, 0.07);
    --ds-border-subtle: rgba(255, 255, 255, 0.10);
    --ds-border-default: rgba(255, 255, 255, 0.16);
    --ds-border-strong: rgba(255, 255, 255, 0.38);
    --ds-border-inverse: rgba(0, 0, 0, 0.20);

    --ds-state-success-bg: rgba(34, 134, 58, 0.16);
    --ds-state-success-border: rgba(134, 239, 172, 0.35);
    --ds-state-success-text: rgb(134, 239, 172);
    --ds-state-success-icon: rgb(134, 239, 172);
    --ds-state-warning-bg: rgba(160, 100, 0, 0.18);
    --ds-state-warning-border: rgba(253, 211, 77, 0.30);
    --ds-state-warning-text: rgb(253, 211, 77);
    --ds-state-warning-icon: rgb(253, 211, 77);
    --ds-state-error-bg: rgba(185, 28, 28, 0.18);
    --ds-state-error-border: rgba(252, 165, 165, 0.30);
    --ds-state-error-text: rgb(252, 165, 165);
    --ds-state-error-icon: rgb(252, 165, 165);
    --ds-state-info-bg: rgba(29, 78, 216, 0.18);
    --ds-state-info-border: rgba(147, 197, 253, 0.28);
    --ds-state-info-text: rgb(147, 197, 253);
    --ds-state-info-icon: rgb(147, 197, 253);

    --ds-gradient-gloss: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0));
    --ds-gradient-glow-ambient: radial-gradient(60% 60% at 100% 0%, rgba(100,120,160,0.30) 0%, transparent 100%);
    --ds-gradient-raise: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 55%);

    --ds-neu-highlight: rgba(255, 255, 255, 0.05);
    --ds-shadow-neu:
      0 1px 1px -0.67px rgba(0,0,0,0.55),
      0 2px 2px -1.33px rgba(0,0,0,0.5),
      0 4px 4px -2px rgba(0,0,0,0.45),
      0 8px 8px -2.67px rgba(0,0,0,0.4),
      0 16px 16px -3.33px rgba(0,0,0,0.3),
      0 30px 30px -4px rgba(0,0,0,0.2),
      inset 0 1px 0 rgba(255,255,255,0.09);
    --ds-shadow-neu-hover:
      0 1px 1px -0.5px rgba(0,0,0,0.6),
      0 3px 3px -1px rgba(0,0,0,0.55),
      0 6px 6px -2px rgba(0,0,0,0.5),
      0 14px 14px -3px rgba(0,0,0,0.4),
      0 26px 26px -3.5px rgba(0,0,0,0.3),
      0 48px 48px -5px rgba(0,0,0,0.22),
      inset 0 1px 0 rgba(255,255,255,0.08);
    --ds-shadow-neu-sm: var(--ds-shadow-neu);
    --ds-shadow-neu-circle:
      0 1px 1px -1px rgba(0,0,0,0.6),
      0 3px 3px -2px rgba(0,0,0,0.5),
      0 8px 8px -3px rgba(0,0,0,0.4),
      0 16px 16px -4px rgba(0,0,0,0.22),
      inset 0 -3px 1px rgba(0,0,0,0.5),
      inset 0 2px 1px rgba(255,255,255,0.06);
    --ds-shadow-neu-inset:
      inset 0 2px 5px rgba(0,0,0,0.5),
      inset 0 -1px 1px rgba(255,255,255,0.04);
    --ds-shadow-neu-pressed:
      inset 0 3px 7px rgba(0,0,0,0.6),
      inset 0 -1px 1px rgba(255,255,255,0.04);
    --ds-shadow-e1: 0 1px 2px rgba(0,0,0,0.4);
    --ds-shadow-e4:
      0 2px 2px -1px rgba(0,0,0,0.5),
      0 8px 8px -2px rgba(0,0,0,0.45),
      0 20px 20px -3px rgba(0,0,0,0.35),
      0 40px 40px -4px rgba(0,0,0,0.25);
    --ds-shadow-dark-button:
      0 1px 2px -1px rgba(0,0,0,0.5),
      0 8px 18px -4px rgba(0,0,0,0.4);
    --ds-shadow-dark-pressed: 0 1px 1px rgba(0,0,0,0.35), inset 0 2px 5px rgba(0,0,0,0.28);
  }

  /* 4. REDUCED MOTION */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --ds-duration-instant: 0ms; --ds-duration-fast: 0ms; --ds-duration-base: 0ms;
      --ds-duration-moderate: 0ms; --ds-duration-slow: 0ms; --ds-duration-xslow: 0ms;
    }
  }
}

/* ==========================================================================
   5. RESET
   ========================================================================== */
@layer ds.reset {
  .ds, .ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
  .ds :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl) { margin: 0; }
  .ds :where(ul,ol) { padding: 0; list-style: none; }
  .ds :where(img,svg,video) { max-width: 100%; display: block; }
  .ds :where(button,input,select,textarea) { font: inherit; color: inherit; }
  .ds :where(a) { color: inherit; text-decoration: none; }
}

/* ==========================================================================
   6. BASE / TYPOGRAPHY
   ========================================================================== */
@layer ds.base {
  .ds {
    font-family: var(--ds-font-body);
    font-size: var(--ds-text-body);
    line-height: var(--ds-lh-normal);
    font-weight: var(--ds-fw-regular);
    color: var(--ds-text-1);
    background-color: var(--ds-surface-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
  }
  .ds-display, .ds-h1, .ds-h2, .ds-h3, .ds-h4, .ds-h5 {
    font-family: var(--ds-font-heading);
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text-1);
    text-wrap: balance;
  }
  .ds-display {
    font-family: var(--ds-font-display);
    font-weight: var(--ds-fw-regular);
    font-size: var(--ds-text-display);
    line-height: var(--ds-lh-tight);
    letter-spacing: var(--ds-ls-display);
  }
  .ds-h1 { font-size: var(--ds-text-h1); line-height: var(--ds-lh-tight); letter-spacing: var(--ds-ls-h1); }
  .ds-h2 { font-size: var(--ds-text-h2); line-height: var(--ds-lh-tight); letter-spacing: var(--ds-ls-h2); }
  .ds-h3 { font-size: var(--ds-text-h3); line-height: var(--ds-lh-snug); letter-spacing: var(--ds-ls-h3); }
  .ds-h4 { font-size: var(--ds-text-h4); line-height: var(--ds-lh-snug); letter-spacing: var(--ds-ls-h4); }
  .ds-h5 { font-size: var(--ds-text-h5); line-height: var(--ds-lh-normal); letter-spacing: var(--ds-ls-h5); }
  .ds-lead { font-size: var(--ds-text-h5); color: var(--ds-text-2); line-height: var(--ds-lh-normal); }
  .ds-body { font-size: var(--ds-text-body); color: var(--ds-text-2); }
  .ds-body-sm { font-size: var(--ds-text-body-sm); line-height: var(--ds-lh-relaxed); color: var(--ds-text-2); }
  .ds-caption { font-size: var(--ds-text-caption); color: var(--ds-text-2); }
  .ds-muted { color: var(--ds-text-3); }
  .ds-num { font-variant-numeric: tabular-nums lining-nums; }
  .ds-link { color: var(--ds-text-1); transition: var(--ds-transition-color); }
  .ds-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .ds :where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: var(--ds-radius-xs);
  }
}

/* ==========================================================================
   7. LAYOUT
   ========================================================================== */
@layer ds.layout {
  .ds-container { width: 100%; max-width: var(--ds-container); margin-inline: auto; padding-inline: var(--ds-section-pad-x); }
  .ds-container--sm { --ds-container: var(--ds-container-sm); }
  .ds-container--md { --ds-container: var(--ds-container-md); }
  .ds-container--lg { --ds-container: var(--ds-container-lg); }

  .ds-section { position: relative; padding-block: var(--ds-section-pad-y-lg); overflow: clip; }
  .ds-section--sm { padding-block: var(--ds-section-pad-y-sm); }
  .ds-section--hero { padding-block: var(--ds-section-pad-y-xl); }
  .ds-section--warm { background: var(--ds-surface-warm); }
  .ds-section--dark { background: var(--ds-surface-inverse); color: var(--ds-on-ink); }

  .ds-section__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ds-space-4); margin-bottom: var(--ds-space-12); }
  .ds-section__head .ds-section__subhead { color: var(--ds-text-2); max-width: 52ch; }
  .ds-section__head--left { align-items: flex-start; text-align: left; }
  .ds-section__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); justify-content: center; }

  .ds-grid { display: grid; gap: var(--ds-gap); }
  .ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .ds-grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .ds-grid__cell--wide { grid-column: span 2; }
  .ds-grid__cell--tall { grid-row: span 2; }

  .ds-grid--bento { grid-template-columns: repeat(5, 1fr); grid-auto-rows: minmax(180px, auto); }
  .ds-grid--bento > .ds-grid__cell--a { grid-column: span 2; }
  .ds-grid--bento > .ds-grid__cell--b { grid-column: span 3; }
  .ds-grid--bento > .ds-grid__cell--c { grid-column: span 3; }
  .ds-grid--bento > .ds-grid__cell--d { grid-column: span 2; }

  @media (max-width: 900px) {
    .ds-grid--3, .ds-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .ds-grid--bento { grid-template-columns: 1fr; }
    .ds-grid--bento > * { grid-column: 1 / -1 !important; }
  }
  @media (max-width: 640px) {
    .ds-grid--2, .ds-grid--3, .ds-grid--4 { grid-template-columns: 1fr; }
    .ds-grid__cell--wide { grid-column: auto; }
  }
}

/* ==========================================================================
   8. COMPONENTS
   ========================================================================== */
@layer ds.components {

  /* ---- Navbar ---- */
  .ds-navbar {
    position: sticky; top: 0; z-index: var(--ds-z-sticky);
    display: flex; align-items: center; gap: var(--ds-space-4);
    padding-block: var(--ds-space-3); padding-inline: var(--ds-section-pad-x);
    background: var(--ds-navbar-bg); transition: var(--ds-transition-base);
  }
  @supports (backdrop-filter: blur(1px)) { .ds-navbar { backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); } }
  @supports not (backdrop-filter: blur(1px)) { .ds-navbar { background: var(--ds-surface-page); } }
  .ds-navbar--scrolled { box-shadow: 0 1px 0 var(--ds-border-hairline), 0 6px 20px -8px rgba(0,0,0,0.12); }
  .ds-navbar__logo { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-family: var(--ds-font-heading); font-weight: var(--ds-fw-medium); font-size: 18px; color: var(--ds-text-1); }
  .ds-navbar__logo svg, .ds-navbar__logo .ds-logo-mark { width: 26px; height: 26px; flex-shrink: 0; }
  .ds-navbar__nav { display: flex; gap: var(--ds-space-6); margin-inline: auto; }
  .ds-navbar__link { font-size: var(--ds-text-body-sm); color: var(--ds-text-2); transition: var(--ds-transition-color); }
  .ds-navbar__link:hover, .ds-navbar__link--active { color: var(--ds-text-1); }
  .ds-navbar__actions { display: flex; align-items: center; gap: var(--ds-space-2); }
  .ds-navbar__toggle { display: none; }
  @media (max-width: 860px) { .ds-navbar__nav { display: none; } .ds-navbar__toggle { display: inline-flex; } }

  /* ---- Button ---- */
  .ds-btn {
    --_btn-py: var(--ds-space-3); --_btn-px: var(--ds-space-6); --_btn-fs: var(--ds-text-body-sm);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
    padding: var(--_btn-py) var(--_btn-px);
    font-family: var(--ds-font-body); font-size: var(--_btn-fs); font-weight: var(--ds-fw-medium); line-height: 1;
    white-space: nowrap; border: 0; border-radius: var(--ds-radius-btn); cursor: pointer; user-select: none;
    transition: var(--ds-transition-base); -webkit-appearance: none; appearance: none;
    background: transparent; color: var(--ds-text-1);
  }
  .ds-btn__icon { flex-shrink: 0; font-size: 1em; display: inline-flex; }
  .ds-btn:disabled, .ds-btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; }
  /* press snaps in fast (instant), releases on the springy base transition */
  .ds-btn:active { transform: translateY(0); transition-duration: var(--ds-duration-instant); }
  .ds-btn--primary:active, .ds-btn--accent:active { transform: translateY(1px) scale(0.985); box-shadow: var(--ds-shadow-dark-pressed); }

  .ds-btn--primary {
    background-color: var(--ds-ink); background-image: var(--ds-gradient-gloss);
    color: var(--ds-on-ink); box-shadow: var(--ds-shadow-dark-button);
  }
  .ds-btn--primary:hover { transform: var(--ds-lift-hover); box-shadow: var(--ds-shadow-dark-button), 0 18px 36px -10px rgba(0,0,0,0.4); }
  .ds-btn--primary:focus-visible, .ds-btn--dark:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 2px; }
  [data-theme="dark"] .ds-btn--primary { background-image: none; }
  [data-theme="dark"] .ds-btn--primary:focus-visible { outline-color: rgba(0,0,0,0.7); }

  /* neumorphic raised secondary */
  .ds-btn--secondary {
    background: var(--ds-surface); color: var(--ds-text-1); box-shadow: var(--ds-shadow-neu-sm);
  }
  .ds-btn--secondary:hover { transform: var(--ds-lift-hover); box-shadow: var(--ds-shadow-neu); }
  .ds-btn--secondary:active { box-shadow: var(--ds-shadow-neu-pressed); transform: translateY(0); }

  /* recessed / quiet action — carved into the surface (replaces the old raised + hard-ring look) */
  .ds-btn--outline { background: var(--ds-surface); color: var(--ds-text-2); box-shadow: var(--ds-shadow-neu-inset); }
  .ds-btn--outline:hover { color: var(--ds-text-1); }
  .ds-btn--outline:active { box-shadow: var(--ds-shadow-neu-pressed); }
  .ds-btn--ghost { background: transparent; color: var(--ds-text-1); }
  .ds-btn--ghost:hover { background: var(--ds-accent-subtle); }
  .ds-btn--link { padding-inline: 0; }
  .ds-btn--link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .ds-btn--accent { background: var(--ds-accent); color: var(--ds-accent-fg); box-shadow: var(--ds-shadow-dark-button); }
  .ds-btn--accent:hover { transform: var(--ds-lift-hover); }

  .ds-btn--sm { --_btn-py: var(--ds-space-2); --_btn-px: var(--ds-space-4); --_btn-fs: 13px; }
  .ds-btn--lg { --_btn-py: var(--ds-space-4); --_btn-px: var(--ds-space-8); --_btn-fs: var(--ds-text-body); }
  .ds-btn--full { width: 100%; }
  .ds-btn--pill { border-radius: var(--ds-radius-full); }
  .ds-btn--icon { --_btn-px: var(--_btn-py); aspect-ratio: 1; }

  .ds-btn-group { display: inline-flex; background: var(--ds-surface); border-radius: var(--ds-radius-btn); box-shadow: var(--ds-shadow-neu-sm); padding: 3px; gap: 2px; }
  .ds-btn-group > .ds-btn { box-shadow: none; background: transparent; border-radius: calc(var(--ds-radius-btn) - 2px); }
  .ds-btn-group > .ds-btn:hover { background: var(--ds-accent-subtle); transform: none; }

  /* ---- Badge / Pill / Eyebrow (neumorphic) ---- */
  .ds-badge {
    display: inline-flex; align-items: center; gap: var(--ds-space-1-5);
    padding: var(--ds-space-1-5) var(--ds-space-3); border-radius: var(--ds-radius-full);
    font-family: var(--ds-font-body); font-size: 13px; font-weight: var(--ds-fw-medium); line-height: 1.2;
    color: var(--ds-text-1);
  }
  .ds-badge__icon { font-size: 0.9em; opacity: 0.85; }
  .ds-badge__dot { width: 6px; height: 6px; border-radius: var(--ds-radius-full); background: currentColor; }
  /* domed icon disc — turns a badge into a tactile caption / section title
     (sizes in em so it scales with the badge's font-size; negative margins
     let the disc grow past the text line without inflating badge height) */
  .ds-badge__disc {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 1.9em; height: 1.9em; margin: -0.4em 0.05em -0.4em -0.55em;
    border-radius: var(--ds-radius-full); background: var(--ds-surface); color: var(--ds-text-1);
    box-shadow: var(--ds-shadow-neu-circle); font-size: 0.92em; line-height: 1;
  }
  .ds-badge--primary .ds-badge__disc {
    background: var(--ds-surface-inverse-near); color: var(--ds-on-ink);
    box-shadow: inset 0 2px 1px rgba(255,255,255,0.10), inset 0 -2px 1px rgba(0,0,0,0.45);
  }
  .ds-badge__remove { margin-left: var(--ds-space-1); border: 0; background: transparent; cursor: pointer; color: inherit; opacity: 0.55; display: inline-flex; padding: 2px; border-radius: var(--ds-radius-full); }
  .ds-badge__remove:hover { opacity: 1; }

  .ds-badge--eyebrow {
    background: var(--ds-surface); box-shadow: var(--ds-shadow-neu-sm);
    text-transform: uppercase; font-size: var(--ds-text-caption); letter-spacing: var(--ds-ls-eyebrow);
    color: var(--ds-text-2); padding: var(--ds-space-1-5) var(--ds-space-3);
  }
  .ds-badge--eyebrow .ds-badge__icon { color: var(--ds-text-1); opacity: 1; }
  .ds-badge--surface { background: var(--ds-surface); box-shadow: var(--ds-shadow-neu-sm); color: var(--ds-text-1); }
  .ds-badge--primary { background: var(--ds-ink); color: var(--ds-on-ink); box-shadow: var(--ds-shadow-dark-button); }
  .ds-badge--outline { background: var(--ds-surface); box-shadow: var(--ds-shadow-neu-sm), inset 0 0 0 1px var(--ds-border-subtle); }
  .ds-badge--success { background: var(--ds-state-success-bg); color: var(--ds-state-success-text); box-shadow: var(--ds-shadow-neu-sm); }
  .ds-badge--warning { background: var(--ds-state-warning-bg); color: var(--ds-state-warning-text); box-shadow: var(--ds-shadow-neu-sm); }
  .ds-badge--error { background: var(--ds-state-error-bg); color: var(--ds-state-error-text); box-shadow: var(--ds-shadow-neu-sm); }
  .ds-badge--info { background: var(--ds-state-info-bg); color: var(--ds-state-info-text); box-shadow: var(--ds-shadow-neu-sm); }
  .ds-badge--accent { background: var(--ds-accent); color: var(--ds-accent-fg); box-shadow: var(--ds-shadow-dark-button); }
  .ds-badge--sm { font-size: var(--ds-text-caption); padding: 3px var(--ds-space-2); }
  .ds-badge--lg { font-size: var(--ds-text-body-sm); padding: var(--ds-space-2) var(--ds-space-4); }
  /* taller height ladder — for captions / section titles that read as headings */
  .ds-badge--xl { font-size: 15px; gap: var(--ds-space-2); padding: var(--ds-space-2-5) var(--ds-space-5); }
  .ds-badge--2xl {
    font-size: var(--ds-text-h6); font-weight: var(--ds-fw-semibold); letter-spacing: var(--ds-ls-h5);
    gap: var(--ds-space-2-5); padding: var(--ds-space-3) var(--ds-space-6);
  }
  .ds-badge--clickable { cursor: pointer; transition: var(--ds-transition-base); }
  .ds-badge--clickable:hover { transform: var(--ds-lift-hover); box-shadow: var(--ds-shadow-neu); }
  .ds-badge--clickable:active { box-shadow: var(--ds-shadow-neu-pressed); transform: translateY(0); }

  /* pill row (the orbAI benefits chips) */
  .ds-pill-row { display: flex; gap: var(--ds-space-3); flex-wrap: wrap; }
  .ds-pill-row--scroll { flex-wrap: nowrap; overflow-x: auto; padding-block: var(--ds-space-2); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .ds-pill-row--scroll::-webkit-scrollbar { display: none; }
  .ds-pill-row--scroll > .ds-badge { flex-shrink: 0; }

  /* ---- Icon tile ---- */
  .ds-icon-tile {
    --_tile: 40px; display: inline-flex; align-items: center; justify-content: center;
    width: var(--_tile); height: var(--_tile); flex-shrink: 0;
    background-color: var(--ds-ink); background-image: var(--ds-gradient-gloss);
    color: var(--ds-on-ink); border-radius: var(--ds-radius-tile);
    box-shadow: var(--ds-shadow-dark-button); font-size: calc(var(--_tile) * 0.42);
  }
  [data-theme="dark"] .ds-icon-tile { background-image: none; }
  .ds-icon-tile--sm { --_tile: 32px; }
  .ds-icon-tile--lg { --_tile: 48px; }
  .ds-icon-tile--xl { --_tile: 56px; }
  /* neumorphic light tile/circle (the orbAI "Sync" icon) */
  .ds-icon-tile--surface, .ds-icon-tile--neu {
    background-color: var(--ds-surface);
    color: var(--ds-text-1); box-shadow: var(--ds-shadow-neu-circle);
  }
  .ds-icon-tile--rounded-sm { border-radius: var(--ds-radius-sm); }
  .ds-icon-tile--circle { border-radius: var(--ds-radius-full); }

  /* ---- Card (neumorphic) ---- */
  .ds-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--ds-surface);
    border-radius: var(--ds-radius-card); padding: var(--ds-card-pad);
    box-shadow: var(--ds-shadow-neu); border: 0; transition: var(--ds-transition-base);
  }
  .ds-card--pad-lg { padding: var(--ds-space-8); }
  .ds-card--interactive { cursor: pointer; }
  .ds-card--interactive:hover, .ds-card--hover:hover { transform: var(--ds-lift-card); box-shadow: var(--ds-shadow-neu-hover); }
  .ds-card--elevated { background: var(--ds-surface-raised); box-shadow: var(--ds-shadow-neu); }
  .ds-card--flat { box-shadow: none; background-image: none; outline: 1px solid var(--ds-border-hairline); }
  .ds-card--dark { background: var(--ds-ink); background-image: var(--ds-gradient-gloss); color: var(--ds-on-ink); box-shadow: var(--ds-shadow-dark-button); }
  .ds-card--dark .ds-card__title { color: var(--ds-on-ink); }
  .ds-card--dark .ds-card__body { color: rgba(255,255,255,0.6); }

  .ds-card__header { display: flex; align-items: flex-start; gap: var(--ds-space-3); margin-bottom: var(--ds-space-4); }
  .ds-card__title { font-family: var(--ds-font-heading); font-size: 20px; font-weight: var(--ds-fw-medium); letter-spacing: var(--ds-ls-h5); color: var(--ds-text-1); }
  .ds-card__body { font-size: var(--ds-text-body-sm); line-height: var(--ds-lh-relaxed); color: var(--ds-text-2); }
  .ds-card__footer { margin-top: auto; padding-top: var(--ds-space-4); border-top: 1px solid var(--ds-border-hairline); }
  .ds-card__actions { display: flex; gap: var(--ds-space-2); margin-top: var(--ds-space-4); flex-wrap: wrap; }
  .ds-card__media { width: 100%; border-radius: var(--ds-radius-md); overflow: hidden; }
  .ds-card__media img { width: 100%; height: 100%; object-fit: cover; }

  .ds-card--feature .ds-card__icon { margin-bottom: var(--ds-space-4); }
  .ds-card--feature .ds-card__title { margin-bottom: var(--ds-space-2); }
  .ds-card--feature-h { flex-direction: row; align-items: flex-start; gap: var(--ds-space-4); }

  .ds-card--bento { border-radius: var(--ds-radius-card-lg); min-height: 320px; overflow: hidden; gap: var(--ds-space-4); }
  .ds-bento__ui { display: flex; flex-direction: column; gap: var(--ds-space-3); flex: 1; }
  .ds-bento__caption { margin-top: auto; }

  .ds-card--step .ds-step__top { display: flex; align-items: center; justify-content: space-between; margin-top: var(--ds-space-4); }
  .ds-step__number { font-family: var(--ds-font-heading); font-size: var(--ds-text-price); font-weight: var(--ds-fw-medium); color: var(--ds-text-3); font-variant-numeric: tabular-nums; line-height: 1; }
  .ds-card--step.is-active .ds-step__number { color: var(--ds-text-1); }
  .ds-step__media { margin-top: var(--ds-space-4); border-radius: var(--ds-radius-md); overflow: hidden; }

  .ds-card--testimonial { gap: var(--ds-space-5); }
  .ds-testimonial__quote { font-family: var(--ds-font-heading); font-size: var(--ds-text-h4); font-weight: var(--ds-fw-medium); line-height: var(--ds-lh-snug); letter-spacing: var(--ds-ls-h4); color: var(--ds-text-1); }
  .ds-testimonial__author { display: flex; align-items: center; gap: var(--ds-space-3); margin-top: auto; }
  .ds-testimonial__name { font-size: var(--ds-text-body-sm); font-weight: var(--ds-fw-medium); }
  .ds-testimonial__role { font-size: 13px; color: var(--ds-text-2); }

  .ds-card--profile { gap: var(--ds-space-3); }
  .ds-profile__portrait { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ds-radius-xl); }
  .ds-profile__name { font-family: var(--ds-font-heading); font-size: 20px; font-weight: var(--ds-fw-medium); }
  .ds-profile__role { font-size: var(--ds-text-body-sm); color: var(--ds-text-2); }
  .ds-profile__socials { display: flex; gap: var(--ds-space-2); }

  .ds-card--stat { gap: var(--ds-space-1); }
  .ds-stat__value { font-family: var(--ds-font-heading); font-size: var(--ds-text-price); font-weight: var(--ds-fw-medium); color: var(--ds-text-1); font-variant-numeric: tabular-nums lining-nums; line-height: 1.1; }
  .ds-stat__label { font-size: var(--ds-text-body-sm); color: var(--ds-text-2); }

  .ds-card--pricing { padding: var(--ds-space-8); gap: var(--ds-space-4); }
  .ds-pricing__header { display: flex; align-items: center; gap: var(--ds-space-3); }
  .ds-pricing__tier { font-family: var(--ds-font-heading); font-size: 18px; font-weight: var(--ds-fw-medium); }
  .ds-pricing__price-row { display: flex; align-items: baseline; gap: var(--ds-space-1); }
  .ds-pricing__amount { font-family: var(--ds-font-heading); font-size: var(--ds-text-price); font-weight: var(--ds-fw-medium); font-variant-numeric: tabular-nums; letter-spacing: var(--ds-ls-h2); line-height: 1; }
  .ds-pricing__period { font-size: var(--ds-text-body-sm); color: var(--ds-text-2); }
  .ds-pricing__desc { font-size: var(--ds-text-body-sm); line-height: var(--ds-lh-relaxed); color: var(--ds-text-2); }
  .ds-card--pricing--featured { background: var(--ds-ink); background-image: var(--ds-gradient-gloss); color: var(--ds-on-ink); box-shadow: var(--ds-shadow-dark-button); }
  .ds-card--pricing--featured .ds-pricing__period, .ds-card--pricing--featured .ds-pricing__desc { color: rgba(255,255,255,0.65); }
  .ds-card--pricing--featured .ds-checklist__text { color: rgba(255,255,255,0.8); }
  .ds-card--pricing--featured .ds-checklist__icon { color: var(--ds-on-ink); }
  [data-theme="dark"] .ds-card--pricing--featured .ds-pricing__period,
  [data-theme="dark"] .ds-card--pricing--featured .ds-pricing__desc { color: rgba(0,0,0,0.6); }
  [data-theme="dark"] .ds-card--pricing--featured .ds-checklist__text { color: rgba(0,0,0,0.75); }

  .ds-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-gap); align-items: stretch; }
  .ds-comparison__col { display: flex; flex-direction: column; gap: var(--ds-space-5); padding: var(--ds-space-8); }
  .ds-comparison__col--branded { box-shadow: var(--ds-shadow-neu), inset 0 0 0 var(--ds-bw-thin) var(--ds-ink); }
  .ds-comparison__col--others { opacity: 0.92; }
  .ds-comparison__title { display: flex; align-items: center; gap: var(--ds-space-2); font-family: var(--ds-font-heading); font-size: 20px; font-weight: var(--ds-fw-medium); }
  @media (max-width: 640px) { .ds-comparison { grid-template-columns: 1fr; } }

  /* ---- Showcase (tabbed project case study) ---- */
  .ds-showcase { background: var(--ds-surface); border-radius: var(--ds-radius-card-lg); box-shadow: var(--ds-shadow-neu); padding: var(--ds-space-5); }
  .ds-showcase__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ds-space-3); margin-bottom: var(--ds-space-5); }
  .ds-showcase__tab { appearance: none; border: 0; cursor: pointer; background: var(--ds-surface); border-radius: var(--ds-radius-lg); padding: var(--ds-space-4) var(--ds-space-5); font-family: var(--ds-font-body); font-size: var(--ds-text-body-sm); font-weight: var(--ds-fw-medium); letter-spacing: var(--ds-ls-eyebrow); text-transform: uppercase; color: var(--ds-text-3); box-shadow: var(--ds-shadow-neu-inset); transition: var(--ds-transition-base); }
  .ds-showcase__tab:hover { color: var(--ds-text-2); }
  .ds-showcase__tab.is-active, .ds-showcase__tab[aria-selected="true"] { color: var(--ds-text-1); box-shadow: var(--ds-shadow-neu); }
  .ds-showcase__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-8); align-items: center; }
  .ds-showcase__panel[hidden] { display: none; }
  .ds-showcase__media { border-radius: var(--ds-radius-card); overflow: hidden; aspect-ratio: 1 / 1; box-shadow: var(--ds-shadow-neu-sm); }
  .ds-showcase__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ds-showcase__media--demo { background: radial-gradient(125% 95% at 32% 12%, #fbfbfc 0%, #e7e8ea 46%, #d4d5da 100%); }
  .ds-showcase__content { display: flex; flex-direction: column; gap: var(--ds-space-3); }
  .ds-showcase__index { font-family: var(--ds-font-heading); font-size: var(--ds-text-body-sm); font-weight: var(--ds-fw-medium); color: var(--ds-text-3); font-variant-numeric: tabular-nums; }
  .ds-showcase__title { font-family: var(--ds-font-heading); font-size: var(--ds-text-h4); font-weight: var(--ds-fw-medium); letter-spacing: var(--ds-ls-h4); color: var(--ds-text-1); line-height: var(--ds-lh-snug); }
  .ds-showcase__desc { font-size: var(--ds-text-body); line-height: var(--ds-lh-relaxed); color: var(--ds-text-2); }
  .ds-showcase__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-4); margin-top: var(--ds-space-3); }
  .ds-showcase__stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ds-space-1); background: var(--ds-surface); border-radius: var(--ds-radius-card); padding: var(--ds-space-5) var(--ds-space-4); box-shadow: var(--ds-shadow-neu-sm); }
  .ds-showcase__stat .ds-stat__value { display: inline-flex; align-items: baseline; gap: 3px; }
  .ds-showcase__stat .ds-stat__pct { font-size: 0.5em; color: var(--ds-text-2); font-weight: var(--ds-fw-medium); }
  @media (max-width: 860px) { .ds-showcase__body { grid-template-columns: 1fr; } }
  @media (max-width: 560px) { .ds-showcase__tabs { grid-template-columns: 1fr; } .ds-showcase__stats { grid-template-columns: 1fr; } }

  /* ---- Checklist ---- */
  .ds-checklist { display: flex; flex-direction: column; gap: var(--ds-space-2-5); }
  .ds-checklist__item { display: flex; align-items: flex-start; gap: var(--ds-space-2); }
  .ds-checklist__icon { flex-shrink: 0; margin-top: 2px; font-size: 13px; color: var(--ds-text-1); }
  .ds-checklist__text { font-size: var(--ds-text-body-sm); color: var(--ds-text-2); }
  .ds-checklist--negative .ds-checklist__icon { color: var(--ds-text-3); }
  .ds-checklist--negative .ds-checklist__text { color: var(--ds-text-3); text-decoration: line-through; }

  /* ---- Segmented toggle (raised pill, underline-active — per live site) ---- */
  .ds-toggle { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: var(--ds-space-2); background: var(--ds-surface); border-radius: var(--ds-radius-full); box-shadow: var(--ds-shadow-neu); }
  .ds-toggle--rect { border-radius: var(--ds-radius-lg); }
  .ds-toggle__option {
    position: relative; appearance: none; border: 0; background: transparent;
    padding: var(--ds-space-2-5) var(--ds-space-5); border-radius: var(--ds-radius-full);
    font-family: var(--ds-font-body); font-size: var(--ds-text-body-sm); font-weight: var(--ds-fw-medium);
    color: var(--ds-text-2); cursor: pointer; transition: var(--ds-transition-color);
  }
  .ds-toggle__option:hover { color: var(--ds-text-1); }
  .ds-toggle__option--active, .ds-toggle__option[aria-selected="true"] { color: var(--ds-text-1); }
  .ds-toggle__option--active::after, .ds-toggle__option[aria-selected="true"]::after {
    content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
    width: 20px; height: 2px; border-radius: 2px; background: var(--ds-ink);
  }
  /* opt-in filled-pill active style */
  .ds-toggle--filled .ds-toggle__option--active, .ds-toggle--filled .ds-toggle__option[aria-selected="true"] { background: var(--ds-surface-raised); box-shadow: var(--ds-shadow-neu-sm); }
  .ds-toggle--filled .ds-toggle__option--active::after, .ds-toggle--filled .ds-toggle__option[aria-selected="true"]::after { display: none; }
  .ds-toggle__promo { display: inline-flex; align-items: center; padding: var(--ds-space-2) var(--ds-space-4); border-radius: var(--ds-radius-full); background: var(--ds-surface-raised); box-shadow: var(--ds-shadow-e1); font-size: var(--ds-text-body-sm); font-weight: var(--ds-fw-medium); color: var(--ds-text-1); }

  /* ---- Switch ---- */
  .ds-switch { display: inline-flex; align-items: center; gap: var(--ds-space-2); cursor: pointer; }
  .ds-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
  .ds-switch__track { position: relative; width: 42px; height: 24px; flex-shrink: 0; background: var(--ds-surface-sunken); border-radius: var(--ds-radius-full); box-shadow: var(--ds-shadow-neu-inset); transition: var(--ds-transition-color); }
  .ds-switch__thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: var(--ds-radius-full); box-shadow: var(--ds-shadow-neu-sm); transition: transform var(--ds-duration-moderate) var(--ds-ease-spring); }
  .ds-switch input:checked + .ds-switch__track { background: var(--ds-ink); }
  .ds-switch input:checked + .ds-switch__track .ds-switch__thumb { transform: translateX(18px); }
  /* dark: the checked track is WHITE (--ds-ink inverts) — a #fff thumb would vanish on it */
  [data-theme="dark"] .ds-switch input:checked + .ds-switch__track .ds-switch__thumb { background: var(--ds-on-ink); }
  .ds-switch input:focus-visible + .ds-switch__track { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
  .ds-switch__label { font-size: var(--ds-text-body-sm); }
  .ds-switch input:disabled + .ds-switch__track { opacity: 0.4; cursor: not-allowed; }

  /* ---- Accordion (FAQ) ---- */
  .ds-accordion { display: flex; flex-direction: column; gap: var(--ds-space-3); }
  .ds-accordion__item { background: var(--ds-surface); border-radius: var(--ds-radius-row); overflow: hidden; box-shadow: var(--ds-shadow-neu-sm); transition: var(--ds-transition-base); }
  .ds-accordion__item[open] { box-shadow: var(--ds-shadow-neu); }
  .ds-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); width: 100%; padding: var(--ds-space-4) var(--ds-space-5); font-family: var(--ds-font-body); font-size: var(--ds-text-body); font-weight: var(--ds-fw-medium); color: var(--ds-text-1); cursor: pointer; list-style: none; background: transparent; border: 0; text-align: left; }
  .ds-accordion__trigger::-webkit-details-marker { display: none; }
  .ds-accordion__chevron { flex-shrink: 0; color: var(--ds-text-2); transition: transform var(--ds-duration-moderate) var(--ds-ease-spring); }
  .ds-accordion__item[open] .ds-accordion__chevron { transform: var(--ds-chevron-rotate); }
  .ds-accordion__panel { padding: 0 var(--ds-space-5) var(--ds-space-4); font-size: var(--ds-text-body-sm); line-height: var(--ds-lh-relaxed); color: var(--ds-text-2); }

  /* ---- Tabs ---- */
  .ds-tabs__list { display: inline-flex; align-items: stretch; gap: var(--ds-space-1); padding: 0 var(--ds-space-2); background: var(--ds-surface); border-radius: var(--ds-radius-full); box-shadow: var(--ds-shadow-neu); }
  .ds-tabs__tab { position: relative; display: inline-flex; align-items: center; appearance: none; border: 0; background: transparent; padding: var(--ds-space-3) var(--ds-space-5); border-radius: 0; font-family: var(--ds-font-body); font-size: var(--ds-text-body-sm); font-weight: var(--ds-fw-medium); color: var(--ds-text-2); cursor: pointer; transition: var(--ds-transition-color); }
  .ds-tabs__tab:hover { color: var(--ds-text-1); }
  .ds-tabs__tab[aria-selected="true"], .ds-tabs__tab--active { color: var(--ds-text-1); }
  .ds-tabs__tab[aria-selected="true"]::after, .ds-tabs__tab--active::after { content: ""; position: absolute; left: var(--ds-space-5); right: var(--ds-space-5); bottom: 0; height: 2px; border-radius: 0; background: var(--ds-ink); }
  .ds-tabs__panels { padding-top: var(--ds-space-6); }
  .ds-tabs__panel[hidden] { display: none; }

  /* switch variant — inset pill track; the active option pops out as a raised badge.
     A departure from the underline default: the well is sunken, the badge is lifted. */
  .ds-tabs--switch .ds-tabs__list {
    gap: var(--ds-space-1); padding: var(--ds-space-1);
    background: var(--ds-surface-sunken); box-shadow: var(--ds-shadow-neu-inset);
  }
  .ds-tabs--switch .ds-tabs__tab { border-radius: var(--ds-radius-full); padding: var(--ds-space-2) var(--ds-space-4); }
  .ds-tabs--switch .ds-tabs__tab[aria-selected="true"]::after,
  .ds-tabs--switch .ds-tabs__tab--active::after { display: none; }   /* drop the underline */
  .ds-tabs--switch .ds-tabs__tab[aria-selected="true"],
  .ds-tabs--switch .ds-tabs__tab--active {
    background: var(--ds-surface); color: var(--ds-text-1); box-shadow: var(--ds-shadow-neu-sm);
  }
  /* opt-in: black active badge for a stronger selected read */
  .ds-tabs--switch.ds-tabs--ink .ds-tabs__tab[aria-selected="true"],
  .ds-tabs--switch.ds-tabs--ink .ds-tabs__tab--active {
    background: var(--ds-ink); color: var(--ds-on-ink); box-shadow: var(--ds-shadow-dark-button);
  }

  /* ---- Dropdown / Menu (floats above canvas → raised white) ---- */
  .ds-dropdown { position: relative; display: inline-block; }
  .ds-dropdown__menu { position: absolute; top: calc(100% + var(--ds-space-2)); left: 0; z-index: var(--ds-z-dropdown); min-width: 200px; padding: var(--ds-space-1); background: var(--ds-surface-raised); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow-e4); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--ds-duration-fast) var(--ds-ease-out), transform var(--ds-duration-fast) var(--ds-ease-out), visibility var(--ds-duration-fast); }
  .ds-dropdown__menu--right { left: auto; right: 0; }
  .ds-dropdown.is-open .ds-dropdown__menu, .ds-dropdown__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .ds-dropdown__item { display: flex; align-items: center; gap: var(--ds-space-2); width: 100%; padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-sm); font-size: var(--ds-text-body-sm); color: var(--ds-text-1); cursor: pointer; border: 0; background: transparent; text-align: left; transition: var(--ds-transition-color); }
  .ds-dropdown__item:hover { background: var(--ds-surface); }
  .ds-dropdown__item--danger { color: var(--ds-error); }
  .ds-dropdown__item i { width: 16px; text-align: center; opacity: 0.7; }
  .ds-dropdown__label { padding: var(--ds-space-2) var(--ds-space-3); font-size: 11px; text-transform: uppercase; letter-spacing: var(--ds-ls-eyebrow); color: var(--ds-text-2); }

  /* ---- Select menu (custom — a fully-styled, 3D open state, unlike native <select>) ---- */
  .ds-select-menu { position: relative; display: block; }
  .ds-select-menu__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); width: 100%; padding: var(--ds-space-3) var(--ds-space-4); font-family: var(--ds-font-body); font-size: var(--ds-text-body-sm); color: var(--ds-text-1); background: var(--ds-surface); border: 0; border-radius: var(--ds-radius-btn); box-shadow: var(--ds-shadow-neu); cursor: pointer; text-align: left; transition: var(--ds-transition-base); -webkit-appearance: none; appearance: none; }
  .ds-select-menu__trigger:focus-visible { outline: none; box-shadow: var(--ds-shadow-neu), 0 0 0 3px rgba(0,0,0,0.14); }
  .ds-select-menu.is-open .ds-select-menu__trigger { box-shadow: var(--ds-shadow-neu), 0 0 0 3px rgba(0,0,0,0.14); }
  [data-theme="dark"] .ds-select-menu__trigger:focus-visible,
  [data-theme="dark"] .ds-select-menu.is-open .ds-select-menu__trigger { box-shadow: var(--ds-shadow-neu), 0 0 0 3px rgba(255,255,255,0.16); }
  .ds-select-menu__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ds-select-menu__chevron { flex-shrink: 0; color: var(--ds-text-2); transition: transform var(--ds-duration-moderate) var(--ds-ease-spring); }
  .ds-select-menu.is-open .ds-select-menu__chevron { transform: var(--ds-chevron-rotate); }
  .ds-select-menu .ds-dropdown__menu { left: 0; right: 0; width: 100%; min-width: 0; }
  .ds-select-menu .ds-dropdown__item[aria-selected="true"] { font-weight: var(--ds-fw-semibold); }
  .ds-select-menu .ds-dropdown__item[aria-selected="true"]::after { content: "\2713"; margin-left: auto; font-size: 12px; color: var(--ds-text-2); }

  /* ---- Date picker / calendar ----
     Composed entirely from reliefs that already exist in the system, so it reads
     as native Orbit rather than a bolted-on widget:
       • field trigger == a raised neumorphic field   (mirrors .ds-select-menu__trigger)
       • popover       == a white floating surface     (mirrors .ds-dropdown__menu)
       • a DAY         == a tiny button: ghost by default, INK-FILLED when selected
                          (the same active fill as primary btn / checked box / done step)
       • nav arrows    == domed circle buttons          (mirror .ds-carousel__arrow)
       • "today"       == the underline-DOT motif        (tabs / progress-dots)
     Token-driven throughout → dark mode and the --ds-accent knob apply for free. */

  .ds-datepicker { position: relative; display: block; }
  /* field trigger — same raised field + focus ring as the custom select */
  .ds-datepicker__trigger {
    display: flex; align-items: center; gap: var(--ds-space-2-5); width: 100%;
    padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-2) var(--ds-space-2);
    font-family: var(--ds-font-body); font-size: var(--ds-text-body-sm); color: var(--ds-text-1);
    background: var(--ds-surface); border: 1px solid transparent; border-radius: var(--ds-radius-btn);
    box-shadow: var(--ds-shadow-neu); cursor: pointer; text-align: left;
    transition: var(--ds-transition-base); -webkit-appearance: none; appearance: none;
  }
  .ds-datepicker__trigger:focus-visible { outline: none; box-shadow: var(--ds-shadow-neu), 0 0 0 3px rgba(0,0,0,0.14); }
  .ds-datepicker.is-open .ds-datepicker__trigger { box-shadow: var(--ds-shadow-neu), 0 0 0 3px rgba(0,0,0,0.14); }
  [data-theme="dark"] .ds-datepicker__trigger:focus-visible,
  [data-theme="dark"] .ds-datepicker.is-open .ds-datepicker__trigger { box-shadow: var(--ds-shadow-neu), 0 0 0 3px rgba(255,255,255,0.16); }
  /* leading domed calendar disc (same relief as avatars / input-group icons) */
  .ds-datepicker__icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--ds-radius-full);
    background: var(--ds-surface); box-shadow: var(--ds-shadow-neu-circle);
    color: var(--ds-text-1); font-size: 12px; line-height: 1;
  }
  .ds-datepicker__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ds-datepicker__value:empty::before { content: attr(data-placeholder); color: var(--ds-text-3); }
  .ds-datepicker__chevron { flex-shrink: 0; color: var(--ds-text-2); transition: transform var(--ds-duration-moderate) var(--ds-ease-spring); }
  .ds-datepicker.is-open .ds-datepicker__chevron { transform: var(--ds-chevron-rotate); }

  /* popover — floats above the canvas, identical surface to .ds-dropdown__menu */
  .ds-datepicker__panel {
    position: absolute; top: calc(100% + var(--ds-space-2)); left: 0; z-index: var(--ds-z-dropdown);
    width: 100%; min-width: 280px; padding: var(--ds-space-4);
    background: var(--ds-surface-raised); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow-e4);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--ds-duration-fast) var(--ds-ease-out), transform var(--ds-duration-fast) var(--ds-ease-out), visibility var(--ds-duration-fast);
  }
  .ds-datepicker__panel--right { left: auto; right: 0; }
  /* in a popover the calendar fills the trigger width (the field is usually wider
     than the 280px standalone calendar); the grid is fluid so discs just gain air */
  .ds-datepicker__panel .ds-cal { width: 100%; }
  .ds-datepicker.is-open .ds-datepicker__panel { opacity: 1; visibility: visible; transform: translateY(0); }

  /* the calendar — used inside the popover, or standalone via .ds-cal--inline */
  .ds-cal { --_cal-cell: 40px; width: calc(var(--_cal-cell) * 7); user-select: none; }
  .ds-cal--inline { background: var(--ds-surface); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow-neu); padding: var(--ds-space-4); }

  .ds-cal__header { display: flex; align-items: center; gap: var(--ds-space-2); margin-bottom: var(--ds-space-3); }
  .ds-cal__nav {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: 0; border-radius: var(--ds-radius-full);
    background: var(--ds-surface); box-shadow: var(--ds-shadow-neu-circle); color: var(--ds-text-1);
    cursor: pointer; font-size: 12px; transition: var(--ds-transition-base);
  }
  .ds-cal__nav:hover { box-shadow: var(--ds-shadow-neu-hover); transform: var(--ds-lift-hover); }
  .ds-cal__nav:active { box-shadow: var(--ds-shadow-neu-pressed); transform: translateY(0); }
  .ds-cal__title {
    flex: 1; text-align: center; appearance: none; border: 0; background: transparent; cursor: pointer;
    font-family: var(--ds-font-heading); font-size: var(--ds-text-h6); font-weight: var(--ds-fw-medium);
    letter-spacing: var(--ds-ls-h5); color: var(--ds-text-1); padding: var(--ds-space-1) var(--ds-space-2);
    border-radius: var(--ds-radius-sm); transition: var(--ds-transition-color);
  }
  .ds-cal__title:hover { background: var(--ds-accent-subtle); }

  .ds-cal__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--ds-space-1); }
  .ds-cal__weekday {
    text-align: center; font-size: 11px; font-weight: var(--ds-fw-medium); text-transform: uppercase;
    letter-spacing: var(--ds-ls-eyebrow); color: var(--ds-text-3); line-height: 28px;
  }

  .ds-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: var(--ds-space-1); }

  /* a day == a tiny button. The disc is a ::before behind the number (isolation +
     negative z-index); the button's own background carries the range band. */
  .ds-cal__day {
    position: relative; isolation: isolate; appearance: none; border: 0; cursor: pointer;
    height: var(--_cal-cell); padding: 3px 0; background-color: transparent; background-clip: content-box;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--ds-font-body); font-size: var(--ds-text-body-sm); font-variant-numeric: tabular-nums;
    color: var(--ds-text-1); transition: color var(--ds-duration-fast) var(--ds-ease-out);
  }
  .ds-cal__day::before {
    content: ""; position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; z-index: -1;
    border-radius: var(--ds-radius-full); background: transparent;
    transition: background var(--ds-duration-fast) var(--ds-ease-out),
                box-shadow var(--ds-duration-base) var(--ds-ease-spring);
  }
  .ds-cal__day:hover::before { background: var(--ds-accent-subtle); }
  .ds-cal__day--muted { color: var(--ds-ink-disabled); }
  /* today — a dot under the number (the system's active-underline motif) */
  .ds-cal__day--today::after {
    content: ""; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: var(--ds-radius-full); background: var(--ds-ink);
  }
  /* selected — the established active fill: ink disc + dark shadow */
  .ds-cal__day--selected { color: var(--ds-on-ink); }
  .ds-cal__day--selected::before { background: var(--ds-ink); box-shadow: var(--ds-shadow-dark-button); }
  .ds-cal__day--selected.ds-cal__day--today::after { background: var(--ds-on-ink); }
  .ds-cal__day:disabled { color: var(--ds-ink-disabled); cursor: not-allowed; }
  .ds-cal__day:disabled:hover::before { background: transparent; }

  /* range — accent-subtle band between endpoints (columns touch: no col gap) */
  .ds-cal__day--in-range { background-color: var(--ds-accent-subtle); }
  .ds-cal__day--range-start { background-image: linear-gradient(90deg, transparent 50%, var(--ds-accent-subtle) 50%); color: var(--ds-on-ink); }
  .ds-cal__day--range-end { background-image: linear-gradient(90deg, var(--ds-accent-subtle) 50%, transparent 50%); color: var(--ds-on-ink); }
  .ds-cal__day--range-start::before, .ds-cal__day--range-end::before { background: var(--ds-ink); box-shadow: var(--ds-shadow-dark-button); }
  .ds-cal__day--range-start.ds-cal__day--range-end { background-image: none; }  /* single-day range: no half band */

  /* month quick-pick view (title click) — same ghost→ink language as days */
  .ds-cal__grid--months { grid-template-columns: repeat(3, 1fr); gap: var(--ds-space-2); margin-top: var(--ds-space-1); }
  .ds-cal__month {
    position: relative; appearance: none; border: 0; background: transparent; cursor: pointer;
    height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ds-radius-md); font-family: var(--ds-font-body); font-size: var(--ds-text-body-sm);
    color: var(--ds-text-1); transition: var(--ds-transition-color);
  }
  .ds-cal__month:hover { background: var(--ds-accent-subtle); }
  .ds-cal__month--selected { background: var(--ds-ink); color: var(--ds-on-ink); box-shadow: var(--ds-shadow-dark-button); }

  /* footer — quick actions divided by a hairline (like .ds-card__footer) */
  .ds-cal__footer {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2);
    margin-top: var(--ds-space-3); padding-top: var(--ds-space-3); border-top: 1px solid var(--ds-border-hairline);
  }

  /* ---- Chat bubble ---- */
  .ds-chat { display: flex; flex-direction: column; gap: var(--ds-space-2); }
  .ds-chat-bubble { max-width: 78%; padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-bubble); font-size: var(--ds-text-body-sm); line-height: var(--ds-lh-normal); }
  .ds-chat-bubble--in { align-self: flex-start; background: var(--ds-surface-raised); color: var(--ds-text-1); box-shadow: var(--ds-shadow-neu-sm); border-start-start-radius: var(--ds-radius-sm); }
  .ds-chat-bubble--out { align-self: flex-end; background: var(--ds-ink); color: var(--ds-on-ink); box-shadow: var(--ds-shadow-dark-button); border-start-end-radius: var(--ds-radius-sm); }

  /* ---- App chip (neumorphic) ---- */
  .ds-app-chip { display: inline-flex; align-items: center; gap: var(--ds-space-1-5); padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-surface); border-radius: var(--ds-radius-full); box-shadow: var(--ds-shadow-neu-sm); font-size: 13px; font-weight: var(--ds-fw-medium); color: var(--ds-text-1); }
  .ds-app-chip__icon { font-size: 16px; }
  .ds-app-chip--social { padding: 0; width: 36px; height: 36px; justify-content: center; border-radius: var(--ds-radius-md); color: var(--ds-text-2); transition: var(--ds-transition-base); }
  .ds-app-chip--social:hover { color: var(--ds-text-1); box-shadow: var(--ds-shadow-neu); transform: var(--ds-lift-hover); }
  .ds-app-chip--floating { position: absolute; }
  .ds-app-chip--dark { background: var(--ds-ink); background-image: var(--ds-gradient-gloss); color: var(--ds-on-ink); box-shadow: var(--ds-shadow-dark-button); }

  /* ---- Carousel ---- */
  .ds-carousel { position: relative; }
  .ds-carousel__viewport { overflow: hidden; }
  .ds-carousel__track { display: flex; gap: var(--ds-gap); transition: transform var(--ds-duration-moderate) var(--ds-ease-spring); }
  .ds-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: var(--ds-z-raised); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--ds-surface); border: 0; border-radius: var(--ds-radius-full); box-shadow: var(--ds-shadow-neu-circle); cursor: pointer; color: var(--ds-text-1); transition: var(--ds-transition-base); }
  .ds-carousel__arrow:hover { box-shadow: var(--ds-shadow-neu-hover); }
  .ds-carousel__arrow--prev { left: calc(-1 * var(--ds-space-5)); }
  .ds-carousel__arrow--next { right: calc(-1 * var(--ds-space-5)); }
  .ds-carousel__arrow:disabled { opacity: 0.3; cursor: default; }
  .ds-carousel__dots { display: flex; gap: var(--ds-space-2); justify-content: center; margin-top: var(--ds-space-5); }
  .ds-carousel__dot { width: 8px; height: 8px; border-radius: var(--ds-radius-full); background: var(--ds-border-default); border: 0; cursor: pointer; padding: 0; transition: width var(--ds-duration-base) var(--ds-ease-spring), background var(--ds-duration-base); }
  .ds-carousel__dot--active { background: var(--ds-ink); width: 18px; }

  /* ---- Table ---- */
  .ds-table-wrap { overflow: hidden; border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow-neu); background: var(--ds-surface); }
  .ds-table { width: 100%; border-collapse: collapse; }
  .ds-table th { text-align: left; font-size: var(--ds-text-caption); font-weight: var(--ds-fw-medium); text-transform: uppercase; letter-spacing: var(--ds-ls-eyebrow); color: var(--ds-text-2); padding: var(--ds-space-3) var(--ds-space-4); border-bottom: 1px solid var(--ds-border-hairline); }
  .ds-table td { padding: var(--ds-space-3) var(--ds-space-4); font-size: var(--ds-text-body-sm); color: var(--ds-text-1); border-bottom: 1px solid var(--ds-border-hairline); }
  .ds-table tbody tr:last-child td { border-bottom: 0; }
  .ds-table--hoverable tbody tr:hover { background: rgba(0,0,0,0.02); }
  .ds-table td.ds-table__num, .ds-table th.ds-table__num { text-align: right; font-variant-numeric: tabular-nums; }
  .ds-table__empty { text-align: center; padding-block: var(--ds-space-12); color: var(--ds-text-3); }

  /* ---- Tooltip ---- */
  .ds-tooltip { position: relative; display: inline-flex; }
  .ds-tooltip__bubble { position: absolute; bottom: calc(100% + var(--ds-space-2)); left: 50%; transform: translateX(-50%) translateY(4px); z-index: var(--ds-z-tooltip); padding: var(--ds-space-1-5) var(--ds-space-3); background: var(--ds-ink); color: var(--ds-on-ink); font-size: var(--ds-text-caption); white-space: nowrap; border-radius: var(--ds-radius-xs); box-shadow: var(--ds-shadow-dark-button); pointer-events: none; opacity: 0; transition: opacity var(--ds-duration-fast) var(--ds-ease-out), transform var(--ds-duration-fast) var(--ds-ease-out); }
  .ds-tooltip:hover .ds-tooltip__bubble, .ds-tooltip:focus-within .ds-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ---- Avatar ---- */
  .ds-avatar { --_av: 40px; position: relative; width: var(--_av); height: var(--_av); border-radius: var(--ds-radius-full); overflow: hidden; flex-shrink: 0; background: var(--ds-surface); box-shadow: var(--ds-shadow-neu-sm); display: inline-flex; align-items: center; justify-content: center; }
  .ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .ds-avatar__initials { font-weight: var(--ds-fw-semibold); color: var(--ds-text-1); text-transform: uppercase; font-size: calc(var(--_av) * 0.4); }
  .ds-avatar--xs { --_av: 24px; } .ds-avatar--sm { --_av: 32px; } .ds-avatar--lg { --_av: 56px; } .ds-avatar--xl { --_av: 80px; }
  .ds-avatar__status { position: absolute; bottom: 0; right: 0; width: 25%; height: 25%; border-radius: var(--ds-radius-full); border: 2px solid var(--ds-surface-page); }
  .ds-avatar__status--online { background: var(--ds-state-success-icon); }
  .ds-avatar__status--busy { background: var(--ds-state-warning-icon); }
  .ds-avatar__status--offline { background: var(--ds-text-3); }
  .ds-avatar-group { display: inline-flex; }
  .ds-avatar-group .ds-avatar + .ds-avatar { margin-left: -10px; }

  /* ---- Divider ---- */
  .ds-divider { width: 100%; height: 1px; background: var(--ds-border-hairline); border: 0; margin-block: var(--ds-space-4); }
  .ds-divider--dashed { height: 0; background: none; border-top: 1px dashed var(--ds-border-subtle); }
  .ds-divider--dark { background: var(--ds-border-inverse); }
  .ds-divider--vertical { width: 1px; height: auto; align-self: stretch; margin: 0 var(--ds-space-2); }
  .ds-divider--labeled { display: flex; align-items: center; gap: var(--ds-space-3); background: none; height: auto; }
  .ds-divider--labeled::before, .ds-divider--labeled::after { content: ""; flex: 1; height: 1px; background: var(--ds-border-hairline); }
  .ds-divider__label { font-size: var(--ds-text-caption); color: var(--ds-text-3); }

  /* ---- Alert / Info ---- */
  .ds-alert { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-card); border-left: 3px solid var(--ds-ink); background: var(--ds-surface); box-shadow: var(--ds-shadow-neu-sm); font-size: var(--ds-text-body-sm); }
  /* raised domed medallion (same relief as avatars / icon-tiles).
     display:!important is required: Font Awesome's UNLAYERED reset sets display on .fa-*
     and would beat this @layer rule, leaving the glyph un-centered (top-left of the disc). */
  .ds-alert__icon { flex-shrink: 0; display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--ds-radius-full); background: var(--ds-surface); box-shadow: var(--ds-shadow-neu-circle); color: var(--ds-text-1); font-size: 14px; line-height: 1; }
  .ds-alert__content { display: flex; flex-direction: column; gap: 2px; }
  .ds-alert__title { font-weight: var(--ds-fw-semibold); }
  .ds-alert__body { font-size: 13px; line-height: var(--ds-lh-normal); color: var(--ds-text-2); }
  .ds-alert__close { margin-left: auto; }
  .ds-alert--success { background: var(--ds-state-success-bg); border-left-color: var(--ds-state-success-icon); }
  .ds-alert--success .ds-alert__icon { color: var(--ds-state-success-icon); }
  .ds-alert--warning { background: var(--ds-state-warning-bg); border-left-color: var(--ds-state-warning-icon); }
  .ds-alert--warning .ds-alert__icon { color: var(--ds-state-warning-icon); }
  .ds-alert--error { background: var(--ds-state-error-bg); border-left-color: var(--ds-state-error-icon); }
  .ds-alert--error .ds-alert__icon { color: var(--ds-state-error-icon); }
  .ds-alert--info { background: var(--ds-state-info-bg); border-left-color: var(--ds-state-info-icon); }
  .ds-alert--info .ds-alert__icon { color: var(--ds-state-info-icon); }
  .ds-alert--accent { border-left-color: var(--ds-accent); }

  /* ---- Progress dots ---- */
  .ds-progress-dots { display: inline-flex; gap: var(--ds-space-2); align-items: center; }
  .ds-progress-dots__dot { width: 8px; height: 8px; border-radius: var(--ds-radius-full); background: var(--ds-border-default); transition: width var(--ds-duration-base) var(--ds-ease-spring); }
  .ds-progress-dots__dot--active { background: var(--ds-ink); width: 18px; }
  .ds-progress-dots__dot--completed { background: var(--ds-ink); }

  /* ---- Steps ---- */
  .ds-steps { display: flex; align-items: flex-start; }
  .ds-steps__step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; text-align: center; }
  .ds-steps__circle { width: 36px; height: 36px; border-radius: var(--ds-radius-full); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: var(--ds-fw-semibold); color: var(--ds-text-3); background: var(--ds-surface); box-shadow: var(--ds-shadow-neu-sm); z-index: 1; }
  .ds-steps__connector { position: absolute; top: 18px; left: 50%; width: 100%; height: 2px; background: var(--ds-border-default); }
  .ds-steps__label { margin-top: var(--ds-space-2); font-size: var(--ds-text-caption); color: var(--ds-text-2); }
  .ds-steps__step--completed .ds-steps__circle { background: var(--ds-ink); color: var(--ds-on-ink); box-shadow: var(--ds-shadow-dark-button); }
  .ds-steps__step--completed .ds-steps__connector { background: var(--ds-ink); }
  .ds-steps__step--active .ds-steps__circle { color: var(--ds-text-1); }
  .ds-steps__step:last-child .ds-steps__connector { display: none; }

  /* ---- Skeleton / Spinner ---- */
  .ds-skeleton { background: var(--ds-surface-sunken); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-neu-inset); animation: ds-pulse 1.5s ease infinite; }
  .ds-skeleton--text { height: 14px; margin-bottom: var(--ds-space-2); }
  .ds-skeleton--title { height: 24px; width: 60%; }
  .ds-skeleton--avatar { width: 40px; height: 40px; border-radius: var(--ds-radius-full); }
  .ds-skeleton--image { aspect-ratio: 16 / 9; border-radius: var(--ds-radius-card); }
  @keyframes ds-pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
  .ds-spinner { width: 20px; height: 20px; border: 2px solid var(--ds-border-default); border-top-color: var(--ds-ink); border-radius: var(--ds-radius-full); animation: ds-spin 0.8s linear infinite; display: inline-block; }
  .ds-spinner--sm { width: 16px; height: 16px; } .ds-spinner--lg { width: 28px; height: 28px; border-width: 3px; }
  .ds-spinner--on-dark { border-color: rgba(255,255,255,0.25); border-top-color: #fff; }
  @keyframes ds-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .ds-skeleton, .ds-spinner, .ds-orb__ripples { animation: none; } }

  /* ---- Orb (signature hero/footer visual) ---- */
  .ds-orb { --_orb: 380px; position: relative; width: var(--_orb); height: var(--_orb); max-width: 100%; display: grid; place-items: center; }
  .ds-orb__ripples { position: absolute; inset: 0; border-radius: var(--ds-radius-full); background: repeating-radial-gradient(circle at 50% 58%, transparent 0 16px, rgba(0,0,0,0.035) 16px 17px); -webkit-mask-image: radial-gradient(circle at 50% 58%, #000 35%, transparent 72%); mask-image: radial-gradient(circle at 50% 58%, #000 35%, transparent 72%); animation: ds-orb-breathe 6s var(--ds-ease-spring) infinite; }
  .ds-orb__sphere { position: relative; width: 46%; aspect-ratio: 1; border-radius: var(--ds-radius-full); background: radial-gradient(120% 120% at 30% 22%, #ffffff 0%, #f3f4f6 30%, #d7dadf 62%, #b9bdc4 100%); box-shadow: var(--ds-shadow-neu-hover), inset 0 -18px 36px rgba(120,128,140,0.45), inset 0 14px 28px rgba(255,255,255,0.9); }
  [data-theme="dark"] .ds-orb__sphere { background: radial-gradient(120% 120% at 30% 22%, #3a3a3d 0%, #232325 40%, #161617 100%); box-shadow: var(--ds-shadow-neu-hover), inset 0 -18px 36px rgba(0,0,0,0.6), inset 0 14px 28px rgba(255,255,255,0.08); }
  [data-theme="dark"] .ds-orb__ripples { background: repeating-radial-gradient(circle at 50% 58%, transparent 0 16px, rgba(255,255,255,0.05) 16px 17px); }
  @keyframes ds-orb-breathe { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.04); opacity: 1; } }

  /* ---- Modal ---- */
  .ds-modal-backdrop { position: fixed; inset: 0; z-index: var(--ds-z-overlay); background: rgba(0,0,0,0.45); display: grid; place-items: center; padding: var(--ds-space-4); opacity: 0; visibility: hidden; transition: opacity var(--ds-duration-base) var(--ds-ease-out), visibility var(--ds-duration-base); }
  @supports (backdrop-filter: blur(1px)) { .ds-modal-backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } }
  .ds-modal-backdrop.is-open { opacity: 1; visibility: visible; }
  .ds-modal { z-index: var(--ds-z-modal); width: 100%; max-width: var(--ds-container-sm); background: var(--ds-surface-raised); border-radius: var(--ds-radius-card-lg); box-shadow: var(--ds-shadow-e4); padding: var(--ds-space-8); transform: translateY(8px) scale(0.98); transition: transform var(--ds-duration-base) var(--ds-ease-spring); }
  .ds-modal-backdrop.is-open .ds-modal { transform: none; }
  .ds-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-4); margin-bottom: var(--ds-space-4); }
  .ds-modal__title { font-family: var(--ds-font-heading); font-size: var(--ds-text-h4); font-weight: var(--ds-fw-medium); }
  .ds-modal__footer { display: flex; justify-content: flex-end; gap: var(--ds-space-3); margin-top: var(--ds-space-6); }

  /* ---- Toast ---- */
  .ds-toast-container { position: fixed; bottom: var(--ds-space-6); right: var(--ds-space-6); z-index: var(--ds-z-toast); display: flex; flex-direction: column-reverse; gap: var(--ds-space-2); }
  .ds-toast { display: flex; align-items: center; gap: var(--ds-space-3); min-width: 280px; max-width: 380px; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface-raised); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow-e4); font-size: var(--ds-text-body-sm); }
  .ds-toast__icon { flex-shrink: 0; }
  .ds-toast--success .ds-toast__icon { color: var(--ds-state-success-icon); }
  .ds-toast--error .ds-toast__icon { color: var(--ds-state-error-icon); }
  .ds-toast__close { margin-left: auto; }

  /* ---- Footer / CTA ---- */
  .ds-footer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ds-space-8); padding-block: var(--ds-section-pad-y-xl); }
  .ds-footer__socials { display: flex; gap: var(--ds-space-2); }
  .ds-footer__wordmark { font-family: var(--ds-font-display); font-size: var(--ds-text-display); font-weight: var(--ds-fw-regular); letter-spacing: var(--ds-ls-display); line-height: 1; color: var(--ds-text-1); }
  .ds-footer__subhead { font-size: var(--ds-text-h5); color: var(--ds-text-2); }
  .ds-footer__nav { display: flex; flex-wrap: wrap; gap: var(--ds-space-6); justify-content: center; }
  .ds-footer__nav a { font-size: var(--ds-text-body-sm); color: var(--ds-text-2); }
  .ds-footer__nav a:hover { color: var(--ds-text-1); text-decoration: underline; text-underline-offset: 3px; }
  .ds-footer__copy { font-size: var(--ds-text-caption); color: var(--ds-text-3); }
}

/* ==========================================================================
   9. FORMS
   ========================================================================== */
@layer ds.forms {
  .ds-form-group { display: flex; flex-direction: column; gap: var(--ds-space-1-5); margin-bottom: var(--ds-space-4); }
  .ds-form-group:last-child { margin-bottom: 0; }
  .ds-label { font-size: 13px; font-weight: var(--ds-fw-medium); color: var(--ds-text-1); }
  .ds-label--required::after { content: " *"; color: var(--ds-error); }
  .ds-hint { font-size: var(--ds-text-caption); color: var(--ds-text-2); }
  .ds-form-row { display: flex; gap: var(--ds-space-4); flex-wrap: wrap; }
  .ds-form-row > * { flex: 1; min-width: 180px; }
  .ds-fieldset { border: 1px solid var(--ds-border-hairline); border-radius: var(--ds-radius-card); padding: var(--ds-space-5); }
  .ds-legend { font-size: 13px; font-weight: var(--ds-fw-semibold); padding-inline: var(--ds-space-2); }

  /* neumorphic sunken fields */
  .ds-input, .ds-textarea, .ds-select {
    width: 100%; padding: var(--ds-space-3) var(--ds-space-4);
    font-family: var(--ds-font-body); font-size: var(--ds-text-body-sm); color: var(--ds-text-1);
    background: var(--ds-surface); border: 1px solid transparent;
    border-radius: var(--ds-radius-btn); box-shadow: var(--ds-shadow-neu);
    transition: var(--ds-transition-base); -webkit-appearance: none; appearance: none;
  }
  .ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-text-3); }
  .ds-input:focus, .ds-textarea:focus, .ds-select:focus {
    outline: none; border-color: transparent;
    box-shadow: var(--ds-shadow-neu), 0 0 0 3px rgba(0,0,0,0.14);
  }
  [data-theme="dark"] .ds-input:focus, [data-theme="dark"] .ds-textarea:focus, [data-theme="dark"] .ds-select:focus { box-shadow: var(--ds-shadow-neu), 0 0 0 3px rgba(255,255,255,0.16); }
  .ds-input:disabled, .ds-textarea:disabled, .ds-select:disabled { opacity: 0.55; cursor: not-allowed; }
  .ds-input[readonly], .ds-textarea[readonly] { box-shadow: var(--ds-shadow-neu-pressed); color: var(--ds-text-2); }
  .ds-input--sm { padding: var(--ds-space-2) var(--ds-space-3); font-size: 13px; }
  .ds-input--lg { padding: var(--ds-space-4) var(--ds-space-5); font-size: var(--ds-text-body); }
  .ds-textarea { min-height: 96px; resize: vertical; line-height: var(--ds-lh-normal); border-radius: var(--ds-radius-lg); }

  .ds-input-group { position: relative; display: flex; align-items: center; }
  .ds-input-group .ds-input { flex: 1; }
  /* raised domed disc inside the field (matches alert icons / avatars).
     display:!important — see .ds-alert__icon note (defeats Font Awesome's unlayered reset). */
  .ds-input-group__icon { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex !important; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--ds-radius-full); background: var(--ds-surface); box-shadow: var(--ds-shadow-neu-circle); color: var(--ds-text-2); font-size: 12px; line-height: 1; pointer-events: none; z-index: 1; }
  .ds-input-group__icon--left { left: var(--ds-space-2); }
  .ds-input-group__icon--right { right: var(--ds-space-2); }
  .ds-input-group--icon-left .ds-input { padding-left: calc(var(--ds-space-2) + 28px + var(--ds-space-2)); }
  .ds-input-group--icon-right .ds-input { padding-right: calc(var(--ds-space-2) + 28px + var(--ds-space-2)); }
  .ds-input-group:focus-within .ds-input-group__icon { color: var(--ds-text-1); }
  .ds-input--search { border-radius: var(--ds-radius-full); }

  .ds-select-wrap { position: relative; }
  .ds-select { padding-right: calc(var(--ds-space-4) + 22px); cursor: pointer; }
  .ds-select-wrap::after { content: "\25BE"; font-size: 12px; position: absolute; right: var(--ds-space-4); top: 50%; transform: translateY(-50%); color: var(--ds-text-2); pointer-events: none; }

  .ds-feedback { display: flex; align-items: center; gap: var(--ds-space-1); font-size: var(--ds-text-caption); margin-top: 2px; }
  .ds-feedback--error { color: var(--ds-error); }
  .ds-feedback--success { color: var(--ds-success); }
  .ds-input.is-invalid, .ds-textarea.is-invalid, .ds-select.is-invalid { border-color: var(--ds-error); box-shadow: var(--ds-shadow-neu), 0 0 0 2px var(--ds-error); }
  .ds-input.is-valid, .ds-textarea.is-valid, .ds-select.is-valid { border-color: var(--ds-success); }

  /* checkbox / radio (raised controls) */
  .ds-checkbox, .ds-radio { display: inline-flex; align-items: center; gap: var(--ds-space-2-5); cursor: pointer; }
  .ds-checkbox input, .ds-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
  .ds-checkbox__control, .ds-radio__control { position: relative; width: 20px; height: 20px; flex-shrink: 0; margin-top: 0; background: var(--ds-surface); box-shadow: var(--ds-shadow-neu-sm); transition: var(--ds-transition-base); }
  .ds-checkbox__control { border-radius: var(--ds-radius-xs); }
  .ds-radio__control { border-radius: var(--ds-radius-full); }
  .ds-checkbox__control::after { content: ""; position: absolute; left: 6.5px; top: 2.7px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--ds-duration-fast) var(--ds-ease-spring); }
  .ds-radio__control::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: var(--ds-radius-full); background: #fff; transform: scale(0); transition: transform var(--ds-duration-fast) var(--ds-ease-spring); }
  .ds-checkbox input:checked + .ds-checkbox__control, .ds-radio input:checked + .ds-radio__control { background: var(--ds-ink); box-shadow: var(--ds-shadow-dark-button); }
  .ds-checkbox input:checked + .ds-checkbox__control::after { transform: rotate(45deg) scale(1); }
  .ds-radio input:checked + .ds-radio__control::after { transform: scale(1); }
  /* dark: the checked control is WHITE (--ds-ink inverts) — a #fff tick/dot would vanish on it */
  [data-theme="dark"] .ds-checkbox__control::after { border-color: var(--ds-on-ink); }
  [data-theme="dark"] .ds-radio__control::after { background: var(--ds-on-ink); }
  .ds-checkbox input:focus-visible + .ds-checkbox__control, .ds-radio input:focus-visible + .ds-radio__control { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
  .ds-checkbox input:disabled ~ *, .ds-radio input:disabled ~ * { opacity: 0.45; cursor: not-allowed; }
  .ds-checkbox__label, .ds-radio__label { font-size: var(--ds-text-body-sm); color: var(--ds-text-1); user-select: none; }
  .ds-radio-group { display: flex; flex-direction: column; gap: var(--ds-space-3); }

  .ds-tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); min-height: 46px; background: var(--ds-surface); border-radius: var(--ds-radius-btn); box-shadow: var(--ds-shadow-neu); }
  .ds-tag-input:focus-within { box-shadow: var(--ds-shadow-neu), 0 0 0 3px rgba(0,0,0,0.12); }
  .ds-tag-input__field { flex: 1; min-width: 80px; border: 0; outline: 0; background: transparent; font: inherit; color: var(--ds-text-1); }
}

/* ==========================================================================
   10. UTILITIES
   ========================================================================== */
@layer ds.utilities {
  .ds-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ds-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ds-text-center { text-align: center; } .ds-text-left { text-align: left; }
  .ds-flex { display: flex; } .ds-inline-flex { display: inline-flex; }
  .ds-items-center { align-items: center; } .ds-justify-between { justify-content: space-between; } .ds-justify-center { justify-content: center; }
  .ds-flex-col { flex-direction: column; } .ds-flex-wrap { flex-wrap: wrap; }
  .ds-gap-1 { gap: var(--ds-space-1); } .ds-gap-2 { gap: var(--ds-space-2); } .ds-gap-3 { gap: var(--ds-space-3); }
  .ds-gap-4 { gap: var(--ds-space-4); } .ds-gap-6 { gap: var(--ds-space-6); }
  .ds-mt-2 { margin-top: var(--ds-space-2); } .ds-mt-4 { margin-top: var(--ds-space-4); } .ds-mt-6 { margin-top: var(--ds-space-6); } .ds-mt-8 { margin-top: var(--ds-space-8); }
  .ds-mb-2 { margin-bottom: var(--ds-space-2); } .ds-mb-4 { margin-bottom: var(--ds-space-4); } .ds-mb-6 { margin-bottom: var(--ds-space-6); }
  .ds-w-full { width: 100%; }
  .ds-relative { position: relative; }
}