@layer reset, base, components, modules, utilities;
@layer reset, base, components, modules, utilities;

:root {
  /* Spacing */
  --inline-space: 1rem;
  --inline-space-quarter: 0.25rem;
  --inline-space-half: 0.5rem;
  --inline-space-double: 2rem;
  --block-space: 1rem;
  --block-space-quarter: 0.25rem;
  --block-space-half: 0.5rem;
  --block-space-double: 2rem;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-3xl: 2.5rem;
  --radius-pill: 999px;

  /* Layout */
  --container-max: 87rem;
  --container-padding: clamp(1rem, 3vw, 2rem);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 6%);
  --shadow-md: 0 4px 8px -2px rgb(15 23 42 / 10%);
  --shadow-lg: 0 10px 24px -8px rgb(15 23 42 / 20%);

  /* Palette */
  --color-white: #ffffff;
  --color-black: #0f172a;

  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;

  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;

  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;

  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;

  --color-sky-50: #f0f9ff;
  --color-sky-200: #bae6fd;
  --color-sky-500: #0ea5e9;
  --color-sky-700: #0369a1;

  /* Semantic */
  --color-canvas: var(--color-slate-50);
  --color-surface: var(--color-white);
  --color-ink: var(--color-slate-900);
  --color-ink-subtle: var(--color-slate-600);
  --color-ink-muted: var(--color-slate-500);
  --color-border: var(--color-slate-200);
  --color-border-strong: var(--color-slate-300);
  --color-link: var(--color-emerald-700);
  --color-accent: var(--color-emerald-500);
  --color-accent-strong: var(--color-emerald-600);
  --color-accent-soft: var(--color-emerald-100);
  --color-success: var(--color-emerald-600);
  --color-success-soft: var(--color-emerald-100);
  --color-warning: var(--color-amber-500);
  --color-warning-soft: var(--color-amber-100);
  --color-danger: var(--color-rose-600);
  --color-danger-soft: var(--color-rose-100);
  --color-info: var(--color-sky-700);
  --color-info-soft: var(--color-sky-50);

  /* Focus */
  --focus-ring-color: var(--color-accent);
  --focus-ring-size: 2px;
  --focus-ring-offset: 2px;

  /* Motion */
  --transition-fast: 120ms ease;
}

@media (max-width: 640px) {
  :root {
    --text-base: 1.05rem;
    --text-lg: 1.2rem;
    --text-xl: 1.35rem;
    --text-2xl: 1.6rem;
  }
}

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

  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-inline-size: 100%;
  }

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

  html:focus-within {
    scroll-behavior: smooth;
  }

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

    html:focus-within {
      scroll-behavior: auto;
    }
  }
}

@layer base {
  html {
    font-size: 100%;
  }

  body {
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    line-height: 1.5;
    min-height: 100dvh;
    text-rendering: optimizeLegibility;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a:not([class]) {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }

  :is(a, button, input, textarea, select) {
    transition: var(--transition-fast);
    transition-property: background-color, border-color, box-shadow, color, filter, outline, transform;
    touch-action: manipulation;

    &:where(:focus-visible) {
      border-radius: 0.4rem;
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }

    &:where([disabled]) {
      cursor: not-allowed;
      opacity: 0.6;
      pointer-events: none;
    }
  }

  button,
  [type="button"],
  [type="submit"],
  [type="reset"],
  [role="button"] {
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
  }

  button:disabled,
  [type="button"]:disabled,
  [type="submit"]:disabled,
  [type="reset"]:disabled {
    cursor: not-allowed;
    filter: grayscale(0.15) brightness(0.96);
  }

  button:not(:disabled):hover,
  [type="button"]:not(:disabled):hover,
  [type="submit"]:not(:disabled):hover,
  [type="reset"]:not(:disabled):hover,
  [role="button"]:hover {
    filter: brightness(0.97);
  }

  button:not(:disabled):active,
  [type="button"]:not(:disabled):active,
  [type="submit"]:not(:disabled):active,
  [type="reset"]:not(:disabled):active,
  [role="button"]:active {
    filter: brightness(0.94);
    transform: translateY(1px);
  }

  ::selection {
    background: var(--color-accent-soft);
  }

  turbo-frame {
    display: contents;
  }

  [hidden] {
    display: none !important;
  }
}

@layer modules {
  .page {
    background: var(--color-canvas);
    color: var(--color-ink);
    min-height: 100dvh;
  }

  .page--dark {
    background: var(--color-slate-950);
    color: var(--color-white);
  }

  .page--surface {
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .container {
    margin-inline: auto;
    max-inline-size: var(--container-max);
    padding-inline: var(--container-padding);
  }

  .container.container--wide {
    --container-max: 87rem;
    max-inline-size: 87rem;
  }

  .page-main {
    padding-block: clamp(1.5rem, 3vw, 3rem);
  }

  .page-main--mobile-nav {
    padding-bottom: clamp(4.5rem, 8vw, 6rem);
  }

  .section {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
  }

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

  .section__eyebrow {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    letter-spacing: 0.25em;
    text-transform: uppercase;
  }

  .page-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
  }

  .page-card__body {
    padding: var(--block-space-double);
  }

  .page-card__body--compact {
    padding: var(--block-space);
  }

  .segmented-control {
    background: var(--color-slate-100);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-pill);
    display: inline-flex;
    padding: 0.2rem;
    gap: 0.2rem;
  }

  .segmented-control .btn {
    border-radius: var(--radius-pill);
    padding-inline: 0.85rem;
    padding-block: 0.35rem;
  }

  .segmented-control .btn--outline {
    border-color: transparent;
  }

  .segmented-control label.btn {
    cursor: pointer;
  }

  .segmented-control label.btn:has(input:checked) {
    background: var(--color-slate-700);
    color: var(--color-white);
    border-color: var(--color-slate-700);
  }

  .segmented-control label.btn--outline:has(input:checked) {
    background: var(--color-slate-700);
    color: var(--color-white);
  }
}

@layer utilities {
  /* Text */
  .txt-2xs { font-size: var(--text-2xs); }
  .txt-xs { font-size: var(--text-xs); }
  .txt-sm { font-size: var(--text-sm); }
  .txt-base { font-size: var(--text-base); }
  .txt-lg { font-size: var(--text-lg); }
  .txt-xl { font-size: var(--text-xl); }
  .txt-2xl { font-size: var(--text-2xl); }
  .txt-3xl { font-size: var(--text-3xl); }

  .txt-ink { color: var(--color-ink); }
  .txt-subtle { color: var(--color-ink-subtle); }
  .txt-muted { color: var(--color-ink-muted); }
  .txt-link { color: var(--color-link); text-decoration: underline; text-decoration-skip-ink: auto; }
  .txt-white { color: var(--color-white); }
  .txt-positive { color: var(--color-emerald-700); }
  .txt-warning { color: var(--color-amber-700); }
  .txt-danger { color: var(--color-rose-700); }

  .txt-center { text-align: center; }
  .txt-left { text-align: left; }
  .txt-right { text-align: right; }
  .txt-uppercase { text-transform: uppercase; }
  .txt-nowrap { white-space: nowrap; }
  .font-medium { font-weight: 500; }
  .font-semibold { font-weight: 600; }
  .font-bold { font-weight: 700; }
  .font-black { font-weight: 800; }
  .font-mono { font-family: var(--font-mono); }
  .txt-break { word-break: break-all; }
  .txt-preline { white-space: pre-line; }

  /* Layout */
  .flex { display: flex; }
  .flex-inline { display: inline-flex; }
  .flex-column { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-nowrap { flex-wrap: nowrap; }
  .items-center { align-items: center; }
  .items-start { align-items: flex-start; }
  .items-end { align-items: flex-end; }
  .self-start { align-self: flex-start; }
  .flex-shrink-0 { flex-shrink: 0; }
  .justify-between { justify-content: space-between; }
  .justify-center { justify-content: center; }
  .justify-end { justify-content: flex-end; }

  .grid { display: grid; }
  .grid-2 { display: grid; gap: var(--block-space); }
  .grid-3 { display: grid; gap: var(--block-space); }
  .block { display: block; }
  .hidden { display: none; }

  .gap { gap: var(--block-space); }
  .gap-xs { gap: var(--block-space-quarter); }
  .gap-sm { gap: var(--block-space-half); }
  .gap-lg { gap: var(--block-space-double); }

  .stack-xs { display: flex; flex-direction: column; gap: var(--block-space-quarter); }
  .stack-sm { display: flex; flex-direction: column; gap: var(--block-space-half); }
  .stack { display: flex; flex-direction: column; gap: var(--block-space); }
  .stack-lg { display: flex; flex-direction: column; gap: var(--block-space-double); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--block-space); align-items: center; }

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

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

  @media (max-width: 767px) {
    .grid-2--always {
      gap: var(--block-space-half);
    }

    .grid-2--always > .card--padded {
      padding: var(--block-space);
    }

    .grid-2--always .eyebrow {
      font-size: 0.6rem;
    }

    .grid-2--always .txt-lg {
      font-size: var(--text-sm);
    }

    .grid-2--always .txt-sm {
      font-size: var(--text-xs);
    }

    .page-card__body .txt-lg {
      font-size: var(--text-base);
    }

    .page-card__body .lede {
      font-size: var(--text-xs);
    }

    .page-card__body--compact {
      padding: var(--block-space);
    }
  }

  @media (min-width: 960px) {
    .grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .span-2 {
      grid-column: span 2;
    }
  }

  /* Spacing */
  .pad { padding: var(--block-space) var(--inline-space); }
  .pad-sm { padding: var(--block-space-half) var(--inline-space-half); }
  .pad-lg { padding: var(--block-space-double) var(--inline-space-double); }
  .pad-block { padding-block: var(--block-space); }
  .pad-inline { padding-inline: var(--inline-space); }
  .pad-inline-lg { padding-inline: var(--inline-space-double); }
  .px-xs { padding-inline: var(--inline-space-quarter); }
  .pb-lg { padding-block-end: var(--block-space-double); }
  .pb-xl { padding-block-end: 6rem; }
  .margin-none { margin: 0; }
  .center { margin-inline: auto; }

  /* Sizing */
  .w-full { inline-size: 100%; }
  .h-full { block-size: 100%; }
  .min-w-0 { min-inline-size: 0; }

  /* Borders */
  .border { border: 1px solid var(--color-border); }
  .border-strong { border: 1px solid var(--color-border-strong); }
  .rounded { border-radius: var(--radius-sm); }
  .rounded-sm { border-radius: var(--radius-sm); }
  .rounded-md { border-radius: var(--radius-md); }
  .rounded-lg { border-radius: var(--radius-lg); }
  .rounded-xl { border-radius: var(--radius-xl); }
  .rounded-pill { border-radius: var(--radius-pill); }

  /* Background */
  .bg-canvas { background: var(--color-canvas); }
  .bg-surface { background: var(--color-surface); }
  .bg-ink { background: var(--color-ink); }
  .bg-accent-soft { background: var(--color-accent-soft); }
  .bg-slate-100 { background: var(--color-slate-100); }

  /* Shadows */
  .shadow-sm { box-shadow: var(--shadow-sm); }
  .shadow-md { box-shadow: var(--shadow-md); }
  .shadow-lg { box-shadow: var(--shadow-lg); }

  /* Overflow */
  .overflow-hidden { overflow: hidden; }
  .overflow-x-auto { overflow-x: auto; }
  .overflow-y-auto { overflow-y: auto; }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .list {
    padding-inline-start: 1.25em;
  }

  .list--disc { list-style: disc; }
  .list--decimal { list-style: decimal; }
  .list--inside { list-style-position: inside; }
  .list--stack {
    display: grid;
    gap: var(--block-space-quarter);
  }
}

@layer components {
  .eyebrow {
    color: var(--color-ink-muted);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }

  .eyebrow--accent {
    color: var(--color-emerald-700);
  }

  .eyebrow--light {
    color: var(--color-slate-400);
  }

  .title {
    color: var(--color-ink);
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1.15;
  }

  .title--xl {
    font-size: clamp(2rem, 3.5vw, 2.6rem);
  }

  .subtitle {
    color: var(--color-ink-subtle);
    font-size: var(--text-sm);
    line-height: 1.6;
  }

  .lede {
    color: var(--color-ink-subtle);
    font-size: var(--text-sm);
    line-height: 1.6;
  }

  .caption {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }
}

@layer components {
  .icon {
    -webkit-touch-callout: none;
    background-color: currentColor;
    block-size: var(--icon-size, 1em);
    display: inline-block;
    flex-shrink: 0;
    inline-size: var(--icon-size, 1em);
    mask-image: var(--svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: var(--icon-size, 1em);
    pointer-events: none;
    user-select: none;
  }

  .icon--lg { --icon-size: 1.25rem; }
  .icon--xl { --icon-size: 1.5rem; }

  .icon--leads { --svg: url("/assets/leads-33a2f0b1.svg"); }
  .icon--link { --svg: url("/assets/link-16e74813.svg"); }
  .icon--mail { --svg: url("/assets/mail-a6e51125.svg"); }
  .icon--settings { --svg: url("/assets/settings-fd8f96b4.svg"); }
  .icon--wallet { --svg: url("/assets/wallet-3021a918.svg"); }
}

@layer components {
  .btn {
    --btn-bg: var(--color-surface);
    --btn-border: var(--color-border);
    --btn-color: var(--color-ink);
    --btn-shadow: var(--shadow-sm);
    --btn-radius: var(--radius-md);
    --btn-padding: 0.55em 1.1em;

    align-items: center;
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-shadow);
    color: var(--btn-color);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--text-sm);
    font-weight: 600;
    gap: 0.5em;
    justify-content: center;
    padding: var(--btn-padding);
    transition: var(--transition-fast);
    transition-property: background-color, border-color, box-shadow, color, filter, transform;
  }

  .btn:disabled,
  .btn[aria-disabled="true"] {
    --btn-bg: var(--color-slate-100);
    --btn-border: var(--color-slate-200);
    --btn-color: var(--color-slate-500);
    --btn-shadow: none;

    cursor: not-allowed;
    filter: grayscale(0.25) brightness(0.98);
    opacity: 0.7;
    pointer-events: none;
  }

  .btn--outline:disabled,
  .btn--outline[aria-disabled="true"] {
    --btn-bg: transparent;
    --btn-shadow: none;
  }

  .btn--primary {
    --btn-bg: var(--color-emerald-500);
    --btn-border: var(--color-emerald-500);
    --btn-color: var(--color-slate-900);
    --btn-shadow: 0 8px 20px -12px rgb(16 185 129 / 70%);
  }

  .btn--secondary {
    --btn-bg: var(--color-slate-900);
    --btn-border: var(--color-slate-900);
    --btn-color: var(--color-white);
  }

  .btn--outline {
    --btn-bg: transparent;
    --btn-border: var(--color-border);
    --btn-color: var(--color-ink);
    --btn-shadow: none;
  }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-color: var(--color-ink);
    --btn-shadow: none;
  }

  .btn--danger {
    --btn-bg: var(--color-rose-600);
    --btn-border: var(--color-rose-600);
    --btn-color: var(--color-white);
  }

  .btn--warning {
    --btn-bg: var(--color-amber-50);
    --btn-border: var(--color-amber-200);
    --btn-color: var(--color-amber-700);
    --btn-shadow: none;
  }

  .btn--info {
    --btn-bg: var(--color-sky-50);
    --btn-border: var(--color-sky-200);
    --btn-color: var(--color-sky-700);
    --btn-shadow: none;
  }

  .btn--light {
    --btn-bg: rgba(255, 255, 255, 0.92);
    --btn-border: rgba(255, 255, 255, 0.7);
    --btn-color: var(--color-emerald-700);
    --btn-shadow: var(--shadow-sm);
  }

  .btn--inverse {
    --btn-bg: transparent;
    --btn-border: rgba(255, 255, 255, 0.3);
    --btn-color: var(--color-white);
    --btn-shadow: none;
  }

  .btn--small {
    --btn-padding: 0.45em 0.85em;
    font-size: var(--text-xs);
  }

  .btn--large {
    --btn-padding: 0.7em 1.2em;
    font-size: var(--text-base);
  }

  .btn--icon {
    --btn-padding: 0;

    aspect-ratio: 1;
    block-size: 2.5rem;
    inline-size: 2.5rem;
    padding: 0;
  }
}

@layer components {
  .input {
    appearance: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    font-size: var(--text-sm);
    inline-size: 100%;
    line-height: 1.5;
    padding: 0.55em 0.75em;

    &:where(:focus) {
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px var(--color-accent-soft);
      outline: none;
    }
  }

  .input--soft {
    background: var(--color-slate-50);
  }

  .input--muted {
    background: var(--color-slate-100);
    color: var(--color-ink-subtle);
  }

  .input--mono {
    font-family: var(--font-mono);
  }

  .input--select {
    --caret-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%230f172a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-image: var(--caret-icon);
    background-position: right 0.8em center;
    background-repeat: no-repeat;
    background-size: 0.7em;
    padding-right: 2.2em;
  }

  .input--textarea {
    min-block-size: 6rem;
    resize: vertical;
  }

  .input--code {
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-align: center;
  }

  .checkbox {
    accent-color: var(--color-emerald-600);
    border-radius: 0.3rem;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
  }
}

@layer components {
  .form {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .form--tight {
    gap: var(--block-space-half);
  }

  .form__group {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-quarter);
  }

  .form__label {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .form__hint {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
  }

  .form__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space);
  }

  .form-grid {
    display: grid;
    gap: var(--block-space-double);
  }

  @media (min-width: 768px) {
    .form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

  .check-field {
    align-items: center;
    color: var(--color-ink-subtle);
    display: flex;
    font-size: var(--text-sm);
    gap: var(--block-space);
  }
}

@layer components {
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
  }

  .card--padded {
    padding: var(--block-space-double);
  }

  .card--compact {
    padding: var(--block-space);
  }

  .card--subtle {
    background: var(--color-slate-100);
  }

  .card--danger {
    border-color: var(--color-rose-200);
  }

  .progress-bar {
    background: var(--color-slate-200);
    border-radius: var(--radius-full);
    height: 0.5rem;
    overflow: hidden;
    width: 100%;
  }

  .progress-bar__fill {
    background: var(--color-info);
    border-radius: var(--radius-full);
    display: block;
    height: 100%;
    transition: width 0.3s ease;
  }

  .progress-bar__fill--positive {
    background: var(--color-emerald-500);
  }

  .callout {
    background: var(--color-slate-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-ink-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: 1rem;
  }

  .callout--positive {
    background: var(--color-emerald-50);
    border-color: var(--color-emerald-100);
    color: var(--color-emerald-900);
  }

  .avatar {
    align-items: center;
    background: var(--color-slate-100);
    border-radius: var(--radius-lg);
    color: var(--color-ink-muted);
    display: inline-flex;
    font-size: var(--text-sm);
    font-weight: 600;
    inline-size: 2.5rem;
    justify-content: center;
    min-block-size: 2.5rem;
  }

  .avatar--lg {
    font-size: var(--text-base);
    inline-size: 3rem;
    min-block-size: 3rem;
  }
}

@layer components {
  .segmented {
    background: var(--color-slate-100);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--block-space-quarter);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--block-space-quarter);
  }

  .segmented__item {
    align-items: center;
    border-radius: var(--radius-md);
    color: var(--color-ink-subtle);
    display: inline-flex;
    font-size: var(--text-sm);
    font-weight: 600;
    justify-content: center;
    padding: 0.45rem 0.6rem;
    text-align: center;
  }

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

  .segmented__item.is-active {
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: var(--color-ink);
  }

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

@layer components {
  .table {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    min-inline-size: 0;
  }

  .table > .overflow-x-auto {
    min-inline-size: 0;
  }

  .table-scroll {
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .table-scroll > .table {
    inline-size: 100%;
    min-inline-size: max-content;
  }

  .table__head {
    background: var(--color-slate-50);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .table__row {
    align-items: center;
    color: var(--color-ink);
    display: grid;
    font-size: var(--text-sm);
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }

  .table__row + .table__row {
    border-top: 1px solid var(--color-border);
  }

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

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

  .table__row--warning {
    background: var(--color-amber-50);
  }

  .leads-grid-3 {
    grid-template-columns: minmax(185px, 1.4fr) repeat(2, minmax(140px, 1fr));
  }

  .leads-grid-4 {
    grid-template-columns: minmax(185px, 1.4fr) repeat(3, minmax(140px, 1fr));
  }

  .leads-grid-5 {
    grid-template-columns: minmax(185px, 1.4fr) repeat(4, minmax(120px, 1fr));
  }

  .leads-grid-6 {
    grid-template-columns: minmax(185px, 1.4fr) repeat(5, minmax(120px, 1fr));
  }

  .wallet-grid-4 {
    grid-template-columns: minmax(130px, 1.1fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr);
  }

  .wallet-grid-5 {
    grid-template-columns: minmax(120px, 0.9fr) minmax(200px, 1.6fr) minmax(120px, 1fr) minmax(140px, 1fr) minmax(110px, 0.8fr);
  }

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

  .affiliate-leads-grid {
    grid-template-columns: minmax(170px, 1.2fr) minmax(140px, 1fr) minmax(130px, 1fr) minmax(150px, 1fr);
  }

  .affiliates-grid-4 {
    grid-template-columns: minmax(220px, 1.6fr) minmax(160px, 1fr) minmax(140px, 1fr) minmax(120px, 0.8fr);
  }

  .admin-grid-6 {
    grid-template-columns: minmax(90px, 0.6fr) minmax(140px, 1.2fr) minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, 1fr);
  }

  .admin-grid-5 {
    grid-template-columns: minmax(90px, 0.6fr) minmax(140px, 1.2fr) minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(120px, 1fr);
  }

  @media (max-width: 640px) {
    .leads-grid-3,
    .leads-grid-4,
    .leads-grid-5,
    .leads-grid-6,
    .wallet-grid-4,
    .wallet-grid-5,
    .affiliate-leads-grid,
    .affiliates-grid-4,
    .history-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

@layer components {
  .badge {
    align-items: center;
    border-radius: var(--radius-pill);
    display: inline-flex;
    font-size: var(--text-xs);
    font-weight: 600;
    gap: 0.4em;
    inline-size: fit-content;
    padding: 0.25em 0.75em;
    white-space: nowrap;
  }

  .badge--neutral {
    background: var(--color-slate-100);
    color: var(--color-slate-700);
  }

  .badge--positive {
    background: var(--color-emerald-50);
    color: var(--color-emerald-700);
  }

  .badge--warning {
    background: var(--color-amber-50);
    color: var(--color-amber-700);
  }

  .badge--info {
    background: var(--color-sky-50);
    color: var(--color-sky-700);
  }

  .badge--danger {
    background: var(--color-rose-50);
    color: var(--color-rose-700);
  }

  .badge--outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-ink-subtle);
  }

  .badge--light {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--color-white);
  }

  .badge__dot {
    background: currentColor;
    block-size: 0.5rem;
    border-radius: 999px;
    inline-size: 0.5rem;
    opacity: 0.75;
  }

  .chip {
    align-items: center;
    background: var(--color-slate-100);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--color-slate-700);
    display: inline-flex;
    font-size: var(--text-xs);
    font-weight: 600;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    text-decoration: none;
    white-space: nowrap;
  }

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

  .chip--active {
    background: var(--color-slate-900);
    color: var(--color-white);
  }

  .chip--outline {
    background: var(--color-slate-50);
    border-color: var(--color-border);
    color: var(--color-ink);
  }

  .chip__remove {
    color: var(--color-ink-muted);
    font-weight: 700;
  }

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

@layer components {
  .flash {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-inline-size: 15rem;
    padding: 0.85rem 1rem;
  }

  .flash__message {
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .flash__message--notice {
    color: var(--color-emerald-700);
  }

  .flash__message--alert {
    color: var(--color-rose-700);
  }

  .alert {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0.6rem 0.8rem;
  }

  .alert--danger {
    background: var(--color-rose-50);
    border-color: var(--color-rose-100);
    color: var(--color-rose-700);
  }

  .alert--success {
    background: var(--color-emerald-50);
    border-color: var(--color-emerald-100);
    color: var(--color-emerald-700);
  }
}

@layer components {
  .modal {
    align-items: center;
    background: rgb(15 23 42 / 0.6);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 2rem 1rem;
    position: fixed;
    z-index: 50;
  }

  .modal--dark {
    background: rgb(2 6 23 / 0.95);
    color: var(--color-white);
  }

  .modal__panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    inline-size: min(100%, 40rem);
    padding: 1.5rem;
  }

  .modal__panel--compact {
    padding: 1.25rem;
  }
}

@layer modules {
  .topbar {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 40;
  }

  .topbar__inner {
    align-items: center;
    display: flex;
    gap: var(--block-space);
    padding-block: 0.75rem;
  }

  .topbar__brand {
    align-items: center;
    color: var(--color-ink);
    display: inline-flex;
    font-size: var(--text-lg);
    font-weight: 600;
    gap: 0.5rem;
    letter-spacing: -0.01em;
  }

  .topbar__brand-mark {
    align-items: center;
    border-radius: var(--radius-lg);
    display: inline-flex;
    justify-content: center;
    min-block-size: 2.25rem;
    min-inline-size: 2.25rem;
  }

  .topbar__logo {
    block-size: 1.5rem;
    color: rgb(34, 65, 72);
    inline-size: 1.5rem;
  }

  .topbar__nav {
    align-items: center;
    color: var(--color-ink-muted);
    display: flex;
    font-size: var(--text-sm);
    font-weight: 600;
    gap: 0.35rem;
  }

  .topbar__nav--push {
    margin-left: auto;
  }

  .topbar__link {
    border-radius: var(--radius-md);
    color: inherit;
    padding: 0.45rem 0.75rem;
  }

  .topbar__link:hover {
    background: var(--color-slate-100);
    color: var(--color-ink);
  }

  .topbar__link.is-active {
    background: var(--color-slate-900);
    color: var(--color-white);
  }

  .topbar__actions {
    align-items: center;
    display: flex;
    gap: var(--block-space-half);
  }

  .topbar__actions--push {
    margin-left: auto;
  }

  @media (min-width: 768px) {
    .topbar__actions--push {
      margin-left: auto;
    }
  }

  .nav-desktop {
    display: none;
  }

  .nav-mobile {
    display: flex;
  }

  @media (min-width: 768px) {
    .nav-desktop {
      display: flex;
    }

    .nav-mobile {
      display: none;
    }
  }

  .site-footer {
    background: var(--color-slate-50);
    border-top: 1px solid var(--color-border);
    margin-top: clamp(3rem, 8vw, 5rem);
  }

  .site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
    padding-block: 2.5rem;
  }

  .site-footer__grid {
    display: grid;
    gap: var(--block-space-double);
  }

  .site-footer__links {
    display: grid;
    gap: var(--block-space-double);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__legal {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
  }

  @media (min-width: 640px) {
    .site-footer__grid {
      align-items: start;
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .site-footer__legal {
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
    }
  }

  .mobile-nav {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid var(--color-border);
    bottom: 0;
    inset-inline: 0;
    position: fixed;
    z-index: 30;
  }

  .mobile-nav__grid {
    color: var(--color-ink-muted);
    display: grid;
    font-size: var(--text-2xs);
    font-weight: 600;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mobile-nav__link {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    justify-content: center;
    padding-block: 0.65rem;
  }

  .mobile-nav__link.is-active {
    color: var(--color-emerald-600);
  }

  .toast-stack {
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    pointer-events: none;
    position: fixed;
    right: 1rem;
    z-index: 50;
  }
}

@layer modules {
  .auth-shell {
    background: var(--color-surface);
    display: flex;
    justify-content: center;
    padding: clamp(3rem, 8vh, 5rem) var(--container-padding);
  }

  .auth-shell__inner {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
    inline-size: min(36rem, 100%);
  }

  .auth-shell__inner--wide {
    inline-size: min(48rem, 100%);
  }

  .auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
  }

  .auth-card--soft {
    background: var(--color-slate-50);
  }

  .auth-steps {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
  }

  .auth-actions {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  @media (min-width: 640px) {
    .auth-actions {
      flex-direction: row;
    }
  }

  .role-grid {
    display: grid;
    gap: var(--block-space);
  }

  @media (min-width: 640px) {
    .role-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

@layer modules {
  .business-shell {
    min-height: 100dvh;
  }

  .business-shell__inner {
    padding-block: clamp(1.5rem, 3vw, 3rem);
  }

  .business-shell__mobile-bar {
    align-items: center;
    display: flex;
    gap: var(--block-space);
    justify-content: space-between;
  }

  .business-shell__brand {
    align-items: center;
    display: flex;
    gap: var(--block-space);
  }

  .business-shell__brand-mark {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    color: var(--color-emerald-600);
    display: inline-flex;
    justify-content: center;
    min-block-size: 2.5rem;
    min-inline-size: 2.5rem;
  }

  .sidebar__logo {
    block-size: 1.5rem;
    color: var(--color-white);
    inline-size: 1.5rem;
    object-fit: contain;
  }

  .business-shell__grid {
    align-items: start;
    display: grid;
    gap: var(--block-space-double);
    margin-top: var(--block-space-double);
  }

  .business-shell__content {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
  }

  .sidebar {
    background: var(--color-slate-900);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--radius-2xl);
    color: var(--color-slate-100);
    display: none;
    flex-direction: column;
    align-self: start;
    height: fit-content;
    overflow: hidden;
    position: sticky;
    top: 1.5rem;
  }

  .sidebar__inner {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
    padding: 1.5rem;
  }

  .sidebar__brand {
    align-items: center;
    display: flex;
    gap: var(--block-space);
  }

  .sidebar__title {
    color: var(--color-white);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.2;
  }

  .sidebar__label {
    color: var(--color-slate-400);
    font-size: var(--text-2xs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
  }

  .sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .sidebar__link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    color: var(--color-slate-200);
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    transition: var(--transition-fast);
  }

  .sidebar__link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-white);
  }

  .sidebar__link.is-active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-sm);
    color: var(--color-white);
  }

  .sidebar__status {
    color: var(--color-emerald-200);
    font-size: var(--text-2xs);
    letter-spacing: 0.12em;
    margin-left: auto;
    text-transform: uppercase;
  }

  .sidebar__meta {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    color: var(--color-slate-100);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: 1rem;
    font-size: var(--text-sm);
  }

  .sidebar__meta-label {
    color: var(--color-slate-400);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .drawer {
    background: rgba(2, 6, 23, 0.95);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    inset: 0;
    position: fixed;
    z-index: 50;
  }

  .drawer__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 1.25rem;
  }

  .drawer__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--block-space-double);
    overflow-y: auto;
    padding: 0 1.25rem 2rem;
  }

  .drawer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .drawer__link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    color: var(--color-slate-200);
    display: flex;
    padding: 0.9rem 1.1rem;
  }

  .drawer__link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
  }

  .drawer__link.is-active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-sm);
    color: var(--color-white);
  }

  .card.dashboard-wallet {
    background-color: var(--color-slate-950, #020617);
    background-image: linear-gradient(145deg, var(--color-slate-950, #020617) 0%, var(--color-slate-900, #0f172a) 55%, var(--color-emerald-900, #064e3b) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--color-white);
    isolation: isolate;
    overflow: hidden;
    position: relative;
  }

  .dashboard-wallet__glow {
    display: none;
  }

  .dashboard-wallet__content {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    position: relative;
    z-index: 1;
  }

  .dashboard-wallet__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space);
    justify-content: space-between;
  }

  .dashboard-wallet__amount {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .dashboard-wallet__note {
    color: rgba(236, 253, 245, 0.9);
    font-size: var(--text-sm);
  }

  .dashboard-alert {
    background: var(--color-amber-50);
    border: 1px solid var(--color-amber-200);
  }

  .dashboard-alert__icon {
    align-items: center;
    background: var(--color-amber-100);
    border-radius: 999px;
    color: var(--color-amber-700);
    display: inline-flex;
    font-size: var(--text-lg);
    inline-size: 2.5rem;
    justify-content: center;
    min-block-size: 2.5rem;
  }

  .dashboard-alert__count {
    color: var(--color-ink);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
  }

  .velocity-chart {
    background: linear-gradient(180deg, var(--color-slate-50), var(--color-white));
    border-radius: var(--radius-lg);
    min-block-size: 12rem;
    overflow: visible;
    padding: var(--block-space);
    padding-block-end: calc(var(--block-space) + 0.75rem);
  }

  .velocity-chart .vega-embed {
    width: 100%;
  }

  .velocity-chart .vega-embed canvas,
  .velocity-chart .vega-embed svg {
    display: block;
  }

  @media (min-width: 1024px) {
    .business-shell__mobile-bar {
      display: none;
    }

    .business-shell__grid {
      grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
      margin-top: 0;
    }

    .sidebar {
      display: flex;
    }
  }

  @media (max-width: 1023px) {
    .business-shell__brand-mark {
      border-color: var(--color-slate-900);
    }

    .sidebar__logo {
      color: var(--color-white);
    }
  }
}

@layer modules {
  .affiliate-hero {
    background: linear-gradient(135deg, var(--color-emerald-500), var(--color-emerald-400) 45%, var(--color-sky-700) 100%);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-lg);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding: clamp(1.25rem, 3vw, 1.75rem);
  }

  .affiliate-hero__top {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: var(--block-space);
  }

  .affiliate-hero__label {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }

  .affiliate-hero__amount {
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .affiliate-hero__meta {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-xs);
  }

  .affiliate-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .affiliate-hero__note {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-xs);
    text-align: center;
  }

  @media (min-width: 640px) {
    .affiliate-hero__actions {
      flex-direction: row;
    }
  }

  .affiliate-dashboard-grid {
    display: grid;
    gap: var(--block-space-double);
    grid-template-columns: minmax(0, 1fr);
  }

  @media (min-width: 960px) {
    .affiliate-dashboard-grid {
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }
  }
}

@layer modules {
  .marketing-section {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
  }

  .marketing-section--border {
    border-top: 1px solid var(--color-border);
  }

  .marketing-container {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
    margin-inline: auto;
    max-inline-size: 72rem;
    padding-inline: var(--container-padding);
  }

  .marketing-container--narrow {
    max-inline-size: 52rem;
  }

  .marketing-header {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .section-title {
    color: var(--color-ink);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 600;
    line-height: 1.2;
  }

  .section-lede {
    color: var(--color-ink-subtle);
    font-size: var(--text-sm);
    line-height: 1.6;
  }

  .hero {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
  }

  @media (min-width: 960px) {
    .hero {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
  }

  .hero__title {
    color: var(--color-ink);
    font-size: clamp(2.5rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  .hero__highlight {
    background: linear-gradient(120deg, var(--color-emerald-500), var(--color-sky-700));
    -webkit-background-clip: text;
    color: transparent;
  }

  .hero__lede {
    color: var(--color-ink-subtle);
    font-size: var(--text-lg);
    line-height: 1.6;
  }

  .hero__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space);
  }

  .hero__stats {
    display: grid;
    gap: var(--block-space);
  }

  @media (min-width: 640px) {
    .hero__stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
  }

  .stat-card__label {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .stat-card__title {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .stat-card__text {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }

  .hero__panel {
    position: relative;
  }

  .hero__glow {
    background: radial-gradient(circle at top, var(--color-emerald-100), var(--color-sky-50) 55%, transparent 80%);
    border-radius: var(--radius-3xl);
    filter: blur(28px);
    inset: -1.5rem;
    position: absolute;
  }

  .hero__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
  }

  .hero__card-header {
    border-bottom: 1px solid var(--color-border);
    padding: 1.5rem;
  }

  .hero__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding: 1.5rem;
  }

  .hero__card-title {
    color: var(--color-ink);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-top: 0.5rem;
  }

  .step-item {
    display: flex;
    gap: var(--block-space);
  }

  .step-badge {
    border-radius: var(--radius-lg);
    display: inline-block;
    font-feature-settings: "lnum", "tnum";
    font-variant-numeric: lining-nums tabular-nums;
    font-size: var(--text-sm);
    font-weight: 600;
    flex: 0 0 2.5rem;
    inline-size: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    block-size: 2.5rem;
  }

  .step-badge--emerald {
    background: var(--color-emerald-50);
    border: 1px solid var(--color-emerald-100);
    color: var(--color-emerald-700);
  }

  .step-badge--sky {
    background: var(--color-sky-50);
    border: 1px solid var(--color-sky-200);
    color: var(--color-sky-700);
  }

  .step-badge--slate {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    color: var(--color-slate-700);
  }

  .referral-shell {
    align-items: center;
    background: var(--color-canvas);
    display: flex;
    justify-content: center;
    min-height: 100dvh;
    padding: clamp(2rem, 6vw, 4rem) var(--container-padding);
  }

  .referral-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
    inline-size: min(100%, 34rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
  }

  .step-title {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .step-body {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .feature-grid {
    display: grid;
    gap: var(--block-space);
  }

  @media (min-width: 768px) {
    .feature-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .feature-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: 1.25rem;
  }

  .feature-card__label {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .feature-card__title {
    color: var(--color-ink);
    font-size: var(--text-lg);
    font-weight: 600;
  }

  .feature-card__text {
    color: var(--color-ink-subtle);
    font-size: var(--text-sm);
    line-height: 1.6;
  }
}

@layer modules {
  .legal-section {
    padding-block: clamp(2.5rem, 6vw, 4rem);
  }

  .legal-container {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
    margin-inline: auto;
    max-inline-size: 52rem;
    padding-inline: var(--container-padding);
  }

  .legal-header {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .legal-title {
    color: var(--color-ink);
    font-size: var(--text-3xl);
    font-weight: 600;
    line-height: 1.2;
  }

  .legal-meta {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .legal-body {
    color: var(--color-ink-subtle);
    display: flex;
    flex-direction: column;
    font-size: var(--text-sm);
    gap: var(--block-space-double);
    line-height: 1.6;
  }

  .legal-block {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .legal-heading {
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .profile-avatar {
    border-radius: 50%;
    object-fit: cover;
  }

  .profile-avatar--md {
    block-size: 5rem;
    inline-size: 5rem;
  }

  .profile-avatar--lg {
    block-size: 6.25rem;
    inline-size: 6.25rem;
  }

  .profile-avatar--initials {
    align-items: center;
    background: var(--color-accent);
    color: var(--color-white);
    display: flex;
    font-size: 2rem;
    font-weight: 600;
    justify-content: center;
  }

  .profile-avatar--md.profile-avatar--initials {
    font-size: 1.5rem;
  }

  .services-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .services-list__item {
    align-items: center;
    display: flex;
    font-size: var(--text-sm);
    gap: 0.5rem;
  }

  .services-list__icon {
    color: var(--color-success);
    font-weight: bold;
  }

  .profile-preview {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0 auto;
    max-inline-size: 25rem;
    padding: 1.5rem;
  }

  .btn--lg {
    font-size: var(--text-lg);
    padding: 1rem 1.5rem;
  }

  .input--file {
    font-size: var(--text-sm);
  }

  .gap-md {
    gap: var(--block-space);
  }

  .flex-1 {
    flex: 1;
  }

  .mt-2 {
    margin-block-start: 0.5rem;
  }

  .mb-2 {
    margin-block-end: 0.5rem;
  }
}

/* Toggle Buttons */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-slate-300);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-slate-600);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.15s;
}

.toggle-btn:hover {
  border-color: var(--color-slate-400);
  background: var(--color-slate-50);
}

.toggle-btn:has(input:checked) {
  border-color: var(--color-slate-700);
  background: var(--color-slate-700);
  color: var(--color-white);
}

.toggle-btn:has(input:checked):hover {
  border-color: var(--color-slate-800);
  background: var(--color-slate-800);
}

.toggle-btn--positive:has(input:checked) {
  border-color: var(--color-emerald-600);
  background: var(--color-emerald-600);
}

.toggle-btn--positive:has(input:checked):hover {
  border-color: var(--color-emerald-700);
  background: var(--color-emerald-700);
}

/* Input Group */
.input-group {
  display: flex;
  align-items: center;
}

.input-group__prefix {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  height: 2.5rem;
  background: var(--color-slate-100);
  border: 1px solid var(--color-slate-300);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--color-slate-500);
  font-size: var(--text-sm);
}

.input-group__input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Action Menu */
.action-menu {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.action-menu[open] {
  z-index: 9999;
}

.action-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-slate-500);
  cursor: pointer;
  list-style: none;
  transition: all 0.15s;
}

.action-menu__trigger:hover {
  background: var(--color-slate-50);
  border-color: var(--color-slate-300);
  color: var(--color-slate-700);
}

.action-menu__trigger::-webkit-details-marker {
  display: none;
}

.action-menu__content {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 9999;
  min-width: 180px;
  margin-top: 0.25rem;
  padding: 0.25rem;
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.action-menu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--color-slate-700);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.action-menu__item:hover {
  background: var(--color-slate-100);
  color: var(--color-slate-900);
}

.action-menu__item svg {
  flex-shrink: 0;
  color: var(--color-slate-500);
}

.action-menu__item:hover svg {
  color: var(--color-slate-700);
}

.action-menu--header {
  align-self: stretch;
}

.action-menu--header .action-menu__trigger {
  width: auto;
  height: 100%;
  padding: 0.55em;
  font-size: var(--text-sm);
}

.action-menu--header .action-menu__content {
  min-width: 220px;
}

@import "referral_redesign.css";