/* =============================================================================
   Peach Onboarding UI System
   A participant-facing onboarding flow for NDIS/disability services.
   Warm, accessible, step-by-step. Built for Peach Marketing Australia's SDA product.
   All selectors scoped under .system-system-peach-onboarding
   All classes use the po- prefix; all custom properties use --po- prefix.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400&family=DM+Sans:wght@400;500;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */

.system-system-peach-onboarding {

  /* ---------------------------------------------------------------------------
     Color: Cool Gray Scale (teal-tinted for onboarding warmth)
     --------------------------------------------------------------------------- */
  --po-gray-50: #FFFFFF;
  --po-gray-75: #FBFDFD;
  --po-gray-100: #F5F9FA;
  --po-gray-200: #E8F1F2;
  --po-gray-300: #D8E6E8;
  --po-gray-400: #B8CCD0;
  --po-gray-500: #9BA5B0;
  --po-gray-600: #5A6577;
  --po-gray-700: #3D4A5A;
  --po-gray-800: #2D3A4A;
  --po-gray-900: #1A2430;

  /* ---------------------------------------------------------------------------
     Color: Primary (Business Teal)
     --------------------------------------------------------------------------- */
  --po-color-primary: #18B5A8;
  --po-color-primary-hover: #0EA098;
  --po-color-primary-active: #0B8A84;
  --po-color-primary-light: #E2F6F4;
  --po-color-primary-muted: rgba(24, 181, 168, 0.15);
  --po-color-on-primary: #FFFFFF;

  /* ---------------------------------------------------------------------------
     Color: Secondary (Amber Gold)
     --------------------------------------------------------------------------- */
  --po-color-secondary: #F5A623;
  --po-color-secondary-hover: #E09518;
  --po-color-secondary-active: #C98510;
  --po-color-secondary-light: #FEF3E0;
  --po-color-secondary-muted: rgba(245, 166, 35, 0.15);
  --po-color-on-secondary: #FFFFFF;

  /* ---------------------------------------------------------------------------
     Color: Tertiary (Mint)
     --------------------------------------------------------------------------- */
  --po-color-tertiary: #40D4A8;
  --po-color-tertiary-light: #E0F8F0;

  /* ---------------------------------------------------------------------------
     Color: Sage (Ocean Blue)
     --------------------------------------------------------------------------- */
  --po-color-sage: #2878A0;
  --po-color-sage-light: #E0EFF6;

  /* ---------------------------------------------------------------------------
     Color: Semantic
     --------------------------------------------------------------------------- */
  --po-color-positive: #2E8B57;
  --po-color-positive-light: #E0F2E8;
  --po-color-positive-muted: rgba(46, 139, 87, 0.12);

  --po-color-negative: #D44040;
  --po-color-negative-hover: #C03030;
  --po-color-negative-active: #A82020;
  --po-color-negative-light: #FDE8E8;
  --po-color-negative-muted: rgba(212, 64, 64, 0.12);

  --po-color-notice: #D4952A;
  --po-color-notice-light: #FDF3E0;

  --po-color-informative: #3A7CA5;
  --po-color-informative-light: #E4F0F8;

  --po-color-static-white: #FFFFFF;
  --po-color-static-black: #1A2430;

  /* ---------------------------------------------------------------------------
     Color: Extended Hues
     --------------------------------------------------------------------------- */
  --po-color-purple: #7B5EA7;
  --po-color-purple-light: #F0EAF6;
  --po-color-fuchsia: #C038A0;
  --po-color-fuchsia-light: #FCE8F6;
  --po-color-indigo: #5258E4;
  --po-color-indigo-light: #ECEDFB;

  /* ---------------------------------------------------------------------------
     Color: Backgrounds & Surfaces
     --------------------------------------------------------------------------- */
  --po-bg-default: #E8F1F2;
  --po-bg-alt: #D8E6E8;
  --po-bg-layer-1: var(--po-gray-50);
  --po-bg-layer-2: var(--po-gray-75);
  --po-bg-overlay: rgba(0, 0, 0, 0.4);
  --po-bg-disabled: var(--po-gray-200);

  /* Static dark surface — always dark regardless of theme (tooltip, toast) */
  --po-surface-inverted: #2D3A4A;
  --po-surface-inverted-text: #FFFFFF;

  /* Hover/active overlays */
  --po-hover-overlay: rgba(0, 0, 0, 0.04);
  --po-active-overlay: rgba(0, 0, 0, 0.1);

  /* Skeleton shimmer */
  --po-skeleton-shimmer: rgba(24, 181, 168, 0.08);

  /* ---------------------------------------------------------------------------
     Color: Text
     --------------------------------------------------------------------------- */
  --po-text-primary: var(--po-gray-800);
  --po-text-secondary: var(--po-gray-600);
  --po-text-tertiary: var(--po-gray-500);
  --po-text-disabled: var(--po-gray-400);
  --po-text-inverse: var(--po-gray-50);
  --po-text-action: var(--po-color-primary);
  --po-text-negative: var(--po-color-negative);
  --po-text-notice: var(--po-color-notice);
  --po-text-positive: var(--po-color-positive);

  /* ---------------------------------------------------------------------------
     Color: Borders
     --------------------------------------------------------------------------- */
  --po-border-default: #E2DDD6;
  --po-border-light: #EDE8E1;
  --po-border-hover: var(--po-gray-500);
  --po-border-focus: var(--po-color-primary);
  --po-border-invalid: var(--po-color-negative);
  --po-border-disabled: var(--po-gray-200);

  /* ---------------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------------- */
  --po-font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  --po-font-family-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --po-font-family-code: 'DM Mono', ui-monospace, monospace;

  /* Shorthand font tokens (from production export) */
  --po-text-sm: 400 0.875rem/1.5 var(--po-font-family);
  --po-text-base: 400 1rem/1.55 var(--po-font-family);
  --po-text-md: 500 1.0625rem/1.5 var(--po-font-family);
  --po-text-lg: 500 1.125rem/1.5 var(--po-font-family);
  --po-text-xl: 600 1.25rem/1.4 var(--po-font-family);
  --po-text-3xl: 700 1.625rem/1.25 var(--po-font-family-heading);
  --po-label: 600 0.875rem/1.3 var(--po-font-family);
  --po-caption: 400 0.75rem/1.5 var(--po-font-family);

  /* Token-scale font sizes */
  --po-font-size-25: 10px;
  --po-font-size-50: 11px;
  --po-font-size-75: 12px;
  --po-font-size-100: 16px;
  --po-font-size-150: 17px;
  --po-font-size-200: 18px;
  --po-font-size-300: 20px;
  --po-font-size-400: 22px;
  --po-font-size-500: 24px;
  --po-font-size-600: 26px;
  --po-font-size-700: 28px;
  --po-font-size-800: 32px;
  --po-font-size-900: 36px;
  --po-font-size-1000: 40px;
  --po-font-size-1100: 45px;

  --po-font-weight-light: 300;
  --po-font-weight-regular: 400;
  --po-font-weight-medium: 500;
  --po-font-weight-semibold: 600;
  --po-font-weight-bold: 700;
  --po-font-weight-black: 900;

  --po-line-height-sm: 1.3;
  --po-line-height-md: 1.5;
  --po-line-height-lg: 1.7;

  --po-letter-spacing-none: 0;
  --po-letter-spacing-sm: 0.0125em;
  --po-letter-spacing-md: 0.06em;

  /* ---------------------------------------------------------------------------
     Spacing
     --------------------------------------------------------------------------- */
  --po-spacing-10: 1px;
  --po-spacing-25: 2px;
  --po-spacing-50: 4px;
  --po-spacing-75: 6px;
  --po-spacing-100: 8px;
  --po-spacing-125: 10px;
  --po-spacing-150: 12px;
  --po-spacing-175: 14px;
  --po-spacing-200: 16px;
  --po-spacing-225: 18px;
  --po-spacing-250: 20px;
  --po-spacing-300: 24px;
  --po-spacing-400: 32px;
  --po-spacing-500: 40px;
  --po-spacing-600: 48px;
  --po-spacing-700: 56px;
  --po-spacing-800: 64px;

  /* Production export spacing aliases */
  --po-space-1: 4px;
  --po-space-2: 8px;
  --po-space-3: 12px;
  --po-space-4: 16px;
  --po-space-5: 20px;
  --po-space-6: 24px;
  --po-space-8: 32px;
  --po-space-10: 40px;
  --po-space-12: 48px;

  /* ---------------------------------------------------------------------------
     Shape — Rounder, friendlier for participant-facing UI
     --------------------------------------------------------------------------- */
  --po-radius-xs: 4px;
  --po-radius-sm: 10px;
  --po-radius-md: 14px;
  --po-radius-lg: 18px;
  --po-radius-xl: 24px;
  --po-radius-pill: 9999px;
  --po-radius-circle: 50%;

  --po-border-width-thin: 1px;
  --po-border-width-thick: 2px;
  --po-border-width-thicker: 4px;

  /* ---------------------------------------------------------------------------
     Shadows — Teal-tinted
     --------------------------------------------------------------------------- */
  --po-shadow-sm: 0 1px 3px rgba(24, 181, 168, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --po-shadow-md: 0 4px 16px rgba(24, 181, 168, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --po-shadow-lg: 0 8px 32px rgba(24, 181, 168, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
  --po-shadow-focus-ring:
    0 0 0 3px #E8F1F2,
    0 0 0 5px rgba(24, 181, 168, 0.5),
    0 0 12px rgba(24, 181, 168, 0.15);

  /* ---------------------------------------------------------------------------
     Motion — Friendly, slightly bouncy
     --------------------------------------------------------------------------- */
  --po-duration-100: 150ms;
  --po-duration-200: 200ms;
  --po-duration-300: 250ms;
  --po-duration-400: 300ms;
  --po-duration-500: 350ms;
  --po-duration-600: 400ms;

  --po-ease-in: cubic-bezier(0.5, 0, 1, 1);
  --po-ease-out: cubic-bezier(0, 0, 0.4, 1);
  --po-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
  --po-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Production export aliases */
  --po-duration-fast: 150ms;
  --po-duration-normal: 250ms;
  --po-duration-slow: 350ms;
  --po-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --po-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------------------------------------------------------------------------
     Base Styles
     --------------------------------------------------------------------------- */
  font-family: var(--po-font-family);
  font-size: var(--po-font-size-100);
  font-weight: var(--po-font-weight-regular);
  line-height: var(--po-line-height-md);
  color: var(--po-text-primary);
  background-color: var(--po-bg-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

.system-system-peach-onboarding *,
.system-system-peach-onboarding *::before,
.system-system-peach-onboarding *::after {
  box-sizing: border-box;
}


/* =============================================================================
   2. DARK THEME
   ============================================================================= */

/* Respond to catalog dark toggle (.cat-dark / .dark on body, [data-theme="dark"] on html) */
.cat-dark .system-system-peach-onboarding,
.dark .system-system-peach-onboarding,
[data-theme="dark"] .system-system-peach-onboarding,
.system-system-peach-onboarding.po-dark {
  --po-gray-50: #0E1618;
  --po-gray-75: #121C1E;
  --po-gray-100: #141E20;
  --po-gray-200: #1C2A2C;
  --po-gray-300: #2A3C3E;
  --po-gray-400: #3C5254;
  --po-gray-500: #6A8488;
  --po-gray-600: #A0B8BC;
  --po-gray-700: #C8DDE0;
  --po-gray-800: #E8F2F4;
  --po-gray-900: #FFFFFF;

  /* Brighter teal for dark mode */
  --po-color-primary: #3CCEC2;
  --po-color-primary-hover: #50DAD0;
  --po-color-primary-active: #2ABFB2;
  --po-color-primary-light: rgba(60, 206, 194, 0.12);
  --po-color-primary-muted: rgba(60, 206, 194, 0.18);

  /* Brighter amber for dark mode */
  --po-color-secondary: #F5B84A;
  --po-color-secondary-hover: #F8C86A;
  --po-color-secondary-active: #E8A838;
  --po-color-secondary-light: rgba(245, 184, 74, 0.12);
  --po-color-secondary-muted: rgba(245, 184, 74, 0.18);

  --po-color-tertiary: #60E8BE;
  --po-color-tertiary-light: rgba(96, 232, 190, 0.12);

  --po-color-sage: #50A8D0;
  --po-color-sage-light: rgba(80, 168, 208, 0.12);

  --po-color-positive: #5CC888;
  --po-color-positive-light: rgba(92, 200, 136, 0.12);
  --po-color-positive-muted: rgba(92, 200, 136, 0.15);

  --po-color-negative: #E87070;
  --po-color-negative-hover: #F08888;
  --po-color-negative-active: #D05858;
  --po-color-negative-light: rgba(232, 112, 112, 0.12);
  --po-color-negative-muted: rgba(232, 112, 112, 0.15);

  --po-color-notice: #E8B050;
  --po-color-notice-light: rgba(232, 176, 80, 0.12);

  --po-color-informative: #60A8D8;
  --po-color-informative-light: rgba(96, 168, 216, 0.12);

  --po-color-purple: #A78CD9;
  --po-color-purple-light: rgba(167, 140, 217, 0.12);
  --po-color-fuchsia: #D97EC0;
  --po-color-fuchsia-light: rgba(217, 126, 192, 0.12);
  --po-color-indigo: #8B8FF0;
  --po-color-indigo-light: rgba(139, 143, 240, 0.12);

  /* Surface overrides */
  --po-bg-default: var(--po-gray-100);
  --po-bg-alt: var(--po-gray-200);
  --po-bg-layer-1: var(--po-gray-100);
  --po-bg-layer-2: var(--po-gray-200);
  --po-bg-overlay: rgba(0, 0, 0, 0.6);

  /* Border overrides */
  --po-border-default: var(--po-gray-300);
  --po-border-light: var(--po-gray-200);

  /* Inverse text flips */
  --po-text-inverse: var(--po-gray-100);

  /* Static dark surface — always dark regardless of theme */
  --po-surface-inverted: #1C2A2C;
  --po-surface-inverted-text: #FFFFFF;

  /* Hover/active overlays */
  --po-hover-overlay: rgba(255, 255, 255, 0.07);
  --po-active-overlay: rgba(255, 255, 255, 0.12);

  /* Skeleton shimmer — softer in dark mode */
  --po-skeleton-shimmer: rgba(60, 206, 194, 0.06);

  /* Shadows — deeper in dark mode */
  --po-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --po-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  --po-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
  --po-shadow-focus-ring:
    0 0 0 3px var(--po-gray-100),
    0 0 0 5px rgba(60, 206, 194, 0.55),
    0 0 12px rgba(60, 206, 194, 0.2);
}


/* =============================================================================
   3. TYPOGRAPHY CLASSES
   ============================================================================= */

.system-system-peach-onboarding .po-heading-xxl {
  font-family: var(--po-font-family-heading);
  font-size: var(--po-font-size-1100);
  font-weight: var(--po-font-weight-bold);
  line-height: var(--po-line-height-sm);
  letter-spacing: var(--po-letter-spacing-none);
  color: var(--po-text-primary);
  margin: 0 0 var(--po-spacing-200) 0;
}

.system-system-peach-onboarding .po-heading-xl {
  font-family: var(--po-font-family-heading);
  font-size: var(--po-font-size-900);
  font-weight: var(--po-font-weight-bold);
  line-height: var(--po-line-height-sm);
  letter-spacing: var(--po-letter-spacing-none);
  color: var(--po-text-primary);
  margin: 0 0 var(--po-spacing-200) 0;
}

.system-system-peach-onboarding .po-heading-lg {
  font-family: var(--po-font-family-heading);
  font-size: var(--po-font-size-700);
  font-weight: var(--po-font-weight-bold);
  line-height: var(--po-line-height-sm);
  letter-spacing: var(--po-letter-spacing-none);
  color: var(--po-text-primary);
  margin: 0 0 var(--po-spacing-150) 0;
}

.system-system-peach-onboarding .po-heading-md {
  font-family: var(--po-font-family-heading);
  font-size: var(--po-font-size-500);
  font-weight: var(--po-font-weight-bold);
  line-height: var(--po-line-height-sm);
  letter-spacing: var(--po-letter-spacing-none);
  color: var(--po-text-primary);
  margin: 0 0 var(--po-spacing-150) 0;
}

.system-system-peach-onboarding .po-heading-sm {
  font-family: var(--po-font-family-heading);
  font-size: var(--po-font-size-300);
  font-weight: var(--po-font-weight-semibold);
  line-height: var(--po-line-height-sm);
  letter-spacing: var(--po-letter-spacing-none);
  color: var(--po-text-primary);
  margin: 0 0 var(--po-spacing-100) 0;
}

.system-system-peach-onboarding .po-heading-xs {
  font-family: var(--po-font-family-heading);
  font-size: var(--po-font-size-200);
  font-weight: var(--po-font-weight-semibold);
  line-height: var(--po-line-height-sm);
  letter-spacing: var(--po-letter-spacing-none);
  color: var(--po-text-primary);
  margin: 0 0 var(--po-spacing-100) 0;
}

.system-system-peach-onboarding .po-body-xl {
  font-size: var(--po-font-size-300);
  font-weight: var(--po-font-weight-regular);
  line-height: var(--po-line-height-md);
  color: var(--po-text-primary);
}

.system-system-peach-onboarding .po-body-lg {
  font-size: var(--po-font-size-200);
  font-weight: var(--po-font-weight-regular);
  line-height: var(--po-line-height-md);
  color: var(--po-text-primary);
}

.system-system-peach-onboarding .po-body-md {
  font-size: var(--po-font-size-100);
  font-weight: var(--po-font-weight-regular);
  line-height: var(--po-line-height-md);
  color: var(--po-text-primary);
}

.system-system-peach-onboarding .po-body-sm {
  font-size: var(--po-font-size-75);
  font-weight: var(--po-font-weight-regular);
  line-height: var(--po-line-height-md);
  color: var(--po-text-secondary);
}

.system-system-peach-onboarding .po-body-xs {
  font-size: var(--po-font-size-50);
  font-weight: var(--po-font-weight-regular);
  line-height: var(--po-line-height-md);
  color: var(--po-text-secondary);
}

.system-system-peach-onboarding .po-detail {
  font-size: var(--po-font-size-50);
  font-weight: var(--po-font-weight-semibold);
  line-height: var(--po-line-height-sm);
  letter-spacing: var(--po-letter-spacing-md);
  text-transform: uppercase;
  color: var(--po-text-secondary);
}

.system-system-peach-onboarding .po-code {
  font-family: var(--po-font-family-code);
  font-size: var(--po-font-size-75);
  font-weight: var(--po-font-weight-regular);
  line-height: var(--po-line-height-md);
  color: var(--po-text-primary);
  background: var(--po-gray-200);
  padding: var(--po-spacing-25) var(--po-spacing-50);
  border-radius: var(--po-radius-xs);
}


/* =============================================================================
   4. COMPONENTS
   ============================================================================= */

/* ---------------------------------------------------------------------------
   4.1  Onboarding Shell (.po-onboarding-shell)
   Centered 640px max-width container for the full onboarding flow.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-onboarding-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--po-space-6) var(--po-space-4);
  padding-bottom: var(--po-space-12);
}


/* ---------------------------------------------------------------------------
   4.2  Onboarding Header (.po-onboarding-header)
   Title + subtitle at the top of the onboarding flow.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-onboarding-header {
  text-align: center;
  margin-bottom: var(--po-space-8);
}

.system-system-peach-onboarding .po-onboarding-header__logo {
  display: block;
  max-width: 300px;
  height: auto;
  margin: 0 auto var(--po-space-4);
}

.system-system-peach-onboarding .po-onboarding-header__title {
  font: 800 2rem/1.2 var(--po-font-family-heading);
  color: var(--po-text-primary);
}

.system-system-peach-onboarding .po-onboarding-header__subtitle {
  font: var(--po-text-md);
  color: var(--po-text-secondary);
}


/* ---------------------------------------------------------------------------
   4.3  Step Indicator (.po-steps, .po-step)
   Multi-step progress with dots, labels, connecting lines, active/done states.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  margin-bottom: var(--po-space-6);
}

.system-system-peach-onboarding .po-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
  cursor: default;
}

/* Connecting line between steps */
.system-system-peach-onboarding .po-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: var(--po-border-default);
  z-index: 0;
}

.system-system-peach-onboarding .po-step--done:not(:last-child)::after {
  background: var(--po-color-primary);
}

.system-system-peach-onboarding .po-step__dot {
  width: 36px;
  height: 36px;
  border-radius: var(--po-radius-pill);
  border: 2px solid var(--po-border-default);
  background: var(--po-bg-layer-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--po-text-tertiary);
  z-index: 1;
  transition: all var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-step--active .po-step__dot {
  background: var(--po-color-primary);
  border-color: var(--po-color-primary);
  color: var(--po-color-on-primary);
  box-shadow: var(--po-shadow-sm);
}

.system-system-peach-onboarding .po-step--done .po-step__dot {
  background: var(--po-color-secondary);
  border-color: var(--po-color-secondary);
  color: var(--po-color-on-primary);
}

.system-system-peach-onboarding .po-step__label {
  font: var(--po-caption);
  color: var(--po-text-tertiary);
  text-align: center;
  font-weight: 500;
}

.system-system-peach-onboarding .po-step--active .po-step__label {
  color: var(--po-text-primary);
  font-weight: 600;
}

.system-system-peach-onboarding .po-step--done .po-step__label {
  color: var(--po-color-secondary);
}


/* ---------------------------------------------------------------------------
   4.4  Progress Bar (.po-progress, .po-progress__bar)
   Thin animated progress bar with bounce easing.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-progress-section {
  margin-bottom: var(--po-space-6);
}

.system-system-peach-onboarding .po-progress-label {
  display: block;
  font: var(--po-label);
  color: var(--po-text-secondary);
  margin-bottom: var(--po-space-2);
}

.system-system-peach-onboarding .po-progress {
  width: 100%;
  height: 8px;
  border-radius: var(--po-radius-pill);
  background: var(--po-bg-alt);
  overflow: hidden;
}

.system-system-peach-onboarding .po-progress__bar {
  height: 100%;
  border-radius: var(--po-radius-pill);
  background: var(--po-color-primary);
  transition: width var(--po-duration-slow) var(--po-easing-bounce);
}


/* ---------------------------------------------------------------------------
   4.5  Form Step (.po-form-step)
   Card container with title, description, fields, and actions.
   Slides in with animation.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-form-step {
  background: var(--po-bg-layer-1);
  border-radius: var(--po-radius-xl);
  box-shadow: var(--po-shadow-lg);
  padding: var(--po-space-8) var(--po-space-6);
  animation: po-step-in var(--po-duration-slow) var(--po-easing) both;
}

.system-system-peach-onboarding .po-form-step__title {
  font: var(--po-text-3xl);
  color: var(--po-text-primary);
  margin: 0 0 var(--po-space-2);
}

.system-system-peach-onboarding .po-form-step__description {
  font: var(--po-text-md);
  color: var(--po-text-secondary);
  margin: 0 0 var(--po-space-8);
}

.system-system-peach-onboarding .po-form-step__fields {
  display: flex;
  flex-direction: column;
  gap: var(--po-space-4);
}

.system-system-peach-onboarding .po-form-step__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--po-space-4);
  margin-top: var(--po-space-8);
}


/* ---------------------------------------------------------------------------
   4.6  Form Fields (.po-field)
   Field wrapper with label, hint text, and error message.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-field {
  display: flex;
  flex-direction: column;
  gap: var(--po-space-2);
}

.system-system-peach-onboarding .po-field__label {
  font: var(--po-label);
  color: var(--po-text-primary);
  padding-left: var(--po-space-1);
}

.system-system-peach-onboarding .po-field__hint {
  font: var(--po-caption);
  color: var(--po-text-tertiary);
  padding-left: var(--po-space-1);
}

.system-system-peach-onboarding .po-field__error {
  font: var(--po-caption);
  color: var(--po-color-negative);
  padding-left: var(--po-space-1);
  min-height: 0;
}

.system-system-peach-onboarding .po-field__error:empty {
  display: none;
}

.system-system-peach-onboarding .po-required {
  color: var(--po-color-negative);
}


/* ---------------------------------------------------------------------------
   4.7  Input (.po-input)
   52px height text input with all states. Plus textarea and select variants.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-input {
  width: 100%;
  height: 52px;
  padding: 14px 18px;
  border: 2px solid var(--po-border-default);
  border-radius: var(--po-radius-md);
  background: var(--po-bg-layer-1);
  color: var(--po-text-primary);
  font: var(--po-text-base);
  outline: none;
  transition:
    border-color var(--po-duration-normal) var(--po-easing),
    box-shadow var(--po-duration-normal) var(--po-easing),
    background var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-input::placeholder {
  color: var(--po-text-tertiary);
}

.system-system-peach-onboarding .po-input:hover {
  border-color: var(--po-text-tertiary);
}

.system-system-peach-onboarding .po-input:focus {
  border-color: var(--po-color-primary);
  box-shadow: 0 0 0 3px var(--po-color-primary-muted), var(--po-shadow-sm);
}

.system-system-peach-onboarding .po-input--error {
  border-color: var(--po-color-negative);
}

.system-system-peach-onboarding .po-input--error:focus {
  border-color: var(--po-color-negative);
  box-shadow: 0 0 0 3px var(--po-color-negative-muted);
}

.system-system-peach-onboarding .po-input:disabled {
  background: var(--po-bg-disabled);
  color: var(--po-text-disabled);
  cursor: not-allowed;
  border-color: var(--po-border-disabled);
}

/* Textarea */
.system-system-peach-onboarding textarea.po-input {
  height: auto;
  min-height: 120px;
  resize: vertical;
}

/* Select */
.system-system-peach-onboarding select.po-input {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6577' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  cursor: pointer;
}


/* ---------------------------------------------------------------------------
   4.8  Form Row (.po-form-row)
   Stacked layout helper for grouping fields.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-form-row {
  display: flex;
  flex-direction: column;
  gap: var(--po-space-4);
}


/* ---------------------------------------------------------------------------
   4.9  Fieldset (.po-fieldset)
   Grouped fields with legend styling.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-fieldset {
  border: 1px solid var(--po-border-light);
  border-radius: var(--po-radius-lg);
  padding: var(--po-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--po-space-4);
}

.system-system-peach-onboarding .po-fieldset__legend {
  font: var(--po-text-md);
  font-weight: 700;
  color: var(--po-text-primary);
  padding: 0 var(--po-space-2);
}


/* ---------------------------------------------------------------------------
   4.10  Checkbox / Radio (.po-check)
   24px custom checkbox with animated checkmark.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-check {
  display: inline-flex;
  align-items: center;
  gap: var(--po-space-3);
  cursor: pointer;
  font: var(--po-text-base);
  color: var(--po-text-primary);
}

.system-system-peach-onboarding .po-check__input {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--po-border-default);
  border-radius: var(--po-radius-sm);
  background: var(--po-bg-layer-1);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition:
    border-color var(--po-duration-normal) var(--po-easing),
    background var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-check__input:checked {
  background: var(--po-color-primary);
  border-color: var(--po-color-primary);
}

.system-system-peach-onboarding .po-check__input:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 11px;
  border-right: 2.5px solid var(--po-color-on-primary);
  border-bottom: 2.5px solid var(--po-color-on-primary);
}

.system-system-peach-onboarding .po-check__input:focus-visible {
  box-shadow: var(--po-shadow-focus-ring);
}

.system-system-peach-onboarding .po-check__input:hover {
  border-color: var(--po-color-primary);
}

.system-system-peach-onboarding .po-check__input:disabled {
  background: var(--po-bg-disabled);
  border-color: var(--po-border-disabled);
  cursor: not-allowed;
}

.system-system-peach-onboarding .po-check-field {
  display: flex;
  flex-direction: column;
  gap: var(--po-space-2);
}


/* ---------------------------------------------------------------------------
   4.11  Toggle (.po-toggle)
   52x28px toggle switch with bounce animation.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--po-space-4);
  padding: var(--po-space-4) 0;
  border-bottom: 1px solid var(--po-border-light);
  cursor: pointer;
  user-select: none;
}

.system-system-peach-onboarding .po-toggle-wrap:last-child {
  border-bottom: none;
}

.system-system-peach-onboarding .po-toggle-info__title {
  font: var(--po-text-md);
  font-weight: 600;
  color: var(--po-text-primary);
  margin: 0;
}

.system-system-peach-onboarding .po-toggle-info__desc {
  font: var(--po-text-sm);
  color: var(--po-text-secondary);
  margin: 2px 0 0;
}

.system-system-peach-onboarding .po-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}

.system-system-peach-onboarding .po-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.system-system-peach-onboarding .po-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--po-border-default);
  border-radius: var(--po-radius-pill);
  transition: background var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: var(--po-bg-layer-1);
  border-radius: var(--po-radius-pill);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform var(--po-duration-normal) var(--po-easing-bounce);
}

.system-system-peach-onboarding .po-toggle input:checked ~ .po-toggle__track {
  background: var(--po-color-primary);
}

.system-system-peach-onboarding .po-toggle input:checked ~ .po-toggle__thumb {
  transform: translateX(24px);
}

.system-system-peach-onboarding .po-toggle input:focus-visible ~ .po-toggle__track {
  box-shadow: var(--po-shadow-focus-ring);
}

.system-system-peach-onboarding .po-toggle input:disabled ~ .po-toggle__track {
  background: var(--po-bg-disabled);
  cursor: not-allowed;
}

.system-system-peach-onboarding .po-toggle input:disabled ~ .po-toggle__thumb {
  background: var(--po-gray-300);
  cursor: not-allowed;
}


/* ---------------------------------------------------------------------------
   4.12  Button (.po-btn)
   52px min-height, pill radius, primary/secondary/nav/large variants.
   Loading state with spinner.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--po-space-2);
  min-height: 52px;
  padding: 14px 32px;
  border: 2px solid transparent;
  border-radius: var(--po-radius-pill);
  background: var(--po-bg-layer-1);
  box-shadow: var(--po-shadow-sm);
  color: var(--po-text-primary);
  font-family: var(--po-font-family);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  outline: none;
  user-select: none;
  text-decoration: none;
  transition:
    box-shadow var(--po-duration-normal) var(--po-easing),
    background var(--po-duration-normal) var(--po-easing),
    color var(--po-duration-normal) var(--po-easing),
    transform var(--po-duration-normal) var(--po-easing-bounce),
    border-color var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-btn:hover {
  box-shadow: var(--po-shadow-md);
  transform: scale(1.015);
}

.system-system-peach-onboarding .po-btn:active {
  box-shadow: var(--po-shadow-sm);
  transform: scale(0.98);
}

.system-system-peach-onboarding .po-btn:focus-visible {
  box-shadow: var(--po-shadow-sm), var(--po-shadow-focus-ring);
}

.system-system-peach-onboarding .po-btn:disabled,
.system-system-peach-onboarding .po-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Primary */
.system-system-peach-onboarding .po-btn--primary {
  background: var(--po-color-primary);
  color: var(--po-color-on-primary);
}

.system-system-peach-onboarding .po-btn--primary:hover {
  background: var(--po-color-primary-hover);
  box-shadow: var(--po-shadow-md);
}

.system-system-peach-onboarding .po-btn--primary:active {
  background: var(--po-color-primary-active);
}

/* Secondary */
.system-system-peach-onboarding .po-btn--secondary {
  background: transparent;
  border-color: var(--po-border-default);
  color: var(--po-text-primary);
  box-shadow: none;
}

.system-system-peach-onboarding .po-btn--secondary:hover {
  border-color: var(--po-color-primary);
  color: var(--po-color-primary);
  background: var(--po-color-primary-light);
  box-shadow: none;
}

.system-system-peach-onboarding .po-btn--secondary:active {
  background: var(--po-color-primary-muted);
}

/* Nav buttons — equal width for Back/Next */
.system-system-peach-onboarding .po-btn--nav {
  min-width: 160px;
}

/* Large */
.system-system-peach-onboarding .po-btn--lg {
  min-height: 60px;
  padding: 18px 40px;
  font-size: 1.125rem;
  font-weight: 700;
}

/* Loading state */
.system-system-peach-onboarding .po-btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.system-system-peach-onboarding .po-btn--loading::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 3px solid var(--po-color-on-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: po-spin 0.7s linear infinite;
}

/* Danger variant */
.system-system-peach-onboarding .po-btn--danger {
  background: var(--po-color-negative);
  color: var(--po-color-on-primary);
}

.system-system-peach-onboarding .po-btn--danger:hover {
  background: var(--po-color-negative-hover);
}

.system-system-peach-onboarding .po-btn--danger:active {
  background: var(--po-color-negative-active);
}

/* Ghost variant — no background, no border */
.system-system-peach-onboarding .po-btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--po-color-primary);
}

.system-system-peach-onboarding .po-btn--ghost:hover {
  background: var(--po-color-primary-light);
  box-shadow: none;
}

.system-system-peach-onboarding .po-btn--ghost:active {
  background: var(--po-color-primary-muted);
}

/* Icon button */
.system-system-peach-onboarding .po-btn--icon {
  min-height: 40px;
  min-width: 40px;
  padding: 8px;
}

.system-system-peach-onboarding .po-btn--icon svg {
  width: 20px;
  height: 20px;
}

/* Button group */
.system-system-peach-onboarding .po-btn-group {
  display: flex;
  gap: var(--po-space-3);
  align-items: center;
}


/* ---------------------------------------------------------------------------
   4.13  Alert (.po-alert)
   Info and success variants with left border accent.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--po-space-3);
  padding: var(--po-space-4) var(--po-space-5);
  border: 1px solid var(--po-border-light);
  border-left: 4px solid var(--po-color-informative);
  border-radius: var(--po-radius-md);
  background: var(--po-bg-layer-1);
  color: var(--po-text-primary);
  font: var(--po-text-base);
}

.system-system-peach-onboarding .po-alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--po-color-informative);
}

.system-system-peach-onboarding .po-alert__icon svg {
  width: 100%;
  height: 100%;
}

.system-system-peach-onboarding .po-alert__content {
  flex: 1;
  min-width: 0;
}

.system-system-peach-onboarding .po-alert__title {
  font: var(--po-text-md);
  font-weight: 600;
  color: var(--po-text-primary);
  margin-bottom: var(--po-space-1);
}

.system-system-peach-onboarding .po-alert__message {
  font: var(--po-text-sm);
  color: var(--po-text-secondary);
  line-height: 1.6;
}

/* Info variant */
.system-system-peach-onboarding .po-alert--info {
  border-left-color: var(--po-color-informative);
  background: var(--po-color-informative-light);
}

/* Success variant */
.system-system-peach-onboarding .po-alert--success {
  border-left-color: var(--po-color-positive);
  background: var(--po-color-positive-light);
}

.system-system-peach-onboarding .po-alert--success .po-alert__icon {
  color: var(--po-color-positive);
}

/* Warning variant */
.system-system-peach-onboarding .po-alert--warning {
  border-left-color: var(--po-color-notice);
  background: var(--po-color-notice-light);
}

.system-system-peach-onboarding .po-alert--warning .po-alert__icon {
  color: var(--po-color-notice);
}

/* Error variant */
.system-system-peach-onboarding .po-alert--error {
  border-left-color: var(--po-color-negative);
  background: var(--po-color-negative-light);
}

.system-system-peach-onboarding .po-alert--error .po-alert__icon {
  color: var(--po-color-negative);
}

/* Dismissible close button */
.system-system-peach-onboarding .po-alert__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--po-text-tertiary);
  border-radius: var(--po-radius-xs);
  cursor: pointer;
  transition: background-color var(--po-duration-100) var(--po-ease-out);
}

.system-system-peach-onboarding .po-alert__close:hover {
  background-color: var(--po-hover-overlay);
  color: var(--po-text-primary);
}

.system-system-peach-onboarding .po-alert__close svg {
  width: 14px;
  height: 14px;
}


/* ---------------------------------------------------------------------------
   4.14  Confirmation Screen (.po-confirmation)
   Success header with gradient, summary rows, next steps, and actions.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-confirmation {
  background: var(--po-bg-layer-1);
  border-radius: var(--po-radius-xl);
  box-shadow: var(--po-shadow-md);
  overflow: hidden;
  animation: po-step-in var(--po-duration-slow) var(--po-easing) both;
}

.system-system-peach-onboarding .po-confirmation__header {
  text-align: center;
  padding: var(--po-space-10) var(--po-space-6) var(--po-space-8);
  background: linear-gradient(180deg, var(--po-color-positive-light) 0%, var(--po-bg-layer-1) 100%);
}

.system-system-peach-onboarding .po-confirmation__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--po-space-5);
  background: var(--po-color-positive);
  border-radius: var(--po-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--po-color-on-primary);
  box-shadow: 0 4px 16px rgba(24, 181, 168, 0.25);
}

.system-system-peach-onboarding .po-confirmation__icon svg {
  width: 40px;
  height: 40px;
}

.system-system-peach-onboarding .po-confirmation__title {
  font: 800 2rem/1.2 var(--po-font-family-heading);
  color: var(--po-text-primary);
  margin: 0 0 var(--po-space-3);
}

.system-system-peach-onboarding .po-confirmation__subtitle {
  font: var(--po-text-md);
  color: var(--po-text-secondary);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.6;
}

.system-system-peach-onboarding .po-confirmation__summary {
  padding: 0 var(--po-space-6);
  margin: 0 var(--po-space-6);
  border: 1px solid var(--po-border-light);
  border-radius: var(--po-radius-lg);
  background: var(--po-bg-default);
}

.system-system-peach-onboarding .po-confirmation__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--po-space-4) 0;
  border-bottom: 1px solid var(--po-border-light);
}

.system-system-peach-onboarding .po-confirmation__row:last-child {
  border-bottom: none;
}

.system-system-peach-onboarding .po-confirmation__label {
  font: var(--po-text-sm);
  color: var(--po-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.system-system-peach-onboarding .po-confirmation__value {
  font: var(--po-text-md);
  font-weight: 600;
  color: var(--po-text-primary);
  text-align: right;
}

.system-system-peach-onboarding .po-confirmation__next {
  padding: var(--po-space-8) var(--po-space-6) var(--po-space-4);
}

.system-system-peach-onboarding .po-confirmation__next-title {
  font: var(--po-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--po-color-primary);
  margin: 0 0 var(--po-space-5);
}

.system-system-peach-onboarding .po-confirmation__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--po-space-4);
}

.system-system-peach-onboarding .po-confirmation__step {
  display: flex;
  align-items: center;
  gap: var(--po-space-4);
  font: var(--po-text-md);
  color: var(--po-text-primary);
}

.system-system-peach-onboarding .po-confirmation__step-dot {
  width: 32px;
  height: 32px;
  border-radius: var(--po-radius-pill);
  background: var(--po-color-primary-light);
  color: var(--po-color-primary);
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.system-system-peach-onboarding .po-confirmation__actions {
  padding: var(--po-space-6);
}


/* ---------------------------------------------------------------------------
   4.15  Consent Block (.po-consent)
   Bordered container with checkbox, timestamp, and checked state.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-consent {
  padding: var(--po-space-5);
  border: 2px solid var(--po-border-default);
  border-radius: var(--po-radius-md);
  background: var(--po-bg-layer-1);
  transition:
    border-color var(--po-duration-normal) var(--po-easing),
    background var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-consent--checked {
  border-color: var(--po-color-positive);
  border-left-width: 4px;
  background: var(--po-color-positive-light);
  box-shadow: 0 0 0 1px var(--po-color-positive-muted);
}

.system-system-peach-onboarding .po-consent__text {
  font: var(--po-text-base);
  color: var(--po-text-secondary);
  margin: 0 0 var(--po-space-4);
  line-height: 1.7;
}

.system-system-peach-onboarding .po-consent__check {
  display: flex;
  align-items: center;
  gap: var(--po-space-3);
  cursor: pointer;
}

.system-system-peach-onboarding .po-consent__input {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--po-border-default);
  border-radius: var(--po-radius-sm);
  background: var(--po-bg-layer-1);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition:
    border-color var(--po-duration-normal) var(--po-easing),
    background var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-consent__input:checked {
  background: var(--po-color-positive);
  border-color: var(--po-color-positive);
}

.system-system-peach-onboarding .po-consent__input:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 11px;
  border-right: 2.5px solid var(--po-color-on-primary);
  border-bottom: 2.5px solid var(--po-color-on-primary);
}

.system-system-peach-onboarding .po-consent__input:focus-visible {
  box-shadow: var(--po-shadow-focus-ring);
}

.system-system-peach-onboarding .po-consent__input:hover {
  border-color: var(--po-color-positive);
}

.system-system-peach-onboarding .po-consent__label {
  font: var(--po-text-md);
  font-weight: 600;
  color: var(--po-text-primary);
}

.system-system-peach-onboarding .po-consent__timestamp {
  font: var(--po-caption);
  color: var(--po-text-tertiary);
  margin-top: var(--po-space-3);
}

.system-system-peach-onboarding .po-consent__timestamp:empty {
  display: none;
}


/* ---------------------------------------------------------------------------
   4.16  Choice Button (.po-choice)
   Large selectable cards with radio indicator, selected state, group layouts.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-choice {
  display: flex;
  align-items: center;
  gap: var(--po-space-4);
  min-height: 52px;
  padding: var(--po-space-3) var(--po-space-5);
  border: 2px solid var(--po-border-default);
  border-radius: var(--po-radius-lg);
  background: var(--po-bg-layer-1);
  color: var(--po-text-primary);
  font: var(--po-text-md);
  cursor: pointer;
  outline: none;
  transition:
    border-color var(--po-duration-normal) var(--po-easing),
    background var(--po-duration-normal) var(--po-easing),
    box-shadow var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-choice__label {
  font: var(--po-text-md);
  font-weight: 600;
  color: var(--po-text-primary);
  flex: 1;
  text-align: left;
}

.system-system-peach-onboarding .po-choice__indicator {
  width: 24px;
  height: 24px;
  border: 2px solid var(--po-border-default);
  border-radius: var(--po-radius-pill);
  flex-shrink: 0;
  position: relative;
  transition:
    border-color var(--po-duration-normal) var(--po-easing),
    background var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-choice:hover {
  border-color: var(--po-color-primary);
  background: var(--po-color-primary-light);
}

.system-system-peach-onboarding .po-choice:focus-visible {
  box-shadow: var(--po-shadow-focus-ring);
}

/* Selected state */
.system-system-peach-onboarding .po-choice--selected {
  border-color: var(--po-color-primary);
  background: var(--po-color-primary-light);
  box-shadow: var(--po-shadow-sm);
}

.system-system-peach-onboarding .po-choice--selected .po-choice__indicator {
  border-color: var(--po-color-primary);
  background: var(--po-color-primary);
}

.system-system-peach-onboarding .po-choice--selected .po-choice__indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: var(--po-radius-pill);
  background: var(--po-color-on-primary);
}

/* Choice content block for label + description */
.system-system-peach-onboarding .po-choice__content {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.system-system-peach-onboarding .po-choice__description {
  font: var(--po-text-sm);
  color: var(--po-text-secondary);
  margin-top: 2px;
  display: block;
}

/* Choice icon */
.system-system-peach-onboarding .po-choice__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--po-color-primary);
}

.system-system-peach-onboarding .po-choice__icon svg {
  width: 100%;
  height: 100%;
}

/* Disabled choice */
.system-system-peach-onboarding .po-choice:disabled,
.system-system-peach-onboarding .po-choice.po-choice--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Group layouts */
.system-system-peach-onboarding .po-choice-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--po-space-3);
}

.system-system-peach-onboarding .po-choice-group--inline {
  display: flex;
  gap: var(--po-space-3);
}

.system-system-peach-onboarding .po-choice-group--inline .po-choice {
  flex: 1;
}

.system-system-peach-onboarding .po-choice-group--stack {
  grid-template-columns: 1fr;
}


/* ---------------------------------------------------------------------------
   4.17  Conditional Reveal (.po-reveal)
   Animated show/hide with left border accent.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-reveal {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height var(--po-duration-slow) var(--po-easing),
    opacity var(--po-duration-normal) var(--po-easing),
    margin var(--po-duration-slow) var(--po-easing);
  margin-top: 0;
}

.system-system-peach-onboarding .po-reveal--open {
  max-height: 500px;
  opacity: 1;
  margin-top: var(--po-space-4);
}

.system-system-peach-onboarding .po-reveal__content {
  padding: var(--po-space-4) var(--po-space-5);
  background: var(--po-bg-default);
  border-left: 3px solid var(--po-color-primary);
  border-radius: 0 var(--po-radius-md) var(--po-radius-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--po-space-4);
}


/* ---------------------------------------------------------------------------
   4.18  Datepicker (.po-datepicker)
   Full calendar dropdown with header nav, weekday labels, day grid,
   today/selected/outside states, footer shortcuts.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-datepicker {
  position: relative;
  width: 100%;
}

.system-system-peach-onboarding .po-datepicker__input {
  width: 100%;
  height: 52px;
  padding: 14px 48px 14px 18px;
  border: 2px solid var(--po-border-default);
  border-radius: var(--po-radius-md);
  background: var(--po-bg-layer-1);
  color: var(--po-text-primary);
  font: var(--po-text-base);
  outline: none;
  cursor: pointer;
  transition:
    border-color var(--po-duration-normal) var(--po-easing),
    box-shadow var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-datepicker__input::placeholder {
  color: var(--po-text-tertiary);
}

.system-system-peach-onboarding .po-datepicker__input:hover {
  border-color: var(--po-text-tertiary);
}

.system-system-peach-onboarding .po-datepicker__input:focus,
.system-system-peach-onboarding .po-datepicker--open .po-datepicker__input {
  border-color: var(--po-color-primary);
  box-shadow: 0 0 0 3px var(--po-color-primary-muted), var(--po-shadow-sm);
}

.system-system-peach-onboarding .po-datepicker__icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--po-text-tertiary);
  pointer-events: none;
}

.system-system-peach-onboarding .po-datepicker__icon svg {
  width: 100%;
  height: 100%;
}

/* Calendar dropdown */
.system-system-peach-onboarding .po-datepicker__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 100;
  width: 320px;
  background: var(--po-bg-layer-1);
  border: 1px solid var(--po-border-light);
  border-radius: var(--po-radius-lg);
  box-shadow: var(--po-shadow-lg);
  padding: var(--po-space-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--po-duration-normal) var(--po-easing),
    transform var(--po-duration-normal) var(--po-easing),
    visibility var(--po-duration-normal);
}

.system-system-peach-onboarding .po-datepicker--open .po-datepicker__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Calendar header with month/year nav */
.system-system-peach-onboarding .po-datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--po-space-1);
  margin-bottom: var(--po-space-3);
}

.system-system-peach-onboarding .po-datepicker__month-label {
  font-family: var(--po-font-family-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--po-text-primary);
}

.system-system-peach-onboarding .po-datepicker__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--po-radius-pill);
  background: transparent;
  color: var(--po-text-secondary);
  cursor: pointer;
  transition:
    background var(--po-duration-fast) var(--po-easing),
    color var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-datepicker__nav:hover {
  background: var(--po-bg-alt);
  color: var(--po-text-primary);
}

.system-system-peach-onboarding .po-datepicker__nav:active {
  background: var(--po-border-default);
}

.system-system-peach-onboarding .po-datepicker__nav:focus-visible {
  box-shadow: var(--po-shadow-focus-ring);
}

.system-system-peach-onboarding .po-datepicker__nav svg {
  width: 18px;
  height: 18px;
}

/* Weekday labels */
.system-system-peach-onboarding .po-datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: var(--po-space-1);
}

.system-system-peach-onboarding .po-datepicker__weekday {
  font: var(--po-caption);
  font-weight: 600;
  color: var(--po-text-tertiary);
  text-align: center;
  padding: var(--po-space-1) 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Day grid */
.system-system-peach-onboarding .po-datepicker__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.system-system-peach-onboarding .po-datepicker__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: none;
  border-radius: var(--po-radius-pill);
  background: transparent;
  color: var(--po-text-primary);
  font-family: var(--po-font-family);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--po-duration-fast) var(--po-easing),
    color var(--po-duration-fast) var(--po-easing),
    transform var(--po-duration-fast) var(--po-easing-bounce);
}

.system-system-peach-onboarding .po-datepicker__day:hover {
  background: var(--po-color-primary-light);
  color: var(--po-color-primary);
  transform: scale(1.08);
}

.system-system-peach-onboarding .po-datepicker__day:focus-visible {
  box-shadow: var(--po-shadow-focus-ring);
}

/* Outside month */
.system-system-peach-onboarding .po-datepicker__day--outside {
  color: var(--po-text-disabled);
}

/* Today */
.system-system-peach-onboarding .po-datepicker__day--today {
  font-weight: 700;
  color: var(--po-color-primary);
  background: var(--po-color-primary-muted);
}

/* Selected */
.system-system-peach-onboarding .po-datepicker__day--selected {
  background: var(--po-color-primary);
  color: var(--po-color-on-primary);
  font-weight: 700;
}

.system-system-peach-onboarding .po-datepicker__day--selected:hover {
  background: var(--po-color-primary-hover);
  color: var(--po-color-on-primary);
}

/* Disabled day */
.system-system-peach-onboarding .po-datepicker__day--disabled {
  color: var(--po-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Calendar footer */
.system-system-peach-onboarding .po-datepicker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--po-space-3);
  padding-top: var(--po-space-3);
  border-top: 1px solid var(--po-border-light);
}

.system-system-peach-onboarding .po-datepicker__shortcut {
  font-family: var(--po-font-family);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--po-color-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--po-space-1) var(--po-space-2);
  border-radius: var(--po-radius-sm);
  transition: background var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-datepicker__shortcut:hover {
  background: var(--po-color-primary-light);
}

.system-system-peach-onboarding .po-datepicker__shortcut:focus-visible {
  box-shadow: var(--po-shadow-focus-ring);
}


/* ---------------------------------------------------------------------------
   4.19  Badge (.po-badge)
   Pill-shaped label for step labels and status indicators.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--po-spacing-50);
  padding: var(--po-spacing-25) var(--po-spacing-100);
  font-family: var(--po-font-family);
  font-size: var(--po-font-size-75);
  font-weight: var(--po-font-weight-semibold);
  line-height: 1;
  border-radius: var(--po-radius-pill);
  white-space: nowrap;
  border: var(--po-border-width-thin) solid transparent;
}

/* Size variants */
.system-system-peach-onboarding .po-badge--sm {
  padding: var(--po-spacing-10) var(--po-spacing-75);
  font-size: var(--po-font-size-50);
}

.system-system-peach-onboarding .po-badge--lg {
  padding: var(--po-spacing-50) var(--po-spacing-150);
  font-size: var(--po-font-size-100);
}

/* Color variants */
.system-system-peach-onboarding .po-badge--neutral {
  background-color: var(--po-gray-200);
  color: var(--po-gray-700);
}

.system-system-peach-onboarding .po-badge--info {
  background-color: var(--po-color-informative-light);
  color: var(--po-color-informative);
}

.system-system-peach-onboarding .po-badge--positive {
  background-color: var(--po-color-positive-light);
  color: var(--po-color-positive);
}

.system-system-peach-onboarding .po-badge--negative {
  background-color: var(--po-color-negative-light);
  color: var(--po-color-negative);
}

.system-system-peach-onboarding .po-badge--notice {
  background-color: var(--po-color-notice-light);
  color: var(--po-color-notice);
}

.system-system-peach-onboarding .po-badge--primary {
  background-color: var(--po-color-primary-light);
  color: var(--po-color-primary);
}

.system-system-peach-onboarding .po-badge--secondary {
  background-color: var(--po-color-secondary-light);
  color: var(--po-color-secondary);
}

.system-system-peach-onboarding .po-badge--sage {
  background-color: var(--po-color-sage-light);
  color: var(--po-color-sage);
}

.system-system-peach-onboarding .po-badge--purple {
  background-color: var(--po-color-purple-light);
  color: var(--po-color-purple);
}

.system-system-peach-onboarding .po-badge--indigo {
  background-color: var(--po-color-indigo-light);
  color: var(--po-color-indigo);
}

/* Filled badge (solid background) */
.system-system-peach-onboarding .po-badge--filled {
  background-color: var(--po-color-primary);
  color: var(--po-color-on-primary);
}

/* Outline badge */
.system-system-peach-onboarding .po-badge--outline {
  background-color: transparent;
  border-color: var(--po-border-default);
  color: var(--po-text-secondary);
}

/* Dot indicator */
.system-system-peach-onboarding .po-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--po-radius-circle);
  background: currentColor;
  flex-shrink: 0;
}


/* ---------------------------------------------------------------------------
   4.20  Tooltip (.po-tooltip)
   Help text on hover, always dark surface.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-tooltip {
  position: absolute;
  z-index: 1000;
  max-width: 220px;
  padding: var(--po-spacing-75) var(--po-spacing-150);
  font-family: var(--po-font-family);
  font-size: var(--po-font-size-75);
  font-weight: var(--po-font-weight-regular);
  line-height: var(--po-line-height-sm);
  color: var(--po-surface-inverted-text);
  background-color: var(--po-surface-inverted);
  border-radius: var(--po-radius-sm);
  pointer-events: none;
  white-space: normal;
  word-wrap: break-word;
}

.system-system-peach-onboarding .po-tooltip__tip {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--po-surface-inverted);
  transform: rotate(45deg);
}

/* Tip placement — bottom (tooltip is above the target) */
.system-system-peach-onboarding .po-tooltip--bottom .po-tooltip__tip {
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
}

/* Tip placement — top (tooltip is below the target) */
.system-system-peach-onboarding .po-tooltip--top .po-tooltip__tip {
  top: -4px;
  left: 50%;
  margin-left: -4px;
}

/* Tip placement — left (tooltip is to the right) */
.system-system-peach-onboarding .po-tooltip--left .po-tooltip__tip {
  left: -4px;
  top: 50%;
  margin-top: -4px;
}

/* Tip placement — right (tooltip is to the left) */
.system-system-peach-onboarding .po-tooltip--right .po-tooltip__tip {
  right: -4px;
  top: 50%;
  margin-top: -4px;
}

/* Semantic color variants */
.system-system-peach-onboarding .po-tooltip--info {
  background-color: var(--po-color-informative);
}

.system-system-peach-onboarding .po-tooltip--info .po-tooltip__tip {
  background-color: var(--po-color-informative);
}

.system-system-peach-onboarding .po-tooltip--positive {
  background-color: var(--po-color-positive);
}

.system-system-peach-onboarding .po-tooltip--positive .po-tooltip__tip {
  background-color: var(--po-color-positive);
}

.system-system-peach-onboarding .po-tooltip--negative {
  background-color: var(--po-color-negative);
}

.system-system-peach-onboarding .po-tooltip--negative .po-tooltip__tip {
  background-color: var(--po-color-negative);
}


/* ---------------------------------------------------------------------------
   4.21  Dialog (.po-dialog)
   Confirmation modals for the onboarding flow.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background-color: var(--po-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: po-fade-in var(--po-duration-300) var(--po-ease-out);
}

.system-system-peach-onboarding .po-dialog {
  position: relative;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  width: 520px;
  max-width: calc(100vw - var(--po-spacing-400));
  max-height: calc(100vh - var(--po-spacing-400));
  background-color: var(--po-bg-layer-1);
  border-radius: var(--po-radius-lg);
  box-shadow: var(--po-shadow-lg);
  overflow: hidden;
  animation: po-dialog-entry var(--po-duration-300) var(--po-ease-bounce);
}

/* Size variants */
.system-system-peach-onboarding .po-dialog--sm {
  width: 400px;
}

.system-system-peach-onboarding .po-dialog--lg {
  width: 680px;
}

.system-system-peach-onboarding .po-dialog__header {
  display: flex;
  align-items: center;
  gap: var(--po-spacing-150);
  padding: var(--po-spacing-300) var(--po-spacing-300) var(--po-spacing-200);
  flex-shrink: 0;
}

.system-system-peach-onboarding .po-dialog__title {
  flex: 1;
  font-family: var(--po-font-family-heading);
  font-size: var(--po-font-size-300);
  font-weight: var(--po-font-weight-bold);
  line-height: var(--po-line-height-sm);
  color: var(--po-text-primary);
  margin: 0;
}

.system-system-peach-onboarding .po-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--po-text-secondary);
  border-radius: var(--po-radius-sm);
  cursor: pointer;
  transition: background-color var(--po-duration-100) var(--po-ease-out);
}

.system-system-peach-onboarding .po-dialog__close:hover {
  background-color: var(--po-gray-200);
}

.system-system-peach-onboarding .po-dialog__close:focus-visible {
  box-shadow: var(--po-shadow-focus-ring);
  outline: none;
}

.system-system-peach-onboarding .po-dialog__close svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.system-system-peach-onboarding .po-dialog__divider {
  height: 1px;
  background-color: var(--po-gray-200);
  border: none;
  margin: 0;
  flex-shrink: 0;
}

.system-system-peach-onboarding .po-dialog__content {
  flex: 1;
  padding: var(--po-spacing-200) var(--po-spacing-300);
  overflow-y: auto;
  font-size: var(--po-font-size-100);
  line-height: var(--po-line-height-md);
  color: var(--po-text-secondary);
}

.system-system-peach-onboarding .po-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--po-spacing-100);
  padding: var(--po-spacing-200) var(--po-spacing-300) var(--po-spacing-300);
  flex-shrink: 0;
}

/* Alert dialog — warning */
.system-system-peach-onboarding .po-dialog--warning .po-dialog__header::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: var(--po-color-notice);
  border-radius: var(--po-radius-circle);
}

/* Alert dialog — danger */
.system-system-peach-onboarding .po-dialog--danger .po-dialog__header::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: var(--po-color-negative);
  border-radius: var(--po-radius-circle);
}


/* ---------------------------------------------------------------------------
   4.22  Spinner (.po-spinner)
   Standalone loading indicator.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  animation: po-spinner-rotate 1s linear infinite;
}

.system-system-peach-onboarding .po-spinner svg {
  width: 100%;
  height: 100%;
}

.system-system-peach-onboarding .po-spinner__track {
  fill: none;
  stroke: var(--po-gray-200);
  stroke-width: 3;
}

.system-system-peach-onboarding .po-spinner__fill {
  fill: none;
  stroke: var(--po-color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 60;
}

/* Size variants */
.system-system-peach-onboarding .po-spinner--sm {
  width: 16px;
  height: 16px;
}

.system-system-peach-onboarding .po-spinner--lg {
  width: 64px;
  height: 64px;
}

/* Over-background variant (e.g. on primary-colored surfaces) */
.system-system-peach-onboarding .po-spinner--over-background .po-spinner__track {
  stroke: rgba(255, 255, 255, 0.2);
}

.system-system-peach-onboarding .po-spinner--over-background .po-spinner__fill {
  stroke: var(--po-color-static-white);
}

/* CSS-only spinner variant (no SVG needed) */
.system-system-peach-onboarding .po-spinner--css {
  width: 32px;
  height: 32px;
  border: 3px solid var(--po-gray-200);
  border-top-color: var(--po-color-primary);
  border-radius: 50%;
  animation: po-spin 0.7s linear infinite;
}

.system-system-peach-onboarding .po-spinner--css.po-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.system-system-peach-onboarding .po-spinner--css.po-spinner--lg {
  width: 64px;
  height: 64px;
  border-width: 4px;
}


/* ---------------------------------------------------------------------------
   4.23  Divider (.po-divider)
   Section separator, horizontal and vertical.
   --------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-divider {
  border: none;
  background-color: var(--po-gray-200);
  margin: 0;
  width: 100%;
  height: 1px;
}

.system-system-peach-onboarding .po-divider--sm {
  height: 2px;
}

.system-system-peach-onboarding .po-divider--md {
  height: 4px;
}

.system-system-peach-onboarding .po-divider--lg {
  height: 8px;
}

/* Vertical */
.system-system-peach-onboarding .po-divider--vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
}

.system-system-peach-onboarding .po-divider--vertical.po-divider--sm {
  width: 2px;
  height: auto;
}

.system-system-peach-onboarding .po-divider--vertical.po-divider--md {
  width: 4px;
  height: auto;
}

/* Spaced variant */
.system-system-peach-onboarding .po-divider--spaced {
  margin: var(--po-spacing-200) 0;
}

/* Accent variant — uses primary color */
.system-system-peach-onboarding .po-divider--accent {
  background-color: var(--po-color-primary);
  height: 3px;
  border-radius: var(--po-radius-pill);
}


/* =============================================================================
   4b. EXTENDED COMPONENTS
   Converted from _onboarding.scss (pch- -> po-, flattened, scoped)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Signature Pad — draw-to-sign with canvas, baseline, type-to-sign fallback
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-signature {
  display: flex;
  flex-direction: column;
  gap: var(--po-space-3);
  width: 100%;
}

.system-system-peach-onboarding .po-signature__canvas-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  border: 2px solid var(--po-border-default);
  border-radius: var(--po-radius-md);
  background: var(--po-bg-layer-1);
  overflow: hidden;
  cursor: crosshair;
  transition: border-color var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-signature__canvas-wrap:hover {
  border-color: var(--po-text-tertiary);
}

.system-system-peach-onboarding .po-signature__canvas-wrap--active {
  border-color: var(--po-color-primary);
  box-shadow: 0 0 0 3px var(--po-color-primary-muted);
}

.system-system-peach-onboarding .po-signature__canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.system-system-peach-onboarding .po-signature__baseline {
  position: absolute;
  bottom: 40px;
  left: 24px;
  right: 24px;
  height: 1px;
  background: var(--po-border-light);
  pointer-events: none;
}

.system-system-peach-onboarding .po-signature__baseline::before {
  content: '\00D7';
  position: absolute;
  left: 0;
  top: -10px;
  color: var(--po-text-tertiary);
  font-size: 0.875rem;
}

.system-system-peach-onboarding .po-signature__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--po-text-tertiary);
  font: var(--po-text-sm);
  pointer-events: none;
}

.system-system-peach-onboarding .po-signature__actions {
  display: flex;
  align-items: center;
  gap: var(--po-space-2);
}

.system-system-peach-onboarding .po-signature__tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--po-border-light);
  margin-bottom: var(--po-space-3);
}

.system-system-peach-onboarding .po-signature__tab {
  padding: 8px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  color: var(--po-text-secondary);
  font: var(--po-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition:
    color var(--po-duration-fast) var(--po-easing),
    border-color var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-signature__tab:hover {
  color: var(--po-text-primary);
}

.system-system-peach-onboarding .po-signature__tab--active {
  color: var(--po-color-primary);
  border-bottom-color: var(--po-color-primary);
  font-weight: 600;
}

.system-system-peach-onboarding .po-signature__type-input {
  width: 100%;
  height: 80px;
  padding: 16px 24px;
  border: 2px solid var(--po-border-default);
  border-radius: var(--po-radius-md);
  background: var(--po-bg-layer-1);
  color: var(--po-text-primary);
  font-family: 'Dancing Script', cursive, var(--po-font-family);
  font-size: 1.75rem;
  text-align: center;
  outline: none;
  transition: border-color var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-signature__type-input:focus {
  border-color: var(--po-color-primary);
  box-shadow: 0 0 0 3px var(--po-color-primary-muted);
}

.system-system-peach-onboarding .po-signature__type-input::placeholder {
  color: var(--po-text-disabled);
}


/* -----------------------------------------------------------------------------
   File Upload / Document Preview
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-doc-preview {
  display: flex;
  align-items: center;
  gap: var(--po-space-4);
  padding: var(--po-space-4);
  background: var(--po-bg-layer-1);
  border: 1px solid var(--po-border-light);
  border-radius: var(--po-radius-md);
  transition: border-color var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-doc-preview:hover {
  border-color: var(--po-border-default);
}

.system-system-peach-onboarding .po-doc-preview__thumb {
  width: 56px;
  height: 72px;
  border-radius: var(--po-radius-sm);
  background: var(--po-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.system-system-peach-onboarding .po-doc-preview__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.system-system-peach-onboarding .po-doc-preview__thumb--pdf {
  background: var(--po-color-negative-light);
  color: var(--po-color-negative);
  font-size: 0.75rem;
  font-weight: 700;
}

.system-system-peach-onboarding .po-doc-preview__thumb--img {
  background: var(--po-color-secondary-light);
  color: var(--po-color-secondary);
  font-size: 0.75rem;
  font-weight: 700;
}

.system-system-peach-onboarding .po-doc-preview__info {
  flex: 1;
  min-width: 0;
}

.system-system-peach-onboarding .po-doc-preview__name {
  font: var(--po-text-md);
  font-weight: 600;
  color: var(--po-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.system-system-peach-onboarding .po-doc-preview__meta {
  font: var(--po-caption);
  color: var(--po-text-tertiary);
  margin-top: 2px;
}

.system-system-peach-onboarding .po-doc-preview__actions {
  display: flex;
  gap: var(--po-space-2);
  flex-shrink: 0;
}


/* -----------------------------------------------------------------------------
   Dropzone
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--po-space-3);
  min-height: 180px;
  padding: var(--po-space-8) var(--po-space-6);
  border: 2px dashed var(--po-border-default);
  border-radius: var(--po-radius-lg);
  background: var(--po-bg-layer-1);
  cursor: pointer;
  transition:
    border-color var(--po-duration-normal) var(--po-easing),
    background var(--po-duration-normal) var(--po-easing),
    transform var(--po-duration-normal) var(--po-easing-bounce);
}

.system-system-peach-onboarding .po-dropzone:hover {
  border-color: var(--po-primary);
  background: var(--po-primary-light);
}

.system-system-peach-onboarding .po-dropzone--active {
  border-color: var(--po-primary);
  background: var(--po-primary-light);
  border-style: solid;
  transform: scale(1.01);
}

.system-system-peach-onboarding .po-dropzone--error {
  border-color: var(--po-color-negative);
  background: var(--po-color-negative-light);
}

.system-system-peach-onboarding .po-dropzone--success {
  border-color: var(--po-color-positive);
  background: var(--po-color-positive-light);
}

.system-system-peach-onboarding .po-dropzone__icon {
  width: 48px;
  height: 48px;
  color: var(--po-text-tertiary);
  transition: color var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-dropzone:hover .po-dropzone__icon,
.system-system-peach-onboarding .po-dropzone--active .po-dropzone__icon {
  color: var(--po-primary);
}

.system-system-peach-onboarding .po-dropzone__text {
  text-align: center;
}

.system-system-peach-onboarding .po-dropzone__title {
  font: var(--po-text-md);
  font-weight: 600;
  color: var(--po-text-primary);
  margin: 0;
}

.system-system-peach-onboarding .po-dropzone__title span {
  color: var(--po-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.system-system-peach-onboarding .po-dropzone__hint {
  font: var(--po-caption);
  color: var(--po-text-tertiary);
  margin: var(--po-space-1) 0 0;
}

.system-system-peach-onboarding .po-dropzone input[type="file"] {
  display: none;
}


/* -----------------------------------------------------------------------------
   File List
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--po-space-2);
  margin-top: var(--po-space-3);
}

.system-system-peach-onboarding .po-file-item {
  display: flex;
  align-items: center;
  gap: var(--po-space-3);
  padding: var(--po-space-3) var(--po-space-4);
  background: var(--po-bg-layer-1);
  border: 1px solid var(--po-border-light);
  border-radius: var(--po-radius-md);
  transition: border-color var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-file-item:hover {
  border-color: var(--po-border-default);
}

.system-system-peach-onboarding .po-file-item__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--po-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.system-system-peach-onboarding .po-file-item__icon--pdf {
  background: var(--po-color-negative-light);
  color: var(--po-color-negative);
}

.system-system-peach-onboarding .po-file-item__icon--img {
  background: var(--po-color-secondary-light);
  color: var(--po-color-secondary);
}

.system-system-peach-onboarding .po-file-item__icon--doc {
  background: var(--po-color-info-light);
  color: var(--po-color-info);
}

.system-system-peach-onboarding .po-file-item__icon--generic {
  background: var(--po-bg-alt);
  color: var(--po-text-secondary);
}

.system-system-peach-onboarding .po-file-item__thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--po-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.system-system-peach-onboarding .po-file-item__info {
  flex: 1;
  min-width: 0;
}

.system-system-peach-onboarding .po-file-item__name {
  font: var(--po-text-sm);
  font-weight: 500;
  color: var(--po-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.system-system-peach-onboarding .po-file-item__meta {
  font: var(--po-caption);
  color: var(--po-text-tertiary);
  margin-top: 2px;
}

.system-system-peach-onboarding .po-file-item__progress {
  flex: 1;
  min-width: 0;
}

.system-system-peach-onboarding .po-file-item__progress-bar {
  height: 4px;
  background: var(--po-bg-alt);
  border-radius: var(--po-radius-full);
  overflow: hidden;
  margin-top: 6px;
}

.system-system-peach-onboarding .po-file-item__progress-fill {
  height: 100%;
  background: var(--po-primary);
  border-radius: var(--po-radius-full);
  transition: width var(--po-duration-slow) var(--po-easing);
}

.system-system-peach-onboarding .po-file-item__progress-text {
  font: var(--po-caption);
  color: var(--po-text-tertiary);
  margin-top: 4px;
}

.system-system-peach-onboarding .po-file-item__status {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--po-radius-full);
}

.system-system-peach-onboarding .po-file-item__status--done {
  color: var(--po-color-positive);
}

.system-system-peach-onboarding .po-file-item__status--error {
  color: var(--po-color-negative);
}

.system-system-peach-onboarding .po-file-item__status--uploading {
  color: var(--po-primary);
  animation: po-spin 1s linear infinite;
}

.system-system-peach-onboarding .po-file-item__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--po-radius-full);
  background: transparent;
  color: var(--po-text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--po-duration-fast) var(--po-easing),
    color var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-file-item__remove:hover {
  background: var(--po-color-negative-light);
  color: var(--po-color-negative);
}

.system-system-peach-onboarding .po-file-item__remove svg {
  width: 16px;
  height: 16px;
}

.system-system-peach-onboarding .po-file-item--error {
  border-color: var(--po-color-negative);
  background: var(--po-color-negative-light);
}

.system-system-peach-onboarding .po-file-item--done .po-file-item__name {
  color: var(--po-color-positive);
}


/* -----------------------------------------------------------------------------
   Address Autocomplete
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-address {
  position: relative;
  width: 100%;
}

.system-system-peach-onboarding .po-address__input {
  width: 100%;
  height: 52px;
  padding: 14px 18px 14px 48px;
  border: 2px solid var(--po-border-default);
  border-radius: var(--po-radius-md);
  background: var(--po-bg-layer-1);
  color: var(--po-text-primary);
  font: var(--po-text-base);
  outline: none;
  transition:
    border-color var(--po-duration-normal) var(--po-easing),
    box-shadow var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-address__input::placeholder {
  color: var(--po-text-tertiary);
}

.system-system-peach-onboarding .po-address__input:focus {
  border-color: var(--po-color-primary);
  box-shadow: 0 0 0 3px var(--po-color-primary-muted), var(--po-shadow-sm);
}

.system-system-peach-onboarding .po-address__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--po-text-tertiary);
  pointer-events: none;
}

.system-system-peach-onboarding .po-address__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--po-bg-layer-1);
  border: 1px solid var(--po-border-light);
  border-radius: var(--po-radius-md);
  box-shadow: var(--po-shadow-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--po-duration-normal) var(--po-easing),
    transform var(--po-duration-normal) var(--po-easing),
    visibility var(--po-duration-normal);
}

.system-system-peach-onboarding .po-address--open .po-address__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.system-system-peach-onboarding .po-address__option {
  display: flex;
  align-items: center;
  gap: var(--po-space-3);
  padding: var(--po-space-3) var(--po-space-4);
  cursor: pointer;
  font: var(--po-text-sm);
  color: var(--po-text-primary);
  transition: background var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-address__option:hover,
.system-system-peach-onboarding .po-address__option--highlighted {
  background: var(--po-color-primary-light);
}

.system-system-peach-onboarding .po-address__option__icon {
  width: 16px;
  height: 16px;
  color: var(--po-text-tertiary);
  flex-shrink: 0;
}

.system-system-peach-onboarding .po-address__option__text {
  flex: 1;
  min-width: 0;
}

.system-system-peach-onboarding .po-address__option__text strong {
  font-weight: 600;
}

.system-system-peach-onboarding .po-address__option__secondary {
  font: var(--po-caption);
  color: var(--po-text-tertiary);
  margin-top: 1px;
}

.system-system-peach-onboarding .po-address__locate {
  display: flex;
  align-items: center;
  gap: var(--po-space-2);
  padding: var(--po-space-3) var(--po-space-4);
  border-top: 1px solid var(--po-border-light);
  cursor: pointer;
  font: var(--po-text-sm);
  font-weight: 600;
  color: var(--po-color-primary);
  transition: background var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-address__locate:hover {
  background: var(--po-color-primary-light);
}

.system-system-peach-onboarding .po-address__locate svg {
  width: 16px;
  height: 16px;
}


/* -----------------------------------------------------------------------------
   Phone Input with Country Code
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-phone {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--po-border-default);
  border-radius: var(--po-radius-md);
  overflow: hidden;
  transition:
    border-color var(--po-duration-normal) var(--po-easing),
    box-shadow var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-phone:hover {
  border-color: var(--po-text-tertiary);
}

.system-system-peach-onboarding .po-phone:focus-within {
  border-color: var(--po-color-primary);
  box-shadow: 0 0 0 3px var(--po-color-primary-muted), var(--po-shadow-sm);
}

.system-system-peach-onboarding .po-phone__country {
  display: flex;
  align-items: center;
  gap: var(--po-space-2);
  padding: 0 var(--po-space-3) 0 var(--po-space-4);
  background: var(--po-bg-alt);
  border-right: 1px solid var(--po-border-light);
  font: var(--po-text-sm);
  color: var(--po-text-primary);
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}

.system-system-peach-onboarding .po-phone__country:hover {
  background: var(--po-border-light);
}

.system-system-peach-onboarding .po-phone__flag {
  font-size: 1.25rem;
  line-height: 1;
}

.system-system-peach-onboarding .po-phone__code {
  font: var(--po-text-sm);
  font-weight: 500;
  color: var(--po-text-secondary);
}

.system-system-peach-onboarding .po-phone__chevron {
  width: 14px;
  height: 14px;
  color: var(--po-text-tertiary);
}

.system-system-peach-onboarding .po-phone__input {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px var(--po-space-4);
  font: var(--po-text-base);
  color: var(--po-text-primary);
  background: var(--po-bg-layer-1);
  min-width: 0;
  height: 52px;
}

.system-system-peach-onboarding .po-phone__input::placeholder {
  color: var(--po-text-tertiary);
}


/* -----------------------------------------------------------------------------
   Multi-select / Tag Input
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-multiselect {
  position: relative;
  width: 100%;
}

.system-system-peach-onboarding .po-multiselect__input-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding: 8px 14px;
  border: 2px solid var(--po-border-default);
  border-radius: var(--po-radius-md);
  background: var(--po-bg-layer-1);
  cursor: text;
  transition:
    border-color var(--po-duration-normal) var(--po-easing),
    box-shadow var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-multiselect__input-wrap:hover {
  border-color: var(--po-text-tertiary);
}

.system-system-peach-onboarding .po-multiselect__input-wrap:focus-within {
  border-color: var(--po-color-primary);
  box-shadow: 0 0 0 3px var(--po-color-primary-muted);
}

.system-system-peach-onboarding .po-multiselect__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 12px;
  background: var(--po-color-primary-light);
  color: var(--po-color-primary);
  border-radius: var(--po-radius-pill);
  font: var(--po-text-sm);
  font-weight: 500;
  white-space: nowrap;
  animation: po-pill-in 0.2s var(--po-easing-bounce);
}

.system-system-peach-onboarding .po-multiselect__pill-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: var(--po-radius-pill);
  background: transparent;
  color: var(--po-color-primary);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-multiselect__pill-remove:hover {
  opacity: 1;
}

.system-system-peach-onboarding .po-multiselect__pill-remove svg {
  width: 12px;
  height: 12px;
}

.system-system-peach-onboarding .po-multiselect__input {
  flex: 1;
  min-width: 80px;
  border: none;
  outline: none;
  background: transparent;
  font: var(--po-text-base);
  color: var(--po-text-primary);
  padding: 4px 0;
}

.system-system-peach-onboarding .po-multiselect__input::placeholder {
  color: var(--po-text-tertiary);
}

.system-system-peach-onboarding .po-multiselect__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--po-bg-layer-1);
  border: 1px solid var(--po-border-light);
  border-radius: var(--po-radius-md);
  box-shadow: var(--po-shadow-lg);
  max-height: 200px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--po-duration-normal) var(--po-easing),
    transform var(--po-duration-normal) var(--po-easing),
    visibility var(--po-duration-normal);
}

.system-system-peach-onboarding .po-multiselect--open .po-multiselect__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.system-system-peach-onboarding .po-multiselect__option {
  padding: var(--po-space-3) var(--po-space-4);
  font: var(--po-text-sm);
  color: var(--po-text-primary);
  cursor: pointer;
  transition: background var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-multiselect__option:hover {
  background: var(--po-color-primary-light);
}

.system-system-peach-onboarding .po-multiselect__option--selected {
  color: var(--po-color-primary);
  font-weight: 600;
}

.system-system-peach-onboarding .po-multiselect__option--selected::after {
  content: ' \2713';
}


/* -----------------------------------------------------------------------------
   Stepper / Number Input
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-stepper {
  display: flex;
  align-items: center;
  height: 52px;
  border: 2px solid var(--po-border-default);
  border-radius: var(--po-radius-md);
  overflow: hidden;
  background: var(--po-bg-layer-1);
  transition: border-color var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-stepper:focus-within {
  border-color: var(--po-color-primary);
  box-shadow: 0 0 0 3px var(--po-color-primary-muted);
}

.system-system-peach-onboarding .po-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--po-text-secondary);
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition:
    background var(--po-duration-fast) var(--po-easing),
    color var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-stepper__btn:hover {
  background: var(--po-color-primary-light);
  color: var(--po-color-primary);
}

.system-system-peach-onboarding .po-stepper__btn:active {
  background: var(--po-color-primary-muted);
  color: var(--po-color-primary-active);
}

.system-system-peach-onboarding .po-stepper__btn:disabled {
  color: var(--po-text-disabled);
  cursor: not-allowed;
}

.system-system-peach-onboarding .po-stepper__btn:disabled:hover {
  background: transparent;
}

.system-system-peach-onboarding .po-stepper__value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--po-text-lg);
  font-weight: 700;
  color: var(--po-text-primary);
  border-left: 1px solid var(--po-border-light);
  border-right: 1px solid var(--po-border-light);
  user-select: none;
}


/* -----------------------------------------------------------------------------
   Info Card / Callout
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-info-card {
  display: flex;
  gap: var(--po-space-3);
  padding: var(--po-space-4) var(--po-space-5);
  background: var(--po-color-primary-light);
  border-left: 4px solid var(--po-color-primary);
  border-radius: 0 var(--po-radius-md) var(--po-radius-md) 0;
}

.system-system-peach-onboarding .po-info-card__icon {
  width: 22px;
  height: 22px;
  color: var(--po-color-primary);
  flex-shrink: 0;
  margin-top: 1px;
}

.system-system-peach-onboarding .po-info-card__content {
  flex: 1;
  min-width: 0;
}

.system-system-peach-onboarding .po-info-card__title {
  font: var(--po-text-md);
  font-weight: 600;
  color: var(--po-text-primary);
  margin: 0 0 var(--po-space-1);
}

.system-system-peach-onboarding .po-info-card__body {
  font: var(--po-text-sm);
  color: var(--po-text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* Info card semantic variants */
.system-system-peach-onboarding .po-info-card--notice {
  background: var(--po-color-notice-light);
  border-left-color: var(--po-color-notice);
}

.system-system-peach-onboarding .po-info-card--notice .po-info-card__icon {
  color: var(--po-color-notice);
}

.system-system-peach-onboarding .po-info-card--sage {
  background: var(--po-color-sage-light);
  border-left-color: var(--po-color-sage);
}

.system-system-peach-onboarding .po-info-card--sage .po-info-card__icon {
  color: var(--po-color-sage);
}


/* -----------------------------------------------------------------------------
   Avatar Upload
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-avatar-upload {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: var(--po-radius-circle);
  border: 2px dashed var(--po-border-default);
  background: var(--po-bg-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--po-space-1);
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color var(--po-duration-normal) var(--po-easing),
    background var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-avatar-upload:hover {
  border-color: var(--po-color-primary);
  background: var(--po-color-primary-light);
}

.system-system-peach-onboarding .po-avatar-upload__icon {
  width: 28px;
  height: 28px;
  color: var(--po-text-tertiary);
  transition: color var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-avatar-upload:hover .po-avatar-upload__icon {
  color: var(--po-color-primary);
}

.system-system-peach-onboarding .po-avatar-upload__label {
  font: var(--po-caption);
  color: var(--po-text-tertiary);
  transition: color var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-avatar-upload:hover .po-avatar-upload__label {
  color: var(--po-color-primary);
}

.system-system-peach-onboarding .po-avatar-upload__preview {
  position: absolute;
  inset: 0;
  border-radius: var(--po-radius-circle);
  overflow: hidden;
}

.system-system-peach-onboarding .po-avatar-upload__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.system-system-peach-onboarding .po-avatar-upload__preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: var(--po-gray-50);
  opacity: 0;
  transition: opacity var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-avatar-upload:hover .po-avatar-upload__preview-overlay {
  opacity: 1;
}

/* Has-preview state removes dashed border */
.system-system-peach-onboarding .po-avatar-upload--has-preview {
  border-style: solid;
  border-color: var(--po-border-light);
}


/* -----------------------------------------------------------------------------
   Emergency Contact Card
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--po-space-3);
  padding: var(--po-space-5);
  background: var(--po-bg-layer-1);
  border: 1px solid var(--po-border-light);
  border-radius: var(--po-radius-md);
  transition: border-color var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-contact-card:hover {
  border-color: var(--po-border-default);
}

.system-system-peach-onboarding .po-contact-card__header {
  display: flex;
  align-items: center;
  gap: var(--po-space-3);
}

.system-system-peach-onboarding .po-contact-card__name {
  font: var(--po-text-md);
  font-weight: 600;
  color: var(--po-text-primary);
  flex: 1;
}

.system-system-peach-onboarding .po-contact-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--po-radius-pill);
  background: var(--po-color-primary-light);
  color: var(--po-color-primary);
  font: var(--po-caption);
  font-weight: 600;
}

.system-system-peach-onboarding .po-contact-card__detail {
  display: flex;
  align-items: center;
  gap: var(--po-space-2);
  font: var(--po-text-sm);
  color: var(--po-text-secondary);
}

.system-system-peach-onboarding .po-contact-card__detail-icon {
  width: 16px;
  height: 16px;
  color: var(--po-text-tertiary);
  flex-shrink: 0;
}

.system-system-peach-onboarding .po-contact-card__actions {
  display: flex;
  gap: var(--po-space-2);
  padding-top: var(--po-space-3);
  border-top: 1px solid var(--po-border-light);
}


/* -----------------------------------------------------------------------------
   Review Card / Summary
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-review-card {
  background: var(--po-bg-layer-1);
  border: 1px solid var(--po-border-light);
  border-radius: var(--po-radius-md);
  overflow: hidden;
}

.system-system-peach-onboarding .po-review-card__section {
  padding: var(--po-space-4) var(--po-space-5);
}

.system-system-peach-onboarding .po-review-card__section:not(:last-child) {
  border-bottom: 1px solid var(--po-border-light);
}

.system-system-peach-onboarding .po-review-card__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--po-space-3);
}

.system-system-peach-onboarding .po-review-card__section-title {
  font: var(--po-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--po-text-tertiary);
  margin: 0;
}

.system-system-peach-onboarding .po-review-card__edit-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--po-space-1);
  padding: var(--po-space-1) var(--po-space-2);
  border: none;
  border-radius: var(--po-radius-sm);
  background: transparent;
  color: var(--po-color-primary);
  font: var(--po-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-review-card__edit-btn:hover {
  background: var(--po-color-primary-light);
}

.system-system-peach-onboarding .po-review-card__edit-btn svg {
  width: 14px;
  height: 14px;
}

.system-system-peach-onboarding .po-review-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--po-space-2) 0;
  font: var(--po-text-sm);
}

.system-system-peach-onboarding .po-review-card__row:not(:last-child) {
  border-bottom: 1px solid var(--po-border-light);
}

.system-system-peach-onboarding .po-review-card__label {
  color: var(--po-text-secondary);
}

.system-system-peach-onboarding .po-review-card__value {
  font-weight: 600;
  color: var(--po-text-primary);
  text-align: right;
  max-width: 60%;
}


/* -----------------------------------------------------------------------------
   Checklist / Task Tracker
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.system-system-peach-onboarding .po-checklist__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--po-space-4);
}

.system-system-peach-onboarding .po-checklist__title {
  font: var(--po-text-xl);
  font-weight: 700;
  color: var(--po-text-primary);
  margin: 0;
}

.system-system-peach-onboarding .po-checklist__count {
  font: var(--po-text-sm);
  color: var(--po-text-tertiary);
}

.system-system-peach-onboarding .po-checklist__progress {
  height: 6px;
  background: var(--po-bg-alt);
  border-radius: var(--po-radius-pill);
  overflow: hidden;
  margin-bottom: var(--po-space-4);
}

.system-system-peach-onboarding .po-checklist__progress-bar {
  height: 100%;
  background: var(--po-color-primary);
  border-radius: var(--po-radius-pill);
  transition: width var(--po-duration-slow) var(--po-easing-bounce);
}

.system-system-peach-onboarding .po-checklist-item {
  display: flex;
  align-items: center;
  gap: var(--po-space-3);
  padding: var(--po-space-3) var(--po-space-4);
  border-radius: var(--po-radius-md);
  transition: background var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-checklist-item:hover {
  background: var(--po-bg-alt);
}

.system-system-peach-onboarding .po-checklist-item__check {
  width: 24px;
  height: 24px;
  border: 2px solid var(--po-border-default);
  border-radius: var(--po-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--po-duration-normal) var(--po-easing);
  color: transparent;
}

.system-system-peach-onboarding .po-checklist-item__content {
  flex: 1;
}

.system-system-peach-onboarding .po-checklist-item__label {
  font: var(--po-text-md);
  font-weight: 500;
  color: var(--po-text-primary);
}

.system-system-peach-onboarding .po-checklist-item__meta {
  font: var(--po-caption);
  color: var(--po-text-tertiary);
  margin-top: 2px;
}

.system-system-peach-onboarding .po-checklist-item__action {
  font: var(--po-text-sm);
  font-weight: 600;
  color: var(--po-color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--po-space-1) var(--po-space-2);
  border-radius: var(--po-radius-sm);
  transition: background var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-checklist-item__action:hover {
  background: var(--po-color-primary-light);
}

/* Done state */
.system-system-peach-onboarding .po-checklist-item--done .po-checklist-item__check {
  border-color: var(--po-color-positive);
  background: var(--po-color-positive);
  color: var(--po-gray-50);
}

.system-system-peach-onboarding .po-checklist-item--done .po-checklist-item__label {
  color: var(--po-text-secondary);
  text-decoration: line-through;
  text-decoration-color: var(--po-border-default);
}

/* Current/active state */
.system-system-peach-onboarding .po-checklist-item--current {
  background: var(--po-color-primary-light);
}

.system-system-peach-onboarding .po-checklist-item--current .po-checklist-item__check {
  border-color: var(--po-color-primary);
  animation: po-checklist-pulse 2s ease-in-out infinite;
}

.system-system-peach-onboarding .po-checklist-item--current .po-checklist-item__label {
  font-weight: 600;
  color: var(--po-color-primary);
}


/* -----------------------------------------------------------------------------
   Validation Summary
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-validation-summary[hidden] {
  display: none;
}

.system-system-peach-onboarding .po-btn[hidden] {
  display: none;
}

.system-system-peach-onboarding .po-validation-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--po-space-3);
  padding: var(--po-space-4) var(--po-space-5);
  background: var(--po-color-negative-light);
  border: 1px solid var(--po-color-negative);
  border-radius: var(--po-radius-md);
}

.system-system-peach-onboarding .po-validation-summary__icon {
  width: 22px;
  height: 22px;
  color: var(--po-color-negative);
  flex-shrink: 0;
  margin-top: 1px;
}

.system-system-peach-onboarding .po-validation-summary__content {
  flex: 1;
}

.system-system-peach-onboarding .po-validation-summary__title {
  font: var(--po-text-md);
  font-weight: 600;
  color: var(--po-color-negative);
  margin: 0 0 var(--po-space-2);
}

.system-system-peach-onboarding .po-validation-summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--po-space-1);
}

.system-system-peach-onboarding .po-validation-summary__item {
  display: flex;
  align-items: center;
  gap: var(--po-space-2);
  font: var(--po-text-sm);
  color: var(--po-color-negative);
}

.system-system-peach-onboarding .po-validation-summary__item::before {
  content: '\2022';
  color: var(--po-color-negative);
  flex-shrink: 0;
}

.system-system-peach-onboarding .po-validation-summary__item a {
  color: var(--po-color-negative);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.system-system-peach-onboarding .po-validation-summary__item a:hover {
  text-decoration-thickness: 2px;
}


/* -----------------------------------------------------------------------------
   Segmented Control
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-segmented {
  display: inline-flex;
  padding: 4px;
  background: var(--po-bg-alt);
  border-radius: var(--po-radius-pill);
  border: 1px solid var(--po-border-light);
}

.system-system-peach-onboarding .po-segmented__option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: var(--po-radius-pill);
  background: transparent;
  color: var(--po-text-secondary);
  font: var(--po-text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--po-duration-normal) var(--po-easing),
    color var(--po-duration-normal) var(--po-easing),
    box-shadow var(--po-duration-normal) var(--po-easing);
}

.system-system-peach-onboarding .po-segmented__option:hover {
  color: var(--po-text-primary);
}

.system-system-peach-onboarding .po-segmented__option--active {
  background: var(--po-bg-layer-1);
  color: var(--po-color-primary);
  font-weight: 600;
  box-shadow: var(--po-shadow-sm);
}


/* -----------------------------------------------------------------------------
   Range Slider
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-slider {
  display: flex;
  flex-direction: column;
  gap: var(--po-space-2);
  width: 100%;
}

.system-system-peach-onboarding .po-slider__track-wrap {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
}

.system-system-peach-onboarding .po-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--po-bg-alt);
  border-radius: var(--po-radius-pill);
  outline: none;
  cursor: pointer;
}

.system-system-peach-onboarding .po-slider__input::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--po-radius-pill);
}

.system-system-peach-onboarding .po-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: var(--po-color-primary);
  border: 3px solid var(--po-bg-layer-1);
  border-radius: var(--po-radius-circle);
  box-shadow: var(--po-shadow-sm);
  cursor: grab;
  margin-top: -9px;
  transition: transform var(--po-duration-fast) var(--po-easing-bounce);
}

.system-system-peach-onboarding .po-slider__input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.system-system-peach-onboarding .po-slider__input::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.system-system-peach-onboarding .po-slider__input::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--po-color-primary);
  border: 3px solid var(--po-bg-layer-1);
  border-radius: var(--po-radius-circle);
  box-shadow: var(--po-shadow-sm);
  cursor: grab;
}

.system-system-peach-onboarding .po-slider__input::-moz-range-track {
  height: 6px;
  background: var(--po-bg-alt);
  border-radius: var(--po-radius-pill);
  border: none;
}

.system-system-peach-onboarding .po-slider__input:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--po-shadow-sm), var(--po-shadow-focus-ring);
}

.system-system-peach-onboarding .po-slider__input:focus-visible::-moz-range-thumb {
  box-shadow: var(--po-shadow-sm), var(--po-shadow-focus-ring);
}

.system-system-peach-onboarding .po-slider__fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  background: var(--po-color-primary);
  border-radius: var(--po-radius-pill);
  pointer-events: none;
}

.system-system-peach-onboarding .po-slider__labels {
  display: flex;
  justify-content: space-between;
  font: var(--po-caption);
  color: var(--po-text-tertiary);
}

.system-system-peach-onboarding .po-slider__value {
  font: var(--po-text-md);
  font-weight: 700;
  color: var(--po-color-primary);
  text-align: center;
}


/* -----------------------------------------------------------------------------
   Character Counter / Textarea
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-textarea-counter {
  position: relative;
  width: 100%;
}

.system-system-peach-onboarding .po-textarea-counter__count {
  font: var(--po-caption);
  color: var(--po-text-tertiary);
  text-align: right;
  margin-top: var(--po-space-1);
  transition: color var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-textarea-counter__count--warn {
  color: var(--po-color-notice);
}

.system-system-peach-onboarding .po-textarea-counter__count--over {
  color: var(--po-color-negative);
  font-weight: 600;
}


/* -----------------------------------------------------------------------------
   Password Input with Reveal Toggle
   ----------------------------------------------------------------------------- */

.system-system-peach-onboarding .po-password {
  position: relative;
  width: 100%;
}

.system-system-peach-onboarding .po-password .po-input {
  padding-right: 52px;
}

.system-system-peach-onboarding .po-password__toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--po-radius-sm);
  background: transparent;
  color: var(--po-text-tertiary);
  cursor: pointer;
  transition:
    color var(--po-duration-fast) var(--po-easing),
    background var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-password__toggle:hover {
  color: var(--po-text-secondary);
  background: var(--po-bg-alt);
}

.system-system-peach-onboarding .po-password__toggle svg {
  width: 20px;
  height: 20px;
}

/* ---- Autosave / Draft Indicator ---- */

.system-system-peach-onboarding .po-autosave {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--po-text-sm);
  font-size: 12px;
  color: var(--po-text-tertiary);
}

.system-system-peach-onboarding .po-autosave__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--po-text-tertiary);
  transition: color var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-autosave__icon svg {
  width: 16px;
  height: 16px;
}

.system-system-peach-onboarding .po-autosave__text {
  font-size: 12px;
  line-height: 1.4;
}

.system-system-peach-onboarding .po-autosave--saving .po-autosave__icon {
  color: var(--po-color-primary);
  animation: po-spin 1s linear infinite;
}

.system-system-peach-onboarding .po-autosave--saved .po-autosave__icon {
  color: var(--po-color-positive);
}

.system-system-peach-onboarding .po-autosave--error .po-autosave__icon {
  color: var(--po-color-negative);
}

.system-system-peach-onboarding .po-autosave--saved .po-autosave__text {
  color: var(--po-color-positive);
}

/* ---- Save & Continue Later Banner ---- */

.system-system-peach-onboarding .po-save-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--po-color-primary-light);
  border-bottom: 1px solid rgba(24, 181, 168, 0.2);
  border-radius: 0;
}

.system-system-peach-onboarding .po-save-banner__icon {
  width: 20px;
  height: 20px;
  color: var(--po-color-primary);
  flex-shrink: 0;
}

.system-system-peach-onboarding .po-save-banner__icon svg {
  width: 20px;
  height: 20px;
}

.system-system-peach-onboarding .po-save-banner__text {
  flex: 1;
  font: var(--po-text-sm);
  color: var(--po-text-primary);
}

.system-system-peach-onboarding .po-save-banner__text strong {
  font-weight: 600;
}

.system-system-peach-onboarding .po-save-banner__action {
  font: var(--po-text-sm);
  font-weight: 600;
  color: var(--po-color-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: var(--po-radius-pill);
  transition: background var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-save-banner__action:hover {
  background: rgba(24, 181, 168, 0.1);
}

.system-system-peach-onboarding .po-save-banner__dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--po-text-tertiary);
  cursor: pointer;
  border-radius: var(--po-radius-circle);
}

.system-system-peach-onboarding .po-save-banner__dismiss svg {
  width: 14px;
  height: 14px;
}

.system-system-peach-onboarding .po-save-banner__dismiss:hover {
  color: var(--po-text-primary);
}

/* ---- Inline Help Expandable ---- */

.system-system-peach-onboarding .po-help-expand {
  margin-top: 8px;
}

.system-system-peach-onboarding .po-help-expand__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--po-text-sm);
  font-weight: 500;
  color: var(--po-color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--po-duration-fast) var(--po-easing);
}

.system-system-peach-onboarding .po-help-expand__trigger:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.system-system-peach-onboarding .po-help-expand__trigger-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 250ms ease;
}

.system-system-peach-onboarding .po-help-expand__trigger-icon svg {
  width: 16px;
  height: 16px;
}

.system-system-peach-onboarding .po-help-expand--open .po-help-expand__trigger-icon {
  transform: rotate(180deg);
}

.system-system-peach-onboarding .po-help-expand__content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 350ms ease,
    opacity 250ms ease;
  margin-top: 0;
}

.system-system-peach-onboarding .po-help-expand--open .po-help-expand__content {
  max-height: 500px;
  opacity: 1;
  margin-top: 12px;
}

.system-system-peach-onboarding .po-help-expand__body {
  font: var(--po-text-sm);
  line-height: 1.7;
  color: var(--po-text-secondary);
  padding: 16px 20px;
  background: var(--po-bg-default);
  border-left: 3px solid var(--po-color-primary);
  border-radius: 0 var(--po-radius-md) var(--po-radius-md) 0;
}

/* ---- Language / Accessibility Bar ---- */

.system-system-peach-onboarding .po-a11y-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
  background: var(--po-gray-800);
  color: var(--po-gray-50);
  font-size: 12px;
  border-radius: 0;
}

.system-system-peach-onboarding .po-a11y-bar__group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.system-system-peach-onboarding .po-a11y-bar__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--po-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.system-system-peach-onboarding .po-a11y-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--po-gray-600);
  border-radius: var(--po-radius-sm);
  background: transparent;
  color: var(--po-gray-200);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
}

.system-system-peach-onboarding .po-a11y-bar__btn:hover {
  background: var(--po-gray-700);
  border-color: var(--po-gray-500);
}

.system-system-peach-onboarding .po-a11y-bar__btn--active {
  background: var(--po-color-primary);
  border-color: var(--po-color-primary);
  color: #FFFFFF;
}

.system-system-peach-onboarding .po-a11y-bar__select {
  height: 28px;
  padding: 0 28px 0 8px;
  border: 1px solid var(--po-gray-600);
  border-radius: var(--po-radius-sm);
  background: var(--po-gray-700);
  color: var(--po-gray-200);
  font-size: 12px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}

.system-system-peach-onboarding .po-a11y-bar__spacer {
  flex: 1;
}

.system-system-peach-onboarding .po-a11y-bar__divider {
  width: 1px;
  height: 20px;
  background: var(--po-gray-600);
}


/* =============================================================================
   5. ANIMATIONS
   ============================================================================= */

/* Step slide-in animation (from production export) */
@keyframes po-step-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button loading spinner rotation (from production export) */
@keyframes po-spin {
  to {
    transform: rotate(360deg);
  }
}

/* SVG spinner rotation */
@keyframes po-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Skeleton shimmer animation */
@keyframes po-skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Dialog entry animation */
@keyframes po-dialog-entry {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Fade-in animation */
@keyframes po-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Slide-up animation */
@keyframes po-slide-up {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Progress bar indeterminate */
@keyframes po-progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

/* Pulse animation for loading states */
@keyframes po-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Bounce-in animation */
@keyframes po-bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pill appear animation (multiselect) */
@keyframes po-pill-in {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Checklist pulse animation (current item) */
@keyframes po-checklist-pulse {
  0%, 100% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 0 4px rgba(24, 181, 168, 0.15);
  }
}

/* Skeleton loading placeholder */
.system-system-peach-onboarding .po-skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--po-gray-200);
  border-radius: var(--po-radius-sm);
}

.system-system-peach-onboarding .po-skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--po-skeleton-shimmer) 50%,
    transparent 100%
  );
  animation: po-skeleton-shimmer 1.5s ease-in-out infinite;
}

.system-system-peach-onboarding .po-skeleton--text {
  height: 16px;
  width: 80%;
  margin-bottom: 8px;
}

.system-system-peach-onboarding .po-skeleton--heading {
  height: 24px;
  width: 60%;
  margin-bottom: 12px;
}

.system-system-peach-onboarding .po-skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--po-radius-circle);
}

.system-system-peach-onboarding .po-skeleton--button {
  height: 52px;
  width: 160px;
  border-radius: var(--po-radius-pill);
}


/* =============================================================================
   6. RESPONSIVE
   ============================================================================= */

/* Mobile — 540px and below (from production export) */
@media (max-width: 540px) {
  .system-system-peach-onboarding .po-onboarding-shell {
    padding: var(--po-space-4) var(--po-space-3);
    padding-bottom: var(--po-space-10);
  }

  .system-system-peach-onboarding .po-form-step {
    padding: var(--po-space-6) var(--po-space-4);
  }

  .system-system-peach-onboarding .po-form-step__actions {
    flex-wrap: wrap;
  }

  .system-system-peach-onboarding .po-btn {
    min-height: 48px;
    padding: 12px 24px;
  }

  .system-system-peach-onboarding .po-btn--lg {
    width: 100%;
  }

  .system-system-peach-onboarding .po-btn--nav {
    min-width: 0;
    flex: 1;
  }

  .system-system-peach-onboarding .po-fieldset {
    padding: var(--po-space-4);
  }

  .system-system-peach-onboarding .po-onboarding-header__title {
    font-size: 1.625rem;
  }

  /* Hide step labels on mobile */
  .system-system-peach-onboarding .po-step__label {
    display: none;
  }

  /* Smaller step dots on mobile */
  .system-system-peach-onboarding .po-step__dot {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .system-system-peach-onboarding .po-step:not(:last-child)::after {
    top: 14px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
  }

  /* Choice group stacks on mobile */
  .system-system-peach-onboarding .po-choice-group {
    grid-template-columns: 1fr;
  }

  .system-system-peach-onboarding .po-choice-group--inline {
    flex-direction: column;
  }

  /* Datepicker full-width on mobile */
  .system-system-peach-onboarding .po-datepicker__dropdown {
    width: 100%;
    min-width: 280px;
  }

  /* Confirmation adjustments */
  .system-system-peach-onboarding .po-confirmation__summary {
    margin: 0 var(--po-space-4);
    padding: 0 var(--po-space-4);
  }

  .system-system-peach-onboarding .po-confirmation__header {
    padding: var(--po-space-8) var(--po-space-4) var(--po-space-6);
  }

  .system-system-peach-onboarding .po-confirmation__next {
    padding: var(--po-space-6) var(--po-space-4) var(--po-space-4);
  }

  .system-system-peach-onboarding .po-confirmation__actions {
    padding: var(--po-space-4);
  }

  /* Dialog fullscreen on mobile */
  .system-system-peach-onboarding .po-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}

/* Tablet — 768px and below */
@media (max-width: 768px) {
  .system-system-peach-onboarding .po-onboarding-shell {
    max-width: 100%;
    padding: var(--po-space-5) var(--po-space-4);
    padding-bottom: var(--po-space-10);
  }

  .system-system-peach-onboarding .po-form-step {
    border-radius: var(--po-radius-lg);
  }

  .system-system-peach-onboarding .po-confirmation {
    border-radius: var(--po-radius-lg);
  }

  .system-system-peach-onboarding .po-dialog {
    width: calc(100% - var(--po-spacing-400));
  }

  .system-system-peach-onboarding .po-dialog--lg {
    width: calc(100% - var(--po-spacing-400));
  }

  .system-system-peach-onboarding .po-choice-group {
    grid-template-columns: 1fr;
  }

  /* Reduce heading sizes slightly */
  .system-system-peach-onboarding .po-heading-xxl {
    font-size: var(--po-font-size-900);
  }

  .system-system-peach-onboarding .po-heading-xl {
    font-size: var(--po-font-size-700);
  }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .system-system-peach-onboarding .po-form-step {
    animation: none;
  }

  .system-system-peach-onboarding .po-confirmation {
    animation: none;
  }

  .system-system-peach-onboarding .po-progress__bar {
    transition: none;
  }

  .system-system-peach-onboarding .po-toggle__thumb {
    transition: transform var(--po-duration-fast) var(--po-easing);
  }

  .system-system-peach-onboarding .po-datepicker__day:hover {
    transform: none;
  }

  .system-system-peach-onboarding .po-btn:hover {
    transform: none;
  }

  .system-system-peach-onboarding .po-btn:active {
    transform: none;
  }

  .system-system-peach-onboarding .po-dialog {
    animation: none;
  }

  .system-system-peach-onboarding .po-dialog-backdrop {
    animation: none;
  }

  .system-system-peach-onboarding .po-reveal {
    transition: none;
  }

  .system-system-peach-onboarding .po-skeleton::after {
    animation: none;
  }
}


/* =============================================================================
   7. UTILITIES
   ============================================================================= */

/* Visually hidden — accessible but not visible */
.system-system-peach-onboarding .po-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Truncate text with ellipsis */
.system-system-peach-onboarding .po-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Screen reader only — alias */
.system-system-peach-onboarding .po-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;
}

/* Display utilities */
.system-system-peach-onboarding .po-flex { display: flex; }
.system-system-peach-onboarding .po-inline-flex { display: inline-flex; }
.system-system-peach-onboarding .po-grid { display: grid; }
.system-system-peach-onboarding .po-block { display: block; }
.system-system-peach-onboarding .po-inline { display: inline; }
.system-system-peach-onboarding .po-hidden { display: none; }

/* Flex utilities */
.system-system-peach-onboarding .po-flex-col { flex-direction: column; }
.system-system-peach-onboarding .po-flex-row { flex-direction: row; }
.system-system-peach-onboarding .po-flex-wrap { flex-wrap: wrap; }
.system-system-peach-onboarding .po-items-center { align-items: center; }
.system-system-peach-onboarding .po-items-start { align-items: flex-start; }
.system-system-peach-onboarding .po-items-end { align-items: flex-end; }
.system-system-peach-onboarding .po-justify-center { justify-content: center; }
.system-system-peach-onboarding .po-justify-between { justify-content: space-between; }
.system-system-peach-onboarding .po-justify-end { justify-content: flex-end; }
.system-system-peach-onboarding .po-gap-1 { gap: var(--po-space-1); }
.system-system-peach-onboarding .po-gap-2 { gap: var(--po-space-2); }
.system-system-peach-onboarding .po-gap-3 { gap: var(--po-space-3); }
.system-system-peach-onboarding .po-gap-4 { gap: var(--po-space-4); }
.system-system-peach-onboarding .po-gap-6 { gap: var(--po-space-6); }
.system-system-peach-onboarding .po-gap-8 { gap: var(--po-space-8); }

/* Text alignment */
.system-system-peach-onboarding .po-text-left { text-align: left; }
.system-system-peach-onboarding .po-text-center { text-align: center; }
.system-system-peach-onboarding .po-text-right { text-align: right; }

/* Width utilities */
.system-system-peach-onboarding .po-w-full { width: 100%; }
.system-system-peach-onboarding .po-w-auto { width: auto; }

/* Spacing utilities */
.system-system-peach-onboarding .po-mt-0 { margin-top: 0; }
.system-system-peach-onboarding .po-mt-2 { margin-top: var(--po-space-2); }
.system-system-peach-onboarding .po-mt-4 { margin-top: var(--po-space-4); }
.system-system-peach-onboarding .po-mt-6 { margin-top: var(--po-space-6); }
.system-system-peach-onboarding .po-mt-8 { margin-top: var(--po-space-8); }
.system-system-peach-onboarding .po-mb-0 { margin-bottom: 0; }
.system-system-peach-onboarding .po-mb-2 { margin-bottom: var(--po-space-2); }
.system-system-peach-onboarding .po-mb-4 { margin-bottom: var(--po-space-4); }
.system-system-peach-onboarding .po-mb-6 { margin-bottom: var(--po-space-6); }
.system-system-peach-onboarding .po-mb-8 { margin-bottom: var(--po-space-8); }

/* ---------------------------------------------------------------------------
   High Contrast Mode
   --------------------------------------------------------------------------- */

.po-high-contrast.system-system-peach-onboarding {
  --po-bg-default: #FFFFFF;
  --po-bg-alt: #F0F0F0;
  --po-bg-layer-1: #FFFFFF;
  --po-bg-layer-2: #F5F5F5;

  --po-text-primary: #000000;
  --po-text-secondary: #1A1A1A;
  --po-text-tertiary: #333333;

  --po-gray-50: #FFFFFF;
  --po-gray-75: #F5F5F5;
  --po-gray-100: #EBEBEB;
  --po-gray-200: #D6D6D6;
  --po-gray-300: #B0B0B0;
  --po-gray-400: #808080;
  --po-gray-500: #555555;
  --po-gray-600: #333333;
  --po-gray-700: #1A1A1A;
  --po-gray-800: #000000;

  --po-color-primary: #0050A0;
  --po-color-primary-hover: #003D7A;
  --po-color-primary-active: #002B5C;
  --po-color-primary-light: #D6E8F8;

  --po-color-negative: #CC0000;
  --po-color-negative-light: #FFE0E0;
  --po-color-positive: #006600;
  --po-color-positive-light: #D6F0D6;
  --po-color-notice: #996600;
  --po-color-notice-light: #FFF0CC;

  --po-border-default: #333333;
  --po-border-hover: #000000;
}

.po-high-contrast.system-system-peach-onboarding .po-input,
.po-high-contrast.system-system-peach-onboarding .po-select,
.po-high-contrast.system-system-peach-onboarding .po-textarea,
.po-high-contrast.system-system-peach-onboarding .po-datepicker__input {
  border-color: #333333;
  color: #000000;
  background: #FFFFFF;
}

.po-high-contrast.system-system-peach-onboarding .po-input:focus,
.po-high-contrast.system-system-peach-onboarding .po-select:focus,
.po-high-contrast.system-system-peach-onboarding .po-textarea:focus,
.po-high-contrast.system-system-peach-onboarding .po-datepicker__input:focus {
  border-color: #0050A0;
  box-shadow: 0 0 0 2px #0050A0;
}

.po-high-contrast.system-system-peach-onboarding .po-choice {
  border-color: #333333;
  color: #000000;
}

.po-high-contrast.system-system-peach-onboarding .po-choice--selected {
  border-color: #0050A0;
  background: #D6E8F8;
}

.po-high-contrast.system-system-peach-onboarding .po-card {
  border-color: #333333;
}

.po-high-contrast.system-system-peach-onboarding .po-field__label {
  color: #000000;
}

.po-high-contrast.system-system-peach-onboarding .po-btn--primary {
  background: #0050A0;
  color: #FFFFFF;
  border: 2px solid #003D7A;
}

.po-high-contrast.system-system-peach-onboarding .po-btn--secondary {
  border-color: #333333;
  color: #000000;
}

.po-high-contrast.system-system-peach-onboarding .po-progress__bar {
  background: #D6D6D6;
}

.po-high-contrast.system-system-peach-onboarding .po-progress__fill {
  background: #0050A0;
}