/* Aggregated Design System V2 CSS
 *
 * This file declares the source order for V2 design-system styles.
 * Webpack emits design_system_v2.bundle.css from this file for one-request loading.
 */

/* Normalize should be first */
/* Inlined from webroot/css/normalize_v8.css */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }



/* Tokens */
/* Inlined from webroot/css/design_v2/color.css */
:root {
  /*
   * Raw palette tokens.
   * Theme and component tokens below should alias these values instead of
   * repeating hex/rgb literals.
   */
  --Color-Palette-White: #fff;
  --Color-Palette-Black: #000;
  --Color-Palette-White-Hover: #F5F5F5;
  --Color-Palette-Coral-300: #ffb09d;
  --Color-Palette-Coral-600: #E04C26;
  --Color-Palette-Coral-700: #D23732;
  --Color-Palette-Coral-600-Hover: #C43D1F;
  --Color-Palette-Coral-600-Pulse: rgba(224, 76, 38, 0.4);
  --Color-Palette-Coral-600-Pulse-Soft: rgba(224, 76, 38, 0.15);
  --Color-Palette-Navy-500: #4C699A;
  --Color-Palette-Navy-600: #1F4381;
  --Color-Palette-Navy-600-Hover: #193666;
  --Color-Palette-Navy-700: #00104E;
  --Color-Palette-Navy-800: #00001B;
  --Color-Palette-Yellow-500: #FFBA16;
  --Color-Palette-Blue-500: #98CCD0;
  --Color-Palette-Light-Teal: #9bccd0;
  --Color-Palette-Teal-500: #56B898;
  --Color-Palette-Teal-600: #54A697;
  --Color-Palette-Teal-600-Hover: #4A9A8C;
  --Color-Palette-Teal-700: #305F63;
  --Color-Palette-Teal-800: #134E4A;
  --Color-Palette-Teal-900: #023337;
  --Color-Palette-Green-100: #D1FAE5;
  --Color-Palette-Green-200: #E6F5EA;
  --Color-Palette-Green-500: #9DD8AD;
  --Color-Palette-Green-800: #065F46;
  --Color-Palette-Green-900: #003500;
  --Color-Palette-Warm-10: #FDFCFB;
  --Color-Palette-Warm-25: #FAF7F5;
  --Color-Palette-Warm-50: #FEFDFD;
  --Color-Palette-Warm-75: #FFFAF7;
  --Color-Palette-Warm-100: #FFFBF7;
  --Color-Palette-Warm-125: #FFF7F0;
  --Color-Palette-Warm-150: #FDFAF7;
  --Color-Palette-Warm-200: #F7FCFB;
  --Color-Palette-Warm-300: #F3FAF9;
  --Color-Palette-Warm-400: #EAF3F4;
  --Color-Palette-Warm-500: #FFEAD9;
  --Color-Palette-Warm-500-Hover: #FFD9C6;
  --Color-Palette-Warm-600: #D4C4B8;
  --Color-Palette-Warm-700: #C9B7AA;
  --Color-Palette-Warm-800: #E2DBD5;
  --Color-Palette-Warm-900: #E8E2DA;
  --Color-Palette-Warm-950: #D4CDC4;
  --Color-Palette-Warm-Divider: #F5F0EB;
  --Color-Palette-Warm-Border-100: #EFEAE7;
  --Color-Palette-Warm-Neutral: #E9E8E7;
  --Color-Palette-Neutral-50: #F8FAFC;
  --Color-Palette-Neutral-100: #F3F4F6;
  --Color-Palette-Neutral-150: #F6F6F5;
  --Color-Palette-Neutral-200: #EBEBEB;
  --Color-Palette-Neutral-250: #E6E6E6;
  --Color-Palette-Neutral-300: #E2E2E2;
  --Color-Palette-Neutral-350: #D7DCE1;
  --Color-Palette-Neutral-400: #D1D5DB;
  --Color-Palette-Neutral-500: #A5A09F;
  --Color-Palette-Neutral-550: #A1A1A1;
  --Color-Palette-Neutral-575: #ADA9A8;
  --Color-Palette-Neutral-600: #8A8A8A;
  --Color-Palette-Neutral-650: #928D8C;
  --Color-Palette-Neutral-700: #6D6E6E;
  --Color-Palette-Neutral-750: #6B7F82;
  --Color-Palette-Neutral-800: #4B5563;
  --Color-Palette-Neutral-850: #374151;
  --Color-Palette-Neutral-900: #192526;
  --Color-Palette-Neutral-950: #111827;
  --Color-Palette-Warm-Text-500: #5A4A3F;
  --Color-Palette-Warm-Text-600: #5A4F46;
  --Color-Palette-Warm-Text-700: #484443;
  --Color-Palette-Warm-Text-800: #3A3231;
  --Color-Palette-Private-Nav: #485D81;
  --Color-Palette-Private-Action: #35666A;
  --Color-Palette-Private-Muted-Action: #68999D;
  --Color-Palette-Private-Referral: #660034;
  --Color-Palette-Private-Error: #470000;
  --Color-Palette-Private-Warning: #622100;
  --Color-Palette-Private-Info-Surface: #EBF5F6;
  --Color-Palette-Private-Info-Banner: #D7EBEC;
  --Color-Palette-Private-Warning-Surface: #FEF1D0;
  --Color-Palette-Private-Pending: #FDE3A2;
  --Color-Palette-Private-Error-Surface: #FFF2EF;
  --Color-Palette-Private-Error-Banner: #FFCABD;
  --Color-Palette-Private-Referral-Surface: #FFF5FA;
  --Color-Palette-Private-Referral-Cta: #FFD5EB;
  --Color-Palette-Private-Referral-Border: #FF96CC;
  --Color-Palette-Info-100: #EBF8FA;
  --Color-Palette-Info-125: #DDEBED;
  --Color-Palette-Info-150: #F1F8FF;
  --Color-Palette-Info-200: #D1E7FF;
  --Color-Palette-Info-300: #DAF5EF;
  --Color-Palette-Info-Icon: #7BABAF;
  --Color-Palette-Info-Muted: #70827F;
  --Color-Palette-Pink-100: #FCE4EE;
  --Color-Palette-Pink-800: #663366;
  --Color-Palette-Plum-600: #8E4585;
  --Color-Palette-Forest-600: #2E6B4F;
  --Color-Palette-Coral-500: #C26B5C;
  --Color-Palette-Type-600: #181818;
  --Color-Palette-White-20: rgba(255, 255, 255, 0.20);
  --Color-Palette-White-30: rgba(255, 255, 255, 0.30);
  --Color-Palette-White-60: rgba(255, 255, 255, 0.60);
  --Color-Palette-White-80: rgba(255, 255, 255, 0.80);
  --Color-Palette-White-90: rgba(255, 255, 255, 0.90);
  --Color-Palette-Black-Rgb: rgb(0, 0, 0);
  --Color-Palette-Black-Text-Variable: rgba(0, 0, 0, var(--text-opacity));
  --Color-Palette-Black-06: rgba(0, 0, 0, 0.06);
  --Color-Palette-Black-08: rgba(0, 0, 0, 0.08);
  --Color-Palette-Black-15: rgba(0, 0, 0, 0.15);
  --Color-Palette-Black-20: rgba(0, 0, 0, 0.20);
  --Color-Palette-Black-25: rgba(0, 0, 0, 0.25);
  --Color-Palette-Black-50: rgba(0, 0, 0, 0.50);
  --Color-Palette-Navy-700-10: rgba(0, 16, 78, 0.10);
  --Color-Palette-Navy-700-15: rgba(0, 16, 78, 0.15);
  --Color-Palette-Warm-Brown-10: rgba(101, 82, 82, 0.10);
  --Color-Palette-Mint-200-50: rgba(204, 228, 224, 0.50);
  --Color-Palette-Blue-100-40: rgba(221, 235, 237, 0.40);
  --Color-Palette-Neutral-150-80: rgba(246, 246, 245, 0.80);
  --Color-Palette-Warm-800-20: rgba(232, 226, 218, 0.20);
  --Color-Palette-Warm-800-50: rgba(226, 219, 213, 0.50);
  --Color-Palette-Warm-Neutral-40: rgba(233, 232, 231, 0.40);
  --Color-Palette-Warm-Neutral-43: rgba(233, 232, 231, 0.43);
  --Color-Palette-Warm-Neutral-52: rgba(246, 246, 245, 0.52);
  --Color-Palette-Teal-600-30: rgba(84, 166, 151, 0.30);
  --Color-Palette-Light-Teal-60: rgba(155, 204, 208, 0.60);
  --Color-Palette-Blue-100-50: rgba(221, 235, 237, 0.50);
  --Color-Palette-Coral-400-30: rgba(252, 165, 128, 0.30);
  --Color-Palette-Border-Soft-30: rgba(235, 235, 235, 0.30);
  --Color-Palette-Border-Soft-40: rgba(235, 235, 235, 0.40);
  --Color-Palette-Carousel-Hover: #F8F8F8;
  --Color-Palette-Carousel-Hover-Border: #D8D8D8;
  --Color-Palette-Announcement-Neutral: #F7F6F5;
  --Color-Palette-Table-Error: #fff5f5;
  --Color-Palette-Table-Error-Hover: #ffe5e5;
  --Color-Palette-Table-Error-Text: #721c24;
  --Color-Palette-Admin-Text: #495057;
  --Color-Palette-Admin-Border: #dee2e6;
  --Color-Palette-Admin-Cell-Border: #f1f3f4;
  --Color-Palette-Private-Active-Surface: #FFFBF8;
  --Color-Palette-Private-Active-Accent: #FFB19D;
  --Color-Palette-Legacy-Text: #685C56;
  --Color-Palette-Legacy-Modal-Text: #1B1B1B;
  --Color-Palette-Legacy-Modal-Shadow: rgb(238 238 238);
  --Color-Palette-Legacy-Notice-Surface: rgb(238, 238, 238);
  --Color-Palette-Private-Danger: #e63c2e;
  --Color-Palette-Menu-Backdrop: #F0F8F6;
}

:root,
:where([data-ui-theme="public"]) {
  /* Public theme from AppController::UI_THEME_PUBLIC. */
  --Color-Theme-Primary: var(--Color-Palette-Coral-600);
  --Color-Theme-Primary-Hover: var(--Color-Palette-Coral-600-Hover);
  --Color-Theme-Secondary: var(--Color-Palette-Navy-600);
  --Color-Theme-Secondary-Hover: var(--Color-Palette-Navy-600-Hover);
  --Color-Theme-Focus: var(--Color-Palette-Teal-600);
  --Color-Theme-Surface: var(--Color-Palette-White);
  --Color-Theme-Surface-Subtle: var(--Color-Palette-Warm-100);
  --Color-Theme-Text: var(--Color-Palette-Navy-700);
  --Color-Theme-Text-Secondary: var(--Color-Palette-Navy-500);

  /* Primary colors */
  --Color-Primary-White: var(--Color-Palette-White);
  --Color-Primary-White-Hover: var(--Color-Palette-White-Hover);
  --Color-Primary-Red-300: var(--Color-Palette-Coral-300);
  --Color-Primary-Red-600: var(--Color-Palette-Coral-600);
  --Color-Primary-Red-700: var(--Color-Palette-Coral-700);
  --Color-Primary-Red-600-Hover: var(--Color-Palette-Coral-600-Hover);
  --Color-Primary-Red-600-Pulse: var(--Color-Palette-Coral-600-Pulse);
  --Color-Primary-Red-600-Pulse-Soft: var(--Color-Palette-Coral-600-Pulse-Soft);

  /* Shared neutral surfaces */
  --Color-Primary-Neutral-100: var(--Color-Palette-Warm-100);
  --Color-Primary-Neutral-200: var(--Color-Palette-Neutral-100);
  --Color-Primary-Neutral-300: var(--Color-Palette-Neutral-200);
  --Color-Primary-Neutral-400: var(--Color-Palette-Neutral-400);
  --Color-Primary-Neutral-500: var(--Color-Palette-Warm-500);
  --Color-Primary-Neutral-500-Hover: var(--Color-Palette-Warm-500-Hover);
  --Color-Primary-Neutral-700: var(--Color-Palette-Neutral-850);

  /* Shared secondary/accent colors */
  --Color-Secondary-Navy-600: var(--Color-Palette-Navy-600);
  --Color-Secondary-Navy-600-Hover: var(--Color-Palette-Navy-600-Hover);
  --Color-Secondary-Yellow-500: var(--Color-Palette-Yellow-500);
  --Color-Secondary-Blue-500: var(--Color-Palette-Blue-500);
  --Color-Secondary-Teal-500: var(--Color-Palette-Teal-600);
  --Color-Focus: var(--Color-Secondary-Teal-500); /* duplicate alias */
  --Color-Primary-Teal-500: var(--Color-Palette-Teal-500);
  --Color-Primary-Teal-800: var(--Color-Palette-Teal-800);
  --Color-Primary-Green-100: var(--Color-Palette-Green-100);
  --Color-Primary-Green-800: var(--Color-Palette-Green-800);
  --Color-Brand-Teal-600: var(--Color-Secondary-Teal-500); /* duplicate alias */
  --Color-Brand-Teal-600-Hover: var(--Color-Palette-Teal-600-Hover);

  /* Shared warm brand colors */
  --Color-Brand-10: var(--Color-Palette-Warm-10);
  --Color-Brand-25: var(--Color-Palette-Warm-25);
  --Color-Brand-100: var(--Color-Palette-Warm-600);
  --Color-Brand-200: var(--Color-Palette-Warm-700);
  --Color-Light-Teal: var(--Color-Palette-Light-Teal);
  --Color-Very-Light-Teal: var(--Color-Palette-Warm-400);
  --Color-Backdrop-Teal-Soft: var(--Color-Palette-Warm-300);
  --Color-Background-Light-Teal: var(--Color-Palette-Warm-200);
  --Color-Background-Teal-100: var(--Color-Palette-Info-100);
  --Color-Background-Note-Info-Soft: var(--Color-Palette-Info-150);
  --Color-Background-Badge-Info: var(--Color-Palette-Info-300);
  --Color-Background-Badge-Neutral: var(--Color-Palette-Warm-Neutral-43);
  --Color-Background-Badge-Pink: var(--Color-Palette-Pink-100);
  --Color-Text-Badge-Pink: var(--Color-Palette-Pink-800);
  --Color-Backdrop-Neutral-Soft: var(--Color-Palette-Warm-Neutral-52);
  --Color-Background-Boolean-Unselected: var(--Color-Palette-Neutral-150);
  --Color-Background-Boolean-Selected: var(--Color-Palette-Teal-600-30);
  --Color-Background-Boolean-Small-Unselected: var(--Color-Palette-Blue-100-50);
  --Color-Background-Boolean-Small-Selected: var(--Color-Palette-Light-Teal-60);
  --Color-Background-Step-Badge: var(--Color-Palette-Info-125);
  --Color-Icon-Teal: var(--Color-Palette-Info-Icon);

  /* Shared text colors */
  --Color-Text-Navy-500: var(--Color-Palette-Navy-500);
  --Color-Text-Navy-700: var(--Color-Palette-Navy-700);
  --Color-Text-Primary: var(--Color-Palette-Warm-Text-600);
  --Color-Icon-Primary: var(--Color-Text-Primary); /* duplicate alias */
  --Color-Text-Dark: var(--Color-Palette-Neutral-900);
  --Color-Text-Black: var(--Color-Palette-Black);
  --Color-Text-Boolean-Unselected: var(--Color-Palette-Neutral-600);
  --Color-Text-Boolean-Selected: var(--Color-Palette-Teal-700);
  --Color-Text-Boolean-Small: var(--Color-Text-Dark); /* duplicate alias */
  --Color-Text-Mid: var(--Color-Palette-Neutral-750);
  --Color-Text-Badge-Neutral: var(--Color-Palette-Neutral-650);
  --Color-Text-Muted-Teal: var(--Color-Palette-Info-Muted);
  --Color-Text-Step-Badge: var(--Color-Palette-Neutral-700);
  --Text-Text-600: var(--Color-Palette-Warm-Text-500);
  --Color-Text-Type-600: var(--Color-Palette-Type-600);
  --Color-Text-Subtitle: var(--Color-Palette-Neutral-550);
  --Color-Text-Placeholder: var(--Color-Palette-Neutral-575);
  --Color-Text-Body-Warm: var(--Color-Palette-Warm-Text-700);
  --Color-Text-Signature: var(--Color-Palette-Warm-Text-800);

  /* Shared borders, overlays, and utility colors */
  --Color-Border-Light: var(--Color-Palette-Neutral-250);
  --Color-Border-Soft: var(--Color-Primary-Neutral-300); /* duplicate alias */
  --Color-Border-Soft-30: var(--Color-Palette-Border-Soft-30);
  --Color-Border-Soft-40: var(--Color-Palette-Border-Soft-40);
  --Color-Border-Soft-Alt: var(--Color-Palette-Neutral-300);
  --Color-Border-Note-Info-Soft: var(--Color-Palette-Info-200);
  --Color-Border-Warm: var(--Color-Palette-Warm-800);
  --Color-Border-100: var(--Color-Palette-Warm-Border-100);
  --Color-Icon-Warm-Neutral: var(--Color-Palette-Warm-Neutral);
  --Color-Icon-Nav-Pill-User: var(--Color-Palette-Neutral-500);
  --Color-Backdrop-Warm-Neutral-40: var(--Color-Palette-Warm-Neutral-40);
  --Color-Background-Warm-Neutral-50: var(--Color-Palette-Warm-50);
  --Color-Neutral-50: var(--Color-Palette-Neutral-50);
  --Color-Neutral-300: var(--Color-Palette-Neutral-350);
  --Color-Neutral-600: var(--Color-Palette-Neutral-800);
  --Color-Neutral-800: var(--Color-Palette-Neutral-950);
  --Color-Primary-White-20: var(--Color-Palette-White-20);
  --Color-Primary-White-30: var(--Color-Palette-White-30);
  --Color-Primary-White-60: var(--Color-Palette-White-60);
  --Color-Overlay-White-80: var(--Color-Palette-White-80);
  --Color-Overlay-White-90: var(--Color-Palette-White-90);
  --Color-Overlay-Black-50: var(--Color-Palette-Black-50);
  --Color-Shadow-Black-06: var(--Color-Palette-Black-06);
  --Color-Shadow-Black-08: var(--Color-Palette-Black-08);
  --Color-Shadow-Black-15: var(--Color-Palette-Black-15);
  --Color-Shadow-Black-20: var(--Color-Palette-Black-20);
  --Color-Shadow-Black-25: var(--Color-Palette-Black-25);
  --Color-Shadow-Black-Solid: var(--Color-Palette-Black-Rgb);
  --Color-Shadow-Navy-700-10: var(--Color-Palette-Navy-700-10);
  --Color-Shadow-Navy-700-15: var(--Color-Palette-Navy-700-15);
  --Color-Background-Input-Action: var(--Color-Palette-Warm-800-50);
  --Color-Background-Carousel-Hover: var(--Color-Palette-Carousel-Hover);
  --Color-Border-Carousel-Hover: var(--Color-Palette-Carousel-Hover-Border);
  --Color-Background-Announcement-Neutral: var(--Color-Palette-Announcement-Neutral);
  --Color-Text-Announcement-Neutral: var(--Color-Palette-Legacy-Text);
  --Color-Background-Table-Error: var(--Color-Palette-Table-Error);
  --Color-Background-Table-Error-Hover: var(--Color-Palette-Table-Error-Hover);
  --Color-Text-Table-Error: var(--Color-Palette-Table-Error-Text);
  --Color-Text-Admin: var(--Color-Palette-Admin-Text);
  --Color-Border-Admin: var(--Color-Palette-Admin-Border);
  --Color-Border-Admin-Cell: var(--Color-Palette-Admin-Cell-Border);
  --Color-Text-Legacy-Shell: var(--Color-Palette-Legacy-Text);
  --Color-Text-Legacy-Modal: var(--Color-Palette-Legacy-Modal-Text);
  --Color-Shadow-Legacy-Modal: var(--Color-Palette-Legacy-Modal-Shadow);
  --Color-Background-Legacy-Notice: var(--Color-Palette-Legacy-Notice-Surface);
  --Color-Text-Legacy-Warn: var(--Color-Palette-Black-Text-Variable);
  --Color-Border-Private-Nav-Section: var(--Color-Palette-Warm-Brown-10);
  --Color-Background-Step-Complete: var(--Color-Palette-Mint-200-50);
  --Color-Background-Badge-Neutral-Strong: var(--Color-Palette-Blue-100-40);
  --Color-Background-Collapsible-Summary: var(--Color-Palette-Neutral-150-80);
  --Color-Background-Menu-Backdrop: var(--Color-Palette-Menu-Backdrop);
  --Color-Border-Focus-Inverse: var(--Color-Primary-White);
}

:root,
:where([data-ui-theme="private"]) {
  /* Private theme from AppController::UI_THEME_PRIVATE. */
  --Color-Theme-Primary: var(--Color-Palette-Teal-600);
  --Color-Theme-Primary-Hover: var(--Color-Palette-Teal-600-Hover);
  --Color-Theme-Secondary: var(--Color-Palette-Navy-600);
  --Color-Theme-Secondary-Hover: var(--Color-Palette-Navy-600-Hover);
  --Color-Theme-Focus: var(--Color-Palette-Teal-600);
  --Color-Theme-Surface: var(--Color-Palette-White);
  --Color-Theme-Surface-Subtle: var(--Color-Palette-Warm-100);
  --Color-Theme-Text: var(--Color-Palette-Navy-700);
  --Color-Theme-Text-Secondary: var(--Color-Palette-Navy-500);

  --Color-Text-Private-Nav: var(--Color-Palette-Private-Nav);
}

:root,
:where([data-ui-theme="private_v2"]) {
  /* Private V2 theme from AppController::UI_THEME_PRIVATE_V2. */
  --Color-Theme-Primary: var(--Color-Palette-Teal-600);
  --Color-Theme-Primary-Hover: var(--Color-Palette-Teal-600-Hover);
  --Color-Theme-Secondary: var(--Color-Palette-Navy-600);
  --Color-Theme-Secondary-Hover: var(--Color-Palette-Navy-600-Hover);
  --Color-Theme-Focus: var(--Color-Palette-Teal-600);
  --Color-Theme-Surface: var(--Color-Palette-Warm-50);
  --Color-Theme-Surface-Subtle: var(--Color-Palette-Warm-75);
  --Color-Theme-Text: var(--Color-Palette-Teal-900);
  --Color-Theme-Text-Secondary: var(--Color-Palette-Private-Action);

  /* Private shell */
  --Color-Background-Private-Shell-V2-Active: var(--Color-Palette-Private-Info-Surface);
  --Color-Text-Private-Shell-V2-Default: var(--Color-Palette-Navy-800);
  --Color-Text-Private-Shell-V2-Active: var(--Color-Palette-Teal-900);
  --Color-Border-Private-Shell-V2: var(--Color-Palette-Warm-900);
  --Color-Border-Private-Shell-V2-Divider: var(--Color-Palette-Warm-Divider);
  --Color-Background-Tax-Column-Shaded: var(--Color-Palette-Warm-800-20);
  --Color-Border-Private-Shell-V2-Control: var(--Color-Palette-Warm-950);
  --Color-Background-Private-Shell-V2-Avatar: var(--Color-Palette-Coral-400-30);
  --Color-Background-Private-Shell-V2-Nav-Active: var(--Color-Palette-Private-Active-Surface);
  --Color-Background-Private-Shell-V2-Nav-Accent: var(--Color-Palette-Private-Active-Accent);
  --Color-Text-Private-Danger: var(--Color-Palette-Private-Danger);

  /* Private V2 surfaces */
  --Color-Background-Private-V2-Table-Header: var(--Color-Palette-Warm-150);
  --Color-Background-Private-V2-Hero-Surface: var(--Color-Palette-Warm-75);
  --Color-Background-Private-V2-Hero-Info: var(--Color-Background-Private-Shell-V2-Active); /* duplicate alias */
  --Color-Background-Private-V2-Hero-Info-Banner: var(--Color-Palette-Private-Info-Banner);
  --Color-Background-Private-V2-Hero-Warning: var(--Color-Palette-Private-Warning-Surface);
  --Color-Background-Private-V2-Hero-Success: var(--Color-Palette-Green-200);
  --Color-Background-Private-V2-Hero-Error: var(--Color-Palette-Private-Error-Surface);
  --Color-Background-Private-V2-Kpi-Card: var(--Color-Palette-Warm-125);
  --Color-Background-Private-V2-Table-Pending: var(--Color-Palette-Private-Pending);
  --Color-Background-Private-V2-Table-Complete: var(--Color-Palette-Green-500);
  --Color-Background-Private-V2-Table-Info: var(--Color-Background-Private-V2-Hero-Info-Banner); /* duplicate alias */
  --Color-Background-Private-V2-Hero-Error-Banner: var(--Color-Palette-Private-Error-Banner);
  --Color-Background-Private-V2-Referral-Card: var(--Color-Palette-Private-Referral-Surface);
  --Color-Background-Private-V2-Referral-Cta: var(--Color-Palette-Private-Referral-Cta);

  /* Private V2 borders and text */
  --Color-Border-Private-V2-Referral-Cta: var(--Color-Palette-Private-Referral-Border);
  --Color-Border-Private-V2-Hero-Action: var(--Color-Palette-Private-Muted-Action);
  --Color-Border-Private-V2-Action-Muted: var(--Color-Border-Private-V2-Hero-Action); /* duplicate alias */
  --Color-Text-Private-V2-Referral: var(--Color-Palette-Private-Referral);
  --Color-Text-Private-V2-Action-Muted: var(--Color-Border-Private-V2-Hero-Action); /* duplicate alias */
  --Color-Text-Private-V2-Table-Action: var(--Color-Palette-Private-Action);
  --Color-Text-Private-V2-Hero-Info: var(--Color-Text-Private-Shell-V2-Active); /* duplicate alias */
  --Color-Text-Private-V2-Hero-Error: var(--Color-Palette-Private-Error);
  --Color-Text-Private-V2-Hero-Warning: var(--Color-Palette-Private-Warning);
  --Color-Text-Private-V2-Table-Pending: var(--Color-Text-Private-V2-Hero-Warning); /* duplicate alias */
  --Color-Text-Private-V2-Table-Complete: var(--Color-Palette-Green-900);
  --Color-Text-Private-V2-Table-Info: var(--Color-Text-Private-Shell-V2-Active); /* duplicate alias */

  /* Avatar palette for UI/letter_avatar */
  --Color-Avatar-1: var(--Color-Secondary-Teal-500); /* duplicate alias */
  --Color-Avatar-2: var(--Color-Secondary-Navy-600); /* duplicate alias */
  --Color-Avatar-3: var(--Color-Palette-Plum-600);
  --Color-Avatar-4: var(--Color-Palette-Forest-600);
  --Color-Avatar-5: var(--Color-Palette-Coral-500);
  --Color-Avatar-6: var(--Color-Neutral-600); /* duplicate alias */
}

:where([data-ui-theme="admin"]) {
  /* Admin theme from AppController::UI_THEME_ADMIN. */
  --Color-Theme-Primary: var(--Color-Palette-Coral-600);
  --Color-Theme-Primary-Hover: var(--Color-Palette-Coral-600-Hover);
  --Color-Theme-Secondary: var(--Color-Palette-Navy-600);
  --Color-Theme-Secondary-Hover: var(--Color-Palette-Navy-600-Hover);
  --Color-Theme-Focus: var(--Color-Palette-Yellow-500);
  --Color-Theme-Surface: var(--Color-Palette-White);
  --Color-Theme-Surface-Subtle: var(--Color-Palette-Neutral-100);
  --Color-Theme-Text: var(--Color-Palette-Navy-700);
  --Color-Theme-Text-Secondary: var(--Color-Palette-Navy-500);
}

/* Inlined from webroot/css/design_v2/font.css */
:root {
    /* Font families */
    --Font-Family-Serif: "Test Martina Plantijn", "Martina Plantijn", "Times New Roman", sans-serif;
    --Font-Family-Sans: "ABC Monument Grotesk", Arial, sans-serif;
    --Font-Family-Archivo: "Archivo", Arial, sans-serif;
    --Font-Family-Inter: "Inter", Arial, Helvetica, sans-serif;
    --Font-Family-Mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --Font-Family-Signature: "Dawning of a New Day", cursive;


    /* Font weights */
    --Font-Weight-100: 100;
    --Font-Weight-300: 300;
    --Font-Weight-400: 400;
    --Font-Weight-500: 500;
    --Font-Weight-600: 600;
    --Font-Weight-700: 700;
    --Font-Weight-800: 800;
    --Font-Weight-900: 900;

    /* Line heights */
    --Text-LineHeight-Tight: 120%;
    --Text-LineHeight-Tighter: 91%;
    --Text-LineHeight-Standard: 150%;
    --Text-LineHeight-Heading-ML: 32px;
    --Text-LineHeight-Heading-2XL: 38px;
    --Text-LineHeight-Heading-4XL: 54px;
    --Text-LineHeight-Heading-XL: 34px;
    --Text-LineHeight-Heading-S: 32px; /* 133.333% for 24px */
    --Text-LineHeight-Heading-Card: 42px;
    --Text-LineHeight-Heading-Card-Title: 41px;
    --Text-LineHeight-Label-S: 16px;
    --Text-LineHeight-Body-Compact: 22px;
    --Text-LineHeight-Body-SM: 18px;
    --Text-LineHeight-Body-MD: 24px;
    --Text-LineHeight-Body-LG: 28px; /* paired with --Text-Sizes-Text-Large (20px) */
    --Text-LineHeight-Body-S: 17px;
    --Text-LineHeight-Body-Checklist-Title: 20px;
    --Text-LineHeight-Logo: 130%;
    --Text-LineHeight-Step-Badge: 14.256px;
    --Text-LineHeight-Onboarding-Guide-Step: 17.158px;
    --Text-LineHeight-Button-Small: 27.796px;
    --Text-LineHeight-Placeholder: 20px;

    /* Text colors (from webroot/css/design_v2/color.css) */
    --Text-Color-Heading: var(--Color-Text-Navy-700);
    --Text-Color-Body: var(--Color-Text-Navy-700);
    --Text-Color-Links: var(--Color-Text-Navy-500);

    --Text-Sizes-Text-Large: 20px;
    --Text-Sizes-Text-Regular: 16px;
    --Text-Sizes-Text-Medium: 18px;
    --Text-Sizes-Text-Small: 14px;

    --Text-Sizes-Heading-XXL: 56px;
    --Text-Sizes-Heading-XL: 48px;
    --Text-Sizes-Heading-L: 40px;
    --Text-Sizes-Heading-2XL: 32px;
    --Text-Sizes-Heading-4XL: 54px;
    --Text-Sizes-Heading-XL-Compact: 28px;
    --Text-Sizes-Heading-ML: 36px;
    --Text-Sizes-Heading-M: 32px;
    --Text-Sizes-Heading-S: 24px;
    --Text-Sizes-Heading-XS: 20px;
    --Text-Sizes-Heading-XS-Card: 22px;
    --Text-Sizes-Heading-Card-Title: 30px;
    --Text-Sizes-Private-Nav: 21px;

    --Text-Sizes-Body-L: var(--Text-Sizes-Text-Medium);
    --Text-Sizes-Body-M: var(--Text-Sizes-Text-Regular);
    --Text-Sizes-Body-S: 14px;
    --Text-Sizes-Micro: 11px;

    --Text-Sizes-Caption: 12px;
    --Text-Sizes-Table-Header: 13px;
    --Text-Sizes-Overline: 12px;
    --Text-Sizes-Placeholder: 15px;

    /* Letter spacing */
    --Text-LetterSpacing-Logo: 0.16em;
    --Text-LetterSpacing-Overline: 0.08em;
    --Text-LetterSpacing-Table-Header: 0.32px;
}

@font-face {
    font-family: 'Archivo';
    src: url('/css/webfonts/Archivo/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url('/css/webfonts/Archivo/Archivo-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Test Martina Plantijn';
    src: url('/css/webfonts/MartinaPlantijin/martina-plantijn-regular.woff2') format('woff2'),
        url('/css/webfonts/MartinaPlantijin/MartinaPlantijn-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Martina Plantijn';
    src: url('/css/webfonts/MartinaPlantijin/martina-plantijn-regular.woff2') format('woff2'),
        url('/css/webfonts/MartinaPlantijin/MartinaPlantijn-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Thin.woff2') format('woff2'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Thin.woff') format('woff'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-ThinItalic.woff2') format('woff2'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-ThinItalic.woff') format('woff'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-ThinItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Light.woff2') format('woff2'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Light.woff') format('woff'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-LightItalic.woff2') format('woff2'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-LightItalic.woff') format('woff'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Regular.woff2') format('woff2'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Regular.woff') format('woff'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-RegularItalic.woff2') format('woff2'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-RegularItalic.woff') format('woff'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-RegularItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Medium.woff2') format('woff2'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Medium.woff') format('woff'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-MediumItalic.woff2') format('woff2'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-MediumItalic.woff') format('woff'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Bold.woff2') format('woff2'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Bold.woff') format('woff'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-BoldItalic.woff2') format('woff2'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-BoldItalic.woff') format('woff'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Heavy.woff2') format('woff2'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Heavy.woff') format('woff'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Heavy.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-HeavyItalic.woff2') format('woff2'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-HeavyItalic.woff') format('woff'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-HeavyItalic.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Black.woff2') format('woff2'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Black.woff') format('woff'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-BlackItalic.woff2') format('woff2'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-BlackItalic.woff') format('woff'),
        url('/css/webfonts/ABCMonument/ABCMonumentGrotesk-BlackItalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Dawning of a New Day';
    src: url('/css/webfonts/DawningofaNewDay.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =============================================================================
   Typography Utility Classes
   =============================================================================
   
   ALWAYS use these utility classes instead of writing one-off font styles.
   These classes ensure consistent typography across the entire application.
   
   Common use cases:
   - Headings: typography-h1 through typography-h6
   - Body text: typography-body, typography-body-sm, typography-body-lg
   - Labels/categories: typography-overline
   - Captions/helper text: typography-caption
   
   If you need a typography combination that doesn't exist, ADD it here first!
   Never use font-family, font-size, font-weight, line-height directly in components.
   ============================================================================= */

.typography-display {
    color: var(--Text-Color-Heading);
    font-family: var(--Font-Family-Serif);
    font-size: var(--Text-Sizes-Heading-4XL);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Tight);
}

.typography-h1 {
    color: var(--Text-Color-Heading);
    font-family: var(--Font-Family-Serif);
    font-size: var(--Text-Sizes-Heading-XXL);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Tight);
}

.typography-h2 {
    color: var(--Text-Color-Heading);
    font-family: var(--Font-Family-Serif);
    font-size: var(--Text-Sizes-Heading-L);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Tight);
}

.typography-h2-m {
    color: var(--Text-Color-Heading);
    font-family: var(--Font-Family-Serif);
    font-size: var(--Text-Sizes-Heading-M);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Tight);
}

.typography-h3 {
    color: var(--Text-Color-Heading);
    font-family: var(--Font-Family-Serif);
    font-size: var(--Text-Sizes-Heading-S);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Tight);
}

.typography-h4 {
    color: var(--Text-Color-Heading);
    font-family: var(--Font-Family-Serif);
    font-size: var(--Text-Sizes-Heading-XS);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Tight);
}

.typography-h4-strong {
    color: var(--Text-Color-Heading);
    font-family: var(--Font-Family-Serif);
    font-size: var(--Text-Sizes-Heading-XS);
    font-style: normal;
    font-weight: var(--Font-Weight-700);
    line-height: var(--Text-LineHeight-Tight);
}

.typography-h5 {
    color: var(--Text-Color-Heading);
    font-family: var(--Font-Family-Serif);
    font-size: var(--Text-Sizes-Body-L);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Tight);
}

.typography-h6 {
    color: var(--Text-Color-Heading);
    font-family: var(--Font-Family-Serif);
    font-size: var(--Text-Sizes-Body-M);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Tight);
}

.typography-body-lg {
    color: var(--Text-Color-Body);
    font-family: var(--Font-Family-Sans);
    font-size: var(--Text-Sizes-Body-L);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Standard);
}

.typography-body {
    color: var(--Text-Color-Body);
    font-family: var(--Font-Family-Sans);
    font-size: var(--Text-Sizes-Body-M);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Standard);
}

.typography-body-sm {
    color: var(--Text-Color-Body);
    font-family: var(--Font-Family-Sans);
    font-size: var(--Text-Sizes-Body-S);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Standard);
}

.typography-checklist-item-title {
    color: var(--Color-Text-Dark);
    font-family: var(--Font-Family-Inter);
    font-size: var(--Text-Sizes-Body-S);
    font-style: normal;
    font-weight: var(--Font-Weight-600);
    line-height: var(--Text-LineHeight-Label-S);
}

/* Small semibold sans label — Figma "Label S" (section/group headers, table-style captions) */
.typography-label-s {
    color: var(--Color-Text-Dark);
    font-family: var(--Font-Family-Sans);
    font-size: var(--Text-Sizes-Body-S);
    font-style: normal;
    font-weight: var(--Font-Weight-600);
    line-height: var(--Text-LineHeight-Label-S);
}

.typography-caption {
    color: var(--Text-Color-Body);
    font-family: var(--Font-Family-Sans);
    font-size: var(--Text-Sizes-Caption);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Standard);
}

.typography-caption-serif {
    color: var(--Text-Color-Body);
    font-family: var(--Font-Family-Sans);
    font-size: var(--Text-Sizes-Caption);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Standard);
}

.typography-overline {
    color: var(--Text-Color-Heading);
    font-family: var(--Font-Family-Sans);
    font-size: var(--Text-Sizes-Overline);
    font-style: normal;
    font-weight: var(--Font-Weight-700);
    line-height: var(--Text-LineHeight-Standard);
    letter-spacing: var(--Text-LetterSpacing-Overline);
    text-transform: uppercase;
}

.typography-button {
    font-family: var(--Font-Family-Sans);
    font-weight: var(--Font-Weight-500);
    line-height: var(--Text-LineHeight-Standard);
}

.typography-card-title {
    color: var(--Color-Text-Navy-700);
    font-family: var(--Font-Family-Sans);
    font-size: var(--Text-Sizes-Heading-XS-Card);
    font-style: normal;
    font-weight: var(--Font-Weight-500);
    line-height: var(--Text-LineHeight-Tighter);
}

/* Feature card title: Serif 24px/32px, dark text (e.g. info cards) */
.typography-card-feature-title {
    color: var(--Color-Text-Dark);
    font-family: var(--Font-Family-Serif);
    font-size: var(--Text-Sizes-Heading-S);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Heading-S);
}

/* Body text: Inter 16px/24px, warm gray (card body copy) */
.typography-body-warm {
    color: var(--Color-Text-Body-Warm);
    font-family: var(--Font-Family-Inter);
    font-size: var(--Text-Sizes-Body-M);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Standard);
}

.typography-onboarding-guide-step {
    color: var(--Color-Text-Step-Badge);
    font-family: var(--Font-Family-Inter);
    font-size: var(--Text-Sizes-Text-Regular);
    font-style: normal;
    font-weight: var(--Font-Weight-500);
    line-height: var(--Text-LineHeight-Onboarding-Guide-Step);
}

.typography-signature {
    color: var(--Color-Text-Signature);
    font-family: var(--Font-Family-Signature);
    font-size: 27px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.typography-paycheck-date {
    color: var(--Text-Color-Heading);
    font-family: var(--Font-Family-Serif);
    font-size: var(--Text-Sizes-Heading-M);
    font-style: normal;
    font-weight: var(--Font-Weight-400);
    line-height: var(--Text-LineHeight-Tighter);
}

.pp-text--dark {
    color: var(--Color-Text-Dark);
}

.pp-text--muted {
    color: var(--Color-Text-Navy-500);
}

.pp-text--strong {
    font-weight: var(--Font-Weight-600);
}

.pp-text--no-margin {
    margin: 0;
}

/* Inlined from webroot/css/design_v2/standards.css */
/* Design standards: semantic tokens */
/* Keep to values used in Figma */

:root {
  /* Spacing aliases (semantic) */
  --Space-3XS: 2px;
  --Space-XXS: 4px;
  --Space-6: 6px;
  --Space-XS: 8px;
  --Space-10: 10px;
  --Space-Button-Small-Padding-Y: 2.606px;
  --Space-Button-Small-Gap: 8.686px;
  --Space-S: 12px;
  --Space-SM: 14px;
  --Space-M: 16px;
  --Space-LM: 18px;
  --Space-L: 24px;
  --Space-20: 20px;
  --Space-22: 22px;
  --Space-30: 30px;
  --Space-LL: 33px;
  --Space-XL: 32px;
  --Space-40: 40px;
  --Space-42: 42px;
  --Space-48: 48px;
  --Space-XXL: 64px;
  --Space-50: 50px;
  --Space-60: 60px;
  --Space-65: 65px;
  --Space-80: 80px;
  --Space-XXXL: 128px;

  /* Sizing */
  --Size-24: 24px;
  --Size-28: 28px;
  --Size-32: 32px;
  --Size-34: 34px;
  --Size-40: 40px;
  --Size-44: 44px;
  --Size-56: 56px;
  --Size-59: 59px;
  --Size-64: 64px;
  --Size-68: 68px;
  --Size-72: 72px;
  --Size-80: 80px;
  --Size-96-Card: 96px;
  --Size-96: 96px;
  --Size-98: 98px;
  --Size-100: 100px;
  --Size-108: 108px;
  --Size-Button-Small-Width: 113.788px;
  --Size-Button-Small-Height: 40.825px;
  --Size-115: 115px;
  --Size-128: 128px;
  --Size-130: 130px;
  --Size-135: 135px;
  --Size-160: 160px;
  --Size-170: 170px;
  --Size-175: 175px;
  --Size-280: 280px;
  --Size-200: 200px;
  --Size-228: 228px;
  --Size-258: 258px;
  --Size-300: 300px;
  --Size-400: 400px;
  --Size-500: 500px;
  --Size-600: 600px;
  --Size-172: 172px;
  --Size-41: 41px;
  --Size-Step-Badge-Width: 91px;
  --Size-1000: 1000px;
  --Space-Gap-Large: 45px;
  --Space-Gap-XLarge: 52px;

  /* Private V3 shell layout */
  --Layout-Private-V2-Sidebar-Width: var(--Size-228);
  --Layout-Private-V2-Sidebar-Outer-Gutter: var(--Space-M);
  --Layout-Private-V2-Page-Gutter: var(--Space-48);
  --Layout-Private-V2-Content-Gutter: var(--Space-48);
  --Layout-Private-V2-Content-Bottom-Gutter: var(--Space-48);
  --Layout-Private-V2-Header-Height: var(--Space-80);
  --Layout-Private-V2-Page-Start: calc(
    var(--Layout-Private-V2-Sidebar-Outer-Gutter) +
    var(--Layout-Private-V2-Sidebar-Width)
  );
  --Layout-Private-V2-Desktop-Content-Start: calc(
    var(--Layout-Private-V2-Page-Start) +
    var(--Layout-Private-V2-Page-Gutter)
  );

  /* Borders */
  --Border-Width-1: 1px;
  --Border-Width-12: 1.2px;
  --Border-Width-2: 2px;
  --Border-Width-3: 3px;
  --Border-Width-Radio-Emphasis: 2px;

  /* Radio controls */
  --Control-Radio-Size: 18px;
  --Border-Style: solid;

  /* Feedback */
  --Feedback-Warning-Background: color-mix(in srgb, var(--Color-Secondary-Yellow-500) 16%, var(--Color-Primary-White));
  --Feedback-Warning-Border: color-mix(in srgb, var(--Color-Secondary-Yellow-500) 42%, var(--Color-Primary-White));
  --Feedback-Warning-Icon: color-mix(in srgb, var(--Color-Secondary-Yellow-500) 78%, var(--Color-Text-Navy-700));
  --Feedback-Warning-Text: var(--Color-Text-Navy-700);

  /* Radius */
  --Radius-XXS: 4px;
  --Radius-XS: 6px;
  --Radius-100: 100px;
  --Radius-200: 8px;
  --Radius-400: 12px;
  --Radius-425: 16px;
  --Radius-450: 17px;
  --Radius-500: 18px;
  --Radius-600: 24px;
  --Radius-Pill: 100px;
  --Radius-Pill-48: 48px;
  --Radius-Pill-32: 32px;
  --Radius-Pill-112: 112px;
  --Radius-Button-Small: 34.745px;

  /* Shadows */
  --Shadow-100: 0 1px 2px rgba(0, 0, 0, 0.06);
  --Shadow-150: 0 4px 8px rgba(0, 0, 0, 0.05);
  --Shadow-200: 0 2px 8px rgba(0, 0, 0, 0.10);
  --Shadow-250: 0 4px 14px rgba(0, 0, 0, 0.05);
  --Shadow-Private-Shell-V2: 5px 0 20px rgba(0, 0, 0, 0.04);
  --Shadow-300: 0 4px 16px rgba(0, 0, 0, 0.08);
  --Shadow-350: 0 4px 34px rgba(0, 0, 0, 0.11);
  --Shadow-Right-350: 10px 0 34px -20px rgba(0, 0, 0, 0.11);
  --Shadow-Top-200: 0 -2px 8px rgba(0, 0, 0, 0.08);

  /* Opacity */
  --Opacity-Disabled: 0.5;
  --Opacity-Active: 0.8;
  --Opacity-Hover-Overlay: 0.08;
  --Opacity-Hover-Overlay-Light: 0.15;

  /* Focus states - for keyboard navigation accessibility */
  --Focus-Outline-Width: 2px;
  /* outline thickness for :focus-visible states (buttons, links) */
  --Focus-Outline-Offset: 2px;
  /* space between element and outline */
  --Focus-Ring-Blur: 3px;
  /* box-shadow blur radius for form input focus rings */

  /* Motion */
  /* unify motion tokens across system */
  --Motion-Fast: 150ms;
  --Motion-Std: 250ms;
  --Motion-Slow: 400ms;
  --Motion-Hover: 200ms;
  /* Overlay-specific motion for full-screen menus, drawers, modals */
  --Motion-Overlay: 700ms;
  --Easing-Std: ease;
  --Easing-Ease: ease;
  --Easing-Hover: ease-out;
  /* Spring-like easing for playful/overshoot transitions */
  --Easing-Spring: cubic-bezier(.175, .885, .32, 1.275);

  /* Transitions (generic shorthands) */
  --Transition-All: all var(--Motion-Std) var(--Easing-Std);
  --Transition-Color: color var(--Motion-Std) var(--Easing-Std);
  --Transition-Opacity: opacity var(--Motion-Std) var(--Easing-Std);
  --Transition-Transform: transform var(--Motion-Std) var(--Easing-Std);
  --Transition-Transform-Spring: transform var(--Motion-Std) var(--Easing-Std);
  --Transition-Background: background-color var(--Motion-Std) var(--Easing-Std);
  --Transition-Border: border-color var(--Motion-Std) var(--Easing-Std);

  /* Layers (z-index scale) */
  --Z-Navbar: 1100;
  --Z-Overlay-Toggle: 1001;
  --Z-Overlay: 1000;
  --Z-Tooltip: 9999;
  --Z-Dropdown: 100;
  /* Popovers (date picker, autocomplete) must float above modals/drawers (20000-20001) */
  --Z-Popover: 20100;

}

/* Inlined from webroot/css/design_v2/breakpoints.css */
/* Breakpoint tokens for responsive design */

:root {
  /* Breakpoint values (Unfortunately requires scss to work in media queries.) */
  --Breakpoint-Mobile-Max: 599px;
  --Breakpoint-Tablet-Min: 600px;
  --Breakpoint-Tablet-Max: 1239px;
  --Breakpoint-Desktop-Min: 1240px;

  /* Container widths aligned to breakpoints (USE THESE in CSS) */
  --Container-Width-Tablet: 600px;
  --Container-Width-Content: 872px;
  --Container-Width-Desktop: 1240px;
  --Container-Width-Desktop-Wide: 1484px;
}

/* ⚠️ IMPORTANT: CSS variables cannot be used in media query conditions!
 * Media queries are evaluated before CSS variables are resolved.
 * Use the pixel values directly in @media rules, but use the container
 * width variables for max-width properties.
 *
 * CORRECT Usage:
 *   @media (min-width: 600px) {
 *     .container { max-width: var(--Container-Width-Tablet); }
 *   }
 *
 * INCORRECT (won't work):
 *   @media (min-width: var(--Breakpoint-Tablet-Min)) { ... }
 *
 * Standard Breakpoints:
 *   Mobile:  @media (max-width: 599px) { ... }
 *   Tablet:  @media (min-width: 600px) { ... }
 *   Desktop: @media (min-width: 1240px) { ... }
 *
 * Container widths (use these!):
 *   max-width: var(--Container-Width-Tablet);
 *   max-width: var(--Container-Width-Desktop);
 *
 * Utility: hide on mobile (e.g. in-panel actions when sticky footer shows same action)
 */
@media (max-width: 599px) {
  .pp-hidden-on-mobile {
    display: none !important;
  }
}


/* V2 form control styles merged into form_base_v2.css */

/* Base and form foundations */
/* Inlined from webroot/css/design_v2/base_v2.css */
/* Base V2 - Global base styles for Design System V2
 * 
 * This file contains foundational styles that apply to all pages
 * using the V2 design system. It builds on top of normalize.css
 * and uses design tokens from font.css, color.css, and standards.css.
 * 
 * Includes:
 * - Browser resets
 * - Base typography (body, headings, paragraphs)
 * - Accessibility utilities (screen reader only, focus, reduced motion)
 * - Loading states
 */

/* Additional resets beyond normalize */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Ensure box-sizing is inherited by all elements */
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Base body typography */
body {
  background-color: var(--Color-Primary-White);
  color: var(--Text-Color-Body);
  font-family: var(--Font-Family-Sans);
  font-weight: var(--Font-Weight-400);
  font-size: var(--Text-Sizes-Body-M);
  line-height: var(--Text-LineHeight-Standard);
}

/* Paragraphs */
p {
  color: var(--Text-Color-Body);
  font-family: var(--Font-Family-Sans);
  font-size: var(--Text-Sizes-Body-M);
  line-height: var(--Text-LineHeight-Standard);
  margin: 0 0 1rem;
}

/* Headings - base styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--Text-Color-Heading);
  margin: 0 0 0.5em;
}

h1 {
  font-family: var(--Font-Family-Serif);
  font-weight: var(--Font-Weight-400);
  font-size: var(--Text-Sizes-Heading-XL);
  line-height: var(--Text-LineHeight-Tight);
}

h2 {
  font-family: var(--Font-Family-Serif);
  font-weight: var(--Font-Weight-400);
  font-size: var(--Text-Sizes-Heading-L);
  line-height: var(--Text-LineHeight-Tight);
}

h3 {
  font-family: var(--Font-Family-Serif);
  font-weight: var(--Font-Weight-400);
  font-size: var(--Text-Sizes-Heading-S);
  line-height: var(--Text-LineHeight-Tight);
}

h4 {
  font-family: var(--Font-Family-Serif);
  font-weight: var(--Font-Weight-400);
  font-size: var(--Text-Sizes-Heading-XS);
  line-height: var(--Text-LineHeight-Tight);
}

h5 {
  font-family: var(--Font-Family-Serif);
  font-weight: var(--Font-Weight-400);
  font-size: var(--Text-Sizes-Body-L);
  line-height: var(--Text-LineHeight-Tight);
}

h6 {
  font-family: var(--Font-Family-Serif);
  font-weight: var(--Font-Weight-500);
  font-size: var(--Text-Sizes-Body-M);
  line-height: var(--Text-LineHeight-Tight);
}

/* Small text */
small,
.caption {
  font-size: var(--Text-Sizes-Caption);
}

/* Buttons: always sans-serif */
button,
.pp-btn,
input[type="button"],
input[type="submit"] {
  font-family: var(--Font-Family-Sans);
}

/* Responsive Typography Overrides */
/* Mobile h2 size reduction */
@media (max-width: 599px) {
  :root {
    --Text-Sizes-Heading-L: var(--Text-Sizes-Heading-M);
  }

  h2.typography-h2,
  .typography-h2 {
    font-size: var(--Text-Sizes-Heading-M) !important;
  }
}

/* ============================================================================
   ACCESSIBILITY UTILITIES
   ============================================================================ */

/* Screen reader only - visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visible styles for keyboard navigation */
:focus-visible {
  outline: var(--Focus-Outline-Width) solid var(--Color-Secondary-Blue-500);
  outline-offset: var(--Focus-Outline-Offset);
}

/* Main containers should never render focus outlines. */
main:focus,
main:focus-visible {
  outline: none;
}

/* Loading state for page transitions */
html.loading {
  cursor: wait;
}

html.loading * {
  pointer-events: none;
}

/* Global loading overlay (shown during form submission) */
.page-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--Color-Overlay-White-80);
  z-index: 20002;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--Motion-Fast) var(--Easing-Ease),
    visibility 0s linear var(--Motion-Fast);
}

/* When shown, fade in with opacity transition */
.page-loading-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--Motion-Fast) var(--Easing-Ease),
    visibility 0s;
}

/* Circle loader is self-sized via its own CSS; just center it in the overlay */
.page-loading-overlay .pp-circle-loader {
  margin: auto;
}

/* Reduced motion: respect user preference to minimize animations */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Circle loader handles its own reduced-motion via its colocated CSS */
}

/* Private theme: default teal links and no underline for inline anchors */
body[data-ui-theme="private"] a {
  color: var(--Color-Secondary-Teal-500);
  text-decoration: none;
}

body[data-ui-theme="private"] a:hover {
  color: var(--Color-Brand-Teal-600-Hover);
  text-decoration: none;
}

/* Prevent HubSpot autotrack errors on SVG child elements.
 * HubSpot's getSelector_() returns undefined for SVG internals (<path>, <use>, etc.),
 * causing a TypeError. Routing clicks to the parent button/anchor avoids this. */
:is(a, button, [role="button"]) svg,
:is(a, button, [role="button"]) svg * {
  pointer-events: none;
}

/* Inlined from webroot/css/design_v2/form_base_v2.css */
/**
 * Form Base V2 - Shared form behaviors for Design System V2
 * 
 * This file contains FORM-LEVEL behaviors that are reused across all V2 forms:
 * - Field wrapper animations (error shake, opacity transitions)
 * - Submit button states
 * - Loading overlay/spinner
 * - Two-column responsive grid
 * 
 * Import this in design_v2/design_system_v2.css before component-specific form styles.
 */

/* Field container - opacity transition for dynamic show/hide */
.pp-v2-form .pp-v2-field {
  transition: opacity var(--Motion-Fast) var(--Easing-Ease);
}

/* Error state shake animation */
.pp-v2-form .pp-v2-field.has-error {
  animation: shake var(--Motion-Slow) var(--Easing-Ease);
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(4px);
  }
}

/* Pulse animation for error fields on submit click */
@keyframes pp-hint-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pp-hint-nudge {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-2px); }
  40%      { transform: translateX(2px); }
  60%      { transform: translateX(-1px); }
  80%      { transform: translateX(1px); }
}

.pp-v2-incomplete-hint.is-nudging {
  animation: pp-hint-nudge var(--Motion-Slow) var(--Easing-Ease);
}

@keyframes pp-field-pulse {
  0%   { box-shadow: 0 0 0 0 var(--Color-Primary-Red-600-Pulse); }
  50%  { box-shadow: 0 0 0 6px var(--Color-Primary-Red-600-Pulse-Soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Override shake animation when pulsing — higher specificity needed to beat .pp-v2-form .pp-v2-field.has-error */
.pp-v2-form .pp-v2-field.is-pulsing {
  animation: pp-field-pulse 1s ease-out 2;
}

/* Incomplete field hint near submit button — clickable to scroll to error */
.pp-v2-incomplete-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--Space-XS);
  width: 100%;
  margin: 0 0 var(--Space-XS);
  padding: var(--Space-XS) var(--Space-M);
  background: color-mix(in srgb, var(--Color-Primary-Red-600) 7%, var(--Color-Primary-White));
  border: var(--Border-Width-1) var(--Border-Style) var(--Color-Primary-Red-300);
  border-radius: var(--Radius-400);
  color: var(--Color-Primary-Red-600);
  font-family: var(--Font-Family-Sans);
  font-size: var(--Text-Sizes-Body-S);
  font-weight: var(--Font-Weight-600);
  line-height: var(--Text-LineHeight-Standard);
  cursor: pointer;
  animation: pp-hint-enter var(--Motion-Std) var(--Easing-Spring) both;
  transition: background-color var(--Motion-Fast) var(--Easing-Ease),
    border-color var(--Motion-Fast) var(--Easing-Ease),
    transform var(--Motion-Fast) var(--Easing-Ease),
    box-shadow var(--Motion-Fast) var(--Easing-Ease);
}

.pp-v2-incomplete-hint:hover {
  background-color: color-mix(in srgb, var(--Color-Primary-Red-600) 12%, var(--Color-Primary-White));
  border-color: var(--Color-Primary-Red-600);
  transform: translateY(-1px);
  box-shadow: var(--Shadow-100);
}

.pp-v2-incomplete-hint:active {
  transform: translateY(0);
  box-shadow: none;
}

.pp-v2-incomplete-hint:focus-visible {
  outline: var(--Focus-Outline-Width) solid var(--Color-Focus);
  outline-offset: var(--Focus-Outline-Offset);
}

.pp-v2-incomplete-hint__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.pp-v2-incomplete-hint[hidden] {
  display: none;
}

/* Submit button states */
.pp-v2-form .pp-v2-submit {
  transition: background-color var(--Motion-Std) var(--Easing-Ease),
    transform var(--Motion-Fast) var(--Easing-Ease),
    box-shadow var(--Motion-Fast) var(--Easing-Ease);
}

.pp-v2-form .pp-v2-submit:hover:not(.is-disabled) {
  transform: translateY(-1px);
}

.pp-v2-form .pp-v2-submit:active:not(.is-disabled) {
  transform: translateY(0);
}

/* Busy/disabled submit button states */
.pp-v2-form .pp-v2-submit[aria-busy="true"],
.pp-v2-form .pp-v2-submit.submitting {
  cursor: wait;
  pointer-events: none;
  /* Preserve button width to avoid layout shift */
  min-width: fit-content;
}

/* Overlay for form submission loading state */
.pp-v2-form .overlay {
  display: none;
  /* Visibility controlled via JavaScript */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--Color-Overlay-White-90);
  z-index: 9999;
  cursor: wait;
}

/* Circle loader is self-sized; center it in the form overlay */
.pp-v2-form .overlay .pp-circle-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Two-column responsive grid pattern */
.pp-v2-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--Space-M);
}

@media (min-width: 768px) {
  .pp-v2-two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.pp-form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--Space-XL);
  min-width: 0;
}

.pp-form-stack--large {
  gap: var(--Space-L);
}

.pp-form-stack--m {
  gap: var(--Space-M);
}

.pp-form-stack--s {
  gap: var(--Space-S);
}

.pp-form-stack--xs {
  gap: var(--Space-XS);
}

.pp-form-stack--3xs {
  gap: var(--Space-3XS);
}

.pp-content-narrow {
  width: 100%;
  max-width: 800px;
}

@media (min-width: 1240px) {
  .pp-content-narrow--pad-left {
    padding-left: var(--Space-10);
  }
}

.pp-form-question {
  margin-bottom: var(--Space-M);
}

[data-pp-validate] fieldset,
.pp-fieldset-reset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.pp-static-input {
  display: block;
  width: 100%;
  padding: var(--Space-M);
  border: var(--Border-Width-1) var(--Border-Style) var(--Color-Neutral-300);
  border-radius: var(--Radius-200);
  background: var(--Color-Neutral-50);
  color: var(--Color-Neutral-800);
  font: inherit;
}

.pp-static-input__support {
  display: block;
  margin-top: var(--Space-S);
  color: var(--Color-Neutral-600);
}

.pp-choice-option {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
}

.pp-choice-radio-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pp-choice-radio-target {
  width: 100%;
  cursor: pointer;
}

.pp-choice-radio-input:focus-visible+.pp-choice-radio-target,
.pp-choice-radio-input:checked+.pp-choice-radio-target {
  outline: var(--Focus-Outline-Width) solid var(--Color-Focus);
  outline-offset: var(--Focus-Outline-Offset);
}

/* Native radio appearance for V2 forms (excludes visually-hidden choice-card inputs). */
.pp-v2-form input[type="radio"]:not(.pp-choice-radio-input) {
  -webkit-appearance: none;
  appearance: none;
  inline-size: var(--Control-Radio-Size);
  block-size: var(--Control-Radio-Size);
  width: var(--Control-Radio-Size);
  height: var(--Control-Radio-Size);
  min-width: var(--Control-Radio-Size);
  min-height: var(--Control-Radio-Size);
  max-width: var(--Control-Radio-Size);
  max-height: var(--Control-Radio-Size);
  aspect-ratio: 1 / 1;
  margin: 0;
  border: var(--Border-Width-Radio-Emphasis) solid var(--Color-Secondary-Teal-500);
  border-radius: 50%;
  background: var(--Color-Primary-White);
  box-sizing: border-box;
  flex: 0 0 var(--Control-Radio-Size);
  vertical-align: middle;
  background-image: radial-gradient(circle at center,
      var(--Color-Secondary-Teal-500) 0,
      var(--Color-Secondary-Teal-500) 40%,
      var(--Color-Primary-White) 41%,
      var(--Color-Primary-White) 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0% 0%;
  transition: background-size var(--Motion-Fast) var(--Easing-Ease),
    box-shadow var(--Motion-Fast) var(--Easing-Ease),
    transform var(--Motion-Fast) var(--Easing-Spring);
  cursor: pointer;
  align-self: flex-start;
  margin-top: var(--Space-3XS);
}

.pp-v2-form input[type="radio"]:not(.pp-choice-radio-input):checked {
  background-size: 100% 100%;
}

.pp-v2-form input[type="radio"]:not(.pp-choice-radio-input):active {
  transform: scale(0.94);
}

.pp-v2-form input[type="radio"]:not(.pp-choice-radio-input):focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--Focus-Outline-Width) var(--Color-Focus);
}

.pp-radio-list {
  display: flex;
  flex-direction: column;
  gap: var(--Space-M);
  align-items: flex-start;
}

.pp-radio-list__label {
  display: flex;
  align-items: center;
  gap: var(--Space-XS);
  margin: 0;
  width: 100%;
}

.pp-radio-list__text {
  display: inline-block;
}

.pp-icon-radio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--Space-S);
  margin-bottom: var(--Space-XS);
}

@media (max-width: 900px) {
  .pp-icon-radio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .pp-icon-radio-grid {
    grid-template-columns: 1fr;
  }
}

.pp-icon-radio-card {
  position: relative;
  display: block;
  border: var(--Border-Width-1) var(--Border-Style) var(--Color-Border-Light);
  border-radius: var(--Radius-400);
  background: var(--Color-Primary-White);
  padding: var(--Space-M) var(--Space-20);
  cursor: pointer;
  transition: var(--Transition-All);
}

.pp-icon-radio-card:hover {
  border-color: var(--Color-Brand-100);
  background: var(--Color-Brand-10);
}

.pp-icon-radio-card.is-selected {
  border-color: var(--Color-Brand-200);
  background: var(--Color-Brand-25);
}

.pp-icon-radio-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pp-icon-radio-input:focus-visible+.pp-icon-radio-content {
  outline: var(--Focus-Outline-Width) solid var(--Color-Focus);
  outline-offset: var(--Focus-Outline-Offset);
  border-radius: var(--Radius-400);
}

.pp-icon-radio-card:focus-within {
  outline: var(--Focus-Outline-Width) solid var(--Color-Focus);
  outline-offset: var(--Focus-Outline-Offset);
}

.pp-icon-radio-content {
  display: flex;
  align-items: center;
  gap: var(--Space-S);
}

.pp-icon-radio-icon {
  flex: 0 0 auto;
  color: var(--Color-Icon-Primary);
}

.pp-icon-radio-label {
  font-weight: var(--Font-Weight-600);
  font-size: var(--Text-Sizes-Body-M);
  color: var(--Color-Text-Primary);
}

.pp-dependent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--Space-S);
}

.pp-dependent-header-content {
  display: flex;
  align-items: center;
  gap: var(--Space-XS);
}

.pp-dependent-stack {
  display: flex;
  flex-direction: column;
  gap: var(--Space-M);
}

/* Keep [hidden] effective — the bare `display: flex` above otherwise wins
   over the user-agent `[hidden] { display: none; }` rule. */
.pp-dependent-stack[hidden] {
  display: none;
}

.pp-dependent-title {
  margin: 0;
  flex: 0 1 auto;
}

/* Override input-oriented .pp-tooltip positioning so icon sits inline after heading text */
.pp-dependent-title-tooltip {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  margin-left: var(--Space-2XS, 0.25rem);
  flex-shrink: 0;
}

.pp-dependent-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Space-M);
}

.pp-dependent-item {
  display: flex;
  align-items: center;
  gap: var(--Space-S);
  border: var(--Border-Width-1) var(--Border-Style) var(--Color-Border-Light);
  border-radius: var(--Radius-500);
  padding: var(--Space-S) var(--Space-M);
  background: var(--Color-Primary-White);
  flex: 0 0 auto;
}

.pp-dependent-item--add {
  justify-content: center;
  padding-top: var(--Space-XS);
}

.pp-dependent-avatar {
  width: var(--Space-40);
  height: var(--Space-40);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-dependent-avatar--muted {
  opacity: 0.5;
}

.pp-dependent-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--Space-S);
}

.pp-form-section {
  padding-top: var(--Space-XS);
  margin-bottom: var(--Space-XL);
}

.pp-form-section:last-child {
  margin-bottom: 0;
}

.pp-form-section--top-s {
  padding-top: var(--Space-S);
}

.pp-form-section__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--Space-L);
}

.pp-form-section__row--additional-rate {
  justify-content: flex-start;
}

.pp-form-section__row--additional-rate > .pp-v2-field.money {
  flex: 1 1 auto;
  min-width: 0;
}

.pp-form-section__row--additional-rate > .pp-v2-field.number {
  flex: 0 0 220px;
  min-width: 180px;
}

.pp-form-section__heading {
  margin-bottom: var(--Space-M);
}

.pp-form-section__heading--flush {
  margin-bottom: 0;
}

.pp-form-section__heading h3 {
  margin: 0 0 var(--Space-S);
  color: var(--Color-Text-Navy-700);
}

.pp-form-section__heading p {
  margin: 0;
  color: var(--Color-Neutral-600);
}

.pp-form-note {
  margin-top: var(--Space-S);
}

.pp-form-toggle-spacing {
  margin-bottom: var(--Space-M);
}

.pp-divider-top {
  border-top: var(--Border-Width-1) var(--Border-Style) var(--Color-Border-Light);
  padding-top: var(--Space-10);
}

@media (max-width: 599px) {
  .pp-form-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    padding-left: 5px;
    padding-right: 5px;
  }

  .pp-form-section__row {
    flex-direction: column;
    gap: var(--Space-M);
    width: 100%;
  }

  .pp-form-section__row--additional-rate > .pp-v2-field.money,
  .pp-form-section__row--additional-rate > .pp-v2-field.number {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .pp-form-mobile-fluid input:not([type="checkbox"]),
  .pp-form-mobile-fluid select,
  .pp-form-mobile-fluid textarea,
  .pp-form-mobile-fluid .pp-input-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .pp-form-mobile-fluid .pp-money__dollars {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  .pp-form-mobile-fluid .pp-money__cents {
    width: 2.5ch;
    flex: 0 0 auto;
  }
}


.pp-dependent-input-field {
  display: flex;
  gap: var(--Space-S);
  align-items: center;
}

.pp-dependent-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--Color-Primary-Red-600);
  padding: 0;
}

.pp-dependent-actions {
  margin-top: var(--Space-M);
}

/* Default field spacing (can be overridden in form-specific CSS) */
.pp-v2-field {
  margin-bottom: var(--Space-M);
}

/* Tighter gap when error state is the next sibling (e.g. routing lookup error under routing number) */
.pp-v2-field:has(+ .pp-v2-error-state) {
  margin-bottom: var(--Space-XS);
}

/* Wrapper so routing number + lookup error are one form-stack item (avoids stack gap between them) */
.pp-v2-field-with-following-error {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pp-v2-field--large {
  margin-bottom: var(--Space-L);
}

/* Consolidated input selectors using :is() */
/* Note: input[type="number"] excluded - uses wrapper pattern like money input */
.pp-v2-field :is(input[type="email"],
  input[type="password"],
  input[type="text"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea) {
  width: 100%;
  background-color: var(--Color-Primary-White);
  border: var(--Border-Width-1) var(--Border-Style) var(--Color-Primary-Neutral-500);
  border-radius: var(--Radius-200);
  padding: var(--Space-XS) var(--Space-S);
  margin-top: var(--Space-XS);
  font-family: var(--Font-Family-Sans);
  font-size: var(--Text-Sizes-Body-M);
  font-weight: var(--Font-Weight-500);
  line-height: var(--Text-LineHeight-Standard);
  color: var(--Text-Color-Body);
  outline: none;
  transition: border-color var(--Motion-Fast) var(--Easing-Ease), box-shadow var(--Motion-Fast) var(--Easing-Ease);
}

.pp-v2-field :is(input[type="email"],
  input[type="password"],
  input[type="text"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea):focus-visible {
  border-color: var(--Color-Secondary-Blue-500);
  box-shadow: 0 0 0 var(--Focus-Ring-Blur) var(--Color-Secondary-Blue-500);
}

.pp-v2-field :is(input[type="email"],
  input[type="password"],
  input[type="text"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea):disabled {
  opacity: var(--Opacity-Disabled);
  cursor: not-allowed;
}

.pp-v2-field textarea {
  resize: vertical;
}

/* Textarea placeholder typography (Inter, 15px, 500, 20px line-height, placeholder color) */
.pp-v2-field textarea::placeholder,
.pp-v2-field textarea::-webkit-input-placeholder {
  color: var(--Color-Text-Placeholder);
  font-family: var(--Font-Family-Inter);
  font-size: var(--Text-Sizes-Placeholder);
  font-style: normal;
  font-weight: var(--Font-Weight-500);
  line-height: var(--Text-LineHeight-Placeholder);
  opacity: 1;
}

.pp-v2-field.has-error :is(input, select, textarea) {
  border-color: var(--Color-Primary-Red-600);
  box-shadow: none;
}

.pp-v2-field label.pp-v2-label {
  font-family: var(--Font-Family-Sans);
  font-size: var(--Text-Sizes-Body-M);
  font-weight: var(--Font-Weight-500);
  line-height: var(--Text-LineHeight-Standard);
  color: var(--Color-Text-Navy-700);
  margin-bottom: var(--Space-M);
}

.pp-v2-field .error-message {
  display: block;
  margin-top: var(--Space-XS);
  color: var(--Color-Primary-Red-600);
  font-family: var(--Font-Family-Sans);
  font-size: var(--Text-Sizes-Body-M);
  font-weight: var(--Font-Weight-400);
  line-height: var(--Text-LineHeight-Standard);
}

.pp-v2-field .help-message {
  display: block;
  margin-top: var(--Space-XS);
  color: var(--Color-Text-Navy-500);
  font-family: var(--Font-Family-Sans);
  font-size: var(--Text-Sizes-Body-S);
  line-height: var(--Text-LineHeight-Standard);
}

/* Responsive tweaks */
@media (max-width: 599px) {
  .pp-v2-field label.pp-v2-label {
    margin-bottom: var(--Space-XXS);
  }

  .pp-v2-field :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea, input[type="date"]) {
    padding: var(--Space-XS) var(--Space-S);
  }

}

@media (min-width: 1240px) {
  .pp-v2-field :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea, input[type="date"]) {
    padding: var(--Space-SM) var(--Space-SM);
  }
}

/* Override legacy serif font inheritance for v2 form fields */
.new-signup-layout .pp-v2-field,
.new-signup-layout .pp-v2-field :is(.pp-v2-label, .pp-v2-checkbox) {
  font-family: var(--Font-Family-Sans);
}

/* Custom caret and spacing for V2 select inputs */
.pp-v2-field select.pp-v2-input:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add room for the custom caret */
  padding-inline-end: calc(var(--Space-XL) + var(--Space-XXS));
  /* Draw arrow as a background image on the select itself */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 7.5L10 12.5L15 7.5" stroke="%234C699A" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right var(--Space-M) center;
  background-size: var(--Space-LM) var(--Space-LM);
}

/* Select placeholder styling - when empty value is selected, show in muted color */
select.has-placeholder,
.pp-v2-field select.has-placeholder {
  color: var(--Color-Text-Navy-500) !important;
  font-style: italic !important;
}

/* Checkbox input spacing and hover (shared across V2 forms) */
.pp-v2-field .pp-v2-checkbox-input {
  accent-color: var(--Color-Primary-Red-600);
  transition: opacity var(--Motion-Std) var(--Easing-Std);
}

body[data-ui-theme="private"] .pp-v2-field .pp-v2-checkbox-input,
body[data-ui-theme="private_v2"] .pp-v2-field .pp-v2-checkbox-input {
  /* Checkmark color is automatically set by browser, so in order to get a white checkmark we need a dark enough accent-color */
  accent-color: var(--Color-Brand-Teal-600-Hover);
}

/* Password input wrapper with toggle button */
.pp-v2-password-wrapper,
.pp-v2-input-wrapper {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}

/* Input wrapper for non-password fields (allows inline character counter) */

/* Add padding to inputs when character counter is visible */
.pp-v2-input-wrapper :is(input, select, textarea) {
  padding-inline-end: calc(var(--Space-XL) + var(--Space-S));
}

.pp-v2-password-wrapper input[type="password"],
.pp-v2-password-wrapper input[type="text"] {
  /* Add padding for toggle button */
  padding-inline-end: calc(var(--Space-XL) + var(--Space-S));
}

/* Password toggle button */
.pp-v2-password-toggle,
.pp-v2-input-action {
  position: absolute;
  right: var(--Space-S);
  /* Position button vertically centered with the input field */
  /* Input starts at margin-top (8px), has padding-top (8px), center of content is at ~28px */
  top: 28px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--Space-L) + var(--Space-XXS));
  height: calc(var(--Space-L) + var(--Space-XXS));
  min-width: calc(var(--Space-L) + var(--Space-XXS));
  min-height: calc(var(--Space-L) + var(--Space-XXS));
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--Radius-XXS);
  cursor: pointer;
  color: var(--Color-Text-Navy-500);
  transition: color var(--Motion-Fast) var(--Easing-Ease),
    background-color var(--Motion-Fast) var(--Easing-Ease);
  /* Prevent button from shrinking */
  flex-shrink: 0;
  z-index: 1;
}

.pp-v2-input-action {
  top: 50%;
  width: 34.231px;
  height: 35.009px;
  min-width: 34.231px;
  min-height: 35.009px;
  border-radius: var(--Radius-XS);
  background: var(--Color-Background-Input-Action);
  margin-top: 3px;
}

.pp-v2-password-toggle:hover {
  color: var(--Color-Text-Navy-700);
  background-color: var(--Color-Primary-Neutral-100);
}

.pp-v2-input-action:hover {
  color: var(--Color-Text-Navy-700);
  background-color: var(--Color-Primary-Neutral-100);
}

.pp-v2-password-toggle:focus-visible {
  outline: var(--Focus-Outline-Width) solid var(--Color-Secondary-Yellow-500);
  outline-offset: var(--Focus-Outline-Offset);
}

.pp-v2-input-action:focus-visible {
  outline: var(--Focus-Outline-Width) solid var(--Color-Secondary-Yellow-500);
  outline-offset: var(--Focus-Outline-Offset);
}

.pp-v2-password-toggle:active {
  color: var(--Color-Text-Navy-700);
  background-color: var(--Color-Primary-Neutral-500);
}

.pp-v2-input-action:active {
  color: var(--Color-Text-Navy-700);
  background-color: var(--Color-Primary-Neutral-500);
}

.pp-v2-input-action.is-hidden,
.pp-v2-password-toggle.is-hidden {
  display: none;
}

/* Password toggle icons */
.pp-v2-password-toggle-icon {
  width: 20px;
  height: 20px;
  pointer-events: none;
  display: block;
}

.pp-v2-password-wrapper .pp-v2-password-toggle-icon {
  margin-top: 5px;
}

/* Hidden state for the "hide" icon (eye-slash) by default */
.pp-v2-password-toggle-icon--hide {
  display: none;
}

.pp-v2-input-action-icon {
  width: 20px;
  height: 20px;
  pointer-events: none;
  display: block;
}

/* Character counter positioning adjustment for password fields */
.pp-v2-field:has(.pp-v2-password-wrapper) .pp-v2-character-counter {
  /* Position counter to the left of toggle button on password fields */
  right: calc(var(--Space-XL) + var(--Space-M));
}

.pp-v2-field .pp-v2-checkbox-label a,
.pp-v2-field .pp-v2-checkbox-label a:visited {
  color: var(--Color-Text-Navy-500);
  font-weight: var(--Font-Weight-400);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.pp-v2-field.payroll-setup-overtime-ack .pp-v2-checkbox-label {
  color: var(--Color-Text-Body-Warm);
  font-family: var(--Font-Family-Inter);
  font-size: var(--Text-Sizes-Caption);
  font-style: normal;
  font-weight: var(--Font-Weight-300);
  line-height: normal;
}

/* TOS section hover/label UX (shared across V2 forms) */
.pp-v2-field.tos .pp-v2-checkbox {
  cursor: pointer;
}

.pp-v2-field .pp-v2-checkbox-input:hover,
.pp-v2-field.tos .pp-v2-checkbox:hover .pp-v2-checkbox-input {
  opacity: var(--Opacity-Active);
}

/* TOS labels should match body text color */
.pp-v2-field.tos label.pp-v2-label {
  color: var(--Text-Color-Body);
}

/* Character counter wrapper - positions counter on same line as error text */
.pp-v2-character-counter-wrapper {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  height: 0;
  /* Zero height so it doesn't affect layout */
  overflow: visible;
  /* Position to align with error text line */
  margin-top: var(--Space-XS);
}

/* Character counter styles - positioned on same line as error text */
.pp-v2-character-counter {
  display: none;
  position: absolute;
  right: var(--Space-S);
  top: 0;
  /* Top of wrapper aligns with error text line */
  color: var(--Color-Primary-Red-600);
  font-weight: var(--Font-Weight-600);
  font-size: var(--Text-Sizes-Caption);
  line-height: var(--Text-LineHeight-Standard);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  transition: color var(--Motion-Fast) var(--Easing-Ease);
  /* Ensure counter doesn't affect layout */
  margin: 0;
  padding: 0;
}

/* Show counter when visible class is added */
.pp-v2-character-counter.is-visible {
  display: block;
}

.pp-v2-character-counter-text {
  font-weight: var(--Font-Weight-600);
}

.pp-v2-field input.pp-v2-input--signature,
.pp-v2-field input.pp-v2-input--signature::placeholder {
  font-family: var(--Font-Family-Signature);
  font-size: var(--Text-Sizes-Heading-XS);
  line-height: var(--Text-LineHeight-Body-Compact);
}


/* Icon sizing for IconHelper */
.pp-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.pp-icon--xs {
    width: 12px;
    height: 12px;
}

.pp-icon--s {
    width: 16px;
    height: 16px;
}

.pp-icon--m {
    width: 20px;
    height: 20px;
}

.pp-icon--l {
    width: 24px;
    height: 24px;
}

/* Checkbox labels: slightly smaller font on mobile for readability in narrow layouts */
@media (max-width: 599px) {
    .pp-v2-field .pp-v2-checkbox-label {
        font-size: var(--Text-Sizes-Body-S);
    }
}