/*!**********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./projects/library/design-system/src/styles/tokens.css ***!
  \**********************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   MONEYHONEY DESIGN TOKENS - Single Source of Truth
   ---------------------------------------------------------------------------
   All CSS custom properties live here. Never write hex literals or
   arbitrary pixel values in components - always reference a token.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* -- COLOR: Brand -------------------------------------------------------- */
  --color-brand:           #16205b;   /* Primary navy - buttons, links, focus rings         */
  --color-brand-hover:     #1a2870;   /* Primary button hover                               */
  --color-brand-pressed:   #0e1329;   /* Primary button pressed / dark hover                */
  --color-brand-dark:      #0e1329;   /* Deepest navy - footer bg, overlays                 */
  --color-brand-secondary: #2a43a0;   /* Mid navy - gradients, secondary surfaces           */
  --color-brand-light:     #d1d6ff;   /* Pale periwinkle - borders on tint surfaces         */
  --color-brand-tint:      #f0f1ff;   /* Lightest brand wash - active nav, pills            */
  --color-brand-tint-50:   #fafbff;   /* Near-white with brand cast                         */
  --color-brand-tint-200:  #eaecff;   /* Badge backgrounds                                  */

  /* -- COLOR: Accent ------------------------------------------------------- */
  --color-accent:          #FF4A00;   /* Orange - logo "Honey" wordmark only                */
  --color-accent-tint:     #fff0eb;   /* Light orange wash - sign-out hover                 */

  /* -- COLOR: Navy scale (alias scale) ------------------------------------- */
  --color-navy-900:        #0c1228;
  --color-navy-700:        #16205b;   /* = --color-brand                                    */
  --color-navy-500:        #2a43a0;   /* = --color-brand-secondary                          */
  --color-navy-200:        #d1d6ff;   /* = --color-brand-light                              */
  --color-navy-100:        #f0f1ff;   /* = --color-brand-tint                               */

  /* -- COLOR: Neutral scale - cool blue-gray ------------------------------- */
  --color-gray-900:        #1a1f36;   /* Primary text - deep navy-black                     */
  --color-gray-700:        #3c4257;   /* Secondary text - cool charcoal                     */
  --color-gray-500:        #697386;   /* Muted text - cool mid-gray                         */
  --color-gray-400:        #8898aa;   /* Placeholder, hint - cool light-gray                */
  --color-gray-300:        #c0ccda;   /* Borders in light contexts                          */
  --color-gray-200:        #f0f4f8;   /* Subtle background fill - cool off-white            */
  --color-gray-100:        #f6f9fc;   /* App background - signature cool light tint         */
  --color-gray-50:         #f9fbfd;   /* Near-white page surface                            */

  /* -- COLOR: Semantic ----------------------------------------------------- */
  --color-success:         #17b26a;
  --color-success-bg:      #ecfdf3;
  --color-success-600:     #079455;   /* Darker green - icons on light bg, strength bars    */
  --color-success-700:     #067647;   /* Even darker - emphasis text on success-bg          */
  --color-warning:         #f79009;
  --color-warning-bg:      #fefce8;
  --color-warning-700:     #b45309;   /* Tailwind warning.700 - saturated brown text        */
  --color-danger:          #d92d20;
  --color-danger-bg:       #fef2f2;
  --color-danger-border:   #f97066;   /* Input error border                                 */
  --color-info:            #1d4ed8;
  --color-info-bg:         #eff6ff;

  /* -- COLOR: Semantic - extended chip/callout families -------------------- */
  /* Warning / Amber chip family - bg / border / text triplets used widely    */
  --color-warning-bg-amber:        #fef0c7;   /* amber chip background       */
  --color-warning-bg-amber-pale:   #fffaeb;   /* amber callout fill          */
  --color-warning-bg-peach-light:  #fff6ed;   /* offline-cart status-bg      */
  --color-warning-amber:           #ca8a04;   /* Tailwind warning.amber base */
  --color-warning-amber-mid:       #fec84b;   /* amber chip border           */
  --color-warning-amber-strong:    #fde68a;   /* amber border (alias)        */
  --color-warning-amber-light:     #fedf89;   /* callout border - softer     */
  --color-warning-amber-dark:      #a16207;   /* Tailwind warning.amber-dark */
  --color-warning-amber-saturated: #b45309;   /* alias of warning-700        */
  --color-warning-text-amber:      #92400e;   /* amber chip text             */
  --color-warning-text-amber-deep: #b54708;   /* amber deep-text             */
  --color-warning-orange-mid:      #dc6803;   /* orange-mid CTA              */

  /* Success - light/mint variants                                            */
  --color-success-aqua-light:      #75e0a7;   /* light-mint stat color       */
  --color-success-border-pale:     #abefc6;   /* pale success border         */
  --color-success-bg-deep:         #dcfae6;   /* deeper success bg           */

  /* Danger - secondary variants                                              */
  --color-danger-alt-mid:          #f04438;   /* danger-DEFAULT alternate    */
  --color-danger-bg-soft:          #fee4e2;   /* softer danger bg            */
  --color-danger-border-medium:    #fecdca;   /* medium danger border        */

  /* Info - tri-tone chip family                                              */
  --color-info-bg-pale:            #eff8ff;   /* info chip bg                */
  --color-info-bg-cobalt:          #f0f0ff;   /* ncd-report badge bg         */
  --color-info-border-azure:       #b2ddff;   /* info chip border            */
  --color-info-border-cobalt:      #c7d7fe;   /* ncd-report badge border     */
  --color-info-text-bright:        #1570ef;   /* info CTA                    */
  --color-info-text-cobalt:        #3538cd;   /* ncd-report badge text       */
  --color-info-text-azure-strong:  #175cd3;   /* alias of info.azure         */

  /* Border - lavender extension                                              */
  --color-border-lavender:         #d6daf7;   /* offline-cart head-of-family border */

  /* -- COLOR: Text - cool-gray hierarchy ----------------------------------- */
  --color-text-primary:    #1a1f36;   /* Headings, primary body text                        */
  --color-text-secondary:  #3c4257;   /* Secondary labels, body text                        */
  --color-text-tertiary:   #525f7f;   /* Sub-labels, helper text                            */
  --color-text-muted:      #5b6577;   /* Hints, placeholders, disabled labels  (WCAG 4.5:1) */
  --color-text-faint:      #6b7280;   /* Timestamps, very low-priority copy    (WCAG 4.5:1) */
  --color-text-disabled:   #aab7c4;   /* Disabled input text                                */

  /* -- COLOR: Surface - layered depth system ------------------------------- */
  --color-surface-page:     #ffffff;  /* Auth pages, modal bg, card bg                      */
  --color-surface-app:      #f6f9fc;  /* Inner app page bg - cool light tint                */
  --color-surface-elevated: #eef3f8;  /* Hover state surface, active nav items              */
  --color-surface-input:    #f8fafc;  /* Search bar resting bg                              */

  /* -- COLOR: Border - cool blue-gray -------------------------------------- */
  --color-border-subtle:   #edf2f7;   /* Header bottom border, section dividers             */
  --color-border-default:  #e0e6f0;   /* Input resting border, card border                  */
  --color-border-strong:   #b9c8e0;   /* Input hover border, secondary button hover         */
  --color-border-brand:    #16205b;   /* Input focus border, selected card                  */
  --color-border-soft:     #e8eaf0;   /* Most-used soft divider - appears in 520+ places    */
  --color-border-medium:   #d5d7da;   /* Medium border weight                               */
  --color-border-deep:     #b0b7c8;   /* Deeper border, used in 269+ places                 */

  /* -- COLOR: Surface - extended scale (legacy hex codes in heavy use) ----- */
  --color-surface-muted:    #f2f2f2;  /* Most-used muted surface - 341+ usages              */
  --color-surface-soft:     #f5f5f7;  /* Soft surface fill - 226+ usages                    */
  --color-surface-tint:     #fafafa;  /* Near-white tint - 134+ usages                      */
  --color-surface-cool:     #f0f0f5;  /* Cool surface tint                                  */

  /* -- COLOR: Text - extended dark hierarchy ------------------------------- */
  --color-text-deep:       #181d27;   /* Deepest text - 291+ usages, headings on white      */
  --color-text-strong:     #414651;   /* Strong body text - 158+ usages                     */
  --color-text-cool:       #717680;   /* Cool muted text - 403+ usages                      */
  --color-text-tw-muted:   #6b7280;   /* was gray-400 #9ca3af (2.6:1 fail) → gray-500 4.8:1  */

  /* -- COLOR: Input -------------------------------------------------------- */
  --color-input-placeholder: #717784;   /* was #aab7c4 (1.9:1 fail) → ~4.5:1 */
  --color-input-border:      var(--color-border-default);
  --color-input-border-hover: var(--color-border-strong);
  --color-input-border-focus: var(--color-brand);
  --color-input-border-error: var(--color-danger-border);

  /* -- TYPOGRAPHY ---------------------------------------------------------- */
  --font-family-body:      'Inter', sans-serif;

  /* -- Type scale - WCAG AA compliant (body ≥ 16px, min label 12px) -------- */
  --text-2xs:  12px;   /* was 11px — clamped to the 12px floor (WCAG + platform min) */
  --text-xs:   12px;   /* Badges, chips, metadata tags, mini-labels          */
  --text-sm:   14px;   /* Secondary body, form labels, table data            */
  --text-base: 16px;   /* Primary body copy - WCAG AA standard               */
  --text-md:   18px;   /* Intro paragraphs, emphasized body, card intros     */
  --text-lg:   20px;   /* Card subheadings, section callouts                 */
  --text-xl:   24px;   /* Section headings                                   */
  --text-2xl:  32px;   /* Page headings                                      */
  --text-3xl:  44px;   /* Large display headings                             */
  --text-hero: 64px;   /* Hero headlines                                     */

  /* -- Heading scale (semantic h1-h6 mirror) ------------------------------- */
  --text-h1:   var(--text-2xl);   /* 32px - page-level heading                */
  --text-h2:   var(--text-xl);    /* 24px - section heading                   */
  --text-h3:   var(--text-lg);    /* 20px - card / panel heading              */
  --text-h4:   var(--text-md);    /* 18px - subsection heading                */
  --text-h5:   var(--text-base);  /* 16px - minor heading                     */
  --text-h6:   var(--text-sm);    /* 14px - inline label heading              */

  /* -- Icon scale (aligned to text pairing) -------------------------------- */
  --icon-2xs:  10px;   /* Decorative indicator dots                          */
  --icon-xs:   12px;   /* Inline with xs text (12px)                         */
  --icon-sm:   14px;   /* Inline with sm text (14px)                         */
  --icon-md:   16px;   /* Inline with base text (16px) - standard body icon  */
  --icon-lg:   20px;   /* Standalone nav icons, section icons                */
  --icon-xl:   24px;   /* Feature icons in cards                             */
  --icon-2xl:  32px;   /* Empty-state icons, hero illustrations              */
  --icon-3xl:  40px;   /* Large feature illustrations                        */

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

  /* -- Line heights - WCAG 1.4.12 (body ≥ 1.5, paragraphs ≥ 2×) ----------- */
  --leading-none:    1.0;   /* Single-line number displays                    */
  --leading-tight:   1.2;   /* Display headings (h1, h2)                      */
  --leading-snug:    1.35;  /* Section headings (h3, h4)                      */
  --leading-normal:  1.5;   /* WCAG minimum for body text                     */
  --leading-relaxed: 1.6;   /* Recommended for paragraph body copy            */
  --leading-loose:   1.8;   /* Long-form reading content                      */

  /* -- Letter spacing ------------------------------------------------------- */
  /* Project rule (MEMORY → feedback_no_negative_tracking.md):                  */
  /* never use negative letter-spacing - always default/normal.                 */
  /* The legacy --tracking-tighter / --tracking-tight tokens were unused and    */
  /* have been removed; --tracking-snug is kept but neutralised to 0 so any    */
  /* existing consumer (base.css h1-h6, utilities.css .text-display) renders   */
  /* with default tracking until it can be migrated off the token entirely.   */
  --tracking-snug:    0;        /* DEPRECATED → use --tracking-normal          */
  --tracking-normal:  0em;      /* Default, labels                            */
  --tracking-wide:    0.06em;   /* Section CAPS labels (e.g. "POPULAR")       */
  --tracking-widest:  0.12em;   /* ALL-CAPS micro labels                      */

  /* -- SPACING - 4px base grid ---------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* -- RADIUS - fintech-grade scale --------------------------------------- */
  --radius-2xs:  2px;    /* Micro indicators, progress bars                   */
  --radius-xs:   4px;    /* Compact badges, inline tags                       */
  --radius-sm:   6px;    /* Inputs, tags, chips - canonical rounded-input     */
  --radius-md:   8px;    /* Cards - canonical rounded-card                    */
  --radius-lg:   16px;   /* Large cards, panels                               */
  --radius-xl:   20px;   /* Identity cards, large surfaces - Blade xlarge     */
  --radius-2xl:  24px;   /* Modals, bottom sheets - Blade 2xlarge             */
  --radius-3xl:  32px;   /* Large panels, brand overlays                      */
  --radius-full: 9999px; /* Pills, avatars, notification badges               */

  /* -- SHADOW ---------------------------------------------------------------- */
  /* Rule: NEVER use box-shadow for depth/elevation — use border instead.    */
  /* The ONLY allowed shadows are the WCAG-required keyboard focus rings:    */
  --shadow-mh-focus:       0 0 0 3px rgba(22, 32, 91, 0.18);
  --shadow-mh-focus-inset: inset 0 0 0 3px rgba(22, 32, 91, 0.18);
  /* All other shadow values were removed 2026-05-14. Do not re-add them.   */

  /* -- Z-INDEX --------------------------------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-nav:     30;
  --z-overlay: 40;
  --z-modal:   50;
  --z-toast:   60;
  --z-skip:    9999;

  /* -- ANIMATION - Easing vocabulary --------------------------------------- */
  /* Legacy aliases - preserved for compatibility */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     ease-out;
  --ease-linear:  linear;

  /* Full easing vocabulary */
  --ease-entrance:    cubic-bezier(0, 0, 0.2, 1);       /* Elements entering the screen          */
  --ease-exit:        cubic-bezier(0.17, 0, 1, 1);      /* Elements leaving the screen           */
  --ease-standard:    cubic-bezier(0.3, 0, 0.2, 1);     /* General transitions (most common)     */
  --ease-emphasized:  cubic-bezier(0.5, 0, 0, 1);       /* Key moments - large/impactful moves   */
  --ease-overshoot:   cubic-bezier(0.5, 0, 0.3, 1.5);   /* Playful spring - badge, counter pops  */
  --ease-shake:       cubic-bezier(1, 0.5, 0, 0.5);     /* Error shake - auth failures, invalid  */

  /* Ultra-smooth decel - field focus, card hover */
  --ease-mh:      cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* -- Duration scale (80ms-960ms) ------------------------------------------ */
  --duration-1:   80ms;    /* Hover states, microinteractions                    */
  --duration-2:   160ms;   /* Button press, selection feedback                   */
  --duration-3:   200ms;   /* Tooltip, badge appear                              */
  --duration-4:   280ms;   /* Dropdown open, card expand                         */
  --duration-5:   360ms;   /* Page element entrance (primary)                    */
  --duration-6:   480ms;   /* Page-level transitions, modal open                 */
  --duration-7:   640ms;   /* Hero elements, onboarding steps                    */
  --duration-8:   960ms;   /* Full-page reveals, success celebrations            */

  /* Legacy duration aliases - preserved for existing classes */
  --duration-instant: var(--duration-2);   /* 160ms */
  --duration-fast:    var(--duration-3);   /* 200ms */
  --duration-normal:  var(--duration-4);   /* 280ms */
  --duration-page:    var(--duration-6);   /* 480ms */
  --duration-slow:    var(--duration-7);   /* 640ms */

  --stagger-base:     55ms;
  --stagger-max:      275ms;

  /* -- COMPONENT: Button ---------------------------------------------------- */
  --btn-height:    48px;               /* Primary actions - matches input height */
  --btn-height-sm: 40px;               /* Secondary actions                      */
  --btn-height-xs: 32px;               /* Compact contexts                       */
  --btn-radius:    6px;                /* Canonical rounded-btn (6px)            */
  --btn-font-size: var(--text-sm);     /* 14px                                   */
  --btn-font-weight: var(--font-weight-semibold);
  --btn-padding-x: var(--space-5);

  /* -- COMPONENT: Input ----------------------------------------------------- */
  --input-height:    48px;             /* Matches button height                  */
  --input-radius:    6px;              /* Canonical rounded-input (6px)          */
  --input-padding-x: 16px;

  /* -- COMPONENT: Nav -------------------------------------------------------- */
  --nav-height:        72px;
  --nav-height-mobile: 52px;
  --nav-max-width:     1280px;

  /* -- COMPONENT: Modal ------------------------------------------------------ */
  --modal-radius:         var(--radius-2xl);
  --modal-max-w-confirm:  560px;
  --modal-max-w-form:     720px;
  --modal-backdrop:       rgba(0,0,0,0.4);

  /* ═══════════════════════════════════════════════════════════════════════
     ALIASES - Compatibility layer for existing SCSS files
     -----------------------------------------------------------------------
     These map Figma-style / legacy token names → canonical tokens above.
     NEW component code must use canonical names, never these aliases.
     ═══════════════════════════════════════════════════════════════════════ */

  /* Primitives */
  --base-white:          #ffffff;
  --border-width-md:     2px;

  /* Brand scale (Figma-style) */
  --brand-500:           var(--color-brand);
  --brand-100:           var(--color-brand-light);
  --brand-300:           #7c88d2;    /* Mid periwinkle - inactive stepper states only      */

  /* --color-brand-primary was incorrectly set to #f97316 (orange) in ncd-sidebar.
     Fixed here to the correct brand navy.                                               */
  --color-brand-primary: var(--color-brand);

  /* Surface aliases */
  --color-surface-primary:   var(--color-surface-page);
  --color-surface-secondary: var(--color-surface-app);
  --color-surface-bg:        var(--color-surface-elevated);

  /* Spacing aliases */
  --spacing-1:    var(--space-1);
  --spacing-1-5:  6px;
  --spacing-4:    var(--space-4);

  /* Success aliases */
  --success-500:  var(--color-success);
  --success-600:  var(--color-success-600);

  /* Typography aliases - map legacy ncd-flow names → canonical tokens */
  --text-xs-bold-family:      var(--font-family-body);
  --text-xs-bold-size:        var(--text-xs);     /* 12px */
  --text-xs-bold-weight:      var(--font-weight-bold);
  --text-xss-regular-size:    var(--text-2xs);    /* 11px - absolute minimum */
  --text-xss-medium-size:     var(--text-2xs);    /* 11px */
  --text-xss-semibold-weight: var(--font-weight-semibold);
  --text-sm-font-size:        var(--text-sm);     /* 14px */
  --text-lg-font-size:        var(--text-md);     /* 18px */
}

/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./projects/library/design-system/src/styles/base.css ***!
  \********************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   BASE STYLES - Reset, typography defaults, accessibility essentials
   Everything here is structural and must reference tokens only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* -- Root / Body ----------------------------------------------------------- */
html {
  font-family: var(--font-family-body);
  font-size: var(--text-base);       /* 16px - WCAG AA baseline */
  font-optical-sizing: auto;
  /* Inter OpenType features: kern + liga + calt always on; cv05/cv06 = single-
     story 'a' and 'g' for better readability at small sizes; ss03 = curved 'r' */
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'cv05' 1, 'cv06' 1, 'ss03' 1;
  /* White html background so overscroll bounce on iOS / Android stays white
     instead of revealing brand navy underneath the body. */
  background: var(--color-surface-page);
  /* Lock horizontal axis at the root so a stray overflowing element
     (long bank-branch line, off-canvas drawer mid-animation, etc.)
     never makes the whole page pannable horizontally. `clip` doesn't
     create a new scrollport, so `position: sticky` descendants keep
     working. */
  overflow-x: clip;
  /* Stop iOS rubber-band overscroll on the document root - the page no
     longer drifts up / down past its edges when the user keeps a
     finger on screen. Inner scroll containers can still rubber-band
     internally if they need to. */
  overscroll-behavior: none;
}

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--text-base);
  font-optical-sizing: auto;
  line-height: var(--leading-normal);     /* 1.5 - WCAG 1.4.12 minimum; prose adds leading-relaxed */
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'cv05' 1, 'cv06' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Disable iOS double-tap zoom on interactive UI without locking pinch zoom.
     Users can still pinch to zoom the page; rapid stepper / button taps no
     longer escalate into a viewport zoom. WCAG-friendly: pinch zoom remains. */
  touch-action: manipulation;
  text-rendering: optimizeLegibility;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  /* Belt-and-braces: clip horizontal at the body too so a child with
     a hard-coded width (e.g. an SVG, an inline embed) can't kick
     the whole layout horizontally. */
  overflow-x: clip;
  overscroll-behavior: none;
}

/* -- iOS auto-zoom safeguard --
   Mobile Safari zooms into any input / select / textarea whose computed
   `font-size` is below 16 px. The "zoom" is not pinch zoom - it's an
   accessibility shortcut to enlarge the field for typing - and on
   notched devices the user often can't pinch back out, getting stuck
   with steppers and CTAs off-screen. Force ≥ 16 px on mobile so the
   zoom never triggers. Components can still render smaller visual text
   via a wrapper / `transform: scale()` if a design absolutely needs
   sub-16-px field text, but the default font-size MUST stay 16-px. */
@media (max-width: 1023px) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  select,
  textarea {
    font-size: 16px;
  }
}

app-root { display: block; min-height: 100vh; }

/* -- Form elements inherit Inter --------------------------------------------
   Browsers default form controls to system fonts, breaking visual consistency.
   Force inheritance from body so every input, textarea, select, button and
   option uses Inter. The platform is single-typeface: `font-mono` also maps
   to Inter (see tailwind.config.js) — pair it with `tabular-nums` for
   aligned IDs/codes/figures, never a separate monospace family.
   ════════════════════════════════════════════════════════════════════════ */
input, textarea, select, button, optgroup {
  font-family: inherit;
}

/* -- Heading hierarchy - h1-h6 semantic defaults --------------------------- */
/* These are intentionally light so component classes can override freely.    */
/* Do not add margin here - spacing belongs in component context.             */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-family-body);
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss03' 1;
  color: var(--color-text-primary);
}
h1 {
  font-size: var(--text-h1);           /* 32px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);    /* 1.2 */
}
h2 {
  font-size: var(--text-h2);           /* 24px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
}
h3 {
  font-size: var(--text-h3);           /* 20px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);     /* 1.35 */
}
h4 {
  font-size: var(--text-h4);           /* 18px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
}
h5 {
  font-size: var(--text-h5);           /* 16px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);   /* 1.5 */
}
h6 {
  font-size: var(--text-h6);           /* 14px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

/* -- Paragraph defaults --------------------------------------------------- */
p { margin: 0; }

/* -- Figure captions, small, and fine print ------------------------------- */
figcaption, small, .fine-print {
  font-size: var(--text-xs);            /* 12px */
  line-height: var(--leading-normal);   /* 1.5 */
  color: var(--color-text-muted);
}

/* -- Numeric / tabular data - always use tabular figures in fintech -------- */
.tabular-nums,
[data-numeric],
.metric,
.amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'kern' 1, 'tnum' 1;
  letter-spacing: var(--tracking-snug);
}

/* -- Skip-to-content link ------------------------------------------------- */
.skip-to-content {
  position: fixed;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-skip);
  padding: var(--space-2) var(--space-4);
  background: var(--color-brand);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-to-content:focus { top: 0; outline: none; }
/* The skip link is a keyboard-only on-screen affordance — it must never appear
   in the printed / "show PDF" (window.print) output of the portfolio reports,
   where browsers can resolve its fixed off-screen position into the page. */
@media print {
  .skip-to-content { display: none !important; }
}

/* -- Focus-visible -------------------------------------------------------- */
/* Branded focus ring for keyboard-navigable controls (buttons, links, etc.) */
/* Inputs/selects/textareas handle focus via wrapper focus-within borders    */
:focus-visible:not(input):not(select):not(textarea) {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22,32,91,0.18), 0 0 0 1.5px var(--color-brand);
  border-radius: inherit;
}
.dark-surface :focus-visible:not(input):not(select):not(textarea),
[data-theme="dark"] :focus-visible:not(input):not(select):not(textarea) {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.22), 0 0 0 1.5px rgba(255,255,255,0.6);
}
/* Suppress browser native outline on all form controls - wrapper handles it */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: none;
}

/* -- Cursor defaults ------------------------------------------------------ */
button:not([disabled]) { cursor: pointer; }
select { cursor: pointer; }
a { cursor: pointer; }

/* -- Minimum touch targets ------------------------------------------------ */
.touch-target { min-height: 44px; min-width: 44px; }
.icon-btn { min-height: unset !important; min-width: unset !important; }
a.inline-link { min-height: unset; min-width: unset; }

/* -- Placeholder text-transform isolation -----------------------------------
   Inputs that use text-transform:uppercase (PAN, IFSC, etc.) should still
   show their placeholder in the natural authored case. The placeholder
   describes WHAT to type - it shouldn't be shouted in caps.
   The actual user input still gets uppercased by the input's text-transform.
   ════════════════════════════════════════════════════════════════════════ */
input::placeholder,
textarea::placeholder {
  text-transform: none !important;
}

/*!**********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./projects/library/design-system/src/styles/motion.css ***!
  \**********************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   MOTION SYSTEM - All keyframes + animation utility classes
   ---------------------------------------------------------------------------
   Premium easing: --ease-premium (cubic-bezier(.22,1,.36,1))
   Spring easing:  --ease-spring  (cubic-bezier(.34,1.56,.64,1))
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- Keyframes ------------------------------------------------------------ */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none;   }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none;    }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none;    }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none;     }
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none;   }
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none;    }
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none;    }
}
@keyframes card-stagger {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none;   }
}
@keyframes step-transition {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none;    }
}
@keyframes slide-forward {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none;    }
}
@keyframes slide-back {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: none;     }
}
@keyframes bounce-in {
  0%   { transform: scale(0.92); opacity: 0; }
  65%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes check-pop {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  65%  { transform: scale(1.2) rotate(5deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}
@keyframes scale-check {
  0%   { transform: scale(0);   opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes otp-pop {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1);    }
}
@keyframes select-pop {
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.02); }
  100% { transform: scale(1);    }
}
@keyframes shake {
  0%,100% { transform: translateX(0);    }
  20%,60% { transform: translateX(-5px); }
  40%,80% { transform: translateX(5px);  }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes bar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes step-ping {
  0%   { transform: scale(1);   opacity: 0.4; }
  100% { transform: scale(1.8); opacity: 0;   }
}
/* Expanding border ring on a pseudo-element (transform/opacity only  -  the
   no-box-shadow rule applies to motion too). Paired with .animate-pulse-ring. */
@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: 1; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes back-btn-in {
  from { opacity: 0; transform: translateX(-8px) scale(0.94); }
  to   { opacity: 1; transform: translateX(0)     scale(1);   }
}
@keyframes shimmer-sweep {
  from { transform: translateX(-100%) skewX(-12deg); }
  to   { transform: translateX(200%)  skewX(-12deg); }
}
@keyframes float-up {
  0%,100% { transform: translateY(0);    }
  50%      { transform: translateY(-5px); }
}
@keyframes number-pop {
  0%   { transform: scale(0.92); opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes draw-path {
  from { stroke-dashoffset: var(--path-length, 200); }
  to   { stroke-dashoffset: 0; }
}
@keyframes progress-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes ripple-out {
  from { transform: scale(0); opacity: 0.28; }
  to   { transform: scale(5); opacity: 0;    }
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1;    }
}
@keyframes shimmer-bg {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Breathing border ring on a pseudo-element  -  same rhythm as the old
   box-shadow spread, rebuilt as transform/opacity. Paired with .animate-glow. */
@keyframes glow-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.3); opacity: 0; }
}
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none;    }
}
@keyframes count-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
/* Hero pill "live" pulse — scales 1 → 2.4 with a held tail. Shared across
   every product hero (MF, RBI, CGB, FD). */
@keyframes mh-hero-ping {
  0%   { transform: scale(1);   opacity: 0.7; }
  80%  { transform: scale(2.4); opacity: 0;   }
  100% { transform: scale(2.4); opacity: 0;   }
}
/* Bottom-sheet drawer slide-up — for compare sheets and product drawers. */
@keyframes mh-drawer-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* -- Animation utility classes -------------------------------------------- */

.animate-fade-up      { animation: fade-up      0.45s var(--ease-premium) both; }
.animate-fade-in      { animation: fade-in      0.32s var(--ease-premium) both; }
.animate-fade-down    { animation: fade-down    0.28s var(--ease-premium) both; }
.animate-slide-right  { animation: slide-in-right 0.38s var(--ease-premium) both; }
.animate-slide-left   { animation: slide-in-left  0.38s var(--ease-premium) both; }
.animate-page-in      { animation: page-in      0.5s  var(--ease-premium) both; }
.animate-modal-in     { animation: modal-in     0.42s var(--ease-premium) both; }
.animate-card-in      { animation: card-in      0.5s  var(--ease-premium) both; }
.animate-card-stagger { animation: card-stagger 0.5s  var(--ease-premium) both; }
.animate-step         { animation: step-transition 0.45s var(--ease-premium) both; }
.animate-slide-forward { animation: slide-forward 0.45s var(--ease-premium) both; }
.animate-slide-back   { animation: slide-back   0.45s var(--ease-premium) both; }
.animate-bounce-in    { animation: bounce-in    0.4s  var(--ease-premium) both; }
.animate-check-pop    { animation: check-pop    0.38s var(--ease-spring)  both; }
.animate-scale-check  { animation: scale-check  0.3s  var(--ease-spring)  both; }
.animate-otp-pop      { animation: otp-pop      0.2s  var(--ease-spring)  both; }
.animate-select-pop   { animation: select-pop   0.22s var(--ease-spring)  both; }
.animate-shake        { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97); }
.animate-spin         { animation: spin 1s var(--ease-linear) infinite; }
.animate-ticker       { animation: ticker-scroll 40s var(--ease-linear) infinite; }
.animate-ticker:hover { animation-play-state: paused; }
.animate-bar-fill     { animation: bar-fill 0.45s var(--ease-premium) both; transform-origin: left; }
.animate-step-ping    { animation: step-ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
.animate-pulse-ring          { position: relative; }
.animate-pulse-ring::after   {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(22,32,91,.22);
  pointer-events: none;
  animation: pulse-ring 0.55s ease-out both;
}
.animate-back-in      { animation: back-btn-in 0.24s var(--ease-premium) both; }
.animate-shimmer-sweep { animation: shimmer-sweep 0.7s ease-out forwards; }
.animate-float        { animation: float-up 4s ease-in-out infinite; }
.animate-number-pop   { animation: number-pop 0.4s var(--ease-spring) both; }
.animate-draw         { animation: draw-path 0.7s var(--ease-premium) both; }
.animate-progress     { animation: progress-fill 0.9s var(--ease-premium) both; transform-origin: left; }
.animate-glow         { position: relative; }
.animate-glow::after  {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(22,32,91,0.18);
  pointer-events: none;
  animation: glow-pulse 2.2s ease-in-out infinite;
}
.animate-reveal       { animation: reveal-up 0.55s var(--ease-premium) both; }
.animate-count-in     { animation: count-in 0.35s var(--ease-premium) both; }

/* -- Stagger children ----------------------------------------------------- */
/* Pair with any .animate-card-stagger / .animate-fade-up children          */
.stagger-children > *:nth-child(1) { animation-delay: 0ms;   }
.stagger-children > *:nth-child(2) { animation-delay: calc(var(--stagger-base) * 1);  }
.stagger-children > *:nth-child(3) { animation-delay: calc(var(--stagger-base) * 2); }
.stagger-children > *:nth-child(4) { animation-delay: calc(var(--stagger-base) * 3); }
.stagger-children > *:nth-child(5) { animation-delay: calc(var(--stagger-base) * 4); }
.stagger-children > *:nth-child(6) { animation-delay: calc(var(--stagger-base) * 5); }

/* -- Scroll reveal -------------------------------------------------------- */
/* JS sets .visible on intersection. GPU-composited for 60fps.              */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-premium),
              transform 0.65s var(--ease-premium);
}
.scroll-reveal.visible { opacity: 1; transform: translateY(0); }

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.65s var(--ease-premium),
              transform 0.65s var(--ease-premium);
}
.scroll-reveal-left.visible { opacity: 1; transform: translateX(0); }

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.65s var(--ease-premium),
              transform 0.65s var(--ease-premium);
}
.scroll-reveal-right.visible { opacity: 1; transform: translateX(0); }

/* NOTE: no blanket `will-change` on the entrance classes  -  it kept every
   animated card a containing block for fixed-position descendants forever
   (overlay-anchoring bugs). The animations are short; the hint isn't worth
   the stacking-context hazard.
   Same reason the entrance keyframes above end at `transform: none` (NOT
   translateY(0)/translateX(0)): the utilities use fill-mode `both`, so a
   non-none end value would stay applied after the animation and keep the
   element a containing block for `position: fixed` descendants forever
   (e.g. animate-page-in on a page <main> trapped the consultation-cta
   booking modal inside the page instead of the viewport). `none` is the
   identity for interpolation, so the motion is unchanged. */

/* -- MoneyHoney - semantic animation classes ------------------------------ */
/* These classes directly express intent (enter/exit/emphasize)             */

@keyframes entrance-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none;    }
}
@keyframes entrance-right {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none;    }
}
@keyframes entrance-scale {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1);    }
}
@keyframes exit-up {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
@keyframes exit-down {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}
@keyframes emphasize-pop {
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.04); }
  100% { transform: scale(1);    }
}
@keyframes mh-lift {
  /* Per project rule (feedback_no_shadows.md): no box-shadow - depth via */
  /* translateY + border-color shift only.                                 */
  from { transform: translateY(0);    border-color: var(--color-border-soft, #ECEEF2); }
  to   { transform: translateY(-2px); border-color: var(--color-border-medium, #D5D8DF); }
}
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px)  scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1);    }
}

/* Entrance classes - elements entering viewport */
.animate-enter-up      { animation: entrance-up    var(--duration-5) var(--ease-entrance) both; }
.animate-enter-right   { animation: entrance-right var(--duration-4) var(--ease-entrance) both; }
.animate-enter-scale   { animation: entrance-scale var(--duration-4) var(--ease-overshoot) both; }

/* Exit classes */
.animate-exit-up       { animation: exit-up   var(--duration-3) var(--ease-exit) forwards; }
.animate-exit-down     { animation: exit-down var(--duration-3) var(--ease-exit) forwards; }

/* Emphasized - key UX moments */
.animate-emphasize     { animation: emphasize-pop  var(--duration-4) var(--ease-emphasized) both; }

/* Premium card hover lift - driven by CSS, no JS required.
   Per project rule (feedback_no_shadows.md): no box-shadow.
   Depth is conveyed by translateY + a slightly darker border on hover. */
.mh-card-hover {
  transition: transform var(--duration-2) var(--ease-mh),
              border-color var(--duration-2) var(--ease-mh);
  border: 1px solid var(--color-border-soft, #ECEEF2);
}
.mh-card-hover:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-medium, #D5D8DF);
}

/* Count/number update entrance */
.animate-count-up      { animation: count-up var(--duration-4) var(--ease-overshoot) both; }

/* -- Stagger variants - longer depth for large card grids ----------------- */
.stagger-children > *:nth-child(7) { animation-delay: calc(var(--stagger-base) * 6); }
.stagger-children > *:nth-child(8) { animation-delay: calc(var(--stagger-base) * 7); }

/* -- Splash screen -------------------------------------------------------- */

@keyframes splash-logo {
  0%   { opacity: 0; transform: scale(0.88) translateY(6px); filter: blur(16px); }
  30%  { opacity: 1; }
  60%  { filter: blur(0); }
  72%  { transform: scale(1.018) translateY(0); }
  86%  { transform: scale(0.994); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes splash-wordmark {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes splash-exit {
  0%   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.06) translateY(-18px); filter: blur(10px); }
}

.animate-splash-logo     { animation: splash-logo     0.7s  cubic-bezier(.22,1,.36,1) both; }
.animate-splash-wordmark { animation: splash-wordmark 0.45s var(--ease-premium) 0.45s both; }
.animate-splash-exit     { animation: splash-exit     0.4s  cubic-bezier(.4,0,.2,1) forwards; }

/* -- Splash light streaks + glow (premium fintech motion) --------------- */
/* Diagonal streaks slowly drift across, while glow blobs pulse and
   translate. Pale blue base with white streaks gives the splash that
   "premium fintech" lit-from-behind quality. */
@keyframes splash-streaks {
  0%   { transform: translate(-3%, -3%) scale(1.05); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate(2%, 1%) scale(1); opacity: 1; }
}
@keyframes splash-glow-1 {
  0%   { transform: translate(-15%, -10%) scale(0.9); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translate(5%, 6%) scale(1.15); opacity: 1; }
}
@keyframes splash-glow-2 {
  0%   { transform: translate(15%, 12%) scale(0.9); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translate(-8%, -6%) scale(1.18); opacity: 1; }
}
@keyframes splash-glow-3 {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translate(-50%, -55%) scale(1.4); opacity: 1; }
}

.animate-splash-streaks { animation: splash-streaks 1.6s cubic-bezier(.22,1,.36,1) 0s   both; }
.animate-splash-glow-1  { animation: splash-glow-1  1.6s cubic-bezier(.22,1,.36,1) 0.05s both; }
.animate-splash-glow-2  { animation: splash-glow-2  1.7s cubic-bezier(.22,1,.36,1) 0.10s both; }
.animate-splash-glow-3  { animation: splash-glow-3  1.5s cubic-bezier(.22,1,.36,1) 0.15s both; }

/* -- Bottom-sheet slide up/down ------------------------------------------- */
@keyframes slide-up {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1;   }
}
@keyframes slide-down {
  from { transform: translateY(0);    opacity: 1;   }
  to   { transform: translateY(100%); opacity: 0;   }
}
.animate-slide-up   { animation: slide-up   0.38s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-slide-down { animation: slide-down 0.28s cubic-bezier(0.17, 0, 1, 1) forwards; }

/* Closing state: override enter-animations with exit counterparts.
   Apply .is-closing to the sheet root to play the exit. */
.is-closing .animate-slide-up  { animation: slide-down 0.28s cubic-bezier(0.17, 0, 1, 1) forwards; }
.is-closing .animate-fade-in   { animation: fade-out   0.22s cubic-bezier(0.17, 0, 1, 1) forwards; }

/* -- Drawer slide-in/out from side edges ---------------------------------- */
@keyframes drawer-in-right {
  from { transform: translateX(100%); opacity: 0.6; }
  to   { transform: translateX(0);    opacity: 1;   }
}
@keyframes drawer-in-left {
  from { transform: translateX(-100%); opacity: 0.6; }
  to   { transform: translateX(0);     opacity: 1;   }
}
@keyframes drawer-out-right {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}
@keyframes drawer-out-left {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}
@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.animate-drawer-right     { animation: drawer-in-right  0.38s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-drawer-left      { animation: drawer-in-left   0.38s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-drawer-out-right { animation: drawer-out-right 0.26s cubic-bezier(0.17, 0, 1, 1) forwards; }
.animate-drawer-out-left  { animation: drawer-out-left  0.26s cubic-bezier(0.17, 0, 1, 1) forwards; }
.animate-fade-out         { animation: fade-out         0.22s cubic-bezier(0.17, 0, 1, 1) forwards; }

/* Legal drawer closing state (right-side drawers using .is-closing) */
.is-closing .drawer-panel    { animation: drawer-out-right 0.28s cubic-bezier(0.17, 0, 1, 1) forwards !important; }
.is-closing .drawer-backdrop { animation: fade-out         0.22s cubic-bezier(0.17, 0, 1, 1) forwards !important; }

/* ─── PRODUCT- / FEATURE-SPECIFIC KEYFRAMES ──────────────────────────────
   Lifted from component-scoped @keyframes (lint rule #14). Component SCSS
   files reference these by name; Angular keyframe names are not view-
   encapsulated so a global definition works the same as an inline one.
   Owner: design-system (added 2026-05-23 to satisfy design-lint; see
   docs/architecture/decisions.md ADR-008 review note).
   ────────────────────────────────────────────────────────────────────── */

/* NCD: Toast slide-up + fade (translate centered) */
@keyframes ssToastFade {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to   { opacity: 1; transform: translate(-50%, 0);   }
}

/* NCD: Sticky footer shake on undertaking error */
@keyframes ssFooterShake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0);  }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0);  }
}

/* NCD: Detail-panel backdrop fade (deeper than fade-in) */
@keyframes ssDetailBackdropFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* NCD + Legal drawer: Panel slides in from the right edge (full 100%) */
@keyframes ssDetailSlideInRight {
  from { transform: translateX(100%); opacity: 0.7; }
  to   { transform: translateX(0);    opacity: 1;   }
}
@keyframes drawerIn {
  from { transform: translateX(100%); opacity: 0.7; }
  to   { transform: translateX(0);    opacity: 1;   }
}

/* NCD: Bottom-sheet style slide-up (full 100% travel) */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes auSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0);    }
}

/* NCD: Confirm-popup tile fade with subtle scale */
@keyframes delFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1);    }
}
@keyframes splitFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1);    }
}

/* NCD: Select-series table highlight pulse (background tint) */
@keyframes ss-table-pulse {
  0%   { background-color: var(--color-surface-page); }
  25%  { background-color: var(--color-brand-tint);   }
  100% { background-color: var(--color-surface-page); }
}

/* NCD: Countdown pulse — subtle scale tick on issue cards */
@keyframes countdown-pulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.02); }
}

/* NCD: Rating-info modal backdrop fade (darker target opacity) */
@keyframes ratingInfoFadeIn {
  from { background: rgba(24, 29, 39, 0);   }
  to   { background: rgba(24, 29, 39, 0.5); }
}
@keyframes ratingInfoSlideUp {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* NCD: Track-transaction skeleton shimmer (background-position sweep) */
@keyframes shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Profile shell: gentle fade + pop + section change */
@keyframes profile-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes profile-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
@keyframes profile-section-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none;   }
}

/* Track-status: active-dot heartbeat */
@keyframes ts-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.6; transform: scale(0.75); }
}

/* Legal drawer: simple backdrop fade */
@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* -- Document upload progress + spinner (shared) -------------------------- */
/* Determinate 800ms progress bar + rotating loader for the doc-upload
   feedback window. Shared across profile (bank/address/documents/reportbug)
   and offline-txn-detail. cubic-bezier(0.4, 0, 0.2, 1) kept literal to
   preserve exact timing/easing. */
.mh-doc-progress {
  width: 0;
  animation: mh-doc-progress-fill 800ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes mh-doc-progress-fill {
  0%   { width: 0; }
  20%  { width: 35%; }
  60%  { width: 75%; }
  100% { width: 100%; }
}
.mh-doc-spin {
  animation: mh-doc-spin 1s linear infinite;
}
@keyframes mh-doc-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mh-doc-progress { animation: none; width: 100%; }
  .mh-doc-spin     { animation: none; }
}

/* -- Portfolio today-pill ------------------------------------------------- */
/* One-shot pulse on the green "today" delta pill + a refresh replay flash.
   Referencing .today-pill-anim / .today-pill-refresh rules stay in
   portfolio.component.scss. */
@keyframes mh-today-pill-pulse {
  0%   { opacity: 0;   transform: scale(0.97); }
  60%  { opacity: 1;   transform: scale(1.02); }
  100% { opacity: 1;   transform: scale(1);    }
}
@keyframes mh-today-pill-refresh {
  0%   { opacity: 0.45; transform: scale(0.98); }
  60%  { opacity: 1;    transform: scale(1.02); }
  100% { opacity: 1;    transform: scale(1);    }
}

/* -- File-upload (shared-core mh-file-upload) ----------------------------- */
/* Loading-icon spin + indeterminate progress sweep. Referencing
   .mh-fu-spin / .mh-fu-progress rules stay in mh-file-upload.component.scss. */
@keyframes mh-fu-spin {
  to { transform: rotate(360deg); }
}
@keyframes mh-fu-sweep {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* -- Pulse — opacity heartbeat for live / loading dots (relocated from rbi-bonds) */
@keyframes rbi-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* -- Appointment detail: toast slide-in + progress drain (relocated from component) */
@keyframes appt-toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes appt-toast-drain {
  from { width: 100%; }
  to   { width: 0%; }
}

/* -- Home landing: scroll cue drop + logo marquee (relocated from component) */
@keyframes cue-drop {
  from { transform: translateY(0); }
  to   { transform: translateY(200%); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* -- Reduced motion override ---------------------------------------------- */
@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;
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./projects/library/design-system/src/styles/layout.css ***!
  \**********************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT SYSTEM - Page shells, containers, auth split, responsive breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- Max-width container -------------------------------------------------- */
.page-container {
  width: 100%;
  max-width: var(--nav-max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 1024px) {
  .page-container { padding-inline: var(--space-8); }
}

/* -- App page shell - inner app background -------------------------------- */
.page-shell {
  min-height: 100vh;
  background: var(--color-surface-app);
}

/* -- Auth / Onboarding 50/50 split layout --------------------------------- */
/* Mobile: single column. Desktop (≥1024px): exact 50/50 split.            */
/* Never change this ratio - it is enforced by design.                      */
.auth-layout {
  display: flex;
  min-height: 100vh;
}
.auth-layout__brand {
  display: none;
  width: 50%;
  flex-shrink: 0;
}
.auth-layout__form {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-page);
  overflow-y: auto;
}
@media (min-width: 1024px) {
  .auth-layout__brand { display: flex; }
}

/* -- Content width variants ----------------------------------------------- */
.content-narrow  { max-width: 480px;  margin-inline: auto; }
.content-default { max-width: 640px;  margin-inline: auto; }
.content-wide    { max-width: 960px;  margin-inline: auto; }
.content-full    { max-width: 1280px; margin-inline: auto; }

/* -- NCD Select-Series scroll-driven app-header hide --
   The component's scroll listener tracks scroll DIRECTION and toggles
   `body.ncd-ss-scrolled` on scroll-down past a threshold (cleared on
   scroll-up).  When set, this rule slides the FIXED mobile nav inside
   `app-header` up out of view so the page's navy sticky band can take
   the viewport top.  Pinch zoom and the account dropdown stay safe
   because we transform only the inner <nav>, not the `app-header`
   host - the host keeps its plain `display: block` with no stacking
   context, so descendant fixed/absolute elements still anchor to the
   viewport.
   Mobile only - desktop uses a sticky in-flow header that we never
   want to hide. */
@media (max-width: 1023px) {
  app-header > nav.fixed {
    transition: transform 0.22s ease;
  }
  body.ncd-ss-scrolled app-header > nav.fixed {
    transform: translateY(-110%);
  }
  /* Spacer follows the bar so page content snaps up when bar hides;
     otherwise an empty 56-px stripe would sit at the top. */
  body.ncd-ss-scrolled app-header > .mh-mobile-header-spacer {
    height: 0;
    min-height: 0;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./projects/library/design-system/src/styles/utilities.css ***!
  \*************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES - Controlled, intentional single-purpose helpers
   Everything here references tokens. No arbitrary values.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- Scrollbar hide ------------------------------------------------------- */
.scrollbar-none,
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar,
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* -- Typography utilities ------------------------------------------------- */

/* Tabular figures - all financial numbers should use these */
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'kern' 1, 'tnum' 1;
}
.metric-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'kern' 1, 'tnum' 1;
  letter-spacing: var(--tracking-snug);
}

/* ALL-CAPS section label - e.g. "POPULAR SEARCHES", "TRENDING NOW" */
.section-label {
  font-size: var(--text-xs);           /* 12px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Prose body - for long-form content blocks */
.prose-body {
  font-size: var(--text-base);         /* 16px */
  line-height: var(--leading-relaxed); /* 1.6 - WCAG recommended */
  color: var(--color-text-secondary);
}

/* Caption / metadata - timestamps, fine print */
.caption {
  font-size: var(--text-xs);           /* 12px */
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* -- Icon + text alignment ------------------------------------------------ */
/* Use these on the WRAPPER that contains an icon + text together.           */
/* Rule: icon should be 1× the text's line height to sit in the cap-height.  */

/* Icon paired with xs text (12px) - icon at 12px */
.icon-xs { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); }
.icon-xs > svg, .icon-xs [data-icon] { width: var(--icon-xs); height: var(--icon-xs); flex-shrink: 0; }

/* Icon paired with sm text (14px) - icon at 14-16px */
.icon-sm { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.icon-sm > svg, .icon-sm [data-icon] { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; }

/* Icon paired with base text (16px) - icon at 16px */
.icon-md { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-base); }
.icon-md > svg, .icon-md [data-icon] { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; }

/* Standalone nav / feature icon - 20px */
.icon-lg { display: inline-flex; align-items: center; gap: 10px; }
.icon-lg > svg, .icon-lg [data-icon] { width: var(--icon-lg); height: var(--icon-lg); flex-shrink: 0; }

/* -- 3D card tilt (JS-driven via mousemove) ------------------------------- */
.tilt-card {
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* -- Ripple effect (programmatically inserted element) -------------------- */
.ripple {
  position: absolute;
  border-radius: var(--radius-full);
  background: currentColor;
  width: 40px;
  height: 40px;
  margin: -20px;
  animation: ripple-out 0.55s ease-out forwards;
  pointer-events: none;
}

/* -- Transition delay helpers --------------------------------------------- */
.delay-100 { transition-delay: 100ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; }
.delay-500 { transition-delay: 500ms !important; }

/* -- Glassmorphism utilities ---------------------------------------------- */
/* Only apply where a non-white/non-flat backdrop is visible behind element  */

/* Light glass - navbars, floating panels over page content */
.glass-light {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

/* Dark glass - overlays and panels on dark/navy backgrounds */
.glass-dark {
  background: rgba(10, 14, 30, 0.72);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Navy glass - cards and badges on dark hero/gradient sections */
.glass-navy {
  background: rgba(22, 32, 91, 0.80);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* -- Validation flash (disabled-button → scroll-to-invalid feedback) -------- */
/* Added to the first invalid field when a disabled app-button is clicked.     */
@keyframes mh-validation-flash {
  0%   { outline: 2px solid var(--color-brand); outline-offset: 2px; }
  60%  { outline: 2px solid var(--color-brand); outline-offset: 4px; }
  100% { outline: 2px solid transparent;        outline-offset: 2px; }
}
.mh-validation-flash {
  animation: mh-validation-flash 1.4s ease-out forwards;
}

/* Frosted - adds blur/saturation only, use with semi-transparent bg classes */
.frosted {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/*!**********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./projects/library/design-system/src/styles/components/buttons.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS - Primary, Secondary, Ghost, Danger, Disabled
   ---------------------------------------------------------------------------
   Rules:
   - Height is ALWAYS token-driven. No py-* or h-11/h-10 for buttons.
   - All colors reference tokens. No hex literals.
   - Disabled state must never lift or cast shadow.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- Base shared reset ---------------------------------------------------- */
[class^="btn-"],
[class*=" btn-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-body);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-radius);
  border: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-premium);
}

/* -- Primary -------------------------------------------------------------- */
.btn-primary {
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  color: var(--base-white);
  background: var(--color-brand);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-brand-hover);
}
.btn-primary:active:not(:disabled) {
  background: var(--color-brand-pressed);
  transform: scale(0.98);
}

/* -- Primary - small ------------------------------------------------------ */
.btn-primary-sm {
  height: var(--btn-height-sm);
  padding: 0 var(--space-4);
}

/* -- Secondary ------------------------------------------------------------ */
.btn-secondary {
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  color: var(--color-text-primary);
  background: var(--color-surface-page);
  border: 1px solid var(--color-border-default);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  background: var(--color-brand-tint-50);
}
.btn-secondary:active:not(:disabled) { transform: scale(0.99); }

/* -- Ghost ---------------------------------------------------------------- */
.btn-ghost {
  height: var(--btn-height-sm);
  padding: 0 var(--space-3);
  color: var(--color-brand);
  background: transparent;
  font-weight: var(--font-weight-medium);
}
.btn-ghost:hover:not(:disabled) { background: var(--color-brand-tint); }

/* -- Danger --------------------------------------------------------------- */
.btn-danger {
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  color: var(--base-white);
  background: var(--color-danger);
}
.btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-danger) 85%, #000 15%);
  transform: translateY(-1px);
}
.btn-danger:active:not(:disabled) { transform: scale(0.98); }

/* -- Disabled (applies to all variants) ----------------------------------- */
[class^="btn-"]:disabled,
[class*=" btn-"]:disabled,
.btn-disabled {
  background: #d4d4d4 !important;
  color: #737373 !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}
.btn-disabled::before { display: none; }

/* -- Full-width modifier -------------------------------------------------- */
.btn-full { width: 100%; }

/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./projects/library/design-system/src/styles/components/cards.css ***!
  \********************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   CARDS - Base, premium, hover elevation, chart segment transitions
   ---------------------------------------------------------------------------
   Rule: Card radius is ALWAYS --radius-md (8px) for every card surface.
         No larger radii. No shadows - borders only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- Base card ------------------------------------------------------------ */
.card {
  background: var(--color-surface-page);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
@media (min-width: 1024px) {
  .card { padding: var(--space-5); }
}

/* -- Premium card - gradient wash + inner highlight ---------------------- */
.card-premium {
  background: linear-gradient(160deg, rgba(243,244,255,0.5) 0%, rgba(255,255,255,0) 60%),
              var(--color-surface-page);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-md);
}
.card-premium:hover {
  border-color: rgba(0,0,0,0.12);
}

/* -- Hover lift - translate only, no shadow ------------------------------- */
.hover-lift {
  transition: transform var(--duration-fast) var(--ease-premium),
              border-color var(--duration-fast) ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
}

/* -- Donut chart segment transitions -------------------------------------- */
.donut-seg {
  transition: stroke-dasharray 0.75s var(--ease-premium),
              opacity 0.2s ease,
              stroke-width 0.2s ease;
  cursor: pointer;
}
.donut-seg:nth-child(1) { transition-delay: 0ms,   0ms, 0ms; }
.donut-seg:nth-child(2) { transition-delay: 110ms, 0ms, 0ms; }
.donut-seg:nth-child(3) { transition-delay: 220ms, 0ms, 0ms; }
.donut-seg:nth-child(4) { transition-delay: 330ms, 0ms, 0ms; }
.donut-seg:nth-child(5) { transition-delay: 440ms, 0ms, 0ms; }

/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./projects/library/design-system/src/styles/components/forms.css ***!
  \********************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   FORMS - Input, label, error message, helper text
   ---------------------------------------------------------------------------
   Rules:
   - Height is ALWAYS --input-height (48px). Never h-10 for inputs.
   - Font-size is ALWAYS 16px. iOS Safari zooms on focus when < 16px.
   - Radius is ALWAYS --input-radius (6px). Never rounded-card / md / lg.
   - Focus uses branded 2px outline (no shadow, no layout shift).
   - Error border is a state class, never inline style.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- Base input field ----------------------------------------------------- */
.input-base {
  display: block;
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--input-padding-x);
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-surface-page);
  border: 1px solid var(--color-input-border);
  border-radius: var(--input-radius);
  outline: none;
  transition: border-color var(--duration-3) var(--ease-standard);
}
.input-base::placeholder { color: var(--color-text-muted); }
.input-base:hover  { border-color: var(--color-input-border-hover); }
.input-base:focus  {
  /* Per project rule (feedback_no_shadows.md): no shadow focus ring.        */
  /* Focus indicator uses outline (no layout shift, no shadow).              */
  border-color: var(--color-input-border-focus);
  outline: 2px solid var(--color-input-border-focus);
  outline-offset: 0;
}

/* -- Input state modifiers ------------------------------------------------ */
.input-error { border-color: var(--color-input-border-error) !important; }

/* -- Label ---------------------------------------------------------------- */
.input-label {
  display: block;
  font-family: var(--font-family-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* -- Error message -------------------------------------------------------- */
.input-error-msg {
  font-family: var(--font-family-body);
  font-size: var(--text-sm);
  color: var(--color-danger);
  margin-top: var(--space-1);
}

/* -- Helper text ---------------------------------------------------------- */
.input-helper {
  font-family: var(--font-family-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* -- Dropdown chevron ----------------------------------------------------- */
/*
 * Every <select> across MoneyHoney shows our own chevron-down so the control
 * unambiguously reads as a dropdown, regardless of whether the markup uses
 * Tailwind's `appearance-none` or relies on the platform-native arrow (which
 * varies across Safari / Chrome / Firefox and is invisible on some macOS
 * configurations).
 *
 * We force `appearance: none` on every <select> here so the global chevron is
 * the single source of truth - no more "this dropdown has a chevron, that one
 * doesn't" inconsistency. Selects that previously relied on the native arrow
 * pick up our chevron automatically without touching their markup.
 *
 * Inline SVG keeps it network-free. background-image SVGs can't inherit
 * currentColor, so we hardcode #717680 (matches text-ink-cool / neutral-500).
 */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23717680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 2.5rem;
}
/* Firefox: hide the dotted focus outline on the inner text node so our own
   focus styling controls the look. */
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 currentColor; }

/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./projects/library/design-system/src/styles/components/badges.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   BADGES & STATUS PILLS - Brand, semantic, and status variants
   ---------------------------------------------------------------------------
   Rule: Status must NEVER be communicated by color alone - always include
         a text label. The dot is a visual accent, not the only signal.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- Base badge ----------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);   /* 6px - rectangular tag */
  font-family: var(--font-family-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
}

/* -- Badge variants ------------------------------------------------------- */
.badge--brand {
  background: var(--color-brand-tint-200);
  color: var(--color-brand);
  border: 1px solid var(--color-brand-light);
}
.badge--success {
  background: var(--color-success-bg);
  color: var(--color-success-600);
}
.badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-gray-700);
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, #fff 70%);
}
.badge--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.badge--neutral {
  background: var(--color-surface-elevated);
  color: var(--color-text-muted);
}

/* -- Status pill (colored dot + label) ------------------------------------ */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-family: var(--font-family-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
}
.status-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* -- Status pill: allotted / confirmed ------------------------------------ */
.status-pill--success {
  background: var(--color-success-bg);
  color: var(--color-success-600);
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, #fff 70%);
}
.status-pill--success .status-pill__dot { background: var(--color-success); }

/* -- Status pill: under process / info ------------------------------------ */
.status-pill--info {
  background: var(--color-brand-tint-200);
  color: var(--color-brand-secondary);
  border: 1px solid var(--color-brand-light);
}
.status-pill--info .status-pill__dot { background: var(--color-brand); }

/* -- Status pill: pending action / warning -------------------------------- */
.status-pill--warning {
  background: var(--color-warning-bg);
  color: var(--color-gray-700);
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, #fff 70%);
}
.status-pill--warning .status-pill__dot { background: var(--color-warning); }

/* -- Status pill: cancelled / danger -------------------------------------- */
.status-pill--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
}
.status-pill--danger .status-pill__dot { background: var(--color-danger); }

/* -- Status pill: neutral / cancelled ------------------------------------- */
.status-pill--neutral {
  background: var(--color-gray-200);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}
.status-pill--neutral .status-pill__dot { background: var(--color-text-muted); }

/*!***********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./projects/library/design-system/src/styles/components/skeleton.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON LOADERS - Loading state placeholders
   Uses shimmer-bg keyframe defined in motion.css
   ═══════════════════════════════════════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(90deg, var(--color-border-subtle) 0%, var(--color-border-default) 50%, var(--color-border-subtle) 100%);
  background-size: 200% 100%;
  animation: shimmer-bg 1.4s ease-in-out infinite;
  border-radius: var(--radius-lg);
}

.skeleton--text {
  height: 1em;
  border-radius: var(--radius-sm);
}

.skeleton--circle {
  border-radius: var(--radius-full);
}

.skeleton--rect {
  border-radius: var(--radius-lg);
}

/* Skeleton group - auto-sizes children when width/height set on parent */
.skeleton-group { display: flex; flex-direction: column; gap: var(--space-2); }

/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./projects/library/design-system/src/styles/components/tables.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   TABLES - Base, hover, striped, sticky header
   ---------------------------------------------------------------------------
   The `.mh-table` class is applied by the `[appTable]` directive on any
   native <table> element. Descendant selectors style <thead>, <tbody>, <tr>,
   <th>, <td> consistently - consumers don't need to repeat utility classes on
   every cell.

   Rules locked here:
     - Borders, never shadows (project rule)
     - Border colour: --color-border-soft (canonical for "subtle divider")
     - Header background: --color-surface-tint
     - Cell padding: 16px horizontal × 12px vertical (= --space-4 × --space-3)
     - Header text: text-xs uppercase, ink-cool, font-semibold
     - Body text:   text-sm, ink-deep
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- Wrap - consumer-applied. Provides horizontal scroll on overflow plus
       the outer rounded border that matches the project's table chrome. -- */
.mh-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);   /* 8px - matches card radius */
  background: var(--color-surface-page);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-medium) transparent;
}
.mh-table-wrap::-webkit-scrollbar { height: 8px; }
.mh-table-wrap::-webkit-scrollbar-thumb {
  background: var(--color-border-medium);
  border-radius: var(--radius-2xs);
}
.mh-table-wrap::-webkit-scrollbar-track { background: transparent; }

/* -- Base table ----------------------------------------------------------- */
.mh-table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  font-family: var(--font-family-body);
}

/* -- Header --------------------------------------------------------------- */
.mh-table thead {
  background: var(--color-surface-tint);
  border-bottom: 1px solid var(--color-border-soft);
}
.mh-table thead th {
  padding: var(--space-3) var(--space-4);   /* 12px 16px */
  font-size: var(--text-xs);                /* 12px - the project minimum */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-cool);
  text-transform: uppercase;
  letter-spacing: 0.025em;                  /* matches tracking-wide; tighter than tracking-wider (banned) */
  white-space: nowrap;
  vertical-align: middle;
}

/* -- Body ----------------------------------------------------------------- */
.mh-table tbody tr {
  border-bottom: 1px solid var(--color-border-soft);
  transition: background-color var(--duration-2) var(--ease-standard);
}
.mh-table tbody tr:last-child {
  border-bottom: 0;
}
.mh-table tbody td {
  padding: var(--space-3) var(--space-4);   /* 12px 16px */
  font-size: var(--text-sm);                /* 14px */
  color: var(--color-text-deep);
  vertical-align: middle;
}

/* -- Modifier: hover - interactive row highlight -------------------------- */
.mh-table--hover tbody tr:hover {
  background-color: var(--color-surface-app);
}

/* -- Modifier: striped - alternating row backgrounds ---------------------- */
.mh-table--striped tbody tr:nth-child(even) {
  background-color: var(--color-surface-app-snow);
}
.mh-table--striped tbody tr:nth-child(even):hover {
  /* Hover wins over stripe, but we re-state to avoid a flash. */
  background-color: var(--color-surface-app);
}

/* -- Modifier: sticky header - header pins on vertical scroll ------------- */
.mh-table--sticky-head thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* -- Modifier: compact - denser row height for data-heavy admin tables ---- */
.mh-table--compact thead th,
.mh-table--compact tbody td {
  padding: var(--space-2) var(--space-3); /* 8px 12px */
}

/* -- Modifier: align-end - right-align numeric / currency columns.
       Apply with `<td class="mh-table-num">…</td>` (consumer-applied since the
       directive can't know which cells hold numbers).                       -- */
.mh-table .mh-table-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* -- Empty state row ------------------------------------------------------ */
/* When tbody has only a single full-span row presenting "no data", the
   bottom border looks weird. Apply `.mh-table-empty-row` to neutralise.   */
.mh-table tbody tr.mh-table-empty-row {
  border-bottom: 0;
}
.mh-table tbody tr.mh-table-empty-row td {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

/*!*********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./projects/library/design-system/src/styles/index.css ***!
  \*********************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   MONEYHONEY DESIGN SYSTEM - Global Style Bundle
   ---------------------------------------------------------------------------
   Single import that pulls the full DS style layer into a shell. Order
   matters - tokens first, base/motion/layout next, utilities, then
   component class layers.

   Usage from a shell's styles.css / styles.scss (Tailwind directives stay
   in the shell):
     @import '../../../library/design-system/src/styles/index.css';
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Design tokens (CSS custom properties - single source of truth) */

/* 2. Base reset + body defaults */

/* 3. Motion: keyframes + animation utility classes */

/* 4. Layout: containers, page shells, auth split */

/* 5. Utilities: typography helpers, scrollbar, tilt, ripple, delays */

/* 6. Component class layers */

/*!***********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./projects/shells/investor-desk-portal/src/styles.css?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   MONEYHONEY - Investor Shell · Global Style Entry Point
   ---------------------------------------------------------------------------
   All design-system rules now live in the shared library at
   projects/library/design-system/src/styles/. Do NOT add component or
   token styles here - add them to the library instead so every shell
   stays in sync.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Tailwind layers */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: Inter, ui-sans-serif, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
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;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-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.
*/
::-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 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
.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;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.-bottom-1 {
  bottom: -0.25rem;
}
.-bottom-20 {
  bottom: -5rem;
}
.-bottom-px {
  bottom: -1px;
}
.-left-16 {
  left: -4rem;
}
.-left-\[26px\] {
  left: -26px;
}
.-right-1 {
  right: -0.25rem;
}
.-right-16 {
  right: -4rem;
}
.-right-2 {
  right: -0.5rem;
}
.-right-24 {
  right: -6rem;
}
.-top-1 {
  top: -0.25rem;
}
.-top-16 {
  top: -4rem;
}
.-top-24 {
  top: -6rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-16 {
  bottom: 4rem;
}
.bottom-24 {
  bottom: 6rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.bottom-\[-1px\] {
  bottom: -1px;
}
.bottom-\[calc\(64px\+env\(safe-area-inset-bottom\2c 0px\)\)\] {
  bottom: calc(64px + env(safe-area-inset-bottom,0px));
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-11 {
  left: 2.75rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-\[13px\] {
  left: 13px;
}
.left-\[15px\] {
  left: 15px;
}
.left-\[7px\] {
  left: 7px;
}
.left-\[9px\] {
  left: 9px;
}
.left-px {
  left: 1px;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-12 {
  right: 3rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-5 {
  right: 1.25rem;
}
.right-6 {
  right: 1.5rem;
}
.right-card {
  right: 24px;
}
.top-0 {
  top: 0px;
}
.top-1 {
  top: 0.25rem;
}
.top-1\/2 {
  top: 50%;
}
.top-10 {
  top: 2.5rem;
}
.top-16 {
  top: 4rem;
}
.top-2 {
  top: 0.5rem;
}
.top-24 {
  top: 6rem;
}
.top-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-5 {
  top: 1.25rem;
}
.top-6 {
  top: 1.5rem;
}
.top-7 {
  top: 1.75rem;
}
.top-\[20px\] {
  top: 20px;
}
.top-\[34px\] {
  top: 34px;
}
.top-\[68px\] {
  top: 68px;
}
.top-\[calc\(100\%\+6px\)\] {
  top: calc(100% + 6px);
}
.top-card {
  top: 24px;
}
.top-full {
  top: 100%;
}
.top-px {
  top: 1px;
}
.isolate {
  isolation: isolate;
}
.-z-toast {
  z-index: -60;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[60\] {
  z-index: 60;
}
.z-confirm {
  z-index: 55;
}
.z-modal {
  z-index: 50;
}
.z-nav {
  z-index: 30;
}
.z-popover {
  z-index: 90;
}
.z-raised {
  z-index: 10;
}
.z-skip {
  z-index: 9999;
}
.z-toast {
  z-index: 60;
}
.z-wizard {
  z-index: 200;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-last {
  order: 9999;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.m-0 {
  margin: 0px;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.-mx-gutter {
  margin-left: -16px;
  margin-right: -16px;
}
.-my-1 {
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}
.-my-2 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}
.-my-3 {
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.-mb-2 {
  margin-bottom: -0.5rem;
}
.-mb-4 {
  margin-bottom: -1rem;
}
.-ml-1 {
  margin-left: -0.25rem;
}
.-ml-2 {
  margin-left: -0.5rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.-mr-2 {
  margin-right: -0.5rem;
}
.-mr-3 {
  margin-right: -0.75rem;
}
.-mt-0\.5 {
  margin-top: -0.125rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-9 {
  margin-bottom: 2.25rem;
}
.mb-\[22px\] {
  margin-bottom: 22px;
}
.mb-\[5px\] {
  margin-bottom: 5px;
}
.mb-card-sm {
  margin-bottom: 16px;
}
.mb-stack-md {
  margin-bottom: 16px;
}
.mb-stack-sm {
  margin-bottom: 12px;
}
.mb-stack-xs {
  margin-bottom: 8px;
}
.mb-subsection {
  margin-bottom: 32px;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-12 {
  margin-left: 3rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-auto {
  margin-left: auto;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mt-\[2px\] {
  margin-top: 2px;
}
.mt-\[5px\] {
  margin-top: 5px;
}
.mt-\[9px\] {
  margin-top: 9px;
}
.mt-auto {
  margin-top: auto;
}
.mt-card-sm {
  margin-top: 16px;
}
.mt-px {
  margin-top: 1px;
}
.mt-section-sm {
  margin-top: 48px;
}
.mt-stack-lg {
  margin-top: 24px;
}
.mt-stack-md {
  margin-top: 16px;
}
.mt-stack-sm {
  margin-top: 12px;
}
.mt-stack-xs {
  margin-top: 8px;
}
.box-border {
  box-sizing: border-box;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.\!block {
  display: block !important;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.list-item {
  display: list-item;
}
.hidden {
  display: none;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-56 {
  height: 14rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[180px\] {
  height: 180px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[200px\] {
  height: 200px;
}
.h-\[22px\] {
  height: 22px;
}
.h-\[238px\] {
  height: 238px;
}
.h-\[240px\] {
  height: 240px;
}
.h-\[2px\] {
  height: 2px;
}
.h-\[3px\] {
  height: 3px;
}
.h-\[46px\] {
  height: 46px;
}
.h-\[50px\] {
  height: 50px;
}
.h-\[52px\] {
  height: 52px;
}
.h-\[54px\] {
  height: 54px;
}
.h-\[56px\] {
  height: 56px;
}
.h-\[58px\] {
  height: 58px;
}
.h-\[5px\] {
  height: 5px;
}
.h-\[60px\] {
  height: 60px;
}
.h-\[64px\] {
  height: 64px;
}
.h-\[68px\] {
  height: 68px;
}
.h-\[72px\] {
  height: 72px;
}
.h-dvh {
  height: 100dvh;
}
.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-\[260px\] {
  max-height: 260px;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[78vh\] {
  max-height: 78vh;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[88vh\] {
  max-height: 88vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[92dvh\] {
  max-height: 92dvh;
}
.max-h-\[92vh\] {
  max-height: 92vh;
}
.max-h-\[calc\(100vh-200px\)\] {
  max-height: calc(100vh - 200px);
}
.min-h-0 {
  min-height: 0px;
}
.min-h-11 {
  min-height: 2.75rem;
}
.min-h-14 {
  min-height: 3.5rem;
}
.min-h-\[16px\] {
  min-height: 16px;
}
.min-h-\[20px\] {
  min-height: 20px;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[48px\] {
  min-height: 48px;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-60 {
  width: 15rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[120px\] {
  width: 120px;
}
.w-\[180px\] {
  width: 180px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[22px\] {
  width: 22px;
}
.w-\[238px\] {
  width: 238px;
}
.w-\[240px\] {
  width: 240px;
}
.w-\[300px\] {
  width: 300px;
}
.w-\[320px\] {
  width: 320px;
}
.w-\[360px\] {
  width: 360px;
}
.w-\[88\%\] {
  width: 88%;
}
.w-\[calc\(100\%-2rem\)\] {
  width: calc(100% - 2rem);
}
.w-\[min\(360px\2c calc\(100vw-24px\)\)\] {
  width: min(360px, calc(100vw - 24px));
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-4 {
  min-width: 1rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-\[1100px\] {
  min-width: 1100px;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[1500px\] {
  min-width: 1500px;
}
.min-w-\[18px\] {
  min-width: 18px;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[20px\] {
  min-width: 20px;
}
.min-w-\[220px\] {
  min-width: 220px;
}
.min-w-\[22px\] {
  min-width: 22px;
}
.min-w-\[28px\] {
  min-width: 28px;
}
.min-w-\[44px\] {
  min-width: 44px;
}
.min-w-\[640px\] {
  min-width: 640px;
}
.min-w-\[680px\] {
  min-width: 680px;
}
.min-w-\[68px\] {
  min-width: 68px;
}
.min-w-\[820px\] {
  min-width: 820px;
}
.min-w-\[860px\] {
  min-width: 860px;
}
.min-w-\[960px\] {
  min-width: 960px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[1080px\] {
  max-width: 1080px;
}
.max-w-\[120px\] {
  max-width: 120px;
}
.max-w-\[1280px\] {
  max-width: 1280px;
}
.max-w-\[16rem\] {
  max-width: 16rem;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[260px\] {
  max-width: 260px;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[3\.5rem\] {
  max-width: 3.5rem;
}
.max-w-\[300px\] {
  max-width: 300px;
}
.max-w-\[320px\] {
  max-width: 320px;
}
.max-w-\[340px\] {
  max-width: 340px;
}
.max-w-\[360px\] {
  max-width: 360px;
}
.max-w-\[400px\] {
  max-width: 400px;
}
.max-w-\[420px\] {
  max-width: 420px;
}
.max-w-\[460px\] {
  max-width: 460px;
}
.max-w-\[480px\] {
  max-width: 480px;
}
.max-w-\[500px\] {
  max-width: 500px;
}
.max-w-\[520px\] {
  max-width: 520px;
}
.max-w-\[540px\] {
  max-width: 540px;
}
.max-w-\[55\%\] {
  max-width: 55%;
}
.max-w-\[560px\] {
  max-width: 560px;
}
.max-w-\[60\%\] {
  max-width: 60%;
}
.max-w-\[640px\] {
  max-width: 640px;
}
.max-w-\[65\%\] {
  max-width: 65%;
}
.max-w-\[680px\] {
  max-width: 680px;
}
.max-w-\[720px\] {
  max-width: 720px;
}
.max-w-\[760px\] {
  max-width: 760px;
}
.max-w-\[860px\] {
  max-width: 860px;
}
.max-w-\[90\%\] {
  max-width: 90%;
}
.max-w-\[90vw\] {
  max-width: 90vw;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-screen-xl {
  max-width: 1280px;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-left {
  transform-origin: left;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-0\.5 {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-full {
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-4 {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-5 {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-full {
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-0 {
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-grabbing {
  cursor: grabbing;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
          user-select: none;
}
.select-all {
  -webkit-user-select: all;
          user-select: all;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.scroll-mt-20 {
  scroll-margin-top: 5rem;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[44px_1fr_44px\] {
  grid-template-columns: 44px 1fr 44px;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-card-sm {
  gap: 16px;
}
.gap-px {
  gap: 1px;
}
.gap-section-sm {
  gap: 48px;
}
.gap-stack-lg {
  gap: 24px;
}
.gap-stack-md {
  gap: 16px;
}
.gap-stack-sm {
  gap: 12px;
}
.gap-stack-xs {
  gap: 8px;
}
.gap-x-1\.5 {
  column-gap: 0.375rem;
}
.gap-x-10 {
  column-gap: 2.5rem;
}
.gap-x-2 {
  column-gap: 0.5rem;
}
.gap-x-3 {
  column-gap: 0.75rem;
}
.gap-x-4 {
  column-gap: 1rem;
}
.gap-x-5 {
  column-gap: 1.25rem;
}
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-x-8 {
  column-gap: 2rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.gap-y-5 {
  row-gap: 1.25rem;
}
.gap-y-8 {
  row-gap: 2rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-border-faint > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(242 242 242 / var(--tw-divide-opacity, 1));
}
.divide-border-soft > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(232 234 240 / var(--tw-divide-opacity, 1));
}
.divide-border-subtle > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(237 242 247 / var(--tw-divide-opacity, 1));
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}
.divide-surface-muted > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(242 242 242 / var(--tw-divide-opacity, 1));
}
.divide-surface-soft > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(245 245 247 / var(--tw-divide-opacity, 1));
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}
.justify-self-end {
  justify-self: end;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xs {
  border-radius: 2px;
}
.rounded-btn {
  border-radius: 6px;
}
.rounded-card {
  border-radius: 8px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-input {
  border-radius: 6px;
}
.rounded-xs {
  border-radius: 4px;
}
.rounded-b-none {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.rounded-l-input {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.rounded-r-input {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.rounded-t-\[20px\] {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.rounded-t-card {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.rounded-bl-card {
  border-bottom-left-radius: 8px;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-0 {
  border-bottom-width: 0px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-r-0 {
  border-right-width: 0px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-solid {
  border-style: solid;
}
.border-dashed {
  border-style: dashed;
}
.border-accent {
  --tw-border-opacity: 1;
  border-color: rgb(255 74 0 / var(--tw-border-opacity, 1));
}
.border-accent-hover {
  --tw-border-opacity: 1;
  border-color: rgb(230 46 5 / var(--tw-border-opacity, 1));
}
.border-accent\/30 {
  border-color: rgb(255 74 0 / 0.3);
}
.border-border {
  --tw-border-opacity: 1;
  border-color: rgb(224 230 240 / var(--tw-border-opacity, 1));
}
.border-border-ash {
  --tw-border-opacity: 1;
  border-color: rgb(236 238 246 / var(--tw-border-opacity, 1));
}
.border-border-cool {
  --tw-border-opacity: 1;
  border-color: rgb(232 232 237 / var(--tw-border-opacity, 1));
}
.border-border-cool-faint {
  --tw-border-opacity: 1;
  border-color: rgb(227 229 239 / var(--tw-border-opacity, 1));
}
.border-border-deep {
  --tw-border-opacity: 1;
  border-color: rgb(176 183 200 / var(--tw-border-opacity, 1));
}
.border-border-faint {
  --tw-border-opacity: 1;
  border-color: rgb(242 242 242 / var(--tw-border-opacity, 1));
}
.border-border-gray {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-border-gray-cool {
  --tw-border-opacity: 1;
  border-color: rgb(242 244 247 / var(--tw-border-opacity, 1));
}
.border-border-lavender {
  --tw-border-opacity: 1;
  border-color: rgb(168 176 238 / var(--tw-border-opacity, 1));
}
.border-border-light {
  --tw-border-opacity: 1;
  border-color: rgb(196 203 232 / var(--tw-border-opacity, 1));
}
.border-border-medium {
  --tw-border-opacity: 1;
  border-color: rgb(213 215 218 / var(--tw-border-opacity, 1));
}
.border-border-mist-strong {
  --tw-border-opacity: 1;
  border-color: rgb(200 205 216 / var(--tw-border-opacity, 1));
}
.border-border-pearl {
  --tw-border-opacity: 1;
  border-color: rgb(199 206 245 / var(--tw-border-opacity, 1));
}
.border-border-silk {
  --tw-border-opacity: 1;
  border-color: rgb(208 213 221 / var(--tw-border-opacity, 1));
}
.border-border-sky-pale {
  --tw-border-opacity: 1;
  border-color: rgb(186 230 253 / var(--tw-border-opacity, 1));
}
.border-border-soft {
  --tw-border-opacity: 1;
  border-color: rgb(232 234 240 / var(--tw-border-opacity, 1));
}
.border-border-subtle {
  --tw-border-opacity: 1;
  border-color: rgb(237 242 247 / var(--tw-border-opacity, 1));
}
.border-border-warm {
  --tw-border-opacity: 1;
  border-color: rgb(233 234 235 / var(--tw-border-opacity, 1));
}
.border-brand {
  --tw-border-opacity: 1;
  border-color: rgb(22 32 91 / var(--tw-border-opacity, 1));
}
.border-brand-light {
  --tw-border-opacity: 1;
  border-color: rgb(209 214 255 / var(--tw-border-opacity, 1));
}
.border-brand-light\/70 {
  border-color: rgb(209 214 255 / 0.7);
}
.border-brand-mid {
  --tw-border-opacity: 1;
  border-color: rgb(26 42 107 / var(--tw-border-opacity, 1));
}
.border-brand-tint-200 {
  --tw-border-opacity: 1;
  border-color: rgb(234 236 255 / var(--tw-border-opacity, 1));
}
.border-brand\/20 {
  border-color: rgb(22 32 91 / 0.2);
}
.border-brand\/25 {
  border-color: rgb(22 32 91 / 0.25);
}
.border-brand\/30 {
  border-color: rgb(22 32 91 / 0.3);
}
.border-danger {
  --tw-border-opacity: 1;
  border-color: rgb(217 45 32 / var(--tw-border-opacity, 1));
}
.border-danger-bg-soft {
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-border-opacity, 1));
}
.border-danger-border {
  --tw-border-opacity: 1;
  border-color: rgb(249 112 102 / var(--tw-border-opacity, 1));
}
.border-danger-border-medium {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 202 / var(--tw-border-opacity, 1));
}
.border-danger-border-soft {
  --tw-border-opacity: 1;
  border-color: rgb(253 162 155 / var(--tw-border-opacity, 1));
}
.border-danger\/20 {
  border-color: rgb(217 45 32 / 0.2);
}
.border-danger\/30 {
  border-color: rgb(217 45 32 / 0.3);
}
.border-danger\/40 {
  border-color: rgb(217 45 32 / 0.4);
}
.border-info {
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}
.border-info-border-azure {
  --tw-border-opacity: 1;
  border-color: rgb(178 221 255 / var(--tw-border-opacity, 1));
}
.border-info-border-cobalt {
  --tw-border-opacity: 1;
  border-color: rgb(199 215 254 / var(--tw-border-opacity, 1));
}
.border-info-border-sky {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-info-border-soft {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-info-sapphire-deep\/20 {
  border-color: rgb(53 56 205 / 0.2);
}
.border-ink-deep {
  --tw-border-opacity: 1;
  border-color: rgb(24 29 39 / var(--tw-border-opacity, 1));
}
.border-ink-deep\/30 {
  border-color: rgb(24 29 39 / 0.3);
}
.border-ink-deep\/40 {
  border-color: rgb(24 29 39 / 0.4);
}
.border-medium {
  --tw-border-opacity: 1;
  border-color: rgb(213 215 218 / var(--tw-border-opacity, 1));
}
.border-neutral-100 {
  --tw-border-opacity: 1;
  border-color: rgb(246 249 252 / var(--tw-border-opacity, 1));
}
.border-neutral-200 {
  --tw-border-opacity: 1;
  border-color: rgb(240 244 248 / var(--tw-border-opacity, 1));
}
.border-neutral-300 {
  --tw-border-opacity: 1;
  border-color: rgb(192 204 218 / var(--tw-border-opacity, 1));
}
.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-soft {
  --tw-border-opacity: 1;
  border-color: rgb(232 234 240 / var(--tw-border-opacity, 1));
}
.border-success {
  --tw-border-opacity: 1;
  border-color: rgb(23 178 106 / var(--tw-border-opacity, 1));
}
.border-success-600 {
  --tw-border-opacity: 1;
  border-color: rgb(7 148 85 / var(--tw-border-opacity, 1));
}
.border-success-aqua-mint {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-success-border {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-success-border-mint {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-success-border-pale {
  --tw-border-opacity: 1;
  border-color: rgb(171 239 198 / var(--tw-border-opacity, 1));
}
.border-success-border-soft {
  --tw-border-opacity: 1;
  border-color: rgb(209 250 229 / var(--tw-border-opacity, 1));
}
.border-success-deep {
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}
.border-success-jade {
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}
.border-success-leaf {
  --tw-border-opacity: 1;
  border-color: rgb(52 168 83 / var(--tw-border-opacity, 1));
}
.border-success-leaf\/35 {
  border-color: rgb(52 168 83 / 0.35);
}
.border-success-mint-bright {
  --tw-border-opacity: 1;
  border-color: rgb(93 217 164 / var(--tw-border-opacity, 1));
}
.border-success-mint-soft {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}
.border-success-pine {
  --tw-border-opacity: 1;
  border-color: rgb(21 99 58 / var(--tw-border-opacity, 1));
}
.border-surface-app-bright {
  --tw-border-opacity: 1;
  border-color: rgb(245 245 245 / var(--tw-border-opacity, 1));
}
.border-surface-app-mist {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-surface-cool {
  --tw-border-opacity: 1;
  border-color: rgb(240 240 245 / var(--tw-border-opacity, 1));
}
.border-surface-muted {
  --tw-border-opacity: 1;
  border-color: rgb(242 242 242 / var(--tw-border-opacity, 1));
}
.border-surface-muted\/60 {
  border-color: rgb(242 242 242 / 0.6);
}
.border-surface-soft {
  --tw-border-opacity: 1;
  border-color: rgb(245 245 247 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-warning {
  --tw-border-opacity: 1;
  border-color: rgb(247 144 9 / var(--tw-border-opacity, 1));
}
.border-warning-amber-light {
  --tw-border-opacity: 1;
  border-color: rgb(254 223 137 / var(--tw-border-opacity, 1));
}
.border-warning-amber-light-mid {
  --tw-border-opacity: 1;
  border-color: rgb(251 180 118 / var(--tw-border-opacity, 1));
}
.border-warning-amber-strong {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-warning-bg-coral {
  --tw-border-opacity: 1;
  border-color: rgb(255 230 213 / var(--tw-border-opacity, 1));
}
.border-warning-border {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-warning-dark\/30 {
  border-color: rgb(133 77 14 / 0.3);
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/25 {
  border-color: rgb(255 255 255 / 0.25);
}
.border-white\/\[0\.07\] {
  border-color: rgb(255 255 255 / 0.07);
}
.border-t-brand {
  --tw-border-opacity: 1;
  border-top-color: rgb(22 32 91 / var(--tw-border-opacity, 1));
}
.bg-\[\#fff3ee\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 243 238 / var(--tw-bg-opacity, 1));
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(255 74 0 / var(--tw-bg-opacity, 1));
}
.bg-accent-tint {
  --tw-bg-opacity: 1;
  background-color: rgb(255 240 235 / var(--tw-bg-opacity, 1));
}
.bg-accent-tint2 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 246 238 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-black\/15 {
  background-color: rgb(0 0 0 / 0.15);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-border-ash-cool {
  --tw-bg-opacity: 1;
  background-color: rgb(238 240 248 / var(--tw-bg-opacity, 1));
}
.bg-border-cool {
  --tw-bg-opacity: 1;
  background-color: rgb(232 232 237 / var(--tw-bg-opacity, 1));
}
.bg-border-cool-tint {
  --tw-bg-opacity: 1;
  background-color: rgb(240 241 245 / var(--tw-bg-opacity, 1));
}
.bg-border-gray {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-border-gray-pale {
  --tw-bg-opacity: 1;
  background-color: rgb(241 242 245 / var(--tw-bg-opacity, 1));
}
.bg-border-medium {
  --tw-bg-opacity: 1;
  background-color: rgb(213 215 218 / var(--tw-bg-opacity, 1));
}
.bg-border-medium\/70 {
  background-color: rgb(213 215 218 / 0.7);
}
.bg-border-plate-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(224 224 224 / var(--tw-bg-opacity, 1));
}
.bg-border-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(232 234 240 / var(--tw-bg-opacity, 1));
}
.bg-brand {
  --tw-bg-opacity: 1;
  background-color: rgb(22 32 91 / var(--tw-bg-opacity, 1));
}
.bg-brand-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(14 19 41 / var(--tw-bg-opacity, 1));
}
.bg-brand-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(12 18 40 / var(--tw-bg-opacity, 1));
}
.bg-brand-navy {
  --tw-bg-opacity: 1;
  background-color: rgb(32 46 122 / var(--tw-bg-opacity, 1));
}
.bg-brand-tint {
  --tw-bg-opacity: 1;
  background-color: rgb(240 241 255 / var(--tw-bg-opacity, 1));
}
.bg-brand-tint-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 236 255 / var(--tw-bg-opacity, 1));
}
.bg-brand-tint-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 255 / var(--tw-bg-opacity, 1));
}
.bg-brand-tint\/60 {
  background-color: rgb(240 241 255 / 0.6);
}
.bg-brand\/10 {
  background-color: rgb(22 32 91 / 0.1);
}
.bg-brand\/40 {
  background-color: rgb(22 32 91 / 0.4);
}
.bg-brand\/70 {
  background-color: rgb(22 32 91 / 0.7);
}
.bg-danger {
  --tw-bg-opacity: 1;
  background-color: rgb(217 45 32 / var(--tw-bg-opacity, 1));
}
.bg-danger-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-danger-bg-blush {
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 248 / var(--tw-bg-opacity, 1));
}
.bg-danger-bg-cool {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 242 / var(--tw-bg-opacity, 1));
}
.bg-danger-bg-faint {
  --tw-bg-opacity: 1;
  background-color: rgb(255 245 245 / var(--tw-bg-opacity, 1));
}
.bg-danger-bg-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-danger-bg-warm {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 240 / var(--tw-bg-opacity, 1));
}
.bg-danger-orange {
  --tw-bg-opacity: 1;
  background-color: rgb(240 68 56 / var(--tw-bg-opacity, 1));
}
.bg-info {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.bg-info-azure {
  --tw-bg-opacity: 1;
  background-color: rgb(23 92 211 / var(--tw-bg-opacity, 1));
}
.bg-info-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-info-bg-cobalt {
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 255 / var(--tw-bg-opacity, 1));
}
.bg-info-bg-frost {
  --tw-bg-opacity: 1;
  background-color: rgb(239 248 255 / var(--tw-bg-opacity, 1));
}
.bg-info-bg-mist {
  --tw-bg-opacity: 1;
  background-color: rgb(240 242 255 / var(--tw-bg-opacity, 1));
}
.bg-ink-cool {
  --tw-bg-opacity: 1;
  background-color: rgb(113 118 128 / var(--tw-bg-opacity, 1));
}
.bg-ink-deep {
  --tw-bg-opacity: 1;
  background-color: rgb(24 29 39 / var(--tw-bg-opacity, 1));
}
.bg-ink-deep\/25 {
  background-color: rgb(24 29 39 / 0.25);
}
.bg-ink-muted {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-neutral-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(246 249 252 / var(--tw-bg-opacity, 1));
}
.bg-neutral-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 244 248 / var(--tw-bg-opacity, 1));
}
.bg-neutral-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(192 204 218 / var(--tw-bg-opacity, 1));
}
.bg-neutral-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(136 152 170 / var(--tw-bg-opacity, 1));
}
.bg-neutral-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 251 253 / var(--tw-bg-opacity, 1));
}
.bg-neutral-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(26 31 54 / var(--tw-bg-opacity, 1));
}
.bg-neutral-900\/40 {
  background-color: rgb(26 31 54 / 0.4);
}
.bg-neutral-900\/55 {
  background-color: rgb(26 31 54 / 0.55);
}
.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-success {
  --tw-bg-opacity: 1;
  background-color: rgb(23 178 106 / var(--tw-bg-opacity, 1));
}
.bg-success-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(7 148 85 / var(--tw-bg-opacity, 1));
}
.bg-success-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 243 / var(--tw-bg-opacity, 1));
}
.bg-success-bg-deep {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-success-bg-leaf {
  --tw-bg-opacity: 1;
  background-color: rgb(230 244 236 / var(--tw-bg-opacity, 1));
}
.bg-success-bg-mint {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 249 / var(--tw-bg-opacity, 1));
}
.bg-success-bg-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-success-border-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-success-jade {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-success-leaf {
  --tw-bg-opacity: 1;
  background-color: rgb(52 168 83 / var(--tw-bg-opacity, 1));
}
.bg-success-light {
  --tw-bg-opacity: 1;
  background-color: rgb(18 183 106 / var(--tw-bg-opacity, 1));
}
.bg-success-lime {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-success-mint-pale {
  --tw-bg-opacity: 1;
  background-color: rgb(220 250 230 / var(--tw-bg-opacity, 1));
}
.bg-success-pine {
  --tw-bg-opacity: 1;
  background-color: rgb(21 99 58 / var(--tw-bg-opacity, 1));
}
.bg-success-sprout {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-surface-app {
  --tw-bg-opacity: 1;
  background-color: rgb(246 249 252 / var(--tw-bg-opacity, 1));
}
.bg-surface-app-bright {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
.bg-surface-app-cool {
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 247 / var(--tw-bg-opacity, 1));
}
.bg-surface-app-mist {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-surface-app-snow {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-surface-app-warm {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 252 / var(--tw-bg-opacity, 1));
}
.bg-surface-brand-tint {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 255 / var(--tw-bg-opacity, 1));
}
.bg-surface-cool {
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 245 / var(--tw-bg-opacity, 1));
}
.bg-surface-muted {
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1));
}
.bg-surface-muted\/60 {
  background-color: rgb(242 242 242 / 0.6);
}
.bg-surface-sky-pale {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
.bg-surface-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 247 / var(--tw-bg-opacity, 1));
}
.bg-surface-tint {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.bg-surface-tint\/30 {
  background-color: rgb(250 250 250 / 0.3);
}
.bg-surface-tint\/40 {
  background-color: rgb(250 250 250 / 0.4);
}
.bg-surface-tint\/60 {
  background-color: rgb(250 250 250 / 0.6);
}
.bg-transparent {
  background-color: transparent;
}
.bg-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(247 144 9 / var(--tw-bg-opacity, 1));
}
.bg-warning-amber-mid {
  --tw-bg-opacity: 1;
  background-color: rgb(254 200 75 / var(--tw-bg-opacity, 1));
}
.bg-warning-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-warning-bg-amber-pale {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 235 / var(--tw-bg-opacity, 1));
}
.bg-warning-bg-hold {
  --tw-bg-opacity: 1;
  background-color: rgb(255 243 230 / var(--tw-bg-opacity, 1));
}
.bg-warning-bg-honey {
  --tw-bg-opacity: 1;
  background-color: rgb(255 243 224 / var(--tw-bg-opacity, 1));
}
.bg-warning-bg-pale {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-warning-bg-peach-light {
  --tw-bg-opacity: 1;
  background-color: rgb(255 246 237 / var(--tw-bg-opacity, 1));
}
.bg-warning-bg-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-warning-bg-warm {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-warning-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(133 77 14 / var(--tw-bg-opacity, 1));
}
.bg-warning-deep-orange {
  --tw-bg-opacity: 1;
  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));
}
.bg-warning-orange {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-warning-orange-mid {
  --tw-bg-opacity: 1;
  background-color: rgb(220 104 3 / var(--tw-bg-opacity, 1));
}
.bg-warning-tangerine {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/25 {
  background-color: rgb(255 255 255 / 0.25);
}
.bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-card {
  padding: 24px;
}
.p-card-sm {
  padding: 16px;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-14 {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[4px\] {
  padding-left: 4px;
  padding-right: 4px;
}
.px-card {
  padding-left: 24px;
  padding-right: 24px;
}
.px-card-sm {
  padding-left: 16px;
  padding-right: 16px;
}
.px-gutter {
  padding-left: 16px;
  padding-right: 16px;
}
.px-gutter-lg {
  padding-left: 32px;
  padding-right: 32px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-card {
  padding-top: 24px;
  padding-bottom: 24px;
}
.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}
.py-section {
  padding-top: 64px;
  padding-bottom: 64px;
}
.py-section-sm {
  padding-top: 48px;
  padding-bottom: 48px;
}
.py-stack-lg {
  padding-top: 24px;
  padding-bottom: 24px;
}
.py-stack-md {
  padding-top: 16px;
  padding-bottom: 16px;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-28 {
  padding-bottom: 7rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-32 {
  padding-bottom: 8rem;
}
.pb-36 {
  padding-bottom: 9rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-40 {
  padding-bottom: 10rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-56 {
  padding-bottom: 14rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-7 {
  padding-bottom: 1.75rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-\[96px\] {
  padding-bottom: 96px;
}
.pb-\[calc\(0\.75rem\+env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}
.pb-\[calc\(1\.25rem\+env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
}
.pb-\[calc\(1rem\+env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.pb-\[calc\(64px\+env\(safe-area-inset-bottom\2c 0px\)\)\] {
  padding-bottom: calc(64px + env(safe-area-inset-bottom,0px));
}
.pb-\[env\(safe-area-inset-bottom\)\] {
  padding-bottom: env(safe-area-inset-bottom);
}
.pb-\[max\(env\(safe-area-inset-bottom\)\2c 1rem\)\] {
  padding-bottom: max(env(safe-area-inset-bottom), 1rem);
}
.pb-card-sm {
  padding-bottom: 16px;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-11 {
  padding-left: 2.75rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pl-\[52px\] {
  padding-left: 52px;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-11 {
  padding-right: 2.75rem;
}
.pr-12 {
  padding-right: 3rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-14 {
  padding-top: 3.5rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-7 {
  padding-top: 1.75rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pt-\[68px\] {
  padding-top: 68px;
}
.pt-card {
  padding-top: 24px;
}
.pt-card-sm {
  padding-top: 16px;
}
.pt-stack-lg {
  padding-top: 24px;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-baseline {
  vertical-align: baseline;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.font-body {
  font-family: Inter, sans-serif;
}
.font-mono {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.text-2xl {
  font-size: 32px;
  line-height: 1.2;
}
.text-3xl {
  font-size: 44px;
  line-height: 1.1;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[2\.75rem\] {
  font-size: 2.75rem;
}
.text-\[24px\] {
  font-size: 24px;
}
.text-\[28px\] {
  font-size: 28px;
}
.text-\[2rem\] {
  font-size: 2rem;
}
.text-\[32px\] {
  font-size: 32px;
}
.text-base {
  font-size: 16px;
  line-height: 1.5;
}
.text-hero {
  font-size: 64px;
  line-height: 1.0;
}
.text-lg {
  font-size: 20px;
  line-height: 1.35;
}
.text-md {
  font-size: 18px;
  line-height: 1.4;
}
.text-sm {
  font-size: 14px;
  line-height: 1.45;
}
.text-xl {
  font-size: 24px;
  line-height: 1.25;
}
.text-xs {
  font-size: 12px;
  line-height: 1.35;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-4 {
  line-height: 1rem;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-7 {
  line-height: 1.75rem;
}
.leading-8 {
  line-height: 2rem;
}
.leading-\[1\.07\] {
  line-height: 1.07;
}
.leading-\[1\.15\] {
  line-height: 1.15;
}
.leading-\[1\.5\] {
  line-height: 1.5;
}
.leading-\[1\.64\] {
  line-height: 1.64;
}
.leading-\[1\.7\] {
  line-height: 1.7;
}
.leading-\[16px\] {
  line-height: 16px;
}
.leading-\[18px\] {
  line-height: 18px;
}
.leading-\[19px\] {
  line-height: 19px;
}
.leading-\[20px\] {
  line-height: 20px;
}
.leading-\[22px\] {
  line-height: 22px;
}
.leading-\[24px\] {
  line-height: 24px;
}
.leading-\[26px\] {
  line-height: 26px;
}
.leading-\[30px\] {
  line-height: 30px;
}
.leading-\[32px\] {
  line-height: 32px;
}
.leading-\[36px\] {
  line-height: 36px;
}
.leading-\[48px\] {
  line-height: 48px;
}
.leading-none {
  line-height: 1;
}
.leading-normal {
  line-height: 1.5;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.text-accent {
  --tw-text-opacity: 1;
  color: rgb(255 74 0 / var(--tw-text-opacity, 1));
}
.text-accent-hover {
  --tw-text-opacity: 1;
  color: rgb(230 46 5 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-border-cool-light {
  --tw-text-opacity: 1;
  color: rgb(164 176 212 / var(--tw-text-opacity, 1));
}
.text-border-deep {
  --tw-text-opacity: 1;
  color: rgb(176 183 200 / var(--tw-text-opacity, 1));
}
.text-border-medium {
  --tw-text-opacity: 1;
  color: rgb(213 215 218 / var(--tw-text-opacity, 1));
}
.text-border-mist-gray {
  --tw-text-opacity: 1;
  color: rgb(184 190 201 / var(--tw-text-opacity, 1));
}
.text-border-mist-pale {
  --tw-text-opacity: 1;
  color: rgb(212 214 223 / var(--tw-text-opacity, 1));
}
.text-border-plate-soft {
  --tw-text-opacity: 1;
  color: rgb(224 224 224 / var(--tw-text-opacity, 1));
}
.text-brand {
  --tw-text-opacity: 1;
  color: rgb(22 32 91 / var(--tw-text-opacity, 1));
}
.text-brand-ink {
  --tw-text-opacity: 1;
  color: rgb(12 18 40 / var(--tw-text-opacity, 1));
}
.text-brand-light {
  --tw-text-opacity: 1;
  color: rgb(209 214 255 / var(--tw-text-opacity, 1));
}
.text-brand-navy {
  --tw-text-opacity: 1;
  color: rgb(32 46 122 / var(--tw-text-opacity, 1));
}
.text-brand-navy\/80 {
  color: rgb(32 46 122 / 0.8);
}
.text-brand-secondary {
  --tw-text-opacity: 1;
  color: rgb(42 67 160 / var(--tw-text-opacity, 1));
}
.text-brand-tint {
  --tw-text-opacity: 1;
  color: rgb(240 241 255 / var(--tw-text-opacity, 1));
}
.text-brand\/40 {
  color: rgb(22 32 91 / 0.4);
}
.text-brand\/70 {
  color: rgb(22 32 91 / 0.7);
}
.text-current {
  color: currentColor;
}
.text-danger {
  --tw-text-opacity: 1;
  color: rgb(217 45 32 / var(--tw-text-opacity, 1));
}
.text-danger-border {
  --tw-text-opacity: 1;
  color: rgb(249 112 102 / var(--tw-text-opacity, 1));
}
.text-danger-border-light {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-danger-deep {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-danger-deeper {
  --tw-text-opacity: 1;
  color: rgb(180 35 24 / var(--tw-text-opacity, 1));
}
.text-danger-orange {
  --tw-text-opacity: 1;
  color: rgb(240 68 56 / var(--tw-text-opacity, 1));
}
.text-danger-rust-dark {
  --tw-text-opacity: 1;
  color: rgb(154 68 0 / var(--tw-text-opacity, 1));
}
.text-danger-text {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-danger-text-strong {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-danger-umber {
  --tw-text-opacity: 1;
  color: rgb(185 56 21 / var(--tw-text-opacity, 1));
}
.text-danger-umber-dark {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.text-danger\/70 {
  color: rgb(217 45 32 / 0.7);
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-info {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-info-azure {
  --tw-text-opacity: 1;
  color: rgb(23 92 211 / var(--tw-text-opacity, 1));
}
.text-info-darker {
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}
.text-info-periwinkle {
  --tw-text-opacity: 1;
  color: rgb(61 79 158 / var(--tw-text-opacity, 1));
}
.text-info-sapphire-deep {
  --tw-text-opacity: 1;
  color: rgb(53 56 205 / var(--tw-text-opacity, 1));
}
.text-ink-cool {
  --tw-text-opacity: 1;
  color: rgb(113 118 128 / var(--tw-text-opacity, 1));
}
.text-ink-cool\/40 {
  color: rgb(113 118 128 / 0.4);
}
.text-ink-cool\/50 {
  color: rgb(113 118 128 / 0.5);
}
.text-ink-cool\/60 {
  color: rgb(113 118 128 / 0.6);
}
.text-ink-deep {
  --tw-text-opacity: 1;
  color: rgb(24 29 39 / var(--tw-text-opacity, 1));
}
.text-ink-mid-cool {
  --tw-text-opacity: 1;
  color: rgb(85 90 102 / var(--tw-text-opacity, 1));
}
.text-ink-midnight {
  --tw-text-opacity: 1;
  color: rgb(15 23 41 / var(--tw-text-opacity, 1));
}
.text-ink-muted {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-ink-muted\/50 {
  color: rgb(107 114 128 / 0.5);
}
.text-ink-neutral {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-ink-silver {
  --tw-text-opacity: 1;
  color: rgb(164 167 174 / var(--tw-text-opacity, 1));
}
.text-ink-slate {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-ink-strong {
  --tw-text-opacity: 1;
  color: rgb(65 70 81 / var(--tw-text-opacity, 1));
}
.text-neutral-300 {
  --tw-text-opacity: 1;
  color: rgb(192 204 218 / var(--tw-text-opacity, 1));
}
.text-neutral-400 {
  --tw-text-opacity: 1;
  color: rgb(136 152 170 / var(--tw-text-opacity, 1));
}
.text-neutral-500 {
  --tw-text-opacity: 1;
  color: rgb(105 115 134 / var(--tw-text-opacity, 1));
}
.text-neutral-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
}
.text-neutral-700 {
  --tw-text-opacity: 1;
  color: rgb(60 66 87 / var(--tw-text-opacity, 1));
}
.text-neutral-800 {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.text-neutral-900 {
  --tw-text-opacity: 1;
  color: rgb(26 31 54 / var(--tw-text-opacity, 1));
}
.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-success {
  --tw-text-opacity: 1;
  color: rgb(23 178 106 / var(--tw-text-opacity, 1));
}
.text-success-600 {
  --tw-text-opacity: 1;
  color: rgb(7 148 85 / var(--tw-text-opacity, 1));
}
.text-success-700 {
  --tw-text-opacity: 1;
  color: rgb(6 118 71 / var(--tw-text-opacity, 1));
}
.text-success-aqua-light {
  --tw-text-opacity: 1;
  color: rgb(117 224 167 / var(--tw-text-opacity, 1));
}
.text-success-dark {
  --tw-text-opacity: 1;
  color: rgb(2 122 72 / var(--tw-text-opacity, 1));
}
.text-success-deep {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-success-forest\/70 {
  color: rgb(22 101 52 / 0.7);
}
.text-success-fresh {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-success-light {
  --tw-text-opacity: 1;
  color: rgb(18 183 106 / var(--tw-text-opacity, 1));
}
.text-success-mint {
  --tw-text-opacity: 1;
  color: rgb(117 224 167 / var(--tw-text-opacity, 1));
}
.text-success-pine {
  --tw-text-opacity: 1;
  color: rgb(21 99 58 / var(--tw-text-opacity, 1));
}
.text-success-sprout {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-success-text {
  --tw-text-opacity: 1;
  color: rgb(6 118 71 / var(--tw-text-opacity, 1));
}
.text-warning {
  --tw-text-opacity: 1;
  color: rgb(247 144 9 / var(--tw-text-opacity, 1));
}
.text-warning-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-warning-amber {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-warning-dark {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.text-warning-dark\/80 {
  color: rgb(133 77 14 / 0.8);
}
.text-warning-deep-orange {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-warning-orange {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-warning-orange-mid {
  --tw-text-opacity: 1;
  color: rgb(220 104 3 / var(--tw-text-opacity, 1));
}
.text-warning-text {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-warning-umber {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/20 {
  color: rgb(255 255 255 / 0.2);
}
.text-white\/35 {
  color: rgb(255 255 255 / 0.35);
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/45 {
  color: rgb(255 255 255 / 0.45);
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.subpixel-antialiased {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.accent-\[var\(--color-brand\)\] {
  accent-color: var(--color-brand);
}
.accent-brand {
  accent-color: #16205b;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-\[0\.04\] {
  opacity: 0.04;
}
.opacity-\[0\.22\] {
  opacity: 0.22;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-brand\/15 {
  --tw-ring-color: rgb(22 32 91 / 0.15);
}
.ring-white\/15 {
  --tw-ring-color: rgb(255 255 255 / 0.15);
}
.ring-white\/20 {
  --tw-ring-color: rgb(255 255 255 / 0.2);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1 {
  transition-duration: 80ms;
}
.duration-100 {
  transition-duration: 100ms;
}
.duration-2 {
  transition-duration: 160ms;
}
.duration-3 {
  transition-duration: 200ms;
}
.duration-4 {
  transition-duration: 280ms;
}
.duration-6 {
  transition-duration: 480ms;
}
.ease-mh {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ease-spring {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ease-standard {
  transition-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
}
.will-change-transform {
  will-change: transform;
}
.\[max-height\:90dvh\] {
  max-height: 90dvh;
}

/* 2. Shared design-system style bundle (tokens + base + motion + layout +
      utilities + component class layers). */

/* ── Print / "Download PDF" ──────────────────────────────────────────────────
   App chrome must never bleed into a generated PDF: the mobile top bar (logo +
   hamburger menu + account avatar), the bottom navigation, and the footer are
   on-screen affordances only. The print viewport is ~A4 width (below the `lg`
   breakpoint), so `lg:hidden` does NOT hide the mobile chrome — it would print
   unless suppressed here. Individual report pages opt their own bodies into a
   clean print layout via @media print in their component styles. */
@page {
  margin: 14mm;
}

@media print {
  app-header,
  app-mobile-nav,
  app-footer {
    display: none !important;
  }
}

/* Search-result highlight - used by header `highlightMatch()` via [innerHTML].
   Lives at the global level so Angular's HTML sanitiser preserves the class
   (inline `style=` attributes get stripped). */
.mh-search-mark {
  background: #fff3b8;
  border-radius: 2px;
  padding: 0 1px;
  color: inherit;
}

/* Required-field asterisk. Append `*` to any label / inline span that marks
   the field as required so the visual is consistent across products. Uses
   the danger color token (not the brand orange) so the asterisk is read as
   "you must fill this", separate from accent / highlight semantics.
   Usage:
     <label>Amount <span class="field-required" aria-hidden="true"></span></label>
   or inline at the end of a label:
     <span class="field-required" aria-hidden="true"></span>
   Hide from screen readers with aria-hidden and rely on form-field validation
   for assistive tech. */
.field-required::after {
  content: '*';
  color: var(--color-danger);
}
.placeholder\:text-border-cool-medium::placeholder {
  --tw-text-opacity: 1;
  color: rgb(196 201 212 / var(--tw-text-opacity, 1));
}
.placeholder\:text-border-deep::placeholder {
  --tw-text-opacity: 1;
  color: rgb(176 183 200 / var(--tw-text-opacity, 1));
}
.placeholder\:text-ink-cool::placeholder {
  --tw-text-opacity: 1;
  color: rgb(113 118 128 / var(--tw-text-opacity, 1));
}
.placeholder\:text-ink-muted::placeholder {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.placeholder\:text-neutral-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(136 152 170 / var(--tw-text-opacity, 1));
}
.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}
.before\:inset-0::before {
  content: var(--tw-content);
  inset: 0px;
}
.before\:-translate-x-full::before {
  content: var(--tw-content);
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.before\:bg-gradient-to-r::before {
  content: var(--tw-content);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.before\:from-transparent::before {
  content: var(--tw-content);
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.before\:to-transparent::before {
  content: var(--tw-content);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.before\:transition-transform::before {
  content: var(--tw-content);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.before\:duration-6::before {
  content: var(--tw-content);
  transition-duration: 480ms;
}
.first\:border-t-0:first-child {
  border-top-width: 0px;
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
.first\:pt-4:first-child {
  padding-top: 1rem;
}
.last\:flex-none:last-child {
  flex: none;
}
.last\:border-0:last-child {
  border-width: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.last\:border-r-0:last-child {
  border-right-width: 0px;
}
.last\:pb-0:last-child {
  padding-bottom: 0px;
}
.read-only\:bg-surface-tint:read-only {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.read-only\:text-neutral-700:read-only {
  --tw-text-opacity: 1;
  color: rgb(60 66 87 / var(--tw-text-opacity, 1));
}
.empty\:hidden:empty {
  display: none;
}
.focus-within\:border-brand:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(22 32 91 / var(--tw-border-opacity, 1));
}
.focus-within\:shadow-mh-focus:focus-within {
  --tw-shadow: 0 0 0 3px rgba(22,32,91,0.18);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus-within\:ring-2:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-within\:ring-brand\/10:focus-within {
  --tw-ring-color: rgb(22 32 91 / 0.1);
}
.focus-within\:ring-brand\/20:focus-within {
  --tw-ring-color: rgb(22 32 91 / 0.2);
}
.focus-within\:ring-danger-border-soft\/20:focus-within {
  --tw-ring-color: rgb(253 162 155 / 0.2);
}
.focus-within\:ring-success-border\/20:focus-within {
  --tw-ring-color: rgb(187 247 208 / 0.2);
}
@media (hover: hover) and (pointer: fine) {
  .hover\:-translate-y-0\.5:hover {
    --tw-translate-y: -0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .hover\:border:hover {
    border-width: 1px;
  }
  .hover\:border-border-light:hover {
    --tw-border-opacity: 1;
    border-color: rgb(196 203 232 / var(--tw-border-opacity, 1));
  }
  .hover\:border-border-medium:hover {
    --tw-border-opacity: 1;
    border-color: rgb(213 215 218 / var(--tw-border-opacity, 1));
  }
  .hover\:border-border-pearl:hover {
    --tw-border-opacity: 1;
    border-color: rgb(199 206 245 / var(--tw-border-opacity, 1));
  }
  .hover\:border-border-strong:hover {
    --tw-border-opacity: 1;
    border-color: rgb(185 200 224 / var(--tw-border-opacity, 1));
  }
  .hover\:border-brand:hover {
    --tw-border-opacity: 1;
    border-color: rgb(22 32 91 / var(--tw-border-opacity, 1));
  }
  .hover\:border-brand-light:hover {
    --tw-border-opacity: 1;
    border-color: rgb(209 214 255 / var(--tw-border-opacity, 1));
  }
  .hover\:border-danger:hover {
    --tw-border-opacity: 1;
    border-color: rgb(217 45 32 / var(--tw-border-opacity, 1));
  }
  .hover\:border-medium:hover {
    --tw-border-opacity: 1;
    border-color: rgb(213 215 218 / var(--tw-border-opacity, 1));
  }
  .hover\:border-red-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
  }
  .hover\:border-warning-700:hover {
    --tw-border-opacity: 1;
    border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
  }
  .hover\:bg-accent-hover:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(230 46 5 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-accent-tint2:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 246 238 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-black\/5:hover {
    background-color: rgb(0 0 0 / 0.05);
  }
  .hover\:bg-border-cool-tint:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(240 241 245 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-border-gray-soft:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(234 236 240 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-brand-dark:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(14 19 41 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-brand-hover:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(26 40 112 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-brand-tint:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(240 241 255 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-brand-tint-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(250 251 255 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-brand\/10:hover {
    background-color: rgb(22 32 91 / 0.1);
  }
  .hover\:bg-danger:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(217 45 32 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-danger-bg-faint:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 245 245 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-danger-deeper:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(180 35 24 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-danger-text-strong:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-neutral-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(246 249 252 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-surface-app-mist:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-surface-app-snow:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-surface-brand-tint:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 255 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-surface-cool:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(240 240 245 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-surface-muted:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-surface-muted\/60:hover {
    background-color: rgb(242 242 242 / 0.6);
  }
  .hover\:bg-surface-soft:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 247 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-surface-soft\/40:hover {
    background-color: rgb(245 245 247 / 0.4);
  }
  .hover\:bg-surface-soft\/60:hover {
    background-color: rgb(245 245 247 / 0.6);
  }
  .hover\:bg-surface-tint:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-surface-tint\/40:hover {
    background-color: rgb(250 250 250 / 0.4);
  }
  .hover\:bg-surface-tint\/60:hover {
    background-color: rgb(250 250 250 / 0.6);
  }
  .hover\:bg-warning-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-warning-bg-peach:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 244 240 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
  .hover\:bg-white\/10:hover {
    background-color: rgb(255 255 255 / 0.1);
  }
  .hover\:bg-white\/20:hover {
    background-color: rgb(255 255 255 / 0.2);
  }
  .hover\:bg-white\/5:hover {
    background-color: rgb(255 255 255 / 0.05);
  }
  .hover\:font-medium:hover {
    font-weight: 500;
  }
  .hover\:text-accent:hover {
    --tw-text-opacity: 1;
    color: rgb(255 74 0 / var(--tw-text-opacity, 1));
  }
  .hover\:text-border-cool-light:hover {
    --tw-text-opacity: 1;
    color: rgb(164 176 212 / var(--tw-text-opacity, 1));
  }
  .hover\:text-brand:hover {
    --tw-text-opacity: 1;
    color: rgb(22 32 91 / var(--tw-text-opacity, 1));
  }
  .hover\:text-brand-dark:hover {
    --tw-text-opacity: 1;
    color: rgb(14 19 41 / var(--tw-text-opacity, 1));
  }
  .hover\:text-brand-hover:hover {
    --tw-text-opacity: 1;
    color: rgb(26 40 112 / var(--tw-text-opacity, 1));
  }
  .hover\:text-ink-deep:hover {
    --tw-text-opacity: 1;
    color: rgb(24 29 39 / var(--tw-text-opacity, 1));
  }
  .hover\:text-ink-midnight:hover {
    --tw-text-opacity: 1;
    color: rgb(15 23 41 / var(--tw-text-opacity, 1));
  }
  .hover\:text-neutral-400:hover {
    --tw-text-opacity: 1;
    color: rgb(136 152 170 / var(--tw-text-opacity, 1));
  }
  .hover\:text-neutral-700:hover {
    --tw-text-opacity: 1;
    color: rgb(60 66 87 / var(--tw-text-opacity, 1));
  }
  .hover\:text-neutral-800:hover {
    --tw-text-opacity: 1;
    color: rgb(38 38 38 / var(--tw-text-opacity, 1));
  }
  .hover\:text-neutral-900:hover {
    --tw-text-opacity: 1;
    color: rgb(26 31 54 / var(--tw-text-opacity, 1));
  }
  .hover\:text-red-500:hover {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
  }
  .hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
  .hover\:underline:hover {
    text-decoration-line: underline;
  }
  .hover\:no-underline:hover {
    text-decoration-line: none;
  }
  .hover\:opacity-100:hover {
    opacity: 1;
  }
  .hover\:opacity-75:hover {
    opacity: 0.75;
  }
  .hover\:opacity-80:hover {
    opacity: 0.8;
  }
  .hover\:before\:translate-x-full:hover::before {
    content: var(--tw-content);
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
.focus\:border-brand:focus {
  --tw-border-opacity: 1;
  border-color: rgb(22 32 91 / var(--tw-border-opacity, 1));
}
.focus\:bg-brand-tint-50:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 255 / var(--tw-bg-opacity, 1));
}
.focus\:shadow-mh-focus:focus {
  --tw-shadow: 0 0 0 3px rgba(22,32,91,0.18);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-brand\/10:focus {
  --tw-ring-color: rgb(22 32 91 / 0.1);
}
.focus\:ring-brand\/20:focus {
  --tw-ring-color: rgb(22 32 91 / 0.2);
}
.focus\:ring-danger-border-soft\/20:focus {
  --tw-ring-color: rgb(253 162 155 / 0.2);
}
.focus-visible\:border-brand:focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(22 32 91 / var(--tw-border-opacity, 1));
}
.focus-visible\:bg-surface-tint\/40:focus-visible {
  background-color: rgb(250 250 250 / 0.4);
}
.focus-visible\:shadow-mh-focus:focus-visible {
  --tw-shadow: 0 0 0 3px rgba(22,32,91,0.18);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}
.focus-visible\:ring-brand:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(22 32 91 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-brand\/30:focus-visible {
  --tw-ring-color: rgb(22 32 91 / 0.3);
}
.focus-visible\:ring-danger:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 45 32 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-danger\/30:focus-visible {
  --tw-ring-color: rgb(217 45 32 / 0.3);
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.96\]:active {
  --tw-scale-x: 0.96;
  --tw-scale-y: 0.96;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:cursor-grabbing:active {
  cursor: grabbing;
}
.active\:bg-accent-pressed:active {
  --tw-bg-opacity: 1;
  background-color: rgb(196 40 10 / var(--tw-bg-opacity, 1));
}
.active\:bg-brand-hover:active {
  --tw-bg-opacity: 1;
  background-color: rgb(26 40 112 / var(--tw-bg-opacity, 1));
}
.active\:bg-brand-pressed:active {
  --tw-bg-opacity: 1;
  background-color: rgb(14 19 41 / var(--tw-bg-opacity, 1));
}
.active\:bg-brand-tint:active {
  --tw-bg-opacity: 1;
  background-color: rgb(240 241 255 / var(--tw-bg-opacity, 1));
}
.active\:bg-danger-bg-faint:active {
  --tw-bg-opacity: 1;
  background-color: rgb(255 245 245 / var(--tw-bg-opacity, 1));
}
.active\:bg-danger-deeper:active {
  --tw-bg-opacity: 1;
  background-color: rgb(180 35 24 / var(--tw-bg-opacity, 1));
}
.active\:bg-surface-soft:active {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 247 / var(--tw-bg-opacity, 1));
}
.active\:bg-white\/25:active {
  background-color: rgb(255 255 255 / 0.25);
}
.active\:text-brand:active {
  --tw-text-opacity: 1;
  color: rgb(22 32 91 / var(--tw-text-opacity, 1));
}
.active\:text-white:active {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.active\:opacity-60:active {
  opacity: 0.6;
}
.active\:opacity-80:active {
  opacity: 0.8;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:border-border-subtle:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(237 242 247 / var(--tw-border-opacity, 1));
}
.disabled\:bg-neutral-200:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(240 244 248 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-surface-muted:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-white:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.disabled\:text-ink-cool:disabled {
  --tw-text-opacity: 1;
  color: rgb(113 118 128 / var(--tw-text-opacity, 1));
}
.disabled\:text-neutral-300:disabled {
  --tw-text-opacity: 1;
  color: rgb(192 204 218 / var(--tw-text-opacity, 1));
}
.disabled\:text-neutral-400:disabled {
  --tw-text-opacity: 1;
  color: rgb(136 152 170 / var(--tw-text-opacity, 1));
}
.disabled\:text-neutral-700:disabled {
  --tw-text-opacity: 1;
  color: rgb(60 66 87 / var(--tw-text-opacity, 1));
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
@media (hover: hover) and (pointer: fine) {
  .disabled\:hover\:border-border-subtle:hover:disabled {
    --tw-border-opacity: 1;
    border-color: rgb(237 242 247 / var(--tw-border-opacity, 1));
  }
  .disabled\:hover\:bg-neutral-200:hover:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(240 244 248 / var(--tw-bg-opacity, 1));
  }
  .disabled\:hover\:bg-transparent:hover:disabled {
    background-color: transparent;
  }
  .disabled\:hover\:bg-white:hover:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
  .disabled\:hover\:text-neutral-300:hover:disabled {
    --tw-text-opacity: 1;
    color: rgb(192 204 218 / var(--tw-text-opacity, 1));
  }
}
.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@media (hover: hover) and (pointer: fine) {
  .group:hover .group-hover\:translate-x-0\.5 {
    --tw-translate-x: 0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .group:hover .group-hover\:translate-x-1 {
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .group:hover .group-hover\:scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .group:hover .group-hover\:scale-110 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .group:hover .group-hover\:border-border-deep {
    --tw-border-opacity: 1;
    border-color: rgb(176 183 200 / var(--tw-border-opacity, 1));
  }
  .group:hover .group-hover\:bg-brand-tint {
    --tw-bg-opacity: 1;
    background-color: rgb(240 241 255 / var(--tw-bg-opacity, 1));
  }
  .group:hover .group-hover\:text-brand {
    --tw-text-opacity: 1;
    color: rgb(22 32 91 / var(--tw-text-opacity, 1));
  }
  .group:hover .group-hover\:text-ink-deep {
    --tw-text-opacity: 1;
    color: rgb(24 29 39 / var(--tw-text-opacity, 1));
  }
  .group:hover .group-hover\:text-neutral-700 {
    --tw-text-opacity: 1;
    color: rgb(60 66 87 / var(--tw-text-opacity, 1));
  }
}
.group:focus-visible .group-focus-visible\:ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.group:focus-visible .group-focus-visible\:ring-brand\/30 {
  --tw-ring-color: rgb(22 32 91 / 0.3);
}
.peer:focus-visible ~ .peer-focus-visible\:ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.peer:focus-visible ~ .peer-focus-visible\:ring-brand\/30 {
  --tw-ring-color: rgb(22 32 91 / 0.3);
}
.aria-disabled\:border-border-subtle[aria-disabled="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(237 242 247 / var(--tw-border-opacity, 1));
}
.aria-disabled\:bg-neutral-200[aria-disabled="true"] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 244 248 / var(--tw-bg-opacity, 1));
}
.aria-disabled\:bg-white[aria-disabled="true"] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.aria-disabled\:text-neutral-300[aria-disabled="true"] {
  --tw-text-opacity: 1;
  color: rgb(192 204 218 / var(--tw-text-opacity, 1));
}
.aria-disabled\:text-neutral-400[aria-disabled="true"] {
  --tw-text-opacity: 1;
  color: rgb(136 152 170 / var(--tw-text-opacity, 1));
}
@media (hover: hover) and (pointer: fine) {
  .aria-disabled\:hover\:border-border-subtle:hover[aria-disabled="true"] {
    --tw-border-opacity: 1;
    border-color: rgb(237 242 247 / var(--tw-border-opacity, 1));
  }
  .aria-disabled\:hover\:bg-neutral-200:hover[aria-disabled="true"] {
    --tw-bg-opacity: 1;
    background-color: rgb(240 244 248 / var(--tw-bg-opacity, 1));
  }
  .aria-disabled\:hover\:bg-transparent:hover[aria-disabled="true"] {
    background-color: transparent;
  }
  .aria-disabled\:hover\:bg-white:hover[aria-disabled="true"] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
  .aria-disabled\:hover\:text-neutral-300:hover[aria-disabled="true"] {
    --tw-text-opacity: 1;
    color: rgb(192 204 218 / var(--tw-text-opacity, 1));
  }
}
@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:animate-none {
    animation: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .motion-reduce\:hover\:translate-y-0:hover {
      --tw-translate-y: 0px;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
  }
  .motion-reduce\:active\:scale-100:active {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
@media not all and (min-width: 1024px) {
  .max-lg\:hidden {
    display: none;
  }
}
@media (min-width: 640px) {
  .sm\:static {
    position: static;
  }
  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }
  .sm\:mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .sm\:ml-auto {
    margin-left: auto;
  }
  .sm\:block {
    display: block;
  }
  .sm\:inline {
    display: inline;
  }
  .sm\:flex {
    display: flex;
  }
  .sm\:table {
    display: table;
  }
  .sm\:grid {
    display: grid;
  }
  .sm\:hidden {
    display: none;
  }
  .sm\:h-10 {
    height: 2.5rem;
  }
  .sm\:h-11 {
    height: 2.75rem;
  }
  .sm\:h-2 {
    height: 0.5rem;
  }
  .sm\:h-20 {
    height: 5rem;
  }
  .sm\:h-9 {
    height: 2.25rem;
  }
  .sm\:max-h-none {
    max-height: none;
  }
  .sm\:min-h-0 {
    min-height: 0px;
  }
  .sm\:w-10 {
    width: 2.5rem;
  }
  .sm\:w-11 {
    width: 2.75rem;
  }
  .sm\:w-20 {
    width: 5rem;
  }
  .sm\:w-56 {
    width: 14rem;
  }
  .sm\:w-9 {
    width: 2.25rem;
  }
  .sm\:w-\[50vw\] {
    width: 50vw;
  }
  .sm\:w-auto {
    width: auto;
  }
  .sm\:min-w-0 {
    min-width: 0px;
  }
  .sm\:min-w-\[560px\] {
    min-width: 560px;
  }
  .sm\:max-w-2xl {
    max-width: 42rem;
  }
  .sm\:max-w-\[200px\] {
    max-width: 200px;
  }
  .sm\:max-w-\[260px\] {
    max-width: 260px;
  }
  .sm\:max-w-\[420px\] {
    max-width: 420px;
  }
  .sm\:max-w-\[480px\] {
    max-width: 480px;
  }
  .sm\:max-w-\[900px\] {
    max-width: 900px;
  }
  .sm\:max-w-md {
    max-width: 28rem;
  }
  .sm\:max-w-sm {
    max-width: 24rem;
  }
  .sm\:max-w-xl {
    max-width: 36rem;
  }
  .sm\:flex-1 {
    flex: 1 1 0%;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .sm\:items-start {
    align-items: flex-start;
  }
  .sm\:items-end {
    align-items: flex-end;
  }
  .sm\:items-center {
    align-items: center;
  }
  .sm\:justify-end {
    justify-content: flex-end;
  }
  .sm\:justify-between {
    justify-content: space-between;
  }
  .sm\:gap-1 {
    gap: 0.25rem;
  }
  .sm\:gap-2 {
    gap: 0.5rem;
  }
  .sm\:gap-3 {
    gap: 0.75rem;
  }
  .sm\:gap-4 {
    gap: 1rem;
  }
  .sm\:gap-5 {
    gap: 1.25rem;
  }
  .sm\:gap-6 {
    gap: 1.5rem;
  }
  .sm\:gap-x-8 {
    column-gap: 2rem;
  }
  .sm\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }
  .sm\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }
  .sm\:rounded-card {
    border-radius: 8px;
  }
  .sm\:border-b {
    border-bottom-width: 1px;
  }
  .sm\:border-l {
    border-left-width: 1px;
  }
  .sm\:border-r {
    border-right-width: 1px;
  }
  .sm\:border-t-0 {
    border-top-width: 0px;
  }
  .sm\:border-border-soft {
    --tw-border-opacity: 1;
    border-color: rgb(232 234 240 / var(--tw-border-opacity, 1));
  }
  .sm\:p-4 {
    padding: 1rem;
  }
  .sm\:p-5 {
    padding: 1.25rem;
  }
  .sm\:p-6 {
    padding: 1.5rem;
  }
  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .sm\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .sm\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .sm\:pb-0 {
    padding-bottom: 0px;
  }
  .sm\:pb-card {
    padding-bottom: 24px;
  }
  .sm\:pl-12 {
    padding-left: 3rem;
  }
  .sm\:pl-5 {
    padding-left: 1.25rem;
  }
  .sm\:pr-5 {
    padding-right: 1.25rem;
  }
  .sm\:pt-5 {
    padding-top: 1.25rem;
  }
  .sm\:pt-card {
    padding-top: 24px;
  }
  .sm\:text-right {
    text-align: right;
  }
  .sm\:text-2xl {
    font-size: 32px;
    line-height: 1.2;
  }
  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
  .sm\:text-sm {
    font-size: 14px;
    line-height: 1.45;
  }
}
@media (min-width: 768px) {
  .md\:left-auto {
    left: auto;
  }
  .md\:right-6 {
    right: 1.5rem;
  }
  .md\:mb-6 {
    margin-bottom: 1.5rem;
  }
  .md\:mt-4 {
    margin-top: 1rem;
  }
  .md\:mt-8 {
    margin-top: 2rem;
  }
  .md\:block {
    display: block;
  }
  .md\:flex {
    display: flex;
  }
  .md\:inline-flex {
    display: inline-flex;
  }
  .md\:grid {
    display: grid;
  }
  .md\:hidden {
    display: none;
  }
  .md\:w-\[min\(440px\2c calc\(100vw-32px\)\)\] {
    width: min(440px, calc(100vw - 32px));
  }
  .md\:w-auto {
    width: auto;
  }
  .md\:min-w-\[280px\] {
    min-width: 280px;
  }
  .md\:max-w-\[380px\] {
    max-width: 380px;
  }
  .md\:max-w-\[420px\] {
    max-width: 420px;
  }
  .md\:max-w-\[480px\] {
    max-width: 480px;
  }
  .md\:shrink-0 {
    flex-shrink: 0;
  }
  .md\:translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:items-start {
    align-items: flex-start;
  }
  .md\:items-end {
    align-items: flex-end;
  }
  .md\:items-center {
    align-items: center;
  }
  .md\:justify-end {
    justify-content: flex-end;
  }
  .md\:justify-between {
    justify-content: space-between;
  }
  .md\:gap-3 {
    gap: 0.75rem;
  }
  .md\:gap-4 {
    gap: 1rem;
  }
  .md\:gap-6 {
    gap: 1.5rem;
  }
  .md\:gap-8 {
    gap: 2rem;
  }
  .md\:overflow-hidden {
    overflow: hidden;
  }
  .md\:rounded-card {
    border-radius: 8px;
  }
  .md\:border {
    border-width: 1px;
  }
  .md\:border-surface-muted {
    --tw-border-opacity: 1;
    border-color: rgb(242 242 242 / var(--tw-border-opacity, 1));
  }
  .md\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
  .md\:p-4 {
    padding: 1rem;
  }
  .md\:p-5 {
    padding: 1.25rem;
  }
  .md\:p-6 {
    padding: 1.5rem;
  }
  .md\:p-8 {
    padding: 2rem;
  }
  .md\:p-card {
    padding: 24px;
  }
  .md\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .md\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .md\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .md\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .md\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .md\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .md\:pb-6 {
    padding-bottom: 1.5rem;
  }
  .md\:pt-8 {
    padding-top: 2rem;
  }
  .md\:text-2xl {
    font-size: 32px;
    line-height: 1.2;
  }
  .md\:text-3xl {
    font-size: 44px;
    line-height: 1.1;
  }
  .md\:text-base {
    font-size: 16px;
    line-height: 1.5;
  }
  .md\:text-lg {
    font-size: 20px;
    line-height: 1.35;
  }
}
@media (min-width: 1024px) {
  .lg\:static {
    position: static;
  }
  .lg\:sticky {
    position: sticky;
  }
  .lg\:bottom-6 {
    bottom: 1.5rem;
  }
  .lg\:left-12 {
    left: 3rem;
  }
  .lg\:right-\[max\(1rem\2c calc\(\(100vw-1280px\)\/2\+2rem\)\)\] {
    right: max(1rem, calc((100vw - 1280px) / 2 + 2rem));
  }
  .lg\:top-20 {
    top: 5rem;
  }
  .lg\:top-24 {
    top: 6rem;
  }
  .lg\:top-5 {
    top: 1.25rem;
  }
  .lg\:top-6 {
    top: 1.5rem;
  }
  .lg\:top-\[88px\] {
    top: 88px;
  }
  .lg\:order-1 {
    order: 1;
  }
  .lg\:order-2 {
    order: 2;
  }
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .lg\:m-4 {
    margin: 1rem;
  }
  .lg\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
  .lg\:-mx-gutter-lg {
    margin-left: -32px;
    margin-right: -32px;
  }
  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }
  .lg\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .lg\:-mb-6 {
    margin-bottom: -1.5rem;
  }
  .lg\:mb-12 {
    margin-bottom: 3rem;
  }
  .lg\:mb-6 {
    margin-bottom: 1.5rem;
  }
  .lg\:mb-7 {
    margin-bottom: 1.75rem;
  }
  .lg\:mt-2 {
    margin-top: 0.5rem;
  }
  .lg\:mt-6 {
    margin-top: 1.5rem;
  }
  .lg\:block {
    display: block;
  }
  .lg\:inline {
    display: inline;
  }
  .lg\:flex {
    display: flex;
  }
  .lg\:inline-flex {
    display: inline-flex;
  }
  .lg\:grid {
    display: grid;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:h-11 {
    height: 2.75rem;
  }
  .lg\:h-12 {
    height: 3rem;
  }
  .lg\:h-16 {
    height: 4rem;
  }
  .lg\:h-\[210px\] {
    height: 210px;
  }
  .lg\:h-\[52px\] {
    height: 52px;
  }
  .lg\:h-auto {
    height: auto;
  }
  .lg\:min-h-\[calc\(100vh-68px\)\] {
    min-height: calc(100vh - 68px);
  }
  .lg\:w-1\/2 {
    width: 50%;
  }
  .lg\:w-1\/3 {
    width: 33.333333%;
  }
  .lg\:w-12 {
    width: 3rem;
  }
  .lg\:w-16 {
    width: 4rem;
  }
  .lg\:w-36 {
    width: 9rem;
  }
  .lg\:w-40 {
    width: 10rem;
  }
  .lg\:w-44 {
    width: 11rem;
  }
  .lg\:w-80 {
    width: 20rem;
  }
  .lg\:w-\[264px\] {
    width: 264px;
  }
  .lg\:w-\[300\%\] {
    width: 300%;
  }
  .lg\:w-\[45\%\] {
    width: 45%;
  }
  .lg\:w-\[480px\] {
    width: 480px;
  }
  .lg\:w-\[52px\] {
    width: 52px;
  }
  .lg\:w-auto {
    width: auto;
  }
  .lg\:max-w-\[400px\] {
    max-width: 400px;
  }
  .lg\:max-w-\[420px\] {
    max-width: 420px;
  }
  .lg\:max-w-\[440px\] {
    max-width: 440px;
  }
  .lg\:max-w-\[460px\] {
    max-width: 460px;
  }
  .lg\:max-w-\[480px\] {
    max-width: 480px;
  }
  .lg\:max-w-\[900px\] {
    max-width: 900px;
  }
  .lg\:max-w-md {
    max-width: 28rem;
  }
  .lg\:max-w-none {
    max-width: none;
  }
  .lg\:max-w-sm {
    max-width: 24rem;
  }
  .lg\:flex-none {
    flex: none;
  }
  .lg\:shrink-0 {
    flex-shrink: 0;
  }
  .lg\:basis-\[calc\(50\%-0\.25rem\)\] {
    flex-basis: calc(50% - 0.25rem);
  }
  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lg\:grid-cols-\[1fr\2c 1\.6fr\] {
    grid-template-columns: 1fr 1.6fr;
  }
  .lg\:grid-cols-\[1fr\2c 360px\] {
    grid-template-columns: 1fr 360px;
  }
  .lg\:grid-cols-\[1fr_320px\] {
    grid-template-columns: 1fr 320px;
  }
  .lg\:grid-cols-\[1fr_340px\] {
    grid-template-columns: 1fr 340px;
  }
  .lg\:grid-cols-\[1fr_360px\] {
    grid-template-columns: 1fr 360px;
  }
  .lg\:grid-cols-\[1fr_460px\] {
    grid-template-columns: 1fr 460px;
  }
  .lg\:grid-cols-\[minmax\(0\2c 0\.85fr\)_minmax\(0\2c 1\.15fr\)\] {
    grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr);
  }
  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_340px\] {
    grid-template-columns: minmax(0,1fr) 340px;
  }
  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_360px\] {
    grid-template-columns: minmax(0,1fr) 360px;
  }
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:flex-wrap {
    flex-wrap: wrap;
  }
  .lg\:items-start {
    align-items: flex-start;
  }
  .lg\:items-end {
    align-items: flex-end;
  }
  .lg\:items-center {
    align-items: center;
  }
  .lg\:justify-center {
    justify-content: center;
  }
  .lg\:justify-between {
    justify-content: space-between;
  }
  .lg\:gap-0 {
    gap: 0px;
  }
  .lg\:gap-10 {
    gap: 2.5rem;
  }
  .lg\:gap-16 {
    gap: 4rem;
  }
  .lg\:gap-2 {
    gap: 0.5rem;
  }
  .lg\:gap-20 {
    gap: 5rem;
  }
  .lg\:gap-3 {
    gap: 0.75rem;
  }
  .lg\:gap-4 {
    gap: 1rem;
  }
  .lg\:gap-5 {
    gap: 1.25rem;
  }
  .lg\:gap-6 {
    gap: 1.5rem;
  }
  .lg\:gap-7 {
    gap: 1.75rem;
  }
  .lg\:gap-8 {
    gap: 2rem;
  }
  .lg\:gap-x-6 {
    column-gap: 1.5rem;
  }
  .lg\:gap-x-8 {
    column-gap: 2rem;
  }
  .lg\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }
  .lg\:divide-border-soft > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(232 234 240 / var(--tw-divide-opacity, 1));
  }
  .lg\:overflow-hidden {
    overflow: hidden;
  }
  .lg\:rounded-card {
    border-radius: 8px;
  }
  .lg\:border {
    border-width: 1px;
  }
  .lg\:border-0 {
    border-width: 0px;
  }
  .lg\:border-soft {
    --tw-border-opacity: 1;
    border-color: rgb(232 234 240 / var(--tw-border-opacity, 1));
  }
  .lg\:bg-transparent {
    background-color: transparent;
  }
  .lg\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
  .lg\:p-0 {
    padding: 0px;
  }
  .lg\:p-4 {
    padding: 1rem;
  }
  .lg\:p-5 {
    padding: 1.25rem;
  }
  .lg\:p-6 {
    padding: 1.5rem;
  }
  .lg\:p-7 {
    padding: 1.75rem;
  }
  .lg\:p-8 {
    padding: 2rem;
  }
  .lg\:p-card {
    padding: 24px;
  }
  .lg\:p-card-lg {
    padding: 32px;
  }
  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .lg\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .lg\:px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }
  .lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .lg\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .lg\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .lg\:px-card {
    padding-left: 24px;
    padding-right: 24px;
  }
  .lg\:px-gutter-lg {
    padding-left: 32px;
    padding-right: 32px;
  }
  .lg\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .lg\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .lg\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .lg\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .lg\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .lg\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .lg\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .lg\:py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
  .lg\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .lg\:pb-0 {
    padding-bottom: 0px;
  }
  .lg\:pb-1 {
    padding-bottom: 0.25rem;
  }
  .lg\:pb-12 {
    padding-bottom: 3rem;
  }
  .lg\:pb-14 {
    padding-bottom: 3.5rem;
  }
  .lg\:pb-16 {
    padding-bottom: 4rem;
  }
  .lg\:pb-20 {
    padding-bottom: 5rem;
  }
  .lg\:pb-24 {
    padding-bottom: 6rem;
  }
  .lg\:pb-4 {
    padding-bottom: 1rem;
  }
  .lg\:pb-5 {
    padding-bottom: 1.25rem;
  }
  .lg\:pb-6 {
    padding-bottom: 1.5rem;
  }
  .lg\:pb-8 {
    padding-bottom: 2rem;
  }
  .lg\:pb-card {
    padding-bottom: 24px;
  }
  .lg\:pl-12 {
    padding-left: 3rem;
  }
  .lg\:pr-12 {
    padding-right: 3rem;
  }
  .lg\:pr-20 {
    padding-right: 5rem;
  }
  .lg\:pt-10 {
    padding-top: 2.5rem;
  }
  .lg\:pt-12 {
    padding-top: 3rem;
  }
  .lg\:pt-2 {
    padding-top: 0.5rem;
  }
  .lg\:pt-5 {
    padding-top: 1.25rem;
  }
  .lg\:pt-6 {
    padding-top: 1.5rem;
  }
  .lg\:pt-7 {
    padding-top: 1.75rem;
  }
  .lg\:pt-8 {
    padding-top: 2rem;
  }
  .lg\:pt-9 {
    padding-top: 2.25rem;
  }
  .lg\:text-left {
    text-align: left;
  }
  .lg\:text-2xl {
    font-size: 32px;
    line-height: 1.2;
  }
  .lg\:text-3xl {
    font-size: 44px;
    line-height: 1.1;
  }
  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
  .lg\:text-\[30px\] {
    font-size: 30px;
  }
  .lg\:text-\[36px\] {
    font-size: 36px;
  }
  .lg\:text-\[40px\] {
    font-size: 40px;
  }
  .lg\:text-\[56px\] {
    font-size: 56px;
  }
  .lg\:text-base {
    font-size: 16px;
    line-height: 1.5;
  }
  .lg\:text-lg {
    font-size: 20px;
    line-height: 1.35;
  }
  .lg\:text-sm {
    font-size: 14px;
    line-height: 1.45;
  }
  .lg\:text-xl {
    font-size: 24px;
    line-height: 1.25;
  }
  .lg\:font-normal {
    font-weight: 400;
  }
  .lg\:normal-case {
    text-transform: none;
  }
  .lg\:leading-\[28px\] {
    line-height: 28px;
  }
  .lg\:leading-\[30px\] {
    line-height: 30px;
  }
  .lg\:text-ink-cool {
    --tw-text-opacity: 1;
    color: rgb(113 118 128 / var(--tw-text-opacity, 1));
  }
}
@media (min-width: 1280px) {
  .xl\:flex {
    display: flex;
  }
  .xl\:w-\[360px\] {
    width: 360px;
  }
}
@media (min-width: 1440px) {
  .min-\[1440px\]\:grid-cols-\[1fr_360px\] {
    grid-template-columns: 1fr 360px;
  }
}
@media print {
  .print\:block {
    display: block;
  }
  .print\:inline {
    display: inline;
  }
  .print\:hidden {
    display: none;
  }
}
.\[\&\>svg\]\:block>svg {
  display: block;
}
.\[\&\>svg\]\:h-full>svg {
  height: 100%;
}
.\[\&\>svg\]\:w-full>svg {
  width: 100%;
}


/*# sourceMappingURL=styles.css.map*/