# RegiCare design system (static export)

This file is generated at build time from `src/design-system/*`.
Interactive samples and layout: `/design-system` (requires JavaScript).
Plain HTML (no JS): `/design-system-ai`

## Meta

- **generatedAt**: 2026-05-28T16:40:15.983Z
- **spaVisualReferencePath**: /design-system
- **staticHtmlPath**: /design-system-ai
- **staticJsonPath**: /regicare-design-system/catalog.json
- **staticMarkdownPath**: /regicare-design-system/catalog.md
- **sourceOfTruth**: src/design-system/tokens.ts, colours.ts, typography.ts, layout.ts, componentStyles.ts; page: src/pages/DesignSystemPage.tsx

## Tokens (JSON structure)

```json
{
  "color": {
    "brand": {
      "primary": "#005EB8",
      "accent": "#E6399B",
      "support": "#059669",
      "deep": "#152238"
    },
    "action": {
      "primary": "#FFBE00",
      "secondary": "#E6399B",
      "support": "#059669"
    },
    "surface": {
      "page": "#F9F9F9",
      "base": "#FFFFFF",
      "subtle": "#F8FAFC",
      "subtleStrong": "#F1F5F9",
      "hero": "#005EB8",
      "overlay": "rgba(0, 0, 0, 0.5)"
    },
    "text": {
      "primary": "#0F172A",
      "secondary": "#334155",
      "muted": "#475569",
      "inversePrimary": "#FFFFFF",
      "inverseMuted": "rgba(255, 255, 255, 0.85)",
      "linkAccent": "#E6399B"
    },
    "border": {
      "default": "#E2E8F0",
      "subtle": "#F1F5F9",
      "accent": "#E6399B",
      "inverseSoft": "rgba(255, 255, 255, 0.2)"
    }
  },
  "typography": {
    "font": {
      "family": {
        "base": "\"Open Sans\", ui-sans-serif, system-ui, sans-serif"
      },
      "weight": {
        "body": 400,
        "medium": 500,
        "strong": 700
      }
    },
    "weight": {
      "body": "font-normal",
      "medium": "font-medium",
      "strong": "font-bold"
    },
    "size": {
      "heroTitle": "text-2xl font-bold leading-tight sm:text-3xl md:text-4xl lg:text-5xl",
      "sectionTitle": "text-xl font-bold leading-tight sm:text-3xl md:text-4xl",
      "cardTitle": "text-lg font-bold leading-snug sm:text-xl md:text-2xl",
      "bodyReading": "text-base font-normal leading-relaxed",
      "bodyDefault": "text-base font-normal leading-relaxed",
      "bodyLarge": "text-base font-normal leading-relaxed md:text-lg",
      "bodyCompact": "text-[15px] font-normal leading-relaxed",
      "sectionIntro": "text-base font-medium leading-relaxed",
      "labelSmall": "text-base font-bold",
      "helper": "text-base font-normal"
    }
  },
  "typeScale": {
    "heroTitle": "text-2xl font-bold leading-tight sm:text-3xl md:text-4xl lg:text-5xl",
    "sectionTitle": "text-xl font-bold leading-tight sm:text-3xl md:text-4xl",
    "cardTitle": "text-lg font-bold leading-snug sm:text-xl md:text-2xl",
    "body": "text-base font-normal leading-relaxed",
    "bodyLarge": "text-base font-normal leading-relaxed md:text-lg",
    "bodyCompact": "text-[15px] font-normal leading-relaxed",
    "sectionIntro": "text-base font-medium leading-relaxed"
  },
  "prose": {
    "legal": "text-base font-normal leading-relaxed text-slate-600",
    "legalCompact": "text-base font-normal leading-relaxed leading-snug text-slate-600",
    "reviewCard": "text-[15px] font-normal leading-relaxed",
    "pathwaySituation": "text-base font-normal leading-relaxed",
    "pathwayHelp": "text-[15px] font-normal leading-relaxed"
  },
  "toolUi": {
    "label": "text-base font-normal leading-relaxed font-bold text-slate-600",
    "labelBrandBlue": "text-base font-normal leading-relaxed font-bold text-brand-blue",
    "labelBrandPink": "text-base font-normal leading-relaxed font-bold text-brand-pink",
    "body": "text-base font-normal leading-relaxed text-slate-700",
    "bodyList": "text-base font-normal leading-relaxed leading-relaxed text-slate-700",
    "control": "text-base font-normal leading-relaxed font-bold",
    "inputAffix": "text-base font-normal leading-relaxed text-slate-500",
    "summaryRow": "text-base font-normal leading-relaxed"
  },
  "toolStepTab": {
    "rail": "rounded-xl bg-white p-1 sm:p-2",
    "idle": "bg-slate-100 text-slate-700 shadow-sm hover:bg-slate-200 hover:text-slate-900",
    "idleEmbedded": "bg-slate-200 text-slate-800 shadow-sm hover:bg-slate-300 hover:text-slate-900",
    "active": "bg-brand-pink text-white shadow-md shadow-brand-pink/25",
    "completeDot": "bg-brand-green",
    "panel": "rounded-2xl bg-slate-50",
    "panelHeading": "text-brand-blue",
    "panelDescText": "text-slate-700 leading-relaxed"
  },
  "spacing": {
    "section": {
      "standard": "py-16 sm:py-20",
      "standardBottom": "pb-24",
      "heroTopOffset": "pt-32"
    },
    "container": {
      "inline": "px-5 sm:px-8 lg:px-10 xl:px-12"
    },
    "card": {
      "standardPadding": "p-8 md:p-10"
    }
  },
  "container": {
    "site": "max-w-7xl",
    "reading": "max-w-5xl",
    "detail": "max-w-[1080px]",
    "heroWide": "max-w-[1200px]",
    "prose": "max-w-4xl"
  },
  "radius": {
    "control": "rounded-xl",
    "card": "rounded-2xl",
    "cardProminent": "rounded-3xl",
    "badge": "rounded-full"
  },
  "shadow": {
    "surface": {
      "default": "shadow-xl shadow-slate-200/50",
      "soft": "shadow-sm"
    },
    "action": {
      "primary": "shadow-lg shadow-black/20",
      "secondary": "shadow-lg shadow-brand-pink/20"
    },
    "overlay": {
      "modal": "shadow-2xl"
    }
  },
  "button": {
    "primary": "inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 px-6 sm:px-8 lg:px-10 w-full md:w-auto",
    "secondary": "inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 gap-2 bg-brand-pink text-white shadow-lg shadow-brand-pink/20 px-6 lg:px-10 lg:shadow-xl w-full md:w-auto",
    "support": "inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-green px-6 text-white shadow-lg shadow-brand-green/20 lg:px-10 lg:shadow-xl w-full md:w-auto",
    "neutral": "inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 border border-slate-200 bg-white px-6 text-slate-700 hover:bg-slate-50 lg:px-10 w-full md:w-auto",
    "text": "inline-flex items-center justify-center text-sm font-bold text-brand-pink underline-offset-4 transition-all hover:underline"
  },
  "card": {
    "default": "rounded-2xl border border-slate-100 bg-white p-8 md:p-10 shadow-xl shadow-slate-200/50",
    "prominent": "rounded-3xl border border-slate-200 bg-white p-8 shadow-xl shadow-slate-200/50",
    "subtle": "rounded-xl border border-slate-200 bg-slate-50 p-6 shadow-sm",
    "inverse": "rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur-sm",
    "interactiveDirectory": "group flex h-full flex-col rounded-2xl border border-slate-200 bg-white p-6 transition-all hover:border-brand-blue hover:bg-brand-blue hover:shadow-md",
    "interactiveDirectoryTitle": "text-xl font-bold leading-snug text-brand-blue transition-colors group-hover:text-white sm:text-2xl",
    "interactiveDirectoryBody": "text-base font-normal leading-relaxed text-slate-600 transition-colors group-hover:text-white/90",
    "interactiveDirectoryAction": "inline-flex items-center text-left text-sm font-bold text-brand-pink underline-offset-4 transition-colors hover:underline group-hover:text-white group-hover:underline"
  },
  "form": {
    "label": "mb-2 block text-base font-normal leading-relaxed font-bold text-slate-700",
    "input": "min-h-[3.5rem] w-full rounded-xl border-0 bg-slate-50 px-4 py-3.5 text-base font-normal leading-relaxed leading-snug text-slate-900 outline-none ring-1 ring-inset ring-slate-200 transition-all focus:ring-2 focus:ring-brand-pink focus:bg-white placeholder:text-slate-400 placeholder:font-normal",
    "selectTrigger": "flex min-h-[3.5rem] w-full items-center rounded-xl border-0 bg-slate-50 px-4 py-3.5 text-left text-base font-normal leading-relaxed leading-snug text-slate-900 outline-none ring-1 ring-inset ring-slate-200 transition-all focus:ring-2 focus:ring-brand-pink focus:bg-white",
    "inputError": "ring-2 ring-brand-pink focus:ring-2 focus:ring-brand-pink",
    "helpText": "mt-1.5 text-base font-normal leading-relaxed text-slate-600",
    "errorText": "mt-1.5 text-base font-normal leading-relaxed font-medium text-brand-pink"
  },
  "hero": {
    "section": {
      "base": "relative overflow-x-clip bg-brand-blue px-4 pb-20 pt-32 text-white sm:px-6 lg:px-8",
      "page": "relative overflow-x-clip bg-brand-blue px-4 pb-14 pt-40 text-white sm:px-6 sm:pb-20 sm:pt-36 lg:px-8 lg:pt-40"
    },
    "title": "text-2xl font-bold leading-tight tracking-tight sm:text-3xl md:text-4xl lg:text-5xl",
    "subtitle": "text-base font-medium leading-relaxed text-slate-200 md:text-lg",
    "overlapCardOffset": "-mt-8"
  },
  "cta": {
    "section": {
      "default": "relative overflow-hidden bg-brand-blue py-14 text-white sm:py-20",
      "inlineBand": "relative overflow-hidden rounded-2xl bg-brand-blue p-8 text-white shadow-xl sm:p-10 md:p-12 xl:p-14"
    },
    "title": "text-xl font-bold leading-tight sm:text-3xl md:text-4xl",
    "body": "text-base leading-relaxed text-white/85 sm:text-lg"
  },
  "link": {
    "serviceDestination": "group inline-flex min-w-0 w-full items-center justify-between gap-2 rounded-lg border border-slate-200 bg-slate-50 px-4 py-2.5 text-base font-bold text-brand-blue transition-all hover:border-brand-blue hover:bg-brand-blue hover:text-white lg:px-5 lg:py-3",
    "serviceDestinationActive": "inline-flex min-w-0 w-full items-center justify-between gap-2 rounded-lg border border-brand-blue bg-brand-blue px-4 py-2.5 text-base font-bold text-white shadow-sm shadow-brand-blue/25 transition-all lg:px-5 lg:py-3",
    "serviceDestinationIcon": "h-4 w-4 shrink-0 text-brand-blue transition-transform group-hover:translate-x-0.5 group-hover:text-white lg:h-5 lg:w-5",
    "serviceDestinationIconActive": "h-4 w-4 shrink-0 text-white lg:h-5 lg:w-5",
    "serviceDestinationNav": "group inline-flex min-w-0 w-full items-center rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-base font-bold leading-snug text-brand-blue transition-all hover:border-brand-blue hover:bg-brand-blue hover:text-white lg:px-4 lg:py-2.5",
    "serviceDestinationNavActive": "inline-flex min-w-0 w-full items-center rounded-lg border border-brand-blue bg-brand-blue px-3 py-2 text-base font-bold leading-snug text-white shadow-sm shadow-brand-blue/25 transition-all lg:px-4 lg:py-2.5"
  }
}
```

## Additional component style exports

Same module as nested `button` / `card` / … objects; listed separately for searchability.

### `bodyHyperlink`

```
font-medium text-brand-blue underline decoration-brand-blue/50 underline-offset-[3px] transition-colors hover:text-brand-dark hover:decoration-brand-dark visited:text-violet-800 visited:decoration-violet-800/60 focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-blue
```

### `faqAnswerModeToggleInactiveTab`

```
bg-slate-100 text-brand-blue hover:bg-slate-200 hover:text-brand-blue
```

### `faqShortAnswerBookCallButton`

```
inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 mt-5 px-5 lg:px-6 lg:shadow-lg
```

### `faqShortAnswerHelpPromptCard`

```
rounded-xl border border-slate-200/90 bg-slate-50/95 p-4 shadow-sm shadow-slate-200/35 md:p-5
```

### `faqShortAnswerHelpPromptCardBody`

```
mt-2 text-left text-base font-normal leading-relaxed text-slate-600 [text-wrap:pretty]
```

### `faqShortAnswerHelpPromptCardHeading`

```
text-[15px] font-semibold leading-snug text-brand-blue [text-wrap:pretty]
```

### `filterDropdownShellFit`

```
inline-flex min-h-12 h-12 lg:h-12 w-auto max-w-full items-center rounded-xl bg-brand-blue px-3 py-0 shadow-lg shadow-brand-blue/25 transition-all sm:px-4 [&_button]:!h-12 [&_button]:!min-h-12 [&_button]:!py-0 [&_button]:!font-bold [&_button]:!leading-none
```

### `heroNavButtonRow`

```
mx-auto flex w-max max-w-full flex-wrap items-center justify-center gap-3 sm:gap-4
```

### `heroNavGreenShell`

```
inline-flex w-max max-w-full min-w-0 items-center justify-center rounded-xl bg-brand-green px-2 py-2 shadow-lg shadow-brand-green/25 min-h-11 h-auto lg:h-12 lg:px-5 lg:py-0
```

### `heroNavGreenShellCenter`

```
inline-flex w-max max-w-full min-w-0 items-center justify-center rounded-xl bg-brand-green pl-2 pr-1.5 py-2 shadow-lg shadow-brand-green/25 min-h-11 h-auto lg:h-12 lg:py-0 lg:pl-4 lg:pr-3
```

### `heroNavGreenShellForm`

```
inline-flex max-w-full h-auto min-h-11 items-center rounded-xl bg-brand-green px-4 py-2 shadow-lg shadow-brand-green/25 lg:min-h-12 lg:px-5 lg:py-2.5
```

### `heroNavSlot`

```
w-full py-6 sm:py-8
```

### `howItWorksStepBadge`

```
flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-brand-pink text-base font-bold leading-none text-white shadow-lg shadow-brand-pink/20 sm:h-12 sm:w-12 sm:text-lg
```

### `howItWorksStepRow`

```
mb-4 flex items-center gap-3.5 sm:gap-4
```

### `howItWorksStepTitle`

```
m-0 min-w-0 flex-1 text-lg font-bold leading-tight sm:text-xl
```

### `inlineNavPinkButton`

```
inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-pink px-4 text-white shadow-md shadow-brand-pink/25 lg:px-5
```

### `inlineNavPinkButtonHeaderMenu`

```
inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-pink px-4 text-white shadow-md shadow-brand-pink/25 lg:px-5 h-9
```

### `inlineNavPinkButtonHeroToolMobile`

```
max-md:h-9 max-md:min-h-9 max-md:px-3 max-md:text-xs max-md:leading-none [&_svg]:max-md:h-3.5 [&_svg]:max-md:w-3.5
```

### `inlineNavPinkButtonMulti`

```
inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-pink px-4 text-white shadow-md shadow-brand-pink/25 lg:px-5 text-center leading-snug whitespace-normal
```

### `inlineNavPinkPairGrid`

```
mx-auto inline-grid w-max max-w-full grid-cols-2 gap-3
```

### `inlineNavPinkPairGridFull`

```
grid w-full grid-cols-2 gap-3
```

### `legalCompanyDetailLabel`

```
font-bold text-brand-dark
```

### `legalProseBody`

```
text-base font-normal leading-relaxed text-slate-600
```

### `legalProseBodyCompact`

```
text-base font-normal leading-relaxed leading-snug text-slate-600
```

### `marketingHeroLead`

```
text-base font-medium leading-relaxed text-slate-300 md:text-lg
```

### `mobileFullWidthCta`

```
w-full md:w-auto
```

### `mobilePickerCardGrid`

```
grid grid-cols-1 gap-6 overflow-visible sm:gap-6 lg:grid-cols-3 lg:gap-6
```

### `multiSelectFilterDropdownShell`

**`multiSelectFilterDropdownShell(false)`**

```
inline-flex w-full min-h-12 h-12 lg:h-12 items-stretch rounded-xl px-3 py-0 shadow-lg transition-all sm:px-4 bg-brand-blue shadow-brand-blue/25 [&_button]:!font-bold
```

**`multiSelectFilterDropdownShell(true)`**

```
inline-flex w-full min-h-12 h-12 lg:h-12 items-stretch rounded-xl px-3 py-0 shadow-lg transition-all sm:px-4 bg-brand-green shadow-brand-green/25 [&_button]:!font-bold
```

### `navPillHeight`

```
min-h-12 h-12 lg:h-12
```

### `navPillText`

```
text-base font-bold leading-none
```

### `pageHeroContentStack`

```
flex w-full flex-col items-center gap-7 sm:gap-8
```

### `pathwayHelpRecommendation`

```
text-[15px] font-normal leading-relaxed
```

### `pathwaySituationBody`

```
text-base font-normal leading-relaxed
```

### `primaryYellowButton`

```
inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 px-6 sm:px-8 lg:px-10
```

### `primaryYellowButtonHeader`

```
inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 px-4 lg:px-5
```

### `primaryYellowButtonOnLight`

```
inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 bg-brand-yellow text-black shadow-md shadow-black/25 border-0 px-6 sm:px-8 outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-2
```

### `regicareBlueHeaderTopicBadge`

```
inline-flex max-w-full items-center rounded-lg bg-white/12 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.08em] text-white ring-1 ring-inset ring-white/20 sm:text-[11px]
```

### `resourceDirectoryOpenButton`

```
pointer-events-none inline-flex items-center justify-center rounded-lg bg-brand-pink px-4 py-1.5 text-xs font-bold leading-snug text-white shadow-sm shadow-brand-pink/25 group-hover:bg-brand-pink group-hover:text-white group-hover:no-underline sm:py-2 sm:text-sm
```

### `reviewCardBody`

```
text-[15px] font-normal leading-relaxed
```

### `secondaryPinkCtaButton`

```
inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 gap-2 bg-brand-pink text-white shadow-lg shadow-brand-pink/20 px-6 lg:px-10 lg:shadow-xl
```

### `sectionHeadingBlock`

```
mb-10 flex flex-col gap-5 sm:mb-12 sm:gap-4 lg:mb-12
```

### `solidPinkActionButton`

```
inline-flex shrink-0 items-center justify-center rounded-xl text-base font-bold leading-none transition-all hover:brightness-110 min-h-12 h-12 lg:h-12 gap-2 bg-brand-pink text-white shadow-lg shadow-brand-pink/20 px-6 lg:px-10 lg:shadow-xl
```

### `stackedCtaButtonWidth`

```
w-full min-w-0 lg:w-auto
```

### `stackedCtaShell`

```
mx-auto flex w-full max-w-md flex-col items-stretch justify-center gap-3 sm:max-w-lg lg:max-w-none lg:flex-row lg:items-center lg:justify-center lg:gap-4 xl:gap-5
```

### `standardSectionPadding`

```
scroll-mt-24 py-16 sm:py-20
```

### `toolDevPreviewSkipLink`

```
text-center text-[11px] font-medium leading-snug text-brand-pink underline-offset-2 transition-colors hover:underline sm:text-xs sm:font-bold
```

### `toolEmbeddedChromeBody`

```
flex w-full flex-col gap-3 max-md:gap-4 max-md:pt-1
```

### `toolEmbeddedChromeCard`

```
w-full max-md:overflow-hidden max-md:rounded-2xl max-md:bg-slate-50 max-md:px-3 max-md:pb-3 max-md:pt-4 sm:rounded-none sm:bg-transparent sm:p-0
```

### `toolEmbeddedChromeProgressInset`

```
max-md:mt-3 max-md:px-1.5
```

### `toolEmbeddedGreySection`

```
w-full max-md:overflow-hidden max-md:rounded-xl max-md:bg-slate-50 max-md:p-3 sm:rounded-none sm:bg-transparent sm:p-0
```

### `toolEmbeddedIntroBody`

```
w-full max-md:py-2 sm:p-0
```

### `toolEmbeddedIntroStack`

```
flex w-full flex-col max-md:gap-5 max-md:bg-white max-md:px-6 max-md:pt-8 max-md:pb-6 sm:gap-6
```

### `toolEmbeddedPanelPadding`

```
w-full rounded-xl px-3 py-4 sm:p-8
```

### `toolEmbeddedQuestionBlock`

```
w-full max-md:overflow-hidden max-md:rounded-xl max-md:bg-slate-50 max-md:p-3 sm:rounded-none sm:bg-transparent sm:p-0
```

### `toolEmbeddedResultActions`

```
max-md:justify-center
```

### `toolEmbeddedSectionShell`

```
w-full max-md:rounded-xl max-md:border-0 max-md:bg-slate-50 max-md:p-3 max-md:shadow-none rounded-xl border border-slate-200 bg-white p-3 shadow-sm sm:rounded-2xl sm:p-6
```

### `toolEmbeddedStack`

```
flex w-full flex-col max-md:gap-2 max-md:bg-white sm:gap-6
```

### `toolEmbeddedSubscoreLabelRow`

```
mb-1.5 flex items-baseline justify-between gap-2 text-[11px] leading-tight sm:text-sm
```

### `toolEmbeddedToolbarBand`

```
w-full max-md:px-3 max-md:py-3.5 sm:px-0 sm:py-3
```

### `toolEmbeddedToolbarCenterLabel`

```
text-center text-xs font-bold leading-snug text-brand-blue
```

### `toolEmbeddedToolbarGrid`

```
grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-x-2
```

### `toolEmbeddedToolbarRowInset`

```
max-md:px-3
```

### `toolEmbeddedWizardFormShell`

```
w-full sm:space-y-6 sm:rounded-2xl sm:border sm:border-slate-100 sm:bg-white sm:p-6 sm:shadow-xl sm:shadow-slate-200/50 md:space-y-8 md:p-8
```

### `toolEmbeddedWizardNavBand`

```
w-full max-md:px-3 sm:mt-8 sm:pt-1 lg:mt-10 lg:pt-2
```

### `toolEmbeddedWizardNavRow`

```
w-full max-md:px-3 sm:mt-8 sm:pt-1 lg:mt-10 lg:pt-2
```

### `toolGradientCtaBand`

```
overflow-hidden rounded-2xl bg-gradient-to-br from-brand-blue to-brand-dark p-6 text-white shadow-xl shadow-brand-blue/30
```

### `toolOptionRowIdle`

```
relative w-full min-h-11 overflow-hidden rounded-xl border border-slate-200 bg-white px-4 py-3 text-left text-sm font-medium text-slate-700 shadow-sm shadow-slate-200/40 transition-colors duration-150 hover:border-brand-blue hover:bg-slate-50 hover:text-slate-900 hover:shadow-md hover:ring-2 hover:ring-brand-blue/15 sm:min-h-12 sm:px-5 sm:py-3.5 sm:text-base
```

### `toolOptionRowSelected`

```
relative w-full min-h-11 overflow-hidden rounded-xl border border-transparent bg-brand-blue px-4 py-3 text-left text-sm font-medium text-white shadow-md shadow-brand-blue/25 ring-2 ring-brand-blue/25 sm:min-h-12 sm:px-5 sm:py-3.5 sm:text-base
```

### `toolOutcomePanelPositive`

```
rounded-xl bg-brand-green p-6 shadow-md shadow-brand-green/20
```

### `toolOutcomePanelRisk`

```
rounded-xl bg-red-800 p-6 shadow-md shadow-red-950/25
```

### `toolProgressBarFill`

```
h-full rounded-[2px] bg-brand-blue transition-all duration-300
```

### `toolProgressBarTrack`

```
h-2.5 w-full overflow-hidden rounded-[2px] bg-slate-200
```

### `toolProgressMeta`

```
text-xs font-medium text-slate-600 sm:text-sm
```

### `toolProgressPrimary`

```
text-xs font-bold text-brand-blue sm:text-sm
```

### `toolQuestionGuidanceHint`

```
mt-2 text-xs font-medium leading-snug text-brand-pink sm:text-base sm:leading-relaxed
```

### `toolResultHeaderBand`

```
border-b border-brand-blue bg-brand-blue px-6 py-5 md:px-8 md:py-6
```

### `toolResultYellowCtaButton`

```
inline-flex shrink-0 items-center justify-center rounded-lg bg-brand-yellow px-4 py-2.5 text-sm font-bold leading-snug text-black shadow-md shadow-black/25 transition-all hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-2 sm:rounded-xl sm:px-6
```

### `toolSectionCardTitle`

```
text-xl font-bold text-brand-blue sm:text-2xl lg:text-3xl
```

### `toolStepTabButton`

```
shrink-0 rounded-lg px-2.5 py-2 text-center text-xs font-bold leading-snug transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-pink focus-visible:ring-offset-2 max-md:px-3 max-md:py-2.5 max-md:text-sm sm:rounded-xl sm:px-2 sm:py-2.5 sm:text-sm lg:flex-1 lg:px-3 lg:py-3 lg:text-base
```

### `toolStepTabList`

```
flex gap-1.5 overflow-x-auto overscroll-x-contain pb-0.5 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:grid sm:grid-cols-3 sm:gap-2.5 sm:overflow-visible sm:pb-0 lg:flex lg:gap-3
```

### `toolStepTabRailEmbeddedMobile`

```
max-md:!rounded-none max-md:!bg-transparent max-md:!p-0 max-md:!shadow-none
```

### `toolStepTabScrollHint`

```
mt-2.5 text-center text-[11px] font-medium text-slate-500 sm:hidden
```

### `toolStickyChromeProgressPad`

```
px-3 pb-4 pt-0 sm:px-4 sm:pb-6 sm:pt-1
```

### `toolStickyChromeShell`

```
mb-4 overflow-hidden rounded-xl border border-slate-200 bg-white/95 shadow-md shadow-slate-200/60 max-md:static max-md:shadow-sm md:sticky md:top-[4.5rem] md:z-30 md:backdrop-blur-sm lg:top-28
```

### `toolStickyChromeTabsPad`

```
px-3 pb-2 pt-3 sm:px-4 sm:pb-3 sm:pt-4
```

### `toolSupportCallout`

```
rounded-xl bg-brand-green px-4 py-4 shadow-sm shadow-brand-green/20 sm:px-5 sm:py-5
```

### `toolToolbarActions`

```
grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:flex-wrap sm:items-center sm:gap-3
```

### `toolToolbarButton`

```
inline-flex shrink-0 items-center justify-center rounded-lg border border-slate-700 bg-white px-2.5 py-2 text-center text-xs font-bold leading-snug text-slate-700 shadow-sm transition-colors hover:bg-slate-50 sm:px-4 sm:py-2 sm:text-sm
```

### `toolToolbarPinkButton`

```
inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-brand-pink px-2.5 py-2 text-center text-xs font-bold leading-snug text-white shadow-md shadow-brand-pink/20 transition-colors hover:bg-brand-pink/90 sm:px-4 sm:py-2 sm:text-sm
```

### `toolToolbarRow`

```
flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:gap-3
```

### `toolToolbarRowSplit`

```
flex w-full items-center justify-between gap-2
```

### `toolWizardNavBack`

```
inline-flex shrink-0 items-center justify-center rounded-lg px-2.5 py-2 text-center text-xs font-bold leading-snug shadow-sm transition-colors hover:brightness-110 sm:min-w-[5.25rem] sm:px-5 sm:py-2.5 sm:text-sm sm:leading-none lg:min-w-[7rem] lg:px-6 lg:py-3 lg:text-base bg-brand-pink text-white shadow-brand-pink/20
```

### `toolWizardNavButtonBase`

```
inline-flex shrink-0 items-center justify-center rounded-lg px-2.5 py-2 text-center text-xs font-bold leading-snug shadow-sm transition-colors hover:brightness-110 sm:min-w-[5.25rem] sm:px-5 sm:py-2.5 sm:text-sm sm:leading-none lg:min-w-[7rem] lg:px-6 lg:py-3 lg:text-base
```

### `toolWizardNavNext`

```
inline-flex shrink-0 items-center justify-center rounded-lg px-2.5 py-2 text-center text-xs font-bold leading-snug shadow-sm transition-colors hover:brightness-110 sm:min-w-[5.25rem] sm:px-5 sm:py-2.5 sm:text-sm sm:leading-none lg:min-w-[7rem] lg:px-6 lg:py-3 lg:text-base bg-brand-pink text-white shadow-brand-pink/20 disabled:cursor-not-allowed disabled:opacity-50
```

### `toolWizardPanelTitle`

```
text-xl font-bold text-white sm:text-2xl lg:text-3xl
```